[DEMO ONLY][DO NOT MERGE] 2026-09-10 integrated progress demo

[AshanEason]

Warning

DEMO ONLY — DO NOT MERGE

2026-09-10 的 frontend-only 展示整合分支。它刻意合併尚未正式整合的功能與 mock data，不應合併進 main。

Demo scope

• 整合目前 main 與實驗管理 [SCIEDU-111] Implement admin experiment management #52
• 三份本地教材：豌豆－種皮形狀、腦機介面、恐狼復育
• 串接 Homepage → Library → Material → Summary → Answer Review
• UUID 形式教材路由、本地圖片與文字
• 固定 viewport、卡片內捲動、多圖與放大預覽
• Mantine Answer Review Modal、完整詳解與 mock LLM thinking/reply
• Frontend-only 實驗、教材、學生與作答紀錄管理
• Admin 作答紀錄列表、答題明細、提交次數與待批改狀態
• 滑鼠軌跡回放、個人／同教材全體熱區與區域停留摘要

Latest polish

• 詳解 header 下方新增分隔線並移除教材頁面版權 Footer

• 實驗管理與總覽／人員管理統一 sidebar、icons、header padding 與 spacing

• 修正卡片背景直角、列表狀態 badge、學生人數提醒與編輯流程重複按鈕

• Mock 學生與教材改成每場實驗各自管理

• 啟用 Admin「作答紀錄」，提供學生、教材、實驗、完成與評定篩選

• 作答詳細頁依教材頁面呈現學生答案、正解／評分參考及提交次數

• 滑鼠紀錄使用 normalized frontend mock coordinates，不傳送真實 PostHog 事件

• 作答狀態 badge 固定寬度，避免答對／答錯造成卡片跑版

• 日期欄位依卡片寬度自動切換單欄，避免內容被裁切

• 教材移除「請根據左圖回答下列問題」，題號統一顯示為「題目 N」

Run

pnpm install --frozen-lockfile
VITE_APP_MODE=dev VITE_DEMO_MODE=true pnpm dev

Demo mode 在這支分支預設啟用；設定 VITE_DEMO_MODE=false 可恢復 API-backed 行為。操作路線見 docs/demo-2026-09-10.md。

Verification

• Prettier、ESLint、TypeScript、DEV production build 通過
• Vitest：18 tests passed
• 瀏覽器逐頁驗證：
  • 三份教材、Summary／Review／mock LLM 與固定 viewport
  • Admin Overview／People／Experiment 共用樣式與實驗建立／編輯流程
  • 作答列表導覽、學生搜尋與空篩選結果
  • 軌跡播放時間軸、速度、頁碼、個人／聚合熱區切換
  • 未進入教材頁面的滑鼠紀錄空狀態
  • Console 無錯誤或警告

Demo-only limitations

• 無 backend auth、course upload、答案持久化、review API、真實 LLM streaming 或 PostHog mouse capture
• 重新整理會重置 frontend-only admin 與對話狀態
• 教材內容、圖片與作答紀錄均打包於前端
• 此 PR 不可取代 production PR