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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.5.0-dev.20260717.131047Z",
+  "version": "1.5.0-dev.20260722.120446Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -21,27 +21,27 @@
     "hooks"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.7.6",
-    "@floating-ui/react": "^0.27.19",
+    "@floating-ui/dom": "^1.8.0",
+    "@floating-ui/react": "^0.27.20",
     "@monaco-editor/react": "^4.7.0",
-    "@radix-ui/react-checkbox": "^1.3.6",
-    "@radix-ui/react-collapsible": "^1.1.15",
-    "@radix-ui/react-dialog": "^1.1.18",
+    "@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.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.19",
+    "@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.11",
+    "@radix-ui/react-focus-scope": "^1.1.12",
     "@radix-ui/react-label": "^2.1.11",
-    "@radix-ui/react-popover": "^1.1.18",
+    "@radix-ui/react-popover": "^1.1.19",
     "@radix-ui/react-portal": "^1.1.13",
-    "@radix-ui/react-radio-group": "^1.4.2",
+    "@radix-ui/react-radio-group": "^1.4.3",
     "@radix-ui/react-separator": "^1.1.11",
-    "@radix-ui/react-slider": "^1.4.2",
+    "@radix-ui/react-slider": "^1.4.3",
     "@radix-ui/react-slot": "^1.3.0",
-    "@radix-ui/react-switch": "^1.3.2",
-    "@radix-ui/react-tabs": "^1.1.16",
-    "@radix-ui/react-tooltip": "^1.2.11",
+    "@radix-ui/react-switch": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.1.17",
+    "@radix-ui/react-tooltip": "^1.2.12",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
     "aria-hidden": "^1.2.6",
@@ -50,16 +50,16 @@
     "cmdk": "^1.1.1",
     "dayjs": "^1.11.21",
     "debounce": "^3.0.0",
-    "dompurify": "^3.4.11",
-    "fast-xml-parser": "^5.9.3",
-    "fast-xml-validator": "^1.1.1",
-    "firebase": "^12.15.0",
+    "dompurify": "^3.4.12",
+    "fast-xml-parser": "^5.10.1",
+    "fast-xml-validator": "^1.2.0",
+    "firebase": "^12.16.0",
     "framer-motion": "^12.42.2",
-    "i18next": "^26.3.4",
+    "i18next": "^26.3.6",
     "jwt-decode": "^4.0.0",
     "katex": "^0.17.0",
     "lodash-es": "^4.18.1",
-    "lucide-react": "^1.23.0",
+    "lucide-react": "^1.24.0",
     "mermaid": "^11.16.0",
     "monaco-editor": "^0.55.1",
     "motion": "^12.42.2",
@@ -69,12 +69,12 @@
     "react-date-picker": "^12.0.2",
     "react-dom": "19.2.7",
     "react-error-boundary": "^6.1.2",
-    "react-i18next": "^17.0.8",
+    "react-i18next": "^17.0.9",
     "react-markdown": "^10.1.0",
     "react-pdf": "^10.4.1",
     "react-remove-scroll": "^2.7.2",
     "react-remove-scroll-bar": "^2.3.8",
-    "react-resizable-panels": "^4.12.1",
+    "react-resizable-panels": "^4.12.2",
     "react-style-singleton": "^2.2.3",
     "react-vega": "^8.0.0",
     "rehype-katex": "^7.0.1",
@@ -90,17 +90,17 @@
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.3",
-    "@vertesia/client": "1.5.0-dev.20260717.131047Z",
-    "@vertesia/common": "1.5.0-dev.20260717.131047Z",
-    "@vertesia/fusion-ux": "1.5.0-dev.20260717.131047Z",
-    "@vertesia/json": "1.5.0-dev.20260717.131047Z"
+    "@vertesia/client": "1.5.0-dev.20260722.120446Z",
+    "@vertesia/json": "1.5.0-dev.20260722.120446Z",
+    "@vertesia/fusion-ux": "1.5.0-dev.20260722.120446Z",
+    "@vertesia/common": "1.5.0-dev.20260722.120446Z"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/hast": "^3.0.4",
+    "@types/hast": "^3.0.5",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.13.2",
+    "@types/node": "^24.13.3",
     "@types/papaparse": "^5.5.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
@@ -108,9 +108,9 @@
     "culori": "^4.0.2",
     "i18next-cli": "^1.65.0",
     "jsdom": "^29.1.1",
-    "rolldown": "1.1.4",
+    "rolldown": "1.1.5",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.9",
+    "vitest": "^4.1.10",
     "vitest-axe": "^0.1.0",
     "wcag-contrast": "^3.0.0",
     "@vertesia/tsconfig": "0.1.0"
@@ -180,7 +180,7 @@
     "url": "https://github.com/vertesia/composableai.git",
     "directory": "packages/ui"
   },
-  "gitHead": "8aaad228827b2927db8e6aa75b27bfac90fec36f",
+  "gitHead": "203c30e5a8ddc583ac9f1acce0f5445eb38a9551",
   "scripts": {
     "clean:lib": "rimraf ./lib ./tsconfig.tsbuildinfo",
     "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo",

package/src/__tests__/a11y.test.tsx

@@ -53,6 +53,79 @@ describe('@vertesia/ui accessibility (axe)', () => {
         expect(await axe(container)).toHaveNoViolations();
     });
 
+    it('Button.title is forwarded to aria-label so icon-only buttons are labelled', async () => {
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} title="Refresh">
+                <span aria-hidden="true">↻</span>
+            </Button>,
+        );
+        const button = container.querySelector('button');
+        expect(button?.getAttribute('aria-label')).toBe('Refresh');
+        // The native title attribute is intentionally not forwarded — it would stack a second
+        // browser tooltip on top of the VTooltip that `title` already renders.
+        expect(button?.hasAttribute('title')).toBe(false);
+        expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it('Button.title does NOT override the name of a button that shows text', async () => {
+        // WCAG 2.5.3 Label in Name: the accessible name must contain the visible label, so a
+        // tooltip must never replace it. Regression test for the Playwright failure where
+        // getByRole('button', { name: 'Installed' }) stopped matching.
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} title="Show only installed apps">
+                Installed
+            </Button>,
+        );
+        const button = container.querySelector('button');
+        expect(button?.hasAttribute('aria-label')).toBe(false);
+        expect(button?.textContent).toBe('Installed');
+        expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it('Button.title does not override a nested text label either', async () => {
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} title="Open the definition editor">
+                <span aria-hidden="true">📄</span>
+                <span>Definition</span>
+            </Button>,
+        );
+        expect(container.querySelector('button')?.hasAttribute('aria-label')).toBe(false);
+    });
+
+    it('Button.alt keeps overriding the name of a text button (legacy behavior)', async () => {
+        // Unlike `title`, the deprecated `alt` overrides the accessible name even when text is
+        // present. Call sites such as <Button alt="Launch a new agent."><Rocket/> Run</Button>
+        // depend on this, so the WCAG 2.5.3 guard must NOT apply to `alt`.
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} alt="Launch a new agent.">
+                Run
+            </Button>,
+        );
+        expect(container.querySelector('button')?.getAttribute('aria-label')).toBe('Launch a new agent.');
+    });
+
+    it('Button.tooltipPlacement does not leak onto the DOM element', async () => {
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} title="Zoom in" tooltipPlacement="bottom">
+                <span aria-hidden="true">+</span>
+            </Button>,
+        );
+        const button = container.querySelector('button');
+        expect(button?.getAttribute('aria-label')).toBe('Zoom in');
+        expect(button?.hasAttribute('tooltipPlacement')).toBe(false);
+        expect(button?.hasAttribute('tooltipplacement')).toBe(false);
+        expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it('an explicit aria-label wins over Button.title', async () => {
+        const { container } = renderWithProviders(
+            <Button onClick={() => undefined} title="Refresh" aria-label="Reload the results">
+                <span aria-hidden="true">↻</span>
+            </Button>,
+        );
+        expect(container.querySelector('button')?.getAttribute('aria-label')).toBe('Reload the results');
+    });
+
     it('CopyButton has an accessible name via internal aria-label', async () => {
         const { container } = renderWithProviders(<CopyButton content="example value" />);
         const button = container.querySelector('button');

package/src/core/components/SidePanel.tsx

@@ -149,7 +149,7 @@ export function SidePanel({
 
 function CloseButton({ onClose }: { onClose: () => void }) {
     return (
-        <Button alt="Close panel" variant="ghost" onClick={onClose}>
+        <Button title="Close panel" variant="ghost" onClick={onClose}>
             <X className="size-6" aria-hidden="true" />
         </Button>
     );

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

@@ -14,12 +14,14 @@ import {
     RefreshCwIcon,
 } from 'lucide-react';
 import React, { useCallback, useId, useMemo, useState } from 'react';
-import {
-    type UniversalDocumentSource,
-    UniversalDocumentViewer,
-} from '../../document-viewer/UniversalDocumentViewer.js';
+import type { UniversalDocumentSource } from '../../document-viewer/UniversalDocumentViewer.js';
 import { type ArtifactTreeNode, useArtifacts } from './hooks/useArtifacts.js';
 
+const UniversalDocumentViewer = React.lazy(async () => {
+    const module = await import('../../document-viewer/UniversalDocumentViewer.js');
+    return { default: module.UniversalDocumentViewer };
+});
+
 // ---------------------------------------------------------------------------
 // Tree node component
 // ---------------------------------------------------------------------------
@@ -419,11 +421,19 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
                 >
                     <ModalTitle show={false}>{previewSource.fileName}</ModalTitle>
                     <ModalBody className="h-full max-h-none p-0">
-                        <UniversalDocumentViewer
-                            source={previewSource}
-                            className="h-full"
-                            onDownload={() => previewPath && void handleDownload(previewPath)}
-                        />
+                        <React.Suspense
+                            fallback={
+                                <Center className="h-full">
+                                    <Loader2Icon className="size-6 animate-spin text-muted" />
+                                </Center>
+                            }
+                        >
+                            <UniversalDocumentViewer
+                                source={previewSource}
+                                className="h-full"
+                                onDownload={() => previewPath && void handleDownload(previewPath)}
+                            />
+                        </React.Suspense>
                     </ModalBody>
                 </Modal>
             )}

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

@@ -64,7 +64,6 @@ export function ImageLightboxProvider({ children }: ImageLightboxProviderProps)
                             className="absolute top-2 end-2 text-white bg-black/50 rounded-full p-2 hover:bg-black/70 transition-colors"
                             onClick={closeImage}
                             title={t('agent.close')}
-                            aria-label={t('agent.close')}
                         >
                             <X className="size-6" />
                         </Button>

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

@@ -1400,6 +1400,54 @@ describe('ModernAgentConversation send handling', () => {
         );
     });
 
+    it('passes approval option metadata through the request overlay signal', async () => {
+        mockStreamState({
+            messages: [
+                {
+                    ...createMessage(AgentMessageType.REQUEST_INPUT, 'Approve Write Artifact: quotes.md?'),
+                    details: {
+                        tool_approval: {
+                            tool_name: 'write_artifact',
+                            approval_key: 'write_artifact:name:quotes.md',
+                        },
+                        ux: {
+                            options: [
+                                { id: 'allow_once', label: 'Allow once' },
+                                { id: 'allow_for_run', label: 'Allow this action for this run' },
+                                { id: 'deny', label: 'Deny' },
+                            ],
+                        },
+                    },
+                },
+            ],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        renderConversation();
+
+        fireEvent.click(screen.getByRole('button', { name: 'Allow this action for this run' }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledTimes(1);
+        });
+        expect(mocks.sendSignal).toHaveBeenCalledWith(
+            'agent-run-1',
+            'UserInput',
+            expect.objectContaining({
+                message: 'allow_for_run',
+                metadata: expect.objectContaining({
+                    tool_approval_response: {
+                        decision: 'allow_for_run',
+                        approval_key: 'write_artifact:name:quotes.md',
+                    },
+                    id: expect.any(String),
+                    _messageId: expect.any(String),
+                }),
+            }),
+        );
+    });
+
     it('sends directly without restart while the run is active', async () => {
         mockStreamState({
             messages: [createMessage(AgentMessageType.ANSWER, 'still running')],

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

@@ -1110,7 +1110,6 @@ function StartWorkflowView({
                                 size="xs"
                                 variant="ghost"
                                 onClick={onClose}
-                                aria-label={t('agent.close')}
                                 title={t('agent.close')}
                                 className="text-muted hover:text-foreground"
                             >
@@ -1216,7 +1215,6 @@ function StartWorkflowView({
                                     'disabled:bg-mixer-muted/25 disabled:text-muted disabled:opacity-100',
                                 )}
                                 title={resolvedStartButtonText}
-                                aria-label={resolvedStartButtonText}
                             >
                                 {isSending ? <Spinner size="sm" /> : <ArrowUpIcon className="size-4" />}
                             </Button>

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.test.tsx

@@ -399,7 +399,12 @@ describe('AllMessagesMixed summary view', () => {
 
         fireEvent.click(screen.getByRole('button', { name: /Allow once/ }));
 
-        expect(onSendMessage).toHaveBeenCalledWith('allow_once');
+        expect(onSendMessage).toHaveBeenCalledWith('allow_once', {
+            tool_approval_response: {
+                decision: 'allow_once',
+                approval_key: 'create_document:name:News Headlines Today',
+            },
+        });
     });
 
     it('keeps an approved tool approval continuation in the same active work row', () => {