From 484c5887c35eab5251e2b9e36edbff32fcba7d4c Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 14 Mar 2026 12:08:14 +0100
Subject: [PATCH] Use consistent AppBadge colors in command palette search
 results

Replace hardcoded purple badge and plain text with AppBadge component
so agent names show the same deterministic color across the UI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/components/command-palette/ResultItem.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/command-palette/ResultItem.tsx b/ui/src/components/command-palette/ResultItem.tsx
index b8b5c14d..27c92447 100644
--- a/ui/src/components/command-palette/ResultItem.tsx
+++ b/ui/src/components/command-palette/ResultItem.tsx
@@ -1,6 +1,7 @@
 import type { ExecutionSummary, AgentInstance } from '../../api/schema';
 import type { PaletteResult, RouteInfo } from './use-palette-search';
 import { highlightMatch, formatRelativeTime } from './utils';
+import { AppBadge } from '../shared/AppBadge';
 import styles from './CommandPalette.module.css';
 
 interface ResultItemProps {
@@ -59,7 +60,7 @@ function ExecutionResult({ data, query }: { data: ExecutionSummary; query: strin
           <span className={styles.badgeDuration}>{data.durationMs}ms</span>
         </div>
         <div className={styles.resultMeta}>
-          <span className={styles.badgeRoute}>{data.agentId}</span>
+          <AppBadge name={data.agentId} />
           <span className={styles.sep} />
           <HighlightedText text={data.executionId.slice(0, 16)} query={query} />
           {data.errorMessage && (
@@ -124,7 +125,7 @@ function RouteResult({ data, query }: { data: RouteInfo; query: string }) {
         <div className={styles.resultMeta}>
           <span>{data.agentIds.length} {data.agentIds.length === 1 ? 'application' : 'applications'}</span>
           <span className={styles.sep} />
-          <span>{data.agentIds.join(', ')}</span>
+          {data.agentIds.map((id) => <AppBadge key={id} name={id} />)}
         </div>
       </div>
       <div className={styles.resultRight}>