AI Settings modal — provider, key, and model management UI

[anurag629]

Phase 2 — Settings UI (1/2)

Build the AI Settings modal where users configure their AI provider, paste API keys, and select models.

UI Design

Modal Layout

```
┌──────────────────────────────────────────────────┐
│ ✨ AI Settings [×] │
│──────────────────────────────────────────────────│
│ │
│ Provider │
│ ┌──────────────────────────────────────┐ │
│ │ ▼ OpenAI │ │
│ └──────────────────────────────────────┘ │
│ ○ OpenAI ○ Anthropic ○ Google │
│ ○ Groq ○ OpenRouter │
│ │
│ API Key │
│ ┌──────────────────────────────────┐ ┌───┐ │
│ │ ••••••••••••••••sk-abc │ │ 👁 │ │
│ └──────────────────────────────────┘ └───┘ │
│ Where to get your API key ↗ │
│ │
│ Model │
│ ┌──────────────────────────────────────┐ │
│ │ ▼ gpt-4o-mini (fast, affordable) │ │
│ └──────────────────────────────────────┘ │
│ │
│ ┌────────────────┐ ┌─────────────┐ │
│ │ ✓ Validate Key │ │ Clear Key │ │
│ └────────────────┘ └─────────────┘ │
│ │
│ Status: ✅ Valid — ready to use │
│ │
│──────────────────────────────────────────────────│
│ 🔒 Your API key is stored locally in your │
│ browser. It is never stored on our servers. │
│ Keys are sent securely (HTTPS) only to the │
│ selected AI provider. │
└──────────────────────────────────────────────────┘
```

Component: src/components/editor/AISettingsModal.tsx

Provider selection:

• Visual radio group or segmented control (not just a dropdown)
• Each provider shows a small icon/logo and name
• Switching providers loads that provider's saved key + model (if previously configured)
• Link to each provider's API key page ("Where to get your API key →")

Provider	API Key Link
OpenAI	platform.openai.com/api-keys
Anthropic	console.anthropic.com/settings/keys
Google	aistudio.google.com/apikey
Groq	console.groq.com/keys
OpenRouter	openrouter.ai/keys

API Key input:

• Password-type input (masked by default)
• Show/hide toggle (eye icon)
• Paste-friendly — auto-trims whitespace
• On paste or blur, auto-detects provider if possible (e.g., `sk-` → OpenAI, `sk-ant-` → Anthropic)

Model selector:

• Dropdown populated from provider's model list
• Each model shows name + short description (e.g., "gpt-4o-mini — fast, affordable")
• Remembers selection per provider

Validate button:

• Calls `POST /api/ai/validate`
• Shows loading spinner during validation
• Status states: `not-set` | `validating` | `valid` | `invalid` | `error`
• Invalid state shows the error message from the provider

Clear button:

• Clears key + model for current provider
• Confirms before clearing ("Clear API key for OpenAI?")

Security notice:

• Always visible at the bottom
• Links to privacy info if available

Styling

• Use existing CSS custom properties (no Tailwind)
• Modal overlay with backdrop blur (matches existing site modals if any)
• Smooth open/close animation
• Responsive — works on mobile as a full-screen sheet

Acceptance Criteria

• Provider selection shows all 5 providers
• API key input masks by default, toggles visibility
• Model dropdown updates when provider changes
• Validate button makes real validation call and shows result
• Clear button removes key with confirmation
• Switching providers preserves previously saved keys
• Security notice is always visible
• Modal is accessible (focus trap, ESC to close, aria labels)
• Responsive — works on mobile
• No AI features leak if no key is configured