wezard 2.0.1 → 2.0.3

package/web/chat.css

@@ -18,14 +18,18 @@
   --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 } }
 
 /* 名字 = 地址。点是地址的一部分, 也是这一页唯一的颜色记号。 */
@@ -39,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);
@@ -49,15 +53,27 @@ button { font: inherit; color: inherit }
 .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 .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) }
@@ -99,36 +115,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 }
+/* ── 用量条: 一组轮次的总账 ─────────────────────────────────────────
+   一个组件两处挂: 整页页脚 (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 {
@@ -142,13 +157,13 @@ 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 }
-.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;
@@ -167,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 —— 挂在群下, 与会话项同一种读法 (名字 · 时刻 / 最近一句), 只压一档。
@@ -192,7 +209,15 @@ button { font: inherit; color: inherit }
 .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 }
-.si.quiet .t, .si.quiet > .av { opacity: .55 }
+
+/* 执行中的 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(--card) }
@@ -266,11 +291,20 @@ 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) —— 空壳期间说一句在干什么。 */
+.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) }
 
 /* 气泡对面那片空白 = 换视角的门。平时不可见, 悬停才露出要去谁那里。 */
@@ -293,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 }
@@ -376,6 +410,11 @@ button { font: inherit; color: inherit }
   .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}` 这类类选择器同权重, 而作者样式