@vertesia/ui 1.4.0-dev.20260629.130134Z → 1.4.1

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

@@ -23,6 +23,22 @@ function useDeprecationWarning(propName: string, isUsed: boolean, message: strin
     }, [isUsed, message, propName]);
 }
 
+// Does this subtree contribute any text to the accessible name? Used to decide whether `title`
+// may supply that name. Icons (lucide elements) have no string children and return false, and
+// `aria-hidden` subtrees are skipped because they are excluded from the name computation.
+function hasVisibleText(node: React.ReactNode): boolean {
+    return React.Children.toArray(node).some((child) => {
+        if (typeof child === 'string') return child.trim().length > 0;
+        if (typeof child === 'number') return true;
+        if (React.isValidElement(child)) {
+            const props = child.props as { children?: React.ReactNode; 'aria-hidden'?: boolean | string };
+            if (props['aria-hidden'] === true || props['aria-hidden'] === 'true') return false;
+            return hasVisibleText(props.children);
+        }
+        return false;
+    });
+}
+
 const buttonVariants = cva(
     'hover:cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     {
@@ -60,35 +76,66 @@ export interface ButtonProps
         VariantProps<typeof buttonVariants> {
     asChild?: boolean;
     /**
-     * @deprecated Use `aria-label` for the accessible name and wrap in `<VTooltip>` for a visual tooltip.
-     * For backward compatibility, `alt` is forwarded to `aria-label` (when not set) AND still
-     * triggers the legacy VTooltip wrap. Slated for removal in the next major.
+     * @deprecated Use `title` instead. `alt` drives the same tooltip but, unlike `title`, it
+     * overrides the accessible name even when the button shows a text label — which usually
+     * violates WCAG 2.5.3 (Label in Name). That legacy behavior is preserved so existing call
+     * sites keep announcing what they always did. Slated for removal in the next major.
      */
     alt?: string;
+    /**
+     * Tooltip text. Renders a `<VTooltip>` around the button and doubles as the accessible name,
+     * so icon-only buttons need nothing else. Pass `aria-label` to override the name independently.
+     */
     title?: string;
+    /** Which side the `title` tooltip opens on. Defaults to `top`. */
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
     isDisabled?: boolean;
     isLoading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     (
-        { className, variant, size, asChild = false, alt, isDisabled, isLoading, title, onClick, type, ...props },
+        {
+            className,
+            variant,
+            size,
+            asChild = false,
+            alt,
+            isDisabled,
+            isLoading,
+            title,
+            tooltipPlacement = 'top',
+            onClick,
+            type,
+            ...props
+        },
         ref,
     ) => {
         useDeprecationWarning(
             'Button.alt',
             alt !== undefined,
-            'use aria-label for the accessible name and wrap in <VTooltip> for a visual tooltip. ' +
-                '`alt` is forwarded to both for one release.',
+            'use `title` instead — it drives the same tooltip and the accessible name. ' +
+                '`alt` remains an alias for one release.',
         );
 
         const Comp = asChild ? Slot : 'button';
         // Default type="button" only when rendering an actual <button>. With asChild,
         // the rendered element may be an <a> or other tag where injecting `type` is wrong.
         const resolvedType = asChild ? type : (type ?? 'button');
-        // Back-fill aria-label from alt during the deprecation window so existing call
-        // sites keep their accessible name without code changes.
-        const ariaLabel = props['aria-label'] ?? alt;
+        // `title` (or its deprecated alias `alt`) drives the VTooltip below. `title` also back-fills
+        // the accessible name, so an icon-only <Button title="Refresh"> is labelled without any
+        // extra props or a manual <VTooltip> wrap at the call site.
+        //
+        // That back-fill is skipped when the button already shows text: turning
+        // <Button title="Show only installed apps">Installed</Button> into aria-label="Show only
+        // installed apps" would replace the visible name with the tooltip, which breaks WCAG 2.5.3
+        // (Label in Name) and makes the control unreachable by the label users actually see.
+        //
+        // `alt` deliberately does NOT get that treatment: it has always overridden the name
+        // unconditionally, and callers rely on that. Preserving it keeps every existing call site
+        // announcing exactly what it announced before, and confines the new rule to `title`.
+        const tooltip = title ?? alt;
+        const ariaLabel = props['aria-label'] ?? alt ?? (hasVisibleText(props.children) ? undefined : title);
 
         // asChild renders via Radix Slot, which requires exactly one React child.
         // Skip the loader wrap in that case — Slot would reject the multi-child array.
@@ -116,9 +163,18 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             </Comp>
         );
 
-        if (alt || title) {
+        // Note: the native `title` attribute is deliberately NOT forwarded to the DOM — it would
+        // stack a second, delayed browser tooltip on top of the VTooltip. `aria-label` above is
+        // what exposes the text to screen readers and to getByRole('button', { name }).
+        if (tooltip) {
             return (
-                <VTooltip description={alt || title} asChild className="cursor-pointer" size="xs" placement="top">
+                <VTooltip
+                    description={tooltip}
+                    asChild
+                    className="cursor-pointer"
+                    size="xs"
+                    placement={tooltipPlacement}
+                >
                     {buttonElement}
                 </VTooltip>
             );
@@ -190,7 +246,6 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
                 size={size || 'sm'}
                 onClick={handleCopy}
                 {...props}
-                aria-label={label}
                 title={label}
             >
                 {isCopied ? <Check className="text-success" /> : <CopyIcon className="size-4" />}

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

@@ -88,7 +88,7 @@ export function Modal({
                             <DialogClose onClick={() => handleOpenChange(false)} asChild autoFocus={false}>
                                 <Button
                                     variant="outline"
-                                    alt="Close"
+                                    title="Close"
                                     className="data-[state=open]:bg-accent opacity-70 hover:opacity-100 rounded-sm focus:outline-none focus:ring-2 focus:ring-ring ring-offset-background focus:ring-offset-2 data-[state=open]:text-muted-foreground transition-opacity disabled:pointer-events-none"
                                 >
                                     <X className="size-4" />

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/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/components/shadcn/theme/ThemeSwitcher.tsx

@@ -17,7 +17,7 @@ export function ModeOption({ option, current, setTheme, icon, alt }: ModeOptionP
             variant={current === option ? 'secondary' : 'outline'}
             size="sm"
             onClick={() => setTheme(option)}
-            alt={alt}
+            title={alt}
         >
             {icon}
         </Button>

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/AgentChatPlaybackControls.tsx

@@ -108,7 +108,6 @@ export function AgentChatPlaybackControls({
                     type="button"
                     variant="ghost"
                     size="icon"
-                    aria-label={t('agent.rewind.jumpToStart')}
                     title={t('agent.rewind.jumpToStart')}
                     disabled={!canJumpToStart}
                     onClick={jumpToStart}
@@ -120,7 +119,6 @@ export function AgentChatPlaybackControls({
                     type="button"
                     variant="ghost"
                     size="icon"
-                    aria-label={t('agent.rewind.previousMessage')}
                     title={t('agent.rewind.previousMessage')}
                     disabled={!canStepPrevious}
                     onClick={setPreviousMessage}
@@ -165,7 +163,6 @@ export function AgentChatPlaybackControls({
                     type="button"
                     variant="ghost"
                     size="icon"
-                    aria-label={t('agent.rewind.nextMessage')}
                     title={t('agent.rewind.nextMessage')}
                     disabled={!canStepNext}
                     onClick={setNextMessage}
@@ -177,7 +174,6 @@ export function AgentChatPlaybackControls({
                     type="button"
                     variant="ghost"
                     size="icon"
-                    aria-label={t('agent.rewind.jumpToLatest')}
                     title={t('agent.rewind.jumpToLatest')}
                     disabled={!canJumpToLatest}
                     onClick={jumpToLatest}
@@ -189,7 +185,6 @@ export function AgentChatPlaybackControls({
                     type="button"
                     variant={isLive ? 'secondary' : 'ghost'}
                     size="icon"
-                    aria-label={t('agent.rewind.jumpToLive')}
                     title={t('agent.rewind.jumpToLive')}
                     disabled={isLive}
                     onClick={() => onChangeCursor('live')}

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

@@ -110,6 +110,37 @@ describe('AgentRequestInputOverlay', () => {
         });
     });
 
+    it('sends a tool approval option with structured metadata', () => {
+        const onSendMessage = vi.fn();
+
+        renderWithProviders(
+            <AgentRequestInputOverlay message={createToolApprovalRequestMessage()} onSendMessage={onSendMessage} />,
+        );
+
+        fireEvent.click(screen.getByRole('button', { name: 'Allow this action for this run' }));
+
+        expect(onSendMessage).toHaveBeenCalledTimes(1);
+        expect(onSendMessage).toHaveBeenCalledWith('allow_for_run', {
+            tool_approval_response: {
+                decision: 'allow_for_run',
+                approval_key: 'write_artifact:name:quotes.md',
+            },
+        });
+    });
+
+    it('sends a bare option id for prompts that are not tool approvals', () => {
+        const onSendMessage = vi.fn();
+        const message = createToolApprovalRequestMessage();
+        delete (message.details as Record<string, unknown>).tool_approval;
+
+        renderWithProviders(<AgentRequestInputOverlay message={message} onSendMessage={onSendMessage} />);
+
+        fireEvent.click(screen.getByRole('button', { name: 'Allow once' }));
+
+        expect(onSendMessage).toHaveBeenCalledTimes(1);
+        expect(onSendMessage).toHaveBeenCalledWith('allow_once');
+    });
+
     it('renders legacy field-prefixed tool approval prompts with a friendly target', () => {
         const message = createToolApprovalRequestMessage();
         message.message = 'Approve Write Artifact: name quotes.md?';

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

@@ -5,7 +5,11 @@ import { useUserSession } from '@vertesia/ui/session';
 import { XIcon } from 'lucide-react';
 import { RemoteMcpConnectionButton } from '../../oauth/RemoteMcpConnectionButton.js';
 import { AskUserWidget } from './AskUserWidget';
-import { getRequestInputDisplayText, type RequestInputMessageWithUx } from './ModernAgentOutput/requestInputMessages';
+import {
+    getRequestInputDisplayText,
+    getToolApprovalResponseMetadata,
+    type RequestInputMessageWithUx,
+} from './ModernAgentOutput/requestInputMessages';
 
 export interface AgentRequestInputOverlayProps {
     message?: RequestInputMessageWithUx;
@@ -118,7 +122,7 @@ export function AgentRequestInputOverlay({
                     allowFreeResponse={options.length === 0 || !!freeResponse}
                     placeholder={freeResponse?.placeholder}
                     submitLabel={freeResponse?.submit_label}
-                    onSelect={send}
+                    onSelect={(optionId) => send(optionId, getToolApprovalResponseMetadata(message, optionId))}
                     onMultiSelect={(optionIds) => send(optionIds.join(', '))}
                     onSubmit={(value) => send(value, freeResponse?.metadata)}
                     hideBorder

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

@@ -537,7 +537,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/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');
+    });
+});