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 (
(