@raquezha/notrace 0.0.7 → 0.1.0

package/extensions/notrace/renderer.ts

@@ -259,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;
@@ -272,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);
@@ -391,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);
@@ -436,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; }
@@ -451,8 +494,26 @@ function shell(title: string, body: string, script = ""): string {
 </html>`;
 }
 
-function copyButton(value: string, label: string): string {
-  return `<button class="copy-btn" 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 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 {
@@ -493,9 +554,61 @@ 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 {
@@ -518,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));
   }
@@ -600,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">
@@ -621,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>
@@ -652,6 +767,7 @@ export function generateHtmlReport(data: any): string {
           <span class="pill">${escapeHtml(resolveRepoName(data))}</span>
           <span class="pill">Started ${formatDateLong(data.session?.startedAt)}</span>
           <span class="pill">Mode: ${escapeHtml(data.captureMode || "full")}</span>
+          ${exportButton(data)}
         </div>
       </div>
       <div class="metrics">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raquezha/notrace",
-  "version": "0.0.7",
+  "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",

package/templates/dashboard.sample.html

@@ -114,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;
@@ -127,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);
@@ -246,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);
@@ -291,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; }
@@ -304,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"/>
@@ -323,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">
@@ -338,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>

package/templates/session.sample.html

@@ -114,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;
@@ -127,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);
@@ -246,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);
@@ -291,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; }
@@ -329,6 +370,7 @@
           <span class="pill">nothing</span>
           <span class="pill">Started 2026-06-17 22:05</span>
           <span class="pill">Mode: full</span>
+          <button class="export-btn" type="button" data-copy-value="{&quot;kind&quot;:&quot;notrace-export&quot;,&quot;traceId&quot;:&quot;019ed2ee-5252-76ee-b353-ad925a6bad31&quot;,&quot;repository&quot;:&quot;nothing&quot;,&quot;task&quot;:{&quot;workflow&quot;:&quot;research&quot;,&quot;id&quot;:&quot;branch:main&quot;,&quot;path&quot;:null,&quot;dir&quot;:null},&quot;metrics&quot;:{&quot;inputTokens&quot;:3120,&quot;outputTokens&quot;:179,&quot;cacheReadTokens&quot;:0,&quot;cacheWriteTokens&quot;:0,&quot;totalTokens&quot;:3299,&quot;totalCostUsd&quot;:0.02064},&quot;summary&quot;:&quot;compressed 24,110 to 18,332 tokens; saved 5,778 tokens across 3 tool results&quot;,&quot;events&quot;:[{&quot;model&quot;:&quot;claude-sonnet-4&quot;,&quot;input&quot;:[{&quot;role&quot;:&quot;user&quot;,&quot;content&quot;:&quot;Polish notrace HTML output and unify dashboard/session design.&quot;}],&quot;output&quot;:&quot;Found renderer split. Will move both pages to one shared shell and standardize styles.&quot;}]}" 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>
         </div>
       </div>
       <div class="metrics">
@@ -423,9 +465,9 @@
       </div>
       <span class="event-time">22:05:04</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Arguments</h4><pre>{
+    <div class="event-body"><div class="stack"><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">{
   &quot;command&quot;: &quot;find packages/notrace -maxdepth 3 -type f&quot;
-}</pre></section></div></div>
+}</pre></div></div></section></div></div>
   </details><details class="event">
     <summary>
       <div class="event-main">
@@ -434,11 +476,11 @@
       </div>
       <span class="event-time">22:05:05</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Result</h4><pre>{
+    <div class="event-body"><div class="stack"><section class="block"><h4>Result</h4><div class="msg-content"><div class="chat-tool-use" style=""><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> Execution Output</div><pre class="chat-tool-body">{
   &quot;stdout&quot;: &quot;packages/notrace/extensions/notrace/index.ts\npackages/notrace/extensions/notrace/renderer.ts\npackages/notrace/package.json&quot;,
   &quot;stderr&quot;: &quot;&quot;,
   &quot;exitCode&quot;: 0
-}</pre></section></div></div>
+}</pre></div></div></section></div></div>
   </details><details class="event">
     <summary>
       <div class="event-main">
@@ -447,7 +489,7 @@
       </div>
       <span class="event-time">22:05:11</span>
     </summary>
-    <div class="event-body"><div class="stack"><section class="block"><h4>Input Messages</h4><div class="msg user"><div class="msg-head"><span class="msg-role">user</span></div><div class="msg-content">Polish notrace HTML output and unify dashboard/session design.</div></div></section><section class="block"><h4>Output</h4><pre>Found renderer split. Will move both pages to one shared shell and standardize styles.</pre></section><section class="block"><h4>Usage</h4><pre>{
+    <div class="event-body"><div class="stack"><section class="block"><h4>Input Messages</h4><div class="msg user"><div class="msg-head"><span class="msg-role">user</span></div><div class="msg-content"><div class="chat-text">Polish notrace HTML output and unify dashboard/session design.</div></div></div></section><section class="block"><h4>Output</h4><div class="msg-content"><div class="chat-text">Found renderer split. Will move both pages to one shared shell and standardize styles.</div></div></section><section class="block"><h4>Usage</h4><pre>{
   &quot;input&quot;: 2140,
   &quot;output&quot;: 116,
   &quot;cacheRead&quot;: 0,