@raquezha/notrace 0.1.1 → 0.2.0

package/dist/notrace/report-app/client.js

@@ -0,0 +1,105 @@
+export const COPY_SCRIPT = `(() => {
+    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';
+        }
+      });
+    });
+
+    document.querySelectorAll('details[data-lazy-event-body]').forEach((details) => {
+      details.addEventListener('toggle', () => {
+        if (!details.open) return;
+        if (details.querySelector('.event-body')) return;
+        const html = decodeURIComponent(details.getAttribute('data-lazy-event-body') || '');
+        details.insertAdjacentHTML('beforeend', html);
+      }, { once: false });
+    });
+
+    const topBtn = document.querySelector('.back-to-top');
+    if (topBtn) {
+      const syncTopButton = () => {
+        const scrollable = document.documentElement.scrollHeight > window.innerHeight + 24;
+        const show = scrollable && window.scrollY > 200;
+        topBtn.classList.toggle('visible', show);
+      };
+      window.addEventListener('scroll', syncTopButton, { passive: true });
+      window.addEventListener('resize', syncTopButton);
+      syncTopButton();
+    }
+  })();`;
+export const DASHBOARD_SORT_SCRIPT = `(() => {
+    const table = document.querySelector('[data-dashboard-table]');
+    if (!table) return;
+    const tbody = table.querySelector('tbody');
+    if (!tbody) return;
+    const buttons = Array.from(document.querySelectorAll('[data-sort-key]'));
+    let currentKey = 'index';
+    let currentDir = 'desc';
+
+    function icon(dir) {
+      return dir === 'asc' ? '↑' : '↓';
+    }
+
+    function updateState() {
+      buttons.forEach(btn => {
+        const key = btn.getAttribute('data-sort-key');
+        const state = btn.querySelector('.sort-state');
+        if (!state) return;
+        state.textContent = key === currentKey ? icon(currentDir) : '';
+      });
+    }
+
+    function compare(a, b, key) {
+      if (key === 'index' || key === 'started' || key === 'tokens' || key === 'cost') {
+        return Number(a.dataset[key] || 0) - Number(b.dataset[key] || 0);
+      }
+      return String(a.dataset[key] || '').localeCompare(String(b.dataset[key] || ''));
+    }
+
+    function sortBy(key) {
+      const rows = Array.from(tbody.querySelectorAll('tr'));
+      rows.sort((a, b) => {
+        const result = compare(a, b, key);
+        return currentDir === 'asc' ? result : -result;
+      });
+      rows.forEach(row => tbody.appendChild(row));
+      updateState();
+    }
+
+    buttons.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const key = btn.getAttribute('data-sort-key') || 'index';
+        if (currentKey === key) currentDir = currentDir === 'asc' ? 'desc' : 'asc';
+        else {
+          currentKey = key;
+          currentDir = key === 'workflow' ? 'asc' : 'desc';
+        }
+        sortBy(currentKey);
+      });
+    });
+
+    sortBy(currentKey);
+  })();`;

package/dist/notrace/report-app/components/card.d.ts

@@ -0,0 +1,4 @@
+export declare function renderToolUseHtml(name: string, input: any): string;
+export declare function renderToolResultHtml(id: string, content: any, isError?: boolean): string;
+export declare function renderCollapsibleSection(title: string, body: string, open?: boolean): string;
+export declare function renderKeyValueList(items: Array<[string, unknown]>): string;

package/dist/notrace/report-app/components/card.js

@@ -0,0 +1,36 @@
+import { escapeHtml } from "../escape.js";
+const TOOL_USE_ICON = `<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>`;
+const TOOL_RESULT_ICON = `<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>`;
+function normalizeContent(value) {
+    return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+}
+function parseMaybeJson(value) {
+    if (typeof value !== "string")
+        return value;
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return value;
+    }
+}
+function renderToolCard(label, icon, content, options = {}) {
+    const headerStyle = options.headerStyle ? ` style="${options.headerStyle}"` : "";
+    const cardStyle = options.cardStyle ? ` style="${options.cardStyle}"` : "";
+    return `<div class="chat-tool-use"${cardStyle}><div class="chat-tool-header"${headerStyle}>${icon} ${escapeHtml(label)}</div><pre class="chat-tool-body">${escapeHtml(normalizeContent(content))}</pre></div>`;
+}
+export function renderToolUseHtml(name, input) {
+    return renderToolCard(name, TOOL_USE_ICON, parseMaybeJson(input));
+}
+export function renderToolResultHtml(id, content, isError = false) {
+    return renderToolCard(`Tool Result: ${id}`, TOOL_RESULT_ICON, content, {
+        headerStyle: isError ? "color: var(--err);" : "color: var(--muted);",
+        cardStyle: isError ? "border-color: rgba(239,127,127,0.3);" : undefined,
+    });
+}
+export function renderCollapsibleSection(title, body, open = false) {
+    return `<details class="panel collapsible"${open ? " open" : ""}><summary>${escapeHtml(title)}</summary><div>${body}</div></details>`;
+}
+export function renderKeyValueList(items) {
+    return `<div class="kv-list">${items.map(([k, v]) => `<div class="kv-row"><span class="kv-key">${escapeHtml(k)}</span><strong class="kv-value">${escapeHtml(v == null || v === "" ? "-" : v)}</strong></div>`).join("")}</div>`;
+}

package/dist/notrace/report-app/components/dashboard.d.ts

@@ -0,0 +1 @@
+export declare function renderDashboardBody(sessions: any[], options?: any): string;

package/dist/notrace/report-app/components/dashboard.js

@@ -0,0 +1,16 @@
+import { escapeHtml } from "../escape.js";
+import { formatDateDay, formatTimeMinutes, formatUsd, parseDate, taskDisplay, workflowClassName, workflowDisplayName } from "../format.js";
+import { wordmarkSvg } from "../shell.js";
+function renderDateCell(value) {
+    const date = parseDate(value);
+    if (!date)
+        return `<span>${escapeHtml(value)}</span>`;
+    return `<div class="date-cell"><strong>${escapeHtml(formatDateDay(value))}</strong><span>${escapeHtml(formatTimeMinutes(value))}</span></div>`;
+}
+export function renderDashboardBody(sessions, options = {}) {
+    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 homeHref = options?.indexHref || "index.html";
+    return `<div class="container"><section class="hero"><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"><div class="metric-card"><small>Sessions</small><strong>${sessions.length}</strong></div><div class="metric-card"><small>Total Tokens</small><strong>${totalTokens.toLocaleString()}</strong></div><div class="metric-card"><small>Total Cost</small><strong>${formatUsd(totalCost)}</strong></div></div></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>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 ? (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="hero-pill">${escapeHtml(s.repositoryName || "Unknown")}</span></td><td><span class="workflow-pill ${workflowClassName(workflow)}">${escapeHtml(workflowLabel)}</span></td><td>${renderDateCell(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><footer class="footer-note minimal">notrace • raquezha 2026</footer></div>`;
+}

package/dist/notrace/report-app/components/event.d.ts

@@ -0,0 +1,5 @@
+export declare function renderJsonBlock(title: string, value: unknown): string;
+export declare function eventBadgeClass(ev: any): string;
+export declare function eventTitle(ev: any): string;
+export declare function renderEventBody(ev: any): string;
+export declare function renderEventCard(ev: any): string;

package/dist/notrace/report-app/components/event.js

@@ -0,0 +1,42 @@
+import { escapeHtml } from "../escape.js";
+import { formatTimeSeconds } from "../format.js";
+import { renderMessages, renderUniversalMessageContent } from "./message.js";
+export function renderJsonBlock(title, value) {
+    return `<section class="block"><h4>${escapeHtml(title)}</h4><pre>${escapeHtml(typeof value === "string" ? value : JSON.stringify(value, null, 2))}</pre></section>`;
+}
+export function eventBadgeClass(ev) {
+    if (ev.type === "llm_completion")
+        return "badge badge-llm";
+    if (ev.type === "tool_start" || ev.type === "tool_end")
+        return ev.isError ? "badge badge-error" : "badge badge-tool";
+    return "badge badge-system";
+}
+export function eventTitle(ev) {
+    return ev.model || ev.toolName || ev.type;
+}
+export function renderEventBody(ev) {
+    const sections = [];
+    if (ev.type === "llm_completion") {
+        sections.push(renderMessages(ev.inputPayload?.messages));
+        if (ev.stopReason && ev.stopReason !== "stop" && ev.stopReason !== "toolUse")
+            sections.push(renderJsonBlock("Stop Reason", ev.stopReason));
+        if (ev.errorMessage)
+            sections.push(renderJsonBlock("Error Message", ev.errorMessage));
+        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(`<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(`<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));
+    }
+    return `<div class="event-body"><div class="stack">${sections.join("")}</div></div>`;
+}
+export function renderEventCard(ev) {
+    return `<details class="event" data-lazy-event-body="${escapeHtml(encodeURIComponent(renderEventBody(ev)))}"><summary><div class="event-main"><span class="${eventBadgeClass(ev)}">${escapeHtml(ev.type)}</span><span class="event-title">${escapeHtml(eventTitle(ev))}</span></div><span class="event-time">${escapeHtml(formatTimeSeconds(ev.timestamp))}</span></summary></details>`;
+}

package/dist/notrace/report-app/components/message.d.ts

@@ -0,0 +1,2 @@
+export declare function renderUniversalMessageContent(m: any): string;
+export declare function renderMessages(messages: any[] | undefined): string;

package/dist/notrace/report-app/components/message.js

@@ -0,0 +1,43 @@
+import { escapeHtml } from "../escape.js";
+import { renderToolResultHtml, renderToolUseHtml } from "./card.js";
+export function renderUniversalMessageContent(m) {
+    if (!m)
+        return "";
+    let html = "";
+    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) => {
+            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, block.is_error === true);
+            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>`;
+    }
+    if (Array.isArray(m.tool_calls)) {
+        html += m.tool_calls.map((tc) => {
+            if (tc.type === "function" && tc.function)
+                return renderToolUseHtml(tc.function.name, tc.function.arguments);
+            return "";
+        }).join("");
+    }
+    if (m.function_call)
+        html += renderToolUseHtml(m.function_call.name, m.function_call.arguments);
+    if (m.role === "tool")
+        html = renderToolResultHtml(m.tool_call_id || m.name || "unknown", m.content, m.is_error === true);
+    return html || `<div class="empty">Empty message</div>`;
+}
+export function renderMessages(messages) {
+    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">${renderUniversalMessageContent(m)}</div></div>`).join("")}</section>`;
+}

package/dist/notrace/report-app/dashboard-report.d.ts

@@ -0,0 +1 @@
+export declare function generateDashboardHtml(sessions: any[], options?: any): string;

package/dist/notrace/report-app/dashboard-report.js

@@ -0,0 +1,6 @@
+import { DASHBOARD_SORT_SCRIPT } from "./client.js";
+import { renderDashboardBody } from "./components/dashboard.js";
+import { shell } from "./shell.js";
+export function generateDashboardHtml(sessions, options = {}) {
+    return shell("notrace", renderDashboardBody(sessions, options), DASHBOARD_SORT_SCRIPT);
+}

package/dist/notrace/report-app/escape.d.ts

@@ -0,0 +1 @@
+export declare function escapeHtml(v: unknown): string;

package/dist/notrace/report-app/escape.js

@@ -0,0 +1,10 @@
+export function escapeHtml(v) {
+    const map = {
+        "&": "&",
+        "<": "&lt;",
+        ">": "&gt;",
+        "'": "&#39;",
+        '"': "&quot;",
+    };
+    return String(v ?? "").replace(/[&<>'"]/g, c => map[c]);
+}

package/dist/notrace/report-app/format.d.ts

@@ -0,0 +1,13 @@
+import type { DateValue, MaybeNumber, MaybeString, Repoish, Taskish } from "./types.js";
+export declare function parseDate(value: DateValue): Date | null;
+export declare function formatDateDay(value: DateValue): string;
+export declare function formatTimeMinutes(value: DateValue): string;
+export declare function formatTimeSeconds(value: DateValue): string;
+export declare function workflowDisplayName(workflow: MaybeString): string;
+export declare function workflowClassName(workflow: MaybeString): string;
+export declare function taskDisplay(taskish: Taskish): string;
+export declare function resolveRepoName(data: Repoish): string;
+export declare function formatUsd(value: MaybeNumber): string;
+export declare function formatTokens(value: MaybeNumber): string;
+export declare function formatMs(value: MaybeNumber): string;
+export declare function formatTelemetryStatus(value: MaybeString): string;

package/dist/notrace/report-app/format.js

@@ -0,0 +1,102 @@
+export function parseDate(value) {
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+export function formatDateDay(value) {
+    const date = parseDate(value);
+    return date ? date.toISOString().slice(0, 10) : String(value ?? "");
+}
+export function formatTimeMinutes(value) {
+    const date = parseDate(value);
+    return date ? date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false }) : String(value ?? "");
+}
+export function formatTimeSeconds(value) {
+    const date = parseDate(value);
+    return date ? date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false }) : String(value ?? "");
+}
+export function workflowDisplayName(workflow) {
+    switch (workflow) {
+        case "norpiv":
+            return "RPIV";
+        case "research":
+            return "Research";
+        case "generic":
+        default:
+            return "Generic";
+    }
+}
+export function workflowClassName(workflow) {
+    switch (workflow) {
+        case "norpiv":
+            return "workflow-rpiv";
+        case "research":
+            return "workflow-research";
+        case "generic":
+        default:
+            return "workflow-generic";
+    }
+}
+export function taskDisplay(taskish) {
+    const task = taskish?.task || taskish;
+    const workflow = task?.workflow || taskish?.workflow || "generic";
+    const taskId = task?.id ?? taskish?.taskId;
+    if (taskId) {
+        if (workflow === "research" && String(taskId).startsWith("branch:")) {
+            return `Branch ${String(taskId).slice(7)}`;
+        }
+        return String(taskId);
+    }
+    if (workflow === "research")
+        return "Open research";
+    if (workflow === "generic")
+        return "General session";
+    return "No active task";
+}
+export function resolveRepoName(data) {
+    const name = data?.repository?.name || data?.repositoryName || data?.repoName || "Repository";
+    const branch = data?.repository?.branch;
+    return branch ? `${name} @ ${branch}` : name;
+}
+export function formatUsd(value) {
+    const num = Number(value || 0);
+    if (num === 0)
+        return "$0";
+    return `$${num.toFixed(5)}`;
+}
+export function formatTokens(value) {
+    const num = Number(value || 0);
+    if (num >= 1_000_000)
+        return `${(num / 1_000_000).toFixed(2)}M`;
+    if (num >= 1_000)
+        return `${(num / 1_000).toFixed(1)}k`;
+    return num.toString();
+}
+export function formatMs(value) {
+    const ms = Number(value || 0);
+    if (!ms)
+        return "-";
+    const totalSeconds = Math.round(ms / 1000);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    if (hours)
+        return `${hours}h ${minutes}m`;
+    if (minutes)
+        return `${minutes}m ${seconds}s`;
+    return `${seconds}s`;
+}
+export function formatTelemetryStatus(value) {
+    switch (value) {
+        case "active":
+            return "Active";
+        case "loaded-disabled":
+            return "Loaded disabled";
+        case "loaded-inactive":
+            return "Loaded inactive";
+        case "absent":
+            return "Absent";
+        case "unknown":
+        default:
+            return "Unknown";
+    }
+}

package/dist/notrace/report-app/report.d.ts

@@ -0,0 +1 @@
+export declare function generateHtmlReport(data: any): string;

package/dist/notrace/report-app/report.js

@@ -0,0 +1,29 @@
+import { buildModelSummary, buildModelSwitches, groupByModel } from "./analytics.js";
+import { COPY_SCRIPT } from "./client.js";
+import { renderCollapsibleSection } from "./components/card.js";
+import { renderEventCard, renderJsonBlock } from "./components/event.js";
+import { escapeHtml } from "./escape.js";
+import { formatDateDay, formatMs, formatTelemetryStatus, formatTimeMinutes, formatTimeSeconds, formatTokens, formatUsd, parseDate, resolveRepoName, taskDisplay } from "./format.js";
+import { copyButton, exportButton, shell, wordmarkSvg } from "./shell.js";
+function formatDateLong(value) {
+    const date = parseDate(value);
+    if (!date)
+        return escapeHtml(value);
+    return `${escapeHtml(formatDateDay(value))} ${escapeHtml(formatTimeMinutes(value))}`;
+}
+export function generateHtmlReport(data) {
+    const visibleEvents = (data.events || []).filter((ev) => ev.type !== "session_start" && ev.type !== "turn_start");
+    const indexHref = data?.navigation?.indexHref || "../../index.html";
+    const task = data.task;
+    const modelStats = groupByModel(data.events || []);
+    const modelSwitches = buildModelSwitches(data.events || []);
+    const modelSummary = buildModelSummary(data.events || []);
+    const sortedModels = Object.entries(modelStats).sort((a, b) => Number(b[1]?.cost || 0) - Number(a[1]?.cost || 0));
+    const topSpender = sortedModels[0]?.[0] || null;
+    const mostUsed = [...sortedModels].sort((a, b) => Number(b[1]?.count || 0) - Number(a[1]?.count || 0))[0]?.[0] || null;
+    const biggestSwitch = [...modelSwitches].sort((a, b) => Number(b?.cost || 0) - Number(a?.cost || 0))[0] || null;
+    const modelHtml = sortedModels.length ? renderCollapsibleSection("Models", `<div style="padding: 16px; border-bottom: 1px solid var(--border); display: grid; gap: 8px;"><div style="color: var(--muted);">Top spender: <strong style="color: var(--text);">${escapeHtml(topSpender || "unknown")}</strong></div><div style="color: var(--muted);">Most used: <strong style="color: var(--text);">${escapeHtml(mostUsed || "unknown")}</strong></div></div><div style="overflow-x: auto;"><table><thead><tr><th>Model</th><th class="num-cell">Calls</th><th class="num-cell">Input</th><th class="num-cell">Output</th><th class="num-cell">Tokens</th><th class="num-cell">Cost</th><th class="num-cell">Avg Cost/Call</th><th class="num-cell">Avg Tokens/Call</th><th class="num-cell">Errors</th></tr></thead><tbody>${sortedModels.map(([name, stats]) => `<tr><td><strong>${escapeHtml(name)}</strong>${name === topSpender ? ` <span class="badge badge-llm">top spend</span>` : ""}${name === mostUsed ? ` <span class="badge badge-tool">most used</span>` : ""}</td><td class="num-cell">${stats.count}</td><td class="num-cell">${formatTokens(stats.inputTokens)}</td><td class="num-cell">${formatTokens(stats.outputTokens)}</td><td class="num-cell">${formatTokens(stats.totalTokens)}</td><td class="num-cell">${formatUsd(stats.cost)}</td><td class="num-cell">${formatUsd(stats.count ? stats.cost / stats.count : 0)}</td><td class="num-cell">${formatTokens(stats.count ? stats.totalTokens / stats.count : 0)}</td><td class="num-cell">${stats.errors}</td></tr>`).join("")}</tbody></table></div>`, false) : "";
+    const switchHtml = modelSwitches.length ? renderCollapsibleSection("Model Switches", `<div style="padding: 16px; border-bottom: 1px solid var(--border); color: var(--muted);">Biggest switch cost: <strong style="color: var(--text);">${biggestSwitch ? `${escapeHtml(biggestSwitch.from)} → ${escapeHtml(biggestSwitch.to)} (${formatUsd(biggestSwitch.cost)})` : "-"}</strong></div><div style="overflow-x: auto;"><table><thead><tr><th>Switch</th><th class="num-cell">Cost Impact</th><th class="num-cell">New Context Tokens</th><th class="num-cell">Provider Changed</th><th>Details</th></tr></thead><tbody>${modelSwitches.map((sw) => `<tr><td><span class="badge badge-system">${escapeHtml(sw.from)}</span> → <span class="badge badge-llm">${escapeHtml(sw.to)}</span></td><td class="num-cell">${formatUsd(sw.cost)}</td><td class="num-cell">${formatTokens(sw.tokens)}</td><td class="num-cell">${sw.providerChanged ? "Yes" : "No"}</td><td><span class="session-sub">#${sw.index} • ${escapeHtml(formatTimeSeconds(sw.timestamp))} • ${Math.round(sw.timeDelta / 1000)}s since previous completion</span></td></tr>`).join("")}</tbody></table></div>`, false) : "";
+    const body = `<div class="container" id="top"><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-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(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"><div class="metric-card"><small>Total Cost</small><strong>${formatUsd(data.activity?.totals?.totalCostUsd)}</strong></div><div class="metric-card"><small>Total Tokens</small><strong>${Number(data.activity?.totals?.totalTokens || 0).toLocaleString()}</strong></div><div class="metric-card"><small>Duration</small><strong>${formatMs(data.session?.durationMs || data.activity?.durationMs)}</strong></div></div><div class="tiny-breakdown"><span>Input <strong>${formatTokens(data.activity?.totals?.inputTokens || 0)}</strong></span><span>Output <strong>${formatTokens(data.activity?.totals?.outputTokens || 0)}</strong></span><span>Cache Read <strong>${formatTokens(data.activity?.totals?.cacheReadTokens || 0)}</strong></span><span>Cache Write <strong>${formatTokens(data.activity?.totals?.cacheWriteTokens || 0)}</strong></span><span>Switches <strong>${modelSummary ? modelSummary.switchCount : 0}</strong></span><span>Unique Models <strong>${modelSummary ? modelSummary.uniqueModels : 0}</strong></span><span>Tool Calls <strong>${Number(data.activity?.toolCallCount || 0)}</strong></span><span>Events <strong>${visibleEvents.length}</strong></span></div></section>${renderCollapsibleSection("Run Summary", `<div style="padding: 18px 20px; display: grid; gap: 14px;"><div style="color: var(--muted); line-height: 1.7;"><strong style="color: var(--text);">${escapeHtml(taskDisplay(task || { workflow: "generic", id: null }))}</strong> ran for <strong style="color: var(--text);">${formatMs(data.session?.durationMs || data.activity?.durationMs)}</strong>, used <strong style="color: var(--text);">${formatTokens(data.activity?.totals?.totalTokens || 0)}</strong> tokens, cost <strong style="color: var(--text);">${formatUsd(data.activity?.totals?.totalCostUsd)}</strong>.</div><div class="tiny-breakdown" style="margin: 0;"><span>Session <strong>${escapeHtml(data.session?.id || data.traceId || "-")}</strong></span><span>Started <strong>${formatDateLong(data.session?.startedAt)}</strong></span><span>Workflow <strong>${escapeHtml(task?.workflow || "generic")}</strong></span><span>LLM Calls <strong>${Number(data.activity?.llmCallCount || 0)}</strong></span><span>Tool Errors <strong>${Number(data.activity?.toolErrorCount || 0)}</strong></span><span>Providers <strong>${escapeHtml((data.conditions?.providers || []).join(", ") || "-")}</strong></span></div></div>`, false)}${renderCollapsibleSection("Timeline", `<div style="padding: 16px;"><div class="timeline">${visibleEvents.map(renderEventCard).join("") || `<div class="empty">No visible events captured.</div>`}</div></div>`, false)}${modelHtml}${switchHtml}${renderCollapsibleSection("Dynamic Extension Telemetry", `<div style="padding: 16px;" class="stack">${Object.entries(data.telemetry?.extensions || {}).length ? Object.entries(data.telemetry.extensions).map(([name, ext]) => renderJsonBlock(`${name} (${formatTelemetryStatus(ext?.status)})`, { summary: ext?.summary || null, ...ext?.details })).join("") : `<div class="empty">No extension telemetry captured for this run.</div>`}</div>`, false)}<footer class="footer-note stack"><div class="footer-brand">notrace</div><div class="footer-tagline">Local-first retrospective engine</div><div class="footer-meta"><a href="https://opensource.org/licenses/MIT">MIT</a></div></footer></div>`;
+    return shell(`notrace - ${data.traceId}`, body, COPY_SCRIPT);
+}

package/dist/notrace/report-app/shell.d.ts

@@ -0,0 +1,5 @@
+export declare function wordmarkSvg(className?: string): string;
+export declare function faviconHref(): string;
+export declare function copyButton(value: string, label: string, className?: string): string;
+export declare function exportButton(data: any): string;
+export declare function shell(title: string, body: string, script?: string): string;

package/dist/notrace/report-app/shell.js

@@ -0,0 +1,19 @@
+import { escapeHtml } from "./escape.js";
+import { STYLES } from "./styles.js";
+export function wordmarkSvg(className = "wordmark") {
+    return `<svg class="${escapeHtml(className)}" 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"/><stop offset="100%" stop-color="#EDE2D2"/></linearGradient></defs><g id="trace-icon" transform="translate(1 -18) scale(0.93)"><path d="M6,50 C16,18 26,18 36,50 C46,82 54,82 60,50 C64,30 68,30 71,50" fill="none" stroke="url(#fadeGrad)" stroke-width="4" stroke-linecap="round"/><line x1="74" y1="50" x2="79" y2="50" stroke="#D9C9B5" stroke-width="4" stroke-linecap="round" stroke-opacity="0.6"/><circle cx="85" cy="50" r="2.2" fill="#D9C9B5" opacity="0.5"/><circle cx="90" cy="50" r="1.4" fill="#EDE2D2" opacity="0.32"/><circle cx="94" cy="50" r="0.9" fill="#EDE2D2" opacity="0.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>`;
+}
+export function faviconHref() {
+    const svg = `<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img"><title>notrace logo mark</title><desc>A wave that smooths into a flat line, then fades into dots — color shifts from trace orange to no cream as it dissolves.</desc><defs><linearGradient id="fadeGrad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#E2754A"/><stop offset="100%" stop-color="#EDE2D2"/></linearGradient></defs><g id="trace-icon"><path d="M6,50 C16,18 26,18 36,50 C46,82 54,82 60,50 C64,30 68,30 71,50" fill="none" stroke="url(#fadeGrad)" stroke-width="4" stroke-linecap="round"/><line x1="74" y1="50" x2="79" y2="50" stroke="#D9C9B5" stroke-width="4" stroke-linecap="round" stroke-opacity="0.6"/><circle cx="85" cy="50" r="2.2" fill="#D9C9B5" opacity="0.5"/><circle cx="90" cy="50" r="1.4" fill="#EDE2D2" opacity="0.32"/><circle cx="94" cy="50" r="0.9" fill="#EDE2D2" opacity="0.15"/></g></svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+export function copyButton(value, label, className = "copy-btn") {
+    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>`;
+}
+export function exportButton(data) {
+    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) => e.type === "llm_completion").map((e) => ({ 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>`;
+}
+export function shell(title, body, script = "") {
+    return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${escapeHtml(title)}</title><link rel="icon" href="${faviconHref()}"><style>${STYLES}</style></head><body>${body}${script ? `<script>${script}</script>` : ""}</body></html>`;
+}

package/dist/notrace/report-app/styles.d.ts

@@ -0,0 +1 @@
+export declare const STYLES = ":root {\n      --bg: #0c0b0a;\n      --panel: rgba(255,255,255,0.04);\n      --panel-strong: rgba(255,255,255,0.06);\n      --text: #ece3da;\n      --muted: rgba(236,227,218,0.68);\n      --accent: #d88462;\n      --accent-soft: rgba(216,132,98,0.12);\n      --border: rgba(255,255,255,0.08);\n      --shadow: 0 20px 50px rgba(0,0,0,0.45);\n      --code: #090807;\n      --err: #ef7f7f;\n      --rpiv-fg: #f3be8a;\n      --rpiv-bg: rgba(243,190,138,0.12);\n      --rpiv-border: rgba(243,190,138,0.26);\n      --research-fg: #8ec5ff;\n      --research-bg: rgba(142,197,255,0.12);\n      --research-border: rgba(142,197,255,0.24);\n      --generic-fg: #b9b4ae;\n      --generic-bg: rgba(185,180,174,0.12);\n      --generic-border: rgba(185,180,174,0.2);\n    }\n    * { box-sizing: border-box; }\n    html { color-scheme: dark; }\n    body {\n      margin: 0;\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n      background: var(--bg);\n      color: var(--text);\n      line-height: 1.5;\n      background-image: radial-gradient(circle at 50% -10%, rgba(216,132,98,0.14), transparent 45%);\n      background-attachment: fixed;\n    }\n    a { color: inherit; }\n    .container { max-width: 1120px; margin: 0 auto; padding: 32px 20px 64px; }\n    .hero, .panel {\n      background: var(--panel);\n      border: 1px solid var(--border);\n      border-radius: 24px;\n      box-shadow: var(--shadow);\n      backdrop-filter: blur(10px);\n    }\n    .hero { padding: 28px; margin-bottom: 24px; }\n    .hero-top {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 16px;\n      align-items: start;\n    }\n    .hero-split {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 16px;\n      align-items: start;\n    }\n    .hero-right {\n      display: grid;\n      gap: 12px;\n      justify-items: end;\n      min-width: 0;\n    }\n    .hero-session {\n      display: grid;\n      gap: 4px;\n      text-align: right;\n      min-width: 0;\n    }\n    .hero-meta {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n      justify-content: flex-end;\n    }\n    .brand { margin-bottom: 10px; }\n    .brand-link {\n      display: inline-flex;\n      align-items: flex-start;\n      text-decoration: none;\n    }\n    .wordmark {\n      width: 340px;\n      height: 112px;\n      display: block;\n      overflow: visible;\n    }\n    .subtitle { margin: 10px 0 0; color: var(--muted); }\n    .session-subtitle {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      flex-wrap: wrap;\n    }\n    .session-id-chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      max-width: 100%;\n      padding: 6px 8px 6px 10px;\n      border: 1px solid var(--border);\n      border-radius: 999px;\n      background: rgba(0,0,0,0.18);\n      color: var(--text);\n      font-family: \"SFMono-Regular\", ui-monospace, Menlo, Monaco, Consolas, monospace;\n      font-size: 0.78rem;\n      word-break: break-all;\n    }\n    .copy-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 26px;\n      height: 26px;\n      border: 1px solid rgba(255,255,255,0.12);\n      border-radius: 999px;\n      background: rgba(255,255,255,0.04);\n      color: var(--muted);\n      cursor: pointer;\n      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;\n    }\n    .copy-btn:hover, .copy-btn.copied {\n      color: var(--text);\n      border-color: rgba(216,132,98,0.45);\n      background: var(--accent-soft);\n    }\n    .meta {\n      display: flex;\n      gap: 8px;\n      flex-wrap: wrap;\n      justify-content: flex-end;\n      align-items: center;\n      margin-top: 16px;\n    }\n    .pill, .workflow-pill, .sort-btn, .export-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      text-decoration: none;\n      padding: 8px 12px;\n      border: 1px solid var(--border);\n      border-radius: 999px;\n      background: rgba(255,255,255,0.03);\n      color: var(--muted);\n      font-size: 0.86rem;\n      font-weight: 600;\n    }\n    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 16px; margin: 24px 0; }\n    .metric-card {\n      background: var(--panel-strong);\n      border: 1px solid var(--border);\n      border-radius: 18px;\n      padding: 18px;\n      min-width: 0;\n    }\n    .metric-card small { display: block; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; }\n    .metric-card strong { display: block; margin-top: 8px; font-size: clamp(1rem, 2vw, 1.55rem); overflow-wrap: anywhere; }\n    .panel { padding: 0; overflow: hidden; }\n    .section-title { margin: 0; padding: 20px 22px; border-bottom: 1px solid var(--border); font-size: 1rem; }\n    .summary-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }\n    .kv-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n      gap: 16px;\n    }\n    .kv-card {\n      background: rgba(0,0,0,0.18);\n      border: 1px solid var(--border);\n      border-radius: 16px;\n      padding: 16px;\n    }\n    .kv-title {\n      font-size: 0.72rem;\n      text-transform: uppercase;\n      color: var(--accent);\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      margin-bottom: 10px;\n    }\n    .kv-list { display: grid; gap: 8px; }\n    .kv-row { display: flex; justify-content: space-between; gap: 12px; align-items: start; }\n    .kv-key { color: var(--muted); }\n    .kv-value { color: var(--text); text-align: right; word-break: break-word; }\n    .tiny-breakdown {\n      margin-top: -10px;\n      margin-bottom: 8px;\n      color: var(--muted);\n      font-size: 0.82rem;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px 14px;\n    }\n    .tiny-breakdown strong { color: var(--text); font-size: inherit; font-weight: 600; }\n    .collapsible { margin-top: 24px; }\n    .collapsible > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; font-size: 1rem; font-weight: 700; }\n    .collapsible > summary::-webkit-details-marker { display: none; }\n    .collapsible > summary:hover { background: rgba(255,255,255,0.02); }\n    .collapsible > summary::after { content: \"\u25BE\"; color: var(--muted); font-size: 0.9rem; }\n    .collapsible:not([open]) > summary::after { content: \"\u25B8\"; }\n    .empty { padding: 32px 22px; color: var(--muted); }\n    table { width: 100%; border-collapse: collapse; }\n    th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }\n    th { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }\n    .num-cell { text-align: right; }\n    tr:last-child td { border-bottom: 0; }\n    .col-index { width: 64px; }\n    .sortable-head { padding: 10px 18px; }\n    .sort-btn {\n      padding: 0;\n      border: 0;\n      border-radius: 0;\n      background: transparent;\n      font: inherit;\n      text-transform: inherit;\n      letter-spacing: inherit;\n      cursor: pointer;\n    }\n    .sort-label { color: inherit; }\n    .sort-state { color: var(--accent); font-size: 0.9rem; min-width: 16px; text-align: left; line-height: 1; }\n    .index-cell { color: var(--muted); font-variant-numeric: tabular-nums; }\n    .session-link { text-decoration: none; }\n    .session-link strong { display: block; }\n    .session-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; }\n    .workflow-pill { padding: 6px 10px; font-size: 0.78rem; }\n    .workflow-rpiv { color: var(--rpiv-fg); background: var(--rpiv-bg); border-color: var(--rpiv-border); }\n    .workflow-research { color: var(--research-fg); background: var(--research-bg); border-color: var(--research-border); }\n    .workflow-generic { color: var(--generic-fg); background: var(--generic-bg); border-color: var(--generic-border); }\n    .date-cell { display: grid; gap: 2px; }\n    .date-cell strong { font-size: 0.92rem; }\n    .date-cell span { color: var(--muted); font-size: 0.82rem; }\n    .timeline { display: grid; gap: 14px; }\n    .event {\n      background: var(--panel);\n      border: 1px solid var(--border);\n      border-radius: 18px;\n      overflow: hidden;\n    }\n    .event summary {\n      list-style: none;\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      gap: 14px;\n      align-items: center;\n      padding: 16px 18px;\n    }\n    .event summary::-webkit-details-marker { display: none; }\n    .event summary:hover { background: rgba(255,255,255,0.02); }\n    .event-main { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      padding: 4px 8px;\n      border-radius: 999px;\n      font-size: 0.72rem;\n      font-weight: 800;\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n      border: 1px solid var(--border);\n      background: rgba(255,255,255,0.03);\n    }\n    .badge-llm { color: var(--accent); background: var(--accent-soft); border-color: rgba(216,132,98,0.24); }\n    .badge-tool { color: #8ec5ff; background: rgba(142,197,255,0.1); border-color: rgba(142,197,255,0.22); }\n    .badge-system { color: var(--muted); }\n    .badge-error { color: var(--err); background: rgba(239,127,127,0.12); border-color: rgba(239,127,127,0.24); }\n    .event-title { font-weight: 700; }\n    .event-time { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }\n    .event-body { padding: 0 18px 18px; }\n    .stack { display: grid; gap: 12px; }\n    .block {\n      background: rgba(0,0,0,0.18);\n      border: 1px solid var(--border);\n      border-radius: 14px;\n      overflow: hidden;\n    }\n    .block h4 {\n      margin: 0;\n      padding: 10px 12px;\n      border-bottom: 1px solid var(--border);\n      color: var(--muted);\n      font-size: 0.8rem;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n    }\n    pre {\n      margin: 0;\n      padding: 14px;\n      overflow-x: auto;\n      white-space: pre-wrap;\n      word-break: break-word;\n      font-family: \"SFMono-Regular\", ui-monospace, Menlo, Monaco, Consolas, monospace;\n      font-size: 0.84rem;\n      background: var(--code);\n    }\n    .msg { border-bottom: 1px solid var(--border); }\n    .msg:last-child { border-bottom: 0; }\n    .msg-head {\n      display: flex;\n      justify-content: space-between;\n      gap: 12px;\n      padding: 10px 12px;\n      border-bottom: 1px solid var(--border);\n      background: rgba(255,255,255,0.02);\n    }\n    .msg-role { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }\n    .msg.user .msg-role { color: #8ec5ff; }\n    .msg.assistant .msg-role { color: var(--accent); }\n    .msg-content { padding: 14px; }\n    .chat-text {\n      white-space: pre-wrap;\n      word-break: break-word;\n      font-size: 0.95rem;\n      line-height: 1.6;\n      margin-bottom: 12px;\n    }\n    .chat-text:last-child { margin-bottom: 0; }\n    .chat-tool-use {\n      background: rgba(0,0,0,0.3);\n      border: 1px solid var(--border);\n      border-radius: 8px;\n      overflow: hidden;\n      margin-bottom: 12px;\n    }\n    .chat-tool-use:last-child { margin-bottom: 0; }\n    .chat-tool-header {\n      background: rgba(255,255,255,0.04);\n      padding: 8px 12px;\n      font-size: 0.8rem;\n      font-family: \"SFMono-Regular\", ui-monospace, Menlo, Monaco, Consolas, monospace;\n      color: #8ec5ff;\n      border-bottom: 1px solid var(--border);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .chat-tool-body {\n      padding: 12px;\n      margin: 0;\n      background: transparent;\n      border: none;\n      max-height: 400px;\n      overflow-y: auto;\n    }\n    .footer-note {\n      margin-top: 22px;\n      color: var(--muted);\n      text-align: center;\n      padding: 10px 0 0;\n      font-family: inherit;\n    }\n    .footer-note.minimal {\n      font-size: 0.84rem;\n      font-variant-caps: all-small-caps;\n      letter-spacing: 0.14em;\n      line-height: 1;\n    }\n    .footer-note.stack {\n      display: grid;\n      gap: 6px;\n      line-height: 1.2;\n    }\n    .footer-brand {\n      color: var(--text);\n      font-size: 0.88rem;\n      font-weight: 700;\n      font-variant-caps: all-small-caps;\n      letter-spacing: 0.16em;\n    }\n    .footer-tagline {\n      font-size: 0.78rem;\n      letter-spacing: 0.08em;\n      font-variant-caps: all-small-caps;\n    }\n    .footer-meta {\n      font-size: 0.76rem;\n      font-variant-caps: all-small-caps;\n      letter-spacing: 0.14em;\n    }\n    .footer-meta a {\n      color: inherit;\n      text-decoration: none;\n      border-bottom: 1px solid rgba(236,227,218,0.22);\n    }\n    .footer-meta a:hover {\n      color: var(--text);\n      border-bottom-color: rgba(236,227,218,0.45);\n    }\n    .export-btn {\n      cursor: pointer;\n      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;\n    }\n    .export-btn:hover, .export-btn.copied {\n      color: var(--text);\n      border-color: rgba(216,132,98,0.45);\n      background: var(--accent-soft);\n    }\n    .back-to-top {\n      position: fixed;\n      right: 20px;\n      bottom: 20px;\n      z-index: 20;\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      border: 1px solid var(--border);\n      border-radius: 999px;\n      background: rgba(12,11,10,0.88);\n      color: var(--text);\n      text-decoration: none;\n      box-shadow: var(--shadow);\n      backdrop-filter: blur(10px);\n      opacity: 0;\n      pointer-events: none;\n      transform: translateY(8px);\n      transition: opacity 160ms ease, transform 160ms ease, border-color 120ms ease, background 120ms ease;\n    }\n    .back-to-top.visible {\n      opacity: 1;\n      pointer-events: auto;\n      transform: translateY(0);\n    }\n    .back-to-top:hover { border-color: rgba(216,132,98,0.45); background: rgba(216,132,98,0.12); }\n      .container { padding: 20px 14px 48px; }\n      .hero { padding: 20px; }\n      .hero-top, .hero-split { grid-template-columns: 1fr; }\n      .meta, .hero-meta { justify-content: flex-start; margin-top: 8px; }\n      .hero-right, .hero-session { justify-items: start; text-align: left; }\n      .wordmark { width: min(280px, 100%); height: auto; }\n      .metrics { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }\n      th:nth-child(5), td:nth-child(5) { display: none; }\n      .event summary { align-items: flex-start; }\n    }";