feat: implement Phase 6 - Search and Filtering

Features added:
- Advanced search and filtering for processes
- Real-time search by name, group, or description
- Filter by process state (All, Running, Stopped, Fatal, Starting, Stopping)
- Filter by process group
- Collapsible filter panel
- Clear all filters button
- Filter count indicator

Implementation details:
- Created ProcessFilters component with:
  - Search input with clear button and search icon
  - State filter buttons with color indicators
  - Group filter buttons (auto-generated from available groups)
  - Toggle filters panel button
  - Active filters detection and clear button

Processes page enhancements:
- Integrated ProcessFilters component
- Real-time filtering with useEffect
- Display count shows "X of Y processes (filtered)"
- Select All works on filtered results
- Empty state when no matches: "No processes match the current filters"
- Filters apply to both flat and grouped views

Filter features:
- Search: Live filtering as you type (name, group, description)
- State filter: 6 filter options with colored dots
- Group filter: Dynamic buttons for each unique group
- Clear filters: Single button to reset all filters
- Collapsible panel: Show/hide filters to save space
- Active filter indicator: Clear button appears when filters active

UX improvements:
- Search input with X button to clear
- Filter button toggles panel (highlighted when active)
- Color-coded state buttons matching process states
- Responsive layout with flex-wrap for many groups
- Maintains selection state across filter changes

Phase 6 complete (2-3 hours estimated)

app/processes/page.tsx

@@ -1,19 +1,26 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { useProcesses } from '@/lib/hooks/useSupervisor';
 import { ProcessCard } from '@/components/process/ProcessCard';
 import { GroupView } from '@/components/groups/GroupView';
 import { GroupSelector } from '@/components/groups/GroupSelector';
 import { BatchActions } from '@/components/process/BatchActions';
+import { ProcessFilters } from '@/components/process/ProcessFilters';
 import { RefreshCw, AlertCircle, CheckSquare } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import type { ProcessInfo } from '@/lib/supervisor/types';
 
 export default function ProcessesPage() {
   const [viewMode, setViewMode] = useState<'flat' | 'grouped'>('flat');
   const [selectedProcesses, setSelectedProcesses] = useState<Set<string>>(new Set());
+  const [filteredProcesses, setFilteredProcesses] = useState<ProcessInfo[]>([]);
   const { data: processes, isLoading, isError, refetch } = useProcesses();
 
+  const handleFilterChange = useCallback((filtered: ProcessInfo[]) => {
+    setFilteredProcesses(filtered);
+  }, []);
+
   const handleSelectionChange = (processId: string, selected: boolean) => {
     setSelectedProcesses((prev) => {
       const newSet = new Set(prev);
@@ -27,11 +34,12 @@ export default function ProcessesPage() {
   };
 
   const handleSelectAll = () => {
-    if (processes) {
+    const displayedProcesses = filteredProcesses.length > 0 ? filteredProcesses : (processes || []);
-      if (selectedProcesses.size === processes.length) {
+    if (displayedProcesses) {
+      if (selectedProcesses.size === displayedProcesses.length) {
         setSelectedProcesses(new Set());
       } else {
-        setSelectedProcesses(new Set(processes.map((p) => `${p.group}:${p.name}`)));
+        setSelectedProcesses(new Set(displayedProcesses.map((p) => `${p.group}:${p.name}`)));
       }
     }
   };
@@ -72,17 +80,20 @@ export default function ProcessesPage() {
     );
   }
 
+  const displayedProcesses = filteredProcesses.length > 0 || !processes ? filteredProcesses : processes;
+
   return (
     <div className="space-y-6 animate-fade-in">
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-3xl font-bold">Processes</h1>
           <p className="text-muted-foreground mt-1">
-            {processes?.length ?? 0} processes configured
+            {displayedProcesses.length} of {processes?.length ?? 0} processes
+            {displayedProcesses.length !== (processes?.length ?? 0) && ' (filtered)'}
           </p>
         </div>
         <div className="flex items-center gap-4">
-          {viewMode === 'flat' && processes && processes.length > 0 && (
+          {viewMode === 'flat' && displayedProcesses.length > 0 && (
             <Button
               variant="outline"
               size="sm"
@@ -90,7 +101,7 @@ export default function ProcessesPage() {
               className="gap-2"
             >
               <CheckSquare className="h-4 w-4" />
-              {selectedProcesses.size === processes.length ? 'Deselect All' : 'Select All'}
+              {selectedProcesses.size === displayedProcesses.length ? 'Deselect All' : 'Select All'}
             </Button>
           )}
           <GroupSelector viewMode={viewMode} onViewModeChange={setViewMode} />
@@ -101,15 +112,25 @@ export default function ProcessesPage() {
         </div>
       </div>
 
+      {/* Filters */}
+      {processes && processes.length > 0 && (
+        <ProcessFilters processes={processes} onFilterChange={handleFilterChange} />
+      )}
+
+      {/* Process Display */}
       {processes && processes.length === 0 ? (
         <div className="flex flex-col items-center justify-center p-12 text-center border-2 border-dashed rounded-lg">
           <p className="text-muted-foreground">No processes configured</p>
         </div>
+      ) : displayedProcesses.length === 0 ? (
+        <div className="flex flex-col items-center justify-center p-12 text-center border-2 border-dashed rounded-lg">
+          <p className="text-muted-foreground">No processes match the current filters</p>
+        </div>
       ) : viewMode === 'grouped' ? (
-        <GroupView processes={processes || []} />
+        <GroupView processes={displayedProcesses} />
       ) : (
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {processes?.map((process) => {
+          {displayedProcesses.map((process) => {
             const fullName = `${process.group}:${process.name}`;
             return (
               <ProcessCard
@@ -125,7 +146,7 @@ export default function ProcessesPage() {
 
       <BatchActions
         selectedProcesses={selectedProcesses}
-        processes={processes || []}
+        processes={displayedProcesses}
         onClearSelection={handleClearSelection}
       />
     </div>

components/process/ProcessFilters.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ProcessInfo, ProcessState } from '@/lib/supervisor/types';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Search, X, Filter } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+
+interface ProcessFiltersProps {
+  processes: ProcessInfo[];
+  onFilterChange: (filtered: ProcessInfo[]) => void;
+}
+
+const STATE_FILTERS = [
+  { value: 'all', label: 'All States', color: '' },
+  { value: 'running', label: 'Running', color: 'bg-success' },
+  { value: 'stopped', label: 'Stopped', color: 'bg-muted-foreground' },
+  { value: 'fatal', label: 'Fatal', color: 'bg-destructive' },
+  { value: 'starting', label: 'Starting', color: 'bg-warning' },
+  { value: 'stopping', label: 'Stopping', color: 'bg-accent' },
+];
+
+export function ProcessFilters({ processes, onFilterChange }: ProcessFiltersProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedState, setSelectedState] = useState('all');
+  const [selectedGroup, setSelectedGroup] = useState('all');
+  const [showFilters, setShowFilters] = useState(false);
+
+  // Extract unique groups from processes
+  const groups = Array.from(new Set(processes.map((p) => p.group))).sort();
+
+  useEffect(() => {
+    let filtered = [...processes];
+
+    // Filter by search term
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase();
+      filtered = filtered.filter(
+        (p) =>
+          p.name.toLowerCase().includes(term) ||
+          p.group.toLowerCase().includes(term) ||
+          p.description.toLowerCase().includes(term)
+      );
+    }
+
+    // Filter by state
+    if (selectedState !== 'all') {
+      filtered = filtered.filter((p) => {
+        switch (selectedState) {
+          case 'running':
+            return p.state === ProcessState.RUNNING;
+          case 'stopped':
+            return p.state === ProcessState.STOPPED || p.state === ProcessState.EXITED;
+          case 'fatal':
+            return p.state === ProcessState.FATAL;
+          case 'starting':
+            return p.state === ProcessState.STARTING;
+          case 'stopping':
+            return p.state === ProcessState.STOPPING;
+          default:
+            return true;
+        }
+      });
+    }
+
+    // Filter by group
+    if (selectedGroup !== 'all') {
+      filtered = filtered.filter((p) => p.group === selectedGroup);
+    }
+
+    onFilterChange(filtered);
+  }, [searchTerm, selectedState, selectedGroup, processes, onFilterChange]);
+
+  const clearFilters = () => {
+    setSearchTerm('');
+    setSelectedState('all');
+    setSelectedGroup('all');
+  };
+
+  const hasActiveFilters = searchTerm || selectedState !== 'all' || selectedGroup !== 'all';
+
+  return (
+    <div className="space-y-4">
+      {/* Search Bar */}
+      <div className="flex gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="text"
+            placeholder="Search processes by name, group, or description..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-10 pr-10"
+          />
+          {searchTerm && (
+            <button
+              onClick={() => setSearchTerm('')}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+        <Button
+          variant={showFilters ? 'default' : 'outline'}
+          onClick={() => setShowFilters(!showFilters)}
+          className="gap-2"
+        >
+          <Filter className="h-4 w-4" />
+          Filters
+        </Button>
+        {hasActiveFilters && (
+          <Button variant="ghost" onClick={clearFilters} className="gap-2">
+            <X className="h-4 w-4" />
+            Clear
+          </Button>
+        )}
+      </div>
+
+      {/* Filter Panel */}
+      {showFilters && (
+        <Card>
+          <CardContent className="pt-6 space-y-4">
+            {/* State Filter */}
+            <div>
+              <label className="text-sm font-medium mb-2 block">Filter by State</label>
+              <div className="flex flex-wrap gap-2">
+                {STATE_FILTERS.map((filter) => (
+                  <Button
+                    key={filter.value}
+                    variant={selectedState === filter.value ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setSelectedState(filter.value)}
+                    className="gap-2"
+                  >
+                    {filter.color && (
+                      <span className={cn('h-2 w-2 rounded-full', filter.color)} />
+                    )}
+                    {filter.label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            {/* Group Filter */}
+            {groups.length > 1 && (
+              <div>
+                <label className="text-sm font-medium mb-2 block">Filter by Group</label>
+                <div className="flex flex-wrap gap-2">
+                  <Button
+                    variant={selectedGroup === 'all' ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setSelectedGroup('all')}
+                  >
+                    All Groups
+                  </Button>
+                  {groups.map((group) => (
+                    <Button
+                      key={group}
+                      variant={selectedGroup === group ? 'default' : 'outline'}
+                      size="sm"
+                      onClick={() => setSelectedGroup(group)}
+                    >
+                      {group}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}