HITL-AI Component Sheet
Interactive reference — all components live
HITL Interrupt Cards
Human-in-the-loop interrupt cards rendered inline in a chat thread. Three semantic variants — each has idle, expanded, confirmed, and dismissed states.
Search
kind="search" — click to expand
Review
kind="review" — click to expand
Write
kind="write" — click to expand
Subagent Status Cards
Six discrete agent execution states. The running state animates. Use in any card that wraps an in-progress agentic task.
Idle
status="idle"
Research Agent
Climate Policy workspace
Running
status="running"
Research Agent
Climate Policy workspace
Completed
status="completed"
Research Agent
Climate Policy workspace
Error
status="error"
Research Agent
Climate Policy workspace
Skipped
status="skipped"
Research Agent
Climate Policy workspace
Cancelled
status="cancelled"
Research Agent
Climate Policy workspace
MiniTrace
Step-by-step thought → action → result trace renderer. Each step is collapsible to reveal detail. Used to make agent reasoning transparent.
Search trace
3 steps — click any row to expand
AI Generation Scale
5-segment ordinal scale indicating AI involvement in a piece of work. Interactive — click any segment to select. Shows multiple configurations.
Three configurations
Click segments to adjust
Current: Human
Current: Collaborative
Current: AI
Context Item Chips
Pill chips representing context attached to an agent run — notes, files, and URLs. Removable. Overflow truncation built in.
Context strip
Click × to remove chips
QA Flow
Multi-question approval card: short answer, single-choice, multi-select, and a freeform other field. Submits to a confirmed state.
QA form
Fill out and hit Continue
Preferred mechanism?
Implementation challenges?
Other notes
Search Result Cards
Ranked result cards with gradient rank indicator, metadata, snippet, and relevance bar. Used in the Search right panel.
Result #1
Nature Climate Change, 2023 · 97% relevance
Carbon Pricing Mechanisms and Emissions Outcomes
Stavins, R., Stowe, R., Comstock, M.
Empirical analysis of 40 carbon pricing schemes across 30 jurisdictions reveals that price levels above $50/tCO₂ are associated with meaningful emissions reductions in the power sector...
Result #2
arXiv, 2024 · 91% relevance
Just Transition Frameworks in Coal-Dependent Regions
Newell, P., Mulvaney, D.
A systematic review of 28 coal phase-out programmes finds that regions with co-designed transition plans achieved 34% higher re-employment rates within 24 months...
Result #3
Science, 2023 · 88% relevance
Net Zero Pledges: Verification and Accountability
Höhne, N., Gidden, M., den Elzen, M.
Of 196 national net zero pledges examined, only 31% include robust interim milestones and independent verification mechanisms aligned with 1.5°C pathways...
Result #4
Energy Economics, 2024 · 84% relevance
EU Emissions Trading System Post-Reform Price Dynamics
Borghesi, S., Flori, A.
The Market Stability Reserve mechanism introduced in 2019 has demonstrably reduced permit surplus, contributing to a tripling of EUA prices from 2018 to 2023...
Approve / Reject Pattern
The core binary decision row used across review, download, and notes panels. Three terminal states: pending, approved, rejected.
Verify citation accuracy
IPCC 2023 · p. 12
Confirm highlighted quote
Policy Brief §3.1
Approve section for export
Writing · Section 2
Download: Carbon Pricing paper
Nature Climate, 2023
Batch Approval Queue
Sequential approve/reject flow across mixed agent items. Auto-advances to the next item. Resolves to a summary state.
Kitchen sink batch
5 items — step through each decision
Design Tokens & Accent Colors
Semantic color system and accent mapping. All tokens are CSS variables from shadcn/ui, resolved automatically in dark mode.
Accent color map
Kind → color → bg/border/text triplet
CSS variable reference
All tokens resolve via shadcn/ui globals.css
bg-backgroundPage and panel backgroundsbg-cardElevated surfacesbg-mutedSubtle fills, hover statestext-foregroundPrimary texttext-muted-foregroundLabels, secondary textborder-borderAll dividers and outlinesbg-primaryCTAs, send buttons, active states