@burtson-labs/bandit-engine 2.0.73 → 2.0.75

package/dist/index.js

@@ -3263,14 +3263,72 @@ var init_knowledgeStore = __esm({
   }
 });
 
+// src/services/mcp/mcpServersService.ts
+var gatewayBase, authHeaders, parse, listMcpServers, addMcpServer, updateMcpServer, deleteMcpServer, discoverMcpTools;
+var init_mcpServersService = __esm({
+  "src/services/mcp/mcpServersService.ts"() {
+    "use strict";
+    init_packageSettingsStore();
+    init_authenticationService();
+    gatewayBase = () => {
+      const settings = usePackageSettingsStore.getState().settings;
+      const url = settings?.gatewayApiUrl?.replace(/\/$/, "");
+      if (!url) throw new Error("Gateway API is not configured.");
+      return url;
+    };
+    authHeaders = () => {
+      const headers = { "Content-Type": "application/json" };
+      const token = authenticationService.getToken();
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+      return headers;
+    };
+    parse = async (res) => {
+      const text = await res.text();
+      const body = text ? JSON.parse(text) : null;
+      if (!res.ok) {
+        const message = body && typeof body === "object" && (body.error || body.message) || `Request failed (${res.status})`;
+        throw new Error(String(message));
+      }
+      return body;
+    };
+    listMcpServers = async () => parse(await fetch(`${gatewayBase()}/mcp/servers`, { headers: authHeaders() }));
+    addMcpServer = async (input) => parse(
+      await fetch(`${gatewayBase()}/mcp/servers`, {
+        method: "POST",
+        headers: authHeaders(),
+        body: JSON.stringify(input)
+      })
+    );
+    updateMcpServer = async (id, input) => parse(
+      await fetch(`${gatewayBase()}/mcp/servers/${encodeURIComponent(id)}`, {
+        method: "PUT",
+        headers: authHeaders(),
+        body: JSON.stringify(input)
+      })
+    );
+    deleteMcpServer = async (id) => {
+      const res = await fetch(`${gatewayBase()}/mcp/servers/${encodeURIComponent(id)}`, {
+        method: "DELETE",
+        headers: authHeaders()
+      });
+      if (!res.ok && res.status !== 204) {
+        throw new Error(`Could not remove the server (${res.status}).`);
+      }
+    };
+    discoverMcpTools = async (id) => parse(await fetch(`${gatewayBase()}/mcp/servers/${encodeURIComponent(id)}/tools`, { headers: authHeaders() }));
+  }
+});
+
 // src/store/mcpToolsStore.ts
-var import_zustand11, healthCheckTool, webSearchTool, webFetchTool, imageGenerationTool, createFileTool, defaultTools, useMCPToolsStore;
+var import_zustand11, sanitizeMcpToolName, healthCheckTool, webSearchTool, webFetchTool, imageGenerationTool, createFileTool, defaultTools, useMCPToolsStore;
 var init_mcpToolsStore = __esm({
   "src/store/mcpToolsStore.ts"() {
     "use strict";
     import_zustand11 = require("zustand");
     init_indexedDBService();
     init_debugLogger();
+    init_mcpServersService();
+    sanitizeMcpToolName = (raw) => raw.replace(/[^a-zA-Z0-9_]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "").slice(0, 60);
     healthCheckTool = {
       id: "health-check",
       name: "check_gateway_health",
@@ -3457,7 +3515,7 @@ var init_mcpToolsStore = __esm({
         try {
           const { tools } = get();
           const storeConfigs6 = [{ name: "config", keyPath: "id" }];
-          const customTools = tools.filter((tool) => !tool.isBuiltIn);
+          const customTools = tools.filter((tool) => !tool.isBuiltIn && !tool.mcpServerId);
           await indexedDBService_default.put("banditConfig", 1, "config", {
             id: "mcpTools",
             tools: customTools
@@ -3466,6 +3524,48 @@ var init_mcpToolsStore = __esm({
         } catch (error) {
           debugLogger.error("Failed to save MCP tools to IndexedDB", { error });
         }
+      },
+      // Discover the user's connected MCP servers' tools from the gateway and merge
+      // them into the tool list (so the model can call them). Replaces any prior
+      // MCP-server tools; best-effort — a single unreachable server is skipped.
+      loadMcpServerTools: async () => {
+        let servers;
+        try {
+          servers = await listMcpServers();
+        } catch (error) {
+          debugLogger.warn("Could not list MCP servers", { error: String(error) });
+          return;
+        }
+        const collected = [];
+        for (const server of servers.filter((s) => s.enabled)) {
+          try {
+            const { tools } = await discoverMcpTools(server.id);
+            for (const t of tools) {
+              const fnName = sanitizeMcpToolName(`mcp_${server.name}_${t.name}`);
+              const schema = t.inputSchema && typeof t.inputSchema === "object" && t.inputSchema.type === "object" ? t.inputSchema : { type: "object", properties: {}, required: [] };
+              collected.push({
+                id: `mcp-${server.id}-${t.name}`,
+                name: fnName,
+                description: t.description || `${t.name} (via ${server.name})`,
+                enabled: true,
+                type: "function",
+                function: {
+                  name: fnName,
+                  description: t.description || `${t.name} \u2014 provided by the ${server.name} MCP server.`,
+                  parameters: schema
+                },
+                mcpServerId: server.id,
+                mcpToolName: t.name
+              });
+            }
+          } catch (error) {
+            debugLogger.warn("Failed to discover tools for MCP server", { server: server.name, error: String(error) });
+          }
+        }
+        set((state) => ({
+          tools: [...state.tools.filter((t) => !t.mcpServerId), ...collected]
+        }));
+        debugLogger.info("MCP server tools loaded", { count: collected.length });
       }
     }));
   }
@@ -20150,6 +20250,34 @@ var init_mcpService = __esm({
             error: "Gateway API not configured"
           };
         }
+        if (tool.mcpServerId) {
+          const base2 = settings.gatewayApiUrl.replace(/\/$/, "");
+          const token2 = authenticationService.getToken();
+          const controller2 = new AbortController();
+          const timeoutId2 = setTimeout(() => controller2.abort(), 3e4);
+          try {
+            const res = await fetch(`${base2}/mcp/invoke`, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                ...token2 ? { Authorization: `Bearer ${token2}` } : {}
+              },
+              body: JSON.stringify({
+                serverId: tool.mcpServerId,
+                tool: tool.mcpToolName ?? toolCall.toolName,
+                arguments: toolCall.parameters ?? {}
+              }),
+              signal: controller2.signal
+            });
+            const data2 = await res.json();
+            if (!res.ok) {
+              return { success: false, error: data2?.error || `MCP call failed: ${res.status}`, data: data2 };
+            }
+            return { success: !data2?.isError, data: typeof data2?.output === "string" ? data2.output : data2 };
+          } finally {
+            clearTimeout(timeoutId2);
+          }
+        }
         if (!tool.endpoint) {
           return {
             success: false,
@@ -30869,6 +30997,7 @@ var ChatProvider = (props) => {
         await usePreferencesStore.getState().loadPreferences();
         await useKnowledgeStore.getState().loadDocs();
         await useMCPToolsStore.getState().loadTools();
+        void useMCPToolsStore.getState().loadMcpServerTools();
         await useConversationSyncStore.getState().initialize();
       }
       debugLogger.info("ChatProvider about to call initModels - checking for existing branding first");
@@ -30981,12 +31110,12 @@ var chat_provider_default = ChatProvider;
 init_chat2();
 
 // src/management/management.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 var import_useMediaQuery2 = __toESM(require("@mui/material/useMediaQuery"));
 var import_styles32 = require("@mui/material/styles");
 init_useKnowledgeStore();
 init_indexedDBService();
-var import_material49 = require("@mui/material");
+var import_material50 = require("@mui/material");
 var import_react_router_dom5 = require("react-router-dom");
 
 // src/modals/chat-modal/chat-modal.tsx
@@ -42745,8 +42874,8 @@ var ProviderTab = () => {
 };
 
 // src/management/components/MCPToolsTabV2.tsx
-var import_react58 = require("react");
-var import_material48 = require("@mui/material");
+var import_react59 = require("react");
+var import_material49 = require("@mui/material");
 
 // src/services/mcp/mcpControllerService.ts
 init_packageSettingsStore();
@@ -42772,7 +42901,7 @@ function buildUrl3(path) {
   }
   return path;
 }
-function authHeaders() {
+function authHeaders2() {
   const headers = { "Content-Type": "application/json" };
   const token = authenticationService.getToken();
   if (token) headers["Authorization"] = `Bearer ${token}`;
@@ -42785,7 +42914,7 @@ async function fetchAvailableMcpTools() {
   }
   const url = buildUrl3("/mcp/tools");
   try {
-    const res = await fetch(url, { headers: authHeaders() });
+    const res = await fetch(url, { headers: authHeaders2() });
     const data = await res.json();
     if (!res.ok) {
       throw new Error(data?.error || `Failed to load MCP tools (${res.status})`);
@@ -42809,7 +42938,7 @@ async function fetchMcpHealth() {
   }
   const url = buildUrl3("/mcp/health");
   try {
-    const res = await fetch(url, { headers: authHeaders() });
+    const res = await fetch(url, { headers: authHeaders2() });
     const data = await res.json();
     if (!res.ok) {
       throw new Error(data?.error || `Failed to fetch MCP health (${res.status})`);
@@ -42821,18 +42950,230 @@ async function fetchMcpHealth() {
   }
 }
 
+// src/management/components/McpServersSection.tsx
+var import_react58 = require("react");
+var import_material48 = require("@mui/material");
+init_lucide_icons();
+init_mcpServersService();
+init_mcpToolsStore();
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var emptyForm = { name: "", url: "", authType: "none", authValue: "", headerName: "" };
+var McpServersSection = () => {
+  const [servers, setServers] = (0, import_react58.useState)([]);
+  const [loading, setLoading] = (0, import_react58.useState)(false);
+  const [error, setError] = (0, import_react58.useState)(null);
+  const [form, setForm] = (0, import_react58.useState)(emptyForm);
+  const [adding, setAdding] = (0, import_react58.useState)(false);
+  const [showForm, setShowForm] = (0, import_react58.useState)(false);
+  const [tools, setTools] = (0, import_react58.useState)({});
+  const reloadChatTools = useMCPToolsStore((s) => s.loadMcpServerTools);
+  const refresh = (0, import_react58.useCallback)(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      setServers(await listMcpServers());
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not load MCP servers.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  (0, import_react58.useEffect)(() => {
+    refresh();
+  }, [refresh]);
+  const handleAdd = async () => {
+    if (!form.name.trim() || !form.url.trim()) {
+      setError("Name and URL are required.");
+      return;
+    }
+    setAdding(true);
+    setError(null);
+    try {
+      await addMcpServer({
+        name: form.name.trim(),
+        url: form.url.trim(),
+        authType: form.authType,
+        authValue: form.authType === "none" ? void 0 : form.authValue,
+        headerName: form.authType === "header" ? form.headerName : void 0
+      });
+      setForm(emptyForm);
+      setShowForm(false);
+      await refresh();
+      void reloadChatTools();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not add the server.");
+    } finally {
+      setAdding(false);
+    }
+  };
+  const handleDelete = async (id) => {
+    setError(null);
+    try {
+      await deleteMcpServer(id);
+      await refresh();
+      void reloadChatTools();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not remove the server.");
+    }
+  };
+  const handleToggle = async (server) => {
+    setError(null);
+    try {
+      await updateMcpServer(server.id, { enabled: !server.enabled });
+      await refresh();
+      void reloadChatTools();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not update the server.");
+    }
+  };
+  const handleDiscover = async (id) => {
+    setTools((prev) => ({ ...prev, [id]: "loading" }));
+    try {
+      const { tools: discovered } = await discoverMcpTools(id);
+      setTools((prev) => ({ ...prev, [id]: discovered }));
+    } catch (e) {
+      setTools((prev) => ({ ...prev, [id]: { error: e instanceof Error ? e.message : "Could not connect." } }));
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Paper, { sx: { p: 2, mb: 2 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1, gap: 1, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CloudIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "subtitle1", sx: { fontWeight: 700 }, children: "MCP Servers" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Chip, { size: "small", label: String(servers.length) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Tooltip, { title: "Refresh", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.IconButton, { onClick: refresh, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RefreshIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Button, { size: "small", variant: "contained", startIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AddIcon, {}), onClick: () => setShowForm((v) => !v), children: "Add server" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: "Connect a remote Model Context Protocol server to give the assistant its tools. The gateway holds the connection and proxies calls \u2014 your browser never talks to the server directly." }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Alert, { severity: "error", sx: { mb: 2 }, onClose: () => setError(null), children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Collapse, { in: showForm, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Paper, { variant: "outlined", sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Stack, { spacing: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        import_material48.TextField,
+        {
+          label: "Name",
+          size: "small",
+          value: form.name,
+          onChange: (e) => setForm({ ...form, name: e.target.value }),
+          placeholder: "e.g. github",
+          fullWidth: true
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        import_material48.TextField,
+        {
+          label: "Server URL",
+          size: "small",
+          value: form.url,
+          onChange: (e) => setForm({ ...form, url: e.target.value }),
+          placeholder: "https://mcp.example.com/mcp",
+          fullWidth: true
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+        import_material48.TextField,
+        {
+          select: true,
+          label: "Auth",
+          size: "small",
+          value: form.authType,
+          onChange: (e) => setForm({ ...form, authType: e.target.value }),
+          sx: { maxWidth: 220 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.MenuItem, { value: "none", children: "None" }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.MenuItem, { value: "bearer", children: "Bearer token" }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.MenuItem, { value: "header", children: "Custom header" })
+          ]
+        }
+      ),
+      form.authType === "header" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        import_material48.TextField,
+        {
+          label: "Header name",
+          size: "small",
+          value: form.headerName,
+          onChange: (e) => setForm({ ...form, headerName: e.target.value }),
+          placeholder: "X-Api-Key",
+          fullWidth: true
+        }
+      ),
+      form.authType !== "none" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        import_material48.TextField,
+        {
+          label: form.authType === "bearer" ? "Token" : "Header value",
+          size: "small",
+          type: "password",
+          value: form.authValue,
+          onChange: (e) => setForm({ ...form, authValue: e.target.value }),
+          fullWidth: true
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", gap: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Button, { variant: "contained", onClick: handleAdd, disabled: adding, children: adding ? "Adding\u2026" : "Add server" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          import_material48.Button,
+          {
+            onClick: () => {
+              setShowForm(false);
+              setForm(emptyForm);
+            },
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] }) }) }),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.LinearProgress, { sx: { mb: 2 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Stack, { spacing: 1.5, children: [
+      servers.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body2", color: "text.secondary", children: "No MCP servers connected yet." }),
+      servers.map((server) => {
+        const toolState = tools[server.id];
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Paper, { variant: "outlined", sx: { p: 1.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { minWidth: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "subtitle2", sx: { fontWeight: 700 }, children: server.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "caption", color: "text.secondary", sx: { wordBreak: "break-all" }, children: server.url })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5, flexShrink: 0 }, children: [
+              server.hasAuth && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Chip, { size: "small", label: server.authType }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Tooltip, { title: server.enabled ? "Enabled" : "Disabled", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                import_material48.FormControlLabel,
+                {
+                  sx: { mr: 0 },
+                  control: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Switch, { size: "small", checked: server.enabled, onChange: () => handleToggle(server) }),
+                  label: ""
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Tooltip, { title: "Test & list tools", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.IconButton, { size: "small", onClick: () => handleDiscover(server.id), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RefreshIcon, {}) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Tooltip, { title: "Remove", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.IconButton, { size: "small", onClick: () => handleDelete(server.id), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DeleteIcon, {}) }) })
+            ] })
+          ] }),
+          toolState === "loading" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { mt: 1, display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.CircularProgress, { size: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "caption", color: "text.secondary", children: "Connecting\u2026" })
+          ] }),
+          Array.isArray(toolState) && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { sx: { mt: 1, display: "flex", flexWrap: "wrap", gap: 0.5 }, children: toolState.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "caption", color: "text.secondary", children: "Connected \u2014 no tools reported." }) : toolState.map((t) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Tooltip, { title: t.description || "", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Chip, { size: "small", label: t.name }) }, t.name)) }),
+          toolState && !Array.isArray(toolState) && toolState !== "loading" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Alert, { severity: "warning", sx: { mt: 1 }, children: toolState.error })
+        ] }, server.id);
+      })
+    ] })
+  ] });
+};
+var McpServersSection_default = McpServersSection;
+
 // src/management/components/MCPToolsTabV2.tsx
 init_mcpToolsStore();
 init_packageSettingsStore();
 init_lucide_icons();
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var MCPToolsTabV2 = () => {
   const { settings } = usePackageSettingsStore();
   const { tools: localTools, loadTools, toggleTool, addTool, updateTool, isLoaded } = useMCPToolsStore();
-  const [loading, setLoading] = (0, import_react58.useState)(true);
-  const [error, setError] = (0, import_react58.useState)(null);
-  const [tools, setTools] = (0, import_react58.useState)([]);
-  const [health, setHealth] = (0, import_react58.useState)(null);
+  const [loading, setLoading] = (0, import_react59.useState)(true);
+  const [error, setError] = (0, import_react59.useState)(null);
+  const [tools, setTools] = (0, import_react59.useState)([]);
+  const [health, setHealth] = (0, import_react59.useState)(null);
   const gatewayConfigured = !!settings?.gatewayApiUrl;
   const refresh = async () => {
     setLoading(true);
@@ -42886,7 +43227,7 @@ var MCPToolsTabV2 = () => {
       setLoading(false);
     }
   };
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (isLoaded) {
       refresh();
     } else {
@@ -42895,7 +43236,7 @@ var MCPToolsTabV2 = () => {
       });
     }
   }, [isLoaded]);
-  const localEnabledMap = (0, import_react58.useMemo)(() => {
+  const localEnabledMap = (0, import_react59.useMemo)(() => {
     const map23 = /* @__PURE__ */ new Map();
     const sortedTools = [...localTools].sort((a, b) => {
       if (a.isBuiltIn && !b.isBuiltIn) return -1;
@@ -42911,17 +43252,18 @@ var MCPToolsTabV2 = () => {
     });
     return map23;
   }, [localTools]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "h5", sx: { fontWeight: 600, color: "primary.main" }, children: "Available Tools" }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Tooltip, { title: "Refresh", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.IconButton, { onClick: refresh, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RefreshIcon, {}) }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material49.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material49.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Typography, { variant: "h5", sx: { fontWeight: 600, color: "primary.main" }, children: "Available Tools" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Tooltip, { title: "Refresh", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.IconButton, { onClick: refresh, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RefreshIcon, {}) }) }) })
     ] }),
-    !gatewayConfigured && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Paper, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body2", color: "text.secondary", children: "Gateway API URL isn\u2019t configured. The controller endpoints will be fetched relative to this origin." }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Paper, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-      health?.status === "healthy" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(HealthAndSafetyIcon, { color: "success" }) : health?.status === "unhealthy" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ErrorOutlineIcon, { color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ErrorOutlineIcon, { color: "disabled" }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, children: "Controller Health" }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-        import_material48.Chip,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(McpServersSection_default, {}),
+    !gatewayConfigured && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Paper, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Typography, { variant: "body2", color: "text.secondary", children: "Gateway API URL isn\u2019t configured. The controller endpoints will be fetched relative to this origin." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Paper, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material49.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      health?.status === "healthy" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(HealthAndSafetyIcon, { color: "success" }) : health?.status === "unhealthy" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ErrorOutlineIcon, { color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ErrorOutlineIcon, { color: "disabled" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, children: "Controller Health" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        import_material49.Chip,
         {
           size: "small",
           label: (health?.status || "unknown").toString(),
@@ -42929,11 +43271,11 @@ var MCPToolsTabV2 = () => {
           sx: { ml: 1 }
         }
       ),
-      health?.timestamp && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "caption", color: "text.secondary", sx: { ml: 1 }, children: new Date(health.timestamp).toLocaleString() })
+      health?.timestamp && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Typography, { variant: "caption", color: "text.secondary", sx: { ml: 1 }, children: new Date(health.timestamp).toLocaleString() })
     ] }) }),
-    loading && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.LinearProgress, {}) }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Paper, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { color: "error", children: error }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Stack, { spacing: 2, children: tools.map((tool) => {
+    loading && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.LinearProgress, {}) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Paper, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Typography, { color: "error", children: error }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Stack, { spacing: 2, children: tools.map((tool) => {
       let locallyEnabled = localEnabledMap.get(tool.id);
       if (locallyEnabled === void 0) {
         locallyEnabled = localEnabledMap.get(tool.name);
@@ -42944,17 +43286,17 @@ var MCPToolsTabV2 = () => {
         );
         locallyEnabled = directLookup?.enabled ?? tool.isEnabled;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Paper, { sx: { p: 2 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "h6", sx: { fontWeight: 700 }, children: tool.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: tool.description })
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material49.Paper, { sx: { p: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material49.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material49.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Typography, { variant: "h6", sx: { fontWeight: 700 }, children: tool.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: tool.description })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-              import_material48.FormControlLabel,
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material49.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              import_material49.FormControlLabel,
               {
-                control: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Switch, { checked: !!locallyEnabled, onChange: () => {
+                control: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Switch, { checked: !!locallyEnabled, onChange: () => {
                   let local = localTools.find((t) => t.function.name === tool.id);
                   if (!local) {
                     local = localTools.find((t) => t.function.name === tool.name);
@@ -42974,12 +43316,12 @@ var MCPToolsTabV2 = () => {
                 label: locallyEnabled ? "Enabled" : "Disabled"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Tooltip, { title: "Controller-driven tools (read-only schema)", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SettingsIcon, { color: "disabled" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Tooltip, { title: "Controller-driven tools (read-only schema)", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SettingsIcon, { color: "disabled" }) })
           ] })
         ] }),
-        !!tool.supportedParameters?.length && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { mt: 1.5 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "caption", color: "text.secondary", children: "Supported parameters" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { sx: { mt: 0.5, display: "flex", flexWrap: "wrap", gap: 1 }, children: tool.supportedParameters.map((p) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Chip, { size: "small", label: p }, p)) })
+        !!tool.supportedParameters?.length && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material49.Box, { sx: { mt: 1.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Typography, { variant: "caption", color: "text.secondary", children: "Supported parameters" }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Box, { sx: { mt: 0.5, display: "flex", flexWrap: "wrap", gap: 1 }, children: tool.supportedParameters.map((p) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Chip, { size: "small", label: p }, p)) })
         ] })
       ] }, tool.id);
     }) })
@@ -43002,7 +43344,7 @@ init_authenticationStore();
 init_useNotificationService();
 init_useFeatures();
 init_lucide_icons();
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var preloadChatPage = () => Promise.resolve().then(() => (init_chat2(), chat_exports));
 var buildCapabilitiesUrl = (gatewayApiUrl) => {
   const trimmed = gatewayApiUrl.replace(/\/$/, "");
@@ -43015,7 +43357,7 @@ var Management = () => {
   const navigate = (0, import_react_router_dom5.useNavigate)();
   const notificationService2 = useNotificationService();
   const isMobile = (0, import_useMediaQuery2.default)("(max-width:900px)");
-  const [sidebarOpen, setSidebarOpen] = (0, import_react59.useState)(false);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react60.useState)(false);
   const getOptimalFabLogo = async () => {
     const banditHead6 = "https://cdn.burtson.ai/images/bandit-head.png";
     try {
@@ -43055,16 +43397,16 @@ var Management = () => {
     hasTransparentLogo,
     setHasTransparentLogo
   } = useModelStore();
-  const [modalOpen, setModalOpen] = (0, import_react59.useState)(false);
+  const [modalOpen, setModalOpen] = (0, import_react60.useState)(false);
   const banditHead5 = "https://cdn.burtson.ai/images/bandit-head.png";
-  const [fabLogo, setFabLogo] = (0, import_react59.useState)(banditHead5);
-  const [tabIndex, setTabIndex] = (0, import_react59.useState)(4);
-  const [logoFile, setLogoFile] = (0, import_react59.useState)(null);
-  const [logoBase64, setLogoBase64] = (0, import_react59.useState)(null);
-  const [brandingText, setBrandingText] = (0, import_react59.useState)("");
-  const [theme, setTheme] = (0, import_react59.useState)("bandit-dark");
-  const [customAvatarBase64, setCustomAvatarBase64] = (0, import_react59.useState)(null);
-  const [presetAvatar, setPresetAvatar] = (0, import_react59.useState)(null);
+  const [fabLogo, setFabLogo] = (0, import_react60.useState)(banditHead5);
+  const [tabIndex, setTabIndex] = (0, import_react60.useState)(4);
+  const [logoFile, setLogoFile] = (0, import_react60.useState)(null);
+  const [logoBase64, setLogoBase64] = (0, import_react60.useState)(null);
+  const [brandingText, setBrandingText] = (0, import_react60.useState)("");
+  const [theme, setTheme] = (0, import_react60.useState)("bandit-dark");
+  const [customAvatarBase64, setCustomAvatarBase64] = (0, import_react60.useState)(null);
+  const [presetAvatar, setPresetAvatar] = (0, import_react60.useState)(null);
   const showSnackbarMessage = (message, severity = "success") => {
     if (severity === "success") {
       notificationService2?.showSuccess(message);
@@ -43072,9 +43414,9 @@ var Management = () => {
       notificationService2?.showError(message);
     }
   };
-  const [restoreDialogOpen, setRestoreDialogOpen] = (0, import_react59.useState)(false);
-  const [brandingLoaded, setBrandingLoaded] = (0, import_react59.useState)(false);
-  const [isLoadingBranding, setIsLoadingBranding] = (0, import_react59.useState)(false);
+  const [restoreDialogOpen, setRestoreDialogOpen] = (0, import_react60.useState)(false);
+  const [brandingLoaded, setBrandingLoaded] = (0, import_react60.useState)(false);
+  const [isLoadingBranding, setIsLoadingBranding] = (0, import_react60.useState)(false);
   const { initModels } = useModelStore();
   const { settings: packageSettings } = usePackageSettingsStore();
   const authToken = useAuthenticationStore((state) => state.token);
@@ -43082,8 +43424,8 @@ var Management = () => {
   const { hasAdminDashboard, hasLimitedAdminDashboard, getCurrentTier, hasAdvancedSearch } = useFeatures();
   const { showAdminPanel, showLimitedAdminPanel } = useFeatureVisibility();
   const { provider: currentProvider, config: currentProviderConfig } = useAIProviderStore();
-  const [seedPacksEnabled, setSeedPacksEnabled] = (0, import_react59.useState)(false);
-  const [localSelectedModel, setLocalSelectedModel] = (0, import_react59.useState)({
+  const [seedPacksEnabled, setSeedPacksEnabled] = (0, import_react60.useState)(false);
+  const [localSelectedModel, setLocalSelectedModel] = (0, import_react60.useState)({
     name: "",
     tagline: "",
     systemPrompt: "",
@@ -43096,7 +43438,7 @@ var Management = () => {
     loadDocuments,
     clearAllDocuments
   } = useKnowledgeStore2();
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (selectedModel) {
       const selected = availableModels.find((m) => m.name === selectedModel);
       if (selected) {
@@ -43120,7 +43462,7 @@ var Management = () => {
       }
     }
   }, [selectedModel, availableModels]);
-  const loadBrandingConfig = (0, import_react59.useCallback)(async () => {
+  const loadBrandingConfig = (0, import_react60.useCallback)(async () => {
     if (isLoadingBranding || brandingLoaded) {
       debugLogger.warn("Branding loading already in progress or completed, skipping");
       return;
@@ -43235,15 +43577,15 @@ var Management = () => {
     setTagline,
     setTheme
   ]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     void loadBrandingConfig();
   }, [loadBrandingConfig]);
   const handleOpenModal = () => setModalOpen(true);
   const handleCloseModal = () => setModalOpen(false);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     getOptimalFabLogo().then(setFabLogo);
   }, []);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (logoBase64) {
       setFabLogo(logoBase64);
     } else {
@@ -43690,7 +44032,7 @@ var Management = () => {
       reader.readAsText(file);
     }
   };
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (localSelectedModel.selectedModel && !availableModels.some((m) => m.name === localSelectedModel.selectedModel)) {
       setLocalSelectedModel((prev) => ({
         ...prev,
@@ -43698,10 +44040,10 @@ var Management = () => {
       }));
     }
   }, [availableModels, localSelectedModel.selectedModel]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     loadDocuments();
   }, [loadDocuments]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     const gatewayApiUrl = packageSettings?.gatewayApiUrl;
     if (!gatewayApiUrl || gatewayApiUrl.toLowerCase().startsWith("playground://")) {
       setSeedPacksEnabled(false);
@@ -43744,7 +44086,7 @@ var Management = () => {
       isActive = false;
     };
   }, [packageSettings?.gatewayApiUrl, authToken]);
-  const currentTheme = (0, import_react59.useMemo)(() => {
+  const currentTheme = (0, import_react60.useMemo)(() => {
     const baseTheme = predefinedThemes[theme] || banditDarkTheme;
     return (0, import_styles32.createTheme)(baseTheme, {
       components: {
@@ -43774,43 +44116,43 @@ var Management = () => {
   const allNavTabs = [
     {
       label: "Personalities",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FaceRetouchingNaturalIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FaceRetouchingNaturalIcon, {}),
       requiresFeature: "limitedAdminDashboard"
       // Available to premium+
     },
     {
       label: "Branding",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(BrushIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(BrushIcon, {}),
       requiresFeature: "limitedAdminDashboard"
       // Available to premium+
     },
     {
       label: "Knowledge",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MenuBookIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MenuBookIcon, {}),
       requiresFeature: "limitedAdminDashboard"
       // Available to premium+
     },
     {
       label: "Storage",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(StorageIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(StorageIcon, {}),
       requiresFeature: "limitedAdminDashboard"
       // Available to premium+ (changed from adminDashboardEnabled)
     },
     {
       label: "Preferences",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TuneIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TuneIcon, {}),
       requiresFeature: "limitedAdminDashboard"
       // Available to premium+
     },
     {
       label: "Provider",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CloudIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(CloudIcon, {}),
       requiresFeature: "advancedSearch"
       // Pro/Team users with advanced features
     },
     {
-      label: "MCP Tools",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(BuildIcon, {}),
+      label: "Tools",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(BuildIcon, {}),
       requiresFeature: "advancedSearch"
       // Pro/Team users with advanced features
     }
@@ -43829,7 +44171,7 @@ var Management = () => {
   });
   const preferredDefaultTabIndex = navTabs.findIndex((tab) => tab.label === "Preferences");
   const defaultTabIndex = preferredDefaultTabIndex >= 0 ? preferredDefaultTabIndex : 0;
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     setTabIndex((current) => {
       if (current < 0 || current >= navTabs.length) {
         return defaultTabIndex;
@@ -43839,8 +44181,8 @@ var Management = () => {
   }, [navTabs.length, defaultTabIndex]);
   const mobileQuickTabs = navTabs.slice(0, 5);
   const hasMobileOverflowTabs = navTabs.length > mobileQuickTabs.length;
-  const navigationContent = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-    import_material49.Box,
+  const navigationContent = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    import_material50.Box,
     {
       sx: {
         display: "flex",
@@ -43850,8 +44192,8 @@ var Management = () => {
         bgcolor: "inherit"
       },
       children: [
-        isMobile && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_material49.Box,
+        isMobile && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          import_material50.Box,
           {
             sx: {
               height: 6,
@@ -43864,15 +44206,15 @@ var Management = () => {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Box, { sx: { p: isMobile ? 2.5 : 3, pb: isMobile ? 1.5 : 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_material49.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.Box, { sx: { p: isMobile ? 2.5 : 3, pb: isMobile ? 1.5 : 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          import_material50.Button,
           {
             onClick: () => {
               if (isMobile) setSidebarOpen(false);
               navigate("/chat");
             },
             onMouseEnter: preloadChatPage,
-            startIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChevronLeftIcon, { sx: { fontSize: 20 } }),
+            startIcon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ChevronLeftIcon, { sx: { fontSize: 20 } }),
             fullWidth: true,
             variant: "outlined",
             sx: {
@@ -43899,9 +44241,9 @@ var Management = () => {
             children: "Back to Chat"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Divider, { sx: { mx: isMobile ? 2 : 3, mb: 2, opacity: 0.6 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Box, { sx: { flex: 1, px: isMobile ? 1.5 : 2, pb: 3, overflowY: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.List, { sx: { px: 0, py: 0 }, children: navTabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-          import_material49.ListItemButton,
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.Divider, { sx: { mx: isMobile ? 2 : 3, mb: 2, opacity: 0.6 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.Box, { sx: { flex: 1, px: isMobile ? 1.5 : 2, pb: 3, overflowY: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.List, { sx: { px: 0, py: 0 }, children: navTabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+          import_material50.ListItemButton,
           {
             selected: tabIndex === idx,
             onClick: () => {
@@ -43950,8 +44292,8 @@ var Management = () => {
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                import_material49.ListItemIcon,
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                import_material50.ListItemIcon,
                 {
                   sx: {
                     color: tabIndex === idx ? "primary.main" : "text.secondary",
@@ -43961,8 +44303,8 @@ var Management = () => {
                   children: tab.icon
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                import_material49.ListItemText,
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                import_material50.ListItemText,
                 {
                   primary: tab.label,
                   primaryTypographyProps: {
@@ -43972,8 +44314,8 @@ var Management = () => {
                   }
                 }
               ),
-              tabIndex === idx && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                import_material49.Box,
+              tabIndex === idx && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                import_material50.Box,
                 {
                   sx: {
                     position: "absolute",
@@ -43996,10 +44338,10 @@ var Management = () => {
     }
   );
   if (!brandingLoaded) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material49.ThemeProvider, { theme: currentTheme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.CssBaseline, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-      import_material49.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_material50.ThemeProvider, { theme: currentTheme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.CssBaseline, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      import_material50.Box,
       {
         display: "flex",
         height: "100vh",
@@ -44011,8 +44353,8 @@ var Management = () => {
           position: "relative"
         },
         children: [
-          isMobile && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-            import_material49.Box,
+          isMobile && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+            import_material50.Box,
             {
               sx: {
                 width: "100%",
@@ -44031,8 +44373,8 @@ var Management = () => {
                 boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                  import_material49.Button,
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  import_material50.Button,
                   {
                     onClick: () => setSidebarOpen((o) => !o),
                     sx: {
@@ -44053,7 +44395,7 @@ var Management = () => {
                         transform: sidebarOpen ? "rotate(90deg) scale(0.95)" : "scale(0.95)"
                       }
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                       "path",
                       {
                         d: sidebarOpen ? "M18 6L6 18M6 6L18 18" : "M3 12H21M3 6H21M3 18H21",
@@ -44065,8 +44407,8 @@ var Management = () => {
                     ) })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                  import_material49.Typography,
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  import_material50.Typography,
                   {
                     variant: "h6",
                     sx: {
@@ -44078,14 +44420,14 @@ var Management = () => {
                     children: "Management"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material49.Box, { sx: {
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.Box, { sx: {
                   px: 2,
                   py: 0.5,
                   borderRadius: 2,
                   bgcolor: (theme2) => theme2.palette.mode === "dark" ? "rgba(25,118,210,0.12)" : "rgba(25,118,210,0.08)",
                   border: (theme2) => `1px solid ${theme2.palette.primary.main}20`
-                }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                  import_material49.Typography,
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  import_material50.Typography,
                   {
                     variant: "caption",
                     sx: {
@@ -44099,8 +44441,8 @@ var Management = () => {
               ]
             }
           ),
-          isMobile && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-            import_material49.Box,
+          isMobile && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+            import_material50.Box,
             {
               sx: {
                 width: "100%",
@@ -44117,8 +44459,8 @@ var Management = () => {
                 mobileQuickTabs.map((tab) => {
                   const quickTabIndex = navTabs.findIndex((navTab) => navTab.label === tab.label);
                   const selected = tabIndex === quickTabIndex;
-                  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                    import_material49.Button,
+                  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                    import_material50.Button,
                     {
                       size: "small",
                       onClick: () => setTabIndex(quickTabIndex),
@@ -44143,8 +44485,8 @@ var Management = () => {
                     tab.label
                   );
                 }),
-                hasMobileOverflowTabs && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                  import_material49.Button,
+                hasMobileOverflowTabs && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  import_material50.Button,
                   {
                     size: "small",
                     onClick: () => setSidebarOpen(true),
@@ -44166,8 +44508,8 @@ var Management = () => {
               ]
             }
           ),
-          isMobile ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_material49.SwipeableDrawer,
+          isMobile ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            import_material50.SwipeableDrawer,
             {
               anchor: "bottom",
               open: sidebarOpen,
@@ -44187,8 +44529,8 @@ var Management = () => {
               },
               children: navigationContent
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_material49.Box,
+          ) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            import_material50.Box,
             {
               sx: {
                 width: 280,
@@ -44211,8 +44553,8 @@ var Management = () => {
               children: navigationContent
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-            import_material49.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+            import_material50.Box,
             {
               sx: {
                 flex: 1,
@@ -44231,7 +44573,7 @@ var Management = () => {
                 transition: "margin-left 0.2s"
               },
               children: [
-                navTabs[tabIndex]?.label === "Personalities" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                navTabs[tabIndex]?.label === "Personalities" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   PersonalitiesTab_default,
                   {
                     availableModels,
@@ -44250,7 +44592,7 @@ var Management = () => {
                     showSnackbar: showSnackbarMessage
                   }
                 ),
-                navTabs[tabIndex]?.label === "Branding" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                navTabs[tabIndex]?.label === "Branding" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   BrandingTab_default,
                   {
                     logoFile,
@@ -44269,7 +44611,7 @@ var Management = () => {
                     setLogoBase64
                   }
                 ),
-                navTabs[tabIndex]?.label === "Knowledge" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                navTabs[tabIndex]?.label === "Knowledge" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   KnowledgeHubTab_default,
                   {
                     documents,
@@ -44282,8 +44624,8 @@ var Management = () => {
                     seedPacksEnabled
                   }
                 ),
-                navTabs[tabIndex]?.label === "Storage" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(StorageTab_default, { currentTheme }),
-                navTabs[tabIndex]?.label === "Preferences" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                navTabs[tabIndex]?.label === "Storage" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(StorageTab_default, { currentTheme }),
+                navTabs[tabIndex]?.label === "Preferences" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   PreferencesTab_default,
                   {
                     preferences,
@@ -44293,13 +44635,13 @@ var Management = () => {
                     showSnackbar: showSnackbarMessage
                   }
                 ),
-                navTabs[tabIndex]?.label === "Provider" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ProviderTab, {}),
-                navTabs[tabIndex]?.label === "MCP Tools" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MCPToolsTabV2_default, {})
+                navTabs[tabIndex]?.label === "Provider" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ProviderTab, {}),
+                navTabs[tabIndex]?.label === "Tools" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MCPToolsTabV2_default, {})
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_material49.Fab,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            import_material50.Fab,
             {
               "aria-label": "AI",
               onClick: handleOpenModal,
@@ -44320,7 +44662,7 @@ var Management = () => {
                 boxShadow: theme2.shadows[6],
                 zIndex: 2e3
               }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 "img",
                 {
                   src: fabLogo,
@@ -44334,7 +44676,7 @@ var Management = () => {
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(chat_modal_default, { open: modalOpen, onClose: handleCloseModal })
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(chat_modal_default, { open: modalOpen, onClose: handleCloseModal })
         ]
       }
     )
@@ -44343,7 +44685,7 @@ var Management = () => {
 var management_default = Management;
 
 // src/shared/custom-element.ts
-var import_react60 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 var import_client = __toESM(require("react-dom/client"));
 function defineCustomElement(name, Component) {
   if (customElements.get(name)) return;
@@ -44371,7 +44713,7 @@ function defineCustomElement(name, Component) {
       if (!this.root) {
         this.root = import_client.default.createRoot(this.mountPoint);
       }
-      this.root.render(import_react60.default.createElement(Component, props));
+      this.root.render(import_react61.default.createElement(Component, props));
     }
   }
   customElements.define(name, ReactElement);
@@ -44580,7 +44922,7 @@ var getFeatureMatrix = () => featureFlagService.generateFeatureMatrix();
 init_featureFlags();
 
 // src/hooks/useVoices.ts
-var import_react61 = require("react");
+var import_react62 = require("react");
 init_voiceStore();
 init_packageSettingsStore();
 init_authenticationStore();
@@ -44600,7 +44942,7 @@ var useVoices = () => {
   } = useVoiceStore();
   const gatewayApiUrl = usePackageSettingsStore((state) => state.settings?.gatewayApiUrl);
   const { token } = useAuthenticationStore();
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     const isAuthenticated = authenticationService.isAuthenticated();
     if (gatewayApiUrl && token && isAuthenticated && !isServiceAvailable) {
       debugLogger.debug("Gateway API URL and JWT token available, loading voice models...");
@@ -44635,9 +44977,9 @@ init_useTTS();
 init_streaming_tts();
 
 // src/modals/SubscriptionExpiredModal.tsx
-var import_material50 = require("@mui/material");
+var import_material51 = require("@mui/material");
 var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var SubscriptionExpiredModal = ({
   open,
   onNavigateHome,
@@ -44659,8 +45001,8 @@ var SubscriptionExpiredModal = ({
       window.location.href = "/manage-subscription";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-    import_material50.Dialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    import_material51.Dialog,
     {
       open,
       onClose,
@@ -44674,47 +45016,47 @@ var SubscriptionExpiredModal = ({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.DialogTitle, { sx: { textAlign: "center", pb: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_material50.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1, mb: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react12.AlertTriangle, { size: 32, color: "warning" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.Typography, { variant: "h5", component: "span", fontWeight: "bold", children: "Subscription Expired" })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_material51.DialogTitle, { sx: { textAlign: "center", pb: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_material51.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1, mb: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.AlertTriangle, { size: 32, color: "warning" }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_material51.Typography, { variant: "h5", component: "span", fontWeight: "bold", children: "Subscription Expired" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.DialogContent, { sx: { pt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_material50.Stack, { spacing: 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.Alert, { severity: "warning", sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.Typography, { variant: "body2", children: "Your subscription has expired and access to features has been restricted." }) }),
-          userEmail && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_material50.Typography, { variant: "body2", color: "text.secondary", sx: { textAlign: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_material51.DialogContent, { sx: { pt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_material51.Stack, { spacing: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_material51.Alert, { severity: "warning", sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_material51.Typography, { variant: "body2", children: "Your subscription has expired and access to features has been restricted." }) }),
+          userEmail && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_material51.Typography, { variant: "body2", color: "text.secondary", sx: { textAlign: "center" }, children: [
             "Account: ",
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("strong", { children: userEmail })
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("strong", { children: userEmail })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.Typography, { variant: "body1", sx: { textAlign: "center", color: "text.secondary" }, children: "To continue using all features, please renew your subscription or return to the main application." }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material50.Box, { sx: {
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_material51.Typography, { variant: "body1", sx: { textAlign: "center", color: "text.secondary" }, children: "To continue using all features, please renew your subscription or return to the main application." }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_material51.Box, { sx: {
             bgcolor: "background.paper",
             border: 1,
             borderColor: "divider",
             borderRadius: 1,
             p: 2,
             mt: 2
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_material50.Typography, { variant: "caption", color: "text.secondary", sx: { fontStyle: "italic" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("strong", { children: "What's affected:" }),
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_material51.Typography, { variant: "caption", color: "text.secondary", sx: { fontStyle: "italic" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("strong", { children: "What's affected:" }),
             " All premium features including document upload, voice controls, advanced search, and admin dashboard access have been disabled until your subscription is renewed."
           ] }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_material50.DialogActions, { sx: { px: 3, pb: 3, gap: 1, justifyContent: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-            import_material50.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_material51.DialogActions, { sx: { px: 3, pb: 3, gap: 1, justifyContent: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            import_material51.Button,
             {
               onClick: handleNavigateHome,
               variant: "outlined",
-              startIcon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react12.Home, {}),
+              startIcon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.Home, {}),
               size: "large",
               sx: { minWidth: 140 },
               children: "Go Home"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-            import_material50.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            import_material51.Button,
             {
               onClick: handleManageSubscription,
               variant: "contained",
-              startIcon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react12.CreditCard, {}),
+              startIcon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.CreditCard, {}),
               size: "large",
               color: "primary",
               sx: { minWidth: 140 },
@@ -44728,9 +45070,9 @@ var SubscriptionExpiredModal = ({
 };
 
 // src/guards/SubscriptionExpiredGuard.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 init_useFeatures();
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var SubscriptionExpiredGuard = ({
   children,
   onNavigateHome,
@@ -44739,9 +45081,9 @@ var SubscriptionExpiredGuard = ({
   allowContinue = false
 }) => {
   const { isExpiredTier, getFullEvaluation } = useFeatures();
-  const [showModal, setShowModal] = (0, import_react62.useState)(false);
-  const [userDismissed, setUserDismissed] = (0, import_react62.useState)(false);
-  (0, import_react62.useEffect)(() => {
+  const [showModal, setShowModal] = (0, import_react63.useState)(false);
+  const [userDismissed, setUserDismissed] = (0, import_react63.useState)(false);
+  (0, import_react63.useEffect)(() => {
     if (isExpiredTier() && !userDismissed) {
       setShowModal(true);
     } else {
@@ -44767,9 +45109,9 @@ var SubscriptionExpiredGuard = ({
     }
     return void 0;
   })() : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       SubscriptionExpiredModal,
       {
         open: showModal,