fix: reliable todo panel updates + close when work stops (#511)

* fix: make todo panel updates reliable and close it when work stops

TaskUpdate calls with ids the server didn't know (taskSeq reset on
TodoWrite, empty task map after process restart) were silently dropped,
leaving the chat todo panel stale and preventing it from ever reaching
all-done. Server now upserts unknown ids, keeps task ids monotonic,
honors explicit ids, and seeds restarted processes from the last
todo_update in history.

Frontend panel is now turn-aware: dismisses 3s after completion once
the turn ends (10s while processing), collapses to the pill when a turn
ends with unfinished tasks, and detects replaced lists by id signature
so a dismissed panel re-shows for new task lists.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: implement seedTasks no-op in CodexProcess

Codex emits the full plan on every turn/plan/updated notification, so
there is no incremental task state to seed after a restart.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: alari76

server/claude-process.test.ts

@@ -133,14 +133,16 @@ describe('handleTaskTool', () => {
       expect(cp.tasks.size).toBe(1)
     })
 
-    it('clears existing tasks and resets ID sequence', () => {
+    it('clears existing tasks but keeps the ID sequence monotonic', () => {
       cp.handleTaskTool('TaskCreate', { subject: 'Old task' })
       expect(cp.tasks.size).toBe(1)
       cp.handleTaskTool('TodoWrite', {
         todos: [{ content: 'New', status: 'in_progress' }],
       })
       expect(cp.tasks.size).toBe(1)
-      expect(cp.tasks.get('1')!.subject).toBe('New')
+      // New list gets a fresh id (not reused '1') so the frontend can detect
+      // a replaced list and later TaskCreate/TaskUpdate ids never collide.
+      expect(cp.tasks.get('2')!.subject).toBe('New')
     })
 
     it('returns false for non-array todos', () => {
@@ -182,8 +184,18 @@ describe('handleTaskTool', () => {
       expect(cp.tasks.has('1')).toBe(false)
     })
 
-    it('returns false for nonexistent task', () => {
-      expect(cp.handleTaskTool('TaskUpdate', { taskId: '999', status: 'completed' })).toBe(false)
+    it('upserts a task for an unknown id instead of dropping the update', () => {
+      expect(cp.handleTaskTool('TaskUpdate', { taskId: '999', status: 'completed' })).toBe(true)
+      expect(cp.tasks.get('999')!.status).toBe('completed')
+      expect(cp.tasks.get('999')!.subject).toBe('Task 999')
+    })
+
+    it('returns false for unknown id with deleted status', () => {
+      expect(cp.handleTaskTool('TaskUpdate', { taskId: '999', status: 'deleted' })).toBe(false)
+    })
+
+    it('returns false for missing taskId', () => {
+      expect(cp.handleTaskTool('TaskUpdate', { status: 'completed' })).toBe(false)
     })
 
     it('updates subject and activeForm', () => {
@@ -196,6 +208,23 @@ describe('handleTaskTool', () => {
   it('returns false for unknown tool', () => {
     expect(cp.handleTaskTool('UnknownTool', {})).toBe(false)
   })
+
+  describe('seedTasks', () => {
+    it('restores tasks and continues the id sequence past seeded ids', () => {
+      cp.seedTasks([
+        { id: '3', subject: 'Restored A', status: 'completed' },
+        { id: '4', subject: 'Restored B', status: 'in_progress' },
+      ])
+      expect(cp.tasks.size).toBe(2)
+      // TaskUpdate against a pre-restart id now resolves to the real task
+      cp.handleTaskTool('TaskUpdate', { taskId: '4', status: 'completed' })
+      expect(cp.tasks.get('4')!.status).toBe('completed')
+      expect(cp.tasks.get('4')!.subject).toBe('Restored B')
+      // New TaskCreate ids do not collide with seeded ids
+      cp.handleTaskTool('TaskCreate', { subject: 'Next' })
+      expect(cp.tasks.get('5')!.subject).toBe('Next')
+    })
+  })
 })
 
 describe('handleStreamEvent (via handleLine)', () => {

server/claude-process.ts

@@ -486,7 +486,9 @@ export class ClaudeProcess extends EventEmitter<ClaudeProcessEvents> implements
       if (isTask && TOOL_DEBUG) console.log('[task-debug] tool:', this.tool.name, 'input:', JSON.stringify(parsed).slice(0, 200))
       if (this.handleTaskTool(this.tool.name!, parsed)) {
         if (TOOL_DEBUG) console.log('[task-debug] emitting todo_update, tasks:', this.tasks.size)
-        this.emit('todo_update', Array.from(this.tasks.values()))
+        // Copy items so later in-place TaskUpdate mutations don't alias into
+        // previously broadcast/history-stored snapshots.
+        this.emit('todo_update', Array.from(this.tasks.values(), t => ({ ...t })))
       }
     } catch (err) {
       console.warn(`[claude] Failed to parse tool input for ${this.tool.name}:`, err instanceof Error ? err.message : err)
@@ -648,14 +650,17 @@ export class ClaudeProcess extends EventEmitter<ClaudeProcessEvents> implements
    * Returns true if the task list changed (caller should emit todo_update).
    */
   private handleTaskTool(toolName: string, input: Record<string, unknown>): boolean {
-    // TodoWrite sends the entire list at once
+    // TodoWrite sends the entire list at once.
+    // Note: taskSeq is intentionally NOT reset — keeping ids monotonic across
+    // list generations lets the frontend detect a brand-new list by id and
+    // avoids id collisions with later TaskCreate/TaskUpdate calls.
     if (toolName === 'TodoWrite') {
       const todos = input.todos as Array<Record<string, unknown>> | undefined
       if (!Array.isArray(todos)) return false
       this.tasks.clear()
-      this.taskSeq = 0
       for (const item of todos) {
         const id = String(item.id || ++this.taskSeq)
+        this.syncTaskSeq(id)
         const status = item.status as string
         if (status !== 'pending' && status !== 'in_progress' && status !== 'completed') continue
         this.tasks.set(id, {
@@ -669,7 +674,8 @@ export class ClaudeProcess extends EventEmitter<ClaudeProcessEvents> implements
     }
     // TaskCreate/TaskUpdate are the newer tool names
     if (toolName === 'TaskCreate') {
-      const id = String(++this.taskSeq)
+      const id = String(input.taskId || input.id || ++this.taskSeq)
+      this.syncTaskSeq(id)
       this.tasks.set(id, {
         id,
         subject: String(input.subject || ''),
@@ -680,8 +686,17 @@ export class ClaudeProcess extends EventEmitter<ClaudeProcessEvents> implements
     }
     if (toolName === 'TaskUpdate') {
       const id = String(input.taskId || '')
-      const task = this.tasks.get(id)
-      if (!task) return false
+      if (!id) return false
+      let task = this.tasks.get(id)
+      if (!task) {
+        // Unknown id — our in-memory map can diverge from the CLI's real task
+        // list (e.g. after a process restart mid-session). Upsert instead of
+        // dropping the update, otherwise the UI shows a stale list forever.
+        if (input.status === 'deleted') return false
+        task = { id, subject: String(input.subject || `Task ${id}`), status: 'pending' }
+        this.tasks.set(id, task)
+        this.syncTaskSeq(id)
+      }
       const status = input.status as string | undefined
       if (status === 'deleted') {
         this.tasks.delete(id)
@@ -697,6 +712,25 @@ export class ClaudeProcess extends EventEmitter<ClaudeProcessEvents> implements
     return false
   }
 
+  /** Keep taskSeq ahead of any numeric id we have seen, so generated ids never collide. */
+  private syncTaskSeq(id: string): void {
+    const n = Number(id)
+    if (Number.isInteger(n) && n > this.taskSeq) this.taskSeq = n
+  }
+
+  /**
+   * Seed task state from a previous process's last known list (session restore).
+   * Without this, a restarted process starts with an empty map and TaskUpdate
+   * calls referencing pre-restart task ids would otherwise be lost.
+   */
+  seedTasks(tasks: TaskItem[]): void {
+    this.tasks.clear()
+    for (const t of tasks) {
+      this.tasks.set(t.id, { ...t })
+      this.syncTaskSeq(t.id)
+    }
+  }
+
   /**
    * Extract a short summary from extended thinking text.
    * Tries to grab the first sentence (up to 120 chars), or truncates at a

server/codex-process.ts

@@ -805,6 +805,12 @@ export class CodexProcess extends EventEmitter<ClaudeProcessEvents> implements C
     }
   }
 
+  /**
+   * No-op: Codex emits the full plan on every turn/plan/updated notification,
+   * so there is no incremental task state to seed after a restart.
+   */
+  seedTasks(): void {}
+
   isAlive(): boolean {
     return this.alive
   }

server/coding-process.ts

@@ -12,6 +12,7 @@
 
 import type { EventEmitter } from 'events'
 import type { ClaudeProcessEvents } from './claude-process.js'
+import type { TaskItem } from './types.js'
 
 /**
  * Supported AI coding assistant providers.
@@ -81,6 +82,9 @@ export interface CodingProcess extends EventEmitter<ClaudeProcessEvents> {
    */
   setPermissionMode?(mode: import('./types.js').PermissionMode): Promise<boolean>
 
+  /** Seed task/todo state from a previous process's last known list (session restore). */
+  seedTasks(tasks: TaskItem[]): void
+
   /** Whether the process is currently running and accepting input. */
   isAlive(): boolean
 

server/opencode-process.ts

@@ -889,13 +889,13 @@ export class OpenCodeProcess extends EventEmitter<ClaudeProcessEvents> implement
               this.emit('tool_active', toolName, inputStr)
               // Detect task/todo tool calls and emit todo_update
               if (part.state?.input && this.handleTaskTool(toolName, part.state.input)) {
-                this.emit('todo_update', Array.from(this.tasks.values()))
+                this.emit('todo_update', Array.from(this.tasks.values(), t => ({ ...t })))
               }
             } else if (status === 'completed') {
               // Also check for task tools at completion (some providers only
               // populate input at this stage, not during 'running')
               if (part.state?.input && this.handleTaskTool(toolName, part.state.input)) {
-                this.emit('todo_update', Array.from(this.tasks.values()))
+                this.emit('todo_update', Array.from(this.tasks.values(), t => ({ ...t })))
               }
               const output = part.state?.output
               const summary = output ? output.slice(0, 200) : undefined
@@ -1265,13 +1265,16 @@ export class OpenCodeProcess extends EventEmitter<ClaudeProcessEvents> implement
   private handleTaskTool(toolName: string, input: Record<string, unknown>): boolean {
     // Normalize tool name — OpenCode may report as 'todowrite', 'TodoWrite', 'todo_write', etc.
     const normalized = toolName.toLowerCase().replace(/_/g, '')
+    // Note: taskSeq is intentionally NOT reset on TodoWrite — keeping ids
+    // monotonic across list generations lets the frontend detect a brand-new
+    // list by id and avoids collisions with later TaskCreate/TaskUpdate calls.
     if (normalized === 'todowrite') {
       const todos = input.todos as Array<Record<string, unknown>> | undefined
       if (!Array.isArray(todos)) return false
       this.tasks.clear()
-      this.taskSeq = 0
       for (const item of todos) {
         const id = String(item.id || ++this.taskSeq)
+        this.syncTaskSeq(id)
         const status = item.status as string
         if (status !== 'pending' && status !== 'in_progress' && status !== 'completed') continue
         this.tasks.set(id, {
@@ -1284,7 +1287,8 @@ export class OpenCodeProcess extends EventEmitter<ClaudeProcessEvents> implement
       return true
     }
     if (normalized === 'taskcreate') {
-      const id = String(++this.taskSeq)
+      const id = String(input.taskId || input.id || ++this.taskSeq)
+      this.syncTaskSeq(id)
       this.tasks.set(id, {
         id,
         subject: String(input.subject || ''),
@@ -1295,8 +1299,17 @@ export class OpenCodeProcess extends EventEmitter<ClaudeProcessEvents> implement
     }
     if (normalized === 'taskupdate') {
       const id = String(input.taskId || '')
-      const task = this.tasks.get(id)
-      if (!task) return false
+      if (!id) return false
+      let task = this.tasks.get(id)
+      if (!task) {
+        // Unknown id — our in-memory map can diverge from the provider's real
+        // task list (e.g. after a process restart mid-session). Upsert instead
+        // of dropping the update, otherwise the UI shows a stale list forever.
+        if (input.status === 'deleted') return false
+        task = { id, subject: String(input.subject || `Task ${id}`), status: 'pending' }
+        this.tasks.set(id, task)
+        this.syncTaskSeq(id)
+      }
       const status = input.status as string | undefined
       if (status === 'deleted') {
         this.tasks.delete(id)
@@ -1312,6 +1325,25 @@ export class OpenCodeProcess extends EventEmitter<ClaudeProcessEvents> implement
     return false
   }
 
+  /** Keep taskSeq ahead of any numeric id we have seen, so generated ids never collide. */
+  private syncTaskSeq(id: string): void {
+    const n = Number(id)
+    if (Number.isInteger(n) && n > this.taskSeq) this.taskSeq = n
+  }
+
+  /**
+   * Seed task state from a previous process's last known list (session restore).
+   * Without this, a restarted process starts with an empty map and TaskUpdate
+   * calls referencing pre-restart task ids would otherwise be lost.
+   */
+  seedTasks(tasks: TaskItem[]): void {
+    this.tasks.clear()
+    for (const t of tasks) {
+      this.tasks.set(t.id, { ...t })
+      this.syncTaskSeq(t.id)
+    }
+  }
+
   /** Send a user message to the OpenCode session. */
   sendMessage(content: string): void {
     if (!this.alive || !this.opencodeSessionId) {

server/session-lifecycle.ts

@@ -188,6 +188,18 @@ export class SessionLifecycle {
 
     this.wireClaudeEvents(cp, session, sessionId)
 
+    // On resume, carry the last known task list into the new process so
+    // TaskUpdate calls referencing pre-restart task ids aren't dropped.
+    if (resume) {
+      for (let i = session.outputHistory.length - 1; i >= 0; i--) {
+        const msg = session.outputHistory[i]
+        if (msg.type === 'todo_update') {
+          cp.seedTasks(msg.tasks)
+          break
+        }
+      }
+    }
+
     cp.start()
     session.claudeProcess = cp
 

src/App.tsx

@@ -666,6 +666,7 @@ export default function App() {
             planningMode={planningMode}
             activityLabel={activityLabel}
             tasks={tasks}
+            isProcessing={isProcessing}
             activePrompt={activePrompt}
             sendPromptResponse={sendPromptResponse}
             inputBarRef={inputBarRef}
@@ -733,6 +734,7 @@ export default function App() {
             planningMode={planningMode}
             activityLabel={activityLabel}
             tasks={tasks}
+            isProcessing={isProcessing}
             disabled={!settings.token}
             hasFileChanges={hasFileChanges}
             diffPanelOpen={diffPanelOpen}

src/components/OrchestratorContent.tsx

@@ -27,6 +27,7 @@ export interface OrchestratorContentProps {
   planningMode: boolean
   activityLabel?: string
   tasks: TaskItem[]
+  isProcessing: boolean
   activePrompt: PromptEntry | null
   sendPromptResponse: (value: string | string[], requestId?: string) => void
   inputBarRef: RefObject<InputBarHandle | null>
@@ -55,6 +56,7 @@ export function OrchestratorContent({
   planningMode,
   activityLabel,
   tasks,
+  isProcessing,
   activePrompt,
   sendPromptResponse,
   inputBarRef,
@@ -93,7 +95,7 @@ export function OrchestratorContent({
               variant="orchestrator"
               agentName={agentName}
             />
-            <TodoPanel tasks={tasks} />
+            <TodoPanel tasks={tasks} isProcessing={isProcessing} />
           </div>
           {activePrompt && (
             <PromptButtons

src/components/SessionContent.tsx

@@ -26,6 +26,7 @@ export interface SessionContentProps {
   planningMode: boolean
   activityLabel?: string
   tasks: TaskItem[]
+  isProcessing: boolean
   disabled: boolean
   hasFileChanges: boolean
   diffPanelOpen: boolean
@@ -76,6 +77,7 @@ export function SessionContent({
   planningMode,
   activityLabel,
   tasks,
+  isProcessing,
   disabled,
   hasFileChanges,
   diffPanelOpen,
@@ -126,7 +128,7 @@ export function SessionContent({
           activityLabel={isProviderDisabled ? undefined : activityLabel}
           isMobile={isMobile}
         />
-        <TodoPanel tasks={tasks} />
+        <TodoPanel tasks={tasks} isProcessing={isProcessing} />
 
         {/* Claude Code disabled banner */}
         {claudeDisabled && (