Add prompt editor and data preview back to Step 2

Step 2 now has: student checkboxes → prompt editor (save/load) →
"預覽分析資料" button → DataPreviewModal → "生成報告".

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

chatkit/frontend/src/App.tsx

@@ -6,6 +6,7 @@ import { StepIndicator } from "./components/StepIndicator";
 import { FileUploadPanel } from "./components/step1/FileUploadPanel";
 import { ParsedDataSummary } from "./components/step2/ParsedDataSummary";
 import { StudentSelector } from "./components/step2/StudentSelector";
+import { PromptEditor } from "./components/step2/PromptEditor";
 import { ReportViewer } from "./components/step3/ReportViewer";
 import { apiGet, apiPost, getToken, clearToken } from "./lib/api";
 
@@ -38,7 +39,9 @@ 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 [students, setStudents] = useState<StudentInfo[]>([]);
+  const [selectedIndices, setSelectedIndices] = useState<number[]>([]);
   const [reports, setReports] = useState<StudentReport[]>([]);
   const [isGenerating, setIsGenerating] = useState(false);
 
@@ -55,6 +58,15 @@ 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) {
@@ -82,7 +94,9 @@ export default function App() {
     setUser(null);
     setSessionId(null);
     setParsedData({});
+    setPromptContent("");
     setStudents([]);
+    setSelectedIndices([]);
     setReports([]);
     setCurrentStep(1);
   };
@@ -96,10 +110,9 @@ export default function App() {
   }, []);
 
   // Sequential per-student report generation
-  const handleGenerateReports = useCallback(async (selectedIndices: number[], model: string) => {
-    if (!sessionId) return;
+  const handleGenerateReports = useCallback(async (model: string) => {
+    if (!sessionId || selectedIndices.length === 0) return;
 
-    // Initialize report slots
     const initial: StudentReport[] = selectedIndices.map((idx) => {
       const s = students.find((s) => s.index === idx);
       return {
@@ -113,11 +126,9 @@ export default function App() {
     setIsGenerating(true);
     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))
       );
@@ -148,13 +159,12 @@ export default function App() {
     }
 
     setIsGenerating(false);
-  }, [sessionId, students]);
+  }, [sessionId, selectedIndices, 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>
@@ -182,7 +192,6 @@ ${doneReports
     if (step <= currentStep) setCurrentStep(step);
   };
 
-  // Loading state
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-[var(--color-background)]">
@@ -191,7 +200,6 @@ ${doneReports
     );
   }
 
-  // Invite code gate
   if (!invited) {
     return (
       <InviteGate
@@ -204,7 +212,6 @@ ${doneReports
     );
   }
 
-  // Login gate
   if (!user) {
     return <LoginForm onLogin={setUser} />;
   }
@@ -242,19 +249,34 @@ ${doneReports
             <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} />
+
               {students.length > 0 ? (
-                <StudentSelector
-                  students={students}
-                  onGenerate={handleGenerateReports}
-                  isGenerating={isGenerating}
-                />
+                <>
+                  <StudentSelector
+                    students={students}
+                    onSelectionChange={setSelectedIndices}
+                  />
+                  {sessionId && (
+                    <PromptEditor
+                      promptContent={promptContent}
+                      onPromptChange={setPromptContent}
+                      sessionId={sessionId}
+                      onGenerate={handleGenerateReports}
+                      isGenerating={isGenerating}
+                      selectedCount={selectedIndices.length}
+                      parsedData={parsedData}
+                      onParsedDataUpdate={handleParsedDataUpdate}
+                    />
+                  )}
+                </>
               ) : (
                 <div className="card p-8 text-center">
                   <p className="text-[var(--color-text-muted)]">

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

@@ -15,8 +15,9 @@ interface PromptEditorProps {
   promptContent: string;
   onPromptChange: (content: string) => void;
   sessionId: number;
-  onRunSummary: (model: string) => void;
+  onGenerate: (model: string) => void;
   isGenerating: boolean;
+  selectedCount: number;
   parsedData: Record<string, unknown>;
   onParsedDataUpdate: (dataType: string, data: unknown) => void;
 }
@@ -25,8 +26,9 @@ export function PromptEditor({
   promptContent,
   onPromptChange,
   sessionId,
-  onRunSummary,
+  onGenerate,
   isGenerating,
+  selectedCount,
   parsedData,
   onParsedDataUpdate,
 }: PromptEditorProps) {
@@ -165,19 +167,21 @@ export function PromptEditor({
       <textarea
         value={promptContent}
         onChange={(e) => onPromptChange(e.target.value)}
-        rows={12}
+        rows={10}
         className="input !rounded-xl font-mono text-sm leading-relaxed resize-y"
-        placeholder="輸入分析提示詞...使用 {questions}, {student_answers}, {teacher_answers} 作為資料佔位符"
+        placeholder="輸入分析提示詞..."
       />
 
       {/* Preview button */}
       <div className="text-center">
         <button
           onClick={() => setShowPreview(true)}
-          disabled={isGenerating || !promptContent.trim()}
+          disabled={isGenerating || selectedCount === 0}
           className="btn btn-accent text-lg px-8 py-4 disabled:opacity-50 disabled:cursor-not-allowed"
         >
-          預覽分析資料 →
+          {selectedCount === 0
+            ? "請先選擇學生"
+            : `預覽分析資料（${selectedCount} 位學生）→`}
         </button>
       </div>
 
@@ -188,7 +192,7 @@ export function PromptEditor({
           onParsedDataUpdate={onParsedDataUpdate}
           onGenerate={() => {
             setShowPreview(false);
-            onRunSummary(model);
+            onGenerate(model);
           }}
           onClose={() => setShowPreview(false)}
           isGenerating={isGenerating}

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

@@ -1,5 +1,4 @@
-import { useState } from "react";
-import { ModelSelector } from "../ModelSelector";
+import { useState, useEffect } from "react";
 
 interface Student {
   index: number;
@@ -9,19 +8,20 @@ interface Student {
 
 interface StudentSelectorProps {
   students: Student[];
-  onGenerate: (selectedIndices: number[], model: string) => void;
-  isGenerating: boolean;
+  onSelectionChange: (selectedIndices: number[]) => void;
 }
 
 export function StudentSelector({
   students,
-  onGenerate,
-  isGenerating,
+  onSelectionChange,
 }: StudentSelectorProps) {
   const [selected, setSelected] = useState<Set<number>>(
     () => new Set(students.map((s) => s.index))
   );
-  const [model, setModel] = useState("gpt-5.4");
+
+  useEffect(() => {
+    onSelectionChange(Array.from(selected).sort((a, b) => a - b));
+  }, [selected]);
 
   const toggleAll = () => {
     if (selected.size === students.length) {
@@ -46,42 +46,40 @@ export function StudentSelector({
   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 className="space-y-3">
+      <div className="flex items-center gap-3">
+        <h3 className="font-display text-sm font-semibold text-[var(--color-text)]">
+          選擇學生
+        </h3>
+        <button
+          onClick={toggleAll}
+          className="btn btn-outline text-xs !py-1 !px-3"
+        >
+          {allSelected ? "取消全選" : "全選"}
+        </button>
+        <span className="text-sm text-[var(--color-text-muted)]">
+          已選 {selected.size} / {students.length} 位學生
+        </span>
       </div>
 
-      {/* Student list */}
-      <div className="card p-4 max-h-[50vh] overflow-y-auto">
-        <div className="grid gap-2">
+      <div className="card p-4 max-h-64 overflow-y-auto">
+        <div className="grid gap-1.5 sm:grid-cols-2">
           {students.map((s) => (
             <label
               key={s.index}
-              className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-colors ${
+              className={`flex items-center gap-3 px-3 py-2 rounded-lg 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"
+                  ? "bg-[var(--color-primary)]/10"
+                  : "hover:bg-[var(--color-surface)]"
               }`}
             >
               <input
                 type="checkbox"
                 checked={selected.has(s.index)}
                 onChange={() => toggle(s.index)}
-                className="w-5 h-5 rounded accent-[var(--color-primary)]"
+                className="w-4 h-4 rounded accent-[var(--color-primary)]"
               />
-              <span className="font-semibold text-[var(--color-text)]">
+              <span className="text-sm font-medium text-[var(--color-text)]">
                 {s.name}
               </span>
               {s.id && (
@@ -93,24 +91,6 @@ export function StudentSelector({
           ))}
         </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>
   );
 }