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/admin/AdminApp.tsx

@@ -4,6 +4,7 @@ import { getAuthToken, getStoredRole } from "../lib/api";
 import { ADMIN_GROUPS, ADMIN_SECTIONS } from "./sections";
 import { navigateAdmin, type AdminSectionId } from "./router";
 import { Button, Tag } from "../components/primitives";
+import { Icon } from "../components/Icon";
 import { DashboardModule } from "./modules/Dashboard";
 import { PersonasModule } from "./modules/Personas";
 import { SessionsModule } from "./modules/Sessions";
@@ -57,7 +58,7 @@ function AdminSidebar({ active }: { active: AdminSectionId }): React.ReactNode {
                   : "text-[var(--mu-text-mid)] hover:bg-[var(--mu-surface-4)]"
               }`}
             >
-              <span className="text-base">{s.icon}</span>
+              <Icon name={s.icon} size={18} />
               <span>{s.label}</span>
             </button>
           ))}
@@ -93,7 +94,7 @@ function AdminTopBar({ section }: { section: AdminSectionId }): React.ReactNode
         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>
       <Button size="sm" variant="ghost" onClick={() => { window.location.hash = ""; }}>
         返回用户端
@@ -105,7 +106,9 @@ function AdminTopBar({ section }: { section: AdminSectionId }): React.ReactNode
 function LoginGate(): React.ReactNode {
   return (
     <div className="flex h-full flex-col items-center justify-center gap-4 p-8 text-center">
-      <div className="text-4xl">🔒</div>
+      <div className="flex h-12 w-12 items-center justify-center rounded-[var(--mu-radius-lg)] bg-[var(--mu-surface-4)] text-[var(--mu-accent)]">
+        <Icon name="lock" size={32} />
+      </div>
       <div className="text-lg font-semibold">需要登录</div>
       <p className="max-w-md text-sm text-[var(--mu-text-lo)]">
         管理面板需持有 JWT。请先到用户端 <span className="text-[var(--mu-text-hi)]">设置 → 连接</span> 登录获取令牌后，再返回本页。
@@ -119,7 +122,9 @@ function Forbidden403(): React.ReactNode {
   const role = getStoredRole();
   return (
     <div className="flex h-full flex-col items-center justify-center gap-4 p-8 text-center">
-      <div className="text-4xl">🚫</div>
+      <div className="flex h-12 w-12 items-center justify-center rounded-[var(--mu-radius-lg)] bg-[var(--mu-err)]/15 text-[var(--mu-err)]">
+        <Icon name="block" size={32} />
+      </div>
       <div className="text-lg font-semibold">403 · 权限不足</div>
       <p className="max-w-md text-sm text-[var(--mu-text-lo)]">
         当前角色 <Tag tone="neutral">{role ?? "?"}</Tag>（viewer 只读）。管理面板需 <Tag tone="accent">owner</Tag> 或 <Tag tone="ok">admin</Tag> 角色；管理端写操作仅 owner。