@nockdev/hsa 1.2.4 → 1.2.7

package/dashboard.html

@@ -1157,6 +1157,33 @@
         opacity: 0.4;
       }
 
+      /* ERROR BANNER */
+      .error-banner {
+        display: none;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        background: var(--red-subtle);
+        border-bottom: 1px solid rgba(248, 81, 73, 0.3);
+        color: var(--red);
+        font-size: 12px;
+        font-family: var(--font-mono);
+        grid-area: header;
+      }
+      .error-banner.visible {
+        display: flex;
+      }
+      .error-banner .error-dismiss {
+        margin-left: auto;
+        cursor: pointer;
+        opacity: 0.6;
+        background: none;
+        border: none;
+        color: var(--red);
+        font-size: 14px;
+      }
+      .error-banner .error-dismiss:hover { opacity: 1; }
+
       /* RESPONSIVE */
       @media (max-width: 1200px) {
         .kpi-grid {
@@ -1240,6 +1267,12 @@
           </button>
         </div>
       </header>
+      <!-- ERROR BANNER -->
+      <div class="error-banner" id="errorBanner">
+        <span>⚠</span>
+        <span id="errorBannerMsg">Connection failed</span>
+        <button class="error-dismiss" onclick="hideErrorBanner()">✕</button>
+      </div>
 
       <!-- CONTEXT SELECTOR BAR -->
       <div class="context-bar">
@@ -1481,7 +1514,7 @@
    STATE
    ================================================================ */
       let endpoint =
-        localStorage.getItem("hsa_endpoint") || "http://localhost:13100";
+        localStorage.getItem("hsa_endpoint") || window.location.origin;
       let autoRefresh = true;
       let refreshInterval = null;
       let cacheHistory = [];
@@ -1493,7 +1526,9 @@
       let sessionSSERetryMs = 1000;
       let sessionSSERetryCount = 0;
       const MAX_SSE_RETRIES = 5;
+      let sseReconnectTimer = null;
       let fetchErrorCount = 0;
+      let dashboardAbortCtrl = null;
       const BASE_REFRESH_MS = 5000;
       const MAX_REFRESH_MS = 30000;
 
@@ -1510,6 +1545,11 @@
         setStatus("connecting");
         fetchErrorCount = 0; // Reset error counter on manual connect
         sessionSSERetryCount = 0; // Reset SSE retries so reconnect works
+        sessionSSERetryMs = 1000; // Reset backoff delay
+        if (sseReconnectTimer) {
+          clearTimeout(sseReconnectTimer);
+          sseReconnectTimer = null;
+        }
         fetchDashboard();
         fetchSessions();
         connectSessionSSE(); // Re-establish SSE stream
@@ -1518,6 +1558,16 @@
       function setStatus(status) {
         const dot = document.getElementById("statusDot");
         dot.className = "logo-dot " + (status === "connected" ? "" : status);
+        if (status === "connected") hideErrorBanner();
+      }
+
+      function showErrorBanner(msg) {
+        const banner = document.getElementById("errorBanner");
+        document.getElementById("errorBannerMsg").textContent = msg || "Connection failed";
+        banner.classList.add("visible");
+      }
+      function hideErrorBanner() {
+        document.getElementById("errorBanner").classList.remove("visible");
       }
 
       function toggleAutoRefresh() {
@@ -1557,8 +1607,11 @@
         startRefresh();
       }
       function updateRefreshBadge(badge) {
-        const ms = Math.min(BASE_REFRESH_MS * Math.pow(2, fetchErrorCount), MAX_REFRESH_MS);
-        badge.textContent = ms >= 1000 ? (ms / 1000) + "s" : ms + "ms";
+        const ms = Math.min(
+          BASE_REFRESH_MS * Math.pow(2, fetchErrorCount),
+          MAX_REFRESH_MS,
+        );
+        badge.textContent = ms >= 1000 ? ms / 1000 + "s" : ms + "ms";
       }
 
       /* ================================================================
@@ -1617,10 +1670,16 @@
    FETCH & RENDER
    ================================================================ */
       async function fetchDashboard() {
+        // Cancel any in-flight request to prevent NS_BINDING_ABORTED
+        if (dashboardAbortCtrl) dashboardAbortCtrl.abort();
+        dashboardAbortCtrl = new AbortController();
+        const ctrl = dashboardAbortCtrl;
         try {
           let url = endpoint + "/api/dashboard";
           // Note: /api/dashboard doesn't support session filtering yet, handled client-side
-          const res = await fetch(url, { signal: AbortSignal.timeout(15000) });
+          const timeoutId = setTimeout(() => ctrl.abort(), 8000);
+          const res = await fetch(url, { signal: ctrl.signal });
+          clearTimeout(timeoutId);
           if (!res.ok) throw new Error("HTTP " + res.status);
           const data = await res.json();
           setStatus("connected");
@@ -1630,10 +1689,13 @@
           }
           render(data);
         } catch (err) {
+          if (err.name === "AbortError") return; // Intentional cancel, ignore
           setStatus("error");
           fetchErrorCount++;
           adjustRefreshInterval();
-          console.warn("HSA fetch error:", err.message);
+          const msg = err.message || "Connection failed";
+          console.warn("HSA fetch error:", msg);
+          showErrorBanner(msg);
         }
       }
 
@@ -2156,7 +2218,10 @@
         for (let i = 1; i < cacheHistory.length; i++) {
           deltas.push({
             hits: Math.max(0, cacheHistory[i].hits - cacheHistory[i - 1].hits),
-            misses: Math.max(0, cacheHistory[i].misses - cacheHistory[i - 1].misses),
+            misses: Math.max(
+              0,
+              cacheHistory[i].misses - cacheHistory[i - 1].misses,
+            ),
           });
         }
         const maxVal = Math.max(
@@ -2235,12 +2300,14 @@
             renderSidebar(allSessions);
             populateContextSelectors(allSessions);
           })
-          .catch(() => {});
+          .catch((err) => { console.warn("fetchSessions failed:", err.message || err); });
       }
 
       function connectSessionSSE() {
         if (sessionSSERetryCount >= MAX_SSE_RETRIES) {
-          console.warn("SSE: Max retries reached, stopping session stream reconnect");
+          console.warn(
+            "SSE: Max retries reached, stopping session stream reconnect",
+          );
           return;
         }
         if (sessionSSE) {
@@ -2266,10 +2333,12 @@
             sessionSSE.close();
             sessionSSE = null;
             sessionSSERetryCount++;
-            setTimeout(() => {
+            const delay = sessionSSERetryMs;
+            sessionSSERetryMs = Math.min(sessionSSERetryMs * 2, 30000);
+            sseReconnectTimer = setTimeout(() => {
+              sseReconnectTimer = null;
               connectSessionSSE();
-              sessionSSERetryMs = Math.min(sessionSSERetryMs * 2, 30000);
-            }, sessionSSERetryMs);
+            }, delay);
           };
           sessionSSE.onopen = () => {
             sessionSSERetryMs = 1000;
@@ -2390,9 +2459,15 @@
    INIT
    ================================================================ */
       document.getElementById("refreshToggle").classList.add("active");
-      connect();
-      startRefresh();
-      connectSessionSSE();
+      // Fast health check first, then full data load
+      (async () => {
+        try {
+          const res = await fetch(endpoint + "/api/health", { signal: AbortSignal.timeout(3000) });
+          if (res.ok) { setStatus("connected"); hideErrorBanner(); }
+        } catch { /* will fall through to connect() below */ }
+        connect();
+        startRefresh();
+      })();
       window.addEventListener("resize", drawCacheChart);
     </script>
   </body>

package/logs.html

@@ -628,6 +628,8 @@
       let filterTimeout = null;
       let allSessions = [];
       let sseRetryMs = 1000;
+      let sseRetryCount = 0;
+      const MAX_SSE_RETRIES = 5;
       let statsThrottleTimer = null;
 
       // ── Init ──────────────────────────────────────────────────
@@ -651,7 +653,9 @@
 
         setStatus("pending");
         try {
-          const res = await fetch(baseUrl + "/api/logs?limit=200");
+          const res = await fetch(baseUrl + "/api/logs?limit=200", {
+            signal: AbortSignal.timeout(8000),
+          });
           if (!res.ok) throw new Error(res.statusText);
           const data = await res.json();
           entries = data.entries || [];
@@ -758,6 +762,14 @@
               eventSource.close();
               eventSource = null;
             }
+            sseRetryCount++;
+            if (sseRetryCount >= MAX_SSE_RETRIES) {
+              console.warn("SSE: Max retries reached, stopping log stream reconnect");
+              isStreaming = false;
+              document.getElementById("streamBtn").textContent = "▶ Stream";
+              document.getElementById("streamBtn").classList.remove("active");
+              return;
+            }
             // FE-01: Auto-reconnect with exponential backoff
             setTimeout(() => {
               if (isStreaming) startStream();
@@ -767,6 +779,7 @@
           eventSource.onopen = () => {
             setStatus("ok");
             sseRetryMs = 1000;
+            sseRetryCount = 0;
           };
           isStreaming = true;
           document.getElementById("streamBtn").textContent = "⏸ Pause";
@@ -804,7 +817,9 @@
           document.getElementById("statErrors").textContent = s.errorCount;
           document.getElementById("statAvg").textContent = s.avgDurationMs;
           document.getElementById("statRate").textContent = s.callsPerMinute;
-        } catch {}
+        } catch (err) {
+          console.warn("fetchStats error:", err.message || err);
+        }
       }
 
       // ── Filters ───────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nockdev/hsa",
-  "version": "1.2.4",
+  "version": "1.2.7",
   "description": "HSA - Hierarchical Semantic Analysis MCP Server for AI Code Agents",
   "type": "module",
   "main": "dist/hsa-lib.bundle.js",