@opengsd/gsd-pi 1.0.0

package/packages/pi-coding-agent/src/modes/interactive/components/custom-editor.ts

@@ -0,0 +1,97 @@
+// GSD-2 + packages/pi-coding-agent/src/modes/interactive/components/custom-editor.ts - App-level editor key handling.
+
+import {
+	Editor,
+	type EditorOptions,
+	type EditorTheme,
+	Key,
+	type TUI,
+	isKittyProtocolActive,
+	matchesKey,
+} from "@gsd/pi-tui";
+import type { AppAction, KeybindingsManager } from "../../../core/keybindings.js";
+
+/**
+ * Custom editor that handles app-level keybindings for coding-agent.
+ */
+export class CustomEditor extends Editor {
+	private keybindings: KeybindingsManager;
+	public actionHandlers: Map<AppAction, () => void> = new Map();
+
+	// Special handlers that can be dynamically replaced
+	public onEscape?: () => void;
+	public onCtrlD?: () => void;
+	public onPasteImage?: () => void;
+	/** Handler for extension-registered shortcuts. Returns true if handled. */
+	public onExtensionShortcut?: (data: string) => boolean;
+
+	constructor(tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager, options?: EditorOptions) {
+		super(tui, theme, options);
+		this.keybindings = keybindings;
+	}
+
+	/**
+	 * Register a handler for an app action.
+	 */
+	onAction(action: AppAction, handler: () => void): void {
+		this.actionHandlers.set(action, handler);
+	}
+
+	handleInput(data: string): void {
+		// Check extension-registered shortcuts first
+		if (this.onExtensionShortcut?.(data)) {
+			return;
+		}
+
+		// Check for paste image keybinding
+		if (this.keybindings.matches(data, "pasteImage")) {
+			this.onPasteImage?.();
+			return;
+		}
+
+		// Check app keybindings first
+
+		// Escape/interrupt - only if autocomplete is NOT active
+		if (this.keybindings.matches(data, "interrupt")) {
+			if (!this.isShowingAutocomplete()) {
+				// Use dynamic onEscape if set, otherwise registered handler
+				const handler = this.onEscape ?? this.actionHandlers.get("interrupt");
+				if (handler) {
+					handler();
+					return;
+				}
+			}
+			// Let parent handle escape for autocomplete cancellation
+			super.handleInput(data);
+			return;
+		}
+
+		// Exit (Ctrl+D) - only when editor is empty
+		if (this.keybindings.matches(data, "exit")) {
+			if (this.getText().length === 0) {
+				const handler = this.onCtrlD ?? this.actionHandlers.get("exit");
+				if (handler) handler();
+				return;
+			}
+			// Fall through to editor handling for delete-char-forward when not empty
+		}
+
+		// Check all other app actions
+		for (const [action, handler] of this.actionHandlers) {
+			if (action !== "interrupt" && action !== "exit" && this.keybindings.matches(data, action)) {
+				// When kitty protocol is not active, \x1b\r is ambiguous:
+				// it could be alt+enter (followUp) or shift+enter mapped via /terminal-setup.
+				// Prioritize newLine since that's what terminal-setup configures.
+				// Alt+enter followUp still works in kitty-protocol terminals.
+				if (action === "followUp" && !isKittyProtocolActive() && matchesKey(data, Key.alt("enter"))) {
+					break; // Fall through to parent editor's newLine handling
+				}
+				handler();
+				return;
+			}
+		}
+
+		// Pass to parent for editor handling
+		super.handleInput(data);
+	}
+}

package/packages/pi-coding-agent/src/modes/interactive/components/custom-message.ts

@@ -0,0 +1,89 @@
+// GSD-2 + packages/pi-coding-agent/src/modes/interactive/components/custom-message.ts - Extension custom message renderer.
+
+import type { TextContent } from "@gsd/pi-ai";
+import type { Component } from "@gsd/pi-tui";
+import { Box, Markdown, type MarkdownTheme, Spacer, Text } from "@gsd/pi-tui";
+import type { MessageRenderer } from "../../../core/extensions/types.js";
+import type { CustomMessage } from "../../../core/messages.js";
+import { getMarkdownTheme, theme } from "../theme/theme.js";
+import { CollapsibleMessageComponent } from "./collapsible-message.js";
+
+/**
+ * Component that renders a custom message entry from extensions.
+ * Uses distinct styling to differentiate from user messages.
+ */
+export class CustomMessageComponent extends CollapsibleMessageComponent {
+	private message: CustomMessage<unknown>;
+	private customRenderer?: MessageRenderer;
+	private box: Box;
+	private customComponent?: Component;
+	private markdownTheme: MarkdownTheme;
+
+	constructor(
+		message: CustomMessage<unknown>,
+		customRenderer?: MessageRenderer,
+		markdownTheme: MarkdownTheme = getMarkdownTheme(),
+	) {
+		super();
+		this.message = message;
+		this.customRenderer = customRenderer;
+		this.markdownTheme = markdownTheme;
+
+		this.addChild(new Spacer(1));
+
+		// Create box with purple background (used for default rendering)
+		this.box = new Box(1, 1, (t) => theme.bg("customMessageBg", t));
+
+		this.rebuildContent();
+	}
+
+	protected rebuildContent(): void {
+		// Remove previous content component
+		if (this.customComponent) {
+			this.removeChild(this.customComponent);
+			this.customComponent = undefined;
+		}
+		this.removeChild(this.box);
+
+		// Try custom renderer first - it handles its own styling
+		if (this.customRenderer) {
+			try {
+				const component = this.customRenderer(this.message, { expanded: this.expanded }, theme);
+				if (component) {
+					// Custom renderer provides its own styled component
+					this.customComponent = component;
+					this.addChild(component);
+					return;
+				}
+			} catch {
+				// Fall through to default rendering
+			}
+		}
+
+		// Default rendering uses our box
+		this.addChild(this.box);
+		this.box.clear();
+
+		// Default rendering: label + content
+		const label = theme.fg("customMessageLabel", theme.bold(`[${this.message.customType}]`));
+		this.box.addChild(new Text(label, 0, 0));
+		this.box.addChild(new Spacer(1));
+
+		// Extract text content
+		let text: string;
+		if (typeof this.message.content === "string") {
+			text = this.message.content;
+		} else {
+			text = this.message.content
+				.filter((c): c is TextContent => c.type === "text")
+				.map((c) => c.text)
+				.join("\n");
+		}
+
+		this.box.addChild(
+			new Markdown(text, 0, 0, this.markdownTheme, {
+				color: (text: string) => theme.fg("customMessageText", text),
+			}),
+		);
+	}
+}

package/packages/pi-coding-agent/src/modes/interactive/components/daxnuts.test.ts

@@ -0,0 +1,68 @@
+// GSD-2 + packages/pi-coding-agent/src/modes/interactive/components/daxnuts.test.ts - Daxnuts component color-mode regression coverage.
+
+import { afterEach, beforeEach, describe, it, mock } from "node:test";
+import assert from "node:assert/strict";
+import type { TUI } from "@gsd/pi-tui";
+import { initTheme } from "../theme/theme.js";
+import { DaxnutsComponent } from "./daxnuts.js";
+
+const ENV_KEYS = ["COLORTERM", "WT_SESSION", "TERM_PROGRAM", "TERM"] as const;
+let savedEnv: Record<(typeof ENV_KEYS)[number], string | undefined>;
+
+function saveEnv(): void {
+	savedEnv = Object.fromEntries(ENV_KEYS.map((key) => [key, process.env[key]])) as Record<
+		(typeof ENV_KEYS)[number],
+		string | undefined
+	>;
+}
+
+function restoreEnv(): void {
+	for (const key of ENV_KEYS) {
+		const value = savedEnv[key];
+		if (value === undefined) {
+			delete process.env[key];
+		} else {
+			process.env[key] = value;
+		}
+	}
+}
+
+describe("DaxnutsComponent", () => {
+	beforeEach(() => {
+		saveEnv();
+		mock.timers.enable({ apis: ["setInterval"] });
+	});
+
+	afterEach(() => {
+		mock.timers.reset();
+		restoreEnv();
+		initTheme("dark", false);
+	});
+
+	it("uses xterm-256 color sequences in limited-color terminals", () => {
+		delete process.env.COLORTERM;
+		delete process.env.WT_SESSION;
+		process.env.TERM_PROGRAM = "Apple_Terminal";
+		process.env.TERM = "xterm-256color";
+		initTheme("dark", false);
+
+		const component = new DaxnutsComponent({ requestRender() {} } as TUI);
+		try {
+			(component as unknown as { tick: number }).tick = 25;
+			const output = component.render(80).join("\n");
+
+			assert.doesNotMatch(
+				output,
+				/\x1b\[(?:38|48);2;/,
+				"limited-color terminals must not receive 24-bit truecolor SGR sequences",
+			);
+			assert.match(
+				output,
+				/\x1b\[(?:38|48);5;/,
+				"limited-color terminals should receive xterm-256 SGR sequences",
+			);
+		} finally {
+			component.dispose();
+		}
+	});
+});

package/packages/pi-coding-agent/src/modes/interactive/components/daxnuts.ts

@@ -0,0 +1,159 @@
+// GSD-2 + packages/pi-coding-agent/src/modes/interactive/components/daxnuts.ts - Animated Daxnuts easter egg component.
+/**
+ * POWERED BY DAXNUTS - Easter egg for OpenCode + Kimi K2.5
+ *
+ * A heartfelt tribute to dax (@thdxr) for providing free Kimi K2.5 access via OpenCode.
+ */
+
+import { type TUI, visibleWidth } from "@gsd/pi-tui";
+import { theme } from "../theme/theme.js";
+import { AnimatedComponent } from "./animated-component.js";
+
+// 32x32 RGB image of dax, hex encoded (3 bytes per pixel)
+const DAX_HEX =
+	"bbbab8b9b9b6b9b8b5bcbbb8b8b7b4b7b5b2b6b5b2b8b7b4b7b6b3b6b4b1bdbcb8bab8b6bbb8b5b8b5b1bbb8b4c2bebbc1bebac0bdbabfbcb9c1bebabfbebbc0bfbcc0bdbabbb8b5c1bfbcbfbcb8bbb9b6bfbcb8c2bfbcc1bfbcbfbbb8bdb9b6b8b7b5b9b8b5b8b8b5b5b5b2b6b5b2b8b7b4b9b8b5b9b8b5b6b5b3bab8b5bcbab7bbb9b6bbb8b5bfb9b5bdb2abbcb0a8beb2aabeb5afbfbab6bebab7c0bfbcbebdbabebbb8c0bdbabfbebbc2bebbbdbab7c3c0bdc3c0bdc1bebbc2bebabfbcb8bab9b6b7b6b3b2b1aeb6b5b2b5b4b1b5b4b2b6b5b2b7b6b4b9b8b6b7b6b3bbbab7b2afaba5988fb49e90b09481b79a88b39683b09583b7a395bfb6b0c0bdbabdbbb8bebcb9c1bfbcc0bebbbdbab7bebbb8c2bfbcc0bdbac0bcb9bdb9b6c0bcb8b5b4b2b4b3b0bab9b6b9b9b6b5b4b1b5b4b1b6b5b3b9b8b5b9b8b6b9b8b6b2aeaa968174a6836eaa856eab846eaf8973ac8973b08f79b18f7ab39786b7a89dbbb3aebfbab6c2c0bdbebcb9bfbdbac3c1bdc2bebbc0bcb9bdb9b6c1bdbabfbbb8b4b3b0b9b8b5b8b7b5b4b3b1b5b4b1b8b7b4b8b7b5bab9b6bbbab7b1afad8c7a719d735ca47860a87d65a98069ae8972ae8c75af8d77aa826ba98067aa8974b39e90b6a79dbbb2adc0bdbac1bfbdbfbbb8c1bdb9bebab6c0bdb9bfbbb8c1bdbab4b2b0b7b6b4b7b6b3b4b2b0bab9b7b6b5b2b6b5b2bab9b6bab9b6958c87977663aa836bac8772b08f7aad8c77b2917db0917db0907cac8971a77d64a87f67ac8972b29887b8a89dbfbab5bfbdbac1bebac0bcb9c0bcb9c0bcb9c1bebabebab7b8b7b4b7b6b4b5b4b1b5b4b2b7b6b3b5b4b2bab9b7bab9b6b4b1ada88f7fad8973ae8d78b19684b19685b29786b69a89b29582b1917daa856ea87e66a97e66ad866ea9826baf9280b8ada6bdbbb8bebab7bfbbb8c1bdbabfbbb8bcb8b4bcb8b5b6b4b2b7b5b3b6b5b2b8b7b4b3b2afb8b7b4b6b5b2b3b2b0b3a59aab856fad8d78b0917eb19886b49b8bb49a89b39785b0917eaf8f7cab866fa77d65a77a61a87d64a9816ab08f79b5a296c1bcb8c3bfbcc2bebbbebab7bfbbb7bdbab6c2bebab8b7b4b7b6b4b6b5b3b7b6b3b6b5b2b9b8b6b4b3b1b6b1acac8f7ca9826bae8f7aaf9583b49c8cb49c8bb79d8cb59987b19380ad8e79ae8c77af8e78ac8771a3775faa826bae8972b39888bbb6b2bebbb8bfbbb8bfbbb8c0bdb9bebbb7c0bdb9b6b5b2b9b8b5b4b3b1b8b7b5b4b3b0b7b6b4b6b5b3b1a7a0aa8772a77d65a88570b49887b19b8d9c887c907a6d987f71aa907faf917daf8e7aad8c78ac8b77a8836ca9836cac8770b49b8abdb6b2c0bcb9c0bdb9bfbbb8bebab7bfbcb9bebab7b9b8b6b5b4b2b9b8b5b8b7b5b8b7b4b7b6b4b5b4b2b3a9a2ad8973a1755da9856fb398858c776a65544b776358725d526e594d9c7f6eb1907ba68672ad8e7aab8771ac856db18f79b3a092beb9b5c1bdbabdb9b5bebab7bfbbb7bebab7bcb9b6b7b6b4b6b6b3b8b7b4b5b4b2b8b6b4b7b6b3b4b3b0b4aba4a6826ba3775fb08e79b19584a88e7daa8e7db29481ad8f7c997e6da38674ac8d79ac8e7aae917f9a7c6a896a599a7c6ab3a398c1bdbabdb9b6bcb8b5bebab6bebab7bdb9b5bdb9b6b5b4b1b7b5b3b5b4b2b7b6b3b7b6b4b3b3b0b3b2b0b4aca5a7846fa97f68ae8f7bae9383b59c8bb2937fae8e79ac8b76af927eaf927eb29683b39885b2988891786a72594c6e594d978d86bdbab7bab7b3c0bcb9c0bcb9bebab7bebbb7bdb9b6b3b2b0b4b3b0b5b4b2b4b4b1b4b3b1b4b3b1b4b3b0b6ada5aa8670a57a62ad8e7ab29b8cb69d8dab856fa9826aa88069ab8771af907db49987b19684b29886b59987b39480b09787b5a9a1bcb8b5bebab7bdb9b5bebab7bfbbb8bfbbb7bbb7b4b3b2afb8b7b5b8b7b5b3b2b0b5b4b2b6b5b3b6b4b1afa299a98975a9826baf907cb39988b49a89af8e7aac8973aa856eaf8c74b1917dae907dac907db39988b29785b49785b7a090b9aca3bfbab7bcb8b5bdb9b6bcb8b4bcb8b5bdb9b5bcb8b4b5b4b2b6b5b3b4b3b0b4b3b0b9b8b5b8b6b4908b88887467aa8f7ea78976ad8973b08b74b59885b69e8eb29888b1917cb1917db1937fae907cb19686b39a8ab29886b59b8ab8a192b6aaa3b7b2afbcb8b4bcb8b5bbb7b4c0bcb9bebab7c0bcb9b6b5b2b6b5b3b4b3b0bab9b7b7b6b4b1b0ae7b716ba083709b806f716158967764b08870b29481b69b8ab69f8fb39a89b69f90b49d8db39a89b29988b49c8cb6a090b8a496baa49593867f8f8986bfbbb7bdb9b5bcb7b4bab6b3b9b5b2bab6b2b4b3b1b3b3b0b6b5b3b8b7b5b4b2b0a7a5a38f837dae917ea084725a504c63544da28370b39784b59e8db2a093a698909b918b998e8790857e95877dad998bb39c8cb5a091b9a2938d827c95908dbebab6bbb7b3bdbab7bbb7b4bdb9b6bbb7b4b4b3b0b5b4b1b8b7b5b6b5b3b8b8b5b4b2af968f8ab29a8bab9485544b483a323073655d96887f70655f61595547403e453e3c453f3d57504f655e5b90847db39c8db7a090b6a09189807aaba6a3bdb9b6c0bcb9bebab7bcb7b4bebab7bbb7b4b3b2b0b6b5b3b2b1afb7b6b4b8b7b4b5b4b1aeaba8b5a89fac998d4d44412d25244d46444e4744322b293a3230423937433a37352d2a59504c534b48524a48988a81b59f8fb19c8d827974b2afacbdb9b5bcb8b4bdb9b5bcb8b5bdb9b6bab6b2b8b7b5b5b4b2b6b6b3b9b8b5b7b6b3b6b5b2b8b6b3b9b4b1b2a9a26c64612d25242d2625312a28352d2c453d3a78675c8d7a6ea09792aea6a0615854332b29524a479f8e82b09d90a49b96c1bdb9bebab7bfbbb8bbb8b4b9b5b1b8b4b0b9b4b0b7b6b4b8b7b5b8b7b4b6b5b3b8b6b3bab9b6b9b8b5b4b3b0b7b5b2a5a29f453d3b261e1d261f1e2e2625413936857268977865b19482b5a69caca5a07c7572453d3b746963a0948cc5bfbbc0bbb8beb9b6bbb7b3bbb6b3b7b3afb8b4b0b9b5b1b7b6b3b6b5b3b5b4b2b5b4b2b7b6b3b7b6b3b8b6b3b4b2afb7b6b3b3b1ae6d6765251f1e1e18172a22212d2523443b3971625ab19888b09482a89182877e792c25243e3634766d6abeb9b5bfbbb7bebab6bcb7b3bbb6b3b9b5b1b7b3afb8b4b0b4b3b0b5b4b1b5b4b1b4b3b1b5b4b2b8b6b4b5b3b0b9b6b4b5b4b1b6b4b27f79762a2322221c1b2d2524221b1a443e3c47413f6f676281766f867971675e5a3e37352a222166605dbab7b3bdb9b5beb9b5bcb7b3bcb7b3b9b4b0bab6b2bab6b2b5b3b0b6b4b2b3b2afb7b6b3b4b4b1b4b3b0b6b4b1b5b4b1b4b3b0b9b6b29a8c8252474230292828201f181212322c2c231e1d1c16162c26252923222d26252d2523332b2a8e8885bcb8b5bcb7b3bbb6b2bcb7b3b9b4b1b9b5b1b7b2afb7b2ae7a838e9b9b9caeadacb3b2b0b3b2afb7b7b4b6b5b3b6b6b3b7b6b3b9ada4a991808e7b6f50453f2b24231a14142923221f19181d17161f18182620201d17162a22215d5654b7b3b0bbb7b3bbb6b2b8b4b0bab5b1bbb6b2bab5b1b8b4b0bab6b22c496b4c5d735f68766e727a828285929090adaba8b7b2aeb6a59ab39682a28470a387748e76674e403a1a14141d1716181211221c1c1f1918221c1b2f2827342d2c8d8884bab6b3b9b5b2bab5b1bab5b1b9b4b0bab6b2b8b4b0b9b4b0b7b2ae325e8b365f8a3a5d833f5b7a545f70646469706b6aa08f84b08e78b18e769f7e689e7f6b9e816d907766584940362d2a1c1615201b1a1a1413201a1a251e1d393331a39e9bbab5b1bcb7b3bab6b2b8b3afb8b4b0b9b4b0b9b4b1bab5b2b5b0ac3d6c9843729d44719c426e98415f805a64716f6a699d8677b1927eb3947faa89749d7a649f7f6ba487749e837186716454463f2c25231e181837302e3a33317a7471beb9b6bcb8b4bbb6b2b6b2aebab5b1b9b5b1b8b3afbab6b2b6b1adb5aeaa4877a14c7aa44e7ba345719a3a5d80586b7f767475927b6eb1927faf8e79b08e78a78169a07861a17f6aa58570a688749b83738270666f66618a8480a49e99b7b2aebab6b2bcb8b4b9b5b1b7b2aebab5b1b9b4b0b6b1aeb6b1adb2aca8b2aca84876a04a78a2517fa74771973a5d80405c7a6161677c695fac8a75b08d77b4917aaf8971ad876fa5816aa6846ea78670a98a76ac9484ab9f96b2aca8bdb8b4bcb7b3bcb8b4bcb8b4b8b3afb7b2aeb9b4b0b8b3afb8b2aeb6afabb3aeaab2aeaa4878a14b7aa34c7ba44a759b3d63873b5f825b67766f5f569c7e6caf8c77b18f79b28f78b5927caf8e78a98872aa8a76a98a76ac917fada199b7b0acb9b3afbfb9b5c1bab6bdb6b2b8b3afbab5b1b9b4b0b6afabb7b1adb3ada9b3aeaab0aba8";
+
+const WIDTH = 32;
+const HEIGHT = 32;
+
+function parseImage(): number[][][] {
+	const pixels: number[][][] = [];
+	for (let y = 0; y < HEIGHT; y++) {
+		const row: number[][] = [];
+		for (let x = 0; x < WIDTH; x++) {
+			const idx = (y * WIDTH + x) * 6;
+			const r = parseInt(DAX_HEX.slice(idx, idx + 2), 16);
+			const g = parseInt(DAX_HEX.slice(idx + 2, idx + 4), 16);
+			const b = parseInt(DAX_HEX.slice(idx + 4, idx + 6), 16);
+			row.push([r, g, b]);
+		}
+		pixels.push(row);
+	}
+	return pixels;
+}
+
+// Quantize a 24-bit color to the closest xterm-256 index so the image
+// degrades gracefully on terminals that don't support truecolor SGR.
+function rgbTo256(r: number, g: number, b: number): number {
+	if (r === g && g === b) {
+		if (r < 8) return 16;
+		if (r > 248) return 231;
+		return 232 + Math.round(((r - 8) / 247) * 24);
+	}
+	const ri = Math.round((r / 255) * 5);
+	const gi = Math.round((g / 255) * 5);
+	const bi = Math.round((b / 255) * 5);
+	return 16 + 36 * ri + 6 * gi + bi;
+}
+
+function rgb(r: number, g: number, b: number, bg = false): string {
+	const layer = bg ? 48 : 38;
+	if (theme.getColorMode() === "truecolor") {
+		return `\x1b[${layer};2;${r};${g};${b}m`;
+	}
+	return `\x1b[${layer};5;${rgbTo256(r, g, b)}m`;
+}
+
+const RESET = "\x1b[0m";
+
+function buildImage(): string[] {
+	const pixels = parseImage();
+	const lines: string[] = [];
+
+	// Use half-block chars: ▄ with bg=top pixel, fg=bottom pixel
+	for (let row = 0; row < HEIGHT; row += 2) {
+		let line = "";
+		for (let x = 0; x < WIDTH; x++) {
+			const top = pixels[row][x];
+			const bottom = pixels[row + 1]?.[x] ?? top;
+			line += `${rgb(bottom[0], bottom[1], bottom[2])}${rgb(top[0], top[1], top[2], true)}▄`;
+		}
+		line += RESET;
+		lines.push(line);
+	}
+	return lines;
+}
+
+export class DaxnutsComponent extends AnimatedComponent {
+	private ui: TUI;
+	private image: string[];
+	private tick = 0;
+	private maxTicks = 25; // ~2 seconds at 80ms
+
+	constructor(ui: TUI) {
+		super();
+		this.ui = ui;
+		this.image = buildImage();
+		this.startRevealAnimation();
+	}
+
+	private startRevealAnimation(): void {
+		this.startAnimation(80, () => {
+			this.tick++;
+			return this.tick >= this.maxTicks;
+		}, () => this.ui.requestRender());
+	}
+
+	render(width: number): string[] {
+		const cached = this.getCachedRender(width, this.tick);
+		if (cached) return cached;
+
+		const t = theme;
+		const lines: string[] = [];
+
+		const center = (s: string) => {
+			const visible = visibleWidth(s);
+			const left = Math.max(0, Math.floor((width - visible) / 2));
+			return " ".repeat(left) + s;
+		};
+
+		lines.push("");
+
+		// Scanline reveal effect: show rows progressively
+		const revealedRows = Math.min(
+			this.image.length,
+			Math.floor((this.tick / this.maxTicks) * (this.image.length + 3)),
+		);
+
+		for (let i = 0; i < this.image.length; i++) {
+			if (i < revealedRows) {
+				lines.push(center(this.image[i]));
+			} else {
+				// Show scan line
+				if (i === revealedRows) {
+					const scanline = "▓".repeat(WIDTH);
+					lines.push(center(rgb(100, 200, 255) + scanline + RESET));
+				} else {
+					lines.push(center(" ".repeat(WIDTH)));
+				}
+			}
+		}
+
+		lines.push("");
+
+		// Fade in text after image is revealed
+		const textPhase = Math.max(0, this.tick - this.maxTicks * 0.6);
+		if (textPhase > 0 || this.tick >= this.maxTicks) {
+			lines.push(center(t.fg("accent", "Free Kimi K2.5 via OpenCode Zen")));
+			lines.push(center(t.fg("success", '"Powered by daxnuts"')));
+			lines.push(center(t.fg("muted", "— @thdxr")));
+		} else {
+			lines.push("");
+			lines.push("");
+			lines.push("");
+		}
+
+		lines.push("");
+		if (textPhase > 2 || this.tick >= this.maxTicks) {
+			lines.push(center(t.fg("dim", "Try OpenCode")));
+			// URL removed — was pointing to an incorrect destination
+			lines.push(center(t.fg("mdLink", "opencode.ai")));
+		} else {
+			lines.push("");
+			lines.push("");
+		}
+		lines.push("");
+
+		return this.setCachedRender(width, this.tick, lines);
+	}
+}

package/packages/pi-coding-agent/src/modes/interactive/components/diff.ts

@@ -0,0 +1,153 @@
+import * as Diff from "diff";
+import { getLanguageFromPath, highlightCode, theme } from "../theme/theme.js";
+
+/**
+ * Parse diff line to extract prefix, line number, and content.
+ * Format: "+123 content" or "-123 content" or " 123 content" or "     ..."
+ */
+function parseDiffLine(line: string): { prefix: string; lineNum: string; content: string } | null {
+	const match = line.match(/^([+\- ])(\s*\d*)\s(.*)$/);
+	if (!match) return null;
+	return { prefix: match[1], lineNum: match[2], content: match[3] };
+}
+
+/**
+ * Replace tabs with spaces for consistent rendering.
+ */
+function replaceTabs(text: string): string {
+	return text.replace(/\t/g, "    ");
+}
+
+/**
+ * Compute word-level diff and render with inverse on changed parts.
+ * Uses diffWords which groups whitespace with adjacent words for cleaner highlighting.
+ * Strips leading whitespace from inverse to avoid highlighting indentation.
+ */
+function renderIntraLineDiff(oldContent: string, newContent: string): { removedLine: string; addedLine: string } {
+	const wordDiff = Diff.diffWords(oldContent, newContent);
+
+	let removedLine = "";
+	let addedLine = "";
+	let isFirstRemoved = true;
+	let isFirstAdded = true;
+
+	for (const part of wordDiff) {
+		if (part.removed) {
+			let value = part.value;
+			// Strip leading whitespace from the first removed part
+			if (isFirstRemoved) {
+				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+				value = value.slice(leadingWs.length);
+				removedLine += leadingWs;
+				isFirstRemoved = false;
+			}
+			if (value) {
+				removedLine += theme.inverse(value);
+			}
+		} else if (part.added) {
+			let value = part.value;
+			// Strip leading whitespace from the first added part
+			if (isFirstAdded) {
+				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+				value = value.slice(leadingWs.length);
+				addedLine += leadingWs;
+				isFirstAdded = false;
+			}
+			if (value) {
+				addedLine += theme.inverse(value);
+			}
+		} else {
+			removedLine += part.value;
+			addedLine += part.value;
+		}
+	}
+
+	return { removedLine, addedLine };
+}
+
+export interface RenderDiffOptions {
+	/** File path used to choose syntax highlighting for changed content. */
+	filePath?: string;
+}
+
+function syntaxLine(content: string, lang: string | undefined): string {
+	if (!lang) return content;
+	return highlightCode(content, lang)[0] ?? content;
+}
+
+/**
+ * Render a diff string with colored lines and intra-line change highlighting.
+ * - Context lines: dim/gray
+ * - Removed lines: red, with inverse on changed tokens
+ * - Added lines: green, with inverse on changed tokens
+ */
+export function renderDiff(diffText: string, options: RenderDiffOptions = {}): string {
+	const lines = diffText.split("\n");
+	const result: string[] = [];
+	const lang = options.filePath ? getLanguageFromPath(options.filePath) : undefined;
+
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		const parsed = parseDiffLine(line);
+
+		if (!parsed) {
+			result.push(theme.fg("toolDiffContext", line));
+			i++;
+			continue;
+		}
+
+		if (parsed.prefix === "-") {
+			// Collect consecutive removed lines
+			const removedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (!p || p.prefix !== "-") break;
+				removedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			// Collect consecutive added lines
+			const addedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (!p || p.prefix !== "+") break;
+				addedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			// Only do intra-line diffing when there's exactly one removed and one added line
+			// (indicating a single line modification). Otherwise, show lines as-is.
+			if (removedLines.length === 1 && addedLines.length === 1) {
+				const removed = removedLines[0];
+				const added = addedLines[0];
+
+				const { removedLine, addedLine } = renderIntraLineDiff(
+					replaceTabs(removed.content),
+					replaceTabs(added.content),
+				);
+
+				result.push(theme.fg("toolDiffRemoved", `-${removed.lineNum} ${removedLine}`));
+				result.push(theme.fg("toolDiffAdded", `+${added.lineNum} ${addedLine}`));
+			} else {
+				// Show all removed lines first, then all added lines
+				for (const removed of removedLines) {
+					result.push(`${theme.fg("toolDiffRemoved", `-${removed.lineNum} `)}${syntaxLine(replaceTabs(removed.content), lang)}`);
+				}
+				for (const added of addedLines) {
+					result.push(`${theme.fg("toolDiffAdded", `+${added.lineNum} `)}${syntaxLine(replaceTabs(added.content), lang)}`);
+				}
+			}
+		} else if (parsed.prefix === "+") {
+			// Standalone added line
+			result.push(`${theme.fg("toolDiffAdded", `+${parsed.lineNum} `)}${syntaxLine(replaceTabs(parsed.content), lang)}`);
+			i++;
+		} else {
+			// Context line
+			result.push(`${theme.fg("toolDiffContext", ` ${parsed.lineNum} `)}${syntaxLine(replaceTabs(parsed.content), lang)}`);
+			i++;
+		}
+	}
+
+	return result.join("\n");
+}

package/packages/pi-coding-agent/src/modes/interactive/components/dynamic-border.test.ts

@@ -0,0 +1,99 @@
+import assert from "node:assert/strict";
+import { describe, it, mock } from "node:test";
+
+import { DynamicBorder } from "./dynamic-border.js";
+
+function makeTUI() {
+	return {
+		renderCount: 0,
+		requestRender() {
+			this.renderCount++;
+		},
+	};
+}
+
+describe("DynamicBorder spinner", () => {
+	it("suppresses standalone render when an external render occurred recently", () => {
+		const border = new DynamicBorder((s) => s);
+		const tui = makeTUI();
+
+		border.startSpinner(tui as any, (s) => s);
+		// startSpinner calls requestRender once immediately
+		assert.equal(tui.renderCount, 1, "initial render on startSpinner");
+
+		// Simulate an externally-triggered render (e.g. from streaming)
+		border.render(80);
+
+		// Access the private interval callback by advancing the timer
+		// Instead, we directly test the render-batching logic:
+		// After render() sets lastExternalRender, a spinner tick within 200ms
+		// should NOT call requestRender.
+		const anyBorder = border as any;
+		assert.ok(
+			Date.now() - anyBorder.lastExternalRender < 200,
+			"lastExternalRender should be recent after render()",
+		);
+
+		border.stopSpinner();
+	});
+
+	it("triggers standalone render when no external render occurred recently", () => {
+		mock.timers.enable({ apis: ["setInterval"], now: 0 });
+		try {
+			const border = new DynamicBorder((s) => s);
+			const tui = makeTUI();
+
+			// Set lastExternalRender to a time well in the past
+			const anyBorder = border as any;
+			anyBorder.lastExternalRender = 0;
+
+			border.startSpinner(tui as any, (s) => s);
+			const initialCount = tui.renderCount;
+
+			// Advance exactly one spinner interval (200ms). With mocked timers
+			// this is deterministic — no flake under CI load.
+			mock.timers.tick(200);
+
+			assert.ok(
+				tui.renderCount > initialCount,
+				"spinner should trigger requestRender after one 200ms interval when no recent external render",
+			);
+
+			border.stopSpinner();
+		} finally {
+			mock.timers.reset();
+		}
+	});
+
+	it("unref's the spinner interval so it never blocks process exit", () => {
+		// The pinned-zone spinner is purely cosmetic. A ref'd interval keeps the
+		// Node event loop alive until stopSpinner() runs — which made test
+		// processes hang and CI time out.
+		const border = new DynamicBorder((s) => s);
+		const tui = makeTUI();
+		try {
+			border.startSpinner(tui as any, (s) => s);
+			const interval = (border as any).spinnerInterval as NodeJS.Timeout;
+			assert.ok(interval, "startSpinner should create the animation interval");
+			assert.equal(
+				interval.hasRef(),
+				false,
+				"spinner interval must be unref'd so it never blocks process exit",
+			);
+		} finally {
+			border.stopSpinner();
+		}
+	});
+
+	it("updates lastExternalRender on each render() call", () => {
+		const border = new DynamicBorder((s) => s);
+		const anyBorder = border as any;
+
+		const before = Date.now();
+		border.render(80);
+		const after = Date.now();
+
+		assert.ok(anyBorder.lastExternalRender >= before);
+		assert.ok(anyBorder.lastExternalRender <= after);
+	});
+});