Eidetic

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

PropTypeDefaultDescription
mode*'auto' | 'human' | 'hybrid'Current handoff mode
contextHandoffContextContext information for the handoff
variant'default' | 'compact' | 'banner''default'Display variant
transitioningbooleanfalseWhether handoff is currently in transition
aiProcessingbooleanfalseWhether AI is currently processing
showContextbooleantrueShow detailed context panel
onModeChange(mode: HandoffMode) => voidCallback when mode changes
onTakeControl() => voidCallback when user requests full control
onDelegateToAI() => voidCallback when user delegates back to AI

HandoffContext Type

PropTypeDefaultDescription
task*stringCurrent task description
aiConfidencenumberAI confidence level (0-100)
riskLevel'low' | 'medium' | 'high' | 'critical'Risk level of the operation
reasonHandoffReasonReason for handoff (low_confidence, high_risk, user_request, policy_required, complexity, custom)
customReasonstringCustom reason text
timeInModenumberTime elapsed in current mode (seconds)
aiActionsCountnumberNumber of AI actions taken
humanInterventionsnumberNumber 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 components

This 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 state

Keyboard Navigation

KeyAction
TabNavigate between mode buttons and actions
Enter / SpaceActivate 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