@vertesia/ui 0.77.0 → 0.78.0-dev-9372725

package/src/core/components/shadcn/tabs.tsx

@@ -12,13 +12,15 @@ const TabsContext = React.createContext<{
   setTab?: (name: string) => void;
   responsive?: boolean;
   variant?: "tabs" | "pills";
+  updateHash?: boolean;
 }>({
   size: undefined,
   tabs: undefined,
   current: undefined,
   setTab: undefined,
   responsive: false,
-  variant: "tabs"
+  variant: "tabs",
+  updateHash: true
 });
 
 interface TabsProps {
@@ -31,6 +33,7 @@ interface TabsProps {
   onTabChange?: (tabName: string) => void;
   responsive?: boolean;
   variant?: "tabs" | "pills";
+  updateHash?: boolean;
 }
 
 const VTabs = ({
@@ -42,7 +45,8 @@ const VTabs = ({
   children,
   onTabChange,
   responsive = false,
-  variant = "tabs"
+  variant = "tabs",
+  updateHash = true
 }: TabsProps) => {
   // Initialize value
   const [value, setValue] = React.useState(() => {
@@ -99,6 +103,12 @@ const VTabs = ({
 
   const handleValueChange = (newValue: string) => {
     setValue(newValue);
+    
+    // Update the URL hash when tab changes (only if updateHash is true and not controlled by parent)
+    if (updateHash && !current) {
+      window.location.hash = newValue;
+    }
+    
     if (onTabChange) {
       onTabChange(newValue);
     }
@@ -109,7 +119,7 @@ const VTabs = ({
   }, [handleValueChange]);
 
   return (
-    <TabsContext.Provider value={{ tabs, size: fullWidth ? tabs.length : 0, current: value, setTab, responsive: responsive, variant }}>
+    <TabsContext.Provider value={{ tabs, size: fullWidth ? tabs.length : 0, current: value, setTab, responsive: responsive, variant, updateHash }}>
       <TabsPrimitive.Root
         defaultValue={value || tabs[0]?.name}
         value={value}
@@ -123,7 +133,7 @@ const VTabs = ({
 };
 
 const VTabsBar = ({ className }: { className?: string }) => {
-  const { tabs, size, current, setTab, responsive, variant } = React.useContext(TabsContext);
+  const { tabs, size, current, setTab, responsive, variant, updateHash } = React.useContext(TabsContext);
 
   const fullWidth = size !== 0;
 
@@ -132,13 +142,13 @@ const VTabsBar = ({ className }: { className?: string }) => {
 
     const tab = tabs.find(t => t.name === tabName);
 
-    if (tab?.href) {
+    if (tab?.href && updateHash) {
       window.history.pushState(null, '', tab.href);
     }
 
     setTab(tabName);
 
-  }, [tabs, setTab]);
+  }, [tabs, setTab, updateHash]);
 
   if (!tabs || !setTab) {
     console.warn("TabsBar: No tabs provided or setTab not available");

package/src/core/components/table/index.tsx

@@ -23,7 +23,7 @@ export function RowSkeleton({ columns }: { columns: number }) {
         <tr className="hover:bg-muted">
             {Array(columns).fill(0).map((_, index) =>
                 <td key={index}>
-                    <div className="animate-pulse rounded-xs h-5 bg-gray-200 dark:bg-gray-600"></div>
+                    <div className="animate-pulse rounded-xs h-5 bg-muted"></div>
                 </td>
             )}
         </tr>

package/src/core/hooks/PortalContainerProvider.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+const PortalContainerContext = React.createContext<HTMLElement | undefined>(undefined);
+
+function findOrCreatePortalContainer(root: ShadowRoot | Document, id = "plugin-portal-container") {
+    // look only at direct children
+    for (const child of Array.from(root.children)) {
+        if (child instanceof HTMLElement && child.id === id) {
+            return child;
+        }
+    }
+    // not found → create
+    const container = document.createElement("div");
+    container.id = id;
+    root.appendChild(container);
+    return container;
+}
+
+export function PortalContainerProvider({
+    children,
+    id = "plugin-portal-container",
+}: {
+    children: React.ReactNode;
+    id?: string;
+}) {
+    const ref = React.useRef<HTMLDivElement>(null);
+    const [container, setContainer] = React.useState<HTMLElement | null | undefined>(undefined);
+
+    React.useEffect(() => {
+        if (ref.current) {
+            const root = ref.current.getRootNode();
+            if (root instanceof ShadowRoot || root instanceof Document) {
+                const container = findOrCreatePortalContainer(root, id);
+                setContainer(container);
+            } else {
+                setContainer(null);
+            }
+        }
+    }, [id]);
+
+    // If container not discovered yet → render hidden marker only
+    if (container === undefined) {
+        return <div ref={ref} style={{ display: "none" }} />;
+    }
+
+    // Once container is resolved (null or HTMLElement) → provide it
+    return (
+        <PortalContainerContext.Provider value={container || undefined}>
+            {children}
+        </PortalContainerContext.Provider>
+    );
+}
+
+export function usePortalContainer() {
+    return React.useContext(PortalContainerContext);
+}

package/src/core/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from "./CompositeState.js"
+export * from "./PortalContainerProvider.js"
 export * from "./SharedState.js"
 export * from "./useClickOutside.js"
 export * from "./useCopyToClipboard.js"

package/src/env/index.ts

@@ -12,6 +12,7 @@ export interface EnvProps {
     endpoints: {
         zeno: string,
         studio: string,
+        sts: string, // Security Token Service endpoint
     },
     firebase?: {
         apiKey: string,
@@ -117,4 +118,4 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
 
 const Env = new VertesiaEnvironment();
 
-export { Env };
+export { Env };

package/src/features/facets/CollectionsFacetsNav.tsx

@@ -0,0 +1,94 @@
+import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { useState } from 'react';
+import { SearchInterface } from './utils/SearchInterface';
+
+interface CollectionsFacetsNavProps {
+    facets: {
+        type?: any[];
+        dynamic?: any[];
+    };
+    search: SearchInterface;
+}
+
+// Hook to create filter groups for collections
+export function useCollectionsFilterGroups(facets: CollectionsFacetsNavProps['facets']): FilterGroup[] {
+    void facets;
+    const customFilterGroups: FilterGroup[] = [];
+
+    // Add name filter as text type
+    const nameFilterGroup = {
+        name: 'name',
+        placeholder: 'Name',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(nameFilterGroup);
+
+    return customFilterGroups;
+}
+
+// Hook to create filter change handler for collections
+export function useCollectionsFilterHandler(search: SearchInterface) {
+    return (newFilters: BaseFilter[]) => {
+        if (newFilters.length === 0) {
+            // Clear filters without applying defaults - user wants to remove all filters
+            search.clearFilters(true);
+            return;
+        }
+
+        // Clear all filters first, then apply new ones
+        search.clearFilters(false);
+
+        newFilters.forEach(filter => {
+            if (filter.value && filter.value.length > 0) {
+                const filterName = filter.name;
+                let filterValue;
+                if (filter.type === 'stringList') {
+                    filterValue = filter.value.map(v => typeof v === 'string' ? v : v.value);
+                } else if (filter.multiple) {
+                    filterValue = Array.isArray(filter.value)
+                        ? filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v)
+                        : [typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value];
+                } else {
+                    // Single value - don't wrap in array
+                    filterValue = Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object'
+                        ? (filter.value[0] as any).value
+                        : Array.isArray(filter.value) && filter.value[0]
+                            ? filter.value[0]
+                            : filter.value;
+                }
+
+                search.query[filterName] = filterValue;
+            }
+        });
+
+        search.search();
+    };
+}
+
+// Component for collections filtering
+export function CollectionsFacetsNav({ facets, search }: CollectionsFacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const filterGroups = useCollectionsFilterGroups(facets);
+    const handleFilterLogic = useCollectionsFilterHandler(search);
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        setFilters(newFilters);
+        handleFilterLogic(newFilters);
+    };
+
+    return (
+        <FilterProvider
+            filterGroups={filterGroups}
+            filters={filters}
+            setFilters={handleFilterChange}
+        >
+            <div className="flex gap-2 items-center">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
+    );
+}

package/src/features/facets/DocumentsFacetsNav.tsx

@@ -1,9 +1,9 @@
 import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
 import { useUserSession } from '@vertesia/ui/session';
 import { useState } from 'react';
-import { VStringFacet } from './VStringFacet';
-import { VTypeFacet } from './VTypeFacet';
-import { SearchInterface } from './VFacetsNav';
+import { VStringFacet } from './utils/VStringFacet';
+import { VTypeFacet } from './utils/VTypeFacet';
+import { SearchInterface } from './utils/SearchInterface';
 
 interface DocumentsFacetsNavProps {
     facets: {
@@ -22,7 +22,14 @@ export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets'
     const customFilterGroups: FilterGroup[] = [];
 
     customFilterGroups.push({
-        placeholder: 'Name or ID',
+        placeholder: 'ID',
+        name: 'id',
+        type: 'text',
+        options: [],
+    });
+
+    customFilterGroups.push({
+        placeholder: 'Name',
         name: 'name',
         type: 'text',
         options: [],
@@ -94,7 +101,7 @@ export function useDocumentFilterHandler(search: SearchInterface) {
         newFilters.forEach(filter => {
             if (filter.value && filter.value.length > 0) {
                 const filterName = filter.name;
-                
+
                 let filterValue;
                 if (filter.type === 'date' && filter.multiple) {
                     // Handle date range filters
@@ -117,21 +124,25 @@ export function useDocumentFilterHandler(search: SearchInterface) {
                         }
                     }
                 } else if (filter.multiple) {
-                    filterValue = Array.isArray(filter.value) 
-                        ? filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v)
-                        : [typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value];
+                    if (Array.isArray(filter.value)) {
+                        filterValue = filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v);
+                    } else {
+                        const singleValue = typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value;
+                        filterValue = [singleValue];
+                    }
                 } else {
                     // Single value - don't wrap in array
                     filterValue = Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object'
                         ? (filter.value[0] as any).value
-                        : Array.isArray(filter.value) && filter.value[0] 
+                        : Array.isArray(filter.value) && filter.value[0]
                             ? filter.value[0]
                             : filter.value;
                 }
-                
+
                 if (filterName === 'name') {
-                    search.query.search_term = filterValue;
                     search.query.name = filterValue;
+                } else if (filterName === 'id') {
+                    search.query.id = filterValue;
                 } else {
                     search.query[filterName] = filterValue;
                 }

package/src/features/facets/EnvironmentFacet.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { FacetBucket, FacetNameBucket } from '@vertesia/common';
 import { SelectBox } from '@vertesia/ui/core';
 import { useUserSession } from '@vertesia/ui/session';
-import { facetOptionNameLabel } from './utils';
+import { facetOptionNameLabel } from './utils/utils';
 
 interface EnvironmentFacetProps {
     search: any;

package/src/features/facets/InteractionsFacetsNav.tsx

@@ -0,0 +1,111 @@
+import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { useState } from 'react';
+import { SearchInterface } from './utils/SearchInterface';
+
+interface InteractionsFacetsNavProps {
+    facets: {
+        tags?: any[];
+    };
+    search: SearchInterface;
+}
+
+// Hook to create filter groups for interactions
+export function useInteractionsFilterGroups(facets: InteractionsFacetsNavProps['facets']): FilterGroup[] {
+    void facets;
+    const customFilterGroups: FilterGroup[] = [];
+
+    // Add name filter as string type
+    const nameFilterGroup = {
+        name: 'name',
+        placeholder: 'Name',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(nameFilterGroup);
+
+    // Add prompt name filter as string type
+    const promptNameFilterGroup = {
+        name: 'prompt',
+        placeholder: 'Prompt Name',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(promptNameFilterGroup);
+
+    // Add tags filter as stringList type (allows custom input)
+    const tagsFilterGroup = {
+        name: 'tags',
+        placeholder: 'Tags',
+        type: 'stringList' as const,
+        multiple: true
+    };
+    customFilterGroups.push(tagsFilterGroup);
+
+    return customFilterGroups;
+}
+
+// Hook to create filter change handler for interactions
+export function useInteractionsFilterHandler(search: SearchInterface) {
+    return (newFilters: BaseFilter[]) => {
+        if (newFilters.length === 0) {
+            // Clear filters without applying defaults - user wants to remove all filters
+            search.clearFilters(true, false);
+            return;
+        }
+
+        // Clear all filters first without defaults, then apply new ones
+        search.clearFilters(false, false);
+
+        newFilters.forEach(filter => {
+            if (filter.value && filter.value.length > 0) {
+                const filterName = filter.name;
+                let filterValue;
+                if (filter.type === 'stringList') {
+                    filterValue = filter.value.map(v => typeof v === 'string' ? v : v.value);
+                } else if (filter.multiple) {
+                    filterValue = Array.isArray(filter.value)
+                        ? filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v)
+                        : [typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value];
+                } else {
+                    // Single value - don't wrap in array
+                    filterValue = Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object'
+                        ? (filter.value[0] as any).value
+                        : Array.isArray(filter.value) && filter.value[0]
+                            ? filter.value[0]
+                            : filter.value;
+                }
+
+                search.query[filterName] = filterValue;
+            }
+        });
+
+        search.search();
+    };
+}
+
+// Component for interactions filtering
+export function InteractionsFacetsNav({ facets, search }: InteractionsFacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const filterGroups = useInteractionsFilterGroups(facets);
+    const handleFilterLogic = useInteractionsFilterHandler(search);
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        setFilters(newFilters);
+        handleFilterLogic(newFilters);
+    };
+
+    return (
+        <FilterProvider
+            filterGroups={filterGroups}
+            filters={filters}
+            setFilters={handleFilterChange}
+        >
+            <div className="flex gap-2 items-center">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
+    );
+}

package/src/features/facets/PromptsFacetsNav.tsx

@@ -0,0 +1,110 @@
+import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { useState } from 'react';
+import { SearchInterface } from './utils/SearchInterface';
+
+interface PromptsFacetsNavProps {
+    facets: {
+        role?: any[];
+        status?: any[];
+        tags?: any[];
+    };
+    search: SearchInterface;
+}
+
+// Hook to create filter groups for prompts
+export function usePromptsFilterGroups(facets: PromptsFacetsNavProps['facets']): FilterGroup[] {
+    void facets;
+    const customFilterGroups: FilterGroup[] = [];
+
+    // Add name filter as text type
+    const nameFilterGroup = {
+        name: 'name',
+        placeholder: 'Name',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(nameFilterGroup);
+
+    // Add role filter as select type if role facets are available
+    if (facets.role && facets.role.length > 0) {
+        const rolesFilterGroup = {
+            name: 'role',
+            placeholder: 'Role',
+            type: 'select' as const,
+            options: facets.role.map((facet: { _id: string; count: number }) => ({
+                label: facet._id,
+                value: facet._id,
+                count: facet.count
+            })),
+        };
+        customFilterGroups.push(rolesFilterGroup);
+    }
+
+    return customFilterGroups;
+}
+
+// Hook to create filter change handler for prompts
+export function usePromptsFilterHandler(search: SearchInterface) {
+    return (newFilters: BaseFilter[]) => {
+        if (newFilters.length === 0) {
+            // Clear filters without applying defaults - user wants to remove all filters
+            search.clearFilters(true, false);
+            return;
+        }
+
+        // Clear all filters first without defaults, then apply new ones
+        search.clearFilters(false, false);
+
+        newFilters.forEach(filter => {
+            if (filter.value && filter.value.length > 0) {
+                const filterName = filter.name;
+                let filterValue;
+                if (filter.type === 'stringList') {
+                    filterValue = filter.value.map(v => typeof v === 'string' ? v : v.value);
+                } else if (filter.multiple) {
+                    filterValue = Array.isArray(filter.value)
+                        ? filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v)
+                        : [typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value];
+                } else {
+                    // Single value - don't wrap in array
+                    filterValue = Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object'
+                        ? (filter.value[0] as any).value
+                        : Array.isArray(filter.value) && filter.value[0]
+                            ? filter.value[0]
+                            : filter.value;
+                }
+
+                search.query[filterName] = filterValue;
+            }
+        });
+
+        search.search();
+    };
+}
+
+// Component for prompts filtering
+export function PromptsFacetsNav({ facets, search }: PromptsFacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const filterGroups = usePromptsFilterGroups(facets);
+    const handleFilterLogic = usePromptsFilterHandler(search);
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        setFilters(newFilters);
+        handleFilterLogic(newFilters);
+    };
+
+    return (
+        <FilterProvider
+            filterGroups={filterGroups}
+            filters={filters}
+            setFilters={handleFilterChange}
+        >
+            <div className="flex gap-2 items-center">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
+    );
+}

package/src/features/facets/RunsFacetsNav.tsx

@@ -1,10 +1,11 @@
-import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { Button, Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
 import { useState } from 'react';
-import { VEnvironmentFacet } from './VEnvironmentFacet';
-import { VInteractionFacet } from './VInteractionFacet';
-import { VStringFacet } from './VStringFacet';
-import { VUserFacet } from './VUserFacet';
-import { SearchInterface } from './VFacetsNav';
+import { VEnvironmentFacet } from './utils/VEnvironmentFacet';
+import { VInteractionFacet } from './utils/VInteractionFacet';
+import { VStringFacet } from './utils/VStringFacet';
+import { VUserFacet } from './utils/VUserFacet';
+import { SearchInterface } from './utils/SearchInterface';
+import { RefreshCw } from 'lucide-react';
 
 interface RunsFacetsNavProps {
     facets: {
@@ -24,6 +25,14 @@ interface RunsFacetsNavProps {
 export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): FilterGroup[] {
     const customFilterGroups: FilterGroup[] = [];
 
+    const runIdFilterGroup = {
+        name: 'run_ids',
+        placeholder: 'Run ID',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(runIdFilterGroup);
+
     if (facets.interactions) {
         const interactionFilterGroup = VInteractionFacet({
             buckets: facets.interactions || [],
@@ -108,6 +117,14 @@ export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): Filte
     };
     customFilterGroups.push(dateBeforeFilterGroup);
 
+    const workflowRunIdFilterGroup = {
+        name: 'workflow_run_ids',
+        placeholder: 'Workflow Run ID',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(workflowRunIdFilterGroup);
+
     return customFilterGroups;
 }
 
@@ -130,18 +147,23 @@ export function useRunsFilterHandler(search: SearchInterface) {
                 if (filter.type === 'stringList') {
                     filterValue = filter.value.map(v => typeof v === 'string' ? v : v.value);
                 } else if (filter.multiple) {
-                    filterValue = Array.isArray(filter.value) 
+                    filterValue = Array.isArray(filter.value)
                         ? filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v)
                         : [typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value];
                 } else {
                     // Single value - don't wrap in array
                     filterValue = Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object'
                         ? (filter.value[0] as any).value
-                        : Array.isArray(filter.value) && filter.value[0] 
+                        : Array.isArray(filter.value) && filter.value[0]
                             ? filter.value[0]
                             : filter.value;
                 }
 
+                // Force array format for backend fields that expect arrays
+                if ((filterName === 'run_ids' || filterName === 'workflow_run_ids') && !Array.isArray(filterValue)) {
+                    filterValue = [filterValue];
+                }
+
                 search.query[filterName] = filterValue;
             }
         });
@@ -162,14 +184,23 @@ export function RunsFacetsNav({ facets, search }: RunsFacetsNavProps) {
         handleFilterLogic(newFilters);
     };
 
+    const handleRefetch = () => {
+        search.search();
+    }
+
     return (
         <FilterProvider
             filterGroups={filterGroups}
             filters={filters}
             setFilters={handleFilterChange}
         >
-            <div className="flex gap-2 items-center">
+            <div className='flex justify-between mb-1'>
                 <FilterBtn />
+                <Button onClick={handleRefetch} variant='outline' title="Refresh">
+                    <RefreshCw className="size-5" />
+                </Button>
+            </div>
+            <div className='flex gap-2 items-center'>
                 <FilterBar />
                 <FilterClear />
             </div>