{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "byok-setup", "title": "BYOK Setup", "description": "A bring-your-own-key card — configurable provider slots, a masked field that cleans what you paste and checks the shape per provider, a cancellable live test with latency or a reason, a storage disclaimer that never leaves, and removal behind a confirm.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "alert-dialog", "badge", "button", "utils" ], "files": [ { "path": "src/registry/ui/byok-setup.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArrowRight,\n CircleCheck,\n ExternalLink,\n Eye,\n EyeOff,\n HardDrive,\n KeyRound,\n LoaderCircle,\n Plug,\n RefreshCw,\n ShieldCheck,\n Timer,\n Trash2,\n TriangleAlert,\n type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n AlertDialog,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\n/* -------------------------------------------------------------------------- *\n * Providers — the slots\n *\n * Which providers a product accepts is deployment configuration, not markup:\n * one entry per slot, so a build that only takes Anthropic keys is a prop and\n * not a fork. Everything the UI needs in order to be specific about a key —\n * the prefix it starts with, the shape it has, where it is issued, what the\n * account behind it needs — travels with the slot.\n * -------------------------------------------------------------------------- */\n\nexport interface ByokProvider {\n /** Stable slot id. Handed back by every callback. */\n id: string\n /** Shown on the chip and in every sentence about this slot. */\n name: string\n /** Literal prefix every key of this provider starts with — checked before `pattern`, so the rejection can name it. */\n keyPrefix?: string\n /** Whole-key shape. Anchor it yourself (`^…$`); `g`/`y` flags are stripped before use. */\n pattern?: RegExp\n /** Shortest plausible key. Catches a truncated paste before a request is spent on it. */\n minLength?: number\n placeholder?: string\n /** One line describing the expected shape, shown when the key is rejected. */\n formatHint?: string\n /** Where the key is issued — rendered as an external link beside the field. */\n consoleUrl?: string\n /** Label for that link (default \"Get a key\"). */\n consoleLabel?: string\n /** Standing note about the account rather than the key: billing, waitlists, regions. */\n note?: React.ReactNode\n}\n\nexport const DEFAULT_BYOK_PROVIDERS: ByokProvider[] = [\n {\n id: \"openai\",\n name: \"OpenAI\",\n keyPrefix: \"sk-\",\n // The negative lookahead is what makes a mis-paste detectable: two of the\n // slots below also issue `sk-…` keys, and a pattern that accepted them\n // would happily call an Anthropic key a valid OpenAI one.\n pattern: /^sk-(?!ant-|or-)[A-Za-z0-9_-]{20,}$/,\n minLength: 24,\n placeholder: \"sk-proj-…\",\n formatHint: \"An OpenAI key starts with sk- and contains no spaces.\",\n consoleUrl: \"https://platform.openai.com/api-keys\",\n note: \"Needs a funded account — a key with no credit answers 429 on the very first call.\",\n },\n {\n id: \"anthropic\",\n name: \"Anthropic\",\n keyPrefix: \"sk-ant-\",\n pattern: /^sk-ant-[A-Za-z0-9_-]{24,}$/,\n minLength: 32,\n placeholder: \"sk-ant-api03-…\",\n formatHint: \"An Anthropic key starts with sk-ant-.\",\n consoleUrl: \"https://console.anthropic.com/settings/keys\",\n },\n {\n id: \"google\",\n name: \"Google AI Studio\",\n keyPrefix: \"AIza\",\n pattern: /^AIza[A-Za-z0-9_-]{30,}$/,\n minLength: 34,\n placeholder: \"AIza…\",\n formatHint: \"A Google AI Studio key starts with AIza.\",\n consoleUrl: \"https://aistudio.google.com/apikey\",\n },\n {\n id: \"openrouter\",\n name: \"OpenRouter\",\n keyPrefix: \"sk-or-\",\n pattern: /^sk-or-v1-[A-Za-z0-9]{32,}$/,\n minLength: 40,\n placeholder: \"sk-or-v1-…\",\n formatHint: \"An OpenRouter key starts with sk-or-v1-.\",\n consoleUrl: \"https://openrouter.ai/keys\",\n },\n]\n\nconst FALLBACK_PROVIDER: ByokProvider = { id: \"\", name: \"this provider\" }\n\n/**\n * What lands in the field is rarely just the key: consoles hand back a quoted\n * string, terminals wrap it across lines, docs prefix it with `Authorization:\n * Bearer`. None of that is part of a key, and all of it turns a working key\n * into a 401 nobody can explain — so it is stripped on the way in instead of\n * being sent and blamed on the user.\n */\nexport function normalizeByokKey(raw: string): string {\n let key = raw.trim()\n key = key.replace(/^authorization:\\s*/i, \"\")\n key = key.replace(/^bearer\\s+/i, \"\")\n key = key.replace(/\\s+/g, \"\")\n if (key.length >= 2) {\n const first = key[0]\n const last = key[key.length - 1]\n if ((first === '\"' && last === '\"') || (first === \"'\" && last === \"'\")) key = key.slice(1, -1)\n }\n return key\n}\n\n/** `sk-pro…4f9c` — what is safe to keep on screen once the real key lives somewhere else. */\nexport function byokKeyHint(key: string): string {\n const tail = key.length > 8 ? key.slice(-4) : \"\"\n const head = key.slice(0, Math.max(0, Math.min(6, key.length - tail.length)))\n return `${head}…${tail}`\n}\n\n/** A `g`/`y` pattern carries `lastIndex` between calls, so the same string tests true, then false. */\nfunction stateless(pattern: RegExp): RegExp {\n return /[gy]/.test(pattern.flags) ? new RegExp(pattern.source, pattern.flags.replace(/[gy]/g, \"\")) : pattern\n}\n\nfunction looksLike(key: string, provider: ByokProvider): boolean {\n if (provider.pattern) return stateless(provider.pattern).test(key)\n if (provider.keyPrefix) {\n return key.startsWith(provider.keyPrefix) && key.length >= (provider.minLength ?? provider.keyPrefix.length + 8)\n }\n return false\n}\n\n/** The slot this key really belongs to. The most specific prefix wins, because every `sk-ant-` key is also an `sk-` key. */\nfunction suggestSlot(key: string, providers: ByokProvider[], currentId: string): ByokProvider | undefined {\n let best: ByokProvider | undefined\n for (const candidate of providers) {\n if (candidate.id === currentId || !looksLike(key, candidate)) continue\n if (!best || (candidate.keyPrefix?.length ?? 0) > (best.keyPrefix?.length ?? 0)) best = candidate\n }\n return best\n}\n\nexport type ByokKeyProblem = \"empty\" | \"prefix\" | \"short\" | \"shape\"\n\nexport interface ByokKeyCheck {\n ok: boolean\n problem?: ByokKeyProblem\n message?: string\n /** Set when the key matches a DIFFERENT configured slot — a paste into the wrong provider. */\n suggestion?: ByokProvider\n}\n\n/**\n * Local checking is a courtesy, never a verdict: it only catches what can be\n * known without spending a request (wrong prefix, truncated paste, wrong\n * slot). Whether the key actually WORKS is a question only the provider\n * answers, which is what the test button is for.\n */\nexport function checkByokKey(key: string, provider: ByokProvider, providers: ByokProvider[]): ByokKeyCheck {\n if (!key) return { ok: false, problem: \"empty\" }\n const suggestion = suggestSlot(key, providers, provider.id)\n\n if (provider.keyPrefix && !key.startsWith(provider.keyPrefix)) {\n return { ok: false, problem: \"prefix\", message: `${provider.name} keys start with ${provider.keyPrefix}`, suggestion }\n }\n if (provider.minLength !== undefined && key.length < provider.minLength) {\n return {\n ok: false,\n problem: \"short\",\n message: `Too short for a ${provider.name} key — ${key.length} characters, expected at least ${provider.minLength}.`,\n suggestion,\n }\n }\n if (provider.pattern && !stateless(provider.pattern).test(key)) {\n return {\n ok: false,\n problem: \"shape\",\n // \"An OpenAI key starts with sk-\" is useless advice for a key that\n // starts with sk-ant-: when another slot claims it, say THAT instead.\n message: suggestion\n ? `That is a key for ${suggestion.name}, not ${provider.name}.`\n : (provider.formatHint ?? `That does not look like a ${provider.name} key.`),\n suggestion,\n }\n }\n return { ok: true }\n}\n\n/* -------------------------------------------------------------------------- *\n * Test lifecycle\n * -------------------------------------------------------------------------- */\n\nexport type ByokFailureCode = \"auth\" | \"network\" | \"quota\" | \"region\" | \"timeout\" | \"unknown\"\n\nexport type ByokTestResult =\n | { ok: true; latencyMs?: number; detail?: string }\n | { ok: false; reason: string; code?: ByokFailureCode; hint?: string }\n\n/** The panel under the field, as one value. Pass `test` to own it; leave it off and the component runs the lifecycle. */\nexport type ByokTestState = { phase: \"idle\" } | { phase: \"testing\" } | { phase: \"done\"; result: ByokTestResult }\n\nexport interface ByokTestInput {\n providerId: string\n /** The normalized key in the field, or `null` for \"the key you already stored\" — after a save this component holds no plaintext. */\n key: string | null\n /** Aborted when the test is cancelled, superseded, timed out, or the component unmounts. */\n signal?: AbortSignal\n}\n\nconst IDLE: ByokTestState = { phase: \"idle\" }\n\n/** Advice about the CLASS of failure — the provider's own wording goes in `reason`. */\nconst FAILURE_HINT: Record = {\n auth: \"The provider rejected the key. Check it was copied whole and has not been revoked or rotated.\",\n network: \"The provider could not be reached at all — a proxy, a firewall or an offline tab will do this.\",\n quota: \"The key is valid but the account has nothing left to spend. Add credit, then test again.\",\n region: \"The key is valid but not enabled for this model or region on that account.\",\n timeout:\n \"No answer in time. One slow first call is normal; repeated timeouts usually mean something is blocking the request.\",\n unknown: undefined,\n}\n\n/** Past this, a successful test is worth flagging as slow instead of quietly celebrating. */\nconst SLOW_MS = 1500\n\nfunction elapsed(): number {\n return typeof performance !== \"undefined\" ? performance.now() : Date.now()\n}\n\nfunction errorText(error: unknown): string {\n if (error instanceof Error && error.message) return error.message\n if (typeof error === \"string\" && error) return error\n return \"The test failed before it reached the provider.\"\n}\n\n/* -------------------------------------------------------------------------- *\n * Storage disclaimer\n *\n * Someone is about to paste a credential billed to their own card. Where it\n * ends up is not fine print, so the line stays on screen in every mode —\n * including after the key is stored, when it is the only reminder left.\n * -------------------------------------------------------------------------- */\n\nexport type ByokStorageScope = \"device\" | \"server\" | \"session\"\n\nconst SCOPE_COPY: Record = {\n device:\n \"Stored in this browser only. The key is never sent to our servers, and clearing site data for this domain deletes it.\",\n server:\n \"Stored encrypted on our servers and used only to sign the requests you make. It is never written to logs and never shared.\",\n session: \"Kept in memory for this tab only. Closing the tab forgets it, so you will paste it again next time.\",\n}\n\nconst SCOPE_ICON: Record = {\n device: HardDrive,\n server: ShieldCheck,\n session: Timer,\n}\n\nconst SCOPE_WHERE: Record = {\n device: \"from this browser\",\n server: \"from our servers\",\n session: \"from this tab\",\n}\n\n/* -------------------------------------------------------------------------- *\n * Connection — what is left once the secret is gone\n * -------------------------------------------------------------------------- */\n\nexport interface ByokConnection {\n providerId: string\n /** Masked remnant of the stored key (`sk-pro…4f9c`). The real secret never comes back to the client. */\n keyHint: string\n /** Already formatted — this component never formats dates itself. */\n addedAtLabel?: string\n /** Already formatted \"last verified\" label. */\n lastVerifiedLabel?: string\n}\n\n/* -------------------------------------------------------------------------- *\n * Provider picker — a radiogroup, not a dropdown\n *\n * Three or four slots that all fit on screen are radios: one tab stop, arrows\n * move the selection, every chip announces itself as checked or not. A\n * dropdown would hide the answer to \"which providers can I even use here\".\n * -------------------------------------------------------------------------- */\n\nfunction ProviderPicker({\n disabled,\n labelledBy,\n onSelect,\n providers,\n value,\n}: {\n disabled: boolean\n labelledBy: string\n onSelect: (id: string) => void\n providers: ByokProvider[]\n value: string\n}) {\n const chips = React.useRef(new Map())\n\n const setChip = (id: string) => (node: HTMLButtonElement | null) => {\n if (node) chips.current.set(id, node)\n else chips.current.delete(id)\n }\n\n const moveTo = (index: number) => {\n const next = providers[(index + providers.length) % providers.length]\n if (!next) return\n // Arrows move focus and selection together — the radiogroup pattern.\n chips.current.get(next.id)?.focus()\n onSelect(next.id)\n }\n\n const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n if (disabled) return\n switch (event.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n event.preventDefault()\n moveTo(index + 1)\n break\n case \"ArrowLeft\":\n case \"ArrowUp\":\n event.preventDefault()\n moveTo(index - 1)\n break\n case \"Home\":\n event.preventDefault()\n moveTo(0)\n break\n case \"End\":\n event.preventDefault()\n moveTo(providers.length - 1)\n break\n default:\n break\n }\n }\n\n return (\n
\n {providers.map((provider, index) => {\n const selected = provider.id === value\n return (\n onSelect(provider.id)}\n onKeyDown={event => handleKeyDown(event, index)}\n ref={setChip(provider.id)}\n role=\"radio\"\n // One tab stop for the whole group; the arrows do the rest.\n tabIndex={selected ? 0 : -1}\n type=\"button\"\n >\n \n {provider.name}\n \n )\n })}\n
\n )\n}\n\n/* -------------------------------------------------------------------------- *\n * Component\n * -------------------------------------------------------------------------- */\n\nexport interface ByokSetupProps\n extends Omit, \"onSubmit\" | \"onChange\" | \"children\" | \"title\"> {\n /** The slots this deployment accepts. Defaults to OpenAI / Anthropic / Google / OpenRouter. */\n providers?: ByokProvider[]\n /** Controlled slot selection. */\n providerId?: string\n defaultProviderId?: string\n onProviderChange?: (providerId: string) => void\n /** Initial contents of the key field for the initially selected slot — a restored draft. */\n defaultKey?: string\n /** Observe the normalized draft. The plaintext otherwise stays inside this component on purpose. */\n onKeyChange?: (key: string) => void\n /** The key already on file. `null` = nothing stored. Controlled when passed. */\n connection?: ByokConnection | null\n defaultConnection?: ByokConnection | null\n /** Controlled test panel. Leave it off to let the component own the lifecycle. */\n test?: ByokTestState\n /** Runs one live check. Return a verdict or a promise of one; `signal` aborts on cancel / supersede / timeout / unmount. */\n onTest?: (input: ByokTestInput) => ByokTestResult | Promise\n /** Only needed when `test` is controlled — the internal lifecycle cancels itself. */\n onTestCancel?: () => void\n /** Fires once per Save. Return a promise to drive the pending state. */\n onSave?: (input: { providerId: string; key: string }) => void | Promise\n /** Fires once the destructive confirm is accepted. Return a promise to keep the dialog pending. */\n onRemove?: (providerId: string) => void | Promise\n /** Block Save until a test has passed (default true). */\n requireTestBeforeSave?: boolean\n /** ms before an unanswered test is abandoned. 0 disables the timeout. */\n testTimeout?: number\n /** Picks the default disclaimer sentence and its icon. */\n storageScope?: ByokStorageScope\n /** Replaces the disclaimer text. Say where the key lives — never drop the line. */\n storageNote?: React.ReactNode\n title?: React.ReactNode\n description?: React.ReactNode\n /** Everything inert and dimmed — a member without permission to change billing credentials. */\n disabled?: boolean\n}\n\nexport const ByokSetup = React.forwardRef(function ByokSetup(\n {\n providers = DEFAULT_BYOK_PROVIDERS,\n providerId: providerIdProp,\n defaultProviderId,\n onProviderChange,\n defaultKey,\n onKeyChange,\n connection: connectionProp,\n defaultConnection = null,\n test: testProp,\n onTest,\n onTestCancel,\n onSave,\n onRemove,\n requireTestBeforeSave = true,\n testTimeout = 15000,\n storageScope = \"device\",\n storageNote,\n title = \"Use your own API key\",\n description = \"Requests are billed to your provider account, at their prices and their rate limits.\",\n disabled = false,\n className,\n ...props\n },\n ref,\n) {\n const uid = React.useId()\n const titleId = `${uid}-title`\n const providerLabelId = `${uid}-providers`\n const keyId = `${uid}-key`\n const problemId = `${uid}-problem`\n const noteId = `${uid}-note`\n const gateId = `${uid}-gate`\n\n const inputRef = React.useRef(null)\n const mountedRef = React.useRef(true)\n /** Caret to restore after normalization deleted characters under the cursor. */\n const caretRef = React.useRef(null)\n /** Focus to hand out once the panel that held it is gone. */\n const focusKeyRef = React.useRef(false)\n /** Kept separate from `focusKeyRef` because Radix may restore focus after the layout effect already cleared it. */\n const suppressReturnFocusRef = React.useRef(false)\n /** One-shot locks: a double click must never fire a callback twice. */\n const saveLockRef = React.useRef(false)\n const removeLockRef = React.useRef(false)\n const requestSeqRef = React.useRef(0)\n const inFlightRef = React.useRef<{\n id: number\n controller: AbortController | null\n timer: number | null\n } | null>(null)\n\n const [internalProviderId, setInternalProviderId] = React.useState(() => defaultProviderId ?? providers[0]?.id ?? \"\")\n /**\n * One draft per slot. A key belongs to the provider that issued it, so\n * switching chips must not carry it over — and switching back must not have\n * thrown it away either.\n */\n const [drafts, setDrafts] = React.useState>(() => {\n const initial = defaultProviderId ?? providers[0]?.id ?? \"\"\n const key = defaultKey ? normalizeByokKey(defaultKey) : \"\"\n return key && initial ? { [initial]: key } : {}\n })\n const [internalConnection, setInternalConnection] = React.useState(defaultConnection)\n const [internalTest, setInternalTest] = React.useState(IDLE)\n const [revealed, setRevealed] = React.useState(false)\n const [replacing, setReplacing] = React.useState(false)\n const [saving, setSaving] = React.useState(false)\n const [removing, setRemoving] = React.useState(false)\n const [removeOpen, setRemoveOpen] = React.useState(false)\n const [actionError, setActionError] = React.useState(null)\n /** The user has typed at least once — before that a prefilled draft counts as already committed. */\n const [interacted, setInteracted] = React.useState(false)\n /** Blurred or submitted at least once — after that, validation speaks on every keystroke. */\n const [committed, setCommitted] = React.useState(false)\n /** The exact draft that came out of a paste we had to clean. Self-invalidating: no timer, no effect. */\n const [cleanedFor, setCleanedFor] = React.useState(null)\n\n const hasProviders = providers.length > 0\n const selectedId = providerIdProp ?? internalProviderId\n const connection = connectionProp !== undefined ? connectionProp : internalConnection\n /** Non-null exactly when the card is showing a stored key instead of the entry form. */\n const stored = replacing ? null : connection\n const entryMode = stored === null\n\n const activeProviderId = stored ? stored.providerId : selectedId\n const provider = providers.find(candidate => candidate.id === activeProviderId) ?? providers[0] ?? FALLBACK_PROVIDER\n const draftKey = drafts[selectedId] ?? \"\"\n /** `null` = \"the key already stored\", which this component cannot read. */\n const activeKey: string | null = stored ? null : draftKey\n\n /**\n * A verdict is about one exact (slot, key) pair. Change either and the panel\n * on screen is answering a question nobody asked any more — so the binding,\n * not a timer, is what expires it.\n */\n const binding = `${activeProviderId} ${activeKey ?? \"«stored»\"}`\n const [prevBinding, setPrevBinding] = React.useState(binding)\n if (prevBinding !== binding) {\n setPrevBinding(binding)\n if (internalTest.phase !== \"idle\") setInternalTest(IDLE)\n if (actionError !== null) setActionError(null)\n }\n\n const test = testProp ?? internalTest\n const testing = test.phase === \"testing\"\n const verdict = test.phase === \"done\" ? test.result : null\n const verified = verdict !== null && verdict.ok\n\n const check = React.useMemo(\n () => (entryMode ? checkByokKey(draftKey, provider, providers) : { ok: true }),\n [entryMode, draftKey, provider, providers],\n )\n const showProblem = check.problem !== undefined && check.problem !== \"empty\" && (!interacted || committed)\n\n const busy = disabled || testing || saving || removing\n const canTest = !!onTest && !busy && (entryMode ? check.ok : true)\n const canSave = !!onSave && !busy && entryMode && check.ok && (!requireTestBeforeSave || verified)\n const canCancelTest = testing && (testProp === undefined || !!onTestCancel)\n const gateBlocked = !!onSave && entryMode && check.ok && requireTestBeforeSave && !verified\n const describedBy =\n [showProblem ? problemId : null, provider.note ? noteId : null].filter(Boolean).join(\" \") || undefined\n\n const abortInFlight = React.useCallback(() => {\n const current = inFlightRef.current\n if (!current) return\n inFlightRef.current = null\n if (current.timer !== null) window.clearTimeout(current.timer)\n current.controller?.abort()\n }, [])\n\n React.useEffect(() => {\n // Re-armed on mount: StrictMode runs mount → cleanup → mount in dev, and a\n // flag only ever set to false would freeze the live instance mid-pending.\n mountedRef.current = true\n return () => {\n mountedRef.current = false\n }\n }, [])\n\n // Cancel whatever is in flight when the question changes — and on unmount.\n React.useEffect(() => () => abortInFlight(), [binding, abortInFlight])\n\n // Normalization deleted characters under the cursor; put the caret back on\n // the same character instead of letting the re-render throw it to the end.\n React.useLayoutEffect(() => {\n const caret = caretRef.current\n caretRef.current = null\n const el = inputRef.current\n if (caret === null || !el || document.activeElement !== el) return\n el.setSelectionRange(caret, caret)\n })\n\n // The panel that held the keyboard focus is gone (key removed, or Replace\n // pressed). Hand focus to the field that replaced it rather than dropping\n // the user on .\n React.useLayoutEffect(() => {\n if (!focusKeyRef.current) return\n const el = inputRef.current\n if (!el) return\n focusKeyRef.current = false\n el.focus()\n }, [entryMode, connection])\n\n const selectProvider = (nextId: string, carryKey?: string) => {\n if (carryKey !== undefined) {\n // Moving, not copying: the key was never this slot's to begin with.\n setDrafts(prev => ({ ...prev, [selectedId]: \"\", [nextId]: carryKey }))\n onKeyChange?.(carryKey)\n }\n if (nextId === selectedId) return\n if (providerIdProp === undefined) setInternalProviderId(nextId)\n onProviderChange?.(nextId)\n }\n\n const handleKeyInput = (event: React.ChangeEvent) => {\n const raw = event.target.value\n const caret = event.target.selectionStart ?? raw.length\n const next = normalizeByokKey(raw)\n if (next !== raw) {\n caretRef.current = Math.min(next.length, normalizeByokKey(raw.slice(0, caret)).length)\n setCleanedFor(next)\n } else if (cleanedFor !== null) {\n setCleanedFor(null)\n }\n setInteracted(true)\n setDrafts(prev => ({ ...prev, [selectedId]: next }))\n onKeyChange?.(next)\n }\n\n const runTest = (targetProviderId: string, key: string | null) => {\n if (!onTest || busy) return\n abortInFlight()\n setActionError(null)\n\n const id = (requestSeqRef.current += 1)\n const controller = typeof AbortController !== \"undefined\" ? new AbortController() : null\n const entry: { id: number; controller: AbortController | null; timer: number | null } = {\n id,\n controller,\n timer: null,\n }\n inFlightRef.current = entry\n const startedAt = elapsed()\n setInternalTest({ phase: \"testing\" })\n\n const settle = (result: ByokTestResult) => {\n // The id guard is the only race gate needed: a superseded, cancelled or\n // already-timed-out request finds a different (or no) entry here and\n // drops its answer silently — including the rejection an abort causes.\n if (!mountedRef.current || inFlightRef.current?.id !== id) return\n if (entry.timer !== null) window.clearTimeout(entry.timer)\n inFlightRef.current = null\n const measured = Math.round(elapsed() - startedAt)\n setInternalTest({\n phase: \"done\",\n result: result.ok ? { ...result, latencyMs: result.latencyMs ?? measured } : result,\n })\n }\n\n if (testTimeout > 0) {\n entry.timer = window.setTimeout(() => {\n controller?.abort()\n settle({ ok: false, code: \"timeout\", reason: `No answer in ${Math.round(testTimeout / 1000)}s` })\n }, testTimeout)\n }\n\n try {\n const outcome = onTest({ providerId: targetProviderId, key, signal: controller?.signal })\n if (outcome instanceof Promise) {\n outcome.then(settle, error => settle({ ok: false, code: \"unknown\", reason: errorText(error) }))\n } else {\n settle(outcome)\n }\n } catch (error) {\n settle({ ok: false, code: \"unknown\", reason: errorText(error) })\n }\n }\n\n const cancelTest = () => {\n abortInFlight()\n setInternalTest(IDLE)\n onTestCancel?.()\n }\n\n const requestSave = () => {\n if (!onSave || !canSave || saveLockRef.current) return\n saveLockRef.current = true\n setSaving(true)\n setActionError(null)\n\n const key = draftKey\n const targetId = selectedId\n\n const finish = (error?: string) => {\n if (!mountedRef.current) return\n saveLockRef.current = false\n setSaving(false)\n if (error !== undefined) {\n // Nothing is cleared on failure: every character the user pasted is\n // still in the field, ready to be retried.\n setActionError(error)\n return\n }\n // The plaintext is dropped the moment the save lands — from here on this\n // component holds a hint, never a secret. A controlled consumer has to\n // hand back `connection` in the same update.\n setDrafts(prev => ({ ...prev, [targetId]: \"\" }))\n setInternalTest(IDLE)\n setRevealed(false)\n setInteracted(false)\n setCommitted(false)\n setCleanedFor(null)\n setReplacing(false)\n if (connectionProp === undefined) {\n setInternalConnection({ providerId: targetId, keyHint: byokKeyHint(key), addedAtLabel: \"just now\" })\n }\n }\n\n // try/catch as well as the rejection path: a handler that throws\n // synchronously (a storage quota, a permission check) would otherwise escape\n // and leave the card pinned at \"Saving…\" with the lock still held.\n try {\n const outcome = onSave({ providerId: targetId, key })\n if (outcome instanceof Promise) {\n outcome.then(\n () => finish(),\n error => finish(errorText(error)),\n )\n } else {\n finish()\n }\n } catch (error) {\n finish(errorText(error))\n }\n }\n\n const confirmRemove = () => {\n if (!onRemove || !stored || removeLockRef.current) return\n removeLockRef.current = true\n setRemoving(true)\n\n const finish = (error?: string) => {\n if (!mountedRef.current) return\n removeLockRef.current = false\n setRemoving(false)\n setRemoveOpen(false)\n if (error !== undefined) {\n setActionError(error)\n return\n }\n setActionError(null)\n setInternalTest(IDLE)\n setDrafts({})\n setReplacing(false)\n setRevealed(false)\n setInteracted(false)\n setCommitted(false)\n // The dialog's trigger unmounts together with the connection, so\n // nominate where focus goes before Radix tries to return it there.\n focusKeyRef.current = true\n suppressReturnFocusRef.current = true\n if (connectionProp === undefined) setInternalConnection(null)\n }\n\n try {\n const outcome = onRemove(stored.providerId)\n if (outcome instanceof Promise) {\n outcome.then(\n () => finish(),\n error => finish(errorText(error)),\n )\n } else {\n finish()\n }\n } catch (error) {\n finish(errorText(error))\n }\n }\n\n const submit = () => {\n if (!entryMode || busy) return\n setCommitted(true)\n if (!check.ok) {\n inputRef.current?.focus()\n return\n }\n // Enter tests while the key is unproven and saves once it is — the same\n // order the two buttons sit in.\n if (canSave) requestSave()\n else if (canTest) runTest(selectedId, draftKey)\n }\n\n const handleSubmit = (event: React.FormEvent) => {\n event.preventDefault()\n submit()\n }\n\n const StorageIcon = SCOPE_ICON[storageScope]\n const disclaimer = (\n

\n \n {storageNote ?? SCOPE_COPY[storageScope]}\n

\n )\n\n const failure = actionError ? (\n

\n \n {actionError}\n

\n ) : null\n\n let testPanel: React.ReactNode = null\n if (testing) {\n testPanel = (\n
\n \n Asking {provider.name} whether this key works…\n {canCancelTest ? (\n \n ) : null}\n
\n )\n } else if (verdict !== null) {\n testPanel = verdict.ok ? (\n
\n \n Key works\n {verdict.latencyMs !== undefined ? (\n \n {verdict.latencyMs} ms{verdict.latencyMs >= SLOW_MS ? \" · slow first call\" : \"\"}\n \n ) : null}\n {verdict.detail ? · {verdict.detail} : null}\n
\n ) : (\n \n \n \n {verdict.reason}\n \n {verdict.hint ?? FAILURE_HINT[verdict.code ?? \"unknown\"] ? (\n {verdict.hint ?? FAILURE_HINT[verdict.code ?? \"unknown\"]}\n ) : null}\n {onTest ? (\n \n runTest(activeProviderId, activeKey)}\n size=\"xs\"\n type=\"button\"\n variant=\"outline\"\n >\n \n Test again\n \n \n ) : null}\n \n )\n }\n\n const liveMessage = testing\n ? `Testing the ${provider.name} key.`\n : saving\n ? \"Saving the key.\"\n : removing\n ? \"Removing the key.\"\n : actionError\n ? actionError\n : verdict === null\n ? \"\"\n : verdict.ok\n ? `The ${provider.name} key works${verdict.latencyMs !== undefined ? `, answered in ${verdict.latencyMs} milliseconds` : \"\"}.`\n : `The ${provider.name} key was not accepted. ${verdict.reason}`\n\n return (\n \n
\n \n \n \n
\n

\n {title}\n

\n {description ?

{description}

: null}\n
\n
\n\n {!hasProviders ? (\n

\n No providers are configured for this workspace, so there is no slot to put a key in.\n

\n ) : stored ? (\n
\n
\n
\n {provider.name}\n \n \n Key on file\n \n \n {stored.keyHint}\n \n
\n {stored.addedAtLabel || stored.lastVerifiedLabel ? (\n

\n {stored.addedAtLabel ? Added {stored.addedAtLabel} : null}\n {stored.lastVerifiedLabel ? Last verified {stored.lastVerifiedLabel} : null}\n

\n ) : null}\n
\n\n {testPanel}\n {disclaimer}\n {failure}\n
\n ) : (\n
\n
\n \n Provider\n \n selectProvider(id)}\n providers={providers}\n value={selectedId}\n />\n
\n\n
\n
\n \n {provider.consoleUrl ? (\n \n {provider.consoleLabel ?? \"Get a key\"}\n \n \n ) : null}\n
\n\n \n setCommitted(true)}\n onChange={handleKeyInput}\n // Save is this form's default button and it stays disabled\n // until the key is proven — and a disabled default button\n // suppresses implicit submission entirely, which would leave\n // Enter dead exactly when it is meant to run the test.\n onKeyDown={event => {\n if (event.key !== \"Enter\") return\n event.preventDefault()\n submit()\n }}\n placeholder={provider.placeholder ?? \"Paste your key\"}\n // readOnly while the save is in flight, never `disabled`: Enter\n // in this field is what starts the save, and `disabled` would\n // blur the control the user is standing on — leaving them on\n // when a rejected save hands the field back with their\n // key still in it. The busy guard in `submit` does the blocking.\n readOnly={saving}\n ref={inputRef}\n spellCheck={false}\n // A password field for an editable secret: shoulder-surfing is\n // the threat here, not the length of the string.\n type={revealed ? \"text\" : \"password\"}\n value={draftKey}\n />\n setRevealed(current => !current)}\n type=\"button\"\n >\n {revealed ? (\n \n ) : (\n \n )}\n \n
\n\n {showProblem ? (\n

\n \n {check.message}\n {check.suggestion ? (\n {\n const suggested = check.suggestion\n if (!suggested) return\n selectProvider(suggested.id, draftKey)\n setRevealed(false)\n }}\n size=\"xs\"\n type=\"button\"\n variant=\"outline\"\n >\n Move it to {check.suggestion.name}\n \n \n ) : null}\n

\n ) : null}\n\n {cleanedFor !== null && cleanedFor === draftKey ? (\n

\n Cleaned that paste — quotes, line breaks and a leading “Bearer” are not part of the key.\n

\n ) : null}\n\n {provider.note ? (\n

\n {provider.note}\n

\n ) : null}\n
\n\n {testPanel}\n {disclaimer}\n {failure}\n \n )}\n\n {hasProviders && (stored ? onTest || onRemove || onSave : onTest || onSave) ? (\n
\n {stored ? (\n <>\n {onTest ? (\n runTest(stored.providerId, null)}\n size=\"sm\"\n type=\"button\"\n variant=\"outline\"\n >\n {testing ? (\n \n ) : (\n \n )}\n {testing ? \"Testing…\" : \"Test connection\"}\n \n ) : null}\n {/* Replacing is only an affordance if there is somewhere to save\n the replacement to. */}\n {onSave ? (\n {\n selectProvider(stored.providerId)\n setInternalTest(IDLE)\n setInteracted(false)\n setCommitted(false)\n focusKeyRef.current = true\n setReplacing(true)\n }}\n size=\"sm\"\n type=\"button\"\n variant=\"outline\"\n >\n Replace key\n \n ) : null}\n {onRemove ? (\n {\n if (!removing) setRemoveOpen(next)\n }}\n open={removeOpen}\n >\n \n \n \n {\n // The layout effect above is handing focus to the key\n // field; Radix would send it back to a trigger that has\n // just unmounted with the connection.\n if (!suppressReturnFocusRef.current) return\n suppressReturnFocusRef.current = false\n event.preventDefault()\n }}\n >\n \n Remove the {provider.name} key?\n \n {stored.keyHint} is deleted {SCOPE_WHERE[storageScope]}. Anything running on it stops working\n straight away, and you will have to paste a key again to bring it back. This does not revoke the\n key at {provider.name} — do that in their console if it leaked.\n \n \n \n Keep it\n {/* A plain Button, not AlertDialogAction: closing is this\n component's job, so the dialog can stay open and\n pending while onRemove is in flight. */}\n \n \n \n \n ) : null}\n \n ) : (\n <>\n {onTest ? (\n runTest(selectedId, draftKey)}\n size=\"sm\"\n type=\"button\"\n variant=\"outline\"\n >\n {testing ? (\n \n ) : verdict !== null ? (\n \n ) : (\n \n )}\n {testing ? \"Testing…\" : verdict !== null ? \"Test again\" : \"Test connection\"}\n \n ) : null}\n {onSave ? (\n \n ) : null}\n {connection ? (\n {\n setReplacing(false)\n setInternalTest(IDLE)\n setDrafts(prev => ({ ...prev, [selectedId]: \"\" }))\n setRevealed(false)\n }}\n size=\"sm\"\n type=\"button\"\n variant=\"ghost\"\n >\n Cancel\n \n ) : null}\n {gateBlocked ? (\n \n Test the key before saving it.\n \n ) : null}\n \n )}\n
\n ) : null}\n\n {/* Persistent live region — never conditionally unmounted, so every\n transition actually gets announced. */}\n
\n {liveMessage}\n
\n \n )\n})\n\nByokSetup.displayName = \"ByokSetup\"\n\nexport default ByokSetup\n", "type": "registry:ui" } ], "type": "registry:ui" }