@sickr/replay 0.4.6 → 0.5.0

package/dist/cli.js

@@ -6,7 +6,7 @@ import { join, dirname } from 'node:path';
 import { spawn, execFileSync } from 'node:child_process';
 import { appendEvent, loadRun, runsDir, latestRunId } from './recorder.js';
 import { mergeHooks, removeHooks } from './hookConfig.js';
-import { renderRunHtml } from './render.js';
+import { renderRunHtml, renderCombinedHtml } from './render.js';
 import { buildSharePayload, publish, PublishError } from './share.js';
 const REPLAY_ENDPOINT = process.env.SICKR_REPLAY_ENDPOINT ?? 'https://sickr.ai/api/replay';
 const COMMANDS = ['init', 'record', 'open', 'list', 'share', 'stop', 'clear', 'help'];
@@ -32,10 +32,11 @@ Commands:
                                 Claude Code (.claude/settings.json)
                    --no-name    label your prompts "Human" instead of your
                                 login/git name (default is your login name)
-  open [run]     Render a run to a local HTML timeline and open it in your
-                 browser. 100% local — nothing is uploaded. Defaults to the
-                 newest run; pass a run id, or --codex / --claude to open the
-                 newest run for that agent.
+  open [run]     Render a run to a local HTML timeline and open it. 100% local.
+                 Defaults to the newest run; pass a run id, or --codex/--claude
+                 for the newest run of that agent. Combine across agents with a
+                 window: --today, --since <2h|30m|1d>, or --all (interleaved,
+                 filterable by agent, sortable by prompt/response time).
   share [run]    Redact and publish ONE run to a public sickr.ai/r/<id> link
                  (shows a preview and asks first). Links expire after 24h.
                    --open   also open the published link in your browser
@@ -238,6 +239,69 @@ function handleOpen(runId, provider) {
         `→ ${out}  (newest run; use \`list\` to see others, \`open <id>\` to pick one)\n`);
     openInBrowser(out);
 }
+function parseDur(s) {
+    const m = /^(\d+)(m|h|d)$/.exec(String(s ?? ''));
+    if (!m)
+        return null;
+    return Number(m[1]) * (m[2] === 'm' ? 60_000 : m[2] === 'h' ? 3_600_000 : 86_400_000);
+}
+/** Select runs by window flag (--today/--since <dur>/--all) + optional agent. Null if no window flag. */
+export function selectWindow(rest) {
+    let pred = null;
+    let label = '';
+    const now = Date.now();
+    if (rest.includes('--all')) {
+        pred = () => true;
+        label = 'all runs';
+    }
+    else if (rest.includes('--today')) {
+        const d = new Date();
+        d.setHours(0, 0, 0, 0);
+        const t = d.getTime();
+        pred = (m) => m >= t;
+        label = 'today';
+    }
+    else {
+        const i = rest.indexOf('--since');
+        if (i >= 0) {
+            const ms = parseDur(rest[i + 1]);
+            if (ms == null) {
+                process.stderr.write('sickr: --since takes a duration like 2h, 30m, or 1d.\n');
+                process.exit(1);
+                return null;
+            }
+            pred = (m) => m >= now - ms;
+            label = `last ${rest[i + 1]}`;
+        }
+    }
+    if (!pred)
+        return null;
+    const dir = runsDir();
+    const wantAgent = rest.includes('--codex') ? 'Codex' : rest.includes('--claude') ? 'Claude' : null;
+    let ids = existsSync(dir)
+        ? readdirSync(dir).filter((f) => f.endsWith('.ndjson')).filter((f) => pred(statSync(join(dir, f)).mtimeMs)).map((f) => f.replace(/\.ndjson$/, ''))
+        : [];
+    if (wantAgent) {
+        ids = ids.filter((id) => runSummary(id).agent === wantAgent);
+        label += ` · ${wantAgent}`;
+    }
+    return { ids, label };
+}
+function handleOpenCombined(sel) {
+    const runs = sel.ids
+        .map((id) => ({ id, events: loadRun(id).events }))
+        .filter((r) => r.events.length)
+        .map((r) => ({ agent: runSummary(r.id).agent, events: r.events }));
+    if (runs.length === 0) {
+        process.stdout.write(`sickr: no runs in ${sel.label}.\n`);
+        return;
+    }
+    const out = join(homedir(), '.sickr', 'last.html');
+    mkdirSync(join(homedir(), '.sickr'), { recursive: true });
+    writeFileSync(out, renderCombinedHtml(runs, sel.label));
+    process.stdout.write(`sickr: opened combined replay (${sel.label}) · ${runs.length} runs → ${out}\n`);
+    openInBrowser(out);
+}
 function handleList(provider) {
     const dir = runsDir();
     let files = existsSync(dir) ? readdirSync(dir).filter((f) => f.endsWith('.ndjson')) : [];
@@ -344,6 +408,11 @@ async function main() {
             handleInit(provider, rest.includes('--no-name'));
             return;
         case 'open': {
+            const sel = selectWindow(rest);
+            if (sel) {
+                handleOpenCombined(sel);
+                return;
+            }
             const openProvider = rest.includes('--codex') ? 'codex' : rest.includes('--claude') ? 'claude' : undefined;
             handleOpen(rest.find((a) => !a.startsWith('-')), openProvider);
             return;

package/dist/render.js

@@ -126,6 +126,16 @@ const STYLES = `
   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}
+  .controls{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0 14px;margin-bottom:4px;background:linear-gradient(var(--ink) 72%,transparent)}
+  .chip{font-family:"JetBrains Mono",monospace;font-size:11px;padding:4px 11px;border-radius:999px;border:1px solid #1b2435;background:#04060b;color:#9aa6b6;cursor:pointer}
+  .chip.on{border-color:rgba(52,224,255,.5);color:var(--plasma)}
+  .sortbtn{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;padding:4px 11px;border-radius:6px;border:1px solid #1b2435;background:#04060b;color:#9aa6b6;cursor:pointer}
+  .sortbtn:hover{border-color:rgba(52,224,255,.5);color:var(--plasma)}
+  .turnhead{margin:0 0 4px}
+  .agentchip{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:2px 8px;border-radius:5px;border:1px solid #2a3850;color:#9aa6b6}
+  .agentchip.claude{color:var(--plasma);border-color:rgba(52,224,255,.4);background:rgba(52,224,255,.08)}
+  .agentchip.codex{color:#9b8cff;border-color:rgba(155,140,255,.4);background:rgba(155,140,255,.08)}
+  .turn.hide{display:none}
 `;
 const FIND_SCRIPT = `<script>
   (function(){
@@ -417,3 +427,102 @@ export function renderRunHtml(run) {
   ${FIND_SCRIPT}
 </div></body></html>`;
 }
+// Filter (by agent) + sort (prompt vs response time) + copy. Kept in sync with /r.
+const COMBINED_SCRIPT = `<script>
+  (function(){
+    var tl=document.getElementById('tl'); if(!tl) return;
+    var turns=[].slice.call(tl.getElementsByClassName('turn'));
+    var chips=[].slice.call(document.getElementsByClassName('chip'));
+    chips.forEach(function(c){c.addEventListener('click',function(){
+      chips.forEach(function(x){x.classList.remove('on')}); c.classList.add('on');
+      var f=c.getAttribute('data-f');
+      turns.forEach(function(t){ t.className='turn'+((f==='All'||t.getAttribute('data-agent')===f)?'':' hide'); });
+    });});
+    var sb=document.getElementById('sortbtn'), byResp=false;
+    if(sb) sb.addEventListener('click',function(){
+      byResp=!byResp; sb.textContent=byResp?'sort: response time':'sort: prompt time';
+      var key=byResp?'data-rt':'data-pt';
+      turns.slice().sort(function(a,b){var x=a.getAttribute(key)||'',y=b.getAttribute(key)||'';return x<y?-1:x>y?1:0;}).forEach(function(t){tl.appendChild(t)});
+    });
+    document.addEventListener('click',function(e){
+      var b=e.target.closest&&e.target.closest('.copy'); if(!b)return;
+      var m=b.closest('.msg'),bb=m&&m.querySelector('.bubble');
+      if(bb&&navigator.clipboard)navigator.clipboard.writeText(bb.innerText);
+      b.classList.add('done'); setTimeout(function(){b.classList.remove('done');},1200);
+    });
+  })();
+  </script>`;
+function combinedSection(agent, t) {
+    const pt = t.prompt?.at || t.work[0]?.at || t.response?.at || '';
+    const rt = t.response?.at || t.work[t.work.length - 1]?.at || pt;
+    const cls = agent === 'Codex' ? 'codex' : agent === 'Claude' ? 'claude' : '';
+    return `<section class="turn" data-agent="${esc(agent)}" data-pt="${esc(pt)}" data-rt="${esc(rt)}">
+    <div class="turnhead"><span class="agentchip ${cls}">${esc(agent)}</span></div>
+    ${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>`;
+}
+/** A combined, interleaved timeline across multiple runs/agents, sorted by prompt time. */
+export function renderCombinedHtml(runs, window) {
+    const items = [];
+    for (const r of runs) {
+        for (const t of groupTurns(r.events).turns) {
+            items.push({ agent: r.agent, t, pt: t.prompt?.at || t.work[0]?.at || t.response?.at || '' });
+        }
+    }
+    items.sort((a, b) => (a.pt < b.pt ? -1 : a.pt > b.pt ? 1 : 0));
+    const agents = Array.from(new Set(runs.map((r) => r.agent)));
+    const chips = ['All', ...agents].map((a) => `<button class="chip${a === 'All' ? ' on' : ''}" type="button" data-f="${esc(a)}">${esc(a)}</button>`).join('');
+    const sections = items.length ? items.map((it) => combinedSection(it.agent, it.t)).join('\n') : '<p class="sub">No turns in this window yet.</p>';
+    return `<!doctype html><html lang="en"><head><meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>SICKR Replay — combined (${esc(window)})</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>${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">Combined replay</p>
+      <h3 style="margin-top:10px">All your agents, one timeline</h3>
+      <p>Every turn from every agent in this window, interleaved by time.</p>
+      <div style="margin-top:14px">
+        <div class="meta-row"><span>window</span><b>${esc(window)}</b></div>
+        <div class="meta-row"><span>runs</span><b>${runs.length}</b></div>
+        <div class="meta-row"><span>turns</span><b>${items.length}</b></div>
+        <div class="meta-row"><span>agents</span><b>${esc(agents.join(', ') || '—')}</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 <span class="hl">all your agents</span> did.</h1>
+      <p class="sub">${items.length} turns · ${runs.length} runs · ${esc(window)} · captured locally</p>
+      <div class="controls">${chips}<button id="sortbtn" type="button" class="sortbtn">sort: prompt time</button></div>
+      <div id="tl" class="turns">${sections}</div>
+    </main>
+    <aside class="rail panel">
+      <p class="label" style="margin-bottom:12px">Beyond your machine</p>
+      <h3>Govern your whole team</h3>
+      <p>This is your agents on one 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>
+    </aside>
+  </div>
+  <span id="tl-bottom"></span>
+  <div class="bottombar">
+    <a href="https://sickr.ai">${wordmark('lg2')}</a>
+    <p class="pitch">All your agents, audited in one place. <span style="color:#fff">Govern the whole team</span> — gates, approvals, full audit trail.</p>
+    <a class="btn" href="https://sickr.ai">Explore SICKR →</a>
+  </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>
+  ${COMBINED_SCRIPT}
+</div></body></html>`;
+}

package/package.json

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