@mariozechner/pi-coding-agent 0.56.2 → 0.57.0

package/examples/extensions/overlay-qa-tests.ts

@@ -14,10 +14,13 @@
  *   /overlay-maxheight  - Test maxHeight truncation
  *   /overlay-sidepanel  - Responsive sidepanel (hides when terminal < 100 cols)
  *   /overlay-toggle     - Toggle visibility demo (demonstrates OverlayHandle.setHidden)
+ *   /overlay-passive    - Non-capturing overlay demo (passive info panel alongside active overlay)
+ *   /overlay-focus      - Focus cycling and rendering order with non-capturing overlays
+ *   /overlay-streaming  - Multiple input panels with simulated streaming (Tab to cycle focus)
  */
 
 import type { ExtensionAPI, ExtensionCommandContext, Theme } from "@mariozechner/pi-coding-agent";
-import type { OverlayAnchor, OverlayHandle, OverlayOptions, TUI } from "@mariozechner/pi-tui";
+import type { Component, OverlayAnchor, OverlayHandle, OverlayOptions, TUI } from "@mariozechner/pi-tui";
 import { matchesKey, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
 import { spawn } from "child_process";
 
@@ -256,6 +259,42 @@ export default function (pi: ExtensionAPI) {
 			globalToggleHandle = null;
 		},
 	});
+
+	// Non-capturing overlay demo - passive info panel that doesn't steal focus
+	pi.registerCommand("overlay-passive", {
+		description: "Test non-capturing overlay (passive info panel alongside active overlay)",
+		handler: async (_args: string, ctx: ExtensionCommandContext) => {
+			ctx.ui.setEditorText("");
+			await ctx.ui.custom<void>((tui, theme, _kb, done) => new PassiveDemoController(tui, theme, done), {
+				overlay: true,
+				overlayOptions: { anchor: "center", width: 48 },
+			});
+		},
+	});
+
+	// Focus cycling demo - demonstrates focus(), unfocus(), isFocused() and rendering order
+	pi.registerCommand("overlay-focus", {
+		description: "Test focus cycling and rendering order with non-capturing overlays",
+		handler: async (_args: string, ctx: ExtensionCommandContext) => {
+			ctx.ui.setEditorText("");
+			await ctx.ui.custom<void>((tui, theme, _kb, done) => new FocusDemoController(tui, theme, done), {
+				overlay: true,
+				overlayOptions: { anchor: "bottom-center", width: 55, margin: { bottom: 1 } },
+			});
+		},
+	});
+
+	// Test multiple input panels with simulated streaming
+	pi.registerCommand("overlay-streaming", {
+		description: "Multiple input panels with simulated streaming (Tab to cycle focus)",
+		handler: async (_args: string, ctx: ExtensionCommandContext) => {
+			ctx.ui.setEditorText("");
+			await ctx.ui.custom<void>((tui, theme, _kb, done) => new StreamingInputController(tui, theme, done), {
+				overlay: true,
+				overlayOptions: { anchor: "bottom-center", width: 60, margin: { bottom: 1 } },
+			});
+		},
+	});
 }
 
 function sleep(ms: number): Promise<void> {
@@ -879,3 +918,431 @@ class ToggleDemoComponent extends BaseOverlay {
 		);
 	}
 }
+
+// === Non-capturing passive overlay demo ===
+
+class PassiveDemoController extends BaseOverlay {
+	focused = false;
+	private typed = "";
+	private timerComponent: TimerPanel;
+	private timerHandle: OverlayHandle | null = null;
+	private interval: ReturnType<typeof setInterval> | null = null;
+	private inputCount = 0;
+	private lastInputDebug = "";
+
+	constructor(
+		private tui: TUI,
+		theme: Theme,
+		private done: () => void,
+	) {
+		super(theme);
+		this.timerComponent = new TimerPanel(theme);
+		this.timerHandle = this.tui.showOverlay(this.timerComponent, {
+			nonCapturing: true,
+			anchor: "top-right",
+			width: 22,
+			margin: { top: 1, right: 2 },
+		});
+		this.interval = setInterval(() => {
+			this.timerComponent.tick();
+			this.tui.requestRender();
+		}, 1000);
+	}
+
+	handleInput(data: string): void {
+		this.inputCount++;
+		this.lastInputDebug = `len=${data.length} c0=${data.charCodeAt(0)}`;
+		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+			this.cleanup();
+			this.done();
+		} else if (matchesKey(data, "backspace")) {
+			this.typed = this.typed.slice(0, -1);
+		} else if (data.length === 1 && data.charCodeAt(0) >= 32) {
+			this.typed += data;
+		}
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const display = this.typed.length > 0 ? this.typed : th.fg("dim", "(type here)");
+		return this.box(
+			[
+				"",
+				` ${th.fg("dim", `focused=${this.focused} inputs=${this.inputCount}`)}`,
+				` ${th.fg("dim", `last: ${this.lastInputDebug || "none"}`)}`,
+				"",
+				` > ${display}`,
+				"",
+				th.fg("dim", " Type to prove input goes here."),
+				th.fg("dim", " Press Esc to close both."),
+				"",
+			],
+			width,
+			"Non-Capturing Demo",
+		);
+	}
+
+	private cleanup(): void {
+		if (this.interval) {
+			clearInterval(this.interval);
+			this.interval = null;
+		}
+		this.timerHandle?.hide();
+		this.timerHandle = null;
+	}
+
+	override dispose(): void {
+		this.cleanup();
+	}
+}
+
+class TimerPanel extends BaseOverlay {
+	private seconds = 0;
+
+	tick(): void {
+		this.seconds++;
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const mins = Math.floor(this.seconds / 60);
+		const secs = this.seconds % 60;
+		const time = `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+		return this.box([` ${th.fg("accent", time)}`, th.fg("dim", " nonCapturing: true")], width, "Timer");
+	}
+}
+
+// === Focus cycling demo ===
+
+class FocusDemoController extends BaseOverlay {
+	private panels: FocusPanel[] = [];
+	private handles: OverlayHandle[] = [];
+	private focusIndex = -1;
+
+	constructor(
+		private tui: TUI,
+		theme: Theme,
+		private done: () => void,
+	) {
+		super(theme);
+		const colors = ["error", "success", "accent"] as const;
+		const labels = ["Alpha", "Beta", "Gamma"];
+
+		for (let i = 0; i < 3; i++) {
+			const panel = new FocusPanel(
+				theme,
+				labels[i]!,
+				colors[i]!,
+				() => this.cycleFocus(),
+				() => this.close(),
+			);
+			const handle = this.tui.showOverlay(panel, {
+				nonCapturing: true,
+				row: 2,
+				col: 5 + i * 6,
+				width: 28,
+			});
+			panel.handle = handle;
+			this.panels.push(panel);
+			this.handles.push(handle);
+		}
+	}
+
+	private cycleFocus(): void {
+		if (this.focusIndex >= 0 && this.focusIndex < this.handles.length) {
+			this.handles[this.focusIndex]!.unfocus();
+		}
+		this.focusIndex++;
+		if (this.focusIndex >= this.handles.length) {
+			this.focusIndex = -1;
+		} else {
+			this.handles[this.focusIndex]!.focus();
+		}
+		this.tui.requestRender();
+	}
+
+	private close(): void {
+		for (const handle of this.handles) handle.hide();
+		this.handles = [];
+		this.panels = [];
+		this.done();
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+			this.close();
+		} else if (matchesKey(data, "tab")) {
+			this.cycleFocus();
+		}
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const focused = this.focusIndex === -1 ? "Controller" : (this.panels[this.focusIndex]?.label ?? "?");
+		return this.box(
+			[
+				"",
+				` Current focus: ${th.fg("accent", focused)}`,
+				"",
+				" Three overlapping panels above are",
+				` all ${th.fg("accent", "nonCapturing")}. Press Tab to`,
+				" cycle focus() between them.",
+				"",
+				" Focused panel renders on top",
+				" (focus-based rendering order).",
+				"",
+				th.fg("dim", " Tab = cycle focus | Esc = close"),
+				"",
+			],
+			width,
+			"Focus Demo",
+		);
+	}
+
+	override dispose(): void {
+		for (const handle of this.handles) handle.hide();
+	}
+}
+
+class FocusPanel extends BaseOverlay {
+	handle: OverlayHandle | null = null;
+	readonly label: string;
+
+	constructor(
+		theme: Theme,
+		label: string,
+		private color: "error" | "success" | "accent",
+		private onTab: () => void,
+		private onClose: () => void,
+	) {
+		super(theme);
+		this.label = label;
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "tab")) {
+			this.onTab();
+		} else if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+			this.onClose();
+		}
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const focused = this.handle?.isFocused() ?? false;
+		const innerW = Math.max(1, width - 2);
+		const border = (c: string) => th.fg(this.color, c);
+		const padLine = (s: string) => truncateToWidth(s, innerW, "...", true);
+		const lines: string[] = [];
+
+		lines.push(border(`╭${"─".repeat(innerW)}╮`));
+		lines.push(border("│") + padLine(` ${th.fg("accent", this.label)}`) + border("│"));
+		lines.push(border("│") + padLine("") + border("│"));
+		if (focused) {
+			lines.push(border("│") + padLine(th.fg("success", " ● FOCUSED")) + border("│"));
+			lines.push(border("│") + padLine(th.fg("dim", " (receiving input)")) + border("│"));
+		} else {
+			lines.push(border("│") + padLine(th.fg("dim", " ○ unfocused")) + border("│"));
+			lines.push(border("│") + padLine(th.fg("dim", " (passive)")) + border("│"));
+		}
+		lines.push(border("│") + padLine("") + border("│"));
+		lines.push(border(`╰${"─".repeat(innerW)}╯`));
+
+		return lines;
+	}
+}
+
+// === Streaming input panel test (/overlay-streaming) ===
+
+class StreamingInputController extends BaseOverlay {
+	private panels: StreamingInputPanel[] = [];
+	private handles: OverlayHandle[] = [];
+	private focusIndex = -1; // -1 = controller focused, 0-2 = panel focused
+	private streamLines: string[] = [];
+	private streamInterval: ReturnType<typeof setInterval> | null = null;
+	private lineCount = 0;
+
+	constructor(
+		private tui: TUI,
+		theme: Theme,
+		private done: () => void,
+	) {
+		super(theme);
+
+		// Create 3 input panels as non-capturing overlays
+		const colors = ["error", "success", "accent"] as const;
+		const labels = ["Panel A", "Panel B", "Panel C"];
+
+		for (let i = 0; i < 3; i++) {
+			const panel = new StreamingInputPanel(
+				theme,
+				labels[i]!,
+				colors[i]!,
+				() => this.cycleFocus(),
+				() => this.close(),
+			);
+			const handle = this.tui.showOverlay(panel, {
+				nonCapturing: true,
+				row: 1 + i * 9,
+				col: 2,
+				width: 35,
+			});
+			panel.handle = handle;
+			this.panels.push(panel);
+			this.handles.push(handle);
+		}
+
+		// Start with controller focused (focusIndex = -1)
+
+		// Start simulated streaming
+		this.streamInterval = setInterval(() => {
+			this.lineCount++;
+			const timestamp = new Date().toLocaleTimeString();
+			this.streamLines.push(`[${timestamp}] Streaming line ${this.lineCount}...`);
+			if (this.streamLines.length > 8) {
+				this.streamLines.shift();
+			}
+			this.tui.requestRender();
+		}, 500);
+	}
+
+	private cycleFocus(): void {
+		// Unfocus current panel if any
+		if (this.focusIndex >= 0 && this.focusIndex < this.handles.length) {
+			this.handles[this.focusIndex]!.unfocus();
+		}
+
+		// Cycle: -1 (controller) → 0 → 1 → 2 → -1 ...
+		this.focusIndex++;
+		if (this.focusIndex >= this.handles.length) {
+			this.focusIndex = -1; // Back to controller
+		}
+
+		// Focus new panel if any
+		if (this.focusIndex >= 0) {
+			this.handles[this.focusIndex]!.focus();
+		}
+
+		this.tui.requestRender();
+	}
+
+	private close(): void {
+		if (this.streamInterval) {
+			clearInterval(this.streamInterval);
+			this.streamInterval = null;
+		}
+		for (const handle of this.handles) handle.hide();
+		this.handles = [];
+		this.panels = [];
+		this.done();
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+			this.close();
+		} else if (matchesKey(data, "tab")) {
+			this.cycleFocus();
+		}
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const focusedLabel =
+			this.focusIndex === -1
+				? th.fg("success", "Controller (this panel)")
+				: (this.panels[this.focusIndex]?.label ?? "?");
+
+		const lines = [
+			"",
+			` Current focus: ${th.fg("accent", focusedLabel)}`,
+			"",
+			" Simulated streaming output:",
+			th.fg("dim", " ─".repeat((width - 2) / 2)),
+		];
+
+		for (const line of this.streamLines) {
+			lines.push(` ${th.fg("dim", line)}`);
+		}
+
+		while (lines.length < 12) {
+			lines.push("");
+		}
+
+		lines.push(th.fg("dim", " ─".repeat((width - 2) / 2)));
+		lines.push("");
+		lines.push(` Three ${th.fg("accent", "nonCapturing")} input panels on the left.`);
+		lines.push(" Tab cycles: Controller → Panel A → B → C → Controller");
+		lines.push(" Type in each panel to test input routing.");
+		lines.push("");
+		lines.push(th.fg("dim", " Tab = cycle focus | Esc = close all"));
+		lines.push("");
+
+		return this.box(lines, width, "Streaming + Input Test");
+	}
+
+	override dispose(): void {
+		this.close();
+	}
+}
+
+class StreamingInputPanel implements Component {
+	handle: OverlayHandle | null = null;
+	private typed = "";
+	readonly label: string;
+
+	constructor(
+		private theme: Theme,
+		label: string,
+		private color: "error" | "success" | "accent",
+		private onTab: () => void,
+		private onClose: () => void,
+	) {
+		this.label = label;
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "tab")) {
+			this.onTab();
+		} else if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+			this.onClose();
+		} else if (matchesKey(data, "backspace")) {
+			this.typed = this.typed.slice(0, -1);
+		} else if (data.length === 1 && data.charCodeAt(0) >= 32) {
+			this.typed += data;
+		}
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const focused = this.handle?.isFocused() ?? false;
+		const innerW = Math.max(1, width - 2);
+		const border = (c: string) => th.fg(this.color, c);
+		const padLine = (s: string) => {
+			const w = visibleWidth(s);
+			return s + " ".repeat(Math.max(0, innerW - w));
+		};
+
+		const inputDisplay = this.typed.length > 0 ? this.typed : th.fg("dim", "(type here)");
+		const truncatedInput = truncateToWidth(` > ${inputDisplay}`, innerW, "...", true);
+
+		const lines: string[] = [];
+		lines.push(border(`╭${"─".repeat(innerW)}╮`));
+		lines.push(border("│") + padLine(` ${th.fg("accent", this.label)}`) + border("│"));
+		lines.push(border("│") + padLine("") + border("│"));
+		if (focused) {
+			lines.push(border("│") + padLine(th.fg("success", " ● FOCUSED")) + border("│"));
+			lines.push(border("│") + padLine(th.fg("dim", " (receiving input)")) + border("│"));
+		} else {
+			lines.push(border("│") + padLine(th.fg("dim", " ○ unfocused")) + border("│"));
+			lines.push(border("│") + padLine("") + border("│"));
+		}
+		lines.push(border("│") + padLine(truncatedInput) + border("│"));
+		lines.push(border("│") + padLine("") + border("│"));
+		lines.push(border("│") + padLine(th.fg("dim", " Tab | Esc")) + border("│"));
+		lines.push(border(`╰${"─".repeat(innerW)}╯`));
+
+		return lines;
+	}
+
+	invalidate(): void {}
+}

package/examples/extensions/provider-payload.ts

@@ -0,0 +1,14 @@
+import { appendFileSync } from "node:fs";
+import { join } from "node:path";
+import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+
+export default function (pi: ExtensionAPI) {
+	const logFile = join(process.cwd(), ".pi", "provider-payload.log");
+
+	pi.on("before_provider_request", (event) => {
+		appendFileSync(logFile, `${JSON.stringify(event.payload, null, 2)}\n\n`, "utf8");
+
+		// Optional: replace the payload instead of only logging it.
+		// return { ...event.payload, temperature: 0 };
+	});
+}

package/examples/extensions/with-deps/index.ts

@@ -21,11 +21,7 @@ export default function (pi: ExtensionAPI) {
 		execute: async (_toolCallId, params) => {
 			const result = ms(params.duration as ms.StringValue);
 			if (result === undefined) {
-				return {
-					content: [{ type: "text", text: `Invalid duration: "${params.duration}"` }],
-					isError: true,
-					details: {},
-				};
+				throw new Error(`Invalid duration: "${params.duration}"`);
 			}
 			return {
 				content: [{ type: "text", text: `${params.duration} = ${result} milliseconds` }],

package/examples/extensions/with-deps/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pi-extension-with-deps",
-  "version": "1.20.2",
+  "version": "1.21.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pi-extension-with-deps",
-      "version": "1.20.2",
+      "version": "1.21.0",
       "dependencies": {
         "ms": "^2.1.3"
       },

package/examples/extensions/with-deps/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pi-extension-with-deps",
   "private": true,
-  "version": "1.20.2",
+  "version": "1.21.0",
   "type": "module",
   "scripts": {
     "clean": "echo 'nothing to clean'",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mariozechner/pi-coding-agent",
-	"version": "0.56.2",
+	"version": "0.57.0",
 	"description": "Coding agent CLI with read, bash, edit, write tools and session management",
 	"type": "module",
 	"piConfig": {
@@ -40,9 +40,9 @@
 	},
 	"dependencies": {
 		"@mariozechner/jiti": "^2.6.2",
-		"@mariozechner/pi-agent-core": "^0.56.2",
-		"@mariozechner/pi-ai": "^0.56.2",
-		"@mariozechner/pi-tui": "^0.56.2",
+		"@mariozechner/pi-agent-core": "^0.57.0",
+		"@mariozechner/pi-ai": "^0.57.0",
+		"@mariozechner/pi-tui": "^0.57.0",
 		"@silvia-odwyer/photon-node": "^0.3.4",
 		"chalk": "^5.5.0",
 		"cli-highlight": "^2.1.11",