@bastani/atomic 0.8.13-0 → 0.8.14-0

package/dist/builtin/workflows/src/shared/workflow-failures.ts

@@ -0,0 +1,375 @@
+import type { WorkflowFailureKind } from "./store-types.js";
+
+export interface WorkflowFailure {
+  readonly kind: WorkflowFailureKind;
+  /** Original error text, preserved for diagnostics. */
+  readonly message: string;
+  /** Sanitized workflow-facing text shown on run/stage snapshots. */
+  readonly userMessage: string;
+  readonly retryable: boolean;
+  readonly resumable: boolean;
+  readonly cause?: unknown;
+}
+
+export const WORKFLOW_AUTH_FAILURE_MESSAGE =
+  "You must be logged in to run workflows. Run /login and try again.";
+
+const WORKFLOW_FAILURE_KINDS: ReadonlySet<WorkflowFailureKind> = new Set([
+  "auth",
+  "rate_limit",
+  "provider",
+  "cancelled",
+  "unknown",
+]);
+
+export function isWorkflowFailureKind(kind: string): kind is WorkflowFailureKind {
+  return WORKFLOW_FAILURE_KINDS.has(kind as WorkflowFailureKind);
+}
+
+function makeWorkflowFailure(
+  kind: WorkflowFailureKind,
+  message: string,
+  opts: {
+    readonly retryable: boolean;
+    readonly resumable: boolean;
+    readonly cause: unknown;
+    readonly userMessage?: string;
+  },
+): WorkflowFailure {
+  return {
+    kind,
+    message,
+    userMessage: opts.userMessage ?? message,
+    retryable: opts.retryable,
+    resumable: opts.resumable,
+    cause: opts.cause,
+  };
+}
+
+function asRecord(value: unknown): Record<string, unknown> | undefined {
+  return value !== null && typeof value === "object" ? value as Record<string, unknown> : undefined;
+}
+
+function field(value: unknown, key: string): unknown {
+  return asRecord(value)?.[key];
+}
+
+function stringField(value: unknown, key: string): string | undefined {
+  const raw = field(value, key);
+  return typeof raw === "string" && raw.length > 0 ? raw : undefined;
+}
+
+function errorMessage(error: unknown): string {
+  const structuredMessage = structuredErrorMessage(error);
+  if (structuredMessage !== undefined) return structuredMessage;
+  if (error instanceof Error && typeof error.message === "string") return error.message;
+  if (typeof error === "string") return error;
+  return String(error);
+}
+
+function errorName(error: unknown): string | undefined {
+  return error instanceof Error ? error.name : stringField(error, "name");
+}
+
+function structuredErrorMessage(error: unknown): string | undefined {
+  return stringField(error, "errorMessage")
+    ?? stringField(error, "message")
+    ?? stringField(error, "statusText");
+}
+
+type StructuredSignal = {
+  readonly status?: number;
+  readonly code?: string | number;
+  readonly name?: string;
+  readonly stopReason?: string;
+};
+
+function integerFrom(value: unknown): number | undefined {
+  if (typeof value === "number" && Number.isInteger(value)) return value;
+  if (typeof value !== "string" || value.trim().length === 0) return undefined;
+  const parsed = Number(value.trim());
+  return Number.isInteger(parsed) ? parsed : undefined;
+}
+
+function structuredSignal(error: unknown): StructuredSignal {
+  const status = integerFrom(field(error, "status"))
+    ?? integerFrom(field(error, "statusCode"))
+    ?? integerFrom(field(error, "httpStatus"));
+  const rawCode = field(error, "code");
+  const code = typeof rawCode === "string" || typeof rawCode === "number" ? rawCode : undefined;
+  return {
+    ...(status !== undefined ? { status } : {}),
+    ...(code !== undefined ? { code } : {}),
+    ...(errorName(error) !== undefined ? { name: errorName(error)! } : {}),
+    ...(stringField(error, "stopReason") !== undefined ? { stopReason: stringField(error, "stopReason")! } : {}),
+  };
+}
+
+function causeOf(error: unknown): unknown {
+  if (error instanceof Error) return error.cause;
+  return field(error, "cause");
+}
+
+function diagnosticErrors(error: unknown): readonly unknown[] {
+  const diagnostics = field(error, "diagnostics");
+  if (!Array.isArray(diagnostics)) return [];
+  const errors: unknown[] = [];
+  for (const diagnostic of diagnostics) {
+    const diagnosticError = field(diagnostic, "error");
+    errors.push(diagnosticError ?? diagnostic);
+  }
+  return errors;
+}
+
+function normalizeCode(value: string | number | undefined): string | undefined {
+  if (value === undefined) return undefined;
+  return String(value).trim().toLowerCase().replaceAll("-", "_");
+}
+
+function kindFromStatus(status: number | undefined): WorkflowFailureKind | undefined {
+  switch (status) {
+    case 401:
+    case 403:
+      return "auth";
+    case 429:
+      return "rate_limit";
+    case 500:
+    case 502:
+    case 503:
+    case 504:
+      return "provider";
+    default:
+      return undefined;
+  }
+}
+
+function kindFromCode(code: string | number | undefined): WorkflowFailureKind | undefined {
+  const normalized = normalizeCode(code);
+  switch (normalized) {
+    case undefined:
+      return undefined;
+    case "401":
+    case "403":
+    case "auth":
+    case "auth_required":
+    case "authentication_required":
+    case "unauthorized":
+    case "forbidden":
+    case "invalid_api_key":
+    case "missing_api_key":
+      return "auth";
+    case "429":
+    case "rate_limit":
+    case "rate_limit_exceeded":
+    case "too_many_requests":
+    case "quota_exceeded":
+      return "rate_limit";
+    case "aborterror":
+    case "aborted":
+    case "cancelled":
+    case "canceled":
+      return "cancelled";
+    case "500":
+    case "502":
+    case "503":
+    case "504":
+    case "provider_error":
+    case "service_unavailable":
+    case "temporarily_unavailable":
+    case "overloaded":
+      return "provider";
+    default:
+      return undefined;
+  }
+}
+
+function structuredKind(error: unknown, seen = new Set<unknown>()): WorkflowFailureKind | undefined {
+  if (error === undefined || error === null || seen.has(error)) return undefined;
+  if (typeof error === "object") seen.add(error);
+
+  const signal = structuredSignal(error);
+  if (signal.stopReason?.toLowerCase() === "aborted") return "cancelled";
+  const statusKind = kindFromStatus(signal.status);
+  if (statusKind !== undefined) return statusKind;
+  const codeKind = kindFromCode(signal.code) ?? kindFromCode(signal.name);
+  if (codeKind !== undefined) return codeKind;
+
+  for (const diagnosticError of diagnosticErrors(error)) {
+    const diagnosticKind = structuredKind(diagnosticError, seen);
+    if (diagnosticKind !== undefined) return diagnosticKind;
+  }
+
+  return structuredKind(causeOf(error), seen);
+}
+
+function failureForKind(kind: WorkflowFailureKind, message: string, cause: unknown): WorkflowFailure {
+  switch (kind) {
+    case "auth":
+      return makeWorkflowFailure("auth", message, {
+        userMessage: WORKFLOW_AUTH_FAILURE_MESSAGE,
+        retryable: true,
+        resumable: true,
+        cause,
+      });
+    case "rate_limit":
+      return makeWorkflowFailure("rate_limit", message, {
+        retryable: true,
+        resumable: true,
+        cause,
+      });
+    case "cancelled":
+      return makeWorkflowFailure("cancelled", message, {
+        retryable: false,
+        resumable: false,
+        cause,
+      });
+    case "provider":
+      return makeWorkflowFailure("provider", message, {
+        retryable: true,
+        resumable: true,
+        cause,
+      });
+    case "unknown":
+      return makeWorkflowFailure("unknown", message, {
+        retryable: false,
+        resumable: true,
+        cause,
+      });
+  }
+}
+
+type TokenMatch = readonly string[];
+
+function tokenize(value: string): readonly string[] {
+  const tokens: string[] = [];
+  let current = "";
+  for (const char of value.toLowerCase()) {
+    if ((char >= "a" && char <= "z") || (char >= "0" && char <= "9")) {
+      current += char;
+    } else if (current.length > 0) {
+      tokens.push(current);
+      current = "";
+    }
+  }
+  if (current.length > 0) tokens.push(current);
+  return tokens;
+}
+
+function hasPhrase(tokens: readonly string[], phrase: TokenMatch): boolean {
+  if (phrase.length === 0 || phrase.length > tokens.length) return false;
+  for (let index = 0; index <= tokens.length - phrase.length; index += 1) {
+    let matched = true;
+    for (let offset = 0; offset < phrase.length; offset += 1) {
+      if (tokens[index + offset] !== phrase[offset]) {
+        matched = false;
+        break;
+      }
+    }
+    if (matched) return true;
+  }
+  return false;
+}
+
+function hasAnyPhrase(tokens: readonly string[], phrases: readonly TokenMatch[]): boolean {
+  return phrases.some((phrase) => hasPhrase(tokens, phrase));
+}
+
+function tokenNearAny(tokens: readonly string[], anchor: string, candidates: ReadonlySet<string>, distance: number): boolean {
+  for (let index = 0; index < tokens.length; index += 1) {
+    if (tokens[index] !== anchor) continue;
+    const start = Math.max(0, index - distance);
+    const end = Math.min(tokens.length - 1, index + distance);
+    for (let cursor = start; cursor <= end; cursor += 1) {
+      if (cursor !== index && candidates.has(tokens[cursor]!)) return true;
+    }
+  }
+  return false;
+}
+
+const AUTH_PHRASES: readonly TokenMatch[] = [
+  ["no", "api", "key"],
+  ["api", "key", "not", "found"],
+  ["missing", "api", "key"],
+  ["no", "model", "selected"],
+  ["no", "models", "available"],
+  ["not", "logged", "in"],
+  ["log", "in"],
+  ["login", "required"],
+  ["authentication", "required"],
+  ["unauthorized"],
+];
+
+const RATE_LIMIT_PHRASES: readonly TokenMatch[] = [
+  ["rate", "limit"],
+  ["429"],
+  ["quota"],
+  ["too", "many", "requests"],
+];
+
+const CANCELLED_PHRASES: readonly TokenMatch[] = [
+  ["aborted"],
+  ["cancelled"],
+  ["canceled"],
+];
+
+const PROVIDER_PHRASES: readonly TokenMatch[] = [
+  ["model", "not", "found"],
+  ["overloaded"],
+  ["temporarily", "unavailable"],
+  ["service", "unavailable"],
+  ["503"],
+];
+
+const AUTH_CONTEXT = new Set([
+  "token",
+  "credential",
+  "credentials",
+  "required",
+  "expired",
+  "invalid",
+  "missing",
+  "unauthorized",
+  "login",
+  "signin",
+]);
+
+const MODEL_PROVIDER_CONTEXT = new Set([
+  "unavailable",
+  "overloaded",
+  "temporarily",
+  "service",
+]);
+
+const PROVIDER_CONTEXT = new Set([
+  "error",
+  "failure",
+  "failed",
+  "overloaded",
+  "unavailable",
+  "temporarily",
+  "service",
+]);
+
+function fallbackKindFromMessage(message: string, name: string | undefined): WorkflowFailureKind | undefined {
+  const tokens = tokenize(message);
+  if (hasAnyPhrase(tokens, AUTH_PHRASES) || tokenNearAny(tokens, "oauth", AUTH_CONTEXT, 8)) return "auth";
+  if (hasAnyPhrase(tokens, RATE_LIMIT_PHRASES)) return "rate_limit";
+  if (name?.toLowerCase() === "aborterror" || hasAnyPhrase(tokens, CANCELLED_PHRASES)) return "cancelled";
+  if (
+    hasAnyPhrase(tokens, PROVIDER_PHRASES)
+    || tokenNearAny(tokens, "model", MODEL_PROVIDER_CONTEXT, 8)
+    || tokenNearAny(tokens, "provider", PROVIDER_CONTEXT, 8)
+  ) return "provider";
+  return undefined;
+}
+
+export function classifyWorkflowFailure(error: unknown): WorkflowFailure {
+  const message = errorMessage(error);
+  const structured = structuredKind(error);
+  if (structured !== undefined) return failureForKind(structured, message, error);
+
+  const fallback = fallbackKindFromMessage(message, errorName(error));
+  if (fallback !== undefined) return failureForKind(fallback, message, error);
+
+  return failureForKind("unknown", message, error);
+}

package/dist/builtin/workflows/src/tui/chat-surface.ts

@@ -82,6 +82,55 @@ export interface FlatBandBadge {
   fg?: string;
 }
 
+export interface RenderRoundedBoxOpts {
+  /** Title embedded in the top border. Keep it short; it is truncated to fit. */
+  title?: string;
+  /** Body lines. ANSI is preserved and each line is width-clamped. */
+  bodyLines: readonly string[];
+  /** Full box width in visible cells. */
+  width?: number;
+  /** Optional theme for ANSI border/text chrome. */
+  theme?: GraphTheme;
+  /** Border/title colour. Defaults to theme.border or plain output. */
+  accent?: string;
+}
+
+/**
+ * Render a width-stable rounded box (`╭╮╰╯`) around arbitrary body lines.
+ * This is the shared workflow-tool output container: panels, cards, and
+ * compact notices all use the same border vocabulary.
+ */
+export function renderRoundedBox(opts: RenderRoundedBoxOpts): string {
+  const width = chatWidth(opts.width);
+  return renderRoundedBoxLines({ ...opts, width }).join("\n");
+}
+
+/** Render a rounded box as individual width-stable lines. */
+export function renderRoundedBoxLines(opts: RenderRoundedBoxOpts & { width: number }): string[] {
+  const width = Math.max(MIN_WIDTH, opts.width);
+  const inner = Math.max(2, width - 2);
+  const theme = opts.theme;
+  const border = theme ? hexToAnsi(opts.accent ?? theme.border) : "";
+  const reset = theme ? RESET : "";
+
+  const titleBudget = Math.max(0, inner - 2);
+  const titleText = opts.title && opts.title.length > 0
+    ? ` ${truncateToWidth(opts.title, titleBudget, ELLIPSIS)} `
+    : "";
+  const topFill = Math.max(0, inner - visibleWidth(titleText));
+  const top = `${border}╭${titleText}${"─".repeat(topFill)}╮${reset}`;
+
+  const body = opts.bodyLines.length > 0 ? opts.bodyLines : [""];
+  const rows = body.map((line) => {
+    const clipped = truncateToWidth(line, inner, ELLIPSIS, theme !== undefined);
+    const pad = Math.max(0, inner - visibleWidth(clipped));
+    return `${border}│${reset}${clipped}${" ".repeat(pad)}${border}│${reset}`;
+  });
+
+  const bottom = `${border}╰${"─".repeat(inner)}╯${reset}`;
+  return [top, ...rows, bottom];
+}
+
 export interface RenderFlatBandOpts {
   /** Pill label, e.g. `"BACKGROUND"`, `"DISPATCHED"`, `"WORKFLOWS"`. */
   label: string;
@@ -100,8 +149,8 @@ export interface RenderFlatBandOpts {
 /**
  * Render one full-width band. Themed mode paints the line with the
  * `surface0` background and styles the label, subtitle, and badges with
- * ANSI colours. Plain mode emits `▎ LABEL  subtitle    badge` so the
- * shape carries through to logs.
+ * ANSI colours. Plain mode emits an indented `LABEL  subtitle    badge`
+ * shape so the layout carries through to logs.
  */
 export function renderFlatBand(opts: RenderFlatBandOpts): string {
   const width = chatWidth(opts.width);
@@ -187,8 +236,8 @@ function renderFlatBandPlain(
   const badgeSeg = badges.map((b) => b.text).join("  ");
   // Plain-mode band sits 1 cell from the chat content edge, matching the
   // themed band's leftPad and the card/hint left edges. Single-column
-  // alignment for the band marker, card stripe, and hint arrow.
-  const leftMarker = " ▎ ";
+  // alignment for the band, card, and hint arrow.
+  const leftMarker = "   ";
   const leftW = visibleWidth(leftMarker);
   const subtitleW = visibleWidth(subtitleSeg);
   const badgeW = visibleWidth(badgeSeg);
@@ -239,7 +288,7 @@ export interface RenderTaggedCardOpts {
   theme?: GraphTheme;
 }
 
-const STRIPE_CHAR_THEMED = "▎";
+const STRIPE_CHAR_THEMED = " ";
 const STRIPE_CHAR_PLAIN = "│";
 
 /**
@@ -266,7 +315,7 @@ function renderTaggedCardThemed(
   const tagFg = hexToAnsi(opts.accent);
   const text = hexToAnsi(theme.text);
 
-  // Row 1: ▎ [tag]  title …            ● running
+  // Row 1:   [tag]  title …            ● running
   const tagSeg = `${tagBg}${tagFg}${BOLD} ${opts.tag} ${RESET}`;
   const tagW = opts.tag.length + 2;
   const tagSubtitleSeg = opts.tagSubtitle
@@ -281,14 +330,14 @@ function renderTaggedCardThemed(
     : "";
 
   // Row 1 sits one cell tighter against the stripe than the body rows
-  // (`▎ [tag] title …`) so that the tag pill's interior text starts at
+  // (`  [tag] title …`) so that the tag pill's interior text starts at
   // exactly the same column as every body row's leading character —
-  // `▎ ` (2 cells) + bg-pill leading pad (1 cell) lands tag text at col 4,
-  // and `▎  ` (3 cells) + body content also lands at col 4. The +1
+  // `  ` (2 cells) + bg-pill leading pad (1 cell) lands tag text at col 4,
+  // and `   ` (3 cells) + body content also lands at col 4. The +1
   // hanging indent on the body is what the mockup's §1 / §2 cards show
-  // (ui/mockups.html · `▎ [tag] title` over `▎  body`).
-  const row1StripePrefixW = 2; // "▎ "
-  const bodyStripePrefixW = 3; // "▎  "
+  // (ui/mockups.html · `  [tag] title` over `   body`).
+  const row1StripePrefixW = 2; // "  "
+  const bodyStripePrefixW = 3; // "   "
   const trailingPad = 2;
   const titleSuffixW = opts.titleSuffix ? Math.max(0, opts.titleSuffixWidth ?? 0) : 0;
   const titleSuffixGap = opts.titleSuffix ? 2 : 0;
@@ -316,10 +365,10 @@ function renderTaggedCardThemed(
     width - row1StripePrefixW - tagW - titleSegW - suffixSegW - tagSubtitleW - trailingW - 1,
   );
 
-  // 1-cell leading space on every card line so the stripe `▎` lands at
-  // column 1 — column-aligned with the band's `[ LABEL ]` (which is itself
-  // offset by `leftPad` inside its surface0 fill) and with the hint rows'
-  // `▸` arrow. All three chat-surface families share the same left edge,
+  // 1-cell leading space on every card line so the card content is
+  // column-aligned with the band's `[ LABEL ]` (which is itself offset by
+  // `leftPad` inside its surface0 fill) and with the hint rows' `▸` arrow.
+  // All three chat-surface families share the same left edge,
   // matching the mockup's terminal-padding scheme.
   const row1 =
     ` ${stripe}${STRIPE_CHAR_THEMED}${RESET} ` +
@@ -455,6 +504,7 @@ function stageGlyph(status: StageStatus): string {
     case "completed": return "✓";
     case "running":   return "●";
     case "failed":    return "✗";
+    case "skipped":   return "⊘";
     case "pending":
     default:          return "○";
   }
@@ -465,6 +515,7 @@ function stageColor(status: StageStatus, theme: GraphTheme): string {
     case "completed": return hexToAnsi(theme.success);
     case "running":   return hexToAnsi(theme.warning);
     case "failed":    return hexToAnsi(theme.error);
+    case "skipped":   return hexToAnsi(theme.dim);
     case "pending":
     default:          return hexToAnsi(theme.dim);
   }
@@ -492,7 +543,7 @@ export interface HintRow {
 export function renderHintRows(rows: readonly HintRow[], theme?: GraphTheme): string {
   if (rows.length === 0) return "";
   // 1-cell leading space so the `▸` arrow column-aligns with the band's
-  // `[ LABEL ]` opening bracket and the card stripe `▎`. All three share
+  // `[ LABEL ]` opening bracket and the card content. All three share
   // column 1 — see renderTaggedCardThemed for the alignment contract.
   const indent = " ";
   if (!theme) {

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

@@ -38,7 +38,7 @@ export function buildMergeConnector(fromXs: number[], toX: number): ConnectorRes
 
   // Line 0: top row connecting sources with ─, ┬ at source positions
   // Line 1: vertical drop │ from each source down to target row
-  // Line 2: bottom row ─ connecting to target with ┴ at source positions, └─┘ style
+  // Line 2: bottom row ─ connecting to target with ┴ at source positions
 
   const fromSet = new Set(fromXs.map((x) => x - minX));
   const targetCol = toX - minX;
@@ -69,7 +69,7 @@ export function buildMergeConnector(fromXs: number[], toX: number): ConnectorRes
   for (const fx of fromSet) {
     botChars[fx] = "┴";
   }
-  // Mark target with └ or ┘ or ┴ depending on position
+  // Mark target with a join glyph.
   botChars[targetCol] = "┴";
 
   // Middle line: vertical bars at each source position

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

@@ -3,9 +3,10 @@
  * ui/dispatch-mockup.html §1 (compact two-row redesign).
  *
  * Visual contract:
- *  - One status-coloured tagged card:
- *      row 1: ▎ stripe · [tag runId8] · bold workflowName · k=v · k=v · ● running
- *      row 2 (only on overflow): ▎ stripe ·    k=v · k=v · +N more
+ *  - One rounded `DISPATCHED` panel.
+ *  - One status-coloured rounded run card:
+ *      title: runId8 · workflowName · ● running
+ *      body: compact `k=v · k=v · +N more` input summary when present
  *  - One hint row: ▸ /workflow connect <id>   attach & watch
  *
  * What we deliberately do NOT emit (was in the legacy 7-row layout):
@@ -22,8 +23,7 @@
  *    intent (list other in-flight runs), already discoverable from a
  *    bare `/workflow` invocation and the picker's confirm panel.
  *
- * Plain mode degrades the stripe to `│` and drops ANSI; layout shape is
- * preserved.
+ * Plain mode drops ANSI; the rounded panel/card layout shape is preserved.
  *
  * cross-ref:
  *  - ui/dispatch-mockup.html (before / after side-by-side)
@@ -34,8 +34,8 @@
 
 import type { GraphTheme } from "./graph-theme.js";
 import {
-  renderTaggedCard,
   renderHintRows,
+  renderRoundedBox,
   ELLIPSIS,
   chatWidth,
 } from "./chat-surface.js";
@@ -67,9 +67,10 @@ export interface RenderDispatchConfirmOpts {
 }
 
 /**
- * Render the post-dispatch confirmation: one tagged card carrying the
- * runId, workflow name, inputs summary, and a `● running` status badge,
- * followed by one hint row pointing at `/workflow connect <id>`.
+ * Render the post-dispatch confirmation: one rounded panel containing a
+ * rounded run card with runId, workflow name, inputs summary, and a
+ * `● running` status badge, followed by one hint row pointing at
+ * `/workflow connect <id>`.
  */
 export function renderDispatchConfirm(opts: RenderDispatchConfirmOpts): string {
   const width = effectiveWidth(opts.width);
@@ -87,7 +88,7 @@ export function renderDispatchConfirm(opts: RenderDispatchConfirmOpts): string {
   // workflow name) or wrap to a body row. Budget math mirrors
   // `renderTaggedCard`'s row-1 chrome accounting:
   //
-  //   " "(1) ▎(1) " "(1) [tag](tag.length + 2) "  "(2) title(titleW)
+  //   " "(1)  (1) " "(1) [tag](tag.length + 2) "  "(2) title(titleW)
   //   "  "(2) suffix(suffixW) gap(≥1) trailing(trailingW) " "(1)
   //
   // Solve for the max suffix width that still leaves room for the
@@ -116,14 +117,12 @@ export function renderDispatchConfirm(opts: RenderDispatchConfirmOpts): string {
 
   const hasInputs = Object.keys(opts.inputs).length > 0;
   let titleSuffix: string | undefined;
-  let titleSuffixWidth: number | undefined;
   const bodyRows: string[] = [];
 
   if (hasInputs && inlineBudget >= MIN_INLINE_INPUT_BUDGET) {
     const inline = renderInputsSegment(opts.inputs, inlineBudget, theme);
     if (inline && inline.fitted) {
       titleSuffix = inline.rendered;
-      titleSuffixWidth = inline.visibleWidth;
     }
   }
 
@@ -131,30 +130,29 @@ export function renderDispatchConfirm(opts: RenderDispatchConfirmOpts): string {
   // tight, or the rendered inputs spilled past it. Either way, we use
   // the full body interior (width - body chrome) as the wider canvas.
   if (hasInputs && titleSuffix === undefined) {
-    const BODY_PREFIX_W = 4; // " ▎  " — see renderTaggedCard body prefix
+    const BODY_PREFIX_W = 4; // "    " — see renderTaggedCard body prefix
     const bodyBudget = Math.max(0, width - BODY_PREFIX_W - 1);
     const overflowSeg = renderInputsSegment(opts.inputs, bodyBudget, theme);
     if (overflowSeg) bodyRows.push(overflowSeg.rendered);
   }
 
-  const card = renderTaggedCard({
-    tag,
-    title: opts.workflowName,
-    titleSuffix,
-    titleSuffixWidth,
-    trailing,
-    accent,
-    width: opts.width,
-    theme,
-    bodyRows,
-  });
+  const inputRows = bodyRows.length > 0
+    ? bodyRows.map((row) => `   ${row} `)
+    : [`   ${titleSuffix ?? "started in background"} `];
+  const titleLine = ` ●  ${tag}  ${opts.workflowName}  ${trailing.text} `;
 
   const hints = renderHintRows(
     [{ command: `/workflow connect ${tag}`, hint: "attach & watch" }],
     theme,
-  );
+  ).split("\n").map((line) => ` ${line} `);
 
-  return [card, hints].join("\n");
+  return renderRoundedBox({
+    title: "DISPATCHED",
+    bodyLines: [titleLine, ...inputRows, "", ...hints],
+    accent,
+    theme,
+    width,
+  });
 }
 
 /** First 8 chars of the run UUID — the canonical short form. */