From 8245a3d75579afbc509a00f705bc41f7a03ade80 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 28 Aug 2026 21:49:20 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20visual=20indica?=
 =?UTF-8?q?tor=20for=20truncated=20Todo=20tasks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/palette.md                    |  5 ++++
 src/cli/ui/components/TodoDrawer.tsx | 34 ++++++++++++++++++----------
 2 files changed, 27 insertions(+), 12 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 00000000..657dcdfb
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,5 @@
+## Initial Palette Journal
+
+## 2026-08-28 - Truncated Dynamic Lists Need Indicators
+**Learning:** When displaying dynamic lists in terminal UIs (such as those using `ink`), truncating the list to fit constraints without a visual indicator causes users to lose situational awareness of remaining items.
+**Action:** Always include an explicit visual indicator (like '... and X more tasks') when applying a `maxVisible` limit to a dynamic list.
\ No newline at end of file
diff --git a/src/cli/ui/components/TodoDrawer.tsx b/src/cli/ui/components/TodoDrawer.tsx
index 8304d871..42deed62 100644
--- a/src/cli/ui/components/TodoDrawer.tsx
+++ b/src/cli/ui/components/TodoDrawer.tsx
@@ -118,21 +118,31 @@ 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>
-                </Box>
-                <Box flexGrow={1}>
-                  <Text wrap="truncate" color={COLORS.text.primary}>
-                    {t.text}
+              ))}
+              {todos.length > maxVisible && (
+                <Box paddingLeft={6}>
+                  <Text color={COLORS.text.muted} dimColor>
+                    ... and {todos.length - maxVisible} more task
+                    {todos.length - maxVisible !== 1 ? 's' : ''}
                   </Text>
                 </Box>
-              </Box>
-            ))
+              )}
+            </>
           )}
         </Box>
       )}