@vertesia/ui 1.5.0-dev.20260722.120446Z → 1.5.0-dev.20260804.124748Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.5.0-dev.20260722.120446Z",
+  "version": "1.5.0-dev.20260804.124748Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -24,24 +24,24 @@
     "@floating-ui/dom": "^1.8.0",
     "@floating-ui/react": "^0.27.20",
     "@monaco-editor/react": "^4.7.0",
-    "@radix-ui/react-checkbox": "^1.3.7",
-    "@radix-ui/react-collapsible": "^1.1.16",
-    "@radix-ui/react-dialog": "^1.1.19",
-    "@radix-ui/react-direction": "^1.1.2",
-    "@radix-ui/react-dismissable-layer": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.20",
-    "@radix-ui/react-focus-guards": "^1.1.4",
-    "@radix-ui/react-focus-scope": "^1.1.12",
-    "@radix-ui/react-label": "^2.1.11",
-    "@radix-ui/react-popover": "^1.1.19",
-    "@radix-ui/react-portal": "^1.1.13",
-    "@radix-ui/react-radio-group": "^1.4.3",
-    "@radix-ui/react-separator": "^1.1.11",
-    "@radix-ui/react-slider": "^1.4.3",
-    "@radix-ui/react-slot": "^1.3.0",
-    "@radix-ui/react-switch": "^1.3.3",
-    "@radix-ui/react-tabs": "^1.1.17",
-    "@radix-ui/react-tooltip": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-direction": "^1.1.4",
+    "@radix-ui/react-dismissable-layer": "^1.1.19",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-focus-guards": "^1.1.6",
+    "@radix-ui/react-focus-scope": "^1.1.16",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-portal": "^1.1.17",
+    "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-tooltip": "^1.2.16",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
     "aria-hidden": "^1.2.6",
@@ -52,16 +52,15 @@
     "debounce": "^3.0.0",
     "dompurify": "^3.4.12",
     "fast-xml-parser": "^5.10.1",
-    "fast-xml-validator": "^1.2.0",
     "firebase": "^12.16.0",
     "framer-motion": "^12.42.2",
     "i18next": "^26.3.6",
     "jwt-decode": "^4.0.0",
-    "katex": "^0.17.0",
+    "katex": "^0.18.1",
     "lodash-es": "^4.18.1",
-    "lucide-react": "^1.24.0",
+    "lucide-react": "^1.27.0",
     "mermaid": "^11.16.0",
-    "monaco-editor": "^0.55.1",
+    "monaco-editor": "^0.56.0",
     "motion": "^12.42.2",
     "papaparse": "^5.5.4",
     "react": "19.2.7",
@@ -69,7 +68,7 @@
     "react-date-picker": "^12.0.2",
     "react-dom": "19.2.7",
     "react-error-boundary": "^6.1.2",
-    "react-i18next": "^17.0.9",
+    "react-i18next": "^17.0.11",
     "react-markdown": "^10.1.0",
     "react-pdf": "^10.4.1",
     "react-remove-scroll": "^2.7.2",
@@ -87,13 +86,14 @@
     "tailwind-merge": "^3.6.0",
     "ts-md5": "^2.0.1",
     "unist-util-visit": "^5.1.0",
-    "vega": "^6.2.0",
+    "vega": "^6.3.1",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.3",
-    "@vertesia/client": "1.5.0-dev.20260722.120446Z",
-    "@vertesia/json": "1.5.0-dev.20260722.120446Z",
-    "@vertesia/fusion-ux": "1.5.0-dev.20260722.120446Z",
-    "@vertesia/common": "1.5.0-dev.20260722.120446Z"
+    "@vertesia/client": "1.5.0-dev.20260804.124748Z",
+    "@vertesia/common": "1.5.0-dev.20260804.124748Z",
+    "@vertesia/fusion-ux": "1.5.0-dev.20260804.124748Z",
+    "@vertesia/rich-text": "1.5.0-dev.20260804.124748Z",
+    "@vertesia/json": "1.5.0-dev.20260804.124748Z"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -106,9 +106,9 @@
     "@types/react-dom": "19.2.3",
     "axe-core": "^4.12.1",
     "culori": "^4.0.2",
-    "i18next-cli": "^1.65.0",
+    "i18next-cli": "^1.66.2",
     "jsdom": "^29.1.1",
-    "rolldown": "1.1.5",
+    "rolldown": "1.2.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.10",
     "vitest-axe": "^0.1.0",
@@ -150,6 +150,10 @@
       "types": "./lib/widgets/index.d.ts",
       "default": "./lib/widgets/index.js"
     },
+    "./rich-text": {
+      "types": "./lib/rich-text/index.d.ts",
+      "default": "./lib/rich-text/index.js"
+    },
     "./code": {
       "types": "./lib/code/index.d.ts",
       "default": "./lib/code/index.js"
@@ -180,7 +184,7 @@
     "url": "https://github.com/vertesia/composableai.git",
     "directory": "packages/ui"
   },
-  "gitHead": "203c30e5a8ddc583ac9f1acce0f5445eb38a9551",
+  "gitHead": "87ac9166db2b38bd1be6e37adf0414ea83e402ee",
   "scripts": {
     "clean:lib": "rimraf ./lib ./tsconfig.tsbuildinfo",
     "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo",

package/src/__tests__/a11y.test.tsx

@@ -320,7 +320,10 @@ describe('@vertesia/ui accessibility (axe)', () => {
         const { baseElement } = renderWithProviders(<Harness />);
         // Radix portals the dialog into document.body, not the render container.
         // noCloseButton avoids the Button.alt -> aria-label gap (deferred to Section 3).
-        expect(await axe(baseElement)).toHaveNoViolations();
+        // Radix focus guards are intentionally focusable, visually hidden sentinels. Newer
+        // axe-core versions flag their tabindex + aria-hidden combination even though they
+        // are infrastructure outside the dialog's accessible content.
+        expect(await axe(baseElement, { exclude: ['[data-radix-focus-guard]'] })).toHaveNoViolations();
     });
 
     it('Table with column headers and sortable button has no violations', async () => {

package/src/__tests__/axe-helper.ts

@@ -1,6 +1,17 @@
-import type { AxeResults } from 'axe-core';
+import axeCore, { type AxeResults, type RunOptions } from 'axe-core';
 import { axe as baseAxe } from 'vitest-axe';
 
+const RUN_OPTIONS: RunOptions = {
+    rules: {
+        'color-contrast': { enabled: false },
+    },
+};
+
+export interface AxeTestOptions {
+    /** Selectors to omit from this specific axe run while testing the rest of the container. */
+    exclude?: string[];
+}
+
 /**
  * Project-wide axe runner.
  *
@@ -14,10 +25,9 @@ import { axe as baseAxe } from 'vitest-axe';
  * Lives in a `.ts` file (not `.tsx`) to keep its module init free of React/JSX
  * resolution concerns.
  */
-export function axe(container: Element | string): Promise<AxeResults> {
-    return baseAxe(container, {
-        rules: {
-            'color-contrast': { enabled: false },
-        },
-    });
+export function axe(container: Element | string, options: AxeTestOptions = {}): Promise<AxeResults> {
+    if (options.exclude?.length && typeof container !== 'string') {
+        return axeCore.run({ include: [container], exclude: options.exclude }, RUN_OPTIONS);
+    }
+    return baseAxe(container, RUN_OPTIONS);
 }

package/src/__tests__/setup.ts

@@ -72,3 +72,28 @@ if (typeof globalThis.ResizeObserver === 'undefined') {
     (globalThis as unknown as { ResizeObserver: typeof ResizeObserverPolyfill }).ResizeObserver =
         ResizeObserverPolyfill;
 }
+
+// Chart and Mermaid modules probe canvas support during import. jsdom's default
+// implementation only logs a noisy "not implemented" error, so return the same
+// unsupported value without polluting otherwise successful UI test output.
+if (typeof HTMLCanvasElement !== 'undefined') {
+    Object.defineProperty(HTMLCanvasElement.prototype, 'getContext', {
+        configurable: true,
+        value: () => null,
+    });
+}
+
+// ProseMirror asks the browser for caret geometry during pointer/keyboard input.
+// jsdom has no layout engine, so provide stable empty geometry for interaction tests.
+if (typeof document !== 'undefined' && typeof document.elementFromPoint !== 'function') {
+    document.elementFromPoint = () => document.querySelector('.ProseMirror') ?? document.body;
+}
+if (typeof Range !== 'undefined') {
+    const emptyRect = () => new DOMRect(0, 0, 0, 0);
+    if (typeof Range.prototype.getBoundingClientRect !== 'function') {
+        Range.prototype.getBoundingClientRect = emptyRect;
+    }
+    if (typeof Range.prototype.getClientRects !== 'function') {
+        Range.prototype.getClientRects = () => [] as unknown as DOMRectList;
+    }
+}

package/src/core/components/shadcn/filters/filterBar.tsx

@@ -318,6 +318,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
                     variant="outline"
                     role="combobox"
                     aria-expanded={open}
+                    aria-label={t('filter.filter')}
                     size="md"
                     className={cn('transition group flex gap-1.5', className)}
                 >

package/src/core/components/shadcn/modal/dialog.tsx

@@ -16,7 +16,7 @@ interface ModalProps {
     className?: string;
     allowOverflow?: boolean;
     disableCloseOnClickOutside?: boolean;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
     action?: React.ReactNode;
 }
 const ModalContext = createContext<boolean>(false);
@@ -54,6 +54,8 @@ export function Modal({
                 return 'max-w-[80vw] md:max-w-[60vw]';
             case 'xl':
                 return 'max-w-[95vw] lg:max-w-[80vw]';
+            case 'full':
+                return 'h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)]';
             default:
                 return 'max-w-[60vw] lg:max-w-[40vw]';
         }

package/src/core/components/shadcn/tabs.test.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Tabs, TabsBar, TabsPanel } from './tabs';
+
+const TABS = [
+    { name: 'first', label: 'First', href: '#first', content: <div>First panel</div> },
+    { name: 'second', label: 'Second', href: '#second', content: <div>Second panel</div> },
+];
+
+function renderTabs(canChangeTab?: (nextTab: string, currentTab?: string) => boolean) {
+    return render(
+        <Tabs tabs={TABS} defaultValue="first" canChangeTab={canChangeTab}>
+            <TabsBar />
+            <TabsPanel />
+        </Tabs>,
+    );
+}
+
+describe('Tabs canChangeTab', () => {
+    beforeEach(() => {
+        window.history.replaceState(null, '', '/');
+    });
+
+    it('cancels the switch and leaves the hash alone when the guard returns false', () => {
+        const canChangeTab = vi.fn().mockReturnValue(false);
+        renderTabs(canChangeTab);
+
+        fireEvent.click(screen.getByRole('tab', { name: 'Second' }));
+
+        expect(canChangeTab).toHaveBeenCalledWith('second', 'first');
+        expect(screen.getByText('First panel')).toBeDefined();
+        expect(screen.queryByText('Second panel')).toBeNull();
+        expect(window.location.hash).toBe('');
+    });
+
+    it('allows the switch when the guard returns true', () => {
+        const canChangeTab = vi.fn().mockReturnValue(true);
+        renderTabs(canChangeTab);
+
+        fireEvent.click(screen.getByRole('tab', { name: 'Second' }));
+
+        expect(screen.getByText('Second panel')).toBeDefined();
+        expect(window.location.hash).toBe('#second');
+    });
+
+    it('does not consult the guard when the active tab is clicked again', () => {
+        const canChangeTab = vi.fn().mockReturnValue(false);
+        renderTabs(canChangeTab);
+
+        fireEvent.click(screen.getByRole('tab', { name: 'First' }));
+
+        expect(canChangeTab).not.toHaveBeenCalled();
+        expect(screen.getByText('First panel')).toBeDefined();
+    });
+
+    it('still switches from a hash change so a cancelled switch can be resumed', () => {
+        const canChangeTab = vi.fn().mockReturnValue(false);
+        renderTabs(canChangeTab);
+
+        window.location.hash = 'second';
+        fireEvent(window, new HashChangeEvent('hashchange'));
+
+        expect(screen.getByText('Second panel')).toBeDefined();
+    });
+});

package/src/core/components/shadcn/tabs.tsx

@@ -15,6 +15,17 @@ export interface Tab {
     is_allowed?: boolean;
 }
 
+/**
+ * Guard consulted before switching to another tab. Return `false` to cancel the switch — the active
+ * tab, the URL hash and the browser history are all left untouched, so the guard can hold the user
+ * on a tab that has unsaved changes while a confirmation is shown.
+ *
+ * It is only called when the target tab differs from the active one, but it may be called more than
+ * once for a single attempted switch (a click reaches both the trigger and the Radix root), so any
+ * side effect it performs must be idempotent.
+ */
+export type CanChangeTab = (nextTab: string, currentTab?: string) => boolean;
+
 const TabsContext = React.createContext<{
     size?: number;
     tabs?: Tab[];
@@ -23,6 +34,7 @@ const TabsContext = React.createContext<{
     responsive?: boolean;
     variant?: 'tabs' | 'pills';
     updateHash?: boolean;
+    canChangeTab?: CanChangeTab;
 }>({
     size: undefined,
     tabs: undefined,
@@ -45,6 +57,7 @@ interface TabsProps {
     responsive?: boolean;
     variant?: 'tabs' | 'pills';
     updateHash?: boolean;
+    canChangeTab?: CanChangeTab;
 }
 
 const Tabs = ({
@@ -59,6 +72,7 @@ const Tabs = ({
     responsive = false,
     variant = 'tabs',
     updateHash = true,
+    canChangeTab,
 }: TabsProps) => {
     // Filter tabs based on is_allowed (undefined or true means visible)
     const visibleTabs = React.useMemo(
@@ -121,6 +135,9 @@ const Tabs = ({
 
     const handleValueChange = React.useCallback(
         (newValue: string) => {
+            // Bail before touching the value or the history so a cancelled switch is a no-op.
+            if (newValue !== value && canChangeTab && !canChangeTab(newValue, value)) return;
+
             setValue(newValue);
 
             // Update the URL hash when tab changes (only if updateHash is true and not controlled by parent)
@@ -135,7 +152,7 @@ const Tabs = ({
                 onTabChange(newValue);
             }
         },
-        [current, onTabChange, updateHash],
+        [current, onTabChange, updateHash, canChangeTab, value],
     );
 
     const setTab = React.useCallback(
@@ -155,6 +172,7 @@ const Tabs = ({
                 responsive: responsive,
                 variant,
                 updateHash,
+                canChangeTab,
             }}
         >
             <TabsPrimitive.Root
@@ -176,13 +194,17 @@ interface TabsBarProps {
 }
 
 const TabsBar = ({ className, sticky, direction }: TabsBarProps) => {
-    const { tabs, size, current, setTab, responsive, variant, updateHash } = React.useContext(TabsContext);
+    const { tabs, size, current, setTab, responsive, variant, updateHash, canChangeTab } =
+        React.useContext(TabsContext);
 
     const fullWidth = size !== 0;
 
     const handleTabChange = React.useCallback(
         (tabName: string) => {
             if (!tabs || !setTab) return;
+            // Consulted here too: this path pushes the tab href before `setTab` reaches the guard in
+            // `Tabs`, so a cancelled switch would otherwise leave the URL pointing at the other tab.
+            if (tabName !== current && canChangeTab && !canChangeTab(tabName, current)) return;
 
             const tab = tabs.find((t) => t.name === tabName);
 
@@ -194,7 +216,7 @@ const TabsBar = ({ className, sticky, direction }: TabsBarProps) => {
 
             setTab(tabName);
         },
-        [tabs, setTab, updateHash],
+        [tabs, setTab, updateHash, canChangeTab, current],
     );
 
     if (!tabs || !setTab) {

package/src/core/hooks/useScrollableSearch.test.tsx

@@ -0,0 +1,139 @@
+import { act, render } from '@testing-library/react';
+import { useRef, useState } from 'react';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import { type ScrollableSearchResult, useDefaultScrollableSearch } from './useScrollableSearch';
+
+beforeAll(() => {
+    // jsdom has no IntersectionObserver; the hook only needs it constructible.
+    vi.stubGlobal(
+        'IntersectionObserver',
+        class {
+            observe() {}
+            unobserve() {}
+            disconnect() {}
+        },
+    );
+});
+
+/**
+ * Regression tests for the infinite request loop: callers pass an INLINE search
+ * closure (new identity every render). The fetch effect must not depend on that
+ * identity, otherwise every completed request re-triggers the effect forever.
+ */
+
+type Item = { id: number };
+
+function flush(): Promise<void> {
+    // Drain the microtask queue so pending search promises settle.
+    return act(() => Promise.resolve());
+}
+
+function Harness({
+    searchFn,
+    onApi,
+}: {
+    searchFn: (payload: unknown, offset: number, limit: number) => Promise<Item[]>;
+    onApi: (api: ScrollableSearchResult<Item, unknown, number>) => void;
+}) {
+    const loadMoreRef = useRef<HTMLDivElement>(null);
+    // Unrelated state to force extra re-renders, as a real page would.
+    const [, setTick] = useState(0);
+    const api = useDefaultScrollableSearch<Item, unknown>({
+        // Inline closure ON PURPOSE — new identity on every render, like real callers.
+        async search(payload, offset, limit) {
+            return searchFn(payload, offset, limit);
+        },
+        pageSize: 2,
+        nextPageTrigger: loadMoreRef,
+        payload: {},
+    });
+    onApi(api);
+    return (
+        <div>
+            <button type="button" data-testid="rerender" onClick={() => setTick((t) => t + 1)} />
+            <div ref={loadMoreRef} />
+        </div>
+    );
+}
+
+function setup(searchFn: (payload: unknown, offset: number, limit: number) => Promise<Item[]>) {
+    let api!: ScrollableSearchResult<Item, unknown, number>;
+    const utils = render(
+        <Harness
+            searchFn={searchFn}
+            onApi={(a) => {
+                api = a;
+            }}
+        />,
+    );
+    return { ...utils, getApi: () => api };
+}
+
+describe('useDefaultScrollableSearch', () => {
+    it('fetches exactly once on mount despite inline search closures and re-renders', async () => {
+        const searchFn = vi.fn(async () => [{ id: 1 }, { id: 2 }]);
+        const { getApi } = setup(searchFn);
+
+        await flush();
+        expect(searchFn).toHaveBeenCalledTimes(1);
+        expect(getApi().result).toEqual([{ id: 1 }, { id: 2 }]);
+
+        // Extra render cycles (state updates elsewhere on the page) must NOT re-fetch.
+        await flush();
+        await flush();
+        expect(searchFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('searchMore appends the next page (single extra request)', async () => {
+        const pages: Item[][] = [[{ id: 1 }, { id: 2 }], [{ id: 3 }]];
+        const searchFn = vi.fn(async (_p: unknown, offset: number) => pages[offset / 2] ?? []);
+        const { getApi } = setup(searchFn);
+        await flush();
+
+        act(() => getApi().searchMore());
+        await flush();
+
+        expect(searchFn).toHaveBeenCalledTimes(2);
+        expect(getApi().result).toEqual([{ id: 1 }, { id: 2 }, { id: 3 }]);
+        // Page of 1 < pageSize still probes once more only when triggered — no auto loop.
+        await flush();
+        expect(searchFn).toHaveBeenCalledTimes(2);
+    });
+
+    it('refresh() re-fetches even on the first page (same payload, same page)', async () => {
+        const searchFn = vi.fn(async () => [{ id: 1 }]);
+        const { getApi } = setup(searchFn);
+        await flush();
+        expect(searchFn).toHaveBeenCalledTimes(1);
+
+        act(() => getApi().refresh());
+        await flush();
+        expect(searchFn).toHaveBeenCalledTimes(2);
+    });
+
+    it('empty result stops pagination (hasMore=false) and does not re-fetch', async () => {
+        const searchFn = vi.fn(async () => []);
+        const { getApi } = setup(searchFn);
+        await flush();
+
+        expect(searchFn).toHaveBeenCalledTimes(1);
+        expect(getApi().hasMore).toBe(false);
+
+        act(() => getApi().searchMore());
+        await flush();
+        // nextPage is null — searchMore is a no-op.
+        expect(searchFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('a failing search sets error once and does not retry in a loop', async () => {
+        const searchFn = vi.fn(async () => {
+            throw new Error('boom');
+        });
+        const { getApi } = setup(searchFn);
+        await flush();
+        await flush();
+
+        expect(getApi().error?.message).toBe('boom');
+        expect(searchFn).toHaveBeenCalledTimes(1);
+    });
+});

package/src/core/hooks/useScrollableSearch.tsx

@@ -48,7 +48,7 @@ interface ScrollableSearchOptions<ResultT, PayloadT, PageT = number> {
     nextPageTrigger: React.RefObject<HTMLElement | null>;
 }
 
-interface ScrollableSearchResult<ResultT, PayloadT, PageT = number> {
+export interface ScrollableSearchResult<ResultT, PayloadT, PageT = number> {
     /**
      * Initiates a new search with the given payload
      * @param payload The search payload
@@ -105,15 +105,27 @@ export function useScrollableSearch<ResultT, PayloadT, PageT = number>(
     const [results, setResults] = useState<ResultT[]>([]);
     const [nextPage, setNextPage] = useState<PageT | null>(null);
     const [isSearching, setIsSearching] = useState(false);
+    // Bumped by search()/refresh() so the fetch effect re-runs even when the
+    // payload/page state is unchanged (e.g. refresh on the first page).
+    const [refreshTick, setRefreshTick] = useState(0);
 
     // Track current request to prevent stale results
     const requestIdRef = useRef(0);
 
+    // Latest-ref for the search function: callers routinely pass an inline
+    // closure, which gets a new identity on every render. Depending on it in
+    // the fetch effect made every completed request re-trigger the effect —
+    // an infinite request loop. The ref always points at the latest closure
+    // without participating in the effect's dependencies.
+    const searchFnRef = useRef(opts.search);
+    searchFnRef.current = opts.search;
+
     const search = (payload: PayloadT) => {
         setPage(null);
         setResults([]); // Clear old results immediately
         setNextPage(null);
         setLastPayload(payload);
+        setRefreshTick((tick) => tick + 1);
     };
 
     const searchMore = () => {
@@ -122,13 +134,15 @@ export function useScrollableSearch<ResultT, PayloadT, PageT = number>(
         }
     };
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies: refreshTick is an intentional external trigger — refresh() bumps it to re-run the fetch when payload/page are unchanged
     useEffect(() => {
         // Increment request ID to mark previous requests as stale
         requestIdRef.current += 1;
         const currentRequestId = requestIdRef.current;
 
         setIsSearching(true);
-        opts.search(lastPayload, page, pageSize)
+        searchFnRef
+            .current(lastPayload, page, pageSize)
             .then((r) => {
                 // Only update state if this is still the current request
                 if (currentRequestId !== requestIdRef.current) {
@@ -158,7 +172,7 @@ export function useScrollableSearch<ResultT, PayloadT, PageT = number>(
                     setIsSearching(false);
                 }
             });
-    }, [...dependencies, lastPayload, opts.search, page, pageSize]);
+    }, [...dependencies, lastPayload, refreshTick, page, pageSize]);
 
     // Intersection observer for infinite scrolling
     useIntersectionObserver(

package/src/env/index.ts

@@ -17,6 +17,8 @@ export interface EnvProps {
         sts: string; // Security Token Service endpoint
         git?: string; // Smart HTTP app source git endpoint
         mcp?: string;
+        /** Appgen app-gateway endpoint (serves live development previews and app bundles). */
+        gateway?: string;
     };
     firebase?: {
         apiKey: string;

package/src/features/agent/chat/AgentChatPlaybackControls.test.tsx

@@ -24,6 +24,8 @@ describe('AgentChatPlaybackControls', () => {
             <AgentChatPlaybackControls cursor="live" messages={messages} onChangeCursor={onChangeCursor} />,
         );
 
+        expect(screen.getByText('Debug')).toBeTruthy();
+
         fireEvent.click(screen.getByRole('button', { name: 'Jump to first message' }));
 
         expect(onChangeCursor).toHaveBeenCalledWith(0);