#region AgentChat.DesignTokens [C:2] [TYPE ADR] [SEMANTICS ux,tokens,agent-chat]
@defgroup Ux Design tokens and component reuse for Gradio Agent Chat (drawer + /agent page).

## Component Reuse Scan

| Need | Existing Asset | Action |
|------|---------------|--------|
| Primary button (send, confirm, retry) | `$lib/ui/Button.svelte` variant="primary" | Reuse |
| Secondary/ghost (cancel, delete) | `$lib/ui/Button.svelte` variant="ghost" | Reuse |
| Destructive (stop, delete confirm) | `$lib/ui/Button.svelte` variant="destructive" | Reuse |
| Empty state (new convo, no history) | `$lib/ui/EmptyState.svelte` | Reuse |
| Page header (/agent page) | `$lib/ui/PageHeader.svelte` | Reuse |
| Icons (send, stop, paperclip, expand) | `$lib/ui/Icon.svelte` | Reuse — name="send"/"stop"/"paperclip"/"chevron-down" |
| Toast notifications | `addToast()` from `$lib/toasts` | Reuse |
| Confirmation (convo delete) | `confirm()` (native browser) | Pattern |
| Custom confirmation (in-chat) | New `ConfirmationCard` inline within message | New component |
| Tool-call card | New `ToolCallCard` inline within message | New component |

---

## Semantic Tokens — Drawer (420px)

### Chat Panel Shell
| Element | Token |
|---------|-------|
| Drawer background | `bg-surface-page` |
| Drawer left border | `border-l border-border` |
| Header (convo switcher + expand btn) | `bg-surface-card border-b border-border` |
| Message scroll area | `bg-surface-page` |
| Input area | `border-t border-border bg-surface-card` |

### Messages
| Element | Token |
|---------|-------|
| User bubble | `bg-primary text-white rounded-2xl` |
| Assistant bubble | `bg-surface-card border border-border rounded-2xl` |
| Streaming cursor | `animate-pulse text-primary` (blinking block, 0.3s) |
| System/info message | `bg-surface-muted text-text-muted text-sm rounded-lg` |

### Tool-Call Cards
| Element | Token |
|---------|-------|
| Card | `bg-surface-muted border border-border rounded-lg px-3 py-2` |
| Tool name | `text-text-muted text-xs font-mono` |
| Spinner (executing) | `animate-spin text-primary` |
| Checkmark (done) | `text-success` |
| Cross (error) | `text-destructive` |
| Expanded content | `text-text-muted text-xs font-mono overflow-auto max-h-32` |

### Confirmation Cards
| Element | Token |
|---------|-------|
| Card | `bg-warning-light border border-warning-DEFAULT rounded-lg p-3` |
| Warning icon | `text-warning` |
| Op summary | `text-text font-medium` |
| Timer | `text-text-muted text-xs` |

### Connection Status
| Element | Token |
|---------|-------|
| Connected (green) | `bg-success w-2 h-2 rounded-full` |
| Reconnecting (yellow) | `bg-warning w-2 h-2 rounded-full animate-pulse` |
| Disconnected (red) | `bg-destructive w-2 h-2 rounded-full` |

### Input Area
| Element | Token |
|---------|-------|
| Textarea | `border border-border-strong rounded-xl focus:border-primary focus:ring-1 focus:ring-primary-ring` |
| Send button | `bg-primary text-white rounded-full` |
| Stop button | `bg-destructive text-white rounded-full` |

---

## Semantic Tokens — `/agent` Page

### Page Layout
| Element | Token |
|---------|-------|
| Page background | `bg-surface-page` |
| Page shell | `max-w-7xl mx-auto px-4 py-6 h-[calc(100vh-4rem)]` |
| Two-column container | `flex gap-0 h-full` |

### Conversation Sidebar (240px)
| Element | Token |
|---------|-------|
| Sidebar | `bg-surface-card border-r border-border w-60 shrink-0` |
| Search input | `border border-border-strong rounded-lg focus:border-primary` |
| Active convo highlight | `bg-surface-muted` |
| Convo title | `text-text text-sm font-medium truncate` |
| Convo date group header | `text-text-muted text-xs font-semibold uppercase` |
| Convo date | `text-text-muted text-xs` |
| Delete button (hover) | `text-text-muted hover:text-destructive` |

### Main Chat Area
| Element | Token |
|---------|-------|
| Chat container | `flex-1 flex flex-col` |
| Messages area | `flex-1 overflow-y-auto bg-surface-page` |
| Input area | `border-t border-border bg-surface-card p-4` |

### Welcome / Empty
| Element | Token |
|---------|-------|
| Welcome card (new convo) | `bg-surface-card border border-border rounded-xl p-6 max-w-md mx-auto` |
| Chip (example) | `border border-border rounded-full px-3 py-1.5 text-sm text-text-muted hover:bg-surface-muted hover:text-text cursor-pointer transition` |

---

## No Raw Tailwind Colors

All tokens reference `tailwind.config.js` semantic palette. Zero `blue-*`, `gray-*`, `red-*`, `green-*`, `amber-*`, `slate-*`, `indigo-*` in page/component code. Verification: `scripts/audit-frontend-style.mjs`.

#endregion AgentChat.DesignTokens
