diff --git a/.jules/palette.md b/.jules/palette.md index 559dc665..03a717da 100644 --- a/.jules/palette.md +++ b/.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"`. diff --git a/src/cli/ui/components/sidebar/MissionControl.tsx b/src/cli/ui/components/sidebar/MissionControl.tsx index fd68624e..46f99bf8 100644 --- a/src/cli/ui/components/sidebar/MissionControl.tsx +++ b/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 ( @@ -17,19 +20,39 @@ export const MissionControl: React.FC = () => { No active tasks. ) : ( - state.missionTasks.map((task) => ( - - - {task.status === 'completed' ? '[x] ' : '[ ] '} - - - {task.content} - - - )) + <> + {visibleTasks.map((task) => ( + + + + {task.status === 'completed' ? '[x] ' : '[ ] '} + + + + + {task.content} + + + + ))} + {state.missionTasks.length > maxVisible && ( + + + + + + + ... and {state.missionTasks.length - maxVisible} more task + {state.missionTasks.length - maxVisible === 1 ? '' : 's'} + + + + )} + )}