awoooi/docs/AWOOOI_AGENTIC_WORKSPACE_ROADMAP.md

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 替換文字流。

  {"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)」。

  {
    "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。