@gen3/workspaces 0.12.51 → 0.12.53

package/dist/index/esm/index.js

@@ -1,18 +1,18 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useCallback, useMemo, useState, useRef, useEffect, createContext, useImperativeHandle, forwardRef } from 'react';
 import { mergeDefaultTailwindClassnames, ACTIVITY_CHANNEL, convertSecondsToMilliseconds, InfoRolloverButton, OverflowTooltippedLabel, PanelErrorBoundary, ProtectedContent, FixedNavPageLayout, ContentSource, getNavPageLayoutPropsFromConfig } from '@gen3/frontend';
-import { Card, Stack, Badge, Text, List, Group, Tooltip, Button, LoadingOverlay, Alert, Loader, Divider, Select, ActionIcon, TextInput, Textarea, Table, Scroller, Tabs, Center } from '@mantine/core';
+import { Card, Stack, Badge, Text, List, Group, Tooltip, Button, Container, SimpleGrid, LoadingOverlay, Alert, Loader, Divider, Select, ActionIcon, TextInput, Textarea, Table, Scroller, Tabs, Center } from '@mantine/core';
 import { Icon } from '@iconify-icon/react';
+import { useInterval, useElementSize, useDisclosure, useResizeObserver } from '@mantine/hooks';
 import { GEN3_API, GEN3_WORKSPACE_API, gen3Api, useCoreSelector, selectJEGActiveWorkspaceStatus, useCoreDispatch, setJEGActiveWorkspaceStatus, WorkspaceStatus, setJEGRequestedWorkspaceStatus, RequestedWorkspaceStatus, setJEGActiveWorkspaceId, isFetchBaseQueryError, selectJEGRequestedWorkspaceStatus, selectJEGRequestedWorkspaceStatusTimestamp, isTimeGreaterThan, formatUptimeInMinutes, selectJEGKernelIds, removeManyJEGActiveKernels, upsertManyJEGActiveKernels, normalizeRtkError, selectAllJEGKernels, addJEGActiveKernel, selectWorkspaceTier, setWorkspaceTier, selectWorkspaceFullscreen, setWorkspaceFullscreen, useGetDictionaryFromUrlQuery, useUserAuth, GEN3_COMMONS_NAME } from '@gen3/core';
 import { useDeepCompareEffect } from 'use-deep-compare';
 import { notifications } from '@mantine/notifications';
-import { useElementSize, useDisclosure, useResizeObserver } from '@mantine/hooks';
 import { IoSettingsSharp } from 'react-icons/io5';
 import { BsFillInfoCircleFill } from 'react-icons/bs';
 import { MdKeyboardArrowDown, MdKeyboardArrowRight } from 'react-icons/md';
 import { merge } from '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 = useCallback(()=>onSelectTier(tier), [
         onSelectTier,
         tier
@@ -47,7 +47,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')
                     })
                 })
             }),
@@ -113,10 +113,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'
 };
@@ -127,36 +127,43 @@ const TierSelectorLanding = ({ cards, onSelectTier, classNames, label = 'Gen3 Ju
     const mergedClassnames = useMemo(()=>mergeDefaultTailwindClassnames(DEFAULT_CLASSNAMES, classNames ?? {}), [
         classNames
     ]);
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsx(Container, {
+        size: "xl",
         className: mergedClassnames.root,
-        children: /*#__PURE__*/ jsxs("div", {
+        children: /*#__PURE__*/ jsxs(Stack, {
+            gap: "lg",
             className: mergedClassnames.background,
             children: [
-                /*#__PURE__*/ jsx("div", {
-                    className: "mb-10 flex flex-col gap-6 md:flex-row md:items-end md:justify-between",
-                    children: /*#__PURE__*/ jsxs("div", {
-                        children: [
-                            /*#__PURE__*/ jsx("p", {
-                                className: "text-md uppercase tracking-[0.28em] text-primary",
-                                children: label
-                            }),
-                            /*#__PURE__*/ jsx("p", {
-                                className: mergedClassnames.description,
-                                children: description
-                            }),
-                            additionalDescriptions.map((desc)=>/*#__PURE__*/ jsx("p", {
-                                    className: mergedClassnames.additionalDescription,
-                                    children: desc
-                                }, desc.slice(0, 20)))
-                        ]
-                    })
+                /*#__PURE__*/ jsxs(Stack, {
+                    gap: "xs",
+                    children: [
+                        /*#__PURE__*/ jsx(Text, {
+                            className: mergedClassnames.label,
+                            children: label
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            className: mergedClassnames.description,
+                            children: description
+                        }),
+                        additionalDescriptions.map((desc)=>/*#__PURE__*/ jsx(Text, {
+                                className: mergedClassnames.additionalDescription,
+                                children: desc
+                            }, desc.slice(0, 20)))
+                    ]
                 }),
-                /*#__PURE__*/ jsx("div", {
-                    className: "grid gap-5 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1",
+                /*#__PURE__*/ jsx(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__*/ jsx(WorkspaceTierCard, {
                             tier: card.tier,
+                            tierLabel: card.tierLabel,
                             onSelectTier: onSelectTier,
                             label: card.label,
                             description: card.description,
@@ -196,49 +203,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.
     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
@@ -683,6 +701,7 @@ const notifyUser = (title, message, status = 0)=>{
         [1]: 'utility.2',
         [2]: 'utility.4'
     };
+    notifications.clean();
     notifications.show({
         title,
         message,
@@ -706,7 +725,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] = useState(convertSecondsToMilliseconds(1));
     const [error, setError] = useState(null);
@@ -870,8 +889,8 @@ const workspaceShutdownAlertLimit = 30000; // 5 minutes: 5 * 60 * 1000 TODO Figu
         activeStatus
     ]);
     useEffect(()=>{
-        // time out if exceeding maximum start timee
-        if (requestedStatus === RequestedWorkspaceStatus.Launch && isTimeGreaterThan(requestedStatusTimestamp, MAXIMUM_START_TIME_IN_MINUTES)) {
+        // time out if exceeding maximum start time
+        if (requestedStatus === RequestedWorkspaceStatus.Launch && isTimeGreaterThan(requestedStatusTimestamp, startTimeLimit)) {
             if (workspaceId) terminateWorkspace(encodeURIComponent(workspaceId));
             dispatch(setJEGRequestedWorkspaceStatus(RequestedWorkspaceStatus.Terminate));
             setError('Workspace failed to start. Shutting down');
@@ -882,7 +901,8 @@ const workspaceShutdownAlertLimit = 30000; // 5 minutes: 5 * 60 * 1000 TODO Figu
         dispatch,
         workspaceStatusData,
         workspaceId,
-        terminateWorkspace
+        terminateWorkspace,
+        startTimeLimit
     ]);
 };
 
@@ -899,10 +919,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__*/ jsx(MicroContainerReduxProviderContext.Provider, {
         value: value,
         children: children
@@ -936,19 +956,21 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
         coreDispatch
     ]);
     /* ── Elapsed timer for launching state ── */ const [elapsedSec, setElapsedSec] = useState(0);
+    const interval = useInterval(()=>{
+        const elapsed = Math.floor((Date.now() - requestedStatusTimestamp) / 1000);
+        setElapsedSec(elapsed);
+    }, 1000);
     useEffect(()=>{
-        if (status !== WorkspaceStatus.Launching) {
+        if (status === 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 ── */ useEffect(()=>{
         if (status !== WorkspaceStatus.LaunchError) return;
@@ -1002,9 +1024,6 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
         });
     }
     /* ── launching ── */ if (status === WorkspaceStatus.Launching) {
-        const mins = Math.floor(elapsedSec / 60);
-        const secs = elapsedSec % 60;
-        const elapsed = mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
         return /*#__PURE__*/ jsxs("div", {
             role: "status",
             className: PanelStyle$2,
@@ -1027,7 +1046,9 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
                             className: "mt-1 text-sm text-base-darker",
                             children: [
                                 "Elapsed: ",
-                                elapsed
+                                elapsedSec,
+                                " ",
+                                elapsedSec === 1 ? 'second' : 'seconds'
                             ]
                         }),
                         /*#__PURE__*/ jsx("p", {
@@ -1175,49 +1196,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.
     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
@@ -1413,7 +1445,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);
@@ -2152,27 +2185,11 @@ const UpgradeActionsPanel = ({ currentTier, onUpgradeToRemote, onRequestQuotaInc
             /*#__PURE__*/ jsxs("div", {
                 className: "space-y-2 p-4 pt-0",
                 children: [
-                    /*#__PURE__*/ jsxs(Stack, {
-                        children: [
-                            /*#__PURE__*/ jsxs(Group, {
-                                justify: "space-between",
-                                wrap: "nowrap",
-                                children: [
-                                    /*#__PURE__*/ jsx("p", {
-                                        className: "text-md font-bold text-base-contrast-max",
-                                        children: "Current Tier"
-                                    }),
-                                    /*#__PURE__*/ jsx(Badge, {
-                                        color: "primary.3",
-                                        children: currentTier
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ 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__*/ jsx(Stack, {
+                        children: /*#__PURE__*/ 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__*/ jsx(Button, {
                         onClick: onUpgradeToRemote,
@@ -2239,7 +2256,7 @@ function HorizontalAccordion({ label, expanded, setExpanded, children, expandedW
     });
     const mergedClassNames = mergeDefaultTailwindClassnames(STYLING_DEFAULTS, classNames);
     return /*#__PURE__*/ jsx("div", {
-        className: `overflow-hidden shrink-0 ${mergedClassNames.root}`,
+        className: `${mergedClassNames.root}`,
         style: {
             width: expanded ? expandedWidth : collapsedWidth,
             transition: `width ${TRANSITION_MS}ms ease`
@@ -2274,7 +2291,7 @@ function HorizontalAccordion({ label, expanded, setExpanded, children, expandedW
                     ]
                 }),
                 /*#__PURE__*/ 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',
@@ -2302,9 +2319,8 @@ const SettingsPanel = ({ showKernels, expanded, setExpanded, width = 380 })=>{
         setExpanded: setExpanded,
         rightSide: true,
         expandedWidth: width,
-        children: /*#__PURE__*/ jsxs(Stack, {
-            gap: "sm",
-            className: PanelStyle,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: `${PanelStyle} overflow-y-scroll`,
             children: [
                 showKernels && /*#__PURE__*/ jsx(KernelLifecyclePanel, {}),
                 /*#__PURE__*/ jsx(UpgradeActionsPanel, {
@@ -2320,7 +2336,7 @@ const WorkspaceToolbar = /*#__PURE__*/ forwardRef(({ toolbarConfiguration }, ref
     const workspaceTier = useCoreSelector((state)=>selectWorkspaceTier(state));
     const workspaceStatus = useCoreSelector((state)=>selectJEGActiveWorkspaceStatus(state));
     const isFullscreen = useCoreSelector((state)=>selectWorkspaceFullscreen(state));
-    const { showStatus, showStop } = toolbarConfiguration || {};
+    const { showStatus, showStop, tierLabel } = toolbarConfiguration || {};
     const coreDispatch = useCoreDispatch();
     const toggleFullscreen = useCallback(()=>{
         coreDispatch(setWorkspaceFullscreen(!isFullscreen));
@@ -2373,8 +2389,8 @@ const WorkspaceToolbar = /*#__PURE__*/ forwardRef(({ toolbarConfiguration }, ref
                                         children: toolbarConfiguration?.description
                                     }),
                                     /*#__PURE__*/ jsx(Badge, {
-                                        "aria-label": `Workspace tier: ${workspaceTier}`,
-                                        children: workspaceTier
+                                        "aria-label": `Workspace tier: ${tierLabel ?? workspaceTier}`,
+                                        children: tierLabel ?? workspaceTier
                                     })
                                 ]
                             })
@@ -3973,7 +3989,7 @@ const WorkspaceCenter = ({ workspaces, landingPage, tierConfiguration })=>{
     ]);
     if (!workspaceTier) {
         return /*#__PURE__*/ jsx("div", {
-            className: "w-full bg-base-lightest ",
+            className: "w-full h-full overflow-hidden bg-base-lightest ",
             children: /*#__PURE__*/ jsx(TierSelectorLanding, {
                 cards: workspaces,
                 onSelectTier: handleSelectTier,
@@ -3991,9 +4007,11 @@ const WorkspaceCenter = ({ workspaces, landingPage, tierConfiguration })=>{
         });
     }
     if (workspaceTier === 'remote') {
+        const config = tierConfiguration.remote;
         return /*#__PURE__*/ jsx(ProtectedContent, {
             children: /*#__PURE__*/ jsx(MicroContainerReduxProvider, {
                 enabled: true,
+                startTimeLimit: config?.startTimeLimit,
                 children: /*#__PURE__*/ jsx(WorkspaceLayout, {
                     tierConfiguration: tierConfiguration.remote,
                     children: /*#__PURE__*/ jsx(RemoteComputeWorkspace, {