@agile-vibe-coding/avc 0.1.1 → 0.3.1

package/kanban/client/src/components/settings/ModelPricingTab.jsx

@@ -0,0 +1,269 @@
+import { useState } from 'react';
+import { ExternalLink } from 'lucide-react';
+import { saveModelPricing } from '../../lib/api';
+
+const PROVIDERS = ['claude', 'gemini', 'openai', 'xiaomi'];
+const PROVIDER_LABELS = { claude: 'Claude', gemini: 'Gemini', openai: 'OpenAI', xiaomi: 'Xiaomi MiMo' };
+const PROVIDER_TAB_COLORS = {
+  claude: { active: 'border-orange-500 text-orange-700', badge: 'bg-orange-50 text-orange-700 border-orange-200' },
+  gemini: { active: 'border-blue-500 text-blue-700',   badge: 'bg-blue-50 text-blue-700 border-blue-200'     },
+  openai: { active: 'border-green-500 text-green-700', badge: 'bg-green-50 text-green-700 border-green-200'  },
+  xiaomi: { active: 'border-purple-500 text-purple-700', badge: 'bg-purple-50 text-purple-700 border-purple-200' },
+};
+
+const PROVIDER_COLORS = {
+  claude:  'bg-orange-50 text-orange-700 border-orange-200',
+  gemini:  'bg-blue-50 text-blue-700 border-blue-200',
+  openai:  'bg-green-50 text-green-700 border-green-200',
+  xiaomi:  'bg-purple-50 text-purple-700 border-purple-200',
+};
+
+const UNIT_OPTIONS = [
+  { value: 'million',  label: 'per 1M tokens' },
+  { value: 'thousand', label: 'per 1K tokens' },
+];
+
+function initState(models) {
+  const state = {};
+  for (const [modelId, info] of Object.entries(models)) {
+    state[modelId] = {
+      input:       String(info.pricing?.input       ?? ''),
+      inputCached: String(info.pricing?.inputCached ?? ''),
+      output:      String(info.pricing?.output      ?? ''),
+      unit:        info.pricing?.unit        ?? 'million',
+      source:      info.pricing?.source      ?? '',
+      lastUpdated: info.pricing?.lastUpdated ?? '',
+    };
+  }
+  return state;
+}
+
+function formatDate(iso) {
+  if (!iso) return null;
+  const d = new Date(iso + 'T00:00:00');
+  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+export function ModelPricingTab({ settings, onSaved }) {
+  const models = settings.models || {};
+  const [pricing, setPricing] = useState(() => initState(models));
+  const [status, setStatus] = useState(null); // null | 'saving' | 'saved' | 'error'
+
+  // Determine which providers actually have models, preserve stable order
+  const availableProviders = PROVIDERS.filter(p =>
+    Object.values(models).some(m => m.provider === p)
+  );
+  const [activeProvider, setActiveProvider] = useState(() => availableProviders[0] || 'claude');
+
+  const modelEntries = Object.entries(models).filter(
+    ([, info]) => info.provider === activeProvider
+  );
+
+  const update = (modelId, field, value) => {
+    setPricing((prev) => ({
+      ...prev,
+      [modelId]: { ...prev[modelId], [field]: value },
+    }));
+  };
+
+  const handleSave = async () => {
+    setStatus('saving');
+    try {
+      // Build payload: { modelId: { pricing: { input, output, unit } } }
+      const payload = {};
+      for (const [modelId, p] of Object.entries(pricing)) {
+        payload[modelId] = {
+          pricing: {
+            input:       parseFloat(p.input)       || 0,
+            inputCached: parseFloat(p.inputCached) || 0,
+            output:      parseFloat(p.output)      || 0,
+            unit:        p.unit,
+            source:      p.source,
+          },
+        };
+      }
+      await saveModelPricing(payload);
+      setStatus('saved');
+      onSaved();
+      setTimeout(() => setStatus(null), 2000);
+    } catch {
+      setStatus('error');
+      setTimeout(() => setStatus(null), 2000);
+    }
+  };
+
+  if (modelEntries.length === 0) {
+    return (
+      <div className="px-5 py-8 text-center">
+        <p className="text-sm text-slate-500">
+          No models configured yet. Run your first ceremony to populate model settings.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-5 py-4 flex flex-col gap-4">
+      <p className="text-xs text-slate-500">
+        Set the cost per token for each model. These rates are used by the cost tracker
+        to estimate LLM spend. Prices are in <strong>USD</strong>.
+      </p>
+
+      {/* Provider tabs */}
+      {availableProviders.length > 1 && (
+        <div className="flex border-b border-slate-200 -mx-5 px-5">
+          {availableProviders.map((p) => {
+            const colors = PROVIDER_TAB_COLORS[p] || { active: 'border-slate-900 text-slate-900' };
+            const isActive = p === activeProvider;
+            const count = Object.values(models).filter(m => m.provider === p).length;
+            return (
+              <button
+                key={p}
+                type="button"
+                onClick={() => setActiveProvider(p)}
+                className={`px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
+                  isActive
+                    ? colors.active
+                    : 'border-transparent text-slate-500 hover:text-slate-700'
+                }`}
+              >
+                {PROVIDER_LABELS[p] || p}
+                <span className={`ml-1.5 text-xs px-1.5 py-0.5 rounded-full border ${
+                  isActive ? colors.badge : 'bg-slate-100 text-slate-400 border-slate-200'
+                }`}>
+                  {count}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-2">
+        {modelEntries.map(([modelId, info]) => {
+          const p = pricing[modelId] ?? { input: '', output: '', unit: 'million' };
+          const providerColor = PROVIDER_COLORS[info.provider] || 'bg-slate-50 text-slate-600 border-slate-200';
+
+          return (
+            <div key={modelId} className="border border-slate-200 rounded-lg p-4">
+              {/* Model header */}
+              <div className="flex items-center gap-2 mb-3">
+                <span className="text-sm font-semibold text-slate-800">
+                  {info.displayName || modelId}
+                </span>
+                <span className={`text-xs font-medium border rounded-full px-2 py-0.5 ${providerColor}`}>
+                  {info.provider}
+                </span>
+                <span className="text-xs text-slate-400 font-mono ml-auto">{modelId}</span>
+                {p.lastUpdated && (
+                  <span className="text-xs text-slate-400 whitespace-nowrap">
+                    verified {formatDate(p.lastUpdated)}
+                  </span>
+                )}
+              </div>
+
+              {/* Pricing rows */}
+              <div className="grid grid-cols-[80px_1fr_1fr] gap-x-3 gap-y-2 items-center text-xs">
+                {/* Column headers */}
+                <div />
+                <div className="text-slate-400 font-medium">Price (USD $)</div>
+                <div className="text-slate-400 font-medium">Unit</div>
+
+                {/* Input row */}
+                <label className="text-slate-600 font-medium">Input</label>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={p.input}
+                  onChange={(e) => update(modelId, 'input', e.target.value)}
+                  placeholder="0.00"
+                  className="rounded-md border border-slate-300 px-2 py-1.5 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full max-w-[120px]"
+                />
+                <select
+                  value={p.unit}
+                  onChange={(e) => update(modelId, 'unit', e.target.value)}
+                  className="rounded-md border border-slate-300 px-2 py-1.5 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white w-full max-w-[160px]"
+                >
+                  {UNIT_OPTIONS.map((opt) => (
+                    <option key={opt.value} value={opt.value}>{opt.label}</option>
+                  ))}
+                </select>
+
+                {/* Cache Read row */}
+                <label className="text-slate-600 font-medium">Cache Read</label>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={p.inputCached}
+                  onChange={(e) => update(modelId, 'inputCached', e.target.value)}
+                  placeholder="0.00"
+                  className="rounded-md border border-slate-300 px-2 py-1.5 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full max-w-[120px]"
+                />
+                <span className="text-slate-400 text-xs">
+                  {UNIT_OPTIONS.find((o) => o.value === p.unit)?.label} · discounted
+                </span>
+
+                {/* Output row */}
+                <label className="text-slate-600 font-medium">Output</label>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={p.output}
+                  onChange={(e) => update(modelId, 'output', e.target.value)}
+                  placeholder="0.00"
+                  className="rounded-md border border-slate-300 px-2 py-1.5 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full max-w-[120px]"
+                />
+                {/* Unit selector is shared — show a static label for output to keep layout consistent */}
+                <span className="text-slate-400">
+                  {UNIT_OPTIONS.find((o) => o.value === p.unit)?.label}
+                </span>
+
+                {/* Source URL row — aligned with price inputs */}
+                <label className="text-slate-600 font-medium">Source</label>
+                <div className="col-span-2 flex items-center gap-1.5">
+                  <input
+                    type="url"
+                    value={p.source}
+                    readOnly
+                    placeholder="https://provider.com/pricing"
+                    className="flex-1 rounded-md border border-slate-200 bg-slate-50 px-2 py-1.5 text-xs text-slate-500 cursor-default focus:outline-none min-w-0"
+                  />
+                  {p.source && (
+                    <a
+                      href={p.source}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-500 hover:text-blue-700 shrink-0"
+                      title="Open pricing page"
+                    >
+                      <ExternalLink className="w-3.5 h-3.5" />
+                    </a>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="flex justify-end pt-1">
+        <button
+          type="button"
+          onClick={handleSave}
+          disabled={status === 'saving'}
+          className="px-4 py-2 text-sm font-medium bg-slate-900 text-white rounded-md hover:bg-slate-700 transition-colors disabled:opacity-40"
+        >
+          {status === 'saving' ? (
+            <span className="inline-flex items-center gap-2">
+              <span className="w-3.5 h-3.5 border border-white/40 border-t-white rounded-full animate-spin" />
+              Saving…
+            </span>
+          ) : status === 'saved' ? '✓ Saved' : status === 'error' ? '✗ Error' : 'Save Pricing'}
+        </button>
+      </div>
+    </div>
+  );
+}

package/kanban/client/src/components/settings/OpenAIAuthSection.jsx

@@ -0,0 +1,412 @@
+import { useState, useEffect, useRef } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { saveApiKeys, connectOpenAIOAuth, disconnectOpenAIOAuth, getOpenAIOAuthStatus, testOpenAIOAuth, setOpenAIOAuthFallback } from '../../lib/api';
+
+function formatExpiresIn(seconds) {
+  if (seconds <= 0) return 'expired';
+  if (seconds < 60) return `${seconds}s`;
+  const mins = Math.floor(seconds / 60);
+  if (mins < 60) return `${mins} min`;
+  return `${Math.floor(mins / 60)}h ${mins % 60}m`;
+}
+
+export function OpenAIAuthSection({ apiKeyInfo, onSaved }) {
+  const [authMode, setAuthMode] = useState(apiKeyInfo?.authMode || 'api-key');
+
+  // API-key sub-state
+  const [keyValue, setKeyValue] = useState('');
+  const [showKey, setShowKey] = useState(false);
+  const [saveStatus, setSaveStatus] = useState(null); // null | 'saving' | 'saved' | 'error'
+
+  // OAuth sub-state
+  const [oauthPhase, setOauthPhase] = useState(
+    apiKeyInfo?.oauth?.connected ? 'connected' : 'idle'
+  );
+  const [oauthInfo, setOauthInfo] = useState(apiKeyInfo?.oauth || { connected: false });
+  const [authorizeUrl, setAuthorizeUrl] = useState(null);
+  const pollRef = useRef(null);
+  const pollTimeoutRef = useRef(null);
+
+  // Test sub-state
+  const [testStatus, setTestStatus] = useState(null); // null | 'running' | { ok, response, model, elapsed } | { error }
+
+  // Fallback sub-state
+  const [fallbackEnabled, setFallbackEnabled] = useState(apiKeyInfo?.oauth?.fallback ?? false);
+  const [fallbackStatus, setFallbackStatus] = useState(null); // null | 'saving' | { error }
+
+
+  // Sync from parent settings refresh
+  useEffect(() => {
+    setAuthMode(apiKeyInfo?.authMode || 'api-key');
+    setOauthInfo(apiKeyInfo?.oauth || { connected: false });
+    setFallbackEnabled(apiKeyInfo?.oauth?.fallback ?? false);
+    if (apiKeyInfo?.oauth?.connected) {
+      setOauthPhase('connected');
+    }
+  }, [apiKeyInfo]);
+
+  // Stop polling on unmount
+  useEffect(() => {
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+      if (pollTimeoutRef.current) clearTimeout(pollTimeoutRef.current);
+    };
+  }, []);
+
+  const startPolling = () => {
+    pollRef.current = setInterval(async () => {
+      try {
+        const status = await getOpenAIOAuthStatus();
+        if (status.connected) {
+          setOauthInfo(status);
+          setOauthPhase('connected');
+          setAuthorizeUrl(null);
+          stopPolling();
+          onSaved();
+        }
+      } catch { /* ignore */ }
+    }, 2000);
+
+    // Auto-stop after 5 minutes
+    pollTimeoutRef.current = setTimeout(() => {
+      stopPolling();
+      setOauthPhase('idle');
+    }, 300_000);
+  };
+
+  const stopPolling = () => {
+    if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
+    if (pollTimeoutRef.current) { clearTimeout(pollTimeoutRef.current); pollTimeoutRef.current = null; }
+  };
+
+  const handleModeToggle = (mode) => {
+    if (mode === authMode) return;
+    if (authMode === 'oauth' && oauthPhase === 'connecting') {
+      // Cancel an in-progress connection attempt when switching away
+      stopPolling();
+      setOauthPhase('idle');
+      setAuthorizeUrl(null);
+    }
+    if (mode === 'oauth') {
+      // Restore the correct phase when switching back to Subscription tab
+      setOauthPhase(oauthInfo.connected ? 'connected' : 'idle');
+    }
+    setAuthMode(mode);
+  };
+
+  const handleConnect = async () => {
+    setOauthPhase('connecting');
+    setAuthorizeUrl(null);
+    try {
+      const result = await connectOpenAIOAuth();
+      setAuthorizeUrl(result.authorizeUrl || null);
+      startPolling();
+    } catch (err) {
+      setOauthPhase('idle');
+      console.error('OAuth connect error:', err);
+    }
+  };
+
+  const handleCancel = () => {
+    stopPolling();
+    setOauthPhase('idle');
+    setAuthorizeUrl(null);
+  };
+
+  const handleDisconnect = async () => {
+    try { await disconnectOpenAIOAuth(); } catch { /* ignore */ }
+    setOauthPhase('idle');
+    setOauthInfo({ connected: false });
+    setTestStatus(null);
+    setAuthMode('api-key');
+    onSaved();
+  };
+
+  const handleFallbackToggle = async (enabled) => {
+    setFallbackStatus('saving');
+    try {
+      await setOpenAIOAuthFallback(enabled);
+      setFallbackEnabled(enabled);
+      setFallbackStatus(null);
+    } catch (err) {
+      setFallbackStatus({ error: err.message });
+      setTimeout(() => setFallbackStatus(null), 4000);
+    }
+  };
+
+  const handleTest = async () => {
+    setTestStatus('running');
+    try {
+      const result = await testOpenAIOAuth();
+      setTestStatus(result);
+    } catch (err) {
+      setTestStatus({ error: err.message });
+    }
+  };
+
+  const handleSaveKey = async () => {
+    setSaveStatus('saving');
+    try {
+      await saveApiKeys({ openai: keyValue });
+      setSaveStatus('saved');
+      setKeyValue('');
+      onSaved();
+      setTimeout(() => setSaveStatus(null), 2000);
+    } catch {
+      setSaveStatus('error');
+      setTimeout(() => setSaveStatus(null), 2000);
+    }
+  };
+
+  const handleClearKey = async () => {
+    setSaveStatus('clearing');
+    try {
+      await saveApiKeys({ openai: '' });
+      setSaveStatus('saved');
+      onSaved();
+      setTimeout(() => setSaveStatus(null), 2000);
+    } catch {
+      setSaveStatus('error');
+      setTimeout(() => setSaveStatus(null), 2000);
+    }
+  };
+
+  return (
+    <div className="py-3 border-b border-slate-100 last:border-0">
+      {/* Header row */}
+      <div className="flex items-center gap-3 mb-2">
+        <div className="w-36 flex-shrink-0">
+          <p className="text-sm font-medium text-slate-800">OpenAI</p>
+          <p className="text-xs text-slate-400">Auth mode</p>
+        </div>
+
+        {/* Mode toggle */}
+        <div className="flex items-center gap-1 bg-slate-100 rounded-lg p-1">
+          <button
+            type="button"
+            onClick={() => handleModeToggle('api-key')}
+            className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
+              authMode === 'api-key'
+                ? 'bg-white text-slate-800 shadow-sm'
+                : 'text-slate-500 hover:text-slate-700'
+            }`}
+          >
+            API Key
+          </button>
+          <button
+            type="button"
+            onClick={() => handleModeToggle('oauth')}
+            className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
+              authMode === 'oauth'
+                ? 'bg-white text-slate-800 shadow-sm'
+                : 'text-slate-500 hover:text-slate-700'
+            }`}
+          >
+            Subscription
+          </button>
+        </div>
+      </div>
+
+      {/* API Key mode */}
+      {authMode === 'api-key' && (
+        <div className="flex items-center gap-3 pl-0 pt-1">
+          <div className="w-36 flex-shrink-0">
+            <p className="text-xs text-slate-400">OPENAI_API_KEY</p>
+          </div>
+
+          <div className="w-16 flex-shrink-0">
+            {apiKeyInfo?.isSet ? (
+              <span className="inline-flex items-center gap-1 text-xs font-medium text-green-700 bg-green-50 border border-green-200 rounded-full px-2 py-0.5">
+                ✓ Set
+              </span>
+            ) : (
+              <span className="inline-flex items-center text-xs font-medium text-slate-400 bg-slate-50 border border-slate-200 rounded-full px-2 py-0.5">
+                Not set
+              </span>
+            )}
+          </div>
+
+          {apiKeyInfo?.isSet && !keyValue && (
+            <p className="text-xs text-slate-400 font-mono flex-shrink-0">{apiKeyInfo.preview}</p>
+          )}
+
+          <div className="flex-1 flex items-center gap-2 min-w-0">
+            <div className="relative flex-1">
+              <input
+                type={showKey ? 'text' : 'password'}
+                value={keyValue}
+                onChange={(e) => setKeyValue(e.target.value)}
+                placeholder={apiKeyInfo?.isSet ? 'Enter new key to update…' : 'sk-…'}
+                className="w-full rounded-md border border-slate-300 px-2 py-1.5 pr-8 text-xs text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
+              />
+              <button
+                type="button"
+                onClick={() => setShowKey(v => !v)}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                tabIndex={-1}
+              >
+                {showKey ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
+              </button>
+            </div>
+
+            {apiKeyInfo?.isSet && !keyValue && (
+              <button
+                type="button"
+                onClick={handleClearKey}
+                disabled={saveStatus === 'clearing'}
+                className="px-3 py-1.5 text-xs font-medium border border-red-200 text-red-600 rounded-md hover:bg-red-50 transition-colors disabled:opacity-40 flex-shrink-0"
+              >
+                {saveStatus === 'clearing' ? '…' : 'Reset'}
+              </button>
+            )}
+
+            <button
+              type="button"
+              onClick={handleSaveKey}
+              disabled={!keyValue.trim() || saveStatus === 'saving'}
+              className="px-3 py-1.5 text-xs font-medium bg-slate-900 text-white rounded-md hover:bg-slate-700 transition-colors disabled:opacity-40 flex-shrink-0"
+            >
+              {saveStatus === 'saving' ? (
+                <span className="inline-flex items-center gap-1">
+                  <span className="w-3 h-3 border border-white/40 border-t-white rounded-full animate-spin" />
+                  Saving
+                </span>
+              ) : saveStatus === 'saved' ? '✓ Saved' : saveStatus === 'error' ? '✗ Error' : 'Save'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* OAuth mode */}
+      {authMode === 'oauth' && (
+        <div className="pl-0 pt-1">
+          {/* Idle — not yet connecting */}
+          {oauthPhase === 'idle' && (
+            <div className="flex flex-col gap-2">
+              <p className="text-xs text-slate-500">
+                <span className="font-medium text-amber-700">ℹ</span>{' '}
+                Requires a <strong>ChatGPT Pro</strong> subscription ($200/mo).
+                Only Codex-endpoint models work (<code className="font-mono bg-slate-100 px-1 rounded">gpt-5.2-codex</code>,{' '}
+                <code className="font-mono bg-slate-100 px-1 rounded">gpt-5.3-codex</code>).
+                This endpoint is unofficial and may change without notice.
+              </p>
+              <div>
+                <button
+                  type="button"
+                  onClick={handleConnect}
+                  className="inline-flex items-center gap-1.5 px-4 py-1.5 text-xs font-medium bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors"
+                >
+                  Connect with ChatGPT ↗
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Connecting — waiting for browser callback */}
+          {oauthPhase === 'connecting' && (
+            <div className="flex flex-col gap-2">
+              <p className="text-xs text-slate-600 flex items-center gap-2">
+                <span className="w-3 h-3 border border-slate-400 border-t-slate-700 rounded-full animate-spin inline-block" />
+                Waiting for browser login…
+              </p>
+              {authorizeUrl && (
+                <p className="text-xs text-slate-500">
+                  If your browser did not open,{' '}
+                  <a
+                    href={authorizeUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-blue-600 underline break-all"
+                  >
+                    click here to authenticate
+                  </a>
+                  .
+                </p>
+              )}
+              <div>
+                <button
+                  type="button"
+                  onClick={handleCancel}
+                  className="px-3 py-1 text-xs font-medium border border-slate-300 rounded-md text-slate-600 hover:bg-slate-50 transition-colors"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Connected */}
+          {oauthPhase === 'connected' && (
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-3">
+                <span className="inline-flex items-center gap-1 text-xs font-medium text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-full px-2 py-0.5">
+                  ✓ Connected
+                </span>
+                {oauthInfo.accountId && (
+                  <span className="text-xs text-slate-500 font-mono">{oauthInfo.accountId}</span>
+                )}
+                {oauthInfo.expiresIn != null && (
+                  <span className="text-xs text-slate-400">
+                    · expires in {formatExpiresIn(oauthInfo.expiresIn)}
+                  </span>
+                )}
+                <div className="ml-auto flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={handleTest}
+                    disabled={testStatus === 'running'}
+                    className="w-14 flex items-center justify-center py-1 text-xs font-medium border border-emerald-300 rounded-md text-emerald-700 hover:bg-emerald-50 transition-colors disabled:opacity-40"
+                  >
+                    {testStatus === 'running'
+                      ? <span className="w-3 h-3 border border-emerald-400 border-t-emerald-700 rounded-full animate-spin" />
+                      : 'Test'}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleDisconnect}
+                    className="px-3 py-1 text-xs font-medium border border-slate-300 rounded-md text-slate-600 hover:bg-slate-50 transition-colors"
+                  >
+                    Disconnect
+                  </button>
+                </div>
+              </div>
+              {testStatus && testStatus !== 'running' && (
+                <div className={`text-xs rounded-md px-3 py-2 font-mono ${testStatus.error ? 'bg-red-50 text-red-700 border border-red-200' : 'bg-slate-50 text-slate-700 border border-slate-200'}`}>
+                  {testStatus.error
+                    ? `✗ ${testStatus.error}`
+                    : `✓ ${testStatus.response || 'Connected'}  [${testStatus.model} · ${testStatus.elapsed}ms]`}
+                </div>
+              )}
+              {/* Fallback toggle — only shown when an API key is also configured */}
+              {apiKeyInfo?.isSet && (
+                <div className="flex items-center gap-3 pt-1 border-t border-slate-100">
+                  <label className="flex items-center gap-2 cursor-pointer select-none">
+                    <div className="relative">
+                      <input
+                        type="checkbox"
+                        checked={fallbackEnabled}
+                        disabled={fallbackStatus === 'saving'}
+                        onChange={(e) => handleFallbackToggle(e.target.checked)}
+                        className="sr-only"
+                      />
+                      <div
+                        onClick={() => fallbackStatus !== 'saving' && handleFallbackToggle(!fallbackEnabled)}
+                        className={`w-8 h-4 rounded-full transition-colors cursor-pointer ${fallbackEnabled ? 'bg-blue-500' : 'bg-slate-300'} ${fallbackStatus === 'saving' ? 'opacity-40' : ''}`}
+                      >
+                        <div className={`absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${fallbackEnabled ? 'translate-x-4' : ''}`} />
+                      </div>
+                    </div>
+                    <span className="text-xs text-slate-600">Fallback to API Key on failure</span>
+                  </label>
+                  {fallbackStatus?.error && (
+                    <span className="text-xs text-red-600">{fallbackStatus.error}</span>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}