@shuffleio/shuffle-mcps 0.0.21 → 0.0.23

package/dist/index.mjs

@@ -25,20 +25,39 @@ import React5 from "react";
 // ShuffleMcpThemeProvider.tsx
 import React from "react";
 import { ThemeProvider, createTheme, useTheme as useMuiTheme } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var readHtmlDarkClass = () => {
   if (typeof document === "undefined") return false;
   return document.documentElement.classList.contains("dark");
 };
-var useHtmlDarkClass = (enabled) => {
+var readAncestorDark = (anchor) => {
+  if (!anchor || typeof document === "undefined") return null;
+  const start = anchor.parentElement;
+  if (!start) return null;
+  const scoped = start.closest('[data-shuffle-mode="dark"], [data-shuffle-mode="light"]');
+  if (scoped) return scoped.getAttribute("data-shuffle-mode") === "dark";
+  const darkAncestor = start.closest(".dark");
+  if (darkAncestor) return true;
+  return null;
+};
+var useAutoDarkClass = (enabled, anchorRef) => {
   const [isDark, setIsDark] = React.useState(() => enabled ? readHtmlDarkClass() : false);
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (!enabled || typeof document === "undefined") return;
-    setIsDark(readHtmlDarkClass());
-    const observer = new MutationObserver(() => setIsDark(readHtmlDarkClass()));
+    const recompute = () => {
+      const ancestor = readAncestorDark(anchorRef.current);
+      setIsDark(ancestor !== null ? ancestor : readHtmlDarkClass());
+    };
+    recompute();
+    const observer = new MutationObserver(recompute);
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    let node = anchorRef.current?.parentElement ?? null;
+    while (node) {
+      observer.observe(node, { attributes: true, attributeFilter: ["class", "data-shuffle-mode"] });
+      node = node.parentElement;
+    }
     return () => observer.disconnect();
-  }, [enabled]);
+  }, [enabled, anchorRef]);
   return isDark;
 };
 var ShuffleMcpThemeContext = React.createContext(null);
@@ -125,10 +144,12 @@ var ShuffleMcpThemeProvider = ({
 }) => {
   const parent = useMuiTheme();
   const parentCtx = useShuffleMcpTheme();
-  const htmlIsDark = useHtmlDarkClass(mode === "auto");
-  const effectiveDark = mode === "auto" ? htmlIsDark : mode === "dark";
+  const anchorRef = React.useRef(null);
+  const autoIsDark = useAutoDarkClass(mode === "auto", anchorRef);
+  const effectiveDark = mode === "auto" ? autoIsDark : mode === "dark";
   const sameAsParent = parentCtx !== null && parentCtx.isDark === effectiveDark;
   const scopeClassName = effectiveDark ? "shuffle-mcp-scope dark" : "shuffle-mcp-scope";
+  const resolvedModeAttr = effectiveDark ? "dark" : "light";
   const merged = React.useMemo(
     () => createTheme({
       ...parent,
@@ -148,9 +169,15 @@ var ShuffleMcpThemeProvider = ({
     [mode, effectiveDark, scopeClassName]
   );
   if (sameAsParent) {
-    return /* @__PURE__ */ jsx(ShuffleMcpThemeContext.Provider, { value: ctxValue, children });
+    return /* @__PURE__ */ jsxs(ShuffleMcpThemeContext.Provider, { value: ctxValue, children: [
+      /* @__PURE__ */ jsx("span", { ref: anchorRef, style: { display: "none" }, "aria-hidden": true }),
+      children
+    ] });
   }
-  return /* @__PURE__ */ jsx(ShuffleMcpThemeContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: merged, children: /* @__PURE__ */ jsx("div", { className: scopeClassName, "data-shuffle-mode": mode, "data-shuffle-mcp-root": true, children }) }) });
+  return /* @__PURE__ */ jsx(ShuffleMcpThemeContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: merged, children: /* @__PURE__ */ jsxs("div", { className: scopeClassName, "data-shuffle-mode": resolvedModeAttr, "data-shuffle-mcp-root": true, children: [
+    /* @__PURE__ */ jsx("span", { ref: anchorRef, style: { display: "none" }, "aria-hidden": true }),
+    children
+  ] }) }) });
 };
 
 // views/ShuffleMCP.tsx
@@ -159,7 +186,7 @@ import { algoliasearch } from "algoliasearch";
 import { Tooltip as Tooltip4 } from "@mui/material";
 
 // views/AppDetailDrawer.tsx
-import { useState as useState8, useEffect as useEffect6, useMemo as useMemo3, useRef as useRef5 } from "react";
+import { useState as useState8, useEffect as useEffect7, useMemo as useMemo3, useRef as useRef5 } from "react";
 
 // toast.ts
 var defaultImpl = (arg, opts) => {
@@ -923,7 +950,7 @@ function extractValidatedIngestionApps(authApiResponse, workflowAppNames) {
 }
 
 // components/IntegrationStatus.tsx
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var ONBOARDING_CONFIG_CATEGORY = "shuffle-security_onboarding";
 var SELECTED_TOOLS_KEY = "selected_tools";
 var PRIORITY_CATEGORY_PATTERNS = {
@@ -1084,7 +1111,7 @@ var IntegrationStatus = ({ collapsed, filterApps, onAddClick, iconSize = 26, onD
     return integration.hasValidAuth ? "hsl(var(--severity-low))" : "hsl(var(--severity-medium))";
   };
   const sz = iconSize;
-  return /* @__PURE__ */ jsxs(Box, { sx: { px: collapsed ? 0 : 1, py: 1 }, children: [
+  return /* @__PURE__ */ jsxs2(Box, { sx: { px: collapsed ? 0 : 1, py: 1 }, children: [
     !collapsed && !hideHeader && /* @__PURE__ */ jsx3(
       Typography,
       {
@@ -1108,20 +1135,20 @@ var IntegrationStatus = ({ collapsed, filterApps, onAddClick, iconSize = 26, onD
       px: collapsed ? 0 : 1,
       maxHeight: expanded ? "none" : 80,
       overflow: "hidden"
-    }, children: loading ? /* @__PURE__ */ jsx3(CircularProgress, { size: 20, sx: { color: "hsl(var(--muted-foreground))" } }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    }, children: loading ? /* @__PURE__ */ jsx3(CircularProgress, { size: 20, sx: { color: "hsl(var(--muted-foreground))" } }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
       integrations.slice(0, displayLimit).map((integration) => {
         const isDisabled = disabledApps?.has(integration.name) ?? false;
         const isHovered = hoveredId === integration.id;
         return /* @__PURE__ */ jsx3(
           Tooltip,
           {
-            title: onDisable && isHovered ? "" : /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "left", minWidth: 160, maxWidth: 320, p: 0.5 }, children: [
-              /* @__PURE__ */ jsxs(Typography, { sx: { fontWeight: 600, fontSize: "0.85rem", color: "hsl(var(--foreground))", textTransform: "capitalize" }, children: [
+            title: onDisable && isHovered ? "" : /* @__PURE__ */ jsxs2(Box, { sx: { textAlign: "left", minWidth: 160, maxWidth: 320, p: 0.5 }, children: [
+              /* @__PURE__ */ jsxs2(Typography, { sx: { fontWeight: 600, fontSize: "0.85rem", color: "hsl(var(--foreground))", textTransform: "capitalize" }, children: [
                 integration.name.replace(/_/g, " "),
                 isDisabled && /* @__PURE__ */ jsx3(Typography, { component: "span", sx: { ml: 1, fontSize: "0.7rem", color: "hsl(var(--muted-foreground))" }, children: "(disabled)" })
               ] }),
               /* @__PURE__ */ jsx3(Typography, { sx: { fontSize: "0.7rem", color: "hsl(var(--muted-foreground))", mb: 1, textTransform: "capitalize" }, children: integration.category }),
-              /* @__PURE__ */ jsx3(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: integration.authInstances.map((instance, idx) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx3(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: integration.authInstances.map((instance, idx) => /* @__PURE__ */ jsxs2(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75, minWidth: 0 }, children: [
                 /* @__PURE__ */ jsx3(
                   Box,
                   {
@@ -1140,7 +1167,7 @@ var IntegrationStatus = ({ collapsed, filterApps, onAddClick, iconSize = 26, onD
             ] }),
             placement: "bottom",
             arrow: true,
-            children: /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsxs2(
               Box,
               {
                 onMouseEnter: () => onDisable && setHoveredId(integration.id),
@@ -1248,7 +1275,7 @@ var IntegrationStatus = ({ collapsed, filterApps, onAddClick, iconSize = 26, onD
           integration.id
         );
       }),
-      hasMore && !expanded && /* @__PURE__ */ jsx3(Tooltip, { title: `Show all ${integrations.length} integrations`, placement: "bottom", children: /* @__PURE__ */ jsxs(
+      hasMore && !expanded && /* @__PURE__ */ jsx3(Tooltip, { title: `Show all ${integrations.length} integrations`, placement: "bottom", children: /* @__PURE__ */ jsxs2(
         Avatar,
         {
           onClick: () => setExpanded(true),
@@ -1579,7 +1606,7 @@ import {
   AlertCircle as ErrorOutlineIcon
 } from "lucide-react";
 import { motion } from "framer-motion";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function AppTitleHeader({
   name,
   image,
@@ -1592,7 +1619,7 @@ function AppTitleHeader({
   onActivateToggle,
   onAdd
 }) {
-  return /* @__PURE__ */ jsx4(motion.div, { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx4(motion.div, { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: /* @__PURE__ */ jsxs3(
     Box2,
     {
       sx: {
@@ -1624,8 +1651,8 @@ function AppTitleHeader({
             children: /* @__PURE__ */ jsx4(Typography2, { sx: { fontSize: "1.2rem", fontWeight: 700 }, children: name.charAt(0).toUpperCase() })
           }
         ),
-        /* @__PURE__ */ jsxs2(Box2, { sx: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
+        /* @__PURE__ */ jsxs3(Box2, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs3(Box2, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
             /* @__PURE__ */ jsx4(Typography2, { sx: { color: "hsl(var(--foreground))", fontWeight: 700, fontSize: "1rem", textTransform: "capitalize" }, children: name }),
             isAuthenticated && hasValidAuth && /* @__PURE__ */ jsx4(
               Chip,
@@ -1708,7 +1735,7 @@ import { Box as Box4, Typography as Typography4 } from "@mui/material";
 import { motion as motion3 } from "framer-motion";
 
 // components/AppAuthConfig.tsx
-import { useState as useState5, useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useState as useState5, useEffect as useEffect5, useRef as useRef2 } from "react";
 import {
   CheckCircle2 as CheckCircleIcon2,
   X as CloseIcon,
@@ -1891,10 +1918,19 @@ var AppFallbackIcon = ({
   );
 };
 
+// useSyncHostBaseUrl.ts
+import { useEffect as useEffect4 } from "react";
+var useSyncHostBaseUrl = (globalUrl) => {
+  useEffect4(() => {
+    if (!globalUrl) return;
+    setHostBaseUrl(globalUrl);
+  }, [globalUrl]);
+};
+
 // components/AppAuthConfig.tsx
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var isOAuth2Type = (type) => {
   if (!type) return false;
   const lowerType = type.toLowerCase();
@@ -1947,8 +1983,14 @@ var AppAuthCard = ({
   hideStatusChips,
   hideDocsLink,
   hideUrlFields,
-  borderless
+  borderless,
+  globalUrl,
+  userdata,
+  isLoaded,
+  isLoggedIn,
+  serverside
 }) => {
+  useSyncHostBaseUrl(globalUrl);
   const getBestDefaultAuth = (entries) => {
     if (entries.length === 0) return ADD_NEW_AUTH;
     const validatedEntry = entries.find((e) => e.validation?.valid === true);
@@ -1993,7 +2035,7 @@ var AppAuthCard = ({
   const [wasPreValidatedPerAuth, setWasPreValidatedPerAuth] = useState5({});
   const prevEntryCountRef = useRef2(apiAuthEntries.length);
   const autoTestFiredRef = useRef2(null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (apiAuthEntries.length > 0) {
       if (apiAuthEntries.length > prevEntryCountRef.current) {
         const sorted = [...apiAuthEntries].sort((a, b) => {
@@ -2022,7 +2064,7 @@ var AppAuthCard = ({
     }
     prevEntryCountRef.current = apiAuthEntries.length;
   }, [apiAuthEntries, userHasSelected]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (wasPreValidatedPerAuth[selectedAuthId] === void 0) {
       const currentAuth = apiAuthEntries.find(
         (auth2) => (auth2.id || auth2.label || "") === selectedAuthId
@@ -2044,7 +2086,7 @@ var AppAuthCard = ({
   };
   const localTestMessages = testMessagesPerAuth[selectedAuthId] || {};
   const wasPreValidated = wasPreValidatedPerAuth[selectedAuthId] || false;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!testingAuthId) return;
     if (authState.status === "testing") {
       setTestStatusForAuth(testingAuthId, "testing");
@@ -2105,12 +2147,12 @@ var AppAuthCard = ({
   const [saveSuccess, setSaveSuccess] = useState5(null);
   const [error, setError] = useState5(null);
   const [appConfig, setAppConfig] = useState5(null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isExpanded && onRefreshAuth) {
       onRefreshAuth();
     }
   }, [isExpanded]);
-  useEffect4(() => {
+  useEffect5(() => {
     const fetchAppConfig = async () => {
       if (!isExpanded || appConfig) return;
       setLoading(true);
@@ -2144,12 +2186,12 @@ var AppAuthCard = ({
   const auth = appConfig?.authentication;
   const isOAuth2 = isOAuth2Type(auth?.type);
   const [selectedScopes, setSelectedScopes] = useState5([]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (auth?.scope) {
       setSelectedScopes(auth.scope);
     }
   }, [auth?.scope]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (disableUrlPrefill) return;
     if (!auth?.parameters || auth.parameters.length === 0) return;
     const urlDefaults = {};
@@ -2166,7 +2208,7 @@ var AppAuthCard = ({
       setLocalCredentials((prev) => ({ ...urlDefaults, ...prev }));
     }
   }, [auth?.parameters, disableUrlPrefill]);
-  useEffect4(() => {
+  useEffect5(() => {
     const incoming = authState.credentials || {};
     setLocalCredentials((prev) => {
       let changed = false;
@@ -2256,10 +2298,10 @@ var AppAuthCard = ({
     if (!auth || !isOAuth2) return null;
     const availableScopes = auth.scope || [];
     const hasManualCredentials = !!localCredentials["client_id"]?.trim() && !!localCredentials["client_secret"]?.trim();
-    return /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
-      /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsx6(Collapse, { in: !hasManualCredentials, children: /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
-          /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+      /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsx6(Collapse, { in: !hasManualCredentials, children: /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+          /* @__PURE__ */ jsxs4(
             Button2,
             {
               variant: "outlined",
@@ -2325,7 +2367,7 @@ var AppAuthCard = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+          /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
             /* @__PURE__ */ jsx6(Divider, { sx: { flex: 1, borderColor: "hsl(var(--border))" } }),
             /* @__PURE__ */ jsx6(Typography3, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.875rem" }, children: "OR configure manually" }),
             /* @__PURE__ */ jsx6(Divider, { sx: { flex: 1, borderColor: "hsl(var(--border))" } })
@@ -2353,8 +2395,8 @@ var AppAuthCard = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-        /* @__PURE__ */ jsxs3(Typography3, { variant: "body2", sx: { color: "hsl(var(--muted-foreground))" }, children: [
+      /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+        /* @__PURE__ */ jsxs4(Typography3, { variant: "body2", sx: { color: "hsl(var(--muted-foreground))" }, children: [
           "Redirect URL: ",
           /* @__PURE__ */ jsx6(Typography3, { component: "span", sx: { color: "hsl(var(--primary))", fontWeight: 600 }, children: auth.redirect_uri || "https://shuffler.io/set_authentication" })
         ] }),
@@ -2437,7 +2479,7 @@ var AppAuthCard = ({
                 }
               }
             },
-            children: availableScopes.map((scope) => /* @__PURE__ */ jsxs3(MenuItem, { value: scope, sx: { color: "hsl(var(--foreground))" }, children: [
+            children: availableScopes.map((scope) => /* @__PURE__ */ jsxs4(MenuItem, { value: scope, sx: { color: "hsl(var(--foreground))" }, children: [
               /* @__PURE__ */ jsx6(
                 Checkbox,
                 {
@@ -2466,7 +2508,7 @@ var AppAuthCard = ({
       return /* @__PURE__ */ jsx6(
         TextField,
         {
-          label: /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          label: /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
             param.name,
             param.required && /* @__PURE__ */ jsx6(Typography3, { component: "span", sx: { color: "hsl(var(--destructive))", fontSize: "0.8rem" }, children: "*" })
           ] }),
@@ -2577,14 +2619,14 @@ var AppAuthCard = ({
       [key]: error2 || ""
     }));
   };
-  return /* @__PURE__ */ jsxs3(motion2.div, { variants: itemVariants, style: { width: "100%", maxWidth: "100%" }, children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(motion2.div, { variants: itemVariants, style: { width: "100%", maxWidth: "100%" }, children: [
+    /* @__PURE__ */ jsxs4(
       Card,
       {
         sx: {
           background: "transparent",
-          border: borderless ? "none" : "1px solid",
-          borderColor: borderless ? "transparent" : isTested ? "hsl(var(--severity-low) / 0.5)" : authState.status === "error" ? "hsl(var(--destructive) / 0.3)" : "hsl(var(--border))",
+          border: borderless ? "none" : "2px solid",
+          borderColor: borderless ? "transparent" : isTested ? "hsl(var(--severity-low) / 0.9)" : authState.status === "error" ? "hsl(var(--destructive) / 0.7)" : "hsl(var(--border))",
           borderRadius: borderless ? 0 : 3,
           boxShadow: "none",
           overflow: "hidden",
@@ -2593,7 +2635,7 @@ var AppAuthCard = ({
           maxWidth: "100%"
         },
         children: [
-          !hideHeader && /* @__PURE__ */ jsxs3(
+          !hideHeader && /* @__PURE__ */ jsxs4(
             CardContent,
             {
               onClick: onToggle,
@@ -2608,7 +2650,7 @@ var AppAuthCard = ({
                 "&:hover": { backgroundColor: "hsl(var(--muted) / 0.35)" }
               },
               children: [
-                /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", gap: 2, flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", gap: 2, flex: 1, minWidth: 0 }, children: [
                   /* @__PURE__ */ jsx6(
                     Box3,
                     {
@@ -2634,7 +2676,7 @@ var AppAuthCard = ({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsxs3(Box3, { sx: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ jsxs4(Box3, { sx: { minWidth: 0, flex: 1 }, children: [
                     /* @__PURE__ */ jsx6(
                       Typography3,
                       {
@@ -2666,7 +2708,7 @@ var AppAuthCard = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs3(Box3, { sx: {
+                /* @__PURE__ */ jsxs4(Box3, { sx: {
                   display: "flex",
                   alignItems: "center",
                   gap: { xs: 1, sm: 1.5 },
@@ -2687,7 +2729,7 @@ var AppAuthCard = ({
                         height: { xs: 22, sm: 24 }
                       }
                     }
-                  ) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                  ) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
                     /* @__PURE__ */ jsx6(
                       Chip2,
                       {
@@ -2760,7 +2802,7 @@ var AppAuthCard = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx6(Collapse, { in: isExpanded, children: /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsx6(Collapse, { in: isExpanded, children: /* @__PURE__ */ jsxs4(
             Box3,
             {
               sx: {
@@ -2770,9 +2812,9 @@ var AppAuthCard = ({
                 borderTop: borderless ? "none" : "1px solid hsl(var(--border))"
               },
               children: [
-                apiAuthEntries.length > 0 && /* @__PURE__ */ jsxs3(Box3, { sx: { mb: 3 }, children: [
+                apiAuthEntries.length > 0 && /* @__PURE__ */ jsxs4(Box3, { sx: { mb: 3 }, children: [
                   /* @__PURE__ */ jsx6(Typography3, { variant: "body2", sx: { color: "hsl(var(--muted-foreground))", mb: 1 }, children: "Select authentication" }),
-                  /* @__PURE__ */ jsx6(FormControl, { fullWidth: true, size: "small", children: /* @__PURE__ */ jsxs3(
+                  /* @__PURE__ */ jsx6(FormControl, { fullWidth: true, size: "small", children: /* @__PURE__ */ jsxs4(
                     Select,
                     {
                       value: selectedAuthId,
@@ -2824,8 +2866,8 @@ var AppAuthCard = ({
                           };
                           const configuredDate = authEntry.created || authEntry.edited;
                           const lastValidDate = authEntry.validation?.last_valid;
-                          return /* @__PURE__ */ jsx6(MenuItem, { value: entryId, sx: { color: "hsl(var(--foreground))", py: 1 }, children: /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", gap: 1, width: "100%", minWidth: 0 }, children: [
-                            /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", gap: 0.5, flexShrink: 0 }, children: [
+                          return /* @__PURE__ */ jsx6(MenuItem, { value: entryId, sx: { color: "hsl(var(--foreground))", py: 1 }, children: /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", gap: 1, width: "100%", minWidth: 0 }, children: [
+                            /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", gap: 0.5, flexShrink: 0 }, children: [
                               /* @__PURE__ */ jsx6(
                                 Tooltip2,
                                 {
@@ -2919,7 +2961,7 @@ var AppAuthCard = ({
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs3(
+                  /* @__PURE__ */ jsxs4(
                     Dialog,
                     {
                       open: !!deleteConfirmAuthId,
@@ -2937,9 +2979,9 @@ var AppAuthCard = ({
                       },
                       children: [
                         /* @__PURE__ */ jsx6(DialogTitle, { sx: { color: "hsl(var(--foreground))", fontWeight: 600, pb: 1 }, children: "Delete Authentication" }),
-                        /* @__PURE__ */ jsxs3(DialogContent, { children: [
+                        /* @__PURE__ */ jsxs4(DialogContent, { children: [
                           /* @__PURE__ */ jsx6(Typography3, { sx: { color: "hsl(var(--muted-foreground))", mb: 3 }, children: "Are you sure you want to delete this authentication? This action cannot be undone." }),
-                          /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", justifyContent: "flex-end", gap: 1.5 }, children: [
+                          /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", justifyContent: "flex-end", gap: 1.5 }, children: [
                             /* @__PURE__ */ jsx6(
                               Button2,
                               {
@@ -2987,7 +3029,7 @@ var AppAuthCard = ({
                       ]
                     }
                   ),
-                  !showAddNewForm && selectedAuth && /* @__PURE__ */ jsxs3(Box3, { sx: {
+                  !showAddNewForm && selectedAuth && /* @__PURE__ */ jsxs4(Box3, { sx: {
                     mt: 2,
                     p: 0,
                     backgroundColor: "hsl(var(--muted))",
@@ -2995,7 +3037,7 @@ var AppAuthCard = ({
                     border: "1px solid hsl(var(--border))",
                     overflow: "hidden"
                   }, children: [
-                    /* @__PURE__ */ jsxs3(Box3, { sx: {
+                    /* @__PURE__ */ jsxs4(Box3, { sx: {
                       display: "flex",
                       alignItems: "center",
                       gap: 1.5,
@@ -3019,14 +3061,14 @@ var AppAuthCard = ({
                         letterSpacing: "0.05em"
                       }, children: localTestStatus === "success" ? "Verified Authentication" : localTestStatus === "pending_validation" ? "Awaiting Backend Validation" : localTestStatus === "error" ? "Test Failed" : "Pending Verification" })
                     ] }),
-                    /* @__PURE__ */ jsxs3(Box3, { sx: {
+                    /* @__PURE__ */ jsxs4(Box3, { sx: {
                       display: "flex",
                       flexDirection: "column",
                       alignItems: "stretch",
                       gap: 2,
                       p: { xs: 2, sm: 2.5 }
                     }, children: [
-                      /* @__PURE__ */ jsxs3(Box3, { sx: {
+                      /* @__PURE__ */ jsxs4(Box3, { sx: {
                         display: "flex",
                         alignItems: "center",
                         gap: 1.5,
@@ -3044,8 +3086,8 @@ var AppAuthCard = ({
                           border: `1px solid ${localTestStatus === "success" ? "hsl(var(--severity-low) / 0.2)" : localTestStatus === "pending_validation" ? "hsl(var(--severity-medium) / 0.2)" : localTestStatus === "error" ? "hsl(var(--destructive) / 0.2)" : isTested ? "hsl(var(--severity-low) / 0.2)" : isConfigured ? "hsl(var(--severity-medium) / 0.2)" : "hsl(var(--muted-foreground) / 0.2)"}`,
                           flexShrink: 0
                         }, children: /* @__PURE__ */ jsx6(CheckCircleIcon2, { size: 20 }) }),
-                        /* @__PURE__ */ jsxs3(Box3, { sx: { minWidth: 0, flex: 1 }, children: [
-                          /* @__PURE__ */ jsx6(Box3, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: editingLabel ? /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, onClick: (e) => e.stopPropagation(), children: [
+                        /* @__PURE__ */ jsxs4(Box3, { sx: { minWidth: 0, flex: 1 }, children: [
+                          /* @__PURE__ */ jsx6(Box3, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: editingLabel ? /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, onClick: (e) => e.stopPropagation(), children: [
                             /* @__PURE__ */ jsx6(
                               TextField,
                               {
@@ -3106,7 +3148,7 @@ var AppAuthCard = ({
                                 children: "Cancel"
                               }
                             )
-                          ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                          ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
                             /* @__PURE__ */ jsx6(Typography3, { sx: {
                               color: "hsl(var(--foreground))",
                               fontWeight: 600,
@@ -3200,7 +3242,7 @@ var AppAuthCard = ({
                           borderRadius: 2,
                           "& .MuiAlert-icon": { color: "hsl(var(--destructive))" }
                         },
-                        children: /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, width: "100%" }, children: [
+                        children: /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, width: "100%" }, children: [
                           /* @__PURE__ */ jsx6(Typography3, { sx: { fontSize: "0.875rem", flex: 1 }, children: localTestMessages.errorMessage }),
                           localTestMessages.workflowId && localTestMessages.executionId && /* @__PURE__ */ jsx6(
                             Button2,
@@ -3245,7 +3287,7 @@ var AppAuthCard = ({
                             color: localTestMessages.warningMessage ? "hsl(var(--severity-medium))" : "hsl(var(--severity-low))"
                           }
                         },
-                        children: localTestMessages.warningMessage ? /* @__PURE__ */ jsxs3(Box3, { children: [
+                        children: localTestMessages.warningMessage ? /* @__PURE__ */ jsxs4(Box3, { children: [
                           /* @__PURE__ */ jsx6(Typography3, { sx: { fontWeight: 600, mb: 0.5 }, children: localTestMessages.successMessage || "Connection probably working" }),
                           /* @__PURE__ */ jsx6(Typography3, { sx: { fontSize: "0.85rem", opacity: 0.9 }, children: localTestMessages.warningMessage })
                         ] }) : localTestMessages.successMessage || "Connection verified successfully"
@@ -3265,7 +3307,7 @@ var AppAuthCard = ({
                           borderRadius: 2,
                           "& .MuiAlert-icon": { color: "hsl(var(--severity-medium))" }
                         },
-                        children: /* @__PURE__ */ jsxs3(Box3, { children: [
+                        children: /* @__PURE__ */ jsxs4(Box3, { children: [
                           /* @__PURE__ */ jsx6(Typography3, { sx: { fontWeight: 600, mb: 0.5 }, children: "Test passed (Status 200), but not marked as validated" }),
                           /* @__PURE__ */ jsx6(Typography3, { sx: { fontSize: "0.85rem", opacity: 0.9, mb: 1 }, children: "The API returned success, but Shuffle hasn't confirmed the validation yet. This could mean credentials are correct but the app needs additional setup." }),
                           /* @__PURE__ */ jsx6(
@@ -3288,7 +3330,7 @@ var AppAuthCard = ({
                     ) })
                   ] })
                 ] }),
-                (apiAuthEntries.length === 0 || showAddNewForm) && /* @__PURE__ */ jsxs3(Box3, { sx: {
+                (apiAuthEntries.length === 0 || showAddNewForm) && /* @__PURE__ */ jsxs4(Box3, { sx: {
                   p: 3,
                   backgroundColor: "hsl(var(--background) / 0.4)",
                   borderRadius: 2,
@@ -3310,10 +3352,10 @@ var AppAuthCard = ({
                     }
                   ),
                   /* @__PURE__ */ jsx6(Typography3, { variant: "subtitle2", sx: { color: "hsl(var(--foreground))", fontWeight: 600, mb: 2 }, children: apiAuthEntries.length === 0 ? "Configure Authentication" : "Add New Authentication" }),
-                  loading ? /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", justifyContent: "center", py: 4 }, children: [
+                  loading ? /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", justifyContent: "center", py: 4 }, children: [
                     /* @__PURE__ */ jsx6(CircularProgress2, { size: 32, sx: { color: "hsl(var(--primary))" } }),
                     /* @__PURE__ */ jsx6(Typography3, { sx: { ml: 2, color: "hsl(var(--muted-foreground))" }, children: "Loading configuration..." })
-                  ] }) : saving || authState.status === "testing" ? /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", justifyContent: "center", py: 4 }, children: [
+                  ] }) : saving || authState.status === "testing" ? /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", justifyContent: "center", py: 4 }, children: [
                     /* @__PURE__ */ jsx6(CircularProgress2, { size: 32, sx: { color: "hsl(var(--primary))" } }),
                     /* @__PURE__ */ jsx6(Typography3, { sx: { ml: 2, color: "hsl(var(--muted-foreground))" }, children: saving ? "Saving authentication..." : "Testing connection..." })
                   ] }) : error ? /* @__PURE__ */ jsx6(
@@ -3339,12 +3381,12 @@ var AppAuthCard = ({
                         borderRadius: 2,
                         "& .MuiAlert-icon": { color: "hsl(var(--severity-info))" }
                       },
-                      children: /* @__PURE__ */ jsxs3(Box3, { children: [
+                      children: /* @__PURE__ */ jsxs4(Box3, { children: [
                         /* @__PURE__ */ jsx6(Typography3, { sx: { fontWeight: 600, mb: 0.5 }, children: "No authentication required" }),
                         /* @__PURE__ */ jsx6(Typography3, { sx: { fontSize: "0.85rem", opacity: 0.9 }, children: "This app works without credentials. You can use it directly." })
                       ] })
                     }
-                  ) : /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+                  ) : /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
                     renderOAuth2Fields(),
                     renderParameterFields(),
                     authState.status === "error" && authState.errorMessage && /* @__PURE__ */ jsx6(
@@ -3357,7 +3399,7 @@ var AppAuthCard = ({
                           border: "1px solid hsl(var(--destructive) / 0.3)",
                           borderRadius: 2
                         },
-                        children: /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, width: "100%" }, children: [
+                        children: /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, width: "100%" }, children: [
                           /* @__PURE__ */ jsx6(Typography3, { sx: { fontSize: "0.875rem", flex: 1 }, children: authState.errorMessage }),
                           authState.workflowId && authState.executionId && /* @__PURE__ */ jsx6(
                             Button2,
@@ -3534,7 +3576,7 @@ var AppAuthCard = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs4(
       Dialog,
       {
         open: docsOpen,
@@ -3553,7 +3595,7 @@ var AppAuthCard = ({
           }
         },
         children: [
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             DialogTitle,
             {
               sx: {
@@ -3564,7 +3606,7 @@ var AppAuthCard = ({
                 color: "hsl(var(--foreground))"
               },
               children: [
-                /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+                /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
                   app.image_url && /* @__PURE__ */ jsx6(
                     Box3,
                     {
@@ -3574,7 +3616,7 @@ var AppAuthCard = ({
                       sx: { width: 32, height: 32, borderRadius: 1, objectFit: "contain" }
                     }
                   ),
-                  /* @__PURE__ */ jsxs3(Typography3, { variant: "h6", sx: { fontWeight: 600 }, children: [
+                  /* @__PURE__ */ jsxs4(Typography3, { variant: "h6", sx: { fontWeight: 600 }, children: [
                     app.name.replace(/_/g, " "),
                     " Documentation"
                   ] })
@@ -3583,7 +3625,7 @@ var AppAuthCard = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx6(DialogContent, { sx: { pt: 3 }, children: docsLoading ? /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", justifyContent: "center", py: 6 }, children: [
+          /* @__PURE__ */ jsx6(DialogContent, { sx: { pt: 3 }, children: docsLoading ? /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", justifyContent: "center", py: 6 }, children: [
             /* @__PURE__ */ jsx6(CircularProgress2, { size: 32, sx: { color: "hsl(var(--primary))" } }),
             /* @__PURE__ */ jsx6(Typography3, { sx: { ml: 2, color: "hsl(var(--muted-foreground))" }, children: "Loading documentation..." })
           ] }) : /* @__PURE__ */ jsx6(
@@ -3626,8 +3668,14 @@ var AppAuthConfig = ({
   onTestConnection,
   onSaveAuth,
   onSelectAuth,
-  onRefreshAuth
+  onRefreshAuth,
+  globalUrl,
+  userdata,
+  isLoaded,
+  isLoggedIn,
+  serverside
 }) => {
+  useSyncHostBaseUrl(globalUrl);
   const getApiAuthEntries = (app) => {
     const normalize = (n) => n.toLowerCase().replace(/[\s_\-]+/g, "_");
     return authenticatedApps.filter((auth) => normalize(auth.app?.name || "") === normalize(app.name)).map((auth) => ({
@@ -3688,7 +3736,7 @@ var AppAuthConfig = ({
   }
   const validatedCount = sortedApps.filter((app) => isAppValidated(app)).length;
   const totalCount = sortedApps.length;
-  return /* @__PURE__ */ jsxs3(Box3, { sx: { width: "100%", maxWidth: "100%", overflow: "hidden" }, children: [
+  return /* @__PURE__ */ jsxs4(Box3, { sx: { width: "100%", maxWidth: "100%", overflow: "hidden" }, children: [
     /* @__PURE__ */ jsx6(
       Typography3,
       {
@@ -3730,6 +3778,11 @@ var AppAuthConfig = ({
       return /* @__PURE__ */ jsx6(
         AppAuthCard,
         {
+          globalUrl,
+          userdata,
+          isLoaded,
+          isLoggedIn,
+          serverside,
           app,
           authState,
           isExpanded,
@@ -3748,7 +3801,7 @@ var AppAuthConfig = ({
 };
 
 // components/AppAuthSection.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function AppAuthSection({
   displayName,
   algoliaApp,
@@ -3764,7 +3817,7 @@ function AppAuthSection({
   onSaveAuth,
   onRefreshAuth
 }) {
-  return /* @__PURE__ */ jsx7(motion3.div, { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 0.1 }, children: /* @__PURE__ */ jsxs4(Box4, { sx: { mb: 3 }, children: [
+  return /* @__PURE__ */ jsx7(motion3.div, { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 0.1 }, children: /* @__PURE__ */ jsxs5(Box4, { sx: { mb: 3 }, children: [
     /* @__PURE__ */ jsx7(Typography4, { sx: { color: "hsl(var(--foreground))", fontWeight: 600, fontSize: "0.95rem", mb: 0.5 }, children: "Authentication" }),
     /* @__PURE__ */ jsx7(Typography4, { variant: "body2", sx: { color: "hsl(var(--muted-foreground))", mb: 1.5 }, children: isAuthenticated ? authCount > 0 ? `${authCount} configuration${authCount > 1 ? "s" : ""} found` : "No authentication configured yet" : `Connect your ${displayName} account` }),
     isAuthenticated && algoliaApp && resolvedAlgoliaId && /* @__PURE__ */ jsx7(
@@ -3827,7 +3880,7 @@ var AgentIcon_default = AgentIcon;
 import { motion as motion4, AnimatePresence } from "framer-motion";
 import ReactMarkdown2 from "react-markdown";
 import remarkGfm2 from "remark-gfm";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var CATEGORY_SUGGESTIONS = {
   "threat": [
     "Is 1.2.3.4 a known bad actor?",
@@ -4078,7 +4131,7 @@ ${JSON.stringify(data, null, 2)}
         backgroundColor: "hsl(var(--background))",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsxs5(AnimatePresence, { mode: "wait", children: [
+      children: /* @__PURE__ */ jsxs6(AnimatePresence, { mode: "wait", children: [
         runState === "idle" && /* @__PURE__ */ jsx9(
           motion4.div,
           {
@@ -4086,8 +4139,8 @@ ${JSON.stringify(data, null, 2)}
             animate: { opacity: 1 },
             exit: { opacity: 0 },
             transition: { duration: 0.15 },
-            children: /* @__PURE__ */ jsxs5(Box5, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2.5 }, children: [
-              /* @__PURE__ */ jsxs5(Box5, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            children: /* @__PURE__ */ jsxs6(Box5, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2.5 }, children: [
+              /* @__PURE__ */ jsxs6(Box5, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 /* @__PURE__ */ jsx9(
                   Box5,
                   {
@@ -4144,7 +4197,7 @@ ${JSON.stringify(data, null, 2)}
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs5(
+              /* @__PURE__ */ jsxs6(
                 Box5,
                 {
                   sx: {
@@ -4252,11 +4305,11 @@ ${JSON.stringify(data, null, 2)}
             animate: { opacity: 1 },
             exit: { opacity: 0 },
             transition: { duration: 0.15 },
-            children: /* @__PURE__ */ jsxs5(Box5, { sx: { p: 3, display: "flex", alignItems: "center", gap: 2 }, children: [
+            children: /* @__PURE__ */ jsxs6(Box5, { sx: { p: 3, display: "flex", alignItems: "center", gap: 2 }, children: [
               /* @__PURE__ */ jsx9(CircularProgress3, { size: 20, thickness: 5, sx: { color: "hsl(var(--primary))" } }),
-              /* @__PURE__ */ jsxs5(Box5, { sx: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs6(Box5, { sx: { flex: 1, minWidth: 0 }, children: [
                 /* @__PURE__ */ jsx9(Typography5, { sx: { fontSize: "0.78rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: "Executing\u2026" }),
-                /* @__PURE__ */ jsxs5(
+                /* @__PURE__ */ jsxs6(
                   Typography5,
                   {
                     sx: {
@@ -4285,9 +4338,9 @@ ${JSON.stringify(data, null, 2)}
             animate: { opacity: 1, y: 0 },
             exit: { opacity: 0 },
             transition: { duration: 0.2 },
-            children: /* @__PURE__ */ jsxs5(Box5, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 }, children: [
-              /* @__PURE__ */ jsxs5(Box5, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                /* @__PURE__ */ jsxs5(Box5, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            children: /* @__PURE__ */ jsxs6(Box5, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 }, children: [
+              /* @__PURE__ */ jsxs6(Box5, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsxs6(Box5, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                   isError ? /* @__PURE__ */ jsx9(ErrorOutlineIcon2, { size: 18, color: "hsl(0 70% 55%)" }) : /* @__PURE__ */ jsx9(CheckCircleOutlineIcon, { size: 18, color: "hsl(145 60% 45%)" }),
                   /* @__PURE__ */ jsx9(Typography5, { sx: { fontSize: "0.78rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: isError ? "Failed" : "Completed" })
                 ] }),
@@ -4315,7 +4368,7 @@ ${JSON.stringify(data, null, 2)}
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs5(
+              /* @__PURE__ */ jsxs6(
                 Typography5,
                 {
                   sx: {
@@ -4398,9 +4451,9 @@ ${JSON.stringify(data, null, 2)}
 var AppMcpChat_default = AppMcpChat;
 
 // views/TryMcpSection.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function TryMcpSection({ appName, appIcon, appId, categories }) {
-  return /* @__PURE__ */ jsx10(motion5.div, { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 0.15 }, children: /* @__PURE__ */ jsxs6(Box6, { sx: { mt: 5, mb: 3 }, children: [
+  return /* @__PURE__ */ jsx10(motion5.div, { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 0.15 }, children: /* @__PURE__ */ jsxs7(Box6, { sx: { mt: 5, mb: 3 }, children: [
     /* @__PURE__ */ jsx10(Typography6, { sx: { color: "hsl(var(--foreground))", fontWeight: 600, fontSize: "0.95rem", mb: 1.5 }, children: "Try MCP" }),
     /* @__PURE__ */ jsx10(
       AppMcpChat_default,
@@ -4415,7 +4468,7 @@ function TryMcpSection({ appName, appIcon, appId, categories }) {
 }
 
 // components/SingulActionsPreview.tsx
-import { useState as useState7, useEffect as useEffect5, useMemo as useMemo2, useCallback as useCallback5, useRef as useRef4 } from "react";
+import { useState as useState7, useEffect as useEffect6, useMemo as useMemo2, useCallback as useCallback5, useRef as useRef4 } from "react";
 import {
   Box as Box7,
   Typography as Typography7,
@@ -4438,7 +4491,7 @@ import {
 import JsonView from "react18-json-view";
 import "react18-json-view/src/style.css";
 import "react18-json-view/src/dark.css";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 import { createElement } from "react";
 var deepParseJsonStrings = (obj, depth = 0) => {
   if (depth > 5) return obj;
@@ -4718,7 +4771,7 @@ var SingulActionsPreview = ({
     (action, l) => l === "python" ? buildSingulPython(appName, action, curlOpts) : buildSingulCurl(appName, action, curlOpts),
     [appName, curlOpts]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     const initial = sortedActions[0] || null;
     setSelected(initial);
     setSnippet(buildSnippet(initial, lang));
@@ -4808,8 +4861,8 @@ var SingulActionsPreview = ({
     }
   };
   const lineCount = useMemo2(() => Math.max(snippet.split("\n").length, 1), [snippet]);
-  return /* @__PURE__ */ jsxs7(Box7, { sx: { mt: 5, mb: 3, opacity: isDisabled ? 0.55 : 1 }, children: [
-    /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5 }, children: [
+  return /* @__PURE__ */ jsxs8(Box7, { sx: { mt: 5, mb: 3, opacity: isDisabled ? 0.55 : 1 }, children: [
+    /* @__PURE__ */ jsxs8(Box7, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5 }, children: [
       /* @__PURE__ */ jsx11(Typography7, { sx: { color: "hsl(var(--foreground))", fontWeight: 600, fontSize: "0.95rem" }, children: "Try individual actions" }),
       /* @__PURE__ */ jsx11(
         Chip4,
@@ -4820,7 +4873,7 @@ var SingulActionsPreview = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs8(
       Box7,
       {
         sx: {
@@ -4845,7 +4898,7 @@ var SingulActionsPreview = ({
           }
         },
         children: [
-          isDisabled ? /* @__PURE__ */ jsx11(Typography7, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))", fontStyle: "italic", textAlign: "center", py: 1 }, children: "No category detected for this app" }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
+          isDisabled ? /* @__PURE__ */ jsx11(Typography7, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))", fontStyle: "italic", textAlign: "center", py: 1 }, children: "No category detected for this app" }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
             /* @__PURE__ */ jsx11(Box7, { sx: { display: "flex", gap: 1, mb: 1.5, alignItems: "center" }, children: /* @__PURE__ */ jsx11(
               Autocomplete,
               {
@@ -4857,7 +4910,7 @@ var SingulActionsPreview = ({
                 groupBy: (o) => o.category,
                 getOptionLabel: (o) => o?.label ?? "",
                 isOptionEqualToValue: (a, b) => a?.name === b?.name && a?.category === b?.category,
-                renderOption: (props, option) => /* @__PURE__ */ createElement("li", { ...props, key: `${option.category}-${option.name}` }, /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", flexDirection: "column" }, children: [
+                renderOption: (props, option) => /* @__PURE__ */ createElement("li", { ...props, key: `${option.category}-${option.name}` }, /* @__PURE__ */ jsxs8(Box7, { sx: { display: "flex", flexDirection: "column" }, children: [
                   /* @__PURE__ */ jsx11(Typography7, { sx: { fontSize: "0.78rem", color: "hsl(var(--foreground))" }, children: option.label }),
                   /* @__PURE__ */ jsx11(Typography7, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: "0.65rem", color: "hsl(var(--muted-foreground))" }, children: option.name })
                 ] })),
@@ -4894,7 +4947,7 @@ var SingulActionsPreview = ({
                 renderInput: (params) => /* @__PURE__ */ jsx11(TextField2, { ...params, placeholder: "Select action" })
               }
             ) }),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Box7,
               {
                 sx: {
@@ -4906,7 +4959,7 @@ var SingulActionsPreview = ({
                   boxShadow: "0 8px 24px -12px hsl(var(--primary) / 0.25)"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs7(
+                  /* @__PURE__ */ jsxs8(
                     Box7,
                     {
                       sx: {
@@ -5004,7 +5057,7 @@ var SingulActionsPreview = ({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", minHeight: 270 }, children: [
+                  /* @__PURE__ */ jsxs8(Box7, { sx: { display: "flex", minHeight: 270 }, children: [
                     /* @__PURE__ */ jsx11(
                       Box7,
                       {
@@ -5026,7 +5079,7 @@ var SingulActionsPreview = ({
                         children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx11("div", { children: i + 1 }, i))
                       }
                     ),
-                    /* @__PURE__ */ jsxs7(Box7, { sx: { flex: 1, position: "relative", minHeight: 270 }, children: [
+                    /* @__PURE__ */ jsxs8(Box7, { sx: { flex: 1, position: "relative", minHeight: 270 }, children: [
                       /* @__PURE__ */ jsx11(
                         Box7,
                         {
@@ -5107,8 +5160,8 @@ var SingulActionsPreview = ({
                 target.scrollIntoView({ behavior: "smooth", block: "start" });
               }
             };
-            return /* @__PURE__ */ jsxs7(Box7, { ref: responseRef, sx: { mt: 1.5 }, children: [
-              needsAuth && /* @__PURE__ */ jsxs7(
+            return /* @__PURE__ */ jsxs8(Box7, { ref: responseRef, sx: { mt: 1.5 }, children: [
+              needsAuth && /* @__PURE__ */ jsxs8(
                 Box7,
                 {
                   sx: {
@@ -5123,14 +5176,14 @@ var SingulActionsPreview = ({
                   },
                   children: [
                     /* @__PURE__ */ jsx11(LockIcon2, { size: 22, color: "hsl(var(--severity-medium))" }),
-                    /* @__PURE__ */ jsxs7(Box7, { sx: { flex: 1, minWidth: 0 }, children: [
-                      /* @__PURE__ */ jsxs7(Typography7, { sx: { fontSize: "0.85rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: [
+                    /* @__PURE__ */ jsxs8(Box7, { sx: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsxs8(Typography7, { sx: { fontSize: "0.85rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: [
                         pretty,
                         " requires authentication"
                       ] }),
                       /* @__PURE__ */ jsx11(Typography7, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))" }, children: typeof parsedResult?.reason === "string" && parsedResult.reason ? parsedResult.reason : `Connect your ${pretty} account so this action can run, then try again.` })
                     ] }),
-                    /* @__PURE__ */ jsxs7(
+                    /* @__PURE__ */ jsxs8(
                       Button3,
                       {
                         variant: "outlined",
@@ -5165,7 +5218,7 @@ var SingulActionsPreview = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", gap: 0.75, mb: 0.5 }, children: [
+              /* @__PURE__ */ jsxs8(Box7, { sx: { display: "flex", alignItems: "center", gap: 0.75, mb: 0.5 }, children: [
                 /* @__PURE__ */ jsx11(Box7, { sx: { width: 6, height: 6, borderRadius: "50%", backgroundColor: needsAuth ? "hsl(var(--severity-medium))" : "hsl(140 60% 55%)" } }),
                 /* @__PURE__ */ jsx11(Typography7, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: "0.65rem", color: "hsl(var(--muted-foreground))", letterSpacing: 0.4 }, children: "response" })
               ] }),
@@ -5231,7 +5284,7 @@ var SingulActionsPreview = ({
 var SingulActionsPreview_default = SingulActionsPreview;
 
 // views/AppDetailDrawer.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function AppDetailDrawer({
   open,
   onClose,
@@ -5262,7 +5315,7 @@ function AppDetailDrawer({
     handleSaveAuth,
     refreshAuth
   } = useAppAuth();
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open || !appName) return;
     setAppLoading(true);
     setAppInfo(null);
@@ -5354,7 +5407,7 @@ function AppDetailDrawer({
       setAppLoading(false);
     })();
   }, [open, appName, appId]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open || !appName || !isAuthenticated) {
       setIncidentStats(null);
       return;
@@ -5423,12 +5476,12 @@ function AppDetailDrawer({
   const effectiveActivated = isActivated === null ? hasAnyAuth ? true : null : isActivated || hasAnyAuth;
   const authCount = matchingEntries.length;
   const displayName = (appInfo?.name || appName || "").replace(/_/g, " ");
-  useEffect6(() => {
+  useEffect7(() => {
     if (lastValidAuthRef.current === hasValidAuth) return;
     lastValidAuthRef.current = hasValidAuth;
     setAuthExpanded(!hasValidAuth);
   }, [hasValidAuth]);
-  useEffect6(() => {
+  useEffect7(() => {
     lastValidAuthRef.current = null;
   }, [appName]);
   const handleActivateToggle = async () => {
@@ -5469,7 +5522,7 @@ function AppDetailDrawer({
     }
   };
   const isLoadingAll = appLoading || isAuthenticated && appAuthLoading;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     Drawer,
     {
       anchor,
@@ -5485,7 +5538,7 @@ function AppDetailDrawer({
         }
       },
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           Box8,
           {
             sx: {
@@ -5498,7 +5551,7 @@ function AppDetailDrawer({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ jsxs8(Box8, { sx: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxs9(Box8, { sx: { flex: 1 }, children: [
                 /* @__PURE__ */ jsx12(Typography8, { sx: { color: "hsl(var(--foreground))", fontWeight: 700, fontSize: "1rem", lineHeight: 1.2, textTransform: "capitalize" }, children: isLoadingAll ? /* @__PURE__ */ jsx12(Skeleton, { width: 140 }) : displayName }),
                 /* @__PURE__ */ jsx12(Typography8, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.75rem" }, children: "App configuration" })
               ] }),
@@ -5514,16 +5567,16 @@ function AppDetailDrawer({
             ]
           }
         ),
-        /* @__PURE__ */ jsx12(Box8, { sx: { flex: 1, overflowY: "auto", p: 3 }, children: isLoadingAll ? /* @__PURE__ */ jsxs8(Box8, { children: [
-          /* @__PURE__ */ jsxs8(Box8, { sx: { display: "flex", gap: 2, mb: 3 }, children: [
+        /* @__PURE__ */ jsx12(Box8, { sx: { flex: 1, overflowY: "auto", p: 3 }, children: isLoadingAll ? /* @__PURE__ */ jsxs9(Box8, { children: [
+          /* @__PURE__ */ jsxs9(Box8, { sx: { display: "flex", gap: 2, mb: 3 }, children: [
             /* @__PURE__ */ jsx12(Skeleton, { variant: "circular", width: 56, height: 56 }),
-            /* @__PURE__ */ jsxs8(Box8, { sx: { flex: 1 }, children: [
+            /* @__PURE__ */ jsxs9(Box8, { sx: { flex: 1 }, children: [
               /* @__PURE__ */ jsx12(Skeleton, { width: 180, height: 28 }),
               /* @__PURE__ */ jsx12(Skeleton, { width: 260, height: 18, sx: { mt: 0.5 } })
             ] })
           ] }),
           /* @__PURE__ */ jsx12(Skeleton, { variant: "rectangular", height: 160, sx: { borderRadius: 2 } })
-        ] }) : /* @__PURE__ */ jsxs8(Fragment4, { children: [
+        ] }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
           /* @__PURE__ */ jsx12(
             AppTitleHeader,
             {
@@ -5542,7 +5595,7 @@ function AppDetailDrawer({
               } : void 0
             }
           ),
-          isAuthenticated && incidentStats && incidentStats.ingested > 0 && /* @__PURE__ */ jsx12(motion6.div, { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 0.08 }, children: /* @__PURE__ */ jsxs8(Box8, { sx: {
+          isAuthenticated && incidentStats && incidentStats.ingested > 0 && /* @__PURE__ */ jsx12(motion6.div, { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 0.08 }, children: /* @__PURE__ */ jsxs9(Box8, { sx: {
             display: "flex",
             gap: 2,
             mb: 3,
@@ -5551,16 +5604,16 @@ function AppDetailDrawer({
             border: "1px solid hsl(var(--border))",
             bgcolor: "hsl(var(--muted) / 0.3)"
           }, children: [
-            /* @__PURE__ */ jsxs8(Box8, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsxs9(Box8, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
               /* @__PURE__ */ jsx12(Download, { size: 14, style: { color: "hsl(var(--primary))" } }),
-              /* @__PURE__ */ jsxs8(Box8, { children: [
+              /* @__PURE__ */ jsxs9(Box8, { children: [
                 /* @__PURE__ */ jsx12(Typography8, { sx: { fontSize: "1.1rem", fontWeight: 700, color: "hsl(var(--foreground))", lineHeight: 1 }, children: incidentStats.ingested }),
                 /* @__PURE__ */ jsx12(Typography8, { sx: { fontSize: "0.65rem", color: "hsl(var(--muted-foreground))", fontWeight: 500 }, children: "Incidents ingested" })
               ] })
             ] }),
-            incidentStats.forwarded > 0 && /* @__PURE__ */ jsxs8(Box8, { sx: { display: "flex", alignItems: "center", gap: 1, ml: 2, pl: 2, borderLeft: "1px solid hsl(var(--border))" }, children: [
+            incidentStats.forwarded > 0 && /* @__PURE__ */ jsxs9(Box8, { sx: { display: "flex", alignItems: "center", gap: 1, ml: 2, pl: 2, borderLeft: "1px solid hsl(var(--border))" }, children: [
               /* @__PURE__ */ jsx12(Forward, { size: 14, style: { color: "hsl(var(--severity-low))" } }),
-              /* @__PURE__ */ jsxs8(Box8, { children: [
+              /* @__PURE__ */ jsxs9(Box8, { children: [
                 /* @__PURE__ */ jsx12(Typography8, { sx: { fontSize: "1.1rem", fontWeight: 700, color: "hsl(var(--foreground))", lineHeight: 1 }, children: incidentStats.forwarded }),
                 /* @__PURE__ */ jsx12(Typography8, { sx: { fontSize: "0.65rem", color: "hsl(var(--muted-foreground))", fontWeight: 500 }, children: "Forwarded" })
               ] })
@@ -5584,7 +5637,7 @@ function AppDetailDrawer({
               onRefreshAuth: refreshAuth
             }
           ) }),
-          isAuthenticated && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+          isAuthenticated && /* @__PURE__ */ jsxs9(Fragment4, { children: [
             /* @__PURE__ */ jsx12(
               TryMcpSection,
               {
@@ -5608,7 +5661,7 @@ import "./shuffle-mcp-ER33P3W2.css";
 // components/SegmentedControl.tsx
 import * as React2 from "react";
 import { motion as motion7, LayoutGroup } from "framer-motion";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var SIZE = {
   sm: {
     containerPadding: "2px",
@@ -5695,7 +5748,7 @@ function SegmentedControl({
         const isAction = opt.type === "action";
         const active = !isAction && opt.value === value;
         const key = isAction ? opt.key : opt.value;
-        return /* @__PURE__ */ jsxs9(
+        return /* @__PURE__ */ jsxs10(
           "button",
           {
             type: "button",
@@ -5802,17 +5855,8 @@ function SegmentedControl({
   ) });
 }
 
-// useSyncHostBaseUrl.ts
-import { useEffect as useEffect7 } from "react";
-var useSyncHostBaseUrl = (globalUrl) => {
-  useEffect7(() => {
-    if (!globalUrl) return;
-    setHostBaseUrl(globalUrl);
-  }, [globalUrl]);
-};
-
 // views/ShuffleMCP.tsx
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_ALGOLIA_APP_ID = "JNSS5CFDZZ";
 var DEFAULT_ALGOLIA_API_KEY = "33e4e3564f4f060e96e0531957bed552";
 var DEFAULT_ALGOLIA_INDEX = "appsearch";
@@ -5828,6 +5872,7 @@ var ShuffleMCP = React3.forwardRef(({
   showCheckbox = false,
   multiSelect = false,
   selectedApps = EMPTY_SELECTED_APPS,
+  disableAutoSelectValidatedApps = false,
   preventDefault = false,
   inline = false,
   initialQuery = "",
@@ -5938,6 +5983,7 @@ var ShuffleMCP = React3.forwardRef(({
     fetchPrivateApps();
   }, [apiKey, apiBaseUrl, privateAppsPath, disablePrivateApps, orgId]);
   useEffect8(() => {
+    if (disableAutoSelectValidatedApps) return;
     if (authenticatedApps.length > 0 && results.length > 0) {
       const validatedApps = authenticatedApps.filter((auth) => auth.validation?.valid);
       const appsToAutoSelect = results.filter(
@@ -5956,7 +6002,7 @@ var ShuffleMCP = React3.forwardRef(({
         }
       }
     }
-  }, [authenticatedApps, results]);
+  }, [authenticatedApps, results, disableAutoSelectValidatedApps]);
   useEffect8(() => {
     if (externalAuthenticatedApps) {
       setAuthenticatedApps(externalAuthenticatedApps);
@@ -6173,8 +6219,8 @@ var ShuffleMCP = React3.forwardRef(({
           ...selected ? customStyles.selectedItem : {}
         },
         onClick: () => selectApp(app),
-        children: /* @__PURE__ */ jsxs10("div", { className: "singul-app-info", style: customStyles.appInfo, children: [
-          /* @__PURE__ */ jsxs10("div", { style: { position: "relative", flexShrink: 0 }, children: [
+        children: /* @__PURE__ */ jsxs11("div", { className: "singul-app-info", style: customStyles.appInfo, children: [
+          /* @__PURE__ */ jsxs11("div", { style: { position: "relative", flexShrink: 0 }, children: [
             /* @__PURE__ */ jsx14(
               AppFallbackIcon,
               {
@@ -6192,8 +6238,8 @@ var ShuffleMCP = React3.forwardRef(({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs10("div", { className: "singul-app-details", style: customStyles.appDetails, children: [
-            /* @__PURE__ */ jsxs10(
+          /* @__PURE__ */ jsxs11("div", { className: "singul-app-details", style: customStyles.appDetails, children: [
+            /* @__PURE__ */ jsxs11(
               "span",
               {
                 className: "singul-app-name",
@@ -6234,15 +6280,15 @@ var ShuffleMCP = React3.forwardRef(({
       app.objectID
     );
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
       className: `singul-container ${inline ? "singul-inline" : ""} ${className}`,
       style: customStyles.container,
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: "singul-search-bar-container", children: [
-          /* @__PURE__ */ jsxs10("div", { className: "singul-search-input-wrapper", style: customStyles.inputWrapper, children: [
+        /* @__PURE__ */ jsxs11("div", { className: "singul-search-bar-container", children: [
+          /* @__PURE__ */ jsxs11("div", { className: "singul-search-input-wrapper", style: customStyles.inputWrapper, children: [
             /* @__PURE__ */ jsx14(
               "input",
               {
@@ -6262,7 +6308,7 @@ var ShuffleMCP = React3.forwardRef(({
                 autoComplete: "off"
               }
             ),
-            /* @__PURE__ */ jsx14("div", { className: "singul-search-icon", style: customStyles.searchIcon, children: /* @__PURE__ */ jsxs10("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsx14("div", { className: "singul-search-icon", style: customStyles.searchIcon, children: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
               /* @__PURE__ */ jsx14("circle", { cx: "11", cy: "11", r: "8" }),
               /* @__PURE__ */ jsx14("path", { d: "m21 21-4.35-4.35" })
             ] }) }),
@@ -6291,7 +6337,7 @@ var ShuffleMCP = React3.forwardRef(({
                 ...getGridColumnsStyle,
                 ...layout === "grid" ? { display: "grid" } : {}
               },
-              children: displayResults.length > 0 ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+              children: displayResults.length > 0 ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
                 displayResults.map((app, index) => renderAppItem(app, index)),
                 /* @__PURE__ */ jsx14("div", { className: "singul-end-of-results", style: {
                   padding: "10px 16px",
@@ -6300,14 +6346,14 @@ var ShuffleMCP = React3.forwardRef(({
                   fontSize: "11px",
                   gridColumn: "1 / -1"
                 }, children: "Can't find what you're looking for? Try a different search term." })
-              ] }) : query.trim() ? /* @__PURE__ */ jsx14("div", { className: "singul-empty-state", style: customStyles.emptyState, children: searchError ? /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "center", color: searchError.rateLimited ? "hsl(var(--severity-medium))" : "hsl(var(--destructive))" }, children: [
+              ] }) : query.trim() ? /* @__PURE__ */ jsx14("div", { className: "singul-empty-state", style: customStyles.emptyState, children: searchError ? /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "center", color: searchError.rateLimited ? "hsl(var(--severity-medium))" : "hsl(var(--destructive))" }, children: [
                 /* @__PURE__ */ jsx14("strong", { style: { fontSize: 13 }, children: searchError.rateLimited ? "Algolia rate limit reached (429)" : "Search unavailable" }),
                 /* @__PURE__ */ jsx14("span", { style: { fontSize: 12, color: "hsl(var(--muted-foreground))" }, children: searchError.message })
-              ] }) : renderEmptyState ? renderEmptyState() : /* @__PURE__ */ jsxs10(Fragment5, { children: [
+              ] }) : renderEmptyState ? renderEmptyState() : /* @__PURE__ */ jsxs11(Fragment5, { children: [
                 'No integrations match "',
                 query,
                 '". Try searching for a different app or category.'
-              ] }) }) : /* @__PURE__ */ jsx14("div", { className: "singul-empty-state", style: customStyles.emptyState, children: searchError ? /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "center", color: searchError.rateLimited ? "hsl(var(--severity-medium))" : "hsl(var(--destructive))" }, children: [
+              ] }) }) : /* @__PURE__ */ jsx14("div", { className: "singul-empty-state", style: customStyles.emptyState, children: searchError ? /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "center", color: searchError.rateLimited ? "hsl(var(--severity-medium))" : "hsl(var(--destructive))" }, children: [
                 /* @__PURE__ */ jsx14("strong", { style: { fontSize: 13 }, children: searchError.rateLimited ? "Algolia rate limit reached (429)" : "Search unavailable" }),
                 /* @__PURE__ */ jsx14("span", { style: { fontSize: 12, color: "hsl(var(--muted-foreground))" }, children: searchError.message })
               ] }) : /* @__PURE__ */ jsx14(Fragment5, { children: "Start typing to search integrations..." }) })
@@ -6322,10 +6368,10 @@ var ShuffleMCP = React3.forwardRef(({
                 ...getGridColumnsStyle,
                 ...layout === "grid" ? { display: "grid" } : {}
               },
-              children: displayResults.length > 0 ? displayResults.map((app, index) => renderAppItem(app, index)) : /* @__PURE__ */ jsx14("div", { className: "singul-empty-state", style: customStyles.emptyState, children: searchError ? /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "center", color: searchError.rateLimited ? "hsl(var(--severity-medium))" : "hsl(var(--destructive))" }, children: [
+              children: displayResults.length > 0 ? displayResults.map((app, index) => renderAppItem(app, index)) : /* @__PURE__ */ jsx14("div", { className: "singul-empty-state", style: customStyles.emptyState, children: searchError ? /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "center", color: searchError.rateLimited ? "hsl(var(--severity-medium))" : "hsl(var(--destructive))" }, children: [
                 /* @__PURE__ */ jsx14("strong", { style: { fontSize: 13 }, children: searchError.rateLimited ? "Algolia rate limit reached (429)" : "Search unavailable" }),
                 /* @__PURE__ */ jsx14("span", { style: { fontSize: 12, color: "hsl(var(--muted-foreground))" }, children: searchError.message })
-              ] }) : renderEmptyState ? renderEmptyState() : /* @__PURE__ */ jsxs10(Fragment5, { children: [
+              ] }) : renderEmptyState ? renderEmptyState() : /* @__PURE__ */ jsxs11(Fragment5, { children: [
                 'No apps found for "',
                 query,
                 '"'
@@ -6357,7 +6403,7 @@ import {
 } from "lucide-react";
 import { Box as Box9, Typography as Typography9, IconButton as IconButton5, Drawer as Drawer2, Avatar as Avatar6, Tooltip as Tooltip5 } from "@mui/material";
 import { motion as motion8, AnimatePresence as AnimatePresence2 } from "framer-motion";
-import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var singulStyles = {
   container: { width: "100%" },
   inputWrapper: {
@@ -6455,8 +6501,12 @@ function AppSearchDrawer({
   highlightDelayMs = 5e3,
   multiSelect = false,
   selectedApps,
-  onSelectionChange
+  onSelectionChange,
+  globalUrl,
+  theme,
+  colorMode
 }) {
+  const themeScope = useShuffleMcpTheme();
   const [detailAppName, setDetailAppName] = useState10(null);
   const [detailAppId, setDetailAppId] = useState10(null);
   const [highlightActive, setHighlightActive] = useState10(false);
@@ -6535,13 +6585,14 @@ function AppSearchDrawer({
     setDetailAppName(detail.app.name);
     setDetailAppId(algoliaId);
   };
-  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
+    /* @__PURE__ */ jsxs12(
       Drawer2,
       {
         anchor,
         open: open && detailAppName === null,
         onClose: handleClose,
+        slotProps: { paper: { className: themeScope?.scopeClassName } },
         sx: {
           zIndex: 9999,
           "& .MuiDrawer-paper": {
@@ -6557,7 +6608,7 @@ function AppSearchDrawer({
           }
         },
         children: [
-          /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsxs12(
             Box9,
             {
               sx: {
@@ -6570,7 +6621,7 @@ function AppSearchDrawer({
                 flexShrink: 0
               },
               children: [
-                /* @__PURE__ */ jsxs11(Box9, { sx: { flex: 1 }, children: [
+                /* @__PURE__ */ jsxs12(Box9, { sx: { flex: 1 }, children: [
                   /* @__PURE__ */ jsx15(Typography9, { sx: { color: "hsl(var(--foreground))", fontWeight: 700, fontSize: "1rem", lineHeight: 1.2 }, children: title }),
                   /* @__PURE__ */ jsx15(Typography9, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.75rem" }, children: subtitle })
                 ] }),
@@ -6586,10 +6637,10 @@ function AppSearchDrawer({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs11(Box9, { sx: { flex: 1, boxSizing: "border-box", overflow: "hidden", p: 3, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
-            connectionPathApps && connectionPathApps.length > 0 && /* @__PURE__ */ jsxs11(Box9, { sx: { mb: 2.5 }, children: [
+          /* @__PURE__ */ jsxs12(Box9, { sx: { flex: 1, boxSizing: "border-box", overflow: "hidden", p: 3, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
+            connectionPathApps && connectionPathApps.length > 0 && /* @__PURE__ */ jsxs12(Box9, { sx: { mb: 2.5 }, children: [
               /* @__PURE__ */ jsx15(Typography9, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", mb: 1 }, children: "In this usecase" }),
-              /* @__PURE__ */ jsx15(Box9, { sx: { display: "flex", gap: 1.5, flexWrap: "wrap" }, children: connectionPathApps.map((app) => /* @__PURE__ */ jsx15(Tooltip5, { title: app.name.replace(/_/g, " "), arrow: true, placement: "bottom", children: /* @__PURE__ */ jsxs11(
+              /* @__PURE__ */ jsx15(Box9, { sx: { display: "flex", gap: 1.5, flexWrap: "wrap" }, children: connectionPathApps.map((app) => /* @__PURE__ */ jsx15(Tooltip5, { title: app.name.replace(/_/g, " "), arrow: true, placement: "bottom", children: /* @__PURE__ */ jsxs12(
                 Box9,
                 {
                   onClick: () => handleAppSelected({ app: { name: app.name, image_url: app.icon, categories: [] } }),
@@ -6695,7 +6746,10 @@ function AppSearchDrawer({
                       ShuffleMCP2,
                       {
                         apiKey: API_CONFIG.apiKey || void 0,
-                        apiBaseUrl: API_CONFIG.baseUrl,
+                        apiBaseUrl: globalUrl || API_CONFIG.baseUrl,
+                        globalUrl,
+                        theme,
+                        colorMode,
                         placeholder: initialQuery ? `Search ${initialQuery} integrations...` : "Search integrations...",
                         layout: "grid",
                         gridColumns: 2,
@@ -6707,8 +6761,17 @@ function AppSearchDrawer({
                         showCheckbox: multiSelect,
                         multiSelect,
                         selectedApps: multiSelect ? projectedSelectedApps : void 0,
+                        disableAutoSelectValidatedApps: multiSelect,
                         preventDefault: true,
                         onAppSelected: handleAppSelected,
+                        onSelectionChange: multiSelect ? (next) => {
+                          onSelectionChange?.(next.map((app) => ({
+                            name: app.name,
+                            id: app.objectID || null,
+                            icon: app.image_url || "",
+                            categories: app.categories || []
+                          })));
+                        } : void 0,
                         pinnedApps: pinnedApps?.map((p) => ({
                           name: p.name,
                           image_url: p.image_url,
@@ -6754,6 +6817,9 @@ function AppSearchDrawer({
         appId: detailAppId,
         anchor,
         width,
+        globalUrl,
+        theme,
+        colorMode,
         onRefresh: onClose,
         onAddToCanvas
       }
@@ -6764,7 +6830,7 @@ function AppSearchDrawer({
 // components/AiAgentPromptsEditor.tsx
 import { Box as Box10, Typography as Typography10, IconButton as IconButton6, Tooltip as Tooltip6, Button as Button5, TextField as TextField4 } from "@mui/material";
 import { X as CloseIcon4, Plus as AddIcon2 } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var AiAgentPromptsEditor = ({
   prompts,
   apps,
@@ -6777,10 +6843,10 @@ var AiAgentPromptsEditor = ({
   resolveAppMeta,
   renderPromptInput
 }) => {
-  return /* @__PURE__ */ jsxs12(Box10, { sx: { display: "flex", flexDirection: "column", gap: 1.25 }, children: [
+  return /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", flexDirection: "column", gap: 1.25 }, children: [
     prompts.map((prompt, idx) => {
       const promptApps = apps[idx] || [];
-      return /* @__PURE__ */ jsxs12(
+      return /* @__PURE__ */ jsxs13(
         Box10,
         {
           sx: {
@@ -6793,9 +6859,9 @@ var AiAgentPromptsEditor = ({
             bgcolor: "hsl(var(--muted) / 0.2)"
           },
           children: [
-            /* @__PURE__ */ jsxs12(Box10, { sx: { display: "flex", gap: 1, alignItems: "flex-start" }, children: [
-              /* @__PURE__ */ jsxs12(Box10, { sx: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsxs12(
+            /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", gap: 1, alignItems: "flex-start" }, children: [
+              /* @__PURE__ */ jsxs13(Box10, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxs13(
                   Typography10,
                   {
                     sx: {
@@ -6854,7 +6920,7 @@ var AiAgentPromptsEditor = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs12(Box10, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
               /* @__PURE__ */ jsx16(
                 Typography10,
                 {
@@ -6868,7 +6934,7 @@ var AiAgentPromptsEditor = ({
                   children: "Allowed apps"
                 }
               ),
-              /* @__PURE__ */ jsxs12(Box10, { sx: { display: "flex", alignItems: "center", gap: 0.5, flexWrap: "wrap", flex: 1 }, children: [
+              /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", alignItems: "center", gap: 0.5, flexWrap: "wrap", flex: 1 }, children: [
                 promptApps.length === 0 && /* @__PURE__ */ jsx16(Typography10, { sx: { fontSize: "0.7rem", color: "hsl(var(--muted-foreground))", opacity: 0.7 }, children: "All authenticated apps" }),
                 promptApps.map((appKey) => {
                   const meta = resolveAppMeta(appKey);
@@ -6961,9 +7027,9 @@ import { Box as Box11, Typography as Typography11, Chip as Chip6 } from "@mui/ma
 var shuffle_icon_default = "data:image/png;base64,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";
 
 // components/ShufflePipelinesBanner.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function ShufflePipelinesBanner() {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     Box11,
     {
       component: "a",
@@ -6995,7 +7061,7 @@ function ShufflePipelinesBanner() {
             sx: { width: 36, height: 36, borderRadius: "10px", flexShrink: 0 }
           }
         ),
-        /* @__PURE__ */ jsxs13(Box11, { sx: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxs14(Box11, { sx: { flex: 1, minWidth: 0 }, children: [
           /* @__PURE__ */ jsx17(Typography11, { sx: { fontWeight: 700, fontSize: "0.85rem", color: "hsl(var(--foreground))", lineHeight: 1.3 }, children: "Shuffle Pipelines" }),
           /* @__PURE__ */ jsx17(Typography11, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", lineHeight: 1.4 }, children: "Do not have a SIEM? Shuffle can ingest, parse, and correlate your logs and events directly \u2014 no external SIEM required." })
         ] }),
@@ -7626,7 +7692,7 @@ import { AlertTriangle, ArrowUpRight, HelpCircle, X } from "lucide-react";
 // components/AgentDiagnosisCtas.tsx
 import { Box as Box12, Button as Button6, Tooltip as Tooltip7 } from "@mui/material";
 import { ExternalLink, Settings2 } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var openLocalLlmTab = (e) => {
   e.stopPropagation();
   window.dispatchEvent(
@@ -7648,7 +7714,7 @@ var AgentDiagnosisCtas = ({ diagnosis, compact = false, tone = "medium" }) => {
   const fontSize = compact ? "0.7rem" : "0.78rem";
   const iconSize = compact ? 12 : 14;
   const px = compact ? 1 : 1.5;
-  return /* @__PURE__ */ jsxs14(Box12, { sx: { display: "flex", flexWrap: "wrap", gap: compact ? 0.5 : 1 }, children: [
+  return /* @__PURE__ */ jsxs15(Box12, { sx: { display: "flex", flexWrap: "wrap", gap: compact ? 0.5 : 1 }, children: [
     /* @__PURE__ */ jsx18(Tooltip7, { title: "Configure your own LLM vendor (OpenAI-compatible endpoint)", placement: "top", arrow: true, children: /* @__PURE__ */ jsx18(
       Button6,
       {
@@ -8057,7 +8123,7 @@ var diagnoseOutputWarning = (run) => {
 };
 
 // components/AgentRunDiagnosisBanner.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var DISMISS_PREFIX = "agent-diagnosis-dismissed::";
 var readDismissed = (key) => {
   if (!key || typeof window === "undefined") return false;
@@ -8107,7 +8173,7 @@ var AgentRunDiagnosisBanner = ({ run, sx, onJumpToEvidence, executionId }) => {
     if (canJump) onJumpToEvidence(jumpDecisionIndex);
   };
   const showTokenCtas = diagnosis?.kind === "token_limit";
-  return /* @__PURE__ */ jsx19(Box13, { sx: { px: 2.5, pb: 0.5, ...sx || {} }, children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx19(Box13, { sx: { px: 2.5, pb: 0.5, ...sx || {} }, children: /* @__PURE__ */ jsxs16(
     Box13,
     {
       sx: {
@@ -8121,7 +8187,7 @@ var AgentRunDiagnosisBanner = ({ run, sx, onJumpToEvidence, executionId }) => {
         border: `1px solid hsla(var(--severity-${tone}) / 0.18)`
       },
       children: [
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           Box13,
           {
             ...canJump ? {
@@ -8213,7 +8279,7 @@ var AgentRunDiagnosisBanner = ({ run, sx, onJumpToEvidence, executionId }) => {
 var AgentRunDiagnosisBanner_default = AgentRunDiagnosisBanner;
 
 // components/AgentUI.tsx
-import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var normalizeMarkdown = (raw) => {
   if (raw == null) return "";
   let s = typeof raw === "string" ? raw : (() => {
@@ -8422,7 +8488,7 @@ var TimelineRow = ({
   );
   const effectiveStatus = runFinished && (item.status === "RUNNING" || item.status === "WAITING") ? "IGNORED" : item.status;
   const barColor = isProcessing ? "hsl(var(--muted-foreground) / 0.45)" : effectiveStatus === "IGNORED" ? STATUS_COLORS.warning : effectiveStatus === "FINISHED" ? STATUS_COLORS.finished : effectiveStatus === "FAILURE" || effectiveStatus === "ABORTED" ? STATUS_COLORS.error : STATUS_COLORS.running;
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     Box14,
     {
       "data-timeline-index": index,
@@ -8435,7 +8501,7 @@ var TimelineRow = ({
         boxShadow: highlight ? "inset 0 0 0 2px hsla(var(--severity-medium) / 0.55)" : "none"
       },
       children: [
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs17(
           Box14,
           {
             onClick: isProcessing ? void 0 : onToggle,
@@ -8492,7 +8558,7 @@ var TimelineRow = ({
                 transition: "all 0.2s ease"
               } }) }) }),
               /* @__PURE__ */ jsx20(Box14, { sx: { width: 60, fontSize: "0.7rem", color: "hsl(var(--muted-foreground))", textAlign: "right" }, children: dur > 0 ? `${dur.toFixed(2)}s` : "" }),
-              /* @__PURE__ */ jsxs16(
+              /* @__PURE__ */ jsxs17(
                 Box14,
                 {
                   sx: { display: "flex", alignItems: "center", gap: 0.25, ml: 1, minWidth: 96, justifyContent: "flex-end" },
@@ -8500,7 +8566,7 @@ var TimelineRow = ({
                     if (e.target.closest("button, a")) e.stopPropagation();
                   },
                   children: [
-                    item.type === "decision" && details?.run_details?.status === "WAITING" && (item.category === "ask" || details?.action === "ask") && questions.length === 0 && /* @__PURE__ */ jsxs16(Fragment7, { children: [
+                    item.type === "decision" && details?.run_details?.status === "WAITING" && (item.category === "ask" || details?.action === "ask") && questions.length === 0 && /* @__PURE__ */ jsxs17(Fragment7, { children: [
                       /* @__PURE__ */ jsx20(Tooltip9, { title: "Approve this step", children: /* @__PURE__ */ jsx20("span", { children: /* @__PURE__ */ jsx20(
                         IconButton8,
                         {
@@ -8569,11 +8635,11 @@ var TimelineRow = ({
               onSubmitQuestions(details.run_details.id, questionAnswers);
             }
           };
-          return /* @__PURE__ */ jsxs16(Fragment7, { children: [
+          return /* @__PURE__ */ jsxs17(Fragment7, { children: [
             questions.map((q, qi) => {
               const value = questionAnswers[q.question]?.value || "";
               const isMissing = submitAttempted && !value;
-              return /* @__PURE__ */ jsxs16(Box14, { sx: { mt: 2 }, children: [
+              return /* @__PURE__ */ jsxs17(Box14, { sx: { mt: 2 }, children: [
                 /* @__PURE__ */ jsx20(Box14, { sx: { fontSize: "0.85rem", color: "hsl(var(--foreground))", mb: 1 }, children: /* @__PURE__ */ jsx20(Markdown, { remarkPlugins: [remarkGfm4, remarkBreaks], children: normalizeMarkdown(q.question) }) }),
                 /* @__PURE__ */ jsx20(
                   TextField5,
@@ -8606,7 +8672,7 @@ var TimelineRow = ({
                 )
               ] }, qi);
             }),
-            /* @__PURE__ */ jsxs16(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 2 }, children: [
+            /* @__PURE__ */ jsxs17(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 2 }, children: [
               /* @__PURE__ */ jsx20(Tooltip9, { title: !questionsAnswered ? "Please answer all questions first" : "", placement: "top", arrow: true, children: /* @__PURE__ */ jsx20("span", { children: /* @__PURE__ */ jsx20(
                 Button8,
                 {
@@ -8633,7 +8699,7 @@ var TimelineRow = ({
             ] })
           ] });
         })() }),
-        open && runFinished && unansweredQuestions.length > 0 && /* @__PURE__ */ jsxs16(Box14, { sx: { px: 4, pb: 2 }, children: [
+        open && runFinished && unansweredQuestions.length > 0 && /* @__PURE__ */ jsxs17(Box14, { sx: { px: 4, pb: 2 }, children: [
           /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.7rem", textTransform: "uppercase", letterSpacing: 0.5, color: "hsl(var(--muted-foreground))", mb: 1 }, children: unansweredQuestions.length === 1 ? "Question (unanswered)" : "Questions (unanswered)" }),
           /* @__PURE__ */ jsx20(Box14, { sx: {
             p: 2,
@@ -8653,7 +8719,7 @@ var TimelineRow = ({
           const slug = req.appName.toLowerCase().replace(/[\s-]+/g, "_");
           const appId = req.appId || appsById[req.appName]?.id || appsById[slug]?.id || null;
           const icon = appsById[req.appName]?.icon || appsById[slug]?.icon || (appId ? appsById[appId]?.icon : "") || "";
-          return /* @__PURE__ */ jsx20(Box14, { sx: { px: 4, pb: 2 }, children: /* @__PURE__ */ jsxs16(Box14, { sx: {
+          return /* @__PURE__ */ jsx20(Box14, { sx: { px: 4, pb: 2 }, children: /* @__PURE__ */ jsxs17(Box14, { sx: {
             display: "flex",
             alignItems: "center",
             gap: 1.5,
@@ -8663,18 +8729,18 @@ var TimelineRow = ({
             bgcolor: "hsla(var(--severity-medium) / 0.08)"
           }, children: [
             /* @__PURE__ */ jsx20(LockIcon3, { size: 22, color: "hsl(var(--severity-medium))" }),
-            /* @__PURE__ */ jsxs16(Box14, { sx: { flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsxs16(Typography13, { sx: { fontSize: "0.85rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: [
+            /* @__PURE__ */ jsxs17(Box14, { sx: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs17(Typography13, { sx: { fontSize: "0.85rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: [
                 pretty,
                 " requires authentication"
               ] }),
-              /* @__PURE__ */ jsxs16(Typography13, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))" }, children: [
+              /* @__PURE__ */ jsxs17(Typography13, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))" }, children: [
                 "Connect your ",
                 pretty,
                 " account so the agent can complete this step, then rerun the decision."
               ] })
             ] }),
-            /* @__PURE__ */ jsxs16(
+            /* @__PURE__ */ jsxs17(
               Button8,
               {
                 variant: "outlined",
@@ -8792,6 +8858,8 @@ var AgentUI = ({
   apiKey,
   apiBaseUrl,
   orgId,
+  theme,
+  colorMode,
   className,
   sx,
   contentSx
@@ -9906,14 +9974,14 @@ var AgentUI = ({
     if (cron) setScheduleCron(cron);
   }, [schedFreq, schedInterval, schedHour, schedMinute, schedWeekdays, schedDayOfMonth]);
   const scheduleDisabledReason = scheduleDisabledReasons[0] || "";
-  const scheduleDisabledTooltip = scheduleDisabledReasons.length > 1 ? /* @__PURE__ */ jsxs16(Box14, { children: [
-    /* @__PURE__ */ jsxs16(Box14, { sx: { fontWeight: 600, mb: 0.5 }, children: [
+  const scheduleDisabledTooltip = scheduleDisabledReasons.length > 1 ? /* @__PURE__ */ jsxs17(Box14, { children: [
+    /* @__PURE__ */ jsxs17(Box14, { sx: { fontWeight: 600, mb: 0.5 }, children: [
       "Cannot schedule for ",
       scheduleDisabledReasons.length,
       " reasons:"
     ] }),
-    /* @__PURE__ */ jsx20(Box14, { sx: { m: 0 }, children: scheduleDisabledReasons.map((r, i) => /* @__PURE__ */ jsxs16(Box14, { sx: { mb: 0.5, display: "flex", gap: 0.75 }, children: [
-      /* @__PURE__ */ jsxs16(Box14, { component: "span", sx: { fontWeight: 700, flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx20(Box14, { sx: { m: 0 }, children: scheduleDisabledReasons.map((r, i) => /* @__PURE__ */ jsxs17(Box14, { sx: { mb: 0.5, display: "flex", gap: 0.75 }, children: [
+      /* @__PURE__ */ jsxs17(Box14, { component: "span", sx: { fontWeight: 700, flexShrink: 0 }, children: [
         i + 1,
         "."
       ] }),
@@ -9975,7 +10043,7 @@ var AgentUI = ({
       )
     }
   );
-  const schedulePopover = /* @__PURE__ */ jsxs16(
+  const schedulePopover = /* @__PURE__ */ jsxs17(
     Popover,
     {
       open: Boolean(scheduleAnchor),
@@ -10000,7 +10068,7 @@ var AgentUI = ({
       children: [
         /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.85rem", fontWeight: 600, mb: 0.5 }, children: "Schedule recurring run" }),
         /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))", mb: 1.5 }, children: "Choose how often this prompt should run. The schedule keeps running until you remove it." }),
-        scheduleHint && /* @__PURE__ */ jsxs16(
+        scheduleHint && /* @__PURE__ */ jsxs17(
           Box14,
           {
             sx: {
@@ -10015,7 +10083,7 @@ var AgentUI = ({
             },
             children: [
               /* @__PURE__ */ jsx20(ScheduleIcon, { size: 16, color: "hsl(var(--primary))" }),
-              /* @__PURE__ */ jsxs16(Box14, { sx: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs17(Box14, { sx: { flex: 1, minWidth: 0 }, children: [
                 /* @__PURE__ */ jsx20(Box14, { sx: { fontSize: "0.7rem", color: "hsl(var(--muted-foreground))", mb: 0.25 }, children: "Detected from your prompt" }),
                 /* @__PURE__ */ jsx20(Box14, { sx: { fontSize: "0.78rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: scheduleHint.label }),
                 /* @__PURE__ */ jsx20(Box14, { sx: { fontSize: "0.68rem", fontFamily: "monospace", color: "hsl(var(--muted-foreground))" }, children: scheduleHint.cron })
@@ -10041,7 +10109,7 @@ var AgentUI = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs16(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.25 }, children: [
+        /* @__PURE__ */ jsxs17(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.25 }, children: [
           /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.78rem", color: "hsl(var(--muted-foreground))", flexShrink: 0 }, children: "Repeat every" }),
           /* @__PURE__ */ jsx20(
             TextField5,
@@ -10065,7 +10133,7 @@ var AgentUI = ({
               }
             }
           ),
-          /* @__PURE__ */ jsxs16(
+          /* @__PURE__ */ jsxs17(
             Select2,
             {
               size: "small",
@@ -10096,7 +10164,7 @@ var AgentUI = ({
             }
           )
         ] }),
-        (schedFreq === "days" || schedFreq === "weeks" || schedFreq === "months") && /* @__PURE__ */ jsxs16(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.25 }, children: [
+        (schedFreq === "days" || schedFreq === "weeks" || schedFreq === "months") && /* @__PURE__ */ jsxs17(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.25 }, children: [
           /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.78rem", color: "hsl(var(--muted-foreground))", flexShrink: 0 }, children: "At" }),
           /* @__PURE__ */ jsx20(
             TextField5,
@@ -10123,7 +10191,7 @@ var AgentUI = ({
             }
           )
         ] }),
-        schedFreq === "weeks" && /* @__PURE__ */ jsxs16(Box14, { sx: { mb: 1.25 }, children: [
+        schedFreq === "weeks" && /* @__PURE__ */ jsxs17(Box14, { sx: { mb: 1.25 }, children: [
           /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.78rem", color: "hsl(var(--muted-foreground))", mb: 0.75 }, children: "Repeat on" }),
           /* @__PURE__ */ jsx20(Box14, { sx: { display: "flex", gap: 0.5 }, children: ["S", "M", "T", "W", "T", "F", "S"].map((label, i) => {
             const active = schedWeekdays.has(i);
@@ -10164,13 +10232,13 @@ var AgentUI = ({
               i
             );
           }) }),
-          schedInterval > 1 && /* @__PURE__ */ jsxs16(Typography13, { sx: { fontSize: "0.68rem", color: "hsl(var(--muted-foreground))", mt: 0.75 }, children: [
+          schedInterval > 1 && /* @__PURE__ */ jsxs17(Typography13, { sx: { fontSize: "0.68rem", color: "hsl(var(--muted-foreground))", mt: 0.75 }, children: [
             "Cron does not support every ",
             schedInterval,
             " weeks natively \u2014 this will run weekly on the selected days."
           ] })
         ] }),
-        schedFreq === "months" && /* @__PURE__ */ jsxs16(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.25 }, children: [
+        schedFreq === "months" && /* @__PURE__ */ jsxs17(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.25 }, children: [
           /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.78rem", color: "hsl(var(--muted-foreground))", flexShrink: 0 }, children: "On day" }),
           /* @__PURE__ */ jsx20(
             TextField5,
@@ -10223,8 +10291,8 @@ var AgentUI = ({
           },
           expr
         )) }),
-        /* @__PURE__ */ jsxs16(Box14, { sx: { mt: 1.25 }, children: [
-          /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs17(Box14, { sx: { mt: 1.25 }, children: [
+          /* @__PURE__ */ jsxs17(
             Box14,
             {
               role: "button",
@@ -10267,7 +10335,7 @@ var AgentUI = ({
               }
             }
           ),
-          /* @__PURE__ */ jsxs16(Typography13, { sx: { fontSize: "0.68rem", fontFamily: "monospace", color: "hsl(var(--muted-foreground))", mt: 0.75 }, children: [
+          /* @__PURE__ */ jsxs17(Typography13, { sx: { fontSize: "0.68rem", fontFamily: "monospace", color: "hsl(var(--muted-foreground))", mt: 0.75 }, children: [
             "cron: ",
             scheduleCron || "\u2014"
           ] })
@@ -10275,23 +10343,23 @@ var AgentUI = ({
         scheduleSaving && /* @__PURE__ */ jsx20(Box14, { sx: { mt: 2, display: "flex", flexDirection: "column", gap: 0.75, p: 1.25, borderRadius: 1, bgcolor: "hsl(var(--muted))", border: "1px solid hsl(var(--border))" }, children: scheduleSteps.map((s) => {
           const label = s.id === "name" ? "Generating name & description" : s.id === "workflow" ? "Creating workflow" : "Enabling schedule";
           const color = s.state === "done" ? "hsl(var(--primary))" : s.state === "error" ? "hsl(var(--destructive))" : s.state === "active" ? "hsl(var(--foreground))" : "hsl(var(--muted-foreground))";
-          return /* @__PURE__ */ jsxs16(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: "0.78rem", color }, children: [
-            /* @__PURE__ */ jsxs16(Box14, { sx: { width: 16, display: "flex", alignItems: "center", justifyContent: "center" }, children: [
+          return /* @__PURE__ */ jsxs17(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: "0.78rem", color }, children: [
+            /* @__PURE__ */ jsxs17(Box14, { sx: { width: 16, display: "flex", alignItems: "center", justifyContent: "center" }, children: [
               s.state === "active" && /* @__PURE__ */ jsx20(CircularProgress4, { size: 12, sx: { color: "hsl(var(--primary))" } }),
               s.state === "done" && /* @__PURE__ */ jsx20(Box14, { sx: { fontSize: "0.85rem", lineHeight: 1, color: "hsl(var(--primary))" }, children: "\u2713" }),
               s.state === "error" && /* @__PURE__ */ jsx20(Box14, { sx: { fontSize: "0.85rem", lineHeight: 1, color: "hsl(var(--destructive))" }, children: "!" }),
               s.state === "pending" && /* @__PURE__ */ jsx20(Box14, { sx: { width: 6, height: 6, borderRadius: "50%", bgcolor: "hsl(var(--muted-foreground))", opacity: 0.4 } })
             ] }),
-            /* @__PURE__ */ jsxs16(Box14, { component: "span", sx: { fontFamily: "inherit" }, children: [
+            /* @__PURE__ */ jsxs17(Box14, { component: "span", sx: { fontFamily: "inherit" }, children: [
               label,
-              s.detail && s.state !== "pending" && /* @__PURE__ */ jsxs16(Box14, { component: "span", sx: { ml: 0.75, color: "hsl(var(--muted-foreground))", fontFamily: "monospace", fontSize: "0.72rem" }, children: [
+              s.detail && s.state !== "pending" && /* @__PURE__ */ jsxs17(Box14, { component: "span", sx: { ml: 0.75, color: "hsl(var(--muted-foreground))", fontFamily: "monospace", fontSize: "0.72rem" }, children: [
                 "\u2014 ",
                 s.detail
               ] })
             ] })
           ] }, s.id);
         }) }),
-        /* @__PURE__ */ jsxs16(Box14, { sx: { display: "flex", justifyContent: "flex-end", gap: 1, mt: 2 }, children: [
+        /* @__PURE__ */ jsxs17(Box14, { sx: { display: "flex", justifyContent: "flex-end", gap: 1, mt: 2 }, children: [
           /* @__PURE__ */ jsx20(
             Button8,
             {
@@ -10363,7 +10431,7 @@ var AgentUI = ({
         { width: "100%", display: "flex", justifyContent: "center", pb: 4 },
         ...Array.isArray(sx) ? sx : sx ? [sx] : []
       ],
-      children: /* @__PURE__ */ jsxs16(
+      children: /* @__PURE__ */ jsxs17(
         Box14,
         {
           sx: [
@@ -10373,7 +10441,7 @@ var AgentUI = ({
           children: [
             showRunSwitcher && tabBar,
             schedulePopover,
-            showStarter ? /* @__PURE__ */ jsxs16(
+            showStarter ? /* @__PURE__ */ jsxs17(
               Box14,
               {
                 component: "form",
@@ -10408,7 +10476,7 @@ var AgentUI = ({
                     mt: -1,
                     maxWidth: 600
                   }, children: subtitle }),
-                  /* @__PURE__ */ jsxs16(Box14, { sx: {
+                  /* @__PURE__ */ jsxs17(Box14, { sx: {
                     width: "100%",
                     display: "flex",
                     flexDirection: "column",
@@ -10424,7 +10492,7 @@ var AgentUI = ({
                       boxShadow: "0 0 0 3px hsla(var(--primary) / 0.12)"
                     }
                   }, children: [
-                    attachedImages.length > 0 && /* @__PURE__ */ jsx20(Box14, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75 }, children: attachedImages.map((img, idx) => /* @__PURE__ */ jsxs16(Box14, { sx: {
+                    attachedImages.length > 0 && /* @__PURE__ */ jsx20(Box14, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75 }, children: attachedImages.map((img, idx) => /* @__PURE__ */ jsxs17(Box14, { sx: {
                       display: "inline-flex",
                       alignItems: "center",
                       gap: 1,
@@ -10439,7 +10507,7 @@ var AgentUI = ({
                       /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.72rem", color: "hsl(var(--foreground))", maxWidth: 190, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: img.name }),
                       /* @__PURE__ */ jsx20(IconButton8, { size: "small", onClick: () => setAttachedImages((prev) => prev.filter((_, i) => i !== idx)), sx: { p: 0.25, color: "hsl(var(--muted-foreground))", "&:hover": { color: "hsl(var(--destructive))" } }, "aria-label": "Remove attached image", children: /* @__PURE__ */ jsx20(CloseIcon5, { size: 12 }) })
                     ] }, `${img.name}-${idx}`)) }),
-                    /* @__PURE__ */ jsxs16(Box14, { sx: { display: "flex", alignItems: "flex-end", gap: 1, width: "100%" }, children: [
+                    /* @__PURE__ */ jsxs17(Box14, { sx: { display: "flex", alignItems: "flex-end", gap: 1, width: "100%" }, children: [
                       /* @__PURE__ */ jsx20(
                         InputBase2,
                         {
@@ -10496,7 +10564,7 @@ var AgentUI = ({
                         const canSchedule = (hasExecution || allowWithoutExecution) && !scheduleDisabledReason && !promptTooShort && !disableSchedule;
                         const hintActive = Boolean(scheduleHint) && canSchedule;
                         const tip = disableSchedule ? disableScheduleTooltip || "Scheduling is disabled while editing" : scheduleDisabledReason ? scheduleDisabledTooltip : promptTooShort ? "Type a prompt before scheduling." : hintActive ? `Detected schedule: ${scheduleHint.label}. Click to review and save.` : "Schedule this prompt to run repeatedly on a cron schedule";
-                        return /* @__PURE__ */ jsx20(Tooltip9, { title: tip, placement: "top", arrow: true, children: /* @__PURE__ */ jsx20(Box14, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsxs16(
+                        return /* @__PURE__ */ jsx20(Tooltip9, { title: tip, placement: "top", arrow: true, children: /* @__PURE__ */ jsx20(Box14, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsxs17(
                           IconButton8,
                           {
                             type: "button",
@@ -10557,7 +10625,7 @@ var AgentUI = ({
                           children: /* @__PURE__ */ jsx20(AttachFileIcon, { size: 18 })
                         }
                       ),
-                      /* @__PURE__ */ jsx20(Tooltip9, { title: submitTooltip, placement: "top", arrow: true, children: /* @__PURE__ */ jsx20("span", { children: submitLabel ? /* @__PURE__ */ jsxs16(Box14, { sx: { display: "inline-flex", alignItems: "center", gap: 1 }, children: [
+                      /* @__PURE__ */ jsx20(Tooltip9, { title: submitTooltip, placement: "top", arrow: true, children: /* @__PURE__ */ jsx20("span", { children: submitLabel ? /* @__PURE__ */ jsxs17(Box14, { sx: { display: "inline-flex", alignItems: "center", gap: 1 }, children: [
                         /* @__PURE__ */ jsx20(Tooltip9, { title: "Try this prompt without saving", placement: "top", arrow: true, children: /* @__PURE__ */ jsx20(
                           IconButton8,
                           {
@@ -10616,7 +10684,7 @@ var AgentUI = ({
                       ) }) })
                     ] })
                   ] }),
-                  !hideAppPicker && /* @__PURE__ */ jsx20(Box14, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs16(Box14, { sx: {
+                  !hideAppPicker && /* @__PURE__ */ jsx20(Box14, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs17(Box14, { sx: {
                     display: "inline-flex",
                     flexWrap: "wrap",
                     alignItems: "center",
@@ -10627,7 +10695,7 @@ var AgentUI = ({
                     bgcolor: "hsl(var(--card))",
                     maxWidth: "100%"
                   }, children: [
-                    !hideChooseLLM && /* @__PURE__ */ jsx20(Tooltip9, { title: "Configure the local LLM used for this agent", children: /* @__PURE__ */ jsxs16(
+                    !hideChooseLLM && /* @__PURE__ */ jsx20(Tooltip9, { title: "Configure the local LLM used for this agent", children: /* @__PURE__ */ jsxs17(
                       Box14,
                       {
                         component: "button",
@@ -10671,7 +10739,7 @@ var AgentUI = ({
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsx20(Tooltip9, { title: agentRequestLoading ? "Locked while the agent is running" : "", children: /* @__PURE__ */ jsxs16(
+                    /* @__PURE__ */ jsx20(Tooltip9, { title: agentRequestLoading ? "Locked while the agent is running" : "", children: /* @__PURE__ */ jsxs17(
                       Box14,
                       {
                         component: "button",
@@ -10712,7 +10780,7 @@ var AgentUI = ({
                         {
                           title: needsAuth ? `${(app.name || "").replace(/_/g, " ")} is not authenticated yet \u2014 click to set it up` : "",
                           arrow: true,
-                          children: /* @__PURE__ */ jsxs16(
+                          children: /* @__PURE__ */ jsxs17(
                             Box14,
                             {
                               onClick: needsAuth && !agentRequestLoading ? () => setAuthDrawerApp({ name: app.name, id: app.id || null }) : void 0,
@@ -10772,7 +10840,7 @@ var AgentUI = ({
                       return !NO_AUTH.has(slug) && !isAppAuthenticated(a.name || "");
                     });
                     if (unauthed.length === 0) return null;
-                    return /* @__PURE__ */ jsx20(Box14, { sx: { display: "flex", justifyContent: "center", mt: -0.5 }, children: /* @__PURE__ */ jsxs16(Box14, { sx: {
+                    return /* @__PURE__ */ jsx20(Box14, { sx: { display: "flex", justifyContent: "center", mt: -0.5 }, children: /* @__PURE__ */ jsxs17(Box14, { sx: {
                       display: "inline-flex",
                       alignItems: "center",
                       gap: 1,
@@ -10787,7 +10855,7 @@ var AgentUI = ({
                     }, children: [
                       /* @__PURE__ */ jsx20(WarningIcon, { size: 14, color: "hsl(var(--severity-medium))" }),
                       /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))" }, children: unauthed.length === 1 ? `${unauthed[0].name.replace(/_/g, " ")} is not authenticated.` : `${unauthed.length} apps are not authenticated.` }),
-                      /* @__PURE__ */ jsxs16(
+                      /* @__PURE__ */ jsxs17(
                         Box14,
                         {
                           component: "button",
@@ -10822,8 +10890,8 @@ var AgentUI = ({
                   }, children: error })
                 ]
               }
-            ) : /* @__PURE__ */ jsxs16(Box14, { children: [
-              /* @__PURE__ */ jsxs16(Box14, { sx: {
+            ) : /* @__PURE__ */ jsxs17(Box14, { children: [
+              /* @__PURE__ */ jsxs17(Box14, { sx: {
                 display: "flex",
                 alignItems: "center",
                 gap: 2,
@@ -10848,9 +10916,9 @@ var AgentUI = ({
                     }
                   }
                 ) }, i)) }),
-                /* @__PURE__ */ jsxs16(Box14, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxs17(Box14, { sx: { flex: 1, minWidth: 0 }, children: [
                   /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.85rem", color: "hsl(var(--foreground))", fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: agentData?.original_input || actionInput || "Agent run" }),
-                  /* @__PURE__ */ jsxs16(Typography13, { sx: { fontSize: "0.7rem", color: "hsl(var(--muted-foreground))" }, children: [
+                  /* @__PURE__ */ jsxs17(Typography13, { sx: { fontSize: "0.7rem", color: "hsl(var(--muted-foreground))" }, children: [
                     "Status: ",
                     execution?.status || agentData?.status || "\u2014",
                     " \xB7 ",
@@ -10970,11 +11038,11 @@ var AgentUI = ({
                   }
                 }
                 const pendingAnswered = pendingQuestions.every((q) => questionAnswers[q.question]?.value);
-                return /* @__PURE__ */ jsxs16(Fragment7, { children: [
-                  /* @__PURE__ */ jsxs16(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+                return /* @__PURE__ */ jsxs17(Fragment7, { children: [
+                  /* @__PURE__ */ jsxs17(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
                     isRunning ? /* @__PURE__ */ jsx20(CircularProgress4, { size: 16, sx: { color: "hsl(var(--primary))" } }) : status === "FINISHED" ? /* @__PURE__ */ jsx20(CheckCircleIcon4, { size: 18, color: "hsl(142 70% 45%)" }) : /* @__PURE__ */ jsx20(ErrorIcon, { size: 18, color: "hsl(var(--destructive))" }),
                     /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.9rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: isRunning ? "Agent is working\u2026" : status === "FINISHED" ? "Run finished" : `Run ${status.toLowerCase()}` }),
-                    /* @__PURE__ */ jsxs16(Typography13, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))" }, children: [
+                    /* @__PURE__ */ jsxs17(Typography13, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))" }, children: [
                       decisionCount,
                       " step",
                       decisionCount === 1 ? "" : "s",
@@ -10984,7 +11052,7 @@ var AgentUI = ({
                   ] }),
                   pendingAuthApps.map(({ appName, appId, icon }) => {
                     const pretty = appName.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
-                    return /* @__PURE__ */ jsxs16(
+                    return /* @__PURE__ */ jsxs17(
                       Box14,
                       {
                         sx: {
@@ -10998,18 +11066,18 @@ var AgentUI = ({
                         },
                         children: [
                           /* @__PURE__ */ jsx20(LockIcon3, { size: 22, color: "hsl(var(--severity-medium))" }),
-                          /* @__PURE__ */ jsxs16(Box14, { sx: { flex: 1, minWidth: 0 }, children: [
-                            /* @__PURE__ */ jsxs16(Typography13, { sx: { fontSize: "0.85rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: [
+                          /* @__PURE__ */ jsxs17(Box14, { sx: { flex: 1, minWidth: 0 }, children: [
+                            /* @__PURE__ */ jsxs17(Typography13, { sx: { fontSize: "0.85rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: [
                               pretty,
                               " requires authentication"
                             ] }),
-                            /* @__PURE__ */ jsxs16(Typography13, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))" }, children: [
+                            /* @__PURE__ */ jsxs17(Typography13, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))" }, children: [
                               "Connect your ",
                               pretty,
                               " account so the agent can complete this step, then rerun."
                             ] })
                           ] }),
-                          /* @__PURE__ */ jsxs16(
+                          /* @__PURE__ */ jsxs17(
                             Button8,
                             {
                               variant: "outlined",
@@ -11108,11 +11176,11 @@ var AgentUI = ({
                         submitQuestions(pendingAsk.run_details.id, questionAnswers);
                       }
                     };
-                    return /* @__PURE__ */ jsxs16(Box14, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+                    return /* @__PURE__ */ jsxs17(Box14, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
                       pendingQuestions.map((q, qi) => {
                         const value = questionAnswers[q.question]?.value || "";
                         const isMissing = simpleSubmitAttempted && !value;
-                        return /* @__PURE__ */ jsxs16(Box14, { children: [
+                        return /* @__PURE__ */ jsxs17(Box14, { children: [
                           /* @__PURE__ */ jsx20(Box14, { sx: { fontSize: "0.9rem", color: "hsl(var(--foreground))", mb: 1, "& p": { my: 0.5 } }, children: /* @__PURE__ */ jsx20(Markdown, { remarkPlugins: [remarkGfm4, remarkBreaks], children: normalizeMarkdown(q.question) }) }),
                           /* @__PURE__ */ jsx20(
                             TextField5,
@@ -11143,7 +11211,7 @@ var AgentUI = ({
                           )
                         ] }, qi);
                       }),
-                      /* @__PURE__ */ jsxs16(Box14, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                      /* @__PURE__ */ jsxs17(Box14, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                         /* @__PURE__ */ jsx20(Tooltip9, { title: !pendingAnswered ? "Please answer all questions first" : "", placement: "top", arrow: true, children: /* @__PURE__ */ jsx20("span", { children: /* @__PURE__ */ jsx20(
                           Button8,
                           {
@@ -11191,10 +11259,10 @@ var AgentUI = ({
                   border: "1px solid hsl(var(--border))",
                   bgcolor: "hsl(var(--card))",
                   overflow: "hidden"
-                }, children: timeline.length === 0 || timeline.length === 1 && agentRequestLoading ? /* @__PURE__ */ jsxs16(Box14, { sx: { p: 4, textAlign: "center", color: "hsl(var(--muted-foreground))", fontSize: "0.85rem" }, children: [
+                }, children: timeline.length === 0 || timeline.length === 1 && agentRequestLoading ? /* @__PURE__ */ jsxs17(Box14, { sx: { p: 4, textAlign: "center", color: "hsl(var(--muted-foreground))", fontSize: "0.85rem" }, children: [
                   /* @__PURE__ */ jsx20(CircularProgress4, { size: 20, sx: { mb: 1 } }),
                   /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.85rem" }, children: "Waiting for agent response\u2026" })
-                ] }) : /* @__PURE__ */ jsxs16(Fragment7, { children: [
+                ] }) : /* @__PURE__ */ jsxs17(Fragment7, { children: [
                   timeline.map((item, i) => /* @__PURE__ */ jsx20(
                     TimelineRow,
                     {
@@ -11220,7 +11288,7 @@ var AgentUI = ({
                     },
                     i
                   )),
-                  detailedRunFinished && /* @__PURE__ */ jsxs16(Box14, { sx: {
+                  detailedRunFinished && /* @__PURE__ */ jsxs17(Box14, { sx: {
                     borderTop: "1px solid hsl(var(--border))",
                     p: 2.5,
                     display: "flex",
@@ -11228,7 +11296,7 @@ var AgentUI = ({
                     gap: 1.5,
                     bgcolor: "hsl(var(--muted) / 0.2)"
                   }, children: [
-                    /* @__PURE__ */ jsxs16(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+                    /* @__PURE__ */ jsxs17(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
                       detailedStatus === "FINISHED" ? /* @__PURE__ */ jsx20(CheckCircleIcon4, { size: 18, color: "hsl(142 70% 45%)" }) : /* @__PURE__ */ jsx20(ErrorIcon, { size: 18, color: "hsl(var(--destructive))" }),
                       /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.9rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: detailedStatus === "FINISHED" ? "Run finished" : `Run ${detailedStatus.toLowerCase()}` })
                     ] }),
@@ -11264,9 +11332,9 @@ var AgentUI = ({
                   ] })
                 ] }) });
               })(),
-              finishDecisionId && /* @__PURE__ */ jsx20(Box14, { sx: { mt: 3, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs16(Box14, { sx: { width: "100%", maxWidth: 640 }, children: [
+              finishDecisionId && /* @__PURE__ */ jsx20(Box14, { sx: { mt: 3, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs17(Box14, { sx: { width: "100%", maxWidth: 640 }, children: [
                 /* @__PURE__ */ jsx20(Typography13, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))", mb: 0.75, textAlign: "center" }, children: "Continue this agent run with more details" }),
-                /* @__PURE__ */ jsxs16(
+                /* @__PURE__ */ jsxs17(
                   Box14,
                   {
                     component: "form",
@@ -11341,6 +11409,9 @@ var AgentUI = ({
                 subtitle: appPickerSubtitle,
                 multiSelect: true,
                 selectedApps: chosenApps.map((a) => ({ name: a.name, id: a.id || null, icon: a.icon })),
+                globalUrl: apiBaseUrl,
+                theme,
+                colorMode,
                 onSelectionChange: (next) => {
                   setChosenApps(
                     next.map((app) => {
@@ -11364,7 +11435,10 @@ var AgentUI = ({
                 onClose: () => setAuthDrawerApp(null),
                 appName: authDrawerApp?.name || null,
                 appId: authDrawerApp?.id || null,
-                activeOrgId: orgId || null
+                activeOrgId: orgId || null,
+                globalUrl: apiBaseUrl,
+                theme,
+                colorMode
               }
             )
           ]
@@ -11392,7 +11466,7 @@ import {
   ShieldCheck,
   X as CloseIcon6
 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 var TAB_ORDER = ["run", "permissions", "localLLM"];
 var AgentRunDrawer = ({
   open,
@@ -11415,6 +11489,7 @@ var AgentRunDrawer = ({
   globalUrl
 }) => {
   useSyncHostBaseUrl(globalUrl);
+  const themeScope = useShuffleMcpTheme();
   const [activeTab, setActiveTab] = useState13(initialTab);
   const prevOpenRef = useRef9(open);
   useEffect12(() => {
@@ -11436,7 +11511,7 @@ var AgentRunDrawer = ({
   });
   const showTabs = visibleTabs.length > 1;
   const safeActiveTab = visibleTabs.includes(activeTab) ? activeTab : "run";
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     Drawer3,
     {
       anchor: "right",
@@ -11444,7 +11519,7 @@ var AgentRunDrawer = ({
       onClose,
       slotProps: {
         paper: {
-          className,
+          className: [themeScope?.scopeClassName, className].filter(Boolean).join(" ") || void 0,
           sx: [
             {
               width: { xs: "100%", sm: width },
@@ -11459,7 +11534,7 @@ var AgentRunDrawer = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsxs18(
           Box15,
           {
             sx: [
@@ -11492,7 +11567,7 @@ var AgentRunDrawer = ({
                   children: /* @__PURE__ */ jsx21(AgentIcon_default, { size: 22 })
                 }
               ),
-              /* @__PURE__ */ jsxs17(Box15, { sx: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs18(Box15, { sx: { flex: 1, minWidth: 0 }, children: [
                 /* @__PURE__ */ jsx21(Typography14, { sx: { fontWeight: 600, fontSize: "1.1rem", color: "hsl(var(--foreground))" }, children: title }),
                 /* @__PURE__ */ jsx21(Typography14, { sx: { fontSize: "0.8rem", color: "hsl(var(--muted-foreground))" }, children: subtitle })
               ] }),
@@ -11500,7 +11575,7 @@ var AgentRunDrawer = ({
             ]
           }
         ),
-        showTabs && /* @__PURE__ */ jsx21(Box15, { sx: { borderBottom: "1px solid hsl(var(--border))", flexShrink: 0 }, children: /* @__PURE__ */ jsxs17(
+        showTabs && /* @__PURE__ */ jsx21(Box15, { sx: { borderBottom: "1px solid hsl(var(--border))", flexShrink: 0 }, children: /* @__PURE__ */ jsxs18(
           Tabs,
           {
             value: safeActiveTab,
@@ -11547,7 +11622,7 @@ var AgentRunDrawer = ({
                 Tab,
                 {
                   value: "localLLM",
-                  label: /* @__PURE__ */ jsxs17(Box15, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                  label: /* @__PURE__ */ jsxs18(Box15, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
                     "Local LLM",
                     localLLMTabBadge
                   ] }),
@@ -11559,7 +11634,7 @@ var AgentRunDrawer = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs17(Box15, { sx: [{ flex: 1, overflowY: "auto" }, ...Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : []], children: [
+        /* @__PURE__ */ jsxs18(Box15, { sx: [{ flex: 1, overflowY: "auto" }, ...Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : []], children: [
           safeActiveTab === "run" && /* @__PURE__ */ jsx21(Box15, { sx: { px: 2, py: 2 }, children: /* @__PURE__ */ jsx21(
             AgentUI_default,
             {
@@ -11763,7 +11838,7 @@ var stopAgentSchedule = async (workflowId, params = {}) => {
 
 // components/AgentActivityList.tsx
 import { Pencil, StopCircle, AlertTriangle as AlertTriangle2 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var STATUS_CONFIG = {
   FINISHED: { icon: /* @__PURE__ */ jsx22(CheckCircle, { size: 16 }), color: "hsl(var(--severity-low, 142 71% 45%))", label: "Completed" },
   SUCCESS: { icon: /* @__PURE__ */ jsx22(CheckCircle, { size: 16 }), color: "hsl(var(--severity-low, 142 71% 45%))", label: "Completed" },
@@ -11887,7 +11962,7 @@ var AgentRunRow = ({ run, onClick, sx }) => {
   const iconColor = getRunIconColor(run);
   const duration = formatDuration(run);
   const tools = getRunTools(run);
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     Box16,
     {
       onClick,
@@ -11928,8 +12003,8 @@ var AgentRunRow = ({ run, onClick, sx }) => {
             children: getRunIcon(run)
           }
         ),
-        /* @__PURE__ */ jsxs18(Box16, { sx: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs18(Box16, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.25 }, children: [
+        /* @__PURE__ */ jsxs19(Box16, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs19(Box16, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.25 }, children: [
             /* @__PURE__ */ jsx22(
               Typography15,
               {
@@ -11959,9 +12034,9 @@ var AgentRunRow = ({ run, onClick, sx }) => {
               children: getRunSubtitle(run)
             }
           ),
-          /* @__PURE__ */ jsxs18(Box16, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 0.5 }, children: [
+          /* @__PURE__ */ jsxs19(Box16, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 0.5 }, children: [
             /* @__PURE__ */ jsx22(Typography15, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", opacity: 0.7 }, children: run.started_at ? getTimeAgo(run.started_at) : "\u2014" }),
-            duration && /* @__PURE__ */ jsxs18(Fragment8, { children: [
+            duration && /* @__PURE__ */ jsxs19(Fragment8, { children: [
               /* @__PURE__ */ jsx22(Typography15, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", opacity: 0.4 }, children: "\xB7" }),
               /* @__PURE__ */ jsx22(Typography15, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", opacity: 0.7 }, children: duration })
             ] })
@@ -12134,14 +12209,14 @@ var AgentActivityList = ({
     ].filter(Boolean).join(" ").toLowerCase();
     return hay.includes(debouncedQuery.toLowerCase());
   }) : runs;
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     Box16,
     {
       className,
       sx: [{ display: "flex", flexDirection: "column", gap: 2 }, ...Array.isArray(sx) ? sx : sx ? [sx] : []],
       children: [
-        (showSearchBar || showStatusChips) && /* @__PURE__ */ jsxs18(Box16, { sx: [{ display: "flex", alignItems: "center", justifyContent: "center", gap: 1.5, flexWrap: "wrap" }, ...Array.isArray(toolbarSx) ? toolbarSx : toolbarSx ? [toolbarSx] : []], children: [
-          /* @__PURE__ */ jsxs18(
+        (showSearchBar || showStatusChips) && /* @__PURE__ */ jsxs19(Box16, { sx: [{ display: "flex", alignItems: "center", justifyContent: "center", gap: 1.5, flexWrap: "wrap" }, ...Array.isArray(toolbarSx) ? toolbarSx : toolbarSx ? [toolbarSx] : []], children: [
+          /* @__PURE__ */ jsxs19(
             Select3,
             {
               size: "small",
@@ -12224,7 +12299,7 @@ var AgentActivityList = ({
           ),
           isLoading && runs.length > 0 && /* @__PURE__ */ jsx22(CircularProgress5, { size: 16, sx: { color: "hsl(var(--primary))", ml: 0.5 } })
         ] }),
-        selectedAgentWorkflow && /* @__PURE__ */ jsxs18(
+        selectedAgentWorkflow && /* @__PURE__ */ jsxs19(
           Box16,
           {
             sx: {
@@ -12237,7 +12312,7 @@ var AgentActivityList = ({
               bgcolor: "hsl(var(--card))"
             },
             children: [
-              /* @__PURE__ */ jsxs18(Box16, { sx: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs19(Box16, { sx: { flex: 1, minWidth: 0 }, children: [
                 /* @__PURE__ */ jsx22(Typography15, { sx: { fontSize: "0.85rem", fontWeight: 600, color: "hsl(var(--foreground))", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selectedAgentWorkflow.name }),
                 selectedAgentWorkflow.description && /* @__PURE__ */ jsx22(Typography15, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selectedAgentWorkflow.description })
               ] }),
@@ -12282,7 +12357,7 @@ var AgentActivityList = ({
             ]
           }
         ),
-        isLoading && runs.length === 0 ? /* @__PURE__ */ jsx22(Box16, { sx: { display: "flex", justifyContent: "center", py: 8 }, children: /* @__PURE__ */ jsx22(CircularProgress5, { size: 28, sx: { color: "hsl(var(--primary))" } }) }) : error ? /* @__PURE__ */ jsxs18(Box16, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", py: 6 }, children: [
+        isLoading && runs.length === 0 ? /* @__PURE__ */ jsx22(Box16, { sx: { display: "flex", justifyContent: "center", py: 8 }, children: /* @__PURE__ */ jsx22(CircularProgress5, { size: 28, sx: { color: "hsl(var(--primary))" } }) }) : error ? /* @__PURE__ */ jsxs19(Box16, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", py: 6 }, children: [
           /* @__PURE__ */ jsx22(AlertCircle, { size: 28, style: { color: "hsl(var(--severity-critical, 0 72% 55%))", marginBottom: 8 } }),
           /* @__PURE__ */ jsx22(
             Typography15,
@@ -12300,7 +12375,7 @@ var AgentActivityList = ({
               children: "Try again"
             }
           )
-        ] }) : filteredRuns.length === 0 ? /* @__PURE__ */ jsxs18(Box16, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", py: 8 }, children: [
+        ] }) : filteredRuns.length === 0 ? /* @__PURE__ */ jsxs19(Box16, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", py: 8 }, children: [
           /* @__PURE__ */ jsx22(
             Activity,
             {
@@ -12316,7 +12391,7 @@ var AgentActivityList = ({
               children: emptySubtitle
             }
           )
-        ] }) : /* @__PURE__ */ jsxs18(Box16, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+        ] }) : /* @__PURE__ */ jsxs19(Box16, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
           filteredRuns.map((run, idx) => /* @__PURE__ */ jsx22(
             AgentRunRow,
             {
@@ -12326,7 +12401,7 @@ var AgentActivityList = ({
             },
             run.execution_id || idx
           )),
-          hasMore && /* @__PURE__ */ jsx22(Box16, { sx: { display: "flex", justifyContent: "center", mt: 1 }, children: /* @__PURE__ */ jsxs18(
+          hasMore && /* @__PURE__ */ jsx22(Box16, { sx: { display: "flex", justifyContent: "center", mt: 1 }, children: /* @__PURE__ */ jsxs19(
             Button9,
             {
               size: "small",
@@ -12340,7 +12415,7 @@ var AgentActivityList = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsxs19(
           Dialog2,
           {
             open: stopOpen,
@@ -12348,14 +12423,14 @@ var AgentActivityList = ({
             slotProps: { paper: { sx: { bgcolor: "hsl(var(--card))", color: "hsl(var(--foreground))", border: "1px solid hsl(var(--border))" } } },
             children: [
               /* @__PURE__ */ jsx22(DialogTitle2, { sx: { fontSize: "1rem", fontWeight: 600 }, children: "Stop schedule?" }),
-              /* @__PURE__ */ jsx22(DialogContent2, { children: /* @__PURE__ */ jsxs18(Typography15, { sx: { fontSize: "0.85rem", color: "hsl(var(--muted-foreground))" }, children: [
+              /* @__PURE__ */ jsx22(DialogContent2, { children: /* @__PURE__ */ jsxs19(Typography15, { sx: { fontSize: "0.85rem", color: "hsl(var(--muted-foreground))" }, children: [
                 'This will stop "',
                 selectedAgentWorkflow?.name,
                 '" and delete the scheduled workflow. Past executions remain visible. This cannot be undone.'
               ] }) }),
-              /* @__PURE__ */ jsxs18(DialogActions, { sx: { px: 3, pb: 2 }, children: [
+              /* @__PURE__ */ jsxs19(DialogActions, { sx: { px: 3, pb: 2 }, children: [
                 /* @__PURE__ */ jsx22(Button9, { onClick: () => setStopOpen(false), disabled: stopLoading, sx: { textTransform: "none", color: "hsl(var(--muted-foreground))" }, children: "Cancel" }),
-                /* @__PURE__ */ jsxs18(
+                /* @__PURE__ */ jsxs19(
                   Button9,
                   {
                     onClick: confirmStop,
@@ -12383,7 +12458,7 @@ import {
   X as CloseIcon7,
   ExternalLink as OpenInNewIcon3
 } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 var AgentExecutionDrawer = ({
   open,
   onClose,
@@ -12397,12 +12472,15 @@ var AgentExecutionDrawer = ({
   headerSx,
   bodySx,
   topBanner,
-  onSchedule
+  onSchedule,
+  theme,
+  colorMode
 }) => {
+  const themeScope = useShuffleMcpTheme();
   const statusKey = (run?.status || "").toUpperCase();
   const cfg = STATUS_CONFIG[statusKey] || STATUS_CONFIG.WAITING;
   const duration = run ? formatDuration(run) : "";
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     Drawer4,
     {
       anchor: "right",
@@ -12410,7 +12488,7 @@ var AgentExecutionDrawer = ({
       onClose,
       slotProps: {
         paper: {
-          className,
+          className: [themeScope?.scopeClassName, className].filter(Boolean).join(" ") || void 0,
           sx: [
             {
               width: { xs: "100%", sm: width },
@@ -12425,7 +12503,7 @@ var AgentExecutionDrawer = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsxs20(
           Box17,
           {
             sx: [
@@ -12461,8 +12539,8 @@ var AgentExecutionDrawer = ({
                   children: /* @__PURE__ */ jsx23(AgentIcon_default, { size: 20 })
                 }
               ),
-              /* @__PURE__ */ jsxs19(Box17, { sx: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsxs19(Box17, { sx: { display: "flex", alignItems: "center", gap: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs20(Box17, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxs20(Box17, { sx: { display: "flex", alignItems: "center", gap: 1, minWidth: 0 }, children: [
                   /* @__PURE__ */ jsx23(
                     Typography16,
                     {
@@ -12479,13 +12557,13 @@ var AgentExecutionDrawer = ({
                   ),
                   run && /* @__PURE__ */ jsx23(Box17, { sx: { display: "flex", alignItems: "center", color: cfg.color, flexShrink: 0 }, children: cfg.icon })
                 ] }),
-                run && /* @__PURE__ */ jsxs19(Box17, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 0.25 }, children: [
+                run && /* @__PURE__ */ jsxs20(Box17, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 0.25 }, children: [
                   /* @__PURE__ */ jsx23(Typography16, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))" }, children: cfg.label }),
-                  run.started_at && /* @__PURE__ */ jsxs19(Fragment9, { children: [
+                  run.started_at && /* @__PURE__ */ jsxs20(Fragment9, { children: [
                     /* @__PURE__ */ jsx23(Typography16, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", opacity: 0.4 }, children: "\xB7" }),
                     /* @__PURE__ */ jsx23(Typography16, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))" }, children: getTimeAgo(run.started_at) })
                   ] }),
-                  duration && /* @__PURE__ */ jsxs19(Fragment9, { children: [
+                  duration && /* @__PURE__ */ jsxs20(Fragment9, { children: [
                     /* @__PURE__ */ jsx23(Typography16, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", opacity: 0.4 }, children: "\xB7" }),
                     /* @__PURE__ */ jsx23(Typography16, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))" }, children: duration })
                   ] })
@@ -12521,7 +12599,7 @@ var AgentExecutionDrawer = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs19(Box17, { sx: [{ flex: 1, overflowY: "auto", pt: 3 }, ...Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : []], children: [
+        /* @__PURE__ */ jsxs20(Box17, { sx: [{ flex: 1, overflowY: "auto", pt: 3 }, ...Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : []], children: [
           topBanner,
           run ? /* @__PURE__ */ jsx23(
             AgentUI_default,
@@ -12546,7 +12624,9 @@ var AgentExecutionDrawer = ({
               apiKey,
               apiBaseUrl,
               orgId,
-              onSchedule
+              onSchedule,
+              theme,
+              colorMode
             },
             run.execution_id
           ) : null
@@ -12560,7 +12640,7 @@ var AgentExecutionDrawer_default = AgentExecutionDrawer;
 // views/AgentsView.tsx
 import { useCallback as useCallback10, useMemo as useMemo7, useState as useState15 } from "react";
 import { Box as Box18, Stack, Typography as Typography17 } from "@mui/material";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var AgentsView = ({
   onSchedule,
   maxWidth = 820,
@@ -12572,7 +12652,9 @@ var AgentsView = ({
   isLoaded,
   isLoggedIn,
   userdata,
-  serverside
+  serverside,
+  theme,
+  colorMode
 }) => {
   useSyncHostBaseUrl(globalUrl);
   const [selectedRun, setSelectedRun] = useState15(null);
@@ -12588,7 +12670,7 @@ var AgentsView = ({
     tab: "localLLM"
   });
   const effectiveLocalLLMSlot = useMemo7(
-    () => localLLMSlot ?? /* @__PURE__ */ jsxs20(Box18, { sx: { p: 3, color: "hsl(var(--muted-foreground))", fontSize: "0.85rem", lineHeight: 1.6 }, children: [
+    () => localLLMSlot ?? /* @__PURE__ */ jsxs21(Box18, { sx: { p: 3, color: "hsl(var(--muted-foreground))", fontSize: "0.85rem", lineHeight: 1.6 }, children: [
       /* @__PURE__ */ jsx24(Typography17, { sx: { fontSize: "0.95rem", fontWeight: 600, color: "hsl(var(--foreground))", mb: 1 }, children: "Local LLM not configured" }),
       "This host hasn't wired a Local LLM picker yet. Pass an",
       " ",
@@ -12642,9 +12724,9 @@ var AgentsView = ({
     },
     [editing]
   );
-  return /* @__PURE__ */ jsxs20(Box18, { sx: { minHeight: "100%", width: "100%", px: { xs: 2, md: 4 }, pt: { xs: 3, md: "5vh" }, pb: 6, boxSizing: "border-box" }, children: [
-    /* @__PURE__ */ jsxs20(Stack, { spacing: 6, sx: { maxWidth, mx: "auto", width: "100%" }, children: [
-      editing && /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(Box18, { sx: { minHeight: "100%", width: "100%", px: { xs: 2, md: 4 }, pt: { xs: 3, md: "5vh" }, pb: 6, boxSizing: "border-box" }, children: [
+    /* @__PURE__ */ jsxs21(Stack, { spacing: 6, sx: { maxWidth, mx: "auto", width: "100%" }, children: [
+      editing && /* @__PURE__ */ jsxs21(
         Box18,
         {
           sx: {
@@ -12658,7 +12740,7 @@ var AgentsView = ({
             bgcolor: "hsl(var(--primary) / 0.08)"
           },
           children: [
-            /* @__PURE__ */ jsxs20(Typography17, { sx: { fontSize: "0.85rem", color: "hsl(var(--foreground))" }, children: [
+            /* @__PURE__ */ jsxs21(Typography17, { sx: { fontSize: "0.85rem", color: "hsl(var(--foreground))" }, children: [
               "Editing schedule: ",
               /* @__PURE__ */ jsx24("strong", { children: editing.name })
             ] }),
@@ -12698,7 +12780,9 @@ var AgentsView = ({
           submitLabel: editing ? "Save" : void 0,
           submitTooltip: editing ? "\u2318+Enter to save" : void 0,
           disableSchedule: Boolean(editing),
-          disableScheduleTooltip: editing ? "Scheduling is disabled while editing an existing schedule" : void 0
+          disableScheduleTooltip: editing ? "Scheduling is disabled while editing an existing schedule" : void 0,
+          theme,
+          colorMode
         },
         prefill.key
       ),
@@ -12718,7 +12802,9 @@ var AgentsView = ({
         onClose: () => setSelectedRun(null),
         run: selectedRun,
         apiBaseUrl: globalUrl,
-        onSchedule
+        onSchedule,
+        theme,
+        colorMode
       }
     ),
     /* @__PURE__ */ jsx24(
@@ -12730,7 +12816,9 @@ var AgentsView = ({
         globalUrl,
         localLLMSlot: effectiveLocalLLMSlot,
         permissionsSlot,
-        agentUIProps: { onSchedule, apiBaseUrl: globalUrl }
+        theme,
+        colorMode,
+        agentUIProps: { onSchedule, apiBaseUrl: globalUrl, theme, colorMode }
       }
     )
   ] });
@@ -12878,7 +12966,7 @@ function useAppLookup(appName) {
 
 // components/UsageBar.tsx
 import { Box as Box19, Typography as Typography18, Tooltip as Tooltip13 } from "@mui/material";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var fmt = (n) => n.toLocaleString();
 var UsageBar = ({
   label,
@@ -12895,8 +12983,8 @@ var UsageBar = ({
   const isWarn = pct >= 65 && !isOver;
   const accent = isOver ? "hsl(var(--destructive))" : isWarn ? "hsl(var(--severity-medium))" : "hsl(var(--muted-foreground))";
   const tooltipText = safeLimit > 0 ? `${pct.toFixed(0)}% used \xB7 ${fmt(usage)} / ${fmt(safeLimit)}${unit ? " " + unit : ""}${hint ? " \xB7 " + hint : ""}` : `${fmt(usage)}${unit ? " " + unit : ""}${hint ? " \xB7 " + hint : ""}`;
-  return /* @__PURE__ */ jsx25(Tooltip13, { title: tooltipText, placement: "top", arrow: true, children: /* @__PURE__ */ jsxs21(Box19, { sx: { display: "flex", flexDirection: "column", gap: 0.5, py: 0.25 }, children: [
-    /* @__PURE__ */ jsxs21(Box19, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1 }, children: [
+  return /* @__PURE__ */ jsx25(Tooltip13, { title: tooltipText, placement: "top", arrow: true, children: /* @__PURE__ */ jsxs22(Box19, { sx: { display: "flex", flexDirection: "column", gap: 0.5, py: 0.25 }, children: [
+    /* @__PURE__ */ jsxs22(Box19, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1 }, children: [
       /* @__PURE__ */ jsx25(
         Typography18,
         {
@@ -12909,7 +12997,7 @@ var UsageBar = ({
           children: label
         }
       ),
-      /* @__PURE__ */ jsxs21(Box19, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsxs22(Box19, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
         actionLabel && actionHref && (isWarn || isOver) && /* @__PURE__ */ jsx25(
           Box19,
           {
@@ -12966,7 +13054,7 @@ var withMcpTheme = (Inner, displayName) => {
   const Wrapped = ({ theme, colorMode, ...rest }) => React5.createElement(
     ShuffleMcpThemeProvider,
     { mode: resolveMode(theme, colorMode) },
-    React5.createElement(Inner, { ...rest })
+    React5.createElement(Inner, { ...rest, theme, colorMode })
   );
   Wrapped.displayName = `ShuffleMCPs(${displayName})`;
   return Wrapped;
@@ -12976,7 +13064,7 @@ var withMcpThemeRef = (Inner, displayName) => {
     ({ theme, colorMode, ...rest }, ref) => React5.createElement(
       ShuffleMcpThemeProvider,
       { mode: resolveMode(theme, colorMode) },
-      React5.createElement(Inner, { ...rest, ref })
+      React5.createElement(Inner, { ...rest, theme, colorMode, ref })
     )
   );
   Wrapped.displayName = `ShuffleMCPs(${displayName})`;