@logicseek/hello-cc 1.0.5 → 1.1.0-rc.3

package/lib/web/ui-native-timeline.mjs

@@ -0,0 +1,326 @@
+import { safeMarkdownScript, installSafeMarkdown } from './ui-safe-markdown.mjs';
+import { sessionToolsScript, installSessionTools } from './ui-session-tools.mjs';
+
+// Normalize only facts supplied by the native adapters. In particular receipts
+// do not contain prompt text, and a resumed executor does not replay history.
+export function nativeTimeline(entries, provider = '') {
+  const records = [], keyed = new Map(), streams = new Map(), outputShadows = new Map();
+  const string = value => typeof value === 'string' ? value : '';
+  const json = value => value == null ? '' : typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+  const textParts = content => (Array.isArray(content) ? content : []).map(part =>
+    part.type === 'text' ? string(part.text) : part.type === 'content' && part.content?.type === 'text' ? string(part.content.text) : '').filter(Boolean).join('\n');
+  function put(key, next) {
+    if (keyed.has(key)) { const record = keyed.get(key); const ids = record.eventIds || []; Object.assign(record, next); record.eventIds = [...new Set([...ids, next.eventId])]; }
+    else { const record = { key, ...next, eventIds: [next.eventId] }; records.push(record); keyed.set(key, record); }
+    return keyed.get(key);
+  }
+  for (const entry of entries.slice(-100)) {
+    const event = entry.payload || entry, source = event.provider || provider;
+    const association = event.turnId || event.submissionId || (event.parentToolUseId ? 'parent:' + event.parentToolUseId : 'event:' + entry.id);
+    const scope = JSON.stringify([source, event.sessionId, association, event.parentToolUseId || '']);
+    const base = { eventId: entry.id, scope, turnId: event.turnId || '', parentToolUseId: event.parentToolUseId || '', status: '' };
+    const identity = event.itemId || event.messageId;
+    function message(value, { delta = false, role = 'assistant', id = identity } = {}) {
+      if (!value) return;
+      const streamScope = scope + ':' + role, stream = streams.get(streamScope);
+      const namedKey = id ? scope + ':message:' + id : null;
+      // Claude assigns the message UUID only on its final message, whereas
+      // Codex already supplies the item ID on each delta.
+      const canFinishAnonymousStream = !delta && source === 'claude' && stream && !keyed.get(stream)?.explicitIdentity;
+      const key = namedKey && !canFinishAnonymousStream ? namedKey : stream || namedKey || scope + ':message:event:' + entry.id;
+      const previous = keyed.get(key);
+      const record = put(key, { ...base, kind: 'message', role, streamed: delta, explicitIdentity: id || '', text: delta ? (previous?.text || '') + value : value });
+      if (namedKey) keyed.set(namedKey, record);
+      if (delta) streams.set(streamScope, key); else streams.delete(streamScope);
+    }
+    function endStreams() { for (const role of ['assistant', 'user', 'output']) streams.delete(scope + ':' + role); }
+    if (['delta', 'output', 'message'].includes(event.type)) {
+      // These providers' adapters emit assistant text. Unknown providers have
+      // no inferred role. Explicit roles always take precedence.
+      const role = event.role || (['codex', 'claude', 'dsh'].includes(source) ? 'assistant' : 'output');
+      message(string(event.text), { delta: event.type !== 'message', role });
+      if (source === 'dsh' && event.type === 'output') outputShadows.set(scope, string(event.text));
+    } else if (event.type === 'session.update') {
+      const update = event.update || {}, type = update.sessionUpdate;
+      if (['agent_message_chunk', 'user_message_chunk', 'agent_thought_chunk'].includes(type)) {
+        if (update.content?.type === 'text') {
+          if (type === 'agent_thought_chunk') put(scope + ':thought:' + entry.id,
+            { ...base, kind: 'reasoning', text: string(update.content.text) });
+          else {
+            const duplicateOutput = type === 'agent_message_chunk' && outputShadows.get(scope) === update.content.text;
+            outputShadows.delete(scope);
+            if (!duplicateOutput) message(string(update.content.text), { delta: true, role: type === 'user_message_chunk' ? 'user' : 'assistant', id: null });
+          }
+        }
+      } else if (['tool_call', 'tool_call_update'].includes(type)) {
+        endStreams();
+        const key = scope + ':tool:' + (update.toolCallId || entry.id), previous = keyed.get(key) || {};
+        const tool = { ...(previous.tool || {}), ...update };
+        put(key, { ...base, kind: tool.kind === 'edit' ? 'files' : 'tool', title: tool.title || tool.kind || '',
+          status: tool.status || '', text: textParts(tool.content), input: json(tool.rawInput), output: json(tool.rawOutput),
+          changes: (Array.isArray(tool.content) ? tool.content : []).filter(part => part.type === 'diff').map(part => ({ path: part.path, diff: part.newText, oldText: part.oldText })), tool });
+      } else if (type === 'plan') put(scope + ':plan', { ...base, kind: 'plan', text: json(update.entries) });
+      else put(scope + ':event:' + entry.id, { ...base, kind: 'event', title: type || 'session.update', text: json(update) });
+    } else if (event.type === 'item') {
+      endStreams();
+      const key = scope + ':item:' + (event.item?.id || entry.id);
+      const item = { ...(keyed.get(key)?.item || {}), ...(event.item || {}) };
+      put(key, { ...base, kind: item.type === 'fileChange' ? 'files' : 'tool',
+        title: item.command || item.tool || item.type || '', status: item.status || event.phase || '',
+        text: string(item.aggregatedOutput) || json(item.result), input: json(item.arguments),
+        changes: Array.isArray(item.changes) ? item.changes : [], exitCode: item.exitCode, command: string(item.command), item });
+    } else if (event.type === 'diff' || event.type === 'plan') {
+      put(scope + ':' + event.type, { ...base, kind: event.type === 'diff' ? 'files' : 'plan',
+        text: string(event.diff) || json(event.plan), explanation: string(event.explanation) });
+    } else if (event.type === 'error') {
+      put(scope + ':error:' + entry.id, { ...base, kind: 'error', title: event.code || event.error?.code || '',
+        text: string(event.text) || string(event.message) || json(event.error) });
+    } else if (event.type === 'completed') {
+      const output = string(event.text), messages = records.filter(record => record.scope === scope && record.kind === 'message' && record.role === 'assistant');
+      // Completion may repeat the final message (Codex/Claude) or the complete
+      // concatenation of committed chunks (dsh). Do not print that reply twice.
+      const duplicate = messages.some(record => record.text === output) ||
+        messages.map(record => record.text).join('') === output || messages.map(record => record.text).join('\n\n') === output;
+      if (output && !duplicate) {
+        if (event.status === 'failed') put(scope + ':completion-error:' + entry.id, { ...base, kind: 'error', text: output });
+        else {
+          // dsh completion contains the full accumulated turn text; the event
+          // window may have evicted early chunks. Replace surviving fragments
+          // instead of showing those fragments again beside the full answer.
+          if (source === 'dsh') {
+            for (let index = records.length - 1; index >= 0; index--) {
+              const record = records[index];
+              if (record.scope === scope && record.kind === 'message' && record.role === 'assistant' && record.streamed) records.splice(index, 1);
+            }
+            endStreams();
+          }
+          message(output, { id: 'completion:' + entry.id });
+        }
+      }
+      endStreams();
+      put(scope + ':completion:' + entry.id, { ...base, kind: 'status', terminal: true, status: event.status || '', text: event.stopReason || '' });
+    } else if (event.type === 'status' || event.type === 'opened' || event.type === 'closed') {
+      put(scope + ':status:' + entry.id, { ...base, kind: 'status', status: event.status || event.type, text: '' });
+    } else if (!['queued', 'account', 'usage', 'metadata', 'approval', 'interaction.pending', 'interaction.resolved', 'interaction.expired', 'permission', 'interrupt.requested'].includes(event.type)) {
+      put(scope + ':event:' + entry.id, { ...base, kind: 'event', title: event.type || '', text: json(event) });
+    }
+  }
+  return records;
+}
+
+export function nativeTimelineScript() {
+  return sessionToolsScript() + safeMarkdownScript() + 'window.hccNativeTimelineModel = (' + nativeTimeline.toString() + ');'
+    + 'window.hccNativeTimelineView = (' + createNativeTimelineView.toString() + ');';
+}
+
+export function installNativeTimeline() {
+  installSafeMarkdown(); installSessionTools();
+  window.hccNativeTimelineModel = nativeTimeline;
+  window.hccNativeTimelineView = createNativeTimelineView;
+}
+
+export function createNativeTimelineView({ document, window, escape, text }) {
+  const byId = id => document.getElementById(id), container = byId('nativeEvents'), scroll = byId('nativeScroll');
+  const markdown = window.hccSafeMarkdown(escape), views = new Map();
+  let scope = '', currentEntries = [], currentState = {}, html = '', copies = [], blocks = [];
+  const traceFilter = window.hccCreateTraceFilter({ document, prefix: 'native', text, escape, changed: () => {
+    if (!scope) return;
+    view().top = 0; view().follow = false; render(currentEntries, currentState, scope); scroll.scrollTop = 0;
+  } });
+  const view = () => views.get(scope);
+  const pinned = () => !Number.isFinite(scroll.scrollHeight) || scroll.scrollHeight - scroll.clientHeight - scroll.scrollTop < 48;
+  function remember() {
+    if (!view()) return;
+    view().top = scroll.scrollTop || 0;
+    for (const node of container.querySelectorAll('details[data-native-detail]')) {
+      if (node.dataset.nativeDetail) view().details.set(node.dataset.nativeDetail, node.open);
+    }
+    for (const node of container.querySelectorAll('pre[data-native-code]')) {
+      if (node.dataset.nativeCode) view().codeScroll.set(node.dataset.nativeCode, { top: node.scrollTop, left: node.scrollLeft });
+    }
+    for (const id of ['nativeIdentityDetails', 'nativeReceiptsDetails']) view().details.set(id, Boolean(byId(id).open));
+    for (const map of [view().details, view().pages, view().codeScroll]) while (map.size > 256) map.delete(map.keys().next().value);
+  }
+  function choose(next) {
+    if (scope === next) return;
+    remember(); scope = next; html = ''; copies = []; blocks = []; traceFilter.reset(next);
+    if (!views.has(scope)) views.set(scope, { mode: 'conversation', top: 0, follow: true, details: new Map(), pages: new Map(), codeScroll: new Map() });
+    while (views.size > 20) views.delete(views.keys().next().value);
+    for (const id of ['nativeIdentityDetails', 'nativeReceiptsDetails']) byId(id).open = view().details.get(id) || false;
+    scroll.scrollTop = view().top;
+  }
+  function ranges(value) {
+    const result = [];
+    for (let start = 0; start < value.length;) {
+      let end = Math.min(start + 12000, value.length), lines = 0;
+      for (let i = start; i < end; i++) if (value[i] === '\n' && ++lines === 200) { end = i + 1; break; }
+      if (end < value.length && /[\uD800-\uDBFF]/.test(value[end - 1]) && /[\uDC00-\uDFFF]/.test(value[end])) end--;
+      result.push([start, end]); start = end;
+    }
+    return result.length ? result : [[0, 0]];
+  }
+  function code(value, identity, label = '') {
+    const content = String(value ?? ''), parts = ranges(content), page = Math.min(view().pages.get(identity) || 0, parts.length - 1);
+    const index = copies.push(content) - 1;
+    blocks[index] = { identity, pages: parts.length, page };
+    return '<div class="native-content-actions"><span>' + escape(label || text('Text', '文本')) + '</span>'
+      + '<button type="button" data-native-copy="' + index + '">' + escape(text('Copy full text', '复制全文')) + '</button>'
+      + (parts.length > 1 ? '<button type="button" data-native-page="' + index + '" data-step="-1"' + (page ? '' : ' disabled') + '>' + escape(text('Previous', '上一段')) + '</button>'
+        + '<span>' + (page + 1) + ' / ' + parts.length + '</span><button type="button" data-native-page="' + index + '" data-step="1"' + (page + 1 < parts.length ? '' : ' disabled') + '>' + escape(text('Next', '下一段')) + '</button>' : '')
+      + '</div><pre tabindex="0" data-native-code="' + escape(identity) + '"><code>' + escape(content.slice(...parts[page])) + '</code></pre>';
+  }
+  function prose(value, identity) {
+    if (ranges(value).length > 1) return code(value, identity, text('Long message · Plain-text sections', '长消息 · 纯文本分段'));
+    const fence = String.fromCharCode(96).repeat(3), parts = value.split('\n');
+    let plain = [], source = [], language = '', inCode = false, result = '', block = 0;
+    const flush = () => { if (plain.length) result += markdown(plain.join('\n')); plain = []; };
+    for (const line of parts) {
+      if (line.trimStart().startsWith(fence)) {
+        if (inCode) { result += code(source.join('\n'), identity + ':' + block++, language); source = []; }
+        else { flush(); language = line.trimStart().slice(3).trim(); }
+        inCode = !inCode;
+      } else (inCode ? source : plain).push(line);
+    }
+    if (inCode) result += code(source.join('\n'), identity + ':' + block++, language);
+    flush(); return result;
+  }
+  function details(identity, label, body, status = '') {
+    // User disclosure state is restored on the DOM after a content update. It
+    // must not alter the cached markup for an otherwise unchanged snapshot.
+    return '<details data-native-detail="' + escape(identity) + '"><summary>' + escape(label)
+      + (status ? '<small>' + escape(status) + '</small>' : '') + '</summary>' + body + '</details>';
+  }
+  function card(record) {
+    const identity = record.key, labels = { tool: text('Tool / command', '工具 / 命令'), files: text('File changes', '文件变更'), plan: text('Plan', '计划'), reasoning: text('Reasoning', '推理'), error: text('Error', '错误'), event: text('Other event', '其他事件') };
+    const locate = '<button type="button" data-native-locate="' + escape(record.eventId) + '">' + escape(text('Locate event #', '定位事件 #') + record.eventId) + '</button>';
+    if (record.kind === 'status') return record.terminal ? '<p class="native-meta" data-native-card="' + escape(identity) + '">' + escape(text('Turn status: ', '回合状态：') + (record.status || text('Not reported', '未报告')) + (record.text ? ' · ' + record.text : '')) + ' ' + locate + '</p>' : '';
+    const role = record.role === 'user' ? text('You', '你') : record.role === 'assistant'
+      ? (record.parentToolUseId ? text('Assistant · Subtask', '助手 · 子任务') : text('Assistant', '助手')) : text('Executor output', '执行器输出');
+    let body;
+    if (record.kind === 'message') body = '<h4>' + escape(role) + '</h4>' + prose(record.text, identity);
+    else {
+      const content = (record.explanation ? prose(record.explanation, identity + ':explanation') : '')
+        + (record.command ? code(record.command, identity + ':command', text('Command', '命令')) : '')
+        + (record.text ? code(record.text, identity + ':text', labels[record.kind]) : '')
+        + (record.input ? code(record.input, identity + ':input', text('Input', '输入')) : '')
+        + (record.output ? code(record.output, identity + ':output', text('Output', '输出')) : '')
+        + (record.exitCode != null ? '<p>' + escape(text('Exit code: ', '退出码：') + record.exitCode) + '</p>' : '')
+        + (record.changes || []).map((change, index) => '<h4>' + escape(change.path || text('File', '文件')) + '</h4>'
+          + (change.oldText != null ? code(change.oldText, identity + ':old:' + index, text('Before', '修改前')) : '')
+          + code(change.diff || '', identity + ':diff:' + index, change.oldText != null ? text('After', '修改后') : text('Reported diff', '报告的差异'))).join('');
+      body = record.kind === 'error' ? '<h4>' + escape(labels.error) + '</h4>' + content
+        : details(identity, labels[record.kind] + (record.title ? ' · ' + String(record.title).slice(0, 180) : ''), content, record.status);
+    }
+    return '<article class="native-event native-event-' + escape(record.kind) + (record.role === 'user' ? ' native-event-user' : '') + '" data-native-card="' + escape(identity) + '">' + body + '<div class="native-content-actions">' + locate + '</div></article>';
+  }
+  function render(entries, state, nextScope) {
+    const changedScope = scope !== nextScope;
+    if (!changedScope) remember();
+    choose(nextScope); currentEntries = entries; currentState = state;
+    const reading = view(); copies = []; blocks = [];
+    const normalized = window.hccNativeTimelineModel(entries, state.provider);
+    const filtered = normalized.filter(record => window.hccTraceMatches(record, traceFilter.value()));
+    const matches = new Set(filtered.flatMap(record => record.eventIds || [record.eventId]));
+    const trace = entries.filter(entry => matches.has(entry.id) || window.hccTraceMatches({ turnId: (entry.payload || entry).turnId,
+      kind: (entry.payload || entry).type === 'error' ? 'error' : 'event', status: (entry.payload || entry).status,
+      text: JSON.stringify(entry.payload || entry) }, traceFilter.value()));
+    traceFilter.render(entries.map(entry => (entry.payload || entry).turnId), reading.mode === 'trace' ? trace.length : filtered.length, reading.mode === 'trace' ? entries.length : normalized.length);
+    const next = (reading.mode === 'trace' ? trace.map(entry => '<article class="native-event" data-native-trace-id="' + escape(entry.id) + '">' + details('trace:' + entry.id,
+      '#' + entry.id + ' · ' + (entry.payload?.type || entry.type || text('Event', '事件')), code(JSON.stringify(entry.payload || entry, null, 2), 'trace:' + entry.id))
+      + (normalized.some(record => record.eventIds?.includes(entry.id)) ? '<button type="button" data-native-result="' + escape(entry.id) + '">' + escape(text('Locate result', '定位结果')) + '</button>' : '') + '</article>').join('')
+      : filtered.map(card).join('')) || '<p class="native-meta">' + escape(entries.length ? text('No matching retained records.', '保留记录中没有匹配项。') : text('No retained output yet.', '暂无保留的输出。')) + '</p>';
+    if (html !== next) {
+      container.innerHTML = next; html = next;
+      for (const node of container.querySelectorAll('details[data-native-detail]')) {
+        node.open = reading.details.get(node.dataset.nativeDetail) || false;
+      }
+      for (const node of container.querySelectorAll('pre[data-native-code]')) {
+        const saved = reading.codeScroll.get(node.dataset.nativeCode);
+        if (saved) { node.scrollTop = saved.top; node.scrollLeft = saved.left; }
+      }
+    }
+    const bounds = entries.length ? '#' + entries[0].id + '–#' + entries[entries.length - 1].id : '0';
+    byId('nativeHistoryRange').textContent = text('Retained events ', '保留事件 ') + bounds + ' · ' + entries.length + '/100 · '
+      + text('Recent window, not a full transcript. Submitted prompts may be absent.', '最近事件窗口，非完整会话；可能不含提交的原文。');
+    for (const [id, mode] of [['nativeConversation', 'conversation'], ['nativeTrace', 'trace']]) {
+      byId(id).textContent = mode === 'conversation' ? text('Conversation', '对话') : text('Event trace', '事件轨迹');
+      byId(id).setAttribute?.('aria-pressed', String(reading.mode === mode));
+    }
+    byId('nativeIdentityLabel').textContent = text('Executor details', '执行器详情');
+    byId('nativeReceiptsLabel').textContent = text('Delivery receipts', '投递回执') + ' · ' + (state.deliveries || []).length;
+    const count = (state.pendingApprovals || []).length;
+    byId('nativeApprovalJump').hidden = !count;
+    byId('nativeApprovalJump').textContent = text('Needs your response', '等待你的答复') + ' · ' + count;
+    byId('nativeJump').textContent = text('Back to latest', '回到最新');
+    byId('nativeJumpBar').hidden = reading.follow;
+    scroll.scrollTop = reading.follow ? scroll.scrollHeight : reading.top;
+  }
+  for (const [id, mode] of [['nativeConversation', 'conversation'], ['nativeTrace', 'trace']]) byId(id).addEventListener('click', () => {
+    if (!scope) return;
+    remember(); view().mode = mode; view().top = 0; view().follow = false;
+    render(currentEntries, currentState, scope); scroll.scrollTop = 0; view().top = 0;
+  });
+  scroll.addEventListener('scroll', () => {
+    if (!view() || !currentEntries.length) return;
+    view().follow = pinned(); view().top = scroll.scrollTop; byId('nativeJumpBar').hidden = view().follow;
+  });
+  byId('nativeJump').addEventListener('click', () => { if (view()) { view().follow = true; scroll.scrollTop = scroll.scrollHeight; byId('nativeJumpBar').hidden = true; } });
+  byId('nativeApprovalJump').addEventListener('click', () => {
+    scroll.scrollTop = 0;
+    byId('nativeApprovals').querySelector?.('input,select,textarea,button')?.focus();
+  });
+  container.addEventListener('click', async event => {
+    const button = event.target.closest?.('button');
+    if (!button || !container.contains?.(button)) return;
+    if (button.dataset.nativeLocate !== undefined || button.dataset.nativeResult !== undefined) {
+      const toTrace = button.dataset.nativeLocate !== undefined, id = Number(toTrace ? button.dataset.nativeLocate : button.dataset.nativeResult);
+      remember(); view().follow = false; view().mode = toTrace ? 'trace' : 'conversation';
+      traceFilter.clear();
+      const record = toTrace ? null : window.hccNativeTimelineModel(currentEntries, currentState.provider).find(item => item.eventIds?.includes(id));
+      if (toTrace) view().details.set('trace:' + id, true);
+      else if (record) view().details.set(record.key, true);
+      render(currentEntries, currentState, scope);
+      const target = [...container.querySelectorAll(toTrace ? '[data-native-trace-id]' : '[data-native-card]')].find(node => toTrace ? Number(node.dataset.nativeTraceId) === id : node.dataset.nativeCard === record?.key);
+      if (target) { target.scrollIntoView?.({ block: 'center' }); target.setAttribute?.('tabindex', '-1'); target.focus?.({ preventScroll: true }); view().top = scroll.scrollTop; }
+    } else if (button.dataset.nativeCopy !== undefined) {
+      try { await window.navigator.clipboard.writeText(copies[Number(button.dataset.nativeCopy)]); button.textContent = text('Copied', '已复制'); }
+      catch { button.textContent = text('Select text to copy', '请选择文本复制'); }
+    } else if (button.dataset.nativePage !== undefined) {
+      const block = blocks[Number(button.dataset.nativePage)];
+      if (!block) return;
+      remember(); view().follow = false;
+      view().pages.set(block.identity, Math.max(0, Math.min(block.pages - 1, block.page + Number(button.dataset.step))));
+      view().codeScroll.delete(block.identity);
+      render(currentEntries, currentState, scope);
+      const next = container.querySelector?.('[data-native-page="' + button.dataset.nativePage + '"][data-step="' + button.dataset.step + '"]:not(:disabled)')
+        || container.querySelector?.('[data-native-code]');
+      next?.focus({ preventScroll: true });
+    }
+  });
+  return { render, reset(nextScope) { render([], {}, nextScope); } };
+}
+
+export const nativeTimelineCss = `
+  .native-header-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
+  .native-header-top strong { flex:1; min-width:0; }
+  .native-navigation { display:flex; gap:6px; align-items:center; margin:10px 0 0; }
+  .native-navigation button[aria-pressed=true] { color:var(--accent); border-color:var(--accent); }
+  .native-history-range { margin:8px 0 0; color:var(--muted); font-size:var(--small-font); }
+  .native-event { max-width:900px; margin:10px auto; padding:14px; border:1px solid var(--border); border-radius:8px; background:var(--panel); }
+  .native-event-message { border:0; padding:10px 2px; background:transparent; }
+  .native-event-user { padding:14px; background:var(--panel-2); border:1px solid var(--border); }
+  .native-event-error { border-color:var(--danger); }
+  .native-event h4 { margin:0 0 8px; font-size:var(--small-font); color:var(--muted); }
+  .native-event details summary { cursor:pointer; overflow-wrap:anywhere; line-height:1.6; }
+  .native-event details summary small { display:block; color:var(--muted); }
+  .native-event .codex-prose { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
+  .native-event pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:8px 0; padding:10px; max-height:340px; overflow:auto; background:var(--panel-2); border-radius:6px; }
+  .native-event blockquote { margin-left:0; padding-left:12px; border-left:3px solid var(--border); color:var(--muted); }
+  .native-reading-jump { padding:6px; text-align:center; border-top:1px solid var(--border); }
+  .native-meta { color:var(--muted); font-size:var(--small-font); margin:10px 0; }
+  .native-meta summary { cursor:pointer; padding:5px 0; }
+  .native-meta p { overflow-wrap:anywhere; }
+  .native-content-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:8px; }
+  .native-content-actions span { color:var(--muted); font-size:var(--small-font); }
+  @media(max-width:640px) { .native-header,.native-composer { padding:10px 12px; } .native-scroll { padding:0 12px 10px; } .native-navigation button,.native-content-actions button { min-height:40px; } }
+`;

package/lib/web/ui-native.mjs

@@ -1,4 +1,7 @@
-import { interactionPanelScript } from './ui-interactions.mjs';
+import { nativeTimelineCss, nativeTimelineScript, installNativeTimeline } from './ui-native-timeline.mjs';
+import { interactionPanelScript, installInteractionPanel } from './ui-interactions.mjs';
+import { codexAccountPanelHtml, codexAccountPanelCss, codexAccountPanelScript, installCodexAccountPanel } from './ui-codex-account.mjs';
+import { sessionToolsCss, sessionToolsHtml, sessionToolsScript, metricsHtml, traceFilterHtml, installSessionTools } from './ui-session-tools.mjs';
 
 export function nativePanelHtml() {
   return `<style>
@@ -21,10 +24,17 @@ export function nativePanelHtml() {
     .native-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
     .native-controls label { display:flex; gap:6px; align-items:center; font-size:var(--small-font); }
     #nativeNotice { color:var(--muted); font-size:var(--small-font); overflow-wrap:anywhere; }
+    ${codexAccountPanelCss()}
+    ${nativeTimelineCss}
+    ${sessionToolsCss}
   </style><section id="nativePanel" hidden aria-label="Native worker">
-    <header class="native-header"><strong id="nativeStatus" role="status"></strong><p id="nativeIdentity"></p><p data-i18n="native.approvalPolicy">The current controller can answer interactive requests here.</p></header>
-    <div class="native-scroll"><div id="nativeApprovals"></div><h4 data-i18n="native.receipts">Durable delivery receipts</h4><div id="nativeReceipts" class="native-receipts"></div><h4 data-i18n="native.output">Executor output</h4><div id="nativeEvents"></div></div>
-    <footer class="native-composer"><label for="nativeDraft" data-i18n="native.draft">Message draft saved in this browser</label><textarea id="nativeDraft" rows="3"></textarea>
+    <header class="native-header"><div class="native-header-top"><strong id="nativeStatus" role="status"></strong><button id="nativeApprovalJump" type="button" hidden>Needs your response</button></div>
+      <nav class="native-navigation" aria-label="Native session views"><button id="nativeConversation" type="button" aria-pressed="true">Conversation</button><button id="nativeTrace" type="button" aria-pressed="false">Event trace</button></nav><p id="nativeHistoryRange" class="native-history-range"></p></header>
+    <div id="nativeScroll" class="native-scroll" tabindex="0" aria-label="Native conversation"><div id="nativeApprovals"></div>${codexAccountPanelHtml('native')}${traceFilterHtml('native')}${metricsHtml('native')}<div id="nativeEvents"></div>
+      <details id="nativeReceiptsDetails" class="native-meta"><summary id="nativeReceiptsLabel">Delivery receipts</summary><div id="nativeReceipts" class="native-receipts"></div></details>
+      <details id="nativeIdentityDetails" class="native-meta"><summary id="nativeIdentityLabel">Executor details</summary><p id="nativeIdentity"></p><p data-i18n="native.approvalPolicy">The current controller can answer interactive requests here.</p></details></div>
+    <div id="nativeJumpBar" class="native-reading-jump" hidden><button id="nativeJump" type="button">Back to latest</button></div>
+    <footer class="native-composer"><label for="nativeDraft" data-i18n="native.draft">Message draft saved in this browser</label><textarea id="nativeDraft" rows="3"></textarea>${sessionToolsHtml('native')}
       <div class="native-controls"><button id="nativeSend" class="primary" type="button" data-i18n="native.send" disabled>Queue message</button><button id="nativeInterrupt" type="button" data-i18n="native.interrupt" disabled>Interrupt current turn</button><button id="nativeRead" type="button" data-i18n="native.read">Refresh receipts</button><button id="nativeReviewPending" type="button" data-i18n="native.reviewPending" hidden>Reviewed; keep draft</button></div>
       <div class="native-controls"><label><input id="nativeCloseConfirmed" type="checkbox"><span data-i18n="native.closeConfirm">Stop this executor</span></label><button id="nativeClose" class="danger" type="button" data-i18n="native.close" disabled>Close executor</button></div>
       <p id="nativeNotice" role="status" aria-live="polite"></p>
@@ -33,25 +43,38 @@ export function nativePanelHtml() {
 }
 
 export function nativePanelScript() {
-  return interactionPanelScript() + String.raw`(() => {
+  return nativeTimelineScript() + codexAccountPanelScript() + interactionPanelScript() + "(" + installNativePanel.toString() + ")(false);";
+}
+
+export function installNativePanel(installDependencies = true) {
+  if (installDependencies) { installNativeTimeline(); installCodexAccountPanel(); installInteractionPanel(); }
     const bridge = () => window.hccHandoff, panel = document.getElementById('nativePanel'), draft = document.getElementById('nativeDraft');
     const tr = (key, fallback = '') => bridge().tr(key, fallback), esc = value => bridge().esc(String(value ?? ''));
     const events = new Map(), inflight = new Set(), responding = new Set();
-    let key = '', state = null, pending = null, observed = 0;
+    const accountPending = new Set(), accountReads = new Set();
+    const text = (en, zh) => ['zh','zh-CN'].includes(window.hccUi.language) ? zh : en;
+    const timeline = window.hccNativeTimelineView({ document, window, escape: esc, text });
+    let key = '', state = null, pending = null, observed = 0, approvalSignature = '';
+    const contextTools = window.hccCreateSessionTools({ document, window, prefix: 'native', bridge, draft, save: () => { save(); sync(); }, state: () => state, text, escape: esc });
     const storageKey = () => 'hcc.nativeDraft:' + JSON.stringify([bridge().projectRoot,bridge().active]) + (bridge().draftScope ? ':pane:' + JSON.stringify(bridge().draftScope) : '');
     function save() { if (key) window.hccUi.safeSet(key,JSON.stringify({text:draft.value,pending})); }
     function subject() { const b = bridge(); return {root:b.projectRoot,id:b.active,key:storageKey(),token:b.actionToken,epoch:b.epoch,generation:state?.generation,owner:state?.owner}; }
     const matches = target => target.root === bridge().projectRoot && target.id === bridge().active && (!target.generation || target.generation === state?.generation) && (!target.owner || target.owner === state?.owner);
+    const accountScope = target => JSON.stringify([target.key,target.generation,target.owner,target.sessionId]);
     const route = (target,name) => '/api/sessions/' + encodeURIComponent(target.id) + '/native/' + name + '?root=' + encodeURIComponent(target.root);
     function notice(message) { document.getElementById('nativeNotice').textContent = message || ''; }
     function sync() {
       const next = storageKey();
       if (next !== key) {
         key = next; state = null; pending = null; events.clear(); observed++; draft.value = '';
-        for (const id of ['nativeStatus','nativeIdentity','nativeReceipts','nativeEvents','nativeNotice','nativeApprovals']) document.getElementById(id).textContent = '';
+        approvalSignature = ''; timeline.reset(key);
+        for (const id of ['nativeStatus','nativeIdentity','nativeReceipts','nativeNotice','nativeApprovals']) document.getElementById(id).textContent = '';
         document.getElementById('nativeCloseConfirmed').checked = false;
+        document.getElementById('nativeAccount').open = false;
         try { const saved = JSON.parse(window.hccUi.safeGet(key) || '{}'); draft.value = saved.text || ''; pending = saved.pending || null; } catch (_) {}
       }
+      window.hccCodexAccount.render('native', state?.account, { supported: Boolean(state?.capabilities?.accountRead),
+        connected: Boolean(state?.connected), pending: accountPending.has(accountScope({ ...subject(), sessionId: state?.sessionId })) });
       const writable = bridge().session?.type === 'native' && bridge().canControl && state?.connected && !state.closing;
       const sending = inflight.has(key);
       document.getElementById('nativeSend').disabled = !writable || sending || !!pending || !draft.value.trim() || state?.quarantined || state?.capabilities?.send === false;
@@ -64,6 +87,8 @@ export function nativePanelScript() {
         button.disabled = !writable || responding.has(button.dataset.requestKey) || (button.dataset.decision === 'accept' && button.dataset.truncated === 'true');
       });
       if (pending) notice(tr('native.uncertain'));
+      contextTools.render();
+      window.hccRenderReportedMetrics({ document, prefix: 'native', state, text, escape: esc });
     }
     function acknowledge(target, submissionId) {
       let stored = {}; try { stored = JSON.parse(window.hccUi.safeGet(target.key) || '{}'); } catch (_) {}
@@ -83,49 +108,63 @@ export function nativePanelScript() {
       if (!value || bridge().session?.type !== 'native' || (value.peer !== bridge().session?.peer_id && value.peer !== bridge().active) || (value.root && value.root !== bridge().projectRoot)) return;
       if (Number.isSafeInteger(state?.generation) && Number.isSafeInteger(value.generation) && value.generation < state.generation) return;
       const replaced = state && (state.generation !== value.generation || state.owner !== value.owner);
-      if (replaced) { events.clear(); document.getElementById('nativeCloseConfirmed').checked = false; }
+      if (replaced) { events.clear(); approvalSignature = ''; notice(''); document.getElementById('nativeCloseConfirmed').checked = false; }
       if (state !== value) observed++;
       state = value;
+      const accountKey = accountScope({ ...subject(), sessionId: state.sessionId });
+      if (state.connected && state.capabilities?.accountRead && !accountReads.has(accountKey)) {
+        accountReads.add(accountKey);
+        if (accountReads.size > 100) accountReads.delete(accountReads.values().next().value);
+        void readAccount();
+      }
       for (const entry of value.events || []) events.set(entry.id,entry);
       while (events.size > 100) events.delete(events.keys().next().value);
+      const recent = [...events.values()].sort((a,b)=>a.id-b.id).map(entry => entry.payload || entry);
+      const metricEvent = recent.findLast(event => event.metrics), metadataEvent = recent.findLast(event => event.runtimeMetadata);
+      state = { ...state, metrics: state.metrics || metricEvent?.metrics, runtimeMetadata: state.runtimeMetadata || metadataEvent?.runtimeMetadata };
       document.getElementById('nativeStatus').textContent = tr('native.sameExecutor') + ' · ' + (state.provider || '') + ' · ' + tr('native.state.' + state.status, state.status || '');
       document.getElementById('nativeIdentity').textContent = [state.peer,state.sessionId,state.turnId].filter(Boolean).join(' · ');
-      document.getElementById('nativeReceipts').innerHTML = (state.deliveries || []).map(delivery => '<article class="native-receipt"><strong>#' + esc(delivery.message_id) + ' · ' + esc(tr('native.delivery.' + delivery.state,delivery.state)) + '</strong><div>' + esc(delivery.submission_id) + (delivery.turn_id ? ' · ' + esc(delivery.turn_id) : '') + '</div>' + (delivery.detail ? '<details><summary>' + esc(tr('details')) + '</summary><pre>' + esc(typeof delivery.detail === 'string' ? delivery.detail : JSON.stringify(delivery.detail,null,2)) + '</pre></details>' : '') + '</article>').join('') || '<p>' + esc(tr('native.noReceipts')) + '</p>';
-      document.getElementById('nativeEvents').innerHTML = [...events.values()].sort((a,b)=>a.id-b.id).map(entry => {
-        const event = entry.payload || entry;
-        const text = event.text || event.message || event.command || event.item?.aggregatedOutput || event.item?.command || event.diff || (event.plan ? JSON.stringify(event.plan,null,2) : '') || event.error?.message || '';
-        const label = ['output','message','delta'].includes(event.type) ? tr('native.output') : event.type === 'error' ? tr('native.error') : tr('native.event');
-        return text ? '<article class="native-event"><strong>' + esc(label) + '</strong><pre>' + esc(text) + '</pre></article>' : '';
-      }).join('') || '<p>' + esc(tr('native.noOutput')) + '</p>';
+      const receiptsHtml = (state.deliveries || []).map(delivery => '<article class="native-receipt"><strong>#' + esc(delivery.message_id) + ' · ' + esc(tr('native.delivery.' + delivery.state,delivery.state)) + '</strong><div>' + esc(delivery.submission_id) + (delivery.turn_id ? ' · ' + esc(delivery.turn_id) : '') + '</div>' + (delivery.detail ? '<details><summary>' + esc(tr('details')) + '</summary><pre>' + esc(typeof delivery.detail === 'string' ? delivery.detail : JSON.stringify(delivery.detail,null,2)) + '</pre></details>' : '') + '</article>').join('') || '<p>' + esc(tr('native.noReceipts')) + '</p>';
+      if (document.getElementById('nativeReceipts').innerHTML !== receiptsHtml) document.getElementById('nativeReceipts').innerHTML = receiptsHtml;
       const approvals = state.pendingApprovals || [], target = subject(), container = document.getElementById('nativeApprovals');
       const requestKey = request => JSON.stringify([target.root, target.id, state.executorId, request.requestId]);
-      const text = (en, zh) => ['zh','zh-CN'].includes(window.hccUi.language) ? zh : en;
-      window.hccInteractions.remember(container);
-      container.innerHTML = approvals.map((request, index) => '<article class="codex-card codex-approval"><h3>'
-        + esc(request.kind === 'userInput' ? text('Your input is required', '等待您的答复') : text('Approval required', '等待人工审批'))
-        + '</h3>' + window.hccInteractions.preview(request, requestKey(request), esc, text)
-        + (request.truncated ? '<p>' + esc(text('Truncated; cancel or decline only.', '参数已截断，只能取消或拒绝。')) + '</p>' : '')
-        + '<div class="hcc-interaction-form">' + window.hccInteractions.form(request, requestKey(request), esc, text) + '</div><div class="native-controls">'
-        + '<button data-response="' + index + '" data-decision="accept" data-truncated="' + window.hccInteractions.approvalBlocked(request) + '" data-request-key="' + esc(requestKey(request)) + '">' + esc(request.kind === 'userInput' ? text('Send answers', '提交答复') : request.kind === 'permissions' ? text('Grant selected permissions', '授予所选权限') : text('Approve once', '批准本次')) + '</button>'
-        + '<button data-response="' + index + '" data-decision="' + (request.kind === 'userInput' ? 'cancel' : 'decline') + '" data-request-key="' + esc(requestKey(request)) + '">' + esc(text('Decline / cancel', '拒绝 / 取消')) + '</button></div></article>').join('');
-      window.hccInteractions.restore(container);
-      container.querySelectorAll('button[data-response]').forEach(button => button.addEventListener('click', async () => {
-        if (!matches(target) || !bridge().canControl || responding.has(button.dataset.requestKey)) return;
-        const request = approvals[Number(button.dataset.response)], key = button.dataset.requestKey;
-        const version = observed;
-        responding.add(key); sync();
-        try {
-          const payload = window.hccInteractions.payload(request, ['permissions','userInput'].includes(request.kind) ? button.closest('article') : null, button.dataset.decision);
-          const result = await bridge().api(route(target, 'respond'), {method:'POST', body:JSON.stringify({
-            executorId:request.executorId, sessionId:request.sessionId, turnId:request.turnId, requestId:request.requestId,
-            ...payload, action_token:bridge().actionToken, epoch:bridge().epoch })});
-          window.hccInteractions.forget(key);
-          if (matches(target) && version === observed) { if (result.state) render(result.state); else void read(); }
-        } catch(error) {
-          if (matches(target) && (state?.pendingApprovals || []).some(current => current.requestId === request.requestId && current.executorId === request.executorId)) notice(error.detail || error.message);
-        }
-        finally { responding.delete(key); sync(); }
-      }));
+      const nextApprovalSignature = JSON.stringify([target.root, target.id, state.executorId, state.generation, state.owner, approvals, window.hccUi.language]);
+      if (approvalSignature !== nextApprovalSignature) {
+        window.hccInteractions.remember(container);
+        container.innerHTML = approvals.map((request, index) => '<article class="codex-card codex-approval"><h3>'
+          + esc(window.hccInteractions.requiresInput(request) ? text('Your input is required', '等待您的答复') : text('Approval required', '等待人工审批'))
+          + '</h3>' + window.hccInteractions.preview(request, requestKey(request), esc, text)
+          + (request.truncated ? '<p>' + esc(text('Truncated; cancel or decline only.', '参数已截断，只能取消或拒绝。')) + '</p>' : '')
+          + '<div class="hcc-interaction-form">' + window.hccInteractions.form(request, requestKey(request), esc, text) + '</div><div class="native-controls">'
+          + '<button data-response="' + index + '" data-decision="accept" data-truncated="' + window.hccInteractions.approvalBlocked(request) + '" data-request-key="' + esc(requestKey(request)) + '">' + esc(window.hccInteractions.acceptLabel(request, text)) + '</button>'
+          + '<button data-response="' + index + '" data-decision="' + (request.kind === 'userInput' ? 'cancel' : 'decline') + '" data-request-key="' + esc(requestKey(request)) + '">' + esc(request.kind === 'mcp' ? text('Decline', '拒绝') : text('Decline / cancel', '拒绝 / 取消')) + '</button>'
+          + (request.kind === 'mcp' ? '<button data-response="' + index + '" data-decision="cancel" data-request-key="' + esc(requestKey(request)) + '">' + esc(text('Cancel request', '取消请求')) + '</button>' : '') + '</div></article>').join('');
+        window.hccInteractions.restore(container);
+        container.querySelectorAll('button[data-response]').forEach(button => button.addEventListener('click', async () => {
+          if (!matches(target) || !bridge().canControl || responding.has(button.dataset.requestKey)) return;
+          const request = approvals[Number(button.dataset.response)], key = button.dataset.requestKey;
+          const version = observed;
+          notice(''); responding.add(key); sync();
+          let authorization;
+          try {
+            const payload = window.hccInteractions.payload(request, ['permissions','userInput','mcp'].includes(request.kind) ? button.closest('article') : null, button.dataset.decision);
+            authorization = window.hccInteractions.prepareUrl(request, button.dataset.decision, text);
+            const result = await bridge().api(route(target, 'respond'), {method:'POST', body:JSON.stringify({
+              executorId:request.executorId, sessionId:request.sessionId, turnId:request.turnId, requestId:request.requestId,
+              ...payload, action_token:bridge().actionToken, epoch:bridge().epoch })});
+            window.hccInteractions.forget(key);
+            const opened = authorization?.complete();
+            if (opened && matches(target)) notice(opened);
+            if (matches(target) && version === observed) { if (result.state) render(result.state); else void read(); }
+          } catch(error) {
+            authorization?.cancel();
+            if (matches(target) && (state?.pendingApprovals || []).some(current => current.requestId === request.requestId && current.executorId === request.executorId)) notice(error.detail || error.message);
+          }
+          finally { responding.delete(key); sync(); }
+        }));
+        approvalSignature = nextApprovalSignature;
+      }
+      timeline.render([...events.values()].sort((a,b)=>a.id-b.id), state, JSON.stringify([key,state.generation,state.owner]));
       if (pending && (state.deliveries || []).some(delivery => delivery.submission_id === pending.id && delivery.message_id)) acknowledge(subject(),pending.id);
       sync();
     }
@@ -137,6 +176,18 @@ export function nativePanelScript() {
         if (matches(target) && version === observed) render(result.state || result);
       } catch (error) { if (matches(target)) notice(error.detail || error.message); }
     }
+    async function readAccount() {
+      if (!state?.connected || !state.sessionId || !state.capabilities?.accountRead || accountPending.has(accountScope({ ...subject(), sessionId: state.sessionId }))) return;
+      const target = { ...subject(), sessionId: state.sessionId }, version = observed;
+      const scope = accountScope(target); accountPending.add(scope); sync();
+      try {
+        const query = new URLSearchParams({ generation: target.generation, owner: target.owner, sessionId: target.sessionId });
+        const result = await bridge().api(route(target,'account') + '&' + query);
+        if (matches(target) && version === observed) render(result.state || result);
+      } catch (error) { if (matches(target) && version === observed) notice(error.detail || error.message); }
+      finally { accountPending.delete(scope); if (target.root === bridge().projectRoot && target.id === bridge().active) sync(); }
+    }
+    document.getElementById('nativeAccountRead').addEventListener('click', readAccount);
     draft.addEventListener('input',()=>{ save(); sync(); });
     document.getElementById('nativeSend').addEventListener('click',async()=>{
       sync(); if (document.getElementById('nativeSend').disabled) return;
@@ -173,5 +224,4 @@ export function nativePanelScript() {
     });
     window.addEventListener('hcc:preferences',()=>{if(state&&!panel.hidden)render(state);});
     window.hccNative={render,sync,read};
-  })();`;
 }

package/lib/web/ui-review.mjs

@@ -42,8 +42,10 @@ export function reviewPanelHtml() {
   </div></div>`;
 }
 
-export function reviewPanelScript() {
-  return String.raw`(() => {
+export function reviewPanelScript() { return '(' + installReview.toString() + ')();'; }
+
+export function installReview() {
+(() => {
     const dialog = document.getElementById('reviewDialog'), form = document.getElementById('verificationForm');
     const bridge = () => window.hccHandoff, tr = (key, fallback = '') => bridge().tr(key, fallback), esc = value => bridge().esc(String(value ?? ''));
     let target = null, data = null, generation = 0, busy = false;
@@ -128,5 +130,5 @@ export function reviewPanelScript() {
     document.getElementById('reviewClose').addEventListener('click', () => bridge().closeDialog(dialog));
     window.addEventListener('hcc:preferences', () => { if (!dialog.hidden) render(); });
     window.hccReview = { open,sync,reset() { generation++; busy = false; target = null; if (!dialog.hidden) bridge().closeDialog(dialog); } };
-  })();`;
+  })();
 }