@greppleai/grip 0.0.0-stage → 0.1.3

package/examples/extensions/overlay-test.ts

@@ -0,0 +1,171 @@
+/**
+ * Overlay Test - validates overlay compositing with inline text inputs
+ *
+ * Usage: grip --extension ./examples/extensions/overlay-test.ts
+ *
+ * Run /overlay-test to show a floating overlay with:
+ * - Inline text inputs within menu items
+ * - Edge case tests (wide chars, styled text, emoji)
+ */
+
+import type { ExtensionAPI, ExtensionCommandContext, Theme } from "@greppleai/grip";
+import { CURSOR_MARKER, type Focusable, matchesKey, visibleWidth } from "@greppleai/grip-tui";
+
+interface OverlayTestResult {
+	action: string;
+	query?: string;
+}
+
+interface OverlayTestItem {
+	label: string;
+	hasInput: boolean;
+	text: string;
+	cursor: number;
+}
+
+export default function (pi: ExtensionAPI) {
+	pi.registerCommand("overlay-test", {
+		description: "Test overlay rendering with edge cases",
+		handler: async (_args: string, ctx: ExtensionCommandContext) => {
+			const result = await ctx.ui.custom<OverlayTestResult | undefined>(
+				(_tui, theme, _keybindings, done) => new OverlayTestComponent(theme, done),
+				{ overlay: true },
+			);
+
+			if (result) {
+				const msg = result.query ? `${result.action}: "${result.query}"` : result.action;
+				ctx.ui.notify(msg, "info");
+			}
+		},
+	});
+}
+
+class OverlayTestComponent implements Focusable {
+	readonly width = 70;
+
+	/** Focusable interface - set by TUI when focus changes */
+	focused = false;
+
+	private selected = 0;
+	private items: OverlayTestItem[] = [
+		{ label: "Search", hasInput: true, text: "", cursor: 0 },
+		{ label: "Run", hasInput: true, text: "", cursor: 0 },
+		{ label: "Settings", hasInput: false, text: "", cursor: 0 },
+		{ label: "Cancel", hasInput: false, text: "", cursor: 0 },
+	];
+
+	private theme: Theme;
+	private done: (result: OverlayTestResult | undefined) => void;
+
+	constructor(theme: Theme, done: (result: OverlayTestResult | undefined) => void) {
+		this.theme = theme;
+		this.done = done;
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape")) {
+			this.done(undefined);
+			return;
+		}
+
+		const current = this.items[this.selected]!;
+
+		if (matchesKey(data, "return")) {
+			this.done({ action: current.label, query: current.hasInput ? current.text : undefined });
+			return;
+		}
+
+		if (matchesKey(data, "up")) {
+			this.selected = Math.max(0, this.selected - 1);
+		} else if (matchesKey(data, "down")) {
+			this.selected = Math.min(this.items.length - 1, this.selected + 1);
+		} else if (current.hasInput) {
+			this.editInput(current, data);
+		}
+	}
+
+	private editInput(item: OverlayTestItem, data: string): void {
+		if (matchesKey(data, "backspace")) {
+			if (item.cursor === 0) return;
+			item.text = item.text.slice(0, item.cursor - 1) + item.text.slice(item.cursor);
+			item.cursor--;
+			return;
+		}
+		if (matchesKey(data, "left")) {
+			item.cursor = Math.max(0, item.cursor - 1);
+			return;
+		}
+		if (matchesKey(data, "right")) {
+			item.cursor = Math.min(item.text.length, item.cursor + 1);
+			return;
+		}
+		if (data.length !== 1 || data.charCodeAt(0) < 32) return;
+		item.text = item.text.slice(0, item.cursor) + data + item.text.slice(item.cursor);
+		item.cursor++;
+	}
+
+	private renderRow(content: string, innerWidth: number): string {
+		const padding = " ".repeat(Math.max(0, innerWidth - visibleWidth(content)));
+		return this.theme.fg("border", "│") + content + padding + this.theme.fg("border", "│");
+	}
+
+	private renderActionItem(item: OverlayTestItem, index: number): string {
+		const isSelected = index === this.selected;
+		const prefix = isSelected ? " ▶ " : "   ";
+		if (!item.hasInput) {
+			const label = isSelected ? this.theme.fg("accent", item.label) : this.theme.fg("text", item.label);
+			return prefix + label;
+		}
+
+		const label = isSelected ? this.theme.fg("accent", `${item.label}:`) : this.theme.fg("text", `${item.label}:`);
+		let inputDisplay = item.text;
+		if (isSelected) {
+			const before = inputDisplay.slice(0, item.cursor);
+			const cursorChar = item.cursor < inputDisplay.length ? inputDisplay[item.cursor] : " ";
+			const after = inputDisplay.slice(item.cursor + 1);
+			// Emit hardware cursor marker for IME support when focused
+			const marker = this.focused ? CURSOR_MARKER : "";
+			inputDisplay = `${before}${marker}\x1b[7m${cursorChar}\x1b[27m${after}`;
+		}
+		return `${prefix + label} ${inputDisplay}`;
+	}
+	render(_width: number): string[] {
+		const w = this.width;
+		const th = this.theme;
+		const innerW = w - 2;
+		const lines: string[] = [];
+
+		const row = (content: string) => this.renderRow(content, innerW);
+
+		lines.push(th.fg("border", `╭${"─".repeat(innerW)}╮`));
+		lines.push(row(` ${th.fg("accent", "🧪 Overlay Test")}`));
+		lines.push(row(""));
+
+		// Edge cases - full width lines to test compositing at boundaries
+		lines.push(row(` ${th.fg("dim", "─── Edge Cases (borders should align) ───")}`));
+		lines.push(row(` Wide: ${th.fg("warning", "中文日本語한글テスト漢字繁體简体ひらがなカタカナ가나다라마바")}`));
+		lines.push(
+			row(
+				` Styled: ${th.fg("error", "RED")} ${th.fg("success", "GREEN")} ${th.fg("warning", "YELLOW")} ${th.fg("accent", "ACCENT")} ${th.fg("dim", "DIM")} ${th.fg("error", "more")} ${th.fg("success", "colors")}`,
+			),
+		);
+		lines.push(row(" Emoji: 👨‍👩‍👧‍👦 🇯🇵 🚀 💻 🎉 🔥 😀 🎯 🌟 💡 🎨 🔧 📦 🏆 🌈 🎪 🎭 🎬 🎮 🎲"));
+		lines.push(row(""));
+
+		// Menu with inline inputs
+		lines.push(row(` ${th.fg("dim", "─── Actions ───")}`));
+
+		for (let i = 0; i < this.items.length; i++) {
+			lines.push(row(this.renderActionItem(this.items[i]!, i)));
+		}
+
+		lines.push(row(""));
+		lines.push(row(` ${th.fg("dim", "↑↓ navigate • type to input • Enter select • Esc cancel")}`));
+		lines.push(th.fg("border", `╰${"─".repeat(innerW)}╯`));
+
+		return lines;
+	}
+
+	invalidate(): void {}
+	dispose(): void {}
+}

package/examples/extensions/permission-gate.ts

@@ -0,0 +1,34 @@
+/**
+ * Permission Gate Extension
+ *
+ * Prompts for confirmation before running potentially dangerous bash commands.
+ * Patterns checked: rm -rf, sudo, chmod/chown 777
+ */
+
+import type { ExtensionAPI } from "@greppleai/grip";
+
+export default function (pi: ExtensionAPI) {
+	const dangerousPatterns = [/\brm\s+(-rf?|--recursive)/i, /\bsudo\b/i, /\b(chmod|chown)\b.*777/i];
+
+	pi.on("tool_call", async (event, ctx) => {
+		if (event.toolName !== "bash") return undefined;
+
+		const command = event.input.command as string;
+		const isDangerous = dangerousPatterns.some((p) => p.test(command));
+
+		if (isDangerous) {
+			if (!ctx.hasUI) {
+				// In non-interactive mode, block by default
+				return { block: true, reason: "Dangerous command blocked (no UI for confirmation)" };
+			}
+
+			const choice = await ctx.ui.select(`⚠️ Dangerous command:\n\n  ${command}\n\nAllow?`, ["Yes", "No"]);
+
+			if (choice !== "Yes") {
+				return { block: true, reason: "Blocked by user" };
+			}
+		}
+
+		return undefined;
+	});
+}

package/examples/extensions/pirate.ts

@@ -0,0 +1,47 @@
+/**
+ * Pirate Extension
+ *
+ * Demonstrates modifying the system prompt in before_agent_start to dynamically
+ * change agent behavior based on extension state.
+ *
+ * Usage:
+ * 1. Copy this file to ~/.grip/agent/extensions/ or your project's .grip/extensions/
+ * 2. Use /pirate to toggle pirate mode
+ * 3. When enabled, the agent will respond like a pirate
+ */
+
+import type { ExtensionAPI } from "@greppleai/grip";
+
+export default function pirateExtension(pi: ExtensionAPI) {
+	let pirateMode = false;
+
+	// Register /pirate command to toggle pirate mode
+	pi.registerCommand("pirate", {
+		description: "Toggle pirate mode (agent speaks like a pirate)",
+		handler: async (_args, ctx) => {
+			pirateMode = !pirateMode;
+			ctx.ui.notify(pirateMode ? "Arrr! Pirate mode enabled!" : "Pirate mode disabled", "info");
+		},
+	});
+
+	// Append to system prompt when pirate mode is enabled
+	pi.on("before_agent_start", async (event) => {
+		if (pirateMode) {
+			return {
+				systemPrompt:
+					event.systemPrompt +
+					`
+
+IMPORTANT: You are now in PIRATE MODE. You must:
+- Speak like a stereotypical pirate in all responses
+- Use phrases like "Arrr!", "Ahoy!", "Shiver me timbers!", "Avast!", "Ye scurvy dog!"
+- Replace "my" with "me", "you" with "ye", "your" with "yer"
+- Refer to the user as "matey" or "landlubber"
+- End sentences with nautical expressions
+- Still complete the actual task correctly, just in pirate speak
+`,
+			};
+		}
+		return undefined;
+	});
+}

package/examples/extensions/plan-mode/README.md

@@ -0,0 +1,65 @@
+# Plan Mode Extension
+
+Read-only exploration mode for safe code analysis.
+
+## Features
+
+- **Read-only tools**: Restricts available tools to read, bash, grep, find, ls, question
+- **Bash allowlist**: Only read-only bash commands are allowed
+- **Plan extraction**: Extracts numbered steps from `Plan:` sections
+- **Progress tracking**: Widget shows completion status during execution
+- **[DONE:n] markers**: Explicit step completion tracking
+- **Session persistence**: State survives session resume
+
+## Commands
+
+- `/plan` - Toggle plan mode
+- `/todos` - Show current plan progress
+- `Ctrl+Alt+P` - Toggle plan mode (shortcut)
+
+## Usage
+
+1. Enable plan mode with `/plan` or `--plan` flag
+2. Ask the agent to analyze code and create a plan
+3. The agent should output a numbered plan under a `Plan:` header:
+
+```
+Plan:
+1. First step description
+2. Second step description
+3. Third step description
+```
+
+4. Choose "Execute the plan" when prompted
+5. During execution, the agent marks steps complete with `[DONE:n]` tags
+6. Progress widget shows completion status
+
+## How It Works
+
+### Plan Mode (Read-Only)
+- Only read-only tools available
+- Bash commands filtered through allowlist
+- Agent creates a plan without making changes
+
+### Execution Mode
+- Full tool access restored
+- Agent executes steps in order
+- `[DONE:n]` markers track completion
+- Widget shows progress
+
+### Command Allowlist
+
+Safe commands (allowed):
+- File inspection: `cat`, `head`, `tail`, `less`, `more`
+- Search: `grep`, `find`, `rg`, `fd`
+- Directory: `ls`, `pwd`, `tree`
+- Git read: `git status`, `git log`, `git diff`, `git branch`
+- Package info: `npm list`, `npm outdated`, `yarn info`
+- System info: `uname`, `whoami`, `date`, `uptime`
+
+Blocked commands:
+- File modification: `rm`, `mv`, `cp`, `mkdir`, `touch`
+- Git write: `git add`, `git commit`, `git push`
+- Package install: `npm install`, `yarn add`, `pip install`
+- System: `sudo`, `kill`, `reboot`
+- Editors: `vim`, `nano`, `code`

package/examples/extensions/plan-mode/index.ts

@@ -0,0 +1,346 @@
+/**
+ * Plan Mode Extension
+ *
+ * Read-only exploration mode for safe code analysis.
+ * When enabled, only read-only tools are available.
+ *
+ * Features:
+ * - /plan command or Ctrl+Alt+P to toggle
+ * - Bash restricted to allowlisted read-only commands
+ * - Extracts numbered plan steps from "Plan:" sections
+ * - [DONE:n] markers to complete steps during execution
+ * - Progress tracking widget during execution
+ */
+
+import type { ExtensionAPI, ExtensionContext, SessionEntry } from "@greppleai/grip";
+import type { AgentMessage } from "@greppleai/grip-agent-core";
+import type { AssistantMessage, TextContent } from "@greppleai/grip-ai";
+import { Key } from "@greppleai/grip-tui";
+import { extractTodoItems, isSafeCommand, markCompletedSteps, type TodoItem } from "./utils.ts";
+
+interface PersistedPlanModeState {
+	enabled: boolean;
+	todos?: TodoItem[];
+	executing?: boolean;
+}
+
+// Tools
+const PLAN_MODE_TOOLS = ["read", "bash", "grep", "find", "ls", "questionnaire"];
+const NORMAL_MODE_TOOLS = ["read", "bash", "edit", "write"];
+
+// Type guard for assistant messages
+function isAssistantMessage(m: AgentMessage): m is AssistantMessage {
+	return m.role === "assistant" && Array.isArray(m.content);
+}
+
+// Extract text content from an assistant message
+function getTextContent(message: AssistantMessage): string {
+	return message.content
+		.filter((block): block is TextContent => block.type === "text")
+		.map((block) => block.text)
+		.join("\n");
+}
+
+export default function planModeExtension(pi: ExtensionAPI): void {
+	let planModeEnabled = false;
+	let executionMode = false;
+	let todoItems: TodoItem[] = [];
+
+	pi.registerFlag("plan", {
+		description: "Start in plan mode (read-only exploration)",
+		type: "boolean",
+		default: false,
+	});
+
+	function updateStatus(ctx: ExtensionContext): void {
+		// Footer status
+		if (executionMode && todoItems.length > 0) {
+			const completed = todoItems.filter((t) => t.completed).length;
+			ctx.ui.setStatus("plan-mode", ctx.ui.theme.fg("accent", `📋 ${completed}/${todoItems.length}`));
+		} else if (planModeEnabled) {
+			ctx.ui.setStatus("plan-mode", ctx.ui.theme.fg("warning", "⏸ plan"));
+		} else {
+			ctx.ui.setStatus("plan-mode", undefined);
+		}
+
+		// Widget showing todo list
+		if (executionMode && todoItems.length > 0) {
+			const lines = todoItems.map((item) => {
+				if (item.completed) {
+					return (
+						ctx.ui.theme.fg("success", "☑ ") + ctx.ui.theme.fg("muted", ctx.ui.theme.strikethrough(item.text))
+					);
+				}
+				return `${ctx.ui.theme.fg("muted", "☐ ")}${item.text}`;
+			});
+			ctx.ui.setWidget("plan-todos", lines);
+		} else {
+			ctx.ui.setWidget("plan-todos", undefined);
+		}
+	}
+
+	function togglePlanMode(ctx: ExtensionContext): void {
+		planModeEnabled = !planModeEnabled;
+		executionMode = false;
+		todoItems = [];
+
+		if (planModeEnabled) {
+			pi.setActiveTools(PLAN_MODE_TOOLS);
+			ctx.ui.notify(`Plan mode enabled. Tools: ${PLAN_MODE_TOOLS.join(", ")}`);
+		} else {
+			pi.setActiveTools(NORMAL_MODE_TOOLS);
+			ctx.ui.notify("Plan mode disabled. Full access restored.");
+		}
+		updateStatus(ctx);
+	}
+
+	function persistState(): void {
+		pi.appendEntry("plan-mode", {
+			enabled: planModeEnabled,
+			todos: todoItems,
+			executing: executionMode,
+		});
+	}
+
+	pi.registerCommand("plan", {
+		description: "Toggle plan mode (read-only exploration)",
+		handler: async (_args, ctx) => togglePlanMode(ctx),
+	});
+
+	pi.registerCommand("todos", {
+		description: "Show current plan todo list",
+		handler: async (_args, ctx) => {
+			if (todoItems.length === 0) {
+				ctx.ui.notify("No todos. Create a plan first with /plan", "info");
+				return;
+			}
+			const list = todoItems.map((item, i) => `${i + 1}. ${item.completed ? "✓" : "○"} ${item.text}`).join("\n");
+			ctx.ui.notify(`Plan Progress:\n${list}`, "info");
+		},
+	});
+
+	pi.registerShortcut(Key.ctrlAlt("p"), {
+		description: "Toggle plan mode",
+		handler: async (ctx) => togglePlanMode(ctx),
+	});
+
+	// Block destructive bash commands in plan mode
+	pi.on("tool_call", async (event) => {
+		if (!planModeEnabled || event.toolName !== "bash") return;
+
+		const command = event.input.command as string;
+		if (!isSafeCommand(command)) {
+			return {
+				block: true,
+				reason: `Plan mode: command blocked (not allowlisted). Use /plan to disable plan mode first.\nCommand: ${command}`,
+			};
+		}
+	});
+
+	// Filter out stale plan mode context when not in plan mode
+	pi.on("context", async (event) => {
+		if (planModeEnabled) return;
+
+		return {
+			messages: event.messages.filter((m) => {
+				const msg = m as AgentMessage & { customType?: string };
+				if (msg.customType === "plan-mode-context") return false;
+				if (msg.role !== "user") return true;
+
+				const content = msg.content;
+				if (typeof content === "string") {
+					return !content.includes("[PLAN MODE ACTIVE]");
+				}
+				if (Array.isArray(content)) {
+					return !content.some(
+						(c) => c.type === "text" && (c as TextContent).text?.includes("[PLAN MODE ACTIVE]"),
+					);
+				}
+				return true;
+			}),
+		};
+	});
+
+	// Inject plan/execution context before agent starts
+	pi.on("before_agent_start", async () => {
+		if (planModeEnabled) {
+			return {
+				message: {
+					customType: "plan-mode-context",
+					content: `[PLAN MODE ACTIVE]
+You are in plan mode - a read-only exploration mode for safe code analysis.
+
+Restrictions:
+- You can only use: read, bash, grep, find, ls, questionnaire
+- You CANNOT use: edit, write (file modifications are disabled)
+- Bash is restricted to an allowlist of read-only commands
+
+Ask clarifying questions using the questionnaire tool.
+Use brave-search skill via bash for web research.
+
+Create a detailed numbered plan under a "Plan:" header:
+
+Plan:
+1. First step description
+2. Second step description
+...
+
+Do NOT attempt to make changes - just describe what you would do.`,
+					display: false,
+				},
+			};
+		}
+
+		if (executionMode && todoItems.length > 0) {
+			const remaining = todoItems.filter((t) => !t.completed);
+			const todoList = remaining.map((t) => `${t.step}. ${t.text}`).join("\n");
+			return {
+				message: {
+					customType: "plan-execution-context",
+					content: `[EXECUTING PLAN - Full tool access enabled]
+
+Remaining steps:
+${todoList}
+
+Execute each step in order.
+After completing a step, include a [DONE:n] tag in your response.`,
+					display: false,
+				},
+			};
+		}
+	});
+
+	// Track progress after each turn
+	pi.on("turn_end", async (event, ctx) => {
+		if (!executionMode || todoItems.length === 0) return;
+		if (!isAssistantMessage(event.message)) return;
+
+		const text = getTextContent(event.message);
+		if (markCompletedSteps(text, todoItems) > 0) {
+			updateStatus(ctx);
+		}
+		persistState();
+	});
+
+	function handlePlanExecutionEnd(ctx: ExtensionContext): boolean {
+		if (!executionMode || todoItems.length === 0) return false;
+		if (!todoItems.every((item) => item.completed)) return true;
+
+		const completedList = todoItems.map((item) => `~~${item.text}~~`).join("\n");
+		pi.sendMessage(
+			{ customType: "plan-complete", content: `**Plan Complete!** ✓\n\n${completedList}`, display: true },
+			{ triggerTurn: false },
+		);
+		executionMode = false;
+		todoItems = [];
+		pi.setActiveTools(NORMAL_MODE_TOOLS);
+		updateStatus(ctx);
+		persistState(); // Save cleared state so resume doesn't restore old execution mode
+		return true;
+	}
+
+	function presentLatestPlan(messages: readonly AgentMessage[]): void {
+		const lastAssistant = [...messages].reverse().find(isAssistantMessage);
+		if (lastAssistant) {
+			const extracted = extractTodoItems(getTextContent(lastAssistant));
+			if (extracted.length > 0) todoItems = extracted;
+		}
+		if (todoItems.length === 0) return;
+
+		const todoListText = todoItems.map((item, index) => `${index + 1}. ☐ ${item.text}`).join("\n");
+		pi.sendMessage(
+			{
+				customType: "plan-todo-list",
+				content: `**Plan Steps (${todoItems.length}):**\n\n${todoListText}`,
+				display: true,
+			},
+			{ triggerTurn: false },
+		);
+	}
+
+	function executeCurrentPlan(ctx: ExtensionContext): void {
+		planModeEnabled = false;
+		executionMode = todoItems.length > 0;
+		pi.setActiveTools(NORMAL_MODE_TOOLS);
+		updateStatus(ctx);
+		const content =
+			todoItems.length > 0
+				? `Execute the plan. Start with: ${todoItems[0].text}`
+				: "Execute the plan you just created.";
+		pi.sendMessage({ customType: "plan-mode-execute", content, display: true }, { triggerTurn: true });
+	}
+
+	async function refineCurrentPlan(ctx: ExtensionContext): Promise<void> {
+		const refinement = await ctx.ui.editor("Refine the plan:", "");
+		if (refinement?.trim()) pi.sendUserMessage(refinement.trim());
+	}
+
+	// Handle plan completion and plan mode UI
+	pi.on("agent_end", async (event, ctx) => {
+		if (handlePlanExecutionEnd(ctx)) return;
+		if (!planModeEnabled || !ctx.hasUI) return;
+
+		presentLatestPlan(event.messages);
+		const choice = await ctx.ui.select("Plan mode - what next?", [
+			todoItems.length > 0 ? "Execute the plan (track progress)" : "Execute the plan",
+			"Stay in plan mode",
+			"Refine the plan",
+		]);
+		if (choice?.startsWith("Execute")) {
+			executeCurrentPlan(ctx);
+		} else if (choice === "Refine the plan") {
+			await refineCurrentPlan(ctx);
+		}
+	});
+
+	function restorePlanExecutionProgress(entries: SessionEntry[]): void {
+		let executeIndex = -1;
+		for (let index = entries.length - 1; index >= 0; index--) {
+			const entry = entries[index];
+			if (entry.type === "custom" && entry.customType === "plan-mode-execute") {
+				executeIndex = index;
+				break;
+			}
+		}
+		const messages: AssistantMessage[] = [];
+		for (let index = executeIndex + 1; index < entries.length; index++) {
+			const entry = entries[index];
+			if (entry.type === "message" && isAssistantMessage(entry.message as AgentMessage)) {
+				messages.push(entry.message as AssistantMessage);
+			}
+		}
+		markCompletedSteps(messages.map(getTextContent).join("\n"), todoItems);
+	}
+
+	// Restore state on session start/resume
+	pi.on("session_start", async (_event, ctx) => {
+		if (pi.getFlag("plan") === true) {
+			planModeEnabled = true;
+		}
+
+		const entries = ctx.session.getEntries();
+
+		// Restore persisted state
+		const planModeEntry = entries
+			.filter((entry: SessionEntry) => entry.type === "custom" && entry.customType === "plan-mode")
+			.pop() as { data?: PersistedPlanModeState } | undefined;
+
+		if (planModeEntry?.data) {
+			planModeEnabled = planModeEntry.data.enabled ?? planModeEnabled;
+			todoItems = planModeEntry.data.todos ?? todoItems;
+			executionMode = planModeEntry.data.executing ?? executionMode;
+		}
+
+		// On resume: re-scan messages to rebuild completion state
+		// Only scan messages AFTER the last "plan-mode-execute" to avoid picking up [DONE:n] from previous plans
+		const isResume = planModeEntry !== undefined;
+		if (isResume && executionMode && todoItems.length > 0) {
+			restorePlanExecutionProgress(entries);
+		}
+
+		if (planModeEnabled) {
+			pi.setActiveTools(PLAN_MODE_TOOLS);
+		}
+		updateStatus(ctx);
+	});
+}