pi-cliproxyapi 0.2.0 → 0.3.0

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 ",
+	};
+}