@raquezha/notrace 0.1.2 → 0.2.0

package/extensions/notrace/report-app/format.ts

@@ -0,0 +1,107 @@
+import type { DateValue, MaybeNumber, MaybeString, Repoish, Taskish } from "./types.js";
+
+export function parseDate(value: DateValue): Date | null {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+export function formatDateDay(value: DateValue): string {
+  const date = parseDate(value);
+  return date ? date.toISOString().slice(0, 10) : String(value ?? "");
+}
+
+export function formatTimeMinutes(value: DateValue): string {
+  const date = parseDate(value);
+  return date ? date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false }) : String(value ?? "");
+}
+
+export function formatTimeSeconds(value: DateValue): string {
+  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: MaybeString): string {
+  switch (workflow) {
+    case "norpiv":
+      return "RPIV";
+    case "research":
+      return "Research";
+    case "generic":
+    default:
+      return "Generic";
+  }
+}
+
+export function workflowClassName(workflow: MaybeString): string {
+  switch (workflow) {
+    case "norpiv":
+      return "workflow-rpiv";
+    case "research":
+      return "workflow-research";
+    case "generic":
+    default:
+      return "workflow-generic";
+  }
+}
+
+export function taskDisplay(taskish: Taskish): string {
+  const task = taskish?.task || taskish;
+  const workflow = task?.workflow || taskish?.workflow || "generic";
+  const taskId = (task as any)?.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: Repoish): string {
+  const name = data?.repository?.name || data?.repositoryName || data?.repoName || "Repository";
+  const branch = data?.repository?.branch;
+  return branch ? `${name} @ ${branch}` : name;
+}
+
+export function formatUsd(value: MaybeNumber): string {
+  const num = Number(value || 0);
+  if (num === 0) return "$0";
+  return `$${num.toFixed(5)}`;
+}
+
+export function formatTokens(value: MaybeNumber): string {
+  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: MaybeNumber): string {
+  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: MaybeString): string {
+  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/extensions/notrace/report-app/report.ts

@@ -0,0 +1,33 @@
+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: string | number): string {
+  const date = parseDate(value);
+  if (!date) return escapeHtml(value);
+  return `${escapeHtml(formatDateDay(value))} ${escapeHtml(formatTimeMinutes(value))}`;
+}
+
+export function generateHtmlReport(data: any): string {
+  const visibleEvents = (data.events || []).filter((ev: any) => 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: any, b: any) => Number(b[1]?.cost || 0) - Number(a[1]?.cost || 0));
+  const topSpender = sortedModels[0]?.[0] || null;
+  const mostUsed = [...sortedModels].sort((a: any, b: any) => Number(b[1]?.count || 0) - Number(a[1]?.count || 0))[0]?.[0] || null;
+  const biggestSwitch = [...modelSwitches].sort((a: any, b: any) => 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]: [string, any]) => `<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: any) => `<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]: [string, any]) => 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/extensions/notrace/report-app/shell.ts

@@ -0,0 +1,24 @@
+import { escapeHtml } from "./escape.js";
+import { STYLES } from "./styles.js";
+
+export function wordmarkSvg(className = "wordmark"): string {
+  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(): string {
+  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: string, label: string, className = "copy-btn"): string {
+  return `<button class="${escapeHtml(className)}" type="button" data-copy-value="${escapeHtml(value)}" aria-label="Copy ${escapeHtml(label)}" title="Copy ${escapeHtml(label)}"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button>`;
+}
+
+export function exportButton(data: any): string {
+  const payload = JSON.stringify({ kind: "notrace-export", traceId: data.traceId, repository: data.repository?.name, branch: data.repository?.branch, task: data.task, metrics: data.activity?.totals, summary: data.telemetry?.extensions?.noheadroom?.summary, events: (data.events || []).filter((e: any) => e.type === "llm_completion").map((e: any) => ({ model: e.model, input: e.inputPayload?.messages, output: e.outputContent })) });
+  return `<button class="export-btn" type="button" data-copy-value="${escapeHtml(payload)}" title="Copy session data for LLM/Agent context"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg><span>Export</span></button>`;
+}
+
+export function shell(title: string, body: string, script = ""): string {
+  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/extensions/notrace/report-app/styles.ts

@@ -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; }
+    }`;

package/extensions/notrace/report-app/types.ts

@@ -0,0 +1,35 @@
+export type WorkflowName = "norpiv" | "research" | "generic" | string;
+
+export type TaskLike = {
+  workflow?: WorkflowName | null;
+  id?: string | null;
+};
+
+export type Taskish = {
+  task?: TaskLike | null;
+  workflow?: WorkflowName | null;
+  taskId?: string | null;
+};
+
+export type RepositoryLike = {
+  name?: string | null;
+  branch?: string | null;
+};
+
+export type Repoish = {
+  repository?: RepositoryLike | null;
+  repositoryName?: string | null;
+  repoName?: string | null;
+};
+
+export type StatusLike = {
+  status?: string | null;
+};
+
+export type EventLike = {
+  type?: string | null;
+};
+
+export type DateValue = string | number;
+export type MaybeNumber = number | null | undefined;
+export type MaybeString = string | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raquezha/notrace",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Zero-dependency, local-first interactive HTML Trace Viewer for the Pi Coding Agent",
   "main": "dist/notrace/index.js",
   "types": "dist/notrace/index.d.ts",