@vertesia/ui 1.5.0-dev.20260901.052906Z → 1.5.0-dev.20260910.051115Z

package/src/features/store/objects/DocumentTable.tsx

@@ -213,7 +213,7 @@ function ObjectTableWithDropZone({
             {/* Loading overlay */}
             <div
                 className={clsx(
-                    'bg-white dark:bg-gray-800 opacity-40 absolute inset-0 z-50 flex justify-center items-center',
+                    'bg-white dark:bg-muted opacity-40 absolute inset-0 z-50 flex justify-center items-center',
                     isLoading ? 'block' : 'hidden',
                 )}
             >
@@ -230,7 +230,7 @@ function ObjectTableWithDropZone({
                         onDrop={handleFileDrop}
                         message="Drop files or folders here to upload"
                         className={clsx(
-                            'absolute inset-0 bg-white/90 dark:bg-gray-800/90 pointer-events-auto',
+                            'absolute inset-0 bg-white/90 dark:bg-muted/90 pointer-events-auto',
                             isDragging ? 'flex' : 'hidden',
                         )}
                         buttonLabel="Select Files or Folders"

package/src/features/store/objects/components/DocumentIcon.tsx

@@ -80,12 +80,12 @@ export function DocumentIcon({
 
     return (
         <Card
-            className={`relative flex flex-col border h-fit w-full ${selectedObject?.id === document.id ? 'border-attention border-4' : ''} ${isHighlighted ? 'border-blue-400 dark:border-blue-500 bg-blue-50/50 dark:bg-blue-900/20' : ''}`}
+            className={`relative flex flex-col border h-fit w-full ${selectedObject?.id === document.id ? 'border-attention border-4' : ''} ${isHighlighted ? 'border-info bg-info/50 dark:bg-info/20' : ''}`}
             onClick={() => onRowClick?.(document)}
         >
             {isHighlighted && (
                 <div className="absolute top-2 end-8 z-10">
-                    <CheckIcon className="size-4 text-blue-600 dark:text-blue-400" />
+                    <CheckIcon className="size-4 text-info" />
                 </div>
             )}
             {selection && (
@@ -116,11 +116,11 @@ export function DocumentIcon({
             {renditionUrl && renditionStatus === 'ready' ? (
                 <img src={renditionUrl} alt={renditionAlt} className="w-auto h-48 object-cover rounded-t-xl" />
             ) : (
-                <div className="h-48 bg-gray-700 rounded-t-xl flex items-center justify-center text-muted">
+                <div className="h-48 bg-muted rounded-t-xl flex items-center justify-center text-muted">
                     {renditionStatus}
                 </div>
             )}
-            <Separator className="bg-gray-200 h-[2px]" />
+            <Separator className="bg-muted h-[2px]" />
             <CardContent className="p-2 flex flex-col">
                 <div className="flex flex-col overflow-hidden">
                     <VTooltip placement="top" description={title}>

package/src/features/store/objects/components/DocumentInput.tsx

@@ -73,21 +73,21 @@ export function DocumentInput({ object }: DocumentInputProps) {
                         <Button
                             onClick={clearValue}
                             variant="unstyled"
-                            className="hover:text-red-500 hover:bg-gray-100 dark:hover:bg-gray-600"
+                            className="hover:text-destructive hover:bg-muted"
                         >
                             <X className="size-5" />
                         </Button>
                     </div>
                 )}
                 <div className="absolute inset-y-0 end-0 flex items-center justify-center">
-                    <Button onClick={on} variant="unstyled" className="hover:bg-gray-100 dark:hover:bg-gray-600">
+                    <Button onClick={on} variant="unstyled" className="hover:bg-muted">
                         <ChevronsUpDown className="size-5" />
                     </Button>
                 </div>
                 <SelectDocumentModal value={actualValue} isOpen={isOn} onClose={onSelect} />
             </div>
             {doc && (
-                <div className="p-1 semibold text-sm text-gray-600 dark:text-slate-300">
+                <div className="p-1 semibold text-sm text-muted dark:text-foreground">
                     {typeof doc.properties?.title === 'string' ? doc.properties.title : doc.name}
                 </div>
             )}

package/src/features/store/objects/components/PropertiesEditorModal.tsx

@@ -196,7 +196,7 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
             >
                 <ModalTitle>{t('store.editProperties')}</ModalTitle>
                 <ModalBody>
-                    <div className="mb-2 text-sm text-gray-500">
+                    <div className="mb-2 text-sm text-muted">
                         {object.type?.name ? (
                             <span>
                                 Editing properties for object type: <strong>{object.type.name}</strong>
@@ -205,7 +205,7 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
                             <span>{t('store.editingGenericDocument')}</span>
                         )}
                         {jsonSchema !== null && (
-                            <span className="ms-2 text-green-600">(JSON schema validation enabled)</span>
+                            <span className="ms-2 text-success">(JSON schema validation enabled)</span>
                         )}
                     </div>
                     <div className="h-[75vh] border rounded-md overflow-hidden">

package/src/features/store/objects/components/SaveVersionConfirmModal.tsx

@@ -100,8 +100,8 @@ export function SaveVersionConfirmModal({
             <ModalBody>
                 <div className="space-y-4">
                     {uploadedFileName && (
-                        <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md">
-                            <p className="text-sm text-blue-700 dark:text-blue-300 font-medium">
+                        <div className="mb-4 p-3 bg-info rounded-md">
+                            <p className="text-sm text-info font-medium">
                                 {t('modal.saveVersion.replaceFile')}{' '}
                                 <span className="font-bold">{uploadedFileName}</span>
                             </p>

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

@@ -53,7 +53,7 @@ export function DocumentTableView({
                     return (
                         <tr
                             key={obj.id}
-                            className={`group cursor-pointer hover:bg-muted ${selectedObject?.id === obj.id ? 'bg-muted' : ''} ${isHighlighted ? 'bg-blue-50 dark:bg-blue-900/20' : ''}`}
+                            className={`group cursor-pointer hover:bg-muted ${selectedObject?.id === obj.id ? 'bg-muted' : ''} ${isHighlighted ? 'bg-info' : ''}`}
                             onClick={() => {
                                 onRowClick?.(obj);
                             }}
@@ -71,9 +71,7 @@ export function DocumentTableView({
                             )}
                             {columns.map((col, index) => col.render(obj, index))}
                             <td className="w-8 text-center">
-                                {isHighlighted && (
-                                    <CheckIcon className="size-4 text-blue-600 dark:text-blue-400 inline-block" />
-                                )}
+                                {isHighlighted && <CheckIcon className="size-4 text-info inline-block" />}
                             </td>
                         </tr>
                     );

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

@@ -110,7 +110,7 @@ export function UploadObjectsButton({
 function optionLayout(option: ObjectsActionSpec) {
     return {
         label: option.name,
-        className: clsx('flex-1 px-2 py-2 hover:bg-accent nowrap', option.destructive ? 'text-destructive' : ''),
+        className: clsx('flex-1 px-2 py-2 hover:bg-muted nowrap', option.destructive ? 'text-destructive' : ''),
     };
 }
 

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

@@ -23,10 +23,17 @@ import { type EditorApi, type Monaco, MonacoEditor } from '@vertesia/ui/widgets'
 import Ajv, { type ErrorObject, type ValidateFunction } from 'ajv';
 import addFormats from 'ajv-formats';
 import type { TFunction } from 'i18next';
-import { Braces, CheckCircle2, FileText, RotateCcw, Save, WandSparkles } from 'lucide-react';
-import { useMemo, useRef, useState } from 'react';
+import { Braces, CheckCircle2, FileText, RotateCcw, WandSparkles } from 'lucide-react';
+import { type ReactNode, useMemo, useRef, useState } from 'react';
 import { IntakePolicyForm, type IntakePolicyFormSection } from './IntakePolicyForm.js';
 
+/** A tab rendered above the policy tabs. The owner supplies its own Panel and actions. */
+export interface IntakePolicyEditorTab {
+    name: string;
+    label: string;
+    content: ReactNode;
+}
+
 interface IntakePolicyEditorProps {
     /** Content type whose intake policy is edited; omit when editing a standalone policy. */
     objectType?: ContentObjectTypeCatalogEntry;
@@ -36,6 +43,8 @@ interface IntakePolicyEditorProps {
      *  Defaults to saving the objectType's intake when objectType is provided. */
     onSave?: (policy: ContentTypeIntakePolicy) => Promise<ContentTypeIntakePolicy | undefined>;
     onIntakeUpdate?: (value: ContentTypeIntakePolicy | undefined) => void;
+    /** Extra tabs shown above the policy tabs, each owning its panel and actions. */
+    leadingTabs?: IntakePolicyEditorTab[];
     readonly?: boolean;
 }
 
@@ -279,6 +288,7 @@ export function IntakePolicyEditor({
     value,
     onSave: onSaveProp,
     onIntakeUpdate,
+    leadingTabs,
     readonly = false,
 }: IntakePolicyEditorProps) {
     const { store } = useUserSession();
@@ -293,7 +303,9 @@ export function IntakePolicyEditor({
     const [editorValue, setEditorValue] = useState(() => stringifyPolicy(initialPolicy));
     const [savedValue, setSavedValue] = useState(() => stringifyPolicy(initialPolicy));
     const [validationMessage, setValidationMessage] = useState<string | undefined>(undefined);
-    const [activeTab, setActiveTab] = useState<IntakePolicyFormSection | 'json'>('overview');
+    // Open on the first leading tab when a consumer supplies one (settings opens on General);
+    // otherwise the policy sections start at their first tab.
+    const [activeTab, setActiveTab] = useState<string>(leadingTabs?.[0]?.name ?? 'classification');
 
     const isDirty = editorValue !== savedValue;
     const currentPolicy = useMemo(() => {
@@ -421,7 +433,7 @@ export function IntakePolicyEditor({
         setEditorValue(value);
         editorRef.current?.setValue(value);
         setValidationMessage(undefined);
-        setActiveTab('overview');
+        setActiveTab('classification');
     };
 
     const onFormChange = (policy: ContentTypeIntakePolicy) => {
@@ -430,6 +442,11 @@ export function IntakePolicyEditor({
     };
 
     const onTabChange = (tab: string) => {
+        // Leading tabs are not policy sections, so invalid policy JSON must not trap the user there.
+        if (leadingTabs?.some((leading) => leading.name === tab)) {
+            setActiveTab(tab);
+            return;
+        }
         const nextTab = tab as IntakePolicyFormSection | 'json';
         if (nextTab !== 'json' && !currentPolicy) {
             setValidationMessage(t('intakePolicy.error.fixJsonBeforeForm'));
@@ -441,7 +458,7 @@ export function IntakePolicyEditor({
 
     const title = (
         <div className="flex items-center gap-2">
-            <div className="text-base font-semibold">{t('intakePolicy.title')}</div>
+            <div>{t('intakePolicy.title')}</div>
             {isDirty && <Badge variant="attention">{t('intakePolicy.status.unsaved')}</Badge>}
         </div>
     );
@@ -451,7 +468,7 @@ export function IntakePolicyEditor({
             <Dropdown
                 align="right"
                 trigger={
-                    <Button variant="outline" size="sm">
+                    <Button variant="outline" size="md">
                         <WandSparkles className="size-4" />
                         {t('intakePolicy.action.examples')}
                     </Button>
@@ -473,58 +490,74 @@ export function IntakePolicyEditor({
             </Dropdown>
             {activeTab === 'json' && (
                 <>
-                    <Button variant="outline" size="sm" onClick={onFormat}>
+                    <Button variant="outline" size="md" onClick={onFormat}>
                         <Braces className="size-4" />
                         {t('intakePolicy.action.format')}
                     </Button>
-                    <Button variant="outline" size="sm" onClick={onValidate}>
+                    <Button variant="outline" size="md" onClick={onValidate}>
                         <CheckCircle2 className="size-4" />
                         {t('intakePolicy.action.validate')}
                     </Button>
                 </>
             )}
-            <Button variant="outline" size="sm" onClick={onRevert} disabled={!isDirty}>
+            <Button variant="outline" size="md" onClick={onRevert} disabled={!isDirty}>
                 <RotateCcw className="size-4" />
                 {t('intakePolicy.action.revert')}
             </Button>
-            <Button isLoading={isUpdating} size="sm" onClick={onSave} disabled={!isDirty}>
-                <Save className="size-4" />
+            <Button isLoading={isUpdating} size="md" onClick={onSave} disabled={!isDirty}>
                 {t('intakePolicy.action.save')}
             </Button>
         </>
     ) : undefined;
 
-    return (
+    /** Panel chrome for the policy tabs. Each tab owns its panel now that the switcher is outside. */
+    const withPolicyPanel = (content: ReactNode) => (
         <Panel title={title} className="bg-background! h-full" action={action}>
             <div className="flex h-full min-h-0 flex-col gap-3">
-                <IntakeSummary policy={summaryPolicy} />
                 {validationMessage && (
                     <div className="rounded-sm border border-destructive bg-mixer-destructive/10 px-3 py-2 text-sm whitespace-pre-line text-destructive">
                         {validationMessage}
                     </div>
                 )}
-                <Tabs
-                    tabs={createEditorTabs(t, currentPolicy ?? EMPTY_POLICY, readonly, onFormChange, editorValue, {
-                        editorRef,
-                        beforeMount,
-                        onChange: (value) => {
-                            setEditorValue(value);
-                            setValidationMessage(undefined);
-                        },
-                        theme,
-                    })}
-                    current={activeTab}
-                    onTabChange={onTabChange}
-                    updateHash={false}
-                    fullHeight
-                    className="px-0 flex-row!"
-                >
-                    <TabsBar className="py-2 w-48 shrink-0" direction="vertical" />
-                    <TabsPanel className="min-h-0 min-w-0 flex-1 overflow-auto pt-1 ps-4" />
-                </Tabs>
+                {content}
             </div>
         </Panel>
     );
+
+    const policyTabs = createEditorTabs(
+        t,
+        currentPolicy ?? EMPTY_POLICY,
+        readonly,
+        onFormChange,
+        editorValue,
+        {
+            editorRef,
+            beforeMount,
+            onChange: (value) => {
+                setEditorValue(value);
+                setValidationMessage(undefined);
+            },
+            theme,
+        },
+        withPolicyPanel,
+    );
+
+    return (
+        <div className="flex h-full min-h-0 w-full flex-col gap-3">
+            <IntakeSummary policy={summaryPolicy} />
+            <Tabs
+                tabs={leadingTabs ? [...leadingTabs, ...policyTabs] : policyTabs}
+                current={activeTab}
+                onTabChange={onTabChange}
+                updateHash={false}
+                fullHeight
+                className="px-0 min-h-0 flex-1 flex-row!"
+            >
+                <TabsBar className="py-2 w-48 shrink-0" direction="vertical" />
+                <TabsPanel className="min-h-0 min-w-0 flex-1 overflow-auto ps-4" />
+            </Tabs>
+        </div>
+    );
 }
 
 function createEditorTabs(
@@ -539,15 +572,16 @@ function createEditorTabs(
         onChange: (value: string) => void;
         theme: string;
     },
+    wrap: (content: ReactNode) => ReactNode,
 ) {
     const formTab = (name: IntakePolicyFormSection, label: string) => ({
         name,
         label,
-        content: <IntakePolicyForm policy={policy} section={name} onChange={onChange} readonly={readonly} />,
+        content: wrap(<IntakePolicyForm policy={policy} section={name} onChange={onChange} readonly={readonly} />),
     });
 
     return [
-        formTab('overview', t('intakePolicy.tab.overview')),
+        formTab('classification', t('intakePolicy.tab.classification')),
         formTab('conversion', t('intakePolicy.tab.conversion')),
         formTab('extraction', t('intakePolicy.tab.extraction')),
         formTab('grounding', t('intakePolicy.tab.grounding')),
@@ -555,7 +589,7 @@ function createEditorTabs(
         {
             name: 'json',
             label: t('intakePolicy.tab.json'),
-            content: (
+            content: wrap(
                 <div className="flex h-full min-h-[36rem] gap-4 py-3">
                     <div className="min-w-0 flex-1 overflow-hidden rounded-sm border">
                         <MonacoEditor
@@ -579,7 +613,7 @@ function createEditorTabs(
                         />
                     </div>
                     <IntakeHelp />
-                </div>
+                </div>,
             ),
         },
     ];

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

@@ -27,7 +27,7 @@ import {
     updateIntakePolicy,
 } from './intake-policy-editor.logic.js';
 
-export type IntakePolicyFormSection = 'overview' | 'conversion' | 'extraction' | 'grounding' | 'output';
+export type IntakePolicyFormSection = 'classification' | 'conversion' | 'extraction' | 'grounding' | 'output';
 
 interface IntakePolicyFormProps {
     policy: ContentTypeIntakePolicy;
@@ -45,7 +45,7 @@ export function IntakePolicyForm({ policy, section, onChange, readonly = false }
     const { t } = useUITranslation();
     const setValue = (path: IntakePolicyPath, value: unknown) => onChange(updateIntakePolicy(policy, path, value));
 
-    if (section === 'overview') {
+    if (section === 'classification') {
         return (
             <FormSurface>
                 <FormSection
@@ -317,6 +317,8 @@ export function IntakePolicyForm({ policy, section, onChange, readonly = false }
                 <FormSection
                     title={t('intakePolicy.section.visionBudget')}
                     description={t('intakePolicy.help.section.visionBudget')}
+                    // `last` only because Verification below is hidden; drop it when that is restored.
+                    last
                 >
                     <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                         <SelectField
@@ -359,6 +361,11 @@ export function IntakePolicyForm({ policy, section, onChange, readonly = false }
                     </div>
                 </FormSection>
 
+                {/* Verification is hidden until the feature is wired up. The policy schema, the
+                    API contract and this form all still carry it; nothing here consumes the values
+                    at processing time yet. Uncomment as-is to bring the section back, and remove
+                    the `last` prop added to the Vision evidence budget section above.
+
                 <FormSection title={t('intakePolicy.section.verification')} last>
                     <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                         <TriStateField
@@ -410,6 +417,7 @@ export function IntakePolicyForm({ policy, section, onChange, readonly = false }
                         readonly={readonly}
                     />
                 </FormSection>
+                */}
             </FormSurface>
         );
     }
@@ -636,7 +644,7 @@ export function IntakePolicyForm({ policy, section, onChange, readonly = false }
 }
 
 function FormSurface({ children }: { children: ReactNode }) {
-    return <div className="mx-auto w-full max-w-6xl px-1 py-4">{children}</div>;
+    return <div className="w-full px-1 py-4">{children}</div>;
 }
 
 function FormSection({

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

@@ -71,7 +71,7 @@ export function SelectContentTypeModal({
                 <div className="mb-4 mt-4">
                     <div className="block text-sm font-medium mb-2">
                         {t('store.contentType')}{' '}
-                        {allowNone && <span className="text-gray-500 font-normal">{t('store.optional')}</span>}
+                        {allowNone && <span className="text-muted font-normal">{t('store.optional')}</span>}
                     </div>
                     {allowNone ? (
                         <SelectBox

package/src/features/user/UserAvatar.tsx

@@ -13,7 +13,7 @@ export function UserAvatar({ user }: { user: AuthTokenPayload | UserRef }) {
                 .map((n) => n[0])
                 .join('');
             return (
-                <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600">
+                <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-primary">
                     <span className="text-sm font-medium leading-none text-white">{initials}</span>
                 </span>
             );
@@ -26,10 +26,10 @@ export function UserAvatar({ user }: { user: AuthTokenPayload | UserRef }) {
         <div className="flex items-center">
             <div className="w-9 h-9">{userPicture()}</div>
             <div className="ms-3">
-                <p className="text-sm font-medium text-gray-700 dark:text-slate-50 group-hover:text-gray-900">
+                <p className="text-sm font-medium text-foreground group-hover:text-foreground">
                     {user.name ?? 'Deleted User'}
                 </p>
-                <p className="text-xs font-medium text-gray-500 dark:text-slate-300 group-hover:text-gray-700">
+                <p className="text-xs font-medium text-muted dark:text-foreground group-hover:text-foreground">
                     {user.email ?? 'Deleted User'}
                 </p>
             </div>

package/src/features/user/UserInfo.tsx

@@ -148,10 +148,10 @@ function EmailAgentAvatar({ email, showTitle = false, size = 'md' }: EmailAgentA
                     <Avatar
                         src="/cloud.svg"
                         color="bg-amber-500"
-                        className="px-[5px] text-white border-2 border-white dark:border-gray-800"
+                        className="px-[5px] text-white border-2 border-background"
                         size={size}
                     />
-                    <Avatar name={email} size={size} className="border-2 border-white dark:border-gray-800" />
+                    <Avatar name={email} size={size} className="border-2 border-background" />
                 </div>
                 {showTitle && <div className="text-sm font-semibold truncate">Agent&#8194;({email})</div>}
             </div>
@@ -208,13 +208,13 @@ function AgentAvatar({
             {apiKey && (
                 <div>
                     <div className="font-medium">{apiKey.name}</div>
-                    <div className="text-xs text-muted-foreground">Key ID: {apiKey.id}</div>
+                    <div className="text-xs text-muted">Key ID: {apiKey.id}</div>
                 </div>
             )}
             {!user && !apiKey && (
                 <>
                     <div>{t('user.serviceAccountDescription')}</div>
-                    <div className="text-gray-800 dark:text-gray-500 text-sm">
+                    <div className="text-foreground dark:text-muted text-sm">
                         <span className="font-semibold">ID:</span> {agentId}
                     </div>
                 </>
@@ -229,7 +229,7 @@ function AgentAvatar({
                     <Avatar
                         src="/cloud.svg"
                         color="bg-amber-500"
-                        className="px-[5px] text-white border-2 border-white dark:border-gray-800"
+                        className="px-[5px] text-white border-2 border-background"
                         size={size}
                     />
                     {user && (
@@ -237,16 +237,11 @@ function AgentAvatar({
                             src={user.picture}
                             name={user.name}
                             size={size}
-                            className="border-2 border-white dark:border-gray-800"
+                            className="border-2 border-background"
                         />
                     )}
                     {apiKey && (
-                        <Avatar
-                            name="API"
-                            color="bg-gray-400"
-                            size={size}
-                            className="border-2 border-white dark:border-gray-800"
-                        />
+                        <Avatar name="API" color="bg-gray-400" size={size} className="border-2 border-background" />
                     )}
                 </div>
                 {showTitle && (
@@ -455,7 +450,7 @@ function GroupAvatar({ userId, showTitle = false, size = 'md' }: GroupAvatarProp
     const description = (
         <div className="space-y-1">
             {group.description && <div className="text-sm">{group.description}</div>}
-            <div className="text-xs text-muted-foreground">{t('user.groupId', { id: group.id })}</div>
+            <div className="text-xs text-muted">{t('user.groupId', { id: group.id })}</div>
             {group.tags && group.tags.length > 0 && (
                 <div className="flex flex-wrap gap-1">
                     {group.tags.map((tag) => (
@@ -471,7 +466,7 @@ function GroupAvatar({ userId, showTitle = false, size = 'md' }: GroupAvatarProp
     return (
         <UserPopoverPanel title={group.name || t('user.unnamedGroup')} description={description}>
             <div className="flex flex-row items-center gap-2">
-                <Users className="size-6 text-indigo-500" size={size} />
+                <Users className="size-6 text-primary" size={size} />
                 {showTitle && <div className="text-sm font-semibold ps-2">{group.name || t('user.unnamedGroup')}</div>}
             </div>
         </UserPopoverPanel>
@@ -540,7 +535,7 @@ export function ApiKeyAvatar({ keyId, showTitle = false, size = 'md' }: ApiKeyAv
     const title = t('user.privateKey');
     const avatar = <Avatar name={'PK'} color="bg-pink-500" size={size} />;
     const description = (
-        <Table className="dark:bg-gray-800 dark:text-gray-200 table-fixed w-full">
+        <Table className="dark:bg-muted dark:text-foreground table-fixed w-full">
             <tr>
                 <td className="font-semibold w-20">{t('user.key')}</td>
                 <td className="truncate max-w-0">{data?.name}</td>
@@ -583,7 +578,7 @@ function UserPopoverPanel({ title, description, children }: UserPopoverPanelProp
             </PopoverTrigger>
             <PopoverContent align="center" sideOffset={8} side="right">
                 <div className="flex flex-col gap-1 rounded-md shadow-md p-2">
-                    <div className="text-md font-semibold">{title}</div>
+                    <div className="text-base font-semibold">{title}</div>
                     {description}
                 </div>
             </PopoverContent>

package/src/features/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './interaction.js';
 export * from './mimeType.js';
 export * from './print.js';
 export * from './rendition.js';

package/src/features/utils/interaction.test.tsx

@@ -0,0 +1,93 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { InteractionStatus } from '@vertesia/common';
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+    InteractionLabel,
+    isUnresolvedInteractionRef,
+    resolveInteractionName,
+    splitInteractionType,
+} from './interaction.js';
+
+describe('splitInteractionType', () => {
+    it('splits a known namespace off the name', () => {
+        expect(splitInteractionType('sys:code_agent')).toEqual({ type: 'sys', label: 'code_agent' });
+    });
+
+    it('keeps colons that are part of the name', () => {
+        expect(splitInteractionType('nfwf-chatbot:main:rag-agent')).toEqual({ label: 'nfwf-chatbot:main:rag-agent' });
+        expect(splitInteractionType('WhatColor')).toEqual({ label: 'WhatColor' });
+    });
+});
+
+describe('resolveInteractionName', () => {
+    it('prefers the resolved ref name over the run snapshot', () => {
+        const name = resolveInteractionName({ name: 'Current Name' }, 'Stale Name', '682a822c4dbfdc27017ff6cd');
+        expect(name).toBe('Current Name');
+    });
+
+    it('falls back when the ref name is the bare ObjectId the resolver left behind', () => {
+        const name = resolveInteractionName({ name: '682a822c4dbfdc27017ff6cd' }, 'Legacy Name');
+        expect(name).toBe('Legacy Name');
+    });
+
+    it('skips empty fallbacks and returns undefined when nothing is usable', () => {
+        expect(resolveInteractionName(undefined, '', 'ref-string')).toBe('ref-string');
+        expect(resolveInteractionName(undefined, undefined, '')).toBeUndefined();
+    });
+
+    it('names a deleted interaction from its id, from either the ref or a bare bucket id', () => {
+        // The run row has the ref the server left behind; the facet bucket has only its `_id`.
+        // Both must produce the same label or the option stops matching the row it filters for.
+        const fromRow = resolveInteractionName({ name: '682a822c4dbfdc27017ff6cd' });
+        const fromBucket = resolveInteractionName(undefined, '682a822c4dbfdc27017ff6cd');
+        expect(fromRow).toBe('Deleted interaction (~017ff6cd)');
+        expect(fromBucket).toBe(fromRow);
+    });
+});
+
+describe('isUnresolvedInteractionRef', () => {
+    it('flags only refs with neither a version nor a status', () => {
+        expect(isUnresolvedInteractionRef({ version: 0, status: InteractionStatus.unknown })).toBe(true);
+        expect(isUnresolvedInteractionRef({ version: 0, status: InteractionStatus.code })).toBe(false);
+        expect(isUnresolvedInteractionRef({ version: 2, status: InteractionStatus.unknown })).toBe(false);
+        expect(isUnresolvedInteractionRef(undefined)).toBe(false);
+    });
+});
+
+describe('InteractionLabel', () => {
+    afterEach(cleanup);
+
+    it('lifts the namespace out of the name and badges the version and status', () => {
+        render(
+            <InteractionLabel interaction={{ name: 'sys:code_agent', version: 3, status: InteractionStatus.code }} />,
+        );
+        expect(screen.getByText('code_agent')).toBeTruthy();
+        expect(screen.getByText('sys')).toBeTruthy();
+        expect(screen.getByText('v3 code')).toBeTruthy();
+    });
+
+    it('badges nothing for a ref the server could not resolve', () => {
+        const { container } = render(
+            <InteractionLabel
+                interaction={{ name: '682a822c4dbfdc27017ff6cd', version: 0, status: InteractionStatus.unknown }}
+                fallbacks={['Legacy Name']}
+            />,
+        );
+        expect(container.textContent).toBe('Legacy Name');
+    });
+
+    it('renders the fallback node only when there is no reference at all', () => {
+        render(<InteractionLabel fallbackNode={<span>Interaction not found</span>} />);
+        expect(screen.getByText('Interaction not found')).toBeTruthy();
+    });
+
+    it('names a deleted interaction rather than falling through to the fallback node', () => {
+        const { container } = render(
+            <InteractionLabel
+                interaction={{ name: '682a822c4dbfdc27017ff6cd', version: 0, status: InteractionStatus.unknown }}
+                fallbackNode={<span>Interaction not found</span>}
+            />,
+        );
+        expect(container.textContent).toBe('Deleted interaction (~017ff6cd)');
+    });
+});