Add background tasks UI with sidebar rows, bottom panel, and log tailing

[anglinb]

Summary

• Background task tracking: New BackgroundTaskRegistry on the server persistently tracks bash commands run with run_in_background, independently of the SDK draining state. Per-task file-growth polling detects stopped tasks; KillShell tool results are detected instantly.
• Inline sidebar rows: Running background tasks appear as indented sub-rows under their parent chat with a green spinner and truncated command. Stopped tasks show as a muted "N terminated" count.
• Bottom TaskPanel: A slide-up panel (like the terminal) scoped to the active chat, with a task list sidebar (running + collapsed terminated section) and a live log viewer showing newest lines on top. Toggled via an Activity button in the navbar.
• Log tailing: New TaskOutputManager tails the actual SDK output files via fs.watchFile, streamed to the client over a task-output WebSocket subscription with initial snapshot + delta events.
• Stop action: Sends a chat message to Claude asking it to stop the specific task ID, which triggers the KillShell tool for a real process kill.
• Per-chat isolation: Tasks, panel contents, and navbar badge are all scoped to the active chat. No cross-chat interference.

Test plan

• Start a background task in a chat → verify inline sidebar row appears with spinner and command
• Open the bottom panel via the Activity button → verify task list and live log output
• Send a new message in the same chat → verify background task persists (not cleared)
• Stop a task via the panel → verify Claude calls KillShell and task moves to "terminated"
• Start tasks in two different chats → verify each chat only shows its own tasks
• Wait for a task to stop naturally → verify it auto-detects as stopped after ~30s of no output
• npx tsc --noEmit passes, bun test passes (321/321, 1 pre-existing TerminalManager timeout)

🤖 Generated with Claude Code

[greptile-apps]

Greptile Summary

This PR introduces a full background task monitoring system: a server-side BackgroundTaskRegistry that tracks bash commands run with run_in_background, a TaskOutputManager that tails output files via watchFile, a new task-output WebSocket subscription type, and client-side UI (sidebar sub-rows + a slide-up TaskPanel with live log streaming).

Two server-side bugs need attention before merging:

• File watcher leak (ws-router.ts handleClose): active task-output subscriptions are never cleaned up when a WebSocket closes abruptly (browser tab close, network drop), leaving watchFile listeners running indefinitely.
• Byte/character mismatch (task-output-manager.ts): entry.lastSize is initialised in bytes (Buffer.byteLength) but later used as a JavaScript character index in content.slice(entry.lastSize) and reset to content.length (character count). Non-ASCII log output will produce garbled or duplicated deltas.

Confidence Score: 4/5

Safe to merge after fixing the two server-side P1 bugs; client-side UI is solid and well-scoped.

Two P1 issues exist: a file watcher resource leak on WebSocket close and a byte/character index mismatch that corrupts streaming deltas for non-ASCII output. Both are in newly added server files and are straightforward to fix, but they will manifest in normal usage (any browser tab close, any non-ASCII command output).

src/server/task-output-manager.ts and src/server/ws-router.ts require fixes before merging.

Important Files Changed

Filename	Overview
src/server/task-output-manager.ts	New class for tailing background task output files via watchFile; has a byte/character mismatch bug in checkForNewContent that corrupts deltas for non-ASCII output.
src/server/ws-router.ts	Adds task-output subscription type and TaskOutputManager wiring; handleClose does not stop tailing active subscriptions, causing file watcher leaks on abrupt disconnects.
src/server/background-task-registry.ts	New per-chat background task registry with file-size polling (5 s interval, 30 s stale threshold) and transcript-scanning for task IDs and stop events; looks correct.
src/client/components/chat-ui/TaskPanel.tsx	New slide-up panel with task list and live log viewer; uses an as any cast for the event handler passed to socket.subscribe, hiding a type mismatch.
src/client/components/chat-ui/sidebar/ChatRow.tsx	Adds inline background task sub-rows under each chat in the sidebar; minor: stopped-task filter is evaluated twice redundantly.
src/shared/types.ts	Adds BackgroundTaskInfo interface and backgroundTasks/isDraining fields to SidebarChatRow; clean additions.
src/shared/protocol.ts	Extends protocol with task-output subscription topic, TaskOutputEvent, TaskOutputSnapshot, and adds TaskOutputEvent to ServerEnvelope; looks correct.
src/client/stores/taskPanelStore.ts	Zustand store for task panel visibility and task selection state; correct and simple.
src/server/read-models.ts	Updates deriveSidebarData to populate backgroundTasks per chat via an optional callback; straightforward and well-scoped.

Sequence Diagram

sequenceDiagram
    participant Client
    participant WsRouter
    participant TaskOutputManager
    participant BackgroundTaskRegistry
    participant AgentCoordinator

    Client->>WsRouter: subscribe {type:"task-output", taskId, outputPath}
    WsRouter->>TaskOutputManager: startTailing(taskId, outputPath)
    TaskOutputManager-->>WsRouter: initialContent (snapshot)
    WsRouter-->>Client: snapshot {type:"task-output", content}
    Note over TaskOutputManager: watchFile polls every 500ms
    TaskOutputManager->>TaskOutputManager: checkForNewContent()
    TaskOutputManager->>WsRouter: onEvent(TaskOutputEvent)
    WsRouter-->>Client: event {type:"task.output", data}

    Client->>WsRouter: unsubscribe id
    WsRouter->>TaskOutputManager: stopTailing(taskId)

    Note over WsRouter: handleClose does NOT call stopTailing
    Client--xWsRouter: connection drops (no unsubscribe)
    WsRouter->>WsRouter: handleClose — only removes socket
    Note over TaskOutputManager: watchFile leaks

    AgentCoordinator->>BackgroundTaskRegistry: scanAndRegister(chatId, messages)
    BackgroundTaskRegistry->>BackgroundTaskRegistry: register(taskId, outputPath)
    BackgroundTaskRegistry->>WsRouter: onChange() → broadcastSnapshots()
    WsRouter-->>Client: sidebar snapshot with backgroundTasks[]

Loading

Comments Outside Diff (1)

1. src/server/ws-router.ts, line 425-427 (link)

   File watcher leak on abrupt WebSocket close

   handleClose removes the socket from the set but never calls taskOutputManager.stopTailing() for any active task-output subscriptions. When a browser tab closes, a network drops, or any connection ends without an explicit unsubscribe message, every watchFile registered for that connection is permanently orphaned — they keep firing and the TailedFile entry is never removed from the map.

_{Reviews (1): Last reviewed commit: "Add background tasks UI with inline side..." | Re-trigger Greptile}

[greptile-apps]

Byte vs. character-index mismatch corrupts delta output

entry.lastSize is initialised with Buffer.byteLength(initialContent, "utf-8") (bytes) in startTailing. Here, stats.size (bytes) is correctly compared against it the first time, but content.slice(entry.lastSize) treats it as a JavaScript character index. For any non-ASCII byte in the output (Unicode symbols, emojis, accented characters…) byte count ≠ character count, so the slice starts at the wrong position and emits garbage or duplicate characters. After the first update entry.lastSize is reset to content.length (character count), making the stats.size guard in the next poll also wrong.

Fix by tracking sizes consistently in bytes throughout, or keep the text-based approach and measure everything in characters: read the full file each time and compute content.slice(prevCharLength) using character counts consistently.

[greptile-apps]

as any cast hiding a type mismatch in the event handler

The third argument to socket.subscribe is cast to any to silence a type error. This suggests KannaSocket.subscribe was not designed to accept an event-handler callback as a third argument, or the generic signature doesn't account for it. The cast prevents TypeScript from catching future breakage (e.g. if the event type changes). Consider extending KannaSocket.subscribe's signature to accept an optional event handler with the correct union type, or handle events through a separate onEvent callback.

[greptile-apps]

filter called redundantly on the same array

chat.backgroundTasks.filter(t => t.status === "stopped") is evaluated twice in adjacent render paths — once to check .length > 0 and again to get .length for the count. Derive stoppedTasks once at the top of the component render to avoid the duplicate pass.