Skip to content
Sandbox — Catalog & ToolsSprint 26 — v1.4.0

Components, tools, and live generators.

86 agentic pattern components · AI-native component pack · motion token system · 28+ A2UI templates · 16 custom icons. Browse the catalog, generate components with Claude, or build your brand theme.

Agentic Pattern Components

10 core components for human-AI collaboration in treasury interfaces. Each encodes the three-primary color semantics — agency (red), temporal (blue), validation (gold).

AgentIdentityBadgePlayground
FX SentinelEXECUTOR
--ds-color-agency--ds-color-temporal--ds-color-validation
ProvenanceChainPlayground
SOURCEReuters FX Feed
TRANSFORMrisk-model-v4.py
INFERENCEAnalyst Review
--ds-color-validation--ds-text-secondary
StreamingResponsePlayground
Analyzing 14 FX positions across 6 currency pairs. Elevated EUR/USD volatility detected — VaR breach probability 34%.
COMPLETE117 chars
--ds-color-temporal--ds-text-primary
ApprovalQueuePlayground
1 PENDING APPROVAL
--ds-color-validation--ds-color-agency
AgentConflictPanelPlayground
CONFLICT
Agents disagree
Review positions and select one, or defer to orchestrator
Re: Hedge ratio disagreement
Risk SentinelEXECUTOR
ConfidenceHIGH (91%)
Increase hedge to 85%
Yield OptimizerADVISOR
ConfidenceMODERATE (74%)
Reduce hedge to 60%
2 agents disagree — select a position
--ds-color-agency--ds-color-validation
ChartInteractionLayerPlayground
AGENT HIGHLIGHTFX Sentinel
EUR/USD
Rate
1.084
Δ 1D
+0.34%+0.34
--ds-color-agency--ds-color-validation
ConfidenceMeterPlayground
Hedge RecommendationMODERATE (76%)
--ds-color-validation--ds-color-outcome-positive
ConsentFlowPlayground
--ds-color-validation--ds-color-agency
EscalationBannerPlayground
ESCALATION — HUMAN REQUIREDRisk Sentinel

Approaching intraday VaR limit

SUGGESTED ACTION

Review and approve position reduction

--ds-color-validation
ThinkingStatePlayground
REASONING0s
Loading FX rates…
Running VaR model…
--ds-color-temporal