aiux
ToolToolCoursesCoursesNewsNewsSavedSaved
Menu

Explore

  • Map
  • Patterns
  • Skills
  • Open source↗

Courses

  • ›Claude Code
    Overview

    Setup

    • Sign In to Claude Code
    • Install Node.js
    • Install Claude Code

    Figma ↔ Code

    • Set Up Figma MCP
    • Turn Figma Frames into Code
    • Using Figma Links in Prompts
    • Figma to Code Best Practices
    • Bring Code Back to Figma

    Prototype

    • Start Your First Claude Code Session
    • Create Your Project Folder
    • Generate Your First Prototype
    • See Your Prototype Live
    • Get Back to Editing

    GitHub

    • Create a GitHub Account
    • Create a Repository on GitHub
    • Connect Your Local Project to GitHub
    • Save Your Changes Going Forward
    • Share Your Work (Let Claude Code Handle Git)

    Best Practices

    • How to Describe Your Design to Claude Code
    • Testing Your Prototype
    • Iterating Based on Feedback
    • Handing Off Work to Developers
    • Troubleshooting Common Issues
  • ›Cursor
    Overview

    Setup

    • Download and Install Cursor
    • Navigate the Interface
    • Edit Code with AI Assistance

    Prototype

    • Use Tab Completions
    • Chat with AI (Cmd+L)
    • Make Inline Edits (Cmd+K)
    • Build with Composer

    Design-to-code

    • Convert Designs to Components
    • Build Frontend with React and Tailwind

    Best Practices

    • Customize Your Workspace
    • Master Advanced Features
    • Best Practices and Team Workflows
  • ›GitHub Copilot
    Overview

    Setup

    • Install GitHub Copilot
    • Your First Code Suggestion
    • Workspace Setup for Designers

    Core Features

    • Autocomplete & Code Completions
    • Chat for Design Questions
    • Inline Code Explanations

    Prototyping Workflows

    • From Design to Interactive Prototype
    • Building Responsive & Interactive Layouts

    Developer Collaboration

    • Reviewing Developer Code
    • Communicating with Your Dev Team
  • ›GitHub
    Overview

    Setup

    • Create Your GitHub Account
    • Install Git on Your Computer
    • Understanding Git Basics

    Core Features

    • Clone Your First Repository
    • Making and Committing Changes
    • Working with Branches

    Developer Collaboration

    • Creating Pull Requests
    • Reviewing and Merging PRs

    Best Practices

    • Handling Merge Conflicts
    • GitHub Workflow for Design Teams
  • ›Build a Conversational UI
    Overview

    Foundations

    • What Is Conversational UI? (And What It Isn't)
    • Anatomy of a Chat Interface

    Building

    • Building Message Bubbles in React
    • Typing Indicators & Streaming Responses
    • Suggested Prompts & Conversation Starters

    Advanced Patterns

    • Managing Conversation Context
    • Error Handling & Fallback Design
    • Voice Interface Design Patterns

    Ship It

    • Accessibility in Conversational UI
    • Putting It All Together - Architecture Checklist
    • Agentic Conversational UI - When AI Takes Actions
  • ›Claude Design
    Overview

    Setup

    • What Claude Design Is (and Isn't)
    • Your First Prompt: The Four-Part Framework
    • Importing Assets: Screenshots, Docs, and Codebases

    Iteration

    • Iterating via Conversation
    • Inline Comments and Direct Edits
    • Tweaks: Explore Variations Without Chat

    Design-system

    • Extracting Your Design System
    • Publishing and Applying Your Design System
    • Team & Enterprise Setup

    Workflows

    • Prompt to Interactive Prototype
    • Prompt to Pitch Deck
    • Handoff to Claude Code for Implementation
  • ›Using AI UX Skills
    Overview

    Foundations

    • What Is Claude Code?
    • What a Claude Code Skill Is
    • Patterns Teach You, Skills Teach Your Agent

    Setup

    • Install a Skill Pack

    Core Features

    • How Triggering Works

    Best Practices

    • Working With Skills Day to Day
  • ›Claude Docs
    Overview

    Foundations

    • What a Doc Is, and Why It Is Not a Chat

    Working

    • The Anchored Comment: Brief It by Pointing
    • Watching It Work
    • Tabs, Sharing, and the Two Names Problem

    Judgement

    • When a Doc Is the Wrong Ask
  • ›Claude Slides
    Overview

    Foundations

    • The Question Slides Asks First

    Setup

    • The Empty Picker, and the Legacy Trap

    Working

    • Skipping the System, and What You Get
    • Editing by Comment, on a Canvas

    Handoff

    • The Export, Inspected

What’s new

  • Muse hits 5M and Claude Design sync
  • OpenAI Dots and Zombie UI
  • Shopify Agent Checkouts and Humane Design
  • All →

Topics

  • Adaptive & Intelligent Systems
  • Human-AI Collaboration
  • Trustworthy & Reliable AI
  • Natural Interaction
  • Performance & Efficiency
  • Privacy & Control
  • Accessibility & Inclusion
  • Safety & Harm Prevention
Previous: Mixed-Initiative ControlNext: Agent Reflection & Learning
Performance & EfficiencyAgentic

Agent Status & Monitoring

Design a layered status system with escalating attention demands - from ambient badges to glanceable progress panels to interrupting notifications - so users stay informed about agent activity without being forced to watch.

What is Agent Status & Monitoring?

When an agent is working on a long-running or multi-step task, users need to know what's happening without being forced to watch constantly. Traditional loading indicators like spinners and progress bars don't work for agentic tasks that may take minutes or hours, involve multiple parallel activities, or require occasional user attention. The design challenge is keeping users informed without demanding their attention. This pattern provides four status layers: ambient status (persistent unobtrusive badge), progress status (glanceable panel available on demand), attention status (interrupting notification when input is needed), and summary status (completion report). The system supports multiple concurrent tasks, provides estimated completion times, and auto-dismisses completed items while keeping them accessible in the audit trail.

Problem

Traditional loading indicators don't work for agentic tasks that take minutes or hours, involve parallel activities, or need occasional user input. Users need to stay informed without being forced to constantly monitor agent activity.

Solution

Design a layered status system: ambient badges for background awareness, expandable progress panels for detail, attention notifications only when input is needed, and completion summaries when tasks finish. Support multiple concurrent tasks with estimated times.

Real-World Agent Status & Monitoring Examples

Implementation

Practice in Courses

Claude Code

Claude Code Course for Designers

23 lessons, free course

When to use Agent Status & Monitoring, and when it backfires

Use it when

  • The task runs long enough that watching it is wasteful: minutes to hours, often in parallel, where the user should be doing something else while it works.
  • The agent will occasionally need a genuine decision (a confirmation, a missing input, a fork in the plan) and the cost of missing that moment is real.
  • There is a clear hierarchy of what matters: most updates are 'glance if curious,' a few are 'you must look now,' and the system can tell them apart.

Don't, or minimize, when

  • The task finishes in seconds. A spinner says everything a four-layer status system would, with none of the overhead.
  • Every update is equally urgent in your design, which means none of them are. If you cannot rank what deserves an interrupt, you are not ready to build the interrupting tier.
  • You are tempted to ping the user on progress milestones (25%, 50%, 75%) because it 'feels responsive.' That is not keeping them informed, that is taxing their attention for no decision.

The trap

Over-escalation, the cry-wolf dashboard: every event gets routed to the loud tier because shipping a notification feels like good UX. Within a day the user has learned that your interrupts mean nothing and swipes them all away on reflex, including the one that actually mattered ('about to email the full client list, confirm?'). You spent the whole interrupt budget on 'task 50% done,' so when a real decision arrives there is no attention left to spend. It is worse than no status system at all: a plain spinner never trained the user to ignore you.

Take it into your own product

  1. 1

    Match the tier to the stakes, not to the event.

    Most agent activity is 'glance if you care,' a little is 'you must look now.' Ambient badges for the first, an interrupting notification for the second, and never the reverse. The whole design is a sorting rule for how much of the user's attention each event has earned.

  2. 2

    Guard the interrupt budget like it's finite, because it is.

    Every notification you fire spends a little of the user's willingness to look at the next one. Blow it on progress milestones and the one alert that matters arrives to a user who has already learned to swipe you away. An interrupt is for a decision, not for a status.

  3. 3

    Status is a window, not a door.

    Let users check in on the work without disrupting it: a panel they pull open on demand, never a thing that pauses the agent or demands acknowledgment. If checking progress costs the user a click and the agent a stall, you have rebuilt the spinner with extra steps.

  4. 4

    Don't make them babysit it.

    If the user has to keep the status panel open and watch it to feel safe, your ambient layer has failed. The promise of this pattern is that they can walk away and trust they'll be pulled back exactly when, and only when, they're needed.

  5. 5

    Auto-dismiss the noise, keep the record.

    Completed tasks should clear themselves so the surface doesn't silt up with finished work. But 'dismissed from view' is not 'gone': everything the agent did belongs in the audit trail, where the user can reconstruct what happened after the badge is long gone.

Save as a Claude skill

Save Agent Status & Monitoring as a Claude skill

Saved skills collect on your dashboard, ready to download one at a time or as a pack for your repo. Once a skill is in place, Claude Code applies it whenever you work on a surface this pattern covers.

30-second check

Check if your product already has this pattern

Upload a screenshot. We'll tell you which of the 38 patterns your AI interface uses and where the gaps are.

Audit My Design

Take all 38 patterns as Claude skills

Get the whole library as skill files, so Claude applies these patterns while it builds instead of after you catch them in review.

  • One skill file per pattern, all 38
  • Drop them in .claude/skills and Claude applies them as it builds
  • Daily AI UX newsletter (unsubscribe anytime)

More in Performance & Efficiency

Intelligent Caching

Pre-fetch and cache AI content for instant results, reducing latency.

Progressive Enhancement

Provide immediate basic responses then progressively add detail and accuracy.

Want More Patterns Like This?

Daily AI UX news and new pattern breakdowns, straight to your inbox. Unsubscribe anytime.

Previous PatternMixed-Initiative ControlNext PatternAgent Reflection & Learning

aiux

AI UX patterns from shipped products. Demos, code, and real examples.

Have an idea? Share feedback

Get daily AI UX news

Services

  • Audit my product
  • Request an audit

Resources

  • All Patterns
  • Browse Categories
  • Contribute
  • Claude Code Skills
  • AI Interaction Toolkit
  • Agent Readability Audit
  • Newsletter
  • Documentation
  • Figma Make Prompts
  • Designer Guides
  • Events
  • Design System
  • All Resources →

Company

  • About Us
  • Privacy Policy
  • Terms of Service
  • Contact

Links

  • Portfolio
  • GitHub
  • LinkedIn
  • More Resources

Copyright © 2026 All Rights Reserved.

Used by:
ChatGPT
ChatGPT
Devin
Devin

Multi-Task Agent Status Widget

An interactive status widget showing ambient badge, expandable task panel, and attention notifications for monitoring multiple concurrent agent tasks.

Toggle to code view to see the implementation details.