@bastani/atomic 0.8.21-0 → 0.8.22-0

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

@@ -25,12 +25,19 @@ import type { ChatMessageRenderOptions, ReadonlyFooterDataProvider } from "@bast
 import type { Store } from "../shared/store.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { GraphView } from "./graph-view.js";
-import { StageChatView } from "./stage-chat-view.js";
+import {
+  StageChatView,
+  type StageChatDetachMetadata,
+  type StageChatDetachReason,
+} from "./stage-chat-view.js";
+import { Key, matchesKey } from "./text-helpers.js";
 import type {
   StageControlHandle,
   StageControlRegistry,
 } from "../runs/foreground/stage-control-registry.js";
 import type { StageUiBroker } from "../shared/stage-ui-broker.js";
+import type { StageSnapshot, StoreSnapshot } from "../shared/store-types.js";
+import { expandWorkflowGraph } from "../shared/expanded-workflow-graph.js";
 
 /**
  * Surface used to write Pi's footer/status tag while the attach pane is
@@ -112,11 +119,14 @@ export interface WorkflowAttachPaneOpts {
    * scrolling and drops non-wheel mouse bytes before they reach the editor.
    */
   setMouseScrollTracking?: (enabled: boolean) => void;
+  /** Optional clock injection for deterministic transition-quarantine tests. */
+  now?: () => number;
 }
 
 export type WorkflowAttachPaneMode = "graph" | "stage-chat";
 
 const STATUS_KEY = "pi-workflows";
+const ENTER_TRANSITION_QUARANTINE_MS = 200;
 
 export class WorkflowAttachPane implements Component {
   private store: Store;
@@ -139,12 +149,25 @@ export class WorkflowAttachPane implements Component {
   private piEditorFactory?: (tui: TUI, theme: EditorTheme, keybindings: unknown) => EditorComponent;
   private getChatRenderSettings?: () => Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd">> | undefined;
   private footerData?: ReadonlyFooterDataProvider;
+  private now: () => number;
 
   private mode: WorkflowAttachPaneMode = "graph";
+  private visible = true;
   private graphView: GraphView;
   private chatView: StageChatView | null = null;
+  private unsubscribeStore: (() => void) | null = null;
+  /** Run id for the currently attached stage chat; graph mode keeps `runId` as the root graph run. */
+  private attachedRunId: string | null = null;
   /** Stage id the user most recently attached to (used to seed focus). */
   private lastAttachedStageId: string | null = null;
+  /** Time-boxed guard for Enter leaking into graph mode during connect/detach transitions. */
+  private graphEnterQuarantineUntil = 0;
+  /** Time-boxed guard for Enter leaking from graph attach into an attached prompt. */
+  private stagePromptEnterQuarantineUntil = 0;
+  /** Last awaiting-input identity observed for graph-mode transition quarantine. */
+  private lastGraphAwaitingInputKey: string | null = null;
+  /** Last awaiting-input identity observed for attached-stage transition quarantine. */
+  private lastStageAwaitingInputKey: string | null = null;
 
   constructor(opts: WorkflowAttachPaneOpts) {
     this.store = opts.store;
@@ -167,12 +190,17 @@ export class WorkflowAttachPane implements Component {
     this.piEditorFactory = opts.piEditorFactory;
     this.getChatRenderSettings = opts.getChatRenderSettings;
     this.footerData = opts.footerData;
+    this.now = opts.now ?? Date.now;
 
+    this.unsubscribeStore = this.store.subscribe((snapshot) => this._handleStoreUpdate(snapshot));
     this.graphView = this._buildGraphView();
 
     if (opts.initialAttachStageId !== undefined && this.runId) {
-      this._attachToStage(this.runId, opts.initialAttachStageId);
+      const target = this._resolveGraphStageTarget(this.runId, opts.initialAttachStageId);
+      this._attachToStage(target.runId, target.stageId);
     } else {
+      this._syncAwaitingInputKeys(this.store.snapshot());
+      this._armGraphEnterQuarantineIfRunNeedsInput();
       this._setBaseStatus();
       this._syncMouseScrollTracking();
     }
@@ -188,12 +216,15 @@ export class WorkflowAttachPane implements Component {
       onHide: this.onHide,
       onKill: this.onKill,
       onPromptResolve: this.onPromptResolve,
-      onStageAttach: (runId, stageId) => this._attachToStage(runId, stageId),
+      onStageAttach: (runId, stageId) => this._attachToStage(runId, stageId, {
+        suppressInitialPromptSubmit: true,
+      }),
       onDetach: () => {
         if (this.onHide) this.onHide();
       },
       initialFocusedStageId,
       getViewportRows: this.getViewportRows,
+      piKeybindings: this.piKeybindings,
       // Gate the host render tick on `graph` mode. While the chat view
       // is attached, the GraphView is hidden behind the chat — firing
       // pi-tui renders for a frame the user can't see is wasted work.
@@ -226,19 +257,33 @@ export class WorkflowAttachPane implements Component {
     return run?.stages.find((s) => s.id === stageId)?.name ?? "stage";
   }
 
-  private _attachToStage(runId: string, stageId: string): void {
-    this.runId = runId;
+  private _attachToStage(
+    runId: string,
+    stageId: string,
+    options: { suppressInitialPromptSubmit?: boolean } = { suppressInitialPromptSubmit: true },
+  ): void {
+    this.graphEnterQuarantineUntil = 0;
+    const snapshot = this.store.snapshot();
+    const graphRunId = this._resolveRunId();
+    this.lastGraphAwaitingInputKey = graphRunId ? this._runAwaitingInputKey(snapshot, graphRunId) : null;
+    this.lastStageAwaitingInputKey = this._stageAwaitingInputKey(snapshot, runId, stageId);
+    this.stagePromptEnterQuarantineUntil =
+      options.suppressInitialPromptSubmit === true && this.lastStageAwaitingInputKey !== null
+        ? this.now() + ENTER_TRANSITION_QUARANTINE_MS
+        : 0;
+    this.attachedRunId = runId;
     this.lastAttachedStageId = stageId;
     const handle: StageControlHandle | undefined = this.registry?.get(runId, stageId);
     this.chatView?.dispose();
-    this.chatView = new StageChatView({
+    let chatView!: StageChatView;
+    chatView = new StageChatView({
       store: this.store,
       graphTheme: this.theme,
       runId,
       stageId,
       workflowName: this._workflowName(runId),
       handle,
-      onDetach: () => this._detachFromStage(),
+      onDetach: (reason, metadata) => this._detachFromStage(reason, metadata),
       onClose: this.onClose,
       requestRender: this.hostRequestRender,
       requestFocus: this.hostRequestFocus,
@@ -250,50 +295,126 @@ export class WorkflowAttachPane implements Component {
       footerData: this.footerData,
       getViewportRows: this.getViewportRows,
       stageUiBroker: this.stageUiBroker,
+      canSubmitPrompt: (candidateRunId, candidateStageId) => (
+        this.visible &&
+        this.mode === "stage-chat" &&
+        this.chatView === chatView &&
+        this.attachedRunId === candidateRunId &&
+        this.lastAttachedStageId === candidateStageId &&
+        this._isStageMarkedAttached(candidateRunId, candidateStageId)
+      ),
     });
-    this.store.recordStageAttached(runId, stageId, true);
+    this.chatView = chatView;
     this.mode = "stage-chat";
+    this.store.recordStageAttached(runId, stageId, this.visible);
     this._setAttachedStatus(runId, stageId);
     this._syncMouseScrollTracking();
   }
 
-  private _detachFromStage(): void {
-    if (this.chatView && this.runId && this.lastAttachedStageId) {
-      this.store.recordStageAttached(this.runId, this.lastAttachedStageId, false);
+  private _detachFromStage(
+    reason: StageChatDetachReason = "user",
+    metadata: StageChatDetachMetadata = {},
+  ): void {
+    if (this.chatView && this.attachedRunId && this.lastAttachedStageId) {
+      this.store.recordStageAttached(this.attachedRunId, this.lastAttachedStageId, false);
     }
     this.chatView?.dispose();
     this.chatView = null;
+    this.attachedRunId = null;
     // Rebuild graph view so the focused stage matches the node we
     // were just attached to (mockup contract: cursor still on
     // `review-a` after Ctrl+D detach).
     this.graphView.dispose();
     this.graphView = this._buildGraphView(this.lastAttachedStageId ?? undefined);
     this.mode = "graph";
+    this.stagePromptEnterQuarantineUntil = 0;
+    this.lastStageAwaitingInputKey = null;
+    this.lastGraphAwaitingInputKey = this.runId ? this._runAwaitingInputKey(this.store.snapshot(), this.runId) : null;
+    this.graphEnterQuarantineUntil =
+      reason === "prompt-resolved" && metadata.suppressNextGraphSubmit === true
+        ? this.now() + ENTER_TRANSITION_QUARANTINE_MS
+        : 0;
     this._setBaseStatus();
     this._syncMouseScrollTracking();
   }
 
   retarget(runId: string | null, stageId?: string): void {
-    if (this.chatView && this.runId && this.lastAttachedStageId) {
-      this.store.recordStageAttached(this.runId, this.lastAttachedStageId, false);
+    if (this.chatView && this.attachedRunId && this.lastAttachedStageId) {
+      this.store.recordStageAttached(this.attachedRunId, this.lastAttachedStageId, false);
     }
     this.chatView?.dispose();
     this.chatView = null;
     this.graphView.dispose();
     this.runId = runId;
+    this.attachedRunId = null;
     this.lastAttachedStageId = null;
     this.mode = "graph";
+    this.graphEnterQuarantineUntil = 0;
+    this.stagePromptEnterQuarantineUntil = 0;
     this.graphView = this._buildGraphView();
+    this._syncAwaitingInputKeys(this.store.snapshot());
 
     if (stageId !== undefined && runId) {
-      this._attachToStage(runId, stageId);
+      const target = this._resolveGraphStageTarget(runId, stageId);
+      this._attachToStage(target.runId, target.stageId);
       return;
     }
 
+    this._armGraphEnterQuarantineIfRunNeedsInput();
     this._setBaseStatus();
     this._syncMouseScrollTracking();
   }
 
+  private _resolveGraphStageTarget(rootRunId: string, stageId: string): { runId: string; stageId: string } {
+    const graph = expandWorkflowGraph(this.store.snapshot(), rootRunId);
+    const match = graph.stages.find((stage) =>
+      stage.id === stageId || stage.workflowGraphTarget.stageId === stageId,
+    );
+    if (match === undefined) return { runId: rootRunId, stageId };
+    return {
+      runId: match.workflowGraphTarget.runId,
+      stageId: match.workflowGraphTarget.stageId,
+    };
+  }
+
+  private _handleStoreUpdate(snapshot: StoreSnapshot): void {
+    if (!this.visible) {
+      this._syncAwaitingInputKeys(snapshot);
+      return;
+    }
+    const runId = this._resolveRunId();
+    if (!runId) {
+      this.lastGraphAwaitingInputKey = null;
+      this.lastStageAwaitingInputKey = null;
+      return;
+    }
+    if (this.mode === "graph") {
+      const key = this._runAwaitingInputKey(snapshot, runId);
+      if (key !== null && key !== this.lastGraphAwaitingInputKey) {
+        this.graphEnterQuarantineUntil = this.now() + ENTER_TRANSITION_QUARANTINE_MS;
+      }
+      this.lastGraphAwaitingInputKey = key;
+      this.lastStageAwaitingInputKey = null;
+      return;
+    }
+    if (this.mode === "stage-chat" && this.attachedRunId && this.lastAttachedStageId) {
+      const key = this._stageAwaitingInputKey(snapshot, this.attachedRunId, this.lastAttachedStageId);
+      if (key !== null && key !== this.lastStageAwaitingInputKey) {
+        this.stagePromptEnterQuarantineUntil = this.now() + ENTER_TRANSITION_QUARANTINE_MS;
+      }
+      this.lastStageAwaitingInputKey = key;
+      this.lastGraphAwaitingInputKey = this._runAwaitingInputKey(snapshot, runId);
+    }
+  }
+
+  private _syncAwaitingInputKeys(snapshot: StoreSnapshot): void {
+    const runId = this._resolveRunId();
+    this.lastGraphAwaitingInputKey = runId ? this._runAwaitingInputKey(snapshot, runId) : null;
+    this.lastStageAwaitingInputKey = this.attachedRunId && this.lastAttachedStageId
+      ? this._stageAwaitingInputKey(snapshot, this.attachedRunId, this.lastAttachedStageId)
+      : null;
+  }
+
   private _setBaseStatus(): void {
     const runId = this._resolveRunId();
     const name = runId ? `pi-workflows/${this._workflowName(runId)}` : "pi-workflows";
@@ -306,9 +427,10 @@ export class WorkflowAttachPane implements Component {
   }
 
   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);
+    this.visible = visible;
+    if (this.mode === "stage-chat" && this.attachedRunId && this.lastAttachedStageId) {
+      this.store.recordStageAttached(this.attachedRunId, this.lastAttachedStageId, visible);
+      if (visible) this._setAttachedStatus(this.attachedRunId, this.lastAttachedStageId);
       else this.uiStatus?.setStatus?.(STATUS_KEY, undefined);
       return;
     }
@@ -327,6 +449,21 @@ export class WorkflowAttachPane implements Component {
     return this.mode === "graph";
   }
 
+  wantsFocusForAwaitingInput(snapshot: StoreSnapshot): boolean {
+    if (!this.visible) return false;
+    const runId = this._resolveRunId();
+    if (!runId) return false;
+    const run = snapshot.runs.find((candidate) => candidate.id === runId);
+    if (!run) return false;
+    if (this.mode === "graph") {
+      return this._runAwaitingInputKey(snapshot, runId) !== null;
+    }
+    if (this.mode !== "stage-chat" || !this.attachedRunId || !this.lastAttachedStageId) return false;
+    const attachedRun = snapshot.runs.find((candidate) => candidate.id === this.attachedRunId);
+    const stage = attachedRun?.stages.find((candidate) => candidate.id === this.lastAttachedStageId);
+    return stage?.attached === true && this._stageSnapshotNeedsInput(stage);
+  }
+
   render(width: number): string[] {
     if (this.mode === "stage-chat" && this.chatView) {
       return this.chatView.render(width);
@@ -335,20 +472,134 @@ export class WorkflowAttachPane implements Component {
   }
 
   handleInput(data: string): boolean | void {
+    if (!this.visible) return false;
     if (this.mode === "stage-chat" && this.chatView) {
+      if (this._shouldQuarantineStagePromptEnter(data)) return true;
       return this.chatView.handleInput(data);
     }
+    if (this._shouldQuarantineGraphEnter(data)) return true;
     return this.graphView.handleInput(data);
   }
 
+  private _shouldQuarantineStagePromptEnter(data: string): boolean {
+    if (this.stagePromptEnterQuarantineUntil <= 0) return false;
+    if (!matchesKey(data, Key.enter)) {
+      this.stagePromptEnterQuarantineUntil = 0;
+      return false;
+    }
+    if (!this.attachedRunId || !this.lastAttachedStageId) {
+      this.stagePromptEnterQuarantineUntil = 0;
+      return false;
+    }
+    if (!this._stageNeedsInput(this.attachedRunId, this.lastAttachedStageId)) {
+      this.stagePromptEnterQuarantineUntil = 0;
+      return false;
+    }
+    const now = this.now();
+    if (now <= this.stagePromptEnterQuarantineUntil) {
+      this.stagePromptEnterQuarantineUntil = now + ENTER_TRANSITION_QUARANTINE_MS;
+      return true;
+    }
+    this.stagePromptEnterQuarantineUntil = 0;
+    return false;
+  }
+
+  private _shouldQuarantineGraphEnter(data: string): boolean {
+    if (this.graphEnterQuarantineUntil <= 0) return false;
+    if (!matchesKey(data, Key.enter)) {
+      this.graphEnterQuarantineUntil = 0;
+      return false;
+    }
+    const now = this.now();
+    if (now <= this.graphEnterQuarantineUntil) {
+      this.graphEnterQuarantineUntil = now + ENTER_TRANSITION_QUARANTINE_MS;
+      return true;
+    }
+    this.graphEnterQuarantineUntil = 0;
+    return false;
+  }
+
+  private _armGraphEnterQuarantineIfRunNeedsInput(): void {
+    const runId = this._resolveRunId();
+    this.graphEnterQuarantineUntil = runId && this._runNeedsInput(runId)
+      ? this.now() + ENTER_TRANSITION_QUARANTINE_MS
+      : 0;
+  }
+
+  private _runNeedsInput(runId: string): boolean {
+    return this._runAwaitingInputKey(this.store.snapshot(), runId) !== null;
+  }
+
+  private _runAwaitingInputKey(snapshot: StoreSnapshot, runId: string): string | null {
+    const run = snapshot.runs.find((candidate) => candidate.id === runId);
+    if (!run) return null;
+    const keys: Array<{ key: string; createdAt: number }> = [];
+    if (run.pendingPrompt) {
+      keys.push({ key: `run-prompt:${run.pendingPrompt.id}`, createdAt: run.pendingPrompt.createdAt });
+    }
+    const graph = expandWorkflowGraph(snapshot, runId);
+    for (const stage of graph.stages) {
+      const key = this._stageAwaitingInputKeyFromSnapshot(stage);
+      if (key) keys.push(key);
+    }
+    if (keys.length === 0) return null;
+    keys.sort((a, b) => b.createdAt - a.createdAt);
+    return keys[0]!.key;
+  }
+
+  private _stageNeedsInput(runId: string, stageId: string): boolean {
+    return this._stageAwaitingInputKey(this.store.snapshot(), runId, stageId) !== null;
+  }
+
+  private _stageAwaitingInputKey(snapshot: StoreSnapshot, runId: string, stageId: string): string | null {
+    const run = snapshot.runs.find((candidate) => candidate.id === runId);
+    const stage = run?.stages.find((candidate) => candidate.id === stageId);
+    return stage ? this._stageAwaitingInputKeyFromSnapshot(stage)?.key ?? null : null;
+  }
+
+  private _stageAwaitingInputKeyFromSnapshot(stage: StageSnapshot): { key: string; createdAt: number } | null {
+    if (stage.pendingPrompt) {
+      return { key: `stage-prompt:${stage.id}:${stage.pendingPrompt.id}`, createdAt: stage.pendingPrompt.createdAt };
+    }
+    if (stage.inputRequest) {
+      return { key: `stage-input:${stage.id}:${stage.inputRequest.id}`, createdAt: stage.inputRequest.createdAt };
+    }
+    if (stage.status === "awaiting_input") {
+      return {
+        key: `stage-awaiting:${stage.id}:${stage.awaitingInputSince ?? "active"}`,
+        createdAt: stage.awaitingInputSince ?? stage.startedAt ?? 0,
+      };
+    }
+    return null;
+  }
+
+  private _isStageMarkedAttached(runId: string, stageId: string): boolean {
+    return this._stageSnapshot(runId, stageId)?.attached === true;
+  }
+
+  private _stageSnapshot(runId: string, stageId: string): StageSnapshot | undefined {
+    const run = this.store.snapshot().runs.find((candidate) => candidate.id === runId);
+    return run?.stages.find((candidate) => candidate.id === stageId);
+  }
+
+  private _stageSnapshotNeedsInput(stage: Pick<StageSnapshot, "pendingPrompt" | "inputRequest" | "status">): boolean {
+    return (
+      stage.pendingPrompt !== undefined ||
+      stage.inputRequest !== undefined ||
+      stage.status === "awaiting_input"
+    );
+  }
+
   invalidate(): void {
     if (this.mode === "stage-chat" && this.chatView) this.chatView.invalidate();
     else this.graphView.invalidate();
   }
 
   dispose(): void {
-    if (this.chatView && this.runId && this.lastAttachedStageId) {
-      this.store.recordStageAttached(this.runId, this.lastAttachedStageId, false);
+    this.unsubscribeStore?.();
+    this.unsubscribeStore = null;
+    if (this.chatView && this.attachedRunId && this.lastAttachedStageId) {
+      this.store.recordStageAttached(this.attachedRunId, this.lastAttachedStageId, false);
     }
     this.chatView?.dispose();
     this.chatView = null;

package/dist/builtin/workflows/src/tui/workflow-notice-card.ts

@@ -0,0 +1,184 @@
+import { renderRoundedBoxLines } from "./chat-surface.js";
+import { BOLD, RESET, hexToAnsi } from "./color-utils.js";
+import type { GraphTheme } from "./graph-theme.js";
+import { truncateToWidth, visibleWidth, wrapPlainText } from "./text-helpers.js";
+
+export type WorkflowNoticeTone = "info" | "success" | "warning" | "error" | "mauve";
+
+export interface WorkflowNoticeCardField {
+  readonly label: string;
+  readonly value: string | undefined;
+  readonly tone?: WorkflowNoticeTone | "text" | "muted";
+}
+
+export interface WorkflowNoticeCardOpts {
+  readonly title: string;
+  readonly glyph: string;
+  readonly headline: string;
+  readonly tone: WorkflowNoticeTone;
+  readonly fields?: readonly WorkflowNoticeCardField[];
+  readonly hints?: readonly string[];
+  readonly footer?: string;
+  readonly fallbackText: string;
+  readonly width: number;
+  readonly theme?: GraphTheme;
+}
+
+const MIN_CARD_WIDTH = 32;
+const FIELD_LABEL_WIDTH = 9;
+
+export function renderWorkflowNoticeCard(opts: WorkflowNoticeCardOpts): string[] {
+  const width = Math.max(1, Math.floor(opts.width));
+  if (width < MIN_CARD_WIDTH) return wrapPlainText(opts.fallbackText, width);
+
+  const theme = opts.theme;
+  const accent = theme ? toneColor(theme, opts.tone) : undefined;
+  const innerWidth = Math.max(2, width - 2);
+  const bodyLines: string[] = [];
+
+  appendHeadline(bodyLines, opts, innerWidth);
+
+  for (const field of opts.fields ?? []) {
+    if (field.value === undefined || field.value.length === 0) continue;
+    appendField(bodyLines, field, innerWidth, theme);
+  }
+
+  for (const hint of opts.hints ?? []) {
+    if (hint.length === 0) continue;
+    appendHint(bodyLines, hint, innerWidth, theme);
+  }
+
+  if (opts.footer && opts.footer.length > 0) {
+    appendFreeText(bodyLines, opts.footer, innerWidth, theme, "muted");
+  }
+
+  return renderRoundedBoxLines({
+    title: opts.title,
+    bodyLines,
+    width,
+    ...(theme ? { theme, accent } : {}),
+  });
+}
+
+function appendHeadline(
+  rows: string[],
+  opts: WorkflowNoticeCardOpts,
+  innerWidth: number,
+): void {
+  const prefix = `${opts.glyph} `;
+  const continuationPrefix = `${" ".repeat(visibleWidth(opts.glyph))} `;
+  const budget = Math.max(1, innerWidth - 1 - visibleWidth(prefix));
+  const lines = wrapPlainText(opts.headline, budget);
+  const theme = opts.theme;
+  const tone = theme ? toneColor(theme, opts.tone) : undefined;
+
+  for (let i = 0; i < lines.length; i++) {
+    const rawPrefix = i === 0 ? prefix : continuationPrefix;
+    const styledPrefix = i === 0
+      ? style(rawPrefix, theme, tone, true)
+      : " ".repeat(visibleWidth(rawPrefix));
+    const line = ` ${styledPrefix}${style(lines[i] ?? "", theme, theme?.text, true)}`;
+    rows.push(fit(line, innerWidth));
+  }
+}
+
+function appendField(
+  rows: string[],
+  field: WorkflowNoticeCardField,
+  innerWidth: number,
+  theme: GraphTheme | undefined,
+): void {
+  const label = truncateToWidth(field.label, FIELD_LABEL_WIDTH, "…").padEnd(FIELD_LABEL_WIDTH, " ");
+  const firstPrefixWidth = 1 + FIELD_LABEL_WIDTH + 1;
+  const firstBudget = Math.max(1, innerWidth - firstPrefixWidth);
+  const value = field.value ?? "";
+  const valueTone = field.tone ?? "text";
+
+  if (visibleWidth(value) <= firstBudget && !value.includes("\n")) {
+    rows.push(
+      fit(
+        ` ${style(label, theme, theme?.dim, true)} ${style(value, theme, colorForField(theme, valueTone))}`,
+        innerWidth,
+      ),
+    );
+    return;
+  }
+
+  rows.push(fit(` ${style(field.label, theme, theme?.dim, true)}`, innerWidth));
+  if (visibleWidth(value) <= innerWidth - 1 && !value.includes("\n")) {
+    rows.push(fit(` ${style(value, theme, colorForField(theme, valueTone))}`, innerWidth));
+    return;
+  }
+  const continuationPrefix = "   ";
+  const continuationBudget = Math.max(1, innerWidth - visibleWidth(continuationPrefix));
+  for (const line of wrapPlainText(value, continuationBudget)) {
+    rows.push(fit(`${continuationPrefix}${style(line, theme, colorForField(theme, valueTone))}`, innerWidth));
+  }
+}
+
+function appendHint(
+  rows: string[],
+  hint: string,
+  innerWidth: number,
+  theme: GraphTheme | undefined,
+): void {
+  const prefix = "▸ ";
+  const continuationPrefix = "  ";
+  const budget = Math.max(1, innerWidth - 1 - visibleWidth(prefix));
+  const lines = wrapPlainText(hint, budget);
+  for (let i = 0; i < lines.length; i++) {
+    const rawPrefix = i === 0 ? prefix : continuationPrefix;
+    const styledPrefix = i === 0
+      ? style(rawPrefix, theme, theme?.accent, true)
+      : " ".repeat(visibleWidth(rawPrefix));
+    rows.push(fit(` ${styledPrefix}${style(lines[i] ?? "", theme, theme?.textMuted)}`, innerWidth));
+  }
+}
+
+function appendFreeText(
+  rows: string[],
+  text: string,
+  innerWidth: number,
+  theme: GraphTheme | undefined,
+  tone: WorkflowNoticeCardField["tone"],
+): void {
+  const budget = Math.max(1, innerWidth - 1);
+  for (const line of wrapPlainText(text, budget)) {
+    rows.push(fit(` ${style(line, theme, colorForField(theme, tone ?? "text"))}`, innerWidth));
+  }
+}
+
+function colorForField(
+  theme: GraphTheme | undefined,
+  tone: WorkflowNoticeCardField["tone"],
+): string | undefined {
+  if (!theme) return undefined;
+  if (tone === "text") return theme.text;
+  if (tone === "muted") return theme.textMuted;
+  return toneColor(theme, tone ?? "info");
+}
+
+function toneColor(theme: GraphTheme, tone: WorkflowNoticeTone): string {
+  switch (tone) {
+    case "success":
+      return theme.success;
+    case "warning":
+      return theme.warning;
+    case "error":
+      return theme.error;
+    case "mauve":
+      return theme.mauve;
+    case "info":
+    default:
+      return theme.info;
+  }
+}
+
+function style(text: string, theme: GraphTheme | undefined, color: string | undefined, bold = false): string {
+  if (!theme || !color || text.length === 0) return text;
+  return `${hexToAnsi(color)}${bold ? BOLD : ""}${text}${RESET}`;
+}
+
+function fit(line: string, width: number): string {
+  return truncateToWidth(line, width, "…", true);
+}