pi-cliproxyapi 0.2.0 → 0.3.1

package/src/ui-hub/hub.ts

@@ -0,0 +1,264 @@
+// /cliproxy hub — one overlay with Models / Usage / Diagnostics tabs and a
+// shared action bar. Replaces the old per-command overlays (-refresh, -usage,
+// -doctor) with global keys inside a single surface.
+//
+//   global keys: [ ] / 1 2 3 switch tab \u00b7 r refresh \u00b7 e setup \u00b7 s save \u00b7 q close
+//   per-view keys: see each view's footerHint()
+
+import type {
+	ExtensionAPI,
+	ExtensionCommandContext,
+} from "@earendil-works/pi-coding-agent";
+import {
+	type Component,
+	getKeybindings,
+	matchesKey,
+} from "@earendil-works/pi-tui";
+
+import { applyAll } from "../apply.ts";
+import type { ProxyConfig } from "../config.ts";
+import { loadConfig, resolveConfigValue, saveConfig } from "../config.ts";
+import type { Discovery } from "../fetch-models.ts";
+import { fetchDiscovery } from "../fetch-models.ts";
+import { clearUsageCache } from "../fetch-usage.ts";
+import { frame } from "../ui-frame.ts";
+import type { OverlayTui, Theme } from "../ui-picker/types.ts";
+import { runSetup } from "../ui-setup.ts";
+import { ruleLine, statusHeader, tabBar } from "./shell.ts";
+import type { HubView } from "./types.ts";
+import { buildDiagnosticsView } from "./view-diagnostics.ts";
+import { buildModelsView, type ModelsView } from "./view-models.ts";
+import { buildUsageView, type UsageView } from "./view-usage.ts";
+
+export interface HubDeps {
+	pi: ExtensionAPI;
+	ctx: ExtensionCommandContext;
+	tui: OverlayTui;
+	theme: Theme;
+	cfg: ProxyConfig; // mutable draft owned by the hub
+	discovery: Discovery;
+	done: () => void;
+}
+
+export function buildHub(
+	deps: HubDeps,
+): Component & { handleInput(data: string): void } {
+	const { pi, ctx, tui, theme, cfg, done } = deps;
+	let discovery = deps.discovery;
+	let dirty = false; // unsaved config changes
+	let flash = ""; // transient status message (save/refresh/setup feedback)
+
+	const models: ModelsView = buildModelsView({
+		tui,
+		theme,
+		ctx,
+		cfg,
+		getDiscovery: () => discovery,
+		onChange: () => {
+			dirty = true;
+			flash = "";
+		},
+	});
+	const usage: UsageView = buildUsageView({ tui, theme, cfg });
+	const diagnostics: HubView = buildDiagnosticsView({
+		theme,
+		cfg,
+		getDiscovery: () => discovery,
+	});
+	const views: HubView[] = [models, usage, diagnostics];
+	let activeIdx = 0;
+	const active = (): HubView => views[activeIdx]!;
+
+	const switchTab = (idx: number): void => {
+		if (idx < 0 || idx >= views.length || idx === activeIdx) return;
+		activeIdx = idx;
+		active().onActivate?.();
+		tui.requestRender();
+	};
+
+	const save = (): void => {
+		flash = theme.fg("dim", "saving\u2026");
+		saveConfig(cfg);
+		tui.requestRender();
+		void applyAll(pi, cfg, discovery)
+			.then((rep) => {
+				dirty = false;
+				flash = theme.fg(
+					"success",
+					`\u2713 settings saved \u00b7 ${rep.registered.length} registered, ${rep.skipped.length} skipped`,
+				);
+				tui.requestRender();
+			})
+			.catch((e: unknown) => {
+				flash = theme.fg("error", `save failed: ${(e as Error).message}`);
+				tui.requestRender();
+			});
+	};
+
+	const refresh = async (): Promise<void> => {
+		flash = theme.fg("dim", "refreshing\u2026");
+		tui.requestRender();
+		try {
+			const key = resolveConfigValue(cfg.proxy.apiKey);
+			discovery = await fetchDiscovery(cfg, key);
+			clearUsageCache();
+			models.rebuild();
+			usage.reload();
+			const rep = await applyAll(pi, cfg, discovery);
+			flash = theme.fg(
+				"success",
+				`\u2713 refreshed \u00b7 ${rep.registered.length} providers (${discovery.source})`,
+			);
+		} catch (e) {
+			flash = theme.fg("error", `refresh failed: ${(e as Error).message}`);
+		}
+		tui.requestRender();
+	};
+
+	const setup = async (): Promise<void> => {
+		const ok = await runSetup(ctx, true);
+		if (!ok) {
+			tui.requestRender();
+			return;
+		}
+		// Pull fresh credentials but keep the user's in-hub model edits.
+		const reloaded = loadConfig();
+		cfg.proxy = { ...cfg.proxy, ...reloaded.proxy };
+		await refresh();
+	};
+
+	// ----- chrome ------------------------------------------------------------
+	const statusParts = (): string[] => {
+		const ep = cfg.proxy.endpoint || "(unset)";
+		const epShort = ep.length > 40 ? `\u2026${ep.slice(-39)}` : ep;
+		const keyOk = Boolean(resolveConfigValue(cfg.proxy.apiKey));
+		let provCount = 0;
+		let modelCount = 0;
+		for (const p of Object.values(cfg.builtinProviders)) {
+			if (p.enabled && p.models.length > 0) provCount++;
+			modelCount += p.models.length;
+		}
+		for (const p of Object.values(cfg.customProviders)) {
+			if (p.models.length > 0) provCount++;
+			modelCount += p.models.length;
+		}
+		const state = flash
+			? flash
+			: dirty
+				? theme.fg("warning", "\u25cf unsaved \u2014 press s to save")
+				: theme.fg("dim", "\u2713 saved");
+		return [
+			`${theme.fg("dim", "endpoint")} ${epShort}`,
+			`${theme.fg("dim", "key")} ${keyOk ? theme.fg("success", "\u2713") : theme.fg("error", "\u2717")}`,
+			`${theme.fg("dim", "providers")} ${provCount}`,
+			`${theme.fg("dim", "models")} ${modelCount}`,
+			state,
+		];
+	};
+
+	const render = (width: number): string[] => {
+		const totalRows = tui.rows ?? 40;
+		// frame() adds a top + bottom border, so the lines we hand it must total
+		// `frameTotal - 2`. Keep frameTotal within the overlay's 94% budget
+		// (proven range 16\u201338) so the box never overflows and gets clipped
+		// \u2014 clipping is what made the top unreachable and shifted the window.
+		const frameTotal = Math.max(16, Math.min(totalRows - 6, 38));
+		const bodyRows = frameTotal - 2;
+		const inner = Math.max(72, width - 2);
+		const viewBodyH = Math.max(6, bodyRows - 3); // minus status + tab + rule
+
+		const lines: string[] = [];
+		lines.push(statusHeader(theme, statusParts(), inner));
+		lines.push(
+			tabBar(
+				theme,
+				views.map((v) => ({ id: v.id, label: v.label })),
+				activeIdx,
+				inner,
+			),
+		);
+		lines.push(ruleLine(theme, inner));
+		lines.push(...active().render(inner, viewBodyH));
+
+		return frame(theme, {
+			width,
+			title: " /cliproxy ",
+			lines,
+			footer: {
+				hint: active().footerHint(),
+				badge:
+					" [ ] tab \u00b7 r refresh \u00b7 e setup \u00b7 s save \u00b7 q close ",
+			},
+		});
+	};
+
+	// ----- input -------------------------------------------------------------
+	const globalInput = (data: string): boolean | Promise<boolean> => {
+		const kb = getKeybindings();
+		if (
+			kb.matches(data, "tui.select.cancel") ||
+			matchesKey(data, "q") ||
+			matchesKey(data, "escape")
+		) {
+			done();
+			return true;
+		}
+		if (matchesKey(data, "]") || matchesKey(data, "tab")) {
+			switchTab((activeIdx + 1) % views.length);
+			return true;
+		}
+		if (matchesKey(data, "[") || matchesKey(data, "shift+tab")) {
+			switchTab((activeIdx - 1 + views.length) % views.length);
+			return true;
+		}
+		if (matchesKey(data, "1")) {
+			switchTab(0);
+			return true;
+		}
+		if (matchesKey(data, "2")) {
+			switchTab(1);
+			return true;
+		}
+		if (matchesKey(data, "3")) {
+			switchTab(2);
+			return true;
+		}
+		if (matchesKey(data, "r")) return refresh().then(() => true);
+		if (matchesKey(data, "e")) return setup().then(() => true);
+		if (matchesKey(data, "s")) {
+			save();
+			return true;
+		}
+		return false;
+	};
+
+	return {
+		render,
+		invalidate(): void {
+			/* stateless */
+		},
+		handleInput(data: string): void {
+			const handled = active().handleInput(data);
+			if (handled instanceof Promise) {
+				flash = "";
+				void handled.then((h) => {
+					if (h) tui.requestRender();
+				});
+				return;
+			}
+			if (handled) {
+				flash = ""; // editing/navigating clears stale save feedback
+				tui.requestRender();
+				return;
+			}
+			const g = globalInput(data);
+			if (g instanceof Promise) {
+				void g.then((h) => {
+					if (h) tui.requestRender();
+				});
+			} else if (g) {
+				tui.requestRender();
+			}
+		},
+	};
+}

package/src/ui-hub/index.ts

@@ -0,0 +1,50 @@
+// Public entry for the /cliproxy hub overlay.
+
+import type {
+	ExtensionAPI,
+	ExtensionCommandContext,
+} from "@earendil-works/pi-coding-agent";
+
+import type { ProxyConfig } from "../config.ts";
+import type { Discovery } from "../fetch-models.ts";
+import { setLogQuiet } from "../log.ts";
+import type { OverlayTui, Theme } from "../ui-picker/types.ts";
+import { buildHub } from "./hub.ts";
+
+export async function runHub(
+	pi: ExtensionAPI,
+	ctx: ExtensionCommandContext,
+	cfg: ProxyConfig,
+	discovery: Discovery,
+): Promise<void> {
+	if (!ctx.hasUI) {
+		ctx.ui.notify("interactive UI required for /cliproxy", "warning");
+		return;
+	}
+	// The hub mutates a draft; callers persist via the in-hub save action.
+	const draft: ProxyConfig = structuredClone(cfg);
+	// Mute console logging while the overlay is open: any stdout write prints
+	// over the box and shifts it down by exactly one line. Results are shown
+	// inside the hub (status flash) instead.
+	setLogQuiet(true);
+	try {
+		await ctx.ui.custom<void>(
+			(tui, theme, _kb, done) =>
+				buildHub({
+					pi,
+					ctx,
+					tui: tui as unknown as OverlayTui,
+					theme: theme as unknown as Theme,
+					cfg: draft,
+					discovery,
+					done,
+				}),
+			{
+				overlay: true,
+				overlayOptions: { width: 170, maxHeight: "94%" },
+			},
+		);
+	} finally {
+		setLogQuiet(false);
+	}
+}

package/src/ui-hub/shell.ts

@@ -0,0 +1,119 @@
+// Shared TUI primitives for the /cliproxy hub.
+//
+// One home for the scroll math + chrome (tab bar, status header) that used to
+// be copy-pasted across the picker, the read-only overlay, and the setup
+// wizard. Everything here is pure and ANSI-aware.
+
+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 TabSpec {
+	id: string;
+	label: string;
+}
+
+/**
+ * Render the hub tab bar as a single `width`-cell line.
+ *   Models  \u2502  Usage  \u2502  Diagnostics
+ * The active tab is bold/accent; the rest are dimmed.
+ */
+export function tabBar(
+	theme: Theme,
+	tabs: TabSpec[],
+	activeIdx: number,
+	width: number,
+): string {
+	const sep = theme.fg("borderAccent", "\u2502");
+	const cells = tabs.map((t, i) => {
+		const label = `${i + 1} ${t.label}`;
+		return i === activeIdx
+			? theme.bold(theme.fg("accent", ` ${label} `))
+			: theme.fg("dim", ` ${label} `);
+	});
+	return pad(` ${cells.join(sep)}`, width);
+}
+
+/**
+ * Render a status header from labelled parts, joined with a dim gap and
+ * clipped to `width`.
+ */
+export function statusHeader(
+	theme: Theme,
+	parts: string[],
+	width: number,
+): string {
+	const joined = parts.join(theme.fg("dim", "   "));
+	return pad(` ${joined}`, width);
+}
+
+/** A full-width horizontal rule used to divide chrome from the view body. */
+export function ruleLine(theme: Theme, width: number): string {
+	return theme.fg("borderAccent", "\u2500".repeat(Math.max(0, width)));
+}
+
+/**
+ * Slice `lines` to exactly `count` rows starting at `scroll`, padding the tail
+ * with empty strings so the caller always gets a fixed-height block.
+ */
+export function takeSlice(
+	lines: string[],
+	scroll: number,
+	count: number,
+): string[] {
+	const s = lines.slice(scroll, scroll + count);
+	while (s.length < count) s.push("");
+	return s;
+}
+
+/**
+ * Compute a scroll offset that keeps a cursor visible inside `visible` rows.
+ *
+ * Two cursor coords:
+ *   - cursorTop: the highest line that must stay visible (often a group
+ *     subheader pinned right above the cursor on a group's first row).
+ *   - cursorBottom: the cursor row itself.
+ *
+ * `stickyCount` rows at the top (panel headers) are pinned and never scroll
+ * out from under the cursor block. Returns a clamped offset that never leaves
+ * a gap above nor pushes the cursor below the window.
+ */
+export function clampScroll(
+	cursorTop: number,
+	cursorBottom: number,
+	prev: number,
+	visible: number,
+	total: number,
+	stickyCount: number,
+): number {
+	if (total <= visible) return 0;
+	const maxScroll = Math.max(0, total - visible);
+	if (cursorBottom < stickyCount) return 0;
+	let scroll = Math.max(0, Math.min(prev, maxScroll));
+	const topRow = scroll + stickyCount;
+	if (cursorTop < topRow) {
+		scroll = Math.max(0, cursorTop - stickyCount);
+	}
+	const bottomRow = scroll + visible - 1;
+	if (cursorBottom > bottomRow) {
+		scroll = Math.min(maxScroll, cursorBottom - (visible - 1));
+	}
+	return scroll;
+}
+
+/**
+ * Simple offset-based clamp for flat (un-sticky) lists like usage/diagnostics.
+ * Returns an offset within [0, total-visible].
+ */
+export function clampOffset(
+	offset: number,
+	visible: number,
+	total: number,
+): number {
+	const max = Math.max(0, total - visible);
+	return Math.max(0, Math.min(offset, max));
+}
+
+/** Number of visible cells in a string (re-export for view code). */
+export { visibleWidth };

package/src/ui-hub/types.ts

@@ -0,0 +1,16 @@
+// Hub view contract. Each tab is a body-only renderer + input handler; the hub
+// shell draws the frame, status header, tab bar, and footer around it.
+
+export interface HubView {
+	id: string;
+	/** Tab label shown in the bar. */
+	label: string;
+	/** Render exactly `height` body lines, each `width` cells wide. */
+	render(width: number, height: number): string[];
+	/** Return true if the key was consumed (hub then re-renders + stops). */
+	handleInput(data: string): boolean | Promise<boolean>;
+	/** Contextual footer hint for this view. */
+	footerHint(): string;
+	/** Called when the tab becomes active (e.g. to kick a lazy fetch). */
+	onActivate?(): void;
+}

package/src/ui-hub/view-diagnostics.ts

@@ -0,0 +1,108 @@
+// Diagnostics view — connectivity, key resolution, and discovery shape.
+// Built synchronously from the config + the discovery already fetched by the
+// hub, plus a read-only conflict scan.
+
+import { matchesKey } from "@earendil-works/pi-tui";
+
+import type { ProxyConfig } from "../config.ts";
+import { resolveConfigValue } from "../config.ts";
+import { detectConflicts } from "../conflicts.ts";
+import type { Discovery } from "../fetch-models.ts";
+import { PLUGIN_USER_AGENT } from "../fetch-models.ts";
+import { pad } from "../ui-picker/render-text.ts";
+import type { Theme } from "../ui-picker/types.ts";
+import { clampOffset, takeSlice } from "./shell.ts";
+import type { HubView } from "./types.ts";
+
+export interface DiagnosticsViewDeps {
+	theme: Theme;
+	cfg: ProxyConfig;
+	getDiscovery: () => Discovery;
+}
+
+export function buildDiagnosticsView(deps: DiagnosticsViewDeps): HubView {
+	const { theme, cfg } = deps;
+	let offset = 0;
+
+	const buildLines = (): string[] => {
+		const d = deps.getDiscovery();
+		const ok = (s: string) => theme.fg("success", s);
+		const bad = (s: string) => theme.fg("error", s);
+		const dim = (s: string) => theme.fg("dim", s);
+		const lines: string[] = [];
+
+		lines.push(
+			`${dim("endpoint")}      ${cfg.proxy.endpoint || bad("(unset)")}`,
+		);
+		lines.push(
+			`${dim("apiKey")}        ${resolveConfigValue(cfg.proxy.apiKey) ? ok("resolves") : bad("empty after resolution")}`,
+		);
+		lines.push(
+			`${dim("usageKey")}      ${
+				cfg.proxy.usageKey
+					? resolveConfigValue(cfg.proxy.usageKey)
+						? ok("resolves")
+						: bad("set but empty")
+					: dim("not configured")
+			}`,
+		);
+		lines.push(`${dim("user-agent")}    ${PLUGIN_USER_AGENT}`);
+		lines.push("");
+		lines.push(`${dim("discovery")}     source=${d.source}`);
+		lines.push(
+			`${dim("upstream")}      v=${d.upstreamVersion ?? "(unknown)"} \u00b7 ${d.upstreamTotal} ids`,
+		);
+		const builtins =
+			d.builtinProviders
+				.map((p) => `${p.name}=${p.models.length}`)
+				.join(", ") || dim("(none)");
+		lines.push(`${dim("built-in")}      ${builtins}`);
+		lines.push(`${dim("custom pool")}   ${d.customPool.length} models`);
+
+		const conflicts = detectConflicts(cfg);
+		lines.push("");
+		if (conflicts.length === 0) {
+			lines.push(`${dim("conflicts")}     ${ok("none")}`);
+		} else {
+			lines.push(`${dim("conflicts")}`);
+			for (const c of conflicts)
+				lines.push(`  ${theme.fg("warning", `[${c.kind}]`)} ${c.detail}`);
+		}
+		return lines;
+	};
+
+	const render = (width: number, height: number): string[] => {
+		const body = buildLines();
+		offset = clampOffset(offset, height, body.length);
+		return takeSlice(body, offset, height).map((ln) => pad(` ${ln}`, width));
+	};
+
+	const handleInput = (data: string): boolean => {
+		const total = buildLines().length;
+		if (matchesKey(data, "up") || matchesKey(data, "k")) {
+			offset = Math.max(0, offset - 1);
+			return true;
+		}
+		if (matchesKey(data, "down") || matchesKey(data, "j")) {
+			offset = Math.min(Math.max(0, total - 1), offset + 1);
+			return true;
+		}
+		if (matchesKey(data, "pageUp") || matchesKey(data, "b")) {
+			offset = Math.max(0, offset - 10);
+			return true;
+		}
+		if (matchesKey(data, "pageDown") || matchesKey(data, "f")) {
+			offset = Math.min(Math.max(0, total - 1), offset + 10);
+			return true;
+		}
+		return false;
+	};
+
+	return {
+		id: "diagnostics",
+		label: "Diagnostics",
+		render,
+		handleInput,
+		footerHint: () => " \u2191\u2193 scroll \u00b7 r refresh discovery ",
+	};
+}