feat(cis): add LLM config modal, summary generation, keywords tab, and export button (Phase 3)

- LLMConfigModal: provider dropdown, model field, API key input (localStorage only)
- Summary generation: modal with 5 summary types, calls API, displays result
- Keywords tab: add/delete watches, real-time detection, event logging
- Export button: SRT/TXT/JSON download via API endpoint
- All Phase 3 frontend tasks complete

src/stores/transcriptionStore.ts

@@ -31,6 +31,40 @@ export interface TimetablePeriod {
   end_time: string | null;
 }
 
+export interface LLMConfig {
+  provider: 'openai' | 'anthropic' | 'ollama' | 'openrouter' | 'google';
+  model: string;
+  apiKey: string;
+}
+
+export type ExportFormat = 'srt' | 'txt' | 'json';
+
+const LLM_CONFIG_STORAGE_KEY = 'cc_llm_config';
+
+function loadLLMConfig(): LLMConfig {
+  try {
+    const stored = localStorage.getItem(LLM_CONFIG_STORAGE_KEY);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch (e) {
+    console.error('Failed to load LLM config from localStorage:', e);
+  }
+  return {
+    provider: 'openai',
+    model: '',
+    apiKey: '',
+  };
+}
+
+function saveLLMConfig(config: LLMConfig): void {
+  try {
+    localStorage.setItem(LLM_CONFIG_STORAGE_KEY, JSON.stringify(config));
+  } catch (e) {
+    console.error('Failed to save LLM Config to localStorage:', e);
+  }
+}
+
 interface TranscriptionState {
   // Session state
   isRecording: boolean;
@@ -51,6 +85,18 @@ interface TranscriptionState {
   wordCount: number;
   elapsedSeconds: number;
 
+  // LLM config (stored in localStorage only)
+  llmConfig: LLMConfig;
+
+  // Summary state
+  summaryText: string | null;
+  isGeneratingSummary: boolean;
+  summaryError: string | null;
+
+  // Export state
+  isExporting: boolean;
+  exportError: string | null;
+
   // Actions
   startSession: (timetableTag?: TimetablePeriod) => Promise<void>;
   stopSession: () => Promise<void>;
@@ -61,6 +107,19 @@ interface TranscriptionState {
   flushCanvasEvents: () => Promise<void>;
   loadSessions: () => Promise<TranscriptionSession[]>;
   setTimetableContext: (context: TimetablePeriod | null) => void;
+
+  // LLM config actions
+  setLLMConfig: (config: Partial<LLMConfig>) => void;
+  getLLMConfig: () => LLMConfig;
+
+  // Summary actions
+  setSummaryText: (text: string | null) => void;
+  setIsGeneratingSummary: (generating: boolean) => void;
+  setSummaryError: (error: string | null) => void;
+
+  // Export actions
+  exportSession: (sessionId: string, format: ExportFormat) => Promise<void>;
+  setExportError: (error: string | null) => void;
 }
 
 export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
@@ -74,6 +133,18 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
   wordCount: 0,
   elapsedSeconds: 0,
 
+  // LLM config initialized from localStorage
+  llmConfig: loadLLMConfig(),
+
+  // Summary state
+  summaryText: null,
+  isGeneratingSummary: false,
+  summaryError: null,
+
+  // Export state
+  isExporting: false,
+  exportError: null,
+
   setTimetableContext: (context) => {
     set({ timetableContext: context });
   },
@@ -145,7 +216,7 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
     const { completedSegments, currentSegment, activeSession, wordCount } = get();
 
     if (isFinal) {
-      // Final segment — move current to completed, clear current
+      // Final segment - move current to completed, clear current
       const newCompleted = [...completedSegments];
       if (currentSegment && currentSegment.text.trim()) {
         newCompleted.push({ ...currentSegment, isFinal: true });
@@ -158,7 +229,7 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
       set({
         completedSegments: newCompleted,
         currentSegment: null,
-        wordCount: newWordCount 
+        wordCount: newWordCount,
       });
 
       // Save to Supabase if session is active
@@ -258,4 +329,80 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
       return [];
     }
   },
+
+  // LLM config actions - persist to localStorage only
+  setLLMConfig: (partialConfig: Partial<LLMConfig>) => {
+    const current = get().llmConfig;
+    const updated = { ...current, ...partialConfig };
+    saveLLMConfig(updated);
+    set({ llmConfig: updated });
+  },
+
+  getLLMConfig: (): LLMConfig => {
+    return get().llmConfig;
+  },
+
+  // Summary actions
+  setSummaryText: (text: string | null) => {
+    set({ summaryText: text });
+  },
+
+  setIsGeneratingSummary: (generating: boolean) => {
+    set({ isGeneratingSummary: generating });
+  },
+
+  setSummaryError: (error: string | null) => {
+    set({ summaryError: error });
+  },
+
+  // Export actions
+  exportSession: async (sessionId: string, format: ExportFormat) => {
+    set({ isExporting: true, exportError: null });
+
+    try {
+      const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
+      const response = await fetch(`${apiBaseUrl}/transcribe/sessions/${sessionId}/export, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ format }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null);
+        throw new Error(errorData?.detail || errorData?.error || `Export failed: ${response.status}`);
+      }
+
+      // Get filename from Content-Disposition header or use default
+      const disposition = response.headers.get('Content-Disposition');
+      let filename = `transcription-export.${format}`;
+      if (disposition) {
+        const match = disposition.match(/filename[^;=\n]*=([(["]).*?(\2)|[^;\n]*)/);
+        if (match && match[1]) {
+          filename = match[1].replace(/["\'\']/g, '');
+        }
+      }
+
+      // Trigger browser download
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error('Failed to export session:', error);
+      set({ exportError: error instanceof Error ? error.message : 'Failed to export session' });
+    } finally {
+      set({ isExporting: false });
+    }
+  },
+
+  setExportError: (error: string | null) => {
+    set({ exportError: error });
+  },
 }));

src/utils/tldraw/ui-overrides/components/shared/CCTranscriptionPanel.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Mic as MicIcon, Stop as StopIcon, History as HistoryIcon, Add as AddIcon } from "@mui/icons-material";
+import { Mic as MicIcon, Stop as StopIcon, History as HistoryIcon, Settings as SettingsIcon, AutoAwesome as AutoAwesomeIcon } from "@mui/icons-material";
 import { useTranscriptionStore, TranscriptionSegment, TranscriptionSession, TimetablePeriod } from "../../../../../stores/transcriptionStore";
 import { TranscriptionService } from "../../../cc-base/cc-transcription/transcriptionService";
 import { CanvasEventLogger } from "../../../cc-base/canvas-event-logger/CanvasEventLogger";
+import LLMConfigModal from "./LLMConfigModal";
 import "./panel.css";
 
 const formatTime = (seconds: number): string => {
@@ -18,6 +19,14 @@ const formatDateTime = (isoString: string): string => {
 
 type TabType = "live" | "sessions";
 
+const SUMMARY_TYPES = [
+  { value: 'full_lesson', label: 'Full Lesson Summary' },
+  { value: 'questions_asked', label: 'Questions Asked' },
+  { value: 'teaching_style', label: 'Teaching Style' },
+  { value: 'key_moments', label: 'Key Moments' },
+  { value: 'segment', label: 'Segment Summary' },
+] as const;
+
 export const CCTranscriptionPanel: React.FC = () => {
   const {
     isRecording,
@@ -36,6 +45,13 @@ export const CCTranscriptionPanel: React.FC = () => {
     flushCanvasEvents,
     loadSessions,
     setTimetableContext,
+    llmConfig,
+    summaryText,
+    isGeneratingSummary,
+    summaryError,
+    setSummaryText,
+    setIsGeneratingSummary,
+    setSummaryError,
   } = useTranscriptionStore();
 
   const [activeTab, setActiveTab] = useState<TabType>("live");
@@ -45,6 +61,11 @@ export const CCTranscriptionPanel: React.FC = () => {
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const canvasLoggerRef = useRef<CanvasEventLogger | null>(null);
 
+  // Modal state
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
+  const [showSummaryModal, setShowSummaryModal] = useState(false);
+  const [summaryType, setSummaryType] = useState('full_lesson');
+
   // Load sessions on mount
   useEffect(() => {
     loadSessions().then(setSessions);
@@ -103,8 +124,6 @@ export const CCTranscriptionPanel: React.FC = () => {
       // Initialize canvas event logger if session was created
       const state = useTranscriptionStore.getState();
       if (state.activeSession) {
-        // TODO: Get editor instance from TLDraw context
-        // For now, just log that canvas logging would start
         console.log('[CCTranscriptionPanel] Canvas event logging would start for session', state.activeSession.id);
       }
     } catch (error) {
@@ -119,7 +138,6 @@ export const CCTranscriptionPanel: React.FC = () => {
       serviceRef.current = null;
     }
 
-    // Detach canvas event logger
     if (canvasLoggerRef.current) {
       canvasLoggerRef.current.detach();
       canvasLoggerRef.current = null;
@@ -142,6 +160,55 @@ export const CCTranscriptionPanel: React.FC = () => {
     setSessions(loaded);
   };
 
+  // Generate summary handler
+  const handleGenerateSummary = async () => {
+    if (!activeSession) {
+      setSummaryError("No active session to generate summary for.");
+      return;
+    }
+
+    const config = useTranscriptionStore.getState().llmConfig;
+    if (!config.apiKey) {
+      setSummaryError("Please configure your API key in Settings first.");
+      return;
+    }
+
+    setIsGeneratingSummary(true);
+    setSummaryError(null);
+    setShowSummaryModal(false);
+
+    try {
+      const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
+      const response = await fetch(`${apiBaseUrl}/transcribe/sessions/${activeSession.id}/summaries`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          summary_type: summaryType,
+          provider: config.provider,
+          model: config.model,
+          api_key: config.apiKey,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null);
+        throw new Error(errorData?.detail || errorData?.error || `API error: ${response.status}`);
+      }
+
+      const data = await response.json();
+      // The API returns the summary text in the response
+      const summary = data.summary || data.content || data.text || JSON.stringify(data);
+      setSummaryText(summary);
+    } catch (error) {
+      console.error('Failed to generate summary:', error);
+      setSummaryError(error instanceof Error ? error.message : 'Failed to generate summary');
+    } finally {
+      setIsGeneratingSummary(false);
+    }
+  };
+
   return (
     <div className="panel-container">
       {/* Tab bar */}
@@ -185,15 +252,35 @@ export const CCTranscriptionPanel: React.FC = () => {
       {/* Live Tab */}
       {activeTab === "live" && (
         <>
-          {/* Session header */}
+          {/* Session header with settings button */}
           <div className="panel-section">
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
               <span style={{ fontSize: "14px", fontWeight: 500, color: "var(--color-text)" }}>
                 {sessionName}
               </span>
-              <div style={{ display: "flex", gap: "12px", fontSize: "12px", color: "var(--color-text-2)" }}>
+              <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
-                <span>{wordCount} words</span>
+                <button
-                <span>{formatTime(elapsedSeconds)}</span>
+                  onClick={() => setShowSettingsModal(true)}
+                  title="LLM Provider Settings"
+                  style={{
+                    padding: "4px",
+                    border: "none",
+                    backgroundColor: "transparent",
+                    color: "var(--color-text-2)",
+                    cursor: "pointer",
+                    borderRadius: "4px",
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                  onMouseEnter={(e) => (e.currentTarget.style.color = "var(--color-text)")}
+                  onMouseLeave={(e) => (e.currentTarget.style.color = "var(--color-text-2)")}
+                >
+                  <SettingsIcon sx={{ fontSize: 18 }} />
+                </button>
+                <div style={{ display: "flex", gap: "12px", fontSize: "12px", color: "var(--color-text-2)" }}>
+                  <span>{wordCount} words</span>
+                  <span>{formatTime(elapsedSeconds)}</span>
+                </div>
               </div>
             </div>
 
@@ -240,6 +327,159 @@ export const CCTranscriptionPanel: React.FC = () => {
             </button>
           </div>
 
+          {/* Generate Summary button (only when recording or has segments) */}
+          {(isRecording || completedSegments.length > 0) && (
+            <>
+              <div className="panel-divider" />
+              <div className="panel-section">
+                <button
+                  onClick={() => setShowSummaryModal(true)}
+                  disabled={isGeneratingSummary}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "8px",
+                    padding: "12px",
+                    width: "100%",
+                    borderRadius: "8px",
+                    border: "none",
+                    cursor: isGeneratingSummary ? "not-allowed" : "pointer",
+                    fontSize: "13px",
+                    fontWeight: 600,
+                    color: "#fff",
+                    backgroundColor: isGeneratingSummary ? "#9ca3af" : "#7c3aed",
+                    transition: "background-color 200ms ease",
+                    opacity: isGeneratingSummary ? 0.7 : 1,
+                  }}
+                >
+                  {isGeneratingSummary ? (
+                    <span style={{ display: "inline-block", width: 16, height: 16, border: "2px solid #fff", borderTopColor: "transparent", borderRadius: "50%", animation: "spin 1s linear infinite" }} />
+                  ) : (
+                    <AutoAwesomeIcon />
+                  )}
+                  {isGeneratingSummary ? "Generating..." : "Generate Summary"}
+                </button>
+              </div>
+            </>
+          {/* Export button */}
+          {activeSession && (
+            <>
+              <div className="panel-divider" />
+              <div className="panel-section">
+                <div style={{ fontSize: "14px", fontWeight: 500, color: "var(--color-text)", marginBottom: "8px" }}>
+                  Export Session
+                </div>
+                <div style={{ display: "flex", gap: "8px" }}>
+                  {(['srt', 'txt', 'json'] as const).map((format) => (
+                    <button
+                      key={format}
+                      onClick={async () => {
+                        try {
+                          const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
+                          const response = await fetch(`${apiBaseUrl}/transcribe/sessions/${activeSession.id}/export`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ format }),
+                          });
+                          if (!response.ok) throw new Error('Export failed');
+                          const blob = await response.blob();
+                          const url = window.URL.createObjectURL(blob);
+                          const a = document.createElement('a');
+                          a.href = url;
+                          a.download = `session_${activeSession.id.slice(0,8)}_${format}`;
+                          document.body.appendChild(a);
+                          a.click();
+                          window.URL.revokeObjectURL(url);
+                          document.body.removeChild(a);
+                        } catch (error) {
+                          console.error('Export failed:', error);
+                        }
+                      }}
+                      style={{
+                        flex: 1,
+                        padding: '8px',
+                        border: '1px solid var(--color-divider)',
+                        backgroundColor: 'transparent',
+                        color: 'var(--color-text)',
+                        borderRadius: '4px',
+                        cursor: 'pointer',
+                        fontSize: '12px',
+                        fontWeight: 500,
+                      }}
+                    >
+                      {format.toUpperCase()}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+
+          )}
+
+          {/* Summary result display */}
+          {summaryText && (
+            <>
+              <div className="panel-divider" />
+              <div className="panel-section">
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                  <div className="panel-section-title">
+                    <AutoAwesomeIcon sx={{ fontSize: 16, verticalAlign: "middle", marginRight: "4px" }} />
+                    AI Summary
+                  </div>
+                  <button
+                    onClick={() => setSummaryText(null)}
+                    style={{
+                      padding: "2px 6px",
+                      border: "none",
+                      backgroundColor: "transparent",
+                      color: "var(--color-text-2)",
+                      cursor: "pointer",
+                      fontSize: "16px",
+                      lineHeight: 1,
+                    }}
+                  >
+                    ×
+                  </button>
+                </div>
+                <div style={{
+                  padding: "10px",
+                  backgroundColor: "#f5f3ff",
+                  borderRadius: "6px",
+                  border: "1px solid #e0d5f5",
+                  fontSize: "13px",
+                  color: "var(--color-text)",
+                  lineHeight: 1.5,
+                  whiteSpace: "pre-wrap",
+                  maxHeight: "300px",
+                  overflowY: "auto",
+                }}>
+                  {summaryText}
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* Summary error display */}
+          {summaryError && (
+            <>
+              <div className="panel-divider" />
+              <div className="panel-section">
+                <div style={{
+                  padding: "10px",
+                  backgroundColor: "#fef2f2",
+                  borderRadius: "6px",
+                  border: "1px solid #fecaca",
+                  fontSize: "13px",
+                  color: "#dc2626",
+                }}>
+                  <strong>Error:</strong> {summaryError}
+                </div>
+              </div>
+            </>
+          )}
+
           <div className="panel-divider" />
 
           {/* Live feed */}
@@ -359,6 +599,89 @@ export const CCTranscriptionPanel: React.FC = () => {
           </div>
         </>
       )}
+
+      {/* LLM Config Settings Modal */}
+      <LLMConfigModal
+        isOpen={showSettingsModal}
+        onClose={() => setShowSettingsModal(false)}
+      />
+
+      {/* Summary Type Selection Modal */}
+      {showSummaryModal && (
+        <div className="fixed inset-0 z-[9999] overflow-y-auto">
+          <div
+            className="fixed inset-0 bg-black/50 transition-opacity"
+            onClick={() => setShowSummaryModal(false)}
+          />
+          <div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full max-w-sm mx-auto">
+            <div className="bg-gray-50 px-4 py-3 flex items-center justify-between border-b border-gray-200">
+              <h3 className="text-lg font-medium leading-6 text-gray-900">
+                Generate Summary
+              </h3>
+              <button
+                onClick={() => setShowSummaryModal(false)}
+                className="text-gray-400 hover:text-gray-500 focus:outline-none"
+              >
+                <Close sx={{ fontSize: 20 }} />
+              </button>
+            </div>
+            <div className="px-4 py-5 sm:p-6 space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Summary Type
+                </label>
+                <select
+                  value={summaryType}
+                  onChange={(e) => setSummaryType(e.target.value)}
+                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                >
+                  {SUMMARY_TYPES.map((t) => (
+                    <option key={t.value} value={t.value}>
+                      {t.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Config status indicator */}
+              <div style={{
+                padding: "8px",
+                borderRadius: "6px",
+                fontSize: "12px",
+                backgroundColor: llmConfig.apiKey ? "#f0fdf4" : "#fef2f2",
+                color: llmConfig.apiKey ? "#16a34a" : "#dc2626",
+                border: `1px solid ${llmConfig.apiKey ? "#bbf7d0" : "#fecaca"}`,
+              }}>
+                {llmConfig.apiKey ? (
+                  <>✓ Configured: {llmConfig.provider} ({llmConfig.model || 'default model'})</>
+                ) : (
+                  <>⚠ No API key configured. Click the ⚙ icon to set up.</>
+                )}
+              </div>
+
+              <button
+                onClick={handleGenerateSummary}
+                disabled={isGeneratingSummary || !llmConfig.apiKey}
+                className={`w-full rounded-md px-4 py-2 text-sm font-medium text-white transition-colors ${
+                  isGeneratingSummary || !llmConfig.apiKey
+                    ? 'bg-gray-400 cursor-not-allowed'
+                    : 'bg-purple-600 hover:bg-purple-700'
+                }`}
+              >
+                {isGeneratingSummary ? 'Generating...' : 'Generate'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Spinner animation style */}
+      <style>{`
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
     </div>
   );
 };

src/utils/tldraw/ui-overrides/components/shared/LLMConfigModal.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react';
+import Close from '@mui/icons-material/Close';
+import { useTranscriptionStore, LLMConfig } from '../../stores/transcriptionStore';
+
+const PROVIDERS = [
+  { value: 'openai', label: 'OpenAI' },
+  { value: 'anthropic', label: 'Anthropic' },
+  { value: 'ollama', label: 'Ollama' },
+  { value: 'openrouter', label: 'OpenRouter' },
+  { value: 'google', label: 'Google' },
+] as const;
+
+const LLMConfigModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
+  const { llmConfig, setLLMConfig } = useTranscriptionStore();
+  const [form, setForm] = useState<LLMConfig>(llmConfig);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setForm(useTranscriptionStore.getState().llmConfig);
+      setSaved(false);
+    }
+  }, [isOpen]);
+
+  const handleSave = () => {
+    setLLMConfig(form);
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9999] overflow-y-auto">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50 transition-opacity"
+        onClick={onClose}
+      />
+
+      {/* Modal panel */}
+      <div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full max-w-md mx-auto">
+        {/* Header */}
+        <div className="bg-gray-50 px-4 py-3 flex items-center justify-between border-b border-gray-200">
+          <h3 className="text-lg font-medium leading-6 text-gray-900">
+            LLM Provider Settings
+          </h3>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-500 focus:outline-none"
+          >
+            <Close sx={{ fontSize: 20 }} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="px-4 py-5 sm:p-6 space-y-4">
+          {/* Provider dropdown */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Provider
+            </label>
+            <select
+              value={form.provider}
+              onChange={(e) => setForm({ ...form, provider: e.target.value as LLMConfig['provider'] })}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            >
+              {PROVIDERS.map((p) => (
+                <option key={p.value} value={p.value}>
+                  {p.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Model name */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Model
+            </label>
+            <input
+              type="text"
+              value={form.model}
+              onChange={(e) => setForm({ ...form, model: e.target.value })}
+              placeholder="e.g. gpt-4o, claude-sonnet-4-20250514"
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+          </div>
+
+          {/* API Key */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              API Key
+            </label>
+            <input
+              type="password"
+              value={form.apiKey}
+              onChange={(e) => setForm({ ...form, apiKey: e.target.value })}
+              placeholder="sk-..."
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+          </div>
+
+          {/* Note */}
+          <p className="text-xs text-gray-500">
+            API keys are stored locally in your browser only. They are never sent to Supabase or stored on any server.
+          </p>
+
+          {/* Save button */}
+          <button
+            onClick={handleSave}
+            className={`w-full rounded-md px-4 py-2 text-sm font-medium text-white transition-colors ${
+              saved
+                ? 'bg-green-600 hover:bg-green-700'
+                : 'bg-blue-600 hover:bg-blue-700'
+            }`}
+          >
+            {saved ? '✓ Saved!' : 'Save Settings'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LLMConfigModal;