# Sprint 5 — Tab 結構規格書

> 每個新頁面的 Tab 配置、來源元件、資料源、互動行為

---

## 🏠 AI 指令中心 (`/`)

| Tab ID | 名稱 | i18n Key | Icon | Badge | 內容來源 |
|--------|------|---------|------|-------|---------|
| `overview` | 戰情總覽 | `tabs.overview` | LayoutDashboard | — | 現有首頁 + **新拓撲圖** |
| `alerts` | 告警 & 授權 | `tabs.alerts` | Bell | `alertsCount` | `/alerts` + `/authorizations` |
| `stream` | 活動串流 | `tabs.stream` | Activity | — | SSE + ActionTimeline |
| `disposition` | 處置統計 | `tabs.disposition` | BarChart3 | — | `/reports` (Sprint 4) |

### Tab 1: 戰情總覽 — 區塊配置

```
┌─────────────────────────────────────────────────┐
│ [MetricsStrip] 7 指標橫排 (現有，不動)            │
├───────────────────────────┬─────────────────────┤
│                           │ OpenClaw Panel      │
│ ServiceTopology           │ (現有，不動)         │
│ (React Flow 收合模式)     │                     │
│ 4 群組 + 依賴邊線         │ Toggle: 拓撲/主機   │
│                           │ [拓撲圖] [主機網格]  │
├───────────────────────────┤                     │
│ IncidentCard Feed         │                     │
│ (現有，不動，最新 3 筆)    │                     │
└───────────────────────────┴─────────────────────┘
```

**元件複用**:
- `MetricsStrip`: 現有首頁 L446-525 → 原地保留
- `IncidentCard`: 現有 `components/incident/incident-card.tsx` → 原地保留
- `OpenClawPanel`: 現有 `components/ai/openclaw-panel.tsx` → 原地保留
- `ServiceTopology`: **新建** `components/topology/ServiceTopology.tsx`
- `HostGrid`: 現有 `components/infra/host-grid.tsx` → Toggle 切換顯示

**Toggle 行為**: 「拓撲圖 / 主機網格」切換按鈕
- 預設: 拓撲圖
- 切換: 隱藏拓撲，顯示現有 HostGrid (4主機卡片)
- 記住選擇: localStorage

### Tab 2: 告警 & 授權 — 區塊配置

```
┌──────────────────────┬──────────────────────────┐
│ AlertsPanel          │ LiveApprovalPanel         │
│ (從 /alerts 抽取)    │ (現有元件)                │
│                      │                           │
│ · 嚴重度篩選         │ · 待批准列表              │
│ · 告警列表           │ · SSH URI + 風險等級      │
│ · 時間排序           │ · 批准/拒絕按鈕           │
│                      │ · 執行歷史                │
└──────────────────────┴──────────────────────────┘
```

**元件複用**:
- `AlertsPanel`: 從 `/alerts/page.tsx` (183行) 抽取核心內容
- `LiveApprovalPanel`: 現有 `components/approval/live-approval-panel.tsx` (484行)

### Tab 3: 活動串流 — 區塊配置

```
┌─────────────────────────────────────────────────┐
│ 篩選: [全部] [告警] [AI] [修復] [心跳]           │
├─────────────────────────────────────────────────┤
│ 18:05  ● 心跳確認 mon/mon1 Ready                │
│ 18:04  ● OpenClaw 匹配 Playbook (91%)           │
│ 18:03  ● OpenClaw 啟動 RCA                      │
│ 18:02  ● Prometheus 警報: Worker CPU 89%         │
│ 17:58  ● 自動修復完成 restart: api (12s)         │
│ ...                                              │
└─────────────────────────────────────────────────┘
```

**資料源**: SSE `/api/v1/dashboard/stream` (現有)
**元件複用**: `ActionTimeline` (`components/timeline/action-timeline.tsx`, 245行)

### Tab 4: 處置統計 — 區塊配置

直接嵌入 `/reports/page.tsx` 的完整內容:
- KPI 3 卡 (處置總數/自動化率/人工介入率)
- 四大計數卡 (自動/人工/手動/冷啟動)
- 堆疊分佈條
- 按異常類型明細表
- 事件摘要 + 解決率

**元件複用**: 從 `/reports/page.tsx` (317行) 抽取為 `DispositionPanel`

---

## 📊 可觀測性 (`/observability`)

| Tab ID | 名稱 | i18n Key | 內容來源 | 行數 |
|--------|------|---------|---------|------|
| `monitoring` | 服務監控 | `obs.monitoring` | `/monitoring/page.tsx` | 269 |
| `apm` | APM | `obs.apm` | `/apm/page.tsx` | 128 |
| `errors` | 錯誤追蹤 | `obs.errors` | `/errors/page.tsx` | 164 |
| `apps` | 應用 | `obs.apps` | `/apps/page.tsx` | 103 |
| `services` | 服務目錄 | `obs.services` | `/services/page.tsx` | 120 |

---

## 🔧 自動化 (`/automation`)

| Tab ID | 名稱 | i18n Key | 內容來源 | 行數 |
|--------|------|---------|---------|------|
| `repair` | 自動修復 | `auto.repair` | `/auto-repair/page.tsx` | 460 |
| `neural` | 神經指揮 | `auto.neural` | `/neural-command/page.tsx` + 4元件 | 1241 |
| `drift` | Drift 偵測 | `auto.drift` | `/drift/page.tsx` | 324 |

---

## 📦 營運 (`/operations`)

| Tab ID | 名稱 | i18n Key | 內容來源 | 行數 |
|--------|------|---------|---------|------|
| `deployments` | 部署管理 | `ops.deployments` | `/deployments/page.tsx` | 113 |
| `tickets` | 工單 | `ops.tickets` | `/tickets/page.tsx` | 120 |
| `cost` | 成本分析 | `ops.cost` | `/cost/page.tsx` | 95 |
| `logs` | 行動日誌 | `ops.logs` | `/action-logs/page.tsx` | 551 |
| `billing` | 計費 | `ops.billing` | `/billing/page.tsx` | 113 |

---

## 🛡️ 安全合規 (`/security-compliance`)

| Tab ID | 名稱 | i18n Key | 內容來源 | 行數 |
|--------|------|---------|---------|------|
| `security` | 安全掃描 | `sec.security` | `/security/page.tsx` | 137 |
| `compliance` | 合規報告 | `sec.compliance` | `/compliance/page.tsx` | 124 |

---

## 📚 知識 (`/knowledge`)

單頁，無 Tab。內容 = `/knowledge-base/page.tsx` (532行)

---

## ⚙️ 設定 (`/settings`)

| Tab ID | 名稱 | i18n Key | 內容來源 | 行數 |
|--------|------|---------|---------|------|
| `general` | 一般設定 | `settings.general` | `/settings/page.tsx` | 245 |
| `users` | 用戶管理 | `settings.users` | `/users/page.tsx` | 136 |
| `notifications` | 通知 | `settings.notifications` | `/notifications/page.tsx` | 97 |
| `help` | 幫助 | `settings.help` | `/help/page.tsx` | 57 |