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

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

@@ -16,7 +16,7 @@ interface ModalProps {
     className?: string;
     allowOverflow?: boolean;
     disableCloseOnClickOutside?: boolean;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
     action?: React.ReactNode;
 }
 const ModalContext = createContext<boolean>(false);
@@ -54,6 +54,8 @@ export function Modal({
                 return 'max-w-[80vw] md:max-w-[60vw]';
             case 'xl':
                 return 'max-w-[95vw] lg:max-w-[80vw]';
+            case 'full':
+                return 'h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)]';
             default:
                 return 'max-w-[60vw] lg:max-w-[40vw]';
         }
@@ -88,7 +90,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/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/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

@@ -633,6 +633,10 @@ export interface AgentRightPanelProps {
     /** Show the Artifacts tab (opt-in, default false) */
     showArtifacts?: boolean;
     artifactRefreshKey?: number;
+    artifactRefreshDetails?: Record<string, unknown>;
+    selectedArtifactPath?: string | null;
+    onSelectedArtifactPathChange?: (path: string | null) => void;
+    onSendMessage?: (message: string, inputMetadata?: Record<string, unknown>) => void;
 
     // Panel control
     onClose: () => void;
@@ -672,6 +676,10 @@ function AgentRightPanelComponent({
     // Artifacts
     showArtifacts = false,
     artifactRefreshKey = 0,
+    artifactRefreshDetails,
+    selectedArtifactPath,
+    onSelectedArtifactPathChange,
+    onSendMessage,
 
     // Payload
     payloadContent,
@@ -811,7 +819,14 @@ function AgentRightPanelComponent({
             label: t('agent.artifacts'),
             content: withTabBoundary(
                 t('agent.artifacts'),
-                <ArtifactsTab runId={runId} refreshKey={artifactRefreshKey} />,
+                <ArtifactsTab
+                    runId={runId}
+                    refreshKey={artifactRefreshKey}
+                    refreshDetails={artifactRefreshDetails}
+                    selectedPath={selectedArtifactPath}
+                    onSelectedPathChange={onSelectedArtifactPathChange}
+                    onSendMessage={onSendMessage}
+                />,
             ),
             is_allowed: showArtifacts,
         },

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

@@ -0,0 +1,55 @@
+/** @vitest-environment jsdom */
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { I18nProvider } from '../../../i18n/index.js';
+import { ArtifactsTab } from './ArtifactsTab.js';
+
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => ({ client: {} }),
+}));
+
+vi.mock('@vertesia/ui/widgets', () => ({
+    ArtifactEditingSurface: ({ viewMode }: { viewMode?: 'components' | 'document' }) => (
+        <div data-testid="artifact-editing-surface" data-view-mode={viewMode} />
+    ),
+}));
+
+vi.mock('./hooks/useArtifacts.js', () => ({
+    useArtifacts: () => ({
+        tree: [],
+        flatFiles: [{ path: 'drafts/brief.md' }],
+        isLoading: false,
+        error: undefined,
+        refresh: vi.fn(),
+    }),
+}));
+
+afterEach(cleanup);
+
+function renderArtifactEditor(props?: Partial<ComponentProps<typeof ArtifactsTab>>) {
+    return render(
+        <I18nProvider lng="en">
+            <ArtifactsTab runId="run-1" selectedPath="drafts/brief.md" onSendMessage={vi.fn()} {...props} />
+        </I18nProvider>,
+    );
+}
+
+describe('ArtifactsTab', () => {
+    it('opens editable artifacts in block mode by default', () => {
+        renderArtifactEditor();
+
+        expect(screen.getByTestId('artifact-editing-surface').getAttribute('data-view-mode')).toBe('components');
+        expect(screen.getByRole('button', { name: 'Block mode' }).getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('allows switching from block mode to the full editor', () => {
+        renderArtifactEditor();
+
+        fireEvent.click(screen.getByRole('button', { name: 'Edit mode' }));
+
+        expect(screen.getByTestId('artifact-editing-surface').getAttribute('data-view-mode')).toBe('document');
+        expect(screen.getByRole('button', { name: 'Edit mode' }).getAttribute('aria-pressed')).toBe('true');
+    });
+});