feat: self-healing sidebar — reconnect banner, state machine, copy button

Sidebar UI now handles disconnection gracefully:
- Connection state machine: connected → reconnecting → dead
- Amber pulsing banner during reconnect (2s retry, 30 attempts)
- Red "Server offline" banner with Reconnect + Copy /connect-chrome buttons
- Green "Reconnected" toast that fades after 3s on successful reconnect
- Copy button lets user paste /connect-chrome into any Claude Code session

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-03-21 19:32:41 -07:00
parent 7e8684f923
commit 530a4ef22c
3 changed files with 148 additions and 2 deletions
+9
View File
@@ -5,6 +5,15 @@
<link rel="stylesheet" href="sidepanel.css">
</head>
<body>
<!-- Connection status banner -->
<div class="conn-banner" id="conn-banner" style="display:none">
<span class="conn-banner-text" id="conn-banner-text">Reconnecting...</span>
<div class="conn-banner-actions" id="conn-banner-actions" style="display:none">
<button class="conn-btn" id="conn-reconnect">Reconnect</button>
<button class="conn-btn conn-copy" id="conn-copy" title="Copy command">/connect-chrome</button>
</div>
</div>
<!-- Chat Tab (default, full height) -->
<main id="tab-chat" class="tab-content active">
<div class="chat-messages" id="chat-messages">