wezard 2.0.4 → 2.0.5

package/web/chat.css

@@ -1,4 +1,4 @@
-/* Rolepage 外壳。消息正文 (turn 卡片) 的样式来自 detail-render 的 SHARED_CSS/TURN_CSS,
+/* Rolepage 外壳。消息正文 (气泡 / 过程框) 的样式来自 detail-render 的 SHARED_CSS/TURN_CSS,
    由 /chat/app.css 拼在本文件之前 —— 这里管骨架、会话列表、左右气泡与页脚总账。
    视觉只押一处: 「视角」。我说的靠右、染成视角色; 别人说的靠左、带头像; 气泡对面
    那片空白是一道门 —— 点下去就换成对方的视角。其余一律安静。 */
@@ -211,13 +211,17 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 .si .pv:empty { display: none }
 
 /* 执行中的 wizard: 头像角上一盏呼吸灯 (同关系图的 .wav .live)。 */
-.ci > .av, .si > .av { position: relative }
-.ci > .av .live, .si > .av .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 > .av .live { right: -1px; width: 8px; height: 8px }
+/* 子项的头像太小, 角上挂不住一盏看得清的灯 —— 挪到名字右边, 与回复头上的 .tg-dot 同大。 */
+.si .l1 .live {
+  flex: none; align-self: center; width: 7px; height: 7px;
+  border-radius: 50%; background: #1a7f37; animation: pulse 1.4s infinite;
+}
 
 /* ── 右栏头: 这个群聊 / 私聊是什么 ───────────────────────────────── */
 .main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--card) }
@@ -227,13 +231,8 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 }
 .chathead .back { display: none; border: 0; background: none; font-size: 22px; color: var(--mute); cursor: pointer; padding: 0 4px }
 .ch-who { display: flex; gap: 11px; align-items: center; min-width: 0; flex: 1 }
-.ch-who > .av:not(.mosaic) { font-size: 26px; line-height: 1; flex: none }
-.ch-who .l { min-width: 0; display: flex; flex-direction: column; gap: 1px }
 .ch-who .t { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.ch-who > .t { flex: none }
-.ch-who .tr { display: flex; align-items: center; gap: 6px; min-width: 0 }
-.ch-who .jump { flex: none; display: inline-flex; padding: 3px; border-radius: 5px; color: var(--mute) }
-.ch-who .jump:hover { color: var(--accent); background: var(--line) }
+.ch-who > .t:not(:only-child) { flex: none }
 .ch-who .sub { font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .ch-acts { display: flex; gap: 8px; align-items: center; flex: none; font-size: 12px; color: var(--mute) }
 .vb {
@@ -276,10 +275,11 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 /* 卡片里那份时刻是详情页要的, 这里已经写在 .mwho 上了 —— 同一条消息不报两次时间。 */
 .mb .tg-time { display: none }
 
-/* 入消息 (问句) 是一颗气泡; 出消息 (回复) 是一张带工具细节的卡片 —— 两者都按视角着色。 */
-.mb > .bubble.mq { border-radius: 14px; border-color: var(--line) }
+/* 入消息 (问句) 是一颗气泡; 出消息 (回复) 是一串气泡, 中间夹着虚线的过程框 ——
+   没有外层卡片, 直接排在对话底上。 */
+.mb > .bubble.mq { border-radius: 14px }
+.mb :is(.bubble.mq, .say > .bubble) { border-color: var(--line) }
 .mb .mq .mmeta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 14px 0; font-size: 11px; color: var(--faint) }
-.mb .mq .md-body { padding: 10px 14px }
 .mb .mq .mmeta + .md-body { padding-top: 4px }
 .mchip { border-radius: 4px; padding: 0 5px; background: #f1f3f6; color: var(--mute) }
 .mchip.priv { color: var(--priv); background: #9a5b1014 }
@@ -287,24 +287,14 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 .mchip.graph { color: #6639ba; background: #8250df12 }
 .mchip.sys { color: #0a7d6b; background: #0a7d6b12 }
 
-/* 自己发出的那条: 整块就是视角色。TURN_CSS 里写死的白卡 / 灰底 (嵌套气泡、
-   代码块、折叠头) 会在蓝底上显成一张张贴纸 —— 这里把它们收回到气泡自己的
-   底色上, 一条消息读起来是一块颜色, 需要再沉一档的才用 --mine-soft。 */
-.mrow.mine .mb > .bubble.mq, .mrow.mine .mb > .turn-group { background: var(--mine); border-color: var(--mine-line) }
-.mrow.mine .mb .bubble, .mrow.mine .mb .typing { background: transparent; border-color: var(--mine-line) }
-.mrow.mine .mb .bubble.user, .mrow.mine .mb .bubble.approval,
-.mrow.mine .mb .md-body code, .mrow.mine .mb .md-body pre,
-.mrow.mine .mb details:not(.tool-call) > summary,
-.mrow.mine .mb .tool-body section > h2, .mrow.mine .mb .diff-meta,
-.mrow.mine .mb .tool-call > summary:hover { background: var(--mine-soft); border-color: var(--mine-line) }
-.mrow.mine .mb .md-body pre code { background: transparent }
-/* 展开的工具正文 (command / diff / 文件内容) 与嵌在父轮里的 subagent 卡片都是裸
-   section, 吃的是 TURN_CSS 的白底 —— 同样收回气泡底色; subagent 的绿色左边线留着。 */
-.mrow.mine .mb .tool-body section { background: transparent; border-color: var(--mine-line) }
-.mrow.mine .mb .turn-group .turn-group { background: transparent; box-shadow: none; border-color: var(--mine-line) }
-.mrow.mine .mb .turn-group .turn-group.subagent { border-left-color: #1a7f3733 }
-.mrow.mine .mb .bubble details, .mrow.mine .mb .tg-head { border-color: var(--mine-line) }
-.mrow.mine .mb .tool-body { border-left-color: var(--mine-line) }
+/* 自己说的话染成视角色 —— 只染气泡; 过程框是底上的一道虚线, 不跟着染。气泡里
+   TURN_CSS 写死的灰底 (行内代码 / 代码块) 沉一档到 --mine-soft, 免得显成贴纸。 */
+.mrow.mine .mb :is(.bubble.mq, .say > .bubble) { background: var(--mine); border-color: var(--mine-line) }
+.mrow.mine .mb :is(.bubble.mq, .say) .md-body :is(code, pre) { background: var(--mine-soft); border-color: var(--mine-line) }
+.mrow.mine .mb :is(.bubble.mq, .say) .md-body pre code { background: transparent }
+/* 气泡跟着行靠右, 时刻翻到气泡左边; 嵌在过程框里的子 agent 不翻 —— 那不是我说的。 */
+.mrow.mine .mb > .turn-group > .bubbles > .say { align-self: flex-end; flex-direction: row-reverse }
+.mrow.mine .mb > .turn-group > .tg-head { justify-content: flex-end }
 /* 工具正文是展开时才取的 (chat.js loadTool) —— 空壳期间说一句在干什么。 */
 .tool-body[data-lazy-turn]:empty::before { content: "加载中…"; color: #8c959f; font-size: 12px }
 .tool-body[data-lazy-turn][data-err]:empty::before { content: "加载失败 · 收起再展开重试"; color: #cf222e }
@@ -342,38 +332,27 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
   .flip { transition: none }
 }
 
-/* ── turn 分组 ──────────────────────────────────────────────────── */
-/* section 的默认样式给了白底+边框, 但没有内边距 —— 气泡/工具行会直接贴着卡片
-   边缘, 所以这里补上一轮对话自己的呼吸空间。 */
+/* ── 一轮回复 ───────────────────────────────────────────────────── */
+/* 只是一根竖轴, 不是卡片: section 的默认白底 / 边框在这里收掉。本轮的账 (模型 /
+   token / 耗时) 压成末尾一行小字 —— 它是这条消息的脚注, 不是标题。 */
 .turn-group {
-  display: flex; flex-direction: column; gap: 10px;
-  padding: 14px 16px 16px; border-radius: 12px; border-color: #e1e6ec;
-  box-shadow: 0 1px 2px #1f23280a;
+  display: flex; flex-direction: column; gap: 8px;
+  padding: 0; border: 0; border-radius: 0; background: none;
 }
-.tg-head {
-  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
-  padding-bottom: 6px; border-bottom: 1px dashed #d8dee4;
+.tg-head { order: 9; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 0 2px }
+.tg-head .chip.model, .tg-head .chip.tier, .tg-tok {
+  padding: 0; border: 0; border-radius: 0; background: none; font-weight: 400;
+  font-size: 10.5px; color: var(--faint); font-family: ui-monospace, Menlo, monospace;
 }
-.tg-dot { width: 7px; height: 7px; border-radius: 50%; background: #b1bac4; flex: none }
-.tg-dot.live { background: #1a7f37; animation: pulse 1.4s infinite }
+.tg-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: none }
+.tg-dot.live { display: block; background: #1a7f37; animation: pulse 1.4s infinite }
 .tg-time { font-size: 11.5px; color: #8c959f; font-family: ui-monospace, Menlo, monospace }
-.tg-tok {
-  font-size: 11px; color: #57606a; background: #f1f3f6; border-radius: 9px;
-  padding: 1px 7px; font-family: ui-monospace, Menlo, monospace;
-}
-.turn-group .bubbles { margin-top: 0 }
-/* 上下文断点 (/clear、/new、会话轮换): 断点条来自 TURN_CSS, 这里再给整张卡片
-   多留一口气 + 描边, 让"这一轮读不到上一轮"在滚动中一眼可辨。 */
-.turn-group.cut { margin-top: 12px }
-.turn-group.cut-clear, .turn-group.cut-new {
-  border-color: #d4a72c66; box-shadow: 0 1px 2px #1f23280a, 0 0 0 3px #d4a72c14;
-}
-/* graph 派的一轮: 卡片本身也着色, 滚动时不必读归因条就知道这不是人发的。 */
-.turn-group.graph { border-color: #8250df44 }
 
 /* ── 🏓 keepalive 折叠 ──────────────────────────────────────────────
    保温 ping 不是对话, 但它是真花销 —— 所以留在时间轴上, 只是收成一行虚线。 */
-.ping-fold { border: 1px dashed #d8dee4; border-radius: 10px; background: #fbfcfd }
+/* summary 的灰底 / 底线是 SHARED_CSS 里通用 details 的 —— 圆角得自己裁, 底线只在展开时才是分割线。 */
+.ping-fold { border: 1px dashed #d8dee4; border-radius: 10px; background: #fbfcfd; 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;
   cursor: pointer; list-style: none; font-size: 11.5px; color: #8c959f;
@@ -392,8 +371,6 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 .ping-fold .ping-body {
   display: flex; flex-direction: column; gap: 10px; padding: 2px 10px 10px;
 }
-/* 展开后的 ping 轮次压一档: 它们是背景噪声, 不该和真对话卡片一样醒目。 */
-.ping-fold .turn-group { box-shadow: none }
 .ping-fold .mcol { max-width: 100% }
 .ping-fold .flip { display: none }
 
@@ -408,7 +385,6 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
   .thread { padding: 12px }
   .mcol { max-width: calc(86% + var(--av)) }
   .flip { min-width: 16px; padding: 0 4px; font-size: 0 }
-  .turn-group { padding: 12px }
   .thread { padding-bottom: calc(12px + env(safe-area-inset-bottom)) }
   .usage { padding: 8px 12px; gap: 6px 14px }
   .usage .u-kvs, .usage .leg { flex-wrap: wrap }
@@ -729,5 +705,5 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
    会话标题条与页脚总账只属于对话视图。 */
 .pane { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fafbfc }
 
-/* 回复卡片里的工具行是 nowrap 的 —— 不裁一刀会把整列撑出横向滚动。 */
+/* 过程框里的工具行是 nowrap 的 —— 不裁一刀会把整列撑出横向滚动。 */
 .mb > .turn-group { overflow: hidden }

package/web/chat.js

@@ -192,6 +192,12 @@
     for (var i = 0; i < el.children.length; i++) if (el.children[i].classList.contains(cls)) return el.children[i];
     return null;
   };
+  // 一轮回复 (.tg-head) 与过程框 (.steps-head) 是同一副骨架: 头 + .bubbles。
+  var headOf = function (el) { return childBy(el, 'tg-head') || childBy(el, 'steps-head'); };
+  var swapHead = function (ex, nc) {
+    var eh = headOf(ex), nh = headOf(nc);
+    if (eh && nh) eh.innerHTML = nh.innerHTML;
+  };
   var reconcile = function (cur, next) {
     var open = snapOpen(cur), existing = {};
     Array.prototype.forEach.call(cur.children, function (c) {
@@ -203,8 +209,7 @@
       if (ex.getAttribute('data-sig') === nc.getAttribute('data-sig')) return ex;
       var eb = childBy(ex, 'bubbles'), nb = childBy(nc, 'bubbles');
       if (eb && nb) {
-        var eh = childBy(ex, 'tg-head'), nh = childBy(nc, 'tg-head');
-        if (eh && nh) eh.innerHTML = nh.innerHTML;
+        swapHead(ex, nc);
         reconcile(eb, nb);
         ex.setAttribute('data-sig', nc.getAttribute('data-sig') || '');
         return ex;
@@ -249,6 +254,14 @@
     if (d.open && d.classList && d.classList.contains('tool-call')) loadTool(d);
   }, true);
 
+  // 过程框的收起: 框头与框内空白是开关; 落在某一行工具上的点击归那一行自己。
+  // 收起态只是节点上的一个 class —— reconcile 认键留节点, 往框里添调用时它跟着留下。
+  inner.addEventListener('click', function (e) {
+    var s = e.target.closest && e.target.closest('.steps');
+    if (!s) return;
+    if (e.target.closest('.steps-head') || e.target === s || e.target === childBy(s, 'bubbles')) s.classList.toggle('folded');
+  });
+
   // ── 左栏: 当前 role 的名片 + 会话列表 ──
   var convOf = function (key) { return R.convs.filter(function (c) { return c.key === key; })[0]; };
 
@@ -283,8 +296,8 @@
       ms.map(function (m) { return '<i>' + esc(m.label || roleLabel(m.role)) + '</i>'; }).join('') + '</span>';
   };
 
-  var line = function (title, ts, pv) {
-    return '<span class="b"><span class="l1"><span class="t">' + title + '</span>' +
+  var line = function (title, ts, pv, lamp) {
+    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>';
   };
@@ -299,8 +312,8 @@
           var sel = 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) + lampOf(s.status)) +
-            line(nm(s.role, s.name, true), s.lastTs, s.preview) + '</button>';
+            goSpan('av', s.role, esc(s.label)) +
+            line(nm(s.role, s.name, true), s.lastTs, s.preview, lampOf(s.status)) + '</button>';
         }).join('') + '</div>'
       : '';
     var sel = on && !WITH;
@@ -485,14 +498,6 @@
     putUsage($('#ch-usage'), !wiz && WITH && VIEW === 'msgs' ? R.winStats : null);
   };
 
-  // 只有真群 (`chat:<roomid>`) 才有跳转: `user:` 是人与 bot 的单聊, userid 指向的是人自己而不是这段会话。
-  var JUMP = '<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="M9.5 2.5h4v4M13.5 2.5 7.5 8.5M11.5 9.5v3a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-  var openInWecom = function (base) {
-    return base.indexOf('chat:') === 0
-      ? '<a class="jump" href="wxwork://openconversation?roomid=' + encodeURIComponent(base.slice(5)) + '" title="在企业微信中打开这个群聊">' + JUMP + '</a>'
-      : '';
-  };
-
   // ── 右栏头: 这个群聊 / 私聊是什么 (关系 / 日程视图时是视图名) ──
   var renderHead = function () {
     var who = $('#ch-who'), acts = $('#ch-acts');
@@ -505,16 +510,7 @@
     }
     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, true) + '</span>' +
-        '<span class="sub">私聊 · ' + c.count + ' 条</span></span>';
-    } else {
-      var ms = membersOf(c);
-      who.innerHTML = avatarOf(c) + '<span class="l"><span class="tr"><span class="t">' + esc(c.name) + '</span>' + openInWecom(c.base) + '</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>';
-    }
+    who.innerHTML = '<span class="t">' + (c.kind === 'wizard' ? nm(c.peer, c.name, true) : esc(c.name)) + '</span>';
     acts.innerHTML = WITH
       ? '<span class="with">只看我与 ' + nm(WITH, '', true) + '</span><button class="vb" id="ch-all">看全部</button>'
       : '';
@@ -654,8 +650,7 @@
       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;
+        swapHead(ec, nc);
         reconcile(ebb, nbb);
         ['data-sig', 'data-stale-at'].forEach(function (a) { cur.setAttribute(a, next.getAttribute(a)); });
       } else {