@raquezha/notrace 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @raquezha/notrace
 
+## 0.2.0
+
+### Minor Changes
+
+- 382b624: Add model usage breakdowns, switch insights, lazy timeline rendering, and refreshed report samples.
+
+### Patch Changes
+
+- 04d574e: Refactor notrace report rendering into modular report-app files and add focused regression coverage without changing package dependencies or entrypoints.
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/notrace/index.js

@@ -3,7 +3,8 @@ import * as path from "node:path";
 import * as os from "node:os";
 import { execSync } from "node:child_process";
 import { getActiveAdapter } from "./adapters.js";
-import { generateHtmlReport, generateDashboardHtml } from "./renderer.js";
+import { generateHtmlReport } from "./report-app/report.js";
+import { generateDashboardHtml } from "./report-app/dashboard-report.js";
 const REDACTED = "[REDACTED by notrace]";
 const SENSITIVE_VALUE_RE = /(bearer\s+[a-z0-9._~+/=-]{12,}|sk-[a-z0-9_-]{16,}|gh[pousr]_[a-z0-9_]{16,}|AKIA[0-9A-Z]{16})/gi;
 const TELEMETRY_CHANNEL = "notrace.telemetry.extension";

package/dist/notrace/report-app/__tests__/analytics.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/notrace/report-app/__tests__/analytics.test.js

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { buildModelSummary, buildModelSwitches, groupByModel } from "../analytics.js";
+const events = [
+    { type: "llm_completion", model: "a", provider: "x", timestamp: 1000, usage: { input: 10, output: 5, totalTokens: 15, cost: { total: 1 } } },
+    { type: "llm_completion", model: "a", provider: "x", timestamp: "2026-06-17T17:00:02.000Z", usage: { input: 20, output: 10, totalTokens: 30, cost: { total: 2 } }, errorMessage: "oops" },
+    { type: "llm_completion", model: "b", provider: "y", timestamp: "2026-06-17T17:00:03.000Z", usage: { input: 40, output: 20, cost: { total: 3 } } }, // missing totalTokens
+];
+describe("report-app analytics", () => {
+    it("groups model usage and falls back when totalTokens is missing", () => {
+        const grouped = groupByModel(events);
+        expect(grouped.a.count).toBe(2);
+        expect(grouped.a.inputTokens).toBe(30);
+        expect(grouped.a.errors).toBe(1);
+        // b is missing totalTokens, should fallback to input + output (40 + 20)
+        expect(grouped.b.totalTokens).toBe(60);
+    });
+    it("tracks model switches and normalizes string timestamps", () => {
+        const switches = buildModelSwitches(events);
+        expect(switches).toHaveLength(1);
+        expect(switches[0].from).toBe("a");
+        expect(switches[0].to).toBe("b");
+        expect(switches[0].providerChanged).toBe(true);
+        // timestamp Delta between "2026-06-17T17:00:02.000Z" and "2026-06-17T17:00:03.000Z" is 1000ms
+        expect(switches[0].timeDelta).toBe(1000);
+        // falls back to input + output when totalTokens is missing
+        expect(switches[0].tokens).toBe(60);
+    });
+    it("builds summary", () => {
+        const summary = buildModelSummary(events);
+        expect(summary.firstModel).toBe("a");
+        expect(summary.finalModel).toBe("b");
+        expect(summary.switchCount).toBe(1);
+        expect(summary.uniqueModels).toBe(2);
+    });
+});

package/dist/notrace/report-app/__tests__/card.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/notrace/report-app/__tests__/card.test.js

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { renderCollapsibleSection, renderKeyValueList, renderToolResultHtml, renderToolUseHtml } from "../components/card.js";
+describe("report-app card", () => {
+    it("renders tool use and result cards", () => {
+        const useHtml = renderToolUseHtml("bash", { command: "echo hi" });
+        const resultHtml = renderToolResultHtml("tool-1", { stdout: "ok" }, true);
+        expect(useHtml).toContain("chat-tool-use");
+        expect(useHtml).toContain("bash");
+        expect(resultHtml).toContain("Tool Result: tool-1");
+        expect(resultHtml).toContain("color: var(--err);");
+    });
+    it("escapes injected content", () => {
+        const html = renderToolUseHtml("<script>alert(1)</script>", "<script>alert(1)</script>");
+        expect(html).toContain("&lt;script&gt;alert(1)&lt;/script&gt;");
+        expect(html).not.toContain("<script>alert(1)</script>");
+    });
+    it("renders collapsible sections and key-value lists", () => {
+        const section = renderCollapsibleSection("Models", "<div>body</div>", true);
+        const kv = renderKeyValueList([["A", "B"], ["Empty", ""]]);
+        expect(section).toContain("panel collapsible");
+        expect(section).toContain(" open");
+        expect(kv).toContain("kv-list");
+        expect(kv).toContain("Empty");
+        expect(kv).toContain(">-<");
+    });
+});

package/dist/notrace/report-app/__tests__/event.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/notrace/report-app/__tests__/event.test.js

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { renderEventCard } from "../components/event.js";
+describe("report-app event", () => {
+    it("escapes hostile content in lazy event body attributes", () => {
+        const hostileEvent = {
+            type: "llm_completion",
+            outputContent: '<img src=x onerror=alert(1)><script>alert(1)</script>" autofocus onfocus=alert(1)',
+            timestamp: 1000
+        };
+        const html = renderEventCard(hostileEvent);
+        // The data-lazy-event-body attribute should contain the URI-encoded then HTML-escaped string.
+        // It must NOT contain the raw dangerous strings.
+        expect(html).not.toContain("<script>alert(1)</script>");
+        expect(html).not.toContain('onerror=alert(1)');
+        expect(html).toContain("data-lazy-event-body=");
+        // Double check that the encoded payload still holds the data safely.
+        expect(html).toContain("alert(1)"); // uri encoded form might just be alert(1) but the < > and " will be %3C %3E %22
+        expect(html).toContain("%26lt%3Bscript%26gt%3Balert(1)%26lt%3B%2Fscript%26gt%3B");
+    });
+});

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { formatDateDay, formatMs, formatTelemetryStatus, formatTimeMinutes, formatTimeSeconds, formatTokens, formatUsd, parseDate, taskDisplay, workflowClassName, workflowDisplayName } from "../format.js";
+describe("report-app format", () => {
+    it("parses valid dates and rejects invalid ones", () => {
+        expect(parseDate("2026-06-17T17:00:00Z")?.toISOString()).toBe("2026-06-17T17:00:00.000Z");
+        expect(parseDate("nope")).toBeNull();
+    });
+    it("formats date and time pieces", () => {
+        expect(formatDateDay("2026-06-17T17:00:00Z")).toBe("2026-06-17");
+        expect(formatTimeMinutes("2026-06-17T17:00:00Z")).toMatch(/^17:00|\d{2}:\d{2}$/);
+        expect(formatTimeSeconds("2026-06-17T17:00:00Z")).toMatch(/^17:00:00|\d{2}:\d{2}:\d{2}$/);
+    });
+    it("formats workflow labels and classes", () => {
+        expect(workflowDisplayName("norpiv")).toBe("RPIV");
+        expect(workflowDisplayName("research")).toBe("Research");
+        expect(workflowDisplayName(undefined)).toBe("Generic");
+        expect(workflowClassName("norpiv")).toBe("workflow-rpiv");
+        expect(workflowClassName("research")).toBe("workflow-research");
+        expect(workflowClassName(undefined)).toBe("workflow-generic");
+    });
+    it("preserves old taskDisplay semantics for direct and nested shapes", () => {
+        expect(taskDisplay({ workflow: "research", id: "branch:main" })).toBe("Branch main");
+        expect(taskDisplay({ task: { workflow: "norpiv", id: "NR-101" } })).toBe("NR-101");
+        expect(taskDisplay({ workflow: "generic" })).toBe("General session");
+        expect(taskDisplay({ workflow: "weird" })).toBe("No active task");
+    });
+    it("formats usd, tokens, durations, and telemetry status", () => {
+        expect(formatUsd(0)).toBe("$0");
+        expect(formatUsd(1.234567)).toBe("$1.23457");
+        expect(formatTokens(999)).toBe("999");
+        expect(formatTokens(1500)).toBe("1.5k");
+        expect(formatTokens(2_500_000)).toBe("2.50M");
+        expect(formatMs(0)).toBe("-");
+        expect(formatMs(15_000)).toBe("15s");
+        expect(formatMs(125_000)).toBe("2m 5s");
+        expect(formatMs(3_780_000)).toBe("1h 3m");
+        expect(formatTelemetryStatus("active")).toBe("Active");
+        expect(formatTelemetryStatus("loaded-disabled")).toBe("Loaded disabled");
+        expect(formatTelemetryStatus(undefined)).toBe("Unknown");
+    });
+});

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { generateHtmlReport } from "../report.js";
+const record = {
+    traceId: "session-1",
+    repository: { name: "nothing", branch: "main" },
+    session: { id: "session-1", startedAt: "2026-06-17T17:00:00Z", durationMs: 15000 },
+    task: { workflow: "research", id: "branch:main" },
+    captureMode: "full",
+    conditions: { providers: ["anthropic"] },
+    activity: {
+        llmCallCount: 1,
+        toolCallCount: 1,
+        toolErrorCount: 0,
+        durationMs: 15000,
+        totals: { inputTokens: 10, outputTokens: 5, cacheReadTokens: 0, cacheWriteTokens: 0, totalTokens: 15, totalCostUsd: 0.01 },
+    },
+    telemetry: { extensions: {} },
+    events: [
+        { type: "llm_completion", model: "claude", provider: "anthropic", timestamp: 1710000000000, inputPayload: { messages: [{ role: "user", content: "hi" }] }, outputContent: "hello", usage: { totalTokens: 15, cost: { total: 0.01 } } },
+    ],
+};
+describe("report-app report", () => {
+    it("renders structural markers", () => {
+        const html = generateHtmlReport(record);
+        expect(html).toContain("Session retrospective");
+        expect(html).toContain("Run Summary");
+        expect(html).toContain("Timeline");
+        expect(html).toContain("Branch main");
+        expect(html).toContain("claude");
+    });
+});

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

@@ -0,0 +1,3 @@
+export declare function groupByModel(events: any[]): Record<string, any>;
+export declare function buildModelSwitches(events: any[]): any[];
+export declare function buildModelSummary(events: any[]): any;

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

@@ -0,0 +1,78 @@
+export function groupByModel(events) {
+    const models = {};
+    for (const ev of events) {
+        if (ev.type !== "llm_completion")
+            continue;
+        const name = ev.model || "unknown";
+        if (!models[name]) {
+            models[name] = { count: 0, inputTokens: 0, outputTokens: 0, totalTokens: 0, cost: 0, cacheRead: 0, cacheWrite: 0, errors: 0 };
+        }
+        const m = models[name];
+        m.count++;
+        if (ev.usage) {
+            const input = Number(ev.usage.inputTokens || ev.usage.input || 0);
+            const output = Number(ev.usage.outputTokens || ev.usage.output || 0);
+            const cacheR = Number(ev.usage.cacheReadTokens || ev.usage.cacheRead || 0);
+            const cacheW = Number(ev.usage.cacheWriteTokens || ev.usage.cacheWrite || 0);
+            m.inputTokens += input;
+            m.outputTokens += output;
+            m.cacheRead += cacheR;
+            m.cacheWrite += cacheW;
+            m.totalTokens += Number(ev.usage.totalTokens || (input + output + cacheR + cacheW));
+            m.cost += Number(ev.usage.cost?.total || 0);
+        }
+        if (ev.errorMessage)
+            m.errors++;
+    }
+    return models;
+}
+export function buildModelSwitches(events) {
+    const switches = [];
+    let lastModel = null;
+    let lastProvider = null;
+    let lastTime = null;
+    let completionIndex = 0;
+    for (const ev of events) {
+        if (ev.type !== "llm_completion")
+            continue;
+        completionIndex++;
+        const currentModel = ev.model || "unknown";
+        const currentProvider = ev.provider || "unknown";
+        const currentTimestamp = ev.timestamp ? new Date(ev.timestamp).getTime() : 0;
+        const validTimestamp = Number.isNaN(currentTimestamp) ? 0 : currentTimestamp;
+        if (lastModel && lastModel !== currentModel) {
+            const input = Number(ev.usage?.inputTokens || ev.usage?.input || 0);
+            const output = Number(ev.usage?.outputTokens || ev.usage?.output || 0);
+            const cacheR = Number(ev.usage?.cacheReadTokens || ev.usage?.cacheRead || 0);
+            const cacheW = Number(ev.usage?.cacheWriteTokens || ev.usage?.cacheWrite || 0);
+            switches.push({
+                index: completionIndex,
+                from: lastModel,
+                to: currentModel,
+                fromProvider: lastProvider || "unknown",
+                toProvider: currentProvider,
+                providerChanged: (lastProvider || "unknown") !== currentProvider,
+                timestamp: validTimestamp,
+                timeDelta: lastTime ? validTimestamp - lastTime : 0,
+                cost: Number(ev.usage?.cost?.total || 0),
+                tokens: Number(ev.usage?.totalTokens || (input + output + cacheR + cacheW))
+            });
+        }
+        lastModel = currentModel;
+        lastProvider = currentProvider;
+        lastTime = validTimestamp;
+    }
+    return switches;
+}
+export function buildModelSummary(events) {
+    const completions = events.filter((ev) => ev.type === "llm_completion");
+    if (!completions.length)
+        return null;
+    const uniqueModels = new Set(completions.map((ev) => ev.model || "unknown"));
+    return {
+        firstModel: completions[0]?.model || "unknown",
+        finalModel: completions[completions.length - 1]?.model || "unknown",
+        switchCount: buildModelSwitches(events).length,
+        uniqueModels: uniqueModels.size,
+    };
+}

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

@@ -0,0 +1,2 @@
+export declare const COPY_SCRIPT = "(() => {\n    document.querySelectorAll('[data-copy-value]').forEach((button) => {\n      button.addEventListener('click', async () => {\n        const value = button.getAttribute('data-copy-value') || '';\n        try {\n          if (navigator.clipboard?.writeText) {\n            await navigator.clipboard.writeText(value);\n          } else {\n            const textarea = document.createElement('textarea');\n            textarea.value = value;\n            textarea.style.position = 'fixed';\n            textarea.style.opacity = '0';\n            document.body.appendChild(textarea);\n            textarea.focus();\n            textarea.select();\n            document.execCommand('copy');\n            textarea.remove();\n          }\n          const previous = button.innerHTML;\n          button.classList.add('copied');\n          button.innerHTML = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>';\n          setTimeout(() => {\n            button.classList.remove('copied');\n            button.innerHTML = previous;\n          }, 1400);\n        } catch {\n          button.textContent = 'ERR';\n        }\n      });\n    });\n\n    document.querySelectorAll('details[data-lazy-event-body]').forEach((details) => {\n      details.addEventListener('toggle', () => {\n        if (!details.open) return;\n        if (details.querySelector('.event-body')) return;\n        const html = decodeURIComponent(details.getAttribute('data-lazy-event-body') || '');\n        details.insertAdjacentHTML('beforeend', html);\n      }, { once: false });\n    });\n\n    const topBtn = document.querySelector('.back-to-top');\n    if (topBtn) {\n      const syncTopButton = () => {\n        const scrollable = document.documentElement.scrollHeight > window.innerHeight + 24;\n        const show = scrollable && window.scrollY > 200;\n        topBtn.classList.toggle('visible', show);\n      };\n      window.addEventListener('scroll', syncTopButton, { passive: true });\n      window.addEventListener('resize', syncTopButton);\n      syncTopButton();\n    }\n  })();";
+export declare const DASHBOARD_SORT_SCRIPT = "(() => {\n    const table = document.querySelector('[data-dashboard-table]');\n    if (!table) return;\n    const tbody = table.querySelector('tbody');\n    if (!tbody) return;\n    const buttons = Array.from(document.querySelectorAll('[data-sort-key]'));\n    let currentKey = 'index';\n    let currentDir = 'desc';\n\n    function icon(dir) {\n      return dir === 'asc' ? '\u2191' : '\u2193';\n    }\n\n    function updateState() {\n      buttons.forEach(btn => {\n        const key = btn.getAttribute('data-sort-key');\n        const state = btn.querySelector('.sort-state');\n        if (!state) return;\n        state.textContent = key === currentKey ? icon(currentDir) : '';\n      });\n    }\n\n    function compare(a, b, key) {\n      if (key === 'index' || key === 'started' || key === 'tokens' || key === 'cost') {\n        return Number(a.dataset[key] || 0) - Number(b.dataset[key] || 0);\n      }\n      return String(a.dataset[key] || '').localeCompare(String(b.dataset[key] || ''));\n    }\n\n    function sortBy(key) {\n      const rows = Array.from(tbody.querySelectorAll('tr'));\n      rows.sort((a, b) => {\n        const result = compare(a, b, key);\n        return currentDir === 'asc' ? result : -result;\n      });\n      rows.forEach(row => tbody.appendChild(row));\n      updateState();\n    }\n\n    buttons.forEach(btn => {\n      btn.addEventListener('click', () => {\n        const key = btn.getAttribute('data-sort-key') || 'index';\n        if (currentKey === key) currentDir = currentDir === 'asc' ? 'desc' : 'asc';\n        else {\n          currentKey = key;\n          currentDir = key === 'workflow' ? 'asc' : 'desc';\n        }\n        sortBy(currentKey);\n      });\n    });\n\n    sortBy(currentKey);\n  })();";

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

@@ -0,0 +1,105 @@
+export const COPY_SCRIPT = `(() => {
+    document.querySelectorAll('[data-copy-value]').forEach((button) => {
+      button.addEventListener('click', async () => {
+        const value = button.getAttribute('data-copy-value') || '';
+        try {
+          if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(value);
+          } else {
+            const textarea = document.createElement('textarea');
+            textarea.value = value;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.focus();
+            textarea.select();
+            document.execCommand('copy');
+            textarea.remove();
+          }
+          const previous = button.innerHTML;
+          button.classList.add('copied');
+          button.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>';
+          setTimeout(() => {
+            button.classList.remove('copied');
+            button.innerHTML = previous;
+          }, 1400);
+        } catch {
+          button.textContent = 'ERR';
+        }
+      });
+    });
+
+    document.querySelectorAll('details[data-lazy-event-body]').forEach((details) => {
+      details.addEventListener('toggle', () => {
+        if (!details.open) return;
+        if (details.querySelector('.event-body')) return;
+        const html = decodeURIComponent(details.getAttribute('data-lazy-event-body') || '');
+        details.insertAdjacentHTML('beforeend', html);
+      }, { once: false });
+    });
+
+    const topBtn = document.querySelector('.back-to-top');
+    if (topBtn) {
+      const syncTopButton = () => {
+        const scrollable = document.documentElement.scrollHeight > window.innerHeight + 24;
+        const show = scrollable && window.scrollY > 200;
+        topBtn.classList.toggle('visible', show);
+      };
+      window.addEventListener('scroll', syncTopButton, { passive: true });
+      window.addEventListener('resize', syncTopButton);
+      syncTopButton();
+    }
+  })();`;
+export const DASHBOARD_SORT_SCRIPT = `(() => {
+    const table = document.querySelector('[data-dashboard-table]');
+    if (!table) return;
+    const tbody = table.querySelector('tbody');
+    if (!tbody) return;
+    const buttons = Array.from(document.querySelectorAll('[data-sort-key]'));
+    let currentKey = 'index';
+    let currentDir = 'desc';
+
+    function icon(dir) {
+      return dir === 'asc' ? '↑' : '↓';
+    }
+
+    function updateState() {
+      buttons.forEach(btn => {
+        const key = btn.getAttribute('data-sort-key');
+        const state = btn.querySelector('.sort-state');
+        if (!state) return;
+        state.textContent = key === currentKey ? icon(currentDir) : '';
+      });
+    }
+
+    function compare(a, b, key) {
+      if (key === 'index' || key === 'started' || key === 'tokens' || key === 'cost') {
+        return Number(a.dataset[key] || 0) - Number(b.dataset[key] || 0);
+      }
+      return String(a.dataset[key] || '').localeCompare(String(b.dataset[key] || ''));
+    }
+
+    function sortBy(key) {
+      const rows = Array.from(tbody.querySelectorAll('tr'));
+      rows.sort((a, b) => {
+        const result = compare(a, b, key);
+        return currentDir === 'asc' ? result : -result;
+      });
+      rows.forEach(row => tbody.appendChild(row));
+      updateState();
+    }
+
+    buttons.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const key = btn.getAttribute('data-sort-key') || 'index';
+        if (currentKey === key) currentDir = currentDir === 'asc' ? 'desc' : 'asc';
+        else {
+          currentKey = key;
+          currentDir = key === 'workflow' ? 'asc' : 'desc';
+        }
+        sortBy(currentKey);
+      });
+    });
+
+    sortBy(currentKey);
+  })();`;

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

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

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

@@ -0,0 +1,36 @@
+import { escapeHtml } from "../escape.js";
+const TOOL_USE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>`;
+const TOOL_RESULT_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg>`;
+function normalizeContent(value) {
+    return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+}
+function parseMaybeJson(value) {
+    if (typeof value !== "string")
+        return value;
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return value;
+    }
+}
+function renderToolCard(label, icon, content, options = {}) {
+    const headerStyle = options.headerStyle ? ` style="${options.headerStyle}"` : "";
+    const cardStyle = options.cardStyle ? ` style="${options.cardStyle}"` : "";
+    return `<div class="chat-tool-use"${cardStyle}><div class="chat-tool-header"${headerStyle}>${icon} ${escapeHtml(label)}</div><pre class="chat-tool-body">${escapeHtml(normalizeContent(content))}</pre></div>`;
+}
+export function renderToolUseHtml(name, input) {
+    return renderToolCard(name, TOOL_USE_ICON, parseMaybeJson(input));
+}
+export function renderToolResultHtml(id, content, isError = false) {
+    return renderToolCard(`Tool Result: ${id}`, TOOL_RESULT_ICON, content, {
+        headerStyle: isError ? "color: var(--err);" : "color: var(--muted);",
+        cardStyle: isError ? "border-color: rgba(239,127,127,0.3);" : undefined,
+    });
+}
+export function renderCollapsibleSection(title, body, open = false) {
+    return `<details class="panel collapsible"${open ? " open" : ""}><summary>${escapeHtml(title)}</summary><div>${body}</div></details>`;
+}
+export function renderKeyValueList(items) {
+    return `<div class="kv-list">${items.map(([k, v]) => `<div class="kv-row"><span class="kv-key">${escapeHtml(k)}</span><strong class="kv-value">${escapeHtml(v == null || v === "" ? "-" : v)}</strong></div>`).join("")}</div>`;
+}

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

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

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

@@ -0,0 +1,16 @@
+import { escapeHtml } from "../escape.js";
+import { formatDateDay, formatTimeMinutes, formatUsd, parseDate, taskDisplay, workflowClassName, workflowDisplayName } from "../format.js";
+import { wordmarkSvg } from "../shell.js";
+function renderDateCell(value) {
+    const date = parseDate(value);
+    if (!date)
+        return `<span>${escapeHtml(value)}</span>`;
+    return `<div class="date-cell"><strong>${escapeHtml(formatDateDay(value))}</strong><span>${escapeHtml(formatTimeMinutes(value))}</span></div>`;
+}
+export function renderDashboardBody(sessions, options = {}) {
+    const reversed = sessions.slice().reverse();
+    const totalCost = sessions.reduce((sum, s) => sum + Number(s.activity?.totals?.totalCostUsd || 0), 0);
+    const totalTokens = sessions.reduce((sum, s) => sum + Number(s.activity?.totals?.totalTokens || 0), 0);
+    const homeHref = options?.indexHref || "index.html";
+    return `<div class="container"><section class="hero"><div class="hero-split"><a class="brand-link" href="${escapeHtml(homeHref)}">${wordmarkSvg()}</a><div class="hero-right"><div class="hero-session"><strong style="color: var(--text); font-weight: 500;">Global Index</strong><span style="color: var(--muted);">Machine-wide session evidence.</span></div><div class="hero-meta"><span class="hero-pill">${sessions.length} sessions</span></div></div></div><div class="metrics"><div class="metric-card"><small>Sessions</small><strong>${sessions.length}</strong></div><div class="metric-card"><small>Total Tokens</small><strong>${totalTokens.toLocaleString()}</strong></div><div class="metric-card"><small>Total Cost</small><strong>${formatUsd(totalCost)}</strong></div></div></section><section class="panel"><h2 class="section-title">Session Reports</h2>${reversed.length ? `<table data-dashboard-table><thead><tr><th class="col-index sortable-head"><button class="sort-btn" data-sort-key="index"><span class="sort-label">#</span><span class="sort-state">↓</span></button></th><th>Session</th><th>Project</th><th class="sortable-head"><button class="sort-btn" data-sort-key="workflow"><span class="sort-label">Workflow</span><span class="sort-state"></span></button></th><th class="sortable-head"><button class="sort-btn" data-sort-key="started"><span class="sort-label">Started</span><span class="sort-state"></span></button></th><th>Task</th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="tokens"><span class="sort-label">Tokens</span><span class="sort-state"></span></button></th><th class="sortable-head num-cell"><button class="sort-btn" data-sort-key="cost"><span class="sort-label">Cost</span><span class="sort-state"></span></button></th></tr></thead><tbody>${reversed.map((s, index) => { const link = s.artifacts?.html ? (s.artifacts.html.startsWith(".notrace/") ? s.artifacts.html.substring(9) : s.artifacts.html) : "#"; const workflow = s.task?.workflow || "generic"; const workflowLabel = workflowDisplayName(workflow); const tokens = Number(s.activity?.totals?.totalTokens || 0); const cost = Number(s.activity?.totals?.totalCostUsd || 0); return `<tr data-index="${reversed.length - index}" data-workflow="${escapeHtml(workflowLabel)}" data-started="${parseDate(s.startedAt)?.getTime() || 0}" data-tokens="${tokens}" data-cost="${cost}"><td class="index-cell">${reversed.length - index}</td><td><a class="session-link" href="${escapeHtml(link)}"><strong>${escapeHtml(String(s.sessionId).slice(0, 8))}</strong><span class="session-sub">${escapeHtml(String(s.sessionId))}</span></a></td><td><span class="hero-pill">${escapeHtml(s.repositoryName || "Unknown")}</span></td><td><span class="workflow-pill ${workflowClassName(workflow)}">${escapeHtml(workflowLabel)}</span></td><td>${renderDateCell(s.startedAt)}</td><td>${escapeHtml(taskDisplay(s))}</td><td class="num-cell">${tokens.toLocaleString()}</td><td class="num-cell">${formatUsd(cost)}</td></tr>`; }).join("")}</tbody></table>` : `<div class="empty">No sessions yet. Run Pi with notrace enabled. New reports appear here.</div>`}</section><footer class="footer-note minimal">notrace • raquezha 2026</footer></div>`;
+}

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

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

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

@@ -0,0 +1,42 @@
+import { escapeHtml } from "../escape.js";
+import { formatTimeSeconds } from "../format.js";
+import { renderMessages, renderUniversalMessageContent } from "./message.js";
+export function renderJsonBlock(title, value) {
+    return `<section class="block"><h4>${escapeHtml(title)}</h4><pre>${escapeHtml(typeof value === "string" ? value : JSON.stringify(value, null, 2))}</pre></section>`;
+}
+export function eventBadgeClass(ev) {
+    if (ev.type === "llm_completion")
+        return "badge badge-llm";
+    if (ev.type === "tool_start" || ev.type === "tool_end")
+        return ev.isError ? "badge badge-error" : "badge badge-tool";
+    return "badge badge-system";
+}
+export function eventTitle(ev) {
+    return ev.model || ev.toolName || ev.type;
+}
+export function renderEventBody(ev) {
+    const sections = [];
+    if (ev.type === "llm_completion") {
+        sections.push(renderMessages(ev.inputPayload?.messages));
+        if (ev.stopReason && ev.stopReason !== "stop" && ev.stopReason !== "toolUse")
+            sections.push(renderJsonBlock("Stop Reason", ev.stopReason));
+        if (ev.errorMessage)
+            sections.push(renderJsonBlock("Error Message", ev.errorMessage));
+        sections.push(`<section class="block"><h4>Output</h4><div class="msg-content">${renderUniversalMessageContent({ content: ev.outputContent })}</div></section>`);
+        if (ev.usage)
+            sections.push(renderJsonBlock("Usage", ev.usage));
+    }
+    else if (ev.type === "tool_start") {
+        sections.push(`<section class="block"><h4>Arguments</h4><div class="msg-content"><div class="chat-tool-use"><div class="chat-tool-header"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg> Execution Input</div><pre class="chat-tool-body">${escapeHtml(typeof ev.args === 'string' ? ev.args : JSON.stringify(ev.args, null, 2))}</pre></div></div></section>`);
+    }
+    else if (ev.type === "tool_end") {
+        sections.push(`<section class="block"><h4>${ev.isError ? "Error Result" : "Result"}</h4><div class="msg-content"><div class="chat-tool-use" style="${ev.isError ? 'border-color: rgba(239,127,127,0.3);' : ''}"><div class="chat-tool-header" style="${ev.isError ? 'color: var(--err);' : 'color: var(--muted);'}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg> Execution Output</div><pre class="chat-tool-body">${escapeHtml(typeof ev.result === 'string' ? ev.result : JSON.stringify(ev.result, null, 2))}</pre></div></div></section>`);
+    }
+    else {
+        sections.push(renderJsonBlock("Event", ev));
+    }
+    return `<div class="event-body"><div class="stack">${sections.join("")}</div></div>`;
+}
+export function renderEventCard(ev) {
+    return `<details class="event" data-lazy-event-body="${escapeHtml(encodeURIComponent(renderEventBody(ev)))}"><summary><div class="event-main"><span class="${eventBadgeClass(ev)}">${escapeHtml(ev.type)}</span><span class="event-title">${escapeHtml(eventTitle(ev))}</span></div><span class="event-time">${escapeHtml(formatTimeSeconds(ev.timestamp))}</span></summary></details>`;
+}

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

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

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

@@ -0,0 +1,43 @@
+import { escapeHtml } from "../escape.js";
+import { renderToolResultHtml, renderToolUseHtml } from "./card.js";
+export function renderUniversalMessageContent(m) {
+    if (!m)
+        return "";
+    let html = "";
+    if (typeof m.content === "string" && m.content.trim()) {
+        html += `<div class="chat-text">${escapeHtml(m.content)}</div>`;
+    }
+    else if (Array.isArray(m.content)) {
+        html += m.content.map((block) => {
+            if (!block)
+                return "";
+            if (block.type === "text")
+                return `<div class="chat-text">${escapeHtml(block.text)}</div>`;
+            if (block.type === "tool_use")
+                return renderToolUseHtml(block.name, block.input);
+            if (block.type === "tool_result")
+                return renderToolResultHtml(block.tool_use_id || "unknown", block.content, block.is_error === true);
+            return `<pre class="chat-tool-body">${escapeHtml(JSON.stringify(block, null, 2))}</pre>`;
+        }).join("");
+    }
+    else if (m.content && typeof m.content === "object") {
+        html += `<pre class="chat-tool-body">${escapeHtml(JSON.stringify(m.content, null, 2))}</pre>`;
+    }
+    if (Array.isArray(m.tool_calls)) {
+        html += m.tool_calls.map((tc) => {
+            if (tc.type === "function" && tc.function)
+                return renderToolUseHtml(tc.function.name, tc.function.arguments);
+            return "";
+        }).join("");
+    }
+    if (m.function_call)
+        html += renderToolUseHtml(m.function_call.name, m.function_call.arguments);
+    if (m.role === "tool")
+        html = renderToolResultHtml(m.tool_call_id || m.name || "unknown", m.content, m.is_error === true);
+    return html || `<div class="empty">Empty message</div>`;
+}
+export function renderMessages(messages) {
+    if (!messages?.length)
+        return "";
+    return `<section class="block"><h4>Input Messages</h4>${messages.map(m => `<div class="msg ${escapeHtml(m?.role || "unknown")} "><div class="msg-head"><span class="msg-role">${escapeHtml(m?.role || "unknown")}</span></div><div class="msg-content">${renderUniversalMessageContent(m)}</div></div>`).join("")}</section>`;
+}

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

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

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

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

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

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

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

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

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

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