# Ticket 11.6 — Favicon & Tab Title Activity Indicators

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

## Description

Add visual feedback to the browser tab via favicon and title changes. claude-relay cycles favicon colors during I/O activity and alternates the favicon + title ("⚠ Input needed") for urgent permission requests. conduit has no favicon feedback — the tab looks identical whether idle, processing, or awaiting input.

Implement:
- Favicon color changes: green (connected), orange pulse (processing), red (error/permission needed)
- Tab title prefix: "⚠ Input needed — " when permission or question is pending
- Title reverts when permission is resolved
- Favicon blinking for urgent attention (permission requests)

## Acceptance Criteria

### AC1: Favicon changes color when processing
```gherkin
Given the relay is connected and idle (green favicon)
When a processing event is received from the WebSocket
Then the favicon changes to an orange/accent color
And the orange color pulses to indicate activity
```

### AC2: Favicon turns red and blinks for permission requests
```gherkin
Given the relay is connected
When a permission request or ask-user question arrives
Then the favicon changes to red
And the favicon blinks at a visible interval (e.g. 500ms on/off)
And the blinking continues until the permission is resolved
```

### AC3: Tab title changes for pending permissions
```gherkin
Given the tab title is "OpenCode Relay"
When a permission request or ask-user question is pending
Then the tab title changes to "⚠ Input needed — OpenCode Relay"
```

### AC4: Title reverts when permission is resolved
```gherkin
Given the tab title is "⚠ Input needed — OpenCode Relay"
When the user approves or denies the permission request
Then the tab title reverts to "OpenCode Relay"
```

### AC5: Favicon returns to green when idle
```gherkin
Given the favicon is orange (processing) or red (permission)
When processing completes and no permissions are pending
Then the favicon returns to green (connected/idle state)
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Favicon color state machine | Unit | Transitions between green (idle), orange (processing), red (permission) states are correct |
| Title prefix toggling | Unit | Title adds "⚠ Input needed — " prefix on permission pending and removes it on resolution |
| Permission pending triggers title change | E2E | When a permission request arrives, the document title includes the warning prefix |
| Permission resolved reverts title | E2E | After approving a permission, the document title no longer includes the warning prefix |
| Favicon blink interval | Unit | Blink timer starts on permission pending and clears on resolution |

## Reference

- claude-relay favicon: `../claude-relay/lib/public/app.js` (favicon blinking, color cycling)
- claude-relay title change: `../claude-relay/lib/public/modules/notifications.js` (urgent blink)
- Permissions store: `conduit/src/lib/public/stores/permissions.svelte.ts`
