@tt-a1i/openpi 0.3.1 → 0.4.0

package/extensions/workflows/dashboard.ts

@@ -5,8 +5,8 @@
  *   name                                             5/5 agents · 31m18s · done
  *   description
  *   ╭ Phases ────────────╮ ╭ Gather · 3 agents ──────────────────────────────╮
- *   │ ❯ ■ Gather     3/3 │ │ ■ CodeRabbit feedback   gpt-5 · 7%/372k  5m37s│
- *   │   ■ Verify     1/1 │ │ ■ Other bot feedback    gpt-5 · 9%/372k  4m43s│
+ *   │ ❯ ✓ Gather     3/3 │ │ ✓ CodeRabbit feedback   gpt-5 · 7%/372k  5m37s│
+ *   │   ⠿ Verify     1/1 │ │ ⠿ Other bot feedback    gpt-5 · 9%/372k  4m43s│
  *   ╰────────────────────╯ ╰─────────────────────────────────────────────────╯
  *   up/down select · right enter · left back · s save report
  */
@@ -14,51 +14,59 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
 import {
-  getAgentDir,
   type ExtensionContext,
+  getAgentDir,
   type KeybindingsManager,
 } from "@earendil-works/pi-coding-agent";
 import {
   Key,
   matchesKey,
+  type TUI,
   truncateToWidth,
-  visibleWidth,
   wrapTextWithAnsi,
-  type TUI,
 } from "@earendil-works/pi-tui";
+import { contextPercent } from "../shared/context-utilization.ts";
+import { fitNavigationSides } from "../shared/below-editor-navigation.ts";
+import {
+  panelFrame,
+  type ScreenHint,
+  screenTitleLine,
+  hintLine as sharedHintLine,
+} from "../shared/screen-chrome.ts";
+import { SPINNER_INTERVAL_MS, spinnerFrame } from "../shared/spinner.ts";
+import { sanitizeTerminalText } from "../shared/terminal-text.ts";
 import { isAcceptanceLedger } from "./acceptance.ts";
+import { projectWorkflowGraph } from "./graph-projection.ts";
+import {
+  classifyInterruptedInvocation,
+  decodeInvocationRecord,
+} from "./invocation-ledger.ts";
 import {
+  type AgentRecord,
+  type AgentUsage,
   agentContext,
+  aggregateUsage,
   countStates,
   formatElapsed,
   formatUsage,
-  aggregateUsage,
   isWorkflowRunId,
   MAX_LOG_TEXT,
+  type PhaseGroup,
   phaseGroups,
-  resultJson,
   resolveWorkflowRunTarget,
+  resultJson,
   sanitizeLine,
   shortenHome,
-  stateSquare,
+  stateGlyph,
   statusColor,
+  statusGlyph,
   statusWord,
-  SQUARE,
   type Theme,
-  type AgentRecord,
-  type AgentUsage,
-  type PhaseGroup,
   type TranscriptEntry,
   type WorkflowDetails,
   type WorkflowLogEntry,
   workflowGraphRecords,
 } from "./model.ts";
-import { sanitizeTerminalText } from "../shared/terminal-text.ts";
-import { projectWorkflowGraph } from "./graph-projection.ts";
-import {
-  classifyInterruptedInvocation,
-  decodeInvocationRecord,
-} from "./invocation-ledger.ts";
 import { writeFileAtomic } from "./serialization.ts";
 
 const NOTICE_TTL_MS = 4000;
@@ -80,6 +88,80 @@ function runsDir(): string {
   return path.join(getAgentDir(), "workflows");
 }
 
+/** Every persisted run id on disk; empty when no runs directory exists. */
+export function listPersistedRunIds(): string[] {
+  try {
+    return fs.readdirSync(runsDir()).filter(isWorkflowRunId);
+  } catch {
+    // No runs yet.
+  }
+  return [];
+}
+
+/** Hydrate the result/transcript side artifacts referenced by workflow.json. */
+function hydrateRunArtifacts(runId: string, details: WorkflowDetails) {
+  const runDir = path.join(runsDir(), runId);
+  if (details.resultArtifact) {
+    try {
+      details.result = JSON.parse(
+        fs.readFileSync(
+          path.join(runDir, path.basename(details.resultArtifact)),
+          "utf8",
+        ),
+      );
+    } catch {
+      // Keep the compact compatibility marker from workflow.json.
+    }
+  }
+  if (details.transcriptArtifact) {
+    try {
+      const transcripts = JSON.parse(
+        fs.readFileSync(
+          path.join(runDir, path.basename(details.transcriptArtifact)),
+          "utf8",
+        ),
+      ) as Record<string, unknown>;
+      for (const agent of details.agents) {
+        agent.transcript = normalizeTranscript(
+          transcripts[String(agent.index)],
+        );
+      }
+    } catch {
+      // Older or partially written artifacts simply lack transcripts.
+    }
+  }
+}
+
+export interface ReadPersistedRunOptions {
+  /** Hydrate result and transcript side artifacts referenced by workflow.json. */
+  hydrateArtifacts?: boolean;
+}
+
+/**
+ * The single read entry for a persisted workflow.json: parse, normalize
+ * (including runs written by older tooling), and optionally hydrate the side
+ * artifacts. Unreadable or invalid runs read as undefined. Stale "running"
+ * reconciliation stays with callers so selection filters can run on the
+ * recorded timestamps first (`recoverStaleWorkflowDetails`).
+ */
+export function readPersistedWorkflowDetails(
+  runId: string,
+  options: ReadPersistedRunOptions = {},
+): WorkflowDetails | undefined {
+  let details: WorkflowDetails | undefined;
+  try {
+    const raw: unknown = JSON.parse(
+      fs.readFileSync(path.join(runsDir(), runId, "workflow.json"), "utf8"),
+    );
+    details = normalizePersistedWorkflowDetails(runId, raw);
+  } catch {
+    return undefined;
+  }
+  if (!details) return undefined;
+  if (options.hydrateArtifacts) hydrateRunArtifacts(runId, details);
+  return details;
+}
+
 function isWorktreeCleanup(
   value: unknown,
 ): value is NonNullable<AgentRecord["worktreeCleanup"]> {
@@ -117,6 +199,45 @@ function normalizeUsage(value: unknown): AgentUsage {
   };
 }
 
+function normalizeDelivery(value: unknown): WorkflowDetails["delivery"] {
+  if (!value || typeof value !== "object") return undefined;
+  const record = value as Record<string, unknown>;
+  const state = record.state;
+  if (
+    state !== "none" &&
+    state !== "held-for-inline" &&
+    state !== "pending" &&
+    state !== "delivered" &&
+    state !== "consumed-inline"
+  ) {
+    return undefined;
+  }
+  if (typeof record.id !== "string" || record.id.length === 0) return undefined;
+  const attempts =
+    typeof record.attempts === "number" &&
+    Number.isSafeInteger(record.attempts) &&
+    record.attempts >= 0
+      ? record.attempts
+      : 0;
+  const updatedAt =
+    typeof record.updatedAt === "number" && Number.isFinite(record.updatedAt)
+      ? record.updatedAt
+      : 0;
+  return {
+    id: sanitizeLine(record.id, 256),
+    state,
+    attempts,
+    updatedAt,
+    ...(typeof record.deliveredAt === "number" &&
+    Number.isFinite(record.deliveredAt)
+      ? { deliveredAt: record.deliveredAt }
+      : {}),
+    ...(typeof record.lastError === "string"
+      ? { lastError: sanitizeLine(record.lastError, 2_000) }
+      : {}),
+  };
+}
+
 function normalizeTranscript(value: unknown): TranscriptEntry[] {
   if (!Array.isArray(value)) return [];
   const transcript: TranscriptEntry[] = [];
@@ -166,9 +287,11 @@ export function normalizePersistedWorkflowDetails(
     const state =
       a.state === "error" || a.state === "failed"
         ? "error"
-        : a.state === "running"
-          ? "running"
-          : "done";
+        : a.state === "uncertain"
+          ? "uncertain"
+          : a.state === "running"
+            ? "running"
+            : "done";
     const index = typeof a.index === "number" ? a.index : agents.length + 1;
     const decodedInvocation = decodeInvocationRecord(a.invocation);
     const invocation =
@@ -205,6 +328,11 @@ export function normalizePersistedWorkflowDetails(
       ...(typeof a.resultRef === "string" && a.resultRef
         ? { resultRef: sanitizeLine(a.resultRef, 256) }
         : {}),
+      ...(typeof a.resultArtifact === "string" &&
+      a.resultArtifact.startsWith("agent-results/") &&
+      !a.resultArtifact.includes("..")
+        ? { resultArtifact: sanitizeLine(a.resultArtifact, 256) }
+        : {}),
       label:
         typeof a.label === "string"
           ? sanitizeLine(a.label, 160) || `agent-${index}`
@@ -285,7 +413,8 @@ export function normalizePersistedWorkflowDetails(
   const status =
     record.status === "running" ||
     record.status === "failed" ||
-    record.status === "aborted"
+    record.status === "aborted" ||
+    record.status === "uncertain"
       ? record.status
       : "completed";
 
@@ -306,6 +435,7 @@ export function normalizePersistedWorkflowDetails(
           ? sanitizeLine(meta.description, 2_000) || undefined
           : undefined,
     background: record.background === true,
+    delivery: normalizeDelivery(record.delivery),
     status,
     startedAt,
     finishedAt:
@@ -351,13 +481,36 @@ export function recoverStaleWorkflowDetails(
   recoveredAt = Date.now(),
 ): WorkflowDetails {
   if (details.status !== "running") return details;
-  details.status = "aborted";
+  details.status = "uncertain";
   details.finishedAt = details.finishedAt ?? recoveredAt;
-  details.error = details.error ?? "Recovered stale run that was not active";
+  details.error =
+    details.error ??
+    "Workflow owner was lost; completion and external side effects are uncertain";
+  if (!details.delivery) {
+    details.delivery = {
+      id: `workflow:${details.runId}`,
+      state: "pending",
+      attempts: 0,
+      updatedAt: recoveredAt,
+      lastError: "Migrated a pre-delivery run after its owner disappeared",
+    };
+  } else if (
+    details.delivery.state !== "delivered" &&
+    details.delivery.state !== "consumed-inline"
+  ) {
+    details.delivery = {
+      ...details.delivery,
+      state: "pending",
+      updatedAt: recoveredAt,
+      lastError: "Recovered after the workflow owner process ended",
+    };
+  }
   for (const agent of details.agents) {
     if (agent.state !== "running") continue;
-    agent.state = "error";
-    agent.error = agent.error ?? "Run ended before this agent settled";
+    agent.state = "uncertain";
+    agent.error =
+      agent.error ??
+      "Workflow owner was lost before this agent produced terminal evidence";
     agent.finishedAt = details.finishedAt;
   }
   details.graph = projectWorkflowGraph(workflowGraphRecords(details.agents));
@@ -389,69 +542,26 @@ export function loadRunEntries(
   /** Hide runs untouched by the current request; live runs always show. */
   startedSince = 0,
 ): RunEntry[] {
-  let names: string[] = [];
-  try {
-    names = fs.readdirSync(runsDir()).filter(isWorkflowRunId);
-  } catch {
-    // No runs yet.
-  }
   const entries: RunEntry[] = [];
-  for (const runId of names) {
+  for (const runId of listPersistedRunIds()) {
     const live = active.get(runId);
     if (live) {
       entries.push({ runId, details: live, live: true });
       continue;
     }
-    try {
-      const raw = JSON.parse(
-        fs.readFileSync(path.join(runsDir(), runId, "workflow.json"), "utf8"),
-      );
-      const details = normalizePersistedWorkflowDetails(runId, raw);
-      const touchedAt = Math.max(
-        details?.startedAt ?? 0,
-        details?.finishedAt ?? 0,
-      );
-      if (
-        details &&
-        touchedAt >= startedSince &&
-        (details.sessionId === sessionId || referencedRunIds.has(runId))
-      ) {
-        const runDir = path.join(runsDir(), runId);
-        if (details.resultArtifact) {
-          try {
-            details.result = JSON.parse(
-              fs.readFileSync(
-                path.join(runDir, path.basename(details.resultArtifact)),
-                "utf8",
-              ),
-            );
-          } catch {
-            // Keep the compact compatibility marker from workflow.json.
-          }
-        }
-        if (details.transcriptArtifact) {
-          try {
-            const transcripts = JSON.parse(
-              fs.readFileSync(
-                path.join(runDir, path.basename(details.transcriptArtifact)),
-                "utf8",
-              ),
-            ) as Record<string, unknown>;
-            for (const agent of details.agents) {
-              agent.transcript = normalizeTranscript(
-                transcripts[String(agent.index)],
-              );
-            }
-          } catch {
-            // Older or partially written artifacts simply lack transcripts.
-          }
-        }
-        recoverStaleWorkflowDetails(details);
-        entries.push({ runId, details, live: false });
-      }
-    } catch {
-      // Skip unreadable runs.
+    const details = readPersistedWorkflowDetails(runId, {
+      hydrateArtifacts: true,
+    });
+    if (!details) continue;
+    const touchedAt = Math.max(details.startedAt, details.finishedAt ?? 0);
+    if (
+      touchedAt < startedSince ||
+      (details.sessionId !== sessionId && !referencedRunIds.has(runId))
+    ) {
+      continue;
     }
+    recoverStaleWorkflowDetails(details);
+    entries.push({ runId, details, live: false });
   }
   return entries.sort((a, b) => b.details.startedAt - a.details.startedAt);
 }
@@ -472,13 +582,13 @@ export function workflowGraphSummary(
 }
 
 export function buildWorkflowReport(details: WorkflowDetails): string {
-  const { done, failed } = countStates(details);
+  const { done, failed, uncertain } = countStates(details);
   const lines: string[] = [
     `# Workflow ${details.name ?? details.runId}`,
     "",
     `- Run: ${details.runId}`,
     `- Status: ${statusWord(details.status)}`,
-    `- Agents: ${done}/${details.agents.length} ok${failed ? `, ${failed} failed` : ""}`,
+    `- Agents: ${done}/${details.agents.length} ok${failed ? `, ${failed} failed` : ""}${uncertain ? `, ${uncertain} uncertain` : ""}`,
     `- Elapsed: ${formatElapsed(details.startedAt, details.finishedAt)}`,
   ];
   const totals = formatUsage(aggregateUsage(details.agents));
@@ -498,7 +608,9 @@ export function buildWorkflowReport(details: WorkflowDetails): string {
           ? "ok"
           : agent.state === "error"
             ? "FAILED"
-            : "running";
+            : agent.state === "uncertain"
+              ? "UNCERTAIN"
+              : "running";
       const stats = [
         agent.model,
         agentContext(agent),
@@ -633,7 +745,7 @@ export class WorkflowDashboard {
         this.refresh();
         this.tui.requestRender();
       }
-    }, 500);
+    }, SPINNER_INTERVAL_MS);
   }
 
   dispose() {
@@ -869,17 +981,6 @@ export class WorkflowDashboard {
     return lines.map((line) => truncateToWidth(line, width, ""));
   }
 
-  /** Compose `left ... right` within `width`, truncating left when needed. */
-  private split(left: string, right: string, width: number): string {
-    const rightWidth = visibleWidth(right);
-    let text = left;
-    if (visibleWidth(text) + rightWidth + 1 > width) {
-      text = truncateToWidth(text, Math.max(0, width - rightWidth - 2), "…");
-    }
-    const pad = Math.max(1, width - visibleWidth(text) - rightWidth);
-    return text + " ".repeat(pad) + right;
-  }
-
   /** Bordered panel with a title in the top border, padded to exact height. */
   private panel(
     title: string,
@@ -887,23 +988,7 @@ export class WorkflowDashboard {
     width: number,
     height: number,
   ): string[] {
-    const theme = this.theme;
-    const inner = Math.max(0, width - 2);
-    const border = (s: string) => theme.fg("borderMuted", s);
-    const titleText = truncateToWidth(` ${title} `, Math.max(0, inner - 2));
-    const dashes = Math.max(0, inner - visibleWidth(titleText) - 1);
-    const lines: string[] = [
-      border("╭─") + titleText + border("─".repeat(dashes) + "╮"),
-    ];
-    const bodyHeight = Math.max(0, height - 2);
-    for (let i = 0; i < bodyHeight; i++) {
-      const row = rows[i] ?? "";
-      const clipped = truncateToWidth(row, inner, "…");
-      const pad = Math.max(0, inner - visibleWidth(clipped));
-      lines.push(border("│") + clipped + " ".repeat(pad) + border("│"));
-    }
-    lines.push(border("╰" + "─".repeat(inner) + "╯"));
-    return lines;
+    return panelFrame(this.theme, { label: title, rows, width, height });
   }
 
   /** Scroll window keeping `selected` visible. */
@@ -924,25 +1009,21 @@ export class WorkflowDashboard {
     return this.keybindings.getKeys(binding).join("/") || "unbound";
   }
 
-  private hintLine(hint: string, width: number): string {
-    const theme = this.theme;
-    if (this.notice)
-      return truncateToWidth(theme.fg("accent", ` ${this.notice}`), width);
-    return truncateToWidth(theme.fg("dim", ` ${hint}`), width);
+  private hintLine(hints: readonly ScreenHint[], width: number): string {
+    return sharedHintLine(this.theme, hints, width, this.notice);
   }
 
   private renderList(width: number, height: number): string[] {
     const theme = this.theme;
     const lines: string[] = [];
-    const header = this.split(
-      " " + theme.bold(theme.fg("accent", "Workflows")),
-      theme.fg(
-        "dim",
-        `${this.entries.length} run${this.entries.length === 1 ? "" : "s"} `,
+    lines.push(
+      screenTitleLine(
+        theme,
+        "Workflows",
+        `${this.entries.length} run${this.entries.length === 1 ? "" : "s"}`,
+        width,
       ),
-      width,
     );
-    lines.push(header);
 
     const panelHeight = height - 2;
     const bodyHeight = Math.max(0, panelHeight - 2);
@@ -957,7 +1038,7 @@ export class WorkflowDashboard {
         ),
       );
       lines.push(
-        this.hintLine(`${this.keys("tui.select.cancel")} close`, width),
+        this.hintLine([[this.keys("tui.select.cancel"), "close"]], width),
       );
       return lines;
     }
@@ -976,22 +1057,30 @@ export class WorkflowDashboard {
       const label = selected
         ? theme.fg("accent", name)
         : theme.fg("text", name);
-      const { done, failed } = countStates(d);
+      const { done, failed, uncertain } = countStates(d);
       const settled = done + failed;
       const right =
         theme.fg(
           "dim",
-          `${settled}/${d.agents.length} agents · ${formatElapsed(d.startedAt, d.finishedAt)} · `,
+          `${settled}/${d.agents.length} agents${uncertain ? ` · ${uncertain} uncertain` : ""} · ${formatElapsed(d.startedAt, d.finishedAt)} · `,
         ) +
         theme.fg(statusColor(d.status), statusWord(d.status)) +
         " ";
-      const left = ` ${marker} ${statusSquareFor(d, theme)} ${label} ${theme.fg("dim", d.runId)}`;
-      return this.split(left, right, width - 2);
+      const left = ` ${marker} ${statusGlyph(d.status, theme, Date.now())} ${label} ${theme.fg("dim", d.runId)}`;
+      return fitNavigationSides(left, right, width - 2);
     });
     lines.push(...this.panel("Runs", rows, width, panelHeight));
     lines.push(
       this.hintLine(
-        `${this.keys("tui.select.up")}/${this.keys("tui.select.down")} select · ${this.keys("tui.select.confirm")} open · x stop · ${this.keys("tui.select.cancel")} close`,
+        [
+          [
+            `${this.keys("tui.select.up")}/${this.keys("tui.select.down")}`,
+            "select",
+          ],
+          [this.keys("tui.select.confirm"), "open"],
+          ["x", "stop"],
+          [this.keys("tui.select.cancel"), "close"],
+        ],
         width,
       ),
     );
@@ -1006,28 +1095,37 @@ export class WorkflowDashboard {
     const theme = this.theme;
     const lines: string[] = [];
 
-    const { done, failed } = countStates(d);
+    const { done, failed, uncertain } = countStates(d);
     const settled = done + failed;
+    // Same language as the transcript card: the glyph carries the state, the
+    // status word only shows for terminal states.
     const right =
       theme.fg(
         "dim",
-        `${settled}/${d.agents.length} agents · ${formatElapsed(d.startedAt, d.finishedAt)} · `,
+        `${settled}/${d.agents.length} agents${uncertain ? ` · ${uncertain} uncertain` : ""} · ${formatElapsed(d.startedAt, d.finishedAt)}`,
       ) +
-      theme.fg(statusColor(d.status), statusWord(d.status)) +
-      " ";
+      (d.status === "running"
+        ? " "
+        : theme.fg("dim", " · ") +
+          theme.fg(statusColor(d.status), statusWord(d.status)) +
+          " ");
     lines.push(
-      this.split(
-        " " + theme.bold(theme.fg("accent", d.name ?? d.runId)),
+      fitNavigationSides(
+        ` ${statusGlyph(d.status, theme, Date.now())} ${theme.bold(theme.fg("accent", d.name ?? d.runId))}`,
         right,
         width,
       ),
     );
     const totals = formatUsage(aggregateUsage(d.agents));
-    const graphSummary = d.graph ? workflowGraphSummary(d.graph) : undefined;
+    // A graph with no edges is a flat swarm — "N nodes · 0 edges" is noise.
+    const graphSummary =
+      d.graph && d.graph.edges.length > 0
+        ? workflowGraphSummary(d.graph)
+        : undefined;
     const subRight = [graphSummary, totals].filter(Boolean).join(" · ");
     const subLeft = " " + theme.fg("muted", d.description ?? d.runId);
     lines.push(
-      this.split(
+      fitNavigationSides(
         subLeft,
         subRight ? theme.fg("dim", `${subRight} `) : " ",
         width,
@@ -1064,7 +1162,7 @@ export class WorkflowDashboard {
       const groupDone = group.agents.filter(
         (a) => a.state !== "running",
       ).length;
-      const square = groupSquare(group, theme);
+      const square = groupGlyph(group, theme);
       const title =
         selected && this.detailFocus === "phases"
           ? theme.fg("accent", group.title)
@@ -1073,7 +1171,11 @@ export class WorkflowDashboard {
         group.agents.length > 0
           ? theme.fg("dim", `${groupDone}/${group.agents.length} `)
           : theme.fg("dim", "- ");
-      return this.split(` ${marker} ${square} ${title}`, counts, sidebarInner);
+      return fitNavigationSides(
+        ` ${marker} ${square} ${title}`,
+        counts,
+        sidebarInner,
+      );
     });
 
     // Right: agents in the selected phase.
@@ -1085,6 +1187,10 @@ export class WorkflowDashboard {
         0,
         ...selectedGroup.agents.map((a) => a.label.length),
       );
+      const models = new Set(
+        selectedGroup.agents.map((a) => a.model).filter(Boolean),
+      );
+      const mixedModels = models.size > 1;
       const agentWindow = this.windowed(
         selectedGroup.agents,
         this.agentIndex,
@@ -1097,9 +1203,18 @@ export class WorkflowDashboard {
           selected && this.detailFocus === "agents"
             ? theme.fg("accent", "❯")
             : " ";
+        // The model repeats on every row when the run is homogeneous; only
+        // mixed fleets earn a per-row model. Context occupancy matters while
+        // an agent runs; once settled, its cost is the elapsed on the right.
+        const percent = contextPercent({
+          tokens: agent.usage.contextTokens,
+          contextWindow: agent.contextWindow,
+        });
         const stats = [
-          agent.model,
-          agentContext(agent),
+          mixedModels ? agent.model : undefined,
+          agent.state === "running" && percent !== undefined
+            ? `${percent}%`
+            : undefined,
           agent.acceptance
             ? `acceptance:${agent.acceptance.status}`
             : undefined,
@@ -1110,16 +1225,16 @@ export class WorkflowDashboard {
           selected && this.detailFocus === "agents"
             ? theme.fg("accent", agent.label.padEnd(Math.min(maxLabel, 40)))
             : theme.fg("text", agent.label.padEnd(Math.min(maxLabel, 40)));
-        const left = ` ${marker} ${stateSquare(agent.state, theme)} ${label}  ${theme.fg("dim", stats)}`;
+        const left = ` ${marker} ${stateGlyph(agent.state, theme, Date.now())} ${label}${stats ? `  ${theme.fg("dim", stats)}` : ""}`;
         const right = theme.fg(
           "dim",
           `${formatElapsed(agent.startedAt, agent.finishedAt)} `,
         );
-        agentRows.push(this.split(left, right, agentsInner));
+        agentRows.push(fitNavigationSides(left, right, agentsInner));
         if (agent.error) {
           agentRows.push(
             truncateToWidth(
-              `       ${theme.fg("error", sanitizeLine(agent.error, 2_000))}`,
+              `       ${theme.fg("error", displayError(agent.error))}`,
               agentsInner,
               "…",
             ),
@@ -1170,11 +1285,32 @@ export class WorkflowDashboard {
       );
     }
 
-    const hint =
+    const hints: ScreenHint[] =
       this.detailFocus === "phases"
-        ? `j/k select phase · l/${this.keys("tui.editor.cursorRight")}/${this.keys("tui.select.confirm")} agents · ${this.keys("tui.select.cancel")} back · x stop · s save report`
-        : `j/k select agent · h/${this.keys("tui.editor.cursorLeft")}/${this.keys("tui.select.cancel")} phases · l/${this.keys("tui.editor.cursorRight")}/${this.keys("tui.select.confirm")} details · x stop · s save report`;
-    lines.push(this.hintLine(hint, width));
+        ? [
+            ["j/k", "select phase"],
+            [
+              `l/${this.keys("tui.editor.cursorRight")}/${this.keys("tui.select.confirm")}`,
+              "agents",
+            ],
+            [this.keys("tui.select.cancel"), "back"],
+            ["x", "stop"],
+            ["s", "save report"],
+          ]
+        : [
+            ["j/k", "select agent"],
+            [
+              `h/${this.keys("tui.editor.cursorLeft")}/${this.keys("tui.select.cancel")}`,
+              "phases",
+            ],
+            [
+              `l/${this.keys("tui.editor.cursorRight")}/${this.keys("tui.select.confirm")}`,
+              "details",
+            ],
+            ["x", "stop"],
+            ["s", "save report"],
+          ];
+    lines.push(this.hintLine(hints, width));
     return lines;
   }
 
@@ -1191,14 +1327,30 @@ export class WorkflowDashboard {
     }
 
     for (const entry of agent.transcript) {
+      // Tool calls are one-liners: the arrow shows direction, the accent name
+      // says what ran, and the arguments collapse to a single compact line
+      // instead of a vertical JSON block.
+      if (entry.role === "tool") {
+        const name = entry.name ? sanitizeLine(entry.name, 160) : "unknown";
+        const args = compactInlineJson(entry.text);
+        rows.push(
+          ` ${theme.fg("muted", "→")} ${theme.fg("accent", name)}${args ? theme.fg("dim", ` ${args}`) : ""}`,
+        );
+        continue;
+      }
       const label = transcriptLabel(entry);
       const color = transcriptColor(entry);
+      const marker = entry.role === "toolResult" ? "←" : "●";
       rows.push(
-        ` ${theme.fg(color, SQUARE)} ${theme.bold(theme.fg(color, label))}`,
+        ` ${theme.fg(color, marker)} ${theme.bold(theme.fg(color, label))}`,
       );
       const contentWidth = Math.max(8, width - 4);
       const styled = theme.fg(
-        entry.role === "thinking" ? "dim" : entry.isError ? "error" : "text",
+        entry.role === "thinking" || entry.role === "toolResult"
+          ? "dim"
+          : entry.isError
+            ? "error"
+            : "text",
         sanitizeTerminalText(entry.text),
       );
       for (const line of wrapTextWithAnsi(styled, contentWidth)) {
@@ -1229,14 +1381,14 @@ export class WorkflowDashboard {
         .join(" · ") + " ",
     );
     lines.push(
-      this.split(
-        ` ${stateSquare(agent.state, theme)} ${theme.bold(theme.fg("accent", agent.label))}`,
+      fitNavigationSides(
+        ` ${stateGlyph(agent.state, theme, Date.now())} ${theme.bold(theme.fg("accent", agent.label))}`,
         right,
         width,
       ),
     );
     lines.push(
-      this.split(
+      fitNavigationSides(
         ` ${theme.fg("muted", `${details.name ?? details.runId} · ${agent.phase ?? "unphased"}`)}`,
         theme.fg("dim", `${agent.transcript.length} entries `),
         width,
@@ -1261,7 +1413,12 @@ export class WorkflowDashboard {
     lines.push(...this.panel(position, visible, width, panelHeight));
     lines.push(
       this.hintLine(
-        "j/k scroll · ctrl-u/d page · g/G top/bottom · h/left/esc back",
+        [
+          ["j/k", "scroll"],
+          ["ctrl-u/d", "page"],
+          ["g/G", "top/bottom"],
+          ["h/left/esc", "back"],
+        ],
         width,
       ),
     );
@@ -1269,13 +1426,38 @@ export class WorkflowDashboard {
   }
 }
 
+/**
+ * Agent errors often arrive as an HTTP status plus a JSON body
+ * (`429: {"message":"user rate limit exceeded …"}`); the panel row keeps the
+ * status code and the message, dropping the braces and quotes.
+ */
+function displayError(error: string) {
+  const clean = sanitizeLine(error, 2_000);
+  const match = clean.match(/^(\d{3})[:\s]*\{\s*"message"\s*:\s*"([^"]+)"/);
+  if (match) return `${match[1]}: ${match[2]}`;
+  return clean;
+}
+
 function transcriptLabel(entry: TranscriptEntry): string {
-  if (entry.role === "user") return "USER";
-  if (entry.role === "assistant") return "ASSISTANT";
-  if (entry.role === "thinking") return "THINKING";
+  if (entry.role === "user") return "user";
+  if (entry.role === "assistant") return "assistant";
+  if (entry.role === "thinking") return "thinking";
   const name = entry.name ? sanitizeLine(entry.name, 160) : "unknown";
-  if (entry.role === "tool") return `TOOL ${name}`;
-  return `RESULT ${name}`;
+  return name;
+}
+
+/**
+ * Tool arguments arrive pretty-printed over many lines; the transcript shows
+ * them inline. Non-JSON text passes through flattened.
+ */
+function compactInlineJson(text: string) {
+  const flat = sanitizeTerminalText(text).trim();
+  if (!flat) return "";
+  try {
+    return JSON.stringify(JSON.parse(flat));
+  } catch {
+    return flat.replace(/\s+/g, " ");
+  }
 }
 
 function transcriptColor(
@@ -1289,17 +1471,15 @@ function transcriptColor(
   return "muted";
 }
 
-function statusSquareFor(details: WorkflowDetails, theme: Theme): string {
-  return theme.fg(statusColor(details.status), SQUARE);
-}
-
-function groupSquare(group: PhaseGroup, theme: Theme): string {
-  if (group.agents.length === 0) return theme.fg("dim", SQUARE);
+function groupGlyph(group: PhaseGroup, theme: Theme) {
+  if (group.agents.length === 0) return theme.fg("dim", "○");
   if (group.agents.some((a) => a.state === "running"))
-    return theme.fg("warning", SQUARE);
+    return theme.fg("warning", spinnerFrame(Date.now()));
+  if (group.agents.some((a) => a.state === "uncertain"))
+    return theme.fg("warning", "?");
   if (group.agents.some((a) => a.state === "error"))
-    return theme.fg("error", SQUARE);
-  return theme.fg("success", SQUARE);
+    return theme.fg("error", "✗");
+  return theme.fg("success", "✓");
 }
 
 /** Open the dashboard as a full-screen overlay. */
@@ -1309,10 +1489,10 @@ export async function showWorkflowDashboard(
   initialRunId?: string,
   startedSince = 0,
   onAbort?: (runId: string) => boolean,
-): Promise<void> {
+) {
   await ctx.ui.custom<void>(
     (tui, theme, keybindings, done) => {
-      const dashboard: WorkflowDashboard = new WorkflowDashboard(
+      const dashboard = new WorkflowDashboard(
         tui,
         theme,
         keybindings,