@sickr/replay 0.2.0 → 0.4.0

package/dist/cli.js

@@ -2,7 +2,7 @@
 import { pathToFileURL } from 'node:url';
 import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync, statSync, unlinkSync } from 'node:fs';
 import { homedir } from 'node:os';
-import { join } from 'node:path';
+import { join, dirname } from 'node:path';
 import { spawn } from 'node:child_process';
 import { appendEvent, loadRun, runsDir, latestRunId } from './recorder.js';
 import { mergeHooks, removeHooks } from './hookConfig.js';
@@ -16,18 +16,22 @@ export function parseCommand(argv) {
 }
 export const HELP = `SICKR Replay — audit & replay what your AI coding agent did.
 
-Records your Claude Code session (prompts, edits, commands) to a local, redacted
-timeline you can replay — and optionally share as a public link.
+Records your Claude Code or Codex session (prompts, edits, commands) to a local,
+redacted timeline you can replay — and optionally share as a public link.
 
-Why: a durable record of every agent action. If your agent (Claude or Codex)
-loses context or can't reload a past chat, the replay log helps you — and it —
-recall what was just done.
+Why: a durable record of every agent action — a dashcam for your coding agent.
+If your agent (Claude or Codex) loses context or can't reload a past chat, the
+replay log helps you — and it — recall exactly what was just done.
 
 Usage: npx @sickr/replay <command> [options]
 
 Commands:
-  init           Install the Claude Code recording hooks in this project and
-                 start capturing runs to ~/.sickr/runs (secrets redacted).
+  init           Install the recording hooks in this project and start capturing
+                 runs to ~/.sickr/runs (secrets redacted).
+                   --codex      install for Codex (.codex/hooks.json) instead of
+                                Claude Code (.claude/settings.json)
+                   --as "<name>"  label your prompts with <name> on replays
+                                (default "Human"; or set SICKR_HANDLE)
   open [run]     Render a run to a local HTML timeline and open it in your
                  browser. 100% local — nothing is uploaded.
   share [run]    Redact and publish ONE run to a public sickr.ai/r/<id> link
@@ -42,9 +46,11 @@ Commands:
 
 ────────────────────────────────────────────────────────────────────
 This tool audits ONE agent on ONE machine. SICKR governs your whole team.
+Issue tracking + your team + automation + agents — one governed workflow for
+audit, accountability, productivity and confidence.
 
-  · Gates & approvals — plan sign-off, review, merge and validation checks
-    that work HOLDS at until they pass.
+  · Gates & approvals — work holds at plan sign-off, review, merge and
+    validation checks until each one passes.
   · Humans + agents on one board — agents are first-class teammates with
     roles, capacity and accountability, not a side channel.
   · A full, signed-off audit trail across every actor and every change.
@@ -56,44 +62,80 @@ This tool audits ONE agent on ONE machine. SICKR governs your whole team.
 export function currentRunId(cc) {
     return String(cc.session_id ?? 'session');
 }
-/** Ingest one Claude Code hook payload. Must never throw — a hook error would break the agent. */
-export function handleRecord(input) {
+const PROVIDERS = {
+    claude: { name: 'Claude Code', label: 'Claude', settingsPath: () => join(process.cwd(), '.claude', 'settings.json') },
+    codex: { name: 'Codex', label: 'Codex', settingsPath: () => join(process.cwd(), '.codex', 'hooks.json') },
+};
+function configPath() {
+    return join(homedir(), '.sickr', 'config.json');
+}
+/** Display name for the human: SICKR_HANDLE env, else ~/.sickr/config.json handle, else "Human". */
+function resolveHandle() {
+    if (process.env.SICKR_HANDLE)
+        return process.env.SICKR_HANDLE;
+    try {
+        const c = JSON.parse(readFileSync(configPath(), 'utf8'));
+        if (c.handle)
+            return c.handle;
+    }
+    catch { /* no config */ }
+    return 'Human';
+}
+/** Ingest one hook payload (Claude Code or Codex). Must never throw. */
+export function handleRecord(input, provider = 'claude') {
     try {
         const cc = JSON.parse(input);
-        appendEvent(currentRunId(cc), cc);
+        appendEvent(currentRunId(cc), cc, { human: resolveHandle(), agent: PROVIDERS[provider].label });
     }
     catch {
         /* swallow: recording is best-effort and must not disrupt the session */
     }
 }
-function handleInit() {
-    const settingsPath = join(process.cwd(), '.claude', 'settings.json');
+export function handleInit(provider, handle) {
+    const p = PROVIDERS[provider];
+    const settingsPath = p.settingsPath();
     const settings = existsSync(settingsPath) ? JSON.parse(readFileSync(settingsPath, 'utf8')) : {};
-    const merged = mergeHooks(settings, 'npx @sickr/replay');
-    mkdirSync(join(process.cwd(), '.claude'), { recursive: true });
+    const command = `npx @sickr/replay record${provider === 'codex' ? ' --codex' : ''}`;
+    const merged = mergeHooks(settings, command);
+    mkdirSync(dirname(settingsPath), { recursive: true });
     writeFileSync(settingsPath, JSON.stringify(merged, null, 2) + '\n');
     mkdirSync(runsDir(), { recursive: true });
-    process.stdout.write(`sickr: installed Claude Code hooks in ${settingsPath}\n` +
+    if (handle) {
+        let existing = {};
+        try {
+            existing = JSON.parse(readFileSync(configPath(), 'utf8'));
+        }
+        catch { /* none */ }
+        writeFileSync(configPath(), JSON.stringify({ ...existing, handle }, null, 2) + '\n');
+    }
+    process.stdout.write(`sickr: installed ${p.name} recording hooks in ${settingsPath}\n` +
         `Runs are recorded locally to ${runsDir()} (secrets redacted).\n` +
-        `Use Claude Code as normal, then: npx @sickr/replay open\n`);
+        (handle ? `Your prompts will be labelled "${handle}".\n` : 'Tip: set SICKR_HANDLE or run `init --as "<name>"` to label your prompts.\n') +
+        `Use ${p.name} as normal, then: npx @sickr/replay open\n`);
 }
-/** Stop recording: remove SICKR's hooks from this project's settings, keep runs. */
+/** Stop recording: remove SICKR's hooks from this project (both providers), keep runs. */
 export function handleStop() {
-    const settingsPath = join(process.cwd(), '.claude', 'settings.json');
-    if (!existsSync(settingsPath)) {
-        process.stdout.write('sickr: no .claude/settings.json here — not recording in this project.\n');
-        return;
-    }
-    let settings;
-    try {
-        settings = JSON.parse(readFileSync(settingsPath, 'utf8'));
+    const targets = [PROVIDERS.claude.settingsPath(), PROVIDERS.codex.settingsPath()];
+    const cleaned = [];
+    for (const settingsPath of targets) {
+        if (!existsSync(settingsPath))
+            continue;
+        let settings;
+        try {
+            settings = JSON.parse(readFileSync(settingsPath, 'utf8'));
+        }
+        catch {
+            process.stderr.write(`sickr: could not parse ${settingsPath}; left it unchanged.\n`);
+            continue;
+        }
+        writeFileSync(settingsPath, JSON.stringify(removeHooks(settings), null, 2) + '\n');
+        cleaned.push(settingsPath);
     }
-    catch {
-        process.stderr.write(`sickr: could not parse ${settingsPath}; left it unchanged.\n`);
+    if (cleaned.length === 0) {
+        process.stdout.write('sickr: no SICKR hooks found here — not recording in this project.\n');
         return;
     }
-    writeFileSync(settingsPath, JSON.stringify(removeHooks(settings), null, 2) + '\n');
-    process.stdout.write('sickr: recording stopped — removed SICKR hooks from .claude/settings.json.\n' +
+    process.stdout.write(`sickr: recording stopped — removed SICKR hooks from ${cleaned.join(', ')}.\n` +
         'Your recorded runs are kept. Run `npx @sickr/replay init` to start again.\n');
 }
 /** Delete all local runs. Destructive — confirms unless `yes` is set. */
@@ -111,9 +153,7 @@ export async function handleClear(yes) {
             return;
         }
         process.stdout.write(`Delete ${files.length} recorded run(s) from ${dir}? This cannot be undone. [y/N] `);
-        const answer = await new Promise((resolve) => {
-            process.stdin.once('data', (d) => resolve(d.toString().trim().toLowerCase()));
-        });
+        const answer = await promptLine();
         if (answer !== 'y' && answer !== 'yes') {
             process.stdout.write('sickr: cancelled.\n');
             return;
@@ -173,9 +213,7 @@ async function handleShare(runId, yes, open) {
             return;
         }
         process.stdout.write('Publish this run publicly? [y/N] ');
-        const answer = await new Promise((resolve) => {
-            process.stdin.once('data', (d) => resolve(d.toString().trim().toLowerCase()));
-        });
+        const answer = await promptLine();
         if (answer !== 'y' && answer !== 'yes') {
             process.stdout.write('sickr: cancelled.\n');
             return;
@@ -210,6 +248,15 @@ async function handleShare(runId, yes, open) {
     if (open)
         openInBrowser(url);
 }
+/** Read a single line of input, then release stdin so the process can exit. */
+async function promptLine() {
+    return new Promise((resolve) => {
+        process.stdin.once('data', (d) => {
+            process.stdin.pause(); // unref stdin — otherwise the event loop never drains and the CLI hangs
+            resolve(d.toString().trim().toLowerCase());
+        });
+    });
+}
 async function readStdin() {
     const chunks = [];
     for await (const chunk of process.stdin)
@@ -224,15 +271,19 @@ async function main() {
     }
     const cmd = parseCommand(argv);
     const rest = argv.slice(1);
+    const provider = rest.includes('--codex') ? 'codex' : 'claude';
     switch (cmd) {
         case 'record':
-            handleRecord(await readStdin());
+            handleRecord(await readStdin(), provider);
             return;
-        case 'init':
-            handleInit();
+        case 'init': {
+            const asIdx = rest.indexOf('--as');
+            const handle = asIdx >= 0 ? rest[asIdx + 1] : undefined;
+            handleInit(provider, handle);
             return;
+        }
         case 'open':
-            handleOpen(argv[1]);
+            handleOpen(argv.find((a, i) => i > 0 && !a.startsWith('-')));
             return;
         case 'list':
             handleList();

package/dist/hookConfig.js

@@ -1,4 +1,6 @@
-const EVENTS = ['SessionStart', 'UserPromptSubmit', 'PreToolUse', 'PostToolUse', 'Stop'];
+// PreToolUse (not PostToolUse) captures each tool action once — hooking both
+// would record every tool twice. Stop carries the assistant's final response.
+const EVENTS = ['SessionStart', 'UserPromptSubmit', 'PreToolUse', 'Stop'];
 const TAG = '@sickr/replay record';
 /**
  * Merge the SICKR recording hooks into a Claude Code settings object.

package/dist/recorder.js

@@ -1,36 +1,126 @@
-import { mkdirSync, appendFileSync, readFileSync, existsSync, readdirSync, statSync } from 'node:fs';
+import { mkdirSync, appendFileSync, readFileSync, existsSync, readdirSync, statSync, openSync, readSync, closeSync } from 'node:fs';
 import { homedir } from 'node:os';
 import { join } from 'node:path';
 import { redact } from './redact.js';
+/**
+ * Best-effort: pull the assistant's final natural-language reply from a Claude
+ * Code transcript (JSONL). Each line is `{type:'assistant', message:{content:[…]}}`
+ * with blocks of type text/thinking/tool_use — we want the last message that has
+ * `text` blocks. Reverse-scans so big transcripts stay cheap. Never throws.
+ */
+export function extractLastAssistantText(transcriptPath) {
+    try {
+        // Read only the tail — the final assistant message is at the end, and CC
+        // transcripts can be tens of MB. Keeps the Stop hook from blocking the agent.
+        const TAIL = 512 * 1024;
+        const size = statSync(transcriptPath).size;
+        let content;
+        if (size <= TAIL) {
+            content = readFileSync(transcriptPath, 'utf8');
+        }
+        else {
+            const fd = openSync(transcriptPath, 'r');
+            try {
+                const buf = Buffer.alloc(TAIL);
+                readSync(fd, buf, 0, TAIL, size - TAIL);
+                content = buf.toString('utf8');
+            }
+            finally {
+                closeSync(fd);
+            }
+        }
+        const lines = content.split('\n');
+        for (let i = lines.length - 1; i >= 0; i--) {
+            const line = lines[i].trim();
+            if (!line)
+                continue;
+            let o;
+            try {
+                o = JSON.parse(line);
+            }
+            catch {
+                continue;
+            }
+            const msg = o && typeof o.message === 'object' && o.message ? o.message : o;
+            const role = (msg && msg.role) || (o && o.type);
+            if (role !== 'assistant')
+                continue;
+            const content = msg && msg.content;
+            if (!Array.isArray(content))
+                continue;
+            const text = content
+                .filter((b) => b && b.type === 'text' && typeof b.text === 'string')
+                .map((b) => b.text)
+                .join('\n')
+                .trim();
+            if (text)
+                return text;
+        }
+    }
+    catch { /* best-effort */ }
+    return '';
+}
 export function runsDir() {
     return join(homedir(), '.sickr', 'runs');
 }
-/** Map one Claude Code hook payload to a redacted run event. */
-export function mapEvent(cc, now = new Date()) {
+/** Render a TodoWrite tool input as a readable checklist. */
+function formatTodos(todos) {
+    const mark = (s) => (s === 'completed' ? '[x]' : s === 'in_progress' ? '[~]' : '[ ]');
+    return todos.map((t) => `${mark(t.status)} ${String(t.content ?? t.activeForm ?? '')}`).join('\n');
+}
+/** Render an AskUserQuestion tool input as question(s) with their options. */
+function formatQuestions(questions) {
+    return questions
+        .map((q) => {
+        const header = q.header ? `[${String(q.header)}] ` : '';
+        const opts = Array.isArray(q.options)
+            ? q.options.map((o) => `  · ${String(o.label ?? '')}`).join('\n')
+            : '';
+        return `${header}${String(q.question ?? '')}${opts ? '\n' + opts : ''}`;
+    })
+        .join('\n\n');
+}
+/**
+ * Map one hook payload (Claude Code OR Codex — same field names) to a redacted
+ * run event. `ctx` supplies the human/agent display labels.
+ */
+export function mapEvent(cc, now = new Date(), ctx = {}) {
     const at = now.toISOString();
     const name = String(cc.hook_event_name ?? '');
     switch (name) {
         case 'SessionStart':
             return { kind: 'start', label: 'Session', detail: redact(String(cc.cwd ?? '')), at };
         case 'UserPromptSubmit':
-            return { kind: 'prompt', label: 'Prompt', detail: redact(String(cc.prompt ?? '')).slice(0, 400), at };
-        case 'Stop':
-            return { kind: 'stop', label: 'Stop', detail: '', at };
+            return { kind: 'prompt', label: (ctx.human || 'Human').slice(0, 40), detail: redact(String(cc.prompt ?? '')).slice(0, 400), at };
+        case 'Stop': {
+            // Codex hands us the reply directly; Claude Code we read from the transcript.
+            const text = String(cc.last_assistant_message ?? '') || (cc.transcript_path ? extractLastAssistantText(String(cc.transcript_path)) : '');
+            return { kind: 'response', label: (ctx.agent || 'Agent').slice(0, 40), detail: redact(text).slice(0, 2000), at };
+        }
         case 'PreToolUse':
         case 'PostToolUse': {
             const tool = String(cc.tool_name ?? 'tool');
             const input = (cc.tool_input ?? {});
-            const raw = String(input.command ?? input.file_path ?? input.path ?? JSON.stringify(input));
-            return { kind: 'tool', label: tool, detail: redact(raw).slice(0, 400), at };
+            let raw;
+            if (tool === 'TodoWrite' && Array.isArray(input.todos)) {
+                raw = formatTodos(input.todos);
+            }
+            else if (tool === 'AskUserQuestion' && Array.isArray(input.questions)) {
+                raw = formatQuestions(input.questions);
+            }
+            else {
+                raw = String(input.command ?? input.file_path ?? input.path ?? JSON.stringify(input));
+            }
+            return { kind: 'tool', label: tool, detail: redact(raw).slice(0, 800), at };
         }
         default:
             return { kind: 'tool', label: name || 'event', detail: '', at };
     }
 }
-export function appendEvent(runId, cc) {
+export function appendEvent(runId, cc, ctx = {}) {
     const dir = runsDir();
     mkdirSync(dir, { recursive: true });
-    appendFileSync(join(dir, `${runId}.ndjson`), JSON.stringify(mapEvent(cc)) + '\n');
+    appendFileSync(join(dir, `${runId}.ndjson`), JSON.stringify(mapEvent(cc, new Date(), ctx)) + '\n');
 }
 export function loadRun(runId) {
     const file = join(runsDir(), `${runId}.ndjson`);

package/dist/render.js

@@ -1,86 +1,419 @@
+// NOTE: this local viewer is deliberately kept in visual + behavioural parity
+// with the public share page (sickr-ui/functions/r/[id].ts). Same atmosphere,
+// sticky rails, find (prev/next), jump controls and bottom bar — only the rail
+// copy differs (local context vs. public "capture your own"). If you change one,
+// change the other.
 const PLASMA = '#34e0ff';
 function esc(s) {
     return s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
 }
 // Inline Sickr wordmark (mirrors src/components/SickrLogo.tsx) — static ids.
-function wordmark() {
+function wordmark(idPrefix) {
     return `<svg viewBox="0 0 1105 395" role="img" aria-label="Sickr" class="logo" shape-rendering="geometricPrecision">
   <defs>
-    <linearGradient id="lg-silver" x1="0" y1="0" x2="1" y2="1">
+    <linearGradient id="${idPrefix}-silver" x1="0" y1="0" x2="1" y2="1">
       <stop offset="0%" stop-color="#ffffff"/><stop offset="36%" stop-color="#f6f8fb"/>
       <stop offset="58%" stop-color="#c7cedb"/><stop offset="78%" stop-color="#ffffff"/><stop offset="100%" stop-color="#dde3ee"/>
     </linearGradient>
-    <filter id="lg-fx" x="-10%" y="-12%" width="120%" height="124%">
+    <filter id="${idPrefix}-fx" x="-10%" y="-12%" width="120%" height="124%">
       <feGaussianBlur stdDeviation="5" result="b"/>
       <feColorMatrix in="b" type="matrix" values="0 0 0 0 0.20  0 0 0 0 0.88  0 0 0 0 1  0 0 0 0.5 0" result="g"/>
       <feMerge><feMergeNode in="g"/><feMergeNode in="SourceGraphic"/></feMerge>
     </filter>
-    <mask id="lg-s" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="101,258 270,145 202,204 161,213" fill="black"/></mask>
-    <mask id="lg-i" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="361,260 396,229 396,252 361,283" fill="black"/></mask>
-    <mask id="lg-c" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="458,272 493,244 504,262 469,290" fill="black"/></mask>
-    <mask id="lg-r" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="888,266 920,238 920,261 888,289" fill="black"/></mask>
+    <mask id="${idPrefix}-s" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="101,258 270,145 202,204 161,213" fill="black"/></mask>
+    <mask id="${idPrefix}-i" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="361,260 396,229 396,252 361,283" fill="black"/></mask>
+    <mask id="${idPrefix}-c" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="458,272 493,244 504,262 469,290" fill="black"/></mask>
+    <mask id="${idPrefix}-r" maskUnits="userSpaceOnUse"><rect width="1105" height="395" fill="white"/><polygon points="888,266 920,238 920,261 888,289" fill="black"/></mask>
   </defs>
-  <g fill="url(#lg-silver)" filter="url(#lg-fx)">
-    <path mask="url(#lg-s)" d="M 70 324 L 110 296 L 221 296 C 243 296 258 282 258 260 C 258 238 247 223 224 207 L 244 188 C 272 204 286 227 286 258 C 286 297 260 324 228 324 Z M 136 213 C 109 199 96 179 96 153 C 96 109 122 77 156 77 L 296 77 L 262 106 L 158 106 C 138 106 124 125 124 153 C 124 171 134 184 157 195 Z"/>
+  <g fill="url(#${idPrefix}-silver)" filter="url(#${idPrefix}-fx)">
+    <path mask="url(#${idPrefix}-s)" d="M 70 324 L 110 296 L 221 296 C 243 296 258 282 258 260 C 258 238 247 223 224 207 L 244 188 C 272 204 286 227 286 258 C 286 297 260 324 228 324 Z M 136 213 C 109 199 96 179 96 153 C 96 109 122 77 156 77 L 296 77 L 262 106 L 158 106 C 138 106 124 125 124 153 C 124 171 134 184 157 195 Z"/>
     <polygon points="268,146 200,203 109,256 162,211"/>
     <circle cx="378" cy="116" r="19"/>
-    <path mask="url(#lg-i)" d="M 366 182 L 395 155 L 395 299 L 366 324 Z"/>
-    <path mask="url(#lg-c)" d="M 623 153 L 587 182 L 530 182 C 504 182 486 204 486 234 C 486 264 504 285 529 285 L 625 285 L 591 314 L 520 314 C 482 314 457 282 457 237 C 457 191 482 153 518 153 Z"/>
+    <path mask="url(#${idPrefix}-i)" d="M 366 182 L 395 155 L 395 299 L 366 324 Z"/>
+    <path mask="url(#${idPrefix}-c)" d="M 623 153 L 587 182 L 530 182 C 504 182 486 204 486 234 C 486 264 504 285 529 285 L 625 285 L 591 314 L 520 314 C 482 314 457 282 457 237 C 457 191 482 153 518 153 Z"/>
     <path d="M 684 98 L 714 70 L 714 200 L 684 227 Z M 684 254 L 796 151 L 837 151 L 714 265 L 714 294 L 684 320 Z M 764 238 L 841 313 L 802 313 L 744 256 Z"/>
-    <path mask="url(#lg-r)" d="M 889 321 L 889 193 C 889 168 906 153 927 153 L 1034 153 L 998 182 L 934 182 C 924 182 918 189 918 199 L 918 295 Z"/>
+    <path mask="url(#${idPrefix}-r)" d="M 889 321 L 889 193 C 889 168 906 153 927 153 L 1034 153 L 998 182 L 934 182 C 924 182 918 189 918 199 L 918 295 Z"/>
   </g>
 </svg>`;
 }
+const STYLES = `
+  :root{--plasma:${PLASMA};--ink:#06080d}
+  *{box-sizing:border-box}
+  html{scroll-behavior:smooth}
+  body{margin:0;background:var(--ink);color:#e7ecf3;font-family:Sora,system-ui,Arial,sans-serif;min-height:100vh;position:relative;overflow-x:hidden}
+  .bg{position:fixed;inset:0;z-index:0;pointer-events:none}
+  .bg-grid{position:absolute;inset:0;opacity:.55;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse at 50% 0%,#000 40%,transparent 85%)}
+  .glow{position:absolute;border-radius:50%;filter:blur(120px)}
+  .glow-a{top:-200px;left:50%;transform:translateX(-50%);width:840px;height:520px;background:radial-gradient(closest-side,rgba(52,224,255,.16),transparent 70%)}
+  .glow-b{bottom:-220px;right:-140px;width:560px;height:440px;background:radial-gradient(closest-side,rgba(99,102,241,.13),transparent 70%)}
+  .wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:26px 24px 72px}
+  a{color:var(--plasma);text-decoration:none}
+  .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0 30px}
+  .logo{height:32px;width:auto;display:block}
+  .bar-cta{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--plasma)}
+  .label{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#5f6b80}
+  .layout{display:grid;gap:30px;grid-template-columns:1fr;align-items:start}
+  @media(min-width:980px){.layout{grid-template-columns:236px minmax(0,1fr) 290px}.layout aside{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow:auto}}
+  .panel{border:1px solid #16202f;border-radius:12px;background:rgba(8,12,20,.55);padding:18px}
+  .rail h3{font-family:"Chakra Petch","Sora",sans-serif;font-weight:700;font-size:15px;color:#fff;margin:0 0 8px}
+  .rail p{font-size:13px;line-height:1.6;color:#9aa6b6;margin:0 0 10px}
+  .meta-row{display:flex;justify-content:space-between;gap:10px;font-family:"JetBrains Mono",monospace;font-size:11px;color:#6b7689;padding:6px 0;border-top:1px solid #111a27}
+  .meta-row b{color:#cdd5e1;font-weight:500;word-break:break-all;text-align:right}
+  h1.title{font-family:"Chakra Petch","Sora",sans-serif;font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.01em;color:#fff;margin:0 0 4px}
+  .title .hl{color:var(--plasma);text-shadow:0 0 22px rgba(52,224,255,.45)}
+  .sub{font-family:"JetBrains Mono",monospace;font-size:12px;color:#5f6b80;margin:0 0 22px}
+  ol.tl{list-style:none;margin:0;padding:0;position:relative}
+  ol.tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--plasma),transparent)}
+  ol.tl li{position:relative;padding:0 0 20px 30px}
+  .dot{position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%;box-shadow:0 0 10px rgba(52,224,255,.5)}
+  .lbl{font-family:"Chakra Petch","Sora",sans-serif;font-weight:600;color:#fff}
+  .kind{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--plasma);margin-left:6px}
+  .detail{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:#cdd5e1;margin-top:5px;white-space:pre-wrap;word-break:break-word}
+  .time{font-family:"JetBrains Mono",monospace;font-size:11px;color:#5f6b80;margin-top:4px}
+  .cmd{display:flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:13px;background:#04060b;border:1px solid #1b2435;border-radius:8px;padding:11px 12px;color:#e7ecf3;margin:4px 0 0}
+  .cmd .dollar{color:rgba(52,224,255,.6)}
+  .btn{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--plasma);color:#06080d;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:11px 16px;border-radius:6px;text-decoration:none;box-shadow:0 0 24px rgba(52,224,255,.3)}
+  .foot{margin-top:40px;border-top:1px solid #16202f;padding-top:18px;font-family:"JetBrains Mono",monospace;font-size:11px;color:#5f6b80}
+  .search{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:10px 0 14px;margin-bottom:6px;background:linear-gradient(var(--ink) 70%,transparent)}
+  .search input{flex:1;min-width:0;background:#04060b;border:1px solid #1b2435;border-radius:8px;padding:10px 12px;color:#e7ecf3;font-family:"JetBrains Mono",monospace;font-size:13px;outline:none}
+  .search input:focus{border-color:rgba(52,224,255,.5);box-shadow:0 0 0 3px rgba(52,224,255,.12)}
+  .search .count{font-family:"JetBrains Mono",monospace;font-size:11px;color:#5f6b80;white-space:nowrap;min-width:78px;text-align:right}
+  .search .nav{display:flex;gap:4px}
+  .search .nav button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#04060b;border:1px solid #1b2435;border-radius:7px;color:#9aa6b6;font-size:14px;cursor:pointer;line-height:1}
+  .search .nav button:hover:not(:disabled){border-color:rgba(52,224,255,.5);color:var(--plasma)}
+  .search .nav button:disabled{opacity:.4;cursor:default}
+  mark.hit{background:rgba(52,224,255,.18);color:#e7ecf3;border-radius:2px;padding:0 1px}
+  mark.hit.cur{background:var(--plasma);color:#06080d;box-shadow:0 0 0 2px rgba(52,224,255,.35)}
+  .jumps{display:flex;gap:14px;margin-top:12px}
+  .jumps a{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;color:#9aa6b6}
+  .jump{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:6}
+  .jump a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid #1b2435;border-radius:10px;background:rgba(8,12,20,.85);color:var(--plasma);text-decoration:none;font-size:16px;backdrop-filter:blur(6px)}
+  .jump a:hover{border-color:rgba(52,224,255,.5)}
+  .bottombar{margin-top:48px;border-top:1px solid #16202f;padding-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
+  .bottombar .logo{height:26px;width:auto}
+  .bottombar .pitch{font-size:13px;color:#9aa6b6;max-width:520px}
+  .session{font-family:"JetBrains Mono",monospace;font-size:11px;color:#5f6b80;margin-bottom:18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+  .turn{padding-bottom:10px;margin-bottom:18px;border-bottom:1px solid #0f1722}
+  .turn:last-child{border-bottom:none}
+  .msg{margin:10px 0}
+  .who{display:flex;align-items:center;gap:8px;margin-bottom:6px}
+  .ts{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#4a5568}
+  .who .ts{margin-left:auto}
+  .copy{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:6px;color:#5f6b80;cursor:pointer;padding:0}
+  .copy:hover{color:var(--plasma);border-color:#1b2435}
+  .copy.done{color:var(--plasma);border-color:rgba(52,224,255,.4)}
+  .badge{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;padding:2px 7px;border-radius:5px}
+  .badge.h{background:rgba(255,207,107,.14);color:#ffcf6b;border:1px solid rgba(255,207,107,.3)}
+  .badge.a{background:rgba(52,224,255,.14);color:var(--plasma);border:1px solid rgba(52,224,255,.3)}
+  .msg .bubble{padding:10px 14px;border-radius:0 8px 8px 0;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.6}
+  .msg.human .bubble{border-left:2px solid rgba(255,207,107,.55);background:rgba(255,207,107,.05);color:#f3ead7}
+  .msg.agent .bubble{border-left:2px solid rgba(52,224,255,.55);background:rgba(52,224,255,.05);color:#d7e6ee}
+  .bubble.md{white-space:normal}
+  .bubble.md p{margin:0 0 8px}.bubble.md p:last-child{margin-bottom:0}
+  .bubble.md code{font-family:"JetBrains Mono",monospace;font-size:.92em;background:rgba(255,255,255,.07);padding:1px 5px;border-radius:4px}
+  .bubble.md pre{background:#04060b;border:1px solid #1b2435;border-radius:8px;padding:10px 12px;overflow:auto;margin:8px 0}
+  .bubble.md pre code{background:none;padding:0;font-size:12.5px;line-height:1.5}
+  .bubble.md ul,.bubble.md ol{margin:6px 0;padding-left:20px}.bubble.md li{margin:3px 0}
+  .bubble.md a{color:var(--plasma);text-decoration:underline}
+  .bubble.md blockquote{margin:8px 0;padding:2px 12px;border-left:2px solid #2a3850;color:#9aa6b6}
+  .bubble.md .md-h{font-family:"Chakra Petch","Sora",sans-serif;font-weight:700;color:#fff;font-size:15px;margin:10px 0 6px}
+  .bubble.md strong{color:#fff;font-weight:700}
+  details.work{margin:10px 0;border:1px solid #16202f;border-radius:10px;background:rgba(8,12,20,.4)}
+  details.work>summary{cursor:pointer;list-style:none;padding:10px 14px;display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:12px;color:#9aa6b6}
+  details.work>summary::-webkit-details-marker{display:none}
+  details.work>summary::before{content:"\\25B8";color:var(--plasma);font-size:11px}
+  details.work[open]>summary::before{content:"\\25BE"}
+  details.work .peek{color:#5f6b80;font-size:11px}
+  details.work ol.tl{padding:6px 16px 14px}
+  details.work ol.tl::before{top:14px;bottom:14px}
+`;
+const FIND_SCRIPT = `<script>
+  (function(){
+    var q=document.getElementById('q'),tl=document.getElementById('tl'),count=document.getElementById('count'),
+        prev=document.getElementById('prev'),next=document.getElementById('next');
+    if(!q||!tl)return;
+    var ORIGINAL=tl.innerHTML,total=tl.getElementsByTagName('li').length,hits=[],cur=-1;
+    function render(){
+      var on=hits.length>0, term=q.value.trim();
+      prev.disabled=!on; next.disabled=!on;
+      count.textContent=term?(on?((cur+1)+' / '+hits.length):'0 matches'):(total+' actions');
+    }
+    function setCur(i){
+      if(cur>=0&&hits[cur])hits[cur].className='hit';
+      if(!hits.length){cur=-1;render();return;}
+      cur=(i+hits.length)%hits.length;
+      hits[cur].className='hit cur';
+      var p=hits[cur].parentNode; while(p&&p!==tl){ if(p.tagName==='DETAILS')p.open=true; p=p.parentNode; }
+      hits[cur].scrollIntoView({block:'center',behavior:'smooth'});
+      render();
+    }
+    function find(term){
+      tl.innerHTML=ORIGINAL; hits=[]; cur=-1; term=term.toLowerCase();
+      if(term){
+        var walker=document.createTreeWalker(tl,NodeFilter.SHOW_TEXT,null),nodes=[];
+        while(walker.nextNode())nodes.push(walker.currentNode);
+        nodes.forEach(function(node){
+          var text=node.nodeValue,low=text.toLowerCase();
+          if(low.indexOf(term)<0)return;
+          var frag=document.createDocumentFragment(),last=0,idx;
+          while((idx=low.indexOf(term,last))>=0){
+            if(idx>last)frag.appendChild(document.createTextNode(text.slice(last,idx)));
+            var m=document.createElement('mark'); m.className='hit'; m.textContent=text.slice(idx,idx+term.length);
+            frag.appendChild(m); hits.push(m); last=idx+term.length;
+          }
+          if(last<text.length)frag.appendChild(document.createTextNode(text.slice(last)));
+          node.parentNode.replaceChild(frag,node);
+        });
+      }
+      if(hits.length)setCur(0); else render();
+    }
+    q.addEventListener('input',function(){find(q.value.trim());});
+    q.addEventListener('keydown',function(e){
+      if(e.key==='Enter'){e.preventDefault(); if(hits.length)setCur(cur+(e.shiftKey?-1:1));}
+    });
+    prev.addEventListener('click',function(){setCur(cur-1);});
+    next.addEventListener('click',function(){setCur(cur+1);});
+    document.addEventListener('click',function(e){
+      var btn=e.target.closest&&e.target.closest('.copy'); if(!btn)return;
+      var msg=btn.closest('.msg'),b=msg&&msg.querySelector('.bubble');
+      if(b&&navigator.clipboard)navigator.clipboard.writeText(b.innerText);
+      btn.classList.add('done'); setTimeout(function(){btn.classList.remove('done');},1200);
+    });
+  })();
+  </script>`;
 function dot(kind) {
     return kind === 'tool' ? PLASMA : kind === 'prompt' ? '#8b95a7' : '#5f6b80';
 }
 function row(e) {
     const time = e.at ? esc(e.at.replace('T', ' ').slice(0, 19) + 'Z') : '';
-    return `<li>
-    <span class="dot" style="background:${dot(e.kind)}"></span>
-    <div><span class="lbl">${esc(e.label)}</span> <span class="kind">${esc(e.kind)}</span>
-    ${e.detail ? `<div class="detail">${esc(e.detail)}</div>` : ''}
-    <div class="time">${time}</div></div>
-  </li>`;
+    return `<li><span class="dot" style="background:${dot(e.kind)}"></span><div>
+    <span class="lbl">${esc(e.label)}</span><span class="kind">${esc(e.kind)}</span>
+    ${e.detail ? `<div class="detail">${esc(e.detail)}</div>` : ''}<div class="time">${time}</div></div></li>`;
 }
-/** Self-contained, redacted-in audit-timeline HTML for one local run. */
+function groupTurns(events) {
+    const pre = [];
+    const turns = [];
+    let cur = null;
+    for (const e of events) {
+        if (e.kind === 'prompt') {
+            if (cur)
+                turns.push(cur);
+            cur = { prompt: e, work: [] };
+        }
+        else if (e.kind === 'response') {
+            if (cur)
+                cur.response = e;
+        }
+        else if (e.kind === 'tool') {
+            (cur ? cur.work : pre).push(e);
+        }
+        else if (e.kind === 'start') {
+            pre.push(e);
+        }
+        // legacy 'stop' events are ignored (superseded by 'response')
+    }
+    if (cur)
+        turns.push(cur);
+    return { pre, turns };
+}
+function fmtTime(at) {
+    return at ? esc(at.replace('T', ' ').slice(0, 19) + 'Z') : '';
+}
+const COPY_ICON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>';
+// Inline markdown on an ALREADY-ESCAPED string. Code spans are protected from
+// emphasis. Only http(s) links are emitted. No raw HTML can survive (input is
+// pre-escaped), so this is XSS-safe — it only adds a fixed set of safe tags.
+function inlineMd(s) {
+    return s.split(/(`[^`]+`)/).map((p) => {
+        if (p.length >= 2 && p[0] === '`' && p[p.length - 1] === '`')
+            return `<code>${p.slice(1, -1)}</code>`;
+        return p
+            .replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" rel="noopener noreferrer" target="_blank">$1</a>')
+            .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+            .replace(/__([^_]+)__/g, '<strong>$1</strong>')
+            .replace(/\*([^*\s][^*]*)\*/g, '<em>$1</em>')
+            .replace(/(^|[^a-zA-Z0-9_])_([^_\s][^_]*)_/g, '$1<em>$2</em>');
+    }).join('');
+}
+/** Minimal, XSS-safe markdown → HTML for chat bubbles (prompt/response). */
+export function mdToHtml(raw) {
+    const lines = esc(raw).split('\n');
+    const out = [];
+    let para = [];
+    let code = [];
+    let inCode = false;
+    let list = null;
+    const flushPara = () => { if (para.length) {
+        out.push(`<p>${inlineMd(para.join('<br>'))}</p>`);
+        para = [];
+    } };
+    const flushList = () => { if (list) {
+        out.push(`</${list}>`);
+        list = null;
+    } };
+    for (const line of lines) {
+        const fence = /^```/.test(line.trim());
+        if (inCode) {
+            if (fence) {
+                out.push(`<pre><code>${code.join('\n')}</code></pre>`);
+                code = [];
+                inCode = false;
+            }
+            else
+                code.push(line);
+            continue;
+        }
+        if (fence) {
+            flushPara();
+            flushList();
+            inCode = true;
+            continue;
+        }
+        if (/^\s*$/.test(line)) {
+            flushPara();
+            flushList();
+            continue;
+        }
+        let m;
+        if ((m = line.match(/^#{1,6}\s+(.*)$/))) {
+            flushPara();
+            flushList();
+            out.push(`<div class="md-h">${inlineMd(m[1])}</div>`);
+            continue;
+        }
+        if ((m = line.match(/^\s*[-*]\s+(.*)$/))) {
+            flushPara();
+            if (list !== 'ul') {
+                flushList();
+                out.push('<ul>');
+                list = 'ul';
+            }
+            out.push(`<li>${inlineMd(m[1])}</li>`);
+            continue;
+        }
+        if ((m = line.match(/^\s*\d+\.\s+(.*)$/))) {
+            flushPara();
+            if (list !== 'ol') {
+                flushList();
+                out.push('<ol>');
+                list = 'ol';
+            }
+            out.push(`<li>${inlineMd(m[1])}</li>`);
+            continue;
+        }
+        if ((m = line.match(/^>\s?(.*)$/))) {
+            flushPara();
+            flushList();
+            out.push(`<blockquote>${inlineMd(m[1])}</blockquote>`);
+            continue;
+        }
+        para.push(line);
+    }
+    if (inCode)
+        out.push(`<pre><code>${code.join('\n')}</code></pre>`);
+    flushPara();
+    flushList();
+    return out.join('\n');
+}
+// The speaker name travels on the event label; fall back for legacy generic labels.
+function speaker(label, generic, fallback) {
+    return label && label !== generic ? label : fallback;
+}
+function bubble(kind, who, e) {
+    return `<div class="msg ${kind}">
+    <div class="who"><span class="badge ${kind === 'human' ? 'h' : 'a'}">${esc(who)}</span><span class="ts">${fmtTime(e.at)}</span><button class="copy" type="button" aria-label="Copy text" title="Copy">${COPY_ICON}</button></div>
+    <div class="bubble md">${mdToHtml(e.detail)}</div>
+  </div>`;
+}
+function workBlock(work) {
+    if (!work.length)
+        return '';
+    const peek = work.slice(0, 4).map((e) => esc(e.label)).join(' · ') + (work.length > 4 ? ` +${work.length - 4}` : '');
+    return `<details class="work">
+    <summary><span class="badge a">Agent</span> ${work.length} action${work.length === 1 ? '' : 's'} <span class="peek">${peek}</span></summary>
+    <ol class="tl">${work.map(row).join('\n')}</ol>
+  </details>`;
+}
+// Group a run into [Human prompt][Agent work, collapsed][Agent response] turns.
+// Falls back to a flat list for prompt-less (legacy) runs.
+function renderTimeline(events) {
+    const { pre, turns } = groupTurns(events);
+    if (turns.length === 0) {
+        return `<ol class="tl">${events.filter((e) => e.kind !== 'start').map(row).join('\n')}</ol>`;
+    }
+    const startEv = pre.find((e) => e.kind === 'start');
+    const preamble = startEv
+        ? `<div class="session"><span class="badge a">Session</span><span class="ts">${esc(startEv.detail || '')} · ${fmtTime(startEv.at)}</span></div>`
+        : '';
+    const preTools = workBlock(pre.filter((e) => e.kind === 'tool'));
+    const body = turns.map((t) => `<section class="turn">
+    ${t.prompt ? bubble('human', speaker(t.prompt.label, 'Prompt', 'Human'), t.prompt) : ''}
+    ${workBlock(t.work)}
+    ${t.response && t.response.detail ? bubble('agent', speaker(t.response.label, 'Response', 'Agent'), t.response) : ''}
+  </section>`).join('\n');
+    return preamble + preTools + body;
+}
+function toolCount(events) {
+    return events.filter((e) => e.kind === 'tool').length;
+}
+/**
+ * Self-contained, redacted-in audit-timeline HTML for one local run — in full
+ * visual + behavioural parity with the public sickr.ai/r/<id> page.
+ */
 export function renderRunHtml(run) {
-    const events = run.events.map(row).join('\n');
-    return `<!doctype html>
-<html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
+    return `<!doctype html><html lang="en"><head><meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
 <title>SICKR Replay — ${esc(run.id)}</title>
 <link rel="preconnect" href="https://fonts.googleapis.com"/>
 <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=Sora:wght@300;400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
-<style>
-  body{margin:0;background:#06080d;color:#e7ecf3;font-family:Sora,system-ui,Arial,sans-serif;padding:40px 20px}
-  .wrap{max-width:820px;margin:0 auto}
-  .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
-  .logo{height:30px;width:auto;display:block}
-  .bar a{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:${PLASMA};text-decoration:none}
-  .meta{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:#5f6b80;margin:0 0 28px}
-  ol{list-style:none;margin:0;padding:0;position:relative}
-  ol::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:linear-gradient(${PLASMA},transparent)}
-  li{position:relative;padding:0 0 18px 28px}
-  .dot{position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%}
-  .lbl{font-family:"Chakra Petch",sans-serif;font-weight:600;color:#fff}
-  .kind{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:${PLASMA};margin-left:6px}
-  .detail{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:#cdd5e1;margin-top:4px;white-space:pre-wrap;word-break:break-word}
-  .time{font-family:"JetBrains Mono",monospace;font-size:11px;color:#5f6b80;margin-top:3px}
-  .cta{margin-top:36px;border:1px solid #1b2435;border-radius:12px;background:rgba(8,12,20,.55);padding:22px}
-  .cta h2{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:18px;color:#fff;margin:0 0 8px}
-  .cta p{font-size:14px;line-height:1.6;color:#9aa6b6;margin:0 0 16px}
-  .btn{display:inline-flex;align-items:center;gap:8px;background:${PLASMA};color:#06080d;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:11px 16px;border-radius:6px;text-decoration:none;box-shadow:0 0 24px rgba(52,224,255,.3)}
-  .share-hint{margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:11px;color:#5f6b80}
-</style></head>
-<body><div class="wrap">
-  <div class="bar">${wordmark()}<a href="https://sickr.ai">sickr.ai →</a></div>
-  <div class="meta">local replay · ${esc(run.id)} · ${esc(run.cwd || '')} · ${run.events.length} events</div>
-  <ol>${events}</ol>
-  <div class="cta">
-    <h2>This is one agent, on your machine.</h2>
-    <p>SICKR governs your whole team — gates, approvals, multi-agent hand-offs and a full, signed-off audit trail across humans and agents. Free tier · bring your own Claude or Codex.</p>
+<style>${STYLES}</style></head>
+<body>
+<div class="bg"><div class="bg-grid"></div><div class="glow glow-a"></div><div class="glow glow-b"></div></div>
+<div class="wrap">
+  <span id="tl-top"></span>
+  <header class="bar">
+    <a href="https://sickr.ai">${wordmark('lg')}</a>
+    <a class="bar-cta" href="https://sickr.ai">sickr.ai →</a>
+  </header>
+  <div class="layout">
+    <aside class="rail">
+      <p class="label">Local replay</p>
+      <h3 style="margin-top:10px">What is this?</h3>
+      <p>A timeline of every action your AI coding agent took in this session — captured on your machine, secrets redacted.</p>
+      <div style="margin-top:14px">
+        <div class="meta-row"><span>id</span><b>${esc(run.id)}</b></div>
+        <div class="meta-row"><span>workspace</span><b>${esc(run.cwd || '—')}</b></div>
+        <div class="meta-row"><span>actions</span><b>${run.events.length}</b></div>
+      </div>
+      <div class="jumps"><a href="#tl-top">↑ top</a><a href="#tl-bottom">↓ end</a></div>
+    </aside>
+    <main>
+      <h1 class="title">What this agent <span class="hl">actually did</span>.</h1>
+      <p class="sub">captured locally with npx @sickr/replay · secrets redacted</p>
+      <div class="search">
+        <input id="q" type="search" autocomplete="off" placeholder="Search this run — tool, command, file, prompt…" aria-label="Search this run"/>
+        <div class="nav"><button id="prev" type="button" aria-label="Previous match" title="Previous (Shift+Enter)" disabled>‹</button><button id="next" type="button" aria-label="Next match" title="Next (Enter)" disabled>›</button></div>
+        <span class="count" id="count">${toolCount(run.events)} actions</span>
+      </div>
+      <div id="tl">${renderTimeline(run.events)}</div>
+    </main>
+    <aside class="rail panel">
+      <p class="label" style="margin-bottom:12px">Beyond this run</p>
+      <h3>Govern your whole team</h3>
+      <p>This is one agent on your machine. SICKR adds gates, approvals, multi-agent hand-offs and a full, signed-off audit trail across humans and agents.</p>
+      <a class="btn" href="https://sickr.ai">Explore SICKR →</a>
+      <p style="margin-top:16px;font-size:12px">Share this run as a public link:</p>
+      <div class="cmd"><span class="dollar">$</span><code>npx @sickr/replay share</code></div>
+    </aside>
+  </div>
+  <span id="tl-bottom"></span>
+  <div class="bottombar">
+    <a href="https://sickr.ai">${wordmark('lg2')}</a>
+    <p class="pitch">One agent, audited. <span style="color:#fff">Govern your whole team</span> — gates, approvals, multi-agent hand-offs and a full audit trail.</p>
     <a class="btn" href="https://sickr.ai">Explore SICKR →</a>
-    <div class="share-hint">Tip: <code>npx @sickr/replay share</code> publishes this run to a public link.</div>
   </div>
+  <div class="foot">Captured locally with npx @sickr/replay · <a href="#tl-top">back to top ↑</a> · sickr.ai</div>
+  <nav class="jump" aria-label="scroll"><a href="#tl-top" aria-label="Scroll to top" title="Top">↑</a><a href="#tl-bottom" aria-label="Scroll to bottom" title="Bottom">↓</a></nav>
+  ${FIND_SCRIPT}
 </div></body></html>`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sickr/replay",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "npx @sickr/replay — local Claude Code audit + one-click share. The free wedge into SICKR.",
   "bin": { "replay": "dist/cli.js" },