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)

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>
+  );
+}