pi-long-task 0.3.5 → 0.3.7

package/package.json

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

package/src/index.ts

@@ -1,6 +1,6 @@
 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 { truncateToWidth, type Component, type TUI } from "@earendil-works/pi-tui";
 
 import { runCoordinator, type CoordinatorProgressUpdate, type CoordinatorResult } from "./coordinator.ts";
 import { longTaskInputTransform } from "./input_router.ts";
@@ -76,6 +76,9 @@ function toolDetails(result: CoordinatorResult) {
 }
 
 const LONG_TASK_WIDGET_KEY = "pi-long-task-sidebar";
+const SIDEBAR_WIDGET_RESERVED_INPUT_ROWS = 8;
+const SIDEBAR_WIDGET_MIN_ROWS = 4;
+const SIDEBAR_WIDGET_MAX_ROWS = 24;
 
 type UiContext = ExtensionContext;
 
@@ -86,10 +89,12 @@ export interface LongTaskSidebarController {
 
 class PiLongTaskSidebarComponent implements Component {
   private readonly theme: Theme;
+  private readonly maxRows: (() => number | undefined) | undefined;
   private update: CoordinatorProgressUpdate | undefined;
 
-  constructor(theme: Theme) {
+  constructor(theme: Theme, maxRows?: () => number | undefined) {
     this.theme = theme;
+    this.maxRows = maxRows;
   }
 
   setUpdate(update: CoordinatorProgressUpdate): void {
@@ -98,7 +103,8 @@ class PiLongTaskSidebarComponent implements Component {
   }
 
   render(width: number): string[] {
-    return renderSidebarOverlayLines(this.update, this.theme, width);
+    const lines = renderSidebarOverlayLines(this.update, this.theme, width);
+    return limitSidebarPanelLines(lines, this.theme, width, this.maxRows?.());
   }
 
   invalidate(): void {
@@ -112,48 +118,25 @@ export function createLongTaskSidebarController(ctx: UiContext | undefined): Lon
   }
 
   let latestUpdate: CoordinatorProgressUpdate | undefined;
-  let overlayComponent: PiLongTaskSidebarComponent | undefined;
-  let overlayTui: TUI | undefined;
-  let overlayDone: ((result: undefined) => void) | undefined;
-  let overlayHandle: OverlayHandle | undefined;
+  let sidebarComponent: PiLongTaskSidebarComponent | undefined;
+  let sidebarTui: TUI | 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 (supportsTuiWidget(ctx)) {
+    ctx.ui.setWidget(
+      LONG_TASK_WIDGET_KEY,
+      (tui, theme) => {
+        sidebarTui = tui;
+        sidebarComponent = new PiLongTaskSidebarComponent(theme, () => sidebarWidgetLineLimit(tui));
         if (latestUpdate) {
-          overlayComponent.setUpdate(latestUpdate);
-        }
-        if (closed) {
-          done(undefined);
+          sidebarComponent.setUpdate(latestUpdate);
         }
-        return overlayComponent;
-      },
-      {
-        overlay: true,
-        overlayOptions: {
-          anchor: "right-center",
-          width: "34%",
-          minWidth: 32,
-          maxHeight: "85%",
-          margin: 1,
-          nonCapturing: true,
-          visible: (termWidth, termHeight) => termWidth >= 96 && termHeight >= 16,
-        },
-        onHandle: (handle) => {
-          overlayHandle = handle;
-          handle.unfocus();
-        },
+        return sidebarComponent;
       },
+      { placement: "aboveEditor" },
     );
-    void overlayPromise.catch(() => {
-      // The widget fallback remains active if overlay registration is unavailable.
-    });
+  } else {
+    ctx.ui.setWidget(LONG_TASK_WIDGET_KEY, ["Pi Long Task: preparing sidebar..."], { placement: "aboveEditor" });
   }
 
   return {
@@ -162,9 +145,11 @@ export function createLongTaskSidebarController(ctx: UiContext | undefined): Lon
         return;
       }
       latestUpdate = update;
-      overlayComponent?.setUpdate(update);
-      overlayTui?.requestRender();
-      ctx.ui.setWidget(LONG_TASK_WIDGET_KEY, renderSidebarWidgetLines(update), { placement: "aboveEditor" });
+      sidebarComponent?.setUpdate(update);
+      sidebarTui?.requestRender();
+      if (!sidebarComponent) {
+        ctx.ui.setWidget(LONG_TASK_WIDGET_KEY, renderSidebarWidgetLines(update), { placement: "aboveEditor" });
+      }
     },
     close(): void {
       if (closed) {
@@ -172,45 +157,48 @@ export function createLongTaskSidebarController(ctx: UiContext | undefined): Lon
       }
       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;
+      sidebarComponent = undefined;
+      sidebarTui = undefined;
     },
   };
 }
 
-function supportsTuiOverlay(ctx: UiContext): boolean {
+function supportsTuiWidget(ctx: UiContext): boolean {
   const mode = (ctx as UiContext & { mode?: string }).mode;
   return mode === "tui" || mode === undefined;
 }
 
+function sidebarWidgetLineLimit(tui: TUI): number {
+  const terminalRows = tui.terminal.rows;
+  const rows = Number.isFinite(terminalRows) ? Math.max(0, Math.floor(terminalRows)) : 24;
+  const availableRows = rows - SIDEBAR_WIDGET_RESERVED_INPUT_ROWS;
+  return Math.max(SIDEBAR_WIDGET_MIN_ROWS, Math.min(SIDEBAR_WIDGET_MAX_ROWS, availableRows));
+}
+
 function renderSidebarWidgetLines(update: CoordinatorProgressUpdate): string[] {
   const progress = update.taskProgress;
   const summary = progress?.summary;
-  const status = update.status ? String(update.status) : update.phase;
-  const lines = [`Pi Long Task: ${status}`, update.message];
+  const statusDetails = sidebarUpdateStateDetails(update);
+  const lines = ["Pi Long Task", `${statusDetails.icon} ${statusDetails.label} · ${update.message}`];
   if (summary) {
     lines.push(
-      `Tasks: ${summary.completedTasks}/${summary.totalTasks} done` +
-        (summary.failedTasks ? `, ${summary.failedTasks} failed` : "") +
-        (summary.blockedTasks ? `, ${summary.blockedTasks} blocked` : ""),
+      `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) {
-      lines.push(`Focus: TODO ${currentTask.taskId} — ${currentTask.title}`);
+      const details = taskStatusDetails(currentTask.status);
+      lines.push(`${details.label}: ${details.icon} TODO ${currentTask.taskId} — ${currentTask.title}`);
     }
   }
   if (update.workerCostTotal > 0) {
-    lines.push(`Worker spend: ${formatCost(update.workerCostTotal)}`);
+    lines.push(`Spent: ${formatCost(update.workerCostTotal)}`);
   }
   return lines.map((line) => truncateToWidth(line, 96));
 }
@@ -220,45 +208,100 @@ function renderSidebarOverlayLines(
   theme: Theme,
   width: number,
 ): string[] {
-  const safeWidth = Math.max(12, width);
-  const innerWidth = Math.max(0, safeWidth - 2);
-  const rows = renderSidebarRows(update, theme);
-  return [
-    sidebarBorder("Pi Long Task", safeWidth, theme),
-    ...rows.map((row) => sidebarRow(row, innerWidth, theme)),
-    theme.fg("borderMuted", `└${"─".repeat(innerWidth)}┘`),
-  ];
+  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): string[] {
+function limitSidebarPanelLines(lines: string[], theme: Theme, width: number, maxRows: number | undefined): string[] {
+  if (maxRows === undefined || !Number.isFinite(maxRows)) {
+    return lines;
+  }
+
+  const limit = Math.max(0, Math.floor(maxRows));
+  if (lines.length <= limit) {
+    return lines;
+  }
+  if (limit === 0) {
+    return [];
+  }
+
+  const contentWidth = Math.max(8, Math.max(28, width) - 4);
+  if (limit === 1) {
+    return [sidebarPanelRow(theme.fg("dim", "…"), contentWidth, theme)];
+  }
+
+  const visibleLines = lines.slice(0, limit - 1);
+  const omitted = lines.length - visibleLines.length;
+  visibleLines.push(sidebarPanelRow(theme.fg("dim", `… ${omitted} more`), contentWidth, theme));
+  return visibleLines;
+}
+
+function renderSidebarRows(update: CoordinatorProgressUpdate | undefined, theme: Theme, width: number): string[] {
   if (!update) {
-    return [theme.fg("muted", "Preparing long-task sidebar...")];
+    return ["", sidebarHeading("Pi Long Task", theme), "", theme.fg("muted", "Preparing long-task sidebar...")];
   }
 
   const progress = update.taskProgress;
-  const rows = [theme.fg("toolTitle", theme.bold("Task timeline")), theme.fg("dim", update.phase)];
-  if (update.workerCostTotal > 0) {
-    rows.push(theme.fg("muted", `Worker spend: ${formatCost(update.workerCostTotal)}`));
+  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)));
   }
-  rows.push("", theme.fg("muted", truncateToWidth(update.message, 72)));
 
   if (!progress || progress.tasks.length === 0) {
-    rows.push("", theme.fg("muted", "Waiting for TODO plan..."));
+    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("", progressBarLine(summary.completedTasks, summary.totalTasks, summary.completedPercent, theme));
-  rows.push(progressCountsLine(summary, theme));
+  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);
-  if (currentIndex >= 0) {
-    rows.push(theme.fg("warning", `Focus: TODO ${progress.tasks[currentIndex]?.taskId ?? "?"}`));
+  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("", theme.fg("muted", "Tasks"));
+  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;
@@ -278,7 +321,7 @@ function renderSidebarRows(update: CoordinatorProgressUpdate | undefined, theme:
 
   const subtasks = update.subtasks ?? [];
   if (subtasks.length > 0) {
-    rows.push("", theme.fg("muted", "Current status"));
+    rows.push("", sidebarHeading("Current status", theme));
     for (const subtask of subtasks.slice(0, 6)) {
       rows.push(renderSubtaskRow(subtask, theme));
     }
@@ -316,61 +359,181 @@ function renderTaskRow(
   theme: Theme,
 ): string {
   const details = taskStatusDetails(task.status);
-  const attempts = task.attempts > 0 && task.status !== "completed" ? ` · ${task.attempts}x` : "";
-  const row = `${details.icon} TODO ${task.taskId} — ${task.title}${attempts}`;
-  const styled = focused ? theme.bold(row) : row;
-  return theme.fg(details.color, styled);
+  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} ${subtask.text}`);
+  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;
-  color: "success" | "warning" | "error" | "dim" | "muted";
+  label: string;
+  color: "accent" | "success" | "warning" | "error" | "dim" | "muted";
+  textColor: "accent" | "text" | "success" | "warning" | "error" | "dim" | "muted";
 } {
   switch (status) {
     case "completed":
-      return { icon: "✓", color: "success" };
+      return { icon: "✓", label: "done", color: "success", textColor: "muted" };
     case "current":
-      return { icon: "▶", color: "warning" };
+      return { icon: "▢", label: "active", color: "accent", textColor: "text" };
     case "failed":
-      return { icon: "✗", color: "error" };
+      return { icon: "×", label: "failed", color: "error", textColor: "error" };
     case "blocked":
-      return { icon: "!", color: "warning" };
+      return { icon: "!", label: "blocked", color: "warning", textColor: "warning" };
     case "pending":
-      return { icon: "○", color: "dim" };
+      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: "✓", color: "success" };
+      return { icon: "✓", label: "done", color: "success", textColor: "muted" };
     case "in_progress":
-      return { icon: "▶", color: "warning" };
+      return { icon: "+", label: "active", color: "warning", textColor: "warning" };
     case "failed":
-      return { icon: "✗", color: "error" };
+      return { icon: "×", label: "failed", color: "error", textColor: "error" };
     case "blocked":
-      return { icon: "!", color: "warning" };
+      return { icon: "!", label: "blocked", color: "warning", textColor: "warning" };
     case "empty":
-      return { icon: "○", color: "dim" };
+      return { icon: "○", label: "queued", color: "dim", textColor: "dim" };
   }
 }
 
-function progressBarLine(completedTasks: number, totalTasks: number, percent: number, theme: Theme): string {
-  const width = 12;
-  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(
+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",
-    "-".repeat(empty),
-  )}] ${completedTasks}/${totalTasks} ${percent}%`;
+    "·",
+  )} ${progressMeterLine(progress, theme)}`;
 }
 
 function progressCountsLine(
@@ -378,30 +541,80 @@ function progressCountsLine(
   theme: Theme,
 ): string {
   return [
-    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,
+    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 sidebarBorder(title: string, width: number, theme: Theme): string {
-  const innerWidth = Math.max(0, width - 2);
-  const label = ` ${title} `;
-  const safeLabel = truncateToWidth(label, innerWidth, "");
-  const remainder = Math.max(0, innerWidth - safeLabel.length);
-  return theme.fg("borderMuted", `┌${safeLabel}${"─".repeat(remainder)}┐`);
+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 sidebarRow(text: string, width: number, theme: Theme): string {
-  return `${theme.fg("borderMuted", "│")}${truncateToWidth(text, width, "…", true)}${theme.fg("borderMuted", "│")}`;
+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 clamp(value: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, value));
+function sidebarPanelRow(text: string, width: number, theme: Theme): string {
+  return `${theme.fg("borderMuted", "│")}  ${truncateToWidth(text, width, "…", true)}`;
 }
 
 function formatCost(value: number): string {

package/src/render.ts

@@ -111,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");
@@ -215,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 {