agenticreplay 0.1.0 → 0.1.2

package/packages/viewer/test/client.test.ts

@@ -1,378 +0,0 @@
-import { beforeEach, describe, expect, it } from 'vitest';
-import { createContext, runInContext } from 'node:vm';
-import { CLIENT_SOURCE } from '../src/client/main.js';
-
-/**
- * The client runtime ships as source text, so the type checker never sees it. This exercises it
- * against a hand-built DOM stub instead: enough of the API surface to prove selection, keyboard
- * navigation, filtering and the theme toggle actually work.
- */
-
-interface StubElement {
-  tagName: string;
-  hidden: boolean;
-  tabIndex: number;
-  value: string;
-  textContent: string;
-  attrs: Record<string, string>;
-  style: Record<string, string>;
-  offsetTop: number;
-  offsetHeight: number;
-  offsetWidth: number;
-  focused: boolean;
-  setAttribute(name: string, value: string): void;
-  getAttribute(name: string): string | null;
-  removeAttribute(name: string): void;
-  addEventListener(type: string, fn: (e: unknown) => void): void;
-  focus(): void;
-  blur(): void;
-  scrollIntoView(): void;
-  fire(type: string, event?: Record<string, unknown>): void;
-}
-
-function element(tagName: string, textContent = ''): StubElement {
-  const listeners: Record<string, ((e: unknown) => void)[]> = {};
-  return {
-    tagName,
-    hidden: false,
-    tabIndex: -1,
-    value: '',
-    textContent,
-    attrs: {},
-    style: {} as Record<string, string>,
-    offsetTop: 0,
-    offsetHeight: 24,
-    offsetWidth: 400,
-    focused: false,
-    setAttribute(name, value) {
-      this.attrs[name] = value;
-    },
-    getAttribute(name) {
-      return this.attrs[name] ?? null;
-    },
-    removeAttribute(name) {
-      delete this.attrs[name];
-    },
-    addEventListener(type, fn) {
-      (listeners[type] ??= []).push(fn);
-    },
-    focus() {
-      this.focused = true;
-    },
-    blur() {
-      this.focused = false;
-    },
-    scrollIntoView() {},
-    fire(type, event = {}) {
-      for (const fn of listeners[type] ?? []) fn(event);
-    },
-  };
-}
-
-function mount(labels: string[]) {
-  const rows = labels.map((label) => element('BUTTON', label));
-  const panes = labels.map(() => element('ARTICLE'));
-  const filterBox = element('INPUT');
-  const countBox = element('SPAN');
-  const themeBtn = element('BUTTON');
-  const playBtn = element('BUTTON');
-  // Mirrors the shipped markup, which renders the control already in its resting state.
-  playBtn.setAttribute('aria-pressed', 'false');
-  const speedBtn = element('BUTTON');
-  const progressBar = element('SPAN');
-  const playhead = element('SPAN');
-  const root = element('HTML');
-  const byId: Record<string, StubElement> = {
-    'agenticreplay-filter': filterBox,
-    'agenticreplay-count': countBox,
-    'agenticreplay-theme': themeBtn,
-    'agenticreplay-play': playBtn,
-    'agenticreplay-speed': speedBtn,
-    'agenticreplay-progress': progressBar,
-    'agenticreplay-playhead': playhead,
-  };
-  const docListeners: Record<string, ((e: unknown) => void)[]> = {};
-  const store: Record<string, string> = {};
-
-  panes.forEach((pane, i) => {
-    pane.hidden = i !== 0;
-  });
-  rows.forEach((row, i) => {
-    row.setAttribute('aria-selected', i === 0 ? 'true' : 'false');
-    // One recorded second between events, so playback timing has something real to compress.
-    row.setAttribute('data-mono', String(i * 1_000_000));
-    row.offsetTop = i * 24;
-  });
-
-  const document = {
-    documentElement: root,
-    querySelectorAll: (selector: string) => (selector === '.row' ? rows : panes),
-    getElementById: (id: string) => byId[id] ?? null,
-    addEventListener: (type: string, fn: (e: unknown) => void) => {
-      (docListeners[type] ??= []).push(fn);
-    },
-  };
-
-  // A manual clock: playback is time-driven, and a test that waits on real timers is a test that
-  // flakes. `flush` runs whatever is currently due, one step at a time.
-  let pending: Array<{ id: number; fn: () => void }> = [];
-  let nextTimerId = 1;
-
-  const sandbox = {
-    document,
-    window: {
-      matchMedia: (query: string) => ({ matches: query.includes('reduce') ? false : false }),
-      addEventListener: () => {},
-    },
-    setTimeout: (fn: () => void) => {
-      const id = nextTimerId++;
-      pending.push({ id, fn });
-      return id;
-    },
-    clearTimeout: (id: number) => {
-      pending = pending.filter((t) => t.id !== id);
-    },
-    Number,
-    localStorage: {
-      getItem: (k: string) => store[k] ?? null,
-      setItem: (k: string, v: string) => {
-        store[k] = v;
-      },
-      removeItem: (k: string) => {
-        delete store[k];
-      },
-    },
-    Math,
-  };
-
-  runInContext(CLIENT_SOURCE, createContext(sandbox));
-
-  return {
-    rows,
-    panes,
-    filterBox,
-    countBox,
-    themeBtn,
-    playBtn,
-    speedBtn,
-    progressBar,
-    playhead,
-    root,
-    store,
-    /** Run every currently-scheduled timer once; returns how many fired. */
-    tick() {
-      const due = pending;
-      pending = [];
-      for (const t of due) t.fn();
-      return due.length;
-    },
-    pendingTimers: () => pending.length,
-    key(key: string, target: StubElement | null = null, mods: Record<string, boolean> = {}) {
-      for (const fn of docListeners['keydown'] ?? []) {
-        fn({ key, target, preventDefault() {}, ...mods });
-      }
-    },
-    selectedIndex: () => rows.findIndex((row) => row.getAttribute('aria-selected') === 'true'),
-  };
-}
-
-describe('client runtime', () => {
-  let ui: ReturnType<typeof mount>;
-  beforeEach(() => {
-    ui = mount(['run started', 'npm test', 'exit 1', 'checkpoint']);
-  });
-
-  it('starts on the first row with only its pane showing', () => {
-    expect(ui.selectedIndex()).toBe(0);
-    expect(ui.panes.map((p) => p.hidden)).toEqual([false, true, true, true]);
-    expect(ui.countBox.textContent).toBe('4 events');
-  });
-
-  it('moves with j and k and clamps at both ends', () => {
-    ui.key('j');
-    expect(ui.selectedIndex()).toBe(1);
-    expect(ui.panes[1]!.hidden).toBe(false);
-    expect(ui.panes[0]!.hidden).toBe(true);
-    ui.key('k');
-    ui.key('k');
-    expect(ui.selectedIndex()).toBe(0);
-    ui.key('ArrowUp');
-    expect(ui.selectedIndex()).toBe(0);
-  });
-
-  it('moves with the arrow keys and Home/End', () => {
-    ui.key('ArrowDown');
-    ui.key('ArrowDown');
-    expect(ui.selectedIndex()).toBe(2);
-    ui.key('End');
-    expect(ui.selectedIndex()).toBe(3);
-    ui.key('Home');
-    expect(ui.selectedIndex()).toBe(0);
-  });
-
-  it('keeps a roving tabindex so the list is one tab stop', () => {
-    ui.key('j');
-    expect(ui.rows.map((r) => r.tabIndex)).toEqual([-1, 0, -1, -1]);
-  });
-
-  it('focuses the filter on / and filters rows as you type', () => {
-    ui.key('/');
-    expect(ui.filterBox.focused).toBe(true);
-    ui.filterBox.value = 'npm';
-    ui.filterBox.fire('input');
-    expect(ui.rows.map((r) => r.hidden)).toEqual([true, false, true, true]);
-    expect(ui.countBox.textContent).toBe('1 of 4');
-    expect(ui.selectedIndex()).toBe(1);
-  });
-
-  it('does not steal keys typed into the filter box', () => {
-    ui.filterBox.value = 'j';
-    ui.key('j', ui.filterBox);
-    expect(ui.selectedIndex()).toBe(0);
-  });
-
-  it('clears the filter on Escape and returns to the list', () => {
-    ui.filterBox.value = 'checkpoint';
-    ui.filterBox.fire('input');
-    expect(ui.rows.filter((r) => !r.hidden)).toHaveLength(1);
-    ui.key('Escape', ui.filterBox);
-    expect(ui.filterBox.value).toBe('');
-    expect(ui.rows.filter((r) => !r.hidden)).toHaveLength(4);
-  });
-
-  it('skips filtered-out rows when navigating', () => {
-    ui.filterBox.value = 'e';
-    ui.filterBox.fire('input');
-    const visible = ui.rows.map((r) => !r.hidden);
-    expect(visible).toEqual([true, true, true, true]);
-    ui.filterBox.value = 'exit';
-    ui.filterBox.fire('input');
-    ui.key('j');
-    expect(ui.selectedIndex()).toBe(2);
-  });
-
-  it('cycles the theme auto to dark to light and remembers it', () => {
-    expect(ui.root.getAttribute('data-theme')).toBe(null);
-    expect(ui.themeBtn.textContent).toBe('auto');
-    ui.themeBtn.fire('click');
-    expect(ui.root.getAttribute('data-theme')).toBe('dark');
-    expect(ui.store['agenticreplay-theme']).toBe('dark');
-    ui.themeBtn.fire('click');
-    expect(ui.root.getAttribute('data-theme')).toBe('light');
-    ui.themeBtn.fire('click');
-    expect(ui.root.getAttribute('data-theme')).toBe(null);
-    expect(ui.store['agenticreplay-theme']).toBeUndefined();
-  });
-
-  it('ignores modified keystrokes so browser shortcuts still work', () => {
-    ui.key('j', null, { ctrlKey: true });
-    ui.key('j', null, { metaKey: true });
-    ui.key('End', null, { altKey: true });
-    expect(ui.selectedIndex()).toBe(0);
-  });
-
-  it('selects a row on click', () => {
-    ui.rows[2]!.fire('click');
-    expect(ui.selectedIndex()).toBe(2);
-    expect(ui.panes[2]!.hidden).toBe(false);
-  });
-
-  it('survives a page with no rows at all', () => {
-    expect(() => mount([])).not.toThrow();
-  });
-});
-
-describe('playback', () => {
-  let ui: ReturnType<typeof mount>;
-  beforeEach(() => {
-    ui = mount(['run started', 'npm test', 'exit 1', 'checkpoint']);
-  });
-
-  it('space starts playback and advances one row per tick', () => {
-    ui.key(' ');
-    expect(ui.playBtn.getAttribute('aria-pressed')).toBe('true');
-    expect(ui.selectedIndex()).toBe(1);
-    ui.tick();
-    expect(ui.selectedIndex()).toBe(2);
-  });
-
-  it('space again pauses, and cancels the pending step', () => {
-    ui.key(' ');
-    expect(ui.pendingTimers()).toBe(1);
-    ui.key(' ');
-    expect(ui.playBtn.getAttribute('aria-pressed')).toBe('false');
-    expect(ui.pendingTimers()).toBe(0);
-  });
-
-  it('stops of its own accord at the last row', () => {
-    ui.key(' ');
-    while (ui.pendingTimers() > 0) ui.tick();
-    expect(ui.selectedIndex()).toBe(3);
-    expect(ui.playBtn.getAttribute('aria-pressed')).toBe('false');
-  });
-
-  it('restarts from the top when played again from the end', () => {
-    ui.key(' ');
-    while (ui.pendingTimers() > 0) ui.tick();
-    ui.key(' ');
-    expect(ui.selectedIndex()).toBe(0);
-    expect(ui.playBtn.getAttribute('aria-pressed')).toBe('true');
-  });
-
-  it('hands the wheel back the moment you navigate manually', () => {
-    ui.key(' ');
-    expect(ui.playBtn.getAttribute('aria-pressed')).toBe('true');
-    ui.key('j');
-    expect(ui.playBtn.getAttribute('aria-pressed')).toBe('false');
-    expect(ui.pendingTimers()).toBe(0);
-  });
-
-  it('is interrupted by filtering too, which reflows the list under it', () => {
-    ui.key(' ');
-    ui.filterBox.value = 'test';
-    ui.filterBox.fire('input');
-    expect(ui.playBtn.getAttribute('aria-pressed')).toBe('false');
-  });
-
-  it('moves the playhead to the selected row and marks it live', () => {
-    expect(ui.playhead.getAttribute('data-on')).toBe('true');
-    expect(ui.playhead.style.transform).toBe('translateY(0px)');
-    ui.key('j');
-    expect(ui.playhead.style.transform).toBe('translateY(24px)');
-    expect(ui.playhead.style.height).toBe('24px');
-  });
-
-  it('advances the progress bar from empty to full', () => {
-    expect(ui.progressBar.style.transform).toBe('scaleX(0)');
-    ui.key('End');
-    expect(ui.progressBar.style.transform).toBe('scaleX(1)');
-  });
-
-  it('cycles the speed control through the offered rates', () => {
-    expect(ui.speedBtn.textContent).toBe('');
-    ui.speedBtn.fire('click');
-    expect(ui.speedBtn.textContent).toBe('4×');
-    ui.speedBtn.fire('click');
-    expect(ui.speedBtn.textContent).toBe('16×');
-    ui.speedBtn.fire('click');
-    expect(ui.speedBtn.textContent).toBe('1×');
-  });
-
-  it('the play button does the same thing as the key', () => {
-    ui.playBtn.fire('click');
-    expect(ui.playBtn.getAttribute('aria-pressed')).toBe('true');
-    expect(ui.selectedIndex()).toBe(1);
-  });
-
-  it('does not hijack space while typing in the filter box', () => {
-    ui.key(' ', ui.filterBox);
-    expect(ui.playBtn.getAttribute('aria-pressed')).toBe('false');
-  });
-
-  it('marks the direction of travel on the pane it reveals', () => {
-    ui.key('j');
-    expect(ui.panes[1]!.getAttribute('data-dir')).toBe('down');
-    ui.key('k');
-    expect(ui.panes[0]!.getAttribute('data-dir')).toBe('up');
-  });
-});

package/packages/viewer/test/export.test.ts

@@ -1,131 +0,0 @@
-import { afterAll, describe, expect, it } from 'vitest';
-import { readFile, rm, stat } from 'node:fs/promises';
-import { join } from 'node:path';
-import { exportTraceHtml } from '../src/export.js';
-import { ev, manifest, resetSeq, tempRunDir, writeRun } from './fixtures.js';
-
-const scratch: string[] = [];
-afterAll(async () => {
-  await Promise.all(scratch.map((dir) => rm(dir, { recursive: true, force: true })));
-});
-
-async function fixture(label: string, run: Parameters<typeof writeRun>[1]): Promise<string> {
-  const dir = await tempRunDir(label);
-  scratch.push(dir);
-  await writeRun(dir, run);
-  return dir;
-}
-
-describe('exportTraceHtml', () => {
-  it('reads a run directory and writes one self-contained file', async () => {
-    resetSeq();
-    const dir = await fixture('basic', {
-      events: [
-        ev({ type: 'run.start', attrs: { adapter: 'claude-code' } }),
-        ev({ type: 'shell.exec', attrs: { command: 'npm test' } }),
-        ev({ type: 'run.end', attrs: { exit_code: 0 } }),
-      ],
-    });
-    const out = join(dir, 'nested', 'trace.html');
-    const result = await exportTraceHtml(dir, out);
-
-    expect(result.path).toBe(out);
-    const written = await readFile(out, 'utf8');
-    expect(result.bytes).toBe((await stat(out)).size);
-    expect(written.startsWith('<!doctype html>')).toBe(true);
-    expect(written).toContain('npm test');
-    expect(written).toContain('run_abc123');
-
-    const refs = [...written.matchAll(/(?:src|href)\s*=\s*"([^"]*)"/gi)].map((m) => m[1]!);
-    for (const ref of refs) expect(ref).not.toMatch(/^(?:[a-z]+:)?\/\//i);
-  });
-
-  it('inlines the blobs the panes need', async () => {
-    resetSeq();
-    const dir = await fixture('blobs', {
-      events: [
-        ev({
-          type: 'tool.result',
-          payload: { $blob: 'sha256:aabb', bytes: 11, media_type: 'text/plain' },
-        }),
-      ],
-      blobs: { 'sha256:aabb': 'hello blobs' },
-    });
-    const written = await readFile(
-      (await exportTraceHtml(dir, join(dir, 'out.html'))).path,
-      'utf8',
-    );
-    expect(written).toContain('hello blobs');
-  });
-
-  it('respects the blob byte cap rather than writing a huge file', async () => {
-    resetSeq();
-    const dir = await fixture('cap', {
-      events: [
-        ev({ type: 'tool.result', payload: { $blob: 'sha256:1111', bytes: 2000 } }),
-        ev({ type: 'tool.result', payload: { $blob: 'sha256:2222', bytes: 3000 } }),
-      ],
-      blobs: { 'sha256:1111': 'a'.repeat(2000), 'sha256:2222': 'b'.repeat(3000) },
-    });
-    const out = join(dir, 'capped.html');
-    await exportTraceHtml(dir, out, { maxBlobBytes: 2500 });
-    const written = await readFile(out, 'utf8');
-    expect(written).toContain('a'.repeat(200));
-    expect(written).not.toContain('b'.repeat(200));
-    expect(written).toContain('payload omitted, 3000 bytes');
-  });
-
-  it('keeps the complete redacted body by default', async () => {
-    resetSeq();
-    const big = 'c'.repeat(9 * 1024 * 1024);
-    const dir = await fixture('bigcap', {
-      events: [ev({ type: 'tool.result', payload: { $blob: 'sha256:3333', bytes: big.length } })],
-      blobs: { 'sha256:3333': big },
-    });
-    const out = join(dir, 'big.html');
-    const result = await exportTraceHtml(dir, out);
-    expect(result.bytes).toBeGreaterThan(9 * 1024 * 1024);
-    expect(await readFile(out, 'utf8')).toContain('download full redacted body');
-  });
-
-  it('tolerates a truncated final line, as the spec requires of every reader', async () => {
-    resetSeq();
-    const dir = await fixture('torn', {
-      events: [ev({ type: 'run.start' }), ev({ type: 'note', attrs: { text: 'kept' } })],
-    });
-    const { appendFile } = await import('node:fs/promises');
-    await appendFile(join(dir, 'events.jsonl'), '{"seq":2,"ts":"2026-01-01T00');
-    const out = join(dir, 'torn.html');
-    await exportTraceHtml(dir, out);
-    const written = await readFile(out, 'utf8');
-    expect(written).toContain('kept');
-    expect((written.match(/role="tab"/g) ?? []).length).toBe(2);
-  });
-
-  it('skips a binary blob instead of corrupting the document', async () => {
-    resetSeq();
-    const dir = await fixture('binary', {
-      events: [ev({ type: 'tool.result', payload: { $blob: 'sha256:4444', bytes: 4 } })],
-      blobs: { 'sha256:4444': new Uint8Array([0x00, 0x01, 0x02, 0xff]) },
-    });
-    const out = join(dir, 'bin.html');
-    await exportTraceHtml(dir, out);
-    expect(await readFile(out, 'utf8')).toContain('payload omitted, 4 bytes');
-  });
-
-  it('reports a missing manifest clearly', async () => {
-    const dir = await tempRunDir('missing');
-    scratch.push(dir);
-    await expect(exportTraceHtml(dir, join(dir, 'x.html'))).rejects.toThrow(/manifest\.json/);
-  });
-
-  it('handles a run directory with no blobs directory at all', async () => {
-    resetSeq();
-    const dir = await fixture('noblobs', {
-      events: [ev({ type: 'tool.result', payload: { $blob: 'sha256:5555', bytes: 12 } })],
-    });
-    const out = join(dir, 'nb.html');
-    await expect(exportTraceHtml(dir, out)).resolves.toMatchObject({ path: out });
-    expect(await readFile(out, 'utf8')).toContain('payload omitted, 12 bytes');
-  });
-});

package/packages/viewer/test/fixtures.ts

@@ -1,69 +0,0 @@
-import { SCHEMA_VERSION, type Manifest, type TraceEvent } from '@agenticreplay/schema';
-
-let seq = 0;
-
-/** Reset the seq counter so each test builds a dense, spec-conformant order. */
-export function resetSeq(): void {
-  seq = 0;
-}
-
-/** Build one event with spec-required envelope fields filled in. */
-export function ev(partial: Partial<TraceEvent> & Pick<TraceEvent, 'type'>): TraceEvent {
-  const n = partial.seq ?? seq++;
-  return {
-    seq: n,
-    ts: new Date(Date.UTC(2026, 0, 1, 0, 0, n)).toISOString(),
-    mono_us: n * 1_000_000,
-    turn: partial.turn ?? 0,
-    actor: partial.actor ?? 'agenticreplay',
-    ...partial,
-    type: partial.type,
-  } as TraceEvent;
-}
-
-export function manifest(over: Partial<Manifest> = {}): Manifest {
-  return {
-    schema_version: SCHEMA_VERSION,
-    run_id: 'run_abc123',
-    created_at: '2026-01-01T00:00:00.000Z',
-    ended_at: '2026-01-01T00:04:51.000Z',
-    agenticreplay_version: '0.1.0',
-    adapter: { id: 'claude-code', version: '1.4.0' },
-    argv: ['agenticreplay', 'record', '--', 'claude'],
-    cwd: '/work',
-    ...over,
-  };
-}
-
-/** A snapshot event for turn `turn` carrying tree id `tree`. */
-export function snap(turn: number, tree: string): TraceEvent {
-  return ev({ type: 'fs.snapshot', turn, actor: 'agenticreplay', attrs: { tree } });
-}
-
-/** Write a spec §1 run directory: manifest.json, events.jsonl, blobs/<ab>/<digest>. */
-export async function writeRun(
-  dir: string,
-  run: { manifest?: Manifest; events?: TraceEvent[]; blobs?: Record<string, string | Uint8Array> },
-): Promise<string> {
-  const fs = await import('node:fs/promises');
-  const path = await import('node:path');
-  await fs.mkdir(dir, { recursive: true });
-  await fs.writeFile(path.join(dir, 'manifest.json'), JSON.stringify(run.manifest ?? manifest()));
-  const lines = (run.events ?? []).map((e) => JSON.stringify(e)).join('\n');
-  await fs.writeFile(path.join(dir, 'events.jsonl'), lines === '' ? '' : `${lines}\n`);
-  for (const [digest, body] of Object.entries(run.blobs ?? {})) {
-    const hex = digest.replace(/^sha256:/, '');
-    const shard = path.join(dir, 'blobs', hex.slice(0, 2));
-    await fs.mkdir(shard, { recursive: true });
-    await fs.writeFile(path.join(shard, hex), body);
-  }
-  return dir;
-}
-
-/** A unique scratch directory under the OS temp dir. */
-export async function tempRunDir(label: string): Promise<string> {
-  const fs = await import('node:fs/promises');
-  const os = await import('node:os');
-  const path = await import('node:path');
-  return fs.mkdtemp(path.join(os.tmpdir(), `agenticreplay-viewer-${label}-`));
-}