import { html, nothing } from "lit"; export type AiProviderConnectMode = "oauth" | "token" | "api-key"; export type AiProviderConnectOption = { mode: AiProviderConnectMode; label: string; hint: string; /** What auth profile type this stores as */ profileMode: "oauth" | "token" | "api_key"; }; export type AiProviderStatus = "connected" | "not-connected" | "connecting"; export type ConnectedProfile = { profileId: string; mode: "api_key" | "oauth" | "token"; email?: string; }; export type AiProvider = { id: string; name: string; logo: string; color: string; description: string; connectOptions: AiProviderConnectOption[]; status: AiProviderStatus; profiles: ConnectedProfile[]; }; export type AiProvidersProps = { providers: AiProvider[]; /** provider id → selected connect mode */ selectedMode: Record; /** Provider id → paste value (for token/api-key) */ pasteValues: Record; /** Which provider's API key input is expanded */ activeConnect: string | null; /** Provider currently running OAuth in browser */ connectingProvider: string | null; /** The OAuth URL to display in the card (replaces popup) */ oauthUrl: string | null; /** Value of the manual redirect URL paste field shown during OAuth */ oauthRedirectPaste: string; message: { kind: "success" | "error"; text: string } | null; restartNeeded: boolean; onConnect: (id: string) => void; onSelectMode: (id: string, mode: AiProviderConnectMode) => void; onPasteChange: (id: string, value: string) => void; onSave: (id: string) => void; onOAuth: (id: string) => void; onAnthropicAuto: () => void; onRemoveProfile: (profileId: string) => void; onCancel: (id: string) => void; onOAuthPasteChange: (value: string) => void; onSubmitCode: () => void; onRestart: () => void; }; // ─── Badge helpers ──────────────────────────────────────────────────────────── function statusBadge(status: AiProviderStatus, profileCount: number) { if (status === "connected") { const label = profileCount > 1 ? `${profileCount} profiles` : "Connected"; return html` ${label} `; } if (status === "connecting") { return html` ⟳ Connecting… `; } return nothing; } function profileModeBadge(mode: "api_key" | "oauth" | "token") { const labels: Record = { api_key: "API Key", oauth: "OAuth", token: "Subscription" }; const colors: Record = { api_key: "#6366f1", oauth: "#10b981", token: "#f59e0b" }; const c = colors[mode] ?? "#888"; return html` ${labels[mode] ?? mode} `; } // ─── Provider Card ──────────────────────────────────────────────────────────── function renderProvider(p: AiProvider, props: AiProvidersProps) { const isApiKeyExpanded = props.activeConnect === p.id; const pasteVal = props.pasteValues[p.id] ?? ""; const isConnecting = props.connectingProvider === p.id; const oauthOption = p.connectOptions.find((o) => o.mode === "oauth"); const tokenOption = p.connectOptions.find((o) => o.mode === "token"); const apiKeyOption = p.connectOptions.find((o) => o.mode === "api-key"); return html`
${p.logo}
${p.name} ${statusBadge(p.status, p.profiles.length)}
${p.description}
${isConnecting ? html`
Waiting for sign-in…
${props.oauthUrl ? "Click the link below to open the sign-in page, then return here." : "Preparing sign-in link…"}
${props.oauthUrl ? html`
Sign-in URL
↗ ${props.oauthUrl}
If the sign-in page doesn't redirect automatically, paste the full redirect URL here:
props.onOAuthPasteChange((e.target as HTMLInputElement).value)} @keydown=${(e: KeyboardEvent) => { if (e.key === "Enter" && props.oauthRedirectPaste.trim()) props.onSubmitCode(); }} style="flex:1;font-size:12px;padding:6px 10px; background:var(--bg-surface,#0d1117); border:1px solid var(--border,#30363d);border-radius:6px; color:var(--text);outline:none;font-family:monospace;" />
` : nothing}
` : html`
${oauthOption ? html` ` : nothing} ${tokenOption ? html` ` : nothing} ${apiKeyOption && !tokenOption ? html` ` : nothing} ${apiKeyOption && tokenOption ? html` ` : nothing} ${p.status === "connected" ? html` ` : nothing}
`} ${p.profiles.length > 0 ? html`
${p.profiles.map((prof) => html`
${profileModeBadge(prof.mode)} ${prof.email ?? prof.profileId}
`)}
` : nothing}
${isApiKeyExpanded ? html`
${tokenOption && apiKeyOption ? html`
${[tokenOption, apiKeyOption].map((opt) => { const sel = (props.selectedMode[p.id] ?? tokenOption.mode) === opt.mode; return html` `; })}
` : nothing} ${(() => { const mode = props.selectedMode[p.id] ?? (tokenOption ? "token" : "api-key"); return html` ${mode === "token" ? html`
How to get your token:
  1. Open a terminal and run: claude setup-token
  2. Copy the generated sk-ant-oat01-… token
  3. Paste it below and click Save
If you've already signed into the claude CLI, Auto-detect reads the token automatically — no copy-paste needed.
` : nothing}
props.onPasteChange(p.id, (e.target as HTMLInputElement).value)} @keydown=${(e: KeyboardEvent) => { if (e.key === "Enter" && pasteVal.trim()) props.onSave(p.id); }} />
🔒 Stored encrypted in auth-profiles.json — never sent to or read by the AI.
`; })()}
` : nothing}
`; } // ─── Page ───────────────────────────────────────────────────────────────────── export function renderAiProviders(props: AiProvidersProps) { return html`

OAuth & Provider Login

Connect your AI model providers using OAuth, subscription tokens, or API keys. OAuth and subscription logins use your existing plan — no extra charges.

${props.message ? html`
${props.message.text}
` : nothing} ${props.restartNeeded ? html`
⚠ Gateway restart required for changes to take effect.
` : nothing} ${props.providers.map((p) => renderProvider(p, props))}
API keys are stored in the 🔒 Vault. Auth profiles live in auth-profiles.json per-agent.
`; }