The UI layer for agent products

Shell, Panel, Inset, IconTile and ShellHeader — the borderless layers every component is framed with.

Foundations

Silver primary, secondary, quiet and danger buttons in two sizes, with icons, loading and icon-only buttons.

Foundations

Switch, borderless Checkbox with a mixed state, and a RadioGroup with arrow-key navigation.

Foundations

Tinted status pills in five tones with icon or dot, plus a mono Tag for models, branches and transports.

Foundations

Radio-style segmented switch with a sliding active pill that jumps instantly from the keyboard.

Foundations

Progress and meter bars in five tones with optional stripes, plus a stacked SegmentedBar.

Foundations

Odometer-style number: each digit rolls to its new value, units and separators stay put.

Foundations

Borderless TextField, SearchField with clear and TextArea, with label, description and error wiring.

Foundations

Hint anchored to its trigger: scales in from the trigger side, opens instantly once one is warm.

Foundations

Dropdown and right-click menus — items with icons and shortcuts, submenus, checkable items and a destructive group.

Foundations

A panel anchored to its trigger — grows from it, closes on outside click or Esc, keeps focus inside.

Foundations

Centered dialog and edge sheet (drawer) — focus trap, scroll lock, Esc and backdrop to close.

Foundations

Notifications that stack, expand on hover, pause while hovered, swipe or click to dismiss, with actions.

Foundations

Select and searchable combobox — options with icons and hints, groups, keyboard typeahead.

Foundations

Tabs with panels — sliding indicator, keyboard navigation, lazy panels and counts.

Foundations

Accordion and single collapsible sections with smooth height animation.

Foundations

Avatars for agents and people — initials or image, presence and activity state, stacked groups.

Foundations

Placeholders for answers, lists and cards while they load.

Foundations

Single and range sliders with steps, marks and value labels — for temperature, length, budgets.

Foundations

Keyboard shortcut hints that adapt to the platform — Cmd on Mac, Ctrl elsewhere.

Foundations

Spinner and thinking indicators in a few sizes, with an accessible label.

Foundations

Empty, no-results and error states with an icon, message and actions.

Foundations

Calendar and date picker — month grid, ranges, keyboard navigation and min / max.

Foundations

Drag-and-drop file target for a chat — accepts types and size limits, shows why a file was rejected.

Foundations

Assistant message with token streaming, collapsible reasoning, citation chips and copy / retry actions.

Conversation

Live activity line for a working agent — current step, rotating detail, elapsed time and a stop action.

Conversation

Switch between regenerated answers and edited prompts — arrows, a mini branch map, and direction-aware swaps.

Conversation

Thumbs up or down under an answer; a down vote opens reason chips and a note, then settles into a thank-you.

Conversation

Prompt input with Ask / Plan / Act modes, a context tray with token counts and messages that queue while the agent works.

Conversation

Agent asks with choice cards, marks its own suggestion and reason, and accepts a pick, several picks or free text.

Conversation

The conversation itself — user and assistant turns, grouping, date dividers, unread marker and a jump-to-latest pill.

Conversation

A sent prompt with attachments, edit-in-place and resend, copy, and a delivery state.

Conversation

Chat history for a sidebar — search, pinned and dated groups, rename inline, archive and delete with undo.

Conversation

Starter prompts for an empty chat and follow-up chips under an answer.

Conversation

Images and files attached to a prompt — thumbnails, type and size, upload progress, retry and remove.

Conversation

Code in an answer — filename, language, line numbers, wrap toggle, copy and collapse for long snippets.

Conversation

Citations behind an answer — numbered footnotes with hover previews and a panel of every source used.

Conversation

Triage pending tool calls by risk: select several, grant once, for the session or always, and undo from the resolved log.

Tools & Approvals

Inline chat card for a tool call: name, collapsible JSON args, status, duration and a result preview.

Tools & Approvals

Split review: a file tree on one side, hunks on the other — keep or revert each hunk, then apply the result.

Tools & Approvals

Streaming command output with stdout / stderr lines, exit status, duration, copy and stop.

Tools & Approvals

Connected MCP servers with status, auth prompts and reconnect — expand one to switch individual tools on or off.

Tools & Approvals

A chart the agent answers with — bar, line, area or donut, with tooltips, legend toggles and animated data.

Interactive Answers

A distribution as stacked dots — every sample visible, median and p95 marked, samples past a limit such as a timeout flagged.

Interactive Answers

A meter drawn as ticks around an arc, with a target marker and the shortfall to it in red — success rates, SLOs, budgets.

Interactive Answers

Rows of dot strips with two series mirrored around a line — compare rounds or weeks on one axis, with pinned columns and notes.

Interactive Answers

A cycle as rings of dots — hours of the day or days of the week, stacked by series, with the headline in the middle.

Interactive Answers

A fit field — candidates, bots or options placed by score around a centre, grouped into sectors, with threshold rings.

Interactive Answers

Scores across several axes as a polygon, with a dashed bar to meet and each member's values as dots on the spokes.

Interactive Answers

Stacked daily columns with one series hanging below zero on its own scale — triaged vs escalated, solved vs handed off.

Interactive Answers

What a key, agent or tool can reach, hop by hop around a centre, with the affected paths in red.

Interactive Answers

Isometric stacked bars in two rows — the main volume behind, rework or failures in front.

Interactive Answers

A density map of two measures in hexagons, split by a threshold line — retrieved vs dropped, fast vs slow.

Interactive Answers

Tabular results — sortable columns, filter, pagination, row selection and copy as CSV.

Interactive Answers

KPI cards with rolling numbers, deltas and sparklines for a quick summary answer.

Interactive Answers

A form the agent asks the user to fill — fields, selects, validation and a submitted state.

Interactive Answers

A row of result cards — image, title, meta and an action — with snap scrolling and arrows.

Interactive Answers

Pick a time the agent proposed — days, free slots, time zone and a confirm step.

Interactive Answers

A summary of what the agent is about to do — line items, totals and confirm or edit before it acts.

Interactive Answers

Structured output as a collapsible tree — types, counts, search, copy path and copy value.

Interactive Answers

A side canvas for what the agent made — live preview and source tabs, version history and download.

Interactive Answers

Agents working in the background as a grid of live tiles or a compact dock that expands into the selected agent.

Planning & Execution

Checkpoints the agent made along the way — scrub through turns, see what changed, restore to any point.

Planning & Execution

Flame graph of an agent run with click-to-zoom spans, plus a breakdown of where time, tokens and cost went.

Observability

An eval run as a grid of cases — pass, fail or regressed vs the baseline — with per-case input, expected and actual.

Observability

Token usage by segment — system, history, files, tools — with a near-limit warning and a compact action.

Settings & Usage

What the agent remembers about the user and project — search, scopes, inline edit and forget.

Settings & Usage

Tokens and cost over time, split by model, against a monthly budget.

Settings & Usage

Requests and tokens per minute as refilling buckets, with a retry-after countdown and queued calls when throttled.

Settings & Usage