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

package/src/features/environment/SelectEnvironment.tsx

@@ -0,0 +1,186 @@
+import type { ExecutionEnvironmentRef } from '@vertesia/common';
+import { SelectBox, useFetch, useFetchOnce } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useUserSession } from '@vertesia/ui/session';
+import { useEffect, useState } from 'react';
+
+type EnvironmentModel = NonNullable<ExecutionEnvironmentRef['enabled_models']>[number];
+
+function environmentLabel(option: ExecutionEnvironmentRef) {
+    return option.name;
+}
+
+interface SelectEnvironmentProps {
+    onChange: (environment?: ExecutionEnvironmentRef) => void;
+    isClearable?: boolean;
+    ignoreVirtuals?: boolean;
+    selectedEnvId?: string;
+    disabled?: boolean;
+}
+
+export function SelectEnvironment({
+    isClearable = false,
+    onChange,
+    ignoreVirtuals = false,
+    selectedEnvId,
+    disabled = false,
+}: SelectEnvironmentProps) {
+    const { t } = useUITranslation();
+    const { client } = useUserSession();
+    const [value, setValue] = useState<ExecutionEnvironmentRef | undefined>();
+    const { data: environments, isLoading } = useFetchOnce(() =>
+        client.environments.list().then((result) => {
+            const available = ignoreVirtuals
+                ? result.filter((environment) => !environment.provider.startsWith('virtual_'))
+                : result;
+            return available.slice().sort((left, right) => left.name.localeCompare(right.name));
+        }),
+    );
+
+    useEffect(() => {
+        setValue(environments?.find((environment) => environment.id === selectedEnvId));
+    }, [environments, selectedEnvId]);
+
+    return (
+        <SelectBox
+            isClearable={isClearable}
+            optionLabel={environmentLabel}
+            options={environments ?? []}
+            value={value}
+            onChange={(environment) => {
+                setValue(environment);
+                onChange(environment);
+            }}
+            placeholder={t('intakePolicy.placeholder.environment')}
+            filterBy="name"
+            disabled={disabled}
+            isLoading={isLoading}
+        />
+    );
+}
+
+function modelLabel(option: EnvironmentModel) {
+    return option.name;
+}
+
+function createModelLabel(greyedModels?: EnvironmentModel[]) {
+    if (!greyedModels?.length) {
+        return modelLabel;
+    }
+    return (option: EnvironmentModel) => {
+        const isGreyed = greyedModels.some((model) => model.id === option.id);
+        return <span className={isGreyed ? 'opacity-50' : ''}>{option.name}</span>;
+    };
+}
+
+interface SelectModelProps {
+    envId: string | undefined;
+    onChange: (model?: EnvironmentModel) => void;
+    isClearable?: boolean;
+    selectedModelId?: string;
+    disabled?: boolean;
+    greyedModels?: EnvironmentModel[];
+    onModelsLoaded?: (models: EnvironmentModel[]) => void;
+}
+
+export function SelectModel({
+    envId,
+    isClearable,
+    onChange,
+    selectedModelId,
+    disabled = false,
+    greyedModels,
+    onModelsLoaded,
+}: SelectModelProps) {
+    const { t } = useUITranslation();
+    const { client } = useUserSession();
+    const [value, setValue] = useState<EnvironmentModel | undefined>();
+    const { data: models, isLoading } = useFetch(async () => {
+        if (!envId) {
+            return [];
+        }
+        try {
+            const environment = await client.environments.retrieve(envId);
+            return [...(environment.enabled_models ?? [])].sort((left, right) => left.name.localeCompare(right.name));
+        } catch {
+            return [];
+        }
+    }, [envId]);
+
+    useEffect(() => {
+        if (!selectedModelId) {
+            setValue(undefined);
+            return;
+        }
+        const selected = models?.find((model) => model.id === selectedModelId);
+        setValue(
+            selected ?? {
+                id: selectedModelId,
+                name: selectedModelId,
+                provider: 'unknown',
+            },
+        );
+    }, [models, selectedModelId]);
+
+    useEffect(() => {
+        if (models) {
+            onModelsLoaded?.(models);
+        }
+    }, [models, onModelsLoaded]);
+
+    return (
+        <SelectBox
+            isClearable={isClearable}
+            by="id"
+            optionLabel={createModelLabel(greyedModels)}
+            options={models ?? []}
+            value={value}
+            onChange={(model) => {
+                setValue(model);
+                onChange(model);
+            }}
+            placeholder={t('intakePolicy.placeholder.model')}
+            disabled={disabled}
+            isLoading={isLoading}
+        />
+    );
+}
+
+interface SelectTrainingModelProps {
+    env: ExecutionEnvironmentRef | undefined;
+    onChange: (model?: EnvironmentModel) => void;
+    isClearable?: boolean;
+}
+
+export function SelectTrainingModel({ env, isClearable, onChange }: SelectTrainingModelProps) {
+    const { t } = useUITranslation();
+    const { client } = useUserSession();
+    const [value, setValue] = useState<EnvironmentModel | undefined>();
+    const { data: models, isLoading } = useFetch(async () => {
+        if (!env) {
+            return [];
+        }
+        try {
+            return client.environments.listTrainableModels(env.id);
+        } catch {
+            return [];
+        }
+    }, [env?.id]);
+
+    return (
+        <SelectBox
+            isClearable={isClearable}
+            by="id"
+            optionLabel={modelLabel}
+            options={models ?? []}
+            value={value}
+            onChange={(model) => {
+                setValue(model);
+                onChange(model);
+            }}
+            placeholder={t('intakePolicy.placeholder.model')}
+            disabled={!env}
+            isLoading={isLoading}
+        />
+    );
+}

package/src/features/environment/index.ts

@@ -0,0 +1 @@
+export * from './SelectEnvironment.js';

package/src/features/index.ts

@@ -1,6 +1,7 @@
 export * from './activity-doc/index.js';
 export * from './agent';
 export * from './document-viewer/index.js';
+export * from './environment/index.js';
 export * from './errors/index.js';
 export * from './facets/index.js';
 export * from './layout/index.js';
@@ -12,3 +13,4 @@ export * from './permissions/index.js';
 export * from './store/index.js';
 export * from './user/index.js';
 export * from './utils/index.js';
+export * from './views/index.js';

package/src/features/magic-pdf/AnnotatedImageSlider.tsx

@@ -1,4 +1,4 @@
-import { Button, Center, VTooltip } from '@vertesia/ui/core';
+import { Button, Center } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import clsx from 'clsx';
 import { ChevronsDown, ChevronsUp, Image, Loader2, Maximize, Minus, Plus, ScanSearch } from 'lucide-react';
@@ -255,7 +255,7 @@ export function AnnotatedImageSlider({ className, currentPage, onChange }: Annot
     return (
         <div ref={ref} className={clsx('flex flex-col items-stretch gap-y-2', className)}>
             <div className="relative flex items-center justify-center px-2 h-9">
-                <Button variant="ghost" size="xs" onClick={goPrev} alt={t('pdf.previousPage')}>
+                <Button variant="ghost" size="xs" onClick={goPrev} title={t('pdf.previousPage')}>
                     <ChevronsUp className="size-4" />
                 </Button>
                 <div className="absolute start-2 flex items-center gap-x-1">
@@ -301,7 +301,7 @@ export function AnnotatedImageSlider({ className, currentPage, onChange }: Annot
                 ))}
             </div>
             <div className="flex items-center justify-center h-9">
-                <Button variant="ghost" size="xs" onClick={goNext} alt={t('pdf.nextPage')}>
+                <Button variant="ghost" size="xs" onClick={goNext} title={t('pdf.nextPage')}>
                     <ChevronsDown className="size-4" />
                 </Button>
             </div>
@@ -319,22 +319,21 @@ interface ImageTypeButtonProps {
 function ImageTypeButton({ type, currentType, onClick, icon, tooltip }: ImageTypeButtonProps) {
     const isSelected = type === currentType;
     return (
-        <VTooltip description={tooltip} placement="bottom" size="xs">
-            <Button
-                variant="unstyled"
-                aria-label={tooltip}
-                aria-pressed={isSelected}
-                className={clsx(
-                    'p-1 rounded cursor-pointer transition-colors',
-                    isSelected
-                        ? 'text-primary bg-primary/10'
-                        : 'text-muted-foreground hover:text-foreground hover:bg-muted',
-                )}
-                onClick={onClick}
-            >
-                {icon}
-            </Button>
-        </VTooltip>
+        <Button
+            title={tooltip}
+            tooltipPlacement="bottom"
+            variant="unstyled"
+            aria-pressed={isSelected}
+            className={clsx(
+                'p-1 rounded cursor-pointer transition-colors',
+                isSelected
+                    ? 'text-primary bg-primary/10'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-muted',
+            )}
+            onClick={onClick}
+        >
+            {icon}
+        </Button>
     );
 }
 
@@ -350,54 +349,51 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
     const { t } = useUITranslation();
     return (
         <div className="flex items-center gap-x-0.5">
-            <VTooltip description={t('pdf.zoomOut')} placement="bottom" size="xs">
-                <Button
-                    variant="unstyled"
-                    aria-label={t('pdf.zoomOut')}
-                    className={clsx(
-                        'p-1 rounded cursor-pointer transition-colors',
-                        canZoomOut
-                            ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                            : 'text-muted-foreground/40 cursor-not-allowed',
-                    )}
-                    onClick={onZoomOut}
-                    disabled={!canZoomOut}
-                >
-                    <Minus className="size-4" />
-                </Button>
-            </VTooltip>
+            <Button
+                title={t('pdf.zoomOut')}
+                tooltipPlacement="bottom"
+                variant="unstyled"
+                className={clsx(
+                    'p-1 rounded cursor-pointer transition-colors',
+                    canZoomOut
+                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
+                        : 'text-muted-foreground/40 cursor-not-allowed',
+                )}
+                onClick={onZoomOut}
+                disabled={!canZoomOut}
+            >
+                <Minus className="size-4" />
+            </Button>
             <span className="text-xs text-muted-foreground min-w-[32px] text-center">{zoom}%</span>
-            <VTooltip description={t('pdf.zoomIn')} placement="bottom" size="xs">
-                <Button
-                    variant="unstyled"
-                    aria-label={t('pdf.zoomIn')}
-                    className={clsx(
-                        'p-1 rounded cursor-pointer transition-colors',
-                        canZoomIn
-                            ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                            : 'text-muted-foreground/40 cursor-not-allowed',
-                    )}
-                    onClick={onZoomIn}
-                    disabled={!canZoomIn}
-                >
-                    <Plus className="size-4" />
-                </Button>
-            </VTooltip>
-            <VTooltip description={t('pdf.fitToWidth')} placement="bottom" size="xs">
-                <Button
-                    variant="unstyled"
-                    aria-label={t('pdf.fitToWidth')}
-                    className={clsx(
-                        'p-1 rounded cursor-pointer transition-colors',
-                        zoom !== DEFAULT_ZOOM
-                            ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                            : 'text-muted-foreground/40',
-                    )}
-                    onClick={onFitToView}
-                >
-                    <Maximize className="size-4" />
-                </Button>
-            </VTooltip>
+            <Button
+                title={t('pdf.zoomIn')}
+                tooltipPlacement="bottom"
+                variant="unstyled"
+                className={clsx(
+                    'p-1 rounded cursor-pointer transition-colors',
+                    canZoomIn
+                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
+                        : 'text-muted-foreground/40 cursor-not-allowed',
+                )}
+                onClick={onZoomIn}
+                disabled={!canZoomIn}
+            >
+                <Plus className="size-4" />
+            </Button>
+            <Button
+                title={t('pdf.fitToWidth')}
+                tooltipPlacement="bottom"
+                variant="unstyled"
+                className={clsx(
+                    'p-1 rounded cursor-pointer transition-colors',
+                    zoom !== DEFAULT_ZOOM
+                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
+                        : 'text-muted-foreground/40',
+                )}
+                onClick={onFitToView}
+            >
+                <Maximize className="size-4" />
+            </Button>
         </div>
     );
 }

package/src/features/magic-pdf/DownloadPopover.tsx

@@ -1,5 +1,5 @@
-import type { ContentObject, DocumentMetadata } from '@vertesia/common';
-import { Button, Popover, PopoverContent, PopoverTrigger } from '@vertesia/ui/core';
+import type { ContentObject } from '@vertesia/common';
+import { Button } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import { Download } from 'lucide-react';
@@ -15,52 +15,9 @@ export function DownloadPopover({ object }: DownloadPopoverProps) {
         void getResourceUrl(client, object.id, name).then((url) => window.open(url, '_blank'));
     };
 
-    const getProcessorType = (): string => {
-        if (object.metadata?.type === 'document') {
-            const docMetadata = object.metadata as DocumentMetadata;
-            return docMetadata.content_processor?.type || 'xml';
-        }
-        return 'xml'; // default
-    };
-
-    const processorType = getProcessorType();
-
-    const buttonClass = 'p-2 cursor-pointer hover:bg-muted text-start text-sm';
-
-    // For markdown processor, only one download option - render simple button
-    if (processorType === 'markdown') {
-        return (
-            <Button variant="ghost" size="xs" onClick={() => onDownload('document.md')} alt={t('pdf.download')}>
-                <Download className="size-4" />
-            </Button>
-        );
-    }
-
-    // Default XML processor - multiple options, use popover
     return (
-        <Popover>
-            <PopoverTrigger>
-                <Button variant="ghost" size="xs" alt={t('pdf.download')}>
-                    <Download className="size-4" />
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent align="start" className="p-0 w-auto">
-                <div className="min-w-[200px] flex flex-col divide-y divide-border">
-                    <Button variant="unstyled" className={buttonClass} onClick={() => onDownload('annotated.pdf')}>
-                        annotated.pdf
-                    </Button>
-                    <Button variant="unstyled" className={buttonClass} onClick={() => onDownload('document.xml')}>
-                        document.xml
-                    </Button>
-                    <Button
-                        variant="unstyled"
-                        className={buttonClass}
-                        onClick={() => onDownload('analyzed-pages.json')}
-                    >
-                        analyzed-pages.json
-                    </Button>
-                </div>
-            </PopoverContent>
-        </Popover>
+        <Button variant="ghost" size="xs" onClick={() => onDownload('document.md')} title={t('pdf.download')}>
+            <Download className="size-4" />
+        </Button>
     );
 }

package/src/features/magic-pdf/ExtractedContentView.tsx

@@ -1,4 +1,4 @@
-import { JSONCode, MarkdownRenderer, XMLViewer } from '@vertesia/ui/widgets';
+import { JSONCode, MarkdownRenderer } from '@vertesia/ui/widgets';
 import { Loader2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useMagicPdfContext } from './MagicPdfProvider';
@@ -23,22 +23,10 @@ export function ExtractedContentView({ viewType, pageNumber }: ExtractedContentV
         case 'markdown':
             return <MarkdownPageView pageNumber={pageNumber} />;
         default:
-            return <XmlPageView pageNumber={pageNumber} />;
+            return <MarkdownPageView pageNumber={pageNumber} />;
     }
 }
 
-interface XmlPageViewProps {
-    pageNumber: number;
-}
-function XmlPageView({ pageNumber }: XmlPageViewProps) {
-    const { xmlPages: pages } = useMagicPdfContext();
-    return (
-        <div className="px-4 py-2">
-            <XMLViewer xml={pages[pageNumber - 1]} collapsible />
-        </div>
-    );
-}
-
 interface JsonPageLayoutViewProps {
     pageNumber: number;
 }

package/src/features/magic-pdf/GroundedExtractionAssistantPanel.tsx

@@ -0,0 +1,86 @@
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useUserSession } from '@vertesia/ui/session';
+import { useCallback, useRef, useState } from 'react';
+import { ModernAgentConversation, type StartWorkflowFn } from '../agent/chat';
+
+interface GroundedExtractionAssistantPanelProps {
+    objectId: string;
+    /**
+     * Called after the assistant finishes a turn (which may have applied a grounded
+     * edit) so the grounded view can re-fetch and re-render the data + citation boxes.
+     */
+    onExtractionChanged?: () => void;
+    /**
+     * The field path currently selected in the view. When set (before the
+     * conversation starts), it seeds the assistant: the first message is scoped to
+     * this field so "click a field, say what's wrong" reaches the model.
+     */
+    selectedField?: string;
+    onClose?: () => void;
+}
+
+/**
+ * Interactive assistant embedded in the grounded-extraction view. Starts the
+ * server-side GroundedExtractionAssistant conversation (recordRun -> stage the
+ * document into the agent space -> launch interactive), then renders the live
+ * conversation. Each completed turn triggers `onExtractionChanged` so an operator's
+ * grounded edits appear in the data tree + citation overlay without a manual reload.
+ */
+export function GroundedExtractionAssistantPanel({
+    objectId,
+    onExtractionChanged,
+    selectedField,
+    onClose,
+}: GroundedExtractionAssistantPanelProps) {
+    const { t } = useUITranslation();
+    const { client } = useUserSession();
+    const [agentRunId, setAgentRunId] = useState<string | undefined>(undefined);
+    // Keep the latest callback/selection without re-creating the handlers each render.
+    const changedRef = useRef(onExtractionChanged);
+    changedRef.current = onExtractionChanged;
+    const selectedRef = useRef(selectedField);
+    selectedRef.current = selectedField;
+
+    const startWorkflow: StartWorkflowFn = useCallback(
+        async (initialMessage) => {
+            const field = selectedRef.current;
+            // Scope the opening message to the field the operator had selected, so
+            // "click a field, say what's wrong" reaches the model with the target.
+            const prompt =
+                field && initialMessage ? `Regarding the field "${field}": ${initialMessage}` : initialMessage;
+            const res = await client.store.objects
+                .analyze(objectId)
+                .startGroundedAssistant(prompt ? { user_prompt: prompt } : {});
+            setAgentRunId(res.agent_run_id);
+            return { agent_run_id: res.agent_run_id };
+        },
+        [client, objectId],
+    );
+
+    // The agent re-enables the follow-up input when a turn completes; that turn may
+    // have applied a grounded edit, so refresh the extraction at that point.
+    const handleShowInputChange = useCallback((canSendFollowUp: boolean) => {
+        if (canSendFollowUp) {
+            changedRef.current?.();
+        }
+    }, []);
+
+    return (
+        <div className="flex h-full flex-col">
+            {selectedField && !agentRunId && (
+                <div className="shrink-0 border-b border-border bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground">
+                    {t('grounded.assistantField')} <span className="font-mono text-foreground">{selectedField}</span>
+                </div>
+            )}
+            <ModernAgentConversation
+                agentRunId={agentRunId}
+                startWorkflow={startWorkflow}
+                interactive
+                fullWidth
+                hideObjectLinking
+                onShowInputChange={handleShowInputChange}
+                onClose={onClose}
+            />
+        </div>
+    );
+}

package/src/features/magic-pdf/GroundedExtractionView.test.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../__tests__/test-utils.js';
+import { GroundedExtractionPanel } from './GroundedExtractionView.js';
+
+const { mockClient } = vi.hoisted(() => {
+    const downloadUrl = vi.fn((path: string) => Promise.resolve({ url: `https://files.test/${path}` }));
+    return {
+        mockClient: { files: { getDownloadUrl: downloadUrl } },
+    };
+});
+
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => ({
+        client: mockClient,
+    }),
+}));
+
+describe('GroundedExtractionPanel', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it('switches between the original and checkerboard page and shows the selected A1 range', async () => {
+        const extraction = {
+            version: 1,
+            object_id: 'object-1',
+            run_id: 'run-1',
+            generated_at: '2026-07-13T16:30:27.418Z',
+            pages: { '1': { width: 612, height: 792 } },
+            data: { part_number: 'DFVS25' },
+            citations: [
+                {
+                    path: 'part_number',
+                    page: 1,
+                    block_ids: [],
+                    cells: { start: 'E38', end: 'J38' },
+                    verified: false,
+                    reviewed: true,
+                    value: 'DFVS25',
+                    boxes: [{ x: 59.7, y: 552.9, w: 89.6, h: 17.4 }],
+                    confidence: 0.99,
+                },
+            ],
+        };
+        vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(
+            new Response(JSON.stringify(extraction), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            }),
+        );
+
+        renderWithProviders(<GroundedExtractionPanel objectId="object-1" />);
+
+        const pageImage = await screen.findByAltText('Page 1');
+        expect(pageImage.getAttribute('src')).toContain('page-1.original.jpg');
+
+        fireEvent.click(screen.getByRole('button', { name: 'Checkerboard' }));
+        await waitFor(() => expect(screen.getByAltText('Page 1').getAttribute('src')).toContain('page-1.grid.jpg'));
+
+        fireEvent.click(screen.getByText('DFVS25'));
+        expect(screen.getByText('E38:J38')).not.toBeNull();
+        expect(screen.getByRole('button', { name: 'part_number' }).getAttribute('title')).toContain('E38:J38');
+    });
+});