From 4b51f9b60d0bf6d1fe09d3529a544d7ac7fdece3 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Sun, 12 Apr 2026 15:39:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(c2):=20ADR-073-C=20C2=20=E2=80=94=20?=
 =?UTF-8?q?=E5=89=8D=E7=AB=AF=E9=A3=9B=E8=BC=AA=20KPI=20=E5=85=83=E4=BB=B6?=
 =?UTF-8?q?=E6=8E=A5=E7=9C=9F=E5=AF=A6=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 FlywheelKPICard 元件
- 消費 GET /api/v1/stats/summary，30 秒輪詢
- 顯示 Playbooks、修復成功率、今日轉化數、KM 向量化率
- 卡住 Incident 警示條
- 插入首頁右欄 PendingApprovalsCard 之後

2026-04-12 ogt (ADR-073-C C2)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/page.tsx            |   4 +
 .../dashboard/flywheel-kpi-card.tsx           | 136 ++++++++++++++++++
 2 files changed, 140 insertions(+)
 create mode 100644 apps/web/src/components/dashboard/flywheel-kpi-card.tsx

diff --git a/apps/web/src/app/[locale]/page.tsx b/apps/web/src/app/[locale]/page.tsx
index e7470142..43a92bc0 100644
--- a/apps/web/src/app/[locale]/page.tsx
+++ b/apps/web/src/app/[locale]/page.tsx
@@ -32,6 +32,7 @@ import { DispositionMini } from '@/components/shared/disposition-mini'
 import { RecentActivity } from '@/components/shared/recent-activity'
 import { PendingApprovalsCard } from '@/components/shared/pending-approvals-card'
 import { AIModelStatus } from '@/components/shared/ai-model-status'
+import { FlywheelKPICard } from '@/components/dashboard/flywheel-kpi-card'
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? ''
 
@@ -924,6 +925,9 @@ export default function Home({ params }: { params: { locale: string } }) {
             {/* 待審批任務 (S7) */}
             <PendingApprovalsCard />
 
+            {/* 飛輪健康度 KPI (ADR-073-C C2) */}
+            <FlywheelKPICard />
+
             {/* 基礎架構 — Toggle: 拓撲圖 / 主機網格 */}
             <div style={{
               background: '#fff',
diff --git a/apps/web/src/components/dashboard/flywheel-kpi-card.tsx b/apps/web/src/components/dashboard/flywheel-kpi-card.tsx
new file mode 100644
index 00000000..df4a6639
--- /dev/null
+++ b/apps/web/src/components/dashboard/flywheel-kpi-card.tsx
@@ -0,0 +1,136 @@
+'use client'
+
+/**
+ * FlywheelKPICard — ADR-073-C C2
+ *
+ * 飛輪健康度 KPI 面板，消費 GET /api/v1/stats/summary。
+ * 30 秒輪詢，無快取假數據。
+ *
+ * 2026-04-12 ogt (ADR-073-C C2)
+ */
+
+import { useEffect, useState } from 'react'
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? ''
+
+interface FlywheelSummary {
+  playbook_count: number
+  execution_success_rate: number
+  today_processed: number
+  flywheel_conversions_today: number
+  km_vectorized_rate: number
+  km_unvectorized_count: number
+  alertname_null_rate: number
+  incidents_stuck: number
+  computed_at: string
+}
+
+export function FlywheelKPICard() {
+  const [data, setData] = useState<FlywheelSummary | null>(null)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const load = () => {
+      fetch(`${API_BASE}/api/v1/stats/summary`)
+        .then(r => r.ok ? r.json() : Promise.reject(r.status))
+        .then(d => { if (!cancelled) { setData(d); setError(false) } })
+        .catch(() => { if (!cancelled) setError(true) })
+    }
+
+    load()
+    const id = setInterval(load, 30_000)
+    return () => { cancelled = true; clearInterval(id) }
+  }, [])
+
+  const fmt = (n: number | undefined, digits = 0) =>
+    n == null ? '--' : n.toLocaleString(undefined, { maximumFractionDigits: digits })
+
+  const pct = (n: number | undefined) =>
+    n == null ? '--' : `${Math.round(n * 100)}%`
+
+  const kpis = [
+    {
+      label: 'Playbooks',
+      value: fmt(data?.playbook_count),
+      color: data?.playbook_count != null && data.playbook_count >= 20 ? '#22C55E' : '#d97757',
+      hint: '目標 ≥ 20',
+    },
+    {
+      label: '修復成功率',
+      value: pct(data?.execution_success_rate),
+      color: data?.execution_success_rate != null && data.execution_success_rate >= 0.3 ? '#22C55E' : '#F59E0B',
+      hint: '目標 ≥ 30%',
+    },
+    {
+      label: '今日轉化',
+      value: fmt(data?.flywheel_conversions_today),
+      color: '#4A90D9',
+      hint: '今日新增 KM',
+    },
+    {
+      label: 'KM 向量化率',
+      value: pct(data?.km_vectorized_rate),
+      color: data?.km_vectorized_rate != null && data.km_vectorized_rate >= 0.95 ? '#22C55E' : '#F59E0B',
+      hint: '目標 ≥ 95%',
+    },
+  ]
+
+  return (
+    <div style={{
+      background: '#fff',
+      border: '0.5px solid #e0ddd4',
+      borderRadius: 12,
+      overflow: 'hidden',
+      boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
+      flexShrink: 0,
+    }}>
+      {/* Header */}
+      <div style={{
+        padding: '10px 14px',
+        borderBottom: '0.5px solid #e0ddd4',
+        fontSize: 14, fontWeight: 700, color: '#141413',
+        letterSpacing: '0.5px',
+        fontFamily: 'var(--font-body), monospace', background: '#faf9f3',
+        display: 'flex', alignItems: 'center', gap: 8,
+      }}>
+        <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#22C55E', flexShrink: 0 }} />
+        飛輪健康度
+        {error && (
+          <span style={{ marginLeft: 'auto', fontSize: 10, color: '#d97757' }}>API 離線</span>
+        )}
+        {data && !error && (
+          <span style={{ marginLeft: 'auto', fontSize: 10, color: '#87867f' }}>
+            {new Date(data.computed_at).toLocaleTimeString('zh-TW', { hour: '2-digit', minute: '2-digit' })}
+          </span>
+        )}
+      </div>
+
+      {/* KPI Grid */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: '#e0ddd4' }}>
+        {kpis.map(({ label, value, color, hint }) => (
+          <div key={label} style={{ background: '#fff', padding: '10px 14px' }}>
+            <div style={{ fontSize: 10, color: '#87867f', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+              {label}
+            </div>
+            <div style={{ fontSize: 20, fontWeight: 700, color, marginTop: 2 }}>{value}</div>
+            <div style={{ fontSize: 9, color: '#87867f', marginTop: 1 }}>{hint}</div>
+          </div>
+        ))}
+      </div>
+
+      {/* Stuck incidents warning */}
+      {data?.incidents_stuck != null && data.incidents_stuck > 0 && (
+        <div style={{
+          padding: '6px 14px',
+          background: 'rgba(217,119,87,0.06)',
+          borderTop: '0.5px solid #e0ddd4',
+          fontSize: 11, color: '#a04010',
+        }}>
+          {data.incidents_stuck} 筆 Incident 卡在 INVESTIGATING {'>'} 24h
+        </div>
+      )}
+    </div>
+  )
+}