@tt-a1i/openpi 0.3.1 → 0.5.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,56 +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 { type TUI, truncateToWidth } from "@earendil-works/pi-tui";
+import { AgentSessionPage } from "../shared/agent-session-page.ts";
+import { fitNavigationSides } from "../shared/below-editor-navigation.ts";
+import { contextPercent } from "../shared/context-utilization.ts";
 import {
-  Key,
-  matchesKey,
-  truncateToWidth,
-  visibleWidth,
-  wrapTextWithAnsi,
-  type TUI,
-} from "@earendil-works/pi-tui";
+  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";
+import { WorkflowTranscriptAdapter } from "./transcript.ts";
 
 const NOTICE_TTL_MS = 4000;
 const MIN_HEIGHT = 10;
-const TRANSCRIPT_SCROLL_STEP = 20;
 
 function wrapSelection(index: number, delta: number, length: number): number {
   if (length === 0) return 0;
@@ -80,6 +83,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 +194,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[] = [];
@@ -140,6 +256,10 @@ function normalizeTranscript(value: unknown): TranscriptEntry[] {
         typeof entry.name === "string"
           ? sanitizeLine(entry.name, 160) || undefined
           : undefined,
+      toolCallId:
+        typeof entry.toolCallId === "string"
+          ? sanitizeLine(entry.toolCallId, 1_024) || undefined
+          : undefined,
       isError: entry.isError === true,
       timestamp:
         typeof entry.timestamp === "number" ? entry.timestamp : undefined,
@@ -148,6 +268,35 @@ function normalizeTranscript(value: unknown): TranscriptEntry[] {
   return transcript;
 }
 
+function normalizeAgentState(value: unknown): AgentRecord["state"] {
+  switch (value) {
+    case "done":
+    case "completed":
+      return "done";
+    case "error":
+    case "failed":
+      return "error";
+    case "running":
+    case "uncertain":
+      return value;
+    default:
+      return "uncertain";
+  }
+}
+
+function normalizeWorkflowStatus(value: unknown): WorkflowDetails["status"] {
+  switch (value) {
+    case "running":
+    case "completed":
+    case "failed":
+    case "aborted":
+    case "uncertain":
+      return value;
+    default:
+      return "uncertain";
+  }
+}
+
 /** Leniently normalize a workflow.json (including runs from older tooling). */
 export function normalizePersistedWorkflowDetails(
   runId: string,
@@ -163,12 +312,7 @@ export function normalizePersistedWorkflowDetails(
   for (const item of rawAgents) {
     if (!item || typeof item !== "object") continue;
     const a = item as Record<string, unknown>;
-    const state =
-      a.state === "error" || a.state === "failed"
-        ? "error"
-        : a.state === "running"
-          ? "running"
-          : "done";
+    const state = normalizeAgentState(a.state);
     const index = typeof a.index === "number" ? a.index : agents.length + 1;
     const decodedInvocation = decodeInvocationRecord(a.invocation);
     const invocation =
@@ -205,6 +349,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}`
@@ -279,15 +428,23 @@ export function normalizePersistedWorkflowDetails(
     logs.push({
       at: typeof entry.at === "number" ? entry.at : startedAt,
       text: sanitizeLine(entry.text, MAX_LOG_TEXT),
+      ...(entry.kind === "pipeline-drop"
+        ? { kind: "pipeline-drop" as const }
+        : {}),
     });
   }
 
-  const status =
-    record.status === "running" ||
-    record.status === "failed" ||
-    record.status === "aborted"
-      ? record.status
-      : "completed";
+  let status = normalizeWorkflowStatus(record.status);
+  if (status !== "running") {
+    for (const agent of agents) {
+      if (agent.state !== "running" && agent.state !== "uncertain") continue;
+      status = "uncertain";
+      agent.state = "uncertain";
+      agent.error =
+        agent.error ??
+        "Persisted terminal workflow contained an agent without terminal evidence";
+    }
+  }
 
   return {
     runId,
@@ -306,6 +463,7 @@ export function normalizePersistedWorkflowDetails(
           ? sanitizeLine(meta.description, 2_000) || undefined
           : undefined,
     background: record.background === true,
+    delivery: normalizeDelivery(record.delivery),
     status,
     startedAt,
     finishedAt:
@@ -351,13 +509,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));
@@ -388,70 +569,36 @@ export function loadRunEntries(
   referencedRunIds: ReadonlySet<string>,
   /** Hide runs untouched by the current request; live runs always show. */
   startedSince = 0,
+  /** Bounded settled projections used only if canonical disk state is unreadable. */
+  retained: ReadonlyMap<string, WorkflowDetails> = new Map(),
 ): RunEntry[] {
-  let names: string[] = [];
-  try {
-    names = fs.readdirSync(runsDir()).filter(isWorkflowRunId);
-  } catch {
-    // No runs yet.
-  }
   const entries: RunEntry[] = [];
-  for (const runId of names) {
+  const runIds = new Set([...listPersistedRunIds(), ...retained.keys()]);
+  for (const runId of runIds) {
     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 persisted = readPersistedWorkflowDetails(runId, {
+      hydrateArtifacts: true,
+    });
+    const retainedDetails = retained.get(runId);
+    const details = persisted ?? retainedDetails;
+    if (!details) continue;
+    const fromRetention =
+      persisted === undefined && retainedDetails !== undefined;
+    const touchedAt = Math.max(details.startedAt, details.finishedAt ?? 0);
+    if (
+      touchedAt < startedSince ||
+      (!fromRetention &&
+        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 +619,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 +645,9 @@ export function buildWorkflowReport(details: WorkflowDetails): string {
           ? "ok"
           : agent.state === "error"
             ? "FAILED"
-            : "running";
+            : agent.state === "uncertain"
+              ? "UNCERTAIN"
+              : "running";
       const stats = [
         agent.model,
         agentContext(agent),
@@ -565,24 +714,24 @@ export class WorkflowDashboard {
   private phaseIndex = 0;
   private agentIndex = 0;
   private detailFocus: DetailFocus = "phases";
-  private transcriptScroll = 0;
-  private transcriptRowCount = 0;
-  private transcriptViewportSize = 1;
+  private transcriptPage?: AgentSessionPage;
   private current?: RunEntry;
   private openedDirectly = false;
   private notice?: string;
   private noticeAt = 0;
   private disposed = false;
-  private timer: ReturnType<typeof setInterval>;
+  private timer?: ReturnType<typeof setInterval>;
   private tui: TUI;
   private theme: Theme;
   private keybindings: KeybindingsManager;
   private getActive: () => Map<string, WorkflowDetails>;
+  private getRetained: () => ReadonlyMap<string, WorkflowDetails>;
   private sessionId: string;
   private referencedRunIds: ReadonlySet<string>;
   private startedSince: number;
   private close: () => void;
   private onAbort?: (runId: string) => boolean;
+  private initialToolsExpanded: boolean;
 
   constructor(
     tui: TUI,
@@ -595,16 +744,20 @@ export class WorkflowDashboard {
     close: () => void,
     initialRunId?: string,
     onAbort?: (runId: string) => boolean,
+    getRetained: () => ReadonlyMap<string, WorkflowDetails> = () => new Map(),
+    initialToolsExpanded = false,
   ) {
     this.tui = tui;
     this.theme = theme;
     this.keybindings = keybindings;
     this.getActive = getActive;
+    this.getRetained = getRetained;
     this.sessionId = sessionId;
     this.referencedRunIds = referencedRunIds;
     this.startedSince = startedSince;
     this.close = close;
     this.onAbort = onAbort;
+    this.initialToolsExpanded = initialToolsExpanded;
     this.refresh();
     if (initialRunId) {
       const resolution = resolveWorkflowRunTarget(
@@ -624,25 +777,44 @@ export class WorkflowDashboard {
         this.noticeAt = Date.now();
       }
     }
+    this.refreshTimer();
+  }
+
+  private refreshTimer() {
+    const active = Boolean(
+      this.notice ||
+        (this.view === "list"
+          ? this.entries.some(
+              (entry) => entry.live && entry.details.status === "running",
+            )
+          : this.view === "detail"
+            ? this.current?.live && this.current.details.status === "running"
+            : this.current?.live && this.selectedAgent()?.state === "running"),
+    );
+    if (!active) {
+      if (this.timer) clearInterval(this.timer);
+      this.timer = undefined;
+      return;
+    }
+    if (this.timer) return;
     this.timer = setInterval(() => {
-      if (
-        this.entries.some((e) => e.live) ||
-        this.current?.live ||
-        this.notice
-      ) {
-        this.refresh();
-        this.tui.requestRender();
-      }
-    }, 500);
+      this.refresh();
+      this.tui.requestRender();
+      this.refreshTimer();
+    }, SPINNER_INTERVAL_MS);
   }
 
   dispose() {
     if (this.disposed) return;
     this.disposed = true;
-    clearInterval(this.timer);
+    if (this.timer) clearInterval(this.timer);
+    this.timer = undefined;
+    this.transcriptPage = undefined;
   }
 
-  invalidate() {}
+  invalidate() {
+    this.transcriptPage?.invalidate();
+  }
 
   private refresh() {
     const selected = this.entries[this.listIndex]?.runId;
@@ -651,6 +823,7 @@ export class WorkflowDashboard {
       this.sessionId,
       this.referencedRunIds,
       this.startedSince,
+      this.getRetained(),
     );
     if (selected) {
       const index = this.entries.findIndex((e) => e.runId === selected);
@@ -707,11 +880,12 @@ export class WorkflowDashboard {
     const target = path.join(runsDir(), entry.runId, "report.md");
     try {
       writeFileAtomic(target, buildWorkflowReport(entry.details));
-      this.notice = `saved ${shortenHome(target)}`;
+      this.setNotice(`saved ${shortenHome(target)}`);
     } catch (error) {
-      this.notice = `save failed: ${error instanceof Error ? error.message : String(error)}`;
+      this.setNotice(
+        `save failed: ${error instanceof Error ? error.message : String(error)}`,
+      );
     }
-    this.noticeAt = Date.now();
   }
 
   /** Request cancellation of a run by id, surfacing the outcome as a notice. */
@@ -730,6 +904,7 @@ export class WorkflowDashboard {
   private setNotice(text: string) {
     this.notice = text;
     this.noticeAt = Date.now();
+    this.refreshTimer();
   }
 
   handleInput(data: string) {
@@ -811,57 +986,27 @@ export class WorkflowDashboard {
         } else if (left || cancel) {
           this.detailFocus = "phases";
         } else if ((right || confirm) && this.selectedAgent()) {
-          this.transcriptScroll = 0;
-          this.view = "transcript";
+          this.openTranscriptPage();
         }
       }
       if (data === "s") this.saveReport();
       if (data === "x") this.abortRun(this.current);
     } else {
-      const maxScroll = Math.max(
-        0,
-        this.transcriptRowCount - this.transcriptViewportSize,
-      );
-      const scrollStep =
-        data === "j" || data === "k" ? TRANSCRIPT_SCROLL_STEP : 1;
-      const pageStep = Math.max(1, this.transcriptViewportSize - 2);
-      if (up) {
-        this.transcriptScroll = Math.max(0, this.transcriptScroll - scrollStep);
-      } else if (down) {
-        this.transcriptScroll = Math.min(
-          maxScroll,
-          this.transcriptScroll + scrollStep,
-        );
-      } else if (matchesKey(data, Key.ctrl("u"))) {
-        this.transcriptScroll = Math.max(0, this.transcriptScroll - pageStep);
-      } else if (matchesKey(data, Key.ctrl("d"))) {
-        this.transcriptScroll = Math.min(
-          maxScroll,
-          this.transcriptScroll + pageStep,
-        );
-      } else if (data === "g") {
-        this.transcriptScroll = 0;
-      } else if (data === "G") {
-        this.transcriptScroll = maxScroll;
-      } else if (cancel || left) {
-        this.view = "detail";
-        this.detailFocus = "agents";
-      }
+      this.transcriptPage?.handleInput(data);
+      this.refreshTimer();
+      return;
     }
+    this.refreshTimer();
     this.tui.requestRender();
   }
 
   render(width: number): string[] {
+    if (this.view === "transcript" && this.transcriptPage) {
+      return this.transcriptPage.render(width);
+    }
     const height = Math.max(MIN_HEIGHT, this.tui.terminal.rows - 1);
     let lines: string[];
-    if (this.view === "transcript" && this.current && this.selectedAgent()) {
-      lines = this.renderTranscript(
-        this.current.details,
-        this.selectedAgent()!,
-        width,
-        height,
-      );
-    } else if (this.view === "detail" && this.current) {
+    if (this.view === "detail" && this.current) {
       lines = this.renderDetail(this.current.details, width, height);
     } else {
       lines = this.renderList(width, height);
@@ -869,15 +1014,51 @@ 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;
+  private openTranscriptPage() {
+    const transcriptAdapter = new WorkflowTranscriptAdapter();
+    this.view = "transcript";
+    this.transcriptPage = new AgentSessionPage(
+      this.tui,
+      this.theme,
+      this.keybindings,
+      {
+        getState: () => {
+          const details = this.current?.details;
+          const agent = this.selectedAgent();
+          if (!details || !agent) return undefined;
+          return {
+            id: agent.callId ?? `agent-${agent.index}`,
+            title: agent.label,
+            status: agent.state,
+            document: transcriptAdapter.document(
+              agent.transcript,
+              agent.worktreePath,
+            ),
+            metadata: [
+              `${details.name ?? details.runId} · ${agent.phase ?? "unphased"}`,
+              agent.model,
+              agentContext(agent),
+              agent.acceptance
+                ? `acceptance:${agent.acceptance.status}`
+                : undefined,
+              formatElapsed(agent.startedAt, agent.finishedAt),
+            ],
+            errorText: agent.error,
+            emptyText:
+              "transcript unavailable (this run predates transcript capture)",
+          };
+        },
+        close: () => {
+          this.transcriptPage = undefined;
+          this.view = "detail";
+          this.detailFocus = "agents";
+          this.refreshTimer();
+          this.tui.requestRender();
+        },
+      },
+      { toolsExpanded: this.initialToolsExpanded },
+    );
+    this.tui.requestRender();
   }
 
   /** Bordered panel with a title in the top border, padded to exact height. */
@@ -887,23 +1068,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 +1089,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 +1118,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 +1137,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 +1175,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 +1242,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 +1251,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 +1267,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 +1283,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 +1305,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,136 +1365,57 @@ 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));
-    return lines;
-  }
-
-  private transcriptRows(agent: AgentRecord, width: number): string[] {
-    const theme = this.theme;
-    const rows: string[] = [];
-    if (agent.transcript.length === 0) {
-      return [
-        theme.fg(
-          "dim",
-          " transcript unavailable (this run predates transcript capture)",
-        ),
-      ];
-    }
-
-    for (const entry of agent.transcript) {
-      const label = transcriptLabel(entry);
-      const color = transcriptColor(entry);
-      rows.push(
-        ` ${theme.fg(color, SQUARE)} ${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",
-        sanitizeTerminalText(entry.text),
-      );
-      for (const line of wrapTextWithAnsi(styled, contentWidth)) {
-        rows.push(`   ${line}`);
-      }
-      rows.push("");
-    }
-    return rows;
-  }
-
-  private renderTranscript(
-    details: WorkflowDetails,
-    agent: AgentRecord,
-    width: number,
-    height: number,
-  ): string[] {
-    const theme = this.theme;
-    const lines: string[] = [];
-    const right = theme.fg(
-      "dim",
-      [
-        agent.model,
-        agentContext(agent),
-        agent.acceptance ? `acceptance:${agent.acceptance.status}` : undefined,
-        formatElapsed(agent.startedAt, agent.finishedAt),
-      ]
-        .filter(Boolean)
-        .join(" · ") + " ",
-    );
-    lines.push(
-      this.split(
-        ` ${stateSquare(agent.state, theme)} ${theme.bold(theme.fg("accent", agent.label))}`,
-        right,
-        width,
-      ),
-    );
-    lines.push(
-      this.split(
-        ` ${theme.fg("muted", `${details.name ?? details.runId} · ${agent.phase ?? "unphased"}`)}`,
-        theme.fg("dim", `${agent.transcript.length} entries `),
-        width,
-      ),
-    );
-
-    const panelHeight = height - 3;
-    const bodyHeight = Math.max(1, panelHeight - 2);
-    const rows = this.transcriptRows(agent, width - 2);
-    this.transcriptRowCount = rows.length;
-    this.transcriptViewportSize = bodyHeight;
-    const maxScroll = Math.max(0, rows.length - bodyHeight);
-    this.transcriptScroll = Math.min(this.transcriptScroll, maxScroll);
-    const visible = rows.slice(
-      this.transcriptScroll,
-      this.transcriptScroll + bodyHeight,
-    );
-    const position =
-      rows.length > bodyHeight
-        ? `Transcript · ${this.transcriptScroll + 1}-${Math.min(rows.length, this.transcriptScroll + bodyHeight)}/${rows.length}`
-        : "Transcript";
-    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",
-        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;
   }
 }
 
-function transcriptLabel(entry: TranscriptEntry): string {
-  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}`;
-}
-
-function transcriptColor(
-  entry: TranscriptEntry,
-): "accent" | "success" | "dim" | "warning" | "error" | "muted" {
-  if (entry.isError) return "error";
-  if (entry.role === "user") return "accent";
-  if (entry.role === "assistant") return "success";
-  if (entry.role === "thinking") return "dim";
-  if (entry.role === "tool") return "warning";
-  return "muted";
-}
-
-function statusSquareFor(details: WorkflowDetails, theme: Theme): string {
-  return theme.fg(statusColor(details.status), SQUARE);
+/**
+ * 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 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 +1425,11 @@ export async function showWorkflowDashboard(
   initialRunId?: string,
   startedSince = 0,
   onAbort?: (runId: string) => boolean,
-): Promise<void> {
+  getRetained?: () => ReadonlyMap<string, WorkflowDetails>,
+) {
   await ctx.ui.custom<void>(
     (tui, theme, keybindings, done) => {
-      const dashboard: WorkflowDashboard = new WorkflowDashboard(
+      const dashboard = new WorkflowDashboard(
         tui,
         theme,
         keybindings,
@@ -1326,12 +1443,14 @@ export async function showWorkflowDashboard(
         },
         initialRunId,
         onAbort,
+        getRetained,
+        ctx.ui.getToolsExpanded(),
       );
       return dashboard;
     },
     {
       overlay: true,
-      overlayOptions: { anchor: "center", width: "100%", maxHeight: "100%" },
+      overlayOptions: { anchor: "top-left", width: "100%", maxHeight: "100%" },
     },
   );
 }