@vertesia/ui 1.5.0-dev.20260807.073259Z → 1.5.0-dev.20260901.005903Z

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

@@ -1,8 +1,7 @@
 import type { AgentMessage } from '@vertesia/common';
-import { cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@vertesia/ui/core';
+import { cn, DropdownMenuItem, OverflowMoreMenu, useOverflowTabs } from '@vertesia/ui/core';
 import { i18nInstance, NAMESPACE, useUITranslation } from '@vertesia/ui/i18n';
 import { CheckCircle, ChevronDown, Clock } from 'lucide-react';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { getWorkstreamId } from './utils';
 
 interface WorkstreamTabsProps {
@@ -19,7 +18,6 @@ const TAB_ITEM_BASE =
     'flex items-center gap-1.5 px-2 py-1 text-xs font-medium whitespace-nowrap transition-colors border-b-2 shrink-0 cursor-pointer';
 const TAB_ITEM_INACTIVE = 'border-transparent text-muted hover:bg-muted';
 const TAB_ITEM_ACTIVE = 'border-info bg-info text-info';
-const TAB_GAP_PX = 4; // matches the `gap-1` between tab items
 
 // Shorten long workstream names for the tab row.
 function truncateName(name: string) {
@@ -50,93 +48,39 @@ function WorkstreamMoreMenu({
     count,
     completionStatus,
 }: WorkstreamMoreMenuProps) {
-    const [open, setOpen] = useState(false);
-    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const openedByHover = useRef(false);
-
-    const cancelClose = () => {
-        if (closeTimer.current) {
-            clearTimeout(closeTimer.current);
-            closeTimer.current = null;
-        }
-    };
-    const openOnHover = () => {
-        cancelClose();
-        openedByHover.current = true;
-        setOpen(true);
-    };
-    // Delay the close so the pointer can travel across the gap onto the menu.
-    const closeAfterDelay = () => {
-        cancelClose();
-        closeTimer.current = setTimeout(() => setOpen(false), 150);
-    };
-
-    // Clear any pending close timer on unmount.
-    useEffect(() => () => clearTimeout(closeTimer.current ?? undefined), []);
-
     return (
-        // Non-modal: a modal menu sets body `pointer-events: none` while open, which makes
-        // the hover open/close flap. It still closes on outside-click / Escape.
-        <DropdownMenu
-            modal={false}
-            open={open}
-            onOpenChange={(next) => {
-                // Fired by click / keyboard / dismiss (not by hover); keep our state in sync.
-                cancelClose();
-                if (next) openedByHover.current = false;
-                setOpen(next);
-            }}
+        <OverflowMoreMenu
+            label={label}
+            triggerClassName={cn(TAB_ITEM_BASE, active ? TAB_ITEM_ACTIVE : TAB_ITEM_INACTIVE)}
+            icon={<ChevronDown className="ms-0.5 size-3.5" />}
         >
-            <DropdownMenuTrigger asChild>
-                {/* Tab-bar primitive: raw button is the menu trigger (asChild). */}
-                <button
-                    type="button"
-                    onMouseEnter={openOnHover}
-                    onMouseLeave={closeAfterDelay}
-                    className={cn(TAB_ITEM_BASE, active ? TAB_ITEM_ACTIVE : TAB_ITEM_INACTIVE)}
-                >
-                    {label}
-                    <ChevronDown className="ms-0.5 size-3.5" />
-                </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-                align="end"
-                className="w-max"
-                onMouseEnter={cancelClose}
-                onMouseLeave={closeAfterDelay}
-                onCloseAutoFocus={(e) => {
-                    // Keep hover-opens from returning the focus ring to the trigger.
-                    if (openedByHover.current) e.preventDefault();
-                }}
-            >
-                {items.map(([id, name]) => {
-                    const showCount = (count?.get(id) ?? 0) > 0;
-                    return (
-                        <DropdownMenuItem
-                            key={id}
-                            onClick={() => onSelect(id)}
-                            className={cn('flex items-center gap-2', id === current && 'text-info')}
-                        >
-                            <span className="truncate">{name}</span>
-                            {showCount && (
-                                <span className="ms-auto inline-flex items-center gap-1">
-                                    <span className="inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[10px] text-muted">
-                                        {count?.get(id)}
-                                    </span>
-                                    {completionStatus &&
-                                        id !== 'all' &&
-                                        (completionStatus.get(id) ? (
-                                            <CheckCircle className="size-3 text-success" />
-                                        ) : (
-                                            <Clock className="size-3 text-attention" />
-                                        ))}
+            {items.map(([id, name]) => {
+                const showCount = (count?.get(id) ?? 0) > 0;
+                return (
+                    <DropdownMenuItem
+                        key={id}
+                        onClick={() => onSelect(id)}
+                        className={cn('flex items-center gap-2', id === current && 'text-info')}
+                    >
+                        <span className="truncate">{name}</span>
+                        {showCount && (
+                            <span className="ms-auto inline-flex items-center gap-1">
+                                <span className="inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[10px] text-muted">
+                                    {count?.get(id)}
                                 </span>
-                            )}
-                        </DropdownMenuItem>
-                    );
-                })}
-            </DropdownMenuContent>
-        </DropdownMenu>
+                                {completionStatus &&
+                                    id !== 'all' &&
+                                    (completionStatus.get(id) ? (
+                                        <CheckCircle className="size-3 text-success" />
+                                    ) : (
+                                        <Clock className="size-3 text-attention" />
+                                    ))}
+                            </span>
+                        )}
+                    </DropdownMenuItem>
+                );
+            })}
+        </OverflowMoreMenu>
     );
 }
 
@@ -161,82 +105,10 @@ function WorkstreamOverflowBar({
     completionStatus,
 }: WorkstreamOverflowBarProps) {
     const { t } = useUITranslation();
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
-    const moreRef = useRef<HTMLButtonElement | null>(null);
-    // `count` leading tabs are shown. When `promote` is set, the active tab is pulled
-    // into the last slot (before More) and `count` counts the tabs shown before it.
-    const [layout, setLayout] = useState<{ count: number; promote: boolean }>({
-        count: entries.length,
-        promote: false,
-    });
-
-    const recompute = () => {
-        const container = containerRef.current;
-        if (!container) return;
-        const containerWidth = container.clientWidth;
-        const widths = entries.map((_, i) => itemRefs.current[i]?.offsetWidth ?? 0);
-        const totalAll = widths.reduce((sum, w) => sum + w, 0) + TAB_GAP_PX * Math.max(0, entries.length - 1);
-
-        // How many tabs (in order, optionally skipping one) fit within `available`.
-        const fitCount = (available: number, skipIndex: number) => {
-            let used = 0;
-            let fitted = 0;
-            for (let i = 0; i < entries.length; i++) {
-                if (i === skipIndex) continue;
-                const cand = used + (fitted > 0 ? TAB_GAP_PX : 0) + widths[i];
-                if (cand > available) break;
-                used = cand;
-                fitted += 1;
-            }
-            return fitted;
-        };
-
-        let next: { count: number; promote: boolean };
-        if (totalAll <= containerWidth) {
-            next = { count: entries.length, promote: false };
-        } else {
-            const moreWidth = moreRef.current?.offsetWidth ?? 0;
-            const naturalCount = Math.max(1, fitCount(containerWidth - moreWidth - TAB_GAP_PX, -1));
-            const activeIndex = entries.findIndex(([id]) => id === activeWorkstream);
-            if (activeIndex < 0 || activeIndex < naturalCount) {
-                next = { count: naturalCount, promote: false };
-            } else {
-                // Active tab overflowed: reserve its slot at the end, fit leading tabs before it.
-                const leadAvailable = containerWidth - moreWidth - widths[activeIndex] - TAB_GAP_PX * 2;
-                next = { count: fitCount(leadAvailable, activeIndex), promote: true };
-            }
-        }
-        setLayout((prev) => (prev.count === next.count && prev.promote === next.promote ? prev : next));
-    };
-
-    // Re-measure after every render (tab/label changes) and on container resize.
-    const recomputeRef = useRef(recompute);
-    recomputeRef.current = recompute;
-    useLayoutEffect(() => {
-        recomputeRef.current();
-    });
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container || typeof ResizeObserver === 'undefined') return;
-        const observer = new ResizeObserver(() => recomputeRef.current());
-        observer.observe(container);
-        return () => observer.disconnect();
-    }, []);
-
-    const activeIndex = entries.findIndex(([id]) => id === activeWorkstream);
-    let visible: WorkstreamEntry[];
-    let overflow: WorkstreamEntry[];
-    if (layout.promote && activeIndex >= 0) {
-        // Pull the active tab into the last visible slot; the tab it displaces overflows.
-        const others = entries.filter((_, i) => i !== activeIndex);
-        visible = [...others.slice(0, layout.count), entries[activeIndex]];
-        overflow = others.slice(layout.count);
-    } else {
-        visible = entries.slice(0, layout.count);
-        overflow = entries.slice(layout.count);
-    }
-    const activeInOverflow = overflow.some(([id]) => id === activeWorkstream);
+    const { containerRef, setItemRef, setMoreRef, visible, overflow, activeInOverflow } = useOverflowTabs(
+        entries,
+        ([id]) => id === activeWorkstream,
+    );
     const moreLabel = t('agent.moreTabs');
 
     // Inner tab content (name + count badge + completion icon), shared by the hidden
@@ -280,15 +152,13 @@ function WorkstreamOverflowBar({
                         type="button"
                         key={id}
                         tabIndex={-1}
-                        ref={(el) => {
-                            itemRefs.current[i] = el;
-                        }}
+                        ref={setItemRef(i)}
                         className={cn(TAB_ITEM_BASE, TAB_ITEM_INACTIVE)}
                     >
                         {renderTabInner(id, name, false)}
                     </button>
                 ))}
-                <button type="button" tabIndex={-1} ref={moreRef} className={cn(TAB_ITEM_BASE, TAB_ITEM_INACTIVE)}>
+                <button type="button" tabIndex={-1} ref={setMoreRef} className={cn(TAB_ITEM_BASE, TAB_ITEM_INACTIVE)}>
                     {moreLabel}
                     <ChevronDown className="ms-0.5 size-3.5" />
                 </button>

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

@@ -12,6 +12,7 @@ import {
     getSlidingViewMessageBuckets,
     groupMessagesWithStreaming,
     isInProgress,
+    isStreamingDataVisibleInWorkstream,
     isStreamReplacedByMessage,
     isToolActivityMessage,
     mergeConsecutiveToolGroups,
@@ -1310,6 +1311,43 @@ describe('ModernAgentOutput summary conversation items', () => {
         expect(summaryMessages).toEqual([answer]);
     });
 
+    it('does not duplicate persisted reasoning without streaming metadata across intervening activity', () => {
+        const activity = makeMessage({
+            timestamp: 2500,
+            type: AgentMessageType.THOUGHT,
+            message: 'Launching workstream',
+            details: {
+                tool: 'launch_workstream',
+                tool_status: 'completed',
+                tool_run_id: 'tool-1',
+            },
+        });
+        const reasoning = makeMessage({
+            timestamp: 3000,
+            type: AgentMessageType.THOUGHT,
+            message: 'Launching parallel processing',
+            details: {
+                display_role: 'reasoning',
+            },
+        });
+
+        const summaryMessages = buildSummaryDisplayMessages(
+            [activity, reasoning],
+            new Map([
+                [
+                    'stream-1',
+                    {
+                        text: 'Launching parallel processing',
+                        startTimestamp: 2000,
+                        isComplete: true,
+                    },
+                ],
+            ]),
+        );
+
+        expect(summaryMessages).toEqual([activity, reasoning]);
+    });
+
     it('does not duplicate completed tool preamble streams once persisted prose replaces them', () => {
         const preamble = makeMessage({
             timestamp: 3000,
@@ -1391,6 +1429,33 @@ describe('ModernAgentOutput summary conversation items', () => {
 });
 
 describe('ModernAgentOutput utils - streamed deduplication', () => {
+    it('shows a workstream stream only in its owning workstream', () => {
+        const stream = {
+            text: 'Child work in progress',
+            startTimestamp: 1000,
+            workstreamId: 'research',
+        };
+
+        expect(isStreamingDataVisibleInWorkstream(stream, 'all')).toBe(false);
+        expect(isStreamingDataVisibleInWorkstream(stream, 'main')).toBe(false);
+        expect(isStreamingDataVisibleInWorkstream(stream, 'research')).toBe(true);
+        expect(isStreamingDataVisibleInWorkstream(stream, 'writing')).toBe(false);
+
+        const streams = new Map([['stream-1', stream]]);
+        expect(groupMessagesWithStreaming([], streams, 'all')).toHaveLength(0);
+        expect(groupMessagesWithStreaming([], streams, 'research')).toHaveLength(1);
+    });
+
+    it('keeps main-agent streams in the main conversation', () => {
+        const stream = {
+            text: 'Main response in progress',
+            startTimestamp: 1000,
+        };
+
+        expect(isStreamingDataVisibleInWorkstream(stream, 'all')).toBe(true);
+        expect(isStreamingDataVisibleInWorkstream(stream, 'main')).toBe(true);
+    });
+
     it('skips a stale streaming item once an equivalent streamed answer is persisted', () => {
         const answer = makeMessage({
             timestamp: 2000,
@@ -1498,6 +1563,35 @@ describe('ModernAgentOutput utils - streamed deduplication', () => {
             ),
         ).toBe(false);
     });
+
+    it('replaces matching streamed prose with persisted thinking prose, but not a generic marker', () => {
+        const matchingThinking = makeMessage({
+            timestamp: 2000,
+            type: AgentMessageType.THOUGHT,
+            message: 'Launching parallel processing',
+            details: {
+                activity_id: 'activity-1',
+                display_role: 'thinking',
+            },
+        });
+        const genericMarker = makeMessage({
+            timestamp: 2000,
+            type: AgentMessageType.THOUGHT,
+            message: 'Thinking...',
+            details: {
+                activity_id: 'activity-1',
+                display_role: 'thinking',
+            },
+        });
+        const streaming = {
+            text: 'Launching parallel processing',
+            startTimestamp: 1000,
+            activityId: 'activity-1',
+        };
+
+        expect(isStreamReplacedByMessage(streaming, [matchingThinking])).toBe(true);
+        expect(isStreamReplacedByMessage(streaming, [genericMarker])).toBe(false);
+    });
 });
 
 describe('ModernAgentOutput utils - adjacent rendered deduplication', () => {

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

@@ -1,6 +1,6 @@
 import type { VertesiaClient } from '@vertesia/client';
 import { type AgentMessage, AgentMessageType } from '@vertesia/common';
-import dayjs from 'dayjs';
+import dayjs from '../../../../core/utils/dayjs.js';
 import { getWorkstreamActivityDetails, getWorkstreamLaunchDetails } from '../workstreams.js';
 
 function getAgentChatDebugParam(hash: string): string | null {
@@ -327,6 +327,18 @@ export interface StreamingData {
     streamingId?: string;
 }
 
+/**
+ * Match live stream ownership to the persisted-message timeline filter. The `all` conversation
+ * view is the main-agent timeline (plus workstream lifecycle markers), not a merged transcript of
+ * every child workstream.
+ */
+export function isStreamingDataVisibleInWorkstream(streaming: StreamingData, activeWorkstream?: string): boolean {
+    if (!activeWorkstream) return true;
+
+    const streamWorkstream = streaming.workstreamId || 'main';
+    return activeWorkstream === 'all' ? streamWorkstream === 'main' : activeWorkstream === streamWorkstream;
+}
+
 function normalizeComparableText(text: unknown): string | undefined {
     if (typeof text !== 'string') return undefined;
     const normalized = text.replace(/\r\n/g, '\n').trim();
@@ -353,7 +365,7 @@ export function isStreamReplacedByMessage(streaming: StreamingData, messages: Ag
         if (streaming.streamingId && messageStreamingId) {
             if (messageStreamingId !== streaming.streamingId) return false;
             if (message.details?.display_role === 'thinking') {
-                return false;
+                return getMessageComparableText(message) === streamingText;
             }
             if (isToolCallMessage(message) || message.details?.tool_status) {
                 return false;
@@ -363,7 +375,7 @@ export function isStreamReplacedByMessage(streaming: StreamingData, messages: Ag
 
         if (streaming.activityId && message.details?.activity_id === streaming.activityId) {
             if (message.details?.display_role === 'thinking') {
-                return false;
+                return getMessageComparableText(message) === streamingText;
             }
             if (isToolCallMessage(message) || message.details?.tool_status) {
                 return false;
@@ -380,8 +392,9 @@ export function isStreamReplacedByMessage(streaming: StreamingData, messages: Ag
             return false;
         }
 
-        if (!message.details?.streamed) return false;
-
+        // Exact persisted prose is authoritative even when an older or alternate producer omitted
+        // streaming correlation metadata. This comparison spans the whole timeline so intervening
+        // tool/workstream activity cannot leave the completed preview rendered a second time.
         return getMessageComparableText(message) === streamingText;
     });
 }
@@ -713,11 +726,7 @@ export function groupMessagesWithStreaming(
         if (!data.text) return;
         if (isStreamReplacedByMessage(data, messages)) return;
 
-        // Filter by workstream if specified
-        if (activeWorkstream && activeWorkstream !== 'all') {
-            const streamWorkstream = data.workstreamId || 'main';
-            if (activeWorkstream !== streamWorkstream) return;
-        }
+        if (!isStreamingDataVisibleInWorkstream(data, activeWorkstream)) return;
 
         items.push({
             kind: 'streaming',

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

@@ -4,14 +4,19 @@ 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 { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { VegaEmbed } from 'react-vega';
+import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { View } from 'vega';
 import type { TopLevelSpec as VisualizationSpec } from 'vega-lite';
 import { cn } from '../../../core/components/libs/utils';
 import type { VegaLiteChartSpec } from './AgentChart';
 import { getArtifactCacheKey, getFileCacheKey, isProjectFilePath, useArtifactUrlCache } from './useArtifactUrlCache';
 
+/**
+ * Vega and its Vega-Lite compiler are ~1 MB and are only needed once a chart is actually rendered,
+ * so they are pulled in on demand instead of at module load.
+ */
+const VegaEmbed = lazy(() => import('react-vega').then(({ VegaEmbed: component }) => ({ default: component })));
+
 type VegaLiteChartProps = {
     spec: VegaLiteChartSpec;
     /**
@@ -38,6 +43,15 @@ function VegaErrorDisplay({ error, chartTitle }: { error: string; chartTitle?: s
     );
 }
 
+// Shown while the Vega runtime is being fetched on first chart render
+function VegaLoadingPlaceholder() {
+    return (
+        <output className="flex items-center justify-center w-full h-full">
+            <Loader2 className="w-5 h-5 animate-spin text-gray-500 dark:text-gray-400" />
+        </output>
+    );
+}
+
 // Fullscreen dialog component with smooth animations
 function FullscreenDialog({
     isOpen,
@@ -1122,12 +1136,14 @@ export const VegaLiteChart = memo(
                             className="bg-white dark:bg-gray-900 rounded overflow-hidden"
                             style={{ width: '100%', height: baseHeight, minWidth: 0 }}
                         >
-                            <VegaEmbed
-                                spec={chartSpec}
-                                onEmbed={(result) => handleNewView(result.view)}
-                                onError={handleError}
-                                options={{ renderer: options?.renderer || 'canvas', actions: false }}
-                            />
+                            <Suspense fallback={<VegaLoadingPlaceholder />}>
+                                <VegaEmbed
+                                    spec={chartSpec}
+                                    onEmbed={(result) => handleNewView(result.view)}
+                                    onError={handleError}
+                                    options={{ renderer: options?.renderer || 'canvas', actions: false }}
+                                />
+                            </Suspense>
                         </div>
                     </div>
                 </div>
@@ -1141,12 +1157,14 @@ export const VegaLiteChart = memo(
                 >
                     <div className="w-full h-full min-h-[calc(100vh-200px)]">
                         {fullscreenSpec && (
-                            <VegaEmbed
-                                spec={fullscreenSpec}
-                                onEmbed={(result) => handleFullscreenNewView(result.view)}
-                                onError={handleError}
-                                options={{ renderer: options?.renderer || 'canvas', actions: false }}
-                            />
+                            <Suspense fallback={<VegaLoadingPlaceholder />}>
+                                <VegaEmbed
+                                    spec={fullscreenSpec}
+                                    onEmbed={(result) => handleFullscreenNewView(result.view)}
+                                    onError={handleError}
+                                    options={{ renderer: options?.renderer || 'canvas', actions: false }}
+                                />
+                            </Suspense>
                         )}
                     </div>
                     {/* Floating toolbar in fullscreen */}

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

@@ -43,6 +43,24 @@ describe('useAgentStream', () => {
         vi.clearAllMocks();
     });
 
+    it('keeps the stream subscribed while an interactive conversation is idle', async () => {
+        const streamMessages = vi.fn<
+            (
+                id: string,
+                onMessage?: (message: AgentMessage, exitFn?: (payload: unknown) => void) => void,
+                since?: number,
+                signal?: AbortSignal,
+                options?: AgentRunStreamMessagesOptions,
+            ) => Promise<unknown>
+        >(() => new Promise(() => {}));
+        const client = createClient(streamMessages);
+
+        renderHook(() => useAgentStream(client, 'agent-run-1'));
+
+        await waitFor(() => expect(streamMessages).toHaveBeenCalled());
+        expect(streamMessages.mock.calls[0][4]).toMatchObject({ closeOnIdle: false });
+    });
+
     it('marks initial history as empty when the history fetch returns no messages', async () => {
         const streamMessages = vi.fn<
             (

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

@@ -473,6 +473,9 @@ export function useAgentStream(
                 since,
                 abortController.signal,
                 {
+                    // Interactive conversations remain RUNNING at IDLE and must keep the
+                    // subscription open so follow-up turns arrive on the same stream.
+                    closeOnIdle: false,
                     onHistoryLoaded: (historical) => {
                         if (abortController.signal.aborted) return;
                         const timelineMessages = historical.filter(shouldStoreTimelineMessage);

package/src/features/document-viewer/UniversalDocumentViewer.tsx

@@ -486,7 +486,7 @@ export function UniversalDocumentViewer({
     loadText,
     createRendition,
     markdownComponents,
-    showHeader = true,
+    showHeader = false,
     onDownload,
 }: UniversalDocumentViewerProps) {
     const { client } = useUserSession();

package/src/features/facets/AgentRunnerFacetsNav.tsx

@@ -10,19 +10,48 @@ import {
 } from '@vertesia/ui/core';
 import { RefreshCw } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { filterValueToQueryValue, type SearchInterface, setSearchQueryValue } from './utils/SearchInterface';
+import {
+    createSearchQueryKeyGuard,
+    filterValueToQueryValue,
+    type SearchInterface,
+    setSearchQueryValue,
+} from './utils/SearchInterface';
 import type { EnrichedFacetBucket } from './utils/VInteractionFacet';
 import { VInteractionFacet } from './utils/VInteractionFacet';
 import { VStringFacet } from './utils/VStringFacet';
 import { VUserFacet } from './utils/VUserFacet';
 
+export interface AgentRunnerFilterQuery {
+    object?: string;
+    id?: string;
+    run_kind?: string;
+    interaction?: string;
+    status?: string;
+    initiated_by?: string;
+    start?: string;
+    end?: string;
+}
+
+const agentRunnerFilterNames = [
+    'id',
+    'run_kind',
+    'interaction',
+    'status',
+    'initiated_by',
+    'start',
+    'end',
+] as const satisfies readonly (keyof AgentRunnerFilterQuery)[];
+const isAgentRunnerFilterName = createSearchQueryKeyGuard<AgentRunnerFilterQuery>(agentRunnerFilterNames);
+
 interface AgentRunnerFacetsNavProps {
     facets: {
         statuses?: FacetBucket[];
         initiated_by?: FacetBucket[];
         interactions?: EnrichedFacetBucket[];
+        /** `run_kind` buckets — `agent` (autonomous runs) and `process` (process runs). */
+        kinds?: FacetBucket[];
     };
-    search: SearchInterface;
+    search: SearchInterface<AgentRunnerFilterQuery>;
     actions?: React.ReactNode[];
     selectionCount?: number;
     /**
@@ -47,6 +76,14 @@ export function useAgentRunnerFilterGroups(facets: AgentRunnerFacetsNavProps['fa
         multiple: false,
     });
 
+    customFilterGroups.push(
+        VStringFacet({
+            buckets: facets.kinds || [],
+            name: 'run_kind',
+            placeholder: 'Kind',
+        }),
+    );
+
     customFilterGroups.push(
         VInteractionFacet({
             buckets: facets.interactions || [],
@@ -89,13 +126,16 @@ export function useAgentRunnerFilterGroups(facets: AgentRunnerFacetsNavProps['fa
 }
 
 // Create filter change handler for agent runners
-export function createAgentRunnerFilterHandler(search: SearchInterface) {
+export function createAgentRunnerFilterHandler(search: SearchInterface<AgentRunnerFilterQuery>) {
     return (newFilters: BaseFilter[]) => {
         // Clear all filters first, then apply new ones
         search.clearFilters(false, false);
 
         newFilters.forEach((filter) => {
             if (filter.value && filter.value.length > 0) {
+                if (!isAgentRunnerFilterName(filter.name)) {
+                    return;
+                }
                 const filterName = filter.name;
                 const filterValue = filterValueToQueryValue(filter);
                 setSearchQueryValue(search, filterName, filterValue);
@@ -154,7 +194,7 @@ export function AgentRunnerFacetsNav({
                         {!selectionCount && (
                             <div className="flex items-center justify-between px-2 py-1">
                                 <div className="text-sm text-muted-foreground">
-                                    {search.initialized ? `${search.totalCount} agent runs` : 'Loading agent runs...'}
+                                    {search.initialized ? `${search.totalCount} runs` : 'Loading runs...'}
                                 </div>
                             </div>
                         )}