# Live Activity Pill

> An animated live activity pill for React and shadcn, showing background agents, builds and uploads.

A Dynamic Island for background work: a pill docked to the app edge that morphs as an agent, build or upload goes from running to needs-you to done, its width, height and corners on one bouncy spring. Several activities stack and fan on hover; it expands into a card with progress and actions.

- Tier: Eased Pro
- Interaction: Press
- Page: https://eased.dev/components/activity-pill
- Installs: motion

## Install

Live Activity Pill ships with Eased Pro (https://eased.dev/#pricing). Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/activity-pill
```

A Dynamic Island for web apps: a pill docked to the app's edge that says what an agent, build or upload is doing and morphs as it changes.

## When to use

- Background work the person should be able to glance at: agent runs, deploys, uploads, calls.
- Several activities at once: they stack behind the lead, most urgent first.

## When not to use

- One-off confirmations: use a toast.
- Work the person is watching in the main view: show it there (e.g. [Agent Run](/components/agent-run)).

## Usage

```tsx example.tsx
import { ActivityPill, type Activity } from "@/components/eased/activity-pill/activity-pill";

<div className="fixed inset-x-0 top-3 flex justify-center">
  <ActivityPill activities={activities} onDismiss={(id) => remove(id)} />
</div>
```

## API reference

### ActivityPill

| Prop | Type | Default | Description |
|---|---|---|---|
| `activities` | `Activity[]` | | `{ id, title, state, status?, progress?, startedAt?, icon?, actions? }`. |
| `expanded` / `defaultExpanded` / `onExpandedChange` | | `false` | Card view. |
| `autoDismiss` | `number \| false` | `4000` | Calls `onDismiss` this long after an activity is `done`. |
| `onDismiss` | `(id) => void` | | Remove the activity. |
| `side` | `"top" \| "bottom"` | `"top"` | The docked edge; the stack peeks out away from it. |

`ActivityState` is `running`, `waiting`, `done` or `error`; `activityStateFromTool(toolState)` maps thinking-core states.

## Keyboard

| Key | Action |
|---|---|
| `Enter` / `Space` | Expands the pill. |
| `Escape` | Folds it back and returns focus to the pill. |

## Accessibility

- The pill is a button named with the lead activity and its state ("Refactoring auth: needs you, and 1 more"). Changes are announced from a status region. A click outside folds the card.

## Motion

Width, height and corner radius ride one bouncy spring together through Motion layout, while the contents crossfade through a 4px blur 60ms behind it, so states read as one object changing shape. Glyphs swap with scale and blur; the done check draws itself. Stacked activities peek 5px and 9px out and fan to 10px and 19px on hover or keyboard focus. The pill enters from 0.9 and leaves to 0.94 faster. Reduced motion: no layout morph, fades only, no pulsing.

## Notes for AI

Keep activity ids stable so states morph in place; use `waiting` for anything that needs the person and put its buttons in `actions`.

Do not position it inside a scrolling area or animate its size yourself.

## Related

- [Agent Run](/components/agent-run), [Agent Orb](/components/agent-orb).