# Ticket 11.4 — Empty State for New Chat

**Phase**: 11 — UI/UX Polish
**Priority**: Medium
**Depends on**: None

## Description

When a new session is created or when the relay first connects with no message history, the MessageList is completely empty — just blank space. This provides no guidance to the user about what they can do or how to interact with the relay.

Add a welcoming empty state that appears when the message list has no messages. This should include:

- A greeting or prompt hint (e.g., "What would you like to work on?")
- Optionally, suggested starter prompts or capabilities
- The empty state disappears as soon as the first message is sent or received

This is a common UX pattern in chat applications (ChatGPT, Claude.ai, etc.).

## Acceptance Criteria

### AC1: Empty state renders for empty session
```gherkin
Given a session exists with no messages
When the user views that session
Then a centered empty state is displayed in the message area
And the empty state contains a prompt hint such as "What would you like to work on?"
```

### AC2: Prompt hint is displayed
```gherkin
Given the empty state is visible
When the user reads the empty state content
Then they see a brief, actionable prompt hint
And the hint is styled consistently with the app's design system
```

### AC3: Empty state disappears on first message
```gherkin
Given the empty state is currently visible
When the user sends a message or an assistant message is received
Then the empty state is immediately removed from the DOM
And the message list begins rendering the new message
```

### AC4: No flash during session switching
```gherkin
Given the user is switching from one session to another
When the new session is loading its message history
Then the empty state does not appear during the loading period
And the empty state only appears after loading completes if the session has zero messages
```

### AC5: Visual consistency
```gherkin
Given the empty state is displayed
When compared to other UI elements in the application
Then the typography, colors, and spacing match the app's design system
And the empty state is vertically and horizontally centered in the message area
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Empty state renders when messages array is empty | E2E | Empty state element is visible when session has no messages |
| Empty state contains prompt hint text | E2E | Expected hint text is present in the empty state element |
| Empty state disappears on first message | E2E | After sending a message, empty state element is removed from DOM |
| Empty state does not flash during session switch | E2E | Empty state is not briefly visible while loading a session with messages |
| Empty state hidden when messages exist | Unit | Component conditionally renders based on messages array length |

## Reference

- MessageList: `conduit/src/lib/public/components/chat/MessageList.svelte`
- Chat store: `conduit/src/lib/public/stores/chat.svelte.ts` (messages array)
- ConnectOverlay: `conduit/src/lib/public/components/overlays/ConnectOverlay.svelte` (existing overlay pattern)
