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)

components/charts/ProcessStateChart.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { ProcessInfo, ProcessState } from '@/lib/supervisor/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
+
+interface ProcessStateChartProps {
+  processes: ProcessInfo[];
+}
+
+export function ProcessStateChart({ processes }: ProcessStateChartProps) {
+  const stateCounts = processes.reduce(
+    (acc, proc) => {
+      if (proc.state === ProcessState.RUNNING) acc.running++;
+      else if (proc.state === ProcessState.STOPPED || proc.state === ProcessState.EXITED) acc.stopped++;
+      else if (proc.state === ProcessState.FATAL) acc.fatal++;
+      else if (proc.state === ProcessState.STARTING) acc.starting++;
+      else if (proc.state === ProcessState.STOPPING) acc.stopping++;
+      else acc.other++;
+      return acc;
+    },
+    { running: 0, stopped: 0, fatal: 0, starting: 0, stopping: 0, other: 0 }
+  );
+
+  const data = [
+    { name: 'Running', value: stateCounts.running, color: 'hsl(var(--success))' },
+    { name: 'Stopped', value: stateCounts.stopped, color: 'hsl(var(--muted-foreground))' },
+    { name: 'Fatal', value: stateCounts.fatal, color: 'hsl(var(--destructive))' },
+    { name: 'Starting', value: stateCounts.starting, color: 'hsl(var(--warning))' },
+    { name: 'Stopping', value: stateCounts.stopping, color: 'hsl(var(--accent))' },
+    { name: 'Other', value: stateCounts.other, color: 'hsl(var(--muted))' },
+  ].filter((item) => item.value > 0);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Process State Distribution</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={300}>
+          <PieChart>
+            <Pie
+              data={data}
+              cx="50%"
+              cy="50%"
+              labelLine={false}
+              label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
+              outerRadius={80}
+              fill="#8884d8"
+              dataKey="value"
+            >
+              {data.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Pie>
+            <Tooltip />
+            <Legend />
+          </PieChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}