pi-cliproxyapi 0.1.2 → 0.2.0

package/src/ui-picker/picker.ts

@@ -0,0 +1,247 @@
+// Three-panel picker: state, navigation, render, input dispatch.
+//
+// Layout (drawn by render()):
+//   \u250c\u2500 providers \u2500\u252c\u2500 assigned to <prov> \u2500\u2510
+//   \u2502 list ...     \u2502 list ...               \u2502
+//   \u2502              \u251c\u2500 available pool \u2500\u2500\u2500\u2500\u2500\u2524
+//   \u2502              \u2502 grouped by owned_by   \u2502
+//   \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
+
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import {
+	type Component,
+	getKeybindings,
+	matchesKey,
+	visibleWidth,
+} from "@earendil-works/pi-tui";
+
+import type { ProxyConfig } from "../config.ts";
+import type { Discovery } from "../fetch-models.ts";
+import { buildCatalog } from "./catalog.ts";
+import {
+	apiCompatible,
+	assignedIdsFor,
+	attachModel,
+	detachModel,
+	groupPoolByOwnedBy,
+	poolFor,
+} from "./mutate.ts";
+import { collectProviders } from "./providers.ts";
+import { confirmRemoveProvider } from "./prompt-confirm.ts";
+import { promptNewProviderName } from "./prompt-name.ts";
+import { pad } from "./render-text.ts";
+import {
+	renderEmpty,
+	renderModelRow,
+	renderNewProviderRow,
+	renderPanelHeader,
+	renderProviderRow,
+	renderSubheader,
+} from "./rows.ts";
+import type {
+	CatalogIndex,
+	OverlayTui,
+	PanelId,
+	ProviderEntry,
+	Theme,
+} from "./types.ts";
+
+interface RightRow {
+	kind: "header" | "sub" | "model" | "empty";
+	label?: string;
+	// model fields
+	id?: string;
+	side?: "assigned" | "pool";
+	compatWarn?: boolean;
+	/** index into the linear cursor list (skipping non-cursor rows). */
+	cursorIdx?: number;
+}
+
+export function buildPicker(
+	tui: OverlayTui,
+	theme: Theme,
+	cfg: ProxyConfig,
+	discovery: Discovery,
+	ctx: ExtensionCommandContext,
+	done: (v: ProxyConfig | null) => void,
+): Component & { handleInput(data: string): void } {
+	const catalog: CatalogIndex = buildCatalog(discovery);
+	let providers: ProviderEntry[] = collectProviders(cfg, catalog);
+
+	let focus: PanelId = "providers";
+	let providerCursor = 0;
+	let assignedCursor = 0;
+	let poolCursor = 0;
+	let providerScroll = 0;
+	let assignedScroll = 0;
+	let poolScroll = 0;
+	const finish = (result: ProxyConfig | null): void => {
+		done(result);
+	};
+
+	const selectedProvider = (): ProviderEntry | null => {
+		if (providers.length === 0) return null;
+		const idx = Math.max(0, Math.min(providerCursor, providers.length - 1));
+		return providers[idx] ?? null;
+	};
+
+	const refresh = (): void => {
+		providers = collectProviders(cfg, catalog);
+		const maxProv = Math.max(0, providers.length); // +1 for "+ new" pseudo row
+		if (providerCursor > maxProv) providerCursor = maxProv;
+		const prov = selectedProvider();
+		if (prov) {
+			const aLen = assignedIdsFor(cfg, prov).length;
+			const pLen = poolFor(cfg, prov, catalog).length;
+			if (assignedCursor >= aLen) assignedCursor = Math.max(0, aLen - 1);
+			if (poolCursor >= pLen) poolCursor = Math.max(0, pLen - 1);
+		}
+	};
+
+	const ensureVisible = (
+		cursor: number,
+		scroll: number,
+		visible: number,
+	): number => {
+		if (cursor < scroll) return cursor;
+		if (cursor >= scroll + visible) return cursor - visible + 1;
+		return Math.max(0, scroll);
+	};
+
+	const onTab = (back: boolean): void => {
+		const order: PanelId[] = ["providers", "assigned", "pool"];
+		const i = order.indexOf(focus);
+		focus = back
+			? order[(i - 1 + order.length) % order.length]!
+			: order[(i + 1) % order.length]!;
+	};
+
+	const moveCursor = (delta: number): void => {
+		if (focus === "providers") {
+			const total = providers.length + 1; // +1 for "+ new" pseudo row
+			providerCursor = Math.max(0, Math.min(providerCursor + delta, total - 1));
+			return;
+		}
+		const prov = selectedProvider();
+		if (!prov) return;
+		if (focus === "assigned") {
+			const total = assignedIdsFor(cfg, prov).length;
+			if (total === 0) return;
+			assignedCursor = Math.max(0, Math.min(assignedCursor + delta, total - 1));
+			return;
+		}
+		const total = poolFor(cfg, prov, catalog).length;
+		if (total === 0) return;
+		poolCursor = Math.max(0, Math.min(poolCursor + delta, total - 1));
+	};
+
+	const onActivate = async (): Promise<void> => {
+		if (focus === "providers") {
+			if (providerCursor === providers.length) {
+				const name = await promptNewProviderName(ctx, cfg.proxy.providerPrefix);
+				if (name && !cfg.customProviders[name]) {
+					cfg.customProviders[name] = { api: "openai-completions", models: [] };
+					refresh();
+					providerCursor = providers.findIndex(
+						(p) => p.kind === "custom" && p.name === name,
+					);
+					if (providerCursor < 0) providerCursor = providers.length - 1;
+					focus = "pool";
+				}
+				tui.requestRender();
+				return;
+			}
+			focus = "pool";
+			return;
+		}
+		const prov = selectedProvider();
+		if (!prov) return;
+		if (focus === "assigned") {
+			const ids = assignedIdsFor(cfg, prov);
+			const id = ids[assignedCursor];
+			if (!id) return;
+			detachModel(cfg, prov, id);
+			refresh();
+			return;
+		}
+		const ids = poolFor(cfg, prov, catalog);
+		const id = ids[poolCursor];
+		if (!id) return;
+		const m = catalog.byId.get(id);
+		if (!m) return;
+		attachModel(cfg, prov, m);
+		refresh();
+	};
+
+	const onDelete = async (): Promise<void> => {
+		if (focus !== "providers") return;
+		const prov = selectedProvider();
+		if (!prov || prov.kind !== "custom") return;
+		const ok = await confirmRemoveProvider(ctx, prov.name);
+		if (!ok) {
+			tui.requestRender();
+			return;
+		}
+		delete cfg.customProviders[prov.name];
+		refresh();
+		if (providerCursor >= providers.length)
+			providerCursor = Math.max(0, providers.length - 1);
+		tui.requestRender();
+	};
+
+	// Render and input split into the second half of the file.
+	return assembleComponent({
+		tui,
+		theme,
+		cfg,
+		catalog,
+		getProviders: () => providers,
+		getFocus: () => focus,
+		setFocus: (f: PanelId) => {
+			focus = f;
+		},
+		getProviderCursor: () => providerCursor,
+		getAssignedCursor: () => assignedCursor,
+		getPoolCursor: () => poolCursor,
+		getProviderScroll: () => providerScroll,
+		setProviderScroll: (v: number) => {
+			providerScroll = v;
+		},
+		getAssignedScroll: () => assignedScroll,
+		setAssignedScroll: (v: number) => {
+			assignedScroll = v;
+		},
+		getPoolScroll: () => poolScroll,
+		setPoolScroll: (v: number) => {
+			poolScroll = v;
+		},
+		selectedProvider,
+		moveCursor,
+		onTab,
+		onActivate,
+		onDelete,
+		ensureVisible,
+		finish,
+		apiCompatible,
+		poolGrouper: (ids: string[]) => groupPoolByOwnedBy(ids, catalog),
+		assignedIdsFor: (p: ProviderEntry) => assignedIdsFor(cfg, p),
+		poolFor: (p: ProviderEntry) => poolFor(cfg, p, catalog),
+	});
+}
+
+// The component assembly (render + input) lives next-door to keep this file
+// readable. We import it lazily to dodge circular imports.
+import { assembleComponent } from "./picker-component.ts";
+// Re-export helpers used by the component file (avoid duplicate imports).
+export {
+	pad,
+	renderEmpty,
+	renderModelRow,
+	renderNewProviderRow,
+	renderPanelHeader,
+	renderProviderRow,
+	renderSubheader,
+	visibleWidth,
+};
+export type { RightRow };
+export { matchesKey, getKeybindings };

package/src/ui-picker/prompt-confirm.ts

@@ -0,0 +1,71 @@
+// Confirm-remove prompt overlay used when the user deletes a custom group.
+
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import {
+	type Component,
+	getKeybindings,
+	matchesKey,
+} from "@earendil-works/pi-tui";
+
+import { frame } from "../ui-frame.ts";
+import type { Theme } from "./types.ts";
+
+export async function confirmRemoveProvider(
+	ctx: ExtensionCommandContext,
+	slug: string,
+): Promise<boolean> {
+	return ctx.ui.custom<boolean>(
+		(_tui, theme, _kb, done) =>
+			buildConfirmPrompt(
+				theme as unknown as Theme,
+				`Remove custom group \u201c${slug}\u201d?`,
+				"All model assignments in this group will be discarded.",
+				done,
+			),
+		{ overlay: true, overlayOptions: { width: 80, maxHeight: "40%" } },
+	);
+}
+
+function buildConfirmPrompt(
+	theme: Theme,
+	title: string,
+	body: string,
+	done: (v: boolean) => void,
+): Component & { handleInput(data: string): void } {
+	return {
+		render(width: number): string[] {
+			return frame(theme, {
+				width,
+				title: " confirm ",
+				titleColor: "error",
+				lines: ["", ` ${theme.bold(title)}`, ` ${theme.fg("dim", body)}`, ""],
+				footer: {
+					hint: " y / enter = remove  \u00b7  n / esc = cancel ",
+				},
+			});
+		},
+		invalidate(): void {
+			/* stateless */
+		},
+		handleInput(data: string): void {
+			const kb = getKeybindings();
+			if (
+				kb.matches(data, "tui.select.cancel") ||
+				matchesKey(data, "escape") ||
+				matchesKey(data, "n") ||
+				matchesKey(data, "q")
+			) {
+				done(false);
+				return;
+			}
+			if (
+				matchesKey(data, "y") ||
+				matchesKey(data, "enter") ||
+				matchesKey(data, "return")
+			) {
+				done(true);
+				return;
+			}
+		},
+	};
+}

package/src/ui-picker/prompt-name.ts

@@ -0,0 +1,90 @@
+// "+ new custom group" prompt overlay.
+
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import {
+	type Component,
+	getKeybindings,
+	Input,
+	matchesKey,
+} from "@earendil-works/pi-tui";
+
+import { withProviderPrefix } from "../compat.ts";
+import { frame, frameInner } from "../ui-frame.ts";
+import type { Theme } from "./types.ts";
+
+export async function promptNewProviderName(
+	ctx: ExtensionCommandContext,
+	prefix: string | undefined,
+): Promise<string | null> {
+	const suggestion = withProviderPrefix(prefix, "group");
+	return ctx.ui.custom<string | null>(
+		(tui, theme, _kb, done) =>
+			buildNamePrompt(
+				tui as unknown as { requestRender(): void },
+				theme as unknown as Theme,
+				suggestion,
+				done,
+			),
+		{ overlay: true, overlayOptions: { width: 80, maxHeight: "40%" } },
+	);
+}
+
+function buildNamePrompt(
+	tui: { requestRender(): void },
+	theme: Theme,
+	suggestion: string,
+	done: (v: string | null) => void,
+): Component & { handleInput(data: string): void } {
+	const input = new Input();
+	if (suggestion) input.setValue(suggestion);
+	input.focused = true;
+	let error: string | null = null;
+
+	input.onSubmit = (raw) => {
+		const v = raw.trim();
+		if (!/^[a-z0-9][a-z0-9._-]*$/i.test(v)) {
+			error = "letters / digits / dot / dash / underscore only";
+			tui.requestRender();
+			return;
+		}
+		done(v);
+	};
+	input.onEscape = () => done(null);
+
+	return {
+		render(width: number): string[] {
+			const inner = frameInner(width);
+			const hint = suggestion
+				? `name shown in /model picker, e.g. ${suggestion}`
+				: "letters / digits / dot / dash / underscore";
+			const inputLines = input.render(inner - 4);
+			const lines: string[] = [
+				"",
+				` ${theme.fg("dim", hint)}`,
+				"",
+				...inputLines.map((ln) => ` ${theme.fg("accent", `\u276f ${ln}`)}`),
+				"",
+				error ? ` ${theme.fg("error", `! ${error}`)}` : "",
+			];
+			return frame(theme, {
+				width,
+				title: " new custom group ",
+				lines,
+				footer: { hint: " enter = create  \u00b7  esc = cancel " },
+			});
+		},
+		invalidate(): void {
+			input.invalidate();
+		},
+		handleInput(data: string): void {
+			const kb = getKeybindings();
+			if (kb.matches(data, "tui.select.cancel") || matchesKey(data, "escape")) {
+				done(null);
+				return;
+			}
+			error = null;
+			input.handleInput(data);
+			tui.requestRender();
+		},
+	};
+}

package/src/ui-picker/providers.ts

@@ -0,0 +1,68 @@
+// Resolve the list of providers shown in the left panel. The union covers:
+//   - every built-in provider that the proxy offers AND/OR pi-ai knows
+//     about (so a newly-released provider that's not in the local catalog
+//     still surfaces);
+//   - every custom group already declared in the user's config.
+
+import type { Api } from "@earendil-works/pi-ai";
+import { getModels, getProviders } from "@earendil-works/pi-ai";
+
+import type { ProxyConfig } from "../config.ts";
+import type { CatalogIndex, ProviderEntry } from "./types.ts";
+
+export function collectProviders(
+	cfg: ProxyConfig,
+	catalog: CatalogIndex,
+): ProviderEntry[] {
+	const out: ProviderEntry[] = [];
+
+	const proxyProviderNames = new Set<string>(catalog.builtinModelIds.keys());
+	const knownPiAiProviders = new Set<string>(getProviders());
+	const builtinNames = new Set<string>([
+		...proxyProviderNames,
+		...knownPiAiProviders,
+	]);
+
+	for (const name of Array.from(builtinNames).sort()) {
+		const proxyIds = catalog.builtinModelIds.get(name);
+		if (!proxyIds || proxyIds.length === 0) continue;
+
+		// Pick the API: pi-ai catalog first, then proxy hint.
+		let api: Api | undefined;
+		try {
+			const localModels = getModels(name as Parameters<typeof getModels>[0]);
+			const hit = localModels.find((m) => proxyIds.includes(m.id));
+			if (hit) api = hit.api as Api;
+		} catch {
+			/* unknown provider in pi-ai \u2014 fall back to proxy hint */
+		}
+		if (!api) {
+			const firstId = proxyIds[0]!;
+			api = catalog.byId.get(firstId)?.suggestedApi ?? "openai-responses";
+		}
+
+		out.push({
+			kind: "builtin",
+			name,
+			api,
+			subtitle: `built-in \u00b7 ${api}`,
+		});
+
+		// Make sure config has a slot so state tracking is straightforward.
+		if (!cfg.builtinProviders[name]) {
+			cfg.builtinProviders[name] = { enabled: false, models: [] };
+		}
+	}
+
+	for (const slug of Object.keys(cfg.customProviders).sort()) {
+		const p = cfg.customProviders[slug]!;
+		out.push({
+			kind: "custom",
+			name: slug,
+			api: p.api,
+			subtitle: `custom \u00b7 ${p.api}`,
+		});
+	}
+
+	return out;
+}

package/src/ui-picker/render-text.ts

@@ -0,0 +1,39 @@
+// Low-level text utilities. Everything here is pure and ANSI-aware.
+
+import { visibleWidth } from "@earendil-works/pi-tui";
+
+/** Pad a possibly-ANSI string to exactly `width` cells, truncating if needed. */
+export function pad(s: string, width: number): string {
+	const w = visibleWidth(s);
+	if (w === width) return s;
+	if (w < width) return s + " ".repeat(width - w);
+	return truncateAnsi(s, width);
+}
+
+/**
+ * Clip an ANSI-coloured string to `width` visible cells. SGR escapes pass
+ * through; a final reset is appended so trailing colour state does not bleed.
+ */
+export function truncateAnsi(s: string, width: number): string {
+	if (width <= 0) return "\x1b[0m";
+	let out = "";
+	let visible = 0;
+	let i = 0;
+	while (i < s.length) {
+		const ch = s[i]!;
+		if (ch === "\x1b" && s[i + 1] === "[") {
+			const end = s.indexOf("m", i + 2);
+			if (end >= 0) {
+				out += s.slice(i, end + 1);
+				i = end + 1;
+				continue;
+			}
+		}
+		const w = visibleWidth(ch);
+		if (visible + w > width) break;
+		out += ch;
+		visible += w;
+		i++;
+	}
+	return `${out}\x1b[0m`;
+}

package/src/ui-picker/rows.ts

@@ -0,0 +1,151 @@
+// Row renderers for left + right panels. Each function returns a string that
+// is guaranteed to fit into `width` visible cells (via marquee on the focused
+// row, and pad/truncate otherwise).
+//
+// The renderers also draw the cursor differently for the active panel
+// (\u25b6 accent) vs an inactive panel where the cursor row is highlighted
+// but more muted (\u00b7 dim) \u2014 this gives users a hint where focus is
+// without losing track of selection across panels.
+
+import { visibleWidth } from "@earendil-works/pi-tui";
+
+import type { ProxyConfig } from "../config.ts";
+import { pad, truncateAnsi } from "./render-text.ts";
+import type { ModelEntry, ProviderEntry, Theme } from "./types.ts";
+
+interface RowCtx {
+	theme: Theme;
+	width: number;
+	isCursor: boolean;
+	isFocused: boolean;
+}
+
+function cursorMark(
+	theme: Theme,
+	isCursor: boolean,
+	isFocused: boolean,
+): string {
+	if (!isCursor) return "  ";
+	if (isFocused) return theme.fg("accent", "\u25b6 ");
+	return theme.fg("muted", "\u25b8 ");
+}
+
+function fitLine(line: string, width: number): string {
+	const w = visibleWidth(line);
+	if (w === width) return line;
+	if (w > width) return truncateAnsi(line, width);
+	return pad(line, width);
+}
+
+// --------------------------------------------------------------------------- left panel rows
+
+export function renderProviderRow(
+	p: ProviderEntry,
+	cfg: ProxyConfig,
+	ctx: RowCtx,
+): string {
+	const { theme, width, isCursor, isFocused } = ctx;
+	const mark = cursorMark(theme, isCursor, isFocused);
+	const count =
+		p.kind === "builtin"
+			? (cfg.builtinProviders[p.name]?.models.length ?? 0)
+			: (cfg.customProviders[p.name]?.models.length ?? 0);
+
+	const tag =
+		p.kind === "builtin" ? theme.fg("accent", "B") : theme.fg("warning", "C");
+	const tagBracket = `${theme.fg("dim", "[")}${tag}${theme.fg("dim", "]")}`;
+
+	const dot =
+		count > 0 ? theme.fg("success", "\u25cf") : theme.fg("dim", "\u25cb");
+	const countStr =
+		count > 0
+			? theme.fg("success", String(count).padStart(2))
+			: theme.fg("dim", " 0");
+
+	const name =
+		isCursor && isFocused
+			? theme.bold(theme.fg("accent", p.name))
+			: isCursor
+				? theme.bold(p.name)
+				: p.name;
+	const api = theme.fg("dim", p.api);
+
+	const line = `${mark}${tagBracket} ${name}  ${dot}${countStr}  ${api}`;
+	return fitLine(line, width);
+}
+
+export function renderNewProviderRow(
+	theme: Theme,
+	isCursor: boolean,
+	isFocused: boolean,
+	width: number,
+): string {
+	const mark = cursorMark(theme, isCursor, isFocused);
+	const body =
+		isCursor && isFocused
+			? theme.bold(theme.fg("accent", "\uff0b  new custom group\u2026"))
+			: theme.fg("accent", "\uff0b  new custom group\u2026");
+	return pad(`${mark}${body}`, width);
+}
+
+// --------------------------------------------------------------------------- right panel rows
+
+export function renderModelRow(
+	id: string,
+	m: ModelEntry | undefined,
+	side: "assigned" | "pool",
+	compatWarn: boolean,
+	ctx: RowCtx,
+): string {
+	const { theme, width, isCursor, isFocused } = ctx;
+	const mark = cursorMark(theme, isCursor, isFocused);
+
+	const box =
+		side === "assigned"
+			? theme.fg("success", "\u2611")
+			: theme.fg("dim", "\u2610");
+
+	const warn = compatWarn ? ` ${theme.fg("warning", "\u26a0")}` : "";
+	const idStr = isCursor && isFocused ? theme.fg("accent", id) : id;
+	const reasoning = m?.reasoning ? ` ${theme.fg("accent", "\u2728")}` : "";
+	const apiTag = m
+		? theme.fg("muted", ` \u00b7 ${m.suggestedApi}`)
+		: theme.fg("error", " \u00b7 not on proxy");
+
+	const line = `${mark}${box}  ${idStr}${warn}${reasoning}${apiTag}`;
+	return fitLine(line, width);
+}
+
+// --------------------------------------------------------------------------- panel subheaders
+
+export function renderSubheader(
+	theme: Theme,
+	label: string,
+	width: number,
+): string {
+	// Compact "── label ──" tag, not a full-width rule. We don't want it to
+	// look like another panel frame.
+	const tag = `${theme.fg("borderAccent", "\u2500\u2500")} ${theme.fg("warning", label)} ${theme.fg("borderAccent", "\u2500\u2500")}`;
+	return pad(`  ${tag}`, width);
+}
+
+export function renderEmpty(
+	theme: Theme,
+	label: string,
+	width: number,
+): string {
+	return pad(`  ${theme.fg("dim", label)}`, width);
+}
+
+/** Decorate a header line ("assigned to <name>") with focus emphasis. */
+export function renderPanelHeader(
+	theme: Theme,
+	text: string,
+	width: number,
+	isFocused: boolean,
+): string {
+	const prefix = isFocused
+		? theme.bold(theme.fg("accent", "\u275a "))
+		: theme.fg("dim", "  ");
+	return pad(`${prefix}${text}`, width);
+}