@bastani/atomic 0.8.14-0 → 0.8.15-0

package/dist/builtin/workflows/src/tui/stage-chat-view.ts

@@ -47,7 +47,7 @@ import {
   type ChatMessageRenderOptions,
   type ReadonlyFooterDataProvider,
 } from "@bastani/atomic";
-import { Box, Text } from "@earendil-works/pi-tui";
+import { Box, Editor, Text } from "@earendil-works/pi-tui";
 import type {
   Component,
   EditorComponent,
@@ -63,9 +63,10 @@ import {
   type StageCustomUiRequest,
   type StageUiBroker,
 } from "../shared/stage-ui-broker.js";
-import type { StageNotice, StageSnapshot } from "../shared/store-types.js";
+import type { PendingPrompt, StageNotice, StageSnapshot, StageStatus } from "../shared/store-types.js";
 import type { GraphTheme } from "./graph-theme.js";
 import type { StageControlHandle } from "../runs/foreground/stage-control-registry.js";
+import { isKeybindingsLike } from "./keybindings-adapter.js";
 import { BOLD, RESET, hexBg, hexToAnsi, lerpColor } from "./color-utils.js";
 import { Key, matchesKey, visibleWidth } from "./text-helpers.js";
 import {
@@ -73,11 +74,23 @@ import {
   planStageChatFrame,
   resolveStageChatViewportRows,
 } from "./stage-chat-layout.js";
+import {
+  createPromptCardState,
+  defaultResponseFor,
+  handlePromptCardInput,
+  renderPromptCard,
+  type PromptCardState,
+} from "./prompt-card.js";
+import { renderRoundedBoxLines } from "./chat-surface.js";
 
 // ---------------------------------------------------------------------------
 // Options & types
 // ---------------------------------------------------------------------------
 
+function isReadOnlyArchiveStatus(status: StageStatus): boolean {
+  return status === "completed" || status === "failed" || status === "skipped";
+}
+
 export interface StageChatViewOpts {
   store: Store;
   graphTheme: GraphTheme;
@@ -151,6 +164,7 @@ type AgentSnapshotMessage = AgentSession["messages"][number];
  * overrides this by passing `getViewportRows()`.
  */
 const VIEW_LINE_COUNT = 32;
+const PROMPT_SCROLL_STEP_ROWS = 4;
 
 /** Header strip — `  STAGE  wf / stage   <meta>   ● status` without a leading marker glyph. */
 const HEADER_ROWS = 1;
@@ -180,9 +194,15 @@ export class StageChatView implements Component, Focusable {
   private piTui?: TUI;
   private piTheme?: unknown;
   private piKeybindings?: unknown;
+  private piEditorFactory?: StageChatViewOpts["piEditorFactory"];
   private chatHost: ChatSessionHost<NoticeEntry>;
   private stageUiBroker: StageUiBroker;
   private mountedCustomUi: MountedStageCustomUi | null = null;
+  private promptState: PromptCardState | null = null;
+  private promptEditor: EditorComponent | null = null;
+  private promptEditorPromptId: string | null = null;
+  private promptScrollOffset = 0;
+  private promptMaxScroll = 0;
   private getChatRenderSettings?: () =>
     | Partial<Omit<ChatMessageRenderOptions, "ui" | "cwd">>
     | undefined;
@@ -211,6 +231,7 @@ export class StageChatView implements Component, Focusable {
     this.piTui = opts.piTui;
     this.piTheme = opts.piTheme;
     this.piKeybindings = opts.piKeybindings;
+    this.piEditorFactory = opts.piEditorFactory;
     this.getChatRenderSettings = opts.getChatRenderSettings;
     this.footerData = opts.footerData;
     this.stageUiBroker = opts.stageUiBroker ?? stageUiBroker;
@@ -299,6 +320,7 @@ export class StageChatView implements Component, Focusable {
     const initialStage = this._currentStage();
     this._snapshotMessagesFromSessionFile(initialStage);
     this._absorbStageNotices(initialStage);
+    this._syncPromptState(initialStage?.pendingPrompt);
 
     this._unsubscribeStore = this.store.subscribe(() => {
       const stage = this._currentStage();
@@ -314,6 +336,7 @@ export class StageChatView implements Component, Focusable {
       // `stage.setModel`, `stage.compact`, …) so they thread through the
       // transcript without a special render path.
       changed = this._absorbStageNotices(stage) || changed;
+      changed = this._syncPromptState(stage?.pendingPrompt) || changed;
       this.chatHost.syncAnimationTick();
       if (changed) this.requestRender?.();
     });
@@ -416,6 +439,68 @@ export class StageChatView implements Component, Focusable {
     return run?.stages.find((s) => s.id === this.stageId);
   }
 
+  private _syncPromptState(prompt: PendingPrompt | undefined): boolean {
+    if (!prompt) {
+      const changed = this.promptState !== null;
+      this.promptState = null;
+      this._disposePromptEditor();
+      this.promptScrollOffset = 0;
+      this.promptMaxScroll = 0;
+      return changed;
+    }
+    if (!this.promptState || this.promptState.prompt.id !== prompt.id) {
+      this.promptState = createPromptCardState(prompt);
+      this._resetPromptEditor(prompt);
+      this.promptScrollOffset = 0;
+      this.promptMaxScroll = 0;
+      return true;
+    }
+    return false;
+  }
+
+  private _resetPromptEditor(prompt: PendingPrompt): void {
+    this._disposePromptEditor();
+    if ((prompt.kind !== "input" && prompt.kind !== "editor") || !this.piTui) return;
+    const editor = this.piEditorFactory
+      ? this.piEditorFactory(this.piTui, editorThemeFromGraphTheme(this.theme), this.piKeybindings)
+      : new Editor(this.piTui, editorThemeFromGraphTheme(this.theme), { paddingX: 0 });
+    editor.setText(typeof prompt.initial === "string" ? prompt.initial : "");
+    setEditorPlaceholder(editor, "Type your response…");
+    setEditorBorderColor(editor, (text) => hexToAnsi(this.theme.accent) + text + RESET);
+    editor.onChange = (text: string) => {
+      if (this.promptState?.prompt.id !== prompt.id) return;
+      this.promptState.rawText = text;
+      this.promptState.caret = text.length;
+      this.requestRender?.();
+    };
+    editor.onSubmit = (text: string) => {
+      this._resolvePromptResponse(prompt.id, text);
+    };
+    this.promptEditor = editor;
+    this.promptEditorPromptId = prompt.id;
+  }
+
+  private _disposePromptEditor(): void {
+    const editor = this.promptEditor;
+    this.promptEditor = null;
+    this.promptEditorPromptId = null;
+    const disposable = editor as (EditorComponent & { dispose?: () => void }) | null;
+    disposable?.dispose?.();
+  }
+
+  private _resolvePromptResponse(promptId: string, response: unknown): void {
+    const prompt = this.promptState?.prompt;
+    if (!prompt || prompt.id !== promptId) return;
+    this.promptState = null;
+    this._disposePromptEditor();
+    // A false return means the prompt was already resolved/removed (for
+    // example by run abort). The local UI is already stale, so clearing it is
+    // the least surprising recovery path.
+    this.store.resolveStagePendingPrompt(this.runId, this.stageId, prompt.id, response);
+    this.requestRender?.();
+    this.onDetach();
+  }
+
   // -------------------------------------------------------------------------
   // Frame sizing
   // -------------------------------------------------------------------------
@@ -449,13 +534,13 @@ export class StageChatView implements Component, Focusable {
   private _isPaused(
     stage: StageSnapshot | undefined = this._currentStage(),
   ): boolean {
-    return this.localPaused || stage?.status === "paused";
+    return this.localPaused || stage?.status === "paused" || this._liveHandle()?.status === "paused";
   }
 
   private _isReadOnlyArchive(stage: StageSnapshot | undefined = this._currentStage()): boolean {
     if (this._liveHandle()) return false;
     if (!stage) return true;
-    return stage.status === "completed" || stage.status === "failed" || Boolean(stage.sessionFile);
+    return isReadOnlyArchiveStatus(stage.status) || Boolean(stage.sessionFile);
   }
 
   private async _handleSlashCommand(text: string): Promise<boolean> {
@@ -491,12 +576,15 @@ export class StageChatView implements Component, Focusable {
     const headerLines = this._renderHeader(w, stage);
     const sepLines = [this._sepRule(w)];
     const customUiActive = this.mountedCustomUi !== null;
+    this._syncPromptState(stage?.pendingPrompt);
+    const promptActive = !customUiActive && this.promptState !== null;
     const readOnlyArchive = this._isReadOnlyArchive(stage);
-    const pendingLines = customUiActive || readOnlyArchive ? [] : this.chatHost.renderPendingMessages(w);
-    const workingLines = customUiActive || readOnlyArchive ? [] : this.chatHost.renderWorkingStatus(w);
-    const usageLines = customUiActive || readOnlyArchive ? [] : this.chatHost.renderUsage(w);
-    const editorLines = customUiActive || readOnlyArchive ? [] : this.chatHost.renderEditor(w);
-    const footerLines = customUiActive || readOnlyArchive ? [] : this.chatHost.renderFooter(w);
+    const chatChromeHidden = customUiActive || promptActive || readOnlyArchive;
+    const pendingLines = chatChromeHidden ? [] : this.chatHost.renderPendingMessages(w);
+    const workingLines = chatChromeHidden ? [] : this.chatHost.renderWorkingStatus(w);
+    const usageLines = chatChromeHidden ? [] : this.chatHost.renderUsage(w);
+    const editorLines = chatChromeHidden ? [] : this.chatHost.renderEditor(w);
+    const footerLines = chatChromeHidden ? [] : this.chatHost.renderFooter(w);
 
     const totalRows = this._viewLineCount();
     const plan = planStageChatFrame({
@@ -516,13 +604,20 @@ export class StageChatView implements Component, Focusable {
     const visibleFooterLines = footerLines.slice(0, plan.footerRows);
     const bodyBudget = plan.bodyRows;
     if (blocked) this.chatHost.scrollToBottom();
-    const bodyLines = customUiActive
-      ? this._renderCustomUiBody(w, bodyBudget)
-      : blocked
-        ? this._renderBlockedBody(w, bodyBudget, stage)
-        : readOnlyArchive
-          ? this._renderReadOnlyArchiveBody(w, bodyBudget, stage)
-          : this.chatHost.renderBody(w, bodyBudget);
+
+    let bodyLines: string[];
+    if (customUiActive) {
+      bodyLines = this._renderCustomUiBody(w, bodyBudget);
+    } else if (promptActive) {
+      bodyLines = this._renderPromptBody(w, bodyBudget);
+    } else if (blocked) {
+      bodyLines = this._renderBlockedBody(w, bodyBudget, stage);
+    } else if (readOnlyArchive) {
+      bodyLines = this._renderReadOnlyArchiveBody(w, bodyBudget, stage);
+    } else {
+      bodyLines = this.chatHost.renderBody(w, bodyBudget);
+    }
+
     const lines = [
       ...headerLines,
       ...sepLines,
@@ -592,6 +687,10 @@ export class StageChatView implements Component, Focusable {
     budget: number,
     stage: StageSnapshot | undefined,
   ): string[] {
+    if (stage?.promptFootprint) {
+      return this._renderReadOnlyPromptArchiveBody(width, budget, stage);
+    }
+
     const t = this.theme;
     const calloutRows = 6;
     const transcriptBudget = Math.max(1, budget - calloutRows);
@@ -631,6 +730,78 @@ export class StageChatView implements Component, Focusable {
     return lines;
   }
 
+  private _renderReadOnlyPromptArchiveBody(
+    width: number,
+    budget: number,
+    stage: StageSnapshot,
+  ): string[] {
+    const t = this.theme;
+    const prompt = stage.promptFootprint;
+    if (!prompt) return this._fitBodyLines([], width, budget);
+
+    const innerWidth = Math.max(2, width - 2);
+    const bodyLines: string[] = [];
+    const messageBox = new Box(2, 1);
+    messageBox.addChild(new Text(paint(prompt.message, t.text), 0, 0));
+    bodyLines.push(...messageBox.render(innerWidth));
+    bodyLines.push(...new Text(paint("prompt type", t.textMuted, { bold: true }) + paint(`  ${prompt.kind}`, t.text), 2, 0).render(innerWidth));
+
+    if (prompt.kind === "select" && prompt.choices && prompt.choices.length > 0) {
+      bodyLines.push(...new Text(paint("choices", t.textMuted, { bold: true }), 2, 0).render(innerWidth));
+      for (const choice of prompt.choices) {
+        bodyLines.push(...new Text(paint("• ", t.dim) + paint(choice, t.text), 4, 0).render(innerWidth));
+      }
+    } else if (prompt.kind === "confirm") {
+      bodyLines.push(...new Text(paint("choices", t.textMuted, { bold: true }) + paint("  yes / no", t.text), 2, 0).render(innerWidth));
+    }
+
+    if ((prompt.kind === "input" || prompt.kind === "editor") && prompt.initial && prompt.initial.length > 0) {
+      bodyLines.push(...new Text(paint("initial value shown", t.textMuted, { bold: true }), 2, 0).render(innerWidth));
+      bodyLines.push(...new Text(paint(prompt.initial, t.dim), 4, 0).render(innerWidth));
+    }
+
+    const answer = this._readOnlyPromptAnswer(stage, prompt);
+    bodyLines.push("");
+    bodyLines.push(...new Text(paint("your response", t.textMuted, { bold: true }), 2, 0).render(innerWidth));
+    bodyLines.push(...new Text(paint(answer, answer.startsWith("(") ? t.dim : t.text), 4, 0).render(innerWidth));
+    bodyLines.push(...new Text(
+      paint("esc", t.accent, { bold: true }) +
+        paint(" close", t.textMuted) +
+        paint("  ·  ", t.dim) +
+        paint("ctrl+d", t.accent, { bold: true }) +
+        paint(" return to graph", t.textMuted),
+      2,
+      0,
+    ).render(innerWidth));
+
+    const title = stage.status === "skipped" ? "QUESTION SKIPPED" : "QUESTION ASKED";
+    const cardLines = renderRoundedBoxLines({
+      title,
+      bodyLines,
+      width,
+      theme: t,
+      accent: t.border,
+    });
+    return this._fitPromptBodyLines(cardLines, width, budget);
+  }
+
+  private _readOnlyPromptAnswer(stage: StageSnapshot, prompt: PendingPrompt): string {
+    const answer = this.store.getStagePromptAnswer(this.runId, stage.id);
+    if (answer && answer.promptId === prompt.id) {
+      return formatReadOnlyPromptAnswer(answer.value, prompt.kind);
+    }
+    switch (stage.promptAnswerState) {
+      case "ambiguous":
+        return "(response replay is ambiguous)";
+      case "unavailable":
+        return "(response unavailable)";
+      case "available":
+        return "(response no longer in live memory)";
+      default:
+        return "(no response saved)";
+    }
+  }
+
   private _renderBlockedBody(
     width: number,
     budget: number,
@@ -677,6 +848,62 @@ export class StageChatView implements Component, Focusable {
     const component = this.mountedCustomUi?.component;
     if (component) setComponentFocused(component, this.focused);
     const lines = component ? component.render(width) : [];
+    return this._fitBodyLines(lines, width, budget);
+  }
+
+  private _renderPromptBody(width: number, budget: number): string[] {
+    const primitiveLines = this._renderPrimitivePromptBody(width);
+    if (primitiveLines) return this._fitPromptBodyLines(primitiveLines, width, budget);
+
+    const state = this.promptState;
+    const lines = state
+      ? renderPromptCard({
+        state,
+        theme: this.theme,
+        width,
+        cursorOn: this.focused,
+      })
+      : [];
+    return this._fitPromptBodyLines(lines, width, budget);
+  }
+
+  private _renderPrimitivePromptBody(width: number): string[] | null {
+    const state = this.promptState;
+    const editor = this.promptEditor;
+    if (!state || !editor) return null;
+    setEditorFocused(editor, this.focused);
+    setEditorBorderColor(editor, (text) => hexToAnsi(this.theme.accent) + text + RESET);
+
+    const innerWidth = Math.max(2, width - 2);
+    const bodyLines: string[] = [];
+    const messageBox = new Box(2, 1);
+    messageBox.addChild(new Text(paint(state.prompt.message, this.theme.text), 0, 0));
+    bodyLines.push(...messageBox.render(innerWidth));
+    bodyLines.push(...new Text(paint("response", this.theme.textMuted, { bold: true }), 2, 0).render(innerWidth));
+    for (const line of editor.render(Math.max(20, innerWidth - 4))) {
+      bodyLines.push("  " + line);
+    }
+    bodyLines.push("");
+    bodyLines.push(...new Text(renderHintsForPrompt(state.prompt.kind, this.theme), 2, 0).render(innerWidth));
+
+    return renderRoundedBoxLines({
+      title: "AWAITING INPUT",
+      bodyLines,
+      width,
+      theme: this.theme,
+      accent: this.theme.border,
+    });
+  }
+
+  private _fitPromptBodyLines(lines: readonly string[], width: number, budget: number): string[] {
+    this.promptMaxScroll = Math.max(0, lines.length - budget);
+    this.promptScrollOffset = Math.max(0, Math.min(this.promptScrollOffset, this.promptMaxScroll));
+    const framed = lines.slice(this.promptScrollOffset, this.promptScrollOffset + budget);
+    while (framed.length < budget) framed.push(this._blank(width));
+    return framed;
+  }
+
+  private _fitBodyLines(lines: readonly string[], width: number, budget: number): string[] {
     const framed = lines.slice(0, budget);
     while (framed.length < budget) framed.push(this._blank(width));
     return framed;
@@ -778,6 +1005,35 @@ export class StageChatView implements Component, Focusable {
     return true;
   }
 
+  private _handlePromptInput(data: string): void {
+    const state = this.promptState;
+    if (!state) return;
+    if (this.promptEditor && this.promptEditorPromptId === state.prompt.id) {
+      if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
+        this._resolvePromptResponse(state.prompt.id, defaultResponseFor(state.prompt));
+        return;
+      }
+      setEditorFocused(this.promptEditor, this.focused);
+      this.promptEditor.handleInput(data);
+      this.requestRender?.();
+      return;
+    }
+    const action = handlePromptCardInput(
+      data,
+      state,
+      isKeybindingsLike(this.piKeybindings) ? this.piKeybindings : undefined,
+    );
+    if (action.kind === "noop") {
+      this.requestRender?.();
+      return;
+    }
+    const prompt = state.prompt;
+    const response = action.kind === "submit"
+      ? action.response
+      : defaultResponseFor(prompt);
+    this._resolvePromptResponse(prompt.id, response);
+  }
+
   // -------------------------------------------------------------------------
   // Input
   // -------------------------------------------------------------------------
@@ -800,15 +1056,21 @@ export class StageChatView implements Component, Focusable {
       this.requestRender?.();
       return true;
     }
-    if (this.chatHost.handleScrollInput(data)) {
-      return true;
-    }
+    this._syncPromptState(this._currentStage()?.pendingPrompt);
     if (matchesKey(data, Key.ctrl("d"))) {
-      if (this.chatHost.hasInputText()) return this.chatHost.handleInput(data);
+      if (!this.promptState && this.chatHost.hasInputText()) return this.chatHost.handleInput(data);
       if (this._isPaused()) this.onClose();
       else this.onDetach();
       return true;
     }
+    if (this.promptState) {
+      if (this._handlePromptScrollInput(data, this.promptEditor === null)) return true;
+      this._handlePromptInput(data);
+      return true;
+    }
+    if (this.chatHost.handleScrollInput(data)) {
+      return true;
+    }
     if (matchesKey(data, Key.escape)) {
       if (
         this._isStreaming() ||
@@ -836,8 +1098,70 @@ export class StageChatView implements Component, Focusable {
     return this.chatHost.handleInput(data);
   }
 
+  private _handlePromptScrollInput(data: string, includeKeyboard = true): boolean {
+    const wheelDeltaRows = this._mouseWheelDeltaRows(data);
+    if (wheelDeltaRows !== 0) {
+      this._scrollPromptBy(wheelDeltaRows);
+      return true;
+    }
+    if (this._isMouseSequence(data)) return true;
+    if (!includeKeyboard) return false;
+    if (matchesKey(data, "pageUp")) {
+      this._scrollPromptBy(-this._promptPageSize());
+      return true;
+    }
+    if (matchesKey(data, "pageDown")) {
+      this._scrollPromptBy(this._promptPageSize());
+      return true;
+    }
+    if (!this.promptEditor && matchesKey(data, "home")) {
+      this.promptScrollOffset = 0;
+      this.requestRender?.();
+      return true;
+    }
+    if (!this.promptEditor && matchesKey(data, "end")) {
+      this.promptScrollOffset = this.promptMaxScroll;
+      this.requestRender?.();
+      return true;
+    }
+    return false;
+  }
+
+  private _scrollPromptBy(deltaRows: number): void {
+    this.promptScrollOffset = Math.max(
+      0,
+      Math.min(this.promptMaxScroll, this.promptScrollOffset + deltaRows),
+    );
+    this.requestRender?.();
+  }
+
+  private _promptPageSize(): number {
+    return Math.max(4, this._viewLineCount() - HEADER_ROWS - SEP_ROWS - 2);
+  }
+
+  private _mouseWheelDeltaRows(data: string): number {
+    const sgr = data.match(/^\x1b\[<(\d+);\d+;\d+M$/);
+    if (sgr) return this._wheelDeltaForButtonCode(Number.parseInt(sgr[1]!, 10));
+    if (data.startsWith("\x1b[M") && data.length >= 6) {
+      return this._wheelDeltaForButtonCode(data.charCodeAt(3) - 32);
+    }
+    return 0;
+  }
+
+  private _wheelDeltaForButtonCode(code: number): number {
+    if ((code & 64) === 0) return 0;
+    const direction = code & 3;
+    if (direction === 0) return -PROMPT_SCROLL_STEP_ROWS;
+    if (direction === 1) return PROMPT_SCROLL_STEP_ROWS;
+    return 0;
+  }
+
+  private _isMouseSequence(data: string): boolean {
+    return /^\x1b\[<\d+;\d+;\d+[mM]$/.test(data) || data.startsWith("\x1b[M");
+  }
+
   invalidate(): void {
-    // Stateless render reads directly from snapshot + handle.
+    this._syncPromptState(this._currentStage()?.pendingPrompt);
   }
 
   dispose(): void {
@@ -846,6 +1170,7 @@ export class StageChatView implements Component, Focusable {
     this._unsubscribeHandle?.();
     this._unsubscribeHandle = null;
     this._rejectMountedCustomUi("stage chat view disposed");
+    this._disposePromptEditor();
     this._unregisterStageUiHost?.();
     this._unregisterStageUiHost = null;
     this.chatHost.dispose();
@@ -905,6 +1230,18 @@ interface TranscriptDebugEntry {
   readonly output: string;
 }
 
+function formatReadOnlyPromptAnswer(value: unknown, kind: PendingPrompt["kind"]): string {
+  if (kind === "confirm") return value === true ? "yes" : "no";
+  if (typeof value === "string") return value.length > 0 ? value : "(empty response)";
+  if (typeof value === "number" || typeof value === "boolean" || value === null) return String(value);
+  try {
+    const encoded = JSON.stringify(value);
+    return encoded ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+
 function transcriptDebugEntries(entry: TranscriptEntry): TranscriptDebugEntry[] {
   if (isChatMessageEntry(entry) && entry.kind === "assistant") {
     const entries: TranscriptDebugEntry[] = [];
@@ -993,6 +1330,27 @@ function setComponentFocused(component: Component, focused: boolean): void {
   if ("focused" in candidate) candidate.focused = focused;
 }
 
+function setEditorFocused(editor: EditorComponent, focused: boolean): void {
+  setComponentFocused(editor, focused);
+}
+
+function setEditorPlaceholder(editor: EditorComponent, placeholder: string | undefined): void {
+  const candidate = editor as EditorComponent & {
+    setPlaceholder?: (value: string | undefined) => void;
+  };
+  candidate.setPlaceholder?.(placeholder);
+}
+
+function setEditorBorderColor(
+  editor: EditorComponent,
+  borderColor: (text: string) => string,
+): void {
+  const candidate = editor as EditorComponent & {
+    borderColor?: (text: string) => string;
+  };
+  if ("borderColor" in candidate) candidate.borderColor = borderColor;
+}
+
 function isChatMessageEntry(entry: TranscriptEntry): entry is ChatMessageEntry {
   return "kind" in entry && entry.role !== "notice";
 }
@@ -1083,6 +1441,13 @@ function paint(text: string, fg: string, opts: PaintOpts = {}): string {
   return out + text + RESET;
 }
 
+function renderHintsForPrompt(kind: PendingPrompt["kind"], theme: GraphTheme): string {
+  if (kind === "input" || kind === "editor") {
+    return `${paint("enter", theme.textMuted, { bold: true })} Submit · ${paint("esc/ctrl+c", theme.textMuted, { bold: true })} Skip`;
+  }
+  return `${paint("enter", theme.textMuted, { bold: true })} Select · ${paint("esc/ctrl+c", theme.textMuted, { bold: true })} Skip`;
+}
+
 /**
  * Foreground styling for text that will be wrapped by a `Box` background.
  * A normal `RESET` would also clear the parent background, so close only the

package/docs/changelog.mdx

@@ -3,27 +3,54 @@ title: "Changelog"
 description: "What's new in Atomic"
 ---
 
-<Update label="May 22, 2026" tags={["v0.8.13"]}>
+<Update label="May 25, 2026" tags={["v0.8.14"]}>
+
+## Stable release
+
+- **0.8.14 is the stable promotion of the 0.8.14 prerelease.** It keeps the upstream Pi sync, bundled workflow documentation refresh, and bundled subagent guidance updates from the prerelease.
+- **Synced with upstream Pi patches.** Atomic's coding-agent fork is now aligned with upstream Pi patches since v0.75.4 and bundles Pi libraries at 0.75.5.
+- **Bundled workflow docs are current.** The docs now describe Ralph's final PR-preparation phase, deep-research report artifacts, and newer workflow inspection/control actions such as `stages`, `stage`, `transcript`, `send`, `pause`, and `reload`. See [Workflows](/workflows).
+- **Bundled subagent guidance is easier to find.** Atomic now documents how to use bundled subagents for delegation, background work, nested fanout boundaries, model fallbacks, and custom agent guardrails. See [Subagents](/subagents).
+
+## Fixes
+
+- Managed extension installs, git package ref reconciliation, async file tools, export HTML escaping, OpenCode session headers, OAuth device-code login, footer path abbreviation, clipboard native loading, and collapsed read output rendering received upstream fixes.
+- The built-in header model label now refreshes when you change models, matching the footer below the chat box.
+
+</Update>
+
+<Update label="May 21, 2026" tags={["v0.8.13"]}>
+
+## Stable release
+
+- **0.8.13 is the stable promotion of the 0.8.13 prerelease.** It keeps the workflow discovery and async subagent widget fixes from the prerelease while updating Atomic agent guidance.
+
+## Fixes
+
+- **Packaged workflow discovery loads reliably.** Package-authored workflow resources load through `jiti`, so SDK imports such as `@bastani/workflows` resolve consistently from the Bun-packaged binary. See [Workflows](/workflows).
+- **Workflow diagnostics are preserved.** Invalid default exports and supported SDK import diagnostics remain visible when workflows are discovered from packaged resources.
+- **Async subagent widget spacing is stable.** Background subagent widgets preserve spacing before the prompt box. See [Subagents](/subagents).
+
+</Update>
+
+<Update label="May 20, 2026" tags={["v0.8.12"]}>
 
 ## New features
 
-- **`/atomic` builtin slash command.** A new onboarding guide is now available from anywhere in Atomic. Run `/atomic` to get oriented, list sections, or jump to a topic by name. See [Usage](/usage).
-- **Model reasoning level in the system prompt.** Atomic now passes the active model's reasoning level into the system prompt, so responses better reflect the depth your selected model is configured for. See [Models](/models).
-- **Configurable HTTP idle timeout.** You can now tune how long Atomic keeps idle HTTP connections open via settings, which helps on slow or unreliable networks. See [Settings](/settings).
+- **Configurable HTTP idle timeout.** Tune how long Atomic keeps idle HTTP connections open, with presets from 30 seconds through 30 minutes and an option to disable the timeout. See [Settings](/settings).
+- **Workflow documentation and navigation.** Atomic added the Workflows docs page so users can discover built-in workflows, authoring patterns, package setup, and run control from the docs site. See [Workflows](/workflows).
 
 ## Updates
 
-- **Smoother subagent rendering.** Live subagent widgets now animate in place without remounting, and result rendering has been refreshed for clearer progress. See [Extensions](/extensions).
-- **Consistent duration display.** Elapsed times across bash, subagent, and workflow output are now shown as whole seconds and never go negative.
-- **Better Windows process handling.** Process spawning and self-update behavior have been improved on Windows. See [Windows](/windows).
-- **Workflow tool rendering is width-aware.** Tool output inside workflow stages now respects the terminal width and forwards builtin tools correctly to stage sessions. See [Workflows](/workflows).
+- **Model reasoning level in the system prompt.** Atomic now includes the active model's reasoning level in generated system prompts and project context markup. See [Models](/models).
+- **Runtime and extension compatibility.** Internal runtime, tool, TUI, tests, and extension example imports moved to explicit `.ts` specifiers for better raw-TypeScript extension compatibility.
+- **Atomic docs refresh.** Package usage, customization, workflows, and release guidance were refreshed for Atomic branding.
 
-## Bug fixes
+## Fixes
 
-- **Workflow package imports load reliably.** Package-authored workflows are now loaded through `jiti`, so `@bastani/workflows` imports resolve consistently, including inside the Bun-packaged binary. See [Workflows](/workflows).
-- **Binary archives bundle runtime dependencies.** Downloaded `atomic-*` archives now ship with the runtime deps they need, fixing missing-module errors on first run.
-- **Workflow text helpers resolve on all platforms.** Fixed a regression where text helpers failed to load in the packaged binary.
-- **`/atomic` handles long inputs safely.** Argument parsing for the guide command no longer slows down on adversarial punctuation-heavy input.
-- **Settled workflow stages detach from run control.** Completed stages no longer linger in the active run, keeping the workflow view accurate.
+- **Better Windows self-update behavior.** Package-manager installs now handle native dependency cleanup, quarantine cases, and unavailable updates more clearly. See [Windows](/windows).
+- **Smoother subagent rendering.** Live subagent result rendering, async render updates, transient child-error recovery, and live widget animations are more stable. See [Subagents](/subagents).
+- **Workflow stages settle cleanly.** Completed stages detach from run-control tracking, and the empty workflow graph waiting state is centered. See [Workflows](/workflows).
+- **Consistent duration display.** Elapsed times across bash, subagent, and workflow output are shown as whole seconds and never go negative.
 
 </Update>

package/docs/docs.json

@@ -29,6 +29,7 @@
         "pages": [
           "extensions",
           "skills",
+          "subagents",
           "workflows",
           "prompt-templates",
           "themes",