@shuffleio/shuffle-mcps 0.0.18 → 0.0.20

package/dist/index.d.mts

@@ -5,21 +5,16 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 /**
  * ShuffleMcpThemeProvider
  *
- * Mirror of Shuffle-Core's theme provider, scoped for the Shuffle-MCPs lib.
- * Two jobs:
- *
- * 1. Pin MUI defaults (`size="small"`) so individual call sites never need to
- *    thread sizing through.
- *
- * 2. Bridge the host app's light/dark scheme into MUI:
- *    - `mode="auto"` (default) — track the `.dark` class on `<html>` and flip
- *      MUI `palette.mode` accordingly. Tokens (`hsl(var(--…))`) flip with the
- *      same class so nothing else needs to know about the theme.
- *    - `mode="light" | "dark"` — pin the wrapped subtree to that scheme. We
- *      render a `<div className="dark">` (or remove it) so Tailwind dark
- *      variants and CSS-variable overrides scope to this subtree only —
- *      useful when embedding MCPs inside a host that doesn't manage `.dark`
- *      on `<html>`.
+ * - Pins MUI defaults (`size="small"`) so call sites never thread sizing.
+ * - Bridges the host app's light/dark scheme into MUI (`palette.mode`) and
+ *   into our HSL token system (the scoped `.dark` class).
+ * - Exposes a React Context (`ShuffleMcpThemeContext`) so internal raw
+ *   components — and views that compose other library components without
+ *   going through the public wrapped exports — see the resolved mode.
+ * - Stamps the scope className onto MUI portaled paper (Drawer, Dialog,
+ *   Menu, Popover, Tooltip), so portals rendered into <body> still resolve
+ *   our `hsl(var(--…))` tokens against the pinned theme instead of the
+ *   host's `<html>`.
  *
  * Wrap your MCP usage at any level:
  *
@@ -33,9 +28,9 @@ interface ShuffleMcpThemeProviderProps {
     children?: React$1.ReactNode;
     /**
      * Color mode for the wrapped subtree.
-     * - `"dark"` (default) — render exactly like Shuffle Security standalone.
-     * - `"auto"` — follow the host page's `.dark` class on `<html>`.
-     * - `"light"` / `"dark"` — pin the subtree to that scheme via a wrapping div.
+     * - `"auto"` (default) — follow the host page's `.dark` class on `<html>`.
+     * - `"light"` / `"dark"` — pin the subtree (and any portals rendered from
+     *   within it) to that scheme.
      */
     mode?: ShuffleMcpColorMode;
 }
@@ -765,14 +760,23 @@ interface AgentsViewProps extends ShuffleHostProps {
     maxWidth?: number;
     /**
      * Optional handler for the "Choose LLM" chip. Forwarded to the embedded
-     * AgentUI. When omitted, AgentUI dispatches its legacy window event
-     * (handled by the bundled AgentRunDrawer in Shuffle Security). On other
-     * hosts, pass this prop to wire your own LLM picker — or set
+     * AgentUI. When omitted, AgentsView mounts its own internal
+     * `AgentRunDrawer` and opens it on the Local LLM tab — so the chip
+     * always does *something*, even on hosts that haven't wired a picker.
+     * Pass this prop to override with your own LLM picker, or set
      * `hideChooseLLM` to remove the chip entirely.
      */
     onChooseLLM?: () => void;
     /** Hide the "Choose LLM" chip in the embedded AgentUI. */
     hideChooseLLM?: boolean;
+    /**
+     * Content rendered inside the built-in AgentRunDrawer's Local LLM tab
+     * when no `onChooseLLM` is provided. Use to plug in your own local LLM
+     * config form. When omitted, a minimal built-in placeholder is shown.
+     */
+    localLLMSlot?: React.ReactNode;
+    /** Content for the built-in AgentRunDrawer's Permissions tab. Optional. */
+    permissionsSlot?: React.ReactNode;
 }
 
 /**
@@ -1329,6 +1333,15 @@ declare const UsageBar: React$1.FC<UsageBarProps>;
  * No host-app `@/` imports remain inside this folder (assets aside).
  */
 
+/**
+ * Every exported component accepts an optional `theme` prop:
+ *   - `"light"` / `"dark"` — pin the subtree to that scheme
+ *   - `"system"` (default) — follow the host page's `.dark` class on `<html>`
+ *
+ * `colorMode` is preserved as a legacy alias (`"auto"` == `"system"`).
+ */
+type ShuffleTheme = 'light' | 'dark' | 'system';
+
 declare const ShuffleMCP: React$1.ForwardRefExoticComponent<any>;
 
 declare const AppDetailDrawer: React$1.ComponentType<any>;
@@ -1355,4 +1368,4 @@ declare const AgentsView: React$1.ComponentType<any>;
 
 declare const AgentRunDiagnosisBanner: React$1.ComponentType<any>;
 
-export { API_CONFIG, AgentActivityList, type AgentActivityListProps, type AgentActivityParams, type AgentActivityResponse, type AgentDecision, AgentExecutionDrawer, type AgentExecutionDrawerProps, AgentIcon, type AgentRun, AgentRunDiagnosisBanner, AgentRunDrawer, type AgentRunDrawerProps, type AgentRunDrawerTab, type AgentRunResult, AgentUI, type AgentUIApp, type AgentUIProps, AgentsView, type AgentsViewProps, AiAgentPromptsEditor, type AiAgentPromptsEditorProps, type AlgoliaSearchApp, type ApiAuthEntry, AppAuthCard, type AppAuthCardProps, AppAuthConfig, AppAuthSection, type AppAuthSectionProps, type AppAuthState, type AppAuthentication, AppDetailDrawer, AppDetailProvider, type AppLookupResult, AppSearchDrawer, type AppSelectedEvent, AppTitleHeader, type AppTitleHeaderProps, type AuthStatus, CASES_PATTERNS, COMMUNICATION_PATTERNS_NAMES, type CategoryAutomation, type CategoryConfig, type CustomStyles, DATASTORE_CATEGORIES, type DatastoreDiagnostics, type DatastoreItem, type DatastoreResponse, type DiagnosableRun, type DiagnosisEvidence, EDR_PATTERNS, EMAIL_APP_PATTERNS, FORWARD_TICKETS_WORKFLOW_NAME, type FetchAppsOptions, INGEST_TICKETS_WORKFLOW_NAME, type IngestionCategory, IntegrationStatus, type OutputDiagnosis, type ResolvedApp, SIEM_PATTERNS, type ShuffleHostProps, ShuffleMCP, type ShuffleMCPHandle, type ShuffleMCPProps, type ShuffleMcpColorMode, ShuffleMcpThemeProvider, type ShuffleMcpThemeProviderProps, ShufflePipelinesBanner, SingulActionsPreview, THREAT_INTEL_PATTERNS, TryMcpSection, type TryMcpSectionProps, UsageBar, type UsageBarProps, VULN_SCANNER_PATTERNS, type ValidatedIngestionApp, ShuffleMCP as default, deleteDatastoreItem, deleteDatastoreItems, diagnoseOutputWarning, extractValidatedIngestionApps, extractWorkflowAppNames, fetchApps, fetchAppsViaApiConfig, findForwardTicketsWorkflow, findIngestTicketsWorkflow, getApiUrl, getAuthHeader, getDatastoreByCategory, getDatastoreItem, getDatastoreItemPublic, getFailureInfo, getHostBaseUrl, getIngestionCategory, hasOutputWarning, installFetchBreaker, invalidateAppsCache, invalidateResolvedApps, isCloud, isCloudDomain, isEmailApp, isIngestionApp, isOnprem, isThreatIntelApp, isVulnScannerApp, isWorkflowScheduleStopped, normalizeAppName, parseRunResult, refreshAllIntegrationStatus, registerProtectedOrigin, resetRegionUrl, resolveApp, resolveApps, searchAgentActivity, seedResolvedApp, setDatastoreItem, setDatastoreItems, setHostBaseUrl, setRegionUrl, setRuntimeOrgId, setToastImpl, shuffleFetch, toast, useAppAuth, useAppDetail, useAppDetailOptional, useAppLookup, useSyncHostBaseUrl };
+export { API_CONFIG, AgentActivityList, type AgentActivityListProps, type AgentActivityParams, type AgentActivityResponse, type AgentDecision, AgentExecutionDrawer, type AgentExecutionDrawerProps, AgentIcon, type AgentRun, AgentRunDiagnosisBanner, AgentRunDrawer, type AgentRunDrawerProps, type AgentRunDrawerTab, type AgentRunResult, AgentUI, type AgentUIApp, type AgentUIProps, AgentsView, type AgentsViewProps, AiAgentPromptsEditor, type AiAgentPromptsEditorProps, type AlgoliaSearchApp, type ApiAuthEntry, AppAuthCard, type AppAuthCardProps, AppAuthConfig, AppAuthSection, type AppAuthSectionProps, type AppAuthState, type AppAuthentication, AppDetailDrawer, AppDetailProvider, type AppLookupResult, AppSearchDrawer, type AppSelectedEvent, AppTitleHeader, type AppTitleHeaderProps, type AuthStatus, CASES_PATTERNS, COMMUNICATION_PATTERNS_NAMES, type CategoryAutomation, type CategoryConfig, type CustomStyles, DATASTORE_CATEGORIES, type DatastoreDiagnostics, type DatastoreItem, type DatastoreResponse, type DiagnosableRun, type DiagnosisEvidence, EDR_PATTERNS, EMAIL_APP_PATTERNS, FORWARD_TICKETS_WORKFLOW_NAME, type FetchAppsOptions, INGEST_TICKETS_WORKFLOW_NAME, type IngestionCategory, IntegrationStatus, type OutputDiagnosis, type ResolvedApp, SIEM_PATTERNS, type ShuffleHostProps, ShuffleMCP, type ShuffleMCPHandle, type ShuffleMCPProps, type ShuffleMcpColorMode, ShuffleMcpThemeProvider, type ShuffleMcpThemeProviderProps, ShufflePipelinesBanner, type ShuffleTheme, SingulActionsPreview, THREAT_INTEL_PATTERNS, TryMcpSection, type TryMcpSectionProps, UsageBar, type UsageBarProps, VULN_SCANNER_PATTERNS, type ValidatedIngestionApp, ShuffleMCP as default, deleteDatastoreItem, deleteDatastoreItems, diagnoseOutputWarning, extractValidatedIngestionApps, extractWorkflowAppNames, fetchApps, fetchAppsViaApiConfig, findForwardTicketsWorkflow, findIngestTicketsWorkflow, getApiUrl, getAuthHeader, getDatastoreByCategory, getDatastoreItem, getDatastoreItemPublic, getFailureInfo, getHostBaseUrl, getIngestionCategory, hasOutputWarning, installFetchBreaker, invalidateAppsCache, invalidateResolvedApps, isCloud, isCloudDomain, isEmailApp, isIngestionApp, isOnprem, isThreatIntelApp, isVulnScannerApp, isWorkflowScheduleStopped, normalizeAppName, parseRunResult, refreshAllIntegrationStatus, registerProtectedOrigin, resetRegionUrl, resolveApp, resolveApps, searchAgentActivity, seedResolvedApp, setDatastoreItem, setDatastoreItems, setHostBaseUrl, setRegionUrl, setRuntimeOrgId, setToastImpl, shuffleFetch, toast, useAppAuth, useAppDetail, useAppDetailOptional, useAppLookup, useSyncHostBaseUrl };

package/dist/index.d.ts

@@ -5,21 +5,16 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 /**
  * ShuffleMcpThemeProvider
  *
- * Mirror of Shuffle-Core's theme provider, scoped for the Shuffle-MCPs lib.
- * Two jobs:
- *
- * 1. Pin MUI defaults (`size="small"`) so individual call sites never need to
- *    thread sizing through.
- *
- * 2. Bridge the host app's light/dark scheme into MUI:
- *    - `mode="auto"` (default) — track the `.dark` class on `<html>` and flip
- *      MUI `palette.mode` accordingly. Tokens (`hsl(var(--…))`) flip with the
- *      same class so nothing else needs to know about the theme.
- *    - `mode="light" | "dark"` — pin the wrapped subtree to that scheme. We
- *      render a `<div className="dark">` (or remove it) so Tailwind dark
- *      variants and CSS-variable overrides scope to this subtree only —
- *      useful when embedding MCPs inside a host that doesn't manage `.dark`
- *      on `<html>`.
+ * - Pins MUI defaults (`size="small"`) so call sites never thread sizing.
+ * - Bridges the host app's light/dark scheme into MUI (`palette.mode`) and
+ *   into our HSL token system (the scoped `.dark` class).
+ * - Exposes a React Context (`ShuffleMcpThemeContext`) so internal raw
+ *   components — and views that compose other library components without
+ *   going through the public wrapped exports — see the resolved mode.
+ * - Stamps the scope className onto MUI portaled paper (Drawer, Dialog,
+ *   Menu, Popover, Tooltip), so portals rendered into <body> still resolve
+ *   our `hsl(var(--…))` tokens against the pinned theme instead of the
+ *   host's `<html>`.
  *
  * Wrap your MCP usage at any level:
  *
@@ -33,9 +28,9 @@ interface ShuffleMcpThemeProviderProps {
     children?: React$1.ReactNode;
     /**
      * Color mode for the wrapped subtree.
-     * - `"dark"` (default) — render exactly like Shuffle Security standalone.
-     * - `"auto"` — follow the host page's `.dark` class on `<html>`.
-     * - `"light"` / `"dark"` — pin the subtree to that scheme via a wrapping div.
+     * - `"auto"` (default) — follow the host page's `.dark` class on `<html>`.
+     * - `"light"` / `"dark"` — pin the subtree (and any portals rendered from
+     *   within it) to that scheme.
      */
     mode?: ShuffleMcpColorMode;
 }
@@ -765,14 +760,23 @@ interface AgentsViewProps extends ShuffleHostProps {
     maxWidth?: number;
     /**
      * Optional handler for the "Choose LLM" chip. Forwarded to the embedded
-     * AgentUI. When omitted, AgentUI dispatches its legacy window event
-     * (handled by the bundled AgentRunDrawer in Shuffle Security). On other
-     * hosts, pass this prop to wire your own LLM picker — or set
+     * AgentUI. When omitted, AgentsView mounts its own internal
+     * `AgentRunDrawer` and opens it on the Local LLM tab — so the chip
+     * always does *something*, even on hosts that haven't wired a picker.
+     * Pass this prop to override with your own LLM picker, or set
      * `hideChooseLLM` to remove the chip entirely.
      */
     onChooseLLM?: () => void;
     /** Hide the "Choose LLM" chip in the embedded AgentUI. */
     hideChooseLLM?: boolean;
+    /**
+     * Content rendered inside the built-in AgentRunDrawer's Local LLM tab
+     * when no `onChooseLLM` is provided. Use to plug in your own local LLM
+     * config form. When omitted, a minimal built-in placeholder is shown.
+     */
+    localLLMSlot?: React.ReactNode;
+    /** Content for the built-in AgentRunDrawer's Permissions tab. Optional. */
+    permissionsSlot?: React.ReactNode;
 }
 
 /**
@@ -1329,6 +1333,15 @@ declare const UsageBar: React$1.FC<UsageBarProps>;
  * No host-app `@/` imports remain inside this folder (assets aside).
  */
 
+/**
+ * Every exported component accepts an optional `theme` prop:
+ *   - `"light"` / `"dark"` — pin the subtree to that scheme
+ *   - `"system"` (default) — follow the host page's `.dark` class on `<html>`
+ *
+ * `colorMode` is preserved as a legacy alias (`"auto"` == `"system"`).
+ */
+type ShuffleTheme = 'light' | 'dark' | 'system';
+
 declare const ShuffleMCP: React$1.ForwardRefExoticComponent<any>;
 
 declare const AppDetailDrawer: React$1.ComponentType<any>;
@@ -1355,4 +1368,4 @@ declare const AgentsView: React$1.ComponentType<any>;
 
 declare const AgentRunDiagnosisBanner: React$1.ComponentType<any>;
 
-export { API_CONFIG, AgentActivityList, type AgentActivityListProps, type AgentActivityParams, type AgentActivityResponse, type AgentDecision, AgentExecutionDrawer, type AgentExecutionDrawerProps, AgentIcon, type AgentRun, AgentRunDiagnosisBanner, AgentRunDrawer, type AgentRunDrawerProps, type AgentRunDrawerTab, type AgentRunResult, AgentUI, type AgentUIApp, type AgentUIProps, AgentsView, type AgentsViewProps, AiAgentPromptsEditor, type AiAgentPromptsEditorProps, type AlgoliaSearchApp, type ApiAuthEntry, AppAuthCard, type AppAuthCardProps, AppAuthConfig, AppAuthSection, type AppAuthSectionProps, type AppAuthState, type AppAuthentication, AppDetailDrawer, AppDetailProvider, type AppLookupResult, AppSearchDrawer, type AppSelectedEvent, AppTitleHeader, type AppTitleHeaderProps, type AuthStatus, CASES_PATTERNS, COMMUNICATION_PATTERNS_NAMES, type CategoryAutomation, type CategoryConfig, type CustomStyles, DATASTORE_CATEGORIES, type DatastoreDiagnostics, type DatastoreItem, type DatastoreResponse, type DiagnosableRun, type DiagnosisEvidence, EDR_PATTERNS, EMAIL_APP_PATTERNS, FORWARD_TICKETS_WORKFLOW_NAME, type FetchAppsOptions, INGEST_TICKETS_WORKFLOW_NAME, type IngestionCategory, IntegrationStatus, type OutputDiagnosis, type ResolvedApp, SIEM_PATTERNS, type ShuffleHostProps, ShuffleMCP, type ShuffleMCPHandle, type ShuffleMCPProps, type ShuffleMcpColorMode, ShuffleMcpThemeProvider, type ShuffleMcpThemeProviderProps, ShufflePipelinesBanner, SingulActionsPreview, THREAT_INTEL_PATTERNS, TryMcpSection, type TryMcpSectionProps, UsageBar, type UsageBarProps, VULN_SCANNER_PATTERNS, type ValidatedIngestionApp, ShuffleMCP as default, deleteDatastoreItem, deleteDatastoreItems, diagnoseOutputWarning, extractValidatedIngestionApps, extractWorkflowAppNames, fetchApps, fetchAppsViaApiConfig, findForwardTicketsWorkflow, findIngestTicketsWorkflow, getApiUrl, getAuthHeader, getDatastoreByCategory, getDatastoreItem, getDatastoreItemPublic, getFailureInfo, getHostBaseUrl, getIngestionCategory, hasOutputWarning, installFetchBreaker, invalidateAppsCache, invalidateResolvedApps, isCloud, isCloudDomain, isEmailApp, isIngestionApp, isOnprem, isThreatIntelApp, isVulnScannerApp, isWorkflowScheduleStopped, normalizeAppName, parseRunResult, refreshAllIntegrationStatus, registerProtectedOrigin, resetRegionUrl, resolveApp, resolveApps, searchAgentActivity, seedResolvedApp, setDatastoreItem, setDatastoreItems, setHostBaseUrl, setRegionUrl, setRuntimeOrgId, setToastImpl, shuffleFetch, toast, useAppAuth, useAppDetail, useAppDetailOptional, useAppLookup, useSyncHostBaseUrl };
+export { API_CONFIG, AgentActivityList, type AgentActivityListProps, type AgentActivityParams, type AgentActivityResponse, type AgentDecision, AgentExecutionDrawer, type AgentExecutionDrawerProps, AgentIcon, type AgentRun, AgentRunDiagnosisBanner, AgentRunDrawer, type AgentRunDrawerProps, type AgentRunDrawerTab, type AgentRunResult, AgentUI, type AgentUIApp, type AgentUIProps, AgentsView, type AgentsViewProps, AiAgentPromptsEditor, type AiAgentPromptsEditorProps, type AlgoliaSearchApp, type ApiAuthEntry, AppAuthCard, type AppAuthCardProps, AppAuthConfig, AppAuthSection, type AppAuthSectionProps, type AppAuthState, type AppAuthentication, AppDetailDrawer, AppDetailProvider, type AppLookupResult, AppSearchDrawer, type AppSelectedEvent, AppTitleHeader, type AppTitleHeaderProps, type AuthStatus, CASES_PATTERNS, COMMUNICATION_PATTERNS_NAMES, type CategoryAutomation, type CategoryConfig, type CustomStyles, DATASTORE_CATEGORIES, type DatastoreDiagnostics, type DatastoreItem, type DatastoreResponse, type DiagnosableRun, type DiagnosisEvidence, EDR_PATTERNS, EMAIL_APP_PATTERNS, FORWARD_TICKETS_WORKFLOW_NAME, type FetchAppsOptions, INGEST_TICKETS_WORKFLOW_NAME, type IngestionCategory, IntegrationStatus, type OutputDiagnosis, type ResolvedApp, SIEM_PATTERNS, type ShuffleHostProps, ShuffleMCP, type ShuffleMCPHandle, type ShuffleMCPProps, type ShuffleMcpColorMode, ShuffleMcpThemeProvider, type ShuffleMcpThemeProviderProps, ShufflePipelinesBanner, type ShuffleTheme, SingulActionsPreview, THREAT_INTEL_PATTERNS, TryMcpSection, type TryMcpSectionProps, UsageBar, type UsageBarProps, VULN_SCANNER_PATTERNS, type ValidatedIngestionApp, ShuffleMCP as default, deleteDatastoreItem, deleteDatastoreItems, diagnoseOutputWarning, extractValidatedIngestionApps, extractWorkflowAppNames, fetchApps, fetchAppsViaApiConfig, findForwardTicketsWorkflow, findIngestTicketsWorkflow, getApiUrl, getAuthHeader, getDatastoreByCategory, getDatastoreItem, getDatastoreItemPublic, getFailureInfo, getHostBaseUrl, getIngestionCategory, hasOutputWarning, installFetchBreaker, invalidateAppsCache, invalidateResolvedApps, isCloud, isCloudDomain, isEmailApp, isIngestionApp, isOnprem, isThreatIntelApp, isVulnScannerApp, isWorkflowScheduleStopped, normalizeAppName, parseRunResult, refreshAllIntegrationStatus, registerProtectedOrigin, resetRegionUrl, resolveApp, resolveApps, searchAgentActivity, seedResolvedApp, setDatastoreItem, setDatastoreItems, setHostBaseUrl, setRegionUrl, setRuntimeOrgId, setToastImpl, shuffleFetch, toast, useAppAuth, useAppDetail, useAppDetailOptional, useAppLookup, useSyncHostBaseUrl };

package/dist/index.js

@@ -455,7 +455,24 @@ var import_react20 = __toESM(require("react"));
 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" } },
@@ -497,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))",
@@ -507,6 +532,7 @@ var componentOverrides = {
     }
   },
   MuiPopover: {
+    defaultProps: { slotProps: { paper: { className: scopeClassName } } },
     styleOverrides: {
       paper: {
         backgroundColor: "hsl(var(--popover))",
@@ -515,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 = "dark"
+  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,
@@ -550,17 +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 });
-  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: scopeClassName, "data-shuffle-mode": mode, "data-shuffle-mcp-root": true, children: tree });
+  if (sameAsParent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShuffleMcpThemeContext.Provider, { value: ctxValue, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shuffle-mcp-scope", "data-shuffle-mode": "auto", "data-shuffle-mcp-root": true, children: 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
@@ -12828,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, onChooseLLM, hideChooseLLM, 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");
@@ -12838,6 +12869,33 @@ var AgentsView = ({ onSchedule, maxWidth = 820, onChooseLLM, hideChooseLLM, glob
     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 });
@@ -12918,7 +12976,7 @@ var AgentsView = ({ onSchedule, maxWidth = 820, onChooseLLM, hideChooseLLM, glob
           apiBaseUrl: globalUrl,
           onViewChange: setAgentView,
           onSchedule,
-          onChooseLLM,
+          onChooseLLM: handleChooseLLM,
           hideChooseLLM,
           defaultInput: prefill.input,
           defaultApps: prefill.apps.length > 0 ? prefill.apps : void 0,
@@ -12948,6 +13006,18 @@ var AgentsView = ({ onSchedule, maxWidth = 820, onChooseLLM, hideChooseLLM, glob
         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 }
+      }
     )
   ] });
 };
@@ -13180,10 +13250,15 @@ 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 = ({ colorMode, ...rest }) => import_react20.default.createElement(
+  const Wrapped = ({ theme, colorMode, ...rest }) => import_react20.default.createElement(
     ShuffleMcpThemeProvider,
-    { mode: colorMode },
+    { mode: resolveMode(theme, colorMode) },
     import_react20.default.createElement(Inner, { ...rest })
   );
   Wrapped.displayName = `ShuffleMCPs(${displayName})`;
@@ -13191,9 +13266,9 @@ var withMcpTheme = (Inner, displayName) => {
 };
 var withMcpThemeRef = (Inner, displayName) => {
   const Wrapped = import_react20.default.forwardRef(
-    ({ colorMode, ...rest }, ref) => import_react20.default.createElement(
+    ({ theme, colorMode, ...rest }, ref) => import_react20.default.createElement(
       ShuffleMcpThemeProvider,
-      { mode: colorMode },
+      { mode: resolveMode(theme, colorMode) },
       import_react20.default.createElement(Inner, { ...rest, ref })
     )
   );

package/dist/index.mjs

@@ -26,7 +26,24 @@ import React5 from "react";
 import React from "react";
 import { ThemeProvider, createTheme, useTheme as useMuiTheme } from "@mui/material";
 import { jsx } from "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] = React.useState(() => enabled ? readHtmlDarkClass() : false);
+  React.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 = React.createContext(null);
+var useShuffleMcpTheme = () => React.useContext(ShuffleMcpThemeContext);
+var buildComponentOverrides = (scopeClassName) => ({
   MuiTextField: { defaultProps: { size: "small" } },
   MuiButton: { defaultProps: { size: "small" } },
   MuiFormControl: { defaultProps: { size: "small" } },
@@ -68,7 +85,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))",
@@ -78,6 +103,7 @@ var componentOverrides = {
     }
   },
   MuiPopover: {
+    defaultProps: { slotProps: { paper: { className: scopeClassName } } },
     styleOverrides: {
       paper: {
         backgroundColor: "hsl(var(--popover))",
@@ -86,32 +112,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] = React.useState(() => enabled ? readHtmlDarkClass() : false);
-  React.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 = "dark"
+  mode = "auto"
 }) => {
   const parent = useMuiTheme();
+  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 = React.useMemo(
     () => createTheme({
       ...parent,
@@ -121,17 +138,19 @@ var ShuffleMcpThemeProvider = ({
       },
       components: {
         ...parent.components,
-        ...componentOverrides
+        ...buildComponentOverrides(scopeClassName)
       }
     }),
-    [parent, effectiveDark]
+    [parent, effectiveDark, scopeClassName]
+  );
+  const ctxValue = React.useMemo(
+    () => ({ mode, isDark: effectiveDark, scopeClassName }),
+    [mode, effectiveDark, scopeClassName]
   );
-  const tree = /* @__PURE__ */ jsx(ThemeProvider, { theme: merged, children });
-  const scopeClassName = mode === "light" ? "shuffle-mcp-scope" : "shuffle-mcp-scope dark";
-  if (mode === "light" || mode === "dark") {
-    return /* @__PURE__ */ jsx("div", { className: scopeClassName, "data-shuffle-mode": mode, "data-shuffle-mcp-root": true, children: tree });
+  if (sameAsParent) {
+    return /* @__PURE__ */ jsx(ShuffleMcpThemeContext.Provider, { value: ctxValue, children });
   }
-  return /* @__PURE__ */ jsx("div", { className: "shuffle-mcp-scope", "data-shuffle-mode": "auto", "data-shuffle-mcp-root": true, children: tree });
+  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 }) }) });
 };
 
 // ShuffleMCP.tsx
@@ -12539,10 +12558,22 @@ var AgentExecutionDrawer = ({
 var AgentExecutionDrawer_default = AgentExecutionDrawer;
 
 // AgentsView.tsx
-import { useCallback as useCallback10, useState as useState15 } from "react";
+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";
-var AgentsView = ({ onSchedule, maxWidth = 820, onChooseLLM, hideChooseLLM, globalUrl, isLoaded, isLoggedIn, userdata, serverside }) => {
+var AgentsView = ({
+  onSchedule,
+  maxWidth = 820,
+  onChooseLLM,
+  hideChooseLLM,
+  localLLMSlot,
+  permissionsSlot,
+  globalUrl,
+  isLoaded,
+  isLoggedIn,
+  userdata,
+  serverside
+}) => {
   useSyncHostBaseUrl(globalUrl);
   const [selectedRun, setSelectedRun] = useState15(null);
   const [agentView, setAgentView] = useState15("start");
@@ -12552,6 +12583,33 @@ var AgentsView = ({ onSchedule, maxWidth = 820, onChooseLLM, hideChooseLLM, glob
     key: 0
   });
   const [editing, setEditing] = useState15(null);
+  const [builtInDrawer, setBuiltInDrawer] = useState15({
+    open: false,
+    tab: "localLLM"
+  });
+  const effectiveLocalLLMSlot = useMemo7(
+    () => localLLMSlot ?? /* @__PURE__ */ jsxs20(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",
+      " ",
+      /* @__PURE__ */ jsx24("code", { style: { fontFamily: "monospace" }, children: "onChooseLLM" }),
+      " handler or a",
+      " ",
+      /* @__PURE__ */ jsx24("code", { style: { fontFamily: "monospace" }, children: "localLLMSlot" }),
+      " to",
+      " ",
+      /* @__PURE__ */ jsx24("code", { style: { fontFamily: "monospace" }, children: "<AgentsView />" }),
+      " to render your own configuration UI here."
+    ] }),
+    [localLLMSlot]
+  );
+  const handleChooseLLM = useCallback10(() => {
+    if (onChooseLLM) {
+      onChooseLLM();
+      return;
+    }
+    setBuiltInDrawer({ open: true, tab: "localLLM" });
+  }, [onChooseLLM]);
   const handleEditWorkflow = useCallback10(
     ({ workflowId, name, prompt, apps }) => {
       setEditing({ workflowId, name });
@@ -12632,7 +12690,7 @@ var AgentsView = ({ onSchedule, maxWidth = 820, onChooseLLM, hideChooseLLM, glob
           apiBaseUrl: globalUrl,
           onViewChange: setAgentView,
           onSchedule,
-          onChooseLLM,
+          onChooseLLM: handleChooseLLM,
           hideChooseLLM,
           defaultInput: prefill.input,
           defaultApps: prefill.apps.length > 0 ? prefill.apps : void 0,
@@ -12662,13 +12720,25 @@ var AgentsView = ({ onSchedule, maxWidth = 820, onChooseLLM, hideChooseLLM, glob
         apiBaseUrl: globalUrl,
         onSchedule
       }
+    ),
+    /* @__PURE__ */ jsx24(
+      AgentRunDrawer_default,
+      {
+        open: builtInDrawer.open,
+        onClose: () => setBuiltInDrawer((s) => ({ ...s, open: false })),
+        initialTab: builtInDrawer.tab,
+        globalUrl,
+        localLLMSlot: effectiveLocalLLMSlot,
+        permissionsSlot,
+        agentUIProps: { onSchedule, apiBaseUrl: globalUrl }
+      }
     )
   ] });
 };
 var AgentsView_default = AgentsView;
 
 // useAppLookup.ts
-import { useEffect as useEffect14, useMemo as useMemo7, useState as useState16 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo8, useState as useState16 } from "react";
 var norm3 = (s) => s.toLowerCase().replace(/[\s_\-]+/g, "_");
 function useAppLookup(appName) {
   const [loading, setLoading] = useState16(false);
@@ -12761,13 +12831,13 @@ function useAppLookup(appName) {
       setLoading(false);
     })();
   }, [appName]);
-  const matchingEntries = useMemo7(() => {
+  const matchingEntries = useMemo8(() => {
     if (!appName) return [];
     return authenticatedApps.filter(
       (auth) => auth.app?.name && norm3(auth.app.name) === norm3(appName)
     );
   }, [appName, authenticatedApps]);
-  const image = useMemo7(() => {
+  const image = useMemo8(() => {
     if (info?.image) return info.image;
     for (const entry of matchingEntries) {
       const img = entry.app?.large_image || entry.large_image;
@@ -12775,7 +12845,7 @@ function useAppLookup(appName) {
     }
     return "";
   }, [info, matchingEntries]);
-  const algoliaApp = useMemo7(() => {
+  const algoliaApp = useMemo8(() => {
     if (!appName) return null;
     return {
       objectID: algoliaId || appName,
@@ -12887,10 +12957,15 @@ 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 = ({ colorMode, ...rest }) => React5.createElement(
+  const Wrapped = ({ theme, colorMode, ...rest }) => React5.createElement(
     ShuffleMcpThemeProvider,
-    { mode: colorMode },
+    { mode: resolveMode(theme, colorMode) },
     React5.createElement(Inner, { ...rest })
   );
   Wrapped.displayName = `ShuffleMCPs(${displayName})`;
@@ -12898,9 +12973,9 @@ var withMcpTheme = (Inner, displayName) => {
 };
 var withMcpThemeRef = (Inner, displayName) => {
   const Wrapped = React5.forwardRef(
-    ({ colorMode, ...rest }, ref) => React5.createElement(
+    ({ theme, colorMode, ...rest }, ref) => React5.createElement(
       ShuffleMcpThemeProvider,
-      { mode: colorMode },
+      { mode: resolveMode(theme, colorMode) },
       React5.createElement(Inner, { ...rest, ref })
     )
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuffleio/shuffle-mcps",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Turn 3,000+ SaaS tools into MCP servers your agents can use. Headless React component for search, selection, and OAuth handoff.",
   "license": "MIT",
   "repository": {