Components
Every primitive in the Agentfold kit, rendered with the live tokens. Toggle the theme to check both modes.
Buttons
Five variants and three sizes. Pass href to render a Link. Icons inherit size-4.
Badges & status
State is never color alone: Badge takes a dot, Status pairs a dot with a text label.
Badge tones
With dot
Status
Inputs
Field wires a label to its control by id. Controls share one height and focus ring.
Shown in traces and the run list.
Tabs
Underline tabs with optional counts. Arrow keys move between tabs.
Recent activity, success rate and cost for this agent.
128 runs in the last 24 hours.
4 evaluation suites, last run 2 hours ago.
Model, tools, memory and rate limits.
Table
Compact 44px rows. Wide tables scroll inside their container, never the page.
| Run | Agent | Status | Duration | Cost |
|---|---|---|---|---|
| run_8f2c1a | Support Triage | Succeeded | 1.8s | $0.012 |
| run_8f2c19 | Contract Analyst | Failed | 14.2s | $0.091 |
| run_8f2c18 | Onboarding Guide | Succeeded | 720ms | $0.002 |
| run_8f2c17 | Invoice Reconciler | Running | 4.2s | $0.024 |
| run_8f2c16 | Sales Researcher | Succeeded | 9.9s | $0.088 |
Avatars
Initials with a stable tone derived from the name. Three sizes.
Kbd
Keyboard hints for shortcuts in menus, tooltips and empty states.
- Command palette⌘K
- Run agent⌘↵
- New agentC
- Go to runsGR
Progress
Thin meter with an accessible label. Tone follows state, not data series.
Code block
Monospace block with an optional language label. Scrolls horizontally.
import { Agentfold } from "@agentfold/sdk";
const af = new Agentfold({ apiKey: process.env.AGENTFOLD_API_KEY });
const run = await af.runs.create({
agent: "support-triage",
input: { ticketId: "T-48213" },
});Empty state
Explain what belongs here and offer the next step.
No evaluations yet
Run your agent against a dataset to track quality over time and catch regressions before they ship.
Modal
Native dialog with focus trap. Closes on Escape and backdrop click.
Try Tab to cycle focus, Escape to close.
Menu
Click-to-open action menu. Closes on outside click and Escape.
Charts
Series colors in fixed order 1→4, one y-axis, legend for two or more series. Hover any chart for values.
StatTile + Sparkline
Runs · 24h
34.8k
▲ 12%Error rate
1.2%
▲ 0.4%p95 latency
2.1s
▼ 8%Spend today
$93.40
▲ 8%LineChart · runs per hour
- Today
- Yesterday
BarChart
Donut
- Atlas-4 Turbo57%
- Atlas-4 Mini28%
- Atlas-412%
- Lyra-2 Embed4%
Sparkline · inline
- Support Triage98.6%
- Invoice Reconciler96.1%
- Sales Researcher94.4%
- Code Reviewer91.8%