@mcpjam/inspector 0.3.4 → 0.3.5

package/cli/build/cli.js

@@ -73,15 +73,13 @@ async function runWebClient(args) {
     if (serverOk) {
         try {
             console.log("\x1b[32m%s\x1b[0m", "✅ Server initialized successfully"); // Green color
-            console.log("\x1b[36m%s\x1b[0m", `🌐 Opening browser at http://127.0.0.1:${CLIENT_PORT}`);
-            if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
-                // Note: We need to import 'open' if we want to auto-open browser
-                // import open from "open";
-                // open(`http://127.0.0.1:${CLIENT_PORT}`);
-            }
             console.log("\x1b[33m%s\x1b[0m", "🖥️  Starting client interface...");
             await spawnPromise("node", [inspectorClientPath], {
-                env: { ...process.env, PORT: CLIENT_PORT },
+                env: {
+                    ...process.env,
+                    PORT: CLIENT_PORT,
+                    MCP_AUTO_OPEN_ENABLED: process.env.MCP_AUTO_OPEN_ENABLED ?? "true",
+                },
                 signal: abort.signal,
                 echoOutput: true,
             });

package/client/bin/client.js

@@ -4,6 +4,7 @@ import { join, dirname } from "path";
 import { fileURLToPath } from "url";
 import handler from "serve-handler";
 import http from "http";
+import open from "open";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const distPath = join(__dirname, "../dist");
@@ -39,19 +40,32 @@ const server = http.createServer((request, response) => {
   return handler(request, response, handlerOptions);
 });
 
-const port = process.env.PORT || 6274;
+const defaultPort = process.env.PORT || 6274;
+let port = Number(defaultPort);
+
+// Try ports sequentially until one works
+server.on("error", (err) => {
+  if (err.code === "EADDRINUSE") {
+    console.log(`⚠️  Port ${port} was in use, trying ${port + 1}`);
+    port++;
+    server.listen(port);
+  } else {
+    console.error(`❌  MCPJam Inspector failed to start: ${err.message}`);
+  }
+});
+
 server.on("listening", () => {
+  const url = `http://127.0.0.1:${port}`;
   console.log(
-    `🔍 MCPJam Inspector is up and running at http://127.0.0.1:${port} 🚀`,
+    `🔍 MCPJam Inspector is up and running at \u001B]8;;${url}\u0007${url}\u001B]8;;\u0007 🚀`,
   );
-});
-server.on("error", (err) => {
-  if (err.message.includes(`EADDRINUSE`)) {
-    console.error(
-      `❌  MCPJam Inspector PORT IS IN USE at http://127.0.0.1:${port} ❌ `,
+
+  if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
+    console.log(
+      `🌐 Opening browser at \u001B]8;;${url}\u0007${url}\u001B]8;;\u0007`,
     );
-  } else {
-    throw err;
+    open(url);
   }
 });
+
 server.listen(port);

package/client/bin/start.js

@@ -1,6 +1,5 @@
 #!/usr/bin/env node
 
-import open from "open";
 import { resolve, dirname } from "path";
 import { spawnPromise } from "spawn-rx";
 import { fileURLToPath } from "url";
@@ -87,6 +86,7 @@ async function main() {
     abort.abort();
     console.log("\n\x1b[31m%s\x1b[0m", "⚠️  Shutting down MCP Inspector..."); // Red color
   });
+
   let server, serverOk;
   try {
     server = spawnPromise(
@@ -116,19 +116,14 @@ async function main() {
   if (serverOk) {
     try {
       console.log("\x1b[32m%s\x1b[0m", "✅ Server initialized successfully"); // Green color
-      console.log(
-        "\x1b[36m%s\x1b[0m",
-        `🌐 Opening browser at http://127.0.0.1:${CLIENT_PORT}`,
-      );
-
-      if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
-        open(`http://127.0.0.1:${CLIENT_PORT}`);
-      }
-
       console.log("\x1b[33m%s\x1b[0m", "🖥️  Starting client interface...");
 
       await spawnPromise("node", [inspectorClientPath], {
-        env: { ...process.env, PORT: CLIENT_PORT },
+        env: {
+          ...process.env,
+          PORT: CLIENT_PORT,
+          MCP_AUTO_OPEN_ENABLED: process.env.MCP_AUTO_OPEN_ENABLED ?? "true",
+        },
         signal: abort.signal,
         echoOutput: true,
       });

package/client/dist/assets/{OAuthCallback-59IQqASq.js → OAuthCallback-CaYMoLGO.js}

@@ -1,4 +1,4 @@
-import { u as useToast, r as reactExports, j as jsxRuntimeExports, p as parseOAuthCallbackParams, g as generateOAuthErrorDescription, S as SESSION_KEYS, I as InspectorOAuthClientProvider, a as auth } from "./index-B_8Xm9gw.js";
+import { u as useToast, r as reactExports, j as jsxRuntimeExports, p as parseOAuthCallbackParams, g as generateOAuthErrorDescription, S as SESSION_KEYS, I as InspectorOAuthClientProvider, a as auth } from "./index-DQYTYcqe.js";
 const OAuthCallback = ({ onConnect }) => {
   const { toast } = useToast();
   const hasProcessedRef = reactExports.useRef(false);

package/client/dist/assets/{OAuthDebugCallback-Bm010sVQ.js → OAuthDebugCallback-CBFeYzo9.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, S as SESSION_KEYS, p as parseOAuthCallbackParams, j as jsxRuntimeExports, g as generateOAuthErrorDescription } from "./index-B_8Xm9gw.js";
+import { r as reactExports, S as SESSION_KEYS, p as parseOAuthCallbackParams, j as jsxRuntimeExports, g as generateOAuthErrorDescription } from "./index-DQYTYcqe.js";
 const OAuthDebugCallback = ({ onConnect }) => {
   reactExports.useEffect(() => {
     let isProcessed = false;

package/client/dist/assets/{index-B_8Xm9gw.js → index-DQYTYcqe.js}

@@ -27125,17 +27125,6 @@ const Hash = createLucideIcon("Hash", [
   ["line", { x1: "10", x2: "8", y1: "3", y2: "21", key: "1ggp8o" }],
   ["line", { x1: "16", x2: "14", y1: "3", y2: "21", key: "weycgp" }]
 ]);
-/**
- * @license lucide-react v0.447.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const History = createLucideIcon("History", [
-  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
-  ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
-  ["path", { d: "M12 7v5l4 2", key: "1fdv2h" }]
-]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -28099,12 +28088,8 @@ const ActivityHeader = ({
   ] })
 ] });
 const CompactHeader = ({
-  requestHistory,
-  onClearHistory
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx(RequestCountBadge, { count: requestHistory.length }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx(ClearHistoryButton, { onClick: onClearHistory })
-] });
+  requestHistory
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RequestCountBadge, { count: requestHistory.length }) });
 const EmptyState$1 = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
   /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-12 h-12 text-muted-foreground/40 mb-4" }),
   /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground text-lg font-medium mb-2", children: "No activity yet" }),
@@ -28141,13 +28126,7 @@ const ActivityTab = ({
           }
         ),
         requestHistory.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState$1, {}) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          !showHeader && requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CompactHeader,
-            {
-              requestHistory,
-              onClearHistory
-            }
-          ),
+          !showHeader && requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(CompactHeader, { requestHistory }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(RequestHistoryList, { requestHistory })
         ] })
       ]
@@ -29174,9 +29153,29 @@ const ResultsTab = ({
     ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-br from-background/80 to-background/60 backdrop-blur-sm p-4 rounded-xl border border-border/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToolResult, { toolResult }) })
   ] });
 };
+function CopyIcon({ value }) {
+  const [copied, setCopied] = reactExports.useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+  };
+  reactExports.useEffect(() => {
+    let timeoutId;
+    if (copied) {
+      timeoutId = setTimeout(() => {
+        setCopied(false);
+      }, 500);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [copied]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "icon", variant: "ghost", className: "size-4", onClick: handleCopy, children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, {}) });
+}
 const ClientLogsTab = ({
   clientLogs,
-  onClearLogs,
   showHeader = true
 }) => {
   const reversedClientLogs = [...clientLogs].reverse();
@@ -29240,7 +29239,7 @@ const ClientLogsTab = ({
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 mt-0.5 ${config.iconColor}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconComponent, { className: "w-4 h-4" }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2 mb-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mb-1 space-x-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "span",
                 {
@@ -29248,36 +29247,26 @@ const ClientLogsTab = ({
                   children: config.label
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground font-mono", children: formatTimestamp(log.timestamp) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs text-muted-foreground", children: formatTimestamp(log.timestamp) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-sm ${config.textColor} font-mono break-words`, children: log.message })
-          ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 mt-0.5 ${config.iconColor}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { value: log.message }) })
         ]
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col", children: [
-    !showHeader && clientLogs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-muted-foreground bg-muted/50 px-3 py-1 rounded-full", children: [
-        clientLogs.length,
-        " log",
-        clientLogs.length !== 1 ? "s" : ""
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          onClick: onClearLogs,
-          className: "p-2 rounded-lg hover:bg-destructive/10 hover:text-destructive transition-all duration-200 group",
-          title: "Clear all activity",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4 text-muted-foreground group-hover:text-destructive" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: clientLogs.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center p-8", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Bug, { className: "w-12 h-12 text-muted-foreground/50 mb-4" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium text-muted-foreground mb-2", children: "No logs yet" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground/70 max-w-sm", children: "Client logs will appear here when you perform operations. Logs include info, warnings, errors, and debug messages." })
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-y-auto p-4 space-y-2", children: reversedClientLogs.map((log, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(LogEntry, { log }, `${log.timestamp}-${index2}`)) }) })
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
+    !showHeader && clientLogs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "px-3 py-1 text-sm rounded-full text-muted-foreground bg-muted/50", children: [
+      clientLogs.length,
+      " log",
+      clientLogs.length !== 1 ? "s" : ""
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: clientLogs.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center h-full p-8 text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Bug, { className: "w-12 h-12 mb-4 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "mb-2 text-lg font-medium text-muted-foreground", children: "No logs yet" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-sm text-sm text-muted-foreground/70", children: "Client logs will appear here when you perform operations. Logs include info, warnings, errors, and debug messages." })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full p-4 space-y-2 overflow-y-auto", children: reversedClientLogs.map((log, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(LogEntry, { log }, `${log.timestamp}-${index2}`)) }) })
   ] });
 };
 const TabbedHistoryPanel = ({
@@ -29286,14 +29275,14 @@ const TabbedHistoryPanel = ({
   clientLogs,
   onClearHistory,
   onClearLogs,
-  onToggleCollapse
+  onToggleCollapse,
+  activeTab,
+  setActiveTab
 }) => {
-  const [activeTab, setActiveTab] = reactExports.useState("activity");
   const [isToolResultError, setIsToolResultError] = reactExports.useState(false);
   reactExports.useEffect(() => {
     if (toolResult) {
       setIsToolResultError(toolResult.isError === true);
-      setActiveTab("results");
     }
   }, [toolResult]);
   reactExports.useEffect(() => {
@@ -29306,7 +29295,7 @@ const TabbedHistoryPanel = ({
         setActiveTab("logs");
       }
     }
-  }, [clientLogs]);
+  }, [clientLogs, setActiveTab]);
   const renderActivityTabButton = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
@@ -29375,18 +29364,27 @@ const TabbedHistoryPanel = ({
       case "results":
         return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-y-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResultsTab, { toolResult, showHeader: false }) });
       case "logs":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-y-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ClientLogsTab,
-          {
-            clientLogs,
-            onClearLogs,
-            showHeader: false
-          }
-        ) });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-y-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogsTab, { clientLogs, showHeader: false }) });
       default:
         return null;
     }
   };
+  const ClearHistoryButton2 = ({
+    onClick,
+    count: count2
+  }) => {
+    if (count2 > 0) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick,
+          className: "p-2 rounded-lg hover:bg-destructive/10 hover:text-destructive transition-all duration-200 group",
+          title: "Clear all activity",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-5 h-5 text-muted-foreground group-hover:text-destructive" })
+        }
+      );
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-transparent flex flex-col h-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between border-b border-border/20 px-6 py-3", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-1", children: [
@@ -29394,18 +29392,38 @@ const TabbedHistoryPanel = ({
         renderResultsTabButton(),
         renderLogsTabButton()
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          onClick: onToggleCollapse,
-          className: "p-2 rounded-lg hover:bg-accent/50 transition-all duration-200",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-5 h-5 text-muted-foreground hover:text-foreground" })
-        }
-      )
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { children: activeTab == "activity" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ClearHistoryButton2,
+          {
+            onClick: onClearHistory,
+            count: requestHistory.length
+          }
+        ) : activeTab == "logs" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ClearHistoryButton2,
+          {
+            onClick: onClearLogs,
+            count: clientLogs.length
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: onToggleCollapse,
+            className: "p-2 rounded-lg hover:bg-accent/50 transition-all duration-200",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-5 h-5 text-muted-foreground hover:text-foreground" })
+          }
+        )
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: renderTabContent() })
   ] });
 };
+const TAB_CONFIG = [
+  { key: "activity", label: "History" },
+  { key: "results", label: "Results" },
+  { key: "logs", label: "Logs" }
+];
 const HistoryAndNotifications = ({
   requestHistory,
   toolResult,
@@ -29413,109 +29431,120 @@ const HistoryAndNotifications = ({
   onClearHistory,
   onClearLogs
 }) => {
-  const [isHistoryCollapsed, setIsHistoryCollapsed] = reactExports.useState(true);
-  const {
-    height: historyPaneHeight,
-    isDragging,
-    handleDragStart,
-    resetHeight,
-    setCustomHeight
-  } = useDraggablePane(500, "historyPaneHeight");
+  const [isCollapsed, setIsCollapsed] = reactExports.useState(true);
+  const [activeTab, setActiveTab] = reactExports.useState(null);
+  const { height, isDragging, handleDragStart, resetHeight, setCustomHeight } = useDraggablePane(500, "historyPaneHeight");
   const toggleCollapse = reactExports.useCallback(() => {
-    setIsHistoryCollapsed(!isHistoryCollapsed);
-  }, [isHistoryCollapsed]);
+    setIsCollapsed((c) => {
+      const next = !c;
+      if (next) {
+        setActiveTab(null);
+      }
+      return next;
+    });
+  }, []);
   const handleDoubleClick = reactExports.useCallback(() => {
-    if (!isHistoryCollapsed) {
-      resetHeight();
-    }
-  }, [isHistoryCollapsed, resetHeight]);
+    if (!isCollapsed) resetHeight();
+  }, [isCollapsed, resetHeight]);
   reactExports.useEffect(() => {
-    const handleKeyDown = (e) => {
-      var _a2, _b, _c, _d;
-      if (isHistoryCollapsed || ((_b = (_a2 = e.target) == null ? void 0 : _a2.tagName) == null ? void 0 : _b.toLowerCase()) === "input" || ((_d = (_c = e.target) == null ? void 0 : _c.tagName) == null ? void 0 : _d.toLowerCase()) === "textarea") {
-        return;
-      }
+    const onKey = (e) => {
+      var _a2;
+      if (isCollapsed) return;
+      const tag = (_a2 = e.target) == null ? void 0 : _a2.tagName.toLowerCase();
+      if (tag === "input" || tag === "textarea") return;
       if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
         e.preventDefault();
-        const increment = e.shiftKey ? 50 : 25;
-        const newHeight = e.key === "ArrowUp" ? historyPaneHeight + increment : historyPaneHeight - increment;
-        setCustomHeight(newHeight);
+        const inc = e.shiftKey ? 50 : 25;
+        const newH = e.key === "ArrowUp" ? height + inc : height - inc;
+        setCustomHeight(newH);
       }
       if (e.altKey && e.key === "r") {
         e.preventDefault();
         resetHeight();
       }
     };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isHistoryCollapsed, historyPaneHeight, setCustomHeight, resetHeight]);
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [isCollapsed, height, setCustomHeight, resetHeight]);
   reactExports.useEffect(() => {
     if (toolResult) {
-      setIsHistoryCollapsed(false);
+      setActiveTab("results");
+      setIsCollapsed(false);
     }
   }, [toolResult]);
   reactExports.useEffect(() => {
-    if (clientLogs.length > 0) {
-      const isLastError = clientLogs[clientLogs.length - 1].level === "error";
-      if (isLastError) {
-        setIsHistoryCollapsed(false);
-      }
+    if (clientLogs.length && clientLogs[clientLogs.length - 1].level === "error") {
+      setActiveTab("logs");
+      setIsCollapsed(false);
     }
   }, [clientLogs]);
+  const counts = {
+    activity: requestHistory.length,
+    results: toolResult ? 1 : 0,
+    logs: clientLogs.length
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: `relative bg-gradient-to-r from-card/95 via-card to-card/95 backdrop-blur-md border-t border-border/30 transition-all duration-500 ease-out ${isHistoryCollapsed ? "shadow-lg shadow-black/5" : "shadow-2xl shadow-black/10"}`,
-      style: {
-        height: `${isHistoryCollapsed ? 60 : historyPaneHeight}px`
-      },
+      className: `relative bg-card backdrop-blur-md border-t border-border/30 transition-shadow duration-300 ${isCollapsed ? "shadow-md" : "shadow-xl"}`,
+      style: { height: isCollapsed ? 40 : height },
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: `absolute w-full h-3 -top-1.5 cursor-row-resize group flex items-center justify-center ${isDragging ? "bg-primary/20" : "hover:bg-border/20"} transition-all duration-200`,
+            className: `absolute w-full h-3 -top-1.5 cursor-row-resize flex items-center justify-center ${isDragging ? "bg-primary/20" : "hover:bg-border/20"} transition-all duration-200`,
             onMouseDown: handleDragStart,
             onDoubleClick: handleDoubleClick,
-            title: "Drag to resize • Double-click to reset • Alt+↑/↓ to adjust • Alt+R to reset",
+            title: "Drag to resize • Double‑click to reset • Alt+↑↓ to adjust • Alt+R to reset",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
+              GripHorizontal,
               {
-                className: `flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ${isDragging ? "opacity-100" : ""}`,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(GripHorizontal, { className: "w-4 h-4 text-muted-foreground" })
+                className: `w-4 h-4 text-muted-foreground transition-opacity duration-200 ${isDragging ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`
               }
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: `absolute w-full h-0.5 -top-0.5 transition-all duration-200 ${isDragging ? "bg-primary" : "bg-border/50"}`
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-hidden", children: !isHistoryCollapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          TabbedHistoryPanel,
-          {
-            requestHistory,
-            toolResult,
-            clientLogs,
-            onClearHistory,
-            onClearLogs,
-            onToggleCollapse: toggleCollapse
-          }
-        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: "h-full flex items-center justify-center bg-gradient-to-r from-muted/20 via-muted/30 to-muted/20 cursor-pointer hover:bg-gradient-to-r hover:from-muted/30 hover:via-muted/40 hover:to-muted/30 transition-all duration-200",
-            onClick: toggleCollapse,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-4 text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(History, { className: "w-5 h-5" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "History & Results" }),
-              requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 py-1 text-xs bg-primary/10 text-primary rounded-full", children: requestHistory.length }),
-              clientLogs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 py-1 text-xs bg-blue-500/10 text-blue-500 rounded-full", children: clientLogs.length }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4 rotate-180" })
-            ] })
-          }
-        ) })
+        isCollapsed ? (
+          // Collapsed: tab bar
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex items-center", children: [
+            TAB_CONFIG.map(({ key, label }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                onClick: () => {
+                  setActiveTab(key);
+                  setIsCollapsed(false);
+                },
+                className: `flex items-center h-full px-4 text-sm font-medium transition-colors duration-200 ${activeTab === key ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+                children: [
+                  label,
+                  counts[key] > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-1 px-1 rounded bg-muted/30 text-xs", children: counts[key] })
+                ]
+              },
+              key
+            )),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-auto pr-3 cursor-pointer", onClick: toggleCollapse, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ChevronDown,
+              {
+                className: `w-5 h-5 transform transition-transform duration-200 ${isCollapsed ? "rotate-180" : "rotate-0"}`
+              }
+            ) })
+          ] })
+        ) : (
+          // Expanded: full panel
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TabbedHistoryPanel,
+            {
+              requestHistory,
+              toolResult,
+              clientLogs,
+              onClearHistory,
+              onClearLogs,
+              onToggleCollapse: toggleCollapse,
+              activeTab,
+              setActiveTab
+            }
+          )
+        )
       ]
     }
   );
@@ -33971,8 +34000,8 @@ const SelectSeparator = reactExports.forwardRef(({ className, ...props }, ref2)
 SelectSeparator.displayName = Separator$1.displayName;
 const useTheme = () => {
   const [theme, setTheme] = reactExports.useState(() => {
-    const savedTheme = localStorage.getItem("theme");
-    return savedTheme || "system";
+    const savedTheme2 = localStorage.getItem("theme");
+    return savedTheme2 || "system";
   });
   reactExports.useEffect(() => {
     const darkModeMediaQuery = window.matchMedia(
@@ -33999,7 +34028,10 @@ const useTheme = () => {
   const setThemeWithSideEffect = reactExports.useCallback((newTheme) => {
     setTheme(newTheme);
     localStorage.setItem("theme", newTheme);
-    if (newTheme !== "system") {
+    if (newTheme === "system") {
+      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      document.documentElement.classList.toggle("dark", isDark);
+    } else {
       document.documentElement.classList.toggle("dark", newTheme === "dark");
     }
   }, []);
@@ -34008,7 +34040,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version$1 = "0.3.4";
+const version$1 = "0.3.5";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -36590,10 +36622,11 @@ const ClientFormSection = ({
   const [sseUrlString, setSseUrlString] = reactExports.useState("");
   const [multipleClients, setMultipleClients] = reactExports.useState([]);
   const [isMultipleMode, setIsMultipleMode] = reactExports.useState(false);
-  const [isManualConfigExpanded, setIsManualConfigExpanded] = reactExports.useState(false);
+  const [isManualConfigExpanded, setIsManualConfigExpanded] = reactExports.useState(true);
   const { toast: toast2 } = useToast();
   const [showImportDialog, setShowImportDialog] = reactExports.useState(false);
   const [nameError, setNameError] = reactExports.useState("");
+  const [isNameTouched, setIsNameTouched] = reactExports.useState(false);
   reactExports.useEffect(() => {
     var _a2, _b;
     if (clientFormConfig.transportType === "stdio" && "args" in clientFormConfig) {
@@ -36605,12 +36638,13 @@ const ClientFormSection = ({
     }
   }, [clientFormConfig]);
   reactExports.useEffect(() => {
+    if (!isNameTouched) return;
     if (clientFormName.trim()) {
       setNameError("");
     } else {
       setNameError("Client name is required");
     }
-  }, [clientFormName]);
+  }, [clientFormName, isNameTouched]);
   const handleArgsChange = (newArgsString) => {
     setArgsString(newArgsString);
     if (clientFormConfig.transportType === "stdio") {
@@ -37035,13 +37069,14 @@ const ClientFormSection = ({
       ),
       isManualConfigExpanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-6", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "client-name", className: "text-sm font-medium", children: "Name" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "client-name", className: "text-sm font-medium", children: "Name*" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Input,
             {
               id: "client-name",
               value: clientFormName,
               onChange: (e) => setClientFormName(e.target.value),
+              onBlur: () => setIsNameTouched(true),
               placeholder: "Enter client name",
               className: `max-w-md ${nameError ? "border-red-500 focus:border-red-500 focus:ring-red-500" : ""}`
             }
@@ -39253,7 +39288,7 @@ const ListPane = ({
         " items"
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 overflow-y-auto max-h-96", children: filteredItems.length > 0 ? filteredItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4 overflow-y-auto max-h-[calc(100vh-300px)]", children: filteredItems.length > 0 ? filteredItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         className: "cursor-pointer",
@@ -43297,48 +43332,54 @@ const ToolsTab = ({
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-1", children: [
                 request.isFavorite && /* @__PURE__ */ jsxRuntimeExports.jsx(Star, { className: "w-3 h-3 text-yellow-500 fill-current" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      handleRenameRequest(request.id, request.name);
-                    },
-                    size: "sm",
-                    variant: "ghost",
-                    className: "h-6 w-6 p-0 hover:bg-primary/20 hover:text-primary opacity-0 group-hover:opacity-100 transition-opacity",
-                    title: "Rename request",
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-3 h-3" })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      handleDuplicateRequest(request);
-                    },
-                    size: "sm",
-                    variant: "ghost",
-                    className: "h-6 w-6 p-0 hover:bg-blue-500/20 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity",
-                    title: "Duplicate request",
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyPlus, { className: "w-3 h-3" })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      handleDeleteRequest(request.id);
-                    },
-                    size: "sm",
-                    variant: "ghost",
-                    className: "h-6 w-6 p-0 hover:bg-destructive/20 hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity",
-                    title: "Delete request",
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-3 h-3" })
-                  }
-                )
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Button,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleRenameRequest(request.id, request.name);
+                      },
+                      size: "sm",
+                      variant: "ghost",
+                      className: "h-6 w-6 p-0 hover:bg-primary/20 hover:text-primary opacity-0 group-hover:opacity-100 transition-opacity",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-3 h-3" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "top", children: "Rename" })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Button,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleDuplicateRequest(request);
+                      },
+                      size: "sm",
+                      variant: "ghost",
+                      className: "h-6 w-6 p-0 hover:bg-blue-500/20 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyPlus, { className: "w-3 h-3" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "top", children: "Duplicate" })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Button,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleDeleteRequest(request.id);
+                      },
+                      size: "sm",
+                      variant: "ghost",
+                      className: "h-6 w-6 p-0 hover:bg-destructive/20 hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-3 h-3" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "top", children: "Delete" })
+                ] })
               ] })
             ] }),
             request.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground/80 mb-1.5 line-clamp-2", children: request.description }),
@@ -43372,7 +43413,7 @@ const ToolsTab = ({
           return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white dark:bg-gray-900 rounded-lg p-3 shadow-sm border border-gray-100 dark:border-gray-800 hover:shadow-md hover:border-blue-200 dark:hover:border-blue-800 transition-all duration-200 group", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col space-y-2.5", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg", children: "🛠️" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Hammer, { className: "w-5 h-5 text-muted-foreground" }) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs bg-gradient-to-r from-slate-100 to-gray-100 dark:from-slate-800 dark:to-gray-800 px-2.5 py-1 rounded-md border border-slate-300 dark:border-slate-600 text-slate-800 dark:text-slate-200 font-medium shadow-sm", children: tool.name })
               ] }),
               parameters.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-400 dark:text-gray-600 font-medium", children: [
@@ -43810,13 +43851,13 @@ const ToolCallApproval = ({
   onApprove,
   onReject
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-4 p-4 border border-amber-200 dark:border-amber-800 rounded-xl bg-amber-50 dark:bg-amber-900/30 mb-2", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-4 p-4 border border-slate-200 dark:border-slate-700 rounded-xl bg-slate-50 dark:bg-slate-800 mb-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm font-medium text-amber-800 dark:text-amber-200 mb-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm font-medium text-slate-800 dark:text-slate-200 mb-1", children: [
         "Approve tool call: ",
         toolCall.name
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-amber-700 dark:text-amber-300 bg-amber-100 dark:bg-amber-900/50 p-2 rounded font-mono overflow-auto max-h-28", children: JSON.stringify(toolCall.input, null, 2) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-slate-700 dark:text-slate-300 bg-slate-100 dark:bg-slate-700 p-2 rounded font-mono overflow-auto max-h-28", children: JSON.stringify(toolCall.input, null, 2) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col justify-center gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -43919,7 +43960,7 @@ const ToolSelector = ({
         ),
         disabled: loading,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, { className: "w-3 h-3 text-slate-400" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "w-3 h-3 text-slate-400" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-slate-700 dark:text-slate-200 font-medium", children: "Tools" }),
           someToolsDisabled && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs px-1.5 py-0.5 bg-amber-100 dark:bg-amber-900/50 text-amber-600 dark:text-amber-400 rounded", children: [
             enabledToolCount,
@@ -44481,18 +44522,15 @@ const Chat2 = ({
           },
           idx
         )),
-        hasPendingToolCalls && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-6 mb-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2 text-sm text-amber-600 dark:text-amber-400 font-medium", children: "Pending Tool Calls:" }),
-          Array.from(pendingToolCalls.values()).map((toolCall) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ToolCallApproval,
-            {
-              toolCall,
-              onApprove: handleApproveToolCall,
-              onReject: handleRejectToolCall
-            },
-            toolCall.id
-          ))
-        ] }),
+        hasPendingToolCalls && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-6 mb-2", children: Array.from(pendingToolCalls.values()).map((toolCall) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ToolCallApproval,
+          {
+            toolCall,
+            onApprove: handleApproveToolCall,
+            onReject: handleRejectToolCall
+          },
+          toolCall.id
+        )) }),
         loading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3 px-6 py-4", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             ProviderLogo,
@@ -51609,7 +51647,7 @@ class Client extends Protocol {
     return this.notification({ method: "notifications/roots/list_changed" });
   }
 }
-const version = "0.3.4";
+const version = "0.3.5";
 const packageJson = {
   version
 };
@@ -62225,7 +62263,7 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
   });
 };
 const renderOAuthCallback = (onOAuthConnect) => {
-  const OAuthCallback = React.lazy(() => __vitePreload(() => import("./OAuthCallback-59IQqASq.js"), true ? [] : void 0));
+  const OAuthCallback = React.lazy(() => __vitePreload(() => import("./OAuthCallback-CaYMoLGO.js"), true ? [] : void 0));
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     reactExports.Suspense,
     {
@@ -62239,7 +62277,7 @@ const renderOAuthCallback = (onOAuthConnect) => {
 };
 const renderOAuthDebugCallback = (onOAuthDebugConnect) => {
   const OAuthDebugCallback = React.lazy(
-    () => __vitePreload(() => import("./OAuthDebugCallback-Bm010sVQ.js"), true ? [] : void 0)
+    () => __vitePreload(() => import("./OAuthDebugCallback-CBFeYzo9.js"), true ? [] : void 0)
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     reactExports.Suspense,
@@ -62724,6 +62762,15 @@ const App = () => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(StarGitHubModal, { isOpen: showStarModal, onClose: handleCloseStarModal })
   ] });
 };
+const savedTheme = localStorage.getItem("theme");
+if (savedTheme === "dark") {
+  document.documentElement.classList.add("dark");
+} else if (savedTheme === "light") {
+  document.documentElement.classList.remove("dark");
+} else {
+  const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  document.documentElement.classList.toggle("dark", isDark);
+}
 clientExports.createRoot(document.getElementById("root")).render(
   /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.StrictMode, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, {}) }),

package/client/dist/assets/{index-BT47S2Qb.css → index-DegSReJM.css}

@@ -3,7 +3,6 @@
 
 /* Custom animations and modern styling for the MCP Inspector */
 #root {
-  margin: 0 auto;
   font-family:
     "Inter",
     -apple-system,
@@ -1052,9 +1051,6 @@ video {
 .-right-4 {
   right: -1rem;
 }
-.-top-0\.5 {
-  top: -0.125rem;
-}
 .-top-1\.5 {
   top: -0.375rem;
 }
@@ -1238,9 +1234,6 @@ video {
   width: 1rem;
   height: 1rem;
 }
-.h-0\.5 {
-  height: 0.125rem;
-}
 .h-1 {
   height: 0.25rem;
 }
@@ -1322,6 +1315,9 @@ video {
 .max-h-\[90vh\] {
   max-height: 90vh;
 }
+.max-h-\[calc\(100vh-300px\)\] {
+  max-height: calc(100vh - 300px);
+}
 .max-h-screen {
   max-height: 100vh;
 }
@@ -1482,6 +1478,10 @@ video {
   --tw-translate-y: -50%;
   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));
 }
+.rotate-0 {
+  --tw-rotate: 0deg;
+  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));
+}
 .rotate-180 {
   --tw-rotate: 180deg;
   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));
@@ -1619,11 +1619,6 @@ video {
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1741,10 +1736,6 @@ video {
 .border-dashed {
   border-style: dashed;
 }
-.border-amber-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
-}
 .border-amber-300 {
   --tw-border-opacity: 1;
   border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
@@ -1863,10 +1854,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
 }
-.bg-amber-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
-}
 .bg-background {
   background-color: hsl(var(--background));
 }
@@ -1893,15 +1880,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
 }
-.bg-blue-500\/10 {
-  background-color: rgb(59 130 246 / 0.1);
-}
 .bg-border {
   background-color: hsl(var(--border));
 }
-.bg-border\/50 {
-  background-color: hsl(var(--border) / 0.5);
-}
 .bg-card {
   background-color: hsl(var(--card));
 }
@@ -2062,11 +2043,6 @@ video {
   --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);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-muted\/30 {
   --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);
@@ -2292,6 +2268,9 @@ video {
 .pr-10 {
   padding-right: 2.5rem;
 }
+.pr-3 {
+  padding-right: 0.75rem;
+}
 .pr-6 {
   padding-right: 1.5rem;
 }
@@ -2384,14 +2363,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity, 1));
 }
-.text-amber-700 {
-  --tw-text-opacity: 1;
-  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
-}
-.text-amber-800 {
-  --tw-text-opacity: 1;
-  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
-}
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
@@ -2622,14 +2593,6 @@ video {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-black\/10 {
-  --tw-shadow-color: rgb(0 0 0 / 0.1);
-  --tw-shadow: var(--tw-shadow-colored);
-}
-.shadow-black\/5 {
-  --tw-shadow-color: rgb(0 0 0 / 0.05);
-  --tw-shadow: var(--tw-shadow-colored);
-}
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2684,21 +2647,25 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .duration-200 {
   transition-duration: 200ms;
 }
 .duration-300 {
   transition-duration: 300ms;
 }
-.duration-500 {
-  transition-duration: 500ms;
-}
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.ease-out {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
 @keyframes enter {
 
   from {
@@ -2734,15 +2701,9 @@ video {
 .duration-300 {
   animation-duration: 300ms;
 }
-.duration-500 {
-  animation-duration: 500ms;
-}
 .ease-in-out {
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.ease-out {
-  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
 .running {
   animation-play-state: running;
 }
@@ -3001,41 +2962,22 @@ h1 {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-gradient-to-r:hover {
-  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);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .hover\:from-secondary\/30:hover {
   --tw-gradient-from: hsl(var(--secondary) / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--secondary) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.hover\:via-muted\/40:hover {
-  --tw-gradient-to: hsl(var(--muted) / 0)  var(--tw-gradient-to-position);
-  --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);
-}
-
 .hover\:to-secondary\/20:hover {
   --tw-gradient-to: hsl(var(--secondary) / 0.2) var(--tw-gradient-to-position);
 }
@@ -3487,11 +3429,6 @@ h1 {
   border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
 }
 
-.dark\:border-amber-800:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
-}
-
 .dark\:border-blue-800:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
@@ -3587,10 +3524,6 @@ h1 {
   border-color: rgb(133 77 14 / 0.5);
 }
 
-.dark\:bg-amber-900\/30:is(.dark *) {
-  background-color: rgb(120 53 15 / 0.3);
-}
-
 .dark\:bg-amber-900\/50:is(.dark *) {
   background-color: rgb(120 53 15 / 0.5);
 }
@@ -3751,16 +3684,6 @@ h1 {
   --tw-gradient-to: rgb(30 41 59 / 0.5) var(--tw-gradient-to-position);
 }
 
-.dark\:text-amber-200:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
-}
-
-.dark\:text-amber-300:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
-}
-
 .dark\:text-amber-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(251 191 36 / var(--tw-text-opacity, 1));

package/client/dist/index.html

@@ -5,10 +5,10 @@
     <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-B_8Xm9gw.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BT47S2Qb.css">
+    <script type="module" crossorigin src="/assets/index-DQYTYcqe.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DegSReJM.css">
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" class="w-full"></div>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpjam/inspector",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "MCPJam inspector",
   "license": "Apache-2.0",
   "author": "MCPJam (https://mcpjam.com)",
@@ -51,6 +51,7 @@
     "ajv": "^8.17.1",
     "concurrently": "^9.0.1",
     "dotenv": "^16.5.0",
+    "lucide-react": "^0.525.0",
     "open": "^10.1.0",
     "openai": "^5.7.0",
     "shell-quote": "^1.8.2",