Cards
Agent SLA Scorecard
A compact production scorecard for tracking agent success, latency, escalations, and remaining breach budget.
agentsslaobservability
Installation
Copy and paste the code into your project.
Accessibility notes
Every SLA metric includes its exact value and target in text, while health status is labeled explicitly.
Agent SLA
Production quality
- Task success
- 98.4%
- Target > 97%
- P95 latency
- 1.8s
- Target < 2.5s
- Escalations
- 3.2%
- Target < 5%
Monthly breach budget2 / 20
Preview accent
TypeScript
const metrics = [{ label: "Task success", value: "98.4%", target: "> 97%" }, { label: "P95 latency", value: "1.8s", target: "< 2.5s" }, { label: "Escalations", value: "3.2%", target: "< 5%" }];
export function AgentSlaScorecard() {
return <section><h3>Production quality</h3><dl>{metrics.map((metric) => <div key={metric.label}><dt>{metric.label}</dt><dd>{metric.value}</dd><dd>Target {metric.target}</dd></div>)}</dl></section>;
}Usage
<AgentSlaScorecard />Related components
component.tsx
<Button glow> Ship it </Button>
Cards
Copy Code Card
A compact code surface for snippets, component recipes, and copy actions.
codecopysnippet
Run estimate
$0.35cached
- Input
- $0.12
- Output
- $0.28
- Cache
- -$0.05
Cards
Cost Estimate Card
A compact billing estimate with line items for token-heavy AI runs.
costbillingtokens
No variants yet
Create the first prompt variant to compare quality, cost, and latency.
Cards
Empty State Panel
A friendly empty state with a primary action for variant, file, or project creation.
emptystatecta