@voxcode-dev/voxcode 0.1.0

package/examples/extensions/README.md

@@ -0,0 +1,208 @@
+# Extension Examples
+
+Example extensions for pi-coding-agent.
+
+## Usage
+
+```bash
+# Load an extension with --extension flag
+pi --extension examples/extensions/permission-gate.ts
+
+# Or copy to extensions directory for auto-discovery
+cp permission-gate.ts ~/.pi/agent/extensions/
+```
+
+## Examples
+
+### Lifecycle & Safety
+
+| Extension | Description |
+|-----------|-------------|
+| `permission-gate.ts` | Prompts for confirmation before dangerous bash commands (rm -rf, sudo, etc.) |
+| `protected-paths.ts` | Blocks writes to protected paths (.env, .git/, node_modules/) |
+| `confirm-destructive.ts` | Confirms before destructive session actions (clear, switch, fork) |
+| `dirty-repo-guard.ts` | Prevents session changes with uncommitted git changes |
+| `sandbox/` | OS-level sandboxing using `@anthropic-ai/sandbox-runtime` with per-project config |
+
+### Custom Tools
+
+| Extension | Description |
+|-----------|-------------|
+| `todo.ts` | Todo list tool + `/todos` command with custom rendering and state persistence |
+| `hello.ts` | Minimal custom tool example |
+| `question.ts` | Demonstrates `ctx.ui.select()` for asking the user questions with custom UI |
+| `questionnaire.ts` | Multi-question input with tab bar navigation between questions |
+| `tool-override.ts` | Override built-in tools (e.g., add logging/access control to `read`) |
+| `dynamic-tools.ts` | Register tools after startup (`session_start`) and at runtime via command, with prompt snippets and tool-specific prompt guidelines |
+| `structured-output.ts` | Final structured-output tool that returns `terminate: true` so the agent can end on the tool call |
+| `built-in-tool-renderer.ts` | Custom compact rendering for built-in tools (read, bash, edit, write) while keeping original behavior |
+| `minimal-mode.ts` | Override built-in tool rendering for minimal display (only tool calls, no output in collapsed mode) |
+| `truncated-tool.ts` | Wraps ripgrep with proper output truncation (50KB/2000 lines) |
+| `ssh.ts` | Delegate all tools to a remote machine via SSH using pluggable operations |
+| `subagent/` | Delegate tasks to specialized subagents with isolated context windows |
+
+### Commands & UI
+
+| Extension | Description |
+|-----------|-------------|
+| `preset.ts` | Named presets for model, thinking level, tools, and instructions via `--preset` flag and `/preset` command |
+| `plan-mode/` | Claude Code-style plan mode for read-only exploration with `/plan` command and step tracking |
+| `tools.ts` | Interactive `/tools` command to enable/disable tools with session persistence |
+| `handoff.ts` | Transfer context to a new focused session via `/handoff <goal>` |
+| `qna.ts` | Extracts questions from last response into editor via `ctx.ui.setEditorText()` |
+| `status-line.ts` | Shows turn progress in footer via `ctx.ui.setStatus()` with themed colors |
+| `github-issue-autocomplete.ts` | Adds `#1234` issue completions by stacking a custom autocomplete provider that preloads open issues from `gh issue list` |
+| `widget-placement.ts` | Shows widgets above and below the editor via `ctx.ui.setWidget()` placement |
+| `hidden-thinking-label.ts` | Customizes the collapsed thinking label via `ctx.ui.setHiddenThinkingLabel()` |
+| `working-indicator.ts` | Customizes the streaming working indicator via `ctx.ui.setWorkingIndicator()` |
+| `model-status.ts` | Shows model changes in status bar via `model_select` hook |
+| `snake.ts` | Snake game with custom UI, keyboard handling, and session persistence |
+| `tic-tac-toe.ts` | Tic-tac-toe vs the agent with `executionMode: "sequential"` tools to prevent race conditions on shared cursor state |
+| `send-user-message.ts` | Demonstrates `pi.sendUserMessage()` for sending user messages from extensions |
+| `timed-confirm.ts` | Demonstrates AbortSignal for auto-dismissing `ctx.ui.confirm()` and `ctx.ui.select()` dialogs |
+| `rpc-demo.ts` | Exercises all RPC-supported extension UI methods; pair with [`examples/rpc-extension-ui.ts`](../rpc-extension-ui.ts) |
+| `modal-editor.ts` | Custom vim-like modal editor via `ctx.ui.setEditorComponent()` |
+| `rainbow-editor.ts` | Animated rainbow text effect via custom editor |
+| `notify.ts` | Desktop notifications via OSC 777 when agent finishes (Ghostty, iTerm2, WezTerm) |
+| `titlebar-spinner.ts` | Braille spinner animation in terminal title while the agent is working |
+| `summarize.ts` | Summarize conversation with GPT-5.2 and show in transient UI |
+| `custom-footer.ts` | Custom footer with git branch and token stats via `ctx.ui.setFooter()` |
+| `custom-header.ts` | Custom header via `ctx.ui.setHeader()` |
+| `overlay-test.ts` | Test overlay compositing with inline text inputs and edge cases |
+| `overlay-qa-tests.ts` | Comprehensive overlay QA tests: anchors, margins, stacking, overflow, animation |
+| `doom-overlay/` | DOOM game running as an overlay at 35 FPS (demonstrates real-time game rendering) |
+| `shutdown-command.ts` | Adds `/quit` command demonstrating `ctx.shutdown()` |
+| `reload-runtime.ts` | Adds `/reload-runtime` and `reload_runtime` tool showing safe reload flow |
+| `interactive-shell.ts` | Run interactive commands (vim, htop) with full terminal via `user_bash` hook |
+| `inline-bash.ts` | Expands `!{command}` patterns in prompts via `input` event transformation |
+
+### Git Integration
+
+| Extension | Description |
+|-----------|-------------|
+| `git-checkpoint.ts` | Creates git stash checkpoints at each turn for code restoration on fork |
+| `auto-commit-on-exit.ts` | Auto-commits on exit using last assistant message for commit message |
+
+### System Prompt & Compaction
+
+| Extension | Description |
+|-----------|-------------|
+| `pirate.ts` | Demonstrates `systemPromptAppend` to dynamically modify system prompt |
+| `claude-rules.ts` | Scans `.claude/rules/` folder and lists rules in system prompt |
+| `custom-compaction.ts` | Custom compaction that summarizes entire conversation |
+| `trigger-compact.ts` | Triggers compaction when context usage exceeds 100k tokens and adds `/trigger-compact` command |
+
+### System Integration
+
+| Extension | Description |
+|-----------|-------------|
+| `mac-system-theme.ts` | Syncs pi theme with macOS dark/light mode |
+
+### Resources
+
+| Extension | Description |
+|-----------|-------------|
+| `dynamic-resources/` | Loads skills, prompts, and themes using `resources_discover` |
+
+### Messages & Communication
+
+| Extension | Description |
+|-----------|-------------|
+| `message-renderer.ts` | Custom message rendering with colors and expandable details via `registerMessageRenderer` |
+| `event-bus.ts` | Inter-extension communication via `pi.events` |
+
+### Session Metadata
+
+| Extension | Description |
+|-----------|-------------|
+| `session-name.ts` | Name sessions for the session selector via `setSessionName` |
+| `bookmark.ts` | Bookmark entries with labels for `/tree` navigation via `setLabel` |
+
+### Custom Providers
+
+| Extension | Description |
+|-----------|-------------|
+| `custom-provider-anthropic/` | Custom Anthropic provider with OAuth support and custom streaming implementation |
+| `custom-provider-gitlab-duo/` | GitLab Duo provider using pi-ai's built-in Anthropic/OpenAI streaming via proxy |
+
+### External Dependencies
+
+| Extension | Description |
+|-----------|-------------|
+| `with-deps/` | Extension with its own package.json and dependencies (demonstrates jiti module resolution) |
+| `file-trigger.ts` | Watches a trigger file and injects contents into conversation |
+
+## Writing Extensions
+
+See [docs/extensions.md](../../docs/extensions.md) for full documentation.
+
+```typescript
+import type { ExtensionAPI } from "@voxcode/voxcode";
+import { Type } from "typebox";
+
+export default function (pi: ExtensionAPI) {
+  // Subscribe to lifecycle events
+  pi.on("tool_call", async (event, ctx) => {
+    if (event.toolName === "bash" && event.input.command?.includes("rm -rf")) {
+      const ok = await ctx.ui.confirm("Dangerous!", "Allow rm -rf?");
+      if (!ok) return { block: true, reason: "Blocked by user" };
+    }
+  });
+
+  // Register custom tools
+  pi.registerTool({
+    name: "greet",
+    label: "Greeting",
+    description: "Generate a greeting",
+    parameters: Type.Object({
+      name: Type.String({ description: "Name to greet" }),
+    }),
+    async execute(toolCallId, params, onUpdate, ctx, signal) {
+      return {
+        content: [{ type: "text", text: `Hello, ${params.name}!` }],
+        details: {},
+      };
+    },
+  });
+
+  // Register commands
+  pi.registerCommand("hello", {
+    description: "Say hello",
+    handler: async (args, ctx) => {
+      ctx.ui.notify("Hello!", "info");
+    },
+  });
+}
+```
+
+## Key Patterns
+
+**Use StringEnum for string parameters** (required for Google API compatibility):
+```typescript
+import { StringEnum } from "@voxcode/voxcode-ai";
+
+// Good
+action: StringEnum(["list", "add"] as const)
+
+// Bad - doesn't work with Google
+action: Type.Union([Type.Literal("list"), Type.Literal("add")])
+```
+
+**State persistence via details:**
+```typescript
+// Store state in tool result details for proper forking support
+return {
+  content: [{ type: "text", text: "Done" }],
+  details: { todos: [...todos], nextId },  // Persisted in session
+};
+
+// Reconstruct on session events
+pi.on("session_start", async (_event, ctx) => {
+  for (const entry of ctx.sessionManager.getBranch()) {
+    if (entry.type === "message" && entry.message.toolName === "my_tool") {
+      const details = entry.message.details;
+      // Reconstruct state from details
+    }
+  }
+});
+```

package/examples/extensions/auto-commit-on-exit.ts

@@ -0,0 +1,49 @@
+/**
+ * Auto-Commit on Exit Extension
+ *
+ * Automatically commits changes when the agent exits.
+ * Uses the last assistant message to generate a commit message.
+ */
+
+import type { ExtensionAPI } from "@voxcode/voxcode";
+
+export default function (pi: ExtensionAPI) {
+	pi.on("session_shutdown", async (_event, ctx) => {
+		// Check for uncommitted changes
+		const { stdout: status, code } = await pi.exec("git", ["status", "--porcelain"]);
+
+		if (code !== 0 || status.trim().length === 0) {
+			// Not a git repo or no changes
+			return;
+		}
+
+		// Find the last assistant message for commit context
+		const entries = ctx.sessionManager.getEntries();
+		let lastAssistantText = "";
+		for (let i = entries.length - 1; i >= 0; i--) {
+			const entry = entries[i];
+			if (entry.type === "message" && entry.message.role === "assistant") {
+				const content = entry.message.content;
+				if (Array.isArray(content)) {
+					lastAssistantText = content
+						.filter((c): c is { type: "text"; text: string } => c.type === "text")
+						.map((c) => c.text)
+						.join("\n");
+				}
+				break;
+			}
+		}
+
+		// Generate a simple commit message
+		const firstLine = lastAssistantText.split("\n")[0] || "Work in progress";
+		const commitMessage = `[pi] ${firstLine.slice(0, 50)}${firstLine.length > 50 ? "..." : ""}`;
+
+		// Stage and commit
+		await pi.exec("git", ["add", "-A"]);
+		const { code: commitCode } = await pi.exec("git", ["commit", "-m", commitMessage]);
+
+		if (commitCode === 0 && ctx.hasUI) {
+			ctx.ui.notify(`Auto-committed: ${commitMessage}`, "info");
+		}
+	});
+}

package/examples/extensions/bash-spawn-hook.ts

@@ -0,0 +1,30 @@
+/**
+ * Bash Spawn Hook Example
+ *
+ * Adjusts command, cwd, and env before execution.
+ *
+ * Usage:
+ *   pi -e ./bash-spawn-hook.ts
+ */
+
+import type { ExtensionAPI } from "@voxcode/voxcode";
+import { createBashTool } from "@voxcode/voxcode";
+
+export default function (pi: ExtensionAPI) {
+	const cwd = process.cwd();
+
+	const bashTool = createBashTool(cwd, {
+		spawnHook: ({ command, cwd, env }) => ({
+			command: `source ~/.profile\n${command}`,
+			cwd,
+			env: { ...env, VOXCODE_SPAWN_HOOK: "1" },
+		}),
+	});
+
+	pi.registerTool({
+		...bashTool,
+		execute: async (id, params, signal, onUpdate, _ctx) => {
+			return bashTool.execute(id, params, signal, onUpdate);
+		},
+	});
+}

package/examples/extensions/bookmark.ts

@@ -0,0 +1,50 @@
+/**
+ * Entry bookmarking example.
+ *
+ * Shows setLabel to mark entries with labels for easy navigation in /tree.
+ * Labels appear in the tree view and help you find important points.
+ *
+ * Usage: /bookmark [label] - bookmark the last assistant message
+ */
+
+import type { ExtensionAPI } from "@voxcode/voxcode";
+
+export default function (pi: ExtensionAPI) {
+	pi.registerCommand("bookmark", {
+		description: "Bookmark last message (usage: /bookmark [label])",
+		handler: async (args, ctx) => {
+			const label = args.trim() || `bookmark-${Date.now()}`;
+
+			// Find the last assistant message entry
+			const entries = ctx.sessionManager.getEntries();
+			for (let i = entries.length - 1; i >= 0; i--) {
+				const entry = entries[i];
+				if (entry.type === "message" && entry.message.role === "assistant") {
+					pi.setLabel(entry.id, label);
+					ctx.ui.notify(`Bookmarked as: ${label}`, "info");
+					return;
+				}
+			}
+
+			ctx.ui.notify("No assistant message to bookmark", "warning");
+		},
+	});
+
+	// Remove bookmark
+	pi.registerCommand("unbookmark", {
+		description: "Remove bookmark from last labeled entry",
+		handler: async (_args, ctx) => {
+			const entries = ctx.sessionManager.getEntries();
+			for (let i = entries.length - 1; i >= 0; i--) {
+				const entry = entries[i];
+				const label = ctx.sessionManager.getLabel(entry.id);
+				if (label) {
+					pi.setLabel(entry.id, undefined);
+					ctx.ui.notify(`Removed bookmark: ${label}`, "info");
+					return;
+				}
+			}
+			ctx.ui.notify("No bookmarked entry found", "warning");
+		},
+	});
+}

package/examples/extensions/border-status-editor.ts

@@ -0,0 +1,145 @@
+import { CustomEditor, type ExtensionAPI, type ExtensionContext, type KeybindingsManager } from "@voxcode/voxcode";
+import type { Component, EditorTheme, TUI } from "@voxcode/voxcode-tui";
+import { truncateToWidth, visibleWidth } from "@voxcode/voxcode-tui";
+
+function fitBorder(
+	left: string,
+	right: string,
+	width: number,
+	border: (text: string) => string,
+	fill: (text: string) => string = border,
+): string {
+	if (width <= 0) return "";
+	if (width === 1) return border("─");
+
+	let leftText = left;
+	let rightText = right;
+	const fixedWidth = 2;
+	const minimumGap = 3;
+
+	while (
+		fixedWidth + visibleWidth(leftText) + visibleWidth(rightText) + minimumGap > width &&
+		visibleWidth(rightText) > 0
+	) {
+		rightText = truncateToWidth(rightText, Math.max(0, visibleWidth(rightText) - 1), "");
+	}
+	while (
+		fixedWidth + visibleWidth(leftText) + visibleWidth(rightText) + minimumGap > width &&
+		visibleWidth(leftText) > 0
+	) {
+		leftText = truncateToWidth(leftText, Math.max(0, visibleWidth(leftText) - 1), "");
+	}
+
+	const gapWidth = Math.max(0, width - fixedWidth - visibleWidth(leftText) - visibleWidth(rightText));
+	return `${border("─")}${leftText}${fill("─".repeat(gapWidth))}${rightText}${border("─")}`;
+}
+
+function formatCwd(cwd: string): string {
+	const home = process.env.HOME;
+	if (home && cwd.startsWith(home)) {
+		return `~${cwd.slice(home.length)}`;
+	}
+	return cwd;
+}
+
+function formatContext(ctx: ExtensionContext): string {
+	const usage = ctx.getContextUsage();
+	const contextWindow = usage?.contextWindow ?? ctx.model?.contextWindow;
+	if (!contextWindow || !usage || usage.percent === null) {
+		return "ctx ?";
+	}
+	return `ctx ${Math.round(usage.percent)}%/${(contextWindow / 1000).toFixed(0)}k`;
+}
+
+function formatThinking(level: string): string {
+	return level === "off" ? "off" : level;
+}
+
+class EmptyFooter implements Component {
+	render(): string[] {
+		return [];
+	}
+
+	invalidate(): void {}
+}
+
+export default function (pi: ExtensionAPI) {
+	let isWorking = false;
+	let spinnerIndex = 0;
+	let spinnerTimer: ReturnType<typeof setInterval> | undefined;
+	let activeTui: TUI | undefined;
+	const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+	const stopSpinner = () => {
+		if (spinnerTimer) {
+			clearInterval(spinnerTimer);
+			spinnerTimer = undefined;
+		}
+	};
+
+	pi.on("agent_start", () => {
+		isWorking = true;
+		stopSpinner();
+		spinnerTimer = setInterval(() => {
+			spinnerIndex = (spinnerIndex + 1) % spinnerFrames.length;
+			activeTui?.requestRender();
+		}, 80);
+		activeTui?.requestRender();
+	});
+
+	pi.on("agent_end", () => {
+		isWorking = false;
+		stopSpinner();
+		activeTui?.requestRender();
+	});
+
+	pi.on("session_shutdown", () => {
+		stopSpinner();
+		activeTui = undefined;
+	});
+
+	pi.on("session_start", (_event, ctx) => {
+		ctx.ui.setWorkingVisible(false);
+		ctx.ui.setFooter(() => new EmptyFooter());
+
+		let branch: string | undefined;
+
+		const refreshBranch = async () => {
+			const result = await pi.exec("git", ["branch", "--show-current"], { cwd: ctx.cwd }).catch(() => undefined);
+			const stdout = result?.stdout.trim();
+			branch = stdout && stdout.length > 0 ? stdout : undefined;
+			activeTui?.requestRender();
+		};
+		void refreshBranch();
+
+		class BorderStatusEditor extends CustomEditor {
+			constructor(tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager) {
+				super(tui, theme, keybindings, { paddingX: 0 });
+				activeTui = tui;
+			}
+
+			render(width: number): string[] {
+				const lines = super.render(width);
+				if (lines.length < 2) return lines;
+
+				const thm = ctx.ui.theme;
+				const model = ctx.model ? `${ctx.model.provider}/${ctx.model.id}` : "no model";
+				const thinking = pi.getThinkingLevel();
+				const topLeft = isWorking ? thm.fg("accent", ` ${spinnerFrames[spinnerIndex]} `) : "";
+				const topRight = "";
+				const bottomLeft = thm.fg("muted", ` ${model} · ${formatThinking(thinking)} `);
+				const bottomRight = thm.fg(
+					"muted",
+					` ${formatContext(ctx)} · ${formatCwd(ctx.cwd)}${branch ? ` (${branch})` : ""} `,
+				);
+				const borderColor = (text: string) => this.borderColor(text);
+
+				lines[0] = fitBorder(topLeft, topRight, width, borderColor);
+				lines[lines.length - 1] = fitBorder(bottomLeft, bottomRight, width, borderColor);
+				return lines;
+			}
+		}
+
+		ctx.ui.setEditorComponent((tui, theme, keybindings) => new BorderStatusEditor(tui, theme, keybindings));
+	});
+}