@oh-my-pi/pi-coding-agent 0.1.0

package/src/modes/interactive/components/extensions/types.ts

@@ -0,0 +1,191 @@
+/**
+ * Types for the Extension Control Center dashboard.
+ */
+
+import type { SourceMeta } from "../../../../capability/types";
+
+/**
+ * Extension kinds matching capability types.
+ */
+export type ExtensionKind =
+	| "skill"
+	| "rule"
+	| "tool"
+	| "mcp"
+	| "prompt"
+	| "instruction"
+	| "context-file"
+	| "hook"
+	| "slash-command";
+
+/**
+ * Extension state (active, disabled, or shadowed).
+ */
+export type ExtensionState = "active" | "disabled" | "shadowed";
+
+/**
+ * Reason why an extension is disabled.
+ */
+export type DisabledReason = "provider-disabled" | "item-disabled" | "shadowed";
+
+/**
+ * Unified extension representation for the dashboard.
+ * Normalizes all capability types into a common shape.
+ */
+export interface Extension {
+	/** Unique ID: `${kind}:${name}` */
+	id: string;
+	/** Extension kind */
+	kind: ExtensionKind;
+	/** Extension name */
+	name: string;
+	/** Display name (may differ from name) */
+	displayName: string;
+	/** Description if available */
+	description?: string;
+	/** Trigger pattern (slash command, glob, regex) */
+	trigger?: string;
+	/** Absolute path to source file */
+	path: string;
+	/** Source metadata */
+	source: {
+		provider: string;
+		providerName: string;
+		level: "user" | "project" | "native";
+	};
+	/** Current state */
+	state: ExtensionState;
+	/** Reason for disabled state */
+	disabledReason?: DisabledReason;
+	/** If shadowed, what shadows it */
+	shadowedBy?: string;
+	/** Raw item data for inspector */
+	raw: unknown;
+}
+
+/**
+ * Tree node types for sidebar hierarchy.
+ */
+export type TreeNodeType = "provider" | "kind" | "item";
+
+/**
+ * Sidebar tree node.
+ */
+export interface TreeNode {
+	/** Unique ID */
+	id: string;
+	/** Display label */
+	label: string;
+	/** Node type (provider can be toggled, kind groups items) */
+	type: TreeNodeType;
+	/** Whether this node/provider is enabled */
+	enabled: boolean;
+	/** Whether collapsed */
+	collapsed: boolean;
+	/** Child nodes */
+	children: TreeNode[];
+	/** Extension count (for display) */
+	count?: number;
+}
+
+/**
+ * Flattened tree item for navigation.
+ */
+export interface FlatTreeItem {
+	node: TreeNode;
+	depth: number;
+	index: number;
+}
+
+/**
+ * Focus region in the tabbed dashboard.
+ */
+export type FocusRegion = "tabs" | "list";
+
+/**
+ * Provider tab representation.
+ */
+export interface ProviderTab {
+	/** Provider ID (or "all" for the ALL tab) */
+	id: string;
+	/** Display label */
+	label: string;
+	/** Whether provider is enabled (always true for "all") */
+	enabled: boolean;
+	/** Extension count for this provider */
+	count: number;
+}
+
+/**
+ * Tabbed dashboard state.
+ */
+export interface DashboardState {
+	/** Provider tabs */
+	tabs: ProviderTab[];
+	/** Active tab index */
+	activeTabIndex: number;
+
+	/** All extensions (unfiltered) */
+	extensions: Extension[];
+	/** Extensions filtered by active tab */
+	tabFiltered: Extension[];
+	/** Extensions filtered by search (applied after tab filter) */
+	searchFiltered: Extension[];
+	/** Current search query */
+	searchQuery: string;
+
+	/** Selected index in main list */
+	listIndex: number;
+	/** Scroll offset for main list */
+	scrollOffset: number;
+
+	/** Currently selected extension for inspector */
+	selected: Extension | null;
+}
+
+/**
+ * @deprecated Use FocusRegion instead
+ */
+export type FocusPane = "sidebar" | "main" | "inspector";
+
+/**
+ * Callbacks from dashboard to parent.
+ */
+export interface DashboardCallbacks {
+	/** Called when provider is toggled */
+	onProviderToggle: (providerId: string, enabled: boolean) => void;
+	/** Called when extension item is toggled */
+	onExtensionToggle: (extensionId: string, enabled: boolean) => void;
+	/** Called when dashboard is closed */
+	onClose: () => void;
+}
+
+/**
+ * Create extension ID from kind and name.
+ */
+export function makeExtensionId(kind: ExtensionKind, name: string): string {
+	return `${kind}:${name}`;
+}
+
+/**
+ * Parse extension ID into kind and name.
+ */
+export function parseExtensionId(id: string): { kind: ExtensionKind; name: string } | null {
+	const colonIdx = id.indexOf(":");
+	if (colonIdx === -1) return null;
+	return {
+		kind: id.slice(0, colonIdx) as ExtensionKind,
+		name: id.slice(colonIdx + 1),
+	};
+}
+
+/**
+ * Map SourceMeta to extension source shape.
+ */
+export function sourceFromMeta(meta: SourceMeta): Extension["source"] {
+	return {
+		provider: meta.provider,
+		providerName: meta.providerName,
+		level: meta.level,
+	};
+}

package/src/modes/interactive/components/hook-editor.ts

@@ -0,0 +1,117 @@
+/**
+ * Multi-line editor component for hooks.
+ * Supports Ctrl+G for external editor.
+ */
+
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+import { Container, Editor, isCtrlG, isEscape, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
+import { getEditorTheme, theme } from "../theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+export class HookEditorComponent extends Container {
+	private editor: Editor;
+	private onSubmitCallback: (value: string) => void;
+	private onCancelCallback: () => void;
+	private tui: TUI;
+
+	constructor(
+		tui: TUI,
+		title: string,
+		prefill: string | undefined,
+		onSubmit: (value: string) => void,
+		onCancel: () => void,
+	) {
+		super();
+
+		this.tui = tui;
+		this.onSubmitCallback = onSubmit;
+		this.onCancelCallback = onCancel;
+
+		// Add top border
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+
+		// Add title
+		this.addChild(new Text(theme.fg("accent", title), 1, 0));
+		this.addChild(new Spacer(1));
+
+		// Create editor
+		this.editor = new Editor(getEditorTheme());
+		if (prefill) {
+			this.editor.setText(prefill);
+		}
+		this.addChild(this.editor);
+
+		this.addChild(new Spacer(1));
+
+		// Add hint
+		const hasExternalEditor = !!(process.env.VISUAL || process.env.EDITOR);
+		const hint = hasExternalEditor
+			? "ctrl+enter submit  esc cancel  ctrl+g external editor"
+			: "ctrl+enter submit  esc cancel";
+		this.addChild(new Text(theme.fg("dim", hint), 1, 0));
+
+		this.addChild(new Spacer(1));
+
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	handleInput(keyData: string): void {
+		// Ctrl+Enter to submit
+		if (keyData === "\x1b[13;5u" || keyData === "\x1b[27;5;13~") {
+			this.onSubmitCallback(this.editor.getText());
+			return;
+		}
+
+		// Escape to cancel
+		if (isEscape(keyData)) {
+			this.onCancelCallback();
+			return;
+		}
+
+		// Ctrl+G for external editor
+		if (isCtrlG(keyData)) {
+			this.openExternalEditor();
+			return;
+		}
+
+		// Forward to editor
+		this.editor.handleInput(keyData);
+	}
+
+	private openExternalEditor(): void {
+		const editorCmd = process.env.VISUAL || process.env.EDITOR;
+		if (!editorCmd) {
+			return;
+		}
+
+		const currentText = this.editor.getText();
+		const tmpFile = path.join(os.tmpdir(), `omp-hook-editor-${Date.now()}.md`);
+
+		try {
+			fs.writeFileSync(tmpFile, currentText, "utf-8");
+			this.tui.stop();
+
+			const [editor, ...editorArgs] = editorCmd.split(" ");
+			const result = Bun.spawnSync([editor, ...editorArgs, tmpFile], {
+				stdio: ["inherit", "inherit", "inherit"],
+			});
+
+			if (result.exitCode === 0) {
+				const newContent = fs.readFileSync(tmpFile, "utf-8").replace(/\n$/, "");
+				this.editor.setText(newContent);
+			}
+		} finally {
+			try {
+				fs.unlinkSync(tmpFile);
+			} catch {
+				// Ignore cleanup errors
+			}
+			this.tui.start();
+			this.tui.requestRender();
+		}
+	}
+}

package/src/modes/interactive/components/hook-input.ts

@@ -0,0 +1,64 @@
+/**
+ * Simple text input component for hooks.
+ */
+
+import { Container, Input, isEnter, isEscape, Spacer, Text } from "@oh-my-pi/pi-tui";
+import { theme } from "../theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+export class HookInputComponent extends Container {
+	private input: Input;
+	private onSubmitCallback: (value: string) => void;
+	private onCancelCallback: () => void;
+
+	constructor(
+		title: string,
+		_placeholder: string | undefined,
+		onSubmit: (value: string) => void,
+		onCancel: () => void,
+	) {
+		super();
+
+		this.onSubmitCallback = onSubmit;
+		this.onCancelCallback = onCancel;
+
+		// Add top border
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+
+		// Add title
+		this.addChild(new Text(theme.fg("accent", title), 1, 0));
+		this.addChild(new Spacer(1));
+
+		// Create input
+		this.input = new Input();
+		this.addChild(this.input);
+
+		this.addChild(new Spacer(1));
+
+		// Add hint
+		this.addChild(new Text(theme.fg("dim", "enter submit  esc cancel"), 1, 0));
+
+		this.addChild(new Spacer(1));
+
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	handleInput(keyData: string): void {
+		// Enter
+		if (isEnter(keyData) || keyData === "\n") {
+			this.onSubmitCallback(this.input.getValue());
+			return;
+		}
+
+		// Escape to cancel
+		if (isEscape(keyData)) {
+			this.onCancelCallback();
+			return;
+		}
+
+		// Forward to input
+		this.input.handleInput(keyData);
+	}
+}

package/src/modes/interactive/components/hook-message.ts

@@ -0,0 +1,96 @@
+import type { TextContent } from "@oh-my-pi/pi-ai";
+import type { Component } from "@oh-my-pi/pi-tui";
+import { Box, Container, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import type { HookMessageRenderer } from "../../../core/hooks/types";
+import type { HookMessage } from "../../../core/messages";
+import { getMarkdownTheme, theme } from "../theme/theme";
+
+/**
+ * Component that renders a custom message entry from hooks.
+ * Uses distinct styling to differentiate from user messages.
+ */
+export class HookMessageComponent extends Container {
+	private message: HookMessage<unknown>;
+	private customRenderer?: HookMessageRenderer;
+	private box: Box;
+	private customComponent?: Component;
+	private _expanded = false;
+
+	constructor(message: HookMessage<unknown>, customRenderer?: HookMessageRenderer) {
+		super();
+		this.message = message;
+		this.customRenderer = customRenderer;
+
+		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.rebuild();
+	}
+
+	setExpanded(expanded: boolean): void {
+		if (this._expanded !== expanded) {
+			this._expanded = expanded;
+			this.rebuild();
+		}
+	}
+
+	private rebuild(): 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");
+		}
+
+		// Limit lines when collapsed
+		if (!this._expanded) {
+			const lines = text.split("\n");
+			if (lines.length > 5) {
+				text = `${lines.slice(0, 5).join("\n")}\n${theme.format.ellipsis}`;
+			}
+		}
+
+		this.box.addChild(
+			new Markdown(text, 0, 0, getMarkdownTheme(), {
+				color: (text: string) => theme.fg("customMessageText", text),
+			}),
+		);
+	}
+}

package/src/modes/interactive/components/hook-selector.ts

@@ -0,0 +1,91 @@
+/**
+ * Generic selector component for hooks.
+ * Displays a list of string options with keyboard navigation.
+ */
+
+import { Container, isArrowDown, isArrowUp, isEnter, isEscape, Spacer, Text } from "@oh-my-pi/pi-tui";
+import { theme } from "../theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+export class HookSelectorComponent extends Container {
+	private options: string[];
+	private selectedIndex = 0;
+	private listContainer: Container;
+	private onSelectCallback: (option: string) => void;
+	private onCancelCallback: () => void;
+
+	constructor(title: string, options: string[], onSelect: (option: string) => void, onCancel: () => void) {
+		super();
+
+		this.options = options;
+		this.onSelectCallback = onSelect;
+		this.onCancelCallback = onCancel;
+
+		// Add top border
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+
+		// Add title
+		this.addChild(new Text(theme.fg("accent", title), 1, 0));
+		this.addChild(new Spacer(1));
+
+		// Create list container
+		this.listContainer = new Container();
+		this.addChild(this.listContainer);
+
+		this.addChild(new Spacer(1));
+
+		// Add hint
+		this.addChild(new Text(theme.fg("dim", "↑↓ navigate  enter select  esc cancel"), 1, 0));
+
+		this.addChild(new Spacer(1));
+
+		// Add bottom border
+		this.addChild(new DynamicBorder());
+
+		// Initial render
+		this.updateList();
+	}
+
+	private updateList(): void {
+		this.listContainer.clear();
+
+		for (let i = 0; i < this.options.length; i++) {
+			const option = this.options[i];
+			const isSelected = i === this.selectedIndex;
+
+			let text = "";
+			if (isSelected) {
+				text = theme.fg("accent", `${theme.nav.cursor} `) + theme.fg("accent", option);
+			} else {
+				text = `  ${theme.fg("text", option)}`;
+			}
+
+			this.listContainer.addChild(new Text(text, 1, 0));
+		}
+	}
+
+	handleInput(keyData: string): void {
+		// Up arrow or k
+		if (isArrowUp(keyData) || keyData === "k") {
+			this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+			this.updateList();
+		}
+		// Down arrow or j
+		else if (isArrowDown(keyData) || keyData === "j") {
+			this.selectedIndex = Math.min(this.options.length - 1, this.selectedIndex + 1);
+			this.updateList();
+		}
+		// Enter
+		else if (isEnter(keyData) || keyData === "\n") {
+			const selected = this.options[this.selectedIndex];
+			if (selected) {
+				this.onSelectCallback(selected);
+			}
+		}
+		// Escape
+		else if (isEscape(keyData)) {
+			this.onCancelCallback();
+		}
+	}
+}