@mcp-web/react 0.1.2 → 0.1.3

package/dist/mcp-web-context.d.ts

@@ -5,6 +5,8 @@ import type { MCPWeb } from "@mcp-web/core";
 export interface MCPWebContextValue {
     /** The MCPWeb instance for registering tools and making queries. */
     mcpWeb: MCPWeb;
+    /** Whether the MCPWeb instance is currently attempting to connect. */
+    isConnecting: boolean;
     /** Whether the MCPWeb instance is connected to the bridge server. */
     isConnected: boolean;
 }

package/dist/mcp-web-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-web-context.d.ts","sourceRoot":"","sources":["../src/mcp-web-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAG5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,oEAAoE;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,WAAW,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,oDAAiD,CAAC"}
+{"version":3,"file":"mcp-web-context.d.ts","sourceRoot":"","sources":["../src/mcp-web-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAG5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,oEAAoE;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,YAAY,EAAE,OAAO,CAAC;IACtB,qEAAqE;IACrE,WAAW,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,oDAAiD,CAAC"}

package/dist/mcp-web-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-web-context.js","sourceRoot":"","sources":["../src/mcp-web-context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAYtC;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC"}
+{"version":3,"file":"mcp-web-context.js","sourceRoot":"","sources":["../src/mcp-web-context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AActC;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC"}

package/dist/use-connected-mcp-web.d.ts

@@ -5,6 +5,9 @@ import type { MCPWebContextValue } from "./mcp-web-context";
  * Connects on mount and disconnects on unmount.
  * Returns reactive connection state for triggering re-renders.
  *
+ * Subscribes to MCPWeb's connection state changes so that reconnection
+ * attempts (e.g. after a WebSocket drop) are reflected in React state.
+ *
  * Handles React StrictMode's double-mount behavior by using a ref to track
  * whether we should actually disconnect on cleanup.
  *

package/dist/use-connected-mcp-web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-connected-mcp-web.d.ts","sourceRoot":"","sources":["../src/use-connected-mcp-web.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,kBAAkB,CAkC1E"}
+{"version":3,"file":"use-connected-mcp-web.d.ts","sourceRoot":"","sources":["../src/use-connected-mcp-web.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,kBAAkB,CA0C1E"}

package/dist/use-connected-mcp-web.js

@@ -4,29 +4,38 @@ import { useEffect, useRef, useState } from "react";
  * Connects on mount and disconnects on unmount.
  * Returns reactive connection state for triggering re-renders.
  *
+ * Subscribes to MCPWeb's connection state changes so that reconnection
+ * attempts (e.g. after a WebSocket drop) are reflected in React state.
+ *
  * Handles React StrictMode's double-mount behavior by using a ref to track
  * whether we should actually disconnect on cleanup.
  *
  * @internal
  */
 export function useConnectedMCPWeb(mcpInstance) {
+    const [isConnecting, setIsConnecting] = useState(mcpInstance.connecting);
     const [isConnected, setIsConnected] = useState(mcpInstance.connected);
     // Track if the effect has been cleaned up to handle StrictMode double-mount
     const cleanedUpRef = useRef(false);
+    // Subscribe to connection state changes from the MCPWeb instance.
+    // This is the single source of truth — all state updates flow through here
+    // (and the initial connect effect below for the first mount).
+    useEffect(() => {
+        const unsubscribe = mcpInstance.onConnectionStateChange(() => {
+            setIsConnecting(mcpInstance.connecting);
+            setIsConnected(mcpInstance.connected);
+        });
+        return unsubscribe;
+    }, [mcpInstance]);
     useEffect(() => {
         // Reset the cleanup flag on mount
         cleanedUpRef.current = false;
-        if (!mcpInstance.connected) {
-            mcpInstance.connect().then(() => {
-                // Only update state if we haven't been cleaned up
-                if (!cleanedUpRef.current) {
-                    setIsConnected(true);
-                }
+        if (!mcpInstance.connected && !mcpInstance.connecting) {
+            mcpInstance.connect().catch(() => {
+                // Connection failed — state listener already handles updates.
+                // Nothing to do here.
             });
         }
-        else {
-            setIsConnected(true);
-        }
         return () => {
             cleanedUpRef.current = true;
             // Use setTimeout to defer disconnect, allowing StrictMode's remount to cancel it
@@ -39,6 +48,6 @@ export function useConnectedMCPWeb(mcpInstance) {
             }, 0);
         };
     }, [mcpInstance]);
-    return { mcpWeb: mcpInstance, isConnected };
+    return { mcpWeb: mcpInstance, isConnecting, isConnected };
 }
 //# sourceMappingURL=use-connected-mcp-web.js.map

package/dist/use-connected-mcp-web.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-connected-mcp-web.js","sourceRoot":"","sources":["../src/use-connected-mcp-web.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB,CAAC,WAAmB;IACpD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACtE,4EAA4E;IAC5E,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,kCAAkC;QAClC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;QAE7B,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC;YAC3B,WAAW,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC9B,kDAAkD;gBAClD,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;oBAC1B,cAAc,CAAC,IAAI,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,iFAAiF;YACjF,sFAAsF;YACtF,UAAU,CAAC,GAAG,EAAE;gBACd,6EAA6E;gBAC7E,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;oBACzB,WAAW,CAAC,UAAU,EAAE,CAAC;gBAC3B,CAAC;YACH,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AAC9C,CAAC"}
+{"version":3,"file":"use-connected-mcp-web.js","sourceRoot":"","sources":["../src/use-connected-mcp-web.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,kBAAkB,CAAC,WAAmB;IACpD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACtE,4EAA4E;IAC5E,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEnC,kEAAkE;IAClE,2EAA2E;IAC3E,8DAA8D;IAC9D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,WAAW,CAAC,uBAAuB,CAAC,GAAG,EAAE;YAC3D,eAAe,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YACxC,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;QACb,kCAAkC;QAClC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;QAE7B,IAAI,CAAC,WAAW,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;YACtD,WAAW,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE;gBAC/B,8DAA8D;gBAC9D,sBAAsB;YACxB,CAAC,CAAC,CAAC;QACL,CAAC;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,iFAAiF;YACjF,sFAAsF;YACtF,UAAU,CAAC,GAAG,EAAE;gBACd,6EAA6E;gBAC7E,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;oBACzB,WAAW,CAAC,UAAU,EAAE,CAAC;gBAC3B,CAAC;YACH,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;AAC5D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-web/react",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "MCP Web integration for React state management",
   "type": "module",
   "main": "dist/index.js",
@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "zod": "~4.1.12",
-    "@mcp-web/decompose-zod-schema": "0.1.2",
-    "@mcp-web/types": "0.1.2",
-    "@mcp-web/core": "0.1.2"
+    "@mcp-web/types": "0.1.3",
+    "@mcp-web/core": "0.1.3",
+    "@mcp-web/decompose-zod-schema": "0.1.3"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",

package/src/mcp-web-context.ts

@@ -7,6 +7,8 @@ import { createContext } from "react";
 export interface MCPWebContextValue {
   /** The MCPWeb instance for registering tools and making queries. */
   mcpWeb: MCPWeb;
+  /** Whether the MCPWeb instance is currently attempting to connect. */
+  isConnecting: boolean;
   /** Whether the MCPWeb instance is connected to the bridge server. */
   isConnected: boolean;
 }

package/src/use-connected-mcp-web.ts

@@ -7,29 +7,40 @@ import type { MCPWebContextValue } from "./mcp-web-context";
  * Connects on mount and disconnects on unmount.
  * Returns reactive connection state for triggering re-renders.
  *
+ * Subscribes to MCPWeb's connection state changes so that reconnection
+ * attempts (e.g. after a WebSocket drop) are reflected in React state.
+ *
  * Handles React StrictMode's double-mount behavior by using a ref to track
  * whether we should actually disconnect on cleanup.
  *
  * @internal
  */
 export function useConnectedMCPWeb(mcpInstance: MCPWeb): MCPWebContextValue {
+  const [isConnecting, setIsConnecting] = useState(mcpInstance.connecting);
   const [isConnected, setIsConnected] = useState(mcpInstance.connected);
   // Track if the effect has been cleaned up to handle StrictMode double-mount
   const cleanedUpRef = useRef(false);
 
+  // Subscribe to connection state changes from the MCPWeb instance.
+  // This is the single source of truth — all state updates flow through here
+  // (and the initial connect effect below for the first mount).
+  useEffect(() => {
+    const unsubscribe = mcpInstance.onConnectionStateChange(() => {
+      setIsConnecting(mcpInstance.connecting);
+      setIsConnected(mcpInstance.connected);
+    });
+    return unsubscribe;
+  }, [mcpInstance]);
+
   useEffect(() => {
     // Reset the cleanup flag on mount
     cleanedUpRef.current = false;
 
-    if (!mcpInstance.connected) {
-      mcpInstance.connect().then(() => {
-        // Only update state if we haven't been cleaned up
-        if (!cleanedUpRef.current) {
-          setIsConnected(true);
-        }
+    if (!mcpInstance.connected && !mcpInstance.connecting) {
+      mcpInstance.connect().catch(() => {
+        // Connection failed — state listener already handles updates.
+        // Nothing to do here.
       });
-    } else {
-      setIsConnected(true);
     }
 
     return () => {
@@ -45,5 +56,5 @@ export function useConnectedMCPWeb(mcpInstance: MCPWeb): MCPWebContextValue {
     };
   }, [mcpInstance]);
 
-  return { mcpWeb: mcpInstance, isConnected };
+  return { mcpWeb: mcpInstance, isConnecting, isConnected };
 }