Redesign Step 2: per-student report generation with wrong-answer filtering

Step 2 now shows a student checklist instead of prompt editor. Users select
which students to generate reports for. Backend filters each student's wrong
answers and only sends the relevant questions + wrong answers to the LLM,
dramatically reducing prompt size. Reports generate sequentially with live
progress in Step 3's tabbed viewer.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

chatkit/backend/app/main.py

@@ -31,7 +31,7 @@ from .database import (
 )
 from .auth import get_current_user, register_user, login_user
 from .file_processor import process_uploaded_files
-from .report_generator import generate_report, get_default_prompt
+from .report_generator import generate_student_report, get_default_prompt, get_student_names
 
 STATIC_DIR = Path(__file__).parent.parent / "static"
 
@@ -228,21 +228,37 @@ async def api_delete_prompt(prompt_id: int, user=Depends(get_current_user)):
 # Report Generation Endpoints
 # =============================================================================
 
-class GenerateReportRequest(BaseModel):
-    prompt_id: Optional[int] = None
-    prompt_content: Optional[str] = None
+class GenerateStudentReportRequest(BaseModel):
+    student_index: int
     model: str = "gpt-5.4"
 
 
-@app.post("/api/sessions/{session_id}/generate-report")
-async def api_generate_report(
-    session_id: int, body: GenerateReportRequest, user=Depends(get_current_user)
+@app.get("/api/sessions/{session_id}/students")
+async def api_get_students(session_id: int, user=Depends(get_current_user)):
+    """Return the list of student names from parsed student_answers data."""
+    session = await get_session(session_id)
+    if not session or session["user_id"] != user["id"]:
+        raise HTTPException(status_code=404, detail="Session not found")
+
+    data = await get_parsed_data(session_id)
+    student_answers = {}
+    for item in data:
+        if item["data_type"] == "student_answers":
+            student_answers = item["structured_data"]
+            break
+
+    return {"students": get_student_names(student_answers)}
+
+
+@app.post("/api/sessions/{session_id}/generate-student-report")
+async def api_generate_student_report(
+    session_id: int, body: GenerateStudentReportRequest, user=Depends(get_current_user)
 ):
+    """Generate a report for a single student, focused on their wrong answers."""
     session = await get_session(session_id)
     if not session or session["user_id"] != user["id"]:
         raise HTTPException(status_code=404, detail="Session not found")
 
-    # Load parsed data
     data = await get_parsed_data(session_id)
     questions = {}
     student_answers = {}
@@ -256,21 +272,18 @@ async def api_generate_report(
             teacher_answers = item["structured_data"]
 
     if not questions:
-        raise HTTPException(status_code=400, detail="No questions data found. Upload and process files first.")
+        raise HTTPException(status_code=400, detail="No questions data found.")
+
+    students = student_answers.get("students", [])
+    if body.student_index < 0 or body.student_index >= len(students):
+        raise HTTPException(status_code=400, detail=f"Invalid student index: {body.student_index}")
 
-    # Get prompt content
-    prompt_content = body.prompt_content
-    if not prompt_content and body.prompt_id:
-        prompt = await get_prompt(body.prompt_id)
-        if prompt:
-            prompt_content = prompt["content"]
-    if not prompt_content:
-        prompt_content = get_default_prompt()
+    student = students[body.student_index]
 
     try:
-        html = await generate_report(questions, student_answers, teacher_answers, prompt_content, body.model)
-        report_id = await save_report(session_id, body.prompt_id, html)
-        return {"report_id": report_id, "html_content": html}
+        html = await generate_student_report(student, questions, teacher_answers, body.model)
+        report_id = await save_report(session_id, None, html)
+        return {"report_id": report_id, "html_content": html, "student_name": student.get("name", "")}
     except Exception as e:
         raise HTTPException(status_code=500, detail=f"Report generation failed: {str(e)}")
 

chatkit/backend/app/report_generator.py

@@ -23,69 +23,115 @@ MODEL_CONTEXT_LIMITS: dict[str, int] = {
 }
 
 DEFAULT_CONTEXT_LIMIT = 128_000
-# Minimum tokens we need for a useful HTML report
 MIN_COMPLETION_TOKENS = 2_000
 DESIRED_COMPLETION_TOKENS = 16_384
 TOKEN_SAFETY_MARGIN = 256
 
 
 def _estimate_tokens(text: str) -> int:
-    """Estimate token count using char-count heuristic.
-
-    CJK text averages ~1.5-2 tokens/char; English ~4 chars/token.
-    Using len//3 is a conservative middle-ground that slightly overestimates,
-    which is the safe direction for a pre-flight check.
-    """
     return max(1, len(text) // 3)
 
 
-def _truncate_students(student_answers: dict, max_students: int) -> tuple[dict, int, int]:
-    """Truncate student list to fit within token budget.
+def extract_html(content: str) -> str:
+    """Extract HTML from potential markdown code blocks."""
+    match = re.search(r"```html?\s*\n(.*?)```", content, re.DOTALL)
+    if match:
+        return match.group(1).strip()
+    stripped = content.strip()
+    if stripped.startswith("<!DOCTYPE") or stripped.startswith("<html"):
+        return stripped
+    return stripped
+
 
-    Returns (truncated_data, original_count, kept_count).
-    """
-    students = student_answers.get("students", [])
-    original_count = len(students)
-    if original_count <= max_students:
-        return student_answers, original_count, original_count
-    truncated = {**student_answers, "students": students[:max_students]}
-    return truncated, original_count, max_students
+# ---------------------------------------------------------------------------
+# Per-student report generation (new flow)
+# ---------------------------------------------------------------------------
 
+def filter_student_wrong_answers(
+    student: dict,
+    questions_data: dict,
+    teacher_answers_data: dict,
+) -> tuple[list[dict], list[dict], list[dict]]:
+    """Compare a student's answers with teacher answers, return wrong items.
 
-REPORT_SYSTEM_PROMPT = """You are ClassLens, an AI teaching assistant that creates beautiful, comprehensive exam analysis reports.
+    Returns (wrong_questions, wrong_student_answers, relevant_teacher_answers).
+    """
+    teacher_map: dict[int, dict] = {}
+    for ta in teacher_answers_data.get("answers", []):
+        qnum = ta.get("question_number")
+        if qnum is not None:
+            teacher_map[int(qnum)] = ta
+
+    question_map: dict[int, dict] = {}
+    for q in questions_data.get("questions", []):
+        num = q.get("number")
+        if num is not None:
+            question_map[int(num)] = q
+
+    wrong_questions: list[dict] = []
+    wrong_answers: list[dict] = []
+    relevant_teacher: list[dict] = []
+
+    for sa in student.get("answers", []):
+        qnum = sa.get("question_number")
+        if qnum is None:
+            continue
+        qnum = int(qnum)
+        ta = teacher_map.get(qnum)
+        if ta is None:
+            continue
+
+        student_ans = str(sa.get("answer", "")).strip()
+        correct_ans = str(ta.get("correct_answer", "")).strip()
+
+        if student_ans.lower() != correct_ans.lower():
+            wrong_answers.append(sa)
+            relevant_teacher.append(ta)
+            q = question_map.get(qnum)
+            if q:
+                wrong_questions.append(q)
+
+    return wrong_questions, wrong_answers, relevant_teacher
+
+
+STUDENT_REPORT_SYSTEM_PROMPT = """You are ClassLens, an AI teaching assistant that creates a focused, personalized exam analysis report for a single student.
 
 ## Your Task
-Generate a complete, self-contained HTML report based on the exam data and prompt provided.
+Generate a complete, self-contained HTML report analyzing this student's wrong answers only.
 
 ## Language
 - Use Traditional Chinese (繁體中文) for all content
 - Include bilingual labels where appropriate (English + 中文)
 
-## HTML Report Requirements
+## HTML Report Sections
 
-Generate a complete HTML file with these sections:
+### Section 1: 📋 Student Overview (學生概覽)
+- Student name (use partial name for privacy, e.g., 李X恩)
+- Total questions, correct count, wrong count, score percentage
+- A brief overall assessment
 
-### Section 1: 📝 Q&A Analysis (題目詳解)
-For each question:
-- Question number, text, and type
-- Correct answer highlighted
+### Section 2: 📝 Wrong Answer Analysis (錯題詳解)
+For EACH wrong answer:
+- Question number, full question text, type
+- ❌ Student's wrong answer vs ✅ Correct answer
 - Concept tags (e.g., 🎯 細節理解, 🔍 推論能力)
-- Detailed explanation with: what it tests, solving strategy, common mistakes, learning points
+- Why the student likely chose the wrong answer
+- Detailed explanation of the correct answer
+- Learning points and study tips for this topic
 
-### Section 2: 📊 Statistics (成績統計)
-- Stats grid: total students, average, highest, lowest
-- Score distribution bar chart (Chart.js)
-- Question accuracy doughnut chart (Chart.js)
-- Student details table with score badges (color-coded)
+### Section 3: 📊 Weakness Summary (弱點分析)
+- Categorize wrong answers by topic/skill
+- Identify patterns in mistakes
+- Priority study areas
 
-### Section 3: 👩‍🏫 Teacher Insights (教師分析與建議)
-- Overall performance analysis
-- Teaching recommendations
-- Individual student support suggestions (🔴 needs attention, 🟡 needs reinforcement, 🟢 high performers)
+### Section 4: 💡 Study Recommendations (學習建議)
+- Specific, actionable study suggestions
+- Recommended topics to review
+- Study strategies for the identified weak areas
 
-## HTML Template Structure
+## HTML Theme
 
-Use this dark theme with the following CSS variables:
+Use this dark theme:
 ```
 :root {
     --bg-primary: #0f1419;
@@ -101,127 +147,104 @@ Use this dark theme with the following CSS variables:
 }
 ```
 
-Include Chart.js via CDN: `<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>`
-
 ## Privacy
-- Use partial names (e.g., 李X恩) in reports
-- Never expose full student identifiers
-- Group low performers sensitively
+- Use partial names (e.g., 李X恩)
 
 ## Output
 Return ONLY the complete HTML document. No markdown code fences. Just raw HTML starting with <!DOCTYPE html>."""
 
 
-DEFAULT_ANALYSIS_PROMPT = """請根據以下考試數據生成一份完整的分析報告。
+STUDENT_REPORT_PROMPT = """請為以下學生生成個人化的錯題分析報告。
 
-## 考試題目：
-{questions}
+## 學生姓名：{student_name}
 
-## 學生答案：
-{student_answers}
+## 考試總題數：{total_questions}
+## 答錯題數：{wrong_count}
 
-## 標準答案：
-{teacher_answers}
+## 答錯的題目：
+{wrong_questions}
 
-請生成包含以下內容的 HTML 報告：
-1. 題目詳解 (Q&A Analysis) - 每題的詳細分析、解題策略、常見錯誤
-2. 成績統計 (Statistics) - 包含 Chart.js 圖表的統計分析
-3. 教師分析與建議 (Teacher Insights) - 教學改進建議和個別輔導建議
+## 該學生的錯誤答案：
+{wrong_answers}
 
-請自動計算每位學生的成績，識別常見錯誤模式，並提供具體的教學建議。"""
+## 對應的標準答案：
+{teacher_answers}
 
+請針對每一道錯題提供詳細分析，找出錯誤模式，並給出具體的學習建議。"""
 
-def get_default_prompt() -> str:
-    return DEFAULT_ANALYSIS_PROMPT
 
-
-def fill_prompt(template: str, questions: dict, student_answers: dict, teacher_answers: dict) -> str:
-    """Fill the prompt template with actual data."""
-    return template.format(
-        questions=json.dumps(questions, ensure_ascii=False, separators=(",", ":")),
-        student_answers=json.dumps(student_answers, ensure_ascii=False, separators=(",", ":")),
-        teacher_answers=json.dumps(teacher_answers, ensure_ascii=False, separators=(",", ":")),
-    )
+def get_default_prompt() -> str:
+    return STUDENT_REPORT_PROMPT
 
 
-def extract_html(content: str) -> str:
-    """Extract HTML from potential markdown code blocks."""
-    # Try to find HTML in code blocks first
-    match = re.search(r"```html?\s*\n(.*?)```", content, re.DOTALL)
-    if match:
-        return match.group(1).strip()
-    # If content starts with <!DOCTYPE or <html, it's already raw HTML
-    stripped = content.strip()
-    if stripped.startswith("<!DOCTYPE") or stripped.startswith("<html"):
-        return stripped
-    return stripped
+def get_student_names(student_answers_data: dict) -> list[dict]:
+    """Extract student names/ids from parsed student answers data."""
+    students = student_answers_data.get("students", [])
+    result = []
+    for i, s in enumerate(students):
+        result.append({
+            "index": i,
+            "name": s.get("name", f"Student {i + 1}"),
+            "id": s.get("id", ""),
+        })
+    return result
 
 
-async def generate_report(
+async def generate_student_report(
+    student: dict,
     questions_data: dict,
-    student_answers_data: dict,
     teacher_answers_data: dict,
-    prompt_template: str,
     model: str = "gpt-5.4",
 ) -> str:
-    """
-    Generate HTML report by sending parsed exam data + prompt to OpenAI.
-    Uses the same OPENAI_API_KEY as file parsing.
-    Returns complete HTML string.
-    """
+    """Generate HTML report for a single student, focused on their wrong answers."""
     settings = get_settings()
     client = AsyncOpenAI(api_key=settings.openai_api_key)
-    context_limit = MODEL_CONTEXT_LIMITS.get(model, DEFAULT_CONTEXT_LIMIT)
 
-    # --- Try full data first, auto-truncate students if too large ---
-    current_student_data = student_answers_data
-    total_students = len(student_answers_data.get("students", []))
-    truncated = False
+    total_questions = len(questions_data.get("questions", []))
+    wrong_questions, wrong_answers, relevant_teacher = filter_student_wrong_answers(
+        student, questions_data, teacher_answers_data,
+    )
 
-    for attempt in range(3):  # full → 50% → 25% of students
-        filled_prompt = fill_prompt(prompt_template, questions_data, current_student_data, teacher_answers_data)
-        prompt_tokens = _estimate_tokens(REPORT_SYSTEM_PROMPT) + _estimate_tokens(filled_prompt)
-        available_for_completion = context_limit - prompt_tokens - TOKEN_SAFETY_MARGIN
+    student_name = student.get("name", "Unknown")
+
+    if not wrong_answers:
+        # All correct — return a simple congratulations page
+        return f"""<!DOCTYPE html>
+<html lang="zh-TW"><head><meta charset="UTF-8"><title>{student_name} - 分析報告</title>
+<style>body{{background:#0f1419;color:#f1f5f9;font-family:system-ui;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0}}
+.card{{background:#212d3b;border-radius:16px;padding:3rem;text-align:center;max-width:500px}}
+h1{{color:#4ecdc4;margin-bottom:1rem}}p{{color:#94a3b8;font-size:1.1rem}}</style></head>
+<body><div class="card"><h1>🎉 全部答對！</h1><p><strong>{student_name}</strong> 在本次考試中答對了全部 {total_questions} 題，表現優異！</p></div></body></html>"""
+
+    filled_prompt = STUDENT_REPORT_PROMPT.format(
+        student_name=student_name,
+        total_questions=total_questions,
+        wrong_count=len(wrong_answers),
+        wrong_questions=json.dumps({"questions": wrong_questions}, ensure_ascii=False, indent=2),
+        wrong_answers=json.dumps(wrong_answers, ensure_ascii=False, indent=2),
+        teacher_answers=json.dumps(relevant_teacher, ensure_ascii=False, indent=2),
+    )
 
-        logger.info(
-            "Attempt %d — prompt ~%d tokens, available for completion: %d (model: %s, students: %d)",
-            attempt + 1, prompt_tokens, available_for_completion, model,
-            len(current_student_data.get("students", [])),
-        )
+    prompt_tokens = _estimate_tokens(STUDENT_REPORT_SYSTEM_PROMPT) + _estimate_tokens(filled_prompt)
+    context_limit = MODEL_CONTEXT_LIMITS.get(model, DEFAULT_CONTEXT_LIMIT)
+    available = context_limit - prompt_tokens - TOKEN_SAFETY_MARGIN
 
-        if available_for_completion >= MIN_COMPLETION_TOKENS:
-            break
+    logger.info(
+        "Student report for %s — %d wrong answers, ~%d prompt tokens, %d available (model: %s)",
+        student_name, len(wrong_answers), prompt_tokens, available, model,
+    )
 
-        # Reduce student count: 50% → 25% of original
-        fraction = 0.5 if attempt == 0 else 0.25
-        max_students = max(1, int(total_students * fraction))
-        current_student_data, _, kept = _truncate_students(student_answers_data, max_students)
-        truncated = True
-        logger.warning(
-            "Prompt too large, truncating students: %d → %d", total_students, kept,
-        )
-    else:
-        # Still too large after all truncation attempts
+    if available < MIN_COMPLETION_TOKENS:
         raise ValueError(
-            f"提示內容過大（約 {prompt_tokens:,} tokens），即使只保留 25% 的學生資料仍超出模型限制。"
-            f"請減少題目數量或簡化提示。"
+            f"學生 {student_name} 的錯題資料過大（約 {prompt_tokens:,} tokens），請減少題目數量。"
         )
 
-    max_completion = min(DESIRED_COMPLETION_TOKENS, available_for_completion)
-
-    # Add a note to the prompt if data was truncated
-    if truncated:
-        kept_count = len(current_student_data.get("students", []))
-        truncation_note = (
-            f"\n\n⚠️ 注意：因資料量過大，僅包含 {kept_count}/{total_students} 位學生的答案。"
-            f"請在報告中註明此為部分學生的抽樣分析。"
-        )
-        filled_prompt += truncation_note
+    max_completion = min(DESIRED_COMPLETION_TOKENS, available)
 
     kwargs: dict = {
         "model": model,
         "messages": [
-            {"role": "system", "content": REPORT_SYSTEM_PROMPT},
+            {"role": "system", "content": STUDENT_REPORT_SYSTEM_PROMPT},
             {"role": "user", "content": filled_prompt},
         ],
         "max_completion_tokens": max_completion,
@@ -231,7 +254,6 @@ async def generate_report(
     try:
         response = await client.chat.completions.create(**kwargs)
     except Exception as e:
-        # Some models may not support max_completion_tokens; fallback
         if "max_completion_tokens" in str(e):
             kwargs.pop("max_completion_tokens")
             kwargs["max_tokens"] = max_completion
@@ -247,5 +269,5 @@ async def generate_report(
         detail = f"finish_reason={reason}"
         if refusal:
             detail += f", refusal={refusal}"
-        raise ValueError(f"Model returned empty content ({detail}). Try a different model or simplify your prompt.")
+        raise ValueError(f"Model returned empty content for {student_name} ({detail}).")
     return extract_html(html_content)

chatkit/frontend/src/App.tsx

@@ -5,7 +5,7 @@ import { LoginForm } from "./components/LoginForm";
 import { StepIndicator } from "./components/StepIndicator";
 import { FileUploadPanel } from "./components/step1/FileUploadPanel";
 import { ParsedDataSummary } from "./components/step2/ParsedDataSummary";
-import { PromptEditor } from "./components/step2/PromptEditor";
+import { StudentSelector } from "./components/step2/StudentSelector";
 import { ReportViewer } from "./components/step3/ReportViewer";
 import { apiGet, apiPost, getToken, clearToken } from "./lib/api";
 
@@ -17,6 +17,20 @@ interface User {
   display_name: string;
 }
 
+interface StudentInfo {
+  index: number;
+  name: string;
+  id: string;
+}
+
+export interface StudentReport {
+  studentName: string;
+  studentIndex: number;
+  html: string;
+  status: "pending" | "generating" | "done" | "error";
+  error?: string;
+}
+
 export default function App() {
   const [invited, setInvited] = useState(() => localStorage.getItem("invite_code") === INVITE_CODE);
   const [user, setUser] = useState<User | null>(null);
@@ -24,8 +38,8 @@ export default function App() {
   const [currentStep, setCurrentStep] = useState<1 | 2 | 3>(1);
   const [sessionId, setSessionId] = useState<number | null>(null);
   const [parsedData, setParsedData] = useState<Record<string, unknown>>({});
-  const [promptContent, setPromptContent] = useState("");
-  const [reportHtml, setReportHtml] = useState("");
+  const [students, setStudents] = useState<StudentInfo[]>([]);
+  const [reports, setReports] = useState<StudentReport[]>([]);
   const [isGenerating, setIsGenerating] = useState(false);
 
   // Check for saved JWT on mount
@@ -41,15 +55,6 @@ export default function App() {
     }
   }, []);
 
-  // Load default prompt
-  useEffect(() => {
-    if (user && !promptContent) {
-      apiGet<{ content: string }>("/api/prompts/default")
-        .then((res) => setPromptContent(res.content))
-        .catch(() => {});
-    }
-  }, [user]);
-
   // Create session when user is authenticated and no session exists
   useEffect(() => {
     if (user && !sessionId) {
@@ -59,12 +64,26 @@ export default function App() {
     }
   }, [user]);
 
+  // Extract student list from parsed data
+  useEffect(() => {
+    const sa = parsedData.student_answers as { students?: { name?: string; id?: string }[] } | undefined;
+    if (sa?.students) {
+      setStudents(
+        sa.students.map((s, i) => ({
+          index: i,
+          name: s.name || `Student ${i + 1}`,
+          id: s.id || "",
+        }))
+      );
+    }
+  }, [parsedData]);
+
   const handleLogout = () => {
     setUser(null);
     setSessionId(null);
     setParsedData({});
-    setPromptContent("");
-    setReportHtml("");
+    setStudents([]);
+    setReports([]);
     setCurrentStep(1);
   };
 
@@ -76,51 +95,88 @@ export default function App() {
     setCurrentStep(2);
   }, []);
 
-  const handleRunSummary = useCallback(async (model: string) => {
-    if (!sessionId || !promptContent.trim()) return;
+  // Sequential per-student report generation
+  const handleGenerateReports = useCallback(async (selectedIndices: number[], model: string) => {
+    if (!sessionId) return;
+
+    // Initialize report slots
+    const initial: StudentReport[] = selectedIndices.map((idx) => {
+      const s = students.find((s) => s.index === idx);
+      return {
+        studentName: s?.name || `Student ${idx + 1}`,
+        studentIndex: idx,
+        html: "",
+        status: "pending",
+      };
+    });
+    setReports(initial);
     setIsGenerating(true);
-    try {
-      const res = await apiPost<{ report_id: number; html_content: string }>(
-        `/api/sessions/${sessionId}/generate-report`,
-        { prompt_content: promptContent, model }
+    setCurrentStep(3);
+
+    // Generate sequentially
+    for (let i = 0; i < selectedIndices.length; i++) {
+      const idx = selectedIndices[i];
+
+      // Mark current as generating
+      setReports((prev) =>
+        prev.map((r, j) => (j === i ? { ...r, status: "generating" } : r))
       );
-      setReportHtml(res.html_content);
-      setCurrentStep(3);
-    } catch (err) {
-      alert(err instanceof Error ? err.message : "Report generation failed");
-    } finally {
-      setIsGenerating(false);
+
+      try {
+        const res = await apiPost<{
+          report_id: number;
+          html_content: string;
+          student_name: string;
+        }>(`/api/sessions/${sessionId}/generate-student-report`, {
+          student_index: idx,
+          model,
+        });
+
+        setReports((prev) =>
+          prev.map((r, j) =>
+            j === i ? { ...r, html: res.html_content, status: "done" } : r
+          )
+        );
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Generation failed";
+        setReports((prev) =>
+          prev.map((r, j) =>
+            j === i ? { ...r, status: "error", error: msg } : r
+          )
+        );
+      }
     }
-  }, [sessionId, promptContent]);
-
-  const handleExportPdf = useCallback(async () => {
-    // Dynamic import to avoid loading html2pdf.js unless needed
-    const html2pdf = (await import("html2pdf.js")).default;
-    const container = document.createElement("div");
-    container.innerHTML = reportHtml;
-    document.body.appendChild(container);
-    await html2pdf()
-      .set({ margin: 10, filename: "classlens-report.pdf", html2canvas: { scale: 2 } })
-      .from(container)
-      .save();
-    document.body.removeChild(container);
-  }, [reportHtml]);
-
-  const handleExportPng = useCallback(async () => {
-    const html2canvas = (await import("html2canvas")).default;
-    const container = document.createElement("div");
-    container.innerHTML = reportHtml;
-    container.style.width = "1200px";
-    container.style.position = "absolute";
-    container.style.left = "-9999px";
-    document.body.appendChild(container);
-    const canvas = await html2canvas(container, { scale: 2 });
-    document.body.removeChild(container);
-    const link = document.createElement("a");
-    link.download = "classlens-report.png";
-    link.href = canvas.toDataURL("image/png");
-    link.click();
-  }, [reportHtml]);
+
+    setIsGenerating(false);
+  }, [sessionId, students]);
+
+  const handleExportAllHtml = useCallback(() => {
+    const doneReports = reports.filter((r) => r.status === "done");
+    if (doneReports.length === 0) return;
+
+    // Combine all reports into one HTML file with page breaks
+    const combined = `<!DOCTYPE html>
+<html lang="zh-TW"><head><meta charset="UTF-8"><title>ClassLens - Student Reports</title>
+<style>
+  .page-break { page-break-after: always; break-after: page; }
+  .report-container { margin-bottom: 2rem; }
+</style></head><body>
+${doneReports
+  .map(
+    (r, i) =>
+      `<div class="report-container${i < doneReports.length - 1 ? " page-break" : ""}">${r.html}</div>`
+  )
+  .join("\n")}
+</body></html>`;
+
+    const blob = new Blob([combined], { type: "text/html" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "classlens-all-reports.html";
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [reports]);
 
   const handleStepClick = (step: 1 | 2 | 3) => {
     if (step <= currentStep) setCurrentStep(step);
@@ -186,23 +242,25 @@ export default function App() {
             <div className="space-y-6 animate-fade-in-up">
               <div className="text-center mb-4">
                 <h2 className="font-display text-2xl font-bold text-[var(--color-text)]">
-                  編輯分析提示詞
+                  選擇學生
                 </h2>
                 <p className="text-[var(--color-text-muted)] mt-2">
-                  編輯提示詞來自訂分析報告的內容與格式
+                  勾選要生成個人錯題分析報告的學生，系統會逐一分析每位學生的答錯題目
                 </p>
               </div>
               <ParsedDataSummary parsedData={parsedData} />
-              {sessionId && (
-                <PromptEditor
-                  promptContent={promptContent}
-                  onPromptChange={setPromptContent}
-                  sessionId={sessionId}
-                  onRunSummary={handleRunSummary}
+              {students.length > 0 ? (
+                <StudentSelector
+                  students={students}
+                  onGenerate={handleGenerateReports}
                   isGenerating={isGenerating}
-                  parsedData={parsedData}
-                  onParsedDataUpdate={handleParsedDataUpdate}
                 />
+              ) : (
+                <div className="card p-8 text-center">
+                  <p className="text-[var(--color-text-muted)]">
+                    尚未上傳學生答案資料，請先回到上一步上傳檔案
+                  </p>
+                </div>
               )}
             </div>
           )}
@@ -211,14 +269,14 @@ export default function App() {
             <div className="animate-fade-in-up">
               <div className="text-center mb-4">
                 <h2 className="font-display text-2xl font-bold text-[var(--color-text)]">
-                  分析報告
+                  學生分析報告
                 </h2>
               </div>
               <ReportViewer
-                reportHtml={reportHtml}
+                reports={reports}
+                isGenerating={isGenerating}
                 onBack={() => setCurrentStep(2)}
-                onExportPdf={handleExportPdf}
-                onExportPng={handleExportPng}
+                onExportAllHtml={handleExportAllHtml}
               />
             </div>
           )}

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

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { ModelSelector } from "../ModelSelector";
+
+interface Student {
+  index: number;
+  name: string;
+  id: string;
+}
+
+interface StudentSelectorProps {
+  students: Student[];
+  onGenerate: (selectedIndices: number[], model: string) => void;
+  isGenerating: boolean;
+}
+
+export function StudentSelector({
+  students,
+  onGenerate,
+  isGenerating,
+}: StudentSelectorProps) {
+  const [selected, setSelected] = useState<Set<number>>(
+    () => new Set(students.map((s) => s.index))
+  );
+  const [model, setModel] = useState("gpt-5.4");
+
+  const toggleAll = () => {
+    if (selected.size === students.length) {
+      setSelected(new Set());
+    } else {
+      setSelected(new Set(students.map((s) => s.index)));
+    }
+  };
+
+  const toggle = (index: number) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  const allSelected = selected.size === students.length;
+
+  return (
+    <div className="space-y-4">
+      {/* Header bar */}
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={toggleAll}
+            className="btn btn-outline text-sm !py-2"
+          >
+            {allSelected ? "取消全選" : "全選"}
+          </button>
+          <span className="text-sm text-[var(--color-text-muted)]">
+            已選 {selected.size} / {students.length} 位學生
+          </span>
+        </div>
+        <ModelSelector value={model} onChange={setModel} label="報告模型：" />
+      </div>
+
+      {/* Student list */}
+      <div className="card p-4 max-h-[50vh] overflow-y-auto">
+        <div className="grid gap-2">
+          {students.map((s) => (
+            <label
+              key={s.index}
+              className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-colors ${
+                selected.has(s.index)
+                  ? "bg-[var(--color-primary)]/10 border border-[var(--color-primary)]/30"
+                  : "hover:bg-[var(--color-surface)] border border-transparent"
+              }`}
+            >
+              <input
+                type="checkbox"
+                checked={selected.has(s.index)}
+                onChange={() => toggle(s.index)}
+                className="w-5 h-5 rounded accent-[var(--color-primary)]"
+              />
+              <span className="font-semibold text-[var(--color-text)]">
+                {s.name}
+              </span>
+              {s.id && (
+                <span className="text-xs text-[var(--color-text-muted)]">
+                  ({s.id})
+                </span>
+              )}
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {/* Generate button */}
+      <div className="text-center">
+        <button
+          onClick={() => onGenerate(Array.from(selected).sort((a, b) => a - b), model)}
+          disabled={isGenerating || selected.size === 0}
+          className="btn btn-accent text-lg px-8 py-4 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isGenerating ? (
+            <span className="flex items-center gap-2">
+              <span className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+              生成報告中...
+            </span>
+          ) : (
+            `為 ${selected.size} 位學生生成報告 →`
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

chatkit/frontend/src/components/step3/ReportViewer.tsx

@@ -1,53 +1,157 @@
-import { useRef } from "react";
+import { useState, useRef, useEffect } from "react";
+import type { StudentReport } from "../../App";
 
 interface ReportViewerProps {
-  reportHtml: string;
+  reports: StudentReport[];
+  isGenerating: boolean;
   onBack: () => void;
-  onExportPdf: () => void;
-  onExportPng: () => void;
+  onExportAllHtml: () => void;
 }
 
-export function ReportViewer({ reportHtml, onBack, onExportPdf, onExportPng }: ReportViewerProps) {
+export function ReportViewer({
+  reports,
+  isGenerating,
+  onBack,
+  onExportAllHtml,
+}: ReportViewerProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
-  const handleDownloadHtml = () => {
-    const blob = new Blob([reportHtml], { type: "text/html" });
+  // Auto-switch to the report currently being generated
+  useEffect(() => {
+    const generatingIdx = reports.findIndex((r) => r.status === "generating");
+    if (generatingIdx >= 0) {
+      setActiveIndex(generatingIdx);
+    } else {
+      // When generation finishes, show the last completed one
+      let lastDone = -1;
+      for (let j = reports.length - 1; j >= 0; j--) {
+        if (reports[j].status === "done") { lastDone = j; break; }
+      }
+      if (lastDone >= 0) setActiveIndex(lastDone);
+    }
+  }, [reports]);
+
+  const activeReport = reports[activeIndex];
+  const doneCount = reports.filter((r) => r.status === "done").length;
+  const errorCount = reports.filter((r) => r.status === "error").length;
+
+  const handleDownloadSingle = () => {
+    if (!activeReport?.html) return;
+    const blob = new Blob([activeReport.html], { type: "text/html" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = "classlens-report.html";
+    a.download = `classlens-${activeReport.studentName}.html`;
     a.click();
     URL.revokeObjectURL(url);
   };
 
   return (
     <div className="space-y-4">
+      {/* Progress bar */}
+      {isGenerating && (
+        <div className="card p-4">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-semibold text-[var(--color-text)]">
+              生成進度
+            </span>
+            <span className="text-sm text-[var(--color-text-muted)]">
+              {doneCount + errorCount} / {reports.length}
+            </span>
+          </div>
+          <div className="w-full h-2 bg-[var(--color-border)] rounded-full overflow-hidden">
+            <div
+              className="h-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-success)] transition-all duration-500"
+              style={{
+                width: `${((doneCount + errorCount) / reports.length) * 100}%`,
+              }}
+            />
+          </div>
+        </div>
+      )}
+
       {/* Action bar */}
       <div className="flex flex-wrap items-center gap-3">
         <button onClick={onBack} className="btn btn-outline text-sm">
-          ← 返回修改提示詞
+          ← 返回選擇學生
         </button>
         <div className="flex-1" />
-        <button onClick={handleDownloadHtml} className="btn btn-outline text-sm">
-          下載 HTML
-        </button>
-        <button onClick={onExportPdf} className="btn btn-outline text-sm">
-          匯出 PDF
-        </button>
-        <button onClick={onExportPng} className="btn btn-outline text-sm">
-          匯出 PNG
-        </button>
+        {activeReport?.status === "done" && (
+          <button onClick={handleDownloadSingle} className="btn btn-outline text-sm">
+            下載此報告
+          </button>
+        )}
+        {doneCount > 1 && (
+          <button onClick={onExportAllHtml} className="btn btn-primary text-sm">
+            下載全部報告
+          </button>
+        )}
       </div>
 
-      {/* Report iframe */}
-      <div className="card overflow-hidden" style={{ height: "75vh" }}>
-        <iframe
-          ref={iframeRef}
-          srcDoc={reportHtml}
-          title="Report"
-          className="w-full h-full border-0"
-          sandbox="allow-scripts allow-same-origin"
-        />
+      {/* Student tabs */}
+      <div className="flex gap-2 overflow-x-auto pb-2">
+        {reports.map((r, i) => (
+          <button
+            key={r.studentIndex}
+            onClick={() => setActiveIndex(i)}
+            className={`shrink-0 px-4 py-2 rounded-xl text-sm font-semibold transition-all ${
+              i === activeIndex
+                ? "bg-[var(--color-primary)] text-white shadow-md"
+                : "bg-[var(--color-surface)] text-[var(--color-text-muted)] hover:text-[var(--color-text)] border border-[var(--color-border)]"
+            }`}
+          >
+            <span className="mr-1.5">
+              {r.status === "done" && "✅"}
+              {r.status === "generating" && "⏳"}
+              {r.status === "pending" && "⬜"}
+              {r.status === "error" && "❌"}
+            </span>
+            {r.studentName}
+          </button>
+        ))}
+      </div>
+
+      {/* Report content */}
+      <div className="card overflow-hidden" style={{ height: "70vh" }}>
+        {activeReport?.status === "done" && (
+          <iframe
+            ref={iframeRef}
+            srcDoc={activeReport.html}
+            title={`Report - ${activeReport.studentName}`}
+            className="w-full h-full border-0"
+            sandbox="allow-scripts allow-same-origin"
+          />
+        )}
+
+        {activeReport?.status === "generating" && (
+          <div className="w-full h-full flex flex-col items-center justify-center gap-4">
+            <div className="w-10 h-10 border-3 border-[var(--color-primary)] border-t-transparent rounded-full animate-spin" />
+            <p className="text-[var(--color-text-muted)] text-lg">
+              正在為 <strong className="text-[var(--color-text)]">{activeReport.studentName}</strong> 生成報告...
+            </p>
+          </div>
+        )}
+
+        {activeReport?.status === "pending" && (
+          <div className="w-full h-full flex items-center justify-center">
+            <p className="text-[var(--color-text-muted)]">
+              等待生成...
+            </p>
+          </div>
+        )}
+
+        {activeReport?.status === "error" && (
+          <div className="w-full h-full flex flex-col items-center justify-center gap-3">
+            <span className="text-4xl">❌</span>
+            <p className="text-[var(--color-text)] font-semibold">
+              {activeReport.studentName} 報告生成失敗
+            </p>
+            <p className="text-sm text-[var(--color-text-muted)] max-w-md text-center">
+              {activeReport.error}
+            </p>
+          </div>
+        )}
       </div>
     </div>
   );