@shuffleio/shuffle-mcps 0.0.17 → 0.0.18

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,6 +449,7 @@ __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"));
@@ -535,7 +536,7 @@ var useHtmlDarkClass = (enabled) => {
 };
 var ShuffleMcpThemeProvider = ({
   children,
-  mode = "auto"
+  mode = "dark"
 }) => {
   const parent = (0, import_material.useTheme)();
   const htmlIsDark = useHtmlDarkClass(mode === "auto");
@@ -555,10 +556,11 @@ var ShuffleMcpThemeProvider = ({
     [parent, effectiveDark]
   );
   const tree = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ThemeProvider, { theme: merged, children });
+  const scopeClassName = mode === "light" ? "shuffle-mcp-scope" : "shuffle-mcp-scope dark";
   if (mode === "light" || mode === "dark") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: mode === "dark" ? "dark" : "", "data-shuffle-mode": mode, children: tree });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: scopeClassName, "data-shuffle-mode": mode, "data-shuffle-mcp-root": true, children: tree });
   }
-  return tree;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shuffle-mcp-scope", "data-shuffle-mode": "auto", "data-shuffle-mcp-root": true, children: tree });
 };
 
 // ShuffleMCP.tsx
@@ -5948,19 +5950,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 +5999,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 +6050,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 +6098,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 +6691,6 @@ var ShuffleMCP = import_react12.default.forwardRef(({
   );
 });
 ShuffleMCP.displayName = "ShuffleMCP";
-var ShuffleMCP_default = ShuffleMCP;
 
 // AppSearchDrawer.tsx
 var import_react13 = require("react");
@@ -6958,7 +7033,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 +7082,7 @@ function AppSearchDrawer({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      AppDetailDrawer,
+      AppDetailDrawer2,
       {
         open: open && detailAppName !== null,
         onClose: () => {
@@ -9007,6 +9082,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 +10936,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 +11717,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 +12828,7 @@ 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, globalUrl, isLoaded, isLoggedIn, userdata, serverside }) => {
   useSyncHostBaseUrl(globalUrl);
   const [selectedRun, setSelectedRun] = (0, import_react18.useState)(null);
   const [agentView, setAgentView] = (0, import_react18.useState)("start");
@@ -12776,8 +12870,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 +12918,8 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
           apiBaseUrl: globalUrl,
           onViewChange: setAgentView,
           onSchedule,
+          onChooseLLM,
+          hideChooseLLM,
           defaultInput: prefill.input,
           defaultApps: prefill.apps.length > 0 ? prefill.apps : void 0,
           submitOverride: editing ? handleSaveEdit : void 0,
@@ -12834,7 +12930,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,
@@ -13082,6 +13178,44 @@ var UsageBar = ({
     ) })
   ] }) });
 };
+
+// index.ts
+var withMcpTheme = (Inner, displayName) => {
+  const Wrapped = ({ colorMode, ...rest }) => import_react20.default.createElement(
+    ShuffleMcpThemeProvider,
+    { mode: colorMode },
+    import_react20.default.createElement(Inner, { ...rest })
+  );
+  Wrapped.displayName = `ShuffleMCPs(${displayName})`;
+  return Wrapped;
+};
+var withMcpThemeRef = (Inner, displayName) => {
+  const Wrapped = import_react20.default.forwardRef(
+    ({ colorMode, ...rest }, ref) => import_react20.default.createElement(
+      ShuffleMcpThemeProvider,
+      { mode: 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,