@wacry/codeks-bridge 0.0.0-stage → 0.0.1

package/ui/list.js

@@ -0,0 +1,180 @@
+// Exchange list: filtering, flat or thread-grouped rows, keyed row reuse and keyboard moves.
+import { h, fmtTime, fmtDur, fmtTok, fmtBytes, oneLine, shortId, hashHue, put } from './dom.js';
+import { KIND_LABEL, OUTCOME_LABEL, callLabel } from './labels.js';
+
+// Same-conversation key. Falls back to the window id prefix ("<thread>:<n>") for captures without thread headers.
+export const threadKey = (s) => s.thread?.thread_id ?? s.thread?.session_id ?? (s.thread?.window_id ? String(s.thread.window_id).split(':')[0] : null);
+export const OUTCOME_CLASS = { active: 'info', completed: 'ok', incomplete: 'warn', failed: 'bad', error: 'bad', aborted: 'bad' };
+
+// Imported Detail objects may lack the Summary-only fields (older or hand-made exports); derive them.
+const callsOf = (s) => s.upstream_calls ?? s.upstream?.map((c) => ({ label: c.label, status: c.response?.status ?? null, end: c.response?.end ?? (c.error ? 'error' : null) })) ?? [];
+const requestBytes = (s) => s.bytes?.request ?? s.client?.request?.body?.bytes ?? null;
+
+export const isErrorish = (s) => ['failed', 'error', 'aborted', 'incomplete'].includes(s.outcome) || (s.status ?? 0) >= 400 ||
+  callsOf(s).some((c) => (c.status ?? 0) >= 400 || c.end === 'error' || c.end === 'cancelled');
+
+export const byNewest = (a, b) => (b.started_at ?? 0) - (a.started_at ?? 0) || (b.seq ?? 0) - (a.seq ?? 0);
+
+export const FILTER_CHIPS = [
+  ['errors', '仅错误', '失败、错误、中止、未完成，或任一 HTTP 状态 ≥ 400'],
+  ['compaction', '仅压缩', 'kind = compaction'],
+  ['active', '进行中', '仍在传输'],
+  ['hideInvalid', '隐藏无效', '隐藏 kind = invalid（无法解析或路由失败）'],
+];
+
+const searchCache = new WeakMap();
+function searchText(s) {
+  let t = searchCache.get(s);
+  if (t === undefined) {
+    const th = s.thread ?? {};
+    t = [s.id, s.model, s.adapter, s.api, typeof s.upstream === 'string' ? s.upstream : s.route?.upstream, s.upstream_model, s.kind, KIND_LABEL[s.kind], s.outcome, OUTCOME_LABEL[s.outcome],
+      s.status, s.error, s.preview, th.session_id, th.thread_id, th.parent_thread_id, th.subagent, th.window_id,
+      ...callsOf(s).flatMap((c) => [c.label, callLabel(c.label), c.status, c.end])]
+      .filter((x) => x != null).join(' ').toLowerCase();
+    searchCache.set(s, t);
+  }
+  return t;
+}
+
+export function matches(s, words, chips) {
+  if (chips.errors && !isErrorish(s)) return false;
+  if (chips.compaction && s.kind !== 'compaction') return false;
+  if (chips.active && !s.active) return false;
+  if (chips.hideInvalid && s.kind === 'invalid') return false;
+  if (!words.length) return true;
+  const text = searchText(s);
+  return words.every((w) => text.includes(w));
+}
+
+function usageLine(u) {
+  if (!u || typeof u !== 'object') return null;
+  const parts = [];
+  const add = (label, v) => { if (typeof v === 'number') parts.push(`${label} ${fmtTok(v)}`); };
+  add('入', u.input_tokens ?? u.prompt_tokens);
+  add('出', u.output_tokens ?? u.completion_tokens);
+  add('缓存', u.input_tokens_details?.cached_tokens ?? u.cache_read_input_tokens ?? u.prompt_tokens_details?.cached_tokens);
+  add('推理', u.output_tokens_details?.reasoning_tokens ?? u.completion_tokens_details?.reasoning_tokens);
+  return parts.length ? h('span', { class: 'x-usage', title: JSON.stringify(u, null, 1) }, parts.join(' · ')) : null;
+}
+
+const callClass = (c) => ((c.status ?? 0) >= 400 || c.end === 'error' ? 'bad' : c.end === 'active' ? 'info' : c.end === 'cancelled' ? 'warn' : c.status ? 'ok' : 'dim');
+
+function rowEl(s, flat, onSelect) {
+  const th = s.thread ?? {};
+  const el = h('div', { class: `xrow o-${s.outcome}${s.active ? ' active' : ''}`, dataset: { id: s.id }, title: `${s.id} · ${s.kind}` });
+  const key = threadKey(s);
+  if (key) { el.classList.add('hued'); el.style.setProperty('--thue', hashHue(key)); }
+  const status = s.status != null ? ` ${s.status}` : '';
+  put(el,
+    h('div', { class: 'x1' },
+      h('span', { class: 'x-time' }, fmtTime(s.started_at)),
+      h('span', { class: `chip kind k-${s.kind}` }, KIND_LABEL[s.kind] ?? s.kind ?? '?'),
+      h('span', { class: 'x-model', title: s.upstream_model ? `上游模型 ${s.upstream_model}` : '' },
+        s.model ?? '（无模型）', s.adapter ? h('span', { class: 'dim' }, ` → ${s.adapter}`) : null),
+      h('span', { class: 'grow' }),
+      h('span', { class: `chip ${OUTCOME_CLASS[s.outcome] ?? 'dim'}`, title: s.error ?? '' }, `${OUTCOME_LABEL[s.outcome] ?? s.outcome}${status}`),
+      h('span', { class: 'x-dur' }, s.active ? '…' : fmtDur(s.duration_ms))),
+    h('div', { class: 'x2' },
+      callsOf(s).map((c) => h('span', { class: `chip sm ${callClass(c)}`, title: `end: ${c.end ?? '–'}` }, `${callLabel(c.label)} ${c.status ?? '…'}`)),
+      flat && th.subagent ? h('span', { class: 'chip sm sub', title: '子代理（x-openai-subagent）' }, `子代理 ${th.subagent}`) : null,
+      flat && th.parent_thread_id ? h('span', { class: 'chip sm dim', title: `父线程 ${th.parent_thread_id}` }, `父 ${shortId(th.parent_thread_id)}`) : null,
+      usageLine(s.usage),
+      requestBytes(s) != null ? h('span', { class: 'x-size dim', title: '客户端请求大小' }, fmtBytes(requestBytes(s))) : null),
+    s.error ? h('div', { class: 'x3 err' }, oneLine(s.error, 160)) : null,
+    s.preview ? h('div', { class: 'x3' }, oneLine(s.preview, 200)) : null);
+  el.addEventListener('click', (e) => onSelect(s.id, e));
+  return el;
+}
+
+export class ExchangeList {
+  constructor(el, infoEl, { onSelect }) {
+    this.el = el;
+    this.infoEl = infoEl;
+    this.onSelect = onSelect;
+    this.rows = new Map(); // id -> {s, flat, el}
+    this.order = [];
+    this.collapsed = new Set();
+    this.selected = null;
+  }
+
+  render(summaries, { filter, chips, group, empty }) {
+    const words = filter.toLowerCase().split(/\s+/).filter(Boolean);
+    const all = [...summaries.values()];
+    const list = all.filter((s) => matches(s, words, chips)).sort(byNewest);
+    const flat = !group;
+    const rowFor = (s) => {
+      let r = this.rows.get(s.id);
+      if (!r || r.s !== s || r.flat !== flat) {
+        r = { s, flat, el: rowEl(s, flat, this.onSelect) };
+        this.rows.set(s.id, r);
+      }
+      r.el.classList.toggle('sel', s.id === this.selected);
+      return r.el;
+    };
+    for (const id of this.rows.keys()) if (!summaries.has(id)) this.rows.delete(id);
+    const out = [];
+    this.order = [];
+    if (flat) {
+      for (const s of list) { out.push(rowFor(s)); this.order.push(s.id); }
+    } else {
+      const groups = new Map();
+      for (const s of list) {
+        const k = threadKey(s) ?? '';
+        if (!groups.has(k)) groups.set(k, []);
+        groups.get(k).push(s);
+      }
+      // Map thread id -> group key, to link subagent groups to their parent.
+      for (const [k, items] of groups) {
+        out.push(this.groupHead(k, items, groups));
+        if (this.collapsed.has(k)) continue;
+        for (const s of items) { out.push(rowFor(s)); this.order.push(s.id); }
+      }
+    }
+    if (!out.length) out.push(h('div', { class: 'empty small' }, all.length ? '没有匹配筛选条件的记录' : empty));
+    this.el.replaceChildren(...out);
+    this.infoEl.textContent = all.length ? `显示 ${list.length} / 共 ${all.length} 条 · 最新在上` : '';
+  }
+
+  groupHead(k, items, groups) {
+    const th = items.find((s) => s.thread)?.thread ?? {};
+    const sub = items.find((s) => s.thread?.subagent)?.thread?.subagent;
+    const parent = items.find((s) => s.thread?.parent_thread_id)?.thread?.parent_thread_id;
+    const models = [...new Set(items.map((s) => s.model).filter(Boolean))];
+    const collapsed = this.collapsed.has(k);
+    const el = h('div', { class: 'tgroup', title: k ? `thread_id/session_id: ${k}` : '请求头里没有 thread_id / session_id' },
+      h('span', { class: 'tn-tog' }, collapsed ? '▸' : '▾'),
+      h('span', { class: 'swatch' }),
+      h('span', { class: 'mono' }, k ? `线程 ${shortId(k, 12)}` : '（无线程信息）'),
+      h('span', { class: 'dim' }, `${items.length} 条 · ${fmtTime(items[0].started_at)}`),
+      models.length ? h('span', { class: 'dim' }, models.join(', ')) : null,
+      sub ? h('span', { class: 'chip sm sub' }, `子代理 ${sub}`) : null,
+      parent ? h('span', {
+        class: 'chip sm link-chip', title: `父线程 ${parent}${groups.has(parent) ? '（点击定位）' : '（不在列表中）'}`,
+        onclick: (e) => { e.stopPropagation(); const p = groups.get(parent); if (p) this.onSelect(p[0].id, e); },
+      }, `↖ 父线程 ${shortId(parent, 10)}`) : null,
+      th.window_id ? h('span', { class: 'dim' }, `窗口 ${shortId(th.window_id)}`) : null);
+    if (k) { el.classList.add('hued'); el.style.setProperty('--thue', hashHue(k)); }
+    el.addEventListener('click', () => {
+      if (collapsed) this.collapsed.delete(k); else this.collapsed.add(k);
+      this.rerender?.();
+    });
+    return el;
+  }
+
+  setSelected(id) {
+    this.selected = id;
+    for (const [rid, r] of this.rows) r.el.classList.toggle('sel', rid === id);
+  }
+
+  scrollToSelected() {
+    this.rows.get(this.selected)?.el.scrollIntoView({ block: 'nearest' });
+  }
+
+  /** Returns the id delta rows away from the selection, in display order. */
+  neighbor(delta) {
+    if (!this.order.length) return null;
+    const i = this.order.indexOf(this.selected);
+    if (i < 0) return this.order[0];
+    return this.order[Math.max(0, Math.min(this.order.length - 1, i + delta))];
+  }
+}

package/ui/structure.js

@@ -0,0 +1,285 @@
+// Structure view: every top-level field in a table, and one compact row per
+// item for arrays of objects (input, output, messages, system, tools, ...).
+import { h, btn, fmtBytes, fmtInt, hashHue, oneLine, shortId, strBlock, strInline, thumb, isDataImage, CARRIER_RE, put } from './dom.js';
+import { jsonTree, prim, preview, escPtr } from './tree.js';
+import { annDetail } from './labels.js';
+
+const ROW_PAGE = 1200;
+const TEXT_KEYS = new Set(['text', 'thinking', 'content', 'output', 'arguments', 'input', 'reasoning_content', 'refusal', 'description', 'partial_json', 'instructions', 'summary']);
+
+export const isItemArray = (v) => Array.isArray(v) && v.length > 0 &&
+  v.slice(0, 20).every((x) => x && typeof x === 'object' && !Array.isArray(x));
+
+export function newStructState() {
+  return { openRows: new Set(), openFields: new Set(), openAnn: new Set(), trees: new Map(), filters: new Map(), shown: new Map() };
+}
+
+const treeState = (st, key) => {
+  let t = st.trees.get(key);
+  if (!t) st.trees.set(key, (t = { exp: new Set() }));
+  return t;
+};
+
+/**
+ * opts: { state, ann: Map<pointer, Annotation[]>, annChip(a, onClick), note }
+ */
+export function structureView(obj, opts) {
+  const st = opts.state;
+  const root = h('div', { class: 'struct' });
+  if (opts.note) put(root, h('div', { class: 'note' }, opts.note));
+  if (obj === null || typeof obj !== 'object') {
+    put(root, h('div', { class: 'dim' }, '正文不是 JSON 对象：'), typeof obj === 'string' ? strBlock(obj) : prim(obj));
+    return root;
+  }
+  if (Array.isArray(obj)) {
+    put(root, isItemArray(obj) ? itemList('', obj, opts) : jsonTree(obj, { state: treeState(st, '#root') }));
+    return root;
+  }
+  const lists = [];
+  const tbody = h('tbody');
+  for (const [key, value] of Object.entries(obj)) {
+    const isList = isItemArray(value);
+    if (isList) lists.push([key, value]);
+    fieldRow(tbody, key, value, isList, opts);
+  }
+  put(root, h('table', { class: 'fields' },
+    h('thead', null, h('tr', null, h('th', null, '字段'), h('th', null, '类型'), h('th', null, '值'))), tbody));
+  for (const [key, value] of lists) put(root, itemList(key, value, opts));
+  return root;
+}
+
+function typeText(v) {
+  if (Array.isArray(v)) return `array ${v.length}`;
+  if (v === null) return 'null';
+  if (typeof v === 'object') return `object ${Object.keys(v).length}`;
+  if (typeof v === 'string') return `string ${fmtInt(v.length)}`;
+  return typeof v;
+}
+
+function fieldRow(tbody, key, value, isList, opts) {
+  const st = opts.state;
+  const ptr = `/${escPtr(key)}`;
+  const anns = opts.ann?.get(ptr)?.map((a) => opts.annChip(a));
+  const tr = h('tr', { dataset: { ptr } });
+  const detail = h('tr', { class: 'field-detail' });
+  let valueCell;
+  let openable = false;
+  let makeDetail = null;
+  if (isList) {
+    valueCell = h('a', { class: 'link', href: '#', onclick: (e) => { e.preventDefault(); tr.closest('.struct')?.querySelector(`[data-list="${CSS.escape(key)}"]`)?.scrollIntoView({ block: 'start' }); } },
+      `${value.length} 项 · 见下方列表`);
+  } else if (typeof value === 'string' && (value.length > 160 || value.includes('\n') || isDataImage(value) || CARRIER_RE.test(value))) {
+    valueCell = strInline(value, 160);
+    openable = true;
+    makeDetail = () => strBlock(value, { name: key, tree: (v, label) => jsonTree(v, { label, auto: 2 }) });
+  } else if (value && typeof value === 'object') {
+    const compact = JSON.stringify(value);
+    const small = compact.length <= 160;
+    valueCell = small ? h('span', { class: 'mono' }, compact) : h('span', { class: 'tn-pv' }, preview(value, 140));
+    openable = true;
+    makeDetail = () => jsonTree(value, { state: treeState(st, ptr), base: ptr, ann: opts.ann, annChip: opts.annChip, auto: small ? 3 : 1 });
+  } else {
+    valueCell = prim(value);
+  }
+  put(tr, h('td', { class: 'fkey' }, openable ? h('span', { class: 'tn-tog' }, st.openFields.has(key) ? '▾' : '▸') : h('span', { class: 'tn-tog' }), key),
+    h('td', { class: 'ftype' }, typeText(value)), h('td', { class: 'fval' }, valueCell, anns));
+  put(tbody, tr);
+  if (!openable) return;
+  tr.classList.add('clickable');
+  const td = h('td', { colSpan: 3 });
+  put(detail, td);
+  const show = (open) => {
+    if (open) { st.openFields.add(key); if (!td.firstChild) put(td, makeDetail()); tr.after(detail); }
+    else { st.openFields.delete(key); detail.remove(); }
+    tr.querySelector('.tn-tog').textContent = open ? '▾' : '▸';
+  };
+  tr.addEventListener('click', (e) => {
+    if (e.target.closest('button, a, .chip, img') || String(window.getSelection?.() ?? '')) return;
+    show(!st.openFields.has(key));
+  });
+  if (st.openFields.has(key)) queueMicrotask(() => show(true));
+}
+
+// ---------- item lists ----------
+
+function cacheText(cc) {
+  if (!cc || typeof cc !== 'object') return 'cache';
+  return `cache ${cc.ttl ?? cc.type ?? ''}`.trim();
+}
+
+function scan(v, key, depth, info) {
+  if (typeof v === 'string') {
+    if (key === 'encrypted_content') { info.enc += v.length; info.carrier = CARRIER_RE.exec(v)?.[1] ?? info.carrier ?? 'raw'; }
+    else if (key === 'signature') info.sig += v.length;
+    else if (isDataImage(v)) info.imgs.push(v);
+    else if (key === 'image_url' || key === 'url') { if (/^https?:/.test(v)) info.remote++; }
+    else if (TEXT_KEYS.has(key)) { info.text += v.length; if (!info.preview && v.trim()) info.preview = v; }
+    return;
+  }
+  if (!v || typeof v !== 'object' || depth > 6) return;
+  if (Array.isArray(v)) { for (const x of v) scan(x, key, depth + 1, info); return; }
+  if (v.cache_control) info.cache.add(cacheText(v.cache_control));
+  if (v.type === 'redacted_thinking' && typeof v.data === 'string') info.enc += v.data.length;
+  if (v.type === 'base64' && typeof v.data === 'string' && /^image\//.test(v.media_type ?? '')) info.imgs.push(`data:${v.media_type};base64,${v.data}`);
+  for (const [k, x] of Object.entries(v)) {
+    if (k === 'cache_control') continue;
+    scan(x, k, depth + 1, info);
+  }
+}
+
+function partLabel(p) {
+  if (!p || typeof p !== 'object') return typeof p;
+  const t = p.type ?? '{…}';
+  if (t === 'tool_use' || t === 'server_tool_use') return `${t}·${p.name ?? '?'}`;
+  return t;
+}
+
+/** Badges and metrics for one item of any API (Responses, Messages, Chat, tools). */
+export function describeItem(it) {
+  const info = { text: 0, enc: 0, sig: 0, imgs: [], remote: 0, cache: new Set(), preview: '', carrier: null };
+  scan(it, null, 0, info);
+  const badges = [];
+  const b = (text, cls, title, hue) => badges.push({ text: String(text), cls, title, hue });
+  if (it.type != null) b(it.type, 'type', 'type', hashHue(String(it.type)));
+  if (it.role != null) b(it.role, 'role', 'role', hashHue(`r${it.role}`));
+  if (it.phase != null) b(`phase:${it.phase}`, 'phase', 'phase');
+  if (it.status != null && it.status !== 'completed') b(it.status, 'dim', 'status');
+  const name = it.name ?? it.function?.name;
+  if (name != null) b(name, 'name', 'name');
+  if (it.namespace != null) b(`ns:${it.namespace}`, 'name', 'namespace');
+  for (const k of ['call_id', 'tool_call_id', 'tool_use_id']) if (typeof it[k] === 'string') b(shortId(it[k], 14), 'id', `${k}: ${it[k]}`);
+  const parts = [];
+  for (const key of ['content', 'output']) {
+    if (!Array.isArray(it[key])) continue;
+    const counts = new Map();
+    for (const p of it[key]) { const l = partLabel(p); counts.set(l, (counts.get(l) ?? 0) + 1); }
+    for (const [l, n] of counts) parts.push(n > 1 ? `${l}×${n}` : l);
+  }
+  if (parts.length) b(parts.join(' '), 'parts', '内容块类型');
+  if (Array.isArray(it.summary) && it.summary.length) b(`summary×${it.summary.length}`, 'parts', 'summary');
+  if (Array.isArray(it.tool_calls)) b(`tool_calls: ${it.tool_calls.map((c) => c.function?.name ?? c.name ?? '?').join(', ')}`, 'name', 'tool_calls');
+  if (Array.isArray(it.tools)) b(`含 ${it.tools.length} 个工具`, 'parts', it.tools.map((t) => t.name ?? t.function?.name ?? t.type).join(', '));
+  const params = it.parameters ?? it.input_schema ?? it.function?.parameters;
+  if (params?.properties) b(`参数 ${Object.keys(params.properties).length}`, 'dim', Object.keys(params.properties).join(', '));
+  for (const c of info.cache) b(c, 'cache', 'cache_control');
+  if (info.enc) b(`${info.carrier && info.carrier !== 'raw' ? info.carrier : 'enc'} ${fmtInt(info.enc)}`, info.carrier && info.carrier !== 'raw' ? 'carrier' : 'enc', '加密/载荷长度（字符）');
+  if (info.sig) b(`sig ${fmtInt(info.sig)}`, 'enc', 'signature 长度');
+  if (it.reasoning_content != null && typeof it.reasoning_content === 'string') b(`reasoning_content ${fmtInt(it.reasoning_content.length)}`, 'enc', 'reasoning_content 长度');
+  if (info.remote) b(`远程图片×${info.remote}`, 'dim', '未自动加载');
+  return { badges, text: info.text, imgs: info.imgs, preview: info.preview };
+}
+
+function badgeEl(x) {
+  const el = h('span', { class: `chip ${x.cls}`, title: x.title });
+  el.textContent = x.text;
+  if (x.hue != null) { el.classList.add('hue'); el.style.setProperty('--hue', x.hue); }
+  return el;
+}
+
+function itemList(key, items, opts) {
+  const st = opts.state;
+  const base = key === '' ? '' : `/${escPtr(key)}`;
+  const listAnn = new Map();
+  for (const [ptr, list] of opts.ann ?? []) {
+    if (!ptr.startsWith(`${base}/`)) continue;
+    const idx = ptr.slice(base.length + 1).split('/')[0];
+    listAnn.set(idx, [...(listAnn.get(idx) ?? []), ...list]);
+  }
+  let total = 0;
+  const descs = items.map((it) => {
+    const d = describeItem(it);
+    d.size = JSON.stringify(it)?.length ?? 0;
+    total += d.size;
+    d.search = `${d.badges.map((x) => x.text).join(' ')} ${d.preview.slice(0, 400)}`.toLowerCase();
+    return d;
+  });
+  const rows = h('div', { class: 'items' });
+  const filter = h('input', { class: 'list-filter', type: 'search', placeholder: '筛选（类型/角色/名称/文字）', value: st.filters.get(key) ?? '' });
+  const count = h('span', { class: 'dim' });
+  const sec = h('section', { class: 'item-list', dataset: { list: key } },
+    h('div', { class: 'list-head' },
+      h('span', { class: 'list-title' }, key || '(根数组)'),
+      h('span', { class: 'dim' }, `${items.length} 项 · ${fmtBytes(total)}`), count, filter,
+      btn('全部收起', () => { for (const p of [...st.openRows]) if (p.startsWith(`${base}/`)) st.openRows.delete(p); render(); }),
+      btn('跳到末尾', () => { st.shown.set(key, Infinity); render(); rows.lastElementChild?.scrollIntoView({ block: 'end' }); })),
+    rows);
+
+  const render = () => {
+    rows.replaceChildren();
+    const q = filter.value.trim().toLowerCase();
+    let shown = 0;
+    let matched = 0;
+    const limit = st.shown.get(key) ?? ROW_PAGE;
+    for (let i = 0; i < items.length; i++) {
+      if (q && !descs[i].search.includes(q)) continue;
+      matched++;
+      if (shown >= limit) continue;
+      shown++;
+      put(rows, itemRow(i, items[i], descs[i], `${base}/${i}`, listAnn.get(String(i)), opts));
+    }
+    count.textContent = q ? `匹配 ${matched}` : '';
+    if (shown < matched) put(rows, btn(`显示其余 ${fmtInt(matched - shown)} 项`, () => { st.shown.set(key, Infinity); render(); }, 'more'));
+  };
+  filter.addEventListener('input', () => { st.filters.set(key, filter.value); render(); });
+  render();
+  return sec;
+}
+
+function itemRow(i, item, d, ptr, anns, opts) {
+  const st = opts.state;
+  const wrap = h('div', { class: 'item', dataset: { ptr } });
+  const imgs = d.imgs.slice(0, 3).map((u) => thumb(u));
+  if (d.imgs.length > 3) imgs.push(h('span', { class: 'dim' }, `+${d.imgs.length - 3}`));
+  const tog = h('span', { class: 'tn-tog' }, '▸');
+  const row = h('div', { class: 'item-row' },
+    tog, h('span', { class: 'idx' }, `#${i}`),
+    h('span', { class: 'badges' }, d.badges.map(badgeEl)),
+    imgs,
+    h('span', { class: 'pv' }, oneLine(d.preview, 200)),
+    anns?.map((a) => opts.annChip(a, () => toggleAnn())),
+    h('span', { class: 'metrics', title: `文字 ${fmtInt(d.text)} 字符 · JSON ${fmtInt(d.size)} 字符` }, d.text ? `${fmtInt(d.text)} 字` : '', ` ${fmtBytes(d.size)}`));
+  const body = h('div', { class: 'item-body' });
+  const annBox = h('div', { class: 'item-anns' });
+  put(wrap, row);
+  const open = (on) => {
+    if (on) {
+      st.openRows.add(ptr);
+      if (!body.firstChild) put(body, jsonTree(item, { state: treeState(st, ptr), base: ptr, ann: opts.ann, annChip: opts.annChip, auto: 2 }));
+      put(wrap, body);
+    } else {
+      st.openRows.delete(ptr);
+      body.remove();
+    }
+    tog.textContent = on ? '▾' : '▸';
+    wrap.classList.toggle('open', on);
+  };
+  const toggleAnn = (force) => {
+    const on = force ?? !st.openAnn.has(ptr);
+    if (on) {
+      st.openAnn.add(ptr);
+      if (!annBox.firstChild) put(annBox, ...anns.map(annDetail));
+      row.after(annBox);
+    } else {
+      st.openAnn.delete(ptr);
+      annBox.remove();
+    }
+  };
+  row.addEventListener('click', (e) => {
+    if (e.target.closest('button, a, .chip, img') || String(window.getSelection?.() ?? '')) return;
+    open(!st.openRows.has(ptr));
+  });
+  if (anns && st.openAnn.has(ptr)) toggleAnn(true);
+  if (st.openRows.has(ptr)) open(true);
+  return wrap;
+}
+
+/** Marks the item row for a pointer such as /input/7 as open; returns the row pointer. */
+export function focusPointer(st, pointer) {
+  const m = /^\/([^/]+)\/(\d+)/.exec(pointer ?? '');
+  if (!m) return null;
+  const row = `/${m[1]}/${m[2]}`;
+  st.openRows.add(row);
+  st.openAnn.add(row);
+  if (Number(m[2]) >= ROW_PAGE) st.shown.set(m[1].replace(/~1/g, '/').replace(/~0/g, '~'), Infinity);
+  return row;
+}

package/ui/tree.js

@@ -0,0 +1,158 @@
+// Lazy JSON tree: children are created only when a node is expanded.
+import { h, btn, copyText, download, fmtInt, strBlock, isDataImage, thumb, CARRIER_RE, toast, put } from './dom.js';
+
+const PAGE = 300;
+const EXPAND_BUDGET = 4000;
+
+export const escPtr = (k) => String(k).replace(/~/g, '~0').replace(/\//g, '~1');
+
+/**
+ * opts.state: { exp: Set<string> } keeps expanded paths across re-renders.
+ * opts.ann: Map<pointer, Annotation[]>, opts.annChip(ann) -> Node.
+ * opts.label: optional root label. opts.base: pointer prefix of the root.
+ */
+export function jsonTree(value, opts = {}) {
+  const state = opts.state || { exp: new Set() };
+  const base = opts.base || '';
+  if (!state.init) { state.init = true; state.exp.add(base); if (opts.auto) autoExpand(value, base, state.exp, opts.auto); }
+  const ctx = {
+    exp: state.exp,
+    ann: opts.ann,
+    annChip: opts.annChip,
+    subtree: (v, label) => jsonTree(v, { label, auto: 2, annChip: opts.annChip }),
+  };
+  return h('div', { class: 'tree' }, nodeEl(opts.label ?? null, value, base, ctx));
+}
+
+/** Expands small containers near the root (used for item rows). */
+function autoExpand(v, path, set, depth) {
+  if (!v || typeof v !== 'object' || depth <= 0) return;
+  const keys = Array.isArray(v) ? v.map((_, i) => i) : Object.keys(v);
+  if (keys.length > 40) return;
+  set.add(path);
+  for (const k of keys) autoExpand(v[k], `${path}/${escPtr(k)}`, set, depth - 1);
+}
+
+function expandAll(v, path, set, budget) {
+  if (!v || typeof v !== 'object') return;
+  if (budget.n-- <= 0) { budget.hit = true; return; }
+  set.add(path);
+  const keys = Array.isArray(v) ? v.map((_, i) => i) : Object.keys(v);
+  for (const k of keys.slice(0, PAGE)) {
+    if (budget.n <= 0) { budget.hit = true; break; }
+    expandAll(v[k], `${path}/${escPtr(k)}`, set, budget);
+  }
+}
+
+function collapseAll(path, set) {
+  for (const p of [...set]) if (p === path || p.startsWith(`${path}/`)) set.delete(p);
+}
+
+export function preview(v, max = 90) {
+  let out = '';
+  if (Array.isArray(v)) {
+    const parts = [];
+    for (const x of v.slice(0, 6)) {
+      if (x && typeof x === 'object' && !Array.isArray(x)) parts.push(x.type ?? x.role ?? '{…}');
+      else parts.push(short(x));
+    }
+    out = parts.join(', ') + (v.length > 6 ? ', …' : '');
+  } else if (v && typeof v === 'object') {
+    const parts = [];
+    for (const [k, x] of Object.entries(v).slice(0, 5)) parts.push(`${k}: ${short(x)}`);
+    out = parts.join(', ') + (Object.keys(v).length > 5 ? ', …' : '');
+  }
+  return out.length > max ? `${out.slice(0, max)}…` : out;
+}
+
+function short(x) {
+  if (Array.isArray(x)) return `[${x.length}]`;
+  if (x && typeof x === 'object') return '{…}';
+  if (typeof x === 'string') return JSON.stringify(x.length > 30 ? `${x.slice(0, 30)}…` : x);
+  return String(x);
+}
+
+export function prim(v) {
+  if (typeof v === 'string') return h('span', { class: 'str' }, JSON.stringify(v));
+  if (typeof v === 'number') return h('span', { class: 'num' }, String(v));
+  if (typeof v === 'boolean') return h('span', { class: 'bool' }, String(v));
+  if (v === undefined) return h('span', { class: 'null' }, 'undefined');
+  return h('span', { class: 'null' }, 'null');
+}
+
+const longString = (v) => typeof v === 'string' && (v.length > 120 || v.includes('\n') || isDataImage(v) || CARRIER_RE.test(v));
+
+function nodeEl(key, value, path, ctx) {
+  const wrap = h('div', { class: 'tn' });
+  const row = h('div', { class: 'tn-row' });
+  put(wrap, row);
+  const keyEl = key == null ? null : h('span', { class: typeof key === 'number' ? 'tn-idx' : 'tn-key' }, String(key));
+  const sep = keyEl ? h('span', { class: 'tn-sep' }, ': ') : null;
+  const anns = ctx.ann?.get(path);
+  const annEls = anns && ctx.annChip ? anns.map((a) => ctx.annChip(a)) : null;
+  const tog = h('span', { class: 'tn-tog' });
+
+  if (value === null || typeof value !== 'object') {
+    if (longString(value)) {
+      const label = isDataImage(value) ? [thumb(value), ` 图片 data URL`] : CARRIER_RE.test(value) ? `bridge 载荷 ${value.slice(0, 5)}` : '字符串';
+      put(row, tog, keyEl, sep, h('span', { class: 'dim' }, label, ` · ${fmtInt(value.length)} 字符`), annEls);
+      put(wrap, h('div', { class: 'tn-str' }, strBlock(value, { name: key ?? 'value', tree: ctx.subtree })));
+    } else {
+      put(row, tog, keyEl, sep, prim(value), annEls);
+    }
+    return wrap;
+  }
+
+  const isArr = Array.isArray(value);
+  const keys = isArr ? null : Object.keys(value);
+  const n = isArr ? value.length : keys.length;
+  const sum = h('span', { class: 'tn-sum' }, isArr ? `[${n}]` : `{${n}}`);
+  const pv = h('span', { class: 'tn-pv' }, preview(value));
+  const acts = h('span', { class: 'tn-acts' },
+    btn('复制', () => copyText(JSON.stringify(value, null, 2))),
+    n ? btn('全部展开', () => {
+      const budget = { n: EXPAND_BUDGET };
+      expandAll(value, path, ctx.exp, budget);
+      if (budget.hit) toast(`节点过多，只展开了前 ${fmtInt(EXPAND_BUDGET)} 个`);
+      wrap.replaceWith(nodeEl(key, value, path, ctx));
+    }) : null,
+    n ? btn('收起', () => { collapseAll(path, ctx.exp); wrap.replaceWith(nodeEl(key, value, path, ctx)); }) : null,
+    key == null ? btn('下载', () => download('value.json', JSON.stringify(value, null, 2))) : null);
+  put(row, tog, keyEl, sep, sum, pv, annEls, acts);
+  if (!n) return wrap;
+
+  let kids = null;
+  const setOpen = (open) => {
+    if (open) {
+      ctx.exp.add(path);
+      if (!kids) { kids = h('div', { class: 'tn-kids' }); fill(kids, value, keys, path, ctx, 0); }
+      put(wrap, kids);
+    } else {
+      ctx.exp.delete(path);
+      kids?.remove();
+    }
+    tog.textContent = open ? '▾' : '▸';
+    pv.hidden = open;
+  };
+  row.classList.add('tn-click');
+  row.addEventListener('click', (e) => {
+    if (e.target.closest('button, .chip, a, img')) return;
+    if (String(window.getSelection?.() ?? '')) return;
+    setOpen(!ctx.exp.has(path));
+  });
+  setOpen(ctx.exp.has(path));
+  return wrap;
+}
+
+function fill(kids, value, keys, path, ctx, start) {
+  const n = keys ? keys.length : value.length;
+  const end = Math.min(n, start + PAGE);
+  for (let i = start; i < end; i++) {
+    const k = keys ? keys[i] : i;
+    put(kids, nodeEl(k, value[k], `${path}/${escPtr(k)}`, ctx));
+  }
+  if (end < n) {
+    const more = btn(`显示更多（还有 ${fmtInt(n - end)} 项）`, () => { more.remove(); fill(kids, value, keys, path, ctx, end); }, 'more');
+    put(kids, more);
+  }
+}