# Review Tab (`?tab=review`)

Two-column layout: diff viewer (main) + review sidebar (300px). Shows code diffs for phases pending review.

## Default State

```
+============================================================================+
|  < Back                                                                    |
|  Auth System Overhaul    [ACTIVE]  [REVIEW]  [git] main  [P] backend     |
|  [ Content ]  [ Plan ]  [ Execution ]  [*Review*]                        |
+============================================================================+
|                                                                 |          |
|  Phase: [Phase 2: OAuth] [Phase 3: UI]    <-- pill selector    | Review   |
|                                                                 |          |
|  +-----------------------------------------------------------+ | Phase 2  |
|  | [play] Start Preview                                      | | OAuth    |
|  +-----------------------------------------------------------+ | Flow     |
|                                                                 |          |
|  +-----------------------------------------------------------+ |[PENDING] |
|  | src/auth/oauth.ts                              +42  -8    | |          |
|  |---------------------------------------------------------  | | Author   |
|  |  37 |   import { OAuth2Client } from 'google...'         | | agent-3  |
|  |  38 | + export async function initOAuth(config) {         | |          |
|  |  39 | +   const client = new OAuth2Client({               | | Branch   |
|  |  40 | +     clientId: config.clientId,                    | | cw/auth  |
|  |  41 | +     clientSecret: config.clientSecret,            | |  -> main |
|  |  42 | +   });                                            | |          |
|  |  43 | +   return client;                                  | |----------+
|  |  44 | + }                                                 | |          |
|  |     |                                                     | |[Approve] |
|  |  58 | - function legacyAuth() {                           | |[Request  |
|  |  59 | -   // old implementation                           | | Changes] |
|  |  60 | - }                                                 | |          |
|  |     |                                                     | |----------+
|  |  [+ Add comment]                                         | | Discuss. |
|  +-----------------------------------------------------------+ | 3 cmnts  |
|                                                                 | 2 reslvd |
|  +-----------------------------------------------------------+ | 1 open   |
|  | src/auth/routes.ts                             +28  -3    | |----------+
|  |---------------------------------------------------------  | | Changes  |
|  |  12 | + router.get('/auth/login', ...                     | | 4 files  |
|  |  13 | + router.get('/auth/callback', ...                  | | +120 -45 |
|  |  14 | + router.post('/auth/logout', ...                   | |----------+
|  +-----------------------------------------------------------+ | Files    |
|                                                                 | oauth.ts |
|                                                                 |  (2) +42 |
|                                                                 | routes.ts|
|                                                                 |      +28 |
|                                                                 | config.ts|
|                                                                 |      +35 |
|                                                                 | test.ts  |
|                                                                 |      +15 |
+============================================================================+
```

## Phase Selector (multiple phases pending review)

```
  Phase: [*Phase 2: OAuth*]  [Phase 3: UI Components]
          ^^^^^^^^^^^^^^^^
          active pill (filled background)
```

Only shown when 2+ phases are in `pending_review` status.

## Preview Panel

### No Preview Running

```
+------------------------------------------------------------------------+
|  [play]  Start Preview                                                 |
+------------------------------------------------------------------------+
```

### Building

```
+------------------------------------------------------------------------+
|  [spinner]  Building preview...                                        |
+------------------------------------------------------------------------+
```

### Running

```
+------------------------------------------------------------------------+
|  [*]  Preview running: http://localhost:9100/preview/abc123    [ Stop ] |
+------------------------------------------------------------------------+
```

### Failed

```
+------------------------------------------------------------------------+
|  [!]  Preview failed                                          [ Retry ]|
+------------------------------------------------------------------------+
```

## Diff Viewer (left panel)

### File Card (expanded)

```
+------------------------------------------------------------------------+
| src/auth/oauth.ts                                         +42  -8      |
|------------------------------------------------------------------------|
|  37 |   import { OAuth2Client } from 'google-auth-library';            |
|  38 | + export async function initOAuth(config: OAuthConfig) {          |
|  39 | +   const client = new OAuth2Client({                             |
|  40 | +     clientId: config.clientId,                                  |
|  41 | +     clientSecret: config.clientSecret,                          |
|  42 | +   });                                                           |
|  43 | +   return client;                                                |
|  44 | + }                                                               |
|     |   ...                                                             |
|  58 | - function legacyAuth() {                                         |
|  59 | -   // old implementation                                         |
|  60 | - }                                                               |
|     |                                                                   |
|  [+ Add comment]                                                       |
+------------------------------------------------------------------------+
```

- Unified diff format with line numbers
- Green `+` lines for additions, red `-` lines for deletions
- Context lines (unchanged) in grey
- Inline comment form: click `[+ Add comment]` to expand textarea
- Hunk separators (`...`) between non-contiguous sections

### Inline Comment Thread

```
|  42 | +   });                                                           |
|     | +--------------------------------------------------------------+ |
|     | | user: Should this use env vars instead of config?            | |
|     | |        [Resolve]                                             | |
|     | |                                                              | |
|     | | [Reply...________________________________]  [Comment]         | |
|     | +--------------------------------------------------------------+ |
|  43 | +   return client;                                                |
```

## Review Sidebar (300px, right)

```
+---------------------------+
|  Review                   |
|                           |
|  Phase 2: OAuth Flow      |
|  [PENDING REVIEW]         |
|                           |
|  Author                   |
|  agent-3 (blue-fox)       |
|                           |
|  Branch                   |
|  cw/auth-overhaul         |
|    -> main                |
|                           |
|---------------------------|
|                           |
|  [ Approve ]              |     <-- disabled if unresolved threads
|  [ Request Changes ]      |
|                           |
|  -- or after action: --   |
|  [v] Approved             |
|  [!] Changes Requested    |
|                           |
|---------------------------|
|                           |
|  Discussions              |
|  3 comments               |
|  2 resolved               |
|  1 open                   |
|                           |
|---------------------------|
|                           |
|  Changes                  |
|  4 files changed          |
|  +120 additions           |
|  -45 deletions            |
|                           |
|---------------------------|
|                           |
|  Files                    |
|  oauth.ts      (2) +42-8 |     <-- (2) = comment count, clickable
|  routes.ts         +28-3  |
|  config.ts         +35-0  |
|  test.ts           +15-2  |
|                           |
+---------------------------+
```

- File list items are clickable (scrolls diff viewer to that file)
- Comment count shown per file
- Approve button disabled when unresolved comment threads exist

## Empty State

```
+============================================================================+
|                                                                            |
|                   No phases pending review                                 |
|                                                                            |
+============================================================================+
```

## Source

- `packages/web/src/components/review/ReviewTab.tsx`
- `packages/web/src/components/review/DiffViewer.tsx`
- `packages/web/src/components/review/ReviewSidebar.tsx`
- `packages/web/src/components/review/PreviewPanel.tsx`
- `packages/web/src/components/review/FileCard.tsx`