@mcp-ts/sdk 1.3.2 → 1.3.3

package/src/client/react/use-mcp.ts

@@ -64,6 +64,13 @@ export interface UseMcpOptions {
    * @default 60000
    */
   requestTimeout?: number;
+
+  /**
+   * Enable client debug logs.
+   * @default false
+   */
+  debug?: boolean;
+
 }
 
 export interface McpConnection {
@@ -74,6 +81,7 @@ export interface McpConnection {
   transport?: string;
   state: McpConnectionState;
   tools: ToolInfo[];
+  authUrl?: string;
   error?: string;
   createdAt?: Date;
 }
@@ -150,6 +158,11 @@ export interface McpClient {
    */
   finishAuth: (sessionId: string, code: string) => Promise<FinishAuthResult>;
 
+  /**
+   * Explicitly resume OAuth flow for an existing session
+   */
+  resumeAuth: (sessionId: string) => Promise<void>;
+
   /**
    * Call a tool from a session
    */
@@ -207,6 +220,7 @@ export function useMcp(options: UseMcpOptions): McpClient {
 
   const clientRef = useRef<SSEClient | null>(null);
   const isMountedRef = useRef(true);
+  const suppressAuthRedirectSessionsRef = useRef<Set<string>>(new Set());
 
   const [connections, setConnections] = useState<McpConnection[]>([]);
   const [status, setStatus] = useState<'connecting' | 'connected' | 'disconnected' | 'error'>(
@@ -239,7 +253,7 @@ export function useMcp(options: UseMcpOptions): McpClient {
           setStatus(newStatus);
         }
       },
-      requestTimeout: options.requestTimeout,
+      debug: options.debug,
     };
 
     const client = new SSEClient(clientOptions);
@@ -262,21 +276,36 @@ export function useMcp(options: UseMcpOptions): McpClient {
   /**
    * Update connections based on event
    */
-  const updateConnectionsFromEvent = useCallback((event: McpConnectionEvent) => {
-    if (!isMountedRef.current) return;
-
-    setConnections((prev: McpConnection[]) => {
-      switch (event.type) {
-        case 'state_changed': {
-          const existing = prev.find((c: McpConnection) => c.sessionId === event.sessionId);
-          if (existing) {
-            return prev.map((c: McpConnection) =>
-              c.sessionId === event.sessionId ? {
-                ...c,
-                state: event.state,
-                // update createdAt if present in event, otherwise keep existing
-                createdAt: event.createdAt ? new Date(event.createdAt) : c.createdAt
-              } : c
+  const updateConnectionsFromEvent = useCallback((event: McpConnectionEvent) => {
+    if (!isMountedRef.current) return;
+
+    const isTransientReconnectState = (state: McpConnectionState): boolean =>
+      state === 'INITIALIZING' ||
+      state === 'VALIDATING' ||
+      state === 'RECONNECTING' ||
+      state === 'CONNECTING' ||
+      state === 'CONNECTED' ||
+      state === 'DISCOVERING';
+
+    setConnections((prev: McpConnection[]) => {
+      switch (event.type) {
+        case 'state_changed': {
+          const existing = prev.find((c: McpConnection) => c.sessionId === event.sessionId);
+          if (existing) {
+            // In stateless per-request transport, tool calls can emit transient reconnect states.
+            // Keep READY sticky to avoid UI flicker from READY -> CONNECTING -> CONNECTED.
+            const nextState =
+              existing.state === 'READY' && isTransientReconnectState(event.state)
+                ? existing.state
+                : event.state;
+
+            return prev.map((c: McpConnection) =>
+              c.sessionId === event.sessionId ? {
+                ...c,
+                state: nextState,
+                // update createdAt if present in event, otherwise keep existing
+                createdAt: event.createdAt ? new Date(event.createdAt) : c.createdAt
+              } : c
             );
           } else {
             // Fix: Don't add back disconnected sessions that were just removed
@@ -315,14 +344,17 @@ export function useMcp(options: UseMcpOptions): McpClient {
           if (event.authUrl) {
             onLog?.('info', `OAuth required - redirecting to ${event.authUrl}`, { authUrl: event.authUrl });
 
-            if (onRedirect) {
-              onRedirect(event.authUrl);
-            } else if (typeof window !== 'undefined') {
-              window.location.href = event.authUrl;
+            // Suppress redirects/popups for auto-restore on page load.
+            if (!suppressAuthRedirectSessionsRef.current.has(event.sessionId)) {
+              if (onRedirect) {
+                onRedirect(event.authUrl);
+              } else if (typeof window !== 'undefined') {
+                window.location.href = event.authUrl;
+              }
             }
           }
           return prev.map((c: McpConnection) =>
-            c.sessionId === event.sessionId ? { ...c, state: 'AUTHENTICATING' } : c
+            c.sessionId === event.sessionId ? { ...c, state: 'AUTHENTICATING', authUrl: event.authUrl } : c
           );
         }
 
@@ -340,7 +372,7 @@ export function useMcp(options: UseMcpOptions): McpClient {
           return prev;
       }
     });
-  }, [onLog]);
+  }, [onLog, onRedirect]);
 
   /**
    * Load sessions from server
@@ -363,7 +395,7 @@ export function useMcp(options: UseMcpOptions): McpClient {
             serverName: s.serverName ?? 'Unknown Server',
             serverUrl: s.serverUrl,
             transport: s.transport,
-            state: 'VALIDATING' as McpConnectionState,
+            state: (s.active === false ? 'AUTHENTICATING' : 'VALIDATING') as McpConnectionState,
             createdAt: new Date(s.createdAt),
             tools: [],
           }))
@@ -375,9 +407,16 @@ export function useMcp(options: UseMcpOptions): McpClient {
         sessions.map(async (session: SessionInfo) => {
           if (clientRef.current) {
             try {
+              // Pending auth sessions should not auto-trigger popup/redirect on reload.
+              if (session.active === false) {
+                return;
+              }
+              suppressAuthRedirectSessionsRef.current.add(session.sessionId);
               await clientRef.current.restoreSession(session.sessionId);
             } catch (error) {
               console.error(`[useMcp] Failed to validate session ${session.sessionId}:`, error);
+            } finally {
+              suppressAuthRedirectSessionsRef.current.delete(session.sessionId);
             }
           }
         })
@@ -461,6 +500,18 @@ export function useMcp(options: UseMcpOptions): McpClient {
     return await clientRef.current.finishAuth(sessionId, code);
   }, []);
 
+  /**
+   * Explicit user action to resume OAuth for an existing pending session.
+   */
+  const resumeAuth = useCallback(async (sessionId: string): Promise<void> => {
+    if (!clientRef.current) {
+      throw new Error('SSE client not initialized');
+    }
+    // Ensure this attempt is not suppressed as background restore.
+    suppressAuthRedirectSessionsRef.current.delete(sessionId);
+    await clientRef.current.restoreSession(sessionId);
+  }, []);
+
   /**
    * Call a tool
    */
@@ -578,6 +629,7 @@ export function useMcp(options: UseMcpOptions): McpClient {
     connectSSE,
     disconnectSSE,
     finishAuth,
+    resumeAuth,
     callTool,
     listTools,
     listPrompts,

package/src/client/vue/use-mcp.ts

@@ -16,7 +16,7 @@ import type {
     SessionInfo,
 } from '../../shared/types';
 
-export interface UseMcpOptions {
+export interface UseMcpOptions {
     /**
      * SSE endpoint URL
      */
@@ -53,12 +53,24 @@ export interface UseMcpOptions {
      * Debug logging callback
      */
     onLog?: (level: string, message: string, metadata?: Record<string, unknown>) => void;
-    /**
-     * Optional callback to handle OAuth redirects (e.g. for popup flow)
-     * If provided, this will be called instead of window.location.href assignment
-     */
-    onRedirect?: (url: string) => void;
-}
+    /**
+     * Optional callback to handle OAuth redirects (e.g. for popup flow)
+     * If provided, this will be called instead of window.location.href assignment
+     */
+    onRedirect?: (url: string) => void;
+
+    /**
+     * Request timeout in milliseconds
+     * @default 60000
+     */
+    requestTimeout?: number;
+
+    /**
+     * Enable client debug logs.
+     * @default false
+     */
+    debug?: boolean;
+}
 
 export interface McpConnection {
     sessionId: string;
@@ -68,6 +80,7 @@ export interface McpConnection {
     transport?: string;
     state: McpConnectionState;
     tools: ToolInfo[];
+    authUrl?: string;
     error?: string;
     createdAt?: Date;
 }
@@ -144,6 +157,11 @@ export interface McpClient {
      */
     finishAuth: (sessionId: string, code: string) => Promise<FinishAuthResult>;
 
+    /**
+     * Explicitly resume OAuth flow for an existing session
+     */
+    resumeAuth: (sessionId: string) => Promise<void>;
+
     /**
      * Call a tool from a session
      */
@@ -173,11 +191,16 @@ export interface McpClient {
      */
     listResources: (sessionId: string) => Promise<ListResourcesResult>;
 
-    /**
-     * Read a specific resource
-     */
-    readResource: (sessionId: string, uri: string) => Promise<unknown>;
-}
+    /**
+     * Read a specific resource
+     */
+    readResource: (sessionId: string, uri: string) => Promise<unknown>;
+
+    /**
+     * Access the underlying SSEClient instance (for advanced usage like AppHost)
+     */
+    sseClient: SSEClient | null;
+}
 
 /**
  * Vue Composable for MCP connection management with SSE
@@ -197,6 +220,7 @@ export function useMcp(options: UseMcpOptions): McpClient {
     // Use shallowRef for client instance as it doesn't need deep reactivity
     const clientRef = shallowRef<SSEClient | null>(null);
     const isMountedRef = ref(true);
+    const suppressAuthRedirectSessions = ref(new Set<string>());
 
     const connections = ref<McpConnection[]>([]);
     const status = ref<'connecting' | 'connected' | 'disconnected' | 'error'>('disconnected');
@@ -205,20 +229,35 @@ export function useMcp(options: UseMcpOptions): McpClient {
     /**
      * Update connections based on event
      */
-    const updateConnectionsFromEvent = (event: McpConnectionEvent) => {
-        if (!isMountedRef.value) return;
-
-        switch (event.type) {
-            case 'state_changed': {
-                const existing = connections.value.find((c) => c.sessionId === event.sessionId);
-                if (existing) {
-                    const index = connections.value.indexOf(existing);
-                    connections.value[index] = {
-                        ...existing,
-                        state: event.state,
-                        // update createdAt if present in event, otherwise keep existing
-                        createdAt: event.createdAt ? new Date(event.createdAt) : existing.createdAt
-                    };
+    const updateConnectionsFromEvent = (event: McpConnectionEvent) => {
+        if (!isMountedRef.value) return;
+
+        const isTransientReconnectState = (state: McpConnectionState): boolean =>
+            state === 'INITIALIZING' ||
+            state === 'VALIDATING' ||
+            state === 'RECONNECTING' ||
+            state === 'CONNECTING' ||
+            state === 'CONNECTED' ||
+            state === 'DISCOVERING';
+
+        switch (event.type) {
+            case 'state_changed': {
+                const existing = connections.value.find((c) => c.sessionId === event.sessionId);
+                if (existing) {
+                    // In stateless per-request transport, tool calls can emit transient reconnect states.
+                    // Keep READY sticky to avoid UI flicker from READY -> CONNECTING -> CONNECTED.
+                    const nextState =
+                        existing.state === 'READY' && isTransientReconnectState(event.state)
+                            ? existing.state
+                            : event.state;
+
+                    const index = connections.value.indexOf(existing);
+                    connections.value[index] = {
+                        ...existing,
+                        state: nextState,
+                        // update createdAt if present in event, otherwise keep existing
+                        createdAt: event.createdAt ? new Date(event.createdAt) : existing.createdAt
+                    };
                 } else {
                     // Fix: Don't add back disconnected sessions that were just removed
                     if (event.state === 'DISCONNECTED') {
@@ -250,15 +289,18 @@ export function useMcp(options: UseMcpOptions): McpClient {
                 if (event.authUrl) {
                     onLog?.('info', `OAuth required - redirecting to ${event.authUrl}`, { authUrl: event.authUrl });
 
-                    if (onRedirect) {
-                        onRedirect(event.authUrl);
-                    } else if (typeof window !== 'undefined') {
-                        window.location.href = event.authUrl;
+                    // Suppress redirects/popups for background auto-restore on page load.
+                    if (!suppressAuthRedirectSessions.value.has(event.sessionId)) {
+                        if (onRedirect) {
+                            onRedirect(event.authUrl);
+                        } else if (typeof window !== 'undefined') {
+                            window.location.href = event.authUrl;
+                        }
                     }
                 }
                 const index = connections.value.findIndex((c) => c.sessionId === event.sessionId);
                 if (index !== -1) {
-                    connections.value[index] = { ...connections.value[index], state: 'AUTHENTICATING' };
+                    connections.value[index] = { ...connections.value[index], state: 'AUTHENTICATING', authUrl: event.authUrl };
                 }
                 break;
             }
@@ -298,7 +340,7 @@ export function useMcp(options: UseMcpOptions): McpClient {
                     serverName: s.serverName ?? 'Unknown Server',
                     serverUrl: s.serverUrl,
                     transport: s.transport,
-                    state: 'VALIDATING' as McpConnectionState,
+                    state: (s.active === false ? 'AUTHENTICATING' : 'VALIDATING') as McpConnectionState,
                     createdAt: new Date(s.createdAt),
                     tools: [],
                 }));
@@ -309,9 +351,16 @@ export function useMcp(options: UseMcpOptions): McpClient {
                 sessions.map(async (session: SessionInfo) => {
                     if (clientRef.value) {
                         try {
+                            // Pending auth sessions should not auto-trigger popup/redirect on reload.
+                            if (session.active === false) {
+                                return;
+                            }
+                            suppressAuthRedirectSessions.value.add(session.sessionId);
                             await clientRef.value.restoreSession(session.sessionId);
                         } catch (error) {
                             console.error(`[useMcp] Failed to validate session ${session.sessionId}:`, error);
+                        } finally {
+                            suppressAuthRedirectSessions.value.delete(session.sessionId);
                         }
                     }
                 })
@@ -335,10 +384,10 @@ export function useMcp(options: UseMcpOptions): McpClient {
             clientRef.value.disconnect();
         }
 
-        const clientOptions: SSEClientOptions = {
-            url,
-            identity,
-            authToken,
+        const clientOptions: SSEClientOptions = {
+            url,
+            identity,
+            authToken,
             onConnectionEvent: (event) => {
                 // Update local state based on event
                 updateConnectionsFromEvent(event);
@@ -349,12 +398,13 @@ export function useMcp(options: UseMcpOptions): McpClient {
             onObservabilityEvent: (event) => {
                 onLog?.(event.level || 'info', event.message || event.displayMessage || 'No message', event.metadata);
             },
-            onStatusChange: (newStatus) => {
-                if (isMountedRef.value) {
-                    status.value = newStatus;
-                }
-            },
-        };
+            onStatusChange: (newStatus) => {
+                if (isMountedRef.value) {
+                    status.value = newStatus;
+                }
+            },
+            debug: options.debug,
+        };
 
         const client = new SSEClient(clientOptions);
         clientRef.value = client;
@@ -444,6 +494,17 @@ export function useMcp(options: UseMcpOptions): McpClient {
         return await clientRef.value.finishAuth(sessionId, code);
     };
 
+    /**
+     * Explicit user action to resume OAuth for an existing pending session.
+     */
+    const resumeAuth = async (sessionId: string): Promise<void> => {
+        if (!clientRef.value) {
+            throw new Error('SSE client not initialized');
+        }
+        suppressAuthRedirectSessions.value.delete(sessionId);
+        await clientRef.value.restoreSession(sessionId);
+    };
+
     /**
      * Call a tool
      */
@@ -544,11 +605,13 @@ export function useMcp(options: UseMcpOptions): McpClient {
         connectSSE,
         disconnectSSE,
         finishAuth,
+        resumeAuth,
         callTool,
         listTools,
-        listPrompts,
-        getPrompt,
-        listResources,
-        readResource,
-    };
-}
+        listPrompts,
+        getPrompt,
+        listResources,
+        readResource,
+        sseClient: clientRef.value,
+    };
+}