# Agents Page (`/agents`)

Two-column layout: agent card list (320px) + agent output viewer.

## Default State

```
+============================================================================+
|  CODEWALK DISTRICT                                                         |
|  [ Initiatives ]  [*Agents*]  [ Inbox ]  [ Settings ]                    |
+============================================================================+
|                                                                            |
|  Agents (7)                                            [ Refresh ]         |
|                                                                            |
|  [*All (7)*] [Running (2)] [Questions (1)] [Exited (3)] [Dismissed (1)]   |
|                                                                            |
|  +-------------+  +------------------------------------------------------+|
|  |             |  |  Output: blue-fox-7                        [ Stop ]  ||
|  | * blue-fox-7|  |-----------------------------------------------------||\
|  |   [claude]  |  |  [System] Starting task: Implement OAuth routes      ||
|  |   [execute] |  |                                                      ||
|  |   2m ago    |  |  > I'll start by examining the current auth setup.   ||
|  |             |  |                                                      ||
|  |-------------|  |  [Tool Call] Read                                     ||
|  |             |  |  file_path: src/auth/index.ts                        ||
|  |   red-elk-3 |  |                                                      ||
|  |   [claude]  |  |  [Result]                                            ||
|  |   [research]|  |  import { Router } from 'express';                   ||
|  |   5m ago    |  |  export function setupAuth(app) { ...                ||
|  |   Answer -> |  |                                                      ||
|  |             |  |  > Based on the existing code, I'll create the       ||
|  |-------------|  |  > OAuth module with the following structure...       ||
|  |             |  |                                                      ||
|  |   grey-owl-1|  |  [Tool Call] Write                                   ||
|  |   [openai]  |  |  file_path: src/auth/oauth.ts                       ||
|  |   [plan]    |  |                                                      ||
|  |   1h ago    |  |  [Result]                                            ||
|  |   Exited    |  |  File written successfully                           ||
|  |             |  |                                                      ||
|  |-------------|  |  --- Session End ---                                  ||
|  |   ...       |  |  [Cost: $0.12]  [Duration: 2m 34s]                   ||
|  |             |  |                                                      ||
|  +-------------+  |                      [Following v]  [Jump to bottom] ||
|                    +------------------------------------------------------+|
|     320px                             flex-1                               |
+============================================================================+
```

## Filter Bar

```
  [*All (7)*]  [Running (2)]  [Questions (1)]  [Exited (3)]  [Dismissed (1)]
   ^^^^^^^^^
   active pill (filled background), each shows count badge
```

Filter options:
- **All**: Every agent
- **Running**: Status = `running`
- **Questions**: Status = `waiting_for_input`
- **Exited**: Status = `exited`, `completed`, `crashed`
- **Dismissed**: Status = `dismissed`

## Agent Card (in left list)

### Running Agent
```
+---------------------------+
|  * blue-fox-7         [...] |    <-- StatusDot (green) + name + actions menu
|    [claude] [execute]       |    <-- provider badge + mode badge
|    2m ago                   |    <-- relative timestamp
+---------------------------+
```

### Waiting for Input
```
+---------------------------+
|  ? red-elk-3          [...] |    <-- StatusDot (orange)
|    [claude] [research]      |
|    5m ago                   |
|    Answer questions ->      |    <-- link to inbox
+---------------------------+
```

### Exited
```
+---------------------------+
|  - grey-owl-1         [...] |    <-- StatusDot (grey)
|    [openai] [plan]          |
|    1h ago                   |
+---------------------------+
```

## Agent Actions Menu ([...])

```
+---------------------------+
| Go to Inbox               |    <-- only when waiting_for_input
| Stop                      |    <-- only when running/waiting
| Dismiss                   |    <-- only when stopped/crashed/idle
| Delete                    |    <-- destructive, when stopped/dismissed
+---------------------------+
```

## Agent Output Viewer (right panel)

### Header
```
+------------------------------------------------------------------------+
|  Output: blue-fox-7  [!]                              [ Stop ]         |
|                       ^                                                |
|                       connection error indicator (if disconnected)     |
+------------------------------------------------------------------------+
```

### Output Content (dark zinc-900 background, monospace)

```
  [System]  Starting task: Implement OAuth routes               <-- grey badge

  > I'll start by examining the current auth setup.             <-- white text

  |  [Tool Call] Read                                           <-- blue left border
  |  file_path: src/auth/index.ts

  |  [Result]                                                   <-- green left border
  |  import { Router } from 'express';
  |  export function setupAuth(app) { ...

  > Based on the existing code, I'll create the OAuth module.   <-- white text

  |  [Tool Call] Write                                          <-- blue left border
  |  file_path: src/auth/oauth.ts

  |  [Result]                                                   <-- green left border
  |  File written successfully

  |  [Error]                                                    <-- red left border
  |  Permission denied: /etc/hosts                              <-- red text

  ─── Session End ───                                           <-- divider
  [Cost: $0.12]  [Duration: 2m 34s]                             <-- badges
```

### Footer Controls
```
                                   [Following v]  [Jump to bottom]
                                    ^^^^^^^^^^^
                                    toggles: Following / Paused
```

- **Following**: auto-scrolls to bottom as new output arrives
- **Paused**: stops auto-scroll (toggled when user scrolls up)
- **Jump to bottom**: scrolls to latest output

## No Agent Selected

```
+------------------------------------------------------------------------+
|                                                                        |
|                                                                        |
|              - - - - - - - - - - - - - - - -                           |
|              Select an agent to view output                            |
|              - - - - - - - - - - - - - - - -                           |
|                                                                        |
|                                                                        |
+------------------------------------------------------------------------+
```

## Source

- `packages/web/src/routes/agents.tsx`
- `packages/web/src/components/AgentOutputViewer.tsx`
- `packages/web/src/components/AgentActions.tsx`