Merge remote-tracking branch 'origin/main' into devin/1733551277-capability-negotiation

Author: jeffreyling

client/src/App.tsx

@@ -62,7 +62,8 @@ const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
 const params = new URLSearchParams(window.location.search);
 const PROXY_PORT = params.get("proxyPort") ?? "3000";
-const REQUEST_TIMEOUT = parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC;
+const REQUEST_TIMEOUT =
+  parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC;
 const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
 
 const App = () => {
@@ -221,6 +222,12 @@ const App = () => {
     rootsRef.current = roots;
   }, [roots]);
 
+  useEffect(() => {
+    if (!window.location.hash) {
+      window.location.hash = "resources";
+    }
+  }, []);
+
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
       ...prev,
@@ -255,10 +262,14 @@ const App = () => {
         response = await mcpClient.request(request, schema, {
           signal: abortController.signal,
         });
+        pushHistory(request, response);
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        pushHistory(request, { error: errorMessage });
+        throw error;
       } finally {
         clearTimeout(timeoutId);
       }
-      pushHistory(request, response);
 
       if (tabKey !== undefined) {
         clearError(tabKey);
@@ -494,12 +505,14 @@ const App = () => {
           {mcpClient ? (
             <Tabs
               defaultValue={
+                window.location.hash.slice(1) ||
                 serverCapabilities?.resources ? "resources" :
                 serverCapabilities?.prompts ? "prompts" :
                 serverCapabilities?.tools ? "tools" :
                 "ping"
               }
               className="w-full p-4"
+              onValueChange={(value) => (window.location.hash = value)}
             >
               <TabsList className="mb-4 p-0">
                 <TabsTrigger value="resources" disabled={!serverCapabilities?.resources}>

client/src/components/ToolsTab.tsx

@@ -100,7 +100,7 @@ const ToolsTab = ({
       return (
         <>
           <h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
-          <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-64">
+          <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
             {JSON.stringify(toolResult.toolResult, null, 2)}
           </pre>
         </>

package-lock.json

@@ -36,11 +36,13 @@
     "@modelcontextprotocol/inspector-client": "0.3.0",
     "@modelcontextprotocol/inspector-server": "0.3.0",
     "concurrently": "^9.0.1",
+    "shell-quote": "^1.8.2",
     "spawn-rx": "^5.1.0",
     "ts-node": "^10.9.2"
   },
   "devDependencies": {
     "@types/node": "^22.7.5",
+    "@types/shell-quote": "^1.7.5",
     "prettier": "3.3.3"
   }
 }

package.json

@@ -3,6 +3,7 @@
 import cors from "cors";
 import EventSource from "eventsource";
 import { parseArgs } from "node:util";
+import { parse as shellParseArgs } from "shell-quote";
 
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import {
@@ -38,7 +39,7 @@ const createTransport = async (query: express.Request["query"]) => {
 
   if (transportType === "stdio") {
     const command = query.command as string;
-    const origArgs = (query.args as string).split(/\s+/);
+    const origArgs = shellParseArgs(query.args as string) as string[];
     const env = query.env ? JSON.parse(query.env as string) : undefined;
 
     const { cmd, args } = findActualExecutable(command, origArgs);