feat(web): consolidate product IA shell

docs/workplans/2026-06-26-awoooi-ia-ux-reset-and-consolidation.md

@@ -0,0 +1,280 @@
+# AWOOOI IA / UIUX 重整盤點與整合推進清單
+
+日期：2026-06-26（台北時間）
+基線：`gitea/main=81a18bb8 docs(logbook): record navigation IA production repair [skip ci]`
+狀態：D0 盤點中，本文件先本地建立，不觸發正式部署。
+
+## 0. 這次先校正方向
+
+使用者明確要求的是「先把所有頁面、導航、二層菜單與頁內分頁完整看過，再做整合決策」。上一輪只修復 AwoooP 入口消失與 mobile 側欄文字消失，屬於事故止血，不是完整資訊架構重整。
+
+本文件把工作方向改成以下順序：
+
+1. 先盤點所有 route、sidebar、二層菜單、頁內分頁與重複頁。
+2. 先決定每個頁面的角色：主工作區、下鑽頁、合併頁、redirect 候選、legacy 候選。
+3. 再決定哪些地方可以用分頁，哪些必須拆成側欄目的地、卡片下鑽、drawer 或獨立頁。
+4. 最後才實作與推正式環境，避免再用局部 patch 造成「版本像倒退」。
+
+## 1. 現況事實
+
+| 項目 | 盤點結果 | 判讀 |
+|---|---:|---|
+| Next.js `page.tsx` route | `46` | 頁面數量已超過一般 sidebar 直接平鋪可承受範圍，需要主工作區 + drilldown。 |
+| `PageTabs` 頁面級用法 | `6` 個主要頁面 | 多數不是同頁視角切換，而是在承擔主導航，這是目前 UX 混亂主因。 |
+| 手寫 `role="tablist"` | `8` 處 | IwoooS 有多處局部模式切換，部分可保留，但必須改成明確的「視圖模式」，不能像頁面導航。 |
+| 全域 Sidebar | 已有主區分組 | 入口有恢復，但 aliases 與頁內分頁仍互相重疊。 |
+| AwoooP layout | 頁內二層 rail 已停止顯示 | 檔內仍有舊 `navItems` 設定，應在正式重整時清掉，避免下次誤用。 |
+
+## 2. 失效設計模式
+
+| 問題 | 目前例子 | 為什麼不專業 | 新規則 |
+|---|---|---|---|
+| 用頁籤承擔主導航 | `/governance?tab=automation-inventory`、`/operations?tab=cost` | 使用者不知道功能藏在哪，也無法形成穩定 mental model。 | 主工作流用 sidebar / section nav；tabs 只做同頁視角切換。 |
+| 父頁塞入多個獨立產品頁 | `/observability` 底部再塞 Monitoring / APM / Errors / Apps / Services tabs | 前面已有儀表板，底部又藏一組舊頁，造成重複與資訊疲勞。 | 父頁只放總覽與 drilldown cards；舊頁改 direct route 或 redirect。 |
+| 大量文字卡當作產品成果 | Governance、IwoooS、Knowledge、Work Items 多處 | 使用者無法在 3 秒內判斷狀態、卡點、責任與下一步。 | 每頁固定 Situation / Flow / Matrix / Topology / Evidence / Action。 |
+| 舊頁不刪也不收斂 | `/security`、`/compliance`、`/security-compliance`、`/iwooos`、`/governance` | 同一批安全治理資訊重複出現，版本感不一致。 | 先定義 canonical page，再逐步 redirect / hidden。 |
+| 專業規範被文件治理綁住 | 大量 docs-only gate 完成，但產品頁仍混亂 | 文件與 snapshot 不能取代操作體驗與 runtime truth。 | 安全紅線保留，但 UI/UX 整合不再等待無關文件切片。 |
+
+## 3. PageTabs 與頁內分頁處置表
+
+| 位置 | 目前用途 | 決策 | 優先級 |
+|---|---|---|---|
+| `/governance` | SLO / Events / Queue / Agent Market / Automation Inventory | 不再當 tabs。改成 Governance Cockpit 首屏，五個區塊轉為工作卡與直接 deep link。重要區塊可拆 route 或 drawer。 | P0 |
+| `/observability` | 頁面底部 Monitoring / APM / Errors / Apps / Services | 移除底部 PageTabs。Observability 首屏改成全資產拓樸、訊號矩陣、告警漏斗、服務健康熱圖；舊頁轉成 drilldown route。 | P0 |
+| `/automation` | Auto Repair / Neural Command / Drift | 合併進 Knowledge & Automation。`/automation` 改為 redirect 或 lightweight hub；自動修復資產必須顯示 KM / PlayBook / scripts / schedules / verifier。 | P0 |
+| `/operations` | Deployments / Tickets / Cost / Logs / Billing | 不再用 tabs 藏功能。改成 Operations Overview + 五張工作卡；高頻頁可保留 direct route。 | P1 |
+| `/security-compliance` | Security / Compliance | 合併到 IwoooS / Governance 安全 posture。`/security-compliance` 只作過渡入口。 | P1 |
+| `/` 首頁 | Overview / Alerts / Stream / Disposition | 首頁不應再像多頁容器。改成全局 Situation Overview，下方用 dashboard bands；告警流與處置流連到 AwoooP / Observability。 | P1 |
+| `/iwooos` 手寫 tablist | 多個視覺模式、拓樸 lens、path explorer、command map | 保留真正的圖表 lens / path selector；若是跨主題內容切換，改成展開區、anchor nav 或拆到 canonical page。 | P0/P1 |
+| `EvidenceViewer`、`queue-history-tabs` | 小範圍 evidence / history 切換 | 可保留，這是局部檢視，不是主導航。 | 保留 |
+
+## 4. 全站 route 整併決策
+
+| Canonical 工作區 | 保留頁 | 合併 / 降級 / redirect 候選 | 新呈現方式 |
+|---|---|---|---|
+| 指令中心 | `/` | 首頁 tabs、部分 alert stream | 一頁顯示健康、重大事故、自動化卡點、待 owner action，不再塞多頁分頁。 |
+| AwoooP 操作台 | `/awooop`、`/awooop/work-items`、`/awooop/runs`、`/awooop/approvals`、`/awooop/contracts`、`/awooop/tenants` | `/alerts` 的 incident focus、`/authorizations` | Overview 做戰情摘要；Runs/Work Items/Approvals 是執行鏈；Tenants 是所有產品納管中心。 |
+| 可觀測性 | `/observability` | `/monitoring`、`/apm`、`/errors`、`/apps`、`/services`、`/topology` | 主頁用拓樸圖、service health heatmap、alert funnel、SLO/error budget、dependency graph。 |
+| 知識與自動化 | `/knowledge-base` | `/knowledge`、`/automation`、`/auto-repair`、`/drift`、`/neural-command` | KM / PlayBook / scripts / schedules / verifier / trust score 總帳。 |
+| IwoooS / 安全治理 | `/iwooos`、`/governance`、`/code-review` | `/security-compliance`、`/security`、`/compliance` | IwoooS 是安全 posture；Governance 是 gate / policy / agent market；Code Review 是 release safety gate。 |
+| 營運 | `/operations`、`/deployments`、`/tickets`、`/cost`、`/billing`、`/action-logs`、`/reports` | Operations tabs | Operations 首屏以部署 / 工單 / 成本 / 帳務 / 動作日誌卡片導入；必要時保留直接頁。 |
+| 系統工具 | `/terminal`、`/settings`、`/help` | `/classic`、`/demo`、`/users`、`/notifications` | Classic / Demo 隱藏或 legacy；Users / Notifications 等 Admin 工作區定義後再納入。 |
+
+## 5. 專業頁面固定骨架
+
+每個主要頁面只允許使用以下資訊層，不再任意追加長文字卡：
+
+| 層 | 名稱 | 要回答的問題 | 視覺形式 |
+|---|---|---|---|
+| 1 | Situation Strip | 現在正常嗎？最重要卡點是什麼？誰負責？下一步是什麼？ | 狀態帶、KPI、owner、next action。 |
+| 2 | Agent Flow / State Machine | AI 自動化跑到哪一階段？卡在哪？ | Swimlane、state machine、timeline。 |
+| 3 | Decision Matrix | 為什麼可自動化或不可自動化？缺哪個 gate？ | 風險矩陣、coverage matrix、confidence split。 |
+| 4 | Topology / Dependency | 哪些主機、服務、網站、repo、告警互相關聯？ | 拓樸圖、dependency graph、blast radius map。 |
+| 5 | Evidence | 證據在哪？新鮮嗎？來源是什麼？ | 表格、drawer、timeline refs、MCP tool call list。 |
+| 6 | Action / Gate Rail | 現在可做什麼？不可做什麼？要誰批准？ | Action rail、owner review card、rollback/verifier plan。 |
+
+## 6. UI / UX 完成度重估
+
+上一版文件把「導航 / IA 整合」寫到 `72%`，但實際產品仍保留大量頁面級 tabs 與重複頁，因此需要下修。
+
+| 項目 | 舊估計 | 本次重估 | 理由 |
+|---|---:|---:|---|
+| 導航 / IA 整合 | `72%` | `45%` | 全域側欄有恢復，但頁面級 tabs 與重複 route 尚未整併。 |
+| 全站 UI / UX 專業化 | `58%` | `38%` | AwoooP 局部有進步，但 Observability、Knowledge、Governance、IwoooS 仍文字過重。 |
+| AwoooP 操作台產品化 | `68%` | `55%` | Work Items / Runs / Approvals 資料有，但還不像完整自動化控制台。 |
+| Tenants 全產品資產中心 | `68%` | `55%` | 已有資產概念，但使用者指出所有網站 / 專案 / 產品仍未完整納入。 |
+| Observability 專業拓樸 / 告警中心 | `38%` | `25%` | 仍無全主機 / 全服務 / 全產品一張拓樸與有效告警漏斗。 |
+| Knowledge / PlayBook 沉澱可視化 | `34%` | `20%` | 使用者看不到 KM、PlayBook、腳本、排程、Verifier 的完整沉澱。 |
+| Code Review / Release Safety Gate | `58%` | `35%` | 還沒把所有產品 pre / post deploy gate 與惡意程式碼防護做成產品化流程。 |
+| 真正 AI 自動化 runtime 閉環 | `60-64%` | `15-25%` | 目前大量告警仍停在 owner review / manual required，不可再用治理卡假性拉高。 |
+
+## 7. 新優先序
+
+### D0：IA 盤點與凍結，先不推版
+
+完成條件：
+
+- 所有 route 都有 canonical owner。
+- 所有 PageTabs 都有去留決策。
+- 所有 legacy / duplicate route 都有 redirect 或 hidden 條件。
+- UI 改版前先列出 production smoke 範圍。
+
+完成度：本文件建立與正式站抽查完成後，D0 盤點 `100%`。後續不再把 D0 視為實作完成，只代表問題和整併決策已固定。
+
+### D1：全域導航與主工作區重整
+
+優先處理：
+
+1. Sidebar 只保留 canonical 工作區與高頻下鑽。
+2. 清掉 AwoooP layout 未使用舊 `navItems`。
+3. 建立 route canonical map，讓 command palette、breadcrumb、context links 都走同一份資料。
+4. 不再把大工作流新增到 `PageTabs`。
+
+驗證：
+
+- Desktop / mobile sidebar 所有主工作區可見。
+- AwoooP、Observability、Knowledge、Governance 不再出現重複二層主導航。
+- `horizontalOverflow=0`。
+
+### D2：移除頁面級 tabs 的主導航用途
+
+優先處理：
+
+1. `/governance`：改成 cockpit + cards，不再以 tabs 承載五個主要工作流。
+2. `/observability`：移除底部 PageTabs，改成拓樸與 drilldown cards。
+3. `/automation`：併入 Knowledge & Automation。
+4. `/operations`：改成 operations card hub，重要子頁保留 direct route。
+
+驗證：
+
+- URL 不再依賴 `?tab=` 才能找到核心工作流。
+- 每頁首屏能回答「狀態、卡點、下一步」。
+
+### D3：主要頁圖表化
+
+優先處理：
+
+1. AwoooP Runs / Work Items / Approvals：AI flow、repair gate、verifier、KM writeback 要可視化。
+2. Tenants：所有網站、專案、產品、前後台、repo、route、smoke、owner、runtime gate 納入 coverage heatmap。
+3. Observability：所有主機、服務、工具、套件、網站、告警源納入 topology + alert funnel。
+4. Knowledge Base：KM / PlayBook / scripts / schedules / verifier / trust score 總帳。
+5. Code Review：所有產品 pre-deploy / post-deploy / rollback / malicious-code scanning gate。
+
+### D4：正式站驗證
+
+每個切片都必須做：
+
+- `pnpm --filter @awoooi/web typecheck` 或 Gitea code-review 等效驗證。
+- production desktop smoke。
+- production mobile smoke。
+- `horizontalOverflow=0`。
+- 無內部工作視窗語彙、raw secret、raw provider endpoint 外露。
+- 不把 UI 可見誤當 runtime gate。
+
+## 8. 規範調整說明
+
+目前規範中必須保留：
+
+- 不 force push。
+- 不讀 secret 明文。
+- 不把 UI / docs / snapshot 當 runtime 授權。
+- 修改正式功能後必須有 production desktop / mobile smoke。
+- i18n 與敏感資訊遮蔽必須維持。
+
+目前規範中會拖慢且造成產品不專業的做法，必須調整：
+
+| 舊做法 | 問題 | 新做法 |
+|---|---|---|
+| 每個治理點都先做 docs-only 切片 | 文件變多，但產品體驗和自動化沒有前進。 | 只有安全 / runtime / owner gate 才需要完整 docs gate；UI/UX 整合直接進產品切片。 |
+| 只要有 read-only card 就提高完成度 | 使用者看不到實際閉環，只看到文字。 | 完成度必須分成 read-only、operator actionable、dry-run、verified apply、learning writeback。 |
+| 保留所有舊頁與 tabs | 導致頁面重複、入口混亂、像舊版本。 | 建立 canonical map，舊頁逐步 redirect / hidden。 |
+| 長文字說明當作 AI 自動化證據 | 告警和頁面仍要求人工，沒有自動化成果。 | 每個告警必須沉澱 KM / PlayBook / script / schedule / verifier / owner / next action。 |
+| 只做局部修補再推版 | 容易造成正式環境版本感混亂。 | IA D0 沒完成前不推新正式版本；實作切片必須對照整合表。 |
+
+## 9. 本輪立即工作清單
+
+| ID | 工作 | 交付物 | 狀態 |
+|---|---|---|---|
+| IA-D0-001 | 路由與頁籤盤點 | 本文件第 1 至 4 節 | 進行中 |
+| IA-D0-002 | Canonical route map | `AwoooProductShell` / sidebar / command palette 共用資料來源設計 | 待做 |
+| IA-D0-003 | PageTabs 去留清單 | 第 3 節轉成實作 issue / checklist | 待做 |
+| IA-D0-004 | 優先頁視覺骨架 | Situation / Flow / Matrix / Topology / Evidence / Action component spec | 待做 |
+| IA-D1-001 | 導航實作 | Sidebar、breadcrumb、context links、legacy route redirect plan | 待做 |
+| IA-D2-001 | Governance 去 tabs | Cockpit 首屏 + direct drilldown | 待做 |
+| IA-D2-002 | Observability 去 tabs | 全資產拓樸 + alert funnel + service health heatmap | 待做 |
+| IA-D3-001 | Knowledge 自動化資產總帳 | KM / PlayBook / scripts / schedules / verifier | 待做 |
+| IA-D3-002 | Code Review 全產品 release gate | ElephantAlpha / Aider / scanner 分工與 pre/post deploy gate | 待做 |
+
+## 10. 下一步執行規則
+
+1. 本文件未完成前，不再推新的 navigation / IA 正式版本。
+2. 下一個實作 commit 必須引用本文件中的 IA-D 編號。
+3. 每個頁面改版都必須說明它解決哪一個失效設計模式。
+4. 每個完成項回報完成度時，必須分開寫：
+   - UI 可讀性完成度。
+   - 資料鏈完成度。
+   - AI 自動化閉環完成度。
+   - runtime gate / owner gate 是否仍為 `0 / false`。
+
+## 11. 正式站 D0 抽查結果
+
+抽查時間：2026-06-26（台北時間）
+抽查方式：只讀開啟正式站頁面，檢查 `PageTabs`、`role="tablist"`、主要 heading、sidebar labels、水平溢出與錯誤文字。
+邊界：未登入修改、未觸發部署、未執行任何 runtime action。
+
+| 頁面 | 發現 | 判定 |
+|---|---|---|
+| `/zh-TW/governance?tab=automation-inventory` | `PageTabs=1`，分頁文字為 `SLO 儀表 / 治理事件 / AI 待辦 / Agent 市場 / 自動化盤點`。 | 仍用 tabs 當治理主導航，D2 必須改。 |
+| `/zh-TW/observability` | `PageTabs=1`，底部仍有 `服務監控 / APM / 錯誤追蹤 / 應用 / 服務目錄`，頁面已經有多段監控儀表板。 | 重複導航明確，D2 必須移除底部分頁並整合為拓樸 / drilldown。 |
+| `/zh-TW/automation` | `PageTabs=1`，分頁為 `自動修復 / 神經指揮中心 / 漂移偵測`。 | 應合併進 Knowledge & Automation，不再作獨立 tab hub。 |
+| `/zh-TW/operations` | `PageTabs=1`，分頁為 `部署管理 / 工單 / 成本分析 / 行動日誌 / 帳單`；正式站量到水平溢出 `85px`。 | 需要改成 operations card hub，並修 mobile / desktop overflow。 |
+| `/zh-TW/security-compliance` | `PageTabs=1`，分頁為 `安全 / 合規`，頁面也寫明會整合到 IwoooS。 | 已是過渡頁，D2/D3 後要 redirect 或 hidden。 |
+| `/zh-TW/iwooos` | 沒有 `PageTabs`，但首屏抽查有 `role="tablist"` 3 組，屬於拓樸 / 視覺 lens / path selector。 | 局部圖表 lens 可保留，但跨主題切換要改成 anchor / section。 |
+| `/zh-TW/knowledge-base` | 無 `PageTabs`，但正式站量到水平溢出 `88px`，且標題仍是 `知識殿堂 / KM 自動化掌控台`。 | 不是 tabs 問題，是資料沉澱與版面密度問題；D3 優先修。 |
+
+正式站 sidebar 抽查可見：
+
+`指令中心`、`AwoooP 總覽`、`工作鏈路`、`Run 監控`、`審批佇列`、`合約`、`租戶`、`可觀測性`、`告警`、`IwoooS`、`程式碼審查`、`知識與自動化`、`報表`、`營運總覽`、`終端`、`設定`、`經典 AI 中心`、`說明`。
+
+判定：入口文字已恢復，但「全域導航 + 頁面級分頁 + 舊路由」仍同時存在，所以使用者仍會感覺像不同版本混在一起。
+
+## 12. D0 收斂狀態
+
+| ID | 工作 | 狀態 |
+|---|---|---|
+| IA-D0-001 | 路由與頁籤盤點 | 完成 |
+| IA-D0-002 | Canonical route map | 完成草案，第 4 節可直接轉成實作資料結構 |
+| IA-D0-003 | PageTabs 去留清單 | 完成，第 3 節固定優先序 |
+| IA-D0-004 | 正式站抽查 | 完成，第 11 節 |
+| IA-D0-005 | 是否先推版 | 不推，本輪只做本地 D0 盤點 |
+
+D0 完成度：`100%`。
+
+下一個可執行階段：D1 `全域導航與主工作區重整`。D1 開始前必須先決定是否允許產生正式版本；若進入實作，第一個 commit 只處理 canonical route map、sidebar / command palette 共用資料來源、清理 AwoooP 舊 `navItems`，不碰 runtime gate。
+
+## 13. D1 本地第一刀
+
+本段只做本地改動，不 commit、不 push、不部署。
+
+| 項目 | 狀態 | 說明 |
+|---|---|---|
+| Canonical IA map | 完成 | 新增 `apps/web/src/lib/navigation/product-ia.ts`，集中定義全域 sidebar、bottom nav 與 AwoooP workflow title map。 |
+| Sidebar 私有 nav tree | 完成 | `apps/web/src/components/layout/sidebar.tsx` 改引用 `PRODUCT_NAV_SECTIONS` / `PRODUCT_BOTTOM_NAV_ITEMS`。 |
+| AwoooP layout 私有 navItems | 完成 | `apps/web/src/app/[locale]/awooop/layout.tsx` 改引用 `AWOOOP_WORKFLOW_ITEMS`，不再自建第二份 AwoooP 路由清單。 |
+| Command Palette 私有導航 | 完成 | `apps/web/src/components/command-palette/CommandPalette.tsx` 改由 canonical IA map 攤平產生導覽結果，移除舊 `/authorizations` 優先入口。 |
+| 視覺行為 | 預期不變 | 這一刀是資料來源整併，不移動正式站導航、不改頁面內容、不改 runtime。 |
+| 驗證 | 部分完成 | `git diff --check` 通過；本機 `pnpm --filter @awoooi/web typecheck` 因缺少 `tsc` 失敗，未做 build。 |
+
+D1 本地完成度：`40%`。
+
+D1 尚未完成：
+
+- breadcrumb / context links 尚未改用 canonical IA map。
+- legacy route redirect / hidden 計畫尚未落地。
+- 尚未移除 `/governance`、`/observability`、`/automation`、`/operations` 的頁面級主導航 tabs。
+- 尚未做 production smoke，因為本段沒有推版。
+
+## 14. D2 本地第一刀：Observability 去 tabs
+
+本段只做本地改動，不 commit、不 push、不部署。
+
+| 項目 | 狀態 | 說明 |
+|---|---|---|
+| 移除 Observability PageTabs | 完成 | `/zh-TW/observability` 不再直接嵌入 Monitoring / APM / Errors / Apps / Services panels。 |
+| 改為下鑽入口卡片 | 完成 | 總覽頁底部改成五張入口卡，分別連到 `/monitoring`、`/apm`、`/errors`、`/apps`、`/services`。 |
+| 移除 Operations PageTabs | 完成 | `/zh-TW/operations` 不再直接嵌入 Deployments / Tickets / Cost / Logs / Billing panels，改成五張營運入口卡。 |
+| 移除 Automation PageTabs | 完成 | `/zh-TW/automation` 不再直接嵌入 Auto Repair / Neural Command / Drift panels，改成三張自動化入口卡。 |
+| 移除 Security Compliance PageTabs | 完成 | `/zh-TW/security-compliance` 不再直接嵌入 Security / Compliance panels，保留 IwoooS 過渡說明與兩張下鑽入口卡。 |
+| 移除 Governance PageTabs | 完成 | `/zh-TW/governance` 改成治理區塊卡 + 選中內容，保留 `?tab=` 相容但不再使用 PageTabs 當主導航。 |
+| 移除首頁 PageTabs | 完成 | `/zh-TW` 首頁改成指令中心入口卡 + 內容區，保留 `?tab=alerts/stream/disposition` 相容但不再使用 PageTabs。 |
+| 刪除共用 PageTabs 元件 | 完成 | `components/layout/page-tabs.tsx` 已無實際使用並已刪除，避免未來再被拿來承載主導航。 |
+| IwoooS tablist 分類 | 完成 | 7 處皆屬圖表 lens / path selector / gate radar / command map 的局部視覺控制；先保留，不當主導航處理。 |
+| i18n 文案 | 完成 | `細節分頁` 改為 `下鑽入口`；說明改成總覽頁保留態勢 / 拓樸 / 訊號 / 缺口，細節走獨立入口。 |
+| 驗證 | 部分完成 | messages JSON parse 通過；`git diff --check` 通過；全站 `PageTabs` 實際 import/use 為 0；剩餘 `role="tablist"` 僅在 IwoooS 圖表 lens 與 EvidenceViewer 局部證據檢視。 |
+
+D2 本地完成度：`95%`。
+
+D2 尚未完成：
+
+- IwoooS 局部 lens 還需要後續做視覺命名與可用性優化，但不屬於主導航 tabs。
+- 尚未做 production smoke，因為本段沒有推版。