@xh/hoist 73.0.0-SNAPSHOT.1745446457207 → 73.0.0-SNAPSHOT.1745457790188

package/admin/tabs/{activity/clienterrors → client/errors}/ClientErrorDetail.ts

@@ -23,16 +23,19 @@ export const clientErrorDetail = hoistCmp.factory<ClientErrorsModel>(({model}) =
     if (!selectedRecord) return null;
 
     return panel({
-        className: 'xh-admin-activity-detail',
+        className: 'xh-admin-client-errors-detail',
+        collapsedTitle: 'Error Details',
+        collapsedIcon: Icon.info(),
+        compactHeader: true,
         modelConfig: {
             side: 'bottom',
-            defaultSize: 370
+            defaultSize: 400
         },
         item: form({
             fieldDefaults: {inline: true, readonlyRenderer: valOrNa},
             item: hframe(
                 div({
-                    className: 'xh-admin-activity-detail__form',
+                    className: 'xh-admin-client-errors-detail__form',
                     style: {width: '400px'},
                     items: [
                         h3(Icon.info(), 'Error Info'),
@@ -89,12 +92,13 @@ export const clientErrorDetail = hoistCmp.factory<ClientErrorsModel>(({model}) =
                     className: 'xh-border-left',
                     items: [
                         panel({
-                            height: 100,
+                            flex: 0.5,
                             className: 'xh-border-bottom',
                             items: [
                                 h3(Icon.comment(), 'User Message'),
                                 div({
-                                    className: `xh-admin-activity-detail__message`,
+                                    className: `xh-pad`,
+                                    style: {overflowY: 'auto'},
                                     item: userMsg
                                 })
                             ],

package/admin/tabs/client/errors/ClientErrors.scss

@@ -0,0 +1,52 @@
+/*
+ * 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.
+ */
+
+.xh-admin-client-errors-detail {
+  &__form {
+    overflow-y: auto;
+
+    .xh-form-field {
+      margin: 0;
+      padding: 2px var(--xh-pad-px);
+
+      &.xh-form-field-readonly .xh-form-field-readonly-display {
+        padding: var(--xh-pad-half-px);
+      }
+
+      &:nth-child(odd) {
+        background-color: var(--xh-grid-bg-odd);
+      }
+    }
+
+    .xh-form-field-label {
+      font-size: var(--xh-font-size-small-px);
+      padding: 0;
+    }
+  }
+
+  h3 {
+    color: var(--xh-text-color-headings);
+    background-color: var(--xh-blue-gray-light);
+    margin: 0 !important;
+    font-size: var(--xh-font-size-px);
+    font-weight: normal;
+    padding: var(--xh-pad-half-px) !important;
+    border-bottom: var(--xh-border-solid);
+
+    &:not(:first-child) {
+      border-top: var(--xh-border-solid);
+    }
+
+    .xh-dark & {
+      background-color: var(--xh-blue-gray-dark);
+    }
+
+    .xh-icon {
+      margin-right: var(--xh-pad-px);
+    }
+  }
+}

package/admin/tabs/{activity/clienterrors → client/errors}/ClientErrorsPanel.ts

@@ -16,13 +16,14 @@ import {Icon} from '@xh/hoist/icon';
 import {LocalDate} from '@xh/hoist/utils/datetime';
 import {clientErrorDetail} from './ClientErrorDetail';
 import {ClientErrorsModel} from './ClientErrorsModel';
+import './ClientErrors.scss';
 
 export const clientErrorsPanel = hoistCmp.factory({
     model: creates(ClientErrorsModel),
 
     render() {
         return panel({
-            className: 'xh-admin-activity-panel',
+            className: 'xh-admin-client-errors-panel',
             tbar: tbar(),
             items: [grid(), clientErrorDetail()],
             mask: 'onLoad'

package/admin/tabs/cluster/instances/BaseInstanceModel.ts

@@ -5,13 +5,10 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {InstancesTabModel} from '@xh/hoist/admin/tabs/cluster/instances/InstancesTabModel';
-import {HoistModel, LoadSpec, lookup, XH} from '@xh/hoist/core';
-import {createRef} from 'react';
-import {isDisplayed} from '@xh/hoist/utils/js';
-
-export class BaseInstanceModel extends HoistModel {
-    viewRef = createRef<HTMLElement>();
+import {LoadSpec, lookup, XH} from '@xh/hoist/core';
+import {BaseAdminTabModel} from '@xh/hoist/admin/tabs/BaseAdminTabModel';
 
+export class BaseInstanceModel extends BaseAdminTabModel {
     @lookup(() => InstancesTabModel) parent: InstancesTabModel;
 
     get instanceName(): string {
@@ -30,10 +27,6 @@ export class BaseInstanceModel extends HoistModel {
         });
     }
 
-    get isVisible() {
-        return isDisplayed(this.viewRef.current);
-    }
-
     //-------------------
     // Implementation
     //-------------------

package/admin/tabs/cluster/instances/InstancesTabModel.ts

@@ -15,7 +15,6 @@ import {
 } from '@xh/hoist/admin/tabs/cluster/instances/memory/MemoryMonitorModel';
 import {memoryMonitorPanel} from '@xh/hoist/admin/tabs/cluster/instances/memory/MemoryMonitorPanel';
 import {servicePanel} from '@xh/hoist/admin/tabs/cluster/instances/services/ServicePanel';
-import {webSocketPanel} from '@xh/hoist/admin/tabs/cluster/instances/websocket/WebSocketPanel';
 import {badge} from '@xh/hoist/cmp/badge';
 import {GridContextMenuSpec, GridModel, numberCol} from '@xh/hoist/cmp/grid';
 import {hbox} from '@xh/hoist/cmp/layout';
@@ -205,8 +204,7 @@ export class InstancesTabModel extends HoistModel {
                     content: connPoolMonitorPanel
                 },
                 {id: 'environment', icon: Icon.globe(), content: serverEnvPanel},
-                {id: 'services', icon: Icon.gears(), content: servicePanel},
-                {id: 'webSockets', title: 'WebSockets', icon: Icon.bolt(), content: webSocketPanel}
+                {id: 'services', icon: Icon.gears(), content: servicePanel}
             ]
         });
     }

package/admin/tabs/monitor/MonitorTabModel.ts

@@ -5,15 +5,16 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {MonitorResults, MonitorStatus} from '@xh/hoist/admin/tabs/monitor/Types';
-import {HoistModel, LoadSpec, managed, persist, XH} from '@xh/hoist/core';
+import {LoadSpec, managed, persist, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
 import {SECONDS} from '@xh/hoist/utils/datetime';
 import {pluralize} from '@xh/hoist/utils/js';
 import {filter, isEqual, minBy, sortBy} from 'lodash';
+import {BaseAdminTabModel} from '@xh/hoist/admin/tabs/BaseAdminTabModel';
 
-export class MonitorTabModel extends HoistModel {
+export class MonitorTabModel extends BaseAdminTabModel {
     override persistWith = {localStorageKey: 'xhAdminClientMonitorState'};
 
     @observable.ref results: MonitorResults[] = [];
@@ -73,7 +74,7 @@ export class MonitorTabModel extends HoistModel {
     }
 
     override async doLoadAsync(loadSpec: LoadSpec) {
-        if (!XH.pageIsVisible) return;
+        if (!this.isVisible) return;
 
         try {
             const results = await XH.fetchJson({url: 'monitorResultsAdmin/results', loadSpec});

package/admin/tabs/userData/roles/RoleModel.ts

@@ -328,6 +328,7 @@ export class RoleModel extends HoistModel {
                 {
                     ...actionCol,
                     actionsShowOnHoverOnly: true,
+                    excludeFromChooser: true,
                     width: calcActionColWidth(1),
                     actions: [this.editAction()],
                     omit: this.readonly

package/admin/tabs/userData/roles/RolePanel.ts

@@ -8,7 +8,7 @@ import {recategorizeDialog} from '@xh/hoist/admin/tabs/userData/roles/recategori
 import {grid} from '@xh/hoist/cmp/grid';
 import {fragment, hframe, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
-import {button} from '@xh/hoist/desktop/cmp/button';
+import {button, colChooserButton} from '@xh/hoist/desktop/cmp/button';
 import {errorMessage} from '@xh/hoist/cmp/error';
 import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
 import {switchInput} from '@xh/hoist/desktop/cmp/input';
@@ -50,7 +50,9 @@ export const rolePanel = hoistCmp.factory({
                         bind: 'showInGroups',
                         label: 'Group by Category',
                         labelSide: 'left'
-                    })
+                    }),
+                    '-',
+                    colChooserButton()
                 ],
                 item: hframe(vframe(grid(), roleGraph()), detailsPanel())
             }),

package/build/types/admin/columns/Core.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ColumnSpec } from '@xh/hoist/cmp/grid';
 export declare const name: ColumnSpec;
 export declare const type: ColumnSpec;
@@ -5,3 +6,5 @@ export declare const description: ColumnSpec;
 export declare const notes: ColumnSpec;
 export declare const note: ColumnSpec;
 export declare const timestampNoYear: ColumnSpec;
+export declare function badgeRenderer(v: any): "-" | import("react").ReactElement<import("@xh/hoist/cmp/badge").BadgeProps, any>;
+export declare const badgeCol: ColumnSpec;

package/build/types/admin/tabs/BaseAdminTabModel.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { HoistModel } from '@xh/hoist/core';
+export declare class BaseAdminTabModel extends HoistModel {
+    viewRef: import("react").RefObject<HTMLElement>;
+    get isVisible(): boolean;
+}

package/build/types/admin/tabs/activity/tracking/ActivityTrackingPanel.d.ts

@@ -1,2 +1,3 @@
 import { ActivityTrackingModel } from './ActivityTrackingModel';
+import './ActivityTracking.scss';
 export declare const activityTrackingPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<ActivityTrackingModel>>;

package/build/types/admin/tabs/client/ClientTab.d.ts

@@ -0,0 +1 @@
+export declare const clientTab: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<import("@xh/hoist/core").HoistModel>>;

package/build/types/admin/tabs/{cluster/instances/websocket/WebSocketModel.d.ts → client/clients/ClientsModel.d.ts}

@@ -1,10 +1,11 @@
-import { BaseInstanceModel } from '@xh/hoist/admin/tabs/cluster/instances/BaseInstanceModel';
 import { GridModel } from '@xh/hoist/cmp/grid';
 import { LoadSpec } from '@xh/hoist/core';
 import { RecordActionSpec, StoreRecord } from '@xh/hoist/data';
-export declare class WebSocketModel extends BaseInstanceModel {
+import { BaseAdminTabModel } from '@xh/hoist/admin/tabs/BaseAdminTabModel';
+export declare class ClientsModel extends BaseAdminTabModel {
     lastRefresh: number;
     gridModel: GridModel;
+    groupBy: 'user' | 'instance';
     private _timer;
     forceSuspendAction: RecordActionSpec;
     reqHealthReportAction: RecordActionSpec;
@@ -12,5 +13,7 @@ export declare class WebSocketModel extends BaseInstanceModel {
     doLoadAsync(loadSpec: LoadSpec): Promise<void>;
     forceSuspendAsync(toRecs: StoreRecord[]): Promise<void>;
     requestHealthReportAsync(toRecs: StoreRecord[]): Promise<void>;
+    private createGridModel;
     private bulkPush;
+    private applyGroupBy;
 }

package/build/types/admin/tabs/client/clients/ClientsPanel.d.ts

@@ -0,0 +1,2 @@
+import { ClientsModel } from './ClientsModel';
+export declare const clientsPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<ClientsModel>>;

package/build/types/admin/tabs/{activity/clienterrors → client/errors}/ClientErrorsPanel.d.ts

@@ -1,2 +1,3 @@
 import { ClientErrorsModel } from './ClientErrorsModel';
+import './ClientErrors.scss';
 export declare const clientErrorsPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<ClientErrorsModel>>;

package/build/types/admin/tabs/cluster/instances/BaseInstanceModel.d.ts

@@ -1,11 +1,9 @@
-/// <reference types="react" />
 import { InstancesTabModel } from '@xh/hoist/admin/tabs/cluster/instances/InstancesTabModel';
-import { HoistModel, LoadSpec } from '@xh/hoist/core';
-export declare class BaseInstanceModel extends HoistModel {
-    viewRef: import("react").RefObject<HTMLElement>;
+import { LoadSpec } from '@xh/hoist/core';
+import { BaseAdminTabModel } from '@xh/hoist/admin/tabs/BaseAdminTabModel';
+export declare class BaseInstanceModel extends BaseAdminTabModel {
     parent: InstancesTabModel;
     get instanceName(): string;
     handleLoadException(e: unknown, loadSpec: LoadSpec): void;
-    get isVisible(): boolean;
     private isInstanceNotFound;
 }

package/build/types/admin/tabs/monitor/MonitorTabModel.d.ts

@@ -1,7 +1,8 @@
 import { MonitorResults, MonitorStatus } from '@xh/hoist/admin/tabs/monitor/Types';
-import { HoistModel, LoadSpec } from '@xh/hoist/core';
+import { LoadSpec } from '@xh/hoist/core';
 import { Timer } from '@xh/hoist/utils/async';
-export declare class MonitorTabModel extends HoistModel {
+import { BaseAdminTabModel } from '@xh/hoist/admin/tabs/BaseAdminTabModel';
+export declare class MonitorTabModel extends BaseAdminTabModel {
     persistWith: {
         localStorageKey: string;
     };

package/build/types/svc/EnvironmentService.d.ts

@@ -31,7 +31,9 @@ export declare class EnvironmentService extends HoistService {
     isMinHoistCoreVersion(version: string): boolean;
     isMaxHoistCoreVersion(version: string): boolean;
     /**
-     * Update critical environment information from server.
+     * Update critical environment information from server, including current app version + build,
+     * upgrade prompt mode, and alert banner.
+     *
      * @internal - not for app use. Called by `pollTimer` and as needed by Hoist code.
      */
     pollServerAsync(): Promise<void>;

package/package.json

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

package/svc/EnvironmentService.ts

@@ -113,7 +113,9 @@ export class EnvironmentService extends HoistService {
     }
 
     /**
-     * Update critical environment information from server.
+     * Update critical environment information from server, including current app version + build,
+     * upgrade prompt mode, and alert banner.
+     *
      * @internal - not for app use. Called by `pollTimer` and as needed by Hoist code.
      */
     async pollServerAsync() {
@@ -125,15 +127,15 @@ export class EnvironmentService extends HoistService {
             return;
         }
 
-        // Update config/interval, and server info
+        // Update config/interval, server info, and alert banner.
         const {pollConfig, instanceName, alertBanner, appVersion, appBuild} = data;
         this.pollConfig = pollConfig;
         this.pollTimer.setInterval(this.pollIntervalMs);
         this.setServerInfo(instanceName, appVersion, appBuild);
         XH.alertBannerService.updateBanner(alertBanner);
 
-        // Handle version change
-        if (appVersion != XH.getEnv('appVersion') || appBuild != XH.getEnv('appBuild')) {
+        // Handle version change - compare to constants baked into client build.
+        if (appVersion != XH.appVersion || appBuild != XH.appBuild) {
             // force the user to refresh or prompt the user to refresh via the banner according to config
             // build checked to trigger refresh across SNAPSHOT updates in lower environments
             const {onVersionChange} = pollConfig;