@migor/cli 0.9.0 → 0.9.2

package/dist/inspector-page.html

@@ -43,15 +43,46 @@
       }
       #banner.err { border-color: var(--err); background: #1d1416; color: var(--err); }
 
+      /* 应用外壳：**整页不滚**，滚动交给各自的栏。
+         为什么：内容一长就整页滚的话，「我正在看调用树」与「我在读回复」会互相把对方推走，
+         而且 footer 还粘在底部盖住内容 —— 三个滚动条（页面 / 树 / 展开的行）叠在一起最难用。 */
+      html, body { height: 100%; }
+      body { overflow: hidden; display: flex; flex-direction: column; }
+      header, #banner, footer { flex: none; }
       main {
+        flex: 1 1 auto; min-height: 0;
         display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px;
         padding: 14px 20px;
       }
       aside, section {
         background: var(--card); border: 1px solid var(--border); border-radius: 6px;
+        min-height: 0;
+      }
+      /* 左栏：页签/清空条固定，列表自己滚 */
+      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 撑开并滚；
+         回复 / 能力排行 / 用量固定在下方，各自有上限（回复很长时在**它自己那块**里滚，
+         而不是把树推出屏幕 —— 这与「看树」和「读回复」两个动作各自独立是一致的）。 */
+      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; }
+      /* 窄屏：两栏并排已经太窄 ⇒ 回到单列 + 整页滚动（此时「整页滚」才是唯一合理的形态） */
+      @media (max-width: 860px) {
+        html, body { height: auto; }
+        body { overflow: visible; }
+        main { grid-template-columns: minmax(0, 1fr); }
+        aside { overflow: visible; }
+        section { overflow: visible; }
+        #runs, #chat, #trace { overflow: visible; }
+        #trace { min-height: 320px; }
+        #summary, #reply, .usage { max-height: none; }
       }
-      aside { overflow: hidden auto; max-height: calc(100vh - 200px); }
-      section { padding: 14px; min-height: 240px; font-family: var(--mono); font-size: 12px; overflow: auto; }
       .run {
         display: block; width: 100%; text-align: left; cursor: pointer;
         background: none; border: 0; border-bottom: 1px solid var(--border);
@@ -102,10 +133,50 @@
 
       #reply {
         margin: 14px 0 0; padding: 10px; border: 1px solid var(--border); border-radius: 4px;
-        background: #0e0e10; white-space: pre-wrap; word-break: break-word; color: var(--muted);
+        background: #0e0e10; word-break: break-word; color: var(--muted);
       }
       #reply[hidden] { display: none; }
 
+      /* —— 模型正文：Markdown 渲染 ——
+         `.md` 里所有元素都是 createElement 造出来的（解析器不产生 HTML，渲染器不用 innerHTML），
+         所以这里可以有排版规则，但没有一处「把字符串塞进 DOM」。 */
+      .md { white-space: normal; word-break: break-word; line-height: 1.6; }
+      .md-p { margin: 0 0 6px; }
+      .md-p:last-child, .md-list:last-child, .md-pre:last-child { margin-bottom: 0; }
+      .md-h { margin: 10px 0 4px; font-size: 12.5px; color: var(--text); }
+      .md-h:first-child { margin-top: 0; }
+      .md-list { margin: 0 0 6px; padding-left: 18px; }
+      .md-list li { margin: 1px 0; }
+      .md-pre {
+        position: relative; margin: 0 0 6px; padding: 8px; background: #0e0e10;
+        border: 1px solid var(--border); border-radius: 4px; overflow: auto;
+      }
+      .md-pre code { font-family: var(--mono); font-size: 11.5px; white-space: pre; }
+      .md-lang { position: absolute; top: 3px; right: 7px; color: var(--faint); font-size: 9.5px; }
+      .md-c { background: #1b1b1f; border-radius: 3px; padding: 0 3px; font-family: var(--mono); }
+      .md blockquote { margin: 0 0 6px; padding-left: 9px; border-left: 2px solid var(--border); color: var(--muted); }
+      .md a { color: var(--ice); }
+      .md hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }
+      /* 正文用无衬线正文栈（模型输出是散文，等宽栈读它更累）；码块与行内码仍是等宽。
+         挂在 `.md-wrap`（渲染器的包装节点）而不是 `#reply .md, .turn .md`：单一类选择器
+         既不用管特异性排序，也让「哪块是模型正文」只由一处决定。 */
+      .md-wrap {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
+        font-size: 12px;
+      }
+      /* 折叠态：卡高度 + 底部渐隐（渐隐是「下面还有」的视觉提示；用 mask 所以不影响选中复制） */
+      .md-clamped {
+        max-height: 216px; overflow: hidden;
+        -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
+        mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
+      }
+      /* 展开控件：正文**下方**左对齐（长正文里没人会去右上角找一个 10px 的箭头） */
+      .md-toggle {
+        margin-top: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 4px;
+        color: var(--text); padding: 4px 9px; font: inherit; font-size: 11px; cursor: pointer;
+      }
+      .md-toggle:hover { border-color: var(--ice); }
+
       /* 输入条：固定在底部、横跨两栏、分两行（四个控件挤一行会太窄） */
       footer {
         position: sticky; bottom: 0; margin-top: 4px;
@@ -151,6 +222,11 @@
       .fs-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); }
       .fs-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 4px 6px; border-radius: 4px; font: inherit; font-family: var(--mono); font-size: 12px; cursor: pointer; }
       .fs-item:hover { background: #202024; }
+      /* 隐藏目录：可达但不可眼（旧实现直接过滤掉，于是 .y 这类目录根本点不进去） */
+      .fs-dot { color: var(--faint); }
+      /* 文件行：点它 = 选它所在的目录（不是选文件本身当工作目录 —— 工作目录只能是目录） */
+      .fs-file { color: var(--text); }
+      .fs-sep { padding: 8px 6px 2px; margin-top: 6px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
       .fs-foot { padding-top: 8px; border-top: 1px solid var(--border); margin-top: 6px; }
       .mini { background: var(--card); border: 1px solid var(--border); border-radius: 4px; color: var(--text); padding: 5px 9px; font: inherit; font-size: 11.5px; cursor: pointer; }
       .mini:hover { border-color: var(--ice); }
@@ -227,22 +303,33 @@
           <span id="fs-path"></span>
         </div>
         <div id="fs-list"></div>
-        <div class="fs-foot"><button class="mini" id="fs-use" type="button">选这个目录</button></div>
+        <div class="fs-foot">
+          <button class="mini" id="fs-use" type="button">选这个目录</button>
+          <span class="hint"> 点文件名 = 选它所在的目录（prompt 为空时填文件名）</span>
+        </div>
       </div>
     </footer>
 
     <script type="module">
       import { createTraceView, playTrace, summarizeTrace, renderSummary } from './index.js';
+      import { parseMarkdown } from './markdown.js';
       import {
         HISTORY_DRAFT,
+        applyTraceEvent,
+        browseTarget,
         capabilityBadge,
+        collapseDecision,
+        emptyTraceAccumulator,
         historyStep,
         historyText,
         mergeConversation,
         multiTurnDefault,
         multiTurnLabel,
         normalizeToolSources,
+        partialTrace,
+        promptAfterFilePick,
         pushPromptHistory,
+        replyBelongsTo,
         runDoneNotice,
         runIsFailure,
         shortenPath,
@@ -298,6 +385,17 @@
         list: [],
         current: null,
         reply: '',
+        /**
+         * 这段回复是**哪个 traceId** 的（`run-done` 带回来的）。`open()` 靠它判断
+         * 「现在打开的就是这条回复的主人」⇒ 不清。见 panel-logic 的 `replyBelongsTo`。
+         */
+        replyFor: null,
+        /**
+         * 在飞 run 的增量 trace 累加器（null = 没有在飞的 run）。
+         * 收到 `trace-event` 就折回并重画；收尾那份整棵 trace 回来时把它清掉
+         * （**收尾那份永远覆盖在飞的这份**，缺的 span 由它补齐）。
+         */
+        live: null,
         notice: '',           // 面板自己发的操作反馈（已接受 / 重启了 runner / 出错）
         noticeErr: false,
       };
@@ -462,6 +560,123 @@
         }
       }
 
+      // ---------- 模型正文的渲染（Markdown + 长了就折叠） ----------
+
+      /**
+       * 展开态**活在渲染之外**（与 trace-view 的 `expanded` 同一个理由）：面板每次全量重画，
+       * 状态留在 DOM 里就会被下一次重画合上 —— 而「刚点开的那段自己收起来了」是最烦人的那种 bug。
+       * 键要**跨重画稳定**：回复用 traceId、对话轮用下标（会话是只追加的，下标稳定）。
+       */
+      const expandedMsgs = new Set();
+
+      /** 行内 token → DOM。只走 createElement / textContent —— 见 markdown.ts 的安全前提 */
+      function appendInline(parent, inline) {
+        for (const n of inline) {
+          if (n.type === 'text') {
+            parent.appendChild(document.createTextNode(n.text));
+          } else if (n.type === 'code') {
+            const c = document.createElement('code');
+            c.className = 'md-c';
+            c.textContent = n.text;
+            parent.appendChild(c);
+          } else if (n.type === 'link') {
+            // href 已在解析层过白名单（isSafeHref）；target/rel 防止把这面板当跳板
+            const a = document.createElement('a');
+            a.href = n.href;
+            a.textContent = n.text;
+            a.target = '_blank';
+            a.rel = 'noopener noreferrer';
+            parent.appendChild(a);
+          } else {
+            const w = document.createElement(n.type === 'strong' ? 'strong' : 'em');
+            appendInline(w, n.children);
+            parent.appendChild(w);
+          }
+        }
+      }
+
+      /** Markdown → DOM。块级只认 markdown.ts 的那六种；这里**没有** innerHTML —— 一个都没有 */
+      function renderMarkdownInto(el, text) {
+        for (const b of parseMarkdown(text)) {
+          if (b.type === 'hr') {
+            el.appendChild(document.createElement('hr'));
+          } else if (b.type === 'code') {
+            const pre = document.createElement('pre');
+            pre.className = 'md-pre';
+            if (b.lang) {
+              const tag = document.createElement('span');
+              tag.className = 'md-lang';
+              tag.textContent = b.lang;
+              pre.appendChild(tag);
+            }
+            const code = document.createElement('code');
+            code.textContent = b.text;
+            pre.appendChild(code);
+            el.appendChild(pre);
+          } else if (b.type === 'list') {
+            const list = document.createElement(b.ordered ? 'ol' : 'ul');
+            list.className = 'md-list';
+            for (const item of b.items) {
+              const li = document.createElement('li');
+              appendInline(li, item);
+              list.appendChild(li);
+            }
+            el.appendChild(list);
+          } else if (b.type === 'quote') {
+            const q = document.createElement('blockquote');
+            appendInline(q, b.inline);
+            el.appendChild(q);
+          } else {
+            const isH = b.type === 'h';
+            const node = document.createElement(isH ? `h${Math.min(6, Math.max(1, b.level))}` : 'p');
+            node.className = isH ? 'md-h' : 'md-p';
+            appendInline(node, b.inline);
+            el.appendChild(node);
+          }
+        }
+      }
+
+      /**
+       * 一段**模型正文**（最终回复 / 助手轮）→ 填进 `wrap`。
+       *
+       * 折叠控件放在正文**下方、左对齐**，不在行尾悬 caret：trace-view 那边 caret 靠右是因为
+       * 行是 nowrap 的表格状布局，「右端」本来就是「这一行结束了」的位置；正文块不是那个形态，
+       * 一个 10px 的箭头挂在右上角没人会去找。判定走 `collapseDecision`（纯逻辑、带单测）。
+       */
+      function renderMessage(wrap, text, key) {
+        wrap.classList.add('md-wrap');
+        const body = document.createElement('div');
+        body.className = 'md';
+        const d = collapseDecision(text);
+        const open = expandedMsgs.has(key);
+        if (d.collapsed && !open) body.classList.add('md-clamped');
+        renderMarkdownInto(body, text);
+        wrap.appendChild(body);
+        if (!d.collapsed) return; // 短正文不挂控件（挂一个「展开」是噪声）
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'md-toggle';
+        btn.textContent = open ? '收起 ▴' : `${d.hint} ▾`;
+        btn.addEventListener('click', () => {
+          if (expandedMsgs.has(key)) expandedMsgs.delete(key);
+          else expandedMsgs.add(key);
+          renderChat();
+          renderReply();
+        });
+        wrap.appendChild(btn);
+      }
+
+      /** 右栏底部那块回复正文。key 带 traceId ⇒ 换一轮就是一个新的折叠态 */
+      function renderReply() {
+        replyEl.replaceChildren();
+        if (!state.reply) {
+          replyEl.hidden = true;
+          return;
+        }
+        replyEl.hidden = false;
+        renderMessage(replyEl, state.reply, `reply:${state.replyFor ?? ''}`);
+      }
+
       // ---------- 对话流（只在多轮开 + 有会话文件时出现） ----------
       function renderChat() {
         const dev = state.dev;
@@ -489,7 +704,10 @@
           d.textContent = '会话文件还是空的。跑一次多轮 run 就有了。';
           chatEl.appendChild(d);
         }
+        // 下标当折叠态的键：会话只追加 ⇒ 下标跨重画稳定
+        let ti = -1;
         for (const t of turns) {
+          ti++;
           const box = document.createElement('div');
           box.className = 'turn' + (t.failed ? ' failed' : t.aborted ? ' aborted' : '');
           const who = document.createElement('div');
@@ -505,7 +723,10 @@
             who2.textContent = 'assistant';
             const a = document.createElement('div');
             a.className = 'msg';
-            a.textContent = t.assistant;
+            // 助手轮是**模型正文** ⇒ Markdown 渲染 + 长了折叠。
+            // 用户轮保持字面（`u.textContent = t.user` 上面那两行没动）—— 那是「我打的字」，
+            // 把它按 Markdown 重排会让面板看起来像改过我的输入。
+            renderMessage(a, t.assistant, `turn:${ti}`);
             box.append(who2, a);
           } else if (t.failed) {
             // 失败轮**标失败**，不假装那轮没发生（它没回写会话文件，靠 run 列表 join 出来）
@@ -536,6 +757,51 @@
         renderChat();
       }
 
+      // ---------- 在飞 run 的实时右栏（①） ----------
+
+      /**
+       * run 开跑：把右栏切成「这一轮的空树」。
+       *
+       * 为什么必须在 run-start 就切（而不是等第一条 span）：不切的话右栏留着**上一轮**那棵树，
+       * 一次十几秒的 run 期间它看起来就是「这次的结果」。同理清掉上一轮的回复 / 排行 / 用量 ——
+       * 它们都是**上一轮**的账，与在飞的这一轮无关（历史 run 在左栏列表里随时能点回来）。
+       */
+      function beginLiveRender() {
+        state.live = emptyTraceAccumulator();
+        state.reply = '';
+        state.replyFor = null;
+        renderReply();
+        summaryEl.replaceChildren();
+        usageEl.hidden = true;
+        ttlEl.textContent = '';
+        const ph = document.createElement('div');
+        ph.className = 'tr-empty';
+        ph.textContent = '// 这一轮在飞 —— span 会一个个长出来（收尾时用整棵 trace 覆盖）';
+        traceEl.replaceChildren(ph);
+      }
+
+      /**
+       * 增量事件 → 折回 → 重画整棵树。
+       *
+       * `playTrace` 是**幂等全量重画**（自己拆好树再画），所以这里不需要「局部更新」那套：
+       * 每次把当前已知的 spans 交回去就行。用 rAF 合帧是必要的 —— 一次 run 可能有几百条
+       * 记账事件，逐条重绘是白烧 CPU（而人眼只看得见一帧）。
+       */
+      let liveFrame = 0;
+      function renderLive() {
+        if (liveFrame) return;
+        liveFrame = requestAnimationFrame(() => {
+          liveFrame = 0;
+          if (!state.live) return;
+          const t = partialTrace(state.live);
+          // 空树不交给 playTrace（它对空 spans 直接返回 false，右栏会留着占位那行 —— 那正是我们要的）
+          if (t.spans.length === 0) return;
+          if (!playTrace(view, t)) return;
+          ttlEl.textContent = `${t.traceId}（在飞）`;
+          usageEl.hidden = false;
+        });
+      }
+
       // ---------- 拉数据 ----------
       async function refreshDev() {
         try {
@@ -546,6 +812,9 @@
         }
         // 会话 id 由 dev 环持有（清空对话会换它）—— 面板不自己造，只跟着走
         state.sessionId = state.dev?.sessionId ?? '';
+        // 页面**在 run 在飞时**才加载（刷新 / 新开标签）⇒ 补一个累加器，好接住后续的增量帧。
+        // 之前那些 span 收不到（SSE 不重放）—— 它们会随收尾那份整棵 trace 一起补齐。
+        if (state.dev?.running && !state.live) state.live = emptyTraceAccumulator();
         renderControls();
         renderChat();
         renderBanner();
@@ -590,10 +859,16 @@
         playTrace(view, trace);
         summaryEl.innerHTML = renderSummary(summarizeTrace(trace));
         // 回复正文只对**刚跑完的那一轮**有意义（trace 上没有它 —— 它是 run-done 事件带的）
-        // ⇒ 打开历史 run 必须清掉，否则它挂在别人的 trace 底下（张冠李戴）
-        state.reply = '';
-        replyEl.hidden = true;
-        replyEl.textContent = '';
+        // ⇒ 打开**别的** run 时必须清掉，否则它挂在别人的 trace 底下（张冠李戴）。
+        //
+        // ⚠️ 但不能**无条件**清：`run-done` 与「这条 trace 的收尾帧」几乎同毫秒到达，
+        // 而这条 handler 的链更长（refresh → refreshSession → renderChat → open）——
+        // 无条件清会把刚写上去的那句回复擦掉（端到端实测 17 ms，现象是「跑完了但没回复」）。
+        if (!replyBelongsTo(id, state.replyFor)) {
+          state.reply = '';
+          state.replyFor = null;
+          renderReply();
+        }
         renderList();
       }
 
@@ -602,10 +877,20 @@
         if (state.list.length && !state.current) await open(state.list[0].traceId);
       }
 
-      // ---------- 目录浏览 ----------
+      // ---------- 目录浏览 / 选文件（③） ----------
       // 浏览器拿不到用户选的文件夹的绝对路径（webkitdirectory 只给相对路径、
       // File System Access 只给 handle.name），而 dev 环要的是绝对路径 ⇒ 服务端列目录。
+      //
+      // 三个控件语义（2026-09-22 复核后定，前两条是实测出来的缺口）：
+      // - 点**目录名** ⇒ 进去；点 `..` ⇒ 上一层；「选这个目录」⇒ 把当前位置当工作目录。
+      // - 点**文件名** ⇒ 工作目录 = 它**所在的**目录（就是当前这一层），prompt 为空时填文件名。
+      //   只列目录的旧形态下，「让 agent 看某个文件」只能靠用户自己把名字打进 prompt。
+      // - 隐藏目录（`.git` / `~/x/.y`）单列在正常目录之后 —— 旧实现整批过滤掉，
+      //   于是那些目录**根本点不进去**（`..` 只能退到它上面，进不去）。
       let fsPath = '';
+      function closeFs() {
+        fsEl.hidden = true;
+      }
       async function openFs(at) {
         const res = await fetch('/api/fs?path=' + encodeURIComponent(at));
         if (!res.ok) {
@@ -617,30 +902,67 @@
         fsPath = body.path;
         fsPathEl.textContent = body.path;
         fsListEl.replaceChildren();
-        for (const name of body.dirs) {
+
+        const row = (text, cls, title, onClick) => {
           const b = document.createElement('button');
           b.type = 'button';
-          b.className = 'fs-item';
-          b.textContent = name + '/';
-          b.addEventListener('click', () => openFs(fsPath + '/' + name));
+          b.className = cls;
+          b.textContent = text;
+          if (title) b.title = title;
+          b.addEventListener('click', onClick);
           fsListEl.appendChild(b);
+        };
+        const enterDir = (name) => () => void openFs(`${fsPath}/${name}`);
+        /** 选一个文件：工作目录取**当前这一层**（它所在的目录），prompt 只在空时被填 */
+        const useFile = (name) => () => {
+          workdirEl.value = fsPath;
+          state.workdir = fsPath;
+          const picked = promptAfterFilePick(promptEl.value, name);
+          if (picked.filled) promptEl.value = picked.prompt;
+          closeFs();
+          setNotice(
+            picked.filled
+              ? `工作目录：${short(fsPath)}（prompt 已填「${name}」）`
+              : `工作目录：${short(fsPath)}（prompt 里已有内容，一个字没动）`,
+            false,
+          );
+        };
+
+        for (const name of body.dirs) row(name + '/', 'fs-item', '', enterDir(name));
+        for (const name of body.dotDirs ?? []) {
+          row(name + '/', 'fs-item fs-dot', '隐藏目录', enterDir(name));
+        }
+        const files = body.files ?? [];
+        if (files.length > 0) {
+          const sep = document.createElement('div');
+          sep.className = 'fs-sep';
+          sep.textContent = '文件';
+          fsListEl.appendChild(sep);
+          for (const name of files) {
+            row(name, 'fs-item fs-file', '选这个文件：工作目录设成它所在的目录，prompt 为空时填文件名', useFile(name));
+          }
+        }
+        if (body.filesTruncated) {
+          const more = document.createElement('div');
+          more.className = 'hint';
+          more.textContent = `（文件只列了前 ${files.length} 个）`;
+          fsListEl.appendChild(more);
         }
         fsEl.hidden = false;
         fsEl.dataset.parent = body.parent;
       }
-      $('fs-up').addEventListener('click', () => openFs(fsEl.dataset.parent || fsPath));
+      $('fs-up').addEventListener('click', () => void openFs(fsEl.dataset.parent || fsPath));
       $('fs-use').addEventListener('click', () => {
         workdirEl.value = fsPath;
         state.workdir = fsPath;
-        fsEl.hidden = true;
+        closeFs();
         setNotice(`工作目录：${short(fsPath)}`, false);
       });
+      // ⚠️ 这里**不是**开关：旧实现「面板开着时再点一次把它关掉」，于是
+      // 「在输入框敲了目标路径 → 点浏览…」这个最自然的动作是把面板关掉，
+      // 用户就以为「选不了别的目录」。现在点它**总是**按当前输入打开。
       $('browse').addEventListener('click', () => {
-        if (!fsEl.hidden) {
-          fsEl.hidden = true;
-          return;
-        }
-        void openFs(workdirEl.value.trim() || (state.dev ? state.dev.defaultWorkdir : '.'));
+        void openFs(browseTarget(workdirEl.value, state.dev ? state.dev.defaultWorkdir : '.'));
       });
 
       // ---------- 控件接线（只做「取值 → 调 panel-logic → 写回」） ----------
@@ -654,6 +976,9 @@
       });
       document.addEventListener('click', (e) => {
         if (capsEl.open && !capsEl.contains(e.target)) capsEl.open = false;
+        // 目录浏览器：点面板外面收起。`浏览…` 不再是开关之后，这是主要的收起方式
+        // （按钮自己那一支要排除，否则点它就会「开完立刻被这里收掉」）。
+        if (!fsEl.hidden && !fsEl.contains(e.target) && !$('browse').contains(e.target)) closeFs();
       });
 
       promptEl.addEventListener('keydown', (e) => {
@@ -758,6 +1083,9 @@
         const nameEl = document.createElement('b');
         nameEl.textContent = s.name;
         liveEl.append(nameEl, ` · ${fmtMs(s.ms)}`);
+        // 收尾那份整棵 trace 到了 ⇒ 在飞的那份**作废**：`open()` 画的是权威版本，
+        // 而且此后不该再让迟到的增量帧把它重画成残缺的一棵（见 dev-protocol 的 DevEvent）
+        state.live = null;
         await refresh();
         await refreshSession();
         renderChat();
@@ -767,6 +1095,8 @@
         const ev = JSON.parse(m.data);
         if (ev.kind === 'run-start') {
           liveEl.textContent = '正在跑…';
+          // 右栏从这一轮的空树开始（① 实时）：不这么做的话它留着上一轮那棵树
+          beginLiveRender();
           setNotice(
             `运行中：${short(ev.workdir)} · ${ev.toolSources === null ? '全量' : ev.toolSources.join(',')}` +
               `${ev.multiTurn ? ' · 多轮' : ''}`,
@@ -774,10 +1104,18 @@
           );
           // run-start 是「确实开跑了」的权威信号 ⇒ 中止按钮在这里出现（不看面板自己的乐观状态）
           await refreshDev();
+        } else if (ev.kind === 'trace-event') {
+          // 在飞的一笔记账（①）：折回 + 合帧重画。`state.live` 为空说明收尾那份已经到了
+          // （或这一轮不是面板起的）⇒ 丢掉 —— 权威版本已经在屏幕上，别用残缺的覆盖它。
+          if (state.live && applyTraceEvent(state.live, ev.event)) renderLive();
         } else if (ev.kind === 'run-done') {
           state.reply = ev.finalText || '';
-          replyEl.hidden = state.reply.length === 0;
-          replyEl.textContent = state.reply;
+          // 记下这条回复的**主人**：紧随其后的收尾帧会 open() 同一条 traceId，
+          // 那时不能把回复当「别人的」擦掉（见 panel-logic 的 replyBelongsTo）
+          state.replyFor = ev.traceId;
+          state.live = null;
+          // Markdown 渲染 + 长了折叠（渲染层不认识正文语义，只按 token 建节点）
+          renderReply();
           // 判别顺序（先 stopReason 后 ok）是**语义**，抽在 panel-logic 里并带单测 ——
           // 中止的 run `ok` 也是 false（引擎刻意给 aborted 带结构化 error），
           // 顺序反了就会把「我按了中止」显示成「run 失败」。
@@ -789,6 +1127,8 @@
           renderChat();
         } else if (ev.kind === 'runner-restart') {
           setNotice(`重启 runner：${ev.reason}`, false);
+          // 重启前的在飞 run 已经不存在了（它的 trace 会丢，面板在别处明说）⇒ 别留一棵半截树
+          state.live = null;
           // 重启期间菜单是过期的（旧 runner 的能力）—— 先刷一次，等 runner-ready 再刷一次。
           await refreshDev();
         } else if (ev.kind === 'runner-ready') {
@@ -797,6 +1137,7 @@
           await refreshDev();
         } else if (ev.kind === 'runner-error') {
           setNotice(ev.message, true);
+          state.live = null;
           await refreshDev();
         }
       });

package/dist/inspector-sink.js

@@ -15,3 +15,22 @@ export function createInspectSink(opts) {
         },
     };
 }
+export function createInspectEventSink(opts) {
+    const url = `http://${opts.host ?? '127.0.0.1'}:${opts.port}/ingest-event`;
+    const headers = { 'content-type': 'application/json' };
+    if (opts.token)
+        headers['x-agentia-token'] = opts.token;
+    let chain = Promise.resolve();
+    return {
+        send(event) {
+            chain = chain.then(async () => {
+                try {
+                    await fetch(url, { method: 'POST', headers, body: JSON.stringify(event) });
+                }
+                catch {
+                    /* 面板未开 / 已关 / 连接被拒：静默（观测失败不击穿 dev） */
+                }
+            });
+        },
+    };
+}