Add a connection health and diagnostics drawer

[raphant]

Problem

The top bar reports only LIVE, CONNECTED, or OFFLINE.
It does not show which workspace the relay watches, whether hooks are installed, which port is active, or when the last event arrived.
A workspace mismatch therefore looks like an empty dashboard.

Proposed change

Make the connection indicator open a diagnostics drawer.
Show the watched workspace, runtime selection, relay endpoint, hook state, last event time, and actionable warnings.

Acceptance criteria

• The drawer identifies the watched workspace and relay endpoint.
• The drawer reports Claude hook and Codex watcher state separately.
• A workspace mismatch has a direct explanation and suggested command.
• Users can copy a redacted diagnostic report.
• The drawer never includes prompts, credentials, or environment values.

Related upstream work

• patoles/agent-flow#65 adds support for sessions outside the starting workspace.

Source

• web/components/agent-visualizer/top-bar.tsx renders the current indicator.
• web/hooks/use-vscode-bridge.ts tracks the current connection state.