wezard 2.0.0 → 2.0.2

package/hooks/pre-tool-use.sh

@@ -190,7 +190,7 @@ if [[ "$TOOL_NAME" == "ExitPlanMode" ]]; then
   emit "allow" "ExitPlanMode passthrough"
 fi
 
-# wezard 自家 MCP 工具全部走 loopback 到本 daemon, 自审会把 /wrc 首次绑定卡死
+# wezard 自家 MCP 工具全部走 loopback 到本 daemon, 自审会把首次绑定卡死
 # (还没 defaultChat, 卡片无处可推 → 鸡生蛋), 直接放行。
 # 命名两条路径:
 #   1. cli/sync.ts (legacy claude-internal): mcp__wezard__<tool>
@@ -200,8 +200,8 @@ if [[ "$TOOL_NAME" == mcp__*wezard__* ]]; then
   emit "allow" "wezard mcp self-call bypass"
 fi
 
-# wezard 自家 Skill (slash commands like /wrc) 也是本地插件代码, 无须审批。
-# tool_input.skill 形如 "wezard:wrc"; plugin 命名空间用冒号分隔。
+# wezard 自家 Skill (slash commands like /wezard:audit) 也是本地插件代码, 无须审批。
+# tool_input.skill 形如 "wezard:audit"; plugin 命名空间用冒号分隔。
 if [[ "$TOOL_NAME" == "Skill" ]]; then
   SKILL_NAME=$(printf '%s' "$TOOL_INPUT" | jq -r '.skill // ""')
   if [[ "$SKILL_NAME" == wezard:* ]]; then
@@ -216,7 +216,7 @@ if [[ "$TOOL_NAME" == "Bash" ]]; then
      && [[ ! "$CMD" =~ [\;\|\&\>\<\`\$\(] ]]; then
     emit "allow" "read-only bypass"
   fi
-  # wezard CLI 同理: /wrc /cd 这些 slash command 的 ! bash 都打到本 daemon,
+  # wezard CLI 同理: /wezard:audit /wezard:update 这些 slash command 的 ! bash 都打到本 daemon,
   # 自己审自己没意义, 也避免首次绑定时无处推卡。
   if [[ "$CMD" =~ (^|/|[[:space:]])wezard(\.sh)?([[:space:]]|$) ]]; then
     emit "allow" "wezard self-call bypass"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wezard",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Bridge Claude Code and WeCom: PreToolUse approval cards + bidirectional tmux session mirror with image paste",
   "type": "module",
   "license": "MIT",
@@ -61,7 +61,6 @@
     "systemd/wezard.service.template",
     "systemd/wezard-svr.service.template",
     "config.example.jsonc",
-    "commands/wrc.md",
     "commands/audit.md",
     "commands/update.md",
     "README.md",

package/web/chat.css

@@ -18,20 +18,24 @@
   --pub: #237a55;     /* 公开 */
 }
 
-html, body { height: 100% }
+html { height: 100% }
 /* overscroll-behavior:none 阻止整页橡皮筋回弹 —— webview 里它会和内层
    .thread 抢滚动手势, 表现为"滚一下卡住/整页在弹"。 */
-body { overflow: hidden; overscroll-behavior: none; color: var(--ink) }
+/* body 是一根竖轴: 上面 .app (两栏), 下面整页页脚 (wizard 的用量条)。 */
+body {
+  height: 100vh; height: 100dvh; display: flex; flex-direction: column;
+  overflow: hidden; overscroll-behavior: none; color: var(--ink);
+}
 button { font: inherit; color: inherit }
 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
 
-.app { display: flex; height: 100vh; height: 100dvh }
+.app { display: flex; flex: 1; min-height: 0 }
 @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
 
 /* 名字 = 地址。点是地址的一部分, 也是这一页唯一的颜色记号。 */
 .nm { font-weight: 600 }
 .nm::before { content: "."; color: var(--accent); font-weight: 700 }
-.nm.human::before, .nm.task::before, .nm.chat::before { content: none }
+.nm.human::before, .nm.task::before, .nm.system::before, .nm.chat::before { content: none }
 
 /* ── 侧栏: 我 + 会话 ─────────────────────────────────────────────── */
 .side {
@@ -44,19 +48,35 @@ button { font: inherit; color: inherit }
   position: relative; flex: none; padding: 16px 16px 14px; border-bottom: 1px solid var(--line);
   display: flex; flex-direction: column; gap: 8px; background: var(--card);
 }
-.rolebar .conn { position: absolute; top: 12px; right: 14px }
-.rolebar .id { display: flex; gap: 10px; align-items: center; min-width: 0; padding-right: 14px }
+.rolebar .id { display: flex; gap: 10px; align-items: center; min-width: 0 }
 .rolebar .id .av { font-size: 26px; line-height: 1; flex: none }
 .rolebar .id .l { min-width: 0; display: flex; flex-direction: column; gap: 2px }
 .rolebar .id .nm { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .rolebar .id .k { font-size: 11.5px; color: var(--mute) }
+/* 名片上的状态: 只有执行中带颜色与呼吸, 空闲 / 已关闭是一个安静的词。 */
+.rolebar .st { margin-left: 8px; white-space: nowrap }
+.rolebar .st::before {
+  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 4px;
+  border-radius: 50%; background: #b1bac4; vertical-align: 1px;
+}
+.rolebar .st.run { color: #1a7f37 }
+.rolebar .st.run::before { background: #1a7f37; animation: pulse 1.4s infinite }
+.rolebar .st.off { color: var(--faint) }
+.rolebar .st.off::before { background: transparent; box-shadow: inset 0 0 0 1.5px #b1bac4 }
 .rolebar .job { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); opacity: .8 }
 .rolebar .facts { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--mute) }
 .rolebar .facts span { white-space: nowrap }
-.rolebar .facts .go { cursor: pointer; color: var(--accent) }
-.rolebar .facts .go:hover { text-decoration: underline }
+.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 }
+.bd {
+  font-size: 11px; line-height: 18px; padding: 0 8px; border: 0; border-radius: 9px; cursor: pointer;
+  background: #f1f3f6; color: var(--mute); white-space: nowrap;
+}
+.bd:hover { color: var(--accent) }
+.bd.on { background: var(--mine-soft); color: var(--accent) }
+.bd b { font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums }
 /* session 切换: 按钮 + 浮层列表, 取代原生 <select>。 */
 .sp { position: relative; flex: 1 1 100%; min-width: 0 }
 .sp-btn {
@@ -93,39 +113,35 @@ button { font: inherit; color: inherit }
 .sp-it.all { border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 3px }
 .sp-it.all .id { font-family: inherit }
 
-/* 左栏底: session 切换 + 用量, 都是轮次的事 —— 与顶上的身份分开, 钉在会话列表下面。 */
-.sidefoot {
-  flex: none; border-top: 1px solid var(--line); padding: 10px 12px 12px;
-  display: flex; flex-direction: column; gap: 8px; background: var(--paper);
-}
-.sidefoot[hidden] { display: none }
-#rb-sess:empty, #rb-prof:empty { display: none }
+/* 左栏底: session 切换 —— 轮次的事, 与顶上的身份分开, 钉在会话列表下面。 */
+.sidefoot { flex: none; border-top: 1px solid var(--line); padding: 10px 12px; background: var(--paper) }
 /* 在底部, 浮层往上开。 */
 .sidefoot .sp-list { top: auto; bottom: calc(100% + 4px); transform: translateY(4px) }
 .sidefoot .sp.open .sp-list { transform: none }
 
-/* profile: 这个 role 自己跑过的轮次的总账 —— 平铺在左栏底, 不套卡片。 */
-.prof { font-family: ui-monospace, Menlo, monospace }
-.prof .hd { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-bottom: 6px }
-.prof .hd .lb { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px; font-family: system-ui, sans-serif }
-.prof .model {
-  margin-left: auto; color: var(--mute);
-  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.prof .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px }
-.prof .kv { display: flex; flex-direction: column; align-items: flex-start; min-width: 0 }
-.prof .kv .v { font-size: 13px; font-weight: 700; color: #1f2328; font-variant-numeric: tabular-nums; white-space: nowrap }
-.prof .kv .k { font-size: 9.5px; color: #8c959f; text-transform: uppercase; letter-spacing: .4px }
-.prof .io { margin-top: 8px; display: flex; flex-direction: column; gap: 6px }
-.prof .bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #eaeef2 }
-.prof .bar .seg { height: 100% }
-.prof .leg { display: flex; gap: 4px 9px; flex-wrap: wrap }
-.prof .lg { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: #8c959f }
-.prof .lg i { width: 8px; height: 8px; border-radius: 2px; flex: none }
-.prof .lg b { color: #1f2328; font-weight: 700; font-variant-numeric: tabular-nums }
-.conn { display: flex; align-items: center; gap: 5px }
-.conn .d { width: 7px; height: 7px; border-radius: 50%; background: #1a7f37 }
-.conn.off .d { background: #cf222e }
+/* ── 用量条: 一组轮次的总账 ─────────────────────────────────────────
+   一个组件两处挂: 整页页脚 (wizard 的总账) / 聊天窗口底 (人与某个 wizard 这段往来的账)。
+   宽屏一行排完: 标签 · 指标 · I/O 条 + 图例 · 模型。每一组自身不折行, 一行排不下时
+   整组落到下一行 —— 窄屏自然变成两三行, 不需要另一套结构。 */
+.usage {
+  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px;
+  padding: 7px 20px; border-top: 1px solid var(--line); background: var(--paper);
+  font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--mute);
+  font-variant-numeric: tabular-nums;
+}
+.usage b { font-weight: 700; color: var(--ink) }
+.usage .u-lb { font: 10px system-ui, sans-serif; color: var(--faint); letter-spacing: .4px }
+.usage .u-kvs { display: flex; gap: 4px 16px }
+.usage .kv { white-space: nowrap; font-size: 9.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px }
+.usage .kv b { font-size: 12.5px; margin-right: 4px; letter-spacing: 0; text-transform: none }
+.usage .u-io { display: flex; align-items: center; gap: 12px; min-width: 0 }
+.usage .bar { flex: none; width: 140px; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line) }
+.usage .bar .seg { height: 100% }
+.usage .leg { display: flex; gap: 4px 12px }
+.usage .lg { display: flex; align-items: center; gap: 4px; white-space: nowrap }
+.usage .lg i { width: 8px; height: 8px; border-radius: 2px; flex: none }
+.usage .lg b { margin-left: 1px }
+.usage .u-model { margin-left: auto; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 
 /* 群聊头像 = 参与者头像拼图: 1 格居中, 2 格左右, 3/4 格田字。 */
 .mosaic {
@@ -145,7 +161,6 @@ button { font: inherit; color: inherit }
   display: flex; align-items: baseline; gap: 6px;
 }
 .convs h2 span { font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums }
-.convs .none { padding: 6px 10px; font-size: 12px; color: var(--faint) }
 
 .ci {
   display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; overflow: hidden;
@@ -164,23 +179,43 @@ 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 }
 .ci .tag.priv { color: var(--priv); background: #9a5b1014 }
 
-/* 群里的其他 role —— 缩进挂在群下, 点开是「我与它在这个群里」的往来。 */
-.subs { margin: 0 0 6px 34px; border-left: 1px solid var(--line); padding-left: 6px }
+/* 群里的其他 role —— 挂在群下, 与会话项同一种读法 (名字 · 时刻 / 最近一句), 只压一档。
+   点开是「我与它在这个群里」的往来。 */
+.subs { margin: 0 0 6px 16px; border-left: 1px solid var(--line); padding-left: 2px }
 .si {
-  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
-  padding: 4px 8px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
-  font-size: 12.5px; color: var(--ink);
+  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; overflow: hidden;
+  padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--ink);
 }
 .si:hover { background: #f4f6f9 }
-.si.on { background: #eaf0fc; color: var(--accent) }
-.si .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.si .c { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums }
-.si.quiet { color: var(--faint) }
+.si.on { background: #eaf0fc }
+.si > .av { font-size: 17px; line-height: 1; flex: none; width: 24px; text-align: center }
+.si .b { min-width: 0; flex: 1; overflow: hidden }
+.si .l1 { display: flex; align-items: baseline; gap: 6px }
+.si .t { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.si.on .t { color: var(--accent) }
+.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, .si > .av { position: relative }
+.ci > .av .live, .si > .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 }
 
 /* ── 右栏头: 这个群聊 / 私聊是什么 ───────────────────────────────── */
-.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--paper) }
+.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--card) }
 .chathead {
   flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 20px; min-height: 58px;
   background: var(--card); border-bottom: 1px solid var(--line);
@@ -206,7 +241,7 @@ button { font: inherit; color: inherit }
   flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none;
   padding: 16px 20px 28px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
 }
-.thread-in { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px }
+.thread-in { display: flex; flex-direction: column; gap: 14px }
 .empty { color: var(--faint); text-align: center; padding: 60px 0; font-size: 13px }
 .more-btn {
   align-self: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
@@ -214,15 +249,16 @@ button { font: inherit; color: inherit }
 }
 .more-btn:hover { color: var(--accent); border-color: var(--accent) }
 
-.mrow { display: flex; align-items: flex-start; gap: 10px }
-.mrow .av {
-  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
-  background: var(--card); font-size: 19px; line-height: 32px; text-align: center; cursor: default; padding: 0;
+/* 头像已并进名字那一行, 不再占气泡旁的一列 —— 省下的那一格宽度 (--av) 还给气泡。 */
+.mrow { --av: 24px; display: flex; align-items: flex-start; gap: 10px }
+.mwho .av {
+  flex: none; align-self: center; width: var(--av); height: var(--av); border-radius: 50%; border: 1px solid var(--line);
+  background: var(--card); font-size: 14px; line-height: 22px; text-align: center; cursor: default; padding: 0;
 }
-.mcol { min-width: 0; max-width: min(78%, 760px); display: flex; flex-direction: column; gap: 4px }
+.mcol { min-width: 0; max-width: min(78% + var(--av), 760px + var(--av)); display: flex; flex-direction: column; gap: 4px }
 .mrow.mine { flex-direction: row-reverse }
 .mrow.mine .mcol { align-items: flex-end }
-.mwho { font-size: 11.5px; color: var(--mute); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap }
+.mwho { font-size: 11.5px; color: var(--mute); display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
 .mwho .to { color: var(--faint) }
 .mwho .ch { font-size: 10.5px; border-radius: 4px; padding: 0 4px }
 .mwho .ch.priv { color: var(--priv); background: #9a5b1014 }
@@ -241,6 +277,7 @@ button { font: inherit; color: inherit }
 .mchip.priv { color: var(--priv); background: #9a5b1014 }
 .mchip.pub { color: var(--pub); background: #237a5514 }
 .mchip.graph { color: #6639ba; background: #8250df12 }
+.mchip.sys { color: #0a7d6b; background: #0a7d6b12 }
 
 /* 自己发出的那条: 整块就是视角色。TURN_CSS 里写死的白卡 / 灰底 (嵌套气泡、
    代码块、折叠头) 会在蓝底上显成一张张贴纸 —— 这里把它们收回到气泡自己的
@@ -254,6 +291,9 @@ button { font: inherit; color: inherit }
 .mrow.mine .mb .md-body pre code { background: transparent }
 .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) —— 空壳期间说一句在干什么。 */
+.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 }
 .mrow.mine .mb .io-bar { background: var(--mine-soft) }
 
 /* 气泡对面那片空白 = 换视角的门。平时不可见, 悬停才露出要去谁那里。 */
@@ -275,8 +315,8 @@ button { font: inherit; color: inherit }
 .flip .fc { flex: none }
 .flip:hover, .flip:focus-visible { background: #2f55c90d; color: var(--accent) }
 .flip[disabled] { cursor: default; background: transparent !important; color: transparent !important }
-.mrow .av.go { cursor: pointer }
-.mrow .av.go:hover { border-color: var(--accent) }
+.mwho .av.go { cursor: pointer }
+.mwho .av.go:hover { border-color: var(--accent) }
 
 .mrow.mark { justify-content: center }
 .mrow.mark > * { flex: 1; max-width: 520px }
@@ -355,10 +395,15 @@ button { font: inherit; color: inherit }
   .chathead { padding: 8px 12px; gap: 8px }
   .chathead .back { display: block }
   .thread { padding: 12px }
-  .mcol { max-width: 86% }
+  .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 }
+  .usage .u-io { flex: 1 1 100%; flex-wrap: wrap; gap: 6px 12px }
+  .usage .bar { flex: 1 1 100%; width: auto }
+  .usage.page { padding-bottom: calc(8px + env(safe-area-inset-bottom)) }
 }
 
 /* UA 的 [hidden] 规则和 `.gbar{display:flex}` 这类类选择器同权重, 而作者样式