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: [] });
+  },
 }));

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

@@ -1,6 +1,6 @@
 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 { Mic as MicIcon, Stop as StopIcon, History as HistoryIcon, Settings as SettingsIcon, AutoAwesome as AutoAwesomeIcon, NotificationsActive as KeywordIcon, Close } from "@mui/icons-material";
-import { useTranscriptionStore, TranscriptionSegment, TranscriptionSession, TimetablePeriod } from "../../../../../stores/transcriptionStore";
+import { useTranscriptionStore, TranscriptionSegment, TranscriptionSession, TimetablePeriod, KeywordWatch, KeywordMatch } from "../../../../../stores/transcriptionStore";
 import { TranscriptionService } from "../../../cc-base/cc-transcription/transcriptionService";
 import { CanvasEventLogger } from "../../../cc-base/canvas-event-logger/CanvasEventLogger";
 import LLMConfigModal from "./LLMConfigModal";
@@ -17,7 +17,7 @@ const formatDateTime = (isoString: string): string => {
   return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 };
 
-type TabType = "live" | "sessions";
+type TabType = "live" | "sessions" | "keywords";
 
 const SUMMARY_TYPES = [
   { value: 'full_lesson', label: 'Full Lesson Summary' },
@@ -52,6 +52,13 @@ export const CCTranscriptionPanel: React.FC = () => {
     setSummaryText,
     setIsGeneratingSummary,
     setSummaryError,
+    keywordWatches,
+    keywordMatches,
+    loadKeywordWatches,
+    addKeywordWatch,
+    deleteKeywordWatch,
+    checkSegmentForKeywords,
+    clearKeywordMatches,
   } = useTranscriptionStore();
 
   const [activeTab, setActiveTab] = useState<TabType>("live");
@@ -66,9 +73,14 @@ export const CCTranscriptionPanel: React.FC = () => {
   const [showSummaryModal, setShowSummaryModal] = useState(false);
   const [summaryType, setSummaryType] = useState('full_lesson');
 
-  // Load sessions on mount
+  // Keyword tab state
+  const [newKeyword, setNewKeyword] = useState('');
+  const [isAddingKeyword, setIsAddingKeyword] = useState(false);
+
+  // Load sessions and keyword watches on mount
   useEffect(() => {
     loadSessions().then(setSessions);
+    loadKeywordWatches();
   }, []);
 
   // Auto-detect timetable context on mount
@@ -117,6 +129,10 @@ export const CCTranscriptionPanel: React.FC = () => {
       const service = new TranscriptionService();
       service.setTranscriptionCallback((text, isFinal, metadata) => {
         saveSegment(text, isFinal, metadata);
+        if (isFinal) {
+          const { elapsedSeconds: elapsed } = useTranscriptionStore.getState();
+          checkSegmentForKeywords(text, elapsed);
+        }
       });
       await service.startTranscription();
       serviceRef.current = service;
@@ -247,6 +263,37 @@ export const CCTranscriptionPanel: React.FC = () => {
           <HistoryIcon style={{ fontSize: "16px", verticalAlign: "middle", marginRight: "4px" }} />
           Sessions
         </button>
+        <button
+          onClick={() => setActiveTab("keywords")}
+          style={{
+            flex: 1,
+            padding: "8px",
+            border: "none",
+            backgroundColor: activeTab === "keywords" ? "var(--color-hover)" : "transparent",
+            color: keywordMatches.length > 0 ? "#f59e0b" : "var(--color-text)",
+            cursor: "pointer",
+            fontSize: "13px",
+            fontWeight: activeTab === "keywords" ? 600 : 400,
+            borderBottom: activeTab === "keywords" ? "2px solid var(--color-text)" : "none",
+            position: "relative",
+          }}
+        >
+          <KeywordIcon style={{ fontSize: "16px", verticalAlign: "middle", marginRight: "4px" }} />
+          Keywords
+          {keywordMatches.length > 0 && (
+            <span style={{
+              marginLeft: "4px",
+              backgroundColor: "#f59e0b",
+              color: "#fff",
+              borderRadius: "10px",
+              padding: "1px 5px",
+              fontSize: "10px",
+              fontWeight: 700,
+            }}>
+              {keywordMatches.length}
+            </span>
+          )}
+        </button>
       </div>
 
       {/* Live Tab */}
@@ -600,6 +647,157 @@ export const CCTranscriptionPanel: React.FC = () => {
         </>
       )}
 
+      {/* Keywords Tab */}
+      {activeTab === "keywords" && (
+        <>
+          <div className="panel-section">
+            <div style={{ fontSize: "14px", fontWeight: 500, color: "var(--color-text)", marginBottom: "8px" }}>
+              Keyword Watches
+            </div>
+            <div style={{ display: "flex", gap: "6px" }}>
+              <input
+                type="text"
+                value={newKeyword}
+                onChange={(e) => setNewKeyword(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && newKeyword.trim()) {
+                    setIsAddingKeyword(true);
+                    addKeywordWatch(newKeyword.trim()).finally(() => {
+                      setNewKeyword('');
+                      setIsAddingKeyword(false);
+                    });
+                  }
+                }}
+                placeholder="Add keyword..."
+                style={{
+                  flex: 1,
+                  padding: "6px 8px",
+                  border: "1px solid var(--color-divider)",
+                  borderRadius: "4px",
+                  fontSize: "13px",
+                  backgroundColor: "var(--color-panel)",
+                  color: "var(--color-text)",
+                  outline: "none",
+                }}
+              />
+              <button
+                onClick={() => {
+                  if (!newKeyword.trim() || isAddingKeyword) return;
+                  setIsAddingKeyword(true);
+                  addKeywordWatch(newKeyword.trim()).finally(() => {
+                    setNewKeyword('');
+                    setIsAddingKeyword(false);
+                  });
+                }}
+                disabled={!newKeyword.trim() || isAddingKeyword}
+                style={{
+                  padding: "6px 10px",
+                  border: "none",
+                  borderRadius: "4px",
+                  backgroundColor: newKeyword.trim() ? "var(--color-text)" : "var(--color-divider)",
+                  color: "#fff",
+                  cursor: newKeyword.trim() ? "pointer" : "not-allowed",
+                  fontSize: "13px",
+                  fontWeight: 500,
+                }}
+              >
+                Add
+              </button>
+            </div>
+          </div>
+
+          <div className="panel-divider" />
+
+          <div className="panel-section" style={{ gap: "6px" }}>
+            {keywordWatches.length === 0 ? (
+              <div style={{ textAlign: "center", color: "var(--color-text-2)", padding: "12px", fontSize: "13px" }}>
+                No keyword watches yet
+              </div>
+            ) : (
+              keywordWatches.filter((w) => w.is_active).map((watch) => (
+                <div
+                  key={watch.id}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "6px 10px",
+                    backgroundColor: "#fff",
+                    borderRadius: "4px",
+                    border: "1px solid var(--color-divider)",
+                  }}
+                >
+                  <span style={{ fontSize: "13px", color: "var(--color-text)", fontFamily: "monospace" }}>
+                    {watch.keyword}
+                  </span>
+                  <button
+                    onClick={() => deleteKeywordWatch(watch.id)}
+                    style={{
+                      padding: "2px",
+                      border: "none",
+                      backgroundColor: "transparent",
+                      color: "var(--color-text-2)",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                    }}
+                  >
+                    <Close sx={{ fontSize: 14 }} />
+                  </button>
+                </div>
+              ))
+            )}
+          </div>
+
+          {keywordMatches.length > 0 && (
+            <>
+              <div className="panel-divider" />
+              <div className="panel-section">
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "6px" }}>
+                  <div style={{ fontSize: "13px", fontWeight: 500, color: "var(--color-text)" }}>
+                    Matches this session
+                  </div>
+                  <button
+                    onClick={clearKeywordMatches}
+                    style={{
+                      padding: "2px 6px",
+                      border: "none",
+                      backgroundColor: "transparent",
+                      color: "var(--color-text-2)",
+                      cursor: "pointer",
+                      fontSize: "11px",
+                    }}
+                  >
+                    Clear
+                  </button>
+                </div>
+                <div style={{ display: "flex", flexDirection: "column", gap: "4px", maxHeight: "250px", overflowY: "auto" }}>
+                  {[...keywordMatches].reverse().map((match, i) => (
+                    <div
+                      key={i}
+                      style={{
+                        padding: "6px 8px",
+                        backgroundColor: "#fffbeb",
+                        borderRadius: "4px",
+                        border: "1px solid #fde68a",
+                        fontSize: "12px",
+                      }}
+                    >
+                      <div style={{ fontWeight: 600, color: "#92400e", marginBottom: "2px" }}>
+                        "{match.keyword}" at {formatTime(Math.floor(match.elapsed_seconds))}
+                      </div>
+                      <div style={{ color: "var(--color-text-2)", lineHeight: 1.3 }}>
+                        {match.segment_text.length > 80 ? match.segment_text.slice(0, 80) + '…' : match.segment_text}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+        </>
+      )}
+
       {/* LLM Config Settings Modal */}
       <LLMConfigModal
         isOpen={showSettingsModal}