Skip to content

Agent UX

Signals for AI surfaces: streaming answers and thinking timelines for chat, a dotted status orb for agent state, intent glyphs for prompt-bar slots, and a narrated step conveyor when the work needs words. Same family, different jobs — compose them, don't collapse them.

Chat primitives

Streaming answers, thinking timelines, compact waits, and a chat shell — live demos that play without opening a detail page.

01

Pixel loader

3×3 pixel wait with shimmer label and elapsed timer.

Working0.0s

02

Thinking trace

Expandable traces — steps, reasoning, search, coding.

03

Streaming text

Streamed answer with sources, actions, and follow-ups.

Follow-ups

04

Agent chat

Tabbed chat panel with resolving replies and a composer.

Compare mint chip to last summer

Thinking orb

Six agent states at two tuned sizes. Scrub the playground, then copy the snippet.

State

Size

Theme

Speed

1.00×

import { ThinkingOrb } from "@desk/ui/components/thinking-orb";

<ThinkingOrb state="shaping" size={64} speed={1} />

All states · 64px

working

searching

solving

listening

composing

shaping

Intent glyphs

24×24 dotted SVGs for prompt-bar and op slots. Pick by name from DOT_MATRIX_LOADERS.

Row sweep

row-sweep

Reading or classifying an image row-by-row.

Flux columns

flux-columns

Applying a texture or material to a surface.

Shelf descent

shelf-descent

Placing, filling, or composing a scene.

Rail scan

rail-scan

Browsing or searching the catalogue.

Halo drift

halo-drift

Snapshotting, refining, or orbiting a selection.

Star compass

star-compass

Pairing or answering a comparative question.

Skew drift

skew-drift

Re-ranking or shifting comparative weight.

Prism bloom

prism-bloom

Rendering a bloom / radial compose moment.

Lunar breathe

lunar-breathe

Idle breath — default when no action is active.

Narration

ThinkingLoader cycles step labels with shimmer. Slot an orb or glyph via loader.

Scanning catalogue…
1/4