@mcpjam/inspector 0.2.2 → 0.2.4

package/client/dist/assets/{index-C9Kqkwaq.css → index-ebsMqCvj.css}

@@ -1282,12 +1282,18 @@ video {
 .max-h-\[300px\] {
   max-height: 300px;
 }
+.max-h-\[90vh\] {
+  max-height: 90vh;
+}
 .max-h-screen {
   max-height: 100vh;
 }
 .min-h-0 {
   min-height: 0px;
 }
+.min-h-\[200px\] {
+  min-height: 200px;
+}
 .min-h-\[48px\] {
   min-height: 48px;
 }
@@ -1379,6 +1385,9 @@ video {
 .max-w-4xl {
   max-width: 56rem;
 }
+.max-w-6xl {
+  max-width: 72rem;
+}
 .max-w-\[75\%\] {
   max-width: 75%;
 }
@@ -1627,6 +1636,9 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-2xl {
+  border-radius: 1rem;
+}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1686,6 +1698,9 @@ video {
 .border-border\/50 {
   border-color: hsl(var(--border) / 0.5);
 }
+.border-current {
+  border-color: currentColor;
+}
 .border-destructive {
   border-color: hsl(var(--destructive));
 }
@@ -1717,6 +1732,9 @@ video {
 .border-primary {
   border-color: hsl(var(--primary));
 }
+.border-primary\/20 {
+  border-color: hsl(var(--primary) / 0.2);
+}
 .border-red-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
@@ -1806,6 +1824,10 @@ video {
 .bg-green-50\/80 {
   background-color: rgb(240 253 244 / 0.8);
 }
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
+}
 .bg-muted {
   background-color: hsl(var(--muted));
 }
@@ -1897,11 +1919,26 @@ video {
   --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-blue-600 {
+  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-card\/80 {
+  --tw-gradient-from: hsl(var(--card) / 0.8) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-card\/95 {
   --tw-gradient-from: hsl(var(--card) / 0.95) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-gray-700 {
+  --tw-gradient-from: #374151 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-muted\/20 {
   --tw-gradient-from: hsl(var(--muted) / 0.2) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
@@ -1970,12 +2007,21 @@ video {
 .to-background\/60 {
   --tw-gradient-to: hsl(var(--background) / 0.6) var(--tw-gradient-to-position);
 }
+.to-blue-700 {
+  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
+}
+.to-card\/60 {
+  --tw-gradient-to: hsl(var(--card) / 0.6) var(--tw-gradient-to-position);
+}
 .to-card\/95 {
   --tw-gradient-to: hsl(var(--card) / 0.95) var(--tw-gradient-to-position);
 }
 .to-gray-100 {
   --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);
 }
+.to-gray-900 {
+  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
+}
 .to-muted\/20 {
   --tw-gradient-to: hsl(var(--muted) / 0.2) var(--tw-gradient-to-position);
 }
@@ -2106,6 +2152,9 @@ video {
 .pb-1\.5 {
   padding-bottom: 0.375rem;
 }
+.pb-4 {
+  padding-bottom: 1rem;
+}
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2620,6 +2669,11 @@ h1 {
   color: rgb(148 163 184 / var(--tw-text-opacity, 1));
 }
 
+.hover\:-translate-y-0\.5:hover {
+  --tw-translate-y: -0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:border-\[\#646cff\]:hover {
   --tw-border-opacity: 1;
   border-color: rgb(100 108 255 / var(--tw-border-opacity, 1));
@@ -2682,6 +2736,10 @@ h1 {
   background-color: hsl(var(--muted));
 }
 
+.hover\:bg-muted-foreground\/10:hover {
+  background-color: hsl(var(--muted-foreground) / 0.1);
+}
+
 .hover\:bg-muted\/30:hover {
   background-color: hsl(var(--muted) / 0.3);
 }
@@ -2724,6 +2782,11 @@ h1 {
   background-color: rgb(241 245 249 / 0.5);
 }
 
+.hover\:bg-slate-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-slate-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
@@ -2738,6 +2801,12 @@ h1 {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.hover\:from-blue-700:hover {
+  --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .hover\:from-muted\/30:hover {
   --tw-gradient-from: hsl(var(--muted) / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
@@ -2755,6 +2824,10 @@ h1 {
   --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--muted) / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
+.hover\:to-blue-800:hover {
+  --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
+}
+
 .hover\:to-muted\/30:hover {
   --tw-gradient-to: hsl(var(--muted) / 0.3) var(--tw-gradient-to-position);
 }
@@ -3533,6 +3606,16 @@ h1 {
   background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:hover\:bg-slate-600:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
+}
+
+.dark\:hover\:bg-slate-700:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
+}
+
 .dark\:hover\:bg-slate-700\/30:hover:is(.dark *) {
   background-color: rgb(51 65 85 / 0.3);
 }

package/client/dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/mcp_jam.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MCPJam Inspector</title>
-    <script type="module" crossorigin src="/assets/index-BwJsKGKK.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-C9Kqkwaq.css">
+    <script type="module" crossorigin src="/assets/index-CLxTHffA.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-ebsMqCvj.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpjam/inspector",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "MCPJam inspector",
   "license": "Apache-2.0",
   "author": "MCPJam (https://mcpjam.com)",

package/server/build/index.js

@@ -38,7 +38,6 @@ app.use((req, res, next) => {
 const webAppTransports = new Map(); // Transports by sessionId
 const createTransport = async (req) => {
     const query = req.query;
-    console.log("Query parameters:", query);
     const transportType = query.transportType;
     if (transportType === "stdio") {
         const command = query.command;
@@ -46,7 +45,7 @@ const createTransport = async (req) => {
         const queryEnv = query.env ? JSON.parse(query.env) : {};
         const env = { ...process.env, ...defaultEnvironment, ...queryEnv };
         const { cmd, args } = findActualExecutable(command, origArgs);
-        console.log(`Stdio transport: command=${cmd}, args=${args}`);
+        console.log(`🚀 Stdio transport: command=${cmd}, args=${args}`);
         const transport = new StdioClientTransport({
             command: cmd,
             args,
@@ -54,7 +53,6 @@ const createTransport = async (req) => {
             stderr: "pipe",
         });
         await transport.start();
-        console.log("Spawned stdio transport");
         return transport;
     }
     else if (transportType === "sse") {
@@ -69,7 +67,6 @@ const createTransport = async (req) => {
             const value = req.headers[key];
             headers[key] = Array.isArray(value) ? value[value.length - 1] : value;
         }
-        console.log(`SSE transport: url=${url}, headers=${Object.keys(headers)}`);
         const transport = new SSEClientTransport(new URL(url), {
             eventSourceInit: {
                 fetch: (url, init) => fetch(url, { ...init, headers }),
@@ -79,7 +76,6 @@ const createTransport = async (req) => {
             },
         });
         await transport.start();
-        console.log("Connected to SSE transport");
         return transport;
     }
     else if (transportType === "streamable-http") {
@@ -99,18 +95,17 @@ const createTransport = async (req) => {
             },
         });
         await transport.start();
-        console.log("Connected to Streamable HTTP transport");
         return transport;
     }
     else {
-        console.error(`Invalid transport type: ${transportType}`);
+        console.error(`❌ Invalid transport type: ${transportType}`);
         throw new Error("Invalid transport type specified");
     }
 };
 let backingServerTransport;
 app.get("/mcp", async (req, res) => {
     const sessionId = req.headers["mcp-session-id"];
-    console.log(`Received GET message for sessionId ${sessionId}`);
+    console.log(`📥 Received GET message for sessionId ${sessionId}`);
     try {
         const transport = webAppTransports.get(sessionId);
         if (!transport) {
@@ -122,34 +117,34 @@ app.get("/mcp", async (req, res) => {
         }
     }
     catch (error) {
-        console.error("Error in /mcp route:", error);
+        console.error("❌ Error in /mcp route:", error);
         res.status(500).json(error);
     }
 });
 app.post("/mcp", async (req, res) => {
     const sessionId = req.headers["mcp-session-id"];
-    console.log(`Received POST message for sessionId ${sessionId}`);
+    console.log(`📥 Received POST message for sessionId ${sessionId}`);
     if (!sessionId) {
         try {
-            console.log("New streamable-http connection");
+            console.log("🔄 New streamable-http connection");
             try {
                 await backingServerTransport?.close();
                 backingServerTransport = await createTransport(req);
             }
             catch (error) {
                 if (error instanceof SseError && error.code === 401) {
-                    console.error("Received 401 Unauthorized from MCP server:", error.message);
+                    console.error("🔒 Received 401 Unauthorized from MCP server:", error.message);
                     res.status(401).json(error);
                     return;
                 }
                 throw error;
             }
-            console.log("Connected MCP client to backing server transport");
+            console.log("✨ Connected MCP client to backing server transport");
             const webAppTransport = new StreamableHTTPServerTransport({
                 sessionIdGenerator: randomUUID,
                 onsessioninitialized: (sessionId) => {
                     webAppTransports.set(sessionId, webAppTransport);
-                    console.log("Created streamable web app transport " + sessionId);
+                    console.log("✨ Created streamable web app transport " + sessionId);
                 },
             });
             await webAppTransport.start();
@@ -160,7 +155,7 @@ app.post("/mcp", async (req, res) => {
             await webAppTransport.handleRequest(req, res, req.body);
         }
         catch (error) {
-            console.error("Error in /mcp POST route:", error);
+            console.error("❌ Error in /mcp POST route:", error);
             res.status(500).json(error);
         }
     }
@@ -175,30 +170,28 @@ app.post("/mcp", async (req, res) => {
             }
         }
         catch (error) {
-            console.error("Error in /mcp route:", error);
+            console.error("❌ Error in /mcp route:", error);
             res.status(500).json(error);
         }
     }
 });
 app.get("/stdio", async (req, res) => {
     try {
-        console.log("New connection");
+        console.log("🔄 New connection");
         try {
             await backingServerTransport?.close();
             backingServerTransport = await createTransport(req);
         }
         catch (error) {
             if (error instanceof SseError && error.code === 401) {
-                console.error("Received 401 Unauthorized from MCP server:", error.message);
+                console.error("🔒 Received 401 Unauthorized from MCP server:", error.message);
                 res.status(401).json(error);
                 return;
             }
             throw error;
         }
-        console.log("Connected MCP client to backing server transport");
         const webAppTransport = new SSEServerTransport("/message", res);
         webAppTransports.set(webAppTransport.sessionId, webAppTransport);
-        console.log("Created web app transport");
         await webAppTransport.start();
         backingServerTransport.stderr.on("data", (chunk) => {
             webAppTransport.send({
@@ -213,48 +206,43 @@ app.get("/stdio", async (req, res) => {
             transportToClient: webAppTransport,
             transportToServer: backingServerTransport,
         });
-        console.log("Set up MCP proxy");
     }
     catch (error) {
-        console.error("Error in /stdio route:", error);
+        console.error("❌ Error in /stdio route:", error);
         res.status(500).json(error);
     }
 });
 app.get("/sse", async (req, res) => {
     try {
-        console.log("New SSE connection. NOTE: The sse transport is deprecated and has been replaced by streamable-http");
         try {
             await backingServerTransport?.close();
             backingServerTransport = await createTransport(req);
         }
         catch (error) {
             if (error instanceof SseError && error.code === 401) {
-                console.error("Received 401 Unauthorized from MCP server:", error.message);
+                console.error("🔒 Received 401 Unauthorized from MCP server:", error.message);
                 res.status(401).json(error);
                 return;
             }
             throw error;
         }
-        console.log("Connected MCP client to backing server transport");
         const webAppTransport = new SSEServerTransport("/message", res);
         webAppTransports.set(webAppTransport.sessionId, webAppTransport);
-        console.log("Created web app transport");
         await webAppTransport.start();
         mcpProxy({
             transportToClient: webAppTransport,
             transportToServer: backingServerTransport,
         });
-        console.log("Set up MCP proxy");
     }
     catch (error) {
-        console.error("Error in /sse route:", error);
+        console.error("❌ Error in /sse route:", error);
         res.status(500).json(error);
     }
 });
 app.post("/message", async (req, res) => {
     try {
         const sessionId = req.query.sessionId;
-        console.log(`Received message for sessionId ${sessionId}`);
+        console.log(`📥 Received message for sessionId ${sessionId}`);
         const transport = webAppTransports.get(sessionId);
         if (!transport) {
             res.status(404).end("Session not found");
@@ -263,7 +251,7 @@ app.post("/message", async (req, res) => {
         await transport.handlePostMessage(req, res);
     }
     catch (error) {
-        console.error("Error in /message route:", error);
+        console.error("❌ Error in /message route:", error);
         res.status(500).json(error);
     }
 });
@@ -281,7 +269,7 @@ app.get("/config", (req, res) => {
         });
     }
     catch (error) {
-        console.error("Error in /config route:", error);
+        console.error("❌ Error in /config route:", error);
         res.status(500).json(error);
     }
 });
@@ -295,10 +283,12 @@ const findAvailablePort = async (startPort) => {
                 resolve(port);
             });
         });
-        server.on('error', (err) => {
-            if (err.code === 'EADDRINUSE') {
+        server.on("error", (err) => {
+            if (err.code === "EADDRINUSE") {
                 // Port is in use, try the next one
-                findAvailablePort(startPort + 1).then(resolve).catch(reject);
+                findAvailablePort(startPort + 1)
+                    .then(resolve)
+                    .catch(reject);
             }
             else {
                 reject(err);
@@ -316,7 +306,7 @@ const startServer = async () => {
             if (availablePort !== Number(PORT)) {
                 console.log(`⚠️  Port ${PORT} was in use, using available port ${availablePort} instead`);
             }
-            console.log(`⚙️ Proxy server listening on port ${availablePort}`);
+            console.log(`\x1b[32m%s\x1b[0m`, `⚙️ Proxy server listening on port ${availablePort}`);
         });
         server.on("error", (err) => {
             console.error(`❌ Server error: ${err.message}`);