From f7710d8b5b9eb3ce571f17fe30f70ddc2917f916 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 24 Aug 2026 21:48:40 +0000
Subject: [PATCH] feat(ui): add visual truncation indicator to TodoDrawer

When the TodoDrawer limits the visible tasks (maxVisible), it previously
cut off the list without any indication, which diminished situational
awareness.

This change adds an explicit indicator ('... and X more tasks') at the
bottom of the list when tasks are truncated.
---
 .jules/palette.md                    |  3 +++
 bun.lock                             |  1 -
 src/cli/ui/components/TodoDrawer.tsx | 39 ++++++++++++++++++----------
 3 files changed, 29 insertions(+), 14 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 00000000..89f0062f
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-08-24 - [List Truncation Indicator]
+**Learning:** [When displaying dynamic lists in terminal UIs, truncating elements to fit constraints without feedback diminishes situational awareness.]
+**Action:** [Always include an explicit visual indicator (like '... and X more tasks') when lists are truncated due to a maxVisible limit.]
diff --git a/bun.lock b/bun.lock
index f1109aa4..d19f7943 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "salmon-loop",
diff --git a/src/cli/ui/components/TodoDrawer.tsx b/src/cli/ui/components/TodoDrawer.tsx
index 8304d871..06cea0db 100644
--- a/src/cli/ui/components/TodoDrawer.tsx
+++ b/src/cli/ui/components/TodoDrawer.tsx
@@ -118,21 +118,34 @@ export function TodoDrawer({
               No tasks yet.
             </Text>
           ) : (
-            visibleTodos.map((t) => (
-              <Box key={t.id} flexDirection="row">
-                <Box width={4}>
-                  <Text color={statusColor(t.status)}>{statusIcon(t.status)}</Text>
+            <>
+              {visibleTodos.map((t) => (
+                <Box key={t.id} flexDirection="row">
+                  <Box width={4}>
+                    <Text color={statusColor(t.status)}>{statusIcon(t.status)}</Text>
+                  </Box>
+                  <Box width={2}>
+                    <Text color={priorityColor(t.priority)}>{priorityIcon(t.priority)}</Text>
+                  </Box>
+                  <Box flexGrow={1}>
+                    <Text wrap="truncate" color={COLORS.text.primary}>
+                      {t.text}
+                    </Text>
+                  </Box>
                 </Box>
-                <Box width={2}>
-                  <Text color={priorityColor(t.priority)}>{priorityIcon(t.priority)}</Text>
+              ))}
+              {todos.length > visibleTodos.length && (
+                <Box flexDirection="row">
+                  <Box width={6} />
+                  <Box flexGrow={1}>
+                    <Text color={COLORS.text.muted} dimColor>
+                      ... and {todos.length - visibleTodos.length} more task
+                      {todos.length - visibleTodos.length === 1 ? '' : 's'}
+                    </Text>
+                  </Box>
                 </Box>
-                <Box flexGrow={1}>
-                  <Text wrap="truncate" color={COLORS.text.primary}>
-                    {t.text}
-                  </Text>
-                </Box>
-              </Box>
-            ))
+              )}
+            </>
           )}
         </Box>
       )}