@burtson-labs/bandit-engine 2.0.106 → 2.0.108

package/dist/management/management.js

@@ -34434,7 +34434,7 @@ var PersonalitiesTab = ({
         import_material19.Card,
         {
           sx: {
-            mb: { xs: 1.5, md: 2 },
+            mb: { xs: 1, md: 1.25 },
             background: "linear-gradient(135deg, #1976d2 0%, #42a5f5 100%)",
             border: "2px solid transparent",
             borderRadius: { xs: 2.25, sm: 3 },
@@ -34471,7 +34471,7 @@ var PersonalitiesTab = ({
             setPersonalityTabIndex(1);
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material19.CardContent, { sx: {
-            p: { xs: 1.5, sm: 1.75 },
+            p: { xs: 1, sm: 1.25 },
             color: "white",
             textAlign: "left",
             position: "relative",
@@ -34549,7 +34549,7 @@ var PersonalitiesTab = ({
           lg: "repeat(4, 1fr)",
           xl: "repeat(4, 1fr)"
         },
-        gap: { xs: 1.25, sm: 2.5, md: 3 },
+        gap: { xs: 1, sm: 1.5, md: 1.75 },
         alignItems: "stretch"
       }, children: promptTemplates.map((template, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         import_material19.Card,
@@ -34603,7 +34603,7 @@ var PersonalitiesTab = ({
           },
           onClick: () => handleTemplateSelect(template),
           children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material19.CardContent, { sx: {
-            p: { xs: 1.5, sm: 2 },
+            p: { xs: 1.25, sm: 1.5 },
             display: "flex",
             flexDirection: "column",
             height: "100%",
@@ -34622,8 +34622,8 @@ var PersonalitiesTab = ({
                     src: template.avatar,
                     alt: template.name,
                     sx: {
-                      width: { xs: 40, sm: 48, md: 52 },
-                      height: { xs: 40, sm: 48, md: 52 },
+                      width: { xs: 38, sm: 44, md: 46 },
+                      height: { xs: 38, sm: 44, md: 46 },
                       mr: { xs: 1.2, md: 2 },
                       transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
                       boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
@@ -42998,15 +42998,85 @@ init_mcpServersService();
 init_mcpToolsStore();
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var emptyForm = { name: "", url: "", authType: "none", authValue: "", headerName: "" };
+var CATALOG = [
+  {
+    key: "linear",
+    name: "Linear",
+    blurb: "Create and track issues, projects, and cycles",
+    letter: "L",
+    accent: "#5E6AD2",
+    url: "https://mcp.linear.app/sse",
+    authType: "bearer",
+    tokenLabel: "Linear API key",
+    tokenHelp: "https://linear.app/settings/api"
+  },
+  {
+    key: "notion",
+    name: "Notion",
+    blurb: "Search and update pages across your workspace",
+    letter: "N",
+    accent: "#0f0f0f",
+    url: "https://mcp.notion.com/mcp",
+    authType: "bearer",
+    tokenLabel: "Notion integration token",
+    tokenHelp: "https://www.notion.so/my-integrations"
+  },
+  {
+    key: "github",
+    name: "GitHub",
+    blurb: "Issues, pull requests, code search, and actions",
+    letter: "G",
+    accent: "#24292f",
+    url: "https://api.githubcopilot.com/mcp/",
+    authType: "bearer",
+    tokenLabel: "GitHub personal access token",
+    tokenHelp: "https://github.com/settings/tokens"
+  },
+  {
+    key: "sentry",
+    name: "Sentry",
+    blurb: "Triage errors and inspect production issues",
+    letter: "S",
+    accent: "#362D59",
+    url: "https://mcp.sentry.dev/mcp",
+    authType: "bearer",
+    tokenLabel: "Sentry auth token",
+    tokenHelp: "https://sentry.io/settings/auth-tokens/"
+  },
+  {
+    key: "atlassian",
+    name: "Jira & Confluence",
+    blurb: "Atlassian issues, boards, and docs",
+    letter: "J",
+    accent: "#0052CC",
+    url: "https://mcp.atlassian.com/v1/sse",
+    authType: "bearer",
+    tokenLabel: "Atlassian API token",
+    tokenHelp: "https://id.atlassian.com/manage-profile/security/api-tokens"
+  },
+  {
+    key: "stripe",
+    name: "Stripe",
+    blurb: "Payments, customers, and invoices",
+    letter: "S",
+    accent: "#635BFF",
+    url: "https://mcp.stripe.com",
+    authType: "bearer",
+    tokenLabel: "Stripe restricted key",
+    tokenHelp: "https://dashboard.stripe.com/apikeys"
+  }
+];
 var McpServersSection = () => {
   const [servers, setServers] = (0, import_react38.useState)([]);
   const [loading, setLoading] = (0, import_react38.useState)(false);
   const [error, setError] = (0, import_react38.useState)(null);
   const [form, setForm] = (0, import_react38.useState)(emptyForm);
+  const [activeEntry, setActiveEntry] = (0, import_react38.useState)(null);
   const [adding, setAdding] = (0, import_react38.useState)(false);
   const [showForm, setShowForm] = (0, import_react38.useState)(false);
   const [tools, setTools] = (0, import_react38.useState)({});
   const reloadChatTools = useMCPToolsStore((s) => s.loadMcpServerTools);
+  const formRef = (0, import_react38.useRef)(null);
   const refresh = (0, import_react38.useCallback)(async () => {
     setLoading(true);
     setError(null);
@@ -43021,6 +43091,20 @@ var McpServersSection = () => {
   (0, import_react38.useEffect)(() => {
     refresh();
   }, [refresh]);
+  const connectedKeys = new Set(servers.map((s) => s.url.replace(/\/+$/, "")));
+  const openForCatalog = (entry) => {
+    setActiveEntry(entry);
+    setForm({ name: entry.name, url: entry.url, authType: entry.authType, authValue: "", headerName: "" });
+    setShowForm(true);
+    setError(null);
+    requestAnimationFrame(() => formRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }));
+  };
+  const openCustom = () => {
+    setActiveEntry(null);
+    setForm(emptyForm);
+    setShowForm((v) => !v);
+    setError(null);
+  };
   const handleAdd = async () => {
     if (!form.name.trim() || !form.url.trim()) {
       setError("Name and URL are required.");
@@ -43037,6 +43121,7 @@ var McpServersSection = () => {
         headerName: form.authType === "header" ? form.headerName : void 0
       });
       setForm(emptyForm);
+      setActiveEntry(null);
       setShowForm(false);
       await refresh();
       void reloadChatTools();
@@ -43075,101 +43160,185 @@ var McpServersSection = () => {
       setTools((prev) => ({ ...prev, [id]: { error: e instanceof Error ? e.message : "Could not connect." } }));
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Paper, { sx: { p: 2, mb: 2 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1, gap: 1, flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloudIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Typography, { variant: "subtitle1", sx: { fontWeight: 700 }, children: "MCP Servers" }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Chip, { size: "small", label: String(servers.length) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Tooltip, { title: "Refresh", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.IconButton, { onClick: refresh, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RefreshIcon, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Button, { size: "small", variant: "contained", startIcon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AddIcon, {}), onClick: () => setShowForm((v) => !v), children: "Add server" })
-      ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Box, { sx: { mb: 2.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Typography, { variant: "h6", sx: { fontWeight: 700, mb: 0.5 }, children: "Connect your tools" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Typography, { variant: "body2", color: "text.secondary", sx: { maxWidth: 680, lineHeight: 1.6 }, children: "Let Bandit work inside the apps you already use \u2014 open a Linear issue, search Notion, or triage a Sentry error right from chat. Connect a service once; the gateway holds the connection securely, so your browser never talks to it directly." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.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_runtime29.jsx)(import_material30.Alert, { severity: "error", sx: { mb: 2 }, onClose: () => setError(null), children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Collapse, { in: showForm, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Paper, { variant: "outlined", sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Stack, { spacing: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        import_material30.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_runtime29.jsx)(
-        import_material30.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_runtime29.jsxs)(
-        import_material30.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_runtime29.jsx)(import_material30.MenuItem, { value: "none", children: "None" }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.MenuItem, { value: "bearer", children: "Bearer token" }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.MenuItem, { value: "header", children: "Custom header" })
-          ]
-        }
-      ),
-      form.authType === "header" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        import_material30.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_runtime29.jsx)(
-        import_material30.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_runtime29.jsxs)(import_material30.Box, { sx: { display: "flex", gap: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Button, { variant: "contained", onClick: handleAdd, disabled: adding, children: adding ? "Adding\u2026" : "Add server" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Typography, { variant: "overline", color: "text.secondary", sx: { fontWeight: 700, letterSpacing: 0.6 }, children: "Popular integrations" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      import_material30.Box,
+      {
+        sx: {
+          mt: 1,
+          mb: 3,
+          display: "grid",
+          gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)", lg: "repeat(3, 1fr)" },
+          gap: 1.25
+        },
+        children: CATALOG.map((entry) => {
+          const connected = connectedKeys.has(entry.url.replace(/\/+$/, ""));
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            import_material30.Paper,
+            {
+              variant: "outlined",
+              sx: {
+                p: 1.5,
+                display: "flex",
+                alignItems: "center",
+                gap: 1.25,
+                borderRadius: 2,
+                transition: "border-color 0.15s ease, transform 0.15s ease",
+                "&:hover": { borderColor: "primary.main", transform: "translateY(-1px)" }
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  import_material30.Box,
+                  {
+                    sx: {
+                      width: 36,
+                      height: 36,
+                      borderRadius: 1.5,
+                      flexShrink: 0,
+                      display: "grid",
+                      placeItems: "center",
+                      color: "#fff",
+                      fontWeight: 700,
+                      fontSize: 16,
+                      bgcolor: entry.accent
+                    },
+                    children: entry.letter
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Box, { sx: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Typography, { variant: "subtitle2", sx: { fontWeight: 700, lineHeight: 1.2 }, children: entry.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    import_material30.Typography,
+                    {
+                      variant: "caption",
+                      color: "text.secondary",
+                      sx: { display: "block", lineHeight: 1.35 },
+                      children: entry.blurb
+                    }
+                  )
+                ] }),
+                connected ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Chip, { size: "small", color: "success", label: "Added", sx: { flexShrink: 0 } }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  import_material30.Button,
+                  {
+                    size: "small",
+                    variant: "outlined",
+                    onClick: () => openForCatalog(entry),
+                    sx: { flexShrink: 0, minWidth: 0 },
+                    children: "Connect"
+                  }
+                )
+              ]
+            },
+            entry.key
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Box, { ref: formRef, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Collapse, { in: showForm, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Paper, { variant: "outlined", sx: { p: 2, mb: 2, borderRadius: 2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Typography, { variant: "subtitle2", sx: { fontWeight: 700, mb: 0.5 }, children: activeEntry ? `Connect ${activeEntry.name}` : "Add a custom server" }),
+      activeEntry?.tokenHelp && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1.5 }, children: [
+        "Paste your ",
+        activeEntry.tokenLabel,
+        ".",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Link, { href: activeEntry.tokenHelp, target: "_blank", rel: "noopener noreferrer", children: "Get one here \u2192" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Stack, { spacing: 1.75, children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_material30.Button,
+          import_material30.TextField,
           {
-            onClick: () => {
-              setShowForm(false);
-              setForm(emptyForm);
-            },
-            children: "Cancel"
+            label: "Name",
+            size: "small",
+            value: form.name,
+            onChange: (e) => setForm({ ...form, name: e.target.value }),
+            placeholder: "e.g. Linear",
+            fullWidth: true
           }
-        )
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_material30.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_runtime29.jsxs)(
+          import_material30.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_runtime29.jsx)(import_material30.MenuItem, { value: "none", children: "None" }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.MenuItem, { value: "bearer", children: "Bearer token" }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.MenuItem, { value: "header", children: "Custom header" })
+            ]
+          }
+        ),
+        form.authType === "header" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_material30.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_runtime29.jsx)(
+          import_material30.TextField,
+          {
+            label: activeEntry?.tokenLabel ?? (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_runtime29.jsxs)(import_material30.Box, { sx: { display: "flex", gap: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Button, { variant: "contained", onClick: handleAdd, disabled: adding, children: adding ? "Connecting\u2026" : "Connect" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_material30.Button,
+            {
+              onClick: () => {
+                setShowForm(false);
+                setActiveEntry(null);
+                setForm(emptyForm);
+              },
+              children: "Cancel"
+            }
+          )
+        ] })
       ] })
     ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Typography, { variant: "overline", color: "text.secondary", sx: { fontWeight: 700, letterSpacing: 0.6 }, children: [
+        "Your connections",
+        servers.length ? ` (${servers.length})` : ""
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Button, { size: "small", startIcon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AddIcon, {}), onClick: openCustom, children: "Custom server" })
+    ] }),
     loading && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.LinearProgress, { sx: { mb: 2 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Stack, { spacing: 1.5, children: [
-      servers.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Typography, { variant: "body2", color: "text.secondary", children: "No MCP servers connected yet." }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Stack, { spacing: 1.25, children: [
+      servers.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Typography, { variant: "body2", color: "text.secondary", sx: { py: 1 }, children: "Nothing connected yet \u2014 pick a tool above to get started." }),
       servers.map((server) => {
         const toolState = tools[server.id];
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Paper, { variant: "outlined", sx: { p: 1.5 }, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Paper, { variant: "outlined", sx: { p: 1.5, borderRadius: 2 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Box, { sx: { minWidth: 0 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Typography, { variant: "subtitle2", sx: { fontWeight: 700 }, children: server.name }),
@@ -43197,6 +43366,11 @@ var McpServersSection = () => {
           toolState && !Array.isArray(toolState) && toolState !== "loading" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material30.Alert, { severity: "warning", sx: { mt: 1 }, children: toolState.error })
         ] }, server.id);
       })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_material30.Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 2, lineHeight: 1.5 }, children: [
+      "Running a local server (Figma Dev Mode, Azure DevOps)? Add it as a custom server \u2014 note the cloud gateway can't reach ",
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("code", { children: "localhost" }),
+      ", so local servers need the Bandit desktop app."
     ] })
   ] });
 };
@@ -43293,78 +43467,91 @@ var MCPToolsTabV2 = () => {
     return map23;
   }, [localTools]);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { variant: "h5", sx: { fontWeight: 600, color: "primary.main" }, children: "Available Tools" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Tooltip, { title: "Refresh", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.IconButton, { onClick: refresh, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RefreshIcon, {}) }) }) })
-    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(McpServersSection_default, {}),
-    !gatewayConfigured && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Paper, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.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_runtime30.jsx)(import_material31.Paper, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-      health?.status === "healthy" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(HealthAndSafetyIcon, { color: "success" }) : health?.status === "unhealthy" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ErrorOutlineIcon, { color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ErrorOutlineIcon, { color: "disabled" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, children: "Controller Health" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        import_material31.Chip,
-        {
-          size: "small",
-          label: (health?.status || "unknown").toString(),
-          color: health?.status === "healthy" ? "success" : health?.status === "unhealthy" ? "error" : "default",
-          sx: { ml: 1 }
-        }
-      ),
-      health?.timestamp && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { variant: "caption", color: "text.secondary", sx: { ml: 1 }, children: new Date(health.timestamp).toLocaleString() })
-    ] }) }),
-    loading && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.LinearProgress, {}) }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Paper, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { color: "error", children: error }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Stack, { spacing: 2, children: tools.map((tool) => {
-      let locallyEnabled = localEnabledMap.get(tool.id);
-      if (locallyEnabled === void 0) {
-        locallyEnabled = localEnabledMap.get(tool.name);
-      }
-      if (locallyEnabled === void 0) {
-        const directLookup = localTools.find(
-          (t) => t.id === tool.id || t.function.name === tool.id || t.name === tool.name
-        );
-        locallyEnabled = directLookup?.enabled ?? tool.isEnabled;
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Paper, { sx: { p: 2 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { variant: "h6", sx: { fontWeight: 700 }, children: tool.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: tool.description })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-              import_material31.FormControlLabel,
-              {
-                control: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.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);
-                  }
-                  if (!local) {
-                    local = localTools.find((t) => t.id === tool.id);
-                  }
-                  if (!local) {
-                    local = localTools.find((t) => t.name === tool.name);
-                  }
-                  if (local) {
-                    toggleTool(local.id);
-                  } else {
-                    console.warn("Could not find local tool for server tool:", tool);
-                  }
-                } }),
-                label: locallyEnabled ? "Enabled" : "Disabled"
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Box, { sx: { mt: 4 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 0.5 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { variant: "overline", color: "text.secondary", sx: { fontWeight: 700, letterSpacing: 0.6 }, children: "Built-in capabilities" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Box, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Tooltip, { title: `Controller: ${health?.status || "unknown"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            import_material31.Box,
+            {
+              sx: {
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                bgcolor: health?.status === "healthy" ? "success.main" : health?.status === "unhealthy" ? "error.main" : "grey.500"
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Tooltip, { title: "Controller-driven tools (read-only schema)", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SettingsIcon, { color: "disabled" }) })
-          ] })
-        ] }),
-        !!tool.supportedParameters?.length && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Box, { sx: { mt: 1.5 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { variant: "caption", color: "text.secondary", children: "Supported parameters" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Box, { sx: { mt: 0.5, display: "flex", flexWrap: "wrap", gap: 1 }, children: tool.supportedParameters.map((p) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Chip, { size: "small", label: p }, p)) })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Tooltip, { title: "Refresh", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.IconButton, { size: "small", onClick: refresh, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RefreshIcon, { fontSize: "small" }) }) })
         ] })
-      ] }, tool.id);
-    }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1.5 }, children: "Things Bandit can do on its own \u2014 toggle what it\u2019s allowed to use." }),
+      loading && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.LinearProgress, { sx: { mb: 2 } }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Alert, { severity: "warning", sx: { mb: 2 }, children: error }),
+      !gatewayConfigured && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Alert, { severity: "info", sx: { mb: 2 }, children: "Using this origin for tool endpoints (no gateway URL configured)." }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        import_material31.Box,
+        {
+          sx: {
+            display: "grid",
+            gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)" },
+            gap: 1.25
+          },
+          children: [
+            tools.map((tool) => {
+              let locallyEnabled = localEnabledMap.get(tool.id);
+              if (locallyEnabled === void 0) {
+                locallyEnabled = localEnabledMap.get(tool.name);
+              }
+              if (locallyEnabled === void 0) {
+                const directLookup = localTools.find(
+                  (t) => t.id === tool.id || t.function.name === tool.id || t.name === tool.name
+                );
+                locallyEnabled = directLookup?.enabled ?? tool.isEnabled;
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                import_material31.Paper,
+                {
+                  variant: "outlined",
+                  sx: {
+                    p: 1.5,
+                    borderRadius: 2,
+                    display: "flex",
+                    alignItems: "flex-start",
+                    justifyContent: "space-between",
+                    gap: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material31.Box, { sx: { minWidth: 0 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { variant: "subtitle2", sx: { fontWeight: 700 }, children: tool.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", lineHeight: 1.4 }, children: tool.description })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                      import_material31.Switch,
+                      {
+                        size: "small",
+                        checked: !!locallyEnabled,
+                        sx: { flexShrink: 0 },
+                        onChange: () => {
+                          let local = localTools.find((t) => t.function.name === tool.id);
+                          if (!local) local = localTools.find((t) => t.function.name === tool.name);
+                          if (!local) local = localTools.find((t) => t.id === tool.id);
+                          if (!local) local = localTools.find((t) => t.name === tool.name);
+                          if (local) toggleTool(local.id);
+                        }
+                      }
+                    )
+                  ]
+                },
+                tool.id
+              );
+            }),
+            !loading && tools.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material31.Typography, { variant: "body2", color: "text.secondary", children: "No built-in tools reported." })
+          ]
+        }
+      )
+    ] })
   ] });
 };
 var MCPToolsTabV2_default = MCPToolsTabV2;