+ )}
)
}
diff --git a/apps/desktop/src/app/settings/providers-settings.tsx b/apps/desktop/src/app/settings/providers-settings.tsx
new file mode 100644
index 00000000000..74c91de2ff6
--- /dev/null
+++ b/apps/desktop/src/app/settings/providers-settings.tsx
@@ -0,0 +1,489 @@
+import { useStore } from '@nanostores/react'
+import { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useState } from 'react'
+
+import {
+ FEATURED_ID,
+ FeaturedProviderRow,
+ KeyProviderRow,
+ ProviderRow,
+ sortProviders
+} from '@/components/desktop-onboarding-overlay'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { listOAuthProviders } from '@/hermes'
+import { ChevronDown, ExternalLink, KeyRound, Loader2, Save } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { $desktopOnboarding, startManualProviderOAuth } from '@/store/onboarding'
+import type { EnvVarInfo, OAuthProvider } from '@/types/hermes'
+
+import { SettingsCategoryHeading, useEnvCredentials } from './env-credentials'
+import { providerGroup, providerMeta, providerPriority, withoutKey } from './helpers'
+import { LoadingState, SettingsContent } from './primitives'
+import type { EnvRowProps } from './types'
+
+// Sub-views surfaced as a sidebar subnav: account sign-in vs raw API keys.
+export const PROVIDER_VIEWS = ['accounts', 'keys'] as const
+
+export type ProviderView = (typeof PROVIDER_VIEWS)[number]
+
+const isKeyVar = (key: string, info: EnvVarInfo) => info.is_password || /(?:_API_KEY|_TOKEN|_KEY)$/.test(key)
+
+const friendlyFieldLabel = (key: string, info: EnvVarInfo) =>
+ info.description?.trim() || key.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, c => c.toUpperCase())
+
+// Advanced (non-primary) fields are mostly base-URL / endpoint overrides, not
+// keys — so don't reuse the "Paste key" placeholder that makes them read as a
+// duplicate key input. URL-ish vars get a URL hint; everything else stays optional.
+const advancedPlaceholder = (key: string, info: EnvVarInfo): string =>
+ isKeyVar(key, info) ? 'Paste key' : /URL$/i.test(key) ? 'https://…' : 'Optional'
+
+// Group the env catalog by provider so the keys view can render one collapsible
+// row per vendor: a primary key field inline, with any secondary / advanced vars
+// (base URL overrides, alt tokens) revealed when the row is focused/expanded.
+// Mirrors what Cursor's API-keys section does. Groups without a key field (e.g.
+// Nous Portal's lone base-URL override) and the "Other" bucket are skipped.
+function buildProviderKeyGroups(vars: Record): ProviderKeyGroup[] {
+ const buckets = new Map()
+
+ for (const [key, info] of Object.entries(vars)) {
+ if (info.category !== 'provider') {
+ continue
+ }
+
+ const name = providerGroup(key)
+
+ if (name === 'Other') {
+ continue
+ }
+
+ buckets.set(name, [...(buckets.get(name) ?? []), [key, info]])
+ }
+
+ const groups: ProviderKeyGroup[] = []
+
+ for (const [name, entries] of buckets) {
+ const primary = entries.find(([k, i]) => !i.advanced && isKeyVar(k, i)) ?? entries.find(([k, i]) => isKeyVar(k, i))
+
+ if (!primary) {
+ continue
+ }
+
+ const meta = providerMeta(name)
+
+ groups.push({
+ // Advanced = the provider's non-key knobs (base URL, region, deployment).
+ // Skip redundant alias key vars (e.g. ANTHROPIC_TOKEN vs ANTHROPIC_API_KEY)
+ // so we never render a second "Paste key" input — unless one is already
+ // set, in which case keep it visible so it stays clearable.
+ advanced: entries
+ .filter(([k, i]) => k !== primary[0] && (!isKeyVar(k, i) || i.is_set))
+ .sort(([a], [b]) => a.localeCompare(b)),
+ description: meta?.description ?? primary[1].description,
+ docsUrl: meta?.docsUrl ?? primary[1].url ?? undefined,
+ hasAnySet: entries.some(([, i]) => i.is_set),
+ name,
+ primary,
+ priority: providerPriority(name)
+ })
+ }
+
+ return groups.sort((a, b) => a.priority - b.priority || a.name.localeCompare(b.name))
+}
+
+// A single credential field: a set key shows as a filled read-only input
+// (redacted value) that edits in place on click. Save appears once typed; a set
+// key also offers Remove, and Esc cancels without closing the overlay.
+function KeyField({
+ compact = false,
+ info,
+ label,
+ placeholder,
+ rowProps,
+ varKey
+}: {
+ compact?: boolean
+ info: EnvVarInfo
+ label?: string
+ placeholder?: string
+ rowProps: KeyRowProps
+ varKey: string
+}) {
+ const { edits, onClear, onSave, saving, setEdits } = rowProps
+ const editing = edits[varKey] !== undefined
+ const draft = edits[varKey] ?? ''
+ const dirty = draft.trim().length > 0
+ const busy = saving === varKey
+ const masked = info.redacted_value ?? '••••••••'
+ const startEdit = () => setEdits(c => ({ ...c, [varKey]: '' }))
+ const cancel = () => setEdits(c => withoutKey(c, varKey))
+ const update = (e: ChangeEvent) => setEdits(c => ({ ...c, [varKey]: e.target.value }))
+
+ // Enter saves; Esc cancels in place without bubbling to the overlay's window
+ // Escape listener (which would otherwise close the whole settings panel).
+ const keydown = (e: KeyboardEvent) => {
+ if (e.key === 'Enter' && dirty) {
+ void onSave(varKey)
+ } else if (e.key === 'Escape' && editing) {
+ e.preventDefault()
+ e.stopPropagation()
+ cancel()
+ }
+ }
+
+ // Advanced overrides render quieter (xs) than the primary key field so the key
+ // stays the visual anchor. Padding-driven sizing — no fixed heights.
+ const inputSize = compact ? 'xs' : 'sm'
+ const editType = info.is_password ? 'password' : 'text'
+
+ // A set value reads as a single filled, read-only field (showing the redacted
+ // value). Clicking it drops into edit mode in place — no Replace/Cancel chrome.
+ const control =
+ info.is_set && !editing ? (
+
+ ) : (
+
+
+
+ {dirty && (
+
+ )}
+
+ {editing && (
+
+ {info.is_set && (
+ <>
+
+ or
+
+ )}
+ esc to cancel
+
+ )}
+
+ )
+
+ // Standard stacked form field: small muted label above, input below. Same shape
+ // for the primary key and every advanced override — just smaller when compact.
+ // Empty advanced inputs (not labels) fade back, brightening on hover/focus/set.
+ const dim = compact && !info.is_set
+
+ return (
+
+ {label && (
+
+ )}
+ {dim ? (
+
{control}
+ ) : (
+ control
+ )}
+
+ )
+}
+
+function ProviderKeyCard({
+ expanded,
+ group,
+ onExpand,
+ onToggle,
+ rowProps
+}: {
+ expanded: boolean
+ group: ProviderKeyGroup
+ onExpand: () => void
+ onToggle: () => void
+ rowProps: KeyRowProps
+}) {
+ // Expandable when there's anything to reveal — advanced overrides and/or a
+ // "Get a key" docs link (which lives at the bottom of the expanded panel).
+ const expandable = group.advanced.length > 0 || Boolean(group.docsUrl)
+
+ return (
+