@raquezha/notrace 0.0.6 → 0.0.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @raquezha/notrace
 
+## 0.0.7
+
+### Patch Changes
+
+- 5a3e563: Improve session reports by rendering the session ID as a copyable chip under the notrace logo.
+- 5a3e563: Enhance the trace header to include the active git branch alongside the repository name, and clarify the capture setting label.
+- 7664e50: Polish notrace reliability and installed-package ergonomics: add review/compare package CLIs, validate run records before writing, atomically write private artifacts, recover from corrupt index JSON, and verify capture modes.
+
 ## 0.0.6
 
 ### Patch Changes

package/README.md

@@ -103,10 +103,12 @@ Mode meanings:
 - `redacted`: captured payloads with common secret-like values redacted
 - `metadata`: minimal capture, no prompt/tool bodies
 
-**Security warning:** even redacted reports can contain sensitive prompts, tool payloads, local paths, and outputs. Do not publish generated reports.
+**Security warning:** `full` reports can contain prompts, tool arguments, tool outputs, local paths, model payloads, and secrets returned by tools. `redacted` mode removes common secret-shaped values and sensitive keys, but redaction is best-effort and can miss project-specific secrets. `metadata` mode is safest for sharing because prompt/tool bodies are omitted, but reports can still reveal repository names, paths, timing, models, providers, and workflow metadata. Do not publish generated reports without review.
 
 ## Review
 
+From this monorepo:
+
 ```bash
 npm run review:notrace -- \
   .notrace/sessions/<id>/notrace.json \
@@ -116,6 +118,17 @@ npm run review:notrace -- \
   --next-change "Try same task with RepoScry enabled."
 ```
 
+From an installed package:
+
+```bash
+npx -p @raquezha/notrace notrace-review \
+  .notrace/sessions/<id>/notrace.json \
+  --outcome partial \
+  --friction high \
+  --lesson "Headroom reduced tokens but needed manual steering." \
+  --next-change "Try same task with RepoScry enabled."
+```
+
 Review fields:
 - `outcome`: `success`, `partial`, `failed`, `abandoned`, `inconclusive`
 - `friction`: `low`, `medium`, `high`
@@ -124,12 +137,22 @@ Review fields:
 
 ## Compare
 
+From this monorepo:
+
 ```bash
 npm run compare:notrace -- \
   .notrace/sessions/<baseline-id>/notrace.json \
   .notrace/sessions/<candidate-id>/notrace.json
 ```
 
+From an installed package:
+
+```bash
+npx -p @raquezha/notrace notrace-compare \
+  .notrace/sessions/<baseline-id>/notrace.json \
+  .notrace/sessions/<candidate-id>/notrace.json
+```
+
 ## Templates
 
 HTML source-of-truth lives in `templates/`:

package/bin/notrace-compare.mjs

@@ -0,0 +1,153 @@
+#!/usr/bin/env node
+import { readFileSync } from "node:fs";
+import { resolve, relative, dirname, basename, extname, join } from "node:path";
+
+function usage() {
+  console.error("Usage: notrace-compare <baseline-notrace.json> <candidate-notrace.json>");
+  process.exit(1);
+}
+
+const [, , baselineArg, candidateArg] = process.argv;
+if (!baselineArg || !candidateArg) usage();
+
+function loadReview(runPath) {
+  const reviewPath = join(dirname(runPath), `${basename(runPath, extname(runPath))}.review.json`);
+  try {
+    const data = JSON.parse(readFileSync(reviewPath, "utf8"));
+    if (data?.kind !== "notrace-review") return null;
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+function loadRun(filePath) {
+  const absolutePath = resolve(filePath);
+  const data = JSON.parse(readFileSync(absolutePath, "utf8"));
+  if (data?.kind !== "notrace-run") {
+    throw new Error(`${filePath} is not a notrace run record`);
+  }
+  return { path: absolutePath, data, review: loadReview(absolutePath) };
+}
+
+function fmtNumber(value) {
+  return Number(value || 0).toLocaleString();
+}
+
+function fmtUsd(value) {
+  return `$${Number(value || 0).toFixed(5)}`;
+}
+
+function fmtMs(value) {
+  const ms = Number(value || 0);
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+}
+
+function fmtDelta(delta, formatter = fmtNumber, invertGood = false) {
+  const good = invertGood ? delta > 0 : delta < 0;
+  const bad = invertGood ? delta < 0 : delta > 0;
+  const sign = delta > 0 ? "+" : "";
+  const text = `${sign}${formatter(delta)}`;
+  if (good) return `${text} better`;
+  if (bad) return `${text} worse`;
+  return `${text} same`;
+}
+
+function list(value) {
+  return Array.isArray(value) && value.length ? value.join(", ") : "-";
+}
+
+const baseline = loadRun(baselineArg);
+const candidate = loadRun(candidateArg);
+
+const a = baseline.data;
+const b = candidate.data;
+const aReview = baseline.review;
+const bReview = candidate.review;
+const aActivity = a.activity || {};
+const bActivity = b.activity || {};
+const aTotals = aActivity.totals || {};
+const bTotals = bActivity.totals || {};
+
+const rows = [
+  {
+    label: "Total tokens",
+    baseline: fmtNumber(aTotals.totalTokens),
+    candidate: fmtNumber(bTotals.totalTokens),
+    delta: fmtDelta((bTotals.totalTokens || 0) - (aTotals.totalTokens || 0))
+  },
+  {
+    label: "Input tokens",
+    baseline: fmtNumber(aTotals.inputTokens),
+    candidate: fmtNumber(bTotals.inputTokens),
+    delta: fmtDelta((bTotals.inputTokens || 0) - (aTotals.inputTokens || 0))
+  },
+  {
+    label: "Output tokens",
+    baseline: fmtNumber(aTotals.outputTokens),
+    candidate: fmtNumber(bTotals.outputTokens),
+    delta: fmtDelta((bTotals.outputTokens || 0) - (aTotals.outputTokens || 0))
+  },
+  {
+    label: "Duration",
+    baseline: fmtMs(aActivity.durationMs),
+    candidate: fmtMs(bActivity.durationMs),
+    delta: fmtDelta((bActivity.durationMs || 0) - (aActivity.durationMs || 0), fmtMs)
+  },
+  {
+    label: "LLM calls",
+    baseline: fmtNumber(aActivity.llmCallCount),
+    candidate: fmtNumber(bActivity.llmCallCount),
+    delta: fmtDelta((bActivity.llmCallCount || 0) - (aActivity.llmCallCount || 0))
+  },
+  {
+    label: "Tool calls",
+    baseline: fmtNumber(aActivity.toolCallCount),
+    candidate: fmtNumber(bActivity.toolCallCount),
+    delta: fmtDelta((bActivity.toolCallCount || 0) - (aActivity.toolCallCount || 0))
+  },
+  {
+    label: "Tool errors",
+    baseline: fmtNumber(aActivity.toolErrorCount),
+    candidate: fmtNumber(bActivity.toolErrorCount),
+    delta: fmtDelta((bActivity.toolErrorCount || 0) - (aActivity.toolErrorCount || 0))
+  },
+  {
+    label: "Cost (USD)",
+    baseline: fmtUsd(aTotals.totalCostUsd),
+    candidate: fmtUsd(bTotals.totalCostUsd),
+    delta: fmtDelta((bTotals.totalCostUsd || 0) - (aTotals.totalCostUsd || 0), fmtUsd)
+  }
+];
+
+const labelWidth = Math.max(...rows.map((row) => row.label.length));
+const baselineWidth = Math.max("Baseline".length, ...rows.map((row) => row.baseline.length));
+const candidateWidth = Math.max("Candidate".length, ...rows.map((row) => row.candidate.length));
+
+function pad(value, width) {
+  return String(value).padEnd(width);
+}
+
+console.log("notrace compare\n");
+console.log(`Baseline : ${relative(process.cwd(), baseline.path) || baseline.path}`);
+console.log(`Candidate: ${relative(process.cwd(), candidate.path) || candidate.path}`);
+console.log("");
+console.log(`Task      : ${b.task?.id || a.task?.id || "(none)"}`);
+console.log(`Capture   : ${a.captureMode} -> ${b.captureMode}`);
+console.log(`Models    : ${list(a.conditions?.models)} -> ${list(b.conditions?.models)}`);
+console.log(`Providers : ${list(a.conditions?.providers)} -> ${list(b.conditions?.providers)}`);
+console.log("");
+console.log(`Review    : ${(aReview?.outcome || "-")}/${(aReview?.friction || "-")} -> ${(bReview?.outcome || "-")}/${(bReview?.friction || "-")}`);
+if (aReview?.lesson || bReview?.lesson) {
+  console.log(`Lessons   : ${(aReview?.lesson || "-")} -> ${(bReview?.lesson || "-")}`);
+}
+if (aReview?.nextChange || bReview?.nextChange) {
+  console.log(`Next      : ${(aReview?.nextChange || "-")} -> ${(bReview?.nextChange || "-")}`);
+}
+console.log("");
+console.log(`${pad("Metric", labelWidth)} | ${pad("Baseline", baselineWidth)} | ${pad("Candidate", candidateWidth)} | Delta`);
+console.log(`${"-".repeat(labelWidth)}-+-${"-".repeat(baselineWidth)}-+-${"-".repeat(candidateWidth)}-+-${"-".repeat(24)}`);
+for (const row of rows) {
+  console.log(`${pad(row.label, labelWidth)} | ${pad(row.baseline, baselineWidth)} | ${pad(row.candidate, candidateWidth)} | ${row.delta}`);
+}

package/bin/notrace-review.mjs

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { resolve, relative, dirname, basename, extname, join } from "node:path";
+
+const VALID_OUTCOMES = new Set(["success", "partial", "failed", "abandoned", "inconclusive"]);
+const VALID_FRICTION = new Set(["low", "medium", "high"]);
+
+function appendWorkLogEntry(taskDir, message) {
+  const workMd = join(taskDir, "WORK.md");
+  if (!existsSync(workMd)) return;
+
+  const text = readFileSync(workMd, "utf8");
+  const entry = `- ${new Date().toISOString()}: ${message}`;
+
+  if (!/^(## )?\[LOG\]\s*$/m.test(text)) {
+    writeFileSync(workMd, `${text.trimEnd()}\n\n## [LOG]\n${entry}\n`, { encoding: "utf8" });
+    return;
+  }
+
+  const lines = text.split("\n");
+  const logIndex = lines.findIndex((line) => /^(## )?\[LOG\]\s*$/.test(line));
+  if (logIndex === -1) return;
+
+  let nextSectionIndex = lines.length;
+  for (let i = logIndex + 1; i < lines.length; i++) {
+    if (/^(## )?\[[A-Z0-9_-]+\]\s*$/.test(lines[i])) {
+      nextSectionIndex = i;
+      break;
+    }
+  }
+
+  const before = lines.slice(0, nextSectionIndex);
+  const after = lines.slice(nextSectionIndex);
+  while (before.length > logIndex + 1 && before[before.length - 1]?.trim() === "") {
+    before.pop();
+  }
+  before.push(entry);
+
+  writeFileSync(workMd, `${[...before, ...after].join("\n").replace(/\n*$/, "\n")}`, { encoding: "utf8" });
+}
+
+function usage() {
+  console.error("Usage: notrace-review <notrace.json> [--outcome value] [--friction value] [--lesson text] [--next-change text]");
+  process.exit(1);
+}
+
+const args = process.argv.slice(2);
+if (!args.length) usage();
+
+const runPath = resolve(args[0]);
+const flags = args.slice(1);
+
+function takeFlag(name) {
+  const index = flags.indexOf(name);
+  if (index === -1) return undefined;
+  const value = flags[index + 1];
+  if (!value || value.startsWith("--")) {
+    throw new Error(`Missing value for ${name}`);
+  }
+  return value;
+}
+
+const outcome = takeFlag("--outcome");
+const friction = takeFlag("--friction");
+const lesson = takeFlag("--lesson");
+const nextChange = takeFlag("--next-change");
+
+if (!existsSync(runPath)) {
+  throw new Error(`Run record not found: ${runPath}`);
+}
+
+const run = JSON.parse(readFileSync(runPath, "utf8"));
+if (run?.kind !== "notrace-run") {
+  throw new Error(`Not a notrace run record: ${runPath}`);
+}
+
+if (outcome && !VALID_OUTCOMES.has(outcome)) {
+  throw new Error(`Invalid outcome: ${outcome}`);
+}
+if (friction && !VALID_FRICTION.has(friction)) {
+  throw new Error(`Invalid friction: ${friction}`);
+}
+
+const reviewPath = join(dirname(runPath), `${basename(runPath, extname(runPath))}.review.json`);
+const existing = existsSync(reviewPath)
+  ? JSON.parse(readFileSync(reviewPath, "utf8"))
+  : {
+      schemaVersion: 1,
+      kind: "notrace-review",
+      traceId: run.traceId,
+      runRecord: basename(runPath),
+      outcome: null,
+      friction: null,
+      lesson: "",
+      nextChange: ""
+    };
+
+const review = {
+  ...existing,
+  traceId: run.traceId,
+  runRecord: basename(runPath),
+  outcome: outcome ?? existing.outcome ?? null,
+  friction: friction ?? existing.friction ?? null,
+  lesson: lesson ?? existing.lesson ?? "",
+  nextChange: nextChange ?? existing.nextChange ?? ""
+};
+
+writeFileSync(reviewPath, `${JSON.stringify(review, null, 2)}\n`, { encoding: "utf8", mode: 0o600 });
+
+if (run.repository?.cwd && (run.task?.dir || run.task?.path)) {
+  const taskDir = run.task?.dir
+    ? resolve(run.task.dir)
+    : resolve(run.repository.cwd, run.task.path);
+  appendWorkLogEntry(taskDir, `notrace review recorded: outcome=${review.outcome ?? "-"}, friction=${review.friction ?? "-"}, review=${relative(taskDir, reviewPath)}`);
+} else {
+  appendWorkLogEntry(dirname(runPath), `notrace review recorded: outcome=${review.outcome ?? "-"}, friction=${review.friction ?? "-"}, review=${basename(reviewPath)}`);
+}
+
+console.log(`notrace review ✓ ${reviewPath}`);
+console.log(`  outcome   : ${review.outcome ?? "-"}`);
+console.log(`  friction  : ${review.friction ?? "-"}`);
+console.log(`  lesson    : ${review.lesson || "-"}`);
+console.log(`  nextChange: ${review.nextChange || "-"}`);

package/dist/notrace/index.js

@@ -1,5 +1,6 @@
-import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
+import { readFileSync, writeFileSync, mkdirSync, existsSync, renameSync, chmodSync } from "node:fs";
 import * as path from "node:path";
+import { execSync } from "node:child_process";
 import { getActiveAdapter } from "./adapters.js";
 import { generateHtmlReport, generateDashboardHtml } from "./renderer.js";
 const REDACTED = "[REDACTED by notrace]";
@@ -21,6 +22,8 @@ function isSensitiveKey(key) {
     return SENSITIVE_KEY_RE.test(normalized);
 }
 function sanitizeTraceValue(value) {
+    if (currentMode === "metadata")
+        return { omitted: true, reason: "metadata-capture" };
     if (currentMode === "full")
         return value;
     if (value == null || typeof value !== "object") {
@@ -47,6 +50,34 @@ function normalizeUsage(raw) {
         totalCostUsd: asNumber(usage.cost?.total),
     };
 }
+function readJsonFile(filePath, fallback) {
+    try {
+        return JSON.parse(readFileSync(filePath, "utf-8"));
+    }
+    catch {
+        return fallback;
+    }
+}
+function writePrivateFileAtomic(filePath, content) {
+    const tmpPath = `${filePath}.${process.pid}.${Date.now()}.tmp`;
+    writeFileSync(tmpPath, content, { encoding: "utf-8", mode: 0o600 });
+    chmodSync(tmpPath, 0o600);
+    renameSync(tmpPath, filePath);
+}
+function validateRunRecord(record) {
+    if (record.kind !== "notrace-run")
+        throw new Error("notrace record validation failed: invalid kind");
+    if (record.schemaVersion !== SCHEMA_VERSION)
+        throw new Error("notrace record validation failed: invalid schemaVersion");
+    if (!record.traceId || !record.session?.id)
+        throw new Error("notrace record validation failed: missing session id");
+    if (!record.repository?.cwd)
+        throw new Error("notrace record validation failed: missing repository cwd");
+    if (!record.activity?.totals)
+        throw new Error("notrace record validation failed: missing activity totals");
+    if (!Array.isArray(record.events))
+        throw new Error("notrace record validation failed: events must be an array");
+}
 function collectActivity(events, startedAt, endedAt) {
     const activity = {
         turnCount: 0,
@@ -224,13 +255,20 @@ export default function (pi) {
         const finalTraceId = ctx.sessionManager?.getSessionId?.() || traceId;
         const outputDir = path.join(notraceDir, "sessions", finalTraceId.replace(/[^a-z0-9]/gi, "-"));
         const repositoryName = path.basename(ctx.cwd);
+        let branchName = null;
+        try {
+            branchName = execSync("git branch --show-current", { cwd: ctx.cwd, stdio: ["ignore", "pipe", "ignore"], encoding: "utf8" }).trim() || null;
+        }
+        catch {
+            // not a git repo or no commits yet
+        }
         const recordPath = path.join(outputDir, "notrace.json");
         let mergedEvents = events;
         let originalStartedAt = startTime;
         let originalTask = null;
         if (existsSync(recordPath)) {
             try {
-                const oldRecord = JSON.parse(readFileSync(recordPath, "utf-8"));
+                const oldRecord = readJsonFile(recordPath, null);
                 if (Array.isArray(oldRecord.events)) {
                     mergedEvents = [...oldRecord.events, ...events];
                 }
@@ -256,6 +294,7 @@ export default function (pi) {
             repository: {
                 name: repositoryName,
                 cwd: ctx.cwd,
+                branch: branchName,
             },
             session: {
                 id: finalTraceId,
@@ -271,19 +310,20 @@ export default function (pi) {
             telemetry: { extensions: telemetry },
             events: mergedEvents,
         };
+        validateRunRecord(record);
         const html = generateHtmlReport(record);
         mkdirSync(outputDir, { recursive: true });
         const htmlPath = path.join(outputDir, "notrace.html");
-        writeFileSync(htmlPath, html);
-        writeFileSync(recordPath, `${JSON.stringify(record, null, 2)}\n`);
+        writePrivateFileAtomic(htmlPath, html);
+        writePrivateFileAtomic(recordPath, `${JSON.stringify(record, null, 2)}\n`);
         const indexPath = path.join(notraceDir, "index.json");
-        const existing = existsSync(indexPath) ? JSON.parse(readFileSync(indexPath, "utf-8")) : { repositoryName, sessions: [] };
+        const existing = readJsonFile(indexPath, { repositoryName, sessions: [] });
         let sessions = Array.isArray(existing.sessions) ? existing.sessions.filter((s) => s.sessionId !== finalTraceId) : [];
         if (!isGhostSession) {
             sessions.push(createIndexEntry(record, ctx.cwd, htmlPath, recordPath));
         }
-        writeFileSync(indexPath, `${JSON.stringify({ repositoryName, sessions }, null, 2)}\n`);
-        writeFileSync(path.join(notraceDir, "index.html"), generateDashboardHtml(sessions, { repositoryName }));
+        writePrivateFileAtomic(indexPath, `${JSON.stringify({ repositoryName, sessions }, null, 2)}\n`);
+        writePrivateFileAtomic(path.join(notraceDir, "index.html"), generateDashboardHtml(sessions, { repositoryName }));
         if (context) {
             adapter.attach(context, {
                 html: path.relative(ctx.cwd, htmlPath),

package/dist/notrace/renderer.js

@@ -83,7 +83,9 @@ function taskDisplay(taskish) {
     return "No active task";
 }
 function resolveRepoName(data) {
-    return data?.repository?.name || data?.repositoryName || data?.repoName || "Repository";
+    const name = data?.repository?.name || data?.repositoryName || data?.repoName || "Repository";
+    const branch = data?.repository?.branch;
+    return branch ? `${name} @ ${branch}` : name;
 }
 function formatUsd(value) {
     const num = Number(value || 0);
@@ -202,6 +204,44 @@ function shell(title, body, script = "") {
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;
@@ -401,6 +441,42 @@ function shell(title, body, script = "") {
 <body>${body}${script ? `<script>${script}</script>` : ""}</body>
 </html>`;
 }
+function copyButton(value, label) {
+    return `<button class="copy-btn" type="button" data-copy-value="${escapeHtml(value)}" aria-label="Copy ${escapeHtml(label)}" title="Copy ${escapeHtml(label)}"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button>`;
+}
+function copyScript() {
+    return `(() => {
+    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';
+        }
+      });
+    });
+  })();`;
+}
 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>`;
 }
@@ -557,12 +633,12 @@ export function generateHtmlReport(data) {
     <section class="hero">
       <div class="hero-top">
         <div>
-          <div class="brand"><a class="brand-link" href="${escapeHtml(indexHref)}" onclick="if (window.history.length > 1) { window.history.back(); return false; }">${wordmarkSvg()}</a><p class="subtitle">Session retrospective for ${escapeHtml(data.traceId)}</p></div>
+          <div class="brand"><a class="brand-link" href="${escapeHtml(indexHref)}" onclick="if (window.history.length > 1) { window.history.back(); return false; }">${wordmarkSvg()}</a><p class="subtitle session-subtitle"><span>Session retrospective</span><span class="session-id-chip"><span>${escapeHtml(data.traceId)}</span>${copyButton(String(data.traceId || ""), "session ID")}</span></p></div>
         </div>
         <div class="meta">
-          <span class="pill">${escapeHtml(repositoryName)}</span>
+          <span class="pill">${escapeHtml(resolveRepoName(data))}</span>
           <span class="pill">Started ${formatDateLong(data.session?.startedAt)}</span>
-          <span class="pill">Capture ${escapeHtml(data.captureMode || "full")}</span>
+          <span class="pill">Mode: ${escapeHtml(data.captureMode || "full")}</span>
         </div>
       </div>
       <div class="metrics">
@@ -601,5 +677,5 @@ export function generateHtmlReport(data) {
       <div class="footer-meta"><a href="https://opensource.org/licenses/MIT">MIT</a></div>
     </footer>
   </div>`;
-    return shell(`notrace - ${data.traceId}`, body);
+    return shell(`notrace - ${data.traceId}`, body, copyScript());
 }

package/dist/notrace/types.d.ts

@@ -30,6 +30,7 @@ export type NotraceHarnessInfo = {
 export type NotraceRepositoryInfo = {
     name: string;
     cwd: string;
+    branch?: string | null;
 };
 export type NotraceSessionInfo = {
     id: string;

package/extensions/notrace/index.ts

@@ -1,6 +1,7 @@
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
-import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
+import { readFileSync, writeFileSync, mkdirSync, existsSync, renameSync, chmodSync } from "node:fs";
 import * as path from "node:path";
+import { execSync } from "node:child_process";
 import type {
   NotraceActivity,
   NotraceCaptureMode,
@@ -64,6 +65,7 @@ function isSensitiveKey(key: string): boolean {
 }
 
 function sanitizeTraceValue(value: unknown): unknown {
+  if (currentMode === "metadata") return { omitted: true, reason: "metadata-capture" };
   if (currentMode === "full") return value;
   if (value == null || typeof value !== "object") {
     return typeof value === "string" ? value.replace(SENSITIVE_VALUE_RE, REDACTED).slice(0, 10000) : value;
@@ -90,6 +92,30 @@ function normalizeUsage(raw: unknown): Required<Pick<UsageLike, "inputTokens" |
   };
 }
 
+function readJsonFile<T>(filePath: string, fallback: T): T {
+  try {
+    return JSON.parse(readFileSync(filePath, "utf-8")) as T;
+  } catch {
+    return fallback;
+  }
+}
+
+function writePrivateFileAtomic(filePath: string, content: string): void {
+  const tmpPath = `${filePath}.${process.pid}.${Date.now()}.tmp`;
+  writeFileSync(tmpPath, content, { encoding: "utf-8", mode: 0o600 });
+  chmodSync(tmpPath, 0o600);
+  renameSync(tmpPath, filePath);
+}
+
+function validateRunRecord(record: NotraceRunRecord): void {
+  if (record.kind !== "notrace-run") throw new Error("notrace record validation failed: invalid kind");
+  if (record.schemaVersion !== SCHEMA_VERSION) throw new Error("notrace record validation failed: invalid schemaVersion");
+  if (!record.traceId || !record.session?.id) throw new Error("notrace record validation failed: missing session id");
+  if (!record.repository?.cwd) throw new Error("notrace record validation failed: missing repository cwd");
+  if (!record.activity?.totals) throw new Error("notrace record validation failed: missing activity totals");
+  if (!Array.isArray(record.events)) throw new Error("notrace record validation failed: events must be an array");
+}
+
 function collectActivity(events: NotraceEvent[], startedAt: number, endedAt: number): NotraceActivity {
   const activity: NotraceActivity = {
     turnCount: 0,
@@ -277,6 +303,12 @@ export default function (pi: ExtensionAPI) {
     const finalTraceId = ctx.sessionManager?.getSessionId?.() || traceId;
     const outputDir = path.join(notraceDir, "sessions", finalTraceId.replace(/[^a-z0-9]/gi, "-"));
     const repositoryName = path.basename(ctx.cwd);
+    let branchName: string | null = null;
+    try {
+      branchName = execSync("git branch --show-current", { cwd: ctx.cwd, stdio: ["ignore", "pipe", "ignore"], encoding: "utf8" }).trim() || null;
+    } catch {
+      // not a git repo or no commits yet
+    }
     const recordPath = path.join(outputDir, "notrace.json");
 
     let mergedEvents = events;
@@ -284,7 +316,7 @@ export default function (pi: ExtensionAPI) {
     let originalTask: any = null;
     if (existsSync(recordPath)) {
       try {
-        const oldRecord = JSON.parse(readFileSync(recordPath, "utf-8"));
+        const oldRecord = readJsonFile<any>(recordPath, null);
         if (Array.isArray(oldRecord.events)) {
           mergedEvents = [...oldRecord.events, ...events];
         }
@@ -313,6 +345,7 @@ export default function (pi: ExtensionAPI) {
       repository: {
         name: repositoryName,
         cwd: ctx.cwd,
+        branch: branchName,
       },
       session: {
         id: finalTraceId,
@@ -329,23 +362,24 @@ export default function (pi: ExtensionAPI) {
       events: mergedEvents,
     };
 
+    validateRunRecord(record);
     const html = generateHtmlReport(record);
 
     mkdirSync(outputDir, { recursive: true });
     const htmlPath = path.join(outputDir, "notrace.html");
-    writeFileSync(htmlPath, html);
-    writeFileSync(recordPath, `${JSON.stringify(record, null, 2)}\n`);
+    writePrivateFileAtomic(htmlPath, html);
+    writePrivateFileAtomic(recordPath, `${JSON.stringify(record, null, 2)}\n`);
 
     const indexPath = path.join(notraceDir, "index.json");
-    const existing = existsSync(indexPath) ? JSON.parse(readFileSync(indexPath, "utf-8")) : { repositoryName, sessions: [] };
+    const existing = readJsonFile<any>(indexPath, { repositoryName, sessions: [] });
     let sessions = Array.isArray(existing.sessions) ? existing.sessions.filter((s: any) => s.sessionId !== finalTraceId) : [];
     
     if (!isGhostSession) {
       sessions.push(createIndexEntry(record, ctx.cwd, htmlPath, recordPath));
     }
     
-    writeFileSync(indexPath, `${JSON.stringify({ repositoryName, sessions }, null, 2)}\n`);
-    writeFileSync(path.join(notraceDir, "index.html"), generateDashboardHtml(sessions, { repositoryName }));
+    writePrivateFileAtomic(indexPath, `${JSON.stringify({ repositoryName, sessions }, null, 2)}\n`);
+    writePrivateFileAtomic(path.join(notraceDir, "index.html"), generateDashboardHtml(sessions, { repositoryName }));
 
     if (context) {
       adapter.attach(context, {

package/extensions/notrace/renderer.ts

@@ -87,7 +87,9 @@ function taskDisplay(taskish: any): string {
 }
 
 function resolveRepoName(data: any): string {
-  return data?.repository?.name || data?.repositoryName || data?.repoName || "Repository";
+  const name = data?.repository?.name || data?.repositoryName || data?.repoName || "Repository";
+  const branch = data?.repository?.branch;
+  return branch ? `${name} @ ${branch}` : name;
 }
 
 function formatUsd(value: number | undefined): string {
@@ -211,6 +213,44 @@ function shell(title: string, body: string, script = ""): string {
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;
@@ -411,6 +451,44 @@ function shell(title: string, body: string, script = ""): string {
 </html>`;
 }
 
+function copyButton(value: string, label: string): string {
+  return `<button class="copy-btn" type="button" data-copy-value="${escapeHtml(value)}" aria-label="Copy ${escapeHtml(label)}" title="Copy ${escapeHtml(label)}"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button>`;
+}
+
+function copyScript(): string {
+  return `(() => {
+    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';
+        }
+      });
+    });
+  })();`;
+}
+
 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>`;
 }
@@ -568,12 +646,12 @@ export function generateHtmlReport(data: any): string {
     <section class="hero">
       <div class="hero-top">
         <div>
-          <div class="brand"><a class="brand-link" href="${escapeHtml(indexHref)}" onclick="if (window.history.length > 1) { window.history.back(); return false; }">${wordmarkSvg()}</a><p class="subtitle">Session retrospective for ${escapeHtml(data.traceId)}</p></div>
+          <div class="brand"><a class="brand-link" href="${escapeHtml(indexHref)}" onclick="if (window.history.length > 1) { window.history.back(); return false; }">${wordmarkSvg()}</a><p class="subtitle session-subtitle"><span>Session retrospective</span><span class="session-id-chip"><span>${escapeHtml(data.traceId)}</span>${copyButton(String(data.traceId || ""), "session ID")}</span></p></div>
         </div>
         <div class="meta">
-          <span class="pill">${escapeHtml(repositoryName)}</span>
+          <span class="pill">${escapeHtml(resolveRepoName(data))}</span>
           <span class="pill">Started ${formatDateLong(data.session?.startedAt)}</span>
-          <span class="pill">Capture ${escapeHtml(data.captureMode || "full")}</span>
+          <span class="pill">Mode: ${escapeHtml(data.captureMode || "full")}</span>
         </div>
       </div>
       <div class="metrics">
@@ -612,5 +690,5 @@ export function generateHtmlReport(data: any): string {
       <div class="footer-meta"><a href="https://opensource.org/licenses/MIT">MIT</a></div>
     </footer>
   </div>`;
-  return shell(`notrace - ${data.traceId}`, body);
+  return shell(`notrace - ${data.traceId}`, body, copyScript());
 }

package/extensions/notrace/types.ts

@@ -36,6 +36,7 @@ export type NotraceHarnessInfo = {
 export type NotraceRepositoryInfo = {
   name: string;
   cwd: string;
+  branch?: string | null;
 };
 
 export type NotraceSessionInfo = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raquezha/notrace",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Zero-dependency, local-first interactive HTML Trace Viewer for the Pi Coding Agent",
   "main": "dist/notrace/index.js",
   "types": "dist/notrace/index.d.ts",
@@ -8,6 +8,8 @@
   "scripts": {
     "build": "tsc",
     "render:samples": "npm run build && node ./templates/render-samples.mjs",
+    "review": "node ./bin/notrace-review.mjs",
+    "compare": "node ./bin/notrace-compare.mjs",
     "prepare": "npm run build"
   },
   "peerDependencies": {
@@ -31,5 +33,9 @@
     "extensions": [
       "extensions"
     ]
+  },
+  "bin": {
+    "notrace-review": "./bin/notrace-review.mjs",
+    "notrace-compare": "./bin/notrace-compare.mjs"
   }
 }

package/templates/dashboard.sample.html

@@ -68,6 +68,44 @@
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;

package/templates/session.sample.html

@@ -68,6 +68,44 @@
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;
@@ -285,12 +323,12 @@
     </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">Session retrospective for 019ed2ee-5252-76ee-b353-ad925a6bad31</p></div>
+  </svg></a><p class="subtitle session-subtitle"><span>Session retrospective</span><span class="session-id-chip"><span>019ed2ee-5252-76ee-b353-ad925a6bad31</span><button class="copy-btn" type="button" data-copy-value="019ed2ee-5252-76ee-b353-ad925a6bad31" aria-label="Copy session ID" title="Copy session ID"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></span></p></div>
         </div>
         <div class="meta">
           <span class="pill">nothing</span>
           <span class="pill">Started 2026-06-17 22:05</span>
-          <span class="pill">Capture full</span>
+          <span class="pill">Mode: full</span>
         </div>
       </div>
       <div class="metrics">
@@ -427,5 +465,35 @@
       <div class="footer-tagline">Local-first retrospective engine</div>
       <div class="footer-meta"><a href="https://opensource.org/licenses/MIT">MIT</a></div>
     </footer>
-  </div></body>
+  </div><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';
+        }
+      });
+    });
+  })();</script></body>
 </html>

package/templates/sessions/019ed2ee-1000-76ee-b353-000000000001/notrace.html

@@ -68,6 +68,44 @@
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;
@@ -285,12 +323,12 @@
     </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">Session retrospective for 019ed2ee-1000-76ee-b353-000000000001</p></div>
+  </svg></a><p class="subtitle session-subtitle"><span>Session retrospective</span><span class="session-id-chip"><span>019ed2ee-1000-76ee-b353-000000000001</span><button class="copy-btn" type="button" data-copy-value="019ed2ee-1000-76ee-b353-000000000001" aria-label="Copy session ID" title="Copy session ID"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></span></p></div>
         </div>
         <div class="meta">
           <span class="pill">nothing</span>
           <span class="pill">Started 2026-06-17 17:00</span>
-          <span class="pill">Capture full</span>
+          <span class="pill">Mode: full</span>
         </div>
       </div>
       <div class="metrics">
@@ -422,5 +460,35 @@
       <div class="footer-tagline">Local-first retrospective engine</div>
       <div class="footer-meta"><a href="https://opensource.org/licenses/MIT">MIT</a></div>
     </footer>
-  </div></body>
+  </div><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';
+        }
+      });
+    });
+  })();</script></body>
 </html>

package/templates/sessions/019ed2ee-1001-76ee-b353-000000000002/notrace.html

@@ -68,6 +68,44 @@
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;
@@ -285,12 +323,12 @@
     </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">Session retrospective for 019ed2ee-1001-76ee-b353-000000000002</p></div>
+  </svg></a><p class="subtitle session-subtitle"><span>Session retrospective</span><span class="session-id-chip"><span>019ed2ee-1001-76ee-b353-000000000002</span><button class="copy-btn" type="button" data-copy-value="019ed2ee-1001-76ee-b353-000000000002" aria-label="Copy session ID" title="Copy session ID"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></span></p></div>
         </div>
         <div class="meta">
           <span class="pill">nothing</span>
           <span class="pill">Started 2026-06-17 17:37</span>
-          <span class="pill">Capture redacted</span>
+          <span class="pill">Mode: redacted</span>
         </div>
       </div>
       <div class="metrics">
@@ -421,5 +459,35 @@
       <div class="footer-tagline">Local-first retrospective engine</div>
       <div class="footer-meta"><a href="https://opensource.org/licenses/MIT">MIT</a></div>
     </footer>
-  </div></body>
+  </div><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';
+        }
+      });
+    });
+  })();</script></body>
 </html>

package/templates/sessions/019ed2ee-1002-76ee-b353-000000000003/notrace.html

@@ -68,6 +68,44 @@
       overflow: visible;
     }
     .subtitle { margin: 10px 0 0; color: var(--muted); }
+    .session-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .session-id-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      max-width: 100%;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(0,0,0,0.18);
+      color: var(--text);
+      font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.78rem;
+      word-break: break-all;
+    }
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.04);
+      color: var(--muted);
+      cursor: pointer;
+      transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
+    }
+    .copy-btn:hover, .copy-btn.copied {
+      color: var(--text);
+      border-color: rgba(216,132,98,0.45);
+      background: var(--accent-soft);
+    }
     .meta {
       display: flex;
       gap: 8px;
@@ -285,12 +323,12 @@
     </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">Session retrospective for 019ed2ee-1002-76ee-b353-000000000003</p></div>
+  </svg></a><p class="subtitle session-subtitle"><span>Session retrospective</span><span class="session-id-chip"><span>019ed2ee-1002-76ee-b353-000000000003</span><button class="copy-btn" type="button" data-copy-value="019ed2ee-1002-76ee-b353-000000000003" aria-label="Copy session ID" title="Copy session ID"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></span></p></div>
         </div>
         <div class="meta">
           <span class="pill">nothing</span>
           <span class="pill">Started 2026-06-17 18:14</span>
-          <span class="pill">Capture metadata</span>
+          <span class="pill">Mode: metadata</span>
         </div>
       </div>
       <div class="metrics">
@@ -422,5 +460,35 @@
       <div class="footer-tagline">Local-first retrospective engine</div>
       <div class="footer-meta"><a href="https://opensource.org/licenses/MIT">MIT</a></div>
     </footer>
-  </div></body>
+  </div><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';
+        }
+      });
+    });
+  })();</script></body>
 </html>