tauri-remote-ui 0.28.0 → 1.0.1

package/LICENSE

@@ -1,21 +1,39 @@
-MIT License
-
-Copyright (c) 2025 - DraviaVemal
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+# License Information
+
+This project is licensed under **AGPL-3.0** starting from version 1.x.
+
+---
+
+## 📜 Open Source (AGPL-3.0)
+
+- You are free to use, study, and modify this project under the terms of the **GNU Affero General Public License v3.0 (AGPL-3.0)**.  
+- **Important:** If you build on top of this project (derivative works, forks, integrations, etc.) you must also release your work under **AGPL-3.0**.  
+- This ensures improvements and extensions remain open to the community.  
+
+---
+
+## 💼 Commercial Use (Sponsorware Model)
+
+- Commercial use **is not allowed** under AGPL-3.0 without a separate license.  
+- To use this project in **commercial products, SaaS, internal tools, or client projects**, your organization must:  
+  1. **Sponsor this project** at the required tier on [GitHub Sponsors](https://github.com/sponsors/DraviaVemal).  
+  2. Sponsored organizations are granted access to a **private repository**, licensed under a **commercial-friendly license (MIT terms)**.  
+  3. This private repo contains the same core code under commercial terms, plus optional add-ons.  
+
+---
+
+## 🚀 Sponsor Benefits
+
+- Access to a **commercial license** for this project (MIT terms).  
+- Access to the **private repo** with code updates.  
+- **Priority support** — issues and feature requests in the private repo are handled **before public requests**.  
+
+---
+
+## ✅ How to Comply
+
+- **Individuals, students, hobbyists** → Use under **AGPL-3.0** (non-commercial OK).  
+- **Businesses, organizations, contractors** → Must **sponsor** to obtain commercial rights.  
+
+For details on AGPL-3.0, see [LICENSE](https://opensource.org/license/agpl-v3).  
+For commercial licensing inquiries, contact: **contact@draviavemal.com**.  

package/README.md

@@ -1,109 +1,65 @@
-# Tauri Remote UI
+# tauri-remote-ui  (AGPL-3.0)
 
-**Tauri Remote UI** is a plugin that allows you to expose your Tauri application's UI to any web browser, enabling seamless remote interaction for development and end-to-end testing. The plugin bridges your native app and commercial browsers, letting you use standard web automation tools for testing and debugging—without modifying your app's logic.
+**Tauri Remote UI** is a plugin that allows you to expose your Tauri application's UI to any web browser.
 
 ## Badges
+
 ![Crates.io Version](https://img.shields.io/crates/v/tauri-remote-ui?style=flat&label=crates.io%20%3A%20tauri-remote-ui) ![NPM Version](https://img.shields.io/npm/v/tauri-remote-ui?label=npm%20%3A%20tauri-remote-ui)
 
+## 📜 License
+
+- Open Source: AGPL-3.0 (see LICENSE)
+- Commercial: Available via sponsorship (see LICENSE)
+
+## ✨ Features
+
+- Seamless enable/diable integration
+- 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|
+|-|-|
+|Windows|✅|
+|Mac|✅|
+|Linux|✅|
+|Android|❌|
+|iOS|❌|
+
+## Use Case
+
+- Enabling seamless remote interaction for development debugging—without modifying your app's logic.
+- Enabling end-to-end testing of tauri application using standard web automation tools like playwright.
+  - Note : Based on tauri target OS the webkit will change windows will be 100% match test case as both are chromium rest of OS around maximum 10% UI difference are expected from actual application
+- Enable remote access feature for local close ciruit hardware related application
+
+## Planned Features
+
+- Multiple Window of Tauri app support in Remote UI logic
+- SSO Ingration Option
+- Custom Starting window name options
+- Dynamic Port mapping
+- SSL Certificate ingration
+- Authendication system for remote access (User_id,Password)
+
+## [Documents](https://docs.draviavemal.com)
 
-## Features
-
-- **Remote UI Exposure:** Interact with your Tauri app from any browser.
-- **Seamless Development:** Enable Development debug attachment for fronend debugging.
-- **Seamless E2E Testing:** Use existing web automation/testing tools.
-- **Automatic Transport Switching:** IPC for WebView, WebSocket for browsers—handled transparently.
-- **Customizable Security:** Control and secure remote access as needed.
-- **Future Compatibility For Test Migration:** When [CEF-RS](https://github.com/tauri-apps/cef-rs) becomes available, the same E2E tests (e.g., written with Playwright or similar tools that use the Chromium debug port) will work seamlessly in debug mode, ensuring long-term support for modern testing workflows.
-
-## Completed Features
-
-### Javascript
-- **api/core** - `invoke`
-- **api/event** - `listen`
-- **api/app**
-  - `defaultWindowIcon`,`fetchDataStoreIdentifiers`,`getBundleType`,
-  - `getIdentifier`,`getName`,`getTauriVersion`,
-  - `getVersion`,`hide`,`removeDataStore`,
-  - `setDockVisibility`,`setTheme`,`show`
-
-### Rust
-- `emit` - Emit method is updated to handle in this plugin.
-
-## Operation Flow
-
-- **WebView:** Uses IPC for communication between frontend and backend.
-- **Commercial Browser:** Uses WebSocket (WS) for remote frontend-backend communication.
-- **Automatic Switching:** The Rust backend plugin and npm frontend wrapper handle transport selection automatically.
-- **Security:** The exposure of the web app can be secured and customized by the end user.
-
-## Usage
-
-1. **Install the Rust plugin** in your Tauri project `cargo add tauri-remote-ui`.
-2. **Initialize the Rust plugin** 
-```rust
-pub fn run() {
-    tauri::Builder::default()
-        .plugin(tauri_remote_ui::init())
-        .invoke_handler(tauri::generate_handler![
-            increment,
-            decrement,
-            enable_server,
-            disable_server,
-            exit_app,
-        ])
-        .setup(|app| {
-            app.manage(Arc::new(RwLock::new(Counter { now: 0 })));
-            Ok(())
-        })
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
-}
-```
-3. **Replace Emitter trait**
-```rust
-use tauri::Emitter;
-webview_window.emit(data)
-```
-To
-```rust
-use tauri_remote_ui::EmitterExt;
-webview_window.emit(data).await
-```
-4. **Start/Stop Server**
-```rust
-async fn enable_server(app: AppHandle) -> String {
-    match app.start_remote_ui(RemoteUiConfig::default().set_port(Some(9090))).await {
-        Ok(()) => format!("Server Started."),
-        Err(err) => format!("Server Error {:?}", err),
-    }
-}
-async fn disable_server(app: AppHandle) -> String {
-    match app.stop_remote_ui().await {
-        Ok(()) => format!("Server Stoped"),
-        Err(err) => format!("Server Error {:?}", err),
-    }
-}
-```
-5. **Install the NPM plugin** in your frontend `npm i tauri-remote-ui`.
-6. **Replace the NPM package** 
-```typescript
-import { invoke } from "@tauri-apps/api/core";
-import { listen } from "@tauri-apps/api/event";
-```
-To
-```typescript
-import { invoke } from "tauri-remote-ui/api/core";
-import { listen } from "tauri-remote-ui/api/event";
-```
-7. **Development WebSocket Proxy** `/remote_ui_ws` proxy remote_ui url ws to your dev server like vite.
-8. **Enable Source Map and update lauch.json setup in vscode to debug frontend**
-
-## Plugin Development
-
-- Build Rust: `cargo build`
-- Build JS: `cd guest-js && pnpm build`
-- Example app: See `examples/tauri-app/`
-
-## License
-
-MIT
+Refer document central for detailed information [docs](https://docs.draviavemal.com)

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,48 +9,32 @@ 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;
-        }
-        if (socket.ws && socket.ws.readyState === WebSocket.OPEN) {
-            // Handle WebSocket messages for events
-            const messageHandler = (wsEvent) => {
-                try {
-                    const data = JSON.parse(wsEvent.data);
-                    if (data.event === event$1) {
-                        handler(data);
-                    }
-                }
-                catch (err) {
-                    console.error(err);
-                    throw new Error('Error handling WebSocket event');
-                }
-            };
-            socket.ws.addEventListener('message', messageHandler);
-            // Return an unlisten function
-            return () => {
-                socket.ws === null || socket.ws === void 0 ? void 0 : socket.ws.removeEventListener('message', messageHandler);
-            };
-        }
-        else {
-            throw new Error("No WebSocket or Tauri IPC available to invoke");
-        }
+    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", {
+    enumerable: true,
+    get: function () { return socket.latencyMs; }
+});
 exports.listen = listen;

package/api/event/index.d.ts

@@ -5,9 +5,10 @@
  */
 import { EventCallback, EventName, Options, UnlistenFn } from '@tauri-apps/api/event';
 export type { UnlistenFn } from '@tauri-apps/api/event';
+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,6 @@
 import { listen as listen$1 } from '@tauri-apps/api/event';
-import { initWebSocket, wsReady, ws } from '../../socket.js';
+import { hasTauriRuntime, initWebSocket, listenEvent, wsReady } from '../../socket.js';
+export { latencyMs } from '../../socket.js';
 
 /**
  * Event API module for Tauri Remote UI
@@ -7,48 +8,28 @@ import { initWebSocket, wsReady, ws } 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;
-        }
-        if (ws && ws.readyState === WebSocket.OPEN) {
-            // Handle WebSocket messages for events
-            const messageHandler = (wsEvent) => {
-                try {
-                    const data = JSON.parse(wsEvent.data);
-                    if (data.event === event) {
-                        handler(data);
-                    }
-                }
-                catch (err) {
-                    console.error(err);
-                    throw new Error('Error handling WebSocket event');
-                }
-            };
-            ws.addEventListener('message', messageHandler);
-            // Return an unlisten function
-            return () => {
-                ws === null || ws === void 0 ? void 0 : ws.removeEventListener('message', messageHandler);
-            };
-        }
-        else {
-            throw new Error("No WebSocket or Tauri IPC available to invoke");
-        }
+    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,16 +1,17 @@
 {
   "name": "tauri-remote-ui",
-  "license": "MIT",
-  "version": "0.28.0",
+  "license": "AGPL-3.0-only",
+  "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": "https://github.com/DraviaVemal/tauri-remote-ui"
   },
+  "readme": "./README.md",
   "exports": {
     ".": {
       "types": "./index.d.ts",

package/socket.cjs

@@ -1,78 +1,138 @@
 'use strict';
 
+var version = require('./version.cjs');
+
 /**
- * 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`.
  */
+/** Wire prefix used by the version-handshake exchange. */
+const VERSION_PREFIX = 'version:';
+/**
+ * Status discriminator on the response payload sent back from the Rust side.
+ *
+ * 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;
+const listenEvent = new EventTarget();
 exports.wsReady = null;
 const filterCollection = {};
-/**
- * Get the WebSocket URL based on the current window location
- */
+exports.latencyMs = 0;
+/** 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() {
+    if (hasTauriRuntime()) {
+        return;
+    }
+    if (exports.ws) {
+        return;
+    }
+    console.info('Tauri-Remote-UI : Remote RPC Attempting...');
+    const wsUrl = getWsUrl();
     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");
-        }
+        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();
+                    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.`);
+                    }
+                    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);
+                    }
+                    catch (err) {
+                        console.warn('Tauri-Remote-UI : Failed to parse RPC payload', err);
+                    }
+                }
+                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 {
-        if (exports.ws)
-            return;
-        console.info("Remote RPC Attempting...");
-        const wsUrl = getWsUrl();
-        try {
-            exports.ws = new WebSocket(wsUrl);
-            exports.wsReady = new Promise((resolve, reject) => {
-                exports.ws.onopen = () => {
-                    console.info("Remote Connected.");
-                    resolve();
-                };
-                exports.ws.onclose = () => {
-                    exports.ws = null;
-                    exports.wsReady = null;
-                    console.info("Remote Dis-Connected.");
-                    window.location.replace(getUrl());
-                };
-                exports.ws.onerror = (e) => {
-                    reject(e);
-                };
-                exports.ws.onmessage = ({ data }) => {
-                    let json_data = JSON.parse(data);
-                    json_data.id && filterCollection[json_data.id] && filterCollection[json_data.id](JSON.parse(json_data.payload));
-                };
-            });
-        }
-        catch (e) {
-            setTimeout(() => {
-                initWebSocket();
-            }, 5000);
-        }
+    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,17 +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 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,75 +1,132 @@
+import { PACKAGE_VERSION } from './version.js';
+
 /**
- * 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`.
  */
+/** Wire prefix used by the version-handshake exchange. */
+const VERSION_PREFIX = 'version:';
+/**
+ * Status discriminator on the response payload sent back from the Rust side.
+ *
+ * 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;
+const listenEvent = new EventTarget();
 let wsReady = null;
 const filterCollection = {};
-/**
- * Get the WebSocket URL based on the current window location
- */
+let latencyMs = 0;
+/** 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() {
+    if (hasTauriRuntime()) {
+        return;
+    }
+    if (ws) {
+        return;
+    }
+    console.info('Tauri-Remote-UI : Remote RPC Attempting...');
+    const wsUrl = getWsUrl();
     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");
-        }
+        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();
+                    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.`);
+                    }
+                    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);
+                    }
+                    catch (err) {
+                        console.warn('Tauri-Remote-UI : Failed to parse RPC payload', err);
+                    }
+                }
+                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 {
-        if (ws)
-            return;
-        console.info("Remote RPC Attempting...");
-        const wsUrl = getWsUrl();
-        try {
-            ws = new WebSocket(wsUrl);
-            wsReady = new Promise((resolve, reject) => {
-                ws.onopen = () => {
-                    console.info("Remote Connected.");
-                    resolve();
-                };
-                ws.onclose = () => {
-                    ws = null;
-                    wsReady = null;
-                    console.info("Remote Dis-Connected.");
-                    window.location.replace(getUrl());
-                };
-                ws.onerror = (e) => {
-                    reject(e);
-                };
-                ws.onmessage = ({ data }) => {
-                    let json_data = JSON.parse(data);
-                    json_data.id && filterCollection[json_data.id] && filterCollection[json_data.id](JSON.parse(json_data.payload));
-                };
-            });
-        }
-        catch (e) {
-            setTimeout(() => {
-                initWebSocket();
-            }, 5000);
-        }
+    catch (e) {
+        console.error(e);
     }
 }
 
-export { filterCollection, initWebSocket, 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 };