@wacry/codeks-bridge 0.0.1 → 0.0.4

package/ui/detail.js

@@ -3,11 +3,12 @@
 import { h, btn, fill, copyText, download, fmtBytes, fmtDateTime, fmtDur, fmtInt, fmtTime, kvTable, oneLine, safeName, shortId, strBlock, toast, tryJson, put } from './dom.js';
 import { jsonTree } from './tree.js';
 import { structureView, newStructState, focusPointer } from './structure.js';
-import { eventsView, newEventsState, finalObject, parseEvents, usageText } from './events.js';
+import { eventsView, newEventsState, finalObject, inputTransformationReports, parseEvents, usageText } from './events.js';
 import { diffView } from './diff.js';
-import { annChip, annDetail, annIndex, callLabel, decisionClass, decisionText, END_LABEL, KIND_LABEL, KIND_TEXT, OUTCOME_LABEL, reasonText, sourceText } from './labels.js';
+import { annChip, annDetail, annIndex, callLabel, decisionClass, decisionText, END_LABEL, INPUT_TRANSFORMATION_LABEL, KIND_LABEL, KIND_TEXT, OUTCOME_LABEL, reasonText, sourceText } from './labels.js';
 import { OUTCOME_CLASS, threadKey, byNewest } from './list.js';
 import { exportDoc } from './api.js';
+import { responseLatency } from './latency.js';
 
 const RAW_LIMIT = 200_000;
 const VIEW_STATES = 80;
@@ -93,6 +94,28 @@ function fieldsTable(obj, hints, skip = []) {
   return kvTable(rows, 'fields-kv');
 }
 
+/** Renders server-reported input changes separately from local replay annotations. */
+function serverTransformations(resp) {
+  const reports = inputTransformationReports(resp);
+  if (!reports.length) return null;
+  return h('section', { class: 'server-transformations' },
+    h('div', { class: 'note' },
+      '上游服务端报告 · input_transformations。与 bridge 本地回放过滤分开记录；path 指向本次上游请求。丢弃 thinking 可能损失推理上下文，允许失配不代表已丢弃。'),
+    reports.map(report => {
+      const where = `${report.event === null ? 'JSON 正文' : `SSE 事件 #${report.event}`} ${report.pointer}`;
+      const entries = Array.isArray(report.value) ? report.value : null;
+      return h('div', { class: 'transformation-report' },
+        h('div', { class: 'sub-title mono' }, where),
+        entries?.length === 0 ? h('div', { class: 'dim' }, '服务端报告为空 []') : null,
+        entries ? entries.map(entry => h('details', { class: 'transformation-entry' },
+          h('summary', null,
+            h('span', { class: `chip ${entry?.type === 'thinking_dropped' ? 'warn' : 'info'}` },
+              INPUT_TRANSFORMATION_LABEL[entry?.type] ?? entry?.type ?? '未知变换'),
+            ' ', h('span', { class: 'mono' }, [entry?.path, entry?.reason].filter(x => x != null).map(x => typeof x === 'string' ? x : JSON.stringify(x)).join(' · '))),
+          jsonTree(entry, { auto: 2 }))) : jsonTree(report.value, { auto: 2 }));
+    }));
+}
+
 const ROUTE_HINTS = {
   alias: '别名', catalog: '目录模型', adapter: '适配器', api: '上游 API', upstream: '上游配置', base_url: 'base_url', upstream_model: '上游模型',
   origin_id: '来源指纹', reasoning_format: 'reasoning 格式', native_compaction_format: '原生压缩格式', compaction_mode: '压缩模式',
@@ -380,7 +403,7 @@ export class DetailView {
       else {
         put(out, h('span', { class: `chip ${respClass(r)}` }, `${r.status ?? '–'} ${r.status_text ?? ''}`.trim()),
           h('span', { class: `chip ${r.end === 'active' ? 'info' : 'dim'}`, title: `end: ${r.end}` }, END_LABEL[r.end] ?? r.end ?? '–'),
-          r.headers_ms != null ? h('span', { class: 'dim', title: '自请求开始到响应头的时间' }, `首包 ${fmtDur(r.headers_ms)}`) : null,
+          r.headers_ms != null ? h('span', { class: 'dim', title: '自请求开始到响应头的时间' }, `响应头 ${fmtDur(r.headers_ms)}`) : null,
           r.ended_ms != null ? h('span', { class: 'dim', title: '自请求开始到结束的时间' }, `结束 ${fmtDur(r.ended_ms)}`) : null,
           r.events ? h('span', { class: 'dim' }, `${fmtInt(r.events.length)} 事件`) : h('span', { class: 'dim' }, '非 SSE'),
           r.error ? h('span', { class: 'chip bad', title: r.error }, oneLine(`错误：${r.error}`, 80)) : null);
@@ -442,7 +465,9 @@ export class DetailView {
       return structureView(r.value, { state: st, ann, annChip: chip });
     }
     const fo = finalObject(resp);
-    return structureView(fo.value, { state: st, ann, annChip: chip, note: fo.note });
+    return h('div', null,
+      stage.call ? serverTransformations(resp) : null,
+      structureView(fo.value, { state: st, ann, annChip: chip, note: fo.note }));
   }
 
   // ---------- overview ----------
@@ -452,10 +477,11 @@ export class DetailView {
     const box = h('div', { class: 'overview' });
     put(box, h('h4', null, '路由'), d.route ? fieldsTable(d.route, ROUTE_HINTS) : h('div', { class: 'dim' }, '没有路由信息（请求无法解析或路由失败）'));
     put(box, h('h4', null, '时间线'), this.timeline());
+    put(box, h('h4', null, '流式内容延迟'), this.latency());
     const keys = callKeys(d.upstream);
     if (d.upstream?.length) {
       put(box, h('h4', null, `上游调用（${d.upstream.length}）`), h('table', { class: 'calls' },
-        h('thead', null, h('tr', null, ['标签', '请求', '状态', '结束', '开始', '首包', '结束于', '请求大小', '响应大小', '错误'].map((x) => h('th', null, x)))),
+        h('thead', null, h('tr', null, ['标签', '请求', '状态', '结束', '开始', '响应头于', '结束于', '请求大小', '响应大小', '错误'].map((x) => h('th', null, x)))),
         h('tbody', null, d.upstream.map((c, i) => {
           const r = c.response;
           const tr = h('tr', { class: 'clickable', title: '打开该调用的上游响应', onclick: () => this.open(`upres:${keys[i]}`) },
@@ -475,6 +501,13 @@ export class DetailView {
     if (d.annotations?.length) {
       put(box, h('h4', null, '标注'), h('div', null, h('span', { class: 'chip info' }, annSummary(d.annotations)), ' ', btn('查看全部标注', () => this.open('ann'))));
     }
+    for (const [i, call] of (d.upstream ?? []).entries()) {
+      const reports = serverTransformations(call.response);
+      if (reports) {
+        put(box, h('h4', null, `服务端输入变换 · ${callLabel(call.label)} (${keys[i]})`),
+          btn('查看上游响应', () => this.open(`upres:${keys[i]}`)), reports);
+      }
+    }
     put(box, h('h4', null, '记录字段'), fieldsTable(d, SUMMARY_HINTS, ['route', 'client', 'upstream', 'annotations']));
     return box;
   }
@@ -494,13 +527,30 @@ export class DetailView {
       const bar = h('span', { class: `tl-bar ${r.cls}` });
       bar.style.left = pct(r.start);
       bar.style.width = pct(Math.max(end - r.start, total / 400));
-      const mark = r.head != null ? h('span', { class: 'tl-head', title: `首包 ${fmtDur(r.head)}` }) : null;
+      const mark = r.head != null ? h('span', { class: 'tl-head', title: `响应头 ${fmtDur(r.head)}` }) : null;
       if (mark) mark.style.left = pct(r.head);
       return h('div', { class: 'tl-row clickable', onclick: () => this.open(r.key) },
         h('span', { class: 'tl-label' }, r.label),
         h('span', { class: 'tl-track' }, bar, mark),
         h('span', { class: 'tl-num mono' }, `${fmtDur(r.start)} → ${r.head != null ? fmtDur(r.head) : '–'} → ${r.end != null ? fmtDur(r.end) : d.active ? '…' : '–'}`));
-    }), h('div', { class: 'dim tl-axis' }, `0 → ${fmtDur(total)}（开始 → 首包 → 结束，相对请求开始）`));
+    }), h('div', { class: 'dim tl-axis' }, `0 → ${fmtDur(total)}（开始 → 响应头 → 结束，相对请求开始）`));
+  }
+
+  latency() {
+    const d = this.detail;
+    const rows = (d.upstream ?? []).map(c => ({
+      label: `${callLabel(c.label)} → bridge`,
+      value: responseLatency(c.response, c.started_ms),
+    }));
+    rows.push({ label: 'bridge → codeks', value: responseLatency(d.client?.response, 0, true) });
+    return h('div', null,
+      h('div', { class: 'note' }, '上游从各自调用开始计时；写回 codeks 从客户端请求开始计时，包含前置 handoff。只计文字、reasoning 或工具内容，响应头和 keepalive 不计。这里是到达或写出时间，不是模型生成或 TUI 渲染时间。'),
+      h('table', { class: 'calls' },
+        h('thead', null, h('tr', null, ['方向', '首内容', '首文字', '首 reasoning', '首工具'].map(x => h('th', null, x)))),
+        h('tbody', null, rows.map(({ label, value }) => h('tr', null,
+          h('td', null, label),
+          ['content_ms', 'text_ms', 'reasoning_ms', 'tool_ms'].map(key => h('td', { class: 'mono' }, value?.[key] != null ? fmtDur(value[key]) : '—')))))),
+      h('div', { class: 'dim' }, '— 表示未观测到或无法测量；JSON 响应和缺少时间戳的导入不估算。上游 reasoning 可包含不透明载荷；写回 codeks 仅计可见摘要。工具以首次名称或参数为准，压缩密文不计入这些指标。'));
   }
 
   // ---------- annotations ----------

package/ui/events.js

@@ -22,6 +22,30 @@ export function parseEvents(resp) {
   return list;
 }
 
+/** Keeps each server report with its source; repeated SSE reports are not totals. */
+export function inputTransformationReports(resp) {
+  const reports = [];
+  const add = (value, pointer, event = null) => {
+    if (value != null && Object.hasOwn(value, 'input_transformations')) {
+      reports.push({ event, pointer: `${pointer}/input_transformations`, value: value.input_transformations });
+    }
+  };
+  const events = parseEvents(resp);
+  if (events) {
+    for (const ev of events) {
+      if (ev.json?.type === 'message_start') add(ev.json.message, '/message', ev.i);
+      else if (ev.json?.type === 'message_delta') {
+        add(ev.json, '', ev.i);
+        add(ev.json.delta, '/delta', ev.i);
+      }
+    }
+  } else {
+    const parsed = tryJson(resp?.body?.text);
+    if (parsed.ok) add(parsed.value, '');
+  }
+  return reports;
+}
+
 /** Returns {key, text, label} for streaming delta events of Responses, Messages and Chat. */
 function deltaOf(ev) {
   const j = ev.json;
@@ -311,6 +335,7 @@ function fromMessages(data) {
     } else if (j.type === 'message_delta') {
       Object.assign(msg, j.delta ?? {});
       if (j.usage) msg.usage = { ...(msg.usage ?? {}), ...j.usage };
+      if (Object.hasOwn(j, 'input_transformations')) msg.input_transformations = j.input_transformations;
     } else if (!['message_stop', 'ping'].includes(j.type)) extra.push(j);
   }
   for (const [i, s] of partial) if (blocks[i] && blocks[i].input === undefined) blocks[i].input = s;

package/ui/labels.js

@@ -5,6 +5,11 @@ import { jsonTree } from './tree.js';
 export const CALL_LABEL = { main: '主请求', summary: '压缩·文字摘要', native: '压缩·原生', handoff: '压缩·交接复述' };
 export const callLabel = (l) => CALL_LABEL[l] ?? l;
 
+export const INPUT_TRANSFORMATION_LABEL = {
+  thinking_dropped: '已丢弃 thinking',
+  thinking_mismatch_allowed: '允许失配，保留 thinking',
+};
+
 export const KIND_LABEL = { turn: '轮次', compaction: '压缩', invalid: '无效' };
 export const OUTCOME_LABEL = { active: '进行中', completed: '完成', incomplete: '未完成', failed: '失败', error: '错误', aborted: '中止' };
 export const END_LABEL = { active: '传输中', complete: '完整', cancelled: '已取消', error: '出错', unread: '终止事件后停止读取' };

package/ui/latency.js

@@ -0,0 +1,88 @@
+// Delivery times derived from captured SSE events, never from headers or usage.
+const present = (value) => typeof value === 'string' && value.length > 0;
+const array = (value) => Array.isArray(value) ? value : [];
+
+function contentKinds(block, visibleOnly) {
+  if (!block || typeof block !== 'object') return [];
+  switch (block.type) {
+    case 'text': case 'output_text': case 'refusal':
+      return present(block.text ?? block.refusal) ? ['text'] : [];
+    case 'thinking':
+      return present(block.thinking) ? ['reasoning'] : [];
+    case 'summary_text': case 'reasoning_text':
+      return present(block.text) ? ['reasoning'] : [];
+    case 'redacted_thinking':
+      return !visibleOnly && present(block.data) ? ['reasoning'] : [];
+    case 'reasoning':
+      return [
+        ...array(block.summary).flatMap(part => contentKinds(part, visibleOnly)),
+        ...array(block.content).flatMap(part => contentKinds(part, visibleOnly)),
+        ...(!visibleOnly && present(block.encrypted_content) ? ['reasoning'] : []),
+      ];
+    case 'message':
+      return Array.isArray(block.content) ? block.content.flatMap(part => contentKinds(part, visibleOnly)) : [];
+    case 'function_call': case 'custom_tool_call': case 'tool_use':
+      return present(block.name) || present(block.arguments) || present(block.input) ? ['tool'] : [];
+    default: return [];
+  }
+}
+
+function eventKinds(data, visibleOnly) {
+  switch (data?.type) {
+    case 'response.output_text.delta': case 'response.output_text.done':
+      return present(data.delta ?? data.text) ? ['text'] : [];
+    case 'response.refusal.delta': case 'response.refusal.done':
+      return present(data.delta ?? data.refusal) ? ['text'] : [];
+    case 'response.reasoning_summary_text.delta': case 'response.reasoning_summary_text.done':
+    case 'response.reasoning_text.delta': case 'response.reasoning_text.done':
+      return present(data.delta ?? data.text) ? ['reasoning'] : [];
+    case 'response.function_call_arguments.delta': case 'response.function_call_arguments.done':
+    case 'response.custom_tool_call_input.delta': case 'response.custom_tool_call_input.done':
+      return present(data.delta ?? data.arguments ?? data.input) ? ['tool'] : [];
+    case 'response.output_item.added': case 'response.output_item.done':
+      return contentKinds(data.item, visibleOnly);
+    case 'response.content_part.added': case 'response.content_part.done':
+    case 'response.reasoning_summary_part.added': case 'response.reasoning_summary_part.done':
+      return contentKinds(data.part, visibleOnly);
+    case 'response.completed': case 'response.incomplete': case 'response.failed':
+      return array(data.response?.output).flatMap(item => contentKinds(item, visibleOnly));
+    case 'message_start':
+      return array(data.message?.content).flatMap(item => contentKinds(item, visibleOnly));
+    case 'content_block_start':
+      return contentKinds(data.content_block, visibleOnly);
+    case 'content_block_delta':
+      switch (data.delta?.type) {
+        case 'text_delta': return present(data.delta.text) ? ['text'] : [];
+        case 'thinking_delta': return present(data.delta.thinking) ? ['reasoning'] : [];
+        case 'input_json_delta': return present(data.delta.partial_json) ? ['tool'] : [];
+        default: return [];
+      }
+    default:
+      return array(data?.choices).flatMap(choice => {
+        const delta = choice?.delta ?? choice?.message;
+        if (!delta) return [];
+        return [
+          ...(present(delta.content) || present(delta.refusal) ? ['text'] : []),
+          ...(present(delta.reasoning_content) ? ['reasoning'] : []),
+          ...(array(delta.tool_calls).some(call => present(call.function?.name) || present(call.function?.arguments)) ? ['tool'] : []),
+        ];
+      });
+  }
+}
+
+/** Null means no timed SSE capture; individual null fields mean not observed. */
+export function responseLatency(response, startedMs, visibleOnly = false) {
+  if (!Array.isArray(response?.events) || !Number.isFinite(startedMs)) return null;
+  const first = { content_ms: null, text_ms: null, reasoning_ms: null, tool_ms: null };
+  for (const event of response.events) {
+    if (!Number.isFinite(event.t) || event.t < startedMs) continue;
+    let data;
+    try { data = JSON.parse(event.data); } catch { continue; }
+    for (const kind of eventKinds(data, visibleOnly)) {
+      const elapsed = Math.round((event.t - startedMs) * 10) / 10;
+      first.content_ms ??= elapsed;
+      first[`${kind}_ms`] ??= elapsed;
+    }
+  }
+  return first;
+}