From c5a57978c13c2db4e5614604325b9360445688a0 Mon Sep 17 00:00:00 2001
From: Garry Tan <garrytan@gmail.com>
Date: Thu, 2 Apr 2026 19:15:46 -0700
Subject: [PATCH] feat: detailed step-by-step status in sidebar loading screen

Replace useless "Connecting..." with real-time debug info:
- "Looking for browse server... (attempt N)"
- Shows port, server responding status, token status
- Shows chrome.runtime errors if extension messaging fails
- Tells user to run /open-gstack-browser if server not found
---
 extension/sidepanel.html |  3 ++-
 extension/sidepanel.js   | 54 ++++++++++++++++++++++++++--------------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/extension/sidepanel.html b/extension/sidepanel.html
index 8b013715..d6206e6a 100644
--- a/extension/sidepanel.html
+++ b/extension/sidepanel.html
@@ -22,7 +22,8 @@
     <div class="chat-messages" id="chat-messages">
       <div class="chat-loading" id="chat-loading">
         <div class="chat-loading-spinner"></div>
-        <p>Connecting...</p>
+        <p id="loading-status">Looking for browse server...</p>
+        <pre id="loading-debug" class="muted" style="font-size:11px; font-family:'JetBrains Mono',monospace; white-space:pre-wrap; margin-top:8px; color:#71717A;"></pre>
       </div>
       <div class="chat-welcome" id="chat-welcome" style="display:none">
         <div class="chat-welcome-icon">G</div>
diff --git a/extension/sidepanel.js b/extension/sidepanel.js
index 64c86255..c7c58fa5 100644
--- a/extension/sidepanel.js
+++ b/extension/sidepanel.js
@@ -1391,32 +1391,50 @@ document.getElementById('conn-copy').addEventListener('click', () => {
   });
 });
 
-// Try to connect immediately, retry every 2s until connected
+// Try to connect immediately, retry every 2s until connected.
+// Show exactly what's happening at each step so the user is never
+// staring at a blank "Connecting..." with no info.
 let connectAttempts = 0;
+function setLoadingStatus(msg, debug) {
+  const status = document.getElementById('loading-status');
+  const dbg = document.getElementById('loading-debug');
+  if (status) status.textContent = msg;
+  if (dbg && debug !== undefined) dbg.textContent = debug;
+}
+
 function tryConnect() {
   connectAttempts++;
-  const loadingEl = document.getElementById('chat-loading');
-  if (loadingEl) {
-    const detail = connectAttempts <= 1 ? 'Connecting...'
-      : `Connecting... (attempt ${connectAttempts})`;
-    const p = loadingEl.querySelector('p');
-    if (p) p.textContent = detail;
-  }
+  setLoadingStatus(
+    `Looking for browse server... (attempt ${connectAttempts})`,
+    `Asking background.js for server port...`
+  );
+
   chrome.runtime.sendMessage({ type: 'getPort' }, (resp) => {
+    if (chrome.runtime.lastError) {
+      setLoadingStatus(
+        `Extension error (attempt ${connectAttempts})`,
+        `chrome.runtime.sendMessage failed:\n${chrome.runtime.lastError.message}`
+      );
+      setTimeout(tryConnect, 2000);
+      return;
+    }
+
+    const port = resp?.port || '?';
+    const connected = resp?.connected || false;
+    const hasToken = !!(resp?.token);
+
     if (resp && resp.port && resp.connected) {
+      setLoadingStatus(
+        `Server found on port ${port}, connecting...`,
+        `token: ${hasToken ? 'yes' : 'NO'}\nStarting SSE + chat polling...`
+      );
       const url = `http://127.0.0.1:${resp.port}`;
       updateConnection(url, resp.token || null);
     } else {
-      // Show debug info after 5 failed attempts
-      if (connectAttempts >= 5 && loadingEl) {
-        const p = loadingEl.querySelector('p');
-        if (p) {
-          const port = resp?.port || '?';
-          const connected = resp?.connected || false;
-          const hasToken = !!(resp?.token);
-          p.textContent = `Waiting for server... port:${port} connected:${connected} token:${hasToken} (attempt ${connectAttempts})`;
-        }
-      }
+      setLoadingStatus(
+        `Waiting for server... (attempt ${connectAttempts})`,
+        `port: ${port}\nserver responding: ${connected}\ntoken: ${hasToken ? 'yes' : 'no'}\n\n${!connected ? 'The browse server may still be starting.\nRun /open-gstack-browser in Claude Code.' : 'Server found but not healthy yet.'}`
+      );
       setTimeout(tryConnect, 2000);
     }
   });