@vertesia/ui 1.5.0-dev.20260725.083715Z → 1.5.0-dev.20260806.125520Z

package/lib/widgets/xml-viewer/helpers/index.d.ts

@@ -2,7 +2,7 @@ import type { AttributesObject, Element } from '../types';
 export declare function getIndentationString(size: number, level: number): string;
 export declare function hasBreakLines(elements: Element[] | string): boolean;
 export declare function isInlineTextElement(elements: Element[] | string): boolean;
-export declare function getTagType(tagKey: string): "#text" | "#comment" | "#cdata" | "DECLARATION_TAG" | "TAG";
+export declare function getTagType(tagKey: string): "#cdata" | "#comment" | "#text" | "DECLARATION_TAG" | "TAG";
 export declare function getTagProps(element: Element): {
     attributes: AttributesObject;
     tagKey: string;

package/lib/widgets/xml-viewer/hooks/useCollapsible.d.ts

@@ -1,8 +1,8 @@
 export declare function useCollapsible(level: number): {
     collapsed: boolean;
     buttonProps: {
-        onClick?: undefined;
         role?: undefined;
+        onClick?: undefined;
         style?: undefined;
     } | {
         onClick: () => void;

package/lib/widgets/xml-viewer/hooks/useCollapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCollapsible.d.ts","sourceRoot":"","sources":["../../../../src/widgets/xml-viewer/hooks/useCollapsible.ts"],"names":[],"mappings":"AAIA,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM;;;;;;;;;;;;;EAqB3C"}
+{"version":3,"file":"useCollapsible.d.ts","sourceRoot":"","sources":["../../../../src/widgets/xml-viewer/hooks/useCollapsible.ts"],"names":[],"mappings":"AAIA,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM;;;;;;;;;;YAkBjB,MAAM;;;EAGhC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.5.0-dev.20260725.083715Z",
+  "version": "1.5.0-dev.20260806.125520Z",
   "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",
@@ -56,11 +56,11 @@
     "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",
@@ -68,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",
@@ -86,14 +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.20260725.083715Z",
-    "@vertesia/common": "1.5.0-dev.20260725.083715Z",
-    "@vertesia/fusion-ux": "1.5.0-dev.20260725.083715Z",
-    "@vertesia/rich-text": "1.5.0-dev.20260725.083715Z",
-    "@vertesia/json": "1.5.0-dev.20260725.083715Z"
+    "@vertesia/common": "1.5.0-dev.20260806.125520Z",
+    "@vertesia/fusion-ux": "1.5.0-dev.20260806.125520Z",
+    "@vertesia/json": "1.5.0-dev.20260806.125520Z",
+    "@vertesia/rich-text": "1.5.0-dev.20260806.125520Z",
+    "@vertesia/client": "1.5.0-dev.20260806.125520Z"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -106,10 +106,10 @@
     "@types/react-dom": "19.2.3",
     "axe-core": "^4.12.1",
     "culori": "^4.0.2",
-    "i18next-cli": "^1.66.0",
-    "jsdom": "^29.1.1",
+    "i18next-cli": "^1.67.3",
+    "jsdom": "^30.0.0",
     "rolldown": "1.2.0",
-    "typescript": "^6.0.3",
+    "typescript": "7.0.2",
     "vitest": "^4.1.10",
     "vitest-axe": "^0.1.0",
     "wcag-contrast": "^3.0.0",
@@ -184,7 +184,7 @@
     "url": "https://github.com/vertesia/composableai.git",
     "directory": "packages/ui"
   },
-  "gitHead": "57bcc2f27dd17b3387f27c18e89329c4c37f98ac",
+  "gitHead": "416423ef4182d8668809604902a871ca79629298",
   "scripts": {
     "clean:lib": "rimraf ./lib ./tsconfig.tsbuildinfo",
     "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo",

package/src/core/hooks/useFetch.ts

@@ -49,7 +49,8 @@ export function useFetch<T = unknown>(fetcher: () => Promise<T>, opts?: FetchOpt
     useEffect(() => {
         const currentOptions = optionsRef.current;
         if (!currentOptions.condition || currentOptions.condition()) {
-            fetch();
+            // `fetch` handles its own rejections (see the `.catch` above), so there is nothing to await here.
+            void fetch();
         }
     }, [fetch, ...(options.deps ?? [])]);
     return { data, isLoading, error, setData, refetch: fetch };

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);

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

@@ -1,22 +1,30 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { AgentMessageType } from '@vertesia/common';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderWithProviders } from '../../../__tests__/test-utils.js';
 import { AgentRequestInputOverlay } from './AgentRequestInputOverlay';
 import type { RequestInputMessageWithUx } from './ModernAgentOutput/requestInputMessages';
 
+const mocks = vi.hoisted(() => ({
+    getCollectionStatus: vi.fn(),
+}));
+
 vi.mock('@vertesia/ui/session', () => ({
     useUserSession: () => ({
         client: {
             remoteMcpConnections: {
-                getCollectionStatus: vi.fn(),
+                getCollectionStatus: mocks.getCollectionStatus,
             },
         },
     }),
 }));
 
 vi.mock('../../oauth/RemoteMcpConnectionButton.js', () => ({
-    RemoteMcpConnectionButton: () => <button type="button">Connect</button>,
+    RemoteMcpConnectionButton: ({ onAuthChange }: { onAuthChange: () => void }) => (
+        <button type="button" onClick={onAuthChange}>
+            Connect
+        </button>
+    ),
 }));
 
 function createMcpRequestMessage(): RequestInputMessageWithUx {
@@ -27,6 +35,7 @@ function createMcpRequestMessage(): RequestInputMessageWithUx {
         workstream_id: 'main',
         message: 'Connect to Jira to continue.',
         details: {
+            request_id: 'request-mcp-1',
             ux: {
                 mcp_connect: {
                     app_install_id: 'app1',
@@ -46,6 +55,7 @@ function createToolApprovalRequestMessage(): RequestInputMessageWithUx {
         workstream_id: 'main',
         message: 'Approve Write Artifact: quotes.md?',
         details: {
+            request_id: 'write_artifact:name:quotes.md',
             tool_approval: {
                 tool_name: 'write_artifact',
                 tool_title: 'Write Artifact',
@@ -74,6 +84,11 @@ function createToolApprovalRequestMessage(): RequestInputMessageWithUx {
 }
 
 describe('AgentRequestInputOverlay', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mocks.getCollectionStatus.mockResolvedValue({ authenticated: true });
+    });
+
     it('lets the user decline an MCP connection request', () => {
         const onSendMessage = vi.fn();
 
@@ -86,7 +101,29 @@ describe('AgentRequestInputOverlay', () => {
         fireEvent.click(screen.getByRole('button', { name: /decline/i }));
 
         expect(onSendMessage).toHaveBeenCalledTimes(1);
-        expect(onSendMessage).toHaveBeenCalledWith("I don't want to connect to Jira. Continue without it.");
+        expect(onSendMessage).toHaveBeenCalledWith("I don't want to connect to Jira. Continue without it.", {
+            request_input_response: { request_id: 'request-mcp-1' },
+        });
+    });
+
+    it('correlates a successful MCP connection response', async () => {
+        const onMcpConnected = vi.fn();
+
+        renderWithProviders(
+            <AgentRequestInputOverlay
+                message={createMcpRequestMessage()}
+                onSendMessage={vi.fn()}
+                onMcpConnected={onMcpConnected}
+            />,
+        );
+
+        fireEvent.click(screen.getByRole('button', { name: 'Connect' }));
+
+        await waitFor(() => {
+            expect(onMcpConnected).toHaveBeenCalledWith(expect.objectContaining({ collection_id: 'jira' }), {
+                request_input_response: { request_id: 'request-mcp-1' },
+            });
+        });
     });
 
     it('sends a commented tool approval denial with structured metadata', () => {
@@ -107,6 +144,9 @@ describe('AgentRequestInputOverlay', () => {
                 decision: 'deny_with_feedback',
                 approval_key: 'write_artifact:name:quotes.md',
             },
+            request_input_response: {
+                request_id: 'write_artifact:name:quotes.md',
+            },
         });
     });
 
@@ -125,6 +165,9 @@ describe('AgentRequestInputOverlay', () => {
                 decision: 'allow_for_run',
                 approval_key: 'write_artifact:name:quotes.md',
             },
+            request_input_response: {
+                request_id: 'write_artifact:name:quotes.md',
+            },
         });
     });
 
@@ -138,7 +181,9 @@ describe('AgentRequestInputOverlay', () => {
         fireEvent.click(screen.getByRole('button', { name: 'Allow once' }));
 
         expect(onSendMessage).toHaveBeenCalledTimes(1);
-        expect(onSendMessage).toHaveBeenCalledWith('allow_once');
+        expect(onSendMessage).toHaveBeenCalledWith('allow_once', {
+            request_input_response: { request_id: 'write_artifact:name:quotes.md' },
+        });
     });
 
     it('renders legacy field-prefixed tool approval prompts with a friendly target', () => {

package/src/features/agent/chat/AgentRequestInputOverlay.tsx

@@ -7,15 +7,17 @@ import { RemoteMcpConnectionButton } from '../../oauth/RemoteMcpConnectionButton
 import { AskUserWidget } from './AskUserWidget';
 import {
     getRequestInputDisplayText,
+    getRequestInputResponseMetadata,
     getToolApprovalResponseMetadata,
     type RequestInputMessageWithUx,
+    sendRequestInputResponse,
 } from './ModernAgentOutput/requestInputMessages';
 
 export interface AgentRequestInputOverlayProps {
     message?: RequestInputMessageWithUx;
     onSendMessage?: (message: string, metadata?: Record<string, unknown>) => void;
     /** Called after the user connects the MCP server requested by request_mcp_connection. */
-    onMcpConnected?: (cfg: McpConnectUxConfig) => void;
+    onMcpConnected?: (cfg: McpConnectUxConfig, metadata?: Record<string, unknown>) => void;
     isLoading?: boolean;
     disabled?: boolean;
     className?: string;
@@ -81,11 +83,7 @@ export function AgentRequestInputOverlay({
     const displayText = getRequestInputDisplayText(message);
     const send = (value: string, metadata?: Record<string, unknown>) => {
         if (isDisabled) return;
-        if (metadata) {
-            onSendMessage?.(value, metadata);
-        } else {
-            onSendMessage?.(value);
-        }
+        sendRequestInputResponse(onSendMessage, message, value, metadata);
     };
 
     const wrapperClassName = cn(
@@ -102,7 +100,7 @@ export function AgentRequestInputOverlay({
                     <div className="min-w-0 text-sm leading-6 text-foreground/85">{displayText}</div>
                     <McpRequestInputControls
                         mcpConnect={mcpConnect}
-                        onMcpConnected={onMcpConnected}
+                        onMcpConnected={(cfg) => onMcpConnected?.(cfg, getRequestInputResponseMetadata(message))}
                         onDecline={() => send(t('agent.mcpDeclinedMessage', { name: mcpConnect.name }))}
                         disabled={isDisabled}
                     />