niuma-codex 0.0.1-beta.28 → 0.0.1-beta.29

package/dist/assets/control/app.js

@@ -51,6 +51,7 @@
     "/connections": { key: "connections", title: "外部连接", intro: "查看当前设备连接与额度占用，页面可见时每 3 秒刷新。", sectionId: "control-page-connections", navId: "control-nav-connections" },
     "/": { key: "overview", title: "概览", intro: "查看当前设备上的 daemon 运行概览和生命周期。", sectionId: "control-page-overview", navId: "control-nav-overview" },
     "/sessions": { key: "sessions", title: "会话跟踪", intro: "查看 follower 生命周期、共享订阅和租约快照。", sectionId: "control-page-sessions", navId: "control-nav-sessions" },
+    "/thread-loads": { key: "thread-loads", title: "会话加载", intro: "查看 Web / iOS 从打开会话到首屏正文可见的完整过程。", sectionId: "control-page-thread-loads", navId: "control-nav-thread-loads" },
     "/subscriptions": { key: "subscriptions", title: "会话订阅", intro: "查看最近 24 小时的会话订阅 Trace。", sectionId: "control-page-subscriptions", navId: "control-nav-subscriptions" },
     "/turn-audit": { key: "turn-audit", title: "Turn 推送审计", intro: "查看最近 24 小时的安全投递证据。", sectionId: "control-page-turn-audit", navId: "control-nav-turn-audit" },
     "/logs": { key: "logs", title: "诊断日志", intro: "查看安全投影后的错误与调试日志。", sectionId: "control-page-logs", navId: "control-nav-logs" },
@@ -87,6 +88,9 @@
   controlPageTitle.textContent = currentPage.title;
   controlPageIntro.textContent = currentPage.intro;
 
+  const threadLoadsPage = currentPage.key === "thread-loads"
+    ? window.NiumaThreadLoads?.mount({ root: document.getElementById("control-page-thread-loads"), request: getControlJson }) : null;
+
   // 旧的最小 DOM 测试夹具不含 Trace 区域；真实静态页面始终完整启用此功能。
   const followerTracesEnabled = Boolean(
     followerTracesList && followerTracesEmpty && followerTracesCoverage,
@@ -796,6 +800,9 @@
     if (slowest) summary.append(textElement("div", `当前已采集浏览器阶段中耗时最长：${slowest.label}（${slowest.ms} ms）`, "small mt-2"));
     summary.append(textElement("div", "浏览器数据为客户端测量；两端时钟独立，不作跨端差值。首屏不包含图片全部解码完成，缺失采样不计为 0。", "small mt-2"));
     container.append(summary);
+    const loadLink = textElement("a", "在会话加载中查看", "small d-block mb-2");
+    loadLink.href = `/thread-loads?load_id=${encodeURIComponent(steps[0].loading.load_id)}`;
+    container.append(loadLink);
     container.append(textElement("p", `加载编号：${steps[0].loading.load_id}`, "small font-monospace text-break text-body-secondary"));
     if (data.coverage?.status !== "complete") container.append(textElement("p", followerTraceCoverageLabel(data.coverage), "text-body-secondary small"));
     for (const [label, entries] of [["浏览器时间线", browser], ["Desktop 时间线", daemon]]) {
@@ -1565,6 +1572,7 @@
   }
 
   async function refreshCurrentPage() {
+    if (currentPage.key === "thread-loads") return threadLoadsPage?.refresh();
     if (currentPage.key === "connections") return refreshConnections();
     controlRefreshGeneration += 1;
     const refreshGeneration = controlRefreshGeneration;

package/dist/assets/control/index.html

@@ -78,6 +78,7 @@
     </style>
     <script src="/bootstrap.bundle.min.js" defer></script>
     <script src="/chart.umd.js" defer></script>
+    <script src="/thread-loads.js" defer></script>
     <script src="/app.js" defer></script>
   </head>
   <body class="bg-body-tertiary">
@@ -105,6 +106,7 @@
                   <a id="control-nav-connections" class="nav-link" href="/connections">外部连接</a>
                   <a id="control-nav-sessions" class="nav-link" href="/sessions">会话跟踪</a>
                   <a id="control-nav-subscriptions" class="nav-link" href="/subscriptions">会话订阅</a>
+                  <a id="control-nav-thread-loads" class="nav-link" href="/thread-loads">会话加载</a>
                   <a id="control-nav-turn-audit" class="nav-link" href="/turn-audit">Turn 推送审计</a>
                   <a id="control-nav-logs" class="nav-link" href="/logs">诊断日志</a>
                 </div>
@@ -219,6 +221,8 @@
               </section>
             </section>
 
+            <section id="control-page-thread-loads" class="control-page" hidden></section>
+
             <section id="control-page-subscriptions" class="control-page" hidden>
               <section id="follower-traces-section" class="card shadow-sm mb-4" aria-labelledby="follower-traces-heading">
                 <div class="card-body">

package/dist/assets/control/thread-loads.js

@@ -0,0 +1,175 @@
+(() => {
+  'use strict';
+  const phases = { selected: '选择会话', restored: '恢复会话', request_started: '发起请求', snapshot_received: '收到快照', history_ready: '首屏数据就绪', content_presented: '首屏正文可见', open_received: '收到打开请求', identity_ready: '身份核验完成', lease_acquired: '取得订阅租约', shell_sent: '发布加载壳', history_sent: '发布首屏正文', stream_closed: '订阅关闭', closed: '采样关闭', failed: '业务失败', cancelled: '已取消', superseded: '已被替代' };
+  const statuses = { loading: '加载中', presented: '首屏正文可见', failed: '失败', cancelled: '已取消', superseded: '已被替代', incomplete: '采样不完整' };
+  const clients = { web: 'Web', ios: 'iOS', other: '其他', unknown: '未知' };
+  const transports = { local: 'Local', direct: 'Direct', relay: 'Relay', unknown: '未采集' };
+  const ms = value => Number.isFinite(value) ? `${value} ms` : '未采集';
+  const time = value => Number.isFinite(value) ? new Date(value).toLocaleString() : '未采集';
+  function el(tag, text, className = '') {
+    const node = document.createElement(tag); if (text !== undefined) node.textContent = text;
+    node.className = className; return node;
+  }
+  function button(text, action, id) {
+    const node = el('button', text, 'btn btn-outline-secondary btn-sm'); node.type = 'button';
+    if (id) node.id = id; node.addEventListener('click', action); return node;
+  }
+  function coverageText(value) {
+    return ({ complete: '覆盖完整', partial: '采样不完整', historical_unverified: '历史记录，当前 daemon 未运行' })[value?.status] ?? '未采集覆盖信息';
+  }
+  function mount({ root, request }) {
+    let page = 1, detailPage = 1, total = 0, generation = 0, inFlight = null, queued = false;
+    let disposed = false, pageClosed = false, paused = false, timer = null, selected = null;
+    const linked = new URLSearchParams(window.location.search).get('load_id');
+    if (/^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(linked ?? '')) selected = linked;
+    const rows = new Map();
+    const note = el('p', '完成点为首屏正文可见（含真实空会话）；图片、附件下载和更早历史不阻塞。', 'text-body-secondary');
+    const limits = el('p', '最近 24 小时可读取的诊断记录。未抵达 Desktop、认证前拒绝及客户端退出可能没有完整采样。', 'small text-body-secondary');
+    const form = el('div', undefined, 'd-flex flex-wrap gap-3 align-items-end mb-3');
+    function field(label, id, options) {
+      const group = el('label', undefined, 'd-flex flex-column gap-1 small'); group.append(el('span', label));
+      const input = el(options ? 'select' : 'input', undefined, options ? 'form-select form-select-sm' : 'form-control form-control-sm');
+      input.id = id;
+      if (options) for (const [value, text] of Object.entries(options)) { const option = el('option', text); option.value = value; input.append(option); }
+      else { input.type = 'text'; input.placeholder = '输入完整会话 ID'; input.maxLength = 256; }
+      input.addEventListener('change', () => { page = 1; void refresh(); });
+      group.append(input); form.append(group); return input;
+    }
+    const thread = field('会话 ID', 'thread-load-filter-thread');
+    const client = field('客户端', 'thread-load-filter-client', { '': '全部客户端', ...clients });
+    const status = field('结果', 'thread-load-filter-status', { '': '全部结果', ...statuses });
+    const autoLabel = el('label', undefined, 'form-check d-flex align-items-center gap-2 mb-1');
+    const auto = el('input', undefined, 'form-check-input mt-0'); auto.type = 'checkbox'; auto.id = 'thread-load-auto';
+    autoLabel.append(auto, el('span', '前台每 3 秒自动刷新', 'small')); form.append(autoLabel);
+    const notice = el('p', '', 'small text-body-secondary'); notice.id = 'thread-load-notice'; notice.setAttribute('role', 'status');
+    const coverage = el('p', '尚未读取', 'small text-body-secondary'); coverage.id = 'thread-load-coverage';
+    const list = el('div', undefined, 'list-group mb-3'); list.id = 'thread-load-items';
+    const deepDetail = el('div');
+    const pager = el('div', undefined, 'd-flex flex-wrap gap-2 align-items-center');
+    const pageText = el('span', '', 'small text-body-secondary');
+    const prev = button('上一页', () => { if (page > 1) { page--; void refresh(); } }, 'thread-load-prev');
+    const next = button('下一页', () => { if (page * 50 < total) { page++; void refresh(); } }, 'thread-load-next');
+    pager.append(prev, pageText, next); root.replaceChildren(note, limits, form, notice, coverage, list, deepDetail, pager);
+    const stopTimer = () => { if (timer !== null) clearTimeout(timer); timer = null; };
+    function schedule() {
+      stopTimer();
+      if (!disposed && !pageClosed && !paused && auto.checked && !document.hidden && !inFlight) timer = setTimeout(() => { timer = null; void refresh(false); }, 3000);
+    }
+    auto.addEventListener('change', schedule);
+    function renderList(data) {
+      total = data.total;
+      coverage.textContent = `${coverageText(data.coverage)} · ${time(data.window?.start_at_ms)} — ${time(data.window?.end_at_ms)}`;
+      const keep = new Set(data.list.map(row => row.load_id));
+      for (const [id, item] of rows) if (!keep.has(id)) { item.node.remove(); rows.delete(id); }
+      // 保留行按钮和展开节点的身份；刷新不会替换获得键盘焦点的控件。
+      data.list.forEach((row, index) => {
+        let item = rows.get(row.load_id);
+        if (!item) {
+          const node = el('article', undefined, 'list-group-item p-3'); node.setAttribute('data-load-id', row.load_id);
+          const heading = el('h2', undefined, 'h6 mb-2');
+          const toggle = button('', () => { selected = selected === row.load_id ? null : row.load_id; detailPage = 1; void refresh(); });
+          toggle.className = 'btn btn-link text-start p-0 fw-semibold text-break'; heading.append(toggle);
+          const info = el('p', '', 'small mb-1'); const result = el('p', '', 'small mb-1');
+          const identity = el('p', '', 'small font-monospace text-body-secondary text-break mb-0');
+          const detail = el('div', undefined, 'mt-3'); detail.setAttribute('data-detail', row.load_id);
+          node.append(heading, info, result, identity, detail); item = { node, toggle, info, result, identity, detail }; rows.set(row.load_id, item);
+        }
+        item.toggle.textContent = row.title || '未命名会话'; item.toggle.setAttribute('aria-expanded', String(selected === row.load_id));
+        item.info.textContent = `${clients[row.client_class] ?? '未知'} · ${transports[row.source_transport] ?? '未采集'} · ${time(row.opened_at_ms)}`;
+        const resultText = statuses[row.status] ?? '采样不完整', phaseText = phases[row.latest_phase] ?? '未采集阶段';
+        item.result.textContent = `${resultText}${phaseText === resultText ? '' : ` · ${phaseText}`} · 客户端总耗时：${ms(row.client_elapsed_ms)} · ${coverageText(row.coverage)}`;
+        item.identity.textContent = `会话 ${row.thread_id} · 加载 ${row.load_id}`;
+        item.detail.hidden = selected !== row.load_id;
+        if (list.children[index] !== item.node) list.insertBefore(item.node, list.children[index] ?? null);
+      });
+      // 成功的空结果必须清除旧行，不能从缓存恢复已清空的账本。
+      if (!data.list.length) list.replaceChildren(el('p', '暂无匹配的会话加载记录。', 'list-group-item text-body-secondary'));
+      else for (const node of [...list.children]) if (!node.hasAttribute('data-load-id')) node.remove();
+      pageText.textContent = `第 ${page} 页 · 共 ${total} 次打开`; prev.disabled = page <= 1; next.disabled = page * 50 >= total;
+    }
+    function renderDetail(data, id) {
+      const target = rows.get(id)?.detail ?? deepDetail;
+      if (target !== deepDetail) deepDetail.replaceChildren();
+      const contentKey = JSON.stringify([id, detailPage, data.coverage, data.list]);
+      if (target.dataset.contentKey === contentKey) { target.hidden = false; return; }
+      target.dataset.contentKey = contentKey;
+      const activePageAction = target.contains(document.activeElement) ? document.activeElement?.getAttribute('data-step-page') : null;
+      const summary = el('p', `加载编号：${id} · ${coverageText(data.coverage)}`, 'small text-body-secondary text-break');
+      const timelines = el('div', undefined, 'row g-3');
+      for (const clock of ['client', 'daemon']) {
+        const column = el('section', undefined, 'col-12 col-xl-6');
+        column.append(el('h3', clock === 'client' ? '客户端时间线' : 'Desktop 时间线', 'h6'));
+        const entries = data.list.filter(step => step.clock === clock).sort((a, b) => a.elapsed_ms - b.elapsed_ms || a.sequence - b.sequence);
+        const timeline = el('ol', undefined, 'list-unstyled small mb-2');
+        for (const step of entries) {
+          const line = el('li', undefined, 'border-bottom py-2');
+          line.append(el('strong', `${ms(step.elapsed_ms)} · ${phases[step.phase] ?? '未采集阶段'}`));
+          line.append(el('div', `发生：${time(step.occurred_at_ms)} · 记录：${time(step.recorded_at_ms)}`, 'text-body-secondary'));
+          if (step.terminal_phase) line.append(el('div', `终结阶段：${(phases[step.terminal_phase] ?? step.terminal_phase)}`));
+          if (step.terminal) line.append(el('div', `终结原因：${({ left_view: '离开会话', user_cancelled: '主动取消', stream_replaced: '订阅替代', open_rejected: '打开被拒绝', history_failed: '首屏历史失败' })[step.terminal] ?? '未采集'}`));
+          if (step.lease_id || step.trace_id) line.append(el('div', `租约 ${step.lease_id ?? '未采集'} · Trace ${step.trace_id ?? '未采集'}`, 'text-break text-body-secondary'));
+          timeline.append(line);
+        }
+        if (!entries.length) timeline.append(el('li', '未采集该端阶段', 'text-body-secondary'));
+        column.append(timeline);
+        const pairs = clock === 'client' ? [['request_started', 'snapshot_received'], ['snapshot_received', 'history_ready'], ['history_ready', 'content_presented']] : [['open_received', 'identity_ready'], ['identity_ready', 'lease_acquired'], ['lease_acquired', 'history_sent']];
+        const intervals = pairs.map(([from, to]) => {
+          const start = entries.find(step => step.phase === from), end = entries.find(step => step.phase === to);
+          return { text: `${phases[from]} → ${phases[to]}`, duration: start && end && end.elapsed_ms >= start.elapsed_ms ? end.elapsed_ms - start.elapsed_ms : null };
+        });
+        const known = intervals.filter(part => part.duration !== null).sort((a, b) => b.duration - a.duration);
+        column.append(el('p', known.length ? `最慢已采集区间：${known[0].text} · ${ms(known[0].duration)}` : '最慢区间：未采集', 'small'));
+        for (const part of intervals) column.append(el('div', `${part.text}：${ms(part.duration)}`, 'small text-body-secondary'));
+        timelines.append(column);
+      }
+      const paging = el('div', undefined, 'd-flex gap-2 align-items-center mt-3');
+      const earlier = button('上页步骤', () => { detailPage--; void refresh(); }); earlier.disabled = detailPage <= 1; earlier.setAttribute('data-step-page', 'earlier');
+      const later = button('下页步骤', () => { detailPage++; void refresh(); }); later.disabled = detailPage * 100 >= data.total; later.setAttribute('data-step-page', 'later');
+      paging.append(earlier, el('span', `步骤第 ${detailPage} 页`, 'small'), later);
+      target.replaceChildren(summary, el('p', '两端分别从各自起点计时；墙钟仅供查看，不跨端计算区间。', 'small text-body-secondary'), timelines, paging);
+      target.hidden = false;
+      if (activePageAction) target.querySelector(`[data-step-page="${activePageAction}"]`)?.focus({ preventScroll: true });
+    }
+    function refresh(manual = true) {
+      if (disposed || pageClosed || document.hidden) return Promise.resolve();
+      if (manual) { paused = false; generation++; }
+      stopTimer();
+      if (inFlight) { if (manual) queued = true; return inFlight; }
+      const token = generation, selectedID = selected;
+      const query = new URLSearchParams({ page: String(page), page_size: '50' });
+      if (thread.value.trim()) query.set('thread_id', thread.value.trim());
+      if (client.value) query.set('client_class', client.value);
+      if (status.value) query.set('status', status.value);
+      notice.textContent = '正在读取…';
+      inFlight = (async () => {
+        try {
+          const data = await request(`/api/v1/control/thread-loads?${query}`);
+          if (disposed || token !== generation) return;
+          renderList(data);
+          if (selectedID) {
+            const detail = await request(`/api/v1/control/thread-load-detail?load_id=${encodeURIComponent(selectedID)}&page=${detailPage}&page_size=100`);
+            if (disposed || token !== generation || selectedID !== selected) return;
+            renderDetail(detail, selectedID);
+          } else deepDetail.replaceChildren();
+          notice.textContent = '已刷新。';
+        } catch {
+          if (!disposed && token === generation) { paused = true; notice.textContent = '刷新失败，自动刷新已暂停。请点击“刷新当前页”重试；保留上次结果。'; }
+        } finally {
+          inFlight = null;
+          if (queued && !disposed && !document.hidden) { queued = false; void refresh(false); } else schedule();
+        }
+      })();
+      return inFlight;
+    }
+    const visibility = () => { stopTimer(); if (document.hidden) { generation++; queued = false; } else schedule(); };
+    const leave = () => { pageClosed = true; generation++; queued = false; stopTimer(); };
+    const returnToPage = () => { pageClosed = false; schedule(); };
+    function dispose() {
+      disposed = true; leave(); document.removeEventListener('visibilitychange', visibility);
+      window.removeEventListener('pagehide', leave); window.removeEventListener('pageshow', returnToPage);
+    }
+    document.addEventListener('visibilitychange', visibility); window.addEventListener('pagehide', leave); window.addEventListener('pageshow', returnToPage);
+    return { refresh, dispose };
+  }
+  window.NiumaThreadLoads = Object.freeze({ mount });
+})();