wezard 2.1.0 → 2.1.2

package/web/chat.css

@@ -211,16 +211,14 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 .si .ts { margin-left: auto; flex: none; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums }
 .si .pv { display: block; font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .si .pv:empty { display: none }
-
-/* 执行中的 wizard: 头像角上一盏呼吸灯 (同关系图的 .wav .live)。 */
-.ci > .av { position: relative }
-.ci > .av .live {
-  position: absolute; right: 1px; bottom: -3px; width: 9px; height: 9px;
-  border-radius: 50%; background: #1a7f37; border: 2px solid #fff;
-  animation: pulse 1.4s infinite;
+.si-more {
+  display: block; width: 100%; text-align: center; padding: 4px 8px; border: 0;
+  background: transparent; cursor: pointer; font-size: 11.5px; color: var(--mute);
 }
-/* 子项的头像太小, 角上挂不住一盏看得清的灯 —— 挪到名字右边, 与回复头上的 .tg-dot 同大。 */
-.si .l1 .live {
+.si-more:hover { color: var(--accent); font-weight: 600 }
+
+/* 执行中的 wizard: 名字右边一盏呼吸灯, 会话与子项同一位置, 与回复头上的 .tg-dot 同大。 */
+.ci .l1 .live, .si .l1 .live {
   flex: none; align-self: center; width: 7px; height: 7px;
   border-radius: 50%; background: #1a7f37; animation: pulse 1.4s infinite;
 }
@@ -303,6 +301,8 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 .mrow .mb .tool-body section > h2, .mrow .mb .diff-meta,
 .mrow .mb .tool-call > summary:hover { background: var(--bub-soft); border-color: var(--bub-line) }
 .mrow .mb .md-body pre code { background: transparent }
+/* 不是说给人听的 (工具过程框、保温 ping、reminder) 一律白底 —— 底色只留给真正的对话。 */
+.mrow .mb .steps, .ping-fold .mrow { --bub: #fff; --bub-soft: #f6f8fa; --bub-line: #d0d7de }
 /* 展开的工具正文 (command / diff / 文件内容) 是裸 section, 吃的是 TURN_CSS 的白底。 */
 .mrow .mb .tool-body section { background: transparent; border-color: var(--bub-line) }
 .mrow .mb .bubble details { border-color: var(--bub-line) }
@@ -338,7 +338,7 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 .mrow.mark { justify-content: center }
 .mrow.mark > * { flex: 1; max-width: 520px }
 
-/* 视角切换的那一下: 整列消息淡出再按新视角排回来 —— 这一页唯一的编排动效。 */
+/* 换视角后一条旧消息都不在了 (换到别的会话): 整列淡入。有交集的走 chat.js 的逐条 FLIP (位移 + 底色)。 */
 .thread-in.flipping { animation: flip .26s ease }
 @keyframes flip { 0% { opacity: 1 } 45% { opacity: 0; transform: scaleX(.985) } 100% { opacity: 1 } }
 @media (prefers-reduced-motion: reduce) {
@@ -366,12 +366,13 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 /* ── 🏓 keepalive 折叠 ──────────────────────────────────────────────
    保温 ping 不是对话, 但它是真花销 —— 所以留在时间轴上, 只是收成一行虚线。 */
 /* summary 的灰底 / 底线是 SHARED_CSS 里通用 details 的 —— 圆角得自己裁, 底线只在展开时才是分割线。 */
-.ping-fold { border: 1px dashed #d8dee4; border-radius: 10px; background: #fbfcfd; overflow: hidden }
+.ping-fold { border: 1px dashed #d8dee4; border-radius: 10px; background: #fff; overflow: hidden }
 .ping-fold:not([open]) > .ping-sum { border-bottom: 0 }
 .ping-fold > .ping-sum {
-  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
+  display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fff;
   cursor: pointer; list-style: none; font-size: 11.5px; color: #8c959f;
   font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
+  text-transform: none; letter-spacing: 0; /* SHARED_CSS 的 details summary 会转大写 —— 这里是 wizard 名, 大小写敏感 */
 }
 .ping-fold > .ping-sum::-webkit-details-marker { display: none }
 .ping-fold > .ping-sum::after {
@@ -380,7 +381,7 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 }
 .ping-fold[open] > .ping-sum::after { transform: rotate(90deg) }
 .ping-fold > .ping-sum:hover { color: #57606a }
-.ping-fold .pb { color: #57606a; font-weight: 700; flex: none }
+.ping-fold .pb { color: #57606a; font-weight: 700; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .ping-fold .ps { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .ping-fold .pt { flex: none; opacity: .8 }
 .ping-fold .ping-body {
@@ -722,3 +723,12 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 
 /* 过程框里的工具行是 nowrap 的 —— 不裁一刀会把整列撑出横向滚动。 */
 .mb > .turn-group { overflow: hidden }
+
+/* 输入尾巴上的 system-reminder: 默认一个 <reminder> 标签, 点一下展开原文 (见 detail-render.splitReminders)。 */
+.rems { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 14px 10px }
+.rem { cursor: pointer }
+.rem-tag { display: inline-block; border-radius: 4px; padding: 0 5px; font: 11px/1.6 ui-monospace, monospace; color: var(--faint); background: #0000000a }
+.rem-raw { display: none; margin: 0; padding: 3px 8px; border-radius: 6px; background: #0000000a; color: var(--mute); white-space: pre-wrap; word-break: break-word; font: 11px/1.5 ui-monospace, monospace; cursor: text }
+.rem.raw { flex-basis: 100% }
+.rem.raw .rem-raw { display: block }
+.rem.raw .rem-tag { display: none }

package/web/chat.js

@@ -210,6 +210,11 @@
       var eb = childBy(ex, 'bubbles'), nb = childBy(nc, 'bubbles');
       if (eb && nb) {
         swapHead(ex, nc);
+        // 终句刚到: 过程框收起一次。标记留在节点上, 用户之后再点开不会被下一帧收回去。
+        if (nc.hasAttribute('data-fold') && !ex.hasAttribute('data-fold')) {
+          ex.setAttribute('data-fold', '');
+          ex.classList.add('folded');
+        }
         reconcile(eb, nb);
         ex.setAttribute('data-sig', nc.getAttribute('data-sig') || '');
         return ex;
@@ -261,6 +266,12 @@
     if (!s) return;
     if (e.target.closest('.steps-head') || e.target === s || e.target === childBy(s, 'bubbles')) s.classList.toggle('folded');
   });
+  // reminder 块: 摘要 ⇄ 原文。刚划选了一段原文的那次松手不算点击。
+  inner.addEventListener('click', function (e) {
+    var r = e.target.closest && e.target.closest('.rem');
+    if (!r || String(window.getSelection() || '')) return;
+    r.classList.toggle('raw');
+  });
 
   // ── 左栏: 当前 role 的名片 + 会话列表 ──
   var convOf = function (key) { return R.convs.filter(function (c) { return c.key === key; })[0]; };
@@ -305,6 +316,8 @@
   // 展开态按会话各记各的: 点开一个不收起别的, 轮询重画也不动它。
   // 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; }
   };
@@ -324,18 +337,25 @@
     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)) + '</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, lampOf(c.status)) + line(title, c.lastTs, c.preview) +
+        avatarOf(c) + line(title, c.lastTs, c.preview, lampOf(c.status)) +
       '</button>' + subs;
   };
 
@@ -354,6 +374,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);
   };
 
@@ -416,8 +440,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>';
@@ -433,7 +458,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();
@@ -566,7 +591,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>';
@@ -587,18 +612,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);
@@ -624,7 +655,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) {
@@ -642,6 +674,7 @@
       render(inner);
       foldPings(inner);
       expireRows();
+      if (land && land()) return;
       S.pinned = true; toBottom(true);
       // CDN 字体/代码高亮加载完会改变高度, 再吸一次底。
       setTimeout(function () { toBottom(); }, 60);
@@ -731,10 +764,11 @@
   };
 
   /** 视角或窗口变了: 摘要、正文、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>';
@@ -743,7 +777,7 @@
       applyRole(d);
       syncUrl();
       if (VIEW === 'world' || VIEW === 'plan') { W.sel = ROLE; loadWorld(); }
-      return loadMsgs().then(connect);
+      return loadMsgs(undefined, land).then(connect);
     });
   };
 
@@ -773,14 +807,84 @@
     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();
+    if (same) { flipWindow(); return; }
+    var snap = VIEW === 'msgs' && !calm() ? snapRows() : {};
+    var kept = VIEW === 'msgs' ? keepBodies() : {};
+    refresh(function () { adoptBodies(kept); return landFlip(snap); });
+  };
+
+  // ── 换视角的 FLIP: 按 msgid 记下每条气泡的位置与底色, 重包后从旧处滑到新处、旧色渐到新色 ──
+  // 位置动在 .mcol 上, 底色按行内第几颗气泡对上 —— 就地重包与整窗重拉两条路一样用。
+  // 只量视窗里的行 —— 屏外的动了也没人看, 长窗口里逐行 getComputedStyle 是真开销。
+  var BUB = '.bubble.mq, .say > .bubble';
+  var calm = function () { return window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches; };
+  var visibleRows = 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 && b.top < vp.bottom;
+    });
+  };
+  var snapRows = function () {
+    return visibleRows().reduce(function (acc, r) {
+      var col = r.querySelector('.mcol');
+      acc[r.getAttribute('data-id')] = {
+        rect: col.getBoundingClientRect(),
+        bubs: [].slice.call(r.querySelectorAll(BUB)).map(function (b) { return getComputedStyle(b).backgroundColor; }),
+      };
+      return acc;
+    }, {});
+  };
+  var playFlip = function (snap) {
+    var ease = { duration: 340, easing: 'cubic-bezier(.2,.7,.2,1)' };
+    Object.keys(snap).forEach(function (id) {
+      var row = rowNode(id), was = snap[id];
+      var col = row && row.querySelector('.mcol');
+      if (!col || !col.animate) return;
+      var now = col.getBoundingClientRect();
+      var dx = was.rect.left - now.left, dy = was.rect.top - now.top;
+      if (dx || dy) col.animate([{ transform: 'translate(' + dx + 'px,' + dy + 'px)' }, { transform: 'none' }], ease);
+      var bubs = row.querySelectorAll(BUB);
+      was.bubs.forEach(function (from, i) {
+        var b = bubs[i], to = b && getComputedStyle(b).backgroundColor;
+        if (to && to !== from) b.animate([{ backgroundColor: from }, { backgroundColor: to }], ease);
+      });
+    });
+  };
+  // 整窗重拉会把正文换成服务端的新片段 —— 过程框按「已有终句就收起」重新出生, 点开的工具
+  // 与取过的正文全丢, 看上去就是工具那一截在切换中突然没了。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);
+    });
+  };
+  // 整窗重拉后: 滚动锚在第一条新旧都在的消息上, 其余相对它滑动; 一条都不在 (换到了别的会话) 才整列淡入。
+  var landFlip = function (snap) {
+    var anchor = Object.keys(snap).filter(function (id) {
+      var r = rowNode(id); return r && r.getBoundingClientRect().height;
+    })[0];
+    if (!anchor) { inner.classList.remove('flipping'); void inner.offsetWidth; inner.classList.add('flipping'); return false; }
+    thread.scrollTop += rowNode(anchor).querySelector('.mcol').getBoundingClientRect().top - snap[anchor].rect.top;
+    S.pinned = atBottom();
+    playFlip(snap);
+    return true;
   };
 
   /** 同一窗口换视角: 拿手里的片段就地重包左右, 已渲染的正文整块搬过去; 侧栏交给 SSE 的首个 role 事件。 */
   var flipWindow = function () {
     S.gen++;
     syncUrl();
+    var snap = calm() ? {} : snapRows();
     unfoldPings(inner);
     [].slice.call(inner.querySelectorAll('.mrow')).forEach(function (row) {
       var m = S.frags[row.getAttribute('data-id')];
@@ -794,6 +898,7 @@
     });
     foldPings(inner);
     expireRows();
+    playFlip(snap);
     connect();
     var gen = S.gen;
     api('api/msgs', viewParams()).then(function (d) {