feat(web): 会话级角色 — 角色跟随激活会话 + 选角入口 + 面板挂角色（B 批次 1 前端）

按 DevDocs/design/22 §4.6/§5(7) 实现（后端由并行代理在做，按已定契约先行）。
- currentPersona 由「全局单值」改为「跟随激活会话」：新增 lib/sessionPersona.ts 解析（personaId 空 → 回落默认角色），App/TopBar/chat/lib/persona.ts 全部改为按激活会话取角色（头像/背景/名字/心情随会话切换）
- 交互：新建次级会话可选角色；会话换角色入口；管理面板 Sessions 页加「挂角色」下拉（走 PATCH /sessions/{id}）
- 组件拆分：Nav.tsx 228→143（抽出 NavItem.tsx 53）、新增 SessionRail.tsx 275（会话侧栏）
- 契约：types.ts / lib/api/sessions.ts 加 personaId?（建会话/改会话支持）
- mood 改为**按角色分桶**（同一角色的多个会话共享该角色心情）；升级后旧 mood 值不保留（刷新即空）——属行为变化，已在报告注明
- 测试：新增 personaSession.test.ts 40 checks（角色解析/回落/乐观更新与回滚）+ 既有 messageSync 54 checks 回归
- 验收：npm run build 绿；**未做浏览器端到端**（无 jsdom/渲染测试底座），UI 交互与失败路径提示未渲染验证
- 已知余量：useAppStore.ts 494/500 行（下次改动前应先拆 selectCurrentPersona/useCurrentPersona/useCurrentMood）

frontend/web/src/components/TopBar.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useAppStore } from "../store/useAppStore";
+import { useAppStore, useCurrentMood, useCurrentPersona } from "../store/useAppStore";
 import { useModeStore } from "../store/useModeStore";
 import { applyTheme, readTheme, type ThemeMode } from "../lib/theme";
 import { personaAvatar } from "../lib/persona";
@@ -29,8 +29,11 @@ const wsMeta: Record<WsStatus, { label: string; tone: "ok" | "warn" | "neutral"
 
 export function TopBar({ onMenu }: { onMenu: () => void }): React.ReactNode {
   const wsStatus = useAppStore((s) => s.wsStatus);
-  const mood = useAppStore((s) => s.mood);
-  const currentPersona = useAppStore((s) => s.currentPersona);
+  // Both follow the *active session's* role (design/22 §4.6): switching sessions
+  // switches the avatar/name, and the mood is the one the active role reported
+  // (mood frames are role-scoped).
+  const mood = useCurrentMood();
+  const currentPersona = useCurrentPersona();
   const mode = useModeStore((s) => s.mode);
   const [theme, setTheme] = useState<ThemeMode>(readTheme);
 
@@ -56,7 +59,7 @@ export function TopBar({ onMenu }: { onMenu: () => void }): React.ReactNode {
       <div className="flex min-w-0 items-center gap-2">
         <img src={personaAvatar(currentPersona)} alt={currentPersona?.name ?? "Cyrene"} className="h-7 w-7 shrink-0 rounded-full object-cover" />
         <div className="min-w-0 leading-tight">
-          <div className="truncate text-sm font-semibold">Cyrene · {currentPersona?.name ?? "昔涟"}</div>
+          <div className="truncate text-sm font-semibold">{currentPersona?.name ?? "昔涟"}</div>
           <div className="truncate text-[11px] text-[var(--mu-text-lo)]">
             <span className="inline-flex items-center gap-1">
               <Icon name={MODE_ICON[mode]} size={12} />