wezard 2.1.1 → 2.1.3

package/web/chat.js

@@ -142,7 +142,11 @@
   };
   var bindGo = function (root, sel) {
     root.querySelectorAll(sel || '.go[data-r]').forEach(function (b) {
-      b.onclick = function (e) { e.stopPropagation(); switchRole(b.getAttribute('data-r')); };
+      b.onclick = function (e) {
+        e.stopPropagation();
+        var row = b.closest('.mrow');
+        switchRole(b.getAttribute('data-r'), row && row.getAttribute('data-id'));
+      };
     });
   };
 
@@ -307,15 +311,50 @@
       ms.map(function (m) { return '<i>' + esc(m.label || roleLabel(m.role)) + '</i>'; }).join('') + '</span>';
   };
 
-  var line = function (title, ts, pv, lamp) {
+  var line = function (title, ts, pv, lamp, unread) {
     return '<span class="b"><span class="l1"><span class="t">' + title + '</span>' + (lamp || '') +
       '<span class="ts">' + esc(fmtAgo(ts)) + '</span></span>' +
-      '<span class="pv">' + esc(pv) + '</span></span>';
+      '<span class="l2"><span class="pv">' + esc(pv) + '</span>' +
+      (unread ? '<b class="ub">' + (unread > 99 ? '99+' : unread) + '</b>' : '') + '</span></span>';
+  };
+
+  // ── 未读: 别人说完、我还没读到的话 ──
+  // 服务端给每个会话一份 heard = [说完的时刻, 属于我与谁的那一对], 以及我在群里 / 每一对里
+  // 最后开口的时刻 (mine)。一句话的已读水位 = 它所在那一处「我最后开口」与「我看过」的较晚者:
+  // 属于某一对的看那一对 (群里说过话不等于读过别的线程), 不属于任何一对的看群。
+  // 「看过」记在本地 (刷新 / 换视角都还在), 按视角分账 —— 同一个群换个 role 看, 未读是另一回事。
+  var READ_KEY = 'wezard.role.read';
+  var READ = (function () {
+    try { var v = JSON.parse(localStorage.getItem(READ_KEY) || '{}'); if (v && v.at) return v; } catch (e) { }
+    return { at: {} };
+  })();
+  var saveRead = function () { try { localStorage.setItem(READ_KEY, JSON.stringify(READ)); } catch (e) { } };
+  var readKey = function (key, withRole) { return ROLE + '|' + key + '|' + (withRole || ''); };
+  var seenAt = function (key, withRole) { return READ.at[readKey(key, withRole)] || 0; };
+  var unreadOf = function (c, withRole) {
+    var g = seenAt(c.key);
+    var mark = {};
+    (c.subs || []).forEach(function (s) { mark[s.role] = Math.max(g, s.mine || 0, seenAt(c.key, s.role)); });
+    var groupMark = Math.max(g, c.mine || 0);
+    return (c.heard || []).filter(function (h) {
+      if (withRole && h[1] !== withRole) return false;
+      return h[0] > (h[1] ? (mark[h[1]] !== undefined ? mark[h[1]] : groupMark) : groupMark);
+    }).length;
+  };
+  var reading = function () { return VIEW === 'msgs' && !document.hidden; };
+  // 读整个群 = 群的水位推到此刻 (子项随之全清); 只读一对 = 只推那一对的。
+  var markRead = function (c) {
+    if (!reading() || c.key !== CONV || !unreadOf(c, WITH)) return;
+    var h = c.heard[c.heard.length - 1];
+    READ.at[readKey(c.key, WITH)] = Math.max(R.at, h ? h[0] : 0);
+    saveRead();
   };
 
   // 展开态按会话各记各的: 点开一个不收起别的, 轮询重画也不动它。
   // OPEN_AT = 已经替它自动展开过的那个 CONV —— 选中新会话时展开一次, 之后折不折由人说了算。
   var OPEN = {}, OPEN_AT = '';
+  // 子项默认只露前 SUB_FOLD 个, 其余收在一条展开/折叠条后面; 展开态同样按会话各记各的。
+  var SUB_FOLD = 5, MORE = {};
   var reveal = function () {
     if (CONV && CONV !== OPEN_AT) { OPEN[CONV] = true; OPEN_AT = CONV; }
   };
@@ -335,24 +374,32 @@
     var title = c.kind === 'wizard' ? nm(c.peer, c.name, true) : '<span class="nm chat">' + esc(c.name) + '</span>';
     // 只列与我有往来的: 在群里但没和我说过话的人, 点进去也是空的。
     var talked = OPEN[c.key] ? c.subs.filter(function (s) { return s.count; }) : [];
+    var hidden = talked.length - SUB_FOLD;
+    var bar = hidden > 0
+      ? '<button class="si-more" data-more="' + esc(c.key) + '">' + (MORE[c.key] ? '折叠' : '展开更多') + ' × ' + hidden + '</button>'
+      : '';
+    // 展开条钉在第 SUB_FOLD+1 位, 展开与折叠都不挪: 其余子项展开后接在它下面。
+    var sub = function (s) {
+      var sel = on && s.role === WITH;
+      return '<button class="si' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '" data-with="' + esc(s.role) + '" ' +
+        'title="' + esc('我与 ' + nameOf(s.role) + ' 在这里的 ' + s.count + ' 条往来') + '">' +
+        goSpan('av', s.role, esc(s.label)) +
+        line(nm(s.role, s.name, true), s.lastTs, s.preview, lampOf(s.status), unreadOf(c, s.role)) + '</button>';
+    };
+    var rest = MORE[c.key] ? talked.slice(SUB_FOLD).map(sub).join('') : '';
     var subs = talked.length
-      ? '<div class="subs">' + talked.map(function (s) {
-          var sel = on && s.role === WITH;
-          return '<button class="si' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '" data-with="' + esc(s.role) + '" ' +
-            'title="' + esc('我与 ' + nameOf(s.role) + ' 在这里的 ' + s.count + ' 条往来') + '">' +
-            goSpan('av', s.role, esc(s.label)) +
-            line(nm(s.role, s.name, true), s.lastTs, s.preview, lampOf(s.status)) + '</button>';
-        }).join('') + '</div>'
+      ? '<div class="subs">' + talked.slice(0, SUB_FOLD).map(sub).join('') + bar + rest + '</div>'
       : '';
     var sel = on && !WITH;
     return '<button class="ci' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '">' +
-        avatarOf(c) + line(title, c.lastTs, c.preview, lampOf(c.status)) +
+        avatarOf(c) + line(title, c.lastTs, c.preview, lampOf(c.status), unreadOf(c)) +
       '</button>' + subs;
   };
 
   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'; });
+    R.convs.forEach(markRead);
     // 空着的那一栏不画 —— 对谁都一样: 人没有私聊只是这条规则的一个特例。
     var sec = function (title, list) {
       return list.length ? '<h2>' + title + '<span>' + list.length + '</span></h2>' + list.map(convItem).join('') : '';
@@ -365,6 +412,10 @@
       var key = b.getAttribute('data-conv'), w = b.getAttribute('data-with') || '';
       b.onclick = function () { clickItem(key, w); };
     });
+    convsEl.querySelectorAll('[data-more]').forEach(function (b) {
+      var key = b.getAttribute('data-more');
+      b.onclick = function () { MORE[key] = !MORE[key]; renderConvs(); };
+    });
     bindGo(convsEl);
   };
 
@@ -427,8 +478,9 @@
     // 名字下面那一行就是出身 —— 有父亲的直接写成「谁的什么」(可点过去), 不再另起一条重复。
     // 分身 = 从父亲某个 session 节点 fork 出来的 (带着那一刻的上下文);
     // 子 wizard = 父亲 spawn 的白板, 只有出身、没有继承。
-    var kind = !r.parent
-      ? esc(r.kind === 'human' ? '人' : 'wizard')
+    // 人不挂身份行 —— 名字本身就够了。
+    var kind = r.kind === 'human' ? ''
+      : !r.parent ? '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>';
@@ -444,7 +496,7 @@
     $('#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 + (r.kind === 'wizard' ? '<span class="st" id="rb-st"></span>' : '') + '</span></span></div>' +
+          (kind ? '<span class="k">' + kind + (r.kind === 'wizard' ? '<span class="st" id="rb-st"></span>' : '') + '</span>' : '') + '</span></div>' +
       (r.description ? '<p class="job">' + esc(r.description) + '</p>' : '') +
       '<div class="facts">' + facts.join('') + '</div>';
     paintStatus();
@@ -577,7 +629,7 @@
       (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) + '">' +
+      (m.ping ? ' data-ping="1" data-ping-who="' + esc(m.dir === 'in' ? m.toName : m.fromName) + '"' : '') + ' 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>';
@@ -598,18 +650,24 @@
     var run = [];
     var flush = function (before) {
       if (!run.length) { return; }
-      var seen = {}, n = 0;
+      // 群窗里几个 wizard 同时挂机, 它们的 ping 会交错成一串 —— 按 wizard 分开计数, 不相加。
+      var seen = {}, per = {}, order = [];
       run.forEach(function (r) {
         var t = r.getAttribute('data-turn') || r.getAttribute('data-id');
-        if (!seen[t]) { seen[t] = 1; n++; }
+        var w = r.getAttribute('data-ping-who') || '';
+        if (seen[t]) { return; }
+        seen[t] = 1;
+        if (!per[w]) { per[w] = 0; order.push(w); }
+        per[w]++;
       });
+      var tally = order.map(function (w) { return (w ? '.' + w + ' ' : '') + '×' + per[w]; }).join(' · ');
       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>' +
+      d.innerHTML = '<summary class="ping-sum"><span class="pb">🏓 ' + esc(tally) + '</span>' +
         '<span class="ps">保温 ping</span><span class="pt">' + esc(span) + '</span></summary>' +
         '<div class="ping-body"></div>';
       root.insertBefore(d, before);
@@ -635,7 +693,8 @@
     return null;
   };
 
-  var loadMsgs = function (limit) {
+  // land: 换视角时由它来定位 (锚住一条旧消息), 返回 false 才照常吸底。
+  var loadMsgs = function (limit, land) {
     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) {
@@ -653,6 +712,7 @@
       render(inner);
       foldPings(inner);
       expireRows();
+      if (land && land()) return;
       S.pinned = true; toBottom(true);
       // CDN 字体/代码高亮加载完会改变高度, 再吸一次底。
       setTimeout(function () { toBottom(); }, 60);
@@ -706,7 +766,9 @@
   };
 
   // ── role 摘要 ──
-  var applyRole = function (d) {
+  var applyRole = function (d) { takeRole(d); paintRole(); };
+  // 收下摘要 (视角、会话列表、落地窗口) 与按它画页头侧栏分开: 换视角整窗重拉时, 画要等到新行到手的同一帧。
+  var takeRole = 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;
@@ -720,10 +782,15 @@
     // 没带 conv 的链接 (群里点名字进来) 落在服务端挑的窗口上, 连同它挑的「只看我与谁」;
     // 手里的 conv 失效则只退回整个会话。
     if (!CONV || !convOf(CONV)) { WITH = CONV ? '' : d['with'] || ''; CONV = d.conv || ''; }
+  };
+  var paintRole = function () {
     reveal();
     renderRole(); renderUsage(); renderConvs(); renderHead();
   };
 
+  // 切回标签页时正在读的那项就算读过了。
+  document.addEventListener('visibilitychange', function () { if (!document.hidden) renderConvs(); });
+
   // ── SSE: role 摘要 + 当前窗口的消息增量。断线指数退避重连。 ──
   var backoff = 1000;
   var connect = function () {
@@ -742,19 +809,24 @@
   };
 
   /** 视角或窗口变了: 摘要、正文、SSE 全部按新参数重来。 */
-  var refresh = function () {
+  var refresh = function (land) {
     S.gen++;
     syncUrl();
-    inner.innerHTML = '<div class="empty">加载中…</div>';
+    // 要做 FLIP 就把旧行留到新行到来 —— 中间闪一下「加载中」就量不到旧位置了。
+    if (!land) 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);
+      // 带 land 的 (换视角) 先不画: 页头换了高度, 旧行会在新行到来前先被顶一下, FLIP 的起点就错了。
+      if (land) takeRole(d); else applyRole(d);
       syncUrl();
       if (VIEW === 'world' || VIEW === 'plan') { W.sel = ROLE; loadWorld(); }
-      return loadMsgs().then(connect);
+      return loadMsgs(undefined, land && function () { paintRole(); return land(); }).then(function () {
+        if (land && !inner.querySelector('.mrow')) paintRole();   // 空窗口不走 land, 页头照样要画
+        connect();
+      });
     });
   };
 
@@ -774,7 +846,8 @@
 
   // 换视角: 窗口尽量留在同一个群 —— 从群里的一条消息切过去, 最想看的是对方在这个群
   // 里的样子; 对方不在这个群 (私聊的另一头) 就交给服务端挑它最近的会话。
-  var switchRole = function (id) {
+  // at: 被点的那条消息 —— 换视角后它留在指针底下, 其余的相对它滑动。
+  var switchRole = function (id, at) {
     if (!canSwitch(id) || id === ROLE) return;
     var keep = CONV && CONV.indexOf('c:') === 0 ? CONV : '';
     var from = ROLE;
@@ -784,34 +857,161 @@
     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();
+    var snap = VIEW === 'msgs' && !calm() ? snapRows(at) : null;
+    if (same) { flipWindow(snap); return; }
+    var kept = VIEW === 'msgs' ? keepBodies() : {};
+    refresh(function () {
+      adoptBodies(kept);
+      if (landFlip(snap)) return true;
+      // 一条旧消息都不在了 (换到了别的会话): 没有可配对的, 才整列淡入。
+      inner.classList.remove('flipping'); void inner.offsetWidth; inner.classList.add('flipping');
+      return false;
+    });
   };
 
-  /** 同一窗口换视角: 拿手里的片段就地重包左右, 已渲染的正文整块搬过去; 侧栏交给 SSE 的首个 role 事件。 */
-  var flipWindow = function () {
+  // ── 换视角的 FLIP: 按 msgid 记下每条消息各块的位置与底色, 重排后从旧处滑到新处、旧色渐到新色 ──
+  // 动的是行里的每一块 (名字行、问句气泡、过程框、终句), 不是整列 .mcol: 换边时块在列里的
+  // 相对位置也会变 —— 名字行有没有头像差 6px, 带过程框的列占满整宽、终句在列内从左跳到右,
+  // 只挪整列的话这些块都是直接闪过去的。
+  // 全量记, 不只记视窗里的: 行高随视角变, 屏外的行会被推进视窗。只在前后有一头落在视窗里时才真动。
+  // 回复的外壳 .turn-group 是 overflow:hidden 的 (工具行 nowrap, 不裁会撑出横向滚动)。它一换边就
+  // 立刻在新位置, 里面的过程框 / 终句要是按屏上绝对位移平移, 起跑时整个在壳外, 被裁得一干二净 ——
+  // 看上去就是对侧空白盖住了气泡。所以壳自己算一块, 壳里的块只补「相对壳」的那点差: 前后都在壳内,
+  // 途中也就不出壳。
+  var PIECES = '.mwho, .mb > *, .mb > .turn-group > .bubbles > *';
+  var BUB = '.bubble.mq, .say > .bubble';
+  var calm = function () { return window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches; };
+  var rowsById = function () {
+    return [].slice.call(inner.querySelectorAll('.mrow:not(.mark)')).reduce(function (acc, r) {
+      acc[r.getAttribute('data-id')] = r; return acc;
+    }, {});
+  };
+  var piecesOf = function (row) { return [].slice.call(row.querySelectorAll(PIECES)); };
+  // 先把所有矩形读完再读底色 —— 读与读之间没有写, 整次快照只排一次版。
+  var snapRows = function (at) {
+    var rows = rowsById();
+    var shot = Object.keys(rows).reduce(function (acc, id) {
+      var rects = piecesOf(rows[id]).map(function (el) { return el.getBoundingClientRect(); });
+      if (rects.some(function (b) { return b.height; })) acc[id] = { rects: rects };   // 关着的 ping 组里 = 看不见
+      return acc;
+    }, {});
+    Object.keys(shot).forEach(function (id) {
+      shot[id].bubs = [].slice.call(rows[id].querySelectorAll(BUB)).map(function (b) { return getComputedStyle(b).backgroundColor; });
+    });
+    return { at: at && shot[at] ? at : '', rows: shot };
+  };
+  // 滚动锚: 优先被点的那条, 否则第一条前后都看得见的; 把它的首块挪回旧的屏上位置。
+  var anchorScroll = function (snap, rows) {
+    var head = function (id) { var el = rows[id] && rows[id].querySelector(PIECES); return el && el.getBoundingClientRect(); };
+    var shown = function (id) { var b = head(id); return b && b.height; };
+    var id = snap.at && shown(snap.at) ? snap.at : Object.keys(snap.rows).filter(shown)[0];
+    if (!id) return false;
+    thread.scrollTop += head(id).top - snap.rows[id].rects[0].top;
+    S.pinned = atBottom();
+    return true;
+  };
+  var playFlip = function (snap, rows) {
+    var ease = { duration: 340, easing: 'cubic-bezier(.2,.7,.2,1)' };
+    var vp = thread.getBoundingClientRect();
+    var onScreen = function (b) { return b.height && b.bottom > vp.top && b.top < vp.bottom; };
+    // 同样先整批读, 再整批写。宽度变了的块 (别人的气泡被列撑宽, 自己的收回内容宽) 贴着新的
+    // 那一侧对齐: 靠右的行比右边缘, 靠左的比左边缘。
+    var plan = Object.keys(snap.rows).reduce(function (acc, id) {
+      var row = rows[id], was = snap.rows[id];
+      if (!row) return acc;
+      var right = row.classList.contains('mine');
+      var shell = null, lift = [0, 0];   // 这一行 .turn-group 的位移, 壳里的块要减掉它
+      piecesOf(row).forEach(function (el, i) {
+        var a = was.rects[i], b = el.getBoundingClientRect();
+        if (!a || !el.animate) return;
+        var dx = right ? a.right - b.right : a.left - b.left, dy = a.top - b.top;
+        if (el.classList.contains('turn-group')) { shell = el; lift = [dx, dy]; }
+        else if (shell && shell.contains(el)) { dx -= lift[0]; dy -= lift[1]; }
+        if (!(onScreen(a) || onScreen(b))) return;
+        if (dx || dy) acc.push([el, [{ transform: 'translate(' + dx + 'px,' + dy + 'px)' }, { transform: 'none' }]]);
+      });
+      var bubs = row.querySelectorAll(BUB);
+      was.bubs.forEach(function (from, i) {
+        var b = bubs[i], to = b && getComputedStyle(b).backgroundColor;
+        if (to && to !== from) acc.push([b, [{ backgroundColor: from }, { backgroundColor: to }]]);
+      });
+      return acc;
+    }, []);
+    plan.forEach(function (p) { p[0].animate(p[1], ease); });
+    // 对侧那片空白 (.flip) 是立即到新布局的, 它的 sticky 箭头与 hover 底色会画在正滑过来的
+    // 气泡上面 —— 滑行期间把它藏起来、把列抬到上层 (chat.css 的 .fl-run), 落定再放出来。
+    if (!plan.length) return;
+    clearTimeout(S.flRun);
+    inner.classList.add('fl-run');
+    S.flRun = setTimeout(function () { inner.classList.remove('fl-run'); }, ease.duration);
+  };
+  // 重排之后: 先锚滚动, 再从旧位置滑过来。没有一条可配对的返回 false。
+  var landFlip = function (snap) {
+    if (!snap) return false;
+    var rows = rowsById();
+    if (!anchorScroll(snap, rows)) return false;
+    playFlip(snap, rows);
+    return true;
+  };
+  // 整窗重拉会把正文换成服务端的新片段 —— 过程框按「已有终句就收起」重新出生, 点开的工具
+  // 与取过的正文全丢, 看上去就是工具那一截在切换中突然没了。sig 没变的行把旧 .mb 整块搬回来,
+  // 与 flipWindow 同一个做法: 折叠 / 展开态、懒取的工具正文、已渲染的 markdown 一并保住。
+  var keepBodies = function () {
+    return [].slice.call(inner.querySelectorAll('.mrow:not(.mark)')).reduce(function (acc, r) {
+      var mb = r.querySelector('.mb');
+      if (mb) acc[r.getAttribute('data-id')] = { mb: mb, sig: r.getAttribute('data-sig') };
+      return acc;
+    }, {});
+  };
+  var adoptBodies = function (kept) {
+    Object.keys(kept).forEach(function (id) {
+      var row = rowNode(id), k = kept[id];
+      var nb = row && row.getAttribute('data-sig') === k.sig && row.querySelector('.mb');
+      if (nb) nb.replaceWith(k.mb);
+    });
+  };
+  /** 同一窗口换视角: 拿手里的片段就地重包左右, 已渲染的正文整块搬过去。
+   *  先等 role 摘要到手、页头侧栏按新视角画完再重包 —— 页头换了高度 (人没有职责行、有的 wizard 有),
+   *  在动画起跑之后才变, 整列就会在半路被顶一下。旧行在这几十毫秒里原样留着。 */
+  var flipWindow = function (snap) {
     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) {
+    api('api/role', viewParams()).then(function (d) {
       if (!d.ok || gen !== S.gen) return;
-      d.msgs.filter(function (m) { return m.dir === 'mark'; }).forEach(upsertMsg);
+      applyRole(d);
+      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();
+      landFlip(snap);
+      connect();
+      return api('api/msgs', viewParams());
+    }).then(function (d) {
+      if (!d || !d.ok || gen !== S.gen) return;
+      // 断点晚到, 插在视窗上方会把正在滑的整列顶下去 —— 没吸底时锚住屏上第一条, 插完挪回原处。
+      var marks = d.msgs.filter(function (m) { return m.dir === 'mark'; });
+      if (!marks.length) return;
+      var ref = !S.pinned && firstShown(), top = ref && ref.getBoundingClientRect().top;
+      marks.forEach(upsertMsg);
+      if (ref && ref.isConnected) thread.scrollTop += ref.getBoundingClientRect().top - top;
     });
   };
+  var firstShown = function () {
+    var vp = thread.getBoundingClientRect();
+    return [].slice.call(inner.querySelectorAll('.mrow:not(.mark)')).filter(function (r) {
+      var b = r.getBoundingClientRect(); return b.height && b.bottom > vp.top;
+    })[0];
+  };
 
   $('#tb-back').onclick = function () { app.classList.remove('reading'); };
 
@@ -1555,7 +1755,7 @@
     // 手机上关系/日程占满主区 —— 进入即阅读态。
     if (v !== 'msgs') app.classList.add('reading');
     renderRole(); renderHead(); renderUsage();
-    if (v === 'msgs') { fxStop(); toBottom(true); }
+    if (v === 'msgs') { fxStop(); toBottom(true); renderConvs(); }
     else {
       // 关系图一打开就聚焦在当前 role 身上: 它的邻居亮着, 其余压暗。
       if (v === 'world') W.sel = ROLE;