Changeset 0.5.0 (#35)

src/js/debug.js

@@ -232,12 +232,21 @@ const DebugLog = {
         // localStorage keys
         try {
             snap.storageKeys = Object.keys(localStorage).filter(k =>
-                k.startsWith('chatSwitchboard') || k.startsWith('switchboard')
+                k.startsWith('chatSwitchboard') || k.startsWith('switchboard') || k.startsWith('sb_')
             );
         } catch (e) {
             snap.storageKeys = '(error reading)';
         }
 
+        // EventBus state
+        if (typeof Events !== 'undefined') {
+            snap.eventBus = {
+                wsConnected: Events.connected,
+                subscriptions: Events.debug(),
+                queueLength: Events._wsQueue?.length || 0
+            };
+        }
+
         return snap;
     },
 
@@ -246,8 +255,8 @@ const DebugLog = {
     async runDiagnostics() {
         this.log('DIAG', '── Starting connection diagnostics ──');
 
-        const baseUrl = (typeof Backend !== 'undefined' && Backend.baseUrl)
-            ? Backend.baseUrl
+        const baseUrl = (typeof API !== 'undefined' && API._base)
+            ? API._base
             : window.location.origin;
 
         // Test 1: Basic fetch to same origin
@@ -297,12 +306,12 @@ const DebugLog = {
         }
 
         // Test 3: Token validity
-        if (typeof Backend !== 'undefined' && Backend.accessToken) {
+        if (typeof API !== 'undefined' && API.accessToken) {
             this.log('DIAG', 'Test 3: Token validation');
             try {
                 const resp = await this._origFetch(baseUrl + '/api/v1/profile', {
                     headers: {
-                        'Authorization': `Bearer ${Backend.accessToken}`,
+                        'Authorization': `Bearer ${API.accessToken}`,
                         'Content-Type': 'application/json'
                     },
                     signal: AbortSignal.timeout(5000)
@@ -318,6 +327,13 @@ const DebugLog = {
             this.log('DIAG', 'Test 3: Skipped (no token)');
         }
 
+        // Test 4: WebSocket connectivity
+        this.log('DIAG', `Test 4: EventBus WebSocket = ${typeof Events !== 'undefined' ? (Events.connected ? 'connected' : 'disconnected') : 'N/A'}`);
+        if (typeof Events !== 'undefined') {
+            this.log('DIAG', `  Subscriptions: ${JSON.stringify(Events.debug())}`);
+            this.log('DIAG', `  Queue depth: ${Events._wsQueue?.length || 0}`);
+        }
+
         this.log('DIAG', '── Diagnostics complete ──');
         this.render();
     },
@@ -325,24 +341,7 @@ const DebugLog = {
     // ── Badge ───────────────────────────────
 
     _injectBadge() {
-        const badge = document.createElement('div');
-        badge.id = 'debugBadge';
-        badge.innerHTML = '🐛';
-        badge.title = 'Debug Log (Ctrl+Shift+L)';
-        badge.style.cssText = `
-            position: fixed; bottom: 12px; left: 12px; z-index: 100000;
-            width: 36px; height: 36px; border-radius: 50%;
-            background: var(--bg-secondary, #2a2a2a); border: 1px solid var(--border, #444);
-            display: flex; align-items: center; justify-content: center;
-            cursor: pointer; font-size: 18px; opacity: 0.7;
-            transition: opacity 0.2s, transform 0.2s;
-        `;
-        badge.addEventListener('mouseenter', () => { badge.style.opacity = '1'; badge.style.transform = 'scale(1.1)'; });
-        badge.addEventListener('mouseleave', () => { badge.style.opacity = this._errorCount > 0 ? '0.9' : '0.7'; badge.style.transform = ''; });
-        badge.addEventListener('click', () => openDebugModal());
-        document.body.appendChild(badge);
-
-        // Keyboard shortcut
+        // Keyboard shortcut only — visual indicator is the avatar 🐛
         document.addEventListener('keydown', (e) => {
             if (e.ctrlKey && e.shiftKey && e.key === 'L') {
                 e.preventDefault();
@@ -352,13 +351,17 @@ const DebugLog = {
     },
 
     _updateBadge() {
-        const badge = document.getElementById('debugBadge');
-        if (!badge) return;
+        // Show error count on avatar bug in sidebar
+        const bug = document.querySelector('.avatar-bug');
+        if (!bug) return;
         if (this._errorCount > 0) {
-            badge.style.opacity = '0.9';
-            badge.style.background = 'var(--danger, #c0392b)';
-            badge.innerHTML = `🐛<span style="position:absolute;top:-4px;right:-4px;background:#e74c3c;color:#fff;font-size:10px;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;">${this._errorCount > 99 ? '99+' : this._errorCount}</span>`;
-            badge.style.position = 'fixed'; // keep relative positioning for the counter
+            bug.textContent = '🐛';
+            bug.title = `${this._errorCount} error${this._errorCount > 1 ? 's' : ''} — click for Debug Log`;
+            bug.classList.add('has-errors');
+        } else {
+            bug.textContent = '🐛';
+            bug.title = 'Debug available';
+            bug.classList.remove('has-errors');
         }
     },