89db580ca4
Covers: app layout, initiatives list, initiative detail (4 tabs), agents page, inbox, settings (health + projects), and all dialogs.
7.3 KiB
7.3 KiB
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.tsxpackages/web/src/components/InboxList.tsxpackages/web/src/components/InboxDetailPanel.tsxpackages/web/src/components/MessageCard.tsxpackages/web/src/components/QuestionForm.tsxpackages/web/src/components/OptionGroup.tsxpackages/web/src/components/FreeTextInput.tsx