@burtson-labs/bandit-engine 2.0.107 → 2.0.109

package/dist/{chunk-N3UWG6CU.mjs → chunk-Q6QQZXRR.mjs}

@@ -1,6 +1,6 @@
 import {
   StreamingMarkdown_default
-} from "./chunk-KYC7CC6C.mjs";
+} from "./chunk-VR2ZWFTN.mjs";
 import {
   aiProviderInitService
 } from "./chunk-HAUDGBUS.mjs";
@@ -14,7 +14,7 @@ import {
 } from "./chunk-BN3D45E2.mjs";
 import {
   chat_modal_default
-} from "./chunk-RN3AKXKI.mjs";
+} from "./chunk-XPNXECXM.mjs";
 import {
   AddIcon,
   ArchiveIcon,
@@ -42,14 +42,12 @@ import {
   DownloadIcon,
   EditNoteOutlinedIcon,
   ErrorIcon,
-  ErrorOutlineIcon,
   ExpandMoreIcon,
   FaceRetouchingNaturalIcon,
   FileUploadIcon,
   FolderIcon,
   FolderOpenIcon,
   GroupIcon,
-  HealthAndSafetyIcon,
   InfoIcon,
   LinkIcon,
   LockIcon,
@@ -86,7 +84,7 @@ import {
   predefinedThemes,
   useNotificationService,
   useVoiceStore
-} from "./chunk-VIKZPBVO.mjs";
+} from "./chunk-3WKPBIRD.mjs";
 import {
   TOPICS,
   brandingService_default,
@@ -2562,7 +2560,7 @@ var PreferencesTab = ({
         children: "Control which AI features are enabled to optimize performance for your device. Disabling features can help reduce resource usage on machines with limited capabilities."
       }
     ),
-    /* @__PURE__ */ jsxs3(Paper2, { sx: { p: { xs: 1.75, sm: 2.5 }, mb: { xs: 2, md: 3 } }, children: [
+    /* @__PURE__ */ jsxs3(Paper2, { sx: { p: { xs: 1.5, sm: 1.75 }, mb: { xs: 1.5, md: 1.75 }, border: "1px solid", borderColor: "divider", borderRadius: 2 }, children: [
       /* @__PURE__ */ jsxs3(Box3, { children: [
         /* @__PURE__ */ jsx3(Typography3, { variant: "h6", sx: { fontWeight: 600, color: "text.primary" }, children: "Conversation Starters" }),
         /* @__PURE__ */ jsx3(Typography3, { variant: "body2", color: "text.secondary", children: "Personalize the suggested prompts on your home screen. Pick the topics you care about \u2014 starters lean toward them (blended with fresh ones each time) instead of generic blanket questions." })
@@ -2605,7 +2603,7 @@ var PreferencesTab = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs3(Paper2, { sx: { p: { xs: 1.75, sm: 2.5 }, mb: { xs: 2, md: 3 } }, children: [
+    /* @__PURE__ */ jsxs3(Paper2, { sx: { p: { xs: 1.5, sm: 1.75 }, mb: { xs: 1.5, md: 1.75 }, border: "1px solid", borderColor: "divider", borderRadius: 2 }, children: [
       /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", flexDirection: { xs: "column", sm: "row" }, justifyContent: "space-between", gap: 2 }, children: [
         /* @__PURE__ */ jsxs3(Box3, { children: [
           /* @__PURE__ */ jsx3(Typography3, { variant: "h6", sx: { fontWeight: 600, color: "text.primary" }, children: "Conversation & Project Sync" }),
@@ -2717,7 +2715,7 @@ var PreferencesTab = ({
         /* @__PURE__ */ jsx3(Typography3, { variant: "body2", color: "text.secondary", sx: { display: "flex", alignItems: "center" }, children: "Need media support? Images and large files stay local until retention rules are finalized." })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3(Paper2, { sx: { p: { xs: 1.75, sm: 2.5 }, mb: { xs: 2, md: 3 } }, children: [
+    /* @__PURE__ */ jsxs3(Paper2, { sx: { p: { xs: 1.5, sm: 1.75 }, mb: { xs: 1.5, md: 1.75 }, border: "1px solid", borderColor: "divider", borderRadius: 2 }, children: [
       /* @__PURE__ */ jsx3(Typography3, { variant: "h6", sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Feature Controls" }),
       /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
         /* @__PURE__ */ jsxs3(Box3, { children: [
@@ -2915,7 +2913,7 @@ var PreferencesTab = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3(Paper2, { sx: { p: { xs: 1.75, sm: 2.5 }, mb: { xs: 2, md: 3 } }, children: [
+    /* @__PURE__ */ jsxs3(Paper2, { sx: { p: { xs: 1.5, sm: 1.75 }, mb: { xs: 1.5, md: 1.75 }, border: "1px solid", borderColor: "divider", borderRadius: 2 }, children: [
       /* @__PURE__ */ jsx3(Typography3, { variant: "h6", sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Backup & Restore" }),
       /* @__PURE__ */ jsx3(Typography3, { variant: "body2", color: "text.secondary", paragraph: true, children: "Export your preferences to save your settings, or import previously saved preferences. You can also reset to default values." }),
       /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", flexDirection: { xs: "column", sm: "row" }, gap: 2, alignItems: "center" }, children: [
@@ -8901,7 +8899,7 @@ var ProviderTab = () => {
           children: "Configure your AI provider for chat, generation, and model services. This determines which backend service powers your AI interactions."
         }
       ),
-      /* @__PURE__ */ jsxs11(Paper5, { sx: { p: { xs: 1.75, sm: 2.5 }, mb: { xs: 2, md: 3 }, bgcolor: "background.paper", border: "1px solid", borderColor: "divider" }, children: [
+      /* @__PURE__ */ jsxs11(Paper5, { sx: { p: { xs: 1.5, sm: 1.75 }, mb: { xs: 1.5, md: 1.75 }, bgcolor: "background.paper", border: "1px solid", borderColor: "divider", borderRadius: 2 }, children: [
         /* @__PURE__ */ jsx11(Typography10, { variant: "h6", sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Current Provider" }),
         currentProvider ? /* @__PURE__ */ jsxs11(Box11, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
           /* @__PURE__ */ jsx11(
@@ -8915,7 +8913,7 @@ var ProviderTab = () => {
           /* @__PURE__ */ jsx11(Typography10, { variant: "body2", color: "text.secondary", children: currentProviderConfig?.baseUrl || currentProviderConfig?.gatewayUrl || "No URL configured" })
         ] }) : /* @__PURE__ */ jsx11(Chip8, { label: "No Provider Configured", color: "warning" })
       ] }),
-      /* @__PURE__ */ jsxs11(Paper5, { sx: { p: { xs: 1.75, sm: 2.5 }, mb: { xs: 2, md: 3 }, bgcolor: "background.paper", border: "1px solid", borderColor: "divider" }, children: [
+      /* @__PURE__ */ jsxs11(Paper5, { sx: { p: { xs: 1.5, sm: 1.75 }, mb: { xs: 1.5, md: 1.75 }, bgcolor: "background.paper", border: "1px solid", borderColor: "divider", borderRadius: 2 }, children: [
         /* @__PURE__ */ jsxs11(
           Box11,
           {
@@ -9243,7 +9241,7 @@ var ProviderTab = () => {
 
 // src/management/components/MCPToolsTabV2.tsx
 import { useEffect as useEffect11, useMemo as useMemo5, useState as useState14 } from "react";
-import { Box as Box13, Typography as Typography12, Paper as Paper7, Chip as Chip10, Stack as Stack6, IconButton as IconButton7, Tooltip as Tooltip4, LinearProgress as LinearProgress6, Switch as Switch4, FormControlLabel as FormControlLabel3 } from "@mui/material";
+import { Alert as Alert11, Box as Box13, Typography as Typography12, Paper as Paper7, IconButton as IconButton7, Tooltip as Tooltip4, LinearProgress as LinearProgress6, Switch as Switch4 } from "@mui/material";
 
 // src/services/mcp/mcpControllerService.ts
 var isPlaygroundMode = () => {
@@ -9316,17 +9314,18 @@ async function fetchMcpHealth() {
 }
 
 // src/management/components/McpServersSection.tsx
-import { useCallback as useCallback8, useEffect as useEffect10, useState as useState13 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useRef as useRef6, useState as useState13 } from "react";
 import {
   Alert as Alert10,
   Box as Box12,
   Button as Button10,
   Chip as Chip9,
-  CircularProgress as CircularProgress2,
   Collapse as Collapse2,
+  CircularProgress as CircularProgress2,
   FormControlLabel as FormControlLabel2,
   IconButton as IconButton6,
   LinearProgress as LinearProgress5,
+  Link,
   MenuItem as MenuItem4,
   Paper as Paper6,
   Stack as Stack5,
@@ -9337,15 +9336,85 @@ import {
 } from "@mui/material";
 import { jsx as jsx12, jsxs as jsxs12 } from "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] = useState13([]);
   const [loading, setLoading] = useState13(false);
   const [error, setError] = useState13(null);
   const [form, setForm] = useState13(emptyForm);
+  const [activeEntry, setActiveEntry] = useState13(null);
   const [adding, setAdding] = useState13(false);
   const [showForm, setShowForm] = useState13(false);
   const [tools, setTools] = useState13({});
   const reloadChatTools = useMCPToolsStore((s) => s.loadMcpServerTools);
+  const formRef = useRef6(null);
   const refresh = useCallback8(async () => {
     setLoading(true);
     setError(null);
@@ -9360,6 +9429,20 @@ var McpServersSection = () => {
   useEffect10(() => {
     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.");
@@ -9376,6 +9459,7 @@ var McpServersSection = () => {
         headerName: form.authType === "header" ? form.headerName : void 0
       });
       setForm(emptyForm);
+      setActiveEntry(null);
       setShowForm(false);
       await refresh();
       void reloadChatTools();
@@ -9414,101 +9498,185 @@ var McpServersSection = () => {
       setTools((prev) => ({ ...prev, [id]: { error: e instanceof Error ? e.message : "Could not connect." } }));
     }
   };
-  return /* @__PURE__ */ jsxs12(Paper6, { sx: { p: 2, mb: 2 }, children: [
-    /* @__PURE__ */ jsxs12(Box12, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1, gap: 1, flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxs12(Box12, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-        /* @__PURE__ */ jsx12(CloudIcon, {}),
-        /* @__PURE__ */ jsx12(Typography11, { variant: "subtitle1", sx: { fontWeight: 700 }, children: "MCP Servers" }),
-        /* @__PURE__ */ jsx12(Chip9, { size: "small", label: String(servers.length) })
-      ] }),
-      /* @__PURE__ */ jsxs12(Box12, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-        /* @__PURE__ */ jsx12(Tooltip3, { title: "Refresh", children: /* @__PURE__ */ jsx12(IconButton6, { onClick: refresh, size: "small", children: /* @__PURE__ */ jsx12(RefreshIcon, {}) }) }),
-        /* @__PURE__ */ jsx12(Button10, { size: "small", variant: "contained", startIcon: /* @__PURE__ */ jsx12(AddIcon, {}), onClick: () => setShowForm((v) => !v), children: "Add server" })
-      ] })
+  return /* @__PURE__ */ jsxs12(Box12, { children: [
+    /* @__PURE__ */ jsxs12(Box12, { sx: { mb: 2.5 }, children: [
+      /* @__PURE__ */ jsx12(Typography11, { variant: "h6", sx: { fontWeight: 700, mb: 0.5 }, children: "Connect your tools" }),
+      /* @__PURE__ */ jsx12(Typography11, { 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__ */ jsx12(Typography11, { 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__ */ jsx12(Alert10, { severity: "error", sx: { mb: 2 }, onClose: () => setError(null), children: error }),
-    /* @__PURE__ */ jsx12(Collapse2, { in: showForm, children: /* @__PURE__ */ jsx12(Paper6, { variant: "outlined", sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ jsxs12(Stack5, { spacing: 2, children: [
-      /* @__PURE__ */ jsx12(
-        TextField7,
-        {
-          label: "Name",
-          size: "small",
-          value: form.name,
-          onChange: (e) => setForm({ ...form, name: e.target.value }),
-          placeholder: "e.g. github",
-          fullWidth: true
-        }
-      ),
-      /* @__PURE__ */ jsx12(
-        TextField7,
-        {
-          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__ */ jsxs12(
-        TextField7,
-        {
-          select: true,
-          label: "Auth",
-          size: "small",
-          value: form.authType,
-          onChange: (e) => setForm({ ...form, authType: e.target.value }),
-          sx: { maxWidth: 220 },
-          children: [
-            /* @__PURE__ */ jsx12(MenuItem4, { value: "none", children: "None" }),
-            /* @__PURE__ */ jsx12(MenuItem4, { value: "bearer", children: "Bearer token" }),
-            /* @__PURE__ */ jsx12(MenuItem4, { value: "header", children: "Custom header" })
-          ]
-        }
-      ),
-      form.authType === "header" && /* @__PURE__ */ jsx12(
-        TextField7,
-        {
-          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__ */ jsx12(
-        TextField7,
-        {
-          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__ */ jsxs12(Box12, { sx: { display: "flex", gap: 1 }, children: [
-        /* @__PURE__ */ jsx12(Button10, { variant: "contained", onClick: handleAdd, disabled: adding, children: adding ? "Adding\u2026" : "Add server" }),
+    /* @__PURE__ */ jsx12(Typography11, { variant: "overline", color: "text.secondary", sx: { fontWeight: 700, letterSpacing: 0.6 }, children: "Popular integrations" }),
+    /* @__PURE__ */ jsx12(
+      Box12,
+      {
+        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__ */ jsxs12(
+            Paper6,
+            {
+              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__ */ jsx12(
+                  Box12,
+                  {
+                    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__ */ jsxs12(Box12, { sx: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ jsx12(Typography11, { variant: "subtitle2", sx: { fontWeight: 700, lineHeight: 1.2 }, children: entry.name }),
+                  /* @__PURE__ */ jsx12(
+                    Typography11,
+                    {
+                      variant: "caption",
+                      color: "text.secondary",
+                      sx: { display: "block", lineHeight: 1.35 },
+                      children: entry.blurb
+                    }
+                  )
+                ] }),
+                connected ? /* @__PURE__ */ jsx12(Chip9, { size: "small", color: "success", label: "Added", sx: { flexShrink: 0 } }) : /* @__PURE__ */ jsx12(
+                  Button10,
+                  {
+                    size: "small",
+                    variant: "outlined",
+                    onClick: () => openForCatalog(entry),
+                    sx: { flexShrink: 0, minWidth: 0 },
+                    children: "Connect"
+                  }
+                )
+              ]
+            },
+            entry.key
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx12(Box12, { ref: formRef, children: /* @__PURE__ */ jsx12(Collapse2, { in: showForm, children: /* @__PURE__ */ jsxs12(Paper6, { variant: "outlined", sx: { p: 2, mb: 2, borderRadius: 2 }, children: [
+      /* @__PURE__ */ jsx12(Typography11, { variant: "subtitle2", sx: { fontWeight: 700, mb: 0.5 }, children: activeEntry ? `Connect ${activeEntry.name}` : "Add a custom server" }),
+      activeEntry?.tokenHelp && /* @__PURE__ */ jsxs12(Typography11, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1.5 }, children: [
+        "Paste your ",
+        activeEntry.tokenLabel,
+        ".",
+        " ",
+        /* @__PURE__ */ jsx12(Link, { href: activeEntry.tokenHelp, target: "_blank", rel: "noopener noreferrer", children: "Get one here \u2192" })
+      ] }),
+      /* @__PURE__ */ jsxs12(Stack5, { spacing: 1.75, children: [
         /* @__PURE__ */ jsx12(
-          Button10,
+          TextField7,
           {
-            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__ */ jsx12(
+          TextField7,
+          {
+            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__ */ jsxs12(
+          TextField7,
+          {
+            select: true,
+            label: "Auth",
+            size: "small",
+            value: form.authType,
+            onChange: (e) => setForm({ ...form, authType: e.target.value }),
+            sx: { maxWidth: 220 },
+            children: [
+              /* @__PURE__ */ jsx12(MenuItem4, { value: "none", children: "None" }),
+              /* @__PURE__ */ jsx12(MenuItem4, { value: "bearer", children: "Bearer token" }),
+              /* @__PURE__ */ jsx12(MenuItem4, { value: "header", children: "Custom header" })
+            ]
+          }
+        ),
+        form.authType === "header" && /* @__PURE__ */ jsx12(
+          TextField7,
+          {
+            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__ */ jsx12(
+          TextField7,
+          {
+            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__ */ jsxs12(Box12, { sx: { display: "flex", gap: 1 }, children: [
+          /* @__PURE__ */ jsx12(Button10, { variant: "contained", onClick: handleAdd, disabled: adding, children: adding ? "Connecting\u2026" : "Connect" }),
+          /* @__PURE__ */ jsx12(
+            Button10,
+            {
+              onClick: () => {
+                setShowForm(false);
+                setActiveEntry(null);
+                setForm(emptyForm);
+              },
+              children: "Cancel"
+            }
+          )
+        ] })
       ] })
     ] }) }) }),
+    /* @__PURE__ */ jsxs12(Box12, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1 }, children: [
+      /* @__PURE__ */ jsxs12(Typography11, { variant: "overline", color: "text.secondary", sx: { fontWeight: 700, letterSpacing: 0.6 }, children: [
+        "Your connections",
+        servers.length ? ` (${servers.length})` : ""
+      ] }),
+      /* @__PURE__ */ jsx12(Button10, { size: "small", startIcon: /* @__PURE__ */ jsx12(AddIcon, {}), onClick: openCustom, children: "Custom server" })
+    ] }),
     loading && /* @__PURE__ */ jsx12(LinearProgress5, { sx: { mb: 2 } }),
-    /* @__PURE__ */ jsxs12(Stack5, { spacing: 1.5, children: [
-      servers.length === 0 && !loading && /* @__PURE__ */ jsx12(Typography11, { variant: "body2", color: "text.secondary", children: "No MCP servers connected yet." }),
+    /* @__PURE__ */ jsxs12(Stack5, { spacing: 1.25, children: [
+      servers.length === 0 && !loading && /* @__PURE__ */ jsx12(Typography11, { 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__ */ jsxs12(Paper6, { variant: "outlined", sx: { p: 1.5 }, children: [
+        return /* @__PURE__ */ jsxs12(Paper6, { variant: "outlined", sx: { p: 1.5, borderRadius: 2 }, children: [
           /* @__PURE__ */ jsxs12(Box12, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1 }, children: [
             /* @__PURE__ */ jsxs12(Box12, { sx: { minWidth: 0 }, children: [
               /* @__PURE__ */ jsx12(Typography11, { variant: "subtitle2", sx: { fontWeight: 700 }, children: server.name }),
@@ -9536,6 +9704,11 @@ var McpServersSection = () => {
           toolState && !Array.isArray(toolState) && toolState !== "loading" && /* @__PURE__ */ jsx12(Alert10, { severity: "warning", sx: { mt: 1 }, children: toolState.error })
         ] }, server.id);
       })
+    ] }),
+    /* @__PURE__ */ jsxs12(Typography11, { 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__ */ jsx12("code", { children: "localhost" }),
+      ", so local servers need the Bandit desktop app."
     ] })
   ] });
 };
@@ -9629,85 +9802,98 @@ var MCPToolsTabV2 = () => {
     return map;
   }, [localTools]);
   return /* @__PURE__ */ jsxs13(Box13, { children: [
-    /* @__PURE__ */ jsxs13(Box13, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 }, children: [
-      /* @__PURE__ */ jsx13(Typography12, { variant: "h5", sx: { fontWeight: 600, color: "primary.main" }, children: "Available Tools" }),
-      /* @__PURE__ */ jsx13(Box13, { children: /* @__PURE__ */ jsx13(Tooltip4, { title: "Refresh", children: /* @__PURE__ */ jsx13(IconButton7, { onClick: refresh, children: /* @__PURE__ */ jsx13(RefreshIcon, {}) }) }) })
-    ] }),
     /* @__PURE__ */ jsx13(McpServersSection_default, {}),
-    !gatewayConfigured && /* @__PURE__ */ jsx13(Paper7, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ jsx13(Typography12, { variant: "body2", color: "text.secondary", children: "Gateway API URL isn\u2019t configured. The controller endpoints will be fetched relative to this origin." }) }),
-    /* @__PURE__ */ jsx13(Paper7, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ jsxs13(Box13, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-      health?.status === "healthy" ? /* @__PURE__ */ jsx13(HealthAndSafetyIcon, { color: "success" }) : health?.status === "unhealthy" ? /* @__PURE__ */ jsx13(ErrorOutlineIcon, { color: "error" }) : /* @__PURE__ */ jsx13(ErrorOutlineIcon, { color: "disabled" }),
-      /* @__PURE__ */ jsx13(Typography12, { variant: "subtitle1", sx: { fontWeight: 600 }, children: "Controller Health" }),
-      /* @__PURE__ */ jsx13(
-        Chip10,
-        {
-          size: "small",
-          label: (health?.status || "unknown").toString(),
-          color: health?.status === "healthy" ? "success" : health?.status === "unhealthy" ? "error" : "default",
-          sx: { ml: 1 }
-        }
-      ),
-      health?.timestamp && /* @__PURE__ */ jsx13(Typography12, { variant: "caption", color: "text.secondary", sx: { ml: 1 }, children: new Date(health.timestamp).toLocaleString() })
-    ] }) }),
-    loading && /* @__PURE__ */ jsx13(Box13, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx13(LinearProgress6, {}) }),
-    error && /* @__PURE__ */ jsx13(Paper7, { sx: { p: 2, mb: 2 }, children: /* @__PURE__ */ jsx13(Typography12, { color: "error", children: error }) }),
-    /* @__PURE__ */ jsx13(Stack6, { 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__ */ jsxs13(Paper7, { sx: { p: 2 }, children: [
-        /* @__PURE__ */ jsxs13(Box13, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ jsxs13(Box13, { children: [
-            /* @__PURE__ */ jsx13(Typography12, { variant: "h6", sx: { fontWeight: 700 }, children: tool.name }),
-            /* @__PURE__ */ jsx13(Typography12, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: tool.description })
-          ] }),
-          /* @__PURE__ */ jsxs13(Box13, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            /* @__PURE__ */ jsx13(
-              FormControlLabel3,
-              {
-                control: /* @__PURE__ */ jsx13(Switch4, { 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__ */ jsxs13(Box13, { sx: { mt: 4 }, children: [
+      /* @__PURE__ */ jsxs13(Box13, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 0.5 }, children: [
+        /* @__PURE__ */ jsx13(Typography12, { variant: "overline", color: "text.secondary", sx: { fontWeight: 700, letterSpacing: 0.6 }, children: "Built-in capabilities" }),
+        /* @__PURE__ */ jsxs13(Box13, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+          /* @__PURE__ */ jsx13(Tooltip4, { title: `Controller: ${health?.status || "unknown"}`, children: /* @__PURE__ */ jsx13(
+            Box13,
+            {
+              sx: {
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                bgcolor: health?.status === "healthy" ? "success.main" : health?.status === "unhealthy" ? "error.main" : "grey.500"
               }
-            ),
-            /* @__PURE__ */ jsx13(Tooltip4, { title: "Controller-driven tools (read-only schema)", children: /* @__PURE__ */ jsx13(SettingsIcon, { color: "disabled" }) })
-          ] })
-        ] }),
-        !!tool.supportedParameters?.length && /* @__PURE__ */ jsxs13(Box13, { sx: { mt: 1.5 }, children: [
-          /* @__PURE__ */ jsx13(Typography12, { variant: "caption", color: "text.secondary", children: "Supported parameters" }),
-          /* @__PURE__ */ jsx13(Box13, { sx: { mt: 0.5, display: "flex", flexWrap: "wrap", gap: 1 }, children: tool.supportedParameters.map((p) => /* @__PURE__ */ jsx13(Chip10, { size: "small", label: p }, p)) })
+            }
+          ) }),
+          /* @__PURE__ */ jsx13(Tooltip4, { title: "Refresh", children: /* @__PURE__ */ jsx13(IconButton7, { size: "small", onClick: refresh, children: /* @__PURE__ */ jsx13(RefreshIcon, { fontSize: "small" }) }) })
         ] })
-      ] }, tool.id);
-    }) })
+      ] }),
+      /* @__PURE__ */ jsx13(Typography12, { 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__ */ jsx13(LinearProgress6, { sx: { mb: 2 } }),
+      error && /* @__PURE__ */ jsx13(Alert11, { severity: "warning", sx: { mb: 2 }, children: error }),
+      !gatewayConfigured && /* @__PURE__ */ jsx13(Alert11, { severity: "info", sx: { mb: 2 }, children: "Using this origin for tool endpoints (no gateway URL configured)." }),
+      /* @__PURE__ */ jsxs13(
+        Box13,
+        {
+          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__ */ jsxs13(
+                Paper7,
+                {
+                  variant: "outlined",
+                  sx: {
+                    p: 1.5,
+                    borderRadius: 2,
+                    display: "flex",
+                    alignItems: "flex-start",
+                    justifyContent: "space-between",
+                    gap: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs13(Box13, { sx: { minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx13(Typography12, { variant: "subtitle2", sx: { fontWeight: 700 }, children: tool.name }),
+                      /* @__PURE__ */ jsx13(Typography12, { variant: "caption", color: "text.secondary", sx: { display: "block", lineHeight: 1.4 }, children: tool.description })
+                    ] }),
+                    /* @__PURE__ */ jsx13(
+                      Switch4,
+                      {
+                        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__ */ jsx13(Typography12, { variant: "body2", color: "text.secondary", children: "No built-in tools reported." })
+          ]
+        }
+      )
+    ] })
   ] });
 };
 var MCPToolsTabV2_default = MCPToolsTabV2;
 
 // src/management/management.tsx
 import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
-var preloadChatPage = () => import("./chat-HQHHNWBS.mjs");
+var preloadChatPage = () => import("./chat-JDAI4UHT.mjs");
 var buildCapabilitiesUrl = (gatewayApiUrl) => {
   const trimmed = gatewayApiUrl.replace(/\/$/, "");
   if (trimmed.endsWith("/api")) {
@@ -10483,8 +10669,8 @@ var Management = () => {
         MuiCardContent: {
           styleOverrides: {
             root: {
-              padding: 16,
-              "&:last-child": { paddingBottom: 16 }
+              padding: 12,
+              "&:last-child": { paddingBottom: 12 }
             }
           }
         },
@@ -11073,4 +11259,4 @@ export {
   useGatewayMemory,
   management_default
 };
-//# sourceMappingURL=chunk-N3UWG6CU.mjs.map
+//# sourceMappingURL=chunk-Q6QQZXRR.mjs.map