@xh/hoist 73.0.0-SNAPSHOT.1747155067044 → 73.0.0-SNAPSHOT.1747181587236

package/build/types/core/types/AppState.d.ts

@@ -14,6 +14,7 @@ export declare const AppState: Readonly<{
 }>;
 export type AppState = (typeof AppState)[keyof typeof AppState];
 export interface AppSuspendData {
-    message?: string;
     reason: 'IDLE' | 'SERVER_FORCE' | 'APP_UPDATE' | 'AUTH_EXPIRED';
+    message?: string;
+    exception?: unknown;
 }

package/build/types/{mobile/appcontainer → desktop/appcontainer/suspend}/SuspendPanel.d.ts

@@ -1,7 +1,7 @@
 import { AppContainerModel } from '@xh/hoist/appcontainer/AppContainerModel';
 import './SuspendPanel.scss';
 /**
- * Generic Panel to display when the app is suspended.
+ * Display when the app is suspended.
  * @internal
  */
 export declare const suspendPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<AppContainerModel>>;

package/core/types/AppState.ts

@@ -27,6 +27,7 @@ export const AppState = Object.freeze({
 export type AppState = (typeof AppState)[keyof typeof AppState];
 
 export interface AppSuspendData {
+    reason: 'IDLE' | 'SERVER_FORCE' | 'APP_UPDATE' | 'AUTH_EXPIRED';
     message?: string;
-    reason: 'IDLE'|'SERVER_FORCE'|'APP_UPDATE'|'AUTH_EXPIRED';
+    exception?: unknown;
 }

package/desktop/appcontainer/AppContainer.ts

@@ -9,7 +9,7 @@ import {fragment, frame, vframe, viewport} from '@xh/hoist/cmp/layout';
 import {createElement, hoistCmp, refreshContextView, uses, XH} from '@xh/hoist/core';
 import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 import {changelogDialog} from '@xh/hoist/desktop/appcontainer/ChangelogDialog';
-import {suspendPanel} from '@xh/hoist/desktop/appcontainer/SuspendPanel';
+import {suspendPanel} from './suspend/SuspendPanel';
 import {dockContainerImpl} from '@xh/hoist/desktop/cmp/dock/impl/DockContainer';
 import {colChooserDialog as colChooser} from '@xh/hoist/desktop/cmp/grid/impl/colchooser/ColChooserDialog';
 import {ColChooserModel} from '@xh/hoist/desktop/cmp/grid/impl/colchooser/ColChooserModel';
@@ -34,7 +34,6 @@ import {aboutDialog} from './AboutDialog';
 import {banner} from './Banner';
 import {exceptionDialog} from './ExceptionDialog';
 import {feedbackDialog} from './FeedbackDialog';
-import {idlePanel} from './IdlePanel';
 import {impersonationBar} from './ImpersonationBar';
 import {lockoutPanel} from './LockoutPanel';
 import {loginPanel} from './LoginPanel';
@@ -172,19 +171,7 @@ const appLoadMask = hoistCmp.factory<AppContainerModel>(({model}) =>
     mask({bind: model.appLoadModel, spinner: true})
 );
 
-const suspendedView = hoistCmp.factory<AppContainerModel>({
-    render({model}) {
-        let ret;
-        if (model.appStateModel.suspendData?.reason === 'IDLE') {
-            const content = model.appSpec.idlePanel ?? idlePanel;
-            ret = elementFromContent(content, {onReactivate: () => XH.reloadApp()});
-        } else {
-            ret = suspendPanel();
-        }
-
-        return viewport(ret, appLoadMask());
-    }
-});
+const suspendedView = hoistCmp.factory(() => viewport(suspendPanel(), appLoadMask()));
 
 const bannerList = hoistCmp.factory<AppContainerModel>({
     render({model}) {

package/desktop/appcontainer/{SuspendPanel.ts → suspend/SuspendPanel.ts}

@@ -10,26 +10,54 @@ import {viewport, div, p, filler} from '@xh/hoist/cmp/layout';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {Icon} from '@xh/hoist/icon';
+import {idlePanel} from './IdlePanel';
 
 import './SuspendPanel.scss';
+import {elementFromContent} from '@xh/hoist/utils/react';
 
 /**
- * Generic Panel to display when the app is suspended.
+ * Display when the app is suspended.
  * @internal
  */
 export const suspendPanel = hoistCmp.factory<AppContainerModel>({
     displayName: 'SuspendPanel',
 
     render({model}) {
-        const message = model.appStateModel.suspendData?.message;
+        const {suspendData} = model.appStateModel;
+        if (!suspendData) return null;
+
+        let {reason, exception, message} = suspendData;
+
+        // 0) Special case for IDLE, including app override ability.
+        if (reason === 'IDLE') {
+            const content = model.appSpec.idlePanel ?? idlePanel;
+            return elementFromContent(content, {onReactivate: () => XH.reloadApp()});
+        }
+
+        // 1) All Others
+        let icon, title;
+        switch (reason) {
+            case 'APP_UPDATE':
+                icon = Icon.gift();
+                title = 'Application Update';
+                break;
+            case 'AUTH_EXPIRED':
+                icon = Icon.lock();
+                title = 'Authentication Expired';
+                break;
+            default:
+                icon = Icon.refresh();
+                title = 'Reload Required';
+        }
+
         return viewport({
             alignItems: 'center',
             justifyContent: 'center',
             flexDirection: 'column',
             className: 'xh-suspend-viewport',
             item: panel({
-                title: `Reload Required`,
-                icon: Icon.refresh(),
+                title,
+                icon,
                 className: 'xh-suspend-panel',
                 item: div({
                     className: 'xh-suspend-panel__inner',
@@ -39,6 +67,13 @@ export const suspendPanel = hoistCmp.factory<AppContainerModel>({
                     ]
                 }),
                 bbar: [
+                    button({
+                        text: 'More Details',
+                        icon: Icon.detail(),
+                        minimal: true,
+                        omit: !exception,
+                        onClick: () => XH.exceptionHandler.showExceptionDetails(exception)
+                    }),
                     filler(),
                     button({
                         text: 'Reload now',

package/mobile/appcontainer/AppContainer.ts

@@ -24,13 +24,12 @@ import {aboutDialog} from './AboutDialog';
 import {banner} from './Banner';
 import {exceptionDialog} from './ExceptionDialog';
 import {feedbackDialog} from './FeedbackDialog';
-import {idlePanel} from './IdlePanel';
 import {impersonationBar} from './ImpersonationBar';
 import {lockoutPanel} from './LockoutPanel';
 import {loginPanel} from './LoginPanel';
 import {messageSource} from './MessageSource';
 import {optionsDialog} from './OptionsDialog';
-import {suspendPanel} from './SuspendPanel';
+import {suspendPanel} from './suspend/SuspendPanel';
 import {toastSource} from './ToastSource';
 import {versionBar} from './VersionBar';
 
@@ -157,16 +156,4 @@ const bannerList = hoistCmp.factory<AppContainerModel>({
     }
 });
 
-const suspendedView = hoistCmp.factory<AppContainerModel>({
-    render({model}) {
-        let ret;
-        if (model.appStateModel.suspendData?.reason === 'IDLE') {
-            const content = model.appSpec.idlePanel ?? idlePanel;
-            ret = elementFromContent(content, {onReactivate: () => XH.reloadApp()});
-        } else {
-            ret = suspendPanel();
-        }
-
-        return viewport(ret, appLoadMask());
-    }
-});
+const suspendedView = hoistCmp.factory(() => viewport(suspendPanel(), appLoadMask()));

package/mobile/appcontainer/suspend/SuspendPanel.ts

@@ -0,0 +1,94 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+
+import {AppContainerModel} from '@xh/hoist/appcontainer/AppContainerModel';
+import {XH, hoistCmp} from '@xh/hoist/core';
+import {vframe, div, p} from '@xh/hoist/cmp/layout';
+import {panel} from '@xh/hoist/mobile/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
+import {button} from '@xh/hoist/mobile/cmp/button';
+
+import './SuspendPanel.scss';
+import {idlePanel} from './IdlePanel';
+import {elementFromContent} from '@xh/hoist/utils/react';
+
+/**
+ * Generic Panel to display when the app is suspended.
+ * @internal
+ */
+export const suspendPanel = hoistCmp.factory<AppContainerModel>({
+    displayName: 'SuspendPanel',
+
+    render({model}) {
+        const {suspendData} = model.appStateModel;
+        if (!suspendData) return null;
+
+        let {reason, exception, message} = suspendData;
+
+        // 0) Special case for IDLE, including app override ability.
+        if (reason === 'IDLE') {
+            const content = model.appSpec.idlePanel ?? idlePanel;
+            return elementFromContent(content, {onReactivate: () => XH.reloadApp()});
+        }
+
+        // 1) All Others
+        let icon, title;
+        switch (reason) {
+            case 'APP_UPDATE':
+                icon = Icon.gift();
+                title = 'Application Update';
+                break;
+            case 'AUTH_EXPIRED':
+                icon = Icon.lock();
+                title = 'Authentication Expired';
+                break;
+            default:
+                icon = Icon.refresh();
+                title = 'Reload Required';
+        }
+
+        return panel({
+            className: 'xh-suspend-panel',
+            title,
+            icon,
+            items: [
+                vframe({
+                    className: 'xh-suspend-panel__content',
+                    items: [
+                        div({
+                            className: 'xh-suspend-panel__text-container',
+                            items: [
+                                p({item: message, omit: !message}),
+                                p(`${XH.clientAppName} must be reloaded to continue.`)
+                            ]
+                        }),
+                        div({
+                            className: 'xh-suspend-panel__button-container',
+                            items: [
+                                button({
+                                    text: 'Reload Now',
+                                    icon: Icon.refresh(),
+                                    intent: 'primary',
+                                    flex: 1,
+                                    onClick: () => XH.reloadApp()
+                                }),
+                                button({
+                                    text: 'More Details',
+                                    icon: Icon.detail(),
+                                    minimal: true,
+                                    omit: !exception,
+                                    onClick: () =>
+                                        XH.exceptionHandler.showExceptionDetails(exception)
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "73.0.0-SNAPSHOT.1747155067044",
+  "version": "73.0.0-SNAPSHOT.1747181587236",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/security/BaseOAuthClient.ts

@@ -5,7 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {br, fragment} from '@xh/hoist/cmp/layout';
-import {HoistBase, managed, XH} from '@xh/hoist/core';
+import {HoistBase, isHoistException, managed, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {action, makeObservable} from '@xh/hoist/mobx';
 import {never, wait} from '@xh/hoist/promise';
@@ -148,13 +148,22 @@ export abstract class BaseOAuthClient<
      * Main entry point for this object.
      */
     async initAsync(): Promise<void> {
-        const tokens = await this.doInitAsync();
-        this.logDebug('Successfully initialized with following tokens:');
-        this.logTokensDebug(tokens);
-        if (this.config.autoRefreshSecs > 0) {
-            this.timer = Timer.create({
-                runFn: async () => this.onTimerAsync(),
-                interval: this.TIMER_INTERVAL
+        try {
+            const tokens = await this.doInitAsync();
+            this.logDebug('Successfully initialized with following tokens:');
+            this.logTokensDebug(tokens);
+            if (this.config.autoRefreshSecs > 0) {
+                this.timer = Timer.create({
+                    runFn: async () => this.onTimerAsync(),
+                    interval: this.TIMER_INTERVAL
+                });
+            }
+        } catch (e) {
+            if (isHoistException(e)) throw e;
+            throw XH.exception({
+                name: 'Auth Failed',
+                message: 'Authentication has failed.',
+                cause: e
             });
         }
     }