tauri-remote-ui 1.0.1-alpha.8 → 1.0.1

package/README.md

@@ -17,6 +17,23 @@
 - Network level access control setting
 - Network latency tracking
 
+## ⚠️ Security Warning — Read Before Exposing the Server
+
+> **This plugin currently ships with NO authentication, NO authorization, and NO transport encryption.**
+> Anyone who can reach the bound port can drive your application's UI and invoke any Tauri command your app exposes — there is no login, no API key, no TLS, and no rate limit.
+
+The only access control today is a coarse **network-scope filter** (`OriginType`) applied to the peer's IP at TCP-accept time:
+
+| Scope | Bind address | Who can connect |
+| --- | --- | --- |
+| `Localhost` *(default, recommended)* | `127.0.0.1` | This machine only. |
+| `Subnet` | `0.0.0.0` | Any host on **any** of this machine's local IPv4/IPv6 subnets, plus loopback. |
+| `Any` | `0.0.0.0` | **Anyone routable to this machine.** No filter applied. |
+
+A built-in token / SSL / SSO story is on the roadmap (see *Planned Features*), but until it lands, **the only safe public-network deployment is one where you have added authentication yourself in front of this plugin** (mutual-TLS reverse proxy, WireGuard, Tailscale, Cloudflare Access, etc.).
+
+To audit who is being allowed through at runtime, initialize a logger in your host app and run with `RUST_LOG=tauri_remote_ui=debug` — every accept/reject decision is logged with the peer IP and the active scope.
+
 ## Supports
 
 |Environment|Support|

package/api/core/index.cjs

@@ -8,52 +8,46 @@ var socket = require('../../socket.cjs');
  *
  * This module handles sending messages to the Tauri application via WebSocket
  */
+/** Monotonic request id, encapsulated in module scope. */
+let nextRequestId = 0;
 /**
- * Invoke a command on the Tauri application
- * Falls back to WebSocket if Tauri IPC is not available
+ * Invoke a command on the Tauri application.
+ * Falls back to a WebSocket transport if Tauri IPC is not available.
  *
  * @param cmd - The command name to invoke
  * @param args - Arguments to pass to the command
  * @param options - Options for the command
  */
-let msg_id = 0;
 async function invoke(cmd, args, options) {
-    if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
-        window.__TAURI__ && window.__TAURI__.invoke) {
+    if (socket.hasTauriRuntime()) {
         return await core.invoke(cmd, args, options);
     }
-    else {
-        socket.initWebSocket();
-        // If WebSocket is connecting, wait for it
-        if (socket.wsReady) {
-            await socket.wsReady;
-        }
-        if (socket.ws && socket.ws.readyState === WebSocket.OPEN) {
-            return new Promise((resolve, reject) => {
-                const msg = {
-                    id: ++msg_id,
-                    cmd, args, options
-                };
-                let clear = setTimeout(() => {
-                    delete socket.filterCollection[msg_id];
-                    reject(`Invoke Timeout. cmd : ${cmd}`);
-                }, 30000);
-                socket.filterCollection[msg_id] = ({ status, payload }) => {
-                    clearTimeout(clear);
-                    if (status = "success") {
-                        resolve(payload);
-                    }
-                    else {
-                        reject(payload);
-                    }
-                };
-                socket.ws.send(JSON.stringify(msg));
-            });
-        }
-        else {
-            throw new Error('No WebSocket or Tauri IPC available to invoke');
-        }
+    socket.initWebSocket();
+    if (socket.wsReady) {
+        await socket.wsReady;
     }
+    if (!socket.ws || socket.ws.readyState !== WebSocket.OPEN) {
+        throw new Error('No WebSocket or Tauri IPC available to invoke');
+    }
+    const requestId = ++nextRequestId;
+    return await new Promise((resolve, reject) => {
+        const message = { id: requestId, cmd, args, options };
+        const timeoutHandle = setTimeout(() => {
+            delete socket.filterCollection[requestId];
+            reject(new Error(`Invoke timeout. cmd: ${cmd}`));
+        }, 30000);
+        socket.filterCollection[requestId] = ({ status, payload }) => {
+            clearTimeout(timeoutHandle);
+            delete socket.filterCollection[requestId];
+            if (status === socket.RpcStatus.Success) {
+                resolve(payload);
+            }
+            else {
+                reject(payload);
+            }
+        };
+        socket.ws.send(JSON.stringify(message));
+    });
 }
 
 exports.invoke = invoke;

package/api/core/index.d.ts

@@ -4,4 +4,12 @@
  * This module handles sending messages to the Tauri application via WebSocket
  */
 import { InvokeArgs, InvokeOptions } from '@tauri-apps/api/core';
+/**
+ * Invoke a command on the Tauri application.
+ * Falls back to a WebSocket transport if Tauri IPC is not available.
+ *
+ * @param cmd - The command name to invoke
+ * @param args - Arguments to pass to the command
+ * @param options - Options for the command
+ */
 export declare function invoke<T>(cmd: string, args?: InvokeArgs, options?: InvokeOptions): Promise<T>;

package/api/core/index.js

@@ -1,57 +1,51 @@
 import { invoke as invoke$1 } from '@tauri-apps/api/core';
-import { initWebSocket, wsReady, ws, filterCollection } from '../../socket.js';
+import { hasTauriRuntime, initWebSocket, wsReady, ws, filterCollection, RpcStatus } from '../../socket.js';
 
 /**
  * Core API module for Tauri Remote UI
  *
  * This module handles sending messages to the Tauri application via WebSocket
  */
+/** Monotonic request id, encapsulated in module scope. */
+let nextRequestId = 0;
 /**
- * Invoke a command on the Tauri application
- * Falls back to WebSocket if Tauri IPC is not available
+ * Invoke a command on the Tauri application.
+ * Falls back to a WebSocket transport if Tauri IPC is not available.
  *
  * @param cmd - The command name to invoke
  * @param args - Arguments to pass to the command
  * @param options - Options for the command
  */
-let msg_id = 0;
 async function invoke(cmd, args, options) {
-    if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
-        window.__TAURI__ && window.__TAURI__.invoke) {
+    if (hasTauriRuntime()) {
         return await invoke$1(cmd, args, options);
     }
-    else {
-        initWebSocket();
-        // If WebSocket is connecting, wait for it
-        if (wsReady) {
-            await wsReady;
-        }
-        if (ws && ws.readyState === WebSocket.OPEN) {
-            return new Promise((resolve, reject) => {
-                const msg = {
-                    id: ++msg_id,
-                    cmd, args, options
-                };
-                let clear = setTimeout(() => {
-                    delete filterCollection[msg_id];
-                    reject(`Invoke Timeout. cmd : ${cmd}`);
-                }, 30000);
-                filterCollection[msg_id] = ({ status, payload }) => {
-                    clearTimeout(clear);
-                    if (status = "success") {
-                        resolve(payload);
-                    }
-                    else {
-                        reject(payload);
-                    }
-                };
-                ws.send(JSON.stringify(msg));
-            });
-        }
-        else {
-            throw new Error('No WebSocket or Tauri IPC available to invoke');
-        }
+    initWebSocket();
+    if (wsReady) {
+        await wsReady;
     }
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+        throw new Error('No WebSocket or Tauri IPC available to invoke');
+    }
+    const requestId = ++nextRequestId;
+    return await new Promise((resolve, reject) => {
+        const message = { id: requestId, cmd, args, options };
+        const timeoutHandle = setTimeout(() => {
+            delete filterCollection[requestId];
+            reject(new Error(`Invoke timeout. cmd: ${cmd}`));
+        }, 30000);
+        filterCollection[requestId] = ({ status, payload }) => {
+            clearTimeout(timeoutHandle);
+            delete filterCollection[requestId];
+            if (status === RpcStatus.Success) {
+                resolve(payload);
+            }
+            else {
+                reject(payload);
+            }
+        };
+        ws.send(JSON.stringify(message));
+    });
 }
 
 export { invoke };

package/api/event/index.cjs

@@ -9,34 +9,28 @@ var socket = require('../../socket.cjs');
  * This module handles listening to events from the Tauri application via WebSocket
  */
 /**
- * Listen to events from the Tauri application
- * Falls back to WebSocket if Tauri Event API is not available
+ * Listen to events from the Tauri application.
+ * Falls back to a WebSocket transport if the Tauri Event API is not available.
  *
  * @param event - The event name to listen for
  * @param handler - Callback to handle the event
  * @param options - Options for the event listener
  */
 async function listen(event$1, handler, options) {
-    if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
-        window.__TAURI__ && window.__TAURI__.invoke) {
+    if (socket.hasTauriRuntime()) {
         return await event.listen(event$1, handler, options);
     }
-    else {
-        socket.initWebSocket();
-        // If WebSocket is connecting, wait for it
-        if (socket.wsReady) {
-            await socket.wsReady;
-        }
-        // Handle WebSocket messages for events
-        const messageHandler = ({ data }) => {
-            handler(data);
-        };
-        socket.listenEvent.addEventListener(event$1, messageHandler);
-        // Return an unlisten function
-        return () => {
-            socket.listenEvent.removeEventListener(event$1, messageHandler);
-        };
+    socket.initWebSocket();
+    if (socket.wsReady) {
+        await socket.wsReady;
     }
+    const messageHandler = (e) => {
+        handler(e.data);
+    };
+    socket.listenEvent.addEventListener(event$1, messageHandler);
+    return () => {
+        socket.listenEvent.removeEventListener(event$1, messageHandler);
+    };
 }
 
 Object.defineProperty(exports, "latencyMs", {

package/api/event/index.d.ts

@@ -5,10 +5,10 @@
  */
 import { EventCallback, EventName, Options, UnlistenFn } from '@tauri-apps/api/event';
 export type { UnlistenFn } from '@tauri-apps/api/event';
-export { latencyMs } from "../../socket";
+export { latencyMs } from '../../socket';
 /**
- * Listen to events from the Tauri application
- * Falls back to WebSocket if Tauri Event API is not available
+ * Listen to events from the Tauri application.
+ * Falls back to a WebSocket transport if the Tauri Event API is not available.
  *
  * @param event - The event name to listen for
  * @param handler - Callback to handle the event

package/api/event/index.js

@@ -1,5 +1,5 @@
 import { listen as listen$1 } from '@tauri-apps/api/event';
-import { initWebSocket, wsReady, listenEvent } from '../../socket.js';
+import { hasTauriRuntime, initWebSocket, listenEvent, wsReady } from '../../socket.js';
 export { latencyMs } from '../../socket.js';
 
 /**
@@ -8,34 +8,28 @@ export { latencyMs } from '../../socket.js';
  * This module handles listening to events from the Tauri application via WebSocket
  */
 /**
- * Listen to events from the Tauri application
- * Falls back to WebSocket if Tauri Event API is not available
+ * Listen to events from the Tauri application.
+ * Falls back to a WebSocket transport if the Tauri Event API is not available.
  *
  * @param event - The event name to listen for
  * @param handler - Callback to handle the event
  * @param options - Options for the event listener
  */
 async function listen(event, handler, options) {
-    if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
-        window.__TAURI__ && window.__TAURI__.invoke) {
+    if (hasTauriRuntime()) {
         return await listen$1(event, handler, options);
     }
-    else {
-        initWebSocket();
-        // If WebSocket is connecting, wait for it
-        if (wsReady) {
-            await wsReady;
-        }
-        // Handle WebSocket messages for events
-        const messageHandler = ({ data }) => {
-            handler(data);
-        };
-        listenEvent.addEventListener(event, messageHandler);
-        // Return an unlisten function
-        return () => {
-            listenEvent.removeEventListener(event, messageHandler);
-        };
+    initWebSocket();
+    if (wsReady) {
+        await wsReady;
     }
+    const messageHandler = (e) => {
+        handler(e.data);
+    };
+    listenEvent.addEventListener(event, messageHandler);
+    return () => {
+        listenEvent.removeEventListener(event, messageHandler);
+    };
 }
 
 export { listen };

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "tauri-remote-ui",
   "license": "AGPL-3.0-only",
-  "version": "1.0.1-alpha.8",
+  "version": "1.0.1",
   "author": "DraviaVemal",
   "description": "A Tauri plugin that exposes the application's UI to a web browser, allowing full interaction while the native app continues running. This enables end-to-end UI testing using existing web-based testing tools without requiring modifications to the app itself.",
   "type": "module",
-  "types": "./index.d.ts",
-  "main": "./index.cjs",
-  "module": "./index.js",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "repository": {
-    "url": "git+https://github.com/DraviaVemal/tauri-remote-ui.git"
+    "url": "https://github.com/DraviaVemal/tauri-remote-ui"
   },
   "readme": "./README.md",
   "exports": {
@@ -50,4 +50,4 @@
   "peerDependencies": {
     "@tauri-apps/api": ">=2.0.0"
   }
-}
+}

package/socket.cjs

@@ -1,100 +1,138 @@
 'use strict';
 
+var version = require('./version.cjs');
+
+/**
+ * Tauri Remote UI - WebSocket bridge
+ *
+ * Establishes (and re-uses) a WebSocket connection back to the Tauri host
+ * application, providing the transport for the `invoke` and `listen` shims
+ * exported from `./api/core` and `./api/event`.
+ */
+/** Wire prefix used by the version-handshake exchange. */
+const VERSION_PREFIX = 'version:';
 /**
- * Tauri Remote UI - API
+ * Status discriminator on the response payload sent back from the Rust side.
  *
- * This TypeScript file serves as the main entry point for the tauri-remote-ui package.
- * It provides WebSocket initialization and shared WebSocket state for communicating
- * with a Tauri application.
+ * Mirrors the `RpcStatus` enum in `src/models.rs` — keep both in sync.
  */
+const RpcStatus = {
+    Success: 'success',
+    Error: 'error',
+};
+/** Returns true if the page is running inside a Tauri webview. */
+function hasTauriRuntime() {
+    const w = window;
+    return Boolean((w.__TAURI_INTERNALS__ && w.__TAURI_INTERNALS__.invoke) ||
+        (w.__TAURI__ && w.__TAURI__.invoke));
+}
 exports.ws = null;
-let listenEvent = new EventTarget();
+const listenEvent = new EventTarget();
 exports.wsReady = null;
 const filterCollection = {};
 exports.latencyMs = 0;
-/**
- * Get the WebSocket URL based on the current window location
- */
+/** Build the WebSocket URL for the RPC connection. */
 function getWsUrl() {
     const loc = window.location;
     const proto = loc.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${proto}//${loc.host}/remote_ui_ws`;
-    return wsUrl;
+    return `${proto}//${loc.host}/remote_ui_ws`;
 }
-function getUrl() {
+/** Build the disconnect-redirect URL the page navigates to on close. */
+function getDisconnectUrl() {
     const loc = window.location;
-    const wsUrl = `${loc.protocol}//${loc.host}/remote_ui_disconnect`;
-    return wsUrl;
+    return `${loc.protocol}//${loc.host}/remote_ui_disconnect`;
 }
 /**
- * Initialize the WebSocket connection
- * This should be called once at the start of your application
+ * Initialize the WebSocket connection on first use. A no-op when running
+ * inside Tauri (native IPC is preferred) or when the socket is already open.
  */
 function initWebSocket() {
-    try {
-        // If we're in a Tauri app, don't use WebSocket
-        if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
-            window.__TAURI__ && window.__TAURI__.invoke) {
-            return;
-        }
-        else {
-            throw new Error("Moving to WS backup for Tauri Backend");
-        }
+    if (hasTauriRuntime()) {
+        return;
+    }
+    if (exports.ws) {
+        return;
     }
-    catch {
-        if (exports.ws)
-            return;
-        console.info("Tauri-Remote-UI : Remote RPC Attempting...");
-        const wsUrl = getWsUrl();
-        try {
-            let lastPingTimestamp = Date.now();
-            let pingPongTimer;
-            exports.ws = new WebSocket(wsUrl);
-            exports.wsReady = new Promise((resolve, reject) => {
-                exports.ws.onopen = () => {
-                    console.info("Tauri-Remote-UI : Remote Connected.");
+    console.info('Tauri-Remote-UI : Remote RPC Attempting...');
+    const wsUrl = getWsUrl();
+    try {
+        let lastPingTimestamp = Date.now();
+        let pingPongTimer;
+        const socket = new WebSocket(wsUrl);
+        exports.ws = socket;
+        exports.wsReady = new Promise((resolve, reject) => {
+            socket.onopen = () => {
+                console.info('Tauri-Remote-UI : Remote Connected.');
+                socket.send(`${VERSION_PREFIX}${version.PACKAGE_VERSION}`);
+                lastPingTimestamp = Date.now();
+                socket.send('ping');
+                pingPongTimer = setInterval(() => {
                     lastPingTimestamp = Date.now();
-                    exports.ws === null || exports.ws === void 0 ? void 0 : exports.ws.send("ping");
-                    pingPongTimer = setInterval(() => {
-                        lastPingTimestamp = Date.now();
-                        exports.ws === null || exports.ws === void 0 ? void 0 : exports.ws.send("ping");
-                    }, 10000);
-                    resolve();
-                };
-                exports.ws.onmessage = ({ data }) => {
-                    if (data === "pong") {
-                        exports.latencyMs = Date.now() - lastPingTimestamp;
-                        if (exports.latencyMs > 200) {
-                            console.warn(`Tauri-Remote-UI : High latency detected - ${exports.latencyMs}ms`);
-                        }
-                        return;
+                    socket.send('ping');
+                }, 10000);
+                resolve();
+            };
+            socket.onmessage = ({ data }) => {
+                var _a;
+                if (data === 'pong') {
+                    exports.latencyMs = Date.now() - lastPingTimestamp;
+                    if (exports.latencyMs > 200) {
+                        console.warn(`Tauri-Remote-UI : High latency detected - ${exports.latencyMs}ms`);
+                    }
+                    return;
+                }
+                if (typeof data === 'string' && data.startsWith(VERSION_PREFIX)) {
+                    const serverVersion = data.slice(VERSION_PREFIX.length);
+                    if (serverVersion !== version.PACKAGE_VERSION) {
+                        console.warn(`Tauri-Remote-UI : Version mismatch — frontend ` +
+                            `'tauri-remote-ui' npm package is ${version.PACKAGE_VERSION}, ` +
+                            `host crate is ${serverVersion}. Behavior is undefined; ` +
+                            `align both to the same release.`);
                     }
-                    let jsonData = JSON.parse(data);
-                    if (jsonData.id && filterCollection[jsonData.id]) {
-                        filterCollection[jsonData.id](JSON.parse(jsonData.payload));
+                    return;
+                }
+                let jsonData;
+                try {
+                    jsonData = JSON.parse(data);
+                }
+                catch (err) {
+                    console.warn('Tauri-Remote-UI : Failed to parse message', err);
+                    return;
+                }
+                if (typeof jsonData.id === 'number' && filterCollection[jsonData.id]) {
+                    try {
+                        const parsed = JSON.parse((_a = jsonData.payload) !== null && _a !== void 0 ? _a : 'null');
+                        filterCollection[jsonData.id](parsed);
                     }
-                    else {
-                        listenEvent.dispatchEvent(new MessageEvent(jsonData.event, { data: jsonData }));
+                    catch (err) {
+                        console.warn('Tauri-Remote-UI : Failed to parse RPC payload', err);
                     }
-                };
-                exports.ws.onclose = () => {
-                    exports.ws = null;
-                    exports.wsReady = null;
-                    pingPongTimer && clearInterval(pingPongTimer);
-                    console.info("Tauri-Remote-UI : Remote DisConnected.");
-                    window.location.href = getUrl();
-                };
-                exports.ws.onerror = (e) => {
-                    reject(e);
-                };
-            });
-        }
-        catch (e) {
-            console.error(e);
-        }
+                }
+                else if (jsonData.event) {
+                    listenEvent.dispatchEvent(new MessageEvent(jsonData.event, { data: jsonData }));
+                }
+            };
+            socket.onclose = () => {
+                exports.ws = null;
+                exports.wsReady = null;
+                if (pingPongTimer !== undefined) {
+                    clearInterval(pingPongTimer);
+                }
+                console.info('Tauri-Remote-UI : Remote Disconnected.');
+                window.location.href = getDisconnectUrl();
+            };
+            socket.onerror = (e) => {
+                reject(e);
+            };
+        });
+    }
+    catch (e) {
+        console.error(e);
     }
 }
 
+exports.RpcStatus = RpcStatus;
 exports.filterCollection = filterCollection;
+exports.hasTauriRuntime = hasTauriRuntime;
 exports.initWebSocket = initWebSocket;
 exports.listenEvent = listenEvent;

package/socket.d.ts

@@ -1,19 +1,36 @@
 /**
- * Tauri Remote UI - API
+ * Tauri Remote UI - WebSocket bridge
  *
- * This TypeScript file serves as the main entry point for the tauri-remote-ui package.
- * It provides WebSocket initialization and shared WebSocket state for communicating
- * with a Tauri application.
+ * Establishes (and re-uses) a WebSocket connection back to the Tauri host
+ * application, providing the transport for the `invoke` and `listen` shims
+ * exported from `./api/core` and `./api/event`.
  */
+/**
+ * Status discriminator on the response payload sent back from the Rust side.
+ *
+ * Mirrors the `RpcStatus` enum in `src/models.rs` — keep both in sync.
+ */
+export declare const RpcStatus: {
+    readonly Success: "success";
+    readonly Error: "error";
+};
+export type RpcStatus = typeof RpcStatus[keyof typeof RpcStatus];
+/** Shape of the response payload returned for a single RPC call. */
+export interface RpcResponse<T = unknown> {
+    status: RpcStatus;
+    payload: T;
+}
+/** Callback type stored per outstanding RPC request id. */
+export type RpcResponseHandler = (response: RpcResponse) => void;
+/** Returns true if the page is running inside a Tauri webview. */
+export declare function hasTauriRuntime(): boolean;
 export declare let ws: WebSocket | null;
-export declare let listenEvent: EventTarget;
+export declare const listenEvent: EventTarget;
 export declare let wsReady: Promise<void> | null;
-export declare const filterCollection: {
-    [msg_id: string]: (response: any) => any;
-};
+export declare const filterCollection: Record<number, RpcResponseHandler>;
 export declare let latencyMs: number;
 /**
- * Initialize the WebSocket connection
- * This should be called once at the start of your application
+ * Initialize the WebSocket connection on first use. A no-op when running
+ * inside Tauri (native IPC is preferred) or when the socket is already open.
  */
 export declare function initWebSocket(): void;

package/socket.js

@@ -1,96 +1,132 @@
+import { PACKAGE_VERSION } from './version.js';
+
+/**
+ * Tauri Remote UI - WebSocket bridge
+ *
+ * Establishes (and re-uses) a WebSocket connection back to the Tauri host
+ * application, providing the transport for the `invoke` and `listen` shims
+ * exported from `./api/core` and `./api/event`.
+ */
+/** Wire prefix used by the version-handshake exchange. */
+const VERSION_PREFIX = 'version:';
 /**
- * Tauri Remote UI - API
+ * Status discriminator on the response payload sent back from the Rust side.
  *
- * This TypeScript file serves as the main entry point for the tauri-remote-ui package.
- * It provides WebSocket initialization and shared WebSocket state for communicating
- * with a Tauri application.
+ * Mirrors the `RpcStatus` enum in `src/models.rs` — keep both in sync.
  */
+const RpcStatus = {
+    Success: 'success',
+    Error: 'error',
+};
+/** Returns true if the page is running inside a Tauri webview. */
+function hasTauriRuntime() {
+    const w = window;
+    return Boolean((w.__TAURI_INTERNALS__ && w.__TAURI_INTERNALS__.invoke) ||
+        (w.__TAURI__ && w.__TAURI__.invoke));
+}
 let ws = null;
-let listenEvent = new EventTarget();
+const listenEvent = new EventTarget();
 let wsReady = null;
 const filterCollection = {};
 let latencyMs = 0;
-/**
- * Get the WebSocket URL based on the current window location
- */
+/** Build the WebSocket URL for the RPC connection. */
 function getWsUrl() {
     const loc = window.location;
     const proto = loc.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${proto}//${loc.host}/remote_ui_ws`;
-    return wsUrl;
+    return `${proto}//${loc.host}/remote_ui_ws`;
 }
-function getUrl() {
+/** Build the disconnect-redirect URL the page navigates to on close. */
+function getDisconnectUrl() {
     const loc = window.location;
-    const wsUrl = `${loc.protocol}//${loc.host}/remote_ui_disconnect`;
-    return wsUrl;
+    return `${loc.protocol}//${loc.host}/remote_ui_disconnect`;
 }
 /**
- * Initialize the WebSocket connection
- * This should be called once at the start of your application
+ * Initialize the WebSocket connection on first use. A no-op when running
+ * inside Tauri (native IPC is preferred) or when the socket is already open.
  */
 function initWebSocket() {
-    try {
-        // If we're in a Tauri app, don't use WebSocket
-        if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
-            window.__TAURI__ && window.__TAURI__.invoke) {
-            return;
-        }
-        else {
-            throw new Error("Moving to WS backup for Tauri Backend");
-        }
+    if (hasTauriRuntime()) {
+        return;
+    }
+    if (ws) {
+        return;
     }
-    catch {
-        if (ws)
-            return;
-        console.info("Tauri-Remote-UI : Remote RPC Attempting...");
-        const wsUrl = getWsUrl();
-        try {
-            let lastPingTimestamp = Date.now();
-            let pingPongTimer;
-            ws = new WebSocket(wsUrl);
-            wsReady = new Promise((resolve, reject) => {
-                ws.onopen = () => {
-                    console.info("Tauri-Remote-UI : Remote Connected.");
+    console.info('Tauri-Remote-UI : Remote RPC Attempting...');
+    const wsUrl = getWsUrl();
+    try {
+        let lastPingTimestamp = Date.now();
+        let pingPongTimer;
+        const socket = new WebSocket(wsUrl);
+        ws = socket;
+        wsReady = new Promise((resolve, reject) => {
+            socket.onopen = () => {
+                console.info('Tauri-Remote-UI : Remote Connected.');
+                socket.send(`${VERSION_PREFIX}${PACKAGE_VERSION}`);
+                lastPingTimestamp = Date.now();
+                socket.send('ping');
+                pingPongTimer = setInterval(() => {
                     lastPingTimestamp = Date.now();
-                    ws === null || ws === void 0 ? void 0 : ws.send("ping");
-                    pingPongTimer = setInterval(() => {
-                        lastPingTimestamp = Date.now();
-                        ws === null || ws === void 0 ? void 0 : ws.send("ping");
-                    }, 10000);
-                    resolve();
-                };
-                ws.onmessage = ({ data }) => {
-                    if (data === "pong") {
-                        latencyMs = Date.now() - lastPingTimestamp;
-                        if (latencyMs > 200) {
-                            console.warn(`Tauri-Remote-UI : High latency detected - ${latencyMs}ms`);
-                        }
-                        return;
+                    socket.send('ping');
+                }, 10000);
+                resolve();
+            };
+            socket.onmessage = ({ data }) => {
+                var _a;
+                if (data === 'pong') {
+                    latencyMs = Date.now() - lastPingTimestamp;
+                    if (latencyMs > 200) {
+                        console.warn(`Tauri-Remote-UI : High latency detected - ${latencyMs}ms`);
+                    }
+                    return;
+                }
+                if (typeof data === 'string' && data.startsWith(VERSION_PREFIX)) {
+                    const serverVersion = data.slice(VERSION_PREFIX.length);
+                    if (serverVersion !== PACKAGE_VERSION) {
+                        console.warn(`Tauri-Remote-UI : Version mismatch — frontend ` +
+                            `'tauri-remote-ui' npm package is ${PACKAGE_VERSION}, ` +
+                            `host crate is ${serverVersion}. Behavior is undefined; ` +
+                            `align both to the same release.`);
                     }
-                    let jsonData = JSON.parse(data);
-                    if (jsonData.id && filterCollection[jsonData.id]) {
-                        filterCollection[jsonData.id](JSON.parse(jsonData.payload));
+                    return;
+                }
+                let jsonData;
+                try {
+                    jsonData = JSON.parse(data);
+                }
+                catch (err) {
+                    console.warn('Tauri-Remote-UI : Failed to parse message', err);
+                    return;
+                }
+                if (typeof jsonData.id === 'number' && filterCollection[jsonData.id]) {
+                    try {
+                        const parsed = JSON.parse((_a = jsonData.payload) !== null && _a !== void 0 ? _a : 'null');
+                        filterCollection[jsonData.id](parsed);
                     }
-                    else {
-                        listenEvent.dispatchEvent(new MessageEvent(jsonData.event, { data: jsonData }));
+                    catch (err) {
+                        console.warn('Tauri-Remote-UI : Failed to parse RPC payload', err);
                     }
-                };
-                ws.onclose = () => {
-                    ws = null;
-                    wsReady = null;
-                    pingPongTimer && clearInterval(pingPongTimer);
-                    console.info("Tauri-Remote-UI : Remote DisConnected.");
-                    window.location.href = getUrl();
-                };
-                ws.onerror = (e) => {
-                    reject(e);
-                };
-            });
-        }
-        catch (e) {
-            console.error(e);
-        }
+                }
+                else if (jsonData.event) {
+                    listenEvent.dispatchEvent(new MessageEvent(jsonData.event, { data: jsonData }));
+                }
+            };
+            socket.onclose = () => {
+                ws = null;
+                wsReady = null;
+                if (pingPongTimer !== undefined) {
+                    clearInterval(pingPongTimer);
+                }
+                console.info('Tauri-Remote-UI : Remote Disconnected.');
+                window.location.href = getDisconnectUrl();
+            };
+            socket.onerror = (e) => {
+                reject(e);
+            };
+        });
+    }
+    catch (e) {
+        console.error(e);
     }
 }
 
-export { filterCollection, initWebSocket, latencyMs, listenEvent, ws, wsReady };
+export { RpcStatus, filterCollection, hasTauriRuntime, initWebSocket, latencyMs, listenEvent, ws, wsReady };

package/version.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+/**
+ * Source-of-truth for the npm package's version, used in the WebSocket
+ * handshake to detect frontend/backend version skew.
+ *
+ * **Keep this in sync with `package.json` `version` and the Rust crate's
+ * `Cargo.toml` `version`.** The release flow (`DEVOPS_BUILD=1`) rewrites this
+ * value from the latest git tag.
+ */
+const PACKAGE_VERSION = '1.0.1';
+
+exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/version.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Source-of-truth for the npm package's version, used in the WebSocket
+ * handshake to detect frontend/backend version skew.
+ *
+ * **Keep this in sync with `package.json` `version` and the Rust crate's
+ * `Cargo.toml` `version`.** The release flow (`DEVOPS_BUILD=1`) rewrites this
+ * value from the latest git tag.
+ */
+export declare const PACKAGE_VERSION = "1.0.1";

package/version.js

@@ -0,0 +1,11 @@
+/**
+ * Source-of-truth for the npm package's version, used in the WebSocket
+ * handshake to detect frontend/backend version skew.
+ *
+ * **Keep this in sync with `package.json` `version` and the Rust crate's
+ * `Cargo.toml` `version`.** The release flow (`DEVOPS_BUILD=1`) rewrites this
+ * value from the latest git tag.
+ */
+const PACKAGE_VERSION = '1.0.1';
+
+export { PACKAGE_VERSION };