supipowers 0.7.10 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "supipowers",
-  "version": "0.7.10",
+  "version": "0.8.0",
   "description": "OMP-native workflow extension inspired by supipowers.",
   "type": "module",
   "scripts": {
@@ -38,7 +38,9 @@
     "@oh-my-pi/pi-coding-agent": "latest",
     "@oh-my-pi/pi-tui": "latest",
     "@sinclair/typebox": "^0.34.48",
+    "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^22.0.0",
+    "better-sqlite3": "^12.8.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.0"
   },

package/src/commands/run.ts

@@ -27,6 +27,7 @@ import { buildWorktreePrompt } from "../git/worktree.js";
 import { buildBranchFinishPrompt } from "../git/branch-finish.js";
 import { detectBaseBranch } from "../git/base-branch.js";
 import type { RunManifest, AgentResult } from "../types.js";
+import { RunProgressState, activeRuns } from "../orchestrator/run-progress.js";
 
 interface ParsedRunArgs {
   profile?: string;
@@ -89,7 +90,17 @@ export function registerRunCommand(pi: ExtensionAPI): void {
             updateRun(ctx.cwd, manifest);
             manifest = null;
           } else {
-            notifyInfo(ctx, `Resuming run: ${manifest.id}`);
+            const completedBatches = manifest.batches.filter((b) => b.status === "completed").length;
+            const totalBatches = manifest.batches.length;
+            const completedTasks = manifest.batches
+              .filter((b) => b.status === "completed")
+              .reduce((sum, b) => sum + b.taskIds.length, 0);
+            const totalTasks = manifest.batches.reduce((sum, b) => sum + b.taskIds.length, 0);
+            notifyInfo(
+              ctx,
+              `Resuming run: ${manifest.id}`,
+              `${completedTasks}/${totalTasks} tasks done, ${completedBatches}/${totalBatches} batches completed`,
+            );
           }
         } else {
           // No UI — resume automatically
@@ -175,6 +186,36 @@ export function registerRunCommand(pi: ExtensionAPI): void {
       const lsp = isLspAvailable(pi.getActiveTools());
       const ctxMode = detectContextMode(pi.getActiveTools()).available;
 
+      // Create shared progress state and send inline progress message
+      const progress = new RunProgressState();
+      for (const task of plan.tasks) {
+        const deps = task.parallelism.type === "sequential" ? task.parallelism.dependsOn : [];
+        progress.addTask(task.id, task.name, deps);
+      }
+      // On resume, mark already-completed tasks
+      const existingResults = loadAllAgentResults(ctx.cwd, manifest!.id);
+      for (const result of existingResults) {
+        if (result.status === "done") {
+          progress.setStatus(result.taskId, "done");
+        } else if (result.status === "done_with_concerns") {
+          progress.setStatus(result.taskId, "done_with_concerns", result.concerns);
+        } else if (result.status === "blocked") {
+          progress.setStatus(result.taskId, "blocked", result.output);
+        }
+      }
+      activeRuns.set(manifest.id, progress);
+
+      // Send inline progress message — the registered renderer will display it
+      pi.sendMessage(
+        {
+          customType: "supi-run-progress",
+          content: [{ type: "text", text: "Running tasks..." }],
+          display: "custom",
+          details: { runId: manifest.id },
+        },
+      );
+
+      try {
       for (const batch of manifest.batches) {
         if (batch.status === "completed") continue;
 
@@ -186,6 +227,7 @@ export function registerRunCommand(pi: ExtensionAPI): void {
           `Batch ${batch.index + 1}/${manifest.batches.length}`,
           `${batch.taskIds.length} tasks`
         );
+        progress.batchLabel = `Batch ${batch.index + 1}/${manifest.batches.length}`;
 
         const batchResults: AgentResult[] = [];
         const agentPromises = batch.taskIds.map((taskId) => {
@@ -200,6 +242,7 @@ export function registerRunCommand(pi: ExtensionAPI): void {
             config,
             lspAvailable: lsp,
             contextModeAvailable: ctxMode,
+            progress,
           });
         });
 
@@ -236,6 +279,7 @@ export function registerRunCommand(pi: ExtensionAPI): void {
                 config,
                 lspAvailable: lsp,
                 contextModeAvailable: ctxMode,
+                progress,
                 previousOutput: failed.output,
                 failureReason: failed.output,
               });
@@ -267,6 +311,7 @@ export function registerRunCommand(pi: ExtensionAPI): void {
       manifest.completedAt = new Date().toISOString();
       updateRun(ctx.cwd, manifest);
 
+
       const durationSec = Math.round(runSummary.totalDuration / 1000);
       notifySummary(
         ctx,
@@ -292,6 +337,9 @@ export function registerRunCommand(pi: ExtensionAPI): void {
         );
         notifyInfo(ctx, "Run succeeded", "Follow branch finish instructions to integrate your work");
       }
+      } finally {
+        activeRuns.delete(manifest.id);
+      }
     },
   });
 }

package/src/index.ts

@@ -15,6 +15,7 @@ import { registerUpdateCommand, handleUpdate } from "./commands/update.js";
 import { registerFixPrCommand } from "./commands/fix-pr.js";
 import { loadConfig } from "./config/loader.js";
 import { registerContextModeHooks } from "./context-mode/hooks.js";
+import { registerProgressRenderer } from "./orchestrator/progress-renderer.js";
 
 // TUI-only commands — intercepted at the input level to prevent
 // message submission and "Working..." indicator
@@ -48,6 +49,9 @@ export default function supipowers(pi: ExtensionAPI): void {
   registerUpdateCommand(pi);
   registerFixPrCommand(pi);
 
+  // Register custom message renderers
+  registerProgressRenderer(pi);
+
   // Intercept TUI-only commands at the input level — this runs BEFORE
   // message submission, so no chat message appears and no "Working..." indicator
   pi.on("input", (event, ctx) => {

package/src/orchestrator/agent-grid.ts

@@ -0,0 +1,439 @@
+/**
+ * Agent Grid Widget — TUI component for live sub-agent progress visualization.
+ *
+ * Renders task cards in a flexbox-like grid that reflows based on terminal width.
+ * Each card shows: status icon, task name, current thinking, tool activity log,
+ * files changed count, and elapsed time.
+ *
+ * Cards collapse when done/blocked to make room for active cards.
+ */
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const MIN_CARD_WIDTH = 38;
+const MAX_ACTIVITY_LOG = 4;
+const ANIMATION_INTERVAL_MS = 200;
+
+// ── Types ──────────────────────────────────────────────────────────
+
+export type TaskStatus =
+  | "pending"
+  | "running"
+  | "reviewing"
+  | "done"
+  | "done_with_concerns"
+  | "blocked";
+
+export interface TaskCardState {
+  taskId: number;
+  name: string;
+  status: TaskStatus;
+  currentThinking: string;
+  activityLog: string[];
+  filesChanged: number;
+  toolCount: number;
+  startedAt: number;
+  completedAt?: number;
+  errorReason?: string;
+  concerns?: string;
+}
+
+/** Minimal TUI interface — matches what setWidget factory receives */
+interface TUI {
+  requestRender(): void;
+}
+
+/** Minimal Theme interface — matches OMP's Theme class */
+interface Theme {
+  fg(color: string, text: string): string;
+  symbol(key: string): string;
+}
+
+/** Component interface as defined by @oh-my-pi/pi-tui */
+interface Component {
+  render(width: number): string[];
+  invalidate(): void;
+  dispose?(): void;
+}
+
+// ── Status Config ──────────────────────────────────────────────────
+
+interface StatusConfig {
+  color: string;
+  icon: string;
+}
+
+const STATUS_CONFIG: Record<TaskStatus, StatusConfig> = {
+  pending:            { color: "dim",     icon: "○" },
+  running:            { color: "accent",  icon: "●" },
+  reviewing:          { color: "warning", icon: "◎" },
+  done:               { color: "success", icon: "✓" },
+  done_with_concerns: { color: "warning", icon: "⚠" },
+  blocked:            { color: "error",   icon: "✗" },
+};
+
+// ── AgentGridWidget ────────────────────────────────────────────────
+
+export class AgentGridWidget implements Component {
+  #tasks = new Map<number, TaskCardState>();
+  #tui: TUI;
+  #theme: Theme;
+  #spinnerFrame = 0;
+  #intervalId: ReturnType<typeof setInterval> | null = null;
+  #cachedLines: string[] | undefined;
+  #cachedWidth: number | undefined;
+
+  constructor(tui: TUI, theme: Theme) {
+    this.#tui = tui;
+    this.#theme = theme;
+
+    // Animate spinner + elapsed time
+    this.#intervalId = setInterval(() => {
+      this.#spinnerFrame = (this.#spinnerFrame + 1) % SPINNER_FRAMES.length;
+      // Only re-render if we have active tasks
+      const hasActive = [...this.#tasks.values()].some(
+        (t) => t.status === "running" || t.status === "reviewing",
+      );
+      if (hasActive) {
+        this.invalidate();
+        this.#tui.requestRender();
+      }
+    }, ANIMATION_INTERVAL_MS);
+  }
+
+  // ── Public API (called by dispatcher) ──────────────────────────
+
+  /** Initialize a task card */
+  addTask(taskId: number, name: string): void {
+    this.#tasks.set(taskId, {
+      taskId,
+      name,
+      status: "pending",
+      currentThinking: "",
+      activityLog: [],
+      filesChanged: 0,
+      toolCount: 0,
+      startedAt: Date.now(),
+    });
+    this.#invalidateAndRender();
+  }
+
+  /** Update task status */
+  setStatus(taskId: number, status: TaskStatus, reason?: string): void {
+    const task = this.#tasks.get(taskId);
+    if (!task) return;
+    task.status = status;
+    if (status === "blocked") task.errorReason = reason;
+    if (status === "done_with_concerns") task.concerns = reason;
+    if (status === "done" || status === "done_with_concerns" || status === "blocked") {
+      task.completedAt = Date.now();
+    }
+    this.#invalidateAndRender();
+  }
+
+  /** Update thinking preview */
+  setThinking(taskId: number, text: string): void {
+    const task = this.#tasks.get(taskId);
+    if (!task) return;
+    task.currentThinking = text;
+    this.#invalidateAndRender();
+  }
+
+  /** Add a tool call to the activity log */
+  addActivity(taskId: number, description: string): void {
+    const task = this.#tasks.get(taskId);
+    if (!task) return;
+    task.toolCount++;
+    task.activityLog.push(description);
+    if (task.activityLog.length > MAX_ACTIVITY_LOG) {
+      task.activityLog.shift();
+    }
+    this.#invalidateAndRender();
+  }
+
+  /** Increment files changed count */
+  addFileChanged(taskId: number): void {
+    const task = this.#tasks.get(taskId);
+    if (!task) return;
+    task.filesChanged++;
+    this.#invalidateAndRender();
+  }
+
+  // ── Component Interface ────────────────────────────────────────
+
+  render(width: number): string[] {
+    if (this.#cachedLines && this.#cachedWidth === width) return this.#cachedLines;
+    if (this.#tasks.size === 0) return [];
+
+    const tasks = [...this.#tasks.values()];
+    const cardWidth = this.#computeCardWidth(width);
+    const cardsPerRow = Math.max(1, Math.floor(width / cardWidth));
+
+    const lines: string[] = [];
+
+    // Render in rows
+    for (let i = 0; i < tasks.length; i += cardsPerRow) {
+      const rowTasks = tasks.slice(i, i + cardsPerRow);
+      const rowCards = rowTasks.map((t) => this.#renderCard(t, cardWidth));
+      const merged = this.#mergeCardRows(rowCards, cardWidth, width);
+      lines.push(...merged);
+    }
+
+    this.#cachedLines = lines;
+    this.#cachedWidth = width;
+    return lines;
+  }
+
+  invalidate(): void {
+    this.#cachedLines = undefined;
+    this.#cachedWidth = undefined;
+  }
+
+  dispose(): void {
+    if (this.#intervalId) {
+      clearInterval(this.#intervalId);
+      this.#intervalId = null;
+    }
+  }
+
+  // ── Private Rendering ──────────────────────────────────────────
+
+  /** Box drawing chars shorthand */
+  get #box() {
+    return {
+      tl: this.#theme.symbol("boxRound.topLeft"),
+      tr: this.#theme.symbol("boxRound.topRight"),
+      bl: this.#theme.symbol("boxRound.bottomLeft"),
+      br: this.#theme.symbol("boxRound.bottomRight"),
+      h: this.#theme.symbol("boxRound.horizontal"),
+      v: this.#theme.symbol("boxRound.vertical"),
+    };
+  }
+
+  #invalidateAndRender(): void {
+    this.invalidate();
+    this.#tui.requestRender();
+  }
+
+  #computeCardWidth(termWidth: number): number {
+    if (termWidth < MIN_CARD_WIDTH) return termWidth; // terminal too narrow, use full width
+    const maxWidth = Math.floor(termWidth / 2);
+    const cardsPerRow = Math.max(1, Math.floor(termWidth / MIN_CARD_WIDTH));
+    const computed = Math.floor(termWidth / cardsPerRow);
+    return Math.max(MIN_CARD_WIDTH, Math.min(computed, maxWidth));
+  }
+
+  #renderCard(task: TaskCardState, width: number): string[] {
+    const isCollapsed =
+      task.status === "done" ||
+      task.status === "done_with_concerns" ||
+      task.status === "blocked" ||
+      task.status === "pending";
+
+    if (isCollapsed) {
+      return this.#renderCollapsedCard(task, width);
+    }
+    return this.#renderActiveCard(task, width);
+  }
+
+  #renderCollapsedCard(task: TaskCardState, width: number): string[] {
+    const { color, icon } = STATUS_CONFIG[task.status];
+    const box = this.#box;
+    const inner = width - 4; // 2 border + 2 padding
+
+    if (task.status === "pending") {
+      const title = this.#truncate(`${icon} Task ${task.taskId}: ${task.name}`, inner);
+      return [
+        this.#theme.fg(color, `${box.tl}${box.h} ${title} ${this.#pad(box.h, inner - title.length - 1)}${box.tr}`),
+        this.#theme.fg(color, `${box.bl}${this.#pad(box.h, width - 2)}${box.br}`),
+      ];
+    }
+
+    // Done / blocked / concerns
+    let suffix = "";
+    if (task.status === "done" || task.status === "done_with_concerns") {
+      const elapsed = this.#formatElapsed(task);
+      suffix = `${task.filesChanged} files, ${elapsed}`;
+    } else if (task.status === "blocked") {
+      suffix = "BLOCKED";
+    }
+
+    const title = this.#truncate(`${icon} Task ${task.taskId}: ${task.name}`, inner - suffix.length - 4);
+    const headerContent = `${title} ── ${suffix}`;
+    const headerPad = Math.max(0, inner - this.#visibleLength(headerContent) - 1);
+
+    const lines = [
+      this.#theme.fg(color, `${box.tl}${box.h} ${headerContent}${this.#pad(box.h, headerPad)} ${box.tr}`),
+    ];
+
+    // Show error reason for blocked, concerns for done_with_concerns
+    const detail = task.status === "blocked" ? task.errorReason : task.concerns;
+    if (detail) {
+      const detailText = this.#truncate(`  ${detail}`, inner);
+      lines.push(
+        this.#theme.fg(color, box.v) +
+        ` ${detailText}${" ".repeat(Math.max(0, inner - this.#visibleLength(detailText)))} ` +
+        this.#theme.fg(color, box.v),
+      );
+    }
+
+    lines.push(
+      this.#theme.fg(color, `${box.bl}${this.#pad(box.h, width - 2)}${box.br}`),
+    );
+    return lines;
+  }
+
+  #renderActiveCard(task: TaskCardState, width: number): string[] {
+    const { color, icon } = STATUS_CONFIG[task.status];
+    const box = this.#box;
+    const inner = width - 4; // 2 border + 2 padding
+    const spinner = SPINNER_FRAMES[this.#spinnerFrame];
+
+    const lines: string[] = [];
+
+    // ── Header
+    const title = this.#truncate(`${icon} Task ${task.taskId}: ${task.name}`, inner);
+    lines.push(
+      this.#theme.fg(color, `${box.tl}${box.h} ${title} ${this.#pad(box.h, inner - this.#visibleLength(title) - 1)}${box.tr}`),
+    );
+
+    // ── Sticky thinking line
+    const thinkingText = task.currentThinking
+      ? this.#truncate(`${spinner} ${task.currentThinking}`, inner)
+      : `${spinner} Working...`;
+    lines.push(this.#line(
+      this.#theme.fg("dim", thinkingText),
+      inner,
+      color,
+    ));
+
+    // ── Separator
+    const sep = this.#pad("─", inner);
+    lines.push(this.#line(this.#theme.fg("dim", sep), inner, color));
+
+    // ── Activity log (pad to MAX_ACTIVITY_LOG lines)
+    const logLines = task.activityLog.slice(-MAX_ACTIVITY_LOG);
+    for (let i = 0; i < MAX_ACTIVITY_LOG; i++) {
+      const entry = logLines[i];
+      if (entry) {
+        const text = this.#truncate(` ${entry}`, inner);
+        // Tool entries start with action verbs (Reading, Editing, Running, etc.)
+        // Thinking entries are plain text from the agent
+        const isToolAction = /^ (?:Reading|Editing|Writing|Running|Searching|Finding|Spawning|Glob|Grep|Bash|Edit|Read|Write)/.test(entry);
+        const styled = isToolAction ? text : this.#theme.fg("dim", text);
+        lines.push(this.#line(styled, inner, color));
+      } else {
+        lines.push(this.#line("", inner, color));
+      }
+    }
+
+    // ── Empty line
+    lines.push(this.#line("", inner, color));
+
+    // ── Footer
+    const filesLabel = `${task.filesChanged} file${task.filesChanged !== 1 ? "s" : ""}`;
+    const elapsed = `⏱ ${this.#formatElapsed(task)}`;
+    const gap = Math.max(1, inner - this.#visibleLength(filesLabel) - this.#visibleLength(elapsed));
+    const footerContent = `${filesLabel}${" ".repeat(gap)}${elapsed}`;
+    lines.push(this.#line(this.#theme.fg("dim", footerContent), inner, color));
+
+    // ── Bottom border
+    lines.push(
+      this.#theme.fg(color, `${box.bl}${this.#pad(box.h, width - 2)}${box.br}`),
+    );
+
+    return lines;
+  }
+
+  /** Render a content line with colored side borders */
+  #line(content: string, inner: number, borderColor: string): string {
+    const box = this.#box;
+    const contentLen = this.#visibleLength(content);
+    const pad = Math.max(0, inner - contentLen);
+    return (
+      this.#theme.fg(borderColor, box.v) +
+      ` ${content}${" ".repeat(pad)} ` +
+      this.#theme.fg(borderColor, box.v)
+    );
+  }
+
+  /** Merge multiple card columns into rows of lines */
+  #mergeCardRows(cards: string[][], cardWidth: number, termWidth: number): string[] {
+    const maxHeight = Math.max(...cards.map((c) => c.length));
+    const gap = 1; // space between cards
+    const merged: string[] = [];
+
+    for (let row = 0; row < maxHeight; row++) {
+      let line = "";
+      for (let col = 0; col < cards.length; col++) {
+        if (col > 0) line += " ".repeat(gap);
+        const cardLine = cards[col][row] ?? " ".repeat(cardWidth);
+        line += cardLine;
+      }
+      merged.push(line);
+    }
+    return merged;
+  }
+
+  // ── Utilities ──────────────────────────────────────────────────
+
+  #truncate(text: string, maxLen: number): string {
+    if (this.#visibleLength(text) <= maxLen) return text;
+    // Walk through the string, counting only visible chars, preserving ANSI sequences
+    const ansiRegex = /\x1b\[[0-9;]*m/g;
+    let result = "";
+    let visible = 0;
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+    while ((match = ansiRegex.exec(text)) !== null) {
+      // Add visible chars before this ANSI sequence
+      const before = text.slice(lastIndex, match.index);
+      const remaining = maxLen - 1 - visible;
+      if (before.length > remaining) {
+        result += before.slice(0, remaining) + "…";
+        return result + "\x1b[0m"; // reset styling
+      }
+      result += before;
+      visible += before.length;
+      result += match[0]; // preserve ANSI sequence
+      lastIndex = match.index + match[0].length;
+    }
+    // Handle remaining text after last ANSI sequence
+    const tail = text.slice(lastIndex);
+    const remaining = maxLen - 1 - visible;
+    if (tail.length > remaining) {
+      result += tail.slice(0, remaining) + "…";
+      return result + "\x1b[0m";
+    }
+    result += tail;
+    return result;
+  }
+
+  #visibleLength(text: string): number {
+    return text.replace(/\x1b\[[0-9;]*m/g, "").length;
+  }
+
+  #pad(char: string, count: number): string {
+    return char.repeat(Math.max(0, count));
+  }
+
+  #formatElapsed(task: TaskCardState): string {
+    const end = task.completedAt ?? Date.now();
+    const sec = Math.floor((end - task.startedAt) / 1000);
+    if (sec < 60) return `${sec}s`;
+    const min = Math.floor(sec / 60);
+    return `${min}m ${sec % 60}s`;
+  }
+}
+
+// ── Factory ────────────────────────────────────────────────────────
+
+/** Create the widget factory for ctx.ui.setWidget */
+export function createAgentGridFactory(
+  onCreated: (widget: AgentGridWidget) => void,
+): (tui: TUI, theme: Theme) => AgentGridWidget {
+  return (tui: TUI, theme: Theme) => {
+    const widget = new AgentGridWidget(tui, theme);
+    onCreated(widget);
+    return widget;
+  };
+}

package/src/orchestrator/dispatcher.ts

@@ -18,6 +18,7 @@ import {
   notifyError,
   notifyInfo,
 } from "../notifications/renderer.js";
+import type { RunProgressState } from "./run-progress.js";
 
 export interface DispatchOptions {
   pi: ExtensionAPI;
@@ -30,18 +31,22 @@ export interface DispatchOptions {
   config: SupipowersConfig;
   lspAvailable: boolean;
   contextModeAvailable: boolean;
+  progress?: RunProgressState;
 }
 
 export async function dispatchAgent(
   options: DispatchOptions,
 ): Promise<AgentResult> {
-  const { pi, ctx, task, planContext, config, lspAvailable, contextModeAvailable } = options;
+  const { pi, ctx, task, planContext, config, lspAvailable, contextModeAvailable, progress } = options;
   const startTime = Date.now();
 
   const prompt = buildTaskPrompt(task, planContext, config, lspAvailable, contextModeAvailable);
 
+  // Initialize widget card if available
+  progress?.setStatus(task.id, "running");
+
   try {
-    const result = await executeSubAgent(pi, prompt, task, config);
+    const result = await executeSubAgent(pi, prompt, task, config, ctx, progress);
 
     const agentResult: AgentResult = {
       taskId: task.id,
@@ -52,28 +57,31 @@ export async function dispatchAgent(
       duration: Date.now() - startTime,
     };
 
+    // Update widget with final status
     switch (agentResult.status) {
       case "done":
+        progress?.setStatus(task.id, "done");
         notifySuccess(ctx, `Task ${task.id} completed`, task.name);
         break;
       case "done_with_concerns":
-        notifyWarning(
-          ctx,
-          `Task ${task.id} done with concerns`,
-          agentResult.concerns,
-        );
+        progress?.setStatus(task.id, "done_with_concerns", agentResult.concerns);
+        notifyWarning(ctx, `Task ${task.id} done with concerns`, agentResult.concerns);
         break;
       case "blocked":
+        progress?.setStatus(task.id, "blocked", agentResult.output);
         notifyError(ctx, `Task ${task.id} blocked`, agentResult.output);
         break;
     }
 
     return agentResult;
   } catch (error) {
+    const errorMsg = `Agent error: ${error instanceof Error ? error.message : String(error)}`;
+    progress?.setStatus(task.id, "blocked", errorMsg);
+
     const agentResult: AgentResult = {
       taskId: task.id,
       status: "blocked",
-      output: `Agent error: ${error instanceof Error ? error.message : String(error)}`,
+      output: errorMsg,
       filesChanged: [],
       duration: Date.now() - startTime,
     };
@@ -89,11 +97,41 @@ interface SubAgentResult {
   filesChanged: string[];
 }
 
+type NotifyCtx = { ui: { notify(msg: string, type?: "info" | "warning" | "error"): void } };
+
+/** Shorten a file path for display */
+function shortenPath(filePath: string): string {
+  const parts = filePath.split("/");
+  return parts.length > 3
+    ? `.../${parts.slice(-3).join("/")}`
+    : filePath;
+}
+
+/** Format a tool call for display */
+function formatToolAction(toolName: string, args?: Record<string, unknown>): string {
+  const path = args?.file_path ? shortenPath(String(args.file_path)) : "";
+  switch (toolName) {
+    case "Read": return `Reading ${path}`;
+    case "Edit": return `Editing ${path}`;
+    case "Write": return `Writing ${path}`;
+    case "Bash": {
+      const cmd = String(args?.command ?? "").slice(0, 60);
+      return `Running: ${cmd}${String(args?.command ?? "").length > 60 ? "..." : ""}`;
+    }
+    case "Grep": return `Searching for ${args?.pattern ?? "pattern"}`;
+    case "Glob": return `Finding files ${args?.pattern ?? ""}`;
+    case "Agent": return "Spawning sub-agent";
+    default: return `${toolName}${path ? ` ${path}` : ""}`;
+  }
+}
+
 async function executeSubAgent(
   pi: ExtensionAPI,
   prompt: string,
   task: PlanTask,
   config: SupipowersConfig,
+  ctx?: NotifyCtx,
+  progress?: RunProgressState,
 ): Promise<SubAgentResult> {
   const { createAgentSession } = pi.pi;
 
@@ -102,22 +140,50 @@ async function executeSubAgent(
     hasUI: false,
     taskDepth: 1,
     parentTaskPrefix: `task-${task.id}`,
+    // Prevent sub-agent from re-loading supipowers (causes recursive init error)
+    disableExtensionDiscovery: true,
+    skills: [],
+    promptTemplates: [],
+    slashCommands: [],
   });
 
-  // Track files changed by monitoring tool calls
+  // Track files changed and emit live progress
   const filesChanged = new Set<string>();
   const FILE_TOOLS = new Set(["Edit", "Write", "NotebookEdit"]);
   const pendingToolArgs = new Map<string, Record<string, unknown>>();
+  const tag = `Task ${task.id}`;
+  let lastThinkingPreview = "";
   const unsubscribe = session.subscribe((event) => {
-    if (event.type === "tool_execution_start" && FILE_TOOLS.has(event.toolName)) {
-      if (event.args?.file_path) {
-        pendingToolArgs.set(event.toolCallId, event.args as Record<string, unknown>);
+    if (event.type === "message_update") {
+      const msg = event.message as { content?: unknown } | undefined;
+      const content = extractTextContent(msg?.content);
+      const preview = content.split("\n").filter(Boolean).pop()?.slice(0, 80) ?? "";
+      if (preview && preview !== lastThinkingPreview) {
+        lastThinkingPreview = preview;
+        if (progress) {
+          progress.setActivity(task.id, preview);
+        } else if (ctx) {
+          ctx.ui.notify(`${tag}: thinking — ${preview}`, "info");
+        }
+      }
+    }
+    if (event.type === "tool_execution_start") {
+      const args = event.args as Record<string, unknown> | undefined;
+      if (FILE_TOOLS.has(event.toolName) && args?.file_path) {
+        pendingToolArgs.set(event.toolCallId, args);
+      }
+      if (progress) {
+        progress.setActivity(task.id, formatToolAction(event.toolName, args));
+        progress.incrementTools(task.id);
+      } else if (ctx) {
+        ctx.ui.notify(`${tag}: ${formatToolAction(event.toolName, args)}`, "info");
       }
     }
-    if (event.type === "tool_execution_end" && !event.isError) {
+    if (event.type === "tool_execution_end") {
       const args = pendingToolArgs.get(event.toolCallId);
-      if (args?.file_path) {
+      if (args?.file_path && !event.isError) {
         filesChanged.add(String(args.file_path));
+        progress?.incrementFiles(task.id);
       }
       pendingToolArgs.delete(event.toolCallId);
     }
@@ -132,7 +198,8 @@ async function executeSubAgent(
       .reverse()
       .find((m) => m.role === "assistant");
 
-    const output = extractTextContent(lastAssistant?.content);
+    const lastMsg = lastAssistant as { content?: unknown } | undefined;
+    const output = extractTextContent(lastMsg?.content);
     const status = parseAgentStatus(output);
 
     return {
@@ -162,15 +229,12 @@ function extractTextContent(content: unknown): string {
 }
 
 function parseAgentStatus(output: string): AgentStatus {
-  const upper = output.toUpperCase();
-  if (upper.includes("BLOCKED") || upper.includes("NEEDS_CONTEXT")) {
-    return "blocked";
-  }
-  if (upper.includes("DONE_WITH_CONCERNS")) {
-    return "done_with_concerns";
-  }
-  // "DONE" appears in both "DONE" and "DONE_WITH_CONCERNS", so check after
-  if (upper.includes("**STATUS:** DONE") || upper.includes("STATUS: DONE")) {
+  // Look for structured "**Status:** X" or "Status: X" patterns to avoid false positives
+  const statusMatch = output.match(/\*?\*?status\*?\*?:\s*(BLOCKED|NEEDS_CONTEXT|DONE_WITH_CONCERNS|DONE)/i);
+  if (statusMatch) {
+    const val = statusMatch[1].toUpperCase();
+    if (val === "BLOCKED" || val === "NEEDS_CONTEXT") return "blocked";
+    if (val === "DONE_WITH_CONCERNS") return "done_with_concerns";
     return "done";
   }
   // Default: if agent completed without explicit status, treat as done
@@ -212,6 +276,7 @@ export async function dispatchAgentWithReview(
   }
 
   // Step 2: Spec compliance review
+  options.progress?.setStatus(task.id, "reviewing");
   for (let attempt = 0; attempt <= maxReviewRetries; attempt++) {
     const specReview = await dispatchSpecReview(
       pi,
@@ -255,6 +320,7 @@ export async function dispatchAgentWithReview(
   }
 
   // Step 3: Code quality review
+  options.progress?.setStatus(task.id, "reviewing");
   for (let attempt = 0; attempt <= maxReviewRetries; attempt++) {
     const qualityReview = await dispatchQualityReview(
       pi,
@@ -357,7 +423,7 @@ async function dispatchQualityReview(
 export async function dispatchFixAgent(
   options: DispatchOptions & { previousOutput: string; failureReason: string },
 ): Promise<AgentResult> {
-  const { pi, ctx, task, config, lspAvailable, contextModeAvailable, previousOutput, failureReason } =
+  const { pi, ctx, task, config, lspAvailable, contextModeAvailable, previousOutput, failureReason, progress } =
     options;
   const startTime = Date.now();
 
@@ -369,8 +435,10 @@ export async function dispatchFixAgent(
     contextModeAvailable,
   );
 
+  progress?.setStatus(task.id, "running");
+
   try {
-    const result = await executeSubAgent(pi, prompt, task, config);
+    const result = await executeSubAgent(pi, prompt, task, config, ctx, progress);
     return {
       taskId: task.id,
       status: result.status,

package/src/orchestrator/progress-renderer.ts

@@ -0,0 +1,180 @@
+// src/orchestrator/progress-renderer.ts
+import type { TaskStatus } from "./agent-grid.js";
+import { activeRuns, type TaskProgress } from "./run-progress.js";
+
+// ── Types ──────────────────────────────────────────────────────────
+
+interface Theme {
+  fg(color: string, text: string): string;
+  bold(text: string): string;
+  sep: { dot: string };
+  tree: {
+    branch: string;
+    last: string;
+    vertical: string;
+    hook: string;
+  };
+}
+
+interface Component {
+  render(width: number): string[];
+  invalidate(): void;
+}
+
+interface CustomMessage<T> {
+  details: T;
+}
+
+interface RunProgressDetails {
+  runId: string;
+}
+
+type MessageRenderer<T> = (
+  message: CustomMessage<T>,
+  options: { expanded: boolean },
+  theme: Theme,
+) => Component | undefined;
+
+interface ExtensionAPI {
+  registerMessageRenderer<T>(customType: string, renderer: MessageRenderer<T>): void;
+}
+
+// ── Constants ──────────────────────────────────────────────────────
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+interface StatusConfig {
+  color: string;
+  icon: (frame: number) => string;
+}
+
+const STATUS_CONFIG: Record<TaskStatus, StatusConfig> = {
+  pending:            { color: "dim",     icon: () => "○" },
+  running:            { color: "accent",  icon: (f) => SPINNER_FRAMES[f % SPINNER_FRAMES.length] },
+  reviewing:          { color: "warning", icon: () => "◎" },
+  done:               { color: "success", icon: () => "✓" },
+  done_with_concerns: { color: "warning", icon: () => "⚠" },
+  blocked:            { color: "error",   icon: () => "✗" },
+};
+
+// ── Helper: format elapsed time ────────────────────────────────────
+
+function formatElapsed(startedAt: number, completedAt?: number): string {
+  const ms = (completedAt ?? Date.now()) - startedAt;
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  const rem = s % 60;
+  return rem > 0 ? `${m}m${rem}s` : `${m}m`;
+}
+
+// ── Inline Progress Component ──────────────────────────────────────
+
+class InlineProgressComponent implements Component {
+  #runId: string;
+  #theme: Theme;
+  #spinnerFrame = 0;
+
+  constructor(runId: string, theme: Theme) {
+    this.#runId = runId;
+    this.#theme = theme;
+  }
+
+  render(_width: number): string[] {
+    // Advance spinner on every render call (called each repaint)
+    this.#spinnerFrame = (this.#spinnerFrame + 1) % SPINNER_FRAMES.length;
+
+    const state = activeRuns.get(this.#runId);
+    if (!state || state.tasks.size === 0) return [];
+
+    const tasks = [...state.tasks.values()];
+    const lines: string[] = [];
+    const tree = this.#theme.tree;
+    const sep = this.#theme.sep.dot;
+
+    tasks.forEach((task, idx) => {
+      const isLast = idx === tasks.length - 1;
+      const prefix = isLast ? tree.last : tree.branch;
+      const cfg = STATUS_CONFIG[task.status];
+      const icon = this.#theme.fg(cfg.color, cfg.icon(this.#spinnerFrame));
+      const taskLabel = this.#theme.fg(cfg.color, `T${task.taskId}`);
+      const name = this.#theme.bold(task.name);
+
+      const parts: string[] = [`${prefix} ${icon} ${taskLabel} ${sep} ${name}`];
+      this.#appendTaskMeta(task, parts, sep);
+
+      // Show dependencies for pending tasks
+      if (task.status === "pending" && task.dependsOn.length > 0) {
+        const depLabels = task.dependsOn.map((d) => `T${d}`).join(", ");
+        parts.push(` ${sep} `);
+        parts.push(this.#theme.fg("dim", `Depends on ${depLabels}`));
+      }
+
+      lines.push(parts.join(""));
+    });
+
+    // Summary line
+    const summary = state.summary;
+    const summaryParts: string[] = [];
+    if (state.batchLabel) summaryParts.push(this.#theme.fg("muted", state.batchLabel));
+    if (summary.done > 0)    summaryParts.push(this.#theme.fg("success", `${summary.done} done`));
+    if (summary.running > 0) summaryParts.push(this.#theme.fg("accent",  `${summary.running} running`));
+    if (summary.pending > 0) summaryParts.push(this.#theme.fg("dim",     `${summary.pending} pending`));
+    if (summary.blocked > 0) summaryParts.push(this.#theme.fg("error",   `${summary.blocked} blocked`));
+
+    if (summaryParts.length > 0) {
+      const indent = `  `; // align under tree
+      lines.push(`${indent}${summaryParts.join(` ${sep} `)}`);
+    }
+
+    return lines;
+  }
+
+  invalidate(): void {
+    // No cache to bust — we render fresh each time
+  }
+
+  // ── Private ────────────────────────────────────────────────────
+
+  #appendTaskMeta(task: TaskProgress, parts: string[], sep: string): void {
+    const isActive = task.status === "running" || task.status === "reviewing";
+    const isDone =
+      task.status === "done" ||
+      task.status === "done_with_concerns" ||
+      task.status === "blocked";
+
+    if (task.toolCount > 0) {
+      parts.push(` ${sep} `);
+      parts.push(this.#theme.fg("muted", `${task.toolCount} tools`));
+    }
+
+    if (isDone && task.filesChanged > 0) {
+      parts.push(` ${sep} `);
+      parts.push(this.#theme.fg("muted", `${task.filesChanged} files`));
+    }
+
+    if (isDone) {
+      const elapsed = formatElapsed(task.startedAt, task.completedAt);
+      parts.push(` ${sep} `);
+      parts.push(this.#theme.fg("muted", elapsed));
+    }
+
+    if (isActive && task.currentActivity) {
+      parts.push(` ${sep} `);
+      parts.push(this.#theme.fg("dim", task.currentActivity));
+    }
+  }
+}
+
+// ── Registration ───────────────────────────────────────────────────
+
+export function registerProgressRenderer(pi: ExtensionAPI): void {
+  pi.registerMessageRenderer<RunProgressDetails>(
+    "supi-run-progress",
+    (message, _options, theme) => {
+      const { runId } = message.details;
+      if (!runId) return undefined;
+      return new InlineProgressComponent(runId, theme);
+    },
+  );
+}

package/src/orchestrator/run-progress.ts

@@ -0,0 +1,78 @@
+// src/orchestrator/run-progress.ts
+import type { TaskStatus } from "./agent-grid.js";
+
+export interface TaskProgress {
+  taskId: number;
+  name: string;
+  status: TaskStatus;
+  currentActivity: string;
+  toolCount: number;
+  filesChanged: number;
+  startedAt: number;
+  completedAt?: number;
+  errorReason?: string;
+  concerns?: string;
+  dependsOn: number[];
+}
+
+/** Shared state store for a single run — written by dispatcher, read by renderer */
+export class RunProgressState {
+  readonly tasks = new Map<number, TaskProgress>();
+  batchLabel = "";
+
+  addTask(taskId: number, name: string, dependsOn: number[] = []): void {
+    this.tasks.set(taskId, {
+      taskId,
+      name,
+      status: "pending",
+      currentActivity: "",
+      toolCount: 0,
+      filesChanged: 0,
+      startedAt: Date.now(),
+      dependsOn,
+    });
+  }
+
+  setStatus(taskId: number, status: TaskStatus, reason?: string): void {
+    const task = this.tasks.get(taskId);
+    if (!task) return;
+    task.status = status;
+    if (status === "blocked") task.errorReason = reason;
+    if (status === "done_with_concerns") task.concerns = reason;
+    if (status === "done" || status === "done_with_concerns" || status === "blocked") {
+      task.completedAt = Date.now();
+    }
+  }
+
+  setActivity(taskId: number, activity: string): void {
+    const task = this.tasks.get(taskId);
+    if (!task) return;
+    task.currentActivity = activity;
+  }
+
+  incrementTools(taskId: number): void {
+    const task = this.tasks.get(taskId);
+    if (!task) return;
+    task.toolCount++;
+  }
+
+  incrementFiles(taskId: number): void {
+    const task = this.tasks.get(taskId);
+    if (!task) return;
+    task.filesChanged++;
+  }
+
+  get summary() {
+    const all = [...this.tasks.values()];
+    return {
+      total: all.length,
+      done: all.filter((t) => t.status === "done" || t.status === "done_with_concerns").length,
+      running: all.filter((t) => t.status === "running" || t.status === "reviewing").length,
+      blocked: all.filter((t) => t.status === "blocked").length,
+      pending: all.filter((t) => t.status === "pending").length,
+    };
+  }
+}
+
+/** Module-level store: runId → state. Renderer reads from here. */
+export const activeRuns = new Map<string, RunProgressState>();