fix: migrate UI to V2 API and fix admin dashboard

Backend fixes:
- Fix markdown generation using correct 'markdown_content' key in tasks.py
- Update admin service to return flat data structure matching frontend types
- Add task_count and failed_tasks fields to user statistics
- Fix top users endpoint to return complete user data

Frontend fixes:
- Migrate ResultsPage from V1 batch API to V2 task API with polling
- Create TaskDetailPage component with markdown preview and download buttons
- Refactor ExportPage to support multi-task selection using V2 download endpoints
- Fix login infinite refresh loop with concurrency control flags
- Create missing Checkbox UI component

New features:
- Add /tasks/:taskId route for task detail view
- Implement multi-task batch export functionality
- Add real-time task status polling (2s interval)

OpenSpec:
- Archive completed proposal 2025-11-17-fix-v2-api-ui-issues
- Create result-export and task-management specifications

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

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

frontend/src/pages/ExportPage.tsx

@@ -1,217 +1,180 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { useMutation, useQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
 import { useToast } from '@/components/ui/toast'
-import { useUploadStore } from '@/store/uploadStore'
-import { apiClient } from '@/services/api'
-import type { ExportRequest, ExportOptions } from '@/types/api'
+import { apiClientV2 } from '@/services/apiV2'
 import {
   Download,
   FileText,
   FileJson,
-  FileSpreadsheet,
-  FileCode,
   FileType,
   AlertCircle,
   Settings,
   CheckCircle2,
-  ArrowLeft
+  ArrowLeft,
+  Loader2
 } from 'lucide-react'
 
-type ExportFormat = 'txt' | 'json' | 'excel' | 'markdown' | 'pdf'
+type ExportFormat = 'json' | 'markdown' | 'pdf'
 
 export default function ExportPage() {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const { toast } = useToast()
-  const { batchId } = useUploadStore()
 
-  const [format, setFormat] = useState<ExportFormat>('txt')
-  const [selectedRuleId, setSelectedRuleId] = useState<number | undefined>()
-  const [options, setOptions] = useState<ExportOptions>({
-    confidence_threshold: 0.5,
-    include_metadata: true,
-    filename_pattern: '{filename}_ocr',
-    css_template: 'default',
+  const [selectedTasks, setSelectedTasks] = useState<Set<string>>(new Set())
+  const [exportFormat, setExportFormat] = useState<ExportFormat>('markdown')
+  const [isExporting, setIsExporting] = useState(false)
+
+  // Fetch completed tasks
+  const { data: tasksData, isLoading } = useQuery({
+    queryKey: ['tasks', 'completed'],
+    queryFn: () => apiClientV2.listTasks({
+      status: 'completed',
+      page: 1,
+      page_size: 100,
+      order_by: 'completed_at',
+      order_desc: true
+    }),
   })
 
-  // Fetch export rules
-  const { data: exportRules } = useQuery({
-    queryKey: ['exportRules'],
-    queryFn: () => apiClient.getExportRules(),
-    enabled: true,
-  })
+  const completedTasks = tasksData?.tasks || []
 
-  // Fetch CSS templates
-  const { data: cssTemplates } = useQuery({
-    queryKey: ['cssTemplates'],
-    queryFn: () => apiClient.getCSSTemplates(),
-    enabled: format === 'pdf',
-  })
+  // Select/Deselect all
+  const handleSelectAll = () => {
+    if (selectedTasks.size === completedTasks.length) {
+      setSelectedTasks(new Set())
+    } else {
+      setSelectedTasks(new Set(completedTasks.map(t => t.task_id)))
+    }
+  }
 
-  // Export mutation
-  const exportMutation = useMutation({
-    mutationFn: async (data: ExportRequest) => {
-      const blob = await apiClient.exportResults(data)
-      return { blob, format: data.format }
-    },
-    onSuccess: ({ blob, format: exportFormat }) => {
-      // Create download link
-      const url = window.URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-
-      // Determine file extension
-      const extensions: Record<ExportFormat, string> = {
-        txt: 'txt',
-        json: 'json',
-        excel: 'xlsx',
-        markdown: 'md',
-        pdf: 'pdf',
-      }
-
-      a.download = `batch_${batchId}_export.${extensions[exportFormat]}`
-      document.body.appendChild(a)
-      a.click()
-      window.URL.revokeObjectURL(url)
-      document.body.removeChild(a)
+  // Toggle task selection
+  const handleToggleTask = (taskId: string) => {
+    const newSelected = new Set(selectedTasks)
+    if (newSelected.has(taskId)) {
+      newSelected.delete(taskId)
+    } else {
+      newSelected.add(taskId)
+    }
+    setSelectedTasks(newSelected)
+  }
 
+  // Export selected tasks
+  const handleExport = async () => {
+    if (selectedTasks.size === 0) {
       toast({
-        title: t('export.exportSuccess'),
-        description: `已成功匯出為 ${exportFormat.toUpperCase()} 格式`,
-        variant: 'success',
-      })
-    },
-    onError: (error: any) => {
-      toast({
-        title: t('export.exportError'),
-        description: error.response?.data?.detail || t('errors.networkError'),
-        variant: 'destructive',
-      })
-    },
-  })
-
-  const handleExport = () => {
-    if (!batchId) {
-      toast({
-        title: t('errors.validationError'),
-        description: '請先上傳並處理檔案',
+        title: '請選擇任務',
+        description: '請至少選擇一個任務進行匯出',
         variant: 'destructive',
       })
       return
     }
 
-    const exportRequest: ExportRequest = {
-      batch_id: batchId,
-      format,
-      rule_id: selectedRuleId,
-      options,
-    }
+    setIsExporting(true)
+    let successCount = 0
+    let errorCount = 0
 
-    exportMutation.mutate(exportRequest)
-  }
-
-  const handleFormatChange = (newFormat: ExportFormat) => {
-    setFormat(newFormat)
-    // Reset CSS template if switching away from PDF
-    if (newFormat !== 'pdf') {
-      setOptions((prev) => ({ ...prev, css_template: undefined }))
-    } else {
-      setOptions((prev) => ({ ...prev, css_template: 'default' }))
-    }
-  }
-
-  const handleRuleChange = (ruleId: number | undefined) => {
-    setSelectedRuleId(ruleId)
-    if (ruleId && exportRules) {
-      const rule = exportRules.find((r) => r.id === ruleId)
-      if (rule && rule.config_json) {
-        // Apply rule configuration
-        setOptions((prev) => ({
-          ...prev,
-          ...rule.config_json,
-          css_template: rule.css_template || prev.css_template,
-        }))
+    try {
+      for (const taskId of selectedTasks) {
+        try {
+          if (exportFormat === 'json') {
+            await apiClientV2.downloadJSON(taskId)
+          } else if (exportFormat === 'markdown') {
+            await apiClientV2.downloadMarkdown(taskId)
+          } else if (exportFormat === 'pdf') {
+            await apiClientV2.downloadPDF(taskId)
+          }
+          successCount++
+        } catch (error) {
+          console.error(`Export failed for task ${taskId}:`, error)
+          errorCount++
+        }
       }
+
+      if (successCount > 0) {
+        toast({
+          title: t('export.exportSuccess'),
+          description: `成功匯出 ${successCount} 個檔案${errorCount > 0 ? `，${errorCount} 個失敗` : ''}`,
+          variant: 'success',
+        })
+      }
+
+      if (errorCount > 0 && successCount === 0) {
+        toast({
+          title: t('export.exportError'),
+          description: `所有匯出失敗 (${errorCount} 個檔案)`,
+          variant: 'destructive',
+        })
+      }
+    } finally {
+      setIsExporting(false)
     }
   }
 
   const formatIcons = {
-    txt: FileText,
     json: FileJson,
-    excel: FileSpreadsheet,
-    markdown: FileCode,
+    markdown: FileText,
     pdf: FileType,
   }
 
-  // Show helpful message when no batch is selected
-  if (!batchId) {
-    return (
-      <div className="flex items-center justify-center min-h-[60vh]">
-        <Card className="max-w-md text-center">
-          <CardHeader>
-            <div className="flex justify-center mb-4">
-              <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center">
-                <AlertCircle className="w-8 h-8 text-muted-foreground" />
-              </div>
-            </div>
-            <CardTitle className="text-xl">{t('export.title')}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <p className="text-muted-foreground">
-              {t('export.noBatchMessage', { defaultValue: '尚未選擇任何批次。請先上傳並完成處理檔案。' })}
-            </p>
-            <Button onClick={() => navigate('/upload')} size="lg">
-              {t('export.goToUpload', { defaultValue: '前往上傳頁面' })}
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
-    )
+  const formatLabels = {
+    json: 'JSON',
+    markdown: 'Markdown',
+    pdf: 'PDF',
   }
 
   return (
     <div className="space-y-6">
       {/* Page Header */}
       <div className="page-header">
-        <h1 className="page-title">{t('export.title')}</h1>
-        <p className="text-muted-foreground mt-1">
-          批次 ID: <span className="font-mono text-primary">{batchId}</span>
-        </p>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Button variant="outline" onClick={() => navigate('/tasks')} className="gap-2">
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </Button>
+            <div>
+              <h1 className="page-title">{t('export.title')}</h1>
+              <p className="text-muted-foreground mt-1">批次匯出 OCR 處理結果</p>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Left Column - Configuration */}
+        {/* Left Column - Task Selection */}
         <div className="lg:col-span-2 space-y-6">
           {/* Format Selection */}
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 <FileType className="w-5 h-5" />
-                {t('export.format')}
+                選擇匯出格式
               </CardTitle>
               <CardDescription>選擇要匯出的檔案格式</CardDescription>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                {(['txt', 'json', 'excel', 'markdown', 'pdf'] as ExportFormat[]).map((fmt) => {
+              <div className="grid grid-cols-3 gap-3">
+                {(['json', 'markdown', 'pdf'] as ExportFormat[]).map((fmt) => {
                   const Icon = formatIcons[fmt]
                   return (
                     <button
                       key={fmt}
-                      onClick={() => handleFormatChange(fmt)}
+                      onClick={() => setExportFormat(fmt)}
                       className={`p-4 border-2 rounded-lg transition-all ${
-                        format === fmt
+                        exportFormat === fmt
                           ? 'border-primary bg-primary/10 shadow-md'
                           : 'border-border hover:border-primary/50 hover:bg-muted/50'
                       }`}
                     >
-                      <Icon className={`w-6 h-6 mx-auto mb-2 ${format === fmt ? 'text-primary' : 'text-muted-foreground'}`} />
-                      <div className={`text-sm font-medium ${format === fmt ? 'text-primary' : 'text-foreground'}`}>
-                        {t(`export.formats.${fmt}`)}
+                      <Icon className={`w-6 h-6 mx-auto mb-2 ${exportFormat === fmt ? 'text-primary' : 'text-muted-foreground'}`} />
+                      <div className={`text-sm font-medium ${exportFormat === fmt ? 'text-primary' : 'text-foreground'}`}>
+                        {formatLabels[fmt]}
                       </div>
                     </button>
                   )
@@ -220,150 +183,77 @@ export default function ExportPage() {
             </CardContent>
           </Card>
 
-          {/* Export Rules */}
-          {exportRules && exportRules.length > 0 && (
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <CheckCircle2 className="w-5 h-5" />
-                  {t('export.rules.title')}
-                </CardTitle>
-                <CardDescription>選擇預設的匯出規則</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <select
-                  value={selectedRuleId || ''}
-                  onChange={(e) => handleRuleChange(e.target.value ? Number(e.target.value) : undefined)}
-                  className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
-                >
-                  <option value="">無 (使用預設設定)</option>
-                  {exportRules.map((rule) => (
-                    <option key={rule.id} value={rule.id}>
-                      {rule.rule_name}
-                    </option>
-                  ))}
-                </select>
-              </CardContent>
-            </Card>
-          )}
-
-          {/* Export Options */}
+          {/* Task List */}
           <Card>
             <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Settings className="w-5 h-5" />
-                {t('export.options.title')}
-              </CardTitle>
-              <CardDescription>自訂匯出參數</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              {/* Confidence Threshold */}
-              <div>
-                <div className="flex items-center justify-between mb-3">
-                  <label className="text-sm font-medium text-foreground">
-                    {t('export.options.confidenceThreshold')}
-                  </label>
-                  <span className="text-sm font-bold text-primary">
-                    {((options.confidence_threshold ?? 0.5) * 100).toFixed(0)}%
-                  </span>
-                </div>
-                <input
-                  type="range"
-                  min="0"
-                  max="1"
-                  step="0.05"
-                  value={options.confidence_threshold}
-                  onChange={(e) =>
-                    setOptions((prev) => ({
-                      ...prev,
-                      confidence_threshold: Number(e.target.value),
-                    }))
-                  }
-                  className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-primary"
-                />
-                <div className="flex justify-between text-xs text-muted-foreground mt-2">
-                  <span>0%</span>
-                  <span>50%</span>
-                  <span>100%</span>
-                </div>
-              </div>
-
-              {/* Include Metadata */}
-              <div className="flex items-center p-4 bg-muted/30 rounded-lg">
-                <input
-                  type="checkbox"
-                  id="include-metadata"
-                  checked={options.include_metadata}
-                  onChange={(e) =>
-                    setOptions((prev) => ({
-                      ...prev,
-                      include_metadata: e.target.checked,
-                    }))
-                  }
-                  className="w-5 h-5 border border-border rounded accent-primary"
-                />
-                <label htmlFor="include-metadata" className="ml-3 text-sm font-medium text-foreground cursor-pointer">
-                  {t('export.options.includeMetadata')}
-                </label>
-              </div>
-
-              {/* Filename Pattern */}
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  {t('export.options.filenamePattern')}
-                </label>
-                <input
-                  type="text"
-                  value={options.filename_pattern}
-                  onChange={(e) =>
-                    setOptions((prev) => ({
-                      ...prev,
-                      filename_pattern: e.target.value,
-                    }))
-                  }
-                  className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors font-mono text-sm"
-                  placeholder="{filename}_ocr"
-                />
-                <p className="text-xs text-muted-foreground mt-2">
-                  可用變數: <code className="bg-muted px-1.5 py-0.5 rounded">{'{filename}'}</code>,{' '}
-                  <code className="bg-muted px-1.5 py-0.5 rounded">{'{batch_id}'}</code>,{' '}
-                  <code className="bg-muted px-1.5 py-0.5 rounded">{'{date}'}</code>
-                </p>
-              </div>
-
-              {/* CSS Template (PDF only) */}
-              {format === 'pdf' && cssTemplates && cssTemplates.length > 0 && (
+              <div className="flex items-center justify-between">
                 <div>
-                  <label className="block text-sm font-medium text-foreground mb-2">
-                    {t('export.options.cssTemplate')}
-                  </label>
-                  <select
-                    value={options.css_template || 'default'}
-                    onChange={(e) =>
-                      setOptions((prev) => ({
-                        ...prev,
-                        css_template: e.target.value,
-                      }))
-                    }
-                    className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
-                  >
-                    {cssTemplates.map((template) => (
-                      <option key={template.name} value={template.name}>
-                        {template.name} - {template.description}
-                      </option>
-                    ))}
-                  </select>
+                  <CardTitle className="flex items-center gap-2">
+                    <CheckCircle2 className="w-5 h-5" />
+                    選擇任務
+                  </CardTitle>
+                  <CardDescription>
+                    選擇要匯出的已完成任務 ({selectedTasks.size}/{completedTasks.length} 已選)
+                  </CardDescription>
+                </div>
+                {completedTasks.length > 0 && (
+                  <Button variant="outline" size="sm" onClick={handleSelectAll}>
+                    {selectedTasks.size === completedTasks.length ? '取消全選' : '全選'}
+                  </Button>
+                )}
+              </div>
+            </CardHeader>
+            <CardContent>
+              {isLoading ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="w-8 h-8 animate-spin text-primary" />
+                </div>
+              ) : completedTasks.length === 0 ? (
+                <div className="text-center py-12">
+                  <AlertCircle className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
+                  <p className="text-muted-foreground">沒有已完成的任務</p>
+                  <Button onClick={() => navigate('/upload')} className="mt-4">
+                    前往上傳頁面
+                  </Button>
+                </div>
+              ) : (
+                <div className="space-y-2 max-h-[500px] overflow-y-auto">
+                  {completedTasks.map((task) => (
+                    <div
+                      key={task.task_id}
+                      className={`flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition-colors ${
+                        selectedTasks.has(task.task_id)
+                          ? 'border-primary bg-primary/5'
+                          : 'border-border hover:border-primary/50 hover:bg-muted/50'
+                      }`}
+                      onClick={() => handleToggleTask(task.task_id)}
+                    >
+                      <Checkbox
+                        checked={selectedTasks.has(task.task_id)}
+                        onCheckedChange={() => handleToggleTask(task.task_id)}
+                        onClick={(e) => e.stopPropagation()}
+                      />
+                      <div className="flex-1 min-w-0">
+                        <p className="font-medium truncate">{task.filename || '未知檔案'}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {new Date(task.completed_at!).toLocaleString('zh-TW')}
+                          {task.processing_time_ms && ` · ${(task.processing_time_ms / 1000).toFixed(2)}s`}
+                        </p>
+                      </div>
+                      <FileText className="w-5 h-5 text-muted-foreground flex-shrink-0" />
+                    </div>
+                  ))}
                 </div>
               )}
             </CardContent>
           </Card>
         </div>
 
-        {/* Right Column - Preview */}
+        {/* Right Column - Export Summary */}
         <div className="lg:col-span-1">
           <Card className="sticky top-6">
             <CardHeader>
-              <CardTitle>匯出預覽</CardTitle>
+              <CardTitle>匯出摘要</CardTitle>
               <CardDescription>當前設定概覽</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
@@ -372,71 +262,55 @@ export default function ExportPage() {
                   <div className="text-xs text-muted-foreground mb-1">格式</div>
                   <div className="flex items-center gap-2">
                     {(() => {
-                      const Icon = formatIcons[format]
+                      const Icon = formatIcons[exportFormat]
                       return <Icon className="w-4 h-4 text-primary" />
                     })()}
-                    <span className="text-sm font-medium text-foreground">{format.toUpperCase()}</span>
+                    <span className="text-sm font-medium text-foreground">{formatLabels[exportFormat]}</span>
                   </div>
                 </div>
 
-                {selectedRuleId && exportRules && (
+                <div>
+                  <div className="text-xs text-muted-foreground mb-1">已選任務</div>
+                  <div className="text-2xl font-bold text-foreground">{selectedTasks.size}</div>
+                </div>
+
+                {selectedTasks.size > 0 && (
                   <div>
-                    <div className="text-xs text-muted-foreground mb-1">匯出規則</div>
+                    <div className="text-xs text-muted-foreground mb-1">預計下載</div>
                     <div className="text-sm font-medium text-foreground">
-                      {exportRules.find((r) => r.id === selectedRuleId)?.rule_name || '未選擇'}
+                      {selectedTasks.size} 個 {formatLabels[exportFormat]} 檔案
                     </div>
                   </div>
                 )}
-
-                <div>
-                  <div className="text-xs text-muted-foreground mb-1">準確率門檻</div>
-                  <div className="text-sm font-medium text-foreground">
-                    {((options.confidence_threshold ?? 0.5) * 100).toFixed(0)}%
-                  </div>
-                </div>
-
-                <div>
-                  <div className="text-xs text-muted-foreground mb-1">包含元數據</div>
-                  <div className="text-sm font-medium text-foreground">
-                    {options.include_metadata ? '是' : '否'}
-                  </div>
-                </div>
-
-                <div>
-                  <div className="text-xs text-muted-foreground mb-1">檔名模式</div>
-                  <div className="text-xs font-mono bg-background px-2 py-1 rounded border border-border">
-                    {options.filename_pattern || '{filename}_ocr'}
-                  </div>
-                </div>
               </div>
 
               <div className="flex flex-col gap-2">
                 <Button
                   onClick={handleExport}
-                  disabled={exportMutation.isPending}
+                  disabled={selectedTasks.size === 0 || isExporting}
                   className="w-full gap-2"
                   size="lg"
                 >
-                  {exportMutation.isPending ? (
+                  {isExporting ? (
                     <>
-                      <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-                      {t('export.exporting')}
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                      匯出中...
                     </>
                   ) : (
                     <>
                       <Download className="w-4 h-4" />
-                      {t('export.exportButton')}
+                      匯出選定任務
                     </>
                   )}
                 </Button>
 
                 <Button
                   variant="outline"
-                  onClick={() => navigate('/results')}
+                  onClick={() => navigate('/tasks')}
                   className="w-full gap-2"
                 >
                   <ArrowLeft className="w-4 h-4" />
-                  {t('common.back')}
+                  返回任務歷史
                 </Button>
               </div>
             </CardContent>

frontend/src/pages/ResultsPage.tsx

@@ -1,53 +1,43 @@
-import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from '@tanstack/react-query'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import ResultsTable from '@/components/ResultsTable'
 import MarkdownPreview from '@/components/MarkdownPreview'
 import { useToast } from '@/components/ui/toast'
 import { useUploadStore } from '@/store/uploadStore'
-import { apiClient } from '@/services/api'
-import { FileText, Download, Languages, AlertCircle, TrendingUp, Clock, Layers } from 'lucide-react'
+import { apiClientV2 } from '@/services/apiV2'
+import { FileText, Download, AlertCircle, TrendingUp, Clock, Layers, FileJson, Loader2 } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
 
 export default function ResultsPage() {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const { toast } = useToast()
   const { batchId } = useUploadStore()
-  const [selectedFileId, setSelectedFileId] = useState<number | null>(null)
 
-  // Get batch status to show results
-  const { data: batchStatus } = useQuery({
-    queryKey: ['batchStatus', batchId],
-    queryFn: () => apiClient.getBatchStatus(batchId!),
-    enabled: !!batchId,
+  // In V2, batchId is actually a task_id (string)
+  const taskId = batchId ? String(batchId) : null
+
+  // Get task details
+  const { data: taskDetail, isLoading } = useQuery({
+    queryKey: ['taskDetail', taskId],
+    queryFn: () => apiClientV2.getTask(taskId!),
+    enabled: !!taskId,
+    refetchInterval: (query) => {
+      const data = query.state.data
+      if (!data) return 2000
+      if (data.status === 'completed' || data.status === 'failed') {
+        return false
+      }
+      return 2000
+    },
   })
 
-  // Get OCR result for selected file
-  const { data: ocrResult, isLoading: isLoadingResult } = useQuery({
-    queryKey: ['ocrResult', selectedFileId],
-    queryFn: () => apiClient.getOCRResult(selectedFileId!),
-    enabled: !!selectedFileId,
-  })
-
-  const handleViewResult = (fileId: number) => {
-    setSelectedFileId(fileId)
-  }
-
-  const handleDownloadPDF = async (fileId: number) => {
+  const handleDownloadPDF = async () => {
+    if (!taskId) return
     try {
-      const blob = await apiClient.exportPDF(fileId)
-      const url = window.URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = `ocr-result-${fileId}.pdf`
-      document.body.appendChild(a)
-      a.click()
-      window.URL.revokeObjectURL(url)
-      document.body.removeChild(a)
-
+      await apiClientV2.downloadPDF(taskId)
       toast({
         title: t('export.exportSuccess'),
         description: 'PDF 已下載',
@@ -62,12 +52,57 @@ export default function ResultsPage() {
     }
   }
 
-  const handleExport = () => {
-    navigate('/export')
+  const handleDownloadMarkdown = async () => {
+    if (!taskId) return
+    try {
+      await apiClientV2.downloadMarkdown(taskId)
+      toast({
+        title: t('export.exportSuccess'),
+        description: 'Markdown 已下載',
+        variant: 'success',
+      })
+    } catch (error: any) {
+      toast({
+        title: t('export.exportError'),
+        description: error.response?.data?.detail || t('errors.networkError'),
+        variant: 'destructive',
+      })
+    }
   }
 
-  // Show helpful message when no batch is selected
-  if (!batchId) {
+  const handleDownloadJSON = async () => {
+    if (!taskId) return
+    try {
+      await apiClientV2.downloadJSON(taskId)
+      toast({
+        title: t('export.exportSuccess'),
+        description: 'JSON 已下載',
+        variant: 'success',
+      })
+    } catch (error: any) {
+      toast({
+        title: t('export.exportError'),
+        description: error.response?.data?.detail || t('errors.networkError'),
+        variant: 'destructive',
+      })
+    }
+  }
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'completed':
+        return <Badge variant="default" className="bg-green-600">已完成</Badge>
+      case 'processing':
+        return <Badge variant="default">處理中</Badge>
+      case 'failed':
+        return <Badge variant="destructive">失敗</Badge>
+      default:
+        return <Badge variant="secondary">待處理</Badge>
+    }
+  }
+
+  // Show helpful message when no task is selected
+  if (!taskId) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
         <Card className="max-w-md text-center">
@@ -81,7 +116,7 @@ export default function ResultsPage() {
           </CardHeader>
           <CardContent className="space-y-4">
             <p className="text-muted-foreground">
-              {t('results.noBatchMessage', { defaultValue: '尚未選擇任何批次。請先上傳並處理檔案。' })}
+              {t('results.noBatchMessage', { defaultValue: '尚未選擇任何任務。請先上傳並處理檔案。' })}
             </p>
             <Button onClick={() => navigate('/upload')} size="lg">
               {t('results.goToUpload', { defaultValue: '前往上傳頁面' })}
@@ -92,7 +127,35 @@ export default function ResultsPage() {
     )
   }
 
-  const completedFiles = batchStatus?.files.filter((f) => f.status === 'completed') || []
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center">
+          <Loader2 className="w-12 h-12 animate-spin text-primary mx-auto mb-4" />
+          <p className="text-muted-foreground">載入任務結果...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!taskDetail) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <Card className="max-w-md text-center">
+          <CardHeader>
+            <CardTitle>任務不存在</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Button onClick={() => navigate('/tasks')}>
+              查看任務歷史
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  const isCompleted = taskDetail.status === 'completed'
 
   return (
     <div className="space-y-6">
@@ -102,115 +165,124 @@ export default function ResultsPage() {
           <div>
             <h1 className="page-title">{t('results.title')}</h1>
             <p className="text-muted-foreground mt-1">
-              批次 ID: <span className="font-mono text-primary">{batchId}</span> · 已完成 {completedFiles.length} 個檔案
+              任務 ID: <span className="font-mono text-primary">{taskId}</span>
+              {taskDetail.filename && ` · ${taskDetail.filename}`}
             </p>
           </div>
-          <div className="flex gap-3">
-            <Button onClick={handleExport} className="gap-2">
-              <Download className="w-4 h-4" />
-              {t('nav.export')}
-            </Button>
-            <Button
-              variant="outline"
-              disabled
-              title={t('translation.comingSoon')}
-              className="gap-2"
-            >
-              <Languages className="w-4 h-4" />
-              {t('translation.title')}
-              <span className="text-xs bg-warning/20 text-warning px-2 py-0.5 rounded ml-1">
-                即將推出
-              </span>
-            </Button>
+          <div className="flex gap-3 items-center">
+            {getStatusBadge(taskDetail.status)}
+            {isCompleted && (
+              <>
+                <Button onClick={handleDownloadJSON} variant="outline" className="gap-2">
+                  <FileJson className="w-4 h-4" />
+                  JSON
+                </Button>
+                <Button onClick={handleDownloadMarkdown} variant="outline" className="gap-2">
+                  <FileText className="w-4 h-4" />
+                  Markdown
+                </Button>
+                <Button onClick={handleDownloadPDF} className="gap-2">
+                  <Download className="w-4 h-4" />
+                  PDF
+                </Button>
+              </>
+            )}
           </div>
         </div>
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
-        {/* Results Table - Takes 2 columns */}
-        <div className="lg:col-span-2">
-          <ResultsTable
-            files={batchStatus?.files || []}
-            onViewResult={handleViewResult}
-            onDownloadPDF={handleDownloadPDF}
-          />
-        </div>
-
-        {/* Preview Panel - Takes 3 columns */}
-        <div className="lg:col-span-3">
-          {selectedFileId && ocrResult ? (
-            <div className="space-y-4">
-              {/* Preview Card */}
-              <MarkdownPreview
-                title={`${t('results.viewMarkdown')} - ${ocrResult.filename}`}
-                content={ocrResult.markdown_content}
-              />
-
-              {/* Stats Grid */}
-              <div className="grid grid-cols-3 gap-3">
-                <Card>
-                  <CardContent className="p-4">
-                    <div className="flex items-center gap-3">
-                      <div className="p-2 bg-success/10 rounded-lg">
-                        <TrendingUp className="w-5 h-5 text-success" />
-                      </div>
-                      <div>
-                        <p className="text-xs text-muted-foreground">準確率</p>
-                        <p className="text-lg font-bold text-foreground">
-                          {((ocrResult.confidence || 0) * 100).toFixed(1)}%
-                        </p>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                <Card>
-                  <CardContent className="p-4">
-                    <div className="flex items-center gap-3">
-                      <div className="p-2 bg-primary/10 rounded-lg">
-                        <Clock className="w-5 h-5 text-primary" />
-                      </div>
-                      <div>
-                        <p className="text-xs text-muted-foreground">處理時間</p>
-                        <p className="text-lg font-bold text-foreground">
-                          {(ocrResult.processing_time || 0).toFixed(2)}s
-                        </p>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                <Card>
-                  <CardContent className="p-4">
-                    <div className="flex items-center gap-3">
-                      <div className="p-2 bg-accent/10 rounded-lg">
-                        <Layers className="w-5 h-5 text-accent" />
-                      </div>
-                      <div>
-                        <p className="text-xs text-muted-foreground">文字區塊</p>
-                        <p className="text-lg font-bold text-foreground">
-                          {ocrResult.json_data?.total_text_regions || 0}
-                        </p>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
-          ) : (
-            <Card className="h-full min-h-[400px]">
-              <CardContent className="h-full flex flex-col items-center justify-center p-12">
-                <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
-                  <FileText className="w-8 h-8 text-muted-foreground" />
+      {/* Stats Grid */}
+      {isCompleted && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3">
+                <div className="p-3 bg-primary/10 rounded-lg">
+                  <Clock className="w-6 h-6 text-primary" />
                 </div>
-                <p className="text-muted-foreground text-center">
-                  {isLoadingResult ? t('common.loading') : '選擇左側檔案以查看詳細結果'}
-                </p>
-              </CardContent>
-            </Card>
-          )}
+                <div>
+                  <p className="text-sm text-muted-foreground">處理時間</p>
+                  <p className="text-2xl font-bold">
+                    {taskDetail.processing_time_ms ? (taskDetail.processing_time_ms / 1000).toFixed(2) : '0'}s
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3">
+                <div className="p-3 bg-success/10 rounded-lg">
+                  <TrendingUp className="w-6 h-6 text-success" />
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">處理狀態</p>
+                  <p className="text-2xl font-bold text-success">成功</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3">
+                <div className="p-3 bg-accent/10 rounded-lg">
+                  <Layers className="w-6 h-6 text-accent" />
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">任務類型</p>
+                  <p className="text-2xl font-bold">OCR</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
         </div>
-      </div>
+      )}
+
+      {/* Results Preview */}
+      {isCompleted ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>處理結果預覽</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <MarkdownPreview
+              title={`OCR 結果 - ${taskDetail.filename || '未知檔案'}`}
+              content="請使用上方下載按鈕下載 Markdown 或 JSON 格式查看完整結果"
+            />
+          </CardContent>
+        </Card>
+      ) : taskDetail.status === 'processing' ? (
+        <Card>
+          <CardContent className="p-12 text-center">
+            <Loader2 className="w-16 h-16 animate-spin text-primary mx-auto mb-4" />
+            <p className="text-lg font-semibold">正在處理中...</p>
+            <p className="text-muted-foreground mt-2">請稍候，OCR 處理需要一些時間</p>
+          </CardContent>
+        </Card>
+      ) : taskDetail.status === 'failed' ? (
+        <Card>
+          <CardContent className="p-12 text-center">
+            <AlertCircle className="w-16 h-16 text-destructive mx-auto mb-4" />
+            <p className="text-lg font-semibold text-destructive">處理失敗</p>
+            {taskDetail.error_message && (
+              <p className="text-muted-foreground mt-2">{taskDetail.error_message}</p>
+            )}
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardContent className="p-12 text-center">
+            <Clock className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
+            <p className="text-lg font-semibold">等待處理</p>
+            <p className="text-muted-foreground mt-2">請前往處理頁面啟動 OCR 處理</p>
+            <Button onClick={() => navigate('/processing')} className="mt-4">
+              前往處理頁面
+            </Button>
+          </CardContent>
+        </Card>
+      )}
     </div>
   )
 }

frontend/src/pages/TaskDetailPage.tsx

@@ -0,0 +1,346 @@
+import { useParams, useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import MarkdownPreview from '@/components/MarkdownPreview'
+import { useToast } from '@/components/ui/toast'
+import { apiClientV2 } from '@/services/apiV2'
+import {
+  FileText,
+  Download,
+  AlertCircle,
+  TrendingUp,
+  Clock,
+  Layers,
+  FileJson,
+  Loader2,
+  ArrowLeft,
+  RefreshCw
+} from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+
+export default function TaskDetailPage() {
+  const { taskId } = useParams<{ taskId: string }>()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { toast } = useToast()
+
+  // Get task details
+  const { data: taskDetail, isLoading, refetch } = useQuery({
+    queryKey: ['taskDetail', taskId],
+    queryFn: () => apiClientV2.getTask(taskId!),
+    enabled: !!taskId,
+    refetchInterval: (query) => {
+      const data = query.state.data
+      if (!data) return 2000
+      if (data.status === 'completed' || data.status === 'failed') {
+        return false
+      }
+      return 2000 // Poll every 2 seconds for processing tasks
+    },
+  })
+
+  const handleDownloadPDF = async () => {
+    if (!taskId) return
+    try {
+      await apiClientV2.downloadPDF(taskId)
+      toast({
+        title: t('export.exportSuccess'),
+        description: 'PDF 已下載',
+        variant: 'success',
+      })
+    } catch (error: any) {
+      toast({
+        title: t('export.exportError'),
+        description: error.response?.data?.detail || t('errors.networkError'),
+        variant: 'destructive',
+      })
+    }
+  }
+
+  const handleDownloadMarkdown = async () => {
+    if (!taskId) return
+    try {
+      await apiClientV2.downloadMarkdown(taskId)
+      toast({
+        title: t('export.exportSuccess'),
+        description: 'Markdown 已下載',
+        variant: 'success',
+      })
+    } catch (error: any) {
+      toast({
+        title: t('export.exportError'),
+        description: error.response?.data?.detail || t('errors.networkError'),
+        variant: 'destructive',
+      })
+    }
+  }
+
+  const handleDownloadJSON = async () => {
+    if (!taskId) return
+    try {
+      await apiClientV2.downloadJSON(taskId)
+      toast({
+        title: t('export.exportSuccess'),
+        description: 'JSON 已下載',
+        variant: 'success',
+      })
+    } catch (error: any) {
+      toast({
+        title: t('export.exportError'),
+        description: error.response?.data?.detail || t('errors.networkError'),
+        variant: 'destructive',
+      })
+    }
+  }
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'completed':
+        return <Badge variant="default" className="bg-green-600">已完成</Badge>
+      case 'processing':
+        return <Badge variant="default">處理中</Badge>
+      case 'failed':
+        return <Badge variant="destructive">失敗</Badge>
+      default:
+        return <Badge variant="secondary">待處理</Badge>
+    }
+  }
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr)
+    return date.toLocaleString('zh-TW')
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center">
+          <Loader2 className="w-12 h-12 animate-spin text-primary mx-auto mb-4" />
+          <p className="text-muted-foreground">載入任務詳情...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!taskDetail) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <Card className="max-w-md text-center">
+          <CardHeader>
+            <div className="flex justify-center mb-4">
+              <AlertCircle className="w-16 h-16 text-destructive" />
+            </div>
+            <CardTitle>任務不存在</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-muted-foreground">找不到任務 ID: {taskId}</p>
+            <Button onClick={() => navigate('/tasks')}>
+              返回任務歷史
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  const isCompleted = taskDetail.status === 'completed'
+  const isProcessing = taskDetail.status === 'processing'
+  const isFailed = taskDetail.status === 'failed'
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="page-header">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Button variant="outline" onClick={() => navigate('/tasks')} className="gap-2">
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </Button>
+            <div>
+              <h1 className="page-title">任務詳情</h1>
+              <p className="text-muted-foreground mt-1">
+                任務 ID: <span className="font-mono text-primary">{taskId}</span>
+              </p>
+            </div>
+          </div>
+          <div className="flex gap-3 items-center">
+            <Button onClick={() => refetch()} variant="outline" size="sm" className="gap-2">
+              <RefreshCw className="w-4 h-4" />
+              刷新
+            </Button>
+            {getStatusBadge(taskDetail.status)}
+          </div>
+        </div>
+      </div>
+
+      {/* Task Info Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <FileText className="w-5 h-5" />
+            任務資訊
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-3">
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">檔案名稱</p>
+                <p className="font-medium">{taskDetail.filename || '未知檔案'}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">建立時間</p>
+                <p className="font-medium">{formatDate(taskDetail.created_at)}</p>
+              </div>
+              {taskDetail.completed_at && (
+                <div>
+                  <p className="text-sm text-muted-foreground mb-1">完成時間</p>
+                  <p className="font-medium">{formatDate(taskDetail.completed_at)}</p>
+                </div>
+              )}
+            </div>
+            <div className="space-y-3">
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">任務狀態</p>
+                {getStatusBadge(taskDetail.status)}
+              </div>
+              {taskDetail.processing_time_ms && (
+                <div>
+                  <p className="text-sm text-muted-foreground mb-1">處理時間</p>
+                  <p className="font-medium">{(taskDetail.processing_time_ms / 1000).toFixed(2)} 秒</p>
+                </div>
+              )}
+              {taskDetail.updated_at && (
+                <div>
+                  <p className="text-sm text-muted-foreground mb-1">最後更新</p>
+                  <p className="font-medium">{formatDate(taskDetail.updated_at)}</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Download Options */}
+      {isCompleted && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Download className="w-5 h-5" />
+              下載結果
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+              <Button onClick={handleDownloadJSON} variant="outline" className="gap-2 h-20 flex-col">
+                <FileJson className="w-8 h-8" />
+                <span>JSON 格式</span>
+              </Button>
+              <Button onClick={handleDownloadMarkdown} variant="outline" className="gap-2 h-20 flex-col">
+                <FileText className="w-8 h-8" />
+                <span>Markdown 格式</span>
+              </Button>
+              <Button onClick={handleDownloadPDF} className="gap-2 h-20 flex-col">
+                <Download className="w-8 h-8" />
+                <span>PDF 格式</span>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Error Message */}
+      {isFailed && taskDetail.error_message && (
+        <Card className="border-destructive">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-destructive">
+              <AlertCircle className="w-5 h-5" />
+              錯誤訊息
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-destructive">{taskDetail.error_message}</p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Processing Status */}
+      {isProcessing && (
+        <Card>
+          <CardContent className="p-12 text-center">
+            <Loader2 className="w-16 h-16 animate-spin text-primary mx-auto mb-4" />
+            <p className="text-lg font-semibold">正在處理中...</p>
+            <p className="text-muted-foreground mt-2">請稍候，OCR 處理需要一些時間</p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Stats Grid (for completed tasks) */}
+      {isCompleted && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3">
+                <div className="p-3 bg-primary/10 rounded-lg">
+                  <Clock className="w-6 h-6 text-primary" />
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">處理時間</p>
+                  <p className="text-2xl font-bold">
+                    {taskDetail.processing_time_ms ? (taskDetail.processing_time_ms / 1000).toFixed(2) : '0'}s
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3">
+                <div className="p-3 bg-success/10 rounded-lg">
+                  <TrendingUp className="w-6 h-6 text-success" />
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">處理狀態</p>
+                  <p className="text-2xl font-bold text-success">成功</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3">
+                <div className="p-3 bg-accent/10 rounded-lg">
+                  <Layers className="w-6 h-6 text-accent" />
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">任務類型</p>
+                  <p className="text-2xl font-bold">OCR</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Result Preview */}
+      {isCompleted && (
+        <Card>
+          <CardHeader>
+            <CardTitle>處理結果預覽</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <MarkdownPreview
+              title={`OCR 結果 - ${taskDetail.filename || '未知檔案'}`}
+              content="請使用上方下載按鈕下載 Markdown、JSON 或 PDF 格式查看完整結果"
+            />
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}