@raquezha/notrace 0.0.4 → 0.0.6

package/extensions/notrace/types.ts

@@ -0,0 +1,108 @@
+export type NotraceMetrics = {
+  totalTokens: number;
+  totalCost: number;
+  turnCount: number;
+  toolCallCount: number;
+  toolErrorCount: number;
+};
+
+export type WorkflowContext = {
+  workflow: string;
+  taskId: string | null;
+  taskPath: string | null;
+  taskDir: string | null;
+};
+
+export type NotraceEvent = {
+  type: string;
+  timestamp: number;
+  [key: string]: any;
+};
+
+export type NotraceLocation = {
+  notraceDir: string;
+  outputDir: string;
+  context: WorkflowContext | null;
+};
+
+export type NotraceCaptureMode = "metadata" | "redacted" | "full";
+
+export type NotraceHarnessInfo = {
+  name: string;
+  adapter: string;
+  version: string | null;
+};
+
+export type NotraceRepositoryInfo = {
+  name: string;
+  cwd: string;
+};
+
+export type NotraceSessionInfo = {
+  id: string;
+  startedAt: string;
+  endedAt: string;
+  durationMs: number;
+  shutdownReason: string | null;
+};
+
+export type NotraceTaskInfo = {
+  workflow: string;
+  id: string | null;
+  path: string | null;
+  dir: string | null;
+};
+
+export type NotraceConditions = {
+  harness: NotraceHarnessInfo;
+  models: string[];
+  providers: string[];
+  extensions: string[];
+};
+
+export type NotraceActivityTotals = {
+  inputTokens: number;
+  outputTokens: number;
+  cacheReadTokens: number;
+  cacheWriteTokens: number;
+  totalTokens: number;
+  totalCostUsd: number;
+};
+
+export type NotraceActivity = {
+  turnCount: number;
+  llmCallCount: number;
+  toolCallCount: number;
+  toolErrorCount: number;
+  durationMs: number;
+  totals: NotraceActivityTotals;
+};
+
+export type NotraceExtensionTelemetryStatus = "absent" | "loaded-disabled" | "loaded-inactive" | "active" | "unknown";
+
+export type NotraceExtensionTelemetry = {
+  loaded: boolean;
+  enabled: boolean | null;
+  active: boolean | null;
+  status: NotraceExtensionTelemetryStatus;
+  summary: string | null;
+  details: Record<string, unknown>;
+};
+
+export type NotraceTelemetry = {
+  extensions: Record<string, NotraceExtensionTelemetry>;
+};
+
+export type NotraceRunRecord = {
+  kind: "notrace-run";
+  schemaVersion: number;
+  traceId: string;
+  repository: NotraceRepositoryInfo;
+  session: NotraceSessionInfo;
+  task: NotraceTaskInfo | null;
+  captureMode: NotraceCaptureMode;
+  conditions: NotraceConditions;
+  activity: NotraceActivity;
+  telemetry: NotraceTelemetry;
+  events: NotraceEvent[];
+};

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@raquezha/notrace",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Zero-dependency, local-first interactive HTML Trace Viewer for the Pi Coding Agent",
-  "main": "dist/notrace.js",
-  "types": "dist/notrace.d.ts",
+  "main": "dist/notrace/index.js",
+  "types": "dist/notrace/index.d.ts",
   "type": "module",
   "scripts": {
     "build": "tsc",
+    "render:samples": "npm run build && node ./templates/render-samples.mjs",
     "prepare": "npm run build"
   },
   "peerDependencies": {

package/templates/README.md

@@ -0,0 +1,24 @@
+# notrace template fixtures
+
+Source of truth for notrace HTML review.
+
+Files:
+- `dashboard.sample.json` -> mock data for `.notrace/index.html`
+- `session.sample.json` -> base mock data for `.notrace/sessions/<id>/notrace.html`
+- `dashboard.sample.html` -> rendered dashboard preview
+- `session.sample.html` -> standalone rendered session preview
+- `sessions/<id>/notrace.html` -> clone-safe session pages linked from dashboard preview
+- `render-samples.mjs` -> rebuild previews from renderer
+- `notrace-logo.preview.png` -> rendered logo inspection screenshot
+
+Workflow:
+1. Edit `extensions/notrace/renderer.ts`
+2. Run `npm run render:samples` in `packages/notrace`
+3. Open sample HTML files and comment on visual/result changes
+4. Use `notrace-logo.preview.png` to inspect current combined logo lockup quickly
+
+Rule:
+- If renderer changes, refresh sample HTML in same change.
+- Dashboard preview links must resolve inside cloned repo with no local runtime state.
+- Sample JSON should stay stable unless new UI state needs coverage.
+- Quick-look hover panels are intentionally deferred; homepage remains scan-first plus one-click open.

package/templates/dashboard.sample.html

@@ -0,0 +1,361 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>notrace</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20role%3D%22img%22%3E%3Ctitle%3Enotrace%20logo%20mark%3C%2Ftitle%3E%3Cdesc%3EA%20wave%20that%20smooths%20into%20a%20flat%20line%2C%20then%20fades%20into%20dots%20%E2%80%94%20color%20shifts%20from%20trace%20orange%20to%20no%20cream%20as%20it%20dissolves.%3C%2Fdesc%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22fadeGrad%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23E2754A%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23EDE2D2%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22trace-icon%22%3E%3Cpath%20d%3D%22M6%2C50%20C16%2C18%2026%2C18%2036%2C50%20C46%2C82%2054%2C82%2060%2C50%20C64%2C30%2068%2C30%2071%2C50%22%20fill%3D%22none%22%20stroke%3D%22url(%23fadeGrad)%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2274%22%20y1%3D%2250%22%20x2%3D%2279%22%20y2%3D%2250%22%20stroke%3D%22%23D9C9B5%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%2285%22%20cy%3D%2250%22%20r%3D%222.2%22%20fill%3D%22%23D9C9B5%22%20opacity%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2250%22%20r%3D%221.4%22%20fill%3D%22%23EDE2D2%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%2294%22%20cy%3D%2250%22%20r%3D%220.9%22%20fill%3D%22%23EDE2D2%22%20opacity%3D%220.15%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E">
+  <style>
+    :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;
+    }
+    .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); }
+    .meta {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      align-items: center;
+      margin-top: 16px;
+    }
+    .pill, .workflow-pill, .sort-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(170px, 1fr)); gap: 16px; margin: 24px 0; }
+    .metric-card {
+      background: var(--panel-strong);
+      border: 1px solid var(--border);
+      border-radius: 18px;
+      padding: 18px;
+    }
+    .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: 1.55rem; }
+    .panel { padding: 0; overflow: hidden; }
+    .section-title { margin: 0; padding: 20px 22px; border-bottom: 1px solid var(--border); font-size: 1rem; }
+    .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; white-space: pre-wrap; word-break: break-word; }
+    .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);
+    }
+    @media (max-width: 760px) {
+      .container { padding: 20px 14px 48px; }
+      .hero { padding: 20px; }
+      .hero-top { grid-template-columns: 1fr; }
+      .meta { justify-content: flex-start; margin-top: 8px; }
+      .wordmark { width: 280px; height: 92px; }
+      th:nth-child(5), td:nth-child(5) { display: none; }
+      .event summary { align-items: flex-start; }
+    }
+  </style>
+</head>
+<body><div class="container">
+    <section class="hero">
+      <div class="hero-top">
+        <div>
+          <div class="brand"><a class="brand-link" href="index.html"><svg class="wordmark" viewBox="0 0 420 138" aria-label="notrace" role="img" xmlns="http://www.w3.org/2000/svg">
+    <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></a><p class="subtitle">Retrospective index. Repo-local session evidence.</p></div>
+        </div>
+        <div class="meta">
+          <span class="pill">nothing</span>
+          <span class="pill">3 sessions</span>
+        </div>
+      </div>
+      <div class="metrics">
+        <div class="metric-card"><small>Sessions</small><strong>3</strong></div>
+        <div class="metric-card"><small>Total Tokens</small><strong>15,174</strong></div>
+        <div class="metric-card"><small>Total Cost</small><strong>$0.08050</strong></div>
+      </div>
+    </section>
+    <section class="panel">
+      <h2 class="section-title">Session Reports</h2>
+      <table data-dashboard-table><thead><tr><th class="col-index sortable-head"><button class="sort-btn" data-sort-key="index"><span class="sort-label">#</span><span class="sort-state">↓</span></button></th><th>Session</th><th class="sortable-head"><button class="sort-btn" data-sort-key="workflow"><span class="sort-label">Workflow</span><span class="sort-state"></span></button></th><th class="sortable-head"><button class="sort-btn" data-sort-key="started"><span class="sort-label">Started</span><span class="sort-state"></span></button></th><th>Task</th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="tokens"><span class="sort-label">Tokens</span><span class="sort-state"></span></button></th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="cost"><span class="sort-label">Cost</span><span class="sort-state"></span></button></th></tr></thead><tbody>
+      <tr data-index="3" data-workflow="Generic" data-started="1781691240000" data-tokens="5910" data-cost="0.0334"><td class="index-cell">3</td><td><a class="session-link" href="sessions/019ed2ee-1002-76ee-b353-000000000003/notrace.html"><strong>019ed2ee</strong><span class="session-sub">019ed2ee-1002-76ee-b353-000000000003</span></a></td><td><span class="workflow-pill workflow-generic">Generic</span></td><td><div class="date-cell"><strong>2026-06-17</strong><span>18:14</span></div></td><td>General session</td><td class="num-cell">5,910</td><td class="num-cell">$0.03340</td></tr><tr data-index="2" data-workflow="Research" data-started="1781689020000" data-tokens="5754" data-cost="0.0267"><td class="index-cell">2</td><td><a class="session-link" href="sessions/019ed2ee-1001-76ee-b353-000000000002/notrace.html"><strong>019ed2ee</strong><span class="session-sub">019ed2ee-1001-76ee-b353-000000000002</span></a></td><td><span class="workflow-pill workflow-research">Research</span></td><td><div class="date-cell"><strong>2026-06-17</strong><span>17:37</span></div></td><td>Branch topic-02</td><td class="num-cell">5,754</td><td class="num-cell">$0.02670</td></tr><tr data-index="1" data-workflow="RPIV" data-started="1781686800000" data-tokens="3510" data-cost="0.0204"><td class="index-cell">1</td><td><a class="session-link" href="sessions/019ed2ee-1000-76ee-b353-000000000001/notrace.html"><strong>019ed2ee</strong><span class="session-sub">019ed2ee-1000-76ee-b353-000000000001</span></a></td><td><span class="workflow-pill workflow-rpiv">RPIV</span></td><td><div class="date-cell"><strong>2026-06-17</strong><span>17:00</span></div></td><td>NR-101</td><td class="num-cell">3,510</td><td class="num-cell">$0.02040</td></tr>
+      </tbody></table>
+    </section>
+    <footer class="footer-note minimal">notrace • raquezha 2026</footer>
+  </div><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);
+  })();</script></body>
+</html>

package/templates/dashboard.sample.json

@@ -0,0 +1,113 @@
+{
+  "repositoryName": "nothing",
+  "sessions": [
+    {
+      "sessionId": "019ed2ee-1000-76ee-b353-000000000001",
+      "startedAt": "2026-06-17T09:00:00.000Z",
+      "endedAt": "2026-06-17T09:18:00.000Z",
+      "captureMode": "full",
+      "task": {
+        "workflow": "norpiv",
+        "id": "NR-101",
+        "path": ".workflow/tasks/NR-101",
+        "dir": "/repo/.workflow/tasks/NR-101"
+      },
+      "conditions": {
+        "models": ["gpt-5.4"],
+        "providers": ["openai"],
+        "extensions": ["notrace", "noheadroom"]
+      },
+      "activity": {
+        "turnCount": 4,
+        "llmCallCount": 4,
+        "toolCallCount": 3,
+        "toolErrorCount": 0,
+        "durationMs": 1080000,
+        "totals": {
+          "inputTokens": 3100,
+          "outputTokens": 410,
+          "cacheReadTokens": 0,
+          "cacheWriteTokens": 0,
+          "totalTokens": 3510,
+          "totalCostUsd": 0.0204
+        }
+      },
+      "artifacts": {
+        "html": "sessions/019ed2ee-1000-76ee-b353-000000000001/notrace.html",
+        "record": "sessions/019ed2ee-1000-76ee-b353-000000000001/notrace.json"
+      }
+    },
+    {
+      "sessionId": "019ed2ee-1001-76ee-b353-000000000002",
+      "startedAt": "2026-06-17T09:37:00.000Z",
+      "endedAt": "2026-06-17T09:59:00.000Z",
+      "captureMode": "redacted",
+      "task": {
+        "workflow": "research",
+        "id": "branch:topic-02",
+        "path": null,
+        "dir": null
+      },
+      "conditions": {
+        "models": ["claude-sonnet-4"],
+        "providers": ["anthropic"],
+        "extensions": ["notrace"]
+      },
+      "activity": {
+        "turnCount": 5,
+        "llmCallCount": 5,
+        "toolCallCount": 4,
+        "toolErrorCount": 1,
+        "durationMs": 1320000,
+        "totals": {
+          "inputTokens": 4200,
+          "outputTokens": 530,
+          "cacheReadTokens": 1024,
+          "cacheWriteTokens": 0,
+          "totalTokens": 5754,
+          "totalCostUsd": 0.0267
+        }
+      },
+      "artifacts": {
+        "html": "sessions/019ed2ee-1001-76ee-b353-000000000002/notrace.html",
+        "record": "sessions/019ed2ee-1001-76ee-b353-000000000002/notrace.json"
+      }
+    },
+    {
+      "sessionId": "019ed2ee-1002-76ee-b353-000000000003",
+      "startedAt": "2026-06-17T10:14:00.000Z",
+      "endedAt": "2026-06-17T10:44:00.000Z",
+      "captureMode": "metadata",
+      "task": {
+        "workflow": "generic",
+        "id": null,
+        "path": null,
+        "dir": null
+      },
+      "conditions": {
+        "models": ["gemini-3.5-flash-high"],
+        "providers": ["google"],
+        "extensions": ["notrace", "noheadroom"]
+      },
+      "activity": {
+        "turnCount": 6,
+        "llmCallCount": 6,
+        "toolCallCount": 5,
+        "toolErrorCount": 2,
+        "durationMs": 1800000,
+        "totals": {
+          "inputTokens": 5100,
+          "outputTokens": 810,
+          "cacheReadTokens": 0,
+          "cacheWriteTokens": 0,
+          "totalTokens": 5910,
+          "totalCostUsd": 0.0334
+        }
+      },
+      "artifacts": {
+        "html": "sessions/019ed2ee-1002-76ee-b353-000000000003/notrace.html",
+        "record": "sessions/019ed2ee-1002-76ee-b353-000000000003/notrace.json"
+      }
+    }
+  ]
+}

package/templates/render-samples.mjs

@@ -0,0 +1,44 @@
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { generateDashboardHtml, generateHtmlReport } from "../dist/notrace/renderer.js";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const dashboardData = JSON.parse(readFileSync(path.join(here, "dashboard.sample.json"), "utf8"));
+const sessionData = JSON.parse(readFileSync(path.join(here, "session.sample.json"), "utf8"));
+const repositoryName = dashboardData.repositoryName || sessionData.repository?.name || "nothing";
+
+writeFileSync(path.join(here, "dashboard.sample.html"), generateDashboardHtml(dashboardData.sessions, { repositoryName }));
+writeFileSync(path.join(here, "session.sample.html"), generateHtmlReport(sessionData));
+
+for (const session of dashboardData.sessions) {
+  const htmlPath = path.join(here, session.artifacts.html);
+  const recordPath = path.join(here, session.artifacts.record);
+  const sessionPage = {
+    ...sessionData,
+    traceId: session.sessionId,
+    session: {
+      ...sessionData.session,
+      id: session.sessionId,
+      startedAt: session.startedAt,
+      endedAt: session.endedAt,
+      durationMs: session.activity?.durationMs ?? sessionData.session?.durationMs ?? 0,
+    },
+    captureMode: session.captureMode || sessionData.captureMode,
+    task: session.task || sessionData.task,
+    conditions: session.conditions || sessionData.conditions,
+    activity: session.activity || sessionData.activity,
+    navigation: { indexHref: "../../dashboard.sample.html" },
+    repository: {
+      ...(sessionData.repository || {}),
+      name: repositoryName,
+    },
+  };
+
+  mkdirSync(path.dirname(htmlPath), { recursive: true });
+  mkdirSync(path.dirname(recordPath), { recursive: true });
+  writeFileSync(htmlPath, generateHtmlReport(sessionPage));
+  writeFileSync(recordPath, `${JSON.stringify(sessionPage, null, 2)}\n`);
+}
+
+console.log(`Rendered sample templates in ${here}`);