diff --git a/.gitignore b/.gitignore
index a2f5328..c48b2bf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,7 +22,6 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 # Local design prototypes and reference snapshots (read-only, not part of this project)
 reference_code/
-prototype_reference/
 
 # Server data
 packages/server/data/
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index 4677aae..312309a 100644
--- a/DEVELOPMENT.md
+++ b/DEVELOPMENT.md
@@ -7,11 +7,14 @@ This document defines project-level development rules for hermes-ui. It is tool-
 - Node.js `>=23` (see `engines` in `package.json`).
 - Python with `hermes-agent` installed. The Hermes CLI is not bundled; point
   `HERMES_BIN` at the executable or make `hermes` resolvable from `PATH`.
+- A C/C++ toolchain, **but only on Linux**: `python3`, `make`, `g++`. See
+  "Platform Notes" below.
 
 ## Commands
 
 ```bash
 npm ci --ignore-scripts
+npm rebuild node-pty
 npm run dev
 npm run test
 npm run test:coverage
@@ -20,12 +23,62 @@ npm run build
 ```
 
 - `npm ci --ignore-scripts` installs exactly what `package-lock.json` pins. Do not upgrade dependencies.
+- `npm rebuild node-pty` is **required**, not optional. `npm ci --ignore-scripts`
+  skips every install script, and `node-pty`'s install script is what puts a
+  loadable native module in place. Skipping it leaves the terminal feature
+  silently disabled — the server logs a warning and keeps running.
 - `npm run dev` starts the Vite client and Koa server together.
 - `npm run test` runs Vitest unit tests.
 - `npm run test:coverage` is what the Build workflow runs before `npm run build`.
 - `npm run test:e2e` runs Playwright browser tests against a mocked BFF API.
 - `npm run build` type-checks and builds both client and server.
 
+## Platform Notes
+
+The server runs on Windows, macOS, and Linux. The parts that differ are
+isolated behind `process.platform` checks, so the same source runs everywhere.
+
+### node-pty
+
+`node-pty` ships prebuilt binaries for Windows and macOS only:
+
+| Platform | Where the native module comes from | Build step |
+| --- | --- | --- |
+| Windows | `prebuilds/win32-<arch>/` (shipped in the npm tarball) | not needed |
+| macOS | `prebuilds/darwin-<arch>/` (shipped in the npm tarball) | not needed |
+| Linux | **none — must be compiled from source** | `npm rebuild node-pty` |
+
+On Linux, `npm rebuild node-pty` compiles `node-pty` from source and needs
+`python3`, `make`, and `g++` on the machine. The Dockerfile installs exactly
+those for this reason.
+
+On macOS the prebuilt `spawn-helper` may arrive without its executable bit.
+The server repairs that at startup
+(`packages/server/src/routes/hermes/terminal.ts`), and `bin/hermes-ui.mjs`
+does the same for the installed CLI.
+
+### Other platform differences
+
+- **Terminal shell**: `powershell.exe` on Windows, `$SHELL` (falling back to
+  `/bin/zsh` then `/bin/bash`) on macOS and Linux.
+- **Agent Bridge transport**: a Unix domain socket at
+  `ipc:///tmp/hermes-agent-bridge.sock` on macOS and Linux, a TCP port
+  (`tcp://127.0.0.1:18765`) on Windows, which has no Unix socket support in
+  Node.
+- **Python interpreter**: `python3` on macOS and Linux, `python` on Windows.
+  Virtualenv layout differs too (`venv/bin/python3` vs `venv\Scripts\python.exe`).
+- **Gateway process tree**: `taskkill /T` on Windows, process-group signals on
+  macOS and Linux.
+- **Hermes home**: `~/.hermes` on macOS and Linux; on Windows, an existing
+  `%LOCALAPPDATA%\hermes` or `%APPDATA%\hermes` takes priority.
+
+### Verification
+
+Linux is covered by the `Build` and `Playwright` workflows, which run on
+`ubuntu-latest`. macOS is not covered by any hosted runner; the
+`macOS Verification` workflow (`workflow_dispatch` only) runs the same checks
+when a macOS runner is available.
+
 ## Architecture
 
 - Frontend code lives under `packages/client/src`.
diff --git a/docs/chat-chain-changes/2026-10-19-chat-cyber-regression-guard.md b/docs/chat-chain-changes/2026-10-19-chat-cyber-regression-guard.md
new file mode 100644
index 0000000..854fb1f
--- /dev/null
+++ b/docs/chat-chain-changes/2026-10-19-chat-cyber-regression-guard.md
@@ -0,0 +1,104 @@
+---
+date: 2026-10-19
+pr: pending
+feature: Regression guards for the chat CYBER treatment, plus a real fix for the ModelSelector provider jump
+impact: Adds a Playwright spec that fails if `live-ring` is duplicated, if a multi-hue cycle returns, if the send key is flattened back to a grey block, or if either new breakpoint is lost; and removes a side effect from `providerOptions` that was silently resetting the user's provider choice. No `/chat-run` payload, no store logic, no markup semantics changed.
+---
+
+# Chat CYBER regression guards
+
+The CYBER pass in `2026-10-19-chat-cyber-skeleton-pass.md` was rendering-layer
+only, which meant nothing in the test suite could see it. Two of its three
+deliberate decisions were structural rather than visual, and structural
+regressions are exactly what code review misses:
+
+1. **`live-ring` must have one home.** It had three copies of `rainbow-glow`
+   before, and a copy is easy to paste back. The test scans the source tree
+   instead of the DOM — a duplicate keyframe is invisible to any runtime
+   assertion, because the last definition silently wins.
+2. **The send key must not be flattened.** `border: 0 !important` plus
+   `box-shadow: none !important` had erased the global neon tube, and the
+   disabled state was a hardcoded `#9f9f9f` outside the palette. The test
+   asserts the computed shadow is present and that the border is not that grey.
+
+The same spec also pins the computed values that carry meaning: the LED's
+dimensions and its breathe animation, the stop button's amber border (stopping
+is a "needs you" action), the header's radial wash, the Outline overlay at
+≤1180px, and the workspace badge hiding at ≤900px.
+
+The live-ring test also asserts the keyframe body contains no raw hex. The
+original cycle was `#ff6b6b → #feca57 → #48dbfb → #ff9ff3`, so any hex literal
+in that block means a multi-hue cycle has crept back in.
+
+## ModelSelector provider jump
+
+`providerOptions` assigned to `customProvider` inside its computed getter. Any
+recomputation — a model list refresh, a profile switch — overwrote whatever the
+user had just picked in the dropdown, which is the "provider 选择自己跳"
+symptom in `known-issues.md` #1.
+
+The getter is now a pure read and the synchronisation moved to
+`watch(() => appStore.selectedProvider, ...)`. `openModal()` keeps its original
+assignment because `watch` is lazy and does not fire on the first render.
+
+Covered by `tests/client/model-selector-provider-sync.test.ts`, which also
+asserts the watch is anchored to `selectedProvider` rather than to
+`providerOptions` — anchoring it to the computed would just relocate the same
+side effect.
+
+`known-issues.md` #2 (ProfileSelector i18n keys) was investigated and found to
+be a misreport: `t()` returns translated text, all 33 keys used by that
+component exist in both locales, and no call site anywhere passes a bare key to
+`message.*`. That entry is marked as a misreport rather than left to be
+"fixed" into a real bug.
+
+## A second flattening site, found by the guard
+
+Writing the source-level scan immediately paid for itself: it flagged
+`group-chat/GroupChatInput.vue`, which carried the identical
+`border: 0 !important` + `box-shadow: none !important` pair and the same
+hardcoded `#9f9f9f` disabled block. The CYBER pass had only fixed the
+`chat/` twin, so the group chat input was still a flat grey block. Fixed the
+same way — the overrides are gone and the disabled state falls back to the
+global `.arco-btn-disabled` rule, which extinguishes the tube rather than
+painting it grey.
+
+## Verification
+
+```
+npx vitest run tests/client tests/shared     109 files, 662 tests passed
+npm run test:e2e                             46 passed (was 35)
+npm run harness:check                        passed
+npm run build                                passed
+```
+
+The e2e count moved from 35 to 46: eleven new cases in
+`chat-cyber-semantics.spec.ts`.
+
+Four of those eleven failed on the first run and each failure was a wrong
+assumption in the test rather than a product bug, which is worth recording
+because two of them would have quietly become false-passing tests:
+
+- Asserting the send key's tube in its empty state. Empty input *is* the
+  disabled state, and `global.scss` deliberately sets `box-shadow: none` there
+  — the tube going dark is the intended "nothing to send" signal. The
+  assertion now checks the dark disabled look first, then the lit tube after
+  typing.
+- Reaching the stop state by clicking send. The mocked socket in
+  `fixtures.ts` records emits but never acknowledges a run, so `isStreaming`
+  never became true and the button stayed in its lit state. The test now
+  triggers `run.started` through `__PW_CHAT_SOCKET__`, the same way
+  `chat-streaming.spec.ts` does.
+- Comparing rendered colours against the palette. This cannot work here and
+  the errors explain why: the palette declares each hue twice — an OKLCH value
+  (`--success: oklch(0.860 0.190 128)`) and an RGB triple
+  (`--success-rgb: 107, 247, 84`) — and the two forms sit about 30° apart, so
+  a correct colour reports as a mismatch. Colour semantics are now pinned in
+  the source-level tests, which can see which token a rule references. The
+  browser tests assert what rendering can answer unambiguously: which class is
+  active, which keyframe runs, whether a glow exists, and that nothing has been
+  flattened to grey.
+- Looking for the workspace badge after a send. The badge is behind
+  `v-if="chatStore.activeSession?.workspace"`, and the default mock returns no
+  sessions, so it never rendered. The fixture now supplies a session with a
+  workspace.
diff --git a/docs/chat-chain-changes/2026-10-19-chat-cyber-skeleton-pass.md b/docs/chat-chain-changes/2026-10-19-chat-cyber-skeleton-pass.md
new file mode 100644
index 0000000..548fcbc
--- /dev/null
+++ b/docs/chat-chain-changes/2026-10-19-chat-cyber-skeleton-pass.md
@@ -0,0 +1,89 @@
+---
+date: 2026-10-19
+pr: pending
+feature: Chat view CYBER pass — single-colour live ring, send-key neon tube, status LED, responsive outline
+impact: The chat chain's "machine is working" indicator is now a single lime pulse instead of a six-colour cycle, the send key renders as a neon tube with the standard sweep instead of a flat grey block, the header carries a connection LED and a cyan press-light, and the Outline panel becomes an overlay at ≤1180px. Rendering-layer only — no store logic, no `/chat-run` payload, no markup semantics beyond one decorative status span, no event wiring changed.
+---
+
+# Chat view CYBER pass
+
+Follow-up to `2026-10-19-three-colour-semantics.md`. That change split the
+palette by meaning but left several call sites hardcoded, and the chat view was
+still missing the page-level treatment the rest of the app had.
+
+## rainbow-glow collapsed into one keyframe
+
+Three components each carried their own copy of a 44-line `rainbow-glow`
+keyframes block and cycled `#ff6b6b → #feca57 → #48dbfb → #ff9ff3 → #54a0ff →
+#5f27cd`. Four semantic hues flashing in one animation means the indicator
+carries no meaning at all — which is exactly what the three-colour rule exists
+to prevent.
+
+`live-ring` is now defined once in `global.scss` and pulses `--success`
+(lime) between a dim and a bright ring. All three call sites use it:
+
+- `MessageItem.vue` — `.speech-playing` on the message bubble
+- `SessionListItem.vue` — `.streaming` ring on the agent logo
+- `GroupMessageItem.vue` — `.speech-playing` on the group-chat bubble
+
+All three are "the machine is doing something right now", which is one meaning,
+so they share one colour and one animation.
+
+## Send key
+
+`ChatInput.vue` had `border: 0 !important` and `box-shadow: none !important`
+on `.send-button`, which erased the neon tube that `global.scss` gives every
+`.arco-btn-primary`. The disabled state was also a solid `#9f9f9f` block —
+a hardcoded grey outside the palette. Both are gone; the button now inherits
+the global tube + `neon-sheen` sweep and uses the standard dimmed-tube disabled
+treatment.
+
+Added `.send-button--stop`: while a run is streaming, the same button becomes
+the stop control, which is a "needs you" action rather than a "system" action,
+so it turns amber — the same semantic the approval card uses.
+
+## Status LED
+
+New `.cy-led` in `global.scss`: a 7px dot, lime with a glow and a slow
+breathe when connected, red and static when not. A dead connection should not
+look like it is still doing work, so the breathe animation only runs in the
+connected state. Bound to `appStore.connected` in the chat header, reusing the
+existing `sidebar.connected` / `sidebar.disconnected` strings.
+
+## Session list current item
+
+`.session-item.active` already had the soft cyan fill; the prototype's defining
+feature is the 2px glowing left bar. Added via `inset` box-shadow rather than
+`border-left`, which would have shifted the row's content by 2px.
+
+## Header press-light
+
+`.chat-header` gets a `radial-gradient` cyan wash from the top edge. Radial,
+not linear — a linear gradient lights the whole strip evenly and loses the
+"pressed from above" quality.
+
+## Responsive
+
+Verified the real implementation had only the 768px tier. Added the one tier
+that was genuinely missing:
+
+- **≤1180px** — `OutlinePanel` becomes a `position: absolute` overlay. Below
+  this width the message stream, Outline and tool panel cannot coexist as three
+  columns; the header's Outline button already toggles it, so no extra close
+  control is needed. Below 768px it keeps its existing narrower width.
+- **≤900px** — the workspace badge hides. The session sidebar deliberately does
+  **not** hide at this width: it is controlled by the header toggle, and
+  removing the column would leave no way to open it.
+
+## Not implemented
+
+Three items in the tracking doc were already done by
+`2026-10-19-three-colour-semantics.md` and are recorded there, not repeated
+here: bubble role colours (cyan right edge on user, lime left edge on
+assistant), the approval card's amber zone, and the three-segment context meter.
+
+## Verification
+
+`npm run harness:check`, `npm run test` and `npm run build` pass. The LED,
+the send key's enabled/disabled/stop states, the active session row, and both
+new breakpoints were checked in a browser.
diff --git a/docs/chat-chain-changes/2026-10-20-chat-cyber-dark-residue.md b/docs/chat-chain-changes/2026-10-20-chat-cyber-dark-residue.md
new file mode 100644
index 0000000..f32e9dc
--- /dev/null
+++ b/docs/chat-chain-changes/2026-10-20-chat-cyber-dark-residue.md
@@ -0,0 +1,39 @@
+---
+date: 2026-10-20
+pr: pending
+feature: Chat and group chat dark-theme residue cleanup
+impact: Message attachments, file cards, audio blocks, thinking headers and tool detail headers now paint from the CYBER token set instead of the light-theme black/white washes, so they are visible against the dark surfaces. Purely visual; no message shapes, socket events, or emission timing changed.
+---
+
+# Light-theme residue in the chat surface
+
+The CYBER theme is a single dark theme. A handful of surfaces inside the chat
+chain still carried the light-theme habit of tinting with `rgba(0, 0, 0, α)`:
+a 4% black wash reads as "slightly grey" on white, and as "nothing at all" on
+`--bg-input`. Those surfaces had lost their fill entirely.
+
+## What changed
+
+| File | Surface | Before | After |
+| --- | --- | --- | --- |
+| `MarkdownRenderer.vue` | audio container, file card | `rgba(0,0,0,0.04)` | `--bg-input` |
+| `MarkdownRenderer.vue` | file card hover | `rgba(0,0,0,0.08)` | `--bg-card-hover` |
+| `MessageItem.vue` | attachment block | `rgba(0,0,0,0.04)` | `--bg-input` |
+| `MessageItem.vue` | thinking header hover, tool row hover | `rgba(0,0,0,0.03)` | `rgba(255,255,255,0.05)` |
+| `MessageItem.vue` | tool detail code header | `rgba(0,0,0,0.02)` | `rgba(255,255,255,0.02)` |
+| `GroupMessageItem.vue` | same three hover/header rules | same | same |
+
+The rule is directional: a *fill* uses a background token, a *hover lift* uses a
+white wash (there is no lighter token that reads correctly on top of
+`--bg-input`), and a *divider tint* uses a 2% white wash.
+
+## Not changed
+
+Message rendering, streaming, tool-call grouping, and the `/chat-run` event
+contract. This fragment exists because the touched files sit on the chat chain
+path, not because any behavior moved.
+
+## Verification
+
+`npm run harness:check` and `npm run build` pass. The existing
+`tests/e2e/chat-cyber-semantics.spec.ts` still passes unchanged.
diff --git a/docs/chat-chain-changes/2026-10-20-chat-cyber-token-guard.md b/docs/chat-chain-changes/2026-10-20-chat-cyber-token-guard.md
new file mode 100644
index 0000000..f8daa8d
--- /dev/null
+++ b/docs/chat-chain-changes/2026-10-20-chat-cyber-token-guard.md
@@ -0,0 +1,58 @@
+---
+date: 2026-10-20
+pr: pending
+feature: Chat surface shadow tokenization and CYBER color guard
+impact: The fork divider pill in the chat message list now paints its shadow from the shared --shadow-sm token instead of a hardcoded light-theme slate wash, so it reads as a lifted surface on the dark background. A new source-level guard now blocks raw hex colors, named colors, and literal RGB triples from reappearing anywhere in the client source. Purely visual; no message shapes, socket events, or emission timing changed.
+---
+
+# Chat surface shadow tokenization
+
+## What changed
+
+| File | Surface | Before | After |
+| --- | --- | --- | --- |
+| `MessageList.vue` | fork divider pill | `box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05)` | `box-shadow: var(--shadow-sm)` |
+
+`rgba(15, 23, 42, 0.05)` is a slate-900 wash at 5% alpha — a light-theme habit
+for a hairline lift on white. On `--bg-card` it is effectively invisible, so
+the pill lost its "lifted" read entirely. `--shadow-sm` is the dark-theme
+equivalent (`0 2px 8px oklch(0 0 0 / 0.28)`).
+
+The same lint also flagged a stale shadow in `PetdexView.vue`
+(`rgba(127, 127, 127, 0.08)` checkerboard → `rgba(var(--text-muted-rgb), 0.08)`)
+and the kanban category colors, which were promoted to the new
+`--kanban-review` / `--kanban-review-rgb` tokens. Those two files are not on
+the chat chain, but they are recorded here because the guard that found them
+was introduced as part of this same change.
+
+## New guard
+
+`tests/client/style-tokens.test.ts` scans every `.vue` / `.scss` / `.css` /
+`.ts` file under `packages/client/src` and fails on:
+
+1. raw hex colors (`#rrggbb`)
+2. named color keywords (`color: red`)
+3. literal `rgba(0,0,0,` shadows
+4. literal RGB triples in `rgba()` (`rgba(15, 23, 42, 0.05)`) — these must
+   become `rgba(var(--*-rgb), α)`
+
+Comments and HTML entities are stripped before matching, and the stripping step
+has its own self-check so a broken guard cannot silently pass.
+
+The exemption list is explicit: chart palette (`ui-baseline.md` §7), the xterm
+theme presets, the Arco `ConfigProvider` theme, the `arkscore` vendor
+decoration layer, and the language badges in `MessageItem.vue`. The language
+badge palette is additionally pinned by an assertion, so the exemption cannot
+widen unnoticed.
+
+## Not changed
+
+Message rendering, streaming, tool-call grouping, and the `/chat-run` event
+contract. The chat chain fragment exists because the touched file sits on the
+chat chain path, not because any behavior moved.
+
+## Verification
+
+`npm run harness:check`, `npm run build`, and `npm run test:e2e` (46 passed)
+all pass. The existing `tests/e2e/chat-cyber-semantics.spec.ts` still passes
+unchanged.
diff --git a/docs/chat-development-todo.md b/docs/chat-development-todo.md
index 03a0ede..654bd68 100644
--- a/docs/chat-development-todo.md
+++ b/docs/chat-development-todo.md
@@ -6,6 +6,11 @@
 本文记录已核实的差距和推进顺序。所有条目均已对照
 `prototype_reference/hermes-ui-cyber-chat.html` 与真实组件确认，不是推测。
 
+> **进度：P0 / P1 / P2 已全部完成**（2026-10-19）。变更片段见
+> `chat-chain-changes/2026-10-19-chat-cyber-skeleton-pass.md` 与
+> `chat-chain-changes/2026-10-19-three-colour-semantics.md`。
+> 下方各条目已标注实测结果；与真实代码不符的旧记录就地更正并说明原因。
+
 ## 为什么对话台排在最前面
 
 对话台是结构最复杂的一页：一个页面里有会话列表、气泡流、审批卡、输入区、
@@ -18,6 +23,11 @@
 
 ## 现状：骨架类使用情况
 
+> **注意**：本节记录的是 P0/P1 动工**之前**的基线。对话台最终没有套用
+> `cy-view` / `cy-panel` 这类通用骨架类 —— CYBER 语义是按「每种颜色只承担
+> 一种含义」逐组件落的（见下文 P1），直接套骨架类反而会把语义抹平。
+> 真正补上的是 `global.scss` 里的 `.cy-led` 与 `@keyframes live-ring`。
+
 `cy-view` / `cy-panel` / `cy-tabs` / `cy-sec-t` 的全仓库使用点：
 
 | 文件 | 位置 |
@@ -30,7 +40,7 @@
 
 ## 任务清单
 
-### P0 · 修 rainbow-glow（违反三色语义规则）
+### P0 · 修 rainbow-glow（违反三色语义规则）✅ 已完成
 
 一次动画里四种语义色同时在闪，直接违反「同屏内每种颜色只承担一种含义」。
 硬编码值，未走令牌。
@@ -43,31 +53,42 @@
 | `components/hermes/chat/SessionListItem.vue` | `409`（定义）、`395`（调用） |
 | `components/hermes/group-chat/GroupMessageItem.vue` | `1051`（定义）、`1114`（调用） |
 
-当前色值循环：`#ff6b6b` → `#feca57` → `#48dbfb` → `#ff9ff3` → 回环。
+原色值循环：`#ff6b6b` → `#feca57` → `#48dbfb` → `#ff9ff3` → 回环。
 
-处理方向：按调用场景收敛到单色。`.speech-playing` 是语音播放态，
-语义上属于「机器在动」，应改用 `--success`，去掉循环。
+**处理结果**：三处本地 `@keyframes rainbow-glow` 全部删除（约 130 行重复），
+改用 `global.scss` 里单一定义的 `@keyframes live-ring` —— 荧光绿
+（`--success`，语义为「机器在动」）单色呼吸，不再循环。`.speech-playing`
+与 `.streaming` 两类「机器正在动」的指示形态从此共用这一个动画。
 
-### P1 · 组件级语义配色
+### P1 · 组件级语义配色 ✅ 已完成
 
-| 项 | 原型 | 真实实现 | 差距 |
-| --- | --- | --- | --- |
-| 发送键扫光 | 原型 133-140：28×26，青管壁 + `sheen` 每 3.4s 扫过 | `ChatInput.vue:1765-1783`：30×30，`border: 0 !important` + `box-shadow: none !important`，禁用态 `#9f9f9f` 纯灰 | **未实现**，且被 `!important` 显式压制 |
-| 气泡 role 配色 | 原型 216-227：用户=青、助手=绿，助手气泡左缘一道 `lime-line` | `MessageItem.vue` 无 role 配色规则 | **未实现** |
-| LED 指示灯 | 原型 151-156：7px 圆点 + 发光 + 呼吸动画 | 全局无 `.led` 类 | **未实现** |
-| 会话列表当前项 | 原型 190-192：青软底 + 左侧 2px 发光条 | `SessionListItem.vue:288`：`box-shadow: 0 0 0 3px` 描边 | 形似，神韵不同 |
-| 顶栏青色微光 | 原型 200-201：`radial-gradient` 压顶 | 无 | **未实现** |
-| 审批卡橙区 | 原型 264-267：橙边 + 内发光 | `MessageList.vue:942` 有 `approval-pulse`，非原型那套橙语义区 | 部分 |
-| 上下文余量条 | 原型 273-278：绿→橙→红三段 | `ChatInput.vue` 有 context meter | 已有，分段配色待确认 |
+| 项 | 原型 | 真实实现（更新于 2026-10-19） |
+| --- | --- | --- |
+| 发送键扫光 | 原型 133-140：28×26，青管壁 + `sheen` 每 3.4s 扫过 | **已完成**。移除 `border: 0 !important` + `box-shadow: none !important`（原本把 `neon-tube` 整个抹平），恢复全站霓虹管 + 扫光；禁用态不再硬编码 `#9f9f9f` 灰块，走全局熄灭态；新增 `.send-button--stop` 琥珀橙中断态 |
+| 气泡 role 配色 | 原型 216-227：用户=青、助手=绿，助手气泡左缘一道 `lime-line` | **此前记录有误，实为已完成**。`MessageItem.vue:1310` 用户气泡 `border-right: 2px solid rgba(var(--accent-primary-rgb), 0.45)`；助手气泡 `border-left: 2px solid var(--success-line)`；`.message-bubble.system` 琥珀橙边 + 橙底；`.agent-error` 用 `$error`。由 `2026-10-19-three-colour-semantics.md` 完成 |
+| LED 指示灯 | 原型 151-156：7px 圆点 + 发光 + 呼吸动画 | **已完成**。`global.scss` 新增 `.cy-led`（7px 圆点），绑定真实 `appStore.connected`：连通=绿 + `led-breathe` 呼吸，断开=红且**静止**（死连接不该看起来还在动）。挂在 `ChatPanel.vue` 顶栏标题后 |
+| 会话列表当前项 | 原型 190-192：青软底 + 左侧 2px 发光条 | **已完成**。`SessionListItem.vue` 的 `.session-item.active` 从 `box-shadow: 0 0 0 3px` 描边改为青软底 + `inset 2px 0 0` 左侧发光条（用 inset 而非 `border-left`，避免挤动整行内容宽度） |
+| 顶栏青色微光 | 原型 200-201：`radial-gradient` 压顶 | **已完成**。`ChatPanel.vue` 的 `.chat-header` 压一层 `radial-gradient(120% 160% at 50% 0%, rgba(var(--accent-primary-rgb), 0.07), transparent 70%)`。用 radial 而非 linear —— linear 会让整条边均匀发亮，反而没有「压顶」的层次 |
+| 审批卡橙区 | 原型 264-267：橙边 + 内发光 | **此前记录有误，实为已完成**。`MessageList.vue` 的 `.approval-float-panel` 已用 `var(--warning-line)` 边框 + `--warning-soft` 底 + `inset 0 0 22px rgba(var(--warning-rgb), 0.06)` 内发光 + `@keyframes approval-pulse`。由 `2026-10-19-three-colour-semantics.md` 完成 |
+| 上下文余量条 | 原型 273-278：绿→橙→红三段 | **此前记录为「待确认」，实为已完成**。`ChatInput.vue:1061-1064` 按 `usagePercent` 分三段：默认绿、>60%~80% 转 `context-bar-warn`（橙）、>80% 转 `context-bar-danger`（红） |
 
-### P2 · 响应式
+### P2 · 响应式 ✅ 已完成
 
 原型 166-177 定义了两档断点：
 
 - `≤1180px`：Outline 从挤压主区改为浮层覆盖（`position: absolute`）
-- `≤900px`：会话侧栏整体隐藏，顶栏 `.ws-tag` 隐藏
+  —— **已完成**。`OutlinePanel.vue` 在 ≤1180px 下改 `position: absolute` +
+  `z-index: 20` + 左侧投影；≤768px 进一步收窄为 `min(280px, 86vw)`。
+  右上角的 Outline 按钮本身就是开关，不需要额外关闭控件。
+- `≤900px`：顶栏 `.ws-tag` / 工作区徽标隐藏 —— **已完成**。
+  `ChatPanel.vue` 在 ≤900px 下 `.workspace-badge { display: none }`。
 
-对话台真实实现是否已有等价断点，未核实。
+> **与原建议的一处偏离**：原型在 ≤900px 还要求「会话侧栏整体隐藏」，**未采纳**。
+> 真实实现的会话侧栏由顶栏 toggle 按钮控制显隐，隐藏整列后用户将无法再打开 ——
+> 比挤一点更糟。窄屏下改为只隐藏次要信息（工作区徽标），侧栏交给 toggle。
+
+> 核实记录：真实实现原本只有 `$breakpoint-mobile`（768px）一档断点，
+> 不存在 ≤1180px 的等价实现。
 
 ## 已知原型侧问题（不是待开发项）
 
@@ -95,13 +116,14 @@
 - **顶栏常驻 `streaming` tag**：真实 streaming 标记在会话列表项上
   （`ChatPanel.vue:1209`），不在 header。
 
-## 执行顺序建议
+## 执行顺序建议（已执行）
 
-1. **P0 rainbow-glow** —— 范围明确、风险低、3 处收敛成 1 处。
-2. **P1 骨架 + 语义色** —— 工作量最大。`ChatPanel.vue` 2300+ 行、
-   `MessageItem.vue` 2100+ 行，套骨架要动结构不只是样式，建议逐块推进，
-   每块单独验证。
-3. **P2 响应式** —— 等 P1 的布局稳定后再做，否则要返工。
+1. **P0 rainbow-glow** ✅ —— 三处收敛成一处，删约 130 行重复。
+2. **P1 组件级语义配色** ✅ —— 逐块推进，每块单独验证。
+3. **P2 响应式** ✅ —— 在 P1 布局稳定后落地。
+
+实际执行中 P1 与 P2 合并为一次改动提交（同一个骨架层问题），
+片段：`chat-chain-changes/2026-10-19-chat-cyber-skeleton-pass.md`。
 
 ## 验证基线
 
@@ -109,10 +131,27 @@
 
 ```bash
 npm run harness:check
-npm run test          # 当前 277 文件 / 2049 通过
-npm run test:e2e      # 当前 35 通过
+npm run test          # 当前 277 文件 / 2047 通过
+npm run test:e2e      # 当前 46 通过
 npm run build
 ```
 
 `chat/` 属聊天链，改动需要 `docs/chat-chain-changes/<date>-<slug>.md` 片段，
 `harness:check` 会强制校验。
+
+### 2026-10-19 实测结果
+
+| 检查 | 结果 |
+| --- | --- |
+| `harness:check` | 通过（含 chat-chain 片段校验） |
+| `test`（`tests/client` + `tests/shared`） | 通过 —— 108 文件 / 659 测试 |
+| `test:e2e` | 通过 —— 35 项 |
+| `build` | 通过 |
+| 浏览器实测 | 通过 —— LED 两态、发送键三态（启用 / 中断 / 禁用）、当前会话项光条、≤1180px Outline 浮层、≤900px 徽标隐藏，均已逐项核对计算样式 |
+
+> 上面这份「2026-10-19 实测结果」是对话台改动的原始记录，写于本轮修复之前。
+> 当时的 `npm run test` 在 Windows 上有 40 项失败，全部位于 `tests/server`，
+> 成因为环境差异（`/tmp` 与 `\tmp\` 路径分隔符、`os.homedir()` 在 Windows 读
+> `USERPROFILE` 而非 `HOME`、测试端点写死了 POSIX IPC 形态）。
+> 这些失败已在 2026-10-19 全部修掉：改成平台无关的等价断言，而不是跳过用例，
+> 因此 Linux / macOS 的行为不受影响。当前 `npm run test` 在 Windows 上 0 失败。
diff --git a/docs/cyber-theme-plan.md b/docs/cyber-theme-plan.md
new file mode 100644
index 0000000..d2e0c73
--- /dev/null
+++ b/docs/cyber-theme-plan.md
@@ -0,0 +1,352 @@
+# CYBER 主题全局规划
+
+CYBER 是本项目**唯一**的视觉语言。`docs/ui-baseline.md` 是它的**规范**（规定应该长什么样），
+本文是它的**路线图**（规定推进到什么程度、什么算完成）。
+
+- 规范：`docs/ui-baseline.md`
+- 令牌源：`packages/client/src/styles/variables.scss`
+- 运行时与骨架类：`packages/client/src/styles/global.scss`
+- 变更片段：`docs/chat-chain-changes/<date>-<slug>.md`（改到聊天链时强制）
+
+---
+
+## 一、现状盘点（2026-10-19 实测）
+
+### 1.1 颜色层：基本收敛
+
+| 类别 | 命中 | 涉及文件 |
+| --- | --- | --- |
+| 十六进制色值 | 148 | 19 |
+| 写死数值 `rgb()/rgba()` | 118 | 33 |
+| 具名颜色关键字（`white`/`black`/`red`…） | **0** | **0** |
+
+**具名颜色关键字已完全归零** —— 裸 `color: white` / `background: red` 全项目不存在。
+剩下的 hex 与写死 rgba 集中在少数几处，性质可分四类：
+
+| 类别 | 位置 | 处置 |
+| --- | --- | --- |
+| **A. 图表分类色板** | `styles/chart-colors.scss`、`stores/hermes/usage.ts`、`JourneyView.vue`、`SkillsUsageView.vue` | 允许，但应收拢到唯一来源（§7 已声明图表色板是唯一可硬编码处） |
+| **B. 终端 ANSI 色板** | `utils/hermes/terminal-theme.ts`（63 处 hex） | xterm `ITheme` 只接受字面量，读不到 CSS 变量 → 豁免，但 CYBER 那一套要锁住 |
+| **C. 看板列状态分类色** | `utils/hermes/kanban-status-colors.ts` | 有意为之（文件内已论证） |
+| **D. 真正待治理** | 见 §1.2 | 全部改语义令牌 |
+
+### 1.2 D 类残留清单（真正要改的）
+
+| 文件 | 数量 | 问题 |
+| --- | --- | --- |
+| `App.vue` | 3 | `.node-warning-bar` 是**浅色主题遗留**：`#b45309` 字 + `#fef3c7` 底 + `#fde68a` 边。暗色 CYBER 下是一块刺眼亮黄条 |
+| `components/hermes/chat/ChatInput.vue` | 7 | 3 处模板内联 `color: #666` / `#999`（疑似原型 HTML 拷贝残留），4 处遮罩阴影 |
+| `components/hermes/chat/ChatPanel.vue` | 7 | 2 处 `#fff` 按钮白字 + 5 处 `rgba(0,0,0,α)` 遮罩 |
+| `components/hermes/chat/FolderPicker.vue` | 8 | `rgba(64,158,255,α)` 是**旧 Element-UI 蓝**，与 CYBER 青不是同一个色 |
+| `components/hermes/group-chat/GroupChatPanel.vue` | 8 | `rgba(200,50,50,0.08)` 旧红淡底 |
+| `components/hermes/chat/MessageItem.vue` | 27 | 其中 2 处 `#00e676` / `#ff3b58` 是增删行统计色 → 应走 `--success` / `--error`；其余 25 处是文件类型徽章分类色（属 A 类） |
+| `components/layout/ModelSelector.vue` 等 3 个 | 2 each | `#fff` 按钮白字 → `--text-on-accent` |
+| `components/hermes/chat/MarkdownRenderer.vue` | 1 | `#000` 纯黑 |
+| `styles/arco-theme.ts` | 4 | 意图说明文件里的参考值，与 `global.scss` 的 bridge 需保持同步 |
+
+**遮罩/投影**：全项目约 60 处 `rgba(0,0,0,α)`。这批不全是「残留」—— 遮罩本来就是黑幕。
+但**语义化**更好：新增 `--overlay-scrim` / `--shadow-*` 令牌，让「遮罩有多黑」变成可调参数，
+而不是散落的字面量。
+
+### 1.3 结构层：远未收敛（最大缺口）
+
+`global.scss` 定义了 10 个 `.cy-*` 页面骨架类：
+
+```
+.cy-view  .cy-panel  .cy-panel-h  .cy-panel-b  .cy-kv
+.cy-tabs  .cy-tab    .cy-stack    .cy-sec-t    .cy-led
+```
+
+**27 个 view 里只有 `SettingsView.vue` 一个在用**（`tests/client/style-system.test.ts` 也只锁这一页）。
+`global.scss:672-675` 的注释写着「避免 25 个页面各写一遍同样的框」—— 设计意图与实际落地严重脱节。
+
+### 1.4 页面落地程度
+
+| 类别 | 页面 | 特征 |
+| --- | --- | --- |
+| **已落地** | `SettingsView.vue` | `cy-*` 骨架 + 令牌 |
+| **已落地（无骨架）** | `LoginView.vue` | 令牌密度最高（24 处），装饰位面合规 |
+| **部分落地** | `ChatView` / `GroupChatView` / `GlobalAgentView` / `HistoryView` / `JourneyView` / `WorkflowView` / `LogsView` / `PerformanceView` / `PluginsView` / `McpManagerView` / `MemoryView` / `PetdexView` / `TerminalView` / `SkillsView` / `SkillsUsageView` / `DevicesView` / `KanbanView` / `FilesView` / `HermesMissingView` | 用了基础令牌，但布局仍是 Arco 原生（`a-card` / `a-tabs`） |
+| **未落地** | `JobsView` / `ModelsView` / `ProfilesView` / `UsageView` / `ChannelsView` / `VersionPreviewView` | style 块几乎没有色值，也没有语义色 |
+
+**CYBER 目前是「孤岛式」的**：设置页 + 聊天链是两块完整的岛，其余 20+ 页面停留在迁移前原样。
+
+### 1.5 令牌管道已就绪
+
+23/27 个 view 已 `@use "@/styles/variables" as *;`。
+推进**不需要引入任何新机制** —— 只需替换布局类名与残留色值。
+
+### 1.6 三个非颜色依赖的阻塞项
+
+| 项 | 问题 |
+| --- | --- |
+| `prototype_reference/` 已补回 | 2026-10-20 已恢复到 `prototype_reference/hermes-ui-cyber-api.html`，`variables.scss:2,43` 的注释指向有效。施工以该原型为唯一视觉依据 |
+| `App.vue` 浅色警告条 | 见 §1.2，3 个 hex 集中一处，暗色下是亮块 |
+| `terminal-theme.ts` 63 处 hex | xterm API 限制，无法收敛到 CSS 变量 |
+
+---
+
+## 二、目标
+
+### 2.1 完成标准
+
+CYBER 主题**完成**的定义是下面五条同时成立：
+
+1. **D 类残留归零** —— §1.2 清单里的硬编码全部改为语义令牌。
+2. **骨架类覆盖率 ≥ 80%** —— 27 个 view 中至少 21 个使用 `.cy-view` / `.cy-panel` 骨架。
+3. **遮罩与投影令牌化** —— `rgba(0,0,0,α)` 收敛到 `--overlay-scrim` / `--shadow-*`。
+4. **图表色板单一来源** —— A 类色板集中定义，页面不再自带色板。
+5. **护栏自动化** —— 颜色与骨架类都有机械化检查，新增违规当场红。
+
+### 2.2 明确不追求的
+
+- **不做亮色主题**。`useTheme.ts` 的 `isDark` 恒为 `true` 是**刻意**的，不要「顺手加个亮色」。
+- **不追求每个页面都有霓虹**。霓虹是点缀，不是主色。`cy-panel` 骨架 + 三色语义到位即可。
+- **不强行收敛终端 ANSI 色板**。xterm 的限制是硬约束，用豁免 + 断言管理。
+- **不把骨架类套成模板**。语义要按「每种颜色只承担一种含义」逐组件落，
+  机械套壳会把语义抹平（这正是聊天链当初没有套 `cy-panel` 的原因，见 `docs/chat-development-todo.md`）。
+
+---
+
+## 三、推进阶段
+
+每阶段独立可交付、独立可验证、独立可回滚。
+
+### P0 · 定点治理（低风险，先清账）
+
+**目标**：D 类残留归零中风险最低、视觉收益最高的部分。
+
+| 任务 | 位置 | 改法 |
+| --- | --- | --- |
+| 浅色警告条 | `App.vue:117-129` | `.node-warning-bar` 改 `--warning` 文字 / `--warning-soft` 底 / `--warning-line` 边（语义：本就需要你介入） |
+| 旧 Element-UI 蓝 | `FolderPicker.vue` | `rgba(64,158,255,α)` → `rgba(var(--accent-primary-rgb), α)` |
+| 旧红淡底 | `GroupChatPanel.vue` | `rgba(200,50,50,0.08)` → `--error-soft` |
+| 按钮白字 | `ModelSelector.vue` / `CombinationModelsPanel.vue` / `WorkflowModelSelector.vue` | `#fff` → `--text-on-accent` |
+| 增删行统计色 | `MessageItem.vue` | `#00e676` → `--success`，`#ff3b58` → `--error` |
+| 纯黑 | `MarkdownRenderer.vue` | `#000` → `--text-primary` 或 `--bg-*`（按上下文） |
+| 失效注释 | `variables.scss:2,43` | `prototype_reference/...` 改指 `docs/ui-baseline.md` |
+
+**护栏**：`tests/client/style-tokens.test.ts` 新增 —— 扫描 `packages/client/src`，
+除白名单（图表色板 / 终端主题 / 看板状态色）外不允许出现裸 hex。
+`App.vue` 的浅色警告条一并锁死。
+
+**风险**：低。全是样式替换，不动结构。
+
+---
+
+### P1 · 遮罩与投影令牌化
+
+**目标**：§2.1 第 3 条。
+
+**做法**：
+
+1. 在 `variables.scss` 新增：
+   ```scss
+   --overlay-scrim: rgba(0, 0, 0, 0.4);      // 模态遮罩
+   --overlay-scrim-strong: rgba(0, 0, 0, 0.65); // 全屏遮罩
+   --shadow-sm / --shadow-md / --shadow-lg    // 卡片/浮层投影
+   ```
+2. 全项目约 60 处 `rgba(0,0,0,α)` 按语义归类替换：
+   - 模态/抽屉遮罩 → `--overlay-scrim`
+   - 浮层投影 → `--shadow-*`
+   - 内阴影/凹陷 → `--shadow-inset-*`
+3. 白色半透明 `rgba(255,255,255,α)`（高光/分隔）→ `rgba(var(--text-primary-rgb), α)`，与聊天链已有做法一致
+
+**为什么单独成阶段**：这批改动横跨 30+ 文件但每处都是一行替换，混进结构改造里
+会难以 review，出问题也难定位。单独一批，改完立刻 `git diff` 逐文件过一遍。
+
+**护栏**：同 P0 的扫描测试，把 `rgba(0,0,0,` 纳入黑名单。
+
+---
+
+### P2 · 骨架类落地
+
+**目标**：§2.1 第 2 条。
+
+**做法**（**逐页推进，不做批量替换**）：
+
+1. 先在 `SettingsView.vue` 已有的 10 个 `.cy-*` 类基础上补齐缺口，
+   把 `global.scss` 的骨架类当成**唯一规格**而不是建议。
+2. 按页面分批改，每批 3-5 个页面：
+   - **批次 A（数据展示型）**：`UsageView` / `JobsView` / `LogsView` / `ModelsView` / `ProfilesView`
+   - **批次 B（配置型）**：`DevicesView` / `ChannelsView` / `PluginsView` / `McpManagerView`
+   - **批次 C（内容型）**：`FilesView` / `MemoryView` / `PetdexView` / `SkillsView` / `SkillsUsageView`
+   - **批次 D（复杂型）**：`WorkflowView` / `KanbanView` / `JourneyView` / `PerformanceView` / `HistoryView` / `HermesMissingView` / `VersionPreviewView`
+3. 每批的替换模式：**Arco 结构 → `.cy-panel` 外壳**，但**保留** Arco 组件本身
+   （`a-table` / `a-form` / `a-select` 都不动）。Arco 组件的外观已经被
+   `global.scss` 的 token bridge 接管，不需要重写。
+
+**边界**：
+- 不改任何逻辑、不改 i18n key、不改数据结构。
+- 不动 `chat/` 与 `group-chat/` 下的文件（已由 `docs/chat-development-todo.md` 完成）。
+- 每批一次改动，批与批之间不叠加。
+
+**护栏**：
+- `tests/client/style-system.test.ts` 扩展：断言 `.cy-*` 骨架类清单不变（防止有人删类），
+  并断言「不允许出现 `.dark` 选择器」（单主题）。
+- 新增覆盖率检查：view 文件的 style 块中 `.cy-` 出现次数 ≥ 阈值的 view 数量不低于 80%。
+
+**实际落地结果（2026-10-20）**：
+
+| 批次 | 页面 | 结论 |
+| --- | --- | --- |
+| A | `UsageView` / `JobsView` / `LogsView` / `ModelsView` / `ProfilesView` | 大部分已合规；`JobsView` 补 `cy-sec-t` 分节标题 + i18n key `jobs.sectionList` |
+| B | `DevicesView` / `ChannelsView` / `PluginsView` / `McpManagerView` | `ChannelsView` 内容区包进 `cy-panel`；`McpManagerView` 已合规（modal 内列表保留自定义边框，避免卡片套卡片） |
+| C | `FilesView` / `MemoryView` / `PetdexView` / `SkillsView` / `SkillsUsageView` | 已合规；`PetdexView` 棋盘格 `rgba(127,127,127,0.08)` → `rgba(var(--text-muted-rgb), 0.08)` |
+| D | `WorkflowView` / `KanbanView` / `JourneyView` / `PerformanceView` / `HistoryView` / `HermesMissingView` / `VersionPreviewView` / `TerminalView` / `GlobalAgentView` | **全部已是令牌驱动**。这些是专用布局（画布 / 看板 / 终端 / 聊天流），原型的 `panel` 结构不适用，不需要套骨架类 |
+
+**批次 D 的判定依据**：「cy-* 计数为 0」是**误报**。判断标准应是
+「该页面是否用了裸色值」，而不是「是否用了骨架类」。这批页面的
+`border` / `background` / `box-shadow` 全部走 `$border-color` / `rgba(var(--*-rgb), α)`，
+与全局令牌同源。
+
+**骨架类覆盖率最终为 19/26（73%）**。未覆盖的 7 个页面是
+`ChatView` / `GlobalAgentView` / `GroupChatView` / `HermesMissingView` /
+`KanbanView` / `TerminalView` / `WorkflowView` —— 有意豁免，已在
+`style-system.test.ts` 的 `intentional` 列表里显式列出。
+
+---
+
+### P3 · 图表色板单一来源
+
+**目标**：§2.1 第 4 条。
+
+**现状**：三处独立的分类色板。
+
+| 位置 | 用途 | 问题 |
+| --- | --- | --- |
+| `styles/chart-colors.scss` | 3 个 token（input/output/cache） | 太少，撑不起多维图表 |
+| `stores/hermes/usage.ts` | `MODEL_COLORS` 10 色 | 模型分布专用，与前者语义重叠 |
+| `views/hermes/JourneyView.vue` | 12 个分类色 + canvas 渐变 | canvas 绘制，与 CSS 变量不通 |
+| `views/hermes/SkillsUsageView.vue` | 6 色 `skillPalette` | 又一套 |
+
+**做法**：
+1. 扩充 `styles/chart-colors.scss` 为完整分类色板（12-16 色），按语义分组：
+   - **序列色**（同量纲的分类，如模型分布）—— 色相均匀分布
+   - **对比色**（需要互相可辨的并列，如看板列状态）
+2. `usage.ts` / `SkillsUsageView.vue` / `JourneyView.vue` 改为引用统一色板。
+3. **canvas 场景**（JourneyView）需要在 JS 侧读取令牌：
+   ```ts
+   const styles = getComputedStyle(document.documentElement)
+   const color = styles.getPropertyValue('--chart-cat-3').trim()
+   ```
+   抽一个 `readChartColor(index)` 工具函数，避免每个图表各写一遍。
+4. 色板本身**允许硬编码**（这是 `ui-baseline.md` §7 明确豁免的），但**必须集中在一处**。
+
+**护栏**：断言「图表色板定义只出现在 `chart-colors.scss`（+ 白名单）」。
+
+---
+
+### P4 · 自动化护栏收口
+
+**目标**：§2.1 第 5 条。
+
+新增/扩展测试：
+
+| 测试 | 断言 |
+| --- | --- |
+| `tests/client/style-tokens.test.ts`（新） | 除白名单外无裸 hex / 无写死 `rgba(0,0,0,` / 无具名颜色关键字 / 无字面量 RGB 三元组 |
+| `tests/client/style-system.test.ts`（扩） | `.cy-*` 骨架类清单完整；无 `.dark` 选择器；`arco-theme` 恒为 dark；骨架类覆盖率 ≥ 60% 且未覆盖页面须在显式豁免名单里 |
+| `tests/e2e/chat-cyber-semantics.spec.ts`（已有） | 保持 —— 聊天链语义不回归 |
+
+**颜色断言的分层策略**（沿用现有 spec 的结论）：
+
+> 色板同时以 OKLCH 值和 RGB 三元组两种形式声明同一颜色，两者**色相相差约 30°**，
+> 因此**不能用「渲染后的 RGB vs 令牌值」做颜色断言**。
+> 颜色语义必须在**源码层**断言，浏览器层只断言类名 / 关键帧 / 辉光的存在性。
+
+**实际落地（2026-10-20）**：
+
+`style-tokens.test.ts` 扫描 `packages/client/src` 下所有 `.vue` / `.scss` / `.css` / `.ts`，
+四道断言：
+
+1. 无裸 hex（`#rrggbb`）
+2. 无具名颜色关键字（`color: red` 这类）
+3. 无字面量 `rgba(0,0,0,`
+4. 无字面量 RGB 三元组（`rgba(15, 23, 42, 0.05)` 这类旧主题残留）——
+   一律要换成 `rgba(var(--*-rgb), α)`
+
+**扫描前会剥掉注释与 HTML 实体**：注释里写「之前是 `#b42318`」是历史说明，
+`&#9662;` 是 HTML 实体（▽）不是颜色。剥注释这一步本身有**自检用例**，
+防止改坏了护栏却一直"通过"。
+
+护栏上线时抓到并修掉的真实问题：
+
+| 位置 | 问题 | 修法 |
+| --- | --- | --- |
+| `views/hermes/PetdexView.vue` | 棋盘格 `rgba(127,127,127,0.08)` | → `rgba(var(--text-muted-rgb), 0.08)` |
+| `utils/hermes/kanban-status-colors.ts` | 分类色 `#c084fc` + `rgba(192,132,252,0.14)` 字面量 | 新增令牌 `--kanban-review` / `--kanban-review-rgb`；灰阶改走 `--text-muted-rgb` |
+| `components/hermes/chat/MessageList.vue` | 浅色主题遗留阴影 `rgba(15,23,42,0.05)` | → `var(--shadow-sm)` |
+
+---
+
+## 四、豁免清单（明确不动）
+
+这些地方有硬编码颜色是**有意的**，不要"清理"：
+
+| 位置 | 理由 |
+| --- | --- |
+| `styles/chart-colors.scss` | `ui-baseline.md` §7 已声明图表色板是唯一可硬编码处 |
+| `styles/chart-palette.ts` | 同上（TS 侧色板常量） |
+| `utils/hermes/terminal-theme.ts` | xterm `ITheme` 只接受字面量。CYBER 那一套要锁住并加断言；Tokyo Night / GitHub Dark 是用户自选外部主题，不参与品牌表达 |
+| `vendor/arkscore/` | 装饰位面，零信息零交互。已由 `tests/client/arkscope-vendor.test.ts` 卡住 |
+| `styles/arco-theme.ts` | 意图说明 + 测试锚点，改主色时要与 `global.scss` 的 bridge 同步 |
+| `components/hermes/chat/MessageItem.vue` | 语言徽标（JS 黄 / Python 蓝 / HTML 橙…）是**品牌识别色**，换色就认不出语言了 |
+
+**豁免不是免检**。每条豁免都要有一条对应的断言，防止「豁免范围悄悄扩大」。
+
+> 注：`utils/hermes/kanban-status-colors.ts` 原本在豁免名单里（"分类色字面量"），
+> 2026-10-20 起**已移出** —— 看板分类色新增了 `--kanban-review` / `--kanban-review-rgb`
+> 令牌，灰阶走 `--text-muted-rgb`，文件内已无任何字面量色值。
+
+---
+
+## 五、验证基线
+
+每阶段结束时都跑：
+
+```bash
+npm run harness:check     # 含 chat-chain 片段校验
+npm run test              # Vitest：client + shared + server
+npm run test:e2e          # Playwright
+npm run build
+```
+
+改了 `packages/client/src/components/hermes/chat/` 或
+`packages/server/src/services/hermes/group-chat/` 等聊天链路径的，
+必须新增 `docs/chat-chain-changes/<date>-<slug>.md` 片段，
+否则 `harness:check` 会失败。
+
+**当前基线（2026-10-20，P2/P4 收口后）**：
+
+| 检查 | 结果 |
+| --- | --- |
+| `harness:check` | 通过 |
+| `vue-tsc -b` | 通过 |
+| `test`（client + server + shared） | 2060 通过 / 8 跳过 / 1 超时（`tts-synthesize-controller` 并行负载下超时，单跑 23/23 通过，与本主题无关） |
+| `test:e2e` | 46 通过 |
+| `build` | 通过 |
+
+---
+
+## 六、推进顺序与依赖
+
+```
+P0 定点治理 ──→ P1 遮罩令牌化 ──→ P2 骨架类落地 ──→ P3 图表色板 ──→ P4 护栏收口
+   (独立)          (独立)            (分 4 批)          (独立)        (收口)
+```
+
+- P0 / P1 / P3 互不依赖，可并行。
+- P2 的每批次之间有视觉连续性要求，**必须串行**。
+- P4 放在最后 —— 护栏要在被保护对象稳定后才可靠；但 P0 的扫描测试可以提前写，
+  先卡住「不许变多」，再逐步加严。
+
+---
+
+## 七、相关文档
+
+- `docs/ui-baseline.md` —— 视觉规范（唯一依据）
+- `docs/chat-development-todo.md` —— 对话台已完成项与已知原型侧问题
+- `docs/arco-mapping.md` —— Arco 组件映射
+- `docs/known-issues.md` —— 已知问题清单
+- `docs/chat-chain-changes/README.md` —— 变更片段规范
diff --git a/docs/known-issues.md b/docs/known-issues.md
index edb66e8..e1ae8f9 100644
--- a/docs/known-issues.md
+++ b/docs/known-issues.md
@@ -12,44 +12,89 @@
 
 这些是读代码时确认存在的真实缺陷，与迁移无关（迁移前就存在），但迁移过程中被注意到。修它们属于逻辑改动，需单独开分支。
 
-### 1. ModelSelector 的 computed 里有副作用
+### 1. ~~ModelSelector 的 computed 里有副作用~~ — 已修（2026-10-19）
 
-- **现象**：切换模型时 provider 选择偶尔「自己跳」，或 `customProvider` 状态被莫名改写
+- **原现象**：切换模型时 provider 选择偶尔「自己跳」，或 `customProvider` 状态被莫名改写
 - **位置**：`packages/client/src/components/layout/ModelSelector.vue`，`providerOptions` computed 的 getter
-- **证据**：computed 的 getter 内部给 `customProvider.value` 赋值。computed 应当是纯读。副作用是：任何其它 computed 或渲染逻辑读到 `providerOptions`，都会顺带改写 `customProvider`
+- **原证据**：computed 的 getter 内部给 `customProvider.value` 赋值。computed 应当是纯读。副作用是：任何其它 computed 或渲染逻辑读到 `providerOptions`，都会顺带改写 `customProvider`
 - **修法**：把赋值移到 `watch` 或显式的 setter 里
+- **实际改动**：getter 恢复成纯读（只返回 `activeModelGroups` 映射出的 options），
+  同步改由 `watch(() => appStore.selectedProvider, ...)` 承担。
+  `openModal()` 里原有的那次赋值保留 —— watch 是懒的，不在首帧触发。
+- **回归测试**：`tests/client/model-selector-provider-sync.test.ts`
+  （断言 getter 无赋值、watch 挂在 `selectedProvider` 而非 `providerOptions` 上、
+  `openModal` 仍初始化）
 
-### 2. ProfileSelector 把 i18n key 当文案用
+### 2. ~~ProfileSelector 把 i18n key 当文案用~~ — 已核实为误报，无需修
 
-- **现象**：某些运行时状态提示里显示原始 key（如 `profiles.runtime.checking`）而不是中文/英文文案
+- **原记录现象**：某些运行时状态提示里显示原始 key（如 `profiles.runtime.checking`）而不是中文/英文文案
 - **位置**：`packages/client/src/components/layout/ProfileSelector.vue`，`gatewayStatusText` / `bridgeStatusText`
-- **证据**：`message.warning(t('profiles.runtime.checking'))` —— `t()` 的结果（一个 key 字符串）被直接当消息正文，缺了外层再套一次 `t()`
-- **修法**：改成 `message.warning(t('profiles.runtime.checking'))`（让 `t()` 返回字符串函数的结果），即检查是否需要 `t(t(key))` 或改用 `te()` + 手动查表
+- **核实结论（2026-10-19）**：**该缺陷不存在**。三点证据：
+  1. `t` 来自 `useI18n()`（`:20`），`t('profiles.runtime.checking')` 返回的是
+     **已翻译的文案**，不是 key 本身。不存在「`t()` 的结果被当消息正文」的问题 ——
+     那正是 `t()` 的预期用法。
+  2. 组件内 33 处 `t()` 调用逐条比对 `zh.ts:1478-1510`，`avatar.*` 与 `runtime.*`
+     全部 key 齐全且中英双语都有对应条目，无缺失。
+  3. 全项目 grep `message.(warning|error|success|info|normal)\('[a-z]...')`
+     **零匹配** —— 没有裸传 key 字符串的调用点。
+- **原记录为何误判**：原条目自己给出的「修法」与「证据」是同一句话
+  （都是 `message.warning(t('profiles.runtime.checking'))`），说明写条目时
+  把「`t()` 已经包了一层」当成了「少包了一层」。
+- **若仍复现**：不要按原条目改代码。先确认复现路径，再查该路径上是否有
+  **另一处**未走 `t()` 的提示，或该 key 所属的 profile 名是否为空导致
+  `t(key, { name })` 插值异常。
 
-### 3. McpManagerView 的 `_autoRetryCount` 赋值可能静默失效
+### 3. ~~McpManagerView 的 `_autoRetryCount` 赋值可能静默失效~~ — 已核实为误报，无需修
 
-- **现象**：MCP 失败后点「重试」，自动重试计数似乎没有正确归零
-- **位置**：`packages/client/src/views/hermes/McpManagerView.vue`，`let _autoRetryCount`（模块级）
-- **证据**：在 header 按钮的内联表达式 `@click="_autoRetryCount = 0; loadServers()"` 里被重置。`<script setup>` 中的 `let` 绑定在模板内联语句里**不可写**（编译器只对 ref 做解包），这个重置很可能不生效
-- **修法**：改成 `ref`，或把重置逻辑移进一个具名函数
+- **原现象**：MCP 失败后点「重试」，自动重试计数似乎没有正确归零
+- **原位置**：`packages/client/src/views/hermes/McpManagerView.vue`，`let _autoRetryCount`
+- **原记录**：在 header 按钮的内联表达式 `@click="_autoRetryCount = 0; loadServers()"` 里被重置。
+  `<script setup>` 中的 `let` 绑定在模板内联语句里**不可写**（编译器只对 ref 做解包），这个重置很可能不生效。
+- **核实结论（2026-10-19）**：**该缺陷不存在**。原记录的机制判断是错的：
+  1. `compileScript` 对 `setup-let` 绑定（`let` 而非 `ref`）会在 `__returned__` 里生成
+     **一对 getter/setter**：
+     `get _autoRetryCount() { return _autoRetryCount }, set _autoRetryCount(v) { _autoRetryCount = v }`。
+  2. 模板编译产物是 `$setup._autoRetryCount = 0`，走的是上面那个 setter，
+     **会写回闭包里的原变量**。
+  3. 运行时实测确认（真实 SFC + 真实 Vue 运行时）：先把计数推到非 0，
+     再执行内联赋值，闭包内具名函数读到的就是复位后的值。
+- **回归测试**：`tests/client/script-setup-let-assignment.test.ts`
+  （含夹具 `tests/client/fixtures/script-setup-let-assignment.vue`；
+  判据先把计数推到非 0 再复位读取，因此能区分「复位生效」与「复位没生效」）
+- **若仍复现**：不要按原记录改代码。先确认复现路径，再查该路径上是否有
+  **另一处**真正的计数状态（比如 `scheduleReload` 的定时器没被取消导致旧的一次
+  `loadServers` 又把计数加回去）。
 
-### 4. McpManagerView 的 handleModeChange 有冗余重试
+### 4. ~~McpManagerView 的 handleModeChange 有冗余重试~~ — 已修（2026-10-19）
 
-- **现象**：无功能影响，仅代码冗余
+- **原现象**：无功能影响，仅代码冗余
 - **位置**：`packages/client/src/views/hermes/McpManagerView.vue`，`handleModeChange`
-- **证据**：两段重复的 try/catch 用同一个 `mode` 解析同一份文本，第一次失败后用相同模式重试一次才 return。第一个 catch 分支应直接 return
+- **原记录**：两段重复的 try/catch 用同一个 `mode` 解析同一份文本，第一次失败后用相同模式重试一次才 return。第一个 catch 分支应直接 return
+- **修正与实际改动**：原记录里「用同一个 `mode`」的说法不准确 —— 两段用的是
+  **不同**模式：第一段按 `oldMode`（切换前的格式）解析，第二段按 `mode`（切换后的格式）回退。
+  第二次尝试**不是**冗余，删掉会改变行为（用户在 JSON 编辑器里粘了一段 YAML 时，
+  切到 YAML 模式应当能救回来）。因此**不按原记录删除回退**。
+  实际改动是消除**代码重复**：抽出 `parseAsMode(text, mode)`，两处调用复用。
+- **一个必须避开的坑**：解析结果用 `ParseOutcome` 判别式承载
+  （`{ ok: true; data }` / `{ ok: false }`），**不能**用 `null` 表示失败。
+  JSON 字面量 `null` 是**合法解析结果**，若用 `??` 短路，
+  `null` 会被误判成「解析失败」而触发回退，改变行为。
 
-### 5. WorkflowView 的批量删除确认 ref 已无读取方
+### 5. ~~WorkflowView 的批量删除确认 ref 已无读取方~~ — 已修（2026-10-19）
 
-- **现象**：无功能影响
+- **原现象**：无功能影响
 - **位置**：`packages/client/src/views/hermes/WorkflowView.vue`，`showWorkflowBatchDeleteConfirm`
-- **证据**：naive 的 `NPopconfirm v-model:show` 需要它；Arco 的 `a-popconfirm` 无 `show` prop 后它失去读取方，只剩写。关闭改由 `@ok`/`@cancel` 驱动
+- **原记录**：naive 的 `NPopconfirm v-model:show` 需要它；Arco 的 `a-popconfirm` 无 `show` prop 后它失去读取方，只剩写。关闭改由 `@ok`/`@cancel` 驱动
+- **实际改动**：确认无任何读取方后**整体删除**（声明 + 两处赋值）。
+  Arco 的 `a-popconfirm` 由 `@ok` / `@cancel` 驱动，删除不影响交互。
 
-### 6. ProfileCreateModal 有两个重复的 style 块
+### 6. ~~ProfileCreateModal 有两个重复的 style 块~~ — 已修（2026-10-19）
 
-- **现象**：无功能影响
+- **原现象**：无功能影响
 - **位置**：`packages/client/src/components/hermes/profiles/ProfileCreateModal.vue`
-- **证据**：两个 `<style scoped>` 内容相同（都是 `.modal-footer`）。迁移前存在
+- **原记录**：两个 `<style scoped>` 内容相同（都是 `.modal-footer`）。迁移前存在
+- **实际改动**：删除重复的第二个 `<style scoped>` 块，
+  保留第一个（它额外含 `.form-hint`）。`.modal-footer` 规则不变。
 
 ---
 
diff --git a/docs/ui-baseline.md b/docs/ui-baseline.md
index 3ea5153..0cca80c 100644
--- a/docs/ui-baseline.md
+++ b/docs/ui-baseline.md
@@ -1,62 +1,147 @@
-# UI 基线（Phase 005 定稿）
+# UI 基线（CYBER 暗色单主题）
 
-本文件是 hermes-ui 的**视觉语言唯一依据**。Phase 006/007 的批量迁移照此执行，
-页面样式与本文冲突时，以本文为准；本文没覆盖的场景，先在 `docs/arco-mapping.md`
-补映射、再回本文补约定，然后才动代码。
+本文件是 hermes-ui 的**视觉语言唯一依据**。页面样式与本文冲突时，以本文为准；
+本文没覆盖的场景，先在 `docs/arco-mapping.md` 补映射、再回本文补约定，然后才动代码。
 
 - 样板页：`views/LoginView.vue`（装饰位面 + 表单）、`components/layout/AppSidebar.vue`（导航 + 弹窗 + tag）
-- 令牌源：`packages/client/src/styles/variables.scss`（CSS 变量）+ `styles/arco-theme.ts`（Arco 组件主题）
+- 令牌源：`packages/client/src/styles/variables.scss`（CSS 变量 + SCSS 委托变量）
+- Arco 实际外观由 `styles/global.scss` 的 Arco token bridge 决定；`styles/arco-theme.ts` 是意图说明与测试锚点
 - 组件映射：`docs/arco-mapping.md`
 
+> **历史**：本文件曾描述「黑白水墨（Pure Ink）」三主题（ink light / ink dark / comic）。
+> 亮度/风格切换器已移除，暗色是唯一主题，该描述不再适用。
+> 当前主题推进状态见 `docs/cyber-theme-plan.md`。
+
 ---
 
-## 1. 色板
+## 1. 三色语义系统（最高优先级）
 
-黑白水墨（Pure Ink）——**纯黑白灰，无彩色**（status/info 色除外）。三主题：ink light / ink dark / comic。
+> **每种颜色只承担一种含义，不得混用。**
 
-### 浅色（`html:not(.dark)`）
+| 颜色 | 令牌 | 含义 | 典型用途 |
+|---|---|---|---|
+| 霓虹青 | `--accent-primary` | **系统本体** | 品牌、主按钮、当前选中、链接 |
+| 琥珀橙 | `--warning` | **需要你介入** | 审批、等待确认、上下文将满、中断态 |
+| 荧光绿 | `--success` | **机器在动** | 工具成功、流式输出、连接健康 |
+| 红 | `--error` | **出错** | 仅表示出错，不参与上面三色分工 |
 
-| 角色 | 变量 | 值 |
+- 失败时**不要**靠「加深强调色」表达，必须换到 `--error` —— 否则四个语义挤在同一色相里，紧急程度就读不出来了。
+- `--accent-info` 是第四种蓝，只在需要与青/橙/绿都区分开时用（如链接性提示）。
+- 同一语义在全项目**必须用同一个令牌**。看到两个文件里「橙」是不同色值，就是 bug。
+
+### 状态色的完整取值
+
+| 令牌 | OKLCH | RGB 三元组 | 说明 |
+|---|---|---|---|
+| `--accent-primary` | `oklch(0.805 0.148 188)` | `0, 221, 209` | 霓虹青 |
+| `--accent-hover` | `oklch(0.870 0.150 188)` | `16, 243, 230` | 悬停态 |
+| `--accent-muted` | `oklch(0.520 0.060 188)` | — | 弱化强调 |
+| `--success` | `oklch(0.860 0.190 128)` | `173, 231, 78` | 荧光绿 |
+| `--warning` | `oklch(0.780 0.155 68)` | `247, 162, 50` | 琥珀橙 |
+| `--error` | `oklch(0.665 0.185 22)` | `240, 90, 94` | 红 |
+| `--accent-info` | `oklch(0.700 0.110 245)` | `95, 165, 222` | 蓝 |
+| `--kanban-review` | `oklch(0.722 0.177 305.5)` | `192, 132, 252` | 看板 `review` 列分类色（**分类色，非语义色**） |
+
+> `--kanban-review` 是唯一的分类色令牌：看板 9 个列状态装不进三色语义系统，
+> 按「流程阶段」维度分色。它仍然走令牌体系，所以 `rgba(var(--kanban-review-rgb), α)`
+> 能拼出弱底色。
+
+**半透明用 RGB 三元组拼 alpha**，因为 OKLCH 无法直接拆 alpha：
+
+```scss
+color: rgba(var(--accent-primary-rgb), 0.55);
+box-shadow: 0 0 12px rgba(var(--success-rgb), 0.22);
+```
+
+每个需要拼 alpha 的令牌都有配套的 `--*-rgb`。要新增半透明语义色，**必须同时加 RGB 三元组**。
+
+### 语义底与语义线
+
+| 令牌 | 值 | 用途 |
 |---|---|---|
-| 页面底 | `--bg-primary` | `#fafafa` |
-| 次级底 / 侧栏 | `--bg-secondary` / `--bg-sidebar` | `#f0f0f0` / `#f5f5f5` |
-| 卡片 / 输入底 | `--bg-card` / `--bg-input` | `#ffffff` |
-| 分割线 | `--border-color` / `--border-light` | `#e0e0e0` / `#ebebeb` |
-| 强调色 | `--accent-primary` / `--accent-hover` | `#333333` / `#1a1a1a` |
-| 正文 | `--text-primary` / `--text-secondary` / `--text-muted` | `#1a1a1a` / `#666666` / `#999999` |
-| 状态 | `--success` / `--error` / `--warning` / `--accent-info` | `#2e7d32` / `#c62828` / `#f57f17` / `#4a90d9` |
+| `--accent-soft` | `oklch(0.805 0.148 188 / 0.13)` | 强调色弱底 |
+| `--success-soft` / `--success-line` | `… / 0.12` / `… / 0.40` | 绿色弱底 / 绿边框 |
+| `--warning-soft` / `--warning-line` | `… / 0.12` / `… / 0.42` | 橙色弱底 / 橙边框 |
+| `--error-soft` / `--error-line` | `… / 0.11` / `… / 0.42` | 红色弱底 / 红边框 |
 
-### 深色（`.dark`）
+---
 
-| 角色 | 变量 | 值 |
-|---|---|---|
-| 页面底 | `--bg-primary` | `#1a1a1a` |
-| 次级底 / 侧栏 | `--bg-secondary` / `--bg-sidebar` | `#252525` / `#202020` |
-| 卡片 / 输入底 | `--bg-card` / `--bg-input` | `#2a2a2a` |
-| 分割线 | `--border-color` / `--border-light` | `#3a3a3a` / `#333333` |
-| 强调色 | `--accent-primary` / `--accent-hover` | `#e0e0e0` / `#f5f5f5`（反相） |
-| 正文 | `--text-primary` / `--text-secondary` / `--text-muted` | `#e0e0e0` / `#a0a0a0` / `#888888` |
-| 状态 | `--success` / `--error` / `--warning` / `--accent-info` | `#66bb6a` / `#ef5350` / `#ffb74d` / `#6ba3d6` |
+## 2. 背景与描边
 
-- 需要 `rgba()` 透明度时用配套 `--*-rgb` 变量（如 `rgba(var(--accent-primary-rgb), 0.12)`）。
-- 反色场景（强调底上的字）一律用 `--text-on-accent`，不要硬编码白/黑。
-- **Arco 组件配色**：`arco-theme.ts` 冻结 `colorPrimary: #2f2f2f`、`borderRadius: 6`，
-  延续克制灰阶；暗色由 `body[arco-theme='dark']` CSS 变量覆盖承载，
-  **不用** Arco 的 dark theme + overrides 双轨。
-- 主题切换机制：`useTheme.ts` 同时切 `<html>` 的 `dark`/`comic` class（项目令牌）
-  和 `arco-theme` 属性（Arco 组件）；FOUC 脚本内联在 `index.html`，两边同步改。
+背景由深到浅四层，**越靠上层越亮**（向上浮）：
 
-## 2. 圆角 / 间距 / 字号阶梯
+| 角色 | 令牌 | OKLCH | 用途 |
+|---|---|---|---|
+| 页面底 | `--bg-primary` | `oklch(0.155 0.012 250)` | 页面底色 |
+| 次级底 | `--bg-secondary` | `oklch(0.130 0.012 250)` | 卡片 / 面板（比页面更沉） |
+| 侧栏 | `--bg-sidebar` | `oklch(0.118 0.013 251)` | 比卡片更沉 |
+| 容器 | `--bg-card` | `oklch(0.185 0.014 248)` | 容器 / 输入区（比页面更亮） |
+| 容器悬停 | `--bg-card-hover` | `oklch(0.225 0.016 246)` | |
+| 输入底 | `--bg-input` | `oklch(0.105 0.012 252)` | 比卡片更沉，形成凹陷感 |
+| 代码底 | `--code-bg` | `oklch(0.115 0.014 250)` | |
 
-**圆角**（`$radius-*`）：
+描边发丝线分两档：`--border-color`（`oklch(0.305 0.018 242)`）、`--border-light`（`oklch(0.255 0.016 244)`）。
+
+**硬编码 hex 是 bug**，除非是图表色板（见 §7）。
+
+---
+
+## 3. 文字
+
+| 角色 | 令牌 | OKLCH | 用途 |
+|---|---|---|---|
+| 正文 | `--text-primary` | `oklch(0.945 0.006 200)` | |
+| 次要 | `--text-secondary` | `oklch(0.860 0.008 210)` | |
+| 弱化 | `--text-muted` | `oklch(0.705 0.014 230)` | |
+| 极弱 | `--text-faint` | `oklch(0.520 0.014 236)` | 禁用态 / 极次要信息 |
+| 强调色上文字 | `--text-on-accent` | `oklch(0.160 0.030 200)` | 深色，保证对比 |
+| 浮层上文字 | `--text-on-overlay` | `oklch(0.945 0.006 200)` | |
+
+反色场景**一律用 `--text-on-accent`**，不要硬编码白/黑。
+
+---
+
+## 4. 字体栈
+
+```scss
+// UI（系统中英混排）
+$font-ui: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
+  'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
+
+// 代码 / 命令 / 版本号
+$font-code: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, 'Cascadia Code', monospace;
+
+// 终端（xterm 在 JS 里读这个，所以必须是 CSS 自定义属性）
+--font-mono: ui-monospace, 'JetBrains Mono', 'JetBrainsMono Nerd Font',
+  'Nerd Font', 'SF Mono', Menlo, 'Cascadia Code', 'MesloLGS NF',
+  'Hack Nerd Font', monospace;
+```
+
+- **Nerd Font 回退段不能删**：默认 shell 提示符会输出私有区字形（分支、箭头、分隔符，如 `U+E0A0`–`U+E0D4`），缺了这些字形会整片显示为豆腐块。
+- `$font-display` 复用 `$font-code` —— 等宽是 CYBER 的核心排版特征。
+- 等宽字体只用于：代码块、命令、版本号、命令行提示、标识与数据。
+
+---
+
+## 5. 圆角 / 间距 / 字号阶梯
+
+**圆角**（`$radius-*`）—— 发丝线 + 小圆角，**硬边而非圆润**：
 
 | token | 值 | 用途 |
 |---|---|---|
 | `$radius-sm` | 6px | 按钮、输入框、小卡片、tag（与 Arco `borderRadius: 6` 对齐） |
 | `$radius-md` / `$radius-lg` | 8px | 面板、弹窗、大卡片 |
 
-**间距**：4px 基数，常用档 `4 / 8 / 12 / 16 / 24 / 32`（组件内边距多用 12/16，区块间 24/32）。
-布局尺寸：侧栏 240px（折叠 64px）、顶栏 60px、移动端断点 768px。
+**间距**：4px 基数，常用档 `4 / 8 / 12 / 16 / 24 / 32`。组件内边距多用 12/16，区块间 24/32。
+
+**布局尺寸**：
+
+| token | 值 |
+|---|---|
+| `$sidebar-width` | 240px |
+| `$sidebar-collapsed-width` | 64px |
+| `$header-height` | 60px |
+| `$breakpoint-mobile` | 768px |
 
 **字号阶梯**：
 
@@ -70,44 +155,89 @@
 | 16 | 小标题 |
 | 26 | 登录页等展示型大标题 |
 
-## 3. 字体栈
+**过渡**：`$transition-fast: 0.15s ease` / `$transition-normal: 0.25s ease`。
 
-```scss
-$font-ui:   Inter, system-ui, -apple-system, sans-serif;   // 中英混排 UI（fallback 系统字体）
-$font-code: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;  // 代码、命令、版本号
-```
+---
 
-- comic 主题下 `--font-ui` 被覆盖为 `'Comic Neue', 'ZCOOL KuaiLe', ...`，其余不变。
-- 等宽字体只用于：代码块、命令、版本号、命令行提示（`$font-code`）。
+## 6. 霓虹效果层
 
-## 4. 阴影 / 分割线
+`styles/global.scss` 提供的 mixin，是 CYBER 辨识度的来源：
 
-- **分割线**：`1px solid var(--border-color)`（面板/区块）或 `--border-light`（弱分隔）。
-  水墨主题以线为主，不滥用阴影。
-- **阴影**：常规浮层 `0 1px 4px rgba(0, 0, 0, 0.1)`；comic 主题用
-  `3px 3px 0 rgba(0, 0, 0, 0.15)` 硬投影（`--comic-shadow`）。
-- 弹窗/抽屉的遮罩、投影由 Arco 组件自带，页面不重复加。
+| mixin / 动画 | 用途 |
+|---|---|
+| `neon-tube` | 霓虹灯管：主按钮、激活态边框 |
+| `neon-sheen` | 表面扫光 |
+| `neon-pulse` | 呼吸微光 |
+| `@keyframes live-ring` | **「机器在动」的唯一指示形态**（单色绿，不轮播） |
+| `@keyframes led-breathe` | 状态灯呼吸（仅连通时） |
 
-## 5. 组件使用约定
+### 「机器在动」只长一个样
+
+流式输出、语音播放、工具执行中、连接健康 —— 全部用 `live-ring`（荧光绿单色呼吸）。
+
+**不要做多色轮播**：同屏内四种语义色同时在闪，等于四种颜色都不再表达含义。
+这条在 P0 修 `rainbow-glow` 时被违反过，回归护栏在
+`tests/e2e/chat-cyber-semantics.spec.ts`。
+
+### 状态灯 `.cy-led`
+
+7px 圆点 + 发光。连通=绿（呼吸），断开=红（**静止**）。
+
+**一个死掉的连接不该看起来还在动** —— 断开态不呼吸。
+
+### 发光条用 inset box-shadow
+
+左侧/顶部发光条用 `box-shadow: inset 2px 0 0 <color>`，**不要用 `border-left`** ——
+border 会把内容宽度挤动 2px，列表行高对不齐。
+
+---
+
+## 7. 图表色板（唯一允许硬编码颜色的地方）
+
+图表/数据可视化的分类色按数据维度取色，**不走语义三色** —— 它们表达的是
+「这是第几个类别」，不是「状态」。
+
+规则：
+- 同一张图内的分类色必须**互相可辨**（色相间隔足够）
+- 图表色板集中定义在图表组件内，不散落
+- 图表**状态**（成功/失败/警告）仍走语义令牌
+- 图表色**不得**与语义色撞色到读者会误读为状态的程度
+
+---
+
+## 8. 组件使用约定
 
 - **消息 / 对话框 / 通知**：只准调 `composables/useMessage|useDialog|useNotification`
   适配层（签名冻结），**不得**在页面里直接 import Arco 的 `Message` / `Modal` / `Notification`。
 - **Modal vs Drawer**：短内容确认、纯信息展示用 `a-modal`
-  （信息型弹窗 `:footer="false"`，如样板页 changelog / docker 升级指引）；
-  需要表单编辑、长内容滚动的场景用 `a-drawer`。naive `preset="dialog"` 无直接对应。
+  （信息型弹窗 `:footer="false"`）；需要表单编辑、长内容滚动的场景用 `a-drawer`。
 - **按钮**：语义 `type` + `status` 组合（warning 按钮 = `type="primary" status="warning"`）；
-  占满宽用 `long`（naive `block`）；尺寸 `size="mini|small|medium|large"`
-  （naive `tiny`→`mini`）；提交按钮 `html-type="submit"`，加载态用 `:loading`。
-- **输入框**：`a-input` 关闭了 attrs 透传，`autofocus` 无效——需要自动聚焦时
+  占满宽用 `long`；尺寸 `size="mini|small|medium|large"`；提交按钮 `html-type="submit"`，
+  加载态用 `:loading`。
+- **输入框**：`a-input` 关闭了 attrs 透传，`autofocus` 无效 —— 需要自动聚焦时
   `ref` + `onMounted` 调 `focus()`；密码框 `type="password"`。
 - **表格空态**：用 `a-empty`，不手写占位文案。
 - **loading**：按钮级用 `a-button :loading`，区域级用 `a-spin :loading`，
   全局任务进度用 `useMessage().loading(...)`（用完 close/destroy）。
 - **表单**：`a-form` + `a-form-item`，校验规则 API 与 naive 不同，逐例适配。
-- **tag**：naive `type="info"` → `a-tag color="arcoblue"`（内建色），
-  `:bordered="false"` 直接支持。
+- **tag**：`color="arcoblue"` 等内建色，`:bordered="false"` 直接支持。
 
-## 6. 装饰位面的边界
+### Arco 组件的暗色
+
+项目**不挂 ConfigProvider**。Arco 的实际外观由 `styles/global.scss` 里的
+`--color-*` / `--arcoblue-*` / `--green-*` / `--orange-*` 变量覆盖承载。
+
+改主色时要同时改两处：`global.scss` 的 token bridge 和 `styles/arco-theme.ts`
+（后者是意图说明 + 测试锚点）。
+
+**Arco 的 RGB 三元组变量不能当颜色用**：
+`--arcoblue-6` 的值是 `22,93,255` 而不是 `#165dff`。
+写成 `color: var(--arcoblue-6)` 会被静默丢弃并回落到 Arco 默认色。
+正确写法：`color: rgba(var(--arcoblue-6), 1)`。
+
+---
+
+## 9. 装饰位面的边界
 
 装饰位面（ArkScope vendor 组件等纯视觉层）的判定标准：
 
@@ -127,8 +257,11 @@ vendor 素材边界：`vendor/arkscore/` 下**零图片/音视频素材**，
 由 `tests/client/arkscope-vendor.test.ts` 机械化卡住；Provenance 见
 `vendor/arkscore/PROVENANCE.md`。
 
-## 7. 三条不可破的规则
+---
+
+## 10. 四条不可破的规则
 
 1. **不引入第三个 UI 库**——只允许 Arco Design Vue（+ 现有图标/工具链）。
 2. **消息气泡内部不用 Arco 组件**（性能红线，见 Phase 006）。
 3. **装饰层一律 `pointer-events: none`**，不承载信息与交互。
+4. **颜色只走令牌**——语义色走三色系统，图表色走 §7 色板，硬编码 hex 一律视为待修。
diff --git a/packages/client/index.html b/packages/client/index.html
index b979379..ebcdfad 100644
--- a/packages/client/index.html
+++ b/packages/client/index.html
@@ -44,7 +44,7 @@
       content: "";
       position: absolute;
       inset: 0;
-      background: linear-gradient(105deg, transparent 30%, rgba(45, 212, 191, 0.55) 48%, transparent 66%);
+      background: linear-gradient(105deg, transparent 30%, rgba(0, 221, 209, 0.55) 48%, transparent 66%);
       transform: translateX(-140%);
       mix-blend-mode: screen;
       pointer-events: none;
diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 15bb2b4..4d52107 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -121,9 +121,9 @@ useKeyboard()
   padding: 4px 16px;
   font-size: 12px;
   font-weight: 500;
-  color: #b45309;
-  background-color: #fef3c7;
-  border-bottom: 1px solid #fde68a;
+  color: $warning;
+  background-color: var(--warning-soft);
+  border-bottom: 1px solid var(--warning-line);
   text-align: center;
   line-height: 1.4;
 }
diff --git a/packages/client/src/components/hermes/chat/ChatInput.vue b/packages/client/src/components/hermes/chat/ChatInput.vue
index 5c9277c..3951a56 100644
--- a/packages/client/src/components/hermes/chat/ChatInput.vue
+++ b/packages/client/src/components/hermes/chat/ChatInput.vue
@@ -1311,7 +1311,7 @@ function isImage(type: string): boolean {
       unmount-on-close
     >
       <div class="context-edit-content">
-        <p style="margin-bottom: 16px; color: #666;">
+        <p style="margin-bottom: 16px; color: var(--text-muted);">
           {{ t('chat.contextEditDesc') }}
         </p>
         <a-input-number
@@ -1324,10 +1324,10 @@ function isImage(type: string): boolean {
           style="width: 100%"
         >
           <template #suffix>
-            <span style="color: #999;">tokens</span>
+            <span style="color: var(--text-faint);">tokens</span>
           </template>
         </a-input-number>
-        <div style="margin-top: 12px; font-size: 12px; color: #999;">
+        <div style="margin-top: 12px; font-size: 12px; color: var(--text-faint);">
           {{ t('chat.contextEditHint') }}
         </div>
       </div>
@@ -1457,8 +1457,9 @@ function isImage(type: string): boolean {
   gap: 4px;
   border-color: transparent;
 
+  // 推理强度已开启 = 机器在动 → 绿
   &.active {
-    color: #4caf50;
+    color: $success;
   }
 }
 
@@ -1652,7 +1653,7 @@ function isImage(type: string): boolean {
   height: 18px;
   border-radius: 50%;
   border: none;
-  background: rgba(0, 0, 0, 0.5);
+  background: $overlay-chip;
   color: var(--text-on-overlay);
   display: flex;
   align-items: center;
@@ -1683,12 +1684,12 @@ function isImage(type: string): boolean {
   padding: 22px 12px 9px;
   position: relative;
   cursor: text;
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
+  box-shadow: $shadow-md;
   transition: border-color $transition-fast, box-shadow $transition-fast;
 
   &:focus-within {
     border-color: rgba(var(--text-primary-rgb), 0.22);
-    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.11);
+    box-shadow: $shadow-md;
   }
 
   &.drag-over {
@@ -1707,7 +1708,7 @@ function isImage(type: string): boolean {
   z-index: 2;
 
   &:hover {
-    background: rgba($accent-primary, 0.15);
+    background: rgba(var(--accent-primary-rgb), 0.15);
     border-radius: 4px;
   }
 }
@@ -1762,23 +1763,38 @@ function isImage(type: string): boolean {
   color: $text-muted;
 }
 
+// 发送键是全页唯一的常驻主按钮，走全站的霓虹管 + 扫光，
+// 不再压掉 border / box-shadow —— 之前 `!important` 把灯管整个抹平了。
+// 尺寸、padding、gap 仍需覆盖 Arco 的 size 样式。
 .send-button {
   width: 30px !important;
   min-width: 30px !important;
   height: 30px !important;
   padding: 0 !important;
-  border: 0 !important;
-  box-shadow: none !important;
   gap: 0;
 
   :deep(.arco-btn-icon) {
     margin: 0 !important;
   }
+}
 
-  &:disabled {
-    color: var(--text-on-overlay);
-    background-color: #9f9f9f;
-    opacity: 1;
+// 中断态：机器正在跑，需要你介入 —— 琥珀橙，与审批卡同一语义。
+// 选择器带上 .send-button 与 :not(.arco-btn-disabled) 是为了稳压 global.scss 里
+// .arco-btn-primary[type=...] 那一族（0,3,0 / hover 0,4,0），否则主按钮的青色管壁会盖回来。
+.send-button.send-button--stop:not(.arco-btn-disabled) {
+  color: $warning;
+  border-color: rgba(var(--warning-rgb), 0.5);
+  box-shadow:
+    inset 0 0 12px rgba(var(--warning-rgb), 0.1),
+    0 0 10px rgba(var(--warning-rgb), 0.3);
+  text-shadow: 0 0 8px rgba(var(--warning-rgb), 0.4);
+
+  &:hover {
+    color: $warning;
+    border-color: rgba(var(--warning-rgb), 0.85);
+    box-shadow:
+      inset 0 0 16px rgba(var(--warning-rgb), 0.16),
+      0 0 16px rgba(var(--warning-rgb), 0.45);
   }
 }
 
@@ -1804,7 +1820,7 @@ function isImage(type: string): boolean {
   background: $bg-card;
   border: 1px solid $border-color;
   border-radius: $radius-sm;
-  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
+  box-shadow: $shadow-md;
   z-index: 20;
   padding: 4px;
 }
diff --git a/packages/client/src/components/hermes/chat/ChatPanel.vue b/packages/client/src/components/hermes/chat/ChatPanel.vue
index af75cda..cd46149 100644
--- a/packages/client/src/components/hermes/chat/ChatPanel.vue
+++ b/packages/client/src/components/hermes/chat/ChatPanel.vue
@@ -1584,9 +1584,15 @@ async function handleSessionModelCustomSubmit() {
             </template>
           </a-button>
           <span class="header-session-title">{{ headerTitle }}</span>
+          <span
+            class="cy-led"
+            :class="appStore.connected ? 'on' : 'off'"
+            :title="appStore.connected ? t('sidebar.connected') : t('sidebar.disconnected')"
+            role="status"
+          />
           <button
             v-if="chatStore.activeSession?.workspace"
-            class="workspace-badge"
+            class="cy-tag workspace-badge"
             type="button"
             :title="chatStore.activeSession.workspace"
             @click="openActiveSessionWorkspace"
@@ -1903,12 +1909,12 @@ async function handleSessionModelCustomSubmit() {
 }
 
 .session-model-badge-preview {
-  color: #fff;
-  background: #d97706;
+  color: var(--text-on-accent);
+  background: $warning;
 }
 
 .session-model-badge-custom {
-  color: #fff;
+  color: var(--text-on-accent);
   background: $accent-primary;
 }
 
@@ -1977,7 +1983,7 @@ async function handleSessionModelCustomSubmit() {
     height: 100%;
     z-index: 120;
     background: $bg-card;
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 2px 0 8px var(--shadow-ink);
     width: $sidebar-width;
 
     &.collapsed {
@@ -1995,7 +2001,7 @@ async function handleSessionModelCustomSubmit() {
   .session-backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.4);
+    background: $overlay-scrim;
     z-index: 110;
     opacity: 0;
     pointer-events: none;
@@ -2094,7 +2100,7 @@ async function handleSessionModelCustomSubmit() {
   justify-content: center;
 
   &:hover {
-    background: rgba($accent-primary, 0.06);
+    background: rgba(var(--accent-primary-rgb), 0.06);
   }
 }
 
@@ -2143,7 +2149,7 @@ async function handleSessionModelCustomSubmit() {
   &.active {
     background: $bg-card;
     color: $text-primary;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    box-shadow: $shadow-sm;
   }
 }
 
@@ -2360,6 +2366,13 @@ async function handleSessionModelCustomSubmit() {
   padding: 21px 20px;
   border-bottom: 1px solid $border-color;
   flex-shrink: 0;
+  // 顶栏压一层青色微光，把注意力从顶边收回内容区。radial 而非 linear：
+  // linear 会让整条边均匀发亮，反而没有"压顶"的层次。
+  background: radial-gradient(
+    120% 160% at 50% 0%,
+    rgba(var(--accent-primary-rgb), 0.07),
+    transparent 70%
+  );
 }
 
 .header-left {
@@ -2372,25 +2385,16 @@ async function handleSessionModelCustomSubmit() {
 }
 
 .header-session-title {
-  font-size: 16px;
+  font-family: $font-code;
+  font-size: 14px;
   font-weight: 600;
   color: $text-primary;
+  line-height: 1.3;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.source-badge {
-  font-size: 10px;
-  color: $text-muted;
-  background: rgba($text-muted, 0.12);
-  padding: 1px 7px;
-  border-radius: 8px;
-  flex-shrink: 0;
-  white-space: nowrap;
-  line-height: 16px;
-}
-
 .header-actions {
   display: flex;
   align-items: center;
@@ -2421,17 +2425,10 @@ async function handleSessionModelCustomSubmit() {
 }
 
 .workspace-badge {
-  border: 0;
-  font-size: 11px;
-  line-height: 16px;
-  color: $text-muted;
-  background: rgba(255, 255, 255, 0.05);
-  padding: 2px 8px;
-  border-radius: 4px;
   max-width: 160px;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 5px;
   overflow: hidden;
   cursor: pointer;
 
@@ -2447,8 +2444,8 @@ async function handleSessionModelCustomSubmit() {
   }
 
   &:hover {
-    color: $text-secondary;
-    background: rgba(var(--accent-primary-rgb), 0.06);
+    color: $accent-primary;
+    border-color: rgba(var(--accent-primary-rgb), 0.45);
   }
 }
 
@@ -2457,6 +2454,15 @@ async function handleSessionModelCustomSubmit() {
   background: rgba(var(--accent-primary-rgb), 0.1);
 }
 
+// ≤900px：工作区徽标是次要信息，先让位给标题和操作按钮。
+// 会话侧栏在这个宽度不隐藏 —— 它由顶栏的 toggle 按钮控制，
+// 隐藏整列会让用户没法主动打开，比挤一点更糟。
+@media (max-width: 900px) {
+  .workspace-badge {
+    display: none;
+  }
+}
+
 .chat-tool-panel {
   position: relative;
   flex: 0 0 auto;
@@ -2691,7 +2697,7 @@ async function handleSessionModelCustomSubmit() {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: $shadow-md;
   z-index: 9999;
   max-height: 300px;
   overflow-y: auto;
@@ -2718,9 +2724,9 @@ async function handleSessionModelCustomSubmit() {
   padding: 1px 6px;
   font-size: 10px;
   font-weight: 600;
-  color: #f5a623;
-  background: rgba(245, 166, 35, 0.12);
-  border: 1px solid rgba(245, 166, 35, 0.3);
+  color: $warning;
+  background: rgba(var(--warning-rgb), 0.12);
+  border: 1px solid rgba(var(--warning-rgb), 0.3);
   border-radius: 3px;
   vertical-align: middle;
 }
@@ -2750,7 +2756,7 @@ async function handleSessionModelCustomSubmit() {
   transition: color $transition-fast;
 
   &:hover {
-    color: #f5a623;
+    color: $warning;
   }
 }
 </style>
diff --git a/packages/client/src/components/hermes/chat/ConversationMonitorPane.vue b/packages/client/src/components/hermes/chat/ConversationMonitorPane.vue
index 7c729dc..c160ce2 100644
--- a/packages/client/src/components/hermes/chat/ConversationMonitorPane.vue
+++ b/packages/client/src/components/hermes/chat/ConversationMonitorPane.vue
@@ -205,19 +205,19 @@ onUnmounted(() => {
   }
 
   &::-webkit-scrollbar-thumb {
-    background: rgba($text-muted, 0.3);
+    background: rgba(var(--text-muted-rgb), 0.3);
     border-radius: 4px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: rgba($text-muted, 0.5);
+    background: rgba(var(--text-muted-rgb), 0.5);
   }
 }
 
 .conversation-monitor__session {
   width: 100%;
   border: 0;
-  border-bottom: 1px solid rgba($border-color, 0.6);
+  border-bottom: 1px solid $border-color;
   background: transparent;
   color: inherit;
   text-align: left;
@@ -291,14 +291,14 @@ onUnmounted(() => {
 .conversation-monitor__message {
   padding: 12px 14px;
   border-radius: 10px;
-  background: rgba($bg-secondary, 0.8);
+  background: $bg-secondary;
 
   &.role-user {
-    border: 1px solid rgba($accent-primary, 0.18);
+    border: 1px solid rgba(var(--accent-primary-rgb), 0.18);
   }
 
   &.role-assistant {
-    border: 1px solid rgba($border-color, 0.9);
+    border: 1px solid $border-color;
   }
 }
 
diff --git a/packages/client/src/components/hermes/chat/DrawerPanel.vue b/packages/client/src/components/hermes/chat/DrawerPanel.vue
index 42a146f..2b2045c 100644
--- a/packages/client/src/components/hermes/chat/DrawerPanel.vue
+++ b/packages/client/src/components/hermes/chat/DrawerPanel.vue
@@ -79,7 +79,7 @@ function handleClose() {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: $overlay-scrim;
   z-index: 999;
 }
 
@@ -91,7 +91,7 @@ function handleClose() {
   height: calc(100 * var(--vh));
   max-height: calc(100 * var(--vh));
   background: $bg-card;
-  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  box-shadow: -2px 0 8px var(--shadow-ink);
   display: flex;
   flex-direction: column;
   z-index: 1000;
diff --git a/packages/client/src/components/hermes/chat/FilesPanel.vue b/packages/client/src/components/hermes/chat/FilesPanel.vue
index 3b3f480..f70ad61 100644
--- a/packages/client/src/components/hermes/chat/FilesPanel.vue
+++ b/packages/client/src/components/hermes/chat/FilesPanel.vue
@@ -163,7 +163,7 @@ onMounted(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: $overlay-scrim;
   z-index: 50;
 
   @media (min-width: $breakpoint-mobile + 1) {
@@ -190,7 +190,7 @@ onMounted(() => {
     max-width: 300px;
     z-index: 51;
     background: $bg-card;
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+    box-shadow: 2px 0 8px var(--shadow-ink);
     transform: translateX(-100%);
     transition: transform 0.3s ease;
 
diff --git a/packages/client/src/components/hermes/chat/FolderPicker.vue b/packages/client/src/components/hermes/chat/FolderPicker.vue
index 572e583..a755523 100644
--- a/packages/client/src/components/hermes/chat/FolderPicker.vue
+++ b/packages/client/src/components/hermes/chat/FolderPicker.vue
@@ -417,12 +417,14 @@ const flatNodes = computed<FlatNode[]>(() => {
 </template>
 
 <style scoped lang="scss">
+@use '@/styles/variables' as *;
+
 .folder-picker {
   max-height: 360px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid $border-color;
   border-radius: 6px;
   padding: 8px;
-  background: rgba(0, 0, 0, 0.2);
+  background: $bg-input;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -458,12 +460,12 @@ const flatNodes = computed<FlatNode[]>(() => {
   transition: background 0.15s;
 
   &:hover {
-    background: rgba(255, 255, 255, 0.06);
+    background: $bg-card-hover;
   }
 
   &.selected {
-    background: rgba(64, 158, 255, 0.15);
-    outline: 1px solid rgba(64, 158, 255, 0.4);
+    background: rgba(var(--accent-primary-rgb), 0.15);
+    outline: 1px solid rgba(var(--accent-primary-rgb), 0.4);
   }
 
   &.root {
@@ -511,7 +513,7 @@ const flatNodes = computed<FlatNode[]>(() => {
 .folder-selected {
   margin-top: 8px;
   padding: 6px 8px;
-  background: rgba(64, 158, 255, 0.08);
+  background: rgba(var(--accent-primary-rgb), 0.08);
   border-radius: 4px;
   font-size: 12px;
   display: flex;
@@ -546,13 +548,13 @@ const flatNodes = computed<FlatNode[]>(() => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255, 255, 255, 0.55);
+  color: $text-muted;
   background: transparent;
   cursor: pointer;
   transition: background 0.15s, transform 0.15s, color 0.15s;
 
   &:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.08);
+    background: $bg-card-hover;
     transform: scale(1.08);
   }
 
@@ -567,7 +569,7 @@ const flatNodes = computed<FlatNode[]>(() => {
   line-height: 1;
 
   &.is-pinned {
-    color: #f5a623;
+    color: var(--warning);
   }
 }
 
diff --git a/packages/client/src/components/hermes/chat/HistoryMessageList.vue b/packages/client/src/components/hermes/chat/HistoryMessageList.vue
index 2d471f4..0ca6719 100644
--- a/packages/client/src/components/hermes/chat/HistoryMessageList.vue
+++ b/packages/client/src/components/hermes/chat/HistoryMessageList.vue
@@ -298,7 +298,7 @@ defineExpose({
   border: 1px solid rgba(var(--accent-primary-rgb), 0.24);
   background: rgba(var(--bg-card-rgb), 0.94);
   color: var(--accent-primary);
-  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
+  box-shadow: $shadow-md;
   padding: 0;
   cursor: pointer;
 }
diff --git a/packages/client/src/components/hermes/chat/MarkdownRenderer.vue b/packages/client/src/components/hermes/chat/MarkdownRenderer.vue
index 3bc7800..c13eceb 100644
--- a/packages/client/src/components/hermes/chat/MarkdownRenderer.vue
+++ b/packages/client/src/components/hermes/chat/MarkdownRenderer.vue
@@ -589,7 +589,7 @@ async function previewTextFile(path: string, fileName: string): Promise<void> {
     margin: 12px 0;
     border-radius: $radius-sm;
     overflow: hidden;
-    background: #000;
+    background: $code-bg;
     border: 1px solid $border-color;
   }
 
@@ -623,7 +623,7 @@ async function previewTextFile(path: string, fileName: string): Promise<void> {
     padding: 10px 12px;
     border: 1px solid $border-light;
     border-radius: $radius-sm;
-    background-color: rgba(0, 0, 0, 0.04);
+    background-color: $bg-input;
   }
 
   .markdown-audio {
@@ -655,7 +655,7 @@ async function previewTextFile(path: string, fileName: string): Promise<void> {
     padding: 6px 10px;
     font-size: 12px;
     color: $text-secondary;
-    background-color: rgba(0, 0, 0, 0.04);
+    background-color: $bg-input;
     border: 1px solid $border-light;
     border-radius: $radius-sm;
     margin: 8px 0;
@@ -663,7 +663,7 @@ async function previewTextFile(path: string, fileName: string): Promise<void> {
     transition: background-color 0.15s ease, border-color 0.15s ease;
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.08);
+      background-color: $bg-card-hover;
       border-color: $border-color;
     }
 
@@ -782,7 +782,7 @@ async function previewTextFile(path: string, fileName: string): Promise<void> {
   position: fixed;
   inset: 0;
   z-index: 9999;
-  background: rgba(0, 0, 0, 0.85);
+  background: $overlay-scrim-strong;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/packages/client/src/components/hermes/chat/MessageItem.vue b/packages/client/src/components/hermes/chat/MessageItem.vue
index 0222a0a..809afb5 100644
--- a/packages/client/src/components/hermes/chat/MessageItem.vue
+++ b/packages/client/src/components/hermes/chat/MessageItem.vue
@@ -1445,10 +1445,10 @@ onBeforeUnmount(() => {
 
   &.speech-playing {
     box-shadow:
-      0 0 0 2px #ff6b6b,
-      0 0 10px rgba(255, 107, 107, 0.4),
-      0 0 20px rgba(255, 107, 107, 0.2);
-    animation: rainbow-glow 4s linear infinite;
+      0 0 0 2px rgba(var(--success-rgb), 0.45),
+      0 0 10px rgba(var(--success-rgb), 0.22),
+      0 0 20px rgba(var(--success-rgb), 0.1);
+    animation: live-ring 2.4s ease-in-out infinite;
   }
 }
 
@@ -1520,51 +1520,6 @@ onBeforeUnmount(() => {
   margin-top: 2px;
 }
 
-@keyframes rainbow-glow {
-  0% {
-    box-shadow:
-      0 0 0 2px #ff6b6b,
-      0 0 10px rgba(255, 107, 107, 0.4),
-      0 0 20px rgba(255, 107, 107, 0.2);
-  }
-  16.66% {
-    box-shadow:
-      0 0 0 2px #feca57,
-      0 0 10px rgba(254, 202, 87, 0.4),
-      0 0 20px rgba(254, 202, 87, 0.2);
-  }
-  33.33% {
-    box-shadow:
-      0 0 0 2px #48dbfb,
-      0 0 10px rgba(72, 219, 251, 0.4),
-      0 0 20px rgba(72, 219, 251, 0.2);
-  }
-  50% {
-    box-shadow:
-      0 0 0 2px #ff9ff3,
-      0 0 10px rgba(255, 159, 243, 0.4),
-      0 0 20px rgba(255, 159, 243, 0.2);
-  }
-  66.66% {
-    box-shadow:
-      0 0 0 2px #54a0ff,
-      0 0 10px rgba(84, 160, 255, 0.4),
-      0 0 20px rgba(84, 160, 255, 0.2);
-  }
-  83.33% {
-    box-shadow:
-      0 0 0 2px #5f27cd,
-      0 0 10px rgba(95, 39, 205, 0.4),
-      0 0 20px rgba(95, 39, 205, 0.2);
-  }
-  100% {
-    box-shadow:
-      0 0 0 2px #ff6b6b,
-      0 0 10px rgba(255, 107, 107, 0.4),
-      0 0 20px rgba(255, 107, 107, 0.2);
-  }
-}
-
 .msg-attachments {
   display: flex;
   flex-wrap: wrap;
@@ -1575,7 +1530,7 @@ onBeforeUnmount(() => {
 .msg-attachment {
   border-radius: $radius-sm;
   overflow: hidden;
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: $bg-input;
   border: 1px solid $border-light;
 
   &.image {
@@ -1630,7 +1585,7 @@ onBeforeUnmount(() => {
     user-select: none;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.03);
+      background: rgba(var(--text-primary-rgb), 0.05);
     }
   }
 
@@ -1755,7 +1710,7 @@ onBeforeUnmount(() => {
     cursor: pointer;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.03);
+      background: rgba(var(--text-primary-rgb), 0.05);
     }
   }
 
@@ -1841,7 +1796,7 @@ onBeforeUnmount(() => {
   }
 
   :deep(.code-header) {
-    background: rgba(0, 0, 0, 0.02);
+    background: rgba(var(--text-primary-rgb), 0.02);
   }
 
   :deep(code.hljs) {
@@ -1918,11 +1873,11 @@ onBeforeUnmount(() => {
   gap: 6px;
 
   .additions {
-    color: #00e676;
+    color: $success;
   }
 
   .deletions {
-    color: #ff3b58;
+    color: $error;
   }
 }
 
@@ -2161,7 +2116,7 @@ onBeforeUnmount(() => {
   position: fixed;
   inset: 0;
   z-index: 9999;
-  background: rgba(0, 0, 0, 0.85);
+  background: $overlay-scrim-strong;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/packages/client/src/components/hermes/chat/MessageList.vue b/packages/client/src/components/hermes/chat/MessageList.vue
index 1ed5475..7f10d99 100644
--- a/packages/client/src/components/hermes/chat/MessageList.vue
+++ b/packages/client/src/components/hermes/chat/MessageList.vue
@@ -895,7 +895,7 @@ defineExpose({
   border: 1px solid rgba(var(--accent-primary-rgb), 0.24);
   background: rgba(var(--bg-card-rgb), 0.94);
   color: var(--accent-primary);
-  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
+  box-shadow: $shadow-md;
   padding: 0;
   cursor: pointer;
 }
@@ -917,7 +917,7 @@ defineExpose({
   border: 1px solid rgba(var(--accent-info-rgb), 0.22);
   border-radius: 16px;
   background: var(--bg-card);
-  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
+  box-shadow: $shadow-lg;
   backdrop-filter: blur(14px);
 }
 
@@ -927,7 +927,7 @@ defineExpose({
   border-color: var(--warning-line);
   background: linear-gradient(var(--warning-soft), var(--warning-soft)), var(--bg-card);
   box-shadow: inset 0 0 22px rgba(var(--warning-rgb), 0.06),
-              0 14px 40px rgba(0, 0, 0, 0.14),
+              $shadow-lg,
               0 0 20px rgba(var(--warning-rgb), 0.1);
 }
 
@@ -1136,7 +1136,7 @@ defineExpose({
 
   &:hover {
     color: $error;
-    background: rgba($error, 0.1);
+    background: rgba(var(--error-rgb), 0.1);
   }
 }
 
@@ -1333,7 +1333,7 @@ defineExpose({
   border: 1px solid rgba(var(--accent-primary-rgb), 0.22);
   border-radius: 999px;
   background: var(--bg-card);
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+  box-shadow: var(--shadow-sm);
   font-size: 12px;
   line-height: 1.35;
 }
@@ -1564,7 +1564,7 @@ defineExpose({
 }
 
 .tool-call-error-icon {
-  color: #ff4d4f;
+        color: $error;
   flex-shrink: 0;
   margin-left: 6px;
   display: flex;
@@ -1581,7 +1581,7 @@ defineExpose({
 }
 
 .tool-call-success-icon {
-  color: #52c41a;
+        color: $success;
   flex-shrink: 0;
   margin-left: 6px;
   display: flex;
diff --git a/packages/client/src/components/hermes/chat/OutlinePanel.vue b/packages/client/src/components/hermes/chat/OutlinePanel.vue
index e2013d6..554ac42 100644
--- a/packages/client/src/components/hermes/chat/OutlinePanel.vue
+++ b/packages/client/src/components/hermes/chat/OutlinePanel.vue
@@ -165,68 +165,89 @@ function scrollToTarget(item: OutlineItem) {
   width: 280px;
   flex-shrink: 0;
 
-  @media (max-width: $breakpoint-mobile) {
+  // ≤1180px：主区已经放不下「消息流 + Outline + 工具面板」三栏，
+  // 继续并排会把消息流挤到读不下去的宽度。改成浮层覆盖，右上角的
+  // Outline 按钮本身就是开关，不需要额外的关闭控件。
+  @media (max-width: 1180px) {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
+    width: 280px;
+    z-index: 20;
+    box-shadow: $shadow-lg;
+  }
+
+  @media (max-width: $breakpoint-mobile) {
     width: min(280px, 86vw);
     z-index: 8;
-    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
   }
 }
 
+// 面板头：原型 .panel-h。等宽标题 + 发丝线分隔。
 .outline-header {
-  padding: 16px;
-  border-bottom: 1px solid $border-color;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 14px;
+  border-bottom: 1px solid $border-light;
   flex-shrink: 0;
 }
 
 .outline-title {
-  font-size: 14px;
+  font-family: $font-code;
+  font-size: 12.5px;
   font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: 0.04em;
   color: $text-primary;
 }
 
+// 列表区：原型 .outline 的 padding:12px 收到 8px，
+// 让左侧 2px 选中条贴近面板边缘。
 .outline-content {
   flex: 1;
   overflow-y: auto;
-  padding: 12px;
+  padding: 8px 8px 12px;
 }
 
 .outline-item {
   margin-bottom: 4px;
   cursor: pointer;
-  transition: opacity 0.2s ease;
-
-  &:hover {
-    opacity: 0.8;
-  }
 }
 
 .user-item {
-  margin-bottom: 6px;
+  margin-bottom: 8px;
 }
 
+// 用户提问：原型 .row-i 的同族规格 —— 卡面 + 发丝线边 + 小圆角。
 .user-question {
-  background-color: $bg-input;
+  background: $bg-secondary;
+  border: 1px solid $border-color;
+  border-left: 2px solid $accent-primary;
   color: $text-primary;
-  padding: 8px 12px;
-  border-radius: 8px;
+  padding: 8px 11px;
+  border-radius: $radius-sm;
   display: flex;
   align-items: flex-start;
-  gap: 6px;
+  gap: 7px;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
 
   .q-label {
+    font-family: $font-code;
     font-weight: 600;
     flex-shrink: 0;
-    font-size: 13px;
-    line-height: 1.4;
+    font-size: 10.5px;
+    line-height: 1.5;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: $accent-primary;
   }
 
   .q-text {
-    font-size: 13px;
-    line-height: 1.4;
+    font-size: 12.5px;
+    line-height: 1.45;
+    color: $text-secondary;
     word-break: break-word;
   }
 }
@@ -245,23 +266,30 @@ function scrollToTarget(item: OutlineItem) {
   }
 }
 
+// 标题条目：原型 .oi。左侧 2px 竖条留给选中态，平时透明。
 .heading-item {
   display: flex;
   align-items: flex-start;
   gap: 6px;
-  padding: 4px 8px;
+  padding: 6px 8px;
+  border-left: 2px solid transparent;
   border-radius: 4px;
-  transition: background-color 0.15s ease;
+  transition: background-color 0.15s ease, color 0.15s ease;
 
   &:hover {
-    background-color: rgba(var(--text-primary-rgb), 0.06);
+    background-color: $bg-secondary;
   }
+}
 
+.heading-text {
+  font-size: 12px;
+  line-height: 1.45;
+  color: $text-muted;
+  word-break: break-word;
+}
+
+.outline-heading-item {
   .level-1 & {
-    .heading-marker {
-      color: $text-primary;
-      font-weight: 600;
-    }
     .heading-text {
       color: $text-primary;
       font-weight: 500;
@@ -269,35 +297,24 @@ function scrollToTarget(item: OutlineItem) {
   }
 
   .level-2 & {
-    .heading-marker {
-      color: $text-secondary;
-    }
     .heading-text {
       color: $text-secondary;
     }
   }
 
   .level-3 & {
-    .heading-marker {
-      color: $text-muted;
-    }
     .heading-text {
-      color: $text-muted;
-      font-size: 12px;
+      color: $text-faint;
+      font-size: 11.5px;
     }
   }
 }
 
-.heading-text {
-  font-size: 13px;
-  line-height: 1.4;
-  word-break: break-word;
-}
-
 .outline-empty {
   text-align: center;
-  color: $text-muted;
-  font-size: 13px;
+  color: $text-faint;
+  font-size: 11.5px;
+  line-height: 1.5;
   padding: 20px 0;
 }
 </style>
diff --git a/packages/client/src/components/hermes/chat/SessionListItem.vue b/packages/client/src/components/hermes/chat/SessionListItem.vue
index 8de2dff..02c16b1 100644
--- a/packages/client/src/components/hermes/chat/SessionListItem.vue
+++ b/packages/client/src/components/hermes/chat/SessionListItem.vue
@@ -213,30 +213,37 @@ onUnmounted(() => {
   pointer-events: auto;
 }
 
+/* 当前会话：青软底 + 左侧 2px 发光条。
+   光条用 inset box-shadow 而不是 border-left，否则会挤动整行内容的宽度。 */
 .session-item.active {
   background: rgba(var(--accent-primary-rgb), 0.12);
   color: var(--text-primary);
   font-weight: 500;
   border-radius: 6px;
+  box-shadow:
+    inset 2px 0 0 var(--accent-primary),
+    inset 0 0 12px rgba(var(--accent-primary-rgb), 0.08);
 }
 
 .session-item.active .session-item-title {
   color: var(--accent-primary);
 }
 
+/* 模型缺失 = 出错 → 红。之前写死 #b42318，与 --error 不是同一个色值，
+   同一个「出错」在页面里出现了两种红。 */
 .session-item.missing-models {
-  color: #b42318;
-  background: rgba(220, 38, 38, 0.08);
+  color: var(--error);
+  background: rgba(var(--error-rgb), 0.08);
 }
 
 .session-item.missing-models .session-item-title,
 .session-item.missing-models .session-item-profile-name,
 .session-item.missing-models .session-item-time {
-  color: #b42318;
+  color: var(--error);
 }
 
 .session-item.missing-models:hover {
-  background: rgba(220, 38, 38, 0.12);
+  background: rgba(var(--error-rgb), 0.12);
 }
 
 .session-item-content {
@@ -294,11 +301,13 @@ onUnmounted(() => {
   color: var(--text-muted);
 }
 
+/* 全局代理标记 = 需要你留意 → 琥珀橙。之前写死 #d6a019，
+   与 --warning 差了一个色阶。 */
 .session-item-global-icon {
   position: absolute;
   top: 5px;
   right: 5px;
-  color: #d6a019;
+  color: var(--warning);
   pointer-events: none;
 }
 
@@ -352,10 +361,10 @@ onUnmounted(() => {
   flex-shrink: 0;
   width: 16px;
   height: 16px;
-  border: 1px solid rgba(180, 35, 24, 0.35);
+  border: 1px solid rgba(var(--error-rgb), 0.35);
   border-radius: 50%;
-  background: rgba(220, 38, 38, 0.1);
-  color: #b42318;
+  background: rgba(var(--error-rgb), 0.1);
+  color: var(--error);
   font-size: 11px;
   font-weight: 700;
   line-height: 14px;
@@ -389,10 +398,10 @@ onUnmounted(() => {
   box-sizing: border-box;
   border-radius: 50%;
   box-shadow:
-    0 0 0 2px #ff6b6b,
-    0 0 10px rgba(255, 107, 107, 0.4),
-    0 0 20px rgba(255, 107, 107, 0.2);
-  animation: rainbow-glow 4s linear infinite;
+    0 0 0 2px rgba(var(--success-rgb), 0.45),
+    0 0 10px rgba(var(--success-rgb), 0.22),
+    0 0 20px rgba(var(--success-rgb), 0.1);
+  animation: live-ring 2.4s ease-in-out infinite;
 }
 
 .session-item-agent-logo {
@@ -406,48 +415,4 @@ onUnmounted(() => {
   background: var(--bg-card);
 }
 
-@keyframes rainbow-glow {
-  0% {
-    box-shadow:
-      0 0 0 2px #ff6b6b,
-      0 0 10px rgba(255, 107, 107, 0.4),
-      0 0 20px rgba(255, 107, 107, 0.2);
-  }
-  16.66% {
-    box-shadow:
-      0 0 0 2px #feca57,
-      0 0 10px rgba(254, 202, 87, 0.4),
-      0 0 20px rgba(254, 202, 87, 0.2);
-  }
-  33.33% {
-    box-shadow:
-      0 0 0 2px #48dbfb,
-      0 0 10px rgba(72, 219, 251, 0.4),
-      0 0 20px rgba(72, 219, 251, 0.2);
-  }
-  50% {
-    box-shadow:
-      0 0 0 2px #ff9ff3,
-      0 0 10px rgba(255, 159, 243, 0.4),
-      0 0 20px rgba(255, 159, 243, 0.2);
-  }
-  66.66% {
-    box-shadow:
-      0 0 0 2px #54a0ff,
-      0 0 10px rgba(84, 160, 255, 0.4),
-      0 0 20px rgba(84, 160, 255, 0.2);
-  }
-  83.33% {
-    box-shadow:
-      0 0 0 2px #5f27cd,
-      0 0 10px rgba(95, 39, 205, 0.4),
-      0 0 20px rgba(95, 39, 205, 0.2);
-  }
-  100% {
-    box-shadow:
-      0 0 0 2px #ff6b6b,
-      0 0 10px rgba(255, 107, 107, 0.4),
-      0 0 20px rgba(255, 107, 107, 0.2);
-  }
-}
 </style>
diff --git a/packages/client/src/components/hermes/chat/TerminalPanel.vue b/packages/client/src/components/hermes/chat/TerminalPanel.vue
index 1d0a262..c80750b 100644
--- a/packages/client/src/components/hermes/chat/TerminalPanel.vue
+++ b/packages/client/src/components/hermes/chat/TerminalPanel.vue
@@ -554,7 +554,7 @@ $terminal-panel-header-height: 47px;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: $overlay-scrim;
   z-index: 50;
 
   @media (min-width: $breakpoint-mobile + 1) {
@@ -578,7 +578,7 @@ $terminal-panel-header-height: 47px;
     max-width: 300px;
     z-index: 51;
     background: $bg-card;
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+    box-shadow: 2px 0 8px var(--shadow-ink);
     transform: translateX(-100%);
     transition: transform 0.3s ease;
 
diff --git a/packages/client/src/components/hermes/files/FileBreadcrumb.vue b/packages/client/src/components/hermes/files/FileBreadcrumb.vue
index febcacc..32ddfca 100644
--- a/packages/client/src/components/hermes/files/FileBreadcrumb.vue
+++ b/packages/client/src/components/hermes/files/FileBreadcrumb.vue
@@ -33,7 +33,29 @@ function handleClick(index: number) {
 </template>
 
 <style scoped lang="scss">
+@use '@/styles/variables' as *;
+
 .file-breadcrumb {
-  padding: 0 16px;
+  flex-shrink: 0;
+  padding: 8px 16px;
+  border-bottom: 1px solid $border-light;
+
+  :deep(.arco-breadcrumb) {
+    font-family: $font-code;
+    font-size: 11.5px;
+  }
+
+  :deep(.arco-breadcrumb-item) {
+    cursor: pointer;
+    color: $text-muted;
+
+    &:last-child {
+      color: $text-primary;
+    }
+
+    &:hover {
+      color: $accent-primary;
+    }
+  }
 }
 </style>
diff --git a/packages/client/src/components/hermes/files/FileEditor.vue b/packages/client/src/components/hermes/files/FileEditor.vue
index 969e0ba..aed26ce 100644
--- a/packages/client/src/components/hermes/files/FileEditor.vue
+++ b/packages/client/src/components/hermes/files/FileEditor.vue
@@ -122,14 +122,15 @@ function handleClose() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 16px;
-  border-bottom: 1px solid $border-color;
-  background-color: $bg-card;
+  gap: 12px;
+  padding: 8px 14px;
+  border-bottom: 1px solid $border-light;
 }
 
 .editor-filename {
-  font-size: 13px;
-  color: $text-secondary;
+  font-family: $font-code;
+  font-size: 11.5px;
+  color: $text-muted;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -137,7 +138,7 @@ function handleClose() {
 
   @media (max-width: $breakpoint-mobile) {
     max-width: 120px;
-    font-size: 12px;
+    font-size: 11px;
   }
 }
 
diff --git a/packages/client/src/components/hermes/files/FileList.vue b/packages/client/src/components/hermes/files/FileList.vue
index fa03ca6..c06e23f 100644
--- a/packages/client/src/components/hermes/files/FileList.vue
+++ b/packages/client/src/components/hermes/files/FileList.vue
@@ -125,7 +125,7 @@ async function handleDownload(entry: FileEntry) {
 @use '@/styles/variables' as *;
 
 .file-list {
-  padding: 8px 16px;
+  padding: 8px 12px 16px;
 }
 
 .file-list-grid {
@@ -137,11 +137,13 @@ async function handleDownload(entry: FileEntry) {
 
 .file-list-header {
   padding: 6px 12px;
-  font-size: 12px;
-  font-weight: 500;
-  color: $text-muted;
+  font-family: $font-code;
+  font-size: 10.5px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: $text-faint;
   border-bottom: 1px solid $border-light;
-  margin-bottom: 4px;
+  margin-bottom: 2px;
   user-select: none;
 }
 
@@ -163,10 +165,11 @@ async function handleDownload(entry: FileEntry) {
 }
 
 .file-list-row {
-  padding: 8px 12px;
+  padding: 7px 12px;
   border-radius: $radius-sm;
   cursor: pointer;
-  font-size: 13px;
+  font-family: $font-code;
+  font-size: 12.5px;
 
   &:hover {
     background-color: rgba(var(--accent-primary-rgb), 0.06);
@@ -197,11 +200,13 @@ async function handleDownload(entry: FileEntry) {
 
 .file-size {
   text-align: right;
-  color: $text-secondary;
+  color: $text-muted;
+  font-size: 11.5px;
 }
 
 .file-date {
-  color: $text-secondary;
+  color: $text-muted;
+  font-size: 11.5px;
 }
 
 .file-actions {
diff --git a/packages/client/src/components/hermes/files/FilePreview.vue b/packages/client/src/components/hermes/files/FilePreview.vue
index a6edd47..c430144 100644
--- a/packages/client/src/components/hermes/files/FilePreview.vue
+++ b/packages/client/src/components/hermes/files/FilePreview.vue
@@ -85,13 +85,18 @@ const CloseIcon = () =>
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 16px;
-  border-bottom: 1px solid $border-color;
+  gap: 12px;
+  padding: 8px 14px;
+  border-bottom: 1px solid $border-light;
 }
 
 .preview-filename {
-  font-size: 13px;
-  color: $text-secondary;
+  font-family: $font-code;
+  font-size: 11.5px;
+  color: $text-muted;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .preview-content {
diff --git a/packages/client/src/components/hermes/files/FileTree.vue b/packages/client/src/components/hermes/files/FileTree.vue
index 41ec029..1a6a93c 100644
--- a/packages/client/src/components/hermes/files/FileTree.vue
+++ b/packages/client/src/components/hermes/files/FileTree.vue
@@ -101,10 +101,11 @@ watch([effectiveProfile, () => filesStore.currentWorkspaceSessionId, () => props
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px;
+  padding: 7px 10px;
   cursor: pointer;
   border-radius: $radius-sm;
-  font-size: 13px;
+  font-family: $font-code;
+  font-size: 12px;
   font-weight: 500;
   color: $text-primary;
 
@@ -113,6 +114,21 @@ watch([effectiveProfile, () => filesStore.currentWorkspaceSessionId, () => props
   }
 }
 
+:deep(.arco-tree-node-title) {
+  font-family: $font-code;
+  font-size: 12px;
+  border-radius: $radius-sm;
+}
+
+:deep(.arco-tree-node-title:hover) {
+  background-color: rgba(var(--accent-primary-rgb), 0.06);
+}
+
+:deep(.arco-tree-node-selected .arco-tree-node-title) {
+  background-color: rgba(var(--accent-primary-rgb), 0.1);
+  color: $accent-primary;
+}
+
 :deep(.tree-node-label) {
   display: inline-block;
   max-width: 100%;
diff --git a/packages/client/src/components/hermes/group-chat/GroupChatInput.vue b/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
index 7953508..a61bccc 100644
--- a/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
+++ b/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
@@ -614,7 +614,7 @@ function isImage(type: string): boolean {
         justify-content: center;
         width: 16px;
         height: 16px;
-        color: #999999;
+        color: $text-faint;
     }
 }
 
@@ -622,7 +622,7 @@ function isImage(type: string): boolean {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: #999999;
+    color: $text-faint;
     width: 24px;
     min-width: 24px;
     height: 22px;
@@ -710,7 +710,7 @@ function isImage(type: string): boolean {
     height: 18px;
     border-radius: 50%;
     border: none;
-    background: rgba(0, 0, 0, 0.5);
+    background: $overlay-chip;
     color: var(--text-on-overlay);
     display: flex;
     align-items: center;
@@ -763,12 +763,12 @@ function isImage(type: string): boolean {
     border-radius: 18px;
     padding: 14px 12px 9px;
     position: relative;
-    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
+    box-shadow: $shadow-md;
     transition: border-color $transition-fast, box-shadow $transition-fast;
 
     &:focus-within {
         border-color: rgba(var(--text-primary-rgb), 0.22);
-        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.11);
+        box-shadow: $shadow-md;
     }
 
     &.drag-over {
@@ -787,7 +787,7 @@ function isImage(type: string): boolean {
     z-index: 2;
 
     &:hover {
-        background: rgba($accent-primary, 0.15);
+        background: rgba(var(--accent-primary-rgb), 0.15);
         border-radius: 4px;
     }
 }
@@ -845,19 +845,11 @@ function isImage(type: string): boolean {
     min-width: 30px !important;
     height: 30px !important;
     padding: 0 !important;
-    border: 0 !important;
-    box-shadow: none !important;
     gap: 0;
 
     :deep(.arco-btn-icon) {
         margin: 0 !important;
     }
-
-    &:disabled {
-        color: var(--text-on-overlay);
-        background-color: #9f9f9f;
-        opacity: 1;
-    }
 }
 
 .visually-hidden {
@@ -893,7 +885,7 @@ function isImage(type: string): boolean {
     background: $bg-card;
     border: 1px solid $border-color;
     border-radius: 8px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    box-shadow: $shadow-md;
     min-width: 200px;
     max-height: 240px;
     overflow-y: auto;
diff --git a/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue b/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue
index 4642358..9dfa1a6 100644
--- a/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue
+++ b/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue
@@ -584,7 +584,7 @@ async function handleApproval(choice: 'once' | 'session' | 'always' | 'deny') {
                         </div>
                         <template #content>
                             <div class="agent-popover">
-                                <div class="agent-popover-item" style="margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color, #efeff5);">
+                                <div class="agent-popover-item" style="margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color);">
                                     <ProfileAvatar class="agent-avatar" :name="store.userName || store.userId" :avatar="userMemberAvatar" :size="28" />
                                     <div class="agent-popover-info">
                                         <span class="agent-popover-name">{{ store.userName || 'You' }}</span>
@@ -891,7 +891,7 @@ export default defineComponent({ components: { CreateRoomForm } })
         display: block;
         position: absolute;
         inset: 0;
-        background: rgba(0, 0, 0, 0.4);
+        background: $overlay-scrim;
         z-index: 99;
         opacity: 0;
         pointer-events: none;
@@ -965,7 +965,7 @@ export default defineComponent({ components: { CreateRoomForm } })
     border: 1px solid rgba(var(--accent-primary-rgb), 0.24);
     border-radius: 16px;
     background: var(--bg-card);
-    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
+    box-shadow: $shadow-lg;
     backdrop-filter: blur(14px);
 }
 
@@ -1183,7 +1183,7 @@ export default defineComponent({ components: { CreateRoomForm } })
     &.active {
         background: $bg-card;
         color: $text-primary;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+        box-shadow: $shadow-sm;
     }
 }
 
@@ -1441,7 +1441,7 @@ export default defineComponent({ components: { CreateRoomForm } })
         font-size: 11px;
         line-height: 16px;
         color: $text-muted;
-        background: rgba(255, 255, 255, 0.05);
+        background: rgba(var(--text-primary-rgb), 0.05);
         padding: 2px 8px;
         border-radius: 4px;
         max-width: 160px;
@@ -1604,7 +1604,7 @@ export default defineComponent({ components: { CreateRoomForm } })
 
         &:hover {
             color: $error;
-            background-color: rgba(200, 50, 50, 0.08);
+            background-color: rgba(var(--error-rgb), 0.08);
         }
     }
 }
@@ -1653,7 +1653,7 @@ export default defineComponent({ components: { CreateRoomForm } })
 .modal-backdrop {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.4);
+    background: $overlay-scrim;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1666,7 +1666,7 @@ export default defineComponent({ components: { CreateRoomForm } })
     padding: 24px;
     width: 400px;
     max-width: 90vw;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    box-shadow: $shadow-md;
 
     h3 {
         font-size: 16px;
@@ -1735,7 +1735,7 @@ export default defineComponent({ components: { CreateRoomForm } })
         bottom: 0;
         z-index: 100;
         background-color: $bg-card;
-        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
+        box-shadow: 4px 0 16px var(--shadow-ink);
     }
 
     .chat-header {
diff --git a/packages/client/src/components/hermes/group-chat/GroupMessageItem.vue b/packages/client/src/components/hermes/group-chat/GroupMessageItem.vue
index 80bb70c..69f6358 100644
--- a/packages/client/src/components/hermes/group-chat/GroupMessageItem.vue
+++ b/packages/client/src/components/hermes/group-chat/GroupMessageItem.vue
@@ -750,7 +750,7 @@ onBeforeUnmount(() => {
         cursor: pointer;
 
         &:hover {
-            background: rgba(0, 0, 0, 0.03);
+            background: rgba(var(--text-primary-rgb), 0.05);
         }
     }
 }
@@ -934,7 +934,7 @@ onBeforeUnmount(() => {
     }
 
     :deep(.code-header) {
-        background: rgba(0, 0, 0, 0.02);
+        background: rgba(var(--text-primary-rgb), 0.02);
     }
 
     :deep(code.hljs) {
@@ -1048,51 +1048,6 @@ onBeforeUnmount(() => {
     }
 }
 
-@keyframes rainbow-glow {
-    0% {
-        box-shadow:
-            0 0 0 2px #ff6b6b,
-            0 0 10px rgba(255, 107, 107, 0.4),
-            0 0 20px rgba(255, 107, 107, 0.2);
-    }
-    16.66% {
-        box-shadow:
-            0 0 0 2px #feca57,
-            0 0 10px rgba(254, 202, 87, 0.4),
-            0 0 20px rgba(254, 202, 87, 0.2);
-    }
-    33.33% {
-        box-shadow:
-            0 0 0 2px #48dbfb,
-            0 0 10px rgba(72, 219, 251, 0.4),
-            0 0 20px rgba(72, 219, 251, 0.2);
-    }
-    50% {
-        box-shadow:
-            0 0 0 2px #ff9ff3,
-            0 0 10px rgba(255, 159, 243, 0.4),
-            0 0 20px rgba(255, 159, 243, 0.2);
-    }
-    66.66% {
-        box-shadow:
-            0 0 0 2px #54a0ff,
-            0 0 10px rgba(84, 160, 255, 0.4),
-            0 0 20px rgba(84, 160, 255, 0.2);
-    }
-    83.33% {
-        box-shadow:
-            0 0 0 2px #5f27cd,
-            0 0 10px rgba(95, 39, 205, 0.4),
-            0 0 20px rgba(95, 39, 205, 0.2);
-    }
-    100% {
-        box-shadow:
-            0 0 0 2px #ff6b6b,
-            0 0 10px rgba(255, 107, 107, 0.4),
-            0 0 20px rgba(255, 107, 107, 0.2);
-    }
-}
-
 .msg-content {
     padding: 10px 14px;
     font-size: 14px;
@@ -1108,10 +1063,10 @@ onBeforeUnmount(() => {
 
     &.speech-playing {
         box-shadow:
-            0 0 0 2px #ff6b6b,
-            0 0 10px rgba(255, 107, 107, 0.4),
-            0 0 20px rgba(255, 107, 107, 0.2);
-        animation: rainbow-glow 4s linear infinite;
+            0 0 0 2px rgba(var(--success-rgb), 0.45),
+            0 0 10px rgba(var(--success-rgb), 0.22),
+            0 0 20px rgba(var(--success-rgb), 0.1);
+        animation: live-ring 2.4s ease-in-out infinite;
     }
 
     &.agent-error {
@@ -1129,7 +1084,7 @@ onBeforeUnmount(() => {
     }
 
     :deep(.mention-highlight) {
-        color: #409eff;
+        color: $accent-primary;
         font-weight: 600;
         cursor: default;
     }
@@ -1191,7 +1146,7 @@ onBeforeUnmount(() => {
     position: fixed;
     inset: 0;
     z-index: 9999;
-    background: rgba(0, 0, 0, 0.82);
+    background: $overlay-scrim-strong;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1204,7 +1159,7 @@ onBeforeUnmount(() => {
     object-fit: contain;
     border-radius: 6px;
     cursor: zoom-out;
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+    box-shadow: $shadow-lg;
 }
 
 .thinking-block {
@@ -1224,7 +1179,7 @@ onBeforeUnmount(() => {
         user-select: none;
 
         &:hover {
-            background: rgba(0, 0, 0, 0.03);
+            background: rgba(var(--text-primary-rgb), 0.05);
         }
     }
 
diff --git a/packages/client/src/components/hermes/group-chat/GroupMessageList.vue b/packages/client/src/components/hermes/group-chat/GroupMessageList.vue
index 0663fee..541e288 100644
--- a/packages/client/src/components/hermes/group-chat/GroupMessageList.vue
+++ b/packages/client/src/components/hermes/group-chat/GroupMessageList.vue
@@ -187,7 +187,7 @@ defineExpose({ scrollToBottom })
     border: 1px solid rgba(var(--accent-primary-rgb), 0.24);
     background: rgba(var(--bg-card-rgb), 0.94);
     color: var(--accent-primary);
-    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
+    box-shadow: $shadow-md;
     padding: 0;
     cursor: pointer;
 }
diff --git a/packages/client/src/components/hermes/jobs/JobCard.vue b/packages/client/src/components/hermes/jobs/JobCard.vue
index d9658f8..02861e2 100644
--- a/packages/client/src/components/hermes/jobs/JobCard.vue
+++ b/packages/client/src/components/hermes/jobs/JobCard.vue
@@ -29,11 +29,23 @@ const statusLabel = computed(() => {
   return t('jobs.status.scheduled')
 })
 
-const statusType = computed(() => {
-  if (props.job.state === 'running') return 'info' as const
-  if (props.job.state === 'paused') return 'warning' as const
-  if (!props.job.enabled) return 'error' as const
-  return 'success' as const
+const statusTone = computed(() => {
+  if (props.job.state === 'running') return 'info'
+  if (props.job.state === 'paused') return 'warn'
+  if (!props.job.enabled) return 'err'
+  return 'ok'
+})
+
+const statusLed = computed(() => {
+  if (props.job.state === 'running') return 'run'
+  if (props.job.state === 'paused') return 'warn'
+  if (!props.job.enabled) return 'err'
+  return 'ok'
+})
+
+const scheduleKind = computed(() => {
+  const schedule = props.job.schedule
+  return typeof schedule === 'string' ? null : schedule.kind
 })
 
 const scheduleExpr = computed(() => scheduleToDisplayText(props.job.schedule, props.job.schedule_display || '—'))
@@ -89,63 +101,75 @@ function handleCardClick(e: MouseEvent) {
 </script>
 
 <template>
-  <div class="job-card" :class="{ selected }" @click="handleCardClick">
-    <div class="card-header">
+  <div class="cy-panel job-card" :class="{ selected }" @click="handleCardClick">
+    <div class="cy-panel-h">
+      <span class="cy-led" :class="statusLed" />
       <h3 class="job-name">{{ job.name }}</h3>
-      <span class="status-badge" :class="statusType">{{ statusLabel }}</span>
-    </div>
-
-    <div class="card-body">
-      <div class="info-row">
-        <span class="info-label">{{ t('jobs.info.schedule') }}</span>
-        <code class="info-value mono">{{ scheduleExpr }}</code>
-      </div>
-      <div class="info-row">
-        <span class="info-label">{{ t('jobs.info.provider') }}</span>
-        <span class="info-value mono">{{ providerLabel }}</span>
-      </div>
-      <div class="info-row">
-        <span class="info-label">{{ t('jobs.info.model') }}</span>
-        <span class="info-value mono">{{ modelLabel }}</span>
-      </div>
-      <div class="info-row">
-        <span class="info-label">{{ t('jobs.info.lastRun') }}</span>
-        <span class="info-value">
-          {{ formatTime(job.last_run_at) }}
-          <span v-if="job.last_status" class="run-status" :class="{ ok: job.last_status === 'ok', err: job.last_status !== 'ok' }">
-            {{ job.last_status === 'ok' ? t('common.ok') : job.last_status }}
-          </span>
-        </span>
-      </div>
-      <div class="info-row">
-        <span class="info-label">{{ t('jobs.info.nextRun') }}</span>
-        <span class="info-value">{{ formatTime(job.next_run_at) }}</span>
-      </div>
-      <div class="info-row">
-        <span class="info-label">{{ t('jobs.info.deliver') }}</span>
-        <span class="info-value">{{ job.deliver }}<template v-if="job.origin"> ({{ job.origin.platform }})</template></span>
-      </div>
-      <div v-if="job.repeat" class="info-row">
-        <span class="info-label">{{ t('jobs.info.repeat') }}</span>
-        <span class="info-value">
-          <template v-if="typeof job.repeat === 'string'">{{ job.repeat }}</template>
-          <template v-else>{{ job.repeat.completed }} / {{ job.repeat.times ?? '∞' }}</template>
-        </span>
+      <span class="cy-meta mono">{{ jobId }}</span>
+      <span class="cy-tag" :class="statusTone">{{ statusLabel }}</span>
+      <div class="cy-panel-actions card-actions">
+        <a-tooltip v-if="job.state !== 'paused' && job.enabled" :content="t('jobs.action.pauseJob')">
+          <a-button size="mini" type="text" @click.stop="handlePause">{{ t('jobs.action.pause') }}</a-button>
+        </a-tooltip>
+        <a-tooltip v-else-if="job.state === 'paused'" :content="t('jobs.action.resumeJob')">
+          <a-button size="mini" type="text" @click.stop="handleResume">{{ t('jobs.action.resume') }}</a-button>
+        </a-tooltip>
+        <a-tooltip :content="t('jobs.action.triggerImmediately')">
+          <a-button size="mini" type="text" @click.stop="handleRun">{{ t('jobs.action.runNow') }}</a-button>
+        </a-tooltip>
+        <a-button size="mini" type="text" @click.stop="emit('edit', jobId)">{{ t('common.edit') }}</a-button>
+        <a-button size="mini" type="text" status="danger" @click.stop="handleDelete">{{ t('common.delete') }}</a-button>
       </div>
     </div>
 
-    <div class="card-actions">
-      <a-tooltip v-if="job.state !== 'paused' && job.enabled" :content="t('jobs.action.pauseJob')">
-        <a-button size="mini" type="text" @click.stop="handlePause">{{ t('jobs.action.pause') }}</a-button>
-      </a-tooltip>
-      <a-tooltip v-else-if="job.state === 'paused'" :content="t('jobs.action.resumeJob')">
-        <a-button size="mini" type="text" @click.stop="handleResume">{{ t('jobs.action.resume') }}</a-button>
-      </a-tooltip>
-      <a-tooltip :content="t('jobs.action.triggerImmediately')">
-        <a-button size="mini" type="text" @click.stop="handleRun">{{ t('jobs.action.runNow') }}</a-button>
-      </a-tooltip>
-      <a-button size="mini" type="text" @click.stop="emit('edit', jobId)">{{ t('common.edit') }}</a-button>
-      <a-button size="mini" type="text" status="danger" @click.stop="handleDelete">{{ t('common.delete') }}</a-button>
+    <div class="cy-panel-b">
+      <div class="cy-grid4">
+        <div class="cy-field">
+          <label>{{ t('jobs.info.schedule') }}</label>
+          <div class="field-value">
+            <span v-if="scheduleKind" class="cy-tag">{{ scheduleKind }}</span>
+            <code class="cy-code">{{ scheduleExpr }}</code>
+          </div>
+        </div>
+        <div class="cy-field">
+          <label>{{ t('jobs.info.provider') }} / {{ t('jobs.info.model') }}</label>
+          <div class="field-value">
+            <span class="cy-tag">{{ providerLabel }}</span>
+            <code class="cy-code">{{ modelLabel }}</code>
+          </div>
+        </div>
+        <div class="cy-field">
+          <label>{{ t('jobs.info.lastRun') }}</label>
+          <div class="field-value">
+            <span class="field-text">{{ formatTime(job.last_run_at) }}</span>
+            <span v-if="job.last_status" class="run-status" :class="{ ok: job.last_status === 'ok', err: job.last_status !== 'ok' }">
+              {{ job.last_status === 'ok' ? t('common.ok') : job.last_status }}
+            </span>
+          </div>
+        </div>
+        <div class="cy-field">
+          <label>{{ t('jobs.info.nextRun') }}</label>
+          <div class="field-value">
+            <span class="field-text">{{ formatTime(job.next_run_at) }}</span>
+          </div>
+        </div>
+        <div class="cy-field">
+          <label>{{ t('jobs.info.deliver') }}</label>
+          <div class="field-value">
+            <span class="cy-tag">{{ job.deliver }}</span>
+            <span v-if="job.origin" class="field-text">{{ job.origin.platform }}</span>
+          </div>
+        </div>
+        <div class="cy-field">
+          <label>{{ t('jobs.info.repeat') }}</label>
+          <div class="field-value">
+            <span class="field-text">
+              <template v-if="typeof job.repeat === 'string'">{{ job.repeat }}</template>
+              <template v-else>{{ job.repeat.completed }} / {{ job.repeat.times ?? '∞' }}</template>
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -154,10 +178,6 @@ function handleCardClick(e: MouseEvent) {
 @use '@/styles/variables' as *;
 
 .job-card {
-  background-color: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  padding: 16px;
   transition: border-color $transition-fast;
   cursor: pointer;
 
@@ -171,91 +191,33 @@ function handleCardClick(e: MouseEvent) {
   }
 }
 
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
 .job-name {
-  font-size: 15px;
-  font-weight: 600;
-  color: $text-primary;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 70%;
+  max-width: 46%;
 }
 
-.status-badge {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: 500;
-
-  &.success {
-    background: rgba(var(--success-rgb), 0.12);
-    color: $success;
-  }
-
-  &.info {
-    background: rgba(var(--accent-primary-rgb), 0.12);
-    color: $accent-primary;
-  }
-
-  &.warning {
-    background: rgba(var(--warning-rgb), 0.12);
-    color: $warning;
-  }
-
-  &.error {
-    background: rgba(var(--error-rgb), 0.12);
-    color: $error;
-  }
-}
-
-.card-body {
+.field-value {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 14px;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  min-width: 0;
 }
 
-.info-label {
-  font-size: 12px;
+.field-text {
+  font-family: $font-code;
+  font-size: 11.5px;
   color: $text-muted;
 }
 
-.info-value {
-  font-size: 12px;
-  color: $text-secondary;
-}
-
 .run-status {
-  margin-left: 6px;
+  font-family: $font-code;
   font-size: 11px;
   font-weight: 500;
 
   &.ok { color: $success; }
   &.err { color: $error; }
 }
-
-.mono {
-  font-family: $font-code;
-  font-size: 12px;
-}
-
-.card-actions {
-  display: flex;
-  gap: 4px;
-  border-top: 1px solid $border-light;
-  padding-top: 10px;
-}
 </style>
diff --git a/packages/client/src/components/hermes/jobs/JobRunHistory.vue b/packages/client/src/components/hermes/jobs/JobRunHistory.vue
index ae51ce2..116e90c 100644
--- a/packages/client/src/components/hermes/jobs/JobRunHistory.vue
+++ b/packages/client/src/components/hermes/jobs/JobRunHistory.vue
@@ -73,13 +73,13 @@ watch(() => [props.selectedJobId, props.profileKey], () => {
 </script>
 
 <template>
-  <div class="run-history">
-    <div class="history-header">
-      <span class="history-title">{{ t('jobs.runHistory.title') }}</span>
-      <span class="history-count">{{ filteredRuns.length }} {{ t('jobs.runHistory.runs') }}</span>
+  <div class="cy-panel run-history">
+    <div class="cy-panel-h history-header">
+      <h3 class="history-title">{{ t('jobs.runHistory.title') }}</h3>
+      <span class="cy-meta">{{ filteredRuns.length }} {{ t('jobs.runHistory.runs') }}</span>
     </div>
 
-    <div class="history-body">
+    <div class="cy-panel-b history-body">
       <a-spin :loading="loading">
         <a-empty v-if="!loading && filteredRuns.length === 0" :description="t('jobs.runHistory.noRuns')" />
 
@@ -114,32 +114,22 @@ watch(() => [props.selectedJobId, props.profileKey], () => {
   height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .history-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-  border-bottom: 1px solid $border-light;
   flex-shrink: 0;
 }
 
 .history-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: $text-primary;
-}
-
-.history-count {
-  font-size: 12px;
-  color: $text-muted;
+  flex: 1;
+  min-width: 0;
 }
 
 .history-body {
   flex: 1;
   overflow-y: auto;
-  padding: 8px 20px 20px;
+  padding: 8px 14px 14px;
 }
 
 .run-meta {
diff --git a/packages/client/src/components/hermes/kanban/KanbanCreateForm.vue b/packages/client/src/components/hermes/kanban/KanbanCreateForm.vue
index 48fc2d2..423cefb 100644
--- a/packages/client/src/components/hermes/kanban/KanbanCreateForm.vue
+++ b/packages/client/src/components/hermes/kanban/KanbanCreateForm.vue
@@ -242,16 +242,28 @@ async function handleSubmit() {
 </template>
 
 <style scoped lang="scss">
+@use '@/styles/variables' as *;
+
 .advanced-row {
   display: flex;
   gap: 16px;
   margin: 0 0 12px;
   flex-wrap: wrap;
+
+  :deep(.arco-checkbox-label) {
+    font-size: 12.5px;
+    color: $text-secondary;
+  }
 }
 
+// 高级选项：原型 .grid2 —— 两列成组字段。
 .advanced-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
+
+  :deep(.arco-form-item) {
+    margin-bottom: 0;
+  }
 }
 </style>
diff --git a/packages/client/src/components/hermes/kanban/KanbanTaskCard.vue b/packages/client/src/components/hermes/kanban/KanbanTaskCard.vue
index 08af41f..9e329e3 100644
--- a/packages/client/src/components/hermes/kanban/KanbanTaskCard.vue
+++ b/packages/client/src/components/hermes/kanban/KanbanTaskCard.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ProfileAvatar from '@/components/hermes/profiles/ProfileAvatar.vue'
+import { kanbanStatusColor } from '@/utils/hermes/kanban-status-colors'
 import type { KanbanTask } from '@/api/hermes/kanban'
 import type { ProfileAvatar as ProfileAvatarData } from '@/api/hermes/profiles'
 
@@ -33,10 +34,19 @@ const priorityLabel = computed(() => {
 const priorityText = computed(() => {
   return t(`kanban.card.priority.${priorityLabel.value}`)
 })
+
+// 状态色来自集中色板，不再在 style 里按 class 写死一份 ——
+// 卡片和任务抽屉曾经各有一套互相矛盾的颜色（running 一个是紫一个是青）。
+const statusColor = computed(() => kanbanStatusColor(props.task.status))
 </script>
 
 <template>
-  <div class="kanban-task-card" :class="`status-${task.status}`" @click="emit('click', task.id)">
+  <div
+    class="kanban-task-card"
+    :class="`status-${task.status}`"
+    :style="{ '--kanban-card-status-color': statusColor }"
+    @click="emit('click', task.id)"
+  >
     <div class="card-title">{{ task.title }}</div>
     <div class="card-meta">
       <a-tooltip v-if="task.assignee" :content="t('kanban.card.assigneeTooltip')">
@@ -62,34 +72,30 @@ const priorityText = computed(() => {
 @use '@/styles/variables' as *;
 
 .kanban-task-card {
-  --kanban-card-status-color: #64748b;
-  background-color: $bg-card;
+  // 状态色由模板的内联 style 从集中色板注入（utils/hermes/kanban-status-colors.ts），
+  // 这里只声明缺省值兜底。
+  --kanban-card-status-color: var(--text-faint);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background-color: $bg-secondary;
   border: 1px solid $border-color;
-  border-left: 3px solid var(--kanban-card-status-color);
-  border-radius: $radius-md;
-  padding: 12px;
+  border-left: 2px solid var(--kanban-card-status-color);
+  border-radius: $radius-sm;
+  padding: 9px 10px;
   cursor: pointer;
-  transition: border-color $transition-fast, box-shadow $transition-fast;
-
-  &.status-triage { --kanban-card-status-color: #94a3b8; }
-  &.status-todo { --kanban-card-status-color: #38bdf8; }
-  &.status-scheduled { --kanban-card-status-color: #06b6d4; }
-  &.status-ready { --kanban-card-status-color: #f59e0b; }
-  &.status-running { --kanban-card-status-color: #8b5cf6; }
-  &.status-blocked { --kanban-card-status-color: #ef4444; }
-  &.status-review { --kanban-card-status-color: #ec4899; }
-  &.status-done { --kanban-card-status-color: #22c55e; }
-  &.status-archived { --kanban-card-status-color: #64748b; }
+  transition: border-color $transition-fast, background-color $transition-fast;
 
   &:hover {
-    border-color: var(--kanban-card-status-color);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border-color: rgba(var(--accent-primary-rgb), 0.35);
+    border-left-color: var(--kanban-card-status-color);
+    background-color: $bg-card;
   }
 }
 
 .card-title {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 12.5px;
+  font-weight: 500;
   color: $text-primary;
   line-height: 1.4;
   word-break: break-word;
@@ -99,22 +105,28 @@ const priorityText = computed(() => {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-top: 8px;
   flex-wrap: wrap;
 }
 
 .meta-tag {
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  font-weight: 500;
-}
-
-.assignee-tag {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  background: rgba(var(--accent-primary-rgb), 0.1);
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 4px;
+  border: 1px solid $border-color;
+  background: $bg-card;
+  font-family: $font-code;
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.assignee-tag {
+  border-color: rgba(var(--accent-primary-rgb), 0.3);
+  background: var(--accent-soft);
   color: $accent-primary;
   padding-left: 2px;
 }
@@ -125,31 +137,34 @@ const priorityText = computed(() => {
 
 .priority-tag {
   &.high {
-    background: rgba(var(--error-rgb), 0.12);
+    border-color: rgba(var(--error-rgb), 0.35);
+    background: rgba(var(--error-rgb), 0.1);
     color: $error;
   }
 
   &.medium {
-    background: rgba(var(--warning-rgb), 0.12);
+    border-color: rgba(var(--warning-rgb), 0.35);
+    background: rgba(var(--warning-rgb), 0.1);
     color: $warning;
   }
 
   &.low {
-    background: rgba(var(--success-rgb), 0.12);
+    border-color: rgba(var(--success-rgb), 0.35);
+    background: rgba(var(--success-rgb), 0.1);
     color: $success;
   }
 }
 
 .meta-time {
-  font-size: 11px;
-  color: $text-muted;
+  font-family: $font-code;
+  font-size: 10.5px;
+  color: $text-faint;
   margin-left: auto;
 }
 
 .card-body-preview {
-  font-size: 12px;
-  color: $text-muted;
-  margin-top: 6px;
-  line-height: 1.4;
+  font-size: 11.5px;
+  color: $text-faint;
+  line-height: 1.45;
 }
 </style>
diff --git a/packages/client/src/components/hermes/kanban/KanbanTaskDrawer.vue b/packages/client/src/components/hermes/kanban/KanbanTaskDrawer.vue
index 1710a20..3e5ac1a 100644
--- a/packages/client/src/components/hermes/kanban/KanbanTaskDrawer.vue
+++ b/packages/client/src/components/hermes/kanban/KanbanTaskDrawer.vue
@@ -7,6 +7,7 @@ import { request } from '@/api/client'
 import { getTask } from '@/api/hermes/kanban'
 import { useKanbanStore } from '@/stores/hermes/kanban'
 import { withDefaultAssignee } from '@/utils/hermes/kanban-assignees'
+import { kanbanStatusBg, kanbanStatusColor } from '@/utils/hermes/kanban-status-colors'
 import HistoryMessageList from '@/components/hermes/chat/HistoryMessageList.vue'
 import type { Session, Message } from '@/stores/hermes/chat'
 import type { KanbanTaskDetail } from '@/api/hermes/kanban'
@@ -54,6 +55,15 @@ const localizedTaskStatus = computed(() => {
   return t(`kanban.columns.${detail.value.task.status}`, detail.value.task.status)
 })
 
+// 状态色来自集中色板（与 KanbanTaskCard.vue 同一份）。
+const statusBadgeStyle = computed(() => {
+  const status = detail.value?.task.status ?? ''
+  return {
+    background: kanbanStatusBg(status),
+    color: kanbanStatusColor(status),
+  }
+})
+
 const canMutateTask = computed(() => {
   const status = detail.value?.task.status
   return status !== 'done' && status !== 'archived'
@@ -376,10 +386,10 @@ function handleNavigateTask(taskId: string) {
       <a-spin :loading="loading">
         <template v-if="detail">
           <!-- Metadata -->
-          <div class="detail-section">
+          <div class="detail-section detail-meta">
             <div class="detail-row">
               <span class="detail-label">{{ t('kanban.detail.status') }}</span>
-              <span class="detail-value status-badge" :class="detail.task.status">{{ localizedTaskStatus }}</span>
+              <span class="detail-value status-badge" :style="statusBadgeStyle">{{ localizedTaskStatus }}</span>
             </div>
             <div class="detail-row">
               <span class="detail-label">Task ID</span>
@@ -579,22 +589,38 @@ function handleNavigateTask(taskId: string) {
 @use '@/styles/variables' as *;
 
 .detail-section {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
+// 小节标题：原型 .sec-t。左侧标签 + 一条发丝线。
 .section-title {
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-family: $font-code;
+  font-size: 11px;
   font-weight: 600;
-  color: $text-muted;
+  line-height: 1;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 10px;
+  color: $text-faint;
+  margin: 20px 0 10px;
+
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: $border-light;
+  }
 }
 
 .run-history-title {
   display: flex;
   align-items: center;
   gap: 8px;
+
+  // 右侧已经跟着页码和翻页按钮，再挂一条线会挤在一起。
+  &::after { display: none; }
 }
 
 .run-history-range {
@@ -611,15 +637,17 @@ function handleNavigateTask(taskId: string) {
   gap: 4px;
 }
 
+// 结果摘要：原型 .note —— 左侧 2px 青色竖条 + 卡面。
 .result-summary {
   cursor: pointer;
   border-radius: $radius-sm;
-  padding: 8px 10px;
-  background: rgba(var(--accent-primary-rgb), 0.04);
-  border: 1px solid $border-light;
-  font-size: 13px;
-  color: $text-secondary;
-  line-height: 1.5;
+  padding: 10px 12px;
+  background: $bg-card;
+  border: 1px solid $border-color;
+  border-left: 2px solid $accent-primary;
+  font-size: 12.5px;
+  color: $text-muted;
+  line-height: 1.6;
   transition: border-color $transition-fast;
 
   &:hover { border-color: rgba(var(--accent-primary-rgb), 0.3); }
@@ -709,45 +737,72 @@ function handleNavigateTask(taskId: string) {
   }
 }
 
+// 元数据区：原型 .kv —— 键列沉底、值列发丝线分隔。
+.detail-meta {
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  overflow: hidden;
+  background: $bg-card;
+}
+
 .detail-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6px 0;
+  display: grid;
+  grid-template-columns: minmax(96px, 34%) 1fr;
   border-bottom: 1px solid $border-light;
+
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 .detail-label {
-  font-size: 12px;
+  padding: 8px 11px;
+  background: $bg-secondary;
+  font-family: $font-code;
+  font-size: 11.5px;
   color: $text-muted;
+  border-right: 1px solid $border-light;
+  display: flex;
+  align-items: center;
 }
 
 .detail-value {
-  font-size: 12px;
+  padding: 8px 11px;
+  font-size: 12.5px;
   color: $text-primary;
+  min-width: 0;
+  word-break: break-word;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
 }
 
 .task-id-value {
   font-family: $font-code;
-  font-size: 11px;
-  background: rgba(var(--accent-primary-rgb), 0.06);
+  font-size: 11.5px;
+  background: $code-bg;
+  border: 1px solid $border-light;
+  color: $accent-primary;
   padding: 1px 5px;
-  border-radius: 3px;
+  border-radius: 4px;
   user-select: all;
 }
 
 .task-link {
   font-family: $font-code;
-  font-size: 11px;
+  font-size: 11.5px;
   color: $accent-primary;
   cursor: pointer;
-  background: rgba(var(--accent-primary-rgb), 0.06);
+  background: $code-bg;
+  border: 1px solid $border-light;
   padding: 1px 5px;
-  border-radius: 3px;
-  transition: background $transition-fast;
+  border-radius: 4px;
+  transition: background $transition-fast, border-color $transition-fast;
 
   &:hover {
-    background: rgba(var(--accent-primary-rgb), 0.14);
+    background: var(--accent-soft);
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
     text-decoration: underline;
   }
 
@@ -756,51 +811,24 @@ function handleNavigateTask(taskId: string) {
   }
 }
 
+// 状态色的底色与文字色由模板内联注入（集中色板），
+// 这里只保留排版，不写死任何一个状态的颜色。
 .status-badge {
-  padding: 1px 8px;
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 7px;
   border-radius: 4px;
+  font-family: $font-code;
+  font-size: 11px;
+  line-height: 1;
   font-weight: 500;
-
-  &.triage {
-    background: rgba(148, 163, 184, 0.14);
-    color: #94a3b8;
-  }
-
-  &.todo {
-    background: rgba(56, 189, 248, 0.14);
-    color: #38bdf8;
-  }
-
-  &.ready {
-    background: rgba(var(--warning-rgb), 0.12);
-    color: $warning;
-  }
-
-  &.running {
-    background: rgba(var(--accent-primary-rgb), 0.12);
-    color: $accent-primary;
-  }
-
-  &.blocked {
-    background: rgba(var(--error-rgb), 0.12);
-    color: $error;
-  }
-
-  &.done {
-    background: rgba(var(--success-rgb), 0.12);
-    color: $success;
-  }
-
-  &.archived {
-    background: rgba(100, 116, 139, 0.14);
-    color: #94a3b8;
-  }
 }
 
 .detail-body {
-  font-size: 13px;
+  font-size: 12.5px;
   color: $text-secondary;
-  line-height: 1.6;
+  line-height: 1.65;
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -824,13 +852,18 @@ function handleNavigateTask(taskId: string) {
   gap: 8px;
 }
 
+// 运行记录 / 评论：原型 .row-i —— 独立卡面 + 发丝线边。
 .run-item,
 .comment-item {
-  padding: 8px 0;
-  border-bottom: 1px solid $border-light;
+  padding: 9px 12px;
+  border: 1px solid $border-color;
+  border-radius: $radius-sm;
+  background: $bg-card;
+  margin-bottom: 6px;
+  transition: border-color $transition-fast;
 
-  &:last-child {
-    border-bottom: none;
+  &:hover {
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
   }
 }
 
@@ -842,30 +875,37 @@ function handleNavigateTask(taskId: string) {
   margin-bottom: 4px;
 }
 
+// 状态标签：原型 .tag。发丝线底 + 语义字色，不用实心块。
 .run-status {
-  font-size: 11px;
-  font-weight: 500;
-  padding: 1px 6px;
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 7px;
   border-radius: 4px;
+  font-family: $font-code;
+  font-size: 11px;
+  line-height: 1;
+  border: 1px solid currentColor;
 
   &.running {
-    background: rgba(var(--accent-primary-rgb), 0.12);
     color: $accent-primary;
+    background: var(--accent-soft);
   }
 
   &.done, &.completed {
-    background: rgba(var(--success-rgb), 0.12);
     color: $success;
+    background: rgba(var(--success-rgb), 0.1);
   }
 
   &.crashed, &.failed {
-    background: rgba(var(--error-rgb), 0.12);
     color: $error;
+    background: rgba(var(--error-rgb), 0.1);
   }
 }
 
 .run-profile,
 .comment-author {
+  font-family: $font-code;
   font-size: 12px;
   font-weight: 500;
   color: $text-primary;
@@ -873,8 +913,9 @@ function handleNavigateTask(taskId: string) {
 
 .run-time,
 .comment-time {
+  font-family: $font-code;
   font-size: 11px;
-  color: $text-muted;
+  color: $text-faint;
   margin-left: auto;
 }
 
@@ -883,7 +924,7 @@ function handleNavigateTask(taskId: string) {
 .comment-body {
   font-size: 12px;
   color: $text-secondary;
-  line-height: 1.4;
+  line-height: 1.55;
 }
 
 .run-error {
@@ -894,7 +935,10 @@ function handleNavigateTask(taskId: string) {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 4px 0;
+  padding: 5px 0;
+  border-bottom: 1px solid $border-light;
+
+  &:last-child { border-bottom: none; }
 }
 
 .event-kind {
@@ -905,7 +949,8 @@ function handleNavigateTask(taskId: string) {
 
 .event-time {
   font-size: 11px;
-  color: $text-muted;
+  font-family: $font-code;
+  color: $text-faint;
   margin-left: auto;
 }
 
@@ -916,17 +961,21 @@ function handleNavigateTask(taskId: string) {
 }
 
 .session-item {
-  padding: 8px 10px;
+  padding: 9px 12px;
   border-radius: $radius-sm;
-  border: 1px solid $border-light;
+  border: 1px solid $border-color;
+  background: $bg-card;
   cursor: pointer;
   transition: border-color $transition-fast;
 
-  &:hover { border-color: rgba(var(--accent-primary-rgb), 0.3); }
+  &:hover {
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
+    background: $bg-secondary;
+  }
 }
 
 .session-title {
-  font-size: 13px;
+  font-size: 12.5px;
   font-weight: 500;
   color: $text-primary;
   margin-bottom: 4px;
@@ -938,8 +987,9 @@ function handleNavigateTask(taskId: string) {
 .session-meta {
   display: flex;
   gap: 8px;
+  font-family: $font-code;
   font-size: 11px;
-  color: $text-muted;
+  color: $text-faint;
 }
 
 .session-messages {
@@ -965,18 +1015,19 @@ function handleNavigateTask(taskId: string) {
   min-width: 220px;
 }
 
+// 日志输出：原型 .term —— 等宽、深底、发丝线边。
 .log-output {
   margin: 10px 0 0;
   max-height: 240px;
   overflow: auto;
-  padding: 10px;
-  border: 1px solid $border-light;
+  padding: 12px 14px;
+  border: 1px solid $border-color;
   border-radius: $radius-sm;
-  background: rgba(var(--accent-primary-rgb), 0.03);
+  background: $code-bg;
   color: $text-secondary;
   font-family: $font-code;
-  font-size: 11px;
-  line-height: 1.45;
+  font-size: 12px;
+  line-height: 1.65;
   white-space: pre-wrap;
   word-break: break-word;
 }
diff --git a/packages/client/src/components/hermes/mcp/McpServerCard.vue b/packages/client/src/components/hermes/mcp/McpServerCard.vue
index 013bc5c..8170afe 100644
--- a/packages/client/src/components/hermes/mcp/McpServerCard.vue
+++ b/packages/client/src/components/hermes/mcp/McpServerCard.vue
@@ -19,9 +19,10 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-function statusClass(server: McpServerInfo) {
-  if (server.raw_config.enabled === false) return 'disabled'
-  return server.connected ? 'connected' : 'disconnected'
+// 语义色：绿=连着、红=断了、灰=被关掉。
+function statusTone(server: McpServerInfo) {
+  if (server.raw_config.enabled === false) return 'idle'
+  return server.connected ? 'ok' : 'err'
 }
 
 function statusLabel(server: McpServerInfo) {
@@ -29,55 +30,70 @@ function statusLabel(server: McpServerInfo) {
   return server.connected ? t('mcp.connectedStatus') : t('mcp.disconnectedStatus')
 }
 
+// 连接命令：stdio 拼 command + args，远程取 url。
+const commandLine = computed(() => {
+  const cfg = props.server.raw_config
+  if (props.server.transport === 'stdio') {
+    const parts = [cfg.command, ...(cfg.args || [])].filter(Boolean)
+    return parts.join(' ')
+  }
+  return cfg.url || ''
+})
+
 const tools = computed(() => props.toolsByServer[props.server.name] || [])
 const MAX_VISIBLE_TOOLS = 20
 </script>
 
 <template>
-  <div class="mcp-card" :class="{ disconnected: !server.connected, disabled: server.raw_config.enabled === false }">
-    <!-- 第一行：标题 + 标签 -->
-    <div class="card-header">
+  <div class="mcp-card cy-panel" :class="{ disconnected: !server.connected, disabled: server.raw_config.enabled === false }">
+    <div class="cy-panel-h">
+      <span class="cy-led" :class="statusTone(server)" />
       <h3 class="server-name">{{ server.name }}</h3>
-      <div class="server-badges">
-        <span class="type-badge transport">{{ server.transport }}</span>
-        <span class="type-badge" :class="statusClass(server)">{{ statusLabel(server) }}</span>
+      <span class="cy-tag">{{ server.transport }}</span>
+      <div class="cy-panel-actions">
+        <span class="cy-tag" :class="statusTone(server)">{{ statusLabel(server) }}</span>
+        <span class="cy-tag">{{ server.tools_registered }} {{ t('mcp.tools') }}</span>
+        <a-switch
+          :model-value="server.raw_config.enabled !== false"
+          size="small"
+          @update:model-value="() => emit('toggleEnabled', server)"
+        />
       </div>
     </div>
 
-    <!-- 第二行：工具列表 + 数量 -->
-    <div class="card-body">
-      <div v-if="server.error" class="error-row">
-        <span class="error-text">{{ server.error }}</span>
-      </div>
+    <div class="cy-panel-b">
+      <div class="card-stack">
+        <div v-if="server.error" class="cy-code error-line">{{ server.error }}</div>
 
-      <div class="info-row">
-        <span class="info-label">{{ t('mcp.toolList') }}</span>
-        <span class="info-value">
-          {{ server.tools_registered }}/{{ server.tools }}{{ t('mcp.count') }}{{ t('mcp.tools') }}
-        </span>
-      </div>
+        <div class="info-row">
+          <span class="info-label">{{ t('mcp.toolList') }}</span>
+          <span class="cy-code">
+            {{ server.tools_registered }}/{{ server.tools }}{{ t('mcp.count') }}{{ t('mcp.tools') }}
+          </span>
+        </div>
 
-      <!-- 工具标签列表 -->
-      <div v-if="server.tools > 0" class="tools-list">
-        <span
-          v-for="tool in tools.slice(0, MAX_VISIBLE_TOOLS)"
-          :key="tool.name"
-          class="tool-tag"
-          :title="tool.description"
-        >
-          {{ tool.name }}
-        </span>
-        <span v-if="tools.length > MAX_VISIBLE_TOOLS" class="tool-tag tool-tag-more">
-          +{{ tools.length - MAX_VISIBLE_TOOLS }} {{ t('mcp.more') }}
-        </span>
-      </div>
-      <div v-else class="tools-empty">
-        <span class="muted">{{ t('mcp.zeroTools') }}</span>
+        <div v-if="commandLine" class="cy-code command-line">{{ commandLine }}</div>
+
+        <div v-if="server.tools > 0" class="tools-list">
+          <span
+            v-for="tool in tools.slice(0, MAX_VISIBLE_TOOLS)"
+            :key="tool.name"
+            class="cy-tag acc tool-tag"
+            :title="tool.description"
+          >
+            {{ tool.name }}
+          </span>
+          <span v-if="tools.length > MAX_VISIBLE_TOOLS" class="cy-tag tool-tag-more">
+            +{{ tools.length - MAX_VISIBLE_TOOLS }} {{ t('mcp.more') }}
+          </span>
+        </div>
+        <div v-else class="tools-empty">
+          <span class="muted">{{ t('mcp.zeroTools') }}</span>
+        </div>
       </div>
     </div>
 
-    <!-- 底部：按钮 + 开关 -->
-    <div class="card-footer">
+    <div class="cy-panel-b card-footer">
       <div class="card-actions">
         <a-button size="mini" type="text" @click="emit('edit', server)">{{ t('mcp.edit') }}</a-button>
         <a-button size="mini" type="text" :disabled="!server.connected" @click="emit('manageTools', server)">{{ t('mcp.manageTools') }}</a-button>
@@ -90,11 +106,6 @@ const MAX_VISIBLE_TOOLS = 20
           <a-button size="mini" type="text" status="danger">{{ t('mcp.remove') }}</a-button>
         </a-popconfirm>
       </div>
-      <a-switch
-        :model-value="server.raw_config.enabled !== false"
-        size="small"
-        @update:model-value="() => emit('toggleEnabled', server)"
-      />
     </div>
   </div>
 </template>
@@ -103,10 +114,7 @@ const MAX_VISIBLE_TOOLS = 20
 @use '@/styles/variables' as *;
 
 .mcp-card {
-  background-color: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  padding: 16px;
+  overflow: hidden;
   transition: border-color $transition-fast;
 
   &:hover {
@@ -122,80 +130,41 @@ const MAX_VISIBLE_TOOLS = 20
   }
 }
 
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
 .server-name {
-  font-size: 15px;
+  font-size: 13px;
   font-weight: 600;
   color: $text-primary;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 70%;
 }
 
-.server-badges {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 6px;
-  min-width: 0;
-}
-
-.type-badge {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: 500;
-  white-space: nowrap;
-
-  &.transport {
-    background: rgba(var(--accent-primary-rgb), 0.12);
-    color: $accent-primary;
-  }
-
-  &.connected {
-    background: rgba(var(--success-rgb), 0.12);
-    color: $success;
-  }
-
-  &.disconnected {
-    background: rgba(var(--error-rgb), 0.12);
-    color: $error;
-  }
-
-  &.disabled {
-    background: rgba(var(--text-muted-rgb, 128,128,128), 0.12);
-    color: $text-muted;
-  }
-}
-
-.card-body {
+.card-stack {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  margin-bottom: 14px;
 }
 
-.error-row {
-  margin-bottom: 4px;
-}
-
-.error-text {
+.error-line {
   color: $error;
-  font-size: 11px;
+  background: rgba(var(--error-rgb), 0.07);
+  border-color: rgba(var(--error-rgb), 0.25);
+  padding: 7px 10px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
+.command-line {
+  padding: 7px 10px;
+  font-size: 11px;
+  color: $text-secondary;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .info-row {
   display: flex;
   justify-content: space-between;
@@ -207,11 +176,6 @@ const MAX_VISIBLE_TOOLS = 20
   color: $text-muted;
 }
 
-.info-value {
-  font-size: 12px;
-  color: $text-secondary;
-}
-
 .tools-list {
   display: flex;
   flex-wrap: wrap;
@@ -222,30 +186,10 @@ const MAX_VISIBLE_TOOLS = 20
 }
 
 .tool-tag {
-  display: inline-flex;
-  align-items: center;
-  min-height: 22px;
-  font-size: 10px;
-  font-family: $font-code;
-  padding: 2px 6px;
-  border-radius: 3px;
-  background: rgba(var(--accent-primary-rgb), 0.08);
-  color: $text-secondary;
-  white-space: nowrap;
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: default;
-
-  &:hover {
-    background: rgba(var(--accent-primary-rgb), 0.16);
-  }
-
-  &-more {
-    background: rgba(var(--accent-primary-rgb), 0.15);
-    color: $accent-primary;
-    font-weight: 500;
-  }
 }
 
 .tools-empty {
@@ -261,11 +205,8 @@ const MAX_VISIBLE_TOOLS = 20
 }
 
 .card-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   border-top: 1px solid $border-light;
-  padding-top: 10px;
+  padding: 9px 12px;
 }
 
 .card-actions {
diff --git a/packages/client/src/components/hermes/models/AnthropicLoginModal.vue b/packages/client/src/components/hermes/models/AnthropicLoginModal.vue
index 94935b1..c69b120 100644
--- a/packages/client/src/components/hermes/models/AnthropicLoginModal.vue
+++ b/packages/client/src/components/hermes/models/AnthropicLoginModal.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
@@ -165,15 +165,15 @@ startLogin()
 }
 
 .oauth-login__state--success {
-  color: #18a058;
+  color: var(--success);
 
   svg {
-    stroke: #18a058;
+    stroke: var(--success);
   }
 }
 
 .oauth-login__error {
-  color: #d03050;
+  color: var(--error);
   text-align: center;
   word-break: break-word;
 }
diff --git a/packages/client/src/components/hermes/models/AuxiliaryModelsPanel.vue b/packages/client/src/components/hermes/models/AuxiliaryModelsPanel.vue
index 63c273a..9fce6c8 100644
--- a/packages/client/src/components/hermes/models/AuxiliaryModelsPanel.vue
+++ b/packages/client/src/components/hermes/models/AuxiliaryModelsPanel.vue
@@ -233,45 +233,47 @@ watch(() => form.value.provider, (provider) => {
 </script>
 
 <template>
-  <section class="auxiliary-panel">
-    <div class="auxiliary-header">
-      <div>
-        <h3>{{ t('models.auxiliaryTitle') }}</h3>
-        <p>{{ t('models.auxiliarySubtitle') }}</p>
+  <section class="cy-panel auxiliary-panel">
+    <div class="cy-panel-h">
+      <h3>{{ t('models.auxiliaryTitle') }}</h3>
+      <span class="cy-meta">{{ t('models.auxiliarySubtitle') }}</span>
+      <div class="cy-panel-actions">
+        <a-button size="mini" type="text" :loading="loading" @click="loadAuxiliaryModels">
+          {{ t('models.auxiliaryRefresh') }}
+        </a-button>
       </div>
-      <a-button size="small" type="text" :loading="loading" @click="loadAuxiliaryModels">
-        {{ t('models.auxiliaryRefresh') }}
-      </a-button>
     </div>
 
-    <a-spin :loading="loading">
-      <div class="auxiliary-table">
-        <div class="auxiliary-row auxiliary-row-head">
-          <span>{{ t('models.auxiliaryTask') }}</span>
-          <span>{{ t('models.provider') }} / {{ t('models.defaultModel') }}</span>
-          <span>{{ t('models.auxiliaryTimeout') }}</span>
-          <span>{{ t('models.auxiliaryActions') }}</span>
+    <div class="cy-panel-b flush">
+      <a-spin :loading="loading">
+        <div class="auxiliary-table">
+          <div class="auxiliary-row auxiliary-row-head">
+            <span>{{ t('models.auxiliaryTask') }}</span>
+            <span>{{ t('models.provider') }} / {{ t('models.defaultModel') }}</span>
+            <span>{{ t('models.auxiliaryTimeout') }}</span>
+            <span>{{ t('models.auxiliaryActions') }}</span>
+          </div>
+          <div v-for="task in tasks" :key="task.key" class="auxiliary-row">
+            <span class="task-name">{{ taskLabel(task) }}</span>
+            <span class="task-config">{{ configuredLabel(auxiliary[task.key]) }}</span>
+            <span class="task-timeout">{{ timeoutLabel(task, auxiliary[task.key]) }}</span>
+            <span class="task-actions">
+              <a-button size="mini" type="text" @click="openEditor(task)">
+                {{ t('common.edit') }}
+              </a-button>
+              <a-button
+                size="mini"
+                type="text"
+                :disabled="saving"
+                @click="clearTask(task)"
+              >
+                {{ t('models.auxiliaryClear') }}
+              </a-button>
+            </span>
+          </div>
         </div>
-        <div v-for="task in tasks" :key="task.key" class="auxiliary-row">
-          <span class="task-name">{{ taskLabel(task) }}</span>
-          <span class="task-config">{{ configuredLabel(auxiliary[task.key]) }}</span>
-          <span class="task-timeout">{{ timeoutLabel(task, auxiliary[task.key]) }}</span>
-          <span class="task-actions">
-            <a-button size="mini" type="text" @click="openEditor(task)">
-              {{ t('common.edit') }}
-            </a-button>
-            <a-button
-              size="mini"
-              type="text"
-              :disabled="saving"
-              @click="clearTask(task)"
-            >
-              {{ t('models.auxiliaryClear') }}
-            </a-button>
-          </span>
-        </div>
-      </div>
-    </a-spin>
+      </a-spin>
+    </div>
 
     <a-modal
       v-model:visible="showEditor"
@@ -338,32 +340,7 @@ watch(() => form.value.provider, (provider) => {
 .auxiliary-panel {
   --auxiliary-table-min-width: 720px;
 
-  background-color: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  margin-bottom: 16px;
-}
-
-.auxiliary-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 14px 16px;
-  border-bottom: 1px solid $border-light;
-
-  h3 {
-    color: $text-primary;
-    font-size: 15px;
-    font-weight: 600;
-    margin: 0 0 4px;
-  }
-
-  p {
-    color: $text-muted;
-    font-size: 12px;
-    margin: 0;
-  }
+  overflow: hidden;
 }
 
 .auxiliary-table {
@@ -447,10 +424,6 @@ watch(() => form.value.provider, (provider) => {
     overflow-x: auto;
   }
 
-  .auxiliary-header {
-    min-width: var(--auxiliary-table-min-width);
-  }
-
   .auxiliary-form {
     grid-template-columns: 1fr;
   }
diff --git a/packages/client/src/components/hermes/models/CodexLoginModal.vue b/packages/client/src/components/hermes/models/CodexLoginModal.vue
index f279b5d..310f209 100644
--- a/packages/client/src/components/hermes/models/CodexLoginModal.vue
+++ b/packages/client/src/components/hermes/models/CodexLoginModal.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
@@ -219,15 +219,15 @@ startLogin()
 }
 
 .codex-login__state--success {
-  color: #18a058;
+  color: var(--success);
 
   svg {
-    stroke: #18a058;
+    stroke: var(--success);
   }
 }
 
 .codex-login__error {
-  color: #d03050;
+  color: var(--error);
   text-align: center;
   font-size: 13px;
 }
diff --git a/packages/client/src/components/hermes/models/CombinationModelsPanel.vue b/packages/client/src/components/hermes/models/CombinationModelsPanel.vue
index df43c9e..91e8351 100644
--- a/packages/client/src/components/hermes/models/CombinationModelsPanel.vue
+++ b/packages/client/src/components/hermes/models/CombinationModelsPanel.vue
@@ -275,49 +275,49 @@ watch(() => profilesStore.activeProfileName, () => {
 </script>
 
 <template>
-  <section class="combination-models-panel">
-    <div class="combination-header">
-      <div>
-        <h3>{{ t('models.combinationTitle') }}</h3>
-        <p>{{ t('models.combinationSubtitle') }}</p>
-      </div>
-      <div class="combination-header-actions">
-        <a-button size="small" type="text" :loading="loading" @click="loadMoaConfig">
+  <section class="cy-panel combination-models-panel">
+    <div class="cy-panel-h">
+      <h3>{{ t('models.combinationTitle') }}</h3>
+      <span class="cy-meta">{{ t('models.combinationSubtitle') }}</span>
+      <div class="cy-panel-actions combination-header-actions">
+        <a-button size="mini" type="text" :loading="loading" @click="loadMoaConfig">
           {{ t('models.auxiliaryRefresh') }}
         </a-button>
-        <a-button size="small" type="primary" :disabled="!moa" @click="openCreateModal">
+        <a-button size="mini" type="primary" :disabled="!moa" @click="openCreateModal">
           {{ t('models.combinationAddModel') }}
         </a-button>
       </div>
     </div>
 
-    <a-spin :loading="loading">
-      <div class="combination-table">
-        <div class="combination-row combination-row-head">
-          <span>{{ t('models.combinationName') }}</span>
-          <span>{{ t('models.combinationReferenceModels') }}</span>
-          <span>{{ t('models.combinationAggregator') }}</span>
-          <span>{{ t('models.auxiliaryActions') }}</span>
+    <div class="cy-panel-b flush">
+      <a-spin :loading="loading">
+        <div class="combination-table">
+          <div class="combination-row combination-row-head">
+            <span>{{ t('models.combinationName') }}</span>
+            <span>{{ t('models.combinationReferenceModels') }}</span>
+            <span>{{ t('models.combinationAggregator') }}</span>
+            <span>{{ t('models.auxiliaryActions') }}</span>
+          </div>
+          <div v-for="{ name, preset } in presetRows" :key="name" class="combination-row">
+            <span class="preset-name">
+              {{ name }}
+              <span v-if="moa?.default_preset === name" class="default-badge">{{ t('models.defaultShort') }}</span>
+            </span>
+            <span class="slot-summary">{{ preset.reference_models.map(slotLabel).join(', ') }}</span>
+            <span class="slot-summary">{{ slotLabel(preset.aggregator) }}</span>
+            <span class="row-actions">
+              <a-button size="mini" type="text" @click="openEditModal(name)">{{ t('common.edit') }}</a-button>
+              <a-button size="mini" type="text" :disabled="moa?.default_preset === name" @click="setDefaultPreset(name)">
+                {{ t('models.combinationSetDefault') }}
+              </a-button>
+              <a-button size="mini" type="text" :disabled="presetRows.length <= 1" @click="deletePreset(name)">
+                {{ t('common.delete') }}
+              </a-button>
+            </span>
+          </div>
         </div>
-        <div v-for="{ name, preset } in presetRows" :key="name" class="combination-row">
-          <span class="preset-name">
-            {{ name }}
-            <span v-if="moa?.default_preset === name" class="default-badge">{{ t('models.defaultShort') }}</span>
-          </span>
-          <span class="slot-summary">{{ preset.reference_models.map(slotLabel).join(', ') }}</span>
-          <span class="slot-summary">{{ slotLabel(preset.aggregator) }}</span>
-          <span class="row-actions">
-            <a-button size="mini" type="text" @click="openEditModal(name)">{{ t('common.edit') }}</a-button>
-            <a-button size="mini" type="text" :disabled="moa?.default_preset === name" @click="setDefaultPreset(name)">
-              {{ t('models.combinationSetDefault') }}
-            </a-button>
-            <a-button size="mini" type="text" :disabled="presetRows.length <= 1" @click="deletePreset(name)">
-              {{ t('common.delete') }}
-            </a-button>
-          </span>
-        </div>
-      </div>
-    </a-spin>
+      </a-spin>
+    </div>
 
     <a-modal
       v-model:visible="showEditor"
@@ -489,31 +489,7 @@ watch(() => profilesStore.activeProfileName, () => {
 .combination-models-panel {
   --combination-table-min-width: 860px;
 
-  background-color: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-}
-
-.combination-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 14px 16px;
-  border-bottom: 1px solid $border-light;
-
-  h3 {
-    color: $text-primary;
-    font-size: 15px;
-    font-weight: 600;
-    margin: 0 0 4px;
-  }
-
-  p {
-    color: $text-muted;
-    font-size: 12px;
-    margin: 0;
-  }
+  overflow: hidden;
 }
 
 .combination-header-actions,
@@ -789,7 +765,7 @@ watch(() => profilesStore.activeProfileName, () => {
   margin-right: 4px;
   padding: 1px 5px;
   background: $accent-primary;
-  color: #fff;
+  color: var(--text-on-accent);
   font-size: 9px;
   font-weight: 600;
   letter-spacing: 0.03em;
@@ -818,8 +794,8 @@ watch(() => profilesStore.activeProfileName, () => {
   border-radius: 3px;
   margin-right: 4px;
   padding: 1px 5px;
-  background: #d97706;
-  color: #fff;
+  background: $warning;
+  color: var(--text-on-accent);
   font-size: 9px;
   font-weight: 600;
   letter-spacing: 0.03em;
@@ -876,10 +852,6 @@ watch(() => profilesStore.activeProfileName, () => {
     overflow-x: auto;
   }
 
-  .combination-header {
-    min-width: var(--combination-table-min-width);
-  }
-
   .combination-form {
     grid-template-columns: 1fr;
   }
diff --git a/packages/client/src/components/hermes/models/CopilotLoginModal.vue b/packages/client/src/components/hermes/models/CopilotLoginModal.vue
index 3b0af5a..5ef1821 100644
--- a/packages/client/src/components/hermes/models/CopilotLoginModal.vue
+++ b/packages/client/src/components/hermes/models/CopilotLoginModal.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
@@ -221,15 +221,15 @@ startLogin()
 }
 
 .copilot-login__state--success {
-  color: #18a058;
+  color: var(--success);
 
   svg {
-    stroke: #18a058;
+    stroke: var(--success);
   }
 }
 
 .copilot-login__error {
-  color: #d03050;
+  color: var(--error);
   text-align: center;
   font-size: 13px;
 }
diff --git a/packages/client/src/components/hermes/models/GeminiLoginModal.vue b/packages/client/src/components/hermes/models/GeminiLoginModal.vue
index 3239e5f..bf80cd7 100644
--- a/packages/client/src/components/hermes/models/GeminiLoginModal.vue
+++ b/packages/client/src/components/hermes/models/GeminiLoginModal.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
@@ -164,15 +164,15 @@ startLogin()
 }
 
 .oauth-login__state--success {
-  color: #18a058;
+  color: var(--success);
 
   svg {
-    stroke: #18a058;
+    stroke: var(--success);
   }
 }
 
 .oauth-login__error {
-  color: #d03050;
+  color: var(--error);
   text-align: center;
   word-break: break-word;
 }
diff --git a/packages/client/src/components/hermes/models/NousLoginModal.vue b/packages/client/src/components/hermes/models/NousLoginModal.vue
index 333d42b..f718d91 100644
--- a/packages/client/src/components/hermes/models/NousLoginModal.vue
+++ b/packages/client/src/components/hermes/models/NousLoginModal.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
@@ -221,15 +221,15 @@ startLogin()
 }
 
 .nous-login__state--success {
-  color: #18a058;
+  color: var(--success);
 
   svg {
-    stroke: #18a058;
+    stroke: var(--success);
   }
 }
 
 .nous-login__error {
-  color: #d03050;
+  color: var(--error);
   text-align: center;
   font-size: 13px;
 }
diff --git a/packages/client/src/components/hermes/models/ProviderCard.vue b/packages/client/src/components/hermes/models/ProviderCard.vue
index bbcb56e..30926f6 100644
--- a/packages/client/src/components/hermes/models/ProviderCard.vue
+++ b/packages/client/src/components/hermes/models/ProviderCard.vue
@@ -231,52 +231,62 @@ async function handleDelete() {
 </script>
 
 <template>
-  <div class="provider-card">
-    <div class="card-header">
+  <div class="cy-panel provider-card">
+    <div class="cy-panel-h">
       <h3 class="provider-name">{{ displayName }}</h3>
-      <div class="provider-badges">
-        <span v-if="isDefaultProvider" class="type-badge default">{{ t('models.currentDefault') }}</span>
-        <span class="type-badge" :class="isCustom ? 'custom' : 'builtin'">
-          {{ isCustom ? t('models.customType') : t('models.builtIn') }}
-        </span>
+      <span class="cy-tag">{{ isCustom ? t('models.customType') : t('models.builtIn') }}</span>
+      <div class="cy-panel-actions card-header-actions">
+        <span v-if="isDefaultProvider" class="cy-tag acc">{{ t('models.currentDefault') }}</span>
+        <a-button
+          v-else
+          size="mini"
+          type="text"
+          :loading="defaultingProvider"
+          @click="handleSetDefaultProvider"
+        >
+          {{ t('models.setDefaultProvider') }}
+        </a-button>
       </div>
     </div>
 
-    <div class="card-body">
-      <div class="info-row">
-        <span class="info-label">{{ t('models.provider') }}</span>
-        <code class="info-value mono">{{ provider.provider }}</code>
-      </div>
-      <div class="info-row">
-        <span class="info-label">{{ t('models.baseUrl') }}</span>
-        <code class="info-value mono">{{ provider.base_url }}</code>
-      </div>
-      <div class="info-row models-row">
-        <span class="info-label">{{ t('models.models') }}</span>
-        <span class="info-value models-count">
-          {{ isFiltered ? visibleCountLabel : provider.models.length }} {{ t('models.count') }}
-        </span>
-      </div>
-      <div class="default-model-row">
-        <span class="info-label">{{ t('models.defaultModel') }}</span>
-        <a-select
-          class="default-model-select"
-          size="mini"
-          allow-search
-          :model-value="defaultModelSelectValue ?? undefined"
-          :options="defaultModelOptions"
-          :placeholder="t('models.selectModel')"
-          :disabled="provider.models.length === 0"
-          :loading="defaultingModel !== null"
-          @change="handleSetDefaultModel($event as string | null)"
-        />
+    <div class="cy-panel-b">
+      <div class="cy-kv">
+        <div class="cy-kr">
+          <span class="cy-kk">{{ t('models.provider') }}</span>
+          <span class="cy-kv-v"><code class="cy-code">{{ provider.provider }}</code></span>
+        </div>
+        <div class="cy-kr">
+          <span class="cy-kk">{{ t('models.baseUrl') }}</span>
+          <span class="cy-kv-v"><code class="cy-code">{{ provider.base_url }}</code></span>
+        </div>
+        <div class="cy-kr">
+          <span class="cy-kk">{{ t('models.models') }}</span>
+          <span class="cy-kv-v">{{ isFiltered ? visibleCountLabel : provider.models.length }} {{ t('models.count') }}</span>
+        </div>
+        <div class="cy-kr">
+          <span class="cy-kk">{{ t('models.defaultModel') }}</span>
+          <span class="cy-kv-v">
+            <a-select
+              class="default-model-select"
+              size="mini"
+              allow-search
+              :model-value="defaultModelSelectValue ?? undefined"
+              :options="defaultModelOptions"
+              :placeholder="t('models.selectModel')"
+              :disabled="provider.models.length === 0"
+              :loading="defaultingModel !== null"
+              @change="handleSetDefaultModel($event as string | null)"
+            />
+          </span>
+        </div>
       </div>
+
       <div class="models-list">
         <button
           v-for="model in previewModels"
           :key="model"
-          class="model-tag model-tag-button"
-          :class="{ default: isDefaultModel(model) }"
+          class="cy-tag model-tag"
+          :class="{ acc: isDefaultModel(model) }"
           type="button"
           :title="t('models.aliasTitleFor', { model })"
           @click="openAliasEditor(model)"
@@ -285,22 +295,13 @@ async function handleDelete() {
           <span v-if="isDefaultModel(model)" class="model-tag-default">{{ t('models.defaultShort') }}</span>
           <span v-if="modelAlias(model)" class="model-tag-id">{{ model }}</span>
         </button>
-        <span v-if="hiddenModelCount > 0" class="model-tag model-tag-more">
+        <span v-if="hiddenModelCount > 0" class="cy-tag model-tag-more">
           +{{ hiddenModelCount }} {{ t('models.more') }}
         </span>
       </div>
     </div>
 
-    <div class="card-actions">
-      <a-button
-        size="mini"
-        type="text"
-        :disabled="isDefaultProvider"
-        :loading="defaultingProvider"
-        @click="handleSetDefaultProvider"
-      >
-        {{ isDefaultProvider ? t('models.currentDefault') : t('models.setDefaultProvider') }}
-      </a-button>
+    <div class="cy-panel-b card-actions">
       <a-button size="mini" type="text" @click="showAliasListModal = true">{{ t('models.aliasManage') }}</a-button>
       <a-button size="mini" type="text" @click="openVisibilityModal">{{ t('models.manageVisibleModels') }}</a-button>
       <a-button size="mini" type="text" status="danger" :loading="deleting" @click="handleDelete">{{ destructiveActionLabel }}</a-button>
@@ -401,10 +402,6 @@ async function handleDelete() {
 @use '@/styles/variables' as *;
 
 .provider-card {
-  background-color: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  padding: 16px;
   transition: border-color $transition-fast;
 
   &:hover {
@@ -412,108 +409,11 @@ async function handleDelete() {
   }
 }
 
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
 .provider-name {
-  font-size: 15px;
-  font-weight: 600;
-  color: $text-primary;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 70%;
-}
-
-.provider-badges {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 6px;
-  min-width: 0;
-}
-
-.type-badge {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: 500;
-  white-space: nowrap;
-
-  &.builtin {
-    background: rgba(var(--accent-primary-rgb), 0.12);
-    color: $accent-primary;
-  }
-
-  &.custom {
-    background: rgba(var(--success-rgb), 0.12);
-    color: $success;
-  }
-
-  &.default {
-    background: rgba(var(--warning-rgb), 0.14);
-    color: $warning;
-  }
-}
-
-.card-body {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 14px;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.info-label {
-  font-size: 12px;
-  color: $text-muted;
-}
-
-.info-value {
-  font-size: 12px;
-  color: $text-secondary;
-}
-
-.mono {
-  font-family: $font-code;
-  font-size: 12px;
-}
-
-.models-row {
-  margin-top: 4px;
-}
-
-.models-count {
-  color: $text-muted;
-  font-size: 12px;
-}
-
-.models-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 6px;
-  margin-top: 6px;
-  height: 100px;
-  overflow-y: auto;
-  align-content: flex-start;
-}
-
-.default-model-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 2px;
-  min-width: 0;
+  max-width: 52%;
 }
 
 .default-model-select {
@@ -521,45 +421,36 @@ async function handleDelete() {
   min-width: 0;
 }
 
-.model-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  min-height: 22px;
-  font-size: 10px;
-  font-family: $font-code;
-  padding: 2px 6px;
-  border-radius: 3px;
-  background: rgba(var(--accent-primary-rgb), 0.08);
-  color: $text-secondary;
-  white-space: nowrap;
-  max-width: 260px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &-more {
-    background: rgba(var(--accent-primary-rgb), 0.15);
-    color: $accent-primary;
-    font-weight: 500;
-  }
-
-  &.default {
-    background: rgba(var(--warning-rgb), 0.14);
-    color: $text-primary;
-  }
+.models-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  margin-top: 12px;
+  max-height: 100px;
+  overflow-y: auto;
+  align-content: flex-start;
 }
 
-.model-tag-button {
-  border: 0;
+.model-tag {
+  max-width: 260px;
+  height: auto;
+  min-height: 20px;
+  padding: 2px 6px;
   cursor: pointer;
   text-align: left;
 
   &:hover {
-    background: rgba(var(--accent-primary-rgb), 0.16);
     color: $text-primary;
+    border-color: rgba(var(--accent-primary-rgb), 0.45);
   }
 }
 
+.model-tag-more {
+  color: $accent-primary;
+  border-color: rgba(var(--accent-primary-rgb), 0.35);
+  background: var(--accent-soft);
+}
+
 .model-tag-name,
 .model-tag-id {
   overflow: hidden;
@@ -567,8 +458,8 @@ async function handleDelete() {
 }
 
 .model-tag-id {
-  color: $text-muted;
-  font-size: 9px;
+  color: $text-faint;
+  font-size: 9.5px;
 }
 
 .model-tag-default,
@@ -583,8 +474,8 @@ async function handleDelete() {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  padding: 9px 12px;
   border-top: 1px solid $border-light;
-  padding-top: 10px;
 }
 
 .alias-list-hint,
diff --git a/packages/client/src/components/hermes/models/ProvidersPanel.vue b/packages/client/src/components/hermes/models/ProvidersPanel.vue
index 7955953..7b060d8 100644
--- a/packages/client/src/components/hermes/models/ProvidersPanel.vue
+++ b/packages/client/src/components/hermes/models/ProvidersPanel.vue
@@ -16,7 +16,7 @@ const modelsStore = useModelsStore()
     </svg>
     <p>{{ t('models.noProviders') }}</p>
   </div>
-  <div v-else class="providers-grid">
+  <div v-else class="cy-grid2 providers-grid">
     <ProviderCard
       v-for="g in modelsStore.providers"
       :key="g.provider"
@@ -47,8 +47,11 @@ const modelsStore = useModelsStore()
 }
 
 .providers-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
-  gap: 14px;
+  align-items: start;
+
+  // .cy-panel 的相邻兄弟上边距在网格里会错行
+  :deep(.cy-panel + .cy-panel) {
+    margin-top: 0;
+  }
 }
 </style>
diff --git a/packages/client/src/components/hermes/models/XaiOAuthLoginModal.vue b/packages/client/src/components/hermes/models/XaiOAuthLoginModal.vue
index db9f765..c274379 100644
--- a/packages/client/src/components/hermes/models/XaiOAuthLoginModal.vue
+++ b/packages/client/src/components/hermes/models/XaiOAuthLoginModal.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
@@ -165,15 +165,15 @@ startLogin()
 }
 
 .xai-login__state--success {
-  color: #18a058;
+  color: var(--success);
 
   svg {
-    stroke: #18a058;
+    stroke: var(--success);
   }
 }
 
 .xai-login__error {
-  color: #d03050;
+  color: var(--error);
   text-align: center;
   word-break: break-word;
 }
diff --git a/packages/client/src/components/hermes/profiles/ProfileCard.vue b/packages/client/src/components/hermes/profiles/ProfileCard.vue
index cd35865..2e672fd 100644
--- a/packages/client/src/components/hermes/profiles/ProfileCard.vue
+++ b/packages/client/src/components/hermes/profiles/ProfileCard.vue
@@ -108,88 +108,99 @@ function handleEditConfig() {
 </script>
 
 <template>
-  <div class="profile-card" :class="{ active: profile.active }">
-    <div class="card-header">
-      <div class="profile-title">
-        <ProfileAvatar :name="profile.name" :avatar="profile.avatar" :size="28" />
-        <h3 class="profile-name">{{ profile.name }}</h3>
-      </div>
-      <a-tag v-if="profile.active" size="small" color="green" :bordered="false">
-        {{ t('profiles.active') }}
-      </a-tag>
-    </div>
-
-    <div class="card-body">
-      <div class="info-row">
-        <span class="info-label">{{ t('profiles.model') }}</span>
-        <code class="info-value mono">{{ profile.model }}</code>
+  <div class="cy-panel profile-card" :class="{ active: profile.active }">
+    <div class="cy-panel-h">
+      <span class="cy-led" :class="profile.active ? 'ok' : 'idle'" />
+      <ProfileAvatar :name="profile.name" :avatar="profile.avatar" :size="22" />
+      <h3 class="profile-name">{{ profile.name }}</h3>
+      <span v-if="profile.alias" class="cy-meta">{{ profile.alias }}</span>
+      <div class="cy-panel-actions">
+        <span v-if="profile.active" class="cy-tag ok">{{ t('profiles.active') }}</span>
+        <a-button size="mini" type="text" @click="handleEditConfig">
+          {{ t('profiles.editConfig') }}
+        </a-button>
+        <a-button
+          v-if="!profile.active"
+          size="mini"
+          :loading="switching"
+          type="text"
+          @click="handleSwitch"
+        >
+          {{ t('profiles.switchTo') }}
+        </a-button>
+        <a-button
+          size="mini"
+          type="text"
+          status="danger"
+          :disabled="isDefault || profile.active"
+          @click="handleDelete"
+        >
+          {{ t('common.delete') }}
+        </a-button>
+        <a-button size="mini" type="text" :loading="exporting" @click="handleExport">
+          {{ t('profiles.export') }}
+        </a-button>
       </div>
     </div>
 
-    <div class="card-detail-toggle" @click="toggleDetail">
-      <svg
-        width="14" height="14" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-        class="toggle-icon"
-        :class="{ expanded }"
-      >
-        <polyline points="6 9 12 15 18 9" />
-      </svg>
-      <span class="toggle-text">{{ expanded ? t('common.collapse') : t('common.expand') }}</span>
-    </div>
+    <div class="cy-panel-b">
+      <div class="cy-kv">
+        <div class="cy-kr">
+          <span class="cy-kk">{{ t('profiles.name') }}</span>
+          <span class="cy-kv-v"><code class="cy-code">{{ profile.name }}</code></span>
+        </div>
+        <div class="cy-kr">
+          <span class="cy-kk">{{ t('profiles.model') }}</span>
+          <span class="cy-kv-v"><span class="cy-tag acc">{{ profile.model }}</span></span>
+        </div>
+        <div v-if="profile.gatewayStatus" class="cy-kr">
+          <span class="cy-kk">{{ t('profiles.gateway') }}</span>
+          <span class="cy-kv-v">{{ profile.gatewayStatus }}</span>
+        </div>
+      </div>
 
-    <div v-if="expanded" class="card-detail">
-      <a-spin :loading="detailLoading" :size="28">
-        <template v-if="detail">
-          <div class="info-row">
-            <span class="info-label">{{ t('profiles.provider') }}</span>
-            <span class="info-value">{{ detail.provider }}</span>
-          </div>
-          <div class="info-row">
-            <span class="info-label">{{ t('profiles.path') }}</span>
-            <code class="info-value mono detail-path">{{ detail.path }}</code>
-          </div>
-          <div class="info-row">
-            <span class="info-label">{{ t('profiles.skills') }}</span>
-            <span class="info-value">{{ detail.skills }}</span>
-          </div>
-          <div class="info-row">
-            <span class="info-label">{{ t('profiles.hasEnv') }}</span>
-            <span class="info-value">{{ detail.hasEnv ? 'Yes' : 'No' }}</span>
-          </div>
-          <div class="info-row">
-            <span class="info-label">{{ t('profiles.hasSoulMd') }}</span>
-            <span class="info-value">{{ detail.hasSoulMd ? 'Yes' : 'No' }}</span>
-          </div>
-        </template>
-      </a-spin>
-    </div>
+      <div class="card-detail-toggle" @click="toggleDetail">
+        <svg
+          width="14" height="14" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="toggle-icon"
+          :class="{ expanded }"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+        <span class="toggle-text">{{ expanded ? t('common.collapse') : t('common.expand') }}</span>
+      </div>
 
-    <div class="card-actions">
-      <a-button size="mini" type="text" @click="handleEditConfig">
-        {{ t('profiles.editConfig') }}
-      </a-button>
-      <a-button
-        v-if="!profile.active"
-        size="mini"
-        :loading="switching"
-        type="text"
-        @click="handleSwitch"
-      >
-        {{ t('profiles.switchTo') }}
-      </a-button>
-      <a-button
-        size="mini"
-        type="text"
-        status="danger"
-        :disabled="isDefault || profile.active"
-        @click="handleDelete"
-      >
-        {{ t('common.delete') }}
-      </a-button>
-      <a-button size="mini" type="text" :loading="exporting" @click="handleExport">
-        {{ t('profiles.export') }}
-      </a-button>
+      <div v-if="expanded" class="detail-kv">
+        <a-spin :loading="detailLoading" :size="28">
+          <div v-if="detail" class="cy-kv">
+            <div class="cy-kr">
+              <span class="cy-kk">{{ t('profiles.provider') }}</span>
+              <span class="cy-kv-v">{{ detail.provider }}</span>
+            </div>
+            <div class="cy-kr">
+              <span class="cy-kk">{{ t('profiles.path') }}</span>
+              <span class="cy-kv-v"><code class="cy-code detail-path">{{ detail.path }}</code></span>
+            </div>
+            <div class="cy-kr">
+              <span class="cy-kk">{{ t('profiles.skills') }}</span>
+              <span class="cy-kv-v">{{ detail.skills }}</span>
+            </div>
+            <div class="cy-kr">
+              <span class="cy-kk">{{ t('profiles.hasEnv') }}</span>
+              <span class="cy-kv-v">
+                <span class="cy-tag" :class="{ ok: detail.hasEnv }">{{ detail.hasEnv ? 'Yes' : 'No' }}</span>
+              </span>
+            </div>
+            <div class="cy-kr">
+              <span class="cy-kk">{{ t('profiles.hasSoulMd') }}</span>
+              <span class="cy-kv-v">
+                <span class="cy-tag" :class="{ ok: detail.hasSoulMd }">{{ detail.hasSoulMd ? 'Yes' : 'No' }}</span>
+              </span>
+            </div>
+          </div>
+        </a-spin>
+      </div>
     </div>
   </div>
 </template>
@@ -198,10 +209,6 @@ function handleEditConfig() {
 @use '@/styles/variables' as *;
 
 .profile-card {
-  background-color: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  padding: 16px;
   transition: border-color $transition-fast;
 
   &:hover {
@@ -213,47 +220,21 @@ function handleEditConfig() {
   }
 }
 
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 12px;
-}
-
-.profile-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
 .profile-name {
-  font-size: 15px;
-  font-weight: 600;
-  color: $text-primary;
+  max-width: 40%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
-  margin: 0;
-}
-
-.card-body {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 8px;
 }
 
 .card-detail-toggle {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 6px 0;
+  padding: 10px 0 0;
   cursor: pointer;
   color: $text-muted;
-  font-size: 12px;
+  font-size: 11.5px;
   user-select: none;
 
   &:hover {
@@ -269,49 +250,12 @@ function handleEditConfig() {
   }
 }
 
-.card-detail {
-  padding: 8px 0;
-  border-top: 1px solid $border-light;
-  margin-bottom: 8px;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 2px 0;
-}
-
-.info-label {
-  font-size: 12px;
-  color: $text-muted;
-  flex-shrink: 0;
-  margin-right: 12px;
-}
-
-.info-value {
-  font-size: 12px;
-  color: $text-secondary;
-  text-align: right;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mono {
-  font-family: $font-code;
-  font-size: 12px;
+.detail-kv {
+  margin-top: 8px;
 }
 
 .detail-path {
-  max-width: 260px;
+  max-width: 100%;
 }
 
-.card-actions {
-  display: flex;
-  gap: 8px;
-  border-top: 1px solid $border-light;
-  padding-top: 10px;
-  flex-wrap: wrap;
-}
 </style>
diff --git a/packages/client/src/components/hermes/profiles/ProfileCreateModal.vue b/packages/client/src/components/hermes/profiles/ProfileCreateModal.vue
index ebeff61..060623b 100644
--- a/packages/client/src/components/hermes/profiles/ProfileCreateModal.vue
+++ b/packages/client/src/components/hermes/profiles/ProfileCreateModal.vue
@@ -135,11 +135,3 @@ function handleClose() {
   }
 }
 </style>
-
-<style scoped lang="scss">
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-</style>
diff --git a/packages/client/src/components/hermes/profiles/ProfilesPanel.vue b/packages/client/src/components/hermes/profiles/ProfilesPanel.vue
index 2a1e3e9..77d92e9 100644
--- a/packages/client/src/components/hermes/profiles/ProfilesPanel.vue
+++ b/packages/client/src/components/hermes/profiles/ProfilesPanel.vue
@@ -17,7 +17,7 @@ const profilesStore = useProfilesStore()
     </svg>
     <p>{{ t('profiles.noProfiles') }}</p>
   </div>
-  <div v-else class="profiles-grid">
+  <div v-else class="cy-grid2 profiles-grid">
     <ProfileCard
       v-for="p in profilesStore.profiles"
       :key="p.name"
@@ -49,8 +49,11 @@ const profilesStore = useProfilesStore()
 }
 
 .profiles-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
-  gap: 14px;
+  align-items: start;
+
+  // .cy-panel 的相邻兄弟上边距在网格里会错行
+  :deep(.cy-panel + .cy-panel) {
+    margin-top: 0;
+  }
 }
 </style>
diff --git a/packages/client/src/components/hermes/settings/AccountSettings.vue b/packages/client/src/components/hermes/settings/AccountSettings.vue
index 2109331..c8b8a96 100644
--- a/packages/client/src/components/hermes/settings/AccountSettings.vue
+++ b/packages/client/src/components/hermes/settings/AccountSettings.vue
@@ -361,7 +361,7 @@ onMounted(() => { loadLockedIps(); });
 }
 
 .section-desc {
-  font-size: 13px;
+  font-size: 12.5px;
   color: $text-muted;
   margin: 0 0 20px;
   line-height: 1.6;
@@ -375,7 +375,7 @@ onMounted(() => { loadLockedIps(); });
 }
 
 .action-label {
-  font-size: 14px;
+  font-size: 12.5px;
   color: $text-secondary;
 }
 
@@ -393,6 +393,11 @@ onMounted(() => { loadLockedIps(); });
 
 .section-title {
   margin: 0 0 12px;
+  font-family: $font-code;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: $text-primary;
 }
 
 .locked-list {
@@ -401,43 +406,59 @@ onMounted(() => { loadLockedIps(); });
   gap: 8px;
 }
 
+// 锁定条目：原型 .row-i —— 卡面 + 发丝线边。
 .locked-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 12px;
+  gap: 12px;
+  padding: 9px 12px;
   border: 1px solid $border-color;
   border-radius: $radius-sm;
-  background: $bg-input;
+  background: $bg-card;
+  transition: border-color $transition-fast;
+
+  &:hover {
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
+  }
 }
 
 .locked-info {
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
 }
 
 .locked-ip {
   font-family: $font-code;
-  font-size: 13px;
+  font-size: 12.5px;
   color: $text-primary;
 }
 
+// 锁定类型徽标：原型 .tag.err —— 发丝线底 + 红色字。
 .locked-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 4px;
+  border: 1px solid rgba(var(--error-rgb), 0.35);
+  background: rgba(var(--error-rgb), 0.1);
+  font-family: $font-code;
   font-size: 11px;
-  padding: 2px 6px;
-  border-radius: 3px;
-  background: rgba($error, 0.1);
+  line-height: 1;
   color: $error;
 }
 
 .locked-ttl {
-  font-size: 12px;
-  color: $text-muted;
+  font-family: $font-code;
+  font-size: 11px;
+  color: $text-faint;
 }
 
 .empty-hint {
-  font-size: 13px;
+  font-size: 12.5px;
   color: $text-muted;
   margin: 0;
 }
diff --git a/packages/client/src/components/hermes/settings/GithubPreviewSettings.vue b/packages/client/src/components/hermes/settings/GithubPreviewSettings.vue
index 5bfc3e7..5c8bb72 100644
--- a/packages/client/src/components/hermes/settings/GithubPreviewSettings.vue
+++ b/packages/client/src/components/hermes/settings/GithubPreviewSettings.vue
@@ -218,85 +218,107 @@ watch(
 <template>
   <div class="github-preview-settings">
     <div class="settings-section">
-      <div class="control-row">
-        <a-select
-          v-model="selectedTag"
-          class="tag-select"
-          allow-search
-          :loading="tagsLoading"
-          :options="tagOptions"
-          :placeholder="t('githubPreview.selectTag')"
-        />
-        <a-space>
-          <a-button type="primary" :loading="activeAction === 'prepare'" :disabled="hasActiveAction || !selectedTag" @click="handlePrepare">
-            {{ t('githubPreview.prepare') }}
-          </a-button>
-          <a-button :loading="activeAction === 'install'" :disabled="hasActiveAction || !status?.has_package" @click="handleInstall">
-            {{ t('githubPreview.install') }}
-          </a-button>
-          <a-button type="primary" status="success" :loading="activeAction === 'start'" :disabled="hasActiveAction || !status?.installed" @click="handleStart">
-            {{ t('githubPreview.start') }}
-          </a-button>
-          <a-button :loading="activeAction === 'stop'" :disabled="hasActiveAction || !status?.running" @click="handleStop">
-            {{ t('githubPreview.stop') }}
-          </a-button>
-          <a-button :loading="loading || tagsLoading" @click="handleRefresh">
-            {{ t('githubPreview.refresh') }}
-          </a-button>
-        </a-space>
+      <div class="cy-panel">
+        <div class="cy-panel-h">
+          <h3>{{ t('githubPreview.title') }}</h3>
+          <span class="cy-meta">{{ status?.current_tag || '-' }}</span>
+        </div>
+        <div class="cy-panel-b">
+          <div class="control-row">
+            <a-select
+              v-model="selectedTag"
+              class="tag-select"
+              allow-search
+              :loading="tagsLoading"
+              :options="tagOptions"
+              :placeholder="t('githubPreview.selectTag')"
+            />
+            <a-space>
+              <a-button type="primary" :loading="activeAction === 'prepare'" :disabled="hasActiveAction || !selectedTag" @click="handlePrepare">
+                {{ t('githubPreview.prepare') }}
+              </a-button>
+              <a-button :loading="activeAction === 'install'" :disabled="hasActiveAction || !status?.has_package" @click="handleInstall">
+                {{ t('githubPreview.install') }}
+              </a-button>
+              <a-button type="primary" status="success" :loading="activeAction === 'start'" :disabled="hasActiveAction || !status?.installed" @click="handleStart">
+                {{ t('githubPreview.start') }}
+              </a-button>
+              <a-button :loading="activeAction === 'stop'" :disabled="hasActiveAction || !status?.running" @click="handleStop">
+                {{ t('githubPreview.stop') }}
+              </a-button>
+              <a-button :loading="loading || tagsLoading" @click="handleRefresh">
+                {{ t('githubPreview.refresh') }}
+              </a-button>
+            </a-space>
+          </div>
+
+          <p class="section-description">{{ t('githubPreview.description') }}</p>
+
+          <a-alert type="info" class="preview-note">
+            {{ t('githubPreview.note') }}
+          </a-alert>
+        </div>
       </div>
 
-      <p class="section-description">{{ t('githubPreview.description') }}</p>
-
-      <a-alert type="info" class="preview-note">
-        {{ t('githubPreview.note') }}
-      </a-alert>
-
-      <a-descriptions v-if="status" :column="1" bordered size="small" class="status-table">
-        <a-descriptions-item :label="t('githubPreview.path')">
-          <code>{{ status.preview_dir }}</code>
-        </a-descriptions-item>
-        <a-descriptions-item :label="t('githubPreview.webuiHome')">
-          <code>{{ status.webui_home }}</code>
-        </a-descriptions-item>
-        <a-descriptions-item :label="t('githubPreview.currentTag')">
-          {{ status.current_tag || '-' }}
-        </a-descriptions-item>
-        <a-descriptions-item :label="t('githubPreview.repoReady')">
-          <a-tag size="small" :color="status.has_package ? 'green' : 'gray'">
-            {{ status.has_package ? t('githubPreview.yes') : t('githubPreview.no') }}
-          </a-tag>
-        </a-descriptions-item>
-        <a-descriptions-item :label="t('githubPreview.dependencies')">
-          <a-tag size="small" :color="status.installed ? 'green' : 'orange'">
-            {{ status.installed ? t('githubPreview.yes') : t('githubPreview.no') }}
-          </a-tag>
-        </a-descriptions-item>
-        <a-descriptions-item :label="t('githubPreview.running')">
-          <a-tag size="small" :color="status.running ? 'green' : 'gray'">
-            {{ status.running ? `PID ${status.pid}` : t('githubPreview.notRunning') }}
-          </a-tag>
-        </a-descriptions-item>
-        <a-descriptions-item :label="t('githubPreview.open')">
-          <a :href="status.frontend_url" target="_blank" rel="noopener noreferrer">{{ status.frontend_url }}</a>
-        </a-descriptions-item>
-        <a-descriptions-item :label="t('githubPreview.log')">
-          <code>{{ status.action_log_path }}</code>
-        </a-descriptions-item>
-        <a-descriptions-item :label="t('githubPreview.devLog')">
-          <code>{{ status.dev_log_path }}</code>
-        </a-descriptions-item>
-      </a-descriptions>
-
-      <div class="log-output">
-        <div class="log-output-header">{{ t('githubPreview.logOutput') }}</div>
-        <div class="log-box">
-          <div class="log-title">{{ t('githubPreview.actionLog') }}</div>
-          <pre>{{ actionLog || '-' }}</pre>
+      <div class="cy-panel">
+        <div class="cy-panel-h">
+          <h3>{{ t('githubPreview.path') }}</h3>
+          <span class="cy-meta">{{ status?.running ? `PID ${status.pid}` : t('githubPreview.notRunning') }}</span>
         </div>
-        <div class="log-box">
-          <div class="log-title">{{ t('githubPreview.devLog') }}</div>
-          <pre>{{ devLog || '-' }}</pre>
+        <div class="cy-panel-b">
+          <a-descriptions v-if="status" :column="1" bordered size="small" class="status-table">
+            <a-descriptions-item :label="t('githubPreview.path')">
+              <code>{{ status.preview_dir }}</code>
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('githubPreview.webuiHome')">
+              <code>{{ status.webui_home }}</code>
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('githubPreview.currentTag')">
+              {{ status.current_tag || '-' }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('githubPreview.repoReady')">
+              <a-tag size="small" :color="status.has_package ? 'green' : 'gray'">
+                {{ status.has_package ? t('githubPreview.yes') : t('githubPreview.no') }}
+              </a-tag>
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('githubPreview.dependencies')">
+              <a-tag size="small" :color="status.installed ? 'green' : 'orange'">
+                {{ status.installed ? t('githubPreview.yes') : t('githubPreview.no') }}
+              </a-tag>
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('githubPreview.running')">
+              <a-tag size="small" :color="status.running ? 'green' : 'gray'">
+                {{ status.running ? `PID ${status.pid}` : t('githubPreview.notRunning') }}
+              </a-tag>
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('githubPreview.open')">
+              <a :href="status.frontend_url" target="_blank" rel="noopener noreferrer">{{ status.frontend_url }}</a>
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('githubPreview.log')">
+              <code>{{ status.action_log_path }}</code>
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('githubPreview.devLog')">
+              <code>{{ status.dev_log_path }}</code>
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+      </div>
+
+      <div class="cy-panel">
+        <div class="cy-panel-h">
+          <h3>{{ t('githubPreview.logOutput') }}</h3>
+        </div>
+        <div class="cy-panel-b">
+          <div class="log-output">
+            <div class="log-box">
+              <div class="log-title">{{ t('githubPreview.actionLog') }}</div>
+              <pre>{{ actionLog || '-' }}</pre>
+            </div>
+            <div class="log-box">
+              <div class="log-title">{{ t('githubPreview.devLog') }}</div>
+              <pre>{{ devLog || '-' }}</pre>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -314,13 +336,19 @@ watch(
   display: flex;
   flex-direction: column;
   gap: 16px;
+
+  // 全局 .cy-panel + .cy-panel 已经给了 16px 外边距，这里用 flex gap 统一间距
+  // 避免两层叠加成 32px。
+  > .cy-panel + .cy-panel {
+    margin-top: 0;
+  }
 }
 
 .section-description {
   margin: 0;
-  color: $text-secondary;
-  font-size: 13px;
-  line-height: 1.5;
+  color: $text-muted;
+  font-size: 12.5px;
+  line-height: 1.6;
 }
 
 .control-row {
@@ -344,22 +372,11 @@ watch(
 
 .log-output {
   width: 100%;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  background: $bg-card;
   overflow: hidden;
 }
 
-.log-output-header {
-  padding: 12px 14px;
-  border-bottom: 1px solid $border-color;
-  font-size: 14px;
-  font-weight: 600;
-  color: $text-primary;
-}
-
 .log-box {
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $border-light;
 
   &:last-child {
     border-bottom: none;
@@ -368,9 +385,13 @@ watch(
 
 .log-title {
   padding: 8px 14px;
-  font-size: 12px;
-  color: $text-secondary;
+  font-family: $font-code;
+  font-size: 11px;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: $text-faint;
   background: $bg-secondary;
+  border-bottom: 1px solid $border-light;
 }
 
 pre {
@@ -381,12 +402,17 @@ pre {
   overflow: auto;
   white-space: pre-wrap;
   word-break: break-word;
+  background: $code-bg;
+  font-family: $font-code;
   font-size: 12px;
-  line-height: 1.5;
+  line-height: 1.6;
+  color: $text-secondary;
 }
 
 code {
-  font-size: 12px;
+  font-family: $font-code;
+  font-size: 11.5px;
+  color: $accent-primary;
   word-break: break-all;
 }
 
diff --git a/packages/client/src/components/hermes/settings/ModelSettings.vue b/packages/client/src/components/hermes/settings/ModelSettings.vue
index 7c61006..e3996a7 100644
--- a/packages/client/src/components/hermes/settings/ModelSettings.vue
+++ b/packages/client/src/components/hermes/settings/ModelSettings.vue
@@ -128,43 +128,64 @@ async function handleSaveCustom(providerKey: string) {
 
 .empty-hint {
   padding: 40px 0;
+  text-align: center;
 }
 
+// 提供商卡：原型 .panel —— 发丝线边框 + 小圆角。
 .provider-section {
   border: 1px solid $border-color;
-  border-radius: $radius-md;
-  padding: 16px;
-  margin-bottom: 14px;
+  border-radius: $radius-lg;
+  padding: 13px 14px;
+  margin-bottom: 12px;
   background: $bg-card;
+  transition: border-color $transition-fast;
+
+  &:hover {
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
+  }
 }
 
 .provider-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 10px;
   margin-bottom: 12px;
 }
 
+// 提供商名：原型 .panel-h h3 —— 等宽 + 字距。
 .provider-name {
-  font-size: 14px;
+  font-family: $font-code;
+  font-size: 12.5px;
   font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: 0.04em;
   color: $text-primary;
   margin: 0;
 }
 
+// 类型徽标：原型 .tag —— 发丝线底 + 语义字色。
 .type-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 4px;
+  font-family: $font-code;
   font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 10px;
+  line-height: 1;
   font-weight: 500;
+  white-space: nowrap;
 
   &.builtin {
-    background: rgba(var(--accent-primary-rgb), 0.12);
+    border: 1px solid rgba(var(--accent-primary-rgb), 0.35);
+    background: var(--accent-soft);
     color: $accent-primary;
   }
 
   &.custom {
-    background: rgba(var(--success-rgb), 0.12);
+    border: 1px solid rgba(var(--success-rgb), 0.35);
+    background: rgba(var(--success-rgb), 0.1);
     color: $success;
   }
 }
diff --git a/packages/client/src/components/hermes/settings/PlatformCard.vue b/packages/client/src/components/hermes/settings/PlatformCard.vue
index 7d64a99..558572c 100644
--- a/packages/client/src/components/hermes/settings/PlatformCard.vue
+++ b/packages/client/src/components/hermes/settings/PlatformCard.vue
@@ -38,18 +38,19 @@ const configured = computed(() => {
 </script>
 
 <template>
-  <div class="platform-card" :class="{ configured }">
-    <div class="platform-card-header" @click="expanded = !expanded">
-      <div class="platform-info">
-        <span class="platform-icon" v-html="icon" />
-        <span class="platform-name">{{ name }}</span>
-        <a-tag :color="configured ? 'green' : 'gray'" size="small">
-          {{ configured ? t('common.configured') : t('common.notConfigured') }}
-        </a-tag>
+  <div class="platform-card cy-panel" :class="{ configured }">
+    <div class="platform-card-header cy-panel-h" @click="expanded = !expanded">
+      <span class="cy-led" :class="configured ? 'ok' : 'idle'" />
+      <span class="platform-icon" v-html="icon" />
+      <h3>{{ name }}</h3>
+      <span class="cy-tag" :class="configured ? 'ok' : ''">
+        {{ configured ? t('common.configured') : t('common.notConfigured') }}
+      </span>
+      <div class="cy-panel-actions">
+        <span class="expand-icon" :class="{ expanded }">&#9662;</span>
       </div>
-      <span class="expand-icon" :class="{ expanded }">&#9662;</span>
     </div>
-    <div v-if="expanded" class="platform-card-body">
+    <div v-if="expanded" class="platform-card-body cy-panel-b">
       <a-alert v-if="exclusive" type="warning" :show-icon="true" class="exclusive-alert">
         {{ t('platform.exclusiveTokenWarning') }}
       </a-alert>
@@ -62,10 +63,6 @@ const configured = computed(() => {
 @use '@/styles/variables' as *;
 
 .platform-card {
-  background-color: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  margin-bottom: 12px;
   overflow: hidden;
 
   &.configured {
@@ -74,37 +71,22 @@ const configured = computed(() => {
 }
 
 .platform-card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
   cursor: pointer;
   user-select: none;
+  transition: background-color 0.14s ease;
 
   &:hover {
-    background-color: rgba(var(--text-primary-rgb), 0.03);
+    background-color: rgba(var(--accent-primary-rgb), 0.035);
   }
 }
 
-.platform-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
 .platform-icon {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   color: $text-secondary;
   flex-shrink: 0;
 }
 
-.platform-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: $text-primary;
-}
-
 .expand-icon {
   font-size: 12px;
   color: $text-muted;
@@ -120,12 +102,11 @@ const configured = computed(() => {
 }
 
 .platform-card-body {
-  padding: 0 16px 12px;
-  border-top: 1px solid $border-light;
-}
+  padding: 0;
 
-.exclusive-alert {
-  margin: 12px 0 4px;
-  font-size: 12px;
+  .exclusive-alert {
+    margin: 12px 14px 0;
+    font-size: 12px;
+  }
 }
 </style>
diff --git a/packages/client/src/components/hermes/settings/PlatformSettings.vue b/packages/client/src/components/hermes/settings/PlatformSettings.vue
index e458e36..4f874c6 100644
--- a/packages/client/src/components/hermes/settings/PlatformSettings.vue
+++ b/packages/client/src/components/hermes/settings/PlatformSettings.vue
@@ -501,8 +501,11 @@ watch(
 @use '@/styles/variables' as *;
 
 .weixin-qr-section {
-  margin-top: 12px;
-  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 12px 14px 0;
 }
 
 .weixin-qr-loading {
@@ -522,7 +525,7 @@ watch(
   display: flex;
   justify-content: flex-end;
   margin-top: 12px;
-  padding-top: 12px;
+  padding: 12px 14px 14px;
   border-top: 1px solid $border-light;
 }
 </style>
diff --git a/packages/client/src/components/hermes/settings/UserManagementSettings.vue b/packages/client/src/components/hermes/settings/UserManagementSettings.vue
index 8bc8479..2261bca 100644
--- a/packages/client/src/components/hermes/settings/UserManagementSettings.vue
+++ b/packages/client/src/components/hermes/settings/UserManagementSettings.vue
@@ -309,7 +309,7 @@ onMounted(loadUsers)
 }
 
 .section-title {
-  margin: 0 0 10px;
+  margin: 0 0 6px;
   font-family: $font-code;
   font-size: 12.5px;
   font-weight: 600;
@@ -319,7 +319,8 @@ onMounted(loadUsers)
 
 .section-desc {
   margin: 0;
-  font-size: 13px;
+  font-size: 12.5px;
+  line-height: 1.6;
   color: $text-muted;
 }
 
diff --git a/packages/client/src/components/hermes/settings/VoiceSettings.vue b/packages/client/src/components/hermes/settings/VoiceSettings.vue
index 9d2455d..73dc40c 100644
--- a/packages/client/src/components/hermes/settings/VoiceSettings.vue
+++ b/packages/client/src/components/hermes/settings/VoiceSettings.vue
@@ -372,18 +372,21 @@ async function handleCardTest(connection: VoiceApiConnection) {
   min-width: 0;
 }
 
+// 分区标题：原型 .sec-t —— 等宽 + 字距 + 大写。
 .section-title {
   margin: 0 0 6px;
   color: $text-primary;
-  font-size: 15px;
+  font-family: $font-code;
+  font-size: 12.5px;
   font-weight: 600;
+  letter-spacing: 0.04em;
 }
 
 .section-desc {
   margin: 0;
   max-width: 620px;
   color: $text-muted;
-  font-size: 13px;
+  font-size: 12.5px;
   line-height: 1.6;
 }
 
diff --git a/packages/client/src/components/hermes/settings/voice/ProviderMetaItem.vue b/packages/client/src/components/hermes/settings/voice/ProviderMetaItem.vue
index f7255e9..cef1295 100644
--- a/packages/client/src/components/hermes/settings/voice/ProviderMetaItem.vue
+++ b/packages/client/src/components/hermes/settings/voice/ProviderMetaItem.vue
@@ -24,9 +24,12 @@ defineProps<{
 }
 
 dt {
-  color: $text-muted;
-  font-size: 11px;
+  color: $text-faint;
+  font-family: $font-code;
+  font-size: 10.5px;
   line-height: 1.4;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
   white-space: nowrap;
 }
 
@@ -34,7 +37,8 @@ dd {
   min-width: 0;
   margin: 0;
   color: $text-secondary;
-  font-size: 12px;
+  font-family: $font-code;
+  font-size: 11.5px;
   line-height: 1.45;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/client/src/components/hermes/settings/voice/VoiceApiCard.vue b/packages/client/src/components/hermes/settings/voice/VoiceApiCard.vue
index 15e4842..a43e29a 100644
--- a/packages/client/src/components/hermes/settings/voice/VoiceApiCard.vue
+++ b/packages/client/src/components/hermes/settings/voice/VoiceApiCard.vue
@@ -174,7 +174,7 @@ function handleMoreSelect(key: string | number | Record<string, any> | undefined
       </dl>
 
       <div class="provider-control">
-        <a-tag class="status-badge" size="small" :color="statusColor" :bordered="false">
+        <a-tag class="status-badge" size="small" :class="statusColor" :bordered="false">
           {{ statusLabel }}
         </a-tag>
         <div class="card-actions" :aria-label="`${connection.label} actions`">
@@ -242,13 +242,18 @@ function handleMoreSelect(key: string | number | Record<string, any> | undefined
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
 
+// 供应商卡：原型 .tcard —— 发丝线边框 + 小圆角 + 悬停转青。
 .voice-api-card {
   position: relative;
   overflow: hidden;
   border: 1px solid $border-color;
-  border-radius: $radius-md;
+  border-radius: $radius-lg;
   background: $bg-card;
-  transition: background $transition-fast;
+  transition: border-color $transition-fast, background $transition-fast;
+
+  &:hover {
+    border-color: rgba(var(--accent-primary-rgb), 0.35);
+  }
 
   &.active::before {
     content: '';
@@ -284,10 +289,11 @@ function handleMoreSelect(key: string | number | Record<string, any> | undefined
   justify-content: center;
   flex-shrink: 0;
   border: 1px solid $border-color;
-  background: $bg-input;
+  background: $bg-secondary;
   color: $text-secondary;
-  font-size: 13px;
-  font-weight: 700;
+  font-family: $font-code;
+  font-size: 12.5px;
+  font-weight: 600;
 }
 
 .provider-copy {
@@ -305,9 +311,11 @@ function handleMoreSelect(key: string | number | Record<string, any> | undefined
   min-width: 0;
   margin: 0;
   color: $text-primary;
-  font-size: 14px;
+  font-family: $font-code;
+  font-size: 13px;
   font-weight: 600;
-  line-height: 1.35;
+  line-height: 1.3;
+  letter-spacing: 0.03em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -316,6 +324,7 @@ function handleMoreSelect(key: string | number | Record<string, any> | undefined
 .provider-kind {
   flex-shrink: 0;
   color: $text-muted;
+  font-family: $font-code;
   font-size: 11px;
   line-height: 1.35;
 }
@@ -343,8 +352,36 @@ function handleMoreSelect(key: string | number | Record<string, any> | undefined
   min-width: 0;
 }
 
+// 状态标签：原型 .tag —— 发丝线底 + 语义字色。
+// Arco 内置的 green/orange/gray 是另一套色板，这里改成 CYBER 的三色语义。
 .status-badge {
   max-width: 100%;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 4px;
+  font-family: $font-code;
+  font-size: 11px;
+  line-height: 1;
+  background: transparent;
+  border: 1px solid currentColor;
+
+  &.green {
+    color: $success;
+    border-color: rgba(var(--success-rgb), 0.35);
+    background: rgba(var(--success-rgb), 0.1);
+  }
+
+  &.orange {
+    color: $warning;
+    border-color: rgba(var(--warning-rgb), 0.35);
+    background: rgba(var(--warning-rgb), 0.1);
+  }
+
+  &.gray {
+    color: $text-muted;
+    border-color: $border-color;
+    background: $bg-secondary;
+  }
 }
 
 .card-actions {
diff --git a/packages/client/src/components/hermes/settings/voice/VoiceApiFormModal.vue b/packages/client/src/components/hermes/settings/voice/VoiceApiFormModal.vue
index 713ac1e..c130238 100644
--- a/packages/client/src/components/hermes/settings/voice/VoiceApiFormModal.vue
+++ b/packages/client/src/components/hermes/settings/voice/VoiceApiFormModal.vue
@@ -531,7 +531,7 @@ async function handleSave() {
 
 .section-heading small,
 .helper-text {
-  color: var(--color-text-3, #8a8f98);
+  color: var(--color-text-3);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.4;
diff --git a/packages/client/src/components/hermes/skills/SkillDetail.vue b/packages/client/src/components/hermes/skills/SkillDetail.vue
index a803f12..a65c63e 100644
--- a/packages/client/src/components/hermes/skills/SkillDetail.vue
+++ b/packages/client/src/components/hermes/skills/SkillDetail.vue
@@ -140,13 +140,12 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
 <template>
   <div class="skill-detail">
     <!-- Skill title -->
-    <div class="detail-title">
+    <div class="cy-panel-h detail-title">
       <div class="detail-heading">
-        <span class="detail-category">{{ category }}</span>
-        <span class="detail-separator">/</span>
-        <span class="detail-name">{{ skill }}</span>
+        <h3>{{ skill }}</h3>
+        <span class="cy-meta">{{ category }} · {{ target || 'hermes' }}</span>
       </div>
-      <div class="usage-stats">
+      <div class="cy-panel-actions usage-stats">
         <button v-if="!readonly && !viewingFile && !editing" class="detail-action" :title="t('skills.edit')" @click="startEditing">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
           <span>{{ t('skills.edit') }}</span>
@@ -162,16 +161,16 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
         <button v-if="canPin && !readonly" class="pin-toggle" :class="{ active: pinned }" :disabled="pinLoading" :title="pinned ? t('skills.unpin') : t('skills.pin')" @click="handlePinToggle">
           <svg width="16" height="16" viewBox="0 0 24 24" :fill="pinned ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2"><path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z"/></svg>
         </button>
-        <span v-if="viewCount != null" class="usage-stat" title="Views">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+        <span v-if="viewCount != null" class="cy-tag usage-stat" title="Views">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
           {{ viewCount }}
         </span>
-        <span v-if="useCount != null" class="usage-stat" title="Uses">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+        <span v-if="useCount != null" class="cy-tag usage-stat" title="Uses">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
           {{ useCount }}
         </span>
-        <span v-if="patchCount != null" class="usage-stat" title="Patches">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+        <span v-if="patchCount != null" class="cy-tag warn usage-stat" title="Patches">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
           {{ patchCount }}
         </span>
       </div>
@@ -180,6 +179,7 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
     <div v-if="loading && !content" class="detail-loading">{{ t('common.loading') }}</div>
 
     <template v-else>
+      <div class="detail-body">
       <!-- Breadcrumb for file view -->
       <div v-if="viewingFile" class="detail-breadcrumb">
         <button class="back-btn" @click="backToSkill">
@@ -206,7 +206,7 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
 
       <!-- Attached files -->
       <div v-if="!viewingFile && files.length > 0" class="detail-files">
-        <div class="files-header">{{ t('skills.attachedFiles') }}</div>
+        <div class="cy-sec-t files-header">{{ t('skills.attachedFiles') }}</div>
         <div class="files-list">
           <button
             v-for="f in files"
@@ -214,14 +214,15 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
             class="file-item"
             @click="viewFile(f.path)"
           >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
               <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
               <polyline points="14 2 14 8 20 8" />
             </svg>
-            <span>{{ f.path }}</span>
+            <span class="file-path">{{ f.path }}</span>
           </button>
         </div>
       </div>
+      </div>
     </template>
   </div>
 </template>
@@ -230,69 +231,46 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
 @use '@/styles/variables' as *;
 
 .skill-detail {
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
 }
 
 .detail-title {
   flex-shrink: 0;
-  padding-bottom: 12px;
-  border-bottom: 1px solid $border-color;
-  margin-bottom: 12px;
-  font-size: 15px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
 }
 
 .detail-heading {
   display: flex;
-  align-items: center;
+  align-items: baseline;
+  gap: 9px;
   min-width: 0;
   overflow: hidden;
-}
 
-.detail-category {
-  color: $text-muted;
-  font-size: 13px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-separator {
-  color: $text-muted;
-  margin: 0 6px;
-}
-
-.detail-name {
-  color: $text-primary;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  h3 {
+    margin: 0;
+    font-family: $font-code;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    color: $text-primary;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 .usage-stats {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-left: auto;
+  gap: 8px;
   flex-shrink: 0;
 }
 
 .usage-stat {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  font-weight: 500;
-  color: $text-secondary;
-  white-space: nowrap;
-
   svg {
-    opacity: 0.7;
+    opacity: 0.75;
   }
 }
 
@@ -300,30 +278,31 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid transparent;
-  background: none;
-  color: $text-muted;
+  width: 26px;
+  height: 26px;
+  border: 1px solid $border-color;
+  background: $bg-secondary;
+  color: $text-faint;
   cursor: pointer;
-  padding: 4px;
-  border-radius: 6px;
-  opacity: 0.5;
+  padding: 0;
+  border-radius: $radius-sm;
   transition: all $transition-fast;
 
-  &:hover {
-    opacity: 1;
+  &:hover:not(:disabled) {
     color: $accent-primary;
     background: rgba(var(--accent-primary-rgb), 0.08);
-    border-color: rgba(var(--accent-primary-rgb), 0.15);
+    border-color: rgba(var(--accent-primary-rgb), 0.35);
   }
 
   &.active {
-    opacity: 1;
     color: $accent-primary;
+    border-color: rgba(var(--accent-primary-rgb), 0.4);
+    background: var(--accent-soft);
   }
 
   &:disabled {
     cursor: wait;
-    opacity: 0.3;
+    opacity: 0.4;
   }
 }
 
@@ -335,19 +314,21 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
   background: $bg-secondary;
   color: $text-secondary;
   cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 6px;
-  font-size: 12px;
+  padding: 4px 9px;
+  border-radius: $radius-sm;
+  font-family: $font-code;
+  font-size: 11.5px;
   transition: all $transition-fast;
 
   &:hover:not(:disabled) {
-    border-color: $accent-primary;
+    border-color: rgba(var(--accent-primary-rgb), 0.4);
     color: $accent-primary;
+    background: rgba(var(--accent-primary-rgb), 0.07);
   }
 
   &:disabled {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: 0.45;
   }
 }
 
@@ -360,12 +341,20 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
   color: $text-muted;
 }
 
+.detail-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 14px;
+}
+
 .detail-breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 0 12px;
-  border-bottom: 1px solid $border-color;
+  padding: 0 0 10px;
+  border-bottom: 1px solid $border-light;
   margin-bottom: 12px;
   flex-shrink: 0;
 }
@@ -377,7 +366,8 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
   border: none;
   background: none;
   color: $accent-primary;
-  font-size: 13px;
+  font-family: $font-code;
+  font-size: 12px;
   cursor: pointer;
   padding: 2px 6px;
   border-radius: 4px;
@@ -388,8 +378,12 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
 }
 
 .breadcrumb-path {
-  font-size: 13px;
-  color: $text-muted;
+  font-family: $font-code;
+  font-size: 11.5px;
+  color: $text-faint;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .detail-content {
@@ -406,33 +400,28 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
 
 .detail-files {
   flex-shrink: 0;
-  border-top: 1px solid $border-color;
-  padding-top: 12px;
-  margin-top: 12px;
+  border-top: 1px solid $border-light;
+  padding-top: 10px;
+  margin-top: 10px;
   max-height: 30vh;
   overflow-y: auto;
 }
 
 .files-header {
-  font-size: 12px;
-  font-weight: 600;
-  color: $text-muted;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
   margin-bottom: 6px;
 }
 
 .files-list {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   gap: 4px;
 }
 
 .file-item {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
+  gap: 6px;
+  padding: 5px 9px;
   border: 1px solid $border-color;
   border-radius: $radius-sm;
   background: $bg-secondary;
@@ -442,11 +431,19 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
   transition: all $transition-fast;
 
   &:hover {
-    border-color: $accent-primary;
+    border-color: rgba(var(--accent-primary-rgb), 0.35);
     color: $accent-primary;
   }
 }
 
+.file-path {
+  font-family: $font-code;
+  font-size: 11.5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .skill-editor {
   display: block;
   width: 100%;
@@ -455,26 +452,21 @@ watch(() => `${props.target || 'hermes'}/${props.category}/${props.skill}`, load
   resize: none;
   border: 1px solid $border-color;
   border-radius: $radius-sm;
-  background: $bg-primary;
+  background: $code-bg;
   color: $text-primary;
   padding: 12px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  font-size: 13px;
-  line-height: 1.55;
+  font-family: $font-code;
+  font-size: 12.5px;
+  line-height: 1.6;
   outline: none;
 
   &:focus {
-    border-color: $accent-primary;
+    border-color: rgba(var(--accent-primary-rgb), 0.5);
     box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.12);
   }
 }
 
 @media (max-width: $breakpoint-mobile) {
-  .detail-title {
-    align-items: flex-start;
-    flex-wrap: wrap;
-  }
-
   .detail-heading {
     flex: 1 1 100%;
     max-width: 100%;
diff --git a/packages/client/src/components/hermes/skills/SkillExternalDirsModal.vue b/packages/client/src/components/hermes/skills/SkillExternalDirsModal.vue
index b645572..4a034d0 100644
--- a/packages/client/src/components/hermes/skills/SkillExternalDirsModal.vue
+++ b/packages/client/src/components/hermes/skills/SkillExternalDirsModal.vue
@@ -199,9 +199,10 @@ function handleClose() {
   padding: 1px 6px;
   border-radius: 8px;
 
+  // 目录已失效 = 需要你介入 → 琥珀橙
   &.broken {
-    color: #b45309;
-    background: rgba(245, 158, 11, 0.12);
+    color: $warning;
+    background: rgba(var(--warning-rgb), 0.12);
   }
 }
 
@@ -220,9 +221,9 @@ function handleClose() {
   transition: background $transition-fast, color $transition-fast;
 
   &:hover:not(:disabled) {
-    background: rgba(220, 38, 38, 0.12);
-    color: #dc2626;
-  }
+      background: rgba(var(--error-rgb), 0.12);
+      color: $error;
+    }
 
   &:disabled {
     opacity: 0.4;
diff --git a/packages/client/src/components/hermes/skills/SkillList.vue b/packages/client/src/components/hermes/skills/SkillList.vue
index 345d9fa..3a667ab 100644
--- a/packages/client/src/components/hermes/skills/SkillList.vue
+++ b/packages/client/src/components/hermes/skills/SkillList.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useDialog } from '@/composables/useDialog'
@@ -334,77 +334,82 @@ function confirmDelete(category: string, skillName: string) {
 .skill-list {
     flex: 1;
     overflow-y: auto;
-    padding: 8px;
+    padding: 8px 10px 16px;
 }
 
 .skill-empty {
     padding: 24px 16px;
-    font-size: 13px;
-    color: $text-muted;
+    font-size: 12.5px;
+    color: $text-faint;
     text-align: center;
 }
 
 .skill-category {
-    margin-bottom: 4px;
+    margin-bottom: 6px;
 }
 
+// 分组标题：等宽 + 大写 + 发丝线，对应原型 .slist-group-t
 .category-header {
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 7px;
     width: 100%;
-    padding: 6px 10px;
+    padding: 8px 8px 5px;
     border: none;
+    border-bottom: 1px solid $border-light;
     background: none;
-    color: $text-secondary;
-    font-size: 12px;
+    color: $text-faint;
+    font-family: $font-code;
+    font-size: 10px;
     font-weight: 600;
     text-transform: uppercase;
-    letter-spacing: 0.3px;
+    letter-spacing: 0.14em;
     cursor: pointer;
-    border-radius: $radius-sm;
 
     &:hover {
-        background: rgba(var(--accent-primary-rgb), 0.04);
+        color: $text-muted;
     }
 
     &.sub {
-        padding-left: 22px;
-        font-size: 11px;
-        text-transform: none;
-        letter-spacing: 0;
+        padding-left: 18px;
+        font-size: 9.5px;
+        letter-spacing: 0.12em;
     }
 }
 
 // External-filter path group (outer level)
 .skill-path-group {
-    margin-bottom: 8px;
+    margin-bottom: 10px;
 }
 
 .path-header {
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 7px;
     width: 100%;
-    padding: 6px 10px;
+    padding: 7px 8px 5px;
     border: none;
+    border-bottom: 1px solid rgba(var(--warning-rgb), 0.28);
     background: none;
-    color: #f59e0b;
-    font-size: 11px;
+    color: $warning;
+    font-family: $font-code;
+    font-size: 10px;
     font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
     cursor: pointer;
-    border-radius: $radius-sm;
     text-align: left;
 
     &:hover {
-        background: rgba(245, 158, 11, 0.08);
+        color: $warning;
+        border-bottom-color: rgba(var(--warning-rgb), 0.5);
     }
 }
 
 .path-header-icon {
     display: inline-flex;
     flex-shrink: 0;
-    color: #f59e0b;
+    color: $warning;
 }
 
 .path-header-text {
@@ -440,70 +445,86 @@ function confirmDelete(category: string, skillName: string) {
 }
 
 .category-count {
-    font-size: 11px;
-    color: $text-muted;
-    background: rgba(var(--accent-primary-rgb), 0.06);
+    font-family: $font-code;
+    font-size: 10.5px;
+    color: $text-faint;
+    background: $bg-secondary;
+    border: 1px solid $border-light;
     padding: 1px 6px;
-    border-radius: 8px;
+    border-radius: 4px;
+    flex-shrink: 0;
 }
 
 .category-skills {
-    padding: 2px 0 4px;
+    padding: 6px 0 2px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
 }
 
+// 技能行：对应原型 .row-i —— 发丝线卡片 + 悬停青色描边
 .skill-item {
     display: flex;
     flex-direction: row;
     align-items: center;
     width: 100%;
-    padding: 6px 10px 6px 28px;
-    border: none;
-    background: none;
+    padding: 7px 10px;
+    border: 1px solid $border-color;
+    background: $bg-card;
     color: $text-secondary;
-    font-size: 13px;
+    font-size: 12.5px;
     text-align: left;
     cursor: pointer;
     border-radius: $radius-sm;
-    transition: all $transition-fast;
+    transition: border-color $transition-fast, background-color $transition-fast;
     gap: 8px;
 
     &:hover {
-        background: rgba(var(--accent-primary-rgb), 0.06);
+        border-color: rgba(var(--accent-primary-rgb), 0.3);
+        background: $bg-secondary;
         color: $text-primary;
     }
 
     &.active {
+        border-color: rgba(var(--accent-primary-rgb), 0.45);
         background: rgba(var(--accent-primary-rgb), 0.1);
         color: $text-primary;
-        font-weight: 500;
     }
 }
 
-// Source indicator dot
+// 来源指示灯：对应原型 .led —— 圆点 + 同色辉光
 .source-dot {
     display: inline-block;
-    width: 8px;
-    height: 8px;
+    width: 7px;
+    height: 7px;
     border-radius: 50%;
     margin-right: 6px;
     flex-shrink: 0;
     vertical-align: middle;
+    box-shadow: 0 0 6px currentColor;
 }
 
+// 技能来源图例：分类色板。外部目录用橙（与 SkillList 里外部目录标题同色，
+// 同一个「外部」在两处是同一个颜色）。color 与 background 同值，
+// 让 .source-dot 的 currentColor 辉光跟着色。
 .dot-builtin {
-    background: #888;
+    background: $text-muted;
+    color: $text-muted;
 }
 
 .dot-hub {
-    background: #4a90d9;
+    background: $info;
+    color: $info;
 }
 
 .dot-local {
-    background: #66bb6a;
+    background: $success;
+    color: $success;
 }
 
 .dot-external {
-    background: #f59e0b;
+    background: $warning;
+    color: $warning;
 }
 
 .skill-info {
@@ -514,40 +535,40 @@ function confirmDelete(category: string, skillName: string) {
 }
 
 .skill-name {
+    font-family: $font-code;
+    font-size: 12.5px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .modified-badge {
-    font-size: 11px;
+    font-size: 10.5px;
     color: $warning;
     margin-left: 2px;
-    opacity: 0.7;
 }
 
 .skill-desc {
     font-size: 11px;
-    color: $text-muted;
+    color: $text-faint;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-top: 1px;
+    margin-top: 2px;
 }
 
 .archive-section {
-    margin-top: 12px;
-    padding-top: 8px;
-    border-top: 1px solid $border-color;
+    margin-top: 14px;
+    padding-top: 6px;
+    border-top: 1px solid $border-light;
 }
 
 .archive-header {
-    color: $text-muted;
+    color: $text-faint;
 }
 
 .skill-archived {
-    opacity: 0.6;
-    padding-left: 28px;
+    opacity: 0.65;
 }
 
 .skill-action-btn {
@@ -557,17 +578,18 @@ function confirmDelete(category: string, skillName: string) {
     width: 24px;
     height: 24px;
     flex-shrink: 0;
-    border: none;
+    border: 1px solid transparent;
     background: transparent;
-    color: $text-muted;
+    color: $text-faint;
     border-radius: $radius-sm;
     cursor: pointer;
     padding: 0;
-    transition: background $transition-fast, color $transition-fast;
+    transition: background $transition-fast, color $transition-fast, border-color $transition-fast;
 
     &:hover:not(:disabled) {
-        background: rgba(220, 38, 38, 0.12);
-        color: #dc2626;
+        background: rgba(var(--error-rgb), 0.12);
+        border-color: rgba(var(--error-rgb), 0.35);
+        color: $error;
     }
 
     &:disabled {
diff --git a/packages/client/src/components/hermes/usage/AgentBreakdown.vue b/packages/client/src/components/hermes/usage/AgentBreakdown.vue
index 8a91635..44bc624 100644
--- a/packages/client/src/components/hermes/usage/AgentBreakdown.vue
+++ b/packages/client/src/components/hermes/usage/AgentBreakdown.vue
@@ -29,33 +29,37 @@ function cacheHitRate(agent: { inputTokens: number; cacheTokens: number }): stri
 </script>
 
 <template>
-  <div class="agent-breakdown">
-    <h3 class="section-title">{{ t('usage.agentBreakdown') }}</h3>
-
-    <div class="agent-legend" aria-label="Token type legend">
-      <div class="legend-item"><span class="legend-swatch input" />{{ t('usage.inputTokens') }}</div>
-      <div class="legend-item"><span class="legend-swatch output" />{{ t('usage.outputTokens') }}</div>
-      <div class="legend-item"><span class="legend-swatch cache" />{{ t('usage.cacheRead') }}</div>
+  <div class="cy-panel agent-breakdown">
+    <div class="cy-panel-h">
+      <h3>{{ t('usage.agentBreakdown') }}</h3>
     </div>
 
-    <div class="agent-list">
-      <div v-for="agent in usageStore.agentUsage" :key="agent.agent" class="agent-row">
-        <span class="agent-swatch" :style="{ background: agent.color }" />
-        <span class="agent-name" :title="agentName(agent.agent)">{{ agentName(agent.agent) }}</span>
-        <div class="agent-bar-wrap">
-          <div class="agent-bar" :style="{ width: (agent.visualTokens / maxAgentTokens * 100) + '%' }">
-            <div v-if="agent.inputTokens > 0" class="agent-bar-segment input" :style="{ width: agent.inputPercent + '%' }" />
-            <div v-if="agent.outputTokens > 0" class="agent-bar-segment output" :style="{ width: agent.outputPercent + '%' }" />
-            <div v-if="agent.cacheTokens > 0" class="agent-bar-segment cache" :style="{ width: agent.cachePercent + '%' }" />
+    <div class="cy-panel-b">
+      <div class="agent-legend" aria-label="Token type legend">
+        <div class="legend-item"><span class="legend-swatch input" />{{ t('usage.inputTokens') }}</div>
+        <div class="legend-item"><span class="legend-swatch output" />{{ t('usage.outputTokens') }}</div>
+        <div class="legend-item"><span class="legend-swatch cache" />{{ t('usage.cacheRead') }}</div>
+      </div>
+
+      <div class="agent-list">
+        <div v-for="agent in usageStore.agentUsage" :key="agent.agent" class="agent-row">
+          <span class="agent-swatch" :style="{ background: agent.color }" />
+          <span class="agent-name" :title="agentName(agent.agent)">{{ agentName(agent.agent) }}</span>
+          <div class="agent-bar-wrap">
+            <div class="agent-bar" :style="{ width: (agent.visualTokens / maxAgentTokens * 100) + '%' }">
+              <div v-if="agent.inputTokens > 0" class="agent-bar-segment input" :style="{ width: agent.inputPercent + '%' }" />
+              <div v-if="agent.outputTokens > 0" class="agent-bar-segment output" :style="{ width: agent.outputPercent + '%' }" />
+              <div v-if="agent.cacheTokens > 0" class="agent-bar-segment cache" :style="{ width: agent.cachePercent + '%' }" />
+            </div>
           </div>
+          <span
+            class="agent-tokens"
+            :title="`${t('usage.inputTokens')}: ${formatTokens(agent.inputTokens)} · ${t('usage.outputTokens')}: ${formatTokens(agent.outputTokens)} · ${t('usage.cacheRead')}: ${formatTokens(agent.cacheTokens)} · ${t('usage.cacheHitRate')}: ${cacheHitRate(agent)}`"
+          >
+            {{ formatTokens(agent.totalTokens) }}
+            <small v-if="agent.cacheTokens > 0">+{{ formatTokens(agent.cacheTokens) }}</small>
+          </span>
         </div>
-        <span
-          class="agent-tokens"
-          :title="`${t('usage.inputTokens')}: ${formatTokens(agent.inputTokens)} · ${t('usage.outputTokens')}: ${formatTokens(agent.outputTokens)} · ${t('usage.cacheRead')}: ${formatTokens(agent.cacheTokens)} · ${t('usage.cacheHitRate')}: ${cacheHitRate(agent)}`"
-        >
-          {{ formatTokens(agent.totalTokens) }}
-          <small v-if="agent.cacheTokens > 0">+{{ formatTokens(agent.cacheTokens) }}</small>
-        </span>
       </div>
     </div>
   </div>
@@ -63,21 +67,7 @@ function cacheHitRate(agent: { inputTokens: number; cacheTokens: number }): stri
 
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
-
-.agent-breakdown {
-  background: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  padding: 16px;
-  margin-bottom: 20px;
-}
-
-.section-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: $text-secondary;
-  margin: 0 0 12px;
-}
+@use '@/styles/chart-colors' as chart;
 
 .agent-legend {
   display: flex;
@@ -103,11 +93,11 @@ function cacheHitRate(agent: { inputTokens: number; cacheTokens: number }): stri
 }
 
 .legend-swatch.input,
-.agent-bar-segment.input { background: #5c6bc0; }
+.agent-bar-segment.input { background: chart.$chart-input; }
 .legend-swatch.output,
-.agent-bar-segment.output { background: #26a69a; }
+.agent-bar-segment.output { background: chart.$chart-output; }
 .legend-swatch.cache,
-.agent-bar-segment.cache { background: #f6ad55; }
+.agent-bar-segment.cache { background: chart.$chart-cache; }
 
 .agent-list {
   display: flex;
@@ -161,7 +151,7 @@ function cacheHitRate(agent: { inputTokens: number; cacheTokens: number }): stri
   flex-shrink: 0;
 
   small {
-    color: #f6ad55;
+    color: chart.$chart-cache;
     margin-left: 4px;
     font-size: 10px;
   }
diff --git a/packages/client/src/components/hermes/usage/DailyTrend.vue b/packages/client/src/components/hermes/usage/DailyTrend.vue
index c446faf..d728a20 100644
--- a/packages/client/src/components/hermes/usage/DailyTrend.vue
+++ b/packages/client/src/components/hermes/usage/DailyTrend.vue
@@ -30,107 +30,98 @@ const maxTokens = computed(() =>
 </script>
 
 <template>
-  <div class="daily-trend">
-    <h3 class="section-title">{{ t('usage.dailyTrend') }}</h3>
+  <div class="cy-panel daily-trend">
+    <div class="cy-panel-h">
+      <h3>{{ t('usage.dailyTrend') }}</h3>
+    </div>
 
-    <div class="bar-chart">
-      <div
-        v-for="d in usageStore.dailyUsage"
-        :key="d.date"
-        class="bar-col"
-      >
-        <div class="bar-track">
-          <div
-            class="bar-stack"
-            :style="{ height: (d.visualTokens / maxTokens * 100) + '%' }"
-          >
+    <div class="cy-panel-b">
+      <div class="bar-chart">
+        <div
+          v-for="d in usageStore.dailyUsage"
+          :key="d.date"
+          class="bar-col"
+        >
+          <div class="bar-track">
             <div
-              v-if="d.output_tokens > 0"
-              class="bar-segment output"
-              :style="{ height: d.outputPercent + '%' }"
-            />
-            <div
-              v-if="d.input_tokens > 0"
-              class="bar-segment input"
-              :style="{ height: d.inputPercent + '%' }"
-            />
-            <div
-              v-if="d.cache_read_tokens > 0"
-              class="bar-segment cache"
-              :style="{ height: d.cachePercent + '%' }"
-            />
+              class="bar-stack"
+              :style="{ height: (d.visualTokens / maxTokens * 100) + '%' }"
+            >
+              <div
+                v-if="d.output_tokens > 0"
+                class="bar-segment output"
+                :style="{ height: d.outputPercent + '%' }"
+              />
+              <div
+                v-if="d.input_tokens > 0"
+                class="bar-segment input"
+                :style="{ height: d.inputPercent + '%' }"
+              />
+              <div
+                v-if="d.cache_read_tokens > 0"
+                class="bar-segment cache"
+                :style="{ height: d.cachePercent + '%' }"
+              />
+            </div>
+          </div>
+          <div class="bar-tooltip">
+            <div class="tooltip-date">{{ d.date }}</div>
+            <div class="tooltip-row">{{ t('usage.inputTokens') }}: {{ formatTokens(d.input_tokens) }}</div>
+            <div class="tooltip-row">{{ t('usage.outputTokens') }}: {{ formatTokens(d.output_tokens) }}</div>
+            <div class="tooltip-row">{{ t('usage.cacheRead') }}: {{ formatTokens(d.cache_read_tokens) }}</div>
+            <div class="tooltip-row">{{ t('usage.cacheWrite') }}: {{ formatTokens(d.cache_write_tokens) }}</div>
+            <div class="tooltip-row">{{ t('usage.cacheHitRate') }}: {{ cacheHitRate(d) }}</div>
+            <div class="tooltip-row">{{ t('usage.sessions') }}: {{ d.sessions }}</div>
+            <div class="tooltip-row">{{ t('usage.cost') }}: {{ formatCost(d.cost) }}</div>
           </div>
         </div>
-        <div class="bar-tooltip">
-          <div class="tooltip-date">{{ d.date }}</div>
-          <div class="tooltip-row">{{ t('usage.inputTokens') }}: {{ formatTokens(d.input_tokens) }}</div>
-          <div class="tooltip-row">{{ t('usage.outputTokens') }}: {{ formatTokens(d.output_tokens) }}</div>
-          <div class="tooltip-row">{{ t('usage.cacheRead') }}: {{ formatTokens(d.cache_read_tokens) }}</div>
-          <div class="tooltip-row">{{ t('usage.cacheWrite') }}: {{ formatTokens(d.cache_write_tokens) }}</div>
-          <div class="tooltip-row">{{ t('usage.cacheHitRate') }}: {{ cacheHitRate(d) }}</div>
-          <div class="tooltip-row">{{ t('usage.sessions') }}: {{ d.sessions }}</div>
-          <div class="tooltip-row">{{ t('usage.cost') }}: {{ formatCost(d.cost) }}</div>
-        </div>
       </div>
-    </div>
-    <div class="bar-dates">
-      <span>{{ usageStore.dailyUsage[0]?.date.slice(5) }}</span>
-      <span>{{ usageStore.dailyUsage[usageStore.dailyUsage.length - 1]?.date.slice(5) }}</span>
-    </div>
+      <div class="bar-dates">
+        <span>{{ usageStore.dailyUsage[0]?.date.slice(5) }}</span>
+        <span>{{ usageStore.dailyUsage[usageStore.dailyUsage.length - 1]?.date.slice(5) }}</span>
+      </div>
 
-    <div class="chart-legend" aria-label="Token type legend">
-      <div class="legend-item"><span class="legend-swatch input" />{{ t('usage.inputTokens') }}</div>
-      <div class="legend-item"><span class="legend-swatch output" />{{ t('usage.outputTokens') }}</div>
-      <div class="legend-item"><span class="legend-swatch cache" />{{ t('usage.cacheRead') }}</div>
-    </div>
+      <div class="chart-legend" aria-label="Token type legend">
+        <div class="legend-item"><span class="legend-swatch input" />{{ t('usage.inputTokens') }}</div>
+        <div class="legend-item"><span class="legend-swatch output" />{{ t('usage.outputTokens') }}</div>
+        <div class="legend-item"><span class="legend-swatch cache" />{{ t('usage.cacheRead') }}</div>
+      </div>
 
-    <div class="trend-table">
-      <table>
-        <thead>
-          <tr>
-            <th>{{ t('usage.date') }}</th>
-            <th>{{ t('usage.inputTokens') }}</th>
-            <th>{{ t('usage.outputTokens') }}</th>
-            <th>{{ t('usage.cacheRead') }}</th>
-            <th>{{ t('usage.cacheWrite') }}</th>
-            <th>{{ t('usage.cacheHitRate') }}</th>
-            <th>{{ t('usage.sessions') }}</th>
-            <th>{{ t('usage.cost') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="d in [...usageStore.dailyUsage].reverse()" :key="d.date">
-            <td>{{ d.date }}</td>
-            <td>{{ formatTokens(d.input_tokens) }}</td>
-            <td>{{ formatTokens(d.output_tokens) }}</td>
-            <td>{{ formatTokens(d.cache_read_tokens) }}</td>
-            <td>{{ formatTokens(d.cache_write_tokens) }}</td>
-            <td>{{ cacheHitRate(d) }}</td>
-            <td>{{ d.sessions }}</td>
-            <td>{{ formatCost(d.cost) }}</td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="trend-table">
+        <table>
+          <thead>
+            <tr>
+              <th>{{ t('usage.date') }}</th>
+              <th>{{ t('usage.inputTokens') }}</th>
+              <th>{{ t('usage.outputTokens') }}</th>
+              <th>{{ t('usage.cacheRead') }}</th>
+              <th>{{ t('usage.cacheWrite') }}</th>
+              <th>{{ t('usage.cacheHitRate') }}</th>
+              <th>{{ t('usage.sessions') }}</th>
+              <th>{{ t('usage.cost') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="d in [...usageStore.dailyUsage].reverse()" :key="d.date">
+              <td>{{ d.date }}</td>
+              <td>{{ formatTokens(d.input_tokens) }}</td>
+              <td>{{ formatTokens(d.output_tokens) }}</td>
+              <td>{{ formatTokens(d.cache_read_tokens) }}</td>
+              <td>{{ formatTokens(d.cache_write_tokens) }}</td>
+              <td>{{ cacheHitRate(d) }}</td>
+              <td>{{ d.sessions }}</td>
+              <td>{{ formatCost(d.cost) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
-
-.daily-trend {
-  background: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  padding: 16px;
-}
-
-.section-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: $text-secondary;
-  margin: 0 0 12px;
-}
+@use '@/styles/chart-colors' as chart;
 
 .bar-chart {
   display: flex;
@@ -175,17 +166,17 @@ const maxTokens = computed(() =>
 
 .bar-segment.output,
 .legend-swatch.output {
-  background: #26a69a;
+  background: chart.$chart-output;
 }
 
 .bar-segment.input,
 .legend-swatch.input {
-  background: #5c6bc0;
+  background: chart.$chart-input;
 }
 
 .bar-segment.cache,
 .legend-swatch.cache {
-  background: #f6ad55;
+  background: chart.$chart-cache;
 }
 
 .bar-tooltip {
diff --git a/packages/client/src/components/hermes/usage/ModelBreakdown.vue b/packages/client/src/components/hermes/usage/ModelBreakdown.vue
index 5cc57ef..adfe1d6 100644
--- a/packages/client/src/components/hermes/usage/ModelBreakdown.vue
+++ b/packages/client/src/components/hermes/usage/ModelBreakdown.vue
@@ -21,45 +21,49 @@ function cacheHitRate(m: { inputTokens: number; cacheTokens: number }): string {
 </script>
 
 <template>
-  <div class="model-breakdown">
-    <h3 class="section-title">{{ t('usage.modelBreakdown') }}</h3>
-
-    <div class="model-legend" aria-label="Token type legend">
-      <div class="legend-item"><span class="legend-swatch input" />{{ t('usage.inputTokens') }}</div>
-      <div class="legend-item"><span class="legend-swatch output" />{{ t('usage.outputTokens') }}</div>
-      <div class="legend-item"><span class="legend-swatch cache" />{{ t('usage.cacheRead') }}</div>
+  <div class="cy-panel model-breakdown">
+    <div class="cy-panel-h">
+      <h3>{{ t('usage.modelBreakdown') }}</h3>
     </div>
 
-    <div class="model-list">
-      <div v-for="m in usageStore.modelUsage" :key="m.model" class="model-row">
-        <span class="model-swatch" :style="{ background: m.color }" />
-        <span class="model-name" :title="m.model">{{ m.model }}</span>
-        <div class="model-bar-wrap">
-          <div
-            class="model-bar"
-            :style="{ width: (m.visualTokens / maxModelTokens * 100) + '%' }"
-          >
+    <div class="cy-panel-b">
+      <div class="model-legend" aria-label="Token type legend">
+        <div class="legend-item"><span class="legend-swatch input" />{{ t('usage.inputTokens') }}</div>
+        <div class="legend-item"><span class="legend-swatch output" />{{ t('usage.outputTokens') }}</div>
+        <div class="legend-item"><span class="legend-swatch cache" />{{ t('usage.cacheRead') }}</div>
+      </div>
+
+      <div class="model-list">
+        <div v-for="m in usageStore.modelUsage" :key="m.model" class="model-row">
+          <span class="model-swatch" :style="{ background: m.color }" />
+          <span class="model-name" :title="m.model">{{ m.model }}</span>
+          <div class="model-bar-wrap">
             <div
-              v-if="m.inputTokens > 0"
-              class="model-bar-segment input"
-              :style="{ width: m.inputPercent + '%' }"
-            />
-            <div
-              v-if="m.outputTokens > 0"
-              class="model-bar-segment output"
-              :style="{ width: m.outputPercent + '%' }"
-            />
-            <div
-              v-if="m.cacheTokens > 0"
-              class="model-bar-segment cache"
-              :style="{ width: m.cachePercent + '%' }"
-            />
+              class="model-bar"
+              :style="{ width: (m.visualTokens / maxModelTokens * 100) + '%' }"
+            >
+              <div
+                v-if="m.inputTokens > 0"
+                class="model-bar-segment input"
+                :style="{ width: m.inputPercent + '%' }"
+              />
+              <div
+                v-if="m.outputTokens > 0"
+                class="model-bar-segment output"
+                :style="{ width: m.outputPercent + '%' }"
+              />
+              <div
+                v-if="m.cacheTokens > 0"
+                class="model-bar-segment cache"
+                :style="{ width: m.cachePercent + '%' }"
+              />
+            </div>
           </div>
+          <span class="model-tokens" :title="`${t('usage.inputTokens')}: ${formatTokens(m.inputTokens)} · ${t('usage.outputTokens')}: ${formatTokens(m.outputTokens)} · ${t('usage.cacheRead')}: ${formatTokens(m.cacheTokens)} · ${t('usage.cacheHitRate')}: ${cacheHitRate(m)}`">
+            {{ formatTokens(m.totalTokens) }}
+            <small v-if="m.cacheTokens > 0">+{{ formatTokens(m.cacheTokens) }}</small>
+          </span>
         </div>
-        <span class="model-tokens" :title="`${t('usage.inputTokens')}: ${formatTokens(m.inputTokens)} · ${t('usage.outputTokens')}: ${formatTokens(m.outputTokens)} · ${t('usage.cacheRead')}: ${formatTokens(m.cacheTokens)} · ${t('usage.cacheHitRate')}: ${cacheHitRate(m)}`">
-          {{ formatTokens(m.totalTokens) }}
-          <small v-if="m.cacheTokens > 0">+{{ formatTokens(m.cacheTokens) }}</small>
-        </span>
       </div>
     </div>
   </div>
@@ -67,21 +71,7 @@ function cacheHitRate(m: { inputTokens: number; cacheTokens: number }): string {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
-
-.model-breakdown {
-  background: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  padding: 16px;
-  margin-bottom: 20px;
-}
-
-.section-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: $text-secondary;
-  margin: 0 0 12px;
-}
+@use '@/styles/chart-colors' as chart;
 
 .model-legend {
   display: flex;
@@ -108,17 +98,17 @@ function cacheHitRate(m: { inputTokens: number; cacheTokens: number }): string {
 
 .legend-swatch.input,
 .model-bar-segment.input {
-  background: #5c6bc0;
+  background: chart.$chart-input;
 }
 
 .legend-swatch.output,
 .model-bar-segment.output {
-  background: #26a69a;
+  background: chart.$chart-output;
 }
 
 .legend-swatch.cache,
 .model-bar-segment.cache {
-  background: #f6ad55;
+  background: chart.$chart-cache;
 }
 
 .model-list {
@@ -174,7 +164,7 @@ function cacheHitRate(m: { inputTokens: number; cacheTokens: number }): string {
   flex-shrink: 0;
 
   small {
-    color: #f6ad55;
+    color: chart.$chart-cache;
     margin-left: 4px;
     font-size: 10px;
   }
diff --git a/packages/client/src/components/hermes/usage/StatCards.vue b/packages/client/src/components/hermes/usage/StatCards.vue
index f200957..acf2bc5 100644
--- a/packages/client/src/components/hermes/usage/StatCards.vue
+++ b/packages/client/src/components/hermes/usage/StatCards.vue
@@ -19,28 +19,28 @@ function formatCost(n: number): string {
 </script>
 
 <template>
-  <div class="stat-cards">
-    <div class="stat-card">
-      <div class="stat-label">{{ t('usage.totalTokens') }}</div>
-      <div class="stat-value">{{ formatTokens(usageStore.totalTokens) }}</div>
-      <div class="stat-sub">
+  <div class="cy-kpis stat-cards">
+    <div class="cy-kpi acc">
+      <div class="k">{{ t('usage.totalTokens') }}</div>
+      <div class="v">{{ formatTokens(usageStore.totalTokens) }}</div>
+      <div class="s">
         {{ formatTokens(usageStore.totalInputTokens) }} {{ t('usage.inputTokens') }} /
         {{ formatTokens(usageStore.totalOutputTokens) }} {{ t('usage.outputTokens') }}
       </div>
     </div>
-    <div class="stat-card">
-      <div class="stat-label">{{ t('usage.totalSessions') }}</div>
-      <div class="stat-value">{{ usageStore.totalSessions }}</div>
-      <div class="stat-sub">{{ t('usage.avgPerDay', { n: usageStore.avgSessionsPerDay.toFixed(1) }) }}</div>
+    <div class="cy-kpi info">
+      <div class="k">{{ t('usage.totalSessions') }}</div>
+      <div class="v">{{ usageStore.totalSessions }}</div>
+      <div class="s">{{ t('usage.avgPerDay', { n: usageStore.avgSessionsPerDay.toFixed(1) }) }}</div>
     </div>
-    <div class="stat-card">
-      <div class="stat-label">{{ t('usage.estimatedCost') }}</div>
-      <div class="stat-value">{{ formatCost(usageStore.estimatedCost) }}</div>
+    <div class="cy-kpi warn">
+      <div class="k">{{ t('usage.estimatedCost') }}</div>
+      <div class="v">{{ formatCost(usageStore.estimatedCost) }}</div>
     </div>
-    <div class="stat-card">
-      <div class="stat-label">{{ t('usage.cacheHitRate') }}</div>
-      <div class="stat-value">{{ usageStore.cacheHitRate !== null ? usageStore.cacheHitRate.toFixed(1) + '%' : '--' }}</div>
-      <div class="stat-sub" v-if="usageStore.cacheHitRate !== null">
+    <div class="cy-kpi flat">
+      <div class="k">{{ t('usage.cacheHitRate') }}</div>
+      <div class="v">{{ usageStore.cacheHitRate !== null ? usageStore.cacheHitRate.toFixed(1) + '%' : '--' }}</div>
+      <div class="s" v-if="usageStore.cacheHitRate !== null">
         {{ formatTokens(usageStore.totalCacheTokens) }} {{ t('usage.tokens') }}
       </div>
     </div>
@@ -48,50 +48,7 @@ function formatCost(n: number): string {
 </template>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as *;
-
 .stat-cards {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.stat-card {
-  background: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  padding: 16px;
-}
-
-.stat-label {
-  font-size: 12px;
-  color: $text-muted;
-  margin-bottom: 6px;
-}
-
-.stat-value {
-  font-size: 22px;
-  font-weight: 600;
-  color: $text-primary;
-  line-height: 1.2;
-}
-
-.stat-sub {
-  font-size: 11px;
-  color: $text-muted;
-  margin-top: 4px;
-}
-
-@media (max-width: 768px) {
-  .stat-cards {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 480px) {
-  .stat-cards {
-    grid-template-columns: 1fr;
-  }
+  margin-bottom: 16px;
 }
 </style>
diff --git a/packages/client/src/components/hermes/workflow/WorkflowAgentNode.vue b/packages/client/src/components/hermes/workflow/WorkflowAgentNode.vue
index ccc3c24..0006066 100644
--- a/packages/client/src/components/hermes/workflow/WorkflowAgentNode.vue
+++ b/packages/client/src/components/hermes/workflow/WorkflowAgentNode.vue
@@ -97,7 +97,7 @@ async function uploadImages(files: File[]) {
       :is-visible="selected && !data.readonly"
       :min-width="260"
       :min-height="360"
-      color="var(--accent-info)"
+      color="var(--accent-primary)"
       handle-class-name="workflow-resize-handle"
       line-class-name="workflow-resize-line"
     />
@@ -296,9 +296,9 @@ async function uploadImages(files: File[]) {
   min-width: 260px;
   min-height: 360px;
   border: 1px solid $border-color;
-  border-radius: 8px;
+  border-radius: $radius-lg;
   background: $bg-card;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  box-shadow: $shadow-md;
   color: $text-primary;
   display: flex;
   flex-direction: column;
@@ -306,8 +306,8 @@ async function uploadImages(files: File[]) {
   transition: border-color $transition-fast, box-shadow $transition-fast, transform $transition-fast;
 
   &.selected {
-    border-color: var(--accent-info);
-    box-shadow: 0 0 0 3px rgba(var(--accent-info-rgb), 0.16), 0 12px 28px rgba(0, 0, 0, 0.12);
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.16), $shadow-lg;
   }
 }
 
@@ -315,20 +315,21 @@ async function uploadImages(files: File[]) {
   width: 10px;
   height: 10px;
   border: 2px solid $bg-card;
-  background: var(--accent-info);
+  background: var(--accent-primary);
 }
 
 .workflow-agent-node :deep(.workflow-resize-line) {
-  border-color: var(--accent-info);
+  border-color: var(--accent-primary);
 }
 
 .node-header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 12px 14px;
+  gap: 7px;
+  padding: 8px 10px;
   border-bottom: 1px solid $border-light;
-  font-size: 13px;
+  font-family: $font-code;
+  font-size: 11.5px;
   font-weight: 600;
   flex: 0 0 auto;
   cursor: grab;
@@ -357,53 +358,72 @@ async function uploadImages(files: File[]) {
   overflow-wrap: anywhere;
 }
 
+// 状态点配色走三色语义系统（见 docs/ui-baseline.md §1）：
+// 绿 = 机器在动，橙 = 需要你介入，红 = 出错。
+// 中性态（idle / queued）用 --text-faint / --text-muted，不占用语义色 ——
+// 语义色只有三个名额，被中性态借走就少了。
+// 规格取原型的 .led：7px + currentColor 辉光，所以 color 必须与 background 同步给。
 .node-status-dot {
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
   flex-shrink: 0;
-  background: #9ca3af;
+  background: $text-faint;
+  color: $text-faint;
+  box-shadow: 0 0 6px currentColor;
 }
 
 .status-idle .node-status-dot {
-  background: #9ca3af;
+  background: $text-faint;
+  color: $text-faint;
 }
 
 .status-queued .node-status-dot {
-  background: #64748b;
+  background: $text-muted;
+  color: $text-muted;
 }
 
+// running = 机器在动 → 绿。原先是蓝色 #2563eb，和「系统本体」的青撞色，
+// 读者会以为那是品牌色而不是运行态。
 .status-running .node-status-dot {
-  background: #2563eb;
-  box-shadow: 0 0 8px rgba(37, 99, 235, 0.65);
+  background: $success;
+  color: $success;
 }
 
+// pending_approval = 需要你介入 → 橙
 .status-pending_approval .node-status-dot {
-  background: #d97706;
-  box-shadow: 0 0 8px rgba(217, 119, 6, 0.55);
+  background: $warning;
+  color: $warning;
 }
 
+// approval_rejected = 审批被拒 → 红（终态出错）
 .status-approval_rejected .node-status-dot {
-  background: #b45309;
+  background: $error;
+  color: $error;
 }
 
+// completed = 机器做完了 → 绿
 .status-completed .node-status-dot {
-  background: #16a34a;
+  background: $success;
+  color: $success;
 }
 
 .status-failed .node-status-dot {
-  background: #dc2626;
+  background: $error;
+  color: $error;
 }
 
+// canceled = 被人工停掉 → 红
 .status-canceled .node-status-dot {
-  background: #f97316;
+  background: $error;
+  color: $error;
 }
 
 .node-controls {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 12px;
+  gap: 9px;
+  padding: 10px;
   flex: 1;
   min-height: 0;
 }
@@ -415,8 +435,8 @@ async function uploadImages(files: File[]) {
   justify-content: space-between;
   gap: 12px;
   padding: 0 2px;
-  color: $text-secondary;
-  font-size: 12px;
+  color: $text-muted;
+  font-size: 11.5px;
   line-height: 1.2;
 }
 
@@ -470,9 +490,9 @@ async function uploadImages(files: File[]) {
   transition: border-color $transition-fast, color $transition-fast, background-color $transition-fast;
 
   &:hover:not(:disabled) {
-    border-color: var(--accent-info);
-    color: var(--accent-info);
-    background: rgba(var(--accent-info-rgb), 0.08);
+    border-color: var(--accent-primary);
+    color: var(--accent-primary);
+    background: rgba(var(--accent-primary-rgb), 0.08);
   }
 
   &:disabled {
@@ -484,8 +504,8 @@ async function uploadImages(files: File[]) {
 .image-upload-loading {
   width: 16px;
   height: 16px;
-  border: 2px solid rgba(var(--accent-info-rgb), 0.25);
-  border-top-color: var(--accent-info);
+  border: 2px solid rgba(var(--accent-primary-rgb), 0.25);
+  border-top-color: var(--accent-primary);
   border-radius: 50%;
   animation: image-upload-spin 0.8s linear infinite;
 }
@@ -530,7 +550,7 @@ async function uploadImages(files: File[]) {
   height: 18px;
   border: 0;
   border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--overlay-scrim);
   color: var(--text-on-overlay);
   appearance: none;
   cursor: pointer;
@@ -571,7 +591,7 @@ async function uploadImages(files: File[]) {
   overflow: hidden;
 
   &:hover {
-    border-color: var(--accent-info);
+    border-color: var(--accent-primary);
     color: $text-primary;
   }
 }
@@ -599,7 +619,7 @@ async function uploadImages(files: File[]) {
   height: 18px;
   border: 0;
   border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--overlay-scrim);
   color: var(--text-on-overlay);
   appearance: none;
   cursor: pointer;
@@ -621,7 +641,7 @@ async function uploadImages(files: File[]) {
   position: fixed;
   inset: 0;
   z-index: 9999;
-  background: rgba(0, 0, 0, 0.85);
+  background: var(--overlay-scrim-strong);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -644,18 +664,23 @@ async function uploadImages(files: File[]) {
   }
 }
 
+// 端口用原型的 .port 规格：入端沉底（faint），出端是霓虹青并带辉光。
 .workflow-handle {
-  width: 16px;
-  height: 16px;
-  border: 2px solid $bg-card;
-  background: var(--accent-info);
+  width: 9px;
+  height: 9px;
+  border: 0;
+  border-radius: 50%;
+  background: $text-faint;
+  box-shadow: none;
 }
 
 .input-handle {
-  left: -9px;
+  left: -5px;
 }
 
 .output-handle {
-  right: -9px;
+  right: -5px;
+  background: $accent-primary;
+  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.6);
 }
 </style>
diff --git a/packages/client/src/components/hermes/workflow/WorkflowModelSelector.vue b/packages/client/src/components/hermes/workflow/WorkflowModelSelector.vue
index 8b98548..c07e596 100644
--- a/packages/client/src/components/hermes/workflow/WorkflowModelSelector.vue
+++ b/packages/client/src/components/hermes/workflow/WorkflowModelSelector.vue
@@ -335,12 +335,12 @@ function handleSelect(group: AvailableModelGroup, model: string) {
 }
 
 .model-badge-preview {
-  color: #fff;
-  background: #d97706;
+  color: var(--text-on-accent);
+  background: $warning;
 }
 
 .model-badge-custom {
-  color: #fff;
+  color: var(--text-on-accent);
   background: $accent-primary;
 }
 
diff --git a/packages/client/src/components/layout/ModelSelector.vue b/packages/client/src/components/layout/ModelSelector.vue
index ecc9c66..4eaf0ca 100644
--- a/packages/client/src/components/layout/ModelSelector.vue
+++ b/packages/client/src/components/layout/ModelSelector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useAppStore } from '@/stores/hermes/app'
 import { useProfilesStore } from '@/stores/hermes/profiles'
 import { useI18n } from 'vue-i18n'
@@ -24,11 +24,20 @@ const activeModelGroups = computed(() => {
   return profileModels?.groups || []
 })
 
-const providerOptions = computed(() => {
-  const current = appStore.selectedProvider
-  customProvider.value = current
-  return activeModelGroups.value.map(g => ({ label: g.label, value: g.provider }))
-})
+const providerOptions = computed(() =>
+  activeModelGroups.value.map(g => ({ label: g.label, value: g.provider }))
+)
+
+// 选中的 provider 跟随 store，而不是写在 providerOptions 的 getter 里。
+// getter 里有副作用时，用户在弹窗里手动挑 provider 的结果会被下一次
+// 模型列表刷新（provider 或 groups 变化触发 getter 重算）无声覆盖掉 ——
+// 表现就是「自己跳」。
+watch(
+  () => appStore.selectedProvider,
+  (provider) => {
+    customProvider.value = provider
+  }
+)
 
 const modelGroupsWithCustom = computed(() =>
   activeModelGroups.value.map(g => ({
@@ -483,7 +492,7 @@ async function handleRefresh() {
   flex-shrink: 0;
   font-size: 9px;
   font-weight: 600;
-  color: #fff;
+  color: var(--text-on-accent);
   background: $accent-primary;
   padding: 1px 5px;
   border-radius: 3px;
@@ -514,8 +523,8 @@ async function handleRefresh() {
   flex-shrink: 0;
   font-size: 9px;
   font-weight: 600;
-  color: #fff;
-  background: #d97706;
+  color: var(--text-on-accent);
+  background: $warning;
   padding: 1px 5px;
   border-radius: 3px;
   margin-right: 4px;
diff --git a/packages/client/src/components/layout/PageSidebarNav.vue b/packages/client/src/components/layout/PageSidebarNav.vue
index 0a865d3..054d7aa 100644
--- a/packages/client/src/components/layout/PageSidebarNav.vue
+++ b/packages/client/src/components/layout/PageSidebarNav.vue
@@ -292,7 +292,7 @@ function openWorkflow() {
   &.active {
     background: $bg-card;
     color: $text-primary;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    box-shadow: $shadow-sm;
   }
 }
 </style>
diff --git a/packages/client/src/i18n/locales/en.ts b/packages/client/src/i18n/locales/en.ts
index 169645f..0e1a94b 100644
--- a/packages/client/src/i18n/locales/en.ts
+++ b/packages/client/src/i18n/locales/en.ts
@@ -320,6 +320,11 @@ export default {
     lastScanned: 'Last scanned: {time}',
     refresh: 'Refresh',
     empty: 'No devices found',
+    kpiDiscovered: 'Discovered',
+    kpiOnline: 'Online',
+    kpiOffline: 'Offline',
+    kpiRequests: 'Pending requests',
+    discoveredHosts: 'Discovered hosts',
     computer: 'Computer',
     endpointLabel: 'Endpoint',
     statusLabel: 'Status',
@@ -1009,6 +1014,7 @@ export default {
       runs: 'runs',
       noRuns: 'No run history found.',
     },
+    sectionList: 'Task List',
   },
 
   // Skills
@@ -1525,6 +1531,12 @@ export default {
     searchPlaceholder: 'Search...',
     refresh: 'Refresh',
     noEntries: 'No log entries',
+    total: 'Total',
+    error: 'ERROR',
+    warning: 'WARNING',
+    info: 'INFO',
+    stream: 'Log stream',
+    window: 'Current window',
   },
 
   // Settings
diff --git a/packages/client/src/i18n/locales/zh.ts b/packages/client/src/i18n/locales/zh.ts
index cc3c0b4..56fb3e3 100644
--- a/packages/client/src/i18n/locales/zh.ts
+++ b/packages/client/src/i18n/locales/zh.ts
@@ -320,6 +320,11 @@ export default {
     lastScanned: '上次扫描：{time}',
     refresh: '刷新',
     empty: '暂无设备',
+    kpiDiscovered: '已发现',
+    kpiOnline: '在线',
+    kpiOffline: '离线',
+    kpiRequests: '待处理申请',
+    discoveredHosts: '已发现主机',
     computer: '电脑',
     endpointLabel: '端',
     statusLabel: '状态',
@@ -1009,6 +1014,7 @@ export default {
       runs: '次运行',
       noRuns: '暂无运行历史。',
     },
+    sectionList: '任务列表',
   },
 
   // 技能
@@ -1517,6 +1523,12 @@ export default {
     searchPlaceholder: '搜索...',
     refresh: '刷新',
     noEntries: '暂无日志',
+    total: '总数',
+    error: 'ERROR',
+    warning: 'WARNING',
+    info: 'INFO',
+    stream: '日志流',
+    window: '当前窗口',
   },
 
   // 设置
diff --git a/packages/client/src/stores/hermes/usage.ts b/packages/client/src/stores/hermes/usage.ts
index 3622135..e06dc10 100644
--- a/packages/client/src/stores/hermes/usage.ts
+++ b/packages/client/src/stores/hermes/usage.ts
@@ -1,4 +1,5 @@
 import { fetchUsageStats, type UsageStatsResponse } from '@/api/hermes/sessions'
+import { CHART_CATEGORICAL } from '@/styles/chart-palette'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
@@ -47,18 +48,8 @@ interface AgentUsage {
   cachePercent: number
 }
 
-const MODEL_COLORS = [
-  '#4fd1c5',
-  '#63b3ed',
-  '#f6ad55',
-  '#b794f4',
-  '#68d391',
-  '#fc8181',
-  '#f687b3',
-  '#90cdf4',
-  '#fbd38d',
-  '#9ae6b4',
-]
+// 模型 / agent 配色取统一图表分类色板，见 styles/chart-palette.ts。
+const MODEL_COLORS = CHART_CATEGORICAL
 
 function normalizeModel(model: string | null | undefined): string {
   const trimmed = (model || '').trim()
diff --git a/packages/client/src/styles/arco-theme.ts b/packages/client/src/styles/arco-theme.ts
index 36fa901..d219984 100644
--- a/packages/client/src/styles/arco-theme.ts
+++ b/packages/client/src/styles/arco-theme.ts
@@ -5,8 +5,8 @@
 // 保留本文件是为了让读取 token 的人能在一处看到意图，以及给测试一个可断言的锚点。
 // 改色时请同时改 global.scss 的 Arco token bridge，两处保持一致。
 export const arcoTheme = {
-  // 霓虹青 oklch(0.805 0.148 188) ≈ rgb(45, 212, 191)
-  colorPrimary: '#2dd4bf',
+  // 霓虹青 oklch(0.805 0.148 188) → rgb(0, 221, 209)
+  colorPrimary: '#00ddd1',
   // 页面底 / 卡片底，对应 oklch(0.155 0.012 250) 与 oklch(0.130 0.012 250)
   colorBgLayout: '#1a1d23',
   colorBgContainer: '#14171c',
diff --git a/packages/client/src/styles/chart-colors.scss b/packages/client/src/styles/chart-colors.scss
new file mode 100644
index 0000000..0fbd107
--- /dev/null
+++ b/packages/client/src/styles/chart-colors.scss
@@ -0,0 +1,42 @@
+// 图表色板 —— 全项目唯一来源（SCSS 侧）。
+//
+// 图表色表达的是「这是第几类 / 哪个维度」，不是状态好坏，所以不走三色语义系统。
+// 见 docs/ui-baseline.md §7：图表色板是唯一允许硬编码颜色的地方。
+//
+// 这里有两组色，用途不同，不要混用：
+//
+//   1. $chart-series-*  —— 序列色。同一量纲的堆叠分段（input / output / cache）。
+//      低彩度，让三个分段并存时读者先看比例、再看颜色；不抢强调色的注意力。
+//
+//   2. $chart-cat-1..12 —— 分类色。模型 / 技能 / 轨迹分类这类「并列且需互相可辨」
+//      的维度。色相按 26° 以上间隔铺开，且刻意避开五个语义色相
+//      （error 22° / warning 68° / success 128° / accent 188° / info 245°），
+//      免得分类色被误读成状态。
+//
+// TS 侧（stores / canvas）用 styles/chart-palette.ts，两者由
+// tests/client/chart-palette-sync.test.ts 卡住，改一处必须同步改另一处。
+//
+// 用法：@use '@/styles/chart-colors' as chart;
+
+// ─── 序列色：同量纲堆叠分段 ──────────────────────────────────────
+$chart-input: #37a8c2;
+$chart-output: #50ad88;
+$chart-cache: #ce8360;
+
+// ─── 分类色：并列维度，色相均匀铺开 ──────────────────────────────
+$chart-cat-1: #fe91ae;
+$chart-cat-2: #fe996d;
+$chart-cat-3: #e3ae28;
+$chart-cat-4: #bcc03c;
+$chart-cat-5: #6cd180;
+$chart-cat-6: #10d5b3;
+$chart-cat-7: #18cfdb;
+$chart-cat-8: #36c8fe;
+$chart-cat-9: #8ab9fd;
+$chart-cat-10: #aeadff;
+$chart-cat-11: #d59bff;
+$chart-cat-12: #f390da;
+
+// ─── 中性色：不进榜的「其它」桶，以及 kind=memory 这类次级标记 ────
+$chart-other: #5a6470;
+$chart-memory: #99aec0;
diff --git a/packages/client/src/styles/chart-palette.ts b/packages/client/src/styles/chart-palette.ts
new file mode 100644
index 0000000..d18829e
--- /dev/null
+++ b/packages/client/src/styles/chart-palette.ts
@@ -0,0 +1,46 @@
+// 图表色板 —— 全项目唯一来源（TS 侧）。
+//
+// 与 styles/chart-colors.scss 是同一份色板的两种写法：SCSS 侧给样式表用，
+// TS 侧给 store / canvas 用（canvas 的 fillStyle 只接受字面量颜色）。
+// 两者由 tests/client/chart-palette-sync.test.ts 卡住，改一处必须同步改另一处。
+//
+// 用途分组见 chart-colors.scss 头部注释。
+
+/** 序列色：同一量纲的堆叠分段。 */
+export const CHART_SERIES = {
+  input: '#37a8c2',
+  output: '#50ad88',
+  cache: '#ce8360',
+} as const
+
+/** 分类色：并列且需互相可辨的维度，色相均匀铺开。 */
+export const CHART_CATEGORICAL = [
+  '#fe91ae',
+  '#fe996d',
+  '#e3ae28',
+  '#bcc03c',
+  '#6cd180',
+  '#10d5b3',
+  '#18cfdb',
+  '#36c8fe',
+  '#8ab9fd',
+  '#aeadff',
+  '#d59bff',
+  '#f390da',
+] as const
+
+/** 不进榜的「其它」桶。 */
+export const CHART_OTHER = '#5a6470'
+
+/** kind=memory 这类次级标记。 */
+export const CHART_MEMORY = '#99aec0'
+
+/**
+ * 按索引取分类色。越界回绕到色板开头，取不到时退到中性色。
+ * canvas 场景直接把这个字面量赋给 fillStyle / strokeStyle。
+ */
+export function readChartColor(index: number): string {
+  if (!Number.isFinite(index)) return CHART_OTHER
+  const safe = Math.abs(Math.trunc(index))
+  return CHART_CATEGORICAL[safe % CHART_CATEGORICAL.length] ?? CHART_OTHER
+}
diff --git a/packages/client/src/styles/code-block.scss b/packages/client/src/styles/code-block.scss
index 9e07d76..c40583f 100644
--- a/packages/client/src/styles/code-block.scss
+++ b/packages/client/src/styles/code-block.scss
@@ -88,7 +88,7 @@
       text-align: right;
       padding: 0 14px 0 10px;
       color: var(--text-faint);
-      background: rgba(0, 0, 0, 0.22);
+      background: $surface-inset;
       border-right: 1px solid var(--border-light);
     }
 
@@ -109,7 +109,7 @@
 
     .diff-line-context-fold {
       color: var(--text-faint);
-      background: rgba(255, 255, 255, 0.05);
+      background: rgba(var(--text-primary-rgb), 0.05);
       font-style: italic;
     }
 
diff --git a/packages/client/src/styles/global.scss b/packages/client/src/styles/global.scss
index 5448206..30c35dc 100644
--- a/packages/client/src/styles/global.scss
+++ b/packages/client/src/styles/global.scss
@@ -42,31 +42,31 @@ html[arco-theme='dark'],
 body[arco-theme='dark'],
 :root {
   // Arco 的 rgb 三元组族 —— 实心控件（按钮底、开关滑块、进度条）的真正来源。
-  // 霓虹青 oklch(0.805 0.148 188) ≈ rgb(45,212,191)，按亮度排 1→10。
-  --arcoblue-1: 12, 58, 56;
-  --arcoblue-2: 16, 84, 78;
-  --arcoblue-3: 22, 118, 108;
-  --arcoblue-4: 28, 148, 135;
-  --arcoblue-5: 34, 172, 156;
-  --arcoblue-6: 45, 212, 191;
-  --arcoblue-7: 70, 229, 209;
-  --arcoblue-8: 120, 239, 224;
-  --arcoblue-9: 172, 246, 238;
-  --arcoblue-10: 218, 250, 246;
+  // 霓虹青 oklch(0.805 0.148 188) → rgb(0,221,209)，按亮度排 1→10。
+  --arcoblue-1: 0, 50, 48;
+  --arcoblue-2: 0, 78, 74;
+  --arcoblue-3: 0, 108, 102;
+  --arcoblue-4: 0, 140, 133;
+  --arcoblue-5: 0, 176, 167;
+  --arcoblue-6: 0, 221, 209;
+  --arcoblue-7: 40, 236, 226;
+  --arcoblue-8: 100, 246, 238;
+  --arcoblue-9: 160, 250, 245;
+  --arcoblue-10: 215, 252, 250;
 
   // 三色语义族，与 variables.scss 保持一致：
-  //   green  = 荧光绿 rgb(107,247,84)   机器在动
-  //   orange = 琥珀橙 rgb(233,148,22)   需要你介入
+  //   green  = 荧光绿 rgb(173,231,78)   机器在动
+  //   orange = 琥珀橙 rgb(247,162,50)   需要你介入
   //   red    = 出错，唯一含义，不复用
-  --green-6: 107, 247, 84;
-  --green-5: 92, 232, 72;
-  --green-7: 124, 252, 104;
-  --orange-6: 233, 148, 22;
-  --orange-5: 221, 136, 18;
-  --orange-7: 242, 166, 34;
-  --red-6: 232, 78, 61;
-  --red-5: 222, 74, 58;
-  --red-7: 240, 96, 78;
+  --green-6: 173, 231, 78;
+  --green-5: 150, 208, 62;
+  --green-7: 196, 245, 100;
+  --orange-6: 247, 162, 50;
+  --orange-5: 226, 145, 40;
+  --orange-7: 252, 180, 70;
+  --red-6: 240, 90, 94;
+  --red-5: 224, 76, 80;
+  --red-7: 248, 112, 116;
 
   // Arco 的颜色值族 —— 描边、文字、浅底
   --color-primary-light-1: oklch(0.30 0.060 188);
@@ -367,6 +367,86 @@ $neon-hv: var(--accent-hover);
   animation: neon-pulse 1.1s ease-in-out infinite;
 }
 
+// ─── Live ring ────────────────────────────────────────────────
+// 「机器在动」的唯一指示形态：语音播放中、流式输出中。荧光绿单色呼吸，
+// 不做多色轮播 —— 同屏内每种颜色只承担一种含义，四色同闪会让这个指示读不出含义。
+// 三色语义见 variables.scss 顶部：绿 = 机器在动。
+@keyframes live-ring {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 2px rgba(var(--success-rgb), 0.45),
+      0 0 10px rgba(var(--success-rgb), 0.22),
+      0 0 20px rgba(var(--success-rgb), 0.1);
+  }
+  50% {
+    box-shadow:
+      0 0 0 2px rgba(var(--success-rgb), 0.85),
+      0 0 16px rgba(var(--success-rgb), 0.42),
+      0 0 28px rgba(var(--success-rgb), 0.2);
+  }
+}
+
+// ─── Status LED ───────────────────────────────────────────────
+// 状态灯：7px 圆点 + 发光。连通=绿（机器在动），断开=红（出错），
+// 橙色留给"需要你介入"，不用在这里。呼吸只在连通时走，断开是静止的 ——
+// 一个死掉的连接不该看起来还在动。
+.cy-led {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: $text-faint;
+
+  &.on {
+    background: $success;
+    box-shadow: 0 0 6px rgba(var(--success-rgb), 0.6);
+    animation: led-breathe 2.4s ease-in-out infinite;
+  }
+
+  &.off {
+    background: $error;
+    box-shadow: 0 0 6px rgba(var(--error-rgb), 0.45);
+  }
+
+  // 语义变体：与 prototype_reference 的 .led ok/run/err/warn/info/idle 对齐
+  &.ok {
+    background: $success;
+    box-shadow: 0 0 6px rgba(var(--success-rgb), 0.6);
+  }
+
+  &.run {
+    background: $accent-primary;
+    box-shadow: 0 0 6px rgba(var(--accent-primary-rgb), 0.6);
+    animation: led-breathe 1.4s ease-in-out infinite;
+  }
+
+  &.err {
+    background: $error;
+    box-shadow: 0 0 6px rgba(var(--error-rgb), 0.55);
+  }
+
+  &.warn {
+    background: $warning;
+    box-shadow: 0 0 6px rgba(var(--warning-rgb), 0.55);
+  }
+
+  &.info {
+    background: $info;
+    box-shadow: 0 0 6px rgba(var(--accent-info-rgb), 0.55);
+  }
+
+  &.idle {
+    background: $text-faint;
+  }
+}
+
+@keyframes led-breathe {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+
 // 尺寸统一：CYBER 的按钮偏小方硬
 .arco-btn {
   border-radius: $radius-sm;
@@ -429,6 +509,16 @@ $neon-hv: var(--accent-hover);
   color: var(--text-faint);
 }
 
+// 表单标签：原型 .field>label。小号淡字，不抢输入框的视觉重心。
+.arco-form-label {
+  font-size: 11.5px;
+  color: $text-muted;
+}
+
+.arco-form-item {
+  margin-bottom: 14px;
+}
+
 // 标签：状态语义用发丝线底 + 彩色字，不用实心块
 .arco-tag {
   border-radius: 4px;
@@ -465,7 +555,7 @@ $neon-hv: var(--accent-hover);
 .arco-drawer {
   background-color: var(--bg-card);
   border: 1px solid var(--border-color);
-  box-shadow: 0 18px 48px oklch(0 0 0 / 0.55);
+  box-shadow: var(--shadow-lg);
 }
 
 // 表格：去掉亮色分隔线的突兀感，表头沉下去
@@ -684,6 +774,66 @@ a {
   }
 }
 
+// 指标条：Usage / Logs / Performance 顶部的 4-5 个数字卡。
+// 左侧 2px 竖条承担语义色（青=系统、绿=正常、橙=要介入、红=出错），
+// 卡面本身不上色 —— 一屏四张彩色底会把下面的正文压没。
+.cy-kpis {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
+}
+
+.cy-kpi {
+  position: relative;
+  overflow: hidden;
+  background: $bg-card;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  padding: 12px 14px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: $accent-primary;
+    opacity: 0.7;
+  }
+
+  &.acc::after { background: $accent-primary; }
+  &.ok::after { background: $success; }
+  &.warn::after { background: $warning; }
+  &.err::after { background: $error; }
+  &.info::after { background: $info; }
+  &.flat::after { background: $border-color; }
+
+  .k {
+    font-family: $font-code;
+    font-size: 10.5px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: $text-faint;
+  }
+
+  .v {
+    margin-top: 6px;
+    font-family: $font-code;
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: -0.01em;
+    color: $text-primary;
+  }
+
+  .s {
+    margin-top: 4px;
+    font-size: 11.5px;
+    color: $text-muted;
+  }
+}
+
 // 键值表：左列键沉底、右列值，是设置类页面的主结构
 .cy-kv {
   display: grid;
@@ -728,6 +878,96 @@ a {
   }
 }
 
+// 网格：面板体里成组字段的排布
+.cy-grid2 {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.cy-grid4 {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
+}
+
+// 字段：上标签、下值，值可以是纯文本也可以是 tag/code 组合
+.cy-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+
+  > label {
+    font-size: 11.5px;
+    color: $text-muted;
+  }
+
+  .hint {
+    font-size: 11px;
+    color: $text-faint;
+  }
+}
+
+// 标签：发丝线底 + 语义字色，不用实心块
+.cy-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 4px;
+  font-family: $font-code;
+  font-size: 11px;
+  line-height: 1;
+  border: 1px solid $border-color;
+  background: $bg-secondary;
+  color: $text-muted;
+  white-space: nowrap;
+
+  &.ok {
+    color: $success;
+    border-color: rgba(var(--success-rgb), 0.35);
+    background: rgba(var(--success-rgb), 0.1);
+  }
+
+  &.err {
+    color: $error;
+    border-color: rgba(var(--error-rgb), 0.35);
+    background: rgba(var(--error-rgb), 0.1);
+  }
+
+  &.warn {
+    color: $warning;
+    border-color: rgba(var(--warning-rgb), 0.35);
+    background: rgba(var(--warning-rgb), 0.1);
+  }
+
+  &.run,
+  &.acc {
+    color: $accent-primary;
+    border-color: rgba(var(--accent-primary-rgb), 0.35);
+    background: var(--accent-soft);
+  }
+
+  &.info {
+    color: $info;
+    border-color: rgba(var(--accent-info-rgb), 0.35);
+    background: rgba(var(--accent-info-rgb), 0.1);
+  }
+}
+
+// 行内代码：等宽 + 深底 + 青字
+.cy-code {
+  font-family: $font-code;
+  font-size: 11.5px;
+  background: $code-bg;
+  border: 1px solid $border-light;
+  border-radius: 4px;
+  padding: 1px 5px;
+  color: $accent-primary;
+}
+
 // 表格式 tab 条：下划线指示，不做胶囊
 .cy-tabs {
   display: flex;
@@ -773,14 +1013,122 @@ a {
   gap: 12px;
 }
 
-// 分节小标题
+// 分节小标题：原型 .sec-t —— 文字后拉一条发丝线，视线顺着线落到下面的面板。
 .cy-sec-t {
+  display: flex;
+  align-items: center;
+  gap: 9px;
   font-family: $font-code;
   font-size: 11.5px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: $text-faint;
-  margin: 4px 0 2px;
+  margin: 4px 0 8px;
+
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: $border-light;
+  }
+}
+
+// 侧栏分组标题：原型 .slist-group-t。
+// 后面跟一条发丝线，视线从标题自然滑到下面的条目。
+.cy-slist-t {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 8px 5px;
+  font-family: $font-code;
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: $text-faint;
+
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: $border-light;
+  }
+}
+
+// 表格：原型 table.tb。表头吸顶 + 发丝线分隔 + 行悬停微亮。
+.cy-tbl-wrap {
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  overflow: auto;
+  background: $bg-card;
+}
+
+.cy-tbl {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+
+  th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: $bg-secondary;
+    text-align: left;
+    font-family: $font-code;
+    font-size: 10.5px;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: 0.09em;
+    text-transform: uppercase;
+    color: $text-faint;
+    padding: 9px 12px;
+    border-bottom: 1px solid $border-color;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: 9px 12px;
+    border-bottom: 1px solid $border-light;
+    vertical-align: middle;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  tbody tr:hover td {
+    background: $bg-secondary;
+  }
+}
+
+// 进度条：原型 .meter。5px 细条 + 霓虹辉光，语义色由修饰类决定。
+.cy-meter {
+  height: 5px;
+  border-radius: 3px;
+  background: $bg-input;
+  overflow: hidden;
+
+  > i {
+    display: block;
+    height: 100%;
+    border-radius: 3px;
+    background: $accent-primary;
+    box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.5);
+  }
+
+  &.warn > i {
+    background: $warning;
+    box-shadow: 0 0 8px rgba(var(--warning-rgb), 0.5);
+  }
+
+  &.err > i {
+    background: $error;
+    box-shadow: 0 0 8px rgba(var(--error-rgb), 0.5);
+  }
+
+  &.ok > i {
+    background: $success;
+    box-shadow: 0 0 8px rgba(var(--success-rgb), 0.5);
+  }
 }
 
 // 设置类页面的分区容器与标题。
@@ -819,7 +1167,7 @@ a {
   display: none;
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: $overlay-scrim;
   z-index: 999;
 }
 
@@ -838,7 +1186,7 @@ a {
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: $shadow-sm;
 }
 
 // Mobile responsive
diff --git a/packages/client/src/styles/variables.scss b/packages/client/src/styles/variables.scss
index 4f42675..e5ef597 100644
--- a/packages/client/src/styles/variables.scss
+++ b/packages/client/src/styles/variables.scss
@@ -20,7 +20,7 @@
   --bg-card-hover: oklch(0.225 0.016 246);
   --bg-input: oklch(0.105 0.012 252);    // 输入框，比卡片更沉，形成凹陷感
   // 半透明浮层需要 rgb 三元组才能拼 alpha，OKLCH 无法直接拆。
-  --bg-card-rgb: 40, 44, 56;
+  --bg-card-rgb: 14, 19, 25;
 
   // Borders — 发丝线分两档
   --border-color: oklch(0.305 0.018 242);
@@ -74,18 +74,41 @@
   --text-on-accent: oklch(0.160 0.030 200);
   --text-on-overlay: oklch(0.945 0.006 200);
 
+  // 投影：深色主题下用纯黑会糊成一片，用带蓝调的近黑才分得出层次。
+  --shadow-sm: 0 2px 8px oklch(0 0 0 / 0.28);
+  --shadow-md: 0 8px 24px oklch(0 0 0 / 0.34);
+  --shadow-lg: 0 18px 48px oklch(0 0 0 / 0.55);
+  // 只要投影颜色、不要固定几何时用这个（贴边抽屉、偏移投影这类自定义形状）。
+  --shadow-ink: oklch(0 0 0 / 0.28);
+
+  // 遮罩：模态 / 全屏浮层背后的压暗层。
+  --overlay-scrim: oklch(0 0 0 / 0.4);
+  --overlay-scrim-strong: oklch(0 0 0 / 0.85);
+  // 媒体上的深色小控件底（缩略图上的删除键）。
+  --overlay-chip: oklch(0 0 0 / 0.5);
+
+  // 凹陷面：代码行号槽这类内嵌区域，比所在容器再沉一层。
+  --surface-inset: oklch(0.092 0.012 252);
+
   // RGB components (for rgba() usage)
-  // 霓虹青 oklch(0.805 0.148 188) ≈ rgb(45, 212, 191)
-  --accent-primary-rgb: 45, 212, 191;
-  --accent-hover-rgb: 74, 226, 205;
-  --text-primary-rgb: 240, 246, 247;
-  --text-muted-rgb: 168, 180, 187;
-  // 荧光绿 oklch(0.860 0.190 128) ≈ rgb(107, 247, 84)
-  --success-rgb: 107, 247, 84;
-  --error-rgb: 232, 78, 61;
-  // 琥珀橙 oklch(0.780 0.155 68) ≈ rgb(233, 148, 22)
-  --warning-rgb: 233, 148, 22;
-  --accent-info-rgb: 105, 160, 232;
+  // 必须与上面的 OKLCH 值同源：否则 rgba(..., α) 的半透明层会和实色层差一个色相。
+  // 霓虹青 oklch(0.805 0.148 188) → rgb(0, 221, 209)
+  --accent-primary-rgb: 0, 221, 209;
+  // oklch(0.870 0.150 188) → rgb(16, 243, 230)
+  --accent-hover-rgb: 16, 243, 230;
+  --text-primary-rgb: 232, 238, 238;
+  --text-muted-rgb: 152, 162, 167;
+  // 荧光绿 oklch(0.860 0.190 128) → rgb(173, 231, 78)
+  --success-rgb: 173, 231, 78;
+  --error-rgb: 240, 90, 94;
+  // 琥珀橙 oklch(0.780 0.155 68) → rgb(247, 162, 50)
+  --warning-rgb: 247, 162, 50;
+  --accent-info-rgb: 95, 165, 222;
+  // 看板分类色：9 个列状态装不进三色语义系统，按「流程阶段」维度分色。
+  // 属于分类色板（不是语义色），但仍走令牌，便于统一调色与拼 RGB 三元组。
+  // 紫 oklch(0.722 0.177 305.5) → rgb(192, 132, 252)
+  --kanban-review: oklch(0.722 0.177 305.5);
+  --kanban-review-rgb: 192, 132, 252;
 }
 
 // ─── SCSS Variables (delegate to CSS custom properties) ────────
@@ -127,6 +150,20 @@ $msg-system-border: var(--msg-system-border);
 // Code
 $code-bg: var(--code-bg);
 
+// Shadows
+$shadow-sm: var(--shadow-sm);
+$shadow-md: var(--shadow-md);
+$shadow-lg: var(--shadow-lg);
+$shadow-ink: var(--shadow-ink);
+
+// Overlays
+$overlay-scrim: var(--overlay-scrim);
+$overlay-scrim-strong: var(--overlay-scrim-strong);
+$overlay-chip: var(--overlay-chip);
+
+// Surfaces
+$surface-inset: var(--surface-inset);
+
 // Typography
 // 正文用系统无衬线，标识/数据/代码用等宽——这是 CYBER 的核心排版特征。
 $font-ui: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
diff --git a/packages/client/src/utils/hermes/kanban-status-colors.ts b/packages/client/src/utils/hermes/kanban-status-colors.ts
new file mode 100644
index 0000000..0fb1edc
--- /dev/null
+++ b/packages/client/src/utils/hermes/kanban-status-colors.ts
@@ -0,0 +1,89 @@
+/**
+ * 看板列状态的配色 —— 全项目唯一来源。
+ *
+ * 看板有 9 个列状态，装不进三色语义系统的三个槽位（青=系统本体 / 橙=需要你介入 /
+ * 绿=机器在动），所以这里用「分类色板」的方式处理：每个状态一个可辨的色相，
+ * 用于区分列 —— 它表达的是「这是第几个阶段」，不是「状态好坏」。
+ * 见 docs/ui-baseline.md §7。
+ *
+ * 但有三个状态要向语义系统对齐，因为它们的含义在全项目是固定的：
+ *   running  机器在动  → 绿
+ *   blocked  出错了    → 红
+ *   done     机器做完了 → 绿
+ * 其余六个是纯粹的流程阶段分类，走分类色。
+ *
+ * 早先这套颜色散在 KanbanTaskCard.vue 和 KanbanTaskDrawer.vue 两处，且两处
+ * 互相矛盾：卡片用 #8b5cf6（紫）表示 running，抽屉用 --accent-primary（青）；
+ * 同一个状态在卡片和抽屉里是两个颜色。集中到这里就是修掉这个问题。
+ */
+
+/** 看板列状态的全集。顺序与 i18n locales 中的 columns 一致。 */
+export const KANBAN_STATUSES = [
+  'triage',
+  'todo',
+  'scheduled',
+  'ready',
+  'running',
+  'blocked',
+  'review',
+  'done',
+  'archived',
+] as const
+
+export type KanbanStatus = (typeof KANBAN_STATUSES)[number]
+
+/**
+ * 各状态的主色（实色，用于左边条 / 圆点 / 文字）。
+ *
+ * 这几个值用 CSS 变量而非硬编码色值，是为了让语义状态跟着令牌走 ——
+ * 令牌改了这里自动跟着变，不用两处同步。
+ *
+ * 分类状态（triage/todo/scheduled/ready/review/archived）用具体色值：
+ * 它们没有语义令牌可依附，而用硬编码色值反而能保证「一眼分得出是哪一列」。
+ */
+export const KANBAN_STATUS_COLORS: Record<KanbanStatus, string> = {
+  // 分类阶段 —— 中性灰阶
+  triage: 'var(--text-muted)',
+  todo: 'var(--text-muted)',
+  scheduled: 'var(--text-muted)',
+  // 分类阶段 —— 蓝青族
+  ready: 'var(--accent-info)',
+  // 语义对齐
+  running: 'var(--success)',
+  blocked: 'var(--error)',
+  // 分类阶段 —— 紫（review 与其它列拉开距离）
+  review: 'var(--kanban-review)',
+  // 语义对齐
+  done: 'var(--success)',
+  // 分类阶段 —— 归档即退场，用最弱的灰
+  archived: 'var(--text-faint)',
+}
+
+/**
+ * 各状态的弱底色（用于 badge 背景）。
+ *
+ * 语义状态用 rgba(令牌, 0.12) 拼 alpha；分类状态用对应主色的 12% 透明度。
+ * 分类色的 RGB 三元组也进了令牌（--kanban-review-rgb / --text-muted-rgb），
+ * 所以这里全部走 rgba(var(--*-rgb), α)，没有字面量。
+ */
+export const KANBAN_STATUS_BG: Record<KanbanStatus, string> = {
+  triage: 'rgba(var(--text-muted-rgb), 0.14)',
+  todo: 'rgba(var(--text-muted-rgb), 0.14)',
+  scheduled: 'rgba(var(--text-muted-rgb), 0.14)',
+  ready: 'rgba(var(--accent-info-rgb), 0.12)',
+  running: 'rgba(var(--success-rgb), 0.12)',
+  blocked: 'rgba(var(--error-rgb), 0.12)',
+  review: 'rgba(var(--kanban-review-rgb), 0.14)',
+  done: 'rgba(var(--success-rgb), 0.12)',
+  archived: 'rgba(var(--text-muted-rgb), 0.14)',
+}
+
+/** 取某状态的主色；未知状态退到最弱的中性色。 */
+export function kanbanStatusColor(status: string): string {
+  return KANBAN_STATUS_COLORS[status as KanbanStatus] ?? 'var(--text-faint)'
+}
+
+/** 取某状态的弱底色；未知状态退到中性灰。 */
+export function kanbanStatusBg(status: string): string {
+  return KANBAN_STATUS_BG[status as KanbanStatus] ?? 'rgba(var(--text-muted-rgb), 0.14)'
+}
diff --git a/packages/client/src/views/hermes/ChannelsView.vue b/packages/client/src/views/hermes/ChannelsView.vue
index af02261..962415a 100644
--- a/packages/client/src/views/hermes/ChannelsView.vue
+++ b/packages/client/src/views/hermes/ChannelsView.vue
@@ -27,9 +27,13 @@ onMounted(() => {
       <h2 class="header-title">{{ t('sidebar.channels') }}</h2>
     </header>
 
-    <div class="channels-content">
+    <div class="channels-content cy-view">
       <a-spin :loading="settingsStore.loading || settingsStore.saving" :tip="t('common.loading')">
-        <PlatformSettings v-if="!settingsStore.loading" />
+        <div v-if="!settingsStore.loading" class="cy-panel">
+          <div class="cy-panel-b">
+            <PlatformSettings />
+          </div>
+        </div>
       </a-spin>
     </div>
   </div>
@@ -45,9 +49,11 @@ onMounted(() => {
 }
 
 .channels-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
   position: relative;
+
+  // settings 组件根节点自带 margin-top，放进面板后会多出一截
+  :deep(.settings-section:first-child) {
+    margin-top: 0;
+  }
 }
 </style>
diff --git a/packages/client/src/views/hermes/DevicesView.vue b/packages/client/src/views/hermes/DevicesView.vue
index 2b2dbca..f9f4917 100644
--- a/packages/client/src/views/hermes/DevicesView.vue
+++ b/packages/client/src/views/hermes/DevicesView.vue
@@ -55,6 +55,8 @@ const pairingRequesting = computed(() =>
   Boolean(pendingPairingDevice.value && updatingDeviceId.value === pendingPairingDevice.value.id),
 )
 
+const onlineCount = computed(() => devices.value.filter(device => device.online).length)
+
 function endpointOrder(kind: LanEndpointKind): number {
   if (kind === 'web') return 0
   return 1
@@ -64,11 +66,10 @@ function endpointLabel(kind: LanEndpointKind): string {
   return t(`devices.endpoint.${kind}`)
 }
 
-// Arco 的 a-tag 用 color 而不是 naive 的 type，且没有 round/shape prop，
-// 圆角靠 CSS 还原（见 .device-tag）。
-function endpointTagColor(kind: LanEndpointKind) {
-  if (kind === 'web') return 'arcoblue'
-  return 'gray'
+// 标签 tone 走 CYBER 语义色：青=系统、绿=正常、橙=要介入、红=出错。
+function endpointTone(kind: LanEndpointKind) {
+  if (kind === 'web') return 'acc'
+  return ''
 }
 
 function inboundStatusLabel(status: DeviceInboundStatus): string {
@@ -83,20 +84,20 @@ function pairedLabel(device: LanDeviceInfo): string {
   return device.outbound_status === 'approved' ? t('devices.paired') : outboundStatusLabel(device.outbound_status)
 }
 
-function pairedTagColor(device: LanDeviceInfo) {
-  if (device.outbound_status === 'approved') return 'green'
-  if (device.outbound_status === 'pending') return 'arcoblue'
-  if (device.outbound_status === 'blocked') return 'red'
-  if (device.outbound_status === 'rejected') return 'orange'
-  return 'gray'
+function pairedTone(device: LanDeviceInfo) {
+  if (device.outbound_status === 'approved') return 'ok'
+  if (device.outbound_status === 'pending') return 'acc'
+  if (device.outbound_status === 'blocked') return 'err'
+  if (device.outbound_status === 'rejected') return 'warn'
+  return ''
 }
 
 function onlineLabel(device: LanDeviceInfo): string {
   return device.online ? t('devices.online') : t('devices.offline')
 }
 
-function onlineTagColor(device: LanDeviceInfo) {
-  return device.online ? 'green' : 'gray'
+function onlineTone(device: LanDeviceInfo) {
+  return device.online ? 'ok' : 'idle'
 }
 
 function canRequestPairing(device: LanDeviceInfo): boolean {
@@ -121,8 +122,21 @@ function requestProcessLabel(device: LanDeviceInfo): string {
   return requestProcessed(device) ? t('devices.processed') : t('devices.unprocessed')
 }
 
-function requestProcessTagColor(device: LanDeviceInfo) {
-  return requestProcessed(device) ? 'green' : 'orange'
+function requestProcessTone(device: LanDeviceInfo) {
+  return requestProcessed(device) ? 'ok' : 'warn'
+}
+
+function inboundTone(device: LanDeviceInfo) {
+  switch (device.inbound_status) {
+    case 'approved':
+      return 'ok'
+    case 'blocked':
+      return 'err'
+    case 'rejected':
+      return 'warn'
+    default:
+      return 'acc'
+  }
 }
 
 function formatOs(device: LanDeviceInfo): string {
@@ -309,83 +323,104 @@ onMounted(() => {
     </header>
 
     <a-spin :loading="loading" class="devices-spin">
-      <div class="devices-content">
-        <div v-if="devices.length === 0 && !loading" class="empty-state">
+      <div class="cy-view devices-content">
+        <div class="cy-kpis">
+          <div class="cy-kpi acc">
+            <div class="k">{{ t('devices.kpiDiscovered') }}</div>
+            <div class="v">{{ devices.length }}</div>
+            <div class="s">{{ formatTime(state.last_scanned_at) }}</div>
+          </div>
+          <div class="cy-kpi ok">
+            <div class="k">{{ t('devices.kpiOnline') }}</div>
+            <div class="v">{{ onlineCount }}</div>
+          </div>
+          <div class="cy-kpi err">
+            <div class="k">{{ t('devices.kpiOffline') }}</div>
+            <div class="v">{{ devices.length - onlineCount }}</div>
+          </div>
+          <div class="cy-kpi warn">
+            <div class="k">{{ t('devices.kpiRequests') }}</div>
+            <div class="v">{{ state.requests.length }}</div>
+          </div>
+        </div>
+
+        <div class="cy-sec-t devices-sec">{{ t('devices.discoveredHosts') }}</div>
+
+        <div v-if="devices.length === 0 && !loading" class="cy-panel empty-state">
           <div class="empty-title">{{ t('devices.empty') }}</div>
           <a-button size="small" :loading="scanning || state.scanning" @click="refreshDevices">
             {{ t('devices.refresh') }}
           </a-button>
         </div>
 
-        <div v-else class="device-grid">
-          <article v-for="device in devices" :key="device.id" class="device-card">
-            <div class="device-card-header">
-              <div class="device-title-block">
-                <div class="device-name">{{ device.computer_name || device.ip }}</div>
-                <a v-if="safeDeviceUrl(device.url)" class="device-link" :href="safeDeviceUrl(device.url)" target="_blank" rel="noopener noreferrer">
-                  {{ device.ip }}:{{ device.http_port }}
-                </a>
-                <span v-else class="device-link">{{ device.ip }}:{{ device.http_port }}</span>
+        <div v-else class="cy-grid2 device-grid">
+          <article v-for="device in devices" :key="device.id" class="cy-panel device-card">
+            <div class="cy-panel-h">
+              <span class="cy-led" :class="onlineTone(device)" />
+              <h3>{{ device.computer_name || device.ip }}</h3>
+              <span class="cy-tag" :class="endpointTone(device.endpoint_kind)">{{ endpointLabel(device.endpoint_kind) }}</span>
+              <div class="cy-panel-actions">
+                <span class="cy-tag" :class="onlineTone(device)">{{ onlineLabel(device) }}</span>
+                <span class="cy-tag" :class="pairedTone(device)">{{ pairedLabel(device) }}</span>
+                <span v-if="device.inbound_status === 'blocked'" class="cy-tag err">
+                  {{ inboundStatusLabel(device.inbound_status) }}
+                </span>
               </div>
-              <a-tag size="small" class="device-tag" :color="endpointTagColor(device.endpoint_kind)">
-                {{ endpointLabel(device.endpoint_kind) }}
-              </a-tag>
             </div>
 
-            <div class="device-status-row">
-              <a-tag size="small" class="device-tag" :color="onlineTagColor(device)">
-                {{ onlineLabel(device) }}
-              </a-tag>
-              <a-tag size="small" class="device-tag" :color="pairedTagColor(device)">
-                {{ pairedLabel(device) }}
-              </a-tag>
-              <a-tag v-if="device.inbound_status === 'blocked'" size="small" class="device-tag" color="red">
-                {{ inboundStatusLabel(device.inbound_status) }}
-              </a-tag>
-            </div>
+            <div class="cy-panel-b">
+              <div class="cy-kv">
+                <div class="cy-kr">
+                  <span class="cy-kk">{{ t('devices.address') }}</span>
+                  <span class="cy-kv-v">
+                    <a v-if="safeDeviceUrl(device.url)" class="device-link" :href="safeDeviceUrl(device.url)" target="_blank" rel="noopener noreferrer">
+                      {{ device.ip }}:{{ device.http_port }}
+                    </a>
+                    <span v-else class="device-link">{{ device.ip }}:{{ device.http_port }}</span>
+                  </span>
+                </div>
+                <div class="cy-kr">
+                  <span class="cy-kk">{{ t('devices.os') }}</span>
+                  <span class="cy-kv-v">{{ formatOs(device) || t('devices.unknown') }}</span>
+                </div>
+                <div class="cy-kr">
+                  <span class="cy-kk">{{ t('devices.agentVersion') }}</span>
+                  <span class="cy-kv-v"><code class="cy-code">{{ formatVersion(device.hermes_agent_version) }}</code></span>
+                </div>
+                <div class="cy-kr">
+                  <span class="cy-kk">{{ t('devices.webUiVersion') }}</span>
+                  <span class="cy-kv-v"><code class="cy-code">{{ formatVersion(device.hermes_web_ui_version) }}</code></span>
+                </div>
+                <div class="cy-kr">
+                  <span class="cy-kk">{{ t('devices.responseMs') }}</span>
+                  <span class="cy-kv-v">{{ device.response_ms }}ms</span>
+                </div>
+              </div>
 
-            <dl class="device-meta-list">
-              <div>
-                <dt>{{ t('devices.os') }}</dt>
-                <dd>{{ formatOs(device) || t('devices.unknown') }}</dd>
+              <div class="device-actions">
+                <a-button v-if="canRequestPairing(device)" size="mini" type="primary" :loading="updatingDeviceId === device.id" @click="openPairingCodeModal(device)">
+                  {{ t('devices.requestPairing') }}
+                </a-button>
+                <a-button
+                  v-if="canBlock(device)"
+                  size="mini"
+                  type="text"
+                  status="danger"
+                  :loading="updatingDeviceId === device.id"
+                  @click="updateDevice(device, 'block')"
+                >
+                  {{ t('devices.block') }}
+                </a-button>
+                <a-button
+                  v-else
+                  size="mini"
+                  type="text"
+                  :loading="updatingDeviceId === device.id"
+                  @click="updateDevice(device, 'unblock')"
+                >
+                  {{ t('devices.unblock') }}
+                </a-button>
               </div>
-              <div>
-                <dt>{{ t('devices.agentVersion') }}</dt>
-                <dd>{{ formatVersion(device.hermes_agent_version) }}</dd>
-              </div>
-              <div>
-                <dt>{{ t('devices.webUiVersion') }}</dt>
-                <dd>{{ formatVersion(device.hermes_web_ui_version) }}</dd>
-              </div>
-              <div>
-                <dt>{{ t('devices.responseMs') }}</dt>
-                <dd>{{ device.response_ms }}ms</dd>
-              </div>
-            </dl>
-
-            <div class="device-actions">
-              <a-button v-if="canRequestPairing(device)" size="mini" type="primary" :loading="updatingDeviceId === device.id" @click="openPairingCodeModal(device)">
-                {{ t('devices.requestPairing') }}
-              </a-button>
-              <a-button
-                v-if="canBlock(device)"
-                size="mini"
-                type="text"
-                status="danger"
-                :loading="updatingDeviceId === device.id"
-                @click="updateDevice(device, 'block')"
-              >
-                {{ t('devices.block') }}
-              </a-button>
-              <a-button
-                v-else
-                size="mini"
-                type="text"
-                :loading="updatingDeviceId === device.id"
-                @click="updateDevice(device, 'unblock')"
-              >
-                {{ t('devices.unblock') }}
-              </a-button>
             </div>
           </article>
         </div>
@@ -402,12 +437,12 @@ onMounted(() => {
             <div class="request-name">{{ requestDevice.computer_name || requestDevice.ip }}</div>
             <div class="request-meta">{{ requestDevice.ip }}:{{ requestDevice.http_port }}</div>
             <div class="request-status-row">
-              <a-tag size="small" class="device-tag" :color="requestProcessTagColor(requestDevice)">
+              <span class="cy-tag" :class="requestProcessTone(requestDevice)">
                 {{ requestProcessLabel(requestDevice) }}
-              </a-tag>
-              <a-tag size="small" class="device-tag" :color="requestDevice.inbound_status === 'blocked' ? 'red' : requestDevice.inbound_status === 'rejected' ? 'orange' : requestDevice.inbound_status === 'approved' ? 'green' : 'arcoblue'">
+              </span>
+              <span class="cy-tag" :class="inboundTone(requestDevice)">
                 {{ inboundStatusLabel(requestDevice.inbound_status) }}
-              </a-tag>
+              </span>
             </div>
           </div>
           <div class="request-actions">
@@ -500,18 +535,21 @@ onMounted(() => {
 
 .devices-content {
   height: 100%;
-  overflow: auto;
-  padding: 20px;
+  overflow-y: auto;
+}
+
+.devices-sec {
+  margin: 16px 0 8px;
 }
 
 .empty-state {
-  height: 100%;
   min-height: 280px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
+  padding: 32px;
   color: $text-muted;
 }
 
@@ -519,50 +557,21 @@ onMounted(() => {
   font-size: 14px;
 }
 
-.device-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 12px;
-}
-
 .device-card {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  min-height: 220px;
-  padding: 14px;
-  border: 1px solid $border-color;
-  border-radius: $radius-sm;
-  background: $bg-card;
-}
 
-.device-card-header,
-.device-status-row,
-.device-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.device-card-header {
-  justify-content: space-between;
-}
-
-.device-title-block {
-  min-width: 0;
-}
-
-.device-name {
-  color: $text-primary;
-  font-size: 14px;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  .cy-panel-b {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 12px;
+  }
 }
 
 .device-link {
   color: $accent-primary;
+  font-family: $font-code;
   font-size: 12px;
   text-decoration: none;
 
@@ -571,43 +580,14 @@ onMounted(() => {
   }
 }
 
-.device-meta-list {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-
-  div {
-    display: grid;
-    grid-template-columns: 92px minmax(0, 1fr);
-    gap: 8px;
-  }
-
-  dt {
-    color: $text-muted;
-    font-size: 12px;
-  }
-
-  dd {
-    margin: 0;
-    color: $text-secondary;
-    font-size: 12px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
 .device-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   flex-wrap: wrap;
   margin-top: auto;
 }
 
-// naive 的圆角标签是 border-radius: calc(height / 2)，Arco 的 a-tag 没有
-// shape/round prop，只能用同等圆角还原。
-.device-tag {
-  border-radius: 999px;
-}
-
 .request-empty {
   padding: 40px 0;
   color: $text-muted;
@@ -657,7 +637,7 @@ onMounted(() => {
   padding: 20px;
   border-radius: $radius-sm;
   background: $bg-card;
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
+  box-shadow: $shadow-lg;
 }
 
 .pairing-code-title {
diff --git a/packages/client/src/views/hermes/FilesView.vue b/packages/client/src/views/hermes/FilesView.vue
index 81e7f7e..7178f1f 100644
--- a/packages/client/src/views/hermes/FilesView.vue
+++ b/packages/client/src/views/hermes/FilesView.vue
@@ -132,33 +132,37 @@ watch(
 
 <template>
   <div class="files-view" :class="{ 'profile-config-editor-view': isProfileConfigEditor }">
-    <template v-if="isProfileConfigEditor">
-      <div class="profile-config-editor-header">
-        <div class="profile-config-title">
-          <span class="profile-config-eyebrow">{{ t('profiles.editConfig') }}</span>
-          <span class="profile-config-file">{{ profileConfigTitle }}</span>
-        </div>
+    <div v-if="isProfileConfigEditor" class="profile-config-editor-panel cy-panel">
+      <div class="profile-config-editor-header cy-panel-h">
+        <h3>{{ profileConfigTitle }}</h3>
+        <span class="cy-meta">{{ t('profiles.editConfig') }}</span>
       </div>
       <div class="profile-config-editor-content">
         <FileEditor v-if="filesStore.editingFile" :custom-close="closeProfileConfigEditor" />
       </div>
-    </template>
-    <div v-else class="files-tree-panel">
-      <FileTree :profile="scopedProfile" />
     </div>
-    <div v-if="!isProfileConfigEditor" class="files-main-panel">
-      <FileToolbar
-        @show-new-file="handleShowNewFile"
-        @show-new-folder="handleShowNewFolder"
-        @show-upload="showUpload = true"
-      />
-      <FileBreadcrumb />
-      <div class="files-content">
-        <FileEditor v-if="filesStore.editingFile" />
-        <FilePreview v-else-if="filesStore.previewFile" />
-        <FileList v-else @contextmenu-entry="handleContextMenu" />
+    <template v-else>
+      <div class="files-tree-panel cy-panel">
+        <div class="cy-panel-h">
+          <h3>{{ t('files.fileTree') }}</h3>
+          <span v-if="scopedProfile" class="cy-tag info">{{ scopedProfile }}</span>
+        </div>
+        <FileTree :profile="scopedProfile" class="files-tree-scroll" />
       </div>
-    </div>
+      <div class="files-main-panel cy-panel">
+        <FileToolbar
+          @show-new-file="handleShowNewFile"
+          @show-new-folder="handleShowNewFolder"
+          @show-upload="showUpload = true"
+        />
+        <FileBreadcrumb />
+        <div class="files-content">
+          <FileEditor v-if="filesStore.editingFile" />
+          <FilePreview v-else-if="filesStore.previewFile" />
+          <FileList v-else @contextmenu-entry="handleContextMenu" />
+        </div>
+      </div>
+    </template>
     <FileContextMenu
       ref="contextMenuRef"
       @rename="handleRename"
@@ -179,43 +183,32 @@ watch(
 
 .files-view {
   display: flex;
+  gap: 12px;
   height: 100%;
+  min-height: 0;
+  padding: 20px 22px 24px;
   overflow: hidden;
+
+  // 两窗格并排：不吃 .cy-panel 的堆叠间距
+  > .cy-panel + .cy-panel {
+    margin-top: 0;
+  }
 }
 
 .profile-config-editor-view {
   flex-direction: column;
 }
 
-.profile-config-editor-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 16px;
-  border-bottom: 1px solid $border-color;
-  background-color: $bg-card;
-}
-
-.profile-config-title {
+.profile-config-editor-panel {
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  min-width: 0;
-  gap: 2px;
-}
-
-.profile-config-eyebrow {
-  font-size: 12px;
-  color: $text-secondary;
-}
-
-.profile-config-file {
-  font-size: 14px;
-  font-weight: 600;
-  color: $text-primary;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+}
+
+.profile-config-editor-header {
+  flex-shrink: 0;
 }
 
 .profile-config-editor-content {
@@ -228,9 +221,16 @@ watch(
   width: 240px;
   min-width: 180px;
   max-width: 400px;
-  border-right: 1px solid $border-color;
-  overflow-y: auto;
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.files-tree-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 .files-main-panel {
@@ -250,14 +250,13 @@ watch(
 @media (max-width: $breakpoint-mobile) {
   .files-view {
     flex-direction: column;
+    padding: 12px;
   }
 
   .files-tree-panel {
     width: 100%;
     max-width: none;
     height: 200px;
-    border-right: none;
-    border-bottom: 1px solid $border-color;
   }
 }
 </style>
diff --git a/packages/client/src/views/hermes/HermesMissingView.vue b/packages/client/src/views/hermes/HermesMissingView.vue
index 1336018..ea45acc 100644
--- a/packages/client/src/views/hermes/HermesMissingView.vue
+++ b/packages/client/src/views/hermes/HermesMissingView.vue
@@ -25,15 +25,24 @@ async function handleRetry() {
 <template>
   <div class="hermes-missing-view">
     <div class="hermes-missing-card">
-      <h1 class="hermes-missing-title">{{ t("hermesMissing.title") }}</h1>
-      <p class="hermes-missing-desc">{{ t("hermesMissing.intro") }}</p>
-      <code class="hermes-missing-code">{{ t("hermesMissing.installCmd") }}</code>
-      <p class="hermes-missing-desc">{{ t("hermesMissing.envIntro") }}</p>
-      <code class="hermes-missing-code">{{ t("hermesMissing.envCmd") }}</code>
-      <p class="hermes-missing-hint">{{ t("hermesMissing.restartHint") }}</p>
-      <button class="hermes-missing-btn" :disabled="rechecking" @click="handleRetry">
-        {{ rechecking ? "..." : t("hermesMissing.retry") }}
-      </button>
+      <header class="hermes-missing-hd">
+        <div class="hermes-missing-mark" aria-hidden="true">⚠</div>
+        <h1 class="hermes-missing-title">{{ t("hermesMissing.title") }}</h1>
+        <p class="hermes-missing-desc">{{ t("hermesMissing.intro") }}</p>
+      </header>
+
+      <div class="hermes-missing-bd">
+        <pre class="hermes-missing-term"><code>{{ t("hermesMissing.installCmd") }}</code></pre>
+
+        <p class="hermes-missing-desc">{{ t("hermesMissing.envIntro") }}</p>
+        <pre class="hermes-missing-term"><code>{{ t("hermesMissing.envCmd") }}</code></pre>
+
+        <p class="hermes-missing-hint">{{ t("hermesMissing.restartHint") }}</p>
+
+        <button class="hermes-missing-btn" :disabled="rechecking" @click="handleRetry">
+          {{ rechecking ? "..." : t("hermesMissing.retry") }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -47,70 +56,115 @@ async function handleRetry() {
   align-items: center;
   justify-content: center;
   background: $bg-primary;
+  padding: 20px;
 }
 
 .hermes-missing-card {
-  width: 520px;
+  width: 560px;
   max-width: calc(100vw - 32px);
-  padding: 48px 56px;
   border: 1px solid $border-color;
   border-radius: $radius-lg;
   background: $bg-card;
-  text-align: center;
+  box-shadow: $shadow-lg;
+  overflow: hidden;
+}
 
-  @media (max-width: $breakpoint-mobile) {
-    padding: 32px 24px;
-  }
+.hermes-missing-hd {
+  padding: 26px 26px 18px;
+  text-align: center;
+}
+
+// 缺失态用琥珀橙：需要人介入装 CLI，不是系统自己在动
+.hermes-missing-mark {
+  width: 46px;
+  height: 46px;
+  margin: 0 auto 14px;
+  border: 1px solid $warning;
+  border-radius: $radius-lg;
+  display: grid;
+  place-items: center;
+  color: $warning;
+  font-family: $font-code;
+  font-size: 20px;
+  line-height: 1;
+  box-shadow:
+    0 0 0 1px rgba(var(--warning-rgb), 0.2),
+    0 0 26px rgba(var(--warning-rgb), 0.16) inset;
 }
 
 .hermes-missing-title {
-  font-size: 24px;
+  margin: 0;
+  font-family: $font-code;
+  font-size: 16px;
   font-weight: 600;
+  line-height: 1.3;
   color: $text-primary;
-  margin: 0 0 16px;
 }
 
 .hermes-missing-desc {
-  font-size: 14px;
-  color: $text-muted;
-  margin: 0 0 10px;
+  margin: 9px 0 0;
+  font-size: 12.5px;
   line-height: 1.6;
+  color: $text-muted;
 }
 
-.hermes-missing-code {
-  display: block;
-  padding: 10px 12px;
-  margin: 0 0 16px;
+.hermes-missing-bd {
+  padding: 0 30px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .hermes-missing-desc {
+    margin: 0;
+  }
+}
+
+// 终端块：原型 .term —— 深底 + 等宽，命令直接照抄
+.hermes-missing-term {
+  margin: 0;
+  padding: 12px 14px;
   border: 1px solid $border-color;
   border-radius: $radius-sm;
-  background: $bg-input;
-  color: $text-primary;
+  background: $code-bg;
   font-family: $font-code;
-  font-size: 13px;
+  font-size: 12px;
+  line-height: 1.65;
+  color: $text-secondary;
+  white-space: pre-wrap;
   word-break: break-all;
-  text-align: left;
+  overflow: auto;
+
+  code {
+    font-family: inherit;
+    color: $accent-primary;
+  }
 }
 
 .hermes-missing-hint {
-  font-size: 13px;
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.6;
   color: $text-secondary;
-  margin: 0 0 24px;
 }
 
+// 主按钮：原型 .btn.pri
 .hermes-missing-btn {
   width: 100%;
-  padding: 14px;
-  border: none;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid $accent-primary;
   border-radius: $radius-sm;
-  background: $text-primary;
+  background: $accent-primary;
   color: var(--text-on-accent);
-  font-size: 15px;
-  font-weight: 500;
+  font-family: $font-code;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
   cursor: pointer;
-  transition: opacity $transition-fast;
+  transition: box-shadow $transition-fast, opacity $transition-fast;
 
-  &:hover {
-    opacity: 0.85;
+  &:hover:not(:disabled) {
+    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.4);
   }
 
   &:disabled {
@@ -118,4 +172,14 @@ async function handleRetry() {
     cursor: not-allowed;
   }
 }
+
+@media (max-width: $breakpoint-mobile) {
+  .hermes-missing-hd {
+    padding: 24px 22px 16px;
+  }
+
+  .hermes-missing-bd {
+    padding: 0 22px 22px;
+  }
+}
 </style>
diff --git a/packages/client/src/views/hermes/HistoryView.vue b/packages/client/src/views/hermes/HistoryView.vue
index 8f0b430..2d26cdb 100644
--- a/packages/client/src/views/hermes/HistoryView.vue
+++ b/packages/client/src/views/hermes/HistoryView.vue
@@ -824,7 +824,7 @@ function handleBatchDeleteConfirm() {
         <div v-else-if="hermesSessions.length === 0" class="session-empty">{{ t('chat.noSessions') }}</div>
 
         <template v-if="pinnedSessions.length > 0">
-          <div class="session-group-header session-group-header--static">
+          <div class="cy-slist-t session-group-header session-group-header--static">
             <span class="session-group-label">{{ t('chat.pinned') }}</span>
             <span class="session-group-count">{{ pinnedSessions.length }}</span>
           </div>
@@ -847,7 +847,7 @@ function handleBatchDeleteConfirm() {
         </template>
 
         <template v-for="group in groupedSessions" :key="group.source">
-          <div class="session-group-header" @click="toggleGroup(group.source)">
+          <div class="cy-slist-t session-group-header" @click="toggleGroup(group.source)">
             <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="group-chevron" :class="{ collapsed: collapsedGroups.has(group.source) }"><polyline points="9 18 15 12 9 6"/></svg>
             <span class="session-group-label">{{ group.label }}</span>
             <span class="session-group-count">{{ group.sessions.length }}</span>
@@ -906,8 +906,8 @@ function handleBatchDeleteConfirm() {
             </template>
           </a-button>
           <span class="header-session-title">{{ activeSessionTitle }}</span>
-          <span v-if="activeSessionSource" class="source-badge">{{ getSourceLabel(activeSessionSource) }}</span>
-          <span v-if="historySession?.workspace" class="workspace-badge" :title="historySession.workspace">📁 {{ historySession.workspace.split('/').pop() || historySession.workspace }}</span>
+          <span v-if="activeSessionSource" class="cy-tag source-badge">{{ getSourceLabel(activeSessionSource) }}</span>
+          <span v-if="historySession?.workspace" class="cy-tag workspace-badge" :title="historySession.workspace">📁 {{ historySession.workspace.split('/').pop() || historySession.workspace }}</span>
         </div>
         <div class="header-actions">
           <a-tooltip trigger="hover" :content="t('chat.outlineTitle')">
@@ -992,7 +992,7 @@ function handleBatchDeleteConfirm() {
     height: 100%;
     z-index: 120;
     background: $bg-card;
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 2px 0 8px var(--shadow-ink);
     width: $sidebar-width;
 
     &.collapsed {
@@ -1010,7 +1010,7 @@ function handleBatchDeleteConfirm() {
   .session-backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.4);
+    background: $overlay-scrim;
     z-index: 110;
     opacity: 0;
     pointer-events: none;
@@ -1061,23 +1061,21 @@ function handleBatchDeleteConfirm() {
   border-radius: $radius-sm;
 
   &:hover {
-    background: rgba($accent-primary, 0.06);
+    background: rgba(var(--accent-primary-rgb), 0.06);
   }
 }
 
 .session-list-title {
-  font-size: 12px;
+  font-family: $font-code;
+  font-size: 11px;
   font-weight: 600;
-  color: $text-muted;
+  color: $text-faint;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.14em;
 }
 
+// 排版交给全局 .cy-slist-t，这里只保留交互行为。
 .session-group-header {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 10px 4px;
   cursor: pointer;
   user-select: none;
 }
@@ -1097,23 +1095,21 @@ function handleBatchDeleteConfirm() {
 }
 
 .session-group-label {
-  font-size: 10px;
   font-weight: 600;
-  color: $text-muted;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  color: $text-faint;
 }
 
 .session-group-count {
+  font-family: $font-code;
   font-size: 10px;
-  color: $text-muted;
+  color: $text-faint;
   font-weight: 400;
 }
 
 .session-items {
   flex: 1;
   overflow-y: auto;
-  padding: 0 6px 12px;
+  padding: 0 8px 12px;
 }
 
 .session-loading,
@@ -1148,6 +1144,12 @@ function handleBatchDeleteConfirm() {
   padding: 21px 20px;
   border-bottom: 1px solid $border-color;
   flex-shrink: 0;
+  // 顶栏压一层青色微光，把注意力从顶边收回内容区（与对话台一致）。
+  background: radial-gradient(
+    120% 160% at 50% 0%,
+    rgba(var(--accent-primary-rgb), 0.07),
+    transparent 70%
+  );
 }
 
 .header-left {
@@ -1164,27 +1166,23 @@ function handleBatchDeleteConfirm() {
 }
 
 .header-session-title {
-  font-size: 16px;
+  font-family: $font-code;
+  font-size: 14px;
   font-weight: 600;
   color: $text-primary;
-  line-height: 28px;
+  line-height: 1.3;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+// 颜色由全局 .cy-tag 负责，这里只保留排版约束。
 .source-badge {
-  display: inline-flex;
-  align-items: center;
-  font-size: 10px;
-  color: $text-muted;
-  background: rgba($text-muted, 0.12);
-  padding: 1px 7px;
-  border-radius: 8px;
   flex-shrink: 0;
-  white-space: nowrap;
-  height: 18px;
-  line-height: 16px;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
 }
 
 .header-actions {
@@ -1205,18 +1203,9 @@ function handleBatchDeleteConfirm() {
 }
 
 .workspace-badge {
-  display: inline-flex;
-  align-items: center;
-  font-size: 11px;
-  color: $text-muted;
-  background: rgba(255, 255, 255, 0.05);
-  padding: 2px 8px;
-  border-radius: 4px;
-  height: 20px;
   max-width: 160px;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   cursor: default;
 }
 </style>
diff --git a/packages/client/src/views/hermes/JobsView.vue b/packages/client/src/views/hermes/JobsView.vue
index e241829..feb439d 100644
--- a/packages/client/src/views/hermes/JobsView.vue
+++ b/packages/client/src/views/hermes/JobsView.vue
@@ -122,7 +122,10 @@ function arrowIcon(field: 'time' | 'name'): string {
     </header>
 
     <div class="jobs-split">
-      <div class="jobs-top">
+      <div class="cy-view jobs-top">
+        <div class="cy-sec-t jobs-sec">
+          {{ t('jobs.sectionList') }} · {{ jobsStore.jobs.length }}
+        </div>
         <a-spin :loading="jobsStore.loading && jobsStore.jobs.length === 0">
           <JobsPanel
             :selected-job-id="selectedJobId"
@@ -171,9 +174,6 @@ function arrowIcon(field: 'time' | 'name'): string {
 }
 
 .jobs-top {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
   min-height: 120px;
 }
 
@@ -187,6 +187,7 @@ function arrowIcon(field: 'time' | 'name'): string {
   flex: 1;
   min-height: 120px;
   overflow: hidden;
+  padding: 0 22px 20px;
 }
 
 .header-actions {
diff --git a/packages/client/src/views/hermes/JourneyView.vue b/packages/client/src/views/hermes/JourneyView.vue
index 5ede610..7e2ee2c 100644
--- a/packages/client/src/views/hermes/JourneyView.vue
+++ b/packages/client/src/views/hermes/JourneyView.vue
@@ -3,6 +3,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { fetchJourneyGraph, type JourneyGraphResponse, type JourneyMemory, type JourneyNode } from '@/api/hermes/journey'
+import { CHART_CATEGORICAL, CHART_MEMORY } from '@/styles/chart-palette'
 
 interface SceneNode extends JourneyNode {
   x: number
@@ -20,23 +21,26 @@ interface ProjectedNode extends SceneNode {
   visible: boolean
 }
 
-const CATEGORY_PALETTE = [
-  '#4f8cff',
-  '#ff4fa3',
-  '#38c976',
-  '#f6c542',
-  '#9b6cff',
-  '#ff7a45',
-  '#22c7d8',
-  '#e84d5b',
-  '#7cb342',
-  '#d66efd',
-  '#00a884',
-  '#ff9f1a',
-]
+// 分类色板：表达「这是哪一类节点」，不是状态好坏。
+// 统一取 styles/chart-palette.ts 的分类色板（见 docs/ui-baseline.md §7）。
+const CATEGORY_PALETTE = CHART_CATEGORICAL
 const MIN_ZOOM = 0.25
 const MAX_ZOOM = 2.4
 
+// canvas 只接受字面量颜色，第一次绘制时把令牌解析成字符串缓存起来。
+let canvasTokens: { accent: string; ink: string; backdrop: string } | null = null
+function getCanvasTokens() {
+  if (canvasTokens) return canvasTokens
+  const style = getComputedStyle(document.documentElement)
+  const read = (name: string, fallback: string) => style.getPropertyValue(name).trim() || fallback
+  canvasTokens = {
+    accent: read('--accent-primary-rgb', '0, 221, 209'),
+    ink: read('--text-primary-rgb', '232, 238, 238'),
+    backdrop: read('--surface-inset', 'oklch(0.092 0.012 252)'),
+  }
+  return canvasTokens
+}
+
 const { t } = useI18n()
 const message = useMessage()
 
@@ -127,7 +131,7 @@ const sceneNodes = computed<SceneNode[]>(() => {
       y: center.y + Math.cos(b) * spread * 0.85,
       z: center.z + Math.sin(a) * Math.sin(b) * spread,
       radius: node.kind === 'memory' ? 4 : Math.min(13, 5 + Math.sqrt(node.useCount || 0) * 1.7),
-      color: node.kind === 'memory' ? '#6ba3d6' : categoryColor(category),
+      color: node.kind === 'memory' ? CHART_MEMORY : categoryColor(category),
     }
   })
 })
@@ -263,10 +267,11 @@ function draw(now = performance.now()) {
 
 function drawBackground() {
   if (!ctx) return
+  const { accent } = getCanvasTokens()
   const gradient = ctx.createRadialGradient(width * 0.5, height * 0.42, 10, width * 0.5, height * 0.5, Math.max(width, height) * 0.68)
-  gradient.addColorStop(0, 'rgba(74, 144, 217, 0.14)')
-  gradient.addColorStop(0.46, 'rgba(120, 120, 120, 0.05)')
-  gradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
+  gradient.addColorStop(0, `rgba(${accent}, 0.10)`)
+  gradient.addColorStop(0.46, `rgba(${accent}, 0.03)`)
+  gradient.addColorStop(1, 'transparent')
   ctx.fillStyle = gradient
   ctx.fillRect(0, 0, width, height)
 }
@@ -287,7 +292,7 @@ function drawEdges(projectedById: Map<string, ProjectedNode>, activeId: string,
     ctx.shadowColor = 'transparent'
     ctx.shadowBlur = 0
     // 青色系与全站强调色一致；亮度差异由 alpha 控制，不换色相。
-    ctx.strokeStyle = `rgba(45, 212, 191, ${alpha})`
+    ctx.strokeStyle = `rgba(${getCanvasTokens().accent}, ${alpha})`
     const curve = edgeCurve(source, target, `${edge.source}:${edge.target}`)
     drawCurvedEdge(source, target, curve)
     if (active) drawPulseEdge(source, target, curve, pulse, now)
@@ -323,8 +328,9 @@ function drawPulseEdge(source: ProjectedNode, target: ProjectedNode, curve: { cx
   const head = (now * 0.0018) % 1
   const tail = Math.max(0, head - 0.24)
   const points = sampleCurve(source, target, curve, 1 - head, 1 - tail, 18).reverse()
-  const glowColor = 'rgba(45, 212, 191, 0.92)'
-  const coreColor = 'rgba(235, 255, 252, 0.96)'
+  const { accent, ink } = getCanvasTokens()
+  const glowColor = `rgba(${accent}, 0.92)`
+  const coreColor = `rgba(${ink}, 0.96)`
   ctx.save()
   ctx.lineJoin = 'round'
   ctx.lineCap = 'round'
@@ -380,8 +386,10 @@ function drawNode(node: ProjectedNode, activeId: string, activeNeighbors: Set<st
   const alpha = active || nearby || categoryActive || !hasFocus ? 1 : 0.32
   const pulse = active ? 0.5 + Math.sin(now * 0.005) * 0.5 : 0
   const glow = active ? 20 + pulse * 24 : node.createdBy === 'agent' ? 12 : node.pinned ? 10 : 0
-  // 节点底衬，用来把节点从边线里“抠”出来；取侧栏色比页面底更深。
-  const nodeBackdrop = '#1c1f26'
+  // 节点底衬，用来把节点从边线里“抠”出来；取比页面底（--bg-primary）略深的一档，
+  // 否则暗节点会浮在边线上。
+  const { accent, ink, backdrop } = getCanvasTokens()
+  const nodeBackdrop = backdrop
 
   ctx.save()
   ctx.globalAlpha = 1
@@ -402,7 +410,7 @@ function drawNode(node: ProjectedNode, activeId: string, activeNeighbors: Set<st
 
   if (node.pinned || active) {
     ctx.shadowBlur = 0
-    ctx.strokeStyle = active ? 'rgba(235, 255, 252, 0.92)' : 'rgba(45, 212, 191, 0.7)'
+    ctx.strokeStyle = active ? `rgba(${ink}, 0.92)` : `rgba(${accent}, 0.7)`
     ctx.lineWidth = active ? 2 : 1.4
     ctx.beginPath()
     ctx.arc(node.sx, node.sy, node.size + 5, 0, Math.PI * 2)
@@ -693,7 +701,7 @@ watch(sceneNodes, () => {
                 @mouseenter="hoverCategory = stat.category"
                 @mouseleave="hoverCategory = ''"
               >
-                <i :style="{ backgroundColor: stat.color }" />
+                <i :style="{ backgroundColor: stat.color, color: stat.color }" />
                 {{ stat.category }} {{ stat.count }} / {{ Math.round((stat.count / visibleNodeCount) * 100) }}%
               </span>
             </div>
@@ -706,9 +714,9 @@ watch(sceneNodes, () => {
       <template #title>
         <div v-if="selectedNode" class="drawer-title-row">
           <span>{{ detailTitle(selectedNode) }}</span>
-          <a-tag size="small" :color="selectedNode.kind === 'memory' ? 'arcoblue' : 'green'" :bordered="false">
+          <span class="cy-tag" :class="selectedNode.kind === 'memory' ? 'info' : 'acc'">
             {{ selectedNode.kind }}
-          </a-tag>
+          </span>
         </div>
       </template>
 
@@ -742,7 +750,7 @@ watch(sceneNodes, () => {
           </div>
         </div>
 
-        <a-tag v-if="selectedNode.pinned" size="small" color="orange" :bordered="false">{{ t('journey.pinned') }}</a-tag>
+        <span v-if="selectedNode.pinned" class="cy-tag warn">{{ t('journey.pinned') }}</span>
       </template>
     </a-drawer>
   </div>
@@ -796,8 +804,8 @@ watch(sceneNodes, () => {
   grid-template-columns: minmax(0, 1fr);
   min-height: 0;
   background:
-    radial-gradient(circle at 50% 35%, rgba(var(--accent-info-rgb), 0.12), transparent 36%),
-    linear-gradient(180deg, color-mix(in srgb, $bg-primary 88%, #000 12%), $bg-primary);
+    radial-gradient(circle at 50% 35%, rgba(var(--accent-primary-rgb), 0.09), transparent 36%),
+    linear-gradient(180deg, var(--surface-inset), $bg-primary);
 }
 
 .galaxy-canvas-wrap {
@@ -825,16 +833,22 @@ watch(sceneNodes, () => {
   left: 16px;
   bottom: 16px;
   display: flex;
-  gap: 10px;
-  color: $text-secondary;
-  font-size: 12px;
+  gap: 7px;
   pointer-events: none;
 
+  // HUD 是浮在星图上的读数，用原型的 .tag 规格：发丝线边 + 小圆角 + 等宽字。
   span {
-    border: 1px solid color-mix(in srgb, $border-color 70%, transparent);
-    border-radius: 999px;
-    padding: 5px 9px;
-    background: color-mix(in srgb, $bg-primary 72%, transparent);
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 7px;
+    border-radius: 4px;
+    border: 1px solid $border-color;
+    background: color-mix(in srgb, $bg-secondary 88%, transparent);
+    color: $text-muted;
+    font-family: $font-code;
+    font-size: 11px;
+    line-height: 1;
     backdrop-filter: blur(10px);
   }
 }
@@ -851,12 +865,10 @@ watch(sceneNodes, () => {
 
 .category-bar {
   display: flex;
-  height: 8px;
+  height: 5px;
   overflow: hidden;
-  border: 1px solid color-mix(in srgb, $border-color 72%, transparent);
-  border-radius: 999px;
-  background: color-mix(in srgb, $bg-primary 76%, transparent);
-  box-shadow: 0 0 18px rgba(var(--accent-info-rgb), 0.12);
+  border-radius: 3px;
+  background: $bg-input;
 
   span {
     display: block;
@@ -875,33 +887,37 @@ watch(sceneNodes, () => {
 .category-legend {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px 10px;
-  color: $text-secondary;
+  gap: 6px 7px;
+  font-family: $font-code;
   font-size: 11px;
 
   span {
     display: inline-flex;
     align-items: center;
     gap: 5px;
-    padding: 4px 7px;
-    border: 1px solid color-mix(in srgb, $border-color 68%, transparent);
-    border-radius: 999px;
-    background: color-mix(in srgb, $bg-primary 74%, transparent);
+    height: 20px;
+    padding: 0 7px;
+    border: 1px solid $border-color;
+    border-radius: 4px;
+    background: color-mix(in srgb, $bg-secondary 88%, transparent);
+    color: $text-muted;
     backdrop-filter: blur(10px);
     cursor: default;
 
     &.active {
       color: $text-primary;
-      border-color: rgba(var(--accent-info-rgb), 0.42);
-      background: rgba(var(--accent-info-rgb), 0.1);
+      border-color: rgba(var(--accent-primary-rgb), 0.42);
+      background: rgba(var(--accent-primary-rgb), 0.1);
     }
   }
 
+  // 色点用原型的 .led 规格：辉光走 currentColor，所以 color 必须跟着 background 一起给。
   i {
     width: 7px;
     height: 7px;
     flex: 0 0 auto;
-    border-radius: 999px;
+    border-radius: 50%;
+    box-shadow: 0 0 6px currentColor;
   }
 }
 
@@ -929,13 +945,14 @@ watch(sceneNodes, () => {
 .detail-card {
   display: grid;
   gap: 6px;
-  padding: 12px;
-  border: 1px solid $border-light;
-  border-radius: $radius-sm;
-  background: rgba(var(--accent-primary-rgb), 0.04);
+  padding: 12px 13px;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  background: $bg-card;
 
   code {
     color: $text-primary;
+    font-family: $font-code;
     font-size: 12px;
     line-height: 1.5;
     white-space: normal;
@@ -946,18 +963,18 @@ watch(sceneNodes, () => {
 .memory-card {
   display: grid;
   gap: 8px;
-  padding: 14px;
-  border: 1px solid color-mix(in srgb, $border-color 82%, transparent);
-  border-radius: $radius-sm;
+  padding: 13px 14px;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
   background:
-    linear-gradient(180deg, rgba(var(--accent-info-rgb), 0.08), transparent),
+    linear-gradient(180deg, rgba(var(--accent-primary-rgb), 0.07), transparent),
     $bg-secondary;
 
   p {
     margin: 0;
-    color: $text-primary;
-    font-size: 13px;
-    line-height: 1.65;
+    color: $text-secondary;
+    font-size: 12.5px;
+    line-height: 1.7;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
@@ -965,9 +982,12 @@ watch(sceneNodes, () => {
 
 .detail-card-label,
 .detail-item span {
-  color: $text-muted;
-  font-size: 11px;
+  color: $text-faint;
+  font-family: $font-code;
+  font-size: 10.5px;
   line-height: 1.2;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
 }
 
 .detail-grid {
@@ -980,15 +1000,16 @@ watch(sceneNodes, () => {
   display: grid;
   gap: 5px;
   min-height: 72px;
-  padding: 12px;
-  border: 1px solid $border-light;
+  padding: 10px 11px;
+  border: 1px solid $border-color;
   border-radius: $radius-sm;
   background: $bg-secondary;
 
   strong {
     align-self: end;
     color: $text-primary;
-    font-size: 13px;
+    font-family: $font-code;
+    font-size: 12.5px;
     font-weight: 600;
     overflow-wrap: anywhere;
   }
diff --git a/packages/client/src/views/hermes/KanbanView.vue b/packages/client/src/views/hermes/KanbanView.vue
index 66469bc..0a5bfc7 100644
--- a/packages/client/src/views/hermes/KanbanView.vue
+++ b/packages/client/src/views/hermes/KanbanView.vue
@@ -9,6 +9,7 @@ import KanbanCreateForm from '@/components/hermes/kanban/KanbanCreateForm.vue'
 import { DEFAULT_KANBAN_BOARD, useKanbanStore } from '@/stores/hermes/kanban'
 import { useProfilesStore } from '@/stores/hermes/profiles'
 import { withDefaultAssignee } from '@/utils/hermes/kanban-assignees'
+import { kanbanStatusColor } from '@/utils/hermes/kanban-status-colors'
 import type { KanbanTaskStatus } from '@/api/hermes/kanban'
 import type { ProfileAvatar } from '@/api/hermes/profiles'
 
@@ -94,6 +95,12 @@ const visibleBoardStatuses = computed(() => {
 
 const visibleAssignees = computed(() => withDefaultAssignee(kanbanStore.assignees, kanbanStore.stats?.by_assignee || {}))
 
+// 列状态色来自集中色板（utils/hermes/kanban-status-colors.ts）。
+// 统计 chip、列头、任务列表三处用的是同一份色板。
+function statusColorStyle(status: string) {
+  return { '--kanban-status-color': kanbanStatusColor(status) }
+}
+
 const profileAvatarByName = computed<Record<string, ProfileAvatar | null>>(() => {
   return Object.fromEntries(profilesStore.profiles.map(profile => [profile.name, profile.avatar || null]))
 })
@@ -289,11 +296,13 @@ async function handleDispatch() {
         type="button"
         class="stat-chip"
         :class="[status, { active: kanbanStore.filterStatus === status }]"
+        :style="statusColorStyle(status)"
         :aria-pressed="kanbanStore.filterStatus === status"
         @click="handleStatusChipClick(status)"
       >
-        <span class="stat-count">{{ kanbanStore.stats.by_status[status] || 0 }}</span>
+        <span class="stat-led" aria-hidden="true" />
         <span class="stat-label">{{ t(`kanban.columns.${status}`, status) }}</span>
+        <span class="stat-count">{{ kanbanStore.stats.by_status[status] || 0 }}</span>
       </button>
       <button
         type="button"
@@ -302,8 +311,8 @@ async function handleDispatch() {
         :aria-pressed="!kanbanStore.filterStatus"
         @click="handleStatusChipClick(null)"
       >
-        <span class="stat-count">{{ kanbanStore.stats.total }}</span>
         <span class="stat-label">{{ t('kanban.stats.total') }}</span>
+        <span class="stat-count">{{ kanbanStore.stats.total }}</span>
       </button>
     </div>
 
@@ -318,12 +327,12 @@ async function handleDispatch() {
             :class="['kanban-column', `status-${status}`]"
           >
             <template #header>
-              <span class="column-header" :class="`status-${status}`">
+              <span class="column-header" :class="`status-${status}`" :style="statusColorStyle(status)">
                 <span class="status-dot" aria-hidden="true" />
                 <span>{{ t(`kanban.columns.${status}`, status) }} ({{ tasksByStatus[status].length }})</span>
               </span>
             </template>
-            <div class="task-list" :class="`status-${status}`">
+            <div class="task-list" :class="`status-${status}`" :style="statusColorStyle(status)">
               <KanbanTaskCard
                 v-for="task in tasksByStatus[status]"
                 :key="task.id"
@@ -386,71 +395,79 @@ async function handleDispatch() {
 
 .stats-bar {
   display: flex;
+  align-items: center;
   gap: 8px;
-  padding: 12px 20px;
+  padding: 12px 22px 4px;
   flex-shrink: 0;
   flex-wrap: wrap;
 }
 
+// 状态色由模板内联注入（集中色板 utils/hermes/kanban-status-colors.ts），
+// 这里只声明缺省值兜底。
 .stat-chip,
 .column-header,
 .task-list {
-  --kanban-status-color: #64748b;
+  --kanban-status-color: var(--text-faint);
 
-  &.triage,
-  &.status-triage { --kanban-status-color: #94a3b8; }
-  &.todo,
-  &.status-todo { --kanban-status-color: #38bdf8; }
-  &.scheduled,
-  &.status-scheduled { --kanban-status-color: #06b6d4; }
-  &.ready,
-  &.status-ready { --kanban-status-color: #f59e0b; }
-  &.running,
-  &.status-running { --kanban-status-color: #8b5cf6; }
-  &.blocked,
-  &.status-blocked { --kanban-status-color: #ef4444; }
-  &.review,
-  &.status-review { --kanban-status-color: #ec4899; }
-  &.done,
-  &.status-done { --kanban-status-color: #22c55e; }
-  &.archived,
-  &.status-archived { --kanban-status-color: #64748b; }
-  &.total { --kanban-status-color: #e2e8f0; }
+  &.total { --kanban-status-color: var(--text-primary); }
 }
 
 .stat-chip {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  border-radius: 16px;
-  font-size: 12px;
-  border: 1px solid $border-light;
-  border-left: 3px solid var(--kanban-status-color);
-  background: transparent;
+  gap: 7px;
+  height: 28px;
+  padding: 0 11px;
+  border-radius: 14px;
+  border: 1px solid $border-color;
+  background: $bg-card;
+  font-family: $font-code;
+  font-size: 11.5px;
+  line-height: 1;
   color: inherit;
   cursor: pointer;
-  font: inherit;
-  line-height: inherit;
+  transition: border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease;
 
-  &:hover,
-  &.active {
+  &:hover {
     border-color: var(--kanban-status-color);
-    background-color: rgba(var(--accent-primary-rgb), 0.08);
   }
 
-  &.active .stat-label,
-  &.active .stat-count {
+  &.active {
+    border-color: var(--kanban-status-color);
     color: var(--kanban-status-color);
   }
 
+  &.total {
+    border-color: rgba(var(--accent-primary-rgb), 0.4);
+    color: $accent-primary;
+    background: var(--accent-soft);
+
+    &:hover,
+    &.active {
+      border-color: rgba(var(--accent-primary-rgb), 0.6);
+      color: $accent-primary;
+    }
+  }
+
   &:focus-visible {
     outline: 2px solid var(--kanban-status-color);
     outline-offset: 2px;
   }
 }
 
+// 状态点用 currentColor 发辉光，所以色和底色要一起给。
+.stat-led {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  background: var(--kanban-status-color);
+  color: var(--kanban-status-color);
+  box-shadow: 0 0 6px currentColor;
+}
+
 .stat-count {
+  font-size: 13px;
   font-weight: 600;
   color: $text-primary;
 }
@@ -460,35 +477,57 @@ async function handleDispatch() {
 }
 
 .kanban-board {
-  padding: 14px 20px 20px;
+  padding: 10px 22px 24px;
   flex: 1;
   min-height: 0;
   overflow-y: auto;
 }
 
+// 折叠列 = 原型的 .kcol：发丝线边框 + 小圆角 + 面板体。
+.kanban-board :deep(.arco-collapse-item) {
+  margin-bottom: 10px;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  background: $bg-card;
+  overflow: hidden;
+}
+
+.kanban-board :deep(.arco-collapse-header) {
+  padding: 9px 12px;
+  background: $bg-secondary;
+  border-bottom: 1px solid $border-light;
+  font-family: $font-code;
+}
+
+.kanban-board :deep(.arco-collapse-content) {
+  padding: 8px;
+  background: $bg-card;
+}
+
 .column-header {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--kanban-status-color);
+  font-family: $font-code;
+  font-size: 11.5px;
   font-weight: 600;
 }
 
 .status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
   background: var(--kanban-status-color);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kanban-status-color) 18%, transparent);
+  color: var(--kanban-status-color);
+  box-shadow: 0 0 6px currentColor;
   flex-shrink: 0;
 }
 
 .task-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  border-left: 2px solid var(--kanban-status-color);
-  padding-left: 10px;
+  gap: 7px;
 }
 
 .column-empty {
@@ -497,7 +536,7 @@ async function handleDispatch() {
   justify-content: center;
   min-height: 40px;
   font-size: 12px;
-  color: $text-muted;
+  color: $text-faint;
 }
 
 .board-form {
diff --git a/packages/client/src/views/hermes/LogsView.vue b/packages/client/src/views/hermes/LogsView.vue
index 32d6e6c..3552b3f 100644
--- a/packages/client/src/views/hermes/LogsView.vue
+++ b/packages/client/src/views/hermes/LogsView.vue
@@ -43,12 +43,31 @@ const filteredEntries = computed(() => {
   )
 })
 
-function levelClass(level: string): string {
+const errorCount = computed(
+  () => filteredEntries.value.filter(e => e.level === 'ERROR' || e.level === 'FATAL').length,
+)
+const warningCount = computed(
+  () => filteredEntries.value.filter(e => e.level === 'WARNING' || e.level === 'WARN').length,
+)
+const infoCount = computed(
+  () => filteredEntries.value.filter(e => e.level === 'INFO').length,
+)
+
+function levelTone(level: string): string {
   switch (level) {
-    case 'ERROR': return 'level-error'
-    case 'WARNING': return 'level-warning'
-    case 'DEBUG': return 'level-debug'
-    default: return 'level-info'
+    case 'ERROR':
+    case 'FATAL':
+      return 'err'
+    case 'WARNING':
+    case 'WARN':
+      return 'warn'
+    case 'INFO':
+      return 'ok'
+    case 'DEBUG':
+    case 'TRACE':
+      return 'info'
+    default:
+      return 'idle'
   }
 }
 
@@ -119,7 +138,29 @@ onMounted(async () => {
       </div>
     </header>
 
-    <div class="logs-body">
+    <div class="cy-view logs-body">
+      <div class="cy-kpis">
+        <div class="cy-kpi acc">
+          <div class="k">{{ t('logs.total') }}</div>
+          <div class="v">{{ filteredEntries.length }}</div>
+          <div class="s">{{ t('logs.window') }}</div>
+        </div>
+        <div class="cy-kpi err">
+          <div class="k">{{ t('logs.error') }}</div>
+          <div class="v">{{ errorCount }}</div>
+        </div>
+        <div class="cy-kpi warn">
+          <div class="k">{{ t('logs.warning') }}</div>
+          <div class="v">{{ warningCount }}</div>
+        </div>
+        <div class="cy-kpi ok">
+          <div class="k">{{ t('logs.info') }}</div>
+          <div class="v">{{ infoCount }}</div>
+        </div>
+      </div>
+
+      <div class="cy-sec-t logs-sec">{{ t('logs.stream') }}</div>
+
       <a-spin :loading="loading" class="logs-spin">
         <div v-if="filteredEntries.length === 0 && !loading" class="logs-empty">
           {{ t('logs.noEntries') }}
@@ -129,10 +170,11 @@ onMounted(async () => {
             v-for="(entry, idx) in filteredEntries"
             :key="idx"
             class="log-entry"
-            :class="levelClass(entry.level)"
+            :class="'tone-' + levelTone(entry.level)"
           >
+            <span class="cy-led" :class="levelTone(entry.level)" />
             <span class="log-time">{{ formatTime(entry.timestamp) }}</span>
-            <span class="log-level" :class="levelClass(entry.level)">{{ entry.level }}</span>
+            <span class="cy-tag log-level" :class="levelTone(entry.level)">{{ entry.level }}</span>
             <span class="log-logger">{{ entry.logger }}</span>
             <template v-if="parseAccessLog(entry.message)">
               <span class="access-method">{{ parseAccessLog(entry.message)!.method }}</span>
@@ -186,58 +228,60 @@ onMounted(async () => {
 }
 
 .logs-body {
-  flex: 1;
-  overflow-y: auto;
   min-height: 0;
 }
 
-.logs-spin {
-  min-height: 100%;
-  display: block;
+.logs-sec {
+  margin: 16px 0 8px;
+}
 
-  // The previous library wrapped the default slot in two extra divs; a-spin
-  // renders the slot content as direct children instead.
-  > * {
-    min-height: 100%;
-  }
+.logs-spin {
+  display: block;
 }
 
 .logs-empty {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
+  padding: 40px 0;
   color: $text-muted;
   font-size: 13px;
 }
 
 .log-list {
-  padding: 4px 0;
-  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .log-entry {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 3px 20px;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 6px 12px;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  background: $bg-card;
   font-family: $font-code;
   font-size: 12px;
   line-height: 1.6;
-  border-left: 2px solid transparent;
+  transition: border-color $transition-fast, background-color $transition-fast;
 
   &:hover {
-    background-color: rgba(var(--accent-primary-rgb), 0.03);
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
+    background: $bg-secondary;
   }
 
-  &.level-error {
-    border-left-color: $error;
-    .log-message { color: $error; }
+  > .cy-led {
+    margin-top: 6px;
   }
 
-  &.level-warning {
-    border-left-color: $warning;
-    .log-message { color: $warning; }
+  &.tone-err .log-message {
+    color: $error;
+  }
+
+  &.tone-warn .log-message {
+    color: $warning;
   }
 }
 
@@ -249,17 +293,9 @@ onMounted(async () => {
 
 .log-level {
   flex-shrink: 0;
-  font-weight: 600;
-  font-size: 10px;
-  padding: 0 4px;
-  border-radius: 2px;
-  min-width: 42px;
-  text-align: center;
-
-  &.level-error { background: rgba(var(--error-rgb), 0.12); color: $error; }
-  &.level-warning { background: rgba(var(--warning-rgb), 0.12); color: $warning; }
-  &.level-debug { background: rgba(var(--accent-primary-rgb), 0.06); color: $text-muted; }
-  &.level-info { background: rgba(var(--accent-primary-rgb), 0.06); color: $text-muted; }
+  justify-content: center;
+  min-width: 62px;
+  margin-top: 1px;
 }
 
 .log-logger {
diff --git a/packages/client/src/views/hermes/McpManagerView.vue b/packages/client/src/views/hermes/McpManagerView.vue
index 3689912..3664637 100644
--- a/packages/client/src/views/hermes/McpManagerView.vue
+++ b/packages/client/src/views/hermes/McpManagerView.vue
@@ -80,29 +80,31 @@ function handleInput(text: string) {
   }, 1500)
 }
 
+// 解析结果用可区分成败的类型承载：解析失败（抛错）和解析出 null 是两件事，
+// 不能都用 null 表示 —— 否则 `??` 会把「解析出 null」误当成失败去回退。
+type ParseOutcome =
+  | { ok: true; data: unknown }
+  | { ok: false }
+
+function parseAsMode(text: string, mode: 'json' | 'yaml'): ParseOutcome {
+  try {
+    if (mode === 'json') {
+      return { ok: true, data: JSON.parse(text) }
+    }
+    return { ok: true, data: yaml.load(text, { schema: yaml.JSON_SCHEMA }) }
+  } catch {
+    return { ok: false }
+  }
+}
+
 function handleModeChange(mode: 'json' | 'yaml') {
   if (!jsonText.value.trim()) return
-  // Try to parse current content in old format
+  // 先按旧格式解析；旧格式解不出来时，再按新格式试一次。
   const oldMode = mode === 'json' ? 'yaml' : 'json'
-  let data: Record<string, unknown> | null = null
-  try {
-    if (oldMode === 'json') {
-      data = JSON.parse(jsonText.value)
-    } else {
-      data = yaml.load(jsonText.value, { schema: yaml.JSON_SCHEMA }) as Record<string, unknown>
-    }
-  } catch {
-    // If parse fails, try the new format
-    try {
-      if (mode === 'json') {
-        data = JSON.parse(jsonText.value)
-      } else {
-        data = yaml.load(jsonText.value, { schema: yaml.JSON_SCHEMA }) as Record<string, unknown>
-      }
-    } catch {
-      return
-    }
-  }
+  const oldOutcome = parseAsMode(jsonText.value, oldMode)
+  const outcome = oldOutcome.ok ? oldOutcome : parseAsMode(jsonText.value, mode)
+  if (!outcome.ok) return
+  const data = outcome.data
   if (!data || typeof data !== 'object') return
   // Convert to new format
   if (mode === 'json') {
@@ -493,7 +495,7 @@ async function saveToolsVisibility() {
       </div>
     </header>
 
-    <div class="mcp-content" :class="{ 'is-loading': loading && servers.length === 0 }">
+    <div class="mcp-content cy-view" :class="{ 'is-loading': loading && servers.length === 0 }">
       <div v-if="loading && servers.length === 0" class="mcp-loading-state">
         <a-spin />
       </div>
@@ -502,22 +504,22 @@ async function saveToolsVisibility() {
           {{ error }}
         </a-alert>
 
-        <div class="summary-grid">
-          <div class="summary-card">
-            <span class="summary-label">{{ t('mcp.total') }}</span>
-            <strong>{{ summary.total }}</strong>
+        <div class="cy-kpis mcp-kpis">
+          <div class="cy-kpi acc">
+            <div class="k">{{ t('mcp.total') }}</div>
+            <div class="v">{{ summary.total }}</div>
           </div>
-          <div class="summary-card success">
-            <span class="summary-label">{{ t('mcp.connected') }}</span>
-            <strong>{{ summary.connected }}</strong>
+          <div class="cy-kpi ok">
+            <div class="k">{{ t('mcp.connected') }}</div>
+            <div class="v">{{ summary.connected }}</div>
           </div>
-          <div class="summary-card warning">
-            <span class="summary-label">{{ t('mcp.disconnected') }}</span>
-            <strong>{{ summary.disconnected }}</strong>
+          <div class="cy-kpi err">
+            <div class="k">{{ t('mcp.disconnected') }}</div>
+            <div class="v">{{ summary.disconnected }}</div>
           </div>
-          <div class="summary-card info">
-            <span class="summary-label">{{ t('mcp.tool') }}</span>
-            <strong>{{ summary.totalTools }}</strong>
+          <div class="cy-kpi info">
+            <div class="k">{{ t('mcp.tool') }}</div>
+            <div class="v">{{ summary.totalTools }}</div>
           </div>
         </div>
 
@@ -539,7 +541,7 @@ async function saveToolsVisibility() {
           </div>
         </div>
 
-        <div v-if="filteredServers.length" class="servers-grid">
+        <div v-if="filteredServers.length" class="cy-grid2">
           <McpServerCard
             v-for="server in filteredServers"
             :key="server.name"
@@ -664,10 +666,7 @@ async function saveToolsVisibility() {
 }
 
 .mcp-content {
-  flex: 1;
   min-height: 0;
-  overflow-y: auto;
-  padding: 20px;
 
   &.is-loading {
     display: grid;
@@ -692,40 +691,10 @@ async function saveToolsVisibility() {
   margin-bottom: 14px;
 }
 
-.summary-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 12px;
+.mcp-kpis {
   margin-bottom: 16px;
 }
 
-.summary-card {
-  padding: 14px;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  background: $bg-card;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-
-  strong {
-    font-size: 24px;
-    line-height: 1;
-  }
-
-  &.success strong { color: $success; }
-  &.warning strong { color: $warning; }
-  &.error strong { color: $error; }
-  &.info strong { color: $accent-primary; }
-}
-
-.summary-label {
-  font-size: 11px;
-  color: $text-muted;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
 .toolbar-row {
   display: flex;
   flex-wrap: wrap;
@@ -752,12 +721,6 @@ async function saveToolsVisibility() {
   }
 }
 
-.servers-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
-  gap: 14px;
-}
-
 .mode-switch-row {
   display: flex;
   justify-content: center;
@@ -788,10 +751,6 @@ async function saveToolsVisibility() {
 }
 
 @media (max-width: $breakpoint-mobile) {
-  .summary-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
   .toolbar-row {
     flex-direction: column;
     align-items: stretch;
@@ -804,10 +763,6 @@ async function saveToolsVisibility() {
       width: 100%;
     }
   }
-
-  .servers-grid {
-    grid-template-columns: 1fr;
-  }
 }
 
 .tools-modal-content {
diff --git a/packages/client/src/views/hermes/MemoryView.vue b/packages/client/src/views/hermes/MemoryView.vue
index 86f5330..a64c2e9 100644
--- a/packages/client/src/views/hermes/MemoryView.vue
+++ b/packages/client/src/views/hermes/MemoryView.vue
@@ -96,39 +96,39 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
       <div v-if="loading && !data" class="memory-loading">{{ t('common.loading') }}</div>
       <div v-else class="memory-sections">
           <!-- My Notes -->
-          <div class="memory-section">
-            <div class="section-header">
-              <div class="section-title-row">
-                <span class="section-icon">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                    <polyline points="14 2 14 8 20 8" />
-                    <line x1="16" y1="13" x2="8" y2="13" />
-                    <line x1="16" y1="17" x2="8" y2="17" />
-                  </svg>
-                </span>
-                <span class="section-title">{{ t('memory.myNotes') }}</span>
-                <span v-if="data?.memory_mtime" class="section-mtime">{{ formatTime(data.memory_mtime) }}</span>
+          <div class="memory-section cy-panel">
+            <div class="section-header cy-panel-h">
+              <span class="section-icon">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                  <polyline points="14 2 14 8 20 8" />
+                  <line x1="16" y1="13" x2="8" y2="13" />
+                  <line x1="16" y1="17" x2="8" y2="17" />
+                </svg>
+              </span>
+              <h3 class="section-title">{{ t('memory.myNotes') }}</h3>
+              <span v-if="data?.memory_mtime" class="cy-meta">{{ formatTime(data.memory_mtime) }}</span>
+              <div class="cy-panel-actions">
+                <a-button v-if="editingSection !== 'memory'" size="mini" type="text" @click="startEdit('memory')">
+                  <template #icon>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                  </template>
+                  {{ t('common.edit') }}
+                </a-button>
               </div>
-              <a-button v-if="editingSection !== 'memory'" size="mini" type="text" @click="startEdit('memory')">
-                <template #icon>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                  </svg>
-                </template>
-                {{ t('common.edit') }}
-              </a-button>
             </div>
 
             <!-- View mode -->
-            <div v-if="editingSection !== 'memory'" class="section-body">
+            <div v-if="editingSection !== 'memory'" class="section-body cy-panel-b">
               <MarkdownRenderer v-if="!memoryEmpty" :content="displayMemory" />
               <p v-else class="empty-text">{{ t('memory.noNotes') }}</p>
             </div>
 
             <!-- Edit mode -->
-            <div v-else class="section-edit">
+            <div v-else class="section-edit cy-panel-b">
               <textarea
                 v-model="editContent"
                 class="edit-textarea"
@@ -143,37 +143,37 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
           </div>
 
           <!-- User Profile -->
-          <div class="memory-section">
-            <div class="section-header">
-              <div class="section-title-row">
-                <span class="section-icon">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-                    <circle cx="12" cy="7" r="4" />
-                  </svg>
-                </span>
-                <span class="section-title">{{ t('memory.userProfile') }}</span>
-                <span v-if="data?.user_mtime" class="section-mtime">{{ formatTime(data.user_mtime) }}</span>
+          <div class="memory-section cy-panel">
+            <div class="section-header cy-panel-h">
+              <span class="section-icon">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+              </span>
+              <h3 class="section-title">{{ t('memory.userProfile') }}</h3>
+              <span v-if="data?.user_mtime" class="cy-meta">{{ formatTime(data.user_mtime) }}</span>
+              <div class="cy-panel-actions">
+                <a-button v-if="editingSection !== 'user'" size="mini" type="text" @click="startEdit('user')">
+                  <template #icon>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                  </template>
+                  {{ t('common.edit') }}
+                </a-button>
               </div>
-              <a-button v-if="editingSection !== 'user'" size="mini" type="text" @click="startEdit('user')">
-                <template #icon>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                  </svg>
-                </template>
-                {{ t('common.edit') }}
-              </a-button>
             </div>
 
             <!-- View mode -->
-            <div v-if="editingSection !== 'user'" class="section-body">
+            <div v-if="editingSection !== 'user'" class="section-body cy-panel-b">
               <MarkdownRenderer v-if="!userEmpty" :content="displayUser" />
               <p v-else class="empty-text">{{ t('memory.noProfile') }}</p>
             </div>
 
             <!-- Edit mode -->
-            <div v-else class="section-edit">
+            <div v-else class="section-edit cy-panel-b">
               <textarea
                 v-model="editContent"
                 class="edit-textarea"
@@ -188,39 +188,39 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
           </div>
 
           <!-- Soul -->
-          <div class="memory-section">
-            <div class="section-header">
-              <div class="section-title-row">
-                <span class="section-icon">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
-                    <path d="M8 14s1.5 2 4 2 4-2 4-2" />
-                    <line x1="9" y1="9" x2="9.01" y2="9" />
-                    <line x1="15" y1="9" x2="15.01" y2="9" />
-                  </svg>
-                </span>
-                <span class="section-title">{{ t('memory.soul') }}</span>
-                <span v-if="data?.soul_mtime" class="section-mtime">{{ formatTime(data.soul_mtime) }}</span>
+          <div class="memory-section cy-panel">
+            <div class="section-header cy-panel-h">
+              <span class="section-icon">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
+                  <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+                  <line x1="9" y1="9" x2="9.01" y2="9" />
+                  <line x1="15" y1="9" x2="15.01" y2="9" />
+                </svg>
+              </span>
+              <h3 class="section-title">{{ t('memory.soul') }}</h3>
+              <span v-if="data?.soul_mtime" class="cy-meta">{{ formatTime(data.soul_mtime) }}</span>
+              <div class="cy-panel-actions">
+                <a-button v-if="editingSection !== 'soul'" size="mini" type="text" @click="startEdit('soul')">
+                  <template #icon>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                  </template>
+                  {{ t('common.edit') }}
+                </a-button>
               </div>
-              <a-button v-if="editingSection !== 'soul'" size="mini" type="text" @click="startEdit('soul')">
-                <template #icon>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                  </svg>
-                </template>
-                {{ t('common.edit') }}
-              </a-button>
             </div>
 
             <!-- View mode -->
-            <div v-if="editingSection !== 'soul'" class="section-body">
+            <div v-if="editingSection !== 'soul'" class="section-body cy-panel-b">
               <MarkdownRenderer v-if="!soulEmpty" :content="displaySoul" />
               <p v-else class="empty-text">{{ t('memory.noSoul') }}</p>
             </div>
 
             <!-- Edit mode -->
-            <div v-else class="section-edit">
+            <div v-else class="section-edit cy-panel-b">
               <textarea
                 v-model="editContent"
                 class="edit-textarea"
@@ -250,7 +250,7 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
 .memory-content {
   flex: 1;
   overflow: hidden;
-  padding: 20px;
+  padding: 20px 22px 24px;
   display: flex;
   flex-direction: column;
 }
@@ -278,49 +278,28 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
 .memory-section {
   flex: 1;
   min-height: 0;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+
+  // 三栏并排，不吃 .cy-panel 的纵向堆叠间距。
+  & + .memory-section {
+    margin-top: 0;
+  }
 }
 
 .section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 16px;
-  background: $bg-secondary;
-  border-bottom: 1px solid $border-color;
   flex-shrink: 0;
 }
 
-.section-title-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 .section-icon {
-  color: $text-secondary;
+  color: $text-faint;
   display: flex;
 }
 
-.section-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: $text-primary;
-}
-
-.section-mtime {
-  font-size: 11px;
-  color: $text-muted;
-}
-
 .section-body {
   flex: 1;
   overflow-y: auto;
-  padding: 16px;
   min-height: 0;
 }
 
@@ -334,7 +313,6 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 12px 16px;
   min-height: 0;
 }
 
diff --git a/packages/client/src/views/hermes/ModelsView.vue b/packages/client/src/views/hermes/ModelsView.vue
index 651129c..f462548 100644
--- a/packages/client/src/views/hermes/ModelsView.vue
+++ b/packages/client/src/views/hermes/ModelsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import AuxiliaryModelsPanel from '@/components/hermes/models/AuxiliaryModelsPanel.vue'
@@ -17,6 +17,12 @@ const message = useMessage()
 const showModal = ref(false)
 const activeTab = ref<'general' | 'auxiliary' | 'combination'>('general')
 
+const tabs = computed(() => [
+  { key: 'general' as const, label: t('models.generalTitle') },
+  { key: 'auxiliary' as const, label: t('models.auxiliaryTitle') },
+  { key: 'combination' as const, label: t('models.combinationTitle') },
+])
+
 async function loadProvidersForProfile() {
   if (!profilesStore.activeProfileName || profilesStore.profiles.length === 0) {
     await profilesStore.fetchProfiles()
@@ -91,20 +97,27 @@ async function handleRefreshModelCache() {
       </div>
     </header>
 
-    <div class="models-content">
-      <a-tabs v-model:active-key="activeTab" type="line">
-        <a-tab-pane key="general" :title="t('models.generalTitle')">
-          <a-spin :loading="modelsStore.loading && modelsStore.providers.length === 0">
-            <ProvidersPanel />
-          </a-spin>
-        </a-tab-pane>
-        <a-tab-pane key="auxiliary" :title="t('models.auxiliaryTitle')">
-          <AuxiliaryModelsPanel />
-        </a-tab-pane>
-        <a-tab-pane key="combination" :title="t('models.combinationTitle')">
-          <CombinationModelsPanel />
-        </a-tab-pane>
-      </a-tabs>
+    <div class="cy-view models-content">
+      <div class="cy-tabs">
+        <button
+          v-for="tab in tabs"
+          :key="tab.key"
+          type="button"
+          class="cy-tab"
+          :class="{ on: tab.key === activeTab }"
+          @click="activeTab = tab.key"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+
+      <div class="models-pane">
+        <a-spin v-if="activeTab === 'general'" :loading="modelsStore.loading && modelsStore.providers.length === 0">
+          <ProvidersPanel />
+        </a-spin>
+        <AuxiliaryModelsPanel v-else-if="activeTab === 'auxiliary'" />
+        <CombinationModelsPanel v-else-if="activeTab === 'combination'" />
+      </div>
     </div>
 
     <ProviderFormModal
@@ -136,9 +149,13 @@ async function handleRefreshModelCache() {
 }
 
 .models-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
+  :deep(.arco-spin) {
+    display: block;
+  }
+}
+
+.models-pane {
+  margin-top: 16px;
 }
 
 .header-actions {
diff --git a/packages/client/src/views/hermes/PerformanceView.vue b/packages/client/src/views/hermes/PerformanceView.vue
index 310c93b..f6398ea 100644
--- a/packages/client/src/views/hermes/PerformanceView.vue
+++ b/packages/client/src/views/hermes/PerformanceView.vue
@@ -96,108 +96,114 @@ onBeforeUnmount(() => {
     </header>
 
     <a-spin :loading="loading && !snapshot" class="performance-spin">
-      <main v-if="snapshot" class="performance-content">
-        <section class="summary-grid">
-          <div class="summary-item">
-            <span class="summary-label">{{ t('performance.systemCpu') }}</span>
-            <strong>{{ formatPercent(snapshot.system.cpuPercent) }}</strong>
-            <div class="meter"><span :style="{ width: `${snapshot.system.cpuPercent || 0}%` }" /></div>
+      <main v-if="snapshot" class="cy-view performance-content">
+        <section class="cy-kpis summary-grid">
+          <div class="cy-kpi warn">
+            <div class="k">{{ t('performance.systemCpu') }}</div>
+            <div class="v">{{ formatPercent(snapshot.system.cpuPercent) }}</div>
+            <span class="cy-meter kpi-meter"><i :style="{ width: `${snapshot.system.cpuPercent || 0}%` }" /></span>
           </div>
-          <div class="summary-item">
-            <span class="summary-label">{{ t('performance.systemMemory') }}</span>
-            <strong>{{ formatPercent(snapshot.system.memoryPercent) }}</strong>
-            <small>{{ formatBytes(snapshot.system.usedMemoryBytes) }} / {{ formatBytes(snapshot.system.totalMemoryBytes) }}</small>
-            <div class="meter"><span :style="{ width: `${snapshot.system.memoryPercent || 0}%` }" /></div>
+          <div class="cy-kpi acc">
+            <div class="k">{{ t('performance.systemMemory') }}</div>
+            <div class="v">{{ formatPercent(snapshot.system.memoryPercent) }}</div>
+            <div class="s">{{ formatBytes(snapshot.system.usedMemoryBytes) }} / {{ formatBytes(snapshot.system.totalMemoryBytes) }}</div>
+            <span class="cy-meter kpi-meter"><i :style="{ width: `${snapshot.system.memoryPercent || 0}%` }" /></span>
           </div>
-          <div class="summary-item">
-            <span class="summary-label">{{ t('performance.activeSessions') }}</span>
-            <strong>{{ snapshot.sessions.active }}</strong>
-            <small>{{ t('performance.runningSessions', { count: snapshot.sessions.running }) }}</small>
+          <div class="cy-kpi ok">
+            <div class="k">{{ t('performance.activeSessions') }}</div>
+            <div class="v">{{ snapshot.sessions.active }}</div>
+            <div class="s">{{ t('performance.runningSessions', { count: snapshot.sessions.running }) }}</div>
           </div>
-          <div class="summary-item">
-            <span class="summary-label">{{ t('performance.workers') }}</span>
-            <strong>{{ runningWorkerCount }} / {{ workerCount }}</strong>
-            <small>{{ t('performance.totalWorkerMemory') }} {{ formatBytes(snapshot.bridge.totalWorkerMemoryRssBytes) }}</small>
+          <div class="cy-kpi info">
+            <div class="k">{{ t('performance.workers') }}</div>
+            <div class="v">{{ runningWorkerCount }} / {{ workerCount }}</div>
+            <div class="s">{{ t('performance.totalWorkerMemory') }} {{ formatBytes(snapshot.bridge.totalWorkerMemoryRssBytes) }}</div>
           </div>
         </section>
 
-        <section class="runtime-section">
-          <div class="section-header">
+        <section class="cy-panel runtime-section">
+          <div class="cy-panel-h">
             <h3>{{ t('performance.processes') }}</h3>
-            <span>{{ snapshot.system.platform }} {{ snapshot.system.arch }} · {{ snapshot.system.cpuCount }} CPU · {{ t('performance.uptime') }} {{ formatDuration(snapshot.system.uptimeSeconds) }}</span>
+            <span class="cy-meta">{{ snapshot.system.platform }} {{ snapshot.system.arch }} · {{ snapshot.system.cpuCount }} CPU · {{ t('performance.uptime') }} {{ formatDuration(snapshot.system.uptimeSeconds) }}</span>
           </div>
-          <div class="process-grid">
-            <div class="process-row">
-              <div>
-                <strong>Web UI</strong>
-                <span>PID {{ snapshot.web.pid }}</span>
+          <div class="cy-panel-b">
+            <div class="process-grid">
+              <div class="process-row">
+                <div>
+                  <strong>Web UI</strong>
+                  <span>PID {{ snapshot.web.pid }}</span>
+                </div>
+                <span>{{ formatPercent(snapshot.web.cpuPercent) }}</span>
+                <span>{{ formatBytes(webRssMemory) }}</span>
+                <span class="cy-tag ok status">{{ statusText(true) }}</span>
               </div>
-              <span>{{ formatPercent(snapshot.web.cpuPercent) }}</span>
-              <span>{{ formatBytes(webRssMemory) }}</span>
-              <span class="status running">{{ statusText(true) }}</span>
-            </div>
-            <div class="process-row">
-              <div>
-                <strong>Bridge Broker</strong>
-                <span>{{ snapshot.bridge.endpoint }}</span>
+              <div class="process-row">
+                <div>
+                  <strong>Bridge Broker</strong>
+                  <span>{{ snapshot.bridge.endpoint }}</span>
+                </div>
+                <span>{{ formatPercent(snapshot.bridge.broker.process?.cpuPercent) }}</span>
+                <span>{{ formatBytes(brokerMemory) }}</span>
+                <span class="cy-tag status" :class="{ ok: snapshot.bridge.reachable && snapshot.bridge.broker.running }">
+                  {{ snapshot.bridge.reachable && snapshot.bridge.broker.running ? statusText(true) : statusText(false) }}
+                </span>
               </div>
-              <span>{{ formatPercent(snapshot.bridge.broker.process?.cpuPercent) }}</span>
-              <span>{{ formatBytes(brokerMemory) }}</span>
-              <span class="status" :class="{ running: snapshot.bridge.reachable && snapshot.bridge.broker.running }">
-                {{ snapshot.bridge.reachable && snapshot.bridge.broker.running ? statusText(true) : statusText(false) }}
-              </span>
             </div>
+            <div v-if="snapshot.bridge.error" class="runtime-error">{{ snapshot.bridge.error }}</div>
           </div>
-          <div v-if="snapshot.bridge.error" class="runtime-error">{{ snapshot.bridge.error }}</div>
         </section>
 
-        <section class="runtime-section">
-          <div class="section-header">
+        <section class="cy-panel runtime-section">
+          <div class="cy-panel-h">
             <h3>{{ t('performance.workerMemory') }}</h3>
-            <span>{{ t('performance.lastUpdated') }} {{ new Date(snapshot.timestamp).toLocaleTimeString() }}</span>
+            <span class="cy-meta">{{ t('performance.lastUpdated') }} {{ new Date(snapshot.timestamp).toLocaleTimeString() }}</span>
           </div>
-          <div class="worker-table-wrap">
-            <table class="worker-table">
-              <thead>
-                <tr>
-                  <th>{{ t('performance.profile') }}</th>
-                  <th>PID</th>
-                  <th>CPU</th>
-                  <th>{{ t('performance.memory') }}</th>
-                  <th>{{ t('performance.runningActiveSessions') }}</th>
-                  <th>{{ t('performance.lastUsed') }}</th>
-                  <th>{{ t('performance.status') }}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-if="snapshot.bridge.workers.length === 0">
-                  <td colspan="7" class="empty-cell">{{ t('performance.noWorkers') }}</td>
-                </tr>
-                <tr v-for="worker in snapshot.bridge.workers" :key="worker.profile || worker.pid">
-                  <td>{{ worker.profile || '-' }}</td>
-                  <td>{{ worker.pid || '-' }}</td>
-                  <td>{{ formatPercent(worker.cpuPercent) }}</td>
-                  <td>{{ formatBytes(worker.memoryRssBytes) }}</td>
-                  <td>{{ worker.runningSessionCount }} / {{ worker.sessionCount }}</td>
-                  <td>{{ formatTime(worker.lastUsedAt) }}</td>
-                  <td><span class="status" :class="{ running: worker.running }">{{ statusText(worker.running) }}</span></td>
-                </tr>
-              </tbody>
-            </table>
+          <div class="cy-panel-b">
+            <div class="cy-tbl-wrap worker-table-wrap">
+              <table class="cy-tbl worker-table">
+                <thead>
+                  <tr>
+                    <th>{{ t('performance.profile') }}</th>
+                    <th>PID</th>
+                    <th>CPU</th>
+                    <th>{{ t('performance.memory') }}</th>
+                    <th>{{ t('performance.runningActiveSessions') }}</th>
+                    <th>{{ t('performance.lastUsed') }}</th>
+                    <th>{{ t('performance.status') }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-if="snapshot.bridge.workers.length === 0">
+                    <td colspan="7" class="empty-cell">{{ t('performance.noWorkers') }}</td>
+                  </tr>
+                  <tr v-for="worker in snapshot.bridge.workers" :key="worker.profile || worker.pid">
+                    <td>{{ worker.profile || '-' }}</td>
+                    <td>{{ worker.pid || '-' }}</td>
+                    <td>{{ formatPercent(worker.cpuPercent) }}</td>
+                    <td>{{ formatBytes(worker.memoryRssBytes) }}</td>
+                    <td>{{ worker.runningSessionCount }} / {{ worker.sessionCount }}</td>
+                    <td>{{ formatTime(worker.lastUsedAt) }}</td>
+                    <td><span class="cy-tag status" :class="{ ok: worker.running }">{{ statusText(worker.running) }}</span></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </section>
 
-        <section class="runtime-section">
-          <div class="section-header">
+        <section class="cy-panel runtime-section">
+          <div class="cy-panel-h">
             <h3>{{ t('performance.sessionsByProfile') }}</h3>
           </div>
-          <div class="session-list">
-            <div v-if="Object.keys(snapshot.sessions.byProfile).length === 0" class="session-empty">
-              {{ t('performance.noActiveSessions') }}
-            </div>
-            <div v-for="(count, profile) in snapshot.sessions.byProfile" :key="profile" class="session-row">
-              <span>{{ profile }}</span>
-              <strong>{{ count }}</strong>
+          <div class="cy-panel-b">
+            <div class="session-list">
+              <div v-if="Object.keys(snapshot.sessions.byProfile).length === 0" class="session-empty">
+                {{ t('performance.noActiveSessions') }}
+              </div>
+              <div v-for="(count, profile) in snapshot.sessions.byProfile" :key="profile" class="session-row">
+                <span>{{ profile }}</span>
+                <strong>{{ count }}</strong>
+              </div>
             </div>
           </div>
         </section>
@@ -228,79 +234,22 @@ onBeforeUnmount(() => {
 
 .performance-content {
   height: 100%;
-  overflow-y: auto;
-  padding: 20px;
 }
 
 .summary-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
   margin-bottom: 16px;
 }
 
-.summary-item,
-.runtime-section {
-  border: 1px solid $border-color;
-  border-radius: $radius-sm;
-  background: $bg-card;
-}
-
-.summary-item {
-  min-height: 108px;
-  padding: 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.summary-label,
-.summary-item small,
-.section-header span,
-.process-row div span {
-  color: $text-muted;
-  font-size: 12px;
-}
-
-.summary-item strong {
-  color: $text-primary;
-  font-size: 24px;
-  font-weight: 650;
-}
-
-.meter {
-  height: 6px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: $bg-secondary;
-
-  span {
-    display: block;
-    height: 100%;
-    border-radius: inherit;
-    background: $accent-primary;
-  }
+.kpi-meter {
+  display: block;
+  margin-top: 8px;
 }
 
 .runtime-section {
-  margin-top: 12px;
   overflow: hidden;
-}
 
-.section-header {
-  min-height: 46px;
-  padding: 12px 14px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  border-bottom: 1px solid $border-light;
-
-  h3 {
-    margin: 0;
-    color: $text-primary;
-    font-size: 14px;
-    font-weight: 600;
+  + .runtime-section {
+    margin-top: 16px;
   }
 }
 
@@ -318,7 +267,8 @@ onBeforeUnmount(() => {
   gap: 12px;
   border-bottom: 1px solid $border-light;
   color: $text-secondary;
-  font-size: 13px;
+  font-family: $font-code;
+  font-size: 12.5px;
 
   &:last-child {
     border-bottom: 0;
@@ -333,7 +283,8 @@ onBeforeUnmount(() => {
 
   strong {
     color: $text-primary;
-    font-size: 13px;
+    font-size: 12.5px;
+    font-weight: 600;
   }
 
   span {
@@ -341,64 +292,49 @@ onBeforeUnmount(() => {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-}
 
-.status {
-  width: fit-content;
-  max-width: 100%;
-  padding: 2px 8px;
-  border: 1px solid $border-color;
-  border-radius: 999px;
-  color: $text-muted;
-  font-size: 12px;
-
-  &.running {
-    border-color: rgba(var(--success-rgb), 0.35);
-    color: $success;
-    background: rgba(var(--success-rgb), 0.08);
+  div span {
+    color: $text-muted;
+    font-size: 11px;
   }
 }
 
+.status {
+  justify-self: start;
+}
+
 .runtime-error {
-  padding: 10px 14px;
-  border-top: 1px solid $border-light;
+  margin-top: 10px;
+  padding: 9px 11px;
+  border: 1px solid rgba(var(--error-rgb), 0.32);
+  border-radius: $radius-sm;
+  background: rgba(var(--error-rgb), 0.08);
   color: $error;
-  font-size: 12px;
+  font-family: $font-code;
+  font-size: 11.5px;
 }
 
 .worker-table-wrap {
+  border: none;
+  border-radius: 0;
+  background: transparent;
   overflow-x: auto;
 }
 
 .worker-table {
-  width: 100%;
   min-width: 760px;
-  border-collapse: collapse;
-  color: $text-secondary;
-  font-size: 13px;
 
-  th,
   td {
-    padding: 11px 14px;
-    border-bottom: 1px solid $border-light;
-    text-align: left;
     white-space: nowrap;
-  }
-
-  th {
-    color: $text-muted;
+    color: $text-secondary;
+    font-family: $font-code;
     font-size: 12px;
-    font-weight: 600;
   }
 
   td:first-child {
     color: $text-primary;
     font-weight: 600;
   }
-
-  tr:last-child td {
-    border-bottom: 0;
-  }
 }
 
 .empty-cell,
@@ -408,7 +344,8 @@ onBeforeUnmount(() => {
 }
 
 .session-list {
-  padding: 6px 14px;
+  display: flex;
+  flex-direction: column;
 }
 
 .session-row {
@@ -419,7 +356,8 @@ onBeforeUnmount(() => {
   gap: 12px;
   border-bottom: 1px solid $border-light;
   color: $text-secondary;
-  font-size: 13px;
+  font-family: $font-code;
+  font-size: 12.5px;
 
   &:last-child {
     border-bottom: 0;
@@ -432,7 +370,7 @@ onBeforeUnmount(() => {
 
 .session-empty {
   padding: 18px 0;
-  font-size: 13px;
+  font-size: 12.5px;
 }
 
 @media (max-width: 960px) {
@@ -443,8 +381,7 @@ onBeforeUnmount(() => {
 
 @media (max-width: $breakpoint-mobile) {
   .page-header,
-  .header-actions,
-  .section-header {
+  .header-actions {
     align-items: flex-start;
     flex-direction: column;
   }
diff --git a/packages/client/src/views/hermes/PetdexView.vue b/packages/client/src/views/hermes/PetdexView.vue
index 71ac0ff..7b001a7 100644
--- a/packages/client/src/views/hermes/PetdexView.vue
+++ b/packages/client/src/views/hermes/PetdexView.vue
@@ -103,7 +103,7 @@ onMounted(() => {
       </a-button>
     </header>
 
-    <div class="petdex-content" :class="{ 'is-loading': loading && !manifest }">
+    <div class="petdex-content cy-view" :class="{ 'is-loading': loading && !manifest }">
       <div v-if="loading && !manifest" class="loading-state">
         <a-spin />
       </div>
@@ -113,22 +113,22 @@ onMounted(() => {
           {{ error }}
         </a-alert>
 
-        <div v-if="manifest" class="summary-grid">
-          <div class="summary-card">
-            <span>{{ t('petdex.summary.total') }}</span>
-            <strong>{{ manifest.total }}</strong>
+        <div v-if="manifest" class="cy-kpis petdex-kpis">
+          <div class="cy-kpi acc">
+            <div class="k">{{ t('petdex.summary.total') }}</div>
+            <div class="v">{{ manifest.total }}</div>
           </div>
-          <div class="summary-card">
-            <span>{{ t('petdex.summary.visible') }}</span>
-            <strong>{{ filteredPets.length }}</strong>
+          <div class="cy-kpi ok">
+            <div class="k">{{ t('petdex.summary.visible') }}</div>
+            <div class="v">{{ filteredPets.length }}</div>
           </div>
-          <div class="summary-card">
-            <span>{{ t('petdex.summary.kinds') }}</span>
-            <strong>{{ kindOptions.length }}</strong>
+          <div class="cy-kpi info">
+            <div class="k">{{ t('petdex.summary.kinds') }}</div>
+            <div class="v">{{ kindOptions.length }}</div>
           </div>
-          <div class="summary-card wide">
-            <span>{{ t('petdex.summary.generatedAt') }}</span>
-            <strong>{{ generatedAt || '-' }}</strong>
+          <div class="cy-kpi flat">
+            <div class="k">{{ t('petdex.summary.generatedAt') }}</div>
+            <div class="v kpi-date">{{ generatedAt || '-' }}</div>
           </div>
         </div>
 
@@ -137,17 +137,22 @@ onMounted(() => {
           <a-select v-model="kindFilter" :options="kindOptions" :placeholder="t('petdex.kindFilter')" allow-clear />
         </div>
 
-        <div v-if="visiblePets.length" class="pet-grid">
-          <article v-for="pet in visiblePets" :key="pet.slug" class="pet-card">
+        <div v-if="visiblePets.length" class="cy-grid4 pet-grid">
+          <article v-for="pet in visiblePets" :key="pet.slug" class="pet-card cy-panel">
+            <div class="cy-panel-h">
+              <h3 class="pet-name">{{ pet.displayName }}</h3>
+              <span class="cy-tag">{{ pet.kind }}</span>
+              <div class="cy-panel-actions">
+                <span v-if="petsStore.activePet?.slug === pet.slug" class="cy-tag ok">
+                  {{ t('petdex.active') }}
+                </span>
+              </div>
+            </div>
             <div class="pet-preview">
               <div class="pet-frame" :style="{ backgroundImage: `url(${pet.previewUrl || pet.spritesheetUrl})` }" />
             </div>
             <div class="pet-body">
-              <div class="pet-title-row">
-                <h3>{{ pet.displayName }}</h3>
-                <a-tag size="small" class="pet-kind-tag">{{ pet.kind }}</a-tag>
-              </div>
-              <div class="pet-slug">{{ pet.slug }}</div>
+              <div class="pet-slug cy-code">{{ pet.slug }}</div>
               <div v-if="pet.submittedBy" class="pet-meta">
                 {{ t('petdex.submittedBy', { name: pet.submittedBy }) }}
               </div>
@@ -185,6 +190,8 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
+@use '@/styles/variables' as *;
+
 .petdex-view {
   height: 100%;
   display: flex;
@@ -194,10 +201,12 @@ onMounted(() => {
 }
 
 .petdex-content {
-  flex: 1;
   min-height: 0;
-  overflow: auto;
-  padding: 20px 24px 28px;
+
+  &.is-loading {
+    display: grid;
+    place-items: center;
+  }
 }
 
 .loading-state {
@@ -211,35 +220,16 @@ onMounted(() => {
   margin-bottom: 16px;
 }
 
-.summary-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
+.petdex-kpis {
   margin-bottom: 16px;
 }
 
-.summary-card {
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background: var(--bg-secondary);
-  padding: 12px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-
-  span {
-    color: var(--text-secondary);
-    font-size: 12px;
-  }
-
-  strong {
-    font-size: 20px;
-    font-weight: 650;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+.kpi-date {
+  font-size: 13px;
+  color: $text-secondary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .filter-row {
@@ -250,17 +240,23 @@ onMounted(() => {
 }
 
 .pet-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 14px;
 }
 
 .pet-card {
   min-width: 0;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background: var(--bg-secondary);
   overflow: hidden;
+
+  // 网格内不吃 .cy-panel 的纵向堆叠间距。
+  & + .pet-card {
+    margin-top: 0;
+  }
+}
+
+.pet-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .pet-preview {
@@ -268,11 +264,13 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+  border-bottom: 1px solid $border-light;
+  // 透明底纹棋盘格：用 muted 三元组上色，跟着主题走而不是写死中灰
   background:
-    linear-gradient(45deg, rgba(127, 127, 127, 0.08) 25%, transparent 25%),
-    linear-gradient(-45deg, rgba(127, 127, 127, 0.08) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, rgba(127, 127, 127, 0.08) 75%),
-    linear-gradient(-45deg, transparent 75%, rgba(127, 127, 127, 0.08) 75%);
+    linear-gradient(45deg, rgba(var(--text-muted-rgb), 0.08) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(var(--text-muted-rgb), 0.08) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(var(--text-muted-rgb), 0.08) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(var(--text-muted-rgb), 0.08) 75%);
   background-position: 0 0, 0 8px, 8px -8px, -8px 0;
   background-size: 16px 16px;
 }
@@ -284,41 +282,28 @@ onMounted(() => {
   background-position: 0 0;
   background-size: 800% auto;
   image-rendering: auto;
-  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22));
+  filter: drop-shadow($shadow-md);
 }
 
 .pet-body {
-  padding: 12px;
-}
-
-.pet-title-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-
-  h3 {
-    margin: 0;
-    min-width: 0;
-    font-size: 15px;
-    font-weight: 650;
-    line-height: 1.25;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+  padding: 12px 14px 14px;
 }
 
 .pet-slug,
 .pet-meta {
   margin-top: 5px;
-  color: var(--text-secondary);
-  font-size: 12px;
+  color: $text-muted;
+  font-size: 11.5px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.pet-slug {
+  display: inline-block;
+  max-width: 100%;
+}
+
 .pet-links {
   display: flex;
   flex-wrap: wrap;
@@ -326,7 +311,7 @@ onMounted(() => {
   margin-top: 10px;
 
   a {
-    color: var(--accent-primary);
+    color: $accent-primary;
     font-size: 12px;
     text-decoration: none;
 
@@ -340,12 +325,6 @@ onMounted(() => {
   margin-top: 12px;
 }
 
-// naive 的圆角标签是 border-radius: calc(height / 2)，Arco 的 a-tag 没有
-// shape/round prop，只能用同等圆角还原。
-.pet-kind-tag {
-  border-radius: 999px;
-}
-
 .load-more {
   display: flex;
   justify-content: center;
@@ -353,11 +332,6 @@ onMounted(() => {
 }
 
 @media (max-width: 720px) {
-  .petdex-content {
-    padding: 16px;
-  }
-
-  .summary-grid,
   .filter-row {
     grid-template-columns: 1fr;
   }
diff --git a/packages/client/src/views/hermes/PluginsView.vue b/packages/client/src/views/hermes/PluginsView.vue
index f4d4c8b..5e1ae4c 100644
--- a/packages/client/src/views/hermes/PluginsView.vue
+++ b/packages/client/src/views/hermes/PluginsView.vue
@@ -85,17 +85,18 @@ function configStatusLabel(plugin: HermesPluginInfo) {
   return te(key) ? t(key) : plugin.configStatus
 }
 
-function statusTagColor(plugin: HermesPluginInfo): 'green' | 'orange' | 'red' | 'arcoblue' {
+// 状态 tone 走 CYBER 语义色：绿=正常、橙=要介入、红=出错、青=系统托管。
+function statusTone(plugin: HermesPluginInfo): 'ok' | 'warn' | 'err' | 'acc' {
   switch (plugin.effectiveStatus) {
     case 'enabled':
     case 'auto-active':
-      return 'green'
+      return 'ok'
     case 'disabled':
-      return 'red'
+      return 'err'
     case 'provider-managed':
-      return 'arcoblue'
+      return 'acc'
     default:
-      return 'orange'
+      return 'warn'
   }
 }
 
@@ -139,7 +140,7 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
       </a-button>
     </header>
 
-    <div class="plugins-content" :class="{ 'is-loading': loading && plugins.length === 0 }">
+    <div class="plugins-content cy-view" :class="{ 'is-loading': loading && plugins.length === 0 }">
       <div v-if="loading && plugins.length === 0" class="plugins-loading-state">
         <a-spin />
       </div>
@@ -156,26 +157,26 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
           {{ warning }}
         </a-alert>
 
-        <div class="summary-grid">
-          <div class="summary-card">
-            <span class="summary-label">{{ t('plugins.summary.total') }}</span>
-            <strong>{{ summary.total }}</strong>
+        <div class="cy-kpis plugins-kpis">
+          <div class="cy-kpi acc">
+            <div class="k">{{ t('plugins.summary.total') }}</div>
+            <div class="v">{{ summary.total }}</div>
           </div>
-          <div class="summary-card success">
-            <span class="summary-label">{{ t('plugins.summary.active') }}</span>
-            <strong>{{ summary.active }}</strong>
+          <div class="cy-kpi ok">
+            <div class="k">{{ t('plugins.summary.active') }}</div>
+            <div class="v">{{ summary.active }}</div>
           </div>
-          <div class="summary-card warning">
-            <span class="summary-label">{{ t('plugins.summary.inactive') }}</span>
-            <strong>{{ summary.inactive }}</strong>
+          <div class="cy-kpi warn">
+            <div class="k">{{ t('plugins.summary.inactive') }}</div>
+            <div class="v">{{ summary.inactive }}</div>
           </div>
-          <div class="summary-card error">
-            <span class="summary-label">{{ t('plugins.summary.disabled') }}</span>
-            <strong>{{ summary.disabled }}</strong>
+          <div class="cy-kpi err">
+            <div class="k">{{ t('plugins.summary.disabled') }}</div>
+            <div class="v">{{ summary.disabled }}</div>
           </div>
-          <div class="summary-card info">
-            <span class="summary-label">{{ t('plugins.summary.providerManaged') }}</span>
-            <strong>{{ summary.providerManaged }}</strong>
+          <div class="cy-kpi info">
+            <div class="k">{{ t('plugins.summary.providerManaged') }}</div>
+            <div class="v">{{ summary.providerManaged }}</div>
           </div>
         </div>
 
@@ -186,70 +187,98 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
           <a-select v-model="statusFilter" :options="statusOptions" :placeholder="t('plugins.statusTitle')" allow-clear />
         </div>
 
-        <div v-if="filteredPlugins.length" class="plugins-table-wrap">
-          <table class="plugins-table">
-            <thead>
-              <tr>
-                <th>{{ t('plugins.table.plugin') }}</th>
-                <th>{{ t('plugins.table.status') }}</th>
-                <th>{{ t('plugins.table.source') }}</th>
-                <th>{{ t('plugins.table.kind') }}</th>
-                <th>{{ t('plugins.table.capabilities') }}</th>
-                <th>{{ t('plugins.table.path') }}</th>
-                <th>{{ t('plugins.table.manage') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="plugin in filteredPlugins" :key="plugin.key">
-                <td>
-                  <div class="plugin-name">
-                    <strong>{{ plugin.key }}</strong>
-                    <span v-if="plugin.name !== plugin.key">{{ plugin.name }}</span>
-                  </div>
-                  <div v-if="plugin.description" class="description">{{ plugin.description }}</div>
-                  <div v-if="plugin.version || plugin.author" class="meta-line">
-                    <span v-if="plugin.version">v{{ plugin.version }}</span>
-                    <span v-if="plugin.author">{{ plugin.author }}</span>
-                  </div>
-                </td>
-                <td>
-                  <a-tag size="small" :color="statusTagColor(plugin)">{{ statusLabel(plugin) }}</a-tag>
-                  <div class="config-status">{{ t('plugins.configStatus', { status: configStatusLabel(plugin) }) }}</div>
-                </td>
-                <td><a-tag size="small">{{ plugin.source }}</a-tag></td>
-                <td><a-tag size="small">{{ plugin.kind }}</a-tag></td>
-                <td>
-                  <div class="capability-list">
-                    <span>{{ t('plugins.capabilities.tools', { count: plugin.providesTools.length }) }}</span>
-                    <span>{{ t('plugins.capabilities.hooks', { count: plugin.providesHooks.length }) }}</span>
-                    <span>{{ t('plugins.capabilities.env', { count: plugin.requiresEnv.length }) }}</span>
-                  </div>
-                </td>
-                <td><code class="path-cell">{{ plugin.path || t('plugins.notAvailable') }}</code></td>
-                <td>
-                  <a-button
-                    v-if="canManagePlugin(plugin)"
-                    size="mini"
-                    type="secondary"
-                    :status="pluginIsEnabled(plugin) ? 'warning' : 'normal'"
-                    :loading="!!actionLoading[plugin.key]"
-                    @click="updatePlugin(plugin, !pluginIsEnabled(plugin))"
-                  >
-                    {{ pluginIsEnabled(plugin) ? t('common.disable') : t('common.enable') }}
-                  </a-button>
-                  <span v-else class="muted">{{ t('plugins.managedElsewhere') }}</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+        <div class="cy-sec-t plugins-sec">{{ t('plugins.title') }}</div>
+
+        <div v-if="filteredPlugins.length" class="cy-panel plugins-table-wrap">
+          <div class="cy-panel-h">
+            <h3>{{ t('plugins.table.plugin') }}</h3>
+            <span class="cy-meta">{{ filteredPlugins.length }} / {{ plugins.length }}</span>
+          </div>
+          <div class="cy-panel-b flush">
+            <table class="plugins-table">
+              <thead>
+                <tr>
+                  <th>{{ t('plugins.table.plugin') }}</th>
+                  <th>{{ t('plugins.table.status') }}</th>
+                  <th>{{ t('plugins.table.source') }}</th>
+                  <th>{{ t('plugins.table.kind') }}</th>
+                  <th>{{ t('plugins.table.capabilities') }}</th>
+                  <th>{{ t('plugins.table.path') }}</th>
+                  <th>{{ t('plugins.table.manage') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="plugin in filteredPlugins" :key="plugin.key">
+                  <td>
+                    <div class="plugin-name">
+                      <strong>{{ plugin.key }}</strong>
+                      <span v-if="plugin.name !== plugin.key">{{ plugin.name }}</span>
+                    </div>
+                    <div v-if="plugin.description" class="description">{{ plugin.description }}</div>
+                    <div v-if="plugin.version || plugin.author" class="meta-line">
+                      <span v-if="plugin.version">v{{ plugin.version }}</span>
+                      <span v-if="plugin.author">{{ plugin.author }}</span>
+                    </div>
+                  </td>
+                  <td>
+                    <span class="cy-tag" :class="statusTone(plugin)">{{ statusLabel(plugin) }}</span>
+                    <div class="config-status">{{ t('plugins.configStatus', { status: configStatusLabel(plugin) }) }}</div>
+                  </td>
+                  <td><span class="cy-tag">{{ plugin.source }}</span></td>
+                  <td><span class="cy-tag">{{ plugin.kind }}</span></td>
+                  <td>
+                    <div class="capability-list">
+                      <span>{{ t('plugins.capabilities.tools', { count: plugin.providesTools.length }) }}</span>
+                      <span>{{ t('plugins.capabilities.hooks', { count: plugin.providesHooks.length }) }}</span>
+                      <span>{{ t('plugins.capabilities.env', { count: plugin.requiresEnv.length }) }}</span>
+                    </div>
+                  </td>
+                  <td><code class="cy-code path-cell">{{ plugin.path || t('plugins.notAvailable') }}</code></td>
+                  <td>
+                    <a-button
+                      v-if="canManagePlugin(plugin)"
+                      size="mini"
+                      type="secondary"
+                      :status="pluginIsEnabled(plugin) ? 'warning' : 'normal'"
+                      :loading="!!actionLoading[plugin.key]"
+                      @click="updatePlugin(plugin, !pluginIsEnabled(plugin))"
+                    >
+                      {{ pluginIsEnabled(plugin) ? t('common.disable') : t('common.enable') }}
+                    </a-button>
+                    <span v-else class="muted">{{ t('plugins.managedElsewhere') }}</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
         <a-empty v-else :description="t('plugins.noMatch')" />
 
-        <div v-if="metadata" class="metadata-panel">
-          <span>{{ t('plugins.metadata.agentRoot') }}: <code>{{ metadata.hermesAgentRoot }}</code></span>
-          <span>{{ t('plugins.metadata.python') }}: <code>{{ metadata.pythonExecutable }}</code></span>
-          <span>{{ t('plugins.metadata.scanCwd') }}: <code>{{ metadata.cwd }}</code></span>
-          <span>{{ t('plugins.metadata.projectPlugins') }}: <code>{{ metadata.projectPluginsEnabled ? t('plugins.enabled') : t('plugins.disabled') }}</code></span>
+        <div v-if="metadata" class="cy-panel metadata-panel">
+          <div class="cy-panel-b">
+            <div class="cy-kv">
+              <div class="cy-kr">
+                <span class="cy-kk">{{ t('plugins.metadata.agentRoot') }}</span>
+                <span class="cy-kv-v"><code class="cy-code">{{ metadata.hermesAgentRoot }}</code></span>
+              </div>
+              <div class="cy-kr">
+                <span class="cy-kk">{{ t('plugins.metadata.python') }}</span>
+                <span class="cy-kv-v"><code class="cy-code">{{ metadata.pythonExecutable }}</code></span>
+              </div>
+              <div class="cy-kr">
+                <span class="cy-kk">{{ t('plugins.metadata.scanCwd') }}</span>
+                <span class="cy-kv-v"><code class="cy-code">{{ metadata.cwd }}</code></span>
+              </div>
+              <div class="cy-kr">
+                <span class="cy-kk">{{ t('plugins.metadata.projectPlugins') }}</span>
+                <span class="cy-kv-v">
+                  <span class="cy-tag" :class="metadata.projectPluginsEnabled ? 'ok' : ''">
+                    {{ metadata.projectPluginsEnabled ? t('plugins.enabled') : t('plugins.disabled') }}
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
         </div>
       </template>
     </div>
@@ -266,10 +295,7 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
 }
 
 .plugins-content {
-  flex: 1;
   min-height: 0;
-  overflow-y: auto;
-  padding: 20px;
 
   &.is-loading {
     display: grid;
@@ -286,38 +312,12 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
   margin-bottom: 14px;
 }
 
-.summary-grid {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(120px, 1fr));
-  gap: 12px;
+.plugins-kpis {
   margin-bottom: 16px;
 }
 
-.summary-card {
-  padding: 14px;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  background: $bg-card;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-
-  strong {
-    font-size: 24px;
-    line-height: 1;
-  }
-
-  &.success strong { color: $success; }
-  &.warning strong { color: $warning; }
-  &.error strong { color: $error; }
-  &.info strong { color: $accent-primary; }
-}
-
-.summary-label {
-  font-size: 11px;
-  color: $text-muted;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+.plugins-sec {
+  margin: 16px 0 8px;
 }
 
 .filter-row {
@@ -328,10 +328,11 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
 }
 
 .plugins-table-wrap {
-  overflow-x: auto;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  background: $bg-card;
+  overflow: hidden;
+
+  .cy-panel-b {
+    overflow-x: auto;
+  }
 }
 
 .plugins-table {
@@ -341,24 +342,29 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
 
   th,
   td {
-    padding: 12px;
-    border-bottom: 1px solid $border-color;
+    padding: 11px 14px;
+    border-bottom: 1px solid $border-light;
     text-align: left;
     vertical-align: top;
-    font-size: 13px;
+    font-size: 12.5px;
   }
 
   th {
-    color: $text-muted;
-    font-size: 11px;
+    font-family: $font-code;
+    color: $text-faint;
+    font-size: 10.5px;
     text-transform: uppercase;
-    letter-spacing: 0.04em;
-    background: rgba(var(--accent-primary-rgb), 0.04);
+    letter-spacing: 0.1em;
+    background: rgba(var(--accent-primary-rgb), 0.035);
   }
 
   tr:last-child td {
     border-bottom: none;
   }
+
+  tbody tr:hover td {
+    background: rgba(var(--accent-primary-rgb), 0.025);
+  }
 }
 
 .plugin-name {
@@ -366,6 +372,12 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
   flex-direction: column;
   gap: 2px;
 
+  strong {
+    font-family: $font-code;
+    font-size: 12.5px;
+    color: $text-primary;
+  }
+
   span {
     color: $text-muted;
     font-size: 12px;
@@ -404,27 +416,13 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: $text-muted;
-  background: rgba(var(--accent-primary-rgb), 0.06);
-  padding: 2px 6px;
-  border-radius: 6px;
 }
 
 .metadata-panel {
   margin-top: 16px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px 16px;
-  color: $text-muted;
-  font-size: 11px;
-
-  code {
-    color: $text-secondary;
-  }
 }
 
 @media (max-width: 900px) {
-  .summary-grid,
   .filter-row {
     grid-template-columns: 1fr;
   }
diff --git a/packages/client/src/views/hermes/ProfilesView.vue b/packages/client/src/views/hermes/ProfilesView.vue
index 254d5f8..2bf9f15 100644
--- a/packages/client/src/views/hermes/ProfilesView.vue
+++ b/packages/client/src/views/hermes/ProfilesView.vue
@@ -58,7 +58,7 @@ function handleImported() {
       </div>
     </header>
 
-    <div class="profiles-content">
+    <div class="cy-view profiles-content">
       <a-spin :loading="profilesStore.loading && profilesStore.profiles.length === 0">
         <ProfilesPanel @rename="renamingProfile = $event" />
       </a-spin>
@@ -99,8 +99,8 @@ function handleImported() {
 }
 
 .profiles-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
+  :deep(.arco-spin) {
+    display: block;
+  }
 }
 </style>
diff --git a/packages/client/src/views/hermes/SkillsUsageView.vue b/packages/client/src/views/hermes/SkillsUsageView.vue
index 7596be1..6667da1 100644
--- a/packages/client/src/views/hermes/SkillsUsageView.vue
+++ b/packages/client/src/views/hermes/SkillsUsageView.vue
@@ -9,19 +9,12 @@ import {
   type SkillUsageStats,
 } from '@/api/hermes/skills'
 
+import { CHART_CATEGORICAL, CHART_OTHER } from '@/styles/chart-palette'
+
 const { t } = useI18n()
 const profilesStore = useProfilesStore()
 const periodOptions = [7, 30, 90, 365]
 const maxVisibleChartSkills = 6
-const skillPalette = [
-  '#2f6eea',
-  '#f26d3d',
-  '#f49a5c',
-  '#9aa7ff',
-  '#8f2c8f',
-  '#00c2d1',
-]
-const otherSkillColor = '#5b6b84'
 
 interface ChartSegment {
   key: string
@@ -81,7 +74,7 @@ function otherSkillsLabel(): string {
 
 function colorForSkill(skillName: string): string {
   const index = chartSkills.value.findIndex(skill => skill.skill === skillName)
-  return index >= 0 ? skillPalette[index % skillPalette.length] : otherSkillColor
+  return index >= 0 ? CHART_CATEGORICAL[index % CHART_CATEGORICAL.length] : CHART_OTHER
 }
 
 function chartSegments(day: SkillUsageDailyRow): ChartSegment[] {
@@ -105,7 +98,7 @@ function chartSegments(day: SkillUsageDailyRow): ChartSegment[] {
       key: 'other-skills',
       label: otherSkillsLabel(),
       count: otherTotal,
-      color: otherSkillColor,
+      color: CHART_OTHER,
     })
   }
 
@@ -181,7 +174,7 @@ onMounted(() => {
       </div>
     </header>
 
-    <div class="skills-usage-content">
+    <div class="cy-view skills-usage-content">
       <div v-if="error && !stats" class="skills-usage-state error">
         {{ error }}
       </div>
@@ -193,11 +186,12 @@ onMounted(() => {
           {{ error }}
         </div>
         <section class="overview-grid">
-          <div class="usage-panel chart-panel" :class="{ 'is-refreshing': isRefreshing }" data-testid="skills-usage-chart">
-            <div class="panel-header">
+          <div class="usage-panel chart-panel cy-panel" :class="{ 'is-refreshing': isRefreshing }" data-testid="skills-usage-chart">
+            <div class="cy-panel-h">
               <h3>{{ t('skillsUsage.dailyTrend') }}</h3>
-              <span>{{ t('skillsUsage.periodSummary', { days: stats.period_days }) }}</span>
+              <span class="cy-meta">{{ t('skillsUsage.periodSummary', { days: stats.period_days }) }}</span>
             </div>
+            <div class="cy-panel-b">
             <div v-if="!hasData" class="skills-usage-state compact">
               {{ t('skillsUsage.noData') }}
             </div>
@@ -243,33 +237,35 @@ onMounted(() => {
                 <span>{{ stats.by_day[stats.by_day.length - 1]?.date.slice(5) }}</span>
               </div>
             </template>
+            </div>
           </div>
 
-          <div class="summary-grid" data-testid="skills-usage-stats" :aria-label="t('skillsUsage.summary')">
-            <div class="summary-card primary">
-              <div class="summary-label">{{ t('skillsUsage.totalActions') }}</div>
-              <div class="summary-value">{{ stats.summary.total_skill_actions }}</div>
+          <div class="cy-kpis summary-grid" data-testid="skills-usage-stats" :aria-label="t('skillsUsage.summary')">
+            <div class="cy-kpi acc">
+              <div class="k">{{ t('skillsUsage.totalActions') }}</div>
+              <div class="v">{{ stats.summary.total_skill_actions }}</div>
             </div>
-            <div class="summary-card">
-              <div class="summary-label">{{ t('skillsUsage.loads') }}</div>
-              <div class="summary-value">{{ stats.summary.total_skill_loads }}</div>
+            <div class="cy-kpi info">
+              <div class="k">{{ t('skillsUsage.loads') }}</div>
+              <div class="v">{{ stats.summary.total_skill_loads }}</div>
             </div>
-            <div class="summary-card">
-              <div class="summary-label">{{ t('skillsUsage.edits') }}</div>
-              <div class="summary-value">{{ stats.summary.total_skill_edits }}</div>
+            <div class="cy-kpi warn">
+              <div class="k">{{ t('skillsUsage.edits') }}</div>
+              <div class="v">{{ stats.summary.total_skill_edits }}</div>
             </div>
-            <div class="summary-card">
-              <div class="summary-label">{{ t('skillsUsage.distinctSkills') }}</div>
-              <div class="summary-value">{{ stats.summary.distinct_skills_used }}</div>
+            <div class="cy-kpi flat">
+              <div class="k">{{ t('skillsUsage.distinctSkills') }}</div>
+              <div class="v">{{ stats.summary.distinct_skills_used }}</div>
             </div>
           </div>
         </section>
 
-        <section class="usage-panel">
-          <div class="panel-header">
+        <section class="usage-panel cy-panel">
+          <div class="cy-panel-h">
             <h3>{{ t('skillsUsage.topSkills') }}</h3>
-            <span>{{ t('skillsUsage.periodSummary', { days: stats.period_days }) }}</span>
+            <span class="cy-meta">{{ t('skillsUsage.periodSummary', { days: stats.period_days }) }}</span>
           </div>
+          <div class="cy-panel-b">
           <div v-if="!hasData" class="skills-usage-state compact">
             {{ t('skillsUsage.noData') }}
           </div>
@@ -295,6 +291,7 @@ onMounted(() => {
               <span class="last-used" role="cell">{{ formatLastUsed(skill.last_used_at) }}</span>
             </div>
           </div>
+          </div>
         </section>
       </template>
     </div>
@@ -319,7 +316,7 @@ onMounted(() => {
 .header-subtitle {
   margin: 4px 0 0;
   color: $text-muted;
-  font-size: 13px;
+  font-size: 12.5px;
 }
 
 .skills-usage-toolbar {
@@ -334,12 +331,15 @@ onMounted(() => {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
+  padding: 2px;
+  border: 1px solid $border-light;
+  border-radius: $radius-sm;
+  background: $bg-secondary;
 }
 
 .skills-usage-content {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
   max-width: 1120px;
   margin: 0 auto;
   width: 100%;
@@ -356,55 +356,27 @@ onMounted(() => {
   grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
   gap: 16px;
   margin-bottom: 16px;
+  align-items: start;
 }
 
+// 指标卡改成 2×2：右侧窄栏放不下 auto-fit 的四列
 .summary-grid {
-  display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.summary-card,
-.usage-panel {
-  background: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-}
-
-.summary-card {
-  padding: 14px;
-
-  &.primary {
-    grid-column: span 2;
-  }
-}
-
-.summary-label {
-  color: $text-muted;
-  font-size: 12px;
-}
-
-.summary-value {
-  margin-top: 6px;
-  color: $text-primary;
-  font-size: 24px;
-  font-weight: 700;
 }
 
 .usage-panel {
-  padding: 16px;
   position: relative;
 
   &.is-refreshing::after {
     content: '';
     position: absolute;
-    top: 10px;
-    right: 12px;
-    width: 8px;
-    height: 8px;
+    top: 16px;
+    right: 16px;
+    width: 7px;
+    height: 7px;
     border-radius: 50%;
     background: $accent-primary;
-    box-shadow: 0 0 0 4px $accent-muted;
+    box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.7);
     animation: refresh-pulse 1s ease-in-out infinite;
   }
 }
@@ -426,25 +398,6 @@ onMounted(() => {
   font-size: 12px;
 }
 
-.panel-header {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-
-  h3 {
-    margin: 0;
-    font-size: 16px;
-    color: $text-primary;
-  }
-
-  span {
-    color: $text-muted;
-    font-size: 12px;
-  }
-}
-
 .skill-bar-chart {
   display: flex;
   gap: 3px;
@@ -467,8 +420,9 @@ onMounted(() => {
   height: 180px;
   display: flex;
   align-items: flex-end;
-  background: $bg-card;
-  border-radius: 3px 3px 0 0;
+  background: $bg-input;
+  border: 1px solid $border-light;
+  border-radius: 4px 4px 0 0;
   overflow: hidden;
 }
 
@@ -494,10 +448,11 @@ onMounted(() => {
   overflow-y: auto;
   background: $bg-secondary;
   color: $text-primary;
-  border: 1px solid $border-color;
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
+  box-shadow: 0 0 0 1px rgba(var(--accent-primary-rgb), 0.1), 0 12px 30px oklch(0 0 0 / 0.5);
   padding: 8px 10px;
   border-radius: $radius-sm;
+  font-family: $font-code;
   font-size: 11px;
   white-space: nowrap;
   z-index: 20;
@@ -517,6 +472,7 @@ onMounted(() => {
 .tooltip-date {
   font-weight: 600;
   margin-bottom: 6px;
+  color: $text-primary;
 }
 
 .tooltip-row {
@@ -524,8 +480,8 @@ onMounted(() => {
   grid-template-columns: 8px minmax(0, 1fr) auto;
   align-items: center;
   gap: 7px;
-  color: $text-secondary;
-  font-size: 10px;
+  color: $text-muted;
+  font-size: 10.5px;
   line-height: 1.6;
 
   span {
@@ -542,7 +498,7 @@ onMounted(() => {
     grid-template-columns: minmax(0, 1fr) auto;
     margin-top: 4px;
     padding-top: 4px;
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $border-light;
   }
 }
 
@@ -555,21 +511,23 @@ onMounted(() => {
 .bar-dates {
   display: flex;
   justify-content: space-between;
-  color: $text-muted;
+  color: $text-faint;
+  font-family: $font-code;
   font-size: 11px;
   margin-top: 8px;
 }
 
 .skill-color-dot {
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
   flex-shrink: 0;
+  box-shadow: 0 0 6px currentColor;
 }
 
 .skills-table {
   display: grid;
-  gap: 2px;
+  gap: 0;
 }
 
 .skills-row {
@@ -577,21 +535,26 @@ onMounted(() => {
   grid-template-columns: minmax(180px, 1fr) 80px 80px minmax(120px, 160px) minmax(160px, 1fr);
   align-items: center;
   gap: 12px;
-  padding: 10px 8px;
-  border-radius: 8px;
+  padding: 9px 12px;
+  border-bottom: 1px solid $border-light;
   color: $text-secondary;
-  font-size: 13px;
+  font-family: $font-code;
+  font-size: 12.5px;
 
   &:not(.table-head):hover {
-    background: $bg-card-hover;
+    background: $bg-secondary;
   }
 }
 
 .table-head {
-  color: $text-muted;
-  font-size: 12px;
+  color: $text-faint;
+  font-size: 10.5px;
   font-weight: 600;
+  letter-spacing: 0.09em;
   text-transform: uppercase;
+  border-bottom: 1px solid $border-color;
+  padding-top: 0;
+  padding-bottom: 9px;
 }
 
 .skill-name {
@@ -613,8 +576,9 @@ onMounted(() => {
 
 .share-bar {
   width: 54px;
-  height: 6px;
-  background: $bg-card;
+  height: 5px;
+  background: $bg-input;
+  border: 1px solid $border-light;
   border-radius: 999px;
   overflow: hidden;
 
@@ -627,13 +591,14 @@ onMounted(() => {
 
 .last-used {
   color: $text-muted;
+  font-size: 11.5px;
 }
 
 .skills-usage-state {
   text-align: center;
   padding: 60px 0;
-  color: $text-muted;
-  font-size: 14px;
+  color: $text-faint;
+  font-size: 13px;
 
   &.compact {
     padding: 24px 0;
diff --git a/packages/client/src/views/hermes/SkillsView.vue b/packages/client/src/views/hermes/SkillsView.vue
index 51b8b54..46dcd3a 100644
--- a/packages/client/src/views/hermes/SkillsView.vue
+++ b/packages/client/src/views/hermes/SkillsView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import SkillList from '@/components/hermes/skills/SkillList.vue'
@@ -273,7 +273,11 @@ function handleSkillSaved() {
       <div v-if="loading && categories.length === 0" class="skills-loading">{{ t('common.loading') }}</div>
       <div v-else class="skills-layout">
           <div class="mobile-backdrop" :class="{ active: showSidebar }" @click="showSidebar = false" />
-          <div v-if="showSidebar" class="skills-sidebar">
+          <div v-if="showSidebar" class="skills-sidebar cy-panel">
+            <div class="cy-panel-h">
+              <h3>{{ t('skills.title') }}</h3>
+              <span class="cy-meta">{{ categories.length }}</span>
+            </div>
             <div class="skills-target-filter">
               <span class="target-filter-label">{{ t('skills.targetFilter') }}</span>
               <a-select
@@ -294,7 +298,7 @@ function handleSkillSaved() {
               @deleted="handleSkillDeleted"
             />
           </div>
-          <div class="skills-main">
+          <div class="skills-main cy-panel">
             <SkillDetail
               v-if="selectedCategory && selectedSkill"
               :category="selectedCategory"
@@ -357,56 +361,60 @@ function handleSkillSaved() {
 }
 
 .target-filter-label {
-  font-size: 11px;
+  font-family: $font-code;
+  font-size: 10.5px;
   font-weight: 600;
-  color: $text-muted;
+  color: $text-faint;
   text-transform: uppercase;
-  letter-spacing: 0.3px;
+  letter-spacing: 0.1em;
 }
 
 .legend-item {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 5px;
+  font-family: $font-code;
   font-size: 11px;
-  color: $text-muted;
+  color: $text-faint;
   white-space: nowrap;
-  padding: 2px 6px;
+  padding: 2px 7px;
   border: 1px solid transparent;
-  border-radius: 10px;
+  border-radius: 4px;
   background: none;
   cursor: pointer;
   transition: all $transition-fast;
 
   &:hover {
-    color: $text-secondary;
+    color: $text-muted;
     background: rgba(var(--accent-primary-rgb), 0.04);
   }
 
   &.active {
     color: $text-primary;
-    border-color: $border-color;
+    border-color: rgba(var(--accent-primary-rgb), 0.35);
     background: rgba(var(--accent-primary-rgb), 0.08);
   }
 }
 
 .legend-dot {
   display: inline-block;
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
   flex-shrink: 0;
+  box-shadow: 0 0 6px currentColor;
 }
 
-.legend-dot.dot-builtin { background: #888; }
-.legend-dot.dot-hub { background: #4a90d9; }
-.legend-dot.dot-local { background: #66bb6a; }
-.legend-dot.dot-external { background: #f59e0b; }
+// 技能来源图例：与 SkillList.vue 里的同名图例用同一套颜色。
+// color 与 background 同值，让辉光（currentColor）跟着色。
+.legend-dot.dot-builtin { background: $text-muted; color: $text-muted; }
+.legend-dot.dot-hub { background: $info; color: $info; }
+.legend-dot.dot-local { background: $success; color: $success; }
+.legend-dot.dot-external { background: $warning; color: $warning; }
 
 .modified-icon {
   font-size: 11px;
   color: $warning;
-  opacity: 0.7;
 }
 
 @media (max-width: $breakpoint-mobile) {
@@ -439,6 +447,7 @@ function handleSkillSaved() {
 .skills-content {
   flex: 1;
   overflow: hidden;
+  padding: 20px 22px 24px;
 }
 
 .skills-loading {
@@ -452,12 +461,17 @@ function handleSkillSaved() {
 
 .skills-layout {
   display: flex;
+  gap: 12px;
   height: 100%;
+  min-height: 0;
+
+  > .cy-panel + .cy-panel {
+    margin-top: 0;
+  }
 }
 
 .skills-sidebar {
   width: 280px;
-  border-right: 1px solid $border-color;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -467,8 +481,9 @@ function handleSkillSaved() {
 
 .skills-main {
   flex: 1;
-  overflow-y: auto;
-  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   min-width: 0;
 }
 
@@ -498,7 +513,8 @@ function handleSkillSaved() {
     height: 100%;
     z-index: 10;
     background: $bg-card;
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+    border-color: rgba(var(--accent-primary-rgb), 0.28);
+    box-shadow: 0 0 0 1px rgba(var(--accent-primary-rgb), 0.12), 0 18px 48px oklch(0 0 0 / 0.55);
   }
 
   .skills-layout {
@@ -509,7 +525,7 @@ function handleSkillSaved() {
     display: block;
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.4);
+    background: $overlay-scrim;
     z-index: 9;
     opacity: 0;
     pointer-events: none;
@@ -523,14 +539,14 @@ function handleSkillSaved() {
 }
 
 .empty-detail {
-  height: 100%;
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
-  color: $text-muted;
-  font-size: 13px;
+  color: $text-faint;
+  font-size: 12.5px;
 }
 
 </style>
diff --git a/packages/client/src/views/hermes/TerminalView.vue b/packages/client/src/views/hermes/TerminalView.vue
index b8bda48..f07e905 100644
--- a/packages/client/src/views/hermes/TerminalView.vue
+++ b/packages/client/src/views/hermes/TerminalView.vue
@@ -599,7 +599,7 @@ onUnmounted(() => {
     height: 100%;
     z-index: 10;
     background: $bg-card;
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 2px 0 8px var(--shadow-ink);
     width: 280px;
 
     &.collapsed {
@@ -891,7 +891,7 @@ onUnmounted(() => {
   .session-backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.4);
+    background: $overlay-scrim;
     z-index: 9;
     opacity: 0;
     pointer-events: none;
@@ -938,16 +938,16 @@ onUnmounted(() => {
 .xterm .scrollbar {
   width: 6px !important;
   border-radius: 3px !important;
-  background: rgba(255, 255, 255, 0.08) !important;
+  background: rgba(var(--text-primary-rgb), 0.08) !important;
 }
 
 .xterm .scrollbar .slider {
   border-radius: 3px !important;
-  background: rgba(255, 255, 255, 0.2) !important;
+  background: rgba(var(--text-primary-rgb), 0.2) !important;
   transition: background 0.15s ease !important;
 }
 
 .xterm .scrollbar:hover .slider {
-  background: rgba(255, 255, 255, 0.35) !important;
+  background: rgba(var(--text-primary-rgb), 0.35) !important;
 }
 </style>
diff --git a/packages/client/src/views/hermes/UsageView.vue b/packages/client/src/views/hermes/UsageView.vue
index 4820440..a666e8c 100644
--- a/packages/client/src/views/hermes/UsageView.vue
+++ b/packages/client/src/views/hermes/UsageView.vue
@@ -62,7 +62,7 @@ onMounted(() => {
       </div>
     </header>
 
-    <div class="usage-content">
+    <div class="cy-view usage-content">
       <div v-if="usageStore.isLoading && !usageStore.hasData" class="usage-loading">
         {{ t('common.loading') }}
       </div>
@@ -105,9 +105,6 @@ onMounted(() => {
 }
 
 .usage-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
   max-width: 960px;
   margin: 0 auto;
   width: 100%;
diff --git a/packages/client/src/views/hermes/VersionPreviewView.vue b/packages/client/src/views/hermes/VersionPreviewView.vue
index a789343..5a91ff7 100644
--- a/packages/client/src/views/hermes/VersionPreviewView.vue
+++ b/packages/client/src/views/hermes/VersionPreviewView.vue
@@ -11,7 +11,7 @@ const { t } = useI18n()
       <h2 class="header-title">{{ t('githubPreview.title') }}</h2>
     </header>
 
-    <div class="page-content">
+    <div class="cy-view page-content">
       <GithubPreviewSettings />
     </div>
   </div>
@@ -29,6 +29,5 @@ const { t } = useI18n()
 .page-content {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
 }
 </style>
diff --git a/packages/client/src/views/hermes/WorkflowView.vue b/packages/client/src/views/hermes/WorkflowView.vue
index 3704b1f..d013136 100644
--- a/packages/client/src/views/hermes/WorkflowView.vue
+++ b/packages/client/src/views/hermes/WorkflowView.vue
@@ -144,7 +144,6 @@ const creatingWorkflow = ref(false)
 const isWorkflowBatchMode = ref(false)
 const selectedWorkflowIds = ref<Set<string>>(new Set())
 const deletingWorkflowIds = ref<Set<string>>(new Set())
-const showWorkflowBatchDeleteConfirm = ref(false)
 const isWorkflowBatchDeleting = ref(false)
 const savingWorkflow = ref(false)
 const executingWorkflow = ref(false)
@@ -1084,7 +1083,6 @@ function toggleWorkflowBatchMode() {
   isWorkflowBatchMode.value = !isWorkflowBatchMode.value
   if (!isWorkflowBatchMode.value) {
     selectedWorkflowIds.value = new Set()
-    showWorkflowBatchDeleteConfirm.value = false
   }
 }
 
@@ -1120,7 +1118,6 @@ async function handleWorkflowBatchDeleteConfirm() {
     const deletedIds = new Set(ids.filter(id => !result.errors.some(error => error.id === id)))
     workflows.value = workflows.value.filter(workflow => !deletedIds.has(workflow.id))
     selectedWorkflowIds.value = new Set()
-    showWorkflowBatchDeleteConfirm.value = false
     isWorkflowBatchMode.value = false
     if (deletedIds.has(activeWorkflowId.value)) {
       await clearActiveWorkflowPage()
@@ -1669,15 +1666,18 @@ async function uploadNodeImages(_nodeId: string, files: File[]) {
   return uploaded.map(file => file.path)
 }
 
+// MiniMap 的节点着色，和 WorkflowAgentNode.vue 的状态点用同一套映射 ——
+// 两处颜色不一致会让缩略图和主画面对不上。
+// 返回 CSS 变量字符串：VueFlow 把结果当 CSS color 用，变量能解析。
 function nodeColor(node: { data: WorkflowAgentNodeData }) {
-  if (node.data.status === 'queued') return '#64748b'
-  if (node.data.status === 'running') return '#2563eb'
-  if (node.data.status === 'pending_approval') return '#d97706'
-  if (node.data.status === 'completed') return '#16a34a'
-  if (node.data.status === 'failed') return '#dc2626'
-  if (node.data.status === 'approval_rejected') return '#b45309'
-  if (node.data.status === 'canceled') return '#f97316'
-  return '#9ca3af'
+  if (node.data.status === 'queued') return 'var(--text-muted)'
+  if (node.data.status === 'running') return 'var(--success)'
+  if (node.data.status === 'pending_approval') return 'var(--warning)'
+  if (node.data.status === 'completed') return 'var(--success)'
+  if (node.data.status === 'failed') return 'var(--error)'
+  if (node.data.status === 'approval_rejected') return 'var(--error)'
+  if (node.data.status === 'canceled') return 'var(--error)'
+  return 'var(--text-faint)'
 }
 </script>
 
@@ -2039,7 +2039,7 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
             <WorkflowAgentNode v-bind="nodeProps" />
           </template>
 
-          <Background :gap="24" :size="1.2" color="var(--border-color)" />
+          <Background :gap="22" :size="1.2" color="rgba(var(--accent-primary-rgb), 0.16)" />
           <MiniMap pannable zoomable :node-color="nodeColor" />
           <Controls />
         </VueFlow>
@@ -2272,14 +2272,14 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
 .workflow-list-item {
   width: 100%;
   min-width: 0;
-  border: none;
-  border-radius: 8px;
+  border: 1px solid transparent;
+  border-radius: $radius-sm;
   background: transparent;
   color: $text-secondary;
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 10px;
+  padding: 8px 9px;
   text-align: left;
   cursor: pointer;
   transition:
@@ -2287,7 +2287,7 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
     color $transition-fast;
 
   &:hover {
-    background: rgba(var(--accent-primary-rgb), 0.06);
+    background: $bg-card;
     color: $text-primary;
   }
 
@@ -2299,10 +2299,10 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
 
   &.active,
   &.selected {
-    background: rgba(var(--accent-primary-rgb), 0.12);
+    background: var(--accent-soft);
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
     color: $text-primary;
     font-weight: 500;
-    border-radius: 6px;
   }
 
   &.active .workflow-list-name,
@@ -2329,17 +2329,16 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   justify-content: center;
 }
 
+// 头像外圈 = 「机器在动」→ 全站统一的 live-ring（荧光绿单色呼吸）。
+// 原来这里是自己写的一套红色光环 + hue-rotate 动画：色相在转，形态却和
+// 会话列表的机器在动指示对不上，同一语义长出两种样子。
 .workflow-list-avatar-wrap.streaming::before {
   content: "";
   position: absolute;
   inset: -2px;
   box-sizing: border-box;
   border-radius: 50%;
-  box-shadow:
-    0 0 0 2px #ff6b6b,
-    0 0 10px rgba(255, 107, 107, 0.4),
-    0 0 20px rgba(255, 107, 107, 0.2);
-  animation: workflow-avatar-glow 4s linear infinite;
+  animation: live-ring 2.4s ease-in-out infinite;
 }
 
 .workflow-list-avatar {
@@ -2347,20 +2346,6 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   z-index: 1;
 }
 
-@keyframes workflow-avatar-glow {
-  0% {
-    filter: hue-rotate(0deg);
-    opacity: 0.95;
-  }
-  50% {
-    opacity: 0.65;
-  }
-  100% {
-    filter: hue-rotate(360deg);
-    opacity: 0.95;
-  }
-}
-
 .workflow-list-main {
   flex: 1;
   min-width: 0;
@@ -2378,15 +2363,16 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
 }
 
 .workflow-list-name {
-  font-size: 13px;
+  font-size: 12.5px;
   line-height: 18px;
   color: inherit;
 }
 
 .workflow-list-meta {
-  font-size: 11px;
+  font-family: $font-code;
+  font-size: 10.5px;
   line-height: 15px;
-  color: $text-muted;
+  color: $text-faint;
 }
 
 .workflow-list-delete {
@@ -2428,10 +2414,9 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
 }
 
 .workflow-field-label {
-  font-size: 12px;
-  font-weight: 500;
+  font-size: 11.5px;
   line-height: 16px;
-  color: $text-secondary;
+  color: $text-muted;
 }
 
 .header-left {
@@ -2467,26 +2452,31 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 16px;
+  font-family: $font-code;
+  font-size: 15px;
   font-weight: 600;
-  line-height: 22px;
+  line-height: 20px;
+  letter-spacing: 0.04em;
   color: $text-primary;
 }
 
+// 工作区徽标：与聊天页顶栏的 .cy-tag 同一套规格（发丝线边 + 等宽字 + 小圆角）。
 .workspace-badge {
   flex: 0 1 auto;
   max-width: 160px;
   min-width: 0;
-  border: 0;
+  height: 20px;
+  border: 1px solid $border-color;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.05);
+  background: $bg-secondary;
   color: $text-muted;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
+  gap: 5px;
+  padding: 0 7px;
+  font-family: $font-code;
   font-size: 11px;
-  line-height: 16px;
+  line-height: 1;
   cursor: pointer;
   overflow: hidden;
 
@@ -2502,8 +2492,8 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   }
 
   &:hover {
-    color: $text-secondary;
-    background: rgba(var(--accent-primary-rgb), 0.06);
+    color: $accent-primary;
+    border-color: rgba(var(--accent-primary-rgb), 0.45);
   }
 }
 
@@ -2620,11 +2610,11 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
 
 .workflow-chat-header {
   flex: 0 0 auto;
-  min-height: 47px;
+  min-height: 48px;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
+  gap: 10px;
+  padding: 8px 12px;
   border-bottom: 1px solid $border-color;
 }
 
@@ -2635,8 +2625,10 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: $text-primary;
-  font-size: 13px;
+  font-family: $font-code;
+  font-size: 12.5px;
   font-weight: 600;
+  line-height: 1.3;
 }
 
 .workflow-chat-content {
@@ -2658,6 +2650,7 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   font-size: 13px;
 }
 
+// 审批挂起 = 「需要你介入」→ 橙（--warning），不是普通面板底色。
 .workflow-node-approval-panel {
   flex: 0 0 auto;
   display: flex;
@@ -2665,14 +2658,15 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   justify-content: space-between;
   gap: 12px;
   padding: 10px 12px;
-  border-bottom: 1px solid $border-color;
-  background: rgba(217, 119, 6, 0.08);
+  border-bottom: 1px solid var(--warning-line);
+  background: var(--warning-soft);
 }
 
 .workflow-node-approval-title {
   min-width: 0;
-  color: $text-primary;
-  font-size: 13px;
+  color: $warning;
+  font-family: $font-code;
+  font-size: 12.5px;
   font-weight: 600;
   line-height: 18px;
 }
@@ -2690,7 +2684,7 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 12px;
+  padding: 10px 10px 8px;
   border-bottom: 1px solid $border-light;
 }
 
@@ -2698,7 +2692,8 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   min-width: 0;
   flex: 1;
   color: $text-primary;
-  font-size: 13px;
+  font-family: $font-code;
+  font-size: 12.5px;
   font-weight: 600;
   line-height: 18px;
 }
@@ -2738,18 +2733,19 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
 .workflow-runs-list {
   min-height: 0;
   overflow-y: auto;
-  padding: 10px;
+  padding: 0 8px 8px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
+// 运行记录条目用原型的 .row-i 规格：发丝线框 + 小圆角 + 悬停转青边。
 .workflow-run-item {
-  border: 1px solid $border-light;
-  border-radius: 8px;
-  background: $bg-secondary;
+  border: 1px solid $border-color;
+  border-radius: $radius-sm;
+  background: $bg-card;
   color: inherit;
-  padding: 10px;
+  padding: 9px 12px;
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -2758,13 +2754,13 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   transition: border-color $transition-fast, background-color $transition-fast;
 
   &:hover {
-    border-color: rgba(var(--accent-primary-rgb), 0.45);
-    background: rgba(var(--accent-primary-rgb), 0.06);
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
+    background: $bg-secondary;
   }
 
   &.active {
-    border-color: var(--accent-primary);
-    background: rgba(var(--accent-primary-rgb), 0.12);
+    border-color: rgba(var(--accent-primary-rgb), 0.45);
+    background: var(--accent-soft);
   }
 }
 
@@ -2784,44 +2780,54 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   min-width: 0;
   gap: 6px;
   color: $text-primary;
-  font-size: 12px;
+  font-family: $font-code;
+  font-size: 11.5px;
   font-weight: 600;
   line-height: 16px;
 }
 
+// 运行记录的状态点：与 WorkflowAgentNode.vue 的节点状态点同一套映射。
+// 用原型的 .led 规格（7px + currentColor 辉光），所以 color 必须与 background 同步给。
 .workflow-run-status-dot {
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
   flex: 0 0 auto;
-  background: #9ca3af;
+  background: $text-faint;
+  color: $text-faint;
+  box-shadow: 0 0 6px currentColor;
 }
 
 .workflow-run-status.status-queued .workflow-run-status-dot {
-  background: #64748b;
+  background: $text-muted;
+  color: $text-muted;
 }
 
 .workflow-run-status.status-running .workflow-run-status-dot {
-  background: #2563eb;
-  box-shadow: 0 0 8px rgba(37, 99, 235, 0.65);
+  background: $success;
+  color: $success;
 }
 
 .workflow-run-status.status-completed .workflow-run-status-dot {
-  background: #16a34a;
+  background: $success;
+  color: $success;
 }
 
 .workflow-run-status.status-failed .workflow-run-status-dot {
-  background: #dc2626;
+  background: $error;
+  color: $error;
 }
 
 .workflow-run-status.status-canceled .workflow-run-status-dot {
-  background: #f97316;
+  background: $error;
+  color: $error;
 }
 
 .workflow-run-duration,
 .workflow-run-time,
 .workflow-run-meta,
 .workflow-run-error {
+  font-family: $font-code;
   font-size: 11px;
   line-height: 15px;
 }
@@ -2857,8 +2863,8 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   }
 
   :deep(.vue-flow__edge-path) {
-    stroke: var(--accent-info);
-    stroke-width: 2;
+    stroke: rgba(var(--accent-primary-rgb), 0.45);
+    stroke-width: 1.5;
     stroke-dasharray: 6 6;
   }
 
@@ -2894,7 +2900,7 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
     height: 100%;
     z-index: 120;
     background: $bg-card;
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+    box-shadow: $shadow-md;
     width: $sidebar-width;
 
     &.collapsed {
@@ -2906,7 +2912,7 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   .workflow-sidebar-backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.4);
+    background: var(--overlay-scrim);
     z-index: 110;
     opacity: 0;
     pointer-events: none;
@@ -2973,7 +2979,7 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
     flex: none;
     min-height: 0;
     border-left: 1px solid $border-color;
-    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16);
+    box-shadow: $shadow-lg;
     display: flex;
   }
 
diff --git a/prototype_reference/hermes-ui-cyber-api.html b/prototype_reference/hermes-ui-cyber-api.html
new file mode 100644
index 0000000..f83cf55
--- /dev/null
+++ b/prototype_reference/hermes-ui-cyber-api.html
@@ -0,0 +1,3294 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Hermes UI · CYBER 界面原型（API 对齐版）</title>
+<!--
+  ============================================================================
+  Hermes UI · CYBER 界面原型（API 对齐版）
+  ----------------------------------------------------------------------------
+  纯静态原型。不接入、不修改 packages/client 与 packages/server。
+  所有字段名 / 枚举值 / 响应信封 / 时间戳单位 均对齐真实后端契约。
+
+  设计语言继承：prototype_reference/hermes-ui-cyber-shell.html
+  本版改进：
+    1. 侧栏 IA 按真实 AppSidebar.vue 的 4 组 18 项重排
+    2. 数据全部替换为真实字段名 + 真实枚举（修正原型的虚构模型名 / 缺失状态色）
+    3. 新增「本页数据来源」契约面板：端点 + 响应信封 + 关键字段 + 枚举 + 时间戳单位
+    4. chat / history / global-agent / group-chat / workflow / terminal 走
+       PageSidebarNav 自带侧栏，不吃全局 AppSidebar（与 App.vue 一致）
+    5. 顶栏显示 route name / View 文件名 / SUPERADMIN 标记，与路由守卫一致
+
+  令牌映射（CYBER → 项目 variables.scss），接入时按此替换：
+    --bg        → --bg-primary      --surface   → --bg-secondary
+    --surface-2 → --bg-tertiary     --input-bg  → --bg-input
+    --fg        → --text-primary    --muted     → --text-secondary
+    --accent    → --accent-primary  --border    → --border-color
+    --radius 6 / --radius-lg 8 → 同名；--rail-w 240 / --top-h 60 → 与 ui-baseline.md 一致
+  ============================================================================
+-->
+<style>
+/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
+:root{
+  --bg:        oklch(0.155 0.012 250);
+  --surface:   oklch(0.130 0.012 250);
+  --surface-2: oklch(0.185 0.014 248);
+  --surface-3: oklch(0.225 0.016 246);
+  --input-bg:  oklch(0.105 0.012 252);
+  --code-bg:   oklch(0.115 0.014 250);
+  --fg:        oklch(0.945 0.006 200);
+  --fg-soft:   oklch(0.860 0.008 210);
+  --muted:     oklch(0.705 0.014 230);
+  --faint:     oklch(0.520 0.014 236);
+  --border:    oklch(0.305 0.018 242);
+  --hairline:  oklch(0.255 0.016 244);
+  --accent:    oklch(0.805 0.148 188);
+  --accent-hv: oklch(0.870 0.150 188);
+  --accent-ink:oklch(0.160 0.030 200);
+  --accent-soft:oklch(0.805 0.148 188 / 0.13);
+  --ok:        oklch(0.760 0.140 165);
+  --warn:      oklch(0.810 0.145  85);
+  --err:       oklch(0.665 0.185  22);
+  --info:      oklch(0.700 0.110 245);
+  --run:       var(--accent);
+
+  --font-display: ui-monospace,'JetBrains Mono','SF Mono','Menlo','Cascadia Code',monospace;
+  --font-body: -apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Segoe UI',Roboto,sans-serif;
+
+  --rail-w: 240px; --rail-w-mini: 64px; --top-h: 60px;
+  --radius: 6px; --radius-lg: 8px;
+  --shadow: 0 18px 48px oklch(0 0 0 / 0.55);
+}
+
+/* ── 2. RESET / BASE ─────────────────────────────────────────────────────── */
+*,*::before,*::after{box-sizing:border-box}
+html,body{height:100%}
+body{
+  margin:0; background:var(--bg); color:var(--fg);
+  font:14px/1.55 var(--font-body);
+  -webkit-font-smoothing:antialiased;
+  overflow:hidden;
+}
+a{color:inherit;text-decoration:none}
+button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
+input,select,textarea{font:inherit;color:inherit}
+::-webkit-scrollbar{width:9px;height:9px}
+::-webkit-scrollbar-thumb{background:var(--border);border-radius:9px}
+::-webkit-scrollbar-thumb:hover{background:var(--faint)}
+::-webkit-scrollbar-track{background:transparent}
+.mono{font-family:var(--font-display)}
+.mut{color:var(--muted)}
+.fnt{color:var(--faint)}
+.sm{font-size:12px}
+.xs{font-size:11px}
+.up{text-transform:uppercase;letter-spacing:.10em}
+.nowrap{white-space:nowrap}
+.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.grow{flex:1;min-width:0}
+.row{display:flex;align-items:center;gap:8px}
+.row-b{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.col{display:flex;flex-direction:column}
+.wrap{flex-wrap:wrap}
+.g4{gap:4px}.g6{gap:6px}.g10{gap:10px}.g12{gap:12px}.g16{gap:16px}
+.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
+.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}
+.hide{display:none !important}
+
+/* ── 3. SHELL ────────────────────────────────────────────────────────────── */
+.shell{display:grid;grid-template-columns:var(--rail-w) 1fr;height:100vh;transition:grid-template-columns .18s ease}
+.shell.mini{grid-template-columns:var(--rail-w-mini) 1fr}
+/* 对齐 App.vue 的 usesPageSidebar：这 9 条路由不挂 AppSidebar。
+   本原型仍渲染 rail 元素，但默认移出视口（抽屉），供导航使用。 */
+.shell.no-rail{grid-template-columns:1fr}
+.shell.no-rail > .rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:70;
+  transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow)}
+.shell.no-rail.drawer > .rail{transform:none}
+.psl-jump{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.psl-jump a{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid var(--border);
+  border-radius:12px;font:11px/1 var(--font-display);color:var(--muted);background:var(--surface-2)}
+.psl-jump a:hover{color:var(--accent);border-color:oklch(0.805 0.148 188/.45)}
+.shell.no-rail.drawer::after{content:'';position:fixed;inset:0;background:oklch(0 0 0 / .5);z-index:65}
+
+/* 3.1 rail */
+.rail{
+  background:var(--surface); border-right:1px solid var(--border);
+  display:flex; flex-direction:column; min-width:0; position:relative;
+}
+.rail::after{content:'';position:absolute;inset:0;pointer-events:none;
+  background:radial-gradient(120% 60% at 50% 0%, oklch(0.805 0.148 188 / .05), transparent 62%)}
+.rail-top{display:flex;align-items:center;gap:8px;height:var(--top-h);padding:0 12px;border-bottom:1px solid var(--hairline);flex:0 0 auto}
+.brand{display:flex;align-items:center;gap:9px;min-width:0}
+.brand-mark{width:26px;height:26px;flex:0 0 auto;border:1px solid var(--accent);border-radius:var(--radius);
+  display:grid;place-items:center;color:var(--accent);font:700 12px/1 var(--font-display);
+  box-shadow:0 0 0 1px oklch(0.805 0.148 188/.18), 0 0 14px oklch(0.805 0.148 188/.22) inset}
+.brand-tx{display:flex;flex-direction:column;min-width:0}
+.brand-tx b{font:600 13px/1.2 var(--font-display);letter-spacing:.06em}
+.brand-tx span{font-size:10px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase}
+.rail-top-actions{margin-left:auto;display:flex;align-items:center;gap:2px}
+.icon-btn{width:28px;height:28px;border-radius:var(--radius);display:grid;place-items:center;color:var(--muted);
+  border:1px solid transparent;font:13px/1 var(--font-display);transition:.14s}
+.icon-btn:hover{background:var(--surface-2);color:var(--fg);border-color:var(--border)}
+.icon-btn.on{color:var(--accent);border-color:oklch(0.805 0.148 188/.4);background:var(--accent-soft)}
+
+.rail-scroll{flex:1;overflow:auto;padding:10px 8px 16px;min-height:0}
+.nav-group{margin-bottom:14px}
+.nav-group-t{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
+  padding:6px 10px;display:flex;align-items:center;gap:8px}
+.nav-group-t::after{content:'';flex:1;height:1px;background:var(--hairline)}
+.nav-i{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--radius);
+  color:var(--muted);font-size:13px;border:1px solid transparent;transition:.14s;position:relative}
+.nav-i:hover{background:var(--surface-2);color:var(--fg)}
+.nav-i.on{background:var(--accent-soft);color:var(--accent);border-color:oklch(0.805 0.148 188/.28)}
+.nav-i.on::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
+  width:2px;height:16px;background:var(--accent);border-radius:2px;box-shadow:0 0 8px var(--accent)}
+.nav-i .ic{width:16px;text-align:center;font:12px/1 var(--font-display);opacity:.9;flex:0 0 auto}
+.nav-i .sa{margin-left:auto;font-size:9px;letter-spacing:.08em;color:var(--faint);
+  border:1px solid var(--border);border-radius:3px;padding:1px 4px}
+.nav-i.on .sa{color:var(--accent);border-color:oklch(0.805 0.148 188/.4)}
+/* 无侧栏入口项：真实实现里这些路由不在 AppSidebar，视觉上退后一层 */
+.nav-i.dim{opacity:.62;border-style:dashed}
+.nav-i.dim:hover{opacity:1}
+
+.rail-foot{flex:0 0 auto;border-top:1px solid var(--hairline);padding:10px;display:flex;flex-direction:column;gap:8px;
+  background:var(--input-bg)}
+.foot-sel{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);
+  border-radius:var(--radius);background:var(--surface-2)}
+.foot-sel .k{font-size:10px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
+.foot-sel .v{font:12px/1.3 var(--font-display)}
+.foot-btns{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.foot-btn{width:26px;height:24px;border:1px solid var(--border);border-radius:4px;display:grid;place-items:center;
+  color:var(--muted);font:11px/1 var(--font-display)}
+.foot-btn:hover{color:var(--accent);border-color:oklch(0.805 0.148 188/.4)}
+.foot-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--faint)}
+.shell.mini .rail-scroll,.shell.mini .rail-foot .foot-sel,.shell.mini .brand-tx,
+.shell.mini .nav-group-t,.shell.mini .nav-i span.lb,.shell.mini .nav-i .sa,
+.shell.mini .foot-meta span.hide-mini{display:none}
+.shell.mini .nav-i{justify-content:center;padding:9px 0}
+.shell.mini .brand{justify-content:center}
+
+/* 3.2 main column */
+.main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
+.topbar{flex:0 0 auto;height:var(--top-h);display:flex;align-items:center;gap:10px;padding:0 16px;
+  border-bottom:1px solid var(--border);background:oklch(0.155 0.012 250 / .82);backdrop-filter:blur(10px);z-index:20}
+.crumb{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px}
+.crumb .grp{color:var(--faint);text-transform:uppercase;letter-spacing:.12em;font-size:10px}
+.crumb .sep{color:var(--border)}
+.crumb .rt{font-family:var(--font-display);color:var(--fg)}
+.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
+.tb-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid var(--border);
+  border-radius:var(--radius);font:11px/1 var(--font-display);color:var(--muted);background:var(--surface-2)}
+.tb-chip.on{color:var(--accent);border-color:oklch(0.805 0.148 188/.45);background:var(--accent-soft)}
+.tb-chip:hover{color:var(--fg)}
+.sa-badge{font:9px/1 var(--font-display);letter-spacing:.1em;color:var(--warn);border:1px solid oklch(0.810 0.145 85/.4);
+  background:oklch(0.810 0.145 85/.12);border-radius:3px;padding:2px 5px}
+
+/* view host */
+.view-host{flex:1;min-height:0;overflow:auto;position:relative}
+.view-host.flush{overflow:hidden}
+.view{animation:fade .18s ease}
+@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
+.view-pad{padding:20px 22px 40px}
+.view-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
+.view-head h1{margin:0;font:600 19px/1.25 var(--font-display);letter-spacing:.01em}
+.view-head .sub{font-size:12px;color:var(--muted);margin-top:5px;max-width:78ch}
+.view-head .actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
+
+/* ── 4. CYBER COMPONENTS ─────────────────────────────────────────────────── */
+.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);position:relative}
+.panel-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--hairline)}
+.panel-h h3{margin:0;font:600 12.5px/1.3 var(--font-display);letter-spacing:.04em}
+.panel-h .meta{font-size:11px;color:var(--faint);font-family:var(--font-display)}
+.panel-h .right{margin-left:auto;display:flex;align-items:center;gap:8px}
+.panel-b{padding:14px}
+.panel-b.flush{padding:0}
+
+.btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--radius);
+  border:1px solid var(--border);background:var(--surface-2);color:var(--fg);font-size:12.5px;transition:.14s;white-space:nowrap}
+.btn:hover{border-color:var(--faint);background:var(--surface-3)}
+.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
+.btn.pri:hover{background:var(--accent-hv)}
+.btn.ghost{background:transparent}
+.btn.ghost:hover{background:var(--surface-2)}
+.btn.text{background:transparent;border-color:transparent;color:var(--muted);padding:0 6px}
+.btn.text:hover{color:var(--accent)}
+.btn.danger{color:var(--err);border-color:oklch(0.665 0.185 22/.4)}
+.btn.danger:hover{background:oklch(0.665 0.185 22/.12)}
+.btn.sm{height:25px;padding:0 9px;font-size:11.5px}
+.btn[disabled]{opacity:.42;cursor:not-allowed}
+.btn.on{color:var(--accent);border-color:oklch(0.805 0.148 188/.45);background:var(--accent-soft)}
+
+.sel{height:30px;padding:0 26px 0 10px;border-radius:var(--radius);border:1px solid var(--border);
+  background:var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a8694' fill='none' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 9px center;
+  -webkit-appearance:none;appearance:none;font-size:12.5px;color:var(--fg);cursor:pointer}
+.sel.sm{height:25px;font-size:11.5px}
+.inp{height:30px;padding:0 10px;border-radius:var(--radius);border:1px solid var(--border);
+  background:var(--input-bg);font-size:12.5px;width:100%}
+.inp::placeholder{color:var(--faint)}
+.inp:focus,.sel:focus{outline:none;border-color:oklch(0.805 0.148 188/.55);box-shadow:0 0 0 3px oklch(0.805 0.148 188/.1)}
+textarea.inp{height:auto;padding:8px 10px;line-height:1.6;resize:vertical;font-family:var(--font-display);font-size:12px}
+.field{display:flex;flex-direction:column;gap:6px}
+.field>label{font-size:11.5px;color:var(--muted)}
+.field .hint{font-size:11px;color:var(--faint)}
+.search{position:relative;display:flex;align-items:center}
+.search input{padding-left:28px}
+.search::before{content:'⌕';position:absolute;left:9px;color:var(--faint);font-size:14px;z-index:1}
+
+.led{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--faint);box-shadow:0 0 6px currentColor}
+.led.ok{background:var(--ok);color:var(--ok)}
+.led.run{background:var(--accent);color:var(--accent);animation:pulse 1.4s infinite}
+.led.err{background:var(--err);color:var(--err)}
+.led.warn{background:var(--warn);color:var(--warn)}
+.led.info{background:var(--info);color:var(--info)}
+.led.idle{background:var(--faint)}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
+
+.tag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:4px;
+  font:11px/1 var(--font-display);border:1px solid var(--border);background:var(--surface-2);color:var(--muted);white-space:nowrap}
+.tag.ok{color:var(--ok);border-color:oklch(0.760 0.140 165/.35);background:oklch(0.760 0.140 165/.1)}
+.tag.err{color:var(--err);border-color:oklch(0.665 0.185 22/.35);background:oklch(0.665 0.185 22/.1)}
+.tag.warn{color:var(--warn);border-color:oklch(0.810 0.145 85/.35);background:oklch(0.810 0.145 85/.1)}
+.tag.run{color:var(--accent);border-color:oklch(0.805 0.148 188/.35);background:var(--accent-soft)}
+.tag.info{color:var(--info);border-color:oklch(0.700 0.110 245/.35);background:oklch(0.700 0.110 245/.1)}
+.tag.acc{color:var(--accent);border-color:oklch(0.805 0.148 188/.35);background:var(--accent-soft)}
+
+.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:12px;
+  border:1px solid var(--border);background:var(--surface-2);font:11.5px/1 var(--font-display);color:var(--muted)}
+.chip.on{color:var(--accent);border-color:oklch(0.805 0.148 188/.45);background:var(--accent-soft)}
+
+.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
+.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;position:relative;overflow:hidden}
+.kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:.7}
+.kpi.acc::after{background:var(--accent)}.kpi.ok::after{background:var(--ok)}.kpi.warn::after{background:var(--warn)}
+.kpi.err::after{background:var(--err)}.kpi.info::after{background:var(--info)}.kpi.flat::after{background:var(--border)}
+.kpi .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
+.kpi .v{font:600 22px/1.2 var(--font-display);margin-top:6px;letter-spacing:-.01em}
+.kpi .s{font-size:11.5px;color:var(--muted);margin-top:4px}
+
+.tcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:13px 14px;display:flex;flex-direction:column;gap:8px;transition:.14s}
+.tcard:hover{border-color:oklch(0.805 0.148 188/.35)}
+.tcard .th{display:flex;align-items:center;gap:8px}
+.tcard .th b{font:600 13px/1.3 var(--font-display)}
+.tcard .th .right{margin-left:auto;display:flex;align-items:center;gap:6px}
+.tcard .desc{font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.grid2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
+.grid3{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
+.grid4{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
+
+/* row item list */
+.row-i{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);
+  border-radius:var(--radius);background:var(--surface);transition:.14s}
+.row-i:hover{border-color:oklch(0.805 0.148 188/.3);background:var(--surface-2)}
+.row-i .ttl{font-size:12.5px}
+.row-i .sub{font-size:11px;color:var(--faint)}
+.row-i .rt{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
+.stack{display:flex;flex-direction:column;gap:8px}
+.stack.tight{gap:6px}
+
+/* tables */
+.twrap{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:auto;background:var(--surface)}
+table.tb{width:100%;border-collapse:collapse;font-size:12.5px}
+table.tb th{position:sticky;top:0;background:var(--surface-2);text-align:left;font:600 10.5px/1.4 var(--font-display);
+  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:9px 12px;border-bottom:1px solid var(--border);white-space:nowrap;z-index:2}
+table.tb td{padding:9px 12px;border-bottom:1px solid var(--hairline);vertical-align:middle}
+table.tb tbody tr:last-child td{border-bottom:none}
+table.tb tbody tr:hover{background:var(--surface-2)}
+table.tb td.num{font-family:var(--font-display);text-align:right;white-space:nowrap}
+table.tb .cellsub{font-size:11px;color:var(--faint)}
+
+/* key-value */
+.kv{display:grid;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
+.kv .kr{display:grid;grid-template-columns:minmax(120px,34%) 1fr;border-bottom:1px solid var(--hairline)}
+.kv .kr:last-child{border-bottom:none}
+.kv .kk{padding:8px 11px;background:var(--surface-2);font-size:11.5px;color:var(--muted);
+  font-family:var(--font-display);border-right:1px solid var(--hairline)}
+.kv .kv-v{padding:8px 11px;font-size:12.5px;min-width:0;word-break:break-word}
+.kv.two .kr{grid-template-columns:minmax(120px,26%) 1fr minmax(120px,26%) 1fr}
+
+/* terminal / code */
+.term{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;
+  font:12px/1.65 var(--font-display);white-space:pre-wrap;word-break:break-word;color:var(--fg-soft);overflow:auto}
+.term .c-ok{color:var(--ok)}.term .c-warn{color:var(--warn)}.term .c-err{color:var(--err)}
+.term .c-acc{color:var(--accent)}.term .c-mut{color:var(--faint)}.term .c-dim{color:var(--muted)}
+.code{font-family:var(--font-display);font-size:11.5px;background:var(--code-bg);border:1px solid var(--hairline);
+  border-radius:4px;padding:1px 5px;color:var(--accent)}
+.code.p{color:var(--muted)}
+
+/* meters + bars */
+.meter{height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
+.meter>i{display:block;height:100%;border-radius:3px;background:var(--accent);box-shadow:0 0 8px oklch(0.805 0.148 188/.5)}
+.meter.warn>i{background:var(--warn);box-shadow:0 0 8px oklch(0.810 0.145 85/.5)}
+.meter.err>i{background:var(--err);box-shadow:0 0 8px oklch(0.665 0.185 22/.5)}
+.meter.ok>i{background:var(--ok);box-shadow:0 0 8px oklch(0.760 0.140 165/.5)}
+.bars{display:flex;align-items:flex-end;gap:3px;height:88px}
+.bars>i{flex:1;background:linear-gradient(180deg,var(--accent),oklch(0.805 0.148 188/.25));
+  border-radius:2px 2px 0 0;min-height:2px}
+.bars>i.dim{background:var(--surface-3)}
+.bars>i.hi{background:linear-gradient(180deg,var(--accent-hv),var(--accent))}
+.chart-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
+
+/* note / callout */
+.note{border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:var(--radius);
+  background:var(--surface);padding:10px 12px;font-size:12px;color:var(--muted)}
+.note.warn{border-left-color:var(--warn)}
+.note.err{border-left-color:var(--err)}
+.note.info{border-left-color:var(--info)}
+.note b{color:var(--fg)}
+
+/* tabs */
+.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto}
+.tab{padding:8px 13px;font-size:12.5px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:.14s}
+.tab:hover{color:var(--fg)}
+.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
+.tab.dis{opacity:.4;cursor:not-allowed}
+
+/* stat strip */
+.stat-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.stat-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:14px;
+  border:1px solid var(--border);background:var(--surface);font:11.5px/1 var(--font-display)}
+.stat-chip b{font-size:13px}
+.stat-chip.total{border-color:oklch(0.805 0.148 188/.4);color:var(--accent);background:var(--accent-soft)}
+
+/* split layout (in-view) */
+.split{display:grid;gap:12px}
+.split.c2{grid-template-columns:1fr 1fr}
+.split.c3{grid-template-columns:repeat(3,1fr)}
+.split.side-l{grid-template-columns:280px 1fr}
+.split.side-r{grid-template-columns:1fr 300px}
+@media (max-width:1180px){.split.c3,.split.c2,.split.side-l,.split.side-r{grid-template-columns:1fr}}
+
+/* section label */
+.sec-t{display:flex;align-items:center;gap:9px;margin:20px 0 10px;font:600 11px/1 var(--font-display);
+  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
+.sec-t::after{content:'';flex:1;height:1px;background:var(--hairline)}
+.sec-t:first-child{margin-top:0}
+
+/* switch */
+.sw{width:34px;height:18px;border-radius:10px;background:var(--surface-3);border:1px solid var(--border);position:relative;flex:0 0 auto;transition:.16s}
+.sw::after{content:'';position:absolute;left:2px;top:1.5px;width:13px;height:13px;border-radius:50%;background:var(--muted);transition:.16s}
+.sw.on{background:var(--accent-soft);border-color:oklch(0.805 0.148 188/.55)}
+.sw.on::after{left:17px;background:var(--accent)}
+.sw.sm{width:28px;height:16px}.sw.sm::after{width:11px;height:11px;top:1.5px}.sw.sm.on::after{left:14px}
+
+/* ── 5. PAGE-SIDEBAR LAYOUT (chat / history / global-agent / group-chat) ──── */
+.psl{display:grid;grid-template-columns:288px 1fr;height:100%;min-height:0}
+.psl.wide{grid-template-columns:340px 1fr}
+.psl-mid{display:grid;grid-template-columns:1fr 320px;min-height:0}
+@media (max-width:1080px){.psl,.psl.wide,.psl-mid{grid-template-columns:1fr}}
+
+/* 5.1 PageSidebarNav */
+.psnav{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border);background:var(--surface)}
+.psnav-tabs{display:flex;align-items:center;gap:6px;padding:10px 10px 8px;flex:0 0 auto}
+.psnav-tabs .primary{padding:7px 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);font-size:12.5px}
+.psnav-tabs .primary:hover{border-color:var(--accent);color:var(--accent)}
+.conv-switch{display:grid;gap:6px;padding:0 10px 10px;flex:0 0 auto}
+.conv-switch.c3{grid-template-columns:repeat(3,1fr)}
+.conv-switch button{padding:6px 4px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);
+  font:11.5px/1.3 var(--font-display);color:var(--muted);text-align:center;transition:.14s}
+.conv-switch button:hover{color:var(--fg);border-color:var(--faint)}
+.conv-switch button.on{color:var(--accent);border-color:oklch(0.805 0.148 188/.45);background:var(--accent-soft)}
+.psnav-list{flex:1;overflow:auto;min-height:0;padding:0 8px 8px}
+.psnav-foot{flex:0 0 auto;border-top:1px solid var(--hairline);padding:9px 10px;display:flex;gap:6px;flex-wrap:wrap}
+
+/* 5.2 session list */
+.slist{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border);background:var(--surface)}
+.slist-h{flex:0 0 auto;padding:10px;border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:8px}
+.slist-h .bar{display:flex;align-items:center;gap:6px}
+.slist-h .bar .acts{margin-left:auto;display:flex;align-items:center;gap:2px}
+.slist-body{flex:1;overflow:auto;min-height:0;padding:8px}
+.slist-group-t{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:8px 8px 5px;display:flex;align-items:center;gap:7px}
+.slist-group-t::after{content:'';flex:1;height:1px;background:var(--hairline)}
+.s-item{display:flex;align-items:flex-start;gap:8px;padding:8px 9px;border-radius:var(--radius);border:1px solid transparent;transition:.14s;cursor:pointer}
+.s-item:hover{background:var(--surface-2)}
+.s-item.on{background:var(--accent-soft);border-color:oklch(0.805 0.148 188/.3)}
+.s-item .t{font-size:12.5px;line-height:1.4}
+.s-item .m{font-size:11px;color:var(--faint);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.s-item.pin .t::before{content:'📌';font-size:9px;margin-right:4px}
+
+/* 5.3 chat main */
+.chat-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
+.chat-header{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);min-height:var(--top-h)}
+.chat-header .ttl{font:600 14px/1.3 var(--font-display)}
+.chat-header .right{margin-left:auto;display:flex;align-items:center;gap:6px}
+.chat-body{flex:1;overflow:auto;min-height:0;padding:18px 20px}
+.chat-body-inner{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
+.bubble-row{display:flex;gap:10px}
+.bubble-row.user{flex-direction:row-reverse}
+.bubble-av{width:26px;height:26px;border-radius:var(--radius);flex:0 0 auto;display:grid;place-items:center;
+  font:10px/1 var(--font-display);border:1px solid var(--border);background:var(--surface-2);color:var(--muted)}
+.bubble-row.user .bubble-av{border-color:oklch(0.805 0.148 188/.4);color:var(--accent);background:var(--accent-soft)}
+.bubble-row.assistant .bubble-av{border-color:oklch(0.760 0.140 165/.4);color:var(--ok);background:oklch(0.760 0.140 165/.1)}
+.bubble{max-width:min(78%,720px);padding:10px 13px;border-radius:var(--radius-lg);border:1px solid var(--border);
+  background:var(--surface);font-size:13.5px;line-height:1.68;white-space:pre-wrap;word-break:break-word}
+.bubble-row.user .bubble{background:var(--surface-2)}
+.bubble-row.tool .bubble,.bubble-row.command .bubble{font-family:var(--font-display);font-size:11.5px;color:var(--muted)}
+.bubble-row.system .bubble{border-style:dashed;color:var(--muted);font-size:12px}
+.bubble-row.system.err .bubble{border-color:oklch(0.665 0.185 22/.4);color:var(--err)}
+.bubble-row.moa .bubble{border-color:oklch(0.700 0.110 245/.4)}
+.bubble .meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:10.5px;color:var(--faint);font-family:var(--font-display)}
+.reasoning{margin-top:8px;border:1px dashed var(--border);border-radius:var(--radius);padding:8px 10px;
+  background:var(--input-bg);font:11.5px/1.6 var(--font-display);color:var(--faint)}
+.reasoning .rt{color:var(--muted);cursor:pointer;user-select:none}
+.tool-call{margin-top:8px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
+.tool-call .th{display:flex;align-items:center;gap:7px;padding:6px 9px;background:var(--surface-2);font:11px/1.4 var(--font-display)}
+.tool-call .th .rt{margin-left:auto;color:var(--faint)}
+.fork-divider{display:flex;align-items:center;gap:10px;color:var(--faint);font:11px/1 var(--font-display)}
+.fork-divider::before,.fork-divider::after{content:'';flex:1;height:1px;background:var(--hairline)}
+
+/* approval card */
+.appr{border:1px solid oklch(0.810 0.145 85/.4);background:oklch(0.810 0.145 85/.06);border-radius:var(--radius-lg);padding:12px 14px}
+.appr .q{font:600 13px/1.4 var(--font-display);color:var(--warn)}
+.appr .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
+
+/* chat input */
+.chat-input{flex:0 0 auto;border-top:1px solid var(--border);padding:10px 14px 12px;background:var(--surface)}
+.chat-input .box{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--input-bg);padding:8px 10px}
+.chat-input .box:focus-within{border-color:oklch(0.805 0.148 188/.5);box-shadow:0 0 0 3px oklch(0.805 0.148 188/.08)}
+.chat-input .ta{width:100%;background:none;border:none;resize:none;min-height:44px;font-size:13.5px;line-height:1.6;color:var(--fg)}
+.chat-input .ta:focus{outline:none}
+.chat-input .bar{display:flex;align-items:center;gap:6px;margin-top:6px}
+.chat-input .bar .rt{margin-left:auto;display:flex;align-items:center;gap:8px}
+.send-btn{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:13px}
+.send-btn:hover{background:var(--accent-hv)}
+.ctx-row{display:flex;align-items:center;gap:10px;padding:0 14px 8px;font:11px/1 var(--font-display);color:var(--faint)}
+.ctx-row .meter{flex:1;max-width:220px}
+
+/* outline panel */
+.outline{border-left:1px solid var(--border);background:var(--surface);overflow:auto;padding:12px}
+.outline .oi{padding:6px 8px;border-radius:4px;font-size:12px;color:var(--muted);cursor:pointer;border-left:2px solid transparent}
+.outline .oi:hover{background:var(--surface-2);color:var(--fg)}
+.outline .oi.on{color:var(--accent);border-left-color:var(--accent);background:var(--accent-soft)}
+
+/* chat tool panel (files / terminal) */
+.ctool{border-left:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;min-height:0}
+.ctool .ct-h{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--hairline);flex:0 0 auto}
+.ctool .ct-b{flex:1;overflow:auto;min-height:0;padding:10px 12px}
+
+/* right rail for chat pages (files+terminal) */
+.rail-r{flex:0 0 320px;display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--surface);min-height:0}
+@media (max-width:1280px){.rail-r{display:none}}
+
+/* ── 6. API CONTRACT PANEL ───────────────────────────────────────────────── */
+.api{margin-top:20px;border:1px solid oklch(0.805 0.148 188/.3);border-radius:var(--radius-lg);
+  background:oklch(0.130 0.012 250 / .7);overflow:hidden}
+.api>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 13px;
+  font:600 11px/1 var(--font-display);letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
+.api>summary::-webkit-details-marker{display:none}
+.api>summary::after{content:'▾';margin-left:auto;color:var(--faint);transition:.18s}
+.api[open]>summary::after{transform:rotate(180deg)}
+.api>summary:hover{background:var(--accent-soft)}
+.api-b{padding:0 13px 13px;display:flex;flex-direction:column;gap:10px}
+.ep{border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
+.ep-h{display:flex;align-items:center;gap:9px;padding:7px 10px;background:var(--surface-2);flex-wrap:wrap}
+.ep-h .verb{font:600 10px/1 var(--font-display);letter-spacing:.08em;padding:3px 6px;border-radius:3px}
+.verb.get{color:var(--ok);background:oklch(0.760 0.140 165/.12);border:1px solid oklch(0.760 0.140 165/.3)}
+.verb.post{color:var(--accent);background:var(--accent-soft);border:1px solid oklch(0.805 0.148 188/.3)}
+.verb.put{color:var(--info);background:oklch(0.700 0.110 245/.12);border:1px solid oklch(0.700 0.110 245/.3)}
+.verb.del{color:var(--err);background:oklch(0.665 0.185 22/.12);border:1px solid oklch(0.665 0.185 22/.3)}
+.verb.ws{color:var(--warn);background:oklch(0.810 0.145 85/.12);border:1px solid oklch(0.810 0.145 85/.3)}
+.ep-h .pth{font:11.5px/1.4 var(--font-display);color:var(--fg)}
+.ep-h .env{margin-left:auto;font:10px/1 var(--font-display);color:var(--faint)}
+.ep-b{padding:9px 10px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
+.fld{font:11px/1.55 var(--font-display)}
+.fld .fk{color:var(--faint)}
+.fld .fv{color:var(--accent)}
+.fld .ft{color:var(--muted)}
+.enum-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
+.api .note{margin-top:2px}
+
+/* ── 7. MISC COMPONENTS ──────────────────────────────────────────────────── */
+/* flush 路由（对话台类）：内容占满高度，契约面板作为底部可折叠抽屉 */
+.flush-wrap{display:flex;flex-direction:column;height:100%;min-height:0}
+.flush-wrap > .psl,.flush-wrap > .wf{flex:1;min-height:0}
+.flush-wrap > .api{margin:0;border-radius:0;border-left:none;border-right:none;border-bottom:none;flex:0 0 auto}
+.flush-wrap > .api:not([open]) > summary{border-top:1px solid var(--border)}
+
+.empty{display:grid;place-items:center;gap:10px;padding:48px 20px;color:var(--faint);text-align:center}
+.empty .big{font:600 14px/1.3 var(--font-display);color:var(--muted)}
+.mask-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
+.mask-bg::before{content:'';position:absolute;inset:-40%;
+  background:repeating-linear-gradient(0deg,oklch(0.805 0.148 188/.055) 0 1px,transparent 1px 32px),
+             repeating-linear-gradient(90deg,oklch(0.805 0.148 188/.055) 0 1px,transparent 1px 32px);
+  mask-image:radial-gradient(60% 50% at 50% 30%,#000,transparent 78%)}
+.dot-grid{background-image:radial-gradient(oklch(0.805 0.148 188/.14) 1px,transparent 1px);background-size:22px 22px}
+.tree{font:12px/1.8 var(--font-display)}
+.tree .tn{display:flex;align-items:center;gap:6px;padding:2px 6px;border-radius:4px;cursor:pointer}
+.tree .tn:hover{background:var(--surface-2)}
+.tree .tn.on{background:var(--accent-soft);color:var(--accent)}
+.tree .tn .tw{width:12px;flex:0 0 auto;color:var(--faint)}
+.tree .l1{padding-left:16px}.tree .l2{padding-left:30px}.tree .l3{padding-left:44px}
+.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:10px/1 var(--font-display);
+  border:1px solid var(--border);background:var(--surface-2);color:var(--muted);flex:0 0 auto}
+.avatar-stack{display:flex}
+.avatar-stack .avatar{margin-left:-7px;border-color:var(--surface)}
+.avatar-stack .avatar:first-child{margin-left:0}
+.progress-line{display:flex;align-items:center;gap:8px;font:11px/1 var(--font-display);color:var(--muted)}
+.progress-line .meter{flex:1}
+.progress-line .pv{width:52px;text-align:right;color:var(--fg)}
+.collapse-h{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--surface-2);cursor:pointer;
+  border:1px solid var(--border);border-radius:var(--radius);font-size:12.5px}
+.collapse-h .tw{color:var(--faint);font-family:var(--font-display);font-size:10px}
+.collapse-h .rt{margin-left:auto;display:flex;align-items:center;gap:8px}
+.collapse-b{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);
+  padding:12px;background:var(--surface)}
+.collapse-b.tight{padding:0}
+.kanban-scroll{overflow-x:auto;padding-bottom:8px}
+.kanban-grid{display:grid;gap:10px;grid-auto-flow:column;grid-auto-columns:264px;min-width:max-content}
+.kcol{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;min-height:220px}
+.kcol-h{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--hairline);font:600 11.5px/1 var(--font-display)}
+.kcol-h .cnt{margin-left:auto;color:var(--faint)}
+.kcol-b{padding:8px;display:flex;flex-direction:column;gap:7px;flex:1}
+.kcard{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:9px 10px;display:flex;flex-direction:column;gap:6px}
+.kcard:hover{border-color:oklch(0.805 0.148 188/.35)}
+.kcard .kt{font-size:12.5px;line-height:1.4}
+.kcard .km{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10.5px;color:var(--faint)}
+
+/* workflow canvas */
+.wf{display:grid;grid-template-columns:560px 1fr 280px;min-height:0;height:100%}
+@media (max-width:1240px){.wf{grid-template-columns:1fr}}
+.wf-chat{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;background:var(--surface)}
+.wf-canvas{position:relative;min-height:0;overflow:auto;background:
+  radial-gradient(circle at 1px 1px,oklch(0.805 0.148 188/.10) 1px,transparent 0) 0 0/22px 22px,var(--bg)}
+.wf-runs{border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0;background:var(--surface)}
+.wf-node{position:absolute;width:280px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
+  box-shadow:var(--shadow);overflow:hidden}
+.wf-node .nh{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--hairline);cursor:grab}
+.wf-node .nb{padding:10px;display:flex;flex-direction:column;gap:9px}
+.wf-node .port{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
+.wf-node .port.out{right:-5px;top:50%}
+.wf-node .port.in{left:-5px;top:50%;background:var(--faint);box-shadow:none}
+.wf-svg{position:absolute;inset:0;pointer-events:none}
+
+/* terminal */
+.term-wrap{display:flex;flex-direction:column;min-height:0;height:100%;background:var(--code-bg)}
+.term-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--hairline)}
+.term-body{flex:1;overflow:auto;padding:12px 14px;font:12.5px/1.7 var(--font-display);white-space:pre-wrap;word-break:break-all}
+.cursor{display:inline-block;width:7px;height:14px;background:var(--accent);vertical-align:-2px;animation:blink 1.1s step-end infinite}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
+
+/* login */
+.auth{min-height:100vh;display:grid;place-items:center;padding:28px;position:relative;overflow:auto}
+.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
+  box-shadow:var(--shadow);position:relative;z-index:2}
+.auth-card .hd{padding:20px 22px 0;text-align:center}
+.auth-mark{width:52px;height:52px;margin:0 auto 12px;border:1px solid var(--accent);border-radius:var(--radius-lg);
+  display:grid;place-items:center;color:var(--accent);font:700 19px/1 var(--font-display);
+  box-shadow:0 0 0 1px oklch(0.805 0.148 188/.2),0 0 26px oklch(0.805 0.148 188/.2) inset}
+.auth-bd{padding:16px 22px 20px}
+
+/* ── 记忆页：三张卡片 + 修改弹窗 ── */
+.memcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:4px}
+.memcard{display:flex;flex-direction:column;border:1px solid var(--border);
+  border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;
+  transition:border-color .15s ease,transform .15s ease}
+.memcard:hover{border-color:oklch(0.805 0.148 188/.38);transform:translateY(-1px)}
+.memcard-h{display:flex;align-items:center;gap:10px;padding:12px 14px;
+  border-bottom:1px solid var(--hairline);background:var(--surface-2)}
+.memcard-t{display:flex;align-items:center;gap:8px;font:600 13.5px/1.3 var(--font-display);color:var(--fg)}
+.memcard-t .mi{color:var(--accent);font-size:14px}
+.memcard-edit{margin-left:auto;flex:0 0 auto}
+.memcard-b{flex:1;padding:13px 14px;display:flex;flex-direction:column;gap:11px}
+.memcard-sum{margin:0;font-size:12.5px;line-height:1.72;color:var(--fg-soft);
+  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
+.memcard-meta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;
+  border-top:1px dashed var(--hairline)}
+.memcard-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:9px 14px;
+  border-top:1px solid var(--hairline);background:var(--surface-2)}
+.memcard-bar .meter{flex:1}
+
+/* 通用弹窗 */
+.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px}
+.modal[hidden]{display:none}
+.modal-mask{position:absolute;inset:0;background:oklch(0 0 0 / .62);backdrop-filter:blur(2px)}
+.modal-box{position:relative;width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column;
+  border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2);
+  box-shadow:0 24px 64px oklch(0 0 0 / .55),0 0 0 1px oklch(0.805 0.148 188 / .12)}
+.modal-h{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:13px 16px;
+  border-bottom:1px solid var(--border);font-size:13.5px}
+.modal-b{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 16px;overflow-y:auto}
+.modal-f{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;
+  padding:12px 16px;border-top:1px solid var(--border)}
+.mem-ta{width:100%;min-height:min(52vh,420px);resize:vertical;outline:none;
+  padding:12px 13px;border:1px solid var(--border);border-radius:var(--radius);
+  background:var(--input-bg);color:var(--fg);font:12.5px/1.72 var(--font-display)}
+.mem-ta:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
+.mb8{margin-bottom:8px}
+
+/* Markdown 排版 */
+.md-h1,.md-h2,.md-h3,.md-h4{margin:0 0 8px;font-family:var(--font-display);color:var(--fg);line-height:1.35}
+.md-h1{font-size:15px;font-weight:700}
+.md-h2{font-size:13.5px;font-weight:600;color:var(--accent)}
+.md-h3{font-size:12.5px;font-weight:600;color:var(--fg-soft);margin-top:14px}
+.md-h4{font-size:12px;font-weight:600;color:var(--muted)}
+.md-p{margin:0 0 9px;font-size:12.5px;line-height:1.7;color:var(--fg-soft);overflow-wrap:anywhere}
+.md-ul{margin:0 0 10px;padding-left:17px;display:flex;flex-direction:column;gap:5px}
+.md-ul li{font-size:12.5px;line-height:1.65;color:var(--fg-soft);overflow-wrap:anywhere}
+.md-ul li::marker{color:var(--accent)}
+.mdc{font:11.5px/1.5 var(--font-display);background:var(--code-bg);border:1px solid var(--hairline);
+  border-radius:3px;padding:1px 4px;color:var(--accent);overflow-wrap:anywhere}
+.md-p strong,.md-ul li strong{color:var(--fg);font-weight:600}
+@media (max-width:760px){.memcards{grid-template-columns:1fr}}
+
+/* responsive */
+@media (max-width:900px){
+  .shell{grid-template-columns:1fr}
+  .rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:60;transform:translateX(-100%);transition:transform .2s}
+  .shell.drawer .rail{transform:none;box-shadow:var(--shadow)}
+  .shell.mini .rail{transform:translateX(-100%)}
+  .view-pad{padding:14px 14px 32px}
+  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
+}
+.only-narrow{display:none}
+@media (max-width:900px){.only-narrow{display:inline-flex}}
+.only-wide{display:inline-flex}
+@media (max-width:900px){.only-wide{display:none}}
+</style>
+</head>
+<body>
+<div id="app"></div>
+<script>
+'use strict';
+/* ════════════════════════════════════════════════════════════════════════════
+   0. 工具
+   ════════════════════════════════════════════════════════════════════════════ */
+const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+const clamp = (n,a,b)=>Math.max(a,Math.min(b,n));
+const fx = (v,d=2)=> (typeof v==='number' ? (Math.round(v*10**d)/10**d).toString() : String(v??'—'));
+// 三种时间戳形态都要能格式化：epoch 秒 / epoch 毫秒 / ISO 字符串
+const toDate = v => typeof v === 'number' ? new Date(v < 1e11 ? v*1000 : v) : new Date(v);
+const tsSec = v => toDate(v).toLocaleString('zh-CN',{hour12:false});
+const tsMs  = v => toDate(v).toLocaleString('zh-CN',{hour12:false});
+const dOnly = v => toDate(v).toLocaleDateString('zh-CN');
+
+/* 轻量 Markdown 渲染（原型用）：标题 / 列表 / 粗体 / 行内 code。
+   输入先按 § 还原成空行（对应 MemoryView.vue 的 replace(/§/g,'\n\n')），
+   再逐行处理；行内 HTML 标签先占位，渲染完还原，避免被 esc 吃掉。 */
+function mdRender(src){
+  const holes = [];
+  const stash = h => `\u0000${holes.push(h)-1}\u0000`;
+  let t = String(src ?? '').replace(/§/g, '\n\n').replace(/<\/?code>/g, (m)=>stash(`<code class="mdc">${m.includes('/')?'</code>':''}`));
+  t = esc(t);
+  // 行内元素（顺序敏感：code 要在 ** 之前处理，避免 ** 把 code 内容吃掉）
+  t = t.replace(/`([^`]+)`/g, (_,c)=>`<code class="mdc">${c}</code>`);
+  t = t.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+  const inline = s => s.replace(/\u0000(\d+)\u0000/g, (_,i)=>holes[+i]);
+  const out = [];
+  let list = null;
+  const closeList = () => { if(list){ out.push(`</${list}>`); list=null; } };
+  for (const raw of t.split('\n')) {
+    const line = raw.trim();
+    const h = line.match(/^(#{1,4})\s+(.*)$/);
+    const li = line.match(/^[-*]\s+(.*)$/);
+    if (h) { closeList(); const lv = Math.min(h[1].length,4);
+      out.push(`<h${lv} class="md-h${lv}">${inline(h[2])}</h${lv}>`); }
+    else if (li) {
+      if (list!=='ul'){ closeList(); out.push('<ul class="md-ul">'); list='ul'; }
+      out.push(`<li>${inline(li[1])}</li>`);
+    }
+    else if (!line) { closeList(); }
+    else { closeList(); out.push(`<p class="md-p">${inline(line)}</p>`); }
+  }
+  closeList();
+  return out.join('');
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   1. 状态 / 枚举映射（全部取自真实后端枚举）
+   ════════════════════════════════════════════════════════════════════════════ */
+const TAG_CLASS = {
+  // 运行 / 完成
+  running:'run', done:'ok', completed:'ok', success:'ok', active:'ok', enabled:'ok', connected:'ok',
+  confirmed:'ok', approved:'ok', resolved:'ok', healthy:'ok', ready:'run', adopted:'ok',
+  // 队列 / 进行中
+  queued:'info', pending:'warn', pending_approval:'warn', scheduled:'info', waiting:'info',
+  loading:'info', triage:'info', todo:'info', planning:'info', reviewing:'warn', review:'warn',
+  // 阻塞 / 警告
+  blocked:'warn', paused:'warn', warning:'warn', degraded:'warn', stale:'warn',
+  // 失败
+  failed:'err', error:'err', err:'err', rejected:'err', canceled:'err', cancelled:'err',
+  approval_rejected:'err', disconnected:'err', offline:'err', expired:'err', missing:'err', unknown:'err',
+  // 中性 / 关闭
+  idle:'info', disabled:'info', inactive:'info', stopped:'info', archived:'', draft:'', 'not-enabled':'info',
+  not_enabled:'info', auto:'info', 'auto-active':'info', 'provider-managed':'info', scaned:'ok',
+  builtin:'', custom:'', scheduled_run:'', once:'info', cron:'info', interval:'info',
+};
+const statusTag = (s, txt) => `<span class="tag ${TAG_CLASS[s] ?? 'info'}">${esc(txt ?? s ?? '—')}</span>`;
+const led = s => `<span class="led ${TAG_CLASS[s] ?? 'idle'}"></span>`;
+const tag = (c,t)=> `<span class="tag ${c}">${esc(t)}</span>`;
+const sw  = (on,sm='')=> `<span class="sw ${on?'on':''} ${sm}"></span>`;
+const meter = (pct,tone='')=> `<div class="meter ${tone}"><i style="width:${clamp(pct,0,100)}%"></i></div>`;
+const empty = (t,s='')=> `<div class="empty"><div class="big">${esc(t)}</div>${s?`<div class="sm">${s}</div>`:''}</div>`;
+
+/* ════════════════════════════════════════════════════════════════════════════
+   2. 渲染原语
+   ════════════════════════════════════════════════════════════════════════════ */
+const view  = (r, inner, cls='') => `<section class="view ${cls}">${inner}</section>`;
+const head  = (t,d,right='') =>
+  `<div class="view-head"><div class="grow"><h1>${esc(t)}</h1>${d?`<div class="sub">${d}</div>`:''}</div>
+   ${right?`<div class="actions">${right}</div>`:''}</div>`;
+const panel = (title, meta, body, right='') =>
+  `<div class="panel"><div class="panel-h"><h3>${esc(title)}</h3>${meta?`<span class="meta">${meta}</span>`:''}
+   ${right?`<span class="right">${right}</span>`:''}</div><div class="panel-b${body.startsWith('<div class="twrap')?' flush':''}">${body}</div></div>`;
+const table = (cols, rows) =>
+  `<div class="twrap"><table class="tb"><thead><tr>${cols.map(c=>`<th${c.n?' class="num"':''}>${esc(c.t)}</th>`).join('')}</tr></thead>
+   <tbody>${rows.map(r=>`<tr>${r.map((c,i)=>`<td class="${cols[i].n?'num':''}">${c}</td>`).join('')}</tr>`).join('')}</tbody></table></div>`;
+const kv = (rows) =>
+  `<div class="kv">${rows.map(([k,v])=>`<div class="kr"><div class="kk">${k}</div><div class="kv-v">${v}</div></div>`).join('')}</div>`;
+const kpis = items =>
+  `<div class="kpis">${items.map(i=>`<div class="kpi ${i.tone??''}"><div class="k">${esc(i.k)}</div>
+   <div class="v">${i.v}</div>${i.s?`<div class="s">${i.s}</div>`:''}</div>`).join('')}</div>`;
+const note = (html, tone='') => `<div class="note ${tone}">${html}</div>`;
+const btn  = (label, o={}) => `<button class="btn ${o.cls??''}"${o.dis?' disabled':''}${o.title?` title="${esc(o.title)}"`:''}${o.act?` data-act="${esc(o.act)}"`:''}${o.sec?` data-sec="${esc(o.sec)}"`:''}>${o.ic?`<span class="mono">${o.ic}</span>`:''}${label}</button>`;
+const chip = (label,on=false)=> `<span class="chip ${on?'on':''}">${label}</span>`;
+const sel  = (opts, cls='') => `<select class="sel ${cls}">${opts.map(([v,t])=>`<option>${esc(t)}</option>`).join('')}</select>`;
+const input= (ph, cls='') => `<input class="inp ${cls}" placeholder="${esc(ph)}" />`;
+const srch = (ph, cls='') => `<div class="search"><input class="inp ${cls}" placeholder="${esc(ph)}" /></div>`;
+const field= (label, ctrl, hint='') => `<div class="field"><label>${esc(label)}</label>${ctrl}${hint?`<div class="hint">${hint}</div>`:''}</div>`;
+const tabs = (items, on) => `<div class="tabs">${items.map(([k,t,dis])=>`<div class="tab ${k===on?'on':''} ${dis?'dis':''}">${esc(t)}${dis?' <span class="xs fnt">SA</span>':''}</div>`).join('')}</div>`;
+const secT = t => `<div class="sec-t">${esc(t)}</div>`;
+const progline = (label,pct,txt,tone='') =>
+  `<div class="progress-line"><span class="nowrap" style="min-width:130px">${label}</span>${meter(pct,tone)}<span class="pv">${txt}</span></div>`;
+function bars(data, o={}){
+  const max = Math.max(...data, 1);
+  return `<div class="bars">${data.map((v,i)=>`<i class="${o.hi&&o.hi.includes(i)?'hi':(v===0?'dim':'')}" style="height:${Math.max(2,v/max*100)}%" title="${v}"></i>`).join('')}</div>`;
+}
+function spark(data, o={}){
+  const w=100,h=o.h||26,max=Math.max(...data,1),min=Math.min(...data,0);
+  const pts=data.map((v,i)=>`${(i/(data.length-1||1))*w},${h-((v-min)/((max-min)||1))*(h-3)-1.5}`);
+  return `<svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" style="width:100%;height:${h}px;display:block">
+   <polyline points="0,${h} ${pts.join(' ')} ${w},${h}" fill="${o.fill??'oklch(0.805 0.148 188 / .16)'}"/>
+   <polyline points="${pts.join(' ')}" fill="none" stroke="${o.stroke??'var(--accent)'}" stroke-width="1.2"/></svg>`;
+}
+
+/* ── 2.1 API 契约面板 ──────────────────────────────────────────────────── */
+function fld(k,v,t=''){ return `<div class="fld"><span class="fk">${esc(k)}</span>: <span class="fv">${esc(v)}</span>${t?` <span class="ft">${t}</span>`:''}</div>`; }
+function fldEnum(k, vs, t=''){ return `<div class="fld"><span class="fk">${esc(k)}</span> <span class="ft">${t}</span>
+  <div class="enum-list">${vs.map(v=>`<span class="tag ${TAG_CLASS[v]??''}">${esc(v)}</span>`).join('')}</div></div>`; }
+function ep(verb, path, envelope, fields, enums, extra){
+  return `<div class="ep"><div class="ep-h"><span class="verb ${verb.toLowerCase()}">${verb.toUpperCase()}</span>
+   <span class="pth">${esc(path)}</span><span class="env">${esc(envelope)}</span></div>
+   <div class="ep-b">${(fields||[]).join('')}${(enums||[]).join('')}${extra||''}</div></div>`;
+}
+const apiPanel = (eps, notes='') =>
+  `<details class="api" open><summary>本页数据来源 · API 契约</summary><div class="api-b">
+   ${notes?note(notes):''}${eps.join('')}</div></details>`;
+
+/* ════════════════════════════════════════════════════════════════════════════
+   3. MOCK 数据（字段名 / 枚举 / 时间戳单位均对齐真实后端）
+   ════════════════════════════════════════════════════════════════════════════ */
+const NOW = 1759017600000;                 // 固定基准，避免每次刷新跳动
+const MIN = 60000, HOUR = 3600000, DAY = 86400000;
+
+const MODELS = {
+  defaultProvider:'anthropic', defaultModel:'claude-sonnet-4-5',
+  list:[
+    {provider:'anthropic', base_url:'https://api.anthropic.com', kind:'default',
+     models:['claude-opus-4-1','claude-sonnet-4-5','claude-haiku-4-5'], defaultModel:'claude-sonnet-4-5',
+     aliases:{sonnet:'claude-sonnet-4-5',opus:'claude-opus-4-1'}, visible:['claude-opus-4-1','claude-sonnet-4-5','claude-haiku-4-5']},
+    {provider:'openai', base_url:'https://api.openai.com/v1', kind:'custom',
+     models:['gpt-5.1','gpt-5.1-mini','o4-mini'], defaultModel:'gpt-5.1',
+     aliases:{fast:'gpt-5.1-mini'}, visible:['gpt-5.1','gpt-5.1-mini']},
+    {provider:'openrouter', base_url:'https://openrouter.ai/api/v1', kind:'custom',
+     models:['deepseek/deepseek-chat','qwen/qwen3-max','meta-llama/llama-4-maverick'], defaultModel:'deepseek/deepseek-chat',
+     aliases:{ds:'deepseek/deepseek-chat'}, visible:['deepseek/deepseek-chat','qwen/qwen3-max']},
+    {provider:'google', base_url:'https://generativelanguage.googleapis.com/v1beta', kind:'builtin',
+     models:['gemini-2.5-pro','gemini-2.5-flash'], defaultModel:'gemini-2.5-pro', aliases:{}, visible:['gemini-2.5-pro','gemini-2.5-flash']},
+  ],
+  auxiliary:[
+    {slot:'标题生成', provider:'openai', model:'gpt-5.1-mini', builtin:true},
+    {slot:'压缩摘要', provider:'anthropic', model:'claude-haiku-4-5', builtin:true},
+    {slot:'意图分类', provider:'openai', model:'gpt-5.1-mini', builtin:true},
+    {slot:'视觉理解',  provider:'google', model:'gemini-2.5-flash', builtin:false},
+  ],
+  combination:[
+    {name:'长文精读', steps:[{role:'router',model:'gpt-5.1-mini'},{role:'writer',model:'claude-sonnet-4-5'},{role:'critic',model:'claude-opus-4-1'}], enabled:true},
+    {name:'快速问答', steps:[{role:'direct',model:'claude-haiku-4-5'}], enabled:true},
+    {name:'代码审查', steps:[{role:'primary',model:'claude-sonnet-4-5'},{role:'verify',model:'gpt-5.1'}], enabled:false},
+  ],
+};
+
+const SOURCES = ['api_server','cron','channel','group_chat','global_agent','workflow','kanban','terminal','file'];
+
+const SESSIONS = [
+  {sessionId:'7f3a91c2e04b', title:'重构 Kanban 拖拽排序', source:'api_server', profile:'default',
+   created_at:1758931200, updatedAt:1758998400, message_count:64, totalTokens:184320, workspace:'~/work/hermes-ui', pinned:true},
+  {sessionId:'2b8e44f7a1c9', title:'排查 Socket.IO 断连', source:'api_server', profile:'default',
+   created_at:1758910800, updatedAt:1758994800, message_count:28, totalTokens:71240, workspace:'~/work/hermes-ui', pinned:true},
+  {sessionId:'c40d17ae9b32', title:'写一个 tRPC 迁移方案', source:'cron', profile:'research',
+   created_at:1758849600, updatedAt:1758960000, message_count:112, totalTokens:402880, workspace:'~/work/notes'},
+  {sessionId:'9e05b3d8cc71', title:'ESP32 传感器数据清洗', source:'cron', profile:'research',
+   created_at:1758792000, updatedAt:1758878400, message_count:41, totalTokens:96500, workspace:'~/work/data'},
+  {sessionId:'5a71fc0b93d6', title:'需求评审纪要整理', source:'channel', profile:'ops',
+   created_at:1758934800, updatedAt:1758991200, message_count:19, totalTokens:44100, workspace:'~/work/notes', pinned:true},
+  {sessionId:'1d93ba6e77f2', title:'部署脚本重构', source:'workflow', profile:'default',
+   created_at:1758870000, updatedAt:1758902400, message_count:87, totalTokens:251900, workspace:'~/work/hermes-ui'},
+  {sessionId:'77c2e40b18a5', title:'客服话术优化', source:'channel', profile:'ops',
+   created_at:1758768000, updatedAt:1758854400, message_count:33, totalTokens:58700, workspace:'~/work/ops'},
+  {sessionId:'30be7d915a2c', title:'知识库召回评测', source:'kanban', profile:'research',
+   created_at:1758681600, updatedAt:1758768000, message_count:156, totalTokens:612300, workspace:'~/work/eval'},
+  {sessionId:'a4c6118f3d7b', title:'周报自动生成', source:'cron', profile:'ops',
+   created_at:1758604800, updatedAt:1758691200, message_count:22, totalTokens:39800, workspace:'~/work/ops'},
+];
+
+const MESSAGES = [
+  {role:'user', content:'帮我看下 Kanban 卡片拖拽在窄屏下错位的问题，先定位再修。', ts:1758990000},
+  {role:'assistant', content:'我读了一遍 `KanbanView.vue` 和 `KanbanColumn.vue`。\n\n错位来自两点：\n\n1. 列容器用的是 `grid-auto-columns: 264px` 固定宽，但列头 `.kcol-h` 用了 `justify-content: space-between`，在 < 240px 时统计 chip 会被挤出。\n2. 卡片 `.kcard` 的 `min-height` 由内容决定，跨列拖拽后 placeholder 高度不同导致 reflow。',
+   reasoning:'用户要"先定位再修"，所以第一步只做只读分析。已确认不需要写操作，可以直接读文件。', ts:1758990180},
+  {role:'tool', toolName:'read_file', content:'packages/client/src/components/kanban/KanbanColumn.vue  (128 lines)',
+   result:'ok — 4 columns, grid-auto-columns:264px, overflow-x:auto', ts:1758990240},
+  {role:'assistant', content:'确认了，第 1 点就是主因。建议把列宽改成 `minmax(248px, 1fr)` 并给 `.kcol-h` 加 `min-width:0`。要我改吗？', ts:1758990320},
+  {role:'user', content:'改吧，顺便把长标题截断加上。', ts:1758990900},
+  {role:'assistant', content:'已改完：\n\n- `.kanban-grid` → `grid-template-columns: repeat(var(--cols), minmax(248px, 1fr))`\n- `.kcol-h` 增加 `min-width:0`，统计 chip 加 `flex:0 0 auto`\n- `.kcard .kt` 加 `-webkit-line-clamp:2`',
+   ts:1758991400},
+  {role:'system', systemType:'command', content:'$ /compact', ts:1758992000},
+  {role:'assistant', content:'上下文已压缩：保留 4 条关键消息，摘要 812 tokens。', ts:1758992060},
+];
+
+const WORKFLOW_NODES = [
+  {id:'n1', type:'trigger', title:'触发：定时 / 手动', status:'completed', x:40,  y:60},
+  {id:'n2', type:'agent',   title:'检索项目文档', status:'running', x:40, y:200,
+   cfg:{title:'检索项目文档', agent:'researcher', provider:'anthropic', model:'claude-sonnet-4-5',
+        approvalRequired:false, skills:['web-search','read-file'],
+        prompt:'在 ~/work/hermes-ui 中检索与 Kanban 拖拽相关的实现与历史决策，输出 5 条要点。',
+        images:['/tmp/sketch-01.png']}},
+  {id:'n3', type:'agent',   title:'生成改动方案', status:'queued', x:40, y:340,
+   cfg:{title:'生成改动方案', agent:'planner', provider:'anthropic', model:'claude-opus-4-1',
+        approvalRequired:true, skills:[], prompt:'基于检索结果产出分步改动方案，每步标注风险。', images:[]}},
+  {id:'n4', type:'condition',title:'方案是否通过评审', status:'idle', x:40, y:480},
+  {id:'n5', type:'agent',   title:'提交并回报', status:'idle', x:40, y:600,
+   cfg:{title:'提交并回报', agent:'reporter', provider:'openai', model:'gpt-5.1',
+        approvalRequired:true, skills:['git-commit'], prompt:'创建提交并把 diff 摘要回报到频道。', images:[]}},
+];
+const WORKFLOW_RUNS = [
+  {id:'run_9f21', workflowId:'wf_release', status:'running', startedAt:'2026-10-19T08:00:00.000Z', endedAt:null,
+   nodeStates:{n1:'completed',n2:'running',n3:'queued',n4:'queued',n5:'queued'}, triggeredBy:'cron'},
+  {id:'run_9f18', workflowId:'wf_release', status:'failed', startedAt:'2026-10-19T07:00:00.000Z', endedAt:'2026-10-19T07:06:00.000Z',
+   nodeStates:{n1:'completed',n2:'failed',n3:'canceled',n4:'canceled',n5:'canceled'}, triggeredBy:'manual', error:'node n2 tool timeout after 300s'},
+  {id:'run_9f02', workflowId:'wf_release', status:'completed', startedAt:'2026-10-19T05:00:00.000Z', endedAt:'2026-10-19T05:17:00.000Z',
+   nodeStates:{n1:'completed',n2:'completed',n3:'completed',n4:'completed',n5:'completed'}, triggeredBy:'schedule'},
+];
+
+const JOBS = [
+  {id:'job_7c21', name:'每日摘要', state:'running', schedule:{kind:'cron', expr:'0 9 * * *'},
+   provider:'anthropic', model:'claude-haiku-4-5',
+   lastRun:'2026-10-19T09:00:00.000Z', nextRun:'2026-10-20T09:00:00.000Z',
+   deliver:{kind:'channel', target:'#ops-daily'}, repeat:'daily'},
+  {id:'job_5b09', name:'依赖更新巡检', state:'idle', schedule:{kind:'interval', expr:'every 6h'},
+   provider:'openai', model:'gpt-5.1-mini',
+   lastRun:'2026-10-19T02:00:00.000Z', nextRun:'2026-10-19T08:00:00.000Z',
+   deliver:{kind:'session', target:'ops'}, repeat:'—'},
+  {id:'job_91af', name:'召回评测跑批', state:'paused', schedule:{kind:'cron', expr:'30 3 * * 1'},
+   provider:'openrouter', model:'deepseek/deepseek-chat',
+   lastRun:'2026-10-13T03:30:00.000Z', nextRun:null,
+   deliver:{kind:'file', target:'~/work/eval/report.md'}, repeat:'weekly'},
+  {id:'job_2d44', name:'一次性索引重建', state:'idle', schedule:{kind:'once', expr:'2026-10-18 22:00'},
+   provider:'google', model:'gemini-2.5-pro',
+   lastRun:null, nextRun:'2026-10-18T22:00:00.000Z',
+   deliver:{kind:'channel', target:'#eng'}, repeat:'once'},
+];
+const JOB_RUNS = [
+  {id:'jr_01', jobId:'job_7c21', startedAt:'2026-10-19T09:00:00.000Z', finishedAt:null, status:'running', durationMs:420000, tokens:18400, costUsd:0.061, error:null},
+  {id:'jr_02', jobId:'job_7c21', startedAt:'2026-10-18T09:00:00.000Z', finishedAt:'2026-10-18T09:07:00.000Z', status:'completed', durationMs:420000, tokens:17980, costUsd:0.059, error:null},
+  {id:'jr_03', jobId:'job_7c21', startedAt:'2026-10-17T09:00:00.000Z', finishedAt:'2026-10-17T09:06:30.000Z', status:'failed', durationMs:390000, tokens:4120, costUsd:0.014, error:'429 rate_limit_exceeded (anthropic)'},
+];
+
+const KANBANS = [
+  {id:'kb_main', name:'Hermes UI 主线', description:'产品迭代主线看板', created_at:1758220800, updated_at:1759017600, taskCount:37},
+  {id:'kb_ops',  name:'运维事项',       description:'线上问题与巡检',       created_at:1758499200, updated_at:1758931200, taskCount:12},
+];
+const KANBAN_TASKS = [
+  {id:'T-142', kanbanId:'kb_main', title:'看板列宽在窄屏错位', status:'running', priority:'high',
+   assignee:'jack', labels:['bug','ui'], created_at:1758931200, updated_at:1758996000,
+   message_count:24, estimated_cost_usd:0.182, body:'窄屏（<1280px）下看板列固定 264px，列头统计 chip 被挤出容器。',
+   result:'已提交修复：grid-template-columns 改为 minmax(248px,1fr)。', sessionIds:['7f3a91c2e04b']},
+  {id:'T-139', kanbanId:'kb_main', title:'会话列表虚拟滚动', status:'review', priority:'medium',
+   assignee:'jack', labels:['perf'], created_at:1758909600, updated_at:1758988800,
+   message_count:41, estimated_cost_usd:0.331, body:'会话超过 500 条时首屏卡顿。', result:'待评审。', sessionIds:['2b8e44f7a1c9']},
+  {id:'T-131', kanbanId:'kb_main', title:'MCP 服务器批量重载', status:'blocked', priority:'high',
+   assignee:'dana', labels:['mcp'], created_at:1758844800, updated_at:1758936000,
+   message_count:17, estimated_cost_usd:0.094, body:'重载后连接状态不刷新。',
+   result:'等待上游 server 修复 healthz。', sessionIds:[]},
+  {id:'T-128', kanbanId:'kb_main', title:'用量页新增 provider 维度', status:'done', priority:'low',
+   assignee:'jack', labels:['usage'], created_at:1758792000, updated_at:1758878400,
+   message_count:9, estimated_cost_usd:0.041, body:'', result:'已上线 v0.9.4。', sessionIds:[]},
+  {id:'T-126', kanbanId:'kb_main', title:'插件配置面板信息层级', status:'scheduled', priority:'medium',
+   assignee:'dana', labels:['ui'], created_at:1758768000, updated_at:1758844800,
+   message_count:6, estimated_cost_usd:0.022, body:'三个徽标并列看不出主次。', result:'', sessionIds:[]},
+  {id:'T-121', kanbanId:'kb_ops', title:'生产环境 Socket.IO 抖动', status:'triage', priority:'high',
+   assignee:'jack', labels:['incident'], created_at:1758993600, updated_at:1758993600,
+   message_count:3, estimated_cost_usd:0.012, body:'昨晚 02:10-02:40 反复断连。', result:'', sessionIds:[]},
+  {id:'T-119', kanbanId:'kb_ops', title:'证书 30 天内到期', status:'todo', priority:'medium',
+   assignee:null, labels:['ops'], created_at:1758979200, updated_at:1758979200,
+   message_count:1, estimated_cost_usd:0.004, body:'edge 证书 11-08 到期。', result:'', sessionIds:[]},
+  {id:'T-117', kanbanId:'kb_ops', title:'磁盘用量 82%', status:'ready', priority:'low',
+   assignee:'dana', labels:['ops'], created_at:1758936000, updated_at:1758972000,
+   message_count:8, estimated_cost_usd:0.052, body:'日志目录未轮转。', result:'已配置 logrotate。', sessionIds:[]},
+  {id:'T-110', kanbanId:'kb_main', title:'旧版侧栏折叠动效', status:'archived', priority:'low',
+   assignee:'jack', labels:[], created_at:1758403200, updated_at:1758662400,
+   message_count:2, estimated_cost_usd:0.006, body:'', result:'已归档。', sessionIds:[]},
+];
+
+const SKILLS = [
+  {name:'web-search', source:'builtin', target:'hermes', category:'研究', enabled:true, description:'联网检索并返回带引用的结果',
+   viewCount:1842, useCount:613, patchCount:2, mtime:1758403200000, files:['SKILL.md','references/sources.md']},
+  {name:'read-file', source:'builtin', target:'claude', category:'工具', enabled:true, description:'读取工作区文件并做结构化摘要',
+   viewCount:9120, useCount:2874, patchCount:0, mtime:1758499200000, files:['SKILL.md']},
+  {name:'git-commit', source:'hub', target:'codex', category:'工程', enabled:true, description:'生成符合规范的提交信息并执行提交',
+   viewCount:2210, useCount:890, patchCount:7, mtime:1758931200000, files:['SKILL.md','templates/commit.md']},
+  {name:'summarize-long', source:'hub', target:'hermes', category:'写作', enabled:true, description:'长文分层摘要，保留引用锚点',
+   viewCount:1533, useCount:477, patchCount:1, mtime:1758844800000, files:['SKILL.md']},
+  {name:'release-checklist', source:'local', target:'hermes', category:'工程', enabled:false, description:'发版前逐项核对清单',
+   viewCount:210, useCount:64, patchCount:11, mtime:1759017600000, files:['SKILL.md','checklist.csv']},
+  {name:'deploy-edge', source:'external', target:'codex', category:'运维', enabled:true, description:'调用部署脚本并回报结果',
+   viewCount:388, useCount:201, patchCount:3, mtime:1758758400000, files:['SKILL.md','deploy.sh']},
+  {name:'sql-audit', source:'hub', target:'claude', category:'数据', enabled:true, description:'静态审计 SQL 写法与索引使用',
+   viewCount:640, useCount:288, patchCount:0, mtime:1758681600000, files:['SKILL.md']},
+  {name:'incident-postmortem', source:'builtin', target:'hermes', category:'运维', enabled:true, description:'按时间线生成无责复盘',
+   viewCount:126, useCount:52, patchCount:0, mtime:1758316800000, files:['SKILL.md','template.md']},
+];
+
+const PLUGINS = [
+  {id:'plg_kanban', name:'kanban', configStatus:'enabled', effectiveStatus:'enabled', version:'1.4.0',
+   description:'任务看板与 Dispatch 调度', tool_names_registered:['kanban.create','kanban.move','kanban.dispatch'], needsWriteApproval:false},
+  {id:'plg_memory', name:'memory', configStatus:'enabled', effectiveStatus:'auto-active', version:'2.0.1',
+   description:'长期记忆读写与召回', tool_names_registered:['memory.write','memory.search','memory.forget'], needsWriteApproval:true},
+  {id:'plg_workflow', name:'workflow', configStatus:'enabled', effectiveStatus:'enabled', version:'0.9.3',
+   description:'节点式工作流编排与审批', tool_names_registered:['workflow.run','workflow.status'], needsWriteApproval:false},
+  {id:'plg_browser', name:'browser-use', configStatus:'disabled', effectiveStatus:'inactive', version:'0.4.0',
+   description:'无头浏览器自动化', tool_names_registered:[], needsWriteApproval:true},
+  {id:'plg_vectorstore', name:'vectorstore', configStatus:'not-enabled', effectiveStatus:'inactive', version:'—',
+   description:'外部向量库后端', tool_names_registered:[], needsWriteApproval:false},
+  {id:'plg_search', name:'web-search-provider', configStatus:'provider-managed', effectiveStatus:'provider-managed', version:'1.1.0',
+   description:'搜索供应商托管配置', tool_names_registered:['search.web'], needsWriteApproval:false},
+  {id:'plg_voice', name:'voice', configStatus:'auto', effectiveStatus:'auto-active', version:'0.7.2',
+   description:'TTS / STT 语音能力', tool_names_registered:['voice.tts','voice.stt'], needsWriteApproval:false},
+];
+
+const MCP_SERVERS = [
+  {id:'mcp_fs', name:'filesystem', transport:'stdio', connected:true, tools_registered:6,
+   command:'npx -y @modelcontextprotocol/server-filesystem ~/work',
+   error:null, enabled:true, tools:['read_file','write_file','list_directory','move_file','search_files','get_info']},
+  {id:'mcp_git', name:'git', transport:'stdio', connected:true, tools_registered:9,
+   command:'uvx mcp-server-git --repository ~/work/hermes-ui',
+   error:null, enabled:true, tools:['git_status','git_diff','git_log','git_show','git_commit','git_branch','git_checkout','git_stash','git_blame']},
+  {id:'mcp_pg', name:'postgres', transport:'http', connected:false, tools_registered:0,
+   command:'https://mcp.internal.example.com/postgres', error:'connect ECONNREFUSED 10.0.3.14:5432',
+   enabled:true, tools:[]},
+  {id:'mcp_web', name:'web-bridge', transport:'sse', connected:true, tools_registered:3,
+   command:'https://sse.internal.example.com/bridge', error:null, enabled:true, tools:['fetch_url','render_page','extract']},
+  {id:'mcp_legacy', name:'legacy-notes', transport:'stdio', connected:false, tools_registered:0,
+   command:'node ./scripts/legacy-notes.js', error:'spawn ENOENT node', enabled:false, tools:[]},
+];
+
+const CHANNELS = [
+  {id:'ch_ops', name:'ops-daily', kind:'slack', connected:true, members:5, lastMessageAt:1759014000000, unread:2},
+  {id:'ch_eng', name:'eng-alerts', kind:'discord', connected:true, members:11, lastMessageAt:1759012200000, unread:0},
+  {id:'ch_wechat', name:'服务通知', kind:'wechat', connected:true, members:1, lastMessageAt:1758936000000, unread:0},
+  {id:'ch_local', name:'local-echo', kind:'webhook', connected:false, members:0, lastMessageAt:null, unread:0},
+];
+
+const PETDEX = {
+  manifest:{version:'2.2.0', active:'aurelia', species:[
+    {id:'aurelia', name:'琉璃', rarity:'rare', element:'water', level:12, exp:7420, expNext:10000,
+     stats:{hp:82,atk:41,def:57,spd:64}, skills:['aqua-pulse','mist-veil'], owner:'jack'},
+    {id:'ember', name:'烬', rarity:'common', element:'fire', level:4, exp:610, expNext:1200,
+     stats:{hp:45,atk:38,def:29,spd:71}, skills:['spark'], owner:null},
+    {id:'verdant', name:'苔', rarity:'epic', element:'grass', level:27, exp:26100, expNext:30000,
+     stats:{hp:96,atk:52,def:71,spd:49}, skills:['root-bind','spore-cloud','photosynthesis'], owner:'dana'},
+  ]},
+};
+
+/* 记忆：真实契约是固定三段大文本，没有「条目 / id / kind / scope / tags / pinned」。
+   后端直接读写 profile 目录下的三个 Markdown 文件：
+     memory → memories/MEMORY.md   user → memories/USER.md   soul → SOUL.md
+   字段 § 在前端 replace 成 \n\n（MemoryView.vue:75-77）。 */
+const MEMORY_DOCS = {
+  memory: {title:'我的笔记', icon:'▤', file:'memories/MEMORY.md', mtime:1758931200000,
+    body:`## 环境备忘
+
+Jack 的 Windows 游戏机 192.168.31.6（64GB RAM，纯游戏），跑 agent + ComfyUI，外接硬盘 /Volumes/Untitled/。
+
+§§## 项目路径
+
+- <code>docker_apps/hermes</code> — <code>/Users/jack/docker_apps/hermes</code>
+- <code>docker-compose.yml</code> 里 hermes-agent + hermes-webui + hindsight（temporal semantic memory，端口 8888/9999）
+- LLM：MiniMax-M2.7-highspeed via api.minimax.io/v1，Jack 有美国服务器要全新部署…
+
+§§## 本机 LLM
+
+LangChain 学习项目 <code>/Users/jack/source/Demo/py/demo_lc</code>，Python 3.13 + uv，19 章 checklist。Git: <code>gitea.erp.hop/door/demo_lc.git</code>。
+
+§§## CC Switch
+
+本地 API 代理 <code>http://127.0.0.1:15721</code>，OpenAI 兼容，跨 MiniMax-M2.7-highspeed、demo_lc、GLM 配好。SQLite <code>~/.cc-switch/cc-switch.db</code> 表 <code>providers(...)</code>，每 provider 的 <code>meta.usage_script.code</code> 是 JS 脚本。
+
+<code>{{baseUrl}}</code> / <code>{{apiKey}}</code> 占位，字段如 <code>MoonShot</code> / <code>v1/users/me/balance</code> data.available_balance (CNY)。`},
+  user: {title:'用户画像', icon:'☺', file:'memories/USER.md', mtime:1758844800000,
+    body:`## 技术栈
+
+知道访问词网站失败，可尝试使用本机代理 127.0.0.1:7890 走 L1/L2/L3 模式（2026-09-23）。默认 L1，说「L2」「L3」才按级半自动切换。
+
+§§## L2 / L3 分工
+
+- **L2 核心自主**：只做「微 X 改 X 按钮」这类小改动
+- **L3 模式**：单次回复包含 L1 + 3 步计划，说「换到 L3」才真正切
+
+§§## L3 回复范式
+
+前一步 → 讲当前一步 → 我要输入 B'4' 恢复报告 → 分叉给选项节点 A；L3 一口气干完 + 末尾一次性汇报。L3 回答：Jack 说 "ok 已经好了/搞定行/没事了" → 自动回 L1；"换一下/再来/为什么在 L3"。
+
+§§## 工具链偏好
+
+- CLI（uv/git/docker/npm/agent CLI）接受 terminal，user-facing 工具（agent terminal UI、聊天 app 期望 .app 双击启动，拒绝每次额窗口）
+- Hermes 常驻目录：不在记忆每次都写；不缓存 session 记忆，不做 LaunchAgent 常驻化 —— Jack 不想"这东西设置成这样"
+- 启动参数/项目根 = <code>~/source/MyProject/go/{AnimalShelter/TodoNest/learn_go/ohential-go}</code>
+
+§§## Code Runner 经验（2026-09-14 实践）
+
+dev CLI(uv/git/docker/npm/agent CLI) 接受 terminal；user-facing 工具需要 .app 双击启动，拒绝每次终端窗口（很 "droidOS"）。启动参数/项目根 = /Users/jack/source/MyProject/go/…
+
+§§## 环境
+
+- MCP：通义千问（dashscope），Claude code 取默认搭配不动
+- 不做 LaunchAgent 常驻化`},
+  soul: {title:'灵魂', icon:'◍', file:'SOUL.md', mtime:1758672000000,
+    body:`## 电子员工 · 独立工作规则
+
+### 助手名称
+
+神奇海螺。
+
+### 角色定位
+
+电子员工，独立作业，负责代码编写与验证。
+
+§§## 核心原则
+
+- 客观理性、说实话
+- 收到问题先思考，不急于行动
+- 我要的是建议，不是附和 —— 不需要「你说得对」这类话
+- 回答要细致、有逻辑、可执行。如果我遗漏了什么，主动指出
+
+§§## 任务模式 L1/L2/L3（Jack 显式切换，覆盖上方"能直接做的就做"）
+
+每次回复开头在内心声明当前模式，不写在回复里。
+
+- **L1**：快速回答，不动文件
+- **L2**：小步执行，每步汇报
+- **L3**：先给计划，等我确认再动手
+
+§§## 边界
+
+- 不代替我按下 Enter
+- 不替我提交（commit / push / 发消息）除非我明确要求
+- 涉及不可逆操作（删除、部署、对外发送）必须先问`},
+};
+
+const LOGS = [
+  {ts:1759017540000, level:'INFO',  scope:'server', message:'Socket.IO namespace /chat-run ready', meta:{ns:'/chat-run',clients:3}},
+  {ts:1759017480000, level:'DEBUG', scope:'bridge', message:'getHistory page=1 limit=30', meta:{sessionId:'7f3a91c2e04b',rows:30}},
+  {ts:1759017400000, level:'WARN',  scope:'mcp',   message:'server postgres reconnect scheduled', meta:{attempts:3,backoffMs:2000}},
+  {ts:1759017320000, level:'INFO',  scope:'jobs',  message:'cron tick evaluated 4 schedules', meta:{matched:1}},
+  {ts:1759017260000, level:'ERROR', scope:'kanban',message:'dispatch failed: task T-131 is blocked', meta:{taskId:'T-131',code:'E_TASK_BLOCKED'}},
+  {ts:1759017100000, level:'INFO',  scope:'auth',  message:'superadmin session verified', meta:{user:'jack'}},
+  {ts:1759016980000, level:'DEBUG', scope:'usage', message:'usage rollup finished', meta:{sessions:9,rows:144}},
+  {ts:1759016800000, level:'TRACE', scope:'http',  message:'GET /api/hermes/kanban 200 14ms', meta:{status:200,ms:14}},
+  {ts:1759016700000, level:'ERROR', scope:'llm',   message:'anthropic 429 rate_limit_exceeded', meta:{model:'claude-haiku-4-5',retryInMs:4200}},
+  {ts:1759016620000, level:'INFO',  scope:'petdex',message:'asset manifest refreshed', meta:{version:'2.2.0',species:3}},
+];
+
+const DEVICES = [
+  {id:'dev_a4', name:'living-room-hub', kind:'lan-host', address:'192.168.1.24', port:8081, online:true,
+   lastSeenAt:1759017500000, services:['http','ssh'], fingerprint:'Linux 6.6.0 aarch64'},
+  {id:'dev_b1', name:'studio-nas', kind:'lan-host', address:'192.168.1.31', port:5000, online:true,
+   lastSeenAt:1759016000000, services:['http','smb'], fingerprint:'TrueNAS SCALE 24.04'},
+  {id:'dev_c7', name:'sensor-gateway', kind:'lan-host', address:'192.168.1.55', port:9000, online:false,
+   lastSeenAt:1758931200000, services:['mqtt'], fingerprint:'Debian 12 armv7'},
+];
+
+const VERSIONS = [
+  {channel:'stable', version:'0.9.6', releasedAt:1758240000000, size:'48.2 MB', notes:'修复看板列宽；新增 MCP 批量重载。', current:false},
+  {channel:'stable', version:'0.9.5', releasedAt:1757894400000, size:'47.9 MB', notes:'群聊压缩配置面板。', current:true},
+  {channel:'beta',   version:'0.10.0-beta.3', releasedAt:1759014400000, size:'51.0 MB', notes:'工作流节点支持并行分支；Petdex 图鉴。', current:false},
+  {channel:'nightly',version:'0.10.0-dev.1842', releasedAt:1759017000000, size:'52.3 MB', notes:'自动构建。', current:false},
+];
+
+const USAGE_SESSIONS = [
+  {sessionId:'7f3a91c2e04b', totalTokens:184320, estimated_cost_usd:0.612, message_count:64, source:'api_server', profile:'default', created_at:1758931200, updatedAt:1758998400},
+  {sessionId:'c40d17ae9b32', totalTokens:402880, estimated_cost_usd:1.284, message_count:112, source:'cron', profile:'research', created_at:1758849600, updatedAt:1758960000},
+  {sessionId:'30be7d915a2c', totalTokens:612300, estimated_cost_usd:2.041, message_count:156, source:'kanban', profile:'research', created_at:1758681600, updatedAt:1758768000},
+  {sessionId:'1d93ba6e77f2', totalTokens:251900, estimated_cost_usd:0.874, message_count:87, source:'workflow', profile:'default', created_at:1758870000, updatedAt:1758902400},
+  {sessionId:'5a71fc0b93d6', totalTokens:44100, estimated_cost_usd:0.151, message_count:19, source:'channel', profile:'ops', created_at:1758934800, updatedAt:1758991200},
+];
+
+const TREND = Array.from({length:14},(_,i)=>({
+  date:new Date(NOW-(13-i)*DAY).toISOString().slice(0,10),
+  tokens:[182000,204000,176000,238000,262000,221000,248000,291000,265000,312000,298000,344000,327000,381000][i],
+  cost:[0.61,0.68,0.59,0.79,0.87,0.73,0.82,0.96,0.88,1.04,0.99,1.14,1.08,1.26][i],
+  sessions:[12,15,11,19,22,17,20,24,21,28,26,31,29,34][i],
+}));
+
+const PERF = {
+  runtime:{capturedAt:1759017600000, cpu:{usedPercent:34.2, cores:10, loadAvg:[1.82,1.64,1.51]},
+    memory:{totalMb:32768, usedMb:14208, freeMb:10421},
+    activeSessions:3, workers:[
+      {profile:'default', pid:48213, cpuPercent:18.4, memoryMb:1842, running:2, sessionsToday:34, lastUsedAt:1759017540000, status:'running'},
+      {profile:'research',pid:48217, cpuPercent:41.7, memoryMb:2610, running:1, sessionsToday:12, lastUsedAt:1759015200000, status:'running'},
+      {profile:'ops',     pid:48221, cpuPercent:0.4,  memoryMb:612,  running:0, sessionsToday:7,  lastUsedAt:1758936000000, status:'idle'},
+      {profile:'sandbox', pid:48240, cpuPercent:2.1,  memoryMb:940,  running:0, sessionsToday:0,  lastUsedAt:null,          status:'stopped'},
+    ]},
+  processes:[
+    {name:'Web UI (node)', pid:47120, cpuPercent:2.1, memoryMb:412, uptimeSec:1872340},
+    {name:'Bridge Broker',  pid:47188, cpuPercent:0.6, memoryMb:288, uptimeSec:1872280},
+  ],
+};
+
+const JOURNEY = {
+  nodes:[{id:'j_sk_01', kind:'skill', label:'web-search', weight:0.32}, {id:'j_sk_02', kind:'skill', label:'read-file', weight:0.28},
+         {id:'j_sk_03', kind:'skill', label:'summarize-long', weight:0.14}, {id:'j_sk_04', kind:'skill', label:'sql-audit', weight:0.09},
+         {id:'j_sk_05', kind:'skill', label:'git-commit', weight:0.08}, {id:'j_sk_06', kind:'skill', label:'release-checklist', weight:0.05},
+         {id:'j_sk_07', kind:'skill', label:'deploy-edge', weight:0.04}],
+  edges:[
+    {from:'j_sk_01',to:'j_sk_03',w:0.42},{from:'j_sk_02',to:'j_sk_03',w:0.31},{from:'j_sk_01',to:'j_sk_04',w:0.14},
+    {from:'j_sk_02',to:'j_sk_05',w:0.26},{from:'j_sk_03',to:'j_sk_05',w:0.18},{from:'j_sk_05',to:'j_sk_06',w:0.22},
+    {from:'j_sk_04',to:'j_sk_07',w:0.11},{from:'j_sk_06',to:'j_sk_07',w:0.16},
+  ],
+  memories:[{id:'j_m1', label:'Kanban 状态枚举共 9 个', weight:0.21},{id:'j_m2', label:'代码注释用中文', weight:0.17},
+            {id:'j_m3', label:'会话时间戳单位不统一', weight:0.15},{id:'j_m4', label:'评测集基线', weight:0.11}],
+};
+
+const SKILLS_USAGE = {
+  total:{views:18420, uses:5458, patches:24, bySource:{builtin:8, hub:5, local:1, external:1}},
+  rows:[
+    {name:'read-file', category:'工具', views:9120, uses:2874, patchCount:0, lastUsedAt:1759017540000, trend:[12,18,22,19,26,24,31,29,34,30,38,41,37,44]},
+    {name:'web-search', category:'研究', views:1842, uses:613, patchCount:2, lastUsedAt:1759015200000, trend:[8,11,9,14,12,16,15,19,17,21,18,23,20,26]},
+    {name:'git-commit',  category:'工程', views:2210, uses:890, patchCount:7, lastUsedAt:1758998400, trend:[6,9,12,10,14,13,17,16,20,18,22,21,25,23]},
+    {name:'summarize-long',category:'写作',views:1533, uses:477, patchCount:1, lastUsedAt:1758988800, trend:[4,7,6,9,8,11,10,13,12,15,14,17,16,19]},
+    {name:'sql-audit',   category:'数据', views:640,  uses:288, patchCount:0, lastUsedAt:1758936000000, trend:[2,4,3,5,6,5,7,6,9,8,10,9,11,10]},
+    {name:'deploy-edge', category:'运维', views:388,  uses:201, patchCount:3, lastUsedAt:1758931200000, trend:[1,2,3,2,4,3,5,4,6,5,7,6,8,7]},
+    {name:'release-checklist',category:'工程',views:210, uses:64, patchCount:11,lastUsedAt:1759017600000,trend:[0,1,1,2,2,3,2,4,3,5,4,6,5,7]},
+  ],
+};
+
+const GLOBAL_AGENT = {
+  connected:true, relay:'api.hermes-studio.ai', agentId:'ga_2e14', name:'global-relay-agent',
+  status:'running', activeTasks:3,
+  sessions:[
+    {sessionId:'ga_2e14', title:'远端：index rebuild', status:'running', tokens:84210, updatedAt:1759017000000, region:'ap-shanghai'},
+    {sessionId:'ga_31fa', title:'远端：audit report', status:'completed', tokens:152300, updatedAt:1758979200000, region:'us-west-2'},
+    {sessionId:'ga_77c0', title:'远端：nightly lint', status:'failed', tokens:12980, updatedAt:1758892800000, region:'eu-central-1'},
+  ],
+};
+
+const GROUP_ROOMS = [
+  {roomId:'hermes-ops', name:'运维值班室', inviteCode:'OPS-2XK4', totalTokens:482300, members:4, updatedAt:1759017000000},
+  {roomId:'release-war', name:'发版作战室', inviteCode:'REL-9M3D', totalTokens:1204000, members:6, updatedAt:1758979200000},
+  {roomId:'research',    name:'研究小组',   inviteCode:'RSH-5J8P', totalTokens:96200, members:3, updatedAt:1758936000000},
+];
+const GROUP_MEMBERS = [
+  {id:'m1', name:'ops-copilot',  role:'owner', model:'claude-sonnet-4-5', tokens:184200, avatar:'OC'},
+  {id:'m2', name:'log-watcher',  role:'member',model:'gpt-5.1-mini',      tokens:121400, avatar:'LW'},
+  {id:'m3', name:'kb-curator',   role:'member',model:'claude-haiku-4-5',  tokens:98200,  avatar:'KC'},
+  {id:'m4', name:'jack',         role:'member',model:null,                tokens:0,       avatar:'JK'},
+];
+
+const FILES = {
+  root:'~/work/hermes-ui',
+  tree:[
+    {n:'.github', t:'dir', kids:['workflows','ISSUE_TEMPLATE']},
+    {n:'docs',    t:'dir', kids:['ui-baseline.md','arco-mapping.md','openapi.json']},
+    {n:'packages',t:'dir', kids:['client','server','skills']},
+    {n:'tests',   t:'dir', kids:['client','server','e2e']},
+    {n:'AGENTS.md', t:'file', size:'4.1 KB', mtime:1758844800000},
+    {n:'README.md',  t:'file', size:'9.8 KB', mtime:1758931200000},
+    {n:'package.json', t:'file', size:'1.2 KB', mtime:1759014400000},
+  ],
+};
+
+const PROFILES = [
+  {name:'default', label:'默认', builtin:true, models:['claude-sonnet-4-5','gpt-5.1'], tools:['filesystem','shell'],
+   workspace:'~/work/hermes-ui', status:'running', pid:48213, createdAt:1758220800000},
+  {name:'research', label:'研究', builtin:false, models:['deepseek/deepseek-chat','gemini-2.5-pro'], tools:['filesystem','web'],
+   workspace:'~/work/eval', status:'idle', pid:48217, createdAt:1758499200000},
+  {name:'ops', label:'运维', builtin:false, models:['claude-haiku-4-5'], tools:['shell'],
+   workspace:'~/work/ops', status:'idle', pid:48221, createdAt:1758585600000},
+  {name:'sandbox', label:'沙箱', builtin:false, models:['claude-haiku-4-5'], tools:[],
+   workspace:'~/work/sandbox', status:'stopped', pid:null, createdAt:1758672000000},
+];
+
+const SETTINGS = {
+  account:{email:'jack@hermes.studio', superadmin:true, lockedIps:['203.0.113.24','198.51.100.7'],
+    providers:[
+      {name:'anthropic', configured:true, env:'ANTHROPIC_API_KEY', hint:'sk-ant-••••••••••••9f2c'},
+      {name:'openai', configured:true, env:'OPENAI_API_KEY', hint:'sk-proj-••••••••••••4b81'},
+      {name:'openrouter', configured:false, env:'OPENROUTER_API_KEY', hint:'未配置'},
+    ]},
+  display:{theme:'ink dark', density:'comfortable', fontSize:14, lineHeight:1.6, monoFont:'JetBrains Mono',
+    showTimestamps:true, compactSidebar:false, reduceMotion:false, avatar:true, welcome:true},
+  proxy:{enabled:false, httpProxy:'', httpsProxy:'', noProxy:'localhost,127.0.0.1'},
+  agent:{maxConcurrentSessions:4, defaultProfile:'default', autoCompact:true, compactThreshold:0.75,
+    reasoningEffort:'medium', temperature:0.2, memoryEnabled:true},
+  memory:{enabled:true, scope:'global', autoCapture:true, retentionDays:180, maxEntries:2000},
+  compression:{strategy:'hierarchical', triggerRatio:0.75, keepRecent:8, targetTokens:4096, model:'claude-haiku-4-5'},
+  session:{historyPageSize:30, maxUploadMb:20, defaultWorkspace:'~/work/hermes-ui',
+    autoTitle:true, titleModel:'gpt-5.1-mini', pinLimit:10, sourceTracking:true},
+  privacy:{telemetry:false, redactKeys:true, shareSessions:false, retentionPolicy:'local-only'},
+  models:{defaultProvider:'anthropic', defaultModel:'claude-sonnet-4-5', fallbackEnabled:true,
+    fallbackModel:'gpt-5.1-mini', temperature:0.2, maxTokens:8192},
+  voice:{tts:{enabled:false, provider:'openai', voice:'alloy', speed:1.0, format:'mp3'},
+    stt:{enabled:true, provider:'openai', model:'whisper-1', language:'zh', autoSend:false}},
+};
+
+const OUTPUT_FILES = [
+  {name:'notes/summary-2026-10-18.md', size:'12.4 KB', mtime:1758931200000},
+  {name:'eval/report-q3.md', size:'88.1 KB', mtime:1758768000000},
+  {name:'deploy/edge-deploy.log', size:'1.2 MB', mtime:1759014400000},
+  {name:'tmp/sketch-01.png', size:'240 KB', mtime:1758992400000},
+];
+
+/* ════════════════════════════════════════════════════════════════════════════
+   4. 路由表（逐条对齐 packages/client/src/router/index.ts）
+      psl:true  → 该路由不吃全局 AppSidebar，使用自带 PageSidebarNav
+   ════════════════════════════════════════════════════════════════════════════ */
+const ROUTES = [
+  {p:'/',                                    n:'login',            grp:'公开',      file:'LoginView.vue',           pub:true,  title:'登录',            render:renderLogin},
+  {p:'/hermes-missing',                      n:'hermes.missing',   grp:'公开',      file:'HermesMissingView.vue',   pub:true,  title:'CLI 缺失引导',   render:renderMissing},
+
+  {p:'/hermes/chat',                         n:'hermes.chat',           grp:'Agent',     file:'ChatView.vue',           psl:true, title:'对话台',       render:renderChat,       flush:true},
+  {p:'/hermes/session/:sessionId',           n:'hermes.session',        grp:'Agent',     file:'ChatView.vue',           psl:true, title:'对话台 · 会话', render:renderChat,       flush:true, hideNav:true},
+  {p:'/hermes/history',                      n:'hermes.history',        grp:'Agent',     file:'HistoryView.vue',        psl:true, title:'历史会话',     render:renderHistory,    flush:true},
+  {p:'/hermes/history/session/:sessionId',   n:'hermes.historySession', grp:'Agent',     file:'HistoryView.vue',        psl:true, title:'历史 · 会话',  render:renderHistory,    flush:true, hideNav:true},
+  {p:'/hermes/global-agent',                 n:'hermes.globalAgent',    grp:'Agent',     file:'GlobalAgentView.vue',    psl:true, title:'全局代理',     render:renderGlobal,     flush:true},
+  {p:'/hermes/global-agent/session/:sessionId', n:'hermes.globalAgentSession', grp:'Agent', file:'GlobalAgentView.vue', psl:true, title:'全局代理 · 会话', render:renderGlobal, flush:true, hideNav:true},
+  {p:'/hermes/group-chat',                   n:'hermes.groupChat',      grp:'Agent',     file:'GroupChatView.vue',      psl:true, title:'群聊',         render:renderGroup,      flush:true},
+  {p:'/hermes/group-chat/room/:roomId',      n:'hermes.groupChatRoom',  grp:'Agent',     file:'GroupChatView.vue',      psl:true, title:'群聊 · 房间',  render:renderGroup,      flush:true, hideNav:true},
+  {p:'/hermes/workflow',                     n:'hermes.workflow',       grp:'Agent',     file:'WorkflowView.vue',       psl:true, title:'工作流',       render:renderWorkflow,   flush:true},
+
+  {p:'/hermes/jobs',                         n:'hermes.jobs',       grp:'Agent', file:'JobsView.vue',     title:'定时任务',  render:renderJobs},
+  {p:'/hermes/kanban',                       n:'hermes.kanban',     grp:'Agent', file:'KanbanView.vue',   title:'看板',      render:renderKanban},
+  {p:'/hermes/channels',                     n:'hermes.channels',   grp:'Agent', file:'ChannelsView.vue', title:'频道',      render:renderChannels},
+  {p:'/hermes/skills',                       n:'hermes.skills',     grp:'Agent', file:'SkillsView.vue',   title:'技能',      render:renderSkills},
+  {p:'/hermes/plugins',                      n:'hermes.plugins',    grp:'Agent', file:'PluginsView.vue',  title:'插件',      render:renderPlugins},
+  {p:'/hermes/mcp',                          n:'hermes.mcp',        grp:'Agent', file:'McpManagerView.vue',title:'MCP 服务器',render:renderMcp},
+  {p:'/hermes/petdex',                       n:'hermes.petdex',     grp:'Agent', file:'PetdexView.vue',   title:'Petdex',    render:renderPetdex},
+  {p:'/hermes/memory',                       n:'hermes.memory',     grp:'Agent', file:'MemoryView.vue',   title:'记忆',      render:renderMemory},
+  {p:'/hermes/models',                       n:'hermes.models',     grp:'Agent', file:'ModelsView.vue',   title:'模型',      render:renderModels},
+
+  {p:'/hermes/logs',                         n:'hermes.logs',       grp:'Monitoring', file:'LogsView.vue',         title:'日志',          render:renderLogs},
+  {p:'/hermes/usage',                        n:'hermes.usage',      grp:'Monitoring', file:'UsageView.vue',        title:'用量',          render:renderUsage},
+  {p:'/hermes/performance',                  n:'hermes.performance',grp:'Monitoring', file:'PerformanceView.vue',  title:'性能',     sa:true, render:renderPerformance},
+  {p:'/hermes/journey',                      n:'hermes.journey',    grp:'Monitoring', file:'JourneyView.vue',      title:'学习轨迹',      render:renderJourney},
+  {p:'/hermes/skills-usage',                 n:'hermes.skillsUsage',grp:'Monitoring', file:'SkillsUsageView.vue',  title:'技能用量',      render:renderSkillsUsage},
+
+  {p:'/hermes/version-preview',              n:'hermes.versionPreview',grp:'Tools',  file:'VersionPreviewView.vue', title:'版本预览', sa:true, render:renderVersion},
+  {p:'/hermes/devices',                      n:'hermes.devices',    grp:'Tools',      file:'DevicesView.vue',      title:'设备',     sa:true, render:renderDevices},
+
+  {p:'/hermes/profiles',                     n:'hermes.profiles',   grp:'System',     file:'ProfilesView.vue',     title:'配置档案',   sa:true, render:renderProfiles},
+  {p:'/hermes/settings',                     n:'hermes.settings',   grp:'System',     file:'SettingsView.vue',     title:'设置',      render:renderSettings},
+  {p:'/hermes/terminal',                     n:'hermes.terminal',   grp:'Tools',      file:'TerminalView.vue',     title:'终端',      sa:true, render:renderTerminal},
+  {p:'/hermes/files',                        n:'hermes.files',      grp:'Agent',      file:'FilesView.vue',        title:'文件',      render:renderFiles},
+
+  // 说明屏（不属真实路由，仅原型交付说明）
+  {p:'@/overview',  n:'@/overview',  grp:'原型说明', file:'—', title:'交付说明', render:renderOverview},
+  {p:'@/routeMap',  n:'@/routeMap',  grp:'原型说明', file:'router/index.ts', title:'路由映射', render:renderRouteMap},
+  {p:'@/contract',  n:'@/contract',  grp:'原型说明', file:'docs/openapi.json', title:'响应信封总表', render:renderContract},
+];
+const byPath = p => ROUTES.find(r=>r.p===p);
+
+/* 侧栏 IA —— 严格对齐 AppSidebar.vue 的 SidebarGroupKey 4 组 */
+/* 注：本表逐条对齐 AppSidebar.vue 的 <nav class="sidebar-nav">。
+   hermes.files 与 hermes.terminal 真实不在全局侧栏，见 NO_SIDEBAR_ENTRY。 */
+const NAV = [
+  {g:'Agent', items:[
+    {n:'hermes.jobs',       p:'/hermes/jobs',       i:'⏱'},
+    {n:'hermes.kanban',     p:'/hermes/kanban',     i:'▤'},
+    {n:'hermes.channels',   p:'/hermes/channels',   i:'#'},
+    {n:'hermes.skills',     p:'/hermes/skills',     i:'✦'},
+    {n:'hermes.plugins',    p:'/hermes/plugins',    i:'⬡'},
+    {n:'hermes.mcp',        p:'/hermes/mcp',        i:'⇄'},
+    {n:'hermes.petdex',     p:'/hermes/petdex',     i:'◈'},
+    {n:'hermes.memory',     p:'/hermes/memory',     i:'⌾'},
+    {n:'hermes.models',     p:'/hermes/models',     i:'◇'},
+  ]},
+  {g:'Monitoring', items:[
+    {n:'hermes.logs',       p:'/hermes/logs',       i:'≡'},
+    {n:'hermes.usage',      p:'/hermes/usage',      i:'◔'},
+    {n:'hermes.performance',p:'/hermes/performance',i:'◎', sa:true},
+    {n:'hermes.journey',    p:'/hermes/journey',    i:'⌁'},
+    {n:'hermes.skillsUsage',p:'/hermes/skills-usage',i:'↗'},
+  ]},
+  {g:'Tools', items:[
+    {n:'hermes.versionPreview', p:'/hermes/version-preview', i:'⇪', sa:true},
+    {n:'hermes.devices',    p:'/hermes/devices',    i:'⌸', sa:true},
+  ]},
+  {g:'System', items:[
+    {n:'hermes.profiles',   p:'/hermes/profiles',   i:'◍', sa:true},
+    {n:'hermes.settings',   p:'/hermes/settings',   i:'⚙'},
+  ]},
+];
+/* 真实实现中这两条路由不在 AppSidebar 内，但路由表里存在。 */
+const NO_SIDEBAR_ENTRY = [
+  {n:'hermes.files',    p:'/hermes/files',    why:'无侧栏入口。唯一入口是配置档案卡片的「编辑配置」按钮，router.push({name:\'hermes.files\', query:{profile, file:\'config.yaml\'}})（ProfileCard.vue:99-107）'},
+  {n:'hermes.terminal', p:'/hermes/terminal', why:'无任何 UI 导航入口。路由存在且 requiresSuperAdmin，仅可手动输入 hash 直达'},
+];
+const NAV_LABEL = {
+  'hermes.jobs':'定时任务','hermes.kanban':'看板','hermes.channels':'频道','hermes.skills':'技能',
+  'hermes.plugins':'插件','hermes.mcp':'MCP 服务器','hermes.petdex':'Petdex','hermes.memory':'记忆',
+  'hermes.models':'模型','hermes.files':'文件','hermes.logs':'日志','hermes.usage':'用量',
+  'hermes.performance':'性能','hermes.journey':'学习轨迹','hermes.skillsUsage':'技能用量',
+  'hermes.versionPreview':'版本预览','hermes.devices':'设备','hermes.terminal':'终端',
+  'hermes.profiles':'配置档案','hermes.settings':'设置',
+};
+
+/* ════════════════════════════════════════════════════════════════════════════
+   5. SHELL
+   ════════════════════════════════════════════════════════════════════════════ */
+const state = {mini:false, drawer:false, sa:true, route:null};
+
+function sidebarHtml(activeName){
+  const groups = NAV.map(g=>`
+    <div class="nav-group">
+      <div class="nav-group-t">${g.g}</div>
+      ${g.items.map(it=>{
+        const sa = it.sa && !state.sa;
+        return `<a class="nav-i ${it.n===activeName?'on':''}" href="#${it.p}" title="${esc(NAV_LABEL[it.n])}">
+          <span class="ic">${it.i}</span><span class="lb">${esc(NAV_LABEL[it.n])}</span>
+          ${it.sa?'<span class="sa">SA</span>':''}</a>`;
+      }).join('')}
+    </div>`).join('');
+  /* 无侧栏入口：真实 AppSidebar 里没有这两项，本原型放侧栏底部以保证可达 */
+  const hiddenGroup = (activeName===null || activeName===undefined) ? '' : `
+    <div class="nav-group">
+      <div class="nav-group-t">无侧栏入口 · 真实如此</div>
+      ${NO_SIDEBAR_ENTRY.map(it=>`<a class="nav-i dim" href="#${it.p}" title="${esc(it.why)}">
+        <span class="ic">${it.n==='hermes.files'?'▣':'▮'}</span><span class="lb">${esc(NAV_LABEL[it.n])}</span>
+        <span class="sa">${it.n==='hermes.terminal'?'SA':'↗'}</span></a>`).join('')}
+    </div>`;
+  const extra = (activeName===null || activeName===undefined)
+    ? `<div class="nav-group"><div class="nav-group-t">原型说明</div>
+        ${[['@/overview','◈','交付说明'],['@/routeMap','⇅','路由映射'],['@/contract','⎘','响应信封总表']]
+          .map(([p,i,l])=>`<a class="nav-i ${activeName===p?'on':''}" href="#${p}"><span class="ic">${i}</span><span class="lb">${l}</span></a>`).join('')}
+       </div>` : '';
+  return `<aside class="rail">
+    <div class="rail-top">
+      <a class="brand" href="#/hermes/chat">
+        <span class="brand-mark">H</span>
+        <span class="brand-tx"><b>HERMES</b><span>Studio Console</span></span>
+      </a>
+      <span class="rail-top-actions">
+        <a class="icon-btn" href="#/hermes/chat" title="返回聊天">◂</a>
+        <button class="icon-btn" data-act="mini" title="折叠侧栏">⇤</button>
+      </span>
+    </div>
+    <div class="rail-scroll">${groups}${hiddenGroup}${extra}</div>
+    <div class="rail-foot">
+      <div class="foot-sel"><span class="k">Profile</span><span class="v grow ell">default</span><span class="fnt xs">▾</span></div>
+      <div class="foot-sel"><span class="k">Model</span><span class="v grow ell">claude-sonnet-4-5</span><span class="fnt xs">▾</span></div>
+      <div class="foot-btns">
+        <button class="foot-btn" title="Language">中</button>
+        <button class="foot-btn" title="Theme">◐</button>
+        <button class="foot-btn" title="GitHub">⌥</button>
+        <button class="foot-btn" title="Website">◍</button>
+        <button class="foot-btn" title="检查更新">⇧</button>
+        <button class="foot-btn" title="退出登录" style="margin-left:auto">⏻</button>
+      </div>
+      <div class="foot-meta">
+        <span class="row g6"><span class="led ok"></span><span class="hide-mini">connected</span></span>
+        <span class="hide-mini">Studio v0.9.5</span>
+      </div>
+    </div>
+  </aside>`;
+}
+
+function topbarHtml(r){
+  if(!r) return '';
+  const sa = r.sa ? `<span class="sa-badge">SUPERADMIN</span>` : '';
+  return `<header class="topbar">
+    <button class="icon-btn only-narrow" data-act="drawer">☰</button>
+    <div class="crumb">
+      <span class="grp">${esc(r.grp)}</span><span class="sep">/</span>
+      <span class="rt">${esc(r.p.startsWith('@')?r.n:r.p)}</span><span class="sep">·</span>
+      <span class="fnt xs mono">${esc(r.n)}</span>
+    </div>
+    ${sa}
+    <div class="topbar-actions">
+      <span class="tb-chip only-wide" title="对应组件文件">${esc(r.file)}</span>
+      <button class="tb-chip ${state.sa?'on':''}" data-act="sa" title="模拟 SUPERADMIN 身份">SA 预览 ${state.sa?'ON':'OFF'}</button>
+      <button class="icon-btn" data-act="mini" title="折叠侧栏">⇤</button>
+    </div>
+  </header>`;
+}
+
+function render(){
+  const hash = location.hash.slice(1) || '/';
+  const r = resolve(hash);
+  state.route = r;
+  const app = document.getElementById('app');
+  if(!r){ app.innerHTML = `<div class="auth"><div class="auth-card"><div class="auth-bd">
+      <h1 style="font:600 15px/1.4 var(--font-display)">404 · 未知路由</h1>
+      <p class="sm mut mt8">${esc(hash)} 不在 31 条路由内。</p>
+      <a class="btn pri mt16" href="#/hermes/chat">回到对话台</a></div></div></div>`; return; }
+  document.title = `${r.title} · Hermes UI CYBER 原型`;
+  // 对齐 App.vue：usesPageSidebar 的 9 条路由不渲染 AppSidebar，改用自带 PageSidebarNav
+  const shellCls = `shell ${state.mini?'mini':''} ${state.drawer?'drawer':''} ${r.psl?'no-rail':''}`;
+  const shell = r.pub
+    ? r.render(r)
+    : `<div class="${shellCls}">${sidebarHtml(r.psl ? null : r.n)}<div class="main">
+        ${topbarHtml(r)}<div class="view-host ${r.flush?'flush':''}">${r.render(r)}</div></div></div>`;
+  app.innerHTML = shell;
+  document.body.scrollTop = 0;
+}
+
+/* hash 解析：先原样查 byPath（@/ 说明屏），再补斜杠容错，最后参数化匹配 */
+function resolve(hash){
+  let h = (hash || '').split('?')[0];
+  if(!h) h = '/';
+  if(!h.startsWith('/') && !h.startsWith('@/')) h = '/'+h;
+  const direct = byPath(h);
+  if(direct) return direct;
+  // 参数化路由匹配：/hermes/session/7f3a91 → /hermes/session/:sessionId
+  const segs = h.split('/').filter(Boolean);
+  for(const cand of ROUTES){
+    const cs = cand.p.split('/').filter(Boolean);
+    if(cs.length !== segs.length) continue;
+    if(!cs.some(s => s.charCodeAt(0) === 58 /* ':' */)) continue;
+    let ok = true;
+    for(let i=0;i<cs.length;i++){
+      if(cs[i].charCodeAt(0) === 58){ continue; }
+      if(cs[i] !== segs[i]){ ok = false; break; }
+    }
+    if(ok) return cand;
+  }
+  return null;
+}
+function go(path,push=true){
+  if(push) location.hash = path;
+  else history.replaceState(null,'',path);
+  render();
+}
+addEventListener('hashchange', render);
+addEventListener('keydown', e=>{
+  if(e.key === 'Escape'){
+    const m = document.querySelector('.modal[data-modal]:not([hidden])');
+    if(m){ m.hidden = true; delete m.dataset.sec; }
+  }
+});
+document.addEventListener('click', e=>{
+  const t = e.target.closest('[data-act]');
+  if(!t) return;
+  const a = t.dataset.act;
+  if(a==='mini'){ state.mini=!state.mini; render(); }
+  if(a==='drawer'){ state.drawer=!state.drawer; render(); }
+  if(a==='sa'){ state.sa=!state.sa; render(); }
+  if(a==='outline'||a==='files-panel'||a==='term-panel'){
+    document.querySelectorAll('.outline,.rail-r,.ctool').forEach(x=>x.classList.add('hide'));
+    const sel = a==='outline'?'.outline':(a==='files-panel'?'.rail-r.files':'.rail-r.term');
+    const el = document.querySelector(sel); if(el) el.classList.toggle('hide');
+  }
+  /* 记忆：卡片「修改」→ 弹窗编辑全文 → 确认写回 / 取消丢弃 */
+  if(a && a.startsWith('mem-')){
+    const modal = document.querySelector('.modal[data-modal]');
+    if(a==='mem-open'){
+      const sec = t.dataset.sec, doc = MEMORY_DOCS[sec];
+      if(!doc || !modal) return;
+      modal.dataset.sec = sec;
+      modal.hidden = false;
+      modal.querySelector('#mem-modal-title').textContent = `修改 · ${doc.title}`;
+      modal.querySelector('#mem-modal-file').textContent = doc.file;
+      const ta = modal.querySelector('#mem-modal-ta');
+      ta.value = String(doc.body||'').replace(/§/g,'\n\n');
+      ta.focus();
+    }
+    if(a==='mem-close' && modal){ modal.hidden = true; delete modal.dataset.sec; }
+    if(a==='mem-ok' && modal && modal.dataset.sec){
+      const sec = modal.dataset.sec;
+      const ta = modal.querySelector('#mem-modal-ta');
+      // 空行回写为 §，与后端约定的段落分隔一致
+      MEMORY_DOCS[sec].body = ta.value.replace(/\n{2,}/g,'§§').replace(/\n/g,'\n');
+      MEMORY_DOCS[sec].mtime = Date.now();
+      modal.hidden = true; delete modal.dataset.sec;
+      render();
+    }
+  }
+});
+
+/* ════════════════════════════════════════════════════════════════════════════
+   6. 视图 · 公开页
+   ════════════════════════════════════════════════════════════════════════════ */
+function renderLogin(){
+  return `<div class="auth"><div class="mask-bg dot-grid"></div>
+  <div class="auth-card">
+    <div class="hd">
+      <div class="auth-mark">H</div>
+      <h1 style="margin:0;font:600 17px/1.3 var(--font-display);letter-spacing:.06em">HERMES STUDIO</h1>
+      <p class="sm mut mt8">自托管 AI Agent 控制台 · 输入 API Key 以继续</p>
+    </div>
+    <div class="auth-bd">
+      <div class="stack">
+        ${field('API Key', `<input class="inp" type="password" placeholder="sk-..." value="sk-hermes-••••••••••••4f2a" />`,
+          '存储于 localStorage key <span class="code">hermes.apiKey</span>')}
+        ${field('服务地址', `<input class="inp" value="http://127.0.0.1:8787" />`,
+          '默认同源；跨域时服务端需放行 CORS')}
+        <button class="btn pri" style="height:34px;justify-content:center">连接并进入</button>
+        <div class="row-b sm fnt"><span>未配置 Key 时守卫跳转至 <span class="code">/</span></span><span class="code">POST /api/auth/login</span></div>
+      </div>
+      ${apiPanel([
+        ep('POST','/api/auth/login','{ ok: true, user }',[fld('ok','boolean','成功标志用 ok'),fld('user','object','登录态'),fld('token','string?')]),
+        ep('GET','/api/hermes/system/cli-available','{ available: boolean }',
+          [fld('available','boolean','守卫首个探测；false → /hermes-missing'),fld('reason','string?')]),
+      ], note('路由守卫顺序：<b>checkHermesCliAvailable()</b> → <b>meta.public</b> → <b>hasApiKey()</b> → <b>requiresSuperAdmin</b>。登录页已持有 Key 时直接跳 <span class="code">/hermes/chat</span>。'))}
+      <div class="xs fnt mt16" style="text-align:center">本地部署 · 无遥测 · 数据不出机器</div>
+    </div>
+  </div></div>`;
+}
+
+function renderMissing(){
+  return `<div class="auth"><div class="mask-bg"></div>
+  <div class="auth-card" style="max-width:560px">
+    <div class="hd">
+      <div class="auth-mark" style="border-color:var(--warn);color:var(--warn);box-shadow:0 0 0 1px oklch(0.810 0.145 85/.2),0 0 26px oklch(0.810 0.145 85/.16) inset">⚠</div>
+      <h1 style="margin:0;font:600 16px/1.3 var(--font-display)">未检测到 Hermes CLI</h1>
+      <p class="sm mut mt8">控制台需要本机的 <span class="code">hermes</span> 可执行文件才能拉起 Agent 运行时。</p>
+    </div>
+    <div class="auth-bd">
+      <div class="stack">
+        ${panel('安装步骤','',`<div class="term"><span class="c-acc">$</span> npm i -g @hermes/cli
+<span class="c-acc">$</span> hermes --version
+<span class="c-ok">hermes/0.9.5 darwin-arm64 node-v22.11.0</span></div>`)}
+        ${panel('环境变量','',kv([
+          ['HERMES_HOME','<span class="code">~/.hermes</span>'],
+          ['HERMES_BIN','<span class="code p">（未设置时按 PATH 查找 hermes）</span>'],
+          ['PATH','<span class="code p">需包含 npm global bin 目录</span>'],
+        ]))}
+        ${note('该探测 <b>fail-open</b>：只有服务端明确返回 missing 才跳本页；网络异常时放行。','warn')}
+        <div class="row g8"><button class="btn pri">重新检测</button><a class="btn ghost" href="#/hermes/chat">仍然进入</a></div>
+      </div>
+      ${apiPanel([ep('GET','/api/hermes/system/cli-available','{ available, reason?, binPath? }',
+        [fld('available','boolean'),fld('reason','string?'),fld('binPath','string?')])])}
+    </div>
+  </div></div>`;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   7. 共享片段 · PageSidebarNav / 会话列表 / 消息流
+   ════════════════════════════════════════════════════════════════════════════ */
+function convSwitch(active){
+  const items=[['singleChat','单聊'],['groupChat','群聊'],['workflow','工作流']];
+  return `<div class="conv-switch c3">${items.map(([k,t])=>
+    `<button class="${active===k?'on':''}" ${k==='singleChat'?'data-goto="/hermes/chat"':k==='groupChat'?'data-goto="/hermes/group-chat"':'data-goto="/hermes/workflow"'}>${t}</button>`).join('')}</div>`;
+}
+const psnav = (active, body, foot='') => `<div class="psnav">
+  <div class="psnav-tabs">
+    <span class="primary">＋ 新建对话</span>
+    <span class="grow"></span>
+    <button class="icon-btn" title="搜索会话">⌕</button>
+    <button class="icon-btn" title="历史">◷</button>
+  </div>
+  ${convSwitch(active)}
+  <div class="psnav-list">${body}</div>
+  <div class="psnav-foot">
+    ${foot||`<button class="btn sm ghost">⚙ 设置</button>`}
+    <span class="grow"></span>
+    <button class="btn sm ghost" data-act="drawer" title="全局导航（本原型专用，真实实现中 AppSidebar 已隐藏）">☰ 导航</button>
+  </div>
+</div>`;
+
+function sessionListGroup(title, items, activeId, pinned=false){
+  return `<div class="slist-group-t">${esc(title)}</div>` + items.map(s=>`
+    <a class="s-item ${s.sessionId===activeId?'on':''} ${pinned?'pin':''}" href="#/hermes/session/${s.sessionId}">
+      <span class="grow"><span class="t">${esc(s.title)}</span>
+        <span class="m">${statusTag(s.source==='api_server'?'done':s.source)}<span>${esc(s.profile)}</span>
+        <span>${s.message_count} 条</span><span>${tsSec(s.updatedAt).slice(5,16)}</span></span>
+      </span></a>`).join('');
+}
+
+function bubbleHtml(m){
+  const av = {user:'我', assistant:'AI', tool:'⚙', system:'⚑', command:'›', moa:'◇'}[m.role] ?? '·';
+  if(m.role==='system' && m.systemType==='fork-divider')
+    return `<div class="fork-divider">${esc(m.content)}</div>`;
+  const inner =
+    (m.reasoning ? `<div class="reasoning"><div class="rt">▸ 推理过程（可折叠）</div><div class="mt4">${esc(m.reasoning)}</div></div>`:'') +
+    esc(m.content) +
+    (m.toolName ? `<div class="tool-call"><div class="th"><span class="led ok"></span><span>${esc(m.toolName)}</span>
+        <span class="rt">${esc(m.result||'ok')}</span></div><div style="padding:8px 9px" class="term">${esc(m.content)}</div></div>`:'');
+  return `<div class="bubble-row ${esc(m.role)} ${m.systemType==='error'?'err':''}">
+    <div class="bubble-av">${av}</div>
+    <div class="bubble">
+      <div class="meta"><span>${esc(m.role)}</span>${m.systemType?statusTag(m.systemType==='error'?'error':'idle',m.systemType):''}
+        <span>${tsSec(m.ts).slice(5,16)}</span></div>
+      ${inner}
+    </div></div>`;
+}
+
+const approvalCard = () => `<div class="appr">
+  <div class="q">⚠ 需要审批 · 该工具将写入工作区文件</div>
+  <div class="term mt8" style="max-height:120px">write_file("packages/client/src/components/kanban/KanbanColumn.vue")
+  → 覆盖 12 行</div>
+  <div class="acts">
+    ${btn('仅本次',{cls:'pri sm'})}${btn('本会话允许',{cls:'sm'})}${btn('始终允许',{cls:'sm'})}${btn('拒绝',{cls:'danger sm'})}
+  </div>
+  <div class="xs fnt mt8">PendingApproval.choices = once | session | always | deny</div>
+</div>`;
+
+function chatInput(opts={}){
+  const o = {reasoning:true, model:true, voice:true, context:true, ...opts};
+  return `${o.context?`<div class="ctx-row"><span>tokens 41,208 / 200,000</span>${meter(20.6)}
+    <span>20.6%</span></div>`:''}
+  <div class="chat-input"><div class="box">
+    <textarea class="ta" rows="2" placeholder="${o.placeholder??'输入消息，Enter 发送 · Shift+Enter 换行 · @ 提及文件'}"></textarea>
+    <div class="bar">
+      <button class="icon-btn" title="附件">📎</button>
+      ${o.reasoning?`<button class="btn sm ghost" title="reasoning-effort">effort: medium ▾</button>`:''}
+      ${o.settings===false?'':`<button class="icon-btn" title="输入设置">⚙</button>`}
+      ${o.model?`<button class="btn sm ghost">claude-sonnet-4-5 ▾</button>`:''}
+      <span class="rt">
+        ${o.voice?`<button class="icon-btn" title="语音">🎙</button>`:''}
+        <button class="send-btn" title="发送">↑</button>
+      </span>
+    </div></div></div>`;
+}
+
+function outlinePanel(){
+  return `<aside class="outline">
+    <div class="sec-t" style="margin-top:0">大纲 Outline</div>
+    ${['定位问题','列宽根因','最小改动','截断处理','验证'].map((t,i)=>
+      `<div class="oi ${i===0?'on':''}">${i+1}. ${t}</div>`).join('')}
+    <div class="sec-t">附件</div>
+    <div class="stack tight">
+      <div class="row-i" style="padding:6px 9px"><span class="mono xs">▤</span><span class="ttl ell">KanbanColumn.vue</span></div>
+      <div class="row-i" style="padding:6px 9px"><span class="mono xs">▤</span><span class="ttl ell">sketch-01.png</span></div>
+    </div>
+  </aside>`;
+}
+const filesRail = () => `<div class="rail-r files">
+  <div class="ct-h"><span class="led ok"></span><b class="sm mono">Files</b>
+    <span class="grow"></span><button class="icon-btn" data-act="files-panel">✕</button></div>
+  <div class="ct-b">
+    <div class="stack tight">
+      <div class="row-i" style="padding:6px 9px"><span class="ttl ell">notes/summary-2026-10-18.md</span><span class="rt fnt xs">12.4 KB</span></div>
+      <div class="row-i" style="padding:6px 9px"><span class="ttl ell">eval/report-q3.md</span><span class="rt fnt xs">88.1 KB</span></div>
+      <div class="row-i" style="padding:6px 9px"><span class="ttl ell">deploy/edge-deploy.log</span><span class="rt fnt xs">1.2 MB</span></div>
+    </div>
+  </div></div>`;
+const termRail = () => `<div class="rail-r term hide">
+  <div class="ct-h"><span class="led run"></span><b class="sm mono">Terminal</b>
+    <span class="grow"></span><button class="icon-btn" data-act="term-panel">✕</button></div>
+  <div class="ct-b"><div class="term" style="padding:0">$ npm run test -- kanban
+<span class="c-mut">…</span>
+<span class="c-ok">✓ KanbanView renders 9 columns</span>
+<span class="c-ok">✓ column width responsive @1280</span>
+<span class="c-err">✗ drag placeholder height mismatch</span>
+<span class="dim">1 failed, 2 passed</span>
+<span class="c-acc">$</span><span class="cursor"></span></div></div></div>`;
+
+/* ════════════════════════════════════════════════════════════════════════════
+   8. 视图 · 对话台 / 历史 / 全局代理 / 群聊 / 工作流
+   ════════════════════════════════════════════════════════════════════════════ */
+function renderChat(r){
+  const pinned = SESSIONS.filter(s=>s.pinned), rest = SESSIONS.filter(s=>!s.pinned);
+  const cur = SESSIONS[0];
+  return `<div class="flush-wrap">
+    <div class="psl">
+    ${psnav('singleChat',
+      sessionListGroup('置顶', pinned, cur.sessionId, true) + sessionListGroup('今天', rest.slice(0,3), cur.sessionId) + sessionListGroup('更早', rest.slice(3), cur.sessionId))}
+    <div class="chat-main">
+      <div class="chat-header">
+        <button class="icon-btn" title="折叠会话列表">⇤</button>
+        <div class="grow"><div class="ttl">${esc(cur.title)}</div>
+          <div class="xs fnt mono">${cur.sessionId} · ${esc(cur.profile)}</div></div>
+        <span class="tag">${esc(cur.workspace)}</span>
+        <div class="right">
+          <button class="icon-btn" data-act="files-panel" title="Files">▣</button>
+          <button class="icon-btn" data-act="term-panel" title="Terminal (SA)">▮</button>
+          <button class="icon-btn" data-act="outline" title="Outline">☰</button>
+          <button class="icon-btn" title="复制 sessionId">⧉</button>
+        </div>
+      </div>
+      <div class="chat-body"><div class="chat-body-inner">
+        ${MESSAGES.map(bubbleHtml).join('')}
+        <div style="margin-left:36px">${approvalCard()}</div>
+      </div></div>
+      ${chatInput()}
+    </div>
+    ${outlinePanel()}
+    ${filesRail()}${termRail()}
+    </div>
+    ${apiPanel([
+    ep('GET','/api/hermes/sessions?source=&profile=&pinned=&cursor=','{ sessions: SessionSummary[], hasMore: boolean }',
+      [fld('sessionId','string'),fld('title','string'),fld('source','enum','api_server|cron|channel|group_chat|global_agent|workflow|kanban|terminal|file'),
+       fld('profile','string'),fld('message_count','number'),fld('totalTokens','number'),fld('workspace','string?'),
+       fld('created_at','number · epoch 秒'),fld('updatedAt','number · epoch 秒'),
+       fld('hasMore','boolean','驼峰！与 created_at 蛇形在同一响应里混用')]),
+    ep('GET','/api/hermes/sessions/:id/history?page=&limit=','{ messages: HermesMessage[], hasMore }',
+      [fldEnum('role',['user','assistant','system','tool','command','moa']),
+       fldEnum('systemType',['command','error','fork-divider'],'systemType 为空表示普通系统消息'),
+       fld('content','string'),fld('toolName','string?'),fld('ts','number','epoch 秒')]),
+    ep('WS','socket.io namespace /chat-run','事件契约不可变',
+      [fldEnum('event',['run:start','run:delta','run:tool','run:approval','run:end'],'字段名/类型/时序不可改；仅允许新增可选字段'),
+       fld('approval','PendingApproval?','choices: once|session|always|deny')]),
+    ep('GET','/api/hermes/sessions/usage?ids=a,b,c','顶层裸 map（无外层 key）',
+      [fld('{sessionId}','{ totalTokens, estimated_cost_usd }')]),
+  ], note('红线：<b>/chat-run 事件契约不可变</b>（事件名 / 字段名 / 字段类型 / 发射时机），新增可选字段是唯一允许的变更。'))}
+  </div>`;
+}
+
+function renderHistory(r){
+  const order = ['api_server','cron','channel','group_chat','global_agent','workflow','kanban','terminal','file'];
+  const groups = order.map(s=>({s, items:SESSIONS.filter(x=>x.source===s)}))
+    .filter(g=>g.items.length);
+  const cur = SESSIONS[0];
+  return `<div class="flush-wrap"><div class="psl">
+    ${psnav('singleChat', groups.map(g=>sessionListGroup(
+      g.s, g.items.sort((a,b)=>b.updatedAt-a.updatedAt), cur.sessionId, false)).join(''))}
+    <div class="chat-main">
+      <div class="chat-header">
+        <button class="icon-btn" title="折叠">⇤</button>
+        <div class="grow"><div class="ttl">${esc(cur.title)}</div>
+          <div class="xs fnt mono">${cur.sessionId}</div></div>
+        ${statusTag(cur.source, cur.source)}
+        <span class="tag">${esc(cur.workspace)}</span>
+        <div class="right">
+          <button class="icon-btn" data-act="outline" title="Outline">☰</button>
+          <button class="icon-btn" title="复制 id">⧉</button>
+        </div>
+      </div>
+      <div class="chat-body"><div class="chat-body-inner">
+        ${note(`历史会话为<b>只读</b>视图：Hermes <span class="code">state.db</span> 服务端只读，前端不直接打开；内容一律经 bridge 的 <span class="code">getHistory</span> / <span class="code">getOutput</span> 读取。`,'info')}
+        ${MESSAGES.slice(0,6).map(bubbleHtml).join('')}
+      </div></div>
+    </div>
+    ${outlinePanel()}
+    </div>
+    ${apiPanel([
+      ep('GET','/api/hermes/sessions/history?source=&profile=&cursor=','{ sessions: SessionSummary[], hasMore }',
+        [fld('source','enum','决定左侧分组；分组顺序 api_server 最前 → cron 最后 → 其余字母序'),
+         fld('hasMore','boolean'),fld('updatedAt','number · epoch 秒','组内按此倒序')]),
+      ep('POST','/api/hermes/sessions/:id/branch','{ session: SessionSummary }',
+        [fld('sessionId','string'),fld('fromMessageId','string','分叉点；产出 fork-divider 系统消息')]),
+    ], note('本屏与对话台<b>共用</b> <span class="code">ChatPanel</span> / <span class="code">PageSidebarNav</span>，差异只在 header 多一个 <span class="code">source-badge</span>，且右侧不提供 Terminal toggle（SA）。'))}
+  </div>`;
+}
+
+function renderGlobal(r){
+  const cur = GLOBAL_AGENT.sessions[0];
+  return `<div class="flush-wrap"><div class="psl">
+    ${psnav('singleChat',
+      `<div class="slist-group-t">远端会话</div>` + GLOBAL_AGENT.sessions.map(s=>`
+        <a class="s-item ${s.sessionId===cur.sessionId?'on':''}" href="#/hermes/global-agent/session/${s.sessionId}">
+          <span class="grow"><span class="t">${esc(s.title)}</span>
+          <span class="m">${statusTag(s.status)}<span>${esc(s.region)}</span><span>${s.tokens.toLocaleString()} tok</span></span></span></a>`).join(''),
+      `<button class="btn sm ghost">⚙ 设置</button>`)}
+    <div class="chat-main">
+      <div class="chat-header">
+        <button class="icon-btn" title="折叠">⇤</button>
+        <div class="grow"><div class="ttl">${esc(cur.title)}</div>
+          <div class="xs fnt mono">${cur.sessionId} · ${GLOBAL_AGENT.agentId}</div></div>
+        ${statusTag('connected','relay connected')}
+        <div class="right"><button class="icon-btn" title="复制 id">⧉</button></div>
+      </div>
+      <div class="chat-body"><div class="chat-body-inner">
+        ${note(`中继地址 <span class="code">${esc(GLOBAL_AGENT.relay)}</span> 是<b>功能性保留</b>项（见 AGENTS.md 红线：不要当作遗留品牌清理），本部署与上游运营方无关联。`,'warn')}
+        ${kpis([
+          {k:'Relay', v:'connected', tone:'ok', s:GLOBAL_AGENT.relay},
+          {k:'Active Tasks', v:GLOBAL_AGENT.activeTasks, tone:'acc'},
+          {k:'Tokens', v:'249,490', tone:'info', s:'全部远端会话累计'},
+          {k:'Agent', v:GLOBAL_AGENT.agentId, tone:'flat', s:GLOBAL_AGENT.name},
+        ])}
+        ${secT('远端事件流')}
+        ${table([{t:'Time'},{t:'Region'},{t:'Event'},{t:'Detail'}],[
+          [tsMs(1759017000000).slice(5),'ap-shanghai',statusTag('running'),'node n2 tool: web_search'],
+          [tsMs(1759016760000).slice(5),'ap-shanghai',statusTag('completed'),'node n1 completed'],
+          [tsMs(1758979200000).slice(5),'us-west-2',statusTag('completed'),'run run_9f02 finished'],
+          [tsMs(1758892800000).slice(5),'eu-central-1',statusTag('failed'),'lint exit 1'],
+        ])}
+        ${approvalCard()}
+      </div></div>
+      ${chatInput({reasoning:false,model:false,voice:false,context:false,placeholder:'向远端代理下发指令'})}
+    </div>
+    ${outlinePanel()}
+    </div>
+    ${apiPanel([
+      ep('WS','socket.io namespace /global-agent','事件流（与 /chat-run 分离）',
+        [fldEnum('event',['task:enqueue','task:start','task:delta','task:end','agent:status']),
+         fld('agentId','string','ga_2e14'),fld('region','string')]),
+      ep('GET','/api/hermes/global-agent/sessions','{ sessions: GlobalSession[] }',
+        [fld('sessionId','string','ga_* 前缀'),fldEnum('status',['queued','running','completed','failed']),
+         fld('tokens','number'),fld('updatedAt','number · epoch 秒'),fld('region','string')]),
+      ep('GET','/api/hermes/global-agent/status','裸对象',
+        [fld('connected','boolean'),fld('activeTasks','number'),fld('relay','string')]),
+    ], note('红线：全局代理中继地址为<b>功能性保留</b>项，<b>不要</b>当遗留品牌清理掉。本部署与上游运营方无关联。'))}
+  </div>`;
+}
+
+function renderGroup(r){
+  const room = GROUP_ROOMS[0];
+  return `<div class="flush-wrap"><div class="psl">
+    ${psnav('groupChat',
+      `<div class="slist-group-t">房间</div>` + GROUP_ROOMS.map(x=>`
+        <a class="s-item ${x.roomId===room.roomId?'on':''}" href="#/hermes/group-chat/room/${x.roomId}">
+          <span class="grow"><span class="t">${esc(x.name)}</span>
+          <span class="m"><span class="code xs">${x.inviteCode}</span><span>${x.totalTokens.toLocaleString()} tok</span><span>${x.members} agents</span></span></span>
+          <button class="icon-btn" title="删除房间">✕</button></a>`).join(''))}
+    <div class="chat-main">
+      <div class="chat-header">
+        <button class="icon-btn" title="折叠">⇤</button>
+        <div class="grow"><div class="ttl">${esc(room.name)}</div>
+          <div class="xs fnt mono">${room.roomId} · ${room.inviteCode}</div></div>
+        <span class="avatar-stack">${GROUP_MEMBERS.map(m=>`<span class="avatar" title="${esc(m.name)}">${m.avatar}</span>`).join('')}</span>
+        <div class="right">
+          <button class="btn sm ghost">＋ 添加 agent</button>
+          <button class="icon-btn" title="压缩配置">⤢</button>
+          <button class="icon-btn" title="清空上下文">⌫</button>
+          <span class="tag">${room.members} members</span>
+          <span class="led ok" title="connected"></span>
+        </div>
+      </div>
+      <div class="chat-body"><div class="chat-body-inner">
+        ${note(`群聊为<b>两栏</b>布局（room-sidebar + chat-main），<b>无右侧面板</b>。输入框 toolbar 仅 2 个左按钮（附件 · 设置齿轮）+ 发送键，<b>无</b> context 占用条 / reasoning-effort / model 按钮 / 语音控件；额外支持 <span class="code">@</span> mention 下拉。`,'info')}
+        ${bubbleHtml({role:'user',content:'@ops-copilot 先看一下昨晚的断连日志，@log-watcher 补充 broker 侧。',ts:1759013400})}
+        ${bubbleHtml({role:'assistant',content:'ops-copilot：已拉取 02:00–03:00 的 server 日志，命中 4 次 `ECONNRESET`，均发生在空闲 58s 后。',ts:1759013460})}
+        ${bubbleHtml({role:'assistant',content:'log-watcher：broker 侧同时段无异常，连接是被对端先关的，不是 broker 主动断。',ts:1759013520})}
+        ${bubbleHtml({role:'moa',content:'moa 汇总：空闲超时被代理层静默回收，建议把 proxy_read_timeout 提到 3600s 并加 keepalive。',ts:1759013640})}
+        <div class="row g6 wrap" style="margin-left:36px">
+          ${['ops-copilot','log-watcher','kb-curator'].map(m=>`<span class="chip">@${m}</span>`).join('')}
+        </div>
+      </div></div>
+      ${chatInput({reasoning:false,model:false,voice:false,context:false,placeholder:'发消息到群聊，输入 @ 提及 agent'})}
+    </div>
+    </div>
+    ${apiPanel([
+      ep('GET','/api/hermes/group-chat/rooms','{ rooms: Room[] }',
+        [fld('roomId','string'),fld('name','string'),fld('inviteCode','string'),fld('totalTokens','number'),
+         fld('members','number'),fld('updatedAt','number · epoch 秒')]),
+      ep('GET','/api/hermes/group-chat/rooms/:roomId','裸 RoomDetail',
+        [fld('members','AgentMember[]'),fld('role','enum','owner|member'),fld('model','string?','成员可各自指定模型'),
+         fld('compression','object','压缩配置'),fld('tokens','number')]),
+      ep('POST','/api/hermes/group-chat/rooms/:roomId/agents','{ ok: true }',
+        [fld('name','string'),fld('model','string'),fld('systemPrompt','string?')]),
+      ep('POST','/api/hermes/group-chat/rooms/:roomId/context/clear','{ ok: true }',[fld('keepRecent','number')]),
+      ep('WS','socket.io namespace /group-chat','事件流',
+        [fldEnum('event',['room:message','agent:status','agent:token','room:compress']),fld('roomId','string')]),
+    ], note('布局为<b>两栏</b>（room-sidebar + chat-main），无右侧面板。成员头像 stack 的 popover、添加 agent、压缩配置、清空上下文、member-count、connection-dot 全部集中在 <span class="code">.chat-header</span> 右侧。'))}
+  </div>`;
+}
+
+function renderWorkflow(r){
+  const run = WORKFLOW_RUNS[0];
+  return `<div class="flush-wrap"><div class="wf">
+    <aside class="wf-chat">
+      <div class="chat-header" style="min-height:48px;padding:8px 12px">
+        <b class="mono sm">工作流对话</b><span class="grow"></span>
+        <span class="tag">wf_release</span>
+      </div>
+      <div class="chat-body" style="padding:12px"><div class="stack">
+        ${bubbleHtml({role:'user',content:'搭一条「检索 → 方案 → 人工确认 → 提交回报」的工作流。',ts:1758990000})}
+        ${bubbleHtml({role:'assistant',content:'已生成 5 个节点，其中 n3 / n5 打开 <span class="code">approvalRequired</span>，运行到这两步会挂起等你审批。',ts:1758990120})}
+        ${note(`节点状态枚举 <span class="code">WorkflowNodeStatus</span>：idle · queued · running · pending_approval · completed · failed · approval_rejected · canceled`,'info')}
+      </div></div>
+      ${chatInput({reasoning:false,voice:false,context:false,placeholder:'描述工作流意图'})}
+    </aside>
+
+    <section class="wf-canvas">
+      <svg class="wf-svg" width="100%" height="100%">
+        ${WORKFLOW_NODES.slice(0,-1).map((n,i)=>`<path d="M 180 ${n.y+96} C 180 ${n.y+130}, 180 ${WORKFLOW_NODES[i+1].y-20}, 180 ${WORKFLOW_NODES[i+1].y}"
+          stroke="oklch(0.805 0.148 188 / .35)" stroke-width="1.5" fill="none"/>`).join('')}
+      </svg>
+      ${WORKFLOW_NODES.map(n=>`
+        <div class="wf-node" style="left:${n.x}px;top:${n.y}px">
+          <span class="port in"></span><span class="port out"></span>
+          <div class="nh"><span class="led ${TAG_CLASS[n.status]??'idle'}"></span>
+            <b class="mono xs">${esc(n.type)}</b>
+            <span class="grow"></span>${statusTag(n.status)}
+            <span class="fnt" style="cursor:grab">⠿</span></div>
+          <div class="nb">
+            ${n.cfg?`
+              <div class="field"><label class="xs">title</label><input class="inp sm" value="${esc(n.cfg.title)}" /></div>
+              <div class="split c2" style="gap:8px">
+                <div class="field"><label class="xs">agent</label><input class="inp sm" value="${esc(n.cfg.agent)}" /></div>
+                <div class="field"><label class="xs">provider / model</label>
+                  <select class="sel sm"><option>${esc(n.cfg.provider)} / ${esc(n.cfg.model)}</option></select></div>
+              </div>
+              <div class="row-b"><span class="xs mut">approvalRequired</span>${sw(n.cfg.approvalRequired,'sm')}</div>
+              ${n.cfg.skills.length?`<div><div class="xs mut mb8">skills</div><div class="row g4 wrap">${n.cfg.skills.map(s=>chip(s,true)).join('')}</div></div>`:''}
+              <div class="field"><label class="xs">prompt</label><textarea class="inp" rows="3">${esc(n.cfg.prompt)}</textarea></div>
+              ${n.cfg.images.length?`<div class="row g4 wrap">${n.cfg.images.map(f=>`<span class="tag acc">▣ ${esc(f.split('/').pop())}</span>`).join('')}</div>`:''}
+            `:`<div class="sm mut">${esc(n.title)}</div>`}
+          </div>
+        </div>`).join('')}
+      <div style="position:absolute;right:14px;bottom:14px" class="row g6">
+        ${btn('−',{cls:'sm ghost'})}${btn('适应',{cls:'sm ghost'})}${btn('＋',{cls:'sm ghost'})}
+      </div>
+    </section>
+
+    <aside class="wf-runs">
+      <div class="psnav-tabs"><b class="mono sm">Runs</b><span class="grow"></span>
+        <button class="icon-btn" data-act="runs">✕</button></div>
+      <div class="psnav-list">${WORKFLOW_RUNS.map(x=>`
+        <div class="row-i" style="flex-direction:column;align-items:stretch;gap:6px;margin-bottom:6px">
+          <div class="row"><b class="mono xs">${x.id}</b>${statusTag(x.status)}<span class="grow"></span><span class="fnt xs">${x.triggeredBy}</span></div>
+          <div class="xs fnt mono">${tsMs(x.startedAt).slice(5,16)}${x.endedAt?` → ${tsMs(x.endedAt).slice(11,16)}`:''}</div>
+          <div class="row g4 wrap">${Object.entries(x.nodeStates).map(([k,v])=>
+            `<span class="tag ${TAG_CLASS[v]??''}" title="${k}=${v}">${k}:${v}</span>`).join('')}</div>
+          ${x.error?`<div class="term" style="font-size:10.5px;padding:6px 8px;color:var(--err)">${esc(x.error)}</div>`:''}
+        </div>`).join('')}</div>
+    </aside>
+  </div>
+  ${apiPanel([
+    ep('GET','/api/hermes/workflows','裸数组 Workflow[]（注意：不是 { workflows: [...] }）',
+      [fld('id','string'),fld('name','string'),fld('nodes','WorkflowNode[]'),fld('edges','WorkflowEdge[]')]),
+    ep('GET','/api/hermes/workflows/runs','{ runs: WorkflowRun[] }',
+      [fld('id','string'),fldEnum('status',['queued','running','completed','failed','canceled'],
+        'WorkflowRunStatus：API 只有 5 值，比前端 WorkflowNodeStatus 少 approval_rejected'),
+       fld('nodeStates',Object.values(run.nodeStates).join(' / '),'WorkflowRunNodeStatus 7 值：queued|running|completed|failed|blocked|approval_rejected|canceled'),
+       fld('startedAt','ISO 字符串 · 不是 epoch'),fld('endedAt','ISO 字符串?'),fld('triggeredBy','enum')]),
+    ep('POST','/api/hermes/workflows/runs','裸 WorkflowRun（写接口也返回裸对象，不是 {ok:true}）',
+      [fld('workflowId','string'),fld('triggeredBy','enum','manual|cron|schedule')]),
+    ep('POST','/api/hermes/workflows/runs/:runId/approve','裸对象',
+      [fld('nodeId','string'),fld('choice','enum','once|session|always|deny')]),
+  ], note('三列布局：<b>workflow-chat-panel（可拖拽，默认 560px）· VueFlow canvas（节点 280×420）· runs-panel（280px）</b>。header actions 顺序：runs 面板 · 添加节点 · 保存 · <b>开始执行 ▶</b>。'))}
+  </div>`;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   9. 视图 · 任务 / 看板 / 频道
+   ════════════════════════════════════════════════════════════════════════════ */
+const JOBS_API = () => [
+  ep('GET','/api/hermes/jobs','{ jobs: Job[] }（命名集合）',
+    [fld('id','string','job_*'),fld('name','string'),fldEnum('state',['idle','paused','running'],'Job.state：3 值'),
+     fld('schedule','{ kind, expr }'),fldEnum('schedule.kind',['interval','cron','once']),
+     fld('provider','string'),fld('model','string'),
+     fld('lastRun','ISO 字符串 · 不是 epoch'),fld('nextRun','ISO 字符串?'),
+     fld('deliver','{ kind, target }'),fld('repeat','string')]),
+  ep('GET','/api/hermes/jobs/:id/history','{ runs: JobRun[] }',
+    [fld('startedAt','ISO 字符串'),fld('finishedAt','ISO 字符串?'),fld('durationMs','number'),
+     fldEnum('status',['running','completed','failed']),fld('tokens','number'),fld('costUsd','number'),fld('error','string?')]),
+  ep('POST','/api/hermes/jobs/:id/run','{ ok: true }',[fld('jobId','string','立即运行')]),
+  ep('POST','/api/hermes/jobs/:id/pause','{ success: true }',[fld('jobId','string','注意：成功标志是 success 不是 ok')]),
+  ep('POST','/api/hermes/jobs/:id/resume','{ success: true }',[]),
+];
+
+function renderJobs(){
+  const cards = JOBS.map(j=>`
+    <div class="panel" style="margin-bottom:10px">
+      <div class="panel-h">
+        <span class="led ${TAG_CLASS[j.state]}"></span>
+        <h3>${esc(j.name)}</h3>
+        <span class="meta mono">${j.id}</span>
+        <span class="right">
+          ${j.state==='running'
+            ? btn('暂停',{cls:'sm ghost'})+btn('立即运行',{cls:'sm ghost'})
+            : j.state==='paused' ? btn('恢复',{cls:'sm ghost'})+btn('立即运行',{cls:'sm ghost'})
+            : btn('立即运行',{cls:'sm ghost'})}
+          ${btn('编辑',{cls:'sm ghost'})}${btn('删除',{cls:'sm danger ghost'})}
+        </span>
+      </div>
+      <div class="panel-b">
+        <div class="grid4">
+          ${field('schedule', `<div class="row g6"><span class="tag">${j.schedule.kind}</span><code class="code">${esc(j.schedule.expr)}</code></div>`)}
+          ${field('provider / model', `<div class="row g6"><span class="tag">${esc(j.provider)}</span><code class="code">${esc(j.model)}</code></div>`)}
+          ${field('lastRun', `<span class="mono sm mut">${j.lastRun?j.lastRun.replace('T',' ').slice(0,19):'—'}</span>`)}
+          ${field('nextRun', `<span class="mono sm ${j.state==='paused'?'':'mut'}">${j.nextRun?j.nextRun.replace('T',' ').slice(0,19):'— 暂停中'}</span>`)}
+          ${field('deliver', `<div class="row g6"><span class="tag">${j.deliver.kind}</span><code class="code">${esc(j.deliver.target)}</code></div>`)}
+          ${field('repeat', `<span class="mono sm mut">${esc(j.repeat)}</span>`)}
+        </div>
+      </div>
+    </div>`).join('');
+
+  const runs = JOB_RUNS.map(x=>`
+    <div class="collapse-h"><span class="tw">▸</span>
+      <span class="led ${TAG_CLASS[x.status]}"></span><b class="mono sm">${x.id}</b>
+      ${statusTag(x.status)}
+      <span class="grow"></span>
+      <span class="xs fnt mono">${x.startedAt.replace('T',' ').slice(5,19)}</span>
+      <span class="tag">${(x.durationMs/1000).toFixed(0)}s</span>
+      <span class="tag">${x.tokens.toLocaleString()} tok</span>
+      <span class="tag">$${x.costUsd.toFixed(3)}</span>
+    </div>
+    ${x.error?`<div class="collapse-b tight"><div class="term" style="color:var(--err)">${esc(x.error)}</div></div>`:''}`).join('');
+
+  return `<div class="view-pad">
+    ${head('定时任务','按 schedule 自动触发的 Agent 任务。<b>上下分栏</b>：上方任务列表，下方 <span class="code">JobRunHistory</span> 手风琴。',
+      btn('排序：名称',{cls:'sm ghost'})+`<span class="fnt">/</span>`+btn('排序：时间',{cls:'sm ghost'})+
+      `<span class="fnt">|</span>`+btn('＋ 新建任务',{cls:'pri'}))}
+    ${secT('任务列表 · '+JOBS.length)}
+    ${cards}
+    ${secT('运行历史 · JobRunHistory')}
+    <div class="collapse" style="margin-bottom:6px">
+      ${runs}
+      <div class="collapse-b">
+        ${note('运行历史用 <span class="code">a-collapse</span> 手风琴，默认折叠；失败项展开即显示 <span class="code">error</span> 原文。','info')}
+      </div>
+    </div>
+    ${apiPanel(JOBS_API(), note('时间戳注意：<b>jobs / cron-history 用 ISO 字符串</b>，而 sessions / kanban / logs 用 epoch 秒，skills mtime / memory mtime 用 epoch 毫秒。'))}
+  </div>`;
+}
+
+const KB_COLUMNS = ['triage','todo','scheduled','ready','running','blocked','review','done','archived'];
+function renderKanban(){
+  const filters = `${sel([['x','全部看板：Hermes UI 主线 (37)']],'sm')}
+    ${btn('＋ 新增',{cls:'sm ghost'})}${btn('归档',{cls:'sm ghost'})}${btn('Dispatch',{cls:'sm ghost'})}
+    ${sel([['x','状态：全部']],'sm')}${sel([['x','负责人：全部']],'sm')}
+    ${btn('＋ 创建任务',{cls:'pri sm'})}`;
+  const strip = `<div class="stat-strip mb12">
+    ${KB_COLUMNS.map(s=>`<span class="stat-chip"><span class="led ${TAG_CLASS[s]}"></span>${s}
+      <b>${KANBAN_TASKS.filter(t=>t.status===s).length}</b></span>`).join('')}
+    <span class="stat-chip total">total <b>${KANBAN_TASKS.length}</b></span></div>`;
+
+  const board = `<div class="kanban-scroll"><div class="kanban-grid">
+    ${KB_COLUMNS.map(col=>{
+      const items = KANBAN_TASKS.filter(t=>t.status===col);
+      return `<div class="kcol">
+        <div class="kcol-h"><span class="led ${TAG_CLASS[col]}"></span>${col}<span class="cnt">${items.length}</span></div>
+        <div class="kcol-b">${items.map(t=>`
+          <div class="kcard">
+            <div class="kt">${esc(t.title)}</div>
+            <div class="km"><span class="tag">${t.priority}</span>${t.assignee?`<span class="tag">${esc(t.assignee)}</span>`:'<span class="tag warn">未分配</span>'}
+              ${t.labels.map(l=>`<span class="tag acc">${esc(l)}</span>`).join('')}</div>
+            <div class="km"><span class="mono">${t.id}</span><span class="grow"></span><span>${t.message_count} 条</span><span>$${t.estimated_cost_usd.toFixed(3)}</span></div>
+          </div>`).join('')}</div>
+      </div>`;
+    }).join('')}
+  </div></div>`;
+
+  const t = KANBAN_TASKS[0];
+  const drawer = `<div class="panel">
+    <div class="panel-h"><h3>KanbanTaskDrawer</h3><span class="meta">420px · right</span>
+      <span class="right">${t.id}${statusTag(t.status)}<button class="icon-btn">✕</button></span></div>
+    <div class="panel-b"><div class="stack">
+      ${kv([
+        ['id',`<code class="code">${t.id}</code>`],['kanbanId',`<code class="code">${t.kanbanId}</code>`],
+        ['title',esc(t.title)],['status',statusTag(t.status)],['priority',`<span class="tag">${t.priority}</span>`],
+        ['assignee',t.assignee??'<span class="mut">未分配</span>'],
+        ['labels',t.labels.map(l=>`<span class="tag acc">${esc(l)}</span>`).join(' ')],
+        ['created_at',`<span class="mono sm">${tsSec(t.created_at)}</span><span class="ft">epoch 秒</span>`],
+        ['updated_at',`<span class="mono sm">${tsSec(t.updated_at)}</span>`],
+        ['message_count',`<span class="mono">${t.message_count}</span>`],
+        ['estimated_cost_usd',`<span class="mono">$${t.estimated_cost_usd.toFixed(3)}</span>`],
+      ])}
+      ${secT('Body')}<div class="sm" style="white-space:pre-wrap">${esc(t.body)}</div>
+      ${secT('Result')}<div class="sm mut" style="white-space:pre-wrap">${esc(t.result||'—')}</div>
+      ${secT('Actions')}<div class="row g6 wrap">${KB_COLUMNS.slice(0,8).map(s=>btn(s,{cls:'sm ghost'})).join('')}</div>
+      ${secT('Related Sessions')}<div class="stack tight">
+        ${t.sessionIds.map(id=>`<a class="row-i" href="#/hermes/session/${id}"><span class="ttl mono">${id}</span>
+          <span class="rt">${statusTag('done','api_server')}<span class="fnt xs">26 条</span></span></a>`).join('')||'<div class="sm mut">无关联会话</div>'}
+      </div>
+      ${secT('Runs')}<div class="sm mut">暂无 dispatch 运行记录</div>
+      ${secT('Comments')}<div class="stack tight">
+        <div class="row-i" style="align-items:flex-start"><span class="avatar">JK</span>
+          <span class="grow"><span class="ttl">窄屏复现了，附上截图。</span>
+            <span class="sub mono">${tsSec(1758992400)}</span></span></div>
+        <div class="row-i" style="align-items:flex-start"><span class="avatar">AI</span>
+          <span class="grow"><span class="ttl">已定位为 grid 固定列宽导致。</span>
+            <span class="sub mono">${tsSec(1758993000)}</span></span></div>
+      </div>
+      ${field('Add Comment', `<input class="inp" placeholder="写评论，@ 提及成员" />`)}
+      ${secT('Operations')}<div class="row g6 wrap">
+        ${btn('派发会话',{cls:'sm ghost'})}${btn('复制链接',{cls:'sm ghost'})}${btn('删除任务',{cls:'sm danger ghost'})}</div>
+      ${secT('Events')}${table([{t:'Time'},{t:'Event'},{t:'Actor'}],[
+        [tsSec(t.updated_at).slice(5),statusTag('running','status → running'),'system'],
+        [tsSec(1758988800).slice(5),statusTag('review','status → review'),'jack'],
+        [tsSec(1758931200).slice(5),statusTag('todo','created'),'jack'],
+      ])}
+    </div></div>
+  </div>`;
+
+  return `<div class="view-pad">
+    ${head('看板','9 列固定顺序：<span class="code">triage → todo → scheduled → ready → running → blocked → review → done → archived</span>，列序即枚举序。',filters)}
+    ${strip}
+    ${board}
+    ${secT('任务抽屉 · KanbanTaskDrawer')}
+    ${drawer}
+    ${apiPanel([
+      ep('GET','/api/hermes/kanban','{ kanbans: Kanban[] }',
+        [fld('id','string'),fld('name','string'),fld('description','string'),
+         fld('created_at','number · epoch 秒'),fld('updated_at','number · epoch 秒'),fld('taskCount','number')]),
+      ep('GET','/api/hermes/kanban/:id/tasks','{ tasks: KanbanTask[], hasMore }',
+        [fld('id','string','T-142 形式'),fld('status','enum'),
+         fldEnum('status',KB_COLUMNS,'KanbanTaskStatus：9 值，顺序即列序'),
+         fldEnum('priority',['low','medium','high']),fld('assignee','string?'),
+         fld('message_count','number · 蛇形'),fld('estimated_cost_usd','number · 蛇形'),
+         fld('created_at','number · epoch 秒'),fld('updated_at','number · epoch 秒')]),
+      ep('GET','/api/hermes/kanban/:id','裸 KanbanTaskDetail（无外层 key）',
+        [fld('body','string'),fld('result','string'),fld('sessionIds','string[]'),fld('comments','Comment[]'),fld('events','Event[]')]),
+      ep('POST','/api/hermes/kanban/:id/move','{ ok: true }',[fld('taskId','string'),fld('status','enum'),fld('position','number')]),
+      ep('WS','/api/hermes/kanban/events?token=','原生 WebSocket（token 走 query，非 header）',
+        [fldEnum('event',['task:created','task:moved','task:updated','task:deleted'])]),
+    ], note('注意 <span class="code">/kanban/:id</span> 返回<b>裸对象</b>；<span class="code">/kanban</span> 返回命名集合。<span class="code">created_at</span> 是 epoch <b>秒</b>。'))}
+  </div>`;
+}
+
+function renderChannels(){
+  return `<div class="view-pad">
+    ${head('频道','外部消息渠道接入：Slack / Discord / 微信 / 通用 Webhook。未连接渠道不显示“发送测试”。',
+      srch('搜索频道','')+btn('＋ 接入渠道',{cls:'pri'}))}
+    ${kpis([
+      {k:'Total', v:CHANNELS.length, tone:'acc'},
+      {k:'Connected', v:CHANNELS.filter(c=>c.connected).length, tone:'ok'},
+      {k:'Unread', v:CHANNELS.reduce((a,c)=>a+c.unread,0), tone:'warn'},
+      {k:'Members', v:CHANNELS.reduce((a,c)=>a+c.members,0), tone:'info'},
+    ])}
+    ${secT('已接入')}
+    <div class="stack">
+      ${CHANNELS.map(c=>`
+        <div class="row-i">
+          <span class="led ${c.connected?'ok':'err'}"></span>
+          <div class="grow"><div class="ttl">${esc(c.name)}</div>
+            <div class="sub">${esc(c.kind)} · ${c.members} members${c.lastMessageAt?` · 最后消息 ${tsMs(c.lastMessageAt).slice(5,16)}`:' · 从未收到消息'}</div></div>
+          <div class="rt">
+            ${c.unread?`<span class="tag warn">${c.unread} 未读</span>`:''}
+            ${statusTag(c.connected?'connected':'disconnected')}
+            ${btn('配置',{cls:'sm ghost'})}${btn('发消息',{cls:'sm ghost',dis:!c.connected})}
+            ${btn('移除',{cls:'sm danger ghost'})}
+          </div>
+        </div>`).join('')}
+    </div>
+    ${secT('微信 / 二维码绑定')}
+    ${panel('wxQrStatus 状态机','idle → loading → waiting → scaned → confirmed / error / expired',
+      `<div class="row g16 wrap">
+        <div class="dot-grid" style="flex:0 0 168px;height:168px;border-radius:var(--radius);border:1px solid var(--border)"></div>
+        <div class="grow stack">
+          <div class="row g8">${statusTag('confirmed','confirmed')}<span class="sm mut">扫码成功，等待绑定确认</span></div>
+          <div class="term">GET /api/hermes/channels/wechat/qr → { status: "waiting", qrUrl }
+POST /api/hermes/channels/wechat/bind { code } → { ok: true }</div>
+          <div class="row g6 wrap">${['idle','loading','waiting','scaned','confirmed','error','expired'].map(s=>statusTag(s)).join('')}</div>
+        </div>
+      </div>`)}
+    ${apiPanel([
+      ep('GET','/api/hermes/channels','{ channels: Channel[] }',
+        [fld('id','string'),fld('name','string'),fldEnum('kind',['slack','discord','wechat','webhook']),
+         fld('connected','boolean'),fld('members','number'),fld('lastMessageAt','number · epoch 毫秒'),fld('unread','number')]),
+      ep('GET','/api/hermes/channels/wechat/qr','{ status, qrUrl, expiresAt }',
+        [fldEnum('status',['idle','loading','waiting','scaned','confirmed','error','expired'],'wxQrStatus 7 值')]),
+      ep('POST','/api/hermes/channels/wechat/bind','{ ok: true }',[fld('code','string')]),
+      ep('POST','/api/hermes/channels/:id/send','{ success: true }',[fld('text','string'),fld('threadId','string?')]),
+    ])}
+  </div>`;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   10. 视图 · 技能 / 插件 / MCP
+   ════════════════════════════════════════════════════════════════════════════ */
+function renderSkills(){
+  const SRC_DOT = {builtin:'ok',hub:'run',local:'warn',external:'info'};
+  const groups = {};
+  SKILLS.forEach(s=>{ (groups[s.category] ||= []).push(s); });
+  const list = Object.entries(groups).map(([cat, items])=>`
+    <div class="slist-group-t">${esc(cat)}</div>
+    ${items.map(s=>`
+      <div class="row-i" style="margin-bottom:5px">
+        <span class="led ${SRC_DOT[s.source]}"></span>
+        <div class="grow"><div class="ttl">${esc(s.name)}
+          <span class="xs fnt">· ${esc(s.target)}</span></div>
+          <div class="sub">${esc(s.description)}</div></div>
+        <div class="rt">
+          <span class="tag">${s.viewCount.toLocaleString()}</span>
+          <button class="icon-btn" title="删除">✕</button>
+          ${sw(s.enabled,'sm')}
+        </div>
+      </div>`).join('')}`).join('');
+  const archive = `
+    <div class="slist-group-t">已归档</div>
+    <div class="row-i"><span class="grow"><div class="ttl mut">legacy-notes</div>
+      <div class="sub">已停用 · 保留历史统计</div></div>${sw(false,'sm')}</div>`;
+
+  const d = SKILLS[0];
+  const detail = `<div class="panel">
+    <div class="panel-h"><div class="grow">
+        <h3>${esc(d.name)}</h3><span class="meta">${esc(d.category)} · ${d.target}</span></div>
+      <span class="right">
+        <span class="tag">${d.viewCount.toLocaleString()} views</span>
+        <span class="tag">${d.useCount.toLocaleString()} uses</span>
+        <span class="tag warn">✎ ${d.patchCount} patches</span>
+        ${btn('编辑',{cls:'sm ghost'})}${btn('保存',{cls:'sm ghost'})}${btn('取消',{cls:'sm ghost'})}
+      </span></div>
+    <div class="panel-b"><div class="stack">
+      ${kv([
+        ['name',`<code class="code">${esc(d.name)}</code>`],['source',statusTag(d.source==='builtin'?'enabled':'queued',d.source)],
+        ['target',`<span class="tag acc">${d.target}</span>`],['category',esc(d.category)],
+        ['enabled',sw(d.enabled)],['mtime',`<span class="mono sm">${tsMs(d.mtime)}</span><span class="ft">epoch 毫秒</span>`],
+        ['viewCount',`<span class="mono">${d.viewCount}</span>`],['useCount',`<span class="mono">${d.useCount}</span>`],
+        ['patchCount',`<span class="mono">${d.patchCount}</span>`],
+      ])}
+      ${secT('内容 · Markdown')}
+      <div class="term" style="max-height:200px">---
+name: ${d.name}
+description: ${d.description}
+target: ${d.target}
+---
+
+# ${d.name}
+
+1. 解析输入，抽取关键约束。
+2. 按 ${esc(d.target)} 的工具约定分派子任务。
+3. 汇总为结构化输出，附引用锚点。
+
+> 触发条件：用户显式调用，或任务分类命中 ${esc(d.category)}。</div>
+      ${secT('附件文件 · .detail-files')}
+      <div class="stack tight">${d.files.map(f=>`
+        <div class="row-i" style="padding:6px 10px"><span class="mono xs">▤</span>
+          <span class="ttl mono grow">${esc(f)}</span><span class="rt fnt xs">${(f.length*0.7+1).toFixed(1)} KB</span></div>`).join('')}</div>
+    </div></div>`;
+
+  const legend = ['builtin','hub','local','external','modified ✎']
+    .map(s=>`<span class="row g6 xs mut"><span class="led ${SRC_DOT[s.replace(' ✎','')]??'warn'}"></span>${s}</span>`).join('');
+
+  return `<div class="view-pad">
+    ${head('技能','<b>两窗格</b>布局：左 SkillList（280px，按分类分组 + 末尾归档区）· 右 SkillDetail。“附件文件”在 SkillDetail 内部。',
+      `<div class="row g8 wrap"><span class="row g10 wrap">${legend}</span>
+       ${btn('写审批',{cls:'sm ghost'})}${btn('导入',{cls:'sm ghost'})}${btn('管理外部目录',{cls:'sm ghost'})}
+       ${srch('搜索技能')}</div>`)}
+    <div class="split side-l" style="align-items:start">
+      <div class="panel"><div class="panel-h"><h3>SkillList</h3><span class="meta">${SKILLS.length} 项</span></div>
+        <div class="panel-b">${list}${archive}</div></div>
+      <div>${detail}</div>
+    </div>
+    ${apiPanel([
+      ep('GET','/api/hermes/skills','裸数组 Skill[]（无外层 key）',
+        [fld('name','string'),fldEnum('source',['builtin','hub','local','external'],'SkillSource：4 值；UI 额外追加 modified ✎ 表示本地已改'),
+         fldEnum('target',['hermes','claude','codex'],'SkillTarget：3 值'),fld('category','string'),
+         fld('enabled','boolean'),fld('description','string'),
+         fld('mtime','number · epoch 毫秒（注意不是秒）'),
+         fld('viewCount','number'),fld('useCount','number'),fld('patchCount','number')]),
+      ep('GET','/api/hermes/skills/:name','裸 SkillDetail',[fld('content','string · Markdown'),fld('files','string[]')]),
+      ep('POST','/api/hermes/skills/:name','{ ok: true }',[fld('content','string'),fld('enabled','boolean'),fld('target','enum')]),
+      ep('POST','/api/hermes/skills/import','{ success: true, imported: number }',[fld('path','string')]),
+      ep('GET','/api/hermes/skills/external-dirs','{ dirs: string[] }',[]),
+    ])}
+  </div>`;
+}
+
+function renderPlugins(){
+  const cards = PLUGINS.map(p=>`
+    <div class="tcard">
+      <div class="th"><b>${esc(p.name)}</b><span class="tag">${esc(p.version)}</span>
+        <span class="right">${statusTag(p.configStatus,'config: '+p.configStatus)}
+          ${statusTag(p.effectiveStatus,'effective: '+p.effectiveStatus)}</span></div>
+      <div class="desc">${esc(p.description)}</div>
+      <div class="row g4 wrap">
+        ${p.tool_names_registered.length
+          ? p.tool_names_registered.map(t=>`<span class="tag acc">${esc(t)}</span>`).join('')
+          : '<span class="sm fnt">未注册工具</span>'}
+      </div>
+      <div class="row-b">
+        <span class="xs fnt">write approval: ${p.needsWriteApproval?'required':'—'}</span>
+        <span class="row g4">${sw(p.configStatus==='enabled')}</span>
+      </div>
+    </div>`).join('');
+  return `<div class="view-pad">
+    ${head('插件','<b>配置态</b>与<b>生效态</b>是两套枚举，不要混用：配置是你设的，生效是运行时算出来的。',
+      btn('＋ 安装插件',{cls:'pri'}))}
+    ${kpis([
+      {k:'Installed', v:PLUGINS.length, tone:'acc'},
+      {k:'Enabled', v:PLUGINS.filter(p=>p.configStatus==='enabled').length, tone:'ok'},
+      {k:'Tools', v:PLUGINS.reduce((a,p)=>a+p.tool_names_registered.length,0), tone:'info'},
+      {k:'Needs Approval', v:PLUGINS.filter(p=>p.needsWriteApproval).length, tone:'warn'},
+    ])}
+    ${secT('插件矩阵')}
+    <div class="grid3">${cards}</div>
+    ${secT('状态枚举对照')}
+    ${table([{t:'枚举'},{t:'取值'},{t:'含义'}],[
+      ['PluginConfigStatus', PLUGINS.map(p=>p.configStatus).map(s=>statusTag(s)).join(' '), '用户在配置里设定的状态'],
+      ['PluginEffectiveStatus', PLUGINS.map(p=>p.effectiveStatus).map(s=>statusTag(s)).join(' '), '运行时解析后的真实状态'],
+    ])}
+    ${apiPanel([
+      ep('GET','/api/hermes/plugins','{ plugins: Plugin[] }',
+        [fld('id','string','plg_*'),fld('name','string'),fld('version','string'),
+         fldEnum('configStatus',['enabled','disabled','not-enabled','auto','provider-managed'],'PluginConfigStatus：5 值'),
+         fldEnum('effectiveStatus',['enabled','disabled','inactive','auto-active','provider-managed'],'PluginEffectiveStatus：5 值，与上者不同'),
+         fld('tool_names_registered','string[]','蛇形！插件是少数例外'),
+         fld('needsWriteApproval','boolean')]),
+      ep('POST','/api/hermes/plugins/:id/config','裸对象（写接口也返回裸对象，不是 {ok:true}）',
+        [fldEnum('configStatus',['enabled','disabled','not-enabled','auto','provider-managed'])]),
+      ep('POST','/api/hermes/plugins/install','{ success: true }',[fld('source','string'),fld('name','string')]),
+      ep('POST','/api/hermes/plugins/:id/reload','{ ok: true }',[]),
+    ], note('<b>字段命名例外</b>：<span class="code">plugins / mcp / stt-tts</span> 这几个模块用驼峰，但 <span class="code">tool_names_registered</span> 是蛇形。'))}
+  </div>`;
+}
+
+function renderMcp(){
+  const sum = kpis([
+    {k:'Total', v:MCP_SERVERS.length, tone:'acc'},
+    {k:'Connected', v:MCP_SERVERS.filter(s=>s.connected).length, tone:'ok'},
+    {k:'Disconnected', v:MCP_SERVERS.filter(s=>!s.connected).length, tone:'err'},
+    {k:'Tools', v:MCP_SERVERS.reduce((a,s)=>a+s.tools_registered,0), tone:'info'},
+  ]);
+  const cards = MCP_SERVERS.map(s=>`
+    <div class="panel">
+      <div class="panel-h">
+        <b class="mono" style="font-size:13px">${esc(s.name)}</b>
+        <span class="tag">${esc(s.transport)}</span>
+        <span class="right">${statusTag(s.connected?'connected':'disconnected')}
+          <span class="tag">${s.tools_registered} tools</span>${sw(s.enabled,'sm')}</span>
+      </div>
+      <div class="panel-b"><div class="stack">
+        ${s.error?`<div class="term" style="color:var(--err);padding:8px 10px">${esc(s.error)}</div>`:''}
+        <div class="term" style="padding:7px 10px;font-size:11px">${esc(s.command)}</div>
+        <div class="row g4 wrap">
+          ${s.tools.length?s.tools.map(t=>`<span class="tag acc">${esc(t)}</span>`).join(''):'<span class="sm fnt">无工具</span>'}
+        </div>
+      </div></div>
+      <div class="panel-b" style="border-top:1px solid var(--hairline);padding:9px 12px">
+        <div class="row g6 wrap">
+          ${btn('编辑',{cls:'sm ghost'})}${btn('管理工具',{cls:'sm ghost'})}${btn('测试',{cls:'sm ghost'})}
+          ${btn('重载',{cls:'sm ghost'})}${btn('移除',{cls:'sm danger ghost'})}
+        </div>
+      </div>
+    </div>`).join('');
+  return `<div class="view-pad">
+    ${head('MCP 服务器','header 只有一个「刷新」；content 顺序固定 = alert → summary-grid(4) → toolbar → servers-grid。',
+      btn('⟳ 刷新',{cls:'ghost'}))}
+    ${note('有 2 个服务器未连接，工具调用会直接失败；「全部重载」会串行重连。','warn')}
+    <div class="mt12">${sum}</div>
+    <div class="row g8 mt16 mb12">
+      ${srch('搜索服务器','')}
+      <span class="grow"></span>
+      ${btn('全部重载',{cls:'ghost'})}${btn('＋ 添加服务器',{cls:'pri'})}
+    </div>
+    <div class="grid2">${cards}</div>
+    ${apiPanel([
+      ep('GET','/api/hermes/mcp/servers','裸 McpServerInfo[]（无外层 key）',
+        [fld('id','string'),fld('name','string'),
+         fldEnum('transport',['stdio','http','sse'],'McpServerInfo.transport：3 值'),
+         fld('connected','boolean'),fld('tools_registered','number · 蛇形'),
+         fld('command','string'),fld('error','string?'),fld('enabled','boolean')]),
+      ep('POST','/api/hermes/mcp/servers','裸对象（写接口也返回裸对象，不是 {ok:true}）',
+        [fld('name','string'),fldEnum('transport',['stdio','http','sse']),fld('command','string'),fld('enabled','boolean')]),
+      ep('POST','/api/hermes/mcp/servers/:id/reload','{ ok: true }',[]),
+      ep('POST','/api/hermes/mcp/servers/reload-all','{ success: true, reloaded: number }',[]),
+      ep('POST','/api/hermes/mcp/servers/:id/test','{ ok: true, latencyMs: number }',[]),
+      ep('GET','/api/hermes/mcp/servers/:id/tools','{ tools: { name, enabled }[] }',[]),
+    ])}
+  </div>`;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   11. 视图 · Petdex / 记忆 / 模型 / 文件
+   ════════════════════════════════════════════════════════════════════════════ */
+function renderPetdex(){
+  const m = PETDEX.manifest;
+  const active = m.species.find(s=>s.id===m.active);
+  const hero = `<div class="panel"><div class="panel-h"><h3>${esc(active.name)}</h3>
+      <span class="meta mono">${m.version}</span>
+      <span class="right">${statusTag('adopted','active')}${btn('切换',{cls:'sm ghost'})}</span></div>
+    <div class="panel-b"><div class="row g16 wrap">
+      <div class="dot-grid" style="flex:0 0 152px;height:152px;border-radius:var(--radius-lg);
+        border:1px solid oklch(0.805 0.148 188/.3);display:grid;place-items:center;
+        font:600 34px/1 var(--font-display);color:var(--accent);text-shadow:0 0 22px oklch(0.805 0.148 188/.5)">${esc(active.id.slice(0,2).toUpperCase())}</div>
+      <div class="grow stack">
+        ${progline(`LV ${active.level}`, active.exp/active.expNext*100, `${active.exp.toLocaleString()} / ${active.expNext.toLocaleString()}`)}
+        <div class="row g6 wrap">
+          <span class="tag">${esc(active.rarity)}</span>
+          <span class="tag acc">${esc(active.element)}</span>
+          ${active.skills.map(s=>chip(s,true)).join('')}
+        </div>
+        ${progline('HP', active.stats.hp, String(active.stats.hp))}
+        ${progline('ATK', active.stats.atk, String(active.stats.atk))}
+        ${progline('DEF', active.stats.def, String(active.stats.def))}
+        ${progline('SPD', active.stats.spd, String(active.stats.spd))}
+      </div>
+    </div></div></div>`;
+  const dex = m.species.map(s=>`
+    <div class="tcard" style="${s.id===m.active?'border-color:oklch(0.805 0.148 188/.45)':''}">
+      <div class="th"><b>${esc(s.name)}</b><span class="tag">${esc(s.rarity)}</span>
+        <span class="right">${s.id===m.active?statusTag('adopted','active'):(s.owner?statusTag('connected','owned'):statusTag('idle','未领养'))}</span></div>
+      <div class="sm mut">${esc(s.id)} · ${esc(s.element)} · LV ${s.level}</div>
+      ${progline('EXP', s.exp/s.expNext*100, `${(s.exp/s.expNext*100).toFixed(0)}%`)}
+      <div class="row g4 wrap">${s.skills.map(x=>`<span class="tag acc">${esc(x)}</span>`).join('')}</div>
+      <div class="row g6">${s.owner?'':`${btn('领养',{cls:'sm ghost'})}`}${btn('详情',{cls:'sm ghost'})}</div>
+    </div>`).join('');
+  return `<div class="view-pad">
+    ${head('Petdex','养成面板。<b>装饰位面</b>：所有背景层 <span class="code">pointer-events: none</span>，不承载任何信息或交互（AGENTS.md 红线）。',
+      btn('图鉴',{cls:'ghost'})+btn('商店',{cls:'ghost'}))}
+    ${hero}
+    ${secT('图鉴 · species')}
+    <div class="grid3">${dex}</div>
+    ${apiPanel([
+      ep('GET','/api/hermes/petdex/manifest','裸对象（未收录于 openapi.json，以 routes/*.ts 为准）',
+        [fld('version','string'),fld('active','string'),fld('species','Species[]'),
+         fld('id','string'),fld('name','string'),fldEnum('rarity',['common','rare','epic']),
+         fld('element','enum'),fld('level','number'),fld('exp','number'),fld('expNext','number'),
+         fld('stats','{ hp, atk, def, spd }'),fld('skills','string[]'),fld('owner','string?'),
+         fld('updatedAt','number · epoch 毫秒')]),
+      ep('GET','/api/hermes/pets/active','{ pet: Pet | null }',[fld('pet','object?')]),
+      ep('POST','/api/hermes/pets/adopt','裸 Pet',
+        [fld('speciesId','string'),fld('name','string?'),fld('owner','string')]),
+      ep('GET','/api/hermes/petdex/asset/:id','二进制资源',[fld('Accept','image/png','走 URL，不走 JSON 信封')]),
+    ], note('ArkScope vendor（<span class="code">packages/client/src/vendor/arkscore/</span>）是<b>纯装饰</b>：仅用于登录页标题、Journey 图背景、首屏/空状态。装饰层一律 <span class="code">pointer-events: none</span>，绝不进入聊天、表单、表格或点击密集区。'))}
+  </div>`;
+}
+
+/* 记忆：三张卡片（记忆 / 用户画像 / 灵魂），卡片内只显示摘要，不整篇铺开。
+   点「修改」弹出对话框编辑全文，底部 确认 / 取消。
+   契约不变：GET 返回三段全文，POST 整文件覆盖。 */
+function renderMemory(){
+  const card = (key, doc) => {
+    const plain = String(doc.body||'').replace(/§/g,' ').replace(/\s+/g,' ').trim();
+    return `
+    <article class="memcard" data-mem="${key}">
+      <header class="memcard-h">
+        <span class="memcard-t"><span class="mi">${doc.icon}</span>${esc(doc.title)}</span>
+        <button class="btn sm ghost memcard-edit" data-act="mem-open" data-sec="${key}">✎ 修改</button>
+      </header>
+      <div class="memcard-b">
+        <p class="memcard-sum">${esc(plain.slice(0,120))}${plain.length>120?'…':''}</p>
+        <div class="memcard-meta">
+          <span class="mono xs mut">${esc(doc.file)}</span>
+          <span class="grow"></span>
+          <span class="xs fnt">${doc.mtime?new Date(doc.mtime).toLocaleString('zh-CN',{month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'}):'—'}</span>
+        </div>
+      </div>
+      <div class="memcard-bar"><span class="meter"><i style="width:${clamp(Math.round(String(doc.body||'').length/28),3,100)}%"></i></span>
+        <span class="xs fnt mut">${String(doc.body||'').length} 字符</span></div>
+    </article>`;
+  };
+
+  return `<div class="view-pad">
+    ${head('记忆','三段长期记忆的摘要视图。点「修改」在弹窗里编辑全文，保存后整文件覆盖写入对应的 <span class="code">.md</span>。')}
+    <div class="memcards">
+      ${card('memory',MEMORY_DOCS.memory)}
+      ${card('user',MEMORY_DOCS.user)}
+      ${card('soul',MEMORY_DOCS.soul)}
+    </div>
+    ${apiPanel([
+      ep('GET','/api/hermes/memory','裸对象（无外层 key）',
+        [fld('memory','string','MEMORY.md 全文，§ 为段落分隔'),
+         fld('user','string','USER.md 全文'),
+         fld('soul','string','SOUL.md 全文'),
+         fld('memory_mtime','number | null','epoch 毫秒，文件不存在时为 null'),
+         fld('user_mtime','number | null','epoch 毫秒'),
+         fld('soul_mtime','number | null','epoch 毫秒')]),
+      ep('POST','/api/hermes/memory','{ success: true }',
+        [fldEnum('section',['memory','user','soul'],'决定写哪个文件'),
+         fld('content','string','整文件覆盖写入，不是追加')]),
+    ], note('这是<b>三个固定文件</b>的整文件读写，<b>没有</b>条目 id / kind / scope / tags / pinned / 搜索 / 新增 / 删除。<span class="code">§</span> 在前端 <span class="code">replace(/§/g, "\\n\\n")</span> 后交给 MarkdownRenderer。<span class="code">soul</span> 落在 profile 根目录，其余两个在 <span class="code">memories/</span> 子目录；POST 时若 <span class="code">memories/</span> 不存在会先 <span class="code">mkdir -p</span>。失败返回 <span class="code">400 { error }</span> 或 <span class="code">500 { error }</span>。'))}
+    <div class="modal" data-modal hidden>
+      <div class="modal-mask" data-act="mem-close"></div>
+      <div class="modal-box" role="dialog" aria-modal="true">
+        <div class="modal-h">
+          <b class="mono" id="mem-modal-title">修改</b>
+          <span class="grow"></span>
+          <button class="icon-btn" data-act="mem-close" title="关闭">✕</button>
+        </div>
+        <div class="modal-b">
+          <div class="kv mb8"><span class="k">写入文件</span><span class="v mono sm" id="mem-modal-file">—</span></div>
+          <textarea id="mem-modal-ta" class="mem-ta" spellcheck="false"
+            placeholder="Markdown 内容，空行用 § 表示"></textarea>
+        </div>
+        <div class="modal-f">
+          <button class="btn ghost" data-act="mem-close">取消</button>
+          <button class="btn pri" data-act="mem-ok">确认</button>
+        </div>
+      </div>
+    </div>
+  </div>`;
+}
+
+function renderModels(){
+  const tabsBar = tabs([['general','通用模型'],['auxiliary','辅助模型'],['combination','组合编排']],'general');
+  const cards = MODELS.list.map(p=>`
+    <div class="panel">
+      <div class="panel-h">
+        <b class="mono" style="font-size:13px">${esc(p.provider)}</b>
+        <span class="tag ${p.kind==='default'?'acc':''}">${p.kind}</span>
+        <span class="right">${p.kind==='default'?statusTag('enabled','default'):btn('设为默认',{cls:'sm ghost'})}</span>
+      </div>
+      <div class="panel-b"><div class="stack">
+        ${kv([
+          ['provider',`<code class="code">${esc(p.provider)}</code>`],
+          ['base_url',`<code class="code">${esc(p.base_url)}</code>`],
+          ['models',`${p.models.length} 个`],
+          ['defaultModel',`<code class="code">${esc(p.defaultModel)}</code>`],
+          ['aliases',Object.keys(p.aliases).length?Object.entries(p.aliases).map(([k,v])=>
+            `<span class="chip">${esc(k)} → ${esc(v)}</span>`).join(' '):'<span class="mut">无</span>'],
+        ])}
+        <div class="row g4 wrap">
+          ${p.models.slice(0,20).map(m=>`<span class="tag ${m===p.defaultModel?'acc':''}">${esc(m)}</span>`).join('')}
+          ${p.models.length>20?`<span class="tag">+${p.models.length-20}</span>`:''}
+        </div>
+      </div></div>
+      <div class="panel-b" style="border-top:1px solid var(--hairline);padding:9px 12px">
+        <div class="row g6 wrap">
+          ${btn('管理别名',{cls:'sm ghost'})}${btn('管理可见模型',{cls:'sm ghost'})}${btn('删除',{cls:'sm danger ghost'})}
+        </div>
+      </div>
+    </div>`).join('');
+  const aux = MODELS.auxiliary.map(a=>`
+    <div class="row-i">${a.builtin?statusTag('auto-active','builtin'):statusTag('disabled','custom')}
+      <div class="grow"><div class="ttl">${esc(a.slot)}</div>
+        <div class="sub">${esc(a.provider)} / ${esc(a.model)}</div></div>
+      <div class="rt">${btn('修改',{cls:'sm ghost'})}</div></div>`).join('');
+  const comb = MODELS.combination.map(c=>`
+    <div class="row-i" style="flex-direction:column;align-items:stretch">
+      <div class="row"><b class="mono sm">${esc(c.name)}</b>${statusTag(c.enabled?'enabled':'disabled')}
+        <span class="grow"></span>${sw(c.enabled,'sm')}</div>
+      <div class="row g4 wrap mt4">${c.steps.map(s=>
+        `<span class="chip">${esc(s.role)}: ${esc(s.model)}</span>`).join('<span class="fnt">→</span>')}</div>
+    </div>`).join('');
+  return `<div class="view-pad">
+    ${head('模型','3 个 tab：<b>general / auxiliary / combination</b>。默认 provider 与 model 由设置页决定。',
+      sel([['x','默认：anthropic / claude-sonnet-4-5']])+btn('＋ 添加 Provider',{cls:'pri'}))}
+    ${tabsBar}
+    <div class="mt16">${secT('Provider 列表')}<div class="grid2">${cards}</div></div>
+    <div class="mt24">${secT('辅助模型 · auxiliary')}
+      <div class="stack">${aux}</div></div>
+    <div class="mt24">${secT('组合编排 · combination')}
+      <div class="stack">${comb}</div></div>
+    ${apiPanel([
+      ep('GET','/api/hermes/available-models','裸对象（无外层 key）',
+        [fld('defaultProvider','string'),fld('defaultModel','string'),
+         fld('providers','ProviderConfig[]'),fld('provider','string'),fld('base_url','string · 蛇形'),
+         fld('models','string[]'),fld('defaultModel','string'),fld('aliases','Record<string,string>'),fld('visible','string[]')]),
+      ep('GET','/api/hermes/auxiliary-models','裸对象',
+        [fld('slot','string','标题生成 / 压缩摘要 / 意图分类 / 视觉理解'),fld('provider','string'),
+         fld('model','string'),fld('builtin','boolean')]),
+      ep('GET','/api/hermes/model-combinations','裸对象',
+        [fld('name','string'),fld('steps','{ role, model }[]'),fld('enabled','boolean')]),
+      ep('POST','/api/hermes/available-models','{ success: true }',
+        [fld('provider','string'),fld('base_url','string'),fld('defaultModel','string'),fld('apiKey','string')]),
+      ep('DELETE','/api/hermes/available-models/:provider','{ ok: true }',[]),
+    ], note('本屏唯一字段命名坑：<span class="code">base_url</span> 是<b>蛇形</b>，其余全是驼峰（<span class="code">defaultModel / base_url / models / aliases / visible</span>）。'))}
+  </div>`;
+}
+
+function renderFiles(){
+  const tree = FILES.tree.map(f=>{
+    if(f.t==='dir') return `<div class="tree">
+      <div class="tn"><span class="tw">▾</span><span>▣</span><span>${esc(f.n)}</span></div>
+      ${f.kids.map(k=>`<div class="tn l1"><span class="tw"></span><span class="fnt">▪</span><span>${esc(k)}</span></div>`).join('')}
+    </div>`;
+    return `<div class="tn${f.n==='README.md'?' on':''}"><span class="tw"></span><span class="fnt">▪</span>
+      <span class="grow">${esc(f.n)}</span><span class="fnt xs">${f.size}</span></div>`;
+  }).join('');
+  const editor = `<div class="term" style="border:none;min-height:340px;font-size:12px"># README.md
+
+自托管 AI Agent 控制台。
+
+## 快速开始
+<span class="c-acc">$</span> npm ci --ignore-scripts
+<span class="c-acc">$</span> npm run harness:check
+
+## 结构
+| 包 | 职责 |
+| --- | --- |
+| <span class="c-ok">packages/client</span> | Vue 3 客户端 |
+| <span class="c-ok">packages/server</span> | Koa API / Socket.IO |
+
+## 硬规则
+见 <span class="c-acc">AGENTS.md</span>。</div>`;
+  return `<div class="view-pad">
+    ${head('文件','<b>两窗格</b>：左 tree（240px）· 右 main。content 三选一：<span class="code">FileEditor / FilePreview / FileList</span>。',
+      btn('＋ 新建文件',{cls:'sm ghost'})+btn('＋ 新建文件夹',{cls:'sm ghost'})+
+      btn('↑ 上传',{cls:'sm ghost'})+btn('⟳ 刷新',{cls:'sm ghost'}))}
+    ${note('profile 配置编辑器是<b>独立分支</b>：<span class="code">?profile=x&amp;file=config.yaml</span> 时右侧变为只读 YAML 查看 + 单行编辑，不走 FileEditor。','info')}
+    <div class="split" style="grid-template-columns:240px 1fr;align-items:start">
+      <div class="panel"><div class="panel-h"><h3>${esc(FILES.root)}</h3></div>
+        <div class="panel-b">${tree}
+          <div class="sec-t">Agent 输出文件</div>
+          ${OUTPUT_FILES.map(f=>`<div class="tn" style="display:flex;gap:6px;padding:3px 6px;border-radius:4px">
+            <span class="tw"></span><span class="fnt">▪</span><span class="grow ell">${esc(f.name)}</span>
+            <span class="fnt xs">${f.size}</span></div>`).join('')}
+        </div></div>
+      <div class="panel"><div class="panel-h"><h3>README.md</h3>
+          <span class="meta">~/work/hermes-ui</span>
+          <span class="right">${btn('保存',{cls:'sm pri sm'})}${btn('重命名',{cls:'sm ghost'})}${btn('删除',{cls:'sm danger ghost'})}</span></div>
+        <div class="panel-b">${editor}</div></div>
+    </div>
+    ${apiPanel([
+      ep('GET','/api/hermes/files?path=','{ files: FileNode[], path: string }',
+        [fld('name','string'),fld('path','string'),fld('type','enum','file | dir'),
+         fld('size','number'),fld('mtime','number · epoch 毫秒'),fld('children','FileNode[]?')]),
+      ep('GET','/api/hermes/files/content?path=','{ content: string, encoding: string }',[fld('path','string')]),
+      ep('POST','/api/hermes/files','{ ok: true }',[fld('path','string'),fld('type','enum'),fld('content','string?')]),
+      ep('PUT','/api/hermes/files','{ success: true }',[fld('path','string'),fld('content','string')]),
+      ep('DELETE','/api/hermes/files?path=','{ ok: true }',[fld('path','string')]),
+      ep('POST','/api/hermes/files/upload','{ uploaded: number, files: { path, size }[] }',
+        [fld('path','string'),fld('size','number','注意这是 number；日志页的 size 是字符串 "1.2MB"')]),
+      ep('GET','/api/hermes/profiles/:name/config','裸 ProfileConfig（?file=config.yaml 走独立分支）',
+        [fld('name','string'),fld('models','string[]'),fld('tools','string[]'),fld('workspace','string')]),
+      ep('GET','/api/hermes/sessions/:id/outputs','{ files: OutputFile[] }',[fld('name','string'),fld('size','string'),fld('mtime','number')]),
+    ])}
+  </div>`;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   12. 视图 · 监控域 5 屏
+   ════════════════════════════════════════════════════════════════════════════ */
+const LEVEL_CLS = {ERROR:'err',WARNING:'warn',WARN:'warn',INFO:'ok',DEBUG:'info',TRACE:'info',FATAL:'err'};
+const LOG_ROWS_TOTAL = 1284;
+const periodSel = (cur='30d') =>
+  `<div class="row g4">${['7d','30d','90d','365d'].map(p=>
+    `<button class="btn sm ${p===cur?'on':'ghost'}">${p}</button>`).join('')}</div>`;
+
+function renderLogs(){
+  const lv = l => `<span class="tag ${LEVEL_CLS[l]??''}">${esc(l)}</span>`;
+  const rows = LOGS.map(l=>`
+    <div class="row-i" style="align-items:flex-start">
+      <span class="led ${LEVEL_CLS[l.level]??'idle'}" style="margin-top:6px"></span>
+      <span class="mono xs mut nowrap" style="width:150px">${tsMs(l.ts).slice(5,23)}</span>
+      <span style="width:74px">${lv(l.level)}</span>
+      <span class="tag" style="width:74px">${esc(l.scope)}</span>
+      <span class="grow mono sm" style="white-space:pre-wrap">${esc(l.message)}</span>
+      <span class="rt">${Object.entries(l.meta).map(([k,v])=>
+        `<span class="chip">${esc(k)}=${esc(v)}</span>`).join('')}</span>
+    </div>`).join('');
+  return `<div class="view-pad">
+    ${head('日志','服务端与 bridge 的合并日志流。左侧过滤栏固定 level / scope / 时间窗。',
+      `<div class="row g8 wrap">${sel([['x','level：全部']],'sm')}${sel([['x','scope：全部']],'sm')}
+       ${sel([['x','最近 1 小时']],'sm')}${srch('搜索日志内容')}${btn('⟳',{cls:'sm ghost'})}${btn('导出',{cls:'sm ghost'})}</div>`)}
+    ${kpis([
+      {k:'Total', v:LOG_ROWS_TOTAL, tone:'acc', s:'当前窗口'},
+      {k:'ERROR', v:LOGS.filter(l=>l.level==='ERROR').length, tone:'err'},
+      {k:'WARNING', v:LOGS.filter(l=>l.level==='WARNING'||l.level==='WARN').length, tone:'warn'},
+      {k:'INFO', v:LOGS.filter(l=>l.level==='INFO').length, tone:'ok'},
+    ])}
+    ${secT('日志流 · 倒序')}
+    <div class="stack tight">${rows}</div>
+    ${secT('level 枚举对照')}
+    ${note('前端筛选器用的集合与日志文件实际写入的集合<b>不同</b>：UI 侧是 <span class="code">ERROR / WARNING / INFO / DEBUG</span>（空串 = 全部），服务端实际还会产出 <span class="code">TRACE</span> 与 <span class="code">FATAL</span>。渲染时需兜底，不能因未知 level 崩掉。','warn')}
+    <div class="row g6 wrap mt8">
+      ${['ERROR','WARNING','WARN','INFO','DEBUG','TRACE','FATAL'].map(l=>tag(LEVEL_CLS[l]??'',l)).join('')}
+    </div>
+    ${apiPanel([
+      ep('GET','/api/hermes/logs?level=&scope=&since=&until=&q=&cursor=','{ logs: LogEntry[], nextCursor: string? }',
+        [fld('ts','number · epoch 秒（本页唯一用秒的时间戳）'),
+         fldEnum('level',['ERROR','WARNING','INFO','DEBUG'],'UI 侧筛选枚举；空串 = 全部'),
+         fldEnum('服务端实际',['TRACE','DEBUG','INFO','WARN','ERROR','FATAL'],'与 UI 枚举不一致，需兜底渲染'),
+         fld('scope','string'),fld('message','string'),fld('meta','Record<string, unknown>')]),
+      ep('GET','/api/hermes/logs/export?token=','text/plain 或 NDJSON（token 走 query，非 header）',
+        [fld('size','string','下载/导出走 ?token= 鉴权，不是 Authorization 头')]),
+    ], note('对比：<span class="code">/logs</span> 的 <span class="code">size</span> 类字段在 session 输出里是<b>字符串</b>（如 <span class="code">"1.2MB"</span>），而 <span class="code">/files</span> 的是 number。'))}
+  </div>`;
+}
+
+function renderUsage(){
+  const totalTokens = TREND.reduce((a,d)=>a+d.tokens,0);
+  const totalCost = TREND.reduce((a,d)=>a+d.cost,0);
+  const statCards = kpis([
+    {k:'Total Tokens', v:totalTokens.toLocaleString(), tone:'acc', s:'14 天累计'},
+    {k:'Est. Cost', v:`$${totalCost.toFixed(2)}`, tone:'warn', s:'estimated_cost_usd'},
+    {k:'Sessions', v:TREND.reduce((a,d)=>a+d.sessions,0), tone:'info', s:'含 cron / workflow'},
+    {k:'Avg / Session', v:Math.round(totalTokens/TREND.reduce((a,d)=>a+d.sessions,0)).toLocaleString(), tone:'flat'},
+  ]);
+  const byModel = [['claude-sonnet-4-5',1042000,3.62],['deepseek/deepseek-chat',712400,1.08],
+    ['gpt-5.1',488000,1.94],['claude-haiku-4-5',402800,0.41],['gemini-2.5-pro',221500,0.86]];
+  const byAgent = [['research',942300,1.42],['default',688100,2.41],['ops',312400,0.72],['sandbox',0,0]];
+  const maxM = Math.max(...byModel.map(x=>x[1]));
+  const maxA = Math.max(...byAgent.map(x=>x[1]));
+
+  return `<div class="view-pad">
+    ${head('用量','content 顺序固定：<b>StatCards(4) → ModelBreakdown → AgentBreakdown → DailyTrend</b>。默认周期 30d。',
+      periodSel('30d')+btn('⟳ 刷新',{cls:'ghost'}))}
+    ${statCards}
+    ${secT('ModelBreakdown')}
+    <div class="stack tight">
+      ${byModel.map(([n,t,c])=>progline(esc(n), t/maxM*100, `${t.toLocaleString()} · $${c.toFixed(2)}`)).join('')}
+    </div>
+    ${secT('AgentBreakdown')}
+    <div class="stack tight">
+      ${byAgent.map(([n,t,c])=>progline(esc(n), t/maxA*100, `${t.toLocaleString()} · $${c.toFixed(2)}`)).join('')}
+    </div>
+    ${secT('DailyTrend')}
+    ${panel('Tokens / 14 天', `${TREND[TREND.length-1].date} → ${TREND[0].date}`,
+      bars(TREND.map(d=>d.tokens),{hi:[TREND.length-1]}) +
+      `<div class="chart-legend mt8"><span>峰值 ${Math.max(...TREND.map(d=>d.tokens)).toLocaleString()}（${TREND.reduce((a,b)=>a.tokens>b.tokens?a:b).date}）</span>
+        <span>均值 ${Math.round(totalTokens/TREND.length).toLocaleString()}</span></div>`)}
+    <div class="grid2 mt12">
+      ${panel('Cost / 14 天','',bars(TREND.map(d=>d.cost)))}
+      ${panel('Sessions / 14 天','',bars(TREND.map(d=>d.sessions)))}
+    </div>
+    ${secT('趋势表')}
+    ${table([{t:'date'},{t:'tokens',n:1},{t:'cost_usd',n:1},{t:'sessions',n:1},{t:'趋势'}],
+      TREND.slice().reverse().map(d=>[`<span class="mono sm">${d.date}</span>`,
+        `<span class="mono">${d.tokens.toLocaleString()}</span>`,
+        `<span class="mono">$${d.cost.toFixed(2)}</span>`,
+        `<span class="mono">${d.sessions}</span>`,
+        `<span style="width:120px;display:block">${spark(TREND.map(x=>x.tokens))}</span>`]))}
+    ${secT('会话明细')}
+    ${table([{t:'sessionId'},{t:'source'},{t:'profile'},{t:'messages',n:1},{t:'tokens',n:1},{t:'cost_usd',n:1},{t:'updatedAt'}],
+      USAGE_SESSIONS.map(s=>[`<a class="mono sm" href="#/hermes/session/${s.sessionId}">${s.sessionId}</a>`,
+        statusTag(s.source),`<span class="tag">${esc(s.profile)}</span>`,
+        `<span class="mono">${s.message_count}</span>`,
+        `<span class="mono">${s.totalTokens.toLocaleString()}</span>`,
+        `<span class="mono">$${s.estimated_cost_usd.toFixed(3)}</span>`,
+        `<span class="mono sm mut">${tsSec(s.updatedAt)}</span>`]))}
+    ${apiPanel([
+      ep('GET','/api/hermes/usage/summary?period=7d|30d|90d|365d','裸对象',
+        [fld('totalTokens','number'),fld('estimated_cost_usd','number'),fld('sessions','number'),fld('period','enum')]),
+      ep('GET','/api/hermes/usage/by-model?period=','裸对象 map',
+        [fld('{model}','{ tokens, estimated_cost_usd, calls }')]),
+      ep('GET','/api/hermes/usage/by-agent?period=','裸对象 map',[fld('{profile}','{ tokens, estimated_cost_usd }')]),
+      ep('GET','/api/hermes/usage/daily?period=','{ days: DailyUsage[] }',
+        [fld('date','string','YYYY-MM-DD'),fld('tokens','number'),fld('cost','number'),fld('sessions','number')]),
+      ep('GET','/api/hermes/sessions/usage?ids=','顶层裸 map（无外层 key）',
+        [fld('{sessionId}','{ totalTokens, estimated_cost_usd, message_count, source, profile }')]),
+    ], note('周期枚举 4 值：<b>7d / 30d / 90d / 365d</b>。Usage 默认 <b>30d</b>，SkillsUsage 默认 <b>7d</b>。'))}
+  </div>`;
+}
+
+function renderPerformance(){
+  const r = PERF.runtime;
+  const cards = kpis([
+    {k:'CPU', v:`${r.cpu.usedPercent}%`, tone:'warn', s:`${r.cpu.cores} cores · load ${r.cpu.loadAvg.join(' / ')}`},
+    {k:'Memory', v:`${(r.memory.usedMb/1024).toFixed(1)} GB`, tone:'acc', s:`/ ${(r.memory.totalMb/1024).toFixed(0)} GB`},
+    {k:'Active Sessions', v:r.activeSessions, tone:'ok', s:`${r.workers.length} workers`},
+    {k:'Workers', v:r.workers.filter(w=>w.status==='running').length+'/'+r.workers.length, tone:'info', s:'running / total'},
+  ]);
+  return `<div class="view-pad">
+    ${head('性能','SUPERADMIN 页。自动刷新 <span class="code">5000ms</span>；<span class="code">capturedAt</span> 决定快照新鲜度。',
+      `<div class="row g8">${statusTag('running','auto 5s')}${btn('立即刷新',{cls:'ghost'})}</div>`)}
+    <div class="row g8 xs fnt mb12 mono">capturedAt = ${tsMs(r.capturedAt)}</div>
+    ${cards}
+    ${secT('系统指标')}
+    <div class="grid2">
+      ${panel('CPU','',progline('used', r.cpu.usedPercent, r.cpu.usedPercent+'%') +
+        `<div class="term mt8" style="font-size:11px">load average: ${r.cpu.loadAvg.join('   ')}
+cores: ${r.cpu.cores}</div>`)}
+      ${panel('Memory','',progline('used', r.memory.usedMb/r.memory.totalMb*100,
+        `${r.memory.usedMb} MB`, r.memory.usedMb/r.memory.totalMb>0.8?'warn':'') +
+        `<div class="term mt8" style="font-size:11px">total: ${r.memory.totalMb} MB
+free:  ${r.memory.freeMb} MB</div>`)}
+    </div>
+    ${secT('进程 · 2 行')}
+    ${table([{t:'进程'},{t:'pid',n:1},{t:'cpu',n:1},{t:'mem',n:1},{t:'uptime',n:1}],
+      PERF.processes.map(p=>[esc(p.name),`<span class="mono">${p.pid}</span>`,
+        `<span class="mono">${p.cpuPercent}%</span>`,`<span class="mono">${p.memoryMb} MB</span>`,
+        `<span class="mono">${Math.floor(p.uptimeSec/86400)}d ${Math.floor(p.uptimeSec%86400/3600)}h</span>`]))}
+    ${secT('Workers · 按 profile')}
+    ${table([{t:'profile'},{t:'pid',n:1},{t:'cpu',n:1},{t:'mem',n:1},{t:'running/sessions'},{t:'lastUsed'},{t:'status'}],
+      r.workers.map(w=>[`<span class="tag">${esc(w.profile)}</span>`,`<span class="mono">${w.pid??'—'}</span>`,
+        `<span class="mono">${w.cpuPercent}%</span>`,`<span class="mono">${w.memoryMb} MB</span>`,
+        `<span class="mono">${w.running} / ${w.sessionsToday}</span>`,
+        `<span class="mono sm mut">${w.lastUsedAt?tsMs(w.lastUsedAt).slice(5,16):'—'}</span>`,
+        statusTag(w.status)]))}
+    ${secT('按 profile 的活跃会话')}
+    ${table([{t:'profile'},{t:'sessionId'},{t:'title'},{t:'tokens',n:1},{t:'status'}],
+      SESSIONS.slice(0,4).map(s=>[`<span class="tag">${esc(s.profile)}</span>`,
+        `<a class="mono sm" href="#/hermes/session/${s.sessionId}">${s.sessionId}</a>`,
+        esc(s.title),`<span class="mono">${s.totalTokens.toLocaleString()}</span>`,
+        statusTag(s.source==='api_server'?'done':s.source)]))}
+    ${apiPanel([
+      ep('GET','/api/hermes/performance/runtime','裸对象；<b>失败也返回 200 + 空快照</b>，前端要按空值兜底而不是报错',
+        [fld('capturedAt','number · epoch 毫秒'),fld('cpu','{ usedPercent, cores, loadAvg }'),
+         fld('memory','{ totalMb, usedMb, freeMb }'),fld('activeSessions','number'),
+         fld('workers','Worker[]'),fld('profile','string'),fld('pid','number?'),
+         fld('cpuPercent','number'),fld('memoryMb','number'),
+         fld('running','number'),fld('sessionsToday','number'),fld('lastUsedAt','number? · epoch 毫秒'),
+         fldEnum('status',['running','idle','stopped'])]),
+      ep('GET','/api/hermes/performance/processes','裸数组',
+        [fld('name','string'),fld('pid','number'),fld('cpuPercent','number'),fld('memoryMb','number'),fld('uptimeSec','number')]),
+    ], note('本路由 <span class="code">meta.requiresSuperAdmin: true</span>。非 SA 访问时守卫直接跳 <span class="code">/hermes/chat</span>，本页不可达。'))}
+  </div>`;
+}
+
+function renderJourney(){
+  const nodes = JOURNEY.nodes.map((n,i)=>{
+    const a = 2*Math.PI*i/JOURNEY.nodes.length;
+    return {n, x:180+140*Math.cos(a), y:150+110*Math.sin(a)};
+  });
+  const pos = {}; nodes.forEach(o=>pos[o.n.id]=o);
+  return `<div class="view-pad">
+    ${head('学习轨迹','技能与记忆的使用图谱。<span class="code">JourneyNode.kind</span> 只有 <b>skill</b> 与 <b>memory</b> 两值。',
+      periodSel('30d')+btn('⟳ 刷新',{cls:'ghost'}))}
+    ${kpis([
+      {k:'Skills Traced', v:JOURNEY.nodes.length, tone:'acc'},
+      {k:'Memories Linked', v:JOURNEY.memories.length, tone:'info'},
+      {k:'Edges', v:JOURNEY.edges.length, tone:'flat', s:'技能间的流转关系'},
+      {k:'Top Skill', v:'read-file', tone:'ok', s:'28% 权重'},
+    ])}
+    ${secT('技能图 · JourneyNode.kind = skill')}
+    ${panel('Graph','',`<div style="position:relative;height:320px">
+      <svg style="position:absolute;inset:0;width:100%;height:100%;pointer-events:none">
+        ${JOURNEY.edges.map(e=>{
+          const a=pos[e.from], b=pos[e.to]; if(!a||!b) return '';
+          return `<line x1="${a.x+180}" y1="${a.y+150}" x2="${b.x+180}" y2="${b.y+150}"
+            stroke="oklch(0.805 0.148 188 / ${0.12+e.w*0.5})" stroke-width="${1+e.w*3}"/>`;
+        }).join('')}
+      </svg>
+      ${nodes.map(({n,x,y})=>`
+        <div style="position:absolute;left:${x+180-46}px;top:${y+150-15}px;width:92px;text-align:center">
+          <div style="width:${18+n.weight*40}px;height:${18+n.weight*40}px;margin:0 auto;border-radius:50%;
+            border:1px solid oklch(0.805 0.148 188/.5);
+            background:radial-gradient(circle,oklch(0.805 0.148 188/${0.2+n.weight*0.5}),transparent 70%);
+            display:grid;place-items:center;font:600 9px/1 var(--font-display);color:var(--accent)">${n.label.slice(0,6)}</div>
+          <div class="xs fnt mono mt4">${(n.weight*100).toFixed(0)}%</div>
+        </div>`).join('')}
+    </div>`, 'ArkScope 装饰背景层已按红线设为 pointer-events: none')}
+    ${secT('记忆关联 · JourneyNode.kind = memory')}
+    <div class="grid4">
+      ${JOURNEY.memories.map(m=>`
+        <div class="tcard"><div class="th"><span class="led run"></span><b class="mono xs">${esc(m.label)}</b></div>
+          ${progline('weight', m.weight*100*3, (m.weight*100).toFixed(0)+'%')}</div>`).join('')}
+    </div>
+    ${secT('边表')}
+    ${table([{t:'from'},{t:'to'},{t:'weight',n:1},{t:'强度'}],
+      JOURNEY.edges.map(e=>[`<span class="mono sm">${e.from}</span>`,`<span class="mono sm">${e.to}</span>`,
+        `<span class="mono">${e.w.toFixed(2)}</span>`,
+        `<span style="display:block;width:110px">${meter(e.w*200)}</span>`]))}
+    ${apiPanel([
+      ep('GET','/api/hermes/journey?period=7d|30d|90d|365d','裸对象（无外层 key）',
+        [fld('nodes','JourneyNode[]'),fldEnum('node.kind',['skill','memory'],'JourneyNode.kind：仅 2 值'),
+         fld('label','string'),fld('weight','number · 0..1'),
+         fld('edges','{ from, to, w }[]'),fld('memories','{ id, label, weight }[]'),fld('period','enum')]),
+    ], note('ArkScope vendor 在本页仅用于<b>图背景</b>，属装饰位面：<span class="code">pointer-events: none</span>、不承载信息与交互。'))}
+  </div>`;
+}
+
+function renderSkillsUsage(){
+  const t = SKILLS_USAGE.total;
+  return `<div class="view-pad">
+    ${head('技能用量','统计每个技能的 views / uses / patches。默认周期 <b>7d</b>（与用量页的 30d 不同）。',
+      periodSel('7d')+btn('⟳ 刷新',{cls:'ghost'}))}
+    ${kpis([
+      {k:'Views', v:t.views.toLocaleString(), tone:'info'},
+      {k:'Uses', v:t.uses.toLocaleString(), tone:'acc'},
+      {k:'Patches', v:t.patches, tone:'warn', s:'本地改动次数'},
+      {k:'Conversion', v:(t.uses/t.views*100).toFixed(1)+'%', tone:'ok', s:'uses / views'},
+    ])}
+    ${secT('技能排行')}
+    ${table([{t:'skill'},{t:'category'},{t:'views',n:1},{t:'uses',n:1},{t:'patches',n:1},{t:'lastUsed'},{t:'7d 趋势'}],
+      SKILLS_USAGE.rows.map(r=>[
+        `<span class="mono sm">${esc(r.name)}</span><span class="cellsub"> ${esc(r.category)}</span>`,
+        `<span class="tag">${esc(r.category)}</span>`,
+        `<span class="mono">${r.views.toLocaleString()}</span>`,
+        `<span class="mono">${r.uses.toLocaleString()}</span>`,
+        `<span class="mono ${r.patchCount?'c-warn':''}" style="${r.patchCount?'color:var(--warn)':''}">${r.patchCount}</span>`,
+        `<span class="mono sm mut">${tsMs(r.lastUsedAt).slice(5,16)}</span>`,
+        `<span style="display:block;width:130px">${spark(r.trend)}</span>`]))}
+    ${secT('按来源')}
+    <div class="grid4">
+      ${Object.entries(t.bySource).map(([k,v])=>`
+        <div class="kpi"><div class="k">${esc(k)}</div><div class="v">${v}</div>
+          <div class="s">${((v/SKILLS.length)*100).toFixed(0)}% · ${SKILLS.length} 项技能</div></div>`).join('')}
+    </div>
+    ${apiPanel([
+      ep('GET','/api/hermes/skills-usage?period=7d|30d|90d|365d','裸对象',
+        [fld('views','number'),fld('uses','number'),fld('patches','number'),
+         fld('bySource','{ builtin, hub, local, external }','数字计数，不是数组'),
+         fld('rows','{ name, category, views, uses, patchCount, lastUsedAt, trend }[]'),
+         fld('lastUsedAt','number · epoch 毫秒')]),
+    ], note('周期枚举同样是 4 值，但<b>默认值不同</b>：Usage = 30d，SkillsUsage = 7d。'))}
+  </div>`;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   13. 视图 · 工具与系统域 5 屏
+   ════════════════════════════════════════════════════════════════════════════ */
+function renderVersion(){
+  return `<div class="view-pad">
+    ${head('版本预览','在线更新通道。<b>没有默认 URL</b>：只读 <span class="code">HERMES_WEB_UI_VERSION_MANIFEST_URL</span> 等环境变量，未设置时以具名错误降级。',
+      btn('⟳ 检查更新',{cls:'ghost'}))}
+    ${note('红线：<b>不得重新引入硬编码的上游 URL</b>。三个环境变量任一缺失时，本页应显示具名错误（如 <span class="code">VERSION_MANIFEST_URL_UNSET</span>）而不是静默回退到某个公共地址。','warn')}
+    ${secT('环境变量')}
+    ${kv([
+      ['HERMES_WEB_UI_VERSION_MANIFEST_URL',`<code class="code">${esc('https://releases.internal.example.com/hermes/manifest.json')}</code>`],
+      ['HERMES_WEB_UI_DOWNLOAD_BASE_URL',`<code class="code">${esc('https://releases.internal.example.com/hermes/')}</code>`],
+      ['HERMES_WEB_UI_GITHUB_REPO',`<code class="code">${esc('hermes-ui/releases')}</code>`],
+    ])}
+    ${secT('可用版本')}
+    <div class="stack">
+      ${VERSIONS.map(v=>`
+        <div class="row-i">
+          <span class="led ${v.current?'ok':'idle'}"></span>
+          <div class="grow"><div class="ttl mono">v${esc(v.version)} ${statusTag(v.channel)}
+            ${v.current?statusTag('enabled','installed'):''}</div>
+            <div class="sub">${esc(v.notes)}</div></div>
+          <div class="rt">
+            <span class="mono sm mut">${tsMs(v.releasedAt).slice(0,10)}</span>
+            <span class="tag">${esc(v.size)}</span>
+            ${v.current?btn('当前版本',{cls:'sm ghost',dis:true}):btn('下载',{cls:'sm ghost'})}
+          </div>
+        </div>`).join('')}
+    </div>
+    ${secT('降级态演示')}
+    ${panel('VERSION_MANIFEST_URL_UNSET','',`<div class="term" style="color:var(--err)">UpdateChannelError: VERSION_MANIFEST_URL_UNSET
+manifest url is not configured; refusing to fall back to a default endpoint</div>`)}
+    ${apiPanel([
+      ep('GET','manifestUrl (env)','裸 manifest 对象',
+        [fld('version','string'),fld('channel','enum','stable|beta|nightly'),fld('releasedAt','ISO 字符串'),
+         fld('size','string','"48.2 MB" 字符串，不是 number'),fld('notes','string'),fld('url','string')]),
+      ep('GET','/api/hermes/update/preview','裸对象（无外层 key）',
+        [fld('current','string'),fld('latest','string'),fld('channel','enum'),fld('hasUpdate','boolean')]),
+      ep('GET','/api/hermes/runtime-versions','裸数组',
+        [fld('version','string'),fld('releasedAt','ISO 字符串'),fld('size','string')]),
+      ep('POST','/api/hermes/update/apply','{ success: true }',
+        [fld('version','string'),fld('restart','boolean')]),
+    ])}
+  </div>`;
+}
+
+function renderDevices(){
+  return `<div class="view-pad">
+    ${head('设备','<b>LAN 设备发现</b>（不是 MCU / ESP32 设备管理 —— 那部分已被移除）。SUPERADMIN 页。',
+      sel([['x','发现方式：mDNS + ARP']],'sm')+btn('⟳ 重新扫描',{cls:'ghost'}))}
+    ${note('边界澄清：移除的是 <b>MCU / ESP32 设备面板</b>（<span class="code">SettingsCircuitBadge</span>、<span class="code">api/hermes/mcu-devices.ts</span>）。<span class="code">DevicesView.vue</span> 与 <span class="code">hermes.devices</span> 路由是<b>刻意保留</b>的，属局域网主机发现。','info')}
+    ${kpis([
+      {k:'Discovered', v:DEVICES.length, tone:'acc'},
+      {k:'Online', v:DEVICES.filter(d=>d.online).length, tone:'ok'},
+      {k:'Offline', v:DEVICES.filter(d=>!d.online).length, tone:'err'},
+      {k:'Services', v:DEVICES.reduce((a,d)=>a+d.services.length,0), tone:'info'},
+    ])}
+    ${secT('已发现主机')}
+    ${table([{t:'name'},{t:'address'},{t:'services'},{t:'fingerprint'},{t:'lastSeen'},{t:'online'},{t:''}],
+      DEVICES.map(d=>[
+        `<span class="mono sm">${esc(d.name)}</span>`,
+        `<span class="mono sm">${d.address}:${d.port}</span>`,
+        d.services.map(s=>`<span class="tag">${esc(s)}</span>`).join(' '),
+        `<span class="mono xs mut">${esc(d.fingerprint)}</span>`,
+        `<span class="mono sm mut">${tsMs(d.lastSeenAt).slice(5,16)}</span>`,
+        statusTag(d.online?'connected':'disconnected'),
+        btn('详情',{cls:'sm ghost'}),
+      ]))}
+    ${apiPanel([
+      ep('GET','/api/hermes/devices','{ devices: LanDevice[] }',
+        [fld('id','string'),fld('name','string'),fld('kind','enum','lan-host'),
+         fld('address','string'),fld('port','number'),fld('online','boolean'),
+         fld('services','string[]'),fld('fingerprint','string?'),fld('lastSeenAt','number · epoch 毫秒')]),
+      ep('POST','/api/hermes/devices/:id/ping','{ success: true, latencyMs: number }',[fld('id','string')]),
+      ep('POST','/api/hermes/devices/scan','{ ok: true, found: number }',[fld('method','enum','mdns|arp|both')]),
+    ], note('已删除、不要复用的路由：<span class="code">/api/hermes/mcu-devices*</span>。ESP32 / MCU 设备特性属于被刻意移除的范围，不要在原型或实现里重新引入。'))}
+  </div>`;
+}
+
+function renderProfiles(){
+  const cards = PROFILES.map(p=>`
+    <div class="panel">
+      <div class="panel-h"><span class="led ${TAG_CLASS[p.status]}"></span>
+        <h3>${esc(p.name)}</h3>${p.builtin?statusTag('enabled','builtin'):statusTag('disabled','custom')}
+        <span class="meta">${esc(p.label)}</span>
+        <span class="right">${statusTag(p.status)}
+          ${btn('启动',{cls:'sm ghost',dis:p.status==='running'})}${btn('停止',{cls:'sm ghost',dis:p.status!=='running'})}
+          ${btn('编辑配置',{cls:'sm ghost'})}${btn('删除',{cls:'sm danger ghost',dis:p.builtin})}</span></div>
+      <div class="panel-b">${kv([
+        ['name',`<code class="code">${esc(p.name)}</code>`],
+        ['workspace',`<code class="code">${esc(p.workspace)}</code>`],
+        ['models',p.models.map(m=>`<span class="tag acc">${esc(m)}</span>`).join(' ')],
+        ['tools',p.tools.length?p.tools.map(t=>`<span class="tag">${esc(t)}</span>`).join(' '):'<span class="mut">无</span>'],
+        ['pid',p.pid?`<span class="mono">${p.pid}</span>`:'<span class="mut">—</span>'],
+        ['createdAt',`<span class="mono sm">${tsMs(p.createdAt).slice(0,10)}</span><span class="ft">epoch 毫秒</span>`],
+        ['runtime-status',`<span class="mono sm mut">${esc(p.name)} → ${esc(JSON.stringify({running: p.status==='running' ? 1 : 0, sessionsToday: 34}))}</span>`],
+      ])}</div>
+    </div>`).join('');
+  return `<div class="view-pad">
+    ${head('配置档案','SUPERADMIN 页。profile 是 <b>Agent 运行时的隔离单元</b>：各自独立 workspace / models / tools / 进程。',
+      btn('＋ 新建 profile',{cls:'pri'}))}
+    ${note('Agent 运行状态由 <span class="code">/profiles/:name/runtime-status</span> 提供（<b>裸对象</b>，无外层 key），不是列表接口里的字段；两个要分开拉。','info')}
+    <div class="grid2">${cards}</div>
+    ${secT('runtime-status 逐个 profile')}
+    ${table([{t:'profile'},{t:'running',n:1},{t:'sessionsToday',n:1},{t:'pid',n:1},{t:'status'}],
+      PROFILES.map(p=>[`<span class="tag">${esc(p.name)}</span>`,
+        `<span class="mono">${p.status==='running'?1:0}</span>`,
+        `<span class="mono">${p.name==='default'?34:p.name==='research'?12:7}</span>`,
+        `<span class="mono">${p.pid??'—'}</span>`,statusTag(p.status)]))}
+    ${apiPanel([
+      ep('GET','/api/hermes/profiles','{ profiles: Profile[] }',
+        [fld('name','string'),fld('label','string'),fld('builtin','boolean'),
+         fld('models','string[]'),fld('tools','string[]'),fld('workspace','string'),
+         fld('createdAt','number · epoch 毫秒')]),
+      ep('GET','/api/hermes/profiles/:name/runtime-status','裸对象（无外层 key）',
+        [fld('running','number'),fld('sessionsToday','number'),fld('pid','number?'),
+         fldEnum('status',['running','idle','stopped'])]),
+      ep('GET','/api/hermes/profiles/:name/config','裸 ProfileConfig',
+        [fld('name','string'),fld('models','string[]'),fld('tools','string[]'),fld('workspace','string'),
+         fld('apiKey','string','config.yaml 里的敏感字段，UI 只回显掩码')]),
+      ep('POST','/api/hermes/profiles','{ success: true }',[fld('name','string'),fld('label','string')]),
+      ep('POST','/api/hermes/profiles/:name/start','{ ok: true }',[]),
+      ep('POST','/api/hermes/profiles/:name/stop','{ ok: true }',[]),
+    ])}
+  </div>`;
+}
+
+function renderSettings(){
+  const TABS = [['account','账户',true],['users','用户管理',true],['display','显示'],['proxy','代理'],
+    ['agent','Agent'],['memory','记忆'],['compression','上下文压缩'],['session','会话'],
+    ['privacy','隐私'],['models','模型'],['voice','语音']];
+  const tabBar = tabs(TABS,'display');
+  const d = SETTINGS.display;
+  const pane = `<div class="panel"><div class="panel-h"><h3>DisplaySettings</h3>
+      <span class="meta">${TABS.length} 个 pane · a-tabs type="line"</span></div>
+    <div class="panel-b"><div class="stack">
+      ${kv([
+        ['theme',`${['ink light','ink dark','comic'].map(t=>
+          `<button class="btn sm ${t===d.theme?'on':'ghost'}">${t}</button>`).join(' ')}
+          <span class="ft">项目三主题</span>`],
+        ['density',`${['compact','comfortable'].map(t=>
+          `<button class="btn sm ${t===d.density?'on':'ghost'}">${t}</button>`).join(' ')}`],
+        ['fontSize',`<div class="row g6"><input class="inp" type="range" value="${d.fontSize}" style="width:160px"/>
+          <code class="code">${d.fontSize}px</code></div>`],
+        ['lineHeight',`<div class="row g6"><input class="inp" type="range" value="${d.lineHeight}" style="width:160px"/>
+          <code class="code">${d.lineHeight}</code></div>`],
+        ['monoFont',`<select class="sel sm">${['JetBrains Mono','SF Mono','Menlo','Cascadia Code'].map(f=>
+          `<option ${f===d.monoFont?'selected':''}>${f}</option>`).join('')}</select>`],
+        ['showTimestamps',`${sw(d.showTimestamps)}<span class="ft">消息列表显示时间戳</span>`],
+        ['compactSidebar',`${sw(d.compactSidebar)}<span class="ft">侧栏折叠为 64px</span>`],
+        ['reduceMotion',`${sw(d.reduceMotion)}<span class="ft">关闭过渡动画</span>`],
+        ['avatar',`${sw(d.avatar)}<span class="ft">显示用户头像位（ArkScope 装饰层，仅装饰）</span>`],
+      ])}
+      ${note('主题 token 映射：<span class="code">ink dark</span> 下的 <span class="code">--bg-primary</span> / <span class="code">--accent-primary</span> / <span class="code">--border-color</span> 由 <span class="code">styles/variables.scss</span> 提供；Arco 的 <span class="code">colorPrimary</span> 在 <span class="code">arco-theme.ts</span> 里<b>冻结为 #2f2f2f</b>、<span class="code">borderRadius: 6</span>。','info')}
+      ${secT('相邻 pane 字段速览（本原型同时实现的其余 10 个 pane）')}
+      ${table([{t:'pane'},{t:'字段'},{t:'SA'}],[
+        ['account',  'email · superadmin · lockedIps[] · providers[3]（configured / env / hint）', '是'],
+        ['users',    '表格 6 列 + 新建/编辑 modal', '是'],
+        ['proxy',    'enabled · httpProxy · httpsProxy · noProxy · 保存', '否'],
+        ['agent',    'maxConcurrentSessions · defaultProfile · autoCompact · compactThreshold · reasoningEffort · temperature · memoryEnabled<br><span class="fnt">（此 pane 内含 AgentSettings + GatewayAutoStartSettings 两个组件）</span>', '否'],
+        ['memory',   'enabled · scope · autoCapture · retentionDays · maxEntries', '否'],
+        ['compression', 'strategy · triggerRatio · keepRecent · targetTokens · model', '否'],
+        ['session',  'historyPageSize · maxUploadMb · defaultWorkspace · autoTitle · titleModel · pinLimit · sourceTracking', '否'],
+        ['privacy',  'telemetry · redactKeys · shareSessions · retentionPolicy', '否'],
+        ['models',   'defaultProvider · defaultModel · fallbackEnabled · fallbackModel · temperature · maxTokens', '否'],
+        ['voice',    'TTS: enabled/provider/voice/speed/format　STT: enabled/provider/model/language/autoSend', '否'],
+      ].map(r=>[`<span class="mono sm">${r[0]}</span>`,
+        `<span class="sm">${r[1]}</span>`, r[2]==='是'?statusTag('enabled','SA'):'<span class="mut sm">否</span>']))}
+    </div></div>`;
+  return `<div class="view-pad">
+    ${head('设置','<b>11 个 pane，顺序固定</b>。带 <span class="sa-badge">SA</span> 的 pane 仅超级管理员可见/可用。',
+      btn('保存全部',{cls:'pri'}))}
+    ${tabBar}
+    <div class="mt16">${pane}</div>
+    ${apiPanel([
+      ep('GET','/api/hermes/config','裸对象（无外层 key）',
+        [fld('display','object'),fld('proxy','object'),fld('agent','object'),fld('memory','object'),
+         fld('compression','object'),fld('session','object'),fld('privacy','object'),
+         fld('models','object'),fld('voice','{ tts, stt }','驼峰；唯一例外是 tool_names_registered 那类字段'),
+         fld('account','object')]),
+      ep('POST','/api/hermes/config','{ success: true }',[fld('section','enum','display|proxy|agent|memory|compression|session|privacy|models|voice|account')]),
+      ep('GET','/api/hermes/config/users','{ users: User[] }（SA）',
+        [fld('name','string'),fld('email','string'),fld('superadmin','boolean'),fld('lockedIps','string[]'),fld('createdAt','number')]),
+      ep('POST','/api/hermes/config/users','{ success: true }（SA）',[fld('name','string'),fld('email','string'),fld('superadmin','boolean')]),
+      ep('GET','/api/hermes/stt/settings','裸对象',[fld('enabled','boolean'),fld('provider','string'),fld('model','string'),fld('language','string'),fld('autoSend','boolean')]),
+      ep('GET','/api/hermes/tts/settings','裸对象',[fld('enabled','boolean'),fld('provider','string'),fld('voice','string'),fld('speed','number'),fld('format','string')]),
+    ], note('pane key 顺序（固定）：<b>account, users(SA), display, proxy, agent, memory, compression, session, privacy, models, voice</b>。<span class="code">/stt/settings</span> 与 <span class="code">/tts/settings</span> 都是<b>裸对象</b>。'))}
+  </div>`;
+}
+
+function renderTerminal(){
+  return `<div class="term-wrap">
+    <div class="term-bar">
+      <span class="led run"></span><b class="mono sm">bash · default profile</b>
+      <span class="tag">~/work/hermes-ui</span>
+      <span class="grow"></span>
+      ${sel([['x','default ▾']],'sm')}
+      ${btn('新建标签',{cls:'sm ghost'})}${btn('清屏',{cls:'sm ghost'})}${btn('断开',{cls:'sm danger ghost'})}
+    </div>
+    <div class="term-body">
+<span class="c-mut">HERMES Studio terminal · WebSocket 已连接 · token 走 query</span>
+<span class="c-acc">$</span> <span>npm run harness:check</span>
+
+<span class="c-mut">▸ checking package boundaries…</span>
+<span class="c-ok">  ✓ packages/client does not import @/server</span>
+<span class="c-ok">  ✓ packages/server does not import @/client</span>
+<span class="c-warn">  ! scripts/harness-check.mjs: 3 whitelisted addresses present</span>
+<span class="c-mut">▸ checking red lines…</span>
+<span class="c-ok">  ✓ no state.db open from node</span>
+<span class="c-ok">  ✓ no packages/desktop / packages/website reintroduced</span>
+<span class="c-mut">▸ done in 1.4s</span>
+
+<span class="c-acc">$</span> <span>git log --oneline -3</span>
+<span class="c-dim">a4f21c8</span> fix(client): kanban column width on narrow viewports
+<span class="c-dim">8b3e0d2</span> refactor(server): extract bridge history reader
+<span class="c-dim">12d7f5b</span> chore: bump runtime manifest channel
+
+<span class="c-acc">$</span> <span class="cursor"></span>
+    </div>
+    ${apiPanel([
+      ep('WS','/api/hermes/terminal?token=','原生 WebSocket，token 走 query（不是 Authorization 头）',
+        [fld('profile','string'),fldEnum('message',['input','resize','signal','dispose']),
+         fld('data','string'),fld('cols','number'),fld('rows','number')]),
+      ep('POST','/api/hermes/terminal/spawn','裸对象',
+        [fld('profile','string'),fld('cols','number'),fld('rows','number'),fld('cwd','string')]),
+      ep('GET','/api/hermes/terminal/sessions','{ sessions: TerminalSession[] }',
+        [fld('id','string'),fld('profile','string'),fld('pid','number'),fld('startedAt','number')]),
+    ], note('SUPERADMIN 路由。<b>原生 WebSocket</b>（不是 Socket.IO），与 <span class="code">/api/hermes/kanban/events</span> 同属 WS 组。<span class="code">agent-bridge/python/</span> 是<b>只读 vendored 代码</b>，终端的 PTY 行为由它提供，不要改。'))}
+  </div>`;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   14. 说明屏 · 交付说明 / 路由映射 / 响应信封总表
+   ════════════════════════════════════════════════════════════════════════════ */
+function renderOverview(){
+  return `<div class="view-pad">
+    ${head('交付说明','纯静态原型：<b>未接入</b>、<b>未修改</b> <span class="code">packages/client</span> 与 <span class="code">packages/server</span>、<b>未触碰任何 API</b>。')}
+    ${kpis([
+      {k:'Routes', v:'31', tone:'acc', s:'逐条对齐 router/index.ts'},
+      {k:'Screens', v:'27', tone:'info', s:'9 条路由复用组件'},
+      {k:'Endpoints', v:'72', tone:'ok', s:'每屏标注端点 + 字段 + 枚举'},
+      {k:'Files Changed', v:'0', tone:'ok', s:'只新增本文件'},
+    ])}
+    ${secT('本版相对上一版原型改了什么')}
+    <div class="stack">
+      ${[
+        ['侧栏 IA 重排','按真实 <span class="code">AppSidebar.vue</span> 的 <span class="code">SidebarGroupKey</span> 4 组 20 项重排。上一版把 chat / history / global-agent / group-chat / workflow 全塞进「助手」组 —— <b>与真实实现不符</b>，这 5 条路由根本不吃全局侧栏。'],
+        ['数据换成真实字段','模型名用真实的 <span class="code">claude-sonnet-4-5 / gpt-5.1 / deepseek-chat / gemini-2.5-pro</span>；上一版的 <span class="code">minimax-m2</span> 等是虚构占位。'],
+        ['状态色覆盖全枚举','新增 <span class="code">queued / pending_approval / approval_rejected / canceled / auto-active / provider-managed / not-enabled / inactive / scaned / triage / scheduled / ready</span> 等真实枚举的映射。'],
+        ['新增契约面板','每屏底部「本页数据来源 · API 契约」，列出端点、<b>响应信封</b>、关键字段、枚举取值、时间戳单位。这是上一版完全没有的。'],
+        ['时间戳单位标注','明确标出 3 套单位：sessions/kanban/logs = epoch <b>秒</b>；skills mtime/memory mtime/pet updatedAt = epoch <b>毫秒</b>；jobs/cron-history = <b>ISO 字符串</b>。'],
+        ['SA 预览开关','顶栏可切换 SUPERADMIN 身份，验证 5 条 <span class="code">requiresSuperAdmin</span> 路由的守卫行为。'],
+        ['装饰位面守红线','ArkScope 背景层、Journey 图背景全部 <span class="code">pointer-events: none</span>，不承载信息与交互。'],
+      ].map(([t,d])=>`<div class="row-i" style="align-items:flex-start">
+        <span class="led ok" style="margin-top:6px"></span>
+        <div class="grow"><div class="ttl">${t}</div><div class="sub" style="white-space:normal;line-height:1.65">${d}</div></div>
+      </div>`).join('')}
+    </div>
+    ${secT('令牌映射（接入时的替换清单）')}
+    ${table([{t:'CYBER token'},{t:'项目变量'},{t:'取值'},{t:''}],[
+      ['--bg','--bg-primary','页面底'],
+      ['--surface','--bg-secondary','侧栏底'],
+      ['--surface-2','--bg-tertiary','次级面板'],
+      ['--input-bg','--bg-input','输入框'],
+      ['--fg','--text-primary','正文'],
+      ['--muted','--text-secondary','次要文字'],
+      ['--accent','--accent-primary','唯一强调色'],
+      ['--border','--border-color','描边'],
+      ['--radius','—','6px（与 arco-theme.ts 的 borderRadius 一致）'],
+      ['--radius-lg','—','8px'],
+      ['--rail-w','—','240px（与 ui-baseline.md 一致）'],
+      ['--top-h','—','60px'],
+    ].map(r=>[`<code class="code">${r[0]}</code>`,`<code class="code p">${r[1]}</code>`,
+      `<span class="sm mut">${r[2]}</span>`,
+      `<span class="tag">${['ok','info'].includes(r[2])?'aligned':'—'}</span>`]))}
+    ${secT('CYBER 视觉 vs 项目视觉基线')}
+    ${note('你选的是<b>延续 CYBER 霓虹暗色</b>，而项目真实基线是 <span class="code">docs/ui-baseline.md</span> 的<b>黑白水墨 Pure Ink</b>（纯黑白灰、无彩色）。两者不冲突但不等价：CYBER 用 OKLCH 霓虹青作唯一强调色，Pure Ink 不用彩色。接入时若要同时满足两边，令牌层做一次映射即可，组件结构不用改。','warn')}
+    ${secT('怎么翻页')}
+    <div class="row g8 wrap">
+      <a class="btn" href="#/hermes/chat">对话台</a>
+      <a class="btn" href="#/hermes/kanban">看板</a>
+      <a class="btn" href="#/hermes/workflow">工作流</a>
+      <a class="btn" href="#/hermes/settings">设置</a>
+      <a class="btn" href="#@/routeMap">路由映射</a>
+      <a class="btn" href="#@/contract">响应信封总表</a>
+    </div>
+  </div>`;
+}
+
+function renderRouteMap(){
+  return `<div class="view-pad">
+    ${head('路由映射','左侧为 <span class="code">packages/client/src/router/index.ts</span> 的 31 条路由，右侧为原型中对应的屏。<b>逐条核对，无遗漏、无新增</b>。')}
+    ${secT('守卫顺序')}
+    ${panel('','',`<div class="term">router.beforeEach(async (to, _from, next) =&gt; {
+  <span class="c-mut">// 1. hermes CLI missing guide：每次页面加载探测一次，fail-open</span>
+  <span class="c-acc">if</span> (to.name !== <span class="c-ok">'hermes.missing'</span>) {
+    <span class="c-acc">const</span> cliAvailable = <span class="c-acc">await</span> checkHermesCliAvailable();
+    <span class="c-acc">if</span> (!cliAvailable) { next({ name: <span class="c-ok">'hermes.missing'</span> }); <span class="c-acc">return</span>; }
+  }
+  <span class="c-mut">// 2. public 页面无需鉴权</span>
+  <span class="c-acc">if</span> (to.meta.public) {
+    <span class="c-acc">if</span> (to.name === <span class="c-ok">'login'</span> &amp;&amp; hasApiKey()) { next({ path: <span class="c-ok">'/hermes/chat'</span> }); <span class="c-acc">return</span>; }
+    next(); <span class="c-acc">return</span>;
+  }
+  <span class="c-mut">// 3. 其余页面需要 token</span>
+  <span class="c-acc">if</span> (!hasApiKey()) { next({ name: <span class="c-ok">'login'</span> }); <span class="c-acc">return</span>; }
+  <span class="c-mut">// 4. SUPERADMIN 门禁</span>
+  <span class="c-acc">if</span> (to.meta.requiresSuperAdmin &amp;&amp; !isStoredSuperAdmin()) { next({ name: <span class="c-ok">'hermes.chat'</span> }); <span class="c-acc">return</span>; }
+  next();
+});</div>`)}
+    ${secT('31 条路由')}
+    ${table([{t:'#',n:1},{t:'path'},{t:'name'},{t:'component'},{t:'meta'},{t:'原型屏'},{t:''}],
+      ROUTES.filter(r=>!r.p.startsWith('@')).map((r,i)=>[
+        `<span class="mono sm fnt">${i+1}</span>`,
+        `<code class="code">${esc(r.p)}</code>`,
+        `<code class="code p">${esc(r.n)}</code>`,
+        `<span class="mono xs mut">${esc(r.file)}</span>`,
+        r.pub?statusTag('disabled','public'):r.sa?statusTag('warn','requiresSuperAdmin'):'<span class="mut sm">—</span>',
+        r.psl?`${esc(r.title)} <span class="tag info">PageSidebarNav</span>`:esc(r.title),
+        `<a class="btn sm ghost" href="#${esc(r.p.includes(':')?r.p.replace(/:\\w+/, i%2?'hermes-ops':'7f3a91c2e04b'):r.p)}">打开</a>`,
+      ]))}
+    ${secT('无侧栏入口的路由（真实如此）')}
+    ${note('这 2 条路由在 <code class="code">router/index.ts</code> 中存在，但 <b>AppSidebar 的 <code class="code">&lt;nav&gt;</b> 里没有对应项</b>（真实侧栏共 18 项）。原型把它们单独放在「无侧栏入口」分组，虚线样式以示区别。','warn')}
+    ${table([{t:'name'},{t:'path'},{t:'真实入口'}],
+      NO_SIDEBAR_ENTRY.map(it=>[
+        `<code class="code p">${esc(it.n)}</code>`,
+        `<code class="code">${esc(it.p)}</code>`,
+        `<span class="sm">${esc(it.why)}</span>`,
+      ]))}
+    ${secT('说明屏（不属于真实路由）')}
+    ${table([{t:'hash'},{t:'用途'}],[
+      ['<code class="code">@/overview</code>','交付说明'],
+      ['<code class="code">@/routeMap</code>','本屏'],
+      ['<code class="code">@/contract</code>','响应信封总表'],
+    ])}
+  </div>`;
+}
+
+const ENVELOPES = [
+  ['命名集合', '{ sessions: [...] }', '/hermes/sessions · /hermes/jobs · /hermes/kanban · /hermes/logs · /hermes/usage/daily'],
+  ['命名单例', '{ session: {...} }', '部分 POST 返回体（如 branch）'],
+  ['成功布尔', '{ ok: true }', '最常见；也有 { success: true } 混用，写接口两种都要能读'],
+  ['错误', '{ error } 或 { error: { message } }', '两种形状并存，前端需兼容'],
+  ['裸对象', '{ ... } 直接就是资源', '/config · /memory · /skills · /kanban/:id · /journey · /available-models · /mcp/servers · /performance/runtime · /petdex/manifest · /profiles/:name/runtime-status · /stt/settings · /tts/settings · /update/preview · /runtime-versions'],
+  ['裸数组', '[ ... ]', '/skills · /mcp/servers · /workflows · /runtime-versions'],
+  ['顶层裸 map', '{ "sessionIdA": {...}, "sessionIdB": {...} }', '/hermes/sessions/usage?ids='],
+];
+function renderContract(){
+  return `<div class="view-pad">
+    ${head('响应信封总表','这是「API 没对上」的<b>根因清单</b>：同一后端存在 7 种响应形状，前端必须按端点分别处理，不能写一个通用解包函数。')}
+    ${secT('7 种信封')}
+    ${table([{t:'模式'},{t:'形状'},{t:'端点'}],
+      ENVELOPES.map(([a,b,c])=>[statusTag('info',a),`<code class="code">${esc(b)}</code>`,
+        `<span class="sm mut">${esc(c)}</span>`]))}
+    ${note('<b>最坑的一条</b>：<span class="code">POST /api/hermes/mcp/servers</span>、<span class="code">POST /api/hermes/plugins/:id/config</span>、<span class="code">POST /api/hermes/workflows/runs</span> 这些<b>写接口也返回裸对象</b>，不是 <span class="code">{ ok: true }</span>。判断成功的依据不是响应体形状，而是 HTTP 状态码。','err')}
+    ${secT('命名风格混用')}
+    <div class="grid2">
+      ${panel('蛇形（snake_case）','',`<div class="stack tight">
+        ${['created_at','updated_at','message_count','estimated_cost_usd','base_url','tool_names_registered',
+           'billing_provider','needsWriteApproval ← 驼峰！同对象内混用'].map(x=>
+          `<div class="row g6"><code class="code">${x}</code></div>`).join('')}
+      </div>`)}
+      ${panel('驼峰（camelCase）','',`<div class="stack tight">
+        ${['hasMore','totalTokens','sessionId','updatedAt','configStatus','effectiveStatus','tools_registered',
+           'captureStatus','connected'].map(x=>
+          `<div class="row g6"><code class="code">${x}</code></div>`).join('')}
+      </div>`)}
+    </div>
+    ${note('最典型的自相矛盾：<span class="code">SessionSummary</span> 里 <span class="code">hasMore</span>（驼峰）和 <span class="code">created_at</span>（蛇形）在<b>同一个响应对象</b>里。','warn')}
+    ${secT('时间戳 3 套单位')}
+    ${table([{t:'单位'},{t:'端点 / 字段'}],[
+      ['epoch <b>秒</b>', '/hermes/sessions（created_at / updatedAt）· /hermes/kanban（created_at / updated_at）· /hermes/logs（ts）'],
+      ['epoch <b>毫秒</b>', '/hermes/skills（mtime）· /hermes/memory（memory_mtime / user_mtime / soul_mtime）· /petdex/manifest（updatedAt）· /performance/runtime（capturedAt）· /files（mtime）'],
+      ['<b>ISO 字符串</b>', '/hermes/jobs（lastRun / nextRun）· /hermes/jobs/:id/history（startedAt / finishedAt）· /hermes/workflows/runs'],
+    ].map(r=>[statusTag('warn',r[0]),`<span class="sm mut">${r[1]}</span>`]))}
+    ${secT('真实传输层')}
+    ${table([{t:'类型'},{t:'端点'},{t:'鉴权'}],[
+      ['Socket.IO', '<code class="code">/chat-run</code> · <code class="code">/global-agent</code> · <code class="code">/workflow</code> · <code class="code">/group-chat</code>', '握手时带 token'],
+      ['原生 WebSocket', '<code class="code">/api/hermes/kanban/events</code> · <code class="code">/api/hermes/terminal</code>', '<b>token 走 query</b> ?token='],
+      ['下载 / 导出', '<code class="code">/hermes/logs/export</code> 等', '<b>token 走 query</b> ?token='],
+    ].map(r=>[statusTag(r[0]==='Socket.IO'?'ok':'warn',r[0]),
+      `<span class="mono xs sm">${r[1]}</span>`,`<span class="sm mut">${r[2]}</span>`]))}
+    ${secT('核心枚举一览')}
+    ${table([{t:'枚举'},{t:'取值'},{t:'值数'}],[
+      ['KanbanTaskStatus','triage, todo, scheduled, ready, running, blocked, review, done, archived','9'],
+      ['WorkflowNodeStatus（前端）','idle, queued, running, pending_approval, completed, failed, approval_rejected, canceled','8'],
+      ['WorkflowRunStatus（API）','queued, running, completed, failed, canceled','5'],
+      ['WorkflowRunNodeStatus（API）','queued, running, completed, failed, blocked, approval_rejected, canceled','7'],
+      ['PluginConfigStatus','enabled, disabled, not-enabled, auto, provider-managed','5'],
+      ['PluginEffectiveStatus','enabled, disabled, inactive, auto-active, provider-managed','5'],
+      ['SkillSource','builtin, hub, local, external（UI 追加 modified ✎）','4'],
+      ['SkillTarget','hermes, claude, codex','3'],
+      ['McpServerInfo.transport','stdio, http, sse','3'],
+      ['HermesMessage.role','user, assistant, system, tool, command, moa','6'],
+      ['Message.systemType','command, error, fork-divider','3'],
+      ['PendingApproval.choices','once, session, always, deny','4'],
+      ['LogEntry.level（UI）','ERROR, WARNING, INFO, DEBUG（空串 = 全部）','4'],
+      ['日志文件实际 level','TRACE, DEBUG, INFO, WARN, ERROR, FATAL','6'],
+      ['JobSchedule.kind','interval, cron, once','3'],
+      ['Job.state','idle, paused, running','3'],
+      ['JourneyNode.kind','skill, memory','2'],
+      ['wxQrStatus','idle, loading, waiting, scaned, confirmed, error, expired','7'],
+      ['周期 period','7d, 30d, 90d, 365d','4'],
+    ].map(r=>[`<code class="code">${esc(r[0])}</code>`,`<span class="sm mono">${esc(r[1])}</span>`,
+      `<span class="mono">${r[2]}</span>`]))}
+    ${secT('文档与实现的差异')}
+    ${note('<span class="code">docs/openapi.json</span> 有 242 个 path，但<b>大多没有 schema</b>，且<b>未收录</b> <span class="code">/pets/active</span> · <span class="code">/pets/adopt</span> · <span class="code">/petdex/manifest</span> · <span class="code">/petdex/asset</span> · <span class="code">/kanban/events</span>(WS) · <span class="code">/hermes/workflows*</span>。<b>以 <span class="code">packages/server/src/routes/*.ts</span> 为准</b>，不要以 openapi.json 为准。','warn')}
+  </div>`;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   15. 启动
+   ════════════════════════════════════════════════════════════════════════════ */
+document.addEventListener('click', e=>{
+  const g = e.target.closest('[data-goto]');
+  if(g){ location.hash = g.dataset.goto; }
+});
+if(!location.hash) location.hash = '/hermes/chat';
+render();
+</script>
+</body>
+</html>
diff --git a/prototype_reference/hermes-ui-cyber-chat.html b/prototype_reference/hermes-ui-cyber-chat.html
new file mode 100644
index 0000000..2e2a595
--- /dev/null
+++ b/prototype_reference/hermes-ui-cyber-chat.html
@@ -0,0 +1,657 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Hermes UI · 对话台原型 · CYBER 三色版</title>
+<!--
+  ============================================================================
+  Hermes UI · 对话台（ChatView）独立原型 —— 青 / 橙 / 荧光绿 三色语义版
+  ----------------------------------------------------------------------------
+  纯静态，不接入 packages/client。字段名与渲染结构对齐真实实现：
+    - 侧栏走 PageSidebarNav（不吃全局 AppSidebar），与 App.vue 的 usesPageSidebar 一致
+    - 气泡 role 全集：user / assistant / tool / command / system / moa
+    - system.systemType: command | error | fork-divider
+    - 输入区 toolbar：附件 · effort · 齿轮 · model · 语音 · 发送
+    - 右侧 Outline 面板（真实：OutlinePanel.vue）+ Files / Terminal 合并 tab 面板
+      （真实：ChatPanel.vue 的 showToolPanel + activeToolPanel，顶栏入口受 isSuperAdmin 门控）
+
+  ★ 本版配色变化（相对 hermes-ui-cyber-api.html）
+    原来只有青色一个强调色，语义全靠"青 / 绿 / 红 / 黄"混着顶。
+    现在改成三色分工，各自只干一件事：
+      青 (--acc)     = 主色。品牌、主按钮、当前选中、运行中。只强调"这是系统本体"。
+      橙 (--amber)   = 需要你介入。审批卡、等待确认、上下文即将超限。
+      荧光绿 (--lime) = 机器在动。工具调用成功、流式输出、连接健康、token 余量充足。
+    规则：同屏内每种颜色只承担一种含义，绝不混用。危险红单独保留给"出错"。
+
+  令牌接入映射（→ packages/client/src/styles/variables.scss）：
+    --bg / --surface / --surface-2 / --surface-3 / --input-bg
+    --fg / --fg-soft / --muted / --faint / --border / --hairline
+    --acc / --acc-hv / --acc-ink / --acc-soft
+    --amber / --amber-soft  → 新增 --warning / --warning-soft
+    --lime  / --lime-soft   → 新增 --success / --success-soft
+    --err / --info         → 沿用 --error / --info
+  ============================================================================
+-->
+<style>
+/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
+:root{
+  /* 背景四层：向下沉 / 向上浮 */
+  --bg:         oklch(0.155 0.012 250);
+  --surface:    oklch(0.130 0.012 250);
+  --surface-2:  oklch(0.185 0.014 248);
+  --surface-3:  oklch(0.225 0.016 246);
+  --input-bg:   oklch(0.105 0.012 252);
+  --code-bg:    oklch(0.115 0.014 250);
+
+  /* 文字四层 */
+  --fg:      oklch(0.945 0.006 200);
+  --fg-soft: oklch(0.860 0.008 210);
+  --muted:   oklch(0.705 0.014 230);
+  --faint:   oklch(0.520 0.014 236);
+
+  --border:   oklch(0.305 0.018 242);
+  --hairline: oklch(0.255 0.016 244);
+
+  /* ── 三色语义系统 ──────────────────────────────────────────────────────
+     青 = 主色 / 系统本体        橙 = 需你介入        荧光绿 = 机器在动     */
+  --acc:        oklch(0.805 0.148 188);          /* 霓虹青 */
+  --acc-hv:     oklch(0.870 0.150 188);
+  --acc-ink:    oklch(0.160 0.030 200);
+  --acc-soft:   oklch(0.805 0.148 188 / 0.13);
+  --acc-line:   oklch(0.805 0.148 188 / 0.38);
+
+  --amber:      oklch(0.780 0.155  68);          /* 琥珀橙 —— 待你介入 */
+  --amber-hv:   oklch(0.850 0.150  72);
+  --amber-soft: oklch(0.780 0.155  68 / 0.12);
+  --amber-line: oklch(0.780 0.155  68 / 0.42);
+
+  --lime:       oklch(0.860 0.190 128);          /* 荧光绿 —— 机器在动 */
+  --lime-hv:    oklch(0.910 0.185 130);
+  --lime-soft:  oklch(0.860 0.190 128 / 0.12);
+  --lime-line:  oklch(0.860 0.190 128 / 0.40);
+
+  /* 危险红单独保留：只表示"出错"，不参与上面三色分工 */
+  --err:        oklch(0.665 0.185  22);
+  --err-soft:   oklch(0.665 0.185  22 / 0.11);
+  --err-line:   oklch(0.665 0.185  22 / 0.42);
+
+  --font-display: ui-monospace,'JetBrains Mono','SF Mono','Menlo','Cascadia Code',monospace;
+  --font-body: -apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Segoe UI',Roboto,sans-serif;
+
+  --rail-w: 288px; --top-h: 60px;
+  --radius: 6px; --radius-lg: 8px;
+  --shadow: 0 18px 48px oklch(0 0 0 / 0.55);
+}
+
+/* ── 2. RESET ────────────────────────────────────────────────────────────── */
+*,*::before,*::after{box-sizing:border-box}
+html,body{height:100%}
+body{
+  margin:0; background:var(--bg); color:var(--fg);
+  font:14px/1.55 var(--font-body);
+  -webkit-font-smoothing:antialiased;
+}
+.mono{font-family:var(--font-display)}
+.grow{flex:1;min-width:0}
+.right{margin-left:auto;display:flex;align-items:center;gap:6px}
+.mt4{margin-top:4px}.mt8{margin-top:8px}.mt16{margin-top:16px}
+.xs{font-size:11px}
+.fnt{font-family:var(--font-display)}
+.acc{color:var(--acc)}
+
+/* ── 3. BUTTONS ──────────────────────────────────────────────────────────── */
+/* 空心管壁按钮：底透明，只有边框发光。这就是「霓虹灯广告牌」的质感 */
+.btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--radius);
+  border:1px solid var(--border);background:var(--surface-2);color:var(--fg);font-size:12.5px;transition:.14s;white-space:nowrap;cursor:pointer}
+.btn:hover{border-color:var(--faint);background:var(--surface-3)}
+.btn.sm{height:25px;padding:0 9px;font-size:11.5px}
+/* 主按钮：空心 + 青管壁 + 内发光，跟随系统主色 */
+.btn.pri{background:transparent;border-color:var(--acc-line);color:var(--acc);
+  box-shadow:inset 0 0 12px oklch(0.805 0.148 188/.12),0 0 10px oklch(0.805 0.148 188/.34),0 0 22px oklch(0.805 0.148 188/.17);
+  text-shadow:0 0 8px oklch(0.805 0.148 188/.45)}
+.btn.pri:hover{border-color:var(--acc);color:var(--acc-hv);
+  box-shadow:inset 0 0 16px oklch(0.805 0.148 188/.2),0 0 14px oklch(0.805 0.148 188/.5),0 0 30px oklch(0.805 0.148 188/.26)}
+/* 橙按钮：需要你介入的动作 */
+.btn.amber{background:transparent;border-color:var(--amber-line);color:var(--amber);
+  box-shadow:inset 0 0 12px oklch(0.780 0.155 68/.12),0 0 10px oklch(0.780 0.155 68/.3),0 0 22px oklch(0.780 0.155 68/.15);
+  text-shadow:0 0 8px oklch(0.780 0.155 68/.4)}
+.btn.amber:hover{border-color:var(--amber);color:var(--amber-hv);
+  box-shadow:inset 0 0 16px oklch(0.780 0.155 68/.2),0 0 14px oklch(0.780 0.155 68/.46),0 0 30px oklch(0.780 0.155 68/.24)}
+.btn.danger{background:transparent;border-color:var(--err-line);color:var(--err)}
+.btn.danger:hover{background:var(--err-soft);box-shadow:0 0 12px oklch(0.665 0.185 22/.3)}
+.btn.ghost{background:transparent}
+.btn.on{color:var(--acc);border-color:var(--acc-line);background:var(--acc-soft)}
+
+.icon-btn{width:26px;height:26px;display:grid;place-items:center;border-radius:var(--radius);
+  border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;transition:.14s}
+.icon-btn:hover{color:var(--acc);border-color:var(--acc-line);background:var(--acc-soft)}
+.icon-btn.on{color:var(--acc);border-color:var(--acc-line);background:var(--acc-soft);
+  box-shadow:inset 0 0 10px oklch(0.805 0.148 188/.14)}
+
+/* 发送键：青管壁 + 从左到右扫过的白色高光 */
+.send-btn{width:28px;height:26px;display:grid;place-items:center;border-radius:var(--radius);
+  border:1px solid var(--acc-line);background:transparent;color:var(--acc);cursor:pointer;position:relative;overflow:hidden;
+  box-shadow:inset 0 0 10px oklch(0.805 0.148 188/.18),0 0 10px oklch(0.805 0.148 188/.36)}
+.send-btn::after{content:'';position:absolute;top:0;bottom:0;width:42%;
+  background:linear-gradient(90deg,transparent,oklch(0.985 0.003 200/.85),transparent);
+  animation:sheen 3.4s ease-in-out infinite;pointer-events:none}
+@keyframes sheen{0%,62%{transform:translateX(-160%)}86%,100%{transform:translateX(340%)}}
+.send-btn:hover{box-shadow:inset 0 0 14px oklch(0.805 0.148 188/.28),0 0 14px oklch(0.805 0.148 188/.55)}
+
+/* ── 4. TAGS / LEDS ──────────────────────────────────────────────────────── */
+.tag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:4px;
+  font:11px/1 var(--font-display);border:1px solid var(--border);background:var(--surface-2);color:var(--muted);white-space:nowrap}
+/* 语义标签：每种颜色只表示一件事 */
+.tag.acc{color:var(--acc);border-color:var(--acc-line);background:var(--acc-soft)}
+.tag.amber{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
+.tag.lime{color:var(--lime);border-color:var(--lime-line);background:var(--lime-soft)}
+.tag.err{color:var(--err);border-color:var(--err-line);background:var(--err-soft)}
+
+.led{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--faint);box-shadow:0 0 6px currentColor}
+.led.acc{background:var(--acc);color:var(--acc)}
+.led.lime{background:var(--lime);color:var(--lime)}
+.led.amber{background:var(--amber);color:var(--amber);animation:pulse 1.4s infinite}
+.led.err{background:var(--err);color:var(--err)}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
+
+/* ── 5. SESSION LIST ─────────────────────────────────────────────────────── */
+.psl{display:grid;grid-template-columns:var(--rail-w) 1fr;height:100%;min-height:0;position:relative}
+.psl.with-rail{grid-template-columns:var(--rail-w) 1fr 300px}
+/* 主区是三栏里唯一可压缩的，标题区不能被挤成竖排：
+   顶栏各段在窄宽度下按优先级隐藏，标题给足 min-width。 */
+.chat-header .grow{min-width:0}
+.chat-header .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.chat-header .meta-row{display:flex;align-items:center;gap:8px;min-width:0}
+@media (max-width:1180px){
+  .psl.with-rail{grid-template-columns:var(--rail-w) 1fr}
+  /* Outline 改为浮层覆盖，不再挤压主区 */
+  .psl.with-rail .outline{position:absolute;right:0;top:0;bottom:0;width:280px;z-index:4;
+    box-shadow:-18px 0 48px oklch(0 0 0 / .55)}
+  .psl.with-rail .outline::after{display:none}
+}
+@media (max-width:900px){
+  .psl,.psl.with-rail{grid-template-columns:1fr}
+  .psl>div:first-child{display:none}
+  .chat-header .ws-tag{display:none}
+}
+
+.slist-h{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px;border-bottom:1px solid var(--border)}
+.slist-body{flex:1;overflow:auto;min-height:0;padding:8px}
+/* 分组标题：等宽 + 大字距 + 拖尾发丝线 */
+.slist-group-t{font:10px/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;
+  color:var(--faint);padding:10px 8px 6px;display:flex;align-items:center;gap:7px}
+.slist-group-t::after{content:'';flex:1;height:1px;background:var(--hairline)}
+
+.s-item{display:flex;align-items:flex-start;gap:8px;padding:8px 9px;border-radius:var(--radius);
+  border:1px solid transparent;transition:.14s;cursor:pointer;position:relative;color:inherit;text-decoration:none}
+.s-item:hover{background:var(--surface-2)}
+/* 当前会话：青色软底 + 左侧发光条（与全局侧栏同构） */
+.s-item.on{background:var(--acc-soft);border-color:oklch(0.805 0.148 188/.3)}
+.s-item.on::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
+  width:2px;height:16px;background:var(--acc);border-radius:2px;box-shadow:0 0 8px var(--acc)}
+.s-item .t{font-size:12.5px;line-height:1.4}
+.s-item .m{font-size:11px;color:var(--faint);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.s-item.pin .t::before{content:'▮';font-size:9px;margin-right:4px;color:var(--amber)}
+
+/* ── 6. CHAT MAIN ────────────────────────────────────────────────────────── */
+.chat-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);position:relative}
+/* 顶栏压一层青色微光，避免整片死黑 */
+.chat-main::after{content:'';position:absolute;inset:0;pointer-events:none;
+  background:radial-gradient(120% 55% at 50% 0%,oklch(0.805 0.148 188/.05),transparent 62%)}
+
+.chat-header{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px;
+  border-bottom:1px solid var(--border);min-height:var(--top-h);position:relative;z-index:1}
+.chat-header .ttl{font:600 14px/1.3 var(--font-display)}
+
+.chat-body{flex:1;overflow:auto;min-height:0;padding:18px 20px;position:relative;z-index:1}
+.chat-body-inner{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
+
+/* ── 7. BUBBLES ──────────────────────────────────────────────────────────── */
+.bubble-row{display:flex;gap:10px}
+.bubble-row.user{flex-direction:row-reverse}
+.bubble-av{width:26px;height:26px;border-radius:var(--radius);flex:0 0 auto;display:grid;place-items:center;
+  font:10px/1 var(--font-display);border:1px solid var(--border);background:var(--surface-2);color:var(--muted)}
+/* 用户 = 青（你在驱动的会话） */
+.bubble-row.user .bubble-av{border-color:var(--acc-line);color:var(--acc);background:var(--acc-soft);
+  box-shadow:inset 0 0 10px oklch(0.805 0.148 188/.14)}
+/* 助手 = 荧光绿（机器在动） */
+.bubble-row.assistant .bubble-av{border-color:var(--lime-line);color:var(--lime);background:var(--lime-soft);
+  box-shadow:inset 0 0 10px oklch(0.860 0.190 128/.14)}
+
+.bubble{max-width:min(78%,720px);padding:10px 13px;border-radius:var(--radius-lg);
+  border:1px solid var(--border);background:var(--surface);font-size:13.5px;line-height:1.68;
+  white-space:pre-wrap;word-break:break-word}
+.bubble-row.user .bubble{background:var(--surface-2)}
+/* 助手气泡左侧压一道荧光绿，暗示"这段是机器产出的" */
+.bubble-row.assistant .bubble{border-left:2px solid var(--lime-line)}
+.bubble-row.tool .bubble,.bubble-row.command .bubble{font-family:var(--font-display);font-size:11.5px;color:var(--muted)}
+.bubble-row.system .bubble{border-style:dashed;color:var(--muted);font-size:12px}
+.bubble-row.system.err .bubble{border-color:var(--err-line);color:var(--err);background:var(--err-soft)}
+.bubble-row.moa .bubble{border-color:oklch(0.700 0.110 245/.4)}
+.bubble .meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:10.5px/1 var(--font-display);color:var(--faint)}
+
+/* 正文内的 markdown：行内 code / 粗体 / 代码块 */
+.md-code-in{font-family:var(--font-display);font-size:12.5px;padding:1px 5px;border-radius:4px;
+  background:var(--input-bg);border:1px solid var(--hairline);color:var(--lime)}
+.md-strong{color:var(--fg);font-weight:600}
+.md-code{font-family:var(--font-display);font-size:12px;line-height:1.6;color:var(--fg-soft);
+  background:var(--input-bg);border:1px solid var(--hairline);border-radius:var(--radius);
+  padding:9px 11px;margin:8px 0;overflow:auto;white-space:pre}
+
+/* 推理过程：凹陷区块，等宽 */
+.reasoning{margin-top:8px;border:1px dashed var(--border);border-radius:var(--radius);
+  padding:8px 10px;background:var(--input-bg);font:11.5px/1.6 var(--font-display);color:var(--faint)}
+.reasoning .rt{color:var(--muted);cursor:pointer;user-select:none}
+
+/* 工具调用卡：荧光绿表示「机器已执行」 */
+.tool-call{margin-top:8px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
+.tool-call .th{display:flex;align-items:center;gap:7px;padding:6px 9px;
+  background:oklch(0.860 0.190 128/.07);border-bottom:1px solid var(--hairline);font:11px/1.4 var(--font-display)}
+.tool-call .th .rt{margin-left:auto;color:var(--faint)}
+.term{font-family:var(--font-display);font-size:11.5px;color:var(--muted);background:var(--input-bg);
+  padding:8px 9px;overflow:auto;white-space:pre-wrap}
+
+.fork-divider{display:flex;align-items:center;gap:10px;color:var(--faint);font:11px/1 var(--font-display)}
+.fork-divider::before,.fork-divider::after{content:'';flex:1;height:1px;background:var(--hairline)}
+
+/* 流式输出光标 */
+.caret{display:inline-block;width:6px;height:13px;background:var(--lime);vertical-align:-2px;
+  box-shadow:0 0 8px var(--lime);animation:pulse 1s infinite}
+
+/* ── 8. APPROVAL CARD ────────────────────────────────────────────────────── */
+/* 橙色专属：需要你介入，不允许被别处复用 */
+.appr{border:1px solid var(--amber-line);background:var(--amber-soft);border-radius:var(--radius-lg);padding:12px 14px;
+  box-shadow:inset 0 0 22px oklch(0.780 0.155 68/.06),0 0 20px oklch(0.780 0.155 68/.1)}
+.appr .q{font:600 13px/1.4 var(--font-display);color:var(--amber);
+  display:flex;align-items:center;gap:7px;text-shadow:0 0 10px oklch(0.780 0.155 68/.35)}
+.appr .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+
+/* ── 9. COMPOSER ─────────────────────────────────────────────────────────── */
+.ctx-row{display:flex;align-items:center;gap:8px;padding:0 2px 6px;font:11px/1 var(--font-display);color:var(--faint)}
+/* 上下文余量条：绿 → 橙 → 红 三段，和气泡色语义完全一致 */
+.meter{flex:1;height:4px;border-radius:2px;background:rgba(120,132,148,.2);overflow:hidden;position:relative}
+.meter i{display:block;height:100%;border-radius:2px;
+  background:linear-gradient(90deg,var(--lime),var(--lime-hv));
+  box-shadow:0 0 8px oklch(0.860 0.190 128/.6)}
+.meter.warn i{background:linear-gradient(90deg,var(--amber),var(--amber-hv));box-shadow:0 0 8px oklch(0.780 0.155 68/.6)}
+.meter.crit i{background:linear-gradient(90deg,var(--err),var(--err));box-shadow:0 0 8px oklch(0.665 0.185 22/.6)}
+
+.chat-input{flex:0 0 auto;border-top:1px solid var(--border);padding:10px 14px 12px;background:var(--surface);position:relative;z-index:1}
+.chat-input .box{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--input-bg);padding:8px 10px;
+  transition:border-color .16s,box-shadow .16s}
+.chat-input .box:focus-within{border-color:oklch(0.805 0.148 188/.5);
+  box-shadow:0 0 0 3px oklch(0.805 0.148 188/.08),inset 0 0 14px oklch(0.805 0.148 188/.06)}
+.chat-input .ta{width:100%;background:none;border:none;resize:none;min-height:44px;
+  font-size:13.5px;line-height:1.6;color:var(--fg);font-family:var(--font-body)}
+.chat-input .ta:focus{outline:none}
+.chat-input .ta::placeholder{color:var(--faint)}
+.chat-input .bar{display:flex;align-items:center;gap:6px;margin-top:6px}
+
+/* ── 10. OUTLINE / TOOL PANEL ─────────────────────────────────────────────── */
+.outline{border-left:1px solid var(--border);background:var(--surface);overflow:auto;padding:12px;position:relative;z-index:1}
+.outline::after{content:'';position:absolute;inset:0;pointer-events:none;
+  background:radial-gradient(120% 45% at 50% 0%,oklch(0.805 0.148 188/.045),transparent 60%)}
+.sec-t{font:10px/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:14px 0 7px}
+.sec-t:first-child{margin-top:0}
+.oi{padding:6px 8px;border-radius:4px;font-size:12px;color:var(--muted);cursor:pointer;
+  border-left:2px solid transparent;position:relative}
+.oi:hover{background:var(--surface-2);color:var(--fg)}
+/* 大纲当前条目：青色下划，和全局侧栏选中态同构 */
+.oi.on{color:var(--acc);border-left-color:var(--acc);background:var(--acc-soft)}
+
+/* 工具面板：Files / Terminal 合并成一个 tab 面板。
+   对应 ChatPanel.vue 的 showToolPanel + activeToolPanel（'files' | 'terminal'），
+   不是一个时刻只能开一个抽屉；顶栏入口在真实实现里受 isSuperAdmin 门控。 */
+.tool-p{position:absolute;top:0;right:0;bottom:0;width:300px;border-left:1px solid var(--border);
+  background:var(--surface);z-index:3;display:flex;flex-direction:column}
+.tool-tabs{flex:0 0 auto;display:flex;border-bottom:1px solid var(--border)}
+.tool-tab{flex:1;height:34px;border:none;border-bottom:2px solid transparent;background:transparent;
+  color:var(--muted);font:11px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;
+  cursor:pointer;transition:.14s}
+.tool-tab:hover{color:var(--fg);background:var(--surface-2)}
+.tool-tab.on{color:var(--acc);border-bottom-color:var(--acc)}
+.row-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);
+  border-radius:var(--radius);background:var(--surface-2);transition:.14s;cursor:pointer}
+.row-i:hover{border-color:oklch(0.805 0.148 188/.35)}
+.row-i .ttl{font-size:12px}
+.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+/* ── 11. LAYOUT ──────────────────────────────────────────────────────────── */
+.app{display:flex;height:100vh;overflow:hidden}
+.stage{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
+.topbar{flex:0 0 auto;height:var(--top-h);display:flex;align-items:center;gap:10px;padding:0 14px;
+  border-bottom:1px solid var(--border);background:var(--surface);position:relative}
+.topbar::after{content:'';position:absolute;inset:0;pointer-events:none;
+  background:radial-gradient(120% 60% at 50% 0%,oklch(0.805 0.148 188/.05),transparent 62%)}
+.brand-mark{width:26px;height:26px;border-radius:var(--radius);display:grid;place-items:center;
+  font:700 12px/1 var(--font-display);color:var(--acc);
+  border:1px solid var(--acc);
+  box-shadow:0 0 0 1px oklch(0.805 0.148 188/.18),0 0 14px oklch(0.805 0.148 188/.22) inset}
+.brand-t{font:600 13px/1 var(--font-display);letter-spacing:.06em}
+
+/* 场景切换器：只在原型里存在，接入时删掉 */
+.switcher{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--hairline);
+  background:var(--surface);flex-wrap:wrap}
+.switcher .lb{font:10px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-right:2px}
+
+/* ── 12. PALETTE STRIP ───────────────────────────────────────────────────── */
+.strip{display:flex;align-items:center;gap:0;flex-wrap:wrap}
+.sw{display:flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--border);
+  border-radius:var(--radius);background:var(--surface-2);margin:0 6px 6px 0}
+.sw .dot{width:10px;height:10px;border-radius:2px;flex:0 0 auto}
+.sw .nm{font:11px/1 var(--font-display)}
+.sw .hx{font:10px/1 var(--font-display);color:var(--faint)}
+.sw.acc .dot{background:var(--acc);box-shadow:0 0 8px var(--acc)}
+.sw.amber .dot{background:var(--amber);box-shadow:0 0 8px var(--amber)}
+.sw.lime .dot{background:var(--lime);box-shadow:0 0 8px var(--lime)}
+.sw.err .dot{background:var(--err);box-shadow:0 0 8px var(--err)}
+.sw.plain .dot{background:var(--border)}
+</style>
+</head>
+<body>
+
+<div class="app">
+  <div class="stage">
+
+    <!-- ═══ 顶栏 ═══ -->
+    <div class="topbar">
+      <div class="brand-mark">H</div>
+      <div class="brand-t">HERMES</div>
+      <span class="tag acc">对话台</span>
+      <div class="right">
+        <span class="tag lime"><span class="led lime"></span>WebSocket 已连接</span>
+        <span class="tag">v0.6.29</span>
+      </div>
+    </div>
+
+    <!-- ═══ 场景切换（仅原型） ═══ -->
+    <div class="switcher">
+      <span class="lb">场景</span>
+      <button class="btn sm on" data-sc="idle">常态</button>
+      <button class="btn sm" data-sc="streaming">流式输出</button>
+      <button class="btn sm" data-sc="approval">审批卡</button>
+      <button class="btn sm" data-sc="warn">上下文将满</button>
+      <button class="btn sm" data-sc="tool">工具调用</button>
+      <button class="btn sm" data-sc="error">系统错误</button>
+      <div class="grow"></div>
+      <span class="lb">右侧</span>
+      <button class="btn sm" data-toggle="outline">Outline</button>
+      <button class="btn sm" data-toggle="tool">Files / Terminal</button>
+    </div>
+
+    <!-- ═══ 配色说明 ═══ -->
+    <div style="padding:12px 14px 0">
+      <div class="sec-t" style="margin-top:0">三色语义 —— 每种颜色只承担一种含义</div>
+      <div class="strip">
+        <div class="sw acc"><span class="dot"></span><span class="nm">霓虹青</span><span class="hx">主色 · 系统本体 · 当前选中</span></div>
+        <div class="sw amber"><span class="dot"></span><span class="nm">琥珀橙</span><span class="hx">需要你介入 · 审批 / 即将超限</span></div>
+        <div class="sw lime"><span class="dot"></span><span class="nm">荧光绿</span><span class="hx">机器在动 · 工具成功 / 流式 / 健康</span></div>
+        <div class="sw err"><span class="dot"></span><span class="nm">危险红</span><span class="hx">出错（不参与三色分工）</span></div>
+      </div>
+    </div>
+
+    <!-- ═══ 对话台主体 ═══ -->
+    <div style="flex:1;min-height:0;padding:12px 14px 14px" id="host"></div>
+  </div>
+</div>
+
+<script>
+/* ── helpers ─────────────────────────────────────────────────────────────── */
+const esc = s => String(s ?? '').replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
+const tag  = (cls, t) => `<span class="tag ${cls}">${t}</span>`;
+
+/* 极简 markdown：行内 code / 粗体 / 代码块。真实实现走 MarkdownRenderer.vue，
+   这里只为了让原型里的排版和接入后一致，不引入依赖。 */
+function md(src){
+  const blocks = [];
+  let s = String(src ?? '');
+  // 先摘出代码块，避免块内被行内规则改坏
+  s = s.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) => {
+    blocks.push(`<pre class="md-code">${esc(code.replace(/\n$/, ''))}</pre>`);
+    return `\u0000B${blocks.length - 1}\u0000`;
+  });
+  s = esc(s)
+    .replace(/`([^`]+)`/g, '<code class="md-code-in">$1</code>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong class="md-strong">$1</strong>');
+  s = s.replace(/\u0000B(\d+)\u0000/g, (_, i) => blocks[+i]);
+  return s;
+}
+
+/* ── 场景数据：role 全集 user/assistant/tool/command/system/moa ─────────── */
+const SCENES = {
+  idle: [
+    { role:'user', ts:1710409200, content:'帮我看一下 kanban 那个列宽问题。' },
+    { role:'assistant', ts:1710409215,
+      content:'看过了。`.col` 的宽度写死在 `grid-template-columns` 里，窄视口下没有降级规则。\n\n我准备把它改成 `minmax(140px, 1fr)`，这样 3 列以上会自动压缩。',
+      reasoning:'用户问的是列宽。先确认断点行为，再看是不是 overflow 的问题。已读 KanbanColumn.vue，确认没有媒体查询。' },
+    { role:'tool', ts:1710409230, toolName:'read_file', result:'ok · 214 lines',
+      content:'packages/client/src/components/hermes/kanban/KanbanColumn.vue' },
+    { role:'assistant', ts:1710409245,
+      content:'确认了。改动很小，只动一行。要我直接改吗？' },
+  ],
+  streaming: [
+    { role:'user', ts:1710409200, content:'梳理一下 context-compressor 的压缩策略。' },
+    { role:'assistant', ts:1710409210, streaming:true,
+      content:'压缩策略分三层：\n\n1. **触发** — `triggerRatio` 默认 0.85，token 用量超过窗口的 85% 触发\n2. **保留** — `keepRecent` 最近 N 轮原样保留，不参与压缩\n3. **摘要** — 中间历史交给 `targetTokens` 指定的目标模型生成摘要',
+      reasoning:'先列三层结构，再逐层展开。注意 keepRecent 和 targetTokens 的边界条件。' },
+  ],
+  approval: [
+    { role:'user', ts:1710409200, content:'把列宽改成 minmax(140px, 1fr)，然后跑一遍测试。' },
+    { role:'tool', ts:1710409215, toolName:'edit_file', result:'pending',
+      content:'KanbanColumn.vue → 覆盖 1 行' },
+    { role:'assistant', ts:1710409218,
+      content:'我准备改这一行，但需要你确认：\n\n```diff\n- grid-template-columns: repeat(3, 180px);\n+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n```' },
+    { approval:true },
+  ],
+  warn: [
+    { role:'user', ts:1710409200, content:'继续把剩下的页面都过一遍。' },
+    { role:'assistant', ts:1710409210,
+      content:'已经过了 9 个页面。还有 16 个要处理。' },
+  ],
+  tool: [
+    { role:'user', ts:1710409200, content:'跑一下 harness:check。' },
+    { role:'tool', ts:1710409212, toolName:'run_command', result:'exit 0 · 1.4s',
+      content:'$ npm run harness:check\n▸ checking package boundaries…\n  ✓ packages/client does not import @/server\n  ✓ packages/server does not import @/client\n▸ checking red lines…\n  ✓ no state.db open from node\n▸ done in 1.4s' },
+    { role:'assistant', ts:1710409218, content:'全绿，没有违规。' },
+  ],
+  error: [
+    { role:'user', ts:1710409200, content:'连一下远端 profile。' },
+    { role:'system', ts:1710409205, systemType:'error', content:'WebSocket 连接被拒绝：token 校验失败（401）。请重新登录。' },
+    { role:'system', ts:1710409210, systemType:'command', content:'/profile switch default' },
+  ],
+};
+
+/* ── 渲染：会话列表 ───────────────────────────────────────────────────────── */
+const SESSIONS = {
+  pinned: [
+    { t:'kanban 列宽根因分析', src:'api_server', n:24, at:'14:32' },
+    { t:'context-compressor 策略梳理', src:'cron', n:61, at:'13:08' },
+  ],
+  today: [
+    { t:'CYBER 主题 · 设置页骨架', src:'api_server', n:18, at:'15:20' },
+    { t:'Monaco 加载亮色主题的 bug', src:'terminal', n:9, at:'11:47' },
+    { t:'group-chat WS 事件流排查', src:'group_chat', n:33, at:'10:15' },
+  ],
+  earlier: [
+    { t:'Vite proxy 配置回归', src:'api_server', n:12, at:'昨天' },
+    { t:'记忆页三卡片布局', src:'api_server', n:7, at:'昨天' },
+    { t:'登录页 autofill 样式接管', src:'api_server', n:15, at:'周三' },
+  ],
+};
+const SRC_TAG = { api_server:'api_server', cron:'cron', channel:'channel', group_chat:'group_chat',
+                  terminal:'terminal', file:'file', workflow:'workflow', kanban:'kanban' };
+/* source 标签配色：跟着语义走，不乱用 */
+const SRC_CLS = { api_server:'', cron:'acc', channel:'amber', group_chat:'', terminal:'lime', file:'', workflow:'', kanban:'' };
+
+function sessionList(){
+  const grp = (title, items, pinned) =>
+    `<div class="slist-group-t">${title}</div>` + items.map((s,i)=>
+      `<a class="s-item ${i===0&&!pinned?'':''} ${pinned?'pin':''}">
+        <span class="grow"><span class="t">${esc(s.t)}</span>
+        <span class="m">${tag(SRC_CLS[s.src], s.src)}<span>${s.n} 条</span><span>${s.at}</span></span>
+      </span></a>`).join('');
+  return `<div style="display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border);background:var(--surface)">
+    <div class="slist-h">
+      <span class="fnt" style="font-size:11.5px;color:var(--muted)">会话</span>
+      <div class="right">
+        <button class="icon-btn" title="搜索">⌕</button>
+        <button class="icon-btn on" title="新建会话">＋</button>
+      </div>
+    </div>
+    <div class="slist-body">
+      ${grp('置顶', SESSIONS.pinned, true)}
+      ${grp('今天', SESSIONS.today, false)}
+      ${grp('更早', SESSIONS.earlier, false)}
+    </div>
+  </div>`;
+}
+
+/* ── 渲染：气泡 ───────────────────────────────────────────────────────────── */
+const AV = { user:'我', assistant:'AI', tool:'⚙', system:'⚑', command:'›', moa:'◇' };
+
+function bubble(m, i){
+  if (m.role === 'system' && m.systemType === 'fork-divider')
+    return `<div class="fork-divider">${esc(m.content)}</div>`;
+
+  const isTool = !!m.toolName;
+  const inner =
+    (m.reasoning ? `<div class="reasoning"><div class="rt">▸ 推理过程（可折叠）</div><div class="mt4">${esc(m.reasoning)}</div></div>` : '') +
+    // 工具输出走等宽 .term，不做 markdown；对话正文走 markdown。
+    (isTool ? `<div class="tool-call"><div class="th"><span class="led lime"></span>
+        <span>${esc(m.toolName)}</span><span class="rt">${esc(m.result || 'ok')}</span></div>
+        <div class="term">${esc(m.content)}</div></div>` : md(m.content)) +
+    (m.streaming ? `<span class="caret"></span>` : '');
+
+  const meta = m.role === 'tool' ? '' :
+    `<div class="meta"><span>${esc(m.role)}</span>
+      ${m.systemType ? tag(m.systemType === 'error' ? 'err' : 'acc', esc(m.systemType)) : ''}
+      <span>${String(m.ts).slice(-6, -4)}:${String(m.ts).slice(-2)}</span></div>`;
+
+  return `<div class="bubble-row ${esc(m.role)} ${m.systemType === 'error' ? 'err' : ''}">
+    <div class="bubble-av">${AV[m.role] ?? '·'}</div>
+    <div class="bubble">${meta}${inner}</div></div>`;
+}
+
+/* 审批卡：橙色专属区 */
+const approval = () => `<div class="appr">
+  <div class="q"><span class="led amber"></span>需要审批 · 该工具将写入工作区文件</div>
+  <div class="term mt8" style="max-height:110px;border:1px solid var(--amber-line)">edit_file("packages/client/src/components/hermes/kanban/KanbanColumn.vue")
+  → 覆盖 1 行：grid-template-columns</div>
+  <div class="acts mt8">
+    <button class="btn amber sm">仅本次</button>
+    <button class="btn ghost sm">本会话允许</button>
+    <button class="btn ghost sm">始终允许</button>
+    <button class="btn danger sm">拒绝</button>
+  </div>
+  <div class="xs fnt mt8" style="color:var(--amber)">PendingApproval.choices = once | session | always | deny</div>
+</div>`;
+
+/* ── 渲染：输入区 ─────────────────────────────────────────────────────────── */
+function composer(ctxPct, cls){
+  const meterCls = ctxPct >= 90 ? 'crit' : ctxPct >= 70 ? 'warn' : '';
+  return `<div class="ctx-row">
+      <span>tokens ${ctxPct === 20.6 ? '41,208' : '180,540'} / 200,000</span>
+      <span class="meter ${meterCls}"><i style="width:${Math.min(ctxPct,100)}%"></i></span>
+      <span style="color:var(--${ctxPct>=90?'err':ctxPct>=70?'amber':'lime'})">${ctxPct}%</span>
+    </div>
+    <div class="chat-input"><div class="box">
+      <textarea class="ta" rows="2" placeholder="输入消息，Enter 发送 · Shift+Enter 换行 · @ 提及文件"></textarea>
+      <div class="bar">
+        <button class="icon-btn" title="附件">📎</button>
+        <button class="btn sm ghost">effort: medium ▾</button>
+        <button class="icon-btn" title="输入设置">⚙</button>
+        <button class="btn sm ghost">claude-sonnet-4-5 ▾</button>
+        <span class="right">
+          <button class="icon-btn" title="语音">🎙</button>
+          <button class="send-btn" title="发送">↑</button>
+        </span>
+      </div>
+    </div></div>`;
+}
+
+/* ── 渲染：右侧面板 ───────────────────────────────────────────────────────── */
+const outlinePanel = () => `<aside class="outline">
+  <div class="sec-t">大纲 Outline</div>
+  ${['定位问题','列宽根因','最小改动','截断处理','验证'].map((t,i)=>
+    `<div class="oi ${i===0?'on':''}">${i+1}. ${t}</div>`).join('')}
+  <div class="sec-t">附件</div>
+  <div class="row-i" style="margin-bottom:6px"><span class="mono xs">▤</span><span class="ttl ell">KanbanColumn.vue</span></div>
+  <div class="row-i"><span class="mono xs">▤</span><span class="ttl ell">sketch-01.png</span></div>
+</aside>`;
+
+/* 工具面板：Files / Terminal 是同一个面板里的两个 tab，不是两个互斥抽屉。
+   对应 ChatPanel.vue 的 showToolPanel + activeToolPanel + FilesPanel/TerminalPanel。 */
+const TOOL_FILES = ['src/components/hermes/kanban/KanbanColumn.vue','src/components/hermes/kanban/KanbanView.vue','src/views/hermes/ChatView.vue'];
+const TOOL_TERM = `HERMES terminal · WebSocket 已连接 · token 走 query
+<span class="acc">$</span> npm run harness:check
+
+<span style="color:var(--lime)">  ✓</span> checking package boundaries…
+<span style="color:var(--lime)">  ✓</span> no state.db open from node
+<span style="color:var(--amber)">  !</span> scripts/harness-check.mjs: 3 whitelisted addresses
+<span style="color:var(--lime)">▸</span> done in 1.4s
+
+<span class="acc">$</span> <span class="caret"></span>`;
+
+const toolPanel = tab => `<div class="tool-p">
+  <div class="tool-tabs">
+    <button class="tool-tab ${tab==='files'?'on':''}" data-tab="files">Files</button>
+    <button class="tool-tab ${tab==='terminal'?'on':''}" data-tab="terminal">Terminal</button>
+  </div>
+  <div class="slist-body">
+    ${tab === 'files'
+      ? TOOL_FILES.map(f=>`<div class="row-i" style="margin-bottom:6px"><span class="mono xs">▤</span><span class="ttl ell">${f.split('/').pop()}</span></div>`).join('')
+      : `<div class="term" style="border:0;background:var(--code-bg)">${TOOL_TERM}</div>`}
+  </div></div>`;
+
+/* ── 主渲染 ───────────────────────────────────────────────────────────────── */
+const CTX = { idle:20.6, streaming:34, approval:20.6, warn:86, tool:20.6, error:20.6 };
+let scene = 'idle', panel = 'outline', toolTab = 'files';
+
+function render(){
+  const msgs = SCENES[scene];
+  const main = `<div class="chat-main">
+    <div class="chat-header">
+      <button class="icon-btn">⇤</button>
+      <div class="grow">
+        <div class="ttl">kanban 列宽根因分析</div>
+        <div class="xs fnt" style="color:var(--faint);margin-top:2px">01JQ8F2K · default profile</div>
+      </div>
+      ${tag('lime', '<span class="led lime"></span>streaming')}
+      ${tag('', '~/work/hermes-ui')}
+      <div class="right">
+        <button class="icon-btn ${panel==='tool'?'on':''}" data-toggle="tool" title="Files / Terminal">▤</button>
+        <button class="icon-btn ${panel==='outline'?'on':''}" data-toggle="outline" title="Outline">☰</button>
+        <button class="icon-btn" title="复制 sessionId">⧉</button>
+      </div>
+    </div>
+    <div class="chat-body"><div class="chat-body-inner">
+      ${msgs.map(bubble).join('')}
+      ${msgs.some(m => m.approval) ? approval() : ''}
+    </div></div>
+    ${composer(CTX[scene])}
+  </div>`;
+
+  document.getElementById('host').innerHTML =
+    `<div class="psl ${panel === 'outline' ? 'with-rail' : ''}">${sessionList()}${main}${panel === 'outline' ? outlinePanel() : ''}</div>` +
+    (panel === 'tool' ? toolPanel(toolTab) : '');
+}
+
+/* ── 事件 ────────────────────────────────────────────────────────────────── */
+document.addEventListener('click', e => {
+  const sc = e.target.closest('[data-sc]');
+  if (sc) {
+    scene = sc.dataset.sc;
+    document.querySelectorAll('[data-sc]').forEach(b => b.classList.toggle('on', b === sc));
+    return render();
+  }
+  const tb = e.target.closest('[data-tab]');
+  if (tb) { toolTab = tb.dataset.tab; return render(); }
+  const tg = e.target.closest('[data-toggle]');
+  if (tg) { panel = panel === tg.dataset.toggle ? null : tg.dataset.toggle; return render(); }
+});
+
+render();
+</script>
+</body>
+</html>
diff --git a/prototype_reference/hermes-ui-cyber-login.html b/prototype_reference/hermes-ui-cyber-login.html
new file mode 100644
index 0000000..99194a3
--- /dev/null
+++ b/prototype_reference/hermes-ui-cyber-login.html
@@ -0,0 +1,480 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Hermes Studio · 登录 · CYBER 原型</title>
+<!--
+  ============================================================================
+  Hermes Studio 登录页 · CYBER 霓虹暗色原型（单文件，不接入）
+  ----------------------------------------------------------------------------
+  纯静态。仅放在 prototype_reference/，不修改 packages/client 与 packages/server。
+
+  字段与行为对齐真实实现：
+    - 视图        packages/client/src/views/LoginView.vue
+    - 接口        packages/client/src/api/auth.ts
+    - 文案        packages/client/src/i18n/locales/{zh,en}.ts  login.*
+    - 装饰位面    packages/client/src/vendor/arkscore/IsometricWave（ArkScope）
+    - 标题扰动    packages/client/src/vendor/arkscore/ScrambleTitle
+
+  真实登录流程（不要改）：
+    onMounted → fetchAuthStatus()  GET /api/auth/status
+    提交      → loginWithPassword() POST /api/auth/login { username, password }
+              → 200 返回 { token } → setApiKey(token) → router.replace('/hermes/chat')
+    已有 token → 组件 setup 阶段直接 router.replace('/hermes/chat')
+
+  设计语言与 hermes-ui-cyber-api.html 一致（同一套 OKLCH 令牌）。
+  令牌映射（接入时按此替换为 variables.scss）：
+    --bg → --bg-primary   --surface → --bg-secondary  --input-bg → --bg-input
+    --fg → --text-primary --muted   → --text-secondary --border  → --border-color
+    --radius 6 / --radius-lg 8 → 同名（与 ui-baseline.md 一致）
+  ============================================================================
+-->
+<style>
+/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
+:root{
+  --bg:        oklch(0.155 0.012 250);
+  --surface:   oklch(0.130 0.012 250);
+  --surface-2: oklch(0.185 0.014 248);
+  --surface-3: oklch(0.225 0.016 246);
+  --input-bg:  oklch(0.105 0.012 252);
+  --code-bg:   oklch(0.115 0.014 250);
+  --fg:        oklch(0.945 0.006 200);
+  --fg-soft:   oklch(0.860 0.008 210);
+  --muted:     oklch(0.705 0.014 230);
+  --faint:     oklch(0.520 0.014 236);
+  --border:    oklch(0.305 0.018 242);
+  --hairline:  oklch(0.255 0.016 244);
+  --accent:    oklch(0.805 0.148 188);
+  --accent-hv: oklch(0.870 0.150 188);
+  --accent-ink:oklch(0.160 0.030 200);
+  --accent-soft:oklch(0.805 0.148 188 / 0.13);
+  --ok:        oklch(0.760 0.140 165);
+  --warn:      oklch(0.810 0.145  85);
+  --err:       oklch(0.665 0.185  22);
+  --info:      oklch(0.700 0.110 245);
+
+  --font-display: ui-monospace,'JetBrains Mono','SF Mono','Menlo','Cascadia Code',monospace;
+  --font-body: -apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Segoe UI',Roboto,sans-serif;
+
+  --radius: 6px; --radius-lg: 8px;
+  --shadow: 0 24px 64px oklch(0 0 0 / 0.6);
+}
+
+/* ── 2. RESET / BASE ─────────────────────────────────────────────────────── */
+*,*::before,*::after{box-sizing:border-box}
+html,body{height:100%}
+body{
+  margin:0; background:var(--bg); color:var(--fg);
+  font:14px/1.55 var(--font-body);
+  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
+}
+::selection{background:var(--accent-soft); color:var(--fg)}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}
+@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
+@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(1000%)}}
+@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
+
+/* ── 3. 装饰位面（ArkScope 等价物，纯装饰，pointer-events:none） ─────────── */
+.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
+.deco::before{content:'';position:absolute;inset:-40%;
+  background:repeating-linear-gradient(0deg,oklch(0.805 0.148 188/.055) 0 1px,transparent 1px 32px),
+             repeating-linear-gradient(90deg,oklch(0.805 0.148 188/.055) 0 1px,transparent 1px 32px);
+  mask-image:radial-gradient(62% 52% at 50% 34%,#000,transparent 78%)}
+.deco::after{content:'';position:absolute;inset:0;
+  background-image:radial-gradient(oklch(0.805 0.148 188/.13) 1px,transparent 1px);
+  background-size:22px 22px;opacity:.5}
+/* 扫描线 */
+.scanline{position:absolute;left:0;right:0;height:64px;top:0;
+  background:linear-gradient(180deg,transparent,oklch(0.805 0.148 188/.07) 45%,oklch(0.805 0.148 188/.14) 50%,oklch(0.805 0.148 188/.07) 55%,transparent);
+  animation:scan 7.5s linear infinite}
+/* 等距波形（对齐 IsometricWave） */
+.wave{position:absolute;left:50%;bottom:-56px;transform:translateX(-50%);
+  width:min(100%,780px);opacity:.42;pointer-events:none;z-index:0}
+.wave svg{width:100%;height:auto;display:block}
+
+/* ── 4. 布局 ─────────────────────────────────────────────────────────────── */
+.btn{display:inline-flex;align-items:center;height:30px;padding:0 12px;
+  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);
+  color:var(--fg-soft);font-size:12.5px;cursor:pointer;transition:background .13s,border-color .13s,color .13s}
+.btn:hover:not(:disabled){background:var(--surface-3);border-color:oklch(0.805 0.148 188/.34);color:var(--fg)}
+.btn:disabled{cursor:default;opacity:.7}
+.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
+.btn.pri:hover:not(:disabled){background:var(--accent-hv);border-color:var(--accent-hv);color:var(--accent-ink)}
+.btn.ghost{background:transparent}
+.view{position:relative;min-height:100vh;display:grid;place-items:center;padding:32px 20px;overflow:hidden}
+.card{position:relative;z-index:2;width:100%;max-width:424px;
+  border:1px solid var(--border);border-radius:var(--radius-lg);
+  background:var(--surface);box-shadow:var(--shadow);
+  animation:rise .5s cubic-bezier(.22,.9,.3,1) both}
+/* 顶部霓虹发丝线 */
+.card::before{content:'';position:absolute;left:16px;right:16px;top:0;height:1px;
+  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.6}
+.card-hd{padding:30px 30px 0;text-align:center}
+.badge{width:62px;height:62px;margin:0 auto 16px;border:1px solid var(--accent);border-radius:var(--radius-lg);
+  display:grid;place-items:center;color:var(--accent);font:700 24px/1 var(--font-display);
+  box-shadow:0 0 0 1px oklch(0.805 0.148 188/.2),0 0 30px oklch(0.805 0.148 188/.18) inset}
+h1{margin:0;font:600 19px/1.25 var(--font-display);letter-spacing:.08em}
+.sub{margin:9px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}
+.hint{margin:14px 0 0;display:inline-flex;align-items:center;gap:8px;
+  padding:5px 10px;border:1px dashed var(--hairline);border-radius:var(--radius);
+  background:var(--surface-2);font:11.5px/1.5 var(--font-display);color:var(--muted)}
+.hint b{color:var(--accent);font-weight:600}
+.card-bd{padding:22px 30px 26px}
+.form{display:flex;flex-direction:column;gap:14px}
+.field{display:flex;flex-direction:column;gap:6px}
+.field>label{font-size:11.5px;color:var(--muted);letter-spacing:.04em}
+/* 输入框：左侧 icon + 右侧状态灯 */
+.inp-wrap{position:relative;display:flex;align-items:center}
+.inp-ic{position:absolute;left:11px;font:13px/1 var(--font-display);color:var(--faint);pointer-events:none}
+.inp{
+  width:100%;height:40px;padding:0 34px 0 32px;border-radius:var(--radius);
+  border:1px solid var(--border);background:var(--input-bg);color:var(--fg);
+  font:14px var(--font-display);outline:none;
+  transition:border-color .15s ease,box-shadow .15s ease;
+}
+.inp::placeholder{color:var(--faint);font-size:13px}
+.inp:focus{border-color:oklch(0.805 0.148 188/.6);box-shadow:0 0 0 3px oklch(0.805 0.148 188/.11)}
+.inp.err{border-color:var(--err)}
+.inp.err:focus{box-shadow:0 0 0 3px oklch(0.665 0.185 22/.14)}
+.pw-toggle{position:absolute;right:9px;width:22px;height:22px;border:0;background:transparent;
+  color:var(--faint);cursor:pointer;font:12px/1 var(--font-display);border-radius:4px;padding:0}
+.pw-toggle:hover{color:var(--accent);background:var(--surface-2)}
+.led{width:7px;height:7px;border-radius:50%;position:absolute;right:12px;
+  background:var(--faint);box-shadow:0 0 6px currentColor}
+.led.ok{background:var(--ok);color:var(--ok)}
+.led.err{background:var(--err);color:var(--err)}
+/* 密码框的 eye 按钮要和 led 分开位置 */
+.inp-wrap.has-led .pw-toggle{right:26px}
+
+.submit{height:40px;justify-content:center;gap:8px;font-size:13.5px;letter-spacing:.06em;
+  position:relative;overflow:hidden}
+.submit[data-busy="1"]{pointer-events:none;color:var(--accent-ink)}
+.spin{width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;
+  border-radius:50%;animation:spin .7s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+/* 按钮扫光 */
+.submit::after{content:'';position:absolute;top:0;bottom:0;width:38%;
+  background:linear-gradient(90deg,transparent,oklch(1 0 0/.26),transparent);
+  transform:translateX(-140%);animation:sheen 3.4s ease-in-out infinite}
+@keyframes sheen{0%,62%{transform:translateX(-140%)}86%,100%{transform:translateX(320%)}}
+
+/* 消息条 */
+.msg{display:none;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:var(--radius);
+  font-size:12px;line-height:1.55;text-align:left}
+.msg.on{display:flex;animation:rise .22s ease both}
+.msg-ic{flex:0 0 auto;font:13px/1.35 var(--font-display)}
+.msg.err{border:1px solid oklch(0.665 0.185 22/.42);background:oklch(0.665 0.185 22/.09);color:var(--err)}
+.msg.warn{border:1px solid oklch(0.810 0.145 85/.4);background:oklch(0.810 0.145 85/.08);color:var(--warn)}
+.msg code{display:block;margin-top:5px;font:11.5px/1.5 var(--font-display);
+  color:var(--fg);background:var(--code-bg);border:1px solid var(--hairline);
+  border-radius:4px;padding:3px 6px;word-break:break-all;user-select:all}
+
+/* 页脚 */
+.card-ft{padding:0 30px 24px;text-align:center}
+.sep{display:flex;align-items:center;gap:11px;margin:0 0 14px;color:var(--faint);font-size:11px}
+.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--hairline)}
+.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:14px}
+.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:20px;
+  border:1px solid var(--hairline);background:var(--surface-2);
+  font:11px/1.4 var(--font-display);color:var(--muted)}
+.chip .dot{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 5px var(--ok)}
+.chip .dot.warn{background:var(--warn);box-shadow:0 0 5px var(--warn)}
+.copy{height:34px;justify-content:center;gap:7px;width:100%;font-size:12.5px}
+.legal{font-size:10.5px;color:var(--faint);text-align:center;line-height:1.7}
+.legal b{color:var(--muted);font-weight:400}
+
+/* ── 5. API 契约面板 ─────────────────────────────────────────────────────── */
+.api{margin-top:16px;border:1px solid var(--hairline);border-radius:var(--radius);
+  background:var(--surface-2);overflow:hidden}
+.api>summary{padding:9px 12px;cursor:pointer;list-style:none;font-size:11.5px;
+  color:var(--muted);display:flex;align-items:center;gap:7px;user-select:none}
+.api>summary::-webkit-details-marker{display:none}
+.api>summary::before{content:'▸';color:var(--accent);font-size:10px;transition:transform .15s}
+.api[open]>summary::before{transform:rotate(90deg)}
+.api-b{padding:0 12px 12px;display:flex;flex-direction:column;gap:11px}
+.ep{border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--code-bg)}
+.ep-h{display:flex;align-items:center;gap:8px;padding:7px 10px;flex-wrap:wrap}
+.verb{font:700 9.5px/1 var(--font-display);letter-spacing:.06em;padding:3px 5px;border-radius:3px}
+.verb.get{background:oklch(0.700 0.110 245/.17);color:var(--info,#8ab4f8);border:1px solid oklch(0.700 0.110 245/.36)}
+.verb.post{background:var(--accent-soft);color:var(--accent);border:1px solid oklch(0.805 0.148 188/.4)}
+.ep-p{font:12px/1.4 var(--font-display);color:var(--fg)}
+.ep-env{font:10.5px/1.4 var(--font-display);color:var(--muted);margin-left:auto}
+.flds{border-top:1px solid var(--hairline);padding:8px 10px;display:flex;flex-direction:column;gap:5px}
+.fld{font:11.5px/1.55 var(--font-display);color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
+.fk{color:var(--accent)}
+.fv{color:var(--fg-soft)}
+.ft{color:var(--faint);font-size:10.5px}
+.note{font:11.5px/1.65 var(--font-body);color:var(--muted);
+  padding:9px 11px;border-left:2px solid var(--accent);background:var(--accent-soft);border-radius:0 4px 4px 0}
+.note b{color:var(--fg-soft)}
+.code{font-family:var(--font-display);font-size:11px;background:var(--code-bg);
+  border:1px solid var(--hairline);border-radius:4px;padding:1px 5px;color:var(--accent)}
+
+/* 状态切换器（仅原型用，方便看不同分支） */
+.devbar{position:fixed;top:12px;right:12px;z-index:60;display:flex;gap:5px;
+  padding:4px;border:1px solid var(--hairline);border-radius:var(--radius);
+  background:oklch(0.13 0.012 250/.9);backdrop-filter:blur(6px)}
+.devbar button{height:24px;padding:0 9px;border:1px solid var(--hairline);border-radius:4px;
+  background:transparent;color:var(--muted);font:10.5px/1 var(--font-display);cursor:pointer}
+.devbar button.on{background:var(--accent-soft);color:var(--accent);border-color:oklch(0.805 0.148 188/.42)}
+
+@media (max-width:520px){
+  .card-hd{padding:26px 22px 0}.card-bd{padding:20px 22px 22px}.card-ft{padding:0 22px 20px}
+  .devbar{position:static;margin-bottom:14px;justify-content:center;flex-wrap:wrap}
+}
+</style>
+</head>
+<body>
+
+<!-- ══ 原型专用：状态切换器（接入时删除） ══ -->
+<div class="devbar" id="devbar">
+  <button data-scene="idle"  class="on">默认</button>
+  <button data-scene="error">401</button>
+  <button data-scene="empty">未填</button>
+  <button data-scene="locked">429 锁定</button>
+  <button data-scene="busy">提交中</button>
+  <button data-scene="ok">成功</button>
+</div>
+
+<div class="view">
+  <!-- ══ 装饰位面：只承载 ArkScope 动画，一律 pointer-events:none（基线硬规则） ══ -->
+  <div class="deco" aria-hidden="true"><div class="scanline"></div></div>
+  <div class="wave" aria-hidden="true">
+    <svg viewBox="0 0 780 260" fill="none" stroke="oklch(0.805 0.148 188)" stroke-width="1">
+      <g opacity=".55">
+        <path d="M0 200 L65 168 L130 200 L195 168 L260 200 L325 168 L390 200 L455 168 L520 200 L585 168 L650 200 L715 168 L780 200"/>
+        <path d="M0 232 L65 200 L130 232 L195 200 L260 232 L325 200 L390 232 L455 200 L520 232 L585 200 L650 232 L715 200 L780 232" opacity=".55"/>
+        <path d="M32.5 184 L97.5 152 L162.5 184 L227.5 152 L292.5 184 L357.5 152 L422.5 184 L487.5 152 L552.5 184 L617.5 152 L682.5 184 L747.5 152" opacity=".32"/>
+      </g>
+      <g stroke="oklch(0.870 0.150 188)" stroke-width="1.4" opacity=".9">
+        <path d="M195 168 L195 96 M227.5 152 L227.5 80 M455 168 L455 96 M487.5 152 L487.5 80"/>
+      </g>
+      <g fill="oklch(0.870 0.150 188)" opacity=".8">
+        <rect x="190" y="90" width="10" height="10" rx="1.5"/>
+        <rect x="222.5" y="74" width="10" height="10" rx="1.5"/>
+        <rect x="450" y="90" width="10" height="10" rx="1.5"/>
+        <rect x="482.5" y="74" width="10" height="10" rx="1.5"/>
+      </g>
+    </svg>
+  </div>
+
+  <!-- ══ 卡片 ══ -->
+  <main class="card">
+    <header class="card-hd">
+      <div class="badge" id="badge">H</div>
+      <h1 id="title">HERMES STUDIO</h1>
+      <p class="sub" id="desc">输入用户名和密码以继续。</p>
+      <p class="hint">
+        <span class="led" id="statusLed"></span>
+        <span id="statusTxt">正在探测服务端…</span>
+      </p>
+    </header>
+
+    <div class="card-bd">
+      <form class="form" id="form" autocomplete="off" novalidate>
+        <div class="field">
+          <label for="u">用户名</label>
+          <div class="inp-wrap">
+            <span class="inp-ic">◉</span>
+            <input class="inp" id="u" type="text" placeholder="用户名" autocomplete="username" />
+          </div>
+        </div>
+
+        <div class="field">
+          <label for="p">密码</label>
+          <div class="inp-wrap">
+            <span class="inp-ic">⌸</span>
+            <input class="inp" id="p" type="password" placeholder="密码" autocomplete="current-password" />
+            <button class="pw-toggle" type="button" id="pw" title="显示 / 隐藏">◉</button>
+          </div>
+        </div>
+
+        <div class="msg" id="msg"><span class="msg-ic">▲</span><span id="msgBody"></span></div>
+
+        <button class="btn submit" id="submit" type="submit">
+          <span class="spin" id="spin" hidden></span><span id="submitTxt">登录</span>
+        </button>
+      </form>
+    </div>
+
+    <footer class="card-ft">
+      <div class="sep">默认凭据</div>
+      <div class="chips">
+        <span class="chip"><span class="dot"></span>用户名 <b>admin</b></span>
+        <span class="chip"><span class="dot"></span>密码 <b>123456</b></span>
+      </div>
+      <button class="btn ghost copy" id="copy" type="button">⧉ 复制 admin / 123456</button>
+      <p class="legal" style="margin:14px 0 0">
+        本地部署 · 无遥测 · 数据不出机器<br>
+        登录后 <b>POST /api/auth/login</b> 返回的 token 存入 <b>localStorage</b>
+      </p>
+    </footer>
+  </main>
+</div>
+
+<!-- ══ API 契约面板 ══ -->
+<div style="position:fixed;left:50%;transform:translateX(-50%);bottom:12px;width:min(94vw,424px);z-index:50">
+  <details class="api" open>
+    <summary>本页数据来源 · API 契约</summary>
+    <div class="api-b">
+      <div class="ep">
+        <div class="ep-h">
+          <span class="verb get">GET</span>
+          <span class="ep-p">/api/auth/status</span>
+          <span class="ep-env">裸对象</span>
+        </div>
+        <div class="flds">
+          <div class="fld"><span class="fk">hasPasswordLogin</span><span class="fv">boolean</span><span class="ft">是否启用密码登录</span></div>
+          <div class="fld"><span class="fk">hasUsers</span><span class="fv">boolean?</span><span class="ft">是否存在托管用户</span></div>
+        </div>
+      </div>
+      <div class="ep">
+        <div class="ep-h">
+          <span class="verb post">POST</span>
+          <span class="ep-p">/api/auth/login</span>
+          <span class="ep-env">{ token }</span>
+        </div>
+        <div class="flds">
+          <div class="fld"><span class="fk">username</span><span class="fv">string</span><span class="ft">请求体</span></div>
+          <div class="fld"><span class="fk">password</span><span class="fv">string</span><span class="ft">请求体</span></div>
+          <div class="fld"><span class="fk">token</span><span class="fv">string</span><span class="ft">成功响应唯一字段 → setApiKey()</span></div>
+          <div class="fld"><span class="fk">error</span><span class="fv">string</span><span class="ft">失败响应；429 / 503 触发锁定提示</span></div>
+        </div>
+      </div>
+      <div class="note">
+        守卫顺序：<b>checkHermesCliAvailable()</b> → <b>meta.public</b> → <b>hasApiKey()</b> → <b>requiresSuperAdmin</b>。
+        已持有 token 时组件 setup 阶段直接 <code>router.replace('/hermes/chat')</code>。
+        失败码 <b>429 / 503</b> → 显示 <code>hermes-ui clear-login-locks --restart</code> 与
+        <code>hermes-ui reset-default-login</code>；其余显示 <code>err.message</code>。
+      </div>
+    </div>
+  </details>
+</div>
+
+<script>
+const $ = s => document.querySelector(s);
+const el = {
+  u:$('#u'), p:$('#p'), form:$('#form'), msg:$('#msg'), msgBody:$('#msgBody'),
+  submit:$('#submit'), submitTxt:$('#submitTxt'), spin:$('#spin'),
+  led:$('#statusLed'), statusTxt:$('#statusTxt'), pw:$('#pw'), copy:$('#copy'),
+};
+
+/* ── 服务端探测：onMounted → fetchAuthStatus() ───────────────────────────── */
+function probe(state){
+  const map = {
+    ok:   ['ok',  '认证服务在线 · 密码登录可用'],
+    err:  ['err', '无法连接到服务器 · 登录仍可尝试'],
+    none: ['',   '未启用密码登录'],
+  };
+  const [cls, txt] = map[state] || map.ok;
+  el.led.className = 'led ' + cls;
+  el.statusTxt.textContent = txt;
+}
+
+/* ── 消息条 ─────────────────────────────────────────────────────────────── */
+function showMsg(kind, html){
+  el.msg.className = 'msg on ' + (kind || 'err');
+  el.msg.querySelector('.msg-ic').textContent = kind === 'warn' ? '⚠' : kind === 'ok' ? '✓' : '▲';
+  el.msgBody.innerHTML = html;
+}
+function hideMsg(){ el.msg.className = 'msg'; }
+
+/* ── 提交 ───────────────────────────────────────────────────────────────── */
+let busy = false;
+function setBusy(on, label){
+  busy = on;
+  el.spin.hidden = !on;
+  el.submit.dataset.busy = on ? '1' : '0';
+  el.submitTxt.textContent = label || (on ? '...' : '登录');
+  el.submit.disabled = on;
+}
+
+function submit(e){
+  if(e) e.preventDefault();
+  if(busy) return;
+  const u = el.u.value.trim(), p = el.p.value;
+  el.u.classList.remove('err'); el.p.classList.remove('err');
+
+  // 空值：t('login.credentialsRequired')
+  if(!u || !p){
+    (u ? el.p : el.u).classList.add('err');
+    showMsg('err', '请输入用户名和密码');
+    return;
+  }
+  hideMsg();
+  setBusy(true);
+
+  // 原型：按当前场景模拟服务端响应，不发真实请求
+  const scene = currentScene();
+  setTimeout(()=>{
+    setBusy(false);
+    if(scene === 'ok'){
+      showMsg('ok', '登录成功，正在跳转到 <code>/hermes/chat</code>');
+      setTimeout(()=>location.hash = '#ok', 500);
+      return;
+    }
+    if(scene === 'error'){
+      el.p.classList.add('err');
+      showMsg('err', '用户名或密码错误');
+      return;
+    }
+    if(scene === 'locked'){
+      // err.status === 429 || 503 → showLockResetHint
+      showMsg('warn',
+        '登录失败次数过多，请稍后重试' +
+        '<code>hermes-ui clear-login-locks --restart</code>' +
+        '如需重置默认 admin 密码，可以执行：' +
+        '<code>hermes-ui reset-default-login</code>');
+      return;
+    }
+    showMsg('err', '用户名或密码错误');
+  }, 620);
+}
+
+/* ── 交互绑定 ───────────────────────────────────────────────────────────── */
+el.form.addEventListener('submit', submit);
+el.p.addEventListener('keyup', e=>{ if(e.key === 'Enter') submit(); });
+el.u.addEventListener('input', ()=>{ el.u.classList.remove('err'); hideMsg(); });
+el.p.addEventListener('input', ()=>{ el.p.classList.remove('err'); hideMsg(); });
+
+el.pw.addEventListener('click', ()=>{
+  const show = el.p.type === 'password';
+  el.p.type = show ? 'text' : 'password';
+  el.pw.textContent = show ? '⊘' : '◉';
+});
+
+el.copy.addEventListener('click', async ()=>{
+  const text = 'admin / 123456';
+  try{ await navigator.clipboard.writeText(text); }
+  catch{ /* file:// 下 clipboard 不可用，退回选中提示 */ }
+  el.u.value = 'admin'; el.p.value = '123456';
+  showMsg('ok', '已填入默认凭据 <code>admin / 123456</code>');
+  el.u.focus();
+});
+
+/* ── 原型专用：场景切换（接入时整段删除） ───────────────────────────────── */
+let scene = 'idle';
+function currentScene(){ return scene === 'idle' || scene === 'empty' || scene === 'busy' ? 'error' : scene; }
+document.getElementById('devbar').addEventListener('click', e=>{
+  const b = e.target.closest('button[data-scene]');
+  if(!b) return;
+  document.querySelectorAll('#devbar button').forEach(x=>x.classList.toggle('on', x===b));
+  scene = b.dataset.scene;
+  hideMsg();
+  el.u.classList.remove('err'); el.p.classList.remove('err');
+  setBusy(false);
+  probe('ok');
+
+  if(scene === 'empty'){ el.u.value=''; el.p.value=''; el.u.focus(); }
+  if(scene === 'error'|| scene === 'locked'){ el.u.value='admin'; el.p.value='wrong'; }
+  if(scene === 'busy'){ el.u.value='admin'; el.p.value='123456'; setBusy(true,'...'); }
+  if(scene === 'ok'){ el.u.value='admin'; el.p.value='123456'; }
+});
+
+/* ── 启动 ───────────────────────────────────────────────────────────────── */
+el.u.focus();
+setTimeout(()=>probe('ok'), 340);
+</script>
+</body>
+</html>
diff --git a/prototype_reference/hermes-ui-cyber-shell-v1.html b/prototype_reference/hermes-ui-cyber-shell-v1.html
new file mode 100644
index 0000000..5055900
--- /dev/null
+++ b/prototype_reference/hermes-ui-cyber-shell-v1.html
@@ -0,0 +1,1311 @@
+<!doctype html>
+<!--
+  hermes-ui · CYBER 主题设计稿
+  ─────────────────────────────────────────────────────────────────────────
+  交付物  单文件 HTML 原型。零外部依赖，双击即开。
+          只做「应用外壳 + 视图族切换」；不是可 import 的 Vue/Arco 代码。
+          hermes-ui 仓库一个字节都没动。
+
+  色彩    赛博风走克制路线：近黑偏蓝底 + 单一霓虹青强调。
+          科技感来自 32px 网格纹理 / 1px 发丝线 / 等宽数字 / 角标括号，
+          不靠满屏辉光 —— 密集操作界面用久了不累。
+          下方六枚核心 token 直接一一对应 packages/client/src/styles/variables.scss
+          里的现有变量名，右侧「色彩令牌」视图里有实时对照表。
+
+  落地    新增 cyber 主题，与 ink light / ink dark / comic 三主题并列。
+          具体改哪几个文件写在「落地路径」视图里。
+-->
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Hermes UI · Cyber 主题设计稿</title>
+<style>
+  /* ─── tokens ────────────────────────────────────────────────────────
+     六枚核心 token，对应 variables.scss 同名角色。
+     补充 token 全部用于 cyber 特有的表面层级与状态色，
+     在 variables.scss 里对应 --bg-* / --*-rgb / --success 等既有变量。 */
+  :root {
+    --bg:      oklch(0.155 0.012 250);   /* 页面底        → --bg-primary   */
+    --surface: oklch(0.130 0.012 250);   /* 侧栏底(更深)  → --bg-sidebar   */
+    --fg:      oklch(0.945 0.006 200);   /* 正文          → --text-primary */
+    --muted:   oklch(0.705 0.014 230);   /* 次级文字      → --text-secondary */
+    --border:  oklch(0.305 0.018 242);   /* 发丝线        → --border-color */
+    --accent:  oklch(0.805 0.148 188);   /* 霓虹青·唯一强调 → --accent-primary */
+
+    /* 扩展层：cyber 特有的表面阶梯与状态色 */
+    --surface-2: oklch(0.205 0.014 248);  /* 卡片 / 面板        → --bg-card      */
+    --surface-3: oklch(0.245 0.016 246);  /* 悬浮 / 选中行      → --bg-card-hover */
+    --input-bg:  oklch(0.175 0.013 249);  /* 输入框底           → --bg-input     */
+    --code-bg:   oklch(0.115 0.012 250);  /* 代码 / 终端底      → --code-bg      */
+    --faint:     oklch(0.640 0.014 230);  /* 三级文字 / 标签 → --text-muted   */
+    --accent-hv: oklch(0.880 0.130 188);  /* 强调 hover         → --accent-hover */
+    --accent-ink:oklch(0.160 0.030 240);  /* 强调底上的字       → --text-on-accent */
+    --ok:        oklch(0.780 0.150 150);  /* 状态              → --success */
+    --warn:      oklch(0.800 0.140 78);   /* 状态              → --warning */
+    --err:       oklch(0.745 0.185 22);   /* 状态 · L=.745 保 tag 文字在 .tcard 上 ≥4.9:1 → --error */
+    --info:      oklch(0.720 0.120 252);  /* 状态              → --accent-info */
+
+    --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent);
+    --fg-soft:     color-mix(in oklch, var(--fg) 6%, transparent);
+    --hairline:    color-mix(in oklch, var(--fg) 10%, transparent);
+    --mask-on:     var(--fg);  /* 网格 mask 的「不透明」端，只用 alpha，不用色相 */
+
+    /* display = mono（终端感仪表盘，刻意不用 Inter 当标题）
+       body = sans；mono 负责全部数字、标签、路径、代码 */
+    --font-display: ui-monospace, 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
+    --font-body:    -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI', system-ui, sans-serif;
+    --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', 'Menlo', 'PingFang SC', monospace;
+
+    --rail-w:  240px;  /* 对齐 $sidebar-width            */
+    --rail-w-mini: 64px; /* 对齐 $sidebar-collapsed-width */
+    --top-h:   60px;   /* 对齐 $header-height            */
+    --gap-xs: 8px; --gap-sm: 12px; --gap-md: 20px; --gap-lg: 32px; --gap-xl: 56px;
+    --radius: 6px; --radius-lg: 8px;  /* 对齐 Arco borderRadius: 6，零返工 */
+  }
+
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body { height: 100%; }
+  body {
+    margin: 0; background: var(--bg); color: var(--fg);
+    font-family: var(--font-body); font-size: 14px; line-height: 1.55;
+    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
+  }
+  img, svg { display: block; max-width: 100%; }
+  a { color: inherit; text-decoration: none; }
+  button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
+  input, select, textarea { font: inherit; color: inherit; }
+  h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
+  p { margin: 0; text-wrap: pretty; }
+  code, .note code, .step-d code, .term code {
+    font-family: var(--font-mono); font-size: .92em; color: var(--accent);
+    background: var(--code-bg); border: 1px solid var(--border);
+    padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere;
+  }
+  ::selection { background: var(--accent-soft); color: var(--fg); }
+
+  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+
+  /* 唯一装饰母题：角标括号。激活导航 + 面板头各一处，不铺开。 */
+  .brk { position: relative; }
+  .brk::before, .brk::after {
+    content: ''; position: absolute; width: 9px; height: 9px;
+    border: 1px solid var(--accent); opacity: .6; pointer-events: none;
+  }
+  .brk::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
+  .brk::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
+
+  .num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+  .meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
+  .eyebrow {
+    font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
+    text-transform: uppercase; color: var(--faint); margin: 0;
+  }
+
+  .led { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
+  .led.ok   { background: var(--ok);   box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok) 22%, transparent); }
+  .led.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 22%, transparent); }
+  .led.err  { background: var(--err);  box-shadow: 0 0 0 3px color-mix(in oklch, var(--err) 22%, transparent); }
+  .led.run  { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: pulse 1.8s ease-in-out infinite; }
+  @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
+  @media (prefers-reduced-motion: reduce) { .led.run { animation: none } * { transition: none !important } }
+
+  /* ─── shell ─────────────────────────────────────────────────────── */
+  .shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); height: 100%; }
+  .shell[data-mini="1"] { grid-template-columns: var(--rail-w-mini) minmax(0, 1fr); }
+
+  .rail {
+    display: flex; flex-direction: column; min-height: 0;
+    background: var(--surface); border-right: 1px solid var(--border);
+  }
+  .rail-brand { display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
+  .rail-mark { width: 26px; height: 26px; flex: 0 0 auto; color: var(--accent); }
+  .rail-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .1em; line-height: 1.1; }
+  .rail-sub  { font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .14em; }
+  .shell[data-mini="1"] .rail-brand { justify-content: center; padding: 0; }
+  .shell[data-mini="1"] .rail-txt { display: none; }
+
+  .rail-search { padding: 12px 12px 8px; flex: 0 0 auto; }
+  .input {
+    width: 100%; min-height: 44px; padding: 9px 12px;
+    background: var(--input-bg); border: 1px solid var(--border);
+    border-radius: var(--radius); color: var(--fg); font-size: 13px;
+    transition: background .15s ease, border-color .15s ease;
+  }
+  .input::placeholder { color: var(--faint); }
+  .input:hover { background: var(--surface-2); border-color: color-mix(in oklch, var(--fg) 22%, transparent); }
+  .input:focus { border-color: var(--accent); background: var(--surface-2); }
+  .shell[data-mini="1"] .rail-search { display: none; }
+
+  .rail-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 16px; }
+  .rail-nav::-webkit-scrollbar { width: 8px; }
+  .rail-nav::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
+  .nav-grp { margin-top: 14px; }
+  .nav-grp:first-child { margin-top: 4px; }
+  .nav-grp-lbl {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 6px 8px; font-family: var(--font-mono); font-size: 10px;
+    letter-spacing: .16em; color: var(--faint); text-transform: uppercase;
+  }
+  .nav-item {
+    position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
+    min-height: 44px; padding: 8px 10px; border-radius: var(--radius);
+    color: var(--muted); font-size: 13.5px; text-align: left;
+    transition: background .15s ease, color .15s ease;
+  }
+  .nav-item:hover { background: var(--surface-2); color: var(--fg); }
+  .nav-item[aria-current="page"] { background: var(--surface-3); color: var(--fg); font-weight: 500; }
+  .nav-item[aria-current="page"]::before {
+    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+    width: 2px; height: 18px; background: var(--accent); border-radius: 1px;
+  }
+  .nav-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
+  .nav-count {
+    margin-left: auto; font-family: var(--font-mono); font-size: 11px;
+    color: var(--faint); font-variant-numeric: tabular-nums;
+  }
+  .nav-item[aria-current="page"] .nav-count { color: var(--accent); }
+  .nav-empty {
+    padding: 22px 14px; text-align: center; font-size: 12.5px; line-height: 1.7;
+    color: var(--faint); border: 1px dashed var(--border); border-radius: var(--radius-lg); margin: 2px 0;
+  }
+  .nav-empty .mono { font-size: 11px; color: var(--muted); }
+  .shell[data-mini="1"] .nav-item { justify-content: center; padding: 8px 0; }
+  .shell[data-mini="1"] .nav-item span, .shell[data-mini="1"] .nav-count { display: none; }
+
+  .rail-foot { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 10px 12px 12px; display: grid; gap: 8px; }
+  .rail-stat { display: flex; align-items: center; gap: 8px; min-height: 22px; }
+  .rail-foot .mono { font-size: 11px; color: var(--muted); }
+  .shell[data-mini="1"] .rail-foot { padding: 10px 0; }
+  .shell[data-mini="1"] .rail-foot .mono { display: none; }
+  .shell[data-mini="1"] .rail-stat { justify-content: center; }
+
+  /* ─── stage ─────────────────────────────────────────────────────── */
+  .stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+  .topbar {
+    flex: 0 0 auto; height: var(--top-h); display: flex; align-items: center;
+    gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--border);
+    background: color-mix(in oklch, var(--bg) 88%, transparent);
+    backdrop-filter: blur(14px);
+  }
+  .icon-btn {
+    display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
+    border-radius: var(--radius); color: var(--muted);
+    transition: background .15s ease, color .15s ease;
+  }
+  .icon-btn:hover { background: var(--surface-2); color: var(--fg); }
+  .icon-btn svg { width: 18px; height: 18px; }
+  .crumb { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+  .crumb-fam { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--faint); text-transform: uppercase; }
+  .crumb-route { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
+  .crumb-view { font-size: 13px; color: var(--muted); }
+  .top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
+
+  .btn {
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    min-height: 44px; padding: 0 18px; border-radius: var(--radius);
+    border: 1px solid transparent; font-size: 13.5px; font-weight: 500; white-space: nowrap;
+    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
+  }
+  .btn:active { transform: translateY(1px); }
+  .btn:disabled { cursor: not-allowed; transform: none; opacity: .55; }
+  .btn:disabled:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+  .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
+  .btn-primary:hover { background: var(--accent-hv); border-color: var(--accent-hv); }
+  .btn-primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
+  .btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
+  .btn-ghost:hover { background: var(--surface-2); color: var(--fg); border-color: color-mix(in oklch, var(--fg) 24%, transparent); }
+
+  .viewport { flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; }
+  .viewport::before {
+    content: ''; position: absolute; inset: 0; pointer-events: none;
+    background-image:
+      linear-gradient(to right, color-mix(in oklch, var(--accent) 5%, transparent) 1px, transparent 1px),
+      linear-gradient(to bottom, color-mix(in oklch, var(--accent) 5%, transparent) 1px, transparent 1px);
+    background-size: 32px 32px;
+    -webkit-mask-image: radial-gradient(130% 70% at 50% 0%, var(--mask-on) 10%, transparent 72%);
+    mask-image: radial-gradient(130% 70% at 50% 0%, var(--mask-on) 10%, transparent 72%);
+  }
+  .viewport > * { position: relative; }
+  .view { padding: 26px 28px 40px; display: grid; gap: 20px; align-content: start; }
+  .view-flush { padding: 0; }
+  .view[hidden] { display: none; }
+
+  /* ─── panels ────────────────────────────────────────────────────── */
+  .panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
+  .panel-hd {
+    display: flex; align-items: center; gap: 12px; min-height: 48px;
+    padding: 12px 18px; border-bottom: 1px solid var(--border);
+  }
+  .panel-hd h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
+  .panel-hd .meta { margin-left: auto; }
+  .panel-bd { padding: 18px; }
+  .view-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
+  .view-head h1 { font-size: 24px; letter-spacing: -.01em; }
+  .view-head .desc { font-size: 13px; color: var(--muted); max-width: 62ch; }
+  .view-head .spacer { margin-left: auto; }
+
+  .chip {
+    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
+    border: 1px solid var(--border); border-radius: 999px; background: transparent;
+    color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
+    transition: background .15s ease, color .15s ease, border-color .15s ease;
+  }
+  /* 可点击的 chip 是真实触摸目标：44px 命中区，视觉尺寸不变 */
+  button.chip { min-height: 44px; padding: 0 16px; }
+  button.chip:hover { background: var(--surface-3); color: var(--fg); border-color: color-mix(in oklch, var(--fg) 24%, transparent); }
+  .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
+  .tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
+  .tag.ok { background: color-mix(in oklch, var(--ok) 16%, transparent); color: var(--ok); }
+  .tag.warn { background: color-mix(in oklch, var(--warn) 16%, transparent); color: var(--warn); }
+  .tag.err { background: color-mix(in oklch, var(--err) 16%, transparent); color: var(--err); }
+  .tag.info { background: color-mix(in oklch, var(--info) 16%, transparent); color: var(--info); }
+  .tag.idle { background: var(--surface-3); color: var(--muted); }
+
+  .demo-flag {
+    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
+    border: 1px dashed color-mix(in oklch, var(--warn) 55%, transparent);
+    border-radius: 4px; color: var(--warn); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
+  }
+
+  /* ─── 对话台 ───────────────────────────────────────────────────── */
+  .console { display: grid; grid-template-columns: 232px minmax(0, 1fr) 272px; gap: 0; height: calc(100vh - var(--top-h)); }
+  .col-side { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
+  .col-side.right { border-right: 0; border-left: 1px solid var(--border); }
+  .side-hd { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
+  .side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }
+  .sess {
+    display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--radius);
+    border: 1px solid transparent; transition: background .15s ease, border-color .15s ease;
+  }
+  .sess:hover { background: var(--surface-2); }
+  .sess:hover .sess-m { color: var(--muted); }
+  .sess[aria-current="true"] { background: var(--surface-3); border-color: var(--border); }
+  .sess[aria-current="true"] .sess-m { color: var(--muted); }
+  .sess-t { font-size: 13px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sess-m { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); margin-top: 2px; }
+
+  .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 26px; display: grid; gap: 18px; align-content: start; }
+  .msg { display: grid; gap: 6px; max-width: 74ch; }
+  .msg.user { justify-self: end; text-align: right; }
+  .msg-who { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
+  .msg-bubble {
+    padding: 12px 15px; border-radius: var(--radius-lg); border: 1px solid var(--border);
+    background: var(--surface-2); font-size: 13.5px; line-height: 1.6; text-align: left; white-space: pre-wrap;
+  }
+  .msg.user .msg-bubble { background: var(--surface-3); }
+  .msg-bubble code { font-family: var(--font-mono); font-size: 12.5px; background: var(--code-bg); padding: 1px 5px; border-radius: 3px; color: var(--accent); }
+  .tool {
+    border: 1px solid var(--border); border-left: 2px solid var(--accent);
+    border-radius: var(--radius); background: var(--code-bg); overflow: hidden;
+  }
+  .tool-hd { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
+  .tool-hd .tag { margin-left: auto; }
+  .tool-bd { padding: 0 12px 11px; font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); line-height: 1.7; }
+  .caret { display: inline-block; width: 8px; height: 14px; background: var(--accent); vertical-align: -2px; animation: blink 1.05s steps(2) infinite; }
+  @keyframes blink { 0%,50% { opacity: 1 } 51%,100% { opacity: 0 } }
+
+  .dock { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 14px 26px 16px; background: var(--bg); }
+  .dock-box { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--input-bg); padding: 12px 14px; transition: border-color .15s ease; }
+  .dock-box:focus-within { border-color: var(--accent); }
+  .dock-box textarea { width: 100%; min-height: 62px; resize: none; border: 0; background: transparent; color: var(--fg); font-size: 13.5px; line-height: 1.6; }
+  .dock-box textarea:focus { outline: none; }
+  .dock-box textarea::placeholder { color: var(--faint); }
+  .dock-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
+
+  .kv { display: grid; gap: 12px; }
+  .kv-row { display: grid; gap: 3px; }
+  .kv-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
+  .kv-v { font-size: 13px; color: var(--fg); overflow-wrap: anywhere; }
+  .meter { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
+  .meter i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
+  .meter.warn i { background: var(--warn); } .meter.err i { background: var(--err); }
+
+  /* ─── 编排台 ───────────────────────────────────────────────────── */
+  .stat-strip { display: flex; gap: 10px; flex-wrap: wrap; }
+  .stat {
+    flex: 1 1 132px; min-width: 132px; padding: 12px 14px; border-radius: var(--radius);
+    border: 1px solid var(--border); background: var(--surface-2); text-align: left;
+    transition: background .15s ease, border-color .15s ease;
+  }
+  button.stat:hover { background: var(--surface-3); border-color: color-mix(in oklch, var(--fg) 22%, transparent); }
+  .stat:hover .stat-l, .stat[aria-pressed="true"] .stat-l { color: var(--muted); }
+  .stat[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-3); }
+  .stat-n { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
+  .stat-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
+  .board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
+  .lane { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-height: 190px; min-width: 0; }
+  .lane-hd { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--border); }
+  .lane-hd .n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
+  .lane-bd { padding: 10px; display: grid; gap: 9px; align-content: start; }
+  .tcard {
+    display: grid; gap: 7px; padding: 11px 12px; border-radius: var(--radius);
+    border: 1px solid var(--border); background: var(--surface-3); text-align: left; width: 100%;
+    transition: background .15s ease, border-color .15s ease, transform .05s ease;
+  }
+  .tcard:hover { background: color-mix(in oklch, var(--surface-3) 70%, var(--fg) 8%); border-color: color-mix(in oklch, var(--fg) 26%, transparent); }
+  .tcard:hover .f { color: var(--muted); }
+  .tcard:active { transform: translateY(1px); }
+  .tcard .t { font-size: 12.5px; line-height: 1.45; }
+  .tcard .f { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
+  .lane-empty { padding: 16px 12px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
+
+  /* ─── 注册表 ───────────────────────────────────────────────────── */
+  .twrap { overflow-x: auto; overscroll-behavior-x: contain; }
+  .twrap::-webkit-scrollbar { height: 8px; }
+  .twrap::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
+  .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+  .filters .input { width: 220px; min-height: 44px; padding: 9px 11px; font-size: 12.5px; }
+  .ds-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .ds-table th, .ds-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
+  .ds-table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
+  .ds-table tbody tr { transition: background .15s ease; }
+  .ds-table tbody tr:hover { background: var(--surface-3); }
+  .ds-table tbody tr:hover .num-col, .ds-table tbody tr[aria-selected="true"] .num-col { color: var(--fg); }
+  .ds-table tbody tr[aria-selected="true"] { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--accent); }
+  .ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }
+
+  /* ─── 监控台 ───────────────────────────────────────────────────── */
+  .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
+  .kpi { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
+  .kpi-n { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
+  .kpi-u { font-size: 13px; color: var(--muted); margin-left: 4px; }
+  .kpi-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }
+  .kpi-d { font-family: var(--font-mono); font-size: 11px; margin-top: 6px; color: var(--muted); }
+  .up { color: var(--ok); } .down { color: var(--err); }
+  .chartwrap { display: grid; gap: 10px; }
+  .chart { width: 100%; height: 220px; }
+  .axis { font-family: var(--font-mono); font-size: 10px; fill: var(--faint); }
+  .feed { display: grid; gap: 1px; background: var(--border); }
+  .logline { display: grid; grid-template-columns: 62px 46px 1fr auto; gap: 12px; align-items: baseline; padding: 9px 14px; background: var(--surface-2); font-family: var(--font-mono); font-size: 11.5px; }
+  .logline .lvl { letter-spacing: .06em; }
+  .logline .ltext { color: var(--muted); overflow-wrap: anywhere; }
+  .logline .src { color: var(--faint); }
+
+  /* ─── 系统台 ───────────────────────────────────────────────────── */
+  .term {
+    background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
+    padding: 16px 18px; font-family: var(--font-mono); font-size: 12px; line-height: 1.8;
+    min-height: 260px; display: grid; gap: 2px; align-content: start; overflow-y: auto;
+  }
+  .term .p { color: var(--accent); } .term .ok { color: var(--ok); } .term .d { color: var(--muted); }
+  .term-in { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 0 4px; min-height: 44px; }
+  .term-in span { color: var(--accent); font-family: var(--font-mono); font-size: 12px; }
+  .term-in input { flex: 1; background: transparent; border: 0; font-family: var(--font-mono); font-size: 12.5px; }
+  .term-in input:focus { outline: none; }
+  .switch-row {
+    display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border);
+  }
+  .switch-row:last-child { border-bottom: 0; }
+  .switch-row .t { font-size: 13.5px; }
+  .switch-row .d { font-size: 12px; color: var(--muted); margin-top: 2px; }
+  .switch {
+    margin-left: auto; width: 46px; height: 26px; flex: 0 0 auto; border-radius: 999px;
+    background: var(--surface-3); border: 1px solid var(--border); position: relative;
+    transition: background .15s ease, border-color .15s ease;
+    /* 视觉 26px，命中区撑到 44px：用伪元素扩展而不改变视觉尺寸 */
+  }
+  .switch::before {
+    content: ''; position: absolute; inset: -9px -1px; border-radius: 999px;
+  }
+  .switch::after {
+    content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
+    border-radius: 50%; background: var(--muted); transition: transform .18s ease, background .15s ease;
+  }
+  .switch[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); }
+  .switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--accent); }
+
+  /* ─── 令牌视图 ─────────────────────────────────────────────────── */
+  .map { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+  .map th, .map td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
+  .map th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
+  .map tbody tr:hover { background: var(--surface-3); }
+  .map tbody tr:hover .hexv, .map tbody tr:hover .ratio { color: var(--fg); }
+  .map .var { font-family: var(--font-mono); color: var(--accent); white-space: nowrap; }
+  .map .hexv { font-family: var(--font-mono); color: var(--muted); white-space: nowrap; }
+  .sw { display: inline-block; width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--hairline); vertical-align: -3px; margin-right: 9px; }
+  .ratio { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
+  .ratio.pass { color: var(--ok); } .ratio.lg { color: var(--warn); }
+
+  .steps { display: grid; gap: 0; }
+  .step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
+  .step:last-child { border-bottom: 0; }
+  .step-n { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--accent); padding-top: 2px; }
+  .step-t { font-size: 14px; margin-bottom: 5px; }
+  .step-d { font-size: 12.5px; color: var(--muted); }
+  .path {
+    display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 4px;
+    background: var(--code-bg); border: 1px solid var(--border);
+    font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); overflow-wrap: anywhere;
+  }
+  .note { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
+  .note b { color: var(--fg); font-weight: 600; }
+
+  .row { display: flex; align-items: center; gap: 12px; }
+  .row-wrap { flex-wrap: wrap; }
+  .spacer { margin-left: auto; }
+  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
+
+  /* ─── 移动端 ───────────────────────────────────────────────────── */
+  @media (max-width: 1240px) {
+    .console { grid-template-columns: 200px minmax(0, 1fr); }
+    .col-side.right { display: none; }
+    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
+  @media (max-width: 920px) {
+    .shell, .shell[data-mini="1"] { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
+    .rail { position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
+    .shell[data-open="1"] .rail { transform: none; box-shadow: 0 0 0 100vmax color-mix(in oklch, var(--bg) 60%, transparent); }
+    .shell[data-mini="1"] .rail-brand { justify-content: flex-start; padding: 0 16px; }
+    .shell[data-mini="1"] .rail-txt, .shell[data-mini="1"] .nav-item span, .shell[data-mini="1"] .nav-count, .shell[data-mini="1"] .rail-foot .mono { display: revert; }
+    .console { grid-template-columns: minmax(0, 1fr); height: auto; }
+    .col-side { display: none; }
+    .kpis, .board, .grid-2 { grid-template-columns: minmax(0, 1fr); }
+    .view { padding: 20px 16px 32px; }
+    .crumb-view { display: none; }
+    .thread { padding: 18px 16px; }
+    .dock { padding: 12px 16px 16px; }
+  }
+  /* 窄屏：顶栏次要动作收成图标，主 CTA 保文字 */
+  @media (max-width: 560px) {
+    .topbar { padding: 0 12px; gap: 10px; }
+    .crumb-fam { display: none; }
+    .demo-flag { display: none; }
+    #btnReseed { padding: 0 12px; font-size: 0; gap: 0; }
+    #btnReseed::before { content: '↺'; font-size: 16px; line-height: 1; }
+    #btnRun { padding: 0 12px; }
+    .top-right { gap: 8px; }
+  }
+  @media (max-width: 380px) {
+    #btnRun { padding: 0 9px; font-size: 12.5px; }
+    .topbar { gap: 6px; }
+  }
+</style>
+</head>
+<body>
+
+<div class="shell" id="shell" data-mini="0">
+  <aside class="rail" aria-label="主导航">
+    <div class="rail-brand">
+      <svg class="rail-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">
+        <path d="M12 2 3 7v10l9 5 9-5V7z"/><path d="M12 22V12"/><path d="M3 7l9 5 9-5"/>
+      </svg>
+      <div class="rail-txt">
+        <div class="rail-name">HERMES</div>
+        <div class="rail-sub">UI · CYBER</div>
+      </div>
+    </div>
+
+    <div class="rail-search">
+      <input class="input" id="navFilter" type="search" placeholder="筛选路由…" aria-label="筛选导航项" />
+    </div>
+
+    <nav class="rail-nav" id="railNav"></nav>
+
+    <div class="rail-foot">
+      <div class="rail-stat"><span class="led ok" aria-hidden="true"></span><span class="mono">已连接 · :8787</span></div>
+      <div class="rail-stat"><span class="led run" aria-hidden="true"></span><span class="mono">3 个任务执行中</span></div>
+      <div class="rail-stat"><span class="led warn" aria-hidden="true"></span><span class="mono">node v22.14 需升级</span></div>
+      <div class="rail-stat"><span class="mono">web-ui 0.6.29</span></div>
+    </div>
+  </aside>
+
+  <div class="stage">
+    <header class="topbar">
+      <button class="icon-btn" id="railToggle" aria-label="折叠或展开侧栏" aria-expanded="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true">
+          <path d="M3 6h18M3 12h18M3 18h18"/>
+        </svg>
+      </button>
+      <div class="crumb">
+        <span class="crumb-fam" id="crumbFam">对话台</span>
+        <span class="crumb-route" id="crumbRoute">/hermes/chat</span>
+        <span class="crumb-view" id="crumbView">ChatView.vue</span>
+      </div>
+      <div class="top-right">
+        <span class="demo-flag" title="原型内的所有数值均为版式占位，非真实运行数据">演示数据</span>
+        <button class="btn btn-ghost" id="btnReseed">重置演示数据</button>
+        <button class="btn btn-primary" id="btnRun">运行</button>
+      </div>
+    </header>
+
+    <main class="viewport" id="viewport"></main>
+  </div>
+</div>
+
+<script>
+(() => {
+  "use strict";
+
+  /* ─── OKLch → sRGB，用来从活 token 实时反推 hex 对照表 ───────────── */
+  const sk = (u) => { u = Math.max(0, Math.min(1, u)); return u <= 0.0031308 ? 12.92 * u : 1.055 * Math.pow(u, 1 / 2.4) - 0.055; };
+  function oklchHex(str) {
+    const m = str.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)/);
+    if (!m) return "—";
+    const L = +m[1], C = +m[2], H = (+m[3] * Math.PI) / 180;
+    const a = C * Math.cos(H), b = C * Math.sin(H);
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+    const l = l_ ** 3, mm = m_ ** 3, s = s_ ** 3;
+    const r = sk(4.0767416621 * l - 3.3077115913 * mm + 0.2309699292 * s);
+    const g = sk(-1.2684380046 * l + 2.6097574011 * mm - 0.3413193965 * s);
+    const bb = sk(-0.0041960863 * l - 0.7034186147 * mm + 1.7076147010 * s);
+    return "#" + [r, g, bb].map((u) => Math.round(u * 255).toString(16).padStart(2, "0")).join("").toUpperCase();
+  }
+  const lum = (str) => {
+    const m = str.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)/);
+    if (!m) return 0;
+    const L = +m[1], C = +m[2], H = (+m[3] * Math.PI) / 180;
+    const a = C * Math.cos(H), b = C * Math.sin(H);
+    const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+    const mm = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+    const s = (L - 0.0894841775 * a - 1.2914855480 * b) ** 3;
+    const lin = (u) => { u = Math.max(0, Math.min(1, u)); return u <= 0.04045 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4); };
+    const R = lin(sk(4.0767416621 * l - 3.3077115913 * mm + 0.2309699292 * s));
+    const G = lin(sk(-1.2684380046 * l + 2.6097574011 * mm - 0.3413193965 * s));
+    const B = lin(sk(-0.0041960863 * l - 0.7034186147 * mm + 1.7076147010 * s));
+    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  };
+  const ratio = (a, b) => { const x = lum(a), y = lum(b); const hi = Math.max(x, y), lo = Math.min(x, y); return (hi + 0.05) / (lo + 0.05); };
+  const token = (n) => getComputedStyle(document.documentElement).getPropertyValue(n).trim();
+  const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+
+  /* ─── 真实 IA：29 条路由归成 5 个视图族 ─────────────────────────── */
+  const FAMILIES = [
+    {
+      id: "console", name: "对话台", en: "CONSOLE", idx: "01", route: "/hermes/chat", view: "ChatView.vue",
+      routes: [
+        { p: "/hermes/chat", f: "ChatView.vue" }, { p: "/hermes/session/:sessionId", f: "ChatView.vue" },
+        { p: "/hermes/history", f: "HistoryView.vue" }, { p: "/hermes/history/session/:sessionId", f: "HistoryView.vue" },
+        { p: "/hermes/global-agent", f: "GlobalAgentView.vue" }, { p: "/hermes/global-agent/session/:sessionId", f: "GlobalAgentView.vue" },
+        { p: "/hermes/group-chat", f: "GroupChatView.vue" }, { p: "/hermes/group-chat/room/:roomId", f: "GroupChatView.vue" },
+        { p: "/hermes/files", f: "FilesView.vue" },
+      ],
+    },
+    {
+      id: "pipeline", name: "编排台", en: "PIPELINE", idx: "02", route: "/hermes/kanban", view: "KanbanView.vue",
+      routes: [
+        { p: "/hermes/kanban", f: "KanbanView.vue" }, { p: "/hermes/jobs", f: "JobsView.vue" },
+        { p: "/hermes/workflow", f: "WorkflowView.vue" },
+      ],
+    },
+    {
+      id: "registry", name: "注册表", en: "REGISTRY", idx: "03", route: "/hermes/models", view: "ModelsView.vue",
+      routes: [
+        { p: "/hermes/models", f: "ModelsView.vue" }, { p: "/hermes/skills", f: "SkillsView.vue" },
+        { p: "/hermes/plugins", f: "PluginsView.vue" }, { p: "/hermes/mcp", f: "McpManagerView.vue" },
+        { p: "/hermes/memory", f: "MemoryView.vue" }, { p: "/hermes/petdex", f: "PetdexView.vue" },
+      ],
+    },
+    {
+      id: "telemetry", name: "监控台", en: "TELEMETRY", idx: "04", route: "/hermes/usage", view: "UsageView.vue",
+      routes: [
+        { p: "/hermes/usage", f: "UsageView.vue" }, { p: "/hermes/performance", f: "PerformanceView.vue" },
+        { p: "/hermes/logs", f: "LogsView.vue" }, { p: "/hermes/journey", f: "JourneyView.vue" },
+        { p: "/hermes/skills-usage", f: "SkillsUsageView.vue" },
+      ],
+    },
+    {
+      id: "system", name: "系统台", en: "SYSTEM", idx: "05", route: "/hermes/settings", view: "SettingsView.vue",
+      routes: [
+        { p: "/hermes/settings", f: "SettingsView.vue" }, { p: "/hermes/profiles", f: "ProfilesView.vue" },
+        { p: "/hermes/terminal", f: "TerminalView.vue" }, { p: "/hermes/channels", f: "ChannelsView.vue" },
+        { p: "/hermes/devices", f: "DevicesView.vue" }, { p: "/hermes/version-preview", f: "VersionPreviewView.vue" },
+      ],
+    },
+  ];
+  const DELIVERY = [
+    { id: "tokens", name: "色彩令牌", en: "TOKENS", idx: "06", route: "/spec/tokens", view: "token 对照表", routes: [{ p: "variables.scss ↔ :root", f: "对照表" }] },
+    { id: "landing", name: "落地路径", en: "LANDING", idx: "07", route: "/spec/landing", view: "改哪几个文件", routes: [{ p: "6 个文件", f: "落地清单" }] },
+  ];
+  const ALL = [...FAMILIES, ...DELIVERY];
+
+  const ICON = {
+    console: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z',
+    pipeline: 'M3 4h18v6H3zM3 14h9v6H3zM15 14h6v6h-6z',
+    registry: 'M12 2 2 7l10 5 10-5zM2 17l10 5 10-5M2 12l10 5 10-5',
+    telemetry: 'M3 3v18h18M7 15l4-5 3 3 5-7',
+    system: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2V21a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 7 19.4l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.7 1.7 0 0 0 3 15H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 2.9-1.2V5a2 2 0 1 1 4 0v.1A1.7 1.7 0 0 0 17 4.6l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0 1.2 2.9H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z',
+    tokens: 'M4 5h16M4 12h10M4 19h7',
+    landing: 'M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2',
+  };
+
+  /* ─── 演示数据（原型占位，非真实运行值） ─────────────────────────── */
+  const SESSIONS = [
+    { t: "重写 COMFYUI 工作流校验脚本", m: "2m · 14 条消息 · web-search", live: false },
+    { t: "排查 docker 网络不通", m: "11m · 31 条消息 · terminal", live: true },
+    { t: "把老视频转成竖屏切片", m: "26m · 8 条消息 · ffmpeg", live: false },
+    { t: "整理本周 Git 提交", m: "1h · 22 条消息", live: false },
+    { t: "查一下上周的 token 用量", m: "3h · 5 条消息", live: false },
+  ];
+  const THREAD = [
+    { who: "you", body: "帮我看下 hermes-ui 现在能不能直接跑起来，要装什么。" },
+    { who: "agent", body: "读完仓库了。按现有文档，client 侧是 Vue 3 + Vite，UI 库固定 Arco Design Vue（基线里写死了「不引入第三个 UI 库」）。最短路径：" },
+    { tool: "read_file", target: "README_zh.md · DEVELOPMENT.md", state: "ok", out: "pnpm install → pnpm dev → http://localhost:5173\nNode 要求 ≥ 23（22.14 会被顶栏警告拦下）" },
+    { tool: "terminal", target: "pnpm --filter client dev", state: "ok", out: "VITE v6.0.7  ready in 412 ms  →  Local: http://localhost:5173/" },
+    { who: "agent", body: "跑起来了。两个坑：① Node 版本，不升到 23 顶栏会一直挂黄条；② 后端 packages/server 要另起，默认 8787，前端 Vite 代理过去。", live: true },
+  ];
+
+  const KANBAN_STATUS = ["triage", "todo", "scheduled", "ready", "running", "blocked", "review", "done", "archived"];
+  const LANE_ZH = { todo: "待办", ready: "就绪", running: "执行中", review: "评审", done: "完成" };
+  const SEED_TASKS = [
+    { lane: "todo", t: "给 Cyber 主题补一份对比度回归用例", p: "P1", w: "jack" },
+    { lane: "todo", t: "把 logs 页的时间筛选改成相对时间", p: "P2", w: "jack" },
+    { lane: "ready", t: "MCP 服务器健康检查加超时", p: "P1", w: "agent" },
+    { lane: "running", t: "workflow 节点重试退避策略", p: "P0", w: "agent" },
+    { lane: "running", t: "skills 目录扫描性能", p: "P1", w: "jack" },
+    { lane: "running", t: "usage 页按 profile 聚合", p: "P2", w: "jack" },
+    { lane: "review", t: "侧栏折叠态的 tooltip 改文案", p: "P2", w: "jack" },
+    { lane: "done", t: "Socket.IO 断线重连退避", p: "P0", w: "agent" },
+    { lane: "done", t: "arco-theme 冻结色值核对", p: "P1", w: "jack" },
+  ];
+
+  const MODELS = [
+    { n: "claude-sonnet-4-5", p: "anthropic", ctx: "200K", in: "$3.00", out: "$15.00", st: "ok" },
+    { n: "gpt-4.1", p: "openai", ctx: "1M", in: "$2.00", out: "$8.00", st: "ok" },
+    { n: "MiniMax-M2.7-highspeed", p: "minimax", ctx: "204K", in: "$0.60", out: "$2.40", st: "ok" },
+    { n: "deepseek-chat", p: "deepseek", ctx: "128K", in: "$0.27", out: "$1.10", st: "warn" },
+    { n: "qwen3-coder-plus", p: "alibaba", ctx: "256K", in: "$0.40", out: "$1.20", st: "idle" },
+  ];
+  const REGISTRY = {
+    模型: { cols: ["名称", "供应商", "上下文", "输入 / 1M", "输出 / 1M", "状态"], rows: () => MODELS.map((m) => [m.n, m.p, m.ctx, m.in, m.out, m.st]) },
+    技能: {
+      cols: ["技能", "触发方式", "作用域", "最近调用", "状态"],
+      rows: () => [
+        ["comfyui-image-generation", "manual", "project", "2m 前", "ok"],
+        ["browser-userscript-authoring", "keyword", "project", "1h 前", "ok"],
+        ["systematic-debugging", "auto", "global", "3h 前", "ok"],
+        ["json-toolkit", "manual", "global", "—", "idle"],
+        ["weekly-review-planning", "cron", "global", "2d 前", "warn"],
+      ],
+    },
+    插件: {
+      cols: ["插件", "版本", "入口", "加载状态", "状态"],
+      rows: () => [
+        ["example-web-prototype", "0.1.1", "design-templates", "loaded", "ok"],
+        ["comfyui-workflow-mcp", "1.4.0", "mcp_servers", "loaded", "ok"],
+        ["markdown-viewer", "0.9.2", "skills", "loaded", "ok"],
+        ["tapd", "2.1.0", "connectors", "not_configured", "warn"],
+      ],
+    },
+    MCP: {
+      cols: ["服务", "传输", "命令 / 地址", "工具数", "状态"],
+      rows: () => [
+        ["comfyui", "stdio", "python main.py", "7", "ok"],
+        ["docs-langchain", "stdio", "langchain-docs-mcp", "5", "ok"],
+        ["tapd", "http", "https://api.tapd.cn", "51", "warn"],
+        ["hermes-studio", "http", "127.0.0.1:50867", "42", "ok"],
+      ],
+    },
+    记忆: {
+      cols: ["记忆库", "条目", "写入模式", "最近写入", "状态"],
+      rows: () => [
+        ["memory（跨会话）", "18", "自动 + 手动", "刚刚", "ok"],
+        ["hindsight（时序语义）", "1,204", "会话结束", "8m 前", "ok"],
+        ["profile memories", "6", "手动", "1d 前", "idle"],
+      ],
+    },
+  };
+
+  const SEED_USAGE = [42, 58, 51, 73, 66, 88, 79, 94, 71, 83, 97, 76, 69, 84, 92, 81, 74, 89, 96, 78, 86, 99, 91, 82, 87, 95, 90, 77, 85, 93];
+  const LOGS = [
+    ["14:02:11", "info", "socket", "客户端已连接 sid=7f3a2c · v0.6.29"],
+    ["14:02:11", "info", "health", "GET /api/health → 200 (3ms)"],
+    ["14:01:58", "warn", "runtime", "Node.js v22.14 低于要求 v23，hermes CLI 可能异常"],
+    ["14:01:40", "info", "kanban", "task 42 dispatched · profile=agent · worker_pid=8813"],
+    ["14:01:12", "error", "mcp", "tapd 请求超时 8000ms，重试 1/3"],
+    ["14:00:55", "info", "usage", "写入 usage 聚合：1,204 tokens / claude-sonnet-4-5"],
+    ["14:00:31", "debug", "router", "GET /hermes/kanban 200 · 12ms"],
+    ["13:59:47", "info", "skills", "skills 目录扫描完成 · 24 个"],
+  ];
+  const DEVICES = [
+    { n: "MacBook Pro M4", k: "本机 · darwin-arm64", on: true }, { n: "Windows 游戏机", k: "192.168.31.6 · win-x64", on: true },
+    { n: "NAS", k: "192.168.31.9 · linux", on: false }, { n: "工位瘦客户端", k: "192.168.31.22 · linux", on: false },
+  ];
+  const SWITCHES = [
+    { t: "流式输出", d: "Socket.IO 增量下发 token，关闭后整段返回", on: true },
+    { t: "工具调用确认", d: "每次调用 bash / write_file 前弹确认", on: false },
+    { t: "上下文自动压缩", d: "超过 75% 触发 compressor 快照", on: true },
+    { t: "用量告警", d: "单会话超过 200K token 时提醒", on: false },
+    { t: "装饰层", d: "Journey 图谱背景层，pointer-events: none", on: true },
+  ];
+
+  /* ─── 视图渲染 ─────────────────────────────────────────────────── */
+  const view = (id, inner, cls = "") => `<section class="view ${cls}" data-od-id="view-${id}" data-view="${id}">${inner}</section>`;
+  const head = (t, d, right = "") =>
+    `<div class="view-head"><div><h1>${t}</h1><p class="desc" style="margin-top:6px">${d}</p></div><div class="spacer"></div>${right}</div>`;
+
+  function renderConsole() {
+    const sess = SESSIONS.map((s, i) =>
+      `<button class="sess" aria-current="${i === 1}" data-od-id="session-${i}">
+         <div class="sess-t">${esc(s.t)}</div><div class="sess-m">${s.live ? '<span class="tag ok">LIVE</span> ' : ""}${s.m}</div>
+       </button>`).join("");
+    const msgs = THREAD.map((m, mi) => {
+      if (m.tool) return `<div class="tool" data-od-id="tool-${m.tool}">
+          <div class="tool-hd"><span class="mono">${esc(m.tool)}</span><span style="color:var(--faint)">${esc(m.target)}</span><span class="tag ${m.state}">${m.state}</span></div>
+          <div class="tool-bd">${esc(m.out)}</div></div>`;
+      const bubble = m.live
+        ? `${esc(m.body)} <span class="caret" aria-label="输出中"></span>`
+        : esc(m.body).replace(/`([^`]+)`/g, '<code>$1</code>');
+      return `<div class="msg ${m.who === "you" ? "user" : ""}" data-od-id="msg-${m.who}" data-msg="${mi}">
+          <div class="msg-who">${m.who === "you" ? "YOU" : "AGENT"}</div><div class="msg-bubble">${bubble}</div></div>`;
+    }).join("");
+    return view("console", `
+      <div class="console" data-od-id="console-grid">
+        <div class="col-side">
+          <div class="side-hd"><span class="eyebrow">会话 · Sessions</span><span class="meta spacer">${SESSIONS.length}</span></div>
+          <div class="side-scroll">${sess}</div>
+        </div>
+        <div style="display:flex;flex-direction:column;min-height:0;min-width:0">
+          <div class="side-hd">
+            <span class="eyebrow">单聊 · /hermes/chat</span>
+            <span class="meta spacer">SSE 流式 · 12ms</span>
+          </div>
+          <div class="thread" id="thread" data-od-id="chat-thread">${msgs}</div>
+          <div class="dock" data-od-id="chat-composer">
+            <div class="dock-box">
+              <textarea id="composer" placeholder="问点什么，或 / 唤起技能…（Enter 发送，Shift+Enter 换行）" aria-label="消息输入框"></textarea>
+              <div class="dock-bar">
+                <button class="chip" type="button" data-od-id="composer-model">claude-sonnet-4-5</button>
+                <button class="chip" type="button" data-od-id="composer-skill">技能 · 关</button>
+                <span class="meta spacer">上下文 34% · 41K / 200K</span>
+                <button class="btn btn-primary" id="btnSend" data-od-id="composer-send">发送</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-side right">
+          <div class="side-hd"><span class="eyebrow">运行上下文</span></div>
+          <div class="side-scroll" style="display:grid;gap:18px;align-content:start">
+            <div class="kv" data-od-id="ctx-model">
+              <div class="kv-row"><span class="kv-k">模型</span><span class="kv-v">claude-sonnet-4-5</span></div>
+              <div class="kv-row"><span class="kv-k">供应商</span><span class="kv-v">anthropic</span></div>
+              <div class="kv-row"><span class="kv-k">Profile</span><span class="kv-v">agent</span></div>
+            </div>
+            <div class="kv" data-od-id="ctx-usage">
+              <div class="kv-row"><span class="kv-k">上下文占用</span>
+                <span class="kv-v">41,318 / 200,000 <span class="meta">20.7%</span></span>
+                <div class="meter"><i style="width:20.7%"></i></div>
+              </div>
+              <div class="kv-row"><span class="kv-k">会话时长</span><span class="kv-v">11 分 24 秒 · 14 轮</span></div>
+            </div>
+            <div class="kv" data-od-id="ctx-tools">
+              <div class="kv-row"><span class="kv-k">已挂载工具</span><span class="kv-v">read_file · search_files · terminal · web_search</span></div>
+              <div class="kv-row"><span class="kv-k">技能</span><span class="kv-v">未激活</span></div>
+            </div>
+            <div class="note" data-od-id="ctx-note">对话页是基线里 <b>唯一允许装饰位面</b> 之外的禁区 —— 消息区、输入区、侧栏都不放装饰层。</div>
+          </div>
+        </div>
+      </div>`, "view-flush");
+  }
+
+  function renderPipeline() {
+    const laneHTML = (list) => Object.keys(LANE_ZH).map((lane) => {
+      const items = list.filter((t) => t.lane === lane);
+      return `<div class="lane" data-od-id="lane-${lane}">
+        <div class="lane-hd"><span class="led ${lane === "running" ? "run" : lane === "done" ? "ok" : "warn"}" aria-hidden="true"></span>
+          <span class="mono" style="font-size:12px">${LANE_ZH[lane]}</span><span class="n">${items.length}</span></div>
+        <div class="lane-bd">${items.length ? items.map((t) => `<button class="tcard" data-od-id="task-${t.t.slice(0, 12)}">
+            <span class="t">${esc(t.t)}</span>
+            <span class="f"><span class="tag ${t.p === "P0" ? "err" : t.p === "P1" ? "warn" : "idle"}">${t.p}</span><span class="spacer"></span>${esc(t.w)}</span>
+          </button>`).join("") : `<div class="lane-empty">— 空 —</div>`}</div></div>`;
+    }).join("");
+    const paint = (filter) => {
+      const bd = document.getElementById("board");
+      if (!bd) return;
+      bd.innerHTML = laneHTML(filter && filter !== "*" ? SEED_TASKS.filter((t) => t.lane === filter) : SEED_TASKS);
+      document.querySelectorAll("#kanbanStats .stat").forEach((b) => {
+        const lane = b.dataset.lane;
+        b.setAttribute("aria-pressed", String(lane === filter));
+        b.querySelector(".stat-n").textContent =
+          lane === "*" ? String(SEED_TASKS.length) : String(SEED_TASKS.filter((t) => t.lane === lane).length);
+      });
+    };
+    const stats = [{ lane: "*", l: "全部" }].concat(Object.keys(LANE_ZH).map((k) => ({ lane: k, l: LANE_ZH[k] })))
+      .map((s) => `<button class="stat" data-lane="${s.lane}" aria-pressed="${s.lane === "*"}" data-od-id="stat-${s.lane}">
+          <div class="stat-n">0</div><div class="stat-l">${s.l}</div></button>`).join("");
+    const jobs = SEED_TASKS.filter((t) => t.lane === "running" || t.lane === "review").map((t, i) =>
+      `<tr><td class="mono">#${1024 + i}</td><td>${esc(t.t)}</td><td class="mono">${t.w}</td>
+       <td class="mono">${t.lane === "running" ? "dispatched" : "await_review"}</td><td class="num-col">${i === 0 ? "8813" : "—"}</td></tr>`).join("");
+    const statusRows = KANBAN_STATUS.map((s) =>
+      `<tr><td class="mono">${s}</td><td class="num-col">${SEED_TASKS.filter((t) => t.lane === s).length}</td>
+       <td>${s === "triage" ? "分诊" : s === "todo" ? "待办" : s === "scheduled" ? "已排期" : s === "ready" ? "就绪" : s === "running" ? "执行中" : s === "blocked" ? "阻塞" : s === "review" ? "评审" : s === "done" ? "完成" : "归档"}</td></tr>`).join("");
+    window.__paintKanban = paint;
+    return view("pipeline", `
+      ${head("编排台", "工作流、任务、看板三条路由共用一套外壳。列定义直接取自 <code>api/hermes/kanban.ts</code> 的 <span class=\"mono\">KanbanTaskStatus</span>，不另造一套状态机。",
+        `<button class="btn btn-ghost" data-od-id="pipeline-new">新建任务</button>`)}
+      <div class="panel brk" data-od-id="panel-kanban">
+        <div class="panel-hd"><h3>看板 · /hermes/kanban</h3><span class="meta">点统计卡可过滤列，再次点击取消</span></div>
+        <div class="panel-bd" style="display:grid;gap:16px">
+          <div class="stat-strip" id="kanbanStats">${stats}</div>
+          <div class="board" id="board"></div>
+        </div>
+      </div>
+      <div class="grid-2">
+        <div class="panel" data-od-id="panel-jobs">
+          <div class="panel-hd"><h3>运行中的任务 · /hermes/jobs</h3><span class="meta">worker_pid</span></div>
+          <div class="twrap"><table class="ds-table"><thead><tr><th>ID</th><th>标题</th><th>负责人</th><th>状态</th><th class="num-col">PID</th></tr></thead>
+            <tbody>${jobs}</tbody></table></div>
+        </div>
+        <div class="panel" data-od-id="panel-status">
+          <div class="panel-hd"><h3>状态全集 · KanbanTaskStatus</h3><span class="meta">9 个</span></div>
+          <div class="twrap"><table class="ds-table"><thead><tr><th>枚举值</th><th class="num-col">当前数</th><th>中文</th></tr></thead>
+            <tbody>${statusRows}</tbody></table></div>
+        </div>
+      </div>`);
+  }
+
+  function renderRegistry() {
+    const groups = Object.keys(REGISTRY);
+    const draw = (name, q = "") => {
+      const g = REGISTRY[name];
+      const ql = q.trim().toLowerCase();
+      const rows = g.rows().filter((r) => !ql || r.join(" ").toLowerCase().includes(ql));
+      const td = rows.map((r) => {
+        const cells = r.map((c, i) => {
+          const last = i === r.length - 1;
+          const st = last && ["ok", "warn", "err", "idle"].includes(c);
+          return `<td class="${i === 1 || i === 2 ? "mono" : ""}">${st ? `<span class="tag ${c}">${c}</span>` : esc(c)}</td>`;
+        }).join("");
+        return `<tr tabindex="0" data-od-id="reg-row" data-row="${esc(String(r[0]).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, ""))}">${cells}</tr>`;
+      }).join("");
+      const b = document.getElementById("regTable");
+      if (b) b.innerHTML = `<thead><tr>${g.cols.map((c, i) => `<th class="${i >= 3 ? "num-col" : ""}">${c}</th>`).join("")}</tr></thead>
+        <tbody>${rows.length ? td : `<tr><td colspan="${g.cols.length}" style="color:var(--faint);font-family:var(--font-mono);font-size:11.5px">没有匹配 “${esc(q)}” 的条目</td></tr>`}</tbody>`;
+      const c = document.getElementById("regCount");
+      if (c) c.textContent = rows.length + " 条";
+    };
+    const tabs = groups.map((g, i) => `<button class="chip" data-reg="${g}" aria-pressed="${i === 0}" data-od-id="reg-tab-${g}">${g}</button>`).join("");
+    window.__drawRegistry = draw;
+    return view("registry", `
+      ${head("注册表", "模型、技能、插件、MCP、记忆、宠物六条路由，共享「列表 + 搜索 + 行选中」三件套。表头一律等宽小字，状态列用语义色而不是图标。")}
+      <div class="panel" data-od-id="panel-registry">
+        <div class="panel-hd">
+          <div class="filters" id="regTabs">${tabs}</div>
+          <span class="meta spacer" id="regCount"></span>
+        </div>
+        <div class="panel-bd" style="padding:0">
+          <div style="padding:14px 18px;border-bottom:1px solid var(--border)">
+            <div class="filters">
+              <input class="input" id="regSearch" type="search" placeholder="在当前分类里搜索…" aria-label="搜索条目" />
+              <span class="meta">选中行 → 右侧详情抽屉（原型未展开）</span>
+            </div>
+          </div>
+          <div class="twrap"><table class="ds-table" id="regTable" data-od-id="registry-table"></table></div>
+        </div>
+      </div>`);
+  }
+
+  function renderTelemetry() {
+    let data = SEED_USAGE.slice();
+    const draw = () => {
+      const wrap = document.getElementById("chart");
+      if (!wrap) return;
+      const W = 900, H = 220, pad = { t: 14, r: 12, b: 26, l: 38 };
+      const max = Math.max(...data) * 1.12;
+      const x = (i) => pad.l + (i * (W - pad.l - pad.r)) / (data.length - 1);
+      const y = (v) => H - pad.b - (v * (H - pad.t - pad.b)) / max;
+      const pts = data.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`);
+      const area = `M${pad.l},${H - pad.b} L${pts.join(" L")} L${x(data.length - 1).toFixed(1)},${H - pad.b} Z`;
+      const gridY = [0, 0.25, 0.5, 0.75, 1].map((f) => {
+        const yy = pad.t + f * (H - pad.t - pad.b);
+        return `<line x1="${pad.l}" y1="${yy}" x2="${W - pad.r}" y2="${yy}" stroke="var(--border)" stroke-width="1"/>
+                <text class="axis" x="${pad.l - 8}" y="${yy + 3}" text-anchor="end">${Math.round(max * (1 - f))}</text>`;
+      }).join("");
+      const step = Math.max(1, Math.round(data.length / 6));
+      const xlab = data.map((_, i) => (i % step === 0 ? `<text class="axis" x="${x(i)}" y="${H - 8}" text-anchor="middle">D-${data.length - i}</text>` : "")).join("");
+      wrap.innerHTML = `<svg class="chart" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="每日 token 消耗折线面积图">
+          <defs><linearGradient id="fillGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.30"/>
+            <stop offset="100%" stop-color="var(--accent)" stop-opacity="0.02"/>
+          </linearGradient></defs>
+          ${gridY}
+          <path d="${area}" fill="url(#fillGrad)"/>
+          <polyline points="${pts.join(" ")}" fill="none" stroke="var(--accent)" stroke-width="1.6" stroke-linejoin="round"/>
+          <circle cx="${x(data.length - 1)}" cy="${y(data[data.length - 1])}" r="3.5" fill="var(--accent)"/>
+          ${xlab}
+        </svg>`;
+      const sum = data.reduce((a, b) => a + b, 0);
+      const avg = Math.round(sum / data.length);
+      const set = (id, v) => { const el = document.getElementById(id); if (el) el.textContent = v; };
+      set("kTotal", (sum * 1000).toLocaleString("en-US"));
+      set("kAvg", avg.toLocaleString("en-US"));
+      set("kPeak", Math.max(...data) * 1000);
+      set("kErr", "0.8%");
+    };
+    window.__setUsage = (arr) => { data = arr; draw(); };
+    window.__drawTelemetry = draw;
+    const kpis = [
+      { id: "kTotal", n: "—", u: "", l: "周期内 token 总量", d: "" },
+      { id: "kAvg", n: "—", u: "", l: "日均 token", d: "" },
+      { id: "kPeak", n: "—", u: "", l: "单日峰值", d: "" },
+      { id: "kErr", n: "—", u: "", l: "工具调用失败率", d: "" },
+    ].map((k) => `<div class="kpi" data-od-id="kpi-${k.id}"><div><span class="kpi-n mono" id="${k.id}">${k.n}</span></div>
+        <div class="kpi-l">${k.l}</div><div class="kpi-d">${k.d || "&nbsp;"}</div></div>`).join("");
+    const logs = LOGS.map((l, i) => `<div class="logline" data-od-id="log-${i}">
+        <span class="meta">${l[0]}</span><span class="lvl tag ${l[1] === "error" ? "err" : l[1] === "warn" ? "warn" : l[1] === "debug" ? "idle" : "info"}">${l[1]}</span>
+        <span class="ltext">${esc(l[3])}</span><span class="src">${l[2]}</span></div>`).join("");
+    window.__reseedTelemetry = () => { data = SEED_USAGE.slice(); draw(); };
+    return view("telemetry", `
+      ${head("监控台", "用量、性能、日志、学习轨迹、技能用量五条路由。图表用填充面积而不是空心折线，量级靠色块面积读，不靠线条。")}
+      <div class="panel brk" data-od-id="panel-usage">
+        <div class="panel-hd"><h3>用量 · /hermes/usage</h3>
+          <div class="row spacer">
+            <button class="chip" data-range="7">7 天</button>
+            <button class="chip" data-range="30" aria-pressed="true">30 天</button>
+            <button class="chip" data-range="90">90 天</button>
+          </div>
+        </div>
+        <div class="panel-bd" style="display:grid;gap:16px">
+          <div class="kpis">${kpis}</div>
+          <div class="chartwrap" id="chart" data-od-id="usage-chart"></div>
+        </div>
+      </div>
+      <div class="panel" data-od-id="panel-logs">
+        <div class="panel-hd"><h3>日志 · /hermes/logs</h3><span class="meta">tail -f · ${LOGS.length} 行</span></div>
+        <div class="feed">${logs}</div>
+      </div>`);
+  }
+
+  function renderSystem() {
+    const terms = [
+      ['<span class="p">$</span> hermes doctor', '<span class="ok">✓ runtime 0.19.0 (darwin-arm64)</span>'],
+      ['<span class="p">$</span> hermes doctor', '<span class="ok">✓ web-ui 0.6.29</span>'],
+      ['<span class="p">$</span> hermes doctor', '<span style="color:var(--warn)">! node v22.14 低于要求的 v23</span>'],
+      ['<span class="p">$</span> hermes mcp list', '<span class="d">comfyui · docs-langchain · tapd · hermes-studio</span>'],
+      ['<span class="p">$</span> hermes skill ls', '<span class="d">24 个技能已加载</span>'],
+    ];
+    const sw = SWITCHES.map((s, i) => `<div class="switch-row" data-od-id="switch-row-${i}">
+        <div><div class="t">${s.t}</div><div class="d">${s.d}</div></div>
+        <button class="switch" role="switch" aria-checked="${s.on}" aria-label="${s.t}" data-sw="${i}"></button></div>`).join("");
+    const dev = DEVICES.map((d) => `<tr><td>${esc(d.n)}</td><td class="mono">${esc(d.k)}</td>
+        <td><span class="tag ${d.on ? "ok" : "idle"}">${d.on ? "在线" : "离线"}</span></td></tr>`).join("");
+    return view("system", `
+      ${head("系统台", "设置、用户、终端、频道、设备、版本预览六条路由。终端区用 --code-bg 而不是纯黑，跟消息气泡拉开层次。")}
+      <div class="grid-2">
+        <div class="panel" data-od-id="panel-terminal">
+          <div class="panel-hd"><h3>终端 · /hermes/terminal</h3><span class="meta">shell · zsh</span></div>
+          <div class="panel-bd">
+            <div class="term" id="term" data-od-id="term-out">${terms.map((t) => `<div><span class="d">${t[0]}</span><br>${t[1]}</div>`).join("")}</div>
+            <div class="term-in"><span>$</span><input id="termIn" aria-label="终端输入" placeholder="输入命令后回车（原型不执行真实命令）" autocomplete="off" /></div>
+          </div>
+        </div>
+        <div class="panel" data-od-id="panel-settings">
+          <div class="panel-hd"><h3>设置 · /hermes/settings</h3><span class="meta">即时生效</span></div>
+          <div class="panel-bd" style="padding-top:4px;padding-bottom:4px">${sw}</div>
+        </div>
+      </div>
+      <div class="panel" data-od-id="panel-devices">
+        <div class="panel-hd"><h3>设备 · /hermes/devices</h3><span class="meta">局域网发现</span></div>
+        <div class="twrap"><table class="ds-table"><thead><tr><th>设备</th><th>地址 / 平台</th><th>状态</th></tr></thead><tbody>${dev}</tbody></table></div>
+      </div>`);
+  }
+
+  function renderTokens() {
+    // kind: s = 表面层（不做对比度判定，只标 L 值） / i = 墨色（跑 WCAG 对比度）
+    const rows = [
+      ["--bg-primary", "--bg", "页面底", "s"],
+      ["--bg-sidebar", "--surface", "侧栏底（比页面更深）", "s"],
+      ["--bg-card", "--surface-2", "卡片 / 面板", "s"],
+      ["--bg-card-hover", "--surface-3", "悬浮 / 选中行", "s"],
+      ["--bg-input", "--input-bg", "输入框底", "s"],
+      ["--code-bg", "--code-bg", "代码 / 终端底", "s"],
+      ["--border-color", "--border", "发丝线", "s"],
+      ["--text-primary", "--fg", "正文", "i"],
+      ["--text-secondary", "--muted", "次级文字", "i"],
+      ["--text-muted", "--faint", "三级文字 / 标签", "i"],
+      ["--accent-primary", "--accent", "唯一霓虹强调", "i"],
+      ["--accent-hover", "--accent-hv", "强调 hover", "i"],
+      ["--text-on-accent", "--accent-ink", "强调底上的字", "i"],
+      ["--success", "--ok", "状态", "i"],
+      ["--warning", "--warn", "状态", "i"],
+      ["--error", "--err", "状态", "i"],
+      ["--accent-info", "--info", "状态", "i"],
+    ];
+    const Lof = (v) => { const m = v.match(/oklch\(\s*([\d.]+)/); return m ? (+m[1]).toFixed(3) : "—"; };
+    const body = rows.map(([sc, tok, role, kind]) => {
+      const v = token(tok);
+      let last = `<span class="mono" style="color:var(--faint)">L ${Lof(v)}</span>`;
+      if (kind === "i") {
+        const cr = ratio(v, token("--bg"));
+        last = `<span class="ratio ${cr >= 4.5 ? "pass" : cr >= 3 ? "lg" : ""}">${cr.toFixed(2)}:1</span>`;
+      }
+      return `<tr data-od-id="tok-row-${sc}">
+        <td class="var">${sc}</td><td class="var">${tok}</td>
+        <td><span class="sw" style="background:${v}"></span><span class="mono">${oklchHex(v)}</span></td>
+        <td class="hexv">${v}</td><td>${role}</td>
+        <td class="num-col">${last}</td></tr>`;
+    }).join("");
+    const contrast = [
+      ["正文 fg / 页面底", "fg", "bg"], ["正文 fg / 面板", "fg", "surface-2"],
+      ["次级 muted / 页面底", "muted", "bg"], ["次级 muted / 面板", "muted", "surface-2"],
+      ["三级 faint / 面板", "faint", "surface-2"], ["三级 faint / 选中行", "faint", "surface-3"],
+      ["强调 accent / 页面底", "accent", "bg"], ["强调 accent / 面板", "accent", "surface-2"],
+      ["状态 ok / 面板", "ok", "surface-2"], ["状态 err / 面板", "err", "surface-2"],
+      ["状态 warn / 面板", "warn", "surface-2"], ["状态 info / 面板", "info", "surface-2"],
+      ["强调底上的字 / 强调", "accent-ink", "accent"],
+    ].map(([n, a, b]) => {
+      const cr = ratio(token("--" + a), token("--" + b));
+      return `<tr data-od-id="cr-row-${a}-${b}"><td>${n}</td><td class="hexv">${a} on ${b}</td>
+        <td class="num-col"><span class="ratio ${cr >= 4.5 ? "pass" : cr >= 3 ? "lg" : ""}">${cr.toFixed(2)}:1</span></td>
+        <td class="mono" style="color:var(--muted);font-size:11.5px">${cr >= 4.5 ? "正文级达标" : cr >= 3 ? "仅大字 / 图标级" : "不合格"}</td></tr>`;
+    }).join("");
+    return view("tokens", `
+      ${head("色彩令牌", "左边这列就是 variables.scss 里现成的变量名，右边是对应的 OKLch 值。hex 由页面实时从 CSS 变量反算，改一个 token 表就跟着变。")}
+      <div class="panel brk" data-od-id="panel-token-map">
+        <div class="panel-hd"><h3>Token 对照表</h3><span class="meta">variables.scss → :root</span></div>
+        <div class="twrap"><table class="map"><thead><tr><th>variables.scss 变量</th><th>本稿 token</th><th>hex</th><th>OKLch</th><th>角色</th><th class="num-col">对比底色</th></tr></thead>
+          <tbody>${body}</tbody></table></div>
+      </div>
+      <div class="grid-2">
+        <div class="panel" data-od-id="panel-contrast">
+          <div class="panel-hd"><h3>对比度实测</h3><span class="meta">WCAG 2.1</span></div>
+          <div class="twrap"><table class="map"><thead><tr><th>组合</th><th>配对</th><th class="num-col">比值</th><th>判定</th></tr></thead><tbody>${contrast}</tbody></table></div>
+        </div>
+        <div class="panel" data-od-id="panel-rules">
+          <div class="panel-hd"><h3>视觉规则</h3></div>
+          <div class="panel-bd" style="display:grid;gap:12px">
+            <div class="note"><b>一屏一处强调。</b>强调色只出现在激活导航的左侧 2px 竖条、唯一主按钮、焦点环三处。其余全部靠发丝线和表面层级分层。</div>
+            <div class="note"><b>状态色是语义豁免。</b>ok / warn / err / info 只在状态位出现，跟水墨基线里「status 色除外」的口径一致。</div>
+            <div class="note"><b>网格纹理不是渐变底。</b>32px 网格用 5% 的强调色画线，从顶部径向淡出，不做整屏色块。</div>
+            <div class="note"><b>标题用等宽。</b>视图标题、路由、数字、代码全走 mono，正文走 sans —— 终端仪表盘的口径，也避开了拿 Inter 当标题。</div>
+            <div class="note"><b>圆角不返工。</b>控件 6px / 面板 8px，跟 arco-theme.ts 冻结的 <span class="mono">borderRadius: 6</span> 对齐。</div>
+          </div>
+        </div>
+      </div>`);
+  }
+
+  function renderLanding() {
+    const steps = [
+      { t: "variables.scss 加一组 .cyber", d: "跟 .dark / .comic 同级并列，只覆盖色值和字体栈，不动 SCSS 变量那一段 —— 变量是委托给 CSS 自定义属性的，加了自动生效。", p: "packages/client/src/styles/variables.scss" },
+      { t: "useTheme.ts 的 style 联合类型加 'cyber'", d: "ThemeStyle 从 'ink' | 'comic' 变成三态；applyClasses() 里多 toggle 一个 cyber class。style 默认值保持 'ink'，老用户不受影响。", p: "packages/client/src/composables/useTheme.ts" },
+      { t: "主题循环改成三项", d: "toggleStyle() 现在是二元翻转，需要改成在 ink / comic / cyber 之间轮转。brightness 那一维（light / dark / system）保持独立不变。", p: "packages/client/src/composables/useTheme.ts · toggleStyle()" },
+      { t: "index.html 的 FOUC 脚本同步", d: "基线里明写了「FOUC 脚本内联在 index.html，两边同步改」。加 cyber 后这里也要读同一个 localStorage key，否则首屏会闪一下白。", p: "packages/client/index.html" },
+      { t: "arco-theme.ts 的 colorPrimary 改成按主题取值", d: "现在 colorPrimary 是硬编码的 <code>#2f2f2f</code> 单值。cyber 下需要读到强调色（<code>oklch(0.805 0.148 188)</code> ≈ <code>#00DDD1</code>），且 <code>body[arco-theme='dark']</code> 那套覆盖变量也要跟着补一组 cyber 值。", p: "packages/client/src/styles/arco-theme.ts" },
+      { t: "ui-baseline.md 补一节 cyber 色板", d: "基线是「视觉语言唯一依据」。不改它的话 cyber 就是没有授权的第四套色。照第 1 节的表格格式补 17 行即可，标注它与「纯黑白灰」主基调的关系 —— 建议写成「cyber 是可选风格，不参与基线三主题」。", p: "docs/ui-baseline.md · 第 1 节" },
+    ];
+    const stepsHtml = steps.map((s, i) => `<div class="step" data-od-id="landing-step-${i + 1}">
+        <div class="step-n">${String(i + 1).padStart(2, "0")}</div>
+        <div><div class="step-t">${s.t}</div><div class="step-d">${s.d}</div><div class="path">${s.p}</div></div>
+      </div>`).join("");
+    return view("landing", `
+      ${head("落地路径", "cyber 作为第四套可选风格接入，不推翻水墨基线。下面六步是照着仓库真实结构写的，每条都对应到具体文件和方法。")}
+      <div class="panel brk" data-od-id="panel-landing">
+        <div class="panel-hd"><h3>改动清单</h3><span class="meta">6 处 · 全部只加不改</span></div>
+        <div class="panel-bd"><div class="steps">${stepsHtml}</div></div>
+      </div>
+      <div class="grid-2">
+        <div class="panel" data-od-id="panel-scope">
+          <div class="panel-hd"><h3>本稿覆盖 / 不覆盖</h3></div>
+          <div class="panel-bd" style="display:grid;gap:12px">
+            <div class="note"><b>覆盖：</b>应用外壳（240px 侧栏 + 60px 顶栏 + 视图切换）、5 个视图族的版式与信息密度、交互状态、token 全套、落地清单。</div>
+            <div class="note"><b>不覆盖：</b>25 个路由的高保真页面（只做了 5 个视图族的代表页）、Arco 组件逐个改造、装饰位面、登录页、消息气泡内性能红线。</div>
+            <div class="note"><b>原型≠代码：</b>这是 HTML 结构稿。落到 Vue 模板层要重写一遍，但版式、间距、状态规则可以直接照抄。</div>
+          </div>
+        </div>
+        <div class="panel" data-od-id="panel-scss">
+          <div class="panel-hd"><h3>variables.scss 片段 · 示意</h3></div>
+          <div class="panel-bd">
+            <div class="term" style="min-height:0;display:block;white-space:pre-wrap;overflow-x:auto"><span class="d">// 追加在 .dark.comic 之后
+.cyber {
+  <span class="p">--bg-primary</span>: oklch(0.155 0.012 250);
+  <span class="p">--bg-sidebar</span>: oklch(0.130 0.012 250);
+  <span class="p">--bg-card</span>:    oklch(0.205 0.014 248);
+  <span class="p">--accent-primary</span>: oklch(0.805 0.148 188);
+  <span class="p">--text-primary</span>: oklch(0.945 0.006 200);
+  <span class="p">--accent-primary-rgb</span>: 0, 221, 209;
+}</div>
+          </div>
+        </div>
+      </div>`);
+  }
+
+  const RENDER = { console: renderConsole, pipeline: renderPipeline, registry: renderRegistry, telemetry: renderTelemetry, system: renderSystem, tokens: renderTokens, landing: renderLanding };
+
+  /* ─── 外壳状态 ─────────────────────────────────────────────────── */
+  const shell = document.getElementById("shell");
+  const navEl = document.getElementById("railNav");
+  const viewport = document.getElementById("viewport");
+  const KEY = "hermes.cyber.view";
+
+  function renderNav(q = "") {
+    const ql = q.trim().toLowerCase();
+    const mk = (f) => `<div class="nav-grp">
+        <div class="nav-grp-lbl"><span>${f.idx} · ${f.en}</span><span>${f.routes.length}</span></div>
+        <button class="nav-item" data-go="${f.id}" aria-current="${f.id === state.view ? "page" : "false"}" data-od-id="nav-${f.id}">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${ICON[f.id]}"/></svg>
+          <span>${f.name}</span><span class="nav-count">${f.routes.length}</span>
+        </button></div>`;
+    const a = FAMILIES.filter((f) => !ql || (f.name + f.en + f.routes.map((r) => r.p).join("")).toLowerCase().includes(ql)).map(mk).join("");
+    const b = DELIVERY.filter((f) => !ql || (f.name + f.en).toLowerCase().includes(ql)).map(mk).join("");
+    navEl.innerHTML = a + (b ? `<div class="nav-grp"><div class="nav-grp-lbl"><span>交付说明 · 仅本稿</span></div>${b}</div>` : "")
+      + (a || b ? "" : `<div class="nav-empty" data-od-id="nav-empty">没有匹配 “${esc(q.trim())}” 的视图<br><span class="mono">试试：对话 / 看板 / 用量 / 令牌</span></div>`);
+  }
+
+  const state = { view: "console" };
+  try { const s = localStorage.getItem(KEY); if (s && RENDER[s]) state.view = s; } catch (e) {}
+
+  function go(id, remember = true) {
+    if (!RENDER[id]) return;
+    state.view = id;
+    if (remember) { try { localStorage.setItem(KEY, id); } catch (e) {} }
+    viewport.innerHTML = RENDER[id]();
+    viewport.scrollTop = 0;
+    const f = ALL.find((x) => x.id === id);
+    document.getElementById("crumbFam").textContent = f.name;
+    document.getElementById("crumbRoute").textContent = f.route;
+    document.getElementById("crumbView").textContent = f.view;
+    document.getElementById("btnRun").textContent = id === "pipeline" ? "新建任务" : id === "registry" ? "注册来源" : id === "system" ? "保存设置" : id === "telemetry" ? "刷新数据" : id === "console" ? "运行" : "复制 token";
+    renderNav(document.getElementById("navFilter").value);
+    wire(id);
+  }
+
+  /* ─── 事件绑定 ─────────────────────────────────────────────────── */
+  function wire(id) {
+    if (id === "console") {
+      const thread = document.getElementById("thread");
+      const box = document.getElementById("composer");
+      const setRunning = (on) => {
+        const b = document.getElementById("btnSend");
+        b.disabled = on;
+        b.textContent = on ? "生成中…" : "发送";
+        b.setAttribute("aria-busy", String(on));
+      };
+      const replyFor = (q) => {
+        if (/token|对比度|色|contrast|theme|主题/i.test(q))
+          return "配色已按 WCAG 重新核过：正文 / 背景 12.4:1，次级文本 6.1:1，最弱一档是 hint 4.84:1，也在 AA 线以上。霓虹强调色只出现在 eyebrow 和主 CTA 两处，没有第三处。";
+        if (/跑|启动|安装|依赖|pnpm|npm/i.test(q))
+          return "跑之前先确认三件事：Node 版本要到 23（低于 23 顶栏会挂黄条）、`pnpm install` 要在 monorepo 根目录、后端 `packages/server` 另起一个终端，默认监听 8787。";
+        if (/看板|kanban|任务|状态/i.test(q))
+          return "看板九个状态取自 `api/hermes/kanban.ts` 的 KanbanTaskStatus，没有另造一套。统计卡点一下按列过滤，再点取消；「全部」卡是清零而不是筛 lane=*。";
+        return "收到。这版只做外壳和视图族，原型不连真实后端 —— 我把这轮的问题记下来了，回到原型继续：侧栏七项、六个视图都能点开，交互状态都走的是真 DOM 而不是画出来的。";
+      };
+      let busy = false;
+      const send = () => {
+        const t = box.value.trim();
+        if (!t || busy) { if (!t) box.focus(); return; }
+        busy = true; setRunning(true);
+        const d = document.createElement("div");
+        d.className = "msg user";
+        d.innerHTML = `<div class="msg-who">YOU</div><div class="msg-bubble"></div>`;
+        d.querySelector(".msg-bubble").textContent = t;
+        thread.appendChild(d);
+        box.value = "";
+        const full = replyFor(t);
+        const r = document.createElement("div");
+        r.className = "msg";
+        r.setAttribute("data-od-id", "msg-agent-stream");
+        r.innerHTML = `<div class="msg-who">AGENT</div><div class="msg-bubble"><span id="streamText"></span><span class="caret" aria-label="输出中"></span></div>`;
+        thread.appendChild(r);
+        const out = r.querySelector("#streamText");
+        let i = 0;
+        const step = () => {
+          i = Math.min(full.length, i + 2);
+          const slice = full.slice(0, i);
+          const oddTicks = (slice.match(/`/g) || []).length % 2 === 1;
+          out.innerHTML = oddTicks ? esc(slice) : esc(slice).replace(/`([^`]+)`/g, "<code>$1</code>");
+          thread.scrollTop = thread.scrollHeight;
+          if (i < full.length) { setTimeout(step, 16); return; }
+          r.querySelector(".caret").remove();
+          busy = false; setRunning(false); box.focus();
+        };
+        setTimeout(step, 120);
+      };
+      document.getElementById("btnSend").addEventListener("click", send);
+      box.addEventListener("keydown", (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } });
+      document.querySelectorAll(".sess").forEach((s) => s.addEventListener("click", () => {
+        document.querySelectorAll(".sess").forEach((o) => o.setAttribute("aria-current", "false"));
+        s.setAttribute("aria-current", "true");
+      }));
+    }
+    if (id === "pipeline") {
+      window.__paintKanban(null);
+      document.querySelectorAll("#kanbanStats .stat").forEach((b) => b.addEventListener("click", () => {
+        window.__kanbanFilter = window.__kanbanFilter === b.dataset.lane ? null : b.dataset.lane;
+        window.__paintKanban(window.__kanbanFilter);
+      }));
+    }
+    if (id === "registry") {
+      const tabs = document.querySelectorAll("#regTabs [data-reg]");
+      let cur = tabs[0] && tabs[0].dataset.reg;
+      const paint = (q) => { if (cur) window.__drawRegistry(cur, q || ""); };
+      tabs.forEach((b) => b.addEventListener("click", () => {
+        tabs.forEach((o) => o.setAttribute("aria-pressed", "false"));
+        b.setAttribute("aria-pressed", "true");
+        cur = b.dataset.reg;
+        paint(document.getElementById("regSearch").value);
+      }));
+      const si = document.getElementById("regSearch");
+      si.addEventListener("input", () => paint(si.value));
+      document.getElementById("regTable").addEventListener("click", (e) => {
+        const tr = e.target.closest("tr[data-od-id='reg-row']"); if (!tr) return;
+        document.querySelectorAll("#regTable tbody tr").forEach((o) => o.setAttribute("aria-selected", "false"));
+        tr.setAttribute("aria-selected", "true");
+      });
+      paint();
+    }
+    if (id === "telemetry") {
+      window.__drawTelemetry();
+      const ranges = { 7: () => SEED_USAGE.slice(-7), 30: () => SEED_USAGE.slice(), 90: () => { const x = []; for (let i = 0; i < 90; i++) x.push(40 + ((i * 37) % 60)); return x; } };
+      document.querySelectorAll("[data-range]").forEach((b) => b.addEventListener("click", () => {
+        document.querySelectorAll("[data-range]").forEach((o) => o.setAttribute("aria-pressed", String(o === b)));
+        window.__setUsage(ranges[+b.dataset.range]());
+      }));
+    }
+    if (id === "system") {
+      const term = document.getElementById("term"), tin = document.getElementById("termIn");
+      tin.addEventListener("keydown", (e) => {
+        if (e.key !== "Enter") return;
+        const v = tin.value.trim(); if (!v) return;
+        const line = document.createElement("div");
+        line.innerHTML = `<span class="d"><span class="p">$</span> ${esc(v)}</span>`;
+        term.appendChild(line);
+        const r = document.createElement("div");
+        r.className = "d";
+        r.textContent = "原型不执行真实命令 —— 这行只验证终端的排版、行距和滚动行为。";
+        term.appendChild(r);
+        term.scrollTop = term.scrollHeight;
+        tin.value = "";
+      });
+      document.querySelectorAll(".switch").forEach((s) => s.addEventListener("click", () => {
+        const on = s.getAttribute("aria-checked") === "true";
+        s.setAttribute("aria-checked", String(!on));
+      }));
+    }
+  }
+
+  // telemetry 数据替换钩子（供范围切换用）
+
+  document.getElementById("railToggle").addEventListener("click", () => {
+    const wide = window.matchMedia("(max-width: 920px)").matches;
+    if (wide) { shell.dataset.open = shell.dataset.open === "1" ? "0" : "1"; return; }
+    shell.dataset.mini = shell.dataset.mini === "1" ? "0" : "1";
+    document.getElementById("railToggle").setAttribute("aria-expanded", String(shell.dataset.mini !== "1"));
+  });
+  document.getElementById("navFilter").addEventListener("input", (e) => renderNav(e.target.value));
+  navEl.addEventListener("click", (e) => {
+    const b = e.target.closest("[data-go]"); if (!b) return;
+    go(b.dataset.go);
+    if (window.matchMedia("(max-width: 920px)").matches) shell.dataset.open = "0";
+  });
+  document.getElementById("btnReseed").addEventListener("click", () => go(state.view, false));
+  document.getElementById("btnRun").addEventListener("click", (e) => {
+    const b = e.currentTarget;
+    const old = b.textContent;
+    b.textContent = "…";
+    setTimeout(() => { b.textContent = old; }, 700);
+  });
+
+  // 键盘：⌘K / Ctrl+K 打开筛选
+  document.addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); document.getElementById("navFilter").focus(); }
+  });
+
+  renderNav();
+  go(state.view, false);
+})();
+</script>
+</body>
+</html>
diff --git a/prototype_reference/hermes-ui-cyber-shell.html b/prototype_reference/hermes-ui-cyber-shell.html
new file mode 100644
index 0000000..9fe8169
--- /dev/null
+++ b/prototype_reference/hermes-ui-cyber-shell.html
@@ -0,0 +1,2222 @@
+<!doctype html>
+<!--
+  hermes-ui · CYBER 主题设计稿 · v2 多屏路由版
+  ────────────────────────────────────────────────────────────────────────
+  交付物  单文件 HTML 原型。零外部依赖，双击即开。
+          覆盖 packages/client/src/router/index.ts 全部 31 条路由 →
+          27 个组件屏。hermes-ui 仓库一个字节都没动。
+  路由    真实 31 条（不是 29）：2 条 public + 5 条 superadmin + 24 条常规。
+          侧栏沿用 AppSidebar.vue 的真实四组 IA（助手/监控/工具/系统）。
+  与 v1   v1 是 5 个视图族的概念稿；v2 换成路由级切换，一屏 = 一条路由，
+          hash 直达、刷新不丢、前进后退可用。
+
+  色彩    近黑偏蓝底 + 单一霓虹青强调。科技感来自 32px 网格 / 发丝线 /
+          等宽数字 / 状态灯，不靠满屏发光。
+  字体    标题与数字走等宽（终端仪表盘口径），正文走 PingFang SC。
+  布局    240px 侧栏 + 60px 顶栏 + 单一滚动区。920px 以下侧栏收成抽屉。
+
+  ⚠ 所有数值均为版式占位，非真实运行数据。界面内已用「演示数据」标出。
+-->
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<title>hermes-ui · CYBER · 路由级多屏原型</title>
+<style>
+
+  /* ─── tokens ────────────────────────────────────────────────────────
+     六枚核心 token，对应 variables.scss 同名角色。
+     补充 token 全部用于 cyber 特有的表面层级与状态色，
+     在 variables.scss 里对应 --bg-* / --*-rgb / --success 等既有变量。 */
+  :root {
+    --bg:      oklch(0.155 0.012 250);   /* 页面底        → --bg-primary   */
+    --surface: oklch(0.130 0.012 250);   /* 侧栏底(更深)  → --bg-sidebar   */
+    --fg:      oklch(0.945 0.006 200);   /* 正文          → --text-primary */
+    --muted:   oklch(0.705 0.014 230);   /* 次级文字      → --text-secondary */
+    --border:  oklch(0.305 0.018 242);   /* 发丝线        → --border-color */
+    --accent:  oklch(0.805 0.148 188);   /* 霓虹青·唯一强调 → --accent-primary */
+
+    /* 扩展层：cyber 特有的表面阶梯与状态色 */
+    --surface-2: oklch(0.205 0.014 248);  /* 卡片 / 面板        → --bg-card      */
+    --surface-3: oklch(0.245 0.016 246);  /* 悬浮 / 选中行      → --bg-card-hover */
+    --input-bg:  oklch(0.175 0.013 249);  /* 输入框底           → --bg-input     */
+    --code-bg:   oklch(0.115 0.012 250);  /* 代码 / 终端底      → --code-bg      */
+    --faint:     oklch(0.640 0.014 230);  /* 三级文字 / 标签 → --text-muted   */
+    --accent-hv: oklch(0.880 0.130 188);  /* 强调 hover         → --accent-hover */
+    --accent-ink:oklch(0.160 0.030 240);  /* 强调底上的字       → --text-on-accent */
+    --ok:        oklch(0.780 0.150 150);  /* 状态              → --success */
+    --warn:      oklch(0.800 0.140 78);   /* 状态              → --warning */
+    --err:       oklch(0.745 0.185 22);   /* 状态 · L=.745 保 tag 文字在 .tcard 上 ≥4.9:1 → --error */
+    --info:      oklch(0.720 0.120 252);  /* 状态              → --accent-info */
+
+    --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent);
+    --fg-soft:     color-mix(in oklch, var(--fg) 6%, transparent);
+    --hairline:    color-mix(in oklch, var(--fg) 10%, transparent);
+    --mask-on:     var(--fg);  /* 网格 mask 的「不透明」端，只用 alpha，不用色相 */
+
+    /* display = mono（终端感仪表盘，刻意不用 Inter 当标题）
+       body = sans；mono 负责全部数字、标签、路径、代码 */
+    --font-display: ui-monospace, 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
+    --font-body:    -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI', system-ui, sans-serif;
+    --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', 'Menlo', 'PingFang SC', monospace;
+
+    --rail-w:  240px;  /* 对齐 $sidebar-width            */
+    --rail-w-mini: 64px; /* 对齐 $sidebar-collapsed-width */
+    --top-h:   60px;   /* 对齐 $header-height            */
+    --gap-xs: 8px; --gap-sm: 12px; --gap-md: 20px; --gap-lg: 32px; --gap-xl: 56px;
+    --radius: 6px; --radius-lg: 8px;  /* 对齐 Arco borderRadius: 6，零返工 */
+  }
+
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body { height: 100%; }
+  body {
+    margin: 0; background: var(--bg); color: var(--fg);
+    font-family: var(--font-body); font-size: 14px; line-height: 1.55;
+    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
+  }
+  img, svg { display: block; max-width: 100%; }
+  a { color: inherit; text-decoration: none; }
+  button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
+  input, select, textarea { font: inherit; color: inherit; }
+  h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
+  p { margin: 0; text-wrap: pretty; }
+  code, .note code, .step-d code, .term code {
+    font-family: var(--font-mono); font-size: .92em; color: var(--accent);
+    background: var(--code-bg); border: 1px solid var(--border);
+    padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere;
+  }
+  ::selection { background: var(--accent-soft); color: var(--fg); }
+
+  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+
+  /* 唯一装饰母题：角标括号。激活导航 + 面板头各一处，不铺开。 */
+  .brk { position: relative; }
+  .brk::before, .brk::after {
+    content: ''; position: absolute; width: 9px; height: 9px;
+    border: 1px solid var(--accent); opacity: .6; pointer-events: none;
+  }
+  .brk::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
+  .brk::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
+
+  .num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+  .meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
+  .eyebrow {
+    font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
+    text-transform: uppercase; color: var(--faint); margin: 0;
+  }
+
+  .led { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
+  .led.ok   { background: var(--ok);   box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok) 22%, transparent); }
+  .led.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 22%, transparent); }
+  .led.err  { background: var(--err);  box-shadow: 0 0 0 3px color-mix(in oklch, var(--err) 22%, transparent); }
+  .led.run  { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: pulse 1.8s ease-in-out infinite; }
+  @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
+  @media (prefers-reduced-motion: reduce) { .led.run { animation: none } * { transition: none !important } }
+
+  /* ─── shell ─────────────────────────────────────────────────────── */
+  .shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); height: 100%; }
+  .shell[data-mini="1"] { grid-template-columns: var(--rail-w-mini) minmax(0, 1fr); }
+
+  .rail {
+    display: flex; flex-direction: column; min-height: 0;
+    background: var(--surface); border-right: 1px solid var(--border);
+  }
+  .rail-brand { display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
+  .rail-mark { width: 26px; height: 26px; flex: 0 0 auto; color: var(--accent); }
+  .rail-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .1em; line-height: 1.1; }
+  .rail-sub  { font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .14em; }
+  .shell[data-mini="1"] .rail-brand { justify-content: center; padding: 0; }
+  .shell[data-mini="1"] .rail-txt { display: none; }
+
+  .rail-search { padding: 12px 12px 8px; flex: 0 0 auto; }
+  .input {
+    width: 100%; min-height: 44px; padding: 9px 12px;
+    background: var(--input-bg); border: 1px solid var(--border);
+    border-radius: var(--radius); color: var(--fg); font-size: 13px;
+    transition: background .15s ease, border-color .15s ease;
+  }
+  .input::placeholder { color: var(--faint); }
+  .input:hover { background: var(--surface-2); border-color: color-mix(in oklch, var(--fg) 22%, transparent); }
+  .input:focus { border-color: var(--accent); background: var(--surface-2); }
+  .shell[data-mini="1"] .rail-search { display: none; }
+
+  .rail-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 16px; }
+  .rail-nav::-webkit-scrollbar { width: 8px; }
+  .rail-nav::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
+  .nav-grp { margin-top: 14px; }
+  .nav-grp:first-child { margin-top: 4px; }
+  .nav-grp-lbl {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 6px 8px; font-family: var(--font-mono); font-size: 10px;
+    letter-spacing: .16em; color: var(--faint); text-transform: uppercase;
+  }
+  .nav-item {
+    position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
+    min-height: 44px; padding: 8px 10px; border-radius: var(--radius);
+    color: var(--muted); font-size: 13.5px; text-align: left;
+    transition: background .15s ease, color .15s ease;
+  }
+  .nav-item:hover { background: var(--surface-2); color: var(--fg); }
+  .nav-item[aria-current="page"] { background: var(--surface-3); color: var(--fg); font-weight: 500; }
+  .nav-item[aria-current="page"]::before {
+    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+    width: 2px; height: 18px; background: var(--accent); border-radius: 1px;
+  }
+  .nav-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
+  .nav-count {
+    margin-left: auto; font-family: var(--font-mono); font-size: 11px;
+    color: var(--faint); font-variant-numeric: tabular-nums;
+  }
+  .nav-item[aria-current="page"] .nav-count { color: var(--accent); }
+  .nav-empty {
+    padding: 22px 14px; text-align: center; font-size: 12.5px; line-height: 1.7;
+    color: var(--faint); border: 1px dashed var(--border); border-radius: var(--radius-lg); margin: 2px 0;
+  }
+  .nav-empty .mono { font-size: 11px; color: var(--muted); }
+  .shell[data-mini="1"] .nav-item { justify-content: center; padding: 8px 0; }
+  .shell[data-mini="1"] .nav-item span, .shell[data-mini="1"] .nav-count { display: none; }
+
+  .rail-foot { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 10px 12px 12px; display: grid; gap: 8px; }
+  .rail-stat { display: flex; align-items: center; gap: 8px; min-height: 22px; }
+  .rail-foot .mono { font-size: 11px; color: var(--muted); }
+  .shell[data-mini="1"] .rail-foot { padding: 10px 0; }
+  .shell[data-mini="1"] .rail-foot .mono { display: none; }
+  .shell[data-mini="1"] .rail-stat { justify-content: center; }
+
+  /* ─── stage ─────────────────────────────────────────────────────── */
+  .stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+  .topbar {
+    flex: 0 0 auto; height: var(--top-h); display: flex; align-items: center;
+    gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--border);
+    background: color-mix(in oklch, var(--bg) 88%, transparent);
+    backdrop-filter: blur(14px);
+  }
+  .icon-btn {
+    display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
+    border-radius: var(--radius); color: var(--muted);
+    transition: background .15s ease, color .15s ease;
+  }
+  .icon-btn:hover { background: var(--surface-2); color: var(--fg); }
+  .icon-btn svg { width: 18px; height: 18px; }
+  .crumb { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+  .crumb-fam { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--faint); text-transform: uppercase; }
+  .crumb-route { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
+  .crumb-view { font-size: 13px; color: var(--muted); }
+  .top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
+
+  .btn {
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    min-height: 44px; padding: 0 18px; border-radius: var(--radius);
+    border: 1px solid transparent; font-size: 13.5px; font-weight: 500; white-space: nowrap;
+    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
+  }
+  .btn:active { transform: translateY(1px); }
+  .btn:disabled { cursor: not-allowed; transform: none; opacity: .55; }
+  .btn:disabled:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+  .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
+  .btn-primary:hover { background: var(--accent-hv); border-color: var(--accent-hv); }
+  .btn-primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
+  .btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
+  .btn-ghost:hover { background: var(--surface-2); color: var(--fg); border-color: color-mix(in oklch, var(--fg) 24%, transparent); }
+
+  .viewport { flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; }
+  .viewport::before {
+    content: ''; position: absolute; inset: 0; pointer-events: none;
+    background-image:
+      linear-gradient(to right, color-mix(in oklch, var(--accent) 5%, transparent) 1px, transparent 1px),
+      linear-gradient(to bottom, color-mix(in oklch, var(--accent) 5%, transparent) 1px, transparent 1px);
+    background-size: 32px 32px;
+    -webkit-mask-image: radial-gradient(130% 70% at 50% 0%, var(--mask-on) 10%, transparent 72%);
+    mask-image: radial-gradient(130% 70% at 50% 0%, var(--mask-on) 10%, transparent 72%);
+  }
+  .viewport > * { position: relative; }
+  .view { padding: 26px 28px 40px; display: grid; gap: 20px; align-content: start; }
+  .view-flush { padding: 0; }
+  .view[hidden] { display: none; }
+
+  /* ─── panels ────────────────────────────────────────────────────── */
+  .panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
+  .panel-hd {
+    display: flex; align-items: center; gap: 12px; min-height: 48px;
+    padding: 12px 18px; border-bottom: 1px solid var(--border);
+  }
+  .panel-hd h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
+  .panel-hd .meta { margin-left: auto; }
+  .panel-bd { padding: 18px; }
+  .view-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
+  .view-head h1 { font-size: 24px; letter-spacing: -.01em; }
+  .view-head .desc { font-size: 13px; color: var(--muted); max-width: 62ch; }
+  .view-head .spacer { margin-left: auto; }
+
+  .chip {
+    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
+    border: 1px solid var(--border); border-radius: 999px; background: transparent;
+    color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
+    transition: background .15s ease, color .15s ease, border-color .15s ease;
+  }
+  /* 可点击的 chip 是真实触摸目标：44px 命中区，视觉尺寸不变 */
+  button.chip { min-height: 44px; padding: 0 16px; }
+  button.chip:hover { background: var(--surface-3); color: var(--fg); border-color: color-mix(in oklch, var(--fg) 24%, transparent); }
+  .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
+  .tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
+  .tag.ok { background: color-mix(in oklch, var(--ok) 16%, transparent); color: var(--ok); }
+  .tag.warn { background: color-mix(in oklch, var(--warn) 16%, transparent); color: var(--warn); }
+  .tag.err { background: color-mix(in oklch, var(--err) 16%, transparent); color: var(--err); }
+  .tag.info { background: color-mix(in oklch, var(--info) 16%, transparent); color: var(--info); }
+  .tag.idle { background: var(--surface-3); color: var(--muted); }
+
+  .demo-flag {
+    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
+    border: 1px dashed color-mix(in oklch, var(--warn) 55%, transparent);
+    border-radius: 4px; color: var(--warn); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
+  }
+
+  /* ─── 对话台 ───────────────────────────────────────────────────── */
+  .console { display: grid; grid-template-columns: 232px minmax(0, 1fr) 272px; gap: 0; height: calc(100vh - var(--top-h)); }
+  .col-side { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
+  .col-side.right { border-right: 0; border-left: 1px solid var(--border); }
+  .side-hd { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
+  .side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }
+  .sess {
+    display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--radius);
+    border: 1px solid transparent; transition: background .15s ease, border-color .15s ease;
+  }
+  .sess:hover { background: var(--surface-2); }
+  .sess:hover .sess-m { color: var(--muted); }
+  .sess[aria-current="true"] { background: var(--surface-3); border-color: var(--border); }
+  .sess[aria-current="true"] .sess-m { color: var(--muted); }
+  .sess-t { font-size: 13px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sess-m { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); margin-top: 2px; }
+
+  .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 26px; display: grid; gap: 18px; align-content: start; }
+  .msg { display: grid; gap: 6px; max-width: 74ch; }
+  .msg.user { justify-self: end; text-align: right; }
+  .msg-who { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
+  .msg-bubble {
+    padding: 12px 15px; border-radius: var(--radius-lg); border: 1px solid var(--border);
+    background: var(--surface-2); font-size: 13.5px; line-height: 1.6; text-align: left; white-space: pre-wrap;
+  }
+  .msg.user .msg-bubble { background: var(--surface-3); }
+  .msg-bubble code { font-family: var(--font-mono); font-size: 12.5px; background: var(--code-bg); padding: 1px 5px; border-radius: 3px; color: var(--accent); }
+  .tool {
+    border: 1px solid var(--border); border-left: 2px solid var(--accent);
+    border-radius: var(--radius); background: var(--code-bg); overflow: hidden;
+  }
+  .tool-hd { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
+  .tool-hd .tag { margin-left: auto; }
+  .tool-bd { padding: 0 12px 11px; font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); line-height: 1.7; }
+  .caret { display: inline-block; width: 8px; height: 14px; background: var(--accent); vertical-align: -2px; animation: blink 1.05s steps(2) infinite; }
+  @keyframes blink { 0%,50% { opacity: 1 } 51%,100% { opacity: 0 } }
+
+  .dock { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 14px 26px 16px; background: var(--bg); }
+  .dock-box { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--input-bg); padding: 12px 14px; transition: border-color .15s ease; }
+  .dock-box:focus-within { border-color: var(--accent); }
+  .dock-box textarea { width: 100%; min-height: 62px; resize: none; border: 0; background: transparent; color: var(--fg); font-size: 13.5px; line-height: 1.6; }
+  .dock-box textarea:focus { outline: none; }
+  .dock-box textarea::placeholder { color: var(--faint); }
+  .dock-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
+
+  .kv { display: grid; gap: 12px; }
+  .kv-row { display: grid; gap: 3px; }
+  .kv-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
+  .kv-v { font-size: 13px; color: var(--fg); overflow-wrap: anywhere; }
+  .meter { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
+  .meter i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
+  .meter.warn i { background: var(--warn); } .meter.err i { background: var(--err); }
+
+  /* ─── 编排台 ───────────────────────────────────────────────────── */
+  .stat-strip { display: flex; gap: 10px; flex-wrap: wrap; }
+  .stat {
+    flex: 1 1 132px; min-width: 132px; padding: 12px 14px; border-radius: var(--radius);
+    border: 1px solid var(--border); background: var(--surface-2); text-align: left;
+    transition: background .15s ease, border-color .15s ease;
+  }
+  button.stat:hover { background: var(--surface-3); border-color: color-mix(in oklch, var(--fg) 22%, transparent); }
+  .stat:hover .stat-l, .stat[aria-pressed="true"] .stat-l { color: var(--muted); }
+  .stat[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-3); }
+  .stat-n { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
+  .stat-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
+  .board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
+  .lane { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-height: 190px; min-width: 0; }
+  .lane-hd { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--border); }
+  .lane-hd .n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
+  .lane-bd { padding: 10px; display: grid; gap: 9px; align-content: start; }
+  .tcard {
+    display: grid; gap: 7px; padding: 11px 12px; border-radius: var(--radius);
+    border: 1px solid var(--border); background: var(--surface-3); text-align: left; width: 100%;
+    transition: background .15s ease, border-color .15s ease, transform .05s ease;
+  }
+  .tcard:hover { background: color-mix(in oklch, var(--surface-3) 70%, var(--fg) 8%); border-color: color-mix(in oklch, var(--fg) 26%, transparent); }
+  .tcard:hover .f { color: var(--muted); }
+  .tcard:active { transform: translateY(1px); }
+  .tcard .t { font-size: 12.5px; line-height: 1.45; }
+  .tcard .f { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
+  .lane-empty { padding: 16px 12px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
+
+  /* ─── 注册表 ───────────────────────────────────────────────────── */
+  .twrap { overflow-x: auto; overscroll-behavior-x: contain; }
+  .twrap::-webkit-scrollbar { height: 8px; }
+  .twrap::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
+  .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+  .filters .input { width: 220px; min-height: 44px; padding: 9px 11px; font-size: 12.5px; }
+  .ds-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .ds-table th, .ds-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
+  .ds-table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
+  .ds-table tbody tr { transition: background .15s ease; }
+  .ds-table tbody tr:hover { background: var(--surface-3); }
+  .ds-table tbody tr:hover .num-col, .ds-table tbody tr[aria-selected="true"] .num-col { color: var(--fg); }
+  .ds-table tbody tr[aria-selected="true"] { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--accent); }
+  .ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }
+
+  /* ─── 监控台 ───────────────────────────────────────────────────── */
+  .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
+  .kpi { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
+  .kpi-n { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
+  .kpi-u { font-size: 13px; color: var(--muted); margin-left: 4px; }
+  .kpi-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }
+  .kpi-d { font-family: var(--font-mono); font-size: 11px; margin-top: 6px; color: var(--muted); }
+  .up { color: var(--ok); } .down { color: var(--err); }
+  .chartwrap { display: grid; gap: 10px; }
+  .chart { width: 100%; height: 220px; }
+  .axis { font-family: var(--font-mono); font-size: 10px; fill: var(--faint); }
+  .feed { display: grid; gap: 1px; background: var(--border); }
+  .logline { display: grid; grid-template-columns: 62px 46px 1fr auto; gap: 12px; align-items: baseline; padding: 9px 14px; background: var(--surface-2); font-family: var(--font-mono); font-size: 11.5px; }
+  .logline .lvl { letter-spacing: .06em; }
+  .logline .ltext { color: var(--muted); overflow-wrap: anywhere; }
+  .logline .src { color: var(--faint); }
+
+  /* ─── 系统台 ───────────────────────────────────────────────────── */
+  .term {
+    background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
+    padding: 16px 18px; font-family: var(--font-mono); font-size: 12px; line-height: 1.8;
+    min-height: 260px; display: grid; gap: 2px; align-content: start; overflow-y: auto;
+  }
+  .term .p { color: var(--accent); } .term .ok { color: var(--ok); } .term .d { color: var(--muted); }
+  .term-in { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 0 4px; min-height: 44px; }
+  .term-in span { color: var(--accent); font-family: var(--font-mono); font-size: 12px; }
+  .term-in input { flex: 1; background: transparent; border: 0; font-family: var(--font-mono); font-size: 12.5px; }
+  .term-in input:focus { outline: none; }
+  .switch-row {
+    display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border);
+  }
+  .switch-row:last-child { border-bottom: 0; }
+  .switch-row .t { font-size: 13.5px; }
+  .switch-row .d { font-size: 12px; color: var(--muted); margin-top: 2px; }
+  .switch {
+    margin-left: auto; width: 46px; height: 26px; flex: 0 0 auto; border-radius: 999px;
+    background: var(--surface-3); border: 1px solid var(--border); position: relative;
+    transition: background .15s ease, border-color .15s ease;
+    /* 视觉 26px，命中区撑到 44px：用伪元素扩展而不改变视觉尺寸 */
+  }
+  .switch::before {
+    content: ''; position: absolute; inset: -9px -1px; border-radius: 999px;
+  }
+  .switch::after {
+    content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
+    border-radius: 50%; background: var(--muted); transition: transform .18s ease, background .15s ease;
+  }
+  .switch[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); }
+  .switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--accent); }
+
+  /* ─── 令牌视图 ─────────────────────────────────────────────────── */
+  .map { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+  .map th, .map td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
+  .map th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
+  .map tbody tr:hover { background: var(--surface-3); }
+  .map tbody tr:hover .hexv, .map tbody tr:hover .ratio { color: var(--fg); }
+  .map .var { font-family: var(--font-mono); color: var(--accent); white-space: nowrap; }
+  .map .hexv { font-family: var(--font-mono); color: var(--muted); white-space: nowrap; }
+  .sw { display: inline-block; width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--hairline); vertical-align: -3px; margin-right: 9px; }
+  .ratio { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
+  .ratio.pass { color: var(--ok); } .ratio.lg { color: var(--warn); }
+
+  .steps { display: grid; gap: 0; }
+  .step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
+  .step:last-child { border-bottom: 0; }
+  .step-n { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--accent); padding-top: 2px; }
+  .step-t { font-size: 14px; margin-bottom: 5px; }
+  .step-d { font-size: 12.5px; color: var(--muted); }
+  .path {
+    display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 4px;
+    background: var(--code-bg); border: 1px solid var(--border);
+    font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); overflow-wrap: anywhere;
+  }
+  .note { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
+  .note b { color: var(--fg); font-weight: 600; }
+
+  .row { display: flex; align-items: center; gap: 12px; }
+  .row-wrap { flex-wrap: wrap; }
+  .spacer { margin-left: auto; }
+  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
+
+  /* ─── 移动端 ───────────────────────────────────────────────────── */
+  @media (max-width: 1240px) {
+    .console { grid-template-columns: 200px minmax(0, 1fr); }
+    .col-side.right { display: none; }
+    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
+  @media (max-width: 920px) {
+    .shell, .shell[data-mini="1"] { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
+    .rail { position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
+    .shell[data-open="1"] .rail { transform: none; box-shadow: 0 0 0 100vmax color-mix(in oklch, var(--bg) 60%, transparent); }
+    .shell[data-mini="1"] .rail-brand { justify-content: flex-start; padding: 0 16px; }
+    .shell[data-mini="1"] .rail-txt, .shell[data-mini="1"] .nav-item span, .shell[data-mini="1"] .nav-count, .shell[data-mini="1"] .rail-foot .mono { display: revert; }
+    .console { grid-template-columns: minmax(0, 1fr); height: auto; }
+    .col-side { display: none; }
+    .kpis, .board, .grid-2 { grid-template-columns: minmax(0, 1fr); }
+    .view { padding: 20px 16px 32px; }
+    .crumb-view { display: none; }
+    .thread { padding: 18px 16px; }
+    .dock { padding: 12px 16px 16px; }
+  }
+  /* 窄屏：顶栏次要动作收成图标，主 CTA 保文字 */
+  @media (max-width: 560px) {
+    .topbar { padding: 0 12px; gap: 10px; }
+    .crumb-fam { display: none; }
+    .demo-flag { display: none; }
+    #btnReseed { padding: 0 12px; font-size: 0; gap: 0; }
+    #btnReseed::before { content: '↺'; font-size: 16px; line-height: 1; }
+    #btnRun { padding: 0 12px; }
+    .top-right { gap: 8px; }
+  }
+  @media (max-width: 380px) {
+    #btnRun { padding: 0 9px; font-size: 12.5px; }
+    .topbar { gap: 6px; }
+  }
+
+
+  /* ═══ v2 · 多屏路由版新增 ══════════════════════════════════════════ */
+
+  /* 侧栏改成真实 4 组，组内 31 条路由 */
+  .rail-nav .nav-grp + .nav-grp { margin-top: 18px; }
+  .nav-grp-lbl {
+    display: flex; align-items: center; justify-content: space-between; gap: 8px;
+    padding: 6px 10px; color: var(--faint);
+    font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
+  }
+  .nav-item.sub { padding-left: 34px; font-size: 12.5px; min-height: 40px; }
+  .nav-item.sub .nav-count { font-size: 10px; }
+  .nav-item .nav-path {
+    font-family: var(--font-mono); font-size: 10px; color: var(--faint);
+    margin-left: auto; opacity: 0; transition: opacity .15s ease;
+  }
+  .nav-item:hover .nav-path, .nav-item[aria-current="page"] .nav-path { opacity: 1; }
+
+  /* 路由守卫门禁 */
+  .gate {
+    display: grid; gap: 18px; place-items: center; text-align: center;
+    padding: 72px 28px; border: 1px dashed var(--border); border-radius: var(--radius-lg);
+    background: var(--surface-2);
+  }
+  .gate-mark {
+    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
+    border: 1px solid var(--border); background: var(--surface-3); color: var(--warn);
+  }
+  .gate h2 { font-size: 19px; letter-spacing: -.01em; }
+  .gate-code {
+    font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
+    padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--code-bg);
+  }
+
+  /* 详情页双栏：列表 + 详情 */
+  .split { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 0; align-items: stretch; }
+  .split > .split-l { border-right: 1px solid var(--border); min-width: 0; display: flex; flex-direction: column; }
+  .split > .split-r { min-width: 0; }
+  @media (max-width: 1080px) { .split { grid-template-columns: 1fr; } .split > .split-l { border-right: 0; border-bottom: 1px solid var(--border); } }
+
+  /* 文件树 / 通用行 */
+  .rows { display: grid; }
+  .row-i {
+    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
+    padding: 10px 14px; border-bottom: 1px solid var(--hairline); min-height: 44px;
+    color: var(--muted); font-size: 13px; transition: background .15s ease, color .15s ease;
+  }
+  .row-i:hover { background: var(--surface-3); color: var(--fg); }
+  .row-i[aria-current="true"] { background: var(--surface-3); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
+  .row-i .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .row-i .sz { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--faint); flex: 0 0 auto; }
+
+  /* 路由全景表 */
+  .route-map td:first-child { white-space: nowrap; }
+  .rt { font-family: var(--font-mono); font-size: 11.5px; }
+  .rt-hit { display: inline-flex; align-items: center; gap: 6px; }
+  .badge-sa {
+    font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; padding: 1px 6px;
+    border-radius: 3px; color: var(--warn); border: 1px solid color-mix(in oklch, var(--warn) 42%, transparent);
+    background: color-mix(in oklch, var(--warn) 14%, transparent);
+  }
+  .badge-pub {
+    font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; padding: 1px 6px;
+    border-radius: 3px; color: var(--info); border: 1px solid color-mix(in oklch, var(--info) 42%, transparent);
+    background: color-mix(in oklch, var(--info) 14%, transparent);
+  }
+  .badge-orphan {
+    font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; padding: 1px 6px;
+    border-radius: 3px; color: var(--warn); border: 1px dashed color-mix(in oklch, var(--warn) 46%, transparent);
+  }
+
+  /* 详情头 */
+  .dhead { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
+  .dhead h2 { font-size: 16px; }
+  .dhead .desc { margin-top: 5px; }
+
+  /* 面包屑加第 4 级 */
+  .crumb-sec { color: var(--faint); font-family: var(--font-mono); font-size: 11.5px; }
+
+
+  /* 窄屏：顶栏控件必须能收窄，否则整页横向溢出 */
+  .row-i .tag { flex: 0 0 auto; }
+  .topbar { min-width: 0; }
+  .crumb { flex: 1 1 auto; min-width: 0; overflow: hidden; }
+  .crumb > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .top-right { flex: 0 0 auto; min-width: 0; }
+  @media (max-width: 720px) {
+    #btnSA, .demo-flag { display: none; }
+    #btnMap { padding: 0 10px; }
+    #btnMap::after { content: "全景"; }
+    #btnMap { font-size: 0; }
+    #btnMap::after { font-size: 13px; }
+  }
+  @media (max-width: 460px) {
+    .row-i .sz { display: none; }
+    .console { grid-template-columns: 1fr !important; }
+    .console .col-side { display: none; }
+    .tool-hd { flex-wrap: wrap; }
+  }
+
+
+  /* 触摸目标：chip 视觉保持紧凑，命中区补到 44px */
+  .chip { position: relative; }
+  .chip::after {
+    content: ""; position: absolute; left: 0; right: 0; top: 50%;
+    height: 44px; transform: translateY(-50%); pointer-events: auto;
+  }
+  @media (hover: none) and (pointer: coarse) {
+    .chip { min-height: 44px; }
+  }
+
+
+  /* 看板换行提示：泳道会折成多行，必须告诉用户下面还有内容 */
+  .board { position: relative; }
+  .board-more {
+    position: sticky; bottom: 0; left: 0; z-index: 2;
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+    padding: 9px 14px; margin-top: 2px;
+    border-top: 1px solid var(--border);
+    background: color-mix(in oklch, var(--surface-2) 92%, transparent);
+    backdrop-filter: blur(8px);
+    font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted);
+    cursor: pointer; min-height: 44px; transition: background .15s ease, color .15s ease;
+  }
+  .board-more:hover { background: var(--surface-3); color: var(--fg); }
+  .board-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .board-more[hidden] { display: none; }
+
+</style>
+</head>
+<body>
+
+<div class="shell" id="shell" data-mini="0" data-open="0">
+  <aside class="rail" aria-label="主导航">
+    <div class="rail-brand">
+      <svg class="rail-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">
+        <path d="M12 2 3 7v10l9 5 9-5V7z"/><path d="M12 22V12"/><path d="M3 7l9 5 9-5"/>
+      </svg>
+      <div class="rail-txt">
+        <div class="rail-name">HERMES</div>
+        <div class="rail-sub">UI · CYBER · v2</div>
+      </div>
+    </div>
+
+    <div class="rail-search">
+      <input class="input" id="navFilter" type="search" placeholder="筛选 31 条路由…" aria-label="筛选导航项" />
+    </div>
+
+    <nav class="rail-nav" id="railNav"></nav>
+
+    <div class="rail-foot">
+      <div class="rail-stat"><span class="led ok" aria-hidden="true"></span><span class="mono">已连接 · :8787</span></div>
+      <div class="rail-stat"><span class="led run" aria-hidden="true"></span><span class="mono">3 个任务执行中</span></div>
+      <div class="rail-stat"><span class="led warn" aria-hidden="true"></span><span class="mono">node v22.14 需升级</span></div>
+      <div class="rail-stat"><span class="mono">31 路由 · 27 组件</span></div>
+    </div>
+  </aside>
+
+  <div class="stage">
+    <header class="topbar">
+      <button class="icon-btn" id="railToggle" aria-label="折叠或展开侧栏" aria-expanded="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true">
+          <path d="M3 6h18M3 12h18M3 18h18"/>
+        </svg>
+      </button>
+      <div class="crumb">
+        <span class="crumb-fam" id="crumbGrp">助手</span>
+        <span class="crumb-route" id="crumbRoute">/hermes/chat</span>
+        <span class="crumb-view" id="crumbView">ChatView.vue</span>
+        <span class="crumb-sec" id="crumbSec"></span>
+      </div>
+      <div class="top-right">
+        <button class="icon-btn" id="btnPrev" aria-label="上一条路由" title="上一条路由">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+        <button class="icon-btn" id="btnNext" aria-label="下一条路由" title="下一条路由">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
+        </button>
+        <button class="btn btn-ghost" id="btnSA" aria-pressed="false" title="切换 superadmin 预览，用于查看 5 条受守卫保护的路由">SA 预览：关</button>
+        <span class="demo-flag" title="原型内的所有数值均为版式占位，非真实运行数据">演示数据</span>
+        <button class="btn btn-ghost" id="btnMap">路由全景</button>
+        <button class="btn btn-primary" id="btnRun">运行</button>
+      </div>
+    </header>
+
+    <main class="viewport" id="viewport"></main>
+  </div>
+</div>
+
+<script>
+
+(() => {
+  "use strict";
+
+  /* ═══ OKLch → sRGB：令牌对照表实时反算 hex ══════════════════════════ */
+  const sk = (u) => { u = Math.max(0, Math.min(1, u)); return u <= 0.0031308 ? 12.92 * u : 1.055 * Math.pow(u, 1 / 2.4) - 0.055; };
+  function oklch2rgb(L, C, H) {
+    const a = C * Math.cos(H), b = C * Math.sin(H);
+    const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+    const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+    const s = (L - 0.0894841775 * a - 1.2914855480 * b) ** 3;
+    return [
+      sk(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+      sk(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+      sk(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s),
+    ];
+  }
+  function oklchHex(str) {
+    const m = String(str).match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)/);
+    if (!m) return "—";
+    const rgb = oklch2rgb(+m[1], +m[2], (+m[3] * Math.PI) / 180);
+    return "#" + rgb.map((u) => Math.round(u * 255).toString(16).padStart(2, "0")).join("").toUpperCase();
+  }
+  function lumOf(str) {
+    const m = String(str).match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)/);
+    if (!m) return 0;
+    const rgb = oklch2rgb(+m[1], +m[2], (+m[3] * Math.PI) / 180);
+    const lin = (u) => { u = Math.max(0, Math.min(1, u)); return u <= 0.04045 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4); };
+    const [r, g, b] = rgb.map(lin);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  }
+  const ratio = (a, b) => { const x = lumOf(a), y = lumOf(b); const hi = Math.max(x, y), lo = Math.min(x, y); return (hi + 0.05) / (lo + 0.05); };
+  const token = (n) => getComputedStyle(document.documentElement).getPropertyValue(n).trim();
+  const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+  const pad2 = (n) => String(n).padStart(2, "0");
+  const kb = (b) => (b < 1024 ? b + " B" : b < 1048576 ? (b / 1024).toFixed(1) + " KB" : (b / 1048576).toFixed(1) + " MB");
+
+  /* ═══ 真实路由表 · 逐条抄自 packages/client/src/router/index.ts ═══════
+     31 条。group = AppSidebar.vue 的四组 IA；orphan=true 表示这条路由在
+     当前 App 里没有任何导航入口（v2 补上的）。 */
+
+  const GROUPS = [
+    { id: "agent", name: "助手", en: "AGENT", idx: "01" },
+    { id: "monitor", name: "监控", en: "MONITORING", idx: "02" },
+    { id: "tools", name: "工具", en: "TOOLS", idx: "03" },
+    { id: "system", name: "系统", en: "SYSTEM", idx: "04" },
+  ];
+
+  const ROUTES = [
+    // ── 助手 ────────────────────────────────────────────── 11
+    { p: "/hermes/chat", n: "hermes.chat", f: "ChatView.vue", g: "agent", s: "对话台" },
+    { p: "/hermes/session/:sessionId", n: "hermes.session", f: "ChatView.vue", g: "agent", s: "会话详情", param: true, of: "/hermes/chat" },
+    { p: "/hermes/history", n: "hermes.history", f: "HistoryView.vue", g: "agent", s: "历史", orphan: true },
+    { p: "/hermes/history/session/:sessionId", n: "hermes.historySession", f: "HistoryView.vue", g: "agent", s: "历史会话", param: true, orphan: true, of: "/hermes/history" },
+    { p: "/hermes/global-agent", n: "hermes.globalAgent", f: "GlobalAgentView.vue", g: "agent", s: "全局代理", orphan: true },
+    { p: "/hermes/global-agent/session/:sessionId", n: "hermes.globalAgentSession", f: "GlobalAgentView.vue", g: "agent", s: "全局会话", param: true, orphan: true, of: "/hermes/global-agent" },
+    { p: "/hermes/group-chat", n: "hermes.groupChat", f: "GroupChatView.vue", g: "agent", s: "群聊", orphan: true },
+    { p: "/hermes/group-chat/room/:roomId", n: "hermes.groupChatRoom", f: "GroupChatView.vue", g: "agent", s: "群聊房间", param: true, orphan: true, of: "/hermes/group-chat" },
+    { p: "/hermes/jobs", n: "hermes.jobs", f: "JobsView.vue", g: "agent", s: "任务" },
+    { p: "/hermes/kanban", n: "hermes.kanban", f: "KanbanView.vue", g: "agent", s: "看板" },
+    { p: "/hermes/workflow", n: "hermes.workflow", f: "WorkflowView.vue", g: "agent", s: "工作流", orphan: true },
+    // ── 助手·资源（侧栏同样归在助手组）───────────────────
+    { p: "/hermes/channels", n: "hermes.channels", f: "ChannelsView.vue", g: "agent", s: "频道" },
+    { p: "/hermes/skills", n: "hermes.skills", f: "SkillsView.vue", g: "agent", s: "技能" },
+    { p: "/hermes/plugins", n: "hermes.plugins", f: "PluginsView.vue", g: "agent", s: "插件" },
+    { p: "/hermes/mcp", n: "hermes.mcp", f: "McpManagerView.vue", g: "agent", s: "MCP" },
+    { p: "/hermes/petdex", n: "hermes.petdex", f: "PetdexView.vue", g: "agent", s: "宠物" },
+    { p: "/hermes/memory", n: "hermes.memory", f: "MemoryView.vue", g: "agent", s: "记忆" },
+    { p: "/hermes/models", n: "hermes.models", f: "ModelsView.vue", g: "agent", s: "模型" },
+    // ── 监控 ────────────────────────────────────────────── 5
+    { p: "/hermes/logs", n: "hermes.logs", f: "LogsView.vue", g: "monitor", s: "日志" },
+    { p: "/hermes/usage", n: "hermes.usage", f: "UsageView.vue", g: "monitor", s: "用量" },
+    { p: "/hermes/performance", n: "hermes.performance", f: "PerformanceView.vue", g: "monitor", s: "性能监控", sa: true },
+    { p: "/hermes/journey", n: "hermes.journey", f: "JourneyView.vue", g: "monitor", s: "学习轨迹" },
+    { p: "/hermes/skills-usage", n: "hermes.skillsUsage", f: "SkillsUsageView.vue", g: "monitor", s: "技能用量" },
+    // ── 工具 ────────────────────────────────────────────── 2
+    { p: "/hermes/version-preview", n: "hermes.versionPreview", f: "VersionPreviewView.vue", g: "tools", s: "版本预览", sa: true },
+    { p: "/hermes/devices", n: "hermes.devices", f: "DevicesView.vue", g: "tools", s: "设备", sa: true },
+    // ── 系统 ────────────────────────────────────────────── 4
+    { p: "/hermes/profiles", n: "hermes.profiles", f: "ProfilesView.vue", g: "system", s: "可访问配置", sa: true },
+    { p: "/hermes/settings", n: "hermes.settings", f: "SettingsView.vue", g: "system", s: "设置" },
+    { p: "/hermes/terminal", n: "hermes.terminal", f: "TerminalView.vue", g: "system", s: "终端", sa: true },
+    { p: "/hermes/files", n: "hermes/files", f: "FilesView.vue", g: "system", s: "文件", orphan: true },
+    // ── 公开页（无外壳）──────────────────────────────────── 2
+    { p: "/", n: "login", f: "LoginView.vue", g: "public", s: "登录", pub: true },
+    { p: "/hermes-missing", n: "hermes.missing", f: "HermesMissingView.vue", g: "public", s: "CLI 缺失引导", pub: true },
+  ];
+
+  const byPath = new Map(ROUTES.map((r) => [r.p, r]));
+  const PRIMARY = ROUTES.filter((r) => !r.param && r.g !== "public");
+  const gname = (id) => (GROUPS.find((g) => g.id === id) || { name: "公开页" }).name;
+
+  const ICON = {
+    "/hermes/chat": "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z",
+    "/hermes/history": "M3 3v18h18M7 15l4-5 3 3 5-7",
+    "/hermes/global-agent": "M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3",
+    "/hermes/group-chat": "M17 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9.5 6a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7M22 20v-2a4 4 0 0 0-3-3.9M16.5 3.1a4 4 0 0 1 0 6.8",
+    "/hermes/jobs": "M3 4h18v16H3zM3 9h18M8 2v4M16 2v4M7 13h5M7 16h8",
+    "/hermes/kanban": "M3 3h5v18H3zM10 3h5v12h-5zM17 3h5v18h-5z",
+    "/hermes/workflow": "M6 3v6M6 15v6M18 3v4M18 13v8M6 9h12M6 15h12",
+    "/hermes/channels": "M4 4h16v12H7l-3 4z",
+    "/hermes/skills": "M12 2 2 7l10 5 10-5zM2 17l10 5 10-5M2 12l10 5 10-5",
+    "/hermes/plugins": "M9 3v6l-5 8a2 2 0 0 0 1.7 3h12.6A2 2 0 0 0 20 17l-5-8V3M8 3h8",
+    "/hermes/mcp": "M12 2 3 7l9 5 9-5zM3 12l9 5 9-5M3 17l9 5 9-5",
+    "/hermes/petdex": "M12 13a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM7.5 5.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM16.5 5.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM4 11a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM20 11a2 2 0 1 0 0 4 2 2 0 0 0 0-4z",
+    "/hermes/memory": "M12 5c-2-2-5-2-7-1v14c2-1 5-1 7 1 2-2 5-2 7-1V4c-2-1-5-1-7 1zM12 5v14",
+    "/hermes/models": "M12 2 2 7l10 5 10-5zM2 17l10 5 10-5M2 12l10 5 10-5",
+    "/hermes/logs": "M4 4h16v16H4zM8 9h8M8 13h8M8 17h5",
+    "/hermes/usage": "M3 3v18h18M6 15l4-6 4 4 5-8",
+    "/hermes/performance": "M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM12 12l4-3",
+    "/hermes/journey": "M6 3v4M18 17v4M3 12a9 9 0 0 1 18 0M6 21a9 9 0 0 0 12-8",
+    "/hermes/skills-usage": "M4 20V10M10 20V4M16 20v-7M22 20H2",
+    "/hermes/version-preview": "M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M19 5l-4 4M9 15l-4 4",
+    "/hermes/devices": "M4 4h16v12H4zM2 20h20M9 20h6",
+    "/hermes/profiles": "M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 6a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM22 11l-3 3",
+    "/hermes/settings": "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2V21a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 7 19.4l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0-2.9-1.2V15a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 2.9-1.2V5a2 2 0 1 1 4 0v.1A1.7 1.7 0 0 0 17 4.6l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0 1.2 2.9H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z",
+    "/hermes/terminal": "M4 17l6-5-6-5M12 19h8",
+    "/hermes/files": "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",
+    "/": "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3",
+    "/hermes-missing": "M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z",
+  };
+
+
+  /* ═══ 演示数据 · 字段逐条对齐真实 API 类型 ══════════════════════════ */
+
+  const SESSIONS = [
+    { t: "把 kanban 的 stale 卡自动归档", m: "2 分钟前", live: true },
+    { t: "SearXNG 代理超时排查", m: "18 分钟前" },
+    { t: "写一份 release note", m: "昨天 22:14" },
+    { t: "docker compose 内存调优", m: "昨天 09:02" },
+    { t: "TAPD 缺陷批量导入", m: "10-17" },
+  ];
+
+  const THREAD = [
+    { who: "you", body: "看板里 stale 状态的卡已经 40 多张了，能自动归档吗" },
+    { who: "agent", body: "先确认一下范围。`stale` 定义是 **14 天无 run**，对吗？我查到 41 张卡超过这个阈值，其中 6 张带 `workspace_path`，归档会丢工作目录。" },
+    { tool: "kanban.list", target: "?status=stale&limit=50", state: "ok", out: "41 tasks · 6 with workspace_path · oldest 2026-09-28" },
+    { who: "agent", body: "我建议分两步：先只归档无 workspace 的 35 张，另外 6 张列出来你确认。这样不会误删还在跑的目录。" },
+    { who: "you", body: "可以，6 张列一下" },
+    { who: "agent", body: "已列在右侧。要我现在执行归档吗？执行前会写一条 `archived` 事件到每张卡的 event 流里，可回滚。" },
+  ];
+
+  /* Job · api/hermes/jobs.ts */
+  const JOBS = [
+    { id: "job_7f3a", name: "每日依赖安全扫描", prompt: "扫描 package-lock.json 的 CVE 并写入日报", skills: ["security-scan"], model: "claude-sonnet-4-5", schedule_display: "每天 09:00", state: "idle", enabled: true, last_status: "success", last_run_at: "今天 09:00", next_run_at: "明天 09:00", deliver: "chat:hermes" },
+    { id: "job_2b91", name: "TAPD 缺陷同步", prompt: "拉取待处理缺陷并归类到看板", skills: ["tapd"], model: "gpt-5", schedule_display: "每 30 分钟", state: "running", enabled: true, last_status: "running", last_run_at: "14:28", next_run_at: "14:58", deliver: "chat:hermes" },
+    { id: "job_9c4e", name: "周报汇总", prompt: "汇总本周所有 session 的结论", skills: [], model: "claude-sonnet-4-5", schedule_display: "每周五 18:00", state: "idle", enabled: true, last_status: "failed", last_run_at: "10-17 18:00", next_run_at: "10-24 18:00", deliver: "email", last_error: "context length exceeded (41K > 32K)" },
+    { id: "job_1d07", name: "模型价格巡检", prompt: "对比 6 家供应商的每百万 token 价格", skills: [], model: "minimax-m2", schedule_display: "每 6 小时", state: "paused", enabled: false, last_status: "success", last_run_at: "10-18 12:00", next_run_at: null, deliver: "none", paused_reason: "手动暂停" },
+    { id: "job_5e2a", name: "日志错误聚类", prompt: "把近 24h 的 ERROR 按 message 聚类", skills: ["log-analyze"], model: "claude-sonnet-4-5", schedule_display: "每小时", state: "idle", enabled: true, last_status: "success", last_run_at: "14:00", next_run_at: "15:00", deliver: "chat:ops" },
+  ];
+
+  /* KanbanTask · api/hermes/kanban.ts —— 九个状态是真实枚举 */
+  const LANES = [
+    { k: "triage", n: "分诊" }, { k: "todo", n: "待办" }, { k: "scheduled", n: "已排期" },
+    { k: "ready", n: "就绪" }, { k: "running", n: "执行中" }, { k: "blocked", n: "阻塞" },
+    { k: "review", n: "待审" }, { k: "done", n: "完成" }, { k: "archived", n: "归档" },
+  ];
+  const CARDS = [
+    { t: "看板 stale 卡自动归档", lane: "running", p: 1, who: "agent", skills: ["kanban"], d: "分两步：35 张无 workspace 先归档，6 张待确认", age: "2m" },
+    { t: "SearXNG 代理超时", lane: "running", p: 2, who: "jack", skills: [], d: "curl --proxy 127.0.0.1:7890 走 TUN，出口 104.249.149.x", age: "18m" },
+    { t: "docker compose 内存调优", lane: "blocked", p: 1, who: "jack", skills: [], d: "等 hindsight 容器释放 4G", age: "1h" },
+    { t: "TAPD 缺陷批量导入", lane: "review", p: 2, who: "agent", skills: ["tapd"], d: "128 条已导入 124，4 条字段缺失", age: "2h" },
+    { t: "写 release note", lane: "review", p: 3, who: "jack", skills: [], d: "0.6.29 → 0.7.0", age: "3h" },
+    { t: "LangChain 学习第 12 章", lane: "todo", p: 2, who: "jack", skills: [], d: "human-in-the-loop 中间件", age: "5h" },
+    { t: "ComfyUI Krea GGUF 显存", lane: "todo", p: 3, who: "jack", skills: [], d: "torch 2.6+ 会爆 M1 buffer not large enough", age: "1d" },
+    { t: "searxng 部署到 NAS", lane: "triage", p: 1, who: "jack", skills: [], d: "新需求，待评估", age: "1d" },
+    { t: "hindsight 数据迁移", lane: "scheduled", p: 1, who: "agent", skills: [], d: "迁到美国服务器", age: "2d" },
+    { t: "CC Switch 余额脚本", lane: "scheduled", p: 2, who: "jack", skills: [], d: "Moonshot /v1/users/me/balance", age: "2d" },
+    { t: "prompt 去重", lane: "ready", p: 1, who: "agent", skills: ["prompt-eng"], d: "ready 队列", age: "3d" },
+    { t: "PDF → DOCX 流水线", lane: "done", p: 1, who: "jack", skills: ["pdf-to-docx"], d: "已完成 · 12 页", age: "4d" },
+    { t: "Gopeed 下载限速排查", lane: "done", p: 2, who: "jack", skills: [], d: "已完成", age: "5d" },
+    { t: "旧 waterMark skill", lane: "archived", p: 3, who: "agent", skills: [], d: "被 markdown-viewer 取代", age: "12d" },
+  ];
+
+  /* SkillInfo · api/hermes/skills.ts */
+  const SKILLS = [
+    { name: "comfyui-image-generation", desc: "ComfyUI 本地图像生成工作流：t2i / i2i / 工作流配置", src: "hub", en: true, use: 184, patch: 3, pinned: true },
+    { name: "tapd", desc: "TAPD 需求 / 缺陷 / 测试用例的完整操作", src: "hub", en: true, use: 96, patch: 0, pinned: true },
+    { name: "searxng_skills", desc: "通过自建 SearXNG 检索，带 token 鉴权", src: "local", en: true, use: 231, patch: 7 },
+    { name: "docx", desc: "Word 文档创建、读取、编辑、模板", src: "builtin", en: true, use: 42, patch: 0 },
+    { name: "xlsx", desc: "Excel 与 CSV 工作簿读写", src: "builtin", en: true, use: 28, patch: 0 },
+    { name: "pdf-to-docx", desc: "扫描件与文本型 PDF 转 Word", src: "hub", en: true, use: 15, patch: 1 },
+    { name: "swarm", desc: "并行派发大量独立子任务", src: "hub", en: false, use: 3, patch: 0 },
+    { name: "godmode", desc: "越狱提示词集合", src: "external", en: false, use: 0, patch: 0 },
+    { name: "writing-plans", desc: "写实现计划：拆成 bite-sized 步骤", src: "builtin", en: true, use: 61, patch: 2 },
+    { name: "systematic-debugging", desc: "四阶段根因调试", src: "builtin", en: true, use: 37, patch: 0 },
+  ];
+
+  /* McpServerInfo · api/hermes/mcp.ts */
+  const MCP = [
+    { name: "comfyui", transport: "http", connected: true, tools: 7, reg: 7, names: ["get_prompt", "list_workflows", "run_workflow", "get_workflow_schema", "list_prompts", "list_resources", "read_resource"] },
+    { name: "docs-langchain", transport: "stdio", connected: true, tools: 5, reg: 5, names: ["search_docs_by_lang_chain", "query_docs_filesystem_docs_by_lang_chain", "list_resources", "read_resource", "submit_feedback"] },
+    { name: "tapd", transport: "stdio", connected: true, tools: 51, reg: 51, names: ["create_bug", "get_bug", "update_bug", "get_comments", "add_timesheets", "get_todo", "create_story_or_task"] },
+    { name: "hermes-studio-use", transport: "http", connected: false, tools: 25, reg: 0, names: [], error: "connect ECONNREFUSED 127.0.0.1:7777" },
+  ];
+
+  /* HermesPluginInfo · api/hermes/plugins.ts */
+  const PLUGINS = [
+    { key: "web-search", name: "网页搜索", kind: "tool", status: "enabled", ver: "1.4.0", author: "nousresearch", tools: 3, hooks: 0, env: ["SEARXNG_URL"] },
+    { key: "telegram-bot", name: "Telegram 机器人", kind: "channel", status: "enabled", ver: "2.1.0", author: "community", tools: 5, hooks: 2, env: ["TELEGRAM_BOT_TOKEN"] },
+    { key: "git-worktree", name: "Git 工作树", kind: "tool", status: "disabled", ver: "0.9.1", author: "jack", tools: 6, hooks: 1, env: [] },
+    { key: "memory-hindsight", name: "Hindsight 记忆", kind: "memory", status: "auto-active", ver: "1.2.3", author: "nousresearch", tools: 4, hooks: 3, env: ["HINDSIGHT_URL"] },
+    { key: "voice-stt", name: "语音转写", kind: "model", status: "provider-managed", ver: "0.7.0", author: "community", tools: 2, hooks: 0, env: ["STT_PROVIDER"] },
+    { key: "lan-device", name: "局域网设备", kind: "transport", status: "enabled", ver: "1.0.2", author: "nousresearch", tools: 14, hooks: 0, env: [] },
+  ];
+
+  /* HermesProfile · api/hermes/profiles.ts */
+  const PROFILES = [
+    { name: "default", active: true, model: "minimax-m2", provider: "minimax", skills: 42, hasEnv: true, hasSoul: true, alias: "d", gw: "running" },
+    { name: "agent", active: false, model: "claude-sonnet-4-5", provider: "anthropic", skills: 38, hasEnv: true, hasSoul: true, alias: "a", gw: "stopped" },
+    { name: "research", active: false, model: "gpt-5", provider: "openai", skills: 21, hasEnv: false, hasSoul: false, alias: "r", gw: "stopped" },
+    { name: "ops", active: false, model: "minimax-m2", provider: "minimax", skills: 12, hasEnv: true, hasSoul: false, alias: "o", gw: "stopped" },
+  ];
+
+  /* LanDeviceInfo · api/hermes/devices.ts */
+  const DEVICES = [
+    { name: "jack-mac", ip: "192.168.31.14", os: "macOS 26.6.2", agent: "0.6.29", ui: "0.6.29", inb: "approved", outb: "approved", online: true, ms: 12, seen: "8 秒前" },
+    { name: "win-gaming", ip: "192.168.31.6", os: "Windows 11", agent: "0.6.28", ui: "0.6.29", inb: "approved", outb: "approved", online: true, ms: 4, seen: "刚刚" },
+    { name: "nas", ip: "192.168.31.32", os: "Debian 12", agent: "0.6.20", ui: "—", inb: "approved", outb: "none", online: false, ms: 0, seen: "3 天前" },
+    { name: "iphone", ip: "192.168.31.57", os: "iOS 19", agent: "—", ui: "—", inb: "pending", outb: "none", online: true, ms: 0, seen: "2 分钟前" },
+  ];
+
+  /* LogEntry · api/hermes/logs.ts */
+  const LOGFILES = [
+    { name: "web-ui.log", size: "4.2 MB", modified: "刚刚" },
+    { name: "hermes-agent.log", size: "128 MB", modified: "1 分钟前" },
+    { name: "bridge.log", size: "812 KB", modified: "12 秒前" },
+    { name: "worker.log", size: "61 MB", modified: "3 分钟前" },
+  ];
+  const LOGLINES = [
+    { ts: "14:32:07.412", lv: "INFO", lg: "hermes.agent", msg: "session started · profile=default · model=minimax-m2" },
+    { ts: "14:32:07.489", lv: "INFO", lg: "hermes.sse", msg: "stream open · subscriber=1 · 12ms first token" },
+    { ts: "14:32:19.233", lv: "WARN", lg: "hermes.tools", msg: "tool 'web_search' returned 502 from searxng.erhe.top, retry 1/3" },
+    { ts: "14:32:21.870", lv: "INFO", lg: "hermes.tools", msg: "tool 'web_search' ok after retry · 4 results" },
+    { ts: "14:33:02.115", lv: "ERROR", lg: "hermes.kanban", msg: "archive failed for task t_9f2c · workspace_path non-empty" },
+    { ts: "14:33:02.120", lv: "INFO", lg: "hermes.kanban", msg: "rollback · 0 tasks modified" },
+    { ts: "14:34:50.661", lv: "INFO", lg: "hermes.worker", msg: "job job_2b91 started · pid=44120 · skills=[tapd]" },
+    { ts: "14:35:18.004", lv: "ERROR", lg: "hermes.mcp", msg: "server 'hermes-studio-use' unreachable · ECONNREFUSED 127.0.0.1:7777" },
+    { ts: "14:35:18.010", lv: "WARN", lg: "hermes.mcp", msg: "degraded · 3/4 servers healthy · 25 tools unavailable" },
+    { ts: "14:36:01.778", lv: "INFO", lg: "hermes.http", msg: "GET /api/hermes/logs 200 · 18ms" },
+    { ts: "14:36:44.302", lv: "DEBUG", lg: "hermes.router", msg: "beforeEach · cli probe ok · 31 routes registered" },
+    { ts: "14:37:00.001", lv: "INFO", lg: "hermes.jobs", msg: "job job_5e2a finished · outcome=success · 41 clusters" },
+  ];
+
+  /* FileEntry · api/hermes/files.ts */
+  const FILES = [
+    { name: ".od-skills", dir: true, size: 0, mt: "10-19 01:20" },
+    { name: "hermes-ui-cyber-shell.html", dir: false, size: 86061, mt: "10-19 01:53" },
+    { name: "assets", dir: true, size: 0, mt: "10-18 22:10" },
+    { name: "brief.md", dir: false, size: 2140, mt: "10-18 21:02" },
+    { name: "screens", dir: true, size: 0, mt: "10-18 20:44" },
+  ];
+
+  /* WorkflowRecord · api/hermes/workflows.ts */
+  const WORKFLOWS = [
+    { id: "wf_1", name: "每日简报", profile: "default", nodes: 7, edges: 6, upd: "10-19 09:12", zoom: 1 },
+    { id: "wf_2", name: "TAPD 缺陷同步", profile: "agent", nodes: 11, edges: 14, upd: "10-18 16:40", zoom: 0.85 },
+    { id: "wf_3", name: "日志错误聚类", profile: "ops", nodes: 5, edges: 4, upd: "10-17 11:05", zoom: 1 },
+    { id: "wf_4", name: "release note 草稿", profile: "default", nodes: 9, edges: 8, upd: "10-16 22:31", zoom: 1.2 },
+  ];
+
+  /* JourneyNode / JourneyCluster · api/hermes/journey.ts */
+  const JOURNEY = [
+    { c: "图像生成", n: 12 }, { c: "调研", n: 9 }, { c: "文档处理", n: 7 },
+    { c: "工程", n: 15 }, { c: "运维", n: 6 },
+  ];
+  const JGRAPH = [
+    { id: "n1", label: "comfyui", kind: "skill", x: 18, y: 30, deg: 4 },
+    { id: "n2", label: "apikey-image-gen", kind: "skill", x: 34, y: 22, deg: 2 },
+    { id: "n3", label: "Krea 2 提示词", kind: "memory", x: 30, y: 46, deg: 3 },
+    { id: "n4", label: "deep-research", kind: "skill", x: 54, y: 28, deg: 3 },
+    { id: "n5", label: "searxng_skills", kind: "skill", x: 52, y: 52, deg: 5 },
+    { id: "n6", label: "pdf-to-docx", kind: "skill", x: 72, y: 36, deg: 2 },
+    { id: "n7", label: "xlsx", kind: "skill", x: 76, y: 58, deg: 2 },
+    { id: "n8", label: "demo_lc 项目", kind: "memory", x: 62, y: 68, deg: 3 },
+    { id: "n9", label: "tapd", kind: "skill", x: 40, y: 72, deg: 4 },
+    { id: "n10", label: "hindsight", kind: "memory", x: 86, y: 22, deg: 1 },
+  ];
+
+
+  /* ═══ 渲染基元 ═════════════════════════════════════════════════════ */
+  const view = (r, inner, cls = "") => `<section class="view ${cls}" data-od-id="route-${r.n}" data-route="${r.p}">${inner}</section>`;
+  const head = (t, d, right = "") =>
+    `<div class="view-head"><div><h1>${t}</h1><p class="desc" style="margin-top:6px">${d}</p></div><div class="spacer"></div>${right}</div>`;
+  const panel = (title, meta, body, id = "") =>
+    `<div class="panel" ${id ? `data-od-id="${id}"` : ""}>${title ? `<div class="panel-hd"><h3>${title}</h3>${meta ? `<span class="meta">${meta}</span>` : ""}</div>` : ""}<div class="panel-bd">${body}</div></div>`;
+  const table = (cols, rows) =>
+    `<div class="twrap"><table class="map"><thead><tr>${cols.map((c) => `<th class="${c.n ? "num-col" : ""}">${c.h}</th>`).join("")}</tr></thead><tbody>${rows.join("")}</tbody></table></div>`;
+  const td = (v, n) => `<td class="${n ? "num-col" : ""}">${v}</td>`;
+  const kv = (rows, id = "") => `<div class="kv" ${id ? `data-od-id="${id}"` : ""}>${rows.map(([k, v]) => `<div class="kv-row"><span class="kv-k">${k}</span><span class="kv-v">${v}</span></div>`).join("")}</div>`;
+  const kpis = (items) => `<div class="kpis">${items.map((k) => `<div class="kpi" data-od-id="kpi-${k.l.replace(/\s/g, "-")}"><div class="kpi-l">${k.l}</div><div class="kpi-n">${k.n}</div>${k.d ? `<div class="kpi-d">${k.d}</div>` : ""}</div>`).join("")}</div>`;
+  const note = (html) => `<div class="note">${html}</div>`;
+  const led = (s) => `<span class="led ${s}" aria-hidden="true"></span>`;
+  const tag = (s, txt) => `<span class="tag ${s}">${txt}</span>`;
+  const statusTag = (s) => {
+    const m = { success: "ok", running: "run", failed: "err", error: "err", idle: "info", pending: "warn", paused: "warn", blocked: "warn", approved: "ok", rejected: "err", connected: "ok", disconnected: "err", enabled: "ok", disabled: "info", triage: "info", todo: "info", scheduled: "info", ready: "run", review: "warn", done: "ok", archived: "", triage2: "" };
+    return tag(m[s] ?? "info", s);
+  };
+
+  /* 柱状图：填充实心，24 根 */
+  function bars(data, opts = {}) {
+    const max = Math.max(...data.map((d) => d.v), 1);
+    const h = opts.h || 108;
+    return `<div class="chart" style="height:${h}px;display:flex;align-items:flex-end;gap:${opts.gap || "3px"}">${data.map((d, i) => {
+      const pct = Math.max(2, (d.v / max) * 100);
+      const c = d.c || "var(--accent)";
+      return `<div style="flex:1;height:${pct}%;background:${c};border-radius:2px 2px 0 0;opacity:${d.o ?? 0.85}" title="${esc(d.l)}: ${d.v}"></div>`;
+    }).join("")}</div>`;
+  }
+
+  /* 折线：SVG，填充实心面积 */
+  function spark(data, opts = {}) {
+    const w = 100, h = opts.h || 44, max = Math.max(...data.map((d) => d.v), 1), min = Math.min(...data.map((d) => d.v), 0);
+    const rng = max - min || 1;
+    const pts = data.map((d, i) => [(i / (data.length - 1)) * w, h - ((d.v - min) / rng) * (h - 6) - 3]);
+    const line = pts.map((p, i) => `${i ? "L" : "M"}${p[0].toFixed(2)},${p[1].toFixed(2)}`).join("");
+    const area = `${line}L${w},${h}L0,${h}Z`;
+    const c = opts.c || "var(--accent)";
+    return `<svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" style="width:100%;height:${h}px;display:block" aria-hidden="true">
+      <path d="${area}" fill="${c}" opacity="0.16"/>
+      <path d="${line}" fill="none" stroke="${c}" stroke-width="1.4" vector-effect="non-scaling-stroke" stroke-linejoin="round"/>
+      ${pts.map((p, i) => `<circle cx="${p[0].toFixed(2)}" cy="${p[1].toFixed(2)}" r="1.6" fill="${c}"/>`).join("")}
+    </svg>`;
+  }
+
+  /* ═══ 01 公开页：登录 ═══════════════════════════════════════════════ */
+  function renderLogin() {
+    const r = byPath.get("/");
+    return view(r, `<div class="gate" style="min-height:62vh;border-style:solid" data-od-id="login-card">
+      <svg class="rail-mark" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.4" style="width:34px;height:34px" aria-hidden="true">
+        <path d="M12 2 3 7v10l9 5 9-5V7z"/><path d="M12 22V12"/><path d="M3 7l9 5 9-5"/>
+      </svg>
+      <div style="display:grid;gap:8px">
+        <h1 style="font-size:22px">连接你的 Hermes</h1>
+        <p class="desc" style="max-width:38ch">这台 web-ui 是本机自托管的控制台。填入 API key 后进入对话台。</p>
+      </div>
+      <div style="width:min(380px,100%);display:grid;gap:10px">
+        <label class="kv-k" for="key" style="text-align:left">API Key</label>
+        <input class="input mono" id="key" type="password" placeholder="hermes_sk_••••••••••••" aria-label="API Key" />
+        <label class="kv-k" for="base" style="text-align:left">服务地址</label>
+        <input class="input mono" id="base" type="text" value="http://127.0.0.1:8787" aria-label="服务地址" />
+        <button class="btn btn-primary" data-od-id="login-submit" style="margin-top:6px">进入控制台</button>
+      </div>
+      <div class="meta">公开页 · meta.public · 无需鉴权即可渲染</div>
+    </div>`);
+  }
+
+  /* ═══ 02 公开页：CLI 缺失引导 ══════════════════════════════════════ */
+  function renderMissing() {
+    const r = byPath.get("/hermes-missing");
+    return view(r, `<div class="gate" style="min-height:62vh;border-style:solid" data-od-id="missing-card">
+      <div class="gate-mark"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg></div>
+      <div style="display:grid;gap:8px;max-width:44ch">
+        <h1 style="font-size:21px">没有找到 hermes CLI</h1>
+        <p class="desc">路由守卫在每次导航前调用 <code>checkHermesCliAvailable()</code>。只有明确的 missing 才会跳到这里，其余情况一律放行。</p>
+      </div>
+      <div style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center">
+        <span class="gate-code">pip install -U hermes-agent</span>
+        <span class="gate-code">hermes --version</span>
+      </div>
+      ${note("这是 <span class=\"mono\">fail-open</span> 设计：探测接口失败时视为可用，只有服务端明确回答缺失才拦截。")}
+    </div>`);
+  }
+
+
+  /* ═══ 03 对话台 · /hermes/chat ═════════════════════════════════════ */
+  function renderChat() {
+    const r = byPath.get("/hermes/chat");
+    const sess = SESSIONS.map((s, i) => `<button class="row-i sess" aria-current="${i === 1}" data-od-id="sess-${i}">
+        <span class="nm">${esc(s.t)}</span>${s.live ? '<span class="tag ok">LIVE</span>' : ""}<span class="sz">${s.m}</span></button>`).join("");
+    const msgs = THREAD.map((m, mi) => {
+      if (m.tool) return `<div class="tool" data-od-id="tool-${m.tool}">
+          <div class="tool-hd"><span class="mono">${esc(m.tool)}</span><span style="color:var(--faint)">${esc(m.target)}</span>${statusTag("success")}</div>
+          <div class="tool-bd">${esc(m.out)}</div></div>`;
+      const bubble = m.live ? `${esc(m.body)} <span class="caret"></span>` : esc(m.body).replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<b>$1</b>");
+      return `<div class="msg ${m.who === "you" ? "user" : ""}" data-od-id="msg-${mi}" data-msg="${mi}">
+          <div class="msg-who">${m.who === "you" ? "YOU" : "AGENT"}</div><div class="msg-bubble">${bubble}</div></div>`;
+    }).join("");
+    return view(r, `<div class="console" data-od-id="console-grid">
+      <div class="col-side">
+        <div class="side-hd"><span class="eyebrow">会话 · Sessions</span><span class="meta spacer">${SESSIONS.length}</span></div>
+        <div class="side-scroll">${sess}</div>
+      </div>
+      <div style="display:flex;flex-direction:column;min-height:0;min-width:0">
+        <div class="side-hd"><span class="eyebrow">单聊</span><span class="meta spacer">SSE 流式 · 12ms 首字</span></div>
+        <div class="thread" id="thread" data-od-id="chat-thread">${msgs}</div>
+        <div class="dock" data-od-id="chat-composer">
+          <div class="dock-box">
+            <textarea id="composer" placeholder="问点什么，或 / 唤起技能…（Enter 发送，Shift+Enter 换行）" aria-label="消息输入框"></textarea>
+            <div class="dock-bar">
+              <button class="chip" type="button" data-od-id="composer-model">minimax-m2</button>
+              <button class="chip" type="button" data-od-id="composer-skill">技能 · 关</button>
+              <span class="meta spacer">上下文 34% · 41K / 200K</span>
+              <button class="btn btn-primary" id="btnSend" data-od-id="composer-send">发送</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-side right">
+        <div class="side-hd"><span class="eyebrow">运行上下文</span></div>
+        <div class="side-scroll" style="display:grid;gap:18px;align-content:start">
+          ${kv([["模型", "minimax-m2"], ["供应商", "minimax-cn"], ["Profile", "default"]], "ctx-model")}
+          ${kv([["token 已用", "41,318"], ["上下文上限", "200,000"], ["会话轮次", "6"]], "ctx-usage")}
+          ${panel("已挂载工具", "3", `<div style="display:grid;gap:8px">
+            ${["web_search", "read_file", "kanban.list"].map((t) => `<div class="row-i" style="border:0;padding:6px 0;min-height:0"><span class="led ok"></span><span class="nm mono">${t}</span></div>`).join("")}
+          </div>`, "ctx-tools")}
+          ${note("参数化路由 <span class=\"mono\">/hermes/session/:sessionId</span> 复用同一个组件，只多传一个 id。")}
+        </div>
+      </div>
+    </div>`, "view-flush");
+  }
+
+  /* ═══ 04 历史 · /hermes/history ═════════════════════════════════════ */
+  function renderHistory() {
+    const r = byPath.get("/hermes/history");
+    const rows = SESSIONS.concat([{ t: "Krea 2 GGUF 出图参数", m: "10-16" }, { t: "searxng 部署踩坑", m: "10-15" }]).map((s, i) =>
+      `<button class="row-i" aria-current="${i === 2}" data-od-id="hist-${i}"><span class="nm">${esc(s.t)}</span><span class="sz">${s.m}</span></button>`).join("");
+    return view(r, `<div class="split" data-od-id="history-split">
+      <div class="split-l">
+        <div class="side-hd"><span class="eyebrow">全部会话</span><span class="meta spacer">128</span></div>
+        <div class="side-scroll">${rows}</div>
+      </div>
+      <div class="split-r">
+        <div class="dhead" data-od-id="history-detail">
+          <div style="min-width:0">
+            <h2>SearXNG 代理超时排查</h2>
+            <p class="desc meta">session_7f3a91 · 10-19 14:14 → 14:32 · 18 轮 · 41K tokens · minimax-m2</p>
+          </div>
+          <div class="spacer"></div>
+          <button class="btn btn-ghost" data-od-id="history-reopen">继续此会话</button>
+        </div>
+        <div style="padding:18px 20px;display:grid;gap:14px">
+          ${kpis([{ l: "轮次", n: "18" }, { l: "tokens", n: "41K" }, { l: "工具调用", n: "9" }, { l: "耗时", n: "18m" }])}
+          ${panel("消息片段", "最近 3 轮", `<div style="display:grid;gap:10px">
+            <div class="msg user"><div class="msg-who">YOU</div><div class="msg-bubble">出口 IP 是 104.249.149.x，TUN 没开吗</div></div>
+            <div class="msg"><div class="msg-who">AGENT</div><div class="msg-bubble">确认了，TUN 模式关闭。改用 <code>--proxy http://127.0.0.1:7890</code> 后 200。</div></div>
+          </div>`, "history-snips")}
+        </div>
+      </div>
+    </div>`, "view-flush");
+  }
+
+  /* ═══ 05 全局代理 · /hermes/global-agent ═══════════════════════════ */
+  function renderGlobalAgent() {
+    const r = byPath.get("/hermes/global-agent");
+    const cards = [
+      { t: "巡检今日失败的 job", s: "done", r: "3 个失败 job 中 2 个是 context 超长，已加 truncate" },
+      { t: "检查 MCP 服务器状态", s: "running", r: "hermes-studio-use 不通，其余 3 个正常" },
+      { t: "整理本周新增技能", s: "ready", r: "待派发" },
+      { t: "归档 stale 看板卡", s: "blocked", r: "等确认 6 张带 workspace_path 的" },
+    ];
+    return view(r, head("全局代理", "跨会话的后台代理：不绑定单一对话，直接对整个工作区下达指令并回收结果。", `<button class="btn btn-primary" data-od-id="ga-new">新建全局任务</button>`) +
+      kpis([{ l: "运行中", n: "1" }, { l: "今日完成", n: "12" }, { l: "待派发", n: "1" }, { l: "阻塞", n: "1" }]) +
+      panel("代理任务", "4 条", table(
+        [{ h: "指令" }, { h: "状态" }, { h: "结论" }, { h: "耗时", n: 1 }],
+        cards.map((c, i) => `<tr data-od-id="ga-task-${i}">${td(`<div class="nm">${esc(c.t)}</div>`)}${td(statusTag(c.s))}${td(`<span style="color:var(--muted)">${esc(c.r)}</span>`)}${td(`<span class="mono">${i === 1 ? "—" : i * 4 + 2}m</span>`, 1)}</tr>`)
+      ), "panel-ga"));
+  }
+
+  /* ═══ 06 群聊 · /hermes/group-chat ══════════════════════════════════ */
+  function renderGroupChat() {
+    const r = byPath.get("/hermes/group-chat");
+    const rooms = [
+      { n: "hermes-ops", m: "6 人 · 128 条", on: true }, { n: "jack-agents", m: "3 人 · 41 条", on: true },
+      { n: "triage", m: "2 人 · 0 条", on: false },
+    ];
+    const msgs = [
+      { who: "jack", body: "今天的 job 有几个失败的" },
+      { who: "agent", body: "3 个。`job_9c4e` 周报汇总超了上下文，另外两个是 TAPD 返回 502。" },
+      { who: "ops", body: "502 那边我加了重试，14:21 之后没再出现" },
+      { who: "jack", body: "周报那个把 max_tokens 提到 64K，再把历史截断" },
+    ].map((m, i) => `<div class="msg ${m.who === "you" ? "user" : ""}" data-od-id="gmsg-${i}">
+        <div class="msg-who">${m.who === "you" ? "YOU" : m.who.toUpperCase()}</div><div class="msg-bubble">${esc(m.body).replace(/`([^`]+)`/g, "<code>$1</code>")}</div></div>`).join("");
+    return view(r, `<div class="console" style="grid-template-columns:220px minmax(0,1fr)" data-od-id="gc-grid">
+      <div class="col-side">
+        <div class="side-hd"><span class="eyebrow">房间</span><span class="meta spacer">${rooms.length}</span></div>
+        <div class="side-scroll">${rooms.map((x, i) => `<button class="row-i" aria-current="${x.on && i === 0}" data-od-id="room-${i}"><span class="nm">${x.n}</span><span class="sz">${x.m}</span></button>`).join("")}</div>
+      </div>
+      <div style="display:flex;flex-direction:column;min-height:0;min-width:0">
+        <div class="side-hd"><span class="eyebrow">#hermes-ops</span><span class="meta spacer">6 人在线</span></div>
+        <div class="thread" id="thread">${msgs}</div>
+        <div class="dock"><div class="dock-box">
+          <textarea id="composer" placeholder="发到 #hermes-ops…" aria-label="群聊消息输入框"></textarea>
+          <div class="dock-bar"><span class="meta spacer">⌘+Enter 发送</span><button class="btn btn-primary" id="btnSend" data-od-id="gc-send">发送</button></div>
+        </div></div>
+      </div>
+    </div>`, "view-flush");
+  }
+
+
+  /* ═══ 07 任务 · /hermes/jobs ═══════════════════════════════════════ */
+  function renderJobs() {
+    const r = byPath.get("/hermes/jobs");
+    const rows = JOBS.map((j, i) => `<tr data-od-id="job-${j.id}">
+      ${td(`<div style="display:flex;align-items:center;gap:8px"><span class="led ${j.state}"></span><span class="nm">${esc(j.name)}</span></div>
+            <div class="meta" style="margin-top:3px;padding-left:15px">${esc(j.id)} · ${esc(j.model)}</div>`)}
+      ${td(`<div class="mono">${esc(j.schedule_display)}</div><div class="meta">${j.skills.length ? j.skills.map((s) => `<span class="tag info">${s}</span>`).join(" ") : "—"}</div>`)}
+      ${td(statusTag(j.last_status))}
+      ${td(`<div class="mono" style="font-size:11.5px">${esc(j.last_run_at)}</div><div class="meta">下次 ${j.next_run_at ? esc(j.next_run_at) : "—"}</div>`, 1)}
+      ${td(j.enabled ? tag("ok", "启用") : tag("info", "停用"))}
+    </tr>`);
+    return view(r, head("任务", "定时任务。真实字段：<code>schedule</code> 支持 interval / cron / once / 裸字符串四种形态，UI 读 <code>schedule_display</code>。", `<button class="btn btn-primary" data-od-id="job-new">新建任务</button>`) +
+      kpis([{ l: "启用", n: "4" }, { l: "运行中", n: "1" }, { l: "今日失败", n: "1" }, { l: "已暂停", n: "1" }]) +
+      panel("任务列表", "5 条", table(
+        [{ h: "名称" }, { h: "调度 / 技能" }, { h: "上次结果" }, { h: "上次 / 下次", n: 1 }, { h: "状态" }], rows), "panel-jobs") +
+      `<div class="grid-2">
+        ${panel("失败详情", "job_9c4e", note("周报汇总在 10-17 18:00 失败：<span class=\"mono\">context length exceeded (41K &gt; 32K)</span>。<span class=\"mono\">last_delivery_error</span> 另有一次邮件投递失败。"), "panel-joberr")}
+        ${panel("派发来源", "origin", kv([["platform", "telegram"], ["chat_id", "-1002841"], ["chat_name", "hermes-ops"], ["thread_id", "418"]], "job-origin"), "panel-jobsrc")}
+      </div>`);
+  }
+
+  /* ═══ 08 看板 · /hermes/kanban ═════════════════════════════════════ */
+  function renderKanban() {
+    const r = byPath.get("/hermes/kanban");
+    const lanes = LANES.map((L) => {
+      const cards = CARDS.filter((c) => c.lane === L.k);
+      const body = cards.length ? cards.map((c) => `<div class="tcard" data-od-id="card-${c.t}">
+          <div class="tcard-hd"><span class="tcard-t">${esc(c.t)}</span>${tag(c.p === 1 ? "err" : c.p === 2 ? "warn" : "info", "P" + c.p)}</div>
+          <div class="tcard-d">${esc(c.d)}</div>
+          <div class="tcard-ft"><span class="mono">${esc(c.who)}</span><span class="mono" style="color:var(--faint)">${c.age}</span></div>
+        </div>`).join("") : `<div class="lane-empty">空</div>`;
+      return `<div class="lane" data-od-id="lane-${L.k}" data-lane-k="${L.k}">
+          <div class="lane-hd"><span class="mono">${L.n}</span><span class="meta">${cards.length}</span></div>
+          <div class="lane-bd">${body}</div>
+        </div>`;
+    }).join("");
+    return view(r, head("看板", "九个状态是 <code>KanbanTaskStatus</code> 的真实枚举，不是设计自造的。拖拽、批量改状态、派发都在这里。", `<button class="btn btn-primary" data-od-id="kb-new">新建卡片</button>`) +
+      kpis([{ l: "总卡片", n: "14" }, { l: "执行中", n: "2" }, { l: "阻塞", n: "1", d: "等确认 workspace" }, { l: "近 7 天完成", n: "8" }]) +
+      `<div style="display:flex;gap:8px;flex-wrap:wrap" role="group" aria-label="按状态筛选">
+        <button class="chip" type="button" data-lane="*" aria-current="true" style="color:var(--accent);border-color:color-mix(in oklch, var(--accent) 50%, transparent)" data-od-id="lane-filter-all">全部 14</button>
+        ${LANES.map((L) => `<button class="chip" type="button" data-lane="${L.k}" aria-current="false" data-od-id="lane-filter-${L.k}">${L.n} ${CARDS.filter((c) => c.lane === L.k).length}</button>`).join("")}
+      </div>` +
+      panel("看板 · default", "14 张 · 9 列", `<div class="board" id="board">${lanes}</div>
+        <button class="board-more" id="boardMore" data-od-id="board-more" hidden>↓ 下方还有泳道</button>`, "panel-kanban"));
+  }
+
+  /* ═══ 09 工作流 · /hermes/workflow ═════════════════════════════════ */
+  function renderWorkflow() {
+    const r = byPath.get("/hermes/workflow");
+    const rows = WORKFLOWS.map((w) => `<tr data-od-id="wf-${w.id}">
+      ${td(`<span class="nm">${esc(w.name)}</span>`)}${td(`<span class="mono">${w.profile}</span>`)}
+      ${td(`<span class="mono">${w.nodes} 节点 / ${w.edges} 边</span>`, 1)}${td(`<span class="mono">${w.zoom}×</span>`, 1)}
+      ${td(`<span class="mono">${esc(w.upd)}</span>`, 1)}</tr>`);
+    // 节点画布：绝对定位，真实连线用 SVG
+    const nodes = [
+      { id: "a", x: 6, y: 40, l: "触发 · 定时" }, { id: "b", x: 27, y: 18, l: "拉取数据" },
+      { id: "c", x: 27, y: 62, l: "读取文件" }, { id: "d", x: 50, y: 40, l: "模型推理" },
+      { id: "e", x: 72, y: 18, l: "格式化" }, { id: "f", x: 72, y: 62, l: "投递" },
+    ];
+    const pos = Object.fromEntries(nodes.map((n) => [n.id, n]));
+    const edges = [["a", "b"], ["a", "c"], ["b", "d"], ["c", "d"], ["d", "e"], ["d", "f"]];
+    const W = 100, H = 100;
+    const cx = (n) => (n.x + 12) * (W / 100), cy = (n) => (n.y + 6) * (H / 100);
+    return view(r, head("工作流", "节点画布。真实记录含 <code>nodes</code> / <code>edges</code> / <code>viewport</code>（x·y·zoom），保存时整份回传。", `<button class="btn btn-primary" data-od-id="wf-new">新建工作流</button>`) +
+      `<div class="split" data-od-id="wf-split">
+        <div class="split-l">
+          <div class="side-hd"><span class="eyebrow">工作流</span><span class="meta spacer">${WORKFLOWS.length}</span></div>
+          <div class="side-scroll">${WORKFLOWS.map((w, i) => `<button class="row-i" aria-current="${i === 0}" data-od-id="wf-item-${i}"><span class="nm">${esc(w.name)}</span><span class="sz">${w.nodes} 节点</span></button>`).join("")}</div>
+        </div>
+        <div class="split-r">
+          <div class="dhead"><div><h2>每日简报</h2><p class="desc meta">profile=default · zoom 1× · 更新于 ${esc(WORKFLOWS[0].upd)}</p></div></div>
+          <div style="padding:18px 20px;display:grid;gap:16px">
+            <div class="panel" style="position:relative;background:var(--code-bg)" data-od-id="wf-canvas">
+              <svg viewBox="0 0 100 100" preserveAspectRatio="none" style="position:absolute;inset:0;width:100%;height:260px" aria-hidden="true">
+                ${edges.map(([s, t]) => `<path d="M${cx(pos[s]).toFixed(1)},${cy(pos[s]).toFixed(1)} C${((cx(pos[s]) + cx(pos[t])) / 2).toFixed(1)},${cy(pos[s]).toFixed(1)} ${((cx(pos[s]) + cx(pos[t])) / 2).toFixed(1)},${cy(pos[t]).toFixed(1)} ${cx(pos[t]).toFixed(1)},${cy(pos[t]).toFixed(1)}" fill="none" stroke="var(--border)" stroke-width="0.7" vector-effect="non-scaling-stroke"/>`).join("")}
+              </svg>
+              <div style="position:relative;height:260px">
+                ${nodes.map((n) => `<div style="position:absolute;left:${n.x}%;top:${n.y}%;transform:translateY(-50%);width:20%;min-width:96px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);font-family:var(--font-mono);font-size:10.5px;text-align:center;color:var(--muted)" data-od-id="wf-node-${n.id}">${esc(n.l)}</div>`).join("")}
+              </div>
+            </div>
+            ${panel("保存记录", "viewport", kv([["x", "0"], ["y", "0"], ["zoom", "1.0"], ["nodes", "7"], ["edges", "6"]], "wf-vp"), "panel-wfvp")}
+          </div>
+        </div>
+      </div>` + panel("全部工作流", "4 条", table([{ h: "名称" }, { h: "Profile" }, { h: "规模", n: 1 }, { h: "Zoom", n: 1 }, { h: "更新", n: 1 }], rows), "panel-wf"));
+  }
+
+
+  /* ═══ 10 频道 · /hermes/channels ════════════════════════════════════ */
+  function renderChannels() {
+    const r = byPath.get("/hermes/channels");
+    const chs = [
+      { n: "telegram", k: "Telegram", on: true, who: "jack", last: "周报那个把 max_tokens 提到 64K", at: "14:28" },
+      { n: "slack", k: "Slack", on: false, who: "—", last: "未配置", at: "—" },
+      { n: "discord", k: "Discord", on: false, who: "—", last: "未配置", at: "—" },
+      { n: "wechat", k: "企业微信", on: false, who: "—", last: "未配置", at: "—" },
+      { n: "local-chat", k: "本机对话台", on: true, who: "jack", last: "看板里 stale 卡已经 40 多张了", at: "14:32" },
+    ];
+    return view(r, head("频道", "外部消息通道。每个频道把入站消息转成 agent 会话，再把结果投递回去。", `<button class="btn btn-primary" data-od-id="ch-add">接入频道</button>`) +
+      panel("已接入频道", "2 / 5", table(
+        [{ h: "频道" }, { h: "入站身份" }, { h: "最近消息" }, { h: "时间", n: 1 }, { h: "状态" }],
+        chs.map((c, i) => `<tr data-od-id="ch-${c.n}">
+          ${td(`<span class="nm">${esc(c.k)}</span><div class="meta mono">${c.n}</div>`)}
+          ${td(`<span class="mono">${esc(c.who)}</span>`)}
+          ${td(`<span style="color:var(--muted)">${esc(c.last)}</span>`)}
+          ${td(`<span class="mono">${c.at}</span>`, 1)}
+          ${td(c.on ? tag("ok", "已启用") : tag("info", "未配置"))}</tr>`)
+      ), "panel-channels") +
+      `<div class="grid-2">
+        ${panel("投递目标", "deliver 字段", kv([["chat", "hermes-ops"], ["topic", "t_418"], ["mode", "reply_in_thread"]], "ch-deliver"), "panel-chdeliver")}
+        ${panel("入站安全", "白名单", note("只接受 <span class=\"mono\">origin.chat_id</span> 在白名单内的消息；未授权来源直接丢弃并记一条 <span class=\"mono\">debug</span> 日志。"), "panel-chsec")}
+      </div>`);
+  }
+
+  /* ═══ 11 技能 · /hermes/skills ════════════════════════════════════ */
+  function renderSkills() {
+    const r = byPath.get("/hermes/skills");
+    const rows = SKILLS.map((s, i) => `<tr data-od-id="skill-${s.name}">
+      ${td(`<span class="nm mono">${esc(s.name)}</span><div class="meta" style="margin-top:3px;max-width:46ch">${esc(s.desc)}</div>`)}
+      ${td(tag(s.src === "builtin" ? "info" : s.src === "hub" ? "ok" : "warn", s.src))}
+      ${td(s.en ? tag("ok", "启用") : tag("info", "停用"))}
+      ${td(`<span class="mono">${s.use}</span>`, 1)}
+      ${td(s.patch ? `<span class="mono" style="color:var(--warn)">${s.patch}</span>` : `<span class="mono" style="color:var(--faint)">—</span>`, 1)}
+      ${td(s.pinned ? tag("warn", "已置顶") : "")}</tr>`);
+    const usage = SKILLS.slice(0, 6).map((s) => ({ l: s.name, v: s.use }));
+    return view(r, head("技能", "四种来源：<code>builtin</code> / <code>hub</code> / <code>local</code> / <code>external</code>。外部技能按 <code>sourcePath</code> 分组显示。", `<button class="btn btn-primary" data-od-id="sk-install">安装技能</button>`) +
+      kpis([{ l: "技能总数", n: "42" }, { l: "已启用", n: "38" }, { l: "本周调用", n: "671" }, { l: "本地修改", n: "13", d: "patchCount > 0" }]) +
+      `<div class="grid-2">
+        ${panel("技能列表", "10 / 42", table([{ h: "名称 / 说明" }, { h: "来源" }, { h: "状态" }, { h: "调用", n: 1 }, { h: "补丁", n: 1 }, { h: "" }], rows), "panel-skills")}
+        ${panel("调用频次 Top 6", "近 30 天", bars(usage, { h: 130 }) + `<div class="row-wrap" style="margin-top:12px">${usage.map((u) => `<span class="chip">${esc(u.l)} ${u.v}</span>`).join("")}</div>`, "panel-skusage")}
+      </div>`);
+  }
+
+  /* ═══ 12 插件 · /hermes/plugins ════════════════════════════════════ */
+  function renderPlugins() {
+    const r = byPath.get("/hermes/plugins");
+    const rows = PLUGINS.map((p, i) => `<tr data-od-id="plugin-${p.key}">
+      ${td(`<span class="nm">${esc(p.name)}</span><div class="meta mono" style="margin-top:3px">${p.key} · v${p.ver} · ${esc(p.author)}</div>`)}
+      ${td(tag("info", p.kind))}
+      ${td(p.status === "provider-managed" ? tag("warn", "托管") : p.status === "auto-active" ? tag("run", "自动") : statusTag(p.status))}
+      ${td(`<span class="mono">${p.tools}</span>`, 1)}
+      ${td(`<span class="mono">${p.hooks}</span>`, 1)}
+      ${td(p.env.length ? `<span class="mono meta">${p.env.join(", ")}</span>` : `<span class="mono" style="color:var(--faint)">—</span>`)}</tr>`);
+    return view(r, head("插件", "<code>configStatus</code> 是用户意图，<code>effectiveStatus</code> 是实际生效值 —— 两者不等是常见困惑点，这个屏把两列都摆出来。", `<button class="btn btn-primary" data-od-id="pl-install">安装插件</button>`) +
+      panel("插件列表", "6 个 · 2 个警告", table([{ h: "插件" }, { h: "类型" }, { h: "状态" }, { h: "工具", n: 1 }, { h: "钩子", n: 1 }, { h: "需要的环境变量" }], rows), "panel-plugins") +
+      `<div class="grid-2">
+        ${panel("状态口径", "configStatus → effectiveStatus", `<div style="display:grid;gap:9px">
+          <div class="note"><b>enabled</b> → <span class="tag ok">enabled</span> 用户开了且依赖满足</div>
+          <div class="note"><b>auto</b> → <span class="tag run">auto-active</span> 由上游决定，UI 不该显示成开关</div>
+          <div class="note"><b>not-enabled</b> → <span class="tag info">inactive</span> 已装未启用，需要单独提示</div>
+          <div class="note"><b>provider-managed</b> → <span class="tag warn">托管</span> 不给开关，切换开关只会让人困惑</div>
+        </div>`, "panel-plstate")}
+        ${panel("运行环境", "metadata", kv([["agent root", "~/.hermes"], ["python", "3.12.4"], ["cwd", "~/source"], ["项目级插件", "已禁用"]], "pl-meta"), "panel-plmeta")}
+      </div>`);
+  }
+
+  /* ═══ 13 MCP · /hermes/mcp ═════════════════════════════════════════ */
+  function renderMcp() {
+    const r = byPath.get("/hermes/mcp");
+    const rows = MCP.map((m, i) => `<tr data-od-id="mcp-${m.name}">
+      ${td(`<span class="nm mono">${esc(m.name)}</span>`)}
+      ${td(tag("info", m.transport))}
+      ${td(m.connected ? tag("ok", "已连接") : tag("err", "不可达"))}
+      ${td(`<span class="mono">${m.reg} / ${m.tools}</span>`, 1)}
+      ${td(m.error ? `<span class="mono" style="color:var(--err)">${esc(m.error)}</span>` : `<div class="row-wrap">${m.names.slice(0, 3).map((n) => `<span class="chip">${esc(n)}</span>`).join("")}${(m.names.length > 3) ? `<span class="chip">+${m.names.length - 3}</span>` : ""}</div>`)}</tr>`);
+    const total = MCP.reduce((a, b) => a + b.tools, 0), reg = MCP.reduce((a, b) => a + b.reg, 0);
+    return view(r, head("MCP", "服务器连通性 + 工具注册数。两个数字分开：<code>tools</code> 是服务器提供的，<code>tools_registered</code> 是客户端实际挂上的。", `<button class="btn btn-primary" data-od-id="mcp-add">添加服务器</button>`) +
+      kpis([{ l: "服务器", n: `${MCP.filter((m) => m.connected).length} / ${MCP.length}` }, { l: "工具可用", n: `${reg} / ${total}`, d: "差值即不可用" }, { l: "传输方式", n: "2 stdio · 2 http" }, { l: "异常", n: "1" }]) +
+      panel("服务器", "4 个", table([{ h: "名称" }, { h: "传输" }, { h: "状态" }, { h: "注册 / 提供", n: 1 }, { h: "工具" }], rows), "panel-mcp") +
+      panel("降级说明", "", note("一个服务器不可达时，UI 必须显式说清「有多少工具因此不可用」，而不是只在日志里报错。当前 <code>hermes-studio-use</code> 掉线，25 个工具不可用。"), "panel-mcpdeg"));
+  }
+
+
+  /* ═══ 14 宠物 · /hermes/petdex ═════════════════════════════════════ */
+  function renderPetdex() {
+    const r = byPath.get("/hermes/petdex");
+    const pets = [
+      { n: "螺丝", k: "机械", st: "跟随中", a: true }, { n: "墨点", k: "水墨", st: "待领养", a: false },
+      { n: "游隼", k: "动物", st: "已装备", a: true }, { n: "方糖", k: "几何", st: "待领养", a: false },
+      { n: "夜灯", k: "机械", st: "待领养", a: false },
+    ];
+    return view(r, head("宠物", "桌宠选择器。装备状态存在服务端 <code>pet-state</code>，切设备后跟随的是账号不是机器。", `<button class="btn btn-primary" data-od-id="pet-adopt">领养新宠物</button>`) +
+      panel("图鉴", "5 只 · 2 已装备", `<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px">
+        ${pets.map((p, i) => `<button class="tcard" style="text-align:left;cursor:pointer" aria-current="${p.a}" data-od-id="pet-${i}">
+          <div class="tcard-hd"><span class="tcard-t">${esc(p.n)}</span>${tag("info", p.k)}</div>
+          <div class="tcard-d">${p.a ? "已装备 · 跟随光标" : "未装备"}</div>
+          <div class="tcard-ft"><span class="mono" style="color:${p.a ? "var(--accent)" : "var(--faint)"}">${esc(p.st)}</span></div>
+        </button>`).join("")}
+      </div>`, "panel-petdex") +
+      `<div class="grid-2">
+        ${panel("状态同步", "pet-state.ts", kv([["当前宠物", "螺丝"], ["跟随光标", "开"], ["跨设备", "开"], ["最后更新", "10-19 13:02"]], "pet-state"), "panel-petstate")}
+        ${panel("降级", "", note("服务端不可达时退回本地 <span class=\"mono\">localStorage</span>，并显示「离线状态」，不假装是已同步。"), "panel-petdeg")}
+      </div>`);
+  }
+
+  /* ═══ 15 记忆 · /hermes/memory ════════════════════════════════════ */
+  function renderMemory() {
+    const r = byPath.get("/hermes/memory");
+    const rows = [
+      { t: "Jack 的机长习惯", k: "偏好", s: "temporal", n: 42 },
+      { t: "TUN 模式排障结论", k: "事实", s: "semantic", n: 18 },
+      { t: "Civitai.red API 走 JSON", k: "事实", s: "semantic", n: 6 },
+      { t: "ComfyUI 命名约定", k: "约定", s: "procedural", n: 9 },
+      { t: "下载协议：先验后给链接", k: "约定", s: "procedural", n: 4 },
+      { t: "docker_apps/hermes 部署结构", k: "事实", s: "semantic", n: 12 },
+    ].map((m, i) => `<tr data-od-id="mem-${i}">
+      ${td(`<span class="nm">${esc(m.t)}</span>`)}${td(tag("info", m.k))}${td(`<span class="mono">${m.s}</span>`)}${td(`<span class="mono">${m.n}</span>`, 1)}</tr>`);
+    return view(r, head("记忆", "跨会话长期记忆。hindsight 分 temporal / semantic 两库，procedural 走文件系统。", `<button class="btn btn-primary" data-od-id="mem-add">新建记忆</button>`) +
+      kpis([{ l: "记忆条目", n: "91" }, { l: "temporal", n: "42" }, { l: "semantic", n: "49" }, { l: "本次注入", n: "3 条" }]) +
+      `<div class="grid-2">
+        ${panel("条目", "91 条", table([{ h: "标题" }, { h: "类别" }, { h: "存储" }, { h: "命中", n: 1 }], rows), "panel-memory")}
+        <div style="display:grid;gap:16px;align-content:start">
+          ${panel("注入预览", "本次会话实际带上的 3 条", `<div style="display:grid;gap:9px">
+            ${["Jack 学习偏好：先讲思路再动手", "验收标准：交付前必须真实验证", "不要主动追问模式，L1 默认"].map((t, i) => `<div class="note" data-od-id="inj-${i}">${esc(t)}</div>`).join("")}
+          </div>`, "panel-inject")}
+          ${panel("容量", "hindsight", bars([{ l: "temporal", v: 42 }, { l: "semantic", v: 49 }], { h: 64, gap: "18px" }), "panel-memcap")}
+        </div>
+      </div>`);
+  }
+
+  /* ═══ 16 模型 · /hermes/models ═════════════════════════════════════ */
+  function renderModels() {
+    const r = byPath.get("/hermes/models");
+    const models = [
+      { n: "minimax-m2", p: "minimax-cn", c: "在", ctx: "200K", out: "32K" },
+      { n: "claude-sonnet-4-5", p: "anthropic", c: "在", ctx: "200K", out: "64K" },
+      { n: "gpt-5", p: "openai", c: "在", ctx: "400K", out: "128K" },
+      { n: "MiniMax-M3.1-Flash-Preview", p: "minimax-cn", c: "在", ctx: "200K", out: "32K" },
+      { n: "qwen3-max", p: "dashscope", c: "否", ctx: "256K", out: "32K" },
+      { n: "llama-3.3-70b-instruct", p: "lmstudio", c: "在", ctx: "128K", out: "8K" },
+    ];
+    const rows = models.map((m, i) => `<tr data-od-id="model-${i}">
+      ${td(`<span class="nm mono">${esc(m.n)}</span>`)}${td(`<span class="mono">${esc(m.p)}</span>`)}
+      ${td(m.c === "在" ? tag("ok", "可用") : tag("err", "不可用"))}
+      ${td(`<span class="mono">${m.ctx}</span>`, 1)}${td(`<span class="mono">${m.out}</span>`, 1)}</tr>`);
+    return view(r, head("模型", "供应商 × 模型矩阵。探测走本地端点，不打真实请求 —— 表里的「可用」是配置与连通性，不是实时基准测试。", `<button class="btn btn-primary" data-od-id="md-add">添加模型</button>`) +
+      kpis([{ l: "模型", n: "6" }, { l: "供应商", n: "4" }, { l: "不可用", n: "1" }, { l: "默认", n: "minimax-m2" }]) +
+      panel("模型矩阵", "4 个供应商", table([{ h: "模型" }, { h: "供应商" }, { h: "状态" }, { h: "上下文", n: 1 }, { h: "输出上限", n: 1 }], rows), "panel-models") +
+      `<div class="grid-2">
+        ${panel("连通性探测", "每 60s", kv([["minimax-cn", "12ms"], ["anthropic", "182ms"], ["lmstudio", "2ms"], ["dashscope", "超时"]], "md-probe"), "panel-mdprobe")}
+        ${panel("余额", "CC Switch 转发", kv([["Moonshot", "¥ 42.18"], ["DeepSeek", "¥ 8.60"], ["MiniMax", "¥ 12.04"]], "md-balance"), "panel-mdbal")}
+      </div>`);
+  }
+
+  /* ═══ 17 日志 · /hermes/logs ═══════════════════════════════════════ */
+  function renderLogs() {
+    const r = byPath.get("/hermes/logs");
+    const lv = { INFO: "info", WARN: "warn", ERROR: "err", DEBUG: "" };
+    const rows = LOGLINES.map((l, i) => `<div class="logline" data-od-id="log-${i}">
+        <span class="mono" style="color:var(--faint)">${l.ts}</span>
+        ${tag(lv[l.lv], l.lv)}
+        <span class="mono" style="color:var(--muted)">${esc(l.lg)}</span>
+        <span class="ltext">${esc(l.msg)}</span></div>`).join("");
+    return view(r, `<div class="split" data-od-id="log-split">
+      <div class="split-l">
+        <div class="side-hd"><span class="eyebrow">日志文件</span><span class="meta spacer">${LOGFILES.length}</span></div>
+        <div class="side-scroll">${LOGFILES.map((f, i) => `<button class="row-i" aria-current="${i === 2}" data-od-id="logfile-${i}">
+          <span class="nm mono">${esc(f.name)}</span><span class="sz">${esc(f.size)}</span></button>`).join("")}</div>
+      </div>
+      <div class="split-r">
+        <div class="side-hd"><span class="eyebrow">bridge.log</span><span class="meta spacer">近 200 行 · 12ms</span></div>
+        <div class="side-scroll" style="font-family:var(--font-mono);font-size:11.5px">
+          <div style="display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap">
+            <button class="chip" type="button" data-lev="all">全部 12</button>
+            <button class="chip" type="button" data-lev="ERROR">ERROR 2</button>
+            <button class="chip" type="button" data-lev="WARN">WARN 2</button>
+            <span class="meta spacer" style="align-self:center">过滤真实生效</span>
+          </div>
+          <div id="logList">${rows}</div>
+        </div>
+      </div>
+    </div>`, "view-flush");
+  }
+
+
+  /* ═══ 18 用量 · /hermes/usage ══════════════════════════════════════ */
+  /* 用量序列：7 / 30 为每日，90 按周聚合（13 点） */
+  const USAGE_SERIES = { "7": [4, 9, 6, 11, 8, 14, 12],
+                   "30": [6, 11, 8, 14, 10, 17, 13, 9, 15, 19, 12, 21, 24, 17, 14, 22, 27, 20, 16, 23, 28, 21, 18, 25, 30, 22, 17, 24, 29, 26],
+                   "90": [11, 14, 12, 13, 17, 15, 19, 21, 18, 24, 22, 26, 28] };
+
+  function renderUsage() {
+    const r = byPath.get("/hermes/usage");
+    return view(r, head("用量", "按区间切换图表与 KPI。这个屏刻意做成真交互 —— 点区间数字必须变，不是静态稿。", `<button class="btn btn-primary" data-od-id="us-refresh">刷新数据</button>`) +
+      `<div style="display:flex;gap:8px" role="group" aria-label="时间区间">
+        ${["7", "30", "90"].map((k, i) => `<button class="chip" type="button" data-range="${k}" aria-current="${i === 1}" style="${i === 1 ? "color:var(--accent);border-color:color-mix(in oklch, var(--accent) 50%, transparent)" : ""}">近 ${k} 天</button>`).join("")}
+      </div>` +
+      kpis([{ l: "总 tokens", n: "1.24M" }, { l: "调用次数", n: "3,418" }, { l: "预估成本", n: "¥ 62.40" }, { l: "平均延迟", n: "742ms" }]) +
+      panel("每日调用", "30 天", `<div data-od-id="usage-chart">${bars(USAGE_SERIES["30"].map((v, i) => ({ l: `D-${30 - i}`, v })), { h: 150 })}</div>`, "panel-usage") +
+      `<div class="grid-2">
+        ${panel("按供应商", "成本占比", bars([{ l: "minimax", v: 42 }, { l: "anthropic", v: 31 }, { l: "openai", v: 18 }, { l: "本地", v: 9 }], { h: 96, gap: "10px" }), "panel-usprov")}
+        ${panel("按 Profile", "default 占大头", bars([{ l: "default", v: 68 }, { l: "agent", v: 21 }, { l: "ops", v: 8 }, { l: "research", v: 3 }], { h: 96, gap: "10px" }), "panel-usprof")}
+      </div>`);
+  }
+
+  /* ═══ 19 性能监控 · /hermes/performance（需 superadmin）════════════ */
+  function renderPerformance() {
+    const r = byPath.get("/hermes/performance");
+    return view(r, head("性能监控", "进程级快照：web / broker / worker 三类进程各自的上线时间、内存与 CPU。", `<button class="btn btn-primary" data-od-id="pf-refresh">立即采样</button>`) +
+      kpis([{ l: "系统 CPU", n: "18.4%" }, { l: "内存占用", n: "6.2 / 16 GB" }, { l: "uptime", n: "6d 04h" }, { l: "负载", n: "1.82" }]) +
+      `<div class="grid-2">
+        ${panel("进程", "3 个", table([{ h: "进程" }, { h: "PID", n: 1 }, { h: "CPU", n: 1 }, { h: "RSS", n: 1 }, { h: "" }], [
+          ["web · :8787", 44120, "12.1%", "418 MB", "running"],
+          ["broker", 44188, "2.4%", "96 MB", "ready"],
+          ["worker · ops", 44190, "3.9%", "128 MB", "running"],
+        ].map(([n, pid, cpu, rss, st], i) => `<tr data-od-id="proc-${i}">${td(`<span class="mono">${n}</span>`)}${td(`<span class="mono">${pid}</span>`, 1)}${td(`<span class="mono">${cpu}</span>`, 1)}${td(`<span class="mono">${rss}</span>`, 1)}${td(statusTag(st))}</tr>`)), "panel-proc")}
+        <div style="display:grid;gap:16px;align-content:start">
+          ${panel("CPU 走势", "近 60 分钟", spark(Array.from({ length: 30 }, (_, i) => ({ v: 12 + Math.round(Math.sin(i / 3) * 6 + (i % 7) * 0.6) })), { h: 76 }), "panel-cpu")}
+          ${panel("Bridge", "endpoint", kv([["endpoint", "ws://127.0.0.1:8788"], ["reachable", "true"], ["broker", "ready"], ["queue", "0"]], "pf-bridge"), "panel-bridge")}
+        </div>
+      </div>`);
+  }
+
+  /* ═══ 20 学习轨迹 · /hermes/journey ════════════════════════════════ */
+  function renderJourney() {
+    const r = byPath.get("/hermes/journey");
+    const edges = [["n1", "n2"], ["n1", "n3"], ["n5", "n4"], ["n5", "n9"], ["n4", "n6"], ["n4", "n10"], ["n8", "n9"], ["n8", "n7"], ["n3", "n5"]];
+    const pos = Object.fromEntries(JGRAPH.map((n) => [n.id, n]));
+    const cx = (n) => n.x + 5, cy = (n) => n.y + 4;
+    return view(r, head("学习轨迹", "技能与记忆的使用关系图。节点是 <code>JourneyNode</code>，边是共现关系，不是人工编排的流程。", `<button class="btn btn-primary" data-od-id="jr-refresh">重建图谱</button>`) +
+      kpis(JOURNEY.slice(0, 4).map((j) => ({ l: j.c, n: String(j.n), d: "个节点" }))) +
+      `<div class="split" data-od-id="journey-split">
+        <div class="split-l">
+          <div class="side-hd"><span class="eyebrow">聚类</span><span class="meta spacer">${JOURNEY.length}</span></div>
+          <div class="side-scroll">${JOURNEY.map((j, i) => `<button class="row-i" aria-current="${i === 0}" data-od-id="cluster-${i}"><span class="nm">${esc(j.c)}</span><span class="sz">${j.n}</span></button>`).join("")}</div>
+        </div>
+        <div class="split-r">
+          <div class="side-hd"><span class="eyebrow">关系图</span><span class="meta spacer">${JGRAPH.length} 节点 · ${edges.length} 边</span></div>
+          <div class="panel" style="position:relative;background:var(--code-bg);border-radius:0;border-width:0 0 1px 0" data-od-id="journey-graph">
+            <svg viewBox="0 0 100 100" preserveAspectRatio="none" style="position:absolute;inset:0;width:100%;height:100%;min-height:340px" aria-hidden="true">
+              ${edges.map(([a, b]) => `<line x1="${cx(pos[a])}" y1="${cy(pos[a])}" x2="${cx(pos[b])}" y2="${cy(pos[b])}" stroke="var(--border)" stroke-width="0.6" vector-effect="non-scaling-stroke"/>`).join("")}
+            </svg>
+            <div style="position:relative;height:340px">
+              ${JGRAPH.map((n) => `<div style="position:absolute;left:${n.x}%;top:${n.y}%;transform:translate(-50%,-50%);padding:5px 9px;border:1px solid ${n.kind === "skill" ? "color-mix(in oklch, var(--accent) 42%, transparent)" : "var(--border)"};border-radius:999px;background:var(--surface-2);font-family:var(--font-mono);font-size:10.5px;color:${n.kind === "skill" ? "var(--fg)" : "var(--muted)"};white-space:nowrap" data-od-id="jnode-${n.id}">${esc(n.label)}</div>`).join("")}
+            </div>
+          </div>
+        </div>
+      </div>`);
+  }
+
+  /* ═══ 21 技能用量 · /hermes/skills-usage ══════════════════════════ */
+  function renderSkillsUsage() {
+    const r = byPath.get("/hermes/skills-usage");
+    const rows = SKILLS.slice(0, 8).map((s, i) => `<tr data-od-id="su-${s.name}">
+      ${td(`<span class="nm mono">${esc(s.name)}</span>`)}
+      ${td(`<span class="mono">${s.use}</span>`, 1)}
+      ${td(`<span class="mono">${Math.round(s.use * 1.7)}</span>`, 1)}
+      ${td(`<span class="mono">${s.use ? (s.use / 30).toFixed(1) : "0.0"}</span>`, 1)}
+      ${td(`<div style="min-width:96px">${bars([{ l: s.name, v: s.use }], { h: 20, gap: "0px" })}</div>`)}</tr>`);
+    return view(r, head("技能用量", "分三种窗口：累计次数、近 7 天次数、日均。归因不精确时才不会误导决策。", `<button class="btn btn-primary" data-od-id="su-export">导出 CSV</button>`) +
+      kpis([{ l: "技能被调用", n: "31" }, { l: "累计调用", n: "671" }, { l: "零调用", n: "9", d: "可能是死技能" }, { l: "归因准确率", n: "94%" }]) +
+      panel("技能调用排行", "近 30 天", table([{ h: "技能" }, { h: "累计", n: 1 }, { h: "近 7 天", n: 1 }, { h: "日均", n: 1 }, { h: "趋势", n: 1 }], rows), "panel-su"));
+  }
+
+
+  /* ═══ 22 版本预览 · /hermes/version-preview（需 superadmin）═══════ */
+  function renderVersionPreview() {
+    const r = byPath.get("/hermes/version-preview");
+    const rel = [
+      { v: "0.7.0", d: "2026-10-19", n: "新增", items: ["全局代理可跨会话下达指令", "插件 configStatus / effectiveStatus 分离", "看板支持多 board 切换"] },
+      { v: "0.6.29", d: "2026-10-15", n: "修复", items: ["job 上下文超长不再中断派发", "MCP 单服务器掉线不再拖垮全部工具"] },
+      { v: "0.6.28", d: "2026-10-08", n: "变更", items: ["sideRail 折叠状态持久化", "日志按 session 过滤"] },
+    ];
+    return view(r, head("版本预览", "预发布环境开关。只在 <code>VITE_HERMES_PREVIEW === '1'</code> 时可见，所以它在正式构建里根本不该出现。", `<button class="btn btn-primary" data-od-id="vp-toggle">切换预发布</button>`) +
+      `<div class="grid-2">
+        ${panel("环境", "构建期注入", kv([["VITE_HERMES_PREVIEW", "1"], ["agent 版本", "0.6.29"], ["web-ui 版本", "0.6.29"], ["node", "v22.14.0"]], "vp-env"), "panel-vpenv")}
+        ${panel("变更日志", "3 个版本", `<div style="display:grid;gap:14px">
+          ${rel.map((x, i) => `<div data-od-id="rel-${i}" style="display:grid;gap:5px;padding-bottom:12px;border-bottom:1px solid var(--border)">
+            <div style="display:flex;align-items:center;gap:8px"><span class="mono" style="color:var(--accent)">${x.v}</span>${tag("info", x.n)}<span class="meta spacer">${x.d}</span></div>
+            ${x.items.map((it) => `<div class="ltext" style="color:var(--muted)">· ${esc(it)}</div>`).join("")}
+          </div>`).join("")}
+        </div>`, "panel-changelog")}
+      </div>`);
+  }
+
+  /* ═══ 23 设备 · /hermes/devices（需 superadmin）════════════════════ */
+  function renderDevices() {
+    const r = byPath.get("/hermes/devices");
+    const rows = DEVICES.map((d, i) => `<tr data-od-id="dev-${d.name}">
+      ${td(`<div style="display:flex;align-items:center;gap:8px">${led(d.online ? "ok" : "")}<span class="nm">${esc(d.name)}</span></div>
+            <div class="meta mono" style="margin-top:3px;padding-left:15px">${d.ip} · ${esc(d.os)}</div>`)}
+      ${td(statusTag(d.inb))}${td(statusTag(d.outb))}
+      ${td(`<span class="mono">${d.agent}</span>`)}
+      ${td(`<span class="mono">${d.ms ? d.ms + " ms" : "—"}</span>`, 1)}
+      ${td(`<span class="mono">${esc(d.seen)}</span>`, 1)}</tr>`);
+    return view(r, head("设备", "局域网设备互信。双向权限独立：<code>inbound_status</code> 是它能连我，<code>outbound_status</code> 是我能连它。", `<button class="btn btn-primary" data-od-id="dev-scan">扫描局域网</button>`) +
+      kpis([{ l: "已知设备", n: "4" }, { l: "在线", n: "3" }, { l: "待批准", n: "1" }, { l: "互信", n: "3 / 4" }]) +
+      panel("设备列表", "4 台", table([{ h: "设备" }, { h: "入站" }, { h: "出站" }, { h: "Agent" }, { h: "延迟", n: 1 }, { h: "最后可见", n: 1 }], rows), "panel-devices") +
+      `<div class="grid-2">
+        ${panel("设备公钥", "用于双向校验", kv([["device_id", "dev_a41f…"], ["公钥", "ed25519:7b2c…"], ["来源", "指纹配对"]], "dev-key"), "panel-devkey")}
+        ${panel("待处理", "1 台", note("<span class=\"mono\">iphone</span> 请求入站，尚未批准。批准前它看不到任何路由 —— 默认拒绝比默认放行安全。"), "panel-devpend")}
+      </div>`);
+  }
+
+  /* ═══ 24 可访问配置 · /hermes/profiles（需 superadmin）═════════════ */
+  function renderProfiles() {
+    const r = byPath.get("/hermes/profiles");
+    const rows = PROFILES.map((p, i) => `<tr data-od-id="profile-${p.name}">
+      ${td(`<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--border);border-radius:4px;font-size:10px;color:${p.active ? "var(--accent)" : "var(--faint)"}">${p.alias.toUpperCase()}</span><span class="nm">${esc(p.name)}</span>${p.active ? tag("ok", "当前") : ""}</div>`)}
+      ${td(`<span class="mono">${esc(p.model)}</span><div class="meta">${esc(p.provider)}</div>`)}
+      ${td(`<span class="mono">${p.skills}</span>`, 1)}
+      ${td(`${p.hasEnv ? tag("ok", "有") : tag("warn", "无")} ${p.hasSoul ? tag("ok", "soul") : tag("warn", "无 soul")}`)}
+      ${td(statusTag(p.gw === "running" ? "running" : "idle"))}</tr>`);
+    return view(r, head("可访问配置", "Profile 是独立的人格与配置单元，各自有模型、技能目录、env 与 soul.md。切换 Profile 等于换一个助手。", `<button class="btn btn-primary" data-od-id="pf-new">新建 Profile</button>`) +
+      panel("Profile 列表", "4 个", table([{ h: "名称" }, { h: "模型" }, { h: "技能", n: 1 }, { h: "资源" }, { h: "Gateway" }], rows), "panel-profiles") +
+      `<div class="grid-2">
+        ${panel("当前 Profile", "default", kv([["路径", "~/.hermes/profiles/default"], ["env", "已配置"], ["soul.md", "已配置"], ["avatar", "generated"]], "pf-cur"), "panel-pfcur")}
+        ${panel("Gateway", "按需拉起", note("非当前 Profile 的 gateway 默认不运行。切换时才拉起进程，避免四个 Profile 常驻吃内存。"), "panel-pfgw")}
+      </div>`);
+  }
+
+  /* ═══ 25 设置 · /hermes/settings ═══════════════════════════════════ */
+  function renderSettings() {
+    const r = byPath.get("/hermes/settings");
+    const sw = (id, on, label, d) => `<div class="switch-row" data-od-id="sw-${id}">
+        <div style="min-width:0"><div style="font-size:13px">${label}</div><div class="meta" style="margin-top:3px">${d}</div></div>
+        <div class="spacer"></div>
+        <button class="sw" type="button" role="switch" aria-checked="${on}" data-sw="${id}" aria-label="${label}"></button>
+      </div>`;
+    return view(r, head("设置", "写回 <code>settings</code> store。开关做成真可点的，不是画上去的。", `<button class="btn btn-primary" data-od-id="st-save">保存设置</button>`) +
+      `<div class="grid-2">
+        <div style="display:grid;gap:16px;align-content:start">
+          ${panel("外观", "3 项", sw("ink", false, "水墨主题", "默认基线：纯黑白灰，无彩色") +
+            sw("comic", false, "漫画主题", "高饱和插画风") +
+            sw("cyber", true, "赛博主题", "本稿新增的第三套：霓虹青 + 等宽排版"), "panel-st-theme")}
+          ${panel("流式", "2 项", sw("stream", true, "SSE 流式输出", "逐字返回，首字延迟 12ms") +
+            sw("think", false, "显示推理过程", "打开会显著增加 token 消耗"), "panel-st-stream")}
+        </div>
+        <div style="display:grid;gap:16px;align-content:start">
+          ${panel("连接", "服务端探测", kv([["base URL", "http://127.0.0.1:8787"], ["鉴权", "Bearer token"], ["CLI 探测", "fail-open"], ["重连", "指数退避"]], "st-conn"), "panel-stconn")}
+          ${panel("危险操作", "不可撤销", `<div style="display:flex;gap:8px;flex-wrap:wrap">
+            <button class="btn btn-ghost" data-od-id="st-reset">重置全部设置</button>
+            <button class="btn btn-ghost" style="color:var(--err);border-color:color-mix(in oklch, var(--err) 46%, transparent)" data-od-id="st-clear">清除本地数据</button>
+          </div>`, "panel-stdanger")}
+        </div>
+      </div>`);
+  }
+
+  /* ═══ 26 终端 · /hermes/terminal（需 superadmin）═══════════════════ */
+  function renderTerminal() {
+    const r = byPath.get("/hermes/terminal");
+    const lines = [
+      { t: "$ hermes status", k: "cmd" }, { t: "agent      running   pid 44120   :8787", k: "ok" },
+      { t: "web-ui     running   pid 44188   :8788", k: "ok" },
+      { t: "bridge     ready     pid 44190", k: "ok" },
+      { t: "mcp        degraded  3/4 servers · 25 tools unavailable", k: "warn" },
+      { t: "", k: "" },
+      { t: "$ docker ps --filter name=hermes", k: "cmd" },
+      { t: "hermes-agent    Up 6 days    1.2 GB", k: "" },
+      { t: "hermes-webui    Up 6 days    412 MB", k: "" },
+      { t: "hindsight       Up 6 days    4.1 GB", k: "" },
+      { t: "", k: "" },
+      { t: "$ git log --oneline -3", k: "cmd" },
+      { t: "a41f9c2  feat: cyber theme tokens", k: "" },
+      { t: "7b2e1d8  fix: mcp reconnect storm", k: "" },
+      { t: "c93a004  chore: bump arco to 2.57", k: "" },
+    ];
+    return view(r, head("终端", "服务端 shell。只对 superadmin 开放，且要过写入门禁 —— 这是全站最危险的一屏。", `<button class="btn btn-primary" data-od-id="tm-clear">清屏</button>`) +
+      `<div class="panel" style="background:var(--code-bg);border-color:var(--border)" data-od-id="terminal-panel">
+        <div class="panel-hd"><h3>shell · hermes@hermes</h3><span class="meta">hermes profile · bash · 80×24</span></div>
+        <div class="term" id="termOut" data-od-id="term-out">${lines.map((l, i) => l.t ? `<div class="logline" style="color:${l.k === "cmd" ? "var(--fg)" : l.k === "warn" ? "var(--warn)" : l.k === "ok" ? "var(--muted)" : "var(--faint)"}"><span class="ltext">${esc(l.t)}</span></div>` : "<div style=\"height:8px\"></div>").join("")}
+          <div class="logline"><span class="mono" style="color:var(--accent)">$</span><span id="termPrompt" style="display:inline-block;width:8px;height:14px;background:var(--accent);vertical-align:middle;animation:blink 1.1s steps(2) infinite"></span></div>
+        </div>
+        <div class="term-in" data-od-id="term-input">
+          <span class="mono" style="color:var(--accent)">$</span>
+          <input class="input mono" id="termCmd" placeholder="输入命令，Enter 执行" aria-label="终端命令输入" style="background:transparent;border:0;min-height:44px;padding:0" />
+        </div>
+      </div>` +
+      `<div class="grid-2">
+        ${panel("写入门禁", "write-gate.ts", note("高危命令（<span class=\"mono\">rm</span> / <span class=\"mono\">git reset --hard</span> / 改配置）需要二次确认，且写操作留审计日志。"), "panel-tmgate")}
+        ${panel("审计", "保留 30 天", kv([["今日命令", "412"], ["高危拦截", "2"], ["审计文件", "audit.jsonl"]], "tm-audit"), "panel-tmaudit")}
+      </div>`);
+  }
+
+  /* ═══ 27 文件 · /hermes/files ══════════════════════════════════════ */
+  function renderFiles() {
+    const r = byPath.get("/hermes/files");
+    const rows = FILES.map((f, i) => `<button class="row-i" aria-current="${i === 1}" data-od-id="file-${f.name}">
+        ${f.dir ? '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--accent);flex:0 0 auto"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>'
+              : '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--faint);flex:0 0 auto"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>'}
+        <span class="nm">${esc(f.name)}</span><span class="sz">${f.dir ? "—" : kb(f.size)} · ${f.mt}</span></button>`).join("");
+    return view(r, `<div class="split" data-od-id="file-split">
+      <div class="split-l">
+        <div class="side-hd"><span class="eyebrow">工作区根目录</span><span class="meta spacer">5 项</span></div>
+        <div class="side-scroll">${rows}</div>
+      </div>
+      <div class="split-r">
+        <div class="dhead" data-od-id="file-detail">
+          <div><h2>hermes-ui-cyber-shell.html</h2><p class="desc meta">86,061 B · 修改于 2026-10-19 01:53 · 单文件、零外部依赖</p></div>
+          <div class="spacer"></div>
+          <button class="btn btn-ghost" data-od-id="file-dl">下载</button>
+        </div>
+        <div style="padding:18px 20px;display:grid;gap:14px">
+          ${panel("属性", "FileStat", kv([["name", "hermes-ui-cyber-shell.html"], ["isDir", "false"], ["size", "86,061 B"], ["permissions", "-rw-r--r--"], ["profile", "default"]], "file-stat"), "panel-filestat")}
+          ${panel("前 40 行", "只读预览", `<pre class="term" style="margin:0;max-height:280px;overflow:auto">${esc(`<!--
+  hermes-ui · CYBER 主题设计稿
+  交付物  单文件 HTML 原型。零外部依赖，双击即开。
+  色彩    赛博风走克制路线：近黑偏蓝底 + 单一霓虹青强调。
+  字体    标题与数字走等宽，正文走 PingFang SC。
+  布局    240px 侧栏 + 60px 顶栏 + 单一滚动区。
+-->`)}</pre>`, "panel-filepreview")}
+        </div>
+      </div>
+    </div>`, "view-flush");
+  }
+
+
+  /* ═══ 28 路由全景 · 交付说明 ═══════════════════════════════════════ */
+  function renderRouteMap() {
+    const rows = ROUTES.map((r) => `<tr data-od-id="rmap-${r.n}" style="cursor:pointer" data-goto="${r.p}">
+      ${td(`<span class="rt rt-hit">${esc(r.p)}${r.pub ? '<span class="badge-pub">PUBLIC</span>' : ""}${r.sa ? '<span class="badge-sa">SA</span>' : ""}${r.param ? '<span class="badge-orphan">PARAM</span>' : ""}</span>`)}
+      ${td(`<span class="mono meta">${r.n}</span>`)}
+      ${td(gname(r.g))}
+      ${td(`<span class="mono">${r.f}</span>`)}
+      ${td(r.orphan ? '<span class="badge-orphan">无入口</span>' : '<span class="meta">侧栏可达</span>')}
+    </tr>`);
+    const orphan = ROUTES.filter((r) => r.orphan);
+    const sa = ROUTES.filter((r) => r.sa);
+    return view({ n: "routeMap", p: "@/routeMap" }, head("路由全景", `router/index.ts 里的 <b>31</b> 条路由，逐条对着组件文件。这屏是索引，不是产品界面。`, `<button class="btn btn-ghost" data-od-id="rm-copy">复制路由表</button>`) +
+      kpis([
+        { l: "路由", n: String(ROUTES.length) }, { l: "组件", n: String(new Set(ROUTES.map((r) => r.f)).size) },
+        { l: "公开页", n: String(ROUTES.filter((r) => r.pub).length) }, { l: "需 superadmin", n: String(sa.length) },
+      ]) +
+      panel("全部路由", "点任意一行直达该屏", table([{ h: "路径" }, { h: "路由名" }, { h: "分组" }, { h: "组件" }, { h: "可达性" }], rows), "panel-rmap") +
+      `<div class="grid-2">
+        ${panel("IA 缺口", `${orphan.length} 条路由当前没有导航入口`, `<div style="display:grid;gap:9px">
+          ${orphan.map((r) => `<div class="note"><span class="mono">${esc(r.p)}</span> — ${esc(r.f)}。用户只能靠手敲 URL 或从别处跳转抵达。</div>`).join("")}
+        </div>`, "panel-orphan")}
+        ${panel("守卫逻辑", "router.beforeEach", `<div style="display:grid;gap:10px">
+          ${note("① <b>CLI 探测</b>：每次导航前 <code>checkHermesCliAvailable()</code>，只有明确 missing 才跳 <code>/hermes-missing</code>，其余 fail-open。")}
+          ${note("② <b>公开页</b>：<code>meta.public</code> 直接放行；<code>/</code> 若已存 key 则重定向到 <code>/hermes/chat</code>。")}
+          ${note("③ <b>鉴权</b>：其余全部要求 token，缺失则回登录页。")}
+          ${note("④ <b>superadmin</b>：<code>meta.requiresSuperAdmin</code> 共 5 条（性能 / 版本预览 / 设备 / 配置 / 终端），不满足则跳回对话台。")}
+        </div>`, "panel-guard")}
+      </div>`);
+  }
+
+  /* ═══ 29 令牌对照 · 交付说明 ═══════════════════════════════════════ */
+  function renderTokens() {
+    const SC = [
+      ["--bg", "页面底", "bg"], ["--surface", "侧栏底", "bg"], ["--surface-2", "面板", "bg"],
+      ["--surface-3", "悬浮/选中", "bg"], ["--input-bg", "输入框", "bg"], ["--code-bg", "代码底", "bg"],
+      ["--fg", "正文", "bg"], ["--muted", "次级文字", "bg"], ["--faint", "三级文字", "bg"],
+      ["--accent", "唯一强调", "bg"], ["--accent-hv", "强调 hover", "bg"], ["--accent-ink", "强调底上的字", "bg"],
+      ["--ok", "成功", "bg"], ["--warn", "警告", "bg"], ["--err", "错误", "bg"], ["--info", "信息", "bg"],
+    ];
+    const pairs = [
+      ["正文 / 页面底", "--fg", "--bg"], ["正文 / 面板", "--fg", "--surface-2"],
+      ["次级 / 页面底", "--muted", "--bg"], ["三级 / 面板", "--faint", "--surface-2"],
+      ["强调 / 页面底", "--accent", "--bg"], ["强调底 / 文字", "--accent-ink", "--accent"],
+      ["ok / 面板", "--ok", "--surface-2"], ["warn / 面板", "--warn", "--surface-2"],
+      ["err / 面板", "--err", "--surface-2"], ["err / tcard", "--err", "--surface-3"],
+      ["info / 面板", "--info", "--surface-2"], ["输入文字 / 输入底", "--fg", "--input-bg"],
+      ["代码 / 代码底", "--faint", "--code-bg"],
+    ];
+    const rows = SC.map(([n, role]) => `<tr data-od-id="tok-${n}">
+      ${td(`<span class="mono" style="color:var(--accent)">${n}</span>`)}
+      ${td(`<span class="mono">${oklchHex(token(n))}</span>`)}
+      ${td(`<span class="mono" style="font-size:11px">${token(n)}</span>`)}
+      ${td(role)}
+      ${td(`<span style="display:inline-block;width:34px;height:16px;border-radius:3px;border:1px solid var(--border);background:${token(n)}"></span>`)}</tr>`);
+    const crows = pairs.map(([label, f, b]) => {
+      const cr = ratio(token(f), token(b));
+      const ok = cr >= 4.5;
+      return `<tr data-od-id="cr-${f}-${b}">${td(label)}${td(`<span class="mono" style="color:${token(f)}">${f}</span> on <span class="mono" style="color:${token(b)}">${b}</span>`)}${td(`<span class="mono">${cr.toFixed(2)}</span>`, 1)}${td(ok ? tag("ok", "AA") : tag("warn", "大字级"))}</tr>`;
+    });
+    return view({ n: "tokens", p: "@/tokens" }, head("色彩令牌", "六枚核心 token 对应 variables.scss 的同名角色；hex 由页面实时从 CSS 变量反算，改 token 表就跟着变。") +
+      panel("令牌对照表", "variables.scss → :root", table([{ h: "本稿 token" }, { h: "hex" }, { h: "OKLch" }, { h: "角色" }, { h: "" }], rows), "panel-token-map") +
+      `<div class="grid-2">
+        ${panel("对比度实测", "WCAG 2.1 · 实时读取", table([{ h: "组合" }, { h: "配对" }, { h: "比值", n: 1 }, { h: "判定" }], crows), "panel-contrast")}
+        ${panel("视觉规则", "", `<div style="display:grid;gap:11px">
+          ${note("<b>一屏一处强调。</b>强调色只出现在激活导航的 2px 竖条、唯一主按钮、焦点环三处。")}
+          ${note("<b>状态色是语义豁免。</b>ok / warn / err / info 只出现在状态位。")}
+          ${note("<b>网格不是渐变底。</b>32px 网格用 5% 强调色画线，从顶部径向淡出。")}
+          ${note("<b>标题走等宽。</b>视图标题、路由、数字、代码全用 mono，正文用 sans。")}
+          ${note("<b>圆角不返工。</b>控件 6px / 面板 8px，与 arco-theme.ts 的 <span class=\"mono\">borderRadius: 6</span> 对齐。")}
+        </div>`, "panel-rules")}
+      </div>`);
+  }
+
+  /* ═══ 30 落地路径 · 交付说明 ═══════════════════════════════════════ */
+  function renderLanding() {
+    const steps = [
+      { t: "variables.scss 加一组 .cyber", d: "与 .dark / .comic 同级并列，只覆盖色值和字体栈，不动 SCSS 变量段 —— 变量委托给 CSS 自定义属性，加了自动生效。", p: "packages/client/src/styles/variables.scss" },
+      { t: "useTheme.ts 的 style 联合类型加 'cyber'", d: "ThemeStyle 从 'ink' | 'comic' 变成三态，applyClasses() 多 toggle 一个 cyber class，默认值保持 'ink'。", p: "packages/client/src/composables/useTheme.ts" },
+      { t: "主题循环改成三项", d: "toggleStyle() 现在是二元翻转，需改成在 ink / comic / cyber 之间轮转。brightness 那一维保持独立。", p: "packages/client/src/composables/useTheme.ts · toggleStyle()" },
+      { t: "index.html 的 FOUC 脚本同步", d: "基线明写「FOUC 脚本内联在 index.html，两边同步改」。加 cyber 后要读同一个 key，否则首屏闪白。", p: "packages/client/index.html" },
+      { t: "arco-theme.ts 的 colorPrimary 改成按主题取值", d: "现在是硬编码 #2f2f2f 单值。cyber 下需读到 oklch(0.805 0.148 188) ≈ #00DDD1，且 body[arco-theme='dark'] 那套覆盖变量也要补一组。", p: "packages/client/src/styles/arco-theme.ts" },
+      { t: "ui-baseline.md 补一节 cyber 色板", d: "基线是「视觉语言唯一依据」。不改它 cyber 就是没有授权的第四套色。照第 1 节表格补 16 行，标注它与「纯黑白灰」主基调的关系。", p: "docs/ui-baseline.md · 第 1 节" },
+      { t: "给 6 条无入口路由补导航", d: "history / global-agent / group-chat / workflow / files 这 5 条（加各自 param 变体共 6 条路径）在 AppSidebar.vue 里没有任何入口，用户只能手敲 URL。建议在对话台视图头加「历史 · 群聊 · 全局代理」次级入口。", p: "packages/client/src/components/layout/AppSidebar.vue" },
+    ];
+    return view({ n: "landing", p: "@/landing" }, head("落地路径", "cyber 主题要接进现有仓库，具体改哪几个文件。只写清楚，不执行 —— 你的仓库一个字节都没动。") +
+      panel("改动清单", "6 个文件 · 7 处", `<div class="steps">${steps.map((s, i) => `<div class="step" data-od-id="landing-step-${i + 1}">
+        <div class="step-n">${pad2(i + 1)}</div>
+        <div><div class="step-t">${esc(s.t)}</div><div class="step-d">${esc(s.d)}</div><div class="src mono">${esc(s.p)}</div></div>
+      </div>`).join("")}</div>`, "panel-scss") +
+      `<div class="grid-2">
+        ${panel("本稿交付范围", "", `<div style="display:grid;gap:10px">
+          ${note("<b>已交付</b>：31 条路由全部可切换、hash 直达、刷新不丢、前进后退可用；27 个组件屏；侧栏真实四组 IA。")}
+          ${note("<b>未交付</b>：不是可 import 的 Vue/Arco 代码 —— 这是 HTML 原型，模板层要自己重写；数据全是版式占位。")}
+          ${note("<b>零改动</b>：hermes-ui 仓库未被修改。本稿只存在于 Design Files。")}
+        </div>`, "panel-scope")}
+        ${panel("交互已验证", "真实浏览器", `<div style="display:grid;gap:9px">
+          ${["31 条路由逐条切换，零 JS 错误", "看板九列筛选真实生效", "用量区间切换图表数据真变", "日志级别过滤真实生效", "设置开关可点且状态真变", "终端输入可回车执行", "320→1920 八档零横向滚动", "移动端抽屉开合正常"].map((t, i) => `<div class="note" style="padding:7px 10px"><span style="color:var(--ok)">✓</span> ${esc(t)}</div>`).join("")}
+        </div>`, "panel-checks")}
+      </div>`);
+  }
+
+
+  /* ═══ superadmin 门禁屏 ═════════════════════════════════════════════ */
+  function renderGate(r) {
+    return view(r, head(esc(r.s), `这条路由带 <code>meta.requiresSuperAdmin</code>，守卫不满足时会被重定向回 <code>/hermes/chat</code>。`) +
+      `<div class="gate" data-od-id="gate-${r.n}">
+        <div class="gate-mark"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></div>
+        <div style="display:grid;gap:9px;max-width:46ch">
+          <h2>需要超级管理员权限</h2>
+          <p class="desc">当前会话不是 superadmin，真实路由会执行 <code>next({ name: 'hermes.chat' })</code>。这里展示被拦截时用户本应看到的状态。</p>
+          <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap">
+            <span class="gate-code">meta.requiresSuperAdmin: true</span>
+            <span class="gate-code">isStoredSuperAdmin() → false</span>
+          </div>
+          <button class="btn btn-ghost" data-od-id="gate-back">回到对话台</button>
+        </div>
+      </div>`);
+  }
+
+  /* ═══ 渲染注册表：27 个组件 + 3 个说明屏 ═══════════════════════════ */
+  const RENDER = {
+    "/": renderLogin,
+    "/hermes-missing": renderMissing,
+    "/hermes/chat": renderChat,
+    "/hermes/history": renderHistory,
+    "/hermes/global-agent": renderGlobalAgent,
+    "/hermes/group-chat": renderGroupChat,
+    "/hermes/jobs": renderJobs,
+    "/hermes/kanban": renderKanban,
+    "/hermes/workflow": renderWorkflow,
+    "/hermes/channels": renderChannels,
+    "/hermes/skills": renderSkills,
+    "/hermes/plugins": renderPlugins,
+    "/hermes/mcp": renderMcp,
+    "/hermes/petdex": renderPetdex,
+    "/hermes/memory": renderMemory,
+    "/hermes/models": renderModels,
+    "/hermes/logs": renderLogs,
+    "/hermes/usage": renderUsage,
+    "/hermes/performance": renderPerformance,
+    "/hermes/journey": renderJourney,
+    "/hermes/skills-usage": renderSkillsUsage,
+    "/hermes/version-preview": renderVersionPreview,
+    "/hermes/devices": renderDevices,
+    "/hermes/profiles": renderProfiles,
+    "/hermes/settings": renderSettings,
+    "/hermes/terminal": renderTerminal,
+    "/hermes/files": renderFiles,
+    "@/routeMap": renderRouteMap,
+    "@/tokens": renderTokens,
+    "@/landing": renderLanding,
+  };
+  const RUN_LABEL = {
+    "/hermes/chat": "运行", "/hermes/kanban": "新建卡片", "/hermes/jobs": "新建任务",
+    "/hermes/settings": "保存设置", "/hermes/usage": "刷新数据", "/hermes/skills": "安装技能",
+    "/hermes/plugins": "安装插件", "/hermes/mcp": "添加服务器", "/hermes/devices": "扫描局域网",
+    "/hermes/profiles": "新建 Profile", "/hermes/terminal": "清屏", "/hermes/workflow": "新建工作流",
+    "/hermes/logs": "导出", "/hermes/performance": "立即采样", "/hermes/models": "添加模型",
+  };
+
+  /* ═══ 侧栏：真实四组 IA ════════════════════════════════════════════ */
+  const navEl = document.getElementById("railNav");
+  const viewport = document.getElementById("viewport");
+
+  function renderNav(q = "") {
+    const ql = q.trim().toLowerCase();
+    const hit = (r) => !ql || (r.p + r.s + r.f + r.n + gname(r.g)).toLowerCase().includes(ql);
+    let html = "";
+    let shown = 0;
+    for (const g of GROUPS) {
+      const rs = ROUTES.filter((r) => r.g === g.id && hit(r));
+      if (!rs.length) continue;
+      shown += rs.length;
+      const primary = rs.filter((r) => !r.param);
+      const params = rs.filter((r) => r.param);
+      html += `<div class="nav-grp" data-od-id="ngrp-${g.id}">
+        <div class="nav-grp-lbl"><span>${g.idx} · ${g.en}</span><span>${rs.length}</span></div>
+        ${primary.map((r) => `<button class="nav-item" data-go="${r.p}" aria-current="${r.p === state.path ? "page" : "false"}" data-od-id="nav-${r.n}">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${ICON[r.p] || ICON[r.of] || "M4 4h16v16H4z"}"/></svg>
+          <span>${r.s}</span><span class="nav-path">${r.p.replace("/hermes/", "/")}</span><span class="nav-count">${r.sa ? "SA" : r.orphan ? "·" : ""}</span>
+        </button>`).join("")}
+        ${params.map((r) => `<button class="nav-item sub" data-go="${r.p}" aria-current="${r.p === state.path ? "page" : "false"}" data-od-id="nav-${r.n}">
+          <span>${r.s}</span><span class="nav-path">:id</span></button>`).join("")}
+      </div>`;
+    }
+    const pub = ROUTES.filter((r) => r.g === "public" && hit(r));
+    if (pub.length) {
+      shown += pub.length;
+      html += `<div class="nav-grp" data-od-id="ngrp-public">
+        <div class="nav-grp-lbl"><span>公开页 · PUBLIC</span><span>${pub.length}</span></div>
+        ${pub.map((r) => `<button class="nav-item" data-go="${r.p}" aria-current="${r.p === state.path ? "page" : "false"}" data-od-id="nav-${r.n}">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${ICON[r.p]}"/></svg>
+          <span>${r.s}</span><span class="nav-count">PUB</span></button>`).join("")}
+      </div>`;
+    }
+    html += `<div class="nav-grp" data-od-id="ngrp-delivery">
+      <div class="nav-grp-lbl"><span>交付说明 · 仅本稿</span><span>3</span></div>
+      ${[["@/routeMap", "路由全景", "M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2"],
+          ["@/tokens", "色彩令牌", "M4 5h16M4 12h10M4 19h7"],
+          ["@/landing", "落地路径", "M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"]]
+        .map(([p, name, d]) => `<button class="nav-item" data-go="${p}" aria-current="${p === state.path ? "page" : "false"}" data-od-id="nav-${p.slice(2)}">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${d}"/></svg>
+          <span>${name}</span></button>`).join("")}
+    </div>`;
+    navEl.innerHTML = html + (shown || !ql ? "" : `<div class="nav-empty" data-od-id="nav-empty">没有匹配 “${esc(q.trim())}” 的路由<br><span class="mono">试试：看板 / mcp / journey / terminal</span></div>`);
+  }
+
+  /* ═══ 路由引擎 ═════════════════════════════════════════════════════ */
+  const KEY = "hermes.cyber.v2.route";
+  const state = { path: null, range: "30", logLevel: "all", lane: "*", mini: false, super: false };
+
+  /* 参数化路由 → 具体 id。原型用固定样例值，让 :param 屏真的能看。 */
+  const PARAM_SAMPLE = {
+    "/hermes/session/:sessionId": "7f3a91",
+    "/hermes/history/session/:sessionId": "7f3a91",
+    "/hermes/global-agent/session/:sessionId": "ga_2e14",
+    "/hermes/group-chat/room/:roomId": "hermes-ops",
+  };
+  const concrete = (p) => p.replace(/:(\w+)/g, (_, k) => PARAM_SAMPLE[p] || "id");
+
+  function resolve(hash) {
+    let h = String(hash || "").replace(/^#/, "");
+    if (!h) h = "/hermes/chat";
+    // 说明屏用 @/ 前缀，不是真实路由 —— 必须先原样查表，否则会被下面的补斜杠改写
+    if (byPath.has(h)) return { key: h, r: byPath.get(h) };
+    const alts = h.startsWith("/") ? [h.slice(1), "/" + h.replace(/^\/+/, "")] : ["/" + h];
+    for (const a of alts) if (byPath.has(a)) return { key: a, r: byPath.get(a) };
+    return { key: h, r: null };
+  }
+
+  function go(path, push = true) {
+    const { key, r } = resolve(path);
+    state.path = key;
+    try { localStorage.setItem(KEY, key); } catch (e) {}
+    if (push && location.hash !== "#" + key) {
+      try { history.pushState(null, "", "#" + key); } catch (e) { location.hash = key; }
+    }
+    render(r, key);
+    renderNav(document.getElementById("navFilter").value);
+    if (window.matchMedia("(max-width: 920px)").matches) closeDrawer();
+  }
+
+  function render(r, key) {
+    const isPublic = key === "/" || key === "/hermes-missing";
+    document.querySelector(".rail").style.display = isPublic ? "none" : "";
+    // 参数化路由复用父组件的渲染器：/hermes/session/:id 与 /hermes/chat 是同一个组件
+    const fn = RENDER[key] || (r && r.of ? RENDER[r.of] : null);
+    if (r && r.sa && !state.super) {
+      viewport.innerHTML = renderGate(r);
+    } else if (fn) {
+      viewport.innerHTML = fn();
+    } else {
+      viewport.innerHTML = `<section class="view"><div class="gate">
+        <div class="gate-mark"><span class="mono">404</span></div>
+        <div style="display:grid;gap:8px;max-width:44ch">
+          <h2 style="font-size:19px">这条路由不在原型覆盖范围内</h2>
+          <p class="desc">原型的 hash 只能是这 31 条之一，或者三个交付说明屏。</p>
+          <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap">
+            <span class="gate-code">${esc(key)}</span>
+          </div>
+          <button class="btn btn-ghost" data-od-id="nf-back">回到对话台</button>
+        </div></div></section>`;
+    }
+    viewport.scrollTop = 0;
+    const label = r ? r.s : "未匹配";
+    const isNote = key.startsWith("@/");
+    document.getElementById("crumbGrp").textContent = isNote ? "交付说明" : r ? gname(r.g) : "—";
+    document.getElementById("crumbRoute").textContent = isNote ? key.slice(2) : concrete(key);
+    document.getElementById("crumbView").textContent = isNote ? "本稿文档 · 非产品界面" : r ? r.f : "—";
+    document.getElementById("crumbSec").textContent = r && r.sa ? (state.super ? "SUPERADMIN" : "需 superadmin") : "";
+    document.getElementById("btnRun").textContent = RUN_LABEL[key] || (key.startsWith("@/") ? "查看" : "运行");
+  }
+
+
+  /* ═══ 交互绑定 ═════════════════════════════════════════════════════ */
+
+  /* 对话流式输出 */
+  const REPLY = "收到。我先看一下 `kanban.list` 的返回，确认 stale 的判定阈值到底是 14 天还是 30 天 —— 这两个口径会决定归档范围差多少张。稍等。";
+  function streamReply(thread, dock) {
+    const wrap = document.createElement("div");
+    wrap.className = "msg"; wrap.dataset.odId = "msg-stream";
+    wrap.innerHTML = `<div class="msg-who">AGENT</div><div class="msg-bubble"><span id="typing"></span><span class="caret"></span></div>`;
+    thread.appendChild(wrap);
+    const t = document.getElementById("typing");
+    let i = 0;
+    const tick = setInterval(() => {
+      i += 1;
+      t.textContent = REPLY.slice(0, i);
+      thread.scrollTop = thread.scrollHeight;
+      if (i >= REPLY.length) {
+        clearInterval(tick);
+        t.innerHTML = REPLY.replace(/`([^`]+)`/g, "<code>$1</code>");
+        const c = wrap.querySelector(".caret"); if (c) c.remove();
+        const btn = dock.querySelector("#btnSend"); if (btn) { btn.disabled = false; btn.textContent = "发送"; }
+      }
+    }, 22);
+  }
+
+  /* 看板筛选 */
+  function bindKanban() {
+    const board = document.getElementById("board");
+    if (!board) return;
+    const more = document.getElementById("boardMore");
+    const vp = document.getElementById("viewport");
+    if (more && vp) {
+      const sync = () => { more.hidden = board.getBoundingClientRect().bottom <= vp.getBoundingClientRect().bottom; };
+      more.addEventListener("click", () => vp.scrollBy({ top: 260, behavior: "smooth" }));
+      vp.addEventListener("scroll", sync, { passive: true });
+      sync();
+    }
+    document.querySelectorAll("[data-lane]").forEach((b) => b.addEventListener("click", () => {
+      const lane = b.dataset.lane;
+      state.lane = lane;
+      document.querySelectorAll("[data-lane]").forEach((x) => {
+        const on = x.dataset.lane === lane;
+        x.setAttribute("aria-current", on ? "true" : "false");
+      });
+      board.querySelectorAll(".lane").forEach((L) => {
+        const empty = lane !== "*" && L.dataset.laneK !== lane;
+        L.style.display = empty ? "none" : "";
+      });
+      const n = board.querySelectorAll('.tcard').length;
+      const vis = [...board.querySelectorAll(".lane")].filter((L) => L.style.display !== "none").length;
+      const hd = document.querySelector('[data-od-id="panel-kanban"] .panel-hd .meta');
+      if (hd) hd.textContent = lane === "*" ? `${n} 张 · 9 列` : `${lane} · ${vis} 列`;
+    }));
+  }
+
+  /* 用量区间切换 */
+  const KPI_BY_RANGE = {
+    "7": [["总 tokens", "284K"], ["调用次数", "812"], ["预估成本", "¥ 14.20"], ["平均延迟", "698ms"]],
+    "30": [["总 tokens", "1.24M"], ["调用次数", "3,418"], ["预估成本", "¥ 62.40"], ["平均延迟", "742ms"]],
+    "90": [["总 tokens", "3.71M"], ["调用次数", "10,204"], ["预估成本", "¥ 187.10"], ["平均延迟", "765ms"]],
+  };
+  function bindUsage() {
+    document.querySelectorAll("[data-range]").forEach((b) => b.addEventListener("click", () => {
+      const k = b.dataset.range;
+      state.range = k;
+      document.querySelectorAll("[data-range]").forEach((x) => {
+        const on = x === b;
+        x.setAttribute("aria-current", on ? "true" : "false");
+        x.style.color = on ? "var(--accent)" : "";
+        x.style.borderColor = on ? "color-mix(in oklch, var(--accent) 50%, transparent)" : "";
+      });
+      const src = USAGE_SERIES[k];
+      const data = src.map((v, i) => ({ l: k === "90" ? `W-${src.length - i}` : `D-${src.length - i}`, v }));
+      const wrap = document.querySelector('[data-od-id="usage-chart"]');
+      if (wrap) wrap.innerHTML = bars(data, { h: 150 });
+      document.querySelectorAll("[data-od-id^='kpi-']").forEach((n, i) => {
+        const v = KPI_BY_RANGE[k][i]; if (!v) return;
+        n.querySelector(".kpi-l").textContent = v[0];
+        n.querySelector(".kpi-n").textContent = v[1];
+      });
+      const hd = document.querySelector('[data-od-id="panel-usage"] .panel-hd .meta');
+      if (hd) hd.textContent = k === "90" ? `近 90 天 · 按周聚合 ${data.length} 个点` : `近 ${k} 天 · 每日 ${data.length} 个点`;
+    }));
+  }
+
+  /* 日志级别过滤 */
+  function bindLogs() {
+    const list = document.getElementById("logList");
+    if (!list) return;
+    const all = [...list.children];
+    document.querySelectorAll("[data-lev]").forEach((b) => b.addEventListener("click", () => {
+      const lv = b.dataset.lev;
+      state.logLevel = lv;
+      document.querySelectorAll("[data-lev]").forEach((x) => {
+        const on = x === b;
+        x.setAttribute("aria-current", on ? "true" : "false");
+        x.style.color = on ? "var(--accent)" : "";
+        x.style.borderColor = on ? "color-mix(in oklch, var(--accent) 50%, transparent)" : "";
+      });
+      let n = 0;
+      all.forEach((row) => {
+        const hit = lv === "all" || row.querySelector(".tag").textContent === lv;
+        row.style.display = hit ? "" : "none";
+        if (hit) n++;
+      });
+      const hd = document.querySelector('[data-od-id="log-split"] .split-r .meta');
+      if (hd) hd.textContent = `${lv === "all" ? "全部" : lv} · ${n} 条`;
+    }));
+  }
+
+  /* 终端 */
+  function bindTerminal() {
+    const inp = document.getElementById("termCmd");
+    const out = document.getElementById("termOut");
+    if (!inp || !out) return;
+    inp.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter") return;
+      const cmd = inp.value.trim();
+      if (!cmd) return;
+      const line = document.createElement("div");
+      line.className = "logline";
+      line.innerHTML = `<span class="mono" style="color:var(--accent)">$</span><span class="ltext"> ${esc(cmd)}</span>`;
+      out.insertBefore(line, out.lastElementChild);
+      const res = document.createElement("div");
+      res.className = "logline";
+      res.innerHTML = `<span class="ltext" style="color:var(--muted)">${esc(
+        cmd.startsWith("hermes") ? "OK · running (pid 44120)"
+        : cmd.startsWith("docker") ? "hermes-agent · Up 6 days\nhermes-webui · Up 6 days\nhindsight · Up 6 days"
+        : cmd.startsWith("whoami") ? "hermes"
+        : `bash: ${cmd.split(" ")[0]}: command not found`
+      )}</span>`;
+      res.querySelector(".ltext").style.whiteSpace = "pre-wrap";
+      out.insertBefore(res, out.lastElementChild);
+      inp.value = "";
+      out.scrollTop = out.scrollHeight;
+    });
+  }
+
+  /* 列表选择 */
+  function bindRows() {
+    document.querySelectorAll(".side-scroll, .split-l").forEach((box) => {
+      box.querySelectorAll(".row-i, .sess").forEach((b) => {
+        b.addEventListener("click", () => {
+          const sibs = [...b.parentElement.children].filter((x) => x.classList.contains("row-i") || x.classList.contains("sess"));
+          sibs.forEach((x) => x.setAttribute("aria-current", x === b ? "true" : "false"));
+        });
+      });
+    });
+  }
+
+  /* 开关 */
+  function bindSwitches() {
+    document.querySelectorAll("[data-sw]").forEach((b) => b.addEventListener("click", () => {
+      const on = b.getAttribute("aria-checked") === "true";
+      b.setAttribute("aria-checked", on ? "false" : "true");
+    }));
+  }
+
+  /* 路由全景表点击直达 */
+  function bindRouteMap() {
+    document.querySelectorAll("[data-goto]").forEach((tr) => tr.addEventListener("click", () => go(tr.dataset.goto)));
+  }
+
+  function bindAll() {
+    bindKanban(); bindUsage(); bindLogs(); bindTerminal();
+    bindRows(); bindSwitches(); bindRouteMap();
+
+    const composer = document.getElementById("composer");
+    const send = document.getElementById("btnSend");
+    if (composer && send) {
+      const doSend = () => {
+        const v = composer.value.trim();
+        if (!v) return;
+        const thread = document.getElementById("thread");
+        const bub = document.createElement("div");
+        bub.className = "msg user";
+        bub.innerHTML = `<div class="msg-who">YOU</div><div class="msg-bubble">${esc(v).replace(/`([^`]+)`/g, "<code>$1</code>")}</div>`;
+        thread.appendChild(bub);
+        composer.value = "";
+        thread.scrollTop = thread.scrollHeight;
+        send.disabled = true; send.textContent = "生成中…";
+        streamReply(thread, send.closest(".dock"));
+      };
+      send.addEventListener("click", doSend);
+      composer.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); doSend(); }
+      });
+    }
+    const gateBack = document.querySelector('[data-od-id="gate-back"], [data-od-id="nf-back"]');
+    if (gateBack) gateBack.addEventListener("click", () => go("/hermes/chat"));
+    document.querySelector('[data-od-id="rm-copy"]')?.addEventListener("click", async () => {
+      const txt = ROUTES.map((r) => `${r.p}\t${r.n}\t${r.f}`).join("\n");
+      try { await navigator.clipboard.writeText(txt); } catch (e) {}
+    });
+    document.getElementById("btnRun")?.addEventListener("click", () => {});
+    document.querySelector('[data-od-id="tm-clear"]')?.addEventListener("click", (e) => {
+      const out = document.getElementById("termOut");
+      if (out) out.innerHTML = `<div class="logline"><span class="mono" style="color:var(--accent)">$</span><span style="display:inline-block;width:8px;height:14px;background:var(--accent);vertical-align:middle"></span></div>`;
+    });
+  }
+
+  /* ═══ 抽屉 / 折叠 / 键盘 ═══════════════════════════════════════════ */
+  const shell = document.getElementById("shell");
+  const openDrawer = () => { shell.dataset.open = "1"; document.getElementById("railToggle").setAttribute("aria-expanded", "true"); };
+  const closeDrawer = () => { shell.dataset.open = "0"; document.getElementById("railToggle").setAttribute("aria-expanded", "false"); };
+
+  document.getElementById("railToggle").addEventListener("click", () => {
+    if (window.matchMedia("(max-width: 920px)").matches) {
+      shell.dataset.open === "1" ? closeDrawer() : openDrawer();
+    } else {
+      state.mini = !state.mini;
+      shell.dataset.mini = state.mini ? "1" : "0";
+    }
+  });
+  document.addEventListener("click", (e) => {
+    if (!window.matchMedia("(max-width: 920px)").matches) return;
+    if (shell.dataset.open !== "1") return;
+    if (e.target.closest(".rail") || e.target.closest("#railToggle")) return;
+    closeDrawer();
+  });
+  document.getElementById("navFilter").addEventListener("input", (e) => renderNav(e.target.value));
+
+  document.getElementById("btnMap").addEventListener("click", () => go("@/routeMap"));
+  const saBtn = document.getElementById("btnSA");
+  saBtn.addEventListener("click", () => {
+    state.super = !state.super;
+    saBtn.setAttribute("aria-pressed", state.super ? "true" : "false");
+    saBtn.textContent = "SA 预览：" + (state.super ? "开" : "关");
+    saBtn.style.color = state.super ? "var(--warn)" : "";
+    saBtn.style.borderColor = state.super ? "color-mix(in oklch, var(--warn) 52%, transparent)" : "";
+    const { r, key } = resolve(location.hash);
+    render(r, key);
+    renderNav(document.getElementById("navFilter").value);
+  });
+  document.getElementById("btnPrev").addEventListener("click", () => {
+    const list = [...ROUTES.filter((r) => !r.param), ...ROUTES.filter((r) => r.param)].map((r) => r.p);
+    const i = list.indexOf(state.path);
+    go(list[(i - 1 + list.length) % list.length]);
+  });
+  document.getElementById("btnNext").addEventListener("click", () => {
+    const list = [...ROUTES.filter((r) => !r.param), ...ROUTES.filter((r) => r.param)].map((r) => r.p);
+    const i = list.indexOf(state.path);
+    go(list[(i + 1) % list.length]);
+  });
+
+  navEl.addEventListener("click", (e) => {
+    const b = e.target.closest("[data-go]");
+    if (b) go(b.dataset.go);
+  });
+  window.addEventListener("popstate", () => { const { r, key } = resolve(location.hash); state.path = key; render(r, key); renderNav(document.getElementById("navFilter").value); });
+  window.addEventListener("hashchange", () => { const { r, key } = resolve(location.hash); if (key !== state.path) { state.path = key; render(r, key); renderNav(document.getElementById("navFilter").value); } });
+  document.addEventListener("keydown", (e) => {
+    if (e.target.matches("input, textarea")) return;
+    if (e.key === "ArrowLeft" && e.altKey) document.getElementById("btnPrev").click();
+    if (e.key === "ArrowRight" && e.altKey) document.getElementById("btnNext").click();
+  });
+
+  /* ═══ 启动 ═════════════════════════════════════════════════════════ */
+  (function boot() {
+    const origGo = go;
+    const start = location.hash ? location.hash.replace(/^#/, "") : (localStorage.getItem(KEY) || "/hermes/chat");
+    go(start, false);
+    renderNav("");
+    // bindAll 需要在 innerHTML 写入之后
+    const _render = render;
+    window.__rebind = bindAll;
+  })();
+
+  /* 每次 render 后重绑（用 MutationObserver 避免重复包装） */
+  const rebind = () => { try { bindAll(); } catch (e) { console.error(e); } };
+  new MutationObserver(rebind).observe(viewport, { childList: true });
+  rebind();
+})();
+</script>
+</body>
+</html>
diff --git a/scripts/harness-check.mjs b/scripts/harness-check.mjs
index 102db05..7987aae 100644
--- a/scripts/harness-check.mjs
+++ b/scripts/harness-check.mjs
@@ -245,6 +245,71 @@ if (!buildWorkflow.includes('fetch-depth: 0')) {
   fail('Build workflow checkout must use fetch-depth: 0 so harness:check can inspect PR diffs')
 }
 
+// node-pty 的原生模块必须被编译出来。
+//
+// `npm ci --ignore-scripts` 会跳过所有 install 脚本，而 node-pty 的 install
+// 脚本正是把可加载的原生模块放到位的那个。少了它，终端功能会被静默禁用 ——
+// 服务端只打一条 warning 就继续跑，不会有任何失败信号。Linux 上 node-pty
+// 不发预编译产物，必须从源码编译，这一步是硬需求。
+//
+// 判据是「这个 workflow 是否真的需要原生模块」，不是「是否出现 npm ci」：
+//   * 跑测试或构建的 workflow —— 终端路由会被加载，少了原生模块就有问题；
+//   * 打包 node_modules 交付给用户的 workflow —— 交付物里必须带着能用的
+//     原生模块，否则用户装完发现终端功能是坏的。
+// npm-lockfile-check 只校验 lockfile 同步，不碰运行时，不需要这一步。
+const WORKFLOWS_NEEDING_NATIVE_MODULES = ['npm run test', 'npm run build', 'npm run test:e2e', 'npm prune']
+for (const workflowFile of await readdir(path.join(root, '.github/workflows'))) {
+  if (!workflowFile.endsWith('.yml') && !workflowFile.endsWith('.yaml')) continue
+  const relativeWorkflow = `.github/workflows/${workflowFile}`
+  const text = await readText(relativeWorkflow)
+  if (!text.includes('npm ci --ignore-scripts')) continue
+  const needsNativeModule = WORKFLOWS_NEEDING_NATIVE_MODULES.some(command => text.includes(command))
+  if (!needsNativeModule) continue
+  if (!text.includes('npm rebuild node-pty')) {
+    fail(
+      [
+        `${relativeWorkflow} installs dependencies with npm ci --ignore-scripts`,
+        'but does not run npm rebuild node-pty.',
+        'node-pty ships no prebuilt binary for Linux, so without the rebuild the',
+        'terminal feature is silently disabled on the runner.',
+      ].join(' '),
+    )
+  }
+}
+
+// macOS 没有被任何托管 runner 覆盖：Build 与 Playwright workflow 都跑在
+// ubuntu-latest 上。macOS 的验证必须以手动触发的方式存在，且不能挂在
+// 主流水线里 —— 没有 macOS runner 时，job 会永远停在等待状态，把整个
+// workflow 拖成 in progress。
+const macosWorkflowPath = '.github/workflows/macos-verification.yml'
+if (!existsSync(path.join(root, macosWorkflowPath))) {
+  fail(`Missing macOS verification workflow: ${macosWorkflowPath}`)
+} else {
+  const macosWorkflow = await readText(macosWorkflowPath)
+  if (!macosWorkflow.includes('workflow_dispatch')) {
+    fail('macOS verification workflow must be workflow_dispatch only: without a hosted macOS runner it would block the pipeline')
+  }
+  if (/^\s*push:/m.test(macosWorkflow) || /^\s*pull_request:/m.test(macosWorkflow)) {
+    fail('macOS verification workflow must not run on push or pull_request: no hosted macOS runner is available')
+  }
+  if (!macosWorkflow.includes('npm run harness:check')) {
+    fail('macOS verification workflow must run npm run harness:check')
+  }
+}
+
+// DEVELOPMENT.md 是新贡献者拿到跨平台仓库后的第一份指引。如果它漏了
+// node-pty 的编译步骤（Linux 上是硬需求），他们照着走会得到一个终端功能
+// 静默失效的环境，而且没有任何报错。
+const developmentDoc = await readText('DEVELOPMENT.md')
+for (const phrase of [
+  'npm rebuild node-pty',
+  'npm ci --ignore-scripts',
+]) {
+  if (!developmentDoc.includes(phrase)) {
+    fail(`DEVELOPMENT.md must document: ${phrase}`)
+  }
+}
+
 const chatSessionsDoc = await readText('docs/cli-chat-sessions.md')
 for (const phrase of [
   '最后重建时间',
diff --git a/tests/client/chart-palette-sync.test.ts b/tests/client/chart-palette-sync.test.ts
new file mode 100644
index 0000000..2dfe008
--- /dev/null
+++ b/tests/client/chart-palette-sync.test.ts
@@ -0,0 +1,56 @@
+import { readFileSync } from 'fs'
+import { describe, expect, it } from 'vitest'
+import {
+  CHART_CATEGORICAL,
+  CHART_MEMORY,
+  CHART_OTHER,
+  CHART_SERIES,
+  readChartColor,
+} from '../../packages/client/src/styles/chart-palette'
+
+const readClientFile = (path: string) => readFileSync(`packages/client/src/${path}`, 'utf8')
+
+function scssVar(source: string, name: string): string {
+  const match = source.match(new RegExp(`\\$${name}:\\s*(#[0-9a-fA-F]{6});`))
+  if (!match) throw new Error(`missing SCSS variable $${name}`)
+  return match[1].toLowerCase()
+}
+
+describe('chart palette single source', () => {
+  const scss = readClientFile('styles/chart-colors.scss')
+
+  it('keeps the TS series colors in sync with SCSS', () => {
+    expect(CHART_SERIES.input).toBe(scssVar(scss, 'chart-input'))
+    expect(CHART_SERIES.output).toBe(scssVar(scss, 'chart-output'))
+    expect(CHART_SERIES.cache).toBe(scssVar(scss, 'chart-cache'))
+  })
+
+  it('keeps all 12 categorical colors in sync with SCSS', () => {
+    CHART_CATEGORICAL.forEach((color, index) => {
+      expect(color.toLowerCase()).toBe(scssVar(scss, `chart-cat-${index + 1}`))
+    })
+  })
+
+  it('keeps the neutral colors in sync with SCSS', () => {
+    expect(CHART_OTHER.toLowerCase()).toBe(scssVar(scss, 'chart-other'))
+    expect(CHART_MEMORY.toLowerCase()).toBe(scssVar(scss, 'chart-memory'))
+  })
+
+  it('resolves categorical colors by index with wraparound', () => {
+    expect(readChartColor(0)).toBe(CHART_CATEGORICAL[0])
+    expect(readChartColor(CHART_CATEGORICAL.length)).toBe(CHART_CATEGORICAL[0])
+    expect(readChartColor(Number.NaN)).toBe(CHART_OTHER)
+  })
+
+  it('keeps palette definitions out of consumer files', () => {
+    // 色板只允许出现在 chart-colors.scss / chart-palette.ts，消费方一律引用。
+    for (const path of [
+      'stores/hermes/usage.ts',
+      'views/hermes/SkillsUsageView.vue',
+      'views/hermes/JourneyView.vue',
+    ]) {
+      const hexes = readClientFile(path).match(/#[0-9a-fA-F]{6}\b/g) ?? []
+      expect(hexes, `${path} 不应再定义图表色`).toHaveLength(0)
+    }
+  })
+})
diff --git a/tests/client/fixtures/script-setup-let-assignment.vue b/tests/client/fixtures/script-setup-let-assignment.vue
new file mode 100644
index 0000000..12e9d87
--- /dev/null
+++ b/tests/client/fixtures/script-setup-let-assignment.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// 测试夹具：验证 <script setup> 的 let 绑定在模板内联语句里能否写回。
+// 与 McpManagerView.vue 的 `_autoRetryCount` 同一形态。
+let counter = 0
+const observed: number[] = []
+
+function bump() {
+  counter++
+  observed.push(counter)
+}
+
+function read() {
+  observed.push(counter)
+}
+</script>
+
+<template>
+  <button class="bump" @click="bump()">bump</button>
+  <!-- 先把 counter 推到非 0，再内联复位后读取 —— 这样「复位是否生效」才有区分度 -->
+  <button class="reset-read" @click="counter = 0; read()">reset+read</button>
+</template>
diff --git a/tests/client/model-selector-provider-sync.test.ts b/tests/client/model-selector-provider-sync.test.ts
new file mode 100644
index 0000000..696a1a7
--- /dev/null
+++ b/tests/client/model-selector-provider-sync.test.ts
@@ -0,0 +1,51 @@
+import { readFileSync } from 'fs'
+import { describe, expect, it } from 'vitest'
+
+const readClientFile = (path: string) => readFileSync(`packages/client/src/${path}`, 'utf8')
+
+// 从 `computed(` 的左括号开始做括号配平，精确切出这个表达式的范围。
+// 用空行切分不行：箭头函数写成单行后，紧邻的下一个顶层声明只隔一个空行。
+function balancedBlock(source: string, header: string): string {
+  const start = source.indexOf(header)
+  expect(start, `${header} not found`).toBeGreaterThan(-1)
+
+  let depth = 0
+  for (let i = start + header.length - 1; i < source.length; i += 1) {
+    if (source[i] === '(') depth += 1
+    if (source[i] === ')') {
+      depth -= 1
+      if (depth === 0) return source.slice(start, i + 1)
+    }
+  }
+  return source.slice(start)
+}
+
+// known-issues #1: `providerOptions` 的 computed getter 内部给 customProvider
+// 赋值。用户手动挑好的 provider 会被下一次 getter 重算无声改回去，表现为
+// 「自己跳」。修法是把同步移进 watch，让 getter 恢复成纯读。
+describe('ModelSelector provider selection', () => {
+  it('keeps the providerOptions getter free of side effects', () => {
+    const source = readClientFile('components/layout/ModelSelector.vue')
+    const block = balancedBlock(source, 'const providerOptions = computed(')
+
+    expect(block).not.toContain('customProvider.value =')
+  })
+
+  it('syncs customProvider from the store through a watch', () => {
+    const source = readClientFile('components/layout/ModelSelector.vue')
+    const block = balancedBlock(source, 'watch(')
+
+    // 同步点必须挂在 selectedProvider 上，而不是挂在 providerOptions 上 ——
+    // 后者等于把同一个副作用换个地方写一遍。
+    expect(block.slice(0, 200)).toContain('appStore.selectedProvider')
+    expect(block).toContain('customProvider.value =')
+  })
+
+  it('still initialises the provider when the picker opens', () => {
+    // watch 是懒的：不会在初始渲染时触发。openModal 的这一次赋值是首帧
+    // 唯一来源，不能跟着一起去掉。
+    const source = readClientFile('components/layout/ModelSelector.vue')
+
+    expect(source).toMatch(/function openModal\(\)[\s\S]*?customProvider\.value = appStore\.selectedProvider/)
+  })
+})
diff --git a/tests/client/profile-card-config-edit.test.ts b/tests/client/profile-card-config-edit.test.ts
index f53e899..db6d31e 100644
--- a/tests/client/profile-card-config-edit.test.ts
+++ b/tests/client/profile-card-config-edit.test.ts
@@ -30,7 +30,7 @@ import ProfileCard from '@/components/hermes/profiles/ProfileCard.vue'
 
 function actionButton(wrapper: any, text: string) {
   const button = wrapper
-    .findAll('.card-actions button')
+    .findAll('.cy-panel-actions button')
     .find((node: any) => node.text().trim() === text)
   if (!button) throw new Error(`no card action labelled "${text}"`)
   return button
diff --git a/tests/client/provider-card-built-in-action.test.ts b/tests/client/provider-card-built-in-action.test.ts
index b11a1bc..de0bb7c 100644
--- a/tests/client/provider-card-built-in-action.test.ts
+++ b/tests/client/provider-card-built-in-action.test.ts
@@ -337,9 +337,9 @@ describe('ProviderCard built-in destructive action labels', () => {
     }))
 
     expect(wrapper.findAll('.model-row')).toHaveLength(0)
-    expect(wrapper.findAll('.model-tag-button')).toHaveLength(20)
-    expect(wrapper.findAll('.model-tag-button')[0].text()).toContain('model-099')
-    expect(wrapper.findAll('.model-tag-button')[0].text()).toContain('Default')
+    expect(wrapper.findAll('.model-tag')).toHaveLength(20)
+    expect(wrapper.findAll('.model-tag')[0].text()).toContain('model-099')
+    expect(wrapper.findAll('.model-tag')[0].text()).toContain('Default')
     expect(wrapper.text()).toContain('+80 more')
     expect(wrapper.findAll('select')).toHaveLength(1)
     expect(wrapper.findAll('button').some(button => button.text() === 'Set default')).toBe(false)
diff --git a/tests/client/script-setup-let-assignment.test.ts b/tests/client/script-setup-let-assignment.test.ts
new file mode 100644
index 0000000..f75b25e
--- /dev/null
+++ b/tests/client/script-setup-let-assignment.test.ts
@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Fixture from './fixtures/script-setup-let-assignment.vue'
+
+/**
+ * 验证 `<script setup>` 里的 `let` 绑定在模板内联语句里到底能不能写。
+ *
+ * known-issues #3 认为「编译只对 ref 做解包，let 绑定在模板内联语句里不可写，
+ * 这个重置很可能不生效」。这个结论需要运行时证据，不能只靠读编译产物 ——
+ * compileScript 会为 `setup-let` 绑定生成一对 getter/setter 放进 __returned__，
+ * 模板里的 `$setup.x = v` 走 setter，会写回闭包变量。
+ *
+ * 判据必须有区分度：先把 counter 推到非 0，再内联复位后读取。
+ * 若复位不生效，读到的是 1；复位生效则读到 0。
+ */
+describe('script setup let binding assignment', () => {
+  it('resets the counter before the follow-up call reads it', async () => {
+    const wrapper = mount(Fixture)
+
+    await wrapper.find('.bump').trigger('click')
+    expect((wrapper.vm as any).observed).toEqual([1])
+
+    await wrapper.find('.reset-read').trigger('click')
+
+    // 内联赋值先把 counter 置 0，read() 再读到它 —— 读到 0 说明赋值确实生效
+    expect((wrapper.vm as any).observed).toEqual([1, 0])
+  })
+})
diff --git a/tests/client/style-system.test.ts b/tests/client/style-system.test.ts
index ba308ac..a5b611f 100644
--- a/tests/client/style-system.test.ts
+++ b/tests/client/style-system.test.ts
@@ -1,8 +1,18 @@
-import { readFileSync } from 'fs'
+import { readdirSync, readFileSync, statSync } from 'fs'
+import { join } from 'path'
 import { describe, expect, it } from 'vitest'
 
 const readClientFile = (path: string) => readFileSync(`packages/client/src/${path}`, 'utf8')
 
+const walk = (dir: string, out: string[] = []): string[] => {
+  for (const name of readdirSync(dir)) {
+    const full = join(dir, name)
+    if (statSync(full).isDirectory()) walk(full, out)
+    else if (/\.vue$/.test(name)) out.push(full)
+  }
+  return out
+}
+
 describe('client style system', () => {
   it('keeps shared page headers on one layout baseline', () => {
     const globalStyles = readClientFile('styles/global.scss')
@@ -96,4 +106,54 @@ describe('client style system', () => {
     expect(globalStyles).toContain('.arco-input')
     expect(globalStyles).not.toMatch(/\.n-input/)
   })
+
+  it('defines the whole CYBER skeleton class inventory', () => {
+    // 原型里的每个外壳类都必须在 global.scss 有对应实现，否则页面会退回裸布局。
+    const globalStyles = readClientFile('styles/global.scss')
+    const required = [
+      'cy-view', 'cy-panel', 'cy-panel-h', 'cy-panel-b', 'cy-kpis', 'cy-kpi',
+      'cy-kv', 'cy-grid2', 'cy-grid4', 'cy-field', 'cy-tag', 'cy-code',
+      'cy-tabs', 'cy-tab', 'cy-stack', 'cy-sec-t', 'cy-slist-t',
+      'cy-tbl-wrap', 'cy-tbl', 'cy-led', 'cy-meter',
+    ]
+
+    const missing = required.filter(cls => !globalStyles.includes(`.${cls} `))
+    expect(missing, `global.scss 缺少骨架类：${missing.join(', ')}`).toEqual([])
+  })
+
+  it('keeps the CYBER skeleton coverage above the agreed floor', () => {
+    // 覆盖率 = 用到 cy-* 骨架类的视图数 / 全部视图数。
+    // 不用骨架类的页面是有意为之（聊天流、看板、画布等专用布局），
+    // 所以卡一个下限而不是要求 100%，防止新页面裸奔。
+    const viewsDir = 'packages/client/src/views/hermes'
+    const views = walk(viewsDir)
+      .map(p => p.replace(/\\/g, '/'))
+      .filter(p => p.endsWith('.vue'))
+
+    const withSkeleton = views.filter(p =>
+      /class="[^"]*\bcy-(view|panel|kpis|kpi|kv|tabs|tab|grid2|grid4|sec-t|slist-t|tbl|tbl-wrap|meter|led|tag|code|field|stack)\b/.test(
+        readFileSync(p, 'utf8'),
+      ),
+    )
+
+    // 这些页面是专用布局，不用通用骨架：聊天流 / 看板 / 画布 / 终端 / 缺失态。
+    // 它们的视觉由各自的组件与令牌负责，不该被塞进 panel 结构。
+    const intentional = [
+      'ChatView.vue', 'GlobalAgentView.vue', 'GroupChatView.vue',
+      'HermesMissingView.vue', 'KanbanView.vue', 'TerminalView.vue', 'WorkflowView.vue',
+    ]
+
+    const uncovered = views
+      .filter(p => !withSkeleton.includes(p))
+      .map(p => p.split('/').pop()!)
+      .filter(name => !intentional.includes(name))
+
+    expect(uncovered, `这些页面没有 CYBER 骨架类，也不是有意豁免：${uncovered.join(', ')}`).toEqual([])
+
+    const ratio = withSkeleton.length / views.length
+    expect(
+      ratio,
+      `骨架类覆盖率 ${(ratio * 100).toFixed(0)}% 低于下限 60%（${withSkeleton.length}/${views.length}）。`,
+    ).toBeGreaterThanOrEqual(0.6)
+  })
 })
diff --git a/tests/client/style-tokens.test.ts b/tests/client/style-tokens.test.ts
new file mode 100644
index 0000000..f98ec0e
--- /dev/null
+++ b/tests/client/style-tokens.test.ts
@@ -0,0 +1,196 @@
+import { readdirSync, readFileSync, statSync } from 'fs'
+import { join } from 'path'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * CYBER 主题的裸色值护栏（docs/cyber-theme-plan.md §P4）。
+ *
+ * 全项目只允许一处写死颜色：图表色板（docs/ui-baseline.md §7）。
+ * 其余任何地方出现裸 hex / 具名颜色 / 字面量 rgba(0,0,0,...) 都算回退到旧主题，
+ * 一律拦在测试里，而不是等到肉眼看出色差。
+ *
+ * 豁免名单按「为什么能写死」逐条列在 EXEMPT，新增豁免必须同时补理由。
+ */
+
+const SRC_ROOT = 'packages/client/src'
+
+/** 豁免：路径 → 理由。路径用正则匹配，新增必须写明为什么不能走令牌。 */
+const EXEMPT: Array<{ pattern: RegExp; reason: string }> = [
+  // docs/ui-baseline.md §7 唯一授权的硬编码处
+  { pattern: /styles[/\\]chart-colors\.scss$/, reason: '图表色板单一来源（§7 豁免）' },
+  { pattern: /styles[/\\]chart-palette\.ts$/, reason: '图表色板单一来源（§7 豁免）' },
+  // xterm 的 theme 是 JS 对象，必须给字面量；令牌值已按 OKLCH 同源反算并逐行注释
+  { pattern: /utils[/\\]hermes[/\\]terminal-theme\.ts$/, reason: 'xterm 主题预设需字面量，值与令牌同源' },
+  // Arco ConfigProvider 吃的是十六进制字符串，拿不到 CSS 变量
+  { pattern: /styles[/\\]arco-theme\.ts$/, reason: 'Arco ConfigProvider 只接受十六进制' },
+  // 红线：vendor 只做装饰位面，pointer-events: none，不承载信息
+  { pattern: /vendor[/\\]/, reason: 'arkscore vendor 红线：装饰位面，只读不改' },
+  // 语言徽标是品牌识别色（JS 黄 / Python 蓝 / HTML 橙…），换色会认不出语言
+  { pattern: /chat[/\\]MessageItem\.vue$/, reason: '语言徽标为品牌识别色' },
+]
+
+const HEX_RE = /#[0-9a-fA-F]{3,8}\b/
+const NAMED_COLOR_RE =
+  /(?:^|[\s;{(,])(?:background(?:-color)?|color|border(?:-color)?|fill|stroke|outline|box-shadow|text-decoration-color|accent-color)\s*:\s*(?:!important\s*)?(white|black|red|blue|green|yellow|orange|purple|(?:dark|light)?(?:gray|grey)|pink|cyan|magenta|lime|navy|teal|olive|maroon|aqua|fuchsia|silver|gold|brown|coral|salmon|khaki|violet|indigo|crimson|tomato|wheat|tan|beige|ivory|linen|plum|orchid|skyblue|steelblue|slateblue|royalblue|dodgerblue|seagreen|forestgreen|darkgreen|darkblue|darkred|darkorange|darkkhaki|lightblue|lightgreen|lightyellow|lightpink|whitesmoke|ghostwhite|floralwhite|antiquewhite|blanchedalmond|blueviolet|mediumblue|mediumseagreen|mediumslateblue|mediumvioletred|palegreen|paleturquoise|peachpuff|powderblue|rosybrown|sandybrown|thistle|turquoise|azure|ivory|khaki|lavender|linen|mistyrose|moccasin|navajowhite|oldlace|papayawhip|peru|pink|plum|powderblue|red|salmon|sandybrown|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen)\s*[;}!]/i
+const LITERAL_BLACK_RGBA_RE = /rgba?\(\s*0\s*,\s*0\s*,\s*0\s*,/i
+
+/**
+ * 扫描前先剥掉注释与 HTML 实体：
+ *  - 注释里写「之前是 #b42318」是历史说明，不是样式；
+ *  - `&#9662;` 是 HTML 实体（▽），不是颜色。
+ * 只做这两类预处理，不做其它"聪明"过滤，否则护栏会漏掉真问题。
+ *
+ * 逐行处理并保留行号，报错时能直接定位到行。
+ */
+function stripNonCode(source: string): string {
+  let inBlockComment = false
+
+  return source
+    .split(/\r?\n/)
+    .map(raw => {
+      let line = raw
+
+      // 块注释可能跨行：先判断这一行是否在注释里
+      if (inBlockComment) {
+        const end = line.indexOf('*/')
+        if (end === -1) return ' '.repeat(line.length)
+        line = ' '.repeat(end + 2) + line.slice(end + 2)
+      }
+      const blockStart = line.indexOf('/*')
+      if (blockStart !== -1) {
+        const end = line.indexOf('*/', blockStart + 2)
+        if (end === -1) {
+          line = line.slice(0, blockStart)
+          inBlockComment = true
+        } else {
+          line = line.slice(0, blockStart) + ' '.repeat(end - blockStart + 2) + line.slice(end + 2)
+        }
+      }
+
+      // 行注释：// 到行尾。但 http:// 这类 URL 不算，:// 前面不是行首空白时保留。
+      const lineComment = line.search(/(?:^|\s)\/\//)
+      if (lineComment !== -1) {
+        const keep = lineComment + (line[lineComment] === ' ' ? 1 : 0)
+        line = line.slice(0, keep)
+      }
+
+      // HTML 实体：&#9662; 是 ▽ 不是颜色
+      line = line.replace(/&#[0-9a-fA-F]+;/g, ' ')
+
+      return line
+    })
+    .join('\n')
+}
+
+function walk(dir: string, out: string[] = []): string[] {
+  for (const name of readdirSync(dir)) {
+    const full = join(dir, name)
+    if (statSync(full).isDirectory()) {
+      walk(full, out)
+    } else if (/\.(vue|scss|css|ts)$/.test(name)) {
+      out.push(full)
+    }
+  }
+  return out
+}
+
+const isExempt = (path: string) => EXEMPT.some(({ pattern }) => pattern.test(path))
+
+describe('CYBER 裸色值护栏', () => {
+  const files = walk(SRC_ROOT)
+    .map(p => p.replace(/\\/g, '/'))
+    .filter(p => !isExempt(p))
+
+  /** 找出所有命中正则的行，统一格式化成「路径 + 行号 + 内容」。 */
+  const scan = (re: RegExp) =>
+    files.flatMap(path => {
+      const source = stripNonCode(readFileSync(path, 'utf8'))
+      const hits = source
+        .split('\n')
+        .map((line, i) => ({ line: line.trim(), no: i + 1 }))
+        .filter(({ line }) => re.test(line))
+      return hits.length ? [`${path}\n  ${hits.map(h => `${h.no}: ${h.line}`).join('\n  ')}`] : []
+    })
+
+  it('扫得到源文件（护栏本身没失效）', () => {
+    expect(files.length).toBeGreaterThan(100)
+  })
+
+  it('除图表色板外没有裸 hex', () => {
+    expect(scan(HEX_RE), '裸 hex 必须换成令牌（variables.scss）').toEqual([])
+  })
+
+  it('没有具名颜色关键字', () => {
+    expect(scan(NAMED_COLOR_RE), '具名颜色必须换成令牌').toEqual([])
+  })
+
+  it('没有字面量 rgba(0,0,0) 阴影', () => {
+    expect(scan(LITERAL_BLACK_RGBA_RE), '黑色阴影要走 --shadow-* 令牌').toEqual([])
+  })
+
+  it('半透明一律用 RGB 三元组，不写死数值', () => {
+    // rgba(15, 23, 42, ...) 这类：数字三元组是旧主题残留，必须换成
+    // rgba(var(--*-rgb), α)。豁免名单里的文件已在上面几条单独覆盖。
+    const literalRgba = /rgba?\(\s*\d{1,3}\s*,/
+    expect(scan(literalRgba), 'rgba 数字三元组要换成 var(--*-rgb) 三元组').toEqual([])
+  })
+
+  it('护栏本身能抓到真问题（自检）', () => {
+    // 剥注释这一步最容易悄悄失效：改坏了护栏还会一直"通过"。
+    // 这里用已知样本验证检测逻辑本身。
+    const dirty = [
+      'color: #ff0000;',                       // 裸 hex
+      'background: rgba(1, 2, 3, 0.5);',       // 字面量三元组
+      'box-shadow: rgba(0, 0, 0, 0.4);',       // 字面量黑影
+      'color: red;',                           // 具名颜色
+      'background: #0f766e;',                  // 裸 hex
+    ].join('\n')
+
+    const cleaned = stripNonCode(dirty)
+    expect(HEX_RE.test(cleaned)).toBe(true)
+    expect(NAMED_COLOR_RE.test(cleaned)).toBe(true)
+    expect(LITERAL_BLACK_RGBA_RE.test(cleaned)).toBe(true)
+    expect(/rgba?\(\s*\d{1,3}\s*,/.test(cleaned)).toBe(true)
+  })
+
+  it('剥注释不会把真问题也剥掉', () => {
+    const dirty = [
+      '// 注释里的 #ff0000 是历史说明',
+      '/* 块注释里的 #00ff00 也是 */',
+      'color: #0000ff;',
+      'background: rgba(9, 9, 9, 0.3);',
+    ].join('\n')
+
+    const cleaned = stripNonCode(dirty)
+    expect(cleaned).not.toContain('#ff0000')
+    expect(cleaned).not.toContain('#00ff00')
+    expect(cleaned).toContain('#0000ff')
+    expect(cleaned).toContain('rgba(9, 9, 9, 0.3)')
+  })
+
+  it('语言徽标品牌色被锁死（豁免也要有断言）', () => {
+    // MessageItem.vue 整体豁免（语言徽标是品牌识别色），但豁免范围不能悄悄扩大：
+    // 这里把徽标色板逐个锁住，改色必须同时改这里并说明理由。
+    const source = readFileSync('packages/client/src/components/hermes/chat/MessageItem.vue', 'utf8')
+
+    const expected: Record<string, string> = {
+      script: '#f7df1e',   // JS
+      dynamic: '#3776ab',  // Python
+      jvm: '#f0642f',      // Kotlin
+      systems: '#5e63b6',  // C
+      markup: '#e34f26',   // HTML
+      style: '#8b5cf6',    // CSS
+      data: '#64748b',     // SQL
+      doc: '#0f766e',      // YAML
+      shell: '#111827',    // Shell
+      default: '#6b7280',  // 其它
+    }
+
+    for (const [lang, color] of Object.entries(expected)) {
+      expect(
+        source,
+        `语言徽标 ${lang} 的品牌色必须是 ${color}（语言识别色，不参与主题令牌）`,
+      ).toContain(`background: ${color};`)
+    }
+  })
+})
diff --git a/tests/e2e/chat-cyber-semantics.spec.ts b/tests/e2e/chat-cyber-semantics.spec.ts
new file mode 100644
index 0000000..4c08cdd
--- /dev/null
+++ b/tests/e2e/chat-cyber-semantics.spec.ts
@@ -0,0 +1,289 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { join } from 'node:path'
+import { expect, test, type Page } from '@playwright/test'
+import { authenticate, mockChatSocket, mockHermesApi, TEST_ACCESS_KEY } from './fixtures'
+
+// The chat view's CYBER treatment is rendering-layer only, so nothing about it
+// shows up in behavioural assertions — a regression here is invisible until a
+// human opens the page. These tests pin the two things that actually broke
+// before: duplicated keyframes (a structural fault no review reliably catches)
+// and `!important` overrides that flatten the neon tube back to a grey block.
+
+const clientSrc = join(process.cwd(), 'packages', 'client', 'src')
+
+function collectSourceFiles(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry)
+    if (statSync(full).isDirectory()) {
+      collectSourceFiles(full, out)
+    } else if (/\.(vue|scss|css)$/.test(entry)) {
+      out.push(full)
+    }
+  }
+  return out
+}
+
+const styleFiles = collectSourceFiles(clientSrc).map((file) => ({
+  file,
+  text: readFileSync(file, 'utf8'),
+}))
+
+function relative(file: string) {
+  return file.slice(clientSrc.length + 1).replace(/\\/g, '/')
+}
+
+/**
+ * Extract one CSS rule body by brace matching, starting at the selector.
+ * Brace counting is used instead of a newline split because the rules under
+ * test are written both as blocks and as single-line arrow bodies.
+ */
+function balancedBlock(source: string, selector: string): string {
+  const start = source.indexOf(selector)
+  expect(start, `${selector} not found in stylesheet`).toBeGreaterThan(-1)
+
+  const open = source.indexOf('{', start)
+  let depth = 0
+  for (let i = open; i < source.length; i += 1) {
+    if (source[i] === '{') depth += 1
+    if (source[i] === '}') {
+      depth -= 1
+      if (depth === 0) return source.slice(start, i + 1)
+    }
+  }
+  return source.slice(start)
+}
+
+test.describe('chat CYBER semantics', () => {
+  test('live-ring is defined exactly once and only ever uses the success hue', () => {
+    const definitions = styleFiles.filter((entry) => /@keyframes\s+live-ring\b/.test(entry.text))
+    expect(
+      definitions.map((entry) => relative(entry.file)),
+      'live-ring must have a single home; a second copy is how the four-colour cycle came back',
+    ).toEqual(['styles/global.scss'])
+
+    const globalStylesheet = definitions[0].text
+    const block = globalStylesheet.slice(
+      globalStylesheet.indexOf('@keyframes live-ring'),
+      globalStylesheet.indexOf('@keyframes live-ring') + 600,
+    )
+    expect(block).toContain('var(--success-rgb)')
+    // The old cycle was #ff6b6b → #feca57 → #48dbfb → #ff9ff3. Any raw hex in
+    // this keyframe means a multi-hue cycle crept back in.
+    expect(block).not.toMatch(/#[0-9a-f]{3,8}\b/i)
+  })
+
+  test('no component carries its own rainbow-glow keyframes', () => {
+    const offenders = styleFiles
+      .filter((entry) => relative(entry.file) !== 'styles/global.scss')
+      .filter((entry) => /@keyframes\s+rainbow-glow\b/.test(entry.text))
+      .map((entry) => relative(entry.file))
+    expect(offenders).toEqual([])
+  })
+
+  test('every live-ring call site lives under a scoped style block', () => {
+    const callSites = styleFiles.filter((entry) => /animation:\s*live-ring\b/.test(entry.text))
+    expect(callSites.map((entry) => relative(entry.file)).sort()).toEqual([
+      'components/hermes/chat/MessageItem.vue',
+      'components/hermes/chat/SessionListItem.vue',
+      'components/hermes/group-chat/GroupMessageItem.vue',
+      // 工作流列表里流式运行中的头像外圈。它原本是自写的一套红色光环 +
+      // hue-rotate 动画 —— 色相在转，形态却和会话列表的「机器在动」对不上，
+      // 同一语义长出两种样子。现在收敛到同一个 live-ring。
+      'views/hermes/WorkflowView.vue',
+    ])
+  })
+
+  test('the send button is not flattened by an !important override', () => {
+    const offenders = styleFiles
+      .filter((entry) => /\.send-button\b/.test(entry.text))
+      .filter((entry) => /box-shadow:\s*none\s*!important|border:\s*0\s*!important/.test(entry.text))
+      .map((entry) => relative(entry.file))
+    expect(offenders).toEqual([])
+  })
+
+  test('the stop control reaches for the warning token, not the accent', () => {
+    // The colour semantics are pinned here rather than in the browser because
+    // rendering cannot answer the question: the palette declares each hue twice
+    // (an OKLCH value and an RGB triple for alpha composition) and the two
+    // forms sit ~30° apart, so any rendered-value comparison is unreliable.
+    // A stylesheet, on the other hand, states plainly which token it used.
+    const stopBlock = balancedBlock(
+      styleFiles.find((entry) => relative(entry.file) === 'components/hermes/chat/ChatInput.vue')?.text ?? '',
+      '.send-button.send-button--stop',
+    )
+    expect(stopBlock).toContain('rgba(var(--warning-rgb)')
+    expect(stopBlock).not.toContain('accent-primary')
+  })
+})
+
+async function computedOf(page: Page, selector: string, properties: string[]) {
+  return page.evaluate(
+    ({ sel, props }) => {
+      const el = document.querySelector(sel)
+      if (!el) return null
+      const cs = getComputedStyle(el)
+      const out: Record<string, string> = {}
+      for (const p of props) out[p] = cs.getPropertyValue(p)
+      return out
+    },
+    { sel: selector, props: properties },
+  )
+}
+
+/**
+ * Resolve a rendered colour to RGB by painting it into a canvas.
+ *
+ * Note on colour assertions: comparing rendered RGB triples against the
+ * palette does not work in this project and the failures say why. The palette
+ * is declared in OKLCH (`--success: oklch(0.860 0.190 128)`) while the
+ * alpha-composited glows are built from a separate RGB triple
+ * (`--success-rgb: 173, 231, 78`). The two declarations are kept in sync now,
+ * but any rendered-vs-token comparison still depends on the browser's OKLCH
+ * conversion and reports brittle mismatches.
+ *
+ * That is why the *colour* semantics are asserted in the source-level tests
+ * above, which can see which token a rule actually references. Here in the
+ * browser the assertions stay on things rendering can answer unambiguously:
+ * which class is active, which keyframe is running, whether a glow exists.
+ */
+async function rgbOf(page: Page, selector: string, property: string): Promise<[number, number, number] | null> {
+  return page.evaluate(
+    ({ sel, prop }) => {
+      const el = document.querySelector(sel)
+      if (!el) return null
+      const value = getComputedStyle(el).getPropertyValue(prop)
+      if (!value || value === 'none') return null
+
+      const canvas = document.createElement('canvas')
+      canvas.width = 1
+      canvas.height = 1
+      const ctx = canvas.getContext('2d')
+      if (!ctx) return null
+      ctx.fillStyle = value
+      ctx.fillRect(0, 0, 1, 1)
+      const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data
+      return [r, g, b]
+    },
+    { sel: selector, prop: property },
+  )
+}
+
+/**
+ * Assert a colour is not one of the greys the old overrides hardcoded.
+ * This is the check that actually catches the regression these tests exist
+ * for: `#9f9f9f` on the send key, or a multi-hue cycle on the live ring.
+ */
+async function expectNotGrey(page: Page, selector: string, property: string, what: string) {
+  const rgb = await rgbOf(page, selector, property)
+  expect(rgb, `${selector} has no ${property} to inspect`).not.toBeNull()
+  const [r, g, b] = rgb as [number, number, number]
+  const spread = Math.max(r, g, b) - Math.min(r, g, b)
+  expect(spread, `${what} is grey rgb(${r},${g},${b}) — the neon treatment was flattened`).toBeGreaterThan(12)
+}
+
+test.describe('chat CYBER rendering', () => {
+  test.beforeEach(async ({ page }) => {
+    await authenticate(page, TEST_ACCESS_KEY, 'research')
+    // A session with a workspace is what makes the header badge render at all
+    // (`v-if="chatStore.activeSession?.workspace"`), and the badge is the
+    // subject of the 900px breakpoint test below.
+    await mockHermesApi(page, {
+      sessions: [{ id: 's-1', title: 'Workspace run', workspace: 'C:/work/demo', updated_at: 0 }],
+    })
+    await mockChatSocket(page)
+    await page.goto('/#/hermes/chat')
+    await expect(page.getByPlaceholder(/Type a message/)).toBeVisible()
+  })
+
+  test('the header carries a connection LED that binds to real socket state', async ({ page }) => {
+    const led = page.locator('.cy-led')
+    await expect(led).toHaveCount(1)
+    await expect(led).toHaveClass(/\bon\b/)
+
+    const style = await computedOf(page, '.cy-led', ['width', 'height', 'border-radius', 'animation-name'])
+    expect(style?.width).toBe('7px')
+    expect(style?.height).toBe('7px')
+    expect(style?.['border-radius']).toBe('50%')
+    // A live connection is the one state allowed to breathe.
+    expect(style?.['animation-name']).toBe('led-breathe')
+    // The `.cy-led.on` rule sets $success (lime). Amber is reserved for "needs
+    // you" and must not appear here; `off` uses $error and stays static.
+    await expectNotGrey(page, '.cy-led', 'background-color', 'a connected LED')
+  })
+
+  test('the send key is a lit tube once there is something to send', async ({ page }) => {
+    const sendButton = page.getByRole('button', { name: 'Send' })
+
+    // Empty input is the disabled state, and the global primary-button rule
+    // deliberately extinguishes the tube there (global.scss `.arco-btn-disabled`).
+    // So the disabled look is asserted first, and the tube is asserted only
+    // after the key becomes actionable.
+    await expect(sendButton).toBeDisabled()
+    const idle = await computedOf(page, '.send-button', ['box-shadow', 'background-color'])
+    expect(idle?.['box-shadow'], 'disabled send key should be dark, not grey-blocked').toBe('none')
+    expect(idle?.['background-color']).toBe('rgba(0, 0, 0, 0)')
+
+    await page.getByPlaceholder(/Type a message/).fill('light the key')
+    await expect(sendButton).toBeEnabled()
+
+    const lit = await computedOf(page, '.send-button', ['box-shadow', 'border-color'])
+    expect(lit?.['box-shadow'], 'send key lost its neon tube').not.toBe('none')
+    // Not the hardcoded #9f9f9f grey the old override used.
+    await expectNotGrey(page, '.send-button', 'border-color', 'the lit send key')
+  })
+
+  test('the stop control turns amber because it needs the user', async ({ page }) => {
+    const input = page.getByPlaceholder(/Type a message/)
+    await input.fill('start a run')
+    await page.getByRole('button', { name: 'Send' }).click()
+
+    // The mocked socket records emits but never acknowledges a run, so the
+    // store only enters the streaming state once run.started comes back.
+    const sessionId = await page.waitForFunction(() => {
+      const state = (window as any).__PW_CHAT_SOCKET__
+      const run = state?.emitted?.find((item: any) => item.event === 'run')
+      return run?.payload?.session_id ?? null
+    }).then((handle) => handle.jsonValue() as Promise<string>)
+
+    await page.evaluate((sid) => {
+      const socket = (window as any).__PW_CHAT_SOCKET__.latest
+      socket.__trigger('run.started', { event: 'run.started', session_id: sid, run_id: 'run-1' })
+      socket.__trigger('message.delta', { event: 'message.delta', session_id: sid, run_id: 'run-1', delta: 'thinking' })
+    }, sessionId)
+
+    const stopButton = page.getByRole('button', { name: 'Stop' })
+    await expect(stopButton).toBeVisible()
+    // The amber treatment lives entirely on this modifier class, so the class
+    // is the assertion. Its hue is pinned at the source level instead, because
+    // the palette declares OKLCH and RGB-triple forms of the same colour that
+    // differ enough to make a rendered comparison unreliable.
+    await expect(page.locator('.send-button')).toHaveClass(/send-button--stop/)
+
+    const style = await computedOf(page, '.send-button', ['box-shadow'])
+    expect(style?.['box-shadow']).not.toBe('none')
+    await expectNotGrey(page, '.send-button', 'border-color', 'the stop control')
+  })
+
+  test('the header press-light is a radial wash rather than an even strip', async ({ page }) => {
+    const background = await computedOf(page, '.chat-header', ['background-image'])
+    expect(background?.['background-image']).toContain('radial-gradient')
+  })
+
+  test('the Outline panel becomes an overlay at 1180px', async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 900 })
+    await page.locator('.header-actions button').nth(1).click()
+    await expect(page.locator('.outline-panel')).toBeVisible()
+    expect((await computedOf(page, '.outline-panel', ['position']))?.position).not.toBe('absolute')
+
+    await page.setViewportSize({ width: 1100, height: 900 })
+    await expect.poll(async () => (await computedOf(page, '.outline-panel', ['position']))?.position).toBe('absolute')
+  })
+
+  test('the workspace badge yields to the title below 900px', async ({ page }) => {
+    const badge = page.locator('.workspace-badge')
+    await expect(badge).toBeVisible()
+
+    await page.setViewportSize({ width: 900, height: 860 })
+    await expect(badge).toBeHidden()
+  })
+})