Components

Stacked sections on hairline dividers that expand and collapse with an animated height and content fade, one or several at a time.

accordion@0.2.0 · React

Types for runs, steps, approvals, messages, and artifacts, plus an event reducer that de-duplicates, reorders, and recovers from snapshots.

agent-run@0.1.1 · React · Vue

A complete agent workspace: streaming conversation, approvals, prompt box, run timeline, active tool call, and artifacts.

agent-workspace@0.2.0 · React · Vue

An inline status for async work whose icon and label transition between idle, working, success, and error.

animated-status@0.1.0 · React

Ask a person to approve or reject an agent action: what will run, then the decision, with duplicate-click protection while it is saved.

approval-card@0.2.0 · React

A file an agent produced: name, type, size, status, an inline preview, and where to open it.

artifact-preview@0.2.0 · React

A compact status label with tinted tones, an optional status dot, and a still live halo for ongoing activity.

badge@0.2.0 · React · Vue

A button with primary, secondary, ghost, and destructive variants, a 100ms press scale, and a loading state that keeps its width.

button@0.2.0 · React · Vue

A hairline surface for grouped content, with header, content, and footer parts and an optional interactive state.

card@0.2.0 · React

Which steps wait on other steps. Selecting a step highlights its upstream and downstream dependencies; focus on a branch to show only its ancestors and descendants.

dependency-graph@0.2.0 · React

A modal window built on Base UI Dialog, with a backdrop, focus trap, a footer action band, and a 220ms enter and faster 150ms exit.

dialog@0.2.0 · React · Vue

A menu of actions opened from a button, built on Base UI Menu, with groups, separators, shortcuts, icons, and disabled items.

dropdown-menu@0.2.0 · React

A compact disclosure with a leading chevron that reveals a region below it, with a CSS-only height animation and content fade.

expandable-panel@0.2.0 · React

The shared graph engine for the graph components: deterministic dagre layout keyed on structure, a React Flow canvas with zoom, pan, and fit-to-view, status icons, and a keyboard listbox.

graph-canvas@0.2.0 · React

Task transfers between agents and people. Actors are nodes and transfers are edges; select a transfer to see who owned the task before and after, and the outcome.

handoff-graph@0.2.0 · React

A text field with a label, helper text, error and busy states, wired up for screen readers.

input@0.1.0 · React

A floating panel anchored to a trigger, built on Base UI Popover, that grows from the trigger and has an optional hairline arrow.

popover@0.2.0 · React

A prompt box that grows with its text: Enter sends, Shift+Enter adds a line, and Stop replaces Send during a run.

prompt-composer@0.2.0 · React

A run's plan, parallel tool calls, approvals, and results as a graph, with zoom, pan, fit-to-view, a details panel, and a keyboard list view with the same information. Budget at 100 nodes and 150 edges: first render under 150 ms and selection under 50 ms on a current laptop; under 500 ms and 200 ms at 4x CPU slowdown.

run-graph@0.2.0 · React

A run's status, a per-step progress strip, and its steps in order on a connected rail, with start times, durations, and errors.

run-timeline@0.2.0 · React

Segmented tabs whose active pill slides between options with a spring.

sliding-tabs@0.1.1 · React

A compact checklist of an agent's plan on a connected rail, with queued, running, succeeded, failed, and skipped steps.

step-list@0.2.0 · React

Chat messages that stream in as Markdown, plus a scroller that follows new text without stealing the reader's scroll position.

streaming-message@0.2.0 · React

Switch between related panels with an underline that follows the active tab on a hairline, sliding on click and jumping on keyboard selection.

tabs@0.2.0 · React

A multi-line text field with a label, helper text, errors, an optional character counter, and optional auto-grow.

textarea@0.1.0 · React

Brief notifications built on Base UI Toast, with success, error, warning, info, and loading types, sliding in from their screen edge.

toast@0.2.0 · React

Show the status and result of an agent tool call.

tool-call-card@0.2.0 · React · Vue

A short label that appears on hover and keyboard focus, built on Base UI Tooltip.

tooltip@0.1.0 · React

A trace's timeline and graph side by side with selection kept in sync, and details for the selected step: timing, attributes, input, output, and connections.

trace-inspector@0.2.0 · React