Add exponential backoff and status indicator to brainstorm WebSocket client

[chuanghiduoc]

Summary

The brainstorm companion's WebSocket client (helper.js) reconnected with a fixed 1-second delay and provided no visual feedback when the connection dropped. If a user's laptop slept or the server restarted, the browser showed "Connected" indefinitely while the WebSocket was dead, and events were silently queued without any indication.

Changes

skills/brainstorming/scripts/helper.js:

• Exponential backoff: reconnect delay starts at 500ms, doubles each attempt, caps at 30s. Resets to 500ms on successful connection.
• Status indicator: updates the header .status element — Connected (green), Reconnecting… (yellow), Disconnected (red) — with matching dot color.
• onerror handler: delegates to onclose to avoid duplicate reconnect attempts.
• ws = null on close: prevents sendEvent() from writing to a dead socket.
• clearTimeout: cancels pending reconnect timer before creating a new connection.

skills/brainstorming/scripts/frame-template.html:

• Status dot ::before pseudo-element now uses a CSS custom property (--status-color) instead of hardcoded var(--success), allowing JavaScript to update the dot color dynamically.

Existing tests

All 24 passing brainstorm-server tests remain passing (the 1 pre-existing failure — "serves waiting page" expects "Waiting for Claude" but server says "Waiting for the agent" — is unrelated, introduced in v5.0.4). All 31 WebSocket protocol tests pass.

Test plan

• Start brainstorm server, open companion in browser → header shows "Connected" (green dot)
• Kill the server process → header changes to "Disconnected" (red dot)
• Restart server → header auto-recovers to "Connected" (green dot) after backoff
• Verify events queued during disconnect are sent on reconnection

[Copilot]

Pull request overview

Improves the brainstorm companion frame’s WebSocket resilience and user feedback by adding exponential reconnection backoff and a UI connection status indicator.

Changes:

• Add exponential backoff reconnect logic to the WebSocket client (initial 500ms, cap 30s, reset on successful connect).
• Add header status text + color updates for connected/reconnecting/disconnected states.
• Update the status dot styling to use a CSS custom property so JS can change the dot color dynamically.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
skills/brainstorming/scripts/helper.js	Implements reconnect backoff logic and updates .header .status to reflect connection state.
skills/brainstorming/scripts/frame-template.html	Switches the status dot color to --status-color so JS can control it.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[chuanghiduoc]

Thanks for the review! Both comments addressed in 824d4f2:

1. onclose now shows "Reconnecting…" instead of "Disconnected" — since a reconnect attempt is always scheduled, showing "Disconnected" during the backoff window was misleading. The yellow "Reconnecting…" state correctly reflects that the client is actively retrying.

2. Removed empty onerror handler — it was a no-op since onclose always fires after onerror per the WebSocket spec. Removing it eliminates dead code and one less handler to reason about.