Add final prompt preview tab with real student data substitution

DataPreviewModal now opens on "最終提示詞" tab first, showing the actual
filled prompt for a selected student with {wrong_questions}, {wrong_answers}
etc. replaced by real data. Users can switch students via dropdown to see
each student's specific prompt. Textareas are resizable. Backend adds
/preview-student-prompt endpoint.

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_student_report, get_default_prompt, get_student_names
+from .report_generator import generate_student_report, get_default_prompt, get_student_names, build_student_prompt
 
 STATIC_DIR = Path(__file__).parent.parent / "static"
 
@@ -228,11 +228,45 @@ async def api_delete_prompt(prompt_id: int, user=Depends(get_current_user)):
 # Report Generation Endpoints
 # =============================================================================
 
+class PreviewStudentPromptRequest(BaseModel):
+    student_index: int
+
+
 class GenerateStudentReportRequest(BaseModel):
     student_index: int
     model: str = "gpt-5.4"
 
 
+@app.post("/api/sessions/{session_id}/preview-student-prompt")
+async def api_preview_student_prompt(
+    session_id: int, body: PreviewStudentPromptRequest, user=Depends(get_current_user)
+):
+    """Preview the filled prompt for a single student (with wrong answers substituted)."""
+    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)
+    questions = {}
+    student_answers = {}
+    teacher_answers = {}
+    for item in data:
+        if item["data_type"] == "questions":
+            questions = item["structured_data"]
+        elif item["data_type"] == "student_answers":
+            student_answers = item["structured_data"]
+        elif item["data_type"] == "teacher_answers":
+            teacher_answers = item["structured_data"]
+
+    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}")
+
+    student = students[body.student_index]
+    result = build_student_prompt(student, questions, teacher_answers)
+    return result
+
+
 @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."""

chatkit/backend/app/report_generator.py

@@ -177,6 +177,38 @@ def get_default_prompt() -> str:
     return STUDENT_REPORT_PROMPT
 
 
+def build_student_prompt(
+    student: dict,
+    questions_data: dict,
+    teacher_answers_data: dict,
+) -> dict:
+    """Build the filled prompt for a student (for preview).
+
+    Returns dict with filled_prompt, student_name, total_questions, wrong_count.
+    """
+    total_questions = len(questions_data.get("questions", []))
+    wrong_questions, wrong_answers, relevant_teacher = filter_student_wrong_answers(
+        student, questions_data, teacher_answers_data,
+    )
+    student_name = student.get("name", "Unknown")
+
+    filled = 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),
+    )
+
+    return {
+        "filled_prompt": filled,
+        "student_name": student_name,
+        "total_questions": total_questions,
+        "wrong_count": len(wrong_answers),
+    }
+
+
 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", [])

chatkit/frontend/src/App.tsx

@@ -272,6 +272,7 @@ ${doneReports
                       onGenerate={handleGenerateReports}
                       isGenerating={isGenerating}
                       selectedCount={selectedIndices.length}
+                      selectedIndices={selectedIndices}
                       parsedData={parsedData}
                       onParsedDataUpdate={handleParsedDataUpdate}
                     />

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

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { apiPost } from "../../lib/api";
 
 interface DataPreviewModalProps {
   parsedData: Record<string, unknown>;
@@ -6,44 +7,108 @@ interface DataPreviewModalProps {
   onGenerate: () => void;
   onClose: () => void;
   isGenerating: boolean;
+  sessionId: number;
+  selectedIndices: number[];
 }
 
-type TabKey = "questions" | "student_answers" | "teacher_answers";
+type TabKey = "questions" | "student_answers" | "teacher_answers" | "final_prompt";
 
-const TABS: { key: TabKey; label: string; icon: string }[] = [
+const DATA_TABS: { key: Exclude<TabKey, "final_prompt">; label: string; icon: string }[] = [
   { key: "questions", label: "考試題目", icon: "📝" },
   { key: "student_answers", label: "學生答案", icon: "👨‍🎓" },
   { key: "teacher_answers", label: "標準答案", icon: "✅" },
 ];
 
+interface StudentInfo {
+  index: number;
+  name: string;
+}
+
 export function DataPreviewModal({
   parsedData,
   onParsedDataUpdate,
   onGenerate,
   onClose,
   isGenerating,
+  sessionId,
+  selectedIndices,
 }: DataPreviewModalProps) {
-  const [activeTab, setActiveTab] = useState<TabKey>("questions");
-  const [editTexts, setEditTexts] = useState<Record<TabKey, string>>({
+  const [activeTab, setActiveTab] = useState<TabKey>("final_prompt");
+  const [editTexts, setEditTexts] = useState<Record<string, string>>({
     questions: "",
     student_answers: "",
     teacher_answers: "",
   });
   const [parseErrors, setParseErrors] = useState<Record<string, string>>({});
 
+  // Final prompt preview state
+  const [previewStudentIdx, setPreviewStudentIdx] = useState<number>(
+    selectedIndices.length > 0 ? selectedIndices[0] : 0
+  );
+  const [filledPrompt, setFilledPrompt] = useState("");
+  const [promptLoading, setPromptLoading] = useState(false);
+  const [promptMeta, setPromptMeta] = useState<{
+    student_name: string;
+    total_questions: number;
+    wrong_count: number;
+  } | null>(null);
+
+  // Build students list from parsedData
+  const students: StudentInfo[] = (() => {
+    const sa = parsedData.student_answers as { students?: { name?: string }[] } | undefined;
+    return (sa?.students || []).map((s, i) => ({
+      index: i,
+      name: s.name || `Student ${i + 1}`,
+    }));
+  })();
+
+  const selectedStudents = students.filter((s) => selectedIndices.includes(s.index));
+
   // Initialize edit texts from parsedData
   useEffect(() => {
-    const texts = {} as Record<TabKey, string>;
-    for (const tab of TABS) {
+    const texts: Record<string, string> = {};
+    for (const tab of DATA_TABS) {
       const data = parsedData[tab.key];
       texts[tab.key] = data ? JSON.stringify(data, null, 2) : "";
     }
     setEditTexts(texts);
   }, []);
 
-  const handleTextChange = (key: TabKey, value: string) => {
+  // Load filled prompt when tab is active or student changes
+  useEffect(() => {
+    if (activeTab !== "final_prompt") return;
+    loadFilledPrompt(previewStudentIdx);
+  }, [activeTab, previewStudentIdx]);
+
+  const loadFilledPrompt = async (studentIndex: number) => {
+    setPromptLoading(true);
+    setFilledPrompt("");
+    setPromptMeta(null);
+    try {
+      const res = await apiPost<{
+        filled_prompt: string;
+        student_name: string;
+        total_questions: number;
+        wrong_count: number;
+      }>(`/api/sessions/${sessionId}/preview-student-prompt`, {
+        student_index: studentIndex,
+      });
+      setFilledPrompt(res.filled_prompt);
+      setPromptMeta({
+        student_name: res.student_name,
+        total_questions: res.total_questions,
+        wrong_count: res.wrong_count,
+      });
+    } catch (err) {
+      setFilledPrompt(
+        `Error: ${err instanceof Error ? err.message : "Failed to load preview"}`
+      );
+    }
+    setPromptLoading(false);
+  };
+
+  const handleTextChange = (key: string, value: string) => {
     setEditTexts((prev) => ({ ...prev, [key]: value }));
-    // Clear error on edit
     setParseErrors((prev) => {
       const next = { ...prev };
       delete next[key];
@@ -51,7 +116,7 @@ export function DataPreviewModal({
     });
   };
 
-  const handleSave = (key: TabKey) => {
+  const handleSave = (key: string) => {
     try {
       const parsed = JSON.parse(editTexts[key]);
       onParsedDataUpdate(key, parsed);
@@ -66,9 +131,8 @@ export function DataPreviewModal({
   };
 
   const handleGenerate = () => {
-    // Try saving all tabs first
     let hasError = false;
-    for (const tab of TABS) {
+    for (const tab of DATA_TABS) {
       if (!editTexts[tab.key].trim()) continue;
       try {
         const parsed = JSON.parse(editTexts[tab.key]);
@@ -83,7 +147,7 @@ export function DataPreviewModal({
     if (!hasError) onGenerate();
   };
 
-  const getItemCount = (key: TabKey): number => {
+  const getItemCount = (key: string): number => {
     try {
       const data = JSON.parse(editTexts[key]);
       if (key === "questions") return data?.questions?.length ?? 0;
@@ -118,7 +182,21 @@ export function DataPreviewModal({
 
         {/* Tabs */}
         <div className="flex border-b border-[var(--color-border)]">
-          {TABS.map((tab) => {
+          {/* Final prompt tab first */}
+          <button
+            onClick={() => setActiveTab("final_prompt")}
+            className={`px-4 py-3 text-sm font-semibold transition-colors relative ${
+              activeTab === "final_prompt"
+                ? "text-[var(--color-accent)] bg-[var(--color-accent)]/5"
+                : "text-[var(--color-text-muted)] hover:text-[var(--color-text)] hover:bg-[var(--color-surface)]"
+            }`}
+          >
+            <span>🔍 最終提示詞</span>
+            {activeTab === "final_prompt" && (
+              <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-accent)]" />
+            )}
+          </button>
+          {DATA_TABS.map((tab) => {
             const count = getItemCount(tab.key);
             const hasError = !!parseErrors[tab.key];
             return (
@@ -143,33 +221,83 @@ export function DataPreviewModal({
           })}
         </div>
 
-        {/* Editor */}
+        {/* Content */}
         <div className="flex-1 overflow-hidden flex flex-col p-5 min-h-0">
-          <div className="flex items-center justify-between mb-3">
-            <p className="text-sm text-[var(--color-text-muted)]">
-              可直接編輯下方 JSON 資料，修改後點擊「套用修改」儲存
-            </p>
-            <button
-              onClick={() => handleSave(activeTab)}
-              className="btn btn-outline text-sm !py-1.5 !px-3"
-            >
-              套用修改
-            </button>
-          </div>
-
-          {parseErrors[activeTab] && (
-            <div className="mb-3 px-3 py-2 rounded-lg bg-red-500/10 text-red-500 text-sm">
-              {parseErrors[activeTab]}
-            </div>
-          )}
+          {activeTab === "final_prompt" ? (
+            /* Final prompt preview */
+            <>
+              <div className="flex items-center gap-3 mb-3 flex-wrap">
+                <label className="text-sm font-semibold text-[var(--color-text)]">
+                  預覽學生：
+                </label>
+                <select
+                  value={previewStudentIdx}
+                  onChange={(e) => setPreviewStudentIdx(Number(e.target.value))}
+                  className="input !w-auto !py-1.5 text-sm"
+                >
+                  {selectedStudents.map((s) => (
+                    <option key={s.index} value={s.index}>
+                      {s.name}
+                    </option>
+                  ))}
+                </select>
+                {promptMeta && (
+                  <div className="flex gap-2 text-xs">
+                    <span className="badge badge-success">
+                      總題數 {promptMeta.total_questions}
+                    </span>
+                    <span className="badge badge-warning">
+                      答錯 {promptMeta.wrong_count}
+                    </span>
+                  </div>
+                )}
+              </div>
+              <p className="text-xs text-[var(--color-text-muted)] mb-3">
+                以下是實際送給 LLM 的完整提示詞，變數已替換為該學生的錯題資料
+              </p>
+              {promptLoading ? (
+                <div className="flex-1 flex items-center justify-center">
+                  <div className="w-6 h-6 border-2 border-[var(--color-primary)] border-t-transparent rounded-full animate-spin" />
+                </div>
+              ) : (
+                <textarea
+                  value={filledPrompt}
+                  readOnly
+                  className="input !rounded-xl font-mono text-sm leading-relaxed resize-y flex-1"
+                  spellCheck={false}
+                />
+              )}
+            </>
+          ) : (
+            /* Data editing tabs */
+            <>
+              <div className="flex items-center justify-between mb-3">
+                <p className="text-sm text-[var(--color-text-muted)]">
+                  可直接編輯下方 JSON 資料，修改後點擊「套用修改」儲存
+                </p>
+                <button
+                  onClick={() => handleSave(activeTab)}
+                  className="btn btn-outline text-sm !py-1.5 !px-3"
+                >
+                  套用修改
+                </button>
+              </div>
 
-          <textarea
-            value={editTexts[activeTab]}
-            onChange={(e) => handleTextChange(activeTab, e.target.value)}
-            className="input !rounded-xl font-mono text-sm leading-relaxed resize-none flex-1"
-            placeholder={`尚未上傳${TABS.find((t) => t.key === activeTab)?.label ?? ""}資料`}
-            spellCheck={false}
-          />
+              {parseErrors[activeTab] && (
+                <div className="mb-3 px-3 py-2 rounded-lg bg-red-500/10 text-red-500 text-sm">
+                  {parseErrors[activeTab]}
+                </div>
+              )}
+
+              <textarea
+                value={editTexts[activeTab] || ""}
+                onChange={(e) => handleTextChange(activeTab, e.target.value)}
+                className="input !rounded-xl font-mono text-sm leading-relaxed resize-y flex-1"
+                placeholder={`尚未上傳${DATA_TABS.find((t) => t.key === activeTab)?.label ?? ""}資料`}
+                spellCheck={false}
+              />
+            </>
+          )}
         </div>
 
         {/* Footer */}

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

@@ -18,6 +18,7 @@ interface PromptEditorProps {
   onGenerate: (model: string) => void;
   isGenerating: boolean;
   selectedCount: number;
+  selectedIndices: number[];
   parsedData: Record<string, unknown>;
   onParsedDataUpdate: (dataType: string, data: unknown) => void;
 }
@@ -29,6 +30,7 @@ export function PromptEditor({
   onGenerate,
   isGenerating,
   selectedCount,
+  selectedIndices,
   parsedData,
   onParsedDataUpdate,
 }: PromptEditorProps) {
@@ -196,6 +198,8 @@ export function PromptEditor({
           }}
           onClose={() => setShowPreview(false)}
           isGenerating={isGenerating}
+          sessionId={sessionId}
+          selectedIndices={selectedIndices}
         />
       )}
     </div>