pi-long-task 0.3.4 → 0.3.6

package/README.md

@@ -1,13 +1,13 @@
 # Pi Long Task
 
-Pi Long Task is a Pi extension that breaks large coding requests into tracked TODOs, executes them in isolated worker sessions, shows progress in a sidebar, and optionally commits completed work.
+Pi Long Task is a Pi extension that breaks large coding requests into tracked TODOs, executes them in isolated worker sessions, registers a real Pi TUI progress sidebar while a run is active, and optionally commits completed work.
 
 Use it when a coding request is bigger than one focused interaction. Pi Long Task creates or cleans up the TODO plan, hands each TODO to a fresh worker session, tracks every attempt, and keeps the run artifacts so you can inspect what happened later.
 
 ## Why use it
 
 - **Take on bigger tasks:** split broad product, refactor, testing, or cleanup requests into smaller TODOs that Pi can complete one at a time.
-- **Track progress visibly:** see the active TODO, inferred `**Status:**` subtasks, completed/failed/blocked counts, and remaining work in Pi's long-task sidebar.
+- **Track progress visibly:** in Pi TUI, see the active TODO, inferred `**Status:**` subtasks, completed/failed/blocked counts, and remaining work in the Pi Long Task sidebar while the run is active.
 - **Recover with retries:** tasks that do not report completion can be retried with context from previous attempts instead of losing the thread.
 - **Commit safely when asked:** enable commits for completed task work, while generated run files and pre-existing dirty files are kept out of those commits.
 - **Keep task artifacts:** every run writes a generated `TODO.md`, generated `TASK_RESULT.md`, attempt summaries, and final status under `tmp/pi-long-task/<run-id>/`.
@@ -20,18 +20,18 @@ When you ask Pi to run a long task, Pi Long Task:
 1. Recognizes natural-language requests like "run a long task with commits" and routes them to `pi_long_task`.
 2. Creates or cleans up a TODO plan from your request.
 3. Works through each unfinished TODO task in order using isolated worker sessions.
-4. Shows the current task and inferred subtask progress in a sidebar while it runs.
+4. Registers a Pi TUI sidebar/widget when UI support is available and updates it with the current task, inferred subtask progress, and full task timeline while the run is active.
 5. Retries unfinished tasks up to the configured attempt limit.
 6. Records progress, task artifacts, and final results under `tmp/pi-long-task/<run-id>/`.
 7. Returns a summary with completed, failed, blocked, and remaining task counts, plus worker spend when available.
 8. Optionally commits completed work after each task.
 
-A finished run gives you:
+During and after a run you get:
 
 - a concise status summary in Pi
 - a generated `TODO.md`
 - a generated `TASK_RESULT.md`
-- live sidebar progress for the active task and its `**Status:**` checkbox subtasks
+- live TUI sidebar progress during the run for the active task and its `**Status:**` checkbox subtasks
 - task attempt history and any remaining or blocked tasks clearly listed
 - worker spend when cost data is available
 - commit hashes when commits were enabled and created
@@ -96,7 +96,7 @@ Run a long task without commits to audit the README examples and leave the final
 
 ## What it looks like
 
-Pi keeps the active worker transcript in the main content area and shows the run timeline in the sidebar:
+In Pi TUI, Pi Long Task keeps worker activity in the main tool result flow and registers a real right-side TUI sidebar for the run timeline:
 
 ```text
 ┌─ Main content: active worker activity ─────────┬─ Pi Long Task sidebar ─────────┐
@@ -114,7 +114,7 @@ Pi keeps the active worker transcript in the main content area and shows the run
 └────────────────────────────────────────────────┴────────────────────────────────┘
 ```
 
-The real TUI uses responsive layout and colors; this README mockup stays narrow enough to avoid wrapping in package galleries.
+The actual sidebar is a Pi TUI overlay anchored on the right when the terminal is large enough, with a Pi widget fallback for UI contexts where the overlay is unavailable. It is cleared when the run finishes; this README mockup stays narrow enough to avoid wrapping in package galleries.
 
 ## How it works
 
@@ -122,15 +122,15 @@ Pi Long Task coordinates a long request from planning through task completion:
 
 1. **Plan the work:** it creates a TODO plan from your request, or normalizes pasted TODO markdown so each item can be tracked consistently.
 2. **Run isolated workers:** each TODO is assigned to its own fresh worker session with the relevant task text, global instructions, attempt history, and commit setting.
-3. **Stream progress back:** the active worker's activity streams into the main Pi thread, so you can follow commands, edits, verification, and the final `TASK_RESULT` as they happen.
-4. **Show every task in the sidebar:** the sidebar lists the full run timeline, including completed, active, upcoming, failed, or blocked tasks and inferred subtask progress from each task's `**Status:**` checklist.
+3. **Stream progress back:** the active worker's activity streams into the main Pi thread as partial tool results, so you can follow commands, edits, verification, and the final `TASK_RESULT` as they happen.
+4. **Update the Pi TUI sidebar:** when Pi provides UI support, the extension uses Pi's TUI UI APIs to maintain a real sidebar/widget that lists the full run timeline, including completed, active, upcoming, failed, or blocked tasks and inferred subtask progress from each task's `**Status:**` checklist.
 5. **Write run artifacts:** the coordinator writes the generated/normalized `TODO.md`, `TASK_RESULT.md`, attempt summaries, and final run details to `tmp/pi-long-task/<run-id>/`.
 6. **Commit only when enabled:** if `commit` is `true`, Pi Long Task may create a commit after each completed task using only eligible task changes. If commits are disabled, no commits are created; even when enabled, commits can be skipped when there are no eligible changes or the task outcome is not commit-worthy.
 
 ## Feature reference
 
-- **Sidebar task timeline:** every TODO appears in the sidebar with past, current, and future statuses so you can distinguish completed, active, upcoming, failed, blocked, and remaining work at a glance.
-- **Main-thread worker activity:** the active worker streams commands, edits, verification, and its per-task `TASK_RESULT` back into the main Pi conversation.
+- **Real Pi TUI sidebar:** in TUI sessions, every TODO appears in a registered sidebar/widget with past, current, and future statuses so you can distinguish completed, active, upcoming, failed, blocked, and remaining work at a glance.
+- **Main-thread worker activity:** the active worker still streams commands, edits, verification, and its per-task `TASK_RESULT` back into the main Pi conversation; the sidebar does not replace tool-result rendering.
 - **Cost visibility:** worker spend is included in Pi Long Task progress and is added to the main Pi `$ spent` total when cost data is available.
 - **Result and TODO artifacts:** each run keeps the generated or normalized `TODO.md`, aggregate `TASK_RESULT.md`, per-attempt summaries, and final run details under `tmp/pi-long-task/<run-id>/`.
 - **Commit-safe behavior:** when commits are enabled, Pi Long Task commits only eligible completed-task changes and skips generated run files.
@@ -180,7 +180,7 @@ No other public options are required.
 
 ## Progress display
 
-While a task is running, Pi Long Task shows the active TODO and subtasks parsed from that task's `**Status:**` checkbox list.
+While a task is running, Pi Long Task shows the active TODO and subtasks parsed from that task's `**Status:**` checkbox list. In Pi TUI this appears in the live sidebar/widget; in headless or non-UI contexts the same progress is still published through partial tool results.
 
 Status markers are:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-long-task",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "type": "module",
   "description": "Pi extension for breaking down and running long coding tasks safely.",
   "keywords": [

package/src/index.ts

@@ -1,5 +1,6 @@
-import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import type { ExtensionAPI, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
 import type { AssistantMessage } from "@earendil-works/pi-ai";
+import { truncateToWidth, type Component, type OverlayHandle, type TUI } from "@earendil-works/pi-tui";
 
 import { runCoordinator, type CoordinatorProgressUpdate, type CoordinatorResult } from "./coordinator.ts";
 import { longTaskInputTransform } from "./input_router.ts";
@@ -74,6 +75,549 @@ function toolDetails(result: CoordinatorResult) {
   };
 }
 
+const LONG_TASK_WIDGET_KEY = "pi-long-task-sidebar";
+
+type UiContext = ExtensionContext;
+
+export interface LongTaskSidebarController {
+  update(update: CoordinatorProgressUpdate): void;
+  close(): void;
+}
+
+class PiLongTaskSidebarComponent implements Component {
+  private readonly theme: Theme;
+  private update: CoordinatorProgressUpdate | undefined;
+
+  constructor(theme: Theme) {
+    this.theme = theme;
+  }
+
+  setUpdate(update: CoordinatorProgressUpdate): void {
+    this.update = update;
+    this.invalidate();
+  }
+
+  render(width: number): string[] {
+    return renderSidebarOverlayLines(this.update, this.theme, width);
+  }
+
+  invalidate(): void {
+    // Rendering is derived from the latest progress update and current theme.
+  }
+}
+
+export function createLongTaskSidebarController(ctx: UiContext | undefined): LongTaskSidebarController | undefined {
+  if (!ctx?.hasUI) {
+    return undefined;
+  }
+
+  let latestUpdate: CoordinatorProgressUpdate | undefined;
+  let overlayComponent: PiLongTaskSidebarComponent | undefined;
+  let overlayTui: TUI | undefined;
+  let overlayDone: ((result: undefined) => void) | undefined;
+  let overlayHandle: OverlayHandle | undefined;
+  let closed = false;
+
+  ctx.ui.setWidget(LONG_TASK_WIDGET_KEY, ["Pi Long Task: preparing sidebar..."], { placement: "aboveEditor" });
+
+  if (supportsTuiOverlay(ctx)) {
+    const overlayPromise = ctx.ui.custom<undefined>(
+      (tui, theme, _keybindings, done) => {
+        overlayTui = tui;
+        overlayDone = done;
+        overlayComponent = new PiLongTaskSidebarComponent(theme);
+        if (latestUpdate) {
+          overlayComponent.setUpdate(latestUpdate);
+        }
+        if (closed) {
+          done(undefined);
+        }
+        return overlayComponent;
+      },
+      {
+        overlay: true,
+        overlayOptions: {
+          anchor: "right-center",
+          width: "34%",
+          minWidth: 36,
+          maxHeight: "100%",
+          margin: 0,
+          nonCapturing: true,
+          visible: (termWidth, termHeight) => termWidth >= 96 && termHeight >= 16,
+        },
+        onHandle: (handle) => {
+          overlayHandle = handle;
+          handle.unfocus();
+        },
+      },
+    );
+    void overlayPromise.catch(() => {
+      // The widget fallback remains active if overlay registration is unavailable.
+    });
+  }
+
+  return {
+    update(update: CoordinatorProgressUpdate): void {
+      if (closed) {
+        return;
+      }
+      latestUpdate = update;
+      overlayComponent?.setUpdate(update);
+      overlayTui?.requestRender();
+      ctx.ui.setWidget(LONG_TASK_WIDGET_KEY, renderSidebarWidgetLines(update), { placement: "aboveEditor" });
+    },
+    close(): void {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      ctx.ui.setWidget(LONG_TASK_WIDGET_KEY, undefined);
+      if (overlayDone) {
+        overlayDone(undefined);
+      } else {
+        overlayHandle?.hide();
+      }
+      overlayComponent = undefined;
+      overlayTui = undefined;
+      overlayDone = undefined;
+      overlayHandle = undefined;
+    },
+  };
+}
+
+function supportsTuiOverlay(ctx: UiContext): boolean {
+  const mode = (ctx as UiContext & { mode?: string }).mode;
+  return mode === "tui" || mode === undefined;
+}
+
+function renderSidebarWidgetLines(update: CoordinatorProgressUpdate): string[] {
+  const progress = update.taskProgress;
+  const summary = progress?.summary;
+  const statusDetails = sidebarUpdateStateDetails(update);
+  const lines = ["Pi Long Task", `${statusDetails.icon} ${statusDetails.label} · ${update.message}`];
+  if (summary) {
+    lines.push(
+      `Tasks: ${summary.completedTasks}/${summary.totalTasks} · ${summary.completedPercent}%` +
+        (summary.currentTasks ? ` · ${summary.currentTasks} active` : "") +
+        (summary.pendingTasks ? ` · ${summary.pendingTasks} queued` : "") +
+        (summary.failedTasks ? ` · ${summary.failedTasks} failed` : "") +
+        (summary.blockedTasks ? ` · ${summary.blockedTasks} blocked` : ""),
+    );
+  }
+  if (progress && progress.tasks.length > 0) {
+    const currentIndex = focusedTaskIndex(progress);
+    const currentTask = currentIndex >= 0 ? progress.tasks[currentIndex] : undefined;
+    if (currentTask) {
+      const details = taskStatusDetails(currentTask.status);
+      lines.push(`${details.label}: ${details.icon} TODO ${currentTask.taskId} — ${currentTask.title}`);
+    }
+  }
+  if (update.workerCostTotal > 0) {
+    lines.push(`Spent: ${formatCost(update.workerCostTotal)}`);
+  }
+  return lines.map((line) => truncateToWidth(line, 96));
+}
+
+function renderSidebarOverlayLines(
+  update: CoordinatorProgressUpdate | undefined,
+  theme: Theme,
+  width: number,
+): string[] {
+  const safeWidth = Math.max(28, width);
+  const contentWidth = Math.max(8, safeWidth - 4);
+  const rows = renderSidebarRows(update, theme, contentWidth);
+  return rows.map((row) => sidebarPanelRow(row, contentWidth, theme));
+}
+
+function renderSidebarRows(update: CoordinatorProgressUpdate | undefined, theme: Theme, width: number): string[] {
+  if (!update) {
+    return ["", sidebarHeading("Pi Long Task", theme), "", theme.fg("muted", "Preparing long-task sidebar...")];
+  }
+
+  const progress = update.taskProgress;
+  const rows = [""];
+  for (const line of wrapPlainText(sidebarHeadline(update, progress), width, 2)) {
+    rows.push(sidebarHeading(line, theme));
+  }
+  rows.push(renderSidebarStateLine(update, theme));
+
+  const message = normalizeMessageForSidebar(update.message, update);
+  if (message) {
+    rows.push(...wrapPlainText(message, width, 2).map((line) => theme.fg("dim", line)));
+  }
+
+  if (!progress || progress.tasks.length === 0) {
+    rows.push("", sidebarHeading("Context", theme), theme.fg("muted", "Waiting for TODO plan"));
+    if (update.workerCostTotal > 0) {
+      rows.push(theme.fg("muted", `${formatCost(update.workerCostTotal)} spent`));
+    }
+    return rows;
+  }
+
+  const summary = progress.summary;
+  rows.push(
+    "",
+    sidebarHeading("Context", theme),
+    theme.fg(
+      "muted",
+      `${summary.completedTasks.toLocaleString()}/${summary.totalTasks.toLocaleString()} tasks complete`,
+    ),
+    theme.fg("muted", `${summary.completedPercent}% complete`),
+  );
+  if (update.workerCostTotal > 0) {
+    rows.push(theme.fg("muted", `${formatCost(update.workerCostTotal)} spent`));
+  }
+
+  rows.push(
+    "",
+    sidebarHeading("Progress", theme),
+    progressBarLine(progress, theme),
+    progressCountsLine(summary, theme),
+    progressStateLegend(progress, theme),
+  );
+
+  const currentIndex = focusedTaskIndex(progress);
+  const currentTask = currentIndex >= 0 ? progress.tasks[currentIndex] : undefined;
+  rows.push("", sidebarHeading("Current", theme));
+  if (currentTask) {
+    const details = taskStatusDetails(currentTask.status);
+    rows.push(
+      theme.fg(
+        details.color,
+        `${details.icon} TODO ${currentTask.taskId} ${theme.fg("dim", "·")} ${details.label}${currentTaskMeta(currentTask, theme)}`,
+      ),
+    );
+    rows.push(...wrapPlainText(currentTask.title, width, 2).map((line) => theme.fg("muted", line)));
+  } else {
+    rows.push(theme.fg("success", "No active task"));
+  }
+
+  rows.push("", sidebarHeading("Task timeline", theme));
+  const taskIndexes = centeredTaskIndexes(progress.tasks.length, currentIndex, 9);
+  const first = taskIndexes[0] ?? 0;
+  const last = taskIndexes[taskIndexes.length - 1] ?? -1;
+  if (first > 0) {
+    rows.push(theme.fg("dim", `… ${first} earlier task${first === 1 ? "" : "s"}`));
+  }
+  for (const index of taskIndexes) {
+    const task = progress.tasks[index];
+    if (task) {
+      rows.push(renderTaskRow(task, index === currentIndex, theme));
+    }
+  }
+  const remaining = progress.tasks.length - last - 1;
+  if (remaining > 0) {
+    rows.push(theme.fg("dim", `… ${remaining} later task${remaining === 1 ? "" : "s"}`));
+  }
+
+  const subtasks = update.subtasks ?? [];
+  if (subtasks.length > 0) {
+    rows.push("", sidebarHeading("Current status", theme));
+    for (const subtask of subtasks.slice(0, 6)) {
+      rows.push(renderSubtaskRow(subtask, theme));
+    }
+    if (subtasks.length > 6) {
+      rows.push(theme.fg("dim", `… ${subtasks.length - 6} more`));
+    }
+  }
+
+  return rows;
+}
+
+function centeredTaskIndexes(total: number, currentIndex: number, limit: number): number[] {
+  if (total <= 0) {
+    return [];
+  }
+  const clampedLimit = Math.max(1, Math.min(total, limit));
+  const focus = currentIndex >= 0 ? currentIndex : 0;
+  const start = Math.max(0, Math.min(total - clampedLimit, focus - Math.floor(clampedLimit / 2)));
+  return Array.from({ length: clampedLimit }, (_value, index) => start + index);
+}
+
+function focusedTaskIndex(progress: NonNullable<CoordinatorProgressUpdate["taskProgress"]>): number {
+  if (typeof progress.currentIndex === "number" && progress.currentIndex >= 0) {
+    return progress.currentIndex;
+  }
+  if (typeof progress.nextIndex === "number" && progress.nextIndex >= 0) {
+    return progress.nextIndex;
+  }
+  return progress.tasks.findIndex((task) => task.status === "current" || task.position === "current");
+}
+
+function renderTaskRow(
+  task: NonNullable<CoordinatorProgressUpdate["taskProgress"]>["tasks"][number],
+  focused: boolean,
+  theme: Theme,
+): string {
+  const details = taskStatusDetails(task.status);
+  const attempts = task.attempts > 0 && task.status !== "completed" ? ` ${theme.fg("dim", "·")} ${task.attempts}x` : "";
+  const title = truncateToWidth(task.title, 72);
+  const focusMarker = focused ? theme.fg("accent", "›") : theme.fg("dim", " ");
+  const icon = theme.fg(details.color, details.icon);
+  const label = `TODO ${task.taskId}`;
+  const row = `${label} ${theme.fg("dim", "·")} ${details.label} ${theme.fg("dim", "·")} ${title}${attempts}`;
+  const styledRow = focused ? theme.fg(details.color, theme.bold(row)) : theme.fg(details.textColor, row);
+  return `${focusMarker} ${icon} ${styledRow}`;
+}
+
+function renderSubtaskRow(subtask: NonNullable<CoordinatorProgressUpdate["subtasks"]>[number], theme: Theme): string {
+  const details = progressItemStatusDetails(subtask.status);
+  return `${theme.fg(details.color, details.icon)} ${theme.fg(details.textColor, `${details.label} · ${subtask.text}`)}`;
+}
+
+function renderSidebarStateLine(update: CoordinatorProgressUpdate, theme: Theme): string {
+  const details = sidebarUpdateStateDetails(update);
+  const suffix = [
+    update.attempt && update.attempt > 1 ? `attempt ${update.attempt}` : undefined,
+    update.workerCostTotal > 0 ? `${formatCost(update.workerCostTotal)} spent` : undefined,
+  ]
+    .filter(Boolean)
+    .join(` ${theme.fg("dim", "·")} `);
+  const meta = suffix ? ` ${theme.fg("dim", "·")} ${theme.fg("muted", suffix)}` : "";
+  return `${theme.fg(details.color, details.icon)} ${theme.fg(details.color, details.label)}${meta}`;
+}
+
+function currentTaskMeta(
+  task: NonNullable<CoordinatorProgressUpdate["taskProgress"]>["tasks"][number],
+  theme: Theme,
+): string {
+  const attempts = task.attempts > 0 && task.status !== "completed" ? [`attempt ${task.attempts}`] : [];
+  if (task.lastReportedStatus && task.status !== "current") {
+    attempts.push(task.lastReportedStatus);
+  }
+  return attempts.length > 0 ? ` ${theme.fg("dim", "·")} ${theme.fg("muted", attempts.join(" · "))}` : "";
+}
+
+function progressMeterLine(progress: NonNullable<CoordinatorProgressUpdate["taskProgress"]>, theme: Theme): string {
+  const total = progress.tasks.length;
+  if (total === 0) {
+    return theme.fg("dim", "────────");
+  }
+
+  const maxSegments = 12;
+  const step = Math.max(1, Math.ceil(total / maxSegments));
+  const segments: string[] = [];
+  for (let index = 0; index < total; index += step) {
+    const slice = progress.tasks.slice(index, Math.min(total, index + step));
+    segments.push(progressMeterSegment(slice, theme));
+  }
+  return segments.join("");
+}
+
+function progressMeterSegment(
+  tasks: Array<NonNullable<CoordinatorProgressUpdate["taskProgress"]>["tasks"][number]>,
+  theme: Theme,
+): string {
+  if (tasks.some((task) => task.status === "failed")) {
+    return theme.fg("error", "×");
+  }
+  if (tasks.some((task) => task.status === "blocked")) {
+    return theme.fg("warning", "!");
+  }
+  if (tasks.some((task) => task.status === "current")) {
+    return theme.fg("accent", "▢");
+  }
+  if (tasks.every((task) => task.status === "completed")) {
+    return theme.fg("success", "■");
+  }
+  if (tasks.some((task) => task.status === "completed")) {
+    return theme.fg("success", "▪");
+  }
+  return theme.fg("dim", "·");
+}
+
+function progressStateLegend(progress: NonNullable<CoordinatorProgressUpdate["taskProgress"]>, theme: Theme): string {
+  const statuses = new Set(progress.tasks.map((task) => task.status));
+  const items = [
+    statuses.has("completed") ? theme.fg("success", "■ done") : undefined,
+    statuses.has("current") ? theme.fg("accent", "▢ active") : undefined,
+    statuses.has("pending") ? theme.fg("dim", "· queued") : undefined,
+    statuses.has("failed") ? theme.fg("error", "× failed") : undefined,
+    statuses.has("blocked") ? theme.fg("warning", "! blocked") : undefined,
+  ].filter(Boolean);
+  return theme.fg("muted", items.join(" · "));
+}
+
+function sidebarUpdateStateDetails(update: CoordinatorProgressUpdate): {
+  icon: string;
+  label: string;
+  color: "accent" | "success" | "warning" | "error" | "muted";
+} {
+  if (update.status) {
+    switch (update.status) {
+      case "done":
+        return { icon: "✓", label: "done", color: "success" };
+      case "failed":
+        return { icon: "×", label: "failed", color: "error" };
+      case "blocked":
+        return { icon: "!", label: "blocked", color: "warning" };
+      case "partial":
+        return { icon: "!", label: "partial", color: "warning" };
+    }
+  }
+
+  switch (update.phase) {
+    case "planning":
+      return { icon: "+", label: "Planning", color: "warning" };
+    case "planned":
+      return { icon: "✓", label: "Plan ready", color: "success" };
+    case "task_start":
+      return { icon: "▢", label: "Running task", color: "accent" };
+    case "worker_tool":
+      return { icon: "+", label: "Worker tool", color: "warning" };
+    case "task_done":
+      return { icon: "✓", label: "Task complete", color: "success" };
+    case "task_blocked":
+      return { icon: "!", label: "Task blocked", color: "warning" };
+    case "task_failed":
+      return { icon: "×", label: "Task failed", color: "error" };
+    case "complete":
+      return { icon: "✓", label: "Complete", color: "success" };
+  }
+}
+
+function taskStatusDetails(status: NonNullable<CoordinatorProgressUpdate["taskProgress"]>["tasks"][number]["status"]): {
+  icon: string;
+  label: string;
+  color: "accent" | "success" | "warning" | "error" | "dim" | "muted";
+  textColor: "accent" | "text" | "success" | "warning" | "error" | "dim" | "muted";
+} {
+  switch (status) {
+    case "completed":
+      return { icon: "✓", label: "done", color: "success", textColor: "muted" };
+    case "current":
+      return { icon: "▢", label: "active", color: "accent", textColor: "text" };
+    case "failed":
+      return { icon: "×", label: "failed", color: "error", textColor: "error" };
+    case "blocked":
+      return { icon: "!", label: "blocked", color: "warning", textColor: "warning" };
+    case "pending":
+      return { icon: "○", label: "queued", color: "dim", textColor: "dim" };
+  }
+}
+
+function progressItemStatusDetails(status: NonNullable<CoordinatorProgressUpdate["subtasks"]>[number]["status"]): {
+  icon: string;
+  label: string;
+  color: "success" | "warning" | "error" | "dim" | "muted";
+  textColor: "success" | "warning" | "error" | "dim" | "muted";
+} {
+  switch (status) {
+    case "done":
+      return { icon: "✓", label: "done", color: "success", textColor: "muted" };
+    case "in_progress":
+      return { icon: "+", label: "active", color: "warning", textColor: "warning" };
+    case "failed":
+      return { icon: "×", label: "failed", color: "error", textColor: "error" };
+    case "blocked":
+      return { icon: "!", label: "blocked", color: "warning", textColor: "warning" };
+    case "empty":
+      return { icon: "○", label: "queued", color: "dim", textColor: "dim" };
+  }
+}
+
+function progressBarLine(progress: NonNullable<CoordinatorProgressUpdate["taskProgress"]>, theme: Theme): string {
+  const summary = progress.summary;
+  return `${theme.fg("muted", "Tasks")} ${theme.fg(
+    "success",
+    `${summary.completedTasks}/${summary.totalTasks}`,
+  )} ${theme.fg("dim", "·")} ${theme.fg("muted", `${summary.completedPercent}% complete`)} ${theme.fg(
+    "dim",
+    "·",
+  )} ${progressMeterLine(progress, theme)}`;
+}
+
+function progressCountsLine(
+  summary: NonNullable<NonNullable<CoordinatorProgressUpdate["taskProgress"]>["summary"]>,
+  theme: Theme,
+): string {
+  return [
+    theme.fg("success", `✓ ${summary.completedTasks} done`),
+    summary.currentTasks ? theme.fg("accent", `▢ ${summary.currentTasks} active`) : undefined,
+    summary.pendingTasks ? theme.fg("dim", `○ ${summary.pendingTasks} queued`) : undefined,
+    summary.failedTasks ? theme.fg("error", `× ${summary.failedTasks} failed`) : undefined,
+    summary.blockedTasks ? theme.fg("warning", `! ${summary.blockedTasks} blocked`) : undefined,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+}
+
+function sidebarHeading(text: string, theme: Theme): string {
+  return theme.fg("toolTitle", theme.bold(text));
+}
+
+function sidebarHeadline(
+  update: CoordinatorProgressUpdate,
+  progress: CoordinatorProgressUpdate["taskProgress"],
+): string {
+  if (update.taskId && update.title) {
+    return `TODO ${update.taskId} — ${update.title}`;
+  }
+  const currentTask = progress?.currentTask ?? progress?.nextTask;
+  if (currentTask) {
+    return `TODO ${currentTask.taskId} — ${currentTask.title}`;
+  }
+  return "Pi Long Task";
+}
+
+function normalizeMessageForSidebar(updateMessage: string, update: CoordinatorProgressUpdate): string | undefined {
+  const message = updateMessage.trim();
+  if (!message) {
+    return undefined;
+  }
+  const title = update.taskId && update.title ? `TODO ${update.taskId} — ${update.title}` : undefined;
+  return title && message.includes(title) && message.length <= title.length + 16 ? undefined : message;
+}
+
+function wrapPlainText(text: string, width: number, limit?: number): string[] {
+  const safeWidth = Math.max(8, width);
+  const words = text.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) {
+    return [];
+  }
+
+  const lines: string[] = [];
+  let line = "";
+  for (const word of words) {
+    const next = line ? `${line} ${word}` : word;
+    if (next.length <= safeWidth) {
+      line = next;
+      continue;
+    }
+    if (line) {
+      lines.push(line);
+    }
+    line = word.length > safeWidth ? truncateToWidth(word, safeWidth) : word;
+    if (limit && lines.length >= limit) {
+      break;
+    }
+  }
+  if (line && (!limit || lines.length < limit)) {
+    lines.push(line);
+  }
+  if (limit && lines.length > limit) {
+    lines.length = limit;
+  }
+  if (limit && words.join(" ").length > lines.join(" ").length && lines.length > 0) {
+    lines[lines.length - 1] = truncateToWidth(`${lines[lines.length - 1]} …`, safeWidth);
+  }
+  return lines;
+}
+
+function sidebarPanelRow(text: string, width: number, theme: Theme): string {
+  return `${theme.fg("borderMuted", "│")}  ${truncateToWidth(text, width, "…", true)}`;
+}
+
+function formatCost(value: number): string {
+  if (value === 0) {
+    return "$0";
+  }
+  if (value < 0.01) {
+    return `$${value.toFixed(4)}`;
+  }
+  return `$${value.toFixed(2)}`;
+}
+
 export default function registerPiLongTaskExtension(pi: ExtensionAPI) {
   const workerCostAccumulator = createWorkerCostAccumulator();
 
@@ -108,7 +652,9 @@ export default function registerPiLongTaskExtension(pi: ExtensionAPI) {
     renderCall: renderLongTaskToolCall,
     renderResult: renderLongTaskToolResult,
     async execute(_toolCallId, params, signal, onUpdate, ctx) {
+      const sidebar = createLongTaskSidebarController(ctx);
       const publishProgress = (update: CoordinatorProgressUpdate) => {
+        sidebar?.update(update);
         onUpdate?.({
           content: [
             {
@@ -120,23 +666,27 @@ export default function registerPiLongTaskExtension(pi: ExtensionAPI) {
         });
       };
 
-      const result = await runCoordinator({
-        ...params,
-        cwd: ctx?.cwd,
-        abortSignal: signal,
-        onProgress: publishProgress,
-      });
-      workerCostAccumulator.add(result.workerCostTotal);
-
-      return {
-        content: [
-          {
-            type: "text" as const,
-            text: result.message,
-          },
-        ],
-        details: toolDetails(result),
-      };
+      try {
+        const result = await runCoordinator({
+          ...params,
+          cwd: ctx?.cwd,
+          abortSignal: signal,
+          onProgress: publishProgress,
+        });
+        workerCostAccumulator.add(result.workerCostTotal);
+
+        return {
+          content: [
+            {
+              type: "text" as const,
+              text: result.message,
+            },
+          ],
+          details: toolDetails(result),
+        };
+      } finally {
+        sidebar?.close();
+      }
     },
   });
 }

package/src/render.ts

@@ -1,7 +1,7 @@
 import type { AgentToolResult, Theme, ToolRenderResultOptions } from "@earendil-works/pi-coding-agent";
-import { Text, truncateToWidth, visibleWidth, type Component } from "@earendil-works/pi-tui";
+import { Text, type Component } from "@earendil-works/pi-tui";
 
-import type { TaskProgressModel, TaskProgressStatus, TaskProgressTask } from "./task_progress.ts";
+import type { TaskProgressModel } from "./task_progress.ts";
 import type { CoordinatorCommitSummary, CoordinatorRemainingTask, CoordinatorStatus } from "./types.ts";
 
 export interface CoordinatorResultForRendering {
@@ -38,72 +38,6 @@ interface ProgressSubtaskRenderDetails {
   status: ProgressItemStatus;
 }
 
-const SIDEBAR_MIN_SIDE_BY_SIDE_WIDTH = 84;
-const SIDEBAR_MIN_WIDTH = 26;
-const SIDEBAR_MAX_WIDTH = 40;
-const SIDEBAR_GAP = 2;
-
-class LongTaskSidebarShell implements Component {
-  private readonly mainText: string;
-  private readonly taskProgress: TaskProgressModel;
-  private readonly workerCostTotal: number | undefined;
-  private readonly theme: Theme;
-
-  constructor(mainText: string, taskProgress: TaskProgressModel, theme: Theme, workerCostTotal?: number) {
-    this.mainText = mainText;
-    this.taskProgress = taskProgress;
-    this.workerCostTotal = workerCostTotal;
-    this.theme = theme;
-  }
-
-  render(width: number): string[] {
-    if (width < SIDEBAR_MIN_SIDE_BY_SIDE_WIDTH) {
-      return this.renderStacked(width);
-    }
-
-    const sidebarWidth = clamp(Math.floor(width * 0.32), SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH);
-    const mainWidth = width - sidebarWidth - SIDEBAR_GAP;
-    if (mainWidth < 40) {
-      return this.renderStacked(width);
-    }
-
-    const mainLines = renderWrappedLines(this.mainText, mainWidth);
-    const sidebarLines = this.renderSidebar(sidebarWidth);
-    const height = Math.max(mainLines.length, sidebarLines.length);
-    const lines: string[] = [];
-    for (let idx = 0; idx < height; idx += 1) {
-      const main = padLine(mainLines[idx] ?? "", mainWidth);
-      const sidebar = sidebarLines[idx] ?? "";
-      lines.push(truncateToWidth(`${main}${" ".repeat(SIDEBAR_GAP)}${sidebar}`, width));
-    }
-    return lines;
-  }
-
-  invalidate(): void {
-    // Rendering is computed from current state on each pass.
-  }
-
-  private renderStacked(width: number): string[] {
-    const mainLines = renderWrappedLines(this.mainText, width);
-    const sidebarLines = this.renderSidebar(width);
-    return [...mainLines, ...sidebarLines].map((line) => truncateToWidth(line, width));
-  }
-
-  private renderSidebar(width: number): string[] {
-    if (width < 8) {
-      return [];
-    }
-
-    const innerWidth = Math.max(0, width - 2);
-    const rows = sidebarRows(this.taskProgress, this.theme, this.workerCostTotal);
-    return [
-      sidebarBorder("Long Task", width, this.theme),
-      ...rows.map((row) => sidebarRow(row, innerWidth, this.theme)),
-      this.theme.fg("borderMuted", `└${"─".repeat(innerWidth)}┘`),
-    ];
-  }
-}
-
 export function formatCoordinatorResultMessage(result: CoordinatorResultForRendering): string {
   const resultPath = result.resultPath ?? result.taskResultPath ?? "unknown";
   const remaining = result.remainingTasks ?? [];
@@ -160,10 +94,7 @@ export function renderLongTaskToolResult(
 ): Component {
   const details = recordOrUndefined(result.details);
   if (options.isPartial) {
-    const taskProgress = taskProgressModel(details?.taskProgress);
-    const workerCostTotal = numberValue(details?.workerCostTotal);
-    const main = renderLongTaskProgress(details, contentText(result), theme);
-    return taskProgress ? new LongTaskSidebarShell(main, taskProgress, theme, workerCostTotal) : new Text(main, 0, 0);
+    return new Text(renderLongTaskProgress(details, contentText(result), theme), 0, 0);
   }
 
   const finalDetails = longTaskDetails(details);
@@ -171,10 +102,7 @@ export function renderLongTaskToolResult(
     return new Text(contentText(result), 0, 0);
   }
 
-  const main = renderLongTaskSummary(finalDetails, options.expanded, theme);
-  return finalDetails.taskProgress
-    ? new LongTaskSidebarShell(main, finalDetails.taskProgress, theme, finalDetails.workerCostTotal)
-    : new Text(main, 0, 0);
+  return new Text(renderLongTaskSummary(finalDetails, options.expanded, theme), 0, 0);
 }
 
 function renderLongTaskProgress(details: Record<string, unknown> | undefined, fallback: string, theme: Theme): string {
@@ -183,22 +111,36 @@ function renderLongTaskProgress(details: Record<string, unknown> | undefined, fa
   const toolName = stringValue(details?.toolName);
   const prefix = phase === "worker_tool" && toolName ? `worker ${toolName}` : phase || "progress";
   const currentTask = progressTaskDetails(details?.currentTask);
+  const progress = taskProgressModel(details?.taskProgress);
+
   if (!currentTask) {
-    return `${theme.fg("accent", "●")} ${theme.fg("muted", prefix)} ${message}`;
+    return `${theme.fg("warning", "+")} ${theme.fg("warning", `${progressPhaseLabel(phase)}:`)} ${message}`;
   }
 
   const taskLabel = `TODO ${currentTask.taskId} — ${currentTask.title}`;
+  const status = progressItemStatusDetails(currentTask.status);
+  const activitySuffix =
+    phase === "worker_tool" && toolName ? ` ${theme.fg("dim", "·")} ${theme.fg("muted", `worker ${toolName}`)}` : "";
+  const attempt = numberValue(details?.attempt);
+  const attemptSuffix =
+    attempt && attempt > 1 ? ` ${theme.fg("dim", "·")} ${theme.fg("muted", `attempt ${attempt}`)}` : "";
   const lines = [
-    `${progressBubble(currentTask.status, theme)} ${theme.fg("muted", prefix)} ${theme.fg(progressTextColor(currentTask.status), taskLabel)}`,
+    `${theme.fg("warning", "+")} ${theme.fg("warning", `${progressPhaseLabel(phase)}:`)} ${theme.fg(
+      status.textColor,
+      taskLabel,
+    )}${activitySuffix}${attemptSuffix}`,
   ];
+
+  if (progress) {
+    lines.push(renderTaskProgressStrip(progress, theme));
+  }
+
   if (message && !message.includes(taskLabel)) {
-    lines.push(`  ${theme.fg("dim", message)}`);
+    lines.push(`  ${theme.fg("dim", "⚙")} ${theme.fg("dim", `${prefix} · ${message}`)}`);
   }
 
   for (const subtask of progressSubtaskDetails(details?.subtasks)) {
-    lines.push(
-      `  ${progressBubble(subtask.status, theme)} ${theme.fg(progressTextColor(subtask.status), subtask.text)}`,
-    );
+    lines.push(renderProgressSubtaskLine(subtask, theme));
   }
 
   return lines.join("\n");
@@ -253,162 +195,6 @@ function renderLongTaskSummary(details: CoordinatorToolRenderDetails, expanded:
   return lines.join("\n");
 }
 
-function renderWrappedLines(text: string, width: number): string[] {
-  return new Text(text, 0, 0).render(Math.max(1, width)).map((line) => truncateToWidth(line, Math.max(1, width)));
-}
-
-function padLine(line: string, width: number): string {
-  return truncateToWidth(line, width, "…", true);
-}
-
-function sidebarRows(taskProgress: TaskProgressModel, theme: Theme, workerCostTotal?: number): string[] {
-  const summary = normalizedTaskProgressSummary(taskProgress);
-  const rows = [theme.fg("toolTitle", theme.bold("Task sidebar")), theme.fg("dim", "Centered timeline")];
-  if (workerCostTotal) {
-    rows.push(theme.fg("muted", `Worker spend: ${formatCost(workerCostTotal)}`));
-  }
-  if (summary.totalTasks === 0) {
-    rows.push("", theme.fg("muted", "Waiting for TODO plan..."));
-    return rows;
-  }
-
-  rows.push("", progressBarLine(summary.completedTasks, summary.totalTasks, summary.completedPercent, theme));
-  rows.push(progressCountsLine(summary, theme));
-
-  const currentIndex = focusedTaskIndex(taskProgress);
-  if (currentIndex >= 0) {
-    rows.push(theme.fg("warning", `Focus: TODO ${taskProgress.tasks[currentIndex]?.taskId ?? "?"}`));
-  } else {
-    rows.push(theme.fg("success", "No active task"));
-  }
-
-  rows.push("", theme.fg("muted", "Timeline"));
-  for (const [index, task] of taskProgress.tasks.entries()) {
-    if (currentIndex >= 0 && index === currentIndex && index > 0) {
-      rows.push(theme.fg("dim", "──── current ────"));
-    }
-    rows.push(renderSidebarTaskRow(task, theme));
-    if (currentIndex >= 0 && index === currentIndex && index < taskProgress.tasks.length - 1) {
-      rows.push(theme.fg("dim", "──── future ─────"));
-    }
-  }
-
-  return rows;
-}
-
-interface NormalizedTaskProgressSummary {
-  totalTasks: number;
-  completedTasks: number;
-  failedTasks: number;
-  blockedTasks: number;
-  pendingTasks: number;
-  currentTasks: number;
-  completedPercent: number;
-}
-
-function normalizedTaskProgressSummary(taskProgress: TaskProgressModel): NormalizedTaskProgressSummary {
-  const totalTasks = taskProgress.summary?.totalTasks ?? taskProgress.tasks.length;
-  const completedTasks = taskProgress.summary?.completedTasks ?? countTasksByStatus(taskProgress.tasks, "completed");
-  const failedTasks = taskProgress.summary?.failedTasks ?? countTasksByStatus(taskProgress.tasks, "failed");
-  const blockedTasks = taskProgress.summary?.blockedTasks ?? countTasksByStatus(taskProgress.tasks, "blocked");
-  const pendingTasks = taskProgress.summary?.pendingTasks ?? countTasksByStatus(taskProgress.tasks, "pending");
-  const currentTasks = taskProgress.summary?.currentTasks ?? countTasksByStatus(taskProgress.tasks, "current");
-  const completedPercent =
-    taskProgress.summary?.completedPercent ??
-    (totalTasks === 0 ? 100 : Math.round((completedTasks / totalTasks) * 100));
-
-  return {
-    totalTasks,
-    completedTasks,
-    failedTasks,
-    blockedTasks,
-    pendingTasks,
-    currentTasks,
-    completedPercent,
-  };
-}
-
-function countTasksByStatus(tasks: readonly TaskProgressTask[], status: TaskProgressStatus): number {
-  return tasks.filter((task) => task.status === status).length;
-}
-
-function progressBarLine(completedTasks: number, totalTasks: number, percent: number, theme: Theme): string {
-  const width = 10;
-  const filled = clamp(totalTasks === 0 ? width : Math.round((completedTasks / totalTasks) * width), 0, width);
-  const empty = Math.max(0, width - filled);
-  return `${theme.fg("muted", "Progress")} [${theme.fg("success", "#".repeat(filled))}${theme.fg(
-    "dim",
-    "-".repeat(empty),
-  )}] ${completedTasks}/${totalTasks} ${percent}%`;
-}
-
-function progressCountsLine(summary: NormalizedTaskProgressSummary, theme: Theme): string {
-  const parts = [
-    theme.fg("success", `✓ ${summary.completedTasks}`),
-    summary.currentTasks ? theme.fg("warning", `▶ ${summary.currentTasks}`) : undefined,
-    summary.pendingTasks ? theme.fg("dim", `○ ${summary.pendingTasks}`) : undefined,
-    summary.failedTasks ? theme.fg("error", `✗ ${summary.failedTasks}`) : undefined,
-    summary.blockedTasks ? theme.fg("warning", `! ${summary.blockedTasks}`) : undefined,
-  ].filter(Boolean);
-  return parts.join(" · ");
-}
-
-function focusedTaskIndex(taskProgress: TaskProgressModel): number {
-  if (typeof taskProgress.currentIndex === "number" && taskProgress.currentIndex >= 0) {
-    return taskProgress.currentIndex;
-  }
-
-  const currentIndex = taskProgress.tasks.findIndex((task) => task.status === "current" || task.position === "current");
-  if (currentIndex >= 0) {
-    return currentIndex;
-  }
-
-  if (typeof taskProgress.nextIndex === "number" && taskProgress.nextIndex >= 0) {
-    return taskProgress.nextIndex;
-  }
-  return taskProgress.tasks.findIndex((task) => task.status === "pending");
-}
-
-function renderSidebarTaskRow(task: TaskProgressTask, theme: Theme): string {
-  const { icon, color, label } = sidebarTaskStatusDetails(task.status);
-  const attempts =
-    task.attempts > 0 && task.status !== "completed"
-      ? ` · ${task.attempts} attempt${task.attempts === 1 ? "" : "s"}`
-      : "";
-  const text = `${icon} [${label}] TODO ${task.taskId} — ${task.title}${attempts}`;
-  return task.status === "current" ? theme.fg(color, theme.bold(text)) : theme.fg(color, text);
-}
-
-function sidebarTaskStatusDetails(status: TaskProgressStatus): {
-  icon: string;
-  color: "success" | "warning" | "error" | "dim" | "muted";
-  label: string;
-} {
-  switch (status) {
-    case "completed":
-      return { icon: "✓", color: "success", label: "completed" };
-    case "current":
-      return { icon: "▶", color: "warning", label: "current" };
-    case "failed":
-      return { icon: "✗", color: "error", label: "failed" };
-    case "blocked":
-      return { icon: "!", color: "warning", label: "blocked" };
-    case "pending":
-      return { icon: "○", color: "dim", label: "pending" };
-  }
-}
-
-function sidebarBorder(title: string, width: number, theme: Theme): string {
-  const innerWidth = Math.max(0, width - 2);
-  const titleText = truncateToWidth(` ${title} `, innerWidth, "");
-  const remaining = Math.max(0, innerWidth - visibleWidth(titleText));
-  return theme.fg("borderMuted", `┌${titleText}${"─".repeat(remaining)}┐`);
-}
-
-function sidebarRow(row: string, innerWidth: number, theme: Theme): string {
-  return `${theme.fg("borderMuted", "│")}${truncateToWidth(row, innerWidth, "…", true)}${theme.fg("borderMuted", "│")}`;
-}
-
 function taskProgressModel(value: unknown): TaskProgressModel | undefined {
   const record = recordOrUndefined(value);
   if (!record || !Array.isArray(record.tasks)) {
@@ -417,10 +203,6 @@ function taskProgressModel(value: unknown): TaskProgressModel | undefined {
   return value as TaskProgressModel;
 }
 
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, value));
-}
-
 function progressTaskDetails(value: unknown): ProgressTaskRenderDetails | undefined {
   const record = recordOrUndefined(value);
   const taskId = stringValue(record?.taskId);
@@ -447,36 +229,120 @@ function progressSubtaskDetails(value: unknown): ProgressSubtaskRenderDetails[]
   });
 }
 
+function progressPhaseLabel(phase: string): string {
+  switch (phase) {
+    case "planning":
+    case "planned":
+      return "Thought";
+    case "task_start":
+    case "worker_tool":
+      return "Build";
+    case "task_done":
+      return "Done";
+    case "task_failed":
+      return "Failed";
+    case "task_blocked":
+      return "Blocked";
+    case "complete":
+      return "Complete";
+    default:
+      return "Progress";
+  }
+}
+
+function renderTaskProgressStrip(progress: TaskProgressModel, theme: Theme): string {
+  const summary = progress.summary;
+  const track = taskProgressTrack(progress, theme);
+  const counts = [
+    theme.fg("muted", `${summary.completedTasks}/${summary.totalTasks}`),
+    theme.fg("muted", `${summary.completedPercent}%`),
+    summary.failedTasks ? theme.fg("error", `${summary.failedTasks} failed`) : undefined,
+    summary.blockedTasks ? theme.fg("warning", `${summary.blockedTasks} blocked`) : undefined,
+    summary.currentTasks ? theme.fg("warning", `${summary.currentTasks} active`) : undefined,
+    summary.pendingTasks ? theme.fg("dim", `${summary.pendingTasks} queued`) : undefined,
+  ]
+    .filter(Boolean)
+    .join(` ${theme.fg("dim", "·")} `);
+  return `  ${track} ${counts}`;
+}
+
+function taskProgressTrack(progress: TaskProgressModel, theme: Theme): string {
+  const taskIndexes = focusedTaskIndexes(progress);
+  const first = taskIndexes[0] ?? 0;
+  const last = taskIndexes[taskIndexes.length - 1] ?? -1;
+  const prefix = first > 0 ? theme.fg("dim", "… ") : "";
+  const suffix = last >= 0 && last < progress.tasks.length - 1 ? theme.fg("dim", " …") : "";
+  return `${prefix}${taskIndexes.map((index) => taskProgressTaskGlyph(progress.tasks[index], theme)).join(" ")}${suffix}`;
+}
+
+function focusedTaskIndexes(progress: TaskProgressModel): number[] {
+  const total = progress.tasks.length;
+  if (total <= 0) {
+    return [];
+  }
+  const limit = Math.min(total, 8);
+  const focus = Math.max(0, Math.min(total - 1, progress.currentIndex ?? progress.nextIndex ?? 0));
+  const start = Math.max(0, Math.min(total - limit, focus - Math.floor(limit / 2)));
+  return Array.from({ length: limit }, (_value, index) => start + index);
+}
+
+function taskProgressTaskGlyph(task: TaskProgressModel["tasks"][number] | undefined, theme: Theme): string {
+  if (!task) {
+    return "";
+  }
+  const details = taskStatusDetails(task.status);
+  return theme.fg(details.color, details.icon);
+}
+
+function renderProgressSubtaskLine(subtask: ProgressSubtaskRenderDetails, theme: Theme): string {
+  const details = progressItemStatusDetails(subtask.status);
+  return `  ${theme.fg(details.color, details.icon)} ${theme.fg(details.textColor, `${details.label} · ${subtask.text}`)}`;
+}
+
 function progressItemStatus(value: unknown): ProgressItemStatus | undefined {
   return value === "empty" || value === "in_progress" || value === "done" || value === "failed" || value === "blocked"
     ? value
     : undefined;
 }
 
-function progressBubble(status: ProgressItemStatus, theme: Theme): string {
+function taskStatusDetails(status: TaskProgressModel["tasks"][number]["status"]): {
+  icon: string;
+  label: string;
+  color: "accent" | "success" | "warning" | "dim" | "error";
+  textColor: "accent" | "text" | "success" | "warning" | "dim" | "error";
+} {
   switch (status) {
-    case "empty":
-      return theme.fg("dim", "○");
+    case "completed":
+      return { icon: "✓", label: "done", color: "success", textColor: "dim" };
+    case "current":
+      return { icon: "▢", label: "active", color: "accent", textColor: "text" };
     case "failed":
-      return theme.fg("error", "✗");
+      return { icon: "×", label: "failed", color: "error", textColor: "error" };
     case "blocked":
-      return theme.fg("warning", "!");
-    default:
-      return theme.fg(progressTextColor(status), "●");
+      return { icon: "!", label: "blocked", color: "warning", textColor: "warning" };
+    case "pending":
+      return { icon: "○", label: "queued", color: "dim", textColor: "dim" };
   }
 }
 
-function progressTextColor(status: ProgressItemStatus): "success" | "warning" | "dim" | "error" {
-  if (status === "done") {
-    return "success";
-  }
-  if (status === "failed") {
-    return "error";
-  }
-  if (status === "in_progress" || status === "blocked") {
-    return "warning";
+function progressItemStatusDetails(status: ProgressItemStatus): {
+  icon: string;
+  label: string;
+  color: "accent" | "success" | "warning" | "dim" | "error";
+  textColor: "accent" | "success" | "warning" | "dim" | "error";
+} {
+  switch (status) {
+    case "done":
+      return { icon: "✓", label: "done", color: "success", textColor: "dim" };
+    case "in_progress":
+      return { icon: "+", label: "active", color: "warning", textColor: "warning" };
+    case "failed":
+      return { icon: "×", label: "failed", color: "error", textColor: "error" };
+    case "blocked":
+      return { icon: "!", label: "blocked", color: "warning", textColor: "warning" };
+    case "empty":
+      return { icon: "○", label: "queued", color: "dim", textColor: "dim" };
   }
-  return "dim";
 }
 
 function longTaskDetails(details: Record<string, unknown> | undefined): CoordinatorToolRenderDetails | undefined {