@raquezha/notrace 0.1.2 → 0.2.0

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

@@ -0,0 +1,28 @@
+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/dist/notrace/report-app/types.js

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

package/extensions/notrace/index.ts

@@ -13,7 +13,8 @@ import type {
   WorkflowContext,
 } from "./types.js";
 import { getActiveAdapter, type WorkflowAdapter } 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;

package/extensions/notrace/report-app/__tests__/analytics.test.ts

@@ -0,0 +1,41 @@
+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 as any);
+    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 as any);
+    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 as any);
+    expect(summary.firstModel).toBe("a");
+    expect(summary.finalModel).toBe("b");
+    expect(summary.switchCount).toBe(1);
+    expect(summary.uniqueModels).toBe(2);
+  });
+});

package/extensions/notrace/report-app/__tests__/card.test.ts

@@ -0,0 +1,29 @@
+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/extensions/notrace/report-app/__tests__/event.test.ts

@@ -0,0 +1,23 @@
+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/extensions/notrace/report-app/__tests__/format.test.ts

@@ -0,0 +1,46 @@
+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" } as any)).toBe("Branch main");
+    expect(taskDisplay({ task: { workflow: "norpiv", id: "NR-101" } } as any)).toBe("NR-101");
+    expect(taskDisplay({ workflow: "generic" } as any)).toBe("General session");
+    expect(taskDisplay({ workflow: "weird" } as any)).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/extensions/notrace/report-app/__tests__/report.test.ts

@@ -0,0 +1,33 @@
+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 as any);
+    expect(html).toContain("Session retrospective");
+    expect(html).toContain("Run Summary");
+    expect(html).toContain("Timeline");
+    expect(html).toContain("Branch main");
+    expect(html).toContain("claude");
+  });
+});

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

@@ -0,0 +1,79 @@
+export function groupByModel(events: any[]): Record<string, any> {
+  const models: Record<string, any> = {};
+  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: any[]): any[] {
+  const switches: any[] = [];
+  let lastModel: string | null = null;
+  let lastProvider: string | null = null;
+  let lastTime: number | null = 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: any[]): any {
+  const completions = events.filter((ev: any) => ev.type === "llm_completion");
+  if (!completions.length) return null;
+  const uniqueModels = new Set(completions.map((ev: any) => ev.model || "unknown"));
+  return {
+    firstModel: completions[0]?.model || "unknown",
+    finalModel: completions[completions.length - 1]?.model || "unknown",
+    switchCount: buildModelSwitches(events).length,
+    uniqueModels: uniqueModels.size,
+  };
+}

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

@@ -0,0 +1,106 @@
+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/extensions/notrace/report-app/components/card.ts

@@ -0,0 +1,38 @@
+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: any): string {
+  return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+}
+
+function parseMaybeJson(value: any): any {
+  if (typeof value !== "string") return value;
+  try { return JSON.parse(value); } catch { return value; }
+}
+
+function renderToolCard(label: string, icon: string, content: any, options: { headerStyle?: string; cardStyle?: string } = {}): string {
+  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: string, input: any): string {
+  return renderToolCard(name, TOOL_USE_ICON, parseMaybeJson(input));
+}
+
+export function renderToolResultHtml(id: string, content: any, isError = false): string {
+  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: string, body: string, open = false): string {
+  return `<details class="panel collapsible"${open ? " open" : ""}><summary>${escapeHtml(title)}</summary><div>${body}</div></details>`;
+}
+
+export function renderKeyValueList(items: Array<[string, unknown]>): string {
+  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/extensions/notrace/report-app/components/dashboard.ts

@@ -0,0 +1,17 @@
+import { escapeHtml } from "../escape.js";
+import { formatDateDay, formatTimeMinutes, formatUsd, parseDate, taskDisplay, workflowClassName, workflowDisplayName } from "../format.js";
+import { wordmarkSvg } from "../shell.js";
+
+function renderDateCell(value: string | number): string {
+  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: any[], options: any = {}): string {
+  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/extensions/notrace/report-app/components/event.ts

@@ -0,0 +1,39 @@
+import { escapeHtml } from "../escape.js";
+import { formatTimeSeconds } from "../format.js";
+import { renderMessages, renderUniversalMessageContent } from "./message.js";
+
+export function renderJsonBlock(title: string, value: unknown): string {
+  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: any): string {
+  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: any): string {
+  return ev.model || ev.toolName || ev.type;
+}
+
+export function renderEventBody(ev: any): string {
+  const sections: string[] = [];
+  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: any): string {
+  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/extensions/notrace/report-app/components/message.ts

@@ -0,0 +1,39 @@
+import { escapeHtml } from "../escape.js";
+import { renderToolResultHtml, renderToolUseHtml } from "./card.js";
+
+export function renderUniversalMessageContent(m: any): string {
+  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: any) => {
+      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: any) => {
+      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: any[] | undefined): string {
+  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/extensions/notrace/report-app/dashboard-report.ts

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

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

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