Tools for the Machine

This case study describes two toolkit features: synchronizing interaction across multiple charts, and allowing a coding agent to inspect and update an application through browser tools.

Chart interactions use shared events, while browser tools expose named application operations to coding agents.

An approval dialog holding a pending tool call named uikit-preview.demo.echo_write, showing the message it would record, an expiry countdown, and Deny and Approve buttons

Synchronizing chart interactions

A risk dashboard can contain eight charts stacked on a shared time axis. Comparing values at the same point in time requires coordinating the cursor across all of them.

Charts in a group share an event emitter. A pointer position from one chart is sent to the others, which display a cursor at the corresponding value on their own scales. Each chart subscribes to the event stream independently.

Two stacked charts, account and benchmark, each drawing a vertical cursor at the same point on a shared time axis

A combined tooltip reads the shared cursor state and reports the value of each series at that position.

The same synced chart group with a single combined readout reporting the value of each series at the hovered position

Subscriptions are per key, so pointer movement does not re-render every widget. Series with more than 1,000 points are downsampled using largest-triangle-three-buckets or min/max-per-pixel, depending on whether the overall shape or local extrema matter.

Browser tools for coding agents

The browser publishes named tools that an MCP-connected harness can call to inspect and update the application.

A connection indicator showing a harness attached and ready, with the number of tools it can currently see

The browser tools distinguish read operations from mutations. Reads can proceed directly; each mutation waits for a person to approve or deny it.

A pending call shows the tool and its arguments, which can be expanded for review. A person can approve or deny it. Calls expire after a timeout, so an unattended tab does not leave mutations authorized.

The approval dialog with several tool calls queued behind the current one, each waiting for an explicit decision

Calls are queued and presented one at a time, so mutations from a single agent turn are reviewed in sequence.

Shared interface principles

The chart group shares cursor state across charts. The browser tool layer exposes selected application operations to an agent and requires human approval for mutations.

The agent relay contains a session state machine, token minting and wire framing, with transport kept separate. The demo runs it in a Cloudflare Worker.

Source ยท Component preview