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

package/src/features/agent/chat/ModernAgentOutput/ToolCallGroup.tsx

@@ -117,13 +117,13 @@ function areMessagesRenderEqual(prevMessage: AgentMessage, nextMessage: AgentMes
 function statusBadgeClass(status?: ToolExecutionStatus): string {
     switch (status) {
         case 'completed':
-            return 'bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800';
+            return 'bg-success text-success border-success';
         case 'running':
-            return 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800';
+            return 'bg-info text-info border-info';
         case 'error':
-            return 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800';
+            return 'bg-destructive text-destructive border-destructive';
         case 'warning':
-            return 'bg-yellow-50 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800';
+            return 'bg-attention text-attention border-attention';
         default:
             return '';
     }
@@ -320,10 +320,9 @@ const getFilesFromDetails = (
     return Array.isArray(files) ? files : undefined;
 };
 
-const TOOL_BADGE_CLASS =
-    'text-[10px] px-1.5 py-0.5 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800 font-medium';
+const TOOL_BADGE_CLASS = 'text-[10px] px-1.5 py-0.5 rounded-md bg-done text-done border border-done font-medium';
 const ASSISTANT_BADGE_CLASS =
-    'text-[10px] px-1.5 py-0.5 rounded-md bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 font-medium';
+    'text-[10px] px-1.5 py-0.5 rounded-md bg-muted text-foreground border border-border font-medium';
 
 const isToolPreambleMessage = (message: AgentMessage): boolean => {
     const details = message.details as { display_role?: string } | undefined;
@@ -452,14 +451,14 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames
     };
 
     return (
-        <div className={cn('border-b border-gray-100 dark:border-gray-800 last:border-b-0', classNames.itemClassName)}>
+        <div className={cn('border-b border-border last:border-b-0', classNames.itemClassName)}>
             {/* Collapsed header - always visible */}
             {/* biome-ignore lint/a11y/useSemanticElements: header contains nested Buttons (copy); button-in-button is invalid HTML so role="button" on a div is the pragmatic choice. */}
             <div
                 role="button"
                 tabIndex={0}
                 className={cn(
-                    'flex items-start justify-between px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors',
+                    'flex items-start justify-between px-3 py-2 cursor-pointer hover:bg-muted transition-colors',
                     classNames.itemHeaderClassName,
                 )}
                 onClick={onToggle}
@@ -518,12 +517,7 @@ function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames
                     );
                     const progressDetails = getProgressDetails(details as Record<string, unknown> | undefined);
                     return (
-                        <div
-                            className={cn(
-                                'px-4 py-2 bg-gray-50/50 dark:bg-gray-800/30',
-                                classNames.itemContentClassName,
-                            )}
-                        >
+                        <div className={cn('px-4 py-2 bg-muted/50 dark:bg-muted/30', classNames.itemContentClassName)}>
                             {/* Badges row: tool name + status + timestamp */}
                             <div className="flex items-center gap-2 mb-2 flex-wrap">
                                 <span className={cn(badgeClass, classNames.toolBadgeClassName)}>{toolName}</span>
@@ -769,7 +763,7 @@ function GroupImageDisplay({ messages, artifactRunId }: { messages: AgentMessage
     if (resolvedImages.length === 0) return null;
 
     return (
-        <div className="px-3 py-1.5 border-b border-gray-100 dark:border-gray-800">
+        <div className="px-3 py-1.5 border-b border-border">
             <FileDisplay files={resolvedImages} />
         </div>
     );
@@ -829,7 +823,7 @@ function ToolCallGroupComponent({
             return <PulsatingCircle size="sm" color="blue" />;
         }
         if (toolStatus === 'running') {
-            return <span className="size-2 rounded-full bg-blue-500 inline-block" />;
+            return <span className="size-2 rounded-full bg-primary inline-block" />;
         }
         if (toolStatus === 'completed') {
             return <CheckCircle className="size-4 text-success" />;
@@ -840,7 +834,7 @@ function ToolCallGroupComponent({
         if (toolStatus === 'warning') {
             return <AlertTriangle className="size-4 text-attention" />;
         }
-        return <Bot className="size-4 text-purple-600 dark:text-purple-400" />;
+        return <Bot className="size-4 text-done" />;
     };
 
     // Get border color based on status
@@ -848,7 +842,7 @@ function ToolCallGroupComponent({
         if (toolStatus === 'completed') return 'border-s-success';
         if (toolStatus === 'error') return 'border-s-destructive';
         if (toolStatus === 'warning') return 'border-s-attention';
-        return 'border-s-purple-500';
+        return 'border-s-done';
     };
 
     // Animate new messages when they're added
@@ -914,9 +908,7 @@ function ToolCallGroupComponent({
     };
 
     return (
-        <div
-            className={cn('border-s-4 overflow-hidden bg-white dark:bg-gray-900 mb-4', getBorderColor(), rootClassName)}
-        >
+        <div className={cn('border-s-4 overflow-hidden bg-white dark:bg-muted mb-4', getBorderColor(), rootClassName)}>
             {/* Compact header */}
             {/* biome-ignore lint/a11y/useSemanticElements: header contains nested Buttons; button-in-button is invalid HTML so role="button" on a div is the pragmatic choice. */}
             <div
@@ -924,7 +916,7 @@ function ToolCallGroupComponent({
                 tabIndex={0}
                 aria-expanded={!isCollapsed}
                 className={cn(
-                    'flex items-center justify-between px-4 py-1.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors',
+                    'flex items-center justify-between px-4 py-1.5 cursor-pointer hover:bg-muted transition-colors',
                     headerClassName,
                 )}
                 onClick={() => setIsCollapsed(!isCollapsed)}
@@ -941,12 +933,7 @@ function ToolCallGroupComponent({
                     ) : (
                         <>
                             <span className={cn('text-xs font-medium text-muted', senderClassName)}>Agent</span>
-                            <span
-                                className={cn(
-                                    'text-xs text-purple-600 dark:text-purple-400 font-medium',
-                                    toolSummaryClassName,
-                                )}
-                            >
+                            <span className={cn('text-xs text-done font-medium', toolSummaryClassName)}>
                                 {toolSummary}
                             </span>
                         </>
@@ -960,12 +947,7 @@ function ToolCallGroupComponent({
 
                 <div className="flex items-center gap-1 flex-shrink-0">
                     {preambleText && (
-                        <span
-                            className={cn(
-                                'text-[10px] text-purple-600 dark:text-purple-400 font-medium',
-                                toolSummaryClassName,
-                            )}
-                        >
+                        <span className={cn('text-[10px] text-done font-medium', toolSummaryClassName)}>
                             {toolSummary}
                         </span>
                     )}
@@ -1016,10 +998,7 @@ function ToolCallGroupComponent({
                         return (
                             <div
                                 key={itemKey}
-                                className={cn(
-                                    'border-b border-gray-100 dark:border-gray-800 last:border-b-0',
-                                    itemClassName,
-                                )}
+                                className={cn('border-b border-border last:border-b-0', itemClassName)}
                                 style={{
                                     opacity: isAnimating ? 0 : 1,
                                     transform: isAnimating ? 'translateX(-10px)' : 'translateX(0)',
@@ -1036,7 +1015,7 @@ function ToolCallGroupComponent({
                                     tabIndex={0}
                                     aria-expanded={isItemExpanded}
                                     className={cn(
-                                        'flex items-start gap-2 py-1.5 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50',
+                                        'flex items-start gap-2 py-1.5 text-xs cursor-pointer hover:bg-muted',
                                         itemHeaderClassName,
                                     )}
                                     onClick={() => toggleItem(itemKey)}

package/src/features/agent/chat/ModernAgentOutput/requestInputMessages.test.ts

@@ -28,6 +28,29 @@ function makeApprovalRequest(): AgentMessage {
     } as unknown as AgentMessage;
 }
 
+function makeApprovalRequestForToolUse(toolUseId: string): AgentMessage {
+    const request = makeApprovalRequest();
+    return {
+        ...request,
+        details: { ...(request.details as Record<string, unknown>), request_id: toolUseId },
+    } as unknown as AgentMessage;
+}
+
+function makeApprovalReleasedMessage(toolUseId: string, timestamp: number): AgentMessage {
+    return {
+        timestamp,
+        type: AgentMessageType.UPDATE,
+        message: 'Approval reviewer allowed Create a new draft interaction.',
+        workstream_id: 'main',
+        details: {
+            request_id: toolUseId,
+            approval_decision: 'auto_approved',
+            approval_release_reason: 'reviewer_allowed',
+            approval_request: { tool_name: 'create_interaction', approval_key: APPROVAL_KEY },
+        },
+    } as unknown as AgentMessage;
+}
+
 function makeUserAnswer(message: string, metadata?: Record<string, unknown>): AgentMessage {
     return {
         timestamp: 2,
@@ -164,6 +187,24 @@ describe('request input correlation', () => {
         expect(getPendingRequestInputMessage([firstRequest, firstAnswer, secondRequest])).toBe(secondRequest);
     });
 
+    it('stops asking once the workflow releases the approval without a user answer', () => {
+        const request = makeApprovalRequestForToolUse('write-1');
+        const released = makeApprovalReleasedMessage('write-1', 3);
+
+        expect(getPendingRequestInputMessage([request])).toBe(request);
+        expect(getPendingRequestInputMessage([request, released])).toBeUndefined();
+    });
+
+    it('keeps asking for a later request that reuses a released approval key', () => {
+        // Approval keys are `tool_name:target`, so the same action repeats across turns: a release
+        // must resolve the request it answered, not every prompt that shares its key.
+        const firstRequest = makeApprovalRequestForToolUse('write-1');
+        const released = makeApprovalReleasedMessage('write-1', 3);
+        const laterRequest = { ...makeApprovalRequestForToolUse('write-2'), timestamp: 4 };
+
+        expect(getPendingRequestInputMessage([firstRequest, released, laterRequest])).toBe(laterRequest);
+    });
+
     it('reads a request id from response metadata', () => {
         expect(
             getRequestInputResponseIdFromMetadata({

package/src/features/agent/chat/ModernAgentOutput/requestInputMessages.ts

@@ -242,6 +242,12 @@ export function getRequestInputResponseIdFromMetadata(metadata?: Record<string,
     return typeof requestId === 'string' && requestId ? requestId : undefined;
 }
 
+/**
+ * Prefix marking a resolution that belongs to ONE request rather than to every prompt sharing an
+ * approval key. Approval keys are `tool_name:target`, so the same action repeats across turns.
+ */
+const RESOLVED_REQUEST_ID_PREFIX = 'request:';
+
 export function getResolvedToolApprovalKeys(messages: AgentMessage[]): Set<string> {
     const resolved = new Set<string>();
 
@@ -251,6 +257,17 @@ export function getResolvedToolApprovalKeys(messages: AgentMessage[]): Set<strin
         const approvalKey = approvalRequest?.approval_key;
         const decision = details?.approval_decision;
 
+        // Released without a user answer (approval mode change, or the reviewer allowed it after the
+        // run switched to auto_review). Scoped to the released request: a later prompt for the same
+        // action still has to be answered, or the run would wait with nothing on screen.
+        if (decision === 'auto_approved') {
+            const requestId = details?.request_id;
+            if (typeof requestId === 'string' && requestId) {
+                resolved.add(`${RESOLVED_REQUEST_ID_PREFIX}${requestId}`);
+            }
+            continue;
+        }
+
         if (
             typeof approvalKey === 'string' &&
             (decision === 'denied' ||
@@ -321,6 +338,8 @@ export function isRequestInputResolvedByToolApprovalEvent(
     resolvedToolApprovalKeys: Set<string>,
 ): boolean {
     if (message.type !== AgentMessageType.REQUEST_INPUT) return false;
+    const requestId = getRequestInputId(message);
+    if (requestId && resolvedToolApprovalKeys.has(`${RESOLVED_REQUEST_ID_PREFIX}${requestId}`)) return true;
     const approvalKey = getToolApprovalKey(message);
     return approvalKey ? resolvedToolApprovalKeys.has(approvalKey) : false;
 }

package/src/features/agent/chat/ModernAgentOutput/utils.test.ts

@@ -140,6 +140,99 @@ describe('ModernAgentOutput utils - tool preamble behavior', () => {
     });
 });
 
+describe('ModernAgentOutput summary - ask_user review content', () => {
+    const draft = '## Draft agenda\n9:00 Welcome\n9:15 Platform foundations';
+    const tool = makeMessage({
+        timestamp: 3000,
+        message: 'Waiting for your review...',
+        details: {
+            tool: 'ask_user',
+            tool_status: 'running',
+            tool_run_id: 'ask-1',
+            activity_group_id: 'review-1',
+        },
+    });
+    const question = makeMessage({
+        timestamp: 4000,
+        type: AgentMessageType.REQUEST_INPUT,
+        message: 'Does this agenda work?',
+        details: { tool: 'ask_user' },
+    });
+
+    it.each([false, true])('keeps persisted review prose visible with streamed=%s', (streamed) => {
+        const preamble = makeMessage({
+            timestamp: 2000,
+            message: draft,
+            details: {
+                event_class: 'activity',
+                display_role: 'tool_preamble',
+                tools: ['update_plan', 'ask_user'],
+                activity_group_id: 'review-1',
+                streamed,
+            },
+        });
+        const items = buildSummaryConversationItems([preamble, tool, question], false);
+
+        expect(items.map((item) => item.type)).toEqual(['message', 'work', 'message']);
+        expect(items[0]).toEqual({ type: 'message', message: preamble });
+        expect(items[2]).toEqual({ type: 'message', message: question });
+    });
+
+    it.each([
+        { tools: [{ name: 'ask_user' }] },
+        { tools: [{ tool: 'ask_user' }] },
+        { tool: 'ask_user' },
+        { tools: [null, 42, {}, 'search_documents', { name: 'ask_user' }] },
+    ])('keeps review prose visible for supported tool metadata: %j', (details) => {
+        const preamble = makeMessage({
+            timestamp: 2000,
+            message: draft,
+            // Exercise legacy wire shapes outside the current string[] contract.
+            details: { display_role: 'tool_preamble', ...details } as unknown as AgentMessage['details'],
+        });
+        expect(buildSummaryConversationItems([preamble, tool, question], false)[0]).toEqual({
+            type: 'message',
+            message: preamble,
+        });
+    });
+
+    it.each([
+        { display_role: 'tool_preamble', tools: [null, {}, { name: 'search_documents' }] },
+        { tool: 'ask_user', tool_status: 'running' },
+        { tool: 'think' },
+    ])('keeps non-review activity collapsed: %j', (details) => {
+        const activity = makeMessage({
+            message: 'Working on the draft',
+            details: details as unknown as AgentMessage['details'],
+        });
+        expect(buildSummaryConversationItems([activity, question], false)[0]).toMatchObject({
+            type: 'work',
+            messages: [activity],
+        });
+    });
+
+    it.each([false, true])('keeps reconstructed review streams visible with isComplete=%s', (isComplete) => {
+        const messages = buildSummaryDisplayMessages(
+            [tool, question],
+            new Map([
+                [
+                    'review-stream',
+                    {
+                        text: draft,
+                        startTimestamp: 2000,
+                        activityId: 'review-1',
+                        isComplete,
+                    },
+                ],
+            ]),
+        );
+        const items = buildSummaryConversationItems(messages, false);
+
+        expect(items.map((item) => item.type)).toEqual(['message', 'work', 'message']);
+        expect(items[0]).toMatchObject({ type: 'message', message: { message: draft } });
+    });
+});
+
 describe('ModernAgentOutput utils - progress state', () => {
     it('treats a new user turn after an older idle message as in progress', () => {
         const idle = makeMessage({

package/src/features/agent/chat/SlidingThinkingIndicator.tsx

@@ -284,7 +284,7 @@ export function SlidingThinkingIndicator({
                         size="xs"
                         variant="ghost"
                         onClick={() => setShowDetails(!showDetails)}
-                        className="text-slate-500 hover:text-slate-700 flex items-center gap-1 text-xs"
+                        className="text-muted hover:text-foreground flex items-center gap-1 text-xs"
                         title={showDetails ? t('agent.hideThinkingDetails') : t('agent.showAllMessages')}
                     >
                         {showDetails ? (
@@ -356,10 +356,13 @@ export function SlidingThinkingIndicator({
                                         ) : (
                                             <div
                                                 className={cn(
-                                                    'py-2 px-3 border-s-2 bg-white dark:bg-slate-800 flex items-center w-full',
+                                                    'py-2 px-3 border-s-2 bg-white dark:bg-muted flex items-center w-full',
                                                     'transition-all duration-200 ease-in-out rounded-e-md',
                                                     // Set border color based on message type
                                                     {
+                                                        // Categorical message-type palette, not semantic state:
+                                                        // these must stay in step with <PulsingMessageLoader color>
+                                                        // in AnimatedThinkingDots, which uses the same hue names.
                                                         'border-blue-400 dark:border-blue-500':
                                                             getThinkingColor(message) === 'blue',
                                                         'border-purple-400 dark:border-purple-500':

package/src/features/agent/chat/VegaLiteChart.tsx

@@ -3,7 +3,6 @@ import { Button } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import { Check, Copy, Download, Loader2, Maximize2, Minimize2, X } from 'lucide-react';
-import Papa from 'papaparse';
 import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { View } from 'vega';
 import type { TopLevelSpec as VisualizationSpec } from 'vega-lite';
@@ -717,7 +716,12 @@ export const VegaLiteChart = memo(
                         let data: unknown[];
 
                         if (isCsv) {
-                            // Parse CSV to JSON array
+                            // Parse CSV to JSON array. papaparse is imported here rather than at
+                            // module scope: it is only ever needed for a chart whose data comes from
+                            // a .csv artifact, and a static import put it in the widgets bundle's
+                            // graph (this module is reachable from widgets/markdown), so every
+                            // application paid for it on first render.
+                            const { default: Papa } = await import('papaparse');
                             const csvText = await response.text();
                             const parseResult = Papa.parse(csvText, {
                                 header: true,

package/src/features/agent/chat/hooks/useDocumentPanel.test.tsx

@@ -0,0 +1,33 @@
+import { act, renderHook } from '@testing-library/react';
+import { type AgentMessage, AgentMessageType } from '@vertesia/common';
+import { describe, expect, it } from 'vitest';
+import { useDocumentPanel } from './useDocumentPanel';
+
+function documentCreated(documentId: string, title: string): AgentMessage {
+    return {
+        type: AgentMessageType.UPDATE,
+        message: '',
+        timestamp: Date.now(),
+        details: { event_class: 'document_created', document_id: documentId, title },
+    } as unknown as AgentMessage;
+}
+
+describe('useDocumentPanel', () => {
+    it('opens the newest document reported by the agent', () => {
+        const messages = [documentCreated('doc-1', 'Brief'), documentCreated('doc-2', 'Summary')];
+        const { result } = renderHook(() => useDocumentPanel(messages));
+
+        expect(result.current.openDocuments.map((doc) => doc.id)).toEqual(['doc-1', 'doc-2']);
+        expect(result.current.activeDocumentId).toBe('doc-2');
+        expect(result.current.isDocPanelOpen).toBe(true);
+    });
+
+    it('selects null to go back to the list while keeping the documents open', () => {
+        const { result } = renderHook(() => useDocumentPanel([documentCreated('doc-1', 'Brief')]));
+
+        act(() => result.current.selectDocument(null));
+
+        expect(result.current.activeDocumentId).toBeNull();
+        expect(result.current.openDocuments).toHaveLength(1);
+    });
+});

package/src/features/agent/chat/hooks/useDocumentPanel.ts

@@ -8,8 +8,8 @@ export interface UseDocumentPanelResult {
     isDocPanelOpen: boolean;
     docRefreshKey: number;
     closeDocPanel: () => void;
-    closeDocument: (docId: string) => void;
-    selectDocument: (docId: string) => void;
+    /** Select a document to display, or `null` to go back to the document list. */
+    selectDocument: (docId: string | null) => void;
     openDocInPanel: (docId: string) => void;
     updateDocumentTitle: (docId: string, title: string) => void;
 }
@@ -137,23 +137,7 @@ export function useDocumentPanel(messages: AgentMessage[]): UseDocumentPanelResu
         setIsDocPanelOpen(false);
     }, []);
 
-    const closeDocument = useCallback((docId: string) => {
-        setOpenDocuments((prev) => {
-            const next = prev.filter((d) => d.id !== docId);
-            if (next.length === 0) {
-                setIsDocPanelOpen(false);
-                setActiveDocumentId(null);
-            } else {
-                setActiveDocumentId((current) => {
-                    if (current === docId) return next[0].id;
-                    return current;
-                });
-            }
-            return next;
-        });
-    }, []);
-
-    const selectDocument = useCallback((docId: string) => {
+    const selectDocument = useCallback((docId: string | null) => {
         setActiveDocumentId(docId);
     }, []);
 
@@ -176,7 +160,6 @@ export function useDocumentPanel(messages: AgentMessage[]): UseDocumentPanelResu
         isDocPanelOpen,
         docRefreshKey,
         closeDocPanel,
-        closeDocument,
         selectDocument,
         openDocInPanel,
         updateDocumentTitle,

package/src/features/errors/RowErrorBoundary.tsx

@@ -17,7 +17,7 @@ function RowErrorFallback({ error }: ErrorFallbackComponentProps) {
             <td colSpan={100}>
                 <span className="text-xs"> Cannot display row</span>
                 <br />
-                <span className="bg-gray-400">{message}</span>
+                <span className="bg-muted">{message}</span>
             </td>
         </tr>
     );

package/src/features/facets/AgentRunnerFacetsNav.tsx

@@ -193,7 +193,7 @@ export function AgentRunnerFacetsNav({
                     <div className="flex justify-end">
                         {!selectionCount && (
                             <div className="flex items-center justify-between px-2 py-1">
-                                <div className="text-sm text-muted-foreground">
+                                <div className="text-sm text-muted">
                                     {search.initialized ? `${search.totalCount} runs` : 'Loading runs...'}
                                 </div>
                             </div>

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

@@ -1,11 +1,13 @@
-import { type FacetBucket, InteractionStatus } from '@vertesia/common';
+import type { FacetBucket } from '@vertesia/common';
 import { Badge, type FilterGroup } from '@vertesia/ui/core';
+import {
+    type InteractionDisplayRef,
+    InteractionStatusBadge,
+    resolveInteractionName,
+    splitInteractionType,
+} from '../../utils/interaction.js';
 
-export interface EnrichedFacetBucket extends FacetBucket {
-    name?: string;
-    status?: string;
-    version?: number;
-}
+export interface EnrichedFacetBucket extends FacetBucket, InteractionDisplayRef {}
 
 interface InteractionFacetProps {
     buckets: EnrichedFacetBucket[];
@@ -13,6 +15,11 @@ interface InteractionFacetProps {
     placeholder?: string;
 }
 
+/** The name this facet displays for a bucket — the same one the runs table shows for the run. */
+function bucketName(bucket: EnrichedFacetBucket | undefined, interactionId: string): string {
+    return resolveInteractionName(bucket, interactionId) ?? interactionId;
+}
+
 export function VInteractionFacet({ buckets, name, placeholder }: InteractionFacetProps): FilterGroup {
     const options = buckets.map((bucket) => ({
         label: `(${bucket.count})`,
@@ -26,38 +33,20 @@ export function VInteractionFacet({ buckets, name, placeholder }: InteractionFac
         type: 'select',
         labelRenderer: (interactionId: string) => {
             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';
-            if (bucket?.status) {
-                switch (bucket.status) {
-                    case InteractionStatus.published:
-                        badgeVariant = 'success';
-                        break;
-                    case InteractionStatus.archived:
-                        badgeVariant = 'destructive';
-                        break;
-                    case InteractionStatus.code:
-                        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}` : '');
+            // Same split as the runs table: the `sys`/`app`/`tmp` namespace becomes its own badge
+            // instead of staying glued to the name.
+            const { type, label } = splitInteractionType(bucketName(bucket, interactionId));
 
             return (
                 <div className="w-full flex items-center justify-between">
                     <div className="flex flex-row flex-wrap items-center gap-2 min-w-0 flex-1">
-                        <span className="text-sm truncate">{displayName}</span>
-                        {badgeText && (
-                            <Badge variant={badgeVariant} className="text-xs w-fit">
-                                {badgeText}
+                        <span className="text-sm truncate">{label}</span>
+                        {type && (
+                            <Badge variant="secondary" className="text-xs w-fit">
+                                {type}
                             </Badge>
                         )}
+                        {bucket && <InteractionStatusBadge interaction={bucket} className="text-xs w-fit" />}
                     </div>
                     {(bucket?.count ?? 0) > 0 && <span className="ms-2 text-xs shrink-0">({bucket?.count})</span>}
                 </div>
@@ -65,8 +54,7 @@ export function VInteractionFacet({ buckets, name, placeholder }: InteractionFac
         },
         filterBy: (optionValue: string, searchText: string) => {
             const bucket = buckets.find((b) => b._id === optionValue);
-            const searchName = bucket?.name || optionValue;
-            return searchName.toLowerCase().includes(searchText.toLowerCase());
+            return bucketName(bucket, optionValue).toLowerCase().includes(searchText.toLowerCase());
         },
     };
 

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

@@ -36,7 +36,7 @@ export function createUserFilterGroup({ buckets, name, placeholder }: UserFacetP
                     <div className="flex-1 min-w-0 flex items-center truncate">
                         <UserInfo userRef={userRef} showTitle={true} size="sm" />
                     </div>
-                    <span className="text-muted-foreground flex-shrink-0">({bucket?.count || 0})</span>
+                    <span className="text-muted flex-shrink-0">({bucket?.count || 0})</span>
                 </div>
             );
         },

package/src/features/layout/GenericPageNavHeader.tsx

@@ -148,6 +148,9 @@ export function GenericPageNavHeader({
     };
 
     const breadcrumbItems = buildBreadcrumbItems();
+    // The description tooltip trails the last element of the header: the breadcrumbs when there
+    // are any, otherwise the title.
+    const showDescriptionWithTitle = !!title && breadcrumbItems.length === 0;
 
     return (
         <div className={clsx('pb-0 ps-4 pe-2 py-2 flex flex-col', className)}>
@@ -161,7 +164,7 @@ export function GenericPageNavHeader({
                                 maxItems={4}
                             />
                         )}
-                        {description && (
+                        {description && !showDescriptionWithTitle && (
                             <VTooltip description={description}>
                                 <Info className="size-4 text-muted ms-4" />
                             </VTooltip>
@@ -170,6 +173,11 @@ export function GenericPageNavHeader({
                     {title && (
                         <div className="flex gap-2 items-center">
                             <h1 className="text-xl font-semibold break-all">{title}</h1>
+                            {description && showDescriptionWithTitle && (
+                                <VTooltip description={description}>
+                                    <Info className="size-4 text-muted" />
+                                </VTooltip>
+                            )}
                         </div>
                     )}
                 </div>

package/src/features/layout/NotFoundView.tsx

@@ -4,7 +4,7 @@ export function NotFoundView() {
     const { t } = useUITranslation();
     return (
         <div className="text-center pt-32">
-            <h1 className="text-3xl font-bold text-red-500">404</h1>
+            <h1 className="text-3xl font-bold text-destructive">404</h1>
             <p className="text-2xl">{t('layout.pageNotFound')}</p>
         </div>
     );