89db580ca4
Covers: app layout, initiatives list, initiative detail (4 tabs), agents page, inbox, settings (health + projects), and all dialogs.
189 lines
7.3 KiB
Markdown
189 lines
7.3 KiB
Markdown
# 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`
|