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) {
-      if (selectedProcesses.size === processes.length) {
+    const displayedProcesses = filteredProcesses.length > 0 ? filteredProcesses : (processes || []);
+    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>