feat(web): 前端收敛为「共享消息流 + 按消息 mode 渲染」，并补全 emoji→MD3 图标

架构变更（主人要求，design/07 §1/§2 已改定稿）：把「9 个行为模式 = 9 个独立页面」改为
「一个共享页面 + 每条消息绑 mode，消息框按对应 mode 渲染」。
- ChatMessage 增 mode?（types.ts）；useAppStore addUserMessage/beginAssistant 带 mode；
  useSendChat.send(text, mode) / chatStream body 带 mode（通知后端按 mode 回复）。
- MessageBubble 按 message.mode 分发到 components/messages/ 各形态渲染器
  （chat 气泡 / code 等宽代码块 / home 设备卡 / docs 文档卡 / work 任务卡 / vision 视觉卡）。
- ChatInput 顶部加「行为模式」chip 切换下一条消息的 mode（默认 chat）；输入框上方显示当前模式。
- ModeRouter 收敛为只渲染 ChatShell；删除 9 个旧独立 mode 页面；Nav/TopBar 的 mode 改为
  「输入模式」语义；settings 归管理面板（design/10）。

同时补全上一轮 emoji→MD3 图标（约 23 文件）：新增 Icon.tsx（MD3 SVG、IconName、零依赖、
离线优先），全部界面 emoji 替换为 <Icon name=... />；正文说明箭头保留。

npm run build 绿（tsc 0 错，79→71 模块，JS 284KB/gzip 86KB）。

frontend/web/src/components/TopBar.tsx

@@ -2,8 +2,18 @@ import { useState } from "react";
 import { useAppStore } from "../store/useAppStore";
 import { useModeStore } from "../store/useModeStore";
 import { applyTheme, readTheme, type ThemeMode } from "../lib/theme";
-import type { WsStatus } from "../lib/types";
+import type { Mode, WsStatus } from "../lib/types";
 import { Tag } from "./primitives";
+import { Icon, type IconName } from "./Icon";
+
+const MODE_LABEL: Record<Mode, string> = {
+  chat: "对话", code: "代码", home: "家居", work: "工作", docs: "知识库",
+  voice: "语音", vision: "视觉", agents: "子代理", settings: "设置",
+};
+const MODE_ICON: Record<Mode, IconName> = {
+  chat: "chat", code: "terminal", home: "home", work: "folder", docs: "docs",
+  voice: "mic", vision: "vision", agents: "agent", settings: "settings",
+};
 
 const wsMeta: Record<WsStatus, { label: string; tone: "ok" | "warn" | "neutral" | "err" }> = {
   idle: { label: "未连接", tone: "neutral" },
@@ -33,7 +43,12 @@ export function TopBar(): React.ReactNode {
         <img src="/icon.svg" alt="Cyrene" className="h-7 w-7" />
         <div className="leading-tight">
           <div className="text-sm font-semibold">Cyrene · 昔涟</div>
-          <div className="text-[11px] text-[var(--mu-text-lo)]">{mode} 模式</div>
+          <div className="text-[11px] text-[var(--mu-text-lo)]">
+            <span className="inline-flex items-center gap-1">
+              <Icon name={MODE_ICON[mode]} size={12} />
+              {MODE_LABEL[mode]}
+            </span>
+          </div>
         </div>
       </div>
 
@@ -52,14 +67,14 @@ export function TopBar(): React.ReactNode {
         title="管理面板 /admin"
         className="inline-flex h-8 w-8 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-sm transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
       >
-        🛡
+        <Icon name="shield" size={18} />
       </button>
       <button
         onClick={toggleTheme}
         aria-label="切换主题"
         className="inline-flex h-8 w-8 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-sm transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
       >
-        {theme === "dark" ? "☀" : "☾"}
+        <Icon name={theme === "dark" ? "sun" : "moon"} size={18} />
       </button>
     </header>
   );