pi-cliproxyapi 0.1.0

package/src/ui-setup.ts

@@ -0,0 +1,289 @@
+// First-run setup wizard: collects endpoint + apiKey + providerPrefix + (optional) usageKey
+// and writes them to ~/.config/pi-cliproxyapi/config.json.
+//
+// All three fields support the same "!cmd" / "$ENV" / literal semantics as
+// the rest of the config (see resolveConfigValue). For convenience the wizard
+// also accepts a bare path starting with ~/ or / and wraps it into "!cat <path>".
+
+import { existsSync } from "node:fs";
+import { homedir } from "node:os";
+
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import {
+	type Component,
+	getKeybindings,
+	Input,
+	matchesKey,
+	visibleWidth,
+} from "@earendil-works/pi-tui";
+
+import {
+	CONFIG_PATH,
+	loadConfig,
+	resolveConfigValue,
+	saveConfig,
+} from "./config.ts";
+
+interface Theme {
+	fg(name: string, s: string): string;
+	bold(s: string): string;
+}
+
+interface WizardStep {
+	label: string;
+	hint: string;
+	required: boolean;
+	initialValue?: string;
+	validate?: (raw: string) => string | null;
+}
+
+const STEPS: WizardStep[] = [
+	{
+		label: "endpoint",
+		hint: "OpenAI-style base URL of your CliProxyAPI deployment, must include /v1",
+		required: true,
+		validate: (raw) => {
+			try {
+				const u = new URL(raw);
+				if (!u.pathname.endsWith("/v1")) return "must end with /v1";
+				return null;
+			} catch {
+				return "not a valid URL";
+			}
+		},
+	},
+	{
+		label: "apiKey",
+		hint: "CliProxyAPI bearer key. Accepts literal, $ENV_VAR, !cmd, or ~/path",
+		required: true,
+	},
+	{
+		label: "providerPrefix",
+		hint: "Prefix for your custom provider names. Suggested groups become <prefix>-glm, <prefix>-gemini, etc. Use any short slug (letters/digits/dashes).",
+		required: true,
+		validate: (raw) =>
+			/^[a-z0-9][a-z0-9-]*$/i.test(raw) ? null : "letters/digits/dashes only",
+	},
+	{
+		label: "usageKey",
+		hint: "Optional X-Plugin-Key for /api/usage. Leave blank to skip /cliproxy-usage",
+		required: false,
+	},
+];
+
+/**
+ * Run the interactive setup wizard if no usable config exists.
+ * Returns true when config was just saved (caller should reapply).
+ */
+export async function runSetupIfNeeded(
+	ctx: ExtensionCommandContext,
+): Promise<boolean> {
+	const cfg = loadConfig();
+	const hasEndpoint = Boolean(cfg.proxy.endpoint);
+	const hasResolvedKey = Boolean(resolveConfigValue(cfg.proxy.apiKey));
+	if (hasEndpoint && hasResolvedKey) return false;
+	if (!ctx.hasUI) return false;
+	return runSetup(ctx, /*forceAll=*/ true);
+}
+
+/** Force-show the wizard from /cliproxy-setup regardless of current config. */
+export async function runSetup(
+	ctx: ExtensionCommandContext,
+	forceAll = false,
+): Promise<boolean> {
+	const existing = loadConfig();
+	const values: Record<string, string> = {
+		endpoint: existing.proxy.endpoint ?? "",
+		apiKey: existing.proxy.apiKey ?? "",
+		providerPrefix: existing.proxy.providerPrefix ?? "",
+		usageKey: existing.proxy.usageKey ?? "",
+	};
+
+	let cancelled = false;
+	for (const step of STEPS) {
+		const prefill = forceAll
+			? (values[step.label] ?? step.initialValue ?? "")
+			: (values[step.label] ?? "");
+		// Skip already-filled non-empty fields when called for first-run setup
+		// (we still want to ask for missing pieces, but not re-prompt for
+		// what's already saved).
+		if (!forceAll && prefill) {
+			continue;
+		}
+
+		const result = await promptStep(
+			ctx,
+			step,
+			prefill || step.initialValue || "",
+		);
+		if (result === undefined) {
+			cancelled = true;
+			break;
+		}
+		const trimmed = result.trim();
+		if (!trimmed) {
+			if (step.required) {
+				ctx.ui.notify(`${step.label} is required — aborted`, "warning");
+				cancelled = true;
+				break;
+			}
+			values[step.label] = "";
+			continue;
+		}
+		values[step.label] =
+			step.label === "providerPrefix" || step.label === "endpoint"
+				? trimmed
+				: normalizeValue(trimmed);
+	}
+
+	if (cancelled) return false;
+
+	const next = { ...existing };
+	next.proxy = {
+		...existing.proxy,
+		endpoint: values.endpoint ?? "",
+		apiKey: values.apiKey ?? "",
+		providerPrefix: values.providerPrefix ?? "",
+	};
+	if (values.usageKey) next.proxy.usageKey = values.usageKey;
+	else delete next.proxy.usageKey;
+
+	saveConfig(next);
+	ctx.ui.notify(`saved to ${CONFIG_PATH}`, "info");
+	return true;
+}
+
+/**
+ * If the user typed a bare ~/path or /abs/path, wrap it in `!cat <path>`
+ * so resolveConfigValue executes it. Otherwise return as-is.
+ */
+function normalizeValue(raw: string): string {
+	if (raw.startsWith("!") || raw.startsWith("$")) return raw;
+	if (raw.startsWith("~/")) {
+		const expanded = raw.replace(/^~/, homedir());
+		return existsSync(expanded) ? `!cat ${raw}` : raw;
+	}
+	if (raw.startsWith("/")) {
+		return existsSync(raw) ? `!cat ${raw}` : raw;
+	}
+	return raw;
+}
+
+// --------------------------------------------------------------------------- step prompt
+
+async function promptStep(
+	ctx: ExtensionCommandContext,
+	step: WizardStep,
+	prefill: string,
+): Promise<string | undefined> {
+	return ctx.ui.custom<string | undefined>(
+		(tui, theme, _kb, done) =>
+			buildStepOverlay(
+				tui as unknown as {
+					requestRender(): void;
+					rows?: number;
+					cols?: number;
+				},
+				theme as unknown as Theme,
+				step,
+				prefill,
+				done,
+			),
+		{
+			overlay: true,
+			overlayOptions: { width: 100, maxHeight: "60%" },
+		},
+	);
+}
+
+function buildStepOverlay(
+	tui: { requestRender(): void; rows?: number; cols?: number },
+	theme: Theme,
+	step: WizardStep,
+	prefill: string,
+	done: (v: string | undefined) => void,
+): Component & { handleInput(data: string): void } {
+	const input = new Input();
+	input.setValue(prefill);
+	input.focused = true;
+	let error: string | null = null;
+
+	const submit = (raw: string): void => {
+		if (!raw && !step.required) {
+			done("");
+			return;
+		}
+		if (!raw && step.required) {
+			error = "required field";
+			tui.requestRender();
+			return;
+		}
+		if (step.validate) {
+			const trimmed = raw.trim();
+			// Only validate the literal form. Indirect ("!", "$") values are
+			// validated at apply time, not here.
+			if (trimmed && !trimmed.startsWith("!") && !trimmed.startsWith("$")) {
+				const err = step.validate(trimmed);
+				if (err) {
+					error = err;
+					tui.requestRender();
+					return;
+				}
+			}
+		}
+		done(raw);
+	};
+
+	input.onSubmit = submit;
+	input.onEscape = () => done(undefined);
+
+	return {
+		render(width: number): string[] {
+			const inner = Math.max(40, width - 2);
+			const top = theme.fg(
+				"borderAccent",
+				`\u256d\u2500 ${theme.bold(theme.fg("accent", `setup: ${step.label}`))} ${"\u2500".repeat(Math.max(0, inner - visibleWidth(`setup: ${step.label}`) - 4))}\u256e`,
+			);
+			const hintLine = pad(theme.fg("dim", step.hint), inner - 2);
+			const inputLines = input.render(inner - 4);
+			const errLine = error
+				? pad(theme.fg("error", `! ${error}`), inner - 2)
+				: pad(theme.fg("dim", "enter = save  ·  esc = cancel"), inner - 2);
+			const side = theme.fg("borderAccent", "\u2502");
+			const out: string[] = [top];
+			out.push(`${side} ${hintLine} ${side}`);
+			out.push(`${side} ${pad("", inner - 2)} ${side}`);
+			for (const ln of inputLines) {
+				out.push(
+					`${side} ${pad(theme.fg("accent", `> ${ln}`), inner - 2)} ${side}`,
+				);
+			}
+			out.push(`${side} ${pad("", inner - 2)} ${side}`);
+			out.push(`${side} ${errLine} ${side}`);
+			out.push(
+				theme.fg("borderAccent", `\u2570${"\u2500".repeat(inner)}\u256f`),
+			);
+			return out;
+		},
+		invalidate(): void {
+			input.invalidate();
+		},
+		handleInput(data: string): void {
+			const kb = getKeybindings();
+			// Plain Esc cancels even if Input doesn't dispatch it.
+			if (kb.matches(data, "tui.select.cancel") || matchesKey(data, "escape")) {
+				done(undefined);
+				return;
+			}
+			error = null;
+			input.handleInput(data);
+			tui.requestRender();
+		},
+	};
+}
+
+function pad(s: string, width: number): string {
+	const w = visibleWidth(s);
+	if (w >= width) return s;
+	return s + " ".repeat(width - w);
+}

package/src/ui-usage.ts

@@ -0,0 +1,191 @@
+// Renders /api/usage as multi-line ANSI text for /cliproxy-usage overlay.
+//
+// Lines are wrapped pre-render so they never reflow inside the overlay box —
+// long errors get truncated with an ellipsis on the same line. Progress bars
+// are colored by remaining capacity: green ≥40%, yellow 15–40%, red <15%.
+
+import type { UsageAccount, UsageDocument, UsageGroup } from "./fetch-usage.ts";
+
+// 256-color palette codes (truecolor and 256color terminals both render).
+const C = {
+	reset: "\x1b[0m",
+	bold: "\x1b[1m",
+	dim: "\x1b[2m",
+	accent: "\x1b[38;5;111m", // soft blue
+	muted: "\x1b[38;5;245m",
+	dim2: "\x1b[38;5;240m",
+	green: "\x1b[38;5;114m",
+	yellow: "\x1b[38;5;179m",
+	red: "\x1b[38;5;167m",
+	greenBg: "\x1b[48;5;22m",
+	yellowBg: "\x1b[48;5;94m",
+	redBg: "\x1b[48;5;52m",
+};
+
+const BAR_WIDTH = 18;
+const MAX_LABEL_WIDTH = 28;
+
+export interface RenderUsageOptions {
+	/** Include accounts with `disabled` flag in the output. */
+	showDisabled?: boolean;
+	/** Print the raw backend error string on a second line (instead of just the short [err 401] marker). */
+	verbose?: boolean;
+}
+
+export function renderUsage(
+	doc: UsageDocument,
+	opts: RenderUsageOptions = {},
+): string[] {
+	const lines: string[] = [];
+	const byProvider = new Map<string, UsageAccount[]>();
+	let hiddenDisabled = 0;
+	for (const a of doc.accounts) {
+		if (!opts.showDisabled && a.disabled) {
+			hiddenDisabled++;
+			continue;
+		}
+		const arr = byProvider.get(a.provider) ?? [];
+		arr.push(a);
+		byProvider.set(a.provider, arr);
+	}
+
+	lines.push(`${C.dim}generated ${doc.generatedAt}${C.reset}`);
+	if (doc.unsupportedProviders.length > 0) {
+		lines.push(
+			`${C.dim}providers without quota lookup:${C.reset} ${doc.unsupportedProviders.join(", ")}`,
+		);
+	}
+	if (hiddenDisabled > 0) {
+		lines.push(
+			`${C.dim}hidden disabled accounts:${C.reset} ${hiddenDisabled} ${C.dim2}(press d to show)${C.reset}`,
+		);
+	}
+
+	for (const [provider, accounts] of Array.from(byProvider.entries()).sort()) {
+		lines.push("");
+		lines.push(`${C.bold}${C.accent}▌ ${provider}${C.reset}`);
+		for (const a of accounts) {
+			lines.push(formatAccountHeader(a));
+			if (!a.supported) {
+				lines.push(`    ${C.dim2}(provider not quota-aware)${C.reset}`);
+				continue;
+			}
+			if (a.error) {
+				if (opts.verbose) {
+					for (const ln of wrapText(a.error, 88)) {
+						lines.push(`    ${C.red}${ln}${C.reset}`);
+					}
+				}
+				continue;
+			}
+			const groups = a.groups ?? [];
+			if (groups.length === 0) {
+				lines.push(`    ${C.dim2}(no active quota windows)${C.reset}`);
+				continue;
+			}
+			for (const g of groups) lines.push(formatGroup(g));
+		}
+	}
+
+	// Legend at the bottom — distinguishes the per-account status icons
+	// (left of label) from the success/fail request counters (right of label).
+	lines.push("");
+	lines.push(
+		`${C.dim}legend:${C.reset}  ` +
+			`${ICON_OK_DOT} ok   ` +
+			`${ICON_WARN} error/unavailable   ` +
+			`${ICON_DISABLED} disabled   ` +
+			`${C.green}✓N${C.reset}/${C.red}✗N${C.reset} request counters   ` +
+			`${C.dim}v = verbose, d = show disabled${C.reset}`,
+	);
+	return lines;
+}
+
+function wrapText(s: string, max: number): string[] {
+	if (s.length <= max) return [s];
+	const out: string[] = [];
+	let rest = s;
+	while (rest.length > max) {
+		let cut = rest.lastIndexOf(" ", max);
+		if (cut < max * 0.6) cut = max;
+		out.push(rest.slice(0, cut));
+		rest = rest.slice(cut).replace(/^\s+/, "");
+	}
+	if (rest) out.push(rest);
+	return out;
+}
+
+function formatAccountHeader(a: UsageAccount): string {
+	const status = accountStatus(a);
+	const counters = `${C.green}✓${a.success}${C.reset} ${C.red}✗${a.failed}${C.reset}`;
+	const label = truncate(a.label, 36);
+	return `  ${status} ${C.bold}${label}${C.reset}  ${counters}`;
+}
+
+// Status icons — distinct from the ✓/✗ request counters so the user
+// can tell account-level state (left) from per-request totals (right).
+const ICON_OK_DOT = `${C.green}●${C.reset}`;
+const ICON_WARN = `${C.yellow}⚠${C.reset}`;
+const ICON_DISABLED = `${C.dim2}⊘${C.reset}`;
+
+function accountStatus(a: UsageAccount): string {
+	if (a.disabled) return ICON_DISABLED;
+	if (a.unavailable || a.error || (a.status && a.status !== "active")) {
+		return ICON_WARN;
+	}
+	return ICON_OK_DOT;
+}
+
+function formatGroup(g: UsageGroup): string {
+	const f = clamp(g.remainingFraction);
+	const pct = Math.round(f * 100);
+	const bar = renderBar(f);
+	const reset = g.resetTime
+		? `  ${C.dim}reset ${humanizeReset(g.resetTime)}${C.reset}`
+		: "";
+	const label = truncate(g.label, MAX_LABEL_WIDTH).padEnd(MAX_LABEL_WIDTH, " ");
+	return `    ${bar} ${formatPct(pct, f)}  ${label}${reset}`;
+}
+
+function renderBar(fraction: number): string {
+	const f = clamp(fraction);
+	const filled = Math.round(f * BAR_WIDTH);
+	const color = colorForFraction(f);
+	const dimColor = C.dim2;
+	const full = "█".repeat(filled);
+	const empty = "░".repeat(BAR_WIDTH - filled);
+	return `${dimColor}[${color}${full}${dimColor}${empty}]${C.reset}`;
+}
+
+function formatPct(pct: number, fraction: number): string {
+	const color = colorForFraction(fraction);
+	return `${color}${String(pct).padStart(3)}%${C.reset}`;
+}
+
+function colorForFraction(f: number): string {
+	if (f >= 0.4) return C.green;
+	if (f >= 0.15) return C.yellow;
+	return C.red;
+}
+
+function humanizeReset(iso: string): string {
+	const t = Date.parse(iso);
+	if (!Number.isFinite(t)) return iso;
+	const ms = t - Date.now();
+	if (ms <= 0) return "now";
+	const min = Math.round(ms / 60_000);
+	if (min < 60) return `${min}m`;
+	const hr = Math.round(min / 60);
+	if (hr < 48) return `${hr}h`;
+	const d = Math.round(hr / 24);
+	return `${d}d`;
+}
+
+function clamp(f: number): number {
+	return Math.max(0, Math.min(1, f));
+}
+
+function truncate(s: string, max: number): string {
+	if (s.length <= max) return s;
+	return `${s.slice(0, max - 1)}…`;
+}