diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css index 98041c8d..20e036ad 100644 --- a/ui/src/pages/AgentHealth/AgentHealth.module.css +++ b/ui/src/pages/AgentHealth/AgentHealth.module.css @@ -383,20 +383,27 @@ margin-bottom: 12px; } -/* App name filter */ +/* App name filter — matches sidebar search input styling */ .appFilterWrap { position: relative; display: flex; align-items: center; } +.appFilterIcon { + position: absolute; + left: 8px; + color: var(--text-muted); + pointer-events: none; +} + .appFilterInput { width: 180px; - height: 28px; - padding: 0 24px 0 8px; - border: 1px solid var(--border-subtle); + height: 29px; + padding: 6px 26px 6px 28px; + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); - background: transparent; + background: rgba(255, 255, 255, 0.06); color: var(--text-primary); font-size: 12px; font-family: var(--font-body); @@ -414,7 +421,7 @@ .appFilterClear { position: absolute; - right: 4px; + right: 6px; background: transparent; border: none; color: var(--text-muted); diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx index 103c6fb5..d84ce777 100644 --- a/ui/src/pages/AgentHealth/AgentHealth.tsx +++ b/ui/src/pages/AgentHealth/AgentHealth.tsx @@ -1,6 +1,6 @@ import { useState, useMemo, useCallback, useRef, useEffect } from 'react'; import { useParams, useNavigate } from 'react-router'; -import { ExternalLink, RefreshCw, Pencil, LayoutGrid, List, ChevronRight, ChevronDown, ArrowUp, ArrowDown } from 'lucide-react'; +import { ExternalLink, RefreshCw, Pencil, LayoutGrid, List, ChevronRight, ChevronDown, ArrowUp, ArrowDown, Search } from 'lucide-react'; import { StatCard, StatusDot, Badge, MonoText, GroupCard, DataTable, EventFeed, @@ -708,10 +708,11 @@ export default function AgentHealth() {