feat: build interactive replay page with timeline, ANSI rendering, fork tree, and live mode

Author: richiemcilroy

apps/web/src/components/replay/AnsiText.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from 'react'
+import type { CSSProperties } from 'react'
+import { parseAnsi } from './ansi-parser'
+
+interface AnsiTextProps {
+  text: string
+  className?: string | undefined
+}
+
+export default function AnsiText({ text, className }: AnsiTextProps) {
+  const segments = useMemo(() => parseAnsi(text), [text])
+
+  return (
+    <pre className={className ?? 'replay-terminal'}>
+      {segments.map((seg, i) => {
+        const style: CSSProperties = {}
+        if (seg.fg) style.color = seg.fg
+        if (seg.bg) style.backgroundColor = seg.bg
+        if (seg.bold) style.fontWeight = 700
+        if (seg.dim) style.opacity = 0.6
+        if (seg.underline) style.textDecoration = 'underline'
+
+        const hasStyle = seg.fg || seg.bg || seg.bold || seg.dim || seg.underline
+        if (!hasStyle) return seg.text
+
+        return (
+          <span key={i} style={style}>
+            {seg.text}
+          </span>
+        )
+      })}
+    </pre>
+  )
+}

apps/web/src/components/replay/ForkTree.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import type { ReplayForkTreeNode } from '@sandchest/contract'
+import { formatRelativeTime } from '@/lib/format'
+
+interface ForkTreeProps {
+  tree: ReplayForkTreeNode
+  currentId: string
+}
+
+function TreeNode({
+  node,
+  currentId,
+  depth,
+  isLast,
+}: {
+  node: ReplayForkTreeNode
+  currentId: string
+  depth: number
+  isLast: boolean
+}) {
+  const [collapsed, setCollapsed] = useState(false)
+  const isCurrent = node.sandbox_id === currentId
+  const hasChildren = node.children.length > 0
+
+  return (
+    <div className="ft-node-wrapper">
+      <div className={`ft-node ${isCurrent ? 'ft-current' : ''}`}>
+        {depth > 0 && (
+          <span className="ft-branch">{isLast ? '\u2514\u2500 ' : '\u251c\u2500 '}</span>
+        )}
+
+        <span className="ft-dot" />
+
+        {isCurrent ? (
+          <span className="ft-id ft-id-current">{node.sandbox_id}</span>
+        ) : (
+          <Link href={`/s/${node.sandbox_id}`} className="ft-id ft-id-link">
+            {node.sandbox_id}
+          </Link>
+        )}
+
+        {isCurrent && <span className="ft-badge">current</span>}
+
+        {node.forked_at && (
+          <span className="ft-time">
+            forked {formatRelativeTime(node.forked_at)}
+          </span>
+        )}
+
+        {hasChildren && (
+          <button
+            type="button"
+            className="ft-collapse-btn"
+            onClick={() => setCollapsed(!collapsed)}
+            aria-label={collapsed ? 'Expand' : 'Collapse'}
+          >
+            {collapsed ? `+${node.children.length}` : '\u2212'}
+          </button>
+        )}
+      </div>
+
+      {hasChildren && !collapsed && (
+        <div className="ft-children" style={{ marginLeft: depth > 0 ? 20 : 12 }}>
+          {node.children.map((child, i) => (
+            <TreeNode
+              key={child.sandbox_id}
+              node={child}
+              currentId={currentId}
+              depth={depth + 1}
+              isLast={i === node.children.length - 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function ForkTree({ tree, currentId }: ForkTreeProps) {
+  if (tree.children.length === 0 && tree.sandbox_id === currentId) {
+    return null
+  }
+
+  return (
+    <div className="ft-container">
+      <h3 className="replay-section-title">Fork Tree</h3>
+      <TreeNode node={tree} currentId={currentId} depth={0} isLast={true} />
+    </div>
+  )
+}

apps/web/src/components/replay/ReplayViewer.test.ts

@@ -0,0 +1,180 @@
+import { describe, expect, test } from 'bun:test'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+
+const viewerSrc = readFileSync(
+  join(import.meta.dir, 'ReplayViewer.tsx'),
+  'utf-8',
+)
+
+const timelineSrc = readFileSync(
+  join(import.meta.dir, 'Timeline.tsx'),
+  'utf-8',
+)
+
+const forkTreeSrc = readFileSync(
+  join(import.meta.dir, 'ForkTree.tsx'),
+  'utf-8',
+)
+
+const ansiTextSrc = readFileSync(
+  join(import.meta.dir, 'AnsiText.tsx'),
+  'utf-8',
+)
+
+describe('ReplayViewer', () => {
+  test('marks as client component', () => {
+    expect(viewerSrc).toMatch(/^'use client'/)
+  })
+
+  test('uses TanStack Query hooks for data fetching', () => {
+    expect(viewerSrc).toContain('useReplayBundle')
+    expect(viewerSrc).toContain('useReplayEvents')
+  })
+
+  test('includes timeline tab as default', () => {
+    expect(viewerSrc).toContain("useState<Tab>('timeline')")
+  })
+
+  test('includes all four tabs', () => {
+    expect(viewerSrc).toContain("'timeline'")
+    expect(viewerSrc).toContain("'execs'")
+    expect(viewerSrc).toContain("'sessions'")
+    expect(viewerSrc).toContain("'artifacts'")
+  })
+
+  test('renders live badge when in_progress', () => {
+    expect(viewerSrc).toContain('replay-live-badge')
+    expect(viewerSrc).toContain('replay-live-dot')
+  })
+
+  test('renders copy URL button', () => {
+    expect(viewerSrc).toContain('CopyButton')
+    expect(viewerSrc).toContain('Copy URL')
+  })
+
+  test('passes isLive to Timeline', () => {
+    expect(viewerSrc).toContain('isLive={isLive}')
+  })
+
+  test('renders ForkTree component', () => {
+    expect(viewerSrc).toContain('<ForkTree')
+    expect(viewerSrc).toContain('tree={bundle.fork_tree}')
+  })
+
+  test('uses AnsiText for exec output', () => {
+    expect(viewerSrc).toContain('<AnsiText')
+    expect(viewerSrc).toContain('text={combinedOutput}')
+  })
+
+  test('no console.log in production code', () => {
+    expect(viewerSrc).not.toContain('console.log')
+  })
+})
+
+describe('Timeline', () => {
+  test('marks as client component', () => {
+    expect(timelineSrc).toMatch(/^'use client'/)
+  })
+
+  test('includes search functionality', () => {
+    expect(timelineSrc).toContain('tl-search')
+    expect(timelineSrc).toContain('Search events')
+  })
+
+  test('includes expand/collapse toggle', () => {
+    expect(timelineSrc).toContain('Collapse all')
+    expect(timelineSrc).toContain('Expand all')
+  })
+
+  test('groups exec output events', () => {
+    expect(timelineSrc).toContain('groupEvents')
+    expect(timelineSrc).toContain("'exec.output'")
+  })
+
+  test('auto-scrolls in live mode', () => {
+    expect(timelineSrc).toContain('scrollIntoView')
+    expect(timelineSrc).toContain('isLive')
+  })
+
+  test('renders elapsed timestamps', () => {
+    expect(timelineSrc).toContain('formatElapsed')
+    expect(timelineSrc).toContain('tl-time')
+  })
+
+  test('handles all event types', () => {
+    const eventTypes = [
+      'sandbox.created', 'sandbox.ready', 'sandbox.forked',
+      'sandbox.stopping', 'sandbox.stopped', 'sandbox.failed',
+      'sandbox.ttl_warning', 'exec.started', 'exec.completed',
+      'exec.failed', 'session.created', 'session.destroyed',
+      'file.written', 'file.deleted', 'artifact.registered',
+      'artifact.collected',
+    ]
+    for (const type of eventTypes) {
+      expect(timelineSrc).toContain(`'${type}'`)
+    }
+  })
+
+  test('no console.log in production code', () => {
+    expect(timelineSrc).not.toContain('console.log')
+  })
+})
+
+describe('ForkTree', () => {
+  test('marks as client component', () => {
+    expect(forkTreeSrc).toMatch(/^'use client'/)
+  })
+
+  test('supports collapsing nodes', () => {
+    expect(forkTreeSrc).toContain('collapsed')
+    expect(forkTreeSrc).toContain('ft-collapse-btn')
+  })
+
+  test('highlights current sandbox', () => {
+    expect(forkTreeSrc).toContain('ft-current')
+    expect(forkTreeSrc).toContain('ft-id-current')
+  })
+
+  test('renders tree branch characters', () => {
+    expect(forkTreeSrc).toContain('\\u2514\\u2500')
+    expect(forkTreeSrc).toContain('\\u251c\\u2500')
+  })
+
+  test('links to other sandboxes', () => {
+    expect(forkTreeSrc).toContain('ft-id-link')
+    expect(forkTreeSrc).toContain('href={`/s/${node.sandbox_id}`}')
+  })
+
+  test('returns null for single-node tree', () => {
+    expect(forkTreeSrc).toContain('tree.children.length === 0')
+    expect(forkTreeSrc).toContain('return null')
+  })
+
+  test('no console.log in production code', () => {
+    expect(forkTreeSrc).not.toContain('console.log')
+  })
+})
+
+describe('AnsiText', () => {
+  test('uses parseAnsi and useMemo', () => {
+    expect(ansiTextSrc).toContain('parseAnsi')
+    expect(ansiTextSrc).toContain('useMemo')
+  })
+
+  test('applies inline styles for ANSI attributes', () => {
+    expect(ansiTextSrc).toContain('style.color')
+    expect(ansiTextSrc).toContain('style.backgroundColor')
+    expect(ansiTextSrc).toContain('style.fontWeight')
+    expect(ansiTextSrc).toContain('style.opacity')
+    expect(ansiTextSrc).toContain('style.textDecoration')
+  })
+
+  test('renders plain text without wrapping spans', () => {
+    expect(ansiTextSrc).toContain('return seg.text')
+  })
+
+  test('no console.log in production code', () => {
+    expect(ansiTextSrc).not.toContain('console.log')
+  })
+})