feat(cis): add Keywords tab — watches, real-time detection, match log (Phase 3C)

- KeywordWatch and KeywordMatch interfaces in transcriptionStore
- loadKeywordWatches, addKeywordWatch, deleteKeywordWatch actions via API with JWT auth
- checkSegmentForKeywords: client-side detection on each final segment, logs events to backend
- clearKeywordMatches: resets session-scoped match list
- Keywords tab in CCTranscriptionPanel: add/delete watches, match log with timestamp
- Match count badge on Keywords tab when hits exist during recording
- Also fixes missing Close import that was present in summary modal

src/stores/transcriptionStore.ts

@@ -39,6 +39,24 @@ export interface LLMConfig {
 
 export type ExportFormat = 'srt' | 'txt' | 'json';
 
+export interface KeywordWatch {
+  id: string;
+  user_id: string;
+  keyword: string;
+  match_type: string;
+  action: string;
+  is_active: boolean;
+  created_at: string;
+}
+
+export interface KeywordMatch {
+  keyword: string;
+  watch_id: string | null;
+  segment_text: string;
+  elapsed_seconds: number;
+  matched_at: string;
+}
+
 const LLM_CONFIG_STORAGE_KEY = 'cc_llm_config';
 
 function loadLLMConfig(): LLMConfig {
@@ -97,6 +115,10 @@ interface TranscriptionState {
   isExporting: boolean;
   exportError: string | null;
 
+  // Keyword state
+  keywordWatches: KeywordWatch[];
+  keywordMatches: KeywordMatch[];
+
   // Actions
   startSession: (timetableTag?: TimetablePeriod) => Promise<void>;
   stopSession: () => Promise<void>;
@@ -120,6 +142,13 @@ interface TranscriptionState {
   // Export actions
   exportSession: (sessionId: string, format: ExportFormat) => Promise<void>;
   setExportError: (error: string | null) => void;
+
+  // Keyword actions
+  loadKeywordWatches: () => Promise<void>;
+  addKeywordWatch: (keyword: string) => Promise<void>;
+  deleteKeywordWatch: (watchId: string) => Promise<void>;
+  checkSegmentForKeywords: (text: string, elapsedSeconds: number) => Promise<void>;
+  clearKeywordMatches: () => void;
 }
 
 export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
@@ -145,6 +174,10 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
   isExporting: false,
   exportError: null,
 
+  // Keyword state
+  keywordWatches: [],
+  keywordMatches: [],
+
   setTimetableContext: (context) => {
     set({ timetableContext: context });
   },
@@ -265,6 +298,7 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
       activeSession: null,
       pendingCanvasEvents: [],
       timetableContext: null,
+      keywordMatches: [],
     });
   },
 
@@ -405,4 +439,123 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
   setExportError: (error: string | null) => {
     set({ exportError: error });
   },
+
+  loadKeywordWatches: async () => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session?.access_token) return;
+      const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
+      const response = await fetch(`${apiBaseUrl}/transcribe/keywords`, {
+        headers: { 'Authorization': `Bearer ${session.access_token}` },
+      });
+      if (!response.ok) return;
+      const watches = await response.json();
+      set({ keywordWatches: watches });
+    } catch (error) {
+      console.error('Failed to load keyword watches:', error);
+    }
+  },
+
+  addKeywordWatch: async (keyword: string) => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session?.access_token) return;
+      const user = await supabase.auth.getUser();
+      if (!user.data.user) return;
+      const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
+      const response = await fetch(`${apiBaseUrl}/transcribe/keywords`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${session.access_token}`,
+        },
+        body: JSON.stringify({
+          user_id: user.data.user.id,
+          keyword: keyword.trim(),
+          match_type: 'contains',
+          action: 'alert',
+        }),
+      });
+      if (!response.ok) return;
+      const newWatch = await response.json();
+      set((state) => ({ keywordWatches: [...state.keywordWatches, newWatch] }));
+    } catch (error) {
+      console.error('Failed to add keyword watch:', error);
+    }
+  },
+
+  deleteKeywordWatch: async (watchId: string) => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session?.access_token) return;
+      const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
+      await fetch(`${apiBaseUrl}/transcribe/keywords/${watchId}`, {
+        method: 'DELETE',
+        headers: { 'Authorization': `Bearer ${session.access_token}` },
+      });
+      set((state) => ({ keywordWatches: state.keywordWatches.filter((w) => w.id !== watchId) }));
+    } catch (error) {
+      console.error('Failed to delete keyword watch:', error);
+    }
+  },
+
+  checkSegmentForKeywords: async (text: string, elapsedSeconds: number) => {
+    const { keywordWatches, activeSession } = get();
+    if (keywordWatches.length === 0) return;
+
+    const lowerText = text.toLowerCase();
+    const matches: KeywordMatch[] = [];
+
+    for (const watch of keywordWatches) {
+      if (!watch.is_active) continue;
+      const lowerKeyword = watch.keyword.toLowerCase();
+      const matched =
+        watch.match_type === 'exact'
+          ? lowerText === lowerKeyword
+          : watch.match_type === 'starts_with'
+          ? lowerText.startsWith(lowerKeyword)
+          : lowerText.includes(lowerKeyword);
+
+      if (matched) {
+        matches.push({
+          keyword: watch.keyword,
+          watch_id: watch.id,
+          segment_text: text,
+          elapsed_seconds: elapsedSeconds,
+          matched_at: new Date().toISOString(),
+        });
+
+        if (activeSession) {
+          try {
+            const { data: { session } } = await supabase.auth.getSession();
+            const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
+            await fetch(`${apiBaseUrl}/transcribe/keywords/events`, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                ...(session?.access_token ? { 'Authorization': `Bearer ${session.access_token}` } : {}),
+              },
+              body: JSON.stringify({
+                session_id: activeSession.id,
+                keyword_watch_id: watch.id,
+                keyword_text: watch.keyword,
+                matched_in_text: text,
+                session_elapsed_seconds: elapsedSeconds,
+              }),
+            });
+          } catch (error) {
+            console.error('Failed to log keyword event:', error);
+          }
+        }
+      }
+    }
+
+    if (matches.length > 0) {
+      set((state) => ({ keywordMatches: [...state.keywordMatches, ...matches] }));
+    }
+  },
+
+  clearKeywordMatches: () => {
+    set({ keywordMatches: [] });
+  },
 }));