feat: add batch processing for multiple file uploads

- Add BatchState management in taskStore with progress tracking
- Implement batch processing service with concurrency control
  - Direct Track: max 5 parallel tasks
  - OCR Track: sequential processing (GPU VRAM limit)
- Refactor ProcessingPage to support batch mode with BatchProcessingPanel
- Update UploadPage to initialize batch state for multi-file uploads
- Add i18n translations for batch processing (zh-TW, en-US)

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

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

frontend/src/components/BatchProcessingPanel.tsx

@@ -0,0 +1,435 @@
+/**
+ * BatchProcessingPanel - Batch processing UI component
+ *
+ * Displays batch processing settings, task list, and progress for multi-file processing.
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Progress } from '@/components/ui/progress'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { useToast } from '@/components/ui/toast'
+import {
+  Play,
+  Pause,
+  CheckCircle,
+  XCircle,
+  FileText,
+  Loader2,
+  Settings,
+  ListChecks,
+  Zap,
+  Eye,
+  RotateCcw,
+} from 'lucide-react'
+import {
+  useBatchState,
+  useBatchProgress,
+  useBatchOptions,
+  useTaskStore,
+  type BatchStrategy,
+} from '@/store/taskStore'
+import { analyzeBatchTasks, processBatch, cancelBatch } from '@/services/batchProcessing'
+import type { LayoutModel, PreprocessingMode } from '@/types/apiV2'
+
+export default function BatchProcessingPanel() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { toast } = useToast()
+
+  const batchState = useBatchState()
+  const progress = useBatchProgress()
+  const batchOptions = useBatchOptions()
+  const { setBatchOptions, clearBatch } = useTaskStore()
+
+  const [isAnalyzing, setIsAnalyzing] = useState(false)
+  const [isProcessing, setIsProcessing] = useState(false)
+
+  // Calculate progress percentage
+  const progressPercentage =
+    progress.total > 0 ? Math.round(((progress.completed + progress.failed) / progress.total) * 100) : 0
+
+  // Analyze all tasks when component mounts
+  useEffect(() => {
+    const runAnalysis = async () => {
+      if (batchState.taskIds.length > 0 && !isAnalyzing) {
+        // Check if any task needs analysis
+        const needsAnalysis = batchState.taskIds.some(
+          (taskId) => !batchState.taskStates[taskId]?.recommendedTrack
+        )
+        if (needsAnalysis) {
+          setIsAnalyzing(true)
+          try {
+            await analyzeBatchTasks(batchState.taskIds)
+          } finally {
+            setIsAnalyzing(false)
+          }
+        }
+      }
+    }
+    runAnalysis()
+  }, [batchState.taskIds.length]) // Only run once when tasks are loaded
+
+  // Handle start processing
+  const handleStartProcessing = useCallback(async () => {
+    setIsProcessing(true)
+    try {
+      await processBatch()
+      toast({
+        title: t('batch.processingComplete', { defaultValue: '批次處理完成' }),
+        description: t('batch.processingCompleteDesc', {
+          defaultValue: `已完成 ${progress.completed} 個任務`,
+          completed: progress.completed,
+        }),
+        variant: 'success',
+      })
+    } catch (error) {
+      toast({
+        title: t('batch.processingError', { defaultValue: '批次處理錯誤' }),
+        description: error instanceof Error ? error.message : '未知錯誤',
+        variant: 'destructive',
+      })
+    } finally {
+      setIsProcessing(false)
+    }
+  }, [progress.completed, t, toast])
+
+  // Handle cancel processing
+  const handleCancelProcessing = useCallback(async () => {
+    try {
+      await cancelBatch()
+      toast({
+        title: t('batch.processingCancelled', { defaultValue: '批次處理已取消' }),
+        variant: 'default',
+      })
+    } catch (error) {
+      console.error('Cancel error:', error)
+    }
+  }, [t, toast])
+
+  // Handle clear batch and go to upload
+  const handleClearAndUpload = useCallback(() => {
+    clearBatch()
+    navigate('/upload')
+  }, [clearBatch, navigate])
+
+  // Handle view results
+  const handleViewResults = useCallback(() => {
+    navigate('/tasks')
+  }, [navigate])
+
+  // Get task status icon
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'completed':
+        return <CheckCircle className="w-4 h-4 text-success" />
+      case 'processing':
+        return <Loader2 className="w-4 h-4 text-primary animate-spin" />
+      case 'failed':
+        return <XCircle className="w-4 h-4 text-destructive" />
+      default:
+        return <FileText className="w-4 h-4 text-muted-foreground" />
+    }
+  }
+
+  // Get status badge
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'completed':
+        return <Badge variant="success">{t('processing.completed', { defaultValue: '已完成' })}</Badge>
+      case 'processing':
+        return <Badge variant="default">{t('processing.processing', { defaultValue: '處理中' })}</Badge>
+      case 'failed':
+        return <Badge variant="destructive">{t('processing.failed', { defaultValue: '失敗' })}</Badge>
+      default:
+        return <Badge variant="secondary">{t('processing.pending', { defaultValue: '等待中' })}</Badge>
+    }
+  }
+
+  // Get track badge
+  const getTrackBadge = (track: string | null) => {
+    if (!track) return null
+    const label = track === 'direct' ? 'Direct' : track === 'ocr' ? 'OCR' : track.toUpperCase()
+    const variant = track === 'direct' ? 'outline' : 'secondary'
+    return <Badge variant={variant}>{label}</Badge>
+  }
+
+  const allCompleted = progress.completed + progress.failed === progress.total && progress.total > 0
+  const canStart = !isAnalyzing && !isProcessing && !batchState.isProcessing && progress.pending > 0
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="page-header">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="page-title">{t('batch.title', { defaultValue: '批次處理' })}</h1>
+            <p className="text-muted-foreground mt-1">
+              {t('batch.subtitle', {
+                defaultValue: '共 {{count}} 個檔案',
+                count: progress.total,
+              })}
+            </p>
+          </div>
+          {allCompleted && (
+            <div className="flex items-center gap-2 text-success">
+              <CheckCircle className="w-6 h-6" />
+              <span className="font-semibold">
+                {t('batch.allComplete', { defaultValue: '全部完成' })}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Overall Progress */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-primary/10 rounded-lg">
+                <ListChecks className="w-5 h-5 text-primary" />
+              </div>
+              <CardTitle>{t('batch.progress', { defaultValue: '批次進度' })}</CardTitle>
+            </div>
+            <div className="flex gap-2">
+              {progress.completed > 0 && (
+                <Badge variant="success">
+                  {t('batch.completed', { defaultValue: '已完成' })}: {progress.completed}
+                </Badge>
+              )}
+              {progress.processing > 0 && (
+                <Badge variant="default">
+                  {t('batch.processing', { defaultValue: '處理中' })}: {progress.processing}
+                </Badge>
+              )}
+              {progress.failed > 0 && (
+                <Badge variant="destructive">
+                  {t('batch.failed', { defaultValue: '失敗' })}: {progress.failed}
+                </Badge>
+              )}
+              {progress.pending > 0 && (
+                <Badge variant="secondary">
+                  {t('batch.pending', { defaultValue: '等待中' })}: {progress.pending}
+                </Badge>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Progress bar */}
+          <div>
+            <div className="flex justify-between text-sm mb-3">
+              <span className="text-muted-foreground font-medium">
+                {t('batch.overallProgress', { defaultValue: '整體進度' })}
+              </span>
+              <span className="font-bold text-xl text-primary">{progressPercentage}%</span>
+            </div>
+            <Progress value={progressPercentage} max={100} className="h-4" />
+          </div>
+
+          {/* Action buttons */}
+          <div className="flex gap-3 pt-4 border-t border-border">
+            {!allCompleted && canStart && (
+              <Button onClick={handleStartProcessing} className="gap-2" size="lg">
+                <Play className="w-4 h-4" />
+                {t('batch.startProcessing', { defaultValue: '開始批次處理' })}
+              </Button>
+            )}
+
+            {(isProcessing || batchState.isProcessing) && (
+              <Button onClick={handleCancelProcessing} variant="destructive" className="gap-2" size="lg">
+                <Pause className="w-4 h-4" />
+                {t('batch.cancelProcessing', { defaultValue: '取消處理' })}
+              </Button>
+            )}
+
+            {allCompleted && (
+              <>
+                <Button onClick={handleViewResults} className="gap-2" size="lg">
+                  <Eye className="w-4 h-4" />
+                  {t('batch.viewResults', { defaultValue: '查看結果' })}
+                </Button>
+                <Button onClick={handleClearAndUpload} variant="outline" className="gap-2" size="lg">
+                  <RotateCcw className="w-4 h-4" />
+                  {t('batch.uploadMore', { defaultValue: '上傳更多' })}
+                </Button>
+              </>
+            )}
+
+            {isAnalyzing && (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                <span>{t('batch.analyzing', { defaultValue: '分析文件中...' })}</span>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Batch Settings */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <Settings className="w-5 h-5 text-primary" />
+            </div>
+            <CardTitle>{t('batch.settings', { defaultValue: '批次設定' })}</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Processing Strategy */}
+          <div className="space-y-2">
+            <label className="text-sm font-medium">
+              {t('batch.strategy', { defaultValue: '處理策略' })}
+            </label>
+            <div className="grid grid-cols-3 gap-2">
+              {[
+                { value: 'auto', label: t('batch.strategyAuto', { defaultValue: '自動判斷' }), desc: '系統自動選擇最佳處理方式' },
+                { value: 'force_ocr', label: t('batch.strategyOcr', { defaultValue: '全部 OCR' }), desc: '強制使用 OCR 處理' },
+                { value: 'force_direct', label: t('batch.strategyDirect', { defaultValue: '全部 Direct' }), desc: '強制使用 Direct 處理' },
+              ].map((option) => (
+                <button
+                  key={option.value}
+                  onClick={() => setBatchOptions({ strategy: option.value as BatchStrategy })}
+                  disabled={isProcessing || batchState.isProcessing}
+                  className={`p-3 rounded-lg border text-left transition-colors ${
+                    batchOptions.strategy === option.value
+                      ? 'border-primary bg-primary/5'
+                      : 'border-border hover:border-primary/50'
+                  } disabled:opacity-50 disabled:cursor-not-allowed`}
+                >
+                  <div className="font-medium text-sm">{option.label}</div>
+                  <div className="text-xs text-muted-foreground mt-1">{option.desc}</div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Layout Model (for OCR) */}
+          {batchOptions.strategy !== 'force_direct' && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                {t('batch.layoutModel', { defaultValue: 'Layout Model (OCR)' })}
+              </label>
+              <div className="grid grid-cols-3 gap-2">
+                {[
+                  { value: 'chinese', label: 'Chinese', desc: '中文文件最佳' },
+                  { value: 'default', label: 'Default', desc: '英文學術論文' },
+                  { value: 'cdla', label: 'CDLA', desc: '中文版面分析' },
+                ].map((option) => (
+                  <button
+                    key={option.value}
+                    onClick={() => setBatchOptions({ layoutModel: option.value as LayoutModel })}
+                    disabled={isProcessing || batchState.isProcessing}
+                    className={`p-3 rounded-lg border text-left transition-colors ${
+                      batchOptions.layoutModel === option.value
+                        ? 'border-primary bg-primary/5'
+                        : 'border-border hover:border-primary/50'
+                    } disabled:opacity-50 disabled:cursor-not-allowed`}
+                  >
+                    <div className="font-medium text-sm">{option.label}</div>
+                    <div className="text-xs text-muted-foreground mt-1">{option.desc}</div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Preprocessing Mode (for OCR) */}
+          {batchOptions.strategy !== 'force_direct' && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                {t('batch.preprocessingMode', { defaultValue: '預處理模式 (OCR)' })}
+              </label>
+              <div className="grid grid-cols-3 gap-2">
+                {[
+                  { value: 'auto', label: t('batch.preprocessAuto', { defaultValue: '自動' }), desc: '自動分析並套用' },
+                  { value: 'manual', label: t('batch.preprocessManual', { defaultValue: '手動' }), desc: '使用預設配置' },
+                  { value: 'disabled', label: t('batch.preprocessDisabled', { defaultValue: '停用' }), desc: '不進行預處理' },
+                ].map((option) => (
+                  <button
+                    key={option.value}
+                    onClick={() => setBatchOptions({ preprocessingMode: option.value as PreprocessingMode })}
+                    disabled={isProcessing || batchState.isProcessing}
+                    className={`p-3 rounded-lg border text-left transition-colors ${
+                      batchOptions.preprocessingMode === option.value
+                        ? 'border-primary bg-primary/5'
+                        : 'border-border hover:border-primary/50'
+                    } disabled:opacity-50 disabled:cursor-not-allowed`}
+                  >
+                    <div className="font-medium text-sm">{option.label}</div>
+                    <div className="text-xs text-muted-foreground mt-1">{option.desc}</div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Concurrency Info */}
+          <div className="p-3 bg-muted/30 rounded-lg border border-border">
+            <div className="flex items-center gap-2 text-sm">
+              <Zap className="w-4 h-4 text-primary" />
+              <span className="text-muted-foreground">
+                {t('batch.concurrencyInfo', {
+                  defaultValue: 'Direct Track 最多 5 並行處理，OCR Track 依序處理 (GPU 限制)',
+                })}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Task List */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <FileText className="w-5 h-5 text-primary" />
+            </div>
+            <CardTitle>{t('batch.taskList', { defaultValue: '任務列表' })}</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            {batchState.taskIds.map((taskId) => {
+              const taskState = batchState.taskStates[taskId]
+              if (!taskState) return null
+
+              return (
+                <div
+                  key={taskId}
+                  className="flex items-center gap-4 p-3 rounded-lg border border-border hover:bg-muted/30 transition-colors"
+                >
+                  {/* Status icon */}
+                  <div className="flex-shrink-0">{getStatusIcon(taskState.status)}</div>
+
+                  {/* File info */}
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-foreground truncate">
+                      {taskState.filename || taskId}
+                    </p>
+                    {taskState.error && (
+                      <p className="text-xs text-destructive truncate">{taskState.error}</p>
+                    )}
+                  </div>
+
+                  {/* Track badge */}
+                  <div className="flex-shrink-0">
+                    {getTrackBadge(taskState.track || taskState.recommendedTrack)}
+                  </div>
+
+                  {/* Status badge */}
+                  <div className="flex-shrink-0">{getStatusBadge(taskState.status)}</div>
+                </div>
+              )
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

frontend/src/i18n/locales/en-US.json

@@ -40,7 +40,8 @@
     "fileCount": "{{count}} file(s) selected",
     "clearAll": "Clear All",
     "removeFile": "Remove",
-    "selectedFiles": "Selected Files"
+    "selectedFiles": "Selected Files",
+    "filesUploaded": "Successfully uploaded {{count}} file(s)"
   },
   "processing": {
     "title": "OCR Processing",
@@ -234,5 +235,37 @@
     "title": "Translation",
     "comingSoon": "Coming Soon",
     "description": "Document translation feature is under development"
+  },
+  "batch": {
+    "title": "Batch Processing",
+    "subtitle": "{{count}} files in total",
+    "progress": "Batch Progress",
+    "overallProgress": "Overall Progress",
+    "settings": "Batch Settings",
+    "taskList": "Task List",
+    "strategy": "Processing Strategy",
+    "strategyAuto": "Auto Detect",
+    "strategyOcr": "All OCR",
+    "strategyDirect": "All Direct",
+    "layoutModel": "Layout Model (OCR)",
+    "preprocessingMode": "Preprocessing Mode (OCR)",
+    "preprocessAuto": "Auto",
+    "preprocessManual": "Manual",
+    "preprocessDisabled": "Disabled",
+    "startProcessing": "Start Batch Processing",
+    "cancelProcessing": "Cancel Processing",
+    "viewResults": "View Results",
+    "uploadMore": "Upload More",
+    "analyzing": "Analyzing documents...",
+    "allComplete": "All Complete",
+    "completed": "Completed",
+    "processing": "Processing",
+    "failed": "Failed",
+    "pending": "Pending",
+    "processingComplete": "Batch Processing Complete",
+    "processingCompleteDesc": "Completed {{completed}} task(s)",
+    "processingError": "Batch Processing Error",
+    "processingCancelled": "Batch Processing Cancelled",
+    "concurrencyInfo": "Direct Track: max 5 parallel, OCR Track: sequential (GPU limitation)"
   }
 }

frontend/src/i18n/locales/zh-TW.json

@@ -40,7 +40,8 @@
     "fileCount": "已選擇 {{count}} 個檔案",
     "clearAll": "清除全部",
     "removeFile": "移除",
-    "selectedFiles": "已選擇的檔案"
+    "selectedFiles": "已選擇的檔案",
+    "filesUploaded": "成功上傳 {{count}} 個檔案"
   },
   "processing": {
     "title": "OCR 處理中",
@@ -234,5 +235,37 @@
     "title": "翻譯功能",
     "comingSoon": "即將推出",
     "description": "文件翻譯功能正在開發中，敬請期待"
+  },
+  "batch": {
+    "title": "批次處理",
+    "subtitle": "共 {{count}} 個檔案",
+    "progress": "批次進度",
+    "overallProgress": "整體進度",
+    "settings": "批次設定",
+    "taskList": "任務列表",
+    "strategy": "處理策略",
+    "strategyAuto": "自動判斷",
+    "strategyOcr": "全部 OCR",
+    "strategyDirect": "全部 Direct",
+    "layoutModel": "版面模型 (OCR)",
+    "preprocessingMode": "預處理模式 (OCR)",
+    "preprocessAuto": "自動",
+    "preprocessManual": "手動",
+    "preprocessDisabled": "停用",
+    "startProcessing": "開始批次處理",
+    "cancelProcessing": "取消處理",
+    "viewResults": "查看結果",
+    "uploadMore": "上傳更多",
+    "analyzing": "分析文件中...",
+    "allComplete": "全部完成",
+    "completed": "已完成",
+    "processing": "處理中",
+    "failed": "失敗",
+    "pending": "等待中",
+    "processingComplete": "批次處理完成",
+    "processingCompleteDesc": "已完成 {{completed}} 個任務",
+    "processingError": "批次處理錯誤",
+    "processingCancelled": "批次處理已取消",
+    "concurrencyInfo": "Direct Track 最多 5 並行處理，OCR Track 依序處理 (GPU 限制)"
   }
 }

frontend/src/pages/ProcessingPage.tsx

@@ -14,11 +14,30 @@ import PreprocessingSettings from '@/components/PreprocessingSettings'
 import PreprocessingPreview from '@/components/PreprocessingPreview'
 import ProcessingTrackSelector from '@/components/ProcessingTrackSelector'
 import TaskNotFound from '@/components/TaskNotFound'
+import BatchProcessingPanel from '@/components/BatchProcessingPanel'
 import { useTaskValidation } from '@/hooks/useTaskValidation'
-import { useTaskStore, useProcessingState } from '@/store/taskStore'
+import { useTaskStore, useProcessingState, useIsBatchMode } from '@/store/taskStore'
 import type { LayoutModel, ProcessingOptions, PreprocessingMode, PreprocessingConfig, ProcessingTrack } from '@/types/apiV2'
 
+/**
+ * ProcessingPage - Main entry point
+ * Routes to batch or single task processing based on state
+ */
 export default function ProcessingPage() {
+  const isBatchMode = useIsBatchMode()
+
+  // Route to appropriate component
+  if (isBatchMode) {
+    return <BatchProcessingPanel />
+  }
+
+  return <SingleTaskProcessing />
+}
+
+/**
+ * SingleTaskProcessing - Original single task processing UI
+ */
+function SingleTaskProcessing() {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const { toast } = useToast()

frontend/src/pages/UploadPage.tsx

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { useToast } from '@/components/ui/toast'
 import { useUploadStore } from '@/store/uploadStore'
+import { useTaskStore } from '@/store/taskStore'
 import { apiClientV2 } from '@/services/apiV2'
 import { FileText, X, Upload, Trash2, CheckCircle2, ArrowRight } from 'lucide-react'
 
@@ -16,6 +17,8 @@ export default function UploadPage() {
   const { toast } = useToast()
   const [selectedFiles, setSelectedFiles] = useState<File[]>([])
   const { setBatchId, setUploadProgress } = useUploadStore()
+  const initBatch = useTaskStore((state) => state.initBatch)
+  const setCurrentTask = useTaskStore((state) => state.setCurrentTask)
 
   const uploadMutation = useMutation({
     mutationFn: async (files: File[]) => {
@@ -33,9 +36,22 @@ export default function UploadPage() {
       if (tasks.length > 0) {
         setBatchId(tasks[0].task_id as unknown as number)
       }
+
+      // Initialize batch state with all uploaded tasks
+      if (tasks.length > 1) {
+        // Multiple files: use batch mode
+        initBatch(tasks.map(t => ({
+          taskId: t.task_id,
+          filename: t.filename,
+        })))
+      } else if (tasks.length === 1) {
+        // Single file: use single task mode
+        setCurrentTask(tasks[0].task_id, tasks[0].filename)
+      }
+
       toast({
         title: t('upload.uploadSuccess'),
-        description: `成功上傳 ${tasks.length} 個檔案`,
+        description: t('upload.filesUploaded', { count: tasks.length }),
         variant: 'success',
       })
       navigate('/processing')

frontend/src/services/batchProcessing.ts

@@ -0,0 +1,324 @@
+/**
+ * Batch Processing Service
+ *
+ * Handles batch processing of multiple tasks with parallel execution for Direct Track
+ * and queue processing for OCR Track (GPU VRAM limitation).
+ *
+ * Concurrency limits:
+ * - Direct Track: Max 5 concurrent tasks (CPU-bound)
+ * - OCR Track: Max 1 concurrent task (GPU VRAM limited)
+ */
+
+import { apiClientV2 } from '@/services/apiV2'
+import { useTaskStore, type BatchTaskState, type BatchStrategy } from '@/store/taskStore'
+import type { ProcessingTrack, ProcessingOptions } from '@/types/apiV2'
+
+// Concurrency limits
+const DIRECT_TRACK_CONCURRENCY = 5
+const OCR_TRACK_CONCURRENCY = 1
+
+// Polling interval for task status (ms)
+const POLL_INTERVAL = 2000
+
+/**
+ * Analyze all tasks in batch to determine recommended processing track
+ */
+export async function analyzeBatchTasks(taskIds: string[]): Promise<void> {
+  const { updateBatchTaskState, setBatchAnalyzing } = useTaskStore.getState()
+
+  setBatchAnalyzing(true)
+
+  try {
+    // Analyze all tasks in parallel (analysis is lightweight)
+    const analysisPromises = taskIds.map(async (taskId) => {
+      try {
+        const result = await apiClientV2.analyzeDocument(taskId)
+        updateBatchTaskState(taskId, {
+          recommendedTrack: result.recommended_track,
+          analysisResult: result,
+        })
+        return { taskId, success: true, result }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Analysis failed'
+        updateBatchTaskState(taskId, {
+          error: errorMessage,
+        })
+        return { taskId, success: false, error: errorMessage }
+      }
+    })
+
+    await Promise.all(analysisPromises)
+  } finally {
+    setBatchAnalyzing(false)
+  }
+}
+
+/**
+ * Determine the actual track to use based on strategy and recommendation
+ */
+function determineTrack(
+  strategy: BatchStrategy,
+  recommendedTrack: ProcessingTrack | null
+): ProcessingTrack {
+  switch (strategy) {
+    case 'force_ocr':
+      return 'ocr'
+    case 'force_direct':
+      return 'direct'
+    case 'auto':
+    default:
+      // Use recommended track from analysis, fallback to 'auto'
+      return recommendedTrack || 'auto'
+  }
+}
+
+/**
+ * Build processing options for a task
+ */
+function buildProcessingOptions(
+  track: ProcessingTrack,
+  batchOptions: {
+    layoutModel: 'chinese' | 'default' | 'cdla'
+    preprocessingMode: 'auto' | 'manual' | 'disabled'
+    language: string
+  }
+): ProcessingOptions {
+  const options: ProcessingOptions = {
+    use_dual_track: true,
+    force_track: track,
+    language: batchOptions.language,
+  }
+
+  // Only add OCR-specific options for OCR track
+  if (track === 'ocr') {
+    options.layout_model = batchOptions.layoutModel
+    options.preprocessing_mode = batchOptions.preprocessingMode
+  }
+
+  return options
+}
+
+/**
+ * Process a single task and poll for completion
+ */
+async function processTask(
+  taskId: string,
+  options: ProcessingOptions,
+  onStatusUpdate: (status: BatchTaskState['status'], error?: string) => void
+): Promise<boolean> {
+  try {
+    // Start processing
+    onStatusUpdate('processing')
+    await apiClientV2.startTask(taskId, options)
+
+    // Poll for completion
+    while (true) {
+      await sleep(POLL_INTERVAL)
+
+      const task = await apiClientV2.getTask(taskId)
+
+      if (task.status === 'completed') {
+        onStatusUpdate('completed')
+        return true
+      }
+
+      if (task.status === 'failed') {
+        onStatusUpdate('failed', task.error_message || 'Processing failed')
+        return false
+      }
+
+      // Still processing, continue polling
+    }
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error'
+    onStatusUpdate('failed', errorMessage)
+    return false
+  }
+}
+
+/**
+ * Sleep utility
+ */
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+/**
+ * Process tasks with concurrency limit
+ */
+async function processWithConcurrency(
+  tasks: Array<{ taskId: string; options: ProcessingOptions }>,
+  concurrency: number,
+  onTaskUpdate: (taskId: string, status: BatchTaskState['status'], error?: string) => void
+): Promise<void> {
+  const queue = [...tasks]
+  const running: Promise<void>[] = []
+
+  while (queue.length > 0 || running.length > 0) {
+    // Start new tasks up to concurrency limit
+    while (running.length < concurrency && queue.length > 0) {
+      const task = queue.shift()!
+      const promise = processTask(task.taskId, task.options, (status, error) => {
+        onTaskUpdate(task.taskId, status, error)
+      }).then(() => {
+        // Remove from running when done
+        const index = running.indexOf(promise)
+        if (index > -1) {
+          running.splice(index, 1)
+        }
+      })
+      running.push(promise)
+    }
+
+    // Wait for at least one task to complete if we're at capacity
+    if (running.length >= concurrency || (queue.length === 0 && running.length > 0)) {
+      await Promise.race(running)
+    }
+  }
+}
+
+/**
+ * Main batch processing function
+ * Processes Direct Track tasks in parallel (max 5) and OCR Track tasks sequentially (max 1)
+ */
+export async function processBatch(): Promise<void> {
+  const store = useTaskStore.getState()
+  const { batchState, updateBatchTaskState, startBatchProcessing, stopBatchProcessing } = store
+
+  if (!batchState.isActive || batchState.taskIds.length === 0) {
+    console.warn('No batch to process')
+    return
+  }
+
+  // Start batch processing
+  startBatchProcessing()
+
+  const { taskIds, taskStates, processingOptions } = batchState
+
+  // Separate tasks by track
+  const directTasks: Array<{ taskId: string; options: ProcessingOptions }> = []
+  const ocrTasks: Array<{ taskId: string; options: ProcessingOptions }> = []
+
+  for (const taskId of taskIds) {
+    const taskState = taskStates[taskId]
+    if (!taskState || taskState.status !== 'pending') continue
+
+    const track = determineTrack(
+      processingOptions.strategy,
+      taskState.recommendedTrack
+    )
+
+    const options = buildProcessingOptions(track, processingOptions)
+
+    // Update task with determined track
+    updateBatchTaskState(taskId, { track })
+
+    if (track === 'direct') {
+      directTasks.push({ taskId, options })
+    } else {
+      // OCR, hybrid, or auto all go through OCR queue
+      ocrTasks.push({ taskId, options })
+    }
+  }
+
+  const onTaskUpdate = (taskId: string, status: BatchTaskState['status'], error?: string) => {
+    const updates: Partial<BatchTaskState> = { status }
+    if (status === 'processing') {
+      updates.startedAt = new Date().toISOString()
+    } else if (status === 'completed' || status === 'failed') {
+      updates.completedAt = new Date().toISOString()
+      if (error) updates.error = error
+    }
+    updateBatchTaskState(taskId, updates)
+  }
+
+  try {
+    // Process Direct and OCR tracks concurrently
+    // Direct: up to 5 parallel
+    // OCR: sequential (1 at a time)
+    await Promise.all([
+      processWithConcurrency(directTasks, DIRECT_TRACK_CONCURRENCY, onTaskUpdate),
+      processWithConcurrency(ocrTasks, OCR_TRACK_CONCURRENCY, onTaskUpdate),
+    ])
+  } finally {
+    stopBatchProcessing()
+  }
+}
+
+/**
+ * Cancel batch processing
+ * Note: This cancels pending tasks but cannot cancel already-running tasks
+ */
+export async function cancelBatch(): Promise<void> {
+  const store = useTaskStore.getState()
+  const { batchState, updateBatchTaskState, stopBatchProcessing } = store
+
+  // Cancel all processing tasks
+  for (const taskId of batchState.taskIds) {
+    const taskState = batchState.taskStates[taskId]
+    if (taskState?.status === 'processing') {
+      try {
+        await apiClientV2.cancelTask(taskId)
+        updateBatchTaskState(taskId, {
+          status: 'failed',
+          error: 'Cancelled by user',
+          completedAt: new Date().toISOString(),
+        })
+      } catch (error) {
+        console.error(`Failed to cancel task ${taskId}:`, error)
+      }
+    }
+  }
+
+  stopBatchProcessing()
+}
+
+/**
+ * Get batch processing summary
+ */
+export function getBatchSummary(): {
+  total: number
+  directCount: number
+  ocrCount: number
+  pendingCount: number
+  completedCount: number
+  failedCount: number
+} {
+  const { batchState } = useTaskStore.getState()
+  const { taskIds, taskStates } = batchState
+
+  let directCount = 0
+  let ocrCount = 0
+  let pendingCount = 0
+  let completedCount = 0
+  let failedCount = 0
+
+  for (const taskId of taskIds) {
+    const taskState = taskStates[taskId]
+    if (!taskState) continue
+
+    if (taskState.track === 'direct') directCount++
+    else if (taskState.track === 'ocr') ocrCount++
+
+    switch (taskState.status) {
+      case 'pending':
+        pendingCount++
+        break
+      case 'completed':
+        completedCount++
+        break
+      case 'failed':
+        failedCount++
+        break
+    }
+  }
+
+  return {
+    total: taskIds.length,
+    directCount,
+    ocrCount,
+    pendingCount,
+    completedCount,
+    failedCount,
+  }
+}

frontend/src/store/taskStore.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
-import type { Task, TaskStatus, ProcessingTrack, ProcessingOptions } from '@/types/apiV2'
+import type { Task, TaskStatus, ProcessingTrack, ProcessingOptions, DocumentAnalysisResponse } from '@/types/apiV2'
 
 /**
  * Processing state for tracking ongoing operations
@@ -12,6 +12,76 @@ export interface ProcessingState {
   options: ProcessingOptions | null
 }
 
+// ==================== Batch Processing Types ====================
+
+/**
+ * Processing strategy for batch operations
+ */
+export type BatchStrategy = 'auto' | 'force_ocr' | 'force_direct'
+
+/**
+ * Individual task state within a batch
+ */
+export interface BatchTaskState {
+  taskId: string
+  filename: string | null
+  status: TaskStatus
+  track: ProcessingTrack | null
+  recommendedTrack: ProcessingTrack | null
+  analysisResult: DocumentAnalysisResponse | null
+  error: string | null
+  startedAt: string | null
+  completedAt: string | null
+}
+
+/**
+ * Batch progress tracking
+ */
+export interface BatchProgress {
+  total: number
+  pending: number
+  analyzing: number
+  processing: number
+  completed: number
+  failed: number
+}
+
+/**
+ * Batch processing options (unified settings for all tasks)
+ */
+export interface BatchProcessingOptions {
+  strategy: BatchStrategy
+  layoutModel: 'chinese' | 'default' | 'cdla'
+  preprocessingMode: 'auto' | 'manual' | 'disabled'
+  language: string
+}
+
+/**
+ * Batch state for managing multiple tasks
+ */
+export interface BatchState {
+  // Whether batch mode is active
+  isActive: boolean
+
+  // All task IDs in this batch
+  taskIds: string[]
+
+  // State for each task
+  taskStates: Record<string, BatchTaskState>
+
+  // Progress summary
+  progress: BatchProgress
+
+  // Unified processing options
+  processingOptions: BatchProcessingOptions
+
+  // Batch processing status
+  isProcessing: boolean
+  isAnalyzing: boolean
+  startedAt: string | null
+  completedAt: string | null
+}
+
 /**
  * Cached task info for quick display without API calls
  */
@@ -23,6 +93,43 @@ export interface CachedTask {
   processingTrack?: ProcessingTrack
 }
 
+/**
+ * Default batch processing options
+ */
+const defaultBatchProcessingOptions: BatchProcessingOptions = {
+  strategy: 'auto',
+  layoutModel: 'chinese',
+  preprocessingMode: 'auto',
+  language: 'ch',
+}
+
+/**
+ * Default batch progress
+ */
+const defaultBatchProgress: BatchProgress = {
+  total: 0,
+  pending: 0,
+  analyzing: 0,
+  processing: 0,
+  completed: 0,
+  failed: 0,
+}
+
+/**
+ * Default batch state
+ */
+const defaultBatchState: BatchState = {
+  isActive: false,
+  taskIds: [],
+  taskStates: {},
+  progress: defaultBatchProgress,
+  processingOptions: defaultBatchProcessingOptions,
+  isProcessing: false,
+  isAnalyzing: false,
+  startedAt: null,
+  completedAt: null,
+}
+
 /**
  * Task Store State
  * Centralized state management for task operations
@@ -37,6 +144,9 @@ interface TaskState {
   // Recently accessed tasks cache (max 20)
   recentTasks: CachedTask[]
 
+  // Batch processing state
+  batchState: BatchState
+
   // Actions
   setCurrentTask: (taskId: string | null, filename?: string | null) => void
   clearCurrentTask: () => void
@@ -53,6 +163,16 @@ interface TaskState {
 
   // Get cached task
   getCachedTask: (taskId: string) => CachedTask | undefined
+
+  // Batch processing actions
+  initBatch: (tasks: Array<{ taskId: string; filename: string | null }>) => void
+  clearBatch: () => void
+  setBatchOptions: (options: Partial<BatchProcessingOptions>) => void
+  updateBatchTaskState: (taskId: string, updates: Partial<BatchTaskState>) => void
+  setBatchAnalyzing: (isAnalyzing: boolean) => void
+  startBatchProcessing: () => void
+  stopBatchProcessing: () => void
+  recalculateBatchProgress: () => void
 }
 
 /**
@@ -76,6 +196,7 @@ export const useTaskStore = create<TaskState>()(
         options: null,
       },
       recentTasks: [],
+      batchState: { ...defaultBatchState },
 
       // Set current task
       setCurrentTask: (taskId, filename) => {
@@ -207,6 +328,179 @@ export const useTaskStore = create<TaskState>()(
       getCachedTask: (taskId) => {
         return get().recentTasks.find(t => t.taskId === taskId)
       },
+
+      // ==================== Batch Processing Actions ====================
+
+      // Initialize batch with uploaded tasks
+      initBatch: (tasks) => {
+        const taskIds = tasks.map(t => t.taskId)
+        const taskStates: Record<string, BatchTaskState> = {}
+
+        for (const task of tasks) {
+          taskStates[task.taskId] = {
+            taskId: task.taskId,
+            filename: task.filename,
+            status: 'pending',
+            track: null,
+            recommendedTrack: null,
+            analysisResult: null,
+            error: null,
+            startedAt: null,
+            completedAt: null,
+          }
+        }
+
+        set({
+          batchState: {
+            isActive: true,
+            taskIds,
+            taskStates,
+            progress: {
+              total: tasks.length,
+              pending: tasks.length,
+              analyzing: 0,
+              processing: 0,
+              completed: 0,
+              failed: 0,
+            },
+            processingOptions: { ...defaultBatchProcessingOptions },
+            isProcessing: false,
+            isAnalyzing: false,
+            startedAt: null,
+            completedAt: null,
+          },
+        })
+      },
+
+      // Clear batch state
+      clearBatch: () => {
+        set({ batchState: { ...defaultBatchState } })
+      },
+
+      // Update batch processing options
+      setBatchOptions: (options) => {
+        set((state) => ({
+          batchState: {
+            ...state.batchState,
+            processingOptions: {
+              ...state.batchState.processingOptions,
+              ...options,
+            },
+          },
+        }))
+      },
+
+      // Update individual task state within batch
+      updateBatchTaskState: (taskId, updates) => {
+        set((state) => {
+          const currentTask = state.batchState.taskStates[taskId]
+          if (!currentTask) return state
+
+          const updatedTaskStates = {
+            ...state.batchState.taskStates,
+            [taskId]: {
+              ...currentTask,
+              ...updates,
+            },
+          }
+
+          return {
+            batchState: {
+              ...state.batchState,
+              taskStates: updatedTaskStates,
+            },
+          }
+        })
+
+        // Recalculate progress after update
+        get().recalculateBatchProgress()
+      },
+
+      // Set batch analyzing state
+      setBatchAnalyzing: (isAnalyzing) => {
+        set((state) => ({
+          batchState: {
+            ...state.batchState,
+            isAnalyzing,
+          },
+        }))
+      },
+
+      // Start batch processing
+      startBatchProcessing: () => {
+        set((state) => ({
+          batchState: {
+            ...state.batchState,
+            isProcessing: true,
+            startedAt: new Date().toISOString(),
+            completedAt: null,
+          },
+        }))
+      },
+
+      // Stop batch processing
+      stopBatchProcessing: () => {
+        set((state) => ({
+          batchState: {
+            ...state.batchState,
+            isProcessing: false,
+            completedAt: new Date().toISOString(),
+          },
+        }))
+      },
+
+      // Recalculate batch progress from task states
+      recalculateBatchProgress: () => {
+        set((state) => {
+          const { taskStates, taskIds } = state.batchState
+          let pending = 0
+          let analyzing = 0
+          let processing = 0
+          let completed = 0
+          let failed = 0
+
+          for (const taskId of taskIds) {
+            const taskState = taskStates[taskId]
+            if (!taskState) continue
+
+            switch (taskState.status) {
+              case 'pending':
+                // Check if we're analyzing (has recommendedTrack means analyzed)
+                if (taskState.recommendedTrack !== null) {
+                  pending++
+                } else if (state.batchState.isAnalyzing) {
+                  analyzing++
+                } else {
+                  pending++
+                }
+                break
+              case 'processing':
+                processing++
+                break
+              case 'completed':
+                completed++
+                break
+              case 'failed':
+                failed++
+                break
+            }
+          }
+
+          return {
+            batchState: {
+              ...state.batchState,
+              progress: {
+                total: taskIds.length,
+                pending,
+                analyzing,
+                processing,
+                completed,
+                failed,
+              },
+            },
+          }
+        })
+      },
     }),
     {
       name: 'tool-ocr-task-store',
@@ -236,3 +530,31 @@ export function useCurrentTask() {
 export function useProcessingState() {
   return useTaskStore((state) => state.processingState)
 }
+
+/**
+ * Helper hook for batch state
+ */
+export function useBatchState() {
+  return useTaskStore((state) => state.batchState)
+}
+
+/**
+ * Helper hook for batch progress
+ */
+export function useBatchProgress() {
+  return useTaskStore((state) => state.batchState.progress)
+}
+
+/**
+ * Helper hook for batch processing options
+ */
+export function useBatchOptions() {
+  return useTaskStore((state) => state.batchState.processingOptions)
+}
+
+/**
+ * Helper hook to check if batch mode is active
+ */
+export function useIsBatchMode() {
+  return useTaskStore((state) => state.batchState.isActive && state.batchState.taskIds.length > 1)
+}

openspec/changes/archive/2025-12-12-add-batch-processing/proposal.md

@@ -0,0 +1,43 @@
+# Change: 新增批次處理功能
+
+## Why
+
+目前系統支援批次上傳多個檔案，但處理時需要使用者逐一點選每個任務進行處理。這對於大量文件的處理場景非常不便。需要新增批次處理功能，讓使用者可以一次設定並啟動所有上傳的任務。
+
+## What Changes
+
+### 1. 批次狀態管理
+- 擴展 taskStore 支援批次任務追蹤
+- 新增批次進度狀態（總數、已完成、處理中、失敗）
+- 儲存批次統一設定
+
+### 2. 批次處理邏輯
+- 上傳完成後分析所有檔案決定處理軌道
+- 根據軌道類型分流處理：
+  - Direct Track：最多 5 個並行（CPU 運算）
+  - OCR Track：單一佇列（GPU VRAM 限制）
+- 兩類任務可同時進行
+
+### 3. 批次設定 UI
+- 修改 ProcessingPage 支援多任務模式
+- 統一設定介面：
+  - 處理策略（自動判斷/強制 OCR/強制 Direct）
+  - Layout Model（OCR 專用）
+  - 預處理模式（OCR 專用）
+- 批次進度顯示（整體進度 + 各任務狀態）
+
+### 4. 處理策略
+- **自動判斷**（推薦）：系統分析每個檔案後自動選擇最佳 track
+- **全部 OCR**：強制所有檔案使用 OCR track
+- **全部 Direct**：強制所有 PDF 使用 Direct track
+
+## Impact
+
+- Affected specs: frontend-ui (修改)
+- Affected code:
+  - `frontend/src/store/taskStore.ts` - 擴展批次狀態
+  - `frontend/src/pages/ProcessingPage.tsx` - 支援多任務處理
+  - `frontend/src/pages/UploadPage.tsx` - 傳遞多任務 ID
+  - `frontend/src/services/apiV2.ts` - 新增批次處理輔助函數
+  - `frontend/src/i18n/locales/*.json` - 新增翻譯
+- 後端無需改動（利用現有 API）

openspec/changes/archive/2025-12-12-add-batch-processing/specs/frontend-ui/spec.md

@@ -0,0 +1,100 @@
+# Frontend UI Specification - Batch Processing
+
+## ADDED Requirements
+
+### Requirement: Batch Processing Support
+
+The system SHALL support batch processing of multiple uploaded files with a single configuration.
+
+After uploading multiple files, the user SHALL be able to:
+- Configure processing settings once for all files
+- Start processing all files with one action
+- Monitor progress of all files in a unified view
+
+#### Scenario: Multiple files uploaded
+- **WHEN** user uploads multiple files
+- **AND** navigates to processing page
+- **THEN** the system displays batch processing mode
+- **AND** shows all pending tasks in a list
+
+#### Scenario: Batch configuration
+- **WHEN** user is in batch processing mode
+- **THEN** user can select a processing strategy (auto/OCR/Direct)
+- **AND** user can configure layout model for OCR tasks
+- **AND** user can configure preprocessing for OCR tasks
+- **AND** settings apply to all applicable tasks
+
+---
+
+### Requirement: Batch Processing Strategy
+
+The system SHALL support three batch processing strategies:
+
+1. **Auto Detection** (default): System analyzes each file and selects optimal track
+2. **Force OCR**: All files processed with OCR track
+3. **Force Direct**: All PDF files processed with Direct track
+
+#### Scenario: Auto detection strategy
+- **WHEN** user selects auto detection strategy
+- **THEN** the system analyzes each file before processing
+- **AND** assigns OCR or Direct track based on file characteristics
+
+#### Scenario: Force OCR strategy
+- **WHEN** user selects force OCR strategy
+- **THEN** all files are processed using OCR track
+- **AND** layout model and preprocessing settings are applied
+
+#### Scenario: Force Direct strategy
+- **WHEN** user selects force Direct strategy
+- **AND** file is a PDF
+- **THEN** the file is processed using Direct track
+
+---
+
+### Requirement: Parallel Processing Limits
+
+The system SHALL enforce different parallelism limits based on processing track:
+
+- Direct Track: Maximum 5 concurrent tasks (CPU-based)
+- OCR Track: Maximum 1 concurrent task (GPU VRAM constraint)
+
+Direct and OCR tasks MAY run simultaneously as they use different resources.
+
+#### Scenario: Direct track parallelism
+- **WHEN** batch contains multiple Direct track tasks
+- **THEN** up to 5 tasks process concurrently
+- **AND** remaining tasks wait in queue
+
+#### Scenario: OCR track serialization
+- **WHEN** batch contains multiple OCR track tasks
+- **THEN** only 1 task processes at a time
+- **AND** remaining tasks wait in queue
+
+#### Scenario: Mixed track processing
+- **WHEN** batch contains both Direct and OCR tasks
+- **THEN** Direct tasks run in parallel pool (max 5)
+- **AND** OCR tasks run in serial queue (max 1)
+- **AND** both pools operate simultaneously
+
+---
+
+### Requirement: Batch Progress Display
+
+The system SHALL display unified progress for batch processing.
+
+Progress display SHALL include:
+- Overall progress (completed / total)
+- Count by status (processing, completed, failed)
+- Individual task status list
+- Estimated time remaining (optional)
+
+#### Scenario: Batch progress monitoring
+- **WHEN** batch processing is in progress
+- **THEN** user sees overall completion percentage
+- **AND** user sees count of tasks in each status
+- **AND** user sees status of each individual task
+
+#### Scenario: Batch completion
+- **WHEN** all tasks in batch are completed or failed
+- **THEN** user sees final summary
+- **AND** user can navigate to results page

openspec/changes/archive/2025-12-12-add-batch-processing/tasks.md

@@ -0,0 +1,42 @@
+# Tasks: 新增批次處理功能
+
+## 1. 批次狀態管理
+
+- [x] 1.1 擴展 taskStore 新增批次狀態介面（BatchState）
+- [x] 1.2 實作批次任務追蹤（taskIds、taskStates）
+- [x] 1.3 實作批次進度計算（total、completed、processing、failed）
+- [x] 1.4 實作批次設定儲存（processingOptions）
+
+## 2. 批次處理邏輯
+
+- [x] 2.1 新增批次分析函數（分析所有任務決定 track）
+- [x] 2.2 實作 Direct Track 並行處理（最多 5 並行）
+- [x] 2.3 實作 OCR Track 佇列處理（單一佇列）
+- [x] 2.4 實作混合模式處理（Direct 和 OCR 同時進行）
+- [x] 2.5 實作任務狀態輪詢與更新
+
+## 3. 上傳頁面調整
+
+- [x] 3.1 修改 UploadPage 上傳完成後儲存所有 taskIds
+- [x] 3.2 導航至 ProcessingPage 時傳遞批次模式標記
+
+## 4. 處理頁面重構
+
+- [x] 4.1 修改 ProcessingPage 支援批次模式
+- [x] 4.2 新增批次設定區塊（策略選擇、統一設定）
+- [x] 4.3 新增批次進度顯示元件
+- [x] 4.4 新增任務列表顯示（各任務狀態）
+- [x] 4.5 實作批次開始處理按鈕
+
+## 5. i18n 翻譯
+
+- [x] 5.1 新增批次處理相關中文翻譯
+- [x] 5.2 新增批次處理相關英文翻譯
+
+## 6. 測試與驗證
+
+- [x] 6.1 測試單檔案處理（向下相容）
+- [x] 6.2 測試多檔案 Direct Track 並行
+- [x] 6.3 測試多檔案 OCR Track 佇列
+- [x] 6.4 測試混合模式處理
+- [x] 6.5 驗證 TypeScript 編譯通過

openspec/specs/frontend-ui/spec.md

@@ -89,3 +89,100 @@ The application MAY display:
 - **WHEN** any page describes product features
 - **THEN** the descriptions are factual and verifiable
 
+### Requirement: Batch Processing Support
+
+The system SHALL support batch processing of multiple uploaded files with a single configuration.
+
+After uploading multiple files, the user SHALL be able to:
+- Configure processing settings once for all files
+- Start processing all files with one action
+- Monitor progress of all files in a unified view
+
+#### Scenario: Multiple files uploaded
+- **WHEN** user uploads multiple files
+- **AND** navigates to processing page
+- **THEN** the system displays batch processing mode
+- **AND** shows all pending tasks in a list
+
+#### Scenario: Batch configuration
+- **WHEN** user is in batch processing mode
+- **THEN** user can select a processing strategy (auto/OCR/Direct)
+- **AND** user can configure layout model for OCR tasks
+- **AND** user can configure preprocessing for OCR tasks
+- **AND** settings apply to all applicable tasks
+
+---
+
+### Requirement: Batch Processing Strategy
+
+The system SHALL support three batch processing strategies:
+
+1. **Auto Detection** (default): System analyzes each file and selects optimal track
+2. **Force OCR**: All files processed with OCR track
+3. **Force Direct**: All PDF files processed with Direct track
+
+#### Scenario: Auto detection strategy
+- **WHEN** user selects auto detection strategy
+- **THEN** the system analyzes each file before processing
+- **AND** assigns OCR or Direct track based on file characteristics
+
+#### Scenario: Force OCR strategy
+- **WHEN** user selects force OCR strategy
+- **THEN** all files are processed using OCR track
+- **AND** layout model and preprocessing settings are applied
+
+#### Scenario: Force Direct strategy
+- **WHEN** user selects force Direct strategy
+- **AND** file is a PDF
+- **THEN** the file is processed using Direct track
+
+---
+
+### Requirement: Parallel Processing Limits
+
+The system SHALL enforce different parallelism limits based on processing track:
+
+- Direct Track: Maximum 5 concurrent tasks (CPU-based)
+- OCR Track: Maximum 1 concurrent task (GPU VRAM constraint)
+
+Direct and OCR tasks MAY run simultaneously as they use different resources.
+
+#### Scenario: Direct track parallelism
+- **WHEN** batch contains multiple Direct track tasks
+- **THEN** up to 5 tasks process concurrently
+- **AND** remaining tasks wait in queue
+
+#### Scenario: OCR track serialization
+- **WHEN** batch contains multiple OCR track tasks
+- **THEN** only 1 task processes at a time
+- **AND** remaining tasks wait in queue
+
+#### Scenario: Mixed track processing
+- **WHEN** batch contains both Direct and OCR tasks
+- **THEN** Direct tasks run in parallel pool (max 5)
+- **AND** OCR tasks run in serial queue (max 1)
+- **AND** both pools operate simultaneously
+
+---
+
+### Requirement: Batch Progress Display
+
+The system SHALL display unified progress for batch processing.
+
+Progress display SHALL include:
+- Overall progress (completed / total)
+- Count by status (processing, completed, failed)
+- Individual task status list
+- Estimated time remaining (optional)
+
+#### Scenario: Batch progress monitoring
+- **WHEN** batch processing is in progress
+- **THEN** user sees overall completion percentage
+- **AND** user sees count of tasks in each status
+- **AND** user sees status of each individual task
+
+#### Scenario: Batch completion
+- **WHEN** all tasks in batch are completed or failed
+- **THEN** user sees final summary
+- **AND** user can navigate to results page
+