@vertesia/ui 1.3.0 → 1.4.0-dev.20260615.051508Z

package/src/features/facets/WorkflowDefinitionsFacetsNav.tsx

@@ -0,0 +1,51 @@
+import type { FacetBucket } from '@vertesia/common';
+import {
+    type Filter as BaseFilter,
+    FilterBar,
+    FilterBtn,
+    FilterClear,
+    type FilterGroup,
+    FilterProvider,
+} from '@vertesia/ui/core';
+import type { Dispatch, SetStateAction } from 'react';
+import { VStringFacet } from './utils/VStringFacet';
+
+interface WorkflowDefinitionsFacetsNavProps {
+    facets: {
+        tags?: FacetBucket[];
+    };
+    filters: BaseFilter[];
+    setFilters: Dispatch<SetStateAction<BaseFilter[]>>;
+}
+
+// Hook to create filter groups for workflow definitions
+export function useWorkflowDefinitionsFilterGroups(facets: WorkflowDefinitionsFacetsNavProps['facets']): FilterGroup[] {
+    const customFilterGroups: FilterGroup[] = [];
+
+    customFilterGroups.push(
+        VStringFacet({ buckets: facets.tags || [], name: 'tags', placeholder: 'Tags', multiple: true }),
+    );
+    customFilterGroups.push({ name: 'name', placeholder: 'Name', type: 'text', multiple: false });
+
+    return customFilterGroups;
+}
+
+/**
+ * Controlled facet bar for the Workflow Definitions table. Buckets are computed by the
+ * caller and passed in via `facets`; `filters`/`setFilters` are owned by the consuming
+ * view, which applies them client-side (the `/definitions` endpoint returns all definitions
+ * with no server filters).
+ */
+export function WorkflowDefinitionsFacetsNav({ facets, filters, setFilters }: WorkflowDefinitionsFacetsNavProps) {
+    const filterGroups = useWorkflowDefinitionsFilterGroups(facets);
+
+    return (
+        <FilterProvider filterGroups={filterGroups} filters={filters} setFilters={setFilters}>
+            <div className="flex items-center gap-2">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
+    );
+}

package/src/features/facets/WorkflowExecutionsFacetsNav.tsx

@@ -1,13 +1,21 @@
-import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import type { FacetBucket } from '@vertesia/common';
+import {
+    type Filter as BaseFilter,
+    FilterBar,
+    FilterBtn,
+    FilterClear,
+    type FilterGroup,
+    FilterProvider,
+} from '@vertesia/ui/core';
 import { useState } from 'react';
+import { filterValueToQueryValue, type SearchInterface, setSearchQueryValue } from './utils/SearchInterface';
 import { VStringFacet } from './utils/VStringFacet';
 import { VUserFacet } from './utils/VUserFacet';
-import { SearchInterface } from './utils/SearchInterface';
 
 interface WorkflowExecutionsFacetsNavProps {
     facets: {
-        status?: any[];
-        initiated_by?: any[];
+        status?: FacetBucket[];
+        initiated_by?: FacetBucket[];
     };
     search: SearchInterface;
 }
@@ -25,10 +33,9 @@ export function useWorkflowExecutionsFilterGroups(facets: WorkflowExecutionsFace
 
     if (facets.status) {
         const statusFilterGroup = VStringFacet({
-            search: null as any, // This will be provided by the search context
             buckets: facets.status || [],
             name: 'status',
-            placeholder: 'Status'
+            placeholder: 'Status',
         });
         customFilterGroups.push(statusFilterGroup);
     }
@@ -37,7 +44,7 @@ export function useWorkflowExecutionsFilterGroups(facets: WorkflowExecutionsFace
         const initiatedByFilterGroup = VUserFacet({
             buckets: facets.initiated_by || [],
             name: 'initiated_by',
-            placeholder: 'Initiated By'
+            placeholder: 'Initiated By',
         });
         customFilterGroups.push(initiatedByFilterGroup);
     }
@@ -46,7 +53,7 @@ export function useWorkflowExecutionsFilterGroups(facets: WorkflowExecutionsFace
         name: 'start',
         placeholder: 'Date After',
         type: 'date' as const,
-        multiple: false
+        multiple: false,
     };
     customFilterGroups.push(dateAfterFilterGroup);
 
@@ -54,7 +61,7 @@ export function useWorkflowExecutionsFilterGroups(facets: WorkflowExecutionsFace
         name: 'end',
         placeholder: 'Date Before',
         type: 'date' as const,
-        multiple: false
+        multiple: false,
     };
     customFilterGroups.push(dateBeforeFilterGroup);
 
@@ -65,8 +72,8 @@ export function useWorkflowExecutionsFilterGroups(facets: WorkflowExecutionsFace
         multiple: false,
         options: [
             { label: 'Yes', value: 'true' },
-            { label: 'No', value: 'false' }
-        ]
+            { label: 'No', value: 'false' },
+        ],
     };
     customFilterGroups.push(hasReportedErrorsFilterGroup);
 
@@ -83,50 +90,33 @@ export function useWorkflowExecutionsFilterHandler(search: SearchInterface) {
 
         search.clearFilters(false);
 
-        newFilters.forEach(filter => {
+        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;
-                }
+                const filterValue = filterValueToQueryValue(filter);
 
                 if (filterName === 'name') {
-                    search.query.search_term = filterValue;
-                    search.query.name = filterValue;
+                    setSearchQueryValue(search, 'search_term', filterValue);
+                    setSearchQueryValue(search, 'name', filterValue);
                 } else if (filterName === 'has_reported_errors') {
                     // Convert string "true"/"false" to boolean
                     const stringValue = Array.isArray(filterValue) ? filterValue[0] : filterValue;
                     // Only set the filter if we have a valid value
                     if (stringValue === 'true' || stringValue === 'false') {
-                        search.query[filterName] = stringValue === 'true';
+                        setSearchQueryValue(search, filterName, stringValue === 'true');
                     }
                 } else {
-                    search.query[filterName] = filterValue;
+                    setSearchQueryValue(search, filterName, filterValue);
                 }
             }
         });
 
-        search.search();
+        void search.search();
     };
 }
 
 // Legacy component for backward compatibility
-export function WorkflowExecutionsFacetsNav({
-    facets,
-    search,
-}: WorkflowExecutionsFacetsNavProps) {
+export function WorkflowExecutionsFacetsNav({ facets, search }: WorkflowExecutionsFacetsNavProps) {
     const [filters, setFilters] = useState<BaseFilter[]>([]);
     const filterGroups = useWorkflowExecutionsFilterGroups(facets);
     const handleFilterLogic = useWorkflowExecutionsFilterHandler(search);
@@ -138,11 +128,7 @@ export function WorkflowExecutionsFacetsNav({
     };
 
     return (
-        <FilterProvider
-            filterGroups={filterGroups}
-            filters={filters}
-            setFilters={handleFilterChange}
-        >
+        <FilterProvider filterGroups={filterGroups} filters={filters} setFilters={handleFilterChange}>
             <div className="flex gap-2 items-center">
                 <FilterBtn />
                 <FilterBar />
@@ -150,4 +136,4 @@ export function WorkflowExecutionsFacetsNav({
             </div>
         </FilterProvider>
     );
-}
+}

package/src/features/facets/WorkflowRulesFacetsNav.tsx

@@ -0,0 +1,49 @@
+import type { FacetBucket } from '@vertesia/common';
+import {
+    type Filter as BaseFilter,
+    FilterBar,
+    FilterBtn,
+    FilterClear,
+    type FilterGroup,
+    FilterProvider,
+} from '@vertesia/ui/core';
+import type { Dispatch, SetStateAction } from 'react';
+
+interface WorkflowRulesFacetsNavProps {
+    facets: {
+        endpoints?: FacetBucket[];
+        input_types?: FacetBucket[];
+    };
+    filters: BaseFilter[];
+    setFilters: Dispatch<SetStateAction<BaseFilter[]>>;
+}
+
+// Hook to create filter groups for workflow rules
+export function useWorkflowRulesFilterGroups(facets: WorkflowRulesFacetsNavProps['facets']): FilterGroup[] {
+    const customFilterGroups: FilterGroup[] = [];
+
+    void facets;
+
+    customFilterGroups.push({ name: 'name', placeholder: 'Name', type: 'text', multiple: false });
+
+    return customFilterGroups;
+}
+
+/**
+ * Controlled facet bar for the Workflow Rules table. Buckets are computed by the caller and
+ * passed in via `facets`; `filters`/`setFilters` are owned by the consuming view, which
+ * applies them client-side (the `/rules` endpoint returns all rules with no server filters).
+ */
+export function WorkflowRulesFacetsNav({ facets, filters, setFilters }: WorkflowRulesFacetsNavProps) {
+    const filterGroups = useWorkflowRulesFilterGroups(facets);
+
+    return (
+        <FilterProvider filterGroups={filterGroups} filters={filters} setFilters={setFilters}>
+            <div className="flex items-center gap-2">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
+    );
+}

package/src/features/facets/index.ts

@@ -1,18 +1,32 @@
-export * from "./utils/SearchInterface";
-
-export { StringFacet } from "./utils/StringFacet";
-export { StringListFacet } from "./utils/StringListFacet";
-export { TypeFacet } from "./utils/TypeFacet";
-export { VInteractionFacet } from "./utils/VInteractionFacet";
-export { VStringFacet } from "./utils/VStringFacet";
-export { VTypeFacet } from "./utils/VTypeFacet";
-export { VUserFacet } from "./utils/VUserFacet";
-
-export { EnvironmentFacet } from "./EnvironmentFacet";
-export { RunsFacetsNav, useRunsFilterGroups, useRunsFilterHandler } from "./RunsFacetsNav";
-export { WorkflowExecutionsFacetsNav, useWorkflowExecutionsFilterGroups, useWorkflowExecutionsFilterHandler } from "./WorkflowExecutionsFacetsNav";
-export { DocumentsFacetsNav, useDocumentFilterGroups, useDocumentFilterHandler } from "./DocumentsFacetsNav";
-export { InteractionsFacetsNav, useInteractionsFilterGroups, useInteractionsFilterHandler } from "./InteractionsFacetsNav";
-export { PromptsFacetsNav, usePromptsFilterGroups, usePromptsFilterHandler } from "./PromptsFacetsNav";
-export { CollectionsFacetsNav, useCollectionsFilterGroups, useCollectionsFilterHandler } from "./CollectionsFacetsNav";
-export { AgentRunnerFacetsNav, useAgentRunnerFilterGroups, createAgentRunnerFilterHandler } from "./AgentRunnerFacetsNav";
+export {
+    AgentRunnerFacetsNav,
+    createAgentRunnerFilterHandler,
+    useAgentRunnerFilterGroups,
+} from './AgentRunnerFacetsNav';
+export { CollectionsFacetsNav, useCollectionsFilterGroups, useCollectionsFilterHandler } from './CollectionsFacetsNav';
+export { DocumentsFacetsNav, useDocumentFilterGroups, useDocumentFilterHandler } from './DocumentsFacetsNav';
+export { EnvironmentFacet } from './EnvironmentFacet';
+export {
+    InteractionsFacetsNav,
+    useInteractionsFilterGroups,
+    useInteractionsFilterHandler,
+} from './InteractionsFacetsNav';
+export { ProcessDefinitionsFacetsNav, useProcessDefinitionsFilterGroups } from './ProcessDefinitionsFacetsNav';
+export { ProcessRunsFacetsNav, useProcessRunsFilterGroups } from './ProcessRunsFacetsNav';
+export { PromptsFacetsNav, usePromptsFilterGroups, usePromptsFilterHandler } from './PromptsFacetsNav';
+export { RunsFacetsNav, useRunsFilterGroups, useRunsFilterHandler } from './RunsFacetsNav';
+export * from './utils/SearchInterface';
+export { StringFacet } from './utils/StringFacet';
+export { StringListFacet } from './utils/StringListFacet';
+export { TypeFacet } from './utils/TypeFacet';
+export { VInteractionFacet } from './utils/VInteractionFacet';
+export { VStringFacet } from './utils/VStringFacet';
+export { VTypeFacet } from './utils/VTypeFacet';
+export { VUserFacet } from './utils/VUserFacet';
+export { useWorkflowDefinitionsFilterGroups, WorkflowDefinitionsFacetsNav } from './WorkflowDefinitionsFacetsNav';
+export {
+    useWorkflowExecutionsFilterGroups,
+    useWorkflowExecutionsFilterHandler,
+    WorkflowExecutionsFacetsNav,
+} from './WorkflowExecutionsFacetsNav';
+export { useWorkflowRulesFilterGroups, WorkflowRulesFacetsNav } from './WorkflowRulesFacetsNav';

package/src/features/facets/utils/SearchInterface.tsx

@@ -1,14 +1,43 @@
+import type { Filter as BaseFilter } from '@vertesia/ui/core';
+
 interface defaultKeys {
     [key: string]: string;
 }
 export interface SearchInterface {
-    getFilterValue(name: string): any;
-    setFilterValue(name: string, value: any): void;
+    getFilterValue(name: string): unknown;
+    setFilterValue(name: string, value: unknown): void;
     clearFilters(autoSearch?: boolean, applyDefaults?: boolean): void;
     search(applyDefaults?: boolean): Promise<boolean | undefined>;
     setDefaultKeys(keys: defaultKeys[]): void;
     readonly isRunning: boolean;
     readonly initialized?: boolean;
     readonly totalCount?: number;
-    query: Record<string, any>;
+    query: object;
+}
+
+interface FilterOptionValue {
+    value?: unknown;
+}
+
+function isFilterOptionValue(value: unknown): value is FilterOptionValue {
+    return typeof value === 'object' && value !== null && 'value' in value;
+}
+
+export function unwrapFilterOptionValue(value: unknown): unknown {
+    return isFilterOptionValue(value) ? value.value : value;
+}
+
+export function filterValueToQueryValue(filter: BaseFilter): unknown {
+    if (filter.type === 'stringList') {
+        return filter.value.map((value) => (typeof value === 'string' ? value : unwrapFilterOptionValue(value)));
+    }
+    if (filter.multiple) {
+        return filter.value.map(unwrapFilterOptionValue);
+    }
+    const firstValue = filter.value[0];
+    return firstValue === undefined ? undefined : unwrapFilterOptionValue(firstValue);
+}
+
+export function setSearchQueryValue(search: SearchInterface, name: string, value: unknown): void {
+    (search.query as Record<string, unknown>)[name] = value;
 }

package/src/features/facets/utils/StringFacet.tsx

@@ -1,9 +1,10 @@
-import { FacetBucket } from '@vertesia/common';
+import type { FacetBucket } from '@vertesia/common';
 import { SelectBox } from '@vertesia/ui/core';
+import type { SearchInterface } from './SearchInterface';
 import { facetOptionLabel } from './utils';
 
 interface StringFacetProps {
-    search: any;
+    search: SearchInterface;
     buckets: FacetBucket[];
     name: string;
     placeholder?: string;
@@ -13,11 +14,21 @@ export function StringFacet({ search, buckets, name, placeholder, className }: S
     const filterValue = search.getFilterValue(name) as string;
     const onChange = (option: FacetBucket | undefined) => {
         search.setFilterValue(name, option?._id);
-    }
+    };
 
     const value = buckets?.find((option) => JSON.stringify(option._id) === JSON.stringify(filterValue));
 
     return (
-        <SelectBox filterBy="_id" className={className} isClearable optionLabel={facetOptionLabel} options={buckets} value={value} onChange={onChange} by='_id' placeholder={placeholder} />
-    )
+        <SelectBox
+            filterBy="_id"
+            className={className}
+            isClearable
+            optionLabel={facetOptionLabel}
+            options={buckets}
+            value={value}
+            onChange={onChange}
+            by="_id"
+            placeholder={placeholder}
+        />
+    );
 }

package/src/features/facets/utils/StringListFacet.tsx

@@ -1,9 +1,10 @@
-import { FacetBucket } from '@vertesia/common';
+import type { FacetBucket } from '@vertesia/common';
 import { InputList } from '@vertesia/ui/core';
 import { useEffect, useState } from 'react';
+import type { SearchInterface } from './SearchInterface';
 
 interface StringListFacetProps {
-    search: any;
+    search: SearchInterface;
     buckets: FacetBucket[];
     name: string;
     placeholder?: string;
@@ -14,9 +15,7 @@ export function StringListFacet({ search, name, placeholder, className }: String
 
     useEffect(() => {
         search.setFilterValue(name, tags);
-    }, [tags]);
+    }, [name, search, tags]);
 
-    return (
-        <InputList className={className} value={tags} onChange={setTags} placeholder={placeholder} />
-    )
+    return <InputList className={className} value={tags} onChange={setTags} placeholder={placeholder} />;
 }

package/src/features/facets/utils/TypeFacet.tsx

@@ -1,7 +1,8 @@
-import { FacetBucket } from "@vertesia/common";
-import { SelectBox } from "@vertesia/ui/core";
-import { useEffect, useState } from "react";
-import { useTypeRegistry } from "../../store/types/TypeRegistryProvider.js";
+import type { FacetBucket } from '@vertesia/common';
+import { SelectBox } from '@vertesia/ui/core';
+import { useEffect, useState } from 'react';
+import { useTypeRegistry } from '../../store/types/TypeRegistryProvider.js';
+import type { SearchInterface } from './SearchInterface';
 
 interface TypeFacetBucket {
     name: string;
@@ -14,38 +15,38 @@ export function facetOptionLabel(bucket: TypeFacetBucket) {
 }
 
 interface TypeFacetProps {
-    search: any;
+    search: SearchInterface;
     buckets: FacetBucket[];
     placeholder?: string;
     className?: string;
 }
-export function TypeFacet({ search, buckets, placeholder = "Filter by Type", className }: TypeFacetProps) {
+export function TypeFacet({ search, buckets, placeholder = 'Filter by Type', className }: TypeFacetProps) {
     const [options, setOptions] = useState<TypeFacetBucket[]>([]);
     const { registry: typeRegistry } = useTypeRegistry();
-    const filterValue = search.getFilterValue("type") as string;
+    const filterValue = search.getFilterValue('type') as string;
     const onChange = (option: FacetBucket | undefined) => {
-        search.setFilterValue("type", option?._id);
-    }
+        search.setFilterValue('type', option?._id);
+    };
 
     useEffect(() => {
         if (typeRegistry) {
             const options = buckets.map((bucket) => {
-                let name;
+                let name: string | undefined;
                 if (bucket._id == null) {
-                    bucket._id = "Document";
-                    name = "Document"
+                    bucket._id = 'Document';
+                    name = 'Document';
                 } else {
                     name = typeRegistry.getTypeName(bucket._id);
                     if (!name) {
-                        console.warn("Content Object Type not found", bucket._id)
-                        name = bucket._id
+                        console.warn('Content Object Type not found', bucket._id);
+                        name = bucket._id;
                     }
                 }
                 return {
                     ...bucket,
-                    name
-                }
-            })
+                    name,
+                };
+            });
             options.sort((a, b) => a.name.localeCompare(b.name));
             setOptions(options);
         }
@@ -54,6 +55,16 @@ export function TypeFacet({ search, buckets, placeholder = "Filter by Type", cla
     const value = options?.find((option) => option._id === filterValue);
 
     return (
-        <SelectBox filterBy="name" className={className} isClearable optionLabel={facetOptionLabel} options={options} value={value} onChange={onChange} by='_id' placeholder={placeholder} />
-    )
+        <SelectBox
+            filterBy="name"
+            className={className}
+            isClearable
+            optionLabel={facetOptionLabel}
+            options={options}
+            value={value}
+            onChange={onChange}
+            by="_id"
+            placeholder={placeholder}
+        />
+    );
 }

package/src/features/facets/utils/VEnvironmentFacet.tsx

@@ -1,5 +1,5 @@
-import { FacetBucket } from '@vertesia/common';
-import { FilterGroup } from '@vertesia/ui/core';
+import type { FacetBucket } from '@vertesia/common';
+import type { FilterGroup } from '@vertesia/ui/core';
 
 interface EnrichedFacetBucket extends FacetBucket {
     name?: string;
@@ -13,31 +13,31 @@ interface EnvironmentFacetProps {
 export function VEnvironmentFacet({ buckets, name }: EnvironmentFacetProps): FilterGroup {
     const options = buckets.map((bucket) => ({
         label: `(${bucket.count})`,
-        value: bucket._id
+        value: bucket._id,
     }));
 
     const filterGroup: FilterGroup = {
         name: 'environment',
         placeholder: name.charAt(0).toUpperCase() + name.slice(1),
         options: options,
-        type: "select",
+        type: 'select',
         labelRenderer: (environmentId: string) => {
-            const bucket = buckets.find(b => b._id === environmentId);
+            const bucket = buckets.find((b) => b._id === environmentId);
             const displayName = bucket?.name || environmentId;
 
             return (
                 <div className="w-full flex items-center">
                     <span className="text-sm truncate">{displayName}</span>
-                    <span className="ml-2 text-xs">({bucket?.count || 0})</span>
+                    <span className="ms-2 text-xs">({bucket?.count || 0})</span>
                 </div>
             );
         },
         filterBy: (optionValue: string, searchText: string) => {
-            const bucket = buckets.find(b => b._id === optionValue);
+            const bucket = buckets.find((b) => b._id === optionValue);
             const searchName = bucket?.name || optionValue;
             return searchName.toLowerCase().includes(searchText.toLowerCase());
-        }
+        },
     };
 
     return filterGroup;
-}
+}

package/src/features/facets/utils/VInteractionFacet.tsx

@@ -1,7 +1,7 @@
-import { FacetBucket, InteractionStatus } from '@vertesia/common';
-import { Badge, FilterGroup } from '@vertesia/ui/core';
+import { type FacetBucket, InteractionStatus } from '@vertesia/common';
+import { Badge, type FilterGroup } from '@vertesia/ui/core';
 
-interface EnrichedFacetBucket extends FacetBucket {
+export interface EnrichedFacetBucket extends FacetBucket {
     name?: string;
     status?: string;
     version?: number;
@@ -16,37 +16,38 @@ interface InteractionFacetProps {
 export function VInteractionFacet({ buckets, name, placeholder }: InteractionFacetProps): FilterGroup {
     const options = buckets.map((bucket) => ({
         label: `(${bucket.count})`,
-        value: bucket._id
+        value: bucket._id,
     }));
 
     const filterGroup: FilterGroup = {
         name: name,
         placeholder: placeholder || `${name.charAt(0).toUpperCase() + name.slice(1)}`,
         options: options,
-        type: "select",
+        type: 'select',
         labelRenderer: (interactionId: string) => {
-            const bucket = buckets.find(b => b._id === interactionId);
+            const bucket = buckets.find((b) => b._id === interactionId);
             const displayName = bucket?.name || interactionId;
 
             // Determine badge variant based on status
-            let badgeVariant: "success" | "info" | "destructive" | "default" = "success";
+            let badgeVariant: 'success' | 'info' | 'destructive' | 'default' = 'success';
             if (bucket?.status) {
                 switch (bucket.status) {
                     case InteractionStatus.published:
-                        badgeVariant = "success";
+                        badgeVariant = 'success';
                         break;
                     case InteractionStatus.archived:
-                        badgeVariant = "destructive";
+                        badgeVariant = 'destructive';
                         break;
                     case InteractionStatus.code:
-                        badgeVariant = "info";
+                        badgeVariant = 'info';
                         break;
                 }
             }
 
-            const badgeText = (bucket?.version && bucket?.status) ?
-                `v${bucket.version} ${bucket.status != InteractionStatus.unknown ? bucket.status : ''}` :
-                bucket?.status || (bucket?.version ? `v${bucket.version}` : '');
+            const badgeText =
+                bucket?.version && bucket?.status
+                    ? `v${bucket.version} ${bucket.status !== InteractionStatus.unknown ? bucket.status : ''}`
+                    : bucket?.status || (bucket?.version ? `v${bucket.version}` : '');
 
             return (
                 <div className="w-full flex items-center justify-between">
@@ -58,16 +59,16 @@ export function VInteractionFacet({ buckets, name, placeholder }: InteractionFac
                             </Badge>
                         )}
                     </div>
-                    {(bucket?.count ?? 0) > 0 && <span className="ml-2 text-xs shrink-0">({bucket!.count})</span>}
+                    {(bucket?.count ?? 0) > 0 && <span className="ms-2 text-xs shrink-0">({bucket?.count})</span>}
                 </div>
             );
         },
         filterBy: (optionValue: string, searchText: string) => {
-            const bucket = buckets.find(b => b._id === optionValue);
+            const bucket = buckets.find((b) => b._id === optionValue);
             const searchName = bucket?.name || optionValue;
             return searchName.toLowerCase().includes(searchText.toLowerCase());
-        }
+        },
     };
 
     return filterGroup;
-}
+}