# Ticket 11.15 — Notification Sound & Browser Notification for Permissions

**Phase**: 11 — UI/UX Polish
**Priority**: Low
**Depends on**: 11.6, 11.12

## Description

When a permission request or ask-user question arrives and the user is on a different tab or has the phone in their pocket, there is no urgent notification beyond the push notification (which may be delayed or disabled). claude-relay layers multiple urgency signals:

1. Push notification (already implemented)
2. Browser notification via Notification API (separate from push — works without service worker)
3. Sound alert (ticket 11.12)
4. Favicon blink + tab title change (ticket 11.6)

This ticket ensures that the Browser Notification API is used in addition to push notifications for permission requests. Browser notifications are more reliable than push (no server round-trip) and work even when push is not configured.

## Acceptance Criteria

### AC1: Permission requests trigger a browser notification
```gherkin
Given the user has granted browser notification permission
And a permission request arrives from OpenCode
When the relay processes the permission event
Then a browser Notification API notification is displayed
And the notification appears in the system notification center
```

### AC2: Notification includes tool name and action
```gherkin
Given a permission request arrives for a tool write to "src/index.ts"
When the browser notification is displayed
Then the notification title includes the tool name and action (e.g. "Allow Write to src/index.ts?")
And the notification body includes relevant context about the action
```

### AC3: Clicking the notification focuses the relay tab
```gherkin
Given a browser notification is displayed for a permission request
When the user clicks on the notification
Then the browser focuses the relay tab
And the permission approval UI is visible
```

### AC4: Notifications respect the Browser toggle in settings
```gherkin
Given the user has disabled the "Browser" toggle in notification settings
When a permission request arrives
Then no browser Notification API notification is displayed
```

### AC5: Done events trigger browser notification when tab not focused
```gherkin
Given the user has granted browser notification permission
And the relay tab is not focused
When a processing run completes (done event)
Then a browser notification is displayed indicating completion
And the notification does not appear if the tab is focused
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Browser Notification triggered on permission event | Unit | Permission event handler calls `new Notification()` with correct title when permissions are granted |
| Notification content includes tool name | Unit | Notification title is constructed from the tool name and file path in the permission payload |
| Notification click focuses window | Unit | The notification's `onclick` handler calls `window.focus()` and `notification.close()` |
| Notification suppressed when tab focused | Unit | No notification is created when `document.hasFocus()` returns true |
| Notification respects settings toggle | Unit | When the "Browser" setting is disabled, the notification handler returns early without creating a notification |

## Reference

- claude-relay browser notifications: `../claude-relay/lib/public/modules/notifications.js`
- Permissions store: `conduit/src/lib/public/stores/permissions.svelte.ts`
- NotifSettings: `conduit/src/lib/public/components/overlays/NotifSettings.svelte`
- Notification utility: `conduit/src/lib/public/utils/notifications.ts`
