@mcp-ts/sdk 1.5.0 → 1.5.2

package/dist/client/react.d.ts

@@ -4,7 +4,7 @@ import { c as McpConnectionState, M as McpConnectionEvent } from '../events-CK3N
 export { D as Disposable, a as DisposableStore, E as Emitter, b as Event, d as McpObservabilityEvent } from '../events-CK3N--3g.js';
 import { v as ToolInfo, k as FinishAuthResult, n as ListToolsRpcResult, L as ListPromptsResult, l as ListResourcesResult } from '../types-CfCoIsWI.js';
 export { p as McpRpcRequest, q as McpRpcResponse } from '../types-CfCoIsWI.js';
-import React$1 from 'react';
+import React$1, { ReactNode, CSSProperties } from 'react';
 import '@modelcontextprotocol/ext-apps/app-bridge';
 import '@modelcontextprotocol/sdk/types.js';
 
@@ -100,6 +100,16 @@ interface McpClient$1 {
      * Disconnect from an MCP server
      */
     disconnect: (sessionId: string) => Promise<void>;
+    /**
+     * Reconnect to an MCP server (disconnects existing session first)
+     */
+    reconnect: (params: {
+        serverId: string;
+        serverName: string;
+        serverUrl: string;
+        callbackUrl: string;
+        transportType?: 'sse' | 'streamable_http';
+    }) => Promise<string>;
     /**
      * Get connection by session ID
      */
@@ -170,6 +180,85 @@ interface McpClient$1 {
  */
 declare function useMcp(options: UseMcpOptions): McpClient$1;
 
+interface OAuthPopupConnectionLike {
+    sessionId: string;
+    state: string;
+    error?: string;
+}
+/**
+ * Optional helpers for popup-based OAuth UX.
+ *
+ * These utilities sit on top of the core MCP auth primitives:
+ * - `useMcp({ onRedirect })` to decide how auth navigation happens
+ * - `finishAuth(sessionId, code)` to complete code exchange
+ *
+ * Consumers are free to:
+ * - use these helpers as-is for a turnkey popup flow
+ * - build their own popup UI/message bridge
+ * - skip popups entirely and handle auth in a normal callback page
+ */
+interface OAuthPopupRedirectOptions {
+    width?: number;
+    height?: number;
+    windowName?: string;
+    features?: string[];
+    onBlocked?: (url: string) => void;
+}
+interface McpOAuthCallbackContentProps {
+    code?: string | null;
+    sessionId?: string | null;
+    title?: ReactNode;
+    initialStatus?: string;
+    loadingFallback?: ReactNode;
+    rootStyle?: CSSProperties;
+    cardStyle?: CSSProperties;
+    titleStyle?: CSSProperties;
+    messageStyle?: CSSProperties;
+    renderContainer?: (content: ReactNode) => ReactNode;
+    debugPhase?: 'loading' | 'success' | 'error';
+}
+/**
+ * Opens a centered popup window for OAuth.
+ *
+ * Convenience only: callers can replace this entirely with their own popup,
+ * modal, redirect, or router-based navigation strategy.
+ */
+declare function openCenteredPopup(url: string, options?: OAuthPopupRedirectOptions): Window | null;
+/**
+ * Creates an `onRedirect` handler suitable for `useMcp({ onRedirect })`.
+ *
+ * This is the simplest popup entry point, but it is intentionally optional.
+ * Applications can provide any redirect handler they want, including full-page
+ * navigation or a completely custom popup implementation.
+ */
+declare function createOAuthPopupRedirectHandler(options?: OAuthPopupRedirectOptions): (url: string) => void;
+/**
+ * Handles opener-side popup coordination for OAuth code exchange.
+ *
+ * Use this when you want popup auth but do not want to reimplement the
+ * postMessage wiring between the main app window and the popup callback page.
+ *
+ * If you are not using a popup flow, you do not need this hook.
+ */
+declare function useMcpOAuthPopup<TConnection extends OAuthPopupConnectionLike>(connections: TConnection[], finishAuth: (sessionId: string, code: string) => Promise<unknown>): void;
+/**
+ * Default popup callback UI for popup-based OAuth flows.
+ *
+ * This component reads the OAuth `code` and `state/sessionId`, notifies the
+ * opener window, waits for success/failure, and closes the popup on success.
+ *
+ * It is intentionally optional: apps can replace it with their own callback
+ * page UI or skip popup auth entirely and call `finishAuth(sessionId, code)`
+ * from any callback route they control.
+ */
+declare function McpOAuthCallbackContent({ code, sessionId, title, initialStatus, loadingFallback, rootStyle, cardStyle, titleStyle, messageStyle, renderContainer, debugPhase, }: McpOAuthCallbackContentProps): JSX.Element;
+/**
+ * Tiny fallback component for Suspense-wrapped callback pages.
+ */
+declare function McpOAuthCallbackFallback({ children, }: {
+    children?: ReactNode;
+}): JSX.Element;
+
 /**
  * Hook to host an MCP App in a React component
  *
@@ -256,4 +345,4 @@ declare function useMcpApps(mcpClient: McpClient | null): {
 };
 declare function getMcpAppMetadata(mcpClient: McpClient | null, toolName: string, input?: Record<string, unknown> | null): McpAppMetadata | undefined;
 
-export { AppHost, type McpAppMetadata, McpAppRenderer, type McpAppRendererHandle, type McpAppRendererProps, type McpClient$1 as McpClient, type McpConnection, McpConnectionEvent, McpConnectionState, SSEClient, ToolInfo, type UseMcpOptions, getMcpAppMetadata, useAppHost, useMcp, useMcpApps };
+export { AppHost, type McpAppMetadata, McpAppRenderer, type McpAppRendererHandle, type McpAppRendererProps, type McpClient$1 as McpClient, type McpConnection, McpConnectionEvent, McpConnectionState, McpOAuthCallbackContent, type McpOAuthCallbackContentProps, McpOAuthCallbackFallback, type OAuthPopupConnectionLike, type OAuthPopupRedirectOptions, SSEClient, ToolInfo, type UseMcpOptions, createOAuthPopupRedirectHandler, getMcpAppMetadata, openCenteredPopup, useAppHost, useMcp, useMcpApps, useMcpOAuthPopup };

package/dist/client/react.js

@@ -2,8 +2,8 @@
 
 var react = require('react');
 var nanoid = require('nanoid');
-var appBridge = require('@modelcontextprotocol/ext-apps/app-bridge');
 var jsxRuntime = require('react/jsx-runtime');
+var appBridge = require('@modelcontextprotocol/ext-apps/app-bridge');
 
 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;
@@ -315,12 +315,19 @@ function useMcp(options) {
   const updateConnectionsFromEvent = react.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,
@@ -340,7 +347,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: []
               }
@@ -449,6 +458,27 @@ function useMcp(options) {
     },
     []
   );
+  const reconnect = react.useCallback(
+    async (params) => {
+      if (!clientRef.current) {
+        throw new Error("SSE client not initialized");
+      }
+      const existing = connections.find(
+        (c) => c.serverId === params.serverId || c.serverUrl === params.serverUrl
+      );
+      if (existing) {
+        await clientRef.current.disconnectFromServer(existing.sessionId);
+        if (isMountedRef.current) {
+          setConnections(
+            (prev) => prev.filter((c) => c.sessionId !== existing.sessionId)
+          );
+        }
+      }
+      const result = await clientRef.current.connectToServer(params);
+      return result.sessionId;
+    },
+    [connections]
+  );
   const disconnect = react.useCallback(async (sessionId) => {
     if (!clientRef.current) {
       throw new Error("SSE client not initialized");
@@ -550,6 +580,7 @@ function useMcp(options) {
       status,
       isInitializing,
       connect,
+      reconnect,
       disconnect,
       getConnection,
       getConnectionByServerId,
@@ -573,6 +604,7 @@ function useMcp(options) {
       status,
       isInitializing,
       connect,
+      reconnect,
       disconnect,
       getConnection,
       getConnectionByServerId,
@@ -593,6 +625,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 = react.useRef(/* @__PURE__ */ new Map());
+  react.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]);
+  react.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] = react.useState(debugPhase || "loading");
+  const [errorMessage, setErrorMessage] = react.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;
+  react.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__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "8px", justifyContent: "center", height: "12px", alignItems: "center" }, children: [0, 150, 300].map((delay) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { padding: "3rem 2rem", textAlign: "center", animation: "mcp-fade-up 0.4s ease-out" }, children: [
+              phase === "loading" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, ...titleStyle }, children: title }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: "0.9rem", color: "#71717a", lineHeight: 1.5, ...messageStyle }, children: initialStatus })
+                ] }),
+                loadingBubbles
+              ] }),
+              phase === "success" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 12l3 3 5-5" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 600, ...titleStyle }, children: "Connected" }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 9l-6 6M9 9l6 6" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 600, ...titleStyle }, children: "Connection Failed" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: "0.9rem", color: "#ef4444", fontWeight: 500, ...messageStyle }, children: errorMessage }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderContainer(content) });
+  }
+  return content;
+}
+function McpOAuthCallbackFallback({
+  children = "Loading..."
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children || "Loading..." });
+}
 
 // src/client/core/constants.ts
 var SANDBOX_PROXY_READY_METHOD = "ui/notifications/sandbox-proxy-ready";
@@ -1373,12 +1704,17 @@ exports.APP_HOST_DEFAULTS = APP_HOST_DEFAULTS;
 exports.AppHost = AppHost;
 exports.DEFAULT_MCP_APP_CSP = DEFAULT_MCP_APP_CSP;
 exports.McpAppRenderer = McpAppRenderer;
+exports.McpOAuthCallbackContent = McpOAuthCallbackContent;
+exports.McpOAuthCallbackFallback = McpOAuthCallbackFallback;
 exports.SANDBOX_PROXY_READY_METHOD = SANDBOX_PROXY_READY_METHOD;
 exports.SANDBOX_RESOURCE_READY_METHOD = SANDBOX_RESOURCE_READY_METHOD;
 exports.SSEClient = SSEClient;
+exports.createOAuthPopupRedirectHandler = createOAuthPopupRedirectHandler;
 exports.getMcpAppMetadata = getMcpAppMetadata;
+exports.openCenteredPopup = openCenteredPopup;
 exports.useAppHost = useAppHost;
 exports.useMcp = useMcp;
 exports.useMcpApps = useMcpApps;
+exports.useMcpOAuthPopup = useMcpOAuthPopup;
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map