@xh/hoist 76.0.0 → 76.1.0

package/CHANGELOG.md

@@ -1,54 +1,67 @@
 # Changelog
 
-## 76.0.0 - 2025-09-26
+## 76.1.0 - 2025-10-17
 
-### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - AG Grid update, Hoist React upgrade)
+### 🎁 New Features
 
-* Hoist v76 upgrades AG Grid to v34 (from v31), covering three major AG Grid releases with their own
-  potentially breaking changes. Fortunately, internal Hoist updates to our managed API wrappers mean
-  that most apps will see very minimal changes, although there are required adjustments to app-level
-  `package.json` to install updated grid dependencies and `Bootstrap.ts` to import and register
-  your licensed grid modules at their new import paths.
+* Added a public `@bindable titleDetails` config to `DashViewModel` to support displaying additional
+  information in the title bar of dashboard widgets. The new property is not persisted, allowing
+  apps to programmatically show dynamic info in a widget header without perturbing its saved state.
+* Enhanced grid column filtering to support sorting the list of available values.
 
-  Applications implementing `groupRowRenderer` should note that the `value` property passed to this
-  function is no longer stringified, but is instead the raw field value for the group.
+### ⚙️ Technical
 
-  See AG's upgrade guides for more details:
-  ** [Upgrade to v32](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-32/)
-  ** [Upgrade to v33](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-33/)
-  ** [Upgrade to v34](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-34/)
+* Autofocus the user input when the impersonation bar is shown.
 
-*  The constructor for `TabModel` has changed to take its owning container as a second argument.
-   (Most applications do not create `TabModels` directly, but it is possible.)
-*  The `Exception` class and `HoistException` type have been moved from `@xh\hoist\core` to a new
-    lower level package `@xh\hoist\exception`.  This new structure is not expected to effect most
-    applications, and was put in place to reduce the risk of circular dependencies between internal
-    hoist packages.
+### 📚 Libraries
 
-### 🎁 New Features
+* @auth0/auth0-spa-js `2.4 → 2.7`
+* @azure/msal-browser `4.23 → 4.25`
+* dompurify `3.2 → 3.3`
+* mobx `6.13 → 6.15`
 
-* Added new `extraConfirmText`, `extraConfirmLabel` properties to `MessageOptions`. Use this option
+## 76.0.0 - 2025-09-26
+
+### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - AG Grid update, Hoist React upgrade)
+
+* Hoist v76 **upgrades AG Grid to v34** (from v31), covering three major AG Grid releases with their
+  own potentially breaking changes.
+    * Fortunately, internal Hoist updates to our managed API wrappers mean that most apps will see
+      very minimal changes, although there are required adjustments to app-level `package.json` to
+      install updated grid dependencies and `Bootstrap.ts` to import and register your licensed grid
+      modules at their new import paths.
+    * Applications implementing `groupRowRenderer` should note that the `value` property passed
+      to this function is no longer stringified, but is instead the raw field value for the group.
+    * See AG's upgrade guides for more details:
+        * [Upgrade to v32](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-32/)
+        * [Upgrade to v33](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-33/)
+        * [Upgrade to v34](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-34/)
+* Modified the `TabModel` constructor to take its owning container as a second argument.
+    * Apps very rarely create `TabModels` directly, so this unlikely to require changes.
+* Moved the `Exception` class and `HoistException` type from `@xh\hoist\core` to a new lower-level
+  package `@xh\hoist\exception` to reduce the risk of circule dependencies within Hoist.
+    * Apps rarely interact with these directly, so also unlikely to require changes.
+
+### 🎁 New Features
+
+* Added `extraConfirmText` + `extraConfirmLabel` configs to `MessageOptions`. Use these new options
   to require the specified text to be re-typed by a user when confirming a potentially destructive
-  or disruptive action.
-* Updated grid column filters to apply on `Enter` / dismiss on `Esc` and tweaked the filter popup
+  or disruptive action. Note their usage within Hoist's Admin Console when deleting a role.
+* Updated grid column filters to apply on `Enter` / dismiss on `Esc`. Tweaked the filter popup
   toolbar for clarity.
-* Added new ability to specify nested tab containers in a single declarative config.  Apps may now
+* Added new ability to specify nested tab containers in a single declarative config. Apps may now
   provide a spec for a nested tab container directly to the `TabConfig.content` property.
-* Improvements to View Management:
-  ** Allow users to create 'Global' views directly in 'Save/Save As' Dialog.
-  ** Simplify presentation/edit of view visibility to new "Visibility" control
-  ** Support for the 'isDefaultPinned' attribute on global views has been removed.  All global
-  views will be pinned by default.  This feature was deemed too confusing, and not useful in
-  practice.  App maintainers should ensure that all global views are appropriate and well
-  organized enough to be shown immediately to new users in the view menu.
-* New constraint rule: `validEmails` - to validate one or more email addresses in an input field.
-* `DashCanvas` accepts a new prop `rglOptions` to pass additional options to the underlying
-  `react-grid-layout`.
-* Experimental grid feature  `enableFullWidthScroll` has been promoted to a first-class property
-    on `GridModel`.   Set to true to ensure that the grid will have a single horizontal scrollbar
-    spanning the width of all columns, including any pinned columns.
-* New `@sharePendingPromise` decorator for returning a shared Promise across concurrent async calls.
-
+* Improved `ViewManager` features:
+    * Enabled globally sharing a new view directly from the 'Save/Save As' dialog.
+    * Simplified presentation and management of view visibility via new "Visibility" control.
+    * Removed support for the `isDefaultPinned` attribute on global views. All global views will be
+      pinned (i.e. show up in user menus) by default. Users can still explicitly "unpin" any global
+      views to remove them from their menus.
+* Added a `validEmails` constraint rule to validate one or more email addresses in an input field.
+* Added `DashCanvas.rglOptions` prop - passed through to the underlying `react-grid-layout`.
+* Promoted experimental grid feature `enableFullWidthScroll` to a first-class `GridModel` config.
+  Set to true to ensure that the grid will have a single horizontal scrollbar spanning the width of
+  all columns, including any pinned columns.
 
 ### 🐞 Bug Fixes
 
@@ -64,6 +77,9 @@
 
 ### ⚙️ Technical
 
+* Added a new `@sharePendingPromise` decorator for returning a shared Promise across concurrent
+  async calls. Calls made to a decorated method while a prior call with the same args is still
+  pending won't kick off a new call, but will instead receive the same Promise as the first call.
 * Added `XH.logLevel` to define a minimum logging severity threshold for Hoist's client-side logging
   utilities. Defaulted to 'info' to prevent possible memory and performance impacts of verbose
   logging on 'debug'. Change at runtime via new `XH.setLogLevel()` when troubleshooting. See

package/appcontainer/ImpersonationBarModel.ts

@@ -4,9 +4,11 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {HoistInputModel} from '@xh/hoist/cmp/input';
 import {HoistModel, XH} from '@xh/hoist/core';
-import {action, observable, makeObservable, bindable} from '@xh/hoist/mobx';
+import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
+import {createRef} from 'react';
 
 /**
  *  @internal
@@ -18,6 +20,9 @@ export class ImpersonationBarModel extends HoistModel {
     @observable.ref targets: string[] = [];
     @bindable pendingTarget: string = null;
 
+    // For managed focus of desktop select.
+    inputRef = createRef<HoistInputModel>();
+
     constructor() {
         super();
         makeObservable(this);
@@ -58,7 +63,7 @@ export class ImpersonationBarModel extends HoistModel {
     @action
     toggleVisibility() {
         if (this.isOpen) {
-            this.hide();
+            XH.identityService.isImpersonating ? this.inputRef.current?.focus() : this.hide();
         } else {
             this.show();
         }
@@ -73,7 +78,7 @@ export class ImpersonationBarModel extends HoistModel {
         try {
             await XH.identityService.impersonateAsync(pendingTarget);
         } catch (e) {
-            this.pendingTarget = '';
+            this.pendingTarget = null;
             XH.handleException(e, {logOnServer: false}); // likely to be an unknown user
         }
     };

package/build/types/appcontainer/ImpersonationBarModel.d.ts

@@ -1,3 +1,4 @@
+import { HoistInputModel } from '@xh/hoist/cmp/input';
 import { HoistModel } from '@xh/hoist/core';
 /**
  *  @internal
@@ -7,6 +8,7 @@ export declare class ImpersonationBarModel extends HoistModel {
     showRequested: boolean;
     targets: string[];
     pendingTarget: string;
+    inputRef: import("react").RefObject<HoistInputModel>;
     constructor();
     init(): void;
     get isOpen(): boolean;

package/build/types/cmp/chart/ChartModel.d.ts

@@ -26,6 +26,8 @@ export declare class ChartModel extends HoistModel {
      * be done via {@link setHighchartsConfig} or {@link setSeries}.
      */
     highchart: any;
+    /** True if this chart has no series to display */
+    get empty(): boolean;
     constructor(config?: ChartConfig);
     /**
      *  Update the Highcharts instance configuration.

package/build/types/core/model/HoistModel.d.ts

@@ -9,7 +9,7 @@ import { Class } from 'type-fest';
  *
  * The most common use of `HoistModel` is to support Hoist components. Components can be configured
  * to create or lookup an instance of an appropriate model subclass using the `model` config passed
- * to {@link hoistComponent.factory}. Hoist will automatically pass the resolved model instance as a
+ * to {@link hoistCmp.factory}. Hoist will automatically pass the resolved model instance as a
  * prop to the component's `render()` function, where the model's properties can be read/rendered
  * and any imperative APIs wired to buttons, callbacks, and other handlers.
  *

package/build/types/data/cube/Query.d.ts

@@ -97,6 +97,7 @@ export declare class Query {
     readonly fields: CubeField[];
     readonly dimensions: CubeField[];
     readonly filter: Filter;
+    readonly hasFilter: boolean;
     readonly includeRoot: boolean;
     readonly includeLeaves: boolean;
     readonly provideLeaves: boolean;

package/build/types/desktop/cmp/dash/DashViewModel.d.ts

@@ -1,6 +1,6 @@
+import { ReactElement } from 'react';
 import { HoistModel, MenuItemLike, PlainObject, RefreshMode, RenderMode } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
-import { ReactElement } from 'react';
 import { DashViewSpec } from './DashViewSpec';
 export type DashViewState = PlainObject;
 /**
@@ -23,8 +23,15 @@ export declare class DashViewModel<T extends DashViewSpec = DashViewSpec> extend
      * constructing these models - no need to specify manually.
      */
     containerModel: any;
-    /** Title with which to initialize the view. */
+    /** Title with which to initialize the view.  Value is persisted. */
     title: string;
+    /**
+     * Additional info that will be displayed after the title.
+     * Applications can bind to this property to provide dynamic title details.
+     * Value is not persisted.
+     **/
+    titleDetails: string;
+    get fullTitle(): string;
     /** Icon with which to initialize the view. */
     icon: ReactElement;
     /** State with which to initialize the view. */

package/build/types/desktop/cmp/dash/container/DashContainerModel.d.ts

@@ -150,6 +150,7 @@ export declare class DashContainerModel extends DashModel<DashContainerViewSpec,
     private showTitleForm;
     private hideTitleForm;
     private createGoldenLayout;
+    private getTitleElement;
     private destroyGoldenLayout;
     destroy(): void;
 }

package/build/types/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilterModel.d.ts

@@ -1,10 +1,10 @@
+import { Column, GridFilterFieldSpec, GridFilterModel, GridModel } from '@xh/hoist/cmp/grid';
 import { TabContainerModel } from '@xh/hoist/cmp/tab';
 import { HoistModel } from '@xh/hoist/core';
 import { CompoundFilter, FieldFilter, FieldType, Filter, FilterLike, Store } from '@xh/hoist/data';
-import { GridFilterFieldSpec, GridFilterModel } from '@xh/hoist/cmp/grid';
+import { ColumnHeaderFilterModel } from '../ColumnHeaderFilterModel';
 import { CustomTabModel } from './custom/CustomTabModel';
 import { ValuesTabModel } from './values/ValuesTabModel';
-import { ColumnHeaderFilterModel } from '../ColumnHeaderFilterModel';
 export declare class HeaderFilterModel extends HoistModel {
     xhImpl: boolean;
     fieldSpec: GridFilterFieldSpec;
@@ -14,7 +14,9 @@ export declare class HeaderFilterModel extends HoistModel {
     customTabModel: CustomTabModel;
     get filterModel(): GridFilterModel;
     get field(): string;
+    get gridModel(): GridModel;
     get store(): Store;
+    get column(): Column;
     get fieldType(): FieldType;
     get currentGridFilter(): Filter;
     get columnFilters(): FieldFilter[];

package/build/types/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTabModel.d.ts

@@ -5,12 +5,16 @@ import { HeaderFilterModel } from '../HeaderFilterModel';
 export declare class ValuesTabModel extends HoistModel {
     xhImpl: boolean;
     headerFilterModel: HeaderFilterModel;
-    /** Checkbox grid to display enumerated set of values */
+    /** Checkbox grid to display enumerated set of values. */
     gridModel: GridModel;
-    /** List of currently checked values in the list*/
+    /** List of currently checked values. */
     pendingValues: any[];
-    /** Bound search term for `StoreFilterField` */
+    /** Bound search term for `StoreFilterField`. */
     filterText: string;
+    /**
+     * Merge current filter with pendingValues on commit.
+     * Used when commitOnChange is false.
+     */
     combineCurrentFilters: boolean;
     /** FieldFilter output by this model. */
     get filter(): FieldFilterSpec;
@@ -22,15 +26,18 @@ export declare class ValuesTabModel extends HoistModel {
     get values(): any[];
     get valueCount(): number;
     get hasHiddenValues(): boolean;
+    get sortIcon(): any;
     constructor(headerFilterModel: HeaderFilterModel);
     syncWithFilter(): void;
     reset(): void;
     setRecsChecked(isChecked: boolean, values: any[]): void;
+    toggleSort(): void;
     toggleAllRecsChecked(): void;
     private onFilterTextChange;
     private onCombineCurrentFiltersToggle;
     private getFilter;
     private doSyncWithFilter;
     private syncGrid;
+    private initGridSortBy;
     private createGridModel;
 }

package/cmp/chart/ChartModel.ts

@@ -8,8 +8,8 @@ import {type MouseEvent} from 'react';
 import type {ChartContextMenuSpec, ChartMenuToken} from '@xh/hoist/cmp/chart/Types';
 import {getContextMenuItems} from '@xh/hoist/cmp/chart/impl/ChartContextMenuItems';
 import {HoistModel, PlainObject, Some, XH} from '@xh/hoist/core';
-import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {castArray, cloneDeep, isFunction, isNil} from 'lodash';
+import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
+import {castArray, cloneDeep, isEmpty, isFunction, isNil} from 'lodash';
 import {mergeDeep} from '@xh/hoist/utils/js';
 
 interface ChartConfig {
@@ -59,6 +59,12 @@ export class ChartModel extends HoistModel {
     @observable.ref
     highchart: any;
 
+    /** True if this chart has no series to display */
+    @computed
+    get empty(): boolean {
+        return isEmpty(this.series);
+    }
+
     constructor(config?: ChartConfig) {
         super();
         makeObservable(this);

package/cmp/dataview/DataView.ts

@@ -82,7 +82,7 @@ class DataViewLocalModel extends HoistModel {
         const {model} = this;
         return {
             headerHeight: 0,
-            suppressMakeColumnVisibleAfterUnGroup: true,
+            suppressGroupChangesColumnVisibility: 'suppressShowOnUngroup',
             getRowHeight: agParams => {
                 const {groupRowHeight, itemHeight} = model;
 

package/core/model/HoistModel.ts

@@ -20,7 +20,7 @@ import {Class} from 'type-fest';
  *
  * The most common use of `HoistModel` is to support Hoist components. Components can be configured
  * to create or lookup an instance of an appropriate model subclass using the `model` config passed
- * to {@link hoistComponent.factory}. Hoist will automatically pass the resolved model instance as a
+ * to {@link hoistCmp.factory}. Hoist will automatically pass the resolved model instance as a
  * prop to the component's `render()` function, where the model's properties can be read/rendered
  * and any imperative APIs wired to buttons, callbacks, and other handlers.
  *

package/data/cube/Query.ts

@@ -127,6 +127,7 @@ export class Query {
     readonly fields: CubeField[];
     readonly dimensions: CubeField[];
     readonly filter: Filter;
+    readonly hasFilter: boolean;
     readonly includeRoot: boolean;
     readonly includeLeaves: boolean;
     readonly provideLeaves: boolean;
@@ -164,6 +165,7 @@ export class Query {
         this.omitFn = omitFn;
 
         this._testFn = this.filter?.getTestFn(this.cube.store) ?? null;
+        this.hasFilter = this._testFn != null;
     }
 
     clone(overrides: Partial<QueryConfig>) {

package/data/cube/View.ts

@@ -309,12 +309,12 @@ export class View extends HoistBase {
         appliedDimensions: PlainObject,
         leafMap: Map<StoreRecordId, LeafRow>
     ): BaseRow[] {
-        if (isEmpty(records)) return [];
+        if (!records?.length) return [];
 
         const rootId = parentId + Cube.RECORD_ID_DELIMITER;
 
-        if (isEmpty(dimensions)) {
-            return map(records, r => {
+        if (!dimensions?.length) {
+            return records.map(r => {
                 const id = rootId + r.id,
                     leaf = this.cachedRow(id, null, () => new LeafRow(this, id, r));
                 leafMap.set(r.id, leaf);
@@ -355,16 +355,17 @@ export class View extends HoistBase {
         parentId: string,
         appliedDimensions: PlainObject
     ): BaseRow[] {
-        if (!this.query.bucketSpecFn) return rows;
+        const {query} = this;
 
-        const bucketSpec = this.query.bucketSpecFn(rows);
-        if (!bucketSpec) return rows;
+        if (!query.bucketSpecFn) return rows;
+        if (!query.includeLeaves && rows[0]?.isLeaf) return rows;
 
-        if (!this.query.includeLeaves && rows[0]?.isLeaf) return rows;
+        const bucketSpec = query.bucketSpecFn(rows);
+        if (!bucketSpec) return rows;
 
         const {name: bucketName, bucketFn} = bucketSpec,
-            buckets = {},
-            ret = [];
+            buckets: Record<string, BaseRow[]> = {},
+            ret: BaseRow[] = [];
 
         // Determine which bucket to put this row into (if any)
         rows.forEach(row => {
@@ -372,8 +373,8 @@ export class View extends HoistBase {
             if (isNil(bucketVal)) {
                 ret.push(row);
             } else {
-                if (!buckets[bucketVal]) buckets[bucketVal] = [];
-                buckets[bucketVal].push(row);
+                const bucketRows = buckets[bucketVal] ??= [];
+                bucketRows.push(row);
             }
         });
 
@@ -454,8 +455,13 @@ export class View extends HoistBase {
 
     private filterRecords() {
         const {query, cube} = this,
+            {hasFilter} = query,
             ret = new Map();
-        cube.store.records.filter(r => query.test(r)).forEach(r => ret.set(r.id, r));
+
+        cube.store.records.forEach(r => {
+            if (!hasFilter || query.test(r)) ret.set(r.id, r);
+        });
+
         this._recordMap = ret;
     }
 

package/desktop/appcontainer/AppContainer.ts

@@ -4,32 +4,34 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {HotkeyConfig} from '@blueprintjs/core/src/hooks/hotkeys/hotkeyConfig';
 import {AppContainerModel} from '@xh/hoist/appcontainer/AppContainerModel';
+import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 import {fragment, frame, vframe, viewport} from '@xh/hoist/cmp/layout';
+import {mask} from '@xh/hoist/cmp/mask';
 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 './suspend/SuspendPanel';
 import {dockContainerImpl} from '@xh/hoist/desktop/cmp/dock/impl/DockContainer';
+import {errorMessageImpl} from '@xh/hoist/desktop/cmp/error/impl/ErrorMessage';
 import {colChooserDialog as colChooser} from '@xh/hoist/desktop/cmp/grid/impl/colchooser/ColChooserDialog';
 import {ColChooserModel} from '@xh/hoist/desktop/cmp/grid/impl/colchooser/ColChooserModel';
-import {zoneMapperDialog as zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/impl/ZoneMapperDialog';
 import {columnHeaderFilter} from '@xh/hoist/desktop/cmp/grid/impl/filter/ColumnHeaderFilter';
 import {ColumnHeaderFilterModel} from '@xh/hoist/desktop/cmp/grid/impl/filter/ColumnHeaderFilterModel';
 import {gridFilterDialog} from '@xh/hoist/desktop/cmp/grid/impl/filter/GridFilterDialog';
-import {mask} from '@xh/hoist/cmp/mask';
+import {maskImpl} from '@xh/hoist/desktop/cmp/mask/impl/Mask';
 import {ModalSupportModel} from '@xh/hoist/desktop/cmp/modalsupport';
 import {pinPadImpl} from '@xh/hoist/desktop/cmp/pinpad/impl/PinPad';
 import {storeFilterFieldImpl} from '@xh/hoist/desktop/cmp/store/impl/StoreFilterField';
 import {tabContainerImpl} from '@xh/hoist/desktop/cmp/tab/impl/TabContainer';
+import {zoneMapperDialog as zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/impl/ZoneMapperDialog';
 import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
 import {installDesktopImpls} from '@xh/hoist/dynamics/desktop';
 import {inspectorPanel} from '@xh/hoist/inspector/InspectorPanel';
 import {blueprintProvider} from '@xh/hoist/kit/blueprint';
-import {errorMessageImpl} from '@xh/hoist/desktop/cmp/error/impl/ErrorMessage';
-import {maskImpl} from '@xh/hoist/desktop/cmp/mask/impl/Mask';
+import {consumeEvent} from '@xh/hoist/utils/js';
 import {elementFromContent, useOnMount} from '@xh/hoist/utils/react';
 import {isEmpty} from 'lodash';
+import {ReactElement} from 'react';
 import {aboutDialog} from './AboutDialog';
 import {banner} from './Banner';
 import {exceptionDialog} from './ExceptionDialog';
@@ -39,9 +41,9 @@ import {lockoutPanel} from './LockoutPanel';
 import {loginPanel} from './LoginPanel';
 import {messageSource} from './MessageSource';
 import {optionsDialog} from './OptionsDialog';
+import {suspendPanel} from './suspend/SuspendPanel';
 import {toastSource} from './ToastSource';
 import {versionBar} from './VersionBar';
-import {ReactElement} from 'react';
 
 installDesktopImpls({
     tabContainerImpl,
@@ -183,9 +185,9 @@ const bannerList = hoistCmp.factory<AppContainerModel>({
     }
 });
 
-function globalHotKeys(model) {
+function globalHotKeys(model: AppContainerModel) {
     const {impersonationBarModel, optionsDialogModel} = model,
-        ret = [
+        ret: HotkeyConfig[] = [
             {
                 global: true,
                 combo: 'shift + r',
@@ -199,7 +201,10 @@ function globalHotKeys(model) {
             global: true,
             combo: 'shift + i',
             label: 'Impersonate another user',
-            onKeyDown: () => impersonationBarModel.toggleVisibility()
+            onKeyDown: e => {
+                consumeEvent(e); // avoid typing "i" in the impersonation bar select
+                impersonationBarModel.toggleVisibility();
+            }
         });
     }
     if (optionsDialogModel.hasOptions) {

package/desktop/appcontainer/ImpersonationBar.ts

@@ -31,9 +31,12 @@ export const impersonationBar = hoistCmp.factory({
 
         const {targets} = model;
 
-        let msg = `Logged in as ${authUsername}`;
+        let msg = `Logged in as ${authUsername}`,
+            placeholder = 'Select a user...';
+
         if (isImpersonating) {
             msg += ` › impersonating ${username}`;
+            placeholder = `Impersonating ${username}`;
         }
 
         return toolbar({
@@ -53,10 +56,16 @@ export const impersonationBar = hoistCmp.factory({
                     bind: 'pendingTarget',
                     options: targets,
                     enableCreate: true,
-                    placeholder: 'Select User...',
-                    width: 250,
-                    menuWidth: 300,
-                    onCommit: model.onCommit
+                    // Autofocus when shown to begin impersonation
+                    autoFocus: !isImpersonating,
+                    placeholder,
+                    createMessageFn: q => `Impersonate new user "${q}"`,
+                    minWidth: 150,
+                    maxWidth: 350,
+                    menuWidth: 350,
+                    flex: 1,
+                    onCommit: model.onCommit,
+                    ref: model.inputRef
                 }),
                 button({
                     text: isImpersonating ? 'Exit Impersonation' : 'Cancel',
@@ -71,6 +80,7 @@ export const impersonationBar = hoistCmp.factory({
 const showUseResponsiblyAlert = () => {
     XH.alert({
         title: 'Important Reminders',
+        icon: Icon.warning(),
         message: fragment(
             h3('With great power comes great responsibility.'),
             ul(
@@ -94,7 +104,8 @@ const showUseResponsiblyAlert = () => {
             )
         ),
         confirmProps: {
-            text: 'I understand and will be careful'
+            text: 'I understand and will be careful',
+            autoFocus: false
         }
     });
 };

package/desktop/appcontainer/VersionBar.ts

@@ -18,13 +18,16 @@ export const versionBar = hoistCmp.factory({
         const inspectorSvc = XH.inspectorService,
             envSvc = XH.environmentService,
             env = envSvc.get('appEnvironment'),
+            build = envSvc.get('clientBuild'),
             version = envSvc.get('clientVersion'),
-            isAdminApp = window.location.pathname?.startsWith('/admin/');
+            isAdminApp = window.location.pathname?.startsWith('/admin/'),
+            versionAndBuild =
+                !build || build === 'UNKNOWN' ? version : `${version} (build ${build})`;
 
         return box({
             className: `xh-version-bar xh-version-bar--${env.toLowerCase()}`,
             items: [
-                [XH.appName, env, version].join(' • '),
+                [XH.appName, env, versionAndBuild].join(' • '),
                 span({
                     className: 'xh-version-bar__spacer',
                     items: '|'

package/desktop/cmp/dash/DashViewModel.ts

@@ -4,6 +4,8 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {isNil} from 'lodash';
+import {ReactElement} from 'react';
 import {
     HoistModel,
     managed,
@@ -16,7 +18,6 @@ import {
 import '@xh/hoist/desktop/register';
 import {makeObservable, bindable} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
-import {ReactElement} from 'react';
 import {DashViewSpec} from './DashViewSpec';
 
 export type DashViewState = PlainObject;
@@ -44,9 +45,20 @@ export class DashViewModel<T extends DashViewSpec = DashViewSpec> extends HoistM
      */
     containerModel: any;
 
-    /** Title with which to initialize the view. */
+    /** Title with which to initialize the view.  Value is persisted. */
     @bindable title: string;
 
+    /**
+     * Additional info that will be displayed after the title.
+     * Applications can bind to this property to provide dynamic title details.
+     * Value is not persisted.
+     **/
+    @bindable titleDetails: string;
+
+    get fullTitle(): string {
+        return [this.title, this.titleDetails].filter(it => !isNil(it)).join(' ');
+    }
+
     /** Icon with which to initialize the view. */
     @bindable.ref icon: ReactElement;
 

package/desktop/cmp/dash/canvas/impl/DashCanvasView.ts

@@ -34,13 +34,13 @@ export const dashCanvasView = hoistCmp.factory({
     model: uses(DashCanvasViewModel, {publishMode: 'limited'}),
 
     render({model, className}) {
-        const {viewSpec, ref, hidePanelHeader, headerItems, autoHeight} = model,
+        const {viewSpec, ref, hidePanelHeader, headerItems, autoHeight, fullTitle, icon} = model,
             headerProps = hidePanelHeader
                 ? {}
                 : {
                       compactHeader: true,
-                      title: model.title,
-                      icon: model.icon,
+                      title: fullTitle,
+                      icon,
                       headerItems: [...headerItems, headerMenu({model})]
                   };
         return panel({