@bastani/atomic 0.9.16-alpha.1 → 0.9.16-alpha.3

package/dist/builtin/workflows/src/tui/store-widget-installer.ts

@@ -1,338 +0,0 @@
-/**
- * Widget installer — wires the orchestrator's below-editor widget to the
- * workflow store using a single long-lived component that is updated in
- * place (issue #1109).
- *
- * Placement note (belowEditor, not aboveEditor): pi-tui full-clears the
- * screen + scrollback whenever a changed line is above the viewport fold. An
- * aboveEditor widget gets pushed above the fold once the bottom region grows
- * tall, so each repaint cleared the whole screen (the resize flicker in
- * #1109). belowEditor keeps the widget among the last rendered lines (always
- * within the bottom viewport), so a repaint is a clean differential redraw.
- * See the `setWidget` call site for the full rationale.
- *
- * Pattern:
- *   1. The widget mounts once (`ui.setWidget(WIDGET_KEY, factory)`) on the
- *      hidden→visible transition and unmounts once
- *      (`ui.setWidget(WIDGET_KEY, undefined)`) on visible→hidden. Pi treats
- *      every `setWidget` call as a full replacement — it disposes the
- *      previous component, constructs a fresh one, rebuilds the widget
- *      container, and redraws — so re-issuing `setWidget` on each store
- *      mutation or clock tick produces a visible flicker. We therefore call
- *      it only on real mount/unmount transitions.
- *   2. Semantic store mutations, visible elapsed-clock ticks, and the one-shot
- *      recent-ended expiry call `ui.requestRender()` only. Pi re-invokes the
- *      *same* mounted component's `render(width)` with no dispose/remount, so
- *      elapsed labels advance continuously without lifecycle flicker.
- *   3. The long-lived component reads the *latest* store snapshot and captured
- *      clock through live getters at render time, so it is never visually
- *      stale — including after `up-arrow` history recall and other host renders.
- *   4. The mount / unmount / update / none decision is extracted into the
- *      pure, unit-testable `decideWidgetAction`, keeping this module a thin
- *      orchestration layer over a pure policy (SRP).
- *   5. Running workflows schedule the next exact elapsed-second boundary.
- *      Paused workflows stay timer-free, and terminal cards use only the
- *      one-shot recent-ended expiry (`nextWidgetRefreshDelayMs`).
- */
-
-import {
-	decideReactiveWidgetAction,
-	installReactiveWidget,
-	isStaleExtensionContextError,
-	type ReactiveWidgetAction,
-	type ReactiveWidgetFactory,
-	type ReactiveWidgetRenderState,
-	type ReactiveWidgetTimerApi,
-	type ReactiveWidgetTimerHandle,
-} from "@bastani/atomic";
-import type { Store } from "../shared/store.js";
-import { readGraphStoreSnapshot, subscribeStoreInvalidation } from "../shared/store-observation.js";
-import type { StoreSnapshot } from "../shared/store-types.js";
-import { buildThemedWidgetLines, nextWidgetRefreshDelayMs } from "./widget.js";
-
-export interface PiTheme {
-	fg(color: string, text: string): string;
-	bold(text: string): string;
-}
-
-export type WidgetFactory = ReactiveWidgetFactory<unknown>;
-export type WidgetAction = ReactiveWidgetAction;
-export type WidgetRenderState = ReactiveWidgetRenderState;
-
-interface UiSlice {
-	setWidget?: (key: string, factory: WidgetFactory | undefined, opts?: { placement?: string }) => void;
-	requestRender?: () => void;
-	onWidgetRelease?: (key: string, listener: () => void) => () => void;
-	notify?: (message: string, type?: "info" | "warning" | "error") => void;
-}
-
-interface TimerApi extends ReactiveWidgetTimerApi {}
-interface TimerHandle extends ReactiveWidgetTimerHandle {}
-
-const defaultTimerApi: TimerApi = {
-	setTimeout: (handler, delayMs) => setTimeout(handler, delayMs) as TimerHandle,
-	clearTimeout: (handle) => clearTimeout(handle as ReturnType<typeof setTimeout>),
-};
-
-export interface LiveWidgetAPI {
-	ui?: UiSlice;
-	on?: (event: string, handler: (payload: unknown, context?: unknown) => void) => void;
-	events?: {
-		on?: (event: string, handler: (payload: unknown) => void) => void;
-	};
-}
-
-const WIDGET_KEY = "workflow.run";
-
-function reportWidgetFailure(ui: UiSlice | undefined, message: string): void {
-	if (ui?.notify) {
-		ui.notify.call(ui, message, "warning");
-		return;
-	}
-	console.error(message);
-	return;
-}
-
-function liveWidgetSnapshot(storeInstance: Store): StoreSnapshot {
-	return {
-		runs: storeInstance.runs(),
-		notices: storeInstance.notices(),
-		version: 0,
-	};
-}
-
-export function decideWidgetAction(prev: WidgetRenderState, nextLines: readonly string[]): WidgetAction {
-	return decideReactiveWidgetAction(prev, nextLines);
-}
-
-export function installStoreWidget(
-	pi: LiveWidgetAPI,
-	storeInstance: Store,
-	timers: TimerApi = defaultTimerApi,
-): () => void {
-	const ui = pi.ui;
-	if (!ui?.setWidget) {
-		// An absent ui slice is normal during extension load: factories run
-		// before the host binds ctx.ui, and session_start re-installs against
-		// the real UI. Only a present-but-widget-less ui names a degraded host.
-		if (ui) reportWidgetFailure(ui, "Workflow progress widget is unavailable in this host.");
-		return () => {};
-	}
-	const setWidget = ui.setWidget;
-
-	const requestRender = ui.requestRender;
-	const onWidgetRelease = ui.onWidgetRelease;
-	const controller = installReactiveWidget<StoreSnapshot, unknown>({
-		ui: {
-			setWidget: (key, factory, opts) => setWidget.call(ui, key, factory, opts),
-			...(requestRender ? { requestRender: () => requestRender.call(ui) } : {}),
-			...(onWidgetRelease ? { onWidgetRelease: (key, listener) => onWidgetRelease.call(ui, key, listener) } : {}),
-		},
-		key: WIDGET_KEY,
-		placement: "belowEditor",
-		timers,
-		getSnapshot: () => liveWidgetSnapshot(storeInstance),
-		subscribe: (listener) => subscribeStoreInvalidation(storeInstance, listener),
-		getPreviewLines: (snap, now) => buildThemedWidgetLines(snap, undefined, 120, now),
-		render: (snap, { theme, width, now }) => buildThemedWidgetLines(snap, theme as PiTheme | undefined, width, now),
-		getNextRefreshDelayMs: (snap, now) => nextWidgetRefreshDelayMs(snap, now),
-		// #1856: a store mutation that leaves the rendered card byte-identical
-		// must not broadcast a host-wide render (each one becomes terminal
-		// writes that fight native main-chat scrollback).
-		requestRenderOnStateNoop: false,
-		isStaleError: isStaleExtensionContextError,
-		onMountError: (error) => {
-			reportWidgetFailure(ui, `Workflow progress widget could not mount: ${error.message}`);
-		},
-	});
-
-	return () => controller.dispose();
-}
-
-interface ToolExecutionStartPayload {
-	toolName?: string;
-	tool_name?: string;
-	name?: string;
-	runId?: string;
-	run_id?: string;
-	stageId?: string;
-	stage_id?: string;
-	toolCallId?: string;
-	tool_call_id?: string;
-	toolUseId?: string;
-	tool_use_id?: string;
-	id?: string;
-	input?: Record<string, unknown>;
-	args?: Record<string, unknown>;
-	ts?: number;
-}
-
-interface ToolExecutionEndPayload extends ToolExecutionStartPayload {
-	output?: string;
-	endedAt?: number;
-	ended_at?: number;
-	error?: string;
-}
-
-export function installToolExecutionHooks(pi: LiveWidgetAPI, storeInstance: Store): void {
-	const eventBusOn = pi.events?.on;
-	const extensionOn = pi.on;
-	if (typeof eventBusOn !== "function" && typeof extensionOn !== "function") return;
-
-	interface StageScope {
-		readonly runId: string;
-		readonly stageId: string;
-	}
-
-	interface ActiveToolCall extends StageScope {
-		readonly callId: string;
-		readonly name: string;
-		readonly startedAt: number;
-	}
-
-	const terminalRunStatuses = new Set(["completed", "failed", "killed", "skipped", "cancelled", "blocked"]);
-	const terminalStageStatuses = new Set(["completed", "failed", "skipped"]);
-	const activeToolCalls = new Map<string, ActiveToolCall>();
-
-	function activeCallKey(runId: string, stageId: string, callId: string): string {
-		return `${runId}\0${stageId}\0${callId}`;
-	}
-
-	function firstNonEmptyString(...values: readonly unknown[]): string | null {
-		for (const value of values) {
-			if (typeof value === "string" && value.length > 0) return value;
-		}
-		return null;
-	}
-
-	function resolveExplicitStageScope(payload: ToolExecutionStartPayload): StageScope | null {
-		const runId = firstNonEmptyString(payload.runId, payload.run_id);
-		const stageId = firstNonEmptyString(payload.stageId, payload.stage_id);
-		if (runId === null || stageId === null) return null;
-		return { runId, stageId };
-	}
-
-	function hasLiveStageScope(scope: StageScope, snap: StoreSnapshot): boolean {
-		const run = snap.runs.find((candidate) => candidate.id === scope.runId);
-		if (!run || run.endedAt !== undefined || terminalRunStatuses.has(run.status)) return false;
-		const stage = run.stages.find((candidate) => candidate.id === scope.stageId);
-		return stage !== undefined && !terminalStageStatuses.has(stage.status);
-	}
-
-	function pruneActiveToolCalls(snap: StoreSnapshot): void {
-		for (const [key, call] of activeToolCalls) {
-			if (!hasLiveStageScope(call, snap)) activeToolCalls.delete(key);
-		}
-	}
-
-	function activeToolCallForPayload(payload: ToolExecutionStartPayload): { key: string; call: ActiveToolCall } | null {
-		const scope = resolveExplicitStageScope(payload);
-		if (!scope) return null;
-
-		const key = activeCallKey(scope.runId, scope.stageId, toolCallId(payload));
-		const call = activeToolCalls.get(key);
-		return call ? { key, call } : null;
-	}
-
-	subscribeStoreInvalidation(storeInstance, () => pruneActiveToolCalls(readGraphStoreSnapshot(storeInstance)));
-
-	function recordToolStart(payload: unknown): void {
-		if (!isToolExecutionPayload(payload)) return;
-
-		const snap = readGraphStoreSnapshot(storeInstance);
-		pruneActiveToolCalls(snap);
-
-		const scope = resolveExplicitStageScope(payload);
-		if (!scope || !hasLiveStageScope(scope, snap)) return;
-
-		const callId = toolCallId(payload);
-		const key = activeCallKey(scope.runId, scope.stageId, callId);
-		if (activeToolCalls.has(key)) return;
-
-		const name = toolName(payload);
-		const startedAt = payload.ts ?? Date.now();
-		activeToolCalls.set(key, { ...scope, callId, name, startedAt });
-		storeInstance.recordToolStart(scope.runId, scope.stageId, {
-			name,
-			input: toolInput(payload),
-			startedAt,
-		});
-	}
-
-	function recordToolUpdate(payload: unknown): void {
-		if (!isToolExecutionPayload(payload)) return;
-
-		pruneActiveToolCalls(readGraphStoreSnapshot(storeInstance));
-
-		if (!activeToolCallForPayload(payload)) return;
-		// Updates are attach-only until the store has an explicit update API.
-	}
-
-	function recordToolEnd(payload: unknown): void {
-		if (!isToolExecutionPayload(payload)) return;
-
-		pruneActiveToolCalls(readGraphStoreSnapshot(storeInstance));
-
-		const active = activeToolCallForPayload(payload);
-		if (!active) return;
-
-		storeInstance.recordToolEnd(active.call.runId, active.call.stageId, {
-			name: active.call.name,
-			input: toolInput(payload),
-			startedAt: active.call.startedAt,
-			endedAt: payload.endedAt ?? payload.ended_at ?? Date.now(),
-			output: payload.output,
-		});
-		activeToolCalls.delete(active.key);
-	}
-
-	const safeStart = safelyHandle(recordToolStart);
-	const safeUpdate = safelyHandle(recordToolUpdate);
-	const safeEnd = safelyHandle(recordToolEnd);
-
-	if (typeof eventBusOn === "function") {
-		eventBusOn.call(pi.events, "tool_execution_start", safeStart);
-		eventBusOn.call(pi.events, "tool_execution_update", safeUpdate);
-		eventBusOn.call(pi.events, "tool_execution_end", safeEnd);
-	}
-	if (typeof extensionOn === "function") {
-		extensionOn.call(pi, "tool_execution_start", safeStart);
-		extensionOn.call(pi, "tool_execution_update", safeUpdate);
-		extensionOn.call(pi, "tool_execution_end", safeEnd);
-		extensionOn.call(pi, "tool_call", safeStart);
-		extensionOn.call(pi, "tool_result", safeEnd);
-	}
-}
-
-function isToolExecutionPayload(payload: unknown): payload is ToolExecutionEndPayload {
-	return typeof payload === "object" && payload !== null;
-}
-
-function safelyHandle(handler: (payload: unknown) => void): (payload: unknown) => void {
-	return (payload: unknown): void => {
-		try {
-			handler(payload);
-		} catch {
-			// Event hooks must not crash pi runtime when optional event payloads vary.
-		}
-	};
-}
-
-function toolName(payload: ToolExecutionStartPayload): string {
-	return payload.toolName ?? payload.tool_name ?? payload.name ?? "unknown";
-}
-
-function toolCallId(payload: ToolExecutionStartPayload): string {
-	return (
-		payload.toolCallId ??
-		payload.tool_call_id ??
-		payload.toolUseId ??
-		payload.tool_use_id ??
-		payload.id ??
-		"__ask_user_question__"
-	);
-}
-
-function toolInput(payload: ToolExecutionStartPayload): Record<string, unknown> | undefined {
-	return payload.input ?? payload.args;
-}

package/dist/builtin/workflows/src/tui/submit-pane.ts

@@ -1,148 +0,0 @@
-import type { WorkflowInputEntry } from "../extension/render-result.js";
-import { BOLD, hexBg, hexToAnsi, paint, RESET } from "./color-utils.js";
-import type { GraphTheme } from "./graph-theme.js";
-import {
-	formatReviewValue,
-	renderWrappedPrefixedLines,
-	truncateToWidth,
-	visibleWidth,
-	wrapPlainText,
-} from "./text-helpers.js";
-
-export interface SubmitPaneRenderOpts {
-	workflowName: string;
-	fields: readonly WorkflowInputEntry[];
-	rawText: Record<string, string>;
-	theme: GraphTheme;
-	width: number;
-}
-
-export interface SubmitControlsRenderOpts {
-	invalidFieldNames: readonly string[];
-	submitFocused: boolean;
-	theme: GraphTheme;
-	width: number;
-}
-
-export function renderWorkflowFormFooterHints(theme: GraphTheme, width: number): string {
-	const hints = [
-		"Enter to select · ↑/↓ to navigate · Tab through questions to Submit · Esc to cancel",
-		"Enter · ↑/↓ · Tab to Submit · Esc",
-		"Enter · Tab · Esc",
-		"Esc",
-	];
-	const selected = hints.find((hint) => visibleWidth(hint) <= width) ?? hints[hints.length - 1]!;
-	return paint(truncateToWidth(selected, width, "…"), theme.dim);
-}
-
-export function renderAskChoiceRows(
-	index: number,
-	label: string,
-	active: boolean,
-	theme: GraphTheme,
-	width: number,
-): string[] {
-	const plainPrefix = `${active ? "❯ " : "  "}${index}. `;
-	const firstPrefix = `${active ? paint("❯ ", theme.accent) : "  "}${index}. `;
-	return renderWrappedPrefixedLines({
-		text: label,
-		width,
-		plainPrefix,
-		firstPrefix,
-		styleLine: (line) => (active ? paint(line, theme.accent, { bold: true }) : paint(line, theme.textMuted)),
-	});
-}
-
-export function renderSubmitReview(opts: SubmitPaneRenderOpts): string[] {
-	const { workflowName, fields, rawText, theme, width } = opts;
-	const out: string[] = [paint("Review your inputs", theme.accent, { bold: true }), ""];
-	out.push(truncateToWidth(paint("/workflow ", theme.dim) + paint(workflowName, theme.text), width, "…", true));
-	for (const field of fields) {
-		out.push(truncateToWidth(paint(" ● ", theme.dim) + paint(field.name, theme.textMuted), width, "…", true));
-		out.push(...renderReviewValueRows(field, rawText[field.name] ?? "", theme, width));
-	}
-	return out;
-}
-
-export function renderSubmitControls(opts: SubmitControlsRenderOpts): string[] {
-	const { invalidFieldNames, submitFocused, theme, width } = opts;
-	const invalidCount = invalidFieldNames.length;
-	const submitLabel = "SUBMIT";
-	const lines: string[] = [];
-	if (invalidCount > 0) {
-		lines.push(
-			...wrapPlainText(`Answer remaining inputs before submitting: ${invalidFieldNames.join(", ")}`, width).map(
-				(line) => paint(line, theme.warning),
-			),
-			"",
-		);
-	}
-	lines.push(...renderSubmitToolbar(submitLabel, submitFocused, theme, width));
-	return lines;
-}
-
-function renderSubmitToolbar(label: string, focused: boolean, theme: GraphTheme, width: number): string[] {
-	const chromeBg = hexBg(theme.backgroundPanel);
-	const button = renderCompactSubmitButton(label, focused, theme, chromeBg);
-	const textFg = hexToAnsi(theme.text);
-	const mutedFg = hexToAnsi(theme.textMuted);
-	const dimFg = hexToAnsi(theme.dim);
-	const hint = (key: string, description: string): string =>
-		`${chromeBg}${textFg}${BOLD}${key}${RESET}${chromeBg}${mutedFg} ${description}${RESET}${chromeBg}`;
-	const hints = [hint("enter", "Submit"), hint("tab", "Next"), hint("shift+tab", "Prev"), hint("esc", "Cancel")].join(
-		`${chromeBg}${dimFg}  ·  ${RESET}${chromeBg}`,
-	);
-	const leftPad = 1;
-	const gap = 2;
-	const rightPad = 1;
-	const hintBudget = Math.max(0, width - leftPad - button.visibleWidth - gap - rightPad);
-	const fittedHints = truncateToWidth(hints, hintBudget, "…", true);
-	const hintWidth = visibleWidth(fittedHints);
-	const filler = Math.max(0, width - leftPad - button.visibleWidth - gap - hintWidth - rightPad);
-	const line = `${chromeBg} ${button.text}${chromeBg}${" ".repeat(gap)}${fittedHints}${chromeBg}${" ".repeat(filler)} ${RESET}`;
-	const clipped = truncateToWidth(line, width, "", true);
-	return [`${clipped}${chromeBg}${" ".repeat(Math.max(0, width - visibleWidth(clipped)))}${RESET}`];
-}
-
-function renderCompactSubmitButton(
-	label: string,
-	focused: boolean,
-	theme: GraphTheme,
-	chromeBg: string,
-): { text: string; visibleWidth: number } {
-	const plain = ` ${label} `;
-	if (focused) {
-		const accentBg = hexBg(theme.accent);
-		const fg = hexToAnsi(theme.backgroundPanel);
-		return {
-			text: `${accentBg}${fg}${BOLD}${plain}${RESET}${chromeBg}`,
-			visibleWidth: visibleWidth(plain),
-		};
-	}
-	const labelFg = hexToAnsi(theme.accent);
-	return {
-		text: `${chromeBg}${labelFg}${BOLD}${plain}${RESET}${chromeBg}`,
-		visibleWidth: visibleWidth(plain),
-	};
-}
-
-function renderReviewValueRows(field: WorkflowInputEntry, raw: string, theme: GraphTheme, width: number): string[] {
-	const plainPrefix = "   → ";
-	const firstPrefix = `   ${paint("→ ", theme.dim)}`;
-	return renderWrappedPrefixedLines({
-		text: formatFieldReviewValue(field, raw),
-		width,
-		plainPrefix,
-		firstPrefix,
-		styleLine: (line) => paint(line, theme.text),
-	});
-}
-
-function formatFieldReviewValue(field: WorkflowInputEntry, raw: string): string {
-	if (field.type === "boolean") {
-		const normalized = raw.trim().toLowerCase();
-		if (normalized.length === 0) return formatReviewValue(raw);
-		return normalized === "true" || normalized === "1" ? "on" : "off";
-	}
-	return formatReviewValue(raw);
-}

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

@@ -1,172 +0,0 @@
-/**
- * Stage switcher — "/" popup that lists stages for direct keyboard jump.
- *
- * Visual contract (DESIGN.md §5 Picker Rows):
- *  - Rounded box, `borderActive` border, `backgroundPanel` interior.
- *  - Header row: leading "stages" caption (dim) + right-aligned key·label
- *    hint (`↑↓ select · ↵ open stage chat · esc close`) in dim.
- *  - Default row: `paddingLeft: 1`, `paddingRight: 2`, icon + name, status
- *    glyph coloured.
- *  - Selected row: accent pill (blue bg + surface0 fg + bold). Focus is
- *    expressed by the filled row, not a leading caret glyph.
- *  - Empty state: `(no matches)` in dim.
- */
-import type { StageSnapshot } from "../shared/store-types.js";
-import { BOLD, hexBg, hexToAnsi, RESET } from "./color-utils.js";
-import type { GraphTheme } from "./graph-theme.js";
-import { statusColor, statusIcon } from "./status-helpers.js";
-import { sliceColumns, truncateToWidth, visibleWidth } from "./text-helpers.js";
-
-export interface SwitcherState {
-	query: string;
-	selectedIndex: number;
-}
-
-export interface SwitcherOpts {
-	width: number;
-	theme: GraphTheme;
-	canOpenStageChat?: (stage: StageSnapshot) => boolean;
-}
-
-export function filterStages(stages: readonly StageSnapshot[], query: string): StageSnapshot[] {
-	if (!query) return [...stages];
-	const q = query.toLowerCase();
-	return stages.filter((s) => s.name.toLowerCase().includes(q));
-}
-
-const STAGE_HINT = "↑↓ select · ↵ open stage chat · esc close";
-const STAGE_COMPACT_HINT = "↵ stage chat · esc close";
-/** Selecting a tool row opens its read-only detail, so Enter is live there too. */
-const TOOL_HINT = "↑↓ select · ↵ open tool detail · esc close";
-const TOOL_COMPACT_HINT = "↵ tool detail · esc close";
-const NO_CHAT_HINT = "↑↓ select · esc close";
-const NO_CHAT_COMPACT_HINT = "esc close";
-
-/** Pad a visible string (ANSI-safe) to exactly `width` cells. */
-function padVisible(s: string, width: number): string {
-	const clipped = visibleWidth(s) > width ? truncateToWidth(s, width, "…", true) : s;
-	return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
-}
-
-/**
- * Truncate without appending any ANSI reset before the suffix.
- *
- * Selected rows are wrapped in a single accent run after row text is composed;
- * inserting RESET before the ellipsis would prematurely end that highlight.
- */
-function truncateToWidthWithoutReset(text: string, width: number, suffix = ""): string {
-	const targetWidth = Math.max(0, width);
-	if (visibleWidth(text) <= targetWidth) return text;
-	if (targetWidth === 0) return "";
-
-	const suffixWidth = visibleWidth(suffix);
-	if (suffixWidth >= targetWidth) {
-		return sliceColumns(suffix, 0, targetWidth, true);
-	}
-
-	return `${sliceColumns(text, 0, targetWidth - suffixWidth, true)}${suffix}`;
-}
-
-function statusText(status: StageSnapshot["status"]): string {
-	return status === "awaiting_input" ? "awaiting" : status === "completed" ? "complete" : status.replace(/_/g, " ");
-}
-
-export function renderSwitcher(stages: readonly StageSnapshot[], state: SwitcherState, opts: SwitcherOpts): string[] {
-	const { width, theme } = opts;
-	const filtered = filterStages(stages, state.query);
-	const innerWidth = Math.max(4, width - 2);
-	const selected = filtered[state.selectedIndex];
-	const selectedIsTool = selected?.nodeKind === "tool";
-	const canOpenStageChat = selected !== undefined && !selectedIsTool && (opts.canOpenStageChat?.(selected) ?? true);
-
-	const border = hexToAnsi(theme.borderActive);
-	const panelBg = hexBg(theme.backgroundPanel);
-	const dim = hexToAnsi(theme.dim);
-	const muted = hexToAnsi(theme.textMuted);
-	const text = hexToAnsi(theme.text);
-	const accent = hexBg(theme.accent);
-	const accentFg = hexToAnsi(theme.backgroundElement);
-
-	const lines: string[] = [];
-
-	// Top border
-	lines.push(`${border}╭${"─".repeat(innerWidth)}╮${RESET}`);
-
-	// Header row: "  STAGES  query   …   ↑↓ select · ↵ open stage chat · esc close "
-	const leftLabelText = "  STAGES";
-	const hint =
-		innerWidth >= 44
-			? canOpenStageChat
-				? STAGE_HINT
-				: selectedIsTool
-					? TOOL_HINT
-					: NO_CHAT_HINT
-			: canOpenStageChat
-				? STAGE_COMPACT_HINT
-				: selectedIsTool
-					? TOOL_COMPACT_HINT
-					: NO_CHAT_COMPACT_HINT;
-	const queryBudget = Math.max(0, innerWidth - visibleWidth(leftLabelText) - visibleWidth(hint) - 3);
-	const queryDisplay = state.query ? ` ${truncateToWidth(state.query, queryBudget, "…")}` : "";
-	const leftSegmentWidth = visibleWidth(`${leftLabelText}${queryDisplay}`);
-	const gap = Math.max(1, innerWidth - leftSegmentWidth - visibleWidth(hint) - 1);
-	const header =
-		`${panelBg}${muted}${BOLD}${leftLabelText}${RESET}${panelBg}` +
-		(queryDisplay ? `${text}${queryDisplay}${RESET}${panelBg}` : "") +
-		" ".repeat(gap) +
-		`${dim}${hint}${RESET}${panelBg}`;
-	lines.push(`${border}│${RESET}${padVisible(header, innerWidth)}${border}│${RESET}`);
-
-	// Quiet rule under header. Keep it inside the rounded panel instead of
-	// joining into the side borders with square tee glyphs.
-	const rule = innerWidth <= 2 ? " ".repeat(innerWidth) : ` ${dim}${"─".repeat(innerWidth - 2)}${RESET}${panelBg} `;
-	lines.push(`${border}│${RESET}${panelBg}${rule}${border}│${RESET}`);
-
-	// Stage list — viewport of 8 around selection
-	const maxVisible = 8;
-	const start = Math.max(0, state.selectedIndex - Math.floor(maxVisible / 2));
-	const visible = filtered.slice(start, start + maxVisible);
-
-	if (visible.length === 0) {
-		const empty = `${panelBg}${dim}  (no matches)${RESET}${panelBg}`;
-		lines.push(`${border}│${RESET}${panelBg}${padVisible(empty, innerWidth)}${border}│${RESET}`);
-	}
-
-	for (let i = 0; i < visible.length; i++) {
-		const stage = visible[i]!;
-		const idx = start + i;
-		const isSelected = idx === state.selectedIndex;
-		const icon = statusIcon(stage.status);
-		const label = statusText(stage.status);
-		const rowTextBudget = Math.max(8, innerWidth - 14);
-		const name = truncateToWidth(stage.name, rowTextBudget, "…");
-
-		if (isSelected) {
-			const metaWidth = visibleWidth(label);
-			const nameBudget = Math.max(4, innerWidth - visibleWidth(`  ${icon} `) - metaWidth - 2);
-			const selectedName = truncateToWidthWithoutReset(stage.name, nameBudget, "…");
-			const prefix = `  ${icon} ${selectedName}`;
-			const visibleRow = `${prefix}${" ".repeat(Math.max(1, innerWidth - visibleWidth(`${prefix}${label}`) - 1))}${label} `;
-			const padded = padVisible(visibleRow, innerWidth);
-			const styled = `${accent}${accentFg}${BOLD}${padded}${RESET}`;
-			lines.push(`${border}│${RESET}${styled}${border}│${RESET}`);
-		} else {
-			const iconColor = hexToAnsi(statusColor(stage.status, theme));
-			const status = `${dim}${label}${RESET}${panelBg}`;
-			const visibleRow = `  ${icon} ${name}`;
-			const gap = Math.max(1, innerWidth - visibleWidth(visibleRow) - visibleWidth(label) - 1);
-			// Compose styled row that pads to innerWidth using visible length.
-			const styled =
-				`${panelBg}  ${iconColor}${icon}${RESET}${panelBg} ${muted}${name}${RESET}${panelBg}` +
-				" ".repeat(gap) +
-				status;
-			const padded = padVisible(styled, innerWidth);
-			lines.push(`${border}│${RESET}${padded}${border}│${RESET}`);
-		}
-	}
-
-	// Bottom border
-	lines.push(`${border}╰${"─".repeat(innerWidth)}╯${RESET}`);
-
-	return lines;
-}