feat(ui): enhance AI agent presentation in notch panel

[tz7543]

Summary

Claude Island 目前對 AI agent 的呈現是「扁平列表 + 最小資訊」模式。隨著多 agent orchestration 越來越普遍（subagent spawn subagent、parallel agents、typed agents），UI 需要升級以匹配這些工作流的複雜度。

本 issue 彙整所有可改良方向，依優先級排列。

---

P0 — Agent Type 視覺分化

現況：所有 subagent 只有 5px cyan/green 圓點，無法區分 executor、reviewer、planner、explorer 等不同角色。

改善：TaskContext 已有 agentType / agentName 欄位，但 UI 沒使用。應根據 agent type 顯示不同的 pixel art icon + 專屬顏色：

agentType	圖示概念	顏色
executor	扳手/齒輪	cyan
code-reviewer	放大鏡	amber
planner / Plan	羅盤	purple
Explore	望遠鏡	teal
writer	羽毛筆	green
verifier	盾牌	emerald
general-purpose	星星	white-dim

涉及檔案：ClaudeInstancesView.swift (subagentSection)、新增 PixelAgentTypeIcon.swift

---

P0 — Task 進度環 (Progress Ring)

現況：Tasks (3 done, 1 in progress, 2 open) 是純文字，掃視效率低。

改善：用 12-14px 圓環取代文字 header，三色弧段表示 done/in-progress/pending 比例，旁邊顯示 4/7。一眼掌握完成度。

涉及檔案：ClaudeInstancesView.swift (taskSection)、新增 MiniProgressRing.swift

---

P1 — Activity Sparkline

現況：看不出 agent 的活躍程度，只有靜態 duration 字串。

改善：在 instance row 右側加 ~60x12px 的 sparkline，基於 tool call 時間戳畫出最近 5 分鐘的活動密度（每格 15 秒，亮度 = tool call 數量）。同時跑多個 session 時，一眼分辨誰在猛幹活、誰在等待。

涉及檔案：ClaudeInstancesView.swift、新增 ActivitySparkline.swift、SessionState.swift（需記錄 tool call timestamps）

---

P1 — Tool Activity Stream

現況：subagent 只顯示最後一個 running tool，看不到連續操作脈絡。

改善：顯示最近 3-5 個 tool calls 的 compact stream，用 opacity 遞減讓舊的漸淡：

  $ npm install express              ✓
  Edit: src/server.ts:42             ✓
  Write: src/routes/auth.ts          ✓
  $ npm test                         ● running

涉及檔案：ClaudeInstancesView.swift (subagentSection)

---

P1 — Closed Notch Agent 概覽

現況：Closed notch 只顯示一個 session 的最後訊息 + spinner，浪費空間。

改善：加 mini agent dashboard strip — 小圓點陣列代表各 session 狀態（顏色區分 processing/waiting/idle），可選的 mini progress bar 代表 aggregate task 完成度。不用打開就知道整體狀態。

涉及檔案：NotchHeaderView.swift、NotchViewModel.swift

---

P2 — Subagent 層級樹狀呈現

現況：多層 subagent 全部 flatten 成一層，看不出 parent-child 關係。

改善：用縮排 + 連接線呈現層級：

├─ 🔧 executor "Implement auth"        2m14s
│  ├─ 🔍 reviewer "Review changes"     Done
│  └─ 🔧 executor "Fix tests"          45s
└─ 📡 explorer "Research API"           1m03s

涉及檔案：SessionState.swift（TaskContext 需新增 parentTaskId）、SubagentState、ClaudeInstancesView.swift

---

P2 — Phase Timeline Ribbon

現況：看不出 session 經歷過什麼狀態變化。

改善：在 instance row 底部加 2-3px 高的彩色條帶，每段顏色代表一個歷史 phase（cyan=processing, amber=waiting, green=done）。極 compact 但資訊豐富。

需要：SessionState 新增 phaseHistory: [(SessionPhase, Date)] 記錄狀態轉換。

涉及檔案：SessionState.swift、SessionStore.swift、ClaudeInstancesView.swift、新增 PhaseRibbon.swift

---

P3 — Dashboard Grid Mode

現況：4-5+ 個 session 時需要 scroll long list。

改善：當 session ≥ 4 時可切換為 grid/tile mode，每個 tile 是 condensed card（creature icon + 狀態 + 進度 + agent count）。

---

P3 — StatsHeaderBar 增強

現況：Header 只有 3 個 dot counts。

改善：加入 aggregate subagent count 和 aggregate task progress：

●3 processing  ●2 waiting  ●1 idle  │  ⌥7 agents  ☑12/20 tasks

---

附帶：現有 Code 可順手修的 SwiftUI Issues

• foregroundColor() → foregroundStyle()（deprecated，多處）
• cornerRadius() → clipShape(.rect(cornerRadius:))（deprecated，多處）
• showsIndicators: false → .scrollIndicators(.hidden)
• sortedInstances 在 body 中每次重算 — 可快取
• 考慮 @ObservedObject → @Observable 遷移（macOS 14+）

---

Implementation Order

Phase	Items	Effort
Phase 1	Agent Type Icon + Progress Ring	~1 day
Phase 2	Activity Sparkline + Tool Stream + Closed Notch HUD	~2 days
Phase 3	Agent Tree + Phase Ribbon	~2 days
Phase 4	Grid Mode + Header Enhancement	~1 day
Ongoing	Deprecated API cleanup	sprinkle across phases

[Specificsuper]

good plan， i realy want this feature