# Ticket 4.12 — Project Switcher Dropdown

**Phase**: 4 — Frontend UI
**Priority**: Medium
**Depends on**: 4.1, 2.1

## Description

Dropdown in the header bar for switching between multiple registered projects without navigating manually. Shows the current project name and allows quick switching.

## Acceptance Criteria

### AC1: Shows current project name in header

```gherkin
Given project "my-app" is active
When the header renders
Then it displays "my-app" (or the custom title) as the current project
And a dropdown arrow indicates it's clickable
```

### AC2: Dropdown lists all projects

```gherkin
When the user clicks the project name in the header
Then a dropdown appears listing all registered projects
And each entry shows: project title, directory path, client count
And the active project is highlighted
```

### AC3: Switching projects navigates

```gherkin
Given projects "my-app" (slug: my-app) and "api" (slug: api) are registered
When the user selects "api" from the dropdown
Then the browser navigates to /p/api/
And the WebSocket reconnects to the new project
And the chat loads the api project's session
```

### AC4: Single project hides switcher

```gherkin
Given only one project is registered
Then the project name is shown in the header
But it is not clickable and no dropdown arrow appears
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Single project detection | Unit | Returns flag when only one project registered |
| Header project name | E2E | Current project name displayed in header |
| Dropdown rendering | E2E | Click opens dropdown showing all projects with metadata |
| Project switch | E2E | Selecting a project navigates to correct slug URL |
| Single project mode | E2E | No dropdown trigger when only one project exists |

## Reference

- Claude-relay project switcher: `../claude-relay/lib/public/app.js` (lines 39-148)
