@adcops/autocore-react 3.0.40 → 3.3.2

package/src/hub/DebugPanel.ts

@@ -0,0 +1,280 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * DebugPanel - Injects a visible debug panel directly into the DOM
+ *
+ * This bypasses React entirely to show real-time debug info about
+ * WebSocket connections and Hub instances.
+ */
+
+console.log("[DebugPanel.ts] Module loading...");
+
+interface DebugLog {
+  time: string;
+  type: "info" | "warn" | "error" | "send" | "recv";
+  source: string;
+  message: string;
+}
+
+class DebugPanel {
+  private container: HTMLDivElement | null = null;
+  private logContainer: HTMLDivElement | null = null;
+  private statsContainer: HTMLDivElement | null = null;
+  private logs: DebugLog[] = [];
+  private maxLogs = 100;
+
+  // Stats
+  private stats = {
+    hubInstancesCreated: 0,
+    connectCalls: 0,
+    wsOpened: 0,
+    wsClosed: 0,
+    wsErrors: 0,
+    messagesSent: 0,
+    messagesReceived: 0,
+    currentState: "unknown",
+  };
+
+  constructor() {
+    this.injectPanel();
+    this.log("info", "DebugPanel", "Debug panel initialized");
+  }
+
+  private injectPanel(): void {
+    // Check for existing panel and remove it (handles HMR/StrictMode)
+    const existing = document.getElementById("autocore-debug-panel");
+    if (existing) {
+      existing.remove();
+    }
+
+    // Create container
+    this.container = document.createElement("div");
+    this.container.id = "autocore-debug-panel";
+    this.container.innerHTML = `
+      <style>
+        #autocore-debug-panel {
+          position: fixed;
+          bottom: 10px;
+          right: 10px;
+          width: 400px;
+          max-height: 300px;
+          background: rgba(0, 0, 0, 0.9);
+          color: #0f0;
+          font-family: monospace;
+          font-size: 11px;
+          border: 1px solid #0f0;
+          border-radius: 4px;
+          z-index: 99999;
+          overflow: hidden;
+        }
+        #autocore-debug-panel .header {
+          background: #0f0;
+          color: #000;
+          padding: 4px 8px;
+          font-weight: bold;
+          cursor: pointer;
+          display: flex;
+          justify-content: space-between;
+        }
+        #autocore-debug-panel .stats {
+          padding: 4px 8px;
+          border-bottom: 1px solid #0f0;
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 2px;
+        }
+        #autocore-debug-panel .stats span {
+          color: #fff;
+        }
+        #autocore-debug-panel .stats .value {
+          color: #ff0;
+        }
+        #autocore-debug-panel .logs {
+          max-height: 180px;
+          overflow-y: auto;
+          padding: 4px;
+        }
+        #autocore-debug-panel .log-entry {
+          margin: 1px 0;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        #autocore-debug-panel .log-entry.info { color: #888; }
+        #autocore-debug-panel .log-entry.warn { color: #fa0; }
+        #autocore-debug-panel .log-entry.error { color: #f44; }
+        #autocore-debug-panel .log-entry.send { color: #4f4; }
+        #autocore-debug-panel .log-entry.recv { color: #44f; }
+        #autocore-debug-panel .state-connected { color: #4f4 !important; }
+        #autocore-debug-panel .state-disconnected { color: #f44 !important; }
+        #autocore-debug-panel .state-connecting { color: #fa0 !important; }
+      </style>
+      <div class="header">
+        <span>AutoCore Debug</span>
+        <span id="debug-toggle">[_]</span>
+      </div>
+      <div id="debug-content">
+        <div class="stats" id="debug-stats"></div>
+        <div class="logs" id="debug-logs"></div>
+      </div>
+    `;
+
+    // Wait for DOM ready
+    if (document.body) {
+      document.body.appendChild(this.container);
+      this.setupElements();
+    } else {
+      document.addEventListener("DOMContentLoaded", () => {
+        document.body.appendChild(this.container!);
+        this.setupElements();
+      });
+    }
+  }
+
+  private setupElements(): void {
+    this.statsContainer = document.getElementById("debug-stats") as HTMLDivElement;
+    this.logContainer = document.getElementById("debug-logs") as HTMLDivElement;
+
+    // Toggle button
+    const toggle = document.getElementById("debug-toggle");
+    const content = document.getElementById("debug-content");
+    toggle?.addEventListener("click", () => {
+      if (content) {
+        content.style.display = content.style.display === "none" ? "block" : "none";
+        toggle.textContent = content.style.display === "none" ? "[+]" : "[_]";
+      }
+    });
+
+    this.updateStats();
+  }
+
+  private updateStats(): void {
+    if (!this.statsContainer) return;
+
+    const stateClass =
+      this.stats.currentState === "OPEN"
+        ? "state-connected"
+        : this.stats.currentState === "CONNECTING"
+        ? "state-connecting"
+        : "state-disconnected";
+
+    this.statsContainer.innerHTML = `
+      <div><span>Hub Instances:</span> <span class="value">${this.stats.hubInstancesCreated}</span></div>
+      <div><span>connect() calls:</span> <span class="value">${this.stats.connectCalls}</span></div>
+      <div><span>WS Opened:</span> <span class="value">${this.stats.wsOpened}</span></div>
+      <div><span>WS Closed:</span> <span class="value">${this.stats.wsClosed}</span></div>
+      <div><span>WS Errors:</span> <span class="value">${this.stats.wsErrors}</span></div>
+      <div><span>Msgs Sent:</span> <span class="value">${this.stats.messagesSent}</span></div>
+      <div><span>Msgs Recv:</span> <span class="value">${this.stats.messagesReceived}</span></div>
+      <div><span>WS State:</span> <span class="value ${stateClass}">${this.stats.currentState}</span></div>
+    `;
+  }
+
+  log(type: DebugLog["type"], source: string, message: string): void {
+    const time = new Date().toTimeString().slice(0, 8);
+    const entry: DebugLog = { time, type, source, message };
+
+    this.logs.push(entry);
+    if (this.logs.length > this.maxLogs) {
+      this.logs.shift();
+    }
+
+    // Also log to console
+    const prefix = `[${time}] [${source}]`;
+    switch (type) {
+      case "error":
+        console.error(prefix, message);
+        break;
+      case "warn":
+        console.warn(prefix, message);
+        break;
+      default:
+        console.log(prefix, message);
+    }
+
+    this.renderLogs();
+  }
+
+  private renderLogs(): void {
+    if (!this.logContainer) return;
+
+    this.logContainer.innerHTML = this.logs
+      .slice(-50) // Show last 50
+      .map(
+        (log) =>
+          `<div class="log-entry ${log.type}">[${log.time}] ${log.source}: ${log.message}</div>`
+      )
+      .join("");
+
+    // Auto-scroll to bottom
+    this.logContainer.scrollTop = this.logContainer.scrollHeight;
+  }
+
+  // Stat update methods
+  hubCreated(): void {
+    this.stats.hubInstancesCreated++;
+    this.log("warn", "Hub", `NEW INSTANCE CREATED (total: ${this.stats.hubInstancesCreated})`);
+    this.updateStats();
+  }
+
+  connectCalled(socketState: string): void {
+    this.stats.connectCalls++;
+    this.stats.currentState = socketState;
+    this.log("info", "Hub", `connect() called (socket state: ${socketState})`);
+    this.updateStats();
+  }
+
+  wsOpened(url: string): void {
+    this.stats.wsOpened++;
+    this.stats.currentState = "OPEN";
+    this.log("info", "WS", `OPENED: ${url}`);
+    this.updateStats();
+  }
+
+  wsClosed(code: number, reason: string): void {
+    this.stats.wsClosed++;
+    this.stats.currentState = "CLOSED";
+    this.log("warn", "WS", `CLOSED: code=${code}, reason=${reason}`);
+    this.updateStats();
+  }
+
+  wsError(error: string): void {
+    this.stats.wsErrors++;
+    this.log("error", "WS", `ERROR: ${error}`);
+    this.updateStats();
+  }
+
+  messageSent(type: string, command: string, requestId: number): void {
+    this.stats.messagesSent++;
+    this.log("send", "WS", `>>> ${type}/${command} (id=${requestId})`);
+    this.updateStats();
+  }
+
+  messageReceived(type: string, command: string, requestId?: number): void {
+    this.stats.messagesReceived++;
+    this.log("recv", "WS", `<<< ${type}/${command} (id=${requestId ?? "none"})`);
+    this.updateStats();
+  }
+
+  updateState(state: string): void {
+    this.stats.currentState = state;
+    this.updateStats();
+  }
+}
+
+// Create singleton and expose globally
+let debugPanel: DebugPanel | null = null;
+
+export function getDebugPanel(): DebugPanel {
+  if (!debugPanel) {
+    debugPanel = new DebugPanel();
+    // Expose globally for console access
+    (window as any).__AUTOCORE_DEBUG_PANEL__ = debugPanel;
+  }
+  return debugPanel;
+}
+
+// Auto-initialize on import
+getDebugPanel();
+
+export default getDebugPanel;