@bastani/atomic 0.8.13-0 → 0.8.14-0

package/dist/builtin/workflows/src/tui/text-helpers.ts

@@ -1,12 +1,13 @@
 import {
   decodeKittyPrintable,
+  Key,
   matchesKey as piMatchesKey,
   truncateToWidth as piTruncateToWidth,
   visibleWidth,
   type KeyId,
 } from "@earendil-works/pi-tui";
 
-export { visibleWidth };
+export { Key, visibleWidth };
 
 const ANSI_ESCAPE_RE = /^\x1b(?:\[[0-?]*[ -/]*[@-~]|\][^\x07]*(?:\x07|\x1b\\)|_[^\x1b]*(?:\x1b\\))/;
 const MODIFY_OTHER_KEYS_RE = /^\x1b\[27;(\d+);(\d+)~$/;
@@ -14,6 +15,19 @@ const SHIFT_MODIFIER = 1;
 const LOCK_MODIFIER_MASK = 64 + 128;
 const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
 
+export function graphemes(text: string): string[] {
+  return Array.from(segmenter.segment(text), (s) => s.segment);
+}
+
+export interface GraphemeSegment {
+  segment: string;
+  index: number;
+}
+
+export function graphemeSegments(text: string): GraphemeSegment[] {
+  return Array.from(segmenter.segment(text), (s) => ({ segment: s.segment, index: s.index }));
+}
+
 function readAnsiCode(text: string, offset: number): string | null {
   const match = ANSI_ESCAPE_RE.exec(text.slice(offset));
   return match?.[0] ?? null;
@@ -37,9 +51,9 @@ export function truncateToWidth(
   return piTruncateToWidth(text, width, suffix, false);
 }
 
-/** Use pi-tui's key parser/matcher while preserving the local string API. */
-export function matchesKey(data: string, key: string): boolean {
-  return data === key || piMatchesKey(data, key as KeyId);
+/** Use pi-tui's key parser/matcher with typed key identifiers. */
+export function matchesKey(data: string, key: KeyId): boolean {
+  return data === key || piMatchesKey(data, key);
 }
 
 function decodeModifyOtherKeysPrintable(data: string): string | undefined {
@@ -67,6 +81,86 @@ export function decodePrintableKey(data: string): string | undefined {
   return decodeKittyPrintable(data) ?? decodeModifyOtherKeysPrintable(data);
 }
 
+/**
+ * Trim review values without flattening authored line breaks.
+ * Empty or whitespace-only values render as an explicit placeholder.
+ */
+export function formatReviewValue(value: string): string {
+  const trimmed = value.trim();
+  return trimmed.length === 0 ? "<empty>" : trimmed;
+}
+
+/**
+ * Wrap plain text by terminal cell width while preserving paragraph breaks.
+ * Within each paragraph, runs of whitespace collapse to a single space; this
+ * keeps labels/descriptions readable but is not intended for preformatted text.
+ */
+export function wrapPlainText(text: string, width: number): string[] {
+  const budget = Math.max(1, Math.floor(width));
+  const out: string[] = [];
+  for (const paragraph of text.split(/\r?\n/)) {
+    const words = paragraph.trim().split(/\s+/).filter((word) => word.length > 0);
+    if (words.length === 0) {
+      out.push("");
+      continue;
+    }
+    let line = "";
+    for (const word of words) {
+      if (visibleWidth(word) > budget) {
+        if (line.length > 0) {
+          out.push(line);
+          line = "";
+        }
+        let chunk = "";
+        for (const g of graphemes(word)) {
+          if (chunk.length > 0 && visibleWidth(chunk) + visibleWidth(g) > budget) {
+            out.push(chunk);
+            chunk = g;
+          } else {
+            chunk += g;
+          }
+        }
+        line = chunk;
+      } else if (line.length === 0) {
+        line = word;
+      } else if (visibleWidth(line) + 1 + visibleWidth(word) <= budget) {
+        line += " " + word;
+      } else {
+        out.push(line);
+        line = word;
+      }
+    }
+    if (line.length > 0) out.push(line);
+  }
+  return out.length > 0 ? out : [""];
+}
+
+export interface WrappedPrefixedLinesOpts {
+  text: string;
+  width: number;
+  plainPrefix: string;
+  firstPrefix: string;
+  continuationPrefix?: string;
+  suffix?: string;
+  preserveAnsi?: boolean;
+  styleLine?: (line: string, index: number) => string;
+}
+
+/**
+ * Shared ask-style row wrapper for numbered choices and review value rows.
+ * Computes the wrapped text budget from the visible prefix width, then clips
+ * the composed ANSI row so narrow terminals never overflow.
+ */
+export function renderWrappedPrefixedLines(opts: WrappedPrefixedLinesOpts): string[] {
+  const continuationPrefix = opts.continuationPrefix ?? " ".repeat(visibleWidth(opts.plainPrefix));
+  const textBudget = Math.max(1, opts.width - visibleWidth(opts.plainPrefix));
+  return wrapPlainText(opts.text, textBudget).map((line, index) => {
+    const prefix = index === 0 ? opts.firstPrefix : continuationPrefix;
+    const styled = opts.styleLine ? opts.styleLine(line, index) : line;
+    return truncateToWidth(prefix + styled, opts.width, opts.suffix ?? "…", opts.preserveAnsi ?? true);
+  });
+}
+
 export function sliceColumns(
   line: string,
   startCol: number,

package/dist/builtin/workflows/src/tui/widget.ts

@@ -1,15 +1,13 @@
 /**
  * Above-editor background-workflow widget.
  *
- * Visual contract (DESIGN.md §5 · orchestrator-panel-ui.png):
- *  - 3-row outline-pill band header: `[ BACKGROUND ]` accent pill,
- *    `N runs` subtitle in textMuted, right-aligned status-icon badges
- *    (`✓ n  ● n  ○ n  ✗ n`). Same chrome vocabulary as the orchestrator
- *    overlay header — pi-subagents widget identity, atomic palette.
- *  - Two-line entry per run:
- *      line 1: `<status glyph>  <short id>  <bold name>`
- *      line 2: `<dim mode · progress · duration>`
- *  - Blank line between entries; trailing blank trimmed.
+ * Visual contract (DESIGN.md §5):
+ *  - One transparent rounded `BACKGROUND` panel with `N runs` and status
+ *    badges (`✓ n  ● n  ○ n  ✗ n`) in the title.
+ *  - One compact rounded card per run:
+ *      title: `<status glyph>  <short id>  <name>`
+ *      row 1: `<dim mode · progress · duration>`
+ *  - Blank line between cards; trailing blank trimmed.
  *  - Collapsed single-line form below 80 cells:
  *      `▾  N background · X ●` in dim+warning.
  *
@@ -21,8 +19,7 @@
  *
  * cross-ref:
  *  - github.com/nicobailon/pi-subagents src/tui/render.ts buildWidgetLines
- *  - src/tui/header.ts renderBandHeader
- *  - orchestrator-panel-ui.png
+ *  - src/tui/chat-surface.ts renderRoundedBoxLines
  */
 
 import type {
@@ -31,8 +28,8 @@ import type {
 } from "../shared/store-types.js";
 import { elapsedRunMs } from "../shared/timing.js";
 import type { PiTheme } from "./store-widget-installer.js";
-import { renderBandHeader } from "./header.js";
-import type { BandBadge } from "./header.js";
+import { renderRoundedBoxLines } from "./chat-surface.js";
+import type { FlatBandBadge } from "./chat-surface.js";
 import { deriveGraphTheme } from "./graph-theme.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { hexToAnsi, RESET, BOLD } from "./color-utils.js";
@@ -43,7 +40,8 @@ import { hexToAnsi, RESET, BOLD } from "./color-utils.js";
 
 const SHORT_ID_LEN = 6;
 const MAX_VISIBLE_RUNS = 4;
-const RECENT_ENDED_WINDOW_MS = 30_000;
+export const RECENT_ENDED_WINDOW_MS = 30_000;
+const WIDGET_CLOCK_REFRESH_MS = 1_000;
 const COLLAPSED_BREAKPOINT_COLS = 80;
 
 // ---------------------------------------------------------------------------
@@ -75,6 +73,7 @@ function recentlyEnded(run: RunSnapshot, now: number): boolean {
 
 interface RunCounts {
   active: number;
+  paused: number;
   done: number;
   failed: number;
   /** Runs with a pending HIL prompt — surfaced as a separate badge so the
@@ -83,18 +82,43 @@ interface RunCounts {
 }
 
 function countRuns(runs: readonly RunSnapshot[]): RunCounts {
-  const counts: RunCounts = { active: 0, done: 0, failed: 0, awaiting: 0 };
+  const counts: RunCounts = { active: 0, paused: 0, done: 0, failed: 0, awaiting: 0 };
   for (const r of runs) {
-    if (r.endedAt === undefined) counts.active++;
+    if (r.endedAt === undefined && r.status === "paused") counts.paused++;
+    else if (r.endedAt === undefined) counts.active++;
     else if (r.status === "completed") counts.done++;
     else if (r.status === "failed" || r.status === "killed") counts.failed++;
-    if (r.endedAt === undefined && r.pendingPrompt !== undefined) {
+    if (
+      r.endedAt === undefined &&
+      (r.pendingPrompt !== undefined || r.stages.some((s) => s.status === "awaiting_input"))
+    ) {
       counts.awaiting++;
     }
   }
   return counts;
 }
 
+function msUntilNextClockTick(now: number): number {
+  const remainder = now % WIDGET_CLOCK_REFRESH_MS;
+  return remainder === 0 ? WIDGET_CLOCK_REFRESH_MS : WIDGET_CLOCK_REFRESH_MS - remainder;
+}
+
+export function nextWidgetRefreshDelayMs(
+  snap: StoreSnapshot,
+  now = Date.now(),
+): number | undefined {
+  const display = selectDisplayRuns(snap, now);
+  if (display.length === 0) return undefined;
+
+  const hasLiveClock = display.some((run) => run.endedAt === undefined && run.status !== "paused");
+  const clockDelay = hasLiveClock ? msUntilNextClockTick(now) : undefined;
+  const expiryDelays = display
+    .filter((run) => run.endedAt !== undefined)
+    .map((run) => Math.max(1, run.endedAt! + RECENT_ENDED_WINDOW_MS - now + 1));
+  const delays = [clockDelay, ...expiryDelays].filter((delay): delay is number => delay !== undefined);
+  return delays.length === 0 ? undefined : Math.min(...delays);
+}
+
 function selectDisplayRuns(snap: StoreSnapshot, now: number): RunSnapshot[] {
   const all = snap.runs as readonly RunSnapshot[];
   const active = all.filter((r) => isActive(r));
@@ -118,6 +142,8 @@ function statusGlyph(run: RunSnapshot): string {
   switch (run.status) {
     case "running":
       return "●";
+    case "paused":
+      return "❚❚";
     case "completed":
       return "✓";
     case "failed":
@@ -133,6 +159,7 @@ function statusGlyph(run: RunSnapshot): string {
 function statusFg(run: RunSnapshot, theme: GraphTheme): string {
   switch (run.status) {
     case "running":
+    case "paused":
       return theme.warning;
     case "completed":
       return theme.success;
@@ -161,11 +188,11 @@ function progressLabel(run: RunSnapshot): string | undefined {
 
 function elapsedLabel(run: RunSnapshot, now: number): string {
   if (run.endedAt !== undefined) {
-    const ago = formatDuration(now - run.endedAt);
-    if (run.status === "completed") return `complete · ${ago} ago`;
-    if (run.status === "failed") return `failed · ${ago} ago`;
-    if (run.status === "killed") return `killed · ${ago} ago`;
-    return `${run.status} · ${ago} ago`;
+    const elapsed = formatDuration(elapsedRunMs(run, run.endedAt));
+    if (run.status === "completed") return `complete · ${elapsed}`;
+    if (run.status === "failed") return `failed · ${elapsed}`;
+    if (run.status === "killed") return `killed · ${elapsed}`;
+    return `${run.status} · ${elapsed}`;
   }
   if (run.startedAt != null) return formatDuration(elapsedRunMs(run, now));
   return "";
@@ -187,16 +214,26 @@ function metaLine(run: RunSnapshot, now: number): string {
 // Count badges for the band header
 // ---------------------------------------------------------------------------
 
-function countBadges(counts: RunCounts, theme: GraphTheme): BandBadge[] {
-  const badges: BandBadge[] = [];
-  if (counts.active > 0) badges.push({ text: `● ${counts.active}`, fg: theme.warning });
-  // Awaiting input is shown in Sky per DESIGN.md status semantics: it's a
-  // "live, waiting for human" signal — distinct from running (yellow) and
-  // completed (green). Position right after active so it reads as "N of M
-  // running need you".
-  if (counts.awaiting > 0) badges.push({ text: `↵ ${counts.awaiting}`, fg: theme.info });
-  if (counts.done > 0) badges.push({ text: `✓ ${counts.done}`, fg: theme.success });
-  if (counts.failed > 0) badges.push({ text: `✗ ${counts.failed}`, fg: theme.error });
+function countBadges(counts: RunCounts, theme: GraphTheme): FlatBandBadge[] {
+  const badges: FlatBandBadge[] = [];
+  if (counts.active > 0) {
+    badges.push({ text: `● ${counts.active} running`, fg: theme.warning });
+  }
+  if (counts.paused > 0) {
+    badges.push({ text: `❚❚ ${counts.paused} paused`, fg: theme.warning });
+  }
+  // Awaiting input is shown in Sky per DESIGN.md status semantics: a live
+  // human-in-the-loop request that requires attention. Spell it out in the
+  // widget title instead of relying on the ↵ glyph alone.
+  if (counts.awaiting > 0) {
+    badges.push({ text: `↵ ${counts.awaiting} needs attention (attach to workflow with \`/workflow connect\`)`, fg: theme.info });
+  }
+  if (counts.done > 0) {
+    badges.push({ text: `✓ ${counts.done} complete`, fg: theme.success });
+  }
+  if (counts.failed > 0) {
+    badges.push({ text: `✗ ${counts.failed} failed`, fg: theme.error });
+  }
   return badges;
 }
 
@@ -246,14 +283,16 @@ function themedCollapsed(
   const dim = hexToAnsi(theme.dim);
   const muted = hexToAnsi(theme.textMuted);
   const warning = hexToAnsi(theme.warning);
-  const total = counts.active + counts.done + counts.failed;
+  const total = counts.active + counts.paused + counts.done + counts.failed;
   const active = counts.active;
-  return ` ${mauve}▾${RESET}  ${muted}${total} background${RESET}${dim} · ${RESET}${warning}${active} ●${RESET}`;
+  const paused = counts.paused > 0 ? `${dim} · ${RESET}${warning}${counts.paused} ❚❚${RESET}` : "";
+  return ` ${mauve}▾${RESET}  ${muted}${total} background${RESET}${dim} · ${RESET}${warning}${active} ●${RESET}${paused}`;
 }
 
 function plainCollapsed(counts: RunCounts): string {
-  const total = counts.active + counts.done + counts.failed;
-  return ` ▾  ${total} background · ${counts.active} ●`;
+  const total = counts.active + counts.paused + counts.done + counts.failed;
+  const paused = counts.paused > 0 ? ` · ${counts.paused} ❚❚` : "";
+  return ` ▾  ${total} background · ${counts.active} ●${paused}`;
 }
 
 // ---------------------------------------------------------------------------
@@ -283,7 +322,8 @@ export function buildThemedWidgetLines(
   // Active + recently-ended dominate the badge counts so a finished run
   // visually persists for a beat before dropping off.
   const visibleCounts: RunCounts = {
-    active: counts.active,
+    active: display.filter((r) => r.endedAt === undefined && r.status !== "paused").length,
+    paused: display.filter((r) => r.endedAt === undefined && r.status === "paused").length,
     done: display.filter((r) => r.endedAt !== undefined && r.status === "completed").length,
     failed: display.filter((r) => r.endedAt !== undefined && (r.status === "failed" || r.status === "killed")).length,
     awaiting: counts.awaiting,
@@ -297,47 +337,29 @@ export function buildThemedWidgetLines(
     return [themed ? themedCollapsed(visibleCounts, graphTheme) : plainCollapsed(visibleCounts)];
   }
 
-  const total = counts.active + counts.done + counts.failed;
+  const total = counts.active + counts.paused + counts.done + counts.failed;
   const subtitle = `${total} run${total === 1 ? "" : "s"}`;
 
-  const lines: string[] = [];
-
-  if (themed) {
-    const badges = countBadges(visibleCounts, graphTheme);
-    // Cap the chrome width to ~min(width, 64) so a wide terminal doesn't
-    // stretch the band across the whole pane.
-    const chromeWidth = Math.min(width, 64);
-    lines.push(...renderBandHeader({
-      label: "BACKGROUND",
-      subtitle,
-      badges,
-      width: chromeWidth,
-      theme: graphTheme,
-    }));
-  } else {
-    // Plain band: 3 rows mirroring the outline-pill shape, ASCII-only.
-    const innerLen = " BACKGROUND ".length;
-    const inner = "─".repeat(innerLen);
-    const badges = countBadges(visibleCounts, graphTheme)
-      .map((b) => b.text)
-      .join("  ");
-    const subtitleSeg = `  ${subtitle}`;
-    const badgeTail = badges ? `   ${badges}` : "";
-    lines.push(` ╭${inner}╮${subtitleSeg.replace(/./g, " ")}${badgeTail.replace(/./g, " ")}`);
-    lines.push(` │ BACKGROUND │${subtitleSeg}${badgeTail}`);
-    lines.push(` ╰${inner}╯${subtitleSeg.replace(/./g, " ")}${badgeTail.replace(/./g, " ")}`);
-  }
+  const badges = countBadges(visibleCounts, graphTheme).map((b) => b.text).join("  ");
+  const title = `BACKGROUND  ${subtitle}${badges ? `  ${badges}` : ""}`;
+  const body: string[] = [];
 
   for (let i = 0; i < display.length; i++) {
     const run = display[i]!;
     const runLines = themed
       ? themedRunLines(run, now, graphTheme)
       : plainRunLines(run, now);
-    lines.push(...runLines);
-    if (i < display.length - 1) lines.push("");
+    body.push(...runLines);
+    if (i < display.length - 1) body.push("");
   }
 
-  return lines;
+  return renderRoundedBoxLines({
+    title,
+    bodyLines: body,
+    accent: themed ? graphTheme.border : undefined,
+    theme: themed ? graphTheme : undefined,
+    width,
+  });
 }
 
 /**

package/dist/builtin/workflows/src/tui/workflow-attach-pane.ts

@@ -30,6 +30,7 @@ import type {
   StageControlHandle,
   StageControlRegistry,
 } from "../runs/foreground/stage-control-registry.js";
+import type { StageUiBroker } from "../shared/stage-ui-broker.js";
 
 /**
  * Surface used to write Pi's footer/status tag while the attach pane is
@@ -52,6 +53,8 @@ export interface WorkflowAttachPaneOpts {
    * the user attaches to a node. Defaults to the singleton registry.
    */
   stageControlRegistry?: StageControlRegistry;
+  /** Broker used to route stage-local custom UI such as ask_user_question into attached chats. */
+  stageUiBroker?: StageUiBroker;
   /**
    * Optional UI status surface. When present, attaching/detaching
    * updates the `pi-workflows` status tag with `<workflow>/<stage>`.
@@ -67,11 +70,12 @@ export interface WorkflowAttachPaneOpts {
   onPromptResolve?: (runId: string, promptId: string, response: unknown) => void;
   /** Live pi-tui host objects used by attached stage chat to reuse coding-agent editor UI. */
   piTui?: TUI;
+  piTheme?: unknown;
   piKeybindings?: unknown;
   /** Host custom editor factory installed by extensions via ctx.ui.setEditorComponent(). */
   piEditorFactory?: (tui: TUI, theme: EditorTheme, keybindings: unknown) => EditorComponent;
   /** Parent chat rendering settings and extension renderers, inherited from the host UI. */
-  getChatRenderSettings?: () => Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd" | "markdownTheme">> | undefined;
+  getChatRenderSettings?: () => Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd">> | undefined;
   /** Parent footer data provider, inherited so attached chats can render the core coding-agent footer. */
   footerData?: ReadonlyFooterDataProvider;
   /**
@@ -113,6 +117,7 @@ export class WorkflowAttachPane implements Component {
   private theme: GraphTheme;
   private runId: string | null;
   private registry: StageControlRegistry | undefined;
+  private stageUiBroker: StageUiBroker | undefined;
   private uiStatus: AttachUiStatusSurface | undefined;
   private onClose: () => void;
   private onHide?: () => void;
@@ -122,9 +127,10 @@ export class WorkflowAttachPane implements Component {
   private hostRequestRender?: () => void;
   private setMouseScrollTracking?: (enabled: boolean) => void;
   private piTui?: TUI;
+  private piTheme?: unknown;
   private piKeybindings?: unknown;
   private piEditorFactory?: (tui: TUI, theme: EditorTheme, keybindings: unknown) => EditorComponent;
-  private getChatRenderSettings?: () => Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd" | "markdownTheme">> | undefined;
+  private getChatRenderSettings?: () => Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd">> | undefined;
   private footerData?: ReadonlyFooterDataProvider;
 
   private mode: WorkflowAttachPaneMode = "graph";
@@ -138,6 +144,7 @@ export class WorkflowAttachPane implements Component {
     this.theme = opts.graphTheme;
     this.runId = opts.runId;
     this.registry = opts.stageControlRegistry;
+    this.stageUiBroker = opts.stageUiBroker;
     this.uiStatus = opts.uiStatus;
     this.onClose = opts.onClose;
     this.onHide = opts.onHide;
@@ -147,6 +154,7 @@ export class WorkflowAttachPane implements Component {
     this.hostRequestRender = opts.requestRender;
     this.setMouseScrollTracking = opts.setMouseScrollTracking;
     this.piTui = opts.piTui;
+    this.piTheme = opts.piTheme;
     this.piKeybindings = opts.piKeybindings;
     this.piEditorFactory = opts.piEditorFactory;
     this.getChatRenderSettings = opts.getChatRenderSettings;
@@ -226,11 +234,13 @@ export class WorkflowAttachPane implements Component {
       onClose: this.onClose,
       requestRender: this.hostRequestRender,
       piTui: this.piTui,
+      piTheme: this.piTheme,
       piKeybindings: this.piKeybindings,
       piEditorFactory: this.piEditorFactory,
       getChatRenderSettings: this.getChatRenderSettings,
       footerData: this.footerData,
       getViewportRows: this.getViewportRows,
+      stageUiBroker: this.stageUiBroker,
     });
     this.store.recordStageAttached(runId, stageId, true);
     this.mode = "stage-chat";
@@ -286,6 +296,17 @@ export class WorkflowAttachPane implements Component {
     this.uiStatus?.setStatus?.(STATUS_KEY, value);
   }
 
+  setVisible(visible: boolean): void {
+    if (this.mode === "stage-chat" && this.runId && this.lastAttachedStageId) {
+      this.store.recordStageAttached(this.runId, this.lastAttachedStageId, visible);
+      if (visible) this._setAttachedStatus(this.runId, this.lastAttachedStageId);
+      else this.uiStatus?.setStatus?.(STATUS_KEY, undefined);
+      return;
+    }
+    if (visible) this._setBaseStatus();
+    else this.uiStatus?.setStatus?.(STATUS_KEY, undefined);
+  }
+
   private _syncMouseScrollTracking(): void {
     this.setMouseScrollTracking?.(this.wantsMouseScrollTracking());
   }

package/dist/builtin/workflows/src/tui/workflow-list.ts

@@ -1,13 +1,12 @@
 /**
- * `/workflow list` catalogue — chat-surface vocabulary from ui/mockups.html §3.
+ * `/workflow list` catalogue — rounded workflow-tool output surface.
  *
  * Visual contract:
- *  - One full-width `[ WORKFLOWS ]` mauve band (catalogue accent — distinct
- *    from the blue live-run accent used by `[ BACKGROUND ]` / `[ DISPATCHED ]`).
- *  - One card per workflow:
- *      row 1: ▎ stripe · [tag workflow-name]
- *      row 2: ▎ stripe · muted description
- *      row 3: ▎ stripe · dim "inputs"  ·  signature
+ *  - One rounded `WORKFLOWS` panel with the registered count in the title.
+ *  - One rounded card per workflow:
+ *      title: workflow name
+ *      row 1: muted description
+ *      row 2: dim "inputs"  ·  signature
  *  - Hint rows pointing at `/workflow <name> …` and `/workflow inputs <name>`.
  *
  * Truncation policy (ui/mockups.html §4):
@@ -24,13 +23,12 @@
 
 import type { GraphTheme } from "./graph-theme.js";
 import {
-  renderFlatBand,
-  renderTaggedCard,
   renderHintRows,
+  renderRoundedBox,
   ELLIPSIS,
   chatWidth,
 } from "./chat-surface.js";
-import { hexToAnsi, RESET } from "./color-utils.js";
+import { hexToAnsi, RESET, BOLD } from "./color-utils.js";
 import { visibleWidth, truncateToWidth } from "./text-helpers.js";
 
 const INLINE_INPUT_LIMIT = 3;
@@ -58,91 +56,69 @@ export interface RenderWorkflowListOpts {
 }
 
 /**
- * Render the workflow catalogue as a `[ WORKFLOWS ]` band followed by
- * one card per registered workflow.
+ * Render the workflow catalogue as a rounded `WORKFLOWS` panel with
+ * structured rows for each registered workflow.
  */
 export function renderWorkflowList(
   entries: readonly WorkflowListEntry[],
   opts: RenderWorkflowListOpts = {},
 ): string {
-  const lines: string[] = [];
+  const width = effectiveWidth(opts.width);
+  const bodyWidth = Math.max(20, width - 4);
+  const body: string[] = [];
   const subtitle = `${entries.length} registered`;
   const accent = opts.theme?.mauve;
 
-  lines.push(renderFlatBand({
-    label: "WORKFLOWS",
-    subtitle,
-    accent,
-    theme: opts.theme,
-    width: opts.width,
-  }));
-  // Blank line after the band — mirrors the mockup's `.band { padding-bottom }`
-  // + first `.card { margin-top }` (ui/mockups.html §3). The band reads as
-  // a header, not as the first card's row 0.
-  lines.push("");
-
   if (entries.length === 0) {
-    // The blank line emitted after the band already provides spacing
-    // before the empty-state line; no extra spacer needed.
-    lines.push(emptyState(opts.theme));
-    return lines.join("\n");
-  }
-
-  // Blank line between cards mirrors the mockup's `.card { margin: 0.25rem 1.1rem }`
-  // top/bottom margin — without it the three workflow rows collapse into one
-  // visual block (see ui/Screenshot 2026-05-12 "Notice how the spacing is off").
-  for (let i = 0; i < entries.length; i++) {
-    if (i > 0) lines.push("");
-    lines.push(renderWorkflowCard(entries[i]!, opts));
+    body.push(` ${emptyState(opts.theme)} `);
+  } else {
+    for (let i = 0; i < entries.length; i++) {
+      if (i > 0) body.push("");
+      body.push(...renderWorkflowEntry(entries[i]!, { ...opts, width: bodyWidth }));
+    }
   }
 
   if (opts.showHints !== false) {
-    lines.push("");
-    lines.push(
-      renderHintRows(
+    body.push("");
+    body.push(
+      ...renderHintRows(
         [
           { command: "/workflow <name> …", hint: "run a workflow" },
           { command: "/workflow inputs <name>", hint: "inspect input schema" },
         ],
         opts.theme,
-      ),
+      ).split("\n").map((line) => ` ${line} `),
     );
   }
 
-  return lines.join("\n");
+  return renderRoundedBox({
+    title: `WORKFLOWS  ${subtitle}`,
+    bodyLines: body,
+    accent,
+    theme: opts.theme,
+    width,
+  });
 }
 
-function renderWorkflowCard(
+function renderWorkflowEntry(
   entry: WorkflowListEntry,
   opts: RenderWorkflowListOpts,
-): string {
+): string[] {
   const theme = opts.theme;
-  const cardWidth = effectiveWidth(opts.width);
-  const stripPrefix = 3; // "▎  "
-  const interior = Math.max(8, cardWidth - stripPrefix - 1);
-  const accent = theme?.mauve ?? "#000000";
-
-  // The card primitive treats the tag as fixed-width chrome, so clamp the
-  // workflow name before handing it off. Budget by visible cells to keep CJK /
-  // emoji workflow names inside the requested line width in both modes.
-  const tagBudget = Math.max(8, Math.min(TAG_NAME_BUDGET, cardWidth - stripPrefix - 6));
-  const tag = truncateToWidth(entry.name, tagBudget, ELLIPSIS);
-
-  // Row 2: description (muted)
-  const descBudget = Math.max(8, interior - 2);
+  const width = effectiveWidth(opts.width);
+  const interior = Math.max(8, width - 2);
+  const titleBudget = Math.max(8, Math.min(TAG_NAME_BUDGET, interior - 2));
+  const title = truncateToWidth(entry.name, titleBudget, ELLIPSIS);
+  const titleLine = theme
+    ? ` ${hexToAnsi(theme.text)}${BOLD}${title}${RESET} `
+    : ` ${title} `;
+
+  const descBudget = Math.max(8, interior - 4);
   const description = truncateToWidth(entry.description, descBudget, ELLIPSIS);
-  const row2 = paintMuted(description, theme);
+  const row1 = `   ${paintMuted(description, theme)} `;
+  const row2 = `   ${inputsSignatureRow(entry.inputs, interior - 4, theme)} `;
 
-  // Row 3: inputs signature
-  const row3 = inputsSignatureRow(entry.inputs, interior, theme);
-
-  return renderTaggedCard({
-    tag,
-    bodyRows: [row2, row3],
-    accent,
-    width: opts.width,
-    theme,
-  });
+  return [titleLine, row1, row2];
 }
 
 function inputsSignatureRow(