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

package/src/features/store/objects/selection/actions/ChangeTypeAction.tsx

@@ -56,12 +56,8 @@ export function ChangeTypeActionComponent({ action, objectIds, children }: Actio
                 title="Change Content Type"
                 confirmLabel="Change Type"
             >
-                <div className="text-sm flex flex-col gap-x-2">
-                    <p>Choose a new Content Type for the selected object{objectIds.length > 1 ? 's' : ' '}
-                        or let the system choose or generate a type based on the content.</p>
-                    <p className="pt-2 text-xs">Note: This action will raise the <code>change_type</code> event and will trigger the standard intake workflows
-                        which may reset the object properties.</p>
-                </div>
+                <p className="pt-2 text-xs">Note: This action will raise the <code>change_type</code> event and will trigger the standard intake workflows
+                    which may reset the object properties.</p>
             </SelectContentTypeModal>
         </div>
     )

package/src/features/store/objects/selection/actions/ExportPropertiesAction.tsx

@@ -102,9 +102,7 @@ export function ExportPropertiesComponent({ action, objectIds }: ActionComponent
     }
 
     return (
-        <div>
-            <ExportPropertiesModal isExporting={isExporting} isOpen={isOpen} onClose={onExportType} />
-        </div>
+        <ExportPropertiesModal isExporting={isExporting} isOpen={isOpen} onClose={onExportType} />
     )
 }
 

package/src/features/store/objects/upload/DocumentUploadModal.tsx

@@ -1,6 +1,7 @@
 import { Collection, ContentObjectTypeItem, DynamicCollection } from "@vertesia/common";
 import { Button, MessageBox, Modal, ModalBody, ModalFooter, ModalTitle, SelectBox, Spinner, useToast, VTooltip } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
+import { useTypeRegistry } from "../../types/TypeRegistryProvider.js";
 import { DropZone, UploadSummary } from '@vertesia/ui/widgets';
 import { AlertCircleIcon, CheckCircleIcon, FileIcon, FolderIcon, Info, UploadIcon, XCircleIcon } from "lucide-react";
 import { ReactNode, useEffect, useMemo, useState } from "react";
@@ -69,7 +70,8 @@ export function DocumentUploadModal({
     showTypeSelectionOnly = false,
     allowFolders = true,
 }: DocumentUploadModalProps) {
-    const { client, typeRegistry } = useUserSession();
+    const { client } = useUserSession();
+    const { registry: typeRegistry } = useTypeRegistry();
     const toast = useToast();
     const [files, setFiles] = useState<File[]>([]);
     const [processedFiles, setProcessedFiles] = useState<FileWithMetadata[]>([]);

package/src/features/store/objects/upload/useSmartFileUploadProcessing.ts

@@ -1,4 +1,4 @@
-import { ComplexSearchPayload, ContentObjectItem } from "@vertesia/common";
+import { ComplexSearchPayload, ContentObjectItem, FindPayload } from "@vertesia/common";
 import { useToast } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { Md5 } from "ts-md5";
@@ -128,25 +128,31 @@ export function useSmartFileUploadProcessing() {
             const filesWithMetadata = await prepareFilesWithMetadata(files, selectedFolder);
 
             const identifyExistingHash = async () => {
+                const hashes = filesWithMetadata.map((file) => file.hash).filter(Boolean);
+                if (hashes.length === 0) return;
+
                 const query = {
-                    "content.etag": { $in: filesWithMetadata.map((file) => file.hash) },
+                    "content.etag": { $in: hashes },
                 };
 
                 let res: ContentObjectItem[];
 
-                const payload: ComplexSearchPayload = {
-                    query: { match: query },
-                    select: "id content.etag" // Only fetch fields needed for comparison
-                };
-
                 if (limitToCollectionId) {
+                    const payload: ComplexSearchPayload = {
+                        query: { match: query },
+                        select: "id content.etag"
+                    };
                     res = (await client.store.collections.searchMembers(limitToCollectionId, payload)).results;
                 } else {
-                    res = (await client.store.objects.search(payload)).results;
+                    const payload: FindPayload = {
+                        query,
+                        select: "id content.etag"
+                    };
+                    res = await client.store.objects.find(payload);
                 }
 
                 for (const doc of res) {
-                    const file = filesWithMetadata.find((f) => f.hash === doc.content.etag);
+                    const file = filesWithMetadata.find((f) => f.hash === doc.content?.etag);
                     if (file) {
                         file.existingId = doc.id;
                         file.action = FileUploadAction.SKIP;
@@ -196,7 +202,7 @@ export function useSmartFileUploadProcessing() {
                     const file = filesWithMetadata.find(
                         //name must be the same, and location must match (default is "/")
                         (f) =>
-                            f.name === doc.content.name &&
+                            f.name === doc.content?.name &&
                             (f.location ? f.location === doc.location : doc.location === "/"),
                     );
                     if (file) {

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

@@ -5,6 +5,7 @@ import { useWatchSearchResult } from "./search/ObjectTypeSearchContext";
 
 import { EmptyCollection, ErrorBox, Input, SelectBox, useDebounce, useIntersectionObserver, useToast } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
+import { useTypeRegistry } from "./TypeRegistryProvider.js";
 
 import { CreateOrUpdateTypeModal, CreateOrUpdateTypePayload } from "./CreateOrUpdateTypeModal";
 
@@ -14,8 +15,8 @@ interface ContentObjectTypesSearchProps {
     isDirty?: boolean;
 }
 export function ContentObjectTypesSearch({ isDirty = false }: ContentObjectTypesSearchProps) {
-    const session = useUserSession();
-    const { store } = session;
+    const { store } = useUserSession();
+    const { reload: reloadTypes } = useTypeRegistry();
 
     const toast = useToast();
 
@@ -80,7 +81,7 @@ export function ContentObjectTypesSearch({ isDirty = false }: ContentObjectTypes
                 title: "Type created",
                 duration: 2000
             });
-            session.reloadTypes();
+            reloadTypes();
             search.search().then(() => setIsReady(true));
         }).catch(err => {
             toast({

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

@@ -9,8 +9,9 @@ import { Ajv } from "ajv";
 interface ObjectSchemaEditorProps {
     objectType: ContentObjectType;
     onSchemaUpdate: (jsonSchema: any) => void;
+    readonly?: boolean;
 }
-export function ObjectSchemaEditor({ objectType, onSchemaUpdate }: ObjectSchemaEditorProps) {
+export function ObjectSchemaEditor({ objectType, onSchemaUpdate, readonly = false }: ObjectSchemaEditorProps) {
     const { store } = useUserSession();
     const toast = useToast();
     const { theme } = useTheme();
@@ -84,19 +85,19 @@ export function ObjectSchemaEditor({ objectType, onSchemaUpdate }: ObjectSchemaE
 
     const title = (
         <div className='flex gap-2 items-center'><div className="text-base font-semibold">Schema Editor</div>
-            <div>
+            {!readonly && <div>
                 <Button variant="outline" size="sm" onClick={handleOnSave}>
                     {
                         displayJson ? "Edit Schema" : "Edit Json"
                     }
                 </Button>
-            </div>
+            </div>}
         </div>
     );
 
     return (
         <Panel title={title} className="bg-background! h-[calc(100vh-197px)]"
-            action={<Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>}
+            action={!readonly ? <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button> : undefined}
         >
             {
                 displayJson
@@ -105,8 +106,9 @@ export function ObjectSchemaEditor({ objectType, onSchemaUpdate }: ObjectSchemaE
                         language="json"
                         editorRef={editorRef}
                         theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                        options={{ readOnly: readonly }}
                     />
-                    : <SchemaEditor schema={schema} />
+                    : <SchemaEditor schema={schema} readonly={readonly} />
             }
 
 

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

@@ -1,7 +1,7 @@
 import { ContentObjectTypeItem } from "@vertesia/common";
 import { SelectBox } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
 import { useEffect, useState } from "react";
+import { useTypeRegistry } from "./TypeRegistryProvider.js";
 
 const optionLabel = (t: ContentObjectTypeItem | null) => {
     if (t === null) return 'None';
@@ -22,7 +22,7 @@ interface SelectContentTypeProps {
     multiple?: boolean;
 }
 export function SelectContentType({ className, defaultValue, onChange, isClearable, multiple}: SelectContentTypeProps) {
-    const session = useUserSession();
+    const { registry: typeRegistry } = useTypeRegistry();
     const [isMounted, setIsMounted] = useState(false);
     const [selectedType, setSelectedType] = useState<ContentObjectTypeItem | undefined>();
     const [selectedTypes, setSelectedTypes] = useState<ContentObjectTypeItem[]>([])
@@ -30,18 +30,18 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
     useEffect(() => {
         if (!isMounted) {
             setIsMounted(true);
-            if (session.typeRegistry && defaultValue) {
+            if (typeRegistry && defaultValue) {
                 if (multiple && Array.isArray(defaultValue)) {
-                    const types = session.typeRegistry.types.filter(t => defaultValue.includes(t.id));
+                    const types = typeRegistry.types.filter(t => defaultValue.includes(t.id));
                     setSelectedTypes(types);
                 }
-                const type = session.typeRegistry.types.find(t => t.id === defaultValue);
+                const type = typeRegistry.types.find(t => t.id === defaultValue);
                 if (type) {
                     setSelectedType(type);
                 }
             }
         }
-    }, [session.typeRegistry, defaultValue, multiple])
+    }, [typeRegistry, defaultValue, multiple])
 
     const _onChange = (option: ContentObjectTypeItem | null) => {
         setSelectedType(option || undefined);
@@ -57,7 +57,7 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
         return (
             <div className='flex flex-col gap-4 content-between'>
                 <SelectBox<ContentObjectTypeItem>
-                    options={session.typeRegistry?.types || []}
+                    options={typeRegistry?.types || []}
                     value={selectedTypes}
                     onChange={_onChangeMultiple}
                     placeholder="Choose Content Types..."
@@ -74,7 +74,7 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
     return (
         <div className='flex flex-col gap-4 content-between'>
             <SelectBox<ContentObjectTypeItem>
-                options={session.typeRegistry?.types || []}
+                options={typeRegistry?.types || []}
                 value={selectedType}
                 onChange={_onChange}
                 placeholder="Choose a Content Type..."

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

@@ -6,10 +6,11 @@ import {
     ModalFooter,
     ModalTitle,
     SelectBox,
+    VTooltip,
 } from "@vertesia/ui/core";
 import { ContentObjectTypeItem } from "@vertesia/common";
-import { useUserSession } from "@vertesia/ui/session";
-import { CheckCircleIcon } from "lucide-react";
+import { useTypeRegistry } from "./TypeRegistryProvider.js";
+import { CheckCircleIcon, Info } from "lucide-react";
 
 /**
  * Props for the SelectTypeModal component
@@ -46,10 +47,9 @@ export function SelectContentTypeModal({
     title = "Select Content Type",
     children,
     initialSelectedType = null,
-    confirmLabel = "Select Type",
     allowNone = true,
 }: SelectContentTypeModalProps) {
-    const { typeRegistry } = useUserSession();
+    const { registry: typeRegistry } = useTypeRegistry();
     const [selectedType, setSelectedType] = useState<ContentObjectTypeItem | null>(initialSelectedType);
 
     // Get available types from the registry
@@ -63,6 +63,7 @@ export function SelectContentTypeModal({
     // Handle type selection and confirmation
     const handleConfirm = () => {
         onClose(selectedType?.id ?? null);
+        setSelectedType(null);
     };
 
     return (
@@ -72,7 +73,7 @@ export function SelectContentTypeModal({
             className="w-full max-w-xl mx-auto"
         >
             <ModalTitle>{title}</ModalTitle>
-            <ModalBody className="p-6">
+            <ModalBody>
                 {children}
 
                 {/* Type selection */}
@@ -100,41 +101,27 @@ export function SelectContentTypeModal({
                             filterBy="name"
                         />
                     )}
-
-                    {allowNone && (
-                        <div className="mt-2 text-sm text-blue-600 flex items-center">
-                            <CheckCircleIcon className="h-4 w-4 mr-1" />
-                            <span><strong>Type selection is optional.</strong> Leave empty to let Vertesia choose the appropriate type</span>
-                        </div>
-                    )}
                 </div>
 
-                {selectedType ? (
-                    <div className="text-sm text-gray-500 bg-gray-50 p-3 rounded-md mb-4">
-                        <div className="font-medium">{selectedType.name}</div>
-                        {selectedType.description && (
-                            <div className="mt-1">{selectedType.description}</div>
-                        )}
-                    </div>
-                ) : allowNone && (
-                    <div className="text-sm text-blue-600 bg-blue-50 p-3 rounded-md mb-4">
-                        <div className="font-medium">Automatic Type Detection</div>
-                        <div className="mt-1">
-                            Vertesia will analyze each file&apos;s content and automatically select the most appropriate type.
-                            <br />
-                            <span className="mt-1 block font-medium">This is recommended for most uploads.</span>
-                        </div>
+                {!selectedType && (
+                    <div className="flex items-center text-attention">
+                        <CheckCircleIcon className="size-4 mr-1" />
+                        Automatic Type Detection
+                        <VTooltip
+                            description="Vertesia will analyze the content and select the most appropriate type. This is recommended for most uploads and ensures optimal processing."
+                            placement="top" size="xs"
+                        >
+                            <Info className="size-3 ml-2" />
+                        </VTooltip>
                     </div>
                 )}
             </ModalBody>
             <ModalFooter>
-                <Button variant="ghost" onClick={handleClose}>
+                <Button variant="ghost" onClick={handleClose} alt="Cancel">
                     Cancel
                 </Button>
-                <Button
-                    onClick={handleConfirm}
-                >
-                    {selectedType ? `${confirmLabel}: ${selectedType.name}` : allowNone ? "Let Vertesia Choose" : confirmLabel}
+                <Button onClick={handleConfirm} alt="Confirm selection">
+                    Confirm
                 </Button>
             </ModalFooter>
         </Modal>

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

@@ -7,8 +7,9 @@ import { MonacoEditor, EditorApi } from '@vertesia/ui/widgets';
 interface TableLayoutEditorProps {
     objectType: ContentObjectType;
     onLayoutUpdate: (value: ColumnLayout[] | undefined) => void;
+    readonly?: boolean;
 }
-export function TableLayoutEditor({ objectType, onLayoutUpdate }: TableLayoutEditorProps) {
+export function TableLayoutEditor({ objectType, onLayoutUpdate, readonly = false }: TableLayoutEditorProps) {
     const toast = useToast();
     const { theme } = useTheme();
 
@@ -79,13 +80,14 @@ export function TableLayoutEditor({ objectType, onLayoutUpdate }: TableLayoutEdi
 
     return (
         <Panel title="Table Layout Editor" className="bg-background! h-[calc(100vh-197px)]" action={
-            <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>
+            !readonly ? <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button> : undefined
         }>
             <MonacoEditor
                 value={value}
                 language="json"
                 editorRef={editorRef}
                 theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                options={{ readOnly: readonly }}
             />
         </Panel>
     )

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

@@ -0,0 +1,73 @@
+import { createContext, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
+
+import { useUserSession } from '@vertesia/ui/session';
+import { TypeRegistry } from './TypeRegistry.js';
+
+interface TypeRegistryContextValue {
+    registry: TypeRegistry | undefined;
+    isLoading: boolean;
+    load: () => Promise<void>;
+    reload: () => Promise<void>;
+}
+
+const TypeRegistryContext = createContext<TypeRegistryContextValue>({
+    registry: undefined,
+    isLoading: false,
+    load: () => Promise.resolve(),
+    reload: () => Promise.resolve(),
+});
+
+interface TypeRegistryProviderProps {
+    children: ReactNode;
+}
+
+export function TypeRegistryProvider({ children }: TypeRegistryProviderProps) {
+    const { store, project } = useUserSession();
+    const [registry, setRegistry] = useState<TypeRegistry | undefined>();
+    const [isLoading, setIsLoading] = useState(false);
+    const fetchRef = useRef(false);
+
+    const load = useCallback(async () => {
+        if (!project || fetchRef.current) return;
+        fetchRef.current = true;
+        setIsLoading(true);
+        try {
+            const types = await store.types.catalog.list({ layout: true });
+            setRegistry(new TypeRegistry(types));
+        } catch (err) {
+            console.error('Failed to fetch types', err);
+        } finally {
+            setIsLoading(false);
+            fetchRef.current = false;
+        }
+    }, [store, project]);
+
+    const reload = useCallback(async () => {
+        fetchRef.current = false;
+        return load();
+    }, [load]);
+
+    // Reset when project changes
+    useEffect(() => {
+        setRegistry(undefined);
+        fetchRef.current = false;
+    }, [project]);
+
+    return (
+        <TypeRegistryContext.Provider value={{ registry, isLoading, load, reload }}>
+            {children}
+        </TypeRegistryContext.Provider>
+    );
+}
+
+export function useTypeRegistry() {
+    const ctx = useContext(TypeRegistryContext);
+
+    useEffect(() => {
+        if (!ctx.registry && !ctx.isLoading) {
+            ctx.load();
+        }
+    }, [ctx.registry, ctx.isLoading]);
+
+    return ctx;
+}

package/src/features/store/types/index.ts

@@ -6,3 +6,5 @@ export * from "./search";
 export * from "./SelectContentType";
 export * from "./SelectContentTypeModal";
 export * from "./TableLayoutEditor";
+export * from "./TypeRegistry";
+export * from "./TypeRegistryProvider";

package/src/features/user/UserInfo.tsx

@@ -111,8 +111,9 @@ interface AgentAvatarProps extends InfoProps {
     agentId: string;  // Format: accountId:projectId:timestamp
     onBehalfOfType?: string;
     onBehalfOfId?: string;
+    isScheduleAgent?: boolean;
 }
-function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false, size = "md" }: AgentAvatarProps) {
+function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false, size = "md", isScheduleAgent = false }: AgentAvatarProps) {
     // Fetch user info - must call hooks unconditionally per React rules
     const shouldFetchUser = onBehalfOfType === 'user' && onBehalfOfId;
     const shouldFetchApiKey = onBehalfOfType === 'apikey' && onBehalfOfId;
@@ -126,6 +127,7 @@ function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false,
 
     // Determine title and description
     const title = user ? "Agent on behalf of" : apiKey ? "Agent on behalf of API key" : "Service Account";
+    const _title = isScheduleAgent ? `Schedule ${title}` : title;
 
     const description = (
         <div className="space-y-2">
@@ -160,7 +162,7 @@ function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false,
     );
 
     return (
-        <UserPopoverPanel title={title} description={description}>
+        <UserPopoverPanel title={_title} description={description}>
             <div className="flex items-center gap-2">
                 <div className="flex items-center -space-x-2">
                     <Avatar
@@ -188,7 +190,7 @@ function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false,
                 </div>
                 {showTitle && (
                     <div className="text-sm font-semibold truncate">
-                        {user ? `Agent (${user.name || user.email})` : apiKey ? `Agent (${apiKey.name})` : "Agent"}
+                        {user ? `Agent (${user.name || user.email})` : apiKey ? `Agent (${apiKey.name})` : title}
                     </div>
                 )}
             </div>
@@ -274,6 +276,22 @@ export function UserInfo({ userRef, showTitle = false, size = "md" }: UserInfoPr
             />
         }
 
+        case PrincipalType.Schedule: {
+            // format: schedule:agentId:user:userId
+            const agentId = parts[1];
+            const onBehalfOfType = parts[2];
+            const onBehalfOfId = parts[3];
+
+            return <AgentAvatar
+                agentId={agentId}
+                onBehalfOfType={onBehalfOfType}
+                onBehalfOfId={onBehalfOfId}
+                showTitle={showTitle}
+                size={size}
+                isScheduleAgent={true}
+            />
+        }
+
         case PrincipalType.ApiKey:
             return <ApiKeyAvatar keyId={parts[1]} size={size} showTitle={showTitle} />
 

package/src/features/utils/print.ts

@@ -105,7 +105,6 @@ const PRINT_STYLES = `
   .vprose blockquote,
   .vprose figure,
   .vprose img,
-  .recharts-wrapper,
   [class*="chart"],
   [class*="Chart"] {
     break-inside: avoid;

package/src/layout/Sidebar.tsx

@@ -86,8 +86,9 @@ export interface SidebarItemProps {
     className?: string;
     id?: string; //HTML ID of the element
     external?: boolean; //If true, the link will open in a new tab
+    replace?: boolean; //If true, navigation replaces the current history entry instead of pushing
 }
-export function SidebarItem({ external, className, tools, children, icon: Icon, href, current, onClick }: SidebarItemProps) {
+export function SidebarItem({ external, className, tools, children, icon: Icon, href, current, onClick, replace }: SidebarItemProps) {
     const { toggleMobile } = useSidebarToggle();
     const _closeSideBar = () => {
         setTimeout(() => {
@@ -105,7 +106,7 @@ export function SidebarItem({ external, className, tools, children, icon: Icon,
     }
     return (
         <li>
-            <Nav onClick={_closeSideBar}>
+            <Nav onClick={_closeSideBar} replace={replace}>
                 <SidebarTooltip text={children as string}>
                     <a
                         href={href}

package/src/router/HistoryNavigator.ts

@@ -213,7 +213,15 @@ export class HistoryNavigator {
             this.fireLocationChange(new AfterLocationChangeEvent(type, to, state));
         }
         const _linkNavListener = (ev: MouseEvent) => {
-            const url = getElementHrefAsUrl(ev.target as HTMLElement)
+            const target = ev.target as HTMLElement;
+            // Skip anchors with download attribute or blob: URLs - they are file downloads, not navigation
+            if (target.tagName.toLowerCase() === 'a' && (
+                (target as HTMLAnchorElement).hasAttribute('download') ||
+                (target as HTMLAnchorElement).href?.startsWith('blob:')
+            )) {
+                return;
+            }
+            const url = getElementHrefAsUrl(target)
             if (url && url.origin === window.location.origin) {
                 ev.preventDefault();
                 const to = new URL(this.addStickyParams(url.href));

package/src/router/Nav.tsx

@@ -12,15 +12,20 @@ interface NavProps {
      * @returns
      */
     onClick?: (ev: SyntheticEvent) => void;
+    /**
+     * If true, use replaceState instead of pushState (no new browser history entry).
+     * Defaults to true for backward compatibility.
+     */
+    replace?: boolean;
 }
-export function Nav({ children, onClick }: NavProps) {
+export function Nav({ children, onClick, replace = true }: NavProps) {
     const navigate = useNavigate();
     const _onClick = (ev: SyntheticEvent) => {
         const link = (ev.target as HTMLElement).closest('a');
         if (link && link.href) {
             ev.stopPropagation();
             ev.preventDefault();
-            navigate(link.href, { replace: true });
+            navigate(link.href, { replace });
             onClick?.(ev);
         }
     }