Agent

Non-interactive markers that label content as AI output. Built on the status-ai token family.

The violet pill invites the agent to act. Kept distinct from the brand primary button so AI actions read as separate from regular CTAs.

A glassy 3D sphere whose living, ai-tinted core is refracted through a spherical displacement map (feImage + feDisplacementMap, à la Aave's web glass) — colors magnify in the center and fringe chromatically at the rim. Houses the goo loader — the agent's presence and busy state. Sizes freely.

Block-level notices that frame agent-proposed content.

A multiple-choice question the agent asks in the chat to settle a decision. Single-select with lettered options, an optional Skip, and Continue to confirm.

A summary the agent surfaces after a batch of edits — each touched screen with its edit count, an Undo action, and a more menu. Long lists collapse behind a Show more expander.

An agent-proposed action laid out for review: a titled header, editable fields each with a leading visual, and a confirm / discard footer. Default is a single white card; well nests each field on a white mini-card inside a subtle gray surface (like Collection Card filled).

The send-beam aurora looped around a card's border as a loading state — same effect as the composer, orbiting the rounded edge while the agent works. Wrap any card in CardLoading and toggle loading.

The send-beam "inner" effect: instead of orbiting the outer edge, a purple bloom fills the card from its edges while a softened comet sweeps on top. The box is clipped so the glow stays inside. Pass effect="inner" to CardLoading or SendBeam.

Color ramps and blur treatments for the send-beam comet. Row 1: color variants — rainbow is the Google-mode default, the other three use only the AI color tokens. Row 2: the aurora effect (Google's live treatment) — the blurred glow breathes, pulsing blur and fading opacity on its own slower cadence under the crisp ring. Row 3: other blur effects — soft diffuses the whole comet into a haze, halo bleeds a wide neon aura, trail keeps the head sharp over a long blurred tail.

A step-by-step narration of what the agent is doing mid-turn — completed steps with checkmarks, the current step with the goo loader and a bold highlight.

A soft, multi-stop mesh built from the AI color ramp (ai-mesh-gradient). Used behind the agent's generating states — image/video generation and the in-canvas working band — to signal AI activity without a harsh flat fill.

How a new screen lands on the canvas: the shell scales in, then the rotating gradient border and status pill take over. Used in the builder while the agent drafts a course step.

The agent's in-canvas generating state: an animated gradient border orbits the screen while a labelled pill names the task — the content stays sharp underneath.

A floating toast that names what the agent is doing — a white pill with the AI blurred-trail send beam. Pass an array of labels to cycle through statuses. Pin it to the viewport with floating, or place it inline over a canvas.

The media-slot loading state: while the agent makes a picture, the media area becomes a violet status-ai surface with a scanning band and a pulsing sparkle. Resolves to the image when ready — the rest of the screen stays editable throughout.

Tappable follow-up prompts the agent offers after a turn.

The primary input: a roomy prompt area over a toolbar — attach + mention on the left, model picker, mic, and send on the right. Submits on Enter (Shift+Enter for a newline). The send-beam aurora loops here for inspection (Google AI Mode style); in product it fires once per submit.

Message bubbles, the thinking state, and the composer assembled into a live agent surface — docked as a sidebar panel. Try sending a message.

Agent replies as plain text; the person in a white card with shadow. User turns can carry an attachment chip.