@shuffleio/shuffle-mcps 0.0.17 → 0.0.20

package/dist/index.js

@@ -362,21 +362,21 @@ var init_appsCache = __esm({
 var index_exports = {};
 __export(index_exports, {
   API_CONFIG: () => API_CONFIG,
-  AgentActivityList: () => AgentActivityList_default,
-  AgentExecutionDrawer: () => AgentExecutionDrawer_default,
+  AgentActivityList: () => AgentActivityList2,
+  AgentExecutionDrawer: () => AgentExecutionDrawer2,
   AgentIcon: () => AgentIcon_default,
-  AgentRunDiagnosisBanner: () => AgentRunDiagnosisBanner_default,
-  AgentRunDrawer: () => AgentRunDrawer_default,
-  AgentUI: () => AgentUI_default,
-  AgentsView: () => AgentsView_default,
-  AiAgentPromptsEditor: () => AiAgentPromptsEditor_default,
+  AgentRunDiagnosisBanner: () => AgentRunDiagnosisBanner2,
+  AgentRunDrawer: () => AgentRunDrawer2,
+  AgentUI: () => AgentUI2,
+  AgentsView: () => AgentsView2,
+  AiAgentPromptsEditor: () => AiAgentPromptsEditor2,
   AppAuthCard: () => AppAuthCard,
   AppAuthConfig: () => AppAuthConfig,
-  AppAuthSection: () => AppAuthSection,
-  AppDetailDrawer: () => AppDetailDrawer,
+  AppAuthSection: () => AppAuthSection2,
+  AppDetailDrawer: () => AppDetailDrawer2,
   AppDetailProvider: () => AppDetailProvider,
-  AppSearchDrawer: () => AppSearchDrawer,
-  AppTitleHeader: () => AppTitleHeader,
+  AppSearchDrawer: () => AppSearchDrawer2,
+  AppTitleHeader: () => AppTitleHeader2,
   CASES_PATTERNS: () => CASES_PATTERNS,
   COMMUNICATION_PATTERNS_NAMES: () => COMMUNICATION_PATTERNS_NAMES,
   DATASTORE_CATEGORIES: () => DATASTORE_CATEGORIES,
@@ -386,15 +386,15 @@ __export(index_exports, {
   INGEST_TICKETS_WORKFLOW_NAME: () => INGEST_TICKETS_WORKFLOW_NAME,
   IntegrationStatus: () => IntegrationStatus,
   SIEM_PATTERNS: () => SIEM_PATTERNS,
-  ShuffleMCP: () => ShuffleMCP,
+  ShuffleMCP: () => ShuffleMCP2,
   ShuffleMcpThemeProvider: () => ShuffleMcpThemeProvider,
-  ShufflePipelinesBanner: () => ShufflePipelinesBanner_default,
-  SingulActionsPreview: () => SingulActionsPreview_default,
+  ShufflePipelinesBanner: () => ShufflePipelinesBanner2,
+  SingulActionsPreview: () => SingulActionsPreview2,
   THREAT_INTEL_PATTERNS: () => THREAT_INTEL_PATTERNS,
-  TryMcpSection: () => TryMcpSection,
+  TryMcpSection: () => TryMcpSection2,
   UsageBar: () => UsageBar,
   VULN_SCANNER_PATTERNS: () => VULN_SCANNER_PATTERNS,
-  default: () => ShuffleMCP_default,
+  default: () => index_default,
   deleteDatastoreItem: () => deleteDatastoreItem,
   deleteDatastoreItems: () => deleteDatastoreItems,
   diagnoseOutputWarning: () => diagnoseOutputWarning,
@@ -449,12 +449,30 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_shuffle_mcp2 = require("./shuffle-mcp-CN72CJJQ.css");
+var import_react20 = __toESM(require("react"));
 
 // ShuffleMcpThemeProvider.tsx
 var import_react = __toESM(require("react"));
 var import_material = require("@mui/material");
 var import_jsx_runtime = require("react/jsx-runtime");
-var componentOverrides = {
+var readHtmlDarkClass = () => {
+  if (typeof document === "undefined") return false;
+  return document.documentElement.classList.contains("dark");
+};
+var useHtmlDarkClass = (enabled) => {
+  const [isDark, setIsDark] = import_react.default.useState(() => enabled ? readHtmlDarkClass() : false);
+  import_react.default.useEffect(() => {
+    if (!enabled || typeof document === "undefined") return;
+    setIsDark(readHtmlDarkClass());
+    const observer = new MutationObserver(() => setIsDark(readHtmlDarkClass()));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, [enabled]);
+  return isDark;
+};
+var ShuffleMcpThemeContext = import_react.default.createContext(null);
+var useShuffleMcpTheme = () => import_react.default.useContext(ShuffleMcpThemeContext);
+var buildComponentOverrides = (scopeClassName) => ({
   MuiTextField: { defaultProps: { size: "small" } },
   MuiButton: { defaultProps: { size: "small" } },
   MuiFormControl: { defaultProps: { size: "small" } },
@@ -496,7 +514,15 @@ var componentOverrides = {
       }
     }
   },
+  // ---- Portaled surfaces: stamp scopeClassName so HSL tokens resolve ----
+  MuiDrawer: {
+    defaultProps: { slotProps: { paper: { className: scopeClassName } } }
+  },
+  MuiDialog: {
+    defaultProps: { slotProps: { paper: { className: scopeClassName } } }
+  },
   MuiMenu: {
+    defaultProps: { slotProps: { paper: { className: scopeClassName } } },
     styleOverrides: {
       paper: {
         backgroundColor: "hsl(var(--popover))",
@@ -506,6 +532,7 @@ var componentOverrides = {
     }
   },
   MuiPopover: {
+    defaultProps: { slotProps: { paper: { className: scopeClassName } } },
     styleOverrides: {
       paper: {
         backgroundColor: "hsl(var(--popover))",
@@ -514,32 +541,23 @@ var componentOverrides = {
       }
     }
   },
+  MuiTooltip: {
+    defaultProps: { slotProps: { tooltip: { className: scopeClassName } } }
+  },
   MuiDivider: {
     styleOverrides: { root: { borderColor: "hsl(var(--border))" } }
   }
-};
-var readHtmlDarkClass = () => {
-  if (typeof document === "undefined") return false;
-  return document.documentElement.classList.contains("dark");
-};
-var useHtmlDarkClass = (enabled) => {
-  const [isDark, setIsDark] = import_react.default.useState(() => enabled ? readHtmlDarkClass() : false);
-  import_react.default.useEffect(() => {
-    if (!enabled || typeof document === "undefined") return;
-    setIsDark(readHtmlDarkClass());
-    const observer = new MutationObserver(() => setIsDark(readHtmlDarkClass()));
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
-    return () => observer.disconnect();
-  }, [enabled]);
-  return isDark;
-};
+});
 var ShuffleMcpThemeProvider = ({
   children,
   mode = "auto"
 }) => {
   const parent = (0, import_material.useTheme)();
+  const parentCtx = useShuffleMcpTheme();
   const htmlIsDark = useHtmlDarkClass(mode === "auto");
   const effectiveDark = mode === "auto" ? htmlIsDark : mode === "dark";
+  const sameAsParent = parentCtx !== null && parentCtx.isDark === effectiveDark;
+  const scopeClassName = effectiveDark ? "shuffle-mcp-scope dark" : "shuffle-mcp-scope";
   const merged = import_react.default.useMemo(
     () => (0, import_material.createTheme)({
       ...parent,
@@ -549,16 +567,19 @@ var ShuffleMcpThemeProvider = ({
       },
       components: {
         ...parent.components,
-        ...componentOverrides
+        ...buildComponentOverrides(scopeClassName)
       }
     }),
-    [parent, effectiveDark]
+    [parent, effectiveDark, scopeClassName]
+  );
+  const ctxValue = import_react.default.useMemo(
+    () => ({ mode, isDark: effectiveDark, scopeClassName }),
+    [mode, effectiveDark, scopeClassName]
   );
-  const tree = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ThemeProvider, { theme: merged, children });
-  if (mode === "light" || mode === "dark") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: mode === "dark" ? "dark" : "", "data-shuffle-mode": mode, children: tree });
+  if (sameAsParent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShuffleMcpThemeContext.Provider, { value: ctxValue, children });
   }
-  return tree;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShuffleMcpThemeContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ThemeProvider, { theme: merged, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: scopeClassName, "data-shuffle-mode": mode, "data-shuffle-mcp-root": true, children }) }) });
 };
 
 // ShuffleMCP.tsx
@@ -5948,19 +5969,32 @@ init_appsCache();
 var React2 = __toESM(require("react"));
 var import_framer_motion7 = require("framer-motion");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var cn = (...inputs) => inputs.filter(Boolean).join(" ");
-var sizeClasses = {
+var SIZE = {
   sm: {
-    container: "p-0.5 text-[11px]",
-    item: "px-2.5 py-1 gap-1.5",
-    count: "min-w-[16px] h-[16px] px-1 text-[10px]",
-    divider: "h-4 mx-0.5"
+    containerPadding: "2px",
+    fontSize: "11px",
+    itemPaddingY: "4px",
+    itemPaddingX: "10px",
+    itemGap: "6px",
+    countMin: "16px",
+    countH: "16px",
+    countPx: "4px",
+    countFs: "10px",
+    dividerH: "16px",
+    dividerMx: "2px"
   },
   md: {
-    container: "p-1 text-xs",
-    item: "px-3 py-1.5 gap-1.5",
-    count: "min-w-[18px] h-[18px] px-1.5 text-[10px]",
-    divider: "h-5 mx-1"
+    containerPadding: "4px",
+    fontSize: "12px",
+    itemPaddingY: "6px",
+    itemPaddingX: "12px",
+    itemGap: "6px",
+    countMin: "18px",
+    countH: "18px",
+    countPx: "6px",
+    countFs: "10px",
+    dividerH: "20px",
+    dividerMx: "4px"
   }
 };
 var uid = 0;
@@ -5984,25 +6018,36 @@ function SegmentedControl({
 }) {
   const autoId = useUniqueId("segmented");
   const groupId = layoutId ?? autoId;
-  const s = sizeClasses[size];
+  const s = SIZE[size];
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_framer_motion7.LayoutGroup, { id: groupId, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       role: "tablist",
       "aria-label": ariaLabel,
-      className: cn(
-        "inline-flex items-center gap-0.5 rounded-full",
-        variant === "outline" ? "border border-border bg-transparent" : "border border-transparent bg-muted/40",
-        s.container,
-        className
-      ),
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "2px",
+        borderRadius: 9999,
+        padding: s.containerPadding,
+        fontSize: s.fontSize,
+        border: variant === "outline" ? "1px solid hsl(var(--border))" : "1px solid transparent",
+        background: variant === "outline" ? "transparent" : "hsl(var(--muted) / 0.4)"
+      },
       children: options.map((opt, i) => {
         if (opt.type === "divider") {
           return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "span",
             {
               "aria-hidden": true,
-              className: cn("w-px bg-border self-center", s.divider)
+              style: {
+                width: 1,
+                height: s.dividerH,
+                margin: `0 ${s.dividerMx}`,
+                background: "hsl(var(--border))",
+                alignSelf: "center"
+              }
             },
             opt.key ?? `divider-${i}`
           );
@@ -6024,20 +6069,46 @@ function SegmentedControl({
               if (isAction) opt.onClick();
               else onChange(opt.value);
             },
-            className: cn(
-              "relative inline-flex items-center rounded-full font-medium",
-              "transition-colors duration-300",
-              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              s.item,
-              active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
-              opt.disabled && "opacity-50 cursor-not-allowed"
-            ),
+            style: {
+              position: "relative",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: s.itemGap,
+              padding: `${s.itemPaddingY} ${s.itemPaddingX}`,
+              borderRadius: 9999,
+              fontWeight: 500,
+              fontSize: s.fontSize,
+              background: "transparent",
+              border: "none",
+              cursor: opt.disabled ? "not-allowed" : "pointer",
+              color: active ? "hsl(var(--foreground))" : "hsl(var(--muted-foreground))",
+              opacity: opt.disabled ? 0.5 : 1,
+              transition: "color 200ms ease",
+              outline: "none",
+              fontFamily: "inherit"
+            },
+            onMouseEnter: (e) => {
+              if (!active && !opt.disabled) {
+                e.currentTarget.style.color = "hsl(var(--foreground))";
+              }
+            },
+            onMouseLeave: (e) => {
+              if (!active && !opt.disabled) {
+                e.currentTarget.style.color = "hsl(var(--muted-foreground))";
+              }
+            },
             children: [
               active && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 import_framer_motion7.motion.span,
                 {
                   layoutId: `${groupId}-pill`,
-                  className: "absolute inset-0 rounded-full bg-muted border border-border",
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    borderRadius: 9999,
+                    background: "hsl(var(--muted))",
+                    border: "1px solid hsl(var(--border))"
+                  },
                   initial: false,
                   transition: {
                     type: "spring",
@@ -6046,15 +6117,39 @@ function SegmentedControl({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "relative z-10 inline-flex items-center gap-1.5", children: opt.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "span",
+                {
+                  style: {
+                    position: "relative",
+                    zIndex: 1,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: s.itemGap
+                  },
+                  children: opt.label
+                }
+              ),
               !isAction && typeof opt.count === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "span",
                 {
-                  className: cn(
-                    "relative z-10 inline-flex items-center justify-center rounded-md font-semibold tabular-nums border border-border/60",
-                    s.count,
-                    active ? "bg-transparent text-foreground" : "bg-transparent text-muted-foreground"
-                  ),
+                  style: {
+                    position: "relative",
+                    zIndex: 1,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minWidth: s.countMin,
+                    height: s.countH,
+                    padding: `0 ${s.countPx}`,
+                    fontSize: s.countFs,
+                    fontWeight: 600,
+                    fontVariantNumeric: "tabular-nums",
+                    borderRadius: 6,
+                    border: "1px solid hsl(var(--border) / 0.6)",
+                    color: active ? "hsl(var(--foreground))" : "hsl(var(--muted-foreground))",
+                    background: "transparent"
+                  },
                   children: opt.count
                 }
               )
@@ -6615,7 +6710,6 @@ var ShuffleMCP = import_react12.default.forwardRef(({
   );
 });
 ShuffleMCP.displayName = "ShuffleMCP";
-var ShuffleMCP_default = ShuffleMCP;
 
 // AppSearchDrawer.tsx
 var import_react13 = require("react");
@@ -6958,7 +7052,7 @@ function AppSearchDrawer({
                     transition: { duration: 0.2 },
                     style: { height: "100%", minHeight: 0 },
                     children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                      ShuffleMCP,
+                      ShuffleMCP2,
                       {
                         apiKey: API_CONFIG.apiKey || void 0,
                         apiBaseUrl: API_CONFIG.baseUrl,
@@ -7007,7 +7101,7 @@ function AppSearchDrawer({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      AppDetailDrawer,
+      AppDetailDrawer2,
       {
         open: open && detailAppName !== null,
         onClose: () => {
@@ -9007,6 +9101,8 @@ var AgentUI = ({
   appPickerLabel = "Select Apps",
   appPickerTitle = "Select Apps",
   appPickerSubtitle = "Pick the tools the agent is allowed to use for this run",
+  onChooseLLM,
+  hideChooseLLM = false,
   submitTooltip = "\u2318+Enter to send",
   submitIcon,
   submitOverride,
@@ -10859,15 +10955,25 @@ var AgentUI = ({
                     bgcolor: "hsl(var(--card))",
                     maxWidth: "100%"
                   }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Tooltip, { title: "Configure the local LLM used for this agent", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                    !hideChooseLLM && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Tooltip, { title: "Configure the local LLM used for this agent", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                       import_material16.Box,
                       {
                         component: "button",
                         type: "button",
                         onClick: () => {
-                          if (typeof window !== "undefined") {
-                            window.dispatchEvent(
-                              new CustomEvent("agent-drawer-open", { detail: { tab: "localLLM" } })
+                          if (onChooseLLM) {
+                            onChooseLLM();
+                            return;
+                          }
+                          if (typeof window === "undefined") return;
+                          const evt = new CustomEvent("agent-drawer-open", {
+                            detail: { tab: "localLLM" },
+                            cancelable: true
+                          });
+                          const handled = window.dispatchEvent(evt);
+                          if (handled && !window.__shuffleAgentDrawerMounted) {
+                            console.warn(
+                              '[AgentUI] "Choose LLM" was clicked but no host handler is wired. Pass an `onChooseLLM` prop, mount the bundled `AgentRunDrawer`, or set `hideChooseLLM` to remove the chip.'
                             );
                           }
                         },
@@ -11630,6 +11736,13 @@ var AgentRunDrawer = ({
     if (open && !prevOpenRef.current) setActiveTab(initialTab);
     prevOpenRef.current = open;
   }, [open, initialTab]);
+  (0, import_react16.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    window.__shuffleAgentDrawerMounted = (window.__shuffleAgentDrawerMounted || 0) + 1;
+    return () => {
+      window.__shuffleAgentDrawerMounted = Math.max(0, (window.__shuffleAgentDrawerMounted || 1) - 1);
+    };
+  }, []);
   const visibleTabs = TAB_ORDER.filter((t) => {
     if (t === "run") return true;
     if (t === "permissions") return !!permissionsSlot;
@@ -12734,7 +12847,19 @@ var AgentExecutionDrawer_default = AgentExecutionDrawer;
 var import_react18 = require("react");
 var import_material20 = require("@mui/material");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn, userdata, serverside }) => {
+var AgentsView = ({
+  onSchedule,
+  maxWidth = 820,
+  onChooseLLM,
+  hideChooseLLM,
+  localLLMSlot,
+  permissionsSlot,
+  globalUrl,
+  isLoaded,
+  isLoggedIn,
+  userdata,
+  serverside
+}) => {
   useSyncHostBaseUrl(globalUrl);
   const [selectedRun, setSelectedRun] = (0, import_react18.useState)(null);
   const [agentView, setAgentView] = (0, import_react18.useState)("start");
@@ -12744,6 +12869,33 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
     key: 0
   });
   const [editing, setEditing] = (0, import_react18.useState)(null);
+  const [builtInDrawer, setBuiltInDrawer] = (0, import_react18.useState)({
+    open: false,
+    tab: "localLLM"
+  });
+  const effectiveLocalLLMSlot = (0, import_react18.useMemo)(
+    () => localLLMSlot ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material20.Box, { sx: { p: 3, color: "hsl(var(--muted-foreground))", fontSize: "0.85rem", lineHeight: 1.6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material20.Typography, { 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",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("code", { style: { fontFamily: "monospace" }, children: "onChooseLLM" }),
+      " handler or a",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("code", { style: { fontFamily: "monospace" }, children: "localLLMSlot" }),
+      " to",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("code", { style: { fontFamily: "monospace" }, children: "<AgentsView />" }),
+      " to render your own configuration UI here."
+    ] }),
+    [localLLMSlot]
+  );
+  const handleChooseLLM = (0, import_react18.useCallback)(() => {
+    if (onChooseLLM) {
+      onChooseLLM();
+      return;
+    }
+    setBuiltInDrawer({ open: true, tab: "localLLM" });
+  }, [onChooseLLM]);
   const handleEditWorkflow = (0, import_react18.useCallback)(
     ({ workflowId, name, prompt, apps }) => {
       setEditing({ workflowId, name });
@@ -12776,8 +12928,8 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
     },
     [editing]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material20.Box, { sx: { minHeight: "100vh", width: "100%", px: { xs: 2, md: 4 }, pt: "5vh", pb: 6 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material20.Stack, { spacing: 6, sx: { maxWidth, mx: "auto" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material20.Box, { sx: { minHeight: "100%", width: "100%", px: { xs: 2, md: 4 }, pt: { xs: 3, md: "5vh" }, pb: 6, boxSizing: "border-box" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material20.Stack, { spacing: 6, sx: { maxWidth, mx: "auto", width: "100%" }, children: [
       editing && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         import_material20.Box,
         {
@@ -12824,6 +12976,8 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
           apiBaseUrl: globalUrl,
           onViewChange: setAgentView,
           onSchedule,
+          onChooseLLM: handleChooseLLM,
+          hideChooseLLM,
           defaultInput: prefill.input,
           defaultApps: prefill.apps.length > 0 ? prefill.apps : void 0,
           submitOverride: editing ? handleSaveEdit : void 0,
@@ -12834,7 +12988,7 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
         },
         prefill.key
       ),
-      agentView === "start" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material20.Box, { sx: { pt: "12vh" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      agentView === "start" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material20.Box, { sx: { pt: { xs: 4, md: "8vh" } }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         AgentActivityList_default,
         {
           apiBaseUrl: globalUrl,
@@ -12852,6 +13006,18 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
         apiBaseUrl: globalUrl,
         onSchedule
       }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      AgentRunDrawer_default,
+      {
+        open: builtInDrawer.open,
+        onClose: () => setBuiltInDrawer((s) => ({ ...s, open: false })),
+        initialTab: builtInDrawer.tab,
+        globalUrl,
+        localLLMSlot: effectiveLocalLLMSlot,
+        permissionsSlot,
+        agentUIProps: { onSchedule, apiBaseUrl: globalUrl }
+      }
     )
   ] });
 };
@@ -13082,6 +13248,49 @@ var UsageBar = ({
     ) })
   ] }) });
 };
+
+// index.ts
+var resolveMode = (theme, colorMode) => {
+  if (theme === "light" || theme === "dark") return theme;
+  if (theme === "system") return "auto";
+  return colorMode ?? "auto";
+};
+var withMcpTheme = (Inner, displayName) => {
+  const Wrapped = ({ theme, colorMode, ...rest }) => import_react20.default.createElement(
+    ShuffleMcpThemeProvider,
+    { mode: resolveMode(theme, colorMode) },
+    import_react20.default.createElement(Inner, { ...rest })
+  );
+  Wrapped.displayName = `ShuffleMCPs(${displayName})`;
+  return Wrapped;
+};
+var withMcpThemeRef = (Inner, displayName) => {
+  const Wrapped = import_react20.default.forwardRef(
+    ({ theme, colorMode, ...rest }, ref) => import_react20.default.createElement(
+      ShuffleMcpThemeProvider,
+      { mode: resolveMode(theme, colorMode) },
+      import_react20.default.createElement(Inner, { ...rest, ref })
+    )
+  );
+  Wrapped.displayName = `ShuffleMCPs(${displayName})`;
+  return Wrapped;
+};
+var ShuffleMCP2 = withMcpThemeRef(ShuffleMCP, "ShuffleMCP");
+var index_default = ShuffleMCP2;
+var AppDetailDrawer2 = withMcpTheme(AppDetailDrawer, "AppDetailDrawer");
+var AppSearchDrawer2 = withMcpTheme(AppSearchDrawer, "AppSearchDrawer");
+var AiAgentPromptsEditor2 = withMcpTheme(AiAgentPromptsEditor_default, "AiAgentPromptsEditor");
+var ShufflePipelinesBanner2 = withMcpTheme(ShufflePipelinesBanner_default, "ShufflePipelinesBanner");
+var AppTitleHeader2 = withMcpTheme(AppTitleHeader, "AppTitleHeader");
+var AppAuthSection2 = withMcpTheme(AppAuthSection, "AppAuthSection");
+var TryMcpSection2 = withMcpTheme(TryMcpSection, "TryMcpSection");
+var SingulActionsPreview2 = withMcpTheme(SingulActionsPreview_default, "SingulActionsPreview");
+var AgentUI2 = withMcpTheme(AgentUI_default, "AgentUI");
+var AgentRunDrawer2 = withMcpTheme(AgentRunDrawer_default, "AgentRunDrawer");
+var AgentActivityList2 = withMcpTheme(AgentActivityList_default, "AgentActivityList");
+var AgentExecutionDrawer2 = withMcpTheme(AgentExecutionDrawer_default, "AgentExecutionDrawer");
+var AgentsView2 = withMcpTheme(AgentsView_default, "AgentsView");
+var AgentRunDiagnosisBanner2 = withMcpTheme(AgentRunDiagnosisBanner_default, "AgentRunDiagnosisBanner");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   API_CONFIG,