@bastani/atomic 0.8.31-alpha.5 → 0.9.0-alpha.1

package/examples/extensions/gondolin/index.ts

@@ -284,14 +284,11 @@ async function executeGondolinGrep(
 		},
 		signal,
 	);
-
 	if (matchCount === 0) return { content: [{ type: "text", text: "No matches found" }], details: undefined };
-
 	const rawOutput = outputLines.join("\n");
 	const truncation = truncateHead(rawOutput, { maxLines: Number.MAX_SAFE_INTEGER });
 	const notices: string[] = [];
 	let output = truncation.content;
-
 	if (matchLimitReached) {
 		details.matchLimitReached = effectiveLimit;
 		notices.push(`${effectiveLimit} matches limit reached`);
@@ -305,13 +302,11 @@ async function executeGondolinGrep(
 		notices.push(`${formatSize(DEFAULT_MAX_BYTES)} limit reached`);
 	}
 	if (notices.length > 0) output += `\n\n[${notices.join(". ")}]`;
-
 	return {
 		content: [{ type: "text", text: output }],
 		details: Object.keys(details).length > 0 ? details : undefined,
 	};
 }
-
 function createGondolinBashOps(vm: VM, localCwd: string, shellPath: string): BashOperations {
 	return {
 		exec: async (command, cwd, { onData, signal, timeout }) => {
@@ -320,7 +315,6 @@ function createGondolinBashOps(vm: VM, localCwd: string, shellPath: string): Bas
 			const controller = new AbortController();
 			const onAbort = () => controller.abort();
 			signal?.addEventListener("abort", onAbort, { once: true });
-
 			let timedOut = false;
 			const timer =
 				timeout && timeout > 0
@@ -329,7 +323,6 @@ function createGondolinBashOps(vm: VM, localCwd: string, shellPath: string): Bas
 							controller.abort();
 						}, timeout * 1000)
 					: undefined;
-
 			try {
 				const proc = vm.exec([shellPath, "-lc", command], {
 					cwd: guestCwd,
@@ -353,7 +346,6 @@ function createGondolinBashOps(vm: VM, localCwd: string, shellPath: string): Bas
 		},
 	};
 }
-
 export default function (pi: ExtensionAPI) {
 	const localCwd = process.cwd();
 	const localRead = createReadTool(localCwd);
@@ -363,11 +355,9 @@ export default function (pi: ExtensionAPI) {
 	const localGrep = createGrepTool(localCwd);
 	const localFind = createFindTool(localCwd);
 	const localLs = createLsTool(localCwd);
-
 	let vm: VM | undefined;
 	let vmStarting: Promise<VM> | undefined;
 	let shellPath = "/bin/sh";
-
 	async function startVm(ctx?: ExtensionContext): Promise<VM> {
 		ctx?.ui.setStatus("gondolin", ctx.ui.theme.fg("accent", `Gondolin: starting ${GUEST_WORKSPACE}`));
 		const created = await VM.create({
@@ -388,7 +378,6 @@ export default function (pi: ExtensionAPI) {
 		ctx?.ui.notify(`Gondolin VM ready. ${localCwd} is mounted at ${GUEST_WORKSPACE}.`, "info");
 		return created;
 	}
-
 	async function ensureVm(ctx?: ExtensionContext): Promise<VM> {
 		if (vm) return vm;
 		if (!vmStarting) {
@@ -398,11 +387,9 @@ export default function (pi: ExtensionAPI) {
 		}
 		return vmStarting;
 	}
-
 	pi.on("session_start", async (_event, ctx) => {
 		await ensureVm(ctx);
 	});
-
 	pi.on("session_shutdown", async (_event, ctx) => {
 		const activeVm = vm;
 		vm = undefined;
@@ -415,7 +402,6 @@ export default function (pi: ExtensionAPI) {
 			ctx.ui.setStatus("gondolin", undefined);
 		}
 	});
-
 	pi.registerCommand("gondolin", {
 		description: "Show Gondolin VM status",
 		handler: async (_args, ctx) => {
@@ -431,7 +417,6 @@ export default function (pi: ExtensionAPI) {
 			);
 		},
 	});
-
 	pi.registerTool({
 		...localRead,
 		async execute(id, params, signal, onUpdate, ctx) {
@@ -442,7 +427,6 @@ export default function (pi: ExtensionAPI) {
 			return tool.execute(id, params, signal, onUpdate);
 		},
 	});
-
 	pi.registerTool({
 		...localWrite,
 		async execute(id, params, signal, onUpdate, ctx) {
@@ -453,7 +437,6 @@ export default function (pi: ExtensionAPI) {
 			return tool.execute(id, params, signal, onUpdate);
 		},
 	});
-
 	pi.registerTool({
 		...localEdit,
 		async execute(id, params, signal, onUpdate, ctx) {
@@ -464,7 +447,6 @@ export default function (pi: ExtensionAPI) {
 			return tool.execute(id, params, signal, onUpdate);
 		},
 	});
-
 	pi.registerTool({
 		...localBash,
 		async execute(id, params, signal, onUpdate, ctx) {
@@ -475,7 +457,6 @@ export default function (pi: ExtensionAPI) {
 			return tool.execute(id, params, signal, onUpdate);
 		},
 	});
-
 	pi.registerTool({
 		...localLs,
 		async execute(id, params, signal, onUpdate, ctx) {
@@ -486,7 +467,6 @@ export default function (pi: ExtensionAPI) {
 			return tool.execute(id, params, signal, onUpdate);
 		},
 	});
-
 	pi.registerTool({
 		...localFind,
 		async execute(id, params, signal, onUpdate, ctx) {
@@ -497,7 +477,6 @@ export default function (pi: ExtensionAPI) {
 			return tool.execute(id, params, signal, onUpdate);
 		},
 	});
-
 	pi.registerTool({
 		...localGrep,
 		async execute(_id, params, signal, _onUpdate, ctx) {
@@ -505,12 +484,10 @@ export default function (pi: ExtensionAPI) {
 			return executeGondolinGrep(activeVm, localCwd, params, signal);
 		},
 	});
-
 	pi.on("user_bash", async (_event, ctx) => {
 		const activeVm = await ensureVm(ctx);
 		return { operations: createGondolinBashOps(activeVm, localCwd, shellPath) };
 	});
-
 	pi.on("before_agent_start", async (event, ctx) => {
 		await ensureVm(ctx);
 		const localLine = `Current working directory: ${localCwd}`;

package/examples/extensions/overlay-qa-animation-components.ts

@@ -0,0 +1,255 @@
+import type { Theme } from "@bastani/atomic";
+import type { TUI } from "@earendil-works/pi-tui";
+import { matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
+import { spawn } from "child_process";
+import { BaseOverlay } from "./overlay-qa-shared.js";
+
+export class StreamingOverflowComponent extends BaseOverlay {
+	private tui: TUI;
+	private lines: string[] = [];
+	private proc: ReturnType<typeof spawn> | null = null;
+	private scrollOffset = 0;
+	private maxVisibleLines = 15;
+	private finished = false;
+	private disposed = false;
+	private done: () => void;
+
+	constructor(tui: TUI, theme: Theme, done: () => void) {
+		super(theme);
+		this.tui = tui;
+		this.done = done;
+		this.startProcess();
+	}
+
+	private startProcess(): void {
+		// Run a command that produces many lines with ANSI colors
+		// Using find with -ls produces file listings, or use ls --color
+		this.proc = spawn("bash", [
+			"-c",
+			`
+			echo "Starting streaming overflow test (30+ seconds)..."
+			echo "This simulates subagent output with colors, hyperlinks, and long paths"
+			echo ""
+			for i in $(seq 1 100); do
+				# Simulate long file paths with OSC 8 hyperlinks (clickable) - tests width overflow
+				DIR="/Users/example/Documents/development/atomic/packages/coding-agent/src/modes/interactive"
+				FILE="\${DIR}/components/very-long-component-name-that-exceeds-width-\${i}.ts"
+				echo -e "\\033]8;;file://\${FILE}\\007▶ read: \${FILE}\\033]8;;\\007"
+
+				# Add some colored status messages with long text
+				if [ $((i % 5)) -eq 0 ]; then
+					echo -e "  \\033[32m✓ Successfully processed \${i} files in /Users/example/Documents/development/atomic\\033[0m"
+				fi
+				if [ $((i % 7)) -eq 0 ]; then
+					echo -e "  \\033[33m⚠ Warning: potential issue detected at line \${i} in very-long-component-name-that-exceeds-width.ts\\033[0m"
+				fi
+				if [ $((i % 11)) -eq 0 ]; then
+					echo -e "  \\033[31m✗ Error: file not found /some/really/long/path/that/definitely/exceeds/the/overlay/width/limit/file-\${i}.ts\\033[0m"
+				fi
+				sleep 0.3
+			done
+			echo ""
+			echo -e "\\033[32m✓ Complete - 100 files processed in 30 seconds\\033[0m"
+			echo "Press Esc to close"
+			`,
+		]);
+
+		this.proc.stdout?.on("data", (data: Buffer) => {
+			if (this.disposed) return; // Guard against callbacks after dispose
+			const text = data.toString();
+			const newLines = text.split("\n");
+			for (const line of newLines) {
+				if (line) this.lines.push(line);
+			}
+			// Auto-scroll to bottom
+			this.scrollOffset = Math.max(0, this.lines.length - this.maxVisibleLines);
+			this.tui.requestRender();
+		});
+
+		this.proc.stderr?.on("data", (data: Buffer) => {
+			if (this.disposed) return; // Guard against callbacks after dispose
+			this.lines.push(this.theme.fg("error", data.toString().trim()));
+			this.tui.requestRender();
+		});
+
+		this.proc.on("close", () => {
+			if (this.disposed) return; // Guard against callbacks after dispose
+			this.finished = true;
+			this.tui.requestRender();
+		});
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+			this.proc?.kill();
+			this.done();
+		} else if (matchesKey(data, "up")) {
+			this.scrollOffset = Math.max(0, this.scrollOffset - 1);
+			this.tui.requestRender(); // Trigger re-render after scroll
+		} else if (matchesKey(data, "down")) {
+			this.scrollOffset = Math.min(Math.max(0, this.lines.length - this.maxVisibleLines), this.scrollOffset + 1);
+			this.tui.requestRender(); // Trigger re-render after scroll
+		}
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const innerW = Math.max(1, width - 2);
+		const padLine = (s: string) => truncateToWidth(s, innerW, "...", true);
+		const border = (c: string) => th.fg("border", c);
+
+		const result: string[] = [];
+		const title = truncateToWidth(` Streaming Output (${this.lines.length} lines) `, innerW);
+		const titlePad = Math.max(0, innerW - visibleWidth(title));
+		result.push(border("╭") + th.fg("accent", title) + border(`${"─".repeat(titlePad)}╮`));
+
+		// Scroll indicators
+		const canScrollUp = this.scrollOffset > 0;
+		const canScrollDown = this.scrollOffset < this.lines.length - this.maxVisibleLines;
+		const scrollInfo = `↑${this.scrollOffset} | ↓${Math.max(0, this.lines.length - this.maxVisibleLines - this.scrollOffset)}`;
+
+		result.push(
+			border("│") + padLine(canScrollUp || canScrollDown ? th.fg("dim", ` ${scrollInfo}`) : "") + border("│"),
+		);
+
+		// Visible lines - truncate long lines to fit within border
+		const visibleLines = this.lines.slice(this.scrollOffset, this.scrollOffset + this.maxVisibleLines);
+		for (const line of visibleLines) {
+			result.push(border("│") + padLine(` ${line}`) + border("│"));
+		}
+
+		// Pad to maxVisibleLines
+		for (let i = visibleLines.length; i < this.maxVisibleLines; i++) {
+			result.push(border("│") + padLine("") + border("│"));
+		}
+
+		const status = this.finished ? th.fg("success", "✓ Done") : th.fg("warning", "● Running");
+		result.push(border("│") + padLine(` ${status} ${th.fg("dim", "| ↑↓ scroll | Esc close")}`) + border("│"));
+		result.push(border(`╰${"─".repeat(innerW)}╯`));
+
+		return result;
+	}
+
+	dispose(): void {
+		this.disposed = true;
+		this.proc?.kill();
+	}
+}
+
+// Edge position test
+
+export class AnimationDemoComponent extends BaseOverlay {
+	private tui: TUI;
+	private frame = 0;
+	private interval: ReturnType<typeof setInterval> | null = null;
+	private fps = 0;
+	private lastFpsUpdate = Date.now();
+	private framesSinceLastFps = 0;
+	private done: () => void;
+
+	constructor(tui: TUI, theme: Theme, done: () => void) {
+		super(theme);
+		this.tui = tui;
+		this.done = done;
+		this.startAnimation();
+	}
+
+	private startAnimation(): void {
+		// Run at ~30 FPS (same as DOOM target)
+		this.interval = setInterval(() => {
+			this.frame++;
+			this.framesSinceLastFps++;
+
+			// Update FPS counter every second
+			const now = Date.now();
+			if (now - this.lastFpsUpdate >= 1000) {
+				this.fps = this.framesSinceLastFps;
+				this.framesSinceLastFps = 0;
+				this.lastFpsUpdate = now;
+			}
+
+			this.tui.requestRender();
+		}, 1000 / 30);
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+			this.dispose();
+			this.done();
+		}
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const innerW = Math.max(1, width - 2);
+		const padLine = (s: string) => truncateToWidth(s, innerW, "...", true);
+		const border = (c: string) => th.fg("border", c);
+
+		const lines: string[] = [];
+		lines.push(border(`╭${"─".repeat(innerW)}╮`));
+		lines.push(border("│") + padLine(th.fg("accent", " Animation Demo (~30 FPS)")) + border("│"));
+		lines.push(border("│") + padLine(``) + border("│"));
+		lines.push(border("│") + padLine(` Frame: ${th.fg("accent", String(this.frame))}`) + border("│"));
+		lines.push(border("│") + padLine(` FPS: ${th.fg("success", String(this.fps))}`) + border("│"));
+		lines.push(border("│") + padLine(``) + border("│"));
+
+		// Animated content - bouncing bar
+		const barWidth = Math.max(12, innerW - 4); // Ensure enough space for bar
+		const pos = Math.max(0, Math.floor(((Math.sin(this.frame / 10) + 1) * (barWidth - 10)) / 2));
+		const bar = " ".repeat(pos) + th.fg("accent", "██████████") + " ".repeat(Math.max(0, barWidth - 10 - pos));
+		lines.push(border("│") + padLine(` ${bar}`) + border("│"));
+
+		// Spinning character
+		const spinChars = ["◐", "◓", "◑", "◒"];
+		const spin = spinChars[this.frame % spinChars.length];
+		lines.push(border("│") + padLine(` Spinner: ${th.fg("warning", spin!)}`) + border("│"));
+
+		// Color cycling
+		const hue = (this.frame * 3) % 360;
+		const rgb = hslToRgb(hue / 360, 0.8, 0.5);
+		const colorBlock = `\x1b[48;2;${rgb[0]};${rgb[1]};${rgb[2]}m${"  ".repeat(10)}\x1b[0m`;
+		lines.push(border("│") + padLine(` Color: ${colorBlock}`) + border("│"));
+
+		lines.push(border("│") + padLine(``) + border("│"));
+		lines.push(border("│") + padLine(th.fg("dim", " This proves overlays can handle")) + border("│"));
+		lines.push(border("│") + padLine(th.fg("dim", " real-time game-like rendering.")) + border("│"));
+		lines.push(border("│") + padLine(th.fg("dim", " (Atomic doom uses same approach)")) + border("│"));
+		lines.push(border("│") + padLine(``) + border("│"));
+		lines.push(border("│") + padLine(th.fg("dim", " Press Esc to close")) + border("│"));
+		lines.push(border(`╰${"─".repeat(innerW)}╯`));
+
+		return lines;
+	}
+
+	dispose(): void {
+		if (this.interval) {
+			clearInterval(this.interval);
+			this.interval = null;
+		}
+	}
+}
+
+// HSL to RGB helper for color cycling animation
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+	let r: number, g: number, b: number;
+	if (s === 0) {
+		r = g = b = l;
+	} else {
+		const hue2rgb = (p: number, q: number, t: number) => {
+			if (t < 0) t += 1;
+			if (t > 1) t -= 1;
+			if (t < 1 / 6) return p + (q - p) * 6 * t;
+			if (t < 1 / 2) return q;
+			if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+			return p;
+		};
+		const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+		const p = 2 * l - q;
+		r = hue2rgb(p, q, h + 1 / 3);
+		g = hue2rgb(p, q, h);
+		b = hue2rgb(p, q, h - 1 / 3);
+	}
+	return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+// Toggle demo - demonstrates OverlayHandle.setHidden() via onHandle callback

package/examples/extensions/overlay-qa-focus-components.ts

@@ -0,0 +1,222 @@
+import type { Theme } from "@bastani/atomic";
+import type { OverlayHandle, OverlayOptions, TUI } from "@earendil-works/pi-tui";
+import { Input, matchesKey } from "@earendil-works/pi-tui";
+import { BaseOverlay } from "./overlay-qa-shared.js";
+
+export type FocusPanelColor = "error" | "success" | "accent";
+export type FocusPanelConfig = { label: string; color: FocusPanelColor; options: OverlayOptions };
+export type FocusPanelEntry = { panel: FocusPanel; handle: OverlayHandle };
+
+const FOCUS_PANEL_CONFIGS = [
+	{ label: "Alpha", color: "error", options: { row: 2, col: 4, width: 34 } },
+	{ label: "Beta", color: "success", options: { row: 5, col: 28, width: 34 } },
+	{ label: "Gamma", color: "accent", options: { row: 8, col: 52, width: 34 } },
+] satisfies FocusPanelConfig[];
+
+export class FocusDemoController extends BaseOverlay {
+	private readonly tui: TUI;
+	private entries: FocusPanelEntry[] = [];
+	private readonly done: () => void;
+	private closed = false;
+
+	constructor(tui: TUI, theme: Theme, done: () => void) {
+		super(theme);
+		this.tui = tui;
+		this.done = done;
+
+		for (const config of FOCUS_PANEL_CONFIGS) {
+			const panel = new FocusPanel({ theme, config, controller: this });
+			const handle = this.tui.showOverlay(panel, { nonCapturing: true, ...config.options });
+			this.entries.push({ panel, handle });
+		}
+
+		this.focusFirstOpenPanel();
+	}
+
+	focusNext(current: FocusPanel, direction: 1 | -1 = 1): void {
+		const openEntries = this.openEntries();
+		const currentOpenPosition = openEntries.findIndex((entry) => entry.panel === current);
+		if (currentOpenPosition === -1) throw new Error(`Panel ${current.label} is not open`);
+		const nextOpenPosition = (currentOpenPosition + direction + openEntries.length) % openEntries.length;
+		this.focusEntryAt(openEntries, nextOpenPosition);
+	}
+
+	dismiss(panel: FocusPanel): void {
+		const openEntries = this.openEntries();
+		const currentOpenPosition = openEntries.findIndex((candidate) => candidate.panel === panel);
+		if (currentOpenPosition === -1) return;
+		const entry = openEntries[currentOpenPosition];
+		if (!entry) throw new Error(`Invalid focus panel index ${currentOpenPosition}`);
+		const remainingEntries = openEntries.filter((candidate) => candidate.panel !== panel);
+
+		entry.panel.closed = true;
+		entry.handle.hide();
+		if (remainingEntries.length === 0) {
+			this.close();
+			return;
+		}
+
+		this.focusEntryAt(remainingEntries, currentOpenPosition % remainingEntries.length);
+	}
+
+	close(): void {
+		if (this.closed) return;
+		this.closed = true;
+		this.hidePanels();
+		this.done();
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+			this.close();
+		} else if (matchesKey(data, "tab")) {
+			this.focusFirstOpenPanel();
+		}
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const focused = this.entries.find((entry) => entry.handle.isFocused())?.panel.label ?? "Controller";
+		return this.box(
+			[
+				"",
+				` Current focus: ${th.fg("accent", focused)}`,
+				"",
+				" Three overlapping panels above are",
+				` ${th.fg("accent", "nonCapturing")} overlays controlled with`,
+				" raw OverlayHandle.focus()/hide().",
+				"",
+				" Type in the focused panel's input.",
+				" Focused panel renders on top.",
+				"",
+				th.fg("dim", " Tab/Shift+Tab = cycle panels"),
+				th.fg("dim", " Esc/Ctrl+D = dismiss panel"),
+				th.fg("dim", " Ctrl+C = close all"),
+				"",
+			],
+			width,
+			"Focus + Input Demo",
+		);
+	}
+
+	override dispose(): void {
+		if (this.closed) return;
+		this.closed = true;
+		this.hidePanels();
+	}
+
+	private focusFirstOpenPanel(): void {
+		const firstOpen = this.openEntries()[0];
+		if (firstOpen) {
+			firstOpen.handle.focus();
+			this.tui.requestRender();
+		}
+	}
+
+	private focusEntryAt(entries: FocusPanelEntry[], index: number): void {
+		const entry = entries[index];
+		if (!entry) throw new Error(`Invalid focus panel index ${index}`);
+		entry.handle.focus();
+		this.tui.requestRender();
+	}
+
+	private hidePanels(): void {
+		for (const entry of this.entries) {
+			if (!entry.panel.closed) {
+				entry.panel.closed = true;
+				entry.handle.hide();
+			}
+		}
+		this.entries = [];
+	}
+
+	private openEntries(): FocusPanelEntry[] {
+		return this.entries.filter((entry) => !entry.panel.closed);
+	}
+}
+
+export class FocusPanel extends BaseOverlay {
+	focused = false;
+	closed = false;
+	readonly label: string;
+	private readonly color: FocusPanelColor;
+	private readonly controller: FocusDemoController;
+	private readonly input = new Input();
+	private inputs: string[] = [];
+
+	constructor({
+		theme,
+		config,
+		controller,
+	}: {
+		theme: Theme;
+		config: FocusPanelConfig;
+		controller: FocusDemoController;
+	}) {
+		super(theme);
+		this.label = config.label;
+		this.color = config.color;
+		this.controller = controller;
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "tab")) {
+			this.controller.focusNext(this);
+		} else if (matchesKey(data, "shift+tab")) {
+			this.controller.focusNext(this, -1);
+		} else if (matchesKey(data, "escape") || matchesKey(data, "ctrl+d")) {
+			this.controller.dismiss(this);
+		} else if (matchesKey(data, "ctrl+c")) {
+			this.controller.close();
+		} else if (matchesKey(data, "return")) {
+			this.inputs.push("Enter");
+		} else if (matchesKey(data, "up")) {
+			this.inputs.push("↑");
+		} else if (matchesKey(data, "down")) {
+			this.inputs.push("↓");
+		} else if (matchesKey(data, "left")) {
+			this.input.handleInput(data);
+			this.inputs.push("←");
+		} else if (matchesKey(data, "right")) {
+			this.input.handleInput(data);
+			this.inputs.push("→");
+		} else if (matchesKey(data, "backspace")) {
+			this.input.handleInput(data);
+			this.inputs.push("Backspace");
+		} else {
+			this.input.handleInput(data);
+			this.inputs.push(JSON.stringify(data));
+		}
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const innerW = Math.max(1, width - 2);
+		const border = (c: string) => th.fg(this.focused ? this.color : "dim", c);
+		const padLine = (s: string) => truncateToWidth(s, innerW, "...", true);
+		const recent = this.inputs.length === 0 ? "(none)" : this.inputs.slice(-6).join(" ");
+		const lines: string[] = [];
+
+		this.input.focused = this.focused;
+		const [inputLine = ""] = this.input.render(Math.max(1, innerW - 8));
+		lines.push(border(`╭${"─".repeat(innerW)}╮`));
+		lines.push(
+			border("│") +
+				padLine(
+					` ${th.fg(this.color, this.label)} ${this.focused ? th.fg("success", "FOCUSED") : th.fg("dim", "visible")}`,
+				) +
+				border("│"),
+		);
+		lines.push(border("│") + padLine("") + border("│"));
+		lines.push(border("│") + padLine(` Input: ${inputLine}`) + border("│"));
+		lines.push(border("│") + padLine(` Keys: ${recent}`) + border("│"));
+		lines.push(border("│") + padLine(th.fg("dim", " Tab/Shift+Tab focus")) + border("│"));
+		lines.push(border("│") + padLine(th.fg("dim", " Esc/Ctrl+D dismiss")) + border("│"));
+		lines.push(border(`╰${"─".repeat(innerW)}╯`));
+
+		return lines;
+	}
+}
+
+// === Streaming input panel test (/overlay-streaming) ===
+