@bastani/atomic 0.8.13-0 → 0.8.14-0

package/dist/builtin/workflows/src/tui/keybindings-adapter.ts

@@ -38,6 +38,17 @@ export interface KeybindingsLike {
   matches(data: string, action: string): boolean;
 }
 
+export const TUI_ACTION = {
+  editorCursorUp: "tui.editor.cursorUp",
+  editorCursorDown: "tui.editor.cursorDown",
+  editorCursorLeft: "tui.editor.cursorLeft",
+  editorCursorRight: "tui.editor.cursorRight",
+  inputSubmit: "tui.input.submit",
+  selectUp: "tui.select.up",
+  selectDown: "tui.select.down",
+  selectConfirm: "tui.select.confirm",
+} as const;
+
 /** Runtime guard for hosts that wire the keybindings manager. */
 export function isKeybindingsLike(kb: unknown): kb is KeybindingsLike {
   return (

package/dist/builtin/workflows/src/tui/node-card.ts

@@ -71,6 +71,8 @@ function pickBorder(
       return theme.error;
     case "blocked":
       return theme.dim;
+    case "skipped":
+      return theme.dim;
     case "pending":
     default:
       // Pending has no semantic colour; the focused-tab carries the
@@ -117,7 +119,6 @@ function durationText(stage: StageSnapshot): string {
 }
 
 function metaText(stage: StageSnapshot): string {
-  if (stage.model) return stage.model;
   const deps = stage.parentIds.length;
   if (deps === 0) return "root";
   return deps === 1 ? "1 dep" : `${deps} deps`;

package/dist/builtin/workflows/src/tui/overlay-adapter.ts

@@ -23,6 +23,7 @@ import { destroyRun } from "../runs/background/status.js";
 import { cancellationRegistry } from "../runs/background/cancellation-registry.js";
 import { stageControlRegistry as defaultStageControlRegistry } from "../runs/foreground/stage-control-registry.js";
 import type { StageControlRegistry } from "../runs/foreground/stage-control-registry.js";
+import type { StageUiBroker } from "../shared/stage-ui-broker.js";
 import type {
   PiCustomComponent,
   PiCustomOverlayFactoryTui,
@@ -35,7 +36,7 @@ import type {
   PiTheme,
 } from "../extension/wiring.js";
 
-export type OverlayChatRenderSettings = Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd" | "markdownTheme">>;
+export type OverlayChatRenderSettings = Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd">>;
 
 export interface OverlayUISurface {
   custom?: PiCustomOverlayFunction;
@@ -105,6 +106,8 @@ export interface BuildGraphOverlayAdapterOpts {
    * Defaults to the singleton registry registered alongside the store.
    */
   stageControlRegistry?: StageControlRegistry;
+  /** Broker used to route stage-local custom UI into attached stage chats. */
+  stageUiBroker?: StageUiBroker;
   /**
    * Destructive kill hook used by graph-mode `q`. The extension factory
    * supplies this so persistence can record a terminal event before the run is
@@ -119,6 +122,7 @@ export function buildGraphOverlayAdapter(
   buildOpts: BuildGraphOverlayAdapterOpts = {},
 ): GraphOverlayPort {
   const registry = buildOpts.stageControlRegistry ?? defaultStageControlRegistry;
+  const stageUiBroker = buildOpts.stageUiBroker;
   const killRun = buildOpts.onKillRun ?? ((id: string): void => {
     destroyRun(id, { store, cancellation: cancellationRegistry });
   });
@@ -161,6 +165,7 @@ export function buildGraphOverlayAdapter(
   function hideMounted(): void {
     setMouseScrollTracking(false);
     if (currentHandle) {
+      currentView?.setVisible(false);
       currentHandle.setHidden(true);
       currentHandle.unfocus();
       return;
@@ -203,6 +208,7 @@ export function buildGraphOverlayAdapter(
     // Already mounted but hidden — flip visibility without remounting.
     if (mounted && currentHandle?.isHidden()) {
       currentView?.retarget(runId, stageId);
+      currentView?.setVisible(true);
       setMouseScrollTracking(currentView?.wantsMouseScrollTracking() ?? true);
       currentHandle.setHidden(false);
       currentHandle.focus();
@@ -242,6 +248,7 @@ export function buildGraphOverlayAdapter(
         graphTheme: deriveGraphThemeFromPiTheme(theme),
         runId,
         stageControlRegistry: registry,
+        stageUiBroker,
         uiStatus,
         onClose: finish,
         onHide: hideMounted,
@@ -296,6 +303,7 @@ export function buildGraphOverlayAdapter(
     // no scroll-pollution).
     if (mounted && currentHandle) {
       const nowHidden = !currentHandle.isHidden();
+      currentView?.setVisible(!nowHidden);
       setMouseScrollTracking(
         nowHidden ? false : currentView?.wantsMouseScrollTracking() ?? true,
       );

package/dist/builtin/workflows/src/tui/prompt-card.ts

@@ -12,9 +12,9 @@
  *   │                                               │
  *   │  <message>                                    │
  *   │                                               │
- *   │  ┌ response ─────────────────────────────┐    │
+ *   │  ╭ response ─────────────────────────────╮    │
  *   │  │ <text input / choice cycler>          │    │
- *   │  └───────────────────────────────────────┘    │
+ *   │  ╰───────────────────────────────────────╯    │
  *   │                                               │
  *   │  ↵ submit · esc skip                          │
  *   ╰───────────────────────────────────────────────╯
@@ -37,7 +37,7 @@ import {
 import type { PendingPrompt } from "../shared/store-types.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { hexToAnsi, hexBg, paint, RESET, BOLD } from "./color-utils.js";
-import { matchesKey } from "./text-helpers.js";
+import { Key, matchesKey } from "./text-helpers.js";
 
 // ---------------------------------------------------------------------------
 // State
@@ -99,7 +99,7 @@ export function handlePromptCardInput(
   data: string,
   state: PromptCardState,
 ): PromptCardAction {
-  if (matchesKey(data, "ctrl+c") || matchesKey(data, "escape")) {
+  if (matchesKey(data, Key.ctrl("c")) || matchesKey(data, Key.escape)) {
     return { kind: "cancel" };
   }
 
@@ -119,17 +119,17 @@ function handleConfirm(
   data: string,
   state: PromptCardState,
 ): PromptCardAction {
-  if (matchesKey(data, "left") || matchesKey(data, "right") || matchesKey(data, "space") || matchesKey(data, "tab")) {
+  if (matchesKey(data, Key.left) || matchesKey(data, Key.right) || matchesKey(data, Key.space) || matchesKey(data, Key.tab)) {
     state.confirmValue = !state.confirmValue;
     return { kind: "noop" };
   }
-  if (data === "y" || data === "Y") {
+  if (matchesKey(data, "y") || matchesKey(data, Key.shift("y"))) {
     return { kind: "submit", response: true };
   }
-  if (data === "n" || data === "N") {
+  if (matchesKey(data, "n") || matchesKey(data, Key.shift("n"))) {
     return { kind: "submit", response: false };
   }
-  if (matchesKey(data, "enter")) {
+  if (matchesKey(data, Key.enter)) {
     return { kind: "submit", response: state.confirmValue };
   }
   return { kind: "noop" };
@@ -138,7 +138,7 @@ function handleConfirm(
 function handleSelect(data: string, state: PromptCardState): PromptCardAction {
   const choices = state.prompt.choices ?? [];
   if (choices.length === 0) {
-    if (matchesKey(data, "enter")) {
+    if (matchesKey(data, Key.enter)) {
       return { kind: "submit", response: "" };
     }
     return { kind: "noop" };
@@ -155,24 +155,24 @@ function handleSelect(data: string, state: PromptCardState): PromptCardAction {
 }
 
 function handleInput(data: string, state: PromptCardState): PromptCardAction {
-  if (matchesKey(data, "enter")) {
+  if (matchesKey(data, Key.enter)) {
     return { kind: "submit", response: state.rawText };
   }
   return applyTextEdit(data, state);
 }
 
 function handleEditor(data: string, state: PromptCardState): PromptCardAction {
-  if (matchesKey(data, "tab") || matchesKey(data, "shift+tab")) {
+  if (matchesKey(data, Key.tab) || matchesKey(data, Key.shift("tab"))) {
     state.editorSubmitFocused = !state.editorSubmitFocused;
     return { kind: "noop" };
   }
   if (state.editorSubmitFocused) {
-    if (matchesKey(data, "enter")) {
+    if (matchesKey(data, Key.enter)) {
       return { kind: "submit", response: state.rawText };
     }
     return { kind: "noop" };
   }
-  if (matchesKey(data, "enter")) {
+  if (matchesKey(data, Key.enter)) {
     state.rawText = state.rawText.slice(0, state.caret) + "\n" + state.rawText.slice(state.caret);
     state.caret += 1;
     return { kind: "noop" };
@@ -184,15 +184,15 @@ function applyTextEdit(
   data: string,
   state: PromptCardState,
 ): PromptCardAction {
-  if (matchesKey(data, "left")) {
+  if (matchesKey(data, Key.left)) {
     state.caret = previousGraphemeBoundary(state.rawText, state.caret);
     return { kind: "noop" };
   }
-  if (matchesKey(data, "right")) {
+  if (matchesKey(data, Key.right)) {
     state.caret = nextGraphemeBoundary(state.rawText, state.caret);
     return { kind: "noop" };
   }
-  if (matchesKey(data, "backspace")) {
+  if (matchesKey(data, Key.backspace)) {
     if (state.caret > 0) {
       const prev = previousGraphemeBoundary(state.rawText, state.caret);
       state.rawText = state.rawText.slice(0, prev) + state.rawText.slice(state.caret);
@@ -335,8 +335,8 @@ function normalizeSelectKeyData(data: string): string {
   // The historical prompt card accepted left/right as select aliases; feed the
   // corresponding vertical key into pi-tui's SelectList so it owns the actual
   // wrap/clamp/selection update behavior.
-  if (matchesKey(data, "right")) return "\x1b[B";
-  if (matchesKey(data, "left")) return "\x1b[A";
+  if (matchesKey(data, Key.right)) return "\x1b[B";
+  if (matchesKey(data, Key.left)) return "\x1b[A";
   return data;
 }
 
@@ -372,7 +372,7 @@ export function renderPromptCard(opts: PromptCardRenderOpts): string[] {
   }
   lines.push(makePaddedRow(bg, borderColor, innerWidth, ""));
 
-  const fieldLines = renderResponseField(state, theme, innerWidth - 4, opts.cursorOn);
+  const fieldLines = renderResponseFieldBox(state, theme, innerWidth - 4, opts.cursorOn);
   for (const fl of fieldLines) {
     lines.push(makePaddedRow(bg, borderColor, innerWidth, "  " + fl));
   }
@@ -424,6 +424,33 @@ function wrapText(text: string, width: number): string[] {
   return wrapTextWithAnsi(text, width);
 }
 
+function renderResponseFieldBox(
+  state: PromptCardState,
+  theme: GraphTheme,
+  usable: number,
+  cursorOn: boolean,
+): string[] {
+  const boxWidth = Math.max(4, usable);
+  const contentWidth = Math.max(1, boxWidth - 2);
+  const borderColor = theme.accent;
+  const label = " response ";
+  const labelText = paint(label, theme.textMuted, { bold: true });
+  const labelW = visibleWidth(labelText);
+  const topFill = Math.max(0, boxWidth - labelW - 2);
+  const rows = renderResponseField(state, theme, contentWidth, cursorOn);
+  return [
+    paint("╭", borderColor) + labelText + paint("─".repeat(topFill) + "╮", borderColor),
+    ...rows.map((row) => makeFieldRow(row, contentWidth, borderColor)),
+    paint("╰" + "─".repeat(Math.max(0, boxWidth - 2)) + "╯", borderColor),
+  ];
+}
+
+function makeFieldRow(content: string, width: number, borderColor: string): string {
+  const clipped = truncateToWidth(content, width, "", true);
+  const padded = clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+  return paint("│", borderColor) + padded + paint("│", borderColor);
+}
+
 function renderResponseField(
   state: PromptCardState,
   theme: GraphTheme,

package/dist/builtin/workflows/src/tui/run-detail.ts

@@ -1,10 +1,10 @@
 /**
- * Per-run detail block — the "▎ RUN <id>" surface.
+ * Per-run detail block surface.
  *
  * Pairs with the status-list overview ({@link renderSessionList}) and the
- * above-editor widget. Emits a 3-row band header, key/value run summary,
- * a ▎ STAGES section, and a ▎ ARTIFACTS section, all rendered against the
- * canonical Catppuccin Mocha palette.
+ * above-editor widget. Emits a rounded run panel, key/value run summary,
+ * rounded stage/artifact cards, all rendered against the canonical
+ * Catppuccin Mocha palette.
  *
  * Two output modes:
  *   - **themed**  ANSI Catppuccin chrome (theme supplied)
@@ -13,7 +13,7 @@
  * cross-ref:
  *  - github.com/nicobailon/pi-subagents src/runs/background/run-status.ts
  *    inspectSubagentStatus — the source UX pattern
- *  - DESIGN.md §5 Section Labels (`▎ LABEL`)
+ *  - DESIGN.md §5 Section Labels
  *  - orchestrator-panel-ui.png — band-header chrome
  */
 
@@ -21,8 +21,8 @@ import type { RunDetail } from "../runs/background/status.js";
 import type { StageSnapshot } from "../shared/store-types.js";
 import { elapsedRunMs, elapsedStageMs } from "../shared/timing.js";
 import type { GraphTheme } from "./graph-theme.js";
-import { renderBandHeader } from "./header.js";
-import type { BandBadge } from "./header.js";
+import { renderRoundedBox } from "./chat-surface.js";
+import type { FlatBandBadge } from "./chat-surface.js";
 import { fmtDuration, statusIcon, statusColor } from "./status-helpers.js";
 import { hexToAnsi, RESET, BOLD } from "./color-utils.js";
 import { truncateToWidth, visibleWidth } from "./text-helpers.js";
@@ -62,58 +62,44 @@ function renderPlain(detail: RunDetail, now: number, width: number): string {
 
   const sid = shortId(detail.runId);
   const stateBadge = stateLabel(detail);
-  const innerLabel = ` RUN ${sid} `;
-  const inner = "─".repeat(innerLabel.length);
-  out.push(` ╭${inner}╮`);
-  const headerTailW = visibleWidth(` │${innerLabel}│  `) + visibleWidth(`    ${stateBadge}`);
-  const headerName = truncateToWidth(detail.name, Math.max(1, width - headerTailW), "…");
-  out.push(` │${innerLabel}│  ${headerName}    ${stateBadge}`);
-  out.push(` ╰${inner}╯`);
-  out.push("");
 
-  // Summary key/value lines
   for (const [k, v] of summaryRows(detail, now)) {
     if (v === undefined) continue;
-    const value = truncateToWidth(v, Math.max(1, width - 2 - KEY_COL), "…");
-    out.push(`  ${pad(k, KEY_COL)}${value}`);
+    const value = truncateToWidth(v, Math.max(1, width - 4 - KEY_COL), "…");
+    out.push(` ${pad(k, KEY_COL)}${value} `);
   }
   out.push("");
 
-  // Stages
-  out.push("▎ STAGES");
-  out.push("");
+  out.push(" STAGES ");
   if (detail.stages.length === 0) {
-    out.push("  (no stages recorded yet)");
+    out.push("  (no stages recorded yet) ");
   } else {
     for (const stage of detail.stages) {
-      out.push(`  ${stageLinePlain(stage, now, width - 2)}`);
-      if (stage.error) {
-        const err = truncateToWidth(stage.error.split("\n")[0] ?? "", Math.max(1, width - STAGE_NAME_COL - 11), "…");
-        out.push(`  ${" ".repeat(STAGE_NAME_COL + 2)}error  ${err}`);
-      }
+      out.push(...renderStageRowsPlain(stage, now, width - 4));
     }
   }
   out.push("");
 
-  // Artifacts (best-effort: result + error)
   const artifactRows = artifactRowsFor(detail);
   if (artifactRows.length > 0) {
-    out.push("▎ ARTIFACTS");
-    out.push("");
+    out.push(" ARTIFACTS ");
     for (const [k, v] of artifactRows) {
-      out.push(`  ${pad(k, KEY_COL)}${truncateToWidth(v, Math.max(1, width - 2 - KEY_COL), "…")}`);
+      out.push(` ${pad(k, KEY_COL)}${truncateToWidth(v, Math.max(1, width - 4 - KEY_COL), "…")} `);
     }
     out.push("");
   }
 
-  // Action hints
   if (detail.endedAt === undefined) {
-    out.push(truncateToWidth(`  ▸ workflow interrupt   id=${sid}    cancel`, width, "…"));
+    out.push(truncateToWidth(` ▸ workflow interrupt   id=${sid}    cancel `, width - 2, "…"));
   } else {
-    out.push(truncateToWidth(`  ▸ workflow resume id=${sid}    reopen graph`, width, "…"));
+    out.push(truncateToWidth(` ▸ workflow resume id=${sid}    reopen graph `, width - 2, "…"));
   }
 
-  return out.join("\n");
+  return renderRoundedBox({
+    title: `RUN ${sid}  ${detail.name}  ${stateBadge}`,
+    bodyLines: out,
+    width,
+  });
 }
 
 // ---------------------------------------------------------------------------
@@ -122,7 +108,6 @@ function renderPlain(detail: RunDetail, now: number, width: number): string {
 
 function renderThemed(detail: RunDetail, now: number, theme: GraphTheme, width: number): string {
   const out: string[] = [];
-  const mauve = hexToAnsi(theme.mauve);
   const muted = hexToAnsi(theme.textMuted);
   const dim = hexToAnsi(theme.dim);
   const text = hexToAnsi(theme.text);
@@ -130,68 +115,51 @@ function renderThemed(detail: RunDetail, now: number, theme: GraphTheme, width:
 
   const sid = shortId(detail.runId);
   const badges = stateBadges(detail, theme);
-  // Band-header chrome lives within ~64 cells regardless of terminal width so
-  // it visually echoes the orchestrator overlay (which never spans the whole
-  // pane horizontally either).
-  out.push(...renderBandHeader({
-    label: `RUN ${sid}`,
-    subtitle: detail.name,
-    badges,
-    width: Math.min(64, width),
-    theme,
-  }));
-  out.push("");
 
-  // Summary key/value
   for (const [k, v] of summaryRows(detail, now)) {
     if (v === undefined) continue;
-    const value = truncateToWidth(v, Math.max(1, width - 2 - KEY_COL), "…");
-    out.push(`  ${muted}${pad(k, KEY_COL)}${RESET}${text}${value}${RESET}`);
+    const value = truncateToWidth(v, Math.max(1, width - 4 - KEY_COL), "…");
+    out.push(` ${muted}${pad(k, KEY_COL)}${RESET}${text}${value}${RESET} `);
   }
   out.push("");
 
-  // Stages section
-  out.push(`${mauve}▎${RESET} ${muted}${BOLD}STAGES${RESET}`);
-  out.push("");
+  out.push(` ${muted}${BOLD}STAGES${RESET} `);
   if (detail.stages.length === 0) {
-    out.push(`  ${dim}(no stages recorded yet)${RESET}`);
+    out.push(`  ${dim}(no stages recorded yet)${RESET} `);
   } else {
     for (const stage of detail.stages) {
-      out.push("  " + stageLineThemed(stage, now, theme, width - 2));
-      if (stage.error) {
-        const errFg = hexToAnsi(theme.error);
-        const err = truncateToWidth(stage.error.split("\n")[0] ?? "", Math.max(1, width - STAGE_NAME_COL - 13), "…");
-        out.push(
-          `  ${" ".repeat(STAGE_NAME_COL + 2)}${muted}error${RESET}    ${errFg}${err}${RESET}`,
-        );
-      }
+      out.push(...renderStageRowsThemed(stage, now, theme, width - 4));
     }
   }
   out.push("");
 
-  // Artifacts section
   const artifactRows = artifactRowsFor(detail);
   if (artifactRows.length > 0) {
-    out.push(`${mauve}▎${RESET} ${muted}${BOLD}ARTIFACTS${RESET}`);
-    out.push("");
+    out.push(` ${muted}${BOLD}ARTIFACTS${RESET} `);
     for (const [k, v] of artifactRows) {
-      out.push(`  ${muted}${pad(k, KEY_COL)}${RESET}${dim}${truncateToWidth(v, Math.max(1, width - 2 - KEY_COL), "…")}${RESET}`);
+      out.push(` ${muted}${pad(k, KEY_COL)}${RESET}${dim}${truncateToWidth(v, Math.max(1, width - 4 - KEY_COL), "…")}${RESET} `);
     }
     out.push("");
   }
 
-  // Action hints
   if (detail.endedAt === undefined) {
     out.push(
-      truncateToWidth(`  ${dim}▸${RESET} ${accent}workflow interrupt   id=${sid}${RESET}${dim}    cancel${RESET}`, width, "…"),
+      truncateToWidth(` ${dim}▸${RESET} ${accent}workflow interrupt   id=${sid}${RESET}${dim}    cancel${RESET} `, width - 2, "…"),
     );
   } else {
     out.push(
-      truncateToWidth(`  ${dim}▸${RESET} ${accent}workflow resume id=${sid}${RESET}${dim}    reopen graph${RESET}`, width, "…"),
+      truncateToWidth(` ${dim}▸${RESET} ${accent}workflow resume id=${sid}${RESET}${dim}    reopen graph${RESET} `, width - 2, "…"),
     );
   }
 
-  return out.join("\n");
+  const badgeText = badges.length > 0 ? `  ${badges.map((b) => b.text).join("  ")}` : "";
+  return renderRoundedBox({
+    title: `RUN ${sid}  ${detail.name}${badgeText}`,
+    bodyLines: out,
+    accent: theme.accent,
+    theme,
+    width,
+  });
 }
 
 // ---------------------------------------------------------------------------
@@ -199,19 +167,16 @@ function renderThemed(detail: RunDetail, now: number, theme: GraphTheme, width:
 // ---------------------------------------------------------------------------
 
 function summaryRows(detail: RunDetail, now: number): Array<[string, string | undefined]> {
-  const startedAgo = formatRelative(now - detail.startedAt);
-  const updatedAt = detail.endedAt ?? detail.startedAt;
-  const updatedAgo = formatRelative(now - updatedAt);
   const duration = elapsedRunMs(detail, now);
 
   const rows: Array<[string, string | undefined]> = [
     ["workflow", detail.name],
     ["state", statePlain(detail)],
     ["mode", detail.mode === "chain" ? `chain · ${detail.stages.length} stages` : "single"],
-    ["started", `${formatTime(detail.startedAt)}  (${startedAgo} ago)`],
+    ["started", formatTime(detail.startedAt)],
   ];
   if (detail.endedAt !== undefined) {
-    rows.push(["ended", `${formatTime(detail.endedAt)}  (${updatedAgo} ago)`]);
+    rows.push(["ended", formatTime(detail.endedAt)]);
     rows.push(["duration", fmtDuration(duration)]);
   } else {
     rows.push(["elapsed", fmtDuration(duration)]);
@@ -276,6 +241,28 @@ function stageLineThemed(stage: StageSnapshot, now: number, theme: GraphTheme, w
   );
 }
 
+function renderStageRowsPlain(stage: StageSnapshot, now: number, width: number): string[] {
+  const rows = [` ${stageLinePlain(stage, now, Math.max(1, width - 2))} `];
+  if (stage.error) {
+    rows.push(`   error  ${truncateToWidth(stage.error.split("\n")[0] ?? "", Math.max(1, width - 10), "…")} `);
+  }
+  return rows;
+}
+
+function renderStageRowsThemed(
+  stage: StageSnapshot,
+  now: number,
+  theme: GraphTheme,
+  width: number,
+): string[] {
+  const rows = [` ${stageLineThemed(stage, now, theme, Math.max(1, width - 2))} `];
+  if (stage.error) {
+    const errFg = hexToAnsi(theme.error);
+    rows.push(`   ${hexToAnsi(theme.textMuted)}error${RESET}  ${errFg}${truncateToWidth(stage.error.split("\n")[0] ?? "", Math.max(1, width - 12), "…")}${RESET} `);
+  }
+  return rows;
+}
+
 function stageDurationString(stage: StageSnapshot, now: number): string | undefined {
   const elapsed = elapsedStageMs(stage, now);
   return elapsed === undefined ? undefined : fmtDuration(elapsed);
@@ -298,7 +285,7 @@ function stageActivityString(stage: StageSnapshot): string | undefined {
 // State badges + plain-text equivalents
 // ---------------------------------------------------------------------------
 
-function stateBadges(detail: RunDetail, theme: GraphTheme): BandBadge[] {
+function stateBadges(detail: RunDetail, theme: GraphTheme): FlatBandBadge[] {
   switch (detail.status) {
     case "running":
       return [{ text: "● running", fg: theme.warning }];
@@ -350,7 +337,3 @@ function formatTime(ms: number): string {
   const ss = String(d.getUTCSeconds()).padStart(2, "0");
   return `${hh}:${mm}:${ss}`;
 }
-
-function formatRelative(ms: number): string {
-  return fmtDuration(Math.max(0, ms));
-}

package/dist/builtin/workflows/src/tui/session-confirm.ts

@@ -193,12 +193,18 @@ export function handleKillConfirmInput(
   state: KillConfirmState,
 ): KillConfirmAction {
   // Direct shortcuts bypass focus.
-  if (data === "y" || data === "Y") return { kind: "confirm" };
-  if (data === "n" || data === "N") return { kind: "cancel" };
+  if (matchesKey(data, "y") || matchesKey(data, Key.shift("y"))) return { kind: "confirm" };
+  if (matchesKey(data, "n") || matchesKey(data, Key.shift("n"))) return { kind: "cancel" };
   if (matchesKey(data, Key.escape)) return { kind: "cancel" };
 
   // Tab / arrows toggle focus.
-  if (matchesKey(data, Key.tab) || matchesKey(data, Key.right) || matchesKey(data, Key.left) || data === "h" || data === "l") {
+  if (
+    matchesKey(data, Key.tab) ||
+    matchesKey(data, Key.right) ||
+    matchesKey(data, Key.left) ||
+    matchesKey(data, "h") ||
+    matchesKey(data, "l")
+  ) {
     state.focusedButton = state.focusedButton === 0 ? 1 : 0;
     return { kind: "noop" };
   }

package/dist/builtin/workflows/src/tui/session-picker.ts

@@ -4,7 +4,7 @@
  *
  * Visual contract (DESIGN.md §5 Picker Rows + pi-subagents/src/tui/render-helpers.ts):
  *  - Rounded `╭─ Title ─╮` chrome in `border` colour with title in `accent`.
- *  - Section header rows use the mauve `▎` glyph (matches GraphView).
+ *  - Section header rows use a simple two-space label indent (matches GraphView).
  *  - Selected row: `picker-row-selected` token (blue bg, surface0 fg, bold).
  *  - Footer: dim hints, active key letters in `text`.
  *
@@ -24,7 +24,10 @@ import type { GraphTheme } from "./graph-theme.js";
 import { keyText } from "@bastani/atomic";
 import { fmtDuration, statusIcon, statusColor } from "./status-helpers.js";
 import { hexToAnsi, hexBg, RESET, BOLD } from "./color-utils.js";
-import { matchesKey, truncateToWidth, visibleWidth } from "./text-helpers.js";
+import { Key, matchesKey, truncateToWidth, visibleWidth } from "./text-helpers.js";
+
+const ESCAPE_CODE = 0x1b;
+const DOUBLE_ESCAPE_SEQUENCE = String.fromCharCode(ESCAPE_CODE, ESCAPE_CODE);
 
 // ---------------------------------------------------------------------------
 // State + filtering
@@ -182,7 +185,7 @@ function renderSectionRow(label: string, inner: number, theme: GraphTheme): stri
   const panelBg = hexBg(theme.bg);
   const mauve = hexToAnsi(theme.mauve);
   const muted = hexToAnsi(theme.textMuted);
-  const content = ` ${mauve}▎${RESET}${panelBg} ${muted}${BOLD}${label}${RESET}`;
+  const content = ` ${mauve} ${RESET}${panelBg} ${muted}${BOLD}${label}${RESET}`;
   return `${border}│${RESET}${panelBg}${padTo(content, inner)}${RESET}${border}│${RESET}`;
 }
 
@@ -195,14 +198,14 @@ function renderFilterRow(inner: number, theme: GraphTheme, state: SessionPickerS
   const accent = hexToAnsi(theme.accent);
   const cursor = state.filterFocused ? `${accent}▌${RESET}${panelBg}` : "";
   const label = state.filterFocused ? `${accent}filter` : `${muted}filter`;
-  const prefixPlain = " ▎ filter  ";
+  const prefixPlain = "   filter  ";
   const valueBudget = Math.max(1, inner - visibleWidth(prefixPlain) - (state.filterFocused ? 1 : 0));
   const rawValue = state.query || "(type to filter by name or id)";
   const shownValue = truncateToWidth(rawValue, valueBudget, "…");
   const value = state.query
     ? `${text}${shownValue}${RESET}${panelBg}`
     : `${muted}${shownValue}${RESET}${panelBg}`;
-  const content = ` ${mauve}▎${RESET}${panelBg} ${label}${RESET}${panelBg}  ${value}${cursor}`;
+  const content = ` ${mauve} ${RESET}${panelBg} ${label}${RESET}${panelBg}  ${value}${cursor}`;
   return `${border}│${RESET}${panelBg}${padTo(content, inner)}${RESET}${border}│${RESET}`;
 }
 
@@ -342,15 +345,15 @@ export function handleSessionPickerInput(
 ): SessionPickerAction {
   // Filter mode — typed chars feed the query, Enter/Esc exit.
   if (state.filterFocused) {
-    if (matchesKey(data, "escape") || data === "\x1b\x1b") {
+    if (matchesKey(data, Key.escape) || data === DOUBLE_ESCAPE_SEQUENCE) {
       state.filterFocused = false;
       return { kind: "noop" };
     }
-    if (matchesKey(data, "enter")) {
+    if (matchesKey(data, Key.enter)) {
       state.filterFocused = false;
       return { kind: "noop" };
     }
-    if (matchesKey(data, "backspace")) {
+    if (matchesKey(data, Key.backspace)) {
       state.query = state.query.slice(0, -1);
       state.selectedIndex = 0;
       return { kind: "noop" };
@@ -364,36 +367,36 @@ export function handleSessionPickerInput(
   }
 
   // Navigation mode.
-  if (data === "/") {
+  if (matchesKey(data, "/")) {
     state.filterFocused = true;
     return { kind: "noop" };
   }
-  if (matchesKey(data, "escape")) return { kind: "close" };
-  if (data === "q" || data === "Q") return { kind: "close" };
-  if (data === "a" || data === "A") {
+  if (matchesKey(data, Key.escape)) return { kind: "close" };
+  if (matchesKey(data, "q") || matchesKey(data, Key.shift("q"))) return { kind: "close" };
+  if (matchesKey(data, "a") || matchesKey(data, Key.shift("a"))) {
     state.includeAll = !state.includeAll;
     state.selectedIndex = 0;
     return { kind: "noop" };
   }
 
   // Arrows + j/k.
-  if (matchesKey(data, "down") || data === "j") {
+  if (matchesKey(data, Key.down) || matchesKey(data, "j")) {
     state.selectedIndex = Math.min(state.selectedIndex + 1, Math.max(0, rows.length - 1));
     return { kind: "noop" };
   }
-  if (matchesKey(data, "up") || data === "k") {
+  if (matchesKey(data, Key.up) || matchesKey(data, "k")) {
     if (rows.length > 0 && state.selectedIndex === 0) return { kind: "noop" };
     state.selectedIndex = Math.max(state.selectedIndex - 1, 0);
     return { kind: "noop" };
   }
 
-  if (matchesKey(data, "enter")) {
+  if (matchesKey(data, Key.enter)) {
     const row = rows[state.selectedIndex];
     if (!row) return { kind: "noop" };
     return { kind: "connect", runId: row.run.id };
   }
   // `x` = kill. Avoids collision with vim's `k` = up.
-  if (data === "x" || data === "X") {
+  if (matchesKey(data, "x") || matchesKey(data, Key.shift("x"))) {
     const row = rows[state.selectedIndex];
     if (!row) return { kind: "noop" };
     return { kind: "kill", runId: row.run.id };