agentbox-flight-recorder 0.2.1

package/src/cli.js

@@ -0,0 +1,262 @@
+'use strict';
+/**
+ * agentbox — cli.js
+ * Zero-dependency argv router. Every command works offline, no accounts,
+ * no telemetry. Sessions live in ./.agentbox/sessions/ next to your repo.
+ */
+const fs = require('fs');
+const path = require('path');
+const { VERSION, verifyChain, sessionsDir } = require('./chain');
+const { wrap } = require('./wrap');
+const { replay, renderStatic } = require('./replay');
+const { receipt } = require('./receipt');
+const { clip } = require('./clip');
+const { summarize, fmtDuration, stripAnsi } = require('./parse');
+const { runHook, initClaude } = require('./adapters/claude');
+const { runMcpProxy, initMcp } = require('./adapters/mcp');
+
+const CYAN = '\x1b[36m';
+const BOLD = '\x1b[1m';
+const DIM = '\x1b[2m';
+const GREEN = '\x1b[32m';
+const RED = '\x1b[31m';
+const RESET = '\x1b[0m';
+const safeTerminal = (s) => stripAnsi(String(s == null ? '' : s)).replace(/[\x00-\x1f\x7f-\x9f]/g, '');
+
+const HELP = `
+${CYAN}${BOLD}⬢ agentbox v${VERSION}${RESET} — the black-box flight recorder for AI agents
+
+${BOLD}usage${RESET}: agentbox <command> [options]
+
+  ${BOLD}wrap${RESET} [--name n] -- <cmd…>    record a command/agent session (black box on)
+  ${BOLD}init${RESET} claude [--local]        passive mode: claude code hooks (one command)
+  ${BOLD}init${RESET} mcp -- <server cmd>     print MCP wire-tap config for your client
+  ${BOLD}mcp${RESET} [--name n] -- <server…>  run an MCP server behind the recording proxy
+  ${BOLD}hook${RESET}                         (internal) record one claude code hook event from stdin
+  ${BOLD}demo${RESET}                        record a scripted demo agent, then explore it
+  ${BOLD}list${RESET}                        list recorded sessions
+  ${BOLD}replay${RESET} [file]               scrub through a session like security footage
+  ${BOLD}receipt${RESET} [file] [--md|--json] one-page summary of what happened
+  ${BOLD}clip${RESET} [file] [--from s --to s]  export a shareable, self-contained HTML clip
+  ${BOLD}verify${RESET} [file]               check the local sha256 hash chain
+  ${BOLD}help${RESET}                        show this help
+
+${DIM}sessions live in ./.agentbox/sessions/ · zero deps · 100% local · no telemetry
+your agent has root. who's watching?${RESET}
+`;
+
+function parseFlags(args) {
+  const flags = { _: [] };
+  const valueFlags = new Set(['name', 'from', 'to', 'out', 'tail']);
+  for (let i = 0; i < args.length; i++) {
+    const a = args[i];
+    if (a === '--') { flags._.push(...args.slice(i + 1)); break; }
+    if (a.startsWith('--')) {
+      const key = a.slice(2);
+      const next = args[i + 1];
+      if (valueFlags.has(key) && next != null && !next.startsWith('--')) { flags[key] = next; i++; }
+      else flags[key] = true;
+    } else if (a === '-md') { flags.md = true; }
+    else if (a === '-json') { flags.json = true; }
+    else flags._.push(a);
+  }
+  return flags;
+}
+
+/** newest-first list of session files */
+function findSessions() {
+  const dir = sessionsDir();
+  if (!fs.existsSync(dir)) return [];
+  return fs.readdirSync(dir)
+    .filter((f) => f.endsWith('.jsonl'))
+    .map((f) => path.join(dir, f))
+    .sort()
+    .reverse();
+}
+
+function resolveSession(fileArg) {
+  if (fileArg) {
+    if (fs.existsSync(fileArg)) return fileArg;
+    const inSessions = path.join(sessionsDir(), path.basename(fileArg));
+    if (fs.existsSync(inSessions)) return inSessions;
+    return null;
+  }
+  const sessions = findSessions();
+  if (!sessions.length) return null;
+  return sessions[0]; // most recent
+}
+
+function cmdList() {
+  const files = findSessions();
+  if (!files.length) {
+    process.stdout.write(`${DIM}no sessions yet — try: ${RESET}agentbox demo\n`);
+    return;
+  }
+  process.stdout.write(`${BOLD}⬢ recorded sessions${RESET} ${DIM}(.agentbox/sessions/)${RESET}\n\n`);
+  for (const f of files) {
+    let meta = null;
+    let dur = '?';
+    let code = '?';
+    let n = 0;
+    let chainOk = false;
+    let chainReason = '';
+    try {
+      const res = verifyChain(f);
+      chainOk = res.ok && res.complete;
+      chainReason = res.reason || (res.complete ? '' : 'incomplete session');
+      const stats = summarize(res.events);
+      meta = safeTerminal(stats.name);
+      dur = fmtDuration(stats.durationMs);
+      code = String(stats.exitCode);
+      n = res.events.length;
+    } catch { /* skip details */ }
+    const chain = chainOk ? `${GREEN}✓${RESET}` : `${RED}BROKEN${RESET}${chainReason ? ` ${DIM}(${chainReason})${RESET}` : ''}`;
+    process.stdout.write(`  ${DIM}${safeTerminal(path.basename(f))}${RESET}\n    ${CYAN}${BOLD}${meta || '?'}${RESET}  ·  ${n} events · ${dur} · exit ${code === '0' ? GREEN + '0 ✓' : RED + code + RESET} · chain ${chain}\n`);
+  }
+  process.stdout.write(`\n${DIM}replay one: agentbox replay <file>${RESET}\n`);
+}
+
+function cmdVerify(fileArg) {
+  const file = resolveSession(fileArg);
+  if (!file) { process.stderr.write('no session file found\n'); process.exitCode = 1; return; }
+  const res = verifyChain(file);
+  if (res.ok && res.complete) {
+    process.stdout.write(`${GREEN}✓ local chain intact${RESET} — ${res.count} events, sha256 from genesis to tip\n  ${DIM}${safeTerminal(file)}${RESET}\n`);
+  } else {
+    process.stdout.write(`${RED}✗ ${res.reason || 'session is incomplete (missing exit event)'}${RESET}\n  ${DIM}${file}${RESET}\n`);
+    process.exitCode = 1;
+  }
+}
+
+function cmdDemo() {
+  const demoScript = path.join(__dirname, '..', 'examples', 'fake-agent.js');
+  // prefer a repo-relative path in receipts when run from inside the repo
+  const rel = path.relative(process.cwd(), demoScript);
+  const demoArg = rel && !rel.startsWith('..') ? rel : demoScript;
+  process.stdout.write(`${CYAN}${BOLD}⬢ agentbox demo${RESET} — strapping a black box to a scripted agent\n\n`);
+  wrap(['node', demoArg], { name: 'demo-deploy' })
+    .then(({ file, exitCode }) => {
+      process.stdout.write('\n');
+      receipt(file, { format: 'text' });
+      process.stdout.write(`  ${DIM}now try:${RESET}   agentbox replay ${path.basename(file)}\n`);
+      process.stdout.write(`  ${DIM}share a clip:${RESET} agentbox clip ${path.basename(file)}\n`);
+      // explicit exit — wrap used to leave stdin resumed, which kept the
+      // process alive after the agent finished (preflight / CI hang).
+      process.exit(exitCode !== 0 ? (exitCode > 0 ? exitCode : 1) : 0);
+    })
+    .catch((e) => {
+      process.stderr.write(`demo failed: ${e.message}\n`);
+      process.exit(1);
+    });
+}
+
+function main() {
+  const argv = process.argv.slice(2);
+  const cmd = argv[0] && !argv[0].startsWith('-') ? argv[0] : 'help';
+  const flags = parseFlags(argv.slice(1));
+  const fileArg = flags._.find((a) => a.endsWith('.jsonl')) || flags._[0];
+
+  switch (cmd) {
+    case 'wrap': {
+      const cmdArgs = flags._.length && fs.existsSync(flags._[0]) === false && flags['--'] === undefined
+        ? flags._
+        : flags._;
+      // `agentbox wrap --name x -- node agent.js` → after flag parse, remaining positional args ARE the command
+      const target = cmdArgs.length ? cmdArgs : null;
+      if (!target) {
+        process.stderr.write('usage: agentbox wrap [--name n] -- <command> [args…]\n');
+        process.exitCode = 1;
+        return;
+      }
+      wrap(target, { name: flags.name, quiet: flags.quiet })
+        .then(({ exitCode }) => {
+          process.exit(exitCode !== 0 ? (exitCode > 0 ? exitCode : 1) : 0);
+        })
+        .catch((e) => {
+          process.stderr.write(`wrap failed: ${e.message}\n`);
+          process.exit(1);
+        });
+      return;
+    }
+    case 'demo': return cmdDemo();
+    case 'hook':
+      // never fails, never prints — the agent's flight continues regardless
+      runHook().catch(() => process.exit(0));
+      return;
+    case 'mcp': {
+      const raw = argv.slice(1);
+      const dd = raw.indexOf('--');
+      const serverArgs = dd >= 0 ? raw.slice(dd + 1) : flags._;
+      if (!serverArgs.length) {
+        process.stderr.write('usage: agentbox mcp [--name n] -- <server command> [args…]\nexample: agentbox mcp -- npx -y @modelcontextprotocol/server-everything\n');
+        process.exitCode = 1;
+        return;
+      }
+      runMcpProxy(serverArgs, { name: flags.name, quiet: flags.quiet })
+        .then(({ exitCode }) => { if (exitCode) process.exitCode = exitCode; })
+        .catch((e) => { process.stderr.write(`mcp failed: ${e.message}\n`); process.exitCode = 1; });
+      return;
+    }
+    case 'init': {
+      const sub = flags._[0];
+      if (sub === 'claude') {
+        initClaude({ local: !!flags.local, remove: !!flags.remove });
+        return;
+      }
+      if (sub === 'mcp') {
+        const raw = argv.slice(1);
+        const dd = raw.indexOf('--');
+        const serverArgs = dd >= 0 ? raw.slice(dd + 1) : flags._.slice(1);
+        initMcp(serverArgs);
+        return;
+      }
+      process.stderr.write('usage: agentbox init claude [--local] [--remove]\n       agentbox init mcp -- <server command>\n');
+      process.exitCode = 1;
+      return;
+    }
+    case 'list': case 'ls': return cmdList();
+    case 'verify': return cmdVerify(fileArg);
+    case 'receipt': {
+      const file = resolveSession(fileArg);
+      if (!file) { process.stderr.write('no session file found — record one first: agentbox demo\n'); process.exitCode = 1; return; }
+      const format = flags.json ? 'json' : (flags.md || flags.markdown ? 'markdown' : 'text');
+      const r = receipt(file, { format, force: flags.force });
+      if (r.ok && !flags.quiet && format === 'text') {
+        process.stdout.write(`  ${DIM}full tape:${RESET} agentbox replay ${path.basename(file)}\n`);
+      }
+      return;
+    }
+    case 'clip': {
+      const file = resolveSession(fileArg);
+      if (!file) { process.stderr.write('no session file found — record one first: agentbox demo\n'); process.exitCode = 1; return; }
+      const out = clip(file, {
+        from: flags.from != null ? Number(flags.from) : undefined,
+        to: flags.to != null ? Number(flags.to) : undefined,
+        out: flags.out,
+        force: flags.force,
+        overwrite: flags.overwrite,
+      });
+      if (out) process.stdout.write(`${GREEN}✓ clip saved${RESET} ${DIM}${out}${RESET} — open it, or drop it straight into a PR\n`);
+      return;
+    }
+    case 'replay': {
+      const file = resolveSession(fileArg);
+      if (!file) { process.stderr.write('no session file found — record one first: agentbox demo\n'); process.exitCode = 1; return; }
+      replay(file, { headless: flags.headless, force: flags.force, tail: flags.tail ? Number(flags.tail) : undefined });
+      return;
+    }
+    case 'version': case '--version': case '-v':
+      process.stdout.write(`agentbox v${VERSION}\n`);
+      return;
+    case 'help': case '--help': case '-h':
+    default:
+      process.stdout.write(HELP);
+      return;
+  }
+}
+
+module.exports = main;
+module.exports.parseFlags = parseFlags;
+module.exports.cmdList = cmdList;
+
+if (require.main === module) main();

package/src/clip.js

@@ -0,0 +1,196 @@
+'use strict';
+/**
+ * agentbox — clip.js
+ * Export a time range of a session as ONE self-contained HTML file —
+ * a playable "clip" you can drop into a PR, an issue, or a group chat.
+ * No server, no assets, no JS framework. Works offline forever.
+ */
+const fs = require('fs');
+const path = require('path');
+const { verifyChain, assertNotSymlink } = require('./chain');
+
+function esc(s) {
+  return String(s)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function clip(file, opts = {}) {
+  const res = verifyChain(file);
+  if ((!res.ok || !res.complete) && !opts.force) {
+    process.stderr.write(`\x1b[31m⬢ agentbox: chain verification FAILED — ${res.reason || 'session is incomplete'}\x1b[0m\n`);
+    process.exitCode = 1;
+    return null;
+  }
+  const events = res.events;
+  if (!events.length) { process.stderr.write('⬢ agentbox: cannot clip an empty tape\n'); process.exitCode = 1; return null; }
+  const meta = events.find((e) => e.type === 'meta') || { data: {} };
+  const t0 = events[0].t;
+  const tN = events[events.length - 1].t;
+  const from = opts.from != null ? t0 + opts.from * 1000 : t0;
+  const to = opts.to != null ? t0 + opts.to * 1000 : tN;
+  if (!Number.isFinite(from) || !Number.isFinite(to) || from < t0 || to < from) {
+    process.stderr.write('⬢ agentbox: invalid clip range (use finite seconds with --from <= --to)\n');
+    process.exitCode = 1;
+    return null;
+  }
+
+  const slim = [];
+  for (const ev of events) {
+    if (ev.t < from || ev.t > to) continue;
+    const d = ev.data || {};
+    let kind = ev.type;
+    let text = '';
+    if (ev.type === 'out') { kind = d.stream === 'stderr' ? 'stderr' : (d.kind || 'out'); text = d.text != null ? d.text : String(d.detail || ''); }
+    else if (ev.type === 'in') { kind = 'in'; text = d.text || ''; }
+    else if (ev.type === 'exit') { kind = 'exit'; text = `exit code ${d.code}`; }
+    else if (ev.type === 'meta') { kind = 'meta'; text = d.cmd || ''; }
+    else if (ev.type === 'signal') { kind = 'signal'; text = d.signal || ''; }
+    else if (ev.type === 'tool_call') { kind = 'tool'; text = `${d.name || 'tool'}${d.phase === 'end' ? ` → ${d.status || 'ok'}` : `(${JSON.stringify(d.input || {})})`}`; }
+    else if (ev.type === 'prompt') { kind = 'in'; text = d.text || ''; }
+    else if (ev.type === 'notification') { kind = 'notification'; text = d.message || ''; }
+    else if (ev.type === 'note') { kind = 'note'; text = d.message || ''; }
+    else if (ev.type === 'mcp_msg') { kind = 'mcp'; text = `${d.dir || ''} ${d.method || 'message'}`; }
+    kind = String(kind).replace(/[^a-z0-9_-]/gi, '').slice(0, 32) || 'out';
+    slim.push({ rt: ev.t - t0, k: kind, x: String(text).slice(0, 2000) });
+  }
+
+  const outPath = opts.out || file.replace(/\.jsonl$/, '') + '.clip.html';
+  assertNotSymlink(outPath);
+  if (fs.existsSync(outPath) && !opts.overwrite) {
+    process.stderr.write(`⬢ agentbox: refusing to overwrite ${outPath} (pass --overwrite)\n`);
+    process.exitCode = 1;
+    return null;
+  }
+  // Script elements are raw-text nodes: HTML entities such as &quot; are not
+  // decoded there. Keep this as valid JSON and neutralize closing tags.
+  const payload = JSON.stringify(slim)
+    .replace(/</g, '\\u003c')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
+
+  const html = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>⬢ agentbox clip — ${esc(meta.data.name || 'session')}</title>
+<style>
+  :root { color-scheme: dark; }
+  * { box-sizing: border-box; }
+  body { margin:0; background:#0a0e14; color:#c9d1d9; font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
+  .wrap { max-width: 960px; margin: 0 auto; padding: 24px 16px 60px; }
+  h1 { font-size: 16px; color:#5eead4; margin: 0 0 4px; }
+  .sub { color:#56606c; font-size:12px; margin-bottom:16px; }
+  .term { border:1px solid #1c2530; border-radius:10px; background:#0d1117; overflow:hidden; }
+  .bar { display:flex; gap:6px; align-items:center; padding:8px 12px; background:#11161d; border-bottom:1px solid #1c2530; }
+  .dot { width:10px; height:10px; border-radius:50%; }
+  .r{background:#ff5f56}.y{background:#ffbd2e}.g{background:#27c93f}
+  .bar .t { margin-left:8px; color:#56606c; font-size:12px; }
+  #feed { height: 420px; overflow-y:auto; padding:12px 14px; }
+  .ln { white-space:pre-wrap; word-break:break-word; padding:1px 0; }
+  .ts { color:#3b4654; margin-right:10px; }
+  .tag { display:inline-block; width:52px; font-weight:700; margin-right:8px; }
+  .k-tool{color:#fb923c}.k-cmd{color:#4ade80}.k-file{color:#e879f9}.k-net{color:#22d3ee}
+  .k-in{color:#67e8f9}.k-stderr{color:#f87171}.k-signal{color:#f87171;font-weight:700}
+  .k-exit{color:#fff;font-weight:700}.k-meta{color:#56606c}.k-out{color:#c9d1d9}
+  .ctl { display:flex; gap:10px; align-items:center; padding:10px 12px; border-top:1px solid #1c2530; background:#11161d; }
+  button { background:#5eead4; color:#042f2e; border:0; font-weight:700; padding:6px 14px; border-radius:6px; cursor:pointer; font-family:inherit; }
+  button:hover { filter:brightness(1.1); }
+  input[type=range] { flex:1; accent-color:#5eead4; }
+  .time { color:#56606c; min-width:110px; text-align:right; }
+  .foot { color:#3b4654; font-size:11px; margin-top:14px; }
+  .chip { border:1px solid #1c2530; color:#56606c; border-radius:99px; padding:2px 10px; font-size:11px; cursor:pointer; user-select:none; }
+  .chip.on { color:#042f2e; background:#5eead4; border-color:#5eead4; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <h1>⬢ agentbox clip</h1>
+  <div class="sub">session <b>${esc(meta.data.name || 'session')}</b> · command <code>${esc(meta.data.cmd || '?')}</code> · ${slim.length} events · recorded ${new Date(t0).toISOString()}</div>
+  <div class="term">
+    <div class="bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="t">black box tape — local integrity chain ${res.ok && res.complete ? 'complete ✓' : 'INCOMPLETE/BROKEN ✗'}</span></div>
+    <div id="feed"></div>
+    <div class="ctl">
+      <button id="play">▶ play</button>
+      <input id="scrub" type="range" min="0" value="0">
+      <span class="time" id="time">00:00.0</span>
+    </div>
+  </div>
+  <div style="display:flex;gap:8px;margin-top:10px;flex-wrap:wrap" id="filters">
+    <span class="chip on" data-k="all">all</span>
+    <span class="chip" data-k="tool">▲ tool</span>
+    <span class="chip" data-k="cmd">$ shell</span>
+    <span class="chip" data-k="file">✎ file</span>
+    <span class="chip" data-k="in">i human</span>
+    <span class="chip" data-k="stderr">stderr</span>
+  </div>
+  <div class="foot">generated by agentbox — the flight recorder for AI agents · this file is self-contained; share it anywhere</div>
+</div>
+<script type="application/json" id="payload-json">${payload}</script>
+<script>
+const EVENTS = JSON.parse(document.getElementById('payload-json').textContent);
+var t0 = EVENTS.length ? EVENTS[0].rt : 0;
+var tN = EVENTS.length ? EVENTS[EVENTS.length-1].rt : 1000;
+var cursor = 0, drawnCursor = -1, playing = false, filter = 'all', raf = null, startedAt = 0, base = 0;
+var feed = document.getElementById('feed'), scrub = document.getElementById('scrub'), time = document.getElementById('time');
+document.getElementById('payload-json').remove();
+scrub.max = tN - t0;
+function mmss(ms){var s=Math.max(0,ms)/1000;var m=Math.floor(s/60);var r=s-m*60;return String(m).padStart(2,'0')+':'+r.toFixed(1).padStart(4,'0');}
+function fmt(k,txt){var d=document.createElement('div');d.className='ln k-'+k;
+  var ts='<span class="ts">'+mmss(EVENTS[cursor].rt)+'</span>';
+  d.innerHTML=ts+'<span class="tag">'+k.toUpperCase()+'</span>'+escapeHtml(txt||'·');return d;}
+function escapeHtml(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
+function visible(i){var e=EVENTS[i];if(filter==='all')return true;var k=e.k==='in'?'in':e.k;return k===filter;}
+function drawTo(idx){
+  feed.innerHTML='';
+  var selected=[];
+  for(var i=idx;i>=0&&selected.length<400;i--){if(visible(i))selected.push(i);}
+  selected.reverse();
+  for(var n=0;n<selected.length;n++){
+    var i=selected[n];
+    var e=EVENTS[i];
+    var d=document.createElement('div');d.className='ln k-'+e.k;
+    d.innerHTML='<span class="ts">'+mmss(e.rt)+'</span><span class="tag">'+e.k.toUpperCase()+'</span>'+escapeHtml(e.x||'·');
+    feed.appendChild(d);
+  }
+  drawnCursor=idx;
+  feed.scrollTop=feed.scrollHeight;
+}
+function appendTo(idx){
+  for(var i=drawnCursor+1;i<=idx;i++){
+    if(!visible(i))continue;
+    var e=EVENTS[i],d=document.createElement('div');d.className='ln k-'+e.k;
+    d.innerHTML='<span class="ts">'+mmss(e.rt)+'</span><span class="tag">'+e.k.toUpperCase()+'</span>'+escapeHtml(e.x||'·');
+    feed.appendChild(d);
+  }
+  while(feed.children.length>400)feed.removeChild(feed.firstChild);
+  drawnCursor=idx;feed.scrollTop=feed.scrollHeight;
+}
+function setCursor(i){cursor=Math.max(0,Math.min(EVENTS.length-1,i));scrub.value=EVENTS[cursor].rt-t0;time.textContent=mmss(EVENTS[cursor].rt-t0);drawTo(cursor);}
+function tick(){var now=performance.now();var target=base+(now-startedAt);var idx=cursor;
+  while(idx<EVENTS.length-1&&EVENTS[idx+1].rt-t0<=target)idx++;
+  if(idx!==cursor){cursor=idx;scrub.value=EVENTS[cursor].rt-t0;time.textContent=mmss(EVENTS[cursor].rt-t0);appendTo(cursor);}
+  if(cursor>=EVENTS.length-1){stop();return;}
+  raf=requestAnimationFrame(tick);}
+function play(){if(playing)return;playing=true;document.getElementById('play').textContent='⏸ pause';startedAt=performance.now();base=EVENTS[cursor].rt-t0;raf=requestAnimationFrame(tick);}
+function stop(){playing=false;document.getElementById('play').textContent='▶ play';if(raf)cancelAnimationFrame(raf);}
+document.getElementById('play').onclick=function(){playing?stop():play();};
+scrub.oninput=function(){stop();var t=+scrub.value+t0,lo=0,hi=EVENTS.length-1,j=0;
+  while(lo<=hi){var mid=(lo+hi)>>1;if(EVENTS[mid].rt<=t){j=mid;lo=mid+1;}else hi=mid-1;}setCursor(j);};
+document.getElementById('filters').onclick=function(e){var c=e.target.closest('.chip');if(!c)return;
+  document.querySelectorAll('.chip').forEach(function(x){x.classList.remove('on')});c.classList.add('on');filter=c.dataset.k;setCursor(cursor);};
+document.addEventListener('keydown',function(e){if(e.key===' '){e.preventDefault();playing?stop():play();}});
+setCursor(0);
+</script>
+</body>
+</html>
+`;
+
+  fs.writeFileSync(outPath, html, { flag: opts.overwrite ? 'w' : 'wx' });
+  return outPath;
+}
+
+module.exports = { clip };