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

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

@@ -2,8 +2,8 @@ import {
     ContentNature,
     type ContentObject,
     ContentObjectStatus,
+    type ContentObjectTypeItem,
     type DocAnalyzerProgress,
-    type DocProcessorOutputFormat,
     type DocumentMetadata,
     MarkdownRenditionFormat,
     PDF_RENDITION_NAME,
@@ -11,6 +11,7 @@ import {
     WorkflowExecutionStatus,
 } from '@vertesia/common';
 import {
+    Badge,
     Button,
     Dropdown,
     MenuItem,
@@ -26,7 +27,7 @@ import { useUITranslation } from '@vertesia/ui/i18n';
 import { NavLink } from '@vertesia/ui/router';
 import { useUserSession } from '@vertesia/ui/session';
 import { JSONDisplay, Progress } from '@vertesia/ui/widgets';
-import { AlertTriangle, Copy, Download, FileSearch, SquarePen } from 'lucide-react';
+import { AlertTriangle, Copy, Download, FileSearch, ScanSearch, SquarePen } from 'lucide-react';
 import { memo, type RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import {
     type UniversalDocumentConverter,
@@ -34,9 +35,15 @@ import {
     UniversalDocumentViewer,
 } from '../../../document-viewer/UniversalDocumentViewer.js';
 import { MagicPdfView } from '../../../magic-pdf';
+import {
+    GroundedExtractionView,
+    useGroundedExtractionAvailable,
+    useGroundedSummary,
+} from '../../../magic-pdf/GroundedExtractionView.js';
 import { AudioPanel, ImagePanel, VideoPanel } from '../../../media-viewer';
 import { SecureButton } from '../../../permissions/SecureButton.js';
 import { getWorkflowStatusColor, getWorkflowStatusName, isPreviewableAsPdf } from '../../../utils/index.js';
+import { resolveTypeCached } from '../../types/typeCatalogCache.js';
 import { PropertiesEditorModal } from './PropertiesEditorModal';
 import { TextEditorPanel } from './TextEditorPanel.js';
 import { useObjectText, useOfficePdfConversion, usePdfProcessingStatus } from './useContentPanelHooks.js';
@@ -235,6 +242,7 @@ function PropertiesPanel({
     const { t } = useUITranslation();
     const [viewCode, setViewCode] = useState(false);
     const [isPropertiesModalOpen, setPropertiesModalOpen] = useState(false);
+    const groundedSummary = useGroundedSummary(object.id);
 
     const handleOpenPropertiesModal = () => {
         setPropertiesModalOpen(true);
@@ -252,7 +260,7 @@ function PropertiesPanel({
                         <Button
                             variant={`${viewCode ? 'ghost' : 'primary'}`}
                             size="sm"
-                            alt={t('store.previewProperties')}
+                            title={t('store.previewProperties')}
                             onClick={() => setViewCode(!viewCode)}
                         >
                             Properties
@@ -260,7 +268,7 @@ function PropertiesPanel({
                         <Button
                             variant={`${viewCode ? 'primary' : 'ghost'}`}
                             size="sm"
-                            alt={t('store.viewInJsonFormat')}
+                            title={t('store.viewInJsonFormat')}
                             onClick={() => setViewCode(!viewCode)}
                         >
                             JSON
@@ -294,6 +302,26 @@ function PropertiesPanel({
                     </div>
                 </div>
 
+                {groundedSummary && object.properties && (
+                    <div className="flex items-center gap-2 px-2 pb-2">
+                        {typeof groundedSummary.confidence === 'number' && (
+                            <Badge
+                                variant={groundedSummary.confidence >= 0.95 ? 'success' : 'attention'}
+                                title={t('grounded.confidenceHint')}
+                            >
+                                {t('grounded.confidence', {
+                                    percent: Math.floor(groundedSummary.confidence * 100),
+                                })}
+                            </Badge>
+                        )}
+                        <Badge variant={groundedSummary.verified === groundedSummary.total ? 'success' : 'attention'}>
+                            {t('grounded.verifiedOf', {
+                                verified: groundedSummary.verified,
+                                total: groundedSummary.total,
+                            })}
+                        </Badge>
+                    </div>
+                )}
                 {object.properties ? (
                     <div className="flex-1 min-h-0 px-2">
                         <JSONDisplay value={object.properties} viewCode={viewCode} />
@@ -314,17 +342,51 @@ function PropertiesPanel({
     );
 }
 
-function DataPanel({
-    object,
-    loadText,
-    handleCopyContent,
-    refetch,
-}: {
+type IntakeDefaultView = NonNullable<NonNullable<ContentObjectTypeItem['intake']>['default_view']>;
+
+interface DataPanelProps {
     object: ContentObject;
     loadText: boolean;
     handleCopyContent: (content: string, type: 'text' | 'properties') => Promise<void>;
     refetch?: () => Promise<unknown>;
-}) {
+}
+
+/**
+ * Resolves the object's content-type intake policy BEFORE the initial panel is chosen so
+ * `default_view` can drive it. Renders a spinner until the type is resolved — never the
+ * MIME-guessed panel first (no guess-then-flip). Objects without a type render immediately.
+ */
+function DataPanel(props: DataPanelProps) {
+    const { client } = useUserSession();
+    const typeRef = props.object.type;
+    const typeId = typeRef?.id;
+    // Fast path: single-object reads carry the display hint on the API-enriched type ref.
+    const refView = typeRef?.default_view;
+    // Fallback (list-fed contexts, older servers): session-cached catalog lookup.
+    // null = resolved with no default view; undefined = not resolved yet.
+    const { data: fetchedView } = useFetch<IntakeDefaultView | null>(async () => {
+        if (!typeId || refView) return null;
+        const type = await resolveTypeCached(client, typeId);
+        return type?.intake?.default_view ?? null;
+    }, [typeId, refView]);
+    const defaultView = refView ?? fetchedView;
+    if (typeId && !refView && fetchedView === undefined) {
+        return (
+            <div className="flex h-full items-center justify-center">
+                <Spinner size="lg" />
+            </div>
+        );
+    }
+    return <DataPanelContent {...props} defaultView={defaultView ?? undefined} />;
+}
+
+function DataPanelContent({
+    object,
+    loadText,
+    handleCopyContent,
+    refetch,
+    defaultView,
+}: DataPanelProps & { defaultView?: IntakeDefaultView }) {
     const { client } = useUserSession();
     const { t } = useUITranslation();
     const isImage = object?.metadata?.type === ContentNature.Image;
@@ -339,14 +401,32 @@ function DataPanel({
     const metadata = object.metadata as DocumentMetadata;
     const pdfRendition = metadata?.renditions?.find((r) => r.name === PDF_RENDITION_NAME);
 
-    // Determine initial panel view
+    // Determine initial panel view: the type's default_view wins when it applies to this
+    // object; otherwise fall back to the nature/MIME heuristics.
     const getInitialView = (): PanelView => {
+        switch (defaultView) {
+            case 'text':
+                return PanelView.Text;
+            case 'pdf':
+                if (isPdf || isPreviewableAsPdfDoc || pdfRendition) return PanelView.Pdf;
+                break;
+            case 'image':
+                if (isImage) return PanelView.Image;
+                break;
+            case 'properties':
+                // Properties live in the right-hand panel which is always visible; the text
+                // panel shows the rendered property card for extraction-only types.
+                return PanelView.Text;
+            default:
+                break;
+        }
         if (isVideo) return PanelView.Video;
         if (isAudio) return PanelView.Audio;
         if (isImage) return PanelView.Image;
         return PanelView.Text;
     };
 
+    const groundedAvailable = useGroundedExtractionAvailable(object.id);
     const [currentPanel, setCurrentPanel] = useState<PanelView>(getInitialView());
     const [hasVisitedPdfPanel, setHasVisitedPdfPanel] = useState(currentPanel === PanelView.Pdf);
 
@@ -386,7 +466,6 @@ function DataPanel({
     const {
         progress: pdfProgress,
         status: pdfStatus,
-        outputFormat: pdfOutputFormat,
         isComplete: processingComplete,
     } = usePdfProcessingStatus(object.id, shouldPollProgress);
 
@@ -460,7 +539,7 @@ function DataPanel({
                             <Button
                                 variant={currentPanel === PanelView.Image ? 'primary' : 'ghost'}
                                 size="sm"
-                                alt={t('store.viewImage')}
+                                title={t('store.viewImage')}
                                 onClick={() => setCurrentPanel(PanelView.Image)}
                             >
                                 Image
@@ -470,7 +549,7 @@ function DataPanel({
                             <Button
                                 variant={currentPanel === PanelView.Video ? 'primary' : 'ghost'}
                                 size="sm"
-                                alt={t('store.viewVideo')}
+                                title={t('store.viewVideo')}
                                 onClick={() => setCurrentPanel(PanelView.Video)}
                             >
                                 Video
@@ -480,7 +559,7 @@ function DataPanel({
                             <Button
                                 variant={currentPanel === PanelView.Audio ? 'primary' : 'ghost'}
                                 size="sm"
-                                alt={t('store.viewAudio')}
+                                title={t('store.viewAudio')}
                                 onClick={() => setCurrentPanel(PanelView.Audio)}
                             >
                                 Audio
@@ -490,7 +569,7 @@ function DataPanel({
                             <Button
                                 variant={currentPanel === PanelView.Transcript ? 'primary' : 'ghost'}
                                 size="sm"
-                                alt={t('store.viewTranscript')}
+                                title={t('store.viewTranscript')}
                                 onClick={() => setCurrentPanel(PanelView.Transcript)}
                             >
                                 Transcript
@@ -499,7 +578,7 @@ function DataPanel({
                         <Button
                             variant={currentPanel === PanelView.Text ? 'primary' : 'ghost'}
                             size="sm"
-                            alt={t('store.viewText')}
+                            title={t('store.viewText')}
                             onClick={() => setCurrentPanel(PanelView.Text)}
                         >
                             Text
@@ -508,7 +587,7 @@ function DataPanel({
                             <Button
                                 variant={currentPanel === PanelView.Pdf ? 'primary' : 'ghost'}
                                 size="sm"
-                                alt={t('store.viewPdf')}
+                                title={t('store.viewPdf')}
                                 onClick={() => setCurrentPanel(PanelView.Pdf)}
                             >
                                 PDF
@@ -518,7 +597,7 @@ function DataPanel({
                             <Button
                                 variant={currentPanel === PanelView.Pdf ? 'primary' : 'ghost'}
                                 size="sm"
-                                alt={t('store.viewAsPdf')}
+                                title={t('store.viewAsPdf')}
                                 onClick={() => {
                                     setCurrentPanel(PanelView.Pdf);
                                     if (!pdfRendition && !officePdfUrl && !officePdfConverting) {
@@ -531,7 +610,10 @@ function DataPanel({
                             </Button>
                         )}
                     </div>
-                    <PdfActions object={object} />
+                    <div className="flex items-center gap-1">
+                        <PdfActions object={object} />
+                        <GroundedActions objectId={object.id} available={groundedAvailable} />
+                    </div>
                 </div>
                 {currentPanel === PanelView.Text && !showProcessingPanel && !isEditing && (
                     <TextActions
@@ -588,7 +670,7 @@ function DataPanel({
             )}
             {showPdfProcessingPanel && (
                 <div className={getPanelVisibility(true)}>
-                    <PdfProcessingPanel progress={pdfProgress} status={pdfStatus} outputFormat={pdfOutputFormat} />
+                    <PdfProcessingPanel progress={pdfProgress} status={pdfStatus} />
                 </div>
             )}
             {currentPanel === PanelView.Text && !showProcessingPanel && !isEditing && isLoadingText && (
@@ -638,9 +720,6 @@ function TextActions({ object, text, fullText, handleCopyContent, onToggleEdit,
 
     const isMarkdown = content?.type && content.type === 'text/markdown';
 
-    // Get content processor type for file extension detection
-    const contentProcessorType = getContentProcessorType(object);
-
     const handleExportDocument = async (format: MarkdownRenditionFormat, useDefaultTemplate?: boolean) => {
         // Prevent multiple concurrent exports
         if (isDownloading) return;
@@ -675,10 +754,10 @@ function TextActions({ object, text, fullText, handleCopyContent, onToggleEdit,
         // Determine file extension based on content processor type
         let ext = 'txt';
         let mimeType = 'text/plain';
-        if (contentProcessorType === 'xml') {
+        if (content?.type === 'application/xml' || content?.type === 'text/xml') {
             ext = 'xml';
             mimeType = 'text/xml';
-        } else if (contentProcessorType === 'markdown' || isMarkdown) {
+        } else if (isMarkdown) {
             ext = 'md';
             mimeType = 'text/markdown';
         }
@@ -726,7 +805,7 @@ function TextActions({ object, text, fullText, handleCopyContent, onToggleEdit,
                     </>
                 )}
                 {isDownloading ? (
-                    <Button variant="ghost" size="sm" disabled className="flex items-center gap-2" alt="download">
+                    <Button variant="ghost" size="sm" disabled className="flex items-center gap-2" title="download">
                         <Spinner size="sm" />
                     </Button>
                 ) : (
@@ -737,7 +816,7 @@ function TextActions({ object, text, fullText, handleCopyContent, onToggleEdit,
                                 size="sm"
                                 disabled={!text}
                                 className="flex items-center gap-2"
-                                alt="download"
+                                title="download"
                             >
                                 <Download className="size-4" />
                             </Button>
@@ -783,12 +862,12 @@ function TextActions({ object, text, fullText, handleCopyContent, onToggleEdit,
 const TextPanel = memo(({ object, text, isTextCropped, textContainerRef }: TextPanelProps) => {
     const { t } = useUITranslation();
     const isCreatedOrProcessing = isCreatedOrProcessingStatus(object?.status);
+    const content = object.content;
     const contentProcessorType = getContentProcessorType(object);
-    const isXml = contentProcessorType === 'xml';
+    const isXml = contentProcessorType === 'xml' || content?.type === 'application/xml' || content?.type === 'text/xml';
 
     // Check if content type is markdown or plain text
-    const isMarkdownOrText =
-        object.content?.type && (object.content.type === 'text/markdown' || object.content.type === 'text/plain');
+    const isMarkdownOrText = content?.type && (content.type === 'text/markdown' || content.type === 'text/plain');
 
     // Render as markdown if it's markdown/text type OR if text looks like markdown (but not if XML)
     const shouldRenderAsMarkdown = !isXml && (isMarkdownOrText || looksLikeMarkdown(text));
@@ -893,9 +972,8 @@ function TranscriptPanel({
 function PdfActions({ object }: { object: ContentObject }) {
     const [isPdfPreviewOpen, setPdfPreviewOpen] = useState(false);
 
-    // Check if PDF has been processed (content_processor.type is xml or markdown)
     const contentProcessorType = getContentProcessorType(object);
-    const hasPdfAnalysis = contentProcessorType === 'xml' || contentProcessorType === 'markdown';
+    const hasPdfAnalysis = contentProcessorType === 'markdown';
 
     if (!hasPdfAnalysis) return null;
 
@@ -913,6 +991,32 @@ function PdfActions({ object }: { object: ContentObject }) {
     );
 }
 
+function GroundedActions({ objectId, available }: { objectId: string; available: boolean }) {
+    const { t } = useUITranslation();
+    const [isGroundedOpen, setGroundedOpen] = useState(false);
+
+    if (!available) return null;
+
+    return (
+        <>
+            <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setGroundedOpen(true)}
+                title={t('grounded.title')}
+                aria-label={t('grounded.title')}
+            >
+                <ScanSearch className="size-4" />
+            </Button>
+            {isGroundedOpen && (
+                <Portal>
+                    <GroundedExtractionView objectId={objectId} onClose={() => setGroundedOpen(false)} />
+                </Portal>
+            )}
+        </>
+    );
+}
+
 function OfficePdfActions({ object, pdfRendition, officePdfUrl }: OfficePdfActionsProps) {
     const { client } = useUserSession();
     const toast = useToast();
@@ -1057,18 +1161,14 @@ function OfficePdfPreviewPanel({
 function PdfProcessingPanel({
     progress,
     status,
-    outputFormat,
 }: {
     progress?: DocAnalyzerProgress;
     status?: WorkflowExecutionStatus;
-    outputFormat?: DocProcessorOutputFormat;
 }) {
     const { t } = useUITranslation();
     const statusColor = getWorkflowStatusColor(status);
     const statusName = getWorkflowStatusName(status);
-
-    // Show detailed progress (tables, images, visuals) for XML processing
-    const isXmlProcessing = outputFormat === 'xml';
+    const isGroundedExtraction = progress?.phase === 'grounded_extraction';
 
     // Ensure percent is a valid number (handle undefined and NaN from division by zero)
     const percent = progress?.percent != null && !Number.isNaN(progress.percent) ? progress.percent : 0;
@@ -1079,14 +1179,14 @@ function PdfProcessingPanel({
                 <div className="space-y-2">
                     <div className="flex flex-col gap-1">
                         <ProgressLine
-                            name={isXmlProcessing ? 'Analyze Layouts' : 'Analyze Page'}
+                            name={isGroundedExtraction ? 'Prepare Evidence' : 'Analyze Page'}
                             progress={progress.pages}
                         />
-                        {isXmlProcessing && (
+                        {isGroundedExtraction && (
                             <>
-                                <ProgressLine name="Extract Tables" progress={progress.tables} />
-                                <ProgressLine name="Describe Images" progress={progress.images} />
-                                <ProgressLine name="Process Visually" progress={progress.visuals} />
+                                <ProgressLine name="Run OCR" progress={progress.images} />
+                                <ProgressLine name="Extract Grounded Data" progress={progress.tables} />
+                                <ProgressLine name="Review and Annotate" progress={progress.visuals} />
                             </>
                         )}
                     </div>

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

@@ -103,7 +103,7 @@ export function DocumentIcon({
                 <Button
                     variant="ghost"
                     size="sm"
-                    title="Preivew Object"
+                    title="Preview Object"
                     onClick={(e) => {
                         e.stopPropagation();
                         previewObject?.(document.id);

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

@@ -141,7 +141,7 @@ export function VectorSearchWidget({ onChange, isLoading, refresh, searchTypes }
             <Button
                 variant="ghost"
                 onClick={() => setShowSettings(true)}
-                alt={t('store.semanticSearchSettings')}
+                title={t('store.semanticSearchSettings')}
                 className="ms-1"
             >
                 <Settings size={18} />
@@ -194,7 +194,7 @@ export function VectorSearchWidget({ onChange, isLoading, refresh, searchTypes }
                 isLoading={isLoading}
                 onClick={fireSearch}
                 isDisabled={!isReady}
-                alt={t('store.semanticSearch')}
+                title={t('store.semanticSearch')}
             >
                 {t('store.search')}
             </Button>

package/src/features/store/objects/components/useContentPanelHooks.ts

@@ -1,9 +1,4 @@
-import {
-    type DocAnalyzerProgress,
-    type DocProcessorOutputFormat,
-    MarkdownRenditionFormat,
-    WorkflowExecutionStatus,
-} from '@vertesia/common';
+import { type DocAnalyzerProgress, MarkdownRenditionFormat, WorkflowExecutionStatus } from '@vertesia/common';
 import { i18nInstance, NAMESPACE } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import { useCallback, useEffect, useState } from 'react';
@@ -89,7 +84,6 @@ export function usePdfProcessingStatus(objectId: string, shouldPoll: boolean) {
     const [state, setState] = useState<{
         progress?: DocAnalyzerProgress;
         status?: WorkflowExecutionStatus;
-        outputFormat?: DocProcessorOutputFormat;
         isComplete: boolean;
     }>({ isComplete: false });
 
@@ -102,7 +96,6 @@ export function usePdfProcessingStatus(objectId: string, shouldPoll: boolean) {
         const updateStateIfChanged = (
             nextProgress: DocAnalyzerProgress | undefined,
             nextStatus: WorkflowExecutionStatus | undefined,
-            nextOutputFormat: DocProcessorOutputFormat | undefined,
             nextIsComplete: boolean,
         ) => {
             setState((prev) => {
@@ -111,7 +104,6 @@ export function usePdfProcessingStatus(objectId: string, shouldPoll: boolean) {
 
                 if (
                     prev.status === nextStatus &&
-                    prev.outputFormat === nextOutputFormat &&
                     prev.isComplete === nextIsComplete &&
                     prevProgress === nextProgressSignature
                 ) {
@@ -121,7 +113,6 @@ export function usePdfProcessingStatus(objectId: string, shouldPoll: boolean) {
                 return {
                     progress: nextProgress,
                     status: nextStatus,
-                    outputFormat: nextOutputFormat,
                     isComplete: nextIsComplete,
                 };
             });
@@ -134,17 +125,15 @@ export function usePdfProcessingStatus(objectId: string, shouldPoll: boolean) {
                 .analyze(objectId)
                 .getStatus()
                 .then((r) => {
-                    const nextOutputFormat = r.output_format ?? r.progress?.output_format;
-
                     if (r.status === WorkflowExecutionStatus.RUNNING) {
-                        updateStateIfChanged(r.progress, r.status, nextOutputFormat, false);
+                        updateStateIfChanged(r.progress, r.status, false);
                         // Workflow is running, poll every 2 seconds for progress
                         if (!interrupted) {
                             timeoutId = setTimeout(poll, 2000);
                         }
                     } else {
                         // Workflow completed or terminal state
-                        updateStateIfChanged(r.progress, r.status, nextOutputFormat, true);
+                        updateStateIfChanged(r.progress, r.status, true);
                     }
                 })
                 .catch(() => {
@@ -167,7 +156,6 @@ export function usePdfProcessingStatus(objectId: string, shouldPoll: boolean) {
     return {
         progress: state.progress,
         status: state.status,
-        outputFormat: state.outputFormat,
         isComplete: state.isComplete,
     };
 }

package/src/features/store/objects/layout/renderers.tsx

@@ -156,7 +156,6 @@ const renderers: Record<
                 <td key={index} className="flex justify-start items-center gap-2 group/field">
                     <Button
                         variant="ghost"
-                        aria-label="Preview Object"
                         title="Preview Object"
                         onClick={(e) => {
                             e.stopPropagation();
@@ -213,7 +212,7 @@ const renderers: Record<
                     {displayValue}
                     <Button
                         variant="ghost"
-                        alt="Preview Object"
+                        title="Preview Object"
                         onClick={(e) => {
                             e.stopPropagation();
                             onClick?.(objectId);

package/src/features/store/objects/selection/SelectionActions.tsx

@@ -60,7 +60,7 @@ export function SelectionActions({
                 >
                     {(actions) =>
                         actions.length > 0 ? (
-                            <Button variant="ghost" alt="More action" size="sm">
+                            <Button variant="ghost" title="More action" size="sm">
                                 <EllipsisVertical size={16} />
                             </Button>
                         ) : null

package/src/features/store/types/ContentObjectTypesTable.tsx

@@ -81,20 +81,18 @@ export function ContentObjectTypesTable({
                                 <span className="truncate">{obj.name}</span>
                                 <CopyButton content={obj.id} className={ACTION_BTN_CLASS} />
                                 {onFilter && (
-                                    <VTooltip description={`Filter by ${obj.name}`} asChild size="xs">
-                                        <Button
-                                            variant="ghost"
-                                            size="sm"
-                                            aria-label={`Filter by ${obj.name}`}
-                                            className={ACTION_BTN_CLASS}
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                onFilter('name', obj.name);
-                                            }}
-                                        >
-                                            <Filter className="size-3" />
-                                        </Button>
-                                    </VTooltip>
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        title={`Filter by ${obj.name}`}
+                                        className={ACTION_BTN_CLASS}
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            onFilter('name', obj.name);
+                                        }}
+                                    >
+                                        <Filter className="size-3" />
+                                    </Button>
                                 )}
                             </div>
                         </td>