Each component exposes typed props, examples, states, playground controls, and render routes.

Compositions with contracts

Components assemble primitives and approved lower-tier components. They can own deterministic local behavior, but they do not own CSS or app-specific product policy.
33 registered
registry backed

Navigation and command surfaces

Top-level navigation, footer, search, and command entry points for agentic interfaces.

Nav

Responsive top-level navigation assembled from Concrete layout and link primitives.
navigation
Open

Footer

Generic footer composition for brand copy, grouped links, actions, and an aside slot.
navigation
Open

Command menu

Searchable action and navigation listbox with grouped items, keyboard navigation, shortcuts, loading, and empty states.
navigation
Commands
↑↓navigate↵open
Open

Transcript surfaces

Role-aware message surfaces for multiplayer and multi-agent transcripts.

Message

Role-aware message wrapper with avatars, plain or bubble surfaces, metadata, and subtle action toolbars.
surface
RL
Rubricnow
I found the stale fixture and the missing tool permission edge.
Open

Explainer diagrams

Concept frames and graph canvases for editorial and educational explanation.

Diagram canvas

Interactive explainer canvas with DOM nodes, supporting items, SVG edges, pan, zoom, fit, and minimap.
diagram

Request flow

Editorial explainer graph for request routing, context, model synthesis, and streamed output.

Open

Data surfaces

Typed KPI, chart, table, meter, and diagram components for dense product data and generated UI.

Metric card

KPI tile composed from Stat, Delta, Sparkline, Indicator, and Concrete surface primitives.
data

Agent runs

14,842+18.6%vs last week
Sparkline

Accepted agent runs across production workspaces.

Intervention rate

4.2%-2.4%blocked
Sparkline
Open

Meter

Progress summary card that composes Concrete linear and ring progress primitives.
data

Usage

72%
Target 80%Workspace command budget

Review

58%
Policy confidence
Open

Line chart

Multi-series trend chart with Concrete grid, endpoint, target, and legend language.
data

Agent runs

Agent run volume with accepted output overlay.

ready
Agent runsAccepted
Open

Area chart

Soft filled trend chart for volume, confidence, and generated UI previews.
data

Execution trend

Accepted runs and total executions.

ready
Agent runsAccepted
Open

Bar chart

Categorical comparison chart with optional comparison bars and horizontal rails.
data

Capability score

ready
RouterMemoryToolsEval
Open

Stacked bar chart

Composition chart for small category stacks across time or groups.
data

Run composition

ready
SearchReasoningTools
Open

Donut chart

Part-to-whole ring summary with controlled center metric and thickness.
data

Workload split

ready
64%Router
Router52Memory38Tools44Eval31
Open

Heatmap

Two-axis intensity grid for compact activity and density summaries.
data

Run intensity

ready
MonTueWedThuFriAM1220283644Mid1725334149PM2230386454
Open

Chart

Backward-compatible discriminated union wrapper for every focused chart component.
data

Agent runs

Agent run volume with accepted output overlay.

ready
Agent runsAccepted
Open

Data table

Dense typed table with sortable columns, selection, search, filters, pagination, and rich cells.
data

Evaluation runs

Typed cells stay compact while still supporting signals and microvisuals.

Router contractShipping
+18.6%7d
Tool routerFeatured
+9.2%7d
Memory recallReview
+0.8%7d
Policy evalBlocked
-4.4%7d
Page 1 / 10 selected
Open

Flow diagram

Routed node and edge diagram for agent plans, systems, memory flows, and tool pipelines.
data

Agent execution flow

A compact map of context, planning, tool execution, and final synthesis.
retrieveshapeexecutesynthesizePromptinputContextmemoryPlantyped stepsToolssafe callsAnswerresponse
contexttool pathselected
Open

Agent process artifacts

Subdued, expandable artifacts for visible reasoning, validation, and tool execution.

Validation summary

Top-level form feedback with status icon, field-linked items, compact copy, and optional action slot.
feedback
Review requiredResolve the listed fields before saving the workflow.
  • OwnerAssign a responsible operator.
  • Budget limitEnter a value between 1 and 100.
  • Reference packetTwo files are attached.
Open

Reasoning message

Subdued expandable reasoning line for visible agent progress, scoped steps, and streaming state.
feedback
Thinking3 stepsChecking schema and render boundaries before patching.
  1. Context

    Read the transcript, active scope, and current render route.

  2. Tools

    Selected the smallest commands needed to verify the change.

  3. Patch

    Applying the focused interface change.

Open

Tool call message

Collapsible tool execution artifact with status, duration, optional input code, and output.
feedback
rgrunning
ts
rg -n "composer" src
Open

Form and editor shells

Larger component shells that standardize dense product form rhythm without owning product policy.

Settings panel

Dense settings form composed from shell, sections, rows, and slotted primitive controls.
layout

Agent workspace

Dense settings rows keep labels, explanatory copy, metadata, and controls aligned.
Live

Runtime

Core behavior for generated work and local tools.
ToolsPermit tool calls from approved command surfaces.
on
Parallel workersMaximum active workers for one request.
max 12
Default modelFallback model used when a prompt does not pin a route.

Context

Optional local context attached to every run.
Reference packetResearch packet, spec, or evaluation fixture.
Release channelWhere generated interface updates are promoted.
preview
Open

Form dialog

Inline or fixed modal form surface inside a dimmed stage.
layout
Open

Form drawer

Inline or fixed side-sheet form surface for inspect-and-edit workflows.
layout
Open

Composer

Agentic message input with token chips, mentions, commands, attachments, formatting, keyboard submission, and deterministic value output.
layout
arihan/eval triage-v2router-v2.ts · 3.2 KB
Send message⌘↵
Open

Input systems

Field-level compositions for typed values, choices, dates, times, numbers, ranges, and uploads.

Search bar

Compact single-line command input with removable scope tokens, keyboard hint, action slots, and optional menu slot.
form
Open

Password input

Text input composition with secure visibility toggling and field validation chrome.
form
Use a passphrase or generated credential.
Open

Multi select

Tag-backed option picker with local filtering, disabled options, max selection, and removable values.
form
Tags keep generated UI, product surface, and research coverage explicit.
Open

Date picker

Single-date picker with calendar panel, month navigation, min/max bounds, and controlled value support.
form
Locks the evaluation start before routing begins.
Open

Date range picker

Range picker for start/end ISO dates with calendar selection and in-range treatment.
form
Controls when the evaluation runner can collect samples.
Open

Time picker

Compact HH:mm picker with interval-generated options and controlled value support.
form
Runs after the model batch is hydrated.
Open

Number stepper

Inline numeric input with decrement/increment controls, min/max, and step support.
form
Parallel agents available to this run.
Open

Range slider

Two-thumb range adjustment with an aligned filled rail and controlled tuple value.
form
7294
Keeps only high-confidence model outputs in the review queue.
1248
Open

File upload

Local upload queue composition with dropzone, file validation, progress rows, and remove actions.
form
Upload filesDrop PDFs, images, or source packets.
Q2_report.pdf2.3 MB
source_packet.csv898 KB - 64%
Open

Upload compositions

Upload surfaces specialized around local previews and queue state.

Image upload

Image-specific upload composition with previews, accept filtering, and avatar/grid kinds.
media
Upload imagesDrop images here or choose from disk.
interface-reference.png820 KB
flow-detail.png605 KB - 64%
Open