@vertesia/ui 0.79.0 → 0.80.0-dev-20251118

package/src/features/store/objects/layout/knowledge.md

@@ -30,8 +30,8 @@ Complete list of supported types:
 1. **string** - Text display
 2. **number** - Numeric display
 3. **date** - Date/time display
-4. **objectLink** - Clickable object reference
-5. **typeLink** - Type reference display
+4. **objectId** - object id with preview button
+5. **objectName** - object name display
 
 ### Column Types and Renderers
 Built-in renderers with parameters:
@@ -48,14 +48,14 @@ Built-in renderers with parameters:
    - `currency`: Format as currency (e.g., USD)
    - `decimals`: Number of decimal places (default: 2)
 
-3. **objectLink**
-   - `title`: Property to use as title (default: "title")
-   - `underline`: Link underline style (default: "hover")
-
-4. **date**
+3. **date**
    - `localized`: Use localized format (e.g., "LLL")
    - `relative`: Use relative time ("fromNow"/"toNow")
 
+4. **objectId**
+   - `slice`: Take substring from index
+
+
 ### Parameter Syntax
 Parameters are added using URL query string syntax:
 ```typescript
@@ -92,12 +92,12 @@ Parameters are added using URL query string syntax:
     {
       "name": "ID",
       "field": "id",
-      "type": "string?slice=-7"
+      "type": "objectId?slice=-7"
     },
     {
       "name": "Name",
       "field": ".",
-      "type": "objectLink?title=name&underline=always"
+      "type": "objectName"
     },
     {
       "name": "Price",
@@ -126,7 +126,7 @@ Parameters are added using URL query string syntax:
     {
       "name": "Document",
       "field": ".",
-      "type": "objectLink"
+      "type": "objectName"
     },
     {
       "name": "Score",

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

@@ -1,13 +1,14 @@
-import { NavLink } from "@vertesia/ui/router";
 import dayjs from "dayjs";
 import LocalizedFormat from "dayjs/plugin/localizedFormat";
 import RelativeTime from "dayjs/plugin/relativeTime";
 import { shortId } from "../../../utils";
+import { Eye } from "lucide-react";
+import { Button } from "@vertesia/ui/core";
 dayjs.extend(RelativeTime);
 dayjs.extend(LocalizedFormat);
 
-const renderers: Record<string, (params?: URLSearchParams) => (value: any, index: number) => React.ReactNode> = {
-    string(params?: URLSearchParams) {
+const renderers: Record<string, (params?: URLSearchParams, onClick?: (id: string) => void) => (value: any, index: number) => React.ReactNode> = {
+    string(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let transforms: ((value: string) => string)[] = [];
         if (params) {
             const slice = params.get("slice");
@@ -48,7 +49,7 @@ const renderers: Record<string, (params?: URLSearchParams) => (value: any, index
         };
     },
 
-    fileSize(_params?: URLSearchParams) {
+    fileSize(_params?: URLSearchParams, _onClick?: (id: string) => void) {
         return (value: any, index: number) => {
             let fileSize = "";
             if (value) {
@@ -69,7 +70,7 @@ const renderers: Record<string, (params?: URLSearchParams) => (value: any, index
         };
     },
 
-    number(params?: URLSearchParams) {
+    number(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let currency: string | undefined;
         let decimals: string | undefined;
         if (params) {
@@ -88,34 +89,54 @@ const renderers: Record<string, (params?: URLSearchParams) => (value: any, index
             return <td key={index}>{v}</td>;
         };
     },
-    // value must be the object itself
-    objectLink(params?: URLSearchParams) {
+    objectId(params?: URLSearchParams, onClick?: (id: string) => void) {
+        let transforms: ((value: string) => string)[] = [];
+        let hasSlice = false;
+        if (params) {
+            const slice = params.get("slice");
+            if (slice) {
+                hasSlice = true;
+                transforms.push((value) => value.slice(parseInt(slice)));
+            }
+        }
+        return (value: any, index: number) => {
+            const displayValue = transforms.reduce((v, t) => t(v), value.id);
+            return (
+                <td key={index} className="flex justify-between items-center gap-2">
+                    {hasSlice ? '~' : ''}{displayValue}
+                    <Button
+                        variant="ghost"
+                        alt="Preview Object"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onClick?.(value.id);
+                        }}
+                    >
+                        <Eye className="size-4" />
+                    </Button>
+                </td>
+            );
+        };
+    },
+    objectName(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let title = "title";
-        //let underline = "hover";
         if (params) {
             title = params.get("title") || "title";
-            //underline = params.get("underline") || "hover";
         }
         return (value: any, index: number) => {
             return (
                 <td key={index}>
-                    <NavLink
-                        topLevelNav
-                        className="underline text-indigo-800 dark:text-indigo-300"
-                        href={`/store/objects/${value.id}`}
-                    >
-                        {value.properties?.[title] || value.name || shortId(value.id)}
-                    </NavLink>
+                    {value.properties?.[title] || value.name || shortId(value.id)}
                 </td>
             );
         };
     },
-    typeLink(_params?: URLSearchParams) {
+    typeLink(_params?: URLSearchParams, _onClick?: (id: string) => void) {
         return (value: any, index: number) => {
             return <td key={index}>{value?.name || "n/a"}</td>;
         };
     },
-    date(params?: URLSearchParams) {
+    date(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let method = "format";
         let arg: string | undefined = "LLL";
         if (params) {

package/src/features/store/objects/search/DocumentSearchContext.ts

@@ -55,9 +55,13 @@ export class DocumentSearch implements SearchInterface {
         this.search();
     }
 
+    setDefaultKeys(keys: any[]) {
+        void keys;
+    }
+
     clearFilters(autoSearch: boolean = true) {
         // Preserve search-related fields when clearing filters
-        const { parent, full_text, vector, weights, score_aggregation, dynamic_scaling, limit } = this.query;
+        const { parent, full_text, vector, weights, score_aggregation, dynamic_scaling, limit, all_revisions } = this.query;
         this.query = {
             parent,
             ...(full_text !== undefined && { full_text }),
@@ -65,6 +69,7 @@ export class DocumentSearch implements SearchInterface {
             ...(weights !== undefined && { weights }),
             ...(score_aggregation !== undefined && { score_aggregation }),
             ...(dynamic_scaling !== undefined && { dynamic_scaling }),
+            ...(all_revisions !== undefined && { all_revisions }),
             ...(limit !== undefined && { limit })
         };
 

package/src/features/store/objects/search/DocumentSearchProvider.tsx

@@ -42,7 +42,7 @@ export function DocumentSearchProvider({ children, limit, parent, typeId, facets
         search.query.parent = parent;
         search.query.name = name;
         return search;
-    }, [typeId, limit]);
+    }, [typeId, limit, collectionId]);
 
     return (
         <SearchContext.Provider value={search}>{children}</SearchContext.Provider>

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

@@ -6,7 +6,7 @@ import { useUserSession } from '@vertesia/ui/session';
 import { useDocumentSearch, useDocumentSelection } from '../../../store';
 import { AddToCollectionAction } from './actions/AddToCollectionAction';
 import { ChangeTypeAction } from './actions/ChangeTypeAction';
-import { DeleteObjectsAction } from './actions/DeleteObjectsAction';
+import { DeleteObjectsAction, DeleteObjectsFromCollectionsAction } from './actions/DeleteObjectsAction';
 import { ExportPropertiesAction } from './actions/ExportPropertiesAction';
 import { RemoveFromCollectionAction } from './actions/RemoveFromCollectionAction';
 import { StartWorkflowAction, StartWorkflowComponent } from './actions/StartWorkflowComponent';
@@ -22,6 +22,7 @@ export class ObjectsActionContext {
         AddToCollectionAction,
         DeleteObjectsAction,
         RemoveFromCollectionAction,
+        DeleteObjectsFromCollectionsAction
     ];
     wfRules: ObjectsActionSpec[] = [];
     callbacks: Record<string, ObjectsActionCallback> = {};
@@ -38,7 +39,7 @@ export class ObjectsActionContext {
             );
         } else {
             return this.allActions.filter(action =>
-                action.id !== 'removeFromCollection'
+                action.id !== 'removeFromCollection' && action.id !== 'deleteFromCollections'
             );
         }
     }

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

@@ -62,6 +62,8 @@ export function UploadObjectsButton({ collectionId }: { collectionId?: string })
     const selectFile = () => {
         const fileInput = document.createElement("input");
         fileInput.type = "file";
+        fileInput.multiple = true;
+        fileInput.accept = "*";
         fileInput?.click();
         fileInput.onchange = (event) => {
             const files = (event.target as HTMLInputElement).files;

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

@@ -85,8 +85,14 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
         });
     }
 
-    const onCollectionChange = (collectionId: string | undefined) => {
-        setSelectedCollectionId(collectionId);
+    const onCollectionChange = (collectionId: string | string[] | undefined, _collection?: any) => {
+        if (typeof collectionId === "string" || typeof collectionId === "undefined") {
+            setSelectedCollectionId(collectionId);
+        } else if (Array.isArray(collectionId) && collectionId.length > 0) {
+            setSelectedCollectionId(collectionId[0]);
+        } else {
+            setSelectedCollectionId(undefined);
+        }
     };
 
     const tabs = [

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

@@ -28,12 +28,21 @@ export function DeleteObjectsActionComponent({ action, objectIds, children }: Ac
             return Promise.resolve(false);
         }
 
+        function limitFilesName(names: string, maxLength: number) {
+            if (names.length <= maxLength) return names;
+            const extIndex = names.lastIndexOf('.');
+            const ext = extIndex !== -1 ? names.substring(extIndex) : '';
+            const baseName = extIndex !== -1 ? names.substring(0, extIndex) : names;
+            const limitedBaseName = baseName.substring(0, maxLength - ext.length - 3);
+            return `${limitedBaseName}...${ext}`;
+        }
+
         return Promise.all(objectIds.map(id => client.store.objects.delete(id))).then((res) => {
             const plural = res.length > 1 ? 's' : '';
             toast({
                 status: 'success',
                 title: `${res.length} object${plural} deleted`,
-                description: `Objects ${res.map(d => d.id).join(", ")} have been deleted`,
+                description: `Objects ${(limitFilesName(res.map(d => d.id).join(", "), 100))} have been deleted`,
                 duration: 2000
             });
 
@@ -71,7 +80,18 @@ export const DeleteObjectsAction: ObjectsActionSpec = {
     name: 'Delete',
     description: 'Delete the selected objects',
     confirm: true,
-    confirmationText: 'Are you sure you want to delete the selected objects?',
+    confirmationText: 'Are you sure you want to delete all the selected objects? This action cannot be undone.',
+    component: DeleteObjectsActionComponent,
+    destructive: true
+}
+
+
+export const DeleteObjectsFromCollectionsAction: ObjectsActionSpec = {
+    id: 'deleteFromCollections',
+    name: 'Delete Objects',
+    description: 'Delete the selected objects',
+    confirm: true,
+    confirmationText: 'Are you sure you want to delete the selected objects?\nThis is not removable from collections.',
     component: DeleteObjectsActionComponent,
     destructive: true
 }

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

@@ -314,6 +314,7 @@ export function DocumentUploadModal({
 
         // Process files in batches of 50
         const BATCH_SIZE = 50;
+        const PROGRESS_UPDATE_INTERVAL = 5; // Update progress every 5 files
 
         // Helper function to process a batch of files
         const processBatch = async (files: FileWithMetadata[], action: "create" | "update") => {
@@ -337,7 +338,8 @@ export function DocumentUploadModal({
                     });
                 }
 
-                // Process the batch
+                // Process the batch with progress tracking
+                let filesProcessedInBatch = 0;
                 await Promise.all(
                     batch.map(async (fileInfo) => {
                         try {
@@ -446,16 +448,23 @@ export function DocumentUploadModal({
                             // Mark the overall success as false if any file fails
                             result.success = false;
                         }
+                        
+                        // Update progress every PROGRESS_UPDATE_INTERVAL files
+                        filesProcessedInBatch++;
+                        if (filesProcessedInBatch % PROGRESS_UPDATE_INTERVAL === 0 || filesProcessedInBatch === batch.length) {
+                            setFileStatuses((currentStatuses) => {
+                                const completedFiles = currentStatuses.filter(
+                                    (f) => f.status === "success" || f.status === "error",
+                                ).length;
+                                const totalFiles = currentStatuses.length;
+                                const progress = totalFiles > 0 ? Math.round((completedFiles / totalFiles) * 100) : 0;
+                                setOverallProgress(progress);
+                                return currentStatuses;
+                            });
+                        }
                     }),
                 );
 
-                // Calculate overall progress after each batch completion
-                const completedFiles = fileStatuses.filter(
-                    (f) => f.status === "success" || f.status === "error",
-                ).length;
-                const totalFiles = fileStatuses.length;
-                const progress = Math.round((completedFiles / totalFiles) * 100);
-                setOverallProgress(progress);
             }
         };
 
@@ -906,7 +915,7 @@ export function DocumentUploadModal({
     };
 
     return (
-        <VModal key={modalKey} isOpen={isOpen} onClose={handleClose} className="mx-auto">
+        <VModal key={modalKey} isOpen={isOpen} onClose={handleClose} className="mx-auto" disableCloseOnClickOutside>
             <VModalTitle description={_description}>{_title}</VModalTitle>
             {renderModalContent()}
             {renderModalFooter()}

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

@@ -134,7 +134,10 @@ export function useSmartFileUploadProcessing() {
 
                 let res: ContentObjectItem[];
 
-                const payload: ComplexSearchPayload = {query: {match: query}, select: undefined}
+                const payload: ComplexSearchPayload = {
+                    query: { match: query },
+                    select: "id content.etag" // Only fetch fields needed for comparison
+                };
 
                 if (limitToCollectionId) {
                     res = (await client.store.collections.searchMembers(limitToCollectionId, payload)).results;
@@ -164,16 +167,16 @@ export function useSmartFileUploadProcessing() {
                     const namesInLocation = unskippedFiles
                         .filter((file) => file.location === location)
                         .map((file) => file.name);
-                    const query = {
-                        location: location ?? "",
+                    const query: Record<string, any> = {
                         "content.name": { $in: namesInLocation },
+                        location: location || "/"
                     };
                     if (limitToCollectionId) {
                         const res = client.store.collections.searchMembers(limitToCollectionId, {
                             query: {
                                 match: query,
                             },
-                            select: undefined,
+                            select: "id content.name location" // Only fetch fields needed for comparison
                         }).then((response) => response.results);
                         queries.push(res);
                     } else {
@@ -181,7 +184,7 @@ export function useSmartFileUploadProcessing() {
                             query: {
                                 match: query,
                             },
-                            select: undefined,
+                            select: "id content.name location" // Only fetch fields needed for comparison
                         });
                         queries.push(res);
                     }
@@ -193,10 +196,10 @@ export function useSmartFileUploadProcessing() {
                 //update fileWithMetadata
                 for (const doc of results) {
                     const file = filesWithMetadata.find(
-                        //name must be the same, and location must the same if present and if not, must be empty string
+                        //name must be the same, and location must match (default is "/")
                         (f) =>
                             f.name === doc.content.name &&
-                            (f.location ? f.location === doc.location : doc.location === ""),
+                            (f.location ? f.location === doc.location : doc.location === "/"),
                     );
                     if (file) {
                         file.existingId = doc.id;

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

@@ -48,7 +48,7 @@ export function CreateOrUpdateTypeModal({ title, isOpen, onClose, okLabel, initi
                     </div>
                     <div>
                         <label className="block text-sm font-medium text-muted">Description</label>
-                        <Textarea value={description} onChange={setDescription} />
+                        <Textarea value={description} onChange={e => setDescription(e.target.value)} />
                     </div>
                 </div>
             </ModalBody>

package/src/features/user/UserInfo.tsx

@@ -125,6 +125,8 @@ export function UserInfo({ userRef, showTitle = false, size = "md" }: UserInfoPr
             return <SystemAvatar showTitle={showTitle} size={size} />
         case PrincipalType.ServiceAccount:
             return <ServiceAccountAvatar accountId={id} showTitle={showTitle} size={size} />
+        case PrincipalType.Agent:
+            return <ServiceAccountAvatar accountId={id} showTitle={showTitle} size={size} />
         case PrincipalType.ApiKey:
             return <ApiKeyAvatar keyId={id} size={size} showTitle={showTitle} />
         default:

package/src/router/HistoryNavigator.ts

@@ -130,10 +130,41 @@ export class HistoryNavigator {
         if (beforeEvent._canceled) {
             return;
         }
-        window.history[options.replace ? 'replaceState' : 'pushState']({
+        
+        // Build navigation chain by preserving previous history
+        const currentState = window.history.state;
+        const currentTitle = document.title;
+        
+        // Create new history chain entry
+        const newChainEntry = {
+            title: currentTitle,
+            href: window.location.pathname + window.location.search + window.location.hash
+        };
+        
+        // Build the history chain - clear if using replace
+        let historyChain: Array<{title: string, href: string}> = [];
+        if (!options.replace && currentState?.historyChain) {
+            historyChain = [...currentState.historyChain];
+        }
+
+        // Only add to chain if not replacing
+        if (!options.replace) {
+            historyChain.push(newChainEntry);
+            
+            // Limit chain length to prevent memory issues (keep last 10 entries)
+            if (historyChain.length > 10) {
+                historyChain = historyChain.slice(-10);
+            }
+        }
+        
+        const stateToStore = {
             from: window.location.href,
+            historyChain: historyChain,
             data: options.state || undefined
-        }, '', to.href);
+        };
+        
+        window.history[options.replace ? 'replaceState' : 'pushState'](stateToStore, '', to.href);
+        
         this.fireLocationChange(new AfterLocationChangeEvent(type, to, options.state));
     }
 

package/src/router/Nav.tsx

@@ -20,7 +20,7 @@ export function Nav({ children, onClick }: NavProps) {
         if (link && link.href) {
             ev.stopPropagation();
             ev.preventDefault();
-            navigate(link.href);
+            navigate(link.href, { replace: true });
             onClick?.(ev);
         }
     }
@@ -40,14 +40,15 @@ interface NavLinkProps {
      * use the root router to navigate
      */
     topLevelNav?: boolean;
+    clearBreadcrumbs?: boolean;
 }
-export function NavLink({ children, href, className, topLevelNav }: NavLinkProps) {
+export function NavLink({ children, href, className, topLevelNav, clearBreadcrumbs = false }: NavLinkProps) {
     const { router } = useRouterContext();
     const _onClick = (ev: SyntheticEvent) => {
         ev.stopPropagation();
         ev.preventDefault();
         const actualRouter = topLevelNav ? router.getTopRouter() : router;
-        actualRouter.navigate(href);
+        actualRouter.navigate(href, { replace: clearBreadcrumbs  });
     }
     return (
         <a href={href} className={className} onClick={_onClick}>{children}</a>

package/src/session/UserSession.ts

@@ -33,6 +33,7 @@ class UserSession {
             this.client = new VertesiaClient({
                 serverUrl: Env.endpoints.studio,
                 storeUrl: Env.endpoints.zeno,
+                tokenServerUrl: Env.endpoints.sts
             });
         }
 

package/src/session/UserSessionProvider.tsx

@@ -1,5 +1,5 @@
 import { onAuthStateChanged } from "firebase/auth";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { UserNotFoundError, getComposableToken } from "./auth/composable";
 import { getFirebaseAuth } from "./auth/firebase";
 import { useAuthState } from "./auth/useAuthState";
@@ -7,7 +7,7 @@ import { Env } from "@vertesia/ui/env";
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, UserSession, UserSessionContext } from "./UserSession";
 
 const devDomains = [".composable.sh", ".vertesia.dev", "vertesia.app"];
-const CENTRAL_AUTH_REDIRECT = "https://internal-auth.vertesia.app/";
+const CENTRAL_AUTH_REDIRECT = "https://internal-auth.vertesia.app/?sts=https://sts-staging.vertesia.io";
 
 function shouldRedirectToCentralAuth() {
     // Authentication is not supported in Docker environment.
@@ -27,6 +27,7 @@ export function UserSessionProvider({ children }: UserSessionProviderProps) {
     const state = hashParams.get("state");
     const [session, setSession] = useState<UserSession>(new UserSession());
     const { generateState, verifyState, clearState } = useAuthState();
+    const hasInitiatedAuthRef = useRef(false);
 
     const redirectToCentralAuth = (projectId?: string, accountId?: string) => {
         const url = new URL(CENTRAL_AUTH_REDIRECT);
@@ -40,6 +41,13 @@ export function UserSessionProvider({ children }: UserSessionProviderProps) {
     };
 
     useEffect(() => {
+        // Make this effect idempotent - only run auth flow once
+        if (hasInitiatedAuthRef.current) {
+            console.log("Auth: skipping duplicate auth flow initiation");
+            return;
+        }
+        hasInitiatedAuthRef.current = true;
+
         console.log("Auth: starting auth flow");
         Env.logger.info("Starting auth flow");
         const currentUrl = new URL(window.location.href);