HITL Kit

Component library

The HITL pattern language, as real components.

Every primitive below is the physical embodiment of a claim from the paper. Interactive. shadcn-compatible. Copy-paste ready.

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. Click any to expand.

searchkind="search"
reviewkind="review"
writekind="write"

Subagent Status

Six discrete agent execution states. The running state animates. Use in any card that wraps an in-progress agentic task.

idlestatus="idle"

Research Agent

Climate Policy workspace

idle
runningstatus="running"

Research Agent

Climate Policy workspace

running
completedstatus="completed"

Research Agent

Climate Policy workspace

completed
errorstatus="error"

Research Agent

Climate Policy workspace

error
skippedstatus="skipped"

Research Agent

Climate Policy workspace

skipped
cancelledstatus="cancelled"

Research Agent

Climate Policy workspace

cancelled

MiniTrace

Step-by-step thought, action, result trace renderer. Each step is collapsible to reveal detail. Makes agent reasoning transparent. A visible implementation of the supporting-facts requirement from §3.3 of the paper.

Search trace3 steps. Click any row to expand.

AI Generation Scale

Five-segment ordinal scale indicating AI involvement in a piece of work. Interactive. Click any segment to select. Embodies the scaffolding and expertise-matching principle from Dhillon et al. (2024).

Three configurationsClick segments to adjust

Current: Human

Current: Collaborative

Current: AI

Context Chips

Pill chips representing context attached to an agent run. Notes, files, URLs. Removable. Overflow truncation built in.

Context stripClick × to remove chips
AR6 temperature finding
IPCC AR6 Synthesis.pdf
eu-ets.europa.eu
Price corridor note
Carbon Markets 2024.pdf

QA Flow

Multi-question approval card. Single-choice, multi-select, and a freeform text field. Submits to a confirmed state.

QA formFill out and hit Continue
Preferred mechanism?
Implementation challenges?
Other notes

Writing Agent

Compound widget for a draft-in-progress document. Shows title, target section, word range, evidence notes, and the six status states.

Write doc agentClick status chips to cycle
Write Doc Agent
Idle
TitleClimate Policy Analysis
TargetSection 2
Word range400–600

Evidence notes

AR6 temperature overshoot
Price corridor $50/tCO₂
EU ETS reform outcomes

Research Agent

Three operating modes. Create (new session), Follow-up (continue a session), Read URL (extract from a single page).

Research agentSwitch modes in the top right
Research Agent
ProfileAcademic, Climate Policy
EngineSemantic Scholar + Web
DepthDeep (5 hops)

Batch Approval Queue

Sequential approve-reject flow across mixed agent items. Auto-advances to the next item. Resolves to a summary state.

Kitchen sink batch5 items. Step through each decision.
Search: carbon pricing 2024
Write: Section 2 introduction
Research: IPCC AR6 findings
QA: Verify citation accuracy
Read: eu-ets.europa.eu

Search Result Cards

Ranked result cards with metadata, snippet, and relevance bar.

Result #1Nature Climate Change, 2023 · 97%
1

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...

97%
Result #2arXiv, 2024 · 91%
2

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...

91%
Result #3Science, 2023 · 88%
3

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...

88%
Result #4Energy Economics, 2024 · 84%
4

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...

84%

Approve / Reject

The core binary decision row used across review, download, and notes panels. Three terminal states. Pending, approved, rejected.

Verify citation accuracyIPCC 2023 · p. 12
Confirm highlighted quotePolicy Brief §3.1
Approve section for exportWriting · Section 2
Download: Carbon Pricing paperNature Climate, 2023

Shared Primitives

The atomic palette. Accent swatches, approval badge variants, and approve and reject rows.

Shared paletteInteractive

Accent colors

Violet
Amber
Blue
Emerald
Rose

Approval badges

pendingapprovedrejected

Approve / reject

Item A
Item B
Item C

Diff Result

Before/after diff for a proposed text or code edit. Per-hunk red/green strips. Drop into any agent loop where the human should see exactly what will change before it lands.

Markdown rewriteClick Apply edit to confirm
Tighten introduction paragraphRemoves hedging, names the thesis directly
markdown
@ line 1
It seems like the central question of this paper might be how AI systems should be evaluated when they are deployed in collaborative settings.
This paper argues that AI systems must be evaluated against collaborative performance, not autonomous task completion.

Citation Result

Single source-backed citation card. Claim on top, source attribution below, expandable supporting quote, and an optional confidence badge.

Cited claimExpand the supporting quote

Roughly 95% of enterprise generative-AI pilots fail to reach production deployment.

Challapally et al.·2025·MIT NANDA78% conf
The GenAI Divide: State of AI in Business 2025

Editable Plan

Multi-step plan the human can rename, reorder, add to, or delete from before the agent executes. Steps marked locked cannot be removed.

Research planEdit any unlocked step
Draft research summaryReorder, edit, or remove steps before the agent runs

Tool Call Preview

Preview a tool call (name, args, optional rationale and signals) so the human can approve or reject before execution. Pairs with the gates layer for confidence, cost, and scope checks.

Outbound emailExpand Arguments to inspect
send_email()tool call
Drafted reply to the client thread; confirming high-stakes outbound before sending.
86% conf$0.0012write:emailsend:external