@xh/hoist 73.0.0-SNAPSHOT.1745976013413 → 73.0.0-SNAPSHOT.1746025071597

package/CHANGELOG.md

@@ -4,7 +4,8 @@
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟢 TRIVIAL - minor upgrade to Hoist Core)
 
-Requires `hoist-core >= 30.0` with new APIs to support the consolidated Admin Console "Clients" tab.
+Requires `hoist-core >= 30.0` with new APIs to support the consolidated Admin Console "Clients" tab
+and new properties on `TrackLog`.
 
 ### 🎁 New Features
 
@@ -12,6 +13,9 @@ Requires `hoist-core >= 30.0` with new APIs to support the consolidated Admin Co
   across all instances in the cluster.
 * Updated `FormModel` to support `persistWith` for storing and recalling its values, including
   developer options to persist all or a provided subset of fields.
+* Enhanced all activity tracking messages with new `tabId` and `loadId` properties, to disambiguate
+  tracking activity for users with multiple browser tabs and multiple full refreshes/restarts of a
+  client app within the same tab.
 
 ### 🐞 Bug Fixes
 

package/admin/App.scss

@@ -25,6 +25,12 @@
     height: 80vh;
     width: 80vw;
   }
+
+  .xh-badge-col {
+    --xh-badge-font-size: 0.9em;
+    background-color: var(--xh-intent-primary-darker);
+    font-family: var(--xh-font-family-mono);
+  }
 }
 
 .xh-units-label {

package/admin/{tabs/client/clients/ClientsColumns.ts → columns/Clients.ts}

@@ -4,11 +4,19 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {badgeCol} from '@xh/hoist/admin/columns';
 import * as Col from '@xh/hoist/cmp/grid/columns';
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
 import {Icon} from '@xh/hoist/icon';
 
+export const createdTime: ColumnSpec = {
+    field: {
+        name: 'createdTime',
+        type: 'date',
+        displayName: 'Created'
+    },
+    ...Col.compactDate
+};
+
 export const isOpen: ColumnSpec = {
     field: {name: 'isOpen', type: 'bool'},
     headerName: '',
@@ -29,23 +37,14 @@ export const key: ColumnSpec = {
     width: 160
 };
 
-export const createdTime: ColumnSpec = {
+export const lastReceivedTime: ColumnSpec = {
     field: {
-        name: 'createdTime',
+        name: 'lastReceivedTime',
         type: 'date',
-        displayName: 'Created'
-    },
-    ...Col.compactDate
-};
-
-export const sentMessageCount: ColumnSpec = {
-    field: {
-        name: 'sentMessageCount',
-        type: 'int',
-        displayName: 'Sent'
+        displayName: 'Last Received'
     },
-    ...Col.number,
-    width: 90
+    ...Col.compactDate,
+    width: 140
 };
 
 export const lastSentTime: ColumnSpec = {
@@ -68,44 +67,12 @@ export const receivedMessageCount: ColumnSpec = {
     width: 90
 };
 
-export const lastReceivedTime: ColumnSpec = {
-    field: {
-        name: 'lastReceivedTime',
-        type: 'date',
-        displayName: 'Last Received'
-    },
-    ...Col.compactDate,
-    width: 140
-};
-
-export const appVersion: ColumnSpec = {
-    field: {
-        name: 'appVersion',
-        displayName: 'Version',
-        type: 'string'
-    },
-    width: 120
-};
-
-export const appBuild: ColumnSpec = {
-    field: {
-        name: 'appBuild',
-        displayName: 'Build',
-        type: 'string'
-    },
-    width: 120
-};
-export const loadId: ColumnSpec = {
-    field: {
-        name: 'loadId',
-        type: 'string'
-    },
-    ...badgeCol
-};
-export const tabId: ColumnSpec = {
+export const sentMessageCount: ColumnSpec = {
     field: {
-        name: 'tabId',
-        type: 'string'
+        name: 'sentMessageCount',
+        type: 'int',
+        displayName: 'Sent'
     },
-    ...badgeCol
+    ...Col.number,
+    width: 90
 };

package/admin/columns/Core.ts

@@ -11,15 +11,29 @@ import {dateTimeRenderer} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import copy from 'clipboard-copy';
 
-export const name: ColumnSpec = {
-    field: {name: 'name', type: 'string'},
-    width: 200
+export const badgeCol: ColumnSpec = {
+    autosizable: false,
+    width: 100,
+    renderer: badgeRenderer
 };
 
-export const type: ColumnSpec = {
-    field: {name: 'type', type: 'string'},
-    width: 100
-};
+export function badgeRenderer(v) {
+    return v
+        ? badge({
+              item: v,
+              className: 'xh-badge-col',
+              style: {cursor: 'copy'},
+              title: 'Double-click to copy',
+              onDoubleClick: () => {
+                  copy(v);
+                  XH.toast({
+                      icon: Icon.copy(),
+                      message: `Copied ${v}`
+                  });
+              }
+          })
+        : '-';
+}
 
 export const description: ColumnSpec = {
     field: {name: 'description', type: 'string'},
@@ -27,11 +41,9 @@ export const description: ColumnSpec = {
     minWidth: 200
 };
 
-export const notes: ColumnSpec = {
-    field: {name: 'notes', type: 'string'},
-    minWidth: 60,
-    flex: true,
-    tooltip: true
+export const name: ColumnSpec = {
+    field: {name: 'name', type: 'string'},
+    width: 200
 };
 
 export const note: ColumnSpec = {
@@ -45,33 +57,20 @@ export const note: ColumnSpec = {
     tooltip: true
 };
 
+export const notes: ColumnSpec = {
+    field: {name: 'notes', type: 'string'},
+    minWidth: 60,
+    flex: true,
+    tooltip: true
+};
+
 export const timestampNoYear: ColumnSpec = {
     field: {name: 'timestamp', type: 'date'},
     ...dateTimeSec,
     renderer: dateTimeRenderer({fmt: 'MMM DD HH:mm:ss.SSS'})
 };
 
-export function badgeRenderer(v) {
-    return v
-        ? badge({
-              item: v,
-              className: 'xh-font-family-mono',
-              style: {cursor: 'copy'},
-              intent: 'primary',
-              title: 'Double-click to copy',
-              onDoubleClick: () => {
-                  copy(v);
-                  XH.toast({
-                      icon: Icon.copy(),
-                      message: `Copied ${v}`
-                  });
-              }
-          })
-        : '-';
-}
-
-export const badgeCol: ColumnSpec = {
-    autosizable: false,
-    width: 90,
-    renderer: badgeRenderer
+export const type: ColumnSpec = {
+    field: {name: 'type', type: 'string'},
+    width: 100
 };

package/admin/columns/Tracking.ts

@@ -4,13 +4,22 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {badgeRenderer} from '@xh/hoist/admin/columns';
+import {badgeCol, badgeRenderer} from '@xh/hoist/admin/columns';
 import {RangeAggregator} from '@xh/hoist/admin/tabs/activity/aggregators/RangeAggregator';
 import * as Col from '@xh/hoist/cmp/grid/columns';
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
 import {fmtDate, fmtSpan, numberRenderer} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 
+export const appBuild: ColumnSpec = {
+    field: {
+        name: 'appBuild',
+        displayName: 'Build',
+        type: 'string'
+    },
+    width: 120
+};
+
 export const appEnvironment: ColumnSpec = {
     field: {
         name: 'appEnvironment',
@@ -21,8 +30,12 @@ export const appEnvironment: ColumnSpec = {
 };
 
 export const appVersion: ColumnSpec = {
-    field: {name: 'appVersion', type: 'string'},
-    width: 130
+    field: {
+        name: 'appVersion',
+        displayName: 'Version',
+        type: 'string'
+    },
+    width: 120
 };
 
 export const browser: ColumnSpec = {
@@ -35,24 +48,25 @@ export const browser: ColumnSpec = {
     width: 100
 };
 
-export const severity: ColumnSpec = {
+export const category: ColumnSpec = {
     field: {
-        name: 'severity',
+        name: 'category',
         type: 'string',
         isDimension: true,
         aggregator: 'UNIQUE'
     },
-    width: 80
+    width: 100
 };
 
-export const category: ColumnSpec = {
+export const correlationId: ColumnSpec = {
     field: {
-        name: 'category',
+        name: 'correlationId',
         type: 'string',
-        isDimension: true,
-        aggregator: 'UNIQUE'
+        displayName: 'Correlation ID'
     },
-    width: 100
+    renderer: badgeRenderer,
+    width: 180,
+    autosizeBufferPx: 20
 };
 
 export const data: ColumnSpec = {
@@ -71,6 +85,20 @@ export const day: ColumnSpec = {
     displayName: 'App Day'
 };
 
+export const dayRange: ColumnSpec = {
+    field: {
+        name: 'dayRange',
+        type: 'json',
+        aggregator: new RangeAggregator(),
+        displayName: 'App Day Range'
+    },
+    align: 'right',
+    width: 200,
+    renderer: dayRangeRenderer,
+    exportValue: dayRangeRenderer,
+    comparator: dayRangeComparator
+};
+
 export const device: ColumnSpec = {
     field: {
         name: 'device',
@@ -117,24 +145,33 @@ export const entryId: ColumnSpec = {
     align: 'right'
 };
 
-export const correlationId: ColumnSpec = {
+export const error: ColumnSpec = {
     field: {
-        name: 'correlationId',
+        name: 'error',
+        type: 'string'
+    },
+    width: 250,
+    autosizeMaxWidth: 400,
+    renderer: e => fmtSpan(e, {className: 'xh-font-family-mono xh-font-size-small'})
+};
+
+export const instance: ColumnSpec = {
+    field: {
+        name: 'instance',
         type: 'string',
-        displayName: 'Correlation ID'
+        isDimension: true,
+        aggregator: 'UNIQUE'
     },
     renderer: badgeRenderer,
     width: 100
 };
 
-export const error: ColumnSpec = {
+export const loadId: ColumnSpec = {
     field: {
-        name: 'error',
+        name: 'loadId',
         type: 'string'
     },
-    width: 250,
-    autosizeMaxWidth: 400,
-    renderer: e => fmtSpan(e, {className: 'xh-font-family-mono xh-font-size-small'})
+    ...badgeCol
 };
 
 export const msg: ColumnSpec = {
@@ -149,25 +186,32 @@ export const msg: ColumnSpec = {
     autosizeMaxWidth: 400
 };
 
-export const url: ColumnSpec = {
+export const severity: ColumnSpec = {
     field: {
-        name: 'url',
+        name: 'severity',
         type: 'string',
-        displayName: 'URL'
+        isDimension: true,
+        aggregator: 'UNIQUE'
     },
-    width: 250,
-    autosizeMaxWidth: 400
+    width: 80
 };
 
-export const instance: ColumnSpec = {
+export const tabId: ColumnSpec = {
     field: {
-        name: 'instance',
+        name: 'tabId',
+        type: 'string'
+    },
+    ...badgeCol
+};
+
+export const url: ColumnSpec = {
+    field: {
+        name: 'url',
         type: 'string',
-        isDimension: true,
-        aggregator: 'UNIQUE'
+        displayName: 'URL'
     },
-    renderer: badgeRenderer,
-    width: 100
+    width: 250,
+    autosizeMaxWidth: 400
 };
 
 export const userAgent: ColumnSpec = {
@@ -207,20 +251,6 @@ export const userMessageFlag: ColumnSpec = {
     }
 };
 
-export const dayRange: ColumnSpec = {
-    field: {
-        name: 'dayRange',
-        type: 'json',
-        aggregator: new RangeAggregator(),
-        displayName: 'App Day Range'
-    },
-    align: 'right',
-    width: 200,
-    renderer: dayRangeRenderer,
-    exportValue: dayRangeRenderer,
-    comparator: dayRangeComparator
-};
-
 //-----------------------
 // Implementation
 //-----------------------

package/admin/columns/index.ts

@@ -1,3 +1,4 @@
+export * from './Clients';
 export * from './Core';
 export * from './Rest';
 export * from './Tracking';

package/admin/tabs/activity/tracking/ActivityTrackingModel.ts

@@ -105,7 +105,9 @@ export class ActivityTrackingModel extends HoistModel {
                 Col.url.field,
                 Col.instance.field,
                 Col.appVersion.field,
-                Col.appEnvironment.field
+                Col.appEnvironment.field,
+                Col.loadId.field,
+                Col.tabId.field
             ] as CubeFieldSpec[]
         });
 
@@ -133,6 +135,8 @@ export class ActivityTrackingModel extends HoistModel {
                 {field: 'instance'},
                 {field: 'severity'},
                 {field: 'appVersion'},
+                {field: 'loadId'},
+                {field: 'tabId'},
                 {field: 'appEnvironment', displayName: 'Environment'}
             ]
         });
@@ -183,6 +187,8 @@ export class ActivityTrackingModel extends HoistModel {
                 {field: 'count', hidden},
                 {...Col.appEnvironment, hidden},
                 {...Col.appVersion, hidden},
+                {...Col.loadId, hidden},
+                {...Col.tabId, hidden},
                 {...Col.url, hidden},
                 {...Col.instance, hidden}
             ]

package/admin/tabs/activity/tracking/detail/ActivityDetailModel.ts

@@ -31,7 +31,6 @@ export class ActivityDetailModel extends HoistModel {
 
     override onLinked() {
         const hidden = true;
-
         this.gridModel = new GridModel({
             sortBy: 'dateCreated|desc',
             colChooserModel: true,
@@ -53,11 +52,13 @@ export class ActivityDetailModel extends HoistModel {
                 {...Col.device},
                 {...Col.userAgent, hidden},
                 {...Col.appVersion},
+                {...Col.loadId},
+                {...Col.tabId},
                 {...Col.appEnvironment, hidden},
                 {...Col.data, hidden},
                 {...Col.url},
-                {...Col.correlationId},
                 {...Col.instance, hidden},
+                {...Col.correlationId},
                 {...Col.severity, hidden},
                 {...Col.elapsed},
                 {...Col.dateCreatedWithSec, displayName: 'Timestamp'}

package/admin/tabs/activity/tracking/detail/ActivityDetailView.ts

@@ -4,11 +4,11 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {correlationId, instance} from '@xh/hoist/admin/columns';
+import {badgeRenderer} from '@xh/hoist/admin/columns';
 import {form} from '@xh/hoist/cmp/form';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {a, div, filler, h3, hframe, placeholder, span} from '@xh/hoist/cmp/layout';
-import {hoistCmp, creates} from '@xh/hoist/core';
+import {creates, hoistCmp} from '@xh/hoist/core';
 import {colChooserButton, exportButton} from '@xh/hoist/desktop/cmp/button';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {gridFindField} from '@xh/hoist/desktop/cmp/grid';
@@ -95,17 +95,25 @@ const detailRecForm = hoistCmp.factory<ActivityDetailModel>(({model}) => {
                                   return `${appVersion} (${appEnvironment})`;
                               }
                           }),
+                          formField({
+                              field: 'loadId',
+                              readonlyRenderer: badgeRenderer
+                          }),
+                          formField({
+                              field: 'tabId',
+                              readonlyRenderer: badgeRenderer
+                          }),
                           formField({
                               field: 'url',
                               readonlyRenderer: hyperlinkVal
                           }),
                           formField({
                               field: 'instance',
-                              readonlyRenderer: v => instance.renderer(v, null)
+                              readonlyRenderer: badgeRenderer
                           }),
                           formField({
                               field: 'correlationId',
-                              readonlyRenderer: v => correlationId.renderer(v, null)
+                              readonlyRenderer: badgeRenderer
                           }),
                           formField({
                               field: 'elapsed',

package/admin/tabs/client/clients/ClientsModel.ts

@@ -18,7 +18,6 @@ import {Timer} from '@xh/hoist/utils/async';
 import {SECONDS} from '@xh/hoist/utils/datetime';
 import {pluralize} from '@xh/hoist/utils/js';
 import {isEmpty} from 'lodash';
-import * as WSCol from './ClientsColumns';
 import {BaseAdminTabModel} from '@xh/hoist/admin/tabs/BaseAdminTabModel';
 
 export class ClientsModel extends BaseAdminTabModel {
@@ -177,32 +176,32 @@ export class ClientsModel extends BaseAdminTabModel {
             },
             sortBy: ['user'],
             columns: [
-                WSCol.isOpen,
+                Col.isOpen,
                 Col.user,
                 {
                     headerName: 'Session',
                     headerAlign: 'center',
                     children: [
-                        WSCol.createdTime,
-                        {...WSCol.key, hidden},
+                        Col.createdTime,
+                        {...Col.key, hidden},
                         Col.instance,
-                        WSCol.loadId,
-                        WSCol.tabId
+                        Col.loadId,
+                        Col.tabId
                     ]
                 },
                 {
                     headerName: 'Client App',
                     headerAlign: 'center',
-                    children: [WSCol.appVersion, WSCol.appBuild]
+                    children: [Col.appVersion, Col.appBuild]
                 },
                 {
                     headerName: 'Send/Receive',
                     headerAlign: 'center',
                     children: [
-                        WSCol.sentMessageCount,
-                        WSCol.lastSentTime,
-                        WSCol.receivedMessageCount,
-                        WSCol.lastReceivedTime
+                        Col.sentMessageCount,
+                        Col.lastSentTime,
+                        Col.receivedMessageCount,
+                        Col.lastReceivedTime
                     ]
                 }
             ]

package/build/types/admin/{tabs/client/clients/ClientsColumns.d.ts → columns/Clients.d.ts}

@@ -1,12 +1,8 @@
 import { ColumnSpec } from '@xh/hoist/cmp/grid/columns';
+export declare const createdTime: ColumnSpec;
 export declare const isOpen: ColumnSpec;
 export declare const key: ColumnSpec;
-export declare const createdTime: ColumnSpec;
-export declare const sentMessageCount: ColumnSpec;
+export declare const lastReceivedTime: ColumnSpec;
 export declare const lastSentTime: ColumnSpec;
 export declare const receivedMessageCount: ColumnSpec;
-export declare const lastReceivedTime: ColumnSpec;
-export declare const appVersion: ColumnSpec;
-export declare const appBuild: ColumnSpec;
-export declare const loadId: ColumnSpec;
-export declare const tabId: ColumnSpec;
+export declare const sentMessageCount: ColumnSpec;

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

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

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

@@ -1,21 +1,24 @@
 import { ColumnSpec } from '@xh/hoist/cmp/grid/columns';
+export declare const appBuild: ColumnSpec;
 export declare const appEnvironment: ColumnSpec;
 export declare const appVersion: ColumnSpec;
 export declare const browser: ColumnSpec;
-export declare const severity: ColumnSpec;
 export declare const category: ColumnSpec;
+export declare const correlationId: ColumnSpec;
 export declare const data: ColumnSpec;
 export declare const day: ColumnSpec;
+export declare const dayRange: ColumnSpec;
 export declare const device: ColumnSpec;
 export declare const elapsed: ColumnSpec;
 export declare const entryCount: ColumnSpec;
 export declare const entryId: ColumnSpec;
-export declare const correlationId: ColumnSpec;
 export declare const error: ColumnSpec;
+export declare const instance: ColumnSpec;
+export declare const loadId: ColumnSpec;
 export declare const msg: ColumnSpec;
+export declare const severity: ColumnSpec;
+export declare const tabId: ColumnSpec;
 export declare const url: ColumnSpec;
-export declare const instance: ColumnSpec;
 export declare const userAgent: ColumnSpec;
 export declare const userAlertedFlag: ColumnSpec;
 export declare const userMessageFlag: ColumnSpec;
-export declare const dayRange: ColumnSpec;

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

@@ -1,3 +1,4 @@
+export * from './Clients';
 export * from './Core';
 export * from './Rest';
 export * from './Tracking';

package/package.json

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

package/svc/TrackService.ts

@@ -119,6 +119,8 @@ export class TrackService extends HoistService {
             msg: stripTags(options.message),
             clientUsername: XH.getUsername(),
             appVersion: XH.getEnv('clientVersion'),
+            loadId: XH.loadId,
+            tabId: XH.tabId,
             url: window.location.href,
             timestamp: Date.now()
         };