@vertesia/ui 1.5.0-dev.20260807.073259Z → 1.5.0-dev.20260826.064249Z

package/src/features/agent/PayloadBuilder.test.ts

@@ -0,0 +1,68 @@
+import type { VertesiaClient } from '@vertesia/client';
+import type { InCodeInteraction, JSONSchema } from '@vertesia/common';
+import { describe, expect, it, vi } from 'vitest';
+import { PayloadBuilderStore } from './PayloadBuilder';
+
+describe('PayloadBuilder', () => {
+    it('accepts a resolved interaction with no prompt segments', () => {
+        const store = new PayloadBuilderStore({} as VertesiaClient);
+        const interaction: InCodeInteraction = {
+            type: 'sys',
+            id: 'sys:GeneralAgent',
+            name: 'GeneralAgent',
+            tags: ['agent', 'general-purpose'],
+            title: 'General Agent',
+            description: 'A general-purpose agent.',
+            agent_runner_options: {
+                is_agent: true,
+                request_template: '{{user_prompt}}',
+            },
+            prompts: [],
+        };
+        const listener = vi.fn();
+        store.subscribe(listener);
+
+        store.snapshot.setInteraction(interaction);
+
+        expect(store.snapshot.interaction).toMatchObject(interaction);
+        expect(store.snapshot.interactionParamsSchema).toBeNull();
+        expect(listener).toHaveBeenCalled();
+    });
+
+    it('updates draft prompt data without notifying every builder consumer', () => {
+        const store = new PayloadBuilderStore({} as VertesiaClient);
+        const listener = vi.fn();
+        store.subscribe(listener);
+
+        store.snapshot.setDraftData({ task: 'Write a summary' });
+
+        expect(store.snapshot.data).toEqual({ task: 'Write a summary' });
+        expect(listener).not.toHaveBeenCalled();
+
+        store.snapshot.setModel('model-id');
+
+        expect(listener).toHaveBeenCalledOnce();
+        expect(store.snapshot.data).toEqual({ task: 'Write a summary' });
+    });
+
+    it('validates the latest draft prompt data without requiring a published snapshot', () => {
+        const store = new PayloadBuilderStore({} as VertesiaClient);
+        const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+        const schema: JSONSchema = {
+            type: 'object',
+            properties: {
+                task: { type: 'string', minLength: 1, format: 'textarea' },
+            },
+            required: ['task'],
+        };
+        store.snapshot.interactionParamsSchema = schema;
+
+        store.snapshot.setDraftData({});
+        expect(store.snapshot.validateInput().isValid).toBe(false);
+
+        store.snapshot.setDraftData({ task: 'Write a summary' });
+        expect(store.snapshot.validateInput()).toEqual({ isValid: true });
+        expect(consoleWarn).not.toHaveBeenCalled();
+        consoleWarn.mockRestore();
+    });
+});

package/src/features/agent/PayloadBuilder.tsx

@@ -6,6 +6,7 @@ import {
     type InCodeInteraction,
     type JSONSchema,
     mergeInCodePromptSchemas,
+    SupportedProviders,
     supportsToolUse,
     type UserChannel,
     type WorkflowInteractionVars,
@@ -16,9 +17,27 @@ import Ajv, { type ValidateFunction } from 'ajv';
 import type React from 'react';
 import { createContext, useContext, useState, useSyncExternalStore } from 'react';
 
+// Interaction schemas also use `format` as a UI editor hint (for example, `textarea`
+// and `media`). Those values are not validation formats, so do not make AJV inspect them.
+// Reusing one instance also avoids rebuilding AJV's compiler on the Start button click.
+const inputSchemaAjv = new Ajv({ strict: false, validateFormats: false });
+
 export type WorkflowMode = 'start' | 'schedule';
 type ModelOptions = NonNullable<WorkflowInteractionVars['config']['model_options']>;
 
+type ModelProvider = Parameters<typeof supportsToolUse>[1];
+
+function getExecutableProvider(provider: ExecutionEnvironmentRef['provider']): ModelProvider | undefined {
+    if (
+        provider === SupportedProviders.virtual_lb ||
+        provider === SupportedProviders.virtual_mediator ||
+        provider === SupportedProviders.test
+    ) {
+        return undefined;
+    }
+    return provider as ModelProvider;
+}
+
 export interface ScheduledWorkflowConfig {
     name: string;
     description?: string;
@@ -323,13 +342,14 @@ export class PayloadBuilder {
         if (environment?.id !== this._environment?.id) {
             this._environment = environment;
             if (!this._preserveRunValues) {
+                const provider = environment ? getExecutableProvider(environment.provider) : undefined;
                 // First try to use the interaction model, then the environment default model
                 const interactionModel = this.interaction?.runtime?.model;
-                if (interactionModel && environment && supportsToolUse(interactionModel, environment.provider)) {
+                if (interactionModel && provider && supportsToolUse(interactionModel, provider)) {
                     this._model = interactionModel;
                 } else {
                     this._model =
-                        environment?.default_model && supportsToolUse(environment.default_model, environment.provider)
+                        environment?.default_model && provider && supportsToolUse(environment.default_model, provider)
                             ? environment.default_model
                             : '';
                 }
@@ -435,6 +455,11 @@ export class PayloadBuilder {
     setData(data: JSONObject) {
         this.data = data;
     }
+    setDraftData(data: JSONObject) {
+        // Generated form controls manage their own live input state. Publishing an external-store
+        // update here would rerender every PayloadBuilder consumer for each keystroke.
+        this._data = data;
+    }
     setPreserveRunValues(value: boolean) {
         this.preserveRunValues = value;
     }
@@ -530,9 +555,8 @@ export class PayloadBuilder {
 
         // If schema has changed or validator not initialized, recompile
         if (!this._inputValidator || this._inputValidator.schema !== this._interactionParamsSchema) {
-            const ajv = new Ajv({ strict: false });
             this._inputValidator = {
-                validate: ajv.compile(this._interactionParamsSchema),
+                validate: inputSchemaAjv.compile(this._interactionParamsSchema),
                 schema: this._interactionParamsSchema,
             };
         }

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

@@ -5,10 +5,7 @@ import {
     Button,
     Center,
     cn,
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
+    OverflowTabsBar,
     type Tab as TabDefinition,
     Tabs,
     TabsPanel,
@@ -18,7 +15,6 @@ import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import {
     CheckCircleIcon,
-    ChevronDownIcon,
     ClipboardCopyIcon,
     DownloadCloudIcon,
     FileTextIcon,
@@ -27,7 +23,7 @@ import {
     XCircleIcon,
     XIcon,
 } from 'lucide-react';
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { ArtifactsTab } from './ArtifactsTab.js';
 import { BrowserUseWidget, getLatestBrowserUseByWorkstream } from './BrowserUseWidget.js';
 import { DocumentPanel } from './DocumentPanel.js';
@@ -347,252 +343,6 @@ function WorkstreamsTab({ workstreams, messages, runId }: WorkstreamsTabProps) {
     );
 }
 
-// ---------------------------------------------------------------------------
-// Overflow tab bar
-// ---------------------------------------------------------------------------
-
-// Tab-item styling, matching core's TabsTrigger underline tabs.
-const TAB_ITEM_BASE =
-    'flex items-center border-b-2 px-2 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer shrink-0';
-const TAB_ITEM_INACTIVE = 'border-transparent text-muted-foreground hover:border-border hover:text-foreground';
-const TAB_ITEM_ACTIVE = 'border-primary text-primary';
-const TAB_GAP_PX = 4; // matches the `gap-1` between tab items
-
-interface OverflowMoreMenuProps {
-    /** The overflowed tabs to list inside the menu. */
-    tabs: TabDefinition[];
-    current: string;
-    onTabChange: (name: string) => void;
-    label: string;
-    /** Whether the active tab is one of the overflowed tabs. */
-    active: boolean;
-}
-
-/** Trailing "More" dropdown of overflowed tabs; opens on hover, click, or keyboard. */
-function OverflowMoreMenu({ tabs, current, onTabChange, label, active }: OverflowMoreMenuProps) {
-    const [open, setOpen] = useState(false);
-    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const openedByHover = useRef(false);
-
-    const cancelClose = () => {
-        if (closeTimer.current) {
-            clearTimeout(closeTimer.current);
-            closeTimer.current = null;
-        }
-    };
-    const openOnHover = () => {
-        cancelClose();
-        openedByHover.current = true;
-        setOpen(true);
-    };
-    // Delay the close so the pointer can travel across the gap onto the menu.
-    const closeAfterDelay = () => {
-        cancelClose();
-        closeTimer.current = setTimeout(() => setOpen(false), 150);
-    };
-
-    // Clear any pending close timer on unmount.
-    useEffect(() => () => clearTimeout(closeTimer.current ?? undefined), []);
-
-    return (
-        // Non-modal: a modal menu sets body `pointer-events: none` while open, which makes
-        // the hover open/close flap. It still closes on outside-click / Escape.
-        <DropdownMenu
-            modal={false}
-            open={open}
-            onOpenChange={(next) => {
-                // Fired by click / keyboard / dismiss (not by hover); keep our state in sync.
-                cancelClose();
-                if (next) openedByHover.current = false;
-                setOpen(next);
-            }}
-        >
-            <DropdownMenuTrigger asChild>
-                {/* Tab-bar primitive: raw button is the menu trigger (asChild). */}
-                <button
-                    type="button"
-                    onMouseEnter={openOnHover}
-                    onMouseLeave={closeAfterDelay}
-                    className={cn(TAB_ITEM_BASE, active ? TAB_ITEM_ACTIVE : TAB_ITEM_INACTIVE)}
-                >
-                    {label}
-                    <ChevronDownIcon className="ms-1 size-4" />
-                </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-                align="end"
-                className="w-max"
-                onMouseEnter={cancelClose}
-                onMouseLeave={closeAfterDelay}
-                onCloseAutoFocus={(e) => {
-                    // Keep hover-opens from returning the focus ring to the trigger.
-                    if (openedByHover.current) e.preventDefault();
-                }}
-            >
-                {tabs.map((tab) => (
-                    <DropdownMenuItem
-                        key={tab.name}
-                        disabled={tab.disabled}
-                        onClick={() => onTabChange(tab.name)}
-                        className={cn(tab.name === current && 'text-primary')}
-                    >
-                        {tab.label}
-                    </DropdownMenuItem>
-                ))}
-            </DropdownMenuContent>
-        </DropdownMenu>
-    );
-}
-
-interface OverflowTabsBarProps {
-    tabs: TabDefinition[];
-    current: string;
-    onTabChange: (name: string) => void;
-    className?: string;
-}
-
-/**
- * Tabs as a horizontal row; any that don't fit collapse into a trailing "More"
- * dropdown. The visible/overflow split is measured from a hidden full-width row.
- */
-function OverflowTabsBar({ tabs, current, onTabChange, className }: OverflowTabsBarProps) {
-    const { t } = useUITranslation();
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
-    const moreRef = useRef<HTMLButtonElement | null>(null);
-    // `count` leading tabs are shown. When `promote` is set, the active tab is pulled
-    // into the last slot (before More) and `count` counts the tabs shown before it.
-    const [layout, setLayout] = useState<{ count: number; promote: boolean }>({ count: tabs.length, promote: false });
-
-    const recompute = () => {
-        const container = containerRef.current;
-        if (!container) return;
-        const containerWidth = container.clientWidth;
-        const widths = tabs.map((_, i) => itemRefs.current[i]?.offsetWidth ?? 0);
-        const totalAll = widths.reduce((sum, w) => sum + w, 0) + TAB_GAP_PX * Math.max(0, tabs.length - 1);
-
-        // How many tabs (in order, optionally skipping one) fit within `available`.
-        const fitCount = (available: number, skipIndex: number) => {
-            let used = 0;
-            let count = 0;
-            for (let i = 0; i < tabs.length; i++) {
-                if (i === skipIndex) continue;
-                const cand = used + (count > 0 ? TAB_GAP_PX : 0) + widths[i];
-                if (cand > available) break;
-                used = cand;
-                count += 1;
-            }
-            return count;
-        };
-
-        let next: { count: number; promote: boolean };
-        if (totalAll <= containerWidth) {
-            next = { count: tabs.length, promote: false };
-        } else {
-            const moreWidth = moreRef.current?.offsetWidth ?? 0;
-            const naturalCount = Math.max(1, fitCount(containerWidth - moreWidth - TAB_GAP_PX, -1));
-            const activeIndex = tabs.findIndex((tab) => tab.name === current);
-            if (activeIndex < 0 || activeIndex < naturalCount) {
-                next = { count: naturalCount, promote: false };
-            } else {
-                // Active tab overflowed: reserve its slot at the end, fit leading tabs before it.
-                const leadAvailable = containerWidth - moreWidth - widths[activeIndex] - TAB_GAP_PX * 2;
-                next = { count: fitCount(leadAvailable, activeIndex), promote: true };
-            }
-        }
-        setLayout((prev) => (prev.count === next.count && prev.promote === next.promote ? prev : next));
-    };
-
-    // Re-measure after every render (tab/label changes) and on container resize.
-    const recomputeRef = useRef(recompute);
-    recomputeRef.current = recompute;
-    useLayoutEffect(() => {
-        recomputeRef.current();
-    });
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container || typeof ResizeObserver === 'undefined') return;
-        const observer = new ResizeObserver(() => recomputeRef.current());
-        observer.observe(container);
-        return () => observer.disconnect();
-    }, []);
-
-    const activeIndex = tabs.findIndex((tab) => tab.name === current);
-    let visible: TabDefinition[];
-    let overflow: TabDefinition[];
-    if (layout.promote && activeIndex >= 0) {
-        // Pull the active tab into the last visible slot; the tab it displaces overflows.
-        const others = tabs.filter((_, i) => i !== activeIndex);
-        visible = [...others.slice(0, layout.count), tabs[activeIndex]];
-        overflow = others.slice(layout.count);
-    } else {
-        visible = tabs.slice(0, layout.count);
-        overflow = tabs.slice(layout.count);
-    }
-    const activeInOverflow = overflow.some((tab) => tab.name === current);
-    const moreLabel = t('agent.moreTabs');
-
-    return (
-        <div ref={containerRef} className={cn('relative', className)}>
-            {/* Hidden measurement row: all tabs + More at natural width, kept separate
-                from the visible row so measuring can't feed back into the layout. */}
-            <div aria-hidden className="pointer-events-none invisible absolute start-0 top-0 flex w-max gap-1">
-                {tabs.map((tab, i) => (
-                    <button
-                        type="button"
-                        key={tab.name}
-                        tabIndex={-1}
-                        ref={(el) => {
-                            itemRefs.current[i] = el;
-                        }}
-                        className={cn(TAB_ITEM_BASE, TAB_ITEM_INACTIVE)}
-                    >
-                        {tab.label}
-                    </button>
-                ))}
-                <button type="button" tabIndex={-1} ref={moreRef} className={cn(TAB_ITEM_BASE, TAB_ITEM_INACTIVE)}>
-                    {moreLabel}
-                    <ChevronDownIcon className="ms-1 size-4" />
-                </button>
-            </div>
-
-            {/* Visible row */}
-            <div className="-mb-px flex gap-1 overflow-hidden border-b">
-                {visible.map((tab) => {
-                    const isActive = tab.name === current;
-                    return (
-                        // Tab-bar primitive: raw button mirrors core TabsTrigger underline styling.
-                        <button
-                            type="button"
-                            key={tab.name}
-                            aria-current={isActive ? 'page' : undefined}
-                            disabled={tab.disabled}
-                            onClick={() => onTabChange(tab.name)}
-                            className={cn(
-                                TAB_ITEM_BASE,
-                                isActive ? TAB_ITEM_ACTIVE : TAB_ITEM_INACTIVE,
-                                'disabled:pointer-events-none disabled:opacity-50',
-                            )}
-                        >
-                            {tab.label}
-                        </button>
-                    );
-                })}
-
-                {overflow.length > 0 && (
-                    <OverflowMoreMenu
-                        tabs={overflow}
-                        current={current}
-                        onTabChange={onTabChange}
-                        label={moreLabel}
-                        active={activeInOverflow}
-                    />
-                )}
-            </div>
-        </div>
-    );
-}
-
 // ---------------------------------------------------------------------------
 // Right panel tabs
 // ---------------------------------------------------------------------------

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

@@ -582,6 +582,7 @@ function ArtifactsTabComponent({
                             <UniversalDocumentViewer
                                 source={previewSource}
                                 className="h-full"
+                                showHeader
                                 onDownload={() => previewPath && void handleDownload(previewPath)}
                             />
                         </React.Suspense>

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { renderWithProviders } from '../../../__tests__/test-utils.js';
-import { AskUserWidget } from './AskUserWidget';
+import { type AskUserOption, AskUserWidget } from './AskUserWidget';
 
 vi.mock('../../../widgets/markdown/MarkdownRenderer', () => ({
     MarkdownRenderer: ({ children }: { children: ReactNode }) => <>{children}</>,
@@ -17,6 +17,25 @@ function getScrollablePrompt(container: HTMLElement): HTMLElement {
 }
 
 describe('AskUserWidget', () => {
+    it('does not crash when runtime options data is not an array', () => {
+        const warn = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+
+        expect(() =>
+            renderWithProviders(
+                <AskUserWidget
+                    compact
+                    hideBorder
+                    question="Choose an option"
+                    options={'invalid options' as unknown as AskUserOption[]}
+                    allowFreeResponse
+                />,
+            ),
+        ).not.toThrow();
+
+        expect(warn).toHaveBeenCalledWith('[AskUserWidget] Invalid options received; rendering without options.');
+        warn.mockRestore();
+    });
+
     it('keeps compact prompt text in a bounded scrollable area', () => {
         const { container } = renderWithProviders(
             <AskUserWidget

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

@@ -1,4 +1,5 @@
 import { Button, cn } from '@vertesia/ui/core';
+import { Env } from '@vertesia/ui/env';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { AlertCircle, CheckCircle, HelpCircle, MessageSquare, Send, XCircle } from 'lucide-react';
 import React from 'react';
@@ -152,6 +153,21 @@ export function AskUserWidget({
 
     const styles = VARIANT_STYLES[variant];
     const DefaultIcon = VARIANT_ICONS[variant];
+    const safeOptions = Array.isArray(options) ? options : [];
+    const invalidOptionsReported = React.useRef(false);
+
+    React.useEffect(() => {
+        if (options === undefined || Array.isArray(options) || invalidOptionsReported.current) return;
+
+        invalidOptionsReported.current = true;
+        Env.logger.warn('AskUserWidget received invalid options; rendering without options', {
+            vertesia: {
+                component: 'AskUserWidget',
+                received_type: typeof options,
+            },
+        });
+        console.warn('[AskUserWidget] Invalid options received; rendering without options.');
+    }, [options]);
 
     const toggleOption = (optionId: string) => {
         setSelectedOptions((prev) => {
@@ -232,11 +248,11 @@ export function AskUserWidget({
                         </div>
                     </div>
 
-                    {options && options.length > 0 && (
+                    {safeOptions.length > 0 && (
                         <div className={cn('flex flex-col gap-1.5 px-3 pb-3 pt-0', optionsClassName)}>
                             {multiSelect ? (
                                 <>
-                                    {options.map((option) => {
+                                    {safeOptions.map((option) => {
                                         const selected = selectedOptions.has(option.id);
                                         return (
                                             <label
@@ -286,7 +302,7 @@ export function AskUserWidget({
                                     </div>
                                 </>
                             ) : (
-                                options.map((option) => (
+                                safeOptions.map((option) => (
                                     <button
                                         type="button"
                                         key={option.id}
@@ -383,12 +399,12 @@ export function AskUserWidget({
                 </div>
 
                 {/* Options */}
-                {options && options.length > 0 && (
+                {safeOptions.length > 0 && (
                     <div className={`px-4 pb-3 pt-1 ${optionsClassName || ''}`}>
                         {multiSelect ? (
                             /* Multi-select mode with checkboxes */
                             <div className="space-y-2">
-                                {options.map((option) => (
+                                {safeOptions.map((option) => (
                                     <label
                                         key={option.id}
                                         className={`flex items-start gap-3 px-4 py-3 rounded-lg cursor-pointer transition-colors
@@ -436,7 +452,7 @@ export function AskUserWidget({
                         ) : (
                             /* Single-select mode - always use full-width card layout for clarity */
                             <div className="flex flex-col gap-2 w-full">
-                                {options.map((option) => (
+                                {safeOptions.map((option) => (
                                     <Button
                                         variant="unstyled"
                                         key={option.id}