Fix/task panel scroll flicker

packages/cli/src/ui/components/TodoDisplay.test.tsx

@@ -5,6 +5,7 @@
  */
 
 import { render } from 'ink-testing-library';
+import { waitFor } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 import type { TodoItem } from './TodoDisplay.js';
 import { TodoDisplay } from './TodoDisplay.js';
@@ -95,4 +96,30 @@ describe('TodoDisplay', () => {
     expect(output).toContain('Task 1');
     expect(output).toContain('Task 2');
   });
+
+  it('should truncate when max height is provided', async () => {
+    const longTodos: TodoItem[] = Array.from({ length: 10 }).map(
+      (_, index) => ({
+        id: `${index + 1}`,
+        content: `Task ${index + 1}`,
+        status: 'pending',
+      }),
+    );
+
+    const { lastFrame } = render(
+      <TodoDisplay todos={longTodos} maxHeight={3} maxWidth={40} />,
+    );
+
+    await waitFor(() => {
+      const frame = lastFrame();
+      if (!frame) {
+        throw new Error('Expected rendered frame');
+      }
+      const visibleTasks = frame.match(/Task \d+/g) ?? [];
+      expect(visibleTasks.length).toBeLessThan(10);
+    });
+
+    const output = lastFrame();
+    expect(output).not.toContain('Task 1');
+  });
 });

packages/cli/src/ui/components/TodoDisplay.tsx

@@ -7,6 +7,7 @@
 import type React from 'react';
 import { Box, Text } from 'ink';
 import { Colors } from '../colors.js';
+import { ScrollView } from './shared/ScrollView.js';
 
 export interface TodoItem {
   id: string;
@@ -16,6 +17,9 @@ export interface TodoItem {
 
 interface TodoDisplayProps {
   todos: TodoItem[];
+  maxHeight?: number;
+  maxWidth?: number;
+  overflowDirection?: 'top' | 'bottom';
 }
 
 const STATUS_ICONS = {
@@ -24,49 +28,64 @@ const STATUS_ICONS = {
   completed: '●',
 } as const;
 
-export const TodoDisplay: React.FC<TodoDisplayProps> = ({ todos }) => {
+export const TodoDisplay: React.FC<TodoDisplayProps> = ({
+  todos,
+  maxHeight,
+  maxWidth,
+  overflowDirection = 'top',
+}) => {
   if (!todos || todos.length === 0) {
     return null;
   }
 
+  if (typeof maxHeight === 'number' && !Number.isNaN(maxHeight)) {
+    const height = Math.max(2, Math.floor(maxHeight));
+    const renderIndicator = (hiddenCount: number) =>
+      hiddenCount > 0 ? (
+        <Box>
+          <Text color={Colors.Gray} wrap="truncate">
+            ↑ {hiddenCount} hidden task{hiddenCount === 1 ? '' : 's'}
+          </Text>
+        </Box>
+      ) : null;
+
+    return (
+      <ScrollView<TodoItem>
+        height={height}
+        width={typeof maxWidth === 'number' ? maxWidth : undefined}
+        data={todos}
+        stickTo={overflowDirection === 'bottom' ? 'top' : 'bottom'}
+        renderOverflowIndicator={renderIndicator}
+        getItemKey={(item) => item.id}
+        renderItem={(item: TodoItem) => renderTodoItemRow(item)}
+      />
+    );
+  }
+
   return (
     <Box flexDirection="column">
-      {todos.map((todo) => (
-        <TodoItemRow key={todo.id} todo={todo} />
-      ))}
+      {todos.map((todo) => renderTodoItemRow(todo))}
     </Box>
   );
 };
 
-interface TodoItemRowProps {
-  todo: TodoItem;
-}
-
-const TodoItemRow: React.FC<TodoItemRowProps> = ({ todo }) => {
+const renderTodoItemRow = (todo: TodoItem) => {
   const statusIcon = STATUS_ICONS[todo.status];
   const isCompleted = todo.status === 'completed';
   const isInProgress = todo.status === 'in_progress';
 
-  // Use the same color for both status icon and text, like RadioButtonSelect
   const itemColor = isCompleted
     ? Colors.Foreground
     : isInProgress
       ? Colors.AccentGreen
       : Colors.Foreground;
 
   return (
-    <Box flexDirection="row" minHeight={1}>
-      {/* Status Icon */}
-      <Box width={3}>
-        <Text color={itemColor}>{statusIcon}</Text>
-      </Box>
-
-      {/* Content */}
-      <Box flexGrow={1}>
-        <Text color={itemColor} strikethrough={isCompleted} wrap="wrap">
-          {todo.content}
-        </Text>
-      </Box>
+    <Box>
+      <Text color={itemColor}>{`${statusIcon} `}</Text>
+      <Text color={itemColor} strikethrough={isCompleted} wrap="wrap">
+        {todo.content}
+      </Text>
     </Box>
   );
 };

packages/cli/src/ui/components/messages/ToolMessage.tsx

@@ -130,9 +130,17 @@ const useResultDisplayRenderer = (
 /**
  * Component to render todo list results
  */
-const TodoResultRenderer: React.FC<{ data: TodoResultDisplay }> = ({
-  data,
-}) => <TodoDisplay todos={data.todos} />;
+const TodoResultRenderer: React.FC<{
+  data: TodoResultDisplay;
+  availableHeight?: number;
+  childWidth: number;
+}> = ({ data, availableHeight, childWidth }) => (
+  <TodoDisplay
+    todos={data.todos}
+    maxHeight={availableHeight}
+    maxWidth={typeof availableHeight === 'number' ? childWidth : undefined}
+  />
+);
 
 const PlanResultRenderer: React.FC<{
   data: PlanResultDisplay;
@@ -327,7 +335,11 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
         <Box paddingLeft={STATUS_INDICATOR_WIDTH} width="100%" marginTop={1}>
           <Box flexDirection="column">
             {displayRenderer.type === 'todo' && (
-              <TodoResultRenderer data={displayRenderer.data} />
+              <TodoResultRenderer
+                data={displayRenderer.data}
+                availableHeight={availableHeight}
+                childWidth={childWidth}
+              />
             )}
             {displayRenderer.type === 'plan' && (
               <PlanResultRenderer