feat: add frontend support for dual-track processing

- Add ProcessingTrack, ProcessingMetadata types to apiV2.ts
- Add analyzeDocument, getProcessingMetadata, downloadUnified API methods
- Update startTask to support ProcessingOptions
- Update TaskDetailPage with:
  - Processing track badge and description display
  - Enhanced stats grid (pages, text regions, tables, images, confidence)
  - UnifiedDocument download option
  - Translation UI preparation (disabled, awaiting backend)
- Mark Section 7 Frontend Updates as completed in tasks.md

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

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

frontend/src/pages/TaskDetailPage.tsx

@@ -16,9 +16,25 @@ import {
   FileJson,
   Loader2,
   ArrowLeft,
-  RefreshCw
+  RefreshCw,
+  Cpu,
+  FileSearch,
+  Table2,
+  Image,
+  BarChart3,
+  Database,
+  Languages,
+  Globe
 } from 'lucide-react'
+import type { ProcessingTrack, ProcessingMetadata } from '@/types/apiV2'
 import { Badge } from '@/components/ui/badge'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select'
 
 export default function TaskDetailPage() {
   const { taskId } = useParams<{ taskId: string }>()
@@ -41,6 +57,41 @@ export default function TaskDetailPage() {
     },
   })
 
+  // Get processing metadata for completed tasks
+  const { data: processingMetadata } = useQuery({
+    queryKey: ['processingMetadata', taskId],
+    queryFn: () => apiClientV2.getProcessingMetadata(taskId!),
+    enabled: !!taskId && taskDetail?.status === 'completed',
+    retry: false,
+  })
+
+  const getTrackBadge = (track?: ProcessingTrack) => {
+    if (!track) return null
+    switch (track) {
+      case 'direct':
+        return <Badge variant="default" className="bg-blue-600">直接提取</Badge>
+      case 'ocr':
+        return <Badge variant="default" className="bg-purple-600">OCR</Badge>
+      case 'hybrid':
+        return <Badge variant="default" className="bg-orange-600">混合</Badge>
+      default:
+        return <Badge variant="secondary">自動</Badge>
+    }
+  }
+
+  const getTrackDescription = (track?: ProcessingTrack) => {
+    switch (track) {
+      case 'direct':
+        return 'PyMuPDF 直接提取'
+      case 'ocr':
+        return 'PP-StructureV3 OCR'
+      case 'hybrid':
+        return '混合處理'
+      default:
+        return 'OCR'
+    }
+  }
+
   const handleDownloadPDF = async () => {
     if (!taskId) return
     try {
@@ -95,6 +146,24 @@ export default function TaskDetailPage() {
     }
   }
 
+  const handleDownloadUnified = async () => {
+    if (!taskId) return
+    try {
+      await apiClientV2.downloadUnified(taskId)
+      toast({
+        title: t('export.exportSuccess'),
+        description: 'UnifiedDocument 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':
@@ -215,6 +284,17 @@ export default function TaskDetailPage() {
                 <p className="text-sm text-muted-foreground mb-1">任務狀態</p>
                 {getStatusBadge(taskDetail.status)}
               </div>
+              {(taskDetail.processing_track || processingMetadata?.processing_track) && (
+                <div>
+                  <p className="text-sm text-muted-foreground mb-1">處理軌道</p>
+                  <div className="flex items-center gap-2">
+                    {getTrackBadge(taskDetail.processing_track || processingMetadata?.processing_track)}
+                    <span className="text-sm text-muted-foreground">
+                      {getTrackDescription(taskDetail.processing_track || processingMetadata?.processing_track)}
+                    </span>
+                  </div>
+                </div>
+              )}
               {taskDetail.processing_time_ms && (
                 <div>
                   <p className="text-sm text-muted-foreground mb-1">處理時間</p>
@@ -242,24 +322,68 @@ export default function TaskDetailPage() {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
               <Button onClick={handleDownloadJSON} variant="outline" className="gap-2 h-20 flex-col">
                 <FileJson className="w-8 h-8" />
-                <span>JSON 格式</span>
+                <span>JSON</span>
+              </Button>
+              <Button onClick={handleDownloadUnified} variant="outline" className="gap-2 h-20 flex-col">
+                <Database className="w-8 h-8" />
+                <span>統一格式</span>
               </Button>
               <Button onClick={handleDownloadMarkdown} variant="outline" className="gap-2 h-20 flex-col">
                 <FileText className="w-8 h-8" />
-                <span>Markdown 格式</span>
+                <span>Markdown</span>
               </Button>
               <Button onClick={handleDownloadPDF} className="gap-2 h-20 flex-col">
                 <Download className="w-8 h-8" />
-                <span>PDF 格式</span>
+                <span>PDF</span>
               </Button>
             </div>
           </CardContent>
         </Card>
       )}
 
+      {/* Translation Options (Coming Soon) */}
+      {isCompleted && (
+        <Card className="opacity-60">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Languages className="w-5 h-5" />
+              翻譯
+              <Badge variant="secondary" className="ml-2">即將推出</Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col md:flex-row items-start md:items-center gap-4">
+              <div className="flex items-center gap-2">
+                <Globe className="w-4 h-4 text-muted-foreground" />
+                <span className="text-sm text-muted-foreground">目標語言：</span>
+                <Select disabled defaultValue="en">
+                  <SelectTrigger className="w-40">
+                    <SelectValue placeholder="選擇語言" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="en">English</SelectItem>
+                    <SelectItem value="ja">日本語</SelectItem>
+                    <SelectItem value="ko">한국어</SelectItem>
+                    <SelectItem value="zh-TW">繁體中文</SelectItem>
+                    <SelectItem value="zh-CN">简体中文</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <Button disabled className="gap-2">
+                <Languages className="w-4 h-4" />
+                開始翻譯
+              </Button>
+              <p className="text-sm text-muted-foreground">
+                翻譯功能正在開發中，敬請期待。
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
       {/* Error Message */}
       {isFailed && taskDetail.error_message && (
         <Card className="border-destructive">
@@ -288,17 +412,18 @@ export default function TaskDetailPage() {
 
       {/* Stats Grid (for completed tasks) */}
       {isCompleted && (
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
           <Card>
-            <CardContent className="p-6">
+            <CardContent className="p-4">
               <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 className="p-2 bg-primary/10 rounded-lg">
+                  <Clock className="w-5 h-5 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 className="text-xs text-muted-foreground">處理時間</p>
+                  <p className="text-lg font-bold">
+                    {processingMetadata?.processing_time_seconds?.toFixed(2) ||
+                     (taskDetail.processing_time_ms ? (taskDetail.processing_time_ms / 1000).toFixed(2) : '0')}s
                   </p>
                 </div>
               </div>
@@ -306,28 +431,82 @@ export default function TaskDetailPage() {
           </Card>
 
           <Card>
-            <CardContent className="p-6">
+            <CardContent className="p-4">
               <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 className="p-2 bg-blue-500/10 rounded-lg">
+                  <Layers className="w-5 h-5 text-blue-500" />
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">處理狀態</p>
-                  <p className="text-2xl font-bold text-success">成功</p>
+                  <p className="text-xs text-muted-foreground">頁數</p>
+                  <p className="text-lg font-bold">
+                    {processingMetadata?.page_count || '-'}
+                  </p>
                 </div>
               </div>
             </CardContent>
           </Card>
 
           <Card>
-            <CardContent className="p-6">
+            <CardContent className="p-4">
               <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 className="p-2 bg-purple-500/10 rounded-lg">
+                  <FileSearch className="w-5 h-5 text-purple-500" />
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">任務類型</p>
-                  <p className="text-2xl font-bold">OCR</p>
+                  <p className="text-xs text-muted-foreground">文本區域</p>
+                  <p className="text-lg font-bold">
+                    {processingMetadata?.total_text_regions || '-'}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-green-500/10 rounded-lg">
+                  <Table2 className="w-5 h-5 text-green-500" />
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">表格</p>
+                  <p className="text-lg font-bold">
+                    {processingMetadata?.total_tables || '-'}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-orange-500/10 rounded-lg">
+                  <Image className="w-5 h-5 text-orange-500" />
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">圖片</p>
+                  <p className="text-lg font-bold">
+                    {processingMetadata?.total_images || '-'}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-cyan-500/10 rounded-lg">
+                  <BarChart3 className="w-5 h-5 text-cyan-500" />
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">平均置信度</p>
+                  <p className="text-lg font-bold">
+                    {processingMetadata?.average_confidence
+                      ? `${(processingMetadata.average_confidence * 100).toFixed(0)}%`
+                      : '-'}
+                  </p>
                 </div>
               </div>
             </CardContent>