@shuffleio/shuffle-mcps 0.0.66 → 0.0.68

package/dist/index.js

@@ -1134,7 +1134,7 @@ __export(index_exports, {
   AgentActivityList: () => AgentActivityList2,
   AgentExecutionDrawer: () => AgentExecutionDrawer2,
   AgentIcon: () => AgentIcon_default,
-  AgentPresets: () => AgentPresets,
+  AgentPresets: () => AgentPresets2,
   AgentPromptPrefixChip: () => AgentPromptPrefixChip,
   AgentRunDiagnosisBanner: () => AgentRunDiagnosisBanner2,
   AgentRunDrawer: () => AgentRunDrawer2,
@@ -1183,10 +1183,12 @@ __export(index_exports, {
   buildSupportEscalationUrl: () => buildSupportEscalationUrl,
   clearPageContextChoice: () => clearPageContextChoice,
   copyToClipboard: () => copyToClipboard,
+  darkTokenStyle: () => darkTokenStyle,
   default: () => index_default,
   deleteDatastoreItem: () => deleteDatastoreItem,
   deleteDatastoreItems: () => deleteDatastoreItems,
   diagnoseOutputWarning: () => diagnoseOutputWarning,
+  ensureShuffleMcpStyles: () => ensureShuffleMcpStyles,
   extractActionAppNames: () => extractActionAppNames,
   extractValidatedIngestionApps: () => extractValidatedIngestionApps,
   extractWorkflowActionAppNames: () => extractWorkflowActionAppNames,
@@ -1228,6 +1230,7 @@ __export(index_exports, {
   isThreatIntelApp: () => isThreatIntelApp,
   isVulnScannerApp: () => isVulnScannerApp,
   isWorkflowScheduleStopped: () => isWorkflowScheduleStopped,
+  lightTokenStyle: () => lightTokenStyle,
   mapCloudRegionUrl: () => mapCloudRegionUrl,
   matchRoutePattern: () => matchRoutePattern,
   mergeConnectedTools: () => mergeConnectedTools,
@@ -1269,7 +1272,6 @@ __export(index_exports, {
   uuid: () => uuid
 });
 module.exports = __toCommonJS(index_exports);
-var import_shuffle_mcp2 = require("./shuffle-mcp-LXISGW4I.css");
 
 // ../lib/crypto-polyfill.ts
 var getGlobalCrypto = () => {
@@ -1601,8 +1603,213 @@ var import_react_query = require("@tanstack/react-query");
 // ShuffleMcpThemeProvider.tsx
 var import_react = __toESM(require("react"));
 var import_material = require("@mui/material");
-var import_shuffle_mcp = require("./shuffle-mcp-LXISGW4I.css");
+var import_shuffle_mcp = require("./shuffle-mcp-ML4YQTUP.css");
 var import_jsx_runtime = require("react/jsx-runtime");
+var lightTokenStyle = {
+  "--background": "0 0% 98%",
+  "--background-elevated": "0 0% 100%",
+  "--background-surface": "0 0% 96%",
+  "--foreground": "0 0% 9%",
+  "--foreground-muted": "0 0% 40%",
+  "--card": "0 0% 100%",
+  "--card-foreground": "0 0% 9%",
+  "--popover": "0 0% 100%",
+  "--popover-foreground": "0 0% 9%",
+  "--primary": "22 100% 50%",
+  "--primary-foreground": "0 0% 100%",
+  "--secondary": "0 0% 94%",
+  "--secondary-foreground": "0 0% 9%",
+  "--muted": "0 0% 94%",
+  "--muted-foreground": "0 0% 45%",
+  "--accent": "0 0% 92%",
+  "--accent-foreground": "0 0% 9%",
+  "--destructive": "0 84% 60%",
+  "--destructive-foreground": "0 0% 100%",
+  "--border": "0 0% 80%",
+  "--border-subtle": "0 0% 86%",
+  "--input": "0 0% 94%",
+  "--ring": "22 100% 50%",
+  "--severity-critical": "0 84% 60%",
+  "--severity-high": "12 92% 52%",
+  "--severity-medium": "45 93% 47%",
+  "--severity-low": "142 71% 45%",
+  "--severity-info": "210 100% 56%",
+  "--sidebar-background": "0 0% 97%",
+  "--sidebar-foreground": "0 0% 9%",
+  "--sidebar-accent": "0 0% 94%",
+  "--sidebar-accent-foreground": "0 0% 9%",
+  "--sidebar-border": "0 0% 80%",
+  "--gradient-card": "linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%)"
+};
+var darkTokenStyle = {
+  ...lightTokenStyle,
+  "--background": "0 0% 10%",
+  "--background-elevated": "0 0% 13%",
+  "--background-surface": "0 0% 16%",
+  "--foreground": "0 0% 100%",
+  "--foreground-muted": "0 0% 60%",
+  "--card": "0 0% 13%",
+  "--card-foreground": "0 0% 100%",
+  "--popover": "0 0% 12%",
+  "--popover-foreground": "0 0% 100%",
+  "--secondary": "0 0% 18%",
+  "--secondary-foreground": "0 0% 100%",
+  "--muted": "0 0% 16%",
+  "--muted-foreground": "0 0% 50%",
+  "--accent": "0 0% 20%",
+  "--accent-foreground": "0 0% 100%",
+  "--destructive": "0 84% 60%",
+  "--destructive-foreground": "0 0% 100%",
+  "--border": "0 0% 20%",
+  "--border-subtle": "0 0% 16%",
+  "--input": "0 0% 18%",
+  "--sidebar-background": "0 0% 9%",
+  "--sidebar-foreground": "0 0% 100%",
+  "--sidebar-accent": "0 0% 16%",
+  "--sidebar-accent-foreground": "0 0% 100%",
+  "--sidebar-border": "0 0% 16%",
+  "--gradient-card": "linear-gradient(145deg, hsl(0 0% 14%) 0%, hsl(0 0% 12%) 100%)"
+};
+var SHUFFLE_MCP_BASE_CSS = `
+:where(:root) {
+  --background: 0 0% 10%;
+  --background-elevated: 0 0% 13%;
+  --background-surface: 0 0% 16%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 13%;
+  --card-foreground: 0 0% 100%;
+  --popover: 0 0% 13%;
+  --popover-foreground: 0 0% 100%;
+  --primary: 22 100% 50%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 16%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 65%;
+  --accent: 22 100% 50%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 20%;
+  --input: 0 0% 16%;
+  --ring: 22 100% 50%;
+  --severity-info: 210 90% 60%;
+  --severity-low: 142 70% 45%;
+  --severity-medium: 38 92% 50%;
+  --severity-high: 12 92% 52%;
+  --severity-critical: 0 84% 60%;
+  --infra-email: 210 90% 60%;
+}
+
+.shuffle-mcp-scope,
+.shuffle-mcp-scope *,
+.shuffle-mcp-scope *::before,
+.shuffle-mcp-scope *::after {
+  box-sizing: border-box;
+}
+
+.shuffle-mcp-scope {
+  color: hsl(var(--foreground));
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  isolation: isolate;
+}
+
+:root:not(.dark) .shuffle-mcp-scope:not(.dark),
+html:not(.dark) .shuffle-mcp-scope:not(.dark),
+body:not(.dark) .shuffle-mcp-scope:not(.dark),
+.shuffle-mcp-scope.light,
+[data-shuffle-mode="light"] .shuffle-mcp-scope,
+[data-shuffle-mode="light"] {
+  --background: 0 0% 98%;
+  --background-elevated: 0 0% 100%;
+  --background-surface: 0 0% 96%;
+  --foreground: 0 0% 9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 9%;
+  --secondary: 0 0% 94%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 94%;
+  --muted-foreground: 0 0% 40%;
+  --accent: 0 0% 92%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 78%;
+  --input: 0 0% 94%;
+  --severity-info: 215 90% 45%;
+  --severity-low: 142 72% 31%;
+  --severity-medium: 38 92% 33%;
+  --severity-high: 12 88% 46%;
+  --severity-critical: 0 72% 51%;
+  --infra-email: 215 90% 45%;
+}
+
+.dark .shuffle-mcp-scope:not(.light),
+.shuffle-mcp-scope.dark,
+[data-shuffle-mode="dark"] .shuffle-mcp-scope,
+[data-shuffle-mode="dark"] {
+  --background: 0 0% 10%;
+  --background-elevated: 0 0% 13%;
+  --background-surface: 0 0% 16%;
+  --foreground: 0 0% 100%;
+  --card: 0 0% 13%;
+  --card-foreground: 0 0% 100%;
+  --popover: 0 0% 12%;
+  --popover-foreground: 0 0% 100%;
+  --secondary: 0 0% 18%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 50%;
+  --accent: 0 0% 20%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 20%;
+  --input: 0 0% 18%;
+}
+
+.MuiTooltip-tooltip.shuffle-mcp-scope {
+  background-color: hsl(var(--popover)) !important;
+  color: hsl(var(--popover-foreground)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
+  border-radius: 8px !important;
+}
+
+.MuiTooltip-tooltip.shuffle-mcp-scope .MuiTooltip-arrow {
+  color: hsl(var(--popover)) !important;
+}
+
+.MuiTooltip-tooltip.shuffle-mcp-scope .MuiTooltip-arrow::before {
+  border: 1px solid hsl(var(--border)) !important;
+  box-sizing: border-box;
+}
+
+@keyframes singul-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes singul-skeleton-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.8; }
+}
+`;
+var ensureShuffleMcpStyles = () => {
+  if (typeof document === "undefined") return;
+  const STYLE_ID = "shuffle-mcp-injected-styles";
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = SHUFFLE_MCP_BASE_CSS;
+  document.head.appendChild(style);
+};
+if (typeof document !== "undefined") {
+  ensureShuffleMcpStyles();
+}
 var readHtmlDarkClass = () => {
   if (typeof document === "undefined") return false;
   return document.documentElement.classList.contains("dark") || Boolean(document.body) && document.body.classList.contains("dark");
@@ -1648,19 +1855,20 @@ var useAutoDarkClass = (enabled, anchorRef) => {
 };
 var ShuffleMcpThemeContext = import_react.default.createContext(null);
 var useShuffleMcpTheme = () => import_react.default.useContext(ShuffleMcpThemeContext);
-var buildComponentOverrides = (scopeClassName) => ({
+var buildComponentOverrides = (scopeClassName, scopeStyle) => ({
   MuiButton: { defaultProps: { size: "small" } },
   MuiAutocomplete: {
     defaultProps: {
       slotProps: {
-        popper: { className: scopeClassName, sx: { zIndex: 10040 } },
-        paper: { className: scopeClassName }
+        popper: { className: scopeClassName, style: scopeStyle, sx: { zIndex: 10040 } },
+        paper: { className: scopeClassName, style: scopeStyle }
       }
     }
   },
   MuiPopper: {
     defaultProps: {
-      className: scopeClassName
+      className: scopeClassName,
+      style: scopeStyle
     },
     styleOverrides: {
       root: { zIndex: 10040 }
@@ -1700,9 +1908,9 @@ var buildComponentOverrides = (scopeClassName) => ({
       }
     }
   },
-  // ---- Portaled surfaces: stamp scopeClassName so HSL tokens resolve ----
+  // ---- Portaled surfaces: stamp scopeClassName and scopeStyle so HSL tokens resolve ----
   MuiDrawer: {
-    defaultProps: { slotProps: { paper: { className: scopeClassName } } },
+    defaultProps: { slotProps: { paper: { className: scopeClassName, style: scopeStyle } } },
     styleOverrides: {
       paper: {
         backgroundColor: "hsl(var(--sidebar-background, var(--card)))",
@@ -1712,7 +1920,7 @@ var buildComponentOverrides = (scopeClassName) => ({
     }
   },
   MuiDialog: {
-    defaultProps: { slotProps: { paper: { className: scopeClassName } } },
+    defaultProps: { slotProps: { paper: { className: scopeClassName, style: scopeStyle } } },
     styleOverrides: {
       root: { zIndex: 10010 },
       paper: {
@@ -1724,7 +1932,7 @@ var buildComponentOverrides = (scopeClassName) => ({
     }
   },
   MuiMenu: {
-    defaultProps: { slotProps: { paper: { className: scopeClassName } } },
+    defaultProps: { slotProps: { paper: { className: scopeClassName, style: scopeStyle } } },
     styleOverrides: {
       root: { zIndex: 10040 },
       paper: {
@@ -1736,7 +1944,7 @@ var buildComponentOverrides = (scopeClassName) => ({
     }
   },
   MuiPopover: {
-    defaultProps: { slotProps: { paper: { className: scopeClassName } } },
+    defaultProps: { slotProps: { paper: { className: scopeClassName, style: scopeStyle } } },
     styleOverrides: {
       root: { zIndex: 10040 },
       paper: {
@@ -1750,7 +1958,7 @@ var buildComponentOverrides = (scopeClassName) => ({
   MuiTooltip: {
     defaultProps: {
       slotProps: {
-        tooltip: { className: scopeClassName },
+        tooltip: { className: scopeClassName, style: scopeStyle },
         // Render above app drawers, dialogs, menus, and popovers.
         popper: { sx: { zIndex: 10050 } }
       }
@@ -1789,6 +1997,7 @@ var ShuffleMcpThemeProvider = ({
   const sameAsParent = parentCtx !== null && parentCtx.isDark === effectiveDark;
   const scopeClassName = effectiveDark ? "shuffle-mcp-scope dark" : "shuffle-mcp-scope light";
   const resolvedModeAttr = effectiveDark ? "dark" : "light";
+  const scopeStyle = effectiveDark ? darkTokenStyle : lightTokenStyle;
   const merged = import_react.default.useMemo(
     () => (0, import_material.createTheme)({
       ...parent,
@@ -1798,22 +2007,25 @@ var ShuffleMcpThemeProvider = ({
       },
       components: {
         ...parent.components,
-        ...buildComponentOverrides(scopeClassName)
+        ...buildComponentOverrides(scopeClassName, scopeStyle)
       }
     }),
-    [parent, effectiveDark, scopeClassName]
+    [parent, effectiveDark, scopeClassName, scopeStyle]
   );
   const ctxValue = import_react.default.useMemo(
     () => ({ mode, isDark: effectiveDark, scopeClassName }),
     [mode, effectiveDark, scopeClassName]
   );
+  import_react.default.useEffect(() => {
+    ensureShuffleMcpStyles();
+  }, []);
   if (sameAsParent) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ShuffleMcpThemeContext.Provider, { value: ctxValue, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: anchorRef, style: { display: "none" }, "aria-hidden": true }),
       children2
     ] });
   }
-  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.jsxs)("div", { className: scopeClassName, "data-shuffle-mode": resolvedModeAttr, "data-shuffle-mcp-root": true, children: [
+  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.jsxs)("div", { className: scopeClassName, style: scopeStyle, "data-shuffle-mode": resolvedModeAttr, "data-shuffle-mcp-root": true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: anchorRef, style: { display: "none" }, "aria-hidden": true }),
     children2
   ] }) }) });
@@ -2276,11 +2488,23 @@ var setDatastoreItems = async (items, category) => {
       `[datastore.setMany] category=${category} unchanged keys: ${okParsed.keysExisted.filter((k) => !k.changed).map((k) => k.key).join(", ")}`
     );
   }
+  if (okParsed.success === false) {
+    const fallbackResults = await Promise.all(items.map(
+      (item) => setDatastoreItem(item.key, item.value, category)
+    ));
+    const failedWrites = fallbackResults.filter((result) => !result.success);
+    if (failedWrites.length > 0) {
+      return {
+        success: false,
+        error: failedWrites[0]?.error || "Backend reported success=false for bulk datastore write"
+      };
+    }
+    return { success: true };
+  }
   return {
-    success: okParsed.success !== false,
+    success: true,
     keysExisted: okParsed.keysExisted,
-    changed: okParsed.keysExisted ? okParsed.keysExisted.some((k) => k.changed) : void 0,
-    ...okParsed.success === false ? { error: "Backend reported success=false for bulk datastore write" } : {}
+    changed: okParsed.keysExisted ? okParsed.keysExisted.some((k) => k.changed) : void 0
   };
 };
 var getDatastoreItem = async (key, category, overrideOrgId, options) => {
@@ -4871,7 +5095,14 @@ var getOverlayStack = () => {
   if (!Array.isArray(store[STACK_KEY])) {
     store[STACK_KEY] = [];
   }
-  return store[STACK_KEY];
+  const stack = store[STACK_KEY];
+  for (let i = stack.length - 1; i >= 0; i--) {
+    const el = stack[i].element;
+    if (el && !el.isConnected) {
+      stack.splice(i, 1);
+    }
+  }
+  return stack;
 };
 var getTopSurfaceZIndex = (base2 = OVERLAY_BASE) => {
   const stack = getOverlayStack();
@@ -4955,7 +5186,23 @@ var isChildPopupElement = (el) => {
   if (!(el instanceof HTMLElement)) return false;
   return el.classList.contains("MuiPopover-root") || el.classList.contains("MuiMenu-root") || el.classList.contains("MuiAutocomplete-popper") || Boolean(el.closest("[data-radix-popper-content-wrapper]")) || el.classList.contains("MuiPopper-root") && !el.classList.contains("MuiTooltip-popper");
 };
-var isShuffleOwnedOverlay = (el) => el.classList.contains("shuffle-core-scope") || el.classList.contains("shuffle-mcp-scope") || el.querySelector(".shuffle-core-scope, .shuffle-mcp-scope") !== null || el.closest("[data-radix-portal]") !== null || el.hasAttribute("data-shuffle-layer") || el.querySelector("[data-shuffle-layer]") !== null || getOverlayStack().some((r) => r.type === "surface") && isChildPopupElement(el);
+var SHUFFLE_SCOPE_SELECTOR = ".shuffle-core-scope, .shuffle-mcp-scope, [data-shuffle-layer]";
+var OWN_PANEL_SELECTOR = [
+  ":scope > .MuiPaper-root",
+  ":scope > .MuiDialog-container > .MuiPaper-root",
+  ':scope > [role="dialog"]',
+  ':scope > [role="alertdialog"]',
+  ':scope > [role="tooltip"]',
+  ":scope > .MuiTooltip-tooltip"
+].join(", ");
+var hasShuffleScopedPanel = (el) => {
+  const panels = el.querySelectorAll(OWN_PANEL_SELECTOR);
+  for (let i = 0; i < panels.length; i++) {
+    if (panels[i].matches(SHUFFLE_SCOPE_SELECTOR)) return true;
+  }
+  return false;
+};
+var isShuffleOwnedOverlay = (el) => el.matches(SHUFFLE_SCOPE_SELECTOR) || hasShuffleScopedPanel(el) || el.closest("[data-radix-portal]") !== null || getOverlayStack().some((r) => r.type === "surface") && isChildPopupElement(el);
 var isTooltipElement = (el) => {
   if (!(el instanceof HTMLElement)) return false;
   return el.classList.contains("MuiTooltip-popper") || el.getAttribute("role") === "tooltip";
@@ -4975,7 +5222,10 @@ var installGlobalOverlayAutoLayer = () => {
   if (store[AUTO_LAYER_KEY]) return;
   store[AUTO_LAYER_KEY] = true;
   const handleElementOpen = (el) => {
-    if (!isShuffleOwnedOverlay(el)) return;
+    if (!isShuffleOwnedOverlay(el)) {
+      if (el.dataset.shuffleLayerZ) handleElementClose(el);
+      return;
+    }
     if (isSurfaceElement(el)) {
       let layerId = el.dataset.shuffleLayerId;
       if (!layerId) {
@@ -5019,10 +5269,13 @@ var installGlobalOverlayAutoLayer = () => {
     if (layerId) {
       releaseOverlayLayer(layerId);
       delete el.dataset.shuffleLayerId;
-      delete el.dataset.shuffleLayerZ;
     } else {
       releaseOverlayLayer(el);
     }
+    if (el.dataset.shuffleLayerZ) {
+      if (el.style.zIndex === el.dataset.shuffleLayerZ) el.style.removeProperty("z-index");
+      delete el.dataset.shuffleLayerZ;
+    }
   };
   const scanNode = (node) => {
     if (!(node instanceof HTMLElement)) return;
@@ -8266,9 +8519,189 @@ init_api();
 // ../Shuffle-Core/components/ShuffleCoreThemeProvider.tsx
 var import_react10 = __toESM(require("react"));
 var import_material12 = require("@mui/material");
-var import_shuffle_core = require("./shuffle-core-LIQTRTFD.css");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var lightTokenStyle = {
+var SHUFFLE_CORE_BASE_CSS = `
+:where(:root) {
+  --background: 0 0% 10%;
+  --background-elevated: 0 0% 13%;
+  --background-surface: 0 0% 16%;
+  --foreground: 0 0% 98%;
+  --foreground-muted: 0 0% 60%;
+  --card: 0 0% 13%;
+  --card-foreground: 0 0% 100%;
+  --popover: 0 0% 13%;
+  --popover-foreground: 0 0% 100%;
+  --primary: 22 100% 50%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 16%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 65%;
+  --accent: 22 100% 50%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 20%;
+  --border-subtle: 0 0% 16%;
+  --input: 0 0% 16%;
+  --ring: 22 100% 50%;
+  --primary-glow: 24 100% 60%;
+  --severity-critical: 0 84% 60%;
+  --severity-high: 12 92% 52%;
+  --severity-medium: 45 93% 47%;
+  --severity-low: 142 71% 45%;
+  --severity-info: 210 100% 56%;
+  --sidebar-background: 0 0% 9%;
+  --sidebar-foreground: 0 0% 100%;
+  --sidebar-primary: 24 100% 50%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 16%;
+  --sidebar-accent-foreground: 0 0% 100%;
+  --sidebar-border: 0 0% 16%;
+  --sidebar-ring: 24 100% 50%;
+  --gradient-card: linear-gradient(145deg, hsl(0 0% 14%) 0%, hsl(0 0% 12%) 100%);
+  --gradient-accent: linear-gradient(135deg, hsl(24 100% 50%) 0%, hsl(24 100% 60%) 100%);
+}
+
+.shuffle-core-scope,
+.shuffle-core-scope *,
+.shuffle-core-scope *::before,
+.shuffle-core-scope *::after {
+  box-sizing: border-box;
+}
+
+.shuffle-core-scope {
+  color: hsl(var(--foreground));
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  isolation: isolate;
+}
+
+.shuffle-core-scope button,
+.shuffle-core-scope input,
+.shuffle-core-scope textarea,
+.shuffle-core-scope select {
+  font: inherit;
+}
+
+:root:not(.dark) .shuffle-core-scope:not(.dark),
+html:not(.dark) .shuffle-core-scope:not(.dark),
+body:not(.dark) .shuffle-core-scope:not(.dark),
+.shuffle-core-scope.light,
+[data-shuffle-mode="light"] .shuffle-core-scope,
+[data-shuffle-mode="light"] {
+  --background: 0 0% 98%;
+  --background-elevated: 0 0% 100%;
+  --background-surface: 0 0% 96%;
+  --foreground: 0 0% 9%;
+  --foreground-muted: 0 0% 40%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 9%;
+  --secondary: 0 0% 94%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 94%;
+  --muted-foreground: 0 0% 40%;
+  --accent: 0 0% 92%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 78%;
+  --border-subtle: 0 0% 86%;
+  --input: 0 0% 94%;
+  --severity-critical: 0 72% 51%;
+  --severity-high: 12 88% 46%;
+  --severity-medium: 38 92% 33%;
+  --severity-low: 142 72% 31%;
+  --severity-info: 215 90% 45%;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 9%;
+  --sidebar-accent: 0 0% 94%;
+  --sidebar-accent-foreground: 0 0% 9%;
+  --sidebar-border: 0 0% 80%;
+  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);
+}
+
+.dark .shuffle-core-scope:not(.light),
+.shuffle-core-scope.dark,
+[data-shuffle-mode="dark"] .shuffle-core-scope,
+[data-shuffle-mode="dark"] {
+  --background: 0 0% 10%;
+  --background-elevated: 0 0% 13%;
+  --background-surface: 0 0% 16%;
+  --foreground: 0 0% 100%;
+  --foreground-muted: 0 0% 60%;
+  --card: 0 0% 13%;
+  --card-foreground: 0 0% 100%;
+  --popover: 0 0% 12%;
+  --popover-foreground: 0 0% 100%;
+  --secondary: 0 0% 18%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 50%;
+  --accent: 0 0% 20%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 20%;
+  --border-subtle: 0 0% 16%;
+  --input: 0 0% 18%;
+  --severity-critical: 0 84% 60%;
+  --severity-high: 12 92% 52%;
+  --severity-medium: 45 93% 47%;
+  --severity-low: 142 71% 45%;
+  --severity-info: 210 100% 56%;
+  --sidebar-background: 0 0% 9%;
+  --sidebar-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 16%;
+  --sidebar-accent-foreground: 0 0% 100%;
+  --sidebar-border: 0 0% 16%;
+  --gradient-card: linear-gradient(145deg, hsl(0 0% 14%) 0%, hsl(0 0% 12%) 100%);
+}
+
+.MuiTooltip-tooltip.shuffle-core-scope {
+  background-color: hsl(var(--popover)) !important;
+  color: hsl(var(--popover-foreground)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
+  border-radius: 8px !important;
+}
+
+.MuiTooltip-tooltip.shuffle-core-scope .MuiTooltip-arrow {
+  color: hsl(var(--popover)) !important;
+}
+
+.MuiTooltip-tooltip.shuffle-core-scope .MuiTooltip-arrow::before {
+  border: 1px solid hsl(var(--border)) !important;
+  box-sizing: border-box;
+}
+`;
+var ensureShuffleCoreStyles = () => {
+  if (typeof document === "undefined") return;
+  const STYLE_ID = "shuffle-core-injected-styles";
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = SHUFFLE_CORE_BASE_CSS;
+  document.head.appendChild(style);
+};
+if (typeof document !== "undefined") {
+  ensureShuffleCoreStyles();
+}
+var readElementAncestorDark = (node) => {
+  if (!node || typeof document === "undefined") return null;
+  const scoped = node.closest('[data-shuffle-mode="dark"], [data-shuffle-mode="light"]');
+  if (scoped) return scoped.getAttribute("data-shuffle-mode") === "dark";
+  if (node.closest(".dark")) return true;
+  if (node.closest(".light")) return false;
+  return null;
+};
+var readHtmlDarkClass2 = () => {
+  if (typeof document === "undefined") return false;
+  return document.documentElement.classList.contains("dark") || document.body?.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark" || document.body?.getAttribute("data-theme") === "dark";
+};
+var lightTokenStyle2 = {
   "--background": "0 0% 98%",
   "--background-elevated": "0 0% 100%",
   "--background-surface": "0 0% 96%",
@@ -8301,8 +8734,8 @@ var lightTokenStyle = {
   "--sidebar-border": "0 0% 80%",
   "--gradient-card": "linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%)"
 };
-var darkTokenStyle = {
-  ...lightTokenStyle,
+var darkTokenStyle2 = {
+  ...lightTokenStyle2,
   "--background": "0 0% 10%",
   "--background-elevated": "0 0% 13%",
   "--background-surface": "0 0% 16%",
@@ -9480,6 +9913,9 @@ var import_react13 = require("react");
 var import_material14 = require("@mui/material");
 var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
+if (typeof document !== "undefined") {
+  ensureShuffleCoreStyles();
+}
 var normalizeToolName = (name) => (name || "").toLowerCase().trim().replace(/[\s-]+/g, "_");
 var isRequiredPresetApp = (preset, appName) => {
   if (!preset?.requiredApps || preset.requiredApps.length === 0) return false;
@@ -9592,9 +10028,68 @@ var filterAgentPresets = (list, support) => {
   if (support === true || support === void 0 && isSupportUser()) return list;
   return list.map((p) => SUPPORT_ONLY_PRESET_IDS.includes(p.id) ? { ...p, enabled: false } : p);
 };
-var AgentPresets = ({ variant = "default", onSelectPreset, selectedPreset, onRemoveSelected, presets, chipRef, isSupport, sx, placement }) => {
+var AgentPresets = ({
+  variant = "default",
+  onSelectPreset,
+  selectedPreset,
+  onRemoveSelected,
+  presets,
+  chipRef,
+  isSupport,
+  sx,
+  placement,
+  theme,
+  colorMode
+}) => {
   const [anchorEl, setAnchorEl] = (0, import_react13.useState)(null);
   const open = Boolean(anchorEl);
+  const buttonRef = (0, import_react13.useRef)(null);
+  const setButtonRefs = (0, import_react13.useCallback)(
+    (node) => {
+      buttonRef.current = node;
+      if (typeof chipRef === "function") {
+        chipRef(node);
+      } else if (chipRef && typeof chipRef === "object" && "current" in chipRef) {
+        chipRef.current = node;
+      }
+    },
+    [chipRef]
+  );
+  const themeScope = useShuffleCoreTheme();
+  const muiTheme = (0, import_material14.useTheme)();
+  const resolvedThemeProp = colorMode || (theme === "system" ? "auto" : theme);
+  const computeIsDark = (0, import_react13.useCallback)(() => {
+    if (resolvedThemeProp === "dark") return true;
+    if (resolvedThemeProp === "light") return false;
+    if (themeScope) return themeScope.isDark;
+    const targetEl = anchorEl || buttonRef.current;
+    if (targetEl) {
+      const ancestorDark = readElementAncestorDark(targetEl);
+      if (ancestorDark !== null) return ancestorDark;
+    }
+    const muiMode = muiTheme?.palette?.mode || muiTheme?.palette?.type || muiTheme?.palette?.theme;
+    if (muiMode === "dark") return true;
+    if (muiMode === "light") return false;
+    if (readHtmlDarkClass2()) return true;
+    if (typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)")?.matches) {
+      return true;
+    }
+    return false;
+  }, [resolvedThemeProp, themeScope, anchorEl, muiTheme]);
+  const useIsoLayoutEffect = typeof window !== "undefined" ? import_react13.useLayoutEffect : import_react13.useEffect;
+  const [isDark, setIsDark] = (0, import_react13.useState)(computeIsDark);
+  useIsoLayoutEffect(() => {
+    setIsDark(computeIsDark());
+  }, [computeIsDark, open]);
+  (0, import_react13.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const handleThemeChange = () => setIsDark(computeIsDark());
+    window.addEventListener("shuffle:theme-change", handleThemeChange);
+    return () => window.removeEventListener("shuffle:theme-change", handleThemeChange);
+  }, [computeIsDark]);
+  const scopeStyle = isDark ? darkTokenStyle2 : lightTokenStyle2;
+  const scopeClassName = isDark ? "shuffle-core-scope shuffle-mcp-scope dark" : "shuffle-core-scope shuffle-mcp-scope light";
+  const resolvedModeAttr = isDark ? "dark" : "light";
   const [supportTick, setSupportTick] = (0, import_react13.useState)(0);
   (0, import_react13.useEffect)(() => {
     const bump = () => setSupportTick((t) => t + 1);
@@ -9612,7 +10107,10 @@ var AgentPresets = ({ variant = "default", onSelectPreset, selectedPreset, onRem
   const trigger = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     import_material14.ButtonBase,
     {
-      ref: chipRef,
+      ref: setButtonRefs,
+      className: scopeClassName,
+      "data-shuffle-mode": resolvedModeAttr,
+      style: scopeStyle,
       onClick: (e) => setAnchorEl(e.currentTarget),
       "aria-label": selectedPreset ? `Skill: ${selectedPreset.label}` : "Select skill",
       sx: [
@@ -9643,19 +10141,14 @@ var AgentPresets = ({ variant = "default", onSelectPreset, selectedPreset, onRem
       ],
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          import_material14.Box,
+          "span",
           {
-            component: "span",
-            sx: {
+            style: {
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
               flexShrink: 0,
-              color: selectedPreset ? "hsl(var(--primary))" : "inherit",
-              "& svg": {
-                width: variant === "floating" ? 14 : 16,
-                height: variant === "floating" ? 14 : 16
-              }
+              color: selectedPreset ? "hsl(var(--primary))" : "inherit"
             },
             children: selectedPreset ? selectedPreset.icon ?? void 0 : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react6.Plus, { size: variant === "floating" ? 12 : 14 })
           }
@@ -9717,8 +10210,6 @@ var AgentPresets = ({ variant = "default", onSelectPreset, selectedPreset, onRem
       (p) => p.label.toLowerCase().includes(q) || p.description.toLowerCase().includes(q) || p.tag && p.tag.toLowerCase().includes(q)
     );
   }, [list, query]);
-  const themeScope = useShuffleCoreTheme();
-  const scopeClassName = themeScope?.scopeClassName || "shuffle-mcp-scope";
   const popperZIndex = getPopupZIndex();
   const menu = open ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_material14.Popper,
@@ -9728,7 +10219,8 @@ var AgentPresets = ({ variant = "default", onSelectPreset, selectedPreset, onRem
       placement: placement || "bottom-start",
       className: scopeClassName,
       "data-shuffle-layer": "popup",
-      style: { zIndex: popperZIndex },
+      "data-shuffle-mode": resolvedModeAttr,
+      style: { ...scopeStyle, zIndex: popperZIndex },
       modifiers: [
         { name: "offset", options: { offset: [0, 6] } },
         { name: "preventOverflow", options: { padding: 8 } }
@@ -9741,16 +10233,19 @@ var AgentPresets = ({ variant = "default", onSelectPreset, selectedPreset, onRem
         {
           className: scopeClassName,
           "data-shuffle-layer": "popup",
+          "data-shuffle-mode": resolvedModeAttr,
+          style: scopeStyle,
           sx: {
             width: 360,
             maxWidth: "90vw",
-            bgcolor: "hsl(var(--card))",
-            border: "1px solid hsl(var(--border))",
-            boxShadow: "0 8px 24px hsl(var(--background) / 0.4)",
+            bgcolor: isDark ? "hsl(0 0% 13%)" : "hsl(0 0% 100%)",
+            color: isDark ? "hsl(0 0% 100%)" : "hsl(0 0% 9%)",
+            border: `1px solid ${isDark ? "hsl(0 0% 20%)" : "hsl(0 0% 80%)"}`,
+            boxShadow: isDark ? "0 8px 24px rgba(0, 0, 0, 0.4)" : "0 8px 24px rgba(0, 0, 0, 0.1)",
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material14.Box, { sx: { px: 1.5, py: 1, borderBottom: "1px solid hsl(var(--border))" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material14.Box, { sx: { px: 1.5, py: 1, borderBottom: `1px solid ${isDark ? "hsl(0 0% 20%)" : "hsl(0 0% 80%)"}` }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material14.Typography, { sx: { fontSize: "0.72rem", fontWeight: 600, letterSpacing: 1, textTransform: "uppercase", color: "hsl(var(--muted-foreground))" }, children: "Agent skills" }),
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material14.Typography, { sx: { fontSize: "0.7rem", color: "hsl(var(--muted-foreground))", opacity: 0.7, mt: 0.25 }, children: "Click a skill to seed the prompt. More coming soon." })
             ] }),
@@ -9802,17 +10297,17 @@ var AgentPresets = ({ variant = "default", onSelectPreset, selectedPreset, onRem
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                      import_material14.Box,
+                      "div",
                       {
-                        sx: {
-                          mt: 0.25,
+                        style: {
+                          marginTop: 2,
                           width: 26,
                           height: 26,
-                          borderRadius: 1,
+                          borderRadius: 4,
                           display: "flex",
                           alignItems: "center",
                           justifyContent: "center",
-                          bgcolor: "hsl(var(--muted))",
+                          backgroundColor: "hsl(var(--muted))",
                           color: "hsl(var(--muted-foreground))",
                           flexShrink: 0
                         },
@@ -15666,7 +16161,10 @@ var TimelineRow = ({
           const req = extractAuthRequest(details);
           if (!req) return null;
           if (authAppsLoading) return null;
+          if (isNoAuthApp(normalizeAgentAppName(req.appName))) return null;
           const authed = !!isAppAuthenticated?.(req.appName, req.appId);
+          const stepBlocked = isFailed || effectiveStatus === "WAITING" || effectiveStatus === "PENDING";
+          if (!stepBlocked) return null;
           const pretty = req.appName.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
           const slug = normalizeAgentAppName(req.appName);
           const appId = req.appId || appsById[req.appName]?.id || appsById[slug]?.id || null;
@@ -18923,6 +19421,8 @@ var AgentUI = ({
       onRemoveSelected: handleRemovePreset,
       onSelectPreset: handleSelectPresetInternal,
       placement: "bottom-start",
+      theme: theme || (themeScope?.isDark ? "dark" : "light"),
+      colorMode,
       sx: {
         height: 32,
         alignSelf: "center"
@@ -19447,7 +19947,9 @@ var AgentUI = ({
                               isSupport: isEffectiveSupport,
                               selectedPreset,
                               onRemoveSelected: handleRemovePreset,
-                              onSelectPreset: handleSelectPresetInternal
+                              onSelectPreset: handleSelectPresetInternal,
+                              theme: theme || (themeScope?.isDark ? "dark" : "light"),
+                              colorMode
                             }
                           )
                         }
@@ -23988,7 +24490,7 @@ var AgentRunRow = ({ run: run2, onClick, sx, appIcons, onAppClick, apiKey, apiBa
                         if (onAppClick) {
                           onAppClick({ id: t.id, name: t.name });
                         } else {
-                          navigate(`/apps/${encodeURIComponent(slug)}`);
+                          navigate(`/apps/${encodeURIComponent(t.id || slug)}`);
                         }
                       },
                       sx: {
@@ -29295,6 +29797,7 @@ function useAppLookup(appName) {
 init_api();
 init_fetchBreaker();
 init_appsCache();
+ensureShuffleMcpStyles();
 var _fallbackQueryClient = null;
 function getFallbackQueryClient() {
   if (!_fallbackQueryClient) _fallbackQueryClient = new import_react_query.QueryClient();
@@ -29340,6 +29843,7 @@ var AppAuthSection2 = withMcpTheme(AppAuthSection, "AppAuthSection");
 var TryMcpSection2 = withMcpTheme(TryMcpSection, "TryMcpSection");
 var SingulActionsPreview2 = withMcpTheme(SingulActionsPreview_default, "SingulActionsPreview");
 var AgentUI2 = withMcpTheme(AgentUI_default, "AgentUI");
+var AgentPresets2 = withMcpTheme(AgentPresets_default, "AgentPresets");
 var AgentRunDrawer2 = withMcpTheme(AgentRunDrawer_default, "AgentRunDrawer");
 var AskAiButton2 = withMcpTheme(AskAiButton_default, "AskAiButton");
 var AskAiDrawer2 = withMcpTheme(AskAiDrawer_default, "AskAiDrawer");