feat: add onQueryChange prop and serverFiltered flag to CommandPalette

Enables server-side exchange search from the command palette. Server-filtered
results skip client-side text matching since they matched on content not
visible in title/meta.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/design-system/composites/CommandPalette/CommandPalette.tsx

@@ -12,6 +12,7 @@ interface CommandPaletteProps {
   onSelect: (result: SearchResult) => void
   data: SearchResult[]
   onOpen?: () => void
+  onQueryChange?: (query: string) => void
 }
 
 const CATEGORY_LABELS: Record<SearchCategory | 'all', string> = {
@@ -60,7 +61,7 @@ function highlightText(text: string, query: string, matchRanges?: [number, numbe
   return <>{parts}</>
 }
 
-export function CommandPalette({ open, onClose, onSelect, data, onOpen }: CommandPaletteProps) {
+export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryChange }: CommandPaletteProps) {
   const [query, setQuery] = useState('')
   const [activeCategory, setActiveCategory] = useState<SearchCategory | 'all'>('all')
   const [scopeFilters, setScopeFilters] = useState<ScopeFilter[]>([])
@@ -102,7 +103,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen }: Comman
     if (query.trim()) {
       const q = query.toLowerCase()
       results = results.filter(
-        (r) => r.title.toLowerCase().includes(q) || r.meta.toLowerCase().includes(q),
+        (r) => r.serverFiltered || r.title.toLowerCase().includes(q) || r.meta.toLowerCase().includes(q),
       )
     }
 
@@ -208,6 +209,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen }: Comman
             onChange={(e) => {
               setQuery(e.target.value)
               setFocusedIdx(0)
+              onQueryChange?.(e.target.value)
             }}
             aria-label="Search"
           />

src/design-system/composites/CommandPalette/types.ts

@@ -13,6 +13,8 @@ export interface SearchResult {
   path?: string
   expandedContent?: string
   matchRanges?: [number, number][]
+  /** Skip client-side query filtering (result already matched server-side) */
+  serverFiltered?: boolean
 }
 
 export interface ScopeFilter {

src/design-system/composites/ProcessorTimeline/ProcessorTimeline.module.css

@@ -129,6 +129,25 @@
   color: var(--text-primary);
 }
 
+/* Badges */
+.badge {
+  font-family: var(--font-mono);
+  font-size: 7px;
+  font-weight: 600;
+  color: #fff;
+  border-radius: 6px;
+  padding: 0 4px;
+  text-transform: uppercase;
+  white-space: nowrap;
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+.badgeInfo    { background: var(--running); }
+.badgeSuccess { background: var(--success); }
+.badgeWarning { background: var(--amber); }
+.badgeError   { background: var(--error); }
+
 .empty {
   color: var(--text-muted);
   font-size: 12px;

src/design-system/composites/ProcessorTimeline/ProcessorTimeline.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import styles from './ProcessorTimeline.module.css'
 import { Dropdown } from '../Dropdown/Dropdown'
+import type { NodeBadge } from '../RouteFlow/RouteFlow'
 
 export interface ProcessorStep {
   name: string
@@ -8,6 +9,7 @@ export interface ProcessorStep {
   durationMs: number
   status: 'ok' | 'slow' | 'fail'
   startMs: number
+  badges?: NodeBadge[]
 }
 
 export interface ProcessorAction {
@@ -84,6 +86,16 @@ export function ProcessorTimeline({
           >
             <div className={styles.name} title={proc.name}>
               {proc.name}
+              {proc.badges?.map((badge, bi) => (
+                <span
+                  key={bi}
+                  className={`${styles.badge} ${styles[`badge${(badge.variant ?? 'info').charAt(0).toUpperCase()}${(badge.variant ?? 'info').slice(1)}`] ?? styles.badgeInfo}`}
+                  onClick={badge.onClick ? (e) => { e.stopPropagation(); badge.onClick!() } : undefined}
+                  style={badge.onClick ? { cursor: 'pointer' } : undefined}
+                >
+                  {badge.label}
+                </span>
+              ))}
             </div>
             <div className={styles.barBg}>
               <div

src/design-system/composites/RouteFlow/RouteFlow.module.css

@@ -222,17 +222,29 @@
   color: var(--text-primary);
 }
 
-/* Bottleneck badge */
+/* Badges */
-.bottleneckBadge {
+.badgeRow {
   position: absolute;
   top: -7px;
   right: 8px;
+  display: flex;
+  gap: 3px;
+  pointer-events: auto;
+}
+
+.badge {
   font-family: var(--font-mono);
   font-size: 8px;
   font-weight: 600;
-  padding: 1px 6px;
-  border-radius: 8px;
-  background: var(--error);
   color: #fff;
+  border-radius: 8px;
+  padding: 1px 6px;
+  text-transform: uppercase;
+  white-space: nowrap;
   letter-spacing: 0.3px;
 }
+
+.badgeInfo    { background: var(--running); }
+.badgeSuccess { background: var(--success); }
+.badgeWarning { background: var(--amber); }
+.badgeError   { background: var(--error); }

src/design-system/composites/RouteFlow/RouteFlow.tsx

@@ -2,12 +2,19 @@ import type { ReactNode } from 'react'
 import styles from './RouteFlow.module.css'
 import { Dropdown } from '../Dropdown/Dropdown'
 
+export interface NodeBadge {
+  label: string
+  variant?: 'info' | 'success' | 'warning' | 'error'
+  onClick?: () => void
+}
+
 export interface RouteNode {
   name: string
   type: 'from' | 'process' | 'to' | 'choice' | 'error-handler'
   durationMs: number
   status: 'ok' | 'slow' | 'fail'
   isBottleneck?: boolean
+  badges?: NodeBadge[]
 }
 
 export interface NodeAction {
@@ -132,7 +139,21 @@ export function RouteFlow({ nodes, onNodeClick, selectedIndex, actions, getActio
                 }
               }}
             >
-              {node.isBottleneck && <span className={styles.bottleneckBadge}>BOTTLENECK</span>}
+              {(node.isBottleneck || node.badges?.length) ? (
+                <span className={styles.badgeRow}>
+                  {node.isBottleneck && <span className={`${styles.badge} ${styles.badgeError}`}>BOTTLENECK</span>}
+                  {node.badges?.map((badge, bi) => (
+                    <span
+                      key={bi}
+                      className={`${styles.badge} ${styles[`badge${(badge.variant ?? 'info').charAt(0).toUpperCase()}${(badge.variant ?? 'info').slice(1)}`] ?? styles.badgeInfo}`}
+                      onClick={badge.onClick ? (e) => { e.stopPropagation(); badge.onClick!() } : undefined}
+                      style={badge.onClick ? { cursor: 'pointer' } : undefined}
+                    >
+                      {badge.label}
+                    </span>
+                  ))}
+                </span>
+              ) : null}
               <div className={`${styles.icon} ${ICON_CLASSES[node.type] ?? styles.iconTo}`}>
                 {TYPE_ICONS[node.type] ?? '\u25A2'}
               </div>

src/design-system/composites/index.ts

@@ -34,7 +34,7 @@ export { Popover } from './Popover/Popover'
 export { ProcessorTimeline } from './ProcessorTimeline/ProcessorTimeline'
 export type { ProcessorStep, ProcessorAction } from './ProcessorTimeline/ProcessorTimeline'
 export { RouteFlow } from './RouteFlow/RouteFlow'
-export type { RouteNode, NodeAction } from './RouteFlow/RouteFlow'
+export type { RouteNode, NodeAction, NodeBadge } from './RouteFlow/RouteFlow'
 export { ShortcutsBar } from './ShortcutsBar/ShortcutsBar'
 export { SegmentedTabs } from './SegmentedTabs/SegmentedTabs'
 export { SplitPane } from './SplitPane/SplitPane'