@xh/hoist 86.0.1 → 86.1.0

package/cmp/grid/impl/GridHScrollbar.ts

@@ -79,6 +79,10 @@ class GridHScrollbarModel extends HoistModel {
         return this.viewRef.current.querySelector('.ag-center-cols-viewport');
     }
 
+    private get agHeaderViewport(): HTMLDivElement {
+        return this.viewRef.current.querySelector('.ag-header-viewport');
+    }
+
     private get agVerticalScrollContainer(): HTMLDivElement {
         return this.viewRef.current.querySelector('.ag-body-vertical-scroll-container');
     }
@@ -102,6 +106,7 @@ class GridHScrollbarModel extends HoistModel {
 
     scrollViewport(left: number) {
         this.agViewport.scrollLeft = left;
+        this.agHeaderViewport.scrollLeft = left;
     }
 
     override afterLinked() {
@@ -110,9 +115,11 @@ class GridHScrollbarModel extends HoistModel {
             run: () => {
                 const {agViewport, viewRef} = this;
                 this.viewWidth = viewRef.current.clientWidth;
-                agViewport.addEventListener('scroll', e =>
-                    this.scrollScroller((e.target as HTMLDivElement).scrollLeft)
-                );
+                agViewport.addEventListener('scroll', e => {
+                    const left = (e.target as HTMLDivElement).scrollLeft;
+                    this.scrollScroller(left);
+                    this.agHeaderViewport.scrollLeft = left;
+                });
                 this.agViewportResizeObserver = observeResize(
                     () => this.onAgViewportResized(),
                     agViewport,

package/cmp/input/SegmentedControlOption.ts

@@ -0,0 +1,61 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+import {Intent} from '@xh/hoist/core';
+import {LocalDate} from '@xh/hoist/utils/datetime';
+import {ReactElement} from 'react';
+
+/** Primitive value types supported as a SegmentedControl option value/label. */
+export type OptionPrimitive = string | number | boolean | LocalDate;
+
+/**
+ * Option for a SegmentedControl, shared by the desktop and mobile implementations.
+ */
+export interface SegmentedControlOption {
+    /** Value for this option. */
+    value: OptionPrimitive;
+
+    /** Display label. Defaults to `value.toString()` if omitted. */
+    label?: string;
+
+    /** Icon element, displayed before the label. */
+    icon?: ReactElement;
+
+    /** True to disable this individual option. */
+    disabled?: boolean;
+
+    /**
+     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
+     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
+     * `intent` default. Defaults to the control's `intent`.
+     */
+    intent?: Intent;
+}
+
+/**
+ * Variant of SegmentedControlOption for representing a null/"no value" selection.
+ * Label is required to force use case to override default js 'null' toString rendering.
+ */
+export interface SegmentedControlNullOption {
+    /** Null value for this option. */
+    value: null;
+
+    /** Display label - required for null options. */
+    label: string;
+
+    /** Icon element, displayed before the label. */
+    icon?: ReactElement;
+
+    /** True to disable this individual option. */
+    disabled?: boolean;
+
+    /**
+     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
+     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
+     * `intent` default. Defaults to the control's `intent`.
+     */
+    intent?: Intent;
+}

package/cmp/input/index.ts

@@ -1,2 +1,3 @@
 export * from './HoistInputModel';
 export * from './HoistInputProps';
+export * from './SegmentedControlOption';

package/core/AppSpec.ts

@@ -7,7 +7,7 @@
 import {ElementFactory, HoistAppModel, HoistAuthModel, HoistProps, XH} from '@xh/hoist/core';
 import {throwIf} from '@xh/hoist/utils/js';
 import {isFunction, isNil, isString} from 'lodash';
-import {Component, ComponentClass, FunctionComponent} from 'react';
+import {Component, ComponentClass, FunctionComponent, ReactElement} from 'react';
 
 /**
  * Spec for a client-side Hoist application. A config matching this class's shape is provided
@@ -118,6 +118,12 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
     /** Optional message to show users when denied access to app. */
     lockoutMessage?: string;
 
+    /**
+     * Icon to display on the form-based login page, if active via `enableLoginForm: true`.
+     * Defaults to `Icon.shieldHalved()`.
+     */
+    loginPanelIcon?: ReactElement;
+
     /** Optional message to show on login form, if `showLoginForm: true`. */
     loginMessage?: string;
 
@@ -156,6 +162,7 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
         lockoutMessage = null,
         lockoutPanel = null,
         loginMessage = null,
+        loginPanelIcon = null,
         modelClass,
         showBrowserContextMenu = false,
         trackAppLoad = true
@@ -191,6 +198,7 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
         this.lockoutMessage = lockoutMessage;
         this.lockoutPanel = lockoutPanel;
         this.loginMessage = loginMessage;
+        this.loginPanelIcon = loginPanelIcon;
         this.modelClass = modelClass;
         this.showBrowserContextMenu = showBrowserContextMenu;
         this.trackAppLoad = trackAppLoad;

package/core/HoistAuthModel.ts

@@ -66,8 +66,12 @@ export class HoistAuthModel extends HoistModel {
      * Process a manual login, submitted by user via form.
      * @returns identity of the user authenticated with the server; null if not yet authenticated.
      */
-    async loginWithCredentialsAsync(username: string, password: string): Promise<IdentityInfo> {
-        return this.runner()
+    async loginWithCredentialsAsync(
+        username: string,
+        password: string,
+        ctx?: CallContextLike
+    ): Promise<IdentityInfo> {
+        return this.runner(ctx)
             .span('login')
             .run(async ctx => {
                 const {success, identity} = await XH.fetchJson(
@@ -87,8 +91,8 @@ export class HoistAuthModel extends HoistModel {
      * The default implementation will call the 'logout' endpoint on the Grails server, clearing
      * any server-side session state there. Override to manage any client-side or third-party state.
      */
-    async logoutAsync(): Promise<void> {
-        await this.runner().span('logout').fetchJson({url: 'xh/logout'});
+    async logoutAsync(ctx?: CallContextLike): Promise<void> {
+        await this.runner(ctx).span('logout').fetchJson({url: 'xh/logout'});
     }
 
     /**
@@ -96,9 +100,12 @@ export class HoistAuthModel extends HoistModel {
      * whitelisted by Hoist to allow access prior to user authentication. For use in bootstrapping
      * client-side auth solutions that require configs such as OAuth endpoint URLs and client IDs.
      * See `BaseAuthenticationService.getClientConfig()` in hoist-core.
+     *
+     * @param ctx - tracing/load context. When called from within a `completeAuthAsync` override,
+     *      forward the supplied context so this fetch nests under the bootstrap trace.
      */
-    async loadConfigAsync(): Promise<PlainObject> {
-        return this.runner().span('config').fetchJson({url: 'xh/authConfig'});
+    async loadConfigAsync(ctx?: CallContextLike): Promise<PlainObject> {
+        return this.runner(ctx).span('config').fetchJson({url: 'xh/authConfig'});
     }
 
     /**

package/data/Field.ts

@@ -166,7 +166,9 @@ export function parseFieldValue(
         case 'date':
             return isLocalDate(val) ? val.date : isDate(val) ? val : new Date(val);
         case 'localDate':
-            return isLocalDate(val) ? val : LocalDate.get(val);
+            if (isLocalDate(val)) return val;
+            // `get` parses strict 'YYYYMMDD'/'YYYY-MM-DD' strings; `from` coerces Date/number/moment.
+            return isString(val) ? LocalDate.get(val) : LocalDate.from(val);
     }
 
     throw XH.exception(`Unknown field type '${type}'`);

package/data/filter/BaseFilterFieldSpec.ts

@@ -21,7 +21,12 @@ import {FieldFilterOperator} from './Types';
 export interface BaseFilterFieldSpecConfig {
     /** Identifying field name to filter on. */
     field: string;
-    /** Type of field, will default from related field on source if provided, or 'auto'. */
+    /**
+     * Type of field, will default from related field on source if provided, or 'auto'. A `date`
+     * (timestamp) source defaults to 'localDate' so filtering compares by calendar day (range and
+     * equality operators use full-day bounds). Set explicitly to 'date' to filter by exact
+     * timestamp instead.
+     */
     fieldType?: FieldType;
     /** DisplayName, will default from related field on source if provided */
     displayName?: string;
@@ -77,7 +82,11 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
         this.source = source;
 
         const sourceField = this.sourceField;
-        this.fieldType = fieldType ?? sourceField?.type ?? 'auto';
+        // Default a `date` (timestamp) source to `localDate` so filtering compares by calendar day
+        // rather than against midnight (#3338). Apps wanting exact-timestamp filtering can set
+        // `fieldType: 'date'` explicitly.
+        this.fieldType =
+            fieldType ?? (sourceField?.type === 'date' ? 'localDate' : sourceField?.type) ?? 'auto';
         this.displayName = displayName ?? sourceField?.displayName ?? genDisplayName(field);
         this.ops = this.parseOperators(ops);
         this.forceSelection = forceSelection ?? false;
@@ -183,7 +192,12 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
             : ['>', '>=', '<', '<=', '=', '!='];
     }
 
+    private get isLocalDateFilteringTimestamp(): boolean {
+        return this.fieldType === 'localDate' && this.sourceField?.type === 'date';
+    }
+
     private get isEnumerableByDefault(): boolean {
+        if (this.isLocalDateFilteringTimestamp) return false;
         switch (this.fieldType) {
             case 'int':
             case 'number':

package/data/filter/FieldFilter.ts

@@ -14,6 +14,7 @@ import {
     escapeRegExp,
     first,
     isArray,
+    isEmpty,
     isEqual,
     isNil,
     isString,
@@ -112,9 +113,9 @@ export class FieldFilter extends Filter {
     // Overrides
     //-----------------
     override getTestFn(store?: Store): FilterTestFn {
-        let {field, op, value} = this,
-            regExps;
+        const {field, op, value} = this;
 
+        let storeFieldType: FieldType;
         if (store) {
             const storeField = store.getField(field);
             if (!storeField) {
@@ -127,29 +128,72 @@ export class FieldFilter extends Filter {
                 }
                 return () => true;
             }
+            storeFieldType = storeField.type;
+        }
+
+        const opFn = this.getOpFn(op, value, storeFieldType);
+
+        if (!store) return r => opFn(r[field]);
+
+        return (r: StoreRecord) => {
+            const val = r.get(field);
+            if (opFn(val)) return true;
+
+            // Maximize chances of matching. Always pass adds ...
+            if (r.isAdd) return true;
 
-            const fieldType = storeField.type === 'tags' ? 'string' : storeField.type;
+            // ... and check any differing original value as well
+            const committedVal = r.committedData[field];
+            return committedVal !== val && opFn(committedVal);
+        };
+    }
+
+    private getOpFn(
+        op: FieldFilterOperator,
+        value: any,
+        storeFieldType?: FieldType
+    ): (v: any) => boolean {
+        const RANGE_OPS = FieldFilter.RANGE_LIKE_OPERATORS,
+            ARR_OPS = FieldFilter.ARRAY_OPERATORS;
+
+        // Day-aware filtering for LocalDate value(s) over a timestamp field - compares against
+        // full calendar-day bounds for range and equality operators (#3338).
+        const firstVal = isArray(value) ? value[0] : value;
+        if (
+            storeFieldType === 'date' &&
+            LocalDate.isLocalDate(firstVal) &&
+            (RANGE_OPS.includes(op) || op === '=' || op === '!=')
+        ) {
+            return this.getDayBoundedOpFn(op, value);
+        }
+
+        // Coerce candidate value(s) to the store field's type when filtering against a store.
+        if (storeFieldType) {
+            const fieldType = storeFieldType === 'tags' ? 'string' : storeFieldType;
             value = isArray(value)
                 ? value.map(v => parseFieldValue(v, fieldType))
                 : parseFieldValue(value, fieldType);
         }
-
-        if (FieldFilter.ARRAY_OPERATORS.includes(op)) {
+        if (ARR_OPS.includes(op)) {
             value = castArray(value);
         }
 
-        let opFn: (v: any) => boolean;
+        // Treat null, empty string, and empty array (blank `tags`) alike as "blank".
+        const isBlank = (v: any) => isNil(v) || v === '' || (isArray(v) && isEmpty(v));
+
+        let regExps, opFn: (v: any) => boolean;
         switch (op) {
             case '=':
                 opFn = v => {
-                    if (isNil(v) || v === '') v = null;
-                    return value.some(it => isEqual(v, it));
+                    if (isBlank(v)) v = null;
+                    // A blank filter (empty `value`) matches only blank record values.
+                    return (v == null && isEmpty(value)) || value.some(it => isEqual(v, it));
                 };
                 break;
             case '!=':
                 opFn = v => {
-                    if (isNil(v) || v === '') v = null;
-                    return !value.some(it => isEqual(v, it));
+                    if (isBlank(v)) v = null;
+                    return (v != null || !isEmpty(value)) && !value.some(it => isEqual(v, it));
                 };
                 break;
             case '>':
@@ -197,20 +241,45 @@ export class FieldFilter extends Filter {
             default:
                 throw XH.exception(`Unknown operator: ${op}`);
         }
+        return opFn;
+    }
 
-        if (!store) return r => opFn(r[field]);
+    // Compare a timestamp against full calendar-day bounds `[dayStart, nextDayStart)` so a
+    // LocalDate value filters by date part. Supports range and equality operators (#3338).
+    private getDayBoundedOpFn(
+        op: FieldFilterOperator,
+        value: LocalDate | LocalDate[]
+    ): (v: any) => boolean {
+        const toMillis = (v: any) => (v instanceof Date ? v.getTime() : v);
 
-        return (r: StoreRecord) => {
-            const val = r.get(field);
-            if (opFn(val)) return true;
-
-            // Maximize chances of matching. Always pass adds ...
-            if (r.isAdd) return true;
+        // Equality ops test the date part against any of the candidate day(s).
+        if (op === '=' || op === '!=') {
+            const ranges = castArray(value).map(d => [
+                    d.date.getTime(),
+                    d.nextDay().date.getTime()
+                ]),
+                inAnyDay = (t: number) => ranges.some(([start, next]) => t >= start && t < next);
+            return op === '='
+                ? v => !isNil(v) && inAnyDay(toMillis(v))
+                : v => isNil(v) || !inAnyDay(toMillis(v));
+        }
 
-            // ... and check any differing original value as well
-            const committedVal = r.committedData[field];
-            return committedVal !== val && opFn(committedVal);
-        };
+        // Range ops compare against the bounds of a single day.
+        const day = value as LocalDate,
+            dayStart = day.date.getTime(),
+            nextDayStart = day.nextDay().date.getTime();
+        switch (op) {
+            case '>':
+                return v => !isNil(v) && toMillis(v) >= nextDayStart;
+            case '>=':
+                return v => !isNil(v) && toMillis(v) >= dayStart;
+            case '<':
+                return v => !isNil(v) && toMillis(v) < dayStart;
+            case '<=':
+                return v => !isNil(v) && toMillis(v) < nextDayStart;
+            default:
+                throw XH.exception(`Unsupported calendar-day operator: ${op}`);
+        }
     }
 
     override equals(other: Filter): boolean {

package/desktop/appcontainer/LoginPanel.ts

@@ -24,7 +24,7 @@ export const loginPanel = hoistCmp.factory({
     model: creates(LoginPanelModel),
 
     render({model}) {
-        const {loginMessage} = XH.appSpec,
+        const {loginMessage, loginPanelIcon} = XH.appSpec,
             {loadObserver, warning, isValid, loginInProgress} = model;
 
         const onKeyDown = ev => {
@@ -36,8 +36,8 @@ export const loginPanel = hoistCmp.factory({
             justifyContent: 'center',
             flexDirection: 'column',
             item: panel({
-                title: XH.clientAppName,
-                icon: Icon.login(),
+                title: `Login to ${XH.clientAppName}`,
+                icon: loginPanelIcon ?? Icon.shieldHalved({prefix: 'fas'}),
                 className: 'xh-login',
                 testId: 'xh-login',
                 width: 300,
@@ -47,6 +47,7 @@ export const loginPanel = hoistCmp.factory({
                     form(
                         textInput({
                             bind: 'username',
+                            leftIcon: Icon.user(),
                             placeholder: 'Username',
                             autoComplete: 'username',
                             autoFocus: true,
@@ -57,6 +58,7 @@ export const loginPanel = hoistCmp.factory({
                         }),
                         textInput({
                             bind: 'password',
+                            leftIcon: Icon.lock(),
                             placeholder: 'Password...',
                             autoComplete: 'current-password',
                             type: 'password',

package/desktop/cmp/filechooser/FileChooserModel.ts

@@ -96,7 +96,7 @@ export class FileChooserModel extends HoistModel {
     private readonly rejectToastMessage: (rejectedFiles: FileRejection[]) => ReactNode;
     private readonly rejectToastSpec: Partial<ToastSpec>;
 
-    constructor(config: FileChooserConfig) {
+    constructor(config: FileChooserConfig = {}) {
         super();
         makeObservable(this);
 

package/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilterModel.ts

@@ -98,10 +98,15 @@ export class HeaderFilterModel extends HoistModel {
 
     @computed
     get isCustomFilter() {
-        const {columnCompoundFilter, columnFilters} = this;
+        const {columnCompoundFilter, columnFilters, fieldType} = this;
         if (columnCompoundFilter) return true;
         if (isEmpty(columnFilters)) return false;
-        return columnFilters.some(it => !['=', '!=', 'includes'].includes(it.op));
+        return columnFilters.some(it => {
+            const isValuesTabOp = ['=', '!=', 'includes'].includes(it.op),
+                isTagsBlank =
+                    fieldType === 'tags' && ['=', '!='].includes(it.op) && it.value == null;
+            return !isValuesTabOp || isTagsBlank;
+        });
     }
 
     get commitOnChange() {
@@ -170,8 +175,8 @@ export class HeaderFilterModel extends HoistModel {
         if (close) {
             this.parent.close();
         } else {
-            // We must wait before resetting as GridFilterModel.setFilter() is async
-            wait().then(() => this.resetTabModels());
+            // Wait as setFilter is async.
+            wait().then(() => this.syncWithFilter());
         }
     }
 

package/desktop/cmp/grid/impl/filter/headerfilter/custom/CustomRowModel.ts

@@ -8,7 +8,7 @@ import {HoistModel} from '@xh/hoist/core';
 import {FieldFilterOperator, FieldFilterSpec} from '@xh/hoist/data';
 import {HeaderFilterModel} from '../HeaderFilterModel';
 import {bindable, computed, makeObservable} from '@xh/hoist/mobx';
-import {isArray, isNil} from 'lodash';
+import {isArray, isEmpty, isNil} from 'lodash';
 import {CustomTabModel} from './CustomTabModel';
 
 type OperatorOptionValue = 'blank' | 'not blank' | FieldFilterOperator;
@@ -39,7 +39,7 @@ export class CustomRowModel extends HoistModel {
         } else if (op === 'not blank') {
             op = '!=';
             value = null;
-        } else if (isNil(value)) {
+        } else if (isNil(value) || (isArray(value) && isEmpty(value))) {
             return null;
         }
 

package/desktop/cmp/input/SegmentedControl.ts

@@ -4,22 +4,25 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
+import {
+    HoistInputModel,
+    HoistInputProps,
+    OptionPrimitive,
+    SegmentedControlNullOption,
+    SegmentedControlOption,
+    useHoistInputModel
+} from '@xh/hoist/cmp/input';
 import {div} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, Intent} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {bpSegmentedControl} from '@xh/hoist/kit/blueprint';
 import {computed, makeObservable} from '@xh/hoist/mobx';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {getLayoutProps, getNonLayoutProps} from '@xh/hoist/utils/react';
 import {TEST_ID} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
 import {filter, isObject} from 'lodash';
-import {ReactElement} from 'react';
 import './SegmentedControl.scss';
 
-type OptionPrimitive = string | number | boolean | LocalDate;
-
 export interface SegmentedControlProps extends HoistProps, HoistInputProps {
     /** True to render in a compact mode with reduced sizing for space-constrained contexts. */
     compact?: boolean;
@@ -51,52 +54,6 @@ export interface SegmentedControlProps extends HoistProps, HoistInputProps {
     outlined?: boolean;
 }
 
-export interface SegmentedControlOption {
-    /** Value for this option. */
-    value: OptionPrimitive;
-
-    /** Display label. Defaults to `value.toString()` if omitted. */
-    label?: string;
-
-    /** Icon element, displayed before the label. */
-    icon?: ReactElement;
-
-    /** True to disable this individual option. */
-    disabled?: boolean;
-
-    /**
-     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
-     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
-     * `intent` default. Defaults to the control's `intent`.
-     */
-    intent?: Intent;
-}
-
-/**
- * Variant of SegmentedControlOption for representing a null/"no value" selection.
- * Label is required to force use case to override default js 'null' toString rendering.
- */
-export interface SegmentedControlNullOption {
-    /** Null value for this option. */
-    value: null;
-
-    /** Display label - required for null options. */
-    label: string;
-
-    /** Icon element, displayed before the label. */
-    icon?: ReactElement;
-
-    /** True to disable this individual option. */
-    disabled?: boolean;
-
-    /**
-     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
-     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
-     * `intent` default. Defaults to the control's `intent`.
-     */
-    intent?: Intent;
-}
-
 /**
  * An input for selecting a single value from a small set of mutually exclusive options,
  * rendered as a group of toggle buttons with clear visual indication of the active

package/desktop/cmp/tab/Tabs.scss

@@ -10,13 +10,17 @@
   max-width: 100%;
   max-height: 100%;
   flex-direction: column;
-  flex: 1 1 0;
+  //noinspection CssRedundantUnit
+  flex: 1 1 0%;
+  // % unit used to avoid browser fallback to px,
+  // which prevents container expansion
 
   .xh-tab-wrapper {
     display: flex;
     min-width: 0;
     min-height: 0;
-    flex: 1 1 0;
+    //noinspection CssRedundantUnit
+    flex: 1 1 0%;
   }
 }
 

package/desktop/cmp/tab/dynamic/DynamicTabSwitcher.ts

@@ -24,7 +24,7 @@ import {Icon} from '@xh/hoist/icon';
 import {tooltip as bpTooltip, showContextMenu} from '@xh/hoist/kit/blueprint';
 import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
 import {wait} from '@xh/hoist/promise';
-import {consumeEvent} from '@xh/hoist/utils/js';
+import {consumeEvent, getTestId} from '@xh/hoist/utils/js';
 import {composeRefs, getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {first, isFinite, last} from 'lodash';
@@ -41,13 +41,14 @@ export const [DynamicTabSwitcher, dynamicTabSwitcher] = hoistCmp.withFactory<Tab
     className: 'xh-dynamic-tab-switcher',
     displayName: 'DynamicTabSwitcher',
     model: uses(TabContainerModel),
-    render({className, orientation, ...props}) {
+    render({className, orientation, testId, ...props}) {
         const impl = useLocalModel(DynamicTabSwitcherLocalModel);
         return scroller({
             className: classNames(className, impl.isVertical && `${className}--vertical`),
             content: tabs,
             contentProps: {localModel: impl},
             orientation: ['left', 'right'].includes(orientation) ? 'vertical' : 'horizontal',
+            testId,
             ...getLayoutProps(props)
         });
     }
@@ -127,7 +128,8 @@ const tabCmp = hoistCmp.factory<TabProps>(({tab, index, localModel, model}) => {
         {disabled, icon, tooltip} = tab,
         isFavorite = model.isTabFavorite(tab.id),
         {isVertical, props} = localModel,
-        {tabWidth, tabMinWidth, tabMaxWidth} = props;
+        {tabWidth, tabMinWidth, tabMaxWidth} = props,
+        tabTestId = getTestId(props, tab.id);
 
     // Handle tab sizing props
     const tabStyle: CSSProperties = {};
@@ -172,6 +174,7 @@ const tabCmp = hoistCmp.factory<TabProps>(({tab, index, localModel, model}) => {
                     );
                 },
                 ref: composeRefs(provided.innerRef, tabRef),
+                testId: tabTestId,
                 ...provided.draggableProps,
                 ...provided.dragHandleProps,
                 style: getStyles(isVertical, provided.draggableProps.style),
@@ -199,6 +202,7 @@ const tabCmp = hoistCmp.factory<TabProps>(({tab, index, localModel, model}) => {
                                     button({
                                         className:
                                             'xh-dynamic-tab-switcher__tabs__tab__close-button',
+                                        testId: getTestId(tabTestId, 'remove-btn'),
                                         icon: Icon.x({size: 'sm'}),
                                         title: 'Remove Tab',
                                         minimal: true,

package/docs/error-handling.md

@@ -490,6 +490,15 @@ The logged payload includes:
 - Whether the user was shown an alert
 - An optional user-provided message (via the "Report" dialog)
 
+> **Routing client errors to a chat system:** Because reported errors land server-side as
+> `'Client Error'` track entries, a Grails service can forward them to a realtime chat system
+> (Slack, Teams, etc.) by subscribing to the `xhTrackReceived` cluster topic - no client changes
+> required. XH's [Toolbox](https://github.com/xh/toolbox) demo app
+> [includes a `SlackAlertService` that does exactly this](https://github.com/xh/toolbox/blob/develop/grails-app/services/io/xh/toolbox/SlackAlertService.groovy),
+> posting client errors (alongside monitor alerts and user feedback) to Slack. See the hoist-core
+> [activity tracking](https://github.com/xh/hoist-core/blob/develop/docs/activity-tracking.md) docs
+> for the server-side topic mechanism.
+
 ### Sensitive Data Redaction
 
 The handler automatically redacts values at paths listed in