learnharness/components/settings/keys-section.tsx

"use client";
import { translator, type Translator } from "@/src/core";
import { LanguageSelect, useI18n } from "@/components/i18n";

/**
 * The Keys section (wave-5 polish, 2026-09-21 — owner design): a MINIMAL
 * key-value table. Provider left, masked key right, no description hints
 * (they took too much space), the "Get a key ↗" link a tiny muted guest.
 * Clicking a writable row unfolds a paste field + Save (+ Delete for a
 * file-sourced value) beneath it; Esc or a second click folds it away.
 * The Add-provider control is the LAST ROW of the table and uses the
 * app's shared dropdown look (ProviderMenuList — fuzzy search over the
 * 33 pi-ai providers).
 *
 * Owner rulings carried in:
 *  - Env-owned rows (a real environment variable owns the name — dev
 *    .env.local or launch env) render READ-ONLY + dimmed, no paste field:
 *    a paste box on a key the UI cannot make live would mislead.
 *  - OpenRouter is NOT special: one provider among 33, a row only when
 *    stored, otherwise it lives in the Add dropdown like everyone else.
 *  - Providers groups API keys, subscriptions, dictation and search.
 *    Unknown variables stay masked/read-only at the end of Model API keys.
 *
 * API: GET /api/keys (masked statuses + the providers array), PUT
 * /api/keys/:id (shape-gated 400s land inline), DELETE. Saves take
 * effect immediately. Plaintext never returns from the store.
 */

import { useEffect, useRef, useState } from "react";
import {
	AUTH_KEYS,
	CUSTOM_MODEL_DEFAULT_CONTEXT_WINDOW,
	CUSTOM_MODEL_DEFAULT_MAX_TOKENS,
	CUSTOM_PROVIDER,
	normalizeBaseUrl,
	type AuthKeyStatus,
	type CustomModel,
	type CustomModelOverride,
} from "@/src/core";
import { SettingsGroup, SettingsRow } from "./controls.tsx";
import { SubscriptionConnections } from "./subscription-connections.tsx";
import { ClaudeCodeInstallationStatus } from "./claude-code-status.tsx";
import { ProviderMenuList } from "./model-menu.tsx";
import { MenuShell } from "@/components/menu-shell";
import { notifySettingsSaved } from "@/components/settings-signal";

/** One pi-ai provider with plain API-key auth (the Platform seam —
 *  derived from pi-ai's own env-key table; no drift possible). */
export interface ProviderKeyInfo {
	id: string;
	envVar: string;
	label: string;
}

interface KeysResponse {
	keys: AuthKeyStatus[];
	providers?: ProviderKeyInfo[];
}

/** The custom endpoint's non-secret status (GET /api/custom-provider). */
interface CustomStatus {
	keyReuseRequired: boolean;
	revision: string;
	authMode: "keyless" | "apiKey";
	keySource: "env" | "file" | "none";
	baseUrl: string;
	models: CustomModel[];
	/** User pins by model id (context / max output / thinking). */
	overrides: Record<string, CustomModelOverride>;
	manualModels: string[];
	keyPresent: boolean;
}

async function readCustomStatus(inspectKey = false): Promise<CustomStatus> {
	const response = await fetch(`/api/custom-provider${inspectKey ? "?authMode=apiKey" : ""}`);
	if (!response.ok) throw new Error("Unable to load custom configuration.");
	const cp = await response.json() as Partial<CustomStatus>;
	return { keyReuseRequired: Boolean(cp.keyReuseRequired), revision: response.headers.get("etag") ?? "", authMode: cp.authMode ?? "keyless", keySource: cp.keySource ?? "none", baseUrl: cp.baseUrl ?? "", models: cp.models ?? [], overrides: cp.overrides ?? {}, manualModels: cp.manualModels ?? [], keyPresent: Boolean(cp.keyPresent) };
}

/** The curated tools group, pinned by id (the catalog owns the copy;
 *  these ids are the contract). Derived from the catalog (search wave,
 *  2026-09-20: the Google CSE pair retired, Tavily + Brave joined) — the
 *  section can never drift from core/auth-keys.ts again. */
const TOOL_IDS = AUTH_KEYS.map((k) => k.id) as readonly string[];

/** The custom endpoint's synthetic Add-provider entry (offered only while unconfigured). */
export const CUSTOM_PROVIDER_INFO: ProviderKeyInfo = {
	id: CUSTOM_PROVIDER.id,
	envVar: CUSTOM_PROVIDER.envVar,
	label: CUSTOM_PROVIDER.label,
};

/** The classification driving the table groups. Pure — exported for
 *  tests. OpenRouter is un-pinned (wave-5 owner ruling): no synthesis,
 *  no special row — it rides the same provider classification. */
export function classifyKeys(
	statuses: readonly AuthKeyStatus[],
	providers: readonly ProviderKeyInfo[] | undefined,
): {
	/** Stored provider keys (env or file), in GET order. */
	providerRows: AuthKeyStatus[];
	/** The curated tools rows (synthesized when absent — always shown,
	 *  they carry the docs links a first boot needs). */
	toolRows: AuthKeyStatus[];
	/** Unknown file vars — preserved, read-only. */
	unknownRows: AuthKeyStatus[];
	/** Providers without a stored key — the Add dropdown's options. */
	addable: ProviderKeyInfo[];
} {
	const byId = new Map(statuses.map((s) => [s.id, s]));
	const isTool = (id: string) => (TOOL_IDS as readonly string[]).includes(id);
	const providerEnv = new Set((providers ?? []).map((p) => p.envVar));
	const synth = (id: string): AuthKeyStatus => ({
		id,
		info: null,
		present: false,
		masked: null,
		source: "none",
		shadowedByEnv: false,
	});
	const providerRows: AuthKeyStatus[] = [];
	const unknownRows: AuthKeyStatus[] = [];
	for (const s of statuses) {
		if (isTool(s.id)) continue;
		// The custom endpoint's key has its OWN home (the Custom endpoint
		// section), so it never shows here — not as a provider row, not as an
		// "other stored variable".
		if (s.id === CUSTOM_PROVIDER.envVar) continue;
		if (providerEnv.has(s.id) || (!s.info && providers === undefined)) providerRows.push(s);
		else if (!s.info) unknownRows.push(s);
		// (pre-interlude catalogs: a curated-but-unclassified status still
		// renders as a provider row so nothing disappears)
		else providerRows.push(s);
	}
	return {
		providerRows,
		toolRows: TOOL_IDS.map((id) => byId.get(id) ?? synth(id)),
		unknownRows,
		addable: (providers ?? []).filter((p) => !byId.has(p.envVar)),
	};
}

/** A key row names its credential, not whichever provider sorts first.
 * Pi exposes Zen and Go separately but both read OPENCODE_API_KEY. */
export function providerKeyLabel(id: string, providers: readonly ProviderKeyInfo[] | undefined): string | undefined {
	const matches = providers?.filter((p) => p.envVar === id);
	if (matches?.some((p) => p.id === "opencode") && matches.some((p) => p.id === "opencode-go")) return "OpenCode (Zen / Go)";
	return matches?.[0]?.label;
}

/** The minimal status line, e.g. "…ab12 · 64 chars" (" · env" marks an
 *  environment-owned value — the row itself is read-only then). Pure. */
export function keyStatusLine(status: AuthKeyStatus, t: Translator = translator("en")): string {
	if (!status.present || !status.masked) return t("not set");
	const tail = status.masked.replace(/ \((\d+) chars\)$/, "");
	const chars = status.masked.match(/\((\d+) chars\)$/)?.[1] ?? "?";
	return `${tail} · ${chars}${status.source === "env" ? t(" · env") : ""}`;
}

/** One table row: label left, tiny docs link + status right. Writable
 *  rows click-unfold an editor beneath (owner interaction); env-owned
 *  rows are dimmed and read-only (a paste box there would mislead). */
function KeyTableRow({
	label,
	docsUrl,
	status,
	expanded,
	onToggle,
	onSave,
	onDelete,
	onCancel,
	testid,
}: {
	label: string;
	/** The "Get a key ↗" target — curated keys carry one. */
	docsUrl?: string;
	status: AuthKeyStatus;
	expanded: boolean;
	onToggle: () => void;
	onSave: (value: string) => Promise<string | null>;
	onDelete?: () => Promise<void>;
	/** Folds the editor (owner, fix wave: the way OUT of a paste prompt
	 *  must be visible — Cancel beside Save/Delete, not only Esc). */
	onCancel: () => void;
	testid: string;
}) {
	const { t } = useI18n();
	const envOwned = status.source === "env";
	const [value, setValue] = useState("");
	const [error, setError] = useState<string | null>(null);
	const [busy, setBusy] = useState(false);

	async function save() {
		if (!value.trim() || busy) return;
		setBusy(true);
		setError(null);
		const err = await onSave(value);
		if (err) setError(err);
		else setValue("");
		setBusy(false);
	}

	// INLINE editing (owner, fix wave: "type the keys in line — more
	// table-like"): the expanded row becomes the editor itself — label
	// left, the paste field filling the middle, Save | Cancel (| Delete)
	// right — instead of a second line beneath the row.
	if (expanded && !envOwned) {
		return (
			<div data-testid={testid}>
				<div className="flex items-center gap-2 rounded-sm px-1 py-1.5" data-testid={`${testid}-editor`}>
					<span className="shrink-0 font-ui text-xs text-foreground">{label}</span>
					<input
						type="text"
						value={value}
						onChange={(e) => setValue(e.target.value)}
						onKeyDown={(e) => {
							if (e.key === "Enter") void save();
						}}
						placeholder={t("Paste key…")}
						aria-label={t("{v0} key", { v0: label })}
						data-testid={`${testid}-input`}
						disabled={busy}
						autoFocus
						className="h-7 min-w-0 flex-1 rounded-sm border border-border bg-background px-1.5 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
					/>
					<button
						type="button"
						onClick={() => void save()}
						disabled={busy || !value.trim()}
						data-testid={`${testid}-save`}
						className="shrink-0 text-xs text-foreground underline-offset-2 hover:underline disabled:text-muted-foreground/40 disabled:no-underline"
					>
						{t("Save")}</button>
					<button
						type="button"
						onClick={onCancel}
						disabled={busy}
						data-testid={`${testid}-cancel`}
						className="shrink-0 text-xs text-muted-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
					>
						{t("Cancel")}</button>
					{status.present && status.source === "file" && onDelete && (
						<button
							type="button"
							onClick={() => void onDelete()}
							disabled={busy}
							data-testid={`${testid}-delete`}
							className="shrink-0 text-xs text-muted-foreground/70 underline-offset-2 hover:text-red-500 hover:underline"
						>
							{t("Delete")}</button>
					)}
				</div>
				{error && (
					<p role="alert" data-testid={`${testid}-error`} className="px-1 text-xs text-red-500">
						{t(error)}
					</p>
				)}
			</div>
		);
	}

	return (
		<div data-testid={testid} className={envOwned ? "opacity-40" : undefined}>
			<button
				type="button"
				aria-expanded={expanded}
				data-testid={`${testid}-row`}
				onClick={() => !envOwned && onToggle()}
				className={`flex w-full items-center justify-between gap-3 rounded-sm px-1 py-1.5 text-left ${
					envOwned ? "cursor-default" : "cursor-pointer transition-colors hover:bg-accent/50"
				}`}
			>
				<span className="font-ui text-xs text-foreground">{label}</span>
				<span className="flex items-center gap-2">
					{docsUrl && (
						<a
							href={docsUrl}
							target="_blank"
							rel="noreferrer"
							onClick={(e) => e.stopPropagation()}
							className="text-[10px] text-muted-foreground/60 underline-offset-2 hover:text-foreground hover:underline"
						>
							{t("key ↗")}</a>
					)}
					<span data-testid={`${testid}-status`} className="font-mono text-[11px] text-muted-foreground">
						{keyStatusLine(status, t)}
					</span>
				</span>
			</button>
			{error && (
				<p role="alert" data-testid={`${testid}-error`} className="pl-6 text-xs text-red-500">
					{t(error)}
				</p>
			)}
		</div>
	);
}

/** The Add-provider control — the table's last row, the app's shared
 *  dropdown look (portaled menu, the search + arrow-walk machine). */
function AddProviderRow({
	addable,
	onPick,
}: {
	addable: ProviderKeyInfo[];
	onPick: (p: ProviderKeyInfo) => void;
}) {
	const { t } = useI18n();
	const [open, setOpen] = useState(false);
	const anchorRef = useRef<HTMLDivElement>(null);

	useEffect(() => {
		if (!open) return;
		const onPointerDown = (e: PointerEvent) => {
			const target = e.target as Node;
			if (anchorRef.current?.contains(target)) return;
			if (target instanceof Element && target.closest("[data-lh-menu]")) return;
			if (target instanceof Element && target.closest('[role="dialog"]')) setOpen(false);
		};
		const onKeyDown = (e: KeyboardEvent) => {
			if (e.key === "Escape") {
				e.stopPropagation();
				setOpen(false);
			}
		};
		document.addEventListener("pointerdown", onPointerDown);
		document.addEventListener("keydown", onKeyDown);
		return () => {
			document.removeEventListener("pointerdown", onPointerDown);
			document.removeEventListener("keydown", onKeyDown);
		};
	}, [open]);

	return (
		<div ref={anchorRef} className="relative">
			<button
				type="button"
				aria-expanded={open}
				data-testid="add-provider"
				onClick={() => setOpen((v) => !v)}
				className="flex w-full items-center justify-between gap-3 rounded-sm px-1 py-1.5 text-left font-ui text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
			>
				<span>+ Add a provider</span>
				{addable.length > 0 && <span className="font-mono text-[11px]">{addable.length}</span>}
			</button>
			{open && (
				<MenuShell
					anchorRef={anchorRef}
					testid="add-provider-menu"
					preferredSide="down"
					menuClass="flex w-72 flex-col rounded-xl border border-border bg-card p-2 text-xs shadow-xl"
				>
					{/* Close on pick (owner, fix wave): a chosen provider ends
					    the dropdown — the paste row is the next step. */}
					<ProviderMenuList
						providers={addable}
						onPick={(p) => {
							setOpen(false);
							onPick(p);
						}}
					/>
				</MenuShell>
			)}
		</div>
	);
}

export function KeysSection({
	/** A deep-linked row to unfold on arrival (zero-keys wave): the
	 *  dictation error's click lands here on DEEPGRAM_API_KEY. Followed
	 *  while mounted too — the settings dialog's while-open retarget
	 *  pattern. undefined = nothing seeded. */
	initialRow,
}: {
	initialRow?: string;
}) {
	const { t } = useI18n();
	const [statuses, setStatuses] = useState<AuthKeyStatus[] | null>(null);
	const [providers, setProviders] = useState<ProviderKeyInfo[] | undefined>(undefined);
	const followedProvider = useRef<string | null>(null);
	const [loading, setLoading] = useState(true);
	/** The unfolded row (its id), null = all folded. Seeded by the
	 *  deep-link (initialRow) and re-followed when it retargets. */
	const [openRow, setOpenRow] = useState<string | null>(initialRow ?? null);
	/** The paste editor for a freshly chosen Add-provider target. */
	const [adding, setAdding] = useState<ProviderKeyInfo | null>(null);
	const [addError, setAddError] = useState<string | null>(null);
	/** The custom endpoint's status + whether its connect editor is open. */
	const [custom, setCustom] = useState<CustomStatus | null>(null);
	const [addingCustom, setAddingCustom] = useState(false);

	// Escape folds any open editor (unfolded row or the Add-provider paste)
	// WITHOUT closing the dialog. Claimed at document CAPTURE phase — the
	// only stopPropagation that outruns both the input's React handler and
	// the dialog's window-level listener.
	useEffect(() => {
		if (openRow === null && adding === null && !addingCustom) return;
		const onKeyDown = (e: KeyboardEvent) => {
			if (e.key !== "Escape") return;
			// A language dropdown above this editor in the dismissal stack owns
			// the first Escape; do not swallow it at document capture phase.
			if (document.querySelector('[data-testid="dictation-language-menu"], [data-testid="language-select-sttLanguage-menu"]')) return;
			e.preventDefault();
			e.stopPropagation();
			setOpenRow(null);
			setAdding(null);
			setAddingCustom(false);
		};
		document.addEventListener("keydown", onKeyDown, true);
		return () => document.removeEventListener("keydown", onKeyDown, true);
	}, [openRow, adding, addingCustom]);

	const reload = async () => {
		try {
			const body = (await fetch("/api/keys").then((r) => r.json())) as KeysResponse;
			setStatuses(body.keys ?? []);
			if (body.providers) setProviders(body.providers);
		} catch {
			setStatuses([]);
		} finally {
			setLoading(false);
		}
		// Best-effort and independent: the custom endpoint's status must never
		// blank the provider-key list above if its fetch fails.
		try {
			setCustom(await readCustomStatus());
		} catch {
			/* custom status unavailable — leave it unset */
		}
	};

	useEffect(() => {
		void reload();
	}, []);

	// The deep-link follow: a retarget while the section is open (the
	// same while-open pattern the dialog's section nav uses) unfolds the
	// named row; a fresh mount seeds it via the useState initializer.
	useEffect(() => {
		if (initialRow !== undefined) setOpenRow(initialRow);
		followedProvider.current = null;
	}, [initialRow]);
	// A missing model-provider key has no table row yet. Deep-link into the
	// existing Add-provider editor instead (for example, OpenRouter STT setup).
	useEffect(() => {
		if (!initialRow || !statuses || !providers || followedProvider.current === initialRow) return;
		followedProvider.current = initialRow;
		if (statuses.some((status) => status.id === initialRow)) return;
		const provider = providers.find((provider) => provider.envVar === initialRow);
		if (provider) { setAdding(provider); setAddError(null); setOpenRow(null); }
	}, [initialRow, statuses, providers]);

	async function saveKey(id: string, value: string): Promise<string | null> {
		const res = await fetch(`/api/keys/${id}`, {
			method: "PUT",
			headers: { "content-type": "application/json" },
			body: JSON.stringify({ value }),
		});
		if (!res.ok) {
			const body = (await res.json().catch(() => ({}))) as { error?: string };
			return body.error ?? `Save failed (${res.status})`;
		}
		await reload();
		// The cross-surface keys signal (zero-keys wave): the zero-keys pill,
		// the setup dialog's stage advance, and any other keys reader hear
		// that a key landed — deletions included (see deleteKey below).
		notifySettingsSaved("keys");
		return null;
	}

	async function deleteKey(id: string): Promise<void> {
		await fetch(`/api/keys/${id}`, { method: "DELETE" }).catch(() => undefined);
		await reload();
		notifySettingsSaved("keys");
	}

	/** Forget the custom endpoint (config + key server-side), same rhythm as
	 *  deleteKey: fire, re-read, broadcast so the catalog narrows everywhere. */
	async function disconnectCustom(revision: string): Promise<string | null> {
		const res = await fetch("/api/custom-provider", { method: "DELETE", headers: { "content-type": "application/json", "if-match": revision }, body: JSON.stringify({}) }).catch(() => null);
		if (!res?.ok) return res ? ((await res.json().catch(() => ({}))).error ?? "Disconnect failed.") : "Disconnect failed. Check your connection.";
		setAddingCustom(false);
		await reload();
		notifySettingsSaved("keys");
		return null;
	}

	if (loading || statuses === null) {
		return <p className="px-6 py-5 text-xs text-muted-foreground/70">{t("Loading keys…")}</p>;
	}

	const { providerRows, toolRows, unknownRows, addable } = classifyKeys(statuses, providers);

	async function saveNewProvider(p: ProviderKeyInfo, value: string) {
		const err = await saveKey(p.envVar, value);
		if (err) setAddError(err);
		else {
			setAdding(null);
			setAddError(null);
		}
	}

	return (
		<>
			<SettingsGroup label={t("Model API keys")} testid="group-provider-keys">
				{providerRows.map((status) => (
					<KeyTableRow
						key={status.id}
						label={providerKeyLabel(status.id, providers) ?? status.info?.label ?? status.id}
						docsUrl={status.info?.docsUrl}
						status={status}
						expanded={openRow === status.id}
						onToggle={() => setOpenRow(openRow === status.id ? null : status.id)}
						onSave={async (v) => {
							const err = await saveKey(status.id, v);
							if (!err) setOpenRow(null); // fold on success — rest state
							return err;
						}}
						onCancel={() => setOpenRow(null)}
						onDelete={() => deleteKey(status.id)}
						testid={`key-${status.id.toLowerCase()}`}
					/>
				))}
				{custom?.baseUrl && (
					<CustomEndpointRow
						status={custom}
						expanded={addingCustom}
						onToggle={() => setAddingCustom((v) => !v)}
					/>
				)}
				{addingCustom && (
					<CustomEndpointEditor
						revision0={custom?.revision ?? ""}
						authMode0={custom?.authMode ?? "keyless"}
						keySource0={custom?.keySource ?? "none"}
						keyReuseRequired0={custom?.keyReuseRequired ?? false}
						onReload={async () => { await reload(); setAddingCustom(false); }}
						baseUrl0={custom?.baseUrl ?? ""}
						keyPresent={custom?.keyPresent ?? false}
						models={custom?.models ?? []}
						overrides={custom?.overrides ?? {}}
						manualModels0={custom?.manualModels ?? []}
						onSaved={async () => {
							setAddingCustom(false);
							await reload();
							notifySettingsSaved("keys");
						}}
						onPinsSaved={async () => {
							await reload();
							notifySettingsSaved("keys");
						}}
						onDelete={disconnectCustom}
						onCancel={() => setAddingCustom(false)}
					/>
				)}
				{providers !== undefined && (
					<AddProviderRow
						addable={custom?.baseUrl ? addable : [...addable, CUSTOM_PROVIDER_INFO]}
						onPick={(p) => {
							setAddError(null);
							if (p.id === CUSTOM_PROVIDER.id) {
								setAdding(null);
								setAddingCustom(true);
							} else {
								setAddingCustom(false);
								setAdding(p);
							}
						}}
					/>
				)}
				{adding && (
					<div className="flex items-center gap-2 rounded-sm px-1 py-1.5" data-testid={`key-${adding.id}-editor`}>
						<span className="shrink-0 font-ui text-xs text-foreground">{adding.label}</span>
						<AddProviderEditor provider={adding} onSave={(v) => void saveNewProvider(adding, v)} onCancel={() => setAdding(null)} error={addError} />
					</div>
				)}
				{unknownRows.length > 0 && <div data-testid="group-unknown-keys">
					{unknownRows.map((status) => <div key={status.id} data-testid={`unknown-${status.id}`} className="flex items-center justify-between gap-3 px-1 py-1.5 opacity-40">
						<span className="font-mono text-xs text-foreground">{status.id}</span>
						<span className="font-mono text-[11px] text-muted-foreground">{status.masked}</span>
					</div>)}
				</div>}
			</SettingsGroup>

			<SettingsGroup label={t("Subscriptions")} testid="group-subscriptions">
				<SubscriptionConnections />
			</SettingsGroup>

			<SettingsGroup label={t("External CLI")} testid="group-external-cli">
				<ClaudeCodeInstallationStatus />
			</SettingsGroup>

			{(["Dictation", "Search"] as const).map((label) => <SettingsGroup key={label} label={t(label)} testid={label === "Dictation" ? "group-dictation" : "group-search"}>
				{toolRows.filter((status) => label === "Dictation" ? status.id === "DEEPGRAM_API_KEY" : status.id !== "DEEPGRAM_API_KEY").map((status) => (
					<KeyTableRow
						key={status.id}
						label={status.info?.label ?? status.id}
						docsUrl={status.info?.docsUrl}
						status={status}
						expanded={openRow === status.id}
						onToggle={() => setOpenRow(openRow === status.id ? null : status.id)}
						onSave={async (v) => {
							const err = await saveKey(status.id, v);
							if (!err) setOpenRow(null);
							return err;
						}}
						onCancel={() => setOpenRow(null)}
						onDelete={() => deleteKey(status.id)}
						testid={`key-${status.id.toLowerCase()}`}
					/>
				))}
				{label === "Dictation" && <>
					<SettingsRow label={t("Speech recognition language")} testid="row-dictation-language"><LanguageSelect field="sttLanguage" /></SettingsRow>
					<p data-testid="dictation-setup-hint" className="px-1 text-[11px] leading-relaxed text-muted-foreground/70">
						Create a <a
							href="https://console.deepgram.com/"
							target="_blank"
							rel="noreferrer"
							className="underline underline-offset-2 hover:text-foreground"
						>Deepgram API key</a> with the Member role or higher, then add it above.
					</p>
				</>}
			</SettingsGroup>)}

		</>
	);
}

/** The paste field for a provider chosen in the Add dropdown — rendered
 *  beneath the Add row until saved or cancelled. */
function AddProviderEditor({
	provider,
	onSave,
	onCancel,
	error,
}: {
	provider: ProviderKeyInfo;
	onSave: (value: string) => void;
	onCancel: () => void;
	error: string | null;
}) {
	const { t } = useI18n();
	const [value, setValue] = useState("");
	return (
		<>
			<input
				type="text"
				value={value}
				onChange={(e) => setValue(e.target.value)}
				onKeyDown={(e) => {
					if (e.key === "Enter" && value.trim()) onSave(value);
				}}
				placeholder={t("Paste key…")}
				aria-label={t("{v0} key", { v0: provider.label })}
				data-testid={`key-${provider.id}-input`}
				autoFocus
				className="h-7 min-w-0 flex-1 rounded-sm border border-border bg-background px-1.5 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
			/>
			<button
				type="button"
				onClick={() => value.trim() && onSave(value)}
				disabled={!value.trim()}
				data-testid={`key-${provider.id}-save`}
				className="shrink-0 text-xs text-foreground underline-offset-2 hover:underline disabled:text-muted-foreground/40 disabled:no-underline"
			>
				{t("Save")}</button>
			<button
				type="button"
				onClick={onCancel}
				data-testid={`key-${provider.id}-cancel`}
				className="shrink-0 text-xs text-muted-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
			>
				{t("Cancel")}</button>
			{error && (
				<p role="alert" className="w-full pl-0 text-xs text-red-500" data-testid={`key-${provider.id}-error`}>
					{t(error)}
				</p>
			)}
		</>
	);
}

/** One donor editor for first setup and Settings; setup omits offline pin and
 * disconnect controls, while authentication/revisions/manual IDs stay identical. */
export function CustomEndpointSetup({ onSaved }: { onSaved: () => void | Promise<void> }) {
	const { t } = useI18n();
	const [status, setStatus] = useState<CustomStatus | null>(null);
	const [error, setError] = useState(false);
	async function reload() {
		try { setStatus(await readCustomStatus()); setError(false); }
		catch { setError(true); }
	}
	useEffect(() => { void reload(); }, []);
	if (!status || error) return <div className="text-xs">{t(error ? "Unable to load custom configuration." : "Loading custom configuration…")}{error && <button onClick={() => void reload()}>{t("Retry")}</button>}</div>;
	return <CustomEndpointEditor key={status.revision} setup revision0={status.revision} authMode0={status.authMode} keySource0={status.keySource} keyReuseRequired0={status.keyReuseRequired} baseUrl0={status.baseUrl} keyPresent={status.keyPresent} models={status.models} overrides={status.overrides} manualModels0={status.manualModels} onSaved={onSaved} onPinsSaved={reload} onReload={reload} onCancel={reload} />;
}

/** The custom endpoint's status row (shown once configured); clicking re-opens the editor. */
function CustomEndpointRow({
	status,
	expanded,
	onToggle,
}: {
	status: CustomStatus;
	expanded: boolean;
	onToggle: () => void;
}) {
	const { t } = useI18n();
	const count = status.models.length;
	const line = `${status.baseUrl} · ${count} model${count === 1 ? "" : "s"} · ${status.authMode === "keyless" ? "keyless" : status.keyPresent ? "API key" : "API key missing"}`;
	return (
		<div data-testid="custom-endpoint-row">
			<button
				type="button"
				data-testid="custom-endpoint-row-btn"
				aria-expanded={expanded}
				onClick={onToggle}
				className="flex w-full items-center justify-between gap-3 rounded-sm px-1 py-1.5 text-left cursor-pointer transition-colors hover:bg-accent/50"
			>
				<span className="font-ui text-xs text-foreground">{t("Custom endpoint")}</span>
				<span data-testid="custom-endpoint-status" className="max-w-[60%] truncate font-mono text-[11px] text-muted-foreground">
					{line}
				</span>
			</button>
		</div>
	);
}

/** A pin row's raw input state — "" means "no pin": the endpoint's own value,
 *  then the compiled default, decides. `reasoning` is tri-state. */
interface PinDraft {
	context: string;
	maxTokens: string;
	reasoning: "" | "on" | "off";
}

const pinDraft = (pin: CustomModelOverride | undefined): PinDraft => ({
	context: pin?.context === undefined ? "" : String(pin.context),
	maxTokens: pin?.maxTokens === undefined ? "" : String(pin.maxTokens),
	reasoning: pin?.reasoning === undefined ? "" : pin.reasoning ? "on" : "off",
});

/** One draft row per discovered model, seeded from the stored pins. */
function draftsFor(
	models: readonly CustomModel[],
	overrides: Record<string, CustomModelOverride>,
): Record<string, PinDraft> {
	return Object.fromEntries(models.map((m) => [m.id, pinDraft(overrides[m.id])]));
}

/** Drafts → the PATCH payload (replace-whole): a blank field sends nothing and
 *  a fully blank model is absent — which IS the un-pin. */
function pinsPayload(drafts: Record<string, PinDraft>): Record<string, CustomModelOverride> {
	const out: Record<string, CustomModelOverride> = {};
	for (const [id, d] of Object.entries(drafts)) {
		const pin: CustomModelOverride = {};
		if (d.context.trim()) pin.context = Number(d.context);
		if (d.maxTokens.trim()) pin.maxTokens = Number(d.maxTokens);
		if (d.reasoning !== "") pin.reasoning = d.reasoning === "on";
		if (Object.keys(pin).length) Object.defineProperty(out, id, { value: pin, enumerable: true });
	}
	return out;
}

/** testids must survive ids carrying slashes, colons, dots. */
const pinTestid = (prefix: string, id: string) => `${prefix}-${id.replace(/[^a-z0-9-]/gi, "_")}`;

/** The custom endpoint's connect editor: base URL + key → POST /api/custom-provider
 *  (validate + discover + register), and the per-model limits form → PATCH (pins,
 *  no probe, so it works with the local server switched off). Image capability is
 *  detected automatically. */
function CustomEndpointEditor({
	setup = false,
	revision0, authMode0, keySource0, keyReuseRequired0, onReload,
	baseUrl0,
	keyPresent: initialKeyPresent,
	models,
	overrides,
	manualModels0,
	onSaved,
	onPinsSaved,
	onCancel,
	onDelete,
}: {
	setup?: boolean;
	revision0: string;
	authMode0: "keyless" | "apiKey";
	keySource0: "env" | "file" | "none";
	keyReuseRequired0: boolean;
	onReload: () => void | Promise<void>;
	baseUrl0: string;
	keyPresent: boolean;
	/** The discovered models — one limits row each. */
	models: readonly CustomModel[];
	/** Their stored user pins. */
	overrides: Record<string, CustomModelOverride>;
	manualModels0: readonly string[];
	onSaved: () => void | Promise<void>;
	/** Pins saved — the editor stays open (a form, not a connect). */
	onPinsSaved: () => void | Promise<void>;
	onCancel: () => void;
	onDelete?: (revision: string) => Promise<string | null>;
}) {
	const { t } = useI18n();
	const [revision, setRevision] = useState(revision0);
	const [authMode, setAuthMode] = useState(authMode0);
	const [keySource, setKeySource] = useState(keySource0);
	const [keyPresent, setKeyPresent] = useState(initialKeyPresent);
	const [keyReuseRequired, setKeyReuseRequired] = useState(keyReuseRequired0);
	const [authLoading, setAuthLoading] = useState(false);
	const [reuseKey, setReuseKey] = useState(false);
	useEffect(() => {
		if (authMode !== "apiKey") return;
		let cancelled = false;
		setAuthLoading(true);
		readCustomStatus(true).then((status) => {
			if (cancelled) return;
			setKeySource(status.keySource);
			setKeyPresent(status.keyPresent);
			setKeyReuseRequired(status.keyReuseRequired);
			if (status.keySource === "env") setKey("");
		}).catch(() => { if (!cancelled) setError("Unable to inspect effective key. Reload configuration and retry."); })
			.finally(() => { if (!cancelled) setAuthLoading(false); });
		return () => { cancelled = true; };
	}, [authMode]);
	const [baseUrl, setBaseUrl] = useState(baseUrl0);
	const [key, setKey] = useState("");
	const [keyTouched, setKeyTouched] = useState(false);
	const [manualModels, setManualModels] = useState(manualModels0.join(", "));
	const [busy, setBusy] = useState(false);
	const [error, setError] = useState<string | null>(null);
	// The limits form: edited drafts over the stored pins, plus the last saved
	// payload as the dirty baseline (the server's echo is what gets stored).
	const [drafts, setDrafts] = useState<Record<string, PinDraft>>(() => draftsFor(models, overrides));
	const [baseline, setBaseline] = useState(() => JSON.stringify(pinsPayload(draftsFor(models, overrides))));
	const [pinsBusy, setPinsBusy] = useState(false);
	const [pinsError, setPinsError] = useState<string | null>(null);
	const changedTarget = normalizeBaseUrl(baseUrl) !== normalizeBaseUrl(baseUrl0);
	const canConnect = Boolean(baseUrl.trim()) && (authMode === "keyless" || (!authLoading && ((Boolean(key.trim()) && keySource !== "env") || (keyPresent && (!(changedTarget || keyReuseRequired) || reuseKey)))));

	const draftOf = (m: CustomModel): PinDraft => drafts[m.id] ?? pinDraft(overrides[m.id]);
	const setDraft = (m: CustomModel, patch: Partial<PinDraft>) =>
		setDrafts((prev) => ({ ...prev, [m.id]: { ...draftOf(m), ...patch } }));
	const current = Object.fromEntries(models.map((m) => [m.id, draftOf(m)])) as Record<string, PinDraft>;
	const dirty = JSON.stringify(pinsPayload(current)) !== baseline;

	async function savePins() {
		if (pinsBusy || busy || !dirty) return;
		setPinsBusy(true);
		setPinsError(null);
		const res = await fetch("/api/custom-provider", {
			method: "PATCH",
			headers: { "content-type": "application/json", "if-match": revision },
			body: JSON.stringify({ overrides: pinsPayload(current) }),
		}).catch(() => null);
		if (!res || !res.ok) {
			const b = (await res?.json().catch(() => ({}))) as { error?: string } | undefined;
			setPinsError(res ? (b?.error ?? `Save failed (${res.status})`) : "Save failed. Check your connection.");
			setPinsBusy(false);
			return;
		}
		setRevision(res.headers.get("etag") ?? revision);
		// The server's stored map is the truth — echo it back.
		const body = (await res.json().catch(() => null)) as { overrides?: Record<string, CustomModelOverride> } | null;
		const next = draftsFor(models, body?.overrides ?? pinsPayload(current));
		setDrafts(next);
		setBaseline(JSON.stringify(pinsPayload(next)));
		await onPinsSaved();
		setPinsBusy(false);
	}

	async function save() {
		if (busy || pinsBusy || !canConnect) return;
		setBusy(true);
		setError(null);
		const res = await fetch("/api/custom-provider", {
			method: "POST",
			headers: { "content-type": "application/json", "if-match": revision },
			body: JSON.stringify({ baseUrl, authMode, reuseKey, manualModels, ...(authMode === "apiKey" && keyTouched && key.trim() && keySource !== "env" ? { key } : {}) }),
		}).catch(() => null);
		if (!res || !res.ok) {
			const b = (await res?.json().catch(() => ({}))) as { error?: string } | undefined;
			setError(res ? (b?.error ?? `Connect failed (${res.status})`) : "Connect failed. Check your connection.");
			setBusy(false);
			return;
		}
		await onSaved();
		setBusy(false);
	}

	return (
		<div data-testid="custom-endpoint-editor" className="flex flex-col gap-2 rounded-sm px-1 py-1.5">
			<div className="flex items-center gap-2">
				<span className="shrink-0 font-ui text-xs text-foreground">{t("Custom endpoint")}</span>
				<input
					type="text"
					value={baseUrl}
					onChange={(e) => setBaseUrl(e.target.value)}
					placeholder={t("Base URL, e.g. http://localhost:11434/v1")}
					aria-label={t("Custom endpoint base URL")}
					data-testid="custom-baseurl-input"
					disabled={busy}
					autoFocus
					className="h-7 min-w-0 flex-1 rounded-sm border border-border bg-background px-1.5 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
				/>
			</div>
			<input
				type="text"
				value={manualModels}
				onChange={(e) => setManualModels(e.target.value)}
				placeholder={t("Model IDs, comma-separated — optional, needed when the endpoint has no /models list")}
				aria-label={t("Custom endpoint model IDs")}
				data-testid="custom-models-input"
				disabled={busy}
				className="h-7 min-w-0 rounded-sm border border-border bg-background px-1.5 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
			/>
			<label className="flex items-center gap-2 text-xs">{t("Authentication")}
				<select aria-label={t("Custom endpoint authentication")} data-testid="custom-auth-mode" value={authMode} disabled={busy || pinsBusy} onChange={(e) => { setAuthMode(e.target.value as "keyless" | "apiKey"); setReuseKey(false); }}>
					<option value="keyless">{t("Keyless")}</option><option value="apiKey">{t("API key")}</option>
				</select>
			</label>
			{authMode === "apiKey" && keySource === "env" && <p className="text-[11px] text-muted-foreground" data-testid="custom-env-owned">{t("Environment supplies the effective key. Change the environment to replace it.")}</p>}
			{authMode === "apiKey" && keyPresent && (changedTarget || keyReuseRequired) && <label className="text-[11px]"><input type="checkbox" data-testid="custom-reuse-key" checked={reuseKey} onChange={(e) => setReuseKey(e.target.checked)} /> {t("Allow reuse of the effective existing key for this URL")}</label>}
			<div className="flex items-center gap-2">
				{authMode === "apiKey" && <input
					type="password"
					value={key}
					onChange={(e) => {
						setKey(e.target.value);
						setKeyTouched(true);
						if (!e.target.value.trim()) setAuthMode("keyless");
					}}
					placeholder={keyPresent ? "Leave blank to keep effective key" : "API key"}
					aria-label={t("Custom endpoint API key")}
					data-testid="custom-key-input"
					disabled={busy || pinsBusy || keySource === "env"}
					className="h-7 min-w-0 flex-1 rounded-sm border border-border bg-background px-1.5 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
				/>}
				<button
					type="button"
					onClick={() => void save()}
					disabled={busy || pinsBusy || !canConnect}
					data-testid="custom-save"
					className="shrink-0 text-xs text-foreground underline-offset-2 hover:underline disabled:text-muted-foreground/40 disabled:no-underline"
				>
					{busy ? "Connecting…" : "Connect"}
				</button>
				<button
					type="button"
					onClick={onCancel}
					disabled={busy}
					data-testid="custom-cancel"
					className="shrink-0 text-xs text-muted-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
				>
					{t("Cancel")}
				</button>
				{/* Disconnect rides beside Connect, exactly the stored-key rows' Delete:
				    quiet text, one click, no confirm — and only once there IS an
				    endpoint (a fresh add has nothing to delete). */}
				{onDelete && baseUrl0.trim() && (
					<button
						type="button"
						onClick={async () => { setBusy(true); const err = await onDelete(revision); if (err) setError(err); setBusy(false); }}
						disabled={busy || pinsBusy}
						data-testid="custom-delete"
						className="shrink-0 text-xs text-muted-foreground/70 underline-offset-2 hover:text-red-500 hover:underline"
					>
						{t("Disconnect")}
					</button>
				)}
			</div>
			{!setup && models.length > 0 && (
				<div className="flex flex-col gap-1" data-testid="custom-pins">
					<div className="flex max-h-56 flex-col gap-1 overflow-y-auto pr-1">
						{models.map((m) => {
							const d = draftOf(m);
							return (
								<div key={m.id} className="flex items-center gap-2" data-testid={pinTestid("custom-pin-row", m.id)}>
									<span className="min-w-0 flex-1 truncate font-mono text-[11px] text-foreground" title={m.id}>
										{m.id}
										<span className="block text-[10px] text-muted-foreground">{t("Context:")} {d.context.trim() ? "user pin" : m.context ? `reported ${m.context}` : `fallback ${CUSTOM_MODEL_DEFAULT_CONTEXT_WINDOW}`} {t("· Output:")} {d.maxTokens.trim() ? "user pin" : m.maxTokens ? `reported ${m.maxTokens}` : `fallback ${CUSTOM_MODEL_DEFAULT_MAX_TOKENS}`}</span>
									</span>
									<input
										type="text"
										inputMode="numeric"
										value={d.context}
										onChange={(e) => setDraft(m, { context: e.target.value })}
										placeholder={String(m.context ?? CUSTOM_MODEL_DEFAULT_CONTEXT_WINDOW)}
										aria-label={`${m.id} context window in tokens`}
										data-testid={pinTestid("custom-pin-context", m.id)}
										disabled={pinsBusy}
										className="h-7 w-20 shrink-0 rounded-sm border border-border bg-background px-1.5 text-right font-mono text-[11px] text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
									/>
									<input
										type="text"
										inputMode="numeric"
										value={d.maxTokens}
										onChange={(e) => setDraft(m, { maxTokens: e.target.value })}
										placeholder={String(m.maxTokens ?? CUSTOM_MODEL_DEFAULT_MAX_TOKENS)}
										aria-label={`${m.id} max output tokens`}
										data-testid={pinTestid("custom-pin-maxtokens", m.id)}
										disabled={pinsBusy}
										className="h-7 w-20 shrink-0 rounded-sm border border-border bg-background px-1.5 text-right font-mono text-[11px] text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
									/>
									<select
										value={d.reasoning}
										onChange={(e) => setDraft(m, { reasoning: e.target.value as PinDraft["reasoning"] })}
										aria-label={`${m.id} reasoning effort support`}
										data-testid={pinTestid("custom-pin-reasoning", m.id)}
										disabled={pinsBusy}
										className="h-7 shrink-0 rounded-sm border border-border bg-background px-1 font-ui text-[11px] text-foreground outline-none focus:border-muted-foreground/50"
									>
										<option value="">{t("Reasoning effort: Use reported")}</option>
										<option value="on">{t("Reasoning effort: Supported")}</option>
										<option value="off">{t("Reasoning effort: Not supported")}</option>
									</select>
								</div>
							);
						})}
					</div>
					<div className="flex items-center gap-2">
						{pinsError && (
							<p role="alert" data-testid="custom-pins-error" className="text-[11px] text-red-500">
								{pinsError}
							</p>
						)}
						<button
							type="button"
							onClick={() => void savePins()}
							disabled={pinsBusy || !dirty}
							data-testid="custom-pins-save"
							className="ml-auto shrink-0 text-xs text-foreground underline-offset-2 hover:underline disabled:text-muted-foreground/40 disabled:no-underline"
						>
							{pinsBusy ? "Saving…" : "Save limits"}
						</button>
					</div>
				</div>
			)}
			<div className="flex flex-col gap-1 text-[11px] text-muted-foreground" data-testid="custom-help">
				{!setup && models.length > 0 && <p data-testid="custom-budget-help">{t("Budget pins do not resize backend context. Blank uses reported limits, then fallback (8192 context / 4096 output). Custom pricing is unknown.")}</p>}
				<p data-testid="custom-reasoning-help">{t("Reasoning support is a capability declaration. The effort picker’s Off may not disable a custom backend’s default thinking.")}</p>
			</div>
			{(error || pinsError) && <button type="button" data-testid="custom-reload" onClick={() => void onReload()} className="text-left text-xs underline">{t("Reload configuration")}</button>}
			{error && (
				<p role="alert" data-testid="custom-error" className="text-xs text-red-500">
					{error}
				</p>
			)}
		</div>
	);
}