feat: enhance sandbox management and error handling

- Added detailed logging for sandbox creation and URL updates in startSandbox function.
- Improved error handling for refreshing existing sandboxes and added fallback to create new ones if necessary.
- Updated chat route to handle 404 responses gracefully when fetching chat data.
- Refactored chat component to manage loading states and error notifications more effectively.
- Enhanced MCP server manager to provide clearer feedback on server status changes and actions.

app/actions.ts

@@ -86,6 +86,8 @@ export async function startSandbox(params: {
 }): Promise<{ url: string }> {
   const { id, command, args, env } = params;
   
+  console.log(`[startSandbox] Starting sandbox for ID: ${id}`);
+  
   // Validate required fields
   if (!id || !command || !args) {
     throw new Error('Missing required fields');
@@ -95,7 +97,27 @@ export async function startSandbox(params: {
   if (activeSandboxes.has(id)) {
     // If we do, get the URL and return it without creating a new sandbox
     const existingSandbox = activeSandboxes.get(id);
-    return { url: existingSandbox.url };
+    console.log(`[startSandbox] Reusing existing sandbox for ${id}, URL: ${existingSandbox.url}`);
+    
+    // Re-fetch the URL to make sure it's current
+    try {
+      const freshUrl = await existingSandbox.sandbox.getUrl();
+      console.log(`[startSandbox] Updated sandbox URL for ${id}: ${freshUrl}`);
+      
+      // Update the URL in the map
+      activeSandboxes.set(id, { 
+        sandbox: existingSandbox.sandbox, 
+        url: freshUrl 
+      });
+      
+      return { url: freshUrl };
+    } catch (error) {
+      console.error(`[startSandbox] Error refreshing sandbox URL for ${id}:`, error);
+      
+      // Fall through to create a new sandbox if we couldn't refresh the URL
+      activeSandboxes.delete(id);
+      console.log(`[startSandbox] Removed stale sandbox for ${id}, will create a new one`);
+    }
   }
   
   // Build the command string
@@ -123,10 +145,12 @@ export async function startSandbox(params: {
   }
   
   // Start the sandbox
-  console.log(`Starting sandbox for ${id} with command: ${cmd}`);
+  console.log(`[startSandbox] Creating new sandbox for ${id} with command: ${cmd}`);
   const sandbox = await startMcpSandbox({ cmd, envs });
   const url = await sandbox.getUrl();
   
+  console.log(`[startSandbox] Sandbox created for ${id}, URL: ${url}`);
+  
   // Store the sandbox in our map
   activeSandboxes.set(id, { sandbox, url });
   

app/api/chat/route.ts

@@ -67,7 +67,7 @@ export async function POST(req: Request) {
       // Generate a title based on first user message
       const userMessage = messages.find(m => m.role === 'user');
       let title = 'New Chat';
-      
+
       if (userMessage) {
         try {
           title = await generateTitle([userMessage]);
@@ -75,7 +75,7 @@ export async function POST(req: Request) {
           console.error("Error generating title:", error);
         }
       }
-      
+
       // Save the chat immediately so it appears in the sidebar
       await saveChat({
         id,
@@ -133,11 +133,11 @@ export async function POST(req: Request) {
         },
       },
       anthropic: {
-        thinking: { 
-          type: 'enabled', 
-          budgetTokens: 12000 
+        thinking: {
+          type: 'enabled',
+          budgetTokens: 12000
         },
-      } 
+      }
     },
     experimental_transform: smoothStream({
       delayInMs: 5, // optional: defaults to 10ms
@@ -161,7 +161,7 @@ export async function POST(req: Request) {
 
       const dbMessages = convertToDBMessages(allMessages, id);
       await saveMessages({ messages: dbMessages });
-      
+
       // Clean up resources - now this just closes the client connections
       // not the actual servers which persist in the MCP context
       await cleanup();

app/chat/[id]/page.tsx

@@ -25,22 +25,21 @@ export default function ChatPage() {
       await queryClient.prefetchQuery({
         queryKey: ['chat', chatId, userId] as const,
         queryFn: async () => {
-          try {
-            const response = await fetch(`/api/chats/${chatId}`, {
-              headers: {
-                'x-user-id': userId
-              }
-            });
-            
-            if (!response.ok) {
-              throw new Error('Failed to load chat');
+          const response = await fetch(`/api/chats/${chatId}`, {
+            headers: {
+              'x-user-id': userId
             }
-            
-            return response.json();
-          } catch (error) {
-            console.error('Error prefetching chat:', error);
-            return null;
+          });
+          
+          if (!response.ok) {
+            // For 404, return empty chat data instead of throwing
+            if (response.status === 404) {
+              return { id: chatId, messages: [], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() };
+            }
+            throw new Error('Failed to load chat');
           }
+          
+          return response.json();
         },
         staleTime: 1000 * 60 * 5, // 5 minutes
       });

app/layout.tsx

@@ -4,6 +4,7 @@ import { ChatSidebar } from "@/components/chat-sidebar";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Menu } from "lucide-react";
 import { Providers } from "./providers";
+import { Analytics } from "@vercel/analytics/react"
 import "./globals.css";
 import Script from "next/script";
 
@@ -57,6 +58,7 @@ export default function RootLayout({
             </main>
           </div>
         </Providers>
+        <Analytics />
         <Script defer src="https://cloud.umami.is/script.js" data-website-id="1373896a-fb20-4c9d-b718-c723a2471ae5" />
       </body>
     </html>

components/chat.tsx

@@ -51,30 +51,27 @@ export default function Chat() {
   }, [chatId]);
   
   // Use React Query to fetch chat history
-  const { data: chatData, isLoading: isLoadingChat } = useQuery({
+  const { data: chatData, isLoading: isLoadingChat, error } = useQuery({
     queryKey: ['chat', chatId, userId] as const,
     queryFn: async ({ queryKey }) => {
       const [_, chatId, userId] = queryKey;
       if (!chatId || !userId) return null;
       
-      try {
-        const response = await fetch(`/api/chats/${chatId}`, {
-          headers: {
-            'x-user-id': userId
-          }
-        });
-        
-        if (!response.ok) {
-          throw new Error('Failed to load chat');
+      const response = await fetch(`/api/chats/${chatId}`, {
+        headers: {
+          'x-user-id': userId
         }
-        
-        const data = await response.json();
-        return data as ChatData;
-      } catch (error) {
-        console.error('Error loading chat history:', error);
-        toast.error('Failed to load chat history');
-        throw error;
+      });
+      
+      if (!response.ok) {
+        // For 404, return empty chat data instead of throwing
+        if (response.status === 404) {
+          return { id: chatId, messages: [], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() };
+        }
+        throw new Error('Failed to load chat');
       }
+      
+      return response.json() as Promise<ChatData>;
     },
     enabled: !!chatId && !!userId,
     retry: 1,
@@ -82,6 +79,14 @@ export default function Chat() {
     refetchOnWindowFocus: false
   });
   
+  // Handle query errors
+  useEffect(() => {
+    if (error) {
+      console.error('Error loading chat history:', error);
+      toast.error('Failed to load chat history');
+    }
+  }, [error]);
+  
   // Prepare initial messages from query data
   const initialMessages = useMemo(() => {
     if (!chatData || !chatData.messages || chatData.messages.length === 0) {

components/mcp-server-manager.tsx

@@ -196,16 +196,18 @@ export const MCPServerManager = ({
 
     const toggleServer = (id: string) => {
         if (selectedServers.includes(id)) {
-            // Remove from selected servers
+            // Remove from selected servers but DON'T stop the server
             onSelectedServersChange(selectedServers.filter(serverId => serverId !== id));
             const server = servers.find(s => s.id === id);
+            
             if (server) {
                 toast.success(`Disabled MCP server: ${server.name}`);
             }
         } else {
-            // Add to selected servers
+            // Add to selected servers but DON'T auto-start
             onSelectedServersChange([...selectedServers, id]);
             const server = servers.find(s => s.id === id);
+            
             if (server) {
                 toast.success(`Enabled MCP server: ${server.name}`);
             }
@@ -214,6 +216,7 @@ export const MCPServerManager = ({
 
     const clearAllServers = () => {
         if (selectedServers.length > 0) {
+            // Just deselect all servers without stopping them
             onSelectedServersChange([]);
             toast.success("All MCP servers disabled");
             resetAndClose();
@@ -400,57 +403,81 @@ export const MCPServerManager = ({
         setShowSensitiveHeaderValues({});
     };
 
-    // Add functions to control servers
+    // Update functions to control servers
     const toggleServerStatus = async (server: MCPServer, e: React.MouseEvent) => {
         e.stopPropagation();
         
         if (!server.status || server.status === 'disconnected' || server.status === 'error') {
-            // Start the server
             try {
+                updateServerStatus(server.id, 'connecting');
                 const success = await startServer(server.id);
+                
                 if (success) {
                     toast.success(`Started server: ${server.name}`);
                 } else {
                     toast.error(`Failed to start server: ${server.name}`);
                 }
             } catch (error) {
+                updateServerStatus(server.id, 'error', 
+                    `Error: ${error instanceof Error ? error.message : String(error)}`);
                 toast.error(`Error starting server: ${error instanceof Error ? error.message : String(error)}`);
             }
         } else {
-            // Stop the server
             try {
-                await stopServer(server.id);
-                toast.success(`Stopped server: ${server.name}`);
+                const success = await stopServer(server.id);
+                if (success) {
+                    toast.success(`Stopped server: ${server.name}`);
+                } else {
+                    toast.error(`Failed to stop server: ${server.name}`);
+                }
             } catch (error) {
                 toast.error(`Error stopping server: ${error instanceof Error ? error.message : String(error)}`);
             }
         }
     };
 
-    // Add function to restart a server
+    // Update function to restart a server
     const restartServer = async (server: MCPServer, e: React.MouseEvent) => {
         e.stopPropagation();
         
         try {
-            // First stop it if it's running
+            // First stop it
             if (server.status === 'connected' || server.status === 'connecting') {
                 await stopServer(server.id);
             }
             
-            // Then start it again
-            updateServerStatus(server.id, 'connecting');
-            const success = await startServer(server.id);
-            
-            if (success) {
-                toast.success(`Restarted server: ${server.name}`);
-            } else {
-                toast.error(`Failed to restart server: ${server.name}`);
-            }
+            // Then start it again (with delay to ensure proper cleanup)
+            setTimeout(async () => {
+                updateServerStatus(server.id, 'connecting');
+                const success = await startServer(server.id);
+                
+                if (success) {
+                    toast.success(`Restarted server: ${server.name}`);
+                } else {
+                    toast.error(`Failed to restart server: ${server.name}`);
+                }
+            }, 500);
         } catch (error) {
+            updateServerStatus(server.id, 'error', 
+                `Error: ${error instanceof Error ? error.message : String(error)}`);
             toast.error(`Error restarting server: ${error instanceof Error ? error.message : String(error)}`);
         }
     };
 
+    // UI element to display the correct server URL
+    const getServerDisplayUrl = (server: MCPServer): string => {
+        // For stdio servers with active sandbox, show the sandbox URL
+        if (server.type === 'stdio' && server.sandboxUrl && 
+            (server.status === 'connected' || server.status === 'connecting')) {
+            return server.sandboxUrl;
+        }
+        
+        // Otherwise show the configured URL or command
+        return server.type === 'sse' 
+            ? server.url 
+            : `${server.command} ${server.args?.join(' ')}`;
+    };
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-[480px] max-h-[85vh] overflow-hidden flex flex-col">
@@ -573,10 +600,7 @@ export const MCPServerManager = ({
 
                                                     {/* Server Details */}
                                                     <p className="text-xs text-muted-foreground mb-2.5 truncate">
-                                                        {server.type === 'sse'
-                                                            ? server.url
-                                                            : `${server.command} ${server.args?.join(' ')}`
-                                                        }
+                                                        {getServerDisplayUrl(server)}
                                                     </p>
 
                                                     {/* Action Button */}

components/message.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import type { Message as TMessage } from "ai";
-import { AnimatePresence, motion } from "motion/react";
 import { memo, useCallback, useEffect, useState } from "react";
 import equal from "fast-deep-equal";
 import { Markdown } from "./markdown";
@@ -91,35 +90,28 @@ export function ReasoningMessagePart({
         </button>
       )}
 
-      <AnimatePresence initial={false}>
-        {isExpanded && (
-          <motion.div
-            key="reasoning"
-            className={cn(
-              "text-sm text-muted-foreground flex flex-col gap-2",
-              "pl-3.5 ml-0.5 mt-1",
-              "border-l border-amber-200/50 dark:border-amber-700/30"
-            )}
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: "auto", opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.2, ease: "easeInOut" }}
-          >
-            <div className="text-xs text-muted-foreground/70 pl-1 font-medium">
-              The assistant&apos;s thought process:
-            </div>
-            {part.details.map((detail, detailIndex) =>
-              detail.type === "text" ? (
-                <div key={detailIndex} className="px-2 py-1.5 bg-muted/10 rounded-md border border-border/30">
-                  <Markdown>{detail.text}</Markdown>
-                </div>
-              ) : (
-                "<redacted>"
-              ),
-            )}
-          </motion.div>
-        )}
-      </AnimatePresence>
+      {isExpanded && (
+        <div
+          className={cn(
+            "text-sm text-muted-foreground flex flex-col gap-2",
+            "pl-3.5 ml-0.5 mt-1",
+            "border-l border-amber-200/50 dark:border-amber-700/30"
+          )}
+        >
+          <div className="text-xs text-muted-foreground/70 pl-1 font-medium">
+            The assistant&apos;s thought process:
+          </div>
+          {part.details.map((detail, detailIndex) =>
+            detail.type === "text" ? (
+              <div key={detailIndex} className="px-2 py-1.5 bg-muted/10 rounded-md border border-border/30">
+                <Markdown>{detail.text}</Markdown>
+              </div>
+            ) : (
+              "<redacted>"
+            ),
+          )}
+        </div>
+      )}
     </div>
   );
 }
@@ -147,93 +139,88 @@ const PurePreviewMessage = ({
   const shouldShowCopyButton = message.role === "assistant" && (!isLatestMessage || status !== "streaming");
 
   return (
-    <AnimatePresence key={message.id}>
-      <motion.div
+    <div
+      className={cn(
+        "w-full mx-auto px-4 group/message",
+        message.role === "assistant" ? "mb-8" : "mb-6"
+      )}
+      data-role={message.role}
+    >
+      <div
         className={cn(
-          "w-full mx-auto px-4 group/message",
-          message.role === "assistant" ? "mb-8" : "mb-6"
+          "flex gap-4 w-full group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl",
+          "group-data-[role=user]/message:w-fit",
         )}
-        initial={{ y: 5, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        key={`message-${message.id}`}
-        data-role={message.role}
       >
-        <div
-          className={cn(
-            "flex gap-4 w-full group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl",
-            "group-data-[role=user]/message:w-fit",
-          )}
-        >
-          <div className="flex flex-col w-full space-y-3">
-            {message.parts?.map((part, i) => {
-              switch (part.type) {
-                case "text":
-                  return (
-                    <motion.div
-                      initial={{ y: 5, opacity: 0 }}
-                      animate={{ y: 0, opacity: 1 }}
-                      key={`message-${message.id}-part-${i}`}
-                      className="flex flex-row gap-2 items-start w-full"
+        <div className="flex flex-col w-full space-y-3">
+          {message.parts?.map((part, i) => {
+            switch (part.type) {
+              case "text":
+                return (
+                  <div
+                    key={`message-${message.id}-part-${i}`}
+                    className="flex flex-row gap-2 items-start w-full"
+                  >
+                    <div
+                      className={cn("flex flex-col gap-3 w-full", {
+                        "bg-secondary text-secondary-foreground px-4 py-3 rounded-2xl":
+                          message.role === "user",
+                      })}
                     >
-                      <div
-                        className={cn("flex flex-col gap-3 w-full", {
-                          "bg-secondary text-secondary-foreground px-4 py-3 rounded-2xl":
-                            message.role === "user",
-                        })}
-                      >
-                        <Markdown>{part.text}</Markdown>
-                      </div>
-                    </motion.div>
-                  );
-                case "tool-invocation":
-                  const { toolName, state, args } = part.toolInvocation;
-                  const result = 'result' in part.toolInvocation ? part.toolInvocation.result : null;
-                  
-                  return (
-                    <ToolInvocation
-                      key={`message-${message.id}-part-${i}`}
-                      toolName={toolName}
-                      state={state}
-                      args={args}
-                      result={result}
-                      isLatestMessage={isLatestMessage}
-                      status={status}
-                    />
-                  );
-                case "reasoning":
-                  return (
-                    <ReasoningMessagePart
-                      key={`message-${message.id}-${i}`}
-                      // @ts-expect-error part
-                      part={part}
-                      isReasoning={
-                        (message.parts &&
-                          status === "streaming" &&
-                          i === message.parts.length - 1) ??
-                        false
-                      }
-                    />
-                  );
-                default:
-                  return null;
-              }
-            })}
-            {shouldShowCopyButton && (
-              <div className="flex justify-start mt-2">
-                <CopyButton text={getMessageText()} />
-              </div>
-            )}
-          </div>
+                      <Markdown>{part.text}</Markdown>
+                    </div>
+                  </div>
+                );
+              case "tool-invocation":
+                const { toolName, state, args } = part.toolInvocation;
+                const result = 'result' in part.toolInvocation ? part.toolInvocation.result : null;
+                
+                return (
+                  <ToolInvocation
+                    key={`message-${message.id}-part-${i}`}
+                    toolName={toolName}
+                    state={state}
+                    args={args}
+                    result={result}
+                    isLatestMessage={isLatestMessage}
+                    status={status}
+                  />
+                );
+              case "reasoning":
+                return (
+                  <ReasoningMessagePart
+                    key={`message-${message.id}-${i}`}
+                    // @ts-expect-error part
+                    part={part}
+                    isReasoning={
+                      (message.parts &&
+                        status === "streaming" &&
+                        i === message.parts.length - 1) ??
+                      false
+                    }
+                  />
+                );
+              default:
+                return null;
+            }
+          })}
+          {shouldShowCopyButton && (
+            <div className="flex justify-start mt-2">
+              <CopyButton text={getMessageText()} />
+            </div>
+          )}
         </div>
-      </motion.div>
-    </AnimatePresence>
+      </div>
+    </div>
   );
 };
 
 export const Message = memo(PurePreviewMessage, (prevProps, nextProps) => {
   if (prevProps.status !== nextProps.status) return false;
-  if (prevProps.message.annotations !== nextProps.message.annotations)
-    return false;
+  if (prevProps.isLoading !== nextProps.isLoading) return false;
+  if (prevProps.isLatestMessage !== nextProps.isLatestMessage) return false;
+  if (prevProps.message.annotations !== nextProps.message.annotations) return false;
+  if (prevProps.message.id !== nextProps.message.id) return false;
   if (!equal(prevProps.message.parts, nextProps.message.parts)) return false;
   return true;
 });

components/tool-invocation.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { motion, AnimatePresence } from "motion/react";
 import {
   ChevronDownIcon,
   ChevronUpIcon,
@@ -33,17 +32,6 @@ export function ToolInvocation({
 }: ToolInvocationProps) {
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const variants = {
-    collapsed: {
-      height: 0,
-      opacity: 0,
-    },
-    expanded: {
-      height: "auto",
-      opacity: 1,
-    },
-  };
-
   const getStatusIcon = () => {
     if (state === "call") {
       if (isLatestMessage && status !== "ready") {
@@ -115,48 +103,39 @@ export function ToolInvocation({
         </div>
       </div>
 
-      <AnimatePresence initial={false}>
-        {isExpanded && (
-          <motion.div
-            initial="collapsed"
-            animate="expanded"
-            exit="collapsed"
-            variants={variants}
-            transition={{ duration: 0.2 }}
-            className="space-y-2 px-3 pb-3"
-          >
-            {!!args && (
-              <div className="space-y-1.5">
-                <div className="flex items-center gap-1.5 text-xs text-muted-foreground/70 pt-1.5">
-                  <Code className="h-3 w-3" />
-                  <span className="font-medium">Arguments</span>
-                </div>
-                <pre className={cn(
-                  "text-xs font-mono p-2.5 rounded-md overflow-x-auto",
-                  "border border-border/40 bg-muted/10"
-                )}>
-                  {formatContent(args)}
-                </pre>
+      {isExpanded && (
+        <div className="space-y-2 px-3 pb-3">
+          {!!args && (
+            <div className="space-y-1.5">
+              <div className="flex items-center gap-1.5 text-xs text-muted-foreground/70 pt-1.5">
+                <Code className="h-3 w-3" />
+                <span className="font-medium">Arguments</span>
               </div>
-            )}
-            
-            {!!result && (
-              <div className="space-y-1.5">
-                <div className="flex items-center gap-1.5 text-xs text-muted-foreground/70">
-                  <ArrowRight className="h-3 w-3" />
-                  <span className="font-medium">Result</span>
-                </div>
-                <pre className={cn(
-                  "text-xs font-mono p-2.5 rounded-md overflow-x-auto max-h-[300px] overflow-y-auto",
-                  "border border-border/40 bg-muted/10"
-                )}>
-                  {formatContent(result)}
-                </pre>
+              <pre className={cn(
+                "text-xs font-mono p-2.5 rounded-md overflow-x-auto",
+                "border border-border/40 bg-muted/10"
+              )}>
+                {formatContent(args)}
+              </pre>
+            </div>
+          )}
+          
+          {!!result && (
+            <div className="space-y-1.5">
+              <div className="flex items-center gap-1.5 text-xs text-muted-foreground/70">
+                <ArrowRight className="h-3 w-3" />
+                <span className="font-medium">Result</span>
               </div>
-            )}
-          </motion.div>
-        )}
-      </AnimatePresence>
+              <pre className={cn(
+                "text-xs font-mono p-2.5 rounded-md overflow-x-auto max-h-[300px] overflow-y-auto",
+                "border border-border/40 bg-muted/10"
+              )}>
+                {formatContent(result)}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 } 

lib/context/mcp-context.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { createContext, useContext, useEffect, useState, useRef } from "react";
+import React, { createContext, useContext, useRef } from "react";
 import { useLocalStorage } from "@/lib/hooks/use-local-storage";
 import { STORAGE_KEYS } from "@/lib/constants";
 import { startSandbox, stopSandbox } from "@/app/actions";
@@ -25,6 +25,7 @@ export interface MCPServer {
   description?: string;
   status?: ServerStatus;
   errorMessage?: string;
+  sandboxUrl?: string; // Store the sandbox URL directly on the server object
 }
 
 // Type for processed MCP server config for API
@@ -34,11 +35,6 @@ export interface MCPServerApi {
   headers?: KeyValuePair[];
 }
 
-interface SandboxInfo {
-  id: string;
-  url: string;
-}
-
 interface MCPContextType {
   mcpServers: MCPServer[];
   setMcpServers: (servers: MCPServer[]) => void;
@@ -46,50 +42,65 @@ interface MCPContextType {
   setSelectedMcpServers: (serverIds: string[]) => void;
   mcpServersForApi: MCPServerApi[];
   startServer: (serverId: string) => Promise<boolean>;
-  stopServer: (serverId: string) => Promise<void>;
+  stopServer: (serverId: string) => Promise<boolean>;
   updateServerStatus: (serverId: string, status: ServerStatus, errorMessage?: string) => void;
+  getActiveServersForApi: () => MCPServerApi[];
 }
 
 const MCPContext = createContext<MCPContextType | undefined>(undefined);
 
 // Helper function to wait for server readiness
-async function waitForServerReady(url: string, maxAttempts = 15) {
+async function waitForServerReady(url: string, maxAttempts = 20, timeout = 3000) {
+  console.log(`Checking server readiness at ${url}, will try ${maxAttempts} times`);
   for (let i = 0; i < maxAttempts; i++) {
     try {
-      const response = await fetch(url);
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), timeout);
+      
+      const response = await fetch(url, { signal: controller.signal });
+      clearTimeout(timeoutId);
+      
       if (response.status === 200) {
         console.log(`Server ready at ${url} after ${i + 1} attempts`);
         return true;
       }
       console.log(`Server not ready yet (attempt ${i + 1}), status: ${response.status}`);
-    } catch {
-      console.log(`Server connection failed (attempt ${i + 1})`);
+    } catch (error) {
+      console.log(`Server connection failed (attempt ${i + 1}): ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
-    // Wait between attempts
-    await new Promise(resolve => setTimeout(resolve, 6000));
+    
+    // Wait before next attempt with progressive backoff
+    const waitTime = Math.min(1000 * (i + 1), 5000); // Start with 1s, increase each time, max 5s
+    console.log(`Waiting ${waitTime}ms before next attempt`);
+    await new Promise(resolve => setTimeout(resolve, waitTime));
   }
+  console.log(`Server failed to become ready after ${maxAttempts} attempts`);
   return false;
 }
 
-export function MCPProvider(props: { children: React.ReactNode }) {
-  const { children } = props;
+export function MCPProvider({ children }: { children: React.ReactNode }) {
   const [mcpServers, setMcpServers] = useLocalStorage<MCPServer[]>(
     STORAGE_KEYS.MCP_SERVERS, 
     []
   );
+  
   const [selectedMcpServers, setSelectedMcpServers] = useLocalStorage<string[]>(
     STORAGE_KEYS.SELECTED_MCP_SERVERS, 
     []
   );
-  const [mcpServersForApi, setMcpServersForApi] = useState<MCPServerApi[]>([]);
   
-  // Keep a ref to active sandboxes (only their IDs and URLs)
-  const sandboxesRef = useRef<SandboxInfo[]>([]);
+  // Create a ref to track active servers and avoid unnecessary re-renders
+  const activeServersRef = useRef<Record<string, boolean>>({});
 
+  // Helper to get a server by ID
+  const getServerById = (serverId: string): MCPServer | undefined => {
+    return mcpServers.find(server => server.id === serverId);
+  };
+  
   // Update server status
   const updateServerStatus = (serverId: string, status: ServerStatus, errorMessage?: string) => {
-    setMcpServers(current => 
-      current.map(server => 
+    setMcpServers(currentServers => 
+      currentServers.map(server => 
         server.id === serverId 
           ? { ...server, status, errorMessage: errorMessage || undefined } 
           : server
@@ -97,48 +108,79 @@ export function MCPProvider(props: { children: React.ReactNode }) {
     );
   };
   
-  // Start a server (if it's stdio type) using server actions
+  // Update server with sandbox URL
+  const updateServerSandboxUrl = (serverId: string, sandboxUrl: string) => {
+    console.log(`Storing sandbox URL for server ${serverId}: ${sandboxUrl}`);
+    
+    // Update in memory and force save to localStorage
+    setMcpServers(currentServers => {
+      const updatedServers = currentServers.map(server => 
+        server.id === serverId 
+          ? { ...server, sandboxUrl, status: 'connected' as ServerStatus } 
+          : server
+      );
+      
+      // Log the updated servers to verify the changes are there
+      console.log('Updated server with sandbox URL:', 
+        updatedServers.find(s => s.id === serverId));
+      
+      // Return the updated servers to set in state and localStorage
+      return updatedServers;
+    });
+  };
+  
+  // Get active servers formatted for API usage
+  const getActiveServersForApi = (): MCPServerApi[] => {
+    return selectedMcpServers
+      .map(id => getServerById(id))
+      .filter((server): server is MCPServer => !!server && server.status === 'connected')
+      .map(server => ({
+        type: 'sse',
+        url: server.type === 'stdio' && server.sandboxUrl ? server.sandboxUrl : server.url,
+        headers: server.headers
+      }));
+  };
+  
+  // Start a server
   const startServer = async (serverId: string): Promise<boolean> => {
-    const server = mcpServers.find(s => s.id === serverId);
+    const server = getServerById(serverId);
     if (!server) return false;
     
-    // If it's already an SSE server, just update the status
-    if (server.type === 'sse') {
-      updateServerStatus(serverId, 'connecting');
-      
-      try {
+    // Mark server as connecting
+    updateServerStatus(serverId, 'connecting');
+    
+    try {
+      // For SSE servers, just check if the endpoint is available
+      if (server.type === 'sse') {
         const isReady = await waitForServerReady(server.url);
         updateServerStatus(serverId, isReady ? 'connected' : 'error', 
           isReady ? undefined : 'Could not connect to server');
+        
+        // Update active servers ref
+        if (isReady) {
+          activeServersRef.current[serverId] = true;
+        }
+        
         return isReady;
-      } catch (error) {
-        updateServerStatus(serverId, 'error', `Connection error: ${error instanceof Error ? error.message : String(error)}`);
-        return false;
       }
-    }
-    
-    // For stdio type, start a sandbox via the server action
-    if (server.type === 'stdio' && server.command && server.args?.length) {
-      updateServerStatus(serverId, 'connecting');
       
-      try {
-        // Check if we already have a sandbox for this server
-        const existingSandbox = sandboxesRef.current.find(s => s.id === serverId);
-        if (existingSandbox) {
+      // For stdio servers, start a sandbox
+      if (server.type === 'stdio' && server.command && server.args?.length) {
+        // Check if we already have a valid sandbox URL
+        if (server.sandboxUrl) {
           try {
-            // Test if the existing sandbox is still responsive
-            const isReady = await waitForServerReady(existingSandbox.url);
+            const isReady = await waitForServerReady(server.sandboxUrl);
             if (isReady) {
               updateServerStatus(serverId, 'connected');
+              activeServersRef.current[serverId] = true;
               return true;
             }
-            // If not responsive, we'll create a new one below
           } catch {
-            // Sandbox wasn't responsive, continue to create a new one
+            // If sandbox check fails, we'll create a new one
           }
         }
         
-        // Call the server action to create a sandbox
+        // Create a new sandbox
         const { url } = await startSandbox({
           id: serverId,
           command: server.command,
@@ -148,111 +190,72 @@ export function MCPProvider(props: { children: React.ReactNode }) {
         
         // Wait for the server to become ready
         const isReady = await waitForServerReady(url);
-        if (!isReady) {
-          updateServerStatus(serverId, 'error', 'Server failed to start in time');
+        
+        if (isReady) {
+          // Store the sandbox URL and update status - do this first!
+          console.log(`Server ${serverId} started successfully, storing sandbox URL: ${url}`);
+          updateServerSandboxUrl(serverId, url);
+          
+          // Mark as active
+          activeServersRef.current[serverId] = true;
+          return true;
+        } else {
+          // Failed to start
+          updateServerStatus(serverId, 'error', 'Server failed to start');
           
-          // Attempt to stop the sandbox since it's not working correctly
+          // Clean up sandbox
           try {
             await stopSandbox(serverId);
-          } catch (stopError) {
-            console.error('Failed to stop non-responsive sandbox:', stopError);
+          } catch (error) {
+            console.error(`Failed to stop non-responsive sandbox ${serverId}:`, error);
           }
           
           return false;
         }
-        
-        // Store the sandbox reference
-        // Remove any existing sandbox for this server first
-        sandboxesRef.current = sandboxesRef.current.filter(s => s.id !== serverId);
-        sandboxesRef.current.push({ id: serverId, url });
-        
-        // Update the server URL to point to the sandbox SSE URL
-        setMcpServers(current => 
-          current.map(s => 
-            s.id === serverId 
-              ? { ...s, status: 'connected', errorMessage: undefined, url } 
-              : s
-          )
-        );
-        
-        return true;
-      } catch (error) {
-        console.error('Error starting server:', error);
-        updateServerStatus(serverId, 'error', `Startup error: ${error instanceof Error ? error.message : String(error)}`);
-        return false;
-      }
-    }
-    
-    return false;
-  };
-  
-  // Stop a server using the server action
-  const stopServer = async (serverId: string): Promise<void> => {
-    // Find the sandbox for this server
-    const sandboxIndex = sandboxesRef.current.findIndex(s => s.id === serverId);
-    if (sandboxIndex >= 0) {
-      try {
-        // Call server action to stop the sandbox
-        await stopSandbox(serverId);
-        console.log(`Stopped sandbox for server ${serverId}`);
-      } catch (error) {
-        console.error(`Error stopping sandbox for server ${serverId}:`, error);
       }
       
-      // Remove from our tracking
-      sandboxesRef.current.splice(sandboxIndex, 1);
+      // If we get here, something is misconfigured
+      updateServerStatus(serverId, 'error', 'Invalid server configuration');
+      return false;
+    } catch (error) {
+      // Handle any unexpected errors
+      console.error(`Error starting server ${serverId}:`, error);
+      updateServerStatus(serverId, 'error', 
+        `Error: ${error instanceof Error ? error.message : String(error)}`);
+      return false;
     }
-    
-    // Update server status
-    updateServerStatus(serverId, 'disconnected');
   };
-
-  // Auto-start selected servers when they're added to the selection
-  useEffect(() => {
-    const startSelectedServers = async () => {
-      for (const serverId of selectedMcpServers) {
-        const server = mcpServers.find(s => s.id === serverId);
-        if (server && (!server.status || server.status === 'disconnected')) {
-          await startServer(serverId);
-        }
-      }
-    };
-    
-    startSelectedServers();
+  
+  // Stop a server
+  const stopServer = async (serverId: string): Promise<boolean> => {
+    const server = getServerById(serverId);
+    if (!server) return false;
     
-    // Cleanup on unmount
-    return () => {
-      // Stop all running sandboxes
-      sandboxesRef.current.forEach(async ({ id }) => {
+    try {
+      // For stdio servers with sandbox, stop the sandbox
+      if (server.type === 'stdio' && server.sandboxUrl) {
         try {
-          await stopSandbox(id);
+          await stopSandbox(serverId);
+          console.log(`Stopped sandbox for server ${serverId}`);
+          
+          // Mark as not active
+          delete activeServersRef.current[serverId];
         } catch (error) {
-          console.error('Error stopping sandbox during cleanup:', error);
+          console.error(`Error stopping sandbox for server ${serverId}:`, error);
         }
-      });
-      sandboxesRef.current = [];
-    };
-  }, [selectedMcpServers]);
-
-  // Process MCP servers for API consumption whenever server data changes
-  useEffect(() => {
-    if (!selectedMcpServers.length) {
-      setMcpServersForApi([]);
-      return;
+      }
+      
+      // Update server status
+      updateServerStatus(serverId, 'disconnected');
+      return true;
+    } catch (error) {
+      console.error(`Error stopping server ${serverId}:`, error);
+      return false;
     }
-    
-    const processedServers: MCPServerApi[] = selectedMcpServers
-      .map(id => mcpServers.find(server => server.id === id))
-      .filter((server): server is MCPServer => Boolean(server))
-      .map(server => ({
-        // All servers are exposed as SSE type to the API
-        type: 'sse',
-        url: server.url,
-        headers: server.headers
-      }));
-    
-    setMcpServersForApi(processedServers);
-  }, [mcpServers, selectedMcpServers]);
+  };
+  
+  // Calculate mcpServersForApi based on current state
+  const mcpServersForApi = getActiveServersForApi();
 
   return (
     <MCPContext.Provider 
@@ -264,7 +267,8 @@ export function MCPProvider(props: { children: React.ReactNode }) {
         mcpServersForApi,
         startServer,
         stopServer,
-        updateServerStatus
+        updateServerStatus,
+        getActiveServersForApi
       }}
     >
       {children}

lib/mcp-client.ts

@@ -21,24 +21,6 @@ export interface MCPClientManager {
   cleanup: () => Promise<void>;
 }
 
-async function waitForServerReady(url: string, maxAttempts = 5) {
-  for (let i = 0; i < maxAttempts; i++) {
-    try {
-      const response = await fetch(url)
-      if (response.status === 200) {
-        console.log(`Server ready at ${url} after ${i + 1} attempts`)
-        return true
-      }
-      console.log(`Server not ready yet (attempt ${i + 1}), status: ${response.status}`)
-    } catch {
-      console.log(`Server connection failed (attempt ${i + 1})`)
-    }
-    // Wait 6 seconds between attempts
-    await new Promise(resolve => setTimeout(resolve, 6000))
-  }
-  return false
-}
-
 /**
  * Initialize MCP clients for API calls
  * This uses the already running persistent SSE servers

lib/mcp-sandbox.ts

@@ -1,5 +1,5 @@
 // import Sandbox from "@e2b/code-interpreter";
-import { Daytona, Sandbox, SandboxTargetRegion } from "@daytonaio/sdk";
+import { Daytona, Sandbox } from "@daytonaio/sdk";
 
 export const startMcpSandbox = async ({
   cmd,
@@ -9,82 +9,95 @@ export const startMcpSandbox = async ({
   envs?: Record<string, string>
 }) => {
   console.log("Creating sandbox...");
-  const daytona = new Daytona();
-  const sandbox = await daytona.create({
-    resources: {
-      cpu: 2,
-      memory: 4,
-      disk: 5,
-    },
-    public: true,
-    autoStopInterval: 0, // 24 hours
-    timeout: 1000 * 300, // 5 minutes
-    envVars: {
-      ...envs,
-    },
-  });
+  
+  try {
+    const daytona = new Daytona();
+    const sandbox = await daytona.create({
+      resources: {
+        cpu: 2,
+        memory: 4,
+        disk: 5,
+      },
+      public: true,
+      autoStopInterval: 0,
+      envVars: {
+        ...envs,
+      },
+    });
 
-  const host = await sandbox.getPreviewLink(3000);
-  const url = host.url;
-  const token = host.token;
-  console.log("url", url);
-  console.log("token", token);
+    const host = await sandbox.getPreviewLink(3000);
+    const url = host.url;
+    const token = host.token;
+    console.log("url", url);
+    console.log("token", token);
 
-  const sessionId = Math.random().toString(36).substring(2, 30);
-  await sandbox.process.createSession(sessionId);
-  // python -m mcp_server_time --local-timezone=Asia/Kolkata
-  const isPythonCommand = cmd.startsWith('python') || cmd.startsWith('python3');
-  let installResult = null;
+    const sessionId = Math.random().toString(36).substring(2, 30);
+    await sandbox.process.createSession(sessionId);
+    
+    // Handle Python package installation if command is a Python command
+    const isPythonCommand = cmd.startsWith('python') || cmd.startsWith('python3');
+    let installResult = null;
 
-  if (isPythonCommand) {
-    const packageName = cmd.split("-m ")[1]?.split(" ")[0] || "";
-    if (packageName) {
-      console.log(`Installing Python package: ${packageName}`);
-      const installUv = await sandbox.process.executeSessionCommand(sessionId, {
-        // Install python package from the command after -m in the command
-        command: `pip install ${packageName}`,
-        runAsync: true,
-      },
-        1000 * 300 // 5 minutes
-      );
-      console.log("install result", installUv.output);
-      if (installUv.exitCode !== undefined) {
-        console.error("Failed to install package");
+    if (isPythonCommand) {
+      const packageName = cmd.split("-m ")[1]?.split(" ")[0] || "";
+      if (packageName) {
+        console.log(`Installing Python package: ${packageName}`);
+        installResult = await sandbox.process.executeSessionCommand(
+          sessionId,
+          {
+            command: `pip install ${packageName}`,
+            runAsync: true,
+          },
+          1000 * 300 // 5 minutes
+        );
+        
+        console.log("install result", installResult.output);
+        if (installResult.exitCode) {
+          console.error(`Failed to install package ${packageName}. Exit code: ${installResult.exitCode}`);
+        }
       }
-      installResult = installUv;
     }
-  }
 
-  console.log("Starting mcp server...");
-  // generate a session with random id
-  const mcpServer = await sandbox.process.executeSessionCommand(sessionId,
-    {
-      command: `npx -y supergateway --base-url ${url} --header "x-daytona-preview-token: ${token}" --port 3000 --cors --stdio "${cmd}"`,
-      runAsync: true,
-    },
-    1000 * 300 // 5 minutes
-  );
-  console.log("mcp server result", mcpServer.output);
+    console.log("Starting mcp server...");
+    // Run the MCP server using supergateway
+    const mcpServer = await sandbox.process.executeSessionCommand(
+      sessionId,
+      {
+        command: `npx -y supergateway --base-url ${url} --header "x-daytona-preview-token: ${token}" --port 3000 --cors --stdio "${cmd}"`,
+        runAsync: true,
+      },
+      0
+    );
+    
+    console.log("mcp server result", mcpServer.output);
 
-  if (mcpServer.exitCode !== undefined) {
-    console.error("Failed to start mcp server. Exit code:", mcpServer.exitCode);
-  }
+    if (mcpServer.exitCode) {
+      console.error("Failed to start mcp server. Exit code:", mcpServer.exitCode);
+      throw new Error(`MCP server failed to start with exit code ${mcpServer.exitCode}`);
+    }
 
-  const session = await sandbox.process.getSession(sessionId);
-  console.log(`Session ${sessionId}:`);
-  for (const command of session.commands || []) {
-    console.log(`Command: ${command.command}, Exit Code: ${command.exitCode}`);
-  }
+    // Log detailed session information
+    const session = await sandbox.process.getSession(sessionId);
+    console.log(`Session ${sessionId}:`);
+    for (const command of session.commands || []) {
+      console.log(`Command: ${command.command}, Exit Code: ${command.exitCode}`);
+    }
 
-  console.log("MCP server started at:", url + "/sse");
-  return new McpSandbox(sandbox);
+    console.log("MCP server started at:", url + "/sse");
+    return new McpSandbox(sandbox, sessionId);
+  } catch (error) {
+    console.error("Error starting MCP sandbox:", error);
+    throw error;
+  }
 }
 
 class McpSandbox {
   public sandbox: Sandbox;
+  private sessionId?: string;
 
-  constructor(sandbox: Sandbox) {
+  constructor(sandbox: Sandbox, sessionId?: string) {
     this.sandbox = sandbox;
+    this.sessionId = sessionId;
   }
 
   async getUrl(): Promise<string> {
@@ -95,8 +108,26 @@ class McpSandbox {
     return `${host.url}/sse`;
   }
 
+  async getSessionInfo(): Promise<any> {
+    if (!this.sandbox || !this.sessionId) {
+      throw new Error("Sandbox or session not initialized");
+    }
+    
+    const session = await this.sandbox.process.getSession(this.sessionId);
+    return session;
+  }
+
   async stop(): Promise<void> {
-    await this.sandbox.delete();
+    if (!this.sandbox) {
+      throw new Error("Sandbox not initialized");
+    }
+    
+    try {
+      await this.sandbox.delete();
+    } catch (error) {
+      console.error("Error stopping sandbox:", error);
+      throw error;
+    }
   }
 }
 

package.json

@@ -33,6 +33,7 @@
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tooltip": "^1.2.3",
     "@tanstack/react-query": "^5.74.4",
+    "@vercel/analytics": "^1.5.0",
     "ai": "^4.3.15",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

pnpm-lock.yaml

@@ -68,6 +68,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.74.4
         version: 5.74.4([email protected])
+      '@vercel/analytics':
+        specifier: ^1.5.0
+        version: 1.5.0([email protected](@opentelemetry/[email protected])([email protected]([email protected]))([email protected]))([email protected])
       ai:
         specifier: ^4.3.15
         version: 4.3.15([email protected])([email protected])
@@ -1675,6 +1678,32 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@vercel/[email protected]':
+    resolution: {integrity: sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g==}
+    peerDependencies:
+      '@remix-run/react': ^2
+      '@sveltejs/kit': ^1 || ^2
+      next: '>= 13'
+      react: ^18 || ^19 || ^19.0.0-rc
+      svelte: '>= 4'
+      vue: ^3
+      vue-router: ^4
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      '@sveltejs/kit':
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+      vue-router:
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -4891,6 +4920,11 @@ snapshots:
   '@unrs/[email protected]':
     optional: true
 
+  '@vercel/[email protected]([email protected](@opentelemetry/[email protected])([email protected]([email protected]))([email protected]))([email protected])':
+    optionalDependencies:
+      next: 15.3.1(@opentelemetry/[email protected])([email protected]([email protected]))([email protected])
+      react: 19.1.0
+
   [email protected]([email protected]):
     dependencies:
       acorn: 8.14.1