Compose Todo and Subagent widgets

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 *.tgz
 .DS_Store
+.pi/

README.md

@@ -8,14 +8,16 @@ Hierarchical, session-local task tracking for [Pi](https://pi.dev), with atomic
 
 ## Features
 
-- Five focused tools: `set_tasks`, `update_task`, `rm_task`, `list_task`, and `get_task`
+- Five focused tools: `set_tasks`, `patch_tasks`, `rm_task`, `list_task`, and `get_task`
 - Parent/child task trees with generated integer IDs and atomic append/replace modes
 - Atomic batch mutations: every requested change succeeds or none of it is applied
+- Bounded task input and widget output to keep sessions and terminals responsive
 - Four states: `pending`, `in-progress`, `blocked`, and `done`
 - Cumulative active-time tracking that pauses outside `in-progress` and survives session restore
 - Session-branch persistence across reload, resume, fork, tree navigation, and context compaction
 - A concise first-action workflow prompt plus a one-shot post-compaction recovery reminder
-- Compact Pi widget with hierarchy, status colors, and an adaptive progress bar
+- Compact, theme-aware Pi Todo header and task tree with hierarchy, status colors, timers, and an adaptive progress bar
+- Optional responsive Todo + Subagents panels when the interactive-subagents extension is present
 - Optional Herdr metadata showing the current task in the agent sidebar
 
 ## Requirements
@@ -56,7 +58,7 @@ After automatic or manual context compaction, the extension sends one short hidd
 | Tool | Parameters | Behavior |
 | --- | --- | --- |
 | `set_tasks` | `{ mode, tasks, force }` | `append` extends the tree with `force: false`; `replace` atomically installs a new tree or clears it with `[]`. Replacing unfinished work requires `force: true`. |
-| `update_task` | `{ tasks: [...] }` | Atomically patches multiple tasks. Use `null` for unchanged text/status, `parentId: -1` for unchanged or `0` to move to root, and `position: -1` to keep the current order. |
+| `patch_tasks` | `{ tasks: [...] }` | Atomically patches multiple tasks. Use `null` for unchanged text/status, `parentId: -1` for unchanged or `0` to move to root, and `position: -1` to keep the current order. Completed trees may auto-clear; do not recreate cleared completed tasks. |
 | `rm_task` | `{ ids: [...], reason }` | Removes only mistaken, duplicate, or canceled tasks. Removing a parent cascades through its descendants. |
 | `list_task` | `{}` | Returns the full tree as compact `id/status/name` lines. |
 | `get_task` | `{ ids: [...] }` | Returns complete task details, including parent/child IDs and timing for tasks that have started. |
@@ -89,22 +91,26 @@ Example append call:
 
 Task input keys are explicit so strict tool-schema bridges do not invent values for omitted properties. Use `description: null` when no detail is needed, `status: "pending"` for the default state, `parentId: null` for root tasks and nested children, and `children: []` for leaves. `prepareArguments` still expands legacy calls that omit these fields.
 
+To keep model-generated input safe and bounded, a session may contain up to 200 tasks. One mutation may affect up to 50 explicitly supplied tasks. The widget header acts as a virtual root above three stored task levels: categories, items, and leaf sub-items. Names are limited to 200 Unicode characters and descriptions to 4,000 Unicode characters. Names and descriptions reject terminal controls and bidirectional override characters; descriptions may still contain line feeds for normal multi-line detail.
+
 IDs are not reused by append/remove operations; `replace` deliberately rebuilds IDs from `1`. Replace forbids non-null `parentId`, so new hierarchy must use nested `children`. Multiple tasks may be `in-progress`. A parent can be marked `done` only when all descendants are also `done`.
 
 A task starts timing the first time it enters `in-progress`. Leaving that state records a stop and pauses the timer; entering it again resumes with a new active segment while preserving the cumulative duration. Repeated updates with the same status, as well as name, description, hierarchy, and position changes, do not reset timing. For started tasks, `get_task` includes the first `startedAt` timestamp, a `stoppedAt` timestamp while paused, and cumulative `durationMs`. Timestamps use ISO 8601.
 
 ## Pi Widget
 
-The widget appears above Pi's editor while tasks exist. Run `/tasks` to hide or show it for the current Pi runtime.
+The widget appears above Pi's editor while todos exist. Run `/todo` to hide or show it for the current Pi runtime. Ten seconds after every task is completed, the task tree is automatically deleted and task IDs reset to `1`; adding or reopening unfinished work during that delay cancels the clear. Its compact, unboxed header retains the themed `Todos` title, done/total count, blocked-work count when present, and an adaptive progress bar; the bar drops away first at narrow widths. Body rows retain the task tree's virtual-root connectors, hierarchy, statuses, and timers. The outline uses only the labels needed by the deepest task: one-level trees render every task as an unlabeled leaf, two-level trees use numbered parents and unlabeled leaves, and three-level trees use Roman-numeral categories, numbered items, and unlabeled leaves. Internal task IDs remain unchanged and visible in tool output. In-progress circles rotate through `◐ ◓ ◑ ◒` twice per second; other status symbols remain still. The standalone widget shows at most 12 task rows plus a compact count of hidden tasks.
 
 ```text
- Tasks 2/6 · !1  ━━━━━────────
-  ◉ 1. Build auth · 12:08
-  ├─ ! 3. Resolve token issue · 03:41
-  └─ ○ 4. Add middleware
-  ✓ 2. Define schema · 04:31
+Todos 2/6 · !1  ━━━━────
+  ├─ I. ◐ Build auth · 12:08
+  │  ├─ 1. ! Resolve token issue · 03:41
+  │  └─    ○ Inspect provider response
+  └─ II. ✓ Define schema · 04:31
 ```
 
+When the optional interactive-subagents extension exposes its `statusWidget` integration, Todo claims the Subagents panel only while both extensions have content. The duck-typed widget must provide `hasContent()`, `getBodyRowCount()`, `render(width, maxBodyRows?, theme?)`, `claim(onChange)`, and `isClaimed(onChange)`. The optional `theme` is the current Pi theme object with the structural `fg(color, text)` formatter; Todo passes that exact object unchanged, while older providers may ignore the third argument. `isClaimed` must return true only for the exact callback supplied by the current runtime claim; this lets Todo recover safely after a provider reload or invalidation. Above 120 columns they render side by side with a one-cell gap and up to ten body rows per panel; the shorter panel is padded with plain spaces. At 120 columns or fewer, Todo renders first and Subagents below it with one blank line between sections. Stacked panels share ten body rows, preserving one row for each panel and reporting overflow honestly. If the extension is absent or exposes an older API, Todo falls back to its full-width Todo widget.
+
 Tool calls remain compact in the conversation. Expand a tool result with Pi's normal tool-output shortcut to inspect affected tasks or full descriptions.
 
 ## Herdr Integration
@@ -128,6 +134,8 @@ Metadata failures never block task operations. The extension does not change Her
 
 ## Development
 
+Development tests use Node's built-in TypeScript type stripping and require Node.js 22.18 or newer. The extension itself retains its Node.js 20 runtime requirement because Pi loads TypeScript extensions through its own loader.
+
 ```bash
 npm install
 npm run typecheck

docs/adr/0001-compose-todo-and-subagent-widgets.md

@@ -0,0 +1,5 @@
+# Compose Todo and Subagent widgets through an optional lease
+
+Todo owns the combined Pi widget and discovers the Subagents panel through a structural, process-local interface. Subagents retains its standalone widget until Todo claims a callback-identified lease, and Todo verifies that lease before every combined render with `isClaimed(onChange)`. `isClaimed` recognizes only the exact callback for the current runtime claim, so a provider reload or invalidation causes Todo to release and reacquire instead of trusting a stale local handle. This avoids a package dependency across the two extensions, preserves either extension's standalone behavior, and lets reload invalidate stale UI callbacks without losing running subagents.
+
+The optional render seam is `render(width, maxBodyRows?, theme?)`. When composing, Todo passes the exact current Pi theme object as `theme`; the only structural requirement is `fg(color, text): string`, and providers may ignore the third argument for compatibility with older implementations. Todo renders a compact unboxed header and task body. Above 120 columns the panels share a row with a one-cell gap and plain-space padding for a shorter panel; at 120 columns and below they stack with one blank line between sections. Combined layouts cap body rows at a shared ten-line budget.

index.ts

@@ -1,31 +1,58 @@
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { createCompletedTaskAutoClear } from "./src/auto-clear.ts";
 import { clearCurrentTask, reportCurrentTask } from "./src/herdr.ts";
 import {
   COMPACTION_REMINDER,
   COMPACTION_REMINDER_TYPE,
   hasUnfinishedTasks,
 } from "./src/prompt.ts";
-import { TaskState } from "./src/state.ts";
+import { TASK_STATE_ENTRY_TYPE, TaskState } from "./src/state.ts";
 import { registerTaskTools } from "./src/tools.ts";
 import { clearTaskWidget, updateTaskWidget } from "./src/widget.ts";
 
 export default function piTodoHerdr(pi: ExtensionAPI): void {
   const state = new TaskState();
   let widgetVisible = true;
+  let activeContext: ExtensionContext | undefined;
 
-  const refresh = (ctx: ExtensionContext) => {
+  const autoClear = createCompletedTaskAutoClear(state, () => {
+    try {
+      pi.appendEntry(TASK_STATE_ENTRY_TYPE, { tasks: [], nextId: 1 });
+    } catch (error) {
+      console.error("[pi-todo-herdr] failed to persist automatic task clear; retrying:", error);
+      return false;
+    }
+
+    state.set("replace", [], false);
+    if (activeContext !== undefined) {
+      try {
+        updateTaskWidget(state, activeContext, widgetVisible);
+        void reportCurrentTask(state.list());
+      } catch (error) {
+        console.error("[pi-todo-herdr] failed to refresh task UI after automatic clear:", error);
+      }
+    }
+    return true;
+  });
+
+  const refresh = (ctx: ExtensionContext, restartAutoClear = false) => {
+    activeContext = ctx;
     updateTaskWidget(state, ctx, widgetVisible);
     void reportCurrentTask(state.list());
+    autoClear.sync(restartAutoClear);
   };
 
   const restore = (ctx: ExtensionContext) => {
     state.loadFromSession(ctx);
-    refresh(ctx);
+    refresh(ctx, true);
   };
 
   pi.on("session_start", async (_event, ctx) => restore(ctx));
   pi.on("session_tree", async (_event, ctx) => restore(ctx));
   pi.on("session_shutdown", async (event) => {
+    autoClear.cancel();
+    if (activeContext !== undefined) clearTaskWidget(activeContext);
+    activeContext = undefined;
     if (event.reason === "quit") await clearCurrentTask();
   });
   pi.on("session_compact", () => {
@@ -42,22 +69,22 @@ export default function piTodoHerdr(pi: ExtensionAPI): void {
 
   registerTaskTools(pi, state, refresh);
 
-  pi.registerCommand("tasks", {
-    description: "Show or hide the task tree widget",
+  pi.registerCommand("todo", {
+    description: "Show or hide the todo tree widget",
     handler: async (_args, ctx) => {
       if (state.list().length === 0) {
         clearTaskWidget(ctx);
-        ctx.ui.notify("No tasks yet.", "info");
+        ctx.ui.notify("No todos yet.", "info");
         return;
       }
 
       widgetVisible = !widgetVisible;
       if (widgetVisible) {
         updateTaskWidget(state, ctx, true);
-        ctx.ui.notify("Task widget shown.", "info");
+        ctx.ui.notify("Todo widget shown.", "info");
       } else {
         clearTaskWidget(ctx);
-        ctx.ui.notify("Task widget hidden.", "info");
+        ctx.ui.notify("Todo widget hidden.", "info");
       }
     },
   });

package.json

@@ -20,18 +20,17 @@
     "productivity"
   ],
   "author": {
-    "name": "lesetong",
-    "email": "oscarlbw@qq.com",
-    "url": "https://github.com/leset0ng"
+    "name": "JB",
+    "url": "https://git.jb.codes/jb"
   },
   "license": "MIT",
-  "homepage": "https://github.com/leset0ng/pi-todo-herdr#readme",
+  "homepage": "https://git.jb.codes/jb/pi-todo-herdr#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/leset0ng/pi-todo-herdr.git"
+    "url": "git+ssh://git@git.jb.codes:7722/jb/pi-todo-herdr.git"
   },
   "bugs": {
-    "url": "https://github.com/leset0ng/pi-todo-herdr/issues"
+    "url": "https://git.jb.codes/jb/pi-todo-herdr/issues"
   },
   "engines": {
     "node": ">=20"
@@ -40,7 +39,7 @@
     "access": "public"
   },
   "scripts": {
-    "test": "node --experimental-transform-types --test tests/*.test.ts",
+    "test": "node --test tests/*.test.ts",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run typecheck && npm test"
   },

src/auto-clear.ts

@@ -0,0 +1,49 @@
+import type { TaskState } from "./state.ts";
+
+export const TODO_AUTO_CLEAR_DELAY_MS = 10_000;
+
+export interface CompletedTaskAutoClear {
+  sync(forceRestart?: boolean): void;
+  cancel(): void;
+}
+
+export function createCompletedTaskAutoClear(
+  state: TaskState,
+  tryClear: () => boolean,
+  delayMs = TODO_AUTO_CLEAR_DELAY_MS,
+): CompletedTaskAutoClear {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let scheduledKey: string | undefined;
+
+  const completionKey = () => {
+    const tasks = state.list();
+    if (tasks.length === 0 || tasks.some((task) => task.status !== "done")) return undefined;
+    return tasks.map((task) => `${task.id}:${task.status}`).join("|");
+  };
+
+  const cancel = () => {
+    if (timer !== undefined) clearTimeout(timer);
+    timer = undefined;
+    scheduledKey = undefined;
+  };
+
+  const sync = (forceRestart = false) => {
+    const nextKey = completionKey();
+    if (nextKey === undefined) {
+      cancel();
+      return;
+    }
+    if (!forceRestart && timer !== undefined && scheduledKey === nextKey) return;
+
+    cancel();
+    scheduledKey = nextKey;
+    timer = setTimeout(() => {
+      timer = undefined;
+      if (completionKey() !== scheduledKey) return;
+      if (!tryClear()) sync();
+    }, Math.max(0, delayMs));
+    timer.unref?.();
+  };
+
+  return { sync, cancel };
+}

src/limits.ts

@@ -0,0 +1,21 @@
+export const MAX_TASKS = 200;
+export const MAX_TASKS_PER_MUTATION = 50;
+export const MAX_TASK_DEPTH = 3;
+export const MAX_TASK_NAME_LENGTH = 200;
+export const MAX_TASK_DESCRIPTION_LENGTH = 4_000;
+export const MAX_WIDGET_TASK_ROWS = 12;
+
+export const TASK_NAME_PATTERN =
+  "^[^\\u0000-\\u001F\\u007F-\\u009F\\u061C\\u200E\\u200F\\u202A-\\u202E\\u2066-\\u206F]*$";
+export const TASK_DESCRIPTION_PATTERN =
+  "^[^\\u0000-\\u0009\\u000B-\\u001F\\u007F-\\u009F\\u061C\\u200E\\u200F\\u202A-\\u202E\\u2066-\\u206F]*$";
+
+const UNSAFE_TASK_TEXT = /[\u0000-\u0009\u000B-\u001F\u007F-\u009F\u061C\u200E\u200F\u202A-\u202E\u2066-\u206F]/u;
+
+export function hasUnsafeTaskText(value: string): boolean {
+  return UNSAFE_TASK_TEXT.test(value);
+}
+
+export function taskTextLength(value: string): number {
+  return [...value].length;
+}

src/prompt.ts

@@ -7,7 +7,7 @@ export const COMPACTION_REMINDER =
 
 export const TASK_PROMPT_GUIDELINES = [
   "For work with 3+ distinct steps, explore enough to understand the scope, then call set_tasks before implementation; otherwise skip tracking. Start one task in-progress.",
-  "Use update_task when tasks start, block, or finish; keep statuses accurate before the final response.",
+  "Use patch_tasks when tasks start, block, or finish; keep statuses accurate before the final response.",
 ];
 
 export function formatCompactTaskTree(tasks: Task[]): string {

src/state.ts

@@ -1,4 +1,13 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import {
+  hasUnsafeTaskText,
+  MAX_TASK_DEPTH,
+  MAX_TASK_DESCRIPTION_LENGTH,
+  MAX_TASK_NAME_LENGTH,
+  MAX_TASKS,
+  MAX_TASKS_PER_MUTATION,
+  taskTextLength,
+} from "./limits.ts";
 import type {
   AddTaskDraft,
   Task,
@@ -11,7 +20,8 @@ import type {
 } from "./types.ts";
 import { TaskValidationError } from "./types.ts";
 
-const MUTATION_TOOLS = new Set(["add_task", "set_tasks", "update_task", "rm_task"]);
+const MUTATION_TOOLS = new Set(["add_task", "set_tasks", "update_task", "patch_tasks", "rm_task"]);
+export const TASK_STATE_ENTRY_TYPE = "pi-todo-herdr-state";
 const VALID_STATUSES = new Set<TaskStatus>(["pending", "in-progress", "blocked", "done"]);
 const MAX_DATE_MS = 8_640_000_000_000_000;
 
@@ -52,7 +62,7 @@ function snapshotTasks(records: TaskRecord[]): Task[] {
 
 function durationMs(task: TaskRecord, now: number): number {
   const activeMs = task.activeStartedAt === undefined ? 0 : Math.max(0, now - task.activeStartedAt);
-  return task.accumulatedMs + activeMs;
+  return Math.min(MAX_DATE_MS, task.accumulatedMs + activeMs);
 }
 
 function publicTasks(records: TaskRecord[], now: number): Task[] {
@@ -94,7 +104,7 @@ function startTimer(task: TaskRecord, now: number): void {
 function stopTimer(task: TaskRecord, now: number): void {
   if (task.activeStartedAt === undefined) return;
   const stoppedAt = Math.max(now, task.activeStartedAt);
-  task.accumulatedMs += stoppedAt - task.activeStartedAt;
+  task.accumulatedMs = Math.min(MAX_DATE_MS, task.accumulatedMs + stoppedAt - task.activeStartedAt);
   task.activeStartedAt = undefined;
   task.stoppedAt = stoppedAt;
 }
@@ -125,17 +135,29 @@ function validateGraph(records: TaskRecord[]): string[] {
   const ids = new Set<number>();
 
   for (const task of records) {
-    if (!Number.isInteger(task.id) || task.id < 1) errors.push(`task ${task.id}: id must be a positive integer`);
+    if (!Number.isSafeInteger(task.id) || task.id < 1) {
+      errors.push(`task ${task.id}: id must be a positive safe integer`);
+    }
     if (ids.has(task.id)) errors.push(`task ${task.id}: duplicate id`);
     ids.add(task.id);
     if (!task.name.trim()) errors.push(`task ${task.id}: name must not be empty`);
     if (/[\r\n]/.test(task.name)) errors.push(`task ${task.id}: name must be a single line`);
-    if (task.description !== undefined && !task.description.trim()) {
-      errors.push(`task ${task.id}: description must not be empty`);
+    if (hasUnsafeTaskText(task.name)) errors.push(`task ${task.id}: name contains an unsafe control character`);
+    if (taskTextLength(task.name) > MAX_TASK_NAME_LENGTH) {
+      errors.push(`task ${task.id}: name must be at most ${MAX_TASK_NAME_LENGTH} characters`);
+    }
+    if (task.description !== undefined) {
+      if (!task.description.trim()) errors.push(`task ${task.id}: description must not be empty`);
+      if (taskTextLength(task.description) > MAX_TASK_DESCRIPTION_LENGTH) {
+        errors.push(`task ${task.id}: description must be at most ${MAX_TASK_DESCRIPTION_LENGTH} characters`);
+      }
+      if (hasUnsafeTaskText(task.description)) {
+        errors.push(`task ${task.id}: description contains an unsafe control character`);
+      }
     }
     if (!VALID_STATUSES.has(task.status)) errors.push(`task ${task.id}: invalid status '${task.status}'`);
-    if (!isNonNegativeSafeInteger(task.accumulatedMs)) {
-      errors.push(`task ${task.id}: accumulatedMs must be a non-negative safe integer`);
+    if (!isNonNegativeSafeInteger(task.accumulatedMs) || task.accumulatedMs > MAX_DATE_MS) {
+      errors.push(`task ${task.id}: accumulatedMs must be an integer between 0 and ${MAX_DATE_MS}`);
     }
     if (task.startedAt === undefined) {
       if (task.activeStartedAt !== undefined || task.stoppedAt !== undefined || task.accumulatedMs !== 0) {
@@ -193,6 +215,22 @@ function validateGraph(records: TaskRecord[]): string[] {
 
   if (errors.length > 0) return errors;
 
+  const depths = new Map<number, number>();
+  const depthOf = (task: TaskRecord): number => {
+    const cached = depths.get(task.id);
+    if (cached !== undefined) return cached;
+    const parent = task.parentId === null ? undefined : byId.get(task.parentId);
+    const depth = parent === undefined ? 1 : depthOf(parent) + 1;
+    depths.set(task.id, depth);
+    return depth;
+  };
+  for (const task of records) {
+    if (depthOf(task) > MAX_TASK_DEPTH) {
+      errors.push(`task ${task.id}: depth must not exceed ${MAX_TASK_DEPTH} levels`);
+    }
+  }
+  if (errors.length > 0) return errors;
+
   for (const task of records) {
     if (task.status !== "done") continue;
     const unfinished = collectDescendantIds(records, task.id).filter((id) => byId.get(id)?.status !== "done");
@@ -251,8 +289,11 @@ function moveToSiblingEnd(records: TaskRecord[], id: number): void {
 export class TaskState {
   private records: TaskRecord[] = [];
   private nextId = 1;
+  private readonly now: () => number;
 
-  constructor(private readonly now: () => number = Date.now) {}
+  constructor(now: () => number = Date.now) {
+    this.now = now;
+  }
 
   private currentTime(): number {
     const now = Math.floor(this.now());
@@ -293,26 +334,60 @@ export class TaskState {
   add(drafts: AddTaskDraft[]): Task[] {
     const errors: string[] = [];
     if (!Array.isArray(drafts) || drafts.length === 0) throw new TaskValidationError(["tasks must not be empty"]);
+    if (drafts.length > MAX_TASKS_PER_MUTATION) {
+      throw new TaskValidationError([`tasks must contain at most ${MAX_TASKS_PER_MUTATION} tasks per mutation`]);
+    }
 
     const working = cloneRecords(this.records);
     const existingIds = new Set(working.map((task) => task.id));
     const now = this.currentTime();
     let nextId = this.nextId;
     const addedIds: number[] = [];
+    let mutationTaskCount = 0;
 
-    const append = (draft: AddTaskDraft, implicitParentId: number | null, path: string, nested: boolean) => {
+    const append = (
+      draft: AddTaskDraft,
+      implicitParentId: number | null,
+      path: string,
+      nested: boolean,
+      depth: number,
+    ) => {
+      mutationTaskCount += 1;
+      if (mutationTaskCount > MAX_TASKS_PER_MUTATION) {
+        errors.push(`tasks must contain at most ${MAX_TASKS_PER_MUTATION} tasks per mutation`);
+        return;
+      }
+      if (depth > MAX_TASK_DEPTH) {
+        errors.push(`${path}: depth must not exceed ${MAX_TASK_DEPTH} levels`);
+        return;
+      }
+      if (working.length >= MAX_TASKS) {
+        errors.push(`task session is limited to ${MAX_TASKS} tasks`);
+        return;
+      }
       if (!draft || typeof draft !== "object") {
         errors.push(`${path}: task must be an object`);
         return;
       }
       if (typeof draft.name !== "string" || !draft.name.trim()) errors.push(`${path}.name must not be empty`);
       if (typeof draft.name === "string" && /[\r\n]/.test(draft.name)) errors.push(`${path}.name must be a single line`);
-      if (
-        draft.description !== undefined &&
-        draft.description !== null &&
-        (typeof draft.description !== "string" || !draft.description.trim())
-      ) {
-        errors.push(`${path}.description must not be empty`);
+      if (typeof draft.name === "string" && hasUnsafeTaskText(draft.name)) {
+        errors.push(`${path}.name contains an unsafe control character`);
+      }
+      if (typeof draft.name === "string" && taskTextLength(draft.name.trim()) > MAX_TASK_NAME_LENGTH) {
+        errors.push(`${path}.name must be at most ${MAX_TASK_NAME_LENGTH} characters`);
+      }
+      if (draft.description !== undefined && draft.description !== null) {
+        if (typeof draft.description !== "string" || !draft.description.trim()) {
+          errors.push(`${path}.description must not be empty`);
+        } else {
+          if (hasUnsafeTaskText(draft.description)) {
+            errors.push(`${path}.description contains an unsafe control character`);
+          }
+          if (taskTextLength(draft.description.trim()) > MAX_TASK_DESCRIPTION_LENGTH) {
+            errors.push(`${path}.description must be at most ${MAX_TASK_DESCRIPTION_LENGTH} characters`);
+          }
+        }
       }
       if (draft.status !== undefined && draft.status !== null && !VALID_STATUSES.has(draft.status)) {
         errors.push(`${path}.status is invalid`);
@@ -331,6 +406,10 @@ export class TaskState {
         }
       }
 
+      if (nextId >= Number.MAX_SAFE_INTEGER) {
+        errors.push("no safe task IDs remain");
+        return;
+      }
       const id = nextId++;
       const status = draft.status ?? "pending";
       addedIds.push(id);
@@ -346,11 +425,21 @@ export class TaskState {
 
       const children = Array.isArray(draft.children) ? draft.children : [];
       for (const [index, child] of children.entries()) {
-        append(child, id, `${path}.children[${index}]`, true);
+        if (mutationTaskCount >= MAX_TASKS_PER_MUTATION) {
+          errors.push(`tasks must contain at most ${MAX_TASKS_PER_MUTATION} tasks per mutation`);
+          break;
+        }
+        append(child, id, `${path}.children[${index}]`, true, depth + 1);
       }
     };
 
-    drafts.forEach((draft, index) => append(draft, null, `tasks[${index}]`, false));
+    for (const [index, draft] of drafts.entries()) {
+      if (mutationTaskCount >= MAX_TASKS_PER_MUTATION) {
+        errors.push(`tasks must contain at most ${MAX_TASKS_PER_MUTATION} tasks per mutation`);
+        break;
+      }
+      append(draft, null, `tasks[${index}]`, false, 1);
+    }
     errors.push(...validateGraph(working));
     if (errors.length > 0) throw new TaskValidationError([...new Set(errors)]);
 
@@ -387,6 +476,9 @@ export class TaskState {
   update(patches: TaskPatch[]): Task[] {
     const errors: string[] = [];
     if (!Array.isArray(patches) || patches.length === 0) throw new TaskValidationError(["tasks must not be empty"]);
+    if (patches.length > MAX_TASKS_PER_MUTATION) {
+      throw new TaskValidationError([`tasks must contain at most ${MAX_TASKS_PER_MUTATION} patches`]);
+    }
 
     const duplicateIds = patches
       .map((patch) => patch.id)
@@ -415,9 +507,23 @@ export class TaskState {
         errors.push(`${path}.name must not be empty`);
       }
       if (typeof patch.name === "string" && /[\r\n]/.test(patch.name)) errors.push(`${path}.name must be a single line`);
+      if (typeof patch.name === "string" && hasUnsafeTaskText(patch.name)) {
+        errors.push(`${path}.name contains an unsafe control character`);
+      }
+      if (typeof patch.name === "string" && taskTextLength(patch.name.trim()) > MAX_TASK_NAME_LENGTH) {
+        errors.push(`${path}.name must be at most ${MAX_TASK_NAME_LENGTH} characters`);
+      }
       if (hasDescriptionChange && (typeof patch.description !== "string" || !patch.description.trim())) {
         errors.push(`${path}.description must not be empty`);
       }
+      if (typeof patch.description === "string") {
+        if (hasUnsafeTaskText(patch.description)) {
+          errors.push(`${path}.description contains an unsafe control character`);
+        }
+        if (taskTextLength(patch.description.trim()) > MAX_TASK_DESCRIPTION_LENGTH) {
+          errors.push(`${path}.description must be at most ${MAX_TASK_DESCRIPTION_LENGTH} characters`);
+        }
+      }
       if (hasStatusChange && !VALID_STATUSES.has(patch.status as TaskStatus)) errors.push(`${path}.status is invalid`);
       if (
         hasParentChange &&
@@ -460,6 +566,9 @@ export class TaskState {
 
   remove(ids: number[]): Task[] {
     if (!Array.isArray(ids) || ids.length === 0) throw new TaskValidationError(["ids must not be empty"]);
+    if (ids.length > MAX_TASKS_PER_MUTATION) {
+      throw new TaskValidationError([`ids must contain at most ${MAX_TASKS_PER_MUTATION} entries`]);
+    }
     const uniqueIds = [...new Set(ids)];
     const missing = uniqueIds.filter((id) => !this.records.some((task) => task.id === id));
     if (missing.length > 0) throw new TaskValidationError([`task ids do not exist: ${missing.join(", ")}`]);
@@ -479,12 +588,21 @@ export class TaskState {
   }
 
   restore(snapshot: TaskSnapshot): void {
-    if (!snapshot || !Array.isArray(snapshot.tasks) || !Number.isInteger(snapshot.nextId)) {
+    if (!snapshot || !Array.isArray(snapshot.tasks)) {
       throw new TaskValidationError(["invalid task snapshot"]);
     }
+    if (!Number.isSafeInteger(snapshot.nextId) || snapshot.nextId < 1) {
+      throw new TaskValidationError(["nextId must be a positive safe integer"]);
+    }
     if (snapshot.timings !== undefined && !Array.isArray(snapshot.timings)) {
       throw new TaskValidationError(["invalid task snapshot timings"]);
     }
+    if (snapshot.tasks.length > MAX_TASKS) {
+      throw new TaskValidationError([`task session is limited to ${MAX_TASKS} tasks`]);
+    }
+    if ((snapshot.timings?.length ?? 0) > MAX_TASKS) {
+      throw new TaskValidationError([`task snapshot timings are limited to ${MAX_TASKS} entries`]);
+    }
 
     const records = snapshot.tasks.map(({ id, name, description, status, parentId }) => ({
       id,
@@ -504,8 +622,8 @@ export class TaskState {
         timingErrors.push(`${path} must be an object`);
         continue;
       }
-      if (!Number.isInteger(timing.taskId) || timing.taskId < 1) {
-        timingErrors.push(`${path}.taskId must be a positive integer`);
+      if (!Number.isSafeInteger(timing.taskId) || timing.taskId < 1) {
+        timingErrors.push(`${path}.taskId must be a positive safe integer`);
         continue;
       }
       if (timedIds.has(timing.taskId)) {
@@ -544,13 +662,18 @@ export class TaskState {
     this.records = [];
     this.nextId = 1;
     for (const entry of ctx.sessionManager.getBranch()) {
-      if (entry.type !== "message") continue;
-      const message = entry.message;
-      if (message.role !== "toolResult" || !MUTATION_TOOLS.has(message.toolName)) continue;
-      const details = message.details as TaskToolDetails | undefined;
-      if (!details?.snapshot) continue;
+      let snapshot: TaskSnapshot | undefined;
+      if (entry.type === "custom" && entry.customType === TASK_STATE_ENTRY_TYPE) {
+        snapshot = entry.data as TaskSnapshot | undefined;
+      } else if (entry.type === "message") {
+        const message = entry.message;
+        if (message.role === "toolResult" && MUTATION_TOOLS.has(message.toolName)) {
+          snapshot = (message.details as TaskToolDetails | undefined)?.snapshot;
+        }
+      }
+      if (!snapshot) continue;
       try {
-        this.restore(details.snapshot);
+        this.restore(snapshot);
       } catch {
         // Ignore corrupt historical snapshots and keep the latest valid state.
       }

src/tools.ts

@@ -2,6 +2,14 @@ import { StringEnum } from "@earendil-works/pi-ai";
 import type { ExtensionAPI, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
 import { Text } from "@earendil-works/pi-tui";
 import { Type, type Static } from "typebox";
+import {
+  MAX_TASK_DEPTH,
+  MAX_TASK_DESCRIPTION_LENGTH,
+  MAX_TASK_NAME_LENGTH,
+  MAX_TASKS_PER_MUTATION,
+  TASK_DESCRIPTION_PATTERN,
+  TASK_NAME_PATTERN,
+} from "./limits.ts";
 import { formatCompactTaskTree, TASK_PROMPT_GUIDELINES } from "./prompt.ts";
 import type { TaskState } from "./state.ts";
 import type { AddTaskDraft, Task, TaskPatch, TaskToolDetails } from "./types.ts";
@@ -77,15 +85,29 @@ const AddTaskSchema = Type.Cyclic(
   {
     AddTask: Type.Object(
       {
-        name: Type.String({ minLength: 1 }),
-        description: Type.Union([Type.String({ minLength: 1 }), Type.Null()], {
-          description: "Detailed scope, constraints, and done criteria; use null when no detail is needed.",
+        name: Type.String({
+          minLength: 1,
+          maxLength: MAX_TASK_NAME_LENGTH,
+          pattern: TASK_NAME_PATTERN,
         }),
+        description: Type.Union(
+          [
+            Type.String({
+              minLength: 1,
+              maxLength: MAX_TASK_DESCRIPTION_LENGTH,
+              pattern: TASK_DESCRIPTION_PATTERN,
+            }),
+            Type.Null(),
+          ],
+          {
+            description: "Detailed scope, constraints, and done criteria; use null when no detail is needed.",
+          },
+        ),
         status: TaskStatusSchema,
         parentId: Type.Union([Type.Integer({ minimum: 1 }), Type.Null()], {
           description: "Existing parent ID for a top-level append; use null for roots, nested children, and replace mode.",
         }),
-        children: Type.Array(Type.Ref("AddTask")),
+        children: Type.Array(Type.Ref("AddTask"), { maxItems: MAX_TASKS_PER_MUTATION }),
       },
       { additionalProperties: false },
     ),
@@ -99,6 +121,7 @@ export const SetTaskParams = hoistDefsToRoot(
       {
         mode: SetTaskModeSchema,
         tasks: Type.Array(AddTaskSchema, {
+          maxItems: MAX_TASKS_PER_MUTATION,
           description: "Tasks to append or install. May be empty only in replace mode.",
         }),
         force: Type.Boolean({
@@ -113,12 +136,24 @@ export const SetTaskParams = hoistDefsToRoot(
 const TaskPatchSchema = Type.Object(
   {
     id: Type.Integer({ minimum: 1 }),
-    name: Type.Union([Type.String({ minLength: 1 }), Type.Null()], {
-      description: "New name, or null to leave it unchanged.",
-    }),
-    description: Type.Union([Type.String({ minLength: 1 }), Type.Null()], {
-      description: "New description, or null to leave it unchanged.",
-    }),
+    name: Type.Union(
+      [
+        Type.String({ minLength: 1, maxLength: MAX_TASK_NAME_LENGTH, pattern: TASK_NAME_PATTERN }),
+        Type.Null(),
+      ],
+      { description: "New name, or null to leave it unchanged." },
+    ),
+    description: Type.Union(
+      [
+        Type.String({
+          minLength: 1,
+          maxLength: MAX_TASK_DESCRIPTION_LENGTH,
+          pattern: TASK_DESCRIPTION_PATTERN,
+        }),
+        Type.Null(),
+      ],
+      { description: "New description, or null to leave it unchanged." },
+    ),
     status: Type.Union([TaskStatusSchema, Type.Null()], {
       description: "New status, or null to leave it unchanged.",
     }),
@@ -134,15 +169,20 @@ const TaskPatchSchema = Type.Object(
   { additionalProperties: false },
 );
 
-export const UpdateTaskParams = Type.Object(
+export const PatchTasksParams = Type.Object(
   {
-    tasks: Type.Array(TaskPatchSchema, { minItems: 1, description: "Task patches applied atomically in array order." }),
+    tasks: Type.Array(TaskPatchSchema, {
+      minItems: 1,
+      maxItems: MAX_TASKS_PER_MUTATION,
+      description: "Task patches applied atomically in array order.",
+    }),
   },
   { additionalProperties: false },
 );
 
 const TaskIdsSchema = Type.Array(Type.Integer({ minimum: 1 }), {
   minItems: 1,
+  maxItems: MAX_TASKS_PER_MUTATION,
   description: "Task IDs to process. Duplicate IDs are deduplicated.",
 });
 
@@ -158,14 +198,23 @@ export const IdsParams = Type.Object({ ids: TaskIdsSchema }, { additionalPropert
 
 export const ListTaskParams = Type.Object({}, { additionalProperties: false });
 
-function prepareTaskDraft(value: unknown): unknown {
+interface DraftPreparationState {
+  count: number;
+}
+
+function prepareTaskDraft(value: unknown, depth: number, state: DraftPreparationState): unknown {
+  state.count += 1;
+  if (depth > MAX_TASK_DEPTH || state.count > MAX_TASKS_PER_MUTATION) return {};
   if (!value || typeof value !== "object" || Array.isArray(value)) return value;
+
   const input = value as Record<string, unknown>;
   const children =
     input.children === undefined
       ? []
       : Array.isArray(input.children)
-        ? input.children.map(prepareTaskDraft)
+        ? input.children
+            .slice(0, MAX_TASKS_PER_MUTATION + 1)
+            .map((child) => prepareTaskDraft(child, depth + 1, state))
         : input.children;
   return {
     ...input,
@@ -181,9 +230,14 @@ function prepareSetTaskArguments(value: unknown): Static<typeof SetTaskParams> {
     return value as Static<typeof SetTaskParams>;
   }
   const input = value as Record<string, unknown>;
+  const state: DraftPreparationState = { count: 0 };
   return {
     ...input,
-    tasks: Array.isArray(input.tasks) ? input.tasks.map(prepareTaskDraft) : input.tasks,
+    tasks: Array.isArray(input.tasks)
+      ? input.tasks
+          .slice(0, MAX_TASKS_PER_MUTATION + 1)
+          .map((task) => prepareTaskDraft(task, 1, state))
+      : input.tasks,
     force: input.force === undefined ? false : input.force,
   } as Static<typeof SetTaskParams>;
 }
@@ -201,15 +255,17 @@ function prepareTaskPatch(value: unknown): unknown {
   };
 }
 
-function prepareUpdateTaskArguments(value: unknown): Static<typeof UpdateTaskParams> {
+function preparePatchTasksArguments(value: unknown): Static<typeof PatchTasksParams> {
   if (!value || typeof value !== "object" || Array.isArray(value)) {
-    return value as Static<typeof UpdateTaskParams>;
+    return value as Static<typeof PatchTasksParams>;
   }
   const input = value as Record<string, unknown>;
   return {
     ...input,
-    tasks: Array.isArray(input.tasks) ? input.tasks.map(prepareTaskPatch) : input.tasks,
-  } as Static<typeof UpdateTaskParams>;
+    tasks: Array.isArray(input.tasks)
+      ? input.tasks.slice(0, MAX_TASKS_PER_MUTATION + 1).map(prepareTaskPatch)
+      : input.tasks,
+  } as Static<typeof PatchTasksParams>;
 }
 
 interface SetTaskInput {
@@ -218,7 +274,7 @@ interface SetTaskInput {
   force?: boolean;
 }
 
-interface UpdateTaskInput {
+interface PatchTasksInput {
   tasks: TaskPatch[];
 }
 
@@ -230,7 +286,7 @@ interface RemoveTaskInput extends IdsInput {
   reason: "mistaken" | "duplicate" | "canceled";
 }
 
-type ChangeHandler = (ctx: ExtensionContext) => void;
+type ChangeHandler = (ctx: ExtensionContext, restartAutoClear?: boolean) => void;
 
 function taskIds(tasks: Task[]): string {
   return tasks.map((task) => task.id).join(", ");
@@ -267,9 +323,9 @@ function renderCall(title: string, count: number | undefined, theme: Theme): Tex
   return new Text(theme.fg("toolTitle", theme.bold(title)) + suffix, 0, 0);
 }
 
-function notifyChange(onChange: ChangeHandler, ctx: ExtensionContext): void {
+function notifyChange(onChange: ChangeHandler, ctx: ExtensionContext, restartAutoClear = false): void {
   try {
-    onChange(ctx);
+    onChange(ctx, restartAutoClear);
   } catch (error) {
     console.error("[pi-todo-herdr] failed to refresh task UI:", error);
   }
@@ -280,14 +336,14 @@ export function registerTaskTools(pi: ExtensionAPI, state: TaskState, onChange:
     name: "set_tasks",
     label: "Set Tasks",
     description:
-      "Atomically append tasks or replace the task tree. Pass force false unless unfinished work is explicitly discarded.",
+      `Atomically append tasks or replace the task tree. Supply at most ${MAX_TASKS_PER_MUTATION} total tasks across ${MAX_TASK_DEPTH} stored levels: root categories, child items, and leaf sub-items beneath the widget's virtual root. Pass force false unless unfinished work is explicitly discarded.`,
     promptGuidelines: [...TASK_PROMPT_GUIDELINES],
     parameters: SetTaskParams,
     prepareArguments: prepareSetTaskArguments,
     async execute(_toolCallId, params: SetTaskInput, _signal, _onUpdate, ctx) {
       try {
         const affected = state.set(params.mode, params.tasks, params.force);
-        notifyChange(onChange, ctx);
+        notifyChange(onChange, ctx, params.mode === "replace");
         return {
           content: [{ type: "text" as const, text: setTaskText(params.mode, affected, state) }],
           details: details(params.mode, state, affected),
@@ -305,14 +361,19 @@ export function registerTaskTools(pi: ExtensionAPI, state: TaskState, onChange:
   });
 
   pi.registerTool({
-    name: "update_task",
-    label: "Update Tasks",
+    name: "patch_tasks",
+    label: "Patch Tasks",
     description:
-      "Atomically patch tasks. Use null for unchanged text/status, parentId -1 for unchanged or 0 for root, and position -1 for unchanged.",
-    parameters: UpdateTaskParams,
-    prepareArguments: prepareUpdateTaskArguments,
-    async execute(_toolCallId, params: UpdateTaskInput, _signal, _onUpdate, ctx) {
+      "Atomically patch tasks. Use null for unchanged text/status, parentId -1 for unchanged or 0 for root, and position -1 for unchanged. Completed task trees may auto-clear; do not recreate cleared completed tasks.",
+    parameters: PatchTasksParams,
+    prepareArguments: preparePatchTasksArguments,
+    async execute(_toolCallId, params: PatchTasksInput, _signal, _onUpdate, ctx) {
       try {
+        if (state.list().length === 0) {
+          throw new TaskValidationError([
+            "task tree is empty and may have auto-cleared after completion; do not recreate completed tasks. Use set_tasks only for genuinely new or remaining work",
+          ]);
+        }
         const affected = state.update(params.tasks);
         notifyChange(onChange, ctx);
         return {
@@ -320,11 +381,11 @@ export function registerTaskTools(pi: ExtensionAPI, state: TaskState, onChange:
           details: details("update", state, affected),
         };
       } catch (error) {
-        throwToolError("Update", error);
+        throwToolError("Patch", error);
       }
     },
-    renderCall(args: UpdateTaskInput, theme: Theme) {
-      return renderCall("Update Tasks", args.tasks?.length, theme);
+    renderCall(args: PatchTasksInput, theme: Theme) {
+      return renderCall("Patch Tasks", args.tasks?.length, theme);
     },
     renderResult(result, { expanded }, theme) {
       return renderToolResult(result, expanded, theme);

src/ui.ts

@@ -1,6 +1,7 @@
 import type { Component } from "@earendil-works/pi-tui";
 import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import type { Theme } from "@earendil-works/pi-coding-agent";
+import { MAX_WIDGET_TASK_ROWS } from "./limits.ts";
 import type { Task, TaskStats, TaskToolDetails } from "./types.ts";
 
 export const STATUS_ICONS = {
@@ -10,6 +11,8 @@ export const STATUS_ICONS = {
   done: "✓",
 } as const;
 
+const IN_PROGRESS_WIDGET_FRAMES = ["◐", "◓", "◑", "◒"] as const;
+
 interface DescendantStats {
   done: number;
   total: number;
@@ -18,6 +21,8 @@ interface DescendantStats {
 interface TreeRow {
   task: Task;
   prefix: string;
+  depth: number;
+  siblingIndex: number;
   collapsed?: DescendantStats;
 }
 
@@ -43,28 +48,28 @@ function descendantStats(task: Task, byId: Map<number, Task>, memo: Map<number,
   return stats;
 }
 
-function buildTreeRows(tasks: Task[], collapseCompleted: boolean): TreeRow[] {
+function buildTreeRows(tasks: Task[], collapseCompleted: boolean, connectRoots = false): TreeRow[] {
   const byId = new Map(tasks.map((task) => [task.id, task]));
   const memo = new Map<number, DescendantStats>();
   const rows: TreeRow[] = [];
 
-  const visit = (task: Task, ancestorHasNext: boolean[], isLast: boolean, depth: number) => {
+  const visit = (task: Task, ancestorHasNext: boolean[], isLast: boolean, depth: number, siblingIndex: number) => {
     const ancestors = ancestorHasNext.map((hasNext) => (hasNext ? "│  " : "   ")).join("");
-    const connector = depth === 0 ? "" : isLast ? "└─ " : "├─ ";
+    const connector = depth === 0 && !connectRoots ? "" : isLast ? "└─ " : "├─ ";
     const stats = collapseCompleted ? descendantStats(task, byId, memo) : undefined;
     const collapsed = stats && stats.total > 0 && stats.done === stats.total ? stats : undefined;
-    rows.push({ task, prefix: `${ancestors}${connector}`, ...(collapsed ? { collapsed } : {}) });
+    rows.push({ task, prefix: `${ancestors}${connector}`, depth, siblingIndex, ...(collapsed ? { collapsed } : {}) });
     if (collapsed) return;
 
     const children = task.childrenIds.map((id) => byId.get(id)).filter((child): child is Task => child !== undefined);
     children.forEach((child, index) => {
-      const childAncestors = depth === 0 ? [] : [...ancestorHasNext, !isLast];
-      visit(child, childAncestors, index === children.length - 1, depth + 1);
+      const childAncestors = depth === 0 && !connectRoots ? [] : [...ancestorHasNext, !isLast];
+      visit(child, childAncestors, index === children.length - 1, depth + 1, index);
     });
   };
 
   const roots = tasks.filter((task) => task.parentId === null);
-  roots.forEach((root, index) => visit(root, [], index === roots.length - 1, 0));
+  roots.forEach((root, index) => visit(root, [], index === roots.length - 1, 0, index));
   return rows;
 }
 
@@ -78,8 +83,12 @@ function styleTaskName(task: Task, theme: Theme): string {
   return task.name;
 }
 
-function styleStatusIcon(task: Task, theme: Theme): string {
-  const icon = STATUS_ICONS[task.status];
+function styleStatusIcon(task: Task, theme: Theme, inProgressFrame?: number): string {
+  const frameIndex = inProgressFrame === undefined ? undefined : Math.abs(Math.trunc(inProgressFrame));
+  const icon =
+    task.status === "in-progress" && frameIndex !== undefined
+      ? IN_PROGRESS_WIDGET_FRAMES[frameIndex % IN_PROGRESS_WIDGET_FRAMES.length]
+      : STATUS_ICONS[task.status];
   if (task.status === "done") return theme.fg("success", icon);
   if (task.status === "in-progress") return theme.fg("warning", icon);
   if (task.status === "blocked") return theme.fg("error", icon);
@@ -102,47 +111,164 @@ function renderTaskLineWithSuffix(
   theme: Theme,
   width: number,
   suffix?: string,
+  identifier = `${task.id}.`,
+  identifierBeforeStatus = false,
+  inProgressFrame?: number,
 ): string {
-  const line =
-    theme.fg("dim", prefix) +
-    styleStatusIcon(task, theme) +
-    " " +
-    theme.fg("accent", `${task.id}.`) +
-    " " +
-    styleTaskName(task, theme);
+  const status = styleStatusIcon(task, theme, inProgressFrame);
+  const styledIdentifier = identifier.length === 0 ? "" : theme.fg("accent", identifier);
+  const identifierFits =
+    !identifierBeforeStatus ||
+    visibleWidth(prefix) + visibleWidth(styledIdentifier) + 1 + visibleWidth(status) <= width;
+  const visibleIdentifier = identifierFits ? styledIdentifier : "";
+  const markers = identifierBeforeStatus ? [visibleIdentifier, status] : [status, visibleIdentifier];
+  const leading = theme.fg("dim", prefix) + markers.filter((marker) => marker.length > 0).join(" ");
+  const styledName = styleTaskName(task, theme);
+  const renderMain = (targetWidth: number): string => {
+    const safeWidth = Math.max(1, targetWidth);
+    if (!identifierBeforeStatus) return truncateToWidth(`${leading} ${styledName}`, safeWidth);
+
+    const availableNameWidth = safeWidth - visibleWidth(leading) - 1;
+    if (availableNameWidth < 1) return truncateToWidth(leading, safeWidth);
+    return `${leading} ${truncateToWidth(styledName, availableNameWidth)}`;
+  };
   const trailing = [
     suffix === undefined ? undefined : theme.fg("dim", ` · ${suffix}`),
     task.durationMs === undefined ? undefined : theme.fg("dim", ` · ${formatDuration(task.durationMs)}`),
   ]
     .filter((part): part is string => part !== undefined)
     .join("");
-  if (trailing.length === 0) return truncateToWidth(line, Math.max(1, width));
+  if (trailing.length === 0) return renderMain(width);
 
   const trailingWidth = visibleWidth(trailing);
-  const minimumTaskWidth = suffix === undefined ? 6 : 12;
-  if (width <= trailingWidth + minimumTaskWidth) return truncateToWidth(line, Math.max(1, width));
+  const minimumTaskWidth = Math.max(suffix === undefined ? 6 : 12, visibleWidth(leading));
+  if (width <= trailingWidth + minimumTaskWidth) return renderMain(width);
   const taskWidth = Math.max(1, width - trailingWidth);
-  return truncateToWidth(line, taskWidth) + trailing;
+  return renderMain(taskWidth) + trailing;
 }
 
 export function renderTaskLine(task: Task, prefix: string, theme: Theme, width: number): string {
   return renderTaskLineWithSuffix(task, prefix, theme, width);
 }
 
-export function renderTree(tasks: Task[], theme: Theme, width: number, padding = "  "): string[] {
-  return orderedTreeRows(tasks).map(({ task, prefix }) => renderTaskLine(task, `${padding}${prefix}`, theme, width));
+const STATUS_ICON_WIDTH = 1;
+const TRUNCATED_STATUS_WIDTH = STATUS_ICON_WIDTH + 3;
+
+function indentDeepestLeaf(
+  prefix: string,
+  depth: number,
+  maximumDepth: number,
+  width: number,
+  minimumContentWidth: number,
+): string {
+  if (depth === 0 || depth !== maximumDepth) return prefix;
+
+  const indentedPrefix = `${prefix}   `;
+  return visibleWidth(indentedPrefix) + minimumContentWidth <= width ? indentedPrefix : prefix;
 }
 
-export function renderWidgetTree(tasks: Task[], theme: Theme, width: number, padding = "  "): string[] {
-  return buildTreeRows(tasks, true).map(({ task, prefix, collapsed }) => {
+export function renderTree(tasks: Task[], theme: Theme, width: number, padding = "  "): string[] {
+  const maximumDepth = maximumTaskDepth(tasks);
+  return orderedTreeRows(tasks).map(({ task, prefix, depth }) =>
+    renderTaskLine(
+      task,
+      indentDeepestLeaf(`${padding}${prefix}`, depth, maximumDepth, width, TRUNCATED_STATUS_WIDTH),
+      theme,
+      width,
+    ),
+  );
+}
+
+function toRomanNumeral(value: number): string {
+  const numerals: Array<[number, string]> = [
+    [100, "C"],
+    [90, "XC"],
+    [50, "L"],
+    [40, "XL"],
+    [10, "X"],
+    [9, "IX"],
+    [5, "V"],
+    [4, "IV"],
+    [1, "I"],
+  ];
+  let remaining = value;
+  let result = "";
+  for (const [amount, numeral] of numerals) {
+    while (remaining >= amount) {
+      result += numeral;
+      remaining -= amount;
+    }
+  }
+  return result;
+}
+
+function maximumTaskDepth(tasks: Task[]): number {
+  const byId = new Map(tasks.map((task) => [task.id, task]));
+  let maximumDepth = 0;
+
+  for (const task of tasks) {
+    let depth = 0;
+    let parentId = task.parentId;
+    while (parentId !== null) {
+      depth += 1;
+      parentId = byId.get(parentId)?.parentId ?? null;
+    }
+    maximumDepth = Math.max(maximumDepth, depth);
+  }
+
+  return maximumDepth;
+}
+
+function widgetOutlineLabel(depth: number, siblingIndex: number, maximumDepth: number): string {
+  if (depth === maximumDepth) return "";
+  if (maximumDepth === 2 && depth === 0) return `${toRomanNumeral(siblingIndex + 1)}.`;
+  return `${siblingIndex + 1}.`;
+}
+
+export function renderWidgetTree(
+  tasks: Task[],
+  theme: Theme,
+  width: number,
+  padding = "  ",
+  inProgressFrame?: number,
+  maxBodyRows?: number,
+): string[] {
+  const rows = buildTreeRows(tasks, true, true);
+  const maximumDepth = maximumTaskDepth(tasks);
+  const outputLimit =
+    maxBodyRows === undefined ? MAX_WIDGET_TASK_ROWS : Math.max(1, Math.floor(Number.isFinite(maxBodyRows) ? maxBodyRows : 1));
+  const hasOverflow = rows.length > outputLimit;
+  // The legacy, standalone widget allows twelve task rows plus one summary.
+  // A combined panel treats maxBodyRows as a strict total body-line budget.
+  const taskRowLimit = maxBodyRows === undefined ? outputLimit : hasOverflow ? Math.max(0, outputLimit - 1) : outputLimit;
+  const visibleRows = rows.slice(0, taskRowLimit);
+  const lines = visibleRows.map(({ task, prefix, depth, siblingIndex, collapsed }) => {
     const summary = collapsed === undefined ? undefined : `${collapsed.done}/${collapsed.total} done`;
-    return renderTaskLineWithSuffix(task, `${padding}${prefix}`, theme, width, summary);
+    const identifier = widgetOutlineLabel(depth, siblingIndex, maximumDepth);
+    return renderTaskLineWithSuffix(
+      task,
+      indentDeepestLeaf(`${padding}${prefix}`, depth, maximumDepth, width, STATUS_ICON_WIDTH),
+      theme,
+      width,
+      summary,
+      identifier,
+      true,
+      inProgressFrame,
+    );
   });
+  if (!hasOverflow) return lines;
+
+  const hiddenTasks = rows.slice(taskRowLimit).reduce(
+    (count, row) => count + 1 + (row.collapsed?.total ?? 0),
+    0,
+  );
+  const label = `${padding}… ${hiddenTasks} more task${hiddenTasks === 1 ? "" : "s"}`;
+  return [...lines, truncateToWidth(theme.fg("dim", label), Math.max(1, width))];
 }
 
 export function progressLabel(stats: TaskStats): string {
   const blocked = stats.blocked > 0 ? ` · !${stats.blocked}` : "";
-  return ` Tasks ${stats.done}/${stats.total}${blocked}`;
+  return ` Todos ${stats.done}/${stats.total}${blocked}`;
 }
 
 export function renderProgressHeader(stats: TaskStats, theme: Theme, width: number): string {
@@ -158,10 +284,41 @@ export function renderProgressHeader(stats: TaskStats, theme: Theme, width: numb
   return truncateToWidth(`${theme.fg("accent", label)}  ${bar}`, Math.max(1, width));
 }
 
+function compactProgressBar(stats: TaskStats, theme: Theme): string {
+  const width = 8;
+  const filled = stats.total === 0 ? 0 : Math.round((stats.done / stats.total) * width);
+  const filledColor = stats.done === stats.total ? "success" : "accent";
+  return (
+    theme.fg(filledColor, theme.bold("━".repeat(filled))) +
+    theme.fg("borderMuted", "─".repeat(width - filled))
+  );
+}
+
+/** Render the compact, unboxed Todo header and task rows. */
+export function renderTodoPanel(
+  tasks: Task[],
+  theme: Theme,
+  width: number,
+  inProgressFrame?: number,
+  maxBodyRows?: number,
+): string[] {
+  if (!Number.isFinite(width) || width <= 0) return [];
+  const safeWidth = Math.max(1, Math.floor(width));
+  const stats = snapshotStats(tasks);
+  const title = theme.fg("accent", "Todos");
+  const count = theme.fg("muted", `${stats.done}/${stats.total}${stats.blocked > 0 ? ` · !${stats.blocked}` : ""}`);
+  const fullHeader = `${title} ${count}  ${compactProgressBar(stats, theme)}`;
+  const compactHeader = `${title} ${count}`;
+  const header = visibleWidth(fullHeader) <= safeWidth ? fullHeader : truncateToWidth(compactHeader, safeWidth);
+  return [header, ...renderWidgetTree(tasks, theme, safeWidth, "  ", inProgressFrame, maxBodyRows)];
+}
+
 class TaskResultComponent implements Component {
-  constructor(
-    private readonly build: (width: number) => string[],
-  ) {}
+  private readonly build: (width: number) => string[];
+
+  constructor(build: (width: number) => string[]) {
+    this.build = build;
+  }
 
   render(width: number): string[] {
     return this.build(Math.max(1, width)).map((line) => truncateToWidth(line, Math.max(1, width)));

src/widget.ts

@@ -1,11 +1,398 @@
-import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
 import type { TaskState } from "./state.ts";
-import { renderProgressHeader, renderWidgetTree } from "./ui.ts";
+import { renderTodoPanel } from "./ui.ts";
 
 const WIDGET_ID = "pi-todo-herdr";
-const TIMER_REFRESH_MS = 1000;
+const COMBINED_WIDGET_BREAKPOINT = 120;
+const COMBINED_BODY_ROWS = 10;
+export const TODO_ANIMATION_INTERVAL_MS = 500;
+
+interface StatusWidgetTheme {
+  fg(color: string, text: string): string;
+}
+
+interface StatusWidget {
+  readonly source: object;
+  readonly hasContent: () => boolean;
+  readonly getBodyRowCount: () => number;
+  readonly render: (width: number, maxBodyRows?: number, theme?: StatusWidgetTheme) => string[];
+  readonly claim: (onChange: () => void) => () => void;
+  readonly isClaimed: (onChange: () => void) => boolean;
+}
+
+interface InteractiveSubagentsGlobal {
+  statusWidget?: unknown;
+}
+
+class OptionalIntegrationError extends Error {
+  constructor(message: string, cause?: unknown) {
+    super(message, { cause });
+    this.name = "OptionalIntegrationError";
+  }
+}
+
+class TuiRenderFailure extends Error {
+  readonly original: unknown;
+
+  constructor(original: unknown) {
+    super("TUI render failed", { cause: original });
+    this.name = "TuiRenderFailure";
+    this.original = original;
+  }
+}
+
+function optionalIntegrationFailure(message: string, cause?: unknown): OptionalIntegrationError {
+  return new OptionalIntegrationError(message, cause);
+}
+
+function callOptionalIntegration<T>(message: string, operation: () => T): T {
+  try {
+    return operation();
+  } catch (error) {
+    if (error instanceof TuiRenderFailure) throw error.original;
+    if (error instanceof OptionalIntegrationError) throw error;
+    throw optionalIntegrationFailure(message, error);
+  }
+}
+
+interface ActiveClaim {
+  owner: object;
+  source: object;
+  onChange: () => void;
+  release: () => void;
+  generation: number;
+}
+
+// Symbols make the claim and generation survive extension reloads. A newly
+// loaded module can invalidate a stale component before installing its own.
+const ACTIVE_CLAIM_KEY = Symbol.for("pi-todo-herdr/active-subagents-claim");
+const WIDGET_GENERATION_KEY = Symbol.for("pi-todo-herdr/widget-generation");
+const ACTIVE_RUNTIME_KEY = Symbol.for("pi-todo-herdr/active-runtime");
+const RUNTIME_TOKEN = Symbol("pi-todo-herdr-runtime");
+const previousClaim = Reflect.get(globalThis, ACTIVE_CLAIM_KEY);
+Reflect.set(globalThis, ACTIVE_RUNTIME_KEY, RUNTIME_TOKEN);
+if (previousClaim !== null && typeof previousClaim === "object") {
+  const release = (previousClaim as { release?: unknown }).release;
+  Reflect.deleteProperty(globalThis, ACTIVE_CLAIM_KEY);
+  if (typeof release === "function") {
+    try {
+      release.call(previousClaim);
+    } catch {
+      // A stale claim must not prevent the new extension runtime loading.
+    }
+  }
+}
+
+function isCurrentRuntime(): boolean {
+  return Reflect.get(globalThis, ACTIVE_RUNTIME_KEY) === RUNTIME_TOKEN;
+}
+
+function getActiveClaim(): ActiveClaim | undefined {
+  const claim = Reflect.get(globalThis, ACTIVE_CLAIM_KEY);
+  return claim !== null && typeof claim === "object" ? (claim as ActiveClaim) : undefined;
+}
+
+function setActiveClaim(claim: ActiveClaim | undefined): void {
+  if (claim === undefined) Reflect.deleteProperty(globalThis, ACTIVE_CLAIM_KEY);
+  else Reflect.set(globalThis, ACTIVE_CLAIM_KEY, claim);
+}
+
+function claimBelongsTo(claim: ActiveClaim | undefined, owner: object, generation: number): claim is ActiveClaim {
+  return claim?.owner === owner && claim.generation === generation;
+}
+
+function nextWidgetGeneration(): number {
+  const current = Reflect.get(globalThis, WIDGET_GENERATION_KEY);
+  const generation = typeof current === "number" && Number.isSafeInteger(current) ? current + 1 : 1;
+  Reflect.set(globalThis, WIDGET_GENERATION_KEY, generation);
+  return generation;
+}
+
+function currentWidgetGeneration(): number {
+  const generation = Reflect.get(globalThis, WIDGET_GENERATION_KEY);
+  return typeof generation === "number" && Number.isSafeInteger(generation) ? generation : 0;
+}
+
+function releaseActiveClaim(owner?: object, generation?: number): void {
+  const activeClaim = getActiveClaim();
+  if (
+    (owner !== undefined && activeClaim?.owner !== owner) ||
+    (generation !== undefined && activeClaim?.generation !== generation)
+  ) return;
+  setActiveClaim(undefined);
+  if (activeClaim === undefined) return;
+  try {
+    activeClaim.release();
+  } catch {
+    // A broken optional integration must never prevent the Todo widget clearing.
+  }
+}
+
+function getStatusWidget(): StatusWidget | undefined {
+  try {
+    const globals = globalThis as typeof globalThis & {
+      __pi_interactive_subagents?: unknown;
+    };
+    const integration = globals.__pi_interactive_subagents;
+    if (integration === null || typeof integration !== "object") return undefined;
+    const statusWidget = (integration as InteractiveSubagentsGlobal).statusWidget;
+    if (statusWidget === null || typeof statusWidget !== "object") return undefined;
+
+    const candidate = statusWidget as Record<string, unknown>;
+    if (
+      typeof candidate.hasContent !== "function" ||
+      typeof candidate.getBodyRowCount !== "function" ||
+      typeof candidate.render !== "function" ||
+      typeof candidate.claim !== "function" ||
+      typeof candidate.isClaimed !== "function"
+    ) {
+      return undefined;
+    }
+
+    const source = statusWidget;
+    const call = <T>(methodName: string, args: unknown[] = []): T =>
+      callOptionalIntegration(`Subagents ${methodName} failed`, () => {
+        const method = candidate[methodName];
+        if (typeof method !== "function") {
+          throw optionalIntegrationFailure(`invalid Subagents ${methodName} method`);
+        }
+        return method.call(source, ...args) as T;
+      });
+
+    return {
+      source,
+      hasContent: () => {
+        const content = call<unknown>("hasContent");
+        if (typeof content !== "boolean") throw optionalIntegrationFailure("invalid Subagents content state");
+        return content;
+      },
+      getBodyRowCount: () => {
+        const count = call<unknown>("getBodyRowCount");
+        if (typeof count !== "number" || !Number.isFinite(count)) {
+          throw optionalIntegrationFailure("invalid Subagents body row count");
+        }
+        return count;
+      },
+      render: (width, maxBodyRows, theme) => {
+        const lines = call<unknown>("render", [width, maxBodyRows, theme]);
+        const hasAllEntries =
+          Array.isArray(lines) &&
+          lines.length > 0 &&
+          Array.from({ length: lines.length }, (_, index) => {
+            return Object.prototype.hasOwnProperty.call(lines, index) && typeof lines[index] === "string";
+          }).every(Boolean);
+        if (!hasAllEntries) throw optionalIntegrationFailure("invalid Subagents render output");
+        const validLines = lines as string[];
+        if (maxBodyRows !== undefined) {
+          const isBordered = validLines[0]?.includes("╭") && validLines.at(-1)?.includes("╰");
+          // Body rows exclude the provider's header. Legacy bordered output has
+          // top and bottom chrome; the current unboxed output has one header.
+          const headerAndChromeRows = isBordered ? 2 : 1;
+          const maxLines = maxBodyRows + headerAndChromeRows;
+          if (validLines.length > maxLines) {
+            throw optionalIntegrationFailure("Subagents render output exceeded its body limit");
+          }
+        }
+        return validLines;
+      },
+      claim: (onChange) => {
+        const release = call<unknown>("claim", [onChange]);
+        if (typeof release !== "function") throw optionalIntegrationFailure("invalid Subagents claim release");
+        return release as () => void;
+      },
+      isClaimed: (onChange) => {
+        const claimed = call<unknown>("isClaimed", [onChange]);
+        if (typeof claimed !== "boolean") throw optionalIntegrationFailure("invalid Subagents claim state");
+        return claimed;
+      },
+    };
+  } catch {
+    return undefined;
+  }
+}
+
+function claimStatusWidget(
+  statusWidget: StatusWidget,
+  owner: object,
+  generation: number,
+  tui: { requestRender(): void },
+): boolean {
+  const activeClaim = getActiveClaim();
+  if (activeClaim?.owner !== undefined && activeClaim.owner !== owner) return false;
+  if (claimBelongsTo(activeClaim, owner, generation) && activeClaim.source === statusWidget.source) {
+    try {
+      if (statusWidget.isClaimed(activeClaim.onChange)) return true;
+    } catch (error) {
+      releaseActiveClaim(owner, generation);
+      if (error instanceof OptionalIntegrationError) return false;
+      throw error;
+    }
+    // The provider may have been reset by a reload or another lifecycle event.
+    // Drop the stale local handle before asking it for a fresh claim.
+  }
+  releaseActiveClaim(owner, generation);
+
+  try {
+    const onChange = () => {
+      if (!isCurrentRuntime()) {
+        releaseActiveClaim(owner, generation);
+        return;
+      }
+      const currentClaim = getActiveClaim();
+      if (!claimBelongsTo(currentClaim, owner, generation) || currentClaim.onChange !== onChange) return;
+      try {
+        tui.requestRender();
+      } catch (error) {
+        // Let the provider restore its standalone widget when the TUI is gone.
+        releaseActiveClaim(owner, generation);
+        throw new TuiRenderFailure(error);
+      }
+    };
+    const release = statusWidget.claim(onChange);
+    setActiveClaim({ owner, source: statusWidget.source, onChange, release, generation });
+    return true;
+  } catch (error) {
+    if (error instanceof OptionalIntegrationError) return false;
+    throw error;
+  }
+}
+
+function normalizeWidth(width: number): number {
+  return Math.max(1, Math.floor(Number.isFinite(width) ? width : 1));
+}
+
+function fitLine(line: string, width: number): string {
+  const fittedWidth = normalizeWidth(width);
+  const fitted = truncateToWidth(line, fittedWidth);
+  return `${fitted}${" ".repeat(Math.max(0, fittedWidth - visibleWidth(fitted)))}`;
+}
+
+function renderStatusPanel(
+  statusWidget: StatusWidget,
+  width: number,
+  maxBodyRows: number,
+  theme: StatusWidgetTheme,
+): string[] {
+  return statusWidget.render(width, maxBodyRows, theme).map((line) => fitLine(line, width));
+}
+
+function normalizePanelHeight(lines: string[], height: number, blankLine: string): string[] {
+  if (lines.length >= height) return lines;
+  const blanks = Array.from({ length: height - lines.length }, () => blankLine);
+  const bottom = lines.at(-1);
+  if (bottom?.includes("╰")) return [...lines.slice(0, -1), ...blanks, bottom];
+  return [...lines, ...blanks];
+}
+
+function renderSideBySide(
+  tasks: ReturnType<TaskState["list"]>,
+  theme: Theme,
+  width: number,
+  inProgressFrame: number,
+  statusWidget: StatusWidget,
+): string[] {
+  const leftWidth = Math.floor((width - 1) / 2);
+  const rightWidth = width - 1 - leftWidth;
+  const todo = renderTodoPanel(tasks, theme, leftWidth, inProgressFrame, COMBINED_BODY_ROWS);
+  const subagents = renderStatusPanel(statusWidget, rightWidth, COMBINED_BODY_ROWS, theme);
+  const height = Math.max(todo.length, subagents.length);
+  const left = normalizePanelHeight(todo, height, " ".repeat(leftWidth)).map((line) => fitLine(line, leftWidth));
+  const right = normalizePanelHeight(subagents, height, " ".repeat(rightWidth));
+  return left.map((line, index) => `${line} ${right[index]}`);
+}
+
+function bodyRowsForTodo(
+  tasks: ReturnType<TaskState["list"]>,
+  theme: Theme,
+  width: number,
+  inProgressFrame: number,
+): number {
+  return Math.max(1, renderTodoPanel(tasks, theme, width, inProgressFrame, COMBINED_BODY_ROWS).length - 1);
+}
+
+function bodyRowsForSubagents(statusWidget: StatusWidget): number {
+  return Math.max(1, Math.min(COMBINED_BODY_ROWS, Math.floor(statusWidget.getBodyRowCount())));
+}
+
+function distributeBodyRows(todoNeed: number, subagentsNeed: number): { todo: number; subagents: number } {
+  let todo = Math.min(todoNeed, Math.floor(COMBINED_BODY_ROWS / 2));
+  let subagents = Math.min(subagentsNeed, Math.floor(COMBINED_BODY_ROWS / 2));
+  let remaining = COMBINED_BODY_ROWS - todo - subagents;
+
+  const todoUnused = Math.max(0, todoNeed - todo);
+  const todoExtra = Math.min(remaining, todoUnused);
+  todo += todoExtra;
+  remaining -= todoExtra;
+
+  const subagentsUnused = Math.max(0, subagentsNeed - subagents);
+  subagents += Math.min(remaining, subagentsUnused);
+  return { todo: Math.max(1, todo), subagents: Math.max(1, subagents) };
+}
+
+function renderStacked(
+  tasks: ReturnType<TaskState["list"]>,
+  theme: Theme,
+  width: number,
+  inProgressFrame: number,
+  statusWidget: StatusWidget,
+  subagentsNeed: number,
+): string[] {
+  const todoNeed = bodyRowsForTodo(tasks, theme, width, inProgressFrame);
+  const rows = distributeBodyRows(todoNeed, subagentsNeed);
+  return [
+    ...renderTodoPanel(tasks, theme, width, inProgressFrame, rows.todo),
+    "",
+    ...renderStatusPanel(statusWidget, width, rows.subagents, theme),
+  ];
+}
+
+function renderCombinedWidget(
+  tasks: ReturnType<TaskState["list"]>,
+  theme: Theme,
+  width: number,
+  inProgressFrame: number,
+  tui: { requestRender(): void },
+  owner: object,
+  generation: number,
+  composeSubagents: boolean,
+): string[] {
+  if (!Number.isFinite(width) || width <= 0 || tasks.length === 0) {
+    releaseActiveClaim(owner, generation);
+    return [];
+  }
+
+  const fittedWidth = normalizeWidth(width);
+  const renderTodoFallback = (): string[] => {
+    releaseActiveClaim(owner, generation);
+    return renderTodoPanel(tasks, theme, fittedWidth, inProgressFrame);
+  };
+  if (!composeSubagents) return renderTodoFallback();
+
+  const statusWidget = getStatusWidget();
+  if (statusWidget === undefined) return renderTodoFallback();
+
+  try {
+    if (!statusWidget.hasContent()) return renderTodoFallback();
+    if (!claimStatusWidget(statusWidget, owner, generation, tui)) return renderTodoFallback();
+
+    const subagentsNeed = bodyRowsForSubagents(statusWidget);
+    return fittedWidth > COMBINED_WIDGET_BREAKPOINT
+      ? renderSideBySide(tasks, theme, fittedWidth, inProgressFrame, statusWidget)
+      : renderStacked(tasks, theme, fittedWidth, inProgressFrame, statusWidget, subagentsNeed);
+  } catch (error) {
+    if (!(error instanceof OptionalIntegrationError)) {
+      releaseActiveClaim(owner, generation);
+      throw error;
+    }
+    return renderTodoFallback();
+  }
+}
 
 export function clearTaskWidget(ctx: ExtensionContext): void {
+  if (!isCurrentRuntime()) return;
+  nextWidgetGeneration();
+  releaseActiveClaim();
   ctx.ui.setWidget(WIDGET_ID, undefined);
 }
 
@@ -13,28 +400,68 @@ export function updateTaskWidget(
   state: TaskState,
   ctx: ExtensionContext,
   visible: boolean,
-  refreshMs = TIMER_REFRESH_MS,
+  refreshMs = TODO_ANIMATION_INTERVAL_MS,
 ): void {
+  if (!isCurrentRuntime()) return;
   const tasks = state.list();
   if (!visible || tasks.length === 0) {
     clearTaskWidget(ctx);
     return;
   }
 
+  const generation = nextWidgetGeneration();
+  // Subagents owns a native widget outside this extension. Only compose it
+  // while Pi is rendering the terminal UI, never in RPC/print modes.
+  const composeSubagents = ctx.mode === "tui";
+
+  // Replacing a widget can happen before Pi calls its old dispose hook. Release
+  // the optional Subagents claim eagerly so it cannot hide a standalone widget.
+  releaseActiveClaim();
   const hasActiveTimer = tasks.some((task) => task.status === "in-progress" && task.startedAt !== undefined);
   ctx.ui.setWidget(WIDGET_ID, (tui, theme) => {
-    const timer = hasActiveTimer
-      ? setInterval(() => tui.requestRender(), Math.max(1, refreshMs))
-      : undefined;
+    let inProgressFrame = 0;
+    let disposed = false;
+    const owner = {};
+    const isActive = (): boolean =>
+      !disposed && isCurrentRuntime() && currentWidgetGeneration() === generation;
+    let timer: ReturnType<typeof setInterval> | undefined;
+    if (hasActiveTimer) {
+      timer = setInterval(() => {
+        if (!isActive()) {
+          clearInterval(timer);
+          return;
+        }
+        inProgressFrame += 1;
+        try {
+          tui.requestRender();
+        } catch {
+          disposed = true;
+          clearInterval(timer);
+          releaseActiveClaim(owner, generation);
+        }
+      }, Math.max(1, refreshMs));
+    }
     timer?.unref();
 
     return {
       render(width: number): string[] {
+        if (!isActive()) return [];
         const currentTasks = state.list();
-        return [renderProgressHeader(state.stats(), theme, width), ...renderWidgetTree(currentTasks, theme, width)];
+        return renderCombinedWidget(
+          currentTasks,
+          theme,
+          width,
+          inProgressFrame,
+          tui,
+          owner,
+          generation,
+          composeSubagents,
+        );
       },
       invalidate(): void {},
       dispose(): void {
+        disposed = true;
+        releaseActiveClaim(owner, generation);
         if (timer !== undefined) clearInterval(timer);
       },
     };

tests/auto-clear.test.ts

@@ -0,0 +1,107 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createCompletedTaskAutoClear, TODO_AUTO_CLEAR_DELAY_MS } from "../src/auto-clear.ts";
+import { TaskState } from "../src/state.ts";
+
+function clearState(state: TaskState, onClear: () => void): boolean {
+  state.set("replace", [], false);
+  onClear();
+  return true;
+}
+
+test("clears the task tree ten seconds after every task remains done", (context) => {
+  context.mock.timers.enable({ apis: ["setTimeout"] });
+  const state = new TaskState();
+  state.add([{ name: "Done", status: "done" }]);
+  let clearCount = 0;
+  const autoClear = createCompletedTaskAutoClear(state, () => clearState(state, () => {
+    clearCount += 1;
+  }));
+
+  autoClear.sync();
+  context.mock.timers.tick(TODO_AUTO_CLEAR_DELAY_MS - 1);
+  assert.equal(state.stats().total, 1);
+
+  context.mock.timers.tick(1);
+  assert.deepEqual(state.snapshot(), { tasks: [], nextId: 1 });
+  assert.equal(clearCount, 1);
+});
+
+test("cancels a pending clear when unfinished work appears", (context) => {
+  context.mock.timers.enable({ apis: ["setTimeout"] });
+  const state = new TaskState();
+  state.add([{ name: "Done", status: "done" }]);
+  let clearCount = 0;
+  const autoClear = createCompletedTaskAutoClear(state, () => clearState(state, () => {
+    clearCount += 1;
+  }));
+
+  autoClear.sync();
+  state.add([{ name: "New work" }]);
+  autoClear.sync();
+  context.mock.timers.tick(TODO_AUTO_CLEAR_DELAY_MS);
+
+  assert.equal(state.stats().total, 2);
+  assert.equal(clearCount, 0);
+});
+
+test("preserves the deadline for unrelated refreshes", (context) => {
+  context.mock.timers.enable({ apis: ["setTimeout"] });
+  const state = new TaskState();
+  state.add([{ name: "Done", status: "done" }]);
+  const autoClear = createCompletedTaskAutoClear(state, () => clearState(state, () => {}));
+
+  autoClear.sync();
+  context.mock.timers.tick(9_000);
+  state.update([{ id: 1, name: "Renamed" }]);
+  autoClear.sync();
+  context.mock.timers.tick(1_000);
+
+  assert.equal(state.stats().total, 0);
+});
+
+test("restarts the delay for changed or restored completed trees", (context) => {
+  context.mock.timers.enable({ apis: ["setTimeout"] });
+  const state = new TaskState();
+  state.add([{ name: "Done", status: "done" }]);
+  const autoClear = createCompletedTaskAutoClear(state, () => clearState(state, () => {}));
+
+  autoClear.sync();
+  context.mock.timers.tick(9_000);
+  state.add([{ name: "Also done", status: "done" }]);
+  autoClear.sync();
+  context.mock.timers.tick(1_000);
+  assert.equal(state.stats().total, 2);
+
+  context.mock.timers.tick(8_000);
+  autoClear.sync(true);
+  context.mock.timers.tick(2_000);
+  assert.equal(state.stats().total, 2);
+
+  context.mock.timers.tick(8_000);
+  assert.equal(state.stats().total, 0);
+});
+
+test("retries after a clear transaction fails and supports shutdown cancellation", (context) => {
+  context.mock.timers.enable({ apis: ["setTimeout"] });
+  const state = new TaskState();
+  state.add([{ name: "Done", status: "done" }]);
+  let attempts = 0;
+  const autoClear = createCompletedTaskAutoClear(state, () => {
+    attempts += 1;
+    if (attempts === 1) return false;
+    return clearState(state, () => {});
+  });
+
+  autoClear.sync();
+  context.mock.timers.tick(TODO_AUTO_CLEAR_DELAY_MS);
+  assert.equal(state.stats().total, 1);
+  context.mock.timers.tick(TODO_AUTO_CLEAR_DELAY_MS);
+  assert.equal(state.stats().total, 0);
+
+  state.add([{ name: "Done again", status: "done" }]);
+  autoClear.sync();
+  autoClear.cancel();
+  context.mock.timers.tick(TODO_AUTO_CLEAR_DELAY_MS);
+  assert.equal(state.stats().total, 1);
+});

tests/prompt.test.ts

@@ -10,6 +10,88 @@ import {
 } from "../src/prompt.ts";
 import { TaskState } from "../src/state.ts";
 
+test("registers the conflict-free /todo command", async () => {
+  type RegisteredCommand = {
+    description: string;
+    handler(args: string, ctx: unknown): Promise<void>;
+  };
+  const commands = new Map<string, RegisteredCommand>();
+  const pi = {
+    on() {},
+    registerTool() {},
+    registerCommand(name: string, command: RegisteredCommand) {
+      commands.set(name, command);
+    },
+  };
+
+  piTodoHerdr(pi as never);
+
+  assert.deepEqual([...commands.keys()], ["todo"]);
+  const todo = commands.get("todo");
+  assert.equal(todo?.description, "Show or hide the todo tree widget");
+
+  const notifications: string[] = [];
+  await todo?.handler("", {
+    ui: {
+      setWidget() {},
+      notify(message: string) {
+        notifications.push(message);
+      },
+    },
+  });
+  assert.deepEqual(notifications, ["No todos yet."]);
+});
+
+test("persists automatic clears before deletion, retries failures, and cancels on shutdown", async (context) => {
+  context.mock.timers.enable({ apis: ["setTimeout"] });
+  context.mock.method(console, "error", () => {});
+  const handlers = new Map<string, (event: any, ctx: any) => unknown>();
+  const tools = new Map<string, any>();
+  const entries: Array<{ customType: string; data: unknown }> = [];
+  let persistAttempts = 0;
+  const pi = {
+    on(name: string, handler: (event: any, ctx: any) => unknown) {
+      handlers.set(name, handler);
+    },
+    registerTool(tool: any) {
+      tools.set(tool.name, tool);
+    },
+    registerCommand() {},
+    appendEntry(customType: string, data: unknown) {
+      persistAttempts += 1;
+      if (persistAttempts === 1) throw new Error("disk unavailable");
+      entries.push({ customType, data });
+    },
+  };
+  const ctx = { ui: { setWidget() {} } };
+  piTodoHerdr(pi as never);
+
+  await tools.get("set_tasks").execute(
+    "set",
+    { mode: "append", tasks: [{ name: "Done", status: "done" }], force: false },
+    undefined,
+    undefined,
+    ctx,
+  );
+  context.mock.timers.tick(10_000);
+  assert.equal((await tools.get("list_task").execute()).content[0].text, "1 [done] Done");
+
+  context.mock.timers.tick(10_000);
+  assert.equal((await tools.get("list_task").execute()).content[0].text, "No tasks.");
+  assert.deepEqual(entries, [{ customType: "pi-todo-herdr-state", data: { tasks: [], nextId: 1 } }]);
+
+  await tools.get("set_tasks").execute(
+    "set",
+    { mode: "append", tasks: [{ name: "Done again", status: "done" }], force: false },
+    undefined,
+    undefined,
+    ctx,
+  );
+  await handlers.get("session_shutdown")?.({ reason: "reload" }, ctx);
+  context.mock.timers.tick(10_000);
+  assert.equal((await tools.get("list_task").execute()).content[0].text, "1 [done] Done again");
+});
+
 test("keeps task guidance short with planning after exploration", () => {
   assert.equal(TASK_PROMPT_GUIDELINES.length, 2);
   const prompt = TASK_PROMPT_GUIDELINES.join("\n");
@@ -18,7 +100,7 @@ test("keeps task guidance short with planning after exploration", () => {
   assert.match(prompt, /then call set_tasks before implementation/);
   assert.match(prompt, /otherwise skip tracking/);
   assert.match(prompt, /Start one task in-progress/);
-  assert.match(prompt, /update_task when tasks start, block, or finish/);
+  assert.match(prompt, /patch_tasks when tasks start, block, or finish/);
   assert.match(prompt, /keep statuses accurate before the final response/);
   assert.ok(prompt.split(/\s+/).length < 40);
 });
@@ -97,8 +179,8 @@ test("session_compact sends one hidden reminder only for unfinished tasks", asyn
     },
   ]);
 
-  await tools.get("update_task").execute(
-    "update",
+  await tools.get("patch_tasks").execute(
+    "patch",
     { tasks: [{ id: 1, status: "done" }] },
     undefined,
     undefined,

tests/state.test.ts

@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-import { TaskState } from "../src/state.ts";
+import { TASK_STATE_ENTRY_TYPE, TaskState } from "../src/state.ts";
 import { TaskValidationError } from "../src/types.ts";
 
 function names(state: TaskState): string[] {
@@ -172,6 +172,50 @@ test("restores timers and starts legacy in-progress snapshots at load time", ()
   assert.equal(legacy.snapshot().timings?.[0]?.activeStartedAt, now);
 });
 
+test("rejects unsafe restored identifiers and oversized timing collections", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "Keep" }]);
+  const before = state.snapshot();
+  const task = { id: 1, name: "Task", status: "pending" as const, parentId: null, childrenIds: [] };
+
+  assert.throws(
+    () => state.restore({ tasks: [{ ...task, id: Number.MAX_SAFE_INTEGER + 1 }], nextId: Number.MAX_SAFE_INTEGER }),
+    /id must be a positive safe integer/,
+  );
+  assert.throws(
+    () => state.restore({ tasks: [task], nextId: Number.MAX_SAFE_INTEGER + 1 }),
+    /nextId must be a positive safe integer/,
+  );
+  assert.throws(
+    () =>
+      state.restore({
+        tasks: [task],
+        nextId: 2,
+        timings: Array.from({ length: 201 }, () => ({ taskId: 1, startedAt: 0, accumulatedMs: 0 })),
+      }),
+    /timings are limited to 200 entries/,
+  );
+  assert.throws(
+    () =>
+      state.restore({
+        tasks: [task],
+        nextId: 2,
+        timings: [{ taskId: 1, startedAt: 0, stoppedAt: 0, accumulatedMs: Number.MAX_SAFE_INTEGER }],
+      }),
+    /accumulatedMs must be an integer between/,
+  );
+  assert.deepEqual(state.snapshot(), before);
+});
+
+test("rejects additions when no safe generated task ID remains", () => {
+  const state = new TaskState(() => 0);
+  state.restore({ tasks: [], nextId: Number.MAX_SAFE_INTEGER });
+  const before = state.snapshot();
+
+  assert.throws(() => state.add([{ name: "Unsafe ID" }]), /no safe task IDs remain/);
+  assert.deepEqual(state.snapshot(), before);
+});
+
 test("rejects out-of-range persisted timestamps without replacing state", () => {
   const state = new TaskState(() => 0);
   state.add([{ name: "Keep" }]);
@@ -309,7 +353,7 @@ test("loads the latest valid mutation snapshot from a session branch", () => {
     type: "message",
     message: {
       role: "toolResult",
-      toolName: index === 0 ? "add_task" : "update_task",
+      toolName: index === 0 ? "add_task" : "patch_tasks",
       details: { action: "add", snapshot, affected: [] },
     },
   }));
@@ -318,6 +362,136 @@ test("loads the latest valid mutation snapshot from a session branch", () => {
   assert.deepEqual(state.list().map((task) => task.name), ["First", "Second"]);
 });
 
+test("loads legacy update_task mutation snapshots", () => {
+  const completed = new TaskState();
+  completed.add([{ name: "Legacy completed task", status: "done" }]);
+  const branch = [
+    {
+      type: "message",
+      message: {
+        role: "toolResult",
+        toolName: "update_task",
+        details: { action: "update", snapshot: completed.snapshot(), affected: [] },
+      },
+    },
+  ];
+
+  const state = new TaskState();
+  state.loadFromSession({ sessionManager: { getBranch: () => branch } } as never);
+  assert.deepEqual(state.list().map((task) => task.name), ["Legacy completed task"]);
+});
+
+test("loads a persisted automatic clear after task tool snapshots", () => {
+  const completed = new TaskState();
+  completed.add([{ name: "Completed", status: "done" }]);
+  const branch = [
+    {
+      type: "message",
+      message: {
+        role: "toolResult",
+        toolName: "update_task",
+        details: { action: "update", snapshot: completed.snapshot(), affected: [] },
+      },
+    },
+    {
+      type: "custom",
+      customType: TASK_STATE_ENTRY_TYPE,
+      data: { tasks: [], nextId: 1 },
+    },
+  ];
+
+  const state = new TaskState();
+  state.loadFromSession({ sessionManager: { getBranch: () => branch } } as never);
+  assert.deepEqual(state.snapshot(), { tasks: [], nextId: 1 });
+});
+
+test("rejects terminal controls and bidirectional overrides without changing state", () => {
+  const state = new TaskState();
+  state.add([{ name: "Safe", description: "Line one\nLine two" }]);
+  const before = state.snapshot();
+
+  for (const name of ["Escape\u001b[2J", "Tab\tname", "Arabic mark\u061cname", "Override\u202eevil"]) {
+    assert.throws(() => state.add([{ name }]), /unsafe control/);
+    assert.deepEqual(state.snapshot(), before);
+  }
+
+  assert.throws(() => state.update([{ id: 1, description: "Clipboard\u009d52;c;payload" }]), /unsafe control/);
+  assert.deepEqual(state.snapshot(), before);
+});
+
+test("enforces task name and description length limits by Unicode character", () => {
+  const state = new TaskState();
+  state.add([{ name: "😀".repeat(200), description: "d".repeat(4_000) }]);
+  const before = state.snapshot();
+
+  assert.throws(() => state.add([{ name: "n".repeat(201) }]), /name must be at most 200 characters/);
+  assert.throws(() => state.update([{ id: 1, description: "d".repeat(4_001) }]), /description must be at most 4000 characters/);
+  assert.deepEqual(state.snapshot(), before);
+});
+
+test("enforces per-mutation and per-session task limits atomically", () => {
+  const state = new TaskState();
+  const batch = Array.from({ length: 50 }, (_, index) => ({ name: `Task ${index + 1}` }));
+
+  assert.throws(() => state.add([...batch, { name: "Too many" }]), /at most 50 tasks/);
+  assert.equal(state.list().length, 0);
+
+  for (let index = 0; index < 4; index += 1) state.add(batch);
+  assert.equal(state.list().length, 200);
+  const before = state.snapshot();
+  assert.throws(() => state.add([{ name: "Session overflow" }]), /session is limited to 200 tasks/);
+  assert.deepEqual(state.snapshot(), before);
+
+  assert.throws(
+    () =>
+      new TaskState().restore({
+        tasks: Array.from({ length: 201 }, (_, index) => ({
+          id: index + 1,
+          name: `Restored ${index + 1}`,
+          status: "pending" as const,
+          parentId: null,
+          childrenIds: [],
+        })),
+        nextId: 202,
+      }),
+    /session is limited to 200 tasks/,
+  );
+});
+
+test("allows three stored levels beneath the virtual root and rejects deeper task trees atomically", () => {
+  const nested = (depth: number) => {
+    let task: { name: string; children?: Array<{ name: string; children?: unknown[] }> } = { name: `Level ${depth}` };
+    for (let level = depth - 1; level >= 1; level -= 1) {
+      task = { name: `Level ${level}`, children: [task] };
+    }
+    return task;
+  };
+
+  const state = new TaskState();
+  state.add([nested(3) as never, { name: "Other category" }]);
+  assert.equal(state.list().length, 4);
+  const before = state.snapshot();
+  assert.throws(() => state.add([nested(4) as never]), /depth must not exceed 3 levels/);
+  assert.deepEqual(state.snapshot(), before);
+  assert.throws(() => state.update([{ id: 4, parentId: 3 }]), /depth must not exceed 3 levels/);
+  assert.deepEqual(state.snapshot(), before);
+
+  assert.throws(
+    () =>
+      state.restore({
+        tasks: [
+          { id: 1, name: "Category", status: "pending", parentId: null, childrenIds: [2] },
+          { id: 2, name: "Item", status: "pending", parentId: 1, childrenIds: [3] },
+          { id: 3, name: "Leaf", status: "pending", parentId: 2, childrenIds: [4] },
+          { id: 4, name: "Too deep", status: "pending", parentId: 3, childrenIds: [] },
+        ],
+        nextId: 5,
+      }),
+    /depth must not exceed 3 levels/,
+  );
+  assert.deepEqual(state.snapshot(), before);
+});
+
 test("supports nullable descriptions and reports invalid children as validation errors", () => {
   const state = new TaskState();
   assert.throws(() => state.add([{ name: "Bad\nname", description: "Valid" }]), /single line/);

tests/tools.test.ts

@@ -7,15 +7,17 @@ import { registerTaskTools } from "../src/tools.ts";
 function registeredTools(state = new TaskState()) {
   const tools = new Map<string, any>();
   let changes = 0;
+  const autoClearRestarts: boolean[] = [];
   const pi = {
     registerTool(tool: any) {
       tools.set(tool.name, tool);
     },
   };
-  registerTaskTools(pi as never, state, () => {
+  registerTaskTools(pi as never, state, (_ctx, restartAutoClear = false) => {
     changes += 1;
+    autoClearRestarts.push(restartAutoClear);
   });
-  return { tools, state, changes: () => changes };
+  return { tools, state, changes: () => changes, autoClearRestarts };
 }
 
 async function execute(tool: any, params: unknown) {
@@ -26,12 +28,13 @@ async function execute(tool: any, params: unknown) {
 
 test("registers five focused tools without the old add_task alias", () => {
   const { tools } = registeredTools();
-  assert.deepEqual([...tools.keys()], ["set_tasks", "update_task", "rm_task", "list_task", "get_task"]);
+  assert.deepEqual([...tools.keys()], ["set_tasks", "patch_tasks", "rm_task", "list_task", "get_task"]);
   assert.deepEqual(Object.keys(tools.get("set_tasks").parameters.properties), ["mode", "tasks", "force"]);
-  assert.deepEqual(Object.keys(tools.get("update_task").parameters.properties), ["tasks"]);
+  assert.deepEqual(Object.keys(tools.get("patch_tasks").parameters.properties), ["tasks"]);
   assert.deepEqual(Object.keys(tools.get("rm_task").parameters.properties), ["ids", "reason"]);
   assert.deepEqual(Object.keys(tools.get("list_task").parameters.properties), []);
   assert.deepEqual(Object.keys(tools.get("get_task").parameters.properties), ["ids"]);
+  assert.match(tools.get("patch_tasks").description, /do not recreate cleared completed tasks/);
 });
 
 test("set_tasks schema hoists $defs to the root with #/$defs/ refs", () => {
@@ -51,10 +54,76 @@ test("set_tasks schema hoists $defs to the root with #/$defs/ refs", () => {
   assert.ok(!/"\$ref":"(?!\#)/.test(serialized), "no bare $ref values remain");
 });
 
+test("task schemas publish text and batch limits", () => {
+  const { tools } = registeredTools();
+  const setParams = tools.get("set_tasks").parameters;
+  const addTask = setParams.$defs.AddTask;
+  const updateTask = tools.get("patch_tasks").parameters.properties.tasks.items;
+
+  assert.equal(setParams.properties.tasks.maxItems, 50);
+  assert.equal(addTask.properties.children.maxItems, 50);
+  assert.equal(addTask.properties.name.maxLength, 200);
+  assert.match(addTask.properties.name.pattern, /061C/i);
+  assert.equal(addTask.properties.description.anyOf[0].maxLength, 4_000);
+  assert.match(addTask.properties.description.anyOf[0].pattern, /061C/i);
+  assert.equal(tools.get("patch_tasks").parameters.properties.tasks.maxItems, 50);
+  assert.equal(updateTask.properties.name.anyOf[0].maxLength, 200);
+  assert.equal(updateTask.properties.description.anyOf[0].maxLength, 4_000);
+  assert.equal(tools.get("rm_task").parameters.properties.ids.maxItems, 50);
+  assert.equal(tools.get("get_task").parameters.properties.ids.maxItems, 50);
+
+  const setTool = tools.get("set_tasks");
+  const validUnicode = setTool.prepareArguments({
+    mode: "append",
+    tasks: [{ name: "😀".repeat(200), description: "line one\nline two" }],
+  });
+  assert.doesNotThrow(() =>
+    validateToolArguments(setTool, { name: setTool.name, arguments: validUnicode } as never),
+  );
+  const unsafeText = setTool.prepareArguments({ mode: "append", tasks: [{ name: "unsafe\u061cname" }] });
+  assert.throws(
+    () => validateToolArguments(setTool, { name: setTool.name, arguments: unsafeText } as never),
+    /validation failed/i,
+  );
+});
+
+test("set_tasks preparation bounds hostile recursive input before validation", () => {
+  const { tools } = registeredTools();
+  const setTool = tools.get("set_tasks");
+  let nested: Record<string, unknown> = { name: "Leaf" };
+  for (let depth = 0; depth < 10_000; depth += 1) nested = { name: `Level ${depth}`, children: [nested] };
+
+  const prepared = setTool.prepareArguments({ mode: "append", tasks: [nested] });
+  assert.throws(
+    () => validateToolArguments(setTool, { name: setTool.name, arguments: prepared } as never),
+    /validation failed/i,
+  );
+
+  const oversized = setTool.prepareArguments({
+    mode: "append",
+    tasks: Array.from({ length: 1_000 }, (_, index) => ({ name: `Task ${index}` })),
+  });
+  assert.equal(oversized.tasks.length, 51);
+  assert.throws(
+    () => validateToolArguments(setTool, { name: setTool.name, arguments: oversized } as never),
+    /validation failed/i,
+  );
+
+  const updateTool = tools.get("patch_tasks");
+  const oversizedUpdate = updateTool.prepareArguments({
+    tasks: Array.from({ length: 1_000 }, (_, index) => ({ id: index + 1 })),
+  });
+  assert.equal(oversizedUpdate.tasks.length, 51);
+  assert.throws(
+    () => validateToolArguments(updateTool, { name: updateTool.name, arguments: oversizedUpdate } as never),
+    /validation failed/i,
+  );
+});
+
 test("strict task schemas normalize legacy optional arguments", () => {
   const { tools } = registeredTools();
   const setTool = tools.get("set_tasks");
-  const updateTool = tools.get("update_task");
+  const updateTool = tools.get("patch_tasks");
 
   assert.deepEqual(updateTool.parameters.properties.tasks.items.required, [
     "id",
@@ -103,7 +172,7 @@ test("strict task schemas normalize legacy optional arguments", () => {
   assert.equal(updateTool.prepareArguments({ tasks: [{ id: 1, parentId: null }] }).tasks[0].parentId, 0);
 
   const validated = validateToolArguments(updateTool, {
-    name: "update_task",
+    name: "patch_tasks",
     arguments: updateTool.prepareArguments({ tasks: [{ id: 1, status: "done" }] }),
   } as never);
   assert.equal(validated.tasks[0].parentId, -1);
@@ -120,16 +189,27 @@ test("validated update sentinels preserve order and map legacy null parent to ro
     ],
   });
 
-  await execute(harness.tools.get("update_task"), { tasks: [{ id: 3, status: "blocked" }] });
+  await execute(harness.tools.get("patch_tasks"), { tasks: [{ id: 3, status: "blocked" }] });
   assert.deepEqual(
     harness.state.list().filter((task) => task.parentId === null).map((task) => task.id),
     [1, 3],
   );
 
-  await execute(harness.tools.get("update_task"), { tasks: [{ id: 2, parentId: null }] });
+  await execute(harness.tools.get("patch_tasks"), { tasks: [{ id: 2, parentId: null }] });
   assert.equal(harness.state.get([2])[0]?.parentId, null);
 });
 
+test("patch_tasks explains an auto-cleared empty tree without recreating tasks", async () => {
+  const harness = registeredTools();
+
+  await assert.rejects(
+    execute(harness.tools.get("patch_tasks"), { tasks: [{ id: 1, status: "done" }] }),
+    /Patch failed · 1 validation error\n- task tree is empty and may have auto-cleared after completion; do not recreate completed tasks\. Use set_tasks only for genuinely new or remaining work/,
+  );
+  assert.deepEqual(harness.state.list(), []);
+  assert.equal(harness.changes(), 0);
+});
+
 test("set_tasks appends optional-description tasks and persists a complete snapshot", async () => {
   const harness = registeredTools();
   const result = await execute(harness.tools.get("set_tasks"), {
@@ -143,6 +223,7 @@ test("set_tasks appends optional-description tasks and persists a complete snaps
   assert.equal(result.details.snapshot.tasks[0].description, undefined);
   assert.equal(result.details.snapshot.nextId, 3);
   assert.equal(harness.changes(), 1);
+  assert.deepEqual(harness.autoClearRestarts, [false]);
 });
 
 test("set_tasks atomically replaces or clears the tree and resets IDs", async () => {
@@ -166,6 +247,7 @@ test("set_tasks atomically replaces or clears the tree and resets IDs", async ()
   });
   assert.equal(cleared.content[0].text, "Cleared task tree. Task IDs reset to 1.");
   assert.deepEqual(harness.state.snapshot(), { tasks: [], nextId: 1 });
+  assert.deepEqual(harness.autoClearRestarts, [false, true, true]);
 });
 
 test("tool validation errors preserve atomic state", async () => {
@@ -177,8 +259,8 @@ test("tool validation errors preserve atomic state", async () => {
   const before = harness.state.snapshot();
 
   await assert.rejects(
-    execute(harness.tools.get("update_task"), { tasks: [{ id: 1, parentId: 2 }] }),
-    /Update failed · 1 validation error\n- task [12]: parentId creates a cycle/,
+    execute(harness.tools.get("patch_tasks"), { tasks: [{ id: 1, parentId: 2 }] }),
+    /Patch failed · 1 validation error\n- task [12]: parentId creates a cycle/,
   );
   assert.deepEqual(harness.state.snapshot(), before);
   assert.equal(harness.changes(), 1);
@@ -240,7 +322,7 @@ test("get_task exposes cumulative timing while list output stays compact", async
   });
 
   now += 568;
-  const updated = await execute(harness.tools.get("update_task"), {
+  const updated = await execute(harness.tools.get("patch_tasks"), {
     tasks: [{ id: 1, status: "blocked" }],
   });
   assert.equal(updated.content[0].text, "Updated 1 task: 1. 0/1 done.");

tests/ui.test.ts

@@ -8,11 +8,12 @@ import {
   renderProgressHeader,
   renderTaskLine,
   renderToolResult,
+  renderTodoPanel,
   renderTree,
   renderWidgetTree,
   snapshotStats,
 } from "../src/ui.ts";
-import { updateTaskWidget } from "../src/widget.ts";
+import { clearTaskWidget, TODO_ANIMATION_INTERVAL_MS, updateTaskWidget } from "../src/widget.ts";
 
 const plainTheme = {
   fg: (_color: string, text: string) => text,
@@ -20,6 +21,30 @@ const plainTheme = {
   strikethrough: (text: string) => `~${text}~`,
 };
 
+type TestTui = { requestRender(): void };
+type TestWidget = { render(width: number): string[]; dispose(): void };
+
+function mountWidget(widget: unknown, tui: TestTui = { requestRender() {} }, theme: unknown = plainTheme): TestWidget {
+  return (widget as (tui: TestTui, theme: unknown) => TestWidget)(tui, theme);
+}
+
+function setSubagentsIntegration(integration: unknown): void {
+  const globals = globalThis as typeof globalThis & { __pi_interactive_subagents?: unknown };
+  if (integration === undefined) delete globals.__pi_interactive_subagents;
+  else globals.__pi_interactive_subagents = integration;
+}
+
+function withSubagentsIntegration<T>(integration: unknown, callback: () => T): T {
+  const globals = globalThis as typeof globalThis & { __pi_interactive_subagents?: unknown };
+  const previous = globals.__pi_interactive_subagents;
+  setSubagentsIntegration(integration);
+  try {
+    return callback();
+  } finally {
+    setSubagentsIntegration(previous);
+  }
+}
+
 function stripAnsi(text: string): string {
   return text.replace(/\x1b\[[0-9;]*m/g, "");
 }
@@ -49,7 +74,7 @@ function fixture(): TaskState {
 test("renders an adaptive progress bar and stays within width", () => {
   const stats = fixture().stats();
   const wide = stripAnsi(renderProgressHeader(stats, plainTheme as never, 40));
-  assert.match(wide, /^ Tasks 1\/5 · !1  ━{4}─{16}$/);
+  assert.match(wide, /^ Todos 1\/5 · !1  ━{4}─{16}$/);
   assert.ok(visibleWidth(wide) <= 40);
 
   const narrow = renderProgressHeader(stats, plainTheme as never, 12);
@@ -62,7 +87,7 @@ test("renders lightweight connectors without a detached root continuation", () =
   assert.deepEqual(output, [
     "  ◉ 1. Build auth · 00:00",
     "  ├─ ! 2. Resolve token issue",
-    "  │  └─ ○ 3. Inspect provider response",
+    "  │  └─    ○ 3. Inspect provider response",
     "  └─ ○ 4. Add middleware",
     "  ✓ 5. ~Define schema~",
   ]);
@@ -92,11 +117,11 @@ test("collapses completed widget subtrees while keeping list trees expanded", ()
 
   const widgetLines = renderWidgetTree(state.list(), plainTheme as never, 80).map(stripAnsi);
   assert.deepEqual(widgetLines, [
-    "  ○ 1. Release",
-    "  ├─ ○ 2. Completed branch · 2/2 done",
-    "  └─ ○ 5. Open branch",
-    "     └─ ○ 6. Open leaf",
-    "  ○ 7. Pending parent · 1/1 done",
+    "  ├─ I. ○ Release",
+    "  │  ├─ 1. ○ Completed branch · 2/2 done",
+    "  │  └─ 2. ○ Open branch",
+    "  │     └─    ○ Open leaf",
+    "  └─ II. ○ Pending parent · 1/1 done",
   ]);
 
   const fullTree = renderTree(state.list(), plainTheme as never, 80).map(stripAnsi);
@@ -109,6 +134,148 @@ test("collapses completed widget subtrees while keeping list trees expanded", ()
   assert.ok(reopened.some((line) => line.includes("Done two")));
 });
 
+test("uses only the outline levels needed while leaving leaf tasks unlabeled", () => {
+  const flatState = new TaskState(() => 0);
+  flatState.add([{ name: "First leaf" }, { name: "Second leaf" }]);
+  assert.deepEqual(renderWidgetTree(flatState.list(), plainTheme as never, 80).map(stripAnsi), [
+    "  ├─ ○ First leaf",
+    "  └─ ○ Second leaf",
+  ]);
+
+  const twoLevelState = new TaskState(() => 0);
+  twoLevelState.add([
+    { name: "First group", children: [{ name: "First nested leaf" }] },
+    { name: "Second group", children: [{ name: "Second nested leaf" }] },
+  ]);
+  assert.deepEqual(renderWidgetTree(twoLevelState.list(), plainTheme as never, 80).map(stripAnsi), [
+    "  ├─ 1. ○ First group",
+    "  │  └─    ○ First nested leaf",
+    "  └─ 2. ○ Second group",
+    "     └─    ○ Second nested leaf",
+  ]);
+
+  const state = new TaskState(() => 0);
+  state.add([
+    { name: "Category one" },
+    { name: "Category two" },
+    { name: "Category three" },
+    {
+      name: "Category four",
+      children: [
+        { name: "First item", children: [{ name: "Leaf sub-item" }] },
+        { name: "Second item" },
+      ],
+    },
+    { name: "Category five", children: [{ name: "Reset item numbering" }] },
+  ]);
+
+  const lines = renderWidgetTree(state.list(), plainTheme as never, 80).map(stripAnsi);
+  assert.deepEqual(lines, [
+    "  ├─ I. ○ Category one",
+    "  ├─ II. ○ Category two",
+    "  ├─ III. ○ Category three",
+    "  ├─ IV. ○ Category four",
+    "  │  ├─ 1. ○ First item",
+    "  │  │  └─    ○ Leaf sub-item",
+    "  │  └─ 2. ○ Second item",
+    "  └─ V. ○ Category five",
+    "     └─ 1. ○ Reset item numbering",
+  ]);
+
+  const narrow = renderWidgetTree(state.list(), plainTheme as never, 18);
+  assert.ok(narrow.every((line) => visibleWidth(line) <= 18));
+
+  const statusPriority = renderWidgetTree(state.list(), plainTheme as never, 6).map(stripAnsi);
+  assert.match(statusPriority[3] ?? "", /○/);
+  const childStatusPriority = renderWidgetTree(state.list(), plainTheme as never, 10).map(stripAnsi);
+  assert.match(childStatusPriority[4] ?? "", /○/);
+  const leafStatusPriority = renderWidgetTree(state.list(), plainTheme as never, 12).map(stripAnsi);
+  assert.match(leafStatusPriority[5] ?? "", /○/);
+  const listLeafStatusPriority = renderTree(state.list(), plainTheme as never, 12).map(stripAnsi);
+  assert.match(listLeafStatusPriority[5] ?? "", /○/);
+
+  const timedState = new TaskState(() => 0);
+  timedState.add([
+    { name: "Timed category", status: "in-progress", children: [{ name: "Timed item", status: "in-progress" }] },
+  ]);
+  const timedRoot = stripAnsi(renderWidgetTree(timedState.list(), plainTheme as never, 15)[0] ?? "");
+  const timedChild = stripAnsi(renderWidgetTree(timedState.list(), plainTheme as never, 18)[1] ?? "");
+  assert.match(timedRoot, /◉/);
+  assert.match(timedChild, /◉/);
+});
+
+test("animates only in-progress widget circles while preserving narrow-width status markers", () => {
+  const state = new TaskState(() => 0);
+  state.add([
+    { name: "Active", status: "in-progress" },
+    { name: "Pending" },
+    { name: "Blocked", status: "blocked" },
+    { name: "Done", status: "done" },
+  ]);
+
+  const orbitFrames = ["◐", "◓", "◑", "◒"];
+  for (const [frame, icon] of orbitFrames.entries()) {
+    const lines = renderWidgetTree(state.list(), plainTheme as never, 80, "  ", frame).map(stripAnsi);
+    assert.match(lines[0] ?? "", new RegExp(icon));
+    assert.match(lines[1] ?? "", /○/);
+    assert.match(lines[2] ?? "", /!/);
+    assert.match(lines[3] ?? "", /✓/);
+
+    const narrow = renderWidgetTree(state.list(), plainTheme as never, 6, "  ", frame).map(stripAnsi);
+    assert.match(narrow[0] ?? "", new RegExp(icon));
+    assert.ok(narrow.every((line) => visibleWidth(line) <= 6));
+  }
+
+  assert.match(stripAnsi(renderTree(state.list(), plainTheme as never, 80)[0] ?? ""), /◉/);
+});
+
+test("renumbers widget labels after task reordering and reparenting", () => {
+  const state = new TaskState(() => 0);
+  state.add([
+    { name: "Category A", children: [{ name: "A1" }, { name: "A2" }] },
+    { name: "Category B", children: [{ name: "B1" }] },
+  ]);
+  state.update([
+    { id: 4, position: 0 },
+    { id: 3, parentId: 4, position: 0 },
+  ]);
+
+  const lines = renderWidgetTree(state.list(), plainTheme as never, 80).map(stripAnsi);
+  assert.deepEqual(lines, [
+    "  ├─ 1. ○ Category B",
+    "  │  ├─    ○ A2",
+    "  │  └─    ○ B1",
+    "  └─ 2. ○ Category A",
+    "     └─    ○ A1",
+  ]);
+});
+
+test("caps the widget at twelve task rows with an honest overflow summary", () => {
+  const state = new TaskState(() => 0);
+  state.add(Array.from({ length: 20 }, (_, index) => ({ name: `Task ${index + 1}` })));
+
+  const lines = renderWidgetTree(state.list(), plainTheme as never, 60).map(stripAnsi);
+  assert.equal(lines.length, 13);
+  assert.match(lines[0] ?? "", /Task 1/);
+  assert.match(lines[11] ?? "", /Task 12/);
+  assert.equal(lines[12], "  … 8 more tasks");
+  assert.ok(lines.every((line) => visibleWidth(line) <= 60));
+
+  const collapsedOverflow = new TaskState(() => 0);
+  collapsedOverflow.add([
+    ...Array.from({ length: 12 }, (_, index) => ({ name: `Visible ${index + 1}` })),
+    {
+      name: "Hidden completed branch",
+      children: [
+        { name: "Hidden done one", status: "done" as const },
+        { name: "Hidden done two", status: "done" as const },
+      ],
+    },
+  ]);
+  const overflowLines = renderWidgetTree(collapsedOverflow.list(), plainTheme as never, 60).map(stripAnsi);
+  assert.equal(overflowLines[12], "  … 3 more tasks");
+});
+
 test("hides a completed widget summary before squeezing the task name", () => {
   const state = new TaskState(() => 0);
   state.add([{ name: "A long parent task name", children: [{ name: "Done", status: "done" }] }]);
@@ -225,15 +392,437 @@ test("hides an empty widget and renders a populated one", () => {
   state.add([{ name: "Task", description: "Task" }]);
   updateTaskWidget(state, ctx as never, true);
   assert.equal(typeof widget, "function");
-  const component = (widget as unknown as (tui: unknown, theme: unknown) => { render(width: number): string[] })(
-    {},
-    plainTheme,
-  );
-  const lines = component.render(30);
+  const component = mountWidget(widget);
+  const lines = component.render(30).map(stripAnsi);
   assert.equal(lines.length, 2);
+  assert.match(lines[0] ?? "", /^Todos.*0\/1/);
+  assert.doesNotMatch(lines.join("\n"), /[╭╮╰╯]/);
   assert.ok(lines.every((line) => visibleWidth(line) <= 30));
 });
 
+test("renders compact unboxed solo panels at narrow widths without overflowing", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "A long task name", status: "blocked" }]);
+
+  for (const width of [80, 60]) {
+    const lines = renderTodoPanel(state.list(), plainTheme as never, width).map(stripAnsi);
+    assert.ok(lines.every((line) => visibleWidth(line) <= width));
+    assert.match(lines[0] ?? "", /^Todos.*0\/1.*!1/);
+    assert.match(lines[0] ?? "", /━|─/);
+    assert.doesNotMatch(lines.join("\n"), /[╭╮╰╯]/);
+  }
+
+  const narrow = renderTodoPanel(state.list(), plainTheme as never, 20).map(stripAnsi);
+  assert.ok(narrow.every((line) => visibleWidth(line) <= 20));
+  assert.doesNotMatch(narrow.join("\n"), /[╭╮╰╯]/);
+  assert.match(narrow[0] ?? "", /0\/1/);
+
+  const boundary = new TaskState(() => 0);
+  boundary.add(Array.from({ length: 13 }, (_, index) => ({ name: `Boundary ${index + 1}` })));
+  const boundaryLines = renderTodoPanel(boundary.list(), plainTheme as never, 80).map(stripAnsi);
+  assert.equal(boundaryLines.length, 14);
+  assert.match(boundaryLines[12] ?? "", /Boundary 12/);
+  assert.match(boundaryLines[13] ?? "", /… 1 more task/);
+  assert.ok(boundaryLines.every((line) => !line.includes("Boundary 13")));
+});
+
+test("passes the current Pi theme unchanged to composed Subagents rendering", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "Todo" }]);
+  const theme = {
+    fg: (_color: string, text: string) => text,
+    bold: (text: string) => text,
+    strikethrough: (text: string) => text,
+  };
+  let receivedTheme: unknown;
+  const statusWidget = {
+    hasContent: () => true,
+    getBodyRowCount: () => 1,
+    isClaimed: () => true,
+    render: (_width: number, _maxBodyRows?: number, providerTheme?: unknown) => {
+      receivedTheme = providerTheme;
+      return ["subagents"];
+    },
+    claim: () => () => {},
+  };
+  withSubagentsIntegration({ statusWidget }, () => {
+    let widget: unknown;
+    const ctx = {
+      mode: "tui" as const,
+      ui: { setWidget: (_id: string, content: unknown) => (widget = content) },
+    };
+    updateTaskWidget(state, ctx as never, true);
+    const component = mountWidget(widget, { requestRender() {} }, theme);
+    component.render(80);
+    assert.equal(receivedTheme, theme);
+    component.dispose();
+  });
+});
+
+test("keeps an unboxed Subagents header plus capped body rows composed at 120 columns", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "Todo" }]);
+  let receivedMaxBodyRows: number | undefined;
+  const statusWidget = {
+    hasContent: () => true,
+    getBodyRowCount: () => 2,
+    isClaimed: () => true,
+    render: (_width: number, maxBodyRows?: number) => {
+      receivedMaxBodyRows = maxBodyRows;
+      return ["Subagents", "agent one", "agent two"];
+    },
+    claim: () => () => {},
+  };
+  withSubagentsIntegration({ statusWidget }, () => {
+    let widget: unknown;
+    const ctx = {
+      mode: "tui" as const,
+      ui: { setWidget: (_id: string, content: unknown) => (widget = content) },
+    };
+    updateTaskWidget(state, ctx as never, true);
+    const component = mountWidget(widget);
+    const lines = component.render(120).map(stripAnsi);
+    assert.equal(receivedMaxBodyRows, 2);
+    assert.ok(lines.some((line) => line.includes("Subagents")));
+    assert.ok(lines.some((line) => line.includes("agent two")));
+    assert.equal(lines[2], "");
+    assert.ok(lines.every((line) => visibleWidth(line) <= 120));
+    assert.doesNotMatch(lines.join("\n"), /[╭╮╰╯]/);
+    component.dispose();
+  });
+});
+
+test("switches from side-by-side to stacked panels at the 120-column breakpoint", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "Todo" }]);
+  let claimCount = 0;
+  let releaseCount = 0;
+  const renderCalls: Array<[number, number | undefined]> = [];
+  const statusWidget = {
+    hasContent: () => true,
+    getBodyRowCount: () => 2,
+    isClaimed: () => true,
+    render: (width: number, maxBodyRows?: number) => {
+      renderCalls.push([width, maxBodyRows]);
+      return ["Subagents"];
+    },
+    claim: (_onChange: () => void) => {
+      claimCount += 1;
+      return () => {
+        releaseCount += 1;
+      };
+    },
+  };
+  withSubagentsIntegration({ statusWidget }, () => {
+    let widget: unknown;
+    const ctx = {
+      mode: "tui" as const,
+      ui: { setWidget: (_id: string, content: unknown) => (widget = content) },
+    };
+    const tui = { requestRender() {} };
+    updateTaskWidget(state, ctx as never, true);
+    const component = mountWidget(widget, tui);
+    const side = component.render(121).map(stripAnsi);
+    assert.match(side[0] ?? "", /Todos.*Subagents/);
+    assert.ok(side.every((line) => visibleWidth(line) === 121));
+    assert.equal(side[1]?.slice(61), " ".repeat(60));
+    assert.doesNotMatch(side.join("\n"), /[╭╮╰╯]/);
+
+    state.add(Array.from({ length: 20 }, (_, index) => ({ name: `Extra ${index + 1}` })));
+    const unequal = component.render(121).map(stripAnsi);
+    const rightPanel = unequal.map((line) => line.slice(61));
+    assert.equal(rightPanel.at(-1), " ".repeat(60));
+    assert.doesNotMatch(unequal.join("\n"), /[╭╮╰╯]/);
+
+    const stacked = component.render(120);
+    assert.match(stripAnsi(stacked[0] ?? ""), /Todos/);
+    const stackedSubagentsIndex = stacked.findIndex((line) => stripAnsi(line).includes("Subagents"));
+    assert.ok(stackedSubagentsIndex > 0);
+    assert.ok(stackedSubagentsIndex < stacked.length);
+    assert.ok(stacked.every((line) => visibleWidth(line) <= 120));
+    assert.equal(stacked[stackedSubagentsIndex - 1], "");
+    assert.doesNotMatch(stacked.map(stripAnsi).join("\n"), /[╭╮╰╯]/);
+    assert.deepEqual(renderCalls.map(([, maxRows]) => maxRows), [10, 10, 2]);
+    assert.equal(claimCount, 1);
+
+    component.dispose();
+    assert.equal(releaseCount, 1);
+  });
+});
+
+test("falls back to a full-width Todo panel for absent and old Subagents APIs", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "Todo" }]);
+  let widget: unknown;
+  const ctx = {
+    mode: "tui" as const,
+    ui: { setWidget: (_id: string, content: unknown) => (widget = content) },
+  };
+  const tui = { requestRender() {} };
+  const empty = {
+    statusWidget: {
+      hasContent: () => true,
+      getBodyRowCount: () => 1,
+      render: () => [],
+      claim: () => () => {},
+      isClaimed: () => true,
+    },
+  };
+  const malformed = {
+    statusWidget: {
+      hasContent: () => true,
+      getBodyRowCount: () => 1,
+      render: () => new Array(1),
+      claim: () => () => {},
+      isClaimed: () => true,
+    },
+  };
+  for (const integration of [undefined, { statusWidget: { render: () => [] } }, empty, malformed]) {
+    withSubagentsIntegration(integration, () => {
+      updateTaskWidget(state, ctx as never, true);
+      const component = mountWidget(widget, tui);
+      const lines = component.render(80).map(stripAnsi);
+      assert.equal(lines.length, 2);
+      assert.match(lines[0] ?? "", /Todos/);
+      assert.doesNotMatch(lines.join("\n"), /[╭╮╰╯]/);
+      component.dispose();
+    });
+  }
+});
+
+test("reacquires a claim after the provider invalidates its callback", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "Todo" }]);
+  let claims = 0;
+  let releases = 0;
+  let providerCallback: (() => void) | undefined;
+  let providerClaimed = false;
+  withSubagentsIntegration({
+    statusWidget: {
+      hasContent: () => true,
+      getBodyRowCount: () => 1,
+      render: () => ["subagents"],
+      isClaimed: (onChange: () => void) => providerClaimed && providerCallback === onChange,
+      claim: (onChange: () => void) => {
+        claims += 1;
+        providerCallback = onChange;
+        providerClaimed = true;
+        return () => {
+          releases += 1;
+          if (providerCallback === onChange) {
+            providerCallback = undefined;
+            providerClaimed = false;
+          }
+        };
+      },
+    },
+  }, () => {
+    let widget: unknown;
+    const ctx = {
+      mode: "tui" as const,
+      ui: { setWidget: (_id: string, content: unknown) => (widget = content) },
+    };
+    updateTaskWidget(state, ctx as never, true);
+    const component = mountWidget(widget);
+    component.render(80);
+    assert.equal(claims, 1);
+    component.render(80);
+    assert.equal(claims, 1);
+
+    providerClaimed = false;
+    providerCallback = undefined;
+    component.render(80);
+    assert.equal(claims, 2);
+    assert.equal(releases, 1);
+    component.dispose();
+    assert.equal(releases, 2);
+  });
+});
+
+test("does not mask Todo rendering failures as optional integration failures", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "Todo" }]);
+  withSubagentsIntegration({
+    statusWidget: {
+      hasContent: () => true,
+      getBodyRowCount: () => 1,
+      render: () => ["subagents"],
+      isClaimed: () => true,
+      claim: () => () => {},
+    },
+  }, () => {
+    let widget: unknown;
+    const ctx = {
+      mode: "tui" as const,
+      ui: { setWidget: (_id: string, content: unknown) => (widget = content) },
+    };
+    const failure = new Error("Todo renderer failed");
+    const badTheme = {
+      fg: () => {
+        throw failure;
+      },
+      bold: (text: string) => text,
+      strikethrough: (text: string) => text,
+    };
+    updateTaskWidget(state, ctx as never, true);
+    const component = mountWidget(widget, { requestRender() {} }, badTheme);
+    assert.throws(() => component.render(80), (error) => error === failure);
+    component.dispose();
+  });
+});
+
+test("does not compose or claim Subagents outside the TUI mode", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "Todo" }]);
+  let claims = 0;
+  withSubagentsIntegration({
+    statusWidget: {
+      hasContent: () => true,
+      getBodyRowCount: () => 1,
+      render: () => ["Subagents"],
+      claim: () => {
+        claims += 1;
+        return () => {};
+      },
+    },
+  }, () => {
+    let widget: unknown;
+    const ctx = {
+      mode: "rpc" as const,
+      ui: { setWidget: (_id: string, content: unknown) => (widget = content) },
+    };
+    updateTaskWidget(state, ctx as never, true);
+    const component = mountWidget(widget);
+    const lines = component.render(80).map(stripAnsi);
+    assert.equal(claims, 0);
+    assert.ok(lines.every((line) => !line.includes("Subagents")));
+    component.dispose();
+  });
+});
+
+test("shares ten stacked body rows and keeps Todo overflow honest", () => {
+  const state = new TaskState(() => 0);
+  state.add(Array.from({ length: 20 }, (_, index) => ({ name: `Task ${index + 1}` })));
+  const calls: Array<[number, number | undefined]> = [];
+  const statusWidget = {
+    hasContent: () => true,
+    getBodyRowCount: () => 3,
+    isClaimed: () => true,
+    render: (width: number, maxBodyRows?: number) => {
+      calls.push([width, maxBodyRows]);
+      return ["one", "two", "three"];
+    },
+    claim: () => () => {},
+  };
+  withSubagentsIntegration({ statusWidget }, () => {
+    let widget: unknown;
+    const ctx = {
+      mode: "tui" as const,
+      ui: { setWidget: (_id: string, content: unknown) => (widget = content) },
+    };
+    updateTaskWidget(state, ctx as never, true);
+    const component = mountWidget(widget);
+    const lines = component.render(120).map(stripAnsi);
+    assert.deepEqual(calls, [[120, 3]]);
+    assert.ok(lines.some((line) => line.includes("… 14 more tasks")));
+    assert.ok(lines.every((line) => visibleWidth(line) <= 120));
+    component.dispose();
+  });
+});
+
+test("releases a Subagents claim when Todos hide or clear", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "Todo" }]);
+  let releases = 0;
+  withSubagentsIntegration({
+    statusWidget: {
+      hasContent: () => true,
+      getBodyRowCount: () => 1,
+      isClaimed: () => true,
+      render: () => ["subagents"],
+      claim: () => () => {
+        releases += 1;
+      },
+    },
+  }, () => {
+    let widget: unknown;
+    const ctx = {
+      mode: "tui" as const,
+      ui: { setWidget: (_id: string, content: unknown) => (widget = content) },
+    };
+    updateTaskWidget(state, ctx as never, true);
+    const component = mountWidget(widget);
+    component.render(80);
+    updateTaskWidget(state, ctx as never, false);
+    assert.equal(releases, 1);
+
+    updateTaskWidget(state, ctx as never, true);
+    const second = mountWidget(widget);
+    second.render(80);
+    state.remove([1]);
+    updateTaskWidget(state, ctx as never, true);
+    assert.equal(releases, 2);
+    second.dispose();
+  });
+});
+
+test("handles zero and one-column panel widths cleanly", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "Todo" }]);
+  assert.deepEqual(renderTodoPanel(state.list(), plainTheme as never, 0), []);
+  const oneColumn = renderTodoPanel(state.list(), plainTheme as never, 1);
+  assert.ok(oneColumn.length > 0);
+  assert.ok(oneColumn.every((line) => visibleWidth(line) <= 1));
+});
+
+test("ignores stale widget generations when Pi replaces the widget", () => {
+  const state = new TaskState(() => 0);
+  state.add([{ name: "Todo", status: "in-progress" }]);
+  let claims = 0;
+  let releases = 0;
+  withSubagentsIntegration({
+    statusWidget: {
+      hasContent: () => true,
+      getBodyRowCount: () => 1,
+      isClaimed: () => true,
+      render: () => ["subagents"],
+      claim: () => {
+        claims += 1;
+        return () => {
+          releases += 1;
+        };
+      },
+    },
+  }, () => {
+    const widgets: unknown[] = [];
+    const ctx = {
+      mode: "tui" as const,
+      ui: { setWidget: (_id: string, content: unknown) => widgets.push(content) },
+    };
+    const tui = { requestRender() {} };
+    updateTaskWidget(state, ctx as never, true, 5);
+    const first = mountWidget(widgets[0], tui);
+    first.render(80);
+
+    updateTaskWidget(state, ctx as never, true, 5);
+    const second = mountWidget(widgets[1], tui);
+    second.render(80);
+    assert.equal(claims, 2);
+    assert.equal(releases, 1);
+    assert.deepEqual(first.render(80), []);
+
+    first.dispose();
+    assert.equal(releases, 1);
+    clearTaskWidget(ctx as never);
+    assert.equal(releases, 2);
+    second.dispose();
+  });
+});
+
+test("animates active todos twice per second", () => {
+  assert.equal(TODO_ANIMATION_INTERVAL_MS, 500);
+});
+
 test("live widgets request rerenders and dispose their interval", async () => {
   let now = 0;
   const state = new TaskState(() => now);
@@ -250,28 +839,25 @@ test("live widgets request rerenders and dispose their interval", async () => {
   updateTaskWidget(state, ctx as never, true, 5);
 
   let renderRequests = 0;
-  const component = (
-    widget as unknown as (
-      tui: { requestRender(): void },
-      theme: unknown,
-    ) => { render(width: number): string[]; dispose?(): void }
-  )(
-    {
-      requestRender() {
-        renderRequests += 1;
-      },
+  const observedFrames = new Set<string>();
+  let component: TestWidget;
+  component = mountWidget(widget, {
+    requestRender() {
+      renderRequests += 1;
+      const frame = stripAnsi(component.render(40)[1] ?? "").match(/[◐◓◑◒]/)?.[0];
+      if (frame !== undefined) observedFrames.add(frame);
     },
-    plainTheme,
-  );
+  });
 
   try {
-    assert.match(stripAnsi(component.render(40)[1] ?? ""), / · 00:00$/);
+    assert.match(stripAnsi(component.render(40)[1] ?? ""), /◐.* · 00:00/);
     now = 65_000;
     await new Promise((resolve) => setTimeout(resolve, 20));
     assert.ok(renderRequests > 0);
-    assert.match(stripAnsi(component.render(40)[1] ?? ""), / · 01:05$/);
+    assert.ok(observedFrames.size > 0);
+    assert.match(stripAnsi(component.render(40)[1] ?? ""), /[◐◓◑◒].* · 01:05/);
   } finally {
-    component.dispose?.();
+    component.dispose();
   }
 
   const requestsAfterDispose = renderRequests;