Agentic UI Patterns

UI patterns for applications where multiple AI agents work autonomously — showing their activity, building trust, and keeping the user in control without overwhelming them.

The Core Challenge

"Users do not know what the agent is doing, why it made a choice, or how to stop it. That opacity kills trust. Lost trust kills adoption." — YUJ Designs

The goal: make agent activity visible but not noisy, trustworthy but not bureaucratic.

Pattern: Agent Activity Map

Show what agents are doing without dedicating screen space to status cards.

Minimal: Corner Dots

┌──────────────────────────────────────────────┐
│                                              │
│     [ Main Generated Output Here ]           │
│                                              │
│                                              │
├──────────────────────────────────────────────┤
│  ◉ ○ ○ ○  ← 4 agents, 1 active             │  ← 4 tiny dots, bottom-left
│  [ Approve ]                                 │
└──────────────────────────────────────────────┘

• Each dot = one agent
• Pulsing dot = currently active
• Tap dots → expand to agent names + what they're doing
• Dots collapse back to minimal after 2 seconds of inactivity

Expanded: Agent Ribbon

When user taps the dots, a minimal ribbon expands:

Copywriter   ● Done      "3 headlines generated"
Designer     ○ Working   "Creating visual concept..."
Analyst      ● Done      "Forecast: $170K revenue"
Tester       ○ Waiting   "Waiting for creative..."

Rules:

• Ribbon auto-collapses after 3 seconds of no interaction
• Never show more than 4 agents without grouping
• Status words: "Working" | "Done" | "Waiting" — never "Processing" or "Executing"

Ambient: Output-Bound Indicators

Attach agent activity to the specific part of the output they're working on:

CSS for headline glow:

@keyframes copywriter-glow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 16px rgba(251, 191, 36, 0.2); }
}
.agent-copywriter-active { animation: copywriter-glow 1.8s ease-in-out infinite; }

Pattern: The Iteration Loop UI

Show the feedback loop: create → test → fail → fix → pass.

Compact Iteration Trail

Show iteration history in a single line:

v1: 1.2% CTR ❌ → v2: 2.8% CTR ⚠️ → v3: 4.1% CTR ✅

Tap any version → see exactly what changed:

v2 changes:
  • Headline: "Eco bottle" → "Your coffee got greener" (+134%)
  • Image: product shot → lifestyle photo (+46%)
  • Total: 1.2% → 2.8%

Visual Iteration Graph

For complex iterations, show a tiny sparkline:

CTR:  1.2% ──╮  2.8% ──╮  4.1%
      ❌      │  ⚠️      │  ✅
      v1     │  v2      │  v3
             └──────────┘
              Copywriter  Designer
              revised     revised
              headline    image

Pattern: Trust Dashboard (Minimal)

A single-screen overlay with everything the user needs to trust the system.

Structure

┌─────────────────────────────────────────────┐
│  🛡️  Trust Summary                         │
├─────────────────────────────────────────────┤
│                                             │
│  Agents: 4 active on Cursor Cloud VMs      │
│  • Copywriter (GPT-5.5)      ● Online      │
│  • Designer (Composer-2)     ● Online      │
│  • Analyst (GPT-5.5)         ● Online      │
│  • Tester (Claude)           ○ Idle        │
│                                             │
│  This session:                              │
│  • 3 iterations performed                   │
│  • 12 agent actions logged                  │
│  • 0 human overrides used                   │
│                                             │
│  Confidence: 94% (high)                     │
│  ━━━━━━━━━━━━━━━━━━━━━━━━                   │
│                                             │
│  [ 🛑 Halt All Agents ]  [ View Audit ]     │
│                                             │
└─────────────────────────────────────────────┘

Rules:

• ONE screen. No tabs. No scrolling.
• Kill switch is prominent (red, always visible)
• Audit trail accessible but not shown by default
• Confidence score is a single number with a label (not a complex chart)

Kill Switch Design

The kill switch must be:

• Visible — not buried in menus
• Scoped — "Stop Copywriter" not just "Stop Everything"
• Immediate — no confirmation dialog for emergency stop
• Recoverable — show "Agents halted. [Resume]" after stopping

┌─────────────────────────────────────────────┐
│  🛑  AGENTS HALTED                          │
│  All 4 agents stopped at your request.      │
│                                             │
│  [ Resume Agents ]  [ Review Changes ]      │
└─────────────────────────────────────────────┘

Pattern: Confidence Scoring

Show how much the user should trust each output.

Score Display

Confidence: ████████████████████░░  94%

Score Ranges

Per-Element Scores

Attach confidence to individual output elements, not just the whole:

"Your morning coffee just got 10x greener" [94%]
                                           ↑ hover → "3 iterations, strong test results"

Pattern: Approval Gates

Friction proportional to consequence:

Approval UI

┌─────────────────────────────────────────────┐
│  ⚡  High-Risk Action                        │
│  Deploy to 50,000 users?                    │
│                                             │
│  [    Cancel    ]  [  Approve with PIN  ]   │
└─────────────────────────────────────────────┘

Pattern: Multi-Agent Orchestration UI

When 4+ agents work in parallel, show the factory floor without the factory noise.

Compact: Status Line

4 agents working · 2 done · 1 active · 1 waiting

Expanded: Factory Floor (for demos)

For hackathon demos or power-user views, show the full factory:

[COPYWRITER]  →  [DESIGNER]  →  [ANALYST]
   📝 Done          🎨 Active      📊 Waiting
                   (VM #2)        (for input)

Rules:

• Only show this in "power user" or demo mode
• Default UI uses corner dots
• Factory floor auto-hides after agent completion
• Each agent card: name, icon, status (Done/Working/Waiting), VM ID

Pattern: The Return Moment

When users come back after hours, show a smart briefing:

┌─────────────────────────────────────────────┐
│  📋  While you were away                     │
│                                             │
│  ✅ 3 campaigns completed                    │
│  ⚠️ 1 needs your approval                    │
│  ❌ 1 failed (budget exceeded)               │
│                                             │
│  [ Review Now ]  [ Dismiss ]                │
└─────────────────────────────────────────────┘

Anti-Patterns

• Agent Cards as Primary UI — Don't make agent status cards the main interface. The output is the interface.
• Perpetual Shimmer — Glow effects must stop when agents finish. Never leave shimmer as decoration.
• Hidden Failures — If an agent fails, show it immediately. Don't hide errors in logs.
• All-Or-Nothing Approval — Don't require approving the entire output. Allow per-element approval.
• No Scoped Control — Always allow stopping individual agents, not just "stop everything."

References

• references/multi-agent-examples.md — How Cursor, Replit, Zed, and Claude show multi-agent UIs
• references/trust-patterns.md — Kill switch design, confidence scoring, audit trails