🎨 Palette: Limit visible tasks in MissionControl

.jules/palette.md

@@ -1,3 +1,7 @@
 ## 2026-08-29 - Truncation Awareness
 **Learning:** When displaying dynamic lists in terminal UIs (such as those using `ink`), if the list is truncated to fit constraints (e.g., a `maxVisible` limit), it is important to include an explicit visual indicator to preserve user situational awareness.
 **Action:** Always add an explicit UI element indicating truncation and count, rather than silently hiding items.
+
+## 2026-09-04 - Text Wrapping in Ink Sidebar
+**Learning:** In terminal UIs with constrained sidebar width, long strings break layout and formatting if not handled properly. Text elements need `wrap="truncate"` within a `Box` that uses `flexGrow=1` in a `flexDirection="row"` layout to behave well.
+**Action:** When adding task lists or freeform text to sidebars, always use `Box` with `flexGrow` and `Text` with `wrap="truncate"`.

src/cli/ui/components/sidebar/MissionControl.tsx

@@ -6,6 +6,9 @@ import { useUIStore } from '../../store/context.js';
 export const MissionControl: React.FC = () => {
   const { state } = useUIStore();
 
+  const maxVisible = 5;
+  const visibleTasks = state.missionTasks.slice(0, Math.max(0, maxVisible));
+
   return (
     <Box flexDirection="column">
       <Text bold color="white">
@@ -17,19 +20,39 @@ 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>
-          ))
+          <>
+            {visibleTasks.map((task) => (
+              <Box key={task.id} flexDirection="row">
+                <Box width={4}>
+                  <Text color={task.status === 'completed' ? 'gray' : 'cyan'}>
+                    {task.status === 'completed' ? '[x] ' : '[ ] '}
+                  </Text>
+                </Box>
+                <Box flexGrow={1}>
+                  <Text
+                    wrap="truncate"
+                    color={task.status === 'completed' ? 'gray' : 'white'}
+                    strikethrough={task.status === 'completed'}
+                  >
+                    {task.content}
+                  </Text>
+                </Box>
+              </Box>
+            ))}
+            {state.missionTasks.length > maxVisible && (
+              <Box flexDirection="row">
+                <Box width={4}>
+                  <Text> </Text>
+                </Box>
+                <Box flexGrow={1}>
+                  <Text color="gray" dimColor>
+                    ... and {state.missionTasks.length - maxVisible} more task
+                    {state.missionTasks.length - maxVisible === 1 ? '' : 's'}
+                  </Text>
+                </Box>
+              </Box>
+            )}
+          </>
         )}
       </Box>
     </Box>