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

package/lib/web/ui-files.mjs

@@ -0,0 +1,231 @@
+import { createSafeMarkdown } from './ui-safe-markdown.mjs';
+import { createFileWrites, fileWritesCss, fileUploadHtml, fileEditorHtml } from './ui-file-writes.mjs';
+
+const escape = value => String(value).replace(/[&<>"']/g, character => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' }[character]));
+export function renderFileMarkdown(content) {
+  const markdown = createSafeMarkdown(escape), parts = [];
+  let prose = [], code = null, fence = '';
+  for (const line of String(content).split('\n')) {
+    const marker = /^\s{0,3}(`{3,}|~{3,})(.*)$/.exec(line);
+    if (!code && marker) {
+      if (prose.length) parts.push(markdown(prose.join('\n')));
+      prose = []; code = []; fence = marker[1];
+    } else if (code && marker && marker[1][0] === fence[0] && marker[1].length >= fence.length && !marker[2].trim()) {
+      parts.push('<pre><code>' + escape(code.join('\n')) + '</code></pre>'); code = null;
+    } else (code || prose).push(line);
+  }
+  if (code) parts.push('<pre><code>' + escape(code.join('\n')) + '</code></pre>');
+  if (prose.length) parts.push(markdown(prose.join('\n')));
+  return parts.join('');
+}
+
+export function staticPreviewCss(value) {
+  const css = String(value).replace(/\/\*[\s\S]*?\*\//g, '');
+  // Escape sequences and resource-bearing CSS are omitted rather than decoded
+  // into a second URL language. The preview CSP independently blocks requests.
+  const resourceSyntax = /\\|url\s*\(|@import|@font-face|image-set\s*\(|expression\s*\(|behavior\s*:|-moz-binding|https?:/i;
+  return resourceSyntax.test(css) ? '' : css;
+}
+
+export function staticPreviewNode(node) {
+  if (node.nodeType === 3) return escape(node.textContent || '');
+  if (node.nodeType !== 1 || (node.namespaceURI && node.namespaceURI !== 'http://www.w3.org/1999/xhtml')) return '';
+  const tag = String(node.localName).toLowerCase();
+  if (['script','iframe','object','embed','link','meta','base','title','template','noscript','svg','math','form','input','select','textarea','button','audio','video','source'].includes(tag)) return '';
+  if (tag === 'style') return '<style>' + staticPreviewCss(node.textContent).replace(/</g, '\\3c ') + '</style>';
+  const body = [...(node.childNodes || [])].map(staticPreviewNode).join('');
+  if (!['html','head','body','main','article','section','header','footer','nav','aside','div','span','p','h1','h2','h3','h4','h5','h6','ul','ol','li','dl','dt','dd','table','thead','tbody','tfoot','tr','th','td','caption','colgroup','col','pre','code','blockquote','strong','em','b','i','u','s','small','sub','sup','br','hr','img','a','figure','figcaption','details','summary','time'].includes(tag)) return body;
+  if (['html','head','body'].includes(tag)) return body;
+  const attrs = [];
+  for (const attr of [...(node.attributes || [])]) {
+    const name = attr.name.toLowerCase();
+    if (['id','class','title','alt','width','height','colspan','rowspan','scope','dir','lang'].includes(name)) attrs.push(name + '="' + escape(attr.value) + '"');
+    else if (name === 'style') { const css = staticPreviewCss(attr.value); if (css) attrs.push('style="' + escape(css) + '"'); }
+    else if (tag === 'img' && name === 'src' && /^data:image\/(?:png|jpeg|gif|webp);base64,[A-Za-z0-9+/=\s]+$/i.test(attr.value)) attrs.push('src="' + escape(attr.value) + '"');
+  }
+  return '<' + tag + (attrs.length ? ' ' + attrs.join(' ') : '') + '>' + body + (['br','hr','img','col'].includes(tag) ? '' : '</' + tag + '>');
+}
+
+export function staticHtmlPreview(content, document) {
+  // Template contents are inert: parsing cannot start a subresource fetch or
+  // execute a script. Rebuild the output rather than trusting the original DOM.
+  const template = document.createElement('template'); template.innerHTML = String(content);
+  const body = [...template.content.childNodes].map(staticPreviewNode).join('');
+  const csp = "default-src 'none'; script-src 'none'; style-src 'unsafe-inline'; img-src data:; font-src 'none'; connect-src 'none'; media-src 'none'; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'";
+  return '<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="' + escape(csp)
+    + '"><meta name="referrer" content="no-referrer"><style>body{margin:20px;overflow-wrap:anywhere}img{max-width:100%;height:auto}pre{white-space:pre-wrap}</style></head><body>' + body + '</body></html>';
+}
+
+export const filesCss = `
+  ${fileWritesCss}
+  .files-dialog { width:min(1180px,96vw); height:min(850px,92dvh); max-width:none; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
+  .files-project,.files-meta { color:var(--muted); font-size:var(--small-font); overflow-wrap:anywhere; margin:0; }
+  .files-layout { flex:1; min-height:0; display:grid; grid-template-columns:minmax(220px,29%) minmax(0,1fr); gap:12px; }
+  .files-browser,.files-view { min-width:0; min-height:0; display:flex; flex-direction:column; gap:8px; }
+  .files-browser { border-right:1px solid var(--border); padding-right:12px; }
+  .files-path-form,.files-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
+  .files-path-form input { min-width:0; flex:1; }
+  .files-entries { overflow:auto; flex:1; min-height:0; display:flex; flex-direction:column; gap:4px; }
+  .files-entries button { height:auto; min-height:36px; width:100%; text-align:left; overflow-wrap:anywhere; flex:none; }
+  .files-entries button[aria-current="true"] { background:var(--selection-bg); border-color:var(--accent); }
+  .files-preview { flex:1; min-width:0; min-height:0; overflow:auto; border:1px solid var(--border); border-radius:8px; padding:12px; }
+  .files-preview pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:var(--small-font)/1.6 var(--mono); }
+  .files-preview img { display:block; max-width:100%; height:auto; margin:auto; }
+  .files-preview iframe { border:0; width:100%; height:100%; min-height:350px; background:white; }
+  .files-preview:has(iframe) { padding:0; }
+  .files-preview .codex-markdown { max-width:850px; margin:auto; }
+  #filesBack { display:none; }
+  .files-dialog [hidden] { display:none!important; }
+  .files-dialog[data-main-window-required="true"] .files-layout { grid-template-columns:1fr; }
+  .files-dialog[data-main-window-required="true"] .files-browser,.files-dialog[data-main-window-required="true"] .files-toolbar { display:none; }
+  @media(max-width:700px) {
+    .files-dialog { width:96vw; height:94dvh; padding:12px; }
+    .files-layout { display:flex; }
+    .files-browser,.files-view { flex:1; }
+    .files-browser { border:0; padding:0; }
+    .files-dialog[data-mobile-view="tree"] .files-view { display:none; }
+    .files-dialog[data-mobile-view="preview"] .files-browser { display:none; }
+    #filesBack { display:inline-flex; }
+    .files-toolbar button,.files-entries button { min-height:44px; }
+  }
+`;
+
+export function filesHtml() {
+  return `<div class="dialog-overlay" id="filesDialog" role="dialog" aria-modal="true" aria-labelledby="filesTitle" hidden><section class="dialog files-dialog" id="filesPanel" data-mobile-view="tree">
+    <header class="dialog-heading"><h3 id="filesTitle" data-i18n="files.title">Project files</h3><button id="filesClose" type="button" data-i18n-aria="close" aria-label="Close">×</button></header>
+    <p class="files-project" id="filesProject"></p><p class="dialog-help" data-i18n="files.readOnly">Preview, upload and edit project files. File contents are not sent to an Agent.</p>
+    <div class="files-layout"><section class="files-browser">
+      <form class="files-path-form" id="filesPathForm"><input id="filesPath" type="text" autocomplete="off" data-i18n-aria="files.path" aria-label="Project relative directory"><button id="filesGo" type="submit" data-i18n="files.go">Go</button></form>
+      <div class="files-toolbar"><button id="filesUp" type="button" data-i18n="files.up">Parent directory</button><button id="filesRefresh" type="button" data-i18n="refresh">Refresh</button></div>
+      ${fileUploadHtml()}
+      <p class="dialog-help" id="filesTreeStatus" role="status"></p><div class="files-entries" id="filesEntries" data-i18n-aria="files.title" aria-label="Project files"></div>
+    </section><section class="files-view">
+      <div class="files-toolbar"><button id="filesBack" type="button" data-i18n="files.back">Back to files</button><strong id="filesName"></strong><button id="filesSourceBtn" type="button" data-i18n="files.source" aria-pressed="false" hidden>Source</button><button id="filesReload" type="button" data-i18n="refresh" hidden>Refresh</button><a id="filesDownload" data-i18n="files.download" hidden>Download PDF</a></div>
+      <p class="files-meta" id="filesMeta"></p><p class="dialog-help" id="filesPreviewStatus" role="status"></p>${fileEditorHtml()}<div class="files-preview" id="filesPreview" tabindex="0"></div>
+    </section></div>
+  </section></div>`;
+}
+
+export function installFiles(browser = globalThis) {
+  const { window, document } = browser, bridge = window.hccHandoff, byId = id => document.getElementById(id);
+  const dialog = byId('filesDialog'), panel = byId('filesPanel'), preview = byId('filesPreview');
+  const tr = key => bridge.tr(key);
+  let revision = 0, treeSequence = 0, fileSequence = 0, root = '', rootIdentity = '', directory = '', selected = '', value = null, source = false;
+  const urls = new Set();
+  const writes = createFileWrites({browser,
+    context:()=>({root,identity:rootIdentity,directory,path:selected,value,hidden:dialog.hidden,visit:revision+':'+fileSequence}),
+    updated:next=>{value=next;render();writes.select();},
+    uploaded:path=>{void tree(directory);void openFile(path);}
+  });
+  const current = visit => !dialog.hidden && visit === revision && root === bridge.projectRoot && rootIdentity === (bridge.projectIdentity || '');
+  function release() { for (const url of urls) browser.URL.revokeObjectURL(url); urls.clear(); }
+  function clearPreview() {
+    writes.suspend();
+    preview.replaceChildren(); release(); value = null;
+    for (const id of ['filesName','filesMeta','filesPreviewStatus']) byId(id).textContent = '';
+    for (const id of ['filesSourceBtn','filesReload','filesDownload']) byId(id).hidden = true;
+    byId('filesDownload').removeAttribute('href');
+  }
+  function blobUrl(content, mime) {
+    const bytes = browser.Uint8Array.from(browser.atob(content), character => character.charCodeAt(0));
+    const url = browser.URL.createObjectURL(new browser.Blob([bytes], { type:mime })); urls.add(url); return url;
+  }
+  function render() {
+    if (!value) return;
+    preview.replaceChildren(); release();
+    const download = byId('filesDownload'); download.hidden = true; download.removeAttribute('href');
+    byId('filesName').textContent = value.name || value.path;
+    byId('filesMeta').textContent = value.path + ' · ' + (Number.isFinite(value.size) ? value.size + ' bytes' : '');
+    const textual = value.encoding === 'utf8' && ['text','markdown','html'].includes(value.kind);
+    const sourceOnly = value.kind === 'html' && value.truncated;
+    byId('filesSourceBtn').hidden = !textual || value.kind === 'text' || sourceOnly;
+    byId('filesSourceBtn').setAttribute('aria-pressed',String(source));
+    byId('filesSourceBtn').textContent = tr(source ? 'files.rendered' : 'files.source');
+    byId('filesReload').hidden = false;
+    byId('filesPreviewStatus').textContent = [value.truncated ? tr('files.truncated') : '',
+      value.kind === 'html' ? tr('files.htmlLimit') : value.kind === 'pdf' ? tr('files.pdfHelp') : ''].filter(Boolean).join(' ');
+    if (textual && (source || sourceOnly || value.kind === 'text')) {
+      const pre = document.createElement('pre'); pre.textContent = value.content || ''; preview.appendChild(pre);
+    } else if (value.kind === 'markdown' && textual) {
+      preview.innerHTML = renderFileMarkdown(value.content || '');
+    } else if (value.kind === 'html' && textual) {
+      const frame = document.createElement('iframe'); frame.id = 'filesFrame'; frame.title = tr('files.staticHtml');
+      frame.setAttribute('sandbox',''); frame.referrerPolicy = 'no-referrer'; frame.srcdoc = staticHtmlPreview(value.content || '',document); preview.appendChild(frame);
+    } else if (value.kind === 'image' && value.encoding === 'base64' && /^image\/(png|jpeg|gif|webp)$/.test(value.mime)) {
+      const img = document.createElement('img'); img.alt = value.name || value.path; img.src = blobUrl(value.content,value.mime); preview.appendChild(img);
+    } else if (value.kind === 'pdf' && value.encoding === 'base64' && value.mime === 'application/pdf' && browser.atob(value.content.slice(0,8)).startsWith('%PDF-')) {
+      const url = blobUrl(value.content,'application/pdf');
+      const frame = document.createElement('iframe'); frame.id = 'filesFrame'; frame.title = value.name || 'PDF';
+      frame.referrerPolicy = 'no-referrer'; frame.src = url; preview.appendChild(frame);
+      download.href = url; download.download = value.name || 'document.pdf'; download.hidden = false;
+    } else preview.textContent = tr('files.unsupported');
+    writes.sync();
+  }
+  async function tree(path = '') {
+    if (bridge.draftScope === 'auxiliary') return;
+    const visit = revision, sequence = ++treeSequence;
+    directory = path; byId('filesPath').value = path; byId('filesUp').disabled = !path;
+    writes.sync();
+    byId('filesTreeStatus').textContent = tr('files.loading'); byId('filesEntries').replaceChildren();
+    try {
+      const result = await bridge.api('/api/files/tree?path=' + encodeURIComponent(path));
+      if (!current(visit) || sequence !== treeSequence) return;
+      directory = result.path || ''; byId('filesPath').value = directory; byId('filesUp').disabled = !directory;
+      writes.sync();
+      const entries = Array.isArray(result.entries) ? result.entries : [];
+      byId('filesTreeStatus').textContent = result.truncated ? tr('files.treeTruncated') : entries.length ? '' : tr('files.empty');
+      for (const entry of entries) {
+        if (!['file','directory'].includes(entry.type) || typeof entry.path !== 'string') continue;
+        const button = document.createElement('button'); button.type = 'button'; button.dataset.filePath = entry.path; button.dataset.fileType = entry.type;
+        button.textContent = (entry.type === 'directory' ? '▸ ' : '') + entry.name;
+        button.setAttribute('aria-current',String(entry.path === selected));
+        button.addEventListener('click', () => entry.type === 'directory' ? tree(entry.path) : openFile(entry.path));
+        byId('filesEntries').appendChild(button);
+      }
+    } catch (error) { if (current(visit) && sequence === treeSequence) byId('filesTreeStatus').textContent = error.detail || error.message; }
+  }
+  async function openFile(path) {
+    if (bridge.draftScope === 'auxiliary') return;
+    const visit = revision, sequence = ++fileSequence;
+    selected = path; source = false; clearPreview(); panel.dataset.mobileView = 'preview';
+    for (const button of byId('filesEntries').children) button.setAttribute('aria-current',String(button.dataset.filePath === path));
+    byId('filesName').textContent = path; byId('filesPreviewStatus').textContent = tr('files.loading');
+    byId('filesReload').hidden = false;
+    try {
+      const result = await bridge.api('/api/files/preview?path=' + encodeURIComponent(path));
+      if (!current(visit) || sequence !== fileSequence) return;
+      value = result; render(); writes.select();
+    } catch (error) { if (current(visit) && sequence === fileSequence) { byId('filesPreviewStatus').textContent = error.detail || error.message; writes.select(); } }
+  }
+  function closed() { revision++; treeSequence++; fileSequence++; clearPreview(); }
+  function reset() { closed(); if (!dialog.hidden) bridge.closeDialog(dialog); }
+  function open(path = '') {
+    if (bridge.draftScope === 'auxiliary') {
+      try {
+        if (window.parent !== window && window.parent.hccHandoff?.projectRoot === bridge.projectRoot && window.parent.hccHandoff?.projectIdentity === bridge.projectIdentity && window.parent.hccFiles) {
+          window.parent.hccFiles.open(path); return;
+        }
+      } catch { /* A detached or cross-origin parent cannot accept this request. */ }
+      closed(); root = bridge.projectRoot; panel.dataset.mobileView = 'preview';
+      panel.dataset.mainWindowRequired = 'true';
+      byId('filesProject').textContent = root; preview.textContent = tr('files.mainWindowRequired');
+      bridge.openDialog(dialog,byId('filesClose')); return;
+    }
+    delete panel.dataset.mainWindowRequired;
+    closed(); root = bridge.projectRoot; rootIdentity = bridge.projectIdentity || ''; directory = ''; selected = ''; panel.dataset.mobileView = path ? 'preview' : 'tree';
+    byId('filesProject').textContent = root; bridge.openDialog(dialog,byId('filesPath'));
+    void tree(path ? path.split('/').slice(0,-1).join('/') : '');
+    if (path) void openFile(path); else preview.textContent = tr('files.select');
+  }
+  byId('filesBtn').addEventListener('click',() => open());
+  byId('filesClose').addEventListener('click',() => bridge.closeDialog(dialog));
+  byId('filesPathForm').addEventListener('submit',event => { event.preventDefault(); void tree(byId('filesPath').value.trim().replace(/^\.\/?$/,'')); });
+  byId('filesUp').addEventListener('click',() => tree(directory.split('/').slice(0,-1).join('/')));
+  byId('filesRefresh').addEventListener('click',() => tree(directory));
+  byId('filesReload').addEventListener('click',() => selected && openFile(selected));
+  byId('filesBack').addEventListener('click',() => { panel.dataset.mobileView = 'tree'; byId('filesPath').focus(); });
+  byId('filesSourceBtn').addEventListener('click',() => { source = !source; render(); });
+  window.addEventListener('hcc:preferences',() => { if (!dialog.hidden) render(); });
+  window.addEventListener('pagehide',closed);
+  window.hccFiles = { open,closed,reset };
+}

package/lib/web/ui-handoff.mjs

@@ -74,7 +74,13 @@ export const handoffCss = `
   .main > #codexPanel { flex:1; min-height:0; height:auto !important; }
   .handoff-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--border); background:var(--panel); }
   .handoff-status { flex:1 1 220px; font-size:12px; color:var(--muted); }
-  .handoff-detail { width:100%; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
+  .handoff-detail { flex:0 1 auto; min-width:0; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
+  .handoff-detail > summary { cursor:pointer; padding:6px 0; }
+  .handoff-detail[open] { flex-basis:100%; }
+  .handoff-detail[open] > summary { margin-bottom:4px; }
+  .active-identity { display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 10px; margin:8px 0; }
+  .active-identity dt { color:var(--muted); }
+  .active-identity dd { margin:0; color:var(--text); font-family:var(--mono); overflow-wrap:anywhere; }
   .handoff-bar button { height:30px; font-size:12px; }
   .terminal-composer { display:grid; gap:6px; padding:10px 12px; border-top:1px solid var(--border); background:var(--panel); }
   .terminal-composer textarea { width:100%; min-height:64px; max-height:160px; resize:vertical; font:inherit; border:1px solid var(--border); border-radius:6px; padding:8px; background:var(--input-bg); color:var(--text); }
@@ -90,7 +96,7 @@ export function handoffBarHtml() {
     <button id="claimControlBtn" type="button" data-i18n="handoff.claim">Take control</button>
     <button id="releaseControlBtn" type="button" data-i18n="handoff.release" hidden>Release control</button>
     <button id="reconnectBtn" type="button" data-i18n="handoff.reconnect">Reconnect</button>
-    <details class="handoff-detail"><summary id="handoffHelp">Attachment details</summary><div id="handoffDetail"></div></details>
+    <details class="handoff-detail" id="activeDetails"><summary id="handoffHelp">Session details</summary><div id="activeTask" hidden></div><dl class="active-identity" id="activeIdentity"></dl><div id="handoffDetail"></div></details>
   </div>`;
 }
 
@@ -100,3 +106,5 @@ export function terminalComposerHtml() {
     <div class="composer-actions"><span class="composer-note" id="draftStatus" role="status" aria-live="polite"></span><button id="reviewDraftBtn" type="button" data-i18n="handoff.review" hidden>Reviewed; keep draft</button><button class="primary" id="sendDraftBtn" type="submit" data-i18n="handoff.send">Send + Enter</button></div>
   </form>`;
 }
+
+export function installHandoff() { const window = globalThis.window; window.hccHandoffStore = createHandoffStore((() => { try { return window.localStorage; } catch { return null; } })(), { scope: window.hccUi?.draftScope || window.hccDraftScope || '' }); }

package/lib/web/ui-history.mjs

@@ -1,118 +1,188 @@
+import { nativeTimeline } from './ui-native-timeline.mjs';
+
 export function codexHistoryHtml() {
   return `<div class="dialog-overlay" id="historyDialog" role="dialog" aria-modal="true" aria-labelledby="historyTitle" hidden>
     <div class="dialog auxiliary-dialog">
-      <header class="dialog-heading"><h3 id="historyTitle" data-i18n="history.title">Codex history</h3><button id="historyClose" type="button" data-i18n-aria="close" aria-label="Close">×</button></header>
-      <p class="dialog-help" data-i18n="history.help">Browse saved history, then explicitly resume or fork it in a separate executor.</p>
-      <p id="historyNotice" class="dialog-help" role="status" aria-live="polite"></p>
+      <header class="dialog-heading"><h3 id="historyTitle" data-i18n="history.title">History</h3><button id="historyClose" type="button" data-i18n-aria="close" aria-label="Close">×</button></header>
+      <div class="session-tool-row"><label><span data-i18n="history.source">Source</span> <select id="historySource"><option value="native" data-i18n="history.native">HCC retained history</option><option value="codex" data-i18n="history.codex">Codex saved threads</option></select></label>
+        <label id="historyProviderField"><span data-i18n="agent.provider">Agent</span> <select id="historyProvider"><option value="all" data-i18n="history.allProviders">All providers</option><option value="codex">Codex</option><option value="claude">Claude</option><option value="dsh">DeepSeek Harness</option></select></label></div>
+      <p class="dialog-help" id="historyHelp"></p><p id="historyNotice" class="dialog-help" role="status" aria-live="polite"></p>
+      <p id="historyUnverified" class="dialog-help" role="status" aria-live="polite"></p>
       <div class="history-layout"><div class="history-list"><button id="historyRefresh" type="button" data-i18n="refresh">Refresh</button><div id="historyThreads"></div><button id="historyMore" type="button" data-i18n="history.more" hidden>Load more</button></div>
-        <div class="history-preview"><h4 id="historySelected"></h4><div id="historyContent"></div>
-          <label class="confirmation-row"><input id="historyConfirmed" type="checkbox"><span data-i18n="history.confirm">I checked the original executor. Opening starts a separate executor; resuming the same thread requires stopping the original.</span></label>
+        <div class="history-preview"><h4 id="historySelected"></h4><p id="historyIdentity" class="dialog-help"></p><p id="historyRetention" class="dialog-help"></p>
+          <p id="historyResumeReason" class="dialog-help"></p>
+          <label class="confirmation-row"><input id="historyConfirmed" type="checkbox"><span id="historyConfirmLabel"></span></label>
           <div class="btns"><button id="historyResume" type="button" data-i18n="history.resume" disabled>Resume in a new executor</button><button id="historyFork" type="button" data-i18n="history.fork" disabled>Fork into a new executor</button></div>
+          <div class="session-tool-row" id="historyEventControls" hidden><button id="historyEventsPrevious" type="button" data-i18n="history.previousEvents">Previous events</button><span id="historyEventPage"></span><button id="historyEventsNext" type="button" data-i18n="history.nextEvents">Next events</button><button id="historyEventsReload" type="button" data-i18n="refresh">Refresh</button><label><span data-i18n="history.view">View</span> <select id="historyNativeView"><option value="conversation" data-i18n="history.output">Recorded output</option><option value="trace" data-i18n="history.trace">Event trace</option></select></label></div>
+          <div id="historyContent"></div><details id="historyReceipts" hidden><summary data-i18n="history.receipts">Recent delivery receipts</summary><pre id="historyReceiptContent"></pre></details>
         </div></div>
     </div>
   </div>`;
 }
 
-export function codexHistoryScript() {
-  return String.raw`(() => {
-    const dialog = document.getElementById('historyDialog');
-    const bridge = () => window.hccHandoff;
-    const tr = (key, fallback = '') => bridge().tr(key, fallback);
-    const esc = value => bridge().esc(String(value ?? ''));
-    let root = '', entries = [], cursor = null, selected = null, busy = false, generation = 0;
-    const same = (project, version) => project === root && project === bridge().projectRoot && version === generation && !dialog.hidden;
-    const route = (path, project = root) => path + (path.includes('?') ? '&' : '?') + 'root=' + encodeURIComponent(project);
-    function notice(value) { document.getElementById('historyNotice').textContent = value || ''; }
-    function liveSources() {
-      return (bridge().sessions || []).filter(session => session.status === 'running' && session.binding?.provider === 'codex' && session.binding.provider_session_id === selected?.id);
-    }
-    function controlsSource(sources) { return sources.every(session => session.id === bridge().active && bridge().canControl); }
-    function sync() {
-      const confirmed = document.getElementById('historyConfirmed').checked;
-      const sources = liveSources(), unavailable = busy || !selected || !confirmed || root !== bridge().projectRoot;
-      document.getElementById('historyResume').disabled = unavailable || sources.length > 0;
-      document.getElementById('historyFork').disabled = unavailable || !controlsSource(sources);
-      if (!busy && sources.length) notice(tr(controlsSource(sources) ? 'history.stopOriginal' : 'history.sourceControlRequired'));
-      document.getElementById('historyRefresh').disabled = busy;
-      document.getElementById('historyMore').hidden = !cursor;
-      document.getElementById('historyMore').disabled = busy;
-    }
-    function renderList() {
-      const container = document.getElementById('historyThreads');
-      container.innerHTML = entries.map(entry => '<button type="button" class="history-thread" data-thread="' + esc(entry.id) + '" aria-pressed="' + (entry.id === selected?.id) + '"><strong>' + esc(entry.name || entry.preview || entry.id) + '</strong><span>' + esc(entry.id) + '</span><span>' + esc(entry.cwd || '') + '</span></button>').join('') || '<p class="dialog-help">' + esc(tr('history.empty')) + '</p>';
-      container.querySelectorAll('[data-thread]').forEach(button => button.addEventListener('click', () => select(button.dataset.thread)));
-      sync();
-    }
-    async function load(more = false) {
-      if (busy || !root) return;
-      const project = root, version = ++generation;
-      busy = true; notice(tr('history.loading')); sync();
-      try {
-        const result = await bridge().api(route('/api/codex/threads' + (more && cursor ? '?cursor=' + encodeURIComponent(cursor) : ''), project));
-        if (!same(project, version)) return;
-        const incoming = Array.isArray(result.threads) ? result.threads : [];
-        entries = [...new Map((more ? entries.concat(incoming) : incoming).map(entry => [entry.id, entry])).values()];
-        cursor = result.nextCursor || null;
-        notice(''); renderList();
-      } catch (error) { if (same(project, version)) notice(error.detail || error.message); }
-      finally { if (project === root && version === generation) { busy = false; sync(); } }
-    }
-    async function select(id) {
-      if (busy) return;
-      const project = root, version = ++generation;
-      selected = entries.find(entry => entry.id === id) || { id };
-      document.getElementById('historyConfirmed').checked = false;
-      document.getElementById('historySelected').textContent = selected.name || selected.preview || id;
-      document.getElementById('historyContent').textContent = '';
-      busy = true; renderList(); notice(tr('history.loading'));
-      try {
-        const result = await bridge().api(route('/api/codex/threads/' + encodeURIComponent(id), project));
-        if (!same(project, version)) return;
-        selected = result.thread || selected;
-        renderPreview();
-        notice('');
-      } catch (error) { if (same(project, version)) notice(error.detail || error.message); }
-      finally { if (project === root && version === generation) { busy = false; sync(); } }
-    }
-    function renderPreview() {
-        document.getElementById('historyContent').innerHTML = (selected?.turns || []).map(turn => '<section class="history-turn"><strong>' + esc(turn.status || '') + '</strong>' + (turn.items || []).map(item => {
-          const content = Array.isArray(item.content) ? item.content.map(part => part.text || '').join('\n') : item.text || item.command || item.aggregatedOutput || '';
-          const label = item.type === 'userMessage' ? tr('history.user') : item.type === 'agentMessage' ? tr('history.assistant') : item.type === 'commandExecution' ? tr('history.command') : item.type === 'fileChange' ? tr('history.files') : tr('history.event');
-          return '<article><strong>' + esc(label) + '</strong><pre>' + esc(content || (item.changes ? JSON.stringify(item.changes, null, 2) : '')) + '</pre></article>';
-        }).join('') + '</section>').join('') || '<p class="dialog-help">' + esc(tr('history.noTurns')) + '</p>';
-    }
-    async function reopen(fork) {
-      if (busy || !selected || !document.getElementById('historyConfirmed').checked || root !== bridge().projectRoot) return;
-      const sources = liveSources();
-      if (sources.length && (!fork || !controlsSource(sources))) { sync(); return; }
-      const project = root, threadId = selected.id, version = ++generation;
-      const input = fork ? { confirmed: true, ...(sources.length ? { actionToken: bridge().actionToken, epoch: bridge().epoch } : {}) } : { kind: 'codex', transport: 'app-server', mode: 'resume', resume: threadId, handoffConfirmed: true };
-      busy = true; sync(); notice(tr('history.opening'));
-      try {
-        const result = await bridge().api(fork ? route('/api/codex/threads/' + encodeURIComponent(threadId) + '/fork', project) : route('/api/sessions', project), {
-          method: 'POST', body: JSON.stringify(input)
-        });
-        if (project !== bridge().projectRoot) return;
-        await bridge().refreshSessions();
-        if (!same(project, version)) return;
-        bridge().closeDialog(dialog);
-        if (result.session?.id) bridge().openManaged(result.session.id);
-      } catch (error) { if (same(project, version)) notice((error.detail || error.message) + (error.code ? ' [' + error.code + ']' : '') + ' ' + tr('history.checkSessions')); }
-      finally { if (project === root && version === generation) { busy = false; sync(); } }
+export function codexHistoryScript() { return '(' + installHistory.toString() + ')(globalThis,(' + nativeTimeline.toString() + '));'; }
+
+export function installHistory(browser = globalThis, timeline = nativeTimeline) {
+  const { window, document } = browser, byId = id => document.getElementById(id);
+  const dialog = byId('historyDialog'), bridge = () => window.hccHandoff;
+  const tr = (key, fallback = '') => bridge().tr(key, fallback), esc = value => bridge().esc(String(value ?? ''));
+  let root = '', source = 'native', entries = [], cursor = null, selected = null, ready = false, busy = false, generation = 0;
+  let unverifiedCount = 0;
+  let events = [], deliveries = [], nextAfter = null, pageStarts = [0], page = 0, runtimeAvailable = true;
+  const isNative = () => source === 'native';
+  const same = (project, version) => project === root && project === bridge().projectRoot && version === generation && !dialog.hidden;
+  const route = (path, project = root) => path + (path.includes('?') ? '&' : '?') + 'root=' + encodeURIComponent(project);
+  const entryId = entry => isNative() ? entry.peer : entry.id;
+  function notice(value) { byId('historyNotice').textContent = value || ''; }
+  function liveSources() {
+    return (bridge().sessions || []).filter(session => session.status === 'running' && (isNative()
+      ? session.type === 'native' && [session.id,session.peer_id].includes(selected?.peer)
+      : session.binding?.provider === 'codex' && session.binding.provider_session_id === selected?.id));
+  }
+  function controlsSource(sources) { return sources.every(session => session.id === bridge().active && bridge().canControl); }
+  function nativeEligible() { return ready && selected?.resumable === true && selected.status === 'closed' && selected.owned === false && Boolean(selected.owner && selected.sessionId); }
+  function updatedLabel(value) {
+    if (!value) return '';
+    const date = new Date(value);
+    return Number.isFinite(date.getTime()) ? date.toLocaleString() : String(value);
+  }
+  function sync() {
+    if (!dialog.hidden && !root && bridge().projectRoot) { root = bridge().projectRoot; void load(); return; }
+    const confirmed = byId('historyConfirmed').checked, sources = liveSources();
+    const unavailable = busy || !ready || !selected || !confirmed || root !== bridge().projectRoot || Boolean(window.hccAgentStart?.pending);
+    byId('historyProviderField').hidden = !isNative();
+    byId('historyHelp').textContent = tr(isNative() ? 'history.nativeHelp' : 'history.help');
+    byId('historyUnverified').textContent = !isNative() && unverifiedCount > 0
+      ? tr('history.unverified').replace('{count}', String(unverifiedCount)) : '';
+    byId('historyConfirmLabel').textContent = tr(isNative() ? 'history.nativeConfirm' : 'history.confirm');
+    byId('historyResume').disabled = unavailable || sources.length > 0 || (isNative() && !nativeEligible());
+    byId('historyFork').hidden = isNative(); byId('historyFork').disabled = isNative() || unavailable || !controlsSource(sources);
+    byId('historyResumeReason').textContent = isNative() && selected && !nativeEligible()
+      ? tr('history.resumeReason.' + (selected.resumeReason || 'unavailable'), selected.resumeDetail || tr('history.resumeUnavailable')) : '';
+    if (!busy && sources.length) notice(tr(isNative() ? 'history.nativeActive' : controlsSource(sources) ? 'history.stopOriginal' : 'history.sourceControlRequired'));
+    byId('historyRefresh').disabled = busy; byId('historyMore').hidden = isNative() || !cursor; byId('historyMore').disabled = busy;
+    byId('historyEventControls').hidden = !isNative() || !ready;
+    byId('historyEventsPrevious').disabled = busy || page === 0; byId('historyEventsNext').disabled = busy || nextAfter == null;
+    byId('historyEventsReload').disabled = busy; byId('historyReceipts').hidden = !isNative() || !ready;
+  }
+  function clearSelected() {
+    selected = null; ready = false; events = []; deliveries = []; nextAfter = null; pageStarts = [0]; page = 0;
+    byId('historyConfirmed').checked = false; byId('historyReceipts').open = false;
+    for (const id of ['historySelected','historyContent','historyIdentity','historyRetention','historyReceiptContent']) byId(id).textContent = '';
+  }
+  function renderList() {
+    const provider = byId('historyProvider').value || 'all';
+    const filtered = isNative() && provider !== 'all' ? entries.filter(entry => entry.provider === provider) : entries;
+    const container = byId('historyThreads');
+    container.innerHTML = filtered.map(entry => '<button type="button" class="history-thread" data-thread="' + esc(entryId(entry)) + '" aria-pressed="' + (entryId(entry) === (selected && entryId(selected))) + '"><strong>'
+      + esc(isNative() ? entry.peer : entry.name || entry.preview || entry.id) + '</strong><span>'
+      + esc(isNative() ? [entry.provider,entry.status,updatedLabel(entry.updatedAt)].filter(Boolean).join(' · ') : entry.id) + '</span><span>' + esc(entry.cwd || '') + '</span></button>').join('')
+      || '<p class="dialog-help">' + esc(tr(isNative() ? 'history.nativeEmpty' : 'history.empty')) + '</p>';
+    container.querySelectorAll('[data-thread]').forEach(button => button.addEventListener('click', () => select(button.dataset.thread))); sync();
+  }
+  async function load(more = false) {
+    if (busy) return;
+    if (!root) { notice(tr('history.projectLoading')); return; }
+    const project = root, version = ++generation, native = isNative();
+    if (!more) { clearSelected(); unverifiedCount = 0; }
+    busy = true; notice(tr('history.loading')); sync();
+    try {
+      const result = await bridge().api(route(native ? '/api/native/history' : '/api/codex/threads' + (more && cursor ? '?cursor=' + encodeURIComponent(cursor) : ''), project));
+      if (!same(project,version)) return;
+      const incoming = (native ? result.workers : result.threads) || [];
+      entries = [...new Map((more ? entries.concat(incoming) : incoming).map(entry => [entryId(entry),entry])).values()];
+      cursor = native ? null : result.nextCursor || null; runtimeAvailable = result.runtimeAvailable !== false;
+      const hidden = Number(result.unverifiedCount);
+      if (!native && Number.isSafeInteger(hidden) && hidden > 0) unverifiedCount += hidden;
+      notice(native ? [runtimeAvailable ? '' : tr('history.runtimeOffline'),result.truncated ? tr('history.listTruncated') : ''].filter(Boolean).join(' ') : ''); renderList();
+    } catch (error) { if (same(project,version)) notice(error.detail || error.message); }
+    finally { if (project === root && version === generation) { busy = false; sync(); } }
+  }
+  async function select(id, targetPage = 0) {
+    if (busy) return;
+    const project = root, version = ++generation, native = isNative();
+    if (!selected || entryId(selected) !== id) { clearSelected(); selected = entries.find(entry => entryId(entry) === id) || (native ? {peer:id} : {id}); }
+    ready = false; byId('historyConfirmed').checked = false;
+    byId('historySelected').textContent = selected.name || selected.preview || id; byId('historyContent').textContent = ''; byId('historyReceiptContent').textContent = '';
+    busy = true; renderList(); notice(tr('history.loading'));
+    try {
+      const result = await bridge().api(route(native ? '/api/native/history/' + encodeURIComponent(id) + '?after=' + (pageStarts[targetPage] || 0) : '/api/codex/threads/' + encodeURIComponent(id),project));
+      if (!same(project,version)) return;
+      selected = (native ? result.worker : result.thread) || selected; ready = true;
+      if (native) {
+        runtimeAvailable = result.runtimeAvailable !== false;
+        events = Array.isArray(result.events) ? result.events : []; deliveries = Array.isArray(result.deliveries) ? result.deliveries : [];
+        nextAfter = result.truncated === true && Number.isSafeInteger(result.nextAfter) && result.nextAfter > (pageStarts[targetPage] || 0) ? result.nextAfter : null;
+        page = targetPage; if (nextAfter != null) pageStarts[page + 1] = nextAfter; pageStarts.length = page + (nextAfter == null ? 1 : 2);
+      }
+      renderPreview(); notice(native && !runtimeAvailable ? tr('history.runtimeOffline') : '');
+    } catch (error) { if (same(project,version)) notice(error.detail || error.message); }
+    finally { if (project === root && version === generation) { busy = false; sync(); } }
+  }
+  function renderPreview() {
+    if (!ready) return;
+    if (isNative()) {
+      byId('historyIdentity').textContent = [selected.provider,selected.peer,selected.status,selected.sessionId,selected.cwd].filter(Boolean).join(' · ');
+      byId('historyRetention').textContent = tr('history.retention');
+      byId('historyEventPage').textContent = tr('history.eventPage').replace('{page}',String(page + 1)).replace('{count}',String(events.length))
+        + (events.length ? ' · #' + events[0].id + '–#' + events.at(-1).id : '');
+      byId('historyReceiptContent').textContent = JSON.stringify(deliveries,null,2);
+      const trace = byId('historyNativeView').value === 'trace';
+      byId('historyContent').innerHTML = (trace ? events.map(entry => '<details class="history-turn"><summary>#' + esc(entry.id) + ' · ' + esc((entry.payload || entry).type || '') + '</summary><pre>' + esc(JSON.stringify(entry.payload || entry,null,2)) + '</pre></details>')
+        : timeline(events,selected.provider).map(record => '<section class="history-turn"><strong>' + esc(record.role === 'user' ? tr('history.user') : record.role === 'assistant' ? tr('history.assistant') : record.title || record.kind)
+          + '</strong><small> · #' + esc(record.eventId) + (record.status ? ' · ' + esc(record.status) : '') + '</small><pre>'
+          + esc([record.text,record.command,record.input,record.output,record.changes?.length ? JSON.stringify(record.changes,null,2) : ''].filter(Boolean).join('\n\n')) + '</pre></section>')).join('')
+          || '<p class="dialog-help">' + esc(tr('history.noEvents')) + '</p>'; return;
     }
-    function open() {
-      root = bridge().projectRoot; generation++; entries = []; selected = null; cursor = null; busy = false;
-      document.getElementById('historyContent').textContent = ''; document.getElementById('historySelected').textContent = '';
-      document.getElementById('historyConfirmed').checked = false;
-      bridge().openDialog(dialog, document.getElementById('historyRefresh')); renderList(); void load();
+    byId('historyContent').innerHTML = (selected?.turns || []).map(turn => '<section class="history-turn"><strong>' + esc(turn.status || '') + '</strong>' + (turn.items || []).map(item => {
+      const content = Array.isArray(item.content) ? item.content.map(part => part.text || '').join('\n') : item.text || item.command || item.aggregatedOutput || '';
+      const label = item.type === 'userMessage' ? tr('history.user') : item.type === 'agentMessage' ? tr('history.assistant') : item.type === 'commandExecution' ? tr('history.command') : item.type === 'fileChange' ? tr('history.files') : tr('history.event');
+      return '<article><strong>' + esc(label) + '</strong><pre>' + esc(content || (item.changes ? JSON.stringify(item.changes,null,2) : '')) + '</pre></article>';
+    }).join('') + '</section>').join('') || '<p class="dialog-help">' + esc(tr('history.noTurns')) + '</p>';
+  }
+  async function reopen(fork) {
+    if (busy || !ready || !selected || !byId('historyConfirmed').checked || root !== bridge().projectRoot) return;
+    const sources = liveSources();
+    if (isNative()) {
+      if (fork || !nativeEligible() || sources.length || window.hccAgentStart?.pending) { sync(); return; }
+      const worker = { ...selected }; bridge().closeDialog(dialog); return window.hccAgentStart.resumeNative(worker);
     }
-    document.getElementById('historyClose').addEventListener('click', () => bridge().closeDialog(dialog));
-    document.getElementById('historyRefresh').addEventListener('click', () => load());
-    document.getElementById('historyMore').addEventListener('click', () => load(true));
-    document.getElementById('historyConfirmed').addEventListener('change', sync);
-    document.getElementById('historyResume').addEventListener('click', () => reopen(false));
-    document.getElementById('historyFork').addEventListener('click', () => reopen(true));
-    window.addEventListener('hcc:preferences', () => { if (!dialog.hidden) { renderList(); renderPreview(); } });
-    window.hccHistory = { open, sync, reset() { generation++; busy = false; if (!dialog.hidden) bridge().closeDialog(dialog); } };
-  })();`;
+    if (sources.length && (!fork || !controlsSource(sources))) { sync(); return; }
+    const project = root, threadId = selected.id, version = ++generation;
+    const input = fork ? { confirmed:true, ...(sources.length ? {actionToken:bridge().actionToken,epoch:bridge().epoch} : {}) }
+      : {kind:'codex',transport:'app-server',mode:'resume',resume:threadId,handoffConfirmed:true};
+    busy = true; sync(); notice(tr('history.opening'));
+    try {
+      const result = await bridge().api(fork ? route('/api/codex/threads/' + encodeURIComponent(threadId) + '/fork',project) : route('/api/sessions',project),{method:'POST',body:JSON.stringify(input)});
+      if (project !== bridge().projectRoot) return;
+      await bridge().refreshSessions(); if (!same(project,version)) return;
+      bridge().closeDialog(dialog); if (result.session?.id) bridge().openManaged(result.session.id);
+    } catch (error) { if (same(project,version)) notice((error.detail || error.message) + (error.code ? ' [' + error.code + ']' : '') + ' ' + tr('history.checkSessions')); }
+    finally { if (project === root && version === generation) { busy = false; sync(); } }
+  }
+  function closed() { generation++; busy = false; ready = false; byId('historyConfirmed').checked = false; }
+  function open(nextSource = 'native') {
+    root = bridge().projectRoot; generation++; source = nextSource === 'codex' ? 'codex' : 'native'; entries = []; cursor = null; unverifiedCount = 0; busy = false; clearSelected();
+    byId('historySource').value = source; byId('historyProvider').value = 'all'; byId('historyNativeView').value = 'conversation';
+    bridge().openDialog(dialog,byId('historySource')); renderList(); void load();
+  }
+  byId('historySource').addEventListener('change',() => {
+    generation++; busy = false; source = byId('historySource').value === 'codex' ? 'codex' : 'native'; entries = []; cursor = null; unverifiedCount = 0; clearSelected(); renderList(); void load();
+  });
+  byId('historyProvider').addEventListener('change',() => {
+    // Keep an in-flight list read: its response uses the current filter. A
+    // detail read is fenced when its selected provider is left behind.
+    if (selected) { generation++; busy = false; clearSelected(); notice(''); }
+    renderList();
+  });
+  byId('historyNativeView').addEventListener('change',renderPreview);
+  byId('historyEventsPrevious').addEventListener('click',() => { if (page > 0 && selected) return select(selected.peer,page - 1); });
+  byId('historyEventsNext').addEventListener('click',() => { if (nextAfter != null && selected) return select(selected.peer,page + 1); });
+  byId('historyEventsReload').addEventListener('click',() => selected && select(selected.peer,page));
+  byId('historyClose').addEventListener('click',() => { closed(); bridge().closeDialog(dialog); });
+  byId('historyRefresh').addEventListener('click',() => load()); byId('historyMore').addEventListener('click',() => load(true));
+  byId('historyConfirmed').addEventListener('change',sync); byId('historyResume').addEventListener('click',() => reopen(false));
+  byId('historyFork').addEventListener('click',() => reopen(true));
+  window.addEventListener('hcc:preferences',() => { if (!dialog.hidden) { renderList(); renderPreview(); } });
+  window.hccHistory = {open,sync,closed,reset() { closed(); if (!dialog.hidden) bridge().closeDialog(dialog); }};
 }