# AWOOOI 典範轉移：AI-Native 前端產品藍圖 (Agentic Workspace Roadmap)

> **文件狀態**：Living Document (持續更新)
> **建立日期**：2026-03-26
> **核心命題**：絕對不能變成傳統監控後台，必須是真正的 AI 智慧管理平台。

---

## 🌟 核心哲學：從「儀表板 (Dashboard)」走向「代理人協作空間 (Agentic Workspace)」

傳統監控後台的底層邏輯是：「系統把數據攤開，人類負責尋找答案」。
AWOOOI 作為真正的 AI 平台，其底層邏輯必須是：**「人類下達意圖 (Intent)，AI 負責尋找數據、推演解法並請求授權」**。

未來的 SRE 就像看著 Jarvis 一樣。前端 UI 必須具備以下三大 AI-Native 基因：

1.  **生成式介面 (Generative UI / GenUI)**
    這是打破傳統後台的關鍵。前端不應該寫死「CPU 圖表」或「Memory 圖表」。當 OpenClaw 判定是資料庫慢查詢時，前端即時生成 (Render-on-the-fly) 一個包含 SQL 語法與執行計畫的特製卡片；如果是網路異常，則生成網路拓撲圖。畫面是跟著 AI 的思考邏輯動態長出來的。
2.  **空間推演畫布 (Spatial Investigation Canvas)**
    放棄傳統的「分頁 (Pagination)」。當一個 P0 災難發生時，SRE 需要的是一個無限延伸的「白板」。左邊是告警，中間是 AI 的分析推演樹，右邊是爆炸半徑拓撲。所有的關聯資訊都在同一個視覺平面上展開，這稱為「心智圖式導航」。
3.  **零信任的「核鑰」體驗 (Nuclear Key UX)**
    當 AI 提出高風險指令（如 `kubectl delete pod`）時，授權介面不能只是一個普通的藍色 [Submit] 按鈕。必須透過 UI 傳遞危險感（如紅黑條紋警示、需要長按 3 秒的滑動解鎖、顯示倒數計時），讓人類在按下核准的那一刻，能感受到決策的重量。

---

## 🗺️ AWOOOI 終極前端版圖：6 大心智樞紐 (Cognitive Hubs) 的進化

將這三項 AI 基因注入傳統的六大模組中，將迎來質變：

### 1. 全局心智樞紐 (The Nexus) ── 系統的腦波
*   **進化點**：拋棄傳統的「圓餅圖/折線圖」。
*   **呈現方式**：
    *   **AI 自治率指標 (Autonomy Index)**： 顯示「今日 AI 成功攔截並修復的災難比例」。
    *   **思考流瀑布 (Thinking Stream)**： 以 Nothing.tech 的極簡純文字風格，讓背景即時流動著 OpenClaw 正在處理的微小任務（如 `[Investigator] Scanning Redis queue... OK`）。帶來極大的系統生命力。
    *   **脈搏聚合器 (Pulse Aggregator)**： 只有當系統需要統帥介入時，才會在正中央浮現一張高對比度的「決策簡報卡」。

### 2. 多簽核戰情沙盤 (The War Room) ── 決策的最終防線
*   **進化點**：不是「待辦清單」，而是「軍事簡報」。
*   **呈現方式**：
    *   **紅藍對抗報告**： 畫面直接顯示 Strategist Agent（提出解法）與 Guardrail Agent（攔截風險）的辯論結果。
    *   **Dry-Run 預覽**： 在統帥按下授權前，直接顯示這行指令下去後，K8s 狀態機將會發生什麼變化的「前後對比圖 (Diff View)」。

### 3. 拓撲因果畫布 (Topological Canvas) ── 災難的透視鏡
*   **進化點**：結合 GraphRAG，這不只是一張靜態的架構圖。
*   **呈現方式**：
    *   **爆炸半徑高光**： 當異常發生，畫布會自動聚焦在核心節點，並以脈衝動畫向外渲染受影響的服務。
    *   **時光倒流 (Time-Travel)**： 提供一個時間軸拉桿，統帥可以拉動滑桿，看著這場災難在過去 15 分鐘內是如何從一個小錯誤蔓延成全局崩潰的。

### 4. 事件記憶迴廊 (Episodic Memory Vault) ── 究責與進化
*   **進化點**：不是看 Log，是看「案件調查報告」。
*   **呈現方式**：每次事件結案後，自動生成一份豐富的圖文報告，包含 AI 當時擷取的截圖、Metrics 快照與執行日誌。SRE 可以在這份報告上劃重點、下標籤，將其轉化為下一次的訓練素材。

### 5. AI 兵工廠 (Tool Forge) ── 訓練與掛載
*   **進化點**：將「設定 API」變成「配發武器」。
*   **呈現方式**：採用卡片化管理 (Card-based UI)。每一種 MCP Tool（如 K8s-Operator、DB-Admin）都是一張裝備卡。統帥可以透過拖曳 (Drag & Drop) 的方式，將不同的工具配發給特定的 Agent 角色。

### 6. 大腦節流閥 (Engine Control) ── 換檔與調校
*   **進化點**：將複雜的 JSON 設定轉化為直觀的儀表。
*   **呈現方式**：
    *   **雙軌切換器 (Dual-Track Toggle)**： 巨大且清晰的實體感撥桿，一鍵在「雲端大腦」與「本地大腦」之間切換。
    *   **成本燃燒速率表 (Token Burn Rate)**： 即時顯示 API 呼叫的成本消耗，防止預算失控。

---

## 🎨 視覺與互動語彙：Cyber-Tactical 結合 Nothing.tech 美學

為了讓體驗最優，我們必須堅持極致的**「克制 (Restraint)」**：

*   **Color Palette (色彩)**： 90% 的絕對黑與白 (Dark Mode First / Glassmorphism)、5% 的消光灰（用於次要資訊）、僅在關鍵狀態使用極高對比的 霓虹綠 (Success) 與 警戒紅 (Critical) 或 神經藍 (AI prompt)。
*   **Typography (字體)**： 全面採用等寬字體 (Monospace，如 VT323 / JetBrains Mono) 呈現數據與 Log，搭配俐落的無襯線體 (Sans-serif) 作為標題。這能營造出「專業、無情、精準」的工程師浪漫。
*   **Micro-interactions (微互動)**： 所有的動畫都必須是「冷靜而迅速」的（時間控制在 150ms 以內）。放棄花俏的彈跳，改用透明度漸變、游標掃描線等科技感元素。

---

## 🚀 起點：全局底部常駐的 AI 終端 (Omni-Terminal)

**首要實作任務：Omni-Terminal (全局心智中樞)。**

**戰略原因**：
1.  **改變使用者習慣的槓桿率最高**： Terminal 改變的是「人機互動方式」。一旦 SRE 習慣了在任何頁面輸入 `/incident show latest` 並獲得 GenUI 卡片回應，這套系統就真正擁有「AI 靈魂」了。
2.  **開發成本與 ROI**： 實作一個結合 WebSocket/SSE 的互動對話框，能立刻將後端 OpenClaw 的強大推理能力 100% 釋放到前端。

**現況 (v1.0.0)**：已於前端框架中建置 OmniTerminal 外殼與白玻璃材質元件，並擴充了 Zustand SSE 狀態儲存庫。待後端 FastAPI Endpoint 對接即可上線。

---

## 🎭 賽博戰術劇場 (Cyber-Tactical Theatre)：五維實體視覺矩陣

如果只給出一堆冰冷的數據圖表，那這只不過是「另一個 Grafana」。為了在堅持 Nothing.tech 極簡美學的前提下，將 AWOOOI 的底層運作完美具象化，我們必須採用**「符號化、終端機語彙與動態呼吸感」**，讓每一次的告警處理都像是一場人類與各種 AI 實體協同作戰的科幻電影。

以下是為 AWOOOI 量身訂製的**「五維實體 UI/UX 視覺矩陣」**：

### 🦞 1. OpenClaw 龍蝦 (The Orchestrator 總樞紐)
它是系統中負責「夾取、拆解、分發」的最高指揮網路。
*   **視覺符號**： 使用極簡的幾何線條或 ASCII 藝術來暗示「雙鉗」的意象，例如 `>--[ DATA ]--<` 或 `[ 爪 ]`。
*   **動態表現**： 當系統收到複雜告警，準備分發任務時，畫面上方出現閃爍的終端機字樣：`[OpenClaw Protocol: ENGAGED]`，伴隨著兩道極細的掃描線從螢幕兩側向中央夾擊，象徵「龍蝦正在撕裂並解析問題」。

### 🧠 2. AI (The Core Brain 底層神經大腦)
代表背後的算力深淵（Ollama / Claude）。它安靜、巨大、深不可測。
*   **視覺符號**： 點陣矩陣 (Dot Matrix) 背景。
*   **動態表現**： 當 AI 正在進行深度推理時，背景的點陣圖會產生微弱的「呼吸燈效 (Pulsing Opacity)」。UI 卡片邊緣會泛起 1px 的微光，展現出「算力正在燃燒」的生命力。

### 🕵️‍♂️ 3. Agent (The Council 幕僚代理人)
具備特定性格與專業的專家（調查員、策略師、政委）。必須讓使用者感覺到「有一群專家正在後台開會」。
*   **視覺符號**： 在 Omni-Terminal 中，賦予他們專屬的代號標籤（Badge），例如 `@Investigator`、`@Strategist`。
*   **動態表現**： 在畫面快速刷過他們的「對話軌跡」，展現 AI 互相爭辯的過程，帶來極大的視覺震撼。
    > `@Investigator`: 發現 Redis 記憶體飆升至 98%。
    > `@Strategist`: 提議執行 Cache 清除指令。
    > `@Guardrail`: ⚠️ 警告：此指令將導致瞬間 Cache Miss，建議改為緩步淘汰。

### 🤖 4. 機器人 (The Executor 無情執行者)
代表 K8s Worker、Redis 消費者。沒有思想，只有絕對的服從與力量。
*   **視覺符號**： 剛硬的進度條、齒輪隱喻、純粹的機械狀態碼。
*   **動態表現**： 指令被授權執行時，畫面瞬間切換為冷酷的終端機模式。進度條為方塊狀 `[██████░░░]`，伴隨 `[EXECUTING]`, `[NODE_RESTARTED]`, `[EXIT_CODE_0]`，展現高度工業化的機械精準度。

### 👑 5. 人類 (The Commander 統帥/最終裁決者)
人類是最尊貴的「核鑰持有者」。
*   **視覺符號**： 絕對高對比的視覺焦點。需要人類時，其他元素亮度降至 30%，唯獨留下中央的授權卡片高亮。
*   **動態表現**： 提示字眼永遠是尊貴且帶有責任感的：`[ AWAITING COMMANDER OVERRIDE ]` 或 `[ 請求統帥親核 ]`。操作需透過「長按 3 秒」或「向右滑動解鎖紅線」，建立起對系統的絕對掌控感。

---

## 📐 附錄 A：首席架構師視覺與動態基準 (Architectural Visual & Kinetic Directives)

為了將上述「賽博戰術劇場」從概念轉化為嚴謹的 Frontend Code，必須建立一套不可踰越的 **「冷酷工程師美學 (Cold Engineering Aesthetic)」** 參數。以下是我的專業架構建議：

### 1. 深度與特權的 Z-Index 矩陣 (Z-Index Hierarchy of Trust)
*   **Z-0 (系統深淵)**：點陣圖背景、OpenClaw 的掃描線。這裡屬於潛意識層，採用 `opacity-20` 極度模糊。
*   **Z-10 (幕僚對話)**：Agent 爭辯的 Omni-Terminal 訊息流。採用 `bg-white/40 backdrop-blur-[10px]` 的半透明玻璃。
*   **Z-100 (核鑰授權)**：人類 Commander 的決策卡片。必須物理性地隔絕雜訊，採用最高等級的 `bg-white/90 backdrop-blur-[40px] drop-shadow-2xl`，並搭配 2px 的實體黑色邊框 `border-2 border-nothing-black`。

### 2. 賽博戰術色票 (Cyber-Tactical Color Palette)
拒絕廉價的高飽和色彩，所有顏色必須具有「警示功能」：
*   **Claw-Blue (大腦藍)**：`#4A90E2`。專屬於 AI 推理。
*   **Agent-Orange (幕僚橘)**：`#F5A623`。代表警戒與討論中 (`WARNING`)。
*   **Commander-Red (核鑰紅)**：`#FF3B30`。極度危險、不可逆轉的操作 (Delete Pod / Drop Table) 才允許使用。必須搭配條紋斑馬線背景。
*   **Executor-Green (執行綠)**：`#34C759`。只有在 K8s 確定 `EXIT_CODE_0` (成功) 後才能閃爍一次，象徵危機解除。

### 3. 動態防抖法則 (Kinetic Debounce Rule)
*   如果系統同時死亡 50 顆 Pod，絕不能讓畫面閃爍 50 次紅光（這會讓 SRE 崩潰）。
*   必須在前端實作 `requestAnimationFrame` 防抖 (Debounce) 或 Throttling。將所有動畫聚合為**一秒一次深沉的脈衝 (Deep Pulse)**，展現出「雖然事態嚴重，但系統仍在掌握中」的冷靜感。

### 4. 職責分離的字體矩陣 (Typographic Separation of Concerns)
*   **VT323 (點陣體)**：只能用於「OpenClaw 思考流」與背景雜訊。它自帶復古感，但長文閱讀性差。
*   **JetBrains Mono (等寬體)**：僅用於「K8s Executor 日誌」與「SQL 語法」。特製的 0 與 O 區別，是緊急 Debug 時的安全網。
*   **Inter (無襯線體)**：專屬於「人類 Commander」的按鈕、標題與確認對白，確保在最疲勞的狀態下也能一秒看懂。

---

## ⚡ 附錄 B：神經網路對接基準 (Neural Link Integration Protocol)

為了讓 Omni-Terminal 成為真正的「心智中樞」，我們必須在前後端交界的 API 合約上，實作以下三大高階架構設計：

### 1. GenUI 的「動態渲染合約」 (The Rendering Protocol)
後端 AI 生成的速度很快，前端必須透過自訂的 Server-Sent Events (SSE) 類型來決定何時渲染純文字，何時呈現視覺卡片。

**API Payload Contract (草案)**：
*   **`event: thought`**：思考軌跡 (快速刷動的背景字)。例如 `{"agent": "Investigator", "msg": "Analyzing Redis latency..."}`
*   **`event: tool_call`**：工具呼叫 (顯示微動畫)。例如 `{"tool": "K8s-Operator", "status": "executing"}`
*   **`event: render_ui`**：GenUI 實體掛載。當前端 Zustand 收到此事件，立刻用 Nothing.tech 風格的 React Component 替換文字流。
    ```json
    {"component": "MetricsCard", "props": {"cpu": 95, "memory": 88, "pod": "worker-1"}}
    ```

### 2. 空間感知的上下文注入 (Spatial Context Awareness)
當使用者在 Omni-Terminal 輸入指令時，前端發出的 Request 必須帶有「隱形夾帶 (Ghost Payload)」，讓 AI 知道使用者當前的視線落在哪裡。
*   **戰術設計**：按下 Enter 瞬間，前端抓取目前的「路由 (Current Route)」與「畫面焦點 (Active Entity ID)」。
    ```json
    {
      "intent": "/restart",
      "context": {
        "current_page": "/war-room",
        "focused_incident_id": "INC-20260326-001"
      }
    }
    ```
    這賦予了系統強大的感知能力：「統帥正在看 INC-001，他說的 restart 就是指重啟這個事件的 Pod。」

### 3. 打斷與覆寫機制 (The "Interrupt" Override)
AI 的生成可能需要數秒。若此時爆發新的 P0 告警，系統必須立刻拋棄當前迴圈。
*   **使用者打斷**：前端綁定 `AbortController`。按下 `[ 🛑 HALT ]` 按鈕瞬間，切斷連線並透過 FastAPI 殺掉底層執行緒以釋放資源。
*   **系統級插隊 (Priority Preemption)**：FastAPI 具備多工流 (Multiplexing) 能力。當 Redis 傳來 P0 告警，直接在當前的 SSE 通道強制插入 `event: urgent_alert`。前端收到後將現有字體轉灰，直接升起紅色警報卡片：`[ SYSTEM OVERRIDE ] P0 Alert: DB Crash`。