@mcpjam/inspector 0.1.4 → 0.1.6

package/client/dist/assets/{index-Be9LHGhj.js → index-CV_1RAbM.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-6y8mD7ke.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-B8mHfUnK.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-CBw5QXWv.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-wx6FGFG4.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);
@@ -23935,7 +23935,7 @@ class DebugInspectorOAuthClientProvider extends InspectorOAuthClientProvider {
     );
   }
 }
-const version$1 = "0.1.4";
+const version$1 = "0.1.6";
 const packageJson = {
   version: version$1
 };
@@ -27933,7 +27933,9 @@ function useConnection({
               const propertiesObj = value;
               const sanitizedProps = {};
               const keyMapping = {};
-              for (const [propKey, propValue] of Object.entries(propertiesObj)) {
+              for (const [propKey, propValue] of Object.entries(
+                propertiesObj
+              )) {
                 const sanitizedKey = propKey.replace(/[^a-zA-Z0-9_-]/g, "_");
                 keyMapping[propKey] = sanitizedKey;
                 sanitizedProps[sanitizedKey] = sanitizeSchema(propValue);
@@ -28060,7 +28062,9 @@ function useConnection({
           }
         }
         if (iteration >= MAX_ITERATIONS) {
-          finalText.push(`[Warning: Reached maximum iterations (${MAX_ITERATIONS}). Stopping to prevent excessive API usage.]`);
+          finalText.push(
+            `[Warning: Reached maximum iterations (${MAX_ITERATIONS}). Stopping to prevent excessive API usage.]`
+          );
         }
         return finalText.join("\n");
       }
@@ -28359,6 +28363,15 @@ const Bell = createLucideIcon("Bell", [
   ["path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9", key: "1qo2s2" }],
   ["path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0", key: "qgo35s" }]
 ]);
+/**
+ * @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 Bookmark = createLucideIcon("Bookmark", [
+  ["path", { d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z", key: "1fy3hk" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -28373,6 +28386,18 @@ const Bot = createLucideIcon("Bot", [
   ["path", { d: "M15 13v2", key: "1xurst" }],
   ["path", { d: "M9 13v2", key: "rq6x2g" }]
 ]);
+/**
+ * @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 Calendar = createLucideIcon("Calendar", [
+  ["path", { d: "M8 2v4", key: "1cmpym" }],
+  ["path", { d: "M16 2v4", key: "4m81vk" }],
+  ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
+  ["path", { d: "M3 10h18", key: "8toen8" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -28665,6 +28690,21 @@ const MessageSquare = createLucideIcon("MessageSquare", [
  * See the LICENSE file in the root directory of this source tree.
  */
 const Minus = createLucideIcon("Minus", [["path", { d: "M5 12h14", key: "1ays0h" }]]);
+/**
+ * @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 Pen = createLucideIcon("Pen", [
+  [
+    "path",
+    {
+      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+      key: "1a8usu"
+    }
+  ]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -28788,6 +28828,34 @@ const Settings = createLucideIcon("Settings", [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ]);
+/**
+ * @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 Star = createLucideIcon("Star", [
+  [
+    "polygon",
+    {
+      points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2",
+      key: "8f66p6"
+    }
+  ]
+]);
+/**
+ * @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 Trash2 = createLucideIcon("Trash2", [
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
+  ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
+  ["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
  *
@@ -28798,6 +28866,16 @@ const User = createLucideIcon("User", [
   ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
   ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
 ]);
+/**
+ * @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 X$1 = createLucideIcon("X", [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+]);
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
@@ -29737,7 +29815,7 @@ const HistoryAndNotifications = ({
   toolResult
 }) => {
   const [expandedRequests, setExpandedRequests] = reactExports.useState({});
-  const [isHistoryCollapsed, setIsHistoryCollapsed] = reactExports.useState(false);
+  const [isHistoryCollapsed, setIsHistoryCollapsed] = reactExports.useState(true);
   const {
     height: historyPaneHeight,
     handleDragStart,
@@ -34305,6 +34383,23 @@ const Label$1 = reactExports.forwardRef(({ className, ...props }, ref2) => /* @_
   }
 ));
 Label$1.displayName = Root.displayName;
+const Input = reactExports.forwardRef(
+  ({ className, type: type2, ...props }, ref2) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        type: type2,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref: ref2,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 const ListPane = ({
   items: items2,
   listItems,
@@ -34312,43 +34407,97 @@ const ListPane = ({
   setSelectedItem,
   renderItem,
   title: title2,
-  isButtonDisabled
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card rounded-lg shadow", children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold dark:text-white", children: title2 }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [
+  isButtonDisabled,
+  searchKey,
+  searchPlaceholder = "Search...",
+  buttonText = "Load Items"
+}) => {
+  const [searchTerm, setSearchTerm] = reactExports.useState("");
+  const filteredItems = reactExports.useMemo(() => {
+    if (!searchTerm.trim()) return items2;
+    return items2.filter((item) => {
+      if (searchKey && item[searchKey]) {
+        const value = item[searchKey];
+        return String(value).toLowerCase().includes(searchTerm.toLowerCase());
+      } else {
+        return Object.values(item).some(
+          (value) => String(value).toLowerCase().includes(searchTerm.toLowerCase())
+        );
+      }
+    });
+  }, [items2, searchTerm, searchKey]);
+  const handleClearItems = () => {
+    clearItems();
+    setSearchTerm("");
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card rounded-lg shadow", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold dark:text-white", children: title2 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            variant: "outline",
+            onClick: listItems,
+            disabled: isButtonDisabled,
+            className: "h-7 px-2 text-xs",
+            children: buttonText
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            variant: "outline",
+            onClick: handleClearItems,
+            disabled: items2.length === 0,
+            className: "h-7 px-2 text-xs",
+            children: "Clear"
+          }
+        )
+      ] })
+    ] }),
+    items2.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
+        Input,
         {
-          variant: "outline",
-          onClick: listItems,
-          disabled: isButtonDisabled,
-          className: "h-7 px-2 text-xs",
-          children: "Load Tools"
+          type: "text",
+          placeholder: searchPlaceholder,
+          value: searchTerm,
+          onChange: (e) => setSearchTerm(e.target.value),
+          className: "h-8 text-sm"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          variant: "outline",
-          onClick: clearItems,
-          disabled: items2.length === 0,
-          className: "h-7 px-2 text-xs",
-          children: "Clear"
-        }
-      )
-    ] })
-  ] }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 overflow-y-auto max-h-96", children: items2.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      className: "cursor-pointer",
-      onClick: () => setSelectedItem(item),
-      children: renderItem(item)
-    },
-    index2
-  )) }) })
-] });
+      searchTerm && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-2", children: [
+        "Showing ",
+        filteredItems.length,
+        " of ",
+        items2.length,
+        " items"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 overflow-y-auto max-h-96", children: filteredItems.length > 0 ? filteredItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "cursor-pointer",
+        onClick: () => setSelectedItem(item),
+        children: renderItem(item)
+      },
+      index2
+    )) : searchTerm ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm", children: [
+      'No items found matching "',
+      searchTerm,
+      '"'
+    ] }) }) : filteredItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "cursor-pointer",
+        onClick: () => setSelectedItem(item),
+        children: renderItem(item)
+      },
+      index2
+    )) }) })
+  ] });
+};
 function debounce(func, wait) {
   let timeout;
   return (...args) => {
@@ -34491,7 +34640,8 @@ const PromptsTab = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500", children: prompt.description })
         ] }),
         title: "Prompts",
-        isButtonDisabled: !nextCursor && prompts.length > 0
+        isButtonDisabled: !nextCursor && prompts.length > 0,
+        buttonText: "Load Prompts"
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card rounded-lg shadow", children: [
@@ -34605,7 +34755,8 @@ const ResourcesTab = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 flex-shrink-0 text-gray-400" })
         ] }),
         title: "Resources",
-        isButtonDisabled: !nextCursor && resources.length > 0
+        isButtonDisabled: !nextCursor && resources.length > 0,
+        buttonText: "Load Resources"
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -34631,7 +34782,8 @@ const ResourcesTab = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 flex-shrink-0 text-gray-400" })
         ] }),
         title: "Resource Templates",
-        isButtonDisabled: !nextTemplateCursor && resourceTemplates.length > 0
+        isButtonDisabled: !nextTemplateCursor && resourceTemplates.length > 0,
+        buttonText: "Load Templates"
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card rounded-lg shadow", children: [
@@ -34718,23 +34870,6 @@ const ResourcesTab = ({
     ] })
   ] });
 };
-const Input = reactExports.forwardRef(
-  ({ className, type: type2, ...props }, ref2) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "input",
-      {
-        type: type2,
-        className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref: ref2,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
 const RootsTab = ({
   roots,
   setRoots,
@@ -36724,7 +36859,7 @@ const JsonEditor = ({
   ] });
 };
 function generateDefaultValue(schema) {
-  if ("default" in schema) {
+  if ("default" in schema && schema.default !== void 0) {
     return schema.default;
   }
   if (!schema.required) {
@@ -37440,18 +37575,291 @@ const Textarea = reactExports.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-const ToolRunCard = ({ selectedTool, callTool: callTool2 }) => {
+function generateRequestId() {
+  return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+function createMcpJamRequest(input) {
+  const now = /* @__PURE__ */ new Date();
+  return {
+    id: generateRequestId(),
+    name: input.name,
+    description: input.description,
+    toolName: input.toolName,
+    tool: input.tool,
+    parameters: input.parameters,
+    createdAt: now,
+    updatedAt: now,
+    tags: input.tags || [],
+    isFavorite: input.isFavorite || false
+  };
+}
+function generateDefaultRequestName(tool, parameters) {
+  const toolName = tool.name;
+  const meaningfulParams = Object.entries(parameters).filter(
+    ([, value]) => value && typeof value === "string" && value.length > 0
+  ).slice(0, 1);
+  if (meaningfulParams.length > 0) {
+    const [, paramValue] = meaningfulParams[0];
+    const shortValue = String(paramValue).slice(0, 30);
+    return `${toolName} - ${shortValue}${String(paramValue).length > 30 ? "..." : ""}`;
+  }
+  return `${toolName} Request`;
+}
+function exportRequestCollection(requests) {
+  return {
+    requests,
+    version: "1.0.0",
+    exportedAt: /* @__PURE__ */ new Date()
+  };
+}
+function importRequestCollection(data2) {
+  return data2.requests.map((request) => ({
+    ...request,
+    createdAt: new Date(request.createdAt),
+    updatedAt: new Date(request.updatedAt)
+  }));
+}
+function sortRequests(requests, sortBy, order = "desc") {
+  return [...requests].sort((a, b) => {
+    let comparison = 0;
+    switch (sortBy) {
+      case "name":
+        comparison = a.name.localeCompare(b.name);
+        break;
+      case "toolName":
+        comparison = a.toolName.localeCompare(b.toolName);
+        break;
+      case "createdAt":
+        comparison = a.createdAt.getTime() - b.createdAt.getTime();
+        break;
+      case "updatedAt":
+        comparison = a.updatedAt.getTime() - b.updatedAt.getTime();
+        break;
+    }
+    return order === "asc" ? comparison : -comparison;
+  });
+}
+const STORAGE_KEY$1 = "mcpjam_saved_requests";
+class RequestStorage {
+  /**
+   * Loads all saved requests from localStorage
+   */
+  static loadRequests() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY$1);
+      if (!stored) return [];
+      const data2 = JSON.parse(stored);
+      return importRequestCollection(data2);
+    } catch (error) {
+      console.error("Failed to load saved requests:", error);
+      return [];
+    }
+  }
+  /**
+   * Saves all requests to localStorage
+   */
+  static saveRequests(requests) {
+    try {
+      const collection = exportRequestCollection(requests);
+      localStorage.setItem(STORAGE_KEY$1, JSON.stringify(collection));
+    } catch (error) {
+      console.error("Failed to save requests:", error);
+      throw new Error("Failed to save requests to storage");
+    }
+  }
+  /**
+   * Adds a new request to storage
+   */
+  static addRequest(request) {
+    const existing = this.loadRequests();
+    const updated = [...existing, request];
+    this.saveRequests(updated);
+  }
+  /**
+   * Updates an existing request in storage
+   */
+  static updateRequest(requestId, updates) {
+    const existing = this.loadRequests();
+    const index2 = existing.findIndex((r2) => r2.id === requestId);
+    if (index2 === -1) {
+      throw new Error(`Request with ID ${requestId} not found`);
+    }
+    existing[index2] = { ...existing[index2], ...updates, updatedAt: /* @__PURE__ */ new Date() };
+    this.saveRequests(existing);
+  }
+  /**
+   * Removes a request from storage
+   */
+  static removeRequest(requestId) {
+    const existing = this.loadRequests();
+    const filtered = existing.filter((r2) => r2.id !== requestId);
+    this.saveRequests(filtered);
+  }
+  /**
+   * Gets a specific request by ID
+   */
+  static getRequest(requestId) {
+    const requests = this.loadRequests();
+    return requests.find((r2) => r2.id === requestId) || null;
+  }
+  /**
+   * Checks if a request with the given ID exists
+   */
+  static hasRequest(requestId) {
+    return this.getRequest(requestId) !== null;
+  }
+  /**
+   * Clears all saved requests
+   */
+  static clearAll() {
+    localStorage.removeItem(STORAGE_KEY$1);
+  }
+  /**
+   * Exports all requests as a JSON string for backup/sharing
+   */
+  static exportToJson() {
+    const requests = this.loadRequests();
+    const collection = exportRequestCollection(requests);
+    return JSON.stringify(collection, null, 2);
+  }
+  /**
+   * Imports requests from a JSON string (merges with existing)
+   */
+  static importFromJson(jsonString, merge = true) {
+    try {
+      const data2 = JSON.parse(jsonString);
+      const importedRequests = importRequestCollection(data2);
+      if (merge) {
+        const existing = this.loadRequests();
+        const existingIds = new Set(existing.map((r2) => r2.id));
+        const newRequests = importedRequests.filter(
+          (r2) => !existingIds.has(r2.id)
+        );
+        const merged = [...existing, ...newRequests];
+        this.saveRequests(merged);
+      } else {
+        this.saveRequests(importedRequests);
+      }
+    } catch (error) {
+      console.error("Failed to import requests:", error);
+      throw new Error("Invalid JSON format or corrupted data");
+    }
+  }
+  /**
+   * Gets storage statistics
+   */
+  static getStats() {
+    const requests = this.loadRequests();
+    const stored = localStorage.getItem(STORAGE_KEY$1);
+    const toolCounts = {};
+    let favoriteCount = 0;
+    for (const request of requests) {
+      if (request.isFavorite) favoriteCount++;
+      toolCounts[request.toolName] = (toolCounts[request.toolName] || 0) + 1;
+    }
+    return {
+      totalRequests: requests.length,
+      totalSize: stored ? new Blob([stored]).size : 0,
+      favoriteCount,
+      toolCounts
+    };
+  }
+}
+const ToolRunCard = ({
+  selectedTool,
+  callTool: callTool2,
+  loadedRequest
+}) => {
   const [params, setParams] = reactExports.useState({});
   const [isToolRunning, setIsToolRunning] = reactExports.useState(false);
+  const [showSaveDialog, setShowSaveDialog] = reactExports.useState(false);
+  const [saveRequestName, setSaveRequestName] = reactExports.useState("");
+  const [saveRequestDescription, setSaveRequestDescription] = reactExports.useState("");
+  const [isSaving, setIsSaving] = reactExports.useState(false);
+  const [paramsInitialized, setParamsInitialized] = reactExports.useState(false);
+  const [currentRequestId, setCurrentRequestId] = reactExports.useState(null);
   reactExports.useEffect(() => {
-    const params2 = Object.entries(
-      (selectedTool == null ? void 0 : selectedTool.inputSchema.properties) ?? []
-    ).map(([key, value]) => [
-      key,
-      generateDefaultValue(value)
-    ]);
-    setParams(Object.fromEntries(params2));
-  }, [selectedTool]);
+    setParamsInitialized(false);
+    setCurrentRequestId(null);
+  }, [selectedTool == null ? void 0 : selectedTool.name]);
+  reactExports.useEffect(() => {
+    if (loadedRequest && selectedTool && loadedRequest.toolName === selectedTool.name) {
+      setParams(loadedRequest.parameters);
+      setParamsInitialized(true);
+      setCurrentRequestId(loadedRequest.id);
+    } else if (selectedTool && !paramsInitialized) {
+      const params2 = Object.entries(
+        (selectedTool == null ? void 0 : selectedTool.inputSchema.properties) ?? []
+      ).map(([key, value]) => {
+        const defaultValue = generateDefaultValue(value);
+        return [key, defaultValue];
+      });
+      const paramsObject = Object.fromEntries(params2);
+      setParams(paramsObject);
+      setParamsInitialized(true);
+      setCurrentRequestId(null);
+    }
+  }, [selectedTool, loadedRequest, paramsInitialized]);
+  const handleSaveRequest = async () => {
+    if (!selectedTool) return;
+    try {
+      setIsSaving(true);
+      if (currentRequestId) {
+        const updateInput = {
+          parameters: params
+        };
+        if (saveRequestName.trim()) {
+          updateInput.name = saveRequestName;
+        }
+        if (saveRequestDescription.trim()) {
+          updateInput.description = saveRequestDescription;
+        }
+        RequestStorage.updateRequest(currentRequestId, updateInput);
+      } else {
+        const requestInput = {
+          name: saveRequestName || generateDefaultRequestName(
+            selectedTool,
+            params
+          ),
+          description: saveRequestDescription,
+          toolName: selectedTool.name,
+          tool: selectedTool,
+          parameters: params,
+          tags: [],
+          isFavorite: false
+        };
+        const request = createMcpJamRequest(requestInput);
+        RequestStorage.addRequest(request);
+        setCurrentRequestId(request.id);
+      }
+      setShowSaveDialog(false);
+      setSaveRequestName("");
+      setSaveRequestDescription("");
+      window.dispatchEvent(new CustomEvent("requestSaved"));
+    } catch (error) {
+      console.error("Failed to save request:", error);
+      alert("Failed to save request. Please try again.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const openSaveDialog = () => {
+    if (!selectedTool) return;
+    if (currentRequestId && loadedRequest) {
+      setSaveRequestName(loadedRequest.name);
+      setSaveRequestDescription(loadedRequest.description || "");
+    } else {
+      setSaveRequestName(
+        generateDefaultRequestName(
+          selectedTool,
+          params
+        )
+      );
+      setSaveRequestDescription("");
+    }
+    setShowSaveDialog(true);
+  };
+  const isUpdatingExistingRequest = currentRequestId !== null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gradient-to-br from-card/95 via-card to-card/95 backdrop-blur-sm rounded-xl shadow-lg border border-border/40 overflow-hidden transition-all duration-300 hover:shadow-xl hover:border-border/60", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-r from-muted/50 via-muted/30 to-muted/50 backdrop-blur-sm p-3 border-b border-border/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "font-mono text-sm bg-gradient-to-r from-secondary/70 to-secondary/50 px-3 py-1.5 rounded-lg border border-border/30 text-foreground font-semibold shadow-sm inline-block", children: selectedTool ? selectedTool.name : "Select a tool" }),
@@ -37532,11 +37940,28 @@ const ToolRunCard = ({ selectedTool, callTool: callTool2 }) => {
                 id: key,
                 name: key,
                 placeholder: prop.description || `Enter ${key}...`,
-                value: params[key] ?? "",
-                onChange: (e) => setParams({
-                  ...params,
-                  [key]: Number(e.target.value)
-                }),
+                value: params[key] !== void 0 && params[key] !== null ? String(params[key]) : "",
+                onChange: (e) => {
+                  const value2 = e.target.value;
+                  let newParams;
+                  if (value2 === "") {
+                    newParams = {
+                      ...params,
+                      [key]: void 0
+                    };
+                  } else {
+                    const numValue = Number(value2);
+                    if (!isNaN(numValue)) {
+                      newParams = {
+                        ...params,
+                        [key]: numValue
+                      };
+                    } else {
+                      return;
+                    }
+                  }
+                  setParams(newParams);
+                },
                 className: "font-mono text-xs bg-gradient-to-br from-background/80 to-background/60 border-border/40 rounded-lg focus:border-primary/50 focus:ring-1 focus:ring-primary/20 transition-all duration-200 h-8"
               }
             ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-br from-background/80 to-background/60 border border-border/40 rounded-lg p-2.5 hover:border-border/60 transition-all duration-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -37560,28 +37985,111 @@ const ToolRunCard = ({ selectedTool, callTool: callTool2 }) => {
           ] }, key);
         }) })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-2 border-t border-border/20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          onClick: async () => {
-            try {
-              setIsToolRunning(true);
-              await callTool2(selectedTool.name, params);
-            } finally {
-              setIsToolRunning(false);
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pt-2 border-t border-border/20 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              onClick: openSaveDialog,
+              variant: "outline",
+              className: "flex-1 h-8 bg-gradient-to-r from-secondary/20 to-secondary/10 hover:from-secondary/30 hover:to-secondary/20 text-foreground font-medium rounded-lg border-border/40 hover:border-border/60 transition-all duration-300 text-xs",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-3.5 h-3.5 mr-2" }),
+                isUpdatingExistingRequest ? "Update Request" : "Save Request"
+              ]
             }
-          },
-          disabled: isToolRunning,
-          className: "w-full h-8 bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary/80 text-primary-foreground font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-[1.01] active:scale-[0.99] text-xs",
-          children: isToolRunning ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "w-3.5 h-3.5 mr-2 animate-spin" }),
-            "Executing..."
-          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-3.5 h-3.5 mr-2" }),
-            "Run Tool"
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              onClick: async () => {
+                try {
+                  setIsToolRunning(true);
+                  await callTool2(selectedTool.name, params);
+                } finally {
+                  setIsToolRunning(false);
+                }
+              },
+              disabled: isToolRunning,
+              className: "flex-1 h-8 bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary/80 text-primary-foreground font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-[1.01] active:scale-[0.99] text-xs",
+              children: isToolRunning ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "w-3.5 h-3.5 mr-2 animate-spin" }),
+                "Executing..."
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-3.5 h-3.5 mr-2" }),
+                "Run Tool"
+              ] })
+            }
+          )
+        ] }),
+        showSaveDialog && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card border border-border rounded-xl shadow-xl p-4 w-full max-w-md mx-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-foreground", children: isUpdatingExistingRequest ? "Update Request" : "Save Request" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                onClick: () => setShowSaveDialog(false),
+                variant: "ghost",
+                size: "sm",
+                className: "h-6 w-6 p-0 hover:bg-muted",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "w-3.5 h-3.5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-muted-foreground mb-1 block", children: "Request Name" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Input,
+                {
+                  value: saveRequestName,
+                  onChange: (e) => setSaveRequestName(e.target.value),
+                  placeholder: "Enter request name...",
+                  className: "text-xs h-8"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs font-medium text-muted-foreground mb-1 block", children: "Description (optional)" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Textarea,
+                {
+                  value: saveRequestDescription,
+                  onChange: (e) => setSaveRequestDescription(e.target.value),
+                  placeholder: "Enter description...",
+                  className: "text-xs min-h-[60px] resize-none"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-2 pt-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  onClick: () => setShowSaveDialog(false),
+                  variant: "outline",
+                  className: "flex-1 h-8 text-xs",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  onClick: handleSaveRequest,
+                  disabled: isSaving,
+                  className: "flex-1 h-8 text-xs",
+                  children: isSaving ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "w-3.5 h-3.5 mr-2 animate-spin" }),
+                    isUpdatingExistingRequest ? "Updating..." : "Saving..."
+                  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "w-3.5 h-3.5 mr-2" }),
+                    isUpdatingExistingRequest ? "Update" : "Save"
+                  ] })
+                }
+              )
+            ] })
           ] })
-        }
-      ) })
+        ] }) })
+      ] })
     ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-6 text-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-xl bg-gradient-to-br from-muted/30 to-muted/50 flex items-center justify-center mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CodeXml, { className: "w-5 h-5 text-muted-foreground/60" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold text-foreground mb-1", children: "Ready to Execute" }),
@@ -37597,13 +38105,24 @@ const ToolsTab = ({
   selectedTool,
   setSelectedTool,
   nextCursor,
-  connectionStatus
+  connectionStatus,
+  loadedRequest
 }) => {
   reactExports.useEffect(() => {
     if (connectionStatus === "connected") {
       listTools2();
     }
   }, [connectionStatus]);
+  reactExports.useEffect(() => {
+    if (loadedRequest && tools.length > 0) {
+      const matchingTool = tools.find(
+        (tool) => tool.name === loadedRequest.toolName
+      );
+      if (matchingTool) {
+        setSelectedTool(matchingTool);
+      }
+    }
+  }, [loadedRequest, tools, setSelectedTool]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ListPane,
@@ -37633,10 +38152,20 @@ const ToolsTab = ({
           ] }) });
         },
         title: "Tools",
-        isButtonDisabled: !nextCursor && tools.length > 0
+        isButtonDisabled: !nextCursor && tools.length > 0,
+        searchKey: "name",
+        searchPlaceholder: "Search tools by name...",
+        buttonText: "Load Tools"
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ToolRunCard, { selectedTool, callTool: callTool2 })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ToolRunCard,
+      {
+        selectedTool,
+        callTool: callTool2,
+        loadedRequest
+      }
+    )
   ] });
 };
 const McpClientContext = reactExports.createContext(null);
@@ -39165,19 +39694,88 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version = "0.1.4";
-const Sidebar = ({
-  currentPage,
-  onPageChange,
-  serverCapabilities,
-  pendingSampleRequests,
-  shouldDisableAll
-}) => {
+const version = "0.1.6";
+const Sidebar = ({ onPageChange, onLoadRequest }) => {
   const [theme, setTheme] = useTheme();
+  const [savedRequests, setSavedRequests] = reactExports.useState([]);
+  const [renamingRequestId, setRenamingRequestId] = reactExports.useState(
+    null
+  );
+  const [renameValue, setRenameValue] = reactExports.useState("");
+  reactExports.useEffect(() => {
+    const loadSavedRequests = () => {
+      const requests = RequestStorage.loadRequests();
+      const sortedRequests = sortRequests(requests, "updatedAt", "desc");
+      setSavedRequests(sortedRequests);
+    };
+    loadSavedRequests();
+    const handleStorageChange = () => {
+      loadSavedRequests();
+    };
+    window.addEventListener("storage", handleStorageChange);
+    window.addEventListener("requestSaved", handleStorageChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener("requestSaved", handleStorageChange);
+    };
+  }, []);
   const handlePageChange = (page) => {
     onPageChange(page);
     window.location.hash = page;
   };
+  const handleDeleteRequest = (requestId) => {
+    if (confirm("Are you sure you want to delete this saved request?")) {
+      RequestStorage.removeRequest(requestId);
+      setSavedRequests((prev) => prev.filter((req) => req.id !== requestId));
+    }
+  };
+  const handleLoadRequest = (request) => {
+    if (onLoadRequest) {
+      onLoadRequest(request);
+      handlePageChange("tools");
+    }
+  };
+  const handleRenameRequest = (requestId, currentName) => {
+    setRenamingRequestId(requestId);
+    setRenameValue(currentName);
+  };
+  const handleSaveRename = (requestId) => {
+    if (renameValue.trim()) {
+      RequestStorage.updateRequest(requestId, { name: renameValue.trim() });
+      setSavedRequests(
+        (prev) => prev.map(
+          (req) => req.id === requestId ? { ...req, name: renameValue.trim() } : req
+        )
+      );
+    }
+    setRenamingRequestId(null);
+    setRenameValue("");
+  };
+  const handleCancelRename = () => {
+    setRenamingRequestId(null);
+    setRenameValue("");
+  };
+  const handleDuplicateRequest = (request) => {
+    const duplicatedRequest = createMcpJamRequest({
+      name: `${request.name} (Copy)`,
+      description: request.description,
+      toolName: request.toolName,
+      tool: request.tool,
+      parameters: request.parameters,
+      tags: request.tags || [],
+      isFavorite: false
+    });
+    RequestStorage.addRequest(duplicatedRequest);
+    setSavedRequests((prev) => [duplicatedRequest, ...prev]);
+  };
+  const formatDate = (date) => {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    }).format(date);
+  };
   const getLogoSrc = () => {
     if (theme === "dark") {
       return "/mcp_jam_dark.png";
@@ -39188,19 +39786,154 @@ const Sidebar = ({
       return isDarkMode ? "/mcp_jam_dark.png" : "/mcp_jam_light.png";
     }
   };
+  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",
+        {
+          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
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col min-h-0", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 border-b border-border/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Bookmark, { className: "w-4 h-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-foreground", children: "Saved Requests" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: savedRequests.length })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-2", children: savedRequests.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-8", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Bookmark, { className: "w-8 h-8 text-muted-foreground/50 mx-auto mb-2" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "No saved requests" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground/70 mt-1", children: "Save requests from the Tools tab" })
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: savedRequests.map((request) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "group bg-muted/30 hover:bg-muted/50 border border-border/30 rounded-lg p-2.5 transition-all duration-200 cursor-pointer",
+          onClick: () => renamingRequestId !== request.id && handleLoadRequest(request),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between mb-1.5", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
+                renamingRequestId === request.id ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Input,
+                  {
+                    value: renameValue,
+                    onChange: (e) => setRenameValue(e.target.value),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") {
+                        handleSaveRename(request.id);
+                      } else if (e.key === "Escape") {
+                        handleCancelRename();
+                      }
+                    },
+                    onBlur: () => handleSaveRename(request.id),
+                    className: "text-xs h-6 font-medium",
+                    autoFocus: true,
+                    onClick: (e) => e.stopPropagation()
+                  }
+                ) : /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-xs font-medium text-foreground truncate", children: request.name }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground font-mono", children: request.toolName })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-1", children: [
+                request.isFavorite && /* @__PURE__ */ jsxRuntimeExports.jsx(Star, { className: "w-3 h-3 text-yellow-500 fill-current" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleRenameRequest(request.id, request.name);
+                    },
+                    size: "sm",
+                    variant: "ghost",
+                    className: "h-6 w-6 p-0 hover:bg-primary/20 hover:text-primary opacity-0 group-hover:opacity-100 transition-opacity",
+                    title: "Rename request",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { className: "w-3 h-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleDuplicateRequest(request);
+                    },
+                    size: "sm",
+                    variant: "ghost",
+                    className: "h-6 w-6 p-0 hover:bg-blue-500/20 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity",
+                    title: "Duplicate request",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-3 h-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleDeleteRequest(request.id);
+                    },
+                    size: "sm",
+                    variant: "ghost",
+                    className: "h-6 w-6 p-0 hover:bg-destructive/20 hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity",
+                    title: "Delete request",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-3 h-3" })
+                  }
+                )
+              ] })
+            ] }),
+            request.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground/80 mb-1.5 line-clamp-2", children: request.description }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground/70", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: "w-3 h-3" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formatDate(request.updatedAt) })
+              ] }),
+              request.isFavorite && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-yellow-500", children: "★" })
+            ] })
+          ]
+        },
+        request.id
+      )) }) })
+    ] }) }),
+    /* @__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" })
+            ] })
+          ]
+        }
+      )
+    ] }) })
+  ] });
+};
+const Tabs = ({
+  currentPage,
+  onPageChange,
+  serverCapabilities,
+  pendingSampleRequests,
+  shouldDisableAll
+}) => {
+  const handlePageChange = (page) => {
+    onPageChange(page);
+    window.location.hash = page;
+  };
   const tabs = [
-    {
-      id: "resources",
-      label: "Resources",
-      icon: Files2,
-      disabled: !(serverCapabilities == null ? void 0 : serverCapabilities.resources) || shouldDisableAll
-    },
-    {
-      id: "prompts",
-      label: "Prompts",
-      icon: MessageSquare,
-      disabled: !(serverCapabilities == null ? void 0 : serverCapabilities.prompts) || shouldDisableAll
-    },
     {
       id: "tools",
       label: "Tools",
@@ -39219,6 +39952,18 @@ const Sidebar = ({
       icon: Bell,
       disabled: shouldDisableAll
     },
+    {
+      id: "resources",
+      label: "Resources",
+      icon: Files2,
+      disabled: !(serverCapabilities == null ? void 0 : serverCapabilities.resources) || shouldDisableAll
+    },
+    {
+      id: "prompts",
+      label: "Prompts",
+      icon: MessageSquare,
+      disabled: !(serverCapabilities == null ? void 0 : serverCapabilities.prompts) || shouldDisableAll
+    },
     {
       id: "sampling",
       label: "Sampling",
@@ -39245,61 +39990,23 @@ const Sidebar = ({
       disabled: shouldDisableAll
     }
   ];
-  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",
-        {
-          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
-      ] }) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: tabs.map((tab) => {
-      const IconComponent = tab.icon;
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "button",
-        {
-          onClick: () => handlePageChange(tab.id),
-          disabled: tab.disabled,
-          className: `w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200 text-left relative ${currentPage === tab.id ? "bg-muted/100 text-foreground border border-border/50" : "hover:bg-muted/30 text-muted-foreground hover:text-foreground"} disabled:opacity-50 disabled:cursor-not-allowed`,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(IconComponent, { className: "w-4 h-4 flex-shrink-0" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1", children: tab.label }),
-            tab.badge && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center animate-pulse", children: tab.badge })
-          ]
-        },
-        tab.id
-      );
-    }) }) }),
-    /* @__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" })
-            ] })
-          ]
-        }
-      )
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-card border-b border-border flex flex-col w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-1 overflow-x-auto", children: tabs.map((tab) => {
+    const IconComponent = tab.icon;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        onClick: () => handlePageChange(tab.id),
+        disabled: tab.disabled,
+        className: `flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200 whitespace-nowrap relative min-w-fit ${currentPage === tab.id ? "bg-muted/100 text-foreground border border-border/50" : "hover:bg-muted/30 text-muted-foreground hover:text-foreground"} disabled:opacity-50 disabled:cursor-not-allowed`,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(IconComponent, { className: "w-4 h-4 flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: tab.label }),
+          tab.badge && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center animate-pulse ml-1", children: tab.badge })
+        ]
+      },
+      tab.id
+    );
+  }) }) }) });
 };
 const STORAGE_KEY = "claude-api-key";
 const SettingsTab = ({
@@ -39916,7 +40623,7 @@ const ConnectionSection = ({
   onConnect,
   onDisconnect,
   stdErrNotifications,
-  clearStdErrNotifications: clearStdErrNotifications2,
+  clearStdErrNotifications,
   logLevel,
   sendLogLevelRequest: sendLogLevelRequest2,
   loggingSupported,
@@ -40443,7 +41150,7 @@ const ConnectionSection = ({
           {
             variant: "outline",
             size: "sm",
-            onClick: clearStdErrNotifications2,
+            onClick: clearStdErrNotifications,
             className: "h-6 px-2 text-xs",
             children: "Clear"
           }
@@ -40652,9 +41359,6 @@ const sendLogLevelRequest = async (level, dependencies2) => {
   );
   dependencies2.setLogLevel(level);
 };
-const clearStdErrNotifications = (setStdErrNotifications) => {
-  setStdErrNotifications([]);
-};
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 const CLAUDE_API_KEY_STORAGE_KEY = "claude-api-key";
 const validateClaudeApiKey = (key) => {
@@ -40716,6 +41420,9 @@ const App = () => {
   const [resourceSubscriptions, setResourceSubscriptions] = reactExports.useState(/* @__PURE__ */ new Set());
   const [selectedPrompt, setSelectedPrompt] = reactExports.useState(null);
   const [selectedTool, setSelectedTool] = reactExports.useState(null);
+  const [loadedRequest, setLoadedRequest] = reactExports.useState(
+    null
+  );
   const [nextResourceCursor, setNextResourceCursor] = reactExports.useState();
   const [nextResourceTemplateCursor, setNextResourceTemplateCursor] = reactExports.useState();
   const [nextPromptCursor, setNextPromptCursor] = reactExports.useState();
@@ -40734,7 +41441,7 @@ const App = () => {
   });
   const [currentPage, setCurrentPage] = reactExports.useState(() => {
     const hash = window.location.hash.slice(1);
-    return hash || "resources";
+    return hash || "tools";
   });
   console.log(currentPage);
   const {
@@ -40868,7 +41575,7 @@ const App = () => {
   }, [roots]);
   reactExports.useEffect(() => {
     if (!window.location.hash) {
-      window.location.hash = "resources";
+      window.location.hash = "tools";
     }
   }, []);
   reactExports.useEffect(() => {
@@ -40957,11 +41664,15 @@ const App = () => {
     return sendLogLevelRequest(level, helperDependencies);
   };
   const clearStdErrNotificationsWrapper = () => {
-    clearStdErrNotifications(setStdErrNotifications);
+    setStdErrNotifications([]);
+  };
+  const handleLoadRequest = (request) => {
+    setLoadedRequest(request);
+    setTimeout(() => setLoadedRequest(null), 100);
   };
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-6y8mD7ke.js"), true ? __vite__mapDeps([0,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthCallback-CBw5QXWv.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,
@@ -40976,7 +41687,7 @@ const App = () => {
   }
   if (window.location.pathname === "/oauth/callback/debug") {
     const OAuthDebugCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthDebugCallback-B8mHfUnK.js"), true ? __vite__mapDeps([2,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthDebugCallback-wx6FGFG4.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,
@@ -41131,7 +41842,8 @@ const App = () => {
               toolResult,
               nextCursor: nextToolCursor,
               error: errors.tools,
-              connectionStatus
+              connectionStatus,
+              loadedRequest
             }
           );
         case "chat":
@@ -41202,7 +41914,8 @@ const App = () => {
         onPageChange: setCurrentPage,
         serverCapabilities,
         pendingSampleRequests,
-        shouldDisableAll: !mcpClient
+        shouldDisableAll: !mcpClient,
+        onLoadRequest: handleLoadRequest
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
@@ -41235,6 +41948,16 @@ const App = () => {
           clearStdErrNotifications: clearStdErrNotificationsWrapper
         }
       ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Tabs,
+        {
+          currentPage,
+          onPageChange: setCurrentPage,
+          serverCapabilities,
+          pendingSampleRequests,
+          shouldDisableAll: !mcpClient
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col overflow-hidden overflow-y-auto", children: renderTabs() }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         HistoryAndNotifications,