@adcops/autocore-react 3.1.1 → 3.3.2

package/src/core/IndicatorButtonState.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-12 11:08:29
  * -----
- * Last Modified: 2024-03-12 11:08:41
+ * Last Modified: 2026-01-29 09:32:28
  * -----
  * 
  */

package/src/core/hoc.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-18 16:14:20
   * -----
- * Last Modified: 2024-03-08 09:27:12
+ * Last Modified: 2026-01-29 09:32:17
  * Modified By: ADC
  * -----
  */

package/src/hooks/adsHooks.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-26 09:04:40
  * -----
- * Last Modified: 2024-05-17 10:47:22
+ * Last Modified: 2026-01-29 09:33:22
  * -----
  * 
  */
@@ -11,6 +11,7 @@
 
 import { useContext, useRef, useEffect, useCallback } from 'react';
 import { EventEmitterContext } from '../core/EventEmitterContext';
+import { MessageType } from '../hub/CommandMessage';
 
 
 /**
@@ -70,8 +71,8 @@ export const useAdsRegisterSymbols = (
         const registerAndSubscribe = async () => {
             for (const [key, symbolName] of Object.entries(symbols)) {
                 try {
-                    const invokeOptions = options[key] ? { symbol_name: symbolName, options : options[key] } : { symbol_name: symbolName };
-                    await invoke("ADS", "register_symbol", invokeOptions);
+                    const invokeOptions = options[key] ? { symbol_name: symbolName, options: options[key] } : { symbol_name: symbolName };
+                    await invoke("ADS.register_symbol", MessageType.Request, invokeOptions);
 
                     //console.log(`Subscribe... ADS/${symbolName}`);
                     const subscriptionId = subscribe(`ADS/${symbolName}`, (data) => {
@@ -87,7 +88,7 @@ export const useAdsRegisterSymbols = (
                     console.error(`Failed to register symbol ${symbolName}: ${err}`);
                 }
             }
-            await invoke("ADS", "refresh", {});
+            await invoke("ADS.refresh", MessageType.Request, {});
         };
         
         if (!isConnected() ) {
@@ -152,14 +153,13 @@ export const useAdsRegisterSymbols = (
  * };
  */
 export function useAdsWriteValue(symbolName: string) {
-    const { invoke } = useContext(EventEmitterContext);
-    const domain = "ADS";
-    const fname = "write_value";
+    const { write } = useContext(EventEmitterContext);
 
     // Return a function that takes a value and sends it to the backend
-    return async (value: object | boolean | number | string ) => {
+    return async (value: object | boolean | number | string) => {
         try {
-            await invoke(domain, fname, { symbol_name: symbolName, value });
+            // Use FQDN topic: ADS.symbolName
+            await write(`ADS.${symbolName}`, value);
         } catch (err) {
             console.error(`Error writing tag ${symbolName}: ${err}`);
         }
@@ -220,23 +220,22 @@ export function useAdsWriteValue(symbolName: string) {
  * dynamically if needed, for instance, based on user selection or other external configurations.
  */
 export function useAdsWriteScaledValue(symbolName: string, scale: number, offset: number) {
-    const { invoke } = useContext(EventEmitterContext);
-    const domain = "ADS";
-    const fname = "write_value";
-    
+    const { write } = useContext(EventEmitterContext);
+
     return useCallback(async (value: number) => {
 
-        // In autocore-react, we multiple to scale incoming values,
+        // In autocore-react, we multiply to scale incoming values,
         // divide to scale outgoing values.
         // This is an OUTGOING value, so we divide.
 
-        const scaledValue = (value - offset) / scale; 
+        const scaledValue = (value - offset) / scale;
         try {
-            await invoke(domain, fname, { symbol_name: symbolName, value: scaledValue });
+            // Use FQDN topic: ADS.symbolName
+            await write(`ADS.${symbolName}`, scaledValue);
         } catch (err) {
             console.error(`Error writing scaled value to tag ${symbolName}: ${err}`);
         }
-    }, [symbolName, scale, offset, invoke]);
+    }, [symbolName, scale, offset, write]);
 }
 
 
@@ -271,15 +270,15 @@ export function useAdsWriteScaledValue(symbolName: string, scale: number, offset
  * ```
  */
 export function useAdsTapValue(symbolName: string): () => Promise<void> {
-    const { invoke } = useContext(EventEmitterContext);
-    const domain = "ADS";
-    const fname = "write_value";
+    const { write } = useContext(EventEmitterContext);
 
     return async () => {
         try {
-            await invoke(domain, fname, { symbol_name: symbolName, value: true });
+            // Use FQDN topic: ADS.symbolName
+            const topic = `ADS.${symbolName}`;
+            await write(topic, true);
             await sleep(300); // Sleep for 300ms before writing false
-            await invoke(domain, fname, { symbol_name: symbolName, value: false });
+            await write(topic, false);
         } catch (err) {
             console.error(`Error handling tap action for ${symbolName}: ${err}`);
         }

package/src/hooks/commandHooks.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2025 Automated Design Corp. All Rights Reserved.
  * Created Date: 2025-03-31 06:38:50
  * -----
- * Last Modified: 2025-04-28 10:37:20
+ * Last Modified: 2026-01-29 09:33:28
  * -----
  * 
  */
@@ -14,6 +14,7 @@
 
 import { useContext, useRef, useEffect, useCallback } from 'react';
 import { EventEmitterContext } from '../core/EventEmitterContext';
+import { MessageType } from '../hub/CommandMessage';
 
 
 /**
@@ -90,9 +91,8 @@ export const useRegisterSymbols = (
                     subscriptions.current.push(subscriptionId);
 
                     // Refresh on a topic is the same as a read_value, except the response is broadcasted.
-                    // Because there currently isn't a centralized tag system, the topic name should not
-                    // contain the domain name.
-                    await invoke(domain, "refresh", {'topic' : `${symbolName}`});
+                    // Use FQDN topic: domain.symbolName
+                    await invoke(`${domain}.${symbolName}`, MessageType.Request, { action: "refresh" });
 
                 } catch (err) {
                     console.error(`Failed to register symbol ${symbolName}: ${err}`);
@@ -165,13 +165,14 @@ export const useRegisterSymbols = (
  *   );
  * };
  */
-export function useWriteValue(domain : string, symbolName: string, fname : string = "write_value") {
-    const { invoke } = useContext(EventEmitterContext);
+export function useWriteValue(domain: string, symbolName: string) {
+    const { write } = useContext(EventEmitterContext);
 
     // Return a function that takes a value and sends it to the backend
-    return async (value: object | boolean | number | string ) => {
+    return async (value: object | boolean | number | string) => {
         try {
-            await invoke(domain, fname, { "topic" : symbolName, "value" : value });
+            // Use FQDN topic: domain.symbolName
+            await write(`${domain}.${symbolName}`, value);
         } catch (err) {
             console.error(`Error writing tag ${symbolName}: ${err}`);
         }
@@ -231,22 +232,23 @@ export function useWriteValue(domain : string, symbolName: string, fname : strin
  * converts it to millimeters using the current `scale`, and writes the result to a backend symbol. The `scale` and `offset` can be adjusted
  * dynamically if needed, for instance, based on user selection or other external configurations.
  */
-export function useWriteScaledValue(domain : string, symbolName: string, scale: number, offset: number, fname : string = "write_value") {
-    const { invoke } = useContext(EventEmitterContext);
-    
+export function useWriteScaledValue(domain: string, symbolName: string, scale: number, offset: number) {
+    const { write } = useContext(EventEmitterContext);
+
     return useCallback(async (value: number) => {
 
-        // In autocore-react, we multiple to scale incoming values,
+        // In autocore-react, we multiply to scale incoming values,
         // divide to scale outgoing values.
         // This is an OUTGOING value, so we divide.
 
-        const scaledValue = (value - offset) / scale; 
+        const scaledValue = (value - offset) / scale;
         try {
-            await invoke(domain, fname, { symbol_name: symbolName, value: scaledValue });
+            // Use FQDN topic: domain.symbolName
+            await write(`${domain}.${symbolName}`, scaledValue);
         } catch (err) {
             console.error(`Error writing scaled value to tag ${symbolName}: ${err}`);
         }
-    }, [symbolName, scale, offset, invoke]);
+    }, [domain, symbolName, scale, offset, write]);
 }
 
 
@@ -280,14 +282,16 @@ export function useWriteScaledValue(domain : string, symbolName: string, scale:
  * };
  * ```
  */
-export function useTapValue(domain : string, symbolName: string, fname : string = "write_value"): () => Promise<void> {
-    const { invoke } = useContext(EventEmitterContext);
+export function useTapValue(domain: string, symbolName: string): () => Promise<void> {
+    const { write } = useContext(EventEmitterContext);
 
     return async () => {
         try {
-            await invoke(domain, fname, { symbol_name: symbolName, value: true });
+            // Use FQDN topic: domain.symbolName
+            const topic = `${domain}.${symbolName}`;
+            await write(topic, true);
             await sleep(300); // Sleep for 300ms before writing false
-            await invoke(domain, fname, { symbol_name: symbolName, value: false });
+            await write(topic, false);
         } catch (err) {
             console.error(`Error handling tap action for ${symbolName}: ${err}`);
         }

package/src/hooks/index.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-30 12:14:43
  * -----
- * Last Modified: 2024-04-30 12:15:46
+ * Last Modified: 2026-01-29 09:33:34
  * -----
  * 
  */

package/src/hooks/useAutoCoreTag.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2025-09-05 08:03:32
  * -----
- * Last Modified: 2025-09-10 10:22:31
+ * Last Modified: 2026-01-29 09:33:40
  * -----
  *
  */
@@ -24,7 +24,7 @@ export function makeAutoCoreTagHooks<Spec extends readonly TagConfig[]>(
   type TagNames = keyof VMap & string;
 
   const findCfg = (tagName: string) =>
-    tags.find(t => t.tagName === tagName) as (Spec[number] | undefined);
+    tags.find(t => t.fqdn === tagName) as (Spec[number] | undefined);
 
   /**
    * Access a single tag by name.

package/src/hooks/useScaledValue.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-30 11:41:59
  * -----
- * Last Modified: 2024-05-21 19:58:23
+ * Last Modified: 2026-01-29 09:33:46
  * -----
  * 
  */

package/src/hub/CommandMessage.ts

@@ -2,36 +2,88 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-24 11:47:13
  * -----
- * Last Modified: 2024-04-24 11:48:08
+ * Last Modified: 2026-01-29 09:33:54
  * -----
  * 
  */
 
 
+// Replaced by a flattened CommandMessage
+// /// The result portion of a CommandMessage. The server will
+// /// place the result of a command in this portion of the message.
+// export interface CommandMessageResult {
+//     /// The JSON object of the result.
+//     data: any; 
+//     /// If true, the command was processed successfully.
+//     success : boolean,
+//     /// If success is false, this should contain a corresponding error message.
+//     error_message: string;
+// }
 
-/// The result portion of a CommandMessage. The server will
-/// place the result of a command in this portion of the message.
-export interface CommandMessageResult {
-    /// The JSON object of the result.
-    data: any; 
-    /// If true, the command was processed successfully.
-    success : boolean,
-    /// If success is false, this should contain a corresponding error message.
-    error_message: string;
+
+export enum MessageType {
+    /// Invalid or no operation. Used for keepalive/ping.
+    NoOp = 0,
+
+    /// Response to a previous request.
+    Response = 1,
+
+    /// Read request - module should return data for the specified topic.
+    Read = 2,
+
+    /// Write request - module should store the provided data.
+    Write = 3,
+
+    /// Subscribe to updates on a topic.
+    Subscribe = 4,
+
+    /// Unsubscribe from a topic.
+    Unsubscribe = 5,
+
+    /// Broadcast message (unsolicited push from module to server or vice versa).
+    Broadcast = 6,
+
+    /// Heartbeat/keepalive message.
+    Heartbeat = 7,
+
+    /// Control message (initialize, finalize, configuration).
+    Control = 8,
+
+    /// Generic request - module parses topic to determine action.
+    Request = 10,
 }
 
+
+
 /// CommandMessage is the object passed between the client and server for making requests and
 /// responses. 
 export interface CommandMessage {
     /// An id to identify the request. The request ID is managed by the client and will be reflected back.
     /// The server will never change the request ID.
-    request_id: number; 
-    /// The command domain/servelet in which this command/function to invoke belongs.
-    domain: string;
-    /// The name of the function to invoke.
-    fname: string;
-    /// A JSON object of the arguments to the function.
-    args?: any; 
-    /// The result of the command, reflected back from the server
-    result?: CommandMessageResult;
+    transaction_id: number; 
+
+    /// Timestamp in milliseconds since UNIX epoch.
+    /// Set automatically on message creation.
+    timecode: number,
+
+
+    /// Fully-qualified topic name (FQDN).
+    /// Format: "domain.subtopic.path" e.g., "ads.plc1.GM.stData"
+    topic: string;
+
+    /// The type/purpose of this message.
+    message_type: MessageType,
+
+    /// The payload data.
+    /// - For requests: arguments/parameters
+    /// - For responses: result data
+    data?: any; 
+
+
+    /// Whether the operation was successful (for responses).    
+    success: boolean,
+
+    /// Error message if the operation failed (for responses).
+    error_message: string,
+
 }

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;