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

package/src/features/store/objects/components/DocumentEditingConfigurationSelector.test.ts

@@ -0,0 +1,34 @@
+import type { Project } from '@vertesia/common';
+import { describe, expect, it } from 'vitest';
+import { getDocumentEditingProjectDefault } from './DocumentEditingConfigurationSelector.js';
+
+describe('document editing configuration', () => {
+    it('prefers the project agent default over the base default', () => {
+        const project = {
+            configuration: {
+                defaults: {
+                    base: { environment: 'base-env', model: 'base-model' },
+                    system: { agent: { environment: 'agent-env', model: 'agent-model' } },
+                },
+            },
+        } as Pick<Project, 'configuration'>;
+
+        expect(getDocumentEditingProjectDefault(project)).toEqual({
+            environment: 'agent-env',
+            model: 'agent-model',
+        });
+    });
+
+    it('falls back to the project base default', () => {
+        const project = {
+            configuration: {
+                defaults: { base: { environment: 'base-env', model: 'base-model' } },
+            },
+        } as Pick<Project, 'configuration'>;
+
+        expect(getDocumentEditingProjectDefault(project)).toEqual({
+            environment: 'base-env',
+            model: 'base-model',
+        });
+    });
+});

package/src/features/store/objects/components/DocumentEditingConfigurationSelector.tsx

@@ -0,0 +1,211 @@
+import type { ExecutionEnvironmentRef, InteractionExecutionConfiguration, Project } from '@vertesia/common';
+import { Button, Popover, PopoverContent, PopoverTrigger, SelectBox, Spinner } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useUserSession } from '@vertesia/ui/session';
+import { ChevronDown, SlidersHorizontal } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+export interface DocumentEditingConfiguration {
+    environment?: string;
+    model?: string;
+    model_options?: InteractionExecutionConfiguration['model_options'];
+}
+
+interface ModelOption {
+    id: string;
+    name: string;
+}
+
+export function getDocumentEditingProjectDefault(
+    project: Pick<Project, 'configuration'>,
+): DocumentEditingConfiguration {
+    const defaults = project.configuration?.defaults?.system?.agent ?? project.configuration?.defaults?.base;
+    return {
+        environment: defaults?.environment,
+        model: defaults?.model,
+    };
+}
+
+function environmentLabel(environment: ExecutionEnvironmentRef): string {
+    return environment.name;
+}
+
+function modelLabel(model: ModelOption): string {
+    return model.name;
+}
+
+/** Provider model ids can be long resource paths; display only the final segment. */
+function shortModelName(model: string): string {
+    const segment = model.split('/').filter(Boolean).pop();
+    return segment || model;
+}
+
+interface DocumentEditingConfigurationSelectorProps {
+    value: DocumentEditingConfiguration;
+    onChange: (value: DocumentEditingConfiguration) => void;
+    disabled?: boolean;
+    isLoading?: boolean;
+}
+
+export function DocumentEditingConfigurationSelector({
+    value,
+    onChange,
+    disabled = false,
+    isLoading = false,
+}: DocumentEditingConfigurationSelectorProps) {
+    const { client } = useUserSession();
+    const { t } = useUITranslation();
+    const [environments, setEnvironments] = useState<ExecutionEnvironmentRef[]>([]);
+    const [models, setModels] = useState<ModelOption[]>([]);
+    const [isLoadingEnvironments, setIsLoadingEnvironments] = useState(true);
+    const [isLoadingModels, setIsLoadingModels] = useState(false);
+    const latestEnvironmentRequestRef = useRef<string | undefined>(undefined);
+
+    useEffect(() => {
+        let cancelled = false;
+        setIsLoadingEnvironments(true);
+        void client.environments
+            .list()
+            .then((items) => {
+                if (!cancelled) setEnvironments(items.slice().sort((a, b) => a.name.localeCompare(b.name)));
+            })
+            .catch((err: unknown) => {
+                console.warn('Failed to list document editing environments', err);
+                if (!cancelled) setEnvironments([]);
+            })
+            .finally(() => {
+                if (!cancelled) setIsLoadingEnvironments(false);
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+
+    useEffect(() => {
+        if (!value.environment) {
+            setModels([]);
+            setIsLoadingModels(false);
+            return;
+        }
+
+        let cancelled = false;
+        const environmentId = value.environment;
+        setIsLoadingModels(true);
+        void client.environments
+            .retrieve(environmentId)
+            .then((environment) => {
+                if (cancelled) return;
+                setModels(
+                    (environment.enabled_models ?? [])
+                        .map((model) => ({ id: model.id, name: model.name || model.id }))
+                        .sort((a, b) => a.name.localeCompare(b.name)),
+                );
+            })
+            .catch((err: unknown) => {
+                console.warn('Failed to load document editing models', err);
+                if (!cancelled) setModels([]);
+            })
+            .finally(() => {
+                if (!cancelled) setIsLoadingModels(false);
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, value.environment]);
+
+    const selectedEnvironment = environments.find((environment) => environment.id === value.environment);
+    const selectedModel = useMemo<ModelOption | undefined>(() => {
+        if (!value.model) return undefined;
+        return (
+            models.find((model) => model.id === value.model) ?? { id: value.model, name: shortModelName(value.model) }
+        );
+    }, [models, value.model]);
+
+    const selectEnvironment = (environment: ExecutionEnvironmentRef) => {
+        latestEnvironmentRequestRef.current = environment.id;
+        onChange({ environment: environment.id });
+        void client.environments
+            .retrieve(environment.id)
+            .then((details) => {
+                if (latestEnvironmentRequestRef.current !== environment.id) return;
+                const nextModel = details.default_model ?? details.enabled_models?.[0]?.id;
+                onChange({ environment: environment.id, model: nextModel });
+            })
+            .catch((err: unknown) => {
+                console.warn('Failed to select a default document editing model', err);
+            });
+    };
+
+    const selectModel = (model: ModelOption) => {
+        latestEnvironmentRequestRef.current = undefined;
+        onChange({ environment: value.environment, model: model.id });
+    };
+
+    const buttonLabel = selectedModel?.name || t('agent.documentEditingSelectModel');
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 max-w-[15rem] gap-1.5 px-2 text-xs"
+                    aria-label={t('agent.documentEditingConfiguration')}
+                    title={t('agent.documentEditingConfiguration')}
+                >
+                    {isLoading ? <Spinner size="sm" /> : <SlidersHorizontal className="size-3.5 shrink-0" />}
+                    <span className="min-w-0 truncate">{buttonLabel}</span>
+                    <ChevronDown className="size-3.5 shrink-0 opacity-70" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="z-[1000000] w-80 space-y-3 p-3">
+                <div>
+                    <div className="text-sm font-semibold text-foreground">
+                        {t('agent.documentEditingConfiguration')}
+                    </div>
+                    <div className="mt-0.5 text-xs leading-4 text-muted">
+                        {disabled
+                            ? t('agent.documentEditingConfigurationLocked')
+                            : t('agent.documentEditingConfigurationDescription')}
+                    </div>
+                </div>
+                <div className="space-y-1">
+                    <label className="text-xs font-medium text-foreground" htmlFor="document-editing-environment">
+                        {t('agent.environment')}
+                    </label>
+                    <SelectBox
+                        id="document-editing-environment"
+                        by="id"
+                        options={environments}
+                        value={selectedEnvironment}
+                        optionLabel={environmentLabel}
+                        filterBy="name"
+                        placeholder={t('agent.documentEditingSelectEnvironment')}
+                        onChange={selectEnvironment}
+                        disabled={disabled}
+                        isLoading={isLoadingEnvironments}
+                    />
+                </div>
+                <div className="space-y-1">
+                    <label className="text-xs font-medium text-foreground" htmlFor="document-editing-model">
+                        {t('agent.model')}
+                    </label>
+                    <SelectBox
+                        id="document-editing-model"
+                        by="id"
+                        options={models}
+                        value={selectedModel}
+                        optionLabel={modelLabel}
+                        filterBy="name"
+                        placeholder={t('agent.documentEditingSelectModel')}
+                        onChange={selectModel}
+                        disabled={disabled || !value.environment}
+                        isLoading={isLoadingModels}
+                        warnOnMissingValue={false}
+                    />
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/features/store/objects/components/DocumentEditingLockStatus.test.tsx

@@ -0,0 +1,32 @@
+/** @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { I18nProvider } from '../../../../i18n/index.js';
+import { DocumentEditingLockStatus } from './DocumentEditingLockStatus.js';
+
+describe('DocumentEditingLockStatus', () => {
+    it('shows the active lock and exposes manual unlock', () => {
+        const onToggleLock = vi.fn();
+        render(
+            <I18nProvider lng="en">
+                <DocumentEditingLockStatus isLocked onToggleLock={onToggleLock} />
+            </I18nProvider>,
+        );
+
+        expect(screen.getByRole('status').textContent).toContain('AI is editing the working copy');
+        fireEvent.click(screen.getByRole('button', { name: 'Unlock editing' }));
+        expect(onToggleLock).toHaveBeenCalledTimes(1);
+    });
+
+    it('warns when editing was manually unlocked and offers relocking', () => {
+        render(
+            <I18nProvider lng="en">
+                <DocumentEditingLockStatus isLocked={false} onToggleLock={vi.fn()} />
+            </I18nProvider>,
+        );
+
+        expect(screen.getByRole('alert').textContent).toContain('Editing manually unlocked');
+        expect(screen.getByRole('button', { name: 'Lock editing' })).not.toBeNull();
+    });
+});

package/src/features/store/objects/components/DocumentEditingLockStatus.tsx

@@ -0,0 +1,45 @@
+import { Button, VTooltip } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { LockKeyhole, LockOpen } from 'lucide-react';
+
+export interface DocumentEditingLockStatusProps {
+    isLocked: boolean;
+    onToggleLock: () => void;
+}
+
+/** Compact turn-level lock status for the full-document editor toolbar. */
+export function DocumentEditingLockStatus({ isLocked, onToggleLock }: DocumentEditingLockStatusProps) {
+    const { t } = useUITranslation();
+    const title = isLocked ? t('agent.editingLockedTitle') : t('agent.editingManuallyUnlockedTitle');
+    const description = isLocked ? t('agent.editingLockedDescription') : t('agent.editingManuallyUnlockedDescription');
+    const action = isLocked ? t('agent.unlockEditing') : t('agent.lockEditing');
+
+    return (
+        <div
+            className="flex h-8 max-w-64 shrink-0 items-center gap-1 rounded-md border border-mixer-attention/30 bg-mixer-attention/10 ps-2 pe-1 text-attention"
+            role={isLocked ? 'status' : 'alert'}
+            aria-live="polite"
+        >
+            {isLocked ? (
+                <LockKeyhole className="size-3.5 shrink-0 animate-pulse" />
+            ) : (
+                <LockOpen className="size-3.5 shrink-0" />
+            )}
+            <VTooltip description={description} asChild>
+                <span className="min-w-0 truncate text-xs font-medium text-foreground">{title}</span>
+            </VTooltip>
+            <span className="sr-only">{description}</span>
+            <VTooltip description={action} asChild>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="size-6 shrink-0 rounded p-0 text-attention hover:bg-mixer-attention/15"
+                    onClick={onToggleLock}
+                    aria-label={action}
+                >
+                    {isLocked ? <LockOpen className="size-3.5" /> : <LockKeyhole className="size-3.5" />}
+                </Button>
+            </VTooltip>
+        </div>
+    );
+}

package/src/features/store/objects/components/DocumentEditingPanel.test.tsx

@@ -0,0 +1,336 @@
+/** @vitest-environment jsdom */
+
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { ContentObject, Project } from '@vertesia/common';
+import type { ReactNode } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { I18nProvider } from '../../../../i18n/index.js';
+import { type DocumentEditingModelConfiguration, DocumentEditingWorkspace } from './DocumentEditingPanel.js';
+
+const mocks = vi.hoisted(() => {
+    const retrieveProject = vi.fn();
+    const startAgent = vi.fn();
+    return {
+        findRun: vi.fn(),
+        resolveTarget: vi.fn(),
+        retrieveProject,
+        startAgent,
+        session: {
+            client: {
+                agents: {
+                    start: startAgent,
+                    terminate: vi.fn(),
+                },
+                files: {},
+                projects: { retrieve: retrieveProject },
+            },
+            project: { id: 'project-1' },
+            store: { objects: {} },
+            user: { sub: 'user-1' },
+        },
+    };
+});
+
+vi.mock('@vertesia/ui/core', () => ({
+    Button: ({
+        children,
+        className,
+        disabled,
+        onClick,
+        type,
+        'aria-label': ariaLabel,
+    }: {
+        children?: ReactNode;
+        className?: string;
+        disabled?: boolean;
+        onClick?: () => void;
+        type?: 'button' | 'submit' | 'reset';
+        'aria-label'?: string;
+    }) => (
+        <button
+            type={type ?? 'button'}
+            className={className}
+            disabled={disabled}
+            onClick={onClick}
+            aria-label={ariaLabel}
+        >
+            {children}
+        </button>
+    ),
+    Center: ({ children, className }: { children?: ReactNode; className?: string }) => (
+        <div className={className}>{children}</div>
+    ),
+    ConfirmModal: () => null,
+    errorMessage: (_error: unknown, fallback: string) => fallback,
+    Modal: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+    ResizableHandle: () => <div />,
+    ResizablePanel: ({ children, className }: { children?: ReactNode; className?: string }) => (
+        <div className={className}>{children}</div>
+    ),
+    ResizablePanelGroup: ({ children, className }: { children?: ReactNode; className?: string }) => (
+        <div className={className}>{children}</div>
+    ),
+    Spinner: () => <span>Loading</span>,
+    useToast: () => vi.fn(),
+    VTooltip: ({ children }: { children?: ReactNode }) => <>{children}</>,
+}));
+
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => mocks.session,
+}));
+
+vi.mock('@vertesia/ui/widgets', () => ({
+    ArtifactEditingSurface: () => <div data-testid="artifact-editing-surface" />,
+    createUnifiedLineDiff: vi.fn(() => ''),
+    diffTextSegments: vi.fn(() => []),
+    isArtifactRefreshEvent: vi.fn(() => false),
+}));
+
+vi.mock('../../../agent/chat/ModernAgentConversation.js', () => ({
+    ModernAgentConversation: ({ agentRunId }: { agentRunId?: string }) => (
+        <div data-testid="agent-conversation" data-agent-run-id={agentRunId} />
+    ),
+}));
+
+vi.mock('./DocumentEditingConfigurationSelector.js', () => ({
+    DocumentEditingConfigurationSelector: ({
+        value,
+    }: {
+        value: { environment?: string; model?: string; model_options?: Record<string, unknown> };
+    }) => (
+        <div
+            data-testid="editing-configuration"
+            data-environment={value.environment}
+            data-model={value.model}
+            data-model-options={JSON.stringify(value.model_options)}
+        />
+    ),
+    getDocumentEditingProjectDefault: (project: Pick<Project, 'configuration'>) => {
+        const defaults = project.configuration?.defaults?.system?.agent ?? project.configuration?.defaults?.base;
+        return { environment: defaults?.environment, model: defaults?.model };
+    },
+}));
+
+vi.mock('./documentEditingRun.js', () => ({
+    DOCUMENT_EDITING_DEFAULT_INTERACTION: 'sys:conversation',
+    createDocumentEditingRunIdentity: () => ({ tags: ['document-editing'], properties: {} }),
+    findDocumentEditingRun: mocks.findRun,
+}));
+
+vi.mock('./documentEditingTarget.js', () => ({
+    resolveDocumentEditingTarget: mocks.resolveTarget,
+}));
+
+vi.mock('./SaveVersionConfirmModal.js', () => ({
+    SaveVersionConfirmModal: () => null,
+}));
+
+const object = {
+    id: 'document-1',
+    name: 'Editing test',
+    content: {
+        etag: 'etag-1',
+        name: 'document.md',
+        type: 'text/markdown',
+    },
+} as unknown as ContentObject;
+
+function renderWorkspace(props?: { model?: DocumentEditingModelConfiguration; startImmediately?: boolean }) {
+    return render(
+        <I18nProvider lng="en">
+            <DocumentEditingWorkspace object={object} initialContent="# Editing test" {...props} />
+        </I18nProvider>,
+    );
+}
+
+describe('DocumentEditingWorkspace startup configuration', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mocks.findRun.mockResolvedValue(undefined);
+        mocks.resolveTarget.mockResolvedValue({ id: 'document-1', etag: 'etag-1', content: '# Editing test' });
+        mocks.retrieveProject.mockResolvedValue({
+            configuration: {
+                defaults: {
+                    system: { agent: { environment: 'project-environment', model: 'project-model' } },
+                },
+            },
+        });
+        mocks.startAgent.mockResolvedValue({ id: 'run-1' });
+    });
+
+    afterEach(cleanup);
+
+    it('starts immediately with the host-provided model configuration', async () => {
+        renderWorkspace({
+            model: {
+                env: 'app-environment',
+                model: 'app-model',
+                options: { _option_id: 'openai-text', temperature: 0.2 },
+            },
+            startImmediately: true,
+        });
+
+        await waitFor(() => expect(mocks.startAgent).toHaveBeenCalledTimes(1));
+
+        expect(mocks.retrieveProject).not.toHaveBeenCalled();
+        expect(mocks.startAgent.mock.calls[0]?.[0]).toMatchObject({
+            config: {
+                environment: 'app-environment',
+                model: 'app-model',
+                model_options: { _option_id: 'openai-text', temperature: 0.2 },
+            },
+            interaction: 'sys:conversation',
+            tool_approval_mode: 'full_control',
+        });
+        expect((await screen.findByTestId('agent-conversation')).getAttribute('data-agent-run-id')).toBe('run-1');
+    });
+
+    it('keeps startup manual when startImmediately is omitted', async () => {
+        renderWorkspace({
+            model: {
+                env: 'app-environment',
+                model: 'app-model',
+                options: { _option_id: 'openai-text', temperature: 0.2 },
+            },
+        });
+
+        const startButton = await screen.findByRole('button', { name: 'Start editing' });
+        await waitFor(() => expect((startButton as HTMLButtonElement).disabled).toBe(false));
+        expect(mocks.startAgent).not.toHaveBeenCalled();
+
+        fireEvent.click(startButton);
+
+        await waitFor(() => expect(mocks.startAgent).toHaveBeenCalledTimes(1));
+        expect(mocks.startAgent.mock.calls[0]?.[0]).toMatchObject({
+            config: {
+                environment: 'app-environment',
+                model: 'app-model',
+                model_options: { _option_id: 'openai-text', temperature: 0.2 },
+            },
+        });
+    });
+
+    it('uses project defaults when the host does not provide a model configuration', async () => {
+        renderWorkspace();
+
+        const startButton = await screen.findByRole('button', { name: 'Start editing' });
+        await waitFor(() => expect((startButton as HTMLButtonElement).disabled).toBe(false));
+
+        expect(mocks.retrieveProject).toHaveBeenCalledWith('project-1');
+        expect(screen.getByTestId('editing-configuration').getAttribute('data-environment')).toBe(
+            'project-environment',
+        );
+        expect(screen.getByTestId('editing-configuration').getAttribute('data-model')).toBe('project-model');
+    });
+
+    it('does not duplicate automatic startup for equivalent inline model objects', async () => {
+        let resolveStart: ((run: { id: string }) => void) | undefined;
+        mocks.startAgent.mockImplementation(
+            () =>
+                new Promise<{ id: string }>((resolve) => {
+                    resolveStart = resolve;
+                }),
+        );
+
+        const firstProps = {
+            model: {
+                env: 'app-environment',
+                model: 'app-model',
+                options: { _option_id: 'openai-text' as const, temperature: 0.2 },
+            },
+            startImmediately: true,
+        };
+        const view = renderWorkspace(firstProps);
+
+        await waitFor(() => expect(mocks.startAgent).toHaveBeenCalledTimes(1));
+
+        view.rerender(
+            <I18nProvider lng="en">
+                <DocumentEditingWorkspace
+                    object={object}
+                    initialContent="# Editing test"
+                    model={{
+                        env: 'app-environment',
+                        model: 'app-model',
+                        options: { _option_id: 'openai-text', temperature: 0.2 },
+                    }}
+                    startImmediately
+                />
+            </I18nProvider>,
+        );
+        await waitFor(() => expect(mocks.startAgent).toHaveBeenCalledTimes(1));
+
+        resolveStart?.({ id: 'run-1' });
+        await waitFor(() =>
+            expect(screen.getByTestId('agent-conversation').getAttribute('data-agent-run-id')).toBe('run-1'),
+        );
+    });
+
+    it('uses changed model options as a new automatic-start identity', async () => {
+        mocks.startAgent.mockRejectedValueOnce(new Error('temporary failure')).mockResolvedValueOnce({ id: 'run-2' });
+        const view = renderWorkspace({
+            model: {
+                env: 'app-environment',
+                model: 'app-model',
+                options: { _option_id: 'openai-text', temperature: 0.2 },
+            },
+            startImmediately: true,
+        });
+
+        await waitFor(() => expect(mocks.startAgent).toHaveBeenCalledTimes(1));
+
+        view.rerender(
+            <I18nProvider lng="en">
+                <DocumentEditingWorkspace
+                    object={object}
+                    initialContent="# Editing test"
+                    model={{
+                        env: 'app-environment',
+                        model: 'app-model',
+                        options: { _option_id: 'openai-text', temperature: 0.4 },
+                    }}
+                    startImmediately
+                />
+            </I18nProvider>,
+        );
+
+        await waitFor(() => expect(mocks.startAgent).toHaveBeenCalledTimes(2));
+        expect(mocks.startAgent.mock.calls[1]?.[0]).toMatchObject({
+            config: {
+                environment: 'app-environment',
+                model: 'app-model',
+                model_options: { _option_id: 'openai-text', temperature: 0.4 },
+            },
+        });
+    });
+
+    it('restores model options when reattaching to an existing run', async () => {
+        mocks.findRun.mockResolvedValue({
+            id: 'existing-run',
+            config: {
+                environment: 'run-environment',
+                model: 'run-model',
+                model_options: { _option_id: 'openai-text', temperature: 0.2 },
+            },
+        });
+
+        renderWorkspace({
+            model: {
+                env: 'host-environment',
+                model: 'host-model',
+                options: { _option_id: 'openai-text', temperature: 0.4 },
+            },
+            startImmediately: true,
+        });
+
+        await waitFor(() =>
+            expect(screen.getByTestId('agent-conversation').getAttribute('data-agent-run-id')).toBe('existing-run'),
+        );
+        expect(mocks.startAgent).not.toHaveBeenCalled();
+        expect(screen.getByTestId('editing-configuration').getAttribute('data-environment')).toBe('run-environment');
+        expect(screen.getByTestId('editing-configuration').getAttribute('data-model')).toBe('run-model');
+        expect(screen.getByTestId('editing-configuration').getAttribute('data-model-options')).toBe(
+            JSON.stringify({ _option_id: 'openai-text', temperature: 0.2 }),
+        );
+    });
+});