# Inbox Page (`/inbox`)

Two-column layout: message list (left) + detail panel (400px right).

## Default State

```
+============================================================================+
|  CODEWALK DISTRICT                                                         |
|  [ Initiatives ]  [ Agents ]  [*Inbox*]  [ Settings ]                    |
+============================================================================+
|                                                                            |
|  Agent Inbox (3)                                        [ Refresh ]        |
|                                                                            |
|  [*All*] [Waiting (2)] [Completed (1)]                                    |
|  [Newest v] [Oldest]                                                       |
|                                                                            |
|  +-------------------------------+  +----------------------------------+   |
|  |                               |  |                                  |   |
|  | (*) red-elk-3 (waiting)       |  |  red-elk-3 -> You               |   |
|  |     "Should I use JWT or      |  |  2 minutes ago                  |   |
|  |      session tokens f..."     |  |  Task: #task-42                 |   |
|  |                      2m ago   |  |  View in context                |   |
|  |                               |  |                                  |   |
|  |-------------------------------|  |  +----------------------------+  |   |
|  |                               |  |  | Q1: Should I use JWT or   |  |   |
|  | (*) blue-fox-7 (waiting)      |  |  |     session tokens?       |  |   |
|  |     "Which OAuth provider     |  |  |                           |  |   |
|  |      should I priorit..."     |  |  | ( ) JWT with refresh      |  |   |
|  |                      5m ago   |  |  | (*) Session cookies       |  |   |
|  |                               |  |  | ( ) Let me specify:       |  |   |
|  |-------------------------------|  |  |     [________________]    |  |   |
|  |                               |  |  |                           |  |   |
|  | ( ) grey-owl-1 (completed)    |  |  | Q2: What session          |  |   |
|  |     "Task completed           |  |  |     duration?             |  |   |
|  |      successfully."           |  |  |                           |  |   |
|  |                      1h ago   |  |  | [24 hours____________]   |  |   |
|  |                               |  |  |                           |  |   |
|  +-------------------------------+  |  |                           |  |   |
|                                     |  | [Cancel] [Dismiss]        |  |   |
|                                     |  |          [Send Answers]   |  |   |
|                                     |  +----------------------------+  |   |
|                                     |                                  |   |
|            flex-1                   +----------------------------------+   |
|                                                 400px                      |
+============================================================================+
```

## Filter Bar

```
  [*All*]  [Waiting (2)]  [Completed (1)]
```

## Sort Bar

```
  [*Newest*]  [Oldest]
```

## Message Card (in left list)

### Requires Response (waiting)
```
+-------------------------------+
| (*) red-elk-3 (waiting)       |    <-- filled orange dot
|     "Should I use JWT or      |    <-- message preview (truncated 80 chars)
|      session tokens f..."     |
|                      2m ago   |    <-- relative timestamp
+-------------------------------+
```

### No Response Needed (completed)
```
+-------------------------------+
| ( ) grey-owl-1 (completed)    |    <-- empty dot
|     "Task completed           |
|      successfully."           |
|                      1h ago   |
+-------------------------------+
```

- Orange filled dot = requires response
- Empty dot = no response needed
- Click selects agent and shows detail panel
- Selected card gets highlight background

## Inbox Detail Panel (400px right)

### Header
```
+----------------------------------+
|  [<]  red-elk-3 -> You           |    <-- mobile back button (hidden on desktop)
|  2 minutes ago                   |
|  Task: #task-42                  |    <-- task ID link
|  View in context                 |    <-- link to initiative detail
+----------------------------------+
```

### Structured Questions (waiting_for_input)
```
+----------------------------------+
|  Q1: Should I use JWT or         |
|      session tokens?             |
|                                  |
|  ( ) JWT with refresh tokens     |
|  (*) Session cookies             |
|  ( ) Let me specify:             |
|      [________________________]  |
|                                  |
|  Q2: What session duration       |
|      do you want?                |
|                                  |
|  [24 hours___________________]   |    <-- free text input (textarea)
|                                  |
|  [Cancel]  [Dismiss]             |
|            [Send Answers]        |    <-- disabled until all answered
+----------------------------------+
```

### Plain Message (notification, no structured questions)
```
+----------------------------------+
|  Task completed successfully.    |
|  Created 3 files, modified 2.   |
|                                  |
|                     [ Dismiss ]  |
+----------------------------------+
```

### Loading State
```
+----------------------------------+
|                                  |
|       [spinner] Loading...       |
|                                  |
+----------------------------------+
```

### Waiting for Questions
```
+----------------------------------+
|                                  |
|  Waiting for structured          |
|  questions...                    |
|                                  |
+----------------------------------+
```

## No Agent Selected (right panel)

```
+----------------------------------+
|                                  |
|  - - - - - - - - - - - - -      |
|  Select a message to view        |
|  - - - - - - - - - - - - -      |
|                                  |
+----------------------------------+
```

## Empty State (no messages)

```
+============================================================================+
|                                                                            |
|  Agent Inbox (0)                                        [ Refresh ]        |
|                                                                            |
|                                                                            |
|                    No pending messages                                     |
|                                                                            |
|                                                                            |
+============================================================================+
```

## Mobile Layout

On small screens, left list takes full width. When an agent is selected, detail panel takes full width with a back button `[<]` visible.

## Source

- `packages/web/src/routes/inbox.tsx`
- `packages/web/src/components/InboxList.tsx`
- `packages/web/src/components/InboxDetailPanel.tsx`
- `packages/web/src/components/MessageCard.tsx`
- `packages/web/src/components/QuestionForm.tsx`
- `packages/web/src/components/OptionGroup.tsx`
- `packages/web/src/components/FreeTextInput.tsx`