(null);
+
+ useEffect(() => {
+ inputRef.current?.focus();
+ }, []);
+
+ function handleChange(value: string) {
+ // Check if user typed a filter prefix like "status:failed "
+ const parsed = parseFilterPrefix(value);
+ if (parsed) {
+ addFilter(parsed.filter);
+ setQuery(parsed.remaining);
+ return;
+ }
+ const trailing = checkTrailingFilter(value);
+ if (trailing) {
+ addFilter(trailing);
+ setQuery('');
+ return;
+ }
+ setQuery(value);
+ }
+
+ function handleKeyDown(e: React.KeyboardEvent) {
+ if (e.key === 'Backspace' && query === '' && filters.length > 0) {
+ e.preventDefault();
+ removeLastFilter();
+ }
+ }
+
+ return (
+
+
+ {filters.length > 0 && (
+
+ {filters.map((f, i) => (
+
+ {f.key}:
+ {f.value}
+
+
+ ))}
+
+ )}
+
handleChange(e.target.value)}
+ onKeyDown={handleKeyDown}
+ placeholder={filters.length > 0 ? 'Refine search...' : 'Search executions, agents...'}
+ />
+
+ esc close
+
+
+
+
+ {data.status}
+ {data.durationMs}ms
+
+
+ {data.agentId}
+
+
+ {data.errorMessage && (
+ <>
+
+
+ {data.errorMessage.slice(0, 60)}
+ {data.errorMessage.length > 60 ? '...' : ''}
+
+
+ )}
+
+
+ {formatRelativeTime(data.startTime)}
+
+
+ );
+}
+
+function AgentResult({ data, query }: { data: AgentInstance; query: string }) {
+ return (
+ <>
+
+
+
+
+ {data.state}
+
+
+ group: {data.group}
+
+ last heartbeat: {formatRelativeTime(data.lastHeartbeat)}
+
+
+ Agent
+
+
+ );
+}
+
+export function ResultItem({ result, selected, query, onClick }: ResultItemProps) {
+ return (
+
+ {result.type === 'execution' && (
+
+ )}
+ {result.type === 'agent' && (
+
+ )}
+
+
+
+
No results found
+
+ Try a different search or use filters like status:failed
+
+
+
+ {executions.length > 0 && (
+ <>
+
Executions
+ {executions.map((r) => {
+ const idx = globalIndex++;
+ return (
+
onSelect(r)}
+ />
+ );
+ })}
+
+ )}
+ {agents.length > 0 && (
+ <>
+ Agents
+ {agents.map((r) => {
+ const idx = globalIndex++;
+ return (
+ onSelect(r)}
+ />
+ );
+ })}
+
+ )}
+
+ {SCOPES.map((s) => (
+
+ ))}
+
+ );
+}
diff --git a/ui/src/components/command-palette/use-command-palette.ts b/ui/src/components/command-palette/use-command-palette.ts
new file mode 100644
index 00000000..71b396bb
--- /dev/null
+++ b/ui/src/components/command-palette/use-command-palette.ts
@@ -0,0 +1,57 @@
+import { create } from 'zustand';
+
+export type PaletteScope = 'all' | 'executions' | 'agents';
+
+export interface PaletteFilter {
+ key: 'status' | 'route' | 'agent' | 'processor';
+ value: string;
+}
+
+interface CommandPaletteState {
+ isOpen: boolean;
+ query: string;
+ scope: PaletteScope;
+ filters: PaletteFilter[];
+ selectedIndex: number;
+
+ open: () => void;
+ close: () => void;
+ setQuery: (q: string) => void;
+ setScope: (s: PaletteScope) => void;
+ addFilter: (f: PaletteFilter) => void;
+ removeLastFilter: () => void;
+ removeFilter: (index: number) => void;
+ setSelectedIndex: (i: number) => void;
+ reset: () => void;
+}
+
+export const useCommandPalette = create((set) => ({
+ isOpen: false,
+ query: '',
+ scope: 'all',
+ filters: [],
+ selectedIndex: 0,
+
+ open: () => set({ isOpen: true }),
+ close: () => set({ isOpen: false, selectedIndex: 0 }),
+ setQuery: (q) => set({ query: q, selectedIndex: 0 }),
+ setScope: (s) => set({ scope: s, selectedIndex: 0 }),
+ addFilter: (f) =>
+ set((state) => ({
+ filters: [...state.filters.filter((x) => x.key !== f.key), f],
+ query: '',
+ selectedIndex: 0,
+ })),
+ removeLastFilter: () =>
+ set((state) => ({
+ filters: state.filters.slice(0, -1),
+ selectedIndex: 0,
+ })),
+ removeFilter: (index) =>
+ set((state) => ({
+ filters: state.filters.filter((_, i) => i !== index),
+ selectedIndex: 0,
+ })),
+ setSelectedIndex: (i) => set({ selectedIndex: i }),
+ reset: () => set({ query: '', scope: 'all', filters: [], selectedIndex: 0 }),
+}));
diff --git a/ui/src/components/command-palette/use-palette-search.ts b/ui/src/components/command-palette/use-palette-search.ts
new file mode 100644
index 00000000..286f228c
--- /dev/null
+++ b/ui/src/components/command-palette/use-palette-search.ts
@@ -0,0 +1,93 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../../api/client';
+import type { ExecutionSummary, AgentInstance } from '../../api/schema';
+import { useCommandPalette, type PaletteScope } from './use-command-palette';
+import { useDebouncedValue } from './utils';
+
+export interface PaletteResult {
+ type: 'execution' | 'agent';
+ id: string;
+ data: ExecutionSummary | AgentInstance;
+}
+
+function isExecutionScope(scope: PaletteScope) {
+ return scope === 'all' || scope === 'executions';
+}
+
+function isAgentScope(scope: PaletteScope) {
+ return scope === 'all' || scope === 'agents';
+}
+
+export function usePaletteSearch() {
+ const { query, scope, filters, isOpen } = useCommandPalette();
+ const debouncedQuery = useDebouncedValue(query, 300);
+
+ const statusFilter = filters.find((f) => f.key === 'status')?.value;
+ const routeFilter = filters.find((f) => f.key === 'route')?.value;
+ const agentFilter = filters.find((f) => f.key === 'agent')?.value;
+ const processorFilter = filters.find((f) => f.key === 'processor')?.value;
+
+ const executionsQuery = useQuery({
+ queryKey: ['palette', 'executions', debouncedQuery, statusFilter, routeFilter, agentFilter, processorFilter],
+ queryFn: async () => {
+ const { data, error } = await api.POST('/search/executions', {
+ body: {
+ text: debouncedQuery || undefined,
+ status: statusFilter || undefined,
+ routeId: routeFilter || undefined,
+ agentId: agentFilter || undefined,
+ processorType: processorFilter || undefined,
+ limit: 10,
+ offset: 0,
+ },
+ });
+ if (error) throw new Error('Search failed');
+ return data!;
+ },
+ enabled: isOpen && isExecutionScope(scope),
+ placeholderData: (prev) => prev,
+ });
+
+ const agentsQuery = useQuery({
+ queryKey: ['agents'],
+ queryFn: async () => {
+ const { data, error } = await api.GET('/agents', {
+ params: { query: {} },
+ });
+ if (error) throw new Error('Failed to load agents');
+ return data!;
+ },
+ enabled: isOpen && isAgentScope(scope),
+ staleTime: 30_000,
+ });
+
+ const executionResults: PaletteResult[] = (executionsQuery.data?.data ?? []).map((e) => ({
+ type: 'execution' as const,
+ id: e.executionId,
+ data: e,
+ }));
+
+ const filteredAgents = (agentsQuery.data ?? []).filter((a) => {
+ if (!debouncedQuery) return true;
+ const q = debouncedQuery.toLowerCase();
+ return a.agentId.toLowerCase().includes(q) || a.group.toLowerCase().includes(q);
+ });
+
+ const agentResults: PaletteResult[] = filteredAgents.slice(0, 10).map((a) => ({
+ type: 'agent' as const,
+ id: a.agentId,
+ data: a,
+ }));
+
+ let results: PaletteResult[] = [];
+ if (scope === 'all') results = [...executionResults, ...agentResults];
+ else if (scope === 'executions') results = executionResults;
+ else if (scope === 'agents') results = agentResults;
+
+ return {
+ results,
+ executionCount: executionsQuery.data?.total ?? 0,
+ agentCount: filteredAgents.length,
+ isLoading: executionsQuery.isFetching || agentsQuery.isFetching,
+ };
+}
diff --git a/ui/src/components/command-palette/utils.ts b/ui/src/components/command-palette/utils.ts
new file mode 100644
index 00000000..1b9eb3cf
--- /dev/null
+++ b/ui/src/components/command-palette/utils.ts
@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+import type { PaletteFilter } from './use-command-palette';
+
+const FILTER_PREFIXES = ['status:', 'route:', 'agent:', 'processor:'] as const;
+
+type FilterKey = PaletteFilter['key'];
+
+const PREFIX_TO_KEY: Record = {
+ 'status:': 'status',
+ 'route:': 'route',
+ 'agent:': 'agent',
+ 'processor:': 'processor',
+};
+
+export function parseFilterPrefix(
+ input: string,
+): { filter: PaletteFilter; remaining: string } | null {
+ for (const prefix of FILTER_PREFIXES) {
+ if (input.startsWith(prefix)) {
+ const value = input.slice(prefix.length).trim();
+ if (value && value.includes(' ')) {
+ const spaceIdx = value.indexOf(' ');
+ return {
+ filter: { key: PREFIX_TO_KEY[prefix], value: value.slice(0, spaceIdx) },
+ remaining: value.slice(spaceIdx + 1).trim(),
+ };
+ }
+ }
+ }
+ return null;
+}
+
+export function checkTrailingFilter(input: string): PaletteFilter | null {
+ for (const prefix of FILTER_PREFIXES) {
+ if (input.endsWith(' ') && input.trimEnd().length > prefix.length) {
+ const trimmed = input.trimEnd();
+ for (const p of FILTER_PREFIXES) {
+ const idx = trimmed.lastIndexOf(p);
+ if (idx !== -1 && idx === trimmed.length - p.length - (trimmed.length - trimmed.lastIndexOf(p) - p.length)) {
+ // This is getting complex, let's use a simpler approach
+ }
+ }
+ }
+ }
+ // Simple approach: check if last word matches prefix:value pattern
+ const words = input.trimEnd().split(/\s+/);
+ const lastWord = words[words.length - 1];
+ for (const prefix of FILTER_PREFIXES) {
+ if (lastWord.startsWith(prefix) && lastWord.length > prefix.length && input.endsWith(' ')) {
+ return {
+ key: PREFIX_TO_KEY[prefix],
+ value: lastWord.slice(prefix.length),
+ };
+ }
+ }
+ return null;
+}
+
+export function highlightMatch(text: string, query: string): (string | { highlight: string })[] {
+ if (!query) return [text];
+ const lower = text.toLowerCase();
+ const qLower = query.toLowerCase();
+ const idx = lower.indexOf(qLower);
+ if (idx === -1) return [text];
+ return [
+ text.slice(0, idx),
+ { highlight: text.slice(idx, idx + query.length) },
+ text.slice(idx + query.length),
+ ].filter((s) => (typeof s === 'string' ? s.length > 0 : true));
+}
+
+export function useDebouncedValue(value: T, delay: number): T {
+ const [debounced, setDebounced] = useState(value);
+ useEffect(() => {
+ const timer = setTimeout(() => setDebounced(value), delay);
+ return () => clearTimeout(timer);
+ }, [value, delay]);
+ return debounced;
+}
+
+export function formatRelativeTime(iso: string): string {
+ const diff = Date.now() - new Date(iso).getTime();
+ const seconds = Math.floor(diff / 1000);
+ if (seconds < 60) return `${seconds}s ago`;
+ const minutes = Math.floor(seconds / 60);
+ if (minutes < 60) return `${minutes}m ago`;
+ const hours = Math.floor(minutes / 60);
+ if (hours < 24) return `${hours}h ago`;
+ const days = Math.floor(hours / 24);
+ return `${days}d ago`;
+}
diff --git a/ui/src/components/layout/AppShell.tsx b/ui/src/components/layout/AppShell.tsx
index 7fdd9514..2847c9d8 100644
--- a/ui/src/components/layout/AppShell.tsx
+++ b/ui/src/components/layout/AppShell.tsx
@@ -1,5 +1,6 @@
import { Outlet } from 'react-router';
import { TopNav } from './TopNav';
+import { CommandPalette } from '../command-palette/CommandPalette';
import styles from './AppShell.module.css';
export function AppShell() {
@@ -9,6 +10,7 @@ export function AppShell() {
+
);
}
diff --git a/ui/src/components/layout/TopNav.module.css b/ui/src/components/layout/TopNav.module.css
index cac7dd1f..2503b35b 100644
--- a/ui/src/components/layout/TopNav.module.css
+++ b/ui/src/components/layout/TopNav.module.css
@@ -61,6 +61,43 @@
gap: 16px;
}
+.searchTrigger {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 5px 12px 5px 10px;
+ background: var(--bg-raised);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ color: var(--text-muted);
+ font-size: 13px;
+ font-family: var(--font-body);
+ cursor: pointer;
+ transition: border-color 0.15s, color 0.15s;
+}
+
+.searchTrigger:hover {
+ border-color: var(--text-muted);
+ color: var(--text-secondary);
+}
+
+.searchTrigger svg {
+ width: 14px;
+ height: 14px;
+ opacity: 0.5;
+}
+
+.kbdKey {
+ font-family: var(--font-mono);
+ font-size: 11px;
+ padding: 1px 5px;
+ background: var(--bg-hover);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ color: var(--text-muted);
+ line-height: 1.4;
+}
+
.envBadge {
font-family: var(--font-mono);
font-size: 11px;
diff --git a/ui/src/components/layout/TopNav.tsx b/ui/src/components/layout/TopNav.tsx
index 89e9c84b..c2659799 100644
--- a/ui/src/components/layout/TopNav.tsx
+++ b/ui/src/components/layout/TopNav.tsx
@@ -1,11 +1,13 @@
import { NavLink } from 'react-router';
import { useThemeStore } from '../../theme/theme-store';
import { useAuthStore } from '../../auth/auth-store';
+import { useCommandPalette } from '../command-palette/use-command-palette';
import styles from './TopNav.module.css';
export function TopNav() {
const { theme, toggle } = useThemeStore();
const { username, logout } = useAuthStore();
+ const openPalette = useCommandPalette((s) => s.open);
return (