@entelligentsia/forgecli 1.0.14 → 1.0.21

package/dist/extensions/forgecli/dashboard/component.d.ts

@@ -1,5 +1,5 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import type { Component, TUI } from "@earendil-works/pi-tui";
+import type { Component, Focusable, TUI } from "@earendil-works/pi-tui";
 import type { OrchestratorTree } from "../orchestrator-tree.js";
 import type { NodeViewModel } from "./view-model.js";
 export interface DashboardState {
@@ -11,6 +11,10 @@ export interface DashboardState {
     focusPanel: "tree" | "detail";
     /** Whether the detail panel's prompt section is expanded. */
     promptExpanded: boolean;
+    /** Activity-log expansion (ctrl+o): false = clamp long entries to a small
+     * row budget, true = render full content. Display policy lives entirely in
+     * the view — the model stores log entries verbatim. */
+    logExpanded: boolean;
     /** Node ID targeted for cancellation confirmation, if active. */
     cancelTargetId: string | null;
     /** Scroll offset for the detail panel (0 = top). */
@@ -22,8 +26,12 @@ export declare class DashboardController {
     private state;
     private onInvalidate?;
     private refreshTimer?;
+    private disposed;
+    private readonly readOnly;
     private _handlers;
-    constructor(tree: OrchestratorTree, initialCursorId?: string);
+    constructor(tree: OrchestratorTree, initialCursorId?: string, opts?: {
+        readOnly?: boolean;
+    });
     setOnInvalidate(cb: () => void): void;
     /** Rebuild the ViewModel from the live model. Called on every model event. */
     private rebuildViewModel;
@@ -67,6 +75,8 @@ export declare class DashboardController {
     private activateCursor;
     private toggleExpand;
     private collapseCursor;
+    /** Replay mode: read-only dashboards (archived trees) never cancel. */
+    isReadOnly(): boolean;
     private startCancel;
     private ensureAncestorsExpanded;
     autoExpandNewNode(id: string): void;
@@ -75,7 +85,11 @@ export declare class DashboardController {
     dispose(): void;
     getState(): DashboardState;
 }
-export declare class DashboardComponent implements Component {
+export declare class DashboardComponent implements Component, Focusable {
+    /** IL3: Focusable — pi sets this to true when the overlay has
+     *  keyboard focus. Without this, arrow-key and Escape events are
+     *  swallowed at the overlay layer. (Lesson from config-TUI commit 07e886f.) */
+    focused: boolean;
     private controller;
     private theme;
     private tui;
@@ -86,7 +100,6 @@ export declare class DashboardComponent implements Component {
     invalidate(): void;
     dispose(): void;
     private renderTreePanel;
-    private nodeGlyph;
     private renderDetailPanel;
     /** Render a cancel-confirmation dialog overlaid on the dashboard.
      *  The dashboard content stays visible above and below the dialog.
@@ -97,6 +110,5 @@ export declare class DashboardComponent implements Component {
      *  dismisses the cancel prompt, not the dashboard.
      */
     private overlayCancelConfirm;
-    private statusLabel;
     private formatMetrics;
 }

package/dist/extensions/forgecli/dashboard/component.js

@@ -20,11 +20,20 @@
 //   manages the refresh timer, and handles input. DashboardComponent reads
 //   only from the controller — never directly from the OrchestratorTree model.
 //   This eliminates the boundary violations catalogued in the audit.
+//
+// Iron Laws conformance:
+//   IL1 — All visible strings route through dashboard/theme.ts helpers or
+//          theme.fg()/bg()/bold(). No raw glyphs.
+//   IL2 — Dual-layer width safety: screen renderers call truncateLines(),
+//          orchestrator applies truncateToWidth per line.
+//   IL3 — DashboardComponent implements Focusable (focused: boolean = false).
+//   IL7 — Timer unmount-safety: disposed flag guards interval callbacks.
 import { matchesKey, Key, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { getSessionRegistry } from "../session-registry.js";
 import { buildViewModel } from "./view-model.js";
-import { fmtTokenMeter } from "../viewport-renderer.js";
-import { paintTailLine } from "../viewport-theme.js";
+import { fmtTokenMeter, toDisplayLines } from "../viewport/renderer.js";
+import { paintTailLine } from "../viewport/theme.js";
+import { cursor, nodeGlyph, statusLabel, dim, accentBold, warn, bold, border, collapseIndicator, promptExpandIcon, truncateLines, } from "./theme.js";
 // ── Word-wrap helper ───────────────────────────────────────────────────────────
 //
 // Splits a line (which may contain ANSI escape sequences) into multiple
@@ -32,6 +41,15 @@ import { paintTailLine } from "../viewport-theme.js";
 // Preserves ANSI styling across wrapped lines. Falls back to character-level
 // truncation for individual tokens wider than maxWidth.
 function wrapLine(line, maxWidth) {
+    // Row-integrity guard (layer 2 of the single-line invariant; layer 1 is
+    // toDisplayLines at the appendTail model boundary): a raw \n inside a
+    // composed pane row resets the terminal cursor to column 0 and the
+    // remainder renders under the LEFT pane. visibleWidth() counts \n as an
+    // ordinary character, so the short-line early-return below would pass a
+    // multi-line string through intact — split first, wrap each part.
+    if (/[\r\n]/.test(line)) {
+        return line.split(/\r\n|\r|\n/).flatMap((part) => wrapLine(part, maxWidth));
+    }
     if (maxWidth <= 0)
         return [line];
     const visW = visibleWidth(line);
@@ -99,8 +117,20 @@ function wrapLine(line, maxWidth) {
         lines.push(curLine);
     }
     return lines.length > 0 ? lines : [line];
-} // ── Refresh timer ───────────────────────────────────────────────────────────
+}
+/** Last-resort flatten for the pane compose loop: replace any surviving line
+ * break with a visible ⏎ so a single corrupted string can't shift the whole
+ * row grid. Upstream layers (toDisplayLines at appendTail, wrapLine split)
+ * should make this a no-op. */
+function flattenRow(line) {
+    return /[\r\n]/.test(line) ? line.replace(/\r\n|\r|\n/g, " ⏎ ") : line;
+}
+// ── Refresh timer ───────────────────────────────────────────────────────────
 const REFRESH_INTERVAL_MS = 1000;
+/** Max rendered rows per log entry when the activity log is clamped. */
+const LOG_CLAMP_ROWS = 2;
+/** Max prompt lines shown when expanded but not in full mode (ctrl+o). */
+const PROMPT_CLAMP_LINES = 20;
 // ── Controller ──────────────────────────────────────────────────────────────
 export class DashboardController {
     tree;
@@ -108,8 +138,11 @@ export class DashboardController {
     state;
     onInvalidate;
     refreshTimer;
+    disposed = false; // IL7: guards interval callbacks after dispose
+    readOnly;
     _handlers;
-    constructor(tree, initialCursorId) {
+    constructor(tree, initialCursorId, opts) {
+        this.readOnly = opts?.readOnly ?? false;
         this.tree = tree;
         this.vm = buildViewModel(tree);
         // Default cursor to the first active root, or empty string if tree is empty.
@@ -119,6 +152,7 @@ export class DashboardController {
             expanded: new Set(),
             focusPanel: "tree",
             promptExpanded: false,
+            logExpanded: false,
             cancelTargetId: null,
             detailScroll: 0,
         };
@@ -127,12 +161,14 @@ export class DashboardController {
         // On every model event, rebuild VM then invalidate the view.
         const onModelChange = () => {
             this.rebuildViewModel();
-            this.onInvalidate?.();
+            if (!this.disposed)
+                this.onInvalidate?.();
         };
         const onTreeChange = (id) => {
             this.rebuildViewModel();
             this.autoExpandNewNode(id);
-            this.onInvalidate?.();
+            if (!this.disposed)
+                this.onInvalidate?.();
         };
         this.tree.on("change", onModelChange);
         this.tree.on("tail", onModelChange);
@@ -268,7 +304,15 @@ export class DashboardController {
         // Cancel confirmation mode takes priority.
         if (this.state.cancelTargetId) {
             this.handleCancelConfirm(data);
-            this.onInvalidate?.();
+            if (!this.disposed)
+                this.onInvalidate?.();
+            return;
+        }
+        // ctrl+o: toggle activity-log expansion (global — works in both panels).
+        if (matchesKey(data, Key.ctrl("o"))) {
+            this.state.logExpanded = !this.state.logExpanded;
+            if (!this.disposed)
+                this.onInvalidate?.();
             return;
         }
         switch (this.state.focusPanel) {
@@ -279,7 +323,8 @@ export class DashboardController {
                 this.handleDetailInput(data);
                 break;
         }
-        this.onInvalidate?.();
+        if (!this.disposed)
+            this.onInvalidate?.();
     }
     handleTreeInput(data) {
         if (matchesKey(data, Key.up)) {
@@ -409,7 +454,16 @@ export class DashboardController {
             this.state.cursorId = node.parentId;
         }
     }
+    /** Replay mode: read-only dashboards (archived trees) never cancel. */
+    isReadOnly() {
+        return this.readOnly;
+    }
     startCancel() {
+        // Read-only replay: cancel is meaningless on an archived tree, and
+        // cancelNodeAndSessions would touch the LIVE SessionRegistry
+        // singleton. Single guard here covers both `x` entry points.
+        if (this.readOnly)
+            return;
         const node = this.vm.nodes.get(this.state.cursorId);
         if (!node)
             return;
@@ -478,6 +532,11 @@ export class DashboardController {
         if (this.refreshTimer)
             return;
         this.refreshTimer = setInterval(() => {
+            // IL7: guard against firing after dispose.
+            if (this.disposed) {
+                this.stopRefreshTimer();
+                return;
+            }
             if (!this.hasRunningNodes()) {
                 // One last render to settle final frame, then stop timer.
                 this.onInvalidate?.();
@@ -495,6 +554,7 @@ export class DashboardController {
     }
     // ── Cleanup ────────────────────────────────────────────────────────────
     dispose() {
+        this.disposed = true; // IL7: set before clearing timer so callback sees it
         this.stopRefreshTimer();
         for (const { event, handler } of this._handlers) {
             this.tree.off(event, handler);
@@ -507,6 +567,10 @@ export class DashboardController {
 }
 // ── View ────────────────────────────────────────────────────────────────────
 export class DashboardComponent {
+    /** IL3: Focusable — pi sets this to true when the overlay has
+     *  keyboard focus. Without this, arrow-key and Escape events are
+     *  swallowed at the overlay layer. (Lesson from config-TUI commit 07e886f.) */
+    focused = false;
     controller;
     theme;
     tui;
@@ -535,7 +599,7 @@ export class DashboardComponent {
         // ── Right panel: detail ─────────────────────────────────────────
         const rightLines = selectedNode
             ? this.renderDetailPanel(selectedNode, rightWidth)
-            : [this.theme.fg("dim", "Select a node in the tree")];
+            : [dim("Select a node in the tree", this.theme)];
         // ── Compose ─────────────────────────────────────────────────────
         const termHeight = this.tui.terminal.rows;
         // Deduct 3 lines for top border, bottom border, and hints footer
@@ -563,35 +627,37 @@ export class DashboardComponent {
             paddedRightLines.push(rightLines[i + activeScroll] ?? "");
         }
         const lines = [];
-        const border = (s) => this.theme.fg("border", s);
-        const accent = (s) => this.theme.fg("accent", s);
         // ── Header ──────────────────────────────────────────────────────
         const headerText = ` Orchestrator Dashboard `;
-        const headerPad = contentWidth - visibleWidth(border("")) - visibleWidth(accent(headerText));
-        lines.push(border("╭") +
-            accent(headerText) +
-            border("─".repeat(Math.max(0, headerPad))) +
-            border("╮"));
+        const headerPad = contentWidth - visibleWidth(border("", this.theme)) - visibleWidth(accentBold(headerText, this.theme));
+        lines.push(border("╭", this.theme) +
+            accentBold(headerText, this.theme) +
+            border("─".repeat(Math.max(0, headerPad)), this.theme) +
+            border("╮", this.theme));
         for (let i = 0; i < contentHeight; i++) {
-            const left = truncateToWidth(paddedLeftLines[i], leftWidth);
-            const right = truncateToWidth(paddedRightLines[i], rightWidth);
+            // Final row-integrity guard: by this point every line has passed
+            // wrapLine/truncate, but a stray line break would corrupt the whole
+            // row grid — flatten defensively (should never fire).
+            const left = truncateToWidth(flattenRow(paddedLeftLines[i]), leftWidth);
+            const right = truncateToWidth(flattenRow(paddedRightLines[i]), rightWidth);
             const lPad = leftWidth - visibleWidth(left);
             const rPad = rightWidth - visibleWidth(right);
-            lines.push(border("│") +
+            lines.push(border("│", this.theme) +
                 left +
                 " ".repeat(Math.max(0, lPad)) +
-                border("│") +
+                border("│", this.theme) +
                 " " +
                 right +
                 " ".repeat(Math.max(0, rPad)) +
-                border("│"));
+                border("│", this.theme));
         }
         // ── Footer: bottom border + key hints + model/token meter ────────
-        const dim = (s) => this.theme.fg("dim", s);
         const hintsBase = state.cancelTargetId
             ? " y confirm · n dismiss · esc close"
-            : " ↑↓ nav · → expand · ← back · ⏎ focus · x cancel · esc close";
-        lines.push(border("╰") + border("─".repeat(contentWidth)) + border("╯"));
+            : this.controller.isReadOnly()
+                ? " ↑↓ nav · → expand · ← back · ⏎ focus · ^o log · esc close · replay (read-only)"
+                : " ↑↓ nav · → expand · ← back · ⏎ focus · ^o log · x cancel · esc close";
+        lines.push(border("╰", this.theme) + border("─".repeat(contentWidth), this.theme) + border("╯", this.theme));
         // Aggregate model + token footer (mirrors ViewportFooterComponent).
         const aggUsage = this.controller.getAggregateUsage();
         const aggCompression = this.controller.getAggregateCompression();
@@ -603,18 +669,18 @@ export class DashboardComponent {
             : (activeModel?.provider ?? activeModel?.model ?? "");
         let footerLine = "";
         if (modelLabel && meter) {
-            footerLine = `${hintsBase}   ${dim(modelLabel)}  Σ ${meter}${compSuffix}`;
+            footerLine = `${hintsBase}   ${dim(modelLabel, this.theme)}  Σ ${meter}${compSuffix}`;
         }
         else if (meter) {
             footerLine = `${hintsBase}   Σ ${meter}${compSuffix}`;
         }
         else if (modelLabel) {
-            footerLine = `${hintsBase}   ${dim(modelLabel)}`;
+            footerLine = `${hintsBase}   ${dim(modelLabel, this.theme)}`;
         }
         else {
             footerLine = hintsBase;
         }
-        lines.push(dim(truncateToWidth(footerLine, width)));
+        lines.push(dim(truncateToWidth(footerLine, width), this.theme));
         // ── Overlay cancel confirmation on top of dashboard content ────
         if (state.cancelTargetId) {
             return this.overlayCancelConfirm(lines, width, state.cancelTargetId);
@@ -641,11 +707,11 @@ export class DashboardComponent {
     // ── Tree panel renderer ─────────────────────────────────────────────────
     renderTreePanel(visibleIds, state, width) {
         if (visibleIds.length === 0) {
-            return [this.theme.fg("dim", "No session running")];
+            return [dim("No session running", this.theme)];
         }
         const lines = [];
         // Header
-        lines.push(this.theme.bold(this.theme.fg("accent", " Phases")));
+        lines.push(accentBold(" Phases", this.theme));
         for (const id of visibleIds) {
             const node = this.controller.getNode(id);
             if (!node)
@@ -653,110 +719,110 @@ export class DashboardComponent {
             const isCursor = id === state.cursorId;
             const depth = node.depth;
             const indent = " ".repeat(depth * 2);
+            // IL1: themed cursor and glyphs — no raw characters.
+            const cursorChar = cursor(isCursor, this.theme);
             // Status glyph
-            const glyph = this.nodeGlyph(node);
+            const glyph = nodeGlyph(node.status, this.theme);
             // Progress label for orchestrators
             let label = node.label;
             if (node.kind === "orchestrator") {
                 const prog = this.controller.getSubtreeProgress(id);
                 label += ` ${prog.completed}/${prog.total}`;
             }
-            // Expand indicator
+            // Expand/collapse indicator — themed
             const expandIndicator = node.kind === "orchestrator"
                 ? state.expanded.has(id)
                     ? " "
-                    : "▸"
+                    : collapseIndicator(this.theme)
                 : " ";
             // Combine
-            const prefix = `${indent}${isCursor ? "❯" : " "} ${glyph} ${expandIndicator} `;
+            const prefix = `${indent}${cursorChar} ${glyph} ${expandIndicator} `;
             const styled = isCursor
                 ? this.theme.bold(this.theme.fg("accent", `${prefix}${label}`))
                 : `${prefix}${label}`;
             lines.push(truncateToWidth(styled, width));
         }
-        return lines;
+        // IL2: dual-layer width safety — first guard in screen renderer.
+        return truncateLines(lines, width);
     }
-    nodeGlyph(node) {
-        switch (node.status) {
-            case "completed":
-                return this.theme.fg("success", "✔");
-            case "running":
-                return this.theme.fg("accent", "●");
-            case "cancelling":
-                return this.theme.fg("warning", "⏳");
-            case "cancelled":
-                return this.theme.fg("muted", "⊘");
-            case "failed":
-                return this.theme.fg("error", "✗");
-            case "escalated":
-                return this.theme.fg("error", "▲");
-            case "pending":
-            default:
-                return this.theme.fg("dim", "○");
-        }
-    }
-    // ── Detail panel renderer ────────────────────────────────────────────────
     renderDetailPanel(node, width) {
         const lines = [];
-        const dim = (s) => this.theme.fg("dim", s);
-        const accent = (s) => this.theme.fg("accent", s);
-        const bold = (s) => this.theme.bold(s);
-        const success = (s) => this.theme.fg("success", s);
-        const warn = (s) => this.theme.fg("warning", s);
         // ── Header: label + status (wrap long model strings) ──────────────────
-        const statusLabel = this.statusLabel(node.status);
+        const statusLabelStr = statusLabel(node.status);
         const modelPart = node.model ? ` · ${node.provider ?? ""} ${node.model}` : "";
-        lines.push(...wrapLine(`${this.nodeGlyph(node)} ${bold(statusLabel)}${dim(modelPart)}`, width));
+        lines.push(...wrapLine(`${nodeGlyph(node.status, this.theme)} ${bold(statusLabelStr, this.theme)}${dim(modelPart, this.theme)}`, width));
         // ── Metrics line ────────────────────────────────────────────────
         const metrics = this.formatMetrics(node);
         if (metrics)
-            lines.push(...wrapLine(dim(metrics), width));
+            lines.push(...wrapLine(dim(metrics, this.theme), width));
         lines.push("");
         // ── Orchestrator node: list children ─────────────────────────────
         if (node.kind === "orchestrator" && node.children.length > 0) {
             const children = this.controller.getChildren(node.id);
-            lines.push(...wrapLine(dim(bold(`Agents · ${children.length}`)), width));
+            lines.push(...wrapLine(dim(bold(`Agents · ${children.length}`, this.theme), this.theme), width));
             for (const child of children) {
-                const cglyph = this.nodeGlyph(child);
+                const cglyph = nodeGlyph(child.status, this.theme);
                 const cmodel = child.model ? ` ${child.provider ?? ""} ${child.model}` : "";
                 const cmetrics = this.formatMetrics(child);
                 const cmetricsPart = cmetrics ? ` ${cmetrics}` : "";
-                lines.push(...wrapLine(` ${cglyph} ${child.label}${dim(cmodel)}${dim(cmetricsPart)}`, width));
+                lines.push(...wrapLine(` ${cglyph} ${child.label}${dim(cmodel, this.theme)}${dim(cmetricsPart, this.theme)}`, width));
             }
             lines.push("");
         }
-        // ── Prompt preview (expandable) ─────────────────────────────────
+        // ── Prompt preview (⏎ open/close, ctrl+o lifts the line cap) ────
+        // Model stores the full body (storage-capped only); the view owns
+        // clamping: ⏎ toggles the section, the clamp shows PROMPT_CLAMP_LINES,
+        // and ctrl+o (the global full-content toggle) reveals everything.
         if (node.promptPreview) {
-            const expandIcon = this.controller.getState().promptExpanded ? "▼" : "▶";
-            const lineCount = node.promptPreview.split("\n").length;
-            lines.push(...wrapLine(dim(`${expandIcon} Prompt · ${lineCount} lines · ⏎ expand`), width));
-            if (this.controller.getState().promptExpanded) {
-                for (const pline of node.promptPreview.split("\n").slice(0, 20)) {
+            const st = this.controller.getState();
+            const expandIcon = promptExpandIcon(st.promptExpanded, this.theme);
+            const promptLines = toDisplayLines(node.promptPreview);
+            const lineCount = promptLines.length;
+            const hint = st.promptExpanded ? (st.logExpanded ? "⏎ collapse · ^o clamp" : "⏎ collapse · ^o full") : "⏎ expand";
+            lines.push(...wrapLine(dim(`${expandIcon} Prompt · ${lineCount} lines · ${hint}`, this.theme), width));
+            if (st.promptExpanded) {
+                const cap = st.logExpanded ? lineCount : PROMPT_CLAMP_LINES;
+                for (const pline of promptLines.slice(0, cap)) {
                     // Indent wrapped prompt lines by 2 spaces
                     const wrapped = wrapLine(pline, Math.max(0, width - 4));
                     for (let i = 0; i < wrapped.length; i++) {
-                        lines.push(dim(i === 0 ? `  ${wrapped[i]}` : `  ${wrapped[i]}`));
+                        lines.push(dim(i === 0 ? `  ${wrapped[i]}` : `  ${wrapped[i]}`, this.theme));
                     }
                 }
-                if (lineCount > 20) {
-                    lines.push(dim(`  … ${lineCount - 20} more lines`));
+                if (lineCount > cap) {
+                    lines.push(dim(`  … ${lineCount - cap} more lines · ^o expand`, this.theme));
                 }
             }
             lines.push("");
         }
-        // ── Activity: running full log of all turns ──────────────────────
+        // ── Activity: running log of all turns ───────────────────────────
+        // Entries are stored verbatim in the model (full commands, full
+        // errors, newlines and all); ALL display normalization happens here:
+        // toDisplayLines splits/sanitizes, wrapLine fits the pane width, and
+        // long entries clamp to LOG_CLAMP_ROWS unless expanded (ctrl+o).
         if (node.kind === "leaf" && node.tailBuffer.length > 0) {
+            const expanded = this.controller.getState().logExpanded;
             const total = node.tailBuffer.length;
-            lines.push(...wrapLine(dim(`Activity · ${total} log line${total === 1 ? "" : "s"}`), width));
+            const modeHint = expanded ? "^o clamp" : "^o expand";
+            lines.push(...wrapLine(dim(`Activity · ${total} log entr${total === 1 ? "y" : "ies"} · ${modeHint}`, this.theme), width));
             for (const tline of node.tailBuffer) {
-                const painted = paintTailLine(tline, this.theme);
-                lines.push(...wrapLine(painted, width));
+                const rows = [];
+                for (const displayLine of toDisplayLines(tline)) {
+                    rows.push(...wrapLine(paintTailLine(displayLine, this.theme), width));
+                }
+                if (expanded || rows.length <= LOG_CLAMP_ROWS) {
+                    lines.push(...rows);
+                }
+                else {
+                    lines.push(...rows.slice(0, LOG_CLAMP_ROWS));
+                    lines.push(dim(`  …(+${rows.length - LOG_CLAMP_ROWS} rows · ^o expand)`, this.theme));
+                }
             }
             lines.push("");
         }
         // ── Outcome ─────────────────────────────────────────────────────
         if (node.outcomePreview) {
-            lines.push(dim("Outcome"));
+            lines.push(dim("Outcome", this.theme));
             for (const oline of node.outcomePreview.split("\n").slice(0, 8)) {
                 const wrapped = wrapLine(oline, Math.max(0, width - 4));
                 for (const wl of wrapped) {
@@ -765,10 +831,11 @@ export class DashboardComponent {
             }
             const lineCount = node.outcomePreview.split("\n").length;
             if (lineCount > 8) {
-                lines.push(dim(`  … ${lineCount - 8} more lines`));
+                lines.push(dim(`  … ${lineCount - 8} more lines`, this.theme));
             }
         }
-        return lines;
+        // IL2: dual-layer width safety — first guard in screen renderer.
+        return truncateLines(lines, width);
     }
     /** Render a cancel-confirmation dialog overlaid on the dashboard.
      *  The dashboard content stays visible above and below the dialog.
@@ -781,34 +848,30 @@ export class DashboardComponent {
     overlayCancelConfirm(baseLines, width, targetId) {
         const node = this.controller.getNode(targetId);
         const label = node?.label ?? targetId;
-        const dim = (s) => this.theme.fg("dim", s);
-        const warn = (s) => this.theme.fg("warning", s);
-        const bold = (s) => this.theme.bold(s);
-        const brd = (s) => this.theme.fg("border", s);
         // Content width is the full width minus the two outer │ borders.
         const contentWidth = width - 2;
         // Build the dialog box (narrower than the full content area so it
         // floats with padding on each side).
         const dialogW = Math.min(contentWidth, 60);
         const diagLines = [];
-        const prompt = warn(`⚠ Cancel ${bold(label)}?`);
-        const actions = dim("y confirm · n dismiss · esc close");
+        const prompt = warn(`⚠ Cancel ${bold(label, this.theme)}?`, this.theme);
+        const actions = dim("y confirm · n dismiss · esc close", this.theme);
         const promptW = visibleWidth(prompt);
         const actionsW = visibleWidth(actions);
-        diagLines.push(brd("╭") + brd("─".repeat(dialogW - 2)) + brd("╮"));
-        diagLines.push(brd("│") + " ".repeat(dialogW - 2) + brd("│"));
+        diagLines.push(border("╭", this.theme) + border("─".repeat(dialogW - 2), this.theme) + border("╮", this.theme));
+        diagLines.push(border("│", this.theme) + " ".repeat(dialogW - 2) + border("│", this.theme));
         {
             // Place prompt and actions side by side when they fit; stack otherwise.
             const sideBySide = promptW + actionsW + 4 <= dialogW - 2;
             if (sideBySide) {
                 const contentGap = Math.max(1, dialogW - 4 - promptW - actionsW);
-                const contentLine = brd("│") + " " + prompt + " ".repeat(contentGap) + actions + " " + brd("│");
+                const contentLine = border("│", this.theme) + " " + prompt + " ".repeat(contentGap) + actions + " " + border("│", this.theme);
                 if (visibleWidth(contentLine) < dialogW) {
                     // Pad content line to full dialog width.
                     const pad = dialogW - 2 - visibleWidth(contentLine.slice(1, -1));
-                    diagLines.push(brd("│") +
+                    diagLines.push(border("│", this.theme) +
                         " " + prompt + " ".repeat(contentGap + Math.max(0, pad)) + actions +
-                        " " + brd("│"));
+                        " " + border("│", this.theme));
                 }
                 else {
                     diagLines.push(contentLine);
@@ -817,13 +880,13 @@ export class DashboardComponent {
             else {
                 // Stacked: prompt on one line, actions on the next.
                 const promptPad = Math.max(0, dialogW - 2 - 1 - promptW - 1);
-                diagLines.push(brd("│") + " " + prompt + " ".repeat(promptPad) + brd("│"));
+                diagLines.push(border("│", this.theme) + " " + prompt + " ".repeat(promptPad) + border("│", this.theme));
                 const actionsPad = Math.max(0, dialogW - 2 - 1 - actionsW - 1);
-                diagLines.push(brd("│") + " " + actions + " ".repeat(actionsPad) + brd("│"));
+                diagLines.push(border("│", this.theme) + " " + actions + " ".repeat(actionsPad) + border("│", this.theme));
             }
         }
-        diagLines.push(brd("│") + " ".repeat(dialogW - 2) + brd("│"));
-        diagLines.push(brd("╰") + brd("─".repeat(dialogW - 2)) + brd("╯"));
+        diagLines.push(border("│", this.theme) + " ".repeat(dialogW - 2) + border("│", this.theme));
+        diagLines.push(border("╰", this.theme) + border("─".repeat(dialogW - 2), this.theme) + border("╯", this.theme));
         // Center the dialog vertically within the content rows and
         // horizontally within the content area, preserving the outer │
         // borders on every row so the frame stays intact.
@@ -838,28 +901,10 @@ export class DashboardComponent {
             const rightPad = Math.max(0, contentWidth - leftPad - diagVisW);
             // Preserve the outer │ borders: left border + centered dialog + right border.
             result[startRow + i] =
-                brd("│") + " ".repeat(leftPad) + diagLine + " ".repeat(rightPad) + brd("│");
+                border("│", this.theme) + " ".repeat(leftPad) + diagLine + " ".repeat(rightPad) + border("│", this.theme);
         }
         return result;
     }
-    statusLabel(status) {
-        switch (status) {
-            case "completed":
-                return "Completed";
-            case "running":
-                return "Running";
-            case "cancelling":
-                return "Cancelling…";
-            case "cancelled":
-                return "Cancelled";
-            case "failed":
-                return "Failed";
-            case "escalated":
-                return "Escalated";
-            case "pending":
-                return "Pending";
-        }
-    }
     formatMetrics(node) {
         const parts = [];
         if (node.usage.input || node.usage.output || node.usage.cacheRead) {