@vertesia/ui 1.5.0-dev.20260905.011013Z → 1.5.0-dev.20260910.052912Z

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)');
+    });
+});

package/src/features/utils/interaction.tsx

@@ -0,0 +1,125 @@
+import { InteractionStatus } from '@vertesia/common';
+import { Badge } from '@vertesia/ui/core';
+import type { ReactNode } from 'react';
+
+/**
+ * The parts of an interaction reference the display helpers below read. Kept structural so runs,
+ * facet buckets and full interactions can all be passed as-is.
+ */
+export interface InteractionDisplayRef {
+    name?: string;
+    version?: number;
+    status?: InteractionStatus;
+}
+
+/**
+ * Namespaces that a ref actually uses as a type prefix. Every other colon in a ref belongs to the
+ * name itself (`main:rag-agent`, `nfwf-chatbot:main:rag-agent`), so it must not become a badge.
+ */
+const INTERACTION_TYPES: string[] = ['sys', 'app', 'tmp'];
+
+const OBJECT_ID_RE = /^[0-9a-fA-F]{24}$/;
+
+/** Split `<type>:<rest>` into the type badge and the label to display; untyped refs keep their name. */
+export function splitInteractionType(name: string): { type?: string; label: string } {
+    const separator = name.indexOf(':');
+    const type = separator > 0 ? name.slice(0, separator) : undefined;
+    return type && INTERACTION_TYPES.includes(type) ? { type, label: name.slice(separator + 1) } : { label: name };
+}
+
+/**
+ * Pick the name to display for an interaction reference: the ref's own name, then the fallbacks —
+ * a run's `interaction_name` / raw ref string, a facet bucket's id — in order.
+ *
+ * A bare ObjectId is never a name: it is what a deleted stored interaction leaves behind once the
+ * server can no longer resolve it. Those candidates are skipped, and if nothing else is left the
+ * id becomes a short "deleted" label instead, so a run row and the facet option that filters for
+ * it name the missing interaction identically. Returns undefined when there is no id either.
+ */
+export function resolveInteractionName(
+    ref: InteractionDisplayRef | undefined,
+    ...fallbacks: (string | undefined)[]
+): string | undefined {
+    const candidates = [ref?.name, ...fallbacks].filter((candidate): candidate is string => !!candidate);
+    const name = candidates.find((candidate) => !OBJECT_ID_RE.test(candidate));
+    if (name) return name;
+    const id = candidates[0];
+    return id ? `Deleted interaction (~${id.slice(-8)})` : undefined;
+}
+
+/**
+ * A reference the server couldn't resolve carries neither a version nor a status; it has no status
+ * worth badging.
+ */
+export function isUnresolvedInteractionRef(ref: InteractionDisplayRef | undefined): boolean {
+    return !!ref && ref.version === 0 && ref.status === InteractionStatus.unknown;
+}
+
+interface InteractionStatusBadgeProps {
+    interaction: InteractionDisplayRef;
+    className?: string;
+}
+
+export function InteractionStatusBadge({ interaction, className }: InteractionStatusBadgeProps) {
+    let variant: 'success' | 'info' | 'destructive' | 'default' = 'success';
+    switch (interaction.status) {
+        case InteractionStatus.published:
+            variant = 'success';
+            break;
+        case InteractionStatus.archived:
+            variant = 'destructive';
+            break;
+        case InteractionStatus.code:
+            variant = 'info';
+            break;
+    }
+    const version = interaction.version ? `v${interaction.version}` : '';
+    const status = interaction.status && interaction.status !== InteractionStatus.unknown ? interaction.status : '';
+    const text = [version, status].filter(Boolean).join(' ');
+    // Nothing resolved (an unresolved ref, or a bucket carrying neither field) — no badge at all.
+    if (!text) return null;
+    return (
+        <Badge variant={variant} className={className}>
+            {text}
+        </Badge>
+    );
+}
+
+interface InteractionLabelProps {
+    /** The resolved reference, when the server could resolve one. */
+    interaction?: InteractionDisplayRef;
+    /**
+     * Names to fall back on, in order, when the ref carries no usable name — a run's
+     * `interaction_name`, the raw ref string it was launched with, a facet bucket id.
+     */
+    fallbacks?: (string | undefined)[];
+    /** Rendered in place of the label when no name resolves at all. */
+    fallbackNode?: ReactNode;
+}
+
+/**
+ * How every run listing names the interaction it ran: the name with its `sys`/`app`/`tmp`
+ * namespace lifted into its own badge, above the version/status badge. Keep listings on this
+ * component so a row, its quick filter and the interaction facet never disagree.
+ */
+export function InteractionLabel({ interaction, fallbacks = [], fallbackNode = null }: InteractionLabelProps) {
+    const name = resolveInteractionName(interaction, ...fallbacks);
+    if (!name) {
+        return <>{fallbackNode}</>;
+    }
+    const { type, label } = splitInteractionType(name);
+    // InteractionStatusBadge renders null for an unresolved ref, so skip the row entirely here
+    // rather than emit an empty badge line.
+    const showStatus = !!interaction && !isUnresolvedInteractionRef(interaction);
+    return (
+        <>
+            {label}
+            {(type || showStatus) && (
+                <div className="flex items-center mt-1.5 shrink-0 gap-2">
+                    {type && <Badge variant="secondary">{type}</Badge>}
+                    {showStatus && interaction && <InteractionStatusBadge interaction={interaction} />}
+                </div>
+            )}
+        </>
+    );
+}

package/src/features/views/ViewResults.tsx

@@ -258,9 +258,9 @@ function ViewMedia({
     return (
         <div className={`flex items-center justify-center bg-muted ${className ?? ''}`} aria-hidden="true">
             {fallback === 'placeholder' ? (
-                <ImageIcon className="size-10 text-muted-foreground" />
+                <ImageIcon className="size-10 text-muted" />
             ) : (
-                <FileText className="size-10 text-muted-foreground" />
+                <FileText className="size-10 text-muted" />
             )}
         </div>
     );
@@ -379,7 +379,7 @@ function ListResults({
                             )}
                         </div>
                         {display.description && (
-                            <p className="line-clamp-3 text-sm text-muted-foreground">
+                            <p className="line-clamp-3 text-sm text-muted">
                                 <ViewField hit={hit} field={display.description} />
                             </p>
                         )}