From 1c7bb79b19a836b9354b02041daa097ca8fe7a80 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 5 Sep 2026 21:56:23 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Prevent=20sidebar=20l?=
 =?UTF-8?q?ayout=20overflow=20for=20long=20text=20and=20lists?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cli/ui/components/sidebar/FileContext.tsx | 27 ++++++++++---
 .../ui/components/sidebar/MissionControl.tsx  | 40 +++++++++++++------
 2 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/src/cli/ui/components/sidebar/FileContext.tsx b/src/cli/ui/components/sidebar/FileContext.tsx
index badf6f1c..a9043c6f 100644
--- a/src/cli/ui/components/sidebar/FileContext.tsx
+++ b/src/cli/ui/components/sidebar/FileContext.tsx
@@ -5,6 +5,7 @@ import { useUIStore } from '../../store/context.js';
 
 export const FileContext: React.FC = () => {
   const { state } = useUIStore();
+  const maxVisible = 5;
 
   return (
     <Box flexDirection="column">
@@ -17,12 +18,26 @@ export const FileContext: React.FC = () => {
             No changes detected.
           </Text>
         ) : (
-          state.changedFiles.map((file) => (
-            <Box key={file}>
-              <Text color="yellow">M </Text>
-              <Text color="white">{file}</Text>
-            </Box>
-          ))
+          <>
+            {state.changedFiles.slice(0, maxVisible).map((file) => (
+              <Box key={file} flexDirection="row" flexGrow={1}>
+                <Text color="yellow">M </Text>
+                <Box flexGrow={1} flexDirection="row">
+                  <Text color="white" wrap="truncate">
+                    {file}
+                  </Text>
+                </Box>
+              </Box>
+            ))}
+            {state.changedFiles.length > maxVisible && (
+              <Box flexDirection="row">
+                <Text color="gray" dimColor>
+                  ... and {state.changedFiles.length - maxVisible} more file
+                  {state.changedFiles.length - maxVisible === 1 ? '' : 's'}
+                </Text>
+              </Box>
+            )}
+          </>
         )}
       </Box>
     </Box>
diff --git a/src/cli/ui/components/sidebar/MissionControl.tsx b/src/cli/ui/components/sidebar/MissionControl.tsx
index fd68624e..ae53283a 100644
--- a/src/cli/ui/components/sidebar/MissionControl.tsx
+++ b/src/cli/ui/components/sidebar/MissionControl.tsx
@@ -5,6 +5,7 @@ import { useUIStore } from '../../store/context.js';
 
 export const MissionControl: React.FC = () => {
   const { state } = useUIStore();
+  const maxVisible = 5;
 
   return (
     <Box flexDirection="column">
@@ -17,19 +18,32 @@ export const MissionControl: React.FC = () => {
             No active tasks.
           </Text>
         ) : (
-          state.missionTasks.map((task) => (
-            <Box key={task.id}>
-              <Text color={task.status === 'completed' ? 'gray' : 'cyan'}>
-                {task.status === 'completed' ? '[x] ' : '[ ] '}
-              </Text>
-              <Text
-                color={task.status === 'completed' ? 'gray' : 'white'}
-                strikethrough={task.status === 'completed'}
-              >
-                {task.content}
-              </Text>
-            </Box>
-          ))
+          <>
+            {state.missionTasks.slice(0, maxVisible).map((task) => (
+              <Box key={task.id} flexDirection="row" flexGrow={1}>
+                <Text color={task.status === 'completed' ? 'gray' : 'cyan'}>
+                  {task.status === 'completed' ? '[x] ' : '[ ] '}
+                </Text>
+                <Box flexGrow={1} flexDirection="row">
+                  <Text
+                    color={task.status === 'completed' ? 'gray' : 'white'}
+                    strikethrough={task.status === 'completed'}
+                    wrap="truncate"
+                  >
+                    {task.content}
+                  </Text>
+                </Box>
+              </Box>
+            ))}
+            {state.missionTasks.length > maxVisible && (
+              <Box flexDirection="row">
+                <Text color="gray" dimColor>
+                  ... and {state.missionTasks.length - maxVisible} more task
+                  {state.missionTasks.length - maxVisible === 1 ? '' : 's'}
+                </Text>
+              </Box>
+            )}
+          </>
         )}
       </Box>
     </Box>