feat(vela-ui): add voice session shell

Add a minimal UI shell that connects to the gateway WebSocket and exposes developer-visible session state. Align the architecture, protocol, setup, integration, and backlog docs with the current UI increment.

docs/protocol.md

@@ -11,6 +11,12 @@ Current gateway baseline:
 - the gateway sends `session.ready` and `session.state` immediately after a successful socket upgrade
 - the gateway accepts JSON text messages only in the shared envelope shape
 
+Current UI baseline:
+
+- the browser opens a WebSocket directly to `/ws`
+- the UI tracks connection status separately from gateway session status
+- the UI currently consumes server events but does not send `session.start` or any audio events yet
+
 ## WebSocket Message Envelope
 
 Every WebSocket message uses one envelope format:
@@ -57,6 +63,24 @@ type ClientEvent =
 - invalid envelopes or unsupported client event names produce `error` with code `invalid_message`
 - malformed WebSocket frames are rejected without crashing the gateway process
 
+### UI connection shell behavior
+
+The UI currently exposes a small browser-side connection state machine for the WebSocket transport:
+
+```text
+not connected
+ → connecting
+ → connected
+ → disconnected
+ → error
+```
+
+Notes:
+
+- this UI state is transport-oriented and is separate from the shared gateway `session.state` payload
+- `session.state` currently reflects the gateway session phase (`idle`, `listening`, `thinking`, `speaking`)
+- the UI treats malformed server messages, browser WebSocket errors, and gateway `error` events as safe error states instead of throwing
+
 ### Server → Client
 
 ```ts