Section 01
Agent Avatar States
The avatar communicates the agent's current activity through animation.
Interactive
Idle
Idle — No animation. The agent is ready.
Thinking — Gentle pulse rings. The agent is processing.
Streaming — Orbital rings rotate. The agent is generating.
Complete — Brief pop confirms the response is done.
Thinking — Gentle pulse rings. The agent is processing.
Streaming — Orbital rings rotate. The agent is generating.
Complete — Brief pop confirms the response is done.
Section 02
Thinking Trace
Natural language narration of the agent's reasoning, streamed character by character.
Interactive
Aires Agent just now
Reasoning
The trace auto-opens during streaming and collapses on completion. Each line types character-by-character with a blinking cursor. The active line has a green dot pulse; previous lines dim. This creates the sensation of watching a colleague work through a problem.
Section 03
Streaming Text Response
Character-level streaming creates natural, flowing text delivery.
Interactive
Aires Agent just now
Text streams at ~30-50 characters per second. The blinking cursor confirms active generation. Streaming is perceived as 40% faster than buffered responses, even with identical total time.
Section 04
Tool Invocations
Cards appear as the agent calls tools — database queries, API calls, file generation.
Interactive
query_lakehouse
Running
SELECT * FROM leads WHERE created_at = '2026-02-07' AND project = 'tiffany_park'
analyze_pipeline
Running
Anomaly detection on 847 deal records with SHAP explanations
generate_chart
Running
Pipeline health visualization — leads by stage, conversion rates
Section 05
Progressive Widget Rendering
Data widgets materialize as the agent builds them — stat cards, charts, tables.
Interactive
Section 06
Full Agent Response Sequence
The complete flow: user query, thinking trace, tool calls, streaming text, widget delivery.
Interactive
Show me today's lead performance for Tiffany Park
Section 07
Traditional Software vs. Agent Collaboration
The difference between using a tool and working with a collaborator.
Traditional Software
Click "Generate Report"
See a loading spinner
Wait 8 seconds...
Wait 12 seconds...
Result appears (or error)
No idea what happened
Agent Collaboration
Ask: "Show me today's leads"
Agent: "Looking at the database..."
Agent: "Found 8 new leads..."
Agent: "Building your chart..."
Widget materializes progressively
Full trace of every action taken
Reference
Design Principles
Six rules for agent response UI that feels like collaboration.
Never Silence
Always show what's happening. Dead air is dead trust.
Human Traces
Write thinking traces for humans. Store them for systems.
Purposeful Motion
Every animation communicates state. Motion conveys agency, not just activity.
Progressive Disclosure
Show complexity on demand. Simple first, details when asked.
Interruptible
The user is always in control. Stop, redirect, or cancel at any point.
Journey is Product
The response process IS the experience. Not just the final output.
Aires Design System · Agent Response UI Reference · February 2026