@mcpjam/inspector 0.2.0 → 0.2.2

package/client/dist/assets/{index-DJQtmX5A.js → index-BwJsKGKK.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-Bn78Q1TF.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-BqpNnC48.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-B9WXxW14.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-Dypsoomr.js"])))=>i.map(i=>d[i]);
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -11845,18 +11845,6 @@ var errorUtil;
   errorUtil2.errToObj = (message) => typeof message === "string" ? { message } : message || {};
   errorUtil2.toString = (message) => typeof message === "string" ? message : message == null ? void 0 : message.message;
 })(errorUtil || (errorUtil = {}));
-var __classPrivateFieldGet$1 = function(receiver, state, kind, f) {
-  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet$1 = function(receiver, state, value, kind, f) {
-  if (kind === "m") throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
-};
-var _ZodEnum_cache, _ZodNativeEnum_cache;
 class ParseInputLazyPath {
   constructor(parent, value, path2, key) {
     this._cachedPath = [];
@@ -14578,10 +14566,6 @@ function createZodEnum(values, params) {
   });
 }
 class ZodEnum extends ZodType {
-  constructor() {
-    super(...arguments);
-    _ZodEnum_cache.set(this, void 0);
-  }
   _parse(input) {
     if (typeof input.data !== "string") {
       const ctx = this._getOrReturnCtx(input);
@@ -14593,10 +14577,10 @@ class ZodEnum extends ZodType {
       });
       return INVALID;
     }
-    if (!__classPrivateFieldGet$1(this, _ZodEnum_cache, "f")) {
-      __classPrivateFieldSet$1(this, _ZodEnum_cache, new Set(this._def.values), "f");
+    if (!this._cache) {
+      this._cache = new Set(this._def.values);
     }
-    if (!__classPrivateFieldGet$1(this, _ZodEnum_cache, "f").has(input.data)) {
+    if (!this._cache.has(input.data)) {
       const ctx = this._getOrReturnCtx(input);
       const expectedValues = this._def.values;
       addIssueToContext(ctx, {
@@ -14645,13 +14629,8 @@ class ZodEnum extends ZodType {
     });
   }
 }
-_ZodEnum_cache = /* @__PURE__ */ new WeakMap();
 ZodEnum.create = createZodEnum;
 class ZodNativeEnum extends ZodType {
-  constructor() {
-    super(...arguments);
-    _ZodNativeEnum_cache.set(this, void 0);
-  }
   _parse(input) {
     const nativeEnumValues = util$1.getValidEnumValues(this._def.values);
     const ctx = this._getOrReturnCtx(input);
@@ -14664,10 +14643,10 @@ class ZodNativeEnum extends ZodType {
       });
       return INVALID;
     }
-    if (!__classPrivateFieldGet$1(this, _ZodNativeEnum_cache, "f")) {
-      __classPrivateFieldSet$1(this, _ZodNativeEnum_cache, new Set(util$1.getValidEnumValues(this._def.values)), "f");
+    if (!this._cache) {
+      this._cache = new Set(util$1.getValidEnumValues(this._def.values));
     }
-    if (!__classPrivateFieldGet$1(this, _ZodNativeEnum_cache, "f").has(input.data)) {
+    if (!this._cache.has(input.data)) {
       const expectedValues = util$1.objectValues(nativeEnumValues);
       addIssueToContext(ctx, {
         received: ctx.data,
@@ -14682,7 +14661,6 @@ class ZodNativeEnum extends ZodType {
     return this._def.values;
   }
 }
-_ZodNativeEnum_cache = /* @__PURE__ */ new WeakMap();
 ZodNativeEnum.create = (values, params) => {
   return new ZodNativeEnum({
     values,
@@ -14823,7 +14801,7 @@ class ZodEffects extends ZodType {
           parent: ctx
         });
         if (!isValid(base))
-          return base;
+          return INVALID;
         const result = effect.transform(base.value, checkCtx);
         if (result instanceof Promise) {
           throw new Error(`Asynchronous transform encountered during synchronous parse operation. Use .parseAsync instead.`);
@@ -14832,7 +14810,7 @@ class ZodEffects extends ZodType {
       } else {
         return this._def.schema._parseAsync({ data: ctx.data, path: ctx.path, parent: ctx }).then((base) => {
           if (!isValid(base))
-            return base;
+            return INVALID;
           return Promise.resolve(effect.transform(base.value, checkCtx)).then((result) => ({
             status: status.value,
             value: result
@@ -16134,6 +16112,15 @@ const Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "
 const ChevronDown = createLucideIcon("ChevronDown", [
   ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
 ]);
+/**
+ * @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 ChevronLeft = createLucideIcon("ChevronLeft", [
+  ["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -16204,6 +16191,16 @@ const CircleHelp = createLucideIcon("CircleHelp", [
 const Circle = createLucideIcon("Circle", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ]);
+/**
+ * @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 Clock = createLucideIcon("Clock", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["polyline", { points: "12 6 12 12 16 14", key: "68esgv" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -16578,6 +16575,23 @@ const Trash2 = createLucideIcon("Trash2", [
   ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
   ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
 ]);
+/**
+ * @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 TriangleAlert = createLucideIcon("TriangleAlert", [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -16615,6 +16629,21 @@ const Wifi = createLucideIcon("Wifi", [
   ["path", { d: "M5 12.859a10 10 0 0 1 14 0", key: "1x1e6c" }],
   ["path", { d: "M8.5 16.429a5 5 0 0 1 7 0", key: "1bycff" }]
 ]);
+/**
+ * @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 Wrench = createLucideIcon("Wrench", [
+  [
+    "path",
+    {
+      d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z",
+      key: "cbrjhi"
+    }
+  ]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -16778,6 +16807,38 @@ const DEFAULT_INSPECTOR_CONFIG = {
     value: ""
   }
 };
+const CLAUDE_MODELS = [
+  {
+    id: "claude-opus-4-0",
+    name: "Claude Opus 4",
+    description: "Latest and most powerful model for complex reasoning"
+  },
+  {
+    id: "claude-sonnet-4-0",
+    name: "Claude Sonnet 4",
+    description: "Next generation balanced model with enhanced capabilities"
+  },
+  {
+    id: "claude-3-7-sonnet-latest",
+    name: "Claude Sonnet 3.7",
+    description: "Most intelligent model with extended thinking"
+  },
+  {
+    id: "claude-3-5-sonnet-latest",
+    name: "Claude Sonnet 3.5",
+    description: "High level of intelligence and capability"
+  },
+  {
+    id: "claude-3-5-haiku-latest",
+    name: "Claude Haiku 3.5",
+    description: "Fastest model - intelligence at blazing speeds"
+  },
+  {
+    id: "claude-3-opus-latest",
+    name: "Claude Opus 3",
+    description: "Top-level intelligence, fluency, and understanding"
+  }
+];
 class InspectorOAuthClientProvider {
   constructor(serverUrl) {
     this.serverUrl = serverUrl;
@@ -18086,7 +18147,8 @@ function useDraggablePane(initialHeight) {
 }
 const HistoryAndNotifications = ({
   requestHistory,
-  toolResult
+  toolResult,
+  onClearHistory
 }) => {
   const [expandedRequests, setExpandedRequests] = reactExports.useState({});
   const [isHistoryCollapsed, setIsHistoryCollapsed] = reactExports.useState(true);
@@ -18178,10 +18240,21 @@ const HistoryAndNotifications = ({
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "All Activity" })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
-                requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-muted-foreground bg-muted/50 px-3 py-1 rounded-full", children: [
-                  requestHistory.length,
-                  " request",
-                  requestHistory.length !== 1 ? "s" : ""
+                requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-muted-foreground bg-muted/50 px-3 py-1 rounded-full", children: [
+                    requestHistory.length,
+                    " request",
+                    requestHistory.length !== 1 ? "s" : ""
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      onClick: onClearHistory,
+                      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(
                   "button",
@@ -19045,6 +19118,9 @@ var handleScroll = function(axis, endTarget, event, sourceDelta, noOverscroll) {
   var availableScroll = 0;
   var availableScrollTop = 0;
   do {
+    if (!target) {
+      break;
+    }
     var _a2 = getScrollVariables(axis, target), position = _a2[0], scroll_1 = _a2[1], capacity = _a2[2];
     var elementScroll = scroll_1 - capacity - directionFactor * position;
     if (position || elementScroll) {
@@ -19053,7 +19129,8 @@ var handleScroll = function(axis, endTarget, event, sourceDelta, noOverscroll) {
         availableScrollTop += position;
       }
     }
-    target = target.parentNode.host || target.parentNode;
+    var parent_1 = target.parentNode;
+    target = parent_1 && parent_1.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? parent_1.host : parent_1;
   } while (
     // portaled content
     !targetInLock && target !== document.body || // self content
@@ -20527,10 +20604,10 @@ const flip$2 = function(options) {
         const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
         const nextPlacement = placements[nextIndex];
         if (nextPlacement) {
-          var _overflowsData$;
           const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
-          const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
-          if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
+          if (!ignoreCrossAxisOverflow || // We leave the current main axis only if every placement on that axis
+          // overflows the main axis.
+          overflowsData.every((d) => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
             return {
               data: {
                 index: nextIndex,
@@ -21664,7 +21741,10 @@ const computePosition = (reference, floating, options) => {
     platform: platformWithCache
   });
 };
-var index = typeof document !== "undefined" ? reactExports.useLayoutEffect : reactExports.useEffect;
+var isClient = typeof document !== "undefined";
+var noop$2 = function noop() {
+};
+var index = isClient ? reactExports.useLayoutEffect : noop$2;
 function deepEqual(a, b) {
   if (a === b) {
     return true;
@@ -26729,6 +26809,300 @@ const ToolsTab = ({
 };
 const McpClientContext = reactExports.createContext(null);
 const useMcpClient = () => reactExports.useContext(McpClientContext);
+const ToolCallMessage = ({
+  toolCall
+}) => {
+  const { type: type2, toolName, args, error, message } = toolCall;
+  const getIcon = () => {
+    switch (type2) {
+      case "tool_call":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "w-3 h-3" });
+      case "tool_error":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "w-3 h-3" });
+      case "tool_warning":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "w-3 h-3" });
+      default:
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "w-3 h-3" });
+    }
+  };
+  const getColors = () => {
+    switch (type2) {
+      case "tool_call":
+        return "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-300";
+      case "tool_error":
+        return "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800 text-red-800 dark:text-red-300";
+      case "tool_warning":
+        return "bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-300";
+      default:
+        return "bg-gray-50 dark:bg-gray-950/30 border-gray-200 dark:border-gray-800 text-gray-800 dark:text-gray-300";
+    }
+  };
+  const formatArgs = (args2) => {
+    if (typeof args2 === "string") return args2;
+    if (args2 === null || args2 === void 0) return String(args2);
+    try {
+      return JSON.stringify(args2, null, 2);
+    } catch {
+      return String(args2);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border p-3 mb-2 text-xs font-mono",
+        getColors()
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+          getIcon(),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-semibold", children: [
+            type2 === "tool_call" && `Calling ${toolName}`,
+            type2 === "tool_error" && `${toolName} failed`,
+            type2 === "tool_warning" && "Warning"
+          ] })
+        ] }),
+        type2 === "tool_call" && args && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs opacity-75 mb-1", children: "Arguments:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs bg-black/10 dark:bg-white/10 rounded p-2 overflow-x-auto whitespace-pre-wrap", children: formatArgs(args) })
+        ] }),
+        type2 === "tool_error" && error && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs opacity-75 mb-1", children: "Error:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs bg-black/10 dark:bg-white/10 rounded p-2 overflow-x-auto whitespace-pre-wrap", children: error })
+        ] }),
+        type2 === "tool_warning" && message && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs bg-black/10 dark:bg-white/10 rounded p-2", children: message }) })
+      ]
+    }
+  );
+};
+const parseToolCallContent = (content) => {
+  const toolCalls = [];
+  let cleanText = content;
+  const toolCallPattern = /\[Calling tool (\w+) with args (.*?)\]/g;
+  let match;
+  while ((match = toolCallPattern.exec(content)) !== null) {
+    const [fullMatch, toolName, argsStr] = match;
+    try {
+      const args = JSON.parse(argsStr);
+      toolCalls.push({
+        type: "tool_call",
+        toolName,
+        args
+      });
+    } catch {
+      toolCalls.push({
+        type: "tool_call",
+        toolName,
+        args: argsStr
+      });
+    }
+    cleanText = cleanText.replace(fullMatch, "").trim();
+  }
+  const toolErrorPattern = /\[Tool (\w+) failed: ([\s\S]*?)\](?=\s*(?:\n|$|\[(?:Tool|Warning|Calling)))/g;
+  while ((match = toolErrorPattern.exec(content)) !== null) {
+    const [fullMatch, toolName, error] = match;
+    toolCalls.push({
+      type: "tool_error",
+      toolName,
+      error: error.trim()
+    });
+    cleanText = cleanText.replace(fullMatch, "").trim();
+  }
+  const warningPattern = /\[Warning: (.*?)\]/g;
+  while ((match = warningPattern.exec(content)) !== null) {
+    const [fullMatch, message] = match;
+    toolCalls.push({
+      type: "tool_warning",
+      toolName: "system",
+      message
+    });
+    cleanText = cleanText.replace(fullMatch, "").trim();
+  }
+  return {
+    text: cleanText,
+    toolCalls
+  };
+};
+const ClaudeLogo = ({
+  className = "",
+  size: size2 = 32
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "img",
+    {
+      src: "/claude_logo.png",
+      alt: "Claude Logo",
+      width: size2,
+      height: size2,
+      className,
+      style: {
+        width: size2,
+        height: size2,
+        objectFit: "contain"
+      }
+    }
+  );
+};
+const createMessage = (role, content) => ({
+  role,
+  content,
+  timestamp: /* @__PURE__ */ new Date()
+});
+const getClaudeApiKey = (mcpClient) => {
+  return mcpClient && typeof mcpClient === "object" && mcpClient !== null && "anthropic" in mcpClient && mcpClient.anthropic ? mcpClient.anthropic.apiKey || "" : "";
+};
+const validateSendConditions = (input, mcpClient, claudeApiKey, loading) => {
+  return {
+    isDisabled: loading || !claudeApiKey,
+    isSendDisabled: loading || !claudeApiKey || !input.trim(),
+    canSend: input.trim() && mcpClient && claudeApiKey && !loading
+  };
+};
+const handleTextareaResize = (target) => {
+  target.style.height = "auto";
+  target.style.height = Math.min(target.scrollHeight, 128) + "px";
+};
+const createSyntheticFormEvent = (preventDefault) => {
+  const formEvent = new Event("submit", {
+    bubbles: true,
+    cancelable: true
+  });
+  Object.defineProperty(formEvent, "preventDefault", {
+    value: preventDefault,
+    writable: false
+  });
+  return formEvent;
+};
+const LoadingDots = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-1 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-1", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-1 h-1 bg-muted-foreground/40 rounded-full animate-bounce [animation-delay:-0.3s]" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-1 h-1 bg-muted-foreground/40 rounded-full animate-bounce [animation-delay:-0.15s]" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-1 h-1 bg-muted-foreground/40 rounded-full animate-bounce" })
+] }) });
+const MessageBubble = ({ message }) => {
+  const isUser = message.role === "user";
+  const parsedContent = parseToolCallContent(message.content);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex gap-3 px-6 py-4",
+        isUser ? "justify-end" : "justify-start"
+      ),
+      children: [
+        !isUser && /* @__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(
+          ClaudeLogo,
+          {
+            className: "text-slate-600 dark:text-slate-300",
+            size: 20
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: cn(
+              "max-w-[75%] rounded-xl px-4 py-3 break-words",
+              isUser ? "bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900" : "bg-slate-50 dark:bg-slate-800/50 text-slate-900 dark:text-slate-100"
+            ),
+            children: [
+              parsedContent.text && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: parsedContent.text }),
+              parsedContent.toolCalls.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3", children: parsedContent.toolCalls.map((toolCall, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(ToolCallMessage, { toolCall }, index2)) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xs mt-2 opacity-50",
+                    isUser ? "text-white/60 dark:text-slate-900/60" : "text-slate-500 dark:text-slate-400"
+                  ),
+                  children: message.timestamp.toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit"
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        isUser && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(User, { className: "w-3 h-3 text-slate-600 dark:text-slate-300" }) })
+      ]
+    }
+  );
+};
+const ModelSelector = ({
+  selectedModel,
+  showModelSelector,
+  loading,
+  onToggle,
+  onModelSelect,
+  modelSelectorRef
+}) => {
+  var _a2;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", ref: modelSelectorRef, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        onClick: onToggle,
+        className: "flex items-center gap-2 px-3 py-1.5 text-sm bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors border border-slate-200 dark:border-slate-700",
+        disabled: loading,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-slate-700 dark:text-slate-200 font-medium", children: ((_a2 = CLAUDE_MODELS.find((m2) => m2.id === selectedModel)) == null ? void 0 : _a2.name) || selectedModel }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-3 h-3 text-slate-400" })
+        ]
+      }
+    ),
+    showModelSelector && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-0 top-full mt-2 w-72 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl shadow-lg z-50", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-2", children: CLAUDE_MODELS.map((model) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        onClick: () => onModelSelect(model.id),
+        className: cn(
+          "w-full px-4 py-3 text-left hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors",
+          selectedModel === model.id && "bg-slate-50 dark:bg-slate-800"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-slate-900 dark:text-slate-100", children: model.name }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400 mt-0.5", children: model.description })
+        ]
+      },
+      model.id
+    )) }) })
+  ] });
+};
+const ApiKeyRequiredState = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center max-w-sm space-y-4", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 mx-auto rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Key, { className: "w-5 h-5 text-slate-400" }) }),
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium text-slate-900 dark:text-slate-100", children: "API Key Required" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-slate-500 dark:text-slate-400", children: "Configure your Claude API key to start chatting" })
+  ] })
+] }) });
+const EmptyChatsState = ({ onSuggestionClick }) => {
+  const suggestions = [
+    "Hello! How can you help me?",
+    "Help me write some code",
+    "Explain a concept to me",
+    "Help me with writing"
+  ];
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center max-w-md space-y-6", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 mx-auto rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ClaudeLogo,
+      {
+        className: "text-slate-600 dark:text-slate-300",
+        size: 20
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium text-slate-900 dark:text-slate-100", children: "Start chatting with Claude" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-slate-500 dark:text-slate-400", children: "Ask me anything - I'm here to help!" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-2 pt-2", children: suggestions.map((suggestion) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        onClick: () => onSuggestionClick(suggestion),
+        className: "px-4 py-2 text-sm bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200",
+        children: suggestion
+      },
+      suggestion
+    )) })
+  ] }) });
+};
 const ChatTab = () => {
   const mcpClient = useMcpClient();
   const [input, setInput] = reactExports.useState("");
@@ -26736,62 +27110,60 @@ const ChatTab = () => {
   const [loading, setLoading] = reactExports.useState(false);
   const [error, setError] = reactExports.useState(null);
   const [tools, setTools] = reactExports.useState([]);
+  const [selectedModel, setSelectedModel] = reactExports.useState(
+    "claude-3-5-sonnet-latest"
+  );
+  const [showModelSelector, setShowModelSelector] = reactExports.useState(false);
   const chatEndRef = reactExports.useRef(null);
   const inputRef = reactExports.useRef(null);
-  const claudeApiKey = mcpClient && "anthropic" in mcpClient && mcpClient.anthropic ? mcpClient.anthropic.apiKey || "" : "";
-  reactExports.useEffect(() => {
-    let mounted = true;
-    async function fetchTools() {
-      if (!mcpClient) return;
-      try {
-        const response = await mcpClient.listTools();
-        if (mounted) setTools(response.tools || []);
-      } catch (e) {
-        const errorMessage = e instanceof Error ? e.message : "Failed to fetch tools";
-        setError(errorMessage);
-      }
+  const modelSelectorRef = reactExports.useRef(null);
+  const claudeApiKey = getClaudeApiKey(mcpClient);
+  const { isDisabled, isSendDisabled, canSend } = validateSendConditions(
+    input,
+    mcpClient,
+    claudeApiKey,
+    loading
+  );
+  const fetchTools = async () => {
+    if (!mcpClient) return;
+    try {
+      const response = await mcpClient.listTools();
+      setTools(response.tools || []);
+    } catch (e) {
+      const errorMessage = e instanceof Error ? e.message : "Failed to fetch tools";
+      setError(errorMessage);
     }
-    fetchTools();
-    return () => {
-      mounted = false;
-    };
-  }, [mcpClient]);
-  reactExports.useEffect(() => {
-    var _a2;
-    (_a2 = chatEndRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
-  }, [chat]);
-  reactExports.useEffect(() => {
-    if (claudeApiKey && inputRef.current) {
-      inputRef.current.focus();
+  };
+  const addMessageToChat = (message) => {
+    setChat((prev) => [...prev, message]);
+  };
+  const processUserQuery = async (userMessage) => {
+    if (!mcpClient || !("processQuery" in mcpClient) || typeof mcpClient.processQuery !== "function") {
+      throw new Error(
+        "Chat functionality is not available. Please ensure you have a valid API key and the server is connected."
+      );
     }
-  }, [claudeApiKey]);
+    await mcpClient.processQuery(
+      userMessage,
+      tools,
+      (content) => {
+        const assistantMessage = createMessage("assistant", content);
+        addMessageToChat(assistantMessage);
+      },
+      selectedModel
+    );
+  };
   const handleSend = async (e) => {
     e.preventDefault();
     setError(null);
-    if (!input.trim() || !mcpClient || !claudeApiKey) return;
+    if (!canSend) return;
     const userMessage = input.trim();
-    const newMessage = {
-      role: "user",
-      content: userMessage,
-      timestamp: /* @__PURE__ */ new Date()
-    };
-    setChat((prev) => [...prev, newMessage]);
+    const newMessage = createMessage("user", userMessage);
+    addMessageToChat(newMessage);
     setInput("");
     setLoading(true);
     try {
-      if (mcpClient && "processQuery" in mcpClient && typeof mcpClient.processQuery === "function") {
-        const response = await mcpClient.processQuery(userMessage, tools);
-        const assistantMessage = {
-          role: "assistant",
-          content: response,
-          timestamp: /* @__PURE__ */ new Date()
-        };
-        setChat((prev) => [...prev, assistantMessage]);
-      } else {
-        throw new Error(
-          "Chat functionality is not available. Please ensure you have a valid API key and the server is connected."
-        );
-      }
+      await processUserQuery(userMessage);
     } catch (e2) {
       const errorMessage = e2 instanceof Error ? e2.message : "Error sending message";
       setError(errorMessage);
@@ -26803,142 +27175,126 @@ const ChatTab = () => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       if (!isSendDisabled) {
-        const formEvent = new Event("submit", {
-          bubbles: true,
-          cancelable: true
-        });
-        Object.defineProperty(formEvent, "preventDefault", {
-          value: () => e.preventDefault(),
-          writable: false
-        });
+        const formEvent = createSyntheticFormEvent(() => e.preventDefault());
         handleSend(formEvent);
       }
     }
   };
-  const isDisabled = loading || !claudeApiKey;
-  const isSendDisabled = isDisabled || !input.trim();
-  const LoadingDots = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-1 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-1", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-1.5 h-1.5 bg-muted-foreground/60 rounded-full animate-bounce [animation-delay:-0.3s]" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-1.5 h-1.5 bg-muted-foreground/60 rounded-full animate-bounce [animation-delay:-0.15s]" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-1.5 h-1.5 bg-muted-foreground/60 rounded-full animate-bounce" })
-  ] }) });
-  const MessageBubble = ({ message }) => {
-    const isUser = message.role === "user";
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: cn(
-          "flex gap-3 px-4 py-3",
-          isUser ? "justify-end" : "justify-start"
-        ),
-        children: [
-          !isUser && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 w-7 h-7 rounded-full bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { className: "w-4 h-4 text-white" }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              className: cn(
-                "max-w-[80%] rounded-2xl px-4 py-2.5 break-words",
-                isUser ? "bg-primary text-primary-foreground ml-auto" : "bg-muted text-foreground"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: message.content }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "text-xs mt-1 opacity-70",
-                      isUser ? "text-primary-foreground/70" : "text-muted-foreground"
-                    ),
-                    children: message.timestamp.toLocaleTimeString([], {
-                      hour: "2-digit",
-                      minute: "2-digit"
-                    })
-                  }
-                )
-              ]
-            }
-          ),
-          isUser && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 w-7 h-7 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(User, { className: "w-4 h-4 text-primary-foreground" }) })
-        ]
-      }
-    );
+  const handleInputChange = (e) => {
+    setInput(e.target.value);
+    handleTextareaResize(e.target);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full bg-background", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 border-b border-border bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 sm:px-6 py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { className: "w-4 h-4 text-white" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-base font-medium text-foreground", children: "Claude" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: claudeApiKey ? "Online" : "API key required" })
-      ] })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto bg-background", children: [
-      !claudeApiKey ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center max-w-sm space-y-3", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 mx-auto rounded-full bg-muted/50 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Key, { className: "w-6 h-6 text-muted-foreground" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-base font-medium text-foreground", children: "API Key Required" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure your Claude API key to start chatting" })
-        ] })
-      ] }) }) : chat.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center max-w-sm space-y-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 mx-auto rounded-full bg-gradient-to-br from-purple-500/20 to-blue-600/20 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { className: "w-6 h-6 text-purple-600 dark:text-purple-400" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-base font-medium text-foreground", children: "Start chatting with Claude" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Ask me anything - I'm here to help!" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2 justify-center pt-2", children: [
-          "Hello!",
-          "Help me code",
-          "Explain something",
-          "Write for me"
-        ].map((suggestion) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
+  const handleModelSelect = (modelId) => {
+    setSelectedModel(modelId);
+    setShowModelSelector(false);
+  };
+  const toggleModelSelector = () => {
+    setShowModelSelector(!showModelSelector);
+  };
+  reactExports.useEffect(() => {
+    let mounted = true;
+    const initializeTools = async () => {
+      if (mounted) {
+        await fetchTools();
+      }
+    };
+    initializeTools();
+    return () => {
+      mounted = false;
+    };
+  }, [mcpClient]);
+  reactExports.useEffect(() => {
+    var _a2;
+    (_a2 = chatEndRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
+  }, [chat]);
+  reactExports.useEffect(() => {
+    if (claudeApiKey && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [claudeApiKey]);
+  reactExports.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (modelSelectorRef.current && !modelSelectorRef.current.contains(event.target)) {
+        setShowModelSelector(false);
+      }
+    };
+    if (showModelSelector) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showModelSelector]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full bg-white dark:bg-slate-950", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 border-b border-slate-200 dark:border-slate-800", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ClaudeLogo,
           {
-            onClick: () => setInput(suggestion),
-            className: "px-3 py-1.5 text-xs bg-muted hover:bg-muted/80 rounded-full transition-colors",
-            children: suggestion
-          },
-          suggestion
-        )) })
-      ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-2", children: [
+            className: "text-slate-600 dark:text-slate-300",
+            size: 20
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: "Claude" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: claudeApiKey ? "Ready to help" : "API key required" })
+        ] })
+      ] }),
+      claudeApiKey && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ModelSelector,
+        {
+          selectedModel,
+          showModelSelector,
+          loading,
+          onToggle: toggleModelSelector,
+          onModelSelect: handleModelSelect,
+          modelSelectorRef
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      !claudeApiKey ? /* @__PURE__ */ jsxRuntimeExports.jsx(ApiKeyRequiredState, {}) : chat.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyChatsState, { onSuggestionClick: setInput }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-2", children: [
         chat.map((message, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(MessageBubble, { message }, idx)),
-        loading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3 px-4 py-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 w-7 h-7 rounded-full bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { className: "w-4 h-4 text-white" }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-muted rounded-2xl px-4 py-2.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingDots, {}) })
+        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(
+            ClaudeLogo,
+            {
+              className: "text-slate-600 dark:text-slate-300",
+              size: 20
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-slate-50 dark:bg-slate-800/50 rounded-xl px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingDots, {}) })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: chatEndRef })
     ] }),
-    error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 px-4 py-2 bg-destructive/10 border-t border-destructive/20", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-destructive text-sm", children: [
+    error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 px-6 py-3 bg-red-50 dark:bg-red-950/50 border-t border-red-200 dark:border-red-800", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-red-700 dark:text-red-300 text-sm", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: "⚠️" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: error })
     ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 border-t border-border bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSend, className: "relative", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex items-end gap-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 border-t border-slate-200 dark:border-slate-800", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSend, className: "relative", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex items-end gap-3", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "textarea",
           {
             ref: inputRef,
             value: input,
-            onChange: (e) => setInput(e.target.value),
+            onChange: handleInputChange,
             onKeyDown: handleKeyDown,
-            placeholder: !claudeApiKey ? "API key required..." : loading ? "Claude is typing..." : "Message Claude...",
+            placeholder: !claudeApiKey ? "API key required..." : loading ? "Claude is thinking..." : "Message Claude...",
             disabled: isDisabled,
             rows: 1,
             className: cn(
-              "flex-1 px-4 py-2.5 rounded-2xl border border-border bg-background resize-none",
-              "focus:outline-none focus:ring-1 focus:ring-ring focus:border-transparent",
-              "placeholder:text-muted-foreground text-sm",
-              "min-h-[40px] max-h-32 overflow-y-auto",
-              !claudeApiKey && "opacity-60 cursor-not-allowed"
+              "flex-1 px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 resize-none",
+              "focus:outline-none focus:ring-2 focus:ring-slate-400 dark:focus:ring-slate-500 focus:border-transparent",
+              "placeholder:text-slate-400 dark:placeholder:text-slate-500 text-sm",
+              "min-h-[48px] max-h-32 overflow-y-auto",
+              !claudeApiKey && "opacity-50 cursor-not-allowed"
             ),
             style: {
               height: "auto",
-              minHeight: "40px",
+              minHeight: "48px",
               maxHeight: "128px"
-            },
-            onInput: (e) => {
-              const target = e.target;
-              target.style.height = "auto";
-              target.style.height = Math.min(target.scrollHeight, 128) + "px";
             }
           }
         ),
@@ -26948,14 +27304,14 @@ const ChatTab = () => {
             type: "submit",
             disabled: isSendDisabled,
             className: cn(
-              "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition-colors",
-              isSendDisabled ? "bg-muted text-muted-foreground cursor-not-allowed" : "bg-primary text-primary-foreground hover:bg-primary/90"
+              "flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-colors",
+              isSendDisabled ? "bg-slate-100 dark:bg-slate-800 text-slate-400 cursor-not-allowed" : "bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-slate-200"
             ),
             children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-4 h-4" })
           }
         )
       ] }),
-      claudeApiKey && !loading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground mt-2 px-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden sm:inline", children: "Press Enter to send • Shift+Enter for new line" }) })
+      claudeApiKey && !loading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-slate-400 dark:text-slate-500 mt-3 px-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden sm:inline", children: "Press Enter to send • Shift+Enter for new line" }) })
     ] }) }) })
   ] });
 };
@@ -28253,7 +28609,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version$1 = "0.2.0";
+const version$1 = "0.2.2";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -28745,7 +29101,9 @@ const Sidebar = ({
   onDisconnectServer,
   onCreateClient,
   onEditClient,
-  updateTrigger
+  updateTrigger,
+  isExpanded,
+  onToggleExpanded
 }) => {
   const [theme, setTheme] = useTheme();
   const serverConnections = React.useMemo(() => {
@@ -28787,7 +29145,6 @@ const Sidebar = ({
         return "text-gray-500 dark:text-gray-400";
     }
   };
-  const shouldShowCreatePrompt = serverConnections.length === 0;
   const shouldDisableConnection = (connection) => {
     if (!mcpAgent || connection.connectionStatus === "connected") {
       return false;
@@ -28806,165 +29163,282 @@ const Sidebar = ({
     }
     return "Connect to this server";
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-80 bg-card border-r border-border flex flex-col h-full", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center space-y-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "img",
+  const getConnectionDisplayText = (connection) => {
+    var _a2;
+    if (connection.config.transportType === "stdio" && "command" in connection.config) {
+      return `${connection.config.command} ${((_a2 = connection.config.args) == null ? void 0 : _a2.join(" ")) || ""}`;
+    }
+    if ("url" in connection.config && connection.config.url) {
+      return connection.config.url.toString();
+    }
+    return "Unknown configuration";
+  };
+  const renderHeader = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center space-y-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        src: getLogoSrc(),
+        alt: "MCP Jam",
+        className: "h-6 w-auto object-contain transition-opacity duration-200",
+        onError: (e) => {
+          console.warn("Failed to load MCP Jam logo");
+          e.currentTarget.style.display = "none";
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground opacity-70", children: [
+      "v",
+      version$1
+    ] }) })
+  ] }) });
+  const renderConnectionsHeader = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 border-b border-border/50", 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(Server, { className: "w-4 h-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-foreground", children: "Connections" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: serverConnections.length })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
         {
-          src: getLogoSrc(),
-          alt: "MCP Jam",
-          className: "h-6 w-auto object-contain transition-opacity duration-200",
-          onError: (e) => {
-            console.warn("Failed to load MCP Jam logo");
-            e.currentTarget.style.display = "none";
-          }
+          onClick: onCreateClient,
+          size: "sm",
+          variant: "ghost",
+          className: "h-7 w-7 p-0 hover:bg-primary/20 hover:text-primary",
+          title: "Create new client",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" })
         }
       ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground opacity-70", children: [
-        "v",
-        version$1
-      ] }) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 border-b border-border/50", 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(Server, { className: "w-4 h-4 text-muted-foreground" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-foreground", children: "Connections" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: serverConnections.length })
-      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: (mcpAgent == null ? void 0 : mcpAgent.hasConnectedRemoteServer()) ? "Note: Creating a remote client will disconnect the current remote connection" : "Create new client" })
+    ] })
+  ] }) });
+  const renderEmptyState = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-8", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Server, { className: "w-12 h-12 text-muted-foreground mx-auto mb-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium mb-2", children: "No clients connected" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground mb-4", children: "Create your first MCP client to get started" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: onCreateClient, size: "sm", className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
+      "Create Client"
+    ] })
+  ] }) });
+  const renderConnectionActions = (connection) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-1", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onEditClient(connection.name);
+        },
+        size: "sm",
+        variant: "ghost",
+        className: "h-6 w-6 p-0",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-3 h-3" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemoveServer(connection.name);
+        },
+        size: "sm",
+        variant: "ghost",
+        className: "h-6 w-6 p-0 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-3 h-3" })
+      }
+    )
+  ] });
+  const renderConnectionButton = (connection) => {
+    if (connection.connectionStatus === "connected") {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onDisconnectServer(connection.name);
+          },
+          size: "sm",
+          variant: "outline",
+          className: "h-6 text-xs px-2",
+          children: "Disconnect"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onConnectServer(connection.name);
+            onServerSelect(connection.name);
+          },
+          size: "sm",
+          className: "h-6 text-xs px-2",
+          disabled: shouldDisableConnection(connection),
+          children: "Connect"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: getConnectTooltipMessage(connection) })
+    ] });
+  };
+  const renderConnectionItem = (connection) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: `p-3 rounded-lg border cursor-pointer transition-all hover:bg-muted/50 ${selectedServerName === connection.name ? "border-primary bg-primary/10" : "border-border"}`,
+      onClick: () => onServerSelect(connection.name),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
+            getConnectionStatusIcon(connection.connectionStatus),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-sm", children: connection.name }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground", children: getConnectionDisplayText(connection) })
+            ] })
+          ] }),
+          renderConnectionActions(connection)
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "span",
+            {
+              className: `text-xs capitalize ${getConnectionStatusColor(connection.connectionStatus)}`,
+              children: connection.connectionStatus
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex space-x-1", children: renderConnectionButton(connection) })
+        ] })
+      ] })
+    },
+    connection.name
+  );
+  const renderThemeSelector = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-t", 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.jsxs(Tooltip, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
-            onClick: onCreateClient,
+            onClick: () => window.open("https://github.com/MCPJam/inspector", "_blank"),
             size: "sm",
             variant: "ghost",
             className: "h-7 w-7 p-0 hover:bg-primary/20 hover:text-primary",
-            title: "Create new client",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "svg",
+              {
+                className: "w-4 h-4",
+                viewBox: "0 0 24 24",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" })
+              }
+            )
           }
         ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: (mcpAgent == null ? void 0 : mcpAgent.hasConnectedRemoteServer()) ? "Note: Creating a remote client will disconnect the current remote connection" : "Create new client" })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
-      shouldShowCreatePrompt && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-8", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Server, { className: "w-12 h-12 text-muted-foreground mx-auto mb-4" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium mb-2", children: "No clients connected" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground mb-4", children: "Create your first MCP client to get started" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "⭐ Star us on GitHub" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
-            onClick: onCreateClient,
+            onClick: () => window.open("https://discord.gg/JEnDtz8X6z", "_blank"),
             size: "sm",
-            className: "w-full",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
-              "Create Client"
-            ]
+            variant: "ghost",
+            className: "h-7 w-7 p-0 hover:bg-primary/20 hover:text-primary",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "svg",
+              {
+                className: "w-4 h-4",
+                viewBox: "0 0 24 24",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0952.2517-.1915.3718-.2892a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.0977.246.1967.3728.2900a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0002 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9554 2.4189-2.1568 2.4189Z" })
+              }
+            )
           }
-        )
-      ] }) }),
-      serverConnections.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 space-y-2", children: serverConnections.map((connection) => {
-        var _a2;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Join Discord" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Select,
+      {
+        value: theme,
+        onValueChange: (value) => setTheme(value),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-[100px]", id: "theme-select", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "system", children: "System" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "light", children: "Light" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "dark", children: "Dark" })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+  const renderToggleExpandedButton = () => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        onClick: onToggleExpanded,
+        size: "sm",
+        variant: "outline",
+        className: "absolute top-1/2 -translate-y-1/2 -right-4 h-8 w-8 p-0 bg-background border border-border rounded-full shadow-md hover:shadow-lg z-10 transition-all duration-200",
+        children: isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4" })
+      }
+    );
+  };
+  const renderExpandedContent = () => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      renderHeader(),
+      renderConnectionsHeader(),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+        shouldShowCreatePrompt && renderEmptyState(),
+        serverConnections.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 space-y-2", children: serverConnections.map(renderConnectionItem) })
+      ] }) }) }),
+      renderThemeSelector()
+    ] });
+  };
+  const renderCollapsedContent = () => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col items-center pt-4 space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col space-y-2", children: [
+      serverConnections.slice(0, 5).map((connection) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: `p-3 rounded-lg border cursor-pointer transition-all hover:bg-muted/50 ${selectedServerName === connection.name ? "border-primary bg-primary/10" : "border-border"}`,
+            className: `w-8 h-8 rounded-full border-2 flex items-center justify-center cursor-pointer transition-colors ${selectedServerName === connection.name ? "border-primary bg-primary/10" : "border-border bg-muted/50"}`,
             onClick: () => onServerSelect(connection.name),
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
-                  getConnectionStatusIcon(connection.connectionStatus),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-sm", children: connection.name }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground", children: connection.config.transportType === "stdio" && "command" in connection.config ? `${connection.config.command} ${((_a2 = connection.config.args) == null ? void 0 : _a2.join(" ")) || ""}` : "url" in connection.config && connection.config.url ? connection.config.url.toString() : "Unknown configuration" })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-1", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    Button,
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onEditClient(connection.name);
-                      },
-                      size: "sm",
-                      variant: "ghost",
-                      className: "h-6 w-6 p-0",
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-3 h-3" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    Button,
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onRemoveServer(connection.name);
-                      },
-                      size: "sm",
-                      variant: "ghost",
-                      className: "h-6 w-6 p-0 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950",
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-3 h-3" })
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs capitalize ${getConnectionStatusColor(connection.connectionStatus)}`, children: connection.connectionStatus }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex space-x-1", children: connection.connectionStatus === "connected" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onDisconnectServer(connection.name);
-                    },
-                    size: "sm",
-                    variant: "outline",
-                    className: "h-6 text-xs px-2",
-                    children: "Disconnect"
-                  }
-                ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    Button,
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onConnectServer(connection.name);
-                      },
-                      size: "sm",
-                      className: "h-6 text-xs px-2",
-                      disabled: shouldDisableConnection(connection),
-                      children: "Connect"
-                    }
-                  ) }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: getConnectTooltipMessage(connection) })
-                ] }) })
-              ] })
-            ] })
-          },
-          connection.name
-        );
-      }) })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-t", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-muted-foreground", children: "Theme" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Select,
-        {
-          value: theme,
-          onValueChange: (value) => setTheme(value),
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-[100px]", id: "theme-select", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "system", children: "System" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "light", children: "Light" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "dark", children: "Dark" })
-            ] })
-          ]
-        }
-      )
-    ] }) })
-  ] });
+            children: getConnectionStatusIcon(connection.connectionStatus)
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: connection.name }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground capitalize", children: connection.connectionStatus })
+        ] }) })
+      ] }, connection.name)),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            onClick: onCreateClient,
+            size: "sm",
+            variant: "ghost",
+            className: "w-8 h-8 p-0 rounded-full",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: "Create new client" })
+      ] })
+    ] }) });
+  };
+  const shouldShowCreatePrompt = serverConnections.length === 0;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: `${isExpanded ? "w-80" : "w-16"} bg-card border-r border-border flex flex-col h-full transition-all duration-300 ease-in-out relative`,
+      children: [
+        renderToggleExpandedButton(),
+        isExpanded ? renderExpandedContent() : renderCollapsedContent()
+      ]
+    }
+  );
 };
 const Tabs = ({
   currentPage,
@@ -30243,7 +30717,7 @@ class Protocol {
   request(request, resultSchema, options) {
     const { relatedRequestId, resumptionToken, onresumptiontoken } = options !== null && options !== void 0 ? options : {};
     return new Promise((resolve, reject) => {
-      var _a2, _b, _c, _d, _e2;
+      var _a2, _b, _c, _d, _e2, _f;
       if (!this._transport) {
         reject(new Error("Not connected"));
         return;
@@ -30262,7 +30736,10 @@ class Protocol {
         this._progressHandlers.set(messageId, options.onprogress);
         jsonrpcRequest.params = {
           ...request.params,
-          _meta: { progressToken: messageId }
+          _meta: {
+            ...((_c = request.params) === null || _c === void 0 ? void 0 : _c._meta) || {},
+            progressToken: messageId
+          }
         };
       }
       const cancel = (reason) => {
@@ -30295,13 +30772,13 @@ class Protocol {
           reject(error);
         }
       });
-      (_c = options === null || options === void 0 ? void 0 : options.signal) === null || _c === void 0 ? void 0 : _c.addEventListener("abort", () => {
+      (_d = options === null || options === void 0 ? void 0 : options.signal) === null || _d === void 0 ? void 0 : _d.addEventListener("abort", () => {
         var _a3;
         cancel((_a3 = options === null || options === void 0 ? void 0 : options.signal) === null || _a3 === void 0 ? void 0 : _a3.reason);
       });
-      const timeout = (_d = options === null || options === void 0 ? void 0 : options.timeout) !== null && _d !== void 0 ? _d : DEFAULT_REQUEST_TIMEOUT_MSEC;
+      const timeout = (_e2 = options === null || options === void 0 ? void 0 : options.timeout) !== null && _e2 !== void 0 ? _e2 : DEFAULT_REQUEST_TIMEOUT_MSEC;
       const timeoutHandler = () => cancel(new McpError(ErrorCode.RequestTimeout, "Request timed out", { timeout }));
-      this._setupTimeout(messageId, timeout, options === null || options === void 0 ? void 0 : options.maxTotalTimeout, timeoutHandler, (_e2 = options === null || options === void 0 ? void 0 : options.resetTimeoutOnProgress) !== null && _e2 !== void 0 ? _e2 : false);
+      this._setupTimeout(messageId, timeout, options === null || options === void 0 ? void 0 : options.maxTotalTimeout, timeoutHandler, (_f = options === null || options === void 0 ? void 0 : options.resetTimeoutOnProgress) !== null && _f !== void 0 ? _f : false);
       this._transport.send(jsonrpcRequest, { relatedRequestId, resumptionToken, onresumptiontoken }).catch((error) => {
         this._cleanupTimeout(messageId);
         reject(error);
@@ -36397,7 +36874,7 @@ function requireAjv() {
   function setLogger(self2) {
     var logger = self2._opts.logger;
     if (logger === false) {
-      self2.logger = { log: noop2, warn: noop2, error: noop2 };
+      self2.logger = { log: noop3, warn: noop3, error: noop3 };
     } else {
       if (logger === void 0) logger = console;
       if (!(typeof logger == "object" && logger.log && logger.warn && logger.error))
@@ -36405,7 +36882,7 @@ function requireAjv() {
       self2.logger = logger;
     }
   }
-  function noop2() {
+  function noop3() {
   }
   return ajv;
 }
@@ -36877,7 +37354,7 @@ const formatRequestDetails = (details) => {
   }
   return details;
 };
-const VERSION = "0.52.0";
+const VERSION = "0.53.0";
 const isRunningInBrowser = () => {
   return (
     // @ts-ignore
@@ -36925,10 +37402,10 @@ const getPlatformProperties = () => {
     return {
       "X-Stainless-Lang": "js",
       "X-Stainless-Package-Version": VERSION,
-      "X-Stainless-OS": normalizePlatform(globalThis.process.platform),
-      "X-Stainless-Arch": normalizeArch(globalThis.process.arch),
+      "X-Stainless-OS": normalizePlatform(globalThis.process.platform ?? "unknown"),
+      "X-Stainless-Arch": normalizeArch(globalThis.process.arch ?? "unknown"),
       "X-Stainless-Runtime": "node",
-      "X-Stainless-Runtime-Version": globalThis.process.version
+      "X-Stainless-Runtime-Version": globalThis.process.version ?? "unknown"
     };
   }
   const browserInfo = getBrowserInfo();
@@ -38470,6 +38947,9 @@ const tokenize = (input) => {
 }, partialParse = (input) => JSON.parse(generate(unstrip(strip(tokenize(input)))));
 var _BetaMessageStream_instances, _BetaMessageStream_currentMessageSnapshot, _BetaMessageStream_connectedPromise, _BetaMessageStream_resolveConnectedPromise, _BetaMessageStream_rejectConnectedPromise, _BetaMessageStream_endPromise, _BetaMessageStream_resolveEndPromise, _BetaMessageStream_rejectEndPromise, _BetaMessageStream_listeners, _BetaMessageStream_ended, _BetaMessageStream_errored, _BetaMessageStream_aborted, _BetaMessageStream_catchingPromiseCreated, _BetaMessageStream_response, _BetaMessageStream_request_id, _BetaMessageStream_getFinalMessage, _BetaMessageStream_getFinalText, _BetaMessageStream_handleError, _BetaMessageStream_beginRequest, _BetaMessageStream_addStreamEvent, _BetaMessageStream_endRequest, _BetaMessageStream_accumulateMessage;
 const JSON_BUF_PROPERTY$1 = "__json_buf";
+function tracksToolInput$1(content) {
+  return content.type === "tool_use" || content.type === "server_tool_use" || content.type === "mcp_tool_use";
+}
 class BetaMessageStream {
   constructor() {
     _BetaMessageStream_instances.add(this);
@@ -38805,7 +39285,7 @@ class BetaMessageStream {
             break;
           }
           case "input_json_delta": {
-            if ((content.type === "tool_use" || content.type === "mcp_tool_use") && content.input) {
+            if (tracksToolInput$1(content) && content.input) {
               this._emit("inputJson", event.delta.partial_json, content.input);
             }
             break;
@@ -38903,7 +39383,7 @@ class BetaMessageStream {
             break;
           }
           case "input_json_delta": {
-            if ((snapshotContent == null ? void 0 : snapshotContent.type) === "tool_use" || (snapshotContent == null ? void 0 : snapshotContent.type) === "mcp_tool_use") {
+            if (snapshotContent && tracksToolInput$1(snapshotContent)) {
               let jsonBuf = snapshotContent[JSON_BUF_PROPERTY$1] || "";
               jsonBuf += event.delta.partial_json;
               Object.defineProperty(snapshotContent, JSON_BUF_PROPERTY$1, {
@@ -39103,6 +39583,9 @@ class Completions extends APIResource {
 }
 var _MessageStream_instances, _MessageStream_currentMessageSnapshot, _MessageStream_connectedPromise, _MessageStream_resolveConnectedPromise, _MessageStream_rejectConnectedPromise, _MessageStream_endPromise, _MessageStream_resolveEndPromise, _MessageStream_rejectEndPromise, _MessageStream_listeners, _MessageStream_ended, _MessageStream_errored, _MessageStream_aborted, _MessageStream_catchingPromiseCreated, _MessageStream_response, _MessageStream_request_id, _MessageStream_getFinalMessage, _MessageStream_getFinalText, _MessageStream_handleError, _MessageStream_beginRequest, _MessageStream_addStreamEvent, _MessageStream_endRequest, _MessageStream_accumulateMessage;
 const JSON_BUF_PROPERTY = "__json_buf";
+function tracksToolInput(content) {
+  return content.type === "tool_use" || content.type === "server_tool_use";
+}
 class MessageStream {
   constructor() {
     _MessageStream_instances.add(this);
@@ -39438,7 +39921,7 @@ class MessageStream {
             break;
           }
           case "input_json_delta": {
-            if (content.type === "tool_use" && content.input) {
+            if (tracksToolInput(content) && content.input) {
               this._emit("inputJson", event.delta.partial_json, content.input);
             }
             break;
@@ -39535,7 +40018,7 @@ class MessageStream {
             break;
           }
           case "input_json_delta": {
-            if ((snapshotContent == null ? void 0 : snapshotContent.type) === "tool_use") {
+            if (snapshotContent && tracksToolInput(snapshotContent)) {
               let jsonBuf = snapshotContent[JSON_BUF_PROPERTY] || "";
               jsonBuf += event.delta.partial_json;
               Object.defineProperty(snapshotContent, JSON_BUF_PROPERTY, {
@@ -40001,7 +40484,7 @@ class BaseAnthropic {
     const defaultTimeout = 10 * 60;
     const expectedTimeout = 60 * 60 * maxTokens / 128e3;
     if (expectedTimeout > defaultTimeout) {
-      throw new AnthropicError("Streaming is strongly recommended for operations that may take longer than 10 minutes. See https://github.com/anthropics/anthropic-sdk-python#streaming-responses for more details");
+      throw new AnthropicError("Streaming is strongly recommended for operations that may take longer than 10 minutes. See https://github.com/anthropics/anthropic-sdk-typescript#streaming-responses for more details");
     }
     return defaultTimeout * 1e3;
   }
@@ -40326,7 +40809,7 @@ Anthropic.Models = Models2;
 Anthropic.Beta = Beta;
 const { HUMAN_PROMPT, AI_PROMPT } = Anthropic;
 const readline = {};
-const version = "0.2.0";
+const version = "0.2.2";
 const packageJson = {
   version
 };
@@ -40417,14 +40900,14 @@ class ParseError extends Error {
     super(message), this.name = "ParseError", this.type = options.type, this.field = options.field, this.value = options.value, this.line = options.line;
   }
 }
-function noop(_arg) {
+function noop2(_arg) {
 }
 function createParser(callbacks) {
   if (typeof callbacks == "function")
     throw new TypeError(
       "`callbacks` must be an object, got a function instead. Did you mean `{onEvent: fn}`?"
     );
-  const { onEvent = noop, onError = noop, onRetry = noop, onComment } = callbacks;
+  const { onEvent = noop2, onError = noop2, onRetry = noop2, onComment } = callbacks;
   let incompleteLine = "", isFirstChunk = true, id, data2 = "", eventType = "";
   function feed(newChunk) {
     const chunk = isFirstChunk ? newChunk.replace(/^\xEF\xBB\xBF/, "") : newChunk, [complete, incomplete] = splitLines(`${incompleteLine}${chunk}`);
@@ -40813,7 +41296,8 @@ class SSEClientTransport {
     return await this._startOrAuth();
   }
   async _commonHeaders() {
-    const headers = {};
+    var _a2;
+    const headers = { ...(_a2 = this._requestInit) === null || _a2 === void 0 ? void 0 : _a2.headers };
     if (this._authProvider) {
       const tokens = await this._authProvider.tokens();
       if (tokens) {
@@ -41262,6 +41746,61 @@ const StdErrNotificationSchema = NotificationSchema.extend({
 ClientNotificationSchema.or(
   StdErrNotificationSchema
 ).or(ServerNotificationSchema).or(NotificationSchema);
+const sanitizeSchema = (schema) => {
+  if (!schema || typeof schema !== "object") return schema;
+  if (Array.isArray(schema)) {
+    return schema.map((item) => sanitizeSchema(item));
+  }
+  const schemaObj = schema;
+  const sanitized = {};
+  for (const [key, value] of Object.entries(schemaObj)) {
+    if (key === "properties" && value && typeof value === "object" && !Array.isArray(value)) {
+      const propertiesObj = value;
+      const sanitizedProps = {};
+      const keyMapping = {};
+      for (const [propKey, propValue] of Object.entries(propertiesObj)) {
+        const sanitizedKey = propKey.replace(/[^a-zA-Z0-9_-]/g, "_");
+        keyMapping[propKey] = sanitizedKey;
+        sanitizedProps[sanitizedKey] = sanitizeSchema(propValue);
+      }
+      sanitized[key] = sanitizedProps;
+      if ("required" in schemaObj && Array.isArray(schemaObj.required)) {
+        sanitized.required = schemaObj.required.map(
+          (req) => keyMapping[req] || req
+        );
+      }
+    } else {
+      sanitized[key] = sanitizeSchema(value);
+    }
+  }
+  return sanitized;
+};
+const mappedTools = (tools) => {
+  return tools.map((tool) => {
+    let inputSchema;
+    if (tool.input_schema) {
+      inputSchema = JSON.parse(JSON.stringify(tool.input_schema));
+    } else {
+      inputSchema = {
+        type: "object",
+        properties: {},
+        required: []
+      };
+    }
+    if (!inputSchema.type) {
+      inputSchema.type = "object";
+    }
+    if (inputSchema.type === "object" && !inputSchema.properties) {
+      inputSchema.properties = {};
+    }
+    const sanitizedSchema = sanitizeSchema(inputSchema);
+    return {
+      name: tool.name,
+      description: tool.description,
+      input_schema: sanitizedSchema
+    };
+  });
+};
 class MCPJamClient extends Client {
   constructor(serverConfig, config, addRequestHistory, bearerToken, headerName, onStdErrNotification, claudeApiKey, onPendingRequest, getRoots) {
     super(
@@ -41637,163 +42176,174 @@ class MCPJamClient extends Client {
   async setServerCapabilities(capabilities) {
     this.serverCapabilities = capabilities;
   }
-  async processQuery(query, tools) {
+  async processQuery(query, tools, onUpdate, model = "claude-3-5-sonnet-latest") {
     if (!this.anthropic) {
       throw new Error("Anthropic client not initialized");
     }
-    const messages = [
-      {
-        role: "user",
-        content: query
-      }
-    ];
-    const finalText = [];
-    const MAX_ITERATIONS = 5;
-    let iteration = 0;
-    const sanitizeSchema = (schema) => {
-      if (!schema || typeof schema !== "object") return schema;
-      if (Array.isArray(schema)) {
-        return schema.map((item) => sanitizeSchema(item));
-      }
-      const schemaObj = schema;
-      const sanitized = {};
-      for (const [key, value] of Object.entries(schemaObj)) {
-        if (key === "properties" && value && typeof value === "object" && !Array.isArray(value)) {
-          const propertiesObj = value;
-          const sanitizedProps = {};
-          const keyMapping = {};
-          for (const [propKey, propValue] of Object.entries(propertiesObj)) {
-            const sanitizedKey = propKey.replace(/[^a-zA-Z0-9_-]/g, "_");
-            keyMapping[propKey] = sanitizedKey;
-            sanitizedProps[sanitizedKey] = sanitizeSchema(propValue);
-          }
-          sanitized[key] = sanitizedProps;
-          if ("required" in schemaObj && Array.isArray(schemaObj.required)) {
-            sanitized.required = schemaObj.required.map(
-              (req) => keyMapping[req] || req
-            );
-          }
-        } else {
-          sanitized[key] = sanitizeSchema(value);
-        }
-      }
-      return sanitized;
+    const context = this.initializeQueryContext(query, tools, model);
+    const response = await this.makeInitialApiCall(context);
+    return this.processIterations(response, context, onUpdate);
+  }
+  initializeQueryContext(query, tools, model) {
+    return {
+      messages: [{ role: "user", content: query }],
+      finalText: [],
+      sanitizedTools: mappedTools(tools),
+      model,
+      MAX_ITERATIONS: 5
     };
-    const mappedTools = tools.map((tool) => {
-      let inputSchema;
-      if (tool.input_schema) {
-        inputSchema = JSON.parse(JSON.stringify(tool.input_schema));
-      } else {
-        inputSchema = {
-          type: "object",
-          properties: {},
-          required: []
-        };
-      }
-      if (!inputSchema.type) {
-        inputSchema.type = "object";
-      }
-      if (inputSchema.type === "object" && !inputSchema.properties) {
-        inputSchema.properties = {};
-      }
-      const sanitizedSchema = sanitizeSchema(inputSchema);
-      return {
-        name: tool.name,
-        description: tool.description,
-        input_schema: sanitizedSchema
-      };
-    });
-    let response = await this.anthropic.messages.create({
-      model: "claude-3-haiku-20240307",
+  }
+  async makeInitialApiCall(context) {
+    return this.anthropic.messages.create({
+      model: context.model,
       max_tokens: 1e3,
-      messages,
-      tools: mappedTools
+      messages: context.messages,
+      tools: context.sanitizedTools
     });
-    while (iteration < MAX_ITERATIONS) {
+  }
+  async processIterations(initialResponse, context, onUpdate) {
+    let response = initialResponse;
+    let iteration = 0;
+    while (iteration < context.MAX_ITERATIONS) {
       iteration++;
-      let hasToolUse = false;
-      const assistantContent = [];
-      for (const content of response.content) {
-        if (content.type === "text") {
-          finalText.push(content.text);
-          assistantContent.push(content);
-        } else if (content.type === "tool_use") {
-          hasToolUse = true;
-          assistantContent.push(content);
-          try {
-            const toolName = content.name;
-            const toolArgs = content.input;
-            const result = await this.callTool({
-              name: toolName,
-              arguments: toolArgs
-            });
-            finalText.push(
-              `[Calling tool ${toolName} with args ${JSON.stringify(toolArgs)}]`
-            );
-            if (assistantContent.length > 0) {
-              messages.push({
-                role: "assistant",
-                content: assistantContent
-              });
-            }
-            messages.push({
-              role: "user",
-              content: [
-                {
-                  type: "tool_result",
-                  tool_use_id: content.id,
-                  content: result.content
-                }
-              ]
-            });
-          } catch (error) {
-            console.error(`Tool ${content.name} failed:`, error);
-            finalText.push(`[Tool ${content.name} failed: ${error}]`);
-            messages.push({
-              role: "assistant",
-              content: assistantContent
-            });
-            messages.push({
-              role: "user",
-              content: [
-                {
-                  type: "tool_result",
-                  tool_use_id: content.id,
-                  content: `Error: ${error}`,
-                  is_error: true
-                }
-              ]
-            });
-          }
-        }
-      }
-      if (!hasToolUse) {
+      const iterationResult = await this.processIteration(response, context);
+      this.sendIterationUpdate(iterationResult.content, onUpdate);
+      if (!iterationResult.hasToolUse) {
         break;
       }
       try {
-        response = await this.anthropic.messages.create({
-          model: "claude-3-5-sonnet-20241022",
-          max_tokens: 1e3,
-          messages,
-          tools: mappedTools
-        });
+        response = await this.makeFollowUpApiCall(context);
       } catch (error) {
-        console.error("API call failed:", error);
-        finalText.push(`[API Error: ${error}]`);
+        const errorMessage = `[API Error: ${error}]`;
+        context.finalText.push(errorMessage);
+        this.sendIterationUpdate(errorMessage, onUpdate);
         break;
       }
     }
+    this.handleMaxIterationsWarning(iteration, context, onUpdate);
+    return context.finalText.join("\n");
+  }
+  async processIteration(response, context) {
+    const iterationContent = [];
+    const assistantContent = [];
+    let hasToolUse = false;
     for (const content of response.content) {
       if (content.type === "text") {
-        finalText.push(content.text);
+        this.handleTextContent(
+          content,
+          iterationContent,
+          context.finalText,
+          assistantContent
+        );
+      } else if (content.type === "tool_use") {
+        hasToolUse = true;
+        await this.handleToolUse(
+          content,
+          iterationContent,
+          context,
+          assistantContent
+        );
       }
     }
-    if (iteration >= MAX_ITERATIONS) {
-      finalText.push(
-        `[Warning: Reached maximum iterations (${MAX_ITERATIONS}). Stopping to prevent excessive API usage.]`
+    return {
+      content: iterationContent,
+      hasToolUse
+    };
+  }
+  handleTextContent(content, iterationContent, finalText, assistantContent) {
+    iterationContent.push(content.text);
+    finalText.push(content.text);
+    assistantContent.push(content);
+  }
+  async handleToolUse(content, iterationContent, context, assistantContent) {
+    assistantContent.push(content);
+    const toolMessage = this.createToolMessage(content.name, content.input);
+    iterationContent.push(toolMessage);
+    context.finalText.push(toolMessage);
+    try {
+      await this.executeToolAndUpdateMessages(
+        content,
+        context,
+        assistantContent
+      );
+    } catch (error) {
+      this.handleToolError(
+        error,
+        content,
+        iterationContent,
+        context,
+        assistantContent
       );
     }
-    return finalText.join("\n");
+  }
+  createToolMessage(toolName, toolArgs) {
+    return `[Calling tool ${toolName} with args ${JSON.stringify(toolArgs)}]`;
+  }
+  async executeToolAndUpdateMessages(content, context, assistantContent) {
+    const result = await this.callTool({
+      name: content.name,
+      arguments: content.input
+    });
+    this.addMessagesToContext(
+      context,
+      assistantContent,
+      content.id,
+      result.content
+    );
+  }
+  handleToolError(error, content, iterationContent, context, assistantContent) {
+    console.error(`Tool ${content.name} failed:`, error);
+    const errorMessage = `[Tool ${content.name} failed: ${error}]`;
+    iterationContent.push(errorMessage);
+    context.finalText.push(errorMessage);
+    this.addMessagesToContext(
+      context,
+      assistantContent,
+      content.id,
+      `Error: ${error}`,
+      true
+    );
+  }
+  addMessagesToContext(context, assistantContent, toolUseId, resultContent, isError = false) {
+    if (assistantContent.length > 0) {
+      context.messages.push({
+        role: "assistant",
+        content: assistantContent
+      });
+    }
+    context.messages.push({
+      role: "user",
+      content: [
+        {
+          type: "tool_result",
+          tool_use_id: toolUseId,
+          content: resultContent,
+          ...isError && { is_error: true }
+        }
+      ]
+    });
+  }
+  async makeFollowUpApiCall(context) {
+    return this.anthropic.messages.create({
+      model: context.model,
+      max_tokens: 1e3,
+      messages: context.messages,
+      tools: context.sanitizedTools
+    });
+  }
+  sendIterationUpdate(content, onUpdate) {
+    if (!onUpdate) return;
+    const message = Array.isArray(content) ? content.join("\n") : content;
+    if (message.length > 0) {
+      onUpdate(message);
+    }
+  }
+  handleMaxIterationsWarning(iteration, context, onUpdate) {
+    if (iteration >= context.MAX_ITERATIONS) {
+      const warningMessage = `[Warning: Reached maximum iterations (${context.MAX_ITERATIONS}). Stopping to prevent excessive API usage.]`;
+      context.finalText.push(warningMessage);
+      this.sendIterationUpdate(warningMessage, onUpdate);
+    }
   }
   async chatLoop(tools) {
     const rl = readline.createInterface({
@@ -42692,6 +43242,9 @@ const useMCPOperations = () => {
   const getRequestHistory = reactExports.useCallback(() => {
     return requestHistory;
   }, [requestHistory]);
+  const clearRequestHistory = reactExports.useCallback(() => {
+    setRequestHistory([]);
+  }, []);
   return {
     // State
     resources,
@@ -42751,7 +43304,8 @@ const useMCPOperations = () => {
     handleApproveSampling,
     handleRejectSampling,
     addRequestHistory,
-    getRequestHistory
+    getRequestHistory,
+    clearRequestHistory
   };
 };
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
@@ -42781,10 +43335,6 @@ const useConfigState = () => {
     }
     return "";
   });
-  const [currentPage, setCurrentPage] = reactExports.useState(() => {
-    const hash = window.location.hash.slice(1);
-    return hash || "tools";
-  });
   const [authState, setAuthState] = reactExports.useState({
     isInitiatingAuth: false,
     oauthTokens: null,
@@ -42822,16 +43372,6 @@ const useConfigState = () => {
   reactExports.useEffect(() => {
     localStorage.setItem("lastHeaderName", headerName);
   }, [headerName]);
-  reactExports.useEffect(() => {
-    const handleHashChange = () => {
-      const hash = window.location.hash.slice(1);
-      if (hash) {
-        setCurrentPage(hash);
-      }
-    };
-    window.addEventListener("hashchange", handleHashChange);
-    return () => window.removeEventListener("hashchange", handleHashChange);
-  }, []);
   reactExports.useEffect(() => {
     if (!window.location.hash) {
       window.location.hash = "tools";
@@ -42846,8 +43386,6 @@ const useConfigState = () => {
     setHeaderName,
     claudeApiKey,
     updateClaudeApiKey,
-    currentPage,
-    setCurrentPage,
     authState,
     updateAuthState,
     validateClaudeApiKey
@@ -42901,6 +43439,21 @@ const App = () => {
   const configState = useConfigState();
   const rootsRef = reactExports.useRef(mcpOperations.roots);
   const nextRequestId = reactExports.useRef(0);
+  const [currentPage, setCurrentPage] = reactExports.useState(() => {
+    const hash = window.location.hash.slice(1);
+    return hash || "tools";
+  });
+  const [isSidebarExpanded, setIsSidebarExpanded] = reactExports.useState(true);
+  reactExports.useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1);
+      if (hash) {
+        setCurrentPage(hash);
+      }
+    };
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, []);
   const onStdErrNotification = reactExports.useCallback(
     (notification) => {
       mcpOperations.setStdErrNotifications((prev) => [...prev, notification]);
@@ -43255,7 +43808,7 @@ const App = () => {
   }, []);
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-Bn78Q1TF.js"), true ? __vite__mapDeps([0,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthCallback-B9WXxW14.js"), true ? __vite__mapDeps([0,1]) : 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,
@@ -43270,7 +43823,7 @@ const App = () => {
   }
   if (window.location.pathname === "/oauth/callback/debug") {
     const OAuthDebugCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthDebugCallback-BqpNnC48.js"), true ? __vite__mapDeps([2,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthDebugCallback-Dypsoomr.js"), true ? __vite__mapDeps([2,1]) : 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,
@@ -43339,7 +43892,7 @@ const App = () => {
     };
     const renderCurrentPage = () => {
       var _a3;
-      switch (configState.currentPage) {
+      switch (currentPage) {
         case "resources":
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             ResourcesTab,
@@ -43530,19 +44083,13 @@ const App = () => {
                 const currentConfig = serverState.serverConfigs[serverState.selectedServerName];
                 return currentConfig && "url" in currentConfig && currentConfig.url ? currentConfig.url.toString() : "";
               })(),
-              onBack: () => configState.setCurrentPage("resources"),
+              onBack: () => setCurrentPage("resources"),
               authState: configState.authState,
               updateAuthState: configState.updateAuthState
             }
           );
         case "settings":
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(
-            SettingsTab,
-            {
-              onApiKeyChange: handleApiKeyChange,
-              disabled: connectionStatus !== "connected" && connectionStatus !== "disconnected"
-            }
-          );
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsTab, { onApiKeyChange: handleApiKeyChange });
         default:
           return null;
       }
@@ -43561,15 +44108,17 @@ const App = () => {
         onDisconnectServer: connectionState.disconnectServer,
         onCreateClient: serverState.handleCreateClient,
         onEditClient: handleEditClient,
-        updateTrigger: connectionState.sidebarUpdateTrigger
+        updateTrigger: connectionState.sidebarUpdateTrigger,
+        isExpanded: isSidebarExpanded,
+        onToggleExpanded: () => setIsSidebarExpanded(!isSidebarExpanded)
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Tabs,
         {
-          currentPage: configState.currentPage,
-          onPageChange: configState.setCurrentPage,
+          currentPage,
+          onPageChange: setCurrentPage,
           serverCapabilities,
           pendingSampleRequests: mcpOperations.pendingSampleRequests,
           shouldDisableAll: !connectionState.mcpAgent
@@ -43580,7 +44129,8 @@ const App = () => {
         HistoryAndNotifications,
         {
           requestHistory,
-          toolResult: mcpOperations.toolResult
+          toolResult: mcpOperations.toolResult,
+          onClearHistory: mcpOperations.clearRequestHistory
         }
       )
     ] })