@raquezha/notrace 0.0.6 → 0.1.0

package/extensions/notrace/renderer.ts

@@ -87,7 +87,9 @@ function taskDisplay(taskish: any): string {
 }
 
 function resolveRepoName(data: any): string {
-  return data?.repository?.name || data?.repositoryName || data?.repoName || "Repository";
+  const name = data?.repository?.name || data?.repositoryName || data?.repoName || "Repository";
+  const branch = data?.repository?.branch;
+  return branch ? `${name} @ ${branch}` : name;
 }
 
 function formatUsd(value: number | undefined): string {
@@ -211,6 +213,44 @@ function shell(title: string, body: string, script = ""): string {
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;
@@ -219,7 +259,7 @@ function shell(title: string, body: string, script = ""): string {
       align-items: center;
       margin-top: 16px;
     }
-    .pill, .workflow-pill, .sort-btn {
+    .pill, .workflow-pill, .sort-btn, .export-btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
@@ -232,7 +272,7 @@ function shell(title: string, body: string, script = ""): string {
       font-size: 0.86rem;
       font-weight: 600;
     }
-    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 24px 0; }
+    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 16px; margin: 24px 0; }
     .metric-card {
       background: var(--panel-strong);
       border: 1px solid var(--border);
@@ -351,7 +391,42 @@ function shell(title: string, body: string, script = ""): string {
     .msg-role { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
     .msg.user .msg-role { color: #8ec5ff; }
     .msg.assistant .msg-role { color: var(--accent); }
-    .msg-content { padding: 14px; white-space: pre-wrap; word-break: break-word; }
+    .msg-content { padding: 14px; }
+    .chat-text {
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: 0.95rem;
+      line-height: 1.6;
+      margin-bottom: 12px;
+    }
+    .chat-text:last-child { margin-bottom: 0; }
+    .chat-tool-use {
+      background: rgba(0,0,0,0.3);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      margin-bottom: 12px;
+    }
+    .chat-tool-use:last-child { margin-bottom: 0; }
+    .chat-tool-header {
+      background: rgba(255,255,255,0.04);
+      padding: 8px 12px;
+      font-size: 0.8rem;
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      color: #8ec5ff;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .chat-tool-body {
+      padding: 12px;
+      margin: 0;
+      background: transparent;
+      border: none;
+      max-height: 400px;
+      overflow-y: auto;
+    }
     .footer-note {
       margin-top: 22px;
       color: var(--muted);
@@ -396,7 +471,15 @@ function shell(title: string, body: string, script = ""): string {
       color: var(--text);
       border-bottom-color: rgba(236,227,218,0.45);
     }
-    @media (max-width: 760px) {
+    .export-btn {
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .export-btn:hover, .export-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
       .container { padding: 20px 14px 48px; }
       .hero { padding: 20px; }
       .hero-top { grid-template-columns: 1fr; }
@@ -411,13 +494,121 @@ function shell(title: string, body: string, script = ""): string {
 </html>`;
 }
 
+function copyButton(value: string, label: string, className = "copy-btn"): string {
+  return `<button class="${escapeHtml(className)}" type="button" data-copy-value="${escapeHtml(value)}" aria-label="Copy ${escapeHtml(label)}" title="Copy ${escapeHtml(label)}"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button>`;
+}
+
+function exportButton(data: any): string {
+  const payload = JSON.stringify({
+    kind: "notrace-export",
+    traceId: data.traceId,
+    repository: data.repository?.name,
+    branch: data.repository?.branch,
+    task: data.task,
+    metrics: data.activity?.totals,
+    summary: data.telemetry?.extensions?.noheadroom?.summary,
+    events: (data.events || []).filter((e: any) => e.type === "llm_completion").map((e: any) => ({
+      model: e.model,
+      input: e.inputPayload?.messages,
+      output: e.outputContent
+    }))
+  });
+  return `<button class="export-btn" type="button" data-copy-value="${escapeHtml(payload)}" title="Copy session data for LLM/Agent context"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg><span>Export</span></button>`;
+}
+
+function copyScript(): string {
+  return `(() => {
+    document.querySelectorAll('[data-copy-value]').forEach((button) => {
+      button.addEventListener('click', async () => {
+        const value = button.getAttribute('data-copy-value') || '';
+        try {
+          if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(value);
+          } else {
+            const textarea = document.createElement('textarea');
+            textarea.value = value;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.focus();
+            textarea.select();
+            document.execCommand('copy');
+            textarea.remove();
+          }
+          const previous = button.innerHTML;
+          button.classList.add('copied');
+          button.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>';
+          setTimeout(() => {
+            button.classList.remove('copied');
+            button.innerHTML = previous;
+          }, 1400);
+        } catch {
+          button.textContent = 'ERR';
+        }
+      });
+    });
+  })();`;
+}
+
 function renderJsonBlock(title: string, value: unknown): string {
   return `<section class="block"><h4>${escapeHtml(title)}</h4><pre>${escapeHtml(typeof value === "string" ? value : JSON.stringify(value, null, 2))}</pre></section>`;
 }
 
+function renderToolUseHtml(name: string, input: any): string {
+  const parsedInput = typeof input === "string" ? (() => { try { return JSON.parse(input); } catch { return input; } })() : input;
+  return `<div class="chat-tool-use"><div class="chat-tool-header"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg> ${escapeHtml(name)}</div><pre class="chat-tool-body">${escapeHtml(typeof parsedInput === 'string' ? parsedInput : JSON.stringify(parsedInput, null, 2))}</pre></div>`;
+}
+
+function renderToolResultHtml(id: string, content: any): string {
+  return `<div class="chat-tool-use"><div class="chat-tool-header" style="color: var(--muted);"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg> Tool Result: ${escapeHtml(id)}</div><pre class="chat-tool-body">${escapeHtml(typeof content === 'string' ? content : JSON.stringify(content, null, 2))}</pre></div>`;
+}
+
+function renderUniversalMessageContent(m: any): string {
+  if (!m) return "";
+  let html = "";
+
+  // 1. Handle string content or Anthropic/Pi blocks
+  if (typeof m.content === "string" && m.content.trim()) {
+    html += `<div class="chat-text">${escapeHtml(m.content)}</div>`;
+  } else if (Array.isArray(m.content)) {
+    html += m.content.map((block: any) => {
+      if (!block) return "";
+      if (block.type === "text") return `<div class="chat-text">${escapeHtml(block.text)}</div>`;
+      if (block.type === "tool_use") return renderToolUseHtml(block.name, block.input);
+      if (block.type === "tool_result") return renderToolResultHtml(block.tool_use_id || "unknown", block.content);
+      return `<pre class="chat-tool-body">${escapeHtml(JSON.stringify(block, null, 2))}</pre>`;
+    }).join("");
+  } else if (m.content && typeof m.content === "object") {
+    html += `<pre class="chat-tool-body">${escapeHtml(JSON.stringify(m.content, null, 2))}</pre>`;
+  }
+
+  // 2. Handle OpenAI/Codex tool_calls (attached to message, not in content)
+  if (Array.isArray(m.tool_calls)) {
+    html += m.tool_calls.map((tc: any) => {
+      if (tc.type === "function" && tc.function) {
+        return renderToolUseHtml(tc.function.name, tc.function.arguments);
+      }
+      return "";
+    }).join("");
+  }
+
+  // 3. Handle OpenAI legacy function_call
+  if (m.function_call) {
+    html += renderToolUseHtml(m.function_call.name, m.function_call.arguments);
+  }
+
+  // 4. Handle OpenAI tool result (message role is "tool")
+  if (m.role === "tool" && !html.includes("chat-tool-result")) {
+    // If it was just a string, it rendered above. Wrap it in a tool result block instead.
+    html = renderToolResultHtml(m.tool_call_id || m.name || "unknown", m.content);
+  }
+
+  return html || `<div class="empty">Empty message</div>`;
+}
+
 function renderMessages(messages: any[] | undefined): string {
   if (!messages?.length) return "";
-  return `<section class="block"><h4>Input Messages</h4>${messages.map(m => `<div class="msg ${escapeHtml(m?.role || "unknown")}"><div class="msg-head"><span class="msg-role">${escapeHtml(m?.role || "unknown")}</span></div><div class="msg-content">${escapeHtml(m?.content ?? "")}</div></div>`).join("")}</section>`;
+  return `<section class="block"><h4>Input Messages</h4>${messages.map(m => `<div class="msg ${escapeHtml(m?.role || "unknown")}"><div class="msg-head"><span class="msg-role">${escapeHtml(m?.role || "unknown")}</span></div><div class="msg-content">${renderUniversalMessageContent(m)}</div></div>`).join("")}</section>`;
 }
 
 function eventBadgeClass(ev: any): string {
@@ -440,12 +631,12 @@ function renderEventCard(ev: any): string {
     if (ev.errorMessage) {
       sections.push(renderJsonBlock("Error Message", ev.errorMessage));
     }
-    sections.push(renderJsonBlock("Output", ev.outputContent));
+    sections.push(`<section class="block"><h4>Output</h4><div class="msg-content">${renderUniversalMessageContent({ content: ev.outputContent })}</div></section>`);
     if (ev.usage) sections.push(renderJsonBlock("Usage", ev.usage));
   } else if (ev.type === "tool_start") {
-    sections.push(renderJsonBlock("Arguments", ev.args));
+    sections.push(`<section class="block"><h4>Arguments</h4><div class="msg-content"><div class="chat-tool-use"><div class="chat-tool-header"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg> Execution Input</div><pre class="chat-tool-body">${escapeHtml(typeof ev.args === 'string' ? ev.args : JSON.stringify(ev.args, null, 2))}</pre></div></div></section>`);
   } else if (ev.type === "tool_end") {
-    sections.push(renderJsonBlock(ev.isError ? "Error Result" : "Result", ev.result));
+    sections.push(`<section class="block"><h4>${ev.isError ? "Error Result" : "Result"}</h4><div class="msg-content"><div class="chat-tool-use" style="${ev.isError ? 'border-color: rgba(239,127,127,0.3);' : ''}"><div class="chat-tool-header" style="${ev.isError ? 'color: var(--err);' : 'color: var(--muted);'}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg> Execution Output</div><pre class="chat-tool-body">${escapeHtml(typeof ev.result === 'string' ? ev.result : JSON.stringify(ev.result, null, 2))}</pre></div></div></section>`);
   } else {
     sections.push(renderJsonBlock("Event", ev));
   }
@@ -522,17 +713,19 @@ export function generateDashboardHtml(sessions: any[], options: any = {}): strin
   const reversed = sessions.slice().reverse();
   const totalCost = sessions.reduce((sum, s) => sum + Number(s.activity?.totals?.totalCostUsd || 0), 0);
   const totalTokens = sessions.reduce((sum, s) => sum + Number(s.activity?.totals?.totalTokens || 0), 0);
-  const repositoryName = resolveRepoName(options);
   const homeHref = options?.indexHref || "index.html";
   const body = `<div class="container">
     <section class="hero">
-      <div class="hero-top">
-        <div>
-          <div class="brand"><a class="brand-link" href="${escapeHtml(homeHref)}">${wordmarkSvg()}</a><p class="subtitle">Retrospective index. Repo-local session evidence.</p></div>
-        </div>
-        <div class="meta">
-          <span class="pill">${escapeHtml(repositoryName)}</span>
-          <span class="pill">${sessions.length} sessions</span>
+      <div class="hero-split">
+        <a class="brand-link" href="${escapeHtml(homeHref)}">${wordmarkSvg()}</a>
+        <div class="hero-right">
+          <div class="hero-session">
+            <strong style="color: var(--text); font-weight: 500;">Global Index</strong>
+            <span style="color: var(--muted);">Machine-wide session evidence.</span>
+          </div>
+          <div class="hero-meta">
+            <span class="hero-pill">${sessions.length} sessions</span>
+          </div>
         </div>
       </div>
       <div class="metrics">
@@ -543,14 +736,14 @@ export function generateDashboardHtml(sessions: any[], options: any = {}): strin
     </section>
     <section class="panel">
       <h2 class="section-title">Session Reports</h2>
-      ${reversed.length ? `<table data-dashboard-table><thead><tr><th class="col-index sortable-head"><button class="sort-btn" data-sort-key="index"><span class="sort-label">#</span><span class="sort-state">↓</span></button></th><th>Session</th><th class="sortable-head"><button class="sort-btn" data-sort-key="workflow"><span class="sort-label">Workflow</span><span class="sort-state"></span></button></th><th class="sortable-head"><button class="sort-btn" data-sort-key="started"><span class="sort-label">Started</span><span class="sort-state"></span></button></th><th>Task</th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="tokens"><span class="sort-label">Tokens</span><span class="sort-state"></span></button></th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="cost"><span class="sort-label">Cost</span><span class="sort-state"></span></button></th></tr></thead><tbody>
+      ${reversed.length ? `<table data-dashboard-table><thead><tr><th class="col-index sortable-head"><button class="sort-btn" data-sort-key="index"><span class="sort-label">#</span><span class="sort-state">↓</span></button></th><th>Session</th><th>Project</th><th class="sortable-head"><button class="sort-btn" data-sort-key="workflow"><span class="sort-label">Workflow</span><span class="sort-state"></span></button></th><th class="sortable-head"><button class="sort-btn" data-sort-key="started"><span class="sort-label">Started</span><span class="sort-state"></span></button></th><th>Task</th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="tokens"><span class="sort-label">Tokens</span><span class="sort-state"></span></button></th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="cost"><span class="sort-label">Cost</span><span class="sort-state"></span></button></th></tr></thead><tbody>
       ${reversed.map((s, index) => {
-        const link = s.artifacts.html.startsWith(".notrace/") ? s.artifacts.html.substring(9) : s.artifacts.html;
+        const link = s.artifacts?.html ? (s.artifacts.html.startsWith(".notrace/") ? s.artifacts.html.substring(9) : s.artifacts.html) : "#";
         const workflow = s.task?.workflow || "generic";
         const workflowLabel = workflowDisplayName(workflow);
         const tokens = Number(s.activity?.totals?.totalTokens || 0);
         const cost = Number(s.activity?.totals?.totalCostUsd || 0);
-        return `<tr data-index="${reversed.length - index}" data-workflow="${escapeHtml(workflowLabel)}" data-started="${parseDate(s.startedAt)?.getTime() || 0}" data-tokens="${tokens}" data-cost="${cost}"><td class="index-cell">${reversed.length - index}</td><td><a class="session-link" href="${escapeHtml(link)}"><strong>${escapeHtml(String(s.sessionId).slice(0, 8))}</strong><span class="session-sub">${escapeHtml(String(s.sessionId))}</span></a></td><td><span class="workflow-pill ${workflowClassName(workflow)}">${escapeHtml(workflowLabel)}</span></td><td>${formatDateCell(s.startedAt)}</td><td>${escapeHtml(taskDisplay(s))}</td><td class="num-cell">${tokens.toLocaleString()}</td><td class="num-cell">${formatUsd(cost)}</td></tr>`;
+        return `<tr data-index="${reversed.length - index}" data-workflow="${escapeHtml(workflowLabel)}" data-started="${parseDate(s.startedAt)?.getTime() || 0}" data-tokens="${tokens}" data-cost="${cost}"><td class="index-cell">${reversed.length - index}</td><td><a class="session-link" href="${escapeHtml(link)}"><strong>${escapeHtml(String(s.sessionId).slice(0, 8))}</strong><span class="session-sub">${escapeHtml(String(s.sessionId))}</span></a></td><td><span class="hero-pill">${escapeHtml(s.repositoryName || "Unknown")}</span></td><td><span class="workflow-pill ${workflowClassName(workflow)}">${escapeHtml(workflowLabel)}</span></td><td>${formatDateCell(s.startedAt)}</td><td>${escapeHtml(taskDisplay(s))}</td><td class="num-cell">${tokens.toLocaleString()}</td><td class="num-cell">${formatUsd(cost)}</td></tr>`;
       }).join("")}
       </tbody></table>` : `<div class="empty">No sessions yet. Run Pi with notrace enabled. New reports appear here.</div>`}
     </section>
@@ -568,12 +761,13 @@ export function generateHtmlReport(data: any): string {
     <section class="hero">
       <div class="hero-top">
         <div>
-          <div class="brand"><a class="brand-link" href="${escapeHtml(indexHref)}" onclick="if (window.history.length > 1) { window.history.back(); return false; }">${wordmarkSvg()}</a><p class="subtitle">Session retrospective for ${escapeHtml(data.traceId)}</p></div>
+          <div class="brand"><a class="brand-link" href="${escapeHtml(indexHref)}" onclick="if (window.history.length > 1) { window.history.back(); return false; }">${wordmarkSvg()}</a><p class="subtitle session-subtitle"><span>Session retrospective</span><span class="session-id-chip"><span>${escapeHtml(data.traceId)}</span>${copyButton(String(data.traceId || ""), "session ID")}</span></p></div>
         </div>
         <div class="meta">
-          <span class="pill">${escapeHtml(repositoryName)}</span>
+          <span class="pill">${escapeHtml(resolveRepoName(data))}</span>
           <span class="pill">Started ${formatDateLong(data.session?.startedAt)}</span>
-          <span class="pill">Capture ${escapeHtml(data.captureMode || "full")}</span>
+          <span class="pill">Mode: ${escapeHtml(data.captureMode || "full")}</span>
+          ${exportButton(data)}
         </div>
       </div>
       <div class="metrics">
@@ -612,5 +806,5 @@ export function generateHtmlReport(data: any): string {
       <div class="footer-meta"><a href="https://opensource.org/licenses/MIT">MIT</a></div>
     </footer>
   </div>`;
-  return shell(`notrace - ${data.traceId}`, body);
+  return shell(`notrace - ${data.traceId}`, body, copyScript());
 }

package/extensions/notrace/types.ts

@@ -36,6 +36,7 @@ export type NotraceHarnessInfo = {
 export type NotraceRepositoryInfo = {
   name: string;
   cwd: string;
+  branch?: string | null;
 };
 
 export type NotraceSessionInfo = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raquezha/notrace",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "Zero-dependency, local-first interactive HTML Trace Viewer for the Pi Coding Agent",
   "main": "dist/notrace/index.js",
   "types": "dist/notrace/index.d.ts",
@@ -8,6 +8,8 @@
   "scripts": {
     "build": "tsc",
     "render:samples": "npm run build && node ./templates/render-samples.mjs",
+    "review": "node ./bin/notrace-review.mjs",
+    "compare": "node ./bin/notrace-compare.mjs",
     "prepare": "npm run build"
   },
   "peerDependencies": {
@@ -31,5 +33,9 @@
     "extensions": [
       "extensions"
     ]
+  },
+  "bin": {
+    "notrace-review": "./bin/notrace-review.mjs",
+    "notrace-compare": "./bin/notrace-compare.mjs"
   }
 }

package/templates/dashboard.sample.html

@@ -68,6 +68,44 @@
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;
@@ -76,7 +114,7 @@
       align-items: center;
       margin-top: 16px;
     }
-    .pill, .workflow-pill, .sort-btn {
+    .pill, .workflow-pill, .sort-btn, .export-btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
@@ -89,7 +127,7 @@
       font-size: 0.86rem;
       font-weight: 600;
     }
-    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 24px 0; }
+    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 16px; margin: 24px 0; }
     .metric-card {
       background: var(--panel-strong);
       border: 1px solid var(--border);
@@ -208,7 +246,40 @@
     .msg-role { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
     .msg.user .msg-role { color: #8ec5ff; }
     .msg.assistant .msg-role { color: var(--accent); }
-    .msg-content { padding: 14px; white-space: pre-wrap; word-break: break-word; }
+    .msg-content { padding: 14px; }
+    .chat-text {
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: 0.95rem;
+      line-height: 1.6;
+      margin-bottom: 12px;
+    }
+    .chat-text:last-child { margin-bottom: 0; }
+    .chat-tool-use {
+      background: rgba(0,0,0,0.3);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      margin-bottom: 12px;
+    }
+    .chat-tool-use:last-child { margin-bottom: 0; }
+    .chat-tool-header {
+      background: rgba(255,255,255,0.04);
+      padding: 8px 12px;
+      font-size: 0.8rem;
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      color: #8ec5ff;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .chat-tool-body {
+      padding: 12px;
+      margin: 0;
+      background: transparent;
+      border: none;
+    }
     .footer-note {
       margin-top: 22px;
       color: var(--muted);
@@ -253,7 +324,15 @@
       color: var(--text);
       border-bottom-color: rgba(236,227,218,0.45);
     }
-    @media (max-width: 760px) {
+    .export-btn {
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .export-btn:hover, .export-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
       .container { padding: 20px 14px 48px; }
       .hero { padding: 20px; }
       .hero-top { grid-template-columns: 1fr; }
@@ -266,9 +345,8 @@
 </head>
 <body><div class="container">
     <section class="hero">
-      <div class="hero-top">
-        <div>
-          <div class="brand"><a class="brand-link" href="index.html"><svg class="wordmark" viewBox="0 0 420 138" aria-label="notrace" role="img" xmlns="http://www.w3.org/2000/svg">
+      <div class="hero-split">
+        <a class="brand-link" href="index.html"><svg class="wordmark" viewBox="0 0 420 138" aria-label="notrace" role="img" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <linearGradient id="fadeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0%" stop-color="#E2754A"/>
@@ -285,11 +363,15 @@
     </g>
     <text x="0" y="114" fill="#ECE3DA" style="fill:#ECE3DA" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="96" font-weight="900" letter-spacing="-7">no</text>
     <text x="82" y="114" fill="#d88462" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="96" font-weight="900" letter-spacing="-7">trace</text>
-  </svg></a><p class="subtitle">Retrospective index. Repo-local session evidence.</p></div>
-        </div>
-        <div class="meta">
-          <span class="pill">nothing</span>
-          <span class="pill">3 sessions</span>
+  </svg></a>
+        <div class="hero-right">
+          <div class="hero-session">
+            <strong style="color: var(--text); font-weight: 500;">Global Index</strong>
+            <span style="color: var(--muted);">Machine-wide session evidence.</span>
+          </div>
+          <div class="hero-meta">
+            <span class="hero-pill">3 sessions</span>
+          </div>
         </div>
       </div>
       <div class="metrics">
@@ -300,8 +382,8 @@
     </section>
     <section class="panel">
       <h2 class="section-title">Session Reports</h2>
-      <table data-dashboard-table><thead><tr><th class="col-index sortable-head"><button class="sort-btn" data-sort-key="index"><span class="sort-label">#</span><span class="sort-state">↓</span></button></th><th>Session</th><th class="sortable-head"><button class="sort-btn" data-sort-key="workflow"><span class="sort-label">Workflow</span><span class="sort-state"></span></button></th><th class="sortable-head"><button class="sort-btn" data-sort-key="started"><span class="sort-label">Started</span><span class="sort-state"></span></button></th><th>Task</th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="tokens"><span class="sort-label">Tokens</span><span class="sort-state"></span></button></th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="cost"><span class="sort-label">Cost</span><span class="sort-state"></span></button></th></tr></thead><tbody>
-      <tr data-index="3" data-workflow="Generic" data-started="1781691240000" data-tokens="5910" data-cost="0.0334"><td class="index-cell">3</td><td><a class="session-link" href="sessions/019ed2ee-1002-76ee-b353-000000000003/notrace.html"><strong>019ed2ee</strong><span class="session-sub">019ed2ee-1002-76ee-b353-000000000003</span></a></td><td><span class="workflow-pill workflow-generic">Generic</span></td><td><div class="date-cell"><strong>2026-06-17</strong><span>18:14</span></div></td><td>General session</td><td class="num-cell">5,910</td><td class="num-cell">$0.03340</td></tr><tr data-index="2" data-workflow="Research" data-started="1781689020000" data-tokens="5754" data-cost="0.0267"><td class="index-cell">2</td><td><a class="session-link" href="sessions/019ed2ee-1001-76ee-b353-000000000002/notrace.html"><strong>019ed2ee</strong><span class="session-sub">019ed2ee-1001-76ee-b353-000000000002</span></a></td><td><span class="workflow-pill workflow-research">Research</span></td><td><div class="date-cell"><strong>2026-06-17</strong><span>17:37</span></div></td><td>Branch topic-02</td><td class="num-cell">5,754</td><td class="num-cell">$0.02670</td></tr><tr data-index="1" data-workflow="RPIV" data-started="1781686800000" data-tokens="3510" data-cost="0.0204"><td class="index-cell">1</td><td><a class="session-link" href="sessions/019ed2ee-1000-76ee-b353-000000000001/notrace.html"><strong>019ed2ee</strong><span class="session-sub">019ed2ee-1000-76ee-b353-000000000001</span></a></td><td><span class="workflow-pill workflow-rpiv">RPIV</span></td><td><div class="date-cell"><strong>2026-06-17</strong><span>17:00</span></div></td><td>NR-101</td><td class="num-cell">3,510</td><td class="num-cell">$0.02040</td></tr>
+      <table data-dashboard-table><thead><tr><th class="col-index sortable-head"><button class="sort-btn" data-sort-key="index"><span class="sort-label">#</span><span class="sort-state">↓</span></button></th><th>Session</th><th>Project</th><th class="sortable-head"><button class="sort-btn" data-sort-key="workflow"><span class="sort-label">Workflow</span><span class="sort-state"></span></button></th><th class="sortable-head"><button class="sort-btn" data-sort-key="started"><span class="sort-label">Started</span><span class="sort-state"></span></button></th><th>Task</th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="tokens"><span class="sort-label">Tokens</span><span class="sort-state"></span></button></th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="cost"><span class="sort-label">Cost</span><span class="sort-state"></span></button></th></tr></thead><tbody>
+      <tr data-index="3" data-workflow="Generic" data-started="1781691240000" data-tokens="5910" data-cost="0.0334"><td class="index-cell">3</td><td><a class="session-link" href="sessions/019ed2ee-1002-76ee-b353-000000000003/notrace.html"><strong>019ed2ee</strong><span class="session-sub">019ed2ee-1002-76ee-b353-000000000003</span></a></td><td><span class="hero-pill">Unknown</span></td><td><span class="workflow-pill workflow-generic">Generic</span></td><td><div class="date-cell"><strong>2026-06-17</strong><span>18:14</span></div></td><td>General session</td><td class="num-cell">5,910</td><td class="num-cell">$0.03340</td></tr><tr data-index="2" data-workflow="Research" data-started="1781689020000" data-tokens="5754" data-cost="0.0267"><td class="index-cell">2</td><td><a class="session-link" href="sessions/019ed2ee-1001-76ee-b353-000000000002/notrace.html"><strong>019ed2ee</strong><span class="session-sub">019ed2ee-1001-76ee-b353-000000000002</span></a></td><td><span class="hero-pill">Unknown</span></td><td><span class="workflow-pill workflow-research">Research</span></td><td><div class="date-cell"><strong>2026-06-17</strong><span>17:37</span></div></td><td>Branch topic-02</td><td class="num-cell">5,754</td><td class="num-cell">$0.02670</td></tr><tr data-index="1" data-workflow="RPIV" data-started="1781686800000" data-tokens="3510" data-cost="0.0204"><td class="index-cell">1</td><td><a class="session-link" href="sessions/019ed2ee-1000-76ee-b353-000000000001/notrace.html"><strong>019ed2ee</strong><span class="session-sub">019ed2ee-1000-76ee-b353-000000000001</span></a></td><td><span class="hero-pill">Unknown</span></td><td><span class="workflow-pill workflow-rpiv">RPIV</span></td><td><div class="date-cell"><strong>2026-06-17</strong><span>17:00</span></div></td><td>NR-101</td><td class="num-cell">3,510</td><td class="num-cell">$0.02040</td></tr>
       </tbody></table>
     </section>
     <footer class="footer-note minimal">notrace • raquezha 2026</footer>