PhantomStream.

A live mirror that is cheap, exact, and addressable

When an AI agent drives a browser, the human supervising it needs a live view of what the agent is doing. PhantomStream streams the DOM itself instead of pixels. It captures the page once as a style-inlined snapshot, assigns stable identifiers in a WeakMap, then watches the page with a MutationObserver and sends only small diffs (add, rm, attr, text) keyed by node ID and batched to the page's own paint cadence.

The payoff is a mirror whose bandwidth tracks how much the page actually changes rather than the frame rate. Text renders natively at any resolution, and remote control targets real elements by their stable IDs instead of guessing at coordinates.

The problem with pixels

The obvious tools for a live view are video. WebRTC, a CDP screencast, or a sequence of screenshots all send pixels. Pixels are heavy. Every frame costs bandwidth whether the page changed or not, encoding and decoding add latency, and the result is lossy and resolution bound.

Worse, pixels are opaque. The watcher cannot ask which element the agent is touching, cannot highlight a node, cannot annotate the view, and cannot reliably drive the page back. Remote control over a video stream means clicking pixel coordinates against a frame that may already be stale, so a misaligned click lands on the wrong thing.

Why DOM streaming instead of video

Streaming structured DOM rather than frames changes the economics and the capabilities of the mirror across every axis that matters for supervising an agent.

A four-stage pipeline

The page is captured, the host wraps each message for transport, a relay fans messages out to viewers, and the viewer rebuilds and applies them. Remote control runs the same path in reverse.

Core mechanisms

What you get out of the box

The capture core is plain JavaScript that injects as a content script, an addInitScript, or a bookmarklet, with no runtime build step. Capture, viewer, and relay all talk through a small transport seam.

The embed security contract

Capture, mirror, relay

PhantomStream exposes one subpath per stage. Wire a capture in the page context, a viewer in the remote context, and a relay on Node to fan messages between them.

import { createCapture } from '@full-self-browsing/phantom-stream/capture';
import { createWebSocketTransport } from '@full-self-browsing/phantom-stream/transport/websocket';

const transport = createWebSocketTransport({
  url: 'wss://relay.example.com/ws?room=ROOM&role=source',
  role: 'source'
});

const capture = createCapture({
  transport,
  skipElement: (el) => el.id === 'my-own-overlay' // exclude your own UI
});

capture.start(); // snapshot once, then stream diffs

import { createViewer } from '@full-self-browsing/phantom-stream/renderer';
import { createWebSocketTransport } from '@full-self-browsing/phantom-stream/transport/websocket';

const transport = createWebSocketTransport({
  url: 'wss://relay.example.com/ws?room=ROOM&role=viewer',
  role: 'viewer'
});

const viewer = createViewer({
  container: document.getElementById('mirror'),
  transport
});

viewer.on('state', (e) => console.log('viewer is', e.state));
// connecting | live | stale | disconnected

import http from 'node:http';
import { createRelay, createWebSocketRelayBackend } from '@full-self-browsing/phantom-stream/relay';

const relay = createRelay();   // 1 MiB per-message cap, backpressure drop
const server = http.createServer();
createWebSocketRelayBackend({ server, relay, path: '/ws' });
server.listen(8787);

// clients join with ?room=<id>&role=source|viewer

Documentation

The deeper treatment lives alongside the source. Each document is self-contained.