@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0

package/src/features/facets/AgentRunnerFacetsNav.tsx

@@ -1,5 +1,6 @@
 import { Button, Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
-import { useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { VInteractionFacet } from './utils/VInteractionFacet';
 import { VStringFacet } from './utils/VStringFacet';
 import { VUserFacet } from './utils/VUserFacet';
 import { SearchInterface } from './utils/SearchInterface';
@@ -9,6 +10,7 @@ interface AgentRunnerFacetsNavProps {
     facets: {
         statuses?: any[];
         initiated_by?: any[];
+        interactions?: any[];
     };
     search: SearchInterface;
 }
@@ -17,46 +19,51 @@ interface AgentRunnerFacetsNavProps {
 export function useAgentRunnerFilterGroups(facets: AgentRunnerFacetsNavProps['facets']): FilterGroup[] {
     const customFilterGroups: FilterGroup[] = [];
 
-    if (facets.statuses) {
-        const statusFilterGroup = VStringFacet({
-            search: null as any, // This will be provided by the search context
-            buckets: facets.statuses || [],
-            name: 'status',
-            placeholder: 'Status',
-        });
-        customFilterGroups.push(statusFilterGroup);
-    }
-
-    if (facets.initiated_by) {
-        const initiatedByFilterGroup = VUserFacet({
-            buckets: facets.initiated_by || [],
-            name: 'initiated_by',
-            placeholder: 'Initiated By'
-        });
-        customFilterGroups.push(initiatedByFilterGroup);
-    }
-
-    const dateAfterFilterGroup = {
+    customFilterGroups.push({
+        name: 'id',
+        placeholder: 'Run ID',
+        type: 'text',
+        multiple: false
+    });
+
+    customFilterGroups.push(VInteractionFacet({
+        buckets: facets.interactions || [],
+        name: 'interaction',
+        placeholder: 'Interaction',
+    }));
+
+    customFilterGroups.push(VStringFacet({
+        search: null as any, // This will be provided by the search context
+        buckets: facets.statuses || [],
+        name: 'status',
+        placeholder: 'Status',
+    }));
+
+    customFilterGroups.push(VUserFacet({
+        buckets: facets.initiated_by || [],
+        name: 'initiated_by',
+        placeholder: 'Initiated By'
+    }));
+
+    customFilterGroups.push({
         name: 'start',
         placeholder: 'Started After',
         type: 'date' as const,
         multiple: false
-    };
-    customFilterGroups.push(dateAfterFilterGroup);
+    });
 
-    const dateBeforeFilterGroup = {
+    customFilterGroups.push({
         name: 'end',
         placeholder: 'Started Before',
         type: 'date' as const,
         multiple: false
-    };
-    customFilterGroups.push(dateBeforeFilterGroup);
+    });
 
     return customFilterGroups;
 }
 
-// Hook to create filter change handler for agent runners
-export function useAgentRunnerFilterHandler(search: SearchInterface) {
+// Create filter change handler for agent runners
+export function createAgentRunnerFilterHandler(search: SearchInterface) {
     return (newFilters: BaseFilter[]) => {
 
         // Clear all filters first, then apply new ones
@@ -90,14 +97,26 @@ export function useAgentRunnerFilterHandler(search: SearchInterface) {
 // Legacy component for backward compatibility
 export function AgentRunnerFacetsNav({ facets, search }: AgentRunnerFacetsNavProps) {
     const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const didMountRef = useRef(false);
+    const skipNextSearchRef = useRef(
+        typeof window !== 'undefined' && Boolean(new URLSearchParams(window.location.search).get('filters'))
+    );
     const filterGroups = useAgentRunnerFilterGroups(facets);
-    const handleFilterLogic = useAgentRunnerFilterHandler(search);
+    const handleFilterLogic = useMemo(() => createAgentRunnerFilterHandler(search), [search]);
 
-    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
-        const newFilters = typeof value === 'function' ? value(filters) : value;
-        setFilters(newFilters);
-        handleFilterLogic(newFilters);
-    };
+    useEffect(() => {
+        if (!didMountRef.current) {
+            didMountRef.current = true;
+            return;
+        }
+
+        if (skipNextSearchRef.current) {
+            skipNextSearchRef.current = false;
+            return;
+        }
+
+        handleFilterLogic(filters);
+    }, [filters, handleFilterLogic]);
 
     const handleRefetch = () => {
         search.search();
@@ -107,7 +126,7 @@ export function AgentRunnerFacetsNav({ facets, search }: AgentRunnerFacetsNavPro
         <FilterProvider
             filterGroups={filterGroups}
             filters={filters}
-            setFilters={handleFilterChange}
+            setFilters={setFilters}
         >
             <div className='flex justify-between mb-1'>
                 <div className='flex gap-2 items-center'>

package/src/features/facets/RunsFacetsNav.tsx

@@ -194,16 +194,16 @@ export function RunsFacetsNav({ facets, search }: RunsFacetsNavProps) {
             filters={filters}
             setFilters={handleFilterChange}
         >
-            <div className='flex justify-between mb-1'>
-                <FilterBtn />
+            <div className='flex justify-between mb-1 sticky top-2 py-2 z-10 bg-background'>
+                <div className='flex gap-2 items-center'>
+                    <FilterBtn />
+                    <FilterBar />
+                    <FilterClear />
+                </div>
                 <Button onClick={handleRefetch} variant='outline' title="Refresh">
                     <RefreshCw className="size-5" />
                 </Button>
             </div>
-            <div className='flex gap-2 items-center'>
-                <FilterBar />
-                <FilterClear />
-            </div>
         </FilterProvider>
     );
 }

package/src/features/facets/index.ts

@@ -14,4 +14,4 @@ export { DocumentsFacetsNav, useDocumentFilterGroups, useDocumentFilterHandler }
 export { InteractionsFacetsNav, useInteractionsFilterGroups, useInteractionsFilterHandler } from "./InteractionsFacetsNav";
 export { PromptsFacetsNav, usePromptsFilterGroups, usePromptsFilterHandler } from "./PromptsFacetsNav";
 export { CollectionsFacetsNav, useCollectionsFilterGroups, useCollectionsFilterHandler } from "./CollectionsFacetsNav";
-export { AgentRunnerFacetsNav, useAgentRunnerFilterGroups, useAgentRunnerFilterHandler } from "./AgentRunnerFacetsNav";
+export { AgentRunnerFacetsNav, useAgentRunnerFilterGroups, createAgentRunnerFilterHandler } from "./AgentRunnerFacetsNav";

package/src/features/layout/GenericPageNavHeader.tsx

@@ -7,7 +7,7 @@ import { capitalize } from 'lodash-es';
 import { useNavigate } from '@vertesia/ui/router';
 
 interface GenericPageNavHeaderProps {
-    title: string | JSX.Element;
+    title?: string | JSX.Element;
     description?: string | JSX.Element;
     actions?: ReactNode | ReactNode[];
     breadcrumbs?: JSX.Element[]
@@ -17,7 +17,14 @@ interface GenericPageNavHeaderProps {
     useDynamicBreadcrumbs?: boolean;
 }
 
-export function GenericPageNavHeader({ className, children, title, description, actions, breadcrumbs, isCompact = false, useDynamicBreadcrumbs = true }: GenericPageNavHeaderProps) {
+// Matches MongoDB ObjectId (24 hex), UUID (36 chars with dashes), or any segment containing digits mixed with letters
+const ID_SEGMENT_PATTERN = /^[a-f0-9]{24}$|^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$|^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z0-9_-]{8,}$/i;
+
+function isIdSegment(segment: string): boolean {
+    return ID_SEGMENT_PATTERN.test(segment);
+}
+
+export function GenericPageNavHeader({ className, children, title, description, actions, breadcrumbs, useDynamicBreadcrumbs = true }: GenericPageNavHeaderProps) {
     const navigate = useNavigate();
 
     function formatTitle(title: string): string {
@@ -29,53 +36,63 @@ export function GenericPageNavHeader({ className, children, title, description,
     }
 
     const buildBreadcrumbLabel = (entry: any): string => {
+        if (entry?.title) {
+            return entry.title;
+        }
+
         const href = entry?.href || '';
         if (!href) return 'Page';
-        
+
         const cleanHref = href.split('#')[0].split('?')[0];
         const pathSegments: string[] = (cleanHref as string).split('/').filter((segment: string) => segment.length > 0);
-        
-        if (pathSegments.length === 3) {
-            if (entry.title !== document.title && entry.title) {
-                return entry.title;
-            }
-            const secondSegment = pathSegments[1];
-            return `${formatTitle(secondSegment)} Detail (...${pathSegments[2].slice(-6)})`;
-        } else if (pathSegments.length >= 2) {
+
+        if (pathSegments.length >= 1) {
             return formatTitle(pathSegments[pathSegments.length - 1]);
-        } else if (pathSegments.length === 1) {
-            return formatTitle(pathSegments[0]);
         }
-        
+
         return 'Page';
     }
 
     // Build breadcrumb items from history chain and current breadcrumbs
-    const buildBreadcrumbItems = (): Array<{ label: string, href?: string, onClick?: () => void }> => {
-        const items: Array<{ label: string, href?: string, onClick?: () => void, clearHistory?: boolean }> = [];
-
-        // Add items from history chain
-        if (useDynamicBreadcrumbs && typeof window !== 'undefined' && window.history.state?.historyChain) {
-            const historyChain = window.history.state.historyChain;
-            historyChain.forEach((entry: any, index: number) => {
-                const stepsBack = historyChain.length - index;
-                items.push({
-                    label: buildBreadcrumbLabel(entry),
-                    href: entry.href,
-                    onClick: () => navigate(entry.href, { stepsBack: stepsBack })
+    const buildBreadcrumbItems = (): Array<{ label: string | ReactNode, href?: string, onClick?: () => void }> => {
+        const items: Array<{ label: string | ReactNode, href?: string, onClick?: () => void, clearHistory?: boolean }> = [];
+
+        if (useDynamicBreadcrumbs && typeof window !== 'undefined') {
+            const historyChain = window.history.state?.historyChain;
+
+            if (historyChain) {
+                // Use existing history chain
+                historyChain.forEach((entry: any, index: number) => {
+                    const stepsBack = historyChain.length - index;
+                    items.push({
+                        label: buildBreadcrumbLabel(entry),
+                        href: entry.href,
+                        onClick: () => navigate(entry.href, { stepsBack: stepsBack })
+                    });
                 });
-            });
+            } else {
+                // Infer parents from URL when navigating directly to a detail page
+                const segments = window.location.pathname.split('/').filter(s => s.length > 0);
+                for (let i = 0; i < segments.length; i++) {
+                    if (isIdSegment(segments[i])) {
+                        const parentPath = '/' + segments.slice(0, i).join('/');
+                        items.push({
+                            label: formatTitle(segments[i - 1] || parentPath),
+                            href: parentPath,
+                            onClick: () => navigate(parentPath, { isBasePathNested: false}),
+                        });
+                    }
+                }
+            }
         }
 
         // Add current page breadcrumbs
         if (breadcrumbs && breadcrumbs.length > 0) {
             breadcrumbs.forEach((breadcrumb: any) => {
-                // Extract text content from React element
-                const label = typeof breadcrumb?.props?.children === 'string'
-                    ? breadcrumb.props.children
-                    : 'Page';
+                // Preserve the entire React element as label
+                const label = breadcrumb.props?.children || breadcrumb;
 
-                items.push(( breadcrumb?.props?.href ) ? {
+                items.push((breadcrumb?.props?.href) ? {
                     href: breadcrumb?.props?.href,
                     label: label,
                     onClick: () => navigate(breadcrumb.props.href, { replace: breadcrumb.props.clearBreadcrumbs }),
@@ -91,28 +108,34 @@ export function GenericPageNavHeader({ className, children, title, description,
     const breadcrumbItems = buildBreadcrumbItems();
 
     return (
-        <div className={clsx(isCompact ? 'pb-0' : 'pb-2', 'p-4 flex flex-col', className)}>
+        <div className={clsx('pb-0 pl-4 pr-2 py-2 flex flex-col', className)}>
             <div className='flex items-start gap-4'>
-                <div className="w-full flex place-content-between h-auto min-h-8 flex-col items-start">
-                    <nav className="flex-1 flex justify-start text-xs">
+                <div className="w-full flex place-content-between h-auto min-h-8 flex-col items-start justify-center">
+                    <nav className="flex-1 flex justify-start text-sm">
                         {breadcrumbItems.length > 0 && (
                             <Breadcrumbs
                                 path={breadcrumbItems}
-                                separator={<ChevronRight className="w-3.5 h-3.5" />}
+                                separator={<ChevronRight className="size-3.5" />}
                                 maxItems={4}
                             />
                         )}
-                    </nav>
-                    <div className='flex gap-2 items-center'>
-                        <h1 className="text-xl font-semibold break-all">{title}</h1>
                         {
                             description &&
                             <VTooltip
                                 description={description}>
-                                <Info className="size-4 text-muted" />
+                                <Info className="size-4 text-muted ml-4" />
                             </VTooltip>
                         }
-                    </div>
+                    </nav>
+                    {
+                        title && (
+                            <div className='flex gap-2 items-center'>
+                                <h1 className="text-xl font-semibold break-all">{title}</h1>
+
+                            </div>
+
+                        )
+                    }
                 </div>
                 <div className="flex gap-x-2 shrink-0">{actions}</div>
             </div>

package/src/features/layout/NotFoundView.tsx

@@ -1,11 +1,14 @@
 
+import { useUITranslation } from '../../i18n/index.js';
+
 interface NotFoundViewProps {
 }
 export function NotFoundView({ }: NotFoundViewProps) {
+    const { t } = useUITranslation();
     return (
         <div className="text-center pt-32">
             <h1 className="text-3xl font-bold text-red-500">404</h1>
-            <p className="text-2xl">Page Not Found</p>
+            <p className="text-2xl">{t('layout.pageNotFound')}</p>
         </div>
     )
 }

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

@@ -2,6 +2,7 @@ import { Button, Center, VTooltip } from "@vertesia/ui/core";
 import clsx from "clsx";
 import { ChevronsDown, ChevronsUp, Image, Loader2, Maximize, Minus, Plus, ScanSearch } from "lucide-react";
 import { useRef, KeyboardEvent, useState, useEffect, useCallback } from "react";
+import { useUITranslation } from '../../i18n/index.js';
 import { ImageType, useMagicPdfContext } from "./MagicPdfProvider";
 
 // Zoom levels as percentages (100 = fit to width)
@@ -42,6 +43,7 @@ interface AnnotatedImageSliderProps {
  * Loads first image immediately to determine aspect ratio for stable layout.
  */
 export function AnnotatedImageSlider({ className, currentPage, onChange }: AnnotatedImageSliderProps) {
+    const { t } = useUITranslation();
     const [imageType, setImageType] = useState<ImageType>(ImageType.instrumented);
     const [aspectRatio, setAspectRatio] = useState<number>(DEFAULT_ASPECT_RATIO);
     const [loadedUrls, setLoadedUrls] = useState<Map<number, string>>(new Map());
@@ -250,7 +252,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="Previous page">
+                <Button variant="ghost" size="xs" onClick={goPrev} alt={t('pdf.previousPage')}>
                     <ChevronsUp className='size-4' />
                 </Button>
                 <div className="absolute left-2 flex items-center gap-x-1">
@@ -259,14 +261,14 @@ export function AnnotatedImageSlider({ className, currentPage, onChange }: Annot
                         currentType={imageType}
                         onClick={() => setImageType(ImageType.original)}
                         icon={<Image className="size-4" />}
-                        tooltip="Original images"
+                        tooltip={t('pdf.originalImages')}
                     />
                     <ImageTypeButton
                         type={ImageType.instrumented}
                         currentType={imageType}
                         onClick={() => setImageType(ImageType.instrumented)}
                         icon={<ScanSearch className="size-4" />}
-                        tooltip="Instrumented images"
+                        tooltip={t('pdf.instrumentedImages')}
                     />
                     <div className="w-px h-4 bg-border mx-1" />
                     <ZoomControls
@@ -296,7 +298,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="Next page">
+                <Button variant="ghost" size="xs" onClick={goNext} alt={t('pdf.nextPage')}>
                     <ChevronsDown className='size-4' />
                 </Button>
             </div>
@@ -339,9 +341,10 @@ interface ZoomControlsProps {
     canZoomOut: boolean;
 }
 function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZoomOut }: ZoomControlsProps) {
+    const { t } = useUITranslation();
     return (
         <div className="flex items-center gap-x-0.5">
-            <VTooltip description="Zoom out" placement="bottom" size="xs">
+            <VTooltip description={t('pdf.zoomOut')} placement="bottom" size="xs">
                 <button
                     className={clsx(
                         "p-1 rounded cursor-pointer transition-colors",
@@ -358,7 +361,7 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
             <span className="text-xs text-muted-foreground min-w-[32px] text-center">
                 {zoom}%
             </span>
-            <VTooltip description="Zoom in" placement="bottom" size="xs">
+            <VTooltip description={t('pdf.zoomIn')} placement="bottom" size="xs">
                 <button
                     className={clsx(
                         "p-1 rounded cursor-pointer transition-colors",
@@ -372,7 +375,7 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
                     <Plus className="size-4" />
                 </button>
             </VTooltip>
-            <VTooltip description="Fit to width" placement="bottom" size="xs">
+            <VTooltip description={t('pdf.fitToWidth')} placement="bottom" size="xs">
                 <button
                     className={clsx(
                         "p-1 rounded cursor-pointer transition-colors",
@@ -432,6 +435,7 @@ interface PageNavigatorProps {
     onChange: (page: number) => void;
 }
 function PageNavigator({ currentPage, totalPages, onChange }: PageNavigatorProps) {
+    const { t } = useUITranslation();
     const inputRef = useRef<HTMLInputElement>(null);
     const [inputValue, setInputValue] = useState(String(currentPage));
 
@@ -466,7 +470,7 @@ function PageNavigator({ currentPage, totalPages, onChange }: PageNavigatorProps
 
     return (
         <div className="flex items-center gap-1 text-xs text-muted-foreground">
-            <span>Page</span>
+            <span>{t('pdf.page')}</span>
             <input
                 ref={inputRef}
                 type="text"

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

@@ -1,14 +1,15 @@
 import { ContentObject, DocumentMetadata } from "@vertesia/common";
-import { Button } from "@vertesia/ui/core";
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
-import { Popover } from "@vertesia/ui/widgets";
 import { Download } from "lucide-react";
+import { useUITranslation } from '../../i18n/index.js';
 import { getResourceUrl } from "./MagicPdfProvider";
 
 interface DownloadPopoverProps {
     object: ContentObject;
 }
 export function DownloadPopover({ object }: DownloadPopoverProps) {
+    const { t } = useUITranslation();
     const { client } = useUserSession()
     const onDownload = (name: string) => {
         getResourceUrl(client, object.id, name).then(url => window.open(url, '_blank'));
@@ -33,7 +34,7 @@ export function DownloadPopover({ object }: DownloadPopoverProps) {
                 variant="ghost"
                 size="xs"
                 onClick={() => onDownload("document.md")}
-                alt="Download"
+                alt={t('pdf.download')}
             >
                 <Download className='size-4' />
             </Button>
@@ -42,18 +43,18 @@ export function DownloadPopover({ object }: DownloadPopoverProps) {
 
     // Default XML processor - multiple options, use popover
     return (
-        <Popover strategy='absolute' placement='bottom-start' zIndex={100} offset={8}>
-            <Popover.Trigger click>
+        <Popover>
+            <PopoverTrigger>
                 <Button
                     variant="ghost"
                     size="xs"
-                    alt="Download"
+                    alt={t('pdf.download')}
                 >
                     <Download className='size-4' />
                 </Button>
-            </Popover.Trigger>
-            <Popover.Content>
-                <div className="rounded-md shadow-md border border-border bg-popover min-w-[200px] flex flex-col divide-y divide-border">
+            </PopoverTrigger>
+            <PopoverContent align="start" className="p-0 w-auto">
+                <div className="min-w-[200px] flex flex-col divide-y divide-border">
                     <button className={buttonClass} onClick={() => onDownload("annotated.pdf")}>
                         annotated.pdf
                     </button>
@@ -64,7 +65,7 @@ export function DownloadPopover({ object }: DownloadPopoverProps) {
                         analyzed-pages.json
                     </button>
                 </div>
-            </Popover.Content>
+            </PopoverContent>
         </Popover>
     )
 }

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

@@ -3,6 +3,7 @@ import { Button, ErrorBox, ResizableHandle, ResizablePanel, ResizablePanelGroup,
 import { useUserSession } from "@vertesia/ui/session";
 import { X } from "lucide-react";
 import { Component, ErrorInfo, ReactNode, useState } from "react";
+import { useUITranslation, i18nInstance, NAMESPACE } from '../../i18n/index.js';
 import { PdfPageSlider } from "../pdf-viewer/PdfPageSlider";
 import { AnnotatedImageSlider } from "./AnnotatedImageSlider";
 import { DownloadPopover } from "./DownloadPopover";
@@ -37,7 +38,7 @@ class PdfViewErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
             return (
                 <div className="fixed inset-0 bg-background z-50 flex items-center justify-center">
                     <div className="flex flex-col items-center gap-4 p-8 max-w-md">
-                        <ErrorBox title="Failed to load PDF viewer">
+                        <ErrorBox title={i18nInstance.t('pdf.failedToLoadViewer', { ns: NAMESPACE })}>
                             {this.state.error?.message || 'An unexpected error occurred'}
                         </ErrorBox>
                         {this.props.onClose && (
@@ -59,6 +60,7 @@ interface MagicPdfViewProps {
     onClose?: () => void;
 }
 export function MagicPdfView({ objectId, onClose }: MagicPdfViewProps) {
+    const { t } = useUITranslation();
     const { client } = useUserSession();
 
     const { data: object, error } = useFetch(() => client.store.objects.retrieve(objectId, "+text"), [objectId]);
@@ -67,7 +69,7 @@ export function MagicPdfView({ objectId, onClose }: MagicPdfViewProps) {
         return (
             <div className="fixed inset-0 bg-background z-50 flex items-center justify-center">
                 <div className="flex flex-col items-center gap-4 p-8 max-w-md">
-                    <ErrorBox title="Fetching document failed">{error.message}</ErrorBox>
+                    <ErrorBox title={t('pdf.fetchingDocumentFailed')}>{error.message}</ErrorBox>
                     {onClose && (
                         <Button variant="outline" onClick={onClose}>
                             Close
@@ -88,7 +90,7 @@ export function MagicPdfView({ objectId, onClose }: MagicPdfViewProps) {
                             variant="ghost"
                             size="xs"
                             onClick={onClose}
-                            alt="Close"
+                            alt={t('pdf.close')}
                         >
                             <X className='size-4' />
                         </Button>
@@ -117,6 +119,7 @@ interface _MagicPdfViewProps {
     onClose?: () => void;
 }
 function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
+    const { t } = useUITranslation();
     const { count: totalPages, pdfUrl, pdfUrlLoading } = useMagicPdfContext();
 
     const getProcessorType = (): "xml" | "markdown" => {
@@ -151,7 +154,7 @@ function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
                             <DownloadPopover object={object} />
                         </div>
                         <span className="text-xs text-muted-foreground">
-                            Page {pageNumber} / {totalPages}
+                            {t('pdf.pageOf', { pageNumber, totalPages })}
                         </span>
                         <div className="flex items-center gap-x-2">
                             {!!onClose && (
@@ -159,7 +162,7 @@ function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
                                     variant="ghost"
                                     size="xs"
                                     onClick={onClose}
-                                    alt="Close"
+                                    alt={t('pdf.close')}
                                 >
                                     <X className='size-4' />
                                 </Button>
@@ -196,7 +199,7 @@ function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
                         <DownloadPopover object={object} />
                     </div>
                     <span className="text-xs text-muted-foreground">
-                        Page {pageNumber} / {totalPages}
+                        {t('pdf.pageOf', { pageNumber, totalPages })}
                     </span>
                     <div className="flex items-center gap-x-2">
                         {!!onClose && (
@@ -204,7 +207,7 @@ function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
                                 variant="ghost"
                                 size="xs"
                                 onClick={onClose}
-                                alt="Close"
+                                alt={t('pdf.close')}
                             >
                                 <X className='size-4' />
                             </Button>