# Ticket 11.13 — Fix InfoPanels Data Props

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

## Description

The `<InfoPanels />` component is rendered in ChatLayout.svelte (line 304) without any data props — `usageData`, `statusData`, and `contextData` are never passed. This means the Usage, Status, and Context panels always show "--" placeholder values for all fields.

The data for these panels should come from:
- **Usage**: The `result` WebSocket message (contains cost, token counts, cache stats)
- **Status**: The `connection_status` and `status` WebSocket messages (OpenCode health, SSE state)
- **Context**: The `context_usage` field from result messages or session metadata (context window percentage used)

The ws.svelte.ts store already dispatches these message types but the data isn't being piped to InfoPanels.

## Acceptance Criteria

### AC1: Usage panel shows session cost and token counts
```gherkin
Given the user is in an active session
When a message exchange completes and a result message is received
Then the Usage panel shows the current session cost
And the Usage panel shows input token count and output token count
And the Usage panel shows cache read and cache creation stats
```

### AC2: Status panel shows connection health
```gherkin
Given the relay is connected to OpenCode
When the user opens the Status info panel
Then the panel shows the OpenCode connection status (connected/disconnected)
And the panel shows the SSE stream health (active/inactive)
And the panel shows the active session ID
```

### AC3: Context panel shows context window usage
```gherkin
Given a result message with context usage data is received
When the user views the Context info panel
Then the panel shows the context window usage as a percentage
And a colored progress bar reflects the usage level
And the bar color changes based on thresholds (green < 50%, yellow 50-80%, red > 80%)
```

### AC4: Data updates in real-time
```gherkin
Given the info panels are open
When a new result message arrives with updated cost and token counts
Then the Usage panel values update immediately without page refresh
And the Context panel percentage updates accordingly
```

### AC5: Context mini-bar in input area updates
```gherkin
Given the input area displays a context usage mini-bar
When context usage data is received from a result message
Then the mini-bar width reflects the current context window percentage
And the mini-bar color matches the threshold-based coloring (green/yellow/red)
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Result message updates usage data in store | Unit | Receiving a `result` WS message populates the usage store with cost, tokens, and cache stats |
| Status message updates status data in store | Unit | Receiving `connection_status` and `status` WS messages populates the status store fields |
| Context usage calculation from token counts | Unit | Given input/output tokens and a max context size, the percentage is calculated correctly |
| InfoPanels renders data instead of placeholders | E2E | After a message exchange, Usage panel shows numeric values instead of "--" placeholders |
| Context mini-bar color thresholds | E2E | Mini-bar is green below 50%, yellow between 50-80%, and red above 80% usage |

## Reference

- InfoPanels component: `conduit/src/lib/public/components/overlays/InfoPanels.svelte`
- ChatLayout (missing props): `conduit/src/lib/public/components/layout/ChatLayout.svelte` (line 304)
- WS store dispatch: `conduit/src/lib/public/stores/ws.svelte.ts`
- UI store context: `conduit/src/lib/public/stores/ui.svelte.ts`
- InputArea mini-bar: `conduit/src/lib/public/components/layout/InputArea.svelte` (lines 181-202)
