feat(web): Sprint 4 Phase E — 前端處置統計儀表板

E1: /reports 頁面升級為完整處置統計儀表板
- 頂部 3 KPI (處置總次數/自動化率/人工介入率)
- 四大計數卡片 (自動修復/人工審核/手動處理/冷啟動信任)
- 堆疊分佈條 (百分比視覺化)
- 按異常類型明細表格
- 串接 GET /api/v1/stats/disposition

E3: /auto-repair 頁面加入處置概況 4 卡片
E4: /neural-command stats tab 加入處置分佈區塊
E5: 新增 25+ i18n 翻譯鍵 (zh-TW + en)

全部頁面 next build 通過，統帥鐵律: 無假數據，無資料顯示 '--'

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

apps/web/messages/en.json

@@ -681,7 +681,11 @@
     "execFailed": "Failed: {error}",
     "executing": "Executing...",
     "execute": "Execute Repair",
-    "noEligible": "No incidents eligible for auto-repair"
+    "noEligible": "No incidents eligible for auto-repair",
+    "dispositionAuto": "Auto Repair",
+    "dispositionHuman": "Human Approved",
+    "dispositionManual": "Manual Resolved",
+    "dispositionCold": "Cold Start Trust"
   },
   "openclawPanel": {
     "patrolling": "[AGENT] patrolling...",
@@ -793,7 +797,17 @@
     "avgResolutionTime": "Avg Resolution Time",
     "resolutionRate": "Resolution Rate",
     "fetchError": "Failed to load report data",
-    "noData": "No statistics available"
+    "noData": "No statistics available",
+    "totalDispositions": "Total Dispositions",
+    "autoRate": "Automation Rate",
+    "humanRate": "Human Intervention Rate",
+    "autoRepair": "Auto Repair",
+    "humanApproved": "Human Approved",
+    "manualResolved": "Manual Resolved",
+    "coldStartTrust": "Cold Start Trust",
+    "dispositionBreakdown": "Disposition Breakdown",
+    "byAnomalyType": "By Anomaly Type",
+    "anomalyKey": "Anomaly Type"
   },
   "apm": {
     "title": "APM",
@@ -1068,6 +1082,12 @@
     "relatedServices": "Related Services",
     "dataImpact": "Data Impact",
     "dryRunChecks": "Dry-Run Checks",
-    "approvalQueueCount": "{count} pending approvals"
+    "approvalQueueCount": "{count} pending approvals",
+    "dispositionBreakdown": "Disposition Breakdown",
+    "dispositionAuto": "Auto Repair",
+    "dispositionHuman": "Human Approved",
+    "dispositionManual": "Manual Resolved",
+    "dispositionCold": "Cold Start Trust",
+    "autoRateLabel": "Automation Rate"
   }
 }

apps/web/messages/zh-TW.json

@@ -682,7 +682,11 @@
     "execFailed": "執行失敗: {error}",
     "executing": "執行中...",
     "execute": "執行修復",
-    "noEligible": "目前無符合自動修復條件的 Incident"
+    "noEligible": "目前無符合自動修復條件的 Incident",
+    "dispositionAuto": "自動修復",
+    "dispositionHuman": "人工審核",
+    "dispositionManual": "手動處理",
+    "dispositionCold": "冷啟動信任"
   },
   "openclawPanel": {
     "patrolling": "[AGENT] patrolling...",
@@ -794,7 +798,17 @@
     "avgResolutionTime": "平均解決時間",
     "resolutionRate": "解決率",
     "fetchError": "無法取得報表資料",
-    "noData": "目前無統計資料"
+    "noData": "目前無統計資料",
+    "totalDispositions": "處置總次數",
+    "autoRate": "自動化率",
+    "humanRate": "人工介入率",
+    "autoRepair": "自動修復",
+    "humanApproved": "人工審核",
+    "manualResolved": "手動處理",
+    "coldStartTrust": "冷啟動信任",
+    "dispositionBreakdown": "處置方式分佈",
+    "byAnomalyType": "按異常類型明細",
+    "anomalyKey": "異常類型"
   },
   "apm": {
     "title": "APM",
@@ -1069,6 +1083,12 @@
     "relatedServices": "相關服務",
     "dataImpact": "資料影響",
     "dryRunChecks": "Dry-Run 檢查",
-    "approvalQueueCount": "共 {count} 個待審核項目"
+    "approvalQueueCount": "共 {count} 個待審核項目",
+    "dispositionBreakdown": "告警處置分佈",
+    "dispositionAuto": "自動修復",
+    "dispositionHuman": "人工審核",
+    "dispositionManual": "手動處理",
+    "dispositionCold": "冷啟動信任",
+    "autoRateLabel": "自動化率"
   }
 }

apps/web/src/app/[locale]/auto-repair/page.tsx

@@ -28,12 +28,23 @@ import {
 // Types
 // =============================================================================
 
+// 2026-04-07 Claude Code: Sprint 4 C2 — disposition_summary 擴充
+interface DispositionSummary {
+  auto_repair: number
+  human_approved: number
+  manual_resolved: number
+  cold_start_trust: number
+  total: number
+  auto_rate: number
+}
+
 interface AutoRepairStats {
   approved_playbooks: number
   high_quality_playbooks: number
   total_executions: number
   overall_success_rate: number
   auto_repair_eligible: boolean
+  disposition_summary?: DispositionSummary
 }
 
 interface EvaluateResponse {
@@ -264,6 +275,7 @@ export default function AutoRepairPage({ params }: { params: { locale: string }
   const [stats, setStats] = useState<AutoRepairStats | null>(null)
   const [statsLoading, setStatsLoading] = useState(true)
   const [statsError, setStatsError] = useState<string | null>(null)
+  const [disposition, setDisposition] = useState<{ total: number; auto_repair: number; human_approved: number; manual_resolved: number; cold_start_trust: number; auto_rate: number } | null>(null)
   const abortRef = useRef<AbortController | null>(null)
 
   const { incidents, isLoading: incidentsLoading } = useIncidents({
@@ -284,9 +296,16 @@ export default function AutoRepairPage({ params }: { params: { locale: string }
     setStatsLoading(true)
     setStatsError(null)
     try {
-      const res = await fetch(`${base}/api/v1/auto-repair/stats`, { signal: ctrl.signal })
+      const [res, dispRes] = await Promise.all([
+        fetch(`${base}/api/v1/auto-repair/stats`, { signal: ctrl.signal }),
+        fetch(`${base}/api/v1/stats/disposition`, { signal: ctrl.signal }).catch(() => null),
+      ])
       if (!res.ok) throw new Error(`HTTP ${res.status}`)
       setStats(await res.json())
+      if (dispRes?.ok) {
+        const d = await dispRes.json()
+        setDisposition(d.summary ?? null)
+      }
     } catch (e) {
       if (e instanceof Error && e.name === 'AbortError') return
       setStatsError(e instanceof Error ? e.message : 'Unknown error')
@@ -361,6 +380,28 @@ export default function AutoRepairPage({ params }: { params: { locale: string }
         </div>
       )}
 
+      {/* Sprint 4 E3: 處置概況 */}
+      {disposition && disposition.total > 0 && (
+        <div className="grid grid-cols-4 gap-2 mb-6">
+          <div className="rounded-lg border border-green-500/25 bg-green-500/5 p-3 text-center">
+            <p className="text-[10px] font-bold text-green-500 uppercase tracking-wider">{t('dispositionAuto')}</p>
+            <p className="text-xl font-bold text-green-500 tabular-nums mt-1">{disposition.auto_repair}</p>
+          </div>
+          <div className="rounded-lg border border-orange-500/25 bg-orange-500/5 p-3 text-center">
+            <p className="text-[10px] font-bold text-orange-500 uppercase tracking-wider">{t('dispositionHuman')}</p>
+            <p className="text-xl font-bold text-orange-500 tabular-nums mt-1">{disposition.human_approved}</p>
+          </div>
+          <div className="rounded-lg border border-purple-500/25 bg-purple-500/5 p-3 text-center">
+            <p className="text-[10px] font-bold text-purple-500 uppercase tracking-wider">{t('dispositionManual')}</p>
+            <p className="text-xl font-bold text-purple-500 tabular-nums mt-1">{disposition.manual_resolved}</p>
+          </div>
+          <div className="rounded-lg border border-blue-500/25 bg-blue-500/5 p-3 text-center">
+            <p className="text-[10px] font-bold text-blue-500 uppercase tracking-wider">{t('dispositionCold')}</p>
+            <p className="text-xl font-bold text-blue-500 tabular-nums mt-1">{disposition.cold_start_trust}</p>
+          </div>
+        </div>
+      )}
+
       {/* Eligible indicator */}
       {stats && (
         <div className={cn(

apps/web/src/app/[locale]/neural-command/page.tsx

@@ -64,16 +64,18 @@ export default function NeuralCommandPage({ params }: { params: { locale: string
   const [pendingApprovals, setPendingApprovals] = useState(0)
   const [pendingApprovalList, setPendingApprovalList] = useState<PendingApprovalItem[]>([])
   const [activeIncidents, setActiveIncidents] = useState<ActiveIncident[]>([])
+  const [dispositionSummary, setDispositionSummary] = useState<{ total: number; auto_repair: number; human_approved: number; manual_resolved: number; cold_start_trust: number; auto_rate: number } | null>(null)
 
 
   const fetchData = useCallback(async () => {
     try {
-      const [statsRes, pbRes, histRes, approvalsRes, incidentsRes] = await Promise.all([
+      const [statsRes, pbRes, histRes, approvalsRes, incidentsRes, dispRes] = await Promise.all([
         fetch('/api/v1/auto-repair/stats'),
         fetch('/api/v1/playbooks/'),
         fetch('/api/v1/auto-repair/history?limit=20'),
         fetch('/api/v1/approvals/pending'),
         fetch('/api/v1/incidents?status=firing&limit=10'),
+        fetch('/api/v1/stats/disposition').catch(() => null),
       ])
 
       if (statsRes.ok) {
@@ -97,6 +99,10 @@ export default function NeuralCommandPage({ params }: { params: { locale: string
         const data = await incidentsRes.json()
         setActiveIncidents(data.incidents ?? [])
       }
+      if (dispRes?.ok) {
+        const data = await dispRes.json()
+        setDispositionSummary(data.summary ?? null)
+      }
 
       setLastRefresh(new Date())
     } catch {
@@ -191,7 +197,7 @@ export default function NeuralCommandPage({ params }: { params: { locale: string
             <NeuralLiveCenter stats={stats} history={history} pendingCount={pendingApprovals} activeIncidents={activeIncidents} />
           )}
           {activeTab === 'stats' && (
-            <NeuralStats stats={stats} playbooks={approvedPlaybooks} history={history} pendingCount={pendingApprovals} />
+            <NeuralStats stats={stats} playbooks={approvedPlaybooks} history={history} pendingCount={pendingApprovals} disposition={dispositionSummary} />
           )}
           {activeTab === 'approval' && (
             <NeuralApprovalPanel approvals={pendingApprovalList} onRefresh={fetchData} />

apps/web/src/app/[locale]/reports/page.tsx

@@ -1,107 +1,317 @@
 'use client'
 
 /**
- * 報表 Page
- * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
- * @updated 2026-04-02 ogt - 升級為真實 UI，串接 /api/v1/stats/incident-summary + /api/v1/stats/resolution-stats
+ * 報表 Page — 完整處置統計儀表板
+ * ====================================
+ * Sprint 4 E1: 告警處置統計主戰場
+ *
+ * 串接:
+ *   GET /api/v1/stats/incident-summary
+ *   GET /api/v1/stats/resolution-stats
+ *   GET /api/v1/stats/disposition (Sprint 4 新增)
+ *
+ * 統帥鐵律: 禁止假數據！無資料顯示 '--'
+ * i18n: 100% next-intl
+ *
+ * 2026-04-02 Claude Code — 初版
+ * 2026-04-07 Claude Code — Sprint 4 E1 處置統計升級
  */
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 import { useTranslations } from 'next-intl'
 import { AppLayout } from '@/components/layout'
+import { cn } from '@/lib/utils'
+import { Bot, UserCheck, Wrench, Sparkles, TrendingUp, BarChart3, Inbox, RefreshCw } from 'lucide-react'
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? ''
 
+// =============================================================================
+// Types (對齊後端 DispositionResponse)
+// =============================================================================
+
+interface DispositionSummary {
+  total: number
+  auto_repair: number
+  human_approved: number
+  manual_resolved: number
+  cold_start_trust: number
+  auto_rate: number
+  human_rate: number
+}
+
+interface DispositionByAnomaly {
+  anomaly_key: string
+  alert_name: string
+  disposition: DispositionSummary
+}
+
+interface DispositionResponse {
+  summary: DispositionSummary
+  by_anomaly: DispositionByAnomaly[]
+}
+
 interface IncidentSummary {
   total?: number
   resolved?: number
   unresolved?: number
-  [key: string]: unknown
 }
 
 interface ResolutionStats {
   resolutionRate?: number
   avgResolutionTime?: string | number
-  [key: string]: unknown
 }
 
-function StatCard({ label, value }: { label: string; value: string | number }) {
-  return (
-    <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, padding: '20px 24px', minWidth: 140 }}>
-      <div style={{ fontSize: 11, color: '#87867f', fontFamily: 'var(--font-body), monospace', marginBottom: 6 }}>{label}</div>
-      <div style={{ fontSize: 28, fontWeight: 700, color: '#141413', fontFamily: 'var(--font-body), monospace' }}>{value}</div>
-    </div>
-  )
-}
+// =============================================================================
+// Page
+// =============================================================================
 
 export default function ReportsPage({ params }: { params: { locale: string } }) {
   const t = useTranslations('reports')
   const tc = useTranslations('common')
   const [summary, setSummary] = useState<IncidentSummary | null>(null)
   const [resolution, setResolution] = useState<ResolutionStats | null>(null)
+  const [disposition, setDisposition] = useState<DispositionResponse | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(false)
 
-  useEffect(() => {
+  const fetchAll = () => {
     setLoading(true)
     setError(false)
     Promise.all([
       fetch(`${API_BASE}/api/v1/stats/incident-summary`).then(r => r.json()).catch(() => null),
       fetch(`${API_BASE}/api/v1/stats/resolution-stats`).then(r => r.json()).catch(() => null),
+      fetch(`${API_BASE}/api/v1/stats/disposition`).then(r => r.json()).catch(() => null),
     ])
-      .then(([s, r]) => {
+      .then(([s, r, d]) => {
         setSummary(s)
         setResolution(r)
+        setDisposition(d)
       })
       .catch(() => setError(true))
       .finally(() => setLoading(false))
-  }, [])
+  }
+
+  useEffect(() => { fetchAll() }, [])
+
+  const ds = disposition?.summary
+
+  // 處置分佈百分比 (用於堆疊條)
+  const pcts = useMemo(() => {
+    if (!ds || ds.total === 0) return null
+    const t = ds.total
+    return {
+      auto: Math.round((ds.auto_repair / t) * 100),
+      human: Math.round((ds.human_approved / t) * 100),
+      manual: Math.round((ds.manual_resolved / t) * 100),
+      cold: Math.round((ds.cold_start_trust / t) * 100),
+    }
+  }, [ds])
 
   return (
     <AppLayout locale={params.locale}>
-      <div style={{ padding: '24px', background: '#f5f4ed', minHeight: '100%' }}>
-        <div style={{ marginBottom: '20px' }}>
-          <h1 style={{ fontSize: 18, fontWeight: 700, color: '#141413', margin: 0, fontFamily: 'var(--font-body), monospace' }}>{t('title')}</h1>
-          <p style={{ fontSize: 12, color: '#87867f', margin: '4px 0 0', fontFamily: 'var(--font-body), monospace' }}>{t('subtitle')}</p>
+      <div className="p-6 space-y-6 min-h-full">
+
+        {/* Header */}
+        <div className="flex items-start justify-between">
+          <div>
+            <h1 className="text-lg font-semibold tracking-tight">{t('title')}</h1>
+            <p className="text-xs text-muted-foreground mt-0.5">{t('subtitle')}</p>
+          </div>
+          <button
+            onClick={fetchAll}
+            className="p-2 rounded-lg hover:bg-muted transition-colors"
+            title={tc('refresh')}
+          >
+            <RefreshCw className={cn('w-4 h-4 text-muted-foreground', loading && 'animate-spin')} />
+          </button>
         </div>
 
         {loading && (
-          <div style={{ textAlign: 'center', padding: '40px', color: '#87867f', fontFamily: 'var(--font-body), monospace', fontSize: 13 }}>{tc('loading')}</div>
+          <div className="text-center py-16 text-muted-foreground text-sm">{tc('loading')}</div>
         )}
 
         {!loading && error && (
-          <div style={{ textAlign: 'center', padding: '40px', color: '#f44336', fontFamily: 'var(--font-body), monospace', fontSize: 13 }}>{t('fetchError')}</div>
+          <div className="text-center py-16 text-red-500 text-sm">{t('fetchError')}</div>
         )}
 
         {!loading && !error && (
           <>
-            {/* Incident Summary Section */}
-            <div style={{ marginBottom: 24 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
-                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#d97757', display: 'inline-block' }} />
-                <span style={{ fontSize: 14, fontWeight: 700, color: '#141413', fontFamily: 'var(--font-body), monospace' }}>{t('incidentSummary')}</span>
+            {/* ── 頂部 KPI 3 卡 ── */}
+            <div className="grid grid-cols-3 gap-4">
+              <KPICard
+                icon={<BarChart3 className="w-5 h-5 text-blue-500" />}
+                label={t('totalDispositions')}
+                value={ds?.total ?? '--'}
+                color="text-blue-500"
+              />
+              <KPICard
+                icon={<Bot className="w-5 h-5 text-green-500" />}
+                label={t('autoRate')}
+                value={ds ? `${Math.round(ds.auto_rate * 100)}%` : '--'}
+                color="text-green-500"
+              />
+              <KPICard
+                icon={<UserCheck className="w-5 h-5 text-orange-500" />}
+                label={t('humanRate')}
+                value={ds ? `${Math.round(ds.human_rate * 100)}%` : '--'}
+                color="text-orange-500"
+              />
+            </div>
+
+            {/* ── 四大計數卡片 ── */}
+            <div className="grid grid-cols-4 gap-3">
+              <DispositionCard
+                icon={<Bot className="w-4 h-4" />}
+                label={t('autoRepair')}
+                count={ds?.auto_repair ?? 0}
+                color="text-green-500"
+                bg="bg-green-500/10"
+                border="border-green-500/25"
+              />
+              <DispositionCard
+                icon={<UserCheck className="w-4 h-4" />}
+                label={t('humanApproved')}
+                count={ds?.human_approved ?? 0}
+                color="text-orange-500"
+                bg="bg-orange-500/10"
+                border="border-orange-500/25"
+              />
+              <DispositionCard
+                icon={<Wrench className="w-4 h-4" />}
+                label={t('manualResolved')}
+                count={ds?.manual_resolved ?? 0}
+                color="text-purple-500"
+                bg="bg-purple-500/10"
+                border="border-purple-500/25"
+              />
+              <DispositionCard
+                icon={<Sparkles className="w-4 h-4" />}
+                label={t('coldStartTrust')}
+                count={ds?.cold_start_trust ?? 0}
+                color="text-blue-500"
+                bg="bg-blue-500/10"
+                border="border-blue-500/25"
+              />
+            </div>
+
+            {/* ── 堆疊分佈條 ── */}
+            {pcts && (
+              <div className="rounded-xl border border-border bg-card p-4">
+                <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3">{t('dispositionBreakdown')}</p>
+                <div className="flex h-4 rounded-full overflow-hidden">
+                  {pcts.auto > 0 && <div className="bg-green-500 transition-all" style={{ width: `${pcts.auto}%` }} title={`${t('autoRepair')}: ${pcts.auto}%`} />}
+                  {pcts.cold > 0 && <div className="bg-blue-500 transition-all" style={{ width: `${pcts.cold}%` }} title={`${t('coldStartTrust')}: ${pcts.cold}%`} />}
+                  {pcts.human > 0 && <div className="bg-orange-500 transition-all" style={{ width: `${pcts.human}%` }} title={`${t('humanApproved')}: ${pcts.human}%`} />}
+                  {pcts.manual > 0 && <div className="bg-purple-500 transition-all" style={{ width: `${pcts.manual}%` }} title={`${t('manualResolved')}: ${pcts.manual}%`} />}
+                </div>
+                <div className="flex items-center gap-4 mt-2 text-[10px] text-muted-foreground">
+                  <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-green-500" />{t('autoRepair')} {pcts.auto}%</span>
+                  <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-blue-500" />{t('coldStartTrust')} {pcts.cold}%</span>
+                  <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-orange-500" />{t('humanApproved')} {pcts.human}%</span>
+                  <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-purple-500" />{t('manualResolved')} {pcts.manual}%</span>
+                </div>
               </div>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
-                <StatCard label={t('total')} value={summary?.total ?? '--'} />
-                <StatCard label={t('resolved')} value={summary?.resolved ?? '--'} />
-                <StatCard label={t('unresolved')} value={summary?.unresolved ?? '--'} />
+            )}
+
+            {/* ── 按異常類型明細 ── */}
+            {disposition?.by_anomaly && disposition.by_anomaly.length > 0 && (
+              <div className="rounded-xl border border-border bg-card p-4">
+                <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3">{t('byAnomalyType')}</p>
+                <table className="w-full">
+                  <thead>
+                    <tr className="text-[10px] text-muted-foreground uppercase tracking-wider">
+                      <th className="text-left pb-2 font-medium">{t('anomalyKey')}</th>
+                      <th className="text-right pb-2 font-medium">{t('autoRepair')}</th>
+                      <th className="text-right pb-2 font-medium">{t('humanApproved')}</th>
+                      <th className="text-right pb-2 font-medium">{t('manualResolved')}</th>
+                      <th className="text-right pb-2 font-medium">{t('coldStartTrust')}</th>
+                      <th className="text-right pb-2 font-medium">{t('totalDispositions')}</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-border">
+                    {disposition.by_anomaly.map(item => (
+                      <tr key={item.anomaly_key}>
+                        <td className="py-2 text-xs font-mono">{item.alert_name || item.anomaly_key.slice(0, 12)}</td>
+                        <td className="py-2 text-xs text-right text-green-500 font-semibold">{item.disposition.auto_repair}</td>
+                        <td className="py-2 text-xs text-right text-orange-500 font-semibold">{item.disposition.human_approved}</td>
+                        <td className="py-2 text-xs text-right text-purple-500 font-semibold">{item.disposition.manual_resolved}</td>
+                        <td className="py-2 text-xs text-right text-blue-500 font-semibold">{item.disposition.cold_start_trust}</td>
+                        <td className="py-2 text-xs text-right font-bold">{item.disposition.total}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {/* ── 既有: 事件摘要 ── */}
+            <div className="grid grid-cols-2 gap-4">
+              <div className="rounded-xl border border-border bg-card p-4">
+                <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3">{t('incidentSummary')}</p>
+                <div className="grid grid-cols-3 gap-3">
+                  <MiniStat label={t('total')} value={summary?.total ?? '--'} />
+                  <MiniStat label={t('resolved')} value={summary?.resolved ?? '--'} />
+                  <MiniStat label={t('unresolved')} value={summary?.unresolved ?? '--'} />
+                </div>
+              </div>
+              <div className="rounded-xl border border-border bg-card p-4">
+                <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3">{t('resolutionStats')}</p>
+                <div className="grid grid-cols-2 gap-3">
+                  <MiniStat label={t('resolutionRate')} value={resolution?.resolutionRate != null ? `${resolution.resolutionRate}%` : '--'} />
+                  <MiniStat label={t('avgResolutionTime')} value={resolution?.avgResolutionTime ?? '--'} />
+                </div>
               </div>
             </div>
 
-            {/* Resolution Stats Section */}
-            <div>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
-                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#d97757', display: 'inline-block' }} />
-                <span style={{ fontSize: 14, fontWeight: 700, color: '#141413', fontFamily: 'var(--font-body), monospace' }}>{t('resolutionStats')}</span>
+            {/* 無資料提示 */}
+            {!ds || ds.total === 0 ? (
+              <div className="rounded-xl border border-border bg-card p-8 flex flex-col items-center justify-center text-muted-foreground">
+                <Inbox className="w-8 h-8 mb-2 opacity-40" />
+                <p className="text-sm">{t('noData')}</p>
               </div>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
-                <StatCard label={t('resolutionRate')} value={resolution?.resolutionRate != null ? `${resolution.resolutionRate}%` : '--'} />
-                <StatCard label={t('avgResolutionTime')} value={resolution?.avgResolutionTime ?? '--'} />
-              </div>
-            </div>
+            ) : null}
           </>
         )}
       </div>
     </AppLayout>
   )
 }
+
+// =============================================================================
+// Sub-components
+// =============================================================================
+
+function KPICard({ icon, label, value, color }: { icon: React.ReactNode; label: string; value: string | number; color: string }) {
+  return (
+    <div className="rounded-xl border border-border bg-card p-5 flex items-center gap-4">
+      <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center flex-shrink-0">
+        {icon}
+      </div>
+      <div>
+        <p className={cn('text-2xl font-bold tabular-nums', color)}>{value}</p>
+        <p className="text-[10px] uppercase tracking-wider text-muted-foreground mt-0.5">{label}</p>
+      </div>
+    </div>
+  )
+}
+
+function DispositionCard({ icon, label, count, color, bg, border }: { icon: React.ReactNode; label: string; count: number; color: string; bg: string; border: string }) {
+  return (
+    <div className={cn('rounded-xl border p-4 text-center', border, bg)}>
+      <div className={cn('flex items-center justify-center gap-1.5 mb-2', color)}>
+        {icon}
+        <span className="text-[10px] font-bold uppercase tracking-wider">{label}</span>
+      </div>
+      <p className={cn('text-3xl font-bold tabular-nums', color)}>{count}</p>
+    </div>
+  )
+}
+
+function MiniStat({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="text-center">
+      <p className="text-xl font-bold tabular-nums">{value}</p>
+      <p className="text-[10px] text-muted-foreground mt-0.5">{label}</p>
+    </div>
+  )
+}

apps/web/src/components/neural-command/NeuralStats.tsx

@@ -15,11 +15,21 @@ import { cn } from '@/lib/utils'
 import { Inbox } from 'lucide-react'
 import type { AutoRepairStats, PlaybookItem, RepairHistoryItem } from './types'
 
+interface DispositionSummary {
+  total: number
+  auto_repair: number
+  human_approved: number
+  manual_resolved: number
+  cold_start_trust: number
+  auto_rate: number
+}
+
 interface Props {
   stats: AutoRepairStats | null
   playbooks: PlaybookItem[]
   history: RepairHistoryItem[]
   pendingCount: number
+  disposition?: DispositionSummary | null
 }
 
 const TYPE_BADGE: Record<string, string> = {
@@ -34,7 +44,7 @@ const SCHEME_ICON: Record<string, { icon: string; color: string; textColor: stri
   'ansible://':  { icon: '⚙️', color: 'bg-purple-500', textColor: 'text-purple-500', bg: 'bg-purple-500/10' },
 }
 
-export function NeuralStats({ stats, playbooks, history, pendingCount }: Props) {
+export function NeuralStats({ stats, playbooks, history, pendingCount, disposition }: Props) {
   const t = useTranslations('neuralCommand')
 
   // 從 history 聚合 scheme 分佈
@@ -105,6 +115,29 @@ export function NeuralStats({ stats, playbooks, history, pendingCount }: Props)
         ))}
       </div>
 
+      {/* ── 處置分佈 (Sprint 4 E4) ── */}
+      {disposition && disposition.total > 0 && (
+        <div className="rounded-xl border border-border bg-card p-4">
+          <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3">{t('dispositionBreakdown')}</p>
+          <div className="grid grid-cols-4 gap-2">
+            {[
+              { label: t('dispositionAuto'), value: disposition.auto_repair, color: 'text-green-500', bg: 'bg-green-500/10', border: 'border-green-500/25' },
+              { label: t('dispositionHuman'), value: disposition.human_approved, color: 'text-orange-500', bg: 'bg-orange-500/10', border: 'border-orange-500/25' },
+              { label: t('dispositionManual'), value: disposition.manual_resolved, color: 'text-purple-500', bg: 'bg-purple-500/10', border: 'border-purple-500/25' },
+              { label: t('dispositionCold'), value: disposition.cold_start_trust, color: 'text-blue-500', bg: 'bg-blue-500/10', border: 'border-blue-500/25' },
+            ].map(d => (
+              <div key={d.label} className={cn('rounded-lg border p-3 text-center', d.border, d.bg)}>
+                <p className={cn('text-[10px] font-bold uppercase tracking-wider', d.color)}>{d.label}</p>
+                <p className={cn('text-2xl font-bold tabular-nums mt-1', d.color)}>{d.value}</p>
+              </div>
+            ))}
+          </div>
+          <p className="text-[10px] text-muted-foreground text-center mt-2">
+            {t('autoRateLabel')}: {Math.round(disposition.auto_rate * 100)}%
+          </p>
+        </div>
+      )}
+
       <div className="grid grid-cols-2 gap-4">
 
         {/* ── Scheme breakdown ── */}