wezard 1.4.2 → 2.0.1

package/web/chat.js

@@ -1,41 +1,49 @@
-// Chat 详情 SPA。三块视图共用一个 `?id=` 凭据:
+// Rolepage SPA —— 从**一个 role 的视角**看它的 IM: 它参与的群聊与单聊, 每一处
+// 它说了什么 (靠右)、听到了什么 (靠左)。点气泡对面那片空白就换成对方的视角。
 //
-//   线程  /api/chat (侧栏 + 总账) + /api/thread (正文) + /api/events (SSE 增量)
-//   关系  /api/world —— 全部 wizard、家谱、跨聊天往来、工单、日程 (轮询)
-//   日程  同一份 /api/world, 换一种读法 (按时间而不是按关系)
+//   对话  /api/role (身份 + 会话列表 + session) + /api/msgs (窗口正文) + /api/role-events (SSE)
+//   关系  /api/world —— 聚焦当前 role 的家谱与协作网 (轮询)
+//   日程  同一份 /api/world, 只列归当前 role 的定时任务与工单
 //
-// turn 正文是服务端渲染好的 HTML 片段 —— diff / ANSI / 语法高亮只在
-// shared/detail-render 实现一次, 这里只做 DOM 增量 reconcile。
-//
-// 关系图为什么不用力导向: 节点天然有归属 (哪个聊天) 和层级 (谁的分身), 力导向
-// 会把这两件确定的事揉成一团随机位置。这里改成 HTML 布局 + SVG 连线 —— 聊天是
-// 卡片、分身按家谱缩进 (结构由布局承担), SVG 只画那些布局表达不了的边 (跨卡片
-// 的派活、跨聊天的分身)。好处是文字永远可读、可省略、可响应式换行。
+// 视角状态 (role / conv / with / session) 全在 URL 里 —— 刷新、转发、从别的聊天点
+// 进来, 落点都一样。消息正文是服务端渲染好的 HTML 片段 (diff / ANSI / 高亮只在
+// shared/detail-render 实现一次), 这里只包左右与头像, 再做 DOM 增量 reconcile。
 //
 // 无构建步骤: 保持 var / function 写法, 直接被浏览器加载。
 (function () {
   var qs = new URLSearchParams(location.search);
   var TOKEN = qs.get('id') || '';
-  // 链接指定要开在哪个 wizard 那一栏。票据 (`id`) 可能是兄弟会话的 turn —— 它只
-  // 决定授权范围 (整个聊天), 落点由这个参数说。
-  var WANT = qs.get('target') || '';
+  // 老链接只有 `target=` —— 服务端两个都认, 这里统一成 role。
+  var ROLE = qs.get('role') || qs.get('target') || '';
+  var CONV = qs.get('conv') || '';
+  var WITH = qs.get('with') || '';
+  var SESSION = qs.get('session') || '';
   var TICK_MS = 3000;
 
   // at / recvAt: 服务端快照时刻与本地收到时刻。所有"现在几点"的判断都换算到
   // 服务端时钟, 否则客户端时钟偏几分钟就会把运行中的会话判成已结束。
-  var S = { base: '', target: '', tags: [], graphs: [], at: 0, recvAt: 0, es: null, pinned: true };
-  // 关系/日程两栏共用的世界快照。sel = 当前聚焦的节点 (空 = 不聚焦, 全图淡显),
-  // kinds = 边类型开关。loaded 用来区分"还没拉过"与"拉过但是空的"。
+  var R = { at: 0, recvAt: 0, role: null, sessions: [], convs: [], relations: false, schedules: 0, stats: null };
+  // frags: 当前窗口的原始片段 (id → 片段)。片段不带方向, 换视角时拿它就地重包左右。
+  var S = { es: null, pinned: true, gen: 0, frags: {} };
+  // 关系/日程两栏共用的世界快照。sel = 当前聚焦的节点, kinds = 边类型开关。
   var W = {
     at: 0, nodes: [], edges: [], chats: [], jobs: [], schedules: [],
-    degraded: false, loaded: false, sel: '', onlyRel: false, kinds: { clone: 1, peer: 1, graph: 1 },
+    degraded: false, loaded: false, sel: '', onlyRel: false, kinds: { clone: 1, spawn: 1, peer: 1, graph: 1 },
+    layout: 'cards',
+  };
+  // 读法是个人偏好, 记在本地。存储不可用 (隐私窗口 / 老 webview) 就退回默认。
+  var LAY_KEY = 'wezard.world.layout';
+  try { if (localStorage.getItem(LAY_KEY) === 'force') W.layout = 'force'; } catch (e) { }
+  var setLayout = function (v) {
+    W.layout = v;
+    try { localStorage.setItem(LAY_KEY, v); } catch (e) { }
   };
-  var VIEW = 'thread';
+  var VIEW = 'msgs';
   var $ = function (s) { return document.querySelector(s); };
-  var thread = $('#thread'), tagsEl = $('#tags'), sbEl = $('#sb'), connEl = $('#conn'), gbarEl = $('#gbar');
+  var app = $('#app'), thread = $('#thread'), inner = $('#thread-in'), convsEl = $('#convs');
   var wmapEl = $('#wmap'), wscrollEl = $('#wscroll'), wtoolsEl = $('#wtools'), planEl = $('#plan-in');
 
-  var srvNow = function () { return S.at ? S.at + (Date.now() - S.recvAt) : Date.now(); };
+  var srvNow = function () { return R.at ? R.at + (Date.now() - R.recvAt) : Date.now(); };
 
   var fmtTok = function (n) {
     if (!n) return '0';
@@ -51,15 +59,30 @@
     if (m < 60) return m + 'm' + (s - m * 60) + 's';
     return Math.floor(m / 60) + 'h' + (m % 60) + 'm';
   };
-  // 聊天列表用的相对时间 — 一眼看出"刚刚 / 5 分钟前"。
+  var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
+  var fmtDay = function (ts) {
+    var x = new Date(ts);
+    return x.getFullYear() + '-' + pad(x.getMonth() + 1) + '-' + pad(x.getDate()) + ' ' + pad(x.getHours()) + ':' + pad(x.getMinutes());
+  };
+  // 列表用的相对时间 — 一眼看出"刚刚 / 5 分钟前"。
   var fmtAgo = function (ts) {
     if (!ts) return '';
     var d = srvNow() - ts;
     if (d < 60000) return '刚刚';
     if (d < 3600000) return Math.floor(d / 60000) + '分钟前';
     if (d < 86400000) return Math.floor(d / 3600000) + '小时前';
-    var x = new Date(ts), p = function (n) { return n < 10 ? '0' + n : '' + n; };
-    return p(x.getMonth() + 1) + '-' + p(x.getDate()) + ' ' + p(x.getHours()) + ':' + p(x.getMinutes());
+    var x = new Date(ts);
+    return pad(x.getMonth() + 1) + '-' + pad(x.getDate()) + ' ' + pad(x.getHours()) + ':' + pad(x.getMinutes());
+  };
+  var fmtHM = function (ts) { var x = new Date(ts); return pad(x.getHours()) + ':' + pad(x.getMinutes()); };
+  var fmtFull = function (ts) {
+    var x = new Date(ts);
+    return (x.getMonth() + 1) + '-' + pad(x.getDate()) + ' ' + pad(x.getHours()) + ':' +
+      pad(x.getMinutes()) + ':' + pad(x.getSeconds());
+  };
+  /** 一条消息的时刻 —— 只写在气泡外面这一处, 卡片里不再重复 (见 chat.css 的 .mb .tg-time)。 */
+  var stamp = function (ts) {
+    return '<time class="mt" title="' + esc(fmtFull(ts)) + '">' + esc(fmtHM(ts)) + '</time>';
   };
   var esc = function (s) {
     return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
@@ -70,14 +93,46 @@
     var p = new URLSearchParams(params || {}); p.set('id', TOKEN);
     return fetch(path + '?' + p.toString(), { cache: 'no-store' }).then(function (r) { return r.json(); });
   };
+  var viewParams = function (extra) {
+    var p = { role: ROLE };
+    if (CONV) p.conv = CONV;
+    if (WITH) p['with'] = WITH;
+    if (SESSION) p.session = SESSION;
+    Object.keys(extra || {}).forEach(function (k) { p[k] = extra[k]; });
+    return p;
+  };
+  // 视角状态回写 URL (replaceState: 不在历史里留一串中间态)。
+  var syncUrl = function () {
+    var p = new URLSearchParams({ id: TOKEN });
+    Object.keys(viewParams()).forEach(function (k) { p.set(k, viewParams()[k]); });
+    ['forceInnerBrowser', 'ww_vw', 'ww_vh', 'ww_uniq'].forEach(function (k) { if (qs.get(k)) p.set(k, qs.get(k)); });
+    try { history.replaceState(null, '', location.pathname + '?' + p.toString()); } catch (e) { }
+  };
 
-  // ── 运行状态: 服务端只给"到这个时刻自动算结束", 由客户端定时判定 ──
-  // SSE 只在有写入时推送, 一个真正停下来的 turn 不会再产生任何事件 —— 没有本地
-  // 判定, 页面上的「运行中 / 正在思考」就永远熄不掉。
-  var isRunning = function (t) { return !!t.runningUntil && srvNow() < t.runningUntil; };
-  var curTag = function () {
-    return S.tags.filter(function (x) { return x.target === S.target; })[0];
+  // ── 名字 ──
+  // 一个 role 的名字与头像: 消息片段自带 (fromName/fromLabel), 会话列表与名册兜底。
+  var names = {};
+  var learn = function (id, name, label) { if (id && name) names[id] = { name: name, label: label || '' }; };
+  var kindOf = function (id) {
+    return /^task:/.test(id) ? 'task' : id === 'system:' ? 'system' : /^human:/.test(id) ? 'human' : 'wizard';
   };
+  var nodeOf = function (target) {
+    return W.nodes.filter(function (n) { return n.target === target; })[0];
+  };
+  var roleName = function (id) {
+    var k = names[id] || {}, n = nodeOf(id);
+    return k.name || (n && n.name) || id;
+  };
+  var roleLabel = function (id) {
+    var k = names[id] || {}, n = nodeOf(id);
+    return k.label || (n && n.label) || ({ human: '👤', task: '⏰', system: '🧙' })[kindOf(id)] || '🧙';
+  };
+  // `.name` 的点由 CSS 画 —— 人与定时任务没有地址, 不画点。
+  var nm = function (id, name) {
+    return '<span class="nm ' + kindOf(id) + '">' + esc(name || roleName(id)) + '</span>';
+  };
+  var nameOf = function (id) { return (kindOf(id) === 'wizard' ? '.' : '') + roleName(id); };
+  var canSwitch = function (id) { return !!id && kindOf(id) !== 'task' && kindOf(id) !== 'system' && id !== 'human:'; };
 
   // ── markdown 渲染 (只对未渲染过的节点做, 复用节点不重绘) ──
   var md = null;
@@ -103,7 +158,8 @@
     });
   };
 
-  // ── 增量 reconcile (与 turn 页同款, 但会递归进 .bubbles) ──
+  // ── 增量 reconcile: sig 相同原节点留下; 同为 turn 卡片只换头 + 递归气泡层 ──
+  // 一次 tool_result 到达不该重建整张卡片 (滚动位置 / 展开态全部保住)。
   var snapOpen = function (scope) {
     var m = {};
     scope.querySelectorAll('[data-key]').forEach(function (b) {
@@ -124,8 +180,6 @@
     for (var i = 0; i < el.children.length; i++) if (el.children[i].classList.contains(cls)) return el.children[i];
     return null;
   };
-  // sig 相同 → 原节点原样留下; 不同但两边都是 turn-group → 只换头 + 递归气泡层,
-  // 这样一次 tool_result 到达不会重建整轮 DOM (滚动位置 / 展开态全部保住)。
   var reconcile = function (cur, next) {
     var open = snapOpen(cur), existing = {};
     Array.prototype.forEach.call(cur.children, function (c) {
@@ -154,327 +208,533 @@
   };
 
   // ── 滚动: 默认到底; 用户手动上翻后解除吸附, 回到底部再吸附 ──
-  var atBottom = function () {
-    return thread.scrollHeight - thread.scrollTop - thread.clientHeight < 80;
+  var atBottom = function () { return thread.scrollHeight - thread.scrollTop - thread.clientHeight < 80; };
+  var toBottom = function (force) { if (force || S.pinned) thread.scrollTop = thread.scrollHeight; };
+  thread.addEventListener('scroll', function () { S.pinned = atBottom(); });
+
+  // ── 左栏: 当前 role 的名片 + 会话列表 ──
+  var convOf = function (key) { return R.convs.filter(function (c) { return c.key === key; })[0]; };
+
+  // 群聊头像 = 参与者头像的拼图 (最多 4 格, 自己排第一)。私聊就是对端自己的头像。
+  var membersOf = function (c) {
+    var seen = {}, out = [];
+    [{ role: ROLE, label: R.role ? R.role.label : '' }].concat(c.subs || []).forEach(function (m) {
+      if (m.role && !seen[m.role]) { seen[m.role] = 1; out.push(m); }
+    });
+    return out;
   };
-  var toBottom = function (force) {
-    if (force || S.pinned) thread.scrollTop = thread.scrollHeight;
+  var avatarOf = function (c) {
+    if (c.kind !== 'group') return '<span class="av">' + esc(c.label) + '</span>';
+    var ms = membersOf(c).slice(0, 4);
+    return '<span class="av mosaic n' + ms.length + '" aria-hidden="true">' +
+      ms.map(function (m) { return '<i>' + esc(m.label || roleLabel(m.role)) + '</i>'; }).join('') + '</span>';
   };
-  thread.addEventListener('scroll', function () { S.pinned = atBottom(); });
 
-  // ── 侧栏 (聊天列表) ──
-  var tagMeta = function (t) {
-    var u = t.usage || {};
-    var bits = [];
-    if (t.turns) bits.push(t.turns + ' 轮');
-    if (u.tools) bits.push(u.tools + ' 工具');
-    var tok = (u.output || 0) + (u.input || 0);
-    if (tok) bits.push(fmtTok(tok) + ' tok');
-    // 目录只取最后一段: 兄弟会话常常一个在主仓、一个在 worktree, 差别就在这一段。
-    if (t.cwd) bits.push('📁 ' + (t.cwd.replace(/\/+$/, '').split('/').filter(Boolean).pop() || t.cwd));
-    // graph 驱动的会话单独标出来 —— 它的 userQuery 长得和真人消息一样, 不标就
-    // 分不清是有人在跟它说话, 还是某个 run 在喂它。
-    var g = t.origin
-      ? '<span class="gtag" title="由 graph ' + esc(t.origin.runId) + ' 驱动">🕸 ' + esc(t.origin.runId) + '</span>'
+  // 选中的那一项若是个 role (私聊对端 / 群里的某人), 行内给一个换视角的开关。
+  // 不能是 <button>: 它嵌在整行那颗按钮里。
+  var SWAP = '<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 5.5h9M9.5 3l2.5 2.5L9.5 8M13 10.5H4M6.5 8 4 10.5 6.5 13" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  var swapOf = function (role) {
+    return canSwitch(role) && role !== ROLE
+      ? '<span class="sw" role="button" tabindex="0" data-sw="' + esc(role) + '" title="' + esc('切到 ' + nameOf(role) + ' 的视角') + '">' + SWAP + '</span>'
       : '';
-    if (!bits.length && !g) return '';
-    return '<div class="tag-meta">' +
-      bits.map(esc).join('<span class="sep">·</span>') +
-      (g && bits.length ? '<span class="sep">·</span>' : '') + g +
-      '</div>';
   };
-
-  // ── graph 运行条 ──
-  // 只画最近活跃的那一个 run: 同一 chat 同时跑两张图是罕见情形, 而两条并排的
-  // 流水线会把顶栏挤成一团 —— 宁可只讲清楚当前这一条。
-  var labelOfTag = function (tag) {
-    var hit = S.tags.filter(function (x) { return x.tag === tag; })[0];
-    return hit ? hit.label : '•';
-  };
-  var renderGraph = function () {
-    var g = (S.graphs || [])[0];
-    if (!g) { gbarEl.hidden = true; gbarEl.innerHTML = ''; return; }
-    // 与会话行同一判定: 服务端只给"到这个时刻自动算结束", 熄灯由本地定时判。
-    var run = isRunning(g);
-    var nodes = g.pipeline.map(function (p) {
-      var on = p.step === g.step;
-      return '<span class="nd' + (on ? ' on' : '') + (on && run ? ' live' : '') +
-        '" data-tag="' + esc(p.tag) + '" title="步 ' + p.step + '/' + g.steps + ' · #' + esc(p.tag) + '">' +
-        esc(labelOfTag(p.tag)) + ' ' + esc(p.tag ? '#' + p.tag : 'default') + '</span>';
-    }).join('<span class="arw">→</span>');
-    gbarEl.hidden = VIEW !== 'thread';
-    gbarEl.innerHTML =
-      '<span class="gid" title="graph run">🕸 ' + esc(g.runId) + '</span>' +
-      '<span class="pipe">' + nodes + '</span>' +
-      '<span class="prog' + (run ? '' : ' done') + '">' +
-        (run ? '⟳ ' : '✓ ') + '轮 ' + g.round + '/' + g.rounds + '</span>';
-    gbarEl.querySelectorAll('.nd').forEach(function (n) {
-      n.onclick = function () {
-        var tag = n.getAttribute('data-tag');
-        var hit = S.tags.filter(function (x) { return x.tag === tag; })[0];
-        if (hit) select(hit.target);
-      };
-    });
+  var line = function (title, sw, ts, pv) {
+    return '<span class="b"><span class="l1"><span class="t">' + title + '</span>' + sw +
+      '<span class="ts">' + esc(fmtAgo(ts)) + '</span></span>' +
+      '<span class="pv">' + esc(pv) + '</span></span>';
   };
-  // 一个会话的 wizard 身份 (名字 / 职责 / 家谱) 只有 /api/world 知道 —— 侧栏
-  // 因此是两份数据的合流: tag 那份讲"跑了多少", world 那份讲"它是谁"。世界还没
-  // 拉回来时退化成原先的 `#tag` 视图, 不阻塞线程的首屏。
-  var nodeOf = function (target) {
-    return W.nodes.filter(function (n) { return n.target === target; })[0];
+
+  var convItem = function (c) {
+    var on = c.key === CONV;
+    var title = c.kind === 'wizard' ? nm(c.peer, c.name) : '<span class="nm chat">' + esc(c.name) + '</span>';
+    var subs = on && c.subs.length
+      ? '<div class="subs">' + c.subs.map(function (s) {
+          var sel = s.role === WITH;
+          return '<button class="si' + (sel ? ' on' : '') + (s.count ? '' : ' quiet') + '" data-conv="' + esc(c.key) + '" data-with="' + esc(s.role) + '" ' +
+            'title="' + esc(s.count ? '我与 ' + nameOf(s.role) + ' 在这里的 ' + s.count + ' 条往来' : '在这里, 但还没和我说过话') + '">' +
+            '<span class="av">' + esc(s.label) + '</span>' +
+            line(nm(s.role, s.name), sel ? swapOf(s.role) : '', s.lastTs, s.preview) + '</button>';
+        }).join('') + '</div>'
+      : '';
+    var sel = on && !WITH;
+    return '<button class="ci' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '">' +
+        avatarOf(c) + line(title, sel && c.kind === 'wizard' ? swapOf(c.peer) : '', c.lastTs, c.preview) +
+      '</button>' + subs;
   };
-  var nameOf = function (target) {
-    var n = nodeOf(target);
-    return (n && n.name) || (target.indexOf('#') >= 0 ? '#' + target.split('#').pop() : target) || target;
+
+  var renderConvs = function () {
+    var groups = R.convs.filter(function (c) { return c.kind === 'group'; });
+    var dms = R.convs.filter(function (c) { return c.kind !== 'group'; });
+    var sec = function (title, list, none) {
+      return '<h2>' + title + '<span>' + list.length + '</span></h2>' +
+        (list.length ? list.map(convItem).join('') : '<div class="none">' + none + '</div>');
+    };
+    // 人没有私聊 —— wizard↔wizard 才有, 空着的那一栏也不画。
+    convsEl.innerHTML = sec('群聊', groups, '还没在任何群里说过话') +
+      (R.role && R.role.kind === 'human' ? '' : sec('私聊', dms, '没有和别的 wizard 私聊过'));
+    convsEl.querySelectorAll('[data-conv]').forEach(function (b) {
+      b.onclick = function () { selectConv(b.getAttribute('data-conv'), b.getAttribute('data-with') || ''); };
+    });
+    convsEl.querySelectorAll('[data-sw]').forEach(function (x) {
+      var go = function (e) { e.stopPropagation(); switchRole(x.getAttribute('data-sw')); };
+      x.onclick = go;
+      x.onkeydown = function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(e); } };
+    });
   };
 
-  var renderTags = function () {
-    if (!S.tags.length) {
-      tagsEl.innerHTML = '<div class="empty-side">这个 chat 还没有会话记录</div>';
-      return;
-    }
-    $('#side-n').textContent = S.tags.length + ' 个会话';
-    tagsEl.replaceChildren.apply(tagsEl, S.tags.map(function (t) {
-      var run = isRunning(t), n = nodeOf(t.target) || {};
-      var el = document.createElement('div');
-      el.className = 'tag-row' + (t.target === S.target ? ' on' : '') + (run ? ' running' : '');
-      // 名字在前、地址在后: `#tag` 是地址, wizard 起过名之后人读的是名字。
-      var kin = n.parent
-        ? '<span class="kin" title="' + esc(nameOf(n.parent)) + ' 的分身' + (n.inherited ? ' (继承了它的上下文)' : '') + '">↳ ' +
-            esc(nameOf(n.parent)) + (n.inherited ? ' ⧉' : '') + '</span>'
-        : '';
-      el.innerHTML =
-        '<div class="tag-av">' + esc(t.label) + (run ? '<span class="live"></span>' : '') + '</div>' +
-        '<div class="tag-main">' +
-          '<div class="tag-l1">' +
-            '<span class="tag-name">' + esc(t.tag ? '#' + t.tag : 'default') + '</span>' +
-            '<span class="tag-ts">' + esc(fmtAgo(t.lastTs)) + '</span>' +
-          '</div>' +
-          (n.description ? '<div class="tag-job">' + esc(n.description) + '</div>' : '') +
-          (kin ? '<div class="tag-kin">' + kin + '</div>' : '') +
-          '<div class="tag-prev">' + esc(t.preview || '(暂无对话)') + '</div>' +
-          tagMeta(t) +
-        '</div>';
-      el.onclick = function () { select(t.target); };
-      return el;
-    }));
-  };
-
-  // cwd 只显示尾部两段 —— 顶栏放不下全路径, 而"哪个项目/哪个 worktree"恰好就在
-  // 尾部; 全路径留在 title 里。~ 前缀在服务端不可知, 客户端也无从展开, 原样保留。
   var shortCwd = function (p) {
     var seg = String(p).replace(/\/+$/, '').split('/').filter(Boolean);
     return seg.length <= 2 ? p : '…/' + seg.slice(-2).join('/');
   };
+  var sessLabel = function (s) {
+    return (s.sessionId ? s.sessionId.slice(0, 8) : '(无 id)') + ' · ' + fmtAgo(s.start) + ' · ' + s.turns + ' 轮';
+  };
 
-  var topbar = function () {
-    var t = curTag();
-    $('#tb-em').textContent = t ? t.label : '💬';
-    $('#tb-h').textContent = t ? (t.tag ? '#' + t.tag : 'default') : '';
-    var cwdEl = $('#tb-cwd');
-    cwdEl.hidden = !(t && t.cwd);
-    if (t && t.cwd) { cwdEl.textContent = '📁 ' + shortCwd(t.cwd); cwdEl.title = t.cwd; }
-    $('#tb-sub').textContent = S.target;
+  // session 切换: 原生 <select> 的弹层画不了样式, 换成按钮 + 列表。
+  // renderRole 每次刷新都重画, 展开态记在 SESS_OPEN 里才不会被轮询收起。
+  var SESS_OPEN = false;
+  var sessRow = function (s, on) {
+    return '<button class="sp-it' + (on ? ' on' : '') + '" role="option" aria-selected="' + on + '" data-s="' + esc(s.sessionId || '') + '">' +
+      '<span class="id">' + esc(s.sessionId ? s.sessionId.slice(0, 8) : '(无 id)') + '</span>' +
+      '<span class="ago">' + esc(fmtAgo(s.start)) + '</span>' +
+      '<span class="n">' + s.turns + ' 轮</span></button>';
+  };
+  var sessPicker = function () {
+    var cur = R.sessions.filter(function (s) { return s.sessionId === SESSION; })[0];
+    var all = '<button class="sp-it all' + (cur ? '' : ' on') + '" role="option" aria-selected="' + !cur + '" data-s="">' +
+      '<span class="id">全部 session</span><span class="n">' + R.sessions.length + ' 个</span></button>';
+    return '<div class="sp' + (SESS_OPEN ? ' open' : '') + '">' +
+      '<button class="sp-btn" aria-haspopup="listbox" aria-expanded="' + SESS_OPEN + '">' +
+        '<span class="lb">session</span>' +
+        '<span class="v">' + esc(cur ? sessLabel(cur) : '全部 ' + R.sessions.length + ' 个') + '</span>' +
+        '<span class="car" aria-hidden="true"></span></button>' +
+      '<div class="sp-list" role="listbox">' + all +
+        R.sessions.slice().reverse().map(function (s) { return sessRow(s, s.sessionId === SESSION); }).join('') +
+      '</div></div>';
+  };
+  var setSessOpen = function (open) {
+    SESS_OPEN = open;
+    var sp = $('#rb-sess .sp');
+    if (!sp) return;
+    sp.classList.toggle('open', open);
+    sp.querySelector('.sp-btn').setAttribute('aria-expanded', open);
   };
+  var bindSessPicker = function () {
+    var sp = $('#rb-sess .sp');
+    if (!sp) return;
+    sp.querySelector('.sp-btn').onclick = function () { setSessOpen(!SESS_OPEN); };
+    sp.querySelectorAll('.sp-it').forEach(function (it) {
+      it.onclick = function () { setSessOpen(false); SESSION = it.getAttribute('data-s'); refresh(); };
+    });
+  };
+  document.addEventListener('click', function (e) {
+    if (SESS_OPEN && !e.target.closest('#rb-sess .sp')) setSessOpen(false);
+  });
+  document.addEventListener('keydown', function (e) {
+    if (SESS_OPEN && e.key === 'Escape') setSessOpen(false);
+  });
 
-  // ── 页脚总账 ──
+  // 名片: 身份 · 出身 · cwd · 出生 · 关系 / 日程入口。
+  var renderRole = function () {
+    var r = R.role;
+    if (!r) return;
+    // 名字下面那一行就是出身 —— 有父亲的直接写成「谁的什么」(可点过去), 不再另起一条重复。
+    // 分身 = 从父亲某个 session 节点 fork 出来的 (带着那一刻的上下文);
+    // 子 wizard = 父亲 spawn 的白板, 只有出身、没有继承。
+    var kind = !r.parent
+      ? esc(r.kind === 'human' ? '人' : 'wizard')
+      : r.forkedFrom
+        ? '<span class="go" data-r="' + esc(r.parent.id) + '" title="从它的 session ' + esc(r.forkedFrom) + ' fork, 开局带着那一刻的上下文">⧉ .' + esc(r.parent.name) + ' 的分身 · @' + esc(r.forkedFrom.slice(0, 8)) + '</span>'
+        : '<span class="go" data-r="' + esc(r.parent.id) + '" title="它 spawn 的白板, 没有继承上下文">↳ .' + esc(r.parent.name) + ' 的子 wizard</span>';
+    var facts = [];
+    if (r.cwd) facts.push('<span title="' + esc(r.cwd) + '">📁 ' + esc(shortCwd(r.cwd)) + '</span>');
+    // 生在哪个群、什么时候 —— 一件事, 一行。
+    var born = [r.chat, r.bornAt ? fmtAgo(r.bornAt) : ''].filter(Boolean);
+    if (born.length) facts.push('<span title="' + esc('创建于' + (r.chat ? ' ' + r.chat : '') + (r.bornAt ? ' · ' + fmtDay(r.bornAt) : '')) + '">🐣 ' + esc(born.join(' · ')) + '</span>');
+    var kin = function (xs, what) {
+      return xs.length ? '<span title="' + esc(xs.map(function (x) { return '.' + x.name; }).join(' ')) + '">' + xs.length + ' 个' + what + '</span>' : '';
+    };
+    facts.push(kin(r.clones, '分身'), kin(r.spawns, '子 wizard'));
+    $('#rb-who').innerHTML =
+      '<div class="id"><span class="av">' + esc(r.label) + '</span>' +
+        '<span class="l">' + nm(r.id, r.name) +
+          '<span class="k">' + kind + '</span></span></div>' +
+      (r.description ? '<p class="job">' + esc(r.description) + '</p>' : '') +
+      '<div class="facts">' + facts.join('') + '</div>';
+    $('#rb-who').querySelectorAll('.go').forEach(function (g) {
+      g.onclick = function () { switchRole(g.getAttribute('data-r')); };
+    });
+    $('#rb-sess').innerHTML = R.sessions.length > 1 ? sessPicker() : '';
+    bindSessPicker();
+    syncFoot();
+    var acts = [];
+    // 入口只在有东西可看时出现, 且只是一枚徽标 —— 名片的主角是身份, 不是按钮。
+    if (R.relations) acts.push('<button class="bd' + (VIEW === 'world' ? ' on' : '') + '" data-view="world">关系图</button>');
+    if (R.schedules) acts.push('<button class="bd' + (VIEW === 'plan' ? ' on' : '') + '" data-view="plan">日程<b>' + R.schedules + '</b></button>');
+    $('#rb-acts').innerHTML = acts.join('');
+    $('#rb-acts').querySelectorAll('.bd').forEach(function (b) {
+      b.onclick = function () { setView(VIEW === b.getAttribute('data-view') ? 'msgs' : b.getAttribute('data-view')); };
+    });
+    // 标题就是这一页的主张: 你此刻站在谁的位置上。换视角 → 标题跟着换。
+    document.title = nameOf(r.id) + ' 的视角';
+  };
+
+  // 左栏底: session 切换 + 用量总账, 都是「轮次」的事, 与上面的身份分开; 两样都空就整条收起。
+  var syncFoot = function () {
+    $('#rb-foot').hidden = !$('#rb-sess').innerHTML && !$('#rb-prof').innerHTML;
+  };
+
+  // ── profile: 当前 role 自己跑过的轮次的总账 (选了 session 就只算那一段) ──
   var COLORS = { input: '#0a7d6b', cacheRead: '#8250df', cacheWrite: '#953800', output: '#1a7f37' };
-  // 缩写键本身没有自解释性, 悬停给出中文口径 (尤其 ctx 是峰值、cache 是累计读写)。
   var TIP = {
     turns: '对话轮数', tools: '工具调用次数', api: 'API 请求次数',
     ctx: '上下文峰值 — 单次请求送入的 input + 缓存 的最高值',
     out: '累计输出 token', cache: '累计缓存 token (读 + 写)', time: '累计耗时',
   };
-  // 进行中的会话, 耗时要跟着走: durationMs 只统计到快照时刻 at, 之后的补上;
-  // runningUntil 一过就冻住, 不会像旧版那样把静默期一路累加成几十小时。
   var liveDur = function (t) {
     var d = (t.usage && t.usage.durationMs) || 0;
     if (!t.runningUntil) return d;
-    return d + Math.max(0, Math.min(srvNow(), t.runningUntil) - S.at);
+    return d + Math.max(0, Math.min(srvNow(), t.runningUntil) - R.at);
   };
-  var renderStatus = function (t) {
-    if (!t) { sbEl.innerHTML = ''; return; }
-    var u = t.usage || {}, run = isRunning(t);
+  var renderProfile = function () {
+    var el = $('#rb-prof');
+    var t = R.stats;
+    if (!t) { el.innerHTML = ''; syncFoot(); return; }
+    var u = t.usage || {};
     var segs = [['input', '输入'], ['cacheRead', '缓存读'], ['cacheWrite', '缓存写'], ['output', '输出']]
       .filter(function (s) { return u[s[0]] > 0; });
     var total = segs.reduce(function (a, s) { return a + u[s[0]]; }, 0);
-    // token 一条都没采到就别画那条空槽 —— 空进度条看着像"用了 0%", 是误导。
-    // 光有色块看不出哪段是什么 (tooltip 要悬停才知道), 所以条后面always跟图例。
     var io = total > 0
-      ? '<span class="sb-io" title="累计 token I/O · 共 ' + fmtTok(total) + '">' +
-          '<span class="k">token i/o</span>' +
-          '<span class="sb-bar">' + segs.map(function (s) {
+      ? '<div class="io" title="累计 token I/O · 共 ' + fmtTok(total) + '">' +
+          '<span class="bar">' + segs.map(function (s) {
             return '<span class="seg" style="width:' + (u[s[0]] / total * 100).toFixed(2) + '%;background:' +
               COLORS[s[0]] + '" title="' + s[1] + ': ' + fmtTok(u[s[0]]) + '"></span>';
           }).join('') + '</span>' +
-          '<span class="sb-leg">' + segs.map(function (s) {
+          '<span class="leg">' + segs.map(function (s) {
             return '<span class="lg"><i style="background:' + COLORS[s[0]] + '"></i>' + s[1] +
               '<b>' + fmtTok(u[s[0]]) + '</b></span>';
           }).join('') + '</span>' +
-        '</span>'
+        '</div>'
       : '';
-    // 值为 0 = 该指标没有数据 (老记录 / 网关不报 usage), 压暗成 "–" 与真实的 0 区分。
+    // 值为 0 = 该指标没有数据 (老记录 / 网关不报 usage), 不占格子。
     var st = function (k, n, text) {
-      return '<span class="st' + (n ? '' : ' void') + '" title="' + esc(TIP[k] || k) + '">' +
-        '<span class="k">' + k + '</span><span class="v">' + (n ? esc(text) : '–') + '</span></span>';
+      return n ? '<span class="kv" title="' + esc(TIP[k] || k) + '">' +
+        '<span class="v">' + esc(text) + '</span><span class="k">' + k + '</span></span>' : '';
     };
     var cache = (u.cacheRead || 0) + (u.cacheWrite || 0);
-    sbEl.innerHTML =
-      '<span class="pill' + (run ? ' run' : '') + '"><span class="d"></span>' + (run ? '进行中' : '空闲') + '</span>' +
-      (t.model ? '<span class="model" title="' + esc(t.model) + '">' + esc(t.model) + '</span>' : '') +
-      st('turns', t.turns, t.turns) +
-      st('tools', u.tools, u.tools) +
-      st('api', u.calls, u.calls) +
-      st('ctx', u.ctxPeak, fmtTok(u.ctxPeak)) +
-      st('out', u.output, fmtTok(u.output)) +
-      st('cache', cache, fmtTok(cache)) +
-      st('time', liveDur(t), fmtDur(liveDur(t))) +
-      io;
-  };
-
-  // ── 线程 ──
-  var applySummary = function (d) {
-    S.base = d.base; S.tags = d.tags || []; S.graphs = d.graphs || [];
-    S.at = d.at || Date.now(); S.recvAt = Date.now();
-    $('#side-sub').textContent = d.base || '';
-    renderTags(); topbar(); renderStatus(curTag()); renderGraph();
-  };
-
-  var loadThread = function (target, limit) {
-    return api('api/thread', limit ? { target: target, limit: limit } : { target: target }).then(function (d) {
-      if (!d.ok || target !== S.target) return;
-      var inner = $('#thread-in');
-      if (!d.turns.length) { inner.innerHTML = '<div class="empty">这个会话还没有记录</div>'; return; }
-      // 默认只取最近若干轮 (贴底阅读), 更早的按需一次性拉全。
+    // 忙闲已在名片的状态里, 这里只留模型。
+    el.innerHTML =
+      '<div class="hd"><span class="lb">用量</span>' +
+        (t.model ? '<span class="model" title="' + esc(t.model) + '">' + esc(t.model.replace(/^claude-/, '')) + '</span>' : '') +
+      '</div>' +
+      '<div class="grid">' +
+        st('turns', t.turns, t.turns) + st('tools', u.tools, u.tools) + st('api', u.calls, u.calls) +
+        st('ctx', u.ctxPeak, fmtTok(u.ctxPeak)) + st('out', u.output, fmtTok(u.output)) +
+        st('cache', cache, fmtTok(cache)) + st('time', liveDur(t), fmtDur(liveDur(t))) +
+      '</div>' + io;
+    syncFoot();
+  };
+
+  // ── 右栏头: 这个群聊 / 私聊是什么 (关系 / 日程视图时是视图名) ──
+  var renderHead = function () {
+    var who = $('#ch-who'), acts = $('#ch-acts');
+    if (VIEW !== 'msgs') {
+      who.innerHTML = '<span class="t">' + (VIEW === 'world' ? '关系图' : '日程') + '</span>' +
+        '<span class="sub">' + esc(nameOf(ROLE)) + (VIEW === 'world' ? ' 的家谱与协作网' : ' 名下的定时任务与工单') + '</span>';
+      acts.innerHTML = '<button class="vb" id="ch-back">‹ 对话</button>';
+      $('#ch-back').onclick = function () { setView('msgs'); };
+      return;
+    }
+    var c = convOf(CONV);
+    if (!c) { who.innerHTML = ''; acts.innerHTML = ''; return; }
+    if (c.kind === 'wizard') {
+      who.innerHTML = avatarOf(c) + '<span class="l"><span class="t">' + nm(c.peer, c.name) + '</span>' +
+        '<span class="sub">私聊 · ' + c.count + ' 条</span></span>';
+    } else {
+      var ms = membersOf(c);
+      who.innerHTML = avatarOf(c) + '<span class="l"><span class="t">' + esc(c.name) + '</span>' +
+        '<span class="sub">群聊 · ' + ms.length + ' 位成员 · ' +
+          ms.slice(0, 8).map(function (m) { return esc(m.label || roleLabel(m.role)); }).join('') +
+          (ms.length > 8 ? '…' : '') + '</span></span>';
+    }
+    acts.innerHTML = WITH
+      ? '<span class="with">只看我与 ' + nm(WITH) + '</span><button class="vb" id="ch-all">看全部</button>'
+      : '';
+    var x = $('#ch-all');
+    if (x) x.onclick = function () { selectConv(CONV, ''); };
+  };
+
+  // ── 消息行 ──
+  // 同一条消息从发话方看靠右、从收信方看靠左 —— 片段不带方向, 由这里按视角包装。
+  // 箭头朝外 = 这条气泡换视角后要去的那一侧; mine 行靠 CSS 翻转。
+  var CHEVRON = '<svg class="fc" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M6 3.5 10.5 8 6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  // 行的另一侧是 .flip: 点它 = 换成这条消息的对端 (我发的 → 收信方; 别人发的 → 发话方)。
+  var rowHTML = function (m) {
+    learn(m.from, m.fromName, m.fromLabel);
+    learn(m.to, m.toName, m.toLabel);
+    if (m.dir === 'mark') {
+      return '<div class="mrow mark" data-id="' + esc(m.id) + '" data-turn="' + esc(m.turnId || m.id) + '" data-ts="' + m.ts + '" data-sig="' + esc(m.sig) + '">' + m.html + '</div>';
+    }
+    var mine = m.from === ROLE;
+    var other = mine ? m.to : m.from;
+    // 看 key 而不是会话列表: 换视角就地重包时, 列表还是上一个 role 的。
+    var group = CONV.indexOf('p:') !== 0;
+    // 群里我不是收信方的那条 (X → Y), 头上写清是说给谁的。
+    var to = !mine && m.to !== ROLE && group ? '<span class="to">→ ' + nm(m.to, m.toName) + '</span>' : '';
+    var priv = !m.channel && group ? '<span class="ch priv">私聊</span>' : '';
+    var who = mine
+      ? '<span class="to">' + (m.to && m.to !== 'human:' ? '→ ' + nm(m.to, m.toName) : '') + '</span>' + stamp(m.ts)
+      : nm(m.from, m.fromName) + to + priv + stamp(m.ts);
+    var sw = canSwitch(other);
+    var flip = '<button class="flip" data-r="' + esc(other) + '"' + (sw ? '' : ' disabled tabindex="-1"') +
+      ' aria-label="' + esc(sw ? '切到 ' + nameOf(other) + ' 的视角' : '') + '">' +
+      (sw ? '<span class="fi"><span class="fn">' + esc(nameOf(other)) + '</span>' + CHEVRON + '</span>' : '') + '</button>';
+    var av = mine ? '' : '<button class="av' + (canSwitch(m.from) ? ' go' : '') + '" data-r="' + esc(m.from) + '" title="' + esc(nameOf(m.from)) + '"' + (canSwitch(m.from) ? '' : ' disabled') + '>' + esc(m.fromLabel || roleLabel(m.from)) + '</button>';
+    return '<div class="mrow ' + (mine ? 'mine' : 'them') + '" data-id="' + esc(m.id) + '" data-turn="' + esc(m.turnId || m.id) + '" data-ts="' + m.ts + '"' +
+      (m.ping ? ' data-ping="1"' : '') + ' data-sig="' + esc(m.sig) + '" data-stale-at="' + (m.staleAt || 0) + '">' +
+      '<div class="mcol"><div class="mwho">' + av + who + '</div><div class="mb">' + m.html + '</div></div>' +
+      flip +
+    '</div>';
+  };
+  // ── 🏓 保温 ping 的折叠 ──
+  // ping 不是对话, 但它是真花销, 从时间轴上抹掉就等于说这段时间什么都没发生。
+  // 一次 ping 落成两行 (问 + pong); 相邻的整串收进一条虚线, 展开才见正文。
+  // 展开态是整页一个开关 —— 折行没有稳定 id, 而"想看 ping"是个一次性的念头。
+  var PING_OPEN = false;
+  var unfoldPings = function (root) {
+    root.querySelectorAll('.ping-fold').forEach(function (f) {
+      var body = f.querySelector('.ping-body');
+      while (body && body.firstChild) root.insertBefore(body.firstChild, f);
+      f.remove();
+    });
+  };
+  var foldPings = function (root) {
+    var run = [];
+    var flush = function (before) {
+      if (!run.length) { return; }
+      var seen = {}, n = 0;
+      run.forEach(function (r) {
+        var t = r.getAttribute('data-turn') || r.getAttribute('data-id');
+        if (!seen[t]) { seen[t] = 1; n++; }
+      });
+      var t0 = Number(run[0].getAttribute('data-ts') || 0);
+      var t1 = Number(run[run.length - 1].getAttribute('data-ts') || 0);
+      var span = fmtHM(t0) + (fmtHM(t1) !== fmtHM(t0) ? ' – ' + fmtHM(t1) : '');
+      var d = document.createElement('details');
+      d.className = 'ping-fold';
+      d.open = PING_OPEN;
+      d.innerHTML = '<summary class="ping-sum"><span class="pb">🏓 ×' + n + '</span>' +
+        '<span class="ps">保温 ping</span><span class="pt">' + esc(span) + '</span></summary>' +
+        '<div class="ping-body"></div>';
+      root.insertBefore(d, before);
+      var body = d.querySelector('.ping-body');
+      run.forEach(function (r) { body.appendChild(r); });
+      d.addEventListener('toggle', function () { PING_OPEN = d.open; });
+      run = [];
+    };
+    // 先取快照 —— flush 会把行搬进 details, 边遍历边改 children 会漏行。
+    [].slice.call(root.children).forEach(function (el) {
+      if (el.classList && el.classList.contains('mrow') && el.getAttribute('data-ping') === '1') { run.push(el); return; }
+      flush(el);
+    });
+    flush(null);
+  };
+
+  var bindRow = function (el) {
+    el.querySelectorAll('.flip[data-r]:not([disabled]), .av.go').forEach(function (b) {
+      b.onclick = function () { switchRole(b.getAttribute('data-r')); };
+    });
+  };
+  var rowNode = function (id) {
+    var list = inner.querySelectorAll('.mrow');
+    for (var i = 0; i < list.length; i++) if (list[i].getAttribute('data-id') === id) return list[i];
+    return null;
+  };
+
+  var loadMsgs = function (limit) {
+    var gen = S.gen;
+    if (!CONV) { inner.innerHTML = '<div class="empty">选一个会话</div>'; return Promise.resolve(); }
+    return api('api/msgs', viewParams(limit ? { limit: limit } : {})).then(function (d) {
+      if (!d.ok || gen !== S.gen) return;
+      S.frags = {};
+      d.msgs.forEach(function (m) { S.frags[m.id] = m; });
+      if (!d.msgs.length) { inner.innerHTML = '<div class="empty">这里还没有消息</div>'; return; }
       var more = d.truncated
-        ? '<button class="more-btn" id="more">载入更早的 ' + (d.total - d.turns.length) + ' 轮</button>'
+        ? '<button class="more-btn" id="more">载入更早的 ' + (d.total - d.msgs.length) + ' 条</button>'
         : '';
-      inner.innerHTML = more + d.turns.map(function (t) { return t.html; }).join('');
-      d.turns.forEach(function (t) { markStale(t); });
+      inner.innerHTML = more + d.msgs.map(rowHTML).join('');
       var btn = $('#more');
-      if (btn) btn.onclick = function () { btn.textContent = '载入中…'; loadThread(target, '0'); };
+      if (btn) btn.onclick = function () { btn.textContent = '载入中…'; loadMsgs('0'); };
+      bindRow(inner);
       render(inner);
-      expireTurns();
+      foldPings(inner);
+      expireRows();
       S.pinned = true; toBottom(true);
       // CDN 字体/代码高亮加载完会改变高度, 再吸一次底。
       setTimeout(function () { toBottom(); }, 60);
     });
   };
 
-  // staleAt 由 JSON 单独送来 (不在 html 里, 否则会打乱服务端的 sig 去重), 落到
-  // DOM 上供 expireTurns 定时判定。
-  // 't:' = 一轮对话, 'm:' = 上下文断点行。子 agent 的卡片嵌在父轮里面, 所以按
-  // 整棵子树找 —— 只扫顶层会把它当成"还没渲染过"而重复插一份。
-  var turnNode = function (id) {
-    return $('#thread-in').querySelector('[data-key="t:' + id + '"],[data-key="m:' + id + '"]');
-  };
-  var markStale = function (t) {
-    var n = turnNode(t.id);
-    if (n) n.setAttribute('data-stale-at', t.staleAt || 0);
-  };
-
-  var upsertTurn = function (t) {
-    var inner = $('#thread-in');
+  var upsertMsg = function (m) {
     var empty = inner.querySelector('.empty'); if (empty) empty.remove();
     var stick = S.pinned;
-    var cur = turnNode(t.id);
+    var cur = rowNode(m.id);
+    S.frags[m.id] = m;
+    if (cur && cur.getAttribute('data-sig') === m.sig) return;
+    // 折行会把 .mrow 收进 details, 而下面的按时间插位假定它们都是 inner 的直接子节点。
+    unfoldPings(inner);
+    var next = frag(rowHTML(m)).firstElementChild;
     if (!cur) {
-      inner.insertAdjacentHTML('beforeend', t.html);
-      render(inner);
-    } else if (cur.getAttribute('data-sig') !== t.sig) {
-      var box = frag(t.html).firstElementChild;
-      var eb = childBy(cur, 'bubbles'), nb = box && childBy(box, 'bubbles');
-      if (eb && nb) {
-        var eh = childBy(cur, 'tg-head'), nh = childBy(box, 'tg-head');
+      // 按时间插: SSE 推来的可能是一条更早的消息 (长轮次的入消息晚于别人的回复落盘)。
+      var after = null;
+      inner.querySelectorAll('.mrow').forEach(function (r) {
+        if (Number(r.getAttribute('data-ts')) > m.ts && !after) after = r;
+      });
+      inner.insertBefore(next, after);
+      bindRow(next); render(next);
+    } else {
+      var eb = cur.querySelector('.mb'), nb = next.querySelector('.mb');
+      var ec = eb && eb.firstElementChild, nc = nb && nb.firstElementChild;
+      var ebb = ec && childBy(ec, 'bubbles'), nbb = nc && childBy(nc, 'bubbles');
+      if (ebb && nbb) {
+        var eh = childBy(ec, 'tg-head'), nh = childBy(nc, 'tg-head');
         if (eh && nh) eh.innerHTML = nh.innerHTML;
-        reconcile(eb, nb);
-        cur.setAttribute('data-sig', t.sig);
-      } else if (box) {
-        cur.replaceWith(box); render(inner);
+        reconcile(ebb, nbb);
+        ['data-sig', 'data-stale-at'].forEach(function (a) { cur.setAttribute(a, next.getAttribute(a)); });
+      } else {
+        cur.replaceWith(next); bindRow(next); render(next);
       }
     }
-    markStale(t);
+    foldPings(inner);
     if (stick) toBottom(true);
   };
 
   // 到点了还没有新写入 → 这一轮已经结束: 熄掉呼吸点、移除"正在思考"。
-  var expireTurns = function () {
+  var expireRows = function () {
     var now = srvNow();
-    $('#thread-in').querySelectorAll('.turn-group[data-stale-at]').forEach(function (g) {
+    inner.querySelectorAll('.mrow[data-stale-at]').forEach(function (g) {
       var until = Number(g.getAttribute('data-stale-at') || 0);
       if (!until || now <= until) return;
       g.setAttribute('data-stale-at', '0');
-      // 连内嵌的子 agent 卡片一起熄灯: 父轮都到点了, 它派出去的必然也停了,
-      // 而子卡片没有自己的 data-stale-at (staleAt 只随顶层片段下发)。
       g.querySelectorAll('.tg-dot').forEach(function (d) { d.classList.remove('live'); });
       g.querySelectorAll('.typing').forEach(function (t) { t.remove(); });
     });
   };
 
-  var select = function (target) {
-    if (!target) return;
-    S.target = target;
-    document.querySelector('.app').classList.add('reading');
-    renderTags(); topbar(); renderStatus(curTag());
-    $('#thread-in').innerHTML = '<div class="empty">加载中…</div>';
-    loadThread(target).then(function () { connect(); });
+  // ── role 摘要 ──
+  var applyRole = function (d) {
+    R.at = d.at || Date.now(); R.recvAt = Date.now();
+    R.role = d.role; R.sessions = d.sessions || []; R.convs = d.convs || [];
+    R.relations = !!d.relations; R.schedules = d.schedules || 0; R.stats = d.stats || null;
+    ROLE = d.role.id;
+    learn(d.role.id, d.role.name, d.role.label);
+    R.convs.forEach(function (c) {
+      if (c.peer) learn(c.peer, c.name, c.label);
+      c.subs.forEach(function (s) { learn(s.role, s.name, s.label); });
+    });
+    if (!CONV || !convOf(CONV)) { CONV = d.conv || ''; WITH = ''; }
+    renderRole(); renderProfile(); renderConvs(); renderHead();
   };
-  $('#tb-back').onclick = function () { document.querySelector('.app').classList.remove('reading'); };
 
-  // ── SSE: chat 摘要 + 当前 tag 的 turn 增量。断线指数退避重连。 ──
+  // ── SSE: role 摘要 + 当前窗口的消息增量。断线指数退避重连。 ──
   var backoff = 1000;
   var connect = function () {
     if (S.es) { S.es.close(); S.es = null; }
-    var p = new URLSearchParams({ id: TOKEN, target: S.target });
-    var es = new EventSource('api/events?' + p.toString());
+    var p = new URLSearchParams(viewParams({ id: TOKEN }));
+    var es = new EventSource('api/role-events?' + p.toString());
     S.es = es;
-    es.addEventListener('chat', function (e) { try { applySummary(JSON.parse(e.data)); } catch (err) { } });
-    es.addEventListener('turn', function (e) { try { upsertTurn(JSON.parse(e.data)); } catch (err) { } });
-    es.onopen = function () { backoff = 1000; connEl.className = 'conn'; connEl.title = '实时连接'; };
+    es.addEventListener('role', function (e) { try { applyRole(JSON.parse(e.data)); } catch (err) { } });
+    es.addEventListener('msg', function (e) { try { upsertMsg(JSON.parse(e.data)); } catch (err) { } });
+    es.onopen = function () { backoff = 1000; };
     es.onerror = function () {
-      connEl.className = 'conn off'; connEl.title = '连接断开, 重连中';
       es.close(); if (S.es === es) S.es = null;
       setTimeout(function () { if (!S.es) connect(); }, backoff);
       backoff = Math.min(backoff * 2, 15000);
     };
   };
 
-  // 关系图上随时间变化的只有两样: 呼吸灯该不该亮、"几分钟前"该写几。重建整张图
-  // 会把滚动位置、聚焦态和连线一起抖掉, 所以这里只原地改这两处。
-  var tickWorld = function () {
-    wmapEl.querySelectorAll('.wnode').forEach(function (el) {
-      var n = nodeOf(el.getAttribute('data-t'));
-      if (!n) return;
-      var run = wRunning(n);
-      el.classList.toggle('run', run);
-      var av = el.querySelector('.wav'), dot = el.querySelector('.wav .live');
-      if (run && !dot && av) av.insertAdjacentHTML('beforeend', '<i class="live"></i>');
-      if (!run && dot) dot.remove();
-      var ts = el.querySelector('.wts');
-      if (ts) ts.textContent = fmtAgo(n.lastTs);
+  /** 视角或窗口变了: 摘要、正文、SSE 全部按新参数重来。 */
+  var refresh = function () {
+    S.gen++;
+    syncUrl();
+    inner.innerHTML = '<div class="empty">加载中…</div>';
+    return api('api/role', viewParams()).then(function (d) {
+      if (!d.ok) {
+        document.body.innerHTML = '<div class="empty" style="padding:80px">' + esc(d.error || 'not found') + '</div>';
+        return;
+      }
+      applyRole(d);
+      syncUrl();
+      if (VIEW === 'world' || VIEW === 'plan') { W.sel = ROLE; loadWorld(); }
+      return loadMsgs().then(connect);
     });
   };
 
-  // 本地心跳: 相对时间、运行中判定、耗时都随时间变化, 但服务端没有新事件可推。
-  setInterval(function () {
-    if (!S.tags.length) return;
-    renderTags();
-    renderStatus(curTag());
-    renderGraph();
-    expireTurns();
-    if (VIEW === 'world') tickWorld();
-    else if (VIEW === 'plan') renderPlan();
-  }, TICK_MS);
+  var selectConv = function (key, withRole) {
+    CONV = key; WITH = withRole || '';
+    if (VIEW !== 'msgs') setView('msgs');
+    app.classList.add('reading');
+    renderConvs(); renderHead();
+    S.gen++;
+    syncUrl();
+    inner.innerHTML = '<div class="empty">加载中…</div>';
+    loadMsgs().then(connect);
+  };
 
+  // 换视角: 窗口尽量留在同一个群 —— 从群里的一条消息切过去, 最想看的是对方在这个群
+  // 里的样子; 对方不在这个群 (私聊的另一头) 就交给服务端挑它最近的会话。
+  var switchRole = function (id) {
+    if (!canSwitch(id) || id === ROLE) return;
+    var keep = CONV && CONV.indexOf('c:') === 0 ? CONV : '';
+    var from = ROLE;
+    // 整个频道 / 两人私聊的消息集合与视角无关 —— 只有 with 与 session 按 role 过滤。
+    var same = VIEW === 'msgs' && !WITH && !SESSION && (keep || CONV.indexOf('p:') === 0);
+    // 群里「只看我与 X」时换过去, 对面看到的是「只看我与 from」—— 同一段往来, 选中只看而不是整个群。
+    var withBack = keep && WITH ? from : '';
+    ROLE = id; WITH = withBack; SESSION = '';
+    CONV = keep || (CONV.indexOf('p:') === 0 ? 'p:' + from : '');
+    inner.classList.remove('flipping'); void inner.offsetWidth; inner.classList.add('flipping');
+    if (same) flipWindow(); else refresh();
+  };
+
+  /** 同一窗口换视角: 拿手里的片段就地重包左右, 已渲染的正文整块搬过去; 侧栏交给 SSE 的首个 role 事件。 */
+  var flipWindow = function () {
+    S.gen++;
+    syncUrl();
+    unfoldPings(inner);
+    [].slice.call(inner.querySelectorAll('.mrow')).forEach(function (row) {
+      var m = S.frags[row.getAttribute('data-id')];
+      // 断点 (/clear /new) 是旧视角 role 自己的, 新视角的由下面补拉。
+      if (!m || m.dir === 'mark') { row.remove(); return; }
+      var next = frag(rowHTML(m)).firstElementChild;
+      var ob = row.querySelector('.mb'), nb = next.querySelector('.mb');
+      if (ob && nb) nb.replaceWith(ob);
+      row.replaceWith(next);
+      bindRow(next);
+    });
+    foldPings(inner);
+    expireRows();
+    connect();
+    var gen = S.gen;
+    api('api/msgs', viewParams()).then(function (d) {
+      if (!d.ok || gen !== S.gen) return;
+      d.msgs.filter(function (m) { return m.dir === 'mark'; }).forEach(upsertMsg);
+    });
+  };
+
+  $('#tb-back').onclick = function () { app.classList.remove('reading'); };
 
   // ══ 关系视图 ═══════════════════════════════════════════════════════
   // 三层叠在一起:
   //   1. 聊天卡片 (HTML)  —— 归属; 一张卡 = 一个群
-  //   2. 家谱缩进 (HTML)  —— 层级; 分身缩在父亲下面, 左侧一道折线
-  //   3. 连线   (SVG)     —— 其余的关系; 布局表达不了的那些 (跨卡片的分身、
+  //   2. 家谱缩进 (HTML)  —— 层级; 分身 / 子 wizard 缩在父亲下面, 左侧一道折线
+  //   3. 连线   (SVG)     —— 其余的关系; 布局表达不了的那些 (跨卡片的家谱、
   //                         同群与跨群的派活、流水线的一步)
   // 前两层撑起版面 (所以文字永远可读), 第三层才是"图"。
   var EDGE = {
-    clone: { c: '#8250df', label: '分身', dash: '' },
+    // 分身: 从父亲某个 session 节点 fork, 带着上下文; 子 wizard: 父亲 spawn 的白板。
+    clone: { c: '#8250df', label: '分身', dash: '', tip: '从父亲的某个 session 节点 fork 出来, 开局带着那一刻的上下文' },
+    spawn: { c: '#bc4c00', label: '子 wizard', dash: '9 3', tip: '父亲 spawn 的白板 wizard, 只有出身、没有继承上下文' },
     peer: { c: '#0969da', label: '派活', dash: '5 4' },
     graph: { c: '#0a7d6b', label: '流水线', dash: '2 3' },
   };
@@ -494,13 +754,16 @@
 
   var wRunning = function (n) { return n.busy || (!!n.runningUntil && srvNow() < n.runningUntil); };
 
-  // 卡片里的名字不重复卡片头已经说过的话。默认名是 `聊天名#tag`, 而卡片头写着
-  // 聊天名、行尾还挂着 `#tag` —— 三处同一个词。所以: 起过名字就显示名字, 没起过
-  // 就只显示 `#tag`; 名字本身已经以 `#tag` 收尾时也不再重复那枚 badge。
-  var shortName = function (n) {
-    var fallback = n.chat ? (n.tag ? n.chat + '#' + n.tag : n.chat) : n.tag;
-    return n.name && n.name !== fallback ? n.name : (n.tag ? '#' + n.tag : '默认');
+  // ── 走进一个 wizard ──
+  // 任一票据都能看任一 role (见 chat-http), 所以走进谁就是把视角切成谁 —— 不再整页跳。
+  var chatOf = function (base) {
+    return (W.chats || []).filter(function (c) { return c.base === base; })[0];
   };
+  var canOpen = function (n) { return !!n; };
+  var openNode = function (target) { if (target) switchRole(target); };
+
+  // 名字全局唯一, 卡片头写的是聊天名, 节点上只写它自己的 `.name`。
+  var shortName = function (n) { return '.' + (n.name || n.tag || n.target); };
 
   // 与 sel 相连的一切 (含 sel 自己)。聚焦时其余的压暗而不是移除 —— 位置稳定,
   // 反复点不同节点时版面不会跳。
@@ -522,31 +785,50 @@
   };
 
   var renderWTools = function () {
-    var counts = { clone: 0, peer: 0, graph: 0 };
+    var counts = { clone: 0, spawn: 0, peer: 0, graph: 0 };
     W.edges.forEach(function (e) { counts[e.kind] = (counts[e.kind] || 0) + 1; });
     var cross = W.edges.filter(function (e) { return e.cross; }).length;
     var chips = Object.keys(EDGE).map(function (k) {
       return '<button class="chip' + (W.kinds[k] ? ' on' : '') + '" data-k="' + k + '" ' +
-        'style="--c:' + EDGE[k].c + '"><i></i>' + EDGE[k].label +
+        'style="--c:' + EDGE[k].c + '"' + (EDGE[k].tip ? ' title="' + EDGE[k].tip + '"' : '') + '><i></i>' + EDGE[k].label +
         '<b>' + (counts[k] || 0) + '</b></button>';
     }).join('');
+    var force = W.layout === 'force';
     wtoolsEl.innerHTML =
       '<div class="wlegend">' + chips + '</div>' +
+      '<div class="wlay">' +
+        '<button class="lb' + (force ? '' : ' on') + '" data-lay="cards" ' +
+          'title="按聊天分卡, 分身 / 子 wizard 缩在父亲下面 —— 归属与层级最准">▦ 卡片</button>' +
+        '<button class="lb' + (force ? ' on' : '') + '" data-lay="force" ' +
+          'title="wizard 之间的力导向图, 聊天收进节点 —— 协作关系最直观">🕸 关系网</button>' +
+      '</div>' +
       '<div class="wstat">' +
         W.nodes.length + ' 个 wizard · ' + W.chats.length + ' 个聊天' +
         (cross ? ' · <b>' + cross + '</b> 条跨聊天关系' : '') +
         (W.degraded ? ' · <span class="warn" title="注册表不可达 (独立 svr 部署), 只画观测到的往来">名册缺席</span>' : '') +
-        '<span class="hint">单击聚焦 · 双击进入线程</span>' +
+        '<span class="hint">单击聚焦 · 双击进入' + (force ? ' · 拖动钉住' : ' (外聊天整页跳过去)') + '</span>' +
       '</div>' +
+      (force ? '<button class="chip" id="wre" title="松开所有钉住的节点, 重新排一遍">↻ 重排</button>' : '') +
       '<button class="chip only' + (W.onlyRel ? ' on' : '') + '" id="wonly" ' +
         'title="把此刻不属于任何关系的 wizard 收起来 —— 剩下的就是这张协作网本身">' +
         (W.onlyRel ? '☑' : '☐') + ' 只看有关系的</button>' +
       (W.sel ? '<button class="chip clear" id="wclear">✕ 取消聚焦</button>' : '');
+    wtoolsEl.querySelectorAll('.lb').forEach(function (b) {
+      b.onclick = function () {
+        var v = b.getAttribute('data-lay');
+        if (v === W.layout) return;
+        setLayout(v);
+        renderWorld();
+      };
+    });
+    var re = $('#wre');
+    if (re) re.onclick = function () { FX.pos = {}; FX.sig = ''; renderForce(); };
     wtoolsEl.querySelectorAll('.chip[data-k]').forEach(function (b) {
       b.onclick = function () {
         var k = b.getAttribute('data-k');
         W.kinds[k] = W.kinds[k] ? 0 : 1;
-        renderWTools(); drawEdges();
+        renderWTools();
+        if (W.layout === 'force') renderForce(); else drawEdges();
       };
     });
     var only = $('#wonly');
@@ -557,7 +839,6 @@
 
   var nodeHTML = function (n, depth) {
     var run = wRunning(n), nm = shortName(n);
-    var dupTag = !n.tag || nm === '#' + n.tag || nm.slice(-(n.tag.length + 1)) === '#' + n.tag;
     var bits = [];
     if (n.model) bits.push(n.model.replace(/^claude-/, ''));
     if (n.cwd) bits.push('📁 ' + shortPath(n.cwd, 1));
@@ -565,15 +846,14 @@
     if (n.taskTurns) bits.push('⏰ ' + n.taskTurns);
     if (n.peerTurns) bits.push('✉ ' + n.peerTurns);
     return '<div class="wnode' + (n.self ? ' self' : '') + (run ? ' run' : '') +
-        (n.alive ? '' : ' cold') + (n.local ? ' local' : '') + (degree(n.target) ? ' rel' : '') +
+        (n.alive ? '' : ' cold') + (n.target === ROLE ? ' local' : '') + (degree(n.target) ? ' rel' : '') +
         '" data-t="' + esc(n.target) + '" style="margin-left:' + (depth * 16) + 'px">' +
-      (depth ? '<span class="lin" title="分身"></span>' : '') +
+      (depth ? (n.inherited ? '<span class="lin" title="分身"></span>' : '<span class="lin sp" title="子 wizard"></span>') : '') +
       '<span class="wav">' + esc(n.label) + (run ? '<i class="live"></i>' : '') + '</span>' +
       '<span class="wbody">' +
         '<span class="wl1">' +
           '<b class="wname" title="' + esc(n.name || n.target) + '">' + esc(nm) + '</b>' +
-          (dupTag ? '' : '<span class="wtag">#' + esc(n.tag) + '</span>') +
-          (n.inherited ? '<span class="wih" title="开局继承了父亲的上下文">⧉</span>' : '') +
+          (n.inherited ? '<span class="wih" title="分身: 从父亲的 session 节点 fork, 开局带着那一刻的上下文">⧉</span>' : '') +
           '<span class="wts">' + esc(fmtAgo(n.lastTs)) + '</span>' +
         '</span>' +
         (n.description ? '<span class="wjob">' + esc(n.description) + '</span>' : '') +
@@ -596,7 +876,7 @@
       }).length;
       var rows = shown.map(function (mm) {
         var n = nodeOf(mm.target);
-        // 「只看有关系的」会把父亲筛掉而留下分身 —— 那时的缩进没有参照物, 拉平。
+        // 「只看有关系的」会把父亲筛掉而留下孩子 —— 那时的缩进没有参照物, 拉平。
         var d = W.onlyRel ? 0 : mm.depth;
         return n ? nodeHTML(n, d) : '';
       }).join('');
@@ -615,18 +895,24 @@
       '</section>';
     }).filter(Boolean).join('');
     wmapEl.innerHTML = '<svg class="wedges" id="wedges"></svg><div class="wgrid">' +
-      (cards || '<div class="empty">此刻没有任何协作关系 —— 派活 / 生分身之后这里就有边了</div>') + '</div>';
+      (cards || '<div class="empty">此刻没有任何协作关系 —— 派活 / 生分身 / 生子 wizard 之后这里就有边了</div>') + '</div>';
     wmapEl.querySelectorAll('.wnode').forEach(function (el) {
       var t = el.getAttribute('data-t');
       if (hood && !hood[t]) el.classList.add('dim');
       if (t === W.sel) el.classList.add('sel');
+      if (canOpen(nodeOf(t))) el.classList.add('go');
       el.onclick = function () { W.sel = (W.sel === t ? '' : t); renderWorld(); };
-      el.ondblclick = function () {
-        // 双击 = 进它的线程。只有同聊天的节点有线程可进 —— 凭据按聊天关
-        // (见 chat-http 的 capability 说明), 外聊天的节点只有身份与关系。
-        var n = nodeOf(t);
-        if (n && n.local) { setView('thread'); select(t); }
-      };
+      // 双击 = 走进它: 视角切成它 (见 openNode)。
+      el.ondblclick = function () { openNode(t); };
+    });
+    // 卡片头 = 那个群本身。点它进那个群里最近活跃的那一栏 —— 图上找不到哪个
+    // 节点该双击的时候, 这是最直觉的入口。
+    wmapEl.querySelectorAll('.wch').forEach(function (h) {
+      var c = chatOf(h.parentNode.getAttribute('data-base'));
+      var first = c && c.members.filter(function (mm) { return canOpen(nodeOf(mm.target)); })[0];
+      if (!first) return;
+      h.classList.add('go');
+      h.onclick = function () { openNode(first.target); };
     });
   };
 
@@ -698,8 +984,330 @@
     svg.innerHTML = '<defs>' + defs + '</defs>' + paths;
   };
 
+  // ── 力导向布局 ────────────────────────────────────────────────────
+  // 卡片布局把「归属」和「层级」交给版面, 代价是聊天必须张张画出来: 一个只出了
+  // 一个分身的群也占一整张卡, 而跨聊天那条边得横穿半张图去找对面。
+  // 换一种折法 —— 只画 wizard, 聊天收进节点自己 (左侧色条 + 群名一行), 位置交给
+  // 力: 同群相吸自然成簇, 家谱 (分身 / 子 wizard) 的边比派活的边短, 家谱于是仍然读得出来。
+  // 两种读法各有盲区 (力导向读不出精确的父子层级), 所以是开关不是替换。
+  // 绿在这一页已经有主 (在跑), 所以群色不用绿 —— 一道绿色条会被读成「它活着」。
+  var CHAT_C = ['#0969da', '#8250df', '#bc4c00', '#bf3989', '#0a7d6b', '#cf222e', '#9a6700', '#4338ca'];
+  var hashOf = function (s) {
+    var v = String(s), h = 0;
+    for (var i = 0; i < v.length; i++) h = (h * 31 + v.charCodeAt(i)) >>> 0;
+    return h;
+  };
+  // 颜色按 base **排序**取位, 而不是按它在列表里的次序取位 —— 列表次序随最近活动
+  // 变, 颜色跟着变就没人记得住哪个色是哪个群; 排序是稳定的, 顺带保证 8 个群之内
+  // 一个不撞。超过 8 个才退回 hash。
+  var chatColor = function (base) {
+    return (FX.color || {})[base] || CHAT_C[hashOf(base) % CHAT_C.length];
+  };
+  // 取位用的是**全部**节点而不是画在图上的那些 —— 拿筛过的集合分色, 一按「只看
+  // 有关系的」每个群的颜色就换一轮。
+  var fxColors = function () {
+    var bases = [];
+    W.nodes.forEach(function (n) { if (bases.indexOf(n.base) < 0) bases.push(n.base); });
+    return bases.sort().reduce(function (m, b, i) { m[b] = CHAT_C[i % CHAT_C.length]; return m; }, {});
+  };
+
+  // pos 按 target 存活: 6 秒一次的轮询重画 DOM, 但坐标沿用, 图不会每轮跳一次。
+  var FX = { pos: {}, size: {}, els: {}, paths: [], color: {}, nodes: [], edges: [], w: 0, h: 0, alpha: 0, raf: 0, drag: null, sig: '' };
+
+  var fxNodes = function () {
+    return W.nodes.filter(function (n) { return !W.onlyRel || degree(n.target); });
+  };
+
+  /** 种子位置: 聊天摆一圈, 成员散在自己那个群周围。确定性 (hash 而不是 random)
+   *  —— 同一批 wizard 每次打开这一页, 图的大致形状是同一个。 */
+  var fxSeed = function (ns) {
+    var bases = [];
+    ns.forEach(function (n) { if (bases.indexOf(n.base) < 0) bases.push(n.base); });
+    var cx = FX.w / 2, cy = FX.h / 2, R = Math.min(FX.w, FX.h) * 0.28;
+    var on = {};
+    ns.forEach(function (n) { on[n.target] = 1; });
+    Object.keys(FX.pos).forEach(function (t) { if (!on[t]) delete FX.pos[t]; });
+    ns.forEach(function (n) {
+      if (FX.pos[n.target]) return;
+      var i = bases.indexOf(n.base);
+      var a = bases.length > 1 ? (i / bases.length) * Math.PI * 2 : 0;
+      var bx = bases.length > 1 ? cx + Math.cos(a) * R : cx;
+      var by = bases.length > 1 ? cy + Math.sin(a) * R : cy;
+      var t = (hashOf(n.target) % 360) * Math.PI / 180;
+      FX.pos[n.target] = { x: bx + Math.cos(t) * 46, y: by + Math.sin(t) * 46, vx: 0, vy: 0, pin: 0 };
+    });
+  };
+
+  var fxTick = function () {
+    var ns = FX.nodes, P = FX.pos, n = ns.length;
+    if (!n) return;
+    var L = Math.max(86, Math.min(190, Math.sqrt(FX.w * FX.h / n) * 0.66));
+    var rep = L * L * 1.15;
+    var i, j, a, b, dx, dy, d, ux, uy, f;
+    // 斥力 —— O(n²), 但这张图按设计就不超过几十个节点 (见 shared/world 的相关性)。
+    for (i = 0; i < n; i++) {
+      a = P[ns[i].target];
+      for (j = i + 1; j < n; j++) {
+        b = P[ns[j].target];
+        dx = b.x - a.x; dy = b.y - a.y;
+        d = Math.sqrt(dx * dx + dy * dy) || 0.01;
+        f = rep / (d * d); ux = dx / d; uy = dy / d;
+        a.vx -= ux * f; a.vy -= uy * f; b.vx += ux * f; b.vy += uy * f;
+      }
+    }
+    // 弹簧 —— 家谱边的静息长度短于派活的, 于是家谱天然抱成一小团。
+    // 静息长度有个下限: 节点是一张一百多像素宽的卡片, 不是一个点。两端贴到一起
+    // 时连线被两张卡各自吃掉一半, 剩下的那截连箭头都放不下 —— 图上就成了一条
+    // 看不见的边。下限按两张卡的半宽算, 横着摆也留得出一段看得见的线。
+    FX.edges.forEach(function (e) {
+      var pa = P[e.from], pb = P[e.to];
+      if (!pa || !pb) return;
+      var za = FX.size[e.from] || { w: 150, h: 36 }, zb = FX.size[e.to] || { w: 150, h: 36 };
+      var ex = pb.x - pa.x, ey = pb.y - pa.y;
+      var ed = Math.sqrt(ex * ex + ey * ey) || 0.01;
+      var kin = e.kind === 'clone' || e.kind === 'spawn';
+      var rest = Math.max((za.w + zb.w) / 2 + 30, kin ? L * 0.8 : L * 1.35);
+      var k = (kin ? 0.06 : 0.032) * Math.min(2.2, 1 + Math.log(1 + e.count) * 0.45);
+      var g = (ed - rest) * k, gx = ex / ed, gy = ey / ed;
+      pa.vx += gx * g; pa.vy += gy * g; pb.vx -= gx * g; pb.vy -= gy * g;
+    });
+    // 同群相吸 + 朝心收 —— 归属在卡片布局里由版面表达, 这里由一股弱引力表达。
+    var cen = {};
+    ns.forEach(function (nd) {
+      var p = P[nd.target], c = cen[nd.base] || (cen[nd.base] = { x: 0, y: 0, n: 0 });
+      c.x += p.x; c.y += p.y; c.n++;
+    });
+    ns.forEach(function (nd) {
+      var p = P[nd.target], c = cen[nd.base];
+      p.vx += (c.x / c.n - p.x) * 0.022 + (FX.w / 2 - p.x) * 0.006;
+      p.vy += (c.y / c.n - p.y) * 0.022 + (FX.h / 2 - p.y) * 0.006;
+    });
+    // 积分。alpha 同时当步长, 于是"冷却"就是自然停住。
+    ns.forEach(function (nd) {
+      var p = P[nd.target];
+      if (p.pin) { p.vx = 0; p.vy = 0; return; }
+      p.vx *= 0.8; p.vy *= 0.8;
+      var sp = Math.sqrt(p.vx * p.vx + p.vy * p.vy), cap = 26;
+      if (sp > cap) { p.vx *= cap / sp; p.vy *= cap / sp; }
+      p.x += p.vx * FX.alpha; p.y += p.vy * FX.alpha;
+    });
+    // 矩形避让 —— 节点是一行字, 不是一个点。圆形斥力挡不住两张卡横向叠在一起,
+    // 而这张图的全部价值就在于那行字读得出来。
+    // 它排在积分之后, 所以收边必须排在它之后 —— 反过来的话, 被挤到边上的节点会
+    // 被推出画布再也回不来 (弱引力拉不过避让)。
+    var pass, pa, pb, sa, sb, mx, my, ox, oy, sh;
+    for (pass = 0; pass < 2; pass++) {
+      for (i = 0; i < n; i++) {
+        for (j = i + 1; j < n; j++) {
+          pa = P[ns[i].target]; pb = P[ns[j].target];
+          sa = FX.size[ns[i].target]; sb = FX.size[ns[j].target];
+          if (!sa || !sb) continue;
+          mx = (sa.w + sb.w) / 2 + 18; my = (sa.h + sb.h) / 2 + 10;
+          dx = pb.x - pa.x; dy = pb.y - pa.y;
+          ox = mx - Math.abs(dx); oy = my - Math.abs(dy);
+          if (ox <= 0 || oy <= 0) continue;
+          if (ox / mx < oy / my) {
+            sh = (dx < 0 ? -1 : 1) * ox;
+            if (pa.pin) pb.x += sh; else if (pb.pin) pa.x -= sh;
+            else { pa.x -= sh / 2; pb.x += sh / 2; }
+          } else {
+            sh = (dy < 0 ? -1 : 1) * oy;
+            if (pa.pin) pb.y += sh; else if (pb.pin) pa.y -= sh;
+            else { pa.y -= sh / 2; pb.y += sh / 2; }
+          }
+        }
+      }
+    }
+    // 收进画布 —— 钉住的也收, 窗口缩小之后那些被人摆在外面的节点得跟着回来。
+    ns.forEach(function (nd) {
+      var p = P[nd.target], z = FX.size[nd.target] || { w: 150, h: 36 };
+      p.x = Math.max(z.w / 2 + 6, Math.min(FX.w - z.w / 2 - 6, p.x));
+      p.y = Math.max(z.h / 2 + 6, Math.min(FX.h - z.h / 2 - 6, p.y));
+    });
+  };
+
+  /** 中心沿 (ux,uy) 走到卡片矩形的边 —— 箭头要落在卡片外面才看得见。 */
+  var fxRim = function (p, s, ux, uy) {
+    var hw = (s ? s.w : 150) / 2 + 3, hh = (s ? s.h : 36) / 2 + 3;
+    var t = Math.min(ux ? hw / Math.abs(ux) : 1e9, uy ? hh / Math.abs(uy) : 1e9);
+    return { x: p.x + ux * t, y: p.y + uy * t };
+  };
+
+  /** 连线只在重排时建一次 —— 逐帧重写 innerHTML 会把一张 50 条边的图拖成幻灯片。
+   *  之后每帧只改 `d`, 聚焦只改描边 (见 fxClasses)。 */
+  var fxEdgesDOM = function () {
+    var svg = $('#wedges');
+    if (!svg) return;
+    var defs = Object.keys(EDGE).map(function (k) {
+      return ['', '-d'].map(function (sfx) {
+        return '<marker id="ah-' + k + sfx + '" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="6" markerHeight="6" ' +
+          'orient="auto-start-reverse"><path d="M0,0 L8,4 L0,8 z" fill="' + EDGE[k].c + '" ' +
+          'opacity="' + (sfx ? '.16' : '.85') + '"/></marker>';
+      }).join('');
+    }).join('');
+    svg.innerHTML = '<defs>' + defs + '</defs>' + FX.edges.map(function (e) {
+      return '<path fill="none" stroke="' + EDGE[e.kind].c + '" ' +
+        'stroke-dasharray="' + (EDGE[e.kind].dash || '') + '">' +
+        '<title>' + esc(nameOf(e.from) + ' → ' + nameOf(e.to)) + ' · ' + EDGE[e.kind].label +
+        (e.count > 1 ? ' ×' + e.count : '') + (e.cross ? ' (跨聊天)' : '') +
+        (e.jobs && e.jobs.length ? ' · 工单 ' + esc(e.jobs.join(' ')) : '') + '</title></path>';
+    }).join('');
+    FX.paths = Array.prototype.slice.call(svg.querySelectorAll('path[stroke]'));
+  };
+
+  var fxPaint = function () {
+    FX.nodes.forEach(function (n) {
+      var p = FX.pos[n.target], el = FX.els[n.target];
+      if (el && p) el.style.transform = 'translate(' + p.x.toFixed(1) + 'px,' + p.y.toFixed(1) + 'px) translate(-50%,-50%)';
+    });
+    FX.edges.forEach(function (e, i) {
+      var path = FX.paths[i], pa = FX.pos[e.from], pb = FX.pos[e.to];
+      if (!path || !pa || !pb) return;
+      var dx = pb.x - pa.x, dy = pb.y - pa.y;
+      var d = Math.sqrt(dx * dx + dy * dy) || 0.01, ux = dx / d, uy = dy / d;
+      var A = fxRim(pa, FX.size[e.from], ux, uy), B = fxRim(pb, FX.size[e.to], -ux, -uy);
+      // 恒向左弓 —— 互相派活的两个 wizard 有两条方向相反的边, 直线会重合成一条。
+      var bow = Math.min(30, d * 0.14);
+      var qx = (A.x + B.x) / 2 - uy * bow, qy = (A.y + B.y) / 2 + ux * bow;
+      path.setAttribute('d', 'M' + A.x.toFixed(1) + ',' + A.y.toFixed(1) +
+        ' Q' + qx.toFixed(1) + ',' + qy.toFixed(1) + ' ' + B.x.toFixed(1) + ',' + B.y.toFixed(1));
+    });
+  };
+
+  var fxLoop = function () {
+    FX.raf = 0;
+    if (W.layout !== 'force' || VIEW !== 'world') return;
+    fxTick();
+    fxPaint();
+    if (!FX.drag) FX.alpha *= 0.972;
+    if (FX.alpha > 0.02 || FX.drag) FX.raf = requestAnimationFrame(fxLoop);
+  };
+
+  var fxHeat = function (a) {
+    FX.alpha = Math.max(FX.alpha, a === undefined ? 0.9 : a);
+    if (!FX.raf) FX.raf = requestAnimationFrame(fxLoop);
+  };
+
+  var fxStop = function () {
+    if (FX.raf) cancelAnimationFrame(FX.raf);
+    FX.raf = 0; FX.drag = null; FX.alpha = 0;
+    wscrollEl.classList.remove('fx');
+    wmapEl.classList.remove('force');
+  };
+
+  var fxClasses = function () {
+    var hood = W.sel ? neighborhood(W.sel) : null;
+    FX.nodes.forEach(function (n) {
+      var el = FX.els[n.target];
+      if (!el) return;
+      el.classList.toggle('dim', !!(hood && !hood[n.target]));
+      el.classList.toggle('sel', n.target === W.sel);
+      el.classList.toggle('pin', !!(FX.pos[n.target] || {}).pin);
+    });
+    // 聚焦时无关的边压到近乎不可见而不是删掉 —— "这张图本来有多密"是判断要不要
+    // 收几个 wizard 的依据 (同 drawEdges)。
+    FX.edges.forEach(function (e, i) {
+      var path = FX.paths[i];
+      if (!path) return;
+      var off = hood && !(e.from === W.sel || e.to === W.sel);
+      var w = Math.min(4, 1.1 + Math.log(1 + e.count) * 0.9);
+      path.setAttribute('stroke-width', (off ? 1 : w).toFixed(2));
+      path.setAttribute('opacity', off ? 0.12 : (e.cross ? 0.95 : 0.55));
+      path.setAttribute('marker-end', 'url(#ah-' + e.kind + (off ? '-d' : '') + ')');
+    });
+  };
+
+  var fxNodeHTML = function (n) {
+    var run = wRunning(n);
+    var tip = [n.name, n.description, n.preview, n.cwd ? '📁 ' + n.cwd : '',
+      [n.model && n.model.replace(/^claude-/, ''), n.turns ? n.turns + ' 轮' : ''].filter(Boolean).join(' · ')]
+      .filter(Boolean).join('\n');
+    return '<div class="fxn' + (n.self ? ' self' : '') + (run ? ' run' : '') + (n.alive ? '' : ' cold') +
+        (canOpen(n) ? ' go' : '') + '" data-t="' + esc(n.target) + '" style="--c:' + chatColor(n.base) + '" ' +
+        'title="' + esc(tip) + '">' +
+      '<span class="wav">' + esc(n.label) + (run ? '<i class="live"></i>' : '') + '</span>' +
+      '<span class="fxb">' +
+        '<b class="wname">' + esc(shortName(n)) + '</b>' +
+        '<span class="fxc">' + esc(n.chat || n.base) + (n.self ? ' · 本会话' : '') + '</span>' +
+      '</span>' +
+    '</div>';
+  };
+
+  // 拖动 = 钉住。点一下 (没挪动) 仍然是聚焦 —— 所以判据是位移而不是事件类型。
+  var fxBind = function (el, t) {
+    el.onpointerdown = function (ev) {
+      if (ev.button) return;
+      var p = FX.pos[t];
+      if (!p) return;
+      FX.drag = { t: t, dx: p.x - ev.clientX, dy: p.y - ev.clientY, moved: 0 };
+      el.classList.add('drag');
+      if (el.setPointerCapture) el.setPointerCapture(ev.pointerId);
+      fxHeat(0.3);
+      ev.preventDefault();
+    };
+    el.onpointermove = function (ev) {
+      if (!FX.drag || FX.drag.t !== t) return;
+      var p = FX.pos[t], nx = ev.clientX + FX.drag.dx, ny = ev.clientY + FX.drag.dy;
+      FX.drag.moved += Math.abs(nx - p.x) + Math.abs(ny - p.y);
+      p.x = nx; p.y = ny; p.vx = 0; p.vy = 0; p.pin = 1;
+    };
+    el.onpointerup = function () {
+      if (!FX.drag || FX.drag.t !== t) return;
+      var moved = FX.drag.moved;
+      FX.drag = null;
+      el.classList.remove('drag');
+      if (moved < 5) {
+        FX.pos[t].pin = 0;
+        W.sel = (W.sel === t ? '' : t);
+        renderWTools(); fxClasses(); fxHeat(0.12);
+      } else { fxClasses(); fxHeat(0.2); }
+    };
+    el.ondblclick = function () { openNode(t); };
+  };
+
+  var renderForce = function () {
+    var ns = fxNodes();
+    wscrollEl.classList.add('fx');
+    wmapEl.classList.add('force');
+    if (!ns.length) {
+      wmapEl.innerHTML = '<div class="empty">' + (W.loaded ? '此刻没有任何 wizard 在图上' : '加载中…') + '</div>';
+      return;
+    }
+    var box = wscrollEl.getBoundingClientRect();
+    FX.w = Math.max(320, box.width); FX.h = Math.max(300, box.height);
+    FX.nodes = ns;
+    FX.color = fxColors();
+    fxSeed(ns);
+    // 端点被「只看有关系的」筛掉的边没有落脚处 —— 画一根悬空的线只会让人以为漏了谁。
+    var on = {};
+    ns.forEach(function (n) { on[n.target] = 1; });
+    FX.edges = W.edges.filter(edgeOn).filter(function (e) { return on[e.from] && on[e.to]; });
+    // 轮询回来的快照通常一模一样 —— 那就只重画文字, 不重新点火, 免得这张图每 6
+    // 秒自己抖一下。
+    var sig = ns.map(function (n) { return n.target; }).join(',') + '|' +
+      FX.edges.map(function (e) { return e.kind + e.from + '>' + e.to; }).join(',');
+    var fresh = sig !== FX.sig;
+    FX.sig = sig;
+    wmapEl.innerHTML = '<svg class="wedges" id="wedges"></svg>' + ns.map(fxNodeHTML).join('');
+    FX.els = {};
+    wmapEl.querySelectorAll('.fxn').forEach(function (el) {
+      var t = el.getAttribute('data-t');
+      FX.els[t] = el;
+      FX.size[t] = { w: el.offsetWidth, h: el.offsetHeight };
+      fxBind(el, t);
+    });
+    var svg = $('#wedges');
+    svg.setAttribute('viewBox', '0 0 ' + FX.w + ' ' + FX.h);
+    fxEdgesDOM();
+    fxClasses();
+    fxPaint();
+    fxHeat(fresh ? 0.9 : 0.05);
+  };
+
   var renderWorld = function () {
     renderWTools();
+    if (W.layout === 'force') { renderForce(); return; }
+    fxStop();
     renderWMap();
     // 连线要等浏览器把卡片排好 —— 同一帧里量到的是上一次的版面。
     requestAnimationFrame(drawEdges);
@@ -726,7 +1334,7 @@
 
   var wizChip = function (target) {
     var n = nodeOf(target);
-    return '<span class="wchip' + (n && n.local ? ' go' : '') + '" data-t="' + esc(target) + '">' +
+    return '<span class="wchip' + (canOpen(n) ? ' go' : '') + '" data-t="' + esc(target) + '">' +
       esc((n && n.label) || '🧙') + ' ' + esc(nameOf(target)) + '</span>';
   };
 
@@ -752,8 +1360,12 @@
       '<div class="cap">' + (soon.length ? '未来 ' + HORIZON_H + ' 小时内 ' + soon.length + ' 次触发' : '未来 ' + HORIZON_H + ' 小时内没有定时任务') + '</div></div>';
   };
 
+  // 日程跟着 wizard 走: 只列归当前 role 的定时任务, 与它有关的工单 (它开的 / 它在里面)。
   var renderPlan = function () {
-    var ss = W.schedules || [], js = W.jobs || [];
+    var ss = (W.schedules || []).filter(function (x) { return (x.owner || x.createdBy || x.target) === ROLE; });
+    var js = (W.jobs || []).filter(function (j) {
+      return j.owner === ROLE || j.members.some(function (mm) { return mm.target === ROLE; });
+    });
     var open = js.filter(function (j) { return j.status === 'open'; });
     var closed = js.filter(function (j) { return j.status !== 'open'; });
     var schedRows = ss.length
@@ -771,7 +1383,7 @@
             '</div>' +
           '</div>';
         }).join('')
-      : '<div class="pempty">没有定时任务 —— schedule_task 排一个</div>';
+      : '<div class="pempty">' + esc(roleName(ROLE)) + ' 名下没有定时任务 —— 让它 schedule_task 排一个</div>';
 
     var jobRow = function (j) {
       return '<div class="jrow' + (j.status === 'open' ? ' open' : '') + '">' +
@@ -782,7 +1394,7 @@
         '<div class="jm">' + (j.members.length
           ? j.members.map(function (mm) {
               return '<span class="jmm">' + wizChip(mm.target) +
-                (mm.spawned ? '<i class="tmp" title="为这个工单临时生的分身, 收工时回收">临时</i>' : '') +
+                (mm.spawned ? '<i class="tmp" title="为这个工单临时生的 wizard (分身或子 wizard), 收工时回收">临时</i>' : '') +
                 '<em>' + esc((mm.task || '').split('\n')[0].slice(0, 70)) + '</em></span>';
             }).join('')
           : '<span class="jmm none">还没有成员</span>') + '</div>' +
@@ -797,34 +1409,47 @@
       '</section>' +
       '<section class="psec">' +
         '<h3>📋 工单<span>' + open.length + ' 开 / ' + closed.length + ' 收</span></h3>' +
-        (js.length ? open.concat(closed).map(jobRow).join('') : '<div class="pempty">没有工单 —— 一次派出两个以上分身时 open_job 开一个</div>') +
+        (js.length ? open.concat(closed).map(jobRow).join('') : '<div class="pempty">没有工单 —— 一次派出两个以上 wizard 时 open_job 开一个</div>') +
       '</section>';
     planEl.querySelectorAll('.wchip.go').forEach(function (c) {
-      c.onclick = function () { setView('thread'); select(c.getAttribute('data-t')); };
+      c.onclick = function () { openNode(c.getAttribute('data-t')); };
+    });
+  };
+
+  // 关系图上随时间变化的只有两样: 呼吸灯该不该亮、"几分钟前"该写几。重建整张图
+  // 会把滚动位置、聚焦态和连线一起抖掉, 所以这里只原地改这两处。
+  var tickWorld = function () {
+    wmapEl.querySelectorAll('.wnode').forEach(function (el) {
+      var n = nodeOf(el.getAttribute('data-t'));
+      if (!n) return;
+      var run = wRunning(n);
+      el.classList.toggle('run', run);
+      var av = el.querySelector('.wav'), dot = el.querySelector('.wav .live');
+      if (run && !dot && av) av.insertAdjacentHTML('beforeend', '<i class="live"></i>');
+      if (!run && dot) dot.remove();
+      var ts = el.querySelector('.wts');
+      if (ts) ts.textContent = fmtAgo(n.lastTs);
     });
   };
 
   // ══ 视图切换 ═══════════════════════════════════════════════════════
   // 世界快照不走 SSE: 它变动的源头 (spawn / 改职责 / 开收工单 / 排定时) 一条都
-  // 不经过 detail store, 而给它们各自搭一条事件通路, 换来的只是几秒的新鲜度。
-  // 改成"看得见才轮询": 不在关系/日程栏、或者页面在后台, 就一次都不请求。
+  // 不经过 detail store。改成"看得见才轮询": 不在关系/日程栏、或者页面在后台, 就一次都不请求。
   var WORLD_MS = 6000;
   var worldTimer = null;
   var loadWorld = function () {
-    return api('api/world', {}).then(function (d) {
+    return api('api/world', { role: ROLE }).then(function (d) {
       if (!d.ok) return;
       W.at = d.at; W.loaded = true;
       W.nodes = d.nodes || []; W.edges = d.edges || []; W.chats = d.chats || [];
       W.jobs = d.jobs || []; W.schedules = d.schedules || []; W.degraded = !!d.degraded;
-      // 身份回来了, 侧栏那几行也跟着变 —— 名字/职责/家谱都在这份数据里。
-      renderTags();
       if (VIEW === 'world') renderWorld();
       if (VIEW === 'plan') renderPlan();
     }).catch(function () { });
   };
   var pollWorld = function () {
     if (worldTimer) { clearInterval(worldTimer); worldTimer = null; }
-    if (VIEW === 'thread') return;
+    if (VIEW === 'msgs') return;
     worldTimer = setInterval(function () {
       if (!document.hidden) loadWorld();
     }, WORLD_MS);
@@ -832,38 +1457,43 @@
 
   var setView = function (v) {
     VIEW = v;
-    $('#views').querySelectorAll('.vb').forEach(function (b) {
-      b.classList.toggle('on', b.getAttribute('data-view') === v);
-    });
-    thread.hidden = v !== 'thread';
+    thread.hidden = v !== 'msgs';
     $('#pane-world').hidden = v !== 'world';
     $('#pane-plan').hidden = v !== 'plan';
-    // graph 条只对线程有意义 (它讲的是当前这一路被谁驱动)。
-    gbarEl.hidden = v !== 'thread' || !(S.graphs || []).length;
-    document.querySelector('.app').classList.toggle('wide', v !== 'thread');
-    if (v === 'thread') { toBottom(true); }
-    else if (!W.loaded) { (v === 'world' ? (wmapEl.innerHTML = '<div class="empty">加载中…</div>') : (planEl.innerHTML = '<div class="empty">加载中…</div>')); loadWorld(); }
-    else if (v === 'world') renderWorld();
-    else renderPlan();
+    app.classList.toggle('outer', v !== 'msgs');
+    // 手机上关系/日程占满主区 —— 进入即阅读态。
+    if (v !== 'msgs') app.classList.add('reading');
+    renderRole(); renderHead();
+    if (v === 'msgs') { fxStop(); toBottom(true); }
+    else {
+      // 关系图一打开就聚焦在当前 role 身上: 它的邻居亮着, 其余压暗。
+      if (v === 'world') W.sel = ROLE;
+      if (!W.loaded) { (v === 'world' ? wmapEl : planEl).innerHTML = '<div class="empty">加载中…</div>'; }
+      else if (v === 'world') renderWorld();
+      else renderPlan();
+      loadWorld();
+    }
     pollWorld();
   };
-  $('#views').querySelectorAll('.vb').forEach(function (b) {
-    b.onclick = function () { setView(b.getAttribute('data-view')); };
-  });
   // 卡片换行会改变每个节点的坐标 —— 连线必须跟着重画。
-  window.addEventListener('resize', function () { if (VIEW === 'world') requestAnimationFrame(drawEdges); });
+  window.addEventListener('resize', function () {
+    if (VIEW !== 'world') return;
+    if (W.layout === 'force') renderForce(); else requestAnimationFrame(drawEdges);
+  });
+
+  // 本地心跳: 相对时间、运行中判定、耗时都随时间变化, 但服务端没有新事件可推。
+  setInterval(function () {
+    if (!R.role) return;
+    renderProfile();
+    expireRows();
+    if (VIEW === 'world') tickWorld();
+    else if (VIEW === 'plan') renderPlan();
+  }, TICK_MS);
+  // 侧栏的「几分钟前」一分钟刷一次就够 —— 每 3s 重建会把列表的滚动与焦点蹭掉。
+  setInterval(function () { if (R.role && VIEW === 'msgs') renderConvs(); }, 60000);
 
   // ── boot ──
-  api('api/chat', WANT ? { target: WANT } : {}).then(function (d) {
-    if (!d.ok) {
-      document.body.innerHTML = '<div class="empty" style="padding:80px">' + esc(d.error || 'not found') + '</div>';
-      return;
-    }
-    applySummary(d);
-    // 卡片链接带来的那条 turn 决定默认选中的 tag; 否则取最近活跃的。
-    select(d.self && d.self.target ? d.self.target : (S.tags[0] && S.tags[0].target));
-  });
-  // 与线程并行取: 侧栏那几行的名字 / 职责 / 家谱都在这份快照里, 不该等线程渲染完
-  // 才补上。首屏之后就只在关系/日程栏轮询 (见 pollWorld)。
-  loadWorld();
+  // 带着 role / conv 来的链接直接进阅读态 (手机上不先落在会话列表)。
+  if (ROLE || CONV) app.classList.add('reading');
+  refresh();
 })();