# Officer Browser Relay — Setup Guide

## Prerequisites
- Officer server running (`bun dev`)
- Google Chrome or Chromium-based browser on your machine
- Both machines on the same Tailscale network (or localhost for local dev)

## Steps

### 1. Verify relay is running
Check the server logs for `[browser-relay] listening on port 18792`.

### 2. Get your relay credentials
Open Officer dashboard → **Browser** screen (or `/browser`).
The setup card shows your **server address**, **port**, and **relay token**.

### 3. Load the extension in Chrome
1. Open `chrome://extensions`
2. Enable **Developer mode** (top-right toggle)
3. Click **Load unpacked**
4. Select `src/extensions/browser-relay/`

### 4. Configure the extension
1. The options page opens automatically after install (or right-click extension → Options)
2. Enter the **Server address** (Officer's IP — e.g. your Tailscale IP, or `127.0.0.1` for local)
3. Enter the **Port** (default `18792`)
4. Paste your **Relay token** from step 2
5. Click **Save** — status should show green "Relay reachable and authenticated"

### 5. Attach a tab
1. Navigate to any webpage in Chrome
2. Click the Officer Browser Relay extension icon in the toolbar
3. Badge shows **ON** (cyan) = attached

### 6. Use from the dashboard
1. Open `/browser` in Officer
2. Your attached tab appears in the left panel
3. Click it to see a live screenshot in the right panel
4. Use the URL bar to navigate, or the JS console to evaluate expressions

## Troubleshooting
- **Red `!` badge**: Relay not reachable — check server address/port/token
- **`…` badge**: Reconnecting — relay was temporarily unavailable
- **Tab not appearing**: Make sure the extension badge shows ON, and refresh the dashboard
- **Screenshot blank**: The tab may be on a `chrome://` page (not supported by CDP)