restore demo data, remove category breakdown

chatkit/Dockerfile

@@ -45,9 +45,9 @@ RUN pip install --no-cache-dir --upgrade pip && \
 # Copy backend code
 COPY --chown=user backend/app ./app
 
-# Copy Alembic migrations + config — needed at runtime because the app
-# applies pending migrations on startup (see main.py's lifespan), since
-# there's no separate deploy step that runs `alembic upgrade head`.
+# Copy Alembic migrations + config — needed at runtime because the
+# entrypoint applies pending migrations before uvicorn starts (there's no
+# separate deploy step that runs `alembic upgrade head`).
 COPY --chown=user backend/alembic ./alembic
 COPY --chown=user backend/alembic.ini ./alembic.ini
 
@@ -60,6 +60,10 @@ COPY --from=frontend-builder --chown=user /app/frontend/dist ./static
 # Copy report template HTML file
 COPY --chown=user backend/static/report-template.html ./static/report-template.html
 
+# Entrypoint: runs pending migrations (Supabase only) as their own process,
+# then execs uvicorn — see entrypoint.sh for why this isn't done in-process.
+COPY --chown=user entrypoint.sh ./entrypoint.sh
+
 # Expose port (HF Spaces uses 7860)
 EXPOSE 7860
 
@@ -68,4 +72,4 @@ HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
     CMD python -c "import urllib.request; urllib.request.urlopen('http://localhost:7860/health')"
 
 # Run the server
-CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]
+CMD ["./entrypoint.sh"]

chatkit/backend/app/db.py

@@ -126,23 +126,13 @@ async def get_session() -> AsyncIterator[AsyncSession]:
             raise
 
 
-def run_pending_migrations() -> None:
-    """Apply any pending Alembic migrations against Postgres/Supabase.
-
-    There's no separate deploy step or CI job that runs `alembic upgrade
-    head` against production, and whoever deploys this may not have direct
-    database access to run it by hand — so instead this runs once at app
-    startup (see main.py's lifespan). `alembic upgrade head` is idempotent
-    (a no-op once already current), so this is safe to run on every boot.
-
-    Synchronous (alembic's `command.upgrade` drives env.py's own internal
-    `asyncio.run(...)` for the async engine) — call via `asyncio.to_thread`
-    from async code, never await it directly.
-    """
-    from alembic import command
-    from alembic.config import Config
-
-    backend_dir = Path(__file__).parent.parent
-    cfg = Config(str(backend_dir / "alembic.ini"))
-    cfg.set_main_option("script_location", str(backend_dir / "alembic"))
-    command.upgrade(cfg, "head")
+# Pending migrations are applied by a separate `alembic upgrade head`
+# process, run by the Docker container's entrypoint before uvicorn starts
+# (see Dockerfile) — not from inside this app's process. An in-process
+# version of this (via asyncio.to_thread) hung indefinitely against
+# production Postgres instead of failing fast: it shared this module's
+# cached async engine (bound to the main thread's event loop) with a
+# second thread running its own separate event loop for alembic's internal
+# asyncio.run() call, which async engines/connection pools aren't safe to
+# do. A standalone `alembic` CLI invocation as its own OS process sidesteps
+# this entirely — no shared engine, no shared event loop.

chatkit/backend/app/main.py

@@ -76,7 +76,7 @@ from .auth import (
 from .crypto import encrypt
 from .student_credentials import generate_unique_username, generate_password
 from .admin import router as admin_router
-from .db import assert_production_db_config, run_pending_migrations
+from .db import assert_production_db_config
 from .file_processor import process_uploaded_files
 from .answer_grid import (
     AnswerGrid,
@@ -104,17 +104,17 @@ INSIGHTS_QUIZ_WINDOW = 8
 
 @asynccontextmanager
 async def lifespan(app: FastAPI):
-    """Initialize database on startup."""
-    from .config import get_settings
-
+    """Initialize database on startup.
+
+    Pending Alembic migrations are applied by the container's entrypoint
+    (see Dockerfile) as a separate `alembic upgrade head` process *before*
+    uvicorn starts — not from here. An earlier version tried to run it from
+    inside this async lifespan via asyncio.to_thread, but that shares the
+    app's cached async engine (bound to this process's main event loop)
+    across a second thread's separate event loop, which hung indefinitely
+    against Postgres instead of failing fast.
+    """
     assert_production_db_config()
-    # No separate deploy step runs `alembic upgrade head` against production,
-    # and whoever redeploys may not have direct DB access to run it by hand
-    # — so apply any pending migrations here instead. Idempotent (a no-op
-    # once already current), so safe on every boot. SQLite dev/test doesn't
-    # use migrations at all (init_database() below just does create_all).
-    if get_settings().database_provider == "supabase":
-        await asyncio.to_thread(run_pending_migrations)
     await init_database()
     yield
 

chatkit/entrypoint.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+# Applies pending Alembic migrations (Postgres/Supabase only — SQLite dev
+# doesn't use migrations, see database.py's init_database) as a standalone
+# process *before* uvicorn starts, then execs into uvicorn. Deliberately not
+# done from inside the app's own async lifespan: an earlier attempt at that
+# shared the app's cached async engine across a second thread's separate
+# event loop (via asyncio.to_thread), which hung indefinitely against
+# production Postgres instead of failing fast. A separate OS process has no
+# such shared state.
+set -e
+
+if [ "$DATABASE_PROVIDER" = "supabase" ]; then
+  echo "Running database migrations..."
+  alembic upgrade head
+fi
+
+exec uvicorn app.main:app --host 0.0.0.0 --port 7860

chatkit/frontend/src/App.tsx

@@ -362,7 +362,7 @@ ${doneReports
 
       {visitedViews.has("dashboard") && (
         <div className="pt-20" style={{ display: currentView === "dashboard" ? "block" : "none" }}>
-          <TeacherDashboard active={currentView === "dashboard"} />
+          <TeacherDashboard active={currentView === "dashboard"} userEmail={user?.email ?? ""} />
         </div>
       )}
 

chatkit/frontend/src/components/StudentDashboardPage.tsx

@@ -3,11 +3,9 @@ import { apiGet, clearToken, getToken } from "../lib/api";
 import { API_BASE_URL } from "../lib/config";
 import { CLASSLENS_ICON } from "../lib/icon";
 import {
-  CategoryBreakdown,
   LineChart,
   RawFileLink,
   ScoreBadge,
-  type CategoryHistoryEntry,
   type StudentDetail,
 } from "./TeacherDashboard";
 
@@ -66,9 +64,6 @@ export function StudentDashboardPage({ student, onLogout }: { student: StudentSe
   const [error, setError] = useState("");
   const [quizzes, setQuizzes] = useState<PracticeQuizItem[]>([]);
   const [assessmentView, setAssessmentView] = useState<"graph" | "table">("graph");
-  const [categoryHistory, setCategoryHistory] = useState<Record<string, CategoryHistoryEntry[]> | null>(null);
-  const [categoryHistoryLoading, setCategoryHistoryLoading] = useState(true);
-  const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
 
   useEffect(() => {
     apiGet<StudentDetail>("/api/student/dashboard")
@@ -78,10 +73,6 @@ export function StudentDashboardPage({ student, onLogout }: { student: StudentSe
     apiGet<{ practice_quizzes: PracticeQuizItem[] }>("/api/student/practice-quizzes")
       .then((r) => setQuizzes(r.practice_quizzes))
       .catch(() => {});
-    apiGet<{ categories: Record<string, CategoryHistoryEntry[]> }>("/api/student/category-history")
-      .then((r) => setCategoryHistory(r.categories))
-      .catch(() => setCategoryHistory({}))
-      .finally(() => setCategoryHistoryLoading(false));
   }, []);
 
   if (loading) {
@@ -160,26 +151,6 @@ export function StudentDashboardPage({ student, onLogout }: { student: StudentSe
           )}
         </div>
 
-        {(categoryHistoryLoading || (categoryHistory && Object.keys(categoryHistory).length > 0)) && (
-          <div className="card p-6">
-            <h3 className="font-sans text-xs font-bold uppercase tracking-widest text-[var(--color-text)] mb-5 flex items-center gap-1.5">
-              <img src="/avgscores.svg" alt="" className="w-4 h-4 shrink-0 object-contain" />
-              Category Breakdown
-            </h3>
-            {categoryHistoryLoading ? (
-              <div className="h-24 flex items-center justify-center">
-                <div className="w-5 h-5 border-2 border-[var(--color-primary)] border-t-transparent rounded-full animate-spin" />
-              </div>
-            ) : (
-              <CategoryBreakdown
-                data={categoryHistory ?? {}}
-                expanded={expandedCategory}
-                onToggle={(cat) => setExpandedCategory((prev) => (prev === cat ? null : cat))}
-              />
-            )}
-          </div>
-        )}
-
         <div className="card p-6">
           <div className="flex items-center justify-between mb-5 shrink-0">
             <h3 className="font-sans text-xs font-bold uppercase tracking-widest text-[var(--color-text)] flex items-center gap-1.5">

chatkit/frontend/src/components/TeacherDashboard.tsx

@@ -180,15 +180,6 @@ export interface TimelineEntry {
   report_id: number | null;
 }
 
-export interface CategoryHistoryEntry {
-  quiz_id: number;
-  quiz_title: string;
-  quiz_date: string;
-  correct: number;
-  total: number;
-  accuracy: number;
-}
-
 export interface StudentDetail {
   student: { id: number; name: string; email: string };
   timeline: TimelineEntry[];
@@ -199,6 +190,124 @@ export interface StudentDetail {
   ai_study_recommendations: string;
 }
 
+// ── Demo mock data (client-side only — no backend, no DB write) ────────────────
+// TODO(demo): remove once real report data exists for these students. Keyed
+// by exact student name; whenever one of these names is selected, the
+// dashboard is displayed from this hand-written data as a *baseline* — real
+// quiz history merges in on top and takes over automatically as soon as it
+// exists, so this is temporary scaffolding, not a permanent replacement.
+
+const MOCK_QUIZ_TITLES_DAYS_AGO: [string, number][] = [
+  ["Unit 3 Quiz", 42], ["Unit 4 Quiz", 35], ["Midterm", 28],
+  ["Unit 5 Quiz", 21], ["Unit 6 Quiz", 14], ["Unit 7 Practice Test", 7],
+];
+
+const MOCK_PROFILES: Record<string, { scores: number[]; summary: string; weaknesses: string; study_recommendations: string }> = {
+  "柯主恩": {
+    scores: [88, 91, 90, 94, 93, 96],
+    summary: "過去六次測驗表現持續穩定進步，平均 92 分，成績從 88 分成長至 96 分，是班上表現最穩定的學生之一。近三次測驗皆維持在 90 分以上，顯示對整體英文能力已有紮實掌握。",
+    weaknesses: "整體弱點極少，主要集中在介系詞片語的慣用搭配，於六次測驗中有兩次出現相關錯誤，屬於偶發性失誤而非系統性問題。部分閱讀理解題在需要推論作者語氣或態度時，答題速度會明顯變慢。",
+    study_recommendations: "建議針對介系詞片語進行慣用搭配的整理與複習，特別留意動詞與介系詞的固定搭配組合，減少偶發性失誤。可嘗試更高難度的閱讀理解題型，加強對語氣、態度等推論性題目的敏感度，為進階閱讀測驗做準備。",
+  },
+  "梁祐邦": {
+    scores: [58, 62, 60, 65, 63, 69],
+    summary: "過去六次測驗平均 62.8 分，整體呈現緩步上升趨勢，最近一次測驗達到 69 分，為六次以來最高分。雖然進步趨勢明確，但仍有將近四成的失分集中在文法結構相關題型。",
+    weaknesses: "過去簡單式與現在完成式的判斷是最主要的弱點，六次測驗中有五次出現混淆情形，尤其在題目未明確標示時間副詞時，經常誤選現在完成式。此弱點具高度持續性，是目前影響分數最大的單一因素。",
+    study_recommendations: "建議透過時間軸圖表具體對照過去簡單式與現在完成式的使用情境，聚焦在「動作是否與現在有關聯」這個核心判斷依據，而非死記時間副詞。可每週安排固定的混合式練習題，交叉出現兩種時態，訓練快速辨識的直覺反應。",
+  },
+  "江亮吟": {
+    scores: [70, 68, 74, 72, 78, 80],
+    summary: "過去六次測驗平均 73.7 分，成績呈現穩定上升趨勢，從 70 分進步到 80 分，近三次測驗表現尤其亮眼。整體弱點集中且明確，具備透過針對性練習快速提升的潛力。",
+    weaknesses: "關係代名詞子句的使用在六次測驗中有四次出現錯誤，主要問題在於 who/which 的選用判斷，以及受詞關係代名詞可省略情況的判斷不穩定。此弱點在複雜句型題目中尤其明顯，經常導致連鎖性的理解錯誤。",
+    study_recommendations: "建議針對關係代名詞進行句子合併與改寫的專項練習，先從先行詞是人或物的判斷開始建立直覺，再進階練習省略規則的例外情況。可搭配閱讀理解文章中的長句拆解練習，強化對關係子句在段落中所扮演角色的理解。",
+  },
+  "田瑜婕": {
+    scores: [64, 67, 66, 71, 70, 75],
+    summary: "過去六次測驗平均 68.8 分，整體趨勢緩步上升，最近一次測驗達到 75 分，較六次以來最低分進步了 11 分。字彙相關題型是目前分數成長的主要瓶頸。",
+    weaknesses: "需要情境字彙推斷的題目正確率偏低，六次測驗中有四次此類題型失分，顯示在缺乏直接字義提示時，從上下文判斷字義的能力仍待加強。動詞與動詞片語的搭配也是持續性弱點，尤其容易混淆語意相近但用法不同的片語動詞。",
+    study_recommendations: "建議加強精讀短文練習，刻意選擇包含生字的段落，訓練從上下文線索（如同義詞、對比詞）推斷字義的策略性思考。可整理常見動詞片語做主題式複習，透過例句比較釐清語意相近片語之間的用法差異。",
+  },
+  "蕭仁昊": {
+    scores: [73, 71, 76, 74, 79, 77],
+    summary: "過去六次測驗平均 75.0 分，成績表現相對穩定，分數在 71 至 79 分之間波動，整體呈現���幅上升趨勢。弱點範圍集中，屬於可透過系統性複習改善的類型。",
+    weaknesses: "比較級與最高級的句型結構在六次測驗中有三次出現混淆，特別是不規則變化的形容詞（如 good/better/best、bad/worse/worst）容易與規則變化的形式搞混。部分題目在需要判斷兩者以上比較對象時，最高級句型的使用也不夠熟練。",
+    study_recommendations: "建議整理常見不規則比較級與最高級形容詞對照表，透過反覆的句型代換練習加強熟練度，直到能不假思索地正確變化。可加入情境式練習題，訓練根據比較對象數量（兩者 vs. 三者以上）正確選用比較級或最高級的判斷能力。",
+  },
+  "蕭恩翔": {
+    scores: [61, 59, 64, 63, 68, 66],
+    summary: "過去六次測驗平均 63.5 分，整體呈現緩步上升但仍不穩定的趨勢，分數在 59 至 68 分之間波動。文法結構相關的弱點是目前限制分數提升的主要因素。",
+    weaknesses: "被動語態句型的辨識度不足，六次測驗中有四次在主動與被動轉換的判斷上出現錯誤，尤其是含有情態助動詞的被動句型（如 should be done）容易誤判。一般助動詞的語意用法也不穩定，常混淆 must、should、may 等字在不同情境下的語氣強弱差異。",
+    study_recommendations: "建議加強主動轉被動的句型轉換練習，從簡單句開始建立轉換公式的直覺，再逐步加入含有助動詞的複雜句型。可搭配情境式練習複習常見助動詞的語意與用法差異，透過情境對比（義務、推測、允許等）釐清各助動詞的細微語氣區別。",
+  },
+  "陳筱琳": {
+    scores: [82, 85, 84, 87, 89, 88],
+    summary: "過去六次測驗平均 85.8 分，表現優異且持續進步，成績從 82 分提升至接近 90 分的水準，是全班進步幅度最穩定的學生之一。弱點範圍小且集中，具備衝刺高分的潛力。",
+    weaknesses: "特殊疑問句（Who/What/Where 等問答句）的語序在六次測驗中有兩次出現錯誤，問題主要發生在間接問句的轉換，容易保留直接問句的語序而未正確調整為子句語序。此弱點雖出現頻率不高，但在間接問句題型中辨識度明顯較低。",
+    study_recommendations: "建議針對疑問詞問答句進行語序重組練習，特別加強「疑問詞 + 直述句語序」這個間接問句的核心規則。可透過大量的直接問句轉間接問句練習，建立語序轉換的自動化反應，減少在複雜句型中出現語序錯誤的機率。",
+  },
+};
+
+function buildMockTimeline(name: string): TimelineEntry[] {
+  const p = MOCK_PROFILES[name];
+  return MOCK_QUIZ_TITLES_DAYS_AGO.map(([title, daysAgo], i) => {
+    const isLast = i === MOCK_QUIZ_TITLES_DAYS_AGO.length - 1;
+    const d = new Date(Date.now() - daysAgo * 24 * 60 * 60 * 1000);
+    const dateStr = d.toISOString().split("T")[0];
+    return {
+      quiz_id: -(i + 1),
+      quiz_title: title,
+      quiz_created_at: `${dateStr}T09:00:00Z`,
+      quiz_date: dateStr,
+      score: p.scores[i],
+      weaknesses: isLast ? p.weaknesses : null,
+      study_recommendations: isLast ? p.study_recommendations : null,
+      report_id: null,
+    };
+  });
+}
+
+// Overlays hand-written mock data as a *baseline* for a fixed set of named
+// students — real uploads (once saved) or completed practice quizzes get
+// merged in on top and take over as soon as they exist, so this is meant to
+// be temporary scaffolding, not a permanent replacement for real data.
+// TODO(demo): remove once these students have enough real quiz history.
+function applyMockOverlay(real: StudentDetail, name: string): StudentDetail {
+  const p = MOCK_PROFILES[name];
+  if (!p) return real;
+
+  const mockTimeline = buildMockTimeline(name);
+  // Real quizzes are expected to postdate the mock ones (mock dates are all
+  // in the past, capped 7 days ago) — sort by date to stay correct even if
+  // a real quiz_date is backdated earlier than that.
+  const timeline = [...mockTimeline, ...real.timeline].sort(
+    (a, b) => (a.quiz_date ?? a.quiz_created_at).localeCompare(b.quiz_date ?? b.quiz_created_at)
+  );
+
+  // Most recent non-null weaknesses/recommendations across the merged
+  // timeline — mirrors the same "most recent wins" logic the backend uses
+  // in api_get_student, so a real graded quiz's real insights naturally
+  // take priority over the mock baseline once one exists.
+  let weaknesses: string | null = null;
+  let study_recommendations: string | null = null;
+  for (let i = timeline.length - 1; i >= 0; i--) {
+    if (weaknesses === null && timeline[i].weaknesses) weaknesses = timeline[i].weaknesses;
+    if (study_recommendations === null && timeline[i].study_recommendations) study_recommendations = timeline[i].study_recommendations;
+    if (weaknesses && study_recommendations) break;
+  }
+
+  return {
+    student: real.student,
+    timeline,
+    weaknesses,
+    study_recommendations,
+    // Cross-quiz synthesis: prefer the real cached version once a real
+    // report has actually been generated; fall back to the mock summary.
+    ai_summary: real.ai_summary || p.summary,
+    ai_focus_areas: real.ai_focus_areas || p.weaknesses,
+    ai_study_recommendations: real.ai_study_recommendations || p.study_recommendations,
+  };
+}
+
 // ── Constants ─────────────────────────────────────────────────────────────────
 
 const AVATAR_COLORS = [
@@ -267,134 +376,6 @@ export function ScoreBadge({ score }: { score: number }) {
   );
 }
 
-// Same 4-tier score scale as ScoreBadge/scoreColor, as a fill class for a bar.
-function scoreFillClass(score: number): string {
-  if (score < 50) return "bg-red-500";
-  if (score < 65) return "bg-orange-400";
-  if (score < 80) return "bg-amber-500";
-  return "bg-emerald-500";
-}
-
-// Tiny inline trend line for one category's accuracy across its quizzes —
-// same minimal, axis-less style as the hover crosshair dots in LineChart.
-function CategorySparkline({ entries }: { entries: CategoryHistoryEntry[] }) {
-  if (entries.length < 2) return null;
-  const W = 200, H = 40, PAD = 5;
-  const toX = (i: number) => PAD + (i / (entries.length - 1)) * (W - PAD * 2);
-  const toY = (v: number) => H - PAD - (v / 100) * (H - PAD * 2);
-  const pts = entries.map((e, i) => `${toX(i)},${toY(e.accuracy)}`).join(" ");
-  return (
-    <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-10" preserveAspectRatio="none" aria-hidden="true">
-      <polyline points={pts} fill="none" stroke="var(--color-primary)" strokeWidth="1.5"
-        strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
-      {entries.map((e, i) => (
-        <circle key={e.quiz_id} cx={toX(i)} cy={toY(e.accuracy)} r="2.5" fill="var(--color-primary)" />
-      ))}
-    </svg>
-  );
-}
-
-// Per-category accuracy breakdown under Performance History. One row per
-// category (worst-accuracy-first, so what needs attention surfaces without
-// scanning), a compact bar for the latest accuracy, and an explicit ▲/▼ delta
-// vs. that category's previous quiz — never color alone. Click a row to
-// expand a small trend line + the underlying per-quiz numbers.
-export function CategoryBreakdown({
-  data, expanded, onToggle,
-}: {
-  data: Record<string, CategoryHistoryEntry[]>;
-  expanded: string | null;
-  onToggle: (category: string) => void;
-}) {
-  // One-time ease-in per data set: bars start at 0 and ease up to their real
-  // value the first time this student's breakdown appears, instead of just
-  // snapping straight to the final width.
-  const [animated, setAnimated] = useState(false);
-  useEffect(() => {
-    setAnimated(false);
-    const id = requestAnimationFrame(() => requestAnimationFrame(() => setAnimated(true)));
-    return () => cancelAnimationFrame(id);
-  }, [data]);
-
-  const rows = Object.entries(data)
-    .filter(([, entries]) => entries.length > 0)
-    .map(([category, entries]) => {
-      const latest = entries[entries.length - 1];
-      const prev = entries.length > 1 ? entries[entries.length - 2] : null;
-      const delta = prev ? Math.round(latest.accuracy - prev.accuracy) : null;
-      return { category, entries, latest, delta };
-    })
-    .sort((a, b) => a.latest.accuracy - b.latest.accuracy);
-
-  if (rows.length === 0) {
-    return (
-      <div className="h-40 flex items-center justify-center">
-        <p className="text-xs text-[var(--color-text-muted)] italic">No categorized data yet.</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-1.5">
-      {rows.map(({ category, entries, latest, delta }, i) => {
-        const isOpen = expanded === category;
-        return (
-          <div key={category} className="rounded-lg border border-[var(--color-border)] overflow-hidden">
-            <button
-              onClick={() => onToggle(category)}
-              aria-expanded={isOpen}
-              className="w-full flex items-center gap-3 px-3 py-2.5 text-left hover:bg-[var(--color-border)]/20 transition-colors"
-            >
-              <span className={`text-[10px] text-[var(--color-text-muted)] shrink-0 transition-transform duration-150 ${isOpen ? "rotate-90" : ""}`}>▸</span>
-              <span className="text-xs font-medium text-[var(--color-text)] w-24 shrink-0 truncate" title={category}>{category}</span>
-              <div className="flex-1 h-2 rounded-full bg-[var(--color-border)]/40 overflow-hidden">
-                <div
-                  className={`h-full rounded-full ease-out ${scoreFillClass(latest.accuracy)}`}
-                  style={{
-                    width: animated ? `${Math.max(4, latest.accuracy)}%` : "0%",
-                    transitionProperty: "width",
-                    transitionDuration: "700ms",
-                    transitionDelay: `${i * 70}ms`,
-                  }}
-                />
-              </div>
-              <span className="text-xs font-semibold text-[var(--color-text)] w-9 text-right tabular-nums shrink-0">
-                {Math.round(latest.accuracy)}%
-              </span>
-              <span
-                className={`text-[10px] font-medium w-14 text-right tabular-nums shrink-0 ${
-                  delta === null || delta === 0
-                    ? "text-[var(--color-text-muted)]"
-                    : delta > 0
-                    ? "text-emerald-500"
-                    : "text-red-500"
-                }`}
-              >
-                {delta === null ? "首次" : delta > 0 ? `▲ ${delta}%` : delta < 0 ? `▼ ${Math.abs(delta)}%` : "— 0%"}
-              </span>
-            </button>
-            {isOpen && (
-              <div className="px-3 pb-3 pt-1 border-t border-[var(--color-border)] bg-[var(--color-border)]/10">
-                <CategorySparkline entries={entries} />
-                <ul className="mt-1 space-y-1">
-                  {entries.slice().reverse().map((e) => (
-                    <li key={e.quiz_id} className="flex items-center justify-between text-[11px] text-[var(--color-text-muted)]">
-                      <span className="truncate">{e.quiz_title}</span>
-                      <span className="tabular-nums font-medium text-[var(--color-text)] shrink-0 ml-2">
-                        {Math.round(e.accuracy)}% ({e.correct}/{e.total})
-                      </span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
 export function Toggle({ on, onChange }: { on: boolean; onChange: (v: boolean) => void }) {
   return (
     <button
@@ -1123,14 +1104,17 @@ function QuestionGenPanel({ studentId, initialCats, initialTagsByCat }: { studen
 
 // ── Main component ────────────────────────────────────────────────────────────
 
-export function TeacherDashboard({ active = true }: { active?: boolean }) {
+// Demo mock data (see MOCK_PROFILES below) only ever shows on this one
+// account — every other teacher, even one with a same-named real student,
+// always sees only their own real data.
+const MOCK_DATA_ACCOUNT_EMAIL = "melfurever21@gmail.com";
+
+export function TeacherDashboard({ active = true, userEmail = "" }: { active?: boolean; userEmail?: string }) {
+  const mockDataEnabled = userEmail === MOCK_DATA_ACCOUNT_EMAIL;
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [search, setSearch] = useState("");
   const [selected, setSelected] = useState<StudentListItem | null>(null);
   const [assessmentView, setAssessmentView] = useState<"graph" | "table">("graph");
-  const [categoryHistory, setCategoryHistory] = useState<Record<string, CategoryHistoryEntry[]> | null>(null);
-  const [categoryHistoryLoading, setCategoryHistoryLoading] = useState(false);
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [autoSelectWeak, setAutoSelectWeak] = useState(true);
 
   const [students, setStudents] = useState<StudentListItem[]>([]);
@@ -1167,10 +1151,27 @@ export function TeacherDashboard({ active = true }: { active?: boolean }) {
         // (and wait) on every student selection. Still re-fetched here (even
         // when cached) to pick up anything saved since the last visit.
         const d = await apiGet<StudentDetail>(`/api/students/${student.id}`);
-        setDetail(d);
-        setDetailCache((prev) => ({ ...prev, [student.id]: d }));
+        // Demo overlay — see TODO(demo) above. Only ever active on the one
+        // demo account (mockDataEnabled); every other teacher always sees
+        // only their own real data, even for a same-named student. Real
+        // quiz history (an upload or a completed practice quiz) merges in
+        // and takes over automatically.
+        const merged = mockDataEnabled && MOCK_PROFILES[student.name] ? applyMockOverlay(d, student.name) : d;
+        setDetail(merged);
+        setDetailCache((prev) => ({ ...prev, [student.id]: merged }));
       } catch {
-        if (!cached) setDetail(null);
+        if (!cached) {
+          // Even if the real fetch fails, still show the mock baseline for
+          // these named students rather than a blank dashboard.
+          if (mockDataEnabled && MOCK_PROFILES[student.name]) {
+            setDetail(applyMockOverlay(
+              { student: { id: student.id, name: student.name, email: "" }, timeline: [], weaknesses: null, study_recommendations: null, ai_summary: "", ai_focus_areas: "", ai_study_recommendations: "" },
+              student.name,
+            ));
+          } else {
+            setDetail(null);
+          }
+        }
       } finally {
         setDetailLoading(false);
       }
@@ -1221,26 +1222,9 @@ export function TeacherDashboard({ active = true }: { active?: boolean }) {
 
   const handleSelectStudent = (student: StudentListItem) => {
     setSelected(student);
-    setSelectedCategory(null);
     refreshDetail(student);
   };
 
-  // Category Breakdown is its own always-visible card now (not a tab buried
-  // inside Performance History), so it fetches as soon as a student is
-  // selected instead of waiting for a click.
-  useEffect(() => {
-    if (!selected) {
-      setCategoryHistory(null);
-      return;
-    }
-    setCategoryHistory(null);
-    setCategoryHistoryLoading(true);
-    apiGet<{ categories: Record<string, CategoryHistoryEntry[]> }>(`/api/students/${selected.id}/category-history`)
-      .then((r) => setCategoryHistory(r.categories))
-      .catch(() => setCategoryHistory({}))
-      .finally(() => setCategoryHistoryLoading(false));
-  }, [selected?.id]);
-
   // Derived metrics from real timeline data
   const timeline = detail?.timeline ?? [];
   const scores = timeline.map((t) => Math.round(t.score));
@@ -1441,26 +1425,6 @@ export function TeacherDashboard({ active = true }: { active?: boolean }) {
               </div>
             </div>
 
-            {/* ── Category Breakdown ─────────────────────────────────────── */}
-            {(categoryHistoryLoading || (categoryHistory && Object.keys(categoryHistory).length > 0)) && (
-              <div className="card p-6">
-                <h3 className="font-sans text-xs font-bold uppercase tracking-widest text-[var(--color-text)] mb-5 flex items-center gap-1.5">
-                  <img src="/avgscores.svg" alt="" className="w-4 h-4 shrink-0 object-contain" />
-                  Category Breakdown
-                </h3>
-                {categoryHistoryLoading ? (
-                  <div className="h-24 flex items-center justify-center">
-                    <div className="w-5 h-5 border-2 border-[var(--color-primary)] border-t-transparent rounded-full animate-spin" />
-                  </div>
-                ) : (
-                  <CategoryBreakdown
-                    data={categoryHistory ?? {}}
-                    expanded={selectedCategory}
-                    onToggle={(cat) => setSelectedCategory((prev) => (prev === cat ? null : cat))}
-                  />
-                )}
-              </div>
-            )}
 
             {/* ── Performance History ────────────────────────────────────── */}
             <div className="card p-6">

chatkit/frontend/src/components/step2/AnswerGridEditor.tsx

@@ -339,9 +339,14 @@ export function AnswerGridEditor({
         <button
           onClick={handleSave}
           disabled={saving}
-          className="btn btn-primary text-sm disabled:opacity-50"
+          className="btn btn-primary text-sm min-w-36 disabled:opacity-50"
         >
-          {saving ? "儲存中..." : saved ? "立即重新儲存" : "立即儲存"}
+          {saving ? (
+            <span className="inline-flex items-center gap-1.5">
+              <span className="w-3 h-3 border border-white/50 border-t-white rounded-full animate-spin shrink-0" />
+              儲存中...
+            </span>
+          ) : saved ? "立即重新儲存" : "立即儲存"}
         </button>
       </div>
     </div>