@xh/hoist 73.0.0-SNAPSHOT.1745446674015 → 73.0.0-SNAPSHOT.1745589992773

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/core/types/Interfaces.d.ts

@@ -165,7 +165,7 @@ export interface AppOptionSpec {
 /**
  * Severity levels for tracking.  Default is 'INFO'.
  */
-export type TrackSeverity = 'DEBUG' | 'INFO' | 'WARN';
+export type TrackSeverity = 'DEBUG' | 'INFO' | 'WARN' | 'ERROR';
 /**
  * Options for tracking activity on the server via TrackService.
  */

package/build/types/promise/Promise.d.ts

@@ -18,7 +18,7 @@ declare global {
          *      selector will be handled by this method.
          * @param fn - catch handler
          */
-        catchWhen<TResult = undefined>(selector: ((e: any) => boolean) | Some<string>, fn?: (reason: any) => Awaitable<TResult>): Promise<T | TResult>;
+        catchWhen<TResult = undefined>(selector: ((e: unknown) => boolean) | Some<string>, fn?: (reason: unknown) => Awaitable<TResult>): Promise<T | TResult>;
         /**
          * Version of `catch()` that passes the error onto Hoist's default exception handler for
          * convention-driven logging and alerting. Typically called last in a Promise chain.
@@ -27,7 +27,7 @@ declare global {
         /**
          * Version of `catchDefault()` that will only catch certain exceptions.
          */
-        catchDefaultWhen(selector: ((e: any) => boolean) | Some<string>, options: ExceptionHandlerOptions): Promise<T | undefined>;
+        catchDefaultWhen(selector: ((e: unknown) => boolean) | Some<string>, options: ExceptionHandlerOptions): Promise<T | undefined>;
         /**
          * Wait on a potentially async function before passing on the original value.
          * Useful when we want to block and do something on the promise chain, but do not want to

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

@@ -36,7 +36,7 @@ interface ActivityTrackingConfig {
     levels?: Array<{
         username: string | '*';
         category: string | '*';
-        severity: 'DEBUG' | 'INFO' | 'WARN';
+        severity: 'DEBUG' | 'INFO' | 'WARN' | 'ERROR';
     }>;
 }
 export {};

package/core/types/Interfaces.ts

@@ -207,7 +207,7 @@ export interface AppOptionSpec {
 /**
  * Severity levels for tracking.  Default is 'INFO'.
  */
-export type TrackSeverity = 'DEBUG' | 'INFO' | 'WARN';
+export type TrackSeverity = 'DEBUG' | 'INFO' | 'WARN' | 'ERROR';
 
 /**
  * Options for tracking activity on the server via TrackService.

package/package.json

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

package/promise/Promise.ts

@@ -12,11 +12,13 @@ import {
     TrackOptions,
     XH,
     Some,
-    Awaitable
+    Awaitable,
+    TimeoutExceptionConfig
 } from '@xh/hoist/core';
 import {action} from '@xh/hoist/mobx';
 import {olderThan, SECONDS} from '@xh/hoist/utils/datetime';
 import {castArray, isFunction, isNumber, isString} from 'lodash';
+import {isOmitted} from '@xh/hoist/utils/impl';
 
 /**
  * Enhancements to the Global Promise object.
@@ -39,8 +41,8 @@ declare global {
          * @param fn - catch handler
          */
         catchWhen<TResult = undefined>(
-            selector: ((e: any) => boolean) | Some<string>,
-            fn?: (reason: any) => Awaitable<TResult>
+            selector: ((e: unknown) => boolean) | Some<string>,
+            fn?: (reason: unknown) => Awaitable<TResult>
         ): Promise<T | TResult>;
 
         /**
@@ -53,7 +55,7 @@ declare global {
          * Version of `catchDefault()` that will only catch certain exceptions.
          */
         catchDefaultWhen(
-            selector: ((e: any) => boolean) | Some<string>,
+            selector: ((e: unknown) => boolean) | Some<string>,
             options: ExceptionHandlerOptions
         ): Promise<T | undefined>;
 
@@ -169,43 +171,63 @@ export function never<T>(): Promise<T> {
 //--------------------------------
 const enhancePromise = promisePrototype => {
     Object.assign(promisePrototype, {
-        thenAction(fn) {
+        thenAction<T, TResult>(fn: (value: T) => Awaitable<TResult>): Promise<TResult> {
             return this.then(action(fn));
         },
 
-        catchWhen(selector, fn) {
-            return this.catch(e => {
+        catchWhen<T, TResult = undefined>(
+            selector: ((e: unknown) => boolean) | Some<string>,
+            fn?: (reason: unknown) => Awaitable<TResult>
+        ): Promise<T | TResult> {
+            return this.catch((e: unknown) => {
                 this.throwIfFailsSelector(e, selector);
                 return fn ? fn(e) : undefined;
             });
         },
 
-        catchDefault(options) {
-            return this.catch(e => XH.handleException(e, options));
+        catchDefault<T>(options?: ExceptionHandlerOptions): Promise<T | undefined> {
+            return this.catch((e: unknown) => XH.handleException(e, options));
         },
 
-        catchDefaultWhen(selector, options) {
-            return this.catch(e => {
+        catchDefaultWhen<T>(
+            selector: ((e: unknown) => boolean) | Some<string>,
+            options: ExceptionHandlerOptions
+        ): Promise<T | undefined> {
+            return this.catch((e: unknown) => {
                 this.throwIfFailsSelector(e, selector);
                 return XH.handleException(e, options);
             });
         },
 
-        track(options) {
-            if (!options || (isFunction(options.omit) ? options.omit() : options.omit)) return this;
-            if (isString(options)) options = {message: options};
-
-            const startTime = Date.now();
-            return this.finally(() => {
-                XH.track({
-                    timestamp: startTime,
-                    elapsed: Date.now() - startTime,
-                    ...options
-                });
-            });
+        track<T>(options: TrackOptions | string): Promise<T> {
+            if (!options) return this;
+
+            const startTime = Date.now(),
+                doTrack = (isError: boolean) => {
+                    const opts: TrackOptions = isString(options)
+                        ? {message: options}
+                        : {...options};
+
+                    opts.timestamp = startTime;
+                    opts.elapsed = Date.now() - startTime;
+                    if (isError) opts.severity = 'ERROR';
+
+                    XH.track(opts);
+                };
+
+            return this.then(
+                (v: T) => {
+                    doTrack(true);
+                    return v;
+                },
+                (t: unknown) => {
+                    doTrack(false);
+                    throw t;
+                }
+            );
         },
 
-        tap(onFulfillment) {
+        tap<T>(onFulfillment: (value: T) => any): Promise<T> {
             let ret = null;
             const resolveFn = data => {
                 ret = data;
@@ -215,13 +237,14 @@ const enhancePromise = promisePrototype => {
             return this.then(resolveFn).then(() => ret);
         },
 
-        wait(interval) {
+        wait<T>(interval: number): Promise<T> {
             return this.finally(() => wait(interval));
         },
 
-        timeout(config) {
-            if (config == null) return this;
-            if (isNumber(config)) config = {interval: config};
+        timeout<T>(spec: PromiseTimeoutSpec): Promise<T> {
+            if (spec == null) return this;
+
+            const config: TimeoutExceptionConfig = isNumber(spec) ? {interval: spec} : spec;
             const interval = config.interval;
 
             let completed = false;
@@ -236,14 +259,14 @@ const enhancePromise = promisePrototype => {
             return Promise.race([deadline, promise]);
         },
 
-        linkTo(cfg) {
+        linkTo<T>(cfg: PromiseLinkSpec): Promise<T> {
             if (!cfg) return this;
 
-            if (cfg.isTaskObserver) {
+            if (cfg instanceof TaskObserver) {
                 cfg = {observer: cfg};
             }
 
-            if (cfg.observer && !(isFunction(cfg.omit) ? cfg.omit() : cfg.omit)) {
+            if (cfg.observer && !isOmitted(cfg)) {
                 cfg.observer.linkTo(TaskObserver.forPromise({promise: this, message: cfg.message}));
             }
             return this;
@@ -252,7 +275,7 @@ const enhancePromise = promisePrototype => {
         //--------------------------------
         // Implementation
         //--------------------------------
-        throwIfFailsSelector(e, selector) {
+        throwIfFailsSelector(e: any, selector: any) {
             const fn = isFunction(selector) ? selector : e => castArray(selector).includes(e.name);
             if (!fn(e)) throw e;
         }

package/svc/TrackService.ts

@@ -168,6 +168,6 @@ interface ActivityTrackingConfig {
     levels?: Array<{
         username: string | '*';
         category: string | '*';
-        severity: 'DEBUG' | 'INFO' | 'WARN';
+        severity: 'DEBUG' | 'INFO' | 'WARN' | 'ERROR';
     }>;
 }