@bastani/atomic 0.9.12 → 0.9.13-alpha.2

package/dist/builtin/workflows/src/tui/graph-view-render.ts

@@ -1,25 +1,65 @@
 import type { RunSnapshot } from "../shared/store-types.js";
 import { hexBg, hexToAnsi, RESET } from "./color-utils.js";
 import { GraphViewGraphRenderer } from "./graph-view-graph-render.js";
+import { GRAPH_HEADER_ROWS, GraphViewLayout, graphLayoutNaturalHeight } from "./graph-view-layout.js";
+import type { GraphViewOpts } from "./graph-view-types.js";
 import { renderHeader, renderOutlinePill } from "./header.js";
+import { NODE_H } from "./layout.js";
 import { renderPromptCard } from "./prompt-card.js";
 import { renderSwitcher } from "./switcher.js";
+import { truncateToWidth, visibleWidth } from "./text-helpers.js";
 
+/**
+ * `renderLayoutFrame` wraps each painted row with its segment reset. The
+ * layout bridge records which rows were painted, so content that was not
+ * wrapped cannot be mistaken for a layout seam during normalization.
+ */
+const LAYOUT_OSC_RESET = "\x1b[0m\x1b]8;;\x07";
+
+function stripLayoutWrapper(line: string): string {
+	const startsWithWrapper = line.startsWith(LAYOUT_OSC_RESET);
+	const endsWithWrapper = line.endsWith(LAYOUT_OSC_RESET);
+	const start = startsWithWrapper ? LAYOUT_OSC_RESET.length : 0;
+	const end = endsWithWrapper ? line.length - LAYOUT_OSC_RESET.length : line.length;
+	return line.slice(start, Math.max(start, end));
+}
 /** Overlay/widget rendering orchestration for GraphView. */
 export abstract class GraphViewRenderer extends GraphViewGraphRenderer {
+	protected readonly graphLayout: GraphViewLayout;
+	private lastOverlayFrameHeight = 0;
+	private hasReportedViewportRows = false;
+	private renderRun: RunSnapshot | null | undefined;
+
+	constructor(opts: GraphViewOpts) {
+		super(opts);
+		this.graphLayout = new GraphViewLayout({
+			renderHeader: (width) => this._renderHeader(width),
+			renderBody: (width, top, rows, contentRows) => this._renderBody(width, top, rows, contentRows),
+			renderFooter: (width) => this._renderStatusline(width),
+			bodyContentHeight: (_width, viewportRows) => this._graphBodyContentHeight(viewportRows),
+			beforeFrame: (scrollView, viewportRows, contentRows, width) =>
+				this._prepareGraphScroll(scrollView, viewportRows, contentRows, width),
+			requestRender: () => this.requestRender?.(),
+		});
+	}
+	protected override _graphScrollTop(): number {
+		return this.graphLayout.scrollView.scrollTop;
+	}
+
 	/** Render to string lines. width = terminal columns. */
 	render(width: number): string[] {
-		if (this.mode === "widget") {
-			return this._renderWidget(width);
-		}
+		if (this.mode === "widget") return this._renderWidget(width);
 		return this._renderOverlay(width);
 	}
 
+	override dispose(): void {
+		this.graphLayout.dispose();
+		super.dispose();
+	}
+
 	protected _renderWidget(width: number): string[] {
 		const run = this._getCurrentRun();
-		if (!run) {
-			return [`${hexToAnsi(this.graphTheme.dim)}no active workflow${RESET}`];
-		}
+		if (!run) return [`${hexToAnsi(this.graphTheme.dim)}no active workflow${RESET}`];
 		const displayStages = this._displayStages(run);
 		const headerLines = renderHeader({ ...run, stages: displayStages }, { width, theme: this.graphTheme });
 		const counts = this._counts(displayStages);
@@ -35,115 +75,192 @@ export abstract class GraphViewRenderer extends GraphViewGraphRenderer {
 
 	protected _renderOverlay(width: number): string[] {
 		const frameWidth = Math.max(40, width);
-		this.lastOverlayFrameWidth = frameWidth;
-		const lines: string[] = [];
 		const run = this._getCurrentRun();
+		this.renderRun = run;
+		try {
+			const frameHeight = this._overlayFrameHeight(run);
+			const layoutFrame = this.graphLayout.render(frameWidth, frameHeight);
+			const lines = this._normalizeLayoutLines(
+				layoutFrame.frame.lines,
+				layoutFrame.wrappedRows,
+				frameWidth,
+				frameHeight,
+				layoutFrame.topMarginRows,
+				layoutFrame.bottomMarginRows,
+			);
+			const bodyStart = layoutFrame.bodyBox?.rect.y ?? layoutFrame.topMarginRows + GRAPH_HEADER_ROWS;
+			const bodyRows = layoutFrame.bodyBox?.rect.height ?? this.graphLayout.viewportRows;
+			if (run) {
+				this._recordGraphNodeHitRects(bodyStart + this.lastGraphTopPad, this.lastGraphVisibleRows);
+				this._renderSwitcherOverlay(lines, run, frameWidth, bodyStart, bodyRows);
+				this._renderPromptOverlay(lines, frameWidth, bodyStart, bodyRows);
+			} else {
+				this.graphNodeHitRects = [];
+				this.lastGraphViewport = null;
+			}
+			this.graphLayout.paintScrollbar(lines, frameWidth);
 
-		if (!run) {
-			return this._renderEmptyState(frameWidth);
+			return lines;
+		} finally {
+			this.renderRun = undefined;
 		}
+	}
 
-		// 1. Header chrome (3 rows: outline pill + session name + counts).
-		lines.push(
-			...renderHeader({ ...run, stages: this._displayStages(run) }, { width: frameWidth, theme: this.graphTheme }),
-		);
-
-		// 2. Graph occupies the full body. No section labels, no focused-
-		//    stage panel — status colour on each card carries that signal.
-		const graphLines = this._renderGraph(frameWidth);
-		const bodyTarget = this._overlayBodyRows(this._overlayPanelLineCount());
-		const visibleGraph = this._visibleGraphLines(graphLines, frameWidth, bodyTarget);
-		this._recordGraphNodeHitRects(
-			this._overlayVerticalMarginRows() + 3 + visibleGraph.topPad,
-			visibleGraph.lines.length,
-		);
-		for (let i = 0; i < visibleGraph.topPad; i++) lines.push(this._blankRow(frameWidth));
-		for (const line of visibleGraph.lines) {
-			lines.push(this._canvasRow(line, frameWidth));
+	protected _overlayFrameHeight(run: RunSnapshot | null = this._currentRenderRun()): number {
+		const reported = this.piTui?.terminal?.rows;
+		if (typeof reported === "number" && Number.isFinite(reported) && reported > 0) {
+			this.hasReportedViewportRows = true;
+			this.lastOverlayFrameHeight = Math.max(1, Math.floor(reported));
+			return this.lastOverlayFrameHeight;
 		}
-		while (lines.length < 3 + bodyTarget) lines.push(this._blankRow(frameWidth));
-		if (lines.length > 3 + bodyTarget) lines.length = 3 + bodyTarget;
+		// A custom overlay may lose its terminal while the host tears down the
+		// TUI. Keep the last hosted frame until a new row count arrives, so the
+		// disappearing overlay does not jump to a different natural height.
+		if (this.hasReportedViewportRows && this.lastOverlayFrameHeight > 0) return this.lastOverlayFrameHeight;
 
-		this._renderSwitcherOverlay(lines, run, frameWidth, bodyTarget);
-		this._renderPromptOverlay(lines, frameWidth, bodyTarget);
+		const bodyRows = run ? Math.max(1, this.cachedRenderGeometry.totalRows) : 2;
+		this.lastOverlayFrameHeight = graphLayoutNaturalHeight(bodyRows);
+		return this.lastOverlayFrameHeight;
+	}
 
-		// 5. Three-row statusline pinned to the bottom.
-		lines.push(...this._renderStatusline(frameWidth));
+	private _currentRenderRun(): RunSnapshot | null {
+		return this.renderRun !== undefined ? this.renderRun : this._getCurrentRun();
+	}
 
-		return this._withVerticalMargins(lines, frameWidth);
+	private _graphBodyContentHeight(viewportRows: number): number {
+		const rows = Math.max(0, Math.floor(viewportRows));
+		if (!this._currentRenderRun() || this.cachedRenderGeometry.totalRows <= 0) return rows;
+		return Math.max(rows, this.cachedRenderGeometry.totalRows);
 	}
 
-	protected _renderEmptyState(width: number): string[] {
-		this.graphNodeHitRects = [];
-		this.lastGraphViewport = null;
+	private _prepareGraphScroll(
+		scrollView: GraphViewLayout["scrollView"],
+		viewportRows: number,
+		_contentRows: number,
+		width: number,
+	): void {
+		const run = this._currentRenderRun();
+		if (viewportRows <= 0) return;
+		if (!run || this.cachedRenderGeometry.totalRows <= 0) {
+			scrollView.scrollToStart();
+			this.pendingEnsureFocusedVisible = false;
+			return;
+		}
+
+		if (this.pendingEnsureFocusedVisible) {
+			const node = this.cachedLayout[this.focusedIndex];
+			if (node) {
+				let next = scrollView.scrollTop;
+				if (node.y < next) next = node.y;
+				else if (node.y + NODE_H > next + viewportRows) next = node.y + NODE_H - viewportRows;
+				scrollView.scrollTo(next);
+
+				const graphInner = Math.max(1, width - 4);
+				const leftMargin = Math.max(
+					2,
+					this.cachedRenderGeometry.canvasWidth <= graphInner
+						? Math.floor((graphInner - this.cachedRenderGeometry.canvasWidth) / 2)
+						: 2,
+				);
+				const viewportWidth = Math.max(1, width - leftMargin);
+				const fullCanvasWidth = Math.max(this.cachedRenderGeometry.canvasWidth, viewportWidth);
+				this._scrollFocusedColumnIntoView(viewportWidth, fullCanvasWidth);
+			}
+			this.pendingEnsureFocusedVisible = false;
+		}
+	}
+
+	private _renderHeader(width: number): string[] {
+		const run = this._currentRenderRun();
+		if (run) return renderHeader({ ...run, stages: this._displayStages(run) }, { width, theme: this.graphTheme });
+
 		const t = this.graphTheme;
 		const muted = hexToAnsi(t.textMuted);
-		const dim = hexToAnsi(t.dim);
-		const accent = hexToAnsi(t.accent);
 		const chromeBg = hexBg(t.backgroundPanel);
-
 		const { top, mid, bot, visibleWidth: pillW } = renderOutlinePill("ORCHESTRATOR", t.accent, chromeBg);
-		const idleLabel = `  ${muted}idle${RESET}`;
-		const fillerVisible = Math.max(0, width - 1 - pillW - 6 /* "  idle" */ - 2);
+		const fillerVisible = Math.max(0, width - 1 - pillW - 6 - 2);
 		const filler = " ".repeat(fillerVisible);
-		const lines: string[] = [
+		return [
 			`${chromeBg} ${RESET}${top}${chromeBg}${" ".repeat(6 + fillerVisible)}${" ".repeat(2)}${RESET}`,
-			`${chromeBg} ${RESET}${mid}${chromeBg}${idleLabel}${filler}${" ".repeat(2)}${RESET}`,
+			`${chromeBg} ${RESET}${mid}${chromeBg}  ${muted}idle${RESET}${filler}${" ".repeat(2)}${RESET}`,
 			`${chromeBg} ${RESET}${bot}${chromeBg}${" ".repeat(6 + fillerVisible)}${" ".repeat(2)}${RESET}`,
 		];
-		const bodyTarget = this._overlayBodyRows(this._overlayPanelLineCount());
-		const body: string[] = [
-			this._canvasRow(`  ${muted}No active workflow run.${RESET}`, width),
-			this._canvasRow(
-				`  ${dim}Start one with ${accent}/workflow <name>${RESET}${dim} or press ${accent}F2${RESET}${dim} on an active run.${RESET}`,
+	}
+
+	private _renderBody(width: number, top: number, rows: number, _contentRows: number): string[] {
+		const run = this._currentRenderRun();
+		const raw = run ? this._renderGraph(width, top, rows, run) : this._renderEmptyBody(width, rows);
+		return raw.map((line) => this._canvasRow(line, width));
+	}
+
+	private _renderEmptyBody(width: number, rows: number): string[] {
+		const body = [
+			this._centerCanvasContent(`  ${hexToAnsi(this.graphTheme.textMuted)}No active workflow run.${RESET}`, width),
+			this._centerCanvasContent(
+				`  ${hexToAnsi(this.graphTheme.dim)}Start one with ${hexToAnsi(this.graphTheme.accent)}/workflow <name>${RESET}${hexToAnsi(this.graphTheme.dim)} or press ${hexToAnsi(this.graphTheme.accent)}F2${RESET}${hexToAnsi(this.graphTheme.dim)} on an active run.${RESET}`,
 				width,
 			),
 		];
-		const topPad = Math.max(0, Math.floor((bodyTarget - body.length) / 2));
-		for (let i = 0; i < topPad; i++) lines.push(this._blankRow(width));
-		for (const l of body) lines.push(l);
-		while (lines.length < 3 + bodyTarget) lines.push(this._blankRow(width));
-		lines.push(...this._renderStatusline(width));
-		return this._withVerticalMargins(lines, width);
+		const lines = Array.from({ length: rows }, () => "");
+		const topPad = Math.max(0, Math.floor((rows - body.length) / 2));
+		for (let index = 0; index < body.length; index++) {
+			const target = topPad + index;
+			if (target < lines.length) lines[target] = body[index]!;
+		}
+		return lines;
 	}
 
-	private _renderSwitcherOverlay(lines: string[], run: RunSnapshot, frameWidth: number, bodyTarget: number): void {
-		// Switcher overlay — floats over the body when open.
-		if (!this.switcherOpen) return;
+	protected _normalizeLayoutLines(
+		lines: readonly string[],
+		wrappedRows: readonly boolean[],
+		width: number,
+		height: number,
+		topMarginRows: number,
+		bottomMarginRows: number,
+	): string[] {
+		return Array.from({ length: height }, (_, row) => {
+			if (row < topMarginRows || row >= height - bottomMarginRows) return " ".repeat(width);
+			const source = lines[row] ?? "";
+			const clean = wrappedRows[row] === true ? stripLayoutWrapper(source) : source;
+			if (visibleWidth(clean) === 0) return this._blankRow(width);
+			if (visibleWidth(clean) > width) return truncateToWidth(clean, width, "…", true);
+			return `${clean}${" ".repeat(width - visibleWidth(clean))}`;
+		});
+	}
 
-		const bodyStart = 3;
-		const bodyEnd = 3 + bodyTarget;
-		for (let row = bodyStart; row < bodyEnd; row++) {
-			lines[row] = this._blankRow(frameWidth);
-		}
+	private _renderSwitcherOverlay(
+		lines: string[],
+		run: RunSnapshot,
+		frameWidth: number,
+		bodyStart: number,
+		bodyRows: number,
+	): void {
+		if (!this.switcherOpen) return;
+		const bodyEnd = bodyStart + bodyRows;
+		for (let row = bodyStart; row < bodyEnd; row++) lines[row] = this._blankRow(frameWidth);
 		const switcherWidth = Math.min(60, Math.max(40, frameWidth - 8));
 		const switcherLines = renderSwitcher(this._displayStages(run), this.switcherState, {
 			width: switcherWidth,
 			theme: this.graphTheme,
 			canOpenStageChat: (stage) => this._stageChatTarget(stage) !== undefined,
 		});
-		const insertAt = Math.max(
-			bodyStart,
-			bodyStart + Math.min(2, Math.floor((bodyTarget - switcherLines.length) / 3)),
-		);
+		const insertAt = Math.max(bodyStart, bodyStart + Math.min(2, Math.floor((bodyRows - switcherLines.length) / 3)));
 		const switcherLeft = Math.max(2, Math.floor((frameWidth - switcherWidth) / 2));
-		for (let i = 0; i < switcherLines.length; i++) {
-			const lineIdx = insertAt + i;
-			if (lineIdx >= bodyEnd) break;
-			const base = lines[lineIdx] ?? this._blankRow(frameWidth);
-			const merged = this._overlayCard(base, switcherLines[i]!, switcherLeft, frameWidth);
-			if (lineIdx < lines.length) lines[lineIdx] = merged;
-			else lines.push(merged);
+		for (let index = 0; index < switcherLines.length; index++) {
+			const lineIndex = insertAt + index;
+			if (lineIndex >= bodyEnd) break;
+			lines[lineIndex] = this._overlayCard(
+				lines[lineIndex] ?? this._blankRow(frameWidth),
+				switcherLines[index]!,
+				switcherLeft,
+				frameWidth,
+			);
 		}
 	}
 
-	private _renderPromptOverlay(lines: string[], frameWidth: number, bodyTarget: number): void {
-		// Pending HIL prompt — floats over the graph body, centred. The
-		// chat editor remains free regardless: the overlay is the only
-		// surface that interacts with the prompt. When the stage switcher is
-		// open it owns the body/input, so hide the prompt card until it closes.
+	private _renderPromptOverlay(lines: string[], frameWidth: number, bodyStart: number, bodyRows: number): void {
 		if (!this.promptState || this.switcherOpen) return;
-		const run = this._getCurrentRun();
+		const run = this._currentRenderRun();
 		const cardWidth = Math.min(72, Math.max(40, frameWidth - 6));
 		const cardLines = renderPromptCard({
 			state: this.promptState,
@@ -151,19 +268,20 @@ export abstract class GraphViewRenderer extends GraphViewGraphRenderer {
 			width: cardWidth,
 			cursorOn: ((Date.now() / 530) | 0) % 2 === 0,
 			identity: run ? { runId: run.id, name: run.name } : undefined,
-			maxRows: bodyTarget,
+			maxRows: bodyRows,
 		});
-		const bodyStart = 3;
-		const bodyEnd = bodyStart + bodyTarget;
-		const slot = Math.max(bodyStart, bodyStart + Math.floor((bodyTarget - cardLines.length) / 2));
-		// The card renderer owns row budgeting, but keep this composition boundary
-		// defensive: a complete card fits wholly in the body or is not painted.
-		if (cardLines.length > bodyTarget || slot + cardLines.length > bodyEnd) return;
+		const bodyEnd = bodyStart + bodyRows;
+		const slot = Math.max(bodyStart, bodyStart + Math.floor((bodyRows - cardLines.length) / 2));
+		if (cardLines.length > bodyRows || slot + cardLines.length > bodyEnd) return;
 		const leftPad = Math.max(0, Math.floor((frameWidth - cardWidth) / 2));
-		for (let i = 0; i < cardLines.length; i++) {
-			const lineIdx = slot + i;
-			const base = lines[lineIdx] ?? this._blankRow(frameWidth);
-			lines[lineIdx] = this._overlayCard(base, cardLines[i]!, leftPad, frameWidth);
+		for (let index = 0; index < cardLines.length; index++) {
+			const lineIndex = slot + index;
+			lines[lineIndex] = this._overlayCard(
+				lines[lineIndex] ?? this._blankRow(frameWidth),
+				cardLines[index]!,
+				leftPad,
+				frameWidth,
+			);
 		}
 	}
 }

package/dist/builtin/workflows/src/tui/graph-view-state.ts

@@ -79,7 +79,7 @@ export abstract class GraphViewState {
 	protected onDetach?: () => void;
 	protected initialFocusedStageId?: string;
 	protected initialFocusedRunId?: string;
-	protected getViewportRows?: () => number | undefined;
+	protected piTui?: GraphViewOpts["piTui"];
 	protected requestRender?: () => void;
 	protected piKeybindings?: unknown;
 	protected footerData?: ReadonlyFooterDataProvider;
@@ -103,12 +103,12 @@ export abstract class GraphViewState {
 		targets: new Map(),
 	};
 	protected currentSnapshot: StoreSnapshot | null = null;
-	protected graphScrollOffset = 0;
+	protected abstract _graphScrollTop(): number;
 	protected graphScrollColOffset = 0;
 	protected graphNodeHitRects: GraphNodeHitRect[] = [];
 	protected lastGraphViewport: GraphViewportGeometry | null = null;
-	protected lastGraphTotalRows = 0;
-	protected lastOverlayFrameWidth = 80;
+	protected lastGraphTopPad = 0;
+	protected lastGraphVisibleRows = 0;
 	protected pendingEnsureFocusedVisible = true;
 	protected lastAutoFocusedAwaitingInputKey: string | null = null;
 	protected lastBuiltSnapshotVersion: number | null = null;
@@ -132,7 +132,7 @@ export abstract class GraphViewState {
 		this.onDetach = opts.onDetach;
 		this.initialFocusedStageId = opts.initialFocusedStageId;
 		this.initialFocusedRunId = opts.initialFocusedRunId;
-		this.getViewportRows = opts.getViewportRows;
+		this.piTui = opts.piTui;
 		this.requestRender = opts.requestRender;
 		this.piKeybindings = opts.piKeybindings;
 		this.footerData = opts.footerData;
@@ -187,7 +187,6 @@ export abstract class GraphViewState {
 			this.cachedRenderGeometry = { canvasWidth: 0, totalRows: 0, bands: [], edges: [] };
 			this.expandedGraph = { stages: [], renderStages: [], tools: [], nodes: [], targets: new Map() };
 			this.focusedIndex = 0;
-			this.graphScrollOffset = 0;
 			this.graphScrollColOffset = 0;
 			this.graphNodeHitRects = [];
 			this.lastGraphViewport = null;
@@ -340,7 +339,6 @@ export abstract class GraphViewState {
 
 		if (this.cachedLayout.length === 0) {
 			this.focusedIndex = 0;
-			this.graphScrollOffset = 0;
 			this.graphScrollColOffset = 0;
 		} else if (this.focusedIndex >= this.cachedLayout.length) {
 			this.focusedIndex = this.cachedLayout.length - 1;

package/dist/builtin/workflows/src/tui/graph-view-types.ts

@@ -1,8 +1,16 @@
 import type { ReadonlyFooterDataProvider } from "@bastani/atomic";
+import type { TUI } from "@earendil-works/pi-tui";
 import type { Store } from "../shared/store.js";
 import type { GraphTheme } from "./graph-theme.js";
 
 export type GraphViewMode = "overlay" | "widget";
+/**
+ * Terminal geometry exposed to GraphView. The renderer reads only `rows`;
+ * the attach shell may pass its full host TUI because it satisfies this slice.
+ */
+export type GraphViewHost = {
+	readonly terminal: Pick<TUI["terminal"], "rows">;
+};
 
 export interface GraphViewOpts {
 	mode: GraphViewMode;
@@ -42,14 +50,12 @@ export interface GraphViewOpts {
 	initialFocusedStageId?: string;
 	initialFocusedRunId?: string;
 	/**
-	 * Optional accessor returning the current terminal row count. When
-	 * present in overlay mode the renderer expands the frame to roughly
-	 * `viewportRows` lines (clamped to at least the header + statusline
-	 * budget) so the popup fills the terminal under pi-tui's
-	 * `width: "100%" / maxHeight: "100%"` geometry. Returning `undefined`
-	 * falls back to the constant `OVERLAY_LINE_COUNT` rectangle.
+	 * Host terminal geometry for the fullscreen frame. GraphView consumes only
+	 * `terminal.rows`; the attach shell passes the same host object to GraphView
+	 * and the attached stage chat. StageChatView retains the full TUI because its
+	 * editor and chat session host use it as well.
 	 */
-	getViewportRows?: () => number | undefined;
+	piTui?: GraphViewHost;
 	/**
 	 * Invoked on each animation tick (~10 FPS) so the host can call
 	 * `tui.requestRender()`. Only wired in `overlay` mode; supplying it

package/dist/builtin/workflows/src/tui/inline-form-editor.ts

@@ -203,9 +203,9 @@ export class InlineFormEditor implements PiEditorComponent {
 	render(_width: number): string[] {
 		return [];
 	}
-	handleInput(data: string): void {
+	handleInput(data: string): boolean {
 		const state = getForm(this.opts.formId);
-		if (state?.status !== "editing") return;
+		if (state?.status !== "editing") return false;
 		if (data.includes(PASTE_START)) {
 			this.isInPaste = true;
 			this.pasteBuffer = "";
@@ -214,7 +214,7 @@ export class InlineFormEditor implements PiEditorComponent {
 		if (this.isInPaste) {
 			this.pasteBuffer += data;
 			const endIdx = this.pasteBuffer.indexOf(PASTE_END);
-			if (endIdx === -1) return; // wait for the close marker
+			if (endIdx === -1) return true; // wait for the close marker
 			const content = this.pasteBuffer.slice(0, endIdx);
 			const remaining = this.pasteBuffer.slice(endIdx + PASTE_END.length);
 			this.isInPaste = false;
@@ -224,20 +224,22 @@ export class InlineFormEditor implements PiEditorComponent {
 				this.tui.requestRender?.();
 			}
 			if (remaining.length > 0) this.handleInput(remaining);
-			return;
+			return true;
 		}
 		if (data.length > 1 && isPrintableTextChunk(data)) {
-			if (this.applyPaste(data, state)) {
+			const consumed = this.applyPaste(data, state);
+			if (consumed) {
 				touch(state);
 				this.tui.requestRender?.();
 			}
-			return;
+			return consumed;
 		}
 		const consumed = this.routeKey(data, state);
 		if (consumed) {
 			touch(state);
 			this.tui.requestRender?.();
 		}
+		return consumed;
 	}
 	private applyPaste(content: string, state: InlineFormState): boolean {
 		const field = state.fields[state.focusedIdx];

package/dist/builtin/workflows/src/tui/inline-form-overlay.ts

@@ -21,6 +21,7 @@
  *  - src/tui/inline-form-editor.ts (custom EditorComponent)
  */
 
+import { isStaleExtensionContextError } from "@bastani/atomic";
 import type { ExtensionAPI, PiCommandContext } from "../extension/index.js";
 import type { WorkflowInputEntry } from "../extension/render-result.js";
 import type { PiEditorComponent, PiEditorFactory } from "../extension/wiring.js";
@@ -206,7 +207,7 @@ export async function openInlineInputsForm(
 				// extension command context as stale before tearing down the old editor
 				// surface. A workflow form that settles after that point must not write
 				// its captured pre-switch editor factory back into the fresh session.
-				if (err instanceof Error && err.message.includes("This extension ctx is stale")) {
+				if (isStaleExtensionContextError(err)) {
 					return false;
 				}
 				// Preserve the previous best-effort behavior for older or unusual hosts:

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

@@ -39,6 +39,7 @@ import type { PiCustomComponent, PiCustomOverlayFactoryTui, PiCustomOverlayFunct
 import type { WorkflowInputValues } from "../shared/types.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { coerceValues, createInputsPickerState, handleInputsPickerInput, renderInputsPicker } from "./inputs-picker.js";
+import { isInputsPickerKey } from "./inputs-picker-input.js";
 
 export interface InputsUiSurface {
 	custom?: PiCustomOverlayFunction;
@@ -146,19 +147,21 @@ export function openInputsPicker(ui: InputsUiSurface, opts: OpenInputsPickerOpts
 						state,
 						cursorOn,
 					}),
-				handleInput: (data: string) => {
+				handleInput: (data: string): boolean => {
 					// Pi's `KeybindingsManager` is the third factory arg — the
 					// picker uses it so user-configured text-editing actions
 					// (delete word, line jump, etc.) work the same in the
-					// fallback overlay as in the inline form. Pass it through
-					// structurally; the picker guards the shape itself.
+					// inline form. Pass it through structurally; the picker guards
+					// the shape itself.
 					const kb = keys as Parameters<typeof handleInputsPickerInput>[3];
+					const consumed = isInputsPickerKey(data, state, fields, kb);
 					const action = handleInputsPickerInput(data, state, fields, kb);
 					if (action.kind === "noop") {
 						tui.requestRender?.();
-						return;
+						return consumed;
 					}
 					finish(action);
+					return true;
 				},
 				invalidate: () => tui.requestRender?.(),
 				dispose: () => {

package/dist/builtin/workflows/src/tui/inputs-picker-input.ts

@@ -24,6 +24,72 @@ import {
 } from "./keybindings-adapter.js";
 import { decodePrintableKey, Key, matchesKey } from "./text-helpers.js";
 
+export function isInputsPickerKey(
+	key: string,
+	state: InputsPickerState,
+	fields: readonly WorkflowInputEntry[],
+	keybindings?: KeybindingsLike,
+): boolean {
+	if (fields.length === 0) return isCancelKey(key);
+	if (isCancelKey(key) || matchesKey(key, Key.tab) || matchesKey(key, Key.shift("tab"))) return true;
+	if (state.focusedIdx === fields.length) {
+		return (
+			matchesAction(keybindings, key, TUI_ACTION.selectUp) ||
+			matchesAction(keybindings, key, TUI_ACTION.selectDown) ||
+			matchesAction(keybindings, key, TUI_ACTION.editorCursorUp) ||
+			matchesAction(keybindings, key, TUI_ACTION.editorCursorDown) ||
+			matchesKey(key, Key.enter) ||
+			matchesAction(keybindings, key, TUI_ACTION.selectConfirm) ||
+			matchesAction(keybindings, key, TUI_ACTION.inputSubmit)
+		);
+	}
+	const field = fields[state.focusedIdx];
+	if (!field) return false;
+	if (field.type === "select") {
+		if ((field.choices ?? []).length === 0) return false;
+		return (
+			matchesAction(keybindings, key, TUI_ACTION.selectUp) ||
+			matchesAction(keybindings, key, TUI_ACTION.selectDown) ||
+			matchesAction(keybindings, key, TUI_ACTION.editorCursorLeft) ||
+			matchesAction(keybindings, key, TUI_ACTION.editorCursorRight) ||
+			matchesAction(keybindings, key, TUI_ACTION.selectConfirm) ||
+			matchesAction(keybindings, key, TUI_ACTION.inputSubmit)
+		);
+	}
+	if (field.type === "boolean") {
+		return (
+			matchesKey(key, Key.space) ||
+			matchesAction(keybindings, key, TUI_ACTION.selectUp) ||
+			matchesAction(keybindings, key, TUI_ACTION.selectDown) ||
+			matchesAction(keybindings, key, TUI_ACTION.editorCursorLeft) ||
+			matchesAction(keybindings, key, TUI_ACTION.editorCursorRight) ||
+			matchesAction(keybindings, key, TUI_ACTION.selectConfirm) ||
+			matchesAction(keybindings, key, TUI_ACTION.inputSubmit)
+		);
+	}
+	if (
+		matchesAction(keybindings, key, TUI_ACTION.editorCursorUp) ||
+		matchesAction(keybindings, key, TUI_ACTION.editorCursorDown) ||
+		matchesAction(keybindings, key, "tui.editor.cursorWordLeft") ||
+		matchesAction(keybindings, key, "tui.editor.cursorWordRight") ||
+		matchesAction(keybindings, key, "tui.editor.cursorLineStart") ||
+		matchesAction(keybindings, key, "tui.editor.cursorLineEnd") ||
+		matchesAction(keybindings, key, TUI_ACTION.editorCursorLeft) ||
+		matchesAction(keybindings, key, TUI_ACTION.editorCursorRight) ||
+		matchesAction(keybindings, key, "tui.editor.deleteWordBackward") ||
+		matchesAction(keybindings, key, "tui.editor.deleteWordForward") ||
+		matchesAction(keybindings, key, "tui.editor.deleteToLineStart") ||
+		matchesAction(keybindings, key, "tui.editor.deleteToLineEnd") ||
+		matchesAction(keybindings, key, "tui.editor.deleteCharBackward") ||
+		matchesAction(keybindings, key, "tui.editor.deleteCharForward") ||
+		matchesAction(keybindings, key, TUI_ACTION.inputSubmit) ||
+		matchesAction(keybindings, key, "tui.input.newLine")
+	) {
+		return true;
+	}
+	return isPrintableGrapheme(decodePrintableKey(key) ?? key);
+}
+
 export function handleInputsPickerInput(
 	key: string,
 	state: InputsPickerState,

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

@@ -40,6 +40,7 @@ export interface KeybindingsLike {
 
 export const APP_ACTION = {
 	toolsExpand: "app.tools.expand",
+	thinkingToggle: "app.thinking.toggle",
 } as const;
 
 export const TUI_ACTION = {

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

@@ -129,7 +129,7 @@ function metaText(stage: StageSnapshot): string {
 	if (stage.topologyState === "unavailable") return "topology unavailable";
 	const deps = stage.parentIds.length;
 	const dependencyText = deps === 0 ? "root" : deps === 1 ? "1 dep" : `${deps} deps`;
-	return stage.fastMode === true ? `${dependencyText} · fast` : dependencyText;
+	return dependencyText;
 }
 
 function workflowChildRunRows(stage: StageSnapshot, width: number): string[] {