fix(ui): show WebSocket connection indicator on no-rooms screen (Bug #5)

[sanity]

Problem

A brand-new user accepting their first River invite had zero visual feedback when the WebSocket to their local Freenet node was broken. The connection-status pill lived inside MemberList, which returns empty when no room is selected (CURRENT_ROOM = None). Result: invite-flow and empty-state users couldn't tell their setup was disconnected.

Reported by Ivvor on Matrix (2026-05-17). Ivvor only noticed because Delta surfaces a red indicator; River was silent.

"I had no connection indicator in the bottom right to signify my setup wasn't fully connected to the node. Basically we need [a] websocket connected indicator that works even with no rooms joined."

Approach

Extract the indicator into a small reusable ConnectionStatusIndicator component and render it in RoomList's bottom section — the always-rendered left rail — instead of inside MemberList. One source of truth, always visible regardless of room selection.

• ui/src/components/members.rs — extracts ConnectionStatusIndicator, removes the inline render from MemberList, adds a data-testid and aria-label so the pill is asserted from tests without depending on Tailwind classes.
• ui/src/components/room_list.rs — renders ConnectionStatusIndicator between the "Import ID" button and the "Built:" timestamp.

Alternatives considered:

• Add a parallel indicator to the Welcome screen: more places to keep in sync, two sources of truth.
• Wrap the entire member panel behind a no-room conditional that still renders the pill: more invasive than necessary; the left rail is structurally the right home for an app-wide status indicator.

Testing

• New ui/tests/connection-status-indicator.spec.ts pins three invariants for Bug Move rabbit logo to the left, it isn't centered #5:
  • indicator is rendered on initial load,
  • indicator lives inside the Rooms rail, NOT the Members rail (so a future panel-empty regression in MemberList can't reintroduce the bug),
  • indicator remains visible when no room is selected (Welcome screen up).
• Full cargo make test workspace suite green.
• Full npx playwright test --project=chromium suite green — 34/34 including the 3 new tests.
• Manual verification via Playwright MCP on both build-ui-no-sync (empty rooms list) and build-ui-example-no-sync (populated rooms list): pill renders in the bottom of the room rail with the appropriate "Error: WebSocket error" state both before and after a room is selected.

Risk

UI-only change. No delegate or contract WASM touched. ConnectionStatusIndicator reads exactly the same SYNC_STATUS GlobalSignal with the same read() pattern as the previous inline code — visual semantics are byte-identical to the existing indicator.

[AI-assisted - Claude]

[sanity]

Internal four-perspective review + Codex review — round 1

Findings

Source	Severity	Finding
Skeptical / Codex	P2	Round-1 fix only moved the indicator to the left rail, which is hidden on mobile (default `MOBILE_VIEW` is Chat). A mobile user with no rooms lands on the Welcome screen and still doesn't see the indicator until they tap the hamburger.
Code-first	none	Diff matches stated intent; pure render-side change, no semantic difference vs. pre-fix indicator.
Testing	minor	Test 3's name said "after deselecting" but no deselection happened — clarified.
Big-picture	none	No tests removed, no assertions weakened, no anti-patterns.

Resolution (commit c2d9c9f)

• Added an inline (`md:hidden`) `ConnectionStatusIndicator` to the Conversation panel's no-room Welcome screen so mobile users with no rooms see the signal at first paint. Desktop is unaffected (the inline copy is hidden by `md:hidden`).
• Reorganised the Playwright tests into desktop (1280px) and mobile (375x812) describe blocks. Both placements now have regression coverage. All 35 chromium tests pass.

[AI-assisted - Claude]