# Wireframe — `/clusters`

> 文字版 wireframe。從 `edge-ai-platform` POC 搬來，視覺對齊既有 Shadcn 風格。

---

## 佈局（Desktop）

```
┌────────────────────────────────────────────────────────────────┐
│ [Sidebar]  [Header]                                             │
│ ──────────────────────────────────────────────────────────────  │
│                                                                 │
│   叢集                                 [+ 建立叢集]                │
│   管理你的多裝置推論叢集                                            │
│                                                                 │
│   ┌──────────────┐  ┌──────────────┐  ┌──────────────┐          │
│   │ ClusterCard A │  │ ClusterCard B │  │ ClusterCard C │          │
│   │               │  │               │  │               │          │
│   │ Production A  │  │ Dev Cluster   │  │ Test Cluster  │          │
│   │ 🟢 推論中      │  │ 🔵 閒置        │  │ 🟡 降級        │          │
│   │               │  │               │  │               │          │
│   │ 裝置：3        │  │ 裝置：2        │  │ 裝置：3        │          │
│   │ 模型：yolov5s  │  │ 模型：-       │  │ 模型：yolov5s  │          │
│   │               │  │               │  │               │          │
│   │ • KL520 w=3 🟢│  │ • KL720 w=1 🟢│  │ • KL520 w=3 🟢│          │
│   │ • KL720 w=1 🟢│  │ • KL520 w=1 🟢│  │ • KL720 w=1 🟢│          │
│   │ • KL520 w=3 🟢│  │               │  │ • KL520 w=3 ⚪│          │
│   │               │  │               │  │               │          │
│   │ [工作區][刪除] │  │ [工作區][刪除] │  │ [工作區][刪除] │          │
│   └──────────────┘  └──────────────┘  └──────────────┘          │
│                                                                 │
└────────────────────────────────────────────────────────────────┘
```

---

## ClusterCard 規格（沿用 POC 的 `cluster-card.tsx`，加強化）

```
┌───────────────────────────────────────┐
│ CardHeader (pb-3)                      │
│ ┌─────────────────────┐ ┌───────────┐ │
│ │ CardTitle text-base │ │ Badge     │ │
│ │ Production Cluster A│ │ 狀態      │ │
│ └─────────────────────┘ └───────────┘ │
│                                        │
│ CardContent (space-y-3)                │
│                                        │
│ ┌──────────────┐ ┌──────────────┐     │
│ │ 裝置 (label)  │ │ 模型 (label)  │     │
│ │ 3 (value)    │ │ yolov5s       │     │
│ └──────────────┘ └──────────────┘     │
│                                        │
│ 裝置列表（text-xs）:                     │
│ • office-mac KL520  w=3  [🟢 在線]     │
│ • home-pi KL720     w=1  [🟢 在線]     │
│ • backup KL520      w=3  [⚪ 離線]     │
│                                        │
│ ┌──────────┐  ┌──────────┐            │
│ │ [工作區]  │  │ [刪除]    │            │
│ │ outline   │  │ ghost     │            │
│ └──────────┘  └──────────┘            │
└───────────────────────────────────────┘
```

---

## 狀態 Badge

| 狀態 | Badge variant | 文字 |
|------|--------------|------|
| idle | secondary | 閒置 |
| inferencing | default | 推論中 |
| degraded | destructive (實際用 yellow) | 降級執行中 |
| offline | secondary + opacity-50 | 全部離線 |

---

## 雲端版新增

| 位置 | 改動 |
|------|------|
| 每個裝置項目右側 | 新增 `RemoteDeviceBadge`（🟢 / ⚪）|
| degraded 狀態 | Badge 旁加 Tooltip 說明「X 裝置離線，已自動降級」 |
| 「建立叢集」Dialog 的裝置選擇器 | 只列出 `remoteStatus === 'online'` 的裝置；離線裝置 disabled |

---

## 空狀態

```
┌────────────────────────────────────────────────────────────────┐
│                                                                 │
│                          🕸                                      │
│                                                                 │
│                      還沒有叢集                                    │
│                                                                 │
│         叢集讓你把多台 Kneron 裝置組合起來做平行推論                    │
│                                                                 │
│                    [建立第一個叢集]                                 │
│         (若沒有任何已配對裝置則 disabled + tooltip:                   │
│          「請先配對至少 1 台裝置」)                                    │
│                                                                 │
└────────────────────────────────────────────────────────────────┘
```

使用既有 `EmptyState` 元件，icon = Lucide `Network`。

---

## 建立叢集 Dialog（沿用 POC）

```
Dialog: 建立叢集

  叢集名稱 *  [________________________]

  選擇裝置：
  ☑ Kneron KL520 (office-mac)   權重 [3 ▼]  🟢 在線
  ☑ Kneron KL720 (home-pi)      權重 [1 ▼]  🟢 在線
  ☐ Kneron KL520 (backup)       權重 [- ]  ⚪ 離線 (disabled)

  模型：[ yolov5s ▼ ]

  [取消]                               [建立]
```

---

## 互動

| 操作 | 行為 |
|------|------|
| 點卡片「工作區」| 跳 `/workspace/cluster/[id]` |
| 點卡片「刪除」| AlertDialog 確認後呼叫 `DELETE /api/clusters/:id` |
| 點「建立叢集」| 開 `ClusterCreateDialog` |
| 切換 degraded 狀態 tooltip | Hover / Focus Badge 時顯示原因 |

---

## 響應式

| 斷點 | 欄數 |
|------|------|
| Mobile (< 640px) | 1 欄 |
| Tablet (640-1024) | 2 欄 |
| Desktop (≥ 1024) | 3 欄 |

---

## 無障礙

- Card 整體可 Tab 聚焦（若設為 `asChild` Link）
- 刪除 AlertDialog 焦點陷阱（shadcn 內建）
- 狀態 Badge 有文字 + 顏色雙重傳達
- Tooltip 使用 `aria-describedby`

---

## i18n key（沿用 POC `cluster.*`）

```
cluster.title → 叢集
cluster.subtitle → 管理你的多裝置推論叢集
cluster.createCluster → 建立叢集
cluster.devices → 裝置
cluster.openWorkspace → 工作區
cluster.deleteConfirm → 確定要刪除「{name}」嗎？
cluster.status.idle → 閒置
cluster.status.inferencing → 推論中
cluster.status.degraded → 降級執行中
cluster.emptyTitle → 還沒有叢集
cluster.emptyDescription → 叢集讓你把多台 Kneron 裝置組合起來做平行推論
cluster.emptyAction → 建立第一個叢集
cluster.noDevicesHint → 請先配對至少 1 台裝置
```