@elice/material-runbox 1.260820.1 → 1.260825.0-runboxusability.1

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaPerSessionAlmostEndDialog.js

@@ -0,0 +1,117 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var runboxClient = require('@elice/runbox-client');
+var material = require('@mui/material');
+var useRunboxSessionEndWarning = require('../hooks/useRunboxSessionEndWarning.js');
+var MaterialRunboxQuotaAmount = require('./MaterialRunboxQuotaAmount.js');
+
+//
+//
+//
+/**
+ * Warns the learner that the time granted to *this connection* is about to run out.
+ *
+ * Unlike the total quota, the learner can reconnect and keep going as long as total
+ * time is left — so this dialog is about saving work, not about the practice ending.
+ */
+var MaterialRunboxQuotaPerSessionAlmostEndDialog = function MaterialRunboxQuotaPerSessionAlmostEndDialog(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose;
+  var intl$1 = intl.useRawEliceIntl();
+  var _useEliceRunboxQuota = runboxClient.useEliceRunboxQuota(),
+    quotaInfo = _useEliceRunboxQuota.quotaInfo,
+    quotaPerSessionInfo = _useEliceRunboxQuota.quotaPerSessionInfo;
+  if (quotaPerSessionInfo.isUnlimited) {
+    return null;
+  }
+  var isQuotaAlmostEnd = !quotaInfo.isUnlimited && quotaInfo.remainingQuota <= useRunboxSessionEndWarning.QUOTA_ALMOST_END_MINUTES;
+  var isQuotaPerSessionAlmostEnd = quotaPerSessionInfo.remainingQuota <= useRunboxSessionEndWarning.QUOTA_PER_SESSION_ALMOST_END_MINUTES;
+  return jsxRuntime.jsxs(material.Dialog, {
+    fullWidth: true,
+    maxWidth: "xs",
+    open: open,
+    onClose: onClose,
+    children: [jsxRuntime.jsx(material.DialogTitle, {
+      children: intl$1.formatMessage({
+        id: 'runbox.timer.almost_end.dialog.quota_per_session.title'
+      }, {
+        time: intl$1.formatNumber(useRunboxSessionEndWarning.QUOTA_PER_SESSION_ALMOST_END_MINUTES, {
+          style: 'unit',
+          unit: 'minute',
+          unitDisplay: 'short'
+        })
+      })
+    }), jsxRuntime.jsx(material.DialogContent, {
+      children: jsxRuntime.jsxs(material.Stack, {
+        direction: "column",
+        gap: "1.5rem",
+        children: [jsxRuntime.jsxs(material.Card, {
+          sx: {
+            bgcolor: 'background.neutral'
+          },
+          children: [jsxRuntime.jsxs(material.Stack, {
+            direction: "column",
+            gap: "0.5rem",
+            padding: "1rem",
+            bgcolor: isQuotaAlmostEnd ? 'warning.opacity03' : undefined,
+            children: [jsxRuntime.jsx(material.Typography, {
+              variant: "body2",
+              fontWeight: "bold",
+              children: intl$1.formatMessage({
+                id: 'runbox.timer.popover.quota.title'
+              })
+            }), quotaInfo.isUnlimited ? jsxRuntime.jsx(material.Typography, {
+              component: "span",
+              variant: "h5",
+              fontWeight: "extraBold",
+              children: intl$1.formatMessage({
+                id: 'runbox.timer.unlimited'
+              })
+            }) : jsxRuntime.jsx(MaterialRunboxQuotaAmount.default, {
+              remainingQuota: quotaInfo.remainingQuota,
+              quota: quotaInfo.quota,
+              color: isQuotaAlmostEnd ? 'warning.main' : 'success.main'
+            })]
+          }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(material.Stack, {
+            direction: "column",
+            gap: "0.5rem",
+            padding: "1rem",
+            bgcolor: isQuotaPerSessionAlmostEnd ? 'warning.opacity03' : undefined,
+            children: [jsxRuntime.jsx(material.Typography, {
+              variant: "body2",
+              fontWeight: "bold",
+              children: intl$1.formatMessage({
+                id: 'runbox.timer.popover.quota_per_session.title'
+              })
+            }), jsxRuntime.jsx(MaterialRunboxQuotaAmount.default, {
+              remainingQuota: quotaPerSessionInfo.remainingQuota,
+              quota: quotaPerSessionInfo.quota,
+              color: isQuotaPerSessionAlmostEnd ? 'warning.main' : 'success.main'
+            })]
+          })]
+        }), jsxRuntime.jsx(material.Typography, {
+          variant: "body2",
+          whiteSpace: "pre-line",
+          children: intl$1.formatMessage({
+            id: 'runbox.timer.almost_end.dialog.quota_per_session.description'
+          })
+        })]
+      })
+    }), jsxRuntime.jsx(material.DialogActions, {
+      children: jsxRuntime.jsx(material.Button, {
+        variant: "contained",
+        color: "inherit",
+        onClick: onClose,
+        children: intl$1.formatMessage({
+          id: 'runbox.timer.almost_end.dialog.confirm'
+        })
+      })
+    })]
+  });
+};
+
+exports.default = MaterialRunboxQuotaPerSessionAlmostEndDialog;

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaTimePart.d.ts

@@ -0,0 +1,15 @@
+export interface MaterialRunboxQuotaTimePartProps {
+    value: number;
+    unit: 'hour' | 'minute';
+    color?: string;
+}
+/**
+ * A single `4시간` / `11분` part, with the unit rendered smaller than the number.
+ *
+ * The number and its unit are split with `formatNumberToParts` rather than by hand,
+ * because where the unit sits and how it is written differs per locale.
+ *
+ * Renders nothing when `value` is 0, so `29분` does not come out as `0시간 29분`.
+ */
+declare const MaterialRunboxQuotaTimePart: React.FC<MaterialRunboxQuotaTimePartProps>;
+export default MaterialRunboxQuotaTimePart;

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaTimePart.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var material = require('@mui/material');
+
+//
+//
+//
+/**
+ * A single `4시간` / `11분` part, with the unit rendered smaller than the number.
+ *
+ * The number and its unit are split with `formatNumberToParts` rather than by hand,
+ * because where the unit sits and how it is written differs per locale.
+ *
+ * Renders nothing when `value` is 0, so `29분` does not come out as `0시간 29분`.
+ */
+var MaterialRunboxQuotaTimePart = function MaterialRunboxQuotaTimePart(_ref) {
+  var value = _ref.value,
+    unit = _ref.unit,
+    color = _ref.color;
+  var intl$1 = intl.useRawEliceIntl();
+  if (value === 0) {
+    return null;
+  }
+  return jsxRuntime.jsx(material.Typography, {
+    component: "span",
+    variant: "h5",
+    fontWeight: "extraBold",
+    color: color,
+    children: intl$1.formatNumberToParts(value, {
+      style: 'unit',
+      unit: unit,
+      unitDisplay: 'short'
+    }).map(function (part, index) {
+      return part.type === 'unit' ? jsxRuntime.jsx(material.Typography, {
+        component: "span",
+        variant: "body2",
+        fontWeight: "regular",
+        children: part.value
+      }, index) : jsxRuntime.jsx("span", {
+        children: part.value
+      }, index);
+    })
+  });
+};
+
+exports.default = MaterialRunboxQuotaTimePart;

package/cjs/components/material-runbox/timer/MaterialRunboxTimer.d.ts

@@ -9,6 +9,12 @@ export interface MaterialRunboxTimerProps {
      * @default false
      */
     hideTimerPopover?: boolean;
+    /**
+     * Tutoring mode? Session-end warnings are for the learner, not for the tutor
+     * looking at their runbox.
+     * @default false
+     */
+    isTutoring?: boolean;
 }
 declare const MaterialRunboxTimer: React.FC<MaterialRunboxTimerProps>;
 export default MaterialRunboxTimer;

package/cjs/components/material-runbox/timer/MaterialRunboxTimer.js

@@ -12,7 +12,9 @@ var muiElements = require('@elice/mui-elements');
 var runboxClient = require('@elice/runbox-client');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var material = require('@mui/material');
-var MaterialRunboxAlmostEndSnackbars = require('./MaterialRunboxAlmostEndSnackbars.js');
+var useRunboxSessionEndWarning = require('../hooks/useRunboxSessionEndWarning.js');
+var MaterialRunboxQuotaAlmostEndDialog = require('./MaterialRunboxQuotaAlmostEndDialog.js');
+var MaterialRunboxQuotaPerSessionAlmostEndDialog = require('./MaterialRunboxQuotaPerSessionAlmostEndDialog.js');
 var MaterialRunboxTimerDetailPopover = require('./MaterialRunboxTimerDetailPopover.js');
 var time = require('../../../utils/time.js');
 
@@ -21,10 +23,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-//
-//
-//
-var QUOTA_ALMOST_END_MINUTES = 30;
 //
 //
 //
@@ -46,13 +44,21 @@ var MaterialRunboxTimer = function MaterialRunboxTimer(_ref3) {
     headerElement = _ref3.headerElement,
     stopRuntime = _ref3.stopRuntime,
     _ref3$hideTimerPopove = _ref3.hideTimerPopover,
-    hideTimerPopover = _ref3$hideTimerPopove === void 0 ? false : _ref3$hideTimerPopove;
+    hideTimerPopover = _ref3$hideTimerPopove === void 0 ? false : _ref3$hideTimerPopove,
+    _ref3$isTutoring = _ref3.isTutoring,
+    isTutoring = _ref3$isTutoring === void 0 ? false : _ref3$isTutoring;
   var intl$1 = intl.useRawEliceIntl();
   var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
   var isRunboxRunning = status === 'running';
   var _useEliceRunboxQuota = runboxClient.useEliceRunboxQuota(),
     quotaInfo = _useEliceRunboxQuota.quotaInfo;
+  var _useRunboxSessionEndW = useRunboxSessionEndWarning.useRunboxSessionEndWarning({
+      runboxId: runboxId,
+      disabled: isTutoring || !isRunboxRunning
+    }),
+    warning = _useRunboxSessionEndW.warning,
+    dismiss = _useRunboxSessionEndW.dismiss;
   var _React$useState = React__default.default.useState(false),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isTimerDetailPopoverOpen = _React$useState2[0],
@@ -82,7 +88,7 @@ var MaterialRunboxTimer = function MaterialRunboxTimer(_ref3) {
     var hoursString = hours.toString().padStart(2, '0');
     var minutesString = minutes.toString().padStart(2, '0');
     var timeString = "".concat(hoursString, " : ").concat(minutesString);
-    var isAlmostEnd = !quotaInfo.isUnlimited && quotaInfo.remainingQuota <= QUOTA_ALMOST_END_MINUTES;
+    var isAlmostEnd = !quotaInfo.isUnlimited && quotaInfo.remainingQuota <= useRunboxSessionEndWarning.QUOTA_ALMOST_END_MINUTES;
     return jsxRuntime.jsx(material.Tooltip, {
       arrow: true,
       placement: "bottom",
@@ -160,19 +166,17 @@ var MaterialRunboxTimer = function MaterialRunboxTimer(_ref3) {
       }
     });
   };
-  var renderAlmostEndSnackbars = function renderAlmostEndSnackbars() {
-    return jsxRuntime.jsx(MaterialRunboxAlmostEndSnackbars.default, {
-      runboxId: runboxId,
-      onClickDetail: function onClickDetail() {
-        return setTimerDetailPopoverOpen(true);
-      }
-    });
-  };
   if (!isRunboxRunning) {
     return null;
   }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [renderTimer(), renderTimerDetailPopover(), renderAlmostEndSnackbars()]
+    children: [renderTimer(), renderTimerDetailPopover(), jsxRuntime.jsx(MaterialRunboxQuotaAlmostEndDialog.default, {
+      open: warning === 'quota',
+      onClose: dismiss
+    }), jsxRuntime.jsx(MaterialRunboxQuotaPerSessionAlmostEndDialog.default, {
+      open: warning === 'quotaPerSession',
+      onClose: dismiss
+    })]
   });
 };
 

package/cjs/components/material-runbox/timer/MaterialRunboxTimerDetailPopover.js

@@ -13,13 +13,12 @@ var runboxClient = require('@elice/runbox-client');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
 var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
-var time = require('../../../utils/time.js');
+var useRunboxSessionEndWarning = require('../hooks/useRunboxSessionEndWarning.js');
+var MaterialRunboxQuotaAmount = require('./MaterialRunboxQuotaAmount.js');
 
 //
 //
 //
-var QUOTA_ALMOST_END_MINUTES = 30;
-var QUOTA_PER_SESSION_ALMOST_END_MINUTES = 10;
 var QUOTA_POPOVER_NOT_SHOW_ON_START = 'MaterialRunboxTimer.timerDetailPopover.notShowOnStart';
 //
 //
@@ -118,48 +117,6 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
       })]
     });
   };
-  /**
-   *
-   */
-  var formatTimePart = function formatTimePart(value, unit) {
-    return intl$1.formatNumber(value, {
-      style: 'unit',
-      unit: unit,
-      unitDisplay: 'short'
-    });
-  };
-  /**
-   *
-   */
-  var renderQuotaTimePart = function renderQuotaTimePart(value, unit, color) {
-    if (value === 0) {
-      return null;
-    }
-    var parts = intl$1.formatNumberToParts(value, {
-      style: 'unit',
-      unit: unit,
-      unitDisplay: 'short'
-    });
-    return jsxRuntime.jsx(material.Typography, {
-      component: "span",
-      variant: "h5",
-      fontWeight: "extraBold",
-      color: color,
-      children: parts.map(function (part, index) {
-        if (part.type === 'unit') {
-          return jsxRuntime.jsx(material.Typography, {
-            component: "span",
-            variant: "body2",
-            fontWeight: "regular",
-            children: part.value
-          }, index);
-        }
-        return jsxRuntime.jsx("span", {
-          children: part.value
-        }, index);
-      })
-    });
-  };
   /**
    *
    */
@@ -185,15 +142,8 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         })]
       });
     }
-    // Sync UI with the timer.
-    var _getTimeParts = time.getTimeParts(quotaInfo.remainingQuota * 60),
-      remainingHours = _getTimeParts.hours,
-      remainingMinutes = _getTimeParts.minutes;
-    var _getTimeParts2 = time.getTimeParts(quotaInfo.quota * 60),
-      totalHours = _getTimeParts2.hours,
-      totalMinutes = _getTimeParts2.minutes;
-    var quotaColor = quotaInfo.remainingQuota > QUOTA_ALMOST_END_MINUTES ? 'success.main' : 'warning.main';
-    var quotaBgColor = quotaInfo.remainingQuota > QUOTA_ALMOST_END_MINUTES ? undefined : 'warning.opacity03';
+    var quotaColor = quotaInfo.remainingQuota > useRunboxSessionEndWarning.QUOTA_ALMOST_END_MINUTES ? 'success.main' : 'warning.main';
+    var quotaBgColor = quotaInfo.remainingQuota > useRunboxSessionEndWarning.QUOTA_ALMOST_END_MINUTES ? undefined : 'warning.opacity03';
     return jsxRuntime.jsxs(material.Stack, {
       direction: "column",
       gap: "0.5rem",
@@ -205,15 +155,10 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         children: intl$1.formatMessage({
           id: 'runbox.timer.popover.quota.title'
         })
-      }), jsxRuntime.jsxs(material.Typography, {
-        variant: "body2",
-        children: [jsxRuntime.jsxs(material.Stack, {
-          component: "span",
-          display: "inline-flex",
-          direction: "row",
-          gap: "0.25rem",
-          children: [renderQuotaTimePart(remainingHours, 'hour', quotaColor), renderQuotaTimePart(remainingMinutes, 'minute', quotaColor)]
-        }), [" / ", totalHours > 0 ? formatTimePart(totalHours, 'hour') : null, totalMinutes > 0 ? formatTimePart(totalMinutes, 'minute') : null].filter(Boolean).join(' ')]
+      }), jsxRuntime.jsx(MaterialRunboxQuotaAmount.default, {
+        remainingQuota: quotaInfo.remainingQuota,
+        quota: quotaInfo.quota,
+        color: quotaColor
       })]
     });
   };
@@ -232,14 +177,8 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         })]
       });
     }
-    var _getTimeParts3 = time.getTimeParts(quotaPerSessionInfo.remainingQuota * 60),
-      remainingHours = _getTimeParts3.hours,
-      remainingMinutes = _getTimeParts3.minutes;
-    var _getTimeParts4 = time.getTimeParts(quotaPerSessionInfo.quota * 60),
-      totalHours = _getTimeParts4.hours,
-      totalMinutes = _getTimeParts4.minutes;
-    var perSessionColor = quotaPerSessionInfo.remainingQuota > QUOTA_PER_SESSION_ALMOST_END_MINUTES ? 'success.main' : 'warning.main';
-    var perSessionBgColor = quotaPerSessionInfo.remainingQuota > QUOTA_PER_SESSION_ALMOST_END_MINUTES ? undefined : 'warning.opacity03';
+    var perSessionColor = quotaPerSessionInfo.remainingQuota > useRunboxSessionEndWarning.QUOTA_PER_SESSION_ALMOST_END_MINUTES ? 'success.main' : 'warning.main';
+    var perSessionBgColor = quotaPerSessionInfo.remainingQuota > useRunboxSessionEndWarning.QUOTA_PER_SESSION_ALMOST_END_MINUTES ? undefined : 'warning.opacity03';
     return jsxRuntime.jsxs(material.Stack, {
       direction: "column",
       gap: "0.5rem",
@@ -251,22 +190,21 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         children: intl$1.formatMessage({
           id: 'runbox.timer.popover.quota_per_session.title'
         })
-      }), jsxRuntime.jsxs(material.Typography, {
-        variant: "body2",
-        children: [jsxRuntime.jsxs(material.Stack, {
-          component: "span",
-          display: "inline-flex",
-          direction: "row",
-          gap: "0.25rem",
-          children: [renderQuotaTimePart(remainingHours, 'hour', perSessionColor), renderQuotaTimePart(remainingMinutes, 'minute', perSessionColor)]
-        }), [" / ", totalHours > 0 ? formatTimePart(totalHours, 'hour') : null, totalMinutes > 0 ? formatTimePart(totalMinutes, 'minute') : null].filter(Boolean).join(' ')]
+      }), jsxRuntime.jsx(MaterialRunboxQuotaAmount.default, {
+        remainingQuota: quotaPerSessionInfo.remainingQuota,
+        quota: quotaPerSessionInfo.quota,
+        color: perSessionColor
       }), jsxRuntime.jsx(material.Typography, {
         variant: "body2",
         color: "text.tertiary",
         children: intl$1.formatMessage({
           id: 'runbox.timer.popover.quota_per_session.description'
         }, {
-          time: formatTimePart(quotaPerSessionInfo.quota, 'minute')
+          time: intl$1.formatNumber(quotaPerSessionInfo.quota, {
+            style: 'unit',
+            unit: 'minute',
+            unitDisplay: 'short'
+          })
         })
       })]
     });

package/es/components/material-runbox/MaterialRunboxContent.js

@@ -11,7 +11,6 @@ import { useQuery } from '@tanstack/react-query';
 import MaterialAdminRunboxConfirmDialog from './MaterialAdminRunboxConfirmDialog.js';
 import MaterialRunboxAlert from './MaterialRunboxAlert.js';
 import MaterialRunboxBody from './MaterialRunboxBody.js';
-import MaterialRunboxFooter from './MaterialRunboxFooter.js';
 import MaterialRunboxHeader from './MaterialRunboxHeader.js';
 import { useMaterialRunboxContext } from './contexts/MaterialRunboxContext.js';
 import { useMaterialRunboxApiContext } from './contexts/MaterialRunboxApiContext.js';
@@ -283,7 +282,7 @@ var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
             isTutoring: isTutoring
           }), jsx(MaterialRunboxBody, Object.assign({
             setSnackbarRoot: setSnackbarRoot
-          }, props)), jsx(MaterialRunboxFooter, Object.assign({}, props))]
+          }, props))]
         })
       })
     })

package/es/components/material-runbox/MaterialRunboxHeader.js

@@ -9,16 +9,15 @@ import { Tag, EliceIcon } from '@elice/mui-elements';
 import { useEliceRunboxRunning } from '@elice/runbox-client';
 import { enums } from '@elice/types';
 import { faEllipsisVertical } from '@fortawesome/pro-solid-svg-icons';
-import { Box, Stack, Button } from '@mui/material';
+import { Stack, Button } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
-import MaterialRunboxActionAutoShutdown from './actions/MaterialRunboxActionAutoShutdown.js';
 import MaterialRunboxActionDisconnect from './actions/MaterialRunboxActionDisconnect.js';
 import MaterialRunboxActionGrade from './actions/MaterialRunboxActionGrade.js';
 import MaterialRunboxActionMenu from './actions/MaterialRunboxActionMenu.js';
-import img from '../../assets/runbox_logo.png.js';
 import { useMaterialRunboxContext } from './contexts/MaterialRunboxContext.js';
 import { useMaterialRunboxApiContext } from './contexts/MaterialRunboxApiContext.js';
 import MaterialRunboxTimer from './timer/MaterialRunboxTimer.js';
+import MaterialRunboxStatusButton from './status/MaterialRunboxStatusButton.js';
 import MaterialRunboxDiskAlmostFullSnackbar from './disk/MaterialRunboxDiskAlmostFullSnackbar.js';
 import { useRunboxControl } from './hooks/useRunboxControl.js';
 
@@ -138,20 +137,11 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
     });
   };
   /**
-   *
+   * Whether the auto-shutdown toggle is available.
+   * The toggle itself lives in the option menu. (PLAT-4181)
    */
-  var renderHeaderActionAutoShutdown = function renderHeaderActionAutoShutdown() {
-    var isAidtOrg = (organization === null || organization === void 0 ? void 0 : organization.organizationType) === enums.OrganizationType.Aidt;
-    if (!enableAutoShutdownToggle || isTutoring || isAidtOrg) {
-      return null;
-    }
-    return jsx(MaterialRunboxActionAutoShutdown, {
-      runtime: runtime,
-      runtimeTemplate: runtimeTemplate,
-      courseId: courseId,
-      refetch: refetch
-    });
-  };
+  var isAidtOrg = (organization === null || organization === void 0 ? void 0 : organization.organizationType) === enums.OrganizationType.Aidt;
+  var enableAutoShutdown = Boolean(enableAutoShutdownToggle) && !isTutoring && !isAidtOrg;
   /**
    *
    */
@@ -192,9 +182,11 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
       }), jsx(MaterialRunboxActionMenu, {
         runbox: runbox,
         runtime: runtime,
+        runtimeTemplate: runtimeTemplate,
         courseId: courseId,
         studentUserId: studentUserId,
         isTutoring: isTutoring,
+        enableAutoShutdown: enableAutoShutdown,
         menuAnchorEl: menuAnchorEl,
         refetch: refetch,
         handleMenuClose: handleMenuClose,
@@ -218,30 +210,21 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
   //
   return jsxs(StyledHeader, {
     ref: headerRef,
-    children: [jsx(Box, {
-      component: "img",
-      src: img,
-      alt: "elice runbox",
-      sx: {
-        width: 'auto',
-        height: '100%',
-        imageRendering: 'auto',
-        padding: '0.465rem 0'
-      }
-    }), runtime ? jsx(MaterialRunboxTimer, {
+    children: [runtime ? jsx(MaterialRunboxTimer, {
       runboxId: runbox.id,
       userId: userId,
       headerElement: headerRef.current,
       stopRuntime: stopRuntime,
-      hideTimerPopover: hideTimerPopover
-    }) : null, jsx(MaterialRunboxDiskAlmostFullSnackbar, {
+      hideTimerPopover: hideTimerPopover,
+      isTutoring: isTutoring
+    }) : null, jsx(MaterialRunboxStatusButton, {}), jsx(MaterialRunboxDiskAlmostFullSnackbar, {
       runboxId: runbox.id
     }), jsxs(Stack, {
       direction: "row",
       alignItems: "center",
       gap: "0.5rem",
       marginLeft: "auto",
-      children: [renderHeaderSubmitInfo(), renderHeaderActionAutoShutdown(), renderOptionMenu(), renderHeaderActionDisconnect(), renderHeaderActionGrade()]
+      children: [renderHeaderSubmitInfo(), renderOptionMenu(), renderHeaderActionDisconnect(), renderHeaderActionGrade()]
     })]
   });
 };

package/es/components/material-runbox/actions/MaterialRunboxActionMenu.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { RuntimeProps } from '../runtime/Runtime';
-type MaterialRunboxActionMenuProps = Pick<RuntimeProps, 'runbox' | 'runtime' | 'courseId' | 'refetch' | 'studentUserId' | 'isTutoring' | 'getAchievementColor'> & {
+type MaterialRunboxActionMenuProps = Pick<RuntimeProps, 'runbox' | 'runtime' | 'runtimeTemplate' | 'courseId' | 'refetch' | 'studentUserId' | 'isTutoring' | 'getAchievementColor'> & {
     menuAnchorEl: null | HTMLButtonElement;
+    /** Whether the auto-shutdown toggle is available. Decided by the header. */
+    enableAutoShutdown?: boolean;
     handleMenuClose: () => void;
 };
 declare const MaterialRunboxActionMenu: React.FC<MaterialRunboxActionMenuProps>;

package/es/components/material-runbox/actions/MaterialRunboxActionMenu.js

@@ -1,11 +1,12 @@
 import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { getOrgCourseGet } from '@elice/api-client';
 import { useEliceRunboxRunning } from '@elice/runbox-client';
 import { enums } from '@elice/types';
-import { Menu } from '@mui/material';
+import { Menu, Stack, Divider } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
+import MaterialRunboxActionAutoShutdown from './MaterialRunboxActionAutoShutdown.js';
 import MaterialRunboxActionReset from './MaterialRunboxActionReset.js';
 import MaterialRunboxActionRestart from './MaterialRunboxActionRestart.js';
 import MaterialRunboxActionShare from './MaterialRunboxActionShare.js';
@@ -17,9 +18,12 @@ import MaterialRunboxActionSubmitLog from './MaterialRunboxActionSubmitLog.js';
 var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
   var runbox = _ref.runbox,
     runtime = _ref.runtime,
+    runtimeTemplate = _ref.runtimeTemplate,
     courseId = _ref.courseId,
     studentUserId = _ref.studentUserId,
     isTutoring = _ref.isTutoring,
+    _ref$enableAutoShutdo = _ref.enableAutoShutdown,
+    enableAutoShutdown = _ref$enableAutoShutdo === void 0 ? false : _ref$enableAutoShutdo,
     menuAnchorEl = _ref.menuAnchorEl,
     refetch = _ref.refetch,
     getAchievementColor = _ref.getAchievementColor,
@@ -80,7 +84,19 @@ var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
       horizontal: 'right'
     },
     onClose: handleMenuClose,
-    children: [jsx(MaterialRunboxActionShare, {
+    children: [enableAutoShutdown ? jsxs(Fragment, {
+      children: [jsx(Stack, {
+        direction: "row",
+        alignItems: "center",
+        padding: "0.25rem 1rem",
+        children: jsx(MaterialRunboxActionAutoShutdown, {
+          runtime: runtime,
+          runtimeTemplate: runtimeTemplate,
+          courseId: courseId,
+          refetch: refetch
+        })
+      }), jsx(Divider, {})]
+    }) : null, jsx(MaterialRunboxActionShare, {
       handleMenuClose: handleMenuClose
     }), jsx(MaterialRunboxActionRestart, {
       runbox: runbox,

package/es/components/material-runbox/hooks/index.d.ts

@@ -1,4 +1,6 @@
 export * from './useRunboxControl';
+export * from './useRunboxSessionEndWarning';
 export * from './useRunboxTimer';
 export * from './useInfiniteRunboxRunboxIdGrade';
 export * from './useMaterialRunboxRunboxIdStarterGet';
+export * from './useOnlineState';

package/es/components/material-runbox/hooks/index.js

@@ -1,4 +1,6 @@
 export { RunboxPreCheckResultType, useRunboxControl } from './useRunboxControl.js';
+export { QUOTA_ALMOST_END_MINUTES, QUOTA_PER_SESSION_ALMOST_END_MINUTES, useRunboxSessionEndWarning } from './useRunboxSessionEndWarning.js';
 export { useRunboxTimer } from './useRunboxTimer.js';
 export { useInfiniteRunboxRunboxIdGrade } from './useInfiniteRunboxRunboxIdGrade.js';
 export { useMaterialRunboxRunboxIdStarterGet } from './useMaterialRunboxRunboxIdStarterGet.js';
+export { useOnlineState } from './useOnlineState.js';

package/es/components/material-runbox/hooks/useOnlineState.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Whether the browser currently has a network connection.
+ *
+ * NOTICE: this deliberately does not use `react-use`'s `useNetworkState`.
+ * That hook only exists in react-use v17, and consumers of this package do not
+ * agree on the major — elice-web still resolves v13, which breaks the build at
+ * link time. Reading `navigator.onLine` keeps this working on both.
+ *
+ * `undefined` means "not known yet" (server render, or no `navigator`), which
+ * callers should treat as online rather than as offline.
+ */
+export declare const useOnlineState: () => boolean | undefined;