@raquezha/notrace 0.1.2 → 0.2.0

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    }";

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

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