feat: implement Phase 5 - Charts and Statistics

Features added:
- Visual analytics dashboard with interactive charts
- Process state distribution pie chart
- Process uptime bar chart (top 10 by uptime)
- Group statistics stacked bar chart
- Real-time data visualization using Recharts

Implementation details:
- Created chart components:
  - ProcessStateChart: Pie chart showing state distribution (Running, Stopped, Fatal, Starting, Stopping)
  - ProcessUptimeChart: Horizontal bar chart displaying top 10 processes by uptime in hours
  - GroupStatistics: Stacked bar chart showing process counts per group by state

Dashboard enhancements:
- Added "Analytics" section between statistics cards and quick actions
- Charts display only when processes are loaded and available
- Responsive grid layout (2 columns on large screens for state/group charts)
- Full-width uptime chart for better readability

Chart features:
- Interactive tooltips with formatted data
- Color-coded by state (success green, destructive red, muted gray)
- Proper legends and labels
- Uptime displayed in hours with minutes in tooltip
- Process names truncated to 15 chars for display
- Empty state messages when no data available

Data visualization:
- Pie chart: Percentage distribution of process states
- Bar chart: Top 10 processes sorted by uptime (descending)
- Stacked bar: Group overview with running/stopped/fatal breakdown

Phase 5 complete (3-4 hours estimated)

app/page.tsx

@@ -3,6 +3,9 @@
 import { Activity, Server, FileText, Settings } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { SystemStatus } from '@/components/process/SystemStatus';
+import { ProcessStateChart } from '@/components/charts/ProcessStateChart';
+import { ProcessUptimeChart } from '@/components/charts/ProcessUptimeChart';
+import { GroupStatistics } from '@/components/charts/GroupStatistics';
 import { useProcesses } from '@/lib/hooks/useSupervisor';
 import { ProcessState } from '@/lib/supervisor/types';
 
@@ -86,6 +89,20 @@ export default function HomePage() {
         </Card>
       </div>
 
+      {/* Charts and Analytics */}
+      {!isLoading && processes && processes.length > 0 && (
+        <div className="space-y-6">
+          <h2 className="text-2xl font-bold">Analytics</h2>
+          <div className="grid gap-6 lg:grid-cols-2">
+            <ProcessStateChart processes={processes} />
+            <GroupStatistics processes={processes} />
+          </div>
+          <div className="grid gap-6">
+            <ProcessUptimeChart processes={processes} />
+          </div>
+        </div>
+      )}
+
       {/* Quick Actions */}
       <div className="grid gap-6 md:grid-cols-3">
         <Card className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => window.location.href = '/processes'}>