pi-cliproxyapi 0.1.2 → 0.2.0

package/README.md

@@ -19,13 +19,22 @@ One `(endpoint, apiKey)` pair — every provider and model inherits it automatic
 
 | Command | Description |
 | --- | --- |
-| `/cliproxy` | Interactive overlay — enable providers, toggle models, create custom groups |
+| `/cliproxy` | Three-panel picker — providers, assigned models, available pool |
 | `/cliproxy-setup` | Configure endpoint, API key, provider prefix, usage key |
 | `/cliproxy-refresh` | Re-fetch upstream models, re-register providers |
-| `/cliproxy-list` | Read-only view of current configuration |
 | `/cliproxy-usage` | Per-account quota windows with progress bars (`d` = show disabled, `v` = verbose) |
 | `/cliproxy-doctor` | Connectivity, key resolution, discovery diagnostics |
 
+### `/cliproxy` picker
+
+The picker has three panels you cycle through with `Tab` / arrow keys:
+
+- **left** — every provider (built-in + custom). `+ new custom group…` is the last row.
+- **right top** — models currently assigned to the focused provider. `Enter` / `Space` removes one.
+- **right bottom** — available model pool, grouped by upstream `owned_by`. `Enter` / `Space` attaches a model to the focused provider.
+
+Extra keys: `d` removes a custom group (with confirmation), `s` saves, `q` / `Esc` cancels. A `⚠` marker shows when a model's recommended API differs from the provider's API — attach is allowed anyway.
+
 ## Prerequisites
 
 You need a running [CliProxyAPI](https://github.com/router-for-me/CLIProxyAPI) instance — this is the corporate LLM proxy that aggregates multiple providers behind a single OpenAI-compatible endpoint.
@@ -143,7 +152,7 @@ The sidecar is **optional for basic usage** — without it the plugin falls back
 | Model discovery | Enriched from [models.dev](https://models.dev) (real context windows, costs, reasoning) | Defaults: `contextWindow=128k`, `maxTokens=16k`, `cost=0`, `reasoning=false` |
 | `/cliproxy-usage` | Works — per-account quota bars | **Does not work** (no `/api/usage` endpoint) |
 | Classification | Server-side, accurate | Local heuristics by `owned_by` |
-| `/cliproxy`, `/cliproxy-list`, `/cliproxy-doctor` | Work | Work |
+| `/cliproxy`, `/cliproxy-doctor` | Work | Work |
 
 ## Layout
 
@@ -151,15 +160,27 @@ The sidecar is **optional for basic usage** — without it the plugin falls back
 index.ts            ExtensionFactory entry point
 src/
   config.ts         ~/.config/pi-cliproxyapi/config.json
-  commands.ts       6 slash commands
+  commands.ts       5 slash commands
   apply.ts          pi.registerProvider calls
   fetch-models.ts   well-known + /v1/models fallback
   fetch-usage.ts    /api/usage client with TTL cache
   compat.ts         baseUrl derivation, model classification
   conflicts.ts      read-only ~/.pi/{models,auth}.json scan
-  ui-picker.ts      overlay picker with collapsible provider groups
-  ui-usage.ts       ANSI-colored usage renderer
+  ui-frame.ts       single source of truth for overlay frames
   ui-overlay.ts     scrollable overlay shell with toggles
   ui-setup.ts       setup wizard
+  ui-usage.ts       ANSI-coloured usage renderer
+  ui-picker/        three-panel /cliproxy overlay
+    index.ts        public runPicker entry
+    types.ts        shared TS types
+    catalog.ts      build a model lookup from discovery
+    providers.ts    resolve the providers shown in the left panel
+    mutate.ts       attach / detach / claim helpers + pool grouping
+    render-text.ts  ANSI-aware pad / truncate
+    rows.ts         per-row renderers for left / right panels
+    picker.ts       state + navigation, glues catalogue to UI
+    picker-component.ts  render + input dispatch
+    prompt-confirm.ts    remove-group confirmation
+    prompt-name.ts       new-group name prompt
   log.ts            tagged logger
 ```

package/index.ts

@@ -7,7 +7,7 @@
  *   2. fetch discovery (well-known → fall back to /v1/models)
  *   3. call pi.registerProvider for each enabled built-in + custom provider
  *   4. register slash commands /cliproxy /cliproxy-setup /cliproxy-refresh
- *      /cliproxy-list /cliproxy-usage /cliproxy-doctor
+ *      /cliproxy-usage /cliproxy-doctor
  *
  * All discovery + apply errors are logged but never abort extension load —
  * a missing/broken proxy must not prevent Pi from starting.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-cliproxyapi",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "description": "Pi extension for corporate management of model providers via a single CliProxyAPI endpoint",
   "license": "MIT",

package/src/apply.ts

@@ -37,6 +37,36 @@ export async function applyAll(
 	}
 
 	// -------- builtin providers (anthropic, openai, etc.)
+	const builtinByName = new Map<
+		string,
+		Array<{
+			id: string;
+			name: string;
+			reasoning: boolean;
+			contextWindow: number;
+			maxTokens: number;
+			cost: {
+				input: number;
+				output: number;
+				cacheRead: number;
+				cacheWrite: number;
+			};
+		}>
+	>();
+	for (const p of discovery.builtinProviders) {
+		builtinByName.set(
+			p.name,
+			p.models.map((m) => ({
+				id: m.id,
+				name: m.name,
+				reasoning: m.reasoning,
+				contextWindow: m.contextWindow,
+				maxTokens: m.maxTokens,
+				cost: m.cost,
+			})),
+		);
+	}
+
 	for (const [name, p] of Object.entries(cfg.builtinProviders)) {
 		if (!p?.enabled) {
 			report.skipped.push({ provider: name, reason: "disabled" });
@@ -46,7 +76,7 @@ export async function applyAll(
 			report.skipped.push({ provider: name, reason: "empty whitelist" });
 			continue;
 		}
-		let builtin: ReadonlyArray<{
+		let catalog: ReadonlyArray<{
 			id: string;
 			name: string;
 			api: Api;
@@ -56,19 +86,64 @@ export async function applyAll(
 			contextWindow: number;
 			maxTokens: number;
 			thinkingLevelMap?: any;
-		}>;
+		}> = [];
 		try {
-			builtin = getModels(name as any) as any;
+			catalog = getModels(name as any) as any;
 		} catch {
-			report.skipped.push({
-				provider: name,
-				reason: `pi-ai has no provider "${name}"`,
-			});
-			continue;
+			/* unknown provider in pi-ai catalog — keep going with proxy data */
 		}
-		const selected = builtin.filter(
-			(m) => p.models.includes(m.id) && proxyIds.has(m.id),
+		const catalogById = new Map(catalog.map((m) => [m.id, m]));
+		const proxyById = new Map(
+			(builtinByName.get(name) ?? []).map((m) => [m.id, m]),
 		);
+
+		interface MergedModel {
+			id: string;
+			name: string;
+			reasoning: boolean;
+			contextWindow: number;
+			maxTokens: number;
+			cost: any;
+			input: ("text" | "image")[];
+			api: Api;
+			thinkingLevelMap?: any;
+		}
+		const selected: MergedModel[] = [];
+		for (const id of p.models) {
+			if (!proxyIds.has(id)) continue;
+			const c = catalogById.get(id);
+			const px = proxyById.get(id);
+			if (c) {
+				selected.push({
+					id: c.id,
+					name: c.name,
+					reasoning: c.reasoning,
+					contextWindow: c.contextWindow,
+					maxTokens: c.maxTokens,
+					cost: c.cost,
+					input: c.input,
+					api: c.api,
+					thinkingLevelMap: c.thinkingLevelMap,
+				});
+				continue;
+			}
+			if (!px) continue;
+			// Catalog miss — fall back to proxy metadata. Pick API by provider name.
+			const api: Api =
+				name === "anthropic"
+					? "anthropic-messages"
+					: ((p.apiOverride as Api | undefined) ?? "openai-responses");
+			selected.push({
+				id: px.id,
+				name: px.name,
+				reasoning: px.reasoning,
+				contextWindow: px.contextWindow,
+				maxTokens: px.maxTokens,
+				cost: px.cost,
+				input: ["text"],
+				api,
+			});
+		}
 		if (selected.length === 0) {
 			report.skipped.push({
 				provider: name,

package/src/commands.ts

@@ -2,7 +2,6 @@
 //   /cliproxy           — open the picker overlay
 //   /cliproxy-setup     — first-run / re-run setup wizard for endpoint+keys
 //   /cliproxy-refresh   — refetch discovery + re-apply
-//   /cliproxy-list      — show all upstream models in an overlay
 //   /cliproxy-usage     — fetch /api/usage and render in overlay
 //   /cliproxy-doctor    — connectivity + key-resolution diagnostics
 
@@ -18,7 +17,7 @@ import { fetchDiscovery, PLUGIN_USER_AGENT } from "./fetch-models.ts";
 import { clearUsageCache, fetchUsage } from "./fetch-usage.ts";
 import { log } from "./log.ts";
 import { showOverlay } from "./ui-overlay.ts";
-import { runPicker } from "./ui-picker.ts";
+import { runPicker } from "./ui-picker/index.ts";
 import { runSetup } from "./ui-setup.ts";
 import { renderUsage } from "./ui-usage.ts";
 
@@ -41,11 +40,6 @@ export function registerCommands(pi: ExtensionAPI): void {
 		handler: handleRefresh.bind(null, pi),
 	});
 
-	pi.registerCommand("cliproxy-list", {
-		description: "Show every upstream model in a scrollable overlay",
-		handler: handleList,
-	});
-
 	pi.registerCommand("cliproxy-usage", {
 		description: "Show per-account quota windows from the upstream",
 		handler: handleUsage,
@@ -147,27 +141,6 @@ async function handleRefresh(
 	}
 }
 
-// --------------------------------------------------------------------------- /cliproxy-list
-
-async function handleList(
-	_args: string,
-	ctx: ExtensionCommandContext,
-): Promise<void> {
-	const cfg = loadConfig();
-	const resolvedKey = resolveConfigValue(cfg.proxy.apiKey);
-	let discovery;
-	try {
-		discovery = await fetchDiscovery(cfg, resolvedKey);
-	} catch (err) {
-		ctx.ui.notify(`list failed: ${(err as Error).message}`, "error");
-		return;
-	}
-	await runPicker(ctx, cfg, discovery, {
-		readOnly: true,
-		title: " /cliproxy-list \u00b7 read-only ",
-	});
-}
-
 // --------------------------------------------------------------------------- /cliproxy-usage
 
 async function handleUsage(

package/src/ui-frame.ts

@@ -0,0 +1,118 @@
+// Shared frame renderer for every /cliproxy overlay.
+//
+// Geometry contract:
+//   - frame() always returns lines that are EXACTLY `width` visible cells.
+//   - top    = \u256d\u2500 <title> <fill> \u256e
+//   - body i = \u2502 <line padded/truncated to width-2> \u2502
+//   - footer = \u2570\u2500 <hint> <fill> [badge] \u256f       (if footer provided)
+//     or       \u2570\u2500\u2500\u2500\u2026\u2500\u2500\u2500\u256f                          (otherwise)
+//
+// Callers stay simple:
+//
+//   return frame(theme, {
+//     width,
+//     title: " setup ",
+//     lines: [
+//       " hint goes here ",
+//       "",
+//       theme.fg("accent", "> input"),
+//     ],
+//     footer: { hint: "enter = save  \u00b7  esc = cancel" },
+//   });
+//
+// Anything inside `lines` may already contain ANSI escapes; pad() is ANSI-aware
+// (see render-text.ts). No caller should ever draw \u256d/\u256e/\u2502/\u2570/\u256f by hand again.
+
+import { visibleWidth } from "@earendil-works/pi-tui";
+
+import { pad } from "./ui-picker/render-text.ts";
+import type { Theme } from "./ui-picker/types.ts";
+
+export interface FrameFooter {
+	/** Left-aligned hint text (dimmed). */
+	hint?: string;
+	/** Right-aligned focus/state badge (muted). */
+	badge?: string;
+}
+
+export interface FrameOpts {
+	width: number;
+	title?: string;
+	titleColor?: "accent" | "error" | "success" | "warning";
+	lines: string[];
+	footer?: FrameFooter;
+}
+
+const SIDE = "\u2502";
+const TL = "\u256d";
+const TR = "\u256e";
+const BL = "\u2570";
+const BR = "\u256f";
+const HR = "\u2500";
+
+export function frame(theme: Theme, opts: FrameOpts): string[] {
+	const w = Math.max(4, opts.width);
+	return [
+		drawTop(theme, opts.title, opts.titleColor ?? "accent", w),
+		...opts.lines.map((line) => drawBody(theme, line, w)),
+		drawBottom(theme, opts.footer, w),
+	];
+}
+
+function drawTop(
+	theme: Theme,
+	title: string | undefined,
+	color: "accent" | "error" | "success" | "warning",
+	width: number,
+): string {
+	// Layout: \u256d \u2500 <title> <fill> \u256e  \u2014 exactly `width` cells.
+	// Fixed cells = 2 (\u256d\u2500) + 1 (\u256e) = 3. The rest is title + fill.
+	const t = title ?? "";
+	const titleVis = visibleWidth(t);
+	const rest = Math.max(0, width - 3 - titleVis);
+	const titleColoured = t ? theme.bold(theme.fg(color, t)) : "";
+	const body = `${TL}${HR}${titleColoured}${HR.repeat(rest)}${TR}`;
+	return theme.fg("borderAccent", body);
+}
+
+function drawBody(theme: Theme, content: string, width: number): string {
+	// Layout: \u2502 <content padded to width-2> \u2502
+	const inner = Math.max(0, width - 2);
+	const side = theme.fg("borderAccent", SIDE);
+	return `${side}${pad(content, inner)}${side}`;
+}
+
+function drawBottom(
+	theme: Theme,
+	footer: FrameFooter | undefined,
+	width: number,
+): string {
+	const start = `${BL}${HR}`;
+	const end = `${BR}`;
+	const fixedCells = 3; // \u2570 + \u2500 + \u256f
+
+	if (!footer || (!footer.hint && !footer.badge)) {
+		const rest = Math.max(0, width - fixedCells);
+		return theme.fg("borderAccent", `${start}${HR.repeat(rest)}${end}`);
+	}
+
+	const hint = footer.hint ?? "";
+	const badge = footer.badge ?? "";
+	const hintVis = visibleWidth(hint);
+	const badgeVis = visibleWidth(badge);
+	const rest = Math.max(0, width - fixedCells - hintVis - badgeVis);
+
+	const left = theme.fg("dim", hint);
+	const right = badge ? theme.fg("muted", badge) : "";
+	const fill = HR.repeat(rest);
+
+	return `${theme.fg("borderAccent", start)}${left}${theme.fg("borderAccent", fill)}${right}${theme.fg("borderAccent", end)}`;
+}
+
+/**
+ * Convenience: number of usable content cells per body line for a given frame
+ * width. Use this when laying out children that need to know their width.
+ */
+export function frameInner(width: number): number {
+	return Math.max(0, width - 2);
+}

package/src/ui-overlay.ts

@@ -1,4 +1,4 @@
-// Read-only scrollable overlay used by /cliproxy-list, /cliproxy-usage, /cliproxy-doctor.
+// Read-only scrollable overlay used by /cliproxy-usage and /cliproxy-doctor.
 //
 // Pure presentational — never touches the agent session or context. The
 // caller may supply boolean "toggles" (one keystroke each) that re-render the
@@ -23,6 +23,8 @@ import {
 	visibleWidth,
 } from "@earendil-works/pi-tui";
 
+import { frame } from "./ui-frame.ts";
+
 interface Theme {
 	fg(name: string, s: string): string;
 	bold(s: string): string;
@@ -76,7 +78,6 @@ function buildOverlay(
 	};
 
 	const renderFrame = (width: number, height: number): string[] => {
-		const inner = Math.max(10, width - 2);
 		const visible = Math.max(1, height - 2);
 		const total = lines.length;
 		const maxOffset = Math.max(0, total - visible);
@@ -87,26 +88,22 @@ function buildOverlay(
 			total > visible
 				? Math.min(100, Math.round(((offset + visible) / total) * 100))
 				: 100;
-		const titleBar = formatTitleBar(t, props.title, inner);
-		const footerBar = formatFooterBar(t, {
-			from: offset + 1,
-			to: Math.min(total, offset + visible),
-			total,
-			pct,
-			width: inner,
-			toggles: (props.toggles ?? []).map((tg) => ({
-				hint: tg.hint,
-				active: state[tg.key] === true,
-			})),
+		const hintBase = "\u2191\u2193 \u00b7 pgUp/pgDn \u00b7 g/G";
+		const togglesText = (props.toggles ?? [])
+			.map((tg) =>
+				state[tg.key] === true
+					? t.fg("success", `[${tg.hint}]`)
+					: t.fg("dim", tg.hint),
+			)
+			.join(" \u00b7 ");
+		const hint = ` ${hintBase}${togglesText ? "  " + togglesText : ""} `;
+		const badge = ` ${offset + 1}\u2013${Math.min(total, offset + visible)} of ${total}  ${pct}% `;
+		return frame(t, {
+			width,
+			title: ` ${props.title} `,
+			lines: slice.map((ln) => ` ${ln}`),
+			footer: { hint, badge },
 		});
-		const sideL = t.fg("borderAccent", "│");
-		const sideR = t.fg("borderAccent", "│");
-		const out: string[] = [titleBar];
-		for (const ln of slice) {
-			out.push(`${sideL} ${padRight(ln, inner - 2)} ${sideR}`);
-		}
-		out.push(footerBar);
-		return out;
 	};
 
 	return {
@@ -174,60 +171,6 @@ function buildOverlay(
 	};
 }
 
-// --------------------------------------------------------------------------- chrome helpers
-
-function formatTitleBar(theme: Theme, title: string, inner: number): string {
-	const label = ` ${title} `;
-	const leftSep = "╭─";
-	const rightFill = inner - visibleWidth(label) - visibleWidth(leftSep) - 2;
-	const fill = "─".repeat(Math.max(0, rightFill));
-	return theme.fg(
-		"borderAccent",
-		`${leftSep}${theme.bold(theme.fg("accent", label))}${theme.fg("borderAccent", fill)}╮`,
-	);
-}
-
-function formatFooterBar(
-	theme: Theme,
-	opts: {
-		from: number;
-		to: number;
-		total: number;
-		pct: number;
-		width: number;
-		toggles: Array<{ hint: string; active: boolean }>;
-	},
-): string {
-	const hintBase = "↑↓ · pgUp/pgDn · g/G";
-	const togglesText = opts.toggles
-		.map((tg) =>
-			tg.active
-				? theme.fg("success", `[${tg.hint}]`)
-				: theme.fg("dim", tg.hint),
-		)
-		.join(" · ");
-	const left = ` ${hintBase}${togglesText ? "  " + togglesText : ""} `;
-	const right = ` ${opts.from}–${opts.to} of ${opts.total}  ${opts.pct}% `;
-	const leftSep = "╰─";
-	const rightSep = "╯";
-	const used =
-		visibleWidth(leftSep) +
-		visibleWidth(rightSep) +
-		visibleWidth(left) +
-		visibleWidth(right);
-	const filler = "─".repeat(Math.max(0, opts.width - used));
-	return theme.fg(
-		"borderAccent",
-		`${leftSep}${theme.fg("dim", left)}${filler}${theme.fg("muted", right)}${rightSep}`,
-	);
-}
-
-function padRight(s: string, width: number): string {
-	const w = visibleWidth(s);
-	if (w >= width) return s;
-	return s + " ".repeat(width - w);
-}
-
 // --------------------------------------------------------------------------- public API
 
 /**

package/src/ui-picker/catalog.ts

@@ -0,0 +1,52 @@
+// Build a fast lookup of every model the proxy currently offers, split into
+// built-in (by provider name) and the custom pool. The result is consumed by
+// providers.ts and mutate.ts.
+
+import type { Discovery } from "../fetch-models.ts";
+import type { CatalogIndex, ModelEntry } from "./types.ts";
+
+export function buildCatalog(discovery: Discovery): CatalogIndex {
+	const byId = new Map<string, ModelEntry>();
+	const builtinModelIds = new Map<string, string[]>();
+
+	for (const p of discovery.builtinProviders) {
+		const ids: string[] = [];
+		for (const m of p.models) {
+			byId.set(m.id, {
+				id: m.id,
+				name: m.name,
+				suggestedApi: p.api,
+				subtitle: m.name && m.name !== m.id ? m.name : undefined,
+				ownedBy: p.name,
+				reasoning: m.reasoning,
+				contextWindow: m.contextWindow,
+				maxTokens: m.maxTokens,
+				cost: m.cost,
+			});
+			ids.push(m.id);
+		}
+		builtinModelIds.set(p.name, ids);
+	}
+
+	const customPoolIds: string[] = [];
+	for (const m of discovery.customPool) {
+		// Don't overwrite a built-in entry if the same id appears in both.
+		if (!byId.has(m.id)) {
+			byId.set(m.id, {
+				id: m.id,
+				name: m.name,
+				suggestedApi: m.api,
+				subtitle: m.name && m.name !== m.id ? m.name : undefined,
+				origin: m.suggestedProvider,
+				ownedBy: m.ownedBy,
+				reasoning: m.reasoning,
+				contextWindow: m.contextWindow,
+				maxTokens: m.maxTokens,
+				cost: m.cost,
+			});
+		}
+		customPoolIds.push(m.id);
+	}
+
+	return { byId, builtinModelIds, customPoolIds };
+}

package/src/ui-picker/index.ts

@@ -0,0 +1,35 @@
+// Public entry for the /cliproxy three-panel picker.
+
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+
+import type { ProxyConfig } from "../config.ts";
+import type { Discovery } from "../fetch-models.ts";
+import { buildPicker } from "./picker.ts";
+import type { OverlayTui, Theme } from "./types.ts";
+
+export async function runPicker(
+	ctx: ExtensionCommandContext,
+	cfg: ProxyConfig,
+	discovery: Discovery,
+): Promise<ProxyConfig | null> {
+	if (!ctx.hasUI) {
+		ctx.ui.notify("interactive UI required for /cliproxy", "warning");
+		return null;
+	}
+	const draft: ProxyConfig = structuredClone(cfg);
+	return ctx.ui.custom<ProxyConfig | null>(
+		(tui, theme, _kb, done) =>
+			buildPicker(
+				tui as unknown as OverlayTui,
+				theme as unknown as Theme,
+				draft,
+				discovery,
+				ctx,
+				done,
+			),
+		{
+			overlay: true,
+			overlayOptions: { width: 170, maxHeight: "94%" },
+		},
+	);
+}