@vertesia/ui 1.4.0 → 1.5.0-dev.20260713.113008Z

package/src/core/components/SelectList.tsx

@@ -82,8 +82,13 @@ export function SelectList<T>({
                     layout = defaultOptionLayout(option, isSelected);
                 }
                 return (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
-                    <SelectListOption key={i} option={option} onSelect={onSelect} layout={layout} noCheck={noCheck} />
+                    <SelectListOption
+                        key={`option-${i}`}
+                        option={option}
+                        onSelect={onSelect}
+                        layout={layout}
+                        noCheck={noCheck}
+                    />
                 );
             })}
         </div>

package/src/core/components/TagsInput.tsx

@@ -105,6 +105,43 @@ function TagsInputContent({
         }
     }, [isOpen]);
 
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+
+        const isInsideTagsInput = (target: EventTarget | null) => {
+            return (
+                target instanceof Node &&
+                (triggerRef.current?.contains(target) === true || dropdownRef.current?.contains(target) === true)
+            );
+        };
+        const closeOnOutsidePointer = (event: PointerEvent) => {
+            if (!isInsideTagsInput(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        const closeOnOutsideFocus = (event: FocusEvent) => {
+            if (!isInsideTagsInput(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        const closeOnWindowBlur = () => {
+            setIsOpen(false);
+        };
+
+        document.addEventListener('pointerdown', closeOnOutsidePointer, true);
+        document.addEventListener('focusin', closeOnOutsideFocus, true);
+        window.addEventListener('blur', closeOnWindowBlur);
+        document.addEventListener('visibilitychange', closeOnWindowBlur);
+        return () => {
+            document.removeEventListener('pointerdown', closeOnOutsidePointer, true);
+            document.removeEventListener('focusin', closeOnOutsideFocus, true);
+            window.removeEventListener('blur', closeOnWindowBlur);
+            document.removeEventListener('visibilitychange', closeOnWindowBlur);
+        };
+    }, [isOpen, setIsOpen]);
+
     const handleSelect = (option: string) => {
         onChange([...value, option]);
         setSearchTerm('');
@@ -241,7 +278,7 @@ function TagsInputContent({
                                 <span
                                     key={item}
                                     className={clsx(
-                                        'inline-flex items-center justify-between gap-2 px-2 py-1 text-sm bg-primary/10 text-primary rounded-md w-full transition-all',
+                                        'inline-flex items-center justify-between gap-2 px-2 py-1 text-sm bg-primary/20 text-foreground ring-1 ring-primary/30 rounded-md w-full transition-all',
                                         pendingDeleteIndex === index &&
                                             'ring-2 ring-red-300 shadow-[0_0_8px_rgba(252,165,165,0.5)]',
                                     )}
@@ -251,7 +288,7 @@ function TagsInputContent({
                                         type="button"
                                         onClick={(e) => handleRemove(item, e)}
                                         disabled={disabled}
-                                        className="hover:bg-primary/20 rounded-sm transition-colors flex-shrink-0"
+                                        className="hover:bg-primary/30 rounded-sm transition-colors flex-shrink-0"
                                     >
                                         <X className="h-3 w-3" />
                                     </button>
@@ -266,7 +303,7 @@ function TagsInputContent({
                             <span
                                 key={item}
                                 className={clsx(
-                                    'inline-flex items-center gap-1 px-2 py-1 text-sm bg-primary/10 text-primary rounded-md transition-all',
+                                    'inline-flex items-center gap-1 px-2 py-1 text-sm bg-primary/20 text-foreground ring-1 ring-primary/30 rounded-md transition-all',
                                     pendingDeleteIndex === index &&
                                         'ring-2 ring-red-300 shadow-[0_0_8px_rgba(252,165,165,0.5)]',
                                 )}
@@ -276,7 +313,7 @@ function TagsInputContent({
                                     type="button"
                                     onClick={(e) => handleRemove(item, e)}
                                     disabled={disabled}
-                                    className="hover:bg-primary/20 rounded-sm transition-colors"
+                                    className="hover:bg-primary/30 rounded-sm transition-colors"
                                 >
                                     <X className="h-3 w-3" />
                                 </button>

package/src/core/components/popup/Popup.tsx

@@ -116,9 +116,9 @@ export interface PopupProps extends Omit<DOMPopupProps, 'anchor' | 'root'> {
     root?: React.RefObject<HTMLElement | null | undefined>;
 }
 export function Popup({ anchor, root, children, ...others }: PopupProps) {
-    return anchor.current && (!root || root.current) ? (
-        // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
-        <DOMPopup anchor={anchor.current!} root={root?.current || undefined} {...others}>
+    const anchorEl = anchor.current;
+    return anchorEl && (!root || root.current) ? (
+        <DOMPopup anchor={anchorEl} root={root?.current || undefined} {...others}>
             {children}
         </DOMPopup>
     ) : null;

package/src/core/components/popup/position.ts

@@ -209,13 +209,10 @@ class PositionResolver {
         }
         const constrainWidth = this.width != null;
         const constrainHeight = this.height != null;
-        // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
-        const width = constrainWidth ? this.width! : elemRect.width;
-        // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
-        const height = constrainHeight ? this.height! : elemRect.height;
+        const width = this.width ?? elemRect.width;
+        const height = this.height ?? elemRect.height;
         return {
-            // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
-            rect: new DOMRect(this.left!, this.top!, width, height),
+            rect: new DOMRect(this.left ?? 0, this.top ?? 0, width, height),
             constrainWidth,
             constrainHeight,
             position: constraints.position,

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

@@ -14,6 +14,7 @@ const badgeVariants = cva('inline-flex items-center rounded-md px-2 py-1 text-xs
             success: 'bg-success text-success',
             info: 'bg-info text-info',
             done: 'bg-done text-done',
+            outline: 'bg-transparent border border-border text-foreground',
         },
     },
     defaultVariants: {
@@ -49,6 +50,7 @@ const dotBadgeVariants = cva(
                 attention: '',
                 done: '',
                 info: '',
+                outline: '',
             },
         },
         defaultVariants: {
@@ -67,6 +69,7 @@ const dotVariants = cva('h-1.5 w-1.5', {
             attention: 'fill-attention',
             done: 'fill-done',
             info: 'fill-info',
+            outline: 'fill-foreground',
         },
     },
     defaultVariants: {

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

@@ -47,8 +47,7 @@ export function Breadcrumbs({ path, maxItems = 3, className, separator }: Breadc
             <Breadcrumb className={cn('w-full flex items-center', className)}>
                 <BreadcrumbList>
                     {items.map((item, index) => (
-                        // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
-                        <React.Fragment key={index}>
+                        <React.Fragment key={`crumb-${index}`}>
                             <BreadcrumbItem>{renderBreadcrumbItem(item)}</BreadcrumbItem>
                             {index < items.length - 1 && (
                                 <BreadcrumbSeparator>
@@ -73,8 +72,7 @@ export function Breadcrumbs({ path, maxItems = 3, className, separator }: Breadc
                 <BreadcrumbSeparator>{separator ?? <ChevronRight className="cn-rtl-flip" />}</BreadcrumbSeparator>
 
                 {lastThreeItems.map((item, index) => (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
-                    <React.Fragment key={index}>
+                    <React.Fragment key={`crumb-${index}`}>
                         <BreadcrumbItem>{renderBreadcrumbItem(item)}</BreadcrumbItem>
                         {index < lastThreeItems.length - 1 && (
                             <BreadcrumbSeparator>

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

@@ -227,10 +227,9 @@ const FilterBtn = ({ className }: { className?: string }) => {
             return <CommandEmpty>{t('filter.noAvailableFilters')}</CommandEmpty>;
         }
 
-        return options.map((group: FilterGroup, index: number) => (
+        return options.map((group: FilterGroup) => (
             <CommandItem
-                // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
-                key={index}
+                key={group.name}
                 onSelect={() => handleSelect(group.name)}
                 className="group flex gap-2 items-center hover:bg-muted"
             >

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

@@ -0,0 +1,77 @@
+import { render } from '@testing-library/react';
+import type React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+// Capture the props the wrapper forwards to the underlying react-resizable-panels
+// primitive, and stub out its layout machinery so the assertions run in jsdom.
+const mocks = vi.hoisted(() => ({ panelProps: vi.fn() }));
+
+vi.mock('react-resizable-panels', () => ({
+    Group: ({ children }: { children?: React.ReactNode }) => <div data-testid="group">{children}</div>,
+    Panel: (props: Record<string, unknown>) => {
+        mocks.panelProps(props);
+        return <div data-testid="panel" />;
+    },
+    Separator: ({ children }: { children?: React.ReactNode }) => <div data-testid="separator">{children}</div>,
+}));
+
+import { ResizablePanel, ResizablePanelGroup } from './resizeable';
+
+function forwardedPanelProps() {
+    return mocks.panelProps.mock.calls[0]?.[0] as Record<string, unknown>;
+}
+
+describe('ResizablePanel size coercion', () => {
+    beforeEach(() => {
+        mocks.panelProps.mockClear();
+    });
+
+    // Regression guard for the react-resizable-panels v3 -> v4 upgrade: v4 treats bare
+    // numeric sizes as PIXELS (v3 and below treated them as percentages). Every call site
+    // passes percentage-intended numbers, so the wrapper must re-add the "%" unit — without
+    // it, panels get clamped to a few pixels and the split can no longer be resized.
+    it('coerces bare numeric sizes to percentage strings', () => {
+        render(
+            <ResizablePanelGroup direction="horizontal">
+                <ResizablePanel defaultSize={50} minSize={20} maxSize={80} collapsedSize={5} />
+            </ResizablePanelGroup>,
+        );
+
+        expect(mocks.panelProps).toHaveBeenCalledTimes(1);
+        expect(forwardedPanelProps()).toMatchObject({
+            defaultSize: '50%',
+            minSize: '20%',
+            maxSize: '80%',
+            collapsedSize: '5%',
+        });
+    });
+
+    it('passes explicit unit strings through unchanged', () => {
+        render(
+            <ResizablePanelGroup direction="horizontal">
+                <ResizablePanel defaultSize="300px" minSize="10rem" maxSize="50%" />
+            </ResizablePanelGroup>,
+        );
+
+        expect(mocks.panelProps).toHaveBeenCalledTimes(1);
+        expect(forwardedPanelProps()).toMatchObject({
+            defaultSize: '300px',
+            minSize: '10rem',
+            maxSize: '50%',
+        });
+    });
+
+    it('leaves unspecified sizes undefined', () => {
+        render(
+            <ResizablePanelGroup direction="horizontal">
+                <ResizablePanel />
+            </ResizablePanelGroup>,
+        );
+
+        expect(mocks.panelProps).toHaveBeenCalledTimes(1);
+        const props = forwardedPanelProps();
+        expect(props.defaultSize).toBeUndefined();
+        expect(props.minSize).toBeUndefined();
+        expect(props.maxSize).toBeUndefined();
+    });
+});

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

@@ -23,8 +23,34 @@ function ResizablePanelGroup({ className, direction = 'horizontal', orientation,
     );
 }
 
-function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-    return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+/**
+ * react-resizable-panels v4 treats bare numeric sizes as **pixels**; earlier majors
+ * (v3 and below) treated them as **percentages** of the group. Every call site in this
+ * codebase passes percentage-intended numbers (e.g. `defaultSize={50}`), so coerce bare
+ * numbers to percentage strings to preserve that contract after the v3→v4 upgrade.
+ * Explicit unit strings ("300px", "50%", "10rem", ...) are passed through untouched.
+ */
+function toPercentSize(value: number | string | undefined): number | string | undefined {
+    return typeof value === 'number' ? `${value}%` : value;
+}
+
+function ResizablePanel({
+    defaultSize,
+    minSize,
+    maxSize,
+    collapsedSize,
+    ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+    return (
+        <ResizablePrimitive.Panel
+            data-slot="resizable-panel"
+            defaultSize={toPercentSize(defaultSize)}
+            minSize={toPercentSize(minSize)}
+            maxSize={toPercentSize(maxSize)}
+            collapsedSize={toPercentSize(collapsedSize)}
+            {...props}
+        />
+    );
 }
 
 function ResizableHandle({

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

@@ -11,6 +11,12 @@ import { VTooltip } from './tooltip';
 export interface SelectBoxBaseProps<T> {
     options: T[] | undefined;
     optionLabel?: (option: T) => React.ReactNode;
+    /**
+     * Optional grouping. Returns the group heading for an option; options that return the same
+     * heading are rendered together beneath it. Groups appear in order of first occurrence in
+     * `options`, so the caller controls group order by ordering the options accordingly.
+     */
+    groupBy?: (option: T) => string;
     onBlur?: () => void;
     onKeyDown?: (e: React.KeyboardEvent, isOpen: boolean) => void;
     label?: string;
@@ -62,6 +68,7 @@ type SelectBoxProps<T> = SelectBoxSingleProps<T> | SelectBoxMultipleProps<T>;
 export function SelectBox<T = unknown>({
     options,
     optionLabel,
+    groupBy,
     value,
     onChange,
     addNew,
@@ -214,8 +221,10 @@ export function SelectBox<T = unknown>({
         return (
             <div className="flex flex-wrap gap-1">
                 {arrayValue.slice(0, 1).map((item, index) => (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
-                    <span key={index} className="inline-flex items-center gap-1 px-2 py-1 text-xs bg-muted rounded">
+                    <span
+                        key={`chip-${index}`}
+                        className="inline-flex items-center gap-1 px-2 py-1 text-xs bg-muted rounded"
+                    >
                         {optionLabel ? optionLabel(item) : (item as string)}
                     </span>
                 ))}
@@ -228,6 +237,52 @@ export function SelectBox<T = unknown>({
         );
     };
 
+    const renderOption = (opt: T, key: React.Key) => {
+        const isSelected = multiple
+            ? isOptionSelected(opt, Array.isArray(value) ? value : [])
+            : value != null
+              ? isOptionsEqual(value as T, opt)
+              : false;
+
+        return (
+            <CommandItem key={`option-${key}`} onSelect={() => _onClick(opt)} className="w-full">
+                {multiple || inline ? (
+                    <div className="w-full flex justify-between items-center cursor-pointer">
+                        <div className="w-full truncate text-start">
+                            {optionLabel ? optionLabel(opt) : (opt as string)}
+                        </div>
+                        {isSelected && <Check className="size-4" />}
+                    </div>
+                ) : (
+                    <PopoverClose className="w-full flex justify-between items-center">
+                        <div className="w-full truncate text-start">
+                            {optionLabel ? optionLabel(opt) : (opt as string)}
+                        </div>
+                        {isSelected && <Check className="size-4" />}
+                    </PopoverClose>
+                )}
+            </CommandItem>
+        );
+    };
+
+    // Group filtered options by `groupBy`, preserving first-occurrence order of groups.
+    const groupedOptions = (() => {
+        if (!groupBy) return null;
+        const groups: { key: string; items: T[] }[] = [];
+        const byKey = new Map<string, T[]>();
+        for (const opt of filteredOptions) {
+            const key = groupBy(opt);
+            let bucket = byKey.get(key);
+            if (!bucket) {
+                bucket = [];
+                byKey.set(key, bucket);
+                groups.push({ key, items: bucket });
+            }
+            bucket.push(opt);
+        }
+        return groups;
+    })();
+
     // Render the options list content
     const renderOptionsContent = () => (
         <>
@@ -253,40 +308,19 @@ export function SelectBox<T = unknown>({
                     }}
                 >
                     <CommandEmpty>No result found.</CommandEmpty>
-                    <CommandGroup>
-                        {filteredOptions?.map((opt, index) => {
-                            const isSelected = multiple
-                                ? isOptionSelected(opt, Array.isArray(value) ? value : [])
-                                : value != null
-                                  ? isOptionsEqual(value as T, opt)
-                                  : false;
-
-                            return (
-                                <CommandItem
-                                    // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
-                                    key={index}
-                                    onSelect={() => _onClick(opt)}
-                                    className="w-full"
-                                >
-                                    {multiple || inline ? (
-                                        <div className="w-full flex justify-between items-center cursor-pointer">
-                                            <div className="w-full truncate text-start">
-                                                {optionLabel ? optionLabel(opt) : (opt as string)}
-                                            </div>
-                                            {isSelected && <Check className="size-4" />}
-                                        </div>
-                                    ) : (
-                                        <PopoverClose className="w-full flex justify-between items-center">
-                                            <div className="w-full truncate text-start">
-                                                {optionLabel ? optionLabel(opt) : (opt as string)}
-                                            </div>
-                                            {isSelected && <Check className="size-4" />}
-                                        </PopoverClose>
-                                    )}
-                                </CommandItem>
-                            );
-                        })}
-                    </CommandGroup>
+                    {groupedOptions ? (
+                        groupedOptions.map((group) => (
+                            <CommandGroup
+                                key={group.key}
+                                heading={group.key}
+                                className="[&_[cmdk-group-heading]]:text-muted [&_[cmdk-group-heading]]:border-b [&_[cmdk-group-heading]]:border-border [&_[cmdk-group-heading]]:ml-[-0.5rem] [&_[cmdk-group-heading]]:text-xs"
+                            >
+                                {group.items.map((opt, index) => renderOption(opt, `${group.key}-${index}`))}
+                            </CommandGroup>
+                        ))
+                    ) : (
+                        <CommandGroup>{filteredOptions?.map((opt, index) => renderOption(opt, index))}</CommandGroup>
+                    )}
                 </CommandList>
             </Command>
             {addNew && (

package/src/core/components/table/index.tsx

@@ -33,8 +33,7 @@ export function RowSkeleton({ columns }: { columns: number }) {
             {Array(columns)
                 .fill(0)
                 .map((_, index) => (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
-                    <td key={index}>
+                    <td key={`skeleton-cell-${index}`}>
                         <div className="animate-pulse rounded-xs h-5 bg-muted"></div>
                     </td>
                 ))}

package/src/core/hooks/useIntersectionObserver.tsx

@@ -45,5 +45,7 @@ export function useIntersectionObserver(
                 observer.unobserve(element);
             }
         };
-    }, [target, threshold]);
+        // opts.deps let callers re-attach the observer once the target element mounts
+        // (e.g. an infinite-scroll sentinel that renders only after the first page loads).
+    }, [target, threshold, ...(opts.deps ?? [])]);
 }

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

@@ -226,6 +226,7 @@ function WorkstreamsTab({ workstreams, messages, runId }: WorkstreamsTabProps) {
                         ws.deadline_ms > 0 ? Math.min(100, Math.round((ws.elapsed_ms / ws.deadline_ms) * 100)) : 0;
                     const browserUse = browserUseByWorkstream.get(ws.workstream_id);
                     const hasDeadline = ws.deadline_ms > 0;
+                    const childRunId = ws.child_workflow_run_id;
                     const meta = [
                         ws.phase ? formatWorkstreamName(ws.phase) : undefined,
                         elapsed > 0 ? t('agent.elapsed', { seconds: elapsed }) : undefined,
@@ -313,14 +314,13 @@ function WorkstreamsTab({ workstreams, messages, runId }: WorkstreamsTabProps) {
                                             </RightPanelErrorBoundary>
                                         )}
 
-                                        {ws.child_workflow_run_id && (
+                                        {childRunId && (
                                             <div className="mt-2 flex flex-wrap gap-1">
                                                 <Button
                                                     variant="ghost"
                                                     size="sm"
                                                     className="h-7 px-2 text-xs text-muted hover:text-foreground"
-                                                    // biome-ignore lint/style/noNonNullAssertion: TS can't prove narrowing here.
-                                                    onClick={() => copyRunId(ws.child_workflow_run_id!)}
+                                                    onClick={() => copyRunId(childRunId)}
                                                 >
                                                     <ClipboardCopyIcon className="size-3 me-1" />
                                                     {t('agent.copyRunId')}
@@ -329,8 +329,7 @@ function WorkstreamsTab({ workstreams, messages, runId }: WorkstreamsTabProps) {
                                                     variant="ghost"
                                                     size="sm"
                                                     className="h-7 px-2 text-xs text-muted hover:text-foreground"
-                                                    // biome-ignore lint/style/noNonNullAssertion: TS can't prove narrowing here.
-                                                    onClick={() => downloadConversation(ws.child_workflow_run_id!)}
+                                                    onClick={() => downloadConversation(childRunId)}
                                                 >
                                                     <DownloadCloudIcon className="size-3 me-1" />
                                                     {t('agent.download')}
@@ -537,7 +536,7 @@ function OverflowTabsBar({ tabs, current, onTabChange, className }: OverflowTabs
         <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 left-0 top-0 flex w-max gap-1">
+            <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"

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

@@ -393,8 +393,7 @@ export function WavyThinking({ className, color = 'blue', size = 'md' }: WavyThi
         >
             {barHeights.map((height, i) => (
                 <div
-                    // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length array of 7 visual bars never re-orders
-                    key={i}
+                    key={`bar-${i}`}
                     className={cn(sizeClasses[size].barWidth, 'rounded-full transform-gpu', colorClasses[color])}
                     style={{
                         height: `${height}%`,

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

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../../__tests__/test-utils.js';
+import { AskUserWidget } from './AskUserWidget';
+
+vi.mock('../../../widgets/markdown/MarkdownRenderer', () => ({
+    MarkdownRenderer: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
+function getScrollablePrompt(container: HTMLElement): HTMLElement {
+    const question = container.querySelector('.agent-ask-question');
+    const scrollable = question?.parentElement;
+    if (!scrollable) {
+        throw new Error('Expected ask user question to be wrapped in a scrollable prompt container');
+    }
+    return scrollable;
+}
+
+describe('AskUserWidget', () => {
+    it('keeps compact prompt text in a bounded scrollable area', () => {
+        const { container } = renderWithProviders(
+            <AskUserWidget
+                compact
+                hideBorder
+                question={'Long prompt\n\n'.repeat(80)}
+                allowFreeResponse
+                submitLabel="Send"
+            />,
+        );
+
+        const scrollable = getScrollablePrompt(container);
+
+        expect(scrollable.className).toContain('max-h-80');
+        expect(scrollable.className).toContain('overflow-y-auto');
+        expect(scrollable.className).toContain('overscroll-contain');
+    });
+
+    it('keeps default prompt text in a bounded scrollable area', () => {
+        const { container } = renderWithProviders(
+            <AskUserWidget question={'Long prompt\n\n'.repeat(80)} allowFreeResponse submitLabel="Send" />,
+        );
+
+        const scrollable = getScrollablePrompt(container);
+
+        expect(scrollable.className).toContain('max-h-80');
+        expect(scrollable.className).toContain('overflow-y-auto');
+        expect(scrollable.className).toContain('overscroll-contain');
+    });
+});