@migor/cli 0.9.1 → 0.9.3

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;
@@ -212,6 +283,9 @@
         </details>
         <input id="workdir" class="ctl" type="text" spellcheck="false" placeholder="工作目录（绝对路径）" />
         <button id="browse" class="ctl mini" type="button">浏览…</button>
+        <!-- 系统选择…：浏览器弹不出系统目录对话框（拿不到绝对路径），由 dev 进程代弹
+             （POST /api/fs/pick）。与「浏览…」（服务端列目录）并列，互为兜底。 -->
+        <button id="pick" class="ctl mini" type="button" title="弹出系统目录选择框（在你的桌面上，不在浏览器里）">系统选择…</button>
         <label class="mt ctl" title="多轮的初始值 = 所选能力声明的 OR；可在这里覆盖">
           <input type="checkbox" id="mt" /> <span id="mt-label">单轮</span>
         </label>
@@ -241,12 +315,17 @@
 
     <script type="module">
       import { createTraceView, playTrace, summarizeTrace, renderSummary } from './index.js';
+      import { parseMarkdown } from './markdown.js';
       import {
         HISTORY_DRAFT,
         applyTraceEvent,
         browseTarget,
         capabilityBadge,
+        chatViewVisible,
+        collapseDecision,
         emptyTraceAccumulator,
+        filterSelected,
+        formatToolSources,
         historyStep,
         historyText,
         mergeConversation,
@@ -260,6 +339,7 @@
         runDoneNotice,
         runIsFailure,
         shortenPath,
+        turnKey,
       } from './panel-logic.js';
 
       const $ = (id) => document.getElementById(id);
@@ -365,6 +445,9 @@
 
         // 能力多选（默认全选）。全选时 badge 显示 N/N —— 一眼看出这次是全量还是收窄
         const all = dev.capabilities;
+        // runner 重启后菜单可能变了：先丢掉已失效的 token（不丢的话徽标会说谎成「4/3」，
+        // 分子里混着菜单上已不存在的名字），再兜空集回落全选
+        state.selected = filterSelected(state.selected, all);
         if (state.selected.length === 0 && all.length > 0) state.selected = [...all];
         capsSumEl.textContent = `能力 ${capabilityBadge(state.selected, all)} ▾`;
         capsPopEl.replaceChildren();
@@ -478,7 +561,7 @@
           if (r.note) {
             const r3 = document.createElement('span');
             r3.className = 'r3';
-            const caps = r.note.toolSources === null ? '全量' : r.note.toolSources.join(',');
+            const caps = formatToolSources(r.note.toolSources);
             r3.textContent = `${short(r.note.workdir)} · ${caps}${r.note.multiTurn ? ' · 多轮' : ''}`;
             b.appendChild(r3);
           }
@@ -487,13 +570,133 @@
         }
       }
 
+      // ---------- 模型正文的渲染（Markdown + 长了就折叠） ----------
+
+      /**
+       * 展开态**活在渲染之外**（与 trace-view 的 `expanded` 同一个理由）：面板每次全量重画，
+       * 状态留在 DOM 里就会被下一次重画合上 —— 而「刚点开的那段自己收起来了」是最烦人的那种 bug。
+       * 键要**跨重画稳定**：回复用 traceId、对话轮用 `sessionId + 下标`
+       * （`turnKey` —— 只追加的会话里下标稳定，而 sessionId 防「清空对话」后
+       * 旧下标的展开态套到新对话上）。
+       */
+      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;
         const def = multiTurnDefault(state.selected, dev ? dev.multiTurn : []);
         const value = state.multiTurn ?? def.value;
         // 三条都要满足才显示：多轮开着、会话文件读得到、dev 环在场 —— 不做空壳
-        const show = !!dev && dev.available && value && state.session !== null;
+        // （判定是纯逻辑 chatViewVisible，这里只做取值 → 调它 → 写回）
+        const show = chatViewVisible(dev, value, state.session);
         tabsEl.hidden = !show;
         // 清空对话条与对话视图同生共死（它清的就是这份对话）——
         // **还要跟页签走**：它长在对话视图上，切回 run 列表时不该留在那儿
@@ -514,7 +717,11 @@
           d.textContent = '会话文件还是空的。跑一次多轮 run 就有了。';
           chatEl.appendChild(d);
         }
+        // 下标进折叠态的键时必须混进 sessionId（turnKey）：「清空对话」换 id 后下标
+        // 从 0 重来，不带 id 会把旧会话的展开态套到新对话的第 0/1/… 轮上
+        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');
@@ -530,7 +737,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, turnKey(state.sessionId, ti));
             box.append(who2, a);
           } else if (t.failed) {
             // 失败轮**标失败**，不假装那轮没发生（它没回写会话文件，靠 run 列表 join 出来）
@@ -574,8 +784,7 @@
         state.live = emptyTraceAccumulator();
         state.reply = '';
         state.replyFor = null;
-        replyEl.hidden = true;
-        replyEl.textContent = '';
+        renderReply();
         summaryEl.replaceChildren();
         usageEl.hidden = true;
         ttlEl.textContent = '';
@@ -609,11 +818,21 @@
 
       // ---------- 拉数据 ----------
       async function refreshDev() {
+        // ⚠️ 与 refresh() 同一口径：必须查 res.ok。403（token 失效 / cookie 过期）时
+        // 旧实现静默把 dev 置空 ⇒ 输入条无声消失；服务端 403 的 error 文案本来就写清了
+        // 解决办法，把它亮出来，别让用户对着「输入条怎么没了」干瞪眼。
         try {
           const res = await fetch('/api/dev');
-          state.dev = res.ok ? await res.json() : null;
-        } catch {
+          if (!res.ok) {
+            const body = await res.json().catch(() => ({}));
+            state.dev = null;
+            setNotice(`读 dev 状态失败：${body.error || res.status}（输入条因此先收起来了）`, true);
+          } else {
+            state.dev = await res.json();
+          }
+        } catch (e) {
           state.dev = null;
+          setNotice(`读 dev 状态失败：${e.message}（输入条因此先收起来了）`, true);
         }
         // 会话 id 由 dev 环持有（清空对话会换它）—— 面板不自己造，只跟着走
         state.sessionId = state.dev?.sessionId ?? '';
@@ -627,12 +846,21 @@
 
       async function refreshSession() {
         if (!state.dev?.available) return;
+        // ⚠️ 与 refresh() 同一口径：失败必须亮出来。旧实现静默把 session 置空 ⇒
+        // 对话无声变空（看起来像「对话被清了」，其实只是 403 / 读文件失败）
         try {
           const res = await fetch('/api/session');
-          const body = res.ok ? await res.json() : { session: null };
+          if (!res.ok) {
+            const body = await res.json().catch(() => ({}));
+            state.session = null;
+            setNotice(`读会话失败：${body.error || res.status}（对话视图因此先收起来了）`, true);
+            return;
+          }
+          const body = await res.json();
           state.session = body.session ?? null;
-        } catch {
+        } catch (e) {
           state.session = null;
+          setNotice(`读会话失败：${e.message}（对话视图因此先收起来了）`, true);
         }
       }
 
@@ -672,8 +900,7 @@
         if (!replyBelongsTo(id, state.replyFor)) {
           state.reply = '';
           state.replyFor = null;
-          replyEl.hidden = true;
-          replyEl.textContent = '';
+          renderReply();
         }
         renderList();
       }
@@ -771,6 +998,57 @@
         void openFs(browseTarget(workdirEl.value, state.dev ? state.dev.defaultWorkdir : '.'));
       });
 
+      // ---------- 系统目录选择器（与「浏览…」并列，互为兜底） ----------
+      // 浏览器弹不出系统对话框 ⇒ 由 dev 进程代弹（POST /api/fs/pick；token 走 cookie，
+      // 与其它请求同一条缝）。服务端契约：
+      //   200 {path} 选了 / 200 {path:null} 取消 / 409 已有一个在等 / 501 平台没有可用选择器
+      // 等待期间按钮置灰防重点（第一道闸；服务端那条 409 是第二道）。
+      // 任何一个失败分支都必须有用户可见的提示 —— 不许静默。
+      const pickEl = $('pick');
+      pickEl.addEventListener('click', async () => {
+        pickEl.disabled = true;
+        setNotice('系统选择器已打开…（在你的桌面上，不在浏览器里）', false);
+        try {
+          const res = await fetch('/api/fs/pick', { method: 'POST' });
+          const body = await res.json().catch(() => ({}));
+          if (res.status === 501) {
+            setNotice(`系统选择器不可用：${body.error || '当前平台没有可用的系统选择器'} —— 请改用旁边的「浏览…」`, true);
+            return;
+          }
+          if (!res.ok) {
+            // 409 与其余失败都走这里：服务端的 error 文案说明原因
+            setNotice(`系统选择器打开失败：${body.error || res.status}`, true);
+            return;
+          }
+          if (body.path === null || body.path === undefined) {
+            setNotice('已取消（没选目录）', false);
+            return;
+          }
+          workdirEl.value = body.path;
+          state.workdir = body.path;
+          setNotice(`工作目录：${short(body.path)}`, false);
+        } catch (e) {
+          setNotice(`系统选择器请求失败：${e.message}`, true);
+        } finally {
+          pickEl.disabled = false;
+        }
+      });
+
+      // 页面卸载（刷新 / 关标签页 / 跳走）⇒ **显式**告诉服务端「在飞的选择框没人看了」。
+      // 为什么不能只靠连接断开：实测（2026-09-23，带插桩的产物 + 真浏览器）刷新后那条连接
+      // **还开着** ⇒ 服务端收不到 close ⇒ 选择框留在桌面上、之后每次点都 409。
+      // beacon 是**一次新的请求**，与服务端看不看得见断开无关；token 走 cookie（同一道缝）。
+      // 无条件发：服务端幂等（没有在飞的 pick 就是空操作），省掉一份会漂的页面态。
+      // ⚠️ 路径字面量与 `inspector-routes.ts` 的 PICK_CANCEL_PATH 必须逐字一致 ——
+      //    inspector.test.mjs 有逐字对拍断言钉着（页面不能 import 那个常量）。
+      window.addEventListener('pagehide', () => {
+        try {
+          navigator.sendBeacon('/api/fs/pick/cancel');
+        } catch {
+          /* 老浏览器 / 被策略拦下：还有 res close 那条路兜着，不阻断卸载 */
+        }
+      });
+
       // ---------- 控件接线（只做「取值 → 调 panel-logic → 写回」） ----------
       workdirEl.addEventListener('input', () => {
         state.workdir = workdirEl.value;
@@ -904,7 +1182,7 @@
           // 右栏从这一轮的空树开始（① 实时）：不这么做的话它留着上一轮那棵树
           beginLiveRender();
           setNotice(
-            `运行中：${short(ev.workdir)} · ${ev.toolSources === null ? '全量' : ev.toolSources.join(',')}` +
+            `运行中：${short(ev.workdir)} · ${formatToolSources(ev.toolSources)}` +
               `${ev.multiTurn ? ' · 多轮' : ''}`,
             false,
           );
@@ -920,8 +1198,8 @@
           // 那时不能把回复当「别人的」擦掉（见 panel-logic 的 replyBelongsTo）
           state.replyFor = ev.traceId;
           state.live = null;
-          replyEl.hidden = state.reply.length === 0;
-          replyEl.textContent = state.reply;
+          // Markdown 渲染 + 长了折叠（渲染层不认识正文语义，只按 token 建节点）
+          renderReply();
           // 判别顺序（先 stopReason 后 ok）是**语义**，抽在 panel-logic 里并带单测 ——
           // 中止的 run `ok` 也是 false（引擎刻意给 aborted 带结构化 error），
           // 顺序反了就会把「我按了中止」显示成「run 失败」。