diff --git a/ui/src/components/command-palette/CommandPalette.module.css b/ui/src/components/command-palette/CommandPalette.module.css index 4a20e0d8..12cdf6dd 100644 --- a/ui/src/components/command-palette/CommandPalette.module.css +++ b/ui/src/components/command-palette/CommandPalette.module.css @@ -279,6 +279,12 @@ color: var(--rose); } +.iconRoute { + composes: resultIcon; + background: rgba(168, 85, 247, 0.12); + color: var(--purple); +} + /* ── Result Body ── */ .resultBody { flex: 1; diff --git a/ui/src/components/command-palette/ResultItem.tsx b/ui/src/components/command-palette/ResultItem.tsx index 94244321..b8b5c14d 100644 --- a/ui/src/components/command-palette/ResultItem.tsx +++ b/ui/src/components/command-palette/ResultItem.tsx @@ -1,5 +1,5 @@ import type { ExecutionSummary, AgentInstance } from '../../api/schema'; -import type { PaletteResult } from './use-palette-search'; +import type { PaletteResult, RouteInfo } from './use-palette-search'; import { highlightMatch, formatRelativeTime } from './utils'; import styles from './CommandPalette.module.css'; @@ -80,7 +80,7 @@ function ExecutionResult({ data, query }: { data: ExecutionSummary; query: strin ); } -function AgentResult({ data, query }: { data: AgentInstance; query: string }) { +function ApplicationResult({ data, query }: { data: AgentInstance; query: string }) { return ( <>
@@ -101,7 +101,34 @@ function AgentResult({ data, query }: { data: AgentInstance; query: string }) {
- Agent + Application +
+ + ); +} + +function RouteResult({ data, query }: { data: RouteInfo; query: string }) { + return ( + <> +
+ + + + + +
+
+
+ +
+
+ {data.agentIds.length} {data.agentIds.length === 1 ? 'application' : 'applications'} + + {data.agentIds.join(', ')} +
+
+
+ Route
); @@ -117,8 +144,11 @@ export function ResultItem({ result, selected, query, onClick }: ResultItemProps {result.type === 'execution' && ( )} - {result.type === 'agent' && ( - + {result.type === 'application' && ( + + )} + {result.type === 'route' && ( + )} ); diff --git a/ui/src/components/command-palette/ResultsList.tsx b/ui/src/components/command-palette/ResultsList.tsx index 90db6fce..712061e7 100644 --- a/ui/src/components/command-palette/ResultsList.tsx +++ b/ui/src/components/command-palette/ResultsList.tsx @@ -11,34 +11,14 @@ interface ResultsListProps { } export function ResultsList({ results, isLoading, onSelect }: ResultsListProps) { - const { selectedIndex, query, scope } = useCommandPalette(); + const { selectedIndex, query } = useCommandPalette(); const listRef = useRef(null); useEffect(() => { - const el = listRef.current?.querySelector('[data-palette-item].selected, [data-palette-item]:nth-child(' + (selectedIndex + 1) + ')'); - if (!el) return; const items = listRef.current?.querySelectorAll('[data-palette-item]'); items?.[selectedIndex]?.scrollIntoView({ block: 'nearest' }); }, [selectedIndex]); - if (scope === 'routes' || scope === 'exchanges') { - const label = scope === 'routes' ? 'Route' : 'Exchange'; - return ( -
-
- - - - - {label} search coming soon - - This feature is planned for a future release - -
-
- ); - } - if (isLoading && results.length === 0) { return (
@@ -70,7 +50,8 @@ export function ResultsList({ results, isLoading, onSelect }: ResultsListProps) // Group results by type const executions = results.filter((r) => r.type === 'execution'); - const agents = results.filter((r) => r.type === 'agent'); + const applications = results.filter((r) => r.type === 'application'); + const routes = results.filter((r) => r.type === 'route'); let globalIndex = 0; @@ -93,10 +74,27 @@ export function ResultsList({ results, isLoading, onSelect }: ResultsListProps) })} )} - {agents.length > 0 && ( + {applications.length > 0 && ( <> -
Agents
- {agents.map((r) => { +
Applications
+ {applications.map((r) => { + const idx = globalIndex++; + return ( + onSelect(r)} + /> + ); + })} + + )} + {routes.length > 0 && ( + <> +
Routes
+ {routes.map((r) => { const idx = globalIndex++; return ( (