Emerging

Agent identity chips

Distinct visual identity for each acting agent, separate from the human who deployed it.

MTicket #4821Activity 3 people · 2 agents

DO

Dana Ortiz opened the ticket 9:02

“I was charged twice for August, $1,240 each time.”
M

tagged Billing and set priority High 9:02

for Maya Reyes
MR

Maya Reyes assigned it to Sam Okafor 9:10
M

refunded $1,240 for invoice #8822 9:14

for Sam Okafor · approved by Sam at 9:13
SO

Sam Okafor added a note 9:16

“Matches the bank record. Closing after Dana confirms.”

Who acted on this ticket

DODana Ortiz customer
MRMaya Reyes support lead
SOSam Okafor billing
MMilky Triage Agent
MMilky Billing Agent

Try it: Click an agent chip in the activity. Each agent has its own identity, scopes and log, separate from the person who deployed it.

In the wild

How 2 products ship this pattern. Click a screenshot to enlarge it.

Linear issue properties panel: human assignee Tom Moor with an 'Agent' entry nested beneath, and a 'Delegate to…' menu offering No agent or Agent — Linear
In Linear, an issue can be delegated to an agent that has its own name and avatar, shown beneath the human who stays responsible.
Source: Linear docs ↗

Zoom meeting grid showing a tile labelled 'Notetaker (Otter.ai)' and another large tile reading 'Abigail's AI Notetaker', alongside a human participant — Otter
Otter's notetaker joins calls as its own named participant, labelled as an AI notetaker and linked to the person who sent it.
Source: Otter help center ↗

When to use

Multi-agent products and shared workspaces where several actors write to the same surface.

Seen in

Slack AI app actors, GitHub Copilot bot commits, Linear agent assignees, Salesforce Agentforce users.

For engineers

Give agents real principals in your identity system with scoped credentials and audit trails.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Agent identity chips" pattern: `ActorChip`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
Distinct visual identity for each acting agent, separate from the human who deployed it.

Use it when: Multi-agent products and shared workspaces where several actors write to the same surface.

## What to build
A compact chip that names who performed an action: a person or a specific agent, with the agent visibly distinct and linked to the person who deployed it. Opening it shows the agent's scopes and recent actions. It renders inline in activity feeds, comments, commit lists and assignee fields.

### Props
- `actor`: { kind: "person" | "agent"; id: string; name: string; avatarUrl?: string; role?: string }, the principal that actually acted.
- `onBehalfOf?`: { id: string; name: string }, the person who deployed or is responsible for the agent; required when `kind` is "agent".
- `scopes?`: string[], what the agent is allowed to do, e.g. "Read tickets", "Post replies".
- `recentActions?`: Array<{ summary: string; at: Date }>, for the detail popover.
- `size`: "sm" | "md", and `showDeployer?`: boolean (default true for agents).
- `status?`: "active" | "paused" | "revoked", the agent's current standing.
- `onOpenProfile?(id)` and `onOpenLog?(id)`: callbacks to navigate to the actor's profile or full audit log.

### States it must render
- Person: avatar or initials plus name, plain styling.
- Agent: an agent glyph or distinct shape (not a person avatar), its own name, an "Agent" label, and "for <person>" in smaller text.
- Detail open: a popover listing role, deployer, scopes, status and the last few actions, with "View full log".
- Paused or revoked agent: the chip shows the status in text and muted styling; past actions keep the chip so history stays attributable.
- Unknown actor: "Unknown actor" with a warning icon, never falling back to the deployer's name.

### Interactions
- Clicking or pressing Enter on the chip opens the detail popover; Escape closes it and returns focus to the chip.
- "View full log" calls `onOpenLog`; the actor's name in the popover calls `onOpenProfile`.
- The deployer name inside the popover is its own link, so the human and the agent are navigable separately.

### Edge cases
- An agent acting for a team rather than a person: `onBehalfOf` shows the team name.
- Several agents with similar names: show a distinguishing role or short id in the chip at `md` size.
- Small sizes in dense feeds: the agent marker (shape or glyph) remains even when the name truncates, and the full name is in the tooltip and accessible name.
- A person and their agent acting in the same thread: chips must never look identical.

## Must avoid
Agents posting as the user, making accountability impossible to reconstruct after an incident.

## Engineering constraint
Give agents real principals in your identity system with scoped credentials and audit trails.

## Accessibility
- The chip is a button whose name reads "<agent name>, agent acting for <person>" or "<person name>".
- The popover is a non-modal dialog labelled by the actor name.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for identifiers

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Can a viewer tell AI involvement without reading documentation?
Does the label survive export, copy and re-upload?
Is the acting agent distinguishable from the human it acts for?
Does disclosure meet the jurisdictions you ship to?