pi-cliproxyapi 0.1.2 → 0.3.0

package/src/ui-picker/mutate.ts

@@ -0,0 +1,167 @@
+// State mutations + read helpers shared by the picker UI.
+// Nothing in this module touches the rendering layer.
+
+import type { Api } from "@earendil-works/pi-ai";
+
+import type { CustomProviderModelConfig, ProxyConfig } from "../config.ts";
+import type { CatalogIndex, ModelEntry, ProviderEntry } from "./types.ts";
+
+/** model id \u2192 custom-provider slug that has claimed it (single owner). */
+export function claimedBy(cfg: ProxyConfig): Map<string, string> {
+	const m = new Map<string, string>();
+	for (const [slug, p] of Object.entries(cfg.customProviders)) {
+		for (const mm of p.models) m.set(mm.id, slug);
+	}
+	return m;
+}
+
+export function assignedIdsFor(
+	cfg: ProxyConfig,
+	prov: ProviderEntry,
+): string[] {
+	if (prov.kind === "builtin") {
+		return [...(cfg.builtinProviders[prov.name]?.models ?? [])];
+	}
+	return cfg.customProviders[prov.name]?.models.map((m) => m.id) ?? [];
+}
+
+export function poolFor(
+	cfg: ProxyConfig,
+	prov: ProviderEntry,
+	catalog: CatalogIndex,
+): string[] {
+	if (prov.kind === "builtin") {
+		const ids = catalog.builtinModelIds.get(prov.name) ?? [];
+		const assigned = new Set(assignedIdsFor(cfg, prov));
+		return ids.filter((id) => !assigned.has(id));
+	}
+	const claim = claimedBy(cfg);
+	const assigned = new Set(assignedIdsFor(cfg, prov));
+	return catalog.customPoolIds.filter((id) => {
+		if (assigned.has(id)) return false;
+		const owner = claim.get(id);
+		return owner === undefined || owner === prov.name;
+	});
+}
+
+function toEntry(m: ModelEntry): CustomProviderModelConfig {
+	return {
+		id: m.id,
+		name: m.name,
+		contextWindow: m.contextWindow,
+		maxTokens: m.maxTokens,
+		reasoning: m.reasoning,
+		cost: m.cost,
+	};
+}
+
+export function attachModel(
+	cfg: ProxyConfig,
+	prov: ProviderEntry,
+	model: ModelEntry,
+): void {
+	if (prov.kind === "builtin") {
+		const cur = cfg.builtinProviders[prov.name] ?? {
+			enabled: true,
+			models: [],
+		};
+		const set = new Set(cur.models);
+		set.add(model.id);
+		cfg.builtinProviders[prov.name] = {
+			enabled: true,
+			apiOverride: cur.apiOverride ?? null,
+			models: Array.from(set).sort(),
+		};
+		return;
+	}
+	// custom \u2014 exclusive: remove from any other custom group first.
+	for (const [slug, p] of Object.entries(cfg.customProviders)) {
+		if (slug === prov.name) continue;
+		const i = p.models.findIndex((mm) => mm.id === model.id);
+		if (i >= 0) p.models.splice(i, 1);
+	}
+	const cur = cfg.customProviders[prov.name] ?? { api: prov.api, models: [] };
+	if (!cur.models.some((mm) => mm.id === model.id)) {
+		cur.models.push(toEntry(model));
+	}
+	cfg.customProviders[prov.name] = cur;
+}
+
+export function detachModel(
+	cfg: ProxyConfig,
+	prov: ProviderEntry,
+	modelId: string,
+): void {
+	if (prov.kind === "builtin") {
+		const cur = cfg.builtinProviders[prov.name];
+		if (!cur) return;
+		cur.models = cur.models.filter((id) => id !== modelId);
+		cur.enabled = cur.models.length > 0;
+		return;
+	}
+	const cur = cfg.customProviders[prov.name];
+	if (!cur) return;
+	cur.models = cur.models.filter((mm) => mm.id !== modelId);
+}
+
+export function apiCompatible(provApi: Api, modelApi: Api): boolean {
+	if (provApi === modelApi) return true;
+	// openai-completions and openai-responses are siblings \u2014 most models work
+	// with both, so don't warn when they differ.
+	const openaiFamily: Api[] = ["openai-completions", "openai-responses"];
+	if (openaiFamily.includes(provApi) && openaiFamily.includes(modelApi))
+		return true;
+	return false;
+}
+
+/** Group pool model ids by `ownedBy` (fallback: `origin`, then "misc"). */
+export function groupPoolByOwnedBy(
+	ids: string[],
+	catalog: CatalogIndex,
+): Array<{ label: string; ids: string[] }> {
+	const groups = new Map<string, string[]>();
+	for (const id of ids) {
+		const m = catalog.byId.get(id);
+		const key = m?.ownedBy || m?.origin || "misc";
+		const arr = groups.get(key) ?? [];
+		arr.push(id);
+		groups.set(key, arr);
+	}
+	return Array.from(groups.entries())
+		.sort((a, b) => a[0].localeCompare(b[0]))
+		.map(([label, arr]) => ({ label, ids: arr }));
+}
+
+/**
+ * Substring filter over model id + display name (case-insensitive). Empty
+ * query returns the input untouched. Used by the pool filter box.
+ */
+export function filterModelIds(
+	ids: string[],
+	catalog: CatalogIndex,
+	query: string,
+): string[] {
+	const q = query.trim().toLowerCase();
+	if (!q) return ids;
+	return ids.filter((id) => {
+		if (id.toLowerCase().includes(q)) return true;
+		const name = catalog.byId.get(id)?.name;
+		return name ? name.toLowerCase().includes(q) : false;
+	});
+}
+
+/**
+ * Single source of truth for pool ordering: the grouped order flattened. The
+ * picker MUST index navigation + activation through this so the visually
+ * highlighted row always maps to the model that gets toggled. (Rendering
+ * iterates the same `groupPoolByOwnedBy` groups, so indices line up exactly.)
+ */
+export function poolDisplayOrder(
+	cfg: ProxyConfig,
+	prov: ProviderEntry,
+	catalog: CatalogIndex,
+	filter = "",
+): string[] {
+	const ids = filterModelIds(poolFor(cfg, prov, catalog), catalog, filter);
+	return groupPoolByOwnedBy(ids, catalog).flatMap((g) => g.ids);
+}

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);
+}

package/src/ui-picker/types.ts

@@ -0,0 +1,56 @@
+// Shared types for the /cliproxy three-panel picker.
+
+import type { Api } from "@earendil-works/pi-ai";
+
+export interface Theme {
+	fg(name: string, s: string): string;
+	bold(s: string): string;
+}
+
+export interface OverlayTui {
+	requestRender(): void;
+	rows?: number;
+	cols?: number;
+}
+
+export type PanelId = "providers" | "assigned" | "pool";
+
+export interface ProviderEntry {
+	kind: "builtin" | "custom";
+	name: string;
+	/** API the provider expects. Used for compat warnings on pool rows. */
+	api: Api;
+	/** Subtitle shown in the providers panel. */
+	subtitle: string;
+}
+
+export interface ModelEntry {
+	id: string;
+	name: string;
+	/** Suggested API for this model (from server hint / catalog). */
+	suggestedApi: Api;
+	/** Subtitle to render. */
+	subtitle?: string;
+	/** Origin label for grouping (e.g. "lproxy-glm"); empty for built-in. */
+	origin?: string;
+	/** Raw upstream owned_by tag, for grouping/UX. */
+	ownedBy?: string;
+	reasoning: boolean;
+	contextWindow: number;
+	maxTokens: number;
+	cost?: {
+		input: number;
+		output: number;
+		cacheRead: number;
+		cacheWrite: number;
+	};
+}
+
+export interface CatalogIndex {
+	/** All models indexed by id, regardless of provider scope. */
+	byId: Map<string, ModelEntry>;
+	/** For each built-in provider name, ordered model ids that it offers on the proxy. */
+	builtinModelIds: Map<string, string[]>;
+	/** Ordered list of all custom-pool model ids. */
+	customPoolIds: string[];
+}