@mcp-use/inspector 0.7.0 → 0.7.1-canary.1

package/dist/client/assets/{index-CKXUnlZB.js → index-C6-RG1Zg.js}

@@ -1,8 +1,8 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/winston-qgF6niUt.js","assets/__vite-browser-external-CHS79mP1.js","assets/index-DX0TIfSM.js","assets/path-QsnVvLoj.js","assets/index-CsP5AdwX.js","assets/index-Cb09SlUY.js","assets/chunk-VL2OQCWN-CxD8xDNw.js","assets/embeddings-DlCMB9po.js","assets/index-B0NYybvW.js","assets/index-Q_pqNaNk.js","assets/browser-BdCJ_qyB.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/winston-DEk87ZzD.js","assets/__vite-browser-external-CHS79mP1.js","assets/index-DX0TIfSM.js","assets/path-QsnVvLoj.js","assets/index-LnKUeTzV.js","assets/index-DXRtNbHK.js","assets/chunk-VL2OQCWN-BF4Vlh6u.js","assets/embeddings-BBixu_w5.js","assets/index-XmiNerc_.js","assets/index-Bk_3A_7h.js","assets/browser-8hDgrmFA.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);
-var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m;
 function _mergeNamespaces(n2, m2) {
   for (var i2 = 0; i2 < m2.length; i2++) {
     const e = m2[i2];
@@ -211,7 +211,7 @@ function loadWinstonSync() {
 __name(loadWinstonSync, "loadWinstonSync");
 async function getWinston() {
   if (!winston) {
-    winston = await __vitePreload(() => import("./winston-qgF6niUt.js").then((n2) => n2.w), true ? __vite__mapDeps([0,1,2,3]) : void 0);
+    winston = await __vitePreload(() => import("./winston-DEk87ZzD.js").then((n2) => n2.w), true ? __vite__mapDeps([0,1,2,3]) : void 0);
   }
   return winston;
 }
@@ -446,254 +446,6 @@ if (isNodeJSEnvironment()) {
   }
 }
 var logger = Logger.get();
-var BaseConnector = (_c = class {
-  client = null;
-  connectionManager = null;
-  toolsCache = null;
-  capabilitiesCache = null;
-  serverInfoCache = null;
-  connected = false;
-  opts;
-  constructor(opts = {}) {
-    this.opts = opts;
-  }
-  /** Disconnect and release resources. */
-  async disconnect() {
-    if (!this.connected) {
-      logger.debug("Not connected to MCP implementation");
-      return;
-    }
-    logger.debug("Disconnecting from MCP implementation");
-    await this.cleanupResources();
-    this.connected = false;
-    logger.debug("Disconnected from MCP implementation");
-  }
-  /** Check if the client is connected */
-  get isClientConnected() {
-    return this.client != null;
-  }
-  /**
-   * Initialise the MCP session **after** `connect()` has succeeded.
-   *
-   * In the SDK, `Client.connect(transport)` automatically performs the
-   * protocol‑level `initialize` handshake, so we only need to cache the list of
-   * tools and expose some server info.
-   */
-  async initialize(defaultRequestOptions = this.opts.defaultRequestOptions ?? {}) {
-    if (!this.client) {
-      throw new Error("MCP client is not connected");
-    }
-    logger.debug("Caching server capabilities & tools");
-    const capabilities = this.client.getServerCapabilities();
-    this.capabilitiesCache = capabilities;
-    const serverInfo = this.client.getServerVersion();
-    this.serverInfoCache = serverInfo || null;
-    const listToolsRes = await this.client.listTools(
-      void 0,
-      defaultRequestOptions
-    );
-    this.toolsCache = listToolsRes.tools ?? [];
-    logger.debug(`Fetched ${this.toolsCache.length} tools from server`);
-    logger.debug("Server capabilities:", capabilities);
-    logger.debug("Server info:", serverInfo);
-    return capabilities;
-  }
-  /** Lazily expose the cached tools list. */
-  get tools() {
-    if (!this.toolsCache) {
-      throw new Error("MCP client is not initialized; call initialize() first");
-    }
-    return this.toolsCache;
-  }
-  /** Expose cached server capabilities. */
-  get serverCapabilities() {
-    return this.capabilitiesCache;
-  }
-  /** Expose cached server info. */
-  get serverInfo() {
-    return this.serverInfoCache;
-  }
-  /** Call a tool on the server. */
-  async callTool(name, args, options) {
-    if (!this.client) {
-      throw new Error("MCP client is not connected");
-    }
-    logger.debug(`Calling tool '${name}' with args`, args);
-    const res = await this.client.callTool(
-      { name, arguments: args },
-      void 0,
-      options
-    );
-    logger.debug(`Tool '${name}' returned`, res);
-    return res;
-  }
-  /**
-   * List resources from the server with optional pagination
-   *
-   * @param cursor - Optional cursor for pagination
-   * @param options - Request options
-   * @returns Resource list with optional nextCursor for pagination
-   */
-  async listResources(cursor, options) {
-    if (!this.client) {
-      throw new Error("MCP client is not connected");
-    }
-    logger.debug("Listing resources", cursor ? `with cursor: ${cursor}` : "");
-    return await this.client.listResources({ cursor }, options);
-  }
-  /**
-   * List all resources from the server, automatically handling pagination
-   *
-   * @param options - Request options
-   * @returns Complete list of all resources
-   */
-  async listAllResources(options) {
-    if (!this.client) {
-      throw new Error("MCP client is not connected");
-    }
-    if (!this.capabilitiesCache?.resources) {
-      logger.debug("Server does not advertise resources capability, skipping");
-      return { resources: [] };
-    }
-    try {
-      logger.debug("Listing all resources (with auto-pagination)");
-      const allResources = [];
-      let cursor = void 0;
-      do {
-        const result = await this.client.listResources({ cursor }, options);
-        allResources.push(...result.resources || []);
-        cursor = result.nextCursor;
-      } while (cursor);
-      return { resources: allResources };
-    } catch (err) {
-      if (err.code === -32601) {
-        logger.debug("Server advertised resources but method not found");
-        return { resources: [] };
-      }
-      throw err;
-    }
-  }
-  /**
-   * List resource templates from the server
-   *
-   * @param options - Request options
-   * @returns List of available resource templates
-   */
-  async listResourceTemplates(options) {
-    if (!this.client) {
-      throw new Error("MCP client is not connected");
-    }
-    logger.debug("Listing resource templates");
-    return await this.client.listResourceTemplates(void 0, options);
-  }
-  /** Read a resource by URI. */
-  async readResource(uri, options) {
-    if (!this.client) {
-      throw new Error("MCP client is not connected");
-    }
-    logger.debug(`Reading resource ${uri}`);
-    const res = await this.client.readResource({ uri }, options);
-    return res;
-  }
-  /**
-   * Subscribe to resource updates
-   *
-   * @param uri - URI of the resource to subscribe to
-   * @param options - Request options
-   */
-  async subscribeToResource(uri, options) {
-    if (!this.client) {
-      throw new Error("MCP client is not connected");
-    }
-    logger.debug(`Subscribing to resource: ${uri}`);
-    return await this.client.subscribeResource({ uri }, options);
-  }
-  /**
-   * Unsubscribe from resource updates
-   *
-   * @param uri - URI of the resource to unsubscribe from
-   * @param options - Request options
-   */
-  async unsubscribeFromResource(uri, options) {
-    if (!this.client) {
-      throw new Error("MCP client is not connected");
-    }
-    logger.debug(`Unsubscribing from resource: ${uri}`);
-    return await this.client.unsubscribeResource({ uri }, options);
-  }
-  async listPrompts() {
-    if (!this.client) {
-      throw new Error("MCP client is not connected");
-    }
-    if (!this.capabilitiesCache?.prompts) {
-      logger.debug("Server does not advertise prompts capability, skipping");
-      return { prompts: [] };
-    }
-    try {
-      logger.debug("Listing prompts");
-      return await this.client.listPrompts();
-    } catch (err) {
-      if (err.code === -32601) {
-        logger.debug("Server advertised prompts but method not found");
-        return { prompts: [] };
-      }
-      throw err;
-    }
-  }
-  async getPrompt(name, args) {
-    if (!this.client) {
-      throw new Error("MCP client is not connected");
-    }
-    logger.debug(`Getting prompt ${name}`);
-    return await this.client.getPrompt({ name, arguments: args });
-  }
-  /** Send a raw request through the client. */
-  async request(method, params = null, options) {
-    if (!this.client) {
-      throw new Error("MCP client is not connected");
-    }
-    logger.debug(`Sending raw request '${method}' with params`, params);
-    return await this.client.request(
-      { method, params: params ?? {} },
-      void 0,
-      options
-    );
-  }
-  /**
-   * Helper to tear down the client & connection manager safely.
-   */
-  async cleanupResources() {
-    const issues = [];
-    if (this.client) {
-      try {
-        if (typeof this.client.close === "function") {
-          await this.client.close();
-        }
-      } catch (e) {
-        const msg = `Error closing client: ${e}`;
-        logger.warn(msg);
-        issues.push(msg);
-      } finally {
-        this.client = null;
-      }
-    }
-    if (this.connectionManager) {
-      try {
-        await this.connectionManager.stop();
-      } catch (e) {
-        const msg = `Error stopping connection manager: ${e}`;
-        logger.warn(msg);
-        issues.push(msg);
-      } finally {
-        this.connectionManager = null;
-      }
-    }
-    this.toolsCache = null;
-    if (issues.length) {
-      logger.warn(`Resource cleanup finished with ${issues.length} issue(s)`);
-    }
-  }
-}, __name(_c, "BaseConnector"), _c);
 var util$1;
 (function(util2) {
   util2.assertEqual = (_2) => {
@@ -5516,6 +5268,400 @@ class McpError extends Error {
     this.name = "McpError";
   }
 }
+var BaseConnector = (_c = class {
+  client = null;
+  connectionManager = null;
+  toolsCache = null;
+  capabilitiesCache = null;
+  serverInfoCache = null;
+  connected = false;
+  opts;
+  notificationHandlers = [];
+  rootsCache = [];
+  constructor(opts = {}) {
+    this.opts = opts;
+    if (opts.roots) {
+      this.rootsCache = [...opts.roots];
+    }
+  }
+  /**
+   * Register a handler for server notifications
+   *
+   * @param handler - Function to call when a notification is received
+   *
+   * @example
+   * ```typescript
+   * connector.onNotification((notification) => {
+   *   console.log(`Received: ${notification.method}`, notification.params);
+   * });
+   * ```
+   */
+  onNotification(handler) {
+    this.notificationHandlers.push(handler);
+    if (this.client) {
+      this.setupNotificationHandler();
+    }
+  }
+  /**
+   * Internal: wire notification handlers to the SDK client
+   * Includes automatic handling for list_changed notifications per MCP spec
+   */
+  setupNotificationHandler() {
+    if (!this.client) return;
+    this.client.fallbackNotificationHandler = async (notification) => {
+      switch (notification.method) {
+        case "notifications/tools/list_changed":
+          await this.refreshToolsCache();
+          break;
+        case "notifications/resources/list_changed":
+          await this.onResourcesListChanged();
+          break;
+        case "notifications/prompts/list_changed":
+          await this.onPromptsListChanged();
+          break;
+      }
+      for (const handler of this.notificationHandlers) {
+        try {
+          await handler(notification);
+        } catch (err) {
+          logger.error("Error in notification handler:", err);
+        }
+      }
+    };
+  }
+  /**
+   * Auto-refresh tools cache when server sends tools/list_changed notification
+   */
+  async refreshToolsCache() {
+    if (!this.client) return;
+    try {
+      logger.debug(
+        "[Auto] Refreshing tools cache due to list_changed notification"
+      );
+      const result = await this.client.listTools();
+      this.toolsCache = result.tools ?? [];
+      logger.debug(
+        `[Auto] Refreshed tools cache: ${this.toolsCache.length} tools`
+      );
+    } catch (err) {
+      logger.warn("[Auto] Failed to refresh tools cache:", err);
+    }
+  }
+  /**
+   * Called when server sends resources/list_changed notification
+   * Resources aren't cached by default, but we log for user awareness
+   */
+  async onResourcesListChanged() {
+    logger.debug(
+      "[Auto] Resources list changed - clients should re-fetch if needed"
+    );
+  }
+  /**
+   * Called when server sends prompts/list_changed notification
+   * Prompts aren't cached by default, but we log for user awareness
+   */
+  async onPromptsListChanged() {
+    logger.debug(
+      "[Auto] Prompts list changed - clients should re-fetch if needed"
+    );
+  }
+  /**
+   * Set roots and notify the server.
+   * Roots represent directories or files that the client has access to.
+   *
+   * @param roots - Array of Root objects with `uri` (must start with "file://") and optional `name`
+   *
+   * @example
+   * ```typescript
+   * await connector.setRoots([
+   *   { uri: "file:///home/user/project", name: "My Project" },
+   *   { uri: "file:///home/user/data" }
+   * ]);
+   * ```
+   */
+  async setRoots(roots) {
+    this.rootsCache = [...roots];
+    if (this.client) {
+      logger.debug(
+        `Sending roots/list_changed notification with ${roots.length} root(s)`
+      );
+      await this.client.sendRootsListChanged();
+    }
+  }
+  /**
+   * Get the current roots.
+   */
+  getRoots() {
+    return [...this.rootsCache];
+  }
+  /**
+   * Internal: set up roots/list request handler.
+   * This is called after the client connects to register the handler for server requests.
+   */
+  setupRootsHandler() {
+    if (!this.client) return;
+    this.client.setRequestHandler(
+      ListRootsRequestSchema,
+      async (_request, _extra) => {
+        logger.debug(
+          `Server requested roots list, returning ${this.rootsCache.length} root(s)`
+        );
+        return { roots: this.rootsCache };
+      }
+    );
+  }
+  /**
+   * Internal: set up sampling/createMessage request handler.
+   * This is called after the client connects to register the handler for sampling requests.
+   */
+  setupSamplingHandler() {
+    if (!this.client) return;
+    if (!this.opts.samplingCallback) return;
+    this.client.setRequestHandler(
+      CreateMessageRequestSchema,
+      async (request, _extra) => {
+        logger.debug("Server requested sampling, forwarding to callback");
+        return await this.opts.samplingCallback(request.params);
+      }
+    );
+  }
+  /** Disconnect and release resources. */
+  async disconnect() {
+    if (!this.connected) {
+      logger.debug("Not connected to MCP implementation");
+      return;
+    }
+    logger.debug("Disconnecting from MCP implementation");
+    await this.cleanupResources();
+    this.connected = false;
+    logger.debug("Disconnected from MCP implementation");
+  }
+  /** Check if the client is connected */
+  get isClientConnected() {
+    return this.client != null;
+  }
+  /**
+   * Initialise the MCP session **after** `connect()` has succeeded.
+   *
+   * In the SDK, `Client.connect(transport)` automatically performs the
+   * protocol‑level `initialize` handshake, so we only need to cache the list of
+   * tools and expose some server info.
+   */
+  async initialize(defaultRequestOptions = this.opts.defaultRequestOptions ?? {}) {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    logger.debug("Caching server capabilities & tools");
+    const capabilities = this.client.getServerCapabilities();
+    this.capabilitiesCache = capabilities;
+    const serverInfo = this.client.getServerVersion();
+    this.serverInfoCache = serverInfo || null;
+    const listToolsRes = await this.client.listTools(
+      void 0,
+      defaultRequestOptions
+    );
+    this.toolsCache = listToolsRes.tools ?? [];
+    logger.debug(`Fetched ${this.toolsCache.length} tools from server`);
+    logger.debug("Server capabilities:", capabilities);
+    logger.debug("Server info:", serverInfo);
+    return capabilities;
+  }
+  /** Lazily expose the cached tools list. */
+  get tools() {
+    if (!this.toolsCache) {
+      throw new Error("MCP client is not initialized; call initialize() first");
+    }
+    return this.toolsCache;
+  }
+  /** Expose cached server capabilities. */
+  get serverCapabilities() {
+    return this.capabilitiesCache;
+  }
+  /** Expose cached server info. */
+  get serverInfo() {
+    return this.serverInfoCache;
+  }
+  /** Call a tool on the server. */
+  async callTool(name, args, options) {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    logger.debug(`Calling tool '${name}' with args`, args);
+    const res = await this.client.callTool(
+      { name, arguments: args },
+      void 0,
+      options
+    );
+    logger.debug(`Tool '${name}' returned`, res);
+    return res;
+  }
+  /**
+   * List resources from the server with optional pagination
+   *
+   * @param cursor - Optional cursor for pagination
+   * @param options - Request options
+   * @returns Resource list with optional nextCursor for pagination
+   */
+  async listResources(cursor, options) {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    logger.debug("Listing resources", cursor ? `with cursor: ${cursor}` : "");
+    return await this.client.listResources({ cursor }, options);
+  }
+  /**
+   * List all resources from the server, automatically handling pagination
+   *
+   * @param options - Request options
+   * @returns Complete list of all resources
+   */
+  async listAllResources(options) {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    if (!this.capabilitiesCache?.resources) {
+      logger.debug("Server does not advertise resources capability, skipping");
+      return { resources: [] };
+    }
+    try {
+      logger.debug("Listing all resources (with auto-pagination)");
+      const allResources = [];
+      let cursor = void 0;
+      do {
+        const result = await this.client.listResources({ cursor }, options);
+        allResources.push(...result.resources || []);
+        cursor = result.nextCursor;
+      } while (cursor);
+      return { resources: allResources };
+    } catch (err) {
+      if (err.code === -32601) {
+        logger.debug("Server advertised resources but method not found");
+        return { resources: [] };
+      }
+      throw err;
+    }
+  }
+  /**
+   * List resource templates from the server
+   *
+   * @param options - Request options
+   * @returns List of available resource templates
+   */
+  async listResourceTemplates(options) {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    logger.debug("Listing resource templates");
+    return await this.client.listResourceTemplates(void 0, options);
+  }
+  /** Read a resource by URI. */
+  async readResource(uri, options) {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    logger.debug(`Reading resource ${uri}`);
+    const res = await this.client.readResource({ uri }, options);
+    return res;
+  }
+  /**
+   * Subscribe to resource updates
+   *
+   * @param uri - URI of the resource to subscribe to
+   * @param options - Request options
+   */
+  async subscribeToResource(uri, options) {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    logger.debug(`Subscribing to resource: ${uri}`);
+    return await this.client.subscribeResource({ uri }, options);
+  }
+  /**
+   * Unsubscribe from resource updates
+   *
+   * @param uri - URI of the resource to unsubscribe from
+   * @param options - Request options
+   */
+  async unsubscribeFromResource(uri, options) {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    logger.debug(`Unsubscribing from resource: ${uri}`);
+    return await this.client.unsubscribeResource({ uri }, options);
+  }
+  async listPrompts() {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    if (!this.capabilitiesCache?.prompts) {
+      logger.debug("Server does not advertise prompts capability, skipping");
+      return { prompts: [] };
+    }
+    try {
+      logger.debug("Listing prompts");
+      return await this.client.listPrompts();
+    } catch (err) {
+      if (err.code === -32601) {
+        logger.debug("Server advertised prompts but method not found");
+        return { prompts: [] };
+      }
+      throw err;
+    }
+  }
+  async getPrompt(name, args) {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    logger.debug(`Getting prompt ${name}`);
+    return await this.client.getPrompt({ name, arguments: args });
+  }
+  /** Send a raw request through the client. */
+  async request(method, params = null, options) {
+    if (!this.client) {
+      throw new Error("MCP client is not connected");
+    }
+    logger.debug(`Sending raw request '${method}' with params`, params);
+    return await this.client.request(
+      { method, params: params ?? {} },
+      void 0,
+      options
+    );
+  }
+  /**
+   * Helper to tear down the client & connection manager safely.
+   */
+  async cleanupResources() {
+    const issues = [];
+    if (this.client) {
+      try {
+        if (typeof this.client.close === "function") {
+          await this.client.close();
+        }
+      } catch (e) {
+        const msg = `Error closing client: ${e}`;
+        logger.warn(msg);
+        issues.push(msg);
+      } finally {
+        this.client = null;
+      }
+    }
+    if (this.connectionManager) {
+      try {
+        await this.connectionManager.stop();
+      } catch (e) {
+        const msg = `Error stopping connection manager: ${e}`;
+        logger.warn(msg);
+        issues.push(msg);
+      } finally {
+        this.connectionManager = null;
+      }
+    }
+    this.toolsCache = null;
+    if (issues.length) {
+      logger.warn(`Resource cleanup finished with ${issues.length} issue(s)`);
+    }
+  }
+}, __name(_c, "BaseConnector"), _c);
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 6e4;
 class Protocol {
   constructor(_options) {
@@ -5974,11 +6120,11 @@ function requireUri_all() {
       var slicedToArray = /* @__PURE__ */ (function() {
         function sliceIterator(arr, i2) {
           var _arr = [];
-          var _n2 = true;
+          var _n = true;
           var _d2 = false;
           var _e3 = void 0;
           try {
-            for (var _i2 = arr[Symbol.iterator](), _s; !(_n2 = (_s = _i2.next()).done); _n2 = true) {
+            for (var _i2 = arr[Symbol.iterator](), _s; !(_n = (_s = _i2.next()).done); _n = true) {
               _arr.push(_s.value);
               if (i2 && _arr.length === i2) break;
             }
@@ -5987,7 +6133,7 @@ function requireUri_all() {
             _e3 = err;
           } finally {
             try {
-              if (!_n2 && _i2["return"]) _i2["return"]();
+              if (!_n && _i2["return"]) _i2["return"]();
             } finally {
               if (_d2) throw _e3;
             }
@@ -13887,6 +14033,51 @@ var MCPSession = (_d = class {
   get isConnected() {
     return this.connector && this.connector.isClientConnected;
   }
+  /**
+   * Register an event handler for session events
+   *
+   * @param event - The event type to listen for
+   * @param handler - The handler function to call when the event occurs
+   *
+   * @example
+   * ```typescript
+   * session.on("notification", async (notification) => {
+   *   console.log(`Received: ${notification.method}`, notification.params);
+   *
+   *   if (notification.method === "notifications/tools/list_changed") {
+   *     // Refresh tools list
+   *   }
+   * });
+   * ```
+   */
+  on(event, handler) {
+    if (event === "notification") {
+      this.connector.onNotification(handler);
+    }
+  }
+  /**
+   * Set roots and notify the server.
+   * Roots represent directories or files that the client has access to.
+   *
+   * @param roots - Array of Root objects with `uri` (must start with "file://") and optional `name`
+   *
+   * @example
+   * ```typescript
+   * await session.setRoots([
+   *   { uri: "file:///home/user/project", name: "My Project" },
+   *   { uri: "file:///home/user/data" }
+   * ]);
+   * ```
+   */
+  async setRoots(roots) {
+    return this.connector.setRoots(roots);
+  }
+  /**
+   * Get the current roots.
+   */
+  getRoots() {
+    return this.connector.getRoots();
+  }
 }, __name(_d, "MCPSession"), _d);
 var ConnectionManager = (_e2 = class {
   _readyPromise;
@@ -14038,52 +14229,7 @@ var SseConnectionManager = (_f = class extends ConnectionManager {
     }
   }
 }, __name(_f, "SseConnectionManager"), _f);
-var StreamableHttpConnectionManager = (_g = class extends ConnectionManager {
-  url;
-  opts;
-  _transport = null;
-  /**
-   * Create a Streamable HTTP connection manager.
-   *
-   * @param url  The HTTP endpoint URL.
-   * @param opts Optional transport options (auth, headers, etc.).
-   */
-  constructor(url, opts) {
-    super();
-    this.url = typeof url === "string" ? new URL(url) : url;
-    this.opts = opts;
-  }
-  /**
-   * Spawn a new `StreamableHTTPClientTransport` and return it.
-   * The Client.connect() method will handle starting the transport.
-   */
-  async establishConnection() {
-    this._transport = new StreamableHTTPClientTransport(this.url, this.opts);
-    logger.debug(`${this.constructor.name} created successfully`);
-    return this._transport;
-  }
-  /**
-   * Close the underlying transport and clean up resources.
-   */
-  async closeConnection(_connection) {
-    if (this._transport) {
-      try {
-        await this._transport.close();
-      } catch (e) {
-        logger.warn(`Error closing Streamable HTTP transport: ${e}`);
-      } finally {
-        this._transport = null;
-      }
-    }
-  }
-  /**
-   * Get the session ID from the transport if available.
-   */
-  get sessionId() {
-    return this._transport?.sessionId;
-  }
-}, __name(_g, "StreamableHttpConnectionManager"), _g);
-var HttpConnector = (_h = class extends BaseConnector {
+var HttpConnector = (_g = class extends BaseConnector {
   baseUrl;
   headers;
   timeout;
@@ -14091,6 +14237,7 @@ var HttpConnector = (_h = class extends BaseConnector {
   clientInfo;
   preferSse;
   transportType = null;
+  streamableTransport = null;
   constructor(baseUrl, opts = {}) {
     super(opts);
     this.baseUrl = baseUrl.replace(/\/$/, "");
@@ -14182,34 +14329,67 @@ var HttpConnector = (_h = class extends BaseConnector {
   }
   async connectWithStreamableHttp(baseUrl) {
     try {
-      this.connectionManager = new StreamableHttpConnectionManager(baseUrl, {
-        authProvider: this.opts.authProvider,
-        // ← Pass OAuth provider to SDK
-        requestInit: {
-          headers: this.headers
-        },
-        // Pass through timeout and other options
-        reconnectionOptions: {
-          maxReconnectionDelay: 3e4,
-          initialReconnectionDelay: 1e3,
-          reconnectionDelayGrowFactor: 1.5,
-          maxRetries: 2
+      const streamableTransport = new StreamableHTTPClientTransport(
+        new URL(baseUrl),
+        {
+          authProvider: this.opts.authProvider,
+          // ← Pass OAuth provider to SDK
+          requestInit: {
+            headers: this.headers
+          },
+          // Pass through reconnection options
+          reconnectionOptions: {
+            maxReconnectionDelay: 3e4,
+            initialReconnectionDelay: 1e3,
+            reconnectionDelayGrowFactor: 1.5,
+            maxRetries: 2
+          }
+          // Don't pass sessionId - let the SDK generate it automatically during connect()
         }
-      });
-      let transport = await this.connectionManager.start();
+      );
+      let transport = streamableTransport;
       if (this.opts.wrapTransport) {
         const serverId = this.baseUrl;
-        transport = this.opts.wrapTransport(transport, serverId);
+        transport = this.opts.wrapTransport(
+          transport,
+          serverId
+        );
       }
-      this.client = new Client(this.clientInfo, this.opts.clientOptions);
+      const clientOptions = {
+        ...this.opts.clientOptions || {},
+        capabilities: {
+          ...this.opts.clientOptions?.capabilities || {},
+          roots: { listChanged: true },
+          // Always advertise roots capability
+          // Add sampling capability if callback is provided
+          ...this.opts.samplingCallback ? { sampling: {} } : {}
+        }
+      };
+      logger.debug(
+        `Creating Client with capabilities:`,
+        JSON.stringify(clientOptions.capabilities, null, 2)
+      );
+      this.client = new Client(this.clientInfo, clientOptions);
+      this.setupRootsHandler();
+      logger.debug("Roots handler registered before connect");
       try {
-        await this.client.connect(transport);
+        await this.client.connect(transport, {
+          timeout: Math.min(this.timeout, 3e3)
+        });
+        const sessionId = streamableTransport.sessionId;
+        if (sessionId) {
+          logger.debug(`Session ID obtained: ${sessionId}`);
+        } else {
+          logger.warn(
+            "Session ID not available after connect - this may cause issues with SSE stream"
+          );
+        }
       } catch (connectErr) {
         if (connectErr instanceof Error) {
           const errMsg = connectErr.message || connectErr.toString();
-          if (errMsg.includes("Missing session ID") || errMsg.includes("Bad Request: Missing session ID")) {
+          if (errMsg.includes("Missing session ID") || errMsg.includes("Bad Request: Missing session ID") || errMsg.includes("Mcp-Session-Id header is required")) {
             const wrappedError = new Error(
-              `FastMCP session ID error: ${errMsg}`
+              `Session ID error: ${errMsg}. The SDK should automatically extract session ID from initialize response.`
             );
             wrappedError.cause = connectErr;
             throw wrappedError;
@@ -14217,8 +14397,24 @@ var HttpConnector = (_h = class extends BaseConnector {
         }
         throw connectErr;
       }
+      this.streamableTransport = streamableTransport;
+      this.connectionManager = {
+        stop: /* @__PURE__ */ __name(async () => {
+          if (this.streamableTransport) {
+            try {
+              await this.streamableTransport.close();
+            } catch (e) {
+              logger.warn(`Error closing Streamable HTTP transport: ${e}`);
+            } finally {
+              this.streamableTransport = null;
+            }
+          }
+        }, "stop")
+      };
       this.connected = true;
       this.transportType = "streamable-http";
+      this.setupNotificationHandler();
+      this.setupSamplingHandler();
       logger.debug(
         `Successfully connected to MCP implementation via streamable HTTP: ${baseUrl}`
       );
@@ -14239,10 +14435,28 @@ var HttpConnector = (_h = class extends BaseConnector {
         const serverId = this.baseUrl;
         transport = this.opts.wrapTransport(transport, serverId);
       }
-      this.client = new Client(this.clientInfo, this.opts.clientOptions);
+      const clientOptions = {
+        ...this.opts.clientOptions || {},
+        capabilities: {
+          ...this.opts.clientOptions?.capabilities || {},
+          roots: { listChanged: true },
+          // Always advertise roots capability
+          // Add sampling capability if callback is provided
+          ...this.opts.samplingCallback ? { sampling: {} } : {}
+        }
+      };
+      logger.debug(
+        `Creating Client with capabilities (SSE):`,
+        JSON.stringify(clientOptions.capabilities, null, 2)
+      );
+      this.client = new Client(this.clientInfo, clientOptions);
+      this.setupRootsHandler();
+      logger.debug("Roots handler registered before connect (SSE)");
       await this.client.connect(transport);
       this.connected = true;
       this.transportType = "sse";
+      this.setupNotificationHandler();
+      this.setupSamplingHandler();
       logger.debug(
         `Successfully connected to MCP implementation via HTTP/SSE: ${baseUrl}`
       );
@@ -14264,8 +14478,8 @@ var HttpConnector = (_h = class extends BaseConnector {
   getTransportType() {
     return this.transportType;
   }
-}, __name(_h, "HttpConnector"), _h);
-var WebSocketConnectionManager = (_i = class extends ConnectionManager {
+}, __name(_g, "HttpConnector"), _g);
+var WebSocketConnectionManager = (_h = class extends ConnectionManager {
   url;
   headers;
   _ws = null;
@@ -14326,8 +14540,8 @@ var WebSocketConnectionManager = (_i = class extends ConnectionManager {
       }
     });
   }
-}, __name(_i, "WebSocketConnectionManager"), _i);
-var WebSocketConnector = (_j = class extends BaseConnector {
+}, __name(_h, "WebSocketConnectionManager"), _h);
+var WebSocketConnector = (_i = class extends BaseConnector {
   url;
   headers;
   connectionManager = null;
@@ -14402,6 +14616,9 @@ var WebSocketConnector = (_j = class extends BaseConnector {
         this.pending.delete(id2);
         if ("result" in data2) resolve(data2.result);
         else if ("error" in data2) reject(data2.error);
+      } else if (data2.method && !data2.id) {
+        logger.debug("Received notification", data2.method, data2.params);
+        this.handleNotification(data2);
       } else {
         logger.debug("Received unsolicited message", data2);
       }
@@ -14432,6 +14649,47 @@ var WebSocketConnector = (_j = class extends BaseConnector {
     for (const { reject } of this.pending.values()) reject(err);
     this.pending.clear();
   }
+  async handleNotification(data2) {
+    switch (data2.method) {
+      case "notifications/tools/list_changed":
+        await this.refreshToolsCache();
+        break;
+      case "notifications/resources/list_changed":
+        await this.onResourcesListChanged();
+        break;
+      case "notifications/prompts/list_changed":
+        await this.onPromptsListChanged();
+        break;
+    }
+    for (const handler of this.notificationHandlers) {
+      try {
+        await handler({
+          method: data2.method,
+          params: data2.params
+        });
+      } catch (err) {
+        logger.error("Error in notification handler:", err);
+      }
+    }
+  }
+  /**
+   * Auto-refresh tools cache when server sends tools/list_changed notification
+   * Override to use WebSocket-specific listTools method
+   */
+  async refreshToolsCache() {
+    try {
+      logger.debug(
+        "[Auto] Refreshing tools cache due to list_changed notification"
+      );
+      const tools = await this.listTools();
+      this.toolsCache = tools.map((t) => t);
+      logger.debug(
+        `[Auto] Refreshed tools cache: ${this.toolsCache.length} tools`
+      );
+    } catch (err) {
+      logger.warn("[Auto] Failed to refresh tools cache:", err);
+    }
+  }
   async initialize() {
     logger.debug("Initializing MCP session over WebSocket");
     const result = await this.sendRequest("initialize");
@@ -14480,8 +14738,8 @@ var WebSocketConnector = (_j = class extends BaseConnector {
       url: this.url
     };
   }
-}, __name(_j, "WebSocketConnector"), _j);
-var BrowserOAuthClientProvider = (_k = class {
+}, __name(_i, "WebSocketConnector"), _i);
+var BrowserOAuthClientProvider = (_j = class {
   serverUrl;
   storageKeyPrefix;
   serverUrlHash;
@@ -14689,7 +14947,7 @@ var BrowserOAuthClientProvider = (_k = class {
   getKey(keySuffix) {
     return `${this.storageKeyPrefix}_${this.serverUrlHash}_${keySuffix}`;
   }
-}, __name(_k, "BrowserOAuthClientProvider"), _k);
+}, __name(_j, "BrowserOAuthClientProvider"), _j);
 async function onMcpAuthorization() {
   const queryParams = new URLSearchParams(window.location.search);
   const code = queryParams.get("code");
@@ -14816,7 +15074,7 @@ async function onMcpAuthorization() {
   }
 }
 __name(onMcpAuthorization, "onMcpAuthorization");
-var BaseMCPClient = (_l = class {
+var BaseMCPClient = (_k = class {
   config = {};
   sessions = {};
   activeSessions = [];
@@ -14927,20 +15185,29 @@ var BaseMCPClient = (_l = class {
       logger.debug("All sessions closed successfully");
     }
   }
-}, __name(_l, "BaseMCPClient"), _l);
-var BrowserMCPClient = (_m = class extends BaseMCPClient {
+}, __name(_k, "BaseMCPClient"), _k);
+var BrowserMCPClient = (_l = class extends BaseMCPClient {
   constructor(config) {
     super(config);
   }
   static fromDict(cfg) {
-    return new _m(cfg);
+    return new _l(cfg);
   }
   /**
    * Create a connector from server configuration (Browser version)
    * Supports HTTP and WebSocket connectors only
    */
   createConnectorFromConfig(serverConfig) {
-    const { url, transport, headers, authToken, authProvider, wrapTransport } = serverConfig;
+    const {
+      url,
+      transport,
+      headers,
+      authToken,
+      authProvider,
+      wrapTransport,
+      clientOptions,
+      samplingCallback
+    } = serverConfig;
     if (!url) {
       throw new Error("Server URL is required");
     }
@@ -14949,9 +15216,23 @@ var BrowserMCPClient = (_m = class extends BaseMCPClient {
       authToken,
       authProvider,
       // ← Pass OAuth provider to connector
-      wrapTransport
+      wrapTransport,
       // ← Pass transport wrapper if provided
+      clientOptions,
+      // ← Pass client options (capabilities, etc.) to connector
+      samplingCallback
+      // ← Pass sampling callback to connector
     };
+    if (clientOptions) {
+      console.log(
+        "[BrowserMCPClient] Passing clientOptions to connector:",
+        JSON.stringify(clientOptions, null, 2)
+      );
+    } else {
+      console.warn(
+        "[BrowserMCPClient] No clientOptions provided to connector!"
+      );
+    }
     if (transport === "websocket" || url.startsWith("ws://") || url.startsWith("wss://")) {
       return new WebSocketConnector(url, connectorOptions);
     } else if (transport === "http" || url.startsWith("http://") || url.startsWith("https://")) {
@@ -14960,7 +15241,7 @@ var BrowserMCPClient = (_m = class extends BaseMCPClient {
       return new HttpConnector(url, connectorOptions);
     }
   }
-}, __name(_m, "BrowserMCPClient"), _m);
+}, __name(_l, "BrowserMCPClient"), _l);
 var react = { exports: {} };
 var react_production = {};
 var hasRequiredReact_production;
@@ -17675,7 +17956,9 @@ function useMcp(options) {
     // 30 seconds default for connection timeout
     sseReadTimeout = 3e5,
     // 5 minutes default for SSE read timeout
-    wrapTransport
+    wrapTransport,
+    onNotification,
+    samplingCallback
   } = options;
   const [state, setState] = reactExports.useState("discovering");
   const [tools, setTools] = reactExports.useState([]);
@@ -17828,6 +18111,10 @@ function useMcp(options) {
           ...serverConfig,
           authProvider: authProviderRef.current,
           // ← SDK handles OAuth automatically!
+          clientOptions: clientConfig,
+          // ← Pass client config to connector
+          samplingCallback,
+          // ← Pass sampling callback to connector
           wrapTransport: wrapTransport ? (transport) => {
             console.log(
               "[useMcp] Applying transport wrapper for server:",
@@ -17838,7 +18125,13 @@ function useMcp(options) {
             return wrapTransport(transport, url);
           } : void 0
         });
-        const session = await clientRef.current.createSession(serverName);
+        const session = await clientRef.current.createSession(
+          serverName,
+          false
+        );
+        if (onNotification) {
+          session.on("notification", onNotification);
+        }
         await session.initialize();
         addLog("info", "✅ Successfully connected to MCP server");
         addLog("info", "Server info:", session.connector.serverInfo);
@@ -18249,7 +18542,7 @@ function useMcp(options) {
   };
 }
 __name(useMcp, "useMcp");
-var ErrorBoundary = (_n = class extends re$1.Component {
+var ErrorBoundary = (_m = class extends re$1.Component {
   constructor(props2) {
     super(props2);
     this.state = { hasError: false, error: null };
@@ -18266,7 +18559,7 @@ var ErrorBoundary = (_n = class extends re$1.Component {
     }
     return this.props.children;
   }
-}, __name(_n, "ErrorBoundary"), _n);
+}, __name(_m, "ErrorBoundary"), _m);
 var SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
 function useOpenAiGlobal(key) {
   return reactExports.useSyncExternalStore(
@@ -40376,7 +40669,7 @@ class MCPToolSavedEvent {
 function getPackageVersion() {
   try {
     if (true) {
-      return "0.7.0";
+      return "0.7.1-canary.1";
     }
     return "0.0.0";
   } catch {
@@ -40667,6 +40960,55 @@ function McpConnectionWrapper({
       return wrapTransportRef.current(transport, actualServerId);
     };
   }, [wrapTransportReady, url]);
+  const NOTIFICATIONS_STORAGE_KEY = `mcp-inspector-notifications-${url}`;
+  const MAX_NOTIFICATIONS = 500;
+  const [notifications, setNotifications] = reactExports.useState([]);
+  reactExports.useEffect(() => {
+    try {
+      const saved = localStorage.getItem(NOTIFICATIONS_STORAGE_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (Array.isArray(parsed)) {
+          setNotifications(parsed);
+        }
+      }
+    } catch (e) {
+      console.error("Failed to load notifications from localStorage:", e);
+    }
+  }, [NOTIFICATIONS_STORAGE_KEY]);
+  reactExports.useEffect(() => {
+    try {
+      localStorage.setItem(
+        NOTIFICATIONS_STORAGE_KEY,
+        JSON.stringify(notifications)
+      );
+    } catch (e) {
+      console.error("Failed to save notifications to localStorage:", e);
+    }
+  }, [notifications, NOTIFICATIONS_STORAGE_KEY]);
+  const markNotificationRead = reactExports.useCallback((id2) => {
+    setNotifications(
+      (prev) => prev.map((n2) => n2.id === id2 ? { ...n2, read: true } : n2)
+    );
+  }, []);
+  const markAllNotificationsRead = reactExports.useCallback(() => {
+    setNotifications((prev) => prev.map((n2) => ({ ...n2, read: true })));
+  }, []);
+  const clearNotifications = reactExports.useCallback(() => {
+    setNotifications([]);
+  }, []);
+  const onNotificationReceived = reactExports.useCallback(
+    (notification) => {
+      setNotifications((prev) => {
+        const updated = [notification, ...prev];
+        if (updated.length > MAX_NOTIFICATIONS) {
+          return updated.slice(0, MAX_NOTIFICATIONS);
+        }
+        return updated;
+      });
+    },
+    []
+  );
   const mcpHook = useMcp({
     url: finalUrl,
     callbackUrl,
@@ -40675,7 +41017,16 @@ function McpConnectionWrapper({
     // Default to 'http' for Streamable HTTP
     enabled: wrapTransportReady,
     // Only connect when wrapper is ready
-    wrapTransport: wrapTransportFn
+    wrapTransport: wrapTransportFn,
+    onNotification: (notification) => {
+      onNotificationReceived({
+        id: globalThis.crypto.randomUUID(),
+        method: notification.method,
+        params: notification.params,
+        timestamp: Date.now(),
+        read: false
+      });
+    }
   });
   const onUpdateRef = reactExports.useRef(onUpdate);
   const prevConnectionRef = reactExports.useRef(null);
@@ -40691,6 +41042,7 @@ function McpConnectionWrapper({
             mcpHook.serverInfo
           );
         }
+        const unreadCount = notifications.filter((n2) => !n2.read).length;
         const connection = {
           id: url,
           url,
@@ -40707,6 +41059,11 @@ function McpConnectionWrapper({
           proxyConfig,
           serverInfo: mcpHook.serverInfo,
           capabilities: mcpHook.capabilities,
+          notifications,
+          unreadNotificationCount: unreadCount,
+          markNotificationRead,
+          markAllNotificationsRead,
+          clearNotifications,
           callTool: mcpHook.callTool,
           readResource: mcpHook.readResource,
           listPrompts: mcpHook.listPrompts,
@@ -40717,12 +41074,13 @@ function McpConnectionWrapper({
           client: mcpHook.client
         };
         const prev = prevConnectionRef.current;
-        if (!prev || prev.state !== connection.state || prev.error !== connection.error || prev.authUrl !== connection.authUrl || prev.name !== connection.name || prev.tools.length !== connection.tools.length || prev.resources.length !== connection.resources.length || prev.prompts.length !== connection.prompts.length || prev.serverInfo !== connection.serverInfo || prev.capabilities !== connection.capabilities || !prev.client) {
+        if (!prev || prev.state !== connection.state || prev.error !== connection.error || prev.authUrl !== connection.authUrl || prev.name !== connection.name || prev.tools.length !== connection.tools.length || prev.resources.length !== connection.resources.length || prev.prompts.length !== connection.prompts.length || prev.serverInfo !== connection.serverInfo || prev.capabilities !== connection.capabilities || prev.notifications.length !== connection.notifications.length || prev.unreadNotificationCount !== connection.unreadNotificationCount || !prev.client) {
           prevConnectionRef.current = connection;
           onUpdateRef.current(connection);
         }
       });
     } else {
+      const unreadCount = notifications.filter((n2) => !n2.read).length;
       const connection = {
         id: url,
         url,
@@ -40739,6 +41097,11 @@ function McpConnectionWrapper({
         proxyConfig,
         serverInfo: mcpHook.serverInfo,
         capabilities: mcpHook.capabilities,
+        notifications,
+        unreadNotificationCount: unreadCount,
+        markNotificationRead,
+        markAllNotificationsRead,
+        clearNotifications,
         callTool: mcpHook.callTool,
         readResource: mcpHook.readResource,
         listPrompts: mcpHook.listPrompts,
@@ -40749,7 +41112,7 @@ function McpConnectionWrapper({
         client: mcpHook.client
       };
       const prev = prevConnectionRef.current;
-      if (!prev || prev.state !== connection.state || prev.error !== connection.error || prev.authUrl !== connection.authUrl || prev.name !== connection.name || prev.tools.length !== connection.tools.length || prev.resources.length !== connection.resources.length || prev.prompts.length !== connection.prompts.length || prev.serverInfo !== connection.serverInfo || prev.capabilities !== connection.capabilities || !prev.client) {
+      if (!prev || prev.state !== connection.state || prev.error !== connection.error || prev.authUrl !== connection.authUrl || prev.name !== connection.name || prev.tools.length !== connection.tools.length || prev.resources.length !== connection.resources.length || prev.prompts.length !== connection.prompts.length || prev.serverInfo !== connection.serverInfo || prev.capabilities !== connection.capabilities || prev.notifications.length !== connection.notifications.length || prev.unreadNotificationCount !== connection.unreadNotificationCount || !prev.client) {
         prevConnectionRef.current = connection;
         onUpdateRef.current(connection);
       }
@@ -40770,6 +41133,10 @@ function McpConnectionWrapper({
     mcpHook.serverInfo,
     mcpHook.capabilities,
     mcpHook.client,
+    notifications,
+    markNotificationRead,
+    markAllNotificationsRead,
+    clearNotifications,
     // Stable functions don't strictly need to be here but good practice
     mcpHook.callTool,
     mcpHook.readResource,
@@ -40807,6 +41174,14 @@ function McpProvider({ children }) {
               customHeaders: config.proxyConfig?.customHeaders,
               transportType: config.transportType,
               proxyConfig: config.proxyConfig,
+              notifications: [],
+              unreadNotificationCount: 0,
+              markNotificationRead: () => {
+              },
+              markAllNotificationsRead: () => {
+              },
+              clearNotifications: () => {
+              },
               callTool: async () => {
               },
               readResource: async () => {
@@ -40877,6 +41252,14 @@ function McpProvider({ children }) {
           customHeaders: proxyConfig?.customHeaders,
           transportType,
           proxyConfig,
+          notifications: [],
+          unreadNotificationCount: 0,
+          markNotificationRead: () => {
+          },
+          markAllNotificationsRead: () => {
+          },
+          clearNotifications: () => {
+          },
           callTool: async () => {
           },
           readResource: async () => {
@@ -40947,7 +41330,7 @@ function McpProvider({ children }) {
         const index2 = prev.findIndex((c2) => c2.id === updatedConnection.id);
         if (index2 === -1) return prev;
         const current = prev[index2];
-        if (current.state === updatedConnection.state && current.tools === updatedConnection.tools && current.resources === updatedConnection.resources && current.prompts === updatedConnection.prompts && current.error === updatedConnection.error && current.serverInfo === updatedConnection.serverInfo && current.client === updatedConnection.client) {
+        if (current.state === updatedConnection.state && current.tools === updatedConnection.tools && current.resources === updatedConnection.resources && current.prompts === updatedConnection.prompts && current.error === updatedConnection.error && current.serverInfo === updatedConnection.serverInfo && current.client === updatedConnection.client && current.notifications === updatedConnection.notifications && current.unreadNotificationCount === updatedConnection.unreadNotificationCount) {
           return prev;
         }
         const newConnections = [...prev];
@@ -41075,23 +41458,34 @@ const createLucideIcon = (iconName, iconNode) => {
   Component.displayName = toPascalCase(iconName);
   return Component;
 };
-const __iconNode$U = [
+const __iconNode$V = [
   ["path", { d: "M12 17V3", key: "1cwfxf" }],
   ["path", { d: "m6 11 6 6 6-6", key: "12ii2o" }],
   ["path", { d: "M19 21H5", key: "150jfl" }]
 ];
-const ArrowDownToLine = createLucideIcon("arrow-down-to-line", __iconNode$U);
-const __iconNode$T = [
+const ArrowDownToLine = createLucideIcon("arrow-down-to-line", __iconNode$V);
+const __iconNode$U = [
   ["path", { d: "m18 9-6-6-6 6", key: "kcunyi" }],
   ["path", { d: "M12 3v14", key: "7cf3v8" }],
   ["path", { d: "M5 21h14", key: "11awu3" }]
 ];
-const ArrowUpFromLine = createLucideIcon("arrow-up-from-line", __iconNode$T);
-const __iconNode$S = [
+const ArrowUpFromLine = createLucideIcon("arrow-up-from-line", __iconNode$U);
+const __iconNode$T = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$S);
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$T);
+const __iconNode$S = [
+  ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
+  [
+    "path",
+    {
+      d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326",
+      key: "11g9vi"
+    }
+  ]
+];
+const Bell = createLucideIcon("bell", __iconNode$S);
 const __iconNode$R = [
   ["path", { d: "m11 10 3 3", key: "fzmg1i" }],
   [
@@ -82563,6 +82957,12 @@ function OpenAIComponentRendererBase({
       if (iframeRef.current?.contentWindow) {
         try {
           const iframeWindow = iframeRef.current.contentWindow;
+          const iframeDocument = iframeRef.current.contentDocument;
+          if (updates.theme !== void 0 && iframeDocument) {
+            const htmlElement = iframeDocument.documentElement;
+            htmlElement.setAttribute("data-theme", updates.theme);
+            htmlElement.style.colorScheme = updates.theme;
+          }
           if (iframeWindow.openai) {
             if (updates.displayMode !== void 0) {
               iframeWindow.openai.displayMode = updates.displayMode;
@@ -82869,6 +83269,14 @@ function OpenAIComponentRendererBase({
     updateIframeGlobals,
     useDevMode
   ]);
+  reactExports.useEffect(() => {
+    if (!iframeRef.current?.contentDocument || !isReady) return;
+    const iframeDoc = iframeRef.current.contentDocument;
+    const htmlElement = iframeDoc.documentElement;
+    htmlElement.setAttribute("data-theme", resolvedTheme);
+    htmlElement.style.colorScheme = resolvedTheme;
+    updateIframeGlobals({ theme: resolvedTheme });
+  }, [resolvedTheme, isReady, updateIframeGlobals]);
   reactExports.useEffect(() => {
     if (!widgetUrl) return;
     const measure = () => {
@@ -86425,7 +86833,7 @@ function useChatMessagesClientSide({
           let llm;
           if (llmConfig.provider === "openai") {
             const { ChatOpenAI } = await __vitePreload(async () => {
-              const { ChatOpenAI: ChatOpenAI2 } = await import("./index-CsP5AdwX.js");
+              const { ChatOpenAI: ChatOpenAI2 } = await import("./index-LnKUeTzV.js");
               return { ChatOpenAI: ChatOpenAI2 };
             }, true ? __vite__mapDeps([4,5,6,2,7]) : void 0);
             llm = new ChatOpenAI({
@@ -86434,7 +86842,7 @@ function useChatMessagesClientSide({
             });
           } else if (llmConfig.provider === "anthropic") {
             const { ChatAnthropic } = await __vitePreload(async () => {
-              const { ChatAnthropic: ChatAnthropic2 } = await import("./index-B0NYybvW.js");
+              const { ChatAnthropic: ChatAnthropic2 } = await import("./index-XmiNerc_.js");
               return { ChatAnthropic: ChatAnthropic2 };
             }, true ? __vite__mapDeps([8,5,6,2]) : void 0);
             llm = new ChatAnthropic({
@@ -86443,7 +86851,7 @@ function useChatMessagesClientSide({
             });
           } else if (llmConfig.provider === "google") {
             const { ChatGoogleGenerativeAI } = await __vitePreload(async () => {
-              const { ChatGoogleGenerativeAI: ChatGoogleGenerativeAI2 } = await import("./index-Q_pqNaNk.js");
+              const { ChatGoogleGenerativeAI: ChatGoogleGenerativeAI2 } = await import("./index-Bk_3A_7h.js");
               return { ChatGoogleGenerativeAI: ChatGoogleGenerativeAI2 };
             }, true ? __vite__mapDeps([9,5,6,2,7]) : void 0);
             llm = new ChatGoogleGenerativeAI({
@@ -86462,7 +86870,7 @@ function useChatMessagesClientSide({
         }
         if (!agentRef.current || agentRef.current.llm !== llmRef.current.instance) {
           const { MCPAgent } = await __vitePreload(async () => {
-            const { MCPAgent: MCPAgent2 } = await import("./browser-BdCJ_qyB.js");
+            const { MCPAgent: MCPAgent2 } = await import("./browser-8hDgrmFA.js");
             return { MCPAgent: MCPAgent2 };
           }, true ? __vite__mapDeps([10,6,2,1,3]) : void 0);
           agentRef.current = new MCPAgent({
@@ -89165,6 +89573,86 @@ function ResizableHandle({
     }
   );
 }
+function Kbd({ className, ...props2 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "kbd",
+    {
+      "data-slot": "kbd",
+      className: cn$1(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      ),
+      ...props2
+    }
+  );
+}
+function NotificationsTabHeader({
+  isSearchExpanded,
+  searchQuery,
+  filteredNotificationsCount,
+  notificationsCount,
+  onSearchExpand,
+  onSearchChange,
+  onSearchBlur,
+  onClearAll,
+  searchInputRef
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2 flex-1", children: !isSearchExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-medium text-gray-900 dark:text-gray-100", children: "Notifications" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Badge,
+        {
+          className: "bg-zinc-500/20 text-zinc-600 dark:text-zinc-400 border-transparent",
+          variant: "outline",
+          children: filteredNotificationsCount
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onSearchExpand,
+            className: "h-8 w-8 p-0",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "h-4 w-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipContent, { side: "bottom", className: "flex gap-2", children: [
+          "Search",
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Kbd, { children: "F" })
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Input,
+      {
+        ref: searchInputRef,
+        placeholder: "Search notifications...",
+        value: searchQuery,
+        onChange: (e) => onSearchChange(e.target.value),
+        onBlur: onSearchBlur,
+        className: "h-8 border-gray-300 dark:border-zinc-600"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: onClearAll,
+          disabled: notificationsCount === 0,
+          className: "h-8 w-8 p-0",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "bottom", children: "Clear all" })
+    ] }) })
+  ] });
+}
 function ListItem({
   id: id2,
   isSelected,
@@ -89189,7 +89677,7 @@ function ListItem({
         className
       ),
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 sm:gap-3", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        icon && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             className: cn$1(
@@ -89207,20 +89695,381 @@ function ListItem({
     }
   );
 }
-function Kbd({ className, ...props2 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "kbd",
-    {
-      "data-slot": "kbd",
-      className: cn$1(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        className
-      ),
-      ...props2
+function NotificationsList({
+  notifications,
+  selectedNotification,
+  onNotificationSelect,
+  focusedIndex,
+  formatRelativeTime: formatRelativeTime2,
+  listRef
+}) {
+  if (notifications.length === 0) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center h-full p-4 text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Bell, { className: "h-12 w-12 text-gray-400 dark:text-gray-600 mb-3" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "No notifications yet" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: listRef, className: "overflow-y-auto flex-1 overscroll-contain", children: notifications.map((notification, index2) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ListItem,
+      {
+        id: `notification-${notification.id}`,
+        isSelected: selectedNotification?.id === notification.id,
+        isFocused: focusedIndex === index2,
+        title: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-3", children: [
+          notification.method,
+          !notification.read && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size-1.5 block rounded-full bg-orange-500" })
+        ] }),
+        description: (() => {
+          const timeStr = formatRelativeTime2(notification.timestamp);
+          const paramCount = notification.params && Object.keys(notification.params).length > 0 ? Object.keys(notification.params).length : 0;
+          const paramStr = paramCount > 0 ? ` | ${paramCount} param${paramCount > 1 ? "s" : ""}` : "";
+          return timeStr + paramStr;
+        })(),
+        onClick: () => onNotificationSelect(notification)
+      },
+      notification.id
+    );
+  }) });
+}
+function NotificationResultDisplay({
+  notification,
+  previewMode,
+  onTogglePreview,
+  onCopy,
+  onDownload,
+  onFullscreen,
+  isCopied = false,
+  onClose
+}) {
+  if (!notification) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center h-full p-4 text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Bell, { className: "h-12 w-12 text-gray-400 dark:text-gray-600 mb-3" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "Select a notification to view details" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0 px-4 py-3 border-b border-gray-200 dark:border-zinc-700 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "h-3 w-3 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: new Date(notification.timestamp).toLocaleTimeString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: notification.formatRelativeTime(notification.timestamp) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onTogglePreview,
+            className: !previewMode ? "text-purple-600 dark:text-purple-400" : "",
+            children: [
+              previewMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(Code, { className: "h-4 w-4 mr-1" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Brush, { className: "h-4 w-4 mr-1" }),
+              previewMode ? "JSON" : "Formatted"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "sm", onClick: onCopy, children: isCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "sm", onClick: onDownload, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "sm", onClick: onFullscreen, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize, { className: "h-4 w-4" }) }),
+        onClose && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: /* @__PURE__ */ jsxRuntimeExports.jsx(X$3, { className: "h-4 w-4" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      JSONDisplay,
+      {
+        data: {
+          method: notification.method,
+          timestamp: notification.timestamp,
+          read: notification.read,
+          params: notification.params
+        },
+        filename: `notification-${notification.method.replace(/[^a-zA-Z0-9]/g, "-")}-${Date.now()}.json`
+      }
+    ) }) })
+  ] });
+}
+function formatRelativeTime(timestamp) {
+  const now2 = Date.now();
+  const diff = now2 - timestamp;
+  const seconds = Math.floor(diff / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (seconds < 60) {
+    return "just now";
+  } else if (minutes < 60) {
+    return `${minutes}m ago`;
+  } else if (hours < 24) {
+    return `${hours}h ago`;
+  } else if (days < 7) {
+    return `${days}d ago`;
+  } else {
+    return new Date(timestamp).toLocaleDateString();
+  }
+}
+function NotificationsTab({
+  notifications,
+  unreadCount: _unreadCount,
+  markNotificationRead,
+  markAllNotificationsRead: _markAllNotificationsRead,
+  clearNotifications,
+  serverId: _serverId,
+  isConnected
+}) {
+  const [selectedNotification, setSelectedNotification] = reactExports.useState(null);
+  const [searchQuery, setSearchQuery] = reactExports.useState("");
+  const [focusedIndex, setFocusedIndex] = reactExports.useState(-1);
+  const [autoScroll, setAutoScroll] = reactExports.useState(true);
+  const [isSearchExpanded, setIsSearchExpanded] = reactExports.useState(false);
+  const [previewMode, setPreviewMode] = reactExports.useState(true);
+  const [isCopied, setIsCopied] = reactExports.useState(false);
+  const listRef = reactExports.useRef(null);
+  const notificationDisplayRef = reactExports.useRef(null);
+  const searchInputRef = reactExports.useRef(null);
+  const userHasScrolledRef = reactExports.useRef(false);
+  reactExports.useEffect(() => {
+    if (autoScroll && notifications.length > 0 && listRef.current && !userHasScrolledRef.current) {
+      listRef.current.scrollTop = 0;
     }
+  }, [notifications.length, autoScroll]);
+  reactExports.useEffect(() => {
+    const listElement = listRef.current;
+    if (!listElement) return;
+    const handleScroll2 = () => {
+      if (listElement.scrollTop > 0) {
+        userHasScrolledRef.current = true;
+        setAutoScroll(false);
+      }
+    };
+    listElement.addEventListener("scroll", handleScroll2);
+    return () => listElement.removeEventListener("scroll", handleScroll2);
+  }, []);
+  reactExports.useEffect(() => {
+    if (notifications.length === 0) {
+      userHasScrolledRef.current = false;
+      setAutoScroll(true);
+    }
+  }, [notifications.length]);
+  reactExports.useEffect(() => {
+    if (selectedNotification && !selectedNotification.read) {
+      markNotificationRead(selectedNotification.id);
+    }
+  }, [selectedNotification, markNotificationRead]);
+  reactExports.useEffect(() => {
+    if (isSearchExpanded && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isSearchExpanded]);
+  const handleSearchBlur = reactExports.useCallback(() => {
+    if (!searchQuery.trim()) {
+      setIsSearchExpanded(false);
+    }
+  }, [searchQuery]);
+  const filteredNotifications = reactExports.useMemo(() => {
+    if (!searchQuery.trim()) return notifications;
+    const query = searchQuery.toLowerCase();
+    return notifications.filter(
+      (notification) => notification.method.toLowerCase().includes(query) || JSON.stringify(notification.params || {}).toLowerCase().includes(query)
+    );
+  }, [notifications, searchQuery]);
+  reactExports.useEffect(() => {
+    setFocusedIndex(-1);
+  }, [searchQuery]);
+  reactExports.useEffect(() => {
+    const handleKeyDown = (e) => {
+      const target = e.target;
+      const isInputFocused = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.contentEditable === "true";
+      if (isInputFocused || e.metaKey || e.ctrlKey || e.altKey) {
+        return;
+      }
+      const items2 = filteredNotifications;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const next = prev + 1;
+          return next >= items2.length ? 0 : next;
+        });
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const next = prev - 1;
+          return next < 0 ? items2.length - 1 : next;
+        });
+      } else if (e.key === "Enter" && focusedIndex >= 0) {
+        e.preventDefault();
+        const notification = filteredNotifications[focusedIndex];
+        if (notification) {
+          handleNotificationSelect(notification);
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [focusedIndex, filteredNotifications]);
+  reactExports.useEffect(() => {
+    if (focusedIndex >= 0) {
+      const itemId = `notification-${filteredNotifications[focusedIndex]?.id}`;
+      const element = document.getElementById(itemId);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    }
+  }, [focusedIndex, filteredNotifications]);
+  const handleNotificationSelect = reactExports.useCallback(
+    (notification) => {
+      setSelectedNotification(notification);
+    },
+    []
   );
+  const handleClearAll = reactExports.useCallback(() => {
+    if (window.confirm(
+      "Are you sure you want to clear all notifications? This cannot be undone."
+    )) {
+      clearNotifications();
+      setSelectedNotification(null);
+    }
+  }, [clearNotifications]);
+  const handleCopy = reactExports.useCallback(async () => {
+    if (!selectedNotification) return;
+    try {
+      await navigator.clipboard.writeText(
+        JSON.stringify(
+          {
+            method: selectedNotification.method,
+            timestamp: selectedNotification.timestamp,
+            read: selectedNotification.read,
+            params: selectedNotification.params
+          },
+          null,
+          2
+        )
+      );
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2e3);
+    } catch (error) {
+      console.error("[NotificationsTab] Failed to copy notification:", error);
+    }
+  }, [selectedNotification]);
+  const handleDownload = reactExports.useCallback(() => {
+    if (!selectedNotification) return;
+    try {
+      const blob = new globalThis.Blob(
+        [
+          JSON.stringify(
+            {
+              method: selectedNotification.method,
+              timestamp: selectedNotification.timestamp,
+              read: selectedNotification.read,
+              params: selectedNotification.params
+            },
+            null,
+            2
+          )
+        ],
+        {
+          type: "application/json"
+        }
+      );
+      const url = URL.createObjectURL(blob);
+      const a2 = document.createElement("a");
+      a2.href = url;
+      a2.download = `notification-${Date.now()}.json`;
+      document.body.appendChild(a2);
+      a2.click();
+      document.body.removeChild(a2);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error(
+        "[NotificationsTab] Failed to download notification:",
+        error
+      );
+    }
+  }, [selectedNotification]);
+  const handleFullscreen = reactExports.useCallback(async () => {
+    if (!notificationDisplayRef.current) return;
+    try {
+      if (!document.fullscreenElement) {
+        await notificationDisplayRef.current.requestFullscreen();
+      } else {
+        await document.exitFullscreen();
+      }
+    } catch (error) {
+      console.error("[NotificationsTab] Failed to toggle fullscreen:", error);
+    }
+  }, []);
+  const notificationResult = selectedNotification ? {
+    method: selectedNotification.method,
+    params: selectedNotification.params,
+    timestamp: selectedNotification.timestamp,
+    read: selectedNotification.read,
+    formatRelativeTime
+  } : null;
+  if (!isConnected) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center h-full p-4 text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Bell, { className: "h-12 w-12 text-gray-400 dark:text-gray-600 mb-3" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "Not connected to server" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ResizablePanelGroup, { direction: "horizontal", className: "h-full", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ResizablePanel, { defaultSize: 40, minSize: 30, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ResizablePanelGroup,
+      {
+        direction: "vertical",
+        className: "h-full border-r dark:border-zinc-700",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ResizablePanel, { defaultSize: 75, minSize: 30, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            NotificationsTabHeader,
+            {
+              isSearchExpanded,
+              searchQuery,
+              filteredNotificationsCount: filteredNotifications.length,
+              notificationsCount: notifications.length,
+              onSearchExpand: () => setIsSearchExpanded(true),
+              onSearchChange: setSearchQuery,
+              onSearchBlur: handleSearchBlur,
+              onClearAll: handleClearAll,
+              searchInputRef
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            NotificationsList,
+            {
+              notifications: filteredNotifications,
+              selectedNotification,
+              onNotificationSelect: handleNotificationSelect,
+              focusedIndex,
+              formatRelativeTime,
+              listRef
+            }
+          ) })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableHandle, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ResizablePanel, { defaultSize: 60, minSize: 40, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref: notificationDisplayRef,
+        className: "h-full bg-white dark:bg-zinc-900",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          NotificationResultDisplay,
+          {
+            notification: notificationResult,
+            previewMode,
+            onTogglePreview: () => setPreviewMode(!previewMode),
+            onCopy: handleCopy,
+            onDownload: handleDownload,
+            onFullscreen: handleFullscreen,
+            onClose: () => setSelectedNotification(null),
+            isCopied
+          }
+        )
+      }
+    ) })
+  ] });
 }
 function ListTabHeader({
   activeTab,
@@ -90300,7 +91149,7 @@ function PromptsTab({
                   defaultSize: 0,
                   collapsible: true,
                   minSize: 5,
-                  collapsedSize: 5,
+                  collapsedSize: 6,
                   onCollapse: () => setRpcPanelCollapsed(true),
                   onExpand: () => setRpcPanelCollapsed(false),
                   className: "flex flex-col border-t dark:border-zinc-700",
@@ -91116,7 +91965,7 @@ function ResourcesTab({
               defaultSize: 0,
               collapsible: true,
               minSize: 5,
-              collapsedSize: 5,
+              collapsedSize: 6,
               onCollapse: () => setRpcPanelCollapsed(true),
               onExpand: () => setRpcPanelCollapsed(false),
               className: "flex flex-col border-t dark:border-zinc-700",
@@ -92694,7 +93543,7 @@ function ToolsTab({
                   defaultSize: 0,
                   collapsible: true,
                   minSize: 5,
-                  collapsedSize: 5,
+                  collapsedSize: 6,
                   onCollapse: () => {
                     setRpcPanelCollapsed(true);
                   },
@@ -92872,6 +93721,19 @@ function LayoutContent({
         },
         selectedServer.id
       );
+    case "notifications":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        NotificationsTab,
+        {
+          notifications: selectedServer.notifications,
+          unreadCount: selectedServer.unreadNotificationCount,
+          markNotificationRead: selectedServer.markNotificationRead,
+          markAllNotificationsRead: selectedServer.markAllNotificationsRead,
+          clearNotifications: selectedServer.clearNotifications,
+          serverId: selectedServer.id,
+          isConnected: selectedServer.state === "ready"
+        }
+      );
     default:
       return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
   }
@@ -93968,7 +94830,8 @@ const tabs = [
   { id: "tools", label: "Tools", icon: Wrench },
   { id: "prompts", label: "Prompts", icon: MessageSquare },
   { id: "resources", label: "Resources", icon: FolderOpen },
-  { id: "chat", label: "Chat", icon: MessageCircle }
+  { id: "chat", label: "Chat", icon: MessageCircle },
+  { id: "notifications", label: "Notifications", icon: Bell }
 ];
 function LayoutHeader({
   connections,
@@ -94038,13 +94901,15 @@ function LayoutHeader({
               count2 = selectedServer.prompts.length;
             } else if (tab.id === "resources") {
               count2 = selectedServer.resources.length;
+            } else if (tab.id === "notifications") {
+              count2 = selectedServer.unreadNotificationCount;
             }
             return /* @__PURE__ */ jsxRuntimeExports.jsxs(
               TabsTrigger,
               {
                 value: tab.id,
                 icon: tab.icon,
-                className: "[&>svg]:mr-0 flex-1 flex-row gap-2",
+                className: "[&>svg]:mr-0 flex-1 flex-row gap-2 relative",
                 children: [
                   count2 > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "span",
@@ -94089,13 +94954,15 @@ function LayoutHeader({
                 count2 = selectedServer.prompts.length;
               } else if (tab.id === "resources") {
                 count2 = selectedServer.resources.length;
+              } else if (tab.id === "notifications") {
+                count2 = selectedServer.unreadNotificationCount;
               }
               return /* @__PURE__ */ jsxRuntimeExports.jsx(
                 TabsTrigger,
                 {
                   value: tab.id,
                   icon: tab.icon,
-                  className: "[&>svg]:mr-0 lg:[&>svg]:mr-2",
+                  className: "[&>svg]:mr-0 lg:[&>svg]:mr-2 relative",
                   children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "items-center gap-2 hidden lg:flex", children: [
                     tab.label,
                     count2 > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(