wezard 2.0.2 → 2.0.3

package/dist/shared/chat-render.js

@@ -38,8 +38,8 @@ export const renderChatPage = () => `<!doctype html><html lang="zh-CN"><head><me
   <aside class="side">
     <header class="rolebar" id="rolebar">
       <div class="who" id="rb-who"></div>
-      <div class="acts" id="rb-acts"></div>
     </header>
+    <div class="acts" id="rb-acts"></div>
     <nav class="convs" id="convs" aria-label="会话"></nav>
     <footer class="sidefoot" id="rb-foot" hidden><div id="rb-sess"></div></footer>
   </aside>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wezard",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Bridge Claude Code and WeCom: PreToolUse approval cards + bidirectional tmux session mirror with image paste",
   "type": "module",
   "license": "MIT",

package/web/chat.css

@@ -43,7 +43,7 @@ button { font: inherit; color: inherit }
   display: flex; flex-direction: column; min-height: 0;
 }
 
-/* ── 左栏顶: 当前 role 的名片 (身份 + 关系/日程入口) ──── */
+/* ── 左栏顶: 当前 role 的名片 (身份); 关系/日程入口是名片下、会话列表上的一排 ──── */
 .rolebar {
   position: relative; flex: none; padding: 16px 16px 14px; border-bottom: 1px solid var(--line);
   display: flex; flex-direction: column; gap: 8px; background: var(--card);
@@ -68,10 +68,12 @@ button { font: inherit; color: inherit }
 .rolebar .facts span { white-space: nowrap }
 .rolebar .go { cursor: pointer; color: var(--accent) }
 .rolebar .go:hover { text-decoration: underline }
-.rolebar .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
-.rolebar .acts:empty { display: none }
+.acts { flex: none; display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line) }
+.acts:empty { display: none }
+/* 旧外壳 (daemon 未重启) 里它还在名片内 —— 那里不需要自己的内边距与分隔线。 */
+.rolebar .acts { padding: 0; border: 0 }
 .bd {
-  font-size: 11px; line-height: 18px; padding: 0 8px; border: 0; border-radius: 9px; cursor: pointer;
+  flex: 1; font-size: 12.5px; line-height: 28px; padding: 0 10px; border: 0; border-radius: 8px; cursor: pointer;
   background: #f1f3f6; color: var(--mute); white-space: nowrap;
 }
 .bd:hover { color: var(--accent) }
@@ -155,11 +157,12 @@ button { font: inherit; color: inherit }
 .mosaic.n3, .mosaic.n4 { grid-template: 1fr 1fr / 1fr 1fr }
 .mosaic.n3 i:first-child { grid-row: span 2 }
 
-.convs { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 16px }
+.convs { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 16px }
 .convs h2 {
   margin: 14px 8px 4px; font-size: 12px; font-weight: 600; color: var(--mute);
   display: flex; align-items: baseline; gap: 6px;
 }
+.convs h2:first-child { margin-top: 6px }
 .convs h2 span { font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums }
 
 .ci {
@@ -179,12 +182,14 @@ button { font: inherit; color: inherit }
 .ci .pv { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .ci .pv:empty { display: none }
 .ci .tag { font-size: 10.5px; border-radius: 4px; padding: 0 4px; flex: none }
-/* 选中的 role 项上的换视角开关。 */
-.sw {
-  flex: none; align-self: center; display: inline-grid; place-items: center;
-  width: 20px; height: 20px; border-radius: 5px; color: var(--accent); cursor: pointer;
-}
-.sw:hover { background: #2f55c91a }
+/* 头像与名字是进入那个 role 视角的入口 —— 侧栏项、会话头、消息行同一种读法。
+   它们嵌在整行那颗按钮里, 所以悬停态必须压过行: 指到入口上时行自己的悬停底色
+   让位 (:has), 否则读起来像是要选中这一行。z-index 保证没有兄弟盖住命中区。 */
+.nm.go, .av.go { position: relative; z-index: 1; cursor: pointer }
+.nm.go:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px }
+span.av.go { border-radius: 8px; transition: background .12s, box-shadow .12s }
+span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
+.ci:not(.on):has(.go:hover), .si:not(.on):has(.go:hover) { background: transparent }
 .ci .tag.priv { color: var(--priv); background: #9a5b1014 }
 
 /* 群里的其他 role —— 挂在群下, 与会话项同一种读法 (名字 · 时刻 / 最近一句), 只压一档。
@@ -286,9 +291,15 @@ button { font: inherit; color: inherit }
 .mrow.mine .mb .bubble, .mrow.mine .mb .typing, .mrow.mine .mb .stats { 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 .tile, .mrow.mine .mb details > summary,
+.mrow.mine .mb .tile, .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) }
 /* 工具正文是展开时才取的 (chat.js loadTool) —— 空壳期间说一句在干什么。 */
@@ -316,7 +327,7 @@ button { font: inherit; color: inherit }
 .flip:hover, .flip:focus-visible { background: #2f55c90d; color: var(--accent) }
 .flip[disabled] { cursor: default; background: transparent !important; color: transparent !important }
 .mwho .av.go { cursor: pointer }
-.mwho .av.go:hover { border-color: var(--accent) }
+.mwho .av.go:hover { border-color: var(--accent); background: #2f55c914 }
 
 .mrow.mark { justify-content: center }
 .mrow.mark > * { flex: 1; max-width: 520px }

package/web/chat.js

@@ -128,11 +128,23 @@
     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:'; };
+  // 头像与名字就是进入那个 role 视角的入口 —— 侧栏项、会话头、消息行同一种读法。
+  // 是 <span> 不是 <button>: 侧栏里它嵌在整行那颗按钮里。
+  var goSpan = function (cls, id, inner) {
+    var on = canSwitch(id) && id !== ROLE;
+    return '<span class="' + cls + (on ? ' go" data-r="' + esc(id) + '" title="' + esc('切到 ' + nameOf(id) + ' 的视角') : '') + '">' + inner + '</span>';
+  };
+  var nm = function (id, name, go) {
+    var cls = 'nm ' + kindOf(id), txt = esc(name || roleName(id));
+    return go ? goSpan(cls, id, txt) : '<span class="' + cls + '">' + txt + '</span>';
+  };
+  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')); };
+    });
+  };
 
   // ── markdown 渲染 (只对未渲染过的节点做, 复用节点不重绘) ──
   var md = null;
@@ -265,29 +277,21 @@
   };
 
   var avatarOf = function (c, extra) {
-    if (c.kind !== 'group') return '<span class="av">' + esc(c.label) + (extra || '') + '</span>';
+    if (c.kind !== 'group') return goSpan('av', c.peer, esc(c.label) + (extra || ''));
     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>';
   };
 
-  // 选中的那一项若是个 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>'
-      : '';
-  };
-  var line = function (title, sw, ts, pv) {
-    return '<span class="b"><span class="l1"><span class="t">' + title + '</span>' + sw +
+  var line = function (title, ts, pv) {
+    return '<span class="b"><span class="l1"><span class="t">' + title + '</span>' +
       '<span class="ts">' + esc(fmtAgo(ts)) + '</span></span>' +
       '<span class="pv">' + esc(pv) + '</span></span>';
   };
 
   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 title = c.kind === 'wizard' ? nm(c.peer, c.name, true) : '<span class="nm chat">' + esc(c.name) + '</span>';
     // 只列与我有往来的: 在群里但没和我说过话的人, 点进去也是空的。
     var talked = on ? c.subs.filter(function (s) { return s.count; }) : [];
     var subs = talked.length
@@ -295,13 +299,13 @@
           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 + ' 条往来') + '">' +
-            '<span class="av">' + esc(s.label) + lampOf(s.status) + '</span>' +
-            line(nm(s.role, s.name), sel ? swapOf(s.role) : '', s.lastTs, s.preview) + '</button>';
+            goSpan('av', s.role, esc(s.label) + lampOf(s.status)) +
+            line(nm(s.role, s.name, true), s.lastTs, s.preview) + '</button>';
         }).join('') + '</div>'
       : '';
     var sel = on && !WITH;
     return '<button class="ci' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '">' +
-        avatarOf(c, lampOf(c.status)) + line(title, sel && c.kind === 'wizard' ? swapOf(c.peer) : '', c.lastTs, c.preview) +
+        avatarOf(c, lampOf(c.status)) + line(title, c.lastTs, c.preview) +
       '</button>' + subs;
   };
 
@@ -319,11 +323,7 @@
     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); } };
-    });
+    bindGo(convsEl);
   };
 
   var shortCwd = function (p) {
@@ -378,7 +378,7 @@
     if (SESS_OPEN && e.key === 'Escape') setSessOpen(false);
   });
 
-  // 名片: 身份 · 出身 · cwd · 出生 · 关系 / 日程入口。
+  // 名片: 身份 · 出身 · cwd · 出生; 名片下面一排是关系 / 日程入口。
   var renderRole = function () {
     var r = R.role;
     if (!r) return;
@@ -413,7 +413,7 @@
     $('#rb-foot').hidden = R.sessions.length < 2;
     bindSessPicker();
     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('');
@@ -497,7 +497,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) + '</span>' +
+      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);
@@ -507,8 +507,9 @@
           (ms.length > 8 ? '…' : '') + '</span></span>';
     }
     acts.innerHTML = WITH
-      ? '<span class="with">只看我与 ' + nm(WITH) + '</span><button class="vb" id="ch-all">看全部</button>'
+      ? '<span class="with">只看我与 ' + nm(WITH, '', true) + '</span><button class="vb" id="ch-all">看全部</button>'
       : '';
+    bindGo(who); bindGo(acts);
     var x = $('#ch-all');
     if (x) x.onclick = function () { selectConv(CONV, ''); };
   };
@@ -529,11 +530,11 @@
     // 看 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 to = !mine && m.to !== ROLE && group ? '<span class="to">→ ' + nm(m.to, m.toName, true) + '</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);
+      ? '<span class="to">' + (m.to && m.to !== 'human:' ? '→ ' + nm(m.to, m.toName, true) : '') + '</span>' + stamp(m.ts)
+      : nm(m.from, m.fromName, true) + 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) + ' 的视角' : '') + '">' +
@@ -590,9 +591,7 @@
   };
 
   var bindRow = function (el) {
-    el.querySelectorAll('.flip[data-r]:not([disabled]), .av.go').forEach(function (b) {
-      b.onclick = function () { switchRole(b.getAttribute('data-r')); };
-    });
+    bindGo(el, '.flip[data-r]:not([disabled]), .mwho .go[data-r]');
   };
   var rowNode = function (id) {
     var list = inner.querySelectorAll('.mrow');