@mcp-ts/sdk 1.5.0 → 1.5.1

package/dist/client/react.mjs

@@ -1,7 +1,7 @@
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, memo, useCallback, useMemo } from 'react';
 import { nanoid } from 'nanoid';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { AppBridge, PostMessageTransport } from '@modelcontextprotocol/ext-apps/app-bridge';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -313,12 +313,19 @@ function useMcp(options) {
   const updateConnectionsFromEvent = useCallback((event) => {
     if (!isMountedRef.current) return;
     const isTransientReconnectState = (state) => state === "INITIALIZING" || state === "VALIDATING" || state === "RECONNECTING" || state === "CONNECTING" || state === "CONNECTED" || state === "DISCOVERING";
+    const getVisibleState = (incomingState, existingState, previousState) => {
+      if (incomingState === "INITIALIZING" && (existingState === "AUTHENTICATING" || existingState === "AUTHENTICATED" || previousState === "AUTHENTICATING" || previousState === "AUTHENTICATED")) {
+        return existingState === "AUTHENTICATED" || previousState === "AUTHENTICATED" ? "AUTHENTICATED" : "AUTHENTICATING";
+      }
+      return incomingState;
+    };
     setConnections((prev) => {
       switch (event.type) {
         case "state_changed": {
           const existing = prev.find((c) => c.sessionId === event.sessionId);
           if (existing) {
-            const nextState = existing.state === "READY" && isTransientReconnectState(event.state) ? existing.state : event.state;
+            const normalizedState = getVisibleState(event.state, existing.state, event.previousState);
+            const nextState = existing.state === "READY" && isTransientReconnectState(normalizedState) ? existing.state : normalizedState;
             return prev.map(
               (c) => c.sessionId === event.sessionId ? {
                 ...c,
@@ -338,7 +345,9 @@ function useMcp(options) {
                 serverId: event.serverId,
                 serverName: event.serverName,
                 serverUrl: event.serverUrl,
-                state: event.state,
+                // New connections do not have prior local state, so we normalize
+                // only against the server-reported previous state.
+                state: getVisibleState(event.state, void 0, event.previousState),
                 createdAt: event.createdAt ? new Date(event.createdAt) : void 0,
                 tools: []
               }
@@ -591,6 +600,305 @@ function useMcp(options) {
     ]
   );
 }
+var AUTH_CODE_MESSAGE = "MCP_AUTH_CODE";
+var AUTH_RESULT_MESSAGE = "MCP_AUTH_RESULT";
+function postPopupResult(popupWindow, result) {
+  popupWindow?.postMessage(
+    {
+      type: AUTH_RESULT_MESSAGE,
+      ...result
+    },
+    window.location.origin
+  );
+}
+function openCenteredPopup(url, options = {}) {
+  const {
+    width = 600,
+    height = 700,
+    windowName = "mcp-auth-popup",
+    features = [],
+    onBlocked
+  } = options;
+  const left = window.screenX + (window.outerWidth - width) / 2;
+  const top = window.screenY + (window.outerHeight - height) / 2;
+  const featureList = [
+    `width=${width}`,
+    `height=${height}`,
+    `left=${left}`,
+    `top=${top}`,
+    "resizable=yes",
+    "scrollbars=yes",
+    "status=yes",
+    ...features
+  ].join(",");
+  const popup = window.open(url, windowName, featureList);
+  if (!popup) {
+    onBlocked?.(url);
+  }
+  return popup;
+}
+function createOAuthPopupRedirectHandler(options = {}) {
+  return (url) => {
+    openCenteredPopup(url, {
+      ...options,
+      onBlocked: options.onBlocked ?? ((blockedUrl) => {
+        window.alert("Popup blocked! Allow popups for this site to complete authentication.");
+        window.location.href = blockedUrl;
+      })
+    });
+  };
+}
+function useMcpOAuthPopup(connections, finishAuth) {
+  const pendingPopupsRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const handleMessage = async (event) => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+      if (event.data?.type !== AUTH_CODE_MESSAGE || !event.data.code) {
+        return;
+      }
+      const popupWindow = event.source && "postMessage" in event.source ? event.source : null;
+      const targetSessionId = typeof event.data.sessionId === "string" ? event.data.sessionId : "";
+      if (!targetSessionId) {
+        postPopupResult(popupWindow, {
+          success: false,
+          error: "Missing OAuth session identifier"
+        });
+        return;
+      }
+      const targetSession = connections.find((connection) => connection.sessionId === targetSessionId);
+      if (!targetSession) {
+        postPopupResult(popupWindow, {
+          sessionId: targetSessionId,
+          success: false,
+          error: "OAuth session not found in the current client state"
+        });
+        return;
+      }
+      if (popupWindow) {
+        pendingPopupsRef.current.set(targetSession.sessionId, popupWindow);
+      }
+      try {
+        await finishAuth(targetSession.sessionId, event.data.code);
+      } catch (error) {
+        pendingPopupsRef.current.delete(targetSession.sessionId);
+        postPopupResult(popupWindow, {
+          sessionId: targetSession.sessionId,
+          success: false,
+          error: error instanceof Error ? error.message : "Failed to finish auth"
+        });
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [connections, finishAuth]);
+  useEffect(() => {
+    for (const connection of connections) {
+      const popupWindow = pendingPopupsRef.current.get(connection.sessionId);
+      if (!popupWindow) {
+        continue;
+      }
+      if (connection.state === "AUTHENTICATED") {
+        postPopupResult(popupWindow, {
+          sessionId: connection.sessionId,
+          success: true
+        });
+        pendingPopupsRef.current.delete(connection.sessionId);
+        continue;
+      }
+      if (connection.state === "FAILED") {
+        postPopupResult(popupWindow, {
+          sessionId: connection.sessionId,
+          success: false,
+          error: connection.error || "Failed to complete authorization"
+        });
+        pendingPopupsRef.current.delete(connection.sessionId);
+      }
+    }
+  }, [connections]);
+}
+function McpOAuthCallbackContent({
+  code,
+  sessionId,
+  title = "Verifying Authorization",
+  initialStatus = "Completing your authorization...",
+  loadingFallback = "Loading...",
+  rootStyle,
+  cardStyle,
+  titleStyle,
+  messageStyle,
+  renderContainer,
+  debugPhase
+}) {
+  const [phase, setPhase] = useState(debugPhase || "loading");
+  const [errorMessage, setErrorMessage] = useState("");
+  const openerMissing = typeof window !== "undefined" ? !window.opener : false;
+  const missingCode = !code;
+  const missingSessionId = !sessionId;
+  const blockingError = openerMissing ? "Error: No opener window found. This window should be opened from the app." : missingCode ? "Error: No authorization code received." : missingSessionId ? "Error: No OAuth state received." : null;
+  useEffect(() => {
+    if (debugPhase) {
+      setPhase(debugPhase);
+      if (debugPhase === "error") setErrorMessage("Test error message representing a real failure.");
+      return;
+    }
+    if (blockingError) {
+      setPhase("error");
+      setErrorMessage(blockingError);
+      return;
+    }
+    let closed = false;
+    const handleResult = (event) => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+      if (event.data?.type !== AUTH_RESULT_MESSAGE) {
+        return;
+      }
+      if (event.data.sessionId !== sessionId) {
+        return;
+      }
+      if (event.data.success) {
+        setPhase("success");
+        window.removeEventListener("message", handleResult);
+        closed = true;
+        window.setTimeout(() => window.close(), 1200);
+        return;
+      }
+      const message = typeof event.data.error === "string" && event.data.error.length > 0 ? event.data.error : "Failed to complete authorization.";
+      setPhase("error");
+      setErrorMessage(message);
+    };
+    window.addEventListener("message", handleResult);
+    try {
+      window.opener.postMessage(
+        { type: AUTH_CODE_MESSAGE, code, sessionId },
+        window.location.origin
+      );
+    } catch (error) {
+      console.error("Failed to communicate with opener:", error);
+      window.setTimeout(() => {
+        setPhase("error");
+        setErrorMessage("Error: Could not communicate with main window.");
+      }, 0);
+    }
+    return () => {
+      if (!closed) {
+        window.removeEventListener("message", handleResult);
+      }
+    };
+  }, [blockingError, code, sessionId, debugPhase]);
+  const loadingBubbles = /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px", justifyContent: "center", height: "12px", alignItems: "center" }, children: [0, 150, 300].map((delay) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        width: "8px",
+        height: "8px",
+        borderRadius: "50%",
+        backgroundColor: "currentColor",
+        opacity: 0.3,
+        animation: `mcp-pulse 1.2s ease-in-out infinite`,
+        animationDelay: `${delay}ms`
+      }
+    },
+    delay
+  )) });
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: "100vh",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        flexDirection: "column",
+        backgroundColor: "#fafafa",
+        color: "#18181b",
+        boxSizing: "border-box",
+        padding: "1.5rem",
+        ...rootStyle
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes mcp-pulse { 0%, 100% { transform: scale(0.8); opacity: 0.4; } 50% { transform: scale(1.2); opacity: 1; } }
+          @keyframes mcp-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        ` }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              backgroundColor: "#fff",
+              borderRadius: "20px",
+              boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05)",
+              width: "100%",
+              maxWidth: "400px",
+              overflow: "hidden",
+              border: "1px solid #f4f4f5",
+              display: "flex",
+              flexDirection: "column",
+              ...cardStyle
+            },
+            children: /* @__PURE__ */ jsxs("div", { style: { padding: "3rem 2rem", textAlign: "center", animation: "mcp-fade-up 0.4s ease-out" }, children: [
+              phase === "loading" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "48px", width: "48px", background: "#f8fafc", borderRadius: "12px", border: "1px solid #f1f5f9", color: "#64748b" }, children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }) }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+                  /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, ...titleStyle }, children: title }),
+                  /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "0.9rem", color: "#71717a", lineHeight: 1.5, ...messageStyle }, children: initialStatus })
+                ] }),
+                loadingBubbles
+              ] }),
+              phase === "success" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxs("svg", { style: { color: "#10b981" }, width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsx("path", { d: "M8 12l3 3 5-5" })
+                ] }),
+                /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 600, ...titleStyle }, children: "Connected" }),
+                /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "0.9rem", color: "#71717a", lineHeight: 1.5, ...messageStyle }, children: "Authorization complete. This window will close automatically." })
+              ] }),
+              phase === "error" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxs("svg", { style: { color: "#ef4444" }, width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsx("path", { d: "M15 9l-6 6M9 9l6 6" })
+                ] }),
+                /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 600, ...titleStyle }, children: "Connection Failed" }),
+                /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "0.9rem", color: "#ef4444", fontWeight: 500, ...messageStyle }, children: errorMessage }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => window.close(),
+                    style: {
+                      marginTop: "0.5rem",
+                      padding: "0.625rem 1.25rem",
+                      border: "none",
+                      borderRadius: "8px",
+                      backgroundColor: "#fef2f2",
+                      color: "#ef4444",
+                      cursor: "pointer",
+                      fontWeight: 600,
+                      fontSize: "0.875rem"
+                    },
+                    children: "Close Window"
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+  if (renderContainer) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderContainer(content) });
+  }
+  return content;
+}
+function McpOAuthCallbackFallback({
+  children = "Loading..."
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: children || "Loading..." });
+}
 
 // src/client/core/constants.ts
 var SANDBOX_PROXY_READY_METHOD = "ui/notifications/sandbox-proxy-ready";
@@ -1367,6 +1675,6 @@ function getMcpAppMetadata(mcpClient, toolName, input) {
   return void 0;
 }
 
-export { APP_HOST_DEFAULTS, AppHost, DEFAULT_MCP_APP_CSP, McpAppRenderer, SANDBOX_PROXY_READY_METHOD, SANDBOX_RESOURCE_READY_METHOD, SSEClient, getMcpAppMetadata, useAppHost, useMcp, useMcpApps };
+export { APP_HOST_DEFAULTS, AppHost, DEFAULT_MCP_APP_CSP, McpAppRenderer, McpOAuthCallbackContent, McpOAuthCallbackFallback, SANDBOX_PROXY_READY_METHOD, SANDBOX_RESOURCE_READY_METHOD, SSEClient, createOAuthPopupRedirectHandler, getMcpAppMetadata, openCenteredPopup, useAppHost, useMcp, useMcpApps, useMcpOAuthPopup };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map