@shuffleio/shuffle-mcps 0.0.28 → 0.0.30

package/dist/index.d.mts

@@ -810,10 +810,14 @@ interface AgentsViewProps extends ShuffleHostProps {
     localLLMSlot?: React.ReactNode;
     /** Content for the built-in AgentRunDrawer's Permissions tab. Optional. */
     permissionsSlot?: React.ReactNode;
-    /** Pre-fill the starter chip row on mount (e.g. from persisted host state). */
+    /** Pre-fill the starter chip row on mount (e.g. from persisted host state). When omitted, AgentsView restores its own persisted selection from localStorage (24h TTL). */
     initialApps?: AgentUIApp[];
-    /** Called whenever the chip row under the prompt changes. */
+    /** Called whenever the chip row under the prompt changes. When omitted, AgentsView still persists internally. */
     onAppsChange?: (apps: AgentUIApp[]) => void;
+    /** Disable AgentsView's internal localStorage persistence of the chip row. */
+    disableAppsPersistence?: boolean;
+    /** Storage key for internal chip-row persistence. Defaults to `shuffle-agents-selected-apps`. */
+    appsStorageKey?: string;
 }
 
 interface AgentLocalModel {

package/dist/index.d.ts

@@ -810,10 +810,14 @@ interface AgentsViewProps extends ShuffleHostProps {
     localLLMSlot?: React.ReactNode;
     /** Content for the built-in AgentRunDrawer's Permissions tab. Optional. */
     permissionsSlot?: React.ReactNode;
-    /** Pre-fill the starter chip row on mount (e.g. from persisted host state). */
+    /** Pre-fill the starter chip row on mount (e.g. from persisted host state). When omitted, AgentsView restores its own persisted selection from localStorage (24h TTL). */
     initialApps?: AgentUIApp[];
-    /** Called whenever the chip row under the prompt changes. */
+    /** Called whenever the chip row under the prompt changes. When omitted, AgentsView still persists internally. */
     onAppsChange?: (apps: AgentUIApp[]) => void;
+    /** Disable AgentsView's internal localStorage persistence of the chip row. */
+    disableAppsPersistence?: boolean;
+    /** Storage key for internal chip-row persistence. Defaults to `shuffle-agents-selected-apps`. */
+    appsStorageKey?: string;
 }
 
 interface AgentLocalModel {

package/dist/index.js

@@ -7072,7 +7072,11 @@ function AppSearchDrawer({
           paper: {
             className: scopeClassName,
             sx: {
-              width: { xs: "100%", sm: width },
+              // Strict, environment-independent sizing so the drawer
+              // looks identical on every host (Shuffle Security, /agents,
+              // test page, embedded library, etc.). No breakpoint variance.
+              width: `min(${width}px, 100vw)`,
+              minWidth: `min(${width}px, 100vw)`,
               maxWidth: "100vw",
               height: "100vh",
               display: "flex",
@@ -7182,32 +7186,34 @@ function AppSearchDrawer({
                     overflowY: "auto"
                   },
                   "& .singul-results-grid": {
-                    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                    gridAutoRows: "78px",
-                    gap: "12px"
+                    gridTemplateColumns: "repeat(2, minmax(0, 1fr)) !important",
+                    gridAutoRows: "78px !important",
+                    gap: "12px !important"
                   },
                   "& .singul-results-grid .singul-dropdown-item": {
                     minWidth: 0,
-                    minHeight: 78,
-                    maxHeight: 78,
-                    height: 78,
-                    padding: "10px 14px",
+                    minHeight: "78px !important",
+                    maxHeight: "78px !important",
+                    height: "78px !important",
+                    padding: "10px 14px !important",
                     alignItems: "center",
-                    overflow: "hidden"
+                    overflow: "hidden",
+                    boxSizing: "border-box"
                   },
                   "& .singul-results-grid .singul-app-info": {
                     alignItems: "center",
-                    gap: "12px"
+                    gap: "12px !important"
                   },
                   "& .singul-results-grid .singul-app-icon": {
-                    width: 36,
-                    height: 36,
-                    borderRadius: 8,
-                    padding: 4
+                    width: "36px !important",
+                    height: "36px !important",
+                    minWidth: "36px !important",
+                    borderRadius: "8px !important",
+                    padding: "4px !important"
                   },
                   "& .singul-results-grid .singul-app-details": { minWidth: 0 },
                   "& .singul-results-grid .singul-app-name": { maxWidth: "100%" },
-                  "& .singul-results-grid .singul-checkbox": { marginLeft: "auto" },
+                  "& .singul-results-grid .singul-checkbox": { marginLeft: "auto", flexShrink: 0 },
                   ...highlightActive && highlightAppName ? {
                     [`& .singul-dropdown-item[data-app-name="${highlightAppName}"]`]: {
                       borderColor: "hsl(var(--primary)) !important",
@@ -14182,7 +14188,35 @@ var AgentExecutionDrawer_default = AgentExecutionDrawer;
 // views/AgentsView.tsx
 var import_react20 = require("react");
 var import_material22 = require("@mui/material");
+init_api();
 var import_jsx_runtime26 = require("react/jsx-runtime");
+var APPS_TTL_MS = 24 * 60 * 60 * 1e3;
+var DEFAULT_APPS_STORAGE_KEY = "shuffle-agents-selected-apps";
+var readPersistedApps = (storageKey) => {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return void 0;
+    const parsed = JSON.parse(raw);
+    if (!parsed?.savedAt || !Array.isArray(parsed.apps) || parsed.apps.length === 0) return void 0;
+    if (Date.now() - parsed.savedAt > APPS_TTL_MS) {
+      window.localStorage.removeItem(storageKey);
+      return void 0;
+    }
+    return parsed.apps.filter((a) => a && typeof a.name === "string");
+  } catch {
+    return void 0;
+  }
+};
+var resolveTheme = (theme) => {
+  if (theme === "light" || theme === "dark") return theme;
+  if (typeof window === "undefined" || !window.matchMedia) return theme;
+  try {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  } catch {
+    return void 0;
+  }
+};
 var AgentsView = ({
   onSchedule,
   maxWidth = 820,
@@ -14192,7 +14226,9 @@ var AgentsView = ({
   permissionsSlot,
   initialApps,
   onAppsChange,
-  globalUrl,
+  disableAppsPersistence,
+  appsStorageKey = DEFAULT_APPS_STORAGE_KEY,
+  globalUrl = API_CONFIG.baseUrl,
   isLoaded,
   isLoggedIn,
   userdata,
@@ -14203,14 +14239,44 @@ var AgentsView = ({
   orgId
 }) => {
   useSyncHostBaseUrl(globalUrl);
+  const resolvedTheme = (0, import_react20.useMemo)(() => resolveTheme(theme), [theme]);
+  const hydratedInitialApps = (0, import_react20.useMemo)(() => {
+    if (initialApps && initialApps.length > 0) return initialApps;
+    if (disableAppsPersistence) return [];
+    return readPersistedApps(appsStorageKey) ?? [];
+  }, []);
   const [selectedRun, setSelectedRun] = (0, import_react20.useState)(null);
   const [agentView, setAgentView] = (0, import_react20.useState)("start");
   const [prefill, setPrefill] = (0, import_react20.useState)({
     input: "",
-    apps: initialApps && initialApps.length > 0 ? initialApps : [],
+    apps: hydratedInitialApps,
     key: 0
   });
   const [editing, setEditing] = (0, import_react20.useState)(null);
+  const handleAppsChange = (0, import_react20.useCallback)((apps) => {
+    if (onAppsChange) {
+      try {
+        onAppsChange(apps);
+      } catch {
+      }
+    }
+    if (disableAppsPersistence) return;
+    try {
+      if (typeof window === "undefined") return;
+      if (!apps || apps.length === 0) {
+        window.localStorage.removeItem(appsStorageKey);
+        return;
+      }
+      const slim = apps.filter((a) => a && typeof a.name === "string").map((a) => ({ name: a.name, id: a.id, icon: a.icon }));
+      window.localStorage.setItem(
+        appsStorageKey,
+        JSON.stringify({ savedAt: Date.now(), apps: slim })
+      );
+    } catch {
+    }
+  }, [onAppsChange, disableAppsPersistence, appsStorageKey]);
+  (0, import_react20.useEffect)(() => {
+  }, [handleAppsChange]);
   const [builtInDrawer, setBuiltInDrawer] = (0, import_react20.useState)({
     open: false,
     tab: "localLLM"
@@ -14231,23 +14297,17 @@ var AgentsView = ({
         isLoaded,
         isLoggedIn,
         serverside,
-        theme,
+        theme: resolvedTheme,
         colorMode
       }
     ),
-    [localLLMSlot, globalUrl, userdata, isLoaded, isLoggedIn, serverside, theme, colorMode]
+    [localLLMSlot, globalUrl, userdata, isLoaded, isLoggedIn, serverside, resolvedTheme, colorMode]
   );
   const handleChooseLLM = (0, import_react20.useCallback)(() => {
     if (onChooseLLM) {
       onChooseLLM();
       return;
     }
-    if (typeof window !== "undefined" && window.__shuffleAgentDrawerMounted > 0) {
-      window.dispatchEvent(
-        new CustomEvent("agent-drawer-open", { detail: { tab: "localLLM" } })
-      );
-      return;
-    }
     setBuiltInDrawer({ open: true, tab: "localLLM" });
   }, [onChooseLLM]);
   const handleEditWorkflow = (0, import_react20.useCallback)(
@@ -14341,9 +14401,9 @@ var AgentsView = ({
           submitTooltip: editing ? "\u2318+Enter to save" : void 0,
           disableSchedule: Boolean(editing),
           disableScheduleTooltip: editing ? "Scheduling is disabled while editing an existing schedule" : void 0,
-          theme,
+          theme: resolvedTheme,
           colorMode,
-          onAppsChange
+          onAppsChange: handleAppsChange
         },
         prefill.key
       ),
@@ -14368,7 +14428,7 @@ var AgentsView = ({
         onSchedule: effectiveSchedule,
         apiKey,
         orgId,
-        theme,
+        theme: resolvedTheme,
         colorMode
       }
     ),
@@ -14381,9 +14441,9 @@ var AgentsView = ({
         globalUrl,
         localLLMSlot: effectiveLocalLLMSlot,
         permissionsSlot,
-        theme,
+        theme: resolvedTheme,
         colorMode,
-        agentUIProps: { onSchedule: effectiveSchedule, apiBaseUrl: globalUrl, apiKey, orgId, theme, colorMode }
+        agentUIProps: { onSchedule: effectiveSchedule, apiBaseUrl: globalUrl, apiKey, orgId, theme: resolvedTheme, colorMode }
       }
     )
   ] });

package/dist/index.mjs

@@ -6686,7 +6686,11 @@ function AppSearchDrawer({
           paper: {
             className: scopeClassName,
             sx: {
-              width: { xs: "100%", sm: width },
+              // Strict, environment-independent sizing so the drawer
+              // looks identical on every host (Shuffle Security, /agents,
+              // test page, embedded library, etc.). No breakpoint variance.
+              width: `min(${width}px, 100vw)`,
+              minWidth: `min(${width}px, 100vw)`,
               maxWidth: "100vw",
               height: "100vh",
               display: "flex",
@@ -6796,32 +6800,34 @@ function AppSearchDrawer({
                     overflowY: "auto"
                   },
                   "& .singul-results-grid": {
-                    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                    gridAutoRows: "78px",
-                    gap: "12px"
+                    gridTemplateColumns: "repeat(2, minmax(0, 1fr)) !important",
+                    gridAutoRows: "78px !important",
+                    gap: "12px !important"
                   },
                   "& .singul-results-grid .singul-dropdown-item": {
                     minWidth: 0,
-                    minHeight: 78,
-                    maxHeight: 78,
-                    height: 78,
-                    padding: "10px 14px",
+                    minHeight: "78px !important",
+                    maxHeight: "78px !important",
+                    height: "78px !important",
+                    padding: "10px 14px !important",
                     alignItems: "center",
-                    overflow: "hidden"
+                    overflow: "hidden",
+                    boxSizing: "border-box"
                   },
                   "& .singul-results-grid .singul-app-info": {
                     alignItems: "center",
-                    gap: "12px"
+                    gap: "12px !important"
                   },
                   "& .singul-results-grid .singul-app-icon": {
-                    width: 36,
-                    height: 36,
-                    borderRadius: 8,
-                    padding: 4
+                    width: "36px !important",
+                    height: "36px !important",
+                    minWidth: "36px !important",
+                    borderRadius: "8px !important",
+                    padding: "4px !important"
                   },
                   "& .singul-results-grid .singul-app-details": { minWidth: 0 },
                   "& .singul-results-grid .singul-app-name": { maxWidth: "100%" },
-                  "& .singul-results-grid .singul-checkbox": { marginLeft: "auto" },
+                  "& .singul-results-grid .singul-checkbox": { marginLeft: "auto", flexShrink: 0 },
                   ...highlightActive && highlightAppName ? {
                     [`& .singul-dropdown-item[data-app-name="${highlightAppName}"]`]: {
                       borderColor: "hsl(var(--primary)) !important",
@@ -13879,9 +13885,36 @@ var AgentExecutionDrawer = ({
 var AgentExecutionDrawer_default = AgentExecutionDrawer;
 
 // views/AgentsView.tsx
-import { useCallback as useCallback10, useMemo as useMemo8, useState as useState16 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect15, useMemo as useMemo8, useState as useState16 } from "react";
 import { Box as Box20, Stack, Typography as Typography19 } from "@mui/material";
 import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+var APPS_TTL_MS = 24 * 60 * 60 * 1e3;
+var DEFAULT_APPS_STORAGE_KEY = "shuffle-agents-selected-apps";
+var readPersistedApps = (storageKey) => {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return void 0;
+    const parsed = JSON.parse(raw);
+    if (!parsed?.savedAt || !Array.isArray(parsed.apps) || parsed.apps.length === 0) return void 0;
+    if (Date.now() - parsed.savedAt > APPS_TTL_MS) {
+      window.localStorage.removeItem(storageKey);
+      return void 0;
+    }
+    return parsed.apps.filter((a) => a && typeof a.name === "string");
+  } catch {
+    return void 0;
+  }
+};
+var resolveTheme = (theme) => {
+  if (theme === "light" || theme === "dark") return theme;
+  if (typeof window === "undefined" || !window.matchMedia) return theme;
+  try {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  } catch {
+    return void 0;
+  }
+};
 var AgentsView = ({
   onSchedule,
   maxWidth = 820,
@@ -13891,7 +13924,9 @@ var AgentsView = ({
   permissionsSlot,
   initialApps,
   onAppsChange,
-  globalUrl,
+  disableAppsPersistence,
+  appsStorageKey = DEFAULT_APPS_STORAGE_KEY,
+  globalUrl = API_CONFIG.baseUrl,
   isLoaded,
   isLoggedIn,
   userdata,
@@ -13902,14 +13937,44 @@ var AgentsView = ({
   orgId
 }) => {
   useSyncHostBaseUrl(globalUrl);
+  const resolvedTheme = useMemo8(() => resolveTheme(theme), [theme]);
+  const hydratedInitialApps = useMemo8(() => {
+    if (initialApps && initialApps.length > 0) return initialApps;
+    if (disableAppsPersistence) return [];
+    return readPersistedApps(appsStorageKey) ?? [];
+  }, []);
   const [selectedRun, setSelectedRun] = useState16(null);
   const [agentView, setAgentView] = useState16("start");
   const [prefill, setPrefill] = useState16({
     input: "",
-    apps: initialApps && initialApps.length > 0 ? initialApps : [],
+    apps: hydratedInitialApps,
     key: 0
   });
   const [editing, setEditing] = useState16(null);
+  const handleAppsChange = useCallback10((apps) => {
+    if (onAppsChange) {
+      try {
+        onAppsChange(apps);
+      } catch {
+      }
+    }
+    if (disableAppsPersistence) return;
+    try {
+      if (typeof window === "undefined") return;
+      if (!apps || apps.length === 0) {
+        window.localStorage.removeItem(appsStorageKey);
+        return;
+      }
+      const slim = apps.filter((a) => a && typeof a.name === "string").map((a) => ({ name: a.name, id: a.id, icon: a.icon }));
+      window.localStorage.setItem(
+        appsStorageKey,
+        JSON.stringify({ savedAt: Date.now(), apps: slim })
+      );
+    } catch {
+    }
+  }, [onAppsChange, disableAppsPersistence, appsStorageKey]);
+  useEffect15(() => {
+  }, [handleAppsChange]);
   const [builtInDrawer, setBuiltInDrawer] = useState16({
     open: false,
     tab: "localLLM"
@@ -13930,23 +13995,17 @@ var AgentsView = ({
         isLoaded,
         isLoggedIn,
         serverside,
-        theme,
+        theme: resolvedTheme,
         colorMode
       }
     ),
-    [localLLMSlot, globalUrl, userdata, isLoaded, isLoggedIn, serverside, theme, colorMode]
+    [localLLMSlot, globalUrl, userdata, isLoaded, isLoggedIn, serverside, resolvedTheme, colorMode]
   );
   const handleChooseLLM = useCallback10(() => {
     if (onChooseLLM) {
       onChooseLLM();
       return;
     }
-    if (typeof window !== "undefined" && window.__shuffleAgentDrawerMounted > 0) {
-      window.dispatchEvent(
-        new CustomEvent("agent-drawer-open", { detail: { tab: "localLLM" } })
-      );
-      return;
-    }
     setBuiltInDrawer({ open: true, tab: "localLLM" });
   }, [onChooseLLM]);
   const handleEditWorkflow = useCallback10(
@@ -14040,9 +14099,9 @@ var AgentsView = ({
           submitTooltip: editing ? "\u2318+Enter to save" : void 0,
           disableSchedule: Boolean(editing),
           disableScheduleTooltip: editing ? "Scheduling is disabled while editing an existing schedule" : void 0,
-          theme,
+          theme: resolvedTheme,
           colorMode,
-          onAppsChange
+          onAppsChange: handleAppsChange
         },
         prefill.key
       ),
@@ -14067,7 +14126,7 @@ var AgentsView = ({
         onSchedule: effectiveSchedule,
         apiKey,
         orgId,
-        theme,
+        theme: resolvedTheme,
         colorMode
       }
     ),
@@ -14080,9 +14139,9 @@ var AgentsView = ({
         globalUrl,
         localLLMSlot: effectiveLocalLLMSlot,
         permissionsSlot,
-        theme,
+        theme: resolvedTheme,
         colorMode,
-        agentUIProps: { onSchedule: effectiveSchedule, apiBaseUrl: globalUrl, apiKey, orgId, theme, colorMode }
+        agentUIProps: { onSchedule: effectiveSchedule, apiBaseUrl: globalUrl, apiKey, orgId, theme: resolvedTheme, colorMode }
       }
     )
   ] });
@@ -14090,7 +14149,7 @@ var AgentsView = ({
 var AgentsView_default = AgentsView;
 
 // useAppLookup.ts
-import { useEffect as useEffect15, useMemo as useMemo9, useState as useState17 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo9, useState as useState17 } from "react";
 var norm3 = (s) => s.toLowerCase().replace(/[\s_\-]+/g, "_");
 function useAppLookup(appName) {
   const [loading, setLoading] = useState17(false);
@@ -14104,7 +14163,7 @@ function useAppLookup(appName) {
     handleSaveAuth,
     refreshAuth
   } = useAppAuth();
-  useEffect15(() => {
+  useEffect16(() => {
     if (!appName) {
       setInfo(null);
       setAlgoliaId(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuffleio/shuffle-mcps",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "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": {