# 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.