feat(frontend): M9 模态 UI（mode 系统+共享 store+WS 客户端 + chat(思维链/工具回显/情绪徽标)/code/Agent 监控/后台思考页 + Miuix 设计 token + PWA）；tsc+vite build 通过

frontend/web/src/design/tokens.css

@@ -0,0 +1,99 @@
+/*
+ * Cyrene v2 — Miuix design tokens (source of truth).
+ *
+ * 六大核心（Miuix / HyperOS）：
+ *   1. Smooth Corner  —— 贝塞尔连续曲率 k=0.55 的圆角（--mu-radius-*）
+ *   2. 多层 Surface    —— 5 级色阶 #161616 → #0C0C0C → #1C1C1C → #242424 → #2C2C2C
+ *   3. 弹簧动效        —— cubic-bezier(0.34,1.56,0.64,1)（仅交互，--mu-spring）
+ *   4. 深色优先        —— 默认深色，Light/Dark 无感切换（--mu-light 覆盖）
+ *   5. 毛玻璃          —— backdrop-filter（--mu-glass-*）
+ *   6. Liquid Glass    —— 液体玻璃寓意（折射/内高光）
+ */
+
+:root {
+  color-scheme: dark;
+
+  /* 多层 Surface — 5 级色阶（深色基准） */
+  --mu-surface-1: #161616;
+  --mu-surface-2: #0c0c0c;
+  --mu-surface-3: #1c1c1c;
+  --mu-surface-4: #242424;
+  --mu-surface-5: #2c2c2c;
+
+  /* 文本层级 */
+  --mu-text-hi: #f5f5f7;
+  --mu-text-mid: #b4b4b8;
+  --mu-text-lo: #7a7a80;
+  --mu-text-disabled: #55555c;
+
+  /* 品牌 / 强调色（HyperOS 风格中性偏暖） */
+  --mu-accent: #3d6bff;
+  --mu-accent-hi: #6a8dff;
+  --mu-ok: #35c26b;
+  --mu-warn: #ff9f43;
+  --mu-err: #ff5c5c;
+
+  /* Smooth Corner：k=0.55 —— 直线到圆弧连续过渡的半径近似 */
+  --mu-radius-xs: 0.375rem; /* 6px */
+  --mu-radius-sm: 0.5rem;   /* 8px */
+  --mu-radius: 0.625rem;    /* 10px  —— 组件主体 */
+  --mu-radius-lg: 1rem;     /* 16px  —— 卡片/弹层 */
+  --mu-radius-xl: 1.5rem;   /* 24px  —— 大容器 */
+  --mu-radius-pill: 62.5rem; /* 全圆角胶囊 */
+
+  /* 弹簧动效：仅用于 Switch / BottomNav / Sidebar 等交互 */
+  --mu-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --mu-ease: cubic-bezier(0.22, 1, 0.36, 1); /* 标准过渡 */
+  --mu-dur: 240ms;
+  --mu-dur-slow: 420ms;
+
+  /* 毛玻璃 */
+  --mu-glass-blur: 18px;
+  --mu-glass-alpha: 0.66;
+  --mu-glass-border: rgba(255, 255, 255, 0.08);
+
+  /* Liquid Glass 寓意：内高光 / 折射描边 */
+  --mu-liquid-highlight: rgba(255, 255, 255, 0.14);
+  --mu-liquid-rim: rgba(255, 255, 255, 0.06);
+
+  /* 间距节奏 */
+  --mu-space-1: 0.25rem;
+  --mu-space-2: 0.5rem;
+  --mu-space-3: 0.75rem;
+  --mu-space-4: 1rem;
+  --mu-space-5: 1.5rem;
+  --mu-space-6: 2rem;
+  --mu-space-8: 3rem;
+
+  /* 布局 */
+  --mu-topbar-h: 3.25rem;
+  --mu-sidebar-w: 15rem;
+  --mu-bottomnav-h: 4rem;
+
+  /* 阴影（深度） */
+  --mu-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --mu-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.35);
+  --mu-shadow-3: 0 16px 40px rgba(0, 0, 0, 0.4);
+  --mu-shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.5);
+}
+
+/* Light 无感切换：仅覆盖表面/文本，保留同一套角/动效/玻璃 */
+.theme-light {
+  color-scheme: light;
+
+  --mu-surface-1: #f6f6f8;
+  --mu-surface-2: #ececef;
+  --mu-surface-3: #ffffff;
+  --mu-surface-4: #e4e4e8;
+  --mu-surface-5: #dcdce1;
+
+  --mu-text-hi: #17171a;
+  --mu-text-mid: #4a4a52;
+  --mu-text-lo: #84848c;
+  --mu-text-disabled: #b9b9c0;
+
+  --mu-glass-alpha: 0.72;
+  --mu-glass-border: rgba(0, 0, 0, 0.06);
+  --mu-liquid-highlight: rgba(255, 255, 255, 0.6);
+  --mu-liquid-rim: rgba(255, 255, 255, 0.7);
+}