Patterns

5-level agency scale from autonomous to human-controlled

Layered agency visualization with progress meters

Agent identity card with trust level, status, and expandable permissions

Force-directed graph of agent relationships and communication

Chronological log of agent actions with status filtering

Three-surface agent identity signal — inline @mention chip, card with capabilities, full sidebar panel. Encodes role, execution state, and approval-gated capabilities using semantic tokens.

Non-intrusive background activity indicator. Shows agents working without demanding attention. Three variants: dot (toolbar), strip (bottom bar), tray (collapsible side panel).

Chronological feed of agent actions, tool calls, decisions, and state transitions. Each entry carries type, actor, description, and relative timestamp.

Inline confidence bar for a single agent output. Renders a colored progress bar with optional numeric label. Color maps to outcome tokens.

Animated loading indicator communicating an agent is actively processing. Supports text label, step counter, and elapsed time. Uses temporal color.

Expandable tool call log with input/output/error panels

MCP server health dashboard with tool listing

Formatted tool execution result with status and duration

Conversational message bubble for human or AI sender

Streaming LLM output with temporal cursor. Displays content immediately — no fake simulation. StreamingDot disappears instantly on completion.

Token budget visualization showing context utilization

Data source citation with type icon, inline freshness timestamp, and stale indicator (DAN-17)

AI model picker with capability comparison

Microphone trigger with integrated waveform animation. States: idle, listening (agency red), processing (temporal blue), done, error. Waveform bars animate to real or simulated audio amplitude while listening; freeze and pulse during STT processing.

Live speech-to-text output with per-segment confidence signaling. Low-confidence words are underlined in gold (validation) with a confidence pill. Temporal blue border while transcribing, gold for low-confidence final output, error red for STT failure.

Compact audio playback with waveform visualization. Played portion shown in temporal blue; unplayed in border-structure. Click waveform to seek. Supports controlled and uncontrolled modes. States: idle, playing, paused, loading (skeleton bars), error.

Queue of pending human approvals with priority ordering

Multi-step consent wizard with step indicator

UI for correcting AI output with diff preview

High-priority alert banner for human escalation

Visual indicator of active guardrails and safety constraints

Containment unit for agent errors — severity-coded card with recovery actions

Recovery breadcrumb timeline showing every step an agent attempted after hitting a dead end

Partial completion panel — agent did N of M steps, human needed on step K

Color-coded uppercase badge for the six canonical AI interaction states (loading, thinking, acting, confirming, error, recovery)

Animated dot indicator for AI interaction states — CSS-only animations with prefers-reduced-motion support

Linear step sequence for documenting agent interaction flows — shows state badge, copy, and annotation per step

Pause/resume control for in-flight agents with execution state preservation — shows step count and last completed action when paused

Mid-execution goal redirect — shows agent progress, struck-through original goal, and preview of new goal before confirming

High-stakes override with consequence preview and mandatory acknowledgment — no blind overrides, consequences always shown first

Scannable grid of agents × capability dimensions — blue=granted, gold=conditional, red=denied — designed for treasury dashboards at 3am

Single permission grant card with conditions (time-bounded, value-bounded, approval-gated), audit trail toggle, and revoke trigger

Two-step revocation ceremony: Step 1 shows task impact preview (will-fail / may-degrade), Step 2 requires written reason — non-repudiable audit trail

Structured justification form for human overrides of agent decisions. Captures reason category, free-text rationale, and acknowledges accountability.

Card surface for human review requests from an agent. Shows the decision context, confidence, urgency level, and approve/reject actions.

Canonical 'agent needs a human' surface unifying the AG-UI interrupt model and the A2A input-required TaskState behind a protocol adapter prop. Validation-gold frame (ReviewRequestCard treatment); response buttons meet the 44px touch-target floor.

Immutable action log with integrity hash chain

Linked chain of data sources showing transformation provenance

Wrapper for agent-rendered generative-UI output: provenance chip rail, agency-red left marker, validation warnings, and a streaming state

Visible, honest fallback when a generative-UI action requests a component outside the approved catalog

Visual boundary between vault permission zones

Grid of resource-permission grants for agent authorization

Labeled confidence gauge with low/moderate/high qualifier

Time-based scale showing recency and freshness

Multi-dimensional certainty visualization. Shows uncertainty fingerprint across epistemic, aleatory, temporal, and consensus dimensions. Distinct from ConfidenceMeter (single-axis).

Traceable action attribution receipt. Shows decision authority, executing agent, human approver, confidence at decision time, and evidence used. Mandatory for consequential agentic actions.

Inline citation block listing the evidence sources an agent used. Each entry has source name, type, confidence score, and retrieval timestamp.

Compact hop-chain tag showing data lineage from source to consumer. Each hop has a system name and optional transformation type.

Composite trust score display with breakdown by factor (accuracy, recency, source quality, consensus). Score maps to outcome color tokens.

Sequential validation pipeline display. Each step shows rule name, result (pass/fail/warning/pending/skipped), and optional message. Used for data quality and policy gates.

Side-by-side reconciliation diff — expected vs actual with match/break/tolerance/missing status per row and delta values

Cryptographic audit attestation display — signer, subject, full hash, algorithm, verified/invalid/pending status, compact inline variant

Agent-to-UI renderer — accepts declarative nodus:* component specs and renders the appropriate Nodus component

Agent-to-agent task handoff visualization with protocol steps

Ordered task list with status tracking and priority

SSE stream subscription hook — returns { chunks, status, latency, start, reset }. Simulates token-by-token delivery with configurable TTFT, chunkInterval, and chunkSize.

Live FX position tick hook — returns { positions, lastUpdate, delta, running, pause, resume }. Configurable volatility and tick interval.

Agent status polling hook — returns { agents, lastPing, stale, ping }. Marks agents stale after configurable staleness window. Used in multi-agent orchestration views.

Pipeline view of a multi-agent workflow. Shows each agent step with status (queued/active/done/failed/blocked/skipped), duration, and dependency connectors.

Badge for the nine A2A protocol TaskStates (submitted, working, input-required, auth-required, completed, failed, canceled, rejected, unknown). Extends the StateBadge anatomy with protocol-grouped semantic colors; exports a taskStateGroup helper for branching on active/interrupted/terminal.

Vertical rail rendering one AG-UI run as lifecycle phases: RunStarted, StepStarted/StepFinished segments, and a terminal cap (finished/interrupt/error). Supports one level of nested child runs (parentRunId concept). Composes the AgentTimeline track language with TaskStateBadge-consistent colors.

AG-UI shared-state inspector: renders a StateSnapshot as a collapsible tree with RFC 6902 JSON Patch ops (StateDelta) highlighted in place — temporal tint on patched values, agency accent on agent-written path labels, strikethrough ghost rows for removes. Optional before/after snapshot toggle and prev/next history stepper. Malformed patch entries render as warning rows, never crashes.

Single A2A Task detail surface mirroring the spec's Task object: identity header (task id + contextId + TaskStateBadge), role-turned message history in ChatMessage conventions, artifact list delegating each artifact to ArtifactViewer, and a mono key/value metadata block. Temporal spine — a task is a thing moving through time.

Part-type-aware renderer for the A2A Artifact model ({artifactId, name?, parts}): text parts as a typographic block, data parts as DataList-convention key/value rows, file parts as a mediaType + uri chip (never fetched), unknown kinds as a warning row. Validation-gold accent — an artifact is enriched output. The appending prop shows a StreamingDot tail while artifact-update appends arrive.

Collapsible tree of reasoning steps with depth indicators

Single reasoning step with type indicator and content

In-progress LLM reasoning indicator with temporal pulse, elapsed timer, and optional chain-of-thought trace

Side-by-side or inline diff of iteration changes

Vertical branching logic tree. Each node shows condition evaluated, agent verdict, and whether that branch was taken. Terminal nodes show final outcome.

Log of learned behaviors and their sources

Radar/spider chart for multi-dimensional evaluation scoring

Log of retry attempts with backoff timing

Visual cluster of semantically similar items

Ranked list of retrieved documents with relevance scores

Token cost breakdown by model and operation

Real-time deadline countdown. Transitions color from validation → caution → agency as deadline approaches. Supports critical threshold configuration.

Localized relative timestamp that updates in real time. Shows '2 min ago', 'just now', etc. with a tooltip showing the absolute ISO time.

Time-grid schedule view with columns (agents/pipelines) and rows (time slots). Tasks displayed as colored blocks with status-mapped outcome tokens.