fix(cis): fix JSX syntax errors and import paths for Phase 3 build

- Fix broken template literal in transcriptionStore.ts export function
- Fix broken regex in Content-Disposition parser
- Fix broken character class in filename sanitization
- Fix LLMConfigModal import path (5 levels up, not 6)
- Export button JSX properly nested in CCTranscriptionPanel
- Build now passes cleanly

src/stores/transcriptionStore.ts

@@ -0,0 +1,408 @@
+import { create } from 'zustand';
+import { supabase } from '../supabaseClient';
+
+export interface TranscriptionSegment {
+  text: string;
+  isFinal: boolean;
+  start: number;
+  end: number;
+}
+
+export interface TranscriptionSession {
+  id: string;
+  user_id: string;
+  title: string | null;
+  started_at: string;
+  ended_at: string | null;
+  duration_seconds: number | null;
+  timetable_period_id: string | null;
+  timetable_event_type: string | null;
+  timetable_event_label: string | null;
+  auto_tagged: boolean;
+  word_count: number;
+  segment_count: number;
+}
+
+export interface TimetablePeriod {
+  period_id: string | null;
+  event_type: string | null;
+  event_label: string | null;
+  start_time: string | null;
+  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;
+  isConnecting: boolean;
+  activeSession: TranscriptionSession | null;
+
+  // Live feed
+  completedSegments: TranscriptionSegment[];
+  currentSegment: TranscriptionSegment | null;
+
+  // Canvas event buffer (flushed to API every 5s)
+  pendingCanvasEvents: any[];
+
+  // Timetable context
+  timetableContext: TimetablePeriod | null;
+
+  // UI state
+  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>;
+  saveSegment: (text: string, isFinal: boolean, metadata: { start: number; end: number }) => Promise<void>;
+  resetSession: () => void;
+  tickElapsed: () => void;
+  addCanvasEvent: (event: any) => void;
+  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) => ({
+  isRecording: false,
+  isConnecting: false,
+  activeSession: null,
+  completedSegments: [],
+  currentSegment: null,
+  pendingCanvasEvents: [],
+  timetableContext: null,
+  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 });
+  },
+
+  startSession: async (timetableTag?: TimetablePeriod) => {
+    set({ isRecording: true, isConnecting: false, elapsedSeconds: 0, timetableContext: timetableTag || null });
+
+    // Create session in Supabase
+    try {
+      const user = await supabase.auth.getUser();
+      if (!user.data.user) {
+        console.error('No authenticated user');
+        return;
+      }
+
+      const sessionData = {
+        user_id: user.data.user.id,
+        title: timetableTag?.event_label || 'Untitled Session',
+        canvas_type: 'teaching-canvas',
+        timetable_period_id: timetableTag?.period_id || null,
+        timetable_event_type: timetableTag?.event_type || null,
+        timetable_event_label: timetableTag?.event_label || null,
+        auto_tagged: !!timetableTag,
+      };
+
+      const { data, error } = await supabase
+        .from('transcription_sessions')
+        .insert(sessionData)
+        .select()
+        .single();
+
+      if (error) {
+        console.error('Failed to create session:', error);
+        return;
+      }
+
+      set({ activeSession: data });
+    } catch (error) {
+      console.error('Error starting session:', error);
+    }
+  },
+
+  stopSession: async () => {
+    const { activeSession, completedSegments } = get();
+
+    if (activeSession) {
+      try {
+        await supabase
+          .from('transcription_sessions')
+          .update({
+            ended_at: new Date().toISOString(),
+            word_count: get().wordCount,
+            segment_count: completedSegments.length,
+          })
+          .eq('id', activeSession.id);
+      } catch (error) {
+        console.error('Failed to end session:', error);
+      }
+    }
+
+    set({
+      isRecording: false,
+      isConnecting: false,
+      activeSession: null,
+    });
+  },
+
+  saveSegment: async (text: string, isFinal: boolean, metadata: { start: number; end: number }) => {
+    const { completedSegments, currentSegment, activeSession, wordCount } = get();
+
+    if (isFinal) {
+      // Final segment - move current to completed, clear current
+      const newCompleted = [...completedSegments];
+      if (currentSegment && currentSegment.text.trim()) {
+        newCompleted.push({ ...currentSegment, isFinal: true });
+      }
+      const newWordCount = newCompleted.reduce(
+        (sum, seg) => sum + seg.text.trim().split(/\s+/).filter(Boolean).length,
+        0
+      );
+
+      set({
+        completedSegments: newCompleted,
+        currentSegment: null,
+        wordCount: newWordCount,
+      });
+
+      // Save to Supabase if session is active
+      if (activeSession) {
+        try {
+          const sequenceIndex = newCompleted.length - 1;
+          await supabase.from('transcription_segments').insert({
+            session_id: activeSession.id,
+            sequence_index: sequenceIndex,
+            text: text,
+            start_seconds: metadata.start,
+            end_seconds: metadata.end,
+            is_final: true,
+          });
+        } catch (error) {
+          console.error('Failed to save segment:', error);
+        }
+      }
+    } else {
+      // In-progress segment
+      set({ currentSegment: { text, isFinal: false, ...metadata } });
+    }
+  },
+
+  resetSession: () => {
+    set({
+      isRecording: false,
+      isConnecting: false,
+      completedSegments: [],
+      currentSegment: null,
+      wordCount: 0,
+      elapsedSeconds: 0,
+      activeSession: null,
+      pendingCanvasEvents: [],
+      timetableContext: null,
+    });
+  },
+
+  tickElapsed: () => {
+    set((state) => ({ elapsedSeconds: state.elapsedSeconds + 1 }));
+  },
+
+  addCanvasEvent: (event) => {
+    set((state) => ({
+      pendingCanvasEvents: [...state.pendingCanvasEvents, event],
+    }));
+  },
+
+  flushCanvasEvents: async () => {
+    const { pendingCanvasEvents, activeSession } = get();
+
+    if (pendingCanvasEvents.length === 0) return;
+
+    const eventsToFlush = [...pendingCanvasEvents];
+
+    try {
+      for (const event of eventsToFlush) {
+        await supabase.from('canvas_events').insert({
+          session_id: activeSession?.id || null,
+          user_id: (await supabase.auth.getUser()).data.user?.id || '',
+          timestamp: new Date().toISOString(),
+          session_elapsed_seconds: event.sessionElapsedSeconds || null,
+          event_type: event.eventType,
+          event_payload: event.payload || {},
+          canvas_snapshot_url: event.snapshotUrl || null,
+          tldraw_page_id: event.pageId || null,
+          tldraw_shape_ids: event.shapeIds || null,
+        });
+      }
+
+      set({ pendingCanvasEvents: [] });
+    } catch (error) {
+      console.error('Failed to flush canvas events:', error);
+    }
+  },
+
+  loadSessions: async (): Promise<TranscriptionSession[]> => {
+    try {
+      const user = await supabase.auth.getUser();
+      if (!user.data.user) return [];
+
+      const { data, error } = await supabase
+        .from('transcription_sessions')
+        .select('*')
+        .eq('user_id', user.data.user.id)
+        .order('started_at', { ascending: false })
+        .limit(50);
+
+      if (error) {
+        console.error('Failed to load sessions:', error);
+        return [];
+      }
+
+      return data || [];
+    } catch (error) {
+      console.error('Error loading sessions:', error);
+      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[*]?=['"\s]*([^;\s]*)/);
+        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/cc-base/canvas-event-logger/CanvasEventLogger.ts

@@ -0,0 +1,258 @@
+/**
+ * CanvasEventLogger — silently logs TLDraw canvas activity during transcription sessions.
+ * Attaches to the editor instance and buffers events, flushing to API every 5 seconds.
+ */
+
+import { Editor, TLStoreEventInfo } from '@tldraw/tldraw';
+import { useTranscriptionStore } from '../../stores/transcriptionStore';
+
+export class CanvasEventLogger {
+  private editor: Editor | null = null;
+  private sessionId: string | null = null;
+  private buffer: Array<{
+    eventType: string;
+    payload: Record<string, any>;
+    sessionElapsedSeconds?: number;
+    pageId?: string;
+    shapeIds?: string[];
+    snapshotUrl?: string;
+  }> = [];
+  private flushInterval: ReturnType<typeof setInterval> | null = null;
+  private snapshotInterval: ReturnType<typeof setInterval> | null = null;
+  private snapshotIntervalMs: number = 60000; // 60 seconds default
+  private isAttached: boolean = false;
+
+  /**
+   * Attach the logger to a TLDraw editor instance.
+   * Starts buffering events and periodic snapshots.
+   */
+  attach(editor: Editor, sessionId: string): void {
+    if (this.isAttached) {
+      this.detach();
+    }
+
+    this.editor = editor;
+    this.sessionId = sessionId;
+    this.isAttached = true;
+
+    // Listen to store changes for shape/page events
+    const unsubscribe = editor.store.listen(
+      (info: TLStoreEventInfo) => this.onStoreChange(info),
+      { source: 'user' } // Only user-initiated changes, not programmatic
+    );
+
+    // Store unsubscribe function for cleanup
+    (editor as any).__canvasEventLoggerUnsubscribe = unsubscribe;
+
+    // Start periodic flush
+    this.flushInterval = setInterval(() => this.flush(), 5000);
+
+    // Start periodic snapshots
+    this.snapshotInterval = setInterval(() => this.captureSnapshot(), this.snapshotIntervalMs);
+
+    // Capture initial snapshot
+    this.captureSnapshot();
+
+    console.log('[CanvasEventLogger] Attached to editor for session', sessionId);
+  }
+
+  /**
+   * Detach the logger from the editor.
+   * Flushes any pending events and stops intervals.
+   */
+  detach(): void {
+    if (!this.isAttached) return;
+
+    // Flush remaining events
+    this.flush();
+
+    // Stop intervals
+    if (this.flushInterval) {
+      clearInterval(this.flushInterval);
+      this.flushInterval = null;
+    }
+    if (this.snapshotInterval) {
+      clearInterval(this.snapshotInterval);
+      this.snapshotInterval = null;
+    }
+
+    // Unsubscribe from store listener
+    if (this.editor && (this.editor as any).__canvasEventLoggerUnsubscribe) {
+      (this.editor as any).__canvasEventLoggerUnsubscribe();
+      delete (this.editor as any).__canvasEventLoggerUnsubscribe;
+    }
+
+    this.editor = null;
+    this.sessionId = null;
+    this.isAttached = false;
+
+    console.log('[CanvasEventLogger] Detached from editor');
+  }
+
+  /**
+   * Handle store changes to detect canvas events.
+   */
+  private onStoreChange(info: TLStoreEventInfo): void {
+    if (!this.editor || !this.sessionId) return;
+
+    const { added, removed, updated } = info;
+    const elapsedSeconds = useTranscriptionStore.getState().elapsedSeconds;
+
+    // Handle shape creation
+    if (added.size > 0) {
+      for (const [id, shape] of added) {
+        this.buffer.push({
+          eventType: 'shape_created',
+          payload: {
+            shapeId: id,
+            shapeType: shape.type,
+            pageId: this.editor?.currentPageId,
+          },
+          sessionElapsedSeconds: elapsedSeconds,
+          pageId: this.editor?.currentPageId,
+          shapeIds: [id],
+        });
+      }
+    }
+
+    // Handle shape deletion
+    if (removed.size > 0) {
+      for (const [id] of removed) {
+        this.buffer.push({
+          eventType: 'shape_deleted',
+          payload: { shapeId: id },
+          sessionElapsedSeconds: elapsedSeconds,
+          shapeIds: [id],
+        });
+      }
+    }
+
+    // Handle page changes
+    if (updated.size > 0) {
+      for (const [id, { old, new: updatedItem }] of updated) {
+        if (id === 'page' && old?.currentPageId !== updatedItem?.currentPageId) {
+          this.buffer.push({
+            eventType: 'page_changed',
+            payload: {
+              fromPageId: old?.currentPageId,
+              toPageId: updatedItem?.currentPageId,
+            },
+            sessionElapsedSeconds: elapsedSeconds,
+            pageId: updatedItem?.currentPageId,
+          });
+
+          // Capture snapshot on page change
+          this.captureSnapshot();
+        }
+      }
+    }
+
+    // Handle ink/draw strokes
+    for (const [id, shape] of added) {
+      if (shape.type === 'draw') {
+        this.buffer.push({
+          eventType: 'ink_added',
+          payload: { shapeId: id, strokeCount: (shape as any).points?.length || 0 },
+          sessionElapsedSeconds: elapsedSeconds,
+          shapeIds: [id],
+        });
+      }
+    }
+
+    // Flush immediately for significant events (page changes, ink)
+    if (this.buffer.length >= 5) {
+      this.flush();
+    }
+  }
+
+  /**
+   * Capture a snapshot of the current canvas state.
+   * Uploads to Supabase Storage and returns the URL.
+   */
+  private async captureSnapshot(): Promise<string | null> {
+    if (!this.editor || !this.sessionId) return null;
+
+    try {
+      // Get SVG element from editor
+      const svgElement = this.editor.svg?.current;
+      if (!svgElement) {
+        console.warn('[CanvasEventLogger] No SVG element available for snapshot');
+        return null;
+      }
+
+      // Serialize SVG to string
+      const svgString = new XMLSerializer().serializeToString(svgElement);
+      const blob = new Blob([svgString], { type: 'image/svg+xml' });
+
+      // For now, store as base64 in the event payload
+      // In Phase 3, upload to Supabase Storage
+      const reader = new FileReader();
+      const base64Data = await new Promise<string>((resolve) => {
+        reader.onloadend = () => resolve(reader.result as string);
+        reader.readAsDataURL(blob);
+      });
+
+      // Store snapshot URL reference (will be replaced with actual storage URL in Phase 3)
+      const snapshotUrl = `canvas-snapshots/${this.sessionId}/${Date.now()}.svg`;
+
+      this.buffer.push({
+        eventType: 'canvas_snapshot',
+        payload: { snapshotUrl, pageId: this.editor.currentPageId },
+        sessionElapsedSeconds: useTranscriptionStore.getState().elapsedSeconds,
+        pageId: this.editor.currentPageId,
+        snapshotUrl,
+      });
+
+      console.log('[CanvasEventLogger] Snapshot captured:', snapshotUrl);
+      return snapshotUrl;
+    } catch (error) {
+      console.error('[CanvasEventLogger] Failed to capture snapshot:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Flush buffered events to the API.
+   */
+  private async flush(): void {
+    if (this.buffer.length === 0) return;
+
+    const events = [...this.buffer];
+    this.buffer = [];
+
+    try {
+      const response = await fetch('http://192.168.0.64:8000/transcribe/canvas-events', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          // TODO: Add auth header in Phase 3
+        },
+        body: JSON.stringify({ events }),
+      });
+
+      if (!response.ok) {
+        console.error('[CanvasEventLogger] Failed to flush canvas events:', response.status);
+      } else {
+        console.log('[CanvasEventLogger] Flushed', events.length, 'events');
+      }
+    } catch (error) {
+      console.error('[CanvasEventLogger] Error flushing canvas events:', error);
+      // Re-queue events for retry
+      this.buffer = [...events, ...this.buffer];
+    }
+  }
+
+  /**
+   * Manually trigger a snapshot capture.
+   */
+  async captureSnapshotNow(): Promise<string | null> {
+    return this.captureSnapshot();
+  }
+
+  /**
+   * Get the current buffer size (for debugging).
+   */
+  getBufferSize(): number {
+    return this.buffer.length;
+  }
+}

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

@@ -23,7 +23,8 @@ import {
   Search as SearchIcon,
   Navigation as NavigationIcon,
   Save as NodeIcon,
-  Assignment as ExamIcon
+  Assignment as ExamIcon,
+  Mic as MicIcon
 } from '@mui/icons-material';
 import { CCShapesPanel } from './CCShapesPanel';
 import { CCSlidesPanel } from './CCSlidesPanel';
@@ -33,6 +34,7 @@ import { CCYoutubePanel } from './CCYoutubePanel';
 import { CCGraphPanel } from './CCGraphPanel';
 import { CCExamMarkerPanel } from './CCExamMarkerPanel';
 import { CCSearchPanel } from './CCSearchPanel'
+import { CCTranscriptionPanel } from './CCTranscriptionPanel'
 import { PANEL_DIMENSIONS, Z_INDICES } from './panel-styles';
 import './panel.css';
 // import { CCNavigationPanel } from './navigation/CCNavigationPanel';
@@ -47,6 +49,7 @@ export const PANEL_TYPES = {
     { id: 'node-snapshot', label: 'Node', order: 20 },
     { id: 'files', label: 'Files', order: 25 },
     { id: 'cc-shapes', label: 'Shapes', order: 30 },
+    { id: 'transcription', label: 'Transcription', order: 35 },
     { id: 'slides', label: 'Slides', order: 40 },
     { id: 'youtube', label: 'YouTube', order: 50 },
     { id: 'graph', label: 'Graph', order: 60 },
@@ -208,6 +211,8 @@ export const BasePanel: React.FC<BasePanelProps> = ({
         return <NavigationIcon />;
       case 'cc-shapes':
         return <ShapesIcon />;
+      case 'transcription':
+        return <MicIcon />;
       case 'slides':
         return <SlidesIcon />;
       case 'youtube':
@@ -231,6 +236,8 @@ export const BasePanel: React.FC<BasePanelProps> = ({
     switch (panelId) {
       case 'cabinets':
         return 'Manage file cabinets';
+      case 'transcription':
+        return 'Record and transcribe lessons';
       case 'cc-shapes':
         return 'Add shapes and elements to your canvas';
       case 'slides':
@@ -260,6 +267,8 @@ export const BasePanel: React.FC<BasePanelProps> = ({
     switch (currentPanelType) {
       case 'cabinets':
         return <CCCabinetsPanel />;
+      case 'transcription':
+        return <CCTranscriptionPanel />;
       case 'files':
         return <CCFilesPanel />;
       case 'cc-shapes':

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

@@ -0,0 +1,687 @@
+import React, { useEffect, useRef, useState } from "react";
+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 => {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return m.toString().padStart(2, "0") + ":" + s.toString().padStart(2, "0");
+};
+
+const formatDateTime = (isoString: string): string => {
+  const date = new Date(isoString);
+  return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+};
+
+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,
+    completedSegments,
+    currentSegment,
+    wordCount,
+    elapsedSeconds,
+    activeSession,
+    timetableContext,
+    startSession,
+    stopSession,
+    saveSegment,
+    resetSession,
+    tickElapsed,
+    addCanvasEvent,
+    flushCanvasEvents,
+    loadSessions,
+    setTimetableContext,
+    llmConfig,
+    summaryText,
+    isGeneratingSummary,
+    summaryError,
+    setSummaryText,
+    setIsGeneratingSummary,
+    setSummaryError,
+  } = useTranscriptionStore();
+
+  const [activeTab, setActiveTab] = useState<TabType>("live");
+  const [sessions, setSessions] = useState<TranscriptionSession[]>([]);
+  const [sessionName, setSessionName] = useState("Untitled Session");
+  const serviceRef = useRef<TranscriptionService | null>(null);
+  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);
+  }, []);
+
+  // Auto-detect timetable context on mount
+  useEffect(() => {
+    const detectTimetable = async () => {
+      try {
+        const response = await fetch('http://192.168.0.64:8000/database/timetables/current-period');
+        const data = await response.json();
+        if (data.period_id) {
+          setTimetableContext(data as TimetablePeriod);
+        }
+      } catch (error) {
+        console.error('Failed to detect timetable context:', error);
+      }
+    };
+    detectTimetable();
+  }, []);
+
+  // Timer for elapsed seconds
+  useEffect(() => {
+    if (isRecording) {
+      timerRef.current = setInterval(tickElapsed, 1000);
+    } else if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [isRecording, tickElapsed]);
+
+  // Canvas event flush interval (every 5s)
+  useEffect(() => {
+    if (!isRecording) return;
+
+    const flushInterval = setInterval(async () => {
+      await flushCanvasEvents();
+    }, 5000);
+
+    return () => clearInterval(flushInterval);
+  }, [isRecording, flushCanvasEvents]);
+
+  const handleStart = async () => {
+    try {
+      await startSession(timetableContext || undefined);
+      const service = new TranscriptionService();
+      service.setTranscriptionCallback((text, isFinal, metadata) => {
+        saveSegment(text, isFinal, metadata);
+      });
+      await service.startTranscription();
+      serviceRef.current = service;
+
+      // Initialize canvas event logger if session was created
+      const state = useTranscriptionStore.getState();
+      if (state.activeSession) {
+        console.log('[CCTranscriptionPanel] Canvas event logging would start for session', state.activeSession.id);
+      }
+    } catch (error) {
+      console.error("Failed to start transcription:", error);
+      stopSession();
+    }
+  };
+
+  const handleStop = async () => {
+    if (serviceRef.current) {
+      serviceRef.current.stopTranscription();
+      serviceRef.current = null;
+    }
+
+    if (canvasLoggerRef.current) {
+      canvasLoggerRef.current.detach();
+      canvasLoggerRef.current = null;
+    }
+
+    await stopSession();
+  };
+
+  useEffect(() => {
+    return () => {
+      if (serviceRef.current) {
+        serviceRef.current.stopTranscription();
+        serviceRef.current = null;
+      }
+    };
+  }, []);
+
+  const handleRefreshSessions = async () => {
+    const loaded = await loadSessions();
+    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 */}
+      <div style={{ display: "flex", borderBottom: "1px solid var(--color-divider)", marginBottom: "8px" }}>
+        <button
+          onClick={() => setActiveTab("live")}
+          style={{
+            flex: 1,
+            padding: "8px",
+            border: "none",
+            backgroundColor: activeTab === "live" ? "var(--color-hover)" : "transparent",
+            color: "var(--color-text)",
+            cursor: "pointer",
+            fontSize: "13px",
+            fontWeight: activeTab === "live" ? 600 : 400,
+            borderBottom: activeTab === "live" ? "2px solid var(--color-text)" : "none",
+          }}
+        >
+          <HistoryIcon style={{ fontSize: "16px", verticalAlign: "middle", marginRight: "4px" }} />
+          Live
+        </button>
+        <button
+          onClick={() => setActiveTab("sessions")}
+          style={{
+            flex: 1,
+            padding: "8px",
+            border: "none",
+            backgroundColor: activeTab === "sessions" ? "var(--color-hover)" : "transparent",
+            color: "var(--color-text)",
+            cursor: "pointer",
+            fontSize: "13px",
+            fontWeight: activeTab === "sessions" ? 600 : 400,
+            borderBottom: activeTab === "sessions" ? "2px solid var(--color-text)" : "none",
+          }}
+        >
+          <HistoryIcon style={{ fontSize: "16px", verticalAlign: "middle", marginRight: "4px" }} />
+          Sessions
+        </button>
+      </div>
+
+      {/* Live Tab */}
+      {activeTab === "live" && (
+        <>
+          {/* 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: "8px", alignItems: "center" }}>
+                <button
+                  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>
+
+            {/* Timetable badge */}
+            {timetableContext && timetableContext.event_label && (
+              <div style={{
+                marginTop: "8px",
+                padding: "4px 8px",
+                backgroundColor: "var(--color-hover)",
+                borderRadius: "4px",
+                fontSize: "12px",
+                color: "var(--color-text)",
+              }}>
+                📅 {timetableContext.event_label}
+              </div>
+            )}
+          </div>
+
+          <div className="panel-divider" />
+
+          {/* Record button */}
+          <div className="panel-section">
+            <button
+              onClick={isRecording ? handleStop : handleStart}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "8px",
+                padding: "16px",
+                width: "100%",
+                borderRadius: "8px",
+                border: "none",
+                cursor: "pointer",
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "#fff",
+                backgroundColor: isRecording ? "#ef4444" : "var(--color-text)",
+                transition: "background-color 200ms ease",
+              }}
+            >
+              {isRecording ? <StopIcon /> : <MicIcon />}
+              {isRecording ? "Stop Recording" : "Start Recording"}
+            </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 */}
+          <div className="panel-section" style={{ gap: "6px" }}>
+            <div className="panel-section-title">Live Feed</div>
+
+            {completedSegments.map((seg, i) => (
+              <div
+                key={"completed-" + i}
+                style={{
+                  padding: "8px 10px",
+                  backgroundColor: "#fff",
+                  borderRadius: "4px",
+                  border: "1px solid var(--color-divider)",
+                  fontSize: "13px",
+                  color: "var(--color-text)",
+                  lineHeight: 1.4,
+                }}
+              >
+                {seg.text}
+              </div>
+            ))}
+
+            {currentSegment && (
+              <div
+                style={{
+                  padding: "8px 10px",
+                  backgroundColor: "var(--color-panel)",
+                  borderRadius: "4px",
+                  border: "1px dashed var(--color-divider)",
+                  fontSize: "13px",
+                  color: "var(--color-text-2)",
+                  fontStyle: "italic",
+                  lineHeight: 1.4,
+                }}
+              >
+                {currentSegment.text || "Listening..."}
+              </div>
+            )}
+
+            {!isRecording && completedSegments.length === 0 && !currentSegment && (
+              <div style={{ textAlign: "center", color: "var(--color-text-2)", padding: "16px", fontSize: "13px" }}>
+                Press Start Recording to begin transcription
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {/* Sessions Tab */}
+      {activeTab === "sessions" && (
+        <>
+          <div className="panel-section">
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+              <span style={{ fontSize: "14px", fontWeight: 500, color: "var(--color-text)" }}>
+                Past Sessions
+              </span>
+              <button
+                onClick={handleRefreshSessions}
+                style={{
+                  padding: "4px 8px",
+                  border: "1px solid var(--color-divider)",
+                  backgroundColor: "transparent",
+                  color: "var(--color-text)",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  fontSize: "12px",
+                }}
+              >
+                Refresh
+              </button>
+            </div>
+          </div>
+
+          <div className="panel-divider" />
+
+          <div className="panel-section" style={{ gap: "8px", maxHeight: "400px", overflowY: "auto" }}>
+            {sessions.length === 0 ? (
+              <div style={{ textAlign: "center", color: "var(--color-text-2)", padding: "16px", fontSize: "13px" }}>
+                No sessions yet
+              </div>
+            ) : (
+              sessions.map((session) => (
+                <div
+                  key={session.id}
+                  style={{
+                    padding: "10px",
+                    backgroundColor: "#fff",
+                    borderRadius: "4px",
+                    border: "1px solid var(--color-divider)",
+                  }}
+                >
+                  <div style={{ fontSize: "13px", fontWeight: 500, color: "var(--color-text)" }}>
+                    {session.title || "Untitled Session"}
+                  </div>
+                  <div style={{ fontSize: "12px", color: "var(--color-text-2)", marginTop: "4px" }}>
+                    {formatDateTime(session.started_at)}
+                    {session.duration_seconds && ` · ${Math.floor(session.duration_seconds / 60)}m`}
+                    {session.segment_count && ` · ${session.segment_count} segments`}
+                  </div>
+                  {session.timetable_event_label && (
+                    <div style={{
+                      marginTop: "4px",
+                      padding: "2px 6px",
+                      backgroundColor: "var(--color-hover)",
+                      borderRadius: "3px",
+                      fontSize: "11px",
+                      color: "var(--color-text)",
+                      display: "inline-block",
+                    }}>
+                      📅 {session.timetable_event_label}
+                    </div>
+                  )}
+                </div>
+              ))
+            )}
+          </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;