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)
8.8 KiB
8.8 KiB
Review Tab (v2)
Route: /initiatives/$id (Review tab)
Source: packages/web/src/components/review/ReviewTab.tsx
v1 -> v2 Changes
| Aspect | v1 | v2 |
|---|---|---|
| Loading state | Plain "Loading diff..." text | Centered [spinner] + "Loading diff..." text |
| Error state | None | [AlertCircle] + error message + [Retry] button |
| Unresolved threads | Count in diff header only | Count in header + [v] jump-to-next button in sidebar |
| Empty state | "No changes in this phase" | [check-circle] icon + "No changes to review" + description |
Default State (with diff and threads)
+=============================================================================+
| Diff: src/auth/oauth.ts 3 unresolved | Threads [v] |
| ----------------------------------------------------------- 300px |
| @@ -12,6 +12,14 @@ | |
| import { generatePKCE } from './pkce'; | Thread #1 |
| +export async function authorize( | Line 14 |
| + client: OAuthClient, | "Should we |
| + scopes: string[] | validate |
| +) { | scopes?" |
| + const { verifier, challenge } = generatePKCE(); | [Reply___] |
| + // ... | [Resolve] |
| +} | |
| | Thread #2 |
| export function validateToken( | Line 28 |
| - token: string | "Add expiry |
| + token: string, | check here" |
| + options?: ValidateOptions | [RESOLVED] |
| | |
+=============================================================================+
[v] is the "Jump to next unresolved" button. Clicking it scrolls the diff viewer
to the next unresolved comment thread. Disabled when all threads are resolved.
Diff header anatomy
+------------------------------------------------------------------------+
| Diff: <file-path> N unresolved |
+------------------------------------------------------------------------+
- File path is the currently-focused file
- "N unresolved" uses
text-status-warning-fgwhen N > 0,text-muted-foregroundwhen 0
Sidebar header anatomy
+---------------------------+
| Threads [v] |
+---------------------------+
[v](ChevronDown icon) scrolls to next unresolved thread in diff viewer- Tooltip: "Jump to next unresolved"
Loading State
+=============================================================================+
| |
| |
| [spinner] |
| Loading diff... |
| |
| |
+=============================================================================+
Centered vertically and horizontally within the tab content area.
Spinner uses animate-spin on a Loader2 Lucide icon.
Text is text-sm text-muted-foreground.
Error State
+=============================================================================+
| |
| |
| [AlertCircle] |
| Failed to load diff data |
| |
| [ Retry ] |
| |
+=============================================================================+
[AlertCircle]icon:h-8 w-8 text-destructive- Error message:
text-sm text-destructive [ Retry ]button:variant="outline" size="sm", callsdiffQuery.refetch()
Empty State (no proposals/diffs)
+=============================================================================+
| |
| [check-circle] |
| No changes to review |
| All proposals have been reviewed. |
| |
+=============================================================================+
[check-circle]icon:h-8 w-8 text-status-success-fg- Title:
text-sm font-medium - Description:
text-sm text-muted-foreground
This replaces the v1 "No phases pending review" plain text.
Full Page Context (within initiative detail)
+=============================================================================+
| [CW] [*Initiatives*] Agents *3 Inbox (2) Settings [cmd-k] [sun] * |
+=============================================================================+
| < Back |
| Auth System Overhaul [ACTIVE] [REVIEW] [git] cw/auth [P] backend |
| [ Content ] [ Plan ] [ Execution ] [*Review*] |
+-----------------------------------------------------------------------------|
| |
| Phase: [*Phase 2: OAuth*] [Phase 3: UI] |
| |
| +-----------------------------------------------------------+ |
| | [play] Start Preview | |
| +-----------------------------------------------------------+ |
| |
| Diff: src/auth/oauth.ts 3 unresolved | Threads [v] |
| ---------------------------------------------------+ 300px |
| @@ -12,6 +12,14 @@ | |
| import { generatePKCE } from './pkce'; | Thread #1 |
| +export async function authorize( | Line 14 |
| + client: OAuthClient, | "Should we |
| + scopes: string[] | validate |
| +) { | scopes?" |
| + const { verifier, challenge } = ... | [Reply___] |
| + // ... | [Resolve] |
| +} | |
| | Thread #2 |
| export function validateToken( | Line 28 |
| - token: string | "Add expiry |
| + token: string, | check here" |
| + options?: ValidateOptions | [RESOLVED] |
| | |
+=============================================================================+
Thread States
Unresolved thread (in sidebar)
+---------------------------+
| Thread #1 |
| Line 14 |
| "Should we validate |
| scopes?" |
| [Reply_______________] |
| [Resolve] |
+---------------------------+
Resolved thread (in sidebar)
+---------------------------+
| Thread #2 |
| Line 28 |
| "Add expiry check here" |
| [RESOLVED] |
+---------------------------+
- Resolved threads are visually dimmed:
opacity-60 [RESOLVED]badge usesbg-status-success-bg text-status-success-fg
Source
packages/web/src/components/review/ReviewTab.tsxpackages/web/src/components/review/DiffViewer.tsxpackages/web/src/components/review/ReviewSidebar.tsxpackages/web/src/components/review/PreviewPanel.tsxpackages/web/src/components/review/FileCard.tsx