478a7f18e9
14 files in docs/wireframes/v2/ addressing 13 UX gaps from v1: - Theme spec with indigo brand, status tokens, terminal/diff tokens, dark mode, Geist typography, 6px radius, layered shadows - Wireframes for all pages with loading/error/empty states - Shared component specs (SaveIndicator, EmptyState, ErrorState, CommandPalette, ThemeToggle)
12 KiB
12 KiB
Inbox Page (v2)
Route: /inbox
Source: packages/web/src/routes/inbox.tsx
v1 -> v2 Changes
| Aspect | v1 | v2 |
|---|---|---|
| List error state | None | [AlertCircle] + "Failed to load conversations" + [Retry] |
| Detail error state | None | [AlertCircle] + "Failed to load conversation" + [Retry] |
| Action buttons | 3 buttons: Cancel, Dismiss, Send Answers | 2 buttons: [ Stop Agent ] (destructive) + [ Send Answers ] (primary) |
| Submit feedback | None | Button shows [spinner] Sending... during mutation |
| Submit error | Toast only | Inline red text below buttons: "Failed to send. Try again." |
| Empty state | Basic text | Centered empty state with description |
Default State (with conversations)
+=============================================================================+
| [CW] Initiatives Agents *3 [*Inbox*] (2) Settings [cmd-k] [sun] * |
+=============================================================================+
| |
| Inbox (2) [ Refresh ] |
| |
| Conversations | Question from blue-fox-7 |
| --------------------------+ 400px |
| +------------------------+| |
| | ? blue-fox-7 2m || "Should I use PKCE or implicit flow |
| | Auth System Overhaul || for the browser client? The spec |
| +------------------------+|| recommends PKCE but the existing |
| | ? green-bear-1 5m || code uses implicit." |
| | API Redesign || |
| +------------------------+| Your Answer |
| | +--------------------------------------------+|
| | | Use PKCE. We're deprecating implicit ||
| | | flow per OAuth 2.1 security BCP. ||
| | | ||
| | +--------------------------------------------+|
| | |
| | [ Stop Agent ] [ Send Answers ] |
+=============================================================================+
Conversation Card (in left list)
Waiting for response
+-------------------------------+
| ? blue-fox-7 2m | <-- status dot (orange) + name + time
| Auth System Overhaul | <-- initiative name
+-------------------------------+
Answered / completed
+-------------------------------+
| - green-bear-1 1h | <-- status dot (grey) + name + time
| API Redesign | <-- initiative name
+-------------------------------+
- Orange
?dot =waiting_for_input - Grey
-dot = answered or completed - Click selects conversation and shows detail panel
- Selected card gets
bg-mutedhighlight
Detail Panel (400px right)
Header
+----------------------------------------------+
| Question from blue-fox-7 |
| Auth System Overhaul . 2 minutes ago |
+----------------------------------------------+
Question + answer form
+----------------------------------------------+
| "Should I use PKCE or implicit flow |
| for the browser client? The spec |
| recommends PKCE but the existing |
| code uses implicit." |
| |
| Your Answer |
| +------------------------------------------+|
| | Use PKCE. We're deprecating implicit ||
| | flow per OAuth 2.1 security BCP. ||
| | ||
| +------------------------------------------+|
| |
| [ Stop Agent ] [ Send Answers ] |
+----------------------------------------------+
Button anatomy
[ Stop Agent ]--variant="destructive", stops the asking agent viastopAgentmutation. Replaces the v1 Cancel + Dismiss buttons. Confirmation viawindow.confirm(); Shift+click bypasses confirmation.[ Send Answers ]--variant="default"(primary), sends the response viaresumeAgentmutation. Disabled until answer textarea is non-empty.
Submit In Progress
| [ Stop Agent ] [ [spinner] Sending... ] |
[ Send Answers ]button shows aLoader2spinner + "Sending..." text- Button is
disabledduring mutation [ Stop Agent ]is also disabled during mutation to prevent conflicting actions
Submit Error
| |
| [ Stop Agent ] [ Send Answers ] |
| |
| Failed to send. Try again. |
+----------------------------------------------+
- Error text:
text-sm text-destructive, right-aligned below the buttons - Shown when
resumeAgentMutation.isErroris true - Cleared on next submit attempt
Empty Inbox
+=============================================================================+
| |
| Inbox (0) [ Refresh ] |
| |
| +-----------------------------------------------------------------------+ |
| | | |
| | [inbox] | |
| | No pending questions | |
| | Agents will ask questions here when they need input. | |
| | | |
| +-----------------------------------------------------------------------+ |
| |
+=============================================================================+
[inbox]icon:Inboxfrom Lucide,h-8 w-8 text-muted-foreground- Title:
text-sm font-medium - Description:
text-sm text-muted-foreground
List Loading State (skeleton rows)
+=============================================================================+
| |
| Inbox [ Refresh ] |
| |
| Conversations | |
| --------------------------+ 400px |
| +------------------------+| |
| | [.] ░░░░░░░░░░ ░░░ || |
| | ░░░░░░░░░░░░░░░░░ || Select an agent to view details |
| +------------------------+| |
| +------------------------+| |
| | [.] ░░░░░░░░░░ ░░░ || |
| | ░░░░░░░░░░░░░░░░░ || |
| +------------------------+| |
| +------------------------+| |
| | [.] ░░░░░░░░░░ ░░░ || |
| | ░░░░░░░░░░░░░░░░░ || |
| +------------------------+| |
| +------------------------+| |
| | [.] ░░░░░░░░░░ ░░░ || |
| | ░░░░░░░░░░░░░░░░░ || |
| +------------------------+| |
+=============================================================================+
Skeleton cards mirror conversation card anatomy: status dot placeholder, name + time line, initiative name line. Shimmer animation sweeps left-to-right on a 1.5s loop.
List Error State
+=============================================================================+
| |
| Inbox [ Refresh ] |
| |
| Conversations | |
| --------------------------+ 400px |
| | |
| [AlertCircle] | Select an agent to view details |
| Failed to load | |
| conversations | |
| | |
| [ Retry ] | |
| | |
+=============================================================================+
[AlertCircle]icon:h-6 w-6 text-destructive- Error message:
text-sm text-destructive [ Retry ]button:variant="outline" size="sm", callsagentsQuery.refetch()+messagesQuery.refetch()
Detail Error State
+=============================================================================+
| |
| Inbox (2) [ Refresh ] |
| |
| Conversations | |
| --------------------------+ 400px |
| +------------------------+| |
| | ? blue-fox-7 2m || [AlertCircle] |
| | Auth System Overhaul || Failed to load conversation |
| +------------------------+| |
| | ? green-bear-1 5m || [ Retry ] |
| | API Redesign || |
| +------------------------+| |
| | |
+=============================================================================+
- Shown when
questionsQuery.isErroris true for the selected agent [ Retry ]button callsquestionsQuery.refetch()
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.tsx