AgentScreen | Tuff Docs

Usage

state switches between the capture and a placeholder; cursor overlays a pointer with an action label.

Loading demo...

Put a live canvas or video in the default slot; keep src for static captures.
Let label say whose screen it is, and the pointer's label say what the agent is doing.
Between frames, set state to loading instead of leaving a stale frame up; a stale frame reads as stuck.

Name	Type	Default	Description
`src`	`string`	-	Image source; ignored when the default slot is filled.
`alt`	`string`	-	Accessible description of the capture; required whenever `src` is set.
`label`	`string`	-	Caption under the frame; omit to render none.
`state`	`'working' \| 'loading'`	`'working'`	Shows the capture or the loading placeholder.
`cursor`	`AgentScreenCursor`	-	Pointer overlay; omit to hide it.
`ratio`	`string`	`'2964 / 1856'`	CSS `aspect-ratio` of the frame; defaults to the upstream capture's ratio.
`ariaLabel`	`string`	`'Agent screen'`	Accessible name of the whole region.
`loadingLabel`	`string`	`'Waiting for the agent’s screen'`	Announced while loading.

Name	Description
`default`	Replaces the frame content; takes precedence over `src`.
`overlay`	Above the content, inside the clip; dropped while loading.
`label`	Replaces the caption under the frame.

Field	Type	Description
`x` / `y`	`number`	Percent of the frame (0–100), so the point holds at any size; out-of-range values are clamped.
`label`	`string`	A line beside the pointer, usually the current action.

The component owns the frame, the pointer, and the caption; the content comes from the default slot or src, never both.
ratio fixes the proportions, not the height: the width follows the container.
When state is loading, or there is neither a default slot nor src, a skeleton placeholder replaces the capture, the pointer, and overlay.
The root is a role="group" named by ariaLabel; the placeholder is a role="status" with aria-live="polite" that announces loadingLabel.
Under reduced motion, the placeholder stops shimmering.

The placeholder reuses the library's skeleton-surface bar, tinted to the BUI surface color.
Source: packages/tuffex/packages/components/src/agent-screen/.

packages/tuffex/packages/components/src/agent-screen/index.ts