@oh-my-pi/pi-tui 18.2.3 → 18.2.5

package/src/overlays/extensions/types.ts

@@ -0,0 +1,208 @@
+/**
+ * Types for the Extension Control Center dashboard.
+ */
+/** Discovery snapshot used by provider controls, independent of the loader. */
+export interface ExtensionProvider {
+	id: string;
+	displayName: string;
+	enabled: boolean;
+	userSourceEnabled: boolean;
+	foreignUserSource: boolean;
+}
+
+/**
+ * Extension kinds matching capability types.
+ */
+export type ExtensionKind =
+	| "extension-module"
+	| "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" | "user-opt-in" | "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. For `kind: "mcp"` this remains the discovered
+	 * `MCPServer` config — live connection state is joined at render time via
+	 * {@link snapshotMcpRuntime}, not stuffed into this bag.
+	 */
+	raw: unknown;
+}
+
+/**
+ * True when this row is a lower-precedence copy of another same-name item.
+ * Disablement takes display precedence (`state === "disabled"`), but the
+ * discovery `_shadowed` flag (and `shadowedBy`) still mark the row as a
+ * loser — it must not be toggleable and must not join the winner's live state.
+ */
+export function isShadowedExtension(ext: Extension): boolean {
+	if (ext.state === "shadowed" || ext.shadowedBy) return true;
+	return Boolean((ext.raw as { _shadowed?: boolean } | null | undefined)?._shadowed);
+}
+
+/**
+ * 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;
+}
+
+/**
+ * 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: Extension["source"]): Extension["source"] {
+	return {
+		provider: meta.provider,
+		providerName: meta.providerName,
+		level: meta.level,
+	};
+}

package/src/overlays/history-search.ts

@@ -0,0 +1,268 @@
+import {
+	type Component,
+	Ellipsis,
+	Input,
+	matchesKey,
+	padding,
+	Spacer,
+	Text,
+	truncateToWidth,
+	visibleWidth,
+} from "../index";
+import { theme } from "../theme/theme";
+import {
+	matchesAppInterrupt,
+	matchesSelectDown,
+	matchesSelectPageDown,
+	matchesSelectPageUp,
+	matchesSelectUp,
+} from "../keybinding-matchers";
+/** Prompt history fields displayed in search results. */
+export interface HistorySearchEntry {
+	prompt: string;
+	created_at: number;
+}
+
+/** Searchable prompt history supplied by the host. */
+export interface HistorySource {
+	search(query: string, limit: number): HistorySearchEntry[];
+	getRecent(limit: number): HistorySearchEntry[];
+}
+import { rawKeyHint } from "../chrome/keybinding-hints";
+import { OverlayPanel } from "../chrome/overlay-box";
+import { contentRowWidth, renderScrollableList } from "../chrome/selector-helpers";
+import { MenuSelection } from "../components/menu-selection";
+import { centeredViewportRange } from "../components/scroll-viewport";
+
+/** Visible result rows; also the jump distance for PageUp/PageDown. */
+const MAX_VISIBLE = 10;
+
+/** Split a query the same way `HistorySource` tokenizes it, so highlights align with matches. */
+function queryTokens(query: string): string[] {
+	return query
+		.toLowerCase()
+		.split(/[^\p{L}\p{N}]+/u)
+		.filter(tok => tok.length > 0);
+}
+
+/** Wrap every case-insensitive occurrence of any token in `text` with the accent color. */
+function highlightTokens(text: string, tokens: string[]): string {
+	if (tokens.length === 0) return text;
+
+	const lower = text.toLowerCase();
+	const ranges: Array<[number, number]> = [];
+	for (const tok of tokens) {
+		let from = lower.indexOf(tok);
+		while (from !== -1) {
+			ranges.push([from, from + tok.length]);
+			from = lower.indexOf(tok, from + tok.length);
+		}
+	}
+	if (ranges.length === 0) return text;
+
+	ranges.sort((a, b) => a[0] - b[0]);
+	let out = "";
+	let pos = 0;
+	for (const [start, end] of ranges) {
+		if (end <= pos) continue; // fully covered by a previous (merged) range
+		const from = Math.max(start, pos);
+		if (from > pos) out += text.slice(pos, from);
+		out += theme.fg("accent", text.slice(from, end));
+		pos = end;
+	}
+	if (pos < text.length) out += text.slice(pos);
+	return out;
+}
+
+/** Compact "time since" label (e.g. `now`, `5m`, `2h`, `3d`, `2w`, `6mo`, `1y`) from epoch seconds. */
+function relativeTime(epochSeconds: number): string {
+	const seconds = Math.max(0, Math.floor(Date.now() / 1000) - epochSeconds);
+	if (seconds < 60) return "now";
+	const minutes = Math.floor(seconds / 60);
+	if (minutes < 60) return `${minutes}m`;
+	const hours = Math.floor(minutes / 60);
+	if (hours < 24) return `${hours}h`;
+	const days = Math.floor(hours / 24);
+	if (days < 7) return `${days}d`;
+	if (days < 30) return `${Math.floor(days / 7)}w`;
+	if (days < 365) return `${Math.floor(days / 30)}mo`;
+	return `${Math.floor(days / 365)}y`;
+}
+
+class HistoryResultsList implements Component {
+	#menu: MenuSelection<HistorySearchEntry>;
+	#tokens: string[] = [];
+	#maxVisible = MAX_VISIBLE;
+
+	constructor(menu: MenuSelection<HistorySearchEntry>) {
+		this.#menu = menu;
+	}
+
+	setTokens(tokens: string[]): void {
+		this.#tokens = tokens;
+	}
+
+	invalidate(): void {
+		// No cached state to invalidate currently
+	}
+
+	render(width: number): readonly string[] {
+		const lines: string[] = [];
+		const items = this.#menu.visibleItems;
+
+		if (items.length === 0) {
+			const message = this.#tokens.length > 0 ? "No matching history" : "No history yet";
+			lines.push(theme.fg("muted", `  ${theme.status.info} ${message}`));
+			return lines;
+		}
+
+		const cursorSymbol = `${theme.nav.cursor} `;
+		const gutterWidth = visibleWidth(cursorSymbol);
+
+		const { start: startIndex, end: endIndex } = centeredViewportRange(
+			this.#menu.selectedIndex,
+			items.length,
+			this.#maxVisible,
+		);
+
+		const rowWidth = contentRowWidth(width, items.length, this.#maxVisible);
+		const rows: string[] = [];
+
+		for (let i = startIndex; i < endIndex; i++) {
+			const entry = items[i];
+			if (!entry) continue;
+			const isSelected = i === this.#menu.selectedIndex;
+
+			const timeStr = relativeTime(entry.created_at);
+			const timeWidth = visibleWidth(timeStr);
+			const showTime = rowWidth >= gutterWidth + 12 + timeWidth;
+
+			const promptBudget = Math.max(4, rowWidth - gutterWidth - (showTime ? timeWidth + 1 : 0));
+			const normalized = entry.prompt.replace(/\s+/g, " ").trim();
+			const plain = truncateToWidth(normalized, promptBudget);
+			const highlighted = highlightTokens(plain, this.#tokens);
+
+			const cursor = isSelected ? theme.fg("accent", cursorSymbol) : padding(gutterWidth);
+			let line = cursor + (isSelected ? theme.bold(highlighted) : highlighted);
+
+			if (showTime) {
+				// Pad the prompt region so the timestamp sits flush right with a one-cell gap.
+				line = `${truncateToWidth(line, rowWidth - timeWidth - 1, Ellipsis.Unicode, true)} ${theme.fg("dim", timeStr)}`;
+			}
+
+			rows.push(
+				isSelected
+					? theme.bg("selectedBg", truncateToWidth(line, rowWidth, Ellipsis.Omit, true))
+					: truncateToWidth(line, rowWidth),
+			);
+		}
+
+		lines.push(...renderScrollableList(rows, { width, totalRows: items.length, scrollOffset: startIndex }));
+		return lines;
+	}
+}
+
+export class HistorySearchComponent extends OverlayPanel {
+	#historyStorage: HistorySource;
+	#searchInput: Input;
+	#menu: MenuSelection<HistorySearchEntry>;
+	#resultsList: HistoryResultsList;
+	#onSelect: (prompt: string) => void;
+	#onCancel: () => void;
+	#resultLimit = 100;
+
+	constructor(historyStorage: HistorySource, onSelect: (prompt: string) => void, onCancel: () => void) {
+		super("History");
+		this.#historyStorage = historyStorage;
+		this.#onSelect = onSelect;
+		this.#onCancel = onCancel;
+
+		this.#menu = new MenuSelection<HistorySearchEntry>([], {
+			getKey: entry => `${entry.created_at}:${entry.prompt}`,
+			getSearchText: entry => entry.prompt,
+		});
+		this.#searchInput = new Input();
+		this.#searchInput.onSubmit = () => {
+			const selected = this.#menu.selectedItem;
+			if (selected) {
+				this.#onSelect(selected.prompt);
+			}
+		};
+		this.#searchInput.onEscape = () => {
+			this.#onCancel();
+		};
+
+		this.#resultsList = new HistoryResultsList(this.#menu);
+
+		const dot = theme.fg("dim", theme.sep.dot);
+		const hint = [rawKeyHint("↑↓", "navigate"), rawKeyHint("enter", "select"), rawKeyHint("esc", "cancel")].join(dot);
+
+		this.addChild(new Spacer(1));
+		this.addChild(this.#searchInput);
+		this.addChild(new Spacer(1));
+		this.addChild(this.#resultsList);
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(hint, 0, 0));
+		this.addChild(new Spacer(1));
+
+		this.#updateResults();
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesSelectUp(keyData)) {
+			this.#menu.move(-1, false);
+			return;
+		}
+
+		if (matchesSelectDown(keyData)) {
+			this.#menu.move(1, false);
+			return;
+		}
+
+		if (matchesSelectPageUp(keyData)) {
+			this.#menu.move(-MAX_VISIBLE, false);
+			return;
+		}
+
+		if (matchesSelectPageDown(keyData)) {
+			this.#menu.move(MAX_VISIBLE, false);
+			return;
+		}
+
+		if (matchesKey(keyData, "home")) {
+			this.#menu.moveToBoundary("first");
+			return;
+		}
+
+		if (matchesKey(keyData, "end")) {
+			this.#menu.moveToBoundary("last");
+			return;
+		}
+
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			const selected = this.#menu.selectedItem;
+			if (selected) {
+				this.#onSelect(selected.prompt);
+			}
+			return;
+		}
+
+		if (matchesAppInterrupt(keyData)) {
+			this.#onCancel();
+			return;
+		}
+
+		this.#searchInput.handleInput(keyData);
+		this.#updateResults();
+	}
+
+	#updateResults(): void {
+		const query = this.#searchInput.getValue().trim();
+		const results = query
+			? this.#historyStorage.search(query, this.#resultLimit)
+			: this.#historyStorage.getRecent(this.#resultLimit);
+		this.#menu.setItems(results);
+		this.#menu.moveToBoundary("first");
+		this.#resultsList.setTokens(query ? queryTokens(query) : []);
+	}
+}