@migor/cli 0.10.9 → 0.10.10

package/dist/inspector-page.html

@@ -62,22 +62,71 @@
       aside { display: flex; flex-direction: column; overflow: hidden; }
       #tabs, #chat-bar { flex: none; }
       #runs, #chat { flex: 1 1 auto; min-height: 0; overflow: auto; }
-      /* 右栏分层：`#trace` 是**唯一**无界增长的部分（它随 span 数长）⇒ 只有它 flex 撑开并滚；
-         回复 / 能力排行 / 用量固定在下方，各自有上限（回复很长时在**它自己那块**里滚，
-         而不是把树推出屏幕 —— 这与「看树」和「读回复」两个动作各自独立是一致的）。 */
+      /* 右栏分层：三块（调用树 / 能力排行 / 回复）**分同一个剩余高度**，每块自己滚。
+         为什么不再「只有树撑开、其余写死 38vh」：写死的上限在只有一块要看时是**浪费**
+         （回复长时它自己那块滚，树反而只有半屏），在块数变多时又是**挤**。折叠是用户能
+         直接操作的那个旋钮 —— 收起不要的，剩下的自然变大。 */
       section {
         padding: 14px; font-family: var(--mono); font-size: 12px;
         display: flex; flex-direction: column; overflow: hidden;
       }
       #ttl { flex: none; }
-      #trace { flex: 1 1 auto; min-height: 140px; overflow: auto; }
-      #summary, #reply, .usage { flex: none; max-height: 38vh; overflow: auto; }
-      /* 并排 A/B：两棵树各占一半、**各自独立滚**（一棵树很长时不该把另一棵推出屏幕 ——
-         与「树是唯一无界部分」那条纪律同款，只是现在无界的部分有两块）。
-         `#trace2` 只在并排时存在（单run 时 hidden），此时 `#trace` 让出 50%。 */
+      #panes { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
+      .pane { display: flex; flex-direction: column; min-height: 0; }
+      .pane[hidden] { display: none; }
+      .pane + .pane { border-top: 1px solid var(--border); padding-top: 6px; }
+      /* 展开的各块**按份**分剩余高度（收掉一块，另一块自然变大）；
+         收起的只留标题栏 —— `flex: 0 0 auto` 是关键：它不许参与剩余空间的分配。 */
+      .pane[data-open='1'] { flex: 1 1 0; }
+      /* 回复按 1.5 份：它是这次 run 的**结论**，而树是过程 —— 平分的话跑完只剩四行正文，
+         等于逼用户先折掉别的块才发现内容被裁了。比例是弹性的（basis 为 0 ⇒ 不会撑破容器），
+         窗口再矮也只是各自更小，不会溢出到下面的用量行。 */
+      #pane-reply[data-open='1'] { flex-grow: 1.5; }
+      /* 树按 2 份。三块**都开着**时平分的话它只有 134px ≈ 三行（1440×900 实测：23 行里
+         只看得到 3 行），而树里还塞着工具条。树是这个页面存在的理由，亏待它会让人以为
+         「这条 run 就这么点东西」。取 2 而不是更极端：回复仍要比它大（结论优先）。 */
+      #pane-trace[data-open='1'] { flex-grow: 2; }
+      /* 排行是一张**有界**的表：按自己内容的高度放，长过 45% 才在它自己那块里滚。
+         给它也按份分剩余高度的话，短表下面会空出一片 —— 那块空白本该属于树或回复。 */
+      #pane-summary[data-open='1'] { flex: 0 1 auto; max-height: 45%; }
+      .pane[data-open='0'] { flex: 0 0 auto; }
+      .pane-head {
+        flex: none; display: flex; align-items: baseline; gap: 6px; width: 100%;
+        background: none; border: 0; padding: 0 0 4px; color: var(--muted);
+        font: inherit; font-family: var(--mono); font-size: 11px; text-align: left; cursor: pointer;
+      }
+      .pane-head:hover { color: var(--text); }
+      .pane-head:focus-visible { outline: 1px solid var(--ice); outline-offset: 2px; }
+      /* caret 走 CSS 生成内容（不是在 JS 里改 textContent）：它是**纯装饰**，
+         与 `data-open` 这个唯一状态同源，就不会出现「箭头说开着、内容收着」。 */
+      .pane-caret { flex: none; width: 9px; color: var(--faint); }
+      .pane[data-open='1'] > .pane-head .pane-caret::before { content: '▾'; }
+      .pane[data-open='0'] > .pane-head .pane-caret::before { content: '▸'; }
+      .pane-name { color: var(--text); letter-spacing: .2px; }
+      .pane-meta { margin-left: auto; color: var(--faint); }
+      .pane-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
+      .pane[data-open='0'] > .pane-body { display: none; }
+      /* 调用树这一块的 body **自己不滚** —— 滚动交给 `#trace` / `#trace2`
+         （并排时是两棵各自滚的树，body 滚会把它们的表头一起带走）。
+         ⚠️ 这条带 id 的那一段**必须**跟着 `[data-open='1']` 走：id 选择器压过下面那条
+         `.pane[data-open='0'] > .pane-body { display: none }`（1,1,0 vs 0,3,0）——
+         第一版没加，结果折叠后树照样铺满（面板里"收了等于没收"，比不折叠更糟）。 */
+      #pane-trace[data-open='1'] > .pane-body { display: flex; flex-direction: column; overflow: hidden; }
+      #trace { flex: 1 1 auto; min-height: 120px; overflow: auto; }
+      /* 树工具条（树内检索 + 时间轴开关）：不塞进 `.pane-head`（那是个 button，嵌输入框点一下
+         就折叠了）。⚠️ 基础规则必须排在 `.cmp-on #tree-bar` **之前** —— 低特异性的规则写在后面
+         会被规则引擎判成「可能不生效」（`noDescendingSpecificity`），而那条告警在本仓是失败。 */
+      #tree-bar { flex: none; display: flex; gap: 6px; align-items: center; padding-bottom: 6px; }
+      .usage { flex: none; }
+      /* 并排 A/B：两棵树各占一半、**各自独立滚**（一棵树很长时不该把另一棵推出屏幕）。
+         `#trace2` 只在并排时存在（单run 时 hidden）。 */
+      .cmp-on #pane-trace > .pane-body { flex-direction: row; flex-wrap: wrap; }
+      /* 并排时 body 是 row ⇒ 树工具条必须自己占满一整行，否则它会挤在两棵树左边。
+         单栏时 body 是 column，`flex: none` 就够（写成 100% 会变成「占满高度」）。 */
+      .cmp-on #tree-bar { flex: 0 0 100%; }
       .cmp-on #trace { flex: 1 1 50%; }
       .tr-compare {
-        flex: 1 1 50%; min-height: 140px; overflow: auto;
+        flex: 1 1 50%; min-height: 120px; overflow: auto;
         border-left: 1px solid var(--border);
       }
       #diffbar { flex: none; max-height: 30vh; overflow: auto; padding-bottom: 6px; }
@@ -94,7 +143,9 @@
          两者可以不同 —— 正在看的可能不在对比里）。用左边框双线区分，不靠颜色。 */
       .run.cmp { box-shadow: inset 2px 0 0 var(--warn); }
       .run.cmp.active { box-shadow: inset 2px 0 0 var(--ice), inset 4px 0 0 var(--warn); }
-      /* 窄屏：两栏并排已经太窄 ⇒ 回到单列 + 整页滚动（此时「整页滚」才是唯一合理的形态） */
+      /* 窄屏：两栏并排已经太窄 ⇒ 回到单列 + 整页滚动（此时「整页滚」才是唯一合理的形态）。
+         三块也回到「各自自然高度」—— 屏幕本来就装不下，再按比例分剩余高度只会让每块都变成
+         一条缝；此时折叠仍然有效（收起的照样只剩标题栏），但它不再是唯一的高度旋钮。 */
       @media (max-width: 860px) {
         html, body { height: auto; }
         body { overflow: visible; }
@@ -102,9 +153,11 @@
         aside { overflow: visible; }
         section { overflow: visible; }
         #runs, #chat, #trace, .tr-compare { overflow: visible; }
+        #panes { flex: none; }
+        .pane[data-open='1'] { flex: none; }
         #trace, .tr-compare { min-height: 320px; }
         .cmp-on #trace { flex: 1 1 auto; }
-        #summary, #reply, .usage, #diffbar { max-height: none; }
+        .usage, #diffbar { max-height: none; }
       }
       .run {
         display: block; width: 100%; text-align: left; cursor: pointer;
@@ -119,10 +172,47 @@
       /* 被中止的 run 不是失败：给它一个中性偏警告的颜色，不跟失败共用红色 ——
          否则用户会把「我自己按了中止」读成「我把工程改坏了」 */
       .run.aborted .dot { background: var(--warn); }
+      /* 等审批的 run（`suspended`）：**空心点**。它既没跑完也没失败，实心点怎么上色都是
+         在替用户下结论；空心 = 「这一轮还悬着」，与右栏那句「停在审批」同一件事 */
+      .run.suspended .dot { background: transparent; box-shadow: inset 0 0 0 1px var(--warn); }
       .run .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
       .run .r2, .run .r3 { margin-top: 3px; color: var(--faint); font-size: 11px; font-family: var(--mono); }
-      .run .r3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .run .r2, .run .r3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
       .empty { color: var(--faint); padding: 16px; }
+      /* —— 列表检索（2026-11-13）：环里 50 条 run，此前只能靠肉眼扫 —— */
+      #list-bar {
+        flex: none; display: flex; gap: 6px; padding: 6px 8px;
+        border-bottom: 1px solid var(--border);
+      }
+      #list-q {
+        flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border);
+        border-radius: 4px; color: var(--text); padding: 4px 7px; font: inherit; font-size: 11.5px;
+      }
+      #list-q:focus { outline: 1px solid var(--ice); border-color: var(--ice); }
+      /* 「只看异常」是**开关**，用 aria-pressed 表示按下（同时给读屏软件） */
+      #list-abn[aria-pressed='true'] { border-color: var(--warn); color: var(--warn); }
+      /* —— run 级总账（2026-11-13）：打开一条 run，先给「这一趟的账」，再给树 ——
+         此前页面上只有 footer 的两个数（in / out），而 cache 命中率与成本 —— 最直接对应
+         账单的两个数 —— 一个都没有。 */
+      #ledger {
+        flex: none; display: flex; align-items: baseline; gap: 10px;
+        margin-bottom: 8px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap;
+      }
+      #ledger[hidden] { display: none; }
+      #ledger-items { display: flex; flex-wrap: wrap; gap: 4px 12px; }
+      #ledger-items .lg { color: var(--faint); }
+      #ledger-items .lg b { color: var(--text); font-weight: 500; margin-left: 4px; }
+      #ledger-items .lg.err b { color: var(--err); }
+      #ledger .acts { margin-left: auto; display: flex; gap: 6px; }
+      /* —— 树工具条：树内检索 + 时间轴开关 ——
+         基础规则在上面的 `#trace` 旁边（要排在 `.cmp-on` 那条之前）。 */
+      #tree-q {
+        flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border);
+        border-radius: 4px; color: var(--text); padding: 3px 7px; font: inherit; font-size: 11px;
+      }
+      #tree-q:focus { outline: 1px solid var(--ice); border-color: var(--ice); }
+      #tree-hit { color: var(--faint); font-size: 10.5px; min-width: 3ch; }
+      #tl-toggle[aria-pressed='false'] { color: var(--faint); }
       #ttl { color: var(--faint); margin-bottom: 10px; font-family: var(--mono); font-size: 11.5px; }
       .usage { display: flex; gap: 16px; margin-top: 12px; color: var(--muted); font-family: var(--mono); font-size: 12px; }
       /* biome-ignore lint/style/noDescendingSpecificity: 本行只颜色/字重，对手是 33 行的 header .live b —— 两者祖先容器不同（.usage 在面板区、.live 在 header），结构上不可能命中同一元素，是规则「只比末段标签」的误报。 */
@@ -154,11 +244,12 @@
       #chat-bar[hidden] { display: none; }
       #chat-sid { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
 
+      /* 回复正文：它现在住在「回复」这一块里（上面有自己的标题栏），
+         所以不再要外边距，也不再自带 max-height —— 高度由块分、滚动由 `.pane-body` 出。 */
       #reply {
-        margin: 14px 0 0; padding: 10px; border: 1px solid var(--border); border-radius: 4px;
+        padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px;
         background: #0e0e10; word-break: break-word; color: var(--muted);
       }
-      #reply[hidden] { display: none; }
 
       /* —— 模型正文：Markdown 渲染 ——
          `.md` 里所有元素都是 createElement 造出来的（解析器不产生 HTML，渲染器不用 innerHTML），
@@ -282,6 +373,14 @@
           <button class="tab active" id="tab-runs" type="button">run 列表</button>
           <button class="tab" id="tab-chat" type="button">对话</button>
         </div>
+        <!--
+          列表检索（2026-11-13）：`/` 聚焦。「异常」= 失败 / 中止 / 等审批 —— 挂起的 run
+          在 trace 上状态是 ok，只过滤 ok=false 会把它漏掉（规则在 panel-logic 的 filterRuns）。
+        -->
+        <div id="list-bar">
+          <input id="list-q" type="search" spellcheck="false" placeholder="搜 prompt / 目录 / 收尾原因（按 /）" />
+          <button id="list-abn" class="mini" type="button" aria-pressed="false" title="只看失败 / 中止 / 等审批的 run">异常</button>
+        </div>
         <div id="runs"><div class="empty">还没有 run。触发一次 agent 调用即可。</div></div>
         <!--
           清空对话（§6 待定 3）：清空 = **换一个 sessionId**（不动 session.json ——
@@ -296,6 +395,18 @@
       </aside>
       <section>
         <div id="ttl"></div>
+        <!--
+          run 级总账（2026-11-13）：轮次 / 工具 / 失败 / in-out / cache 命中率 / 成本（带预算）
+          / 模型。判据与文案全在 panel-logic 的 `runLedger`（带单测），这里只填 DOM。
+          右侧两个动作：重跑（回填四个输入，**不自动跑**）与复制 JSONL（喂给 `agentia view`）。
+        -->
+        <div id="ledger" hidden>
+          <div id="ledger-items"></div>
+          <div class="acts">
+            <button class="mini" id="rerun" type="button" title="把这条 run 的 prompt / 目录 / 能力 / 多轮回填到输入条（不会自动开跑）">↻ 回填重跑</button>
+            <button class="mini" id="copy-run" type="button" title="复制这一条 trace 的 JSONL（存成 .jsonl 后可用 agentia view 打开）">复制 JSONL</button>
+          </div>
+        </div>
         <!--
           并排 A/B 的差异摘要（档 B）。默认 hidden，只有选满两条 run 才出现。
           三段结构：可比性提示（不可比时才有 —— 可比时**不显示**，见 comparability 的注释）、
@@ -306,14 +417,56 @@
           <div id="diff-body"></div>
         </div>
         <!--
-          双栏容器：并排时这里是**两个** trace 视图，单run 时只有一个。
-          ⚠️ 不用「同一棵树改CSS 成两半」—— trace-view 的树是自绘的，两棵树必须两个容器。
+          右栏三块：调用树 / 能力排行 / 回复。**三块都能折叠**（2026-11-12 ref-panel-panes）。
+          为什么：这块栏位的高度是三者抢的 —— 三块同时展开时调用树只剩十几行、回复只剩两段，
+          读谁都不够；而多数时刻用户只在看其中一块。折叠掉不要的那两块，剩下那块自动铺满
+          （`flex` 分的是同一个剩余空间，不是三份写死的 vh）。
+          ⚠️ 折叠态在标题栏留一行**规模读数**（N span / N 项 / N 行）—— 收起不等于失明。
         -->
-        <div id="trace" class="tr-single"><div class="tr-empty">// 选一个 run 查看调用树</div></div>
-        <div id="trace2" class="tr-compare" hidden></div>
-        <!-- 能力排行（G2）：哪个能力慢 / 贵 / 爱失败 —— 调优从这里下手 -->
-        <div id="summary"></div>
-        <pre id="reply" hidden></pre>
+        <div id="panes">
+          <div class="pane" id="pane-trace" data-open="1">
+            <button class="pane-head" id="head-trace" type="button" aria-expanded="true" aria-controls="body-trace">
+              <span class="pane-caret" aria-hidden="true"></span>
+              <span class="pane-name">调用树</span>
+              <span class="pane-meta" id="meta-trace"></span>
+            </button>
+            <div class="pane-body" id="body-trace">
+              <!--
+                树工具条（2026-11-13）：树内检索 + 时间轴开关。
+                检索**只高亮 + 跳转，不改结构**（裁剪节点会让「谁挂在谁下面」失真）；
+                判定与跳转都在 trace-view 里（`setQuery` / `nextHit`），这里只接线。
+              -->
+              <div id="tree-bar">
+                <input id="tree-q" type="search" spellcheck="false" placeholder="树里找…（Enter 下一处 / Esc 清空）" />
+                <span id="tree-hit"></span>
+                <button class="mini" id="tl-toggle" type="button" aria-pressed="true" title="按 run 总时长归一的时间轴（关掉可以给它让出 72px）">时间轴</button>
+              </div>
+              <!--
+                双栏容器：并排时这里是**两个** trace 视图，单run 时只有一个。
+                ⚠️ 不用「同一棵树改CSS 成两半」—— trace-view 的树是自绘的，两棵树必须两个容器。
+              -->
+              <div id="trace" class="tr-single"><div class="tr-empty">// 选一个 run 查看调用树</div></div>
+              <div id="trace2" class="tr-compare" hidden></div>
+            </div>
+          </div>
+          <!-- 能力排行（G2）：哪个能力慢 / 贵 / 爱失败 —— 调优从这里下手 -->
+          <div class="pane" id="pane-summary" data-open="1" hidden>
+            <button class="pane-head" id="head-summary" type="button" aria-expanded="true" aria-controls="body-summary">
+              <span class="pane-caret" aria-hidden="true"></span>
+              <span class="pane-name">能力排行</span>
+              <span class="pane-meta" id="meta-summary"></span>
+            </button>
+            <div class="pane-body" id="body-summary"><div id="summary"></div></div>
+          </div>
+          <div class="pane" id="pane-reply" data-open="1" hidden>
+            <button class="pane-head" id="head-reply" type="button" aria-expanded="true" aria-controls="body-reply">
+              <span class="pane-caret" aria-hidden="true"></span>
+              <span class="pane-name">回复</span>
+              <span class="pane-meta" id="meta-reply"></span>
+            </button>
+            <div class="pane-body" id="body-reply"><div id="reply"></div></div>
+          </div>
+        </div>
         <div class="usage" id="usage" hidden>
           <span>in <b id="u-in">0</b></span>
           <span>out <b id="u-out">0</b></span>
@@ -382,6 +535,7 @@
         diffValueText,
         diffFetchErrorText,
         emptyTraceAccumulator,
+        filterRuns,
         filterSelected,
         formatToolSources,
         historyStep,
@@ -394,9 +548,16 @@
         promptAfterFilePick,
         pushPromptHistory,
         replyBelongsTo,
+        rerunFromNote,
         runDoneNotice,
-        runIsFailure,
+        runIdFromSearch,
+        runLedger,
         shortenPath,
+        replyMeta,
+        stopReasonClass,
+        stopReasonText,
+        summaryMeta,
+        traceMeta,
         toggleCompare,
         turnKey,
       } from './panel-logic.js';
@@ -433,6 +594,15 @@
       const fsEl = $('fs');
       const fsListEl = $('fs-list');
       const fsPathEl = $('fs-path');
+      const listQEl = $('list-q');
+      const listAbnEl = $('list-abn');
+      const ledgerEl = $('ledger');
+      const ledgerItemsEl = $('ledger-items');
+      const rerunEl = $('rerun');
+      const copyRunEl = $('copy-run');
+      const treeQEl = $('tree-q');
+      const treeHitEl = $('tree-hit');
+      const tlToggleEl = $('tl-toggle');
 
       const view = createTraceView(traceEl, {
         // 无公开单价 → 不估算成本；只展示 token
@@ -517,6 +687,9 @@
           const t = await res.json();
           el.replaceChildren();
           playTrace(v, t);
+          // 树内检索是**跨重画**的状态（它在 view 里），但 playTrace 只是重画；
+          // 这里补一次是为了「并排时新打开的那一条也按当前关键词高亮」（否则两栏不同步）
+          if (treeQEl.value.trim()) v.setQuery(treeQEl.value);
         }
         await loadDiff(a, b);
       }
@@ -641,6 +814,11 @@
         live: null,
         notice: '',           // 面板自己发的操作反馈（已接受 / 重启了 runner / 出错）
         noticeErr: false,
+        /** 列表检索（2026-11-13）：关键词 **且** 「只看异常」—— 两者都与列表同生共死 */
+        q: '',
+        onlyAbnormal: false,
+        /** 当前打开的那条 trace 本体（总账 / 回填重跑 / 导出都用它；`state.current` 只有 id） */
+        trace: null,
       };
 
       const fmtMs = (ms) => (ms >= 1000 ? (ms / 1000).toFixed(2) + 's' : ms + 'ms');
@@ -768,18 +946,42 @@
           runsEl.appendChild(d);
           return;
         }
+        // 检索（2026-11-13）：关键词 **且** 「只看异常」。判定在 panel-logic（带单测）——
+        // 这里的「异常」包含挂起（它的 trace 状态是 ok，只过滤 ok=false 会漏掉）。
+        const shown = filterRuns(state.list, state.q, { onlyAbnormal: state.onlyAbnormal });
         runsEl.replaceChildren();
-        for (const r of state.list) {
+        if (shown.length === 0) {
+          // ⚠️ 「过滤掉了全部」与「一条都没有」是两件事，必须说清是哪种 ——
+          // 一个错误的空态比一句错误更难发现（用户会以为 run 丢了）
+          const d = document.createElement('div');
+          d.className = 'empty';
+          const why = state.onlyAbnormal ? '只看异常' : '无筛选';
+          d.textContent = `没有匹配的 run（共 ${state.list.length} 条 · ${why}${state.q ? ` · 关键词「${state.q}」` : ''}）`;
+          runsEl.appendChild(d);
+          return;
+        }
+        for (const r of shown) {
           const b = document.createElement('button');
-          // 三态：失败 / **被中止** / 正常。中止不是失败（判别走 panel-logic 的
-          // runIsFailure，与通知条同一条语义）—— 给中止的 run 标红会让用户以为
-          // 是自己把工程改坏了，而那正是「aborted 也带 error」这条引擎约定造成的误读。
-          const tone = runIsFailure(r) ? ' err' : r.stopReason === 'aborted' ? ' aborted' : '';
+          // 四态：失败 / **被中止** / **等审批** / 正常。判别全走 panel-logic 的
+          // `stopReasonClass`（与通知条同一条语义）—— 各处自己读 `ok` 会出现「列表说失败、
+          // 通知条说已中止」这种同一件事两个结论。
+          // 为什么等审批要单独一态：`suspended` 的 trace 状态是 ok（挂起段本身没出错）
+          // ⇒ 只看 ok 它是一个**正常跑完的蓝点**，而那一轮其实还挂着等人。
+          const cls = stopReasonClass(r);
+          const tone =
+            cls === 'failed'
+              ? ' err'
+              : cls === 'aborted'
+                ? ' aborted'
+                : cls === 'suspended'
+                  ? ' suspended'
+                  : '';
           b.className =
             'run' +
             tone +
             (r.traceId === state.current ? ' active' : '') +
             (state.compare.includes(r.traceId) ? ' cmp' : '');
+
           b.type = 'button';
 
           const r1 = document.createElement('span');
@@ -788,12 +990,22 @@
           dot.className = 'dot';
           const name = document.createElement('span');
           name.className = 'name';
-          name.textContent = r.name; // 模型可控内容 ⇒ 只能 textContent
+          // 首行给**这次 run 到底问了什么**。此前这里是 `r.name`，而 dev 环起的 run
+          // 一律叫 `agent.run`（`engine/loop.ts` 的缺省，dev-runner 不传 runName）
+          // ⇒ 五十条一模一样的条目，只能靠第二行的时间戳认人。
+          // prompt 是模型不可控的**用户输入**，仍走 textContent；多行只取首行（CSS 再省略）。
+          const prompt = (r.note && typeof r.note.prompt === 'string' ? r.note.prompt : '').trim();
+          name.textContent = prompt ? prompt.split('\n')[0] : r.name;
+          // 全文进 title：列表里被省略的那半句常常正是区分两次 run 的部分
+          b.title = prompt || r.name;
           r1.append(dot, name);
 
           const r2 = document.createElement('span');
           r2.className = 'r2';
-          r2.textContent = `${fmtMs(r.ms)} · ${fmtNum(r.tokens)} tok · ${ago(r.startedAt)}`;
+          // 非正常收尾把**原因**写在第二行：`budget_exceeded` / `max_iterations` 的 run
+          // 与 `end_turn` 的 run 在旧版看起来一模一样（同样蓝点亮着），而前者根本没跑完。
+          const why = cls === 'ok' ? '' : ` · ${stopReasonText(r.stopReason)}`;
+          r2.textContent = `${fmtMs(r.ms)} · ${fmtNum(r.tokens)} tok · ${ago(r.startedAt)}${why}`;
 
           b.append(r1, r2);
 
@@ -826,6 +1038,150 @@
         }
       }
 
+      // ---------- run 级总账（2026-11-13） ----------
+
+      /**
+       * 打开一条 run，先给「这一趟的账」：轮次 / 工具 / 失败 / in-out / cache 命中率 /
+       * 成本（带上限）/ 模型。判据与文案全在 `runLedger`（带单测），这里只填 DOM。
+       *
+       * 一条可显示项都没有时**整行不出现**（不做空壳）—— 一个只有两个按钮的空账行
+       * 会让人以为数据没读到。
+       */
+      function renderLedger(trace) {
+        ledgerItemsEl.replaceChildren();
+        const items = runLedger(trace, state.dev ? state.dev.budget : null);
+        ledgerEl.hidden = items.length === 0;
+        for (const it of items) {
+          const s = document.createElement('span');
+          s.className = 'lg' + (it.tone === 'err' ? ' err' : '');
+          if (it.title) s.title = it.title;
+          s.appendChild(document.createTextNode(it.key));
+          const b = document.createElement('b');
+          b.textContent = it.value;
+          s.appendChild(b);
+          ledgerItemsEl.appendChild(s);
+        }
+      }
+
+      /**
+       * 「回填重跑」：把这条 run 的四个输入写回输入条，**不自动提交**。
+       * 自动跑会在误触时花钱，而「回填 + 我按运行」多的只是一次点击。
+       */
+      rerunEl.addEventListener('click', () => {
+        const fill = rerunFromNote(
+          state.trace ? state.trace.note : null,
+          state.dev ? state.dev.capabilities : [],
+        );
+        if (!fill) {
+          setNotice('这条 run 没有开发期元信息（不是 agentia dev 起的，或记账已被淘汰）⇒ 没法回填', true);
+          return;
+        }
+        promptEl.value = fill.prompt;
+        if (fill.workdir) {
+          workdirEl.value = fill.workdir;
+          state.workdir = fill.workdir;
+        }
+        state.selected = fill.toolSources;
+        state.multiTurn = fill.multiTurn;
+        renderControls();
+        renderChat();
+        // banner 是 textContent（不跑 Markdown）⇒ 别写 `**没有**`，那会原样露出星号
+        setNotice('已回填这条 run 的四个输入（没有自动运行）—— 确认后按「▶ 运行」', false);
+        promptEl.focus();
+      });
+
+      /**
+       * 复制这一条 trace 的 JSONL。去掉 CLI 侧的 `note`：它不是 trace 的一部分，
+       * 而产物的去处是 `agentia view <file>`（那份只认 trace 形状）。
+       */
+      copyRunEl.addEventListener('click', async () => {
+        if (!state.current) return;
+        try {
+          const res = await fetch('/api/runs/' + encodeURIComponent(state.current));
+          if (!res.ok) {
+            setNotice(`读 trace 失败：HTTP ${res.status}`, true);
+            return;
+          }
+          const trace = await res.json();
+          const bare = { ...trace };
+          delete bare.note;
+          const text = JSON.stringify(bare) + '\n';
+          const clip = navigator.clipboard;
+          if (!clip || typeof clip.writeText !== 'function') {
+            setNotice('这个浏览器没有剪贴板接口 —— 可以直接用 agentia view 读 .agentia/traces.jsonl', true);
+            return;
+          }
+          await clip.writeText(text);
+          setNotice(`已复制 ${text.length} 字符。存成 .jsonl 后：agentia view <文件>`, false);
+        } catch (e) {
+          setNotice(`复制失败：${e.message}`, true);
+        }
+      });
+
+      // ---------- 右栏三块的折叠（收起不要的，剩下的自动变大） ----------
+
+      /**
+       * 折叠态是**布局偏好**，不是数据：切 run / 重新打开页面都不该把它重置
+       * （每次回来都「三块全开、谁都不够高」等于没做）。所以它进 localStorage。
+       * 存不下（隐私模式 / 配额满 / 被禁用）就只活这一次会话 —— 面板不因为记不住布局而白屏，
+       * 这也是下面那个 `try` 存在的唯一理由。
+       */
+      const PANES = ['trace', 'summary', 'reply'];
+      const PANE_KEY = 'agentia.panes';
+      const paneEls = {};
+      for (const id of PANES) {
+        paneEls[id] = { box: $(`pane-${id}`), head: $(`head-${id}`), meta: $(`meta-${id}`) };
+      }
+      const openPanes = (() => {
+        try {
+          const raw = JSON.parse(localStorage.getItem(PANE_KEY) || 'null');
+          return new Set(Array.isArray(raw) ? raw.filter((id) => PANES.includes(id)) : PANES);
+        } catch {
+          return new Set(PANES);
+        }
+      })();
+
+      /**
+       * 写折叠态的**唯一**入口（含初始化）。
+       *
+       * `data-open`（视觉）与 `aria-expanded`（语义）必须一起改 —— 只改前者，屏幕阅读器读到的
+       * 还是「展开」；只改后者，屏幕上是收着的。两条同源的守卫在 `test/structure.test.mjs`
+       * （W6：`dataset.open =` 全文件只许出现一次）。
+       */
+      function applyPane(id, open) {
+        const p = paneEls[id];
+        p.box.dataset.open = open ? '1' : '0';
+        p.head.setAttribute('aria-expanded', open ? 'true' : 'false');
+        if (open) openPanes.add(id);
+        else openPanes.delete(id);
+      }
+
+      /** 用户点击（或初始化之后）才落盘：`applyPane` 在初始化时也会跑，不该顺手写一遍盘 */
+      function persistPanes() {
+        try {
+          localStorage.setItem(PANE_KEY, JSON.stringify([...openPanes]));
+        } catch {
+          /* 存不下就算了：这一次会话内折叠仍然有效 */
+        }
+      }
+
+      /**
+       * 标题栏读数。**只在真的变了时**写 —— 在飞时每一帧都会调它，无谓的赋值会白触发重排
+       * （调用树那块的读数是随 span 数增长的，帧率下这个差别指的是真的会掉帧）。
+       */
+      function setPaneMeta(id, text) {
+        const el = paneEls[id].meta;
+        if (el.textContent !== text) el.textContent = text;
+      }
+
+      for (const id of PANES) {
+        paneEls[id].head.addEventListener('click', () => {
+          applyPane(id, paneEls[id].box.dataset.open !== '1');
+          persistPanes();
+        });
+        applyPane(id, openPanes.has(id));
+      }
+
       // ---------- 模型正文的渲染（Markdown + 长了就折叠） ----------
 
       /**
@@ -960,17 +1316,22 @@
        * 折叠控件放在正文**下方、左对齐**，不在行尾悬 caret：trace-view 那边 caret 靠右是因为
        * 行是 nowrap 的表格状布局，「右端」本来就是「这一行结束了」的位置；正文块不是那个形态，
        * 一个 10px 的箭头挂在右上角没人会去找。判定走 `collapseDecision`（纯逻辑、带单测）。
+       *
+       * `opts.clamp === false` 关掉**内层**的高度夹（回复那一块用）：那块自己已经能折叠、
+       * 自己会滚，再在里面夹一刀就出现两个「展开」—— 一个收整块、一个收正文，点错哪个都
+       * 不像自己期望的。对话轮仍要夹：它长在一列滚滚条里，一条长回复能把整列顶掉。
        */
-      function renderMessage(wrap, text, key) {
+      function renderMessage(wrap, text, key, opts = {}) {
         wrap.classList.add('md-wrap');
         const body = document.createElement('div');
         body.className = 'md';
         const d = collapseDecision(text);
+        const clamp = opts.clamp !== false;
         const open = expandedMsgs.has(key);
-        if (d.collapsed && !open) body.classList.add('md-clamped');
+        if (clamp && d.collapsed && !open) body.classList.add('md-clamped');
         renderMarkdownInto(body, text);
         wrap.appendChild(body);
-        if (!d.collapsed) return; // 短正文不挂控件（挂一个「展开」是噪声）
+        if (!clamp || !d.collapsed) return; // 短正文不挂控件（挂一个「展开」是噪声）
         const btn = document.createElement('button');
         btn.type = 'button';
         btn.className = 'md-toggle';
@@ -984,15 +1345,19 @@
         wrap.appendChild(btn);
       }
 
-      /** 右栏底部那块回复正文。key 带 traceId ⇒ 换一轮就是一个新的折叠态 */
+      /**
+       * 右栏「回复」那一块。key 带 traceId ⇒ 换一轮就是一个新的折叠态。
+       *
+       * 没有回复时**整块藏起来**（不是留个空的标题栏）：不做空壳是这块面板的既有口径，
+       * 而一个永远挂在下面的「回复 ▸」会让人以为回复被自己折起来了。
+       */
       function renderReply() {
         replyEl.replaceChildren();
-        if (!state.reply) {
-          replyEl.hidden = true;
-          return;
-        }
-        replyEl.hidden = false;
-        renderMessage(replyEl, state.reply, `reply:${state.replyFor ?? ''}`);
+        const shown = Boolean(state.reply);
+        paneEls.reply.box.hidden = !shown;
+        if (!shown) return;
+        renderMessage(replyEl, state.reply, `reply:${state.replyFor ?? ''}`, { clamp: false });
+        setPaneMeta('reply', replyMeta(state.reply));
       }
 
       // ---------- 对话流（只在多轮开 + 有会话文件时出现） ----------
@@ -1092,8 +1457,17 @@
         state.replyFor = null;
         renderReply();
         summaryEl.replaceChildren();
+        // 排行与回复这两块在「这一轮还没产出」时**整块不出现**（不做空壳），
+        // 但折叠态留着 —— 下一轮跑完它们按用户原来的布局回来
+        paneEls.summary.box.hidden = true;
+        setPaneMeta('summary', '');
+        setPaneMeta('trace', '');
         usageEl.hidden = true;
         ttlEl.textContent = '';
+        // 总账也是**上一轮**的账 ⇒ 与回复 / 排行一起清掉（收尾后由 open() 重新填）
+        state.trace = null;
+        ledgerEl.hidden = true;
+        ledgerItemsEl.replaceChildren();
         const ph = document.createElement('div');
         ph.className = 'tr-empty';
         ph.textContent = '// 这一轮在飞 —— span 会一个个长出来（收尾时用整棵 trace 覆盖）';
@@ -1119,6 +1493,7 @@
           if (!playTrace(view, t)) return;
           ttlEl.textContent = `${t.traceId}（在飞）`;
           usageEl.hidden = false;
+          setPaneMeta('trace', traceMeta(t.spans.length));
         });
       }
 
@@ -1193,26 +1568,74 @@
         if (!res.ok) return;
         const trace = await res.json();
         state.current = id;
-        ttlEl.textContent = trace.traceId;
+        // 总账要的是 trace 本体（`state.current` 只有 id）—— 重跑 / 导出也靠它
+        state.trace = trace;
+        renderLedger(trace);
+        /* 深链（2026-11-13）：刷新页面回到**这一条**，而不是最新那条。
+           用 `replaceState` 不堆历史 —— 切 run 是同一页的不同视图，push 会让后退键
+           按十几次才离开面板（那不是用户对「后退」的预期）。 */
+        try {
+          const u = new URL(location.href);
+          u.searchParams.set('run', id);
+          history.replaceState(null, '', u);
+        } catch {
+          /* 老浏览器 / file://：没有深链不影响其它任何功能 */
+        }
+        // 标题带**收尾原因**（非正常收尾时）。打开一条历史 run 时最容易犯的误读是
+        // 「树画完了 ⇒ 这一轮跑完成了」，而它可能是撞预算停的、被中止的、或正挂着等人。
+        // 原因取自列表的 summary（`stop_reason` 已在那里解析过，别在页面里再挖 attributes）。
+        const sum = state.list.find((x) => x.traceId === id);
+        const cls = sum ? stopReasonClass(sum) : 'ok';
+        ttlEl.textContent =
+          sum && cls !== 'ok'
+            ? `${trace.traceId} · ${stopReasonText(sum.stopReason)}`
+            : trace.traceId;
         usageEl.hidden = false;
         playTrace(view, trace);
-        summaryEl.innerHTML = renderSummary(summarizeTrace(trace));
+        // 排行算一次、两处消费（表格 + 标题栏读数）：标题说「3 项」而表里有 4 行是
+        // 最难查的一类不一致 —— 同源就不会有这问题
+        const rows = summarizeTrace(trace);
+        summaryEl.innerHTML = renderSummary(rows);
+        paneEls.summary.box.hidden = false;
+        setPaneMeta('summary', summaryMeta(rows));
+        setPaneMeta('trace', traceMeta(trace.spans ? trace.spans.length : 0));
         // 回复正文只对**刚跑完的那一轮**有意义（trace 上没有它 —— 它是 run-done 事件带的）
         // ⇒ 打开**别的** run 时必须清掉，否则它挂在别人的 trace 底下（张冠李戴）。
         //
         // ⚠️ 但不能**无条件**清：`run-done` 与「这条 trace 的收尾帧」几乎同毫秒到达，
         // 而这条 handler 的链更长（refresh → refreshSession → renderChat → open）——
         // 无条件清会把刚写上去的那句回复擦掉（端到端实测 17 ms，现象是「跑完了但没回复」）。
+        //
+        // 清完之后**立刻从 CLI 侧记账取回**：`finalText` 不在 trace 上，但它跟着 note 一起
+        // 存着（`/api/runs/:id` 的顶层 `note`）。不取的话，切到别的 run 再切回来 ——
+        // 甚至只是刷新一次页面 —— 那一轮的结论就永远看不到了。
         if (!replyBelongsTo(id, state.replyFor)) {
-          state.reply = '';
-          state.replyFor = null;
+          const saved = trace.note && typeof trace.note.finalText === 'string' ? trace.note.finalText : '';
+          state.reply = saved;
+          state.replyFor = saved ? id : null;
           renderReply();
         }
         renderList();
       }
 
-      async function openLatest() {
+      /**
+       * 打开一条 run：优先 `?run=<id>`（深链 / 刷新），否则最新一条。
+       *
+       * 深链指向的那条**已不在内存 ring 里**时必须出声：静默回落最新那条会让用户以为
+       * 「链接打开了，就是这条」—— 而他在看别的 run 的树（本仓最忌的张冠李戴）。
+       */
+      async function openLatest(want) {
         await refresh();
+        if (want) {
+          if (state.list.some((r) => r.traceId === want)) {
+            await open(want);
+            return;
+          }
+          setNotice(
+            `打不开 ?run=${want}：它不在内存的 run 列表里（可能已被淘汰，或不是这个面板起的）。已回到最新一条`,
+            true,
+          );
+        }
         if (state.list.length && !state.current) await open(state.list[0].traceId);
       }
 
@@ -1355,6 +1778,92 @@
         }
       });
 
+      // ---------- 列表检索 / 树内检索 / 时间轴（2026-11-13） ----------
+
+      listQEl.addEventListener('input', () => {
+        state.q = listQEl.value;
+        renderList();
+      });
+      listQEl.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          listQEl.value = '';
+          state.q = '';
+          renderList();
+        }
+      });
+      listAbnEl.addEventListener('click', () => {
+        state.onlyAbnormal = !state.onlyAbnormal;
+        listAbnEl.setAttribute('aria-pressed', state.onlyAbnormal ? 'true' : 'false');
+        renderList();
+      });
+
+      /**
+       * 一个输入框同时作用于两棵树：并排时两栏必须**同一处**高亮 —— 否则「差异」里会混进
+       * 「搜索状态不同」这个人为差异。判定与跳转都在 trace-view（`setQuery` / `nextHit`）。
+       */
+      function applyTreeQuery() {
+        const n = view.setQuery(treeQEl.value);
+        if (!trace2El.hidden) view2.setQuery(treeQEl.value);
+        treeHitEl.textContent = treeQEl.value.trim() ? `${n} 处` : '';
+      }
+      treeQEl.addEventListener('input', applyTreeQuery);
+      treeQEl.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          const total = view.setQuery(treeQEl.value);
+          if (total === 0) {
+            treeHitEl.textContent = treeQEl.value.trim() ? '无匹配' : '';
+            return;
+          }
+          const i = view.nextHit(e.shiftKey ? -1 : 1);
+          if (!trace2El.hidden) view2.nextHit(e.shiftKey ? -1 : 1);
+          treeHitEl.textContent = `${i}/${total}`;
+        } else if (e.key === 'Escape') {
+          treeQEl.value = '';
+          applyTreeQuery();
+        }
+      });
+
+      /**
+       * 时间轴开关：**布局偏好**，与折叠态同一类（进 localStorage，切 run 不重置）。
+       * 存不下就只活这一次会话 —— 不因为记不住而白屏（与 PANE_KEY 同一口径）。
+       */
+      const TL_KEY = 'agentia.timeline';
+      let timelineOn = (() => {
+        try {
+          return localStorage.getItem(TL_KEY) !== '0';
+        } catch {
+          return true;
+        }
+      })();
+      function applyTimeline(on) {
+        timelineOn = on;
+        tlToggleEl.setAttribute('aria-pressed', on ? 'true' : 'false');
+        view.setTimeline(on);
+        view2.setTimeline(on);
+      }
+      tlToggleEl.addEventListener('click', () => {
+        applyTimeline(!timelineOn);
+        try {
+          localStorage.setItem(TL_KEY, timelineOn ? '1' : '0');
+        } catch {
+          /* 同上：这一次会话内仍然有效 */
+        }
+      });
+      applyTimeline(timelineOn);
+
+      // `/` 聚焦列表搜索（不在输入框里时）。这是「迅速找回刚才那条」的入口，
+      // 而列表是这个面板唯一有几十条内容的地方。
+      document.addEventListener('keydown', (e) => {
+        if (e.key !== '/' || e.metaKey || e.ctrlKey || e.altKey) return;
+        // `??`（不是 `||`）：tagName 只可能缺省或非空，用 `||` 与 `??` 在这里同义 —— 但 `??`
+        // 不会把将来的空字符串值也替换掉，意图更直白
+        const tag = e.target?.tagName ?? '';
+        if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+        e.preventDefault();
+        listQEl.focus();
+      });
+
       // ---------- 控件接线（只做「取值 → 调 panel-logic → 写回」） ----------
       workdirEl.addEventListener('input', () => {
         state.workdir = workdirEl.value;
@@ -1555,7 +2064,8 @@
 
       await refreshDev();
       await refreshSession();
-      await openLatest();
+      // 深链优先（`?run=<id>`）：刷新 / 贴链接回到那条，而不是最新那条
+      await openLatest(runIdFromSearch(location.search));
       renderChat();
     </script>
   </body>