fix: prevent task list flash on session restore and during conversation

- Initialize autoHidden to true when all tasks are already completed on
  mount (e.g. session restore), instead of showing for 5 seconds then
  hiding
- Add shallow comparison in onTasksChange callback to skip state updates
  when tasks haven't materially changed (same id + status), preventing
  unnecessary re-renders and autoHidden resets that cause flickering
- Update tests to reflect new immediate-hide-on-mount behavior and add
  dedicated test for the all-completed-on-mount case

Author: lewis617

packages/code/src/components/TaskList.tsx

@@ -59,7 +59,12 @@ export const TaskList: React.FC = () => {
   const autoHideTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(
     null,
   );
-  const [autoHidden, setAutoHidden] = React.useState(false);
+  const [autoHidden, setAutoHidden] = React.useState(() => {
+    // If all tasks are already completed on mount (e.g. session restore),
+    // start hidden immediately instead of flashing for 5 seconds.
+    const active = tasks.filter((t) => t.status !== "deleted");
+    return active.length > 0 && active.every((t) => t.status === "completed");
+  });
   const [, setTick] = React.useState(0);
 
   const now = Date.now();

packages/code/src/contexts/useChat.tsx

@@ -382,8 +382,19 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
           const runs = agentRef.current?.getWorkflowRuns();
           if (runs) setWorkflowRuns([...runs]);
         },
-        onTasksChange: (tasks) => {
-          setTasks([...tasks]);
+        onTasksChange: (newTasks) => {
+          setTasks((prev) => {
+            if (
+              prev.length === newTasks.length &&
+              prev.every(
+                (t, i) =>
+                  t.id === newTasks[i].id && t.status === newTasks[i].status,
+              )
+            ) {
+              return prev;
+            }
+            return [...newTasks];
+          });
         },
         onPermissionModeChange: (mode) => {
           setPermissionModeState(mode);

packages/code/tests/components/TaskList.test.tsx

@@ -232,42 +232,70 @@ describe("TaskList", () => {
 
   it("should auto-hide after all tasks completed", () => {
     vi.useFakeTimers();
+    // Start with an in-progress task so the list is visible
     const mockTasks: Task[] = [
-      makeTask({ id: "1", subject: "Done 1", status: "completed" }),
-      makeTask({ id: "2", subject: "Done 2", status: "completed" }),
+      makeTask({ id: "1", subject: "Working", status: "in_progress" }),
+      makeTask({ id: "2", subject: "Done", status: "completed" }),
     ];
     vi.mocked(useTasks).mockReturnValue(mockTasks);
 
     const { lastFrame, rerender } = render(<TaskList />);
     expect(lastFrame()).toBeTruthy();
 
+    // Complete the remaining task
+    vi.mocked(useTasks).mockReturnValue([
+      makeTask({ id: "1", subject: "Working", status: "completed" }),
+      makeTask({ id: "2", subject: "Done", status: "completed" }),
+    ]);
+    rerender(<TaskList />);
+    expect(lastFrame()).toBeTruthy();
+
     vi.advanceTimersByTime(5000);
     rerender(<TaskList />);
     expect(lastFrame()).toBeFalsy();
 
     vi.useRealTimers();
   });
 
-  it("should reappear when new task added after auto-hide", () => {
-    vi.useFakeTimers();
-    const completedTasks: Task[] = [
+  it("should be hidden immediately when mounted with all completed tasks", () => {
+    const mockTasks: Task[] = [
       makeTask({ id: "1", subject: "Done 1", status: "completed" }),
       makeTask({ id: "2", subject: "Done 2", status: "completed" }),
     ];
-    vi.mocked(useTasks).mockReturnValue(completedTasks);
+    vi.mocked(useTasks).mockReturnValue(mockTasks);
+
+    const { lastFrame } = render(<TaskList />);
+    // Should be hidden immediately, no 5-second flash
+    expect(lastFrame()).toBeFalsy();
+  });
+
+  it("should reappear when new task added after auto-hide", () => {
+    vi.useFakeTimers();
+    // Start with in-progress so list is visible initially
+    const initialTasks: Task[] = [
+      makeTask({ id: "1", subject: "Working", status: "in_progress" }),
+      makeTask({ id: "2", subject: "Done", status: "completed" }),
+    ];
+    vi.mocked(useTasks).mockReturnValue(initialTasks);
 
     const { lastFrame, rerender, unmount } = render(<TaskList />);
     expect(lastFrame()).toBeTruthy();
 
+    // Complete all tasks → auto-hide after delay
+    vi.mocked(useTasks).mockReturnValue([
+      makeTask({ id: "1", subject: "Working", status: "completed" }),
+      makeTask({ id: "2", subject: "Done", status: "completed" }),
+    ]);
+    rerender(<TaskList />);
     vi.advanceTimersByTime(5000);
-    // Rerender to pick up the state change from the timer
     rerender(<TaskList />);
     expect(lastFrame()).toBeFalsy();
     unmount();
 
     // Add a new pending task and mount fresh
     vi.mocked(useTasks).mockReturnValue([
-      ...completedTasks,
+      makeTask({ id: "1", subject: "Working", status: "completed" }),
+      makeTask({ id: "2", subject: "Done", status: "completed" }),
       makeTask({ id: "3", subject: "New Task", status: "pending" }),
     ]);
     const { lastFrame: lastFrame2 } = render(<TaskList />);