Skip to content
Blog

Human-Agent Collaboration: Designing UIs for Gemini 3 "Co-Pilot" Modes

A copilot UI is not a chat UI with autonomy bolted on. Learn the seven agent UI patterns, autonomy as a design decision, approval gates that dont train users to click through, and the AG-UI/A2UI protocol stack.

Published on • August 2, 2026

AI Assistant

A copilot UI is not a chat UI with autonomy bolted on. A chat UI optimizes for turn-taking; an agent UI optimizes for goal clarity, plan visibility, progress telemetry, and override affordances. By 2026, Gartner projects 40% of enterprise applications will integrate task-specific agents — and at that scale, a text-only interface becomes a liability. Users can’t audit what an agent did, can’t intervene mid-workflow, and can’t trust a system they can’t observe.

In this tutorial, you will learn the seven patterns every agent UI needs, how to treat autonomy as a visible, per-action design decision, and how to design approval gates that inform instead of train users to click through.

Agent UI Is a Control Surface, Not a Conversation

An agent is an autonomous worker: it takes a goal, plans a path, and runs tools without asking permission for every step. The interface for that worker is a control surface. Seven patterns show up in every agent UI worth using:

  1. Task framing — how the user states the goal.
  2. Autonomy controls — how much rope the agent gets.
  3. Plan surface — the agent commits to a sequence of steps before acting.
  4. Progress stream — live feed of what it’s doing right now.
  5. Confirmation gates — the slow moment before a destructive action.
  6. Error recovery — the path back from a failed step.
  7. Agent handoff — the state dump that moves a task agent→human or agent→agent without losing context.

Treat the agent UI as a control surface and the seven patterns below stop being optional and become load-bearing. The user is no longer the agent’s conversation partner, the user is the agent’s supervisor. — AI Agent UI Design Patterns (https://brainy.ink/paper/ai-agent-ui-design-patterns)

Autonomy as a Design Decision, Not a Boolean

Users don’t need one global autonomy level — they need different levels for different actions. The “Levels of Autonomy” framing casts the human in roles: operator, collaborator, consultant, approver, observer.

ModeHuman roleAgent behaviorUI requirement
DraftConsultantProduces recommendations / summaries / draftsShow sources, assumptions, uncertainty
PrepareCollaboratorBuilds a plan / changes for reviewShow diff, affected systems, validation
Approval-gatedApproverQueues actions needing explicit approvalShow action, reason, blast radius, rollback path
Bounded autonomousObserverExecutes low-risk actions inside limitsShow live state, thresholds, alerts, audit trail
Emergency stopOperatorPauses / cancels / rolls back workMake control immediate and always visible

The current autonomy mode must be visible near the task, not buried in admin settings. Users should never have to infer whether the agent is in “suggestion mode” or “execution mode.”

Users should never have to infer whether an agent is in ‘suggestion mode’ or ‘execution mode.’ The current autonomy level should be displayed near the task, not buried in admin settings. — Agent UI Design for Enterprise AI (https://agents-ui.com/blog/agent-ui-design-enterprise-ai-agents/)

The Activity Panel: Structural, Not Stylistic

Agent interfaces require a dedicated activity panel separate from the conversation thread. The thread handles clarification and feedback; the panel tracks autonomous work — tool calls, subtasks, progress, approvals — as a persistent, auditable log.

  • Progressive disclosure: show “3 of 7 steps complete” by default; drill into tool-level detail on demand. Presenting every tool call by default produces overload; hiding all detail produces distrust.
  • Streaming tool output, not just responses: showing tool inputs and outputs as they happen is consistently cited as the highest-value UX improvement.
  • Persistent approval contexts: approval requests that include the agent’s accumulated context (what’s been done, what this step does, what comes next) get faster, more accurate human decisions than terse approve/deny prompts.

A recurring insight across agentic UX research: agent interfaces require a dedicated activity panel, separate from the conversation thread. — Agentic UX: Frontend Design Patterns (https://zylos.ai/research/2026-05-28-agentic-ux-frontend-design-patterns-ai-agents/)

Approval Gates That Don’t Train Users to Click Through

The mistake most products make is treating every action with the same confirmation weight. Either everything gates — training users to click through without reading — or nothing gates, letting the agent do irreversible damage. Triage actions into three intensities:

  • Soft gate for reversible writes — a 30-second undo banner.
  • Hard gate for destructive actions — a confirmation modal.
  • Two-step gate for catastrophic actions — a modal plus a typed confirmation phrase.

Irreversibility is the design primitive. A gate that asks only “continue or stop?” is not oversight — it’s a gate without information. At every intervention point show: what the system understands the goal to be, what it’s about to do, what alternatives exist, and what changes if the user redirects.

A pause that presents the user with ‘the system is about to proceed, continue, or stop?’ is not oversight. It is a gate without information… Speed, in this context, is the enemy of oversight. — Designing Oversight Interfaces for AI Agents (https://uxandai.com/designing-oversight-interfaces-for-ai-agents/)

Design for Redirect, Not Just Termination

Stopping is necessary but insufficient. Users who can only halt a process are weaker than users who can redirect: modify scope, substitute actions, adjust constraints, shift goals — without restarting from zero. A user who identifies a problem mid-process doesn’t want to stop the system; they want to change its direction.

Design for redirect, not just termination. The control palette determines the shape of oversight; a binary palette produces binary oversight. — Designing Oversight Interfaces for AI Agents (https://uxandai.com/designing-oversight-interfaces-for-ai-agents/)

This is backed by durable execution: interrupt a mid-task agent and resume where it left off — not restart. AG-UI’s cancellation and resumption support makes this possible, and most early-generation agentic apps that skipped it paid the price in user abandonment.

The Protocol Layer: AG-UI and A2UI

Two protocols are defining the frontend half of the agent stack — the layer users actually see:

  • AG-UI (Agent-User Interaction Protocol, by CopilotKit, 40+ framework integrations) — standardizes the real-time event stream between agent backends and frontends.
  • A2UI (Agent-to-User Interface, by Google, early 2026) — agents declare UI components in structured JSON rather than generating executable code.
LayerTechnologyRole
Event transportAG-UI over SSE / WebSocketReal-time bidirectional agent-frontend channel
UI specificationA2UI / Open-JSON-UIDeclarative agent-driven component generation
State syncAG-UI typed stores + event-sourced diffsConsistent shared state
Approval orchestrationLangGraph interrupts / framework-native gatesDurable pause/resume
Activity panelDedicated audit layerSeparate workflow view from thread

Together they define the frontend half of the agent protocol stack — the layer that users actually see. — Agentic UX: Frontend Design Patterns (https://zylos.ai/research/2026-05-28-agentic-ux-frontend-design-patterns-ai-agents/)

The Research Frontier

CHI 2026 frames agents as “remote collaborators,” grounded in decades of CSCW research on distributed teamwork: remote humans communicate through lean channels, lack shared physical context, and rely on explicit signals to maintain common ground — which is exactly how humans interact with LLM agents.

The open problems: mutual awareness, mixed-initiative interaction, shared accountability, and guarding against misaligned autonomy, hallucination, privacy vulnerabilities, and over-anthropomorphization.

Current intelligent systems lack critical characteristics of effective collaboration, such as mutual awareness, mixed-initiative interactions, and shared accountability. Without these qualities, interactions between humans and systems can be brittle, error-prone, and synergistic collaboration remains unrealized. — CHI 2026 Workshop on Human-Agent Collaboration (https://chi26workshop-human-agent-collaboration.hailab.io/)

Conclusion

Copilot modes work when the UI is a control surface with a plan, a progress stream, and override power. Separate the activity panel from the thread. Make autonomy visible and per-action. Gate only irreversible actions — and gate them with context, not friction. Design for redirect, not just termination. Adopt AG-UI/A2UI for the transport and component layers.

Next steps: run a heuristic review of your existing agent product against the seven patterns, add progressive disclosure to your activity panel, and instrument approval decisions — how often do users approve with context vs. blindly? The user is the supervisor, the agent is the worker, and the interface is where authority either takes form or dissolves.

References

ai ux human-in-the-loop agents copilot design