feat: Add grading progress modal with assistant info

- Create GradingModal component showing AI grading progress
- Display current assistant being used with details
- Show animated progress bar synced with step progression
- Progress bar moves slower (5s per step, 0.5-1% increments)
- Include 6-step process visualization with animations
- Show estimated time and helpful information
- Support both zh-TW and English languages
- Auto-show when grading starts, auto-hide when complete

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import type { GradeResult, Option, OptionsResponse, MatchedAssistant } from './t
 import { gradingApi } from './api/grading';
 import AssistantGuide from './AssistantGuide';
 import PasswordProtection from './components/PasswordProtection';
+import GradingModal from './components/GradingModal';
 
 function App() {
   const [isPasswordVerified, setIsPasswordVerified] = useState<boolean>(false);
@@ -205,8 +206,20 @@ function App() {
     return <PasswordProtection onPasswordCorrect={handlePasswordCorrect} />;
   }
 
+  // 獲取當前選中的機器人資訊
+  const currentAssistant = matchedAssistants.find(
+    a => a.assistant_id === selectedAssistantId
+  );
+
   return (
     <div className="App">
+      {/* 批改進度 Modal */}
+      <GradingModal
+        isOpen={loading}
+        assistant={currentAssistant || null}
+        language={selectedLanguage}
+      />
+
       <header className="app-header">
         <div className="header-row-1">
           <h1>AI 批改平台</h1>

frontend/src/components/GradingModal.css

@@ -0,0 +1,224 @@
+.grading-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.grading-modal {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.grading-modal-header {
+  padding: 24px 32px;
+  border-bottom: 2px solid #f0f0f0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.grading-modal-header h2 {
+  margin: 0;
+  color: white;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.grading-modal-body {
+  padding: 32px;
+}
+
+/* 機器人資訊 */
+.assistant-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  border-radius: 12px;
+  margin-bottom: 24px;
+}
+
+.assistant-icon {
+  font-size: 48px;
+  line-height: 1;
+}
+
+.assistant-details h3 {
+  margin: 0 0 4px 0;
+  font-size: 20px;
+  color: #2c3e50;
+}
+
+.assistant-subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: #7f8c8d;
+}
+
+/* 進度條 */
+.progress-section {
+  margin-bottom: 24px;
+}
+
+.progress-bar-container {
+  width: 100%;
+  height: 12px;
+  background-color: #e0e0e0;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  border-radius: 6px;
+  transition: width 0.5s ease;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+.progress-text {
+  text-align: center;
+  font-size: 18px;
+  font-weight: 600;
+  color: #667eea;
+}
+
+/* 步驟列表 */
+.steps-section {
+  background: #f8f9fa;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 24px;
+}
+
+.step-item {
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border-radius: 8px;
+  font-size: 15px;
+  color: #95a5a6;
+  transition: all 0.3s ease;
+}
+
+.step-item.active {
+  background: #fff;
+  color: #667eea;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
+  animation: highlight 0.5s ease-in;
+}
+
+@keyframes highlight {
+  0% {
+    transform: translateX(-10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.step-item.completed {
+  color: #27ae60;
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+
+/* 提示資訊 */
+.grading-info {
+  background: #fff3cd;
+  border-left: 4px solid #ffc107;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.info-text {
+  margin: 0 0 8px 0;
+  font-size: 15px;
+  color: #856404;
+  font-weight: 500;
+}
+
+.info-subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: #856404;
+  opacity: 0.8;
+}
+
+/* 響應式設計 */
+@media (max-width: 768px) {
+  .grading-modal {
+    width: 95%;
+    max-height: 95vh;
+  }
+
+  .grading-modal-header {
+    padding: 20px 24px;
+  }
+
+  .grading-modal-header h2 {
+    font-size: 20px;
+  }
+
+  .grading-modal-body {
+    padding: 24px;
+  }
+
+  .assistant-icon {
+    font-size: 36px;
+  }
+
+  .assistant-details h3 {
+    font-size: 18px;
+  }
+
+  .step-item {
+    font-size: 14px;
+    padding: 10px 12px;
+  }
+}

frontend/src/components/GradingModal.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useState } from 'react';
+import './GradingModal.css';
+import type { MatchedAssistant } from '../types/index';
+
+interface GradingModalProps {
+  isOpen: boolean;
+  assistant: MatchedAssistant | null;
+  language: string;
+}
+
+const GradingModal = ({ isOpen, assistant, language }: GradingModalProps) => {
+  const [progress, setProgress] = useState(0);
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const steps = language === 'zh-TW' ? [
+    '📖 讀取文章內容...',
+    '🤖 啟動 AI 批改引擎...',
+    '📝 分析文章結構...',
+    '🔍 檢查文法與用詞...',
+    '💡 生成改進建議...',
+    '✨ 整理批改結果...',
+  ] : [
+    '📖 Reading your article...',
+    '🤖 Starting AI grading engine...',
+    '📝 Analyzing article structure...',
+    '🔍 Checking grammar and wording...',
+    '💡 Generating suggestions...',
+    '✨ Finalizing results...',
+  ];
+
+  useEffect(() => {
+    if (!isOpen) {
+      setProgress(0);
+      setCurrentStep(0);
+      return;
+    }
+
+    // 每個步驟的目標進度
+    const progressPerStep = 100 / steps.length;
+
+    // 更新步驟（每 5 秒一個步驟）
+    const stepInterval = setInterval(() => {
+      setCurrentStep(prev => {
+        if (prev >= steps.length - 1) return prev;
+        return prev + 1;
+      });
+    }, 5000);
+
+    // 進度條跟隨步驟緩慢增加
+    const progressInterval = setInterval(() => {
+      setProgress(prev => {
+        const targetProgress = (currentStep + 1) * progressPerStep;
+        // 如果還沒到當前步驟的目標進度，緩慢增加
+        if (prev < targetProgress - 2) {
+          return prev + 0.5 + Math.random() * 0.5; // 每次增加 0.5-1%
+        }
+        // 接近目標時停止
+        return Math.min(prev, 95);
+      });
+    }, 100);
+
+    return () => {
+      clearInterval(progressInterval);
+      clearInterval(stepInterval);
+    };
+  }, [isOpen, steps.length, currentStep]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="grading-modal-overlay">
+      <div className="grading-modal">
+        <div className="grading-modal-header">
+          <h2>{language === 'zh-TW' ? 'AI 批改中' : 'AI Grading in Progress'}</h2>
+        </div>
+
+        <div className="grading-modal-body">
+          {/* 機器人資訊 */}
+          {assistant && (
+            <div className="assistant-info">
+              <div className="assistant-icon">🤖</div>
+              <div className="assistant-details">
+                <h3>{assistant.name}</h3>
+                <p className="assistant-subtitle">
+                  {language === 'zh-TW' ? '專業 AI 批改助手' : 'Professional AI Grading Assistant'}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* 進度條 */}
+          <div className="progress-section">
+            <div className="progress-bar-container">
+              <div
+                className="progress-bar-fill"
+                style={{ width: `${Math.min(progress, 100)}%` }}
+              />
+            </div>
+            <div className="progress-text">
+              {Math.round(Math.min(progress, 100))}%
+            </div>
+          </div>
+
+          {/* 當前步驟 */}
+          <div className="steps-section">
+            {steps.map((step, index) => (
+              <div
+                key={index}
+                className={`step-item ${index === currentStep ? 'active' : ''} ${index < currentStep ? 'completed' : ''}`}
+              >
+                {index < currentStep ? '✓' : index === currentStep ? '⏳' : '○'} {step}
+              </div>
+            ))}
+          </div>
+
+          {/* 提示資訊 */}
+          <div className="grading-info">
+            <p className="info-text">
+              {language === 'zh-TW'
+                ? '⏱️ AI 批改通常需要 30-60 秒，請耐心等待...'
+                : '⏱️ AI grading usually takes 30-60 seconds, please wait...'}
+            </p>
+            <p className="info-subtitle">
+              {language === 'zh-TW'
+                ? '💡 批改完成後會自動顯示詳細結果'
+                : '💡 Results will be displayed automatically when complete'}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GradingModal;