replace the monochrome theme with the CYBER neon-cyan skin

The project shipped a black-and-white theme that was only half converted:
the login page looked right, the message page was halfway, and the
settings page had not been started. This finishes the move to the CYBER
reference in prototype_reference/.

Colors now come from a single token source (styles/variables.scss), where
every semantic color is declared twice: once as OKLCH for the CSS, and
once as an RGB triple so translucent variants can be built as
rgba(var(--*-rgb), alpha). Cyan is the system itself, amber means the user
has to intervene, green means the machine is working, and red only ever
means something broke. The RGB triples are derived from the OKLCH values
so the two declarations cannot drift apart.

Pages adopt the .cy-* shell classes from the reference (view, panel,
kpis, tabs, grid, table, field) instead of ad-hoc markup, which is what
makes 19 of 26 views consistent. The remaining seven are deliberately
bespoke: chat streams, the kanban board, the workflow canvas, the
terminal, and the missing-agent screen.

The chart palette and the kanban column colors move into single-source
modules so they cannot drift either. A new guard test rejects raw hex
colors, named colors, and literal RGB triples anywhere in the client
source, with an explicit exemption list for the places that genuinely
cannot read a CSS variable. The existing chat semantics spec keeps the
chat chain honest.

No behavior changes: no logic, no i18n keys, no data structures, and the
/chat-run event contract is untouched.

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)
+  })
 })