Add data preview modal before report generation

Users can now review and edit parsed JSON data (questions, student answers,
teacher answers) in a tabbed modal before generating the report.

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

chatkit/frontend/src/App.tsx

@@ -200,6 +200,8 @@ export default function App() {
                   sessionId={sessionId}
                   onRunSummary={handleRunSummary}
                   isGenerating={isGenerating}
+                  parsedData={parsedData}
+                  onParsedDataUpdate={handleParsedDataUpdate}
                 />
               )}
             </div>

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

@@ -0,0 +1,198 @@
+import { useState, useEffect } from "react";
+
+interface DataPreviewModalProps {
+  parsedData: Record<string, unknown>;
+  onParsedDataUpdate: (dataType: string, data: unknown) => void;
+  onGenerate: () => void;
+  onClose: () => void;
+  isGenerating: boolean;
+}
+
+type TabKey = "questions" | "student_answers" | "teacher_answers";
+
+const TABS: { key: TabKey; label: string; icon: string }[] = [
+  { key: "questions", label: "考試題目", icon: "📝" },
+  { key: "student_answers", label: "學生答案", icon: "👨‍🎓" },
+  { key: "teacher_answers", label: "標準答案", icon: "✅" },
+];
+
+export function DataPreviewModal({
+  parsedData,
+  onParsedDataUpdate,
+  onGenerate,
+  onClose,
+  isGenerating,
+}: DataPreviewModalProps) {
+  const [activeTab, setActiveTab] = useState<TabKey>("questions");
+  const [editTexts, setEditTexts] = useState<Record<TabKey, string>>({
+    questions: "",
+    student_answers: "",
+    teacher_answers: "",
+  });
+  const [parseErrors, setParseErrors] = useState<Record<string, string>>({});
+
+  // Initialize edit texts from parsedData
+  useEffect(() => {
+    const texts = {} as Record<TabKey, string>;
+    for (const tab of TABS) {
+      const data = parsedData[tab.key];
+      texts[tab.key] = data ? JSON.stringify(data, null, 2) : "";
+    }
+    setEditTexts(texts);
+  }, []);
+
+  const handleTextChange = (key: TabKey, value: string) => {
+    setEditTexts((prev) => ({ ...prev, [key]: value }));
+    // Clear error on edit
+    setParseErrors((prev) => {
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  };
+
+  const handleSave = (key: TabKey) => {
+    try {
+      const parsed = JSON.parse(editTexts[key]);
+      onParsedDataUpdate(key, parsed);
+      setParseErrors((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    } catch {
+      setParseErrors((prev) => ({ ...prev, [key]: "JSON 格式錯誤，請檢查語法" }));
+    }
+  };
+
+  const handleGenerate = () => {
+    // Try saving all tabs first
+    let hasError = false;
+    for (const tab of TABS) {
+      if (!editTexts[tab.key].trim()) continue;
+      try {
+        const parsed = JSON.parse(editTexts[tab.key]);
+        onParsedDataUpdate(tab.key, parsed);
+      } catch {
+        setParseErrors((prev) => ({ ...prev, [tab.key]: "JSON 格式錯誤，請檢查語法" }));
+        setActiveTab(tab.key);
+        hasError = true;
+        break;
+      }
+    }
+    if (!hasError) onGenerate();
+  };
+
+  const getItemCount = (key: TabKey): number => {
+    try {
+      const data = JSON.parse(editTexts[key]);
+      if (key === "questions") return data?.questions?.length ?? 0;
+      if (key === "student_answers") return data?.students?.length ?? 0;
+      if (key === "teacher_answers") return data?.answers?.length ?? 0;
+    } catch {}
+    return 0;
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="relative w-full max-w-5xl max-h-[90vh] flex flex-col card overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between p-5 border-b border-[var(--color-border)]">
+          <h3 className="font-display text-xl font-bold text-[var(--color-text)]">
+            預覽分析資料
+          </h3>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 flex items-center justify-center rounded-lg text-[var(--color-text-muted)] hover:text-[var(--color-text)] hover:bg-[var(--color-border)]/50 transition-colors text-lg"
+          >
+            &times;
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-[var(--color-border)]">
+          {TABS.map((tab) => {
+            const count = getItemCount(tab.key);
+            const hasError = !!parseErrors[tab.key];
+            return (
+              <button
+                key={tab.key}
+                onClick={() => setActiveTab(tab.key)}
+                className={`flex-1 px-4 py-3 text-sm font-semibold transition-colors relative ${
+                  activeTab === tab.key
+                    ? "text-[var(--color-primary)] bg-[var(--color-primary)]/5"
+                    : "text-[var(--color-text-muted)] hover:text-[var(--color-text)] hover:bg-[var(--color-surface)]"
+                } ${hasError ? "!text-red-500" : ""}`}
+              >
+                <span>{tab.icon} {tab.label}</span>
+                {count > 0 && (
+                  <span className="ml-2 text-xs badge badge-success">{count}</span>
+                )}
+                {activeTab === tab.key && (
+                  <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-primary)]" />
+                )}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Editor */}
+        <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>
+          )}
+
+          <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}
+          />
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 p-5 border-t border-[var(--color-border)]">
+          <button onClick={onClose} className="btn btn-outline">
+            返回編輯
+          </button>
+          <button
+            onClick={handleGenerate}
+            disabled={isGenerating}
+            className="btn btn-accent text-lg px-8 py-3 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>
+            ) : (
+              "生成報告"
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { apiGet, apiPost } from "../../lib/api";
 import { ModelSelector } from "../ModelSelector";
+import { DataPreviewModal } from "./DataPreviewModal";
 
 interface Prompt {
   id: number;
@@ -16,6 +17,8 @@ interface PromptEditorProps {
   sessionId: number;
   onRunSummary: (model: string) => void;
   isGenerating: boolean;
+  parsedData: Record<string, unknown>;
+  onParsedDataUpdate: (dataType: string, data: unknown) => void;
 }
 
 export function PromptEditor({
@@ -24,6 +27,8 @@ export function PromptEditor({
   sessionId,
   onRunSummary,
   isGenerating,
+  parsedData,
+  onParsedDataUpdate,
 }: PromptEditorProps) {
   const [prompts, setPrompts] = useState<Prompt[]>([]);
   const [allPrompts, setAllPrompts] = useState<Prompt[]>([]);
@@ -32,6 +37,7 @@ export function PromptEditor({
   const [showOthers, setShowOthers] = useState(false);
   const [saving, setSaving] = useState(false);
   const [model, setModel] = useState("gpt-5.4");
+  const [showPreview, setShowPreview] = useState(false);
 
   useEffect(() => {
     loadPrompts();
@@ -164,23 +170,30 @@ export function PromptEditor({
         placeholder="輸入分析提示詞...使用 {questions}, {student_answers}, {teacher_answers} 作為資料佔位符"
       />
 
-      {/* Run summary button */}
+      {/* Preview button */}
       <div className="text-center">
         <button
-          onClick={() => onRunSummary(model)}
+          onClick={() => setShowPreview(true)}
           disabled={isGenerating || !promptContent.trim()}
           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>
-          ) : (
-            "執行摘要分析 →"
-          )}
+          預覽分析資料 →
         </button>
       </div>
+
+      {/* Data preview modal */}
+      {showPreview && (
+        <DataPreviewModal
+          parsedData={parsedData}
+          onParsedDataUpdate={onParsedDataUpdate}
+          onGenerate={() => {
+            setShowPreview(false);
+            onRunSummary(model);
+          }}
+          onClose={() => setShowPreview(false)}
+          isGenerating={isGenerating}
+        />
+      )}
     </div>
   );
 }