@mcp-ts/sdk 1.3.1 → 1.3.3

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,8 +80,9 @@ export interface McpConnection {
     transport?: string;
     state: McpConnectionState;
     tools: ToolInfo[];
+    authUrl?: string;
     error?: string;
-    connectedAt?: Date;
+    createdAt?: Date;
 }
 
 export interface McpClient {
@@ -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,21 +229,47 @@ 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 };
+    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') {
+                        break;
+                    }
+
                     connections.value = [...connections.value, {
                         sessionId: event.sessionId,
                         serverId: event.serverId,
                         serverName: event.serverName,
                         state: event.state,
+                        createdAt: event.createdAt ? new Date(event.createdAt) : undefined,
                         tools: [],
                     }];
                 }
@@ -239,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;
             }
@@ -287,7 +340,8 @@ 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: [],
                 }));
             }
@@ -297,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);
                         }
                     }
                 })
@@ -323,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);
@@ -337,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;
@@ -432,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
      */
@@ -532,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,
+    };
+}