AI Handoff Control
AI
Agents
Governor
Manage transitions between AI automation and human control. Supports three modes (auto, human, hybrid), contextual information display, and smooth transitions for collaborative workflows.
AI Autopilot Mode
AI handles tasks automatically
Human-AI Handoff
Control how AI and human collaborate
AI Autopilot
AI handles tasks automatically
Human Control Mode
User has full control
Human-AI Handoff
Control how AI and human collaborate
Human Control
You have full control
Hybrid Mode
AI assists, human decides
Human-AI Handoff
Control how AI and human collaborate
AI Processing
Collaborative
AI assists, you decide
Banner Variant
Prominent horizontal display
AI Autopilot
Collaborative
Attention Required
High-risk operation detected
Compact Variant
Minimal inline display
AI Autopilot
Human Control
Collaborative
Props
AIHandoffControl component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
mode* | 'auto' | 'human' | 'hybrid' | — | Current handoff mode |
context | HandoffContext | — | Context information for the handoff |
variant | 'default' | 'compact' | 'banner' | 'default' | Display variant |
transitioning | boolean | false | Whether handoff is currently in transition |
aiProcessing | boolean | false | Whether AI is currently processing |
showContext | boolean | true | Show detailed context panel |
onModeChange | (mode: HandoffMode) => void | — | Callback when mode changes |
onTakeControl | () => void | — | Callback when user requests full control |
onDelegateToAI | () => void | — | Callback when user delegates back to AI |
HandoffContext Type
| Prop | Type | Default | Description |
|---|---|---|---|
task* | string | — | Current task description |
aiConfidence | number | — | AI confidence level (0-100) |
riskLevel | 'low' | 'medium' | 'high' | 'critical' | — | Risk level of the operation |
reason | HandoffReason | — | Reason for handoff (low_confidence, high_risk, user_request, policy_required, complexity, custom) |
customReason | string | — | Custom reason text |
timeInMode | number | — | Time elapsed in current mode (seconds) |
aiActionsCount | number | — | Number of AI actions taken |
humanInterventions | number | — | Number of human interventions |
Usage
Import and implementation example
import { AIHandoffControl } from '@/blocks/ai-transparency/ai-handoff-control'
export default function AIWorkflow() { const [mode, setMode] = useState<'auto' | 'human' | 'hybrid'>('auto') const [transitioning, setTransitioning] = useState(false)
const handleModeChange = async (newMode: HandoffMode) => { setTransitioning(true) // Perform handoff logic await performHandoff(newMode) setMode(newMode) setTransitioning(false) }
const handleTakeControl = () => { handleModeChange('human') }
const handleDelegateToAI = () => { handleModeChange('auto') }
return ( <AIHandoffControl mode={mode} transitioning={transitioning} context={{ task: 'Processing customer requests', aiConfidence: 85, riskLevel: 'medium', aiActionsCount: 42, humanInterventions: 5, timeInMode: 3600, }} onModeChange={handleModeChange} onTakeControl={handleTakeControl} onDelegateToAI={handleDelegateToAI} /> )}Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Three modes: Auto (AI handles), Human (user controls), Hybrid (collaborative)
- Three variants: Default (full panel), compact (inline), banner (horizontal)
- Context display: Show task, confidence, risk level, and statistics
- Confidence indicator: Visual progress bar with color-coded confidence levels
- Risk level badges: Color-coded risk indicators (low, medium, high, critical)
- Handoff reasons: Pre-defined reasons for handoffs with clear labels
- Statistics tracking: Display AI actions, interventions, and time in mode
- Transition states: Visual feedback during mode transitions
- Processing indicator: Show when AI is actively processing
- Expandable context: Collapsible detailed context panel
- Dark mode: Full dark mode support
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
Mode selection buttons are focusableAction buttons use semantic button elementsStatus badges communicate current stateKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between mode buttons and actions |
| Enter / Space | Activate mode selection or action buttons |
Notes
- Mode states indicated by both color and icon
- Risk levels use color coding with text labels
- Consider adding aria-live for transition announcements
- Context panel toggle is keyboard accessible