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/ProcessUptimeChart.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { ProcessInfo, ProcessState } from '@/lib/supervisor/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+
+interface ProcessUptimeChartProps {
+  processes: ProcessInfo[];
+}
+
+export function ProcessUptimeChart({ processes }: ProcessUptimeChartProps) {
+  // Filter only running processes and calculate uptime in hours
+  const data = processes
+    .filter((p) => p.state === ProcessState.RUNNING && p.start > 0)
+    .map((p) => {
+      const uptimeSeconds = p.now - p.start;
+      const uptimeHours = uptimeSeconds / 3600;
+      return {
+        name: `${p.group}:${p.name}`,
+        uptime: parseFloat(uptimeHours.toFixed(2)),
+        displayName: p.name.length > 15 ? p.name.substring(0, 15) + '...' : p.name,
+      };
+    })
+    .sort((a, b) => b.uptime - a.uptime)
+    .slice(0, 10); // Top 10 processes by uptime
+
+  if (data.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Process Uptime (Top 10)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="h-[300px] flex items-center justify-center text-muted-foreground">
+            No running processes
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Process Uptime (Top 10)</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={300}>
+          <BarChart data={data} layout="vertical">
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis type="number" label={{ value: 'Hours', position: 'insideBottom', offset: -5 }} />
+            <YAxis dataKey="displayName" type="category" width={120} />
+            <Tooltip
+              formatter={(value: number) => {
+                const hours = Math.floor(value);
+                const minutes = Math.floor((value - hours) * 60);
+                return `${hours}h ${minutes}m`;
+              }}
+            />
+            <Legend />
+            <Bar dataKey="uptime" fill="hsl(var(--success))" name="Uptime (hours)" />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}