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'}>

components/charts/GroupStatistics.tsx

@@ -0,0 +1,63 @@
+'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 GroupStatisticsProps {
+  processes: ProcessInfo[];
+}
+
+export function GroupStatistics({ processes }: GroupStatisticsProps) {
+  // Group processes and count states
+  const groupData = processes.reduce((acc, proc) => {
+    const group = proc.group;
+    if (!acc[group]) {
+      acc[group] = { name: group, running: 0, stopped: 0, fatal: 0, total: 0 };
+    }
+    acc[group].total++;
+    if (proc.state === ProcessState.RUNNING) acc[group].running++;
+    else if (proc.state === ProcessState.STOPPED || proc.state === ProcessState.EXITED) acc[group].stopped++;
+    else if (proc.state === ProcessState.FATAL) acc[group].fatal++;
+    return acc;
+  }, {} as Record<string, { name: string; running: number; stopped: number; fatal: number; total: number }>);
+
+  const data = Object.values(groupData).sort((a, b) => b.total - a.total);
+
+  if (data.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Process Groups Overview</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="h-[300px] flex items-center justify-center text-muted-foreground">
+            No process groups
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Process Groups Overview</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={300}>
+          <BarChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="name" />
+            <YAxis />
+            <Tooltip />
+            <Legend />
+            <Bar dataKey="running" stackId="a" fill="hsl(var(--success))" name="Running" />
+            <Bar dataKey="stopped" stackId="a" fill="hsl(var(--muted-foreground))" name="Stopped" />
+            <Bar dataKey="fatal" stackId="a" fill="hsl(var(--destructive))" name="Fatal" />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}

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

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