@adcops/autocore-react 3.3.9 → 3.3.10

package/src/hub/DebugPanel.ts

@@ -1,307 +1,307 @@
-/*
- * 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();
-  }
-}
-
-/**
- * No-op stub that satisfies the DebugPanel interface without injecting any DOM elements.
- * Used when the debug panel is not enabled.
- */
-const noOpPanel: DebugPanel = {
-  log() {},
-  hubCreated() {},
-  connectCalled() {},
-  wsOpened() {},
-  wsClosed() {},
-  wsError() {},
-  messageSent() {},
-  messageReceived() {},
-  updateState() {},
-} as unknown as DebugPanel;
-
-// Singleton instance — starts as the no-op stub
-let debugPanel: DebugPanel = noOpPanel;
-let debugEnabled = false;
-
-/**
- * Returns the current debug panel instance.
- * If the panel has not been enabled, returns a no-op stub so callers
- * don't need to guard every call.
- */
-export function getDebugPanel(): DebugPanel {
-  return debugPanel;
-}
-
-/**
- * Enables the debug panel, injecting it into the DOM.
- * Subsequent calls to `getDebugPanel()` will return the real panel.
- * Safe to call multiple times — only creates one panel.
- */
-export function enableDebugPanel(): void {
-  if (!debugEnabled) {
-    debugEnabled = true;
-    debugPanel = new DebugPanel();
-    (window as any).__AUTOCORE_DEBUG_PANEL__ = debugPanel;
-  }
-}
-
-export default getDebugPanel;
+/*
+ * 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();
+  }
+}
+
+/**
+ * No-op stub that satisfies the DebugPanel interface without injecting any DOM elements.
+ * Used when the debug panel is not enabled.
+ */
+const noOpPanel: DebugPanel = {
+  log() {},
+  hubCreated() {},
+  connectCalled() {},
+  wsOpened() {},
+  wsClosed() {},
+  wsError() {},
+  messageSent() {},
+  messageReceived() {},
+  updateState() {},
+} as unknown as DebugPanel;
+
+// Singleton instance — starts as the no-op stub
+let debugPanel: DebugPanel = noOpPanel;
+let debugEnabled = false;
+
+/**
+ * Returns the current debug panel instance.
+ * If the panel has not been enabled, returns a no-op stub so callers
+ * don't need to guard every call.
+ */
+export function getDebugPanel(): DebugPanel {
+  return debugPanel;
+}
+
+/**
+ * Enables the debug panel, injecting it into the DOM.
+ * Subsequent calls to `getDebugPanel()` will return the real panel.
+ * Safe to call multiple times — only creates one panel.
+ */
+export function enableDebugPanel(): void {
+  if (!debugEnabled) {
+    debugEnabled = true;
+    debugPanel = new DebugPanel();
+    (window as any).__AUTOCORE_DEBUG_PANEL__ = debugPanel;
+  }
+}
+
+export default getDebugPanel;