@gen3/workspaces 0.12.51 → 0.12.53

package/dist/index/cjs/index.js

@@ -5,16 +5,16 @@ var React = require('react');
 var frontend = require('@gen3/frontend');
 var core = require('@mantine/core');
 var react = require('@iconify-icon/react');
+var hooks = require('@mantine/hooks');
 var core$1 = require('@gen3/core');
 var useDeepCompare = require('use-deep-compare');
 var notifications = require('@mantine/notifications');
-var hooks = require('@mantine/hooks');
 var io5 = require('react-icons/io5');
 var bs = require('react-icons/bs');
 var md = require('react-icons/md');
 var lodash = require('lodash');
 
-const WorkspaceTierCard = ({ label, description, tier, features = [], tooltip = 'Launch workspace', buttonLabel = 'Launch', onSelectTier, baseColor })=>{
+const WorkspaceTierCard = ({ label, description, tier, tierLabel = undefined, features = [], tooltip = 'Launch workspace', buttonLabel = 'Launch', onSelectTier, baseColor })=>{
     const handleClick = React.useCallback(()=>onSelectTier(tier), [
         onSelectTier,
         tier
@@ -49,7 +49,7 @@ const WorkspaceTierCard = ({ label, description, tier, features = [], tooltip =
                         color: "primary.4",
                         size: "lg",
                         fw: 500,
-                        children: tier !== 'free' ? 'paid' : 'free'
+                        children: tierLabel ?? (tier === 'remote' ? 'paid' : 'free')
                     })
                 })
             }),
@@ -115,10 +115,10 @@ const WorkspaceTierCard = ({ label, description, tier, features = [], tooltip =
 };
 
 const DEFAULT_CLASSNAMES = {
-    root: 'mx-auto w-full max-w-7xl p-6 md:p-10',
-    background: 'relative overflow-hidden md:p-12',
+    root: 'mx-auto w-full h-full overflow-auto max-w-7xl p-6 sm:p-2 md:p-4 lg:p-8',
+    background: 'relative overflow-hidden sm:p-2 md:p-4 lg:p-8',
     label: 'text-md uppercase tracking-[0.28em] text-primary',
-    description: 'text-4xl font-black leading-tight text-primary md:text-3xl sm:text-2xl mt-4 mb-4',
+    description: 'font-black leading-tight text-primary md:text-3xl sm:text-2xl xs:text-lg mt-4 mb-4',
     additionalDescription: 'max-w-2xl text-md font-medium text-base-contrast',
     button: 'mt-10 flex w-full items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-semibold text-primary-contrast shadow-sm hover:bg-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
 };
@@ -129,36 +129,43 @@ const TierSelectorLanding = ({ cards, onSelectTier, classNames, label = 'Gen3 Ju
     const mergedClassnames = React.useMemo(()=>frontend.mergeDefaultTailwindClassnames(DEFAULT_CLASSNAMES, classNames ?? {}), [
         classNames
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+    return /*#__PURE__*/ jsxRuntime.jsx(core.Container, {
+        size: "xl",
         className: mergedClassnames.root,
-        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(core.Stack, {
+            gap: "lg",
             className: mergedClassnames.background,
             children: [
-                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: "mb-10 flex flex-col gap-6 md:flex-row md:items-end md:justify-between",
-                    children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx("p", {
-                                className: "text-md uppercase tracking-[0.28em] text-primary",
-                                children: label
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx("p", {
-                                className: mergedClassnames.description,
-                                children: description
-                            }),
-                            additionalDescriptions.map((desc)=>/*#__PURE__*/ jsxRuntime.jsx("p", {
-                                    className: mergedClassnames.additionalDescription,
-                                    children: desc
-                                }, desc.slice(0, 20)))
-                        ]
-                    })
+                /*#__PURE__*/ jsxRuntime.jsxs(core.Stack, {
+                    gap: "xs",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(core.Text, {
+                            className: mergedClassnames.label,
+                            children: label
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core.Text, {
+                            className: mergedClassnames.description,
+                            children: description
+                        }),
+                        additionalDescriptions.map((desc)=>/*#__PURE__*/ jsxRuntime.jsx(core.Text, {
+                                className: mergedClassnames.additionalDescription,
+                                children: desc
+                            }, desc.slice(0, 20)))
+                    ]
                 }),
-                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: "grid gap-5 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1",
+                /*#__PURE__*/ jsxRuntime.jsx(core.SimpleGrid, {
+                    cols: {
+                        base: 2,
+                        sm: 2,
+                        md: 2,
+                        lg: 3
+                    },
+                    spacing: "md",
                     role: "list",
                     "aria-label": "Workspace tier selection",
                     children: Object.values(cards).map((card)=>/*#__PURE__*/ jsxRuntime.jsx(WorkspaceTierCard, {
                             tier: card.tier,
+                            tierLabel: card.tierLabel,
                             onSelectTier: onSelectTier,
                             label: card.label,
                             description: card.description,
@@ -198,49 +205,60 @@ const FreeWorkspace = ({ assetBaseUrl = '/api/workspace-assets/free', onReady, o
             }
         };
     }, []);
-    // Handle setting up iframe event listeners
+    // Handle setting up iframe event listeners for activity detection.
+    // Tries same-origin contentDocument access first; falls back to
+    // focus/blur heuristics when the iframe is cross-origin.
     React.useEffect(()=>{
         if (!jupyterReady) return;
         const updateUserActivity = ()=>{
-            const timestamp = Date.now();
             if (broadcastChannelRef.current) {
                 broadcastChannelRef.current.postMessage({
                     type: 'activity-update',
-                    timestamp
+                    timestamp: Date.now()
                 });
             }
         };
         const iframe = iframeRef.current;
-        if (!iframe?.contentWindow) {
-            return;
-        }
-        try {
-            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-            if (iframeDoc) {
-                iframeDoc.addEventListener('mousedown', updateUserActivity);
-                iframeDoc.addEventListener('keypress', updateUserActivity);
-                iframeDoc.addEventListener('scroll', updateUserActivity);
-                iframeDoc.addEventListener('click', updateUserActivity);
-                iframeDoc.addEventListener('touchstart', updateUserActivity);
+        let usedDirectListeners = false;
+        if (iframe?.contentWindow) {
+            try {
+                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+                if (iframeDoc) {
+                    iframeDoc.addEventListener('mousedown', updateUserActivity);
+                    iframeDoc.addEventListener('keypress', updateUserActivity);
+                    iframeDoc.addEventListener('scroll', updateUserActivity);
+                    iframeDoc.addEventListener('touchstart', updateUserActivity);
+                    usedDirectListeners = true;
+                }
+            } catch  {
+            // cross-origin — fall through to focus/blur fallback
             }
-        } catch (error) {
-            console.warn('Cannot access iframe content - cross-origin restriction', error);
+        }
+        // Fallback: treat iframe receiving focus as user activity.
+        // This fires when the user clicks into the iframe even if we
+        // cannot attach listeners to its document directly.
+        if (!usedDirectListeners) {
+            window.addEventListener('blur', updateUserActivity);
+            window.addEventListener('focus', updateUserActivity);
         }
         return ()=>{
-            if (iframe?.contentWindow) {
+            if (usedDirectListeners && iframe?.contentWindow) {
                 try {
                     const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                     if (iframeDoc) {
                         iframeDoc.removeEventListener('mousedown', updateUserActivity);
                         iframeDoc.removeEventListener('keypress', updateUserActivity);
                         iframeDoc.removeEventListener('scroll', updateUserActivity);
-                        iframeDoc.removeEventListener('click', updateUserActivity);
                         iframeDoc.removeEventListener('touchstart', updateUserActivity);
                     }
                 } catch  {
                 // Ignore cleanup errors
                 }
             }
+            if (!usedDirectListeners) {
+                window.removeEventListener('blur', updateUserActivity);
+                window.removeEventListener('focus', updateUserActivity);
+            }
         };
     }, [
         jupyterReady
@@ -685,6 +703,7 @@ const notifyUser = (title, message, status = 0)=>{
         [1]: 'utility.2',
         [2]: 'utility.4'
     };
+    notifications.notifications.clean();
     notifications.notifications.show({
         title,
         message,
@@ -708,7 +727,7 @@ const workspaceShutdownAlertLimit = 30000; // 5 minutes: 5 * 60 * 1000 TODO Figu
 /**
  *  Monitors resource usage.
  *  Handles state changes and polls for workspace status using the JEG APIs
- */ const useJEGWorkspaceResourceMonitor = (workspaceId = null, monitorWorkspace)=>{
+ */ const useJEGWorkspaceResourceMonitor = (workspaceId = null, monitorWorkspace, startTimeLimit = MAXIMUM_START_TIME_IN_MINUTES)=>{
     // start with default polling interval of 1 second
     const [pollingInterval, setPollingInterval] = React.useState(frontend.convertSecondsToMilliseconds(1));
     const [error, setError] = React.useState(null);
@@ -872,8 +891,8 @@ const workspaceShutdownAlertLimit = 30000; // 5 minutes: 5 * 60 * 1000 TODO Figu
         activeStatus
     ]);
     React.useEffect(()=>{
-        // time out if exceeding maximum start timee
-        if (requestedStatus === core$1.RequestedWorkspaceStatus.Launch && core$1.isTimeGreaterThan(requestedStatusTimestamp, MAXIMUM_START_TIME_IN_MINUTES)) {
+        // time out if exceeding maximum start time
+        if (requestedStatus === core$1.RequestedWorkspaceStatus.Launch && core$1.isTimeGreaterThan(requestedStatusTimestamp, startTimeLimit)) {
             if (workspaceId) terminateWorkspace(encodeURIComponent(workspaceId));
             dispatch(core$1.setJEGRequestedWorkspaceStatus(core$1.RequestedWorkspaceStatus.Terminate));
             setError('Workspace failed to start. Shutting down');
@@ -884,7 +903,8 @@ const workspaceShutdownAlertLimit = 30000; // 5 minutes: 5 * 60 * 1000 TODO Figu
         dispatch,
         workspaceStatusData,
         workspaceId,
-        terminateWorkspace
+        terminateWorkspace,
+        startTimeLimit
     ]);
 };
 
@@ -901,10 +921,10 @@ const useMicroContainerReduxContext = ()=>{
     }
     return context;
 };
-function MicroContainerReduxProvider({ children, identifierTag, enabled }) {
+function MicroContainerReduxProvider({ children, identifierTag, enabled, startTimeLimit = undefined }) {
     const tag = identifierTag ?? (process.env.NEXT_PUBLIC_MICRO_CONTAINER_TAG || '');
     const value = useMicroContainerRedux(tag, enabled);
-    useJEGWorkspaceResourceMonitor(value.containerHash);
+    useJEGWorkspaceResourceMonitor(value.containerHash, true, startTimeLimit);
     return /*#__PURE__*/ jsxRuntime.jsx(MicroContainerReduxProviderContext.Provider, {
         value: value,
         children: children
@@ -938,19 +958,21 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
         coreDispatch
     ]);
     /* ── Elapsed timer for launching state ── */ const [elapsedSec, setElapsedSec] = React.useState(0);
+    const interval = hooks.useInterval(()=>{
+        const elapsed = Math.floor((Date.now() - requestedStatusTimestamp) / 1000);
+        setElapsedSec(elapsed);
+    }, 1000);
     React.useEffect(()=>{
-        if (status !== core$1.WorkspaceStatus.Launching) {
+        if (status === core$1.WorkspaceStatus.Launching) {
+            interval.start();
+        } else {
             setElapsedSec(0);
-            return;
+            interval.stop();
         }
-        const interval = Math.floor((Date.now() - requestedStatusTimestamp) / 1000);
-        const t = setInterval(()=>{
-            setElapsedSec(interval);
-        }, 1000);
-        return ()=>clearInterval(t);
+        return interval.stop;
     }, [
-        requestedStatusTimestamp,
-        status
+        status,
+        interval
     ]);
     /* ── Auto-reset after 15 s in launch-error state ── */ React.useEffect(()=>{
         if (status !== core$1.WorkspaceStatus.LaunchError) return;
@@ -1004,9 +1026,6 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
         });
     }
     /* ── launching ── */ if (status === core$1.WorkspaceStatus.Launching) {
-        const mins = Math.floor(elapsedSec / 60);
-        const secs = elapsedSec % 60;
-        const elapsed = mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
         return /*#__PURE__*/ jsxRuntime.jsxs("div", {
             role: "status",
             className: PanelStyle$2,
@@ -1029,7 +1048,9 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
                             className: "mt-1 text-sm text-base-darker",
                             children: [
                                 "Elapsed: ",
-                                elapsed
+                                elapsedSec,
+                                " ",
+                                elapsedSec === 1 ? 'second' : 'seconds'
                             ]
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx("p", {
@@ -1177,49 +1198,60 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
             }
         };
     }, []);
-    // Handle setting up iframe event listeners
+    // Handle setting up iframe event listeners for activity detection.
+    // Tries same-origin contentDocument access first; falls back to
+    // focus/blur heuristics when the iframe is cross-origin.
     React.useEffect(()=>{
         if (!jupyterReady) return;
         const updateUserActivity = ()=>{
-            const timestamp = Date.now();
             if (broadcastChannelRef.current) {
                 broadcastChannelRef.current.postMessage({
                     type: 'activity-update',
-                    timestamp
+                    timestamp: Date.now()
                 });
             }
         };
         const iframe = iframeRef.current;
-        if (!iframe?.contentWindow) {
-            return;
-        }
-        try {
-            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-            if (iframeDoc) {
-                iframeDoc.addEventListener('mousedown', updateUserActivity);
-                iframeDoc.addEventListener('keypress', updateUserActivity);
-                iframeDoc.addEventListener('scroll', updateUserActivity);
-                iframeDoc.addEventListener('click', updateUserActivity);
-                iframeDoc.addEventListener('touchstart', updateUserActivity);
+        let usedDirectListeners = false;
+        if (iframe?.contentWindow) {
+            try {
+                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+                if (iframeDoc) {
+                    iframeDoc.addEventListener('mousedown', updateUserActivity);
+                    iframeDoc.addEventListener('keypress', updateUserActivity);
+                    iframeDoc.addEventListener('scroll', updateUserActivity);
+                    iframeDoc.addEventListener('touchstart', updateUserActivity);
+                    usedDirectListeners = true;
+                }
+            } catch  {
+            // cross-origin — fall through to focus/blur fallback
             }
-        } catch (error) {
-            console.warn('Cannot access iframe content - cross-origin restriction', error);
+        }
+        // Fallback: treat iframe receiving focus as user activity.
+        // This fires when the user clicks into the iframe even if we
+        // cannot attach listeners to its document directly.
+        if (!usedDirectListeners) {
+            window.addEventListener('blur', updateUserActivity);
+            window.addEventListener('focus', updateUserActivity);
         }
         return ()=>{
-            if (iframe?.contentWindow) {
+            if (usedDirectListeners && iframe?.contentWindow) {
                 try {
                     const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                     if (iframeDoc) {
                         iframeDoc.removeEventListener('mousedown', updateUserActivity);
                         iframeDoc.removeEventListener('keypress', updateUserActivity);
                         iframeDoc.removeEventListener('scroll', updateUserActivity);
-                        iframeDoc.removeEventListener('click', updateUserActivity);
                         iframeDoc.removeEventListener('touchstart', updateUserActivity);
                     }
                 } catch  {
                 // Ignore cleanup errors
                 }
             }
+            if (!usedDirectListeners) {
+                window.removeEventListener('blur', updateUserActivity);
+                window.removeEventListener('focus', updateUserActivity);
+            }
         };
     }, [
         jupyterReady
@@ -1415,7 +1447,8 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
                     className: "min-h-0 flex-1 border-0",
                     onLoad: ()=>{
                         setLoading(false);
-                        setJupyterReady(true);
+                    // jupyterReady is set by the polling effect once the
+                    // JupyterLite app reports status === 'ready'
                     },
                     onError: ()=>{
                         setLoadError(true);
@@ -2154,27 +2187,11 @@ const UpgradeActionsPanel = ({ currentTier, onUpgradeToRemote, onRequestQuotaInc
             /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 className: "space-y-2 p-4 pt-0",
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsxs(core.Stack, {
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsxs(core.Group, {
-                                justify: "space-between",
-                                wrap: "nowrap",
-                                children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx("p", {
-                                        className: "text-md font-bold text-base-contrast-max",
-                                        children: "Current Tier"
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(core.Badge, {
-                                        color: "primary.3",
-                                        children: currentTier
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx("p", {
-                                className: "mt-1 text-sm text-base-contrast-max",
-                                children: currentTier === 'free' ? 'Upgrade to remote kernels for long-running jobs and larger memory footprints.' : 'Remote compute is active. You can request expanded quota for larger workloads.'
-                            })
-                        ]
+                    /*#__PURE__*/ jsxRuntime.jsx(core.Stack, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx("p", {
+                            className: "my-1 text-sm text-base-contrast-max",
+                            children: currentTier === 'free' ? 'Upgrade to remote kernels for long-running jobs and larger memory footprints.' : 'Remote compute is active. You can request expanded quota for larger workloads.'
+                        })
                     }),
                     currentTier === 'free' && /*#__PURE__*/ jsxRuntime.jsx(core.Button, {
                         onClick: onUpgradeToRemote,
@@ -2241,7 +2258,7 @@ function HorizontalAccordion({ label, expanded, setExpanded, children, expandedW
     });
     const mergedClassNames = frontend.mergeDefaultTailwindClassnames(STYLING_DEFAULTS, classNames);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: `overflow-hidden shrink-0 ${mergedClassNames.root}`,
+        className: `${mergedClassNames.root}`,
         style: {
             width: expanded ? expandedWidth : collapsedWidth,
             transition: `width ${TRANSITION_MS}ms ease`
@@ -2276,7 +2293,7 @@ function HorizontalAccordion({ label, expanded, setExpanded, children, expandedW
                     ]
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: "overflow-hidden h-full shrink-0 px-2",
+                    className: "overflow-hidden px-2",
                     style: {
                         opacity: expanded ? 1 : 0,
                         pointerEvents: expanded ? 'auto' : 'none',
@@ -2304,9 +2321,8 @@ const SettingsPanel = ({ showKernels, expanded, setExpanded, width = 380 })=>{
         setExpanded: setExpanded,
         rightSide: true,
         expandedWidth: width,
-        children: /*#__PURE__*/ jsxRuntime.jsxs(core.Stack, {
-            gap: "sm",
-            className: PanelStyle,
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: `${PanelStyle} overflow-y-scroll`,
             children: [
                 showKernels && /*#__PURE__*/ jsxRuntime.jsx(KernelLifecyclePanel, {}),
                 /*#__PURE__*/ jsxRuntime.jsx(UpgradeActionsPanel, {
@@ -2322,7 +2338,7 @@ const WorkspaceToolbar = /*#__PURE__*/ React.forwardRef(({ toolbarConfiguration
     const workspaceTier = core$1.useCoreSelector((state)=>core$1.selectWorkspaceTier(state));
     const workspaceStatus = core$1.useCoreSelector((state)=>core$1.selectJEGActiveWorkspaceStatus(state));
     const isFullscreen = core$1.useCoreSelector((state)=>core$1.selectWorkspaceFullscreen(state));
-    const { showStatus, showStop } = toolbarConfiguration || {};
+    const { showStatus, showStop, tierLabel } = toolbarConfiguration || {};
     const coreDispatch = core$1.useCoreDispatch();
     const toggleFullscreen = React.useCallback(()=>{
         coreDispatch(core$1.setWorkspaceFullscreen(!isFullscreen));
@@ -2375,8 +2391,8 @@ const WorkspaceToolbar = /*#__PURE__*/ React.forwardRef(({ toolbarConfiguration
                                         children: toolbarConfiguration?.description
                                     }),
                                     /*#__PURE__*/ jsxRuntime.jsx(core.Badge, {
-                                        "aria-label": `Workspace tier: ${workspaceTier}`,
-                                        children: workspaceTier
+                                        "aria-label": `Workspace tier: ${tierLabel ?? workspaceTier}`,
+                                        children: tierLabel ?? workspaceTier
                                     })
                                 ]
                             })
@@ -3975,7 +3991,7 @@ const WorkspaceCenter = ({ workspaces, landingPage, tierConfiguration })=>{
     ]);
     if (!workspaceTier) {
         return /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: "w-full bg-base-lightest ",
+            className: "w-full h-full overflow-hidden bg-base-lightest ",
             children: /*#__PURE__*/ jsxRuntime.jsx(TierSelectorLanding, {
                 cards: workspaces,
                 onSelectTier: handleSelectTier,
@@ -3993,9 +4009,11 @@ const WorkspaceCenter = ({ workspaces, landingPage, tierConfiguration })=>{
         });
     }
     if (workspaceTier === 'remote') {
+        const config = tierConfiguration.remote;
         return /*#__PURE__*/ jsxRuntime.jsx(frontend.ProtectedContent, {
             children: /*#__PURE__*/ jsxRuntime.jsx(MicroContainerReduxProvider, {
                 enabled: true,
+                startTimeLimit: config?.startTimeLimit,
                 children: /*#__PURE__*/ jsxRuntime.jsx(WorkspaceLayout, {
                     tierConfiguration: tierConfiguration.remote,
                     children: /*#__PURE__*/ jsxRuntime.jsx(RemoteComputeWorkspace, {