AgentScreen

A framed capture of an agent's live screen that opens into a full-page viewer where you can teach the agent a task and record it.

When to use

• Show what a computer-use or browser agent is doing right now, with a way to take a closer look.
• Let a person demonstrate a task ("Teach a task") while the agent's screen is visible, with a running recording timer.
• Use variant="Loading" while the stream is still connecting.
• Not for static screenshots or media galleries — use a plain image in a Card. Not for step-by-step progress text — use TaskRows or ThinkingState.

Usage

import AgentScreen from "@/components/iris/agent-screen/agent-screen";

h(AgentScreen, {
  agentName: "docs-bot",
  streamSrc: "/streams/docs-bot.webp", // image or video URL
});

h(AgentScreen, { agentName: "docs-bot", variant: "Loading" });

Props

Prop	Type	Default	Description
agentName	string	"Agent"	Shown under the card ("docs-bot's screen") and in the viewer's title bar.
streamSrc	string	—	Image or video URL for the screen. A URL ending in .mp4, .webm, .mov or .m4v renders a muted, looping <video>; anything else renders an <img>. Without it, the card and the viewer show a drawn browser window.
variant	"Working" | "Loading"	Working	Loading shows a black "Connecting to agent's screen" spinner and disables opening the viewer.

Notes

• Pass streamSrc to show the agent's real screen. The drawn window is a placeholder (a notdocs document list).
• Clicking the card (or its hover "Open" button) opens a modal viewer portaled to document.body (role="dialog", aria-modal). Esc or the backdrop collapses it, and page scroll is locked while it is open.
• "Teach a task" starts recording with a red mm:ss timer. Recording keeps running after the viewer collapses and stops with "End".
• The card is 340px wide at most. The aspect ratio is fixed at 2964:1856, and the media is cropped with object-cover. In the viewer the media keeps its own size, bounded by the window.
• The resting card opens on click; for keyboard users its Open button shows on focus.
• Reads --inset, --surface, --line, --red, --red-tint and the shadow-card/shadow-raised shadows. The loading screen and cursor use fixed black and white in both themes.
• Under reduced motion, the bundle's global rule cuts the animations and transitions to near zero.