fase(11): dashboard page with charts and realtime

frontend/src/components/common/SeverityBadge.tsx

@@ -0,0 +1,24 @@
+import { Badge } from '@/components/ui/badge'
+import type { Severity } from '../../types'
+
+interface SeverityBadgeProps {
+  severity: Severity
+}
+
+const VARIANT_MAP: Record<Severity, string> = {
+  critical: 'bg-red-500/15 text-red-500 border-red-500/30',
+  high: 'bg-orange-500/15 text-orange-500 border-orange-500/30',
+  medium: 'bg-yellow-500/15 text-yellow-600 border-yellow-500/30',
+  low: 'bg-blue-500/15 text-blue-500 border-blue-500/30',
+}
+
+export function SeverityBadge({ severity }: SeverityBadgeProps) {
+  return (
+    <Badge
+      variant="outline"
+      className={`text-xs font-medium ${VARIANT_MAP[severity]}`}
+    >
+      {severity}
+    </Badge>
+  )
+}

frontend/src/components/dashboard/ActiveSessions.tsx

@@ -0,0 +1,64 @@
+import { useNavigate } from 'react-router-dom'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import type { Session } from '../../types'
+
+interface ActiveSessionsProps {
+  sessions: Session[]
+}
+
+export function ActiveSessions({ sessions }: ActiveSessionsProps) {
+  const navigate = useNavigate()
+  const active = sessions.filter(s => s.status === 'running')
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-sm font-medium">
+          Active Sessions
+          {active.length > 0 && (
+            <Badge variant="secondary" className="ml-2 text-xs">
+              {active.length}
+            </Badge>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {active.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-4">
+            No active sessions
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {active.map(s => {
+              const pct = s.anomaliesFound > 0
+                ? Math.min(100, (s.statesVisited / 100) * 100)
+                : (s.statesVisited / 50) * 100
+
+              return (
+                <div
+                  key={s.sessionId}
+                  className="cursor-pointer hover:bg-accent/50 rounded p-2 transition-colors"
+                  onClick={() => navigate(`/sessions/${s.sessionId}`)}
+                >
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-sm font-medium truncate max-w-[200px]">{s.url}</span>
+                    <span className="text-xs text-muted-foreground ml-2">
+                      {s.statesVisited} states
+                    </span>
+                  </div>
+                  <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-primary rounded-full transition-all"
+                      style={{ width: `${Math.min(100, pct)}%` }}
+                    />
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

frontend/src/components/dashboard/KPICards.tsx

@@ -0,0 +1,64 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import type { Stats } from '../../types'
+
+interface KPICardsProps {
+  stats: Stats | undefined
+  isLoading: boolean
+}
+
+interface KPICardProps {
+  title: string
+  value: number | string
+  isLoading: boolean
+  valueClass?: string
+}
+
+function KPICard({ title, value, isLoading, valueClass }: KPICardProps) {
+  return (
+    <Card>
+      <CardContent className="p-6">
+        {isLoading ? (
+          <>
+            <Skeleton className="h-8 w-16 mb-2" />
+            <Skeleton className="h-4 w-24" />
+          </>
+        ) : (
+          <>
+            <p className={`text-3xl font-bold ${valueClass ?? ''}`}>{value}</p>
+            <p className="text-sm text-muted-foreground mt-1">{title}</p>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export function KPICards({ stats, isLoading }: KPICardsProps) {
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      <KPICard
+        title="Total Findings"
+        value={stats?.totalAnomalies ?? 0}
+        isLoading={isLoading}
+      />
+      <KPICard
+        title="Critical / High"
+        value={stats?.criticalHighCount ?? 0}
+        isLoading={isLoading}
+        valueClass={stats && stats.criticalHighCount > 0 ? 'text-destructive' : undefined}
+      />
+      <KPICard
+        title="Active Sessions"
+        value={stats?.runningSessions ?? 0}
+        isLoading={isLoading}
+        valueClass={stats && stats.runningSessions > 0 ? 'text-green-500' : undefined}
+      />
+      <KPICard
+        title="Total Sessions"
+        value={stats?.totalSessions ?? 0}
+        isLoading={isLoading}
+      />
+    </div>
+  )
+}

frontend/src/components/dashboard/QuickActions.tsx

@@ -0,0 +1,27 @@
+import { useNavigate } from 'react-router-dom'
+import { Button } from '@/components/ui/button'
+import { Plus, FileText } from 'lucide-react'
+
+export function QuickActions() {
+  const navigate = useNavigate()
+
+  return (
+    <div className="flex items-center gap-3">
+      <Button
+        onClick={() => navigate('/sessions?new=1')}
+        className="gap-2"
+      >
+        <Plus className="h-4 w-4" />
+        New Exploration
+      </Button>
+      <Button
+        variant="outline"
+        onClick={() => navigate('/reports?new=1')}
+        className="gap-2"
+      >
+        <FileText className="h-4 w-4" />
+        Generate Report
+      </Button>
+    </div>
+  )
+}

frontend/src/components/dashboard/RecentFindings.tsx

@@ -0,0 +1,67 @@
+import { useNavigate } from 'react-router-dom'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { SeverityBadge } from '@/components/common/SeverityBadge'
+import type { AnomalySummary } from '../../types'
+
+interface RecentFindingsProps {
+  findings: AnomalySummary[]
+}
+
+export function RecentFindings({ findings }: RecentFindingsProps) {
+  const navigate = useNavigate()
+  const recent = findings.slice(0, 10)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-sm font-medium">Recent Findings</CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        {recent.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No findings yet. Start an exploration!
+          </p>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Severity</TableHead>
+                <TableHead>Type</TableHead>
+                <TableHead className="hidden md:table-cell">Description</TableHead>
+                <TableHead className="hidden sm:table-cell">Time</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {recent.map(f => (
+                <TableRow
+                  key={f.id}
+                  className="cursor-pointer"
+                  onClick={() => navigate(`/findings/${f.id}`)}
+                >
+                  <TableCell>
+                    <SeverityBadge severity={f.severity} />
+                  </TableCell>
+                  <TableCell className="font-mono text-xs">{f.type}</TableCell>
+                  <TableCell className="hidden md:table-cell max-w-xs truncate text-sm text-muted-foreground">
+                    {f.description}
+                  </TableCell>
+                  <TableCell className="hidden sm:table-cell text-xs text-muted-foreground">
+                    {new Date(f.timestamp).toLocaleString()}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

frontend/src/components/dashboard/SeverityDistribution.tsx

@@ -0,0 +1,68 @@
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import type { AnomalySummary } from '../../types'
+
+const SEVERITY_COLORS: Record<string, string> = {
+  critical: '#ef4444',
+  high: '#f97316',
+  medium: '#eab308',
+  low: '#3b82f6',
+}
+
+interface SeverityDistributionProps {
+  findings: AnomalySummary[]
+}
+
+export function SeverityDistribution({ findings }: SeverityDistributionProps) {
+  const counts: Record<string, number> = {}
+  for (const f of findings) {
+    counts[f.severity] = (counts[f.severity] ?? 0) + 1
+  }
+
+  const data = Object.entries(counts).map(([name, value]) => ({ name, value }))
+
+  if (data.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm font-medium">Severity Distribution</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground text-center py-8">No findings yet</p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-sm font-medium">Severity Distribution</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={200}>
+          <PieChart>
+            <Pie
+              data={data}
+              dataKey="value"
+              nameKey="name"
+              cx="50%"
+              cy="50%"
+              outerRadius={70}
+              labelLine={false}
+            >
+              {data.map(entry => (
+                <Cell
+                  key={entry.name}
+                  fill={SEVERITY_COLORS[entry.name] ?? '#6b7280'}
+                />
+              ))}
+            </Pie>
+            <Tooltip />
+            <Legend />
+          </PieChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  )
+}

frontend/src/components/dashboard/TrendChart.tsx

@@ -0,0 +1,72 @@
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import type { AnomalySummary } from '../../types'
+
+interface TrendChartProps {
+  findings: AnomalySummary[]
+}
+
+function getLast30Days(): string[] {
+  const days: string[] = []
+  for (let i = 29; i >= 0; i--) {
+    const d = new Date()
+    d.setDate(d.getDate() - i)
+    days.push(d.toISOString().slice(0, 10))
+  }
+  return days
+}
+
+export function TrendChart({ findings }: TrendChartProps) {
+  const days = getLast30Days()
+
+  const data = days.map(day => {
+    const dayFindings = findings.filter(f => {
+      const d = new Date(f.timestamp).toISOString().slice(0, 10)
+      return d === day
+    })
+    return {
+      date: day.slice(5), // MM-DD
+      critical: dayFindings.filter(f => f.severity === 'critical').length,
+      high: dayFindings.filter(f => f.severity === 'high').length,
+      medium: dayFindings.filter(f => f.severity === 'medium').length,
+      low: dayFindings.filter(f => f.severity === 'low').length,
+    }
+  })
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-sm font-medium">Findings Trend (30 days)</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={200}>
+          <AreaChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+            <XAxis
+              dataKey="date"
+              tick={{ fontSize: 10 }}
+              tickLine={false}
+              interval={6}
+            />
+            <YAxis tick={{ fontSize: 10 }} tickLine={false} axisLine={false} />
+            <Tooltip />
+            <Legend />
+            <Area type="monotone" dataKey="critical" stackId="1" stroke="#ef4444" fill="#ef4444" fillOpacity={0.6} />
+            <Area type="monotone" dataKey="high" stackId="1" stroke="#f97316" fill="#f97316" fillOpacity={0.6} />
+            <Area type="monotone" dataKey="medium" stackId="1" stroke="#eab308" fill="#eab308" fillOpacity={0.6} />
+            <Area type="monotone" dataKey="low" stackId="1" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.6} />
+          </AreaChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  )
+}

frontend/src/hooks/useFindings.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query'
+import { apiFetch } from '@/lib/api'
+import type { AnomalySummary, Stats } from '../types'
+
+export function useFindings(params?: { sessionId?: string; severity?: string }) {
+  const qs = new URLSearchParams()
+  if (params?.sessionId) qs.set('sessionId', params.sessionId)
+  if (params?.severity) qs.set('severity', params.severity)
+  const q = qs.toString() ? `?${qs.toString()}` : ''
+
+  return useQuery<AnomalySummary[]>({
+    queryKey: ['findings', params],
+    queryFn: () => apiFetch<AnomalySummary[]>(`/api/anomalies${q}`),
+  })
+}
+
+export function useFindingStats() {
+  return useQuery<Stats>({
+    queryKey: ['findings', 'stats'],
+    queryFn: () => apiFetch<Stats>('/api/stats'),
+  })
+}

frontend/src/hooks/useSessions.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query'
+import { apiFetch } from '@/lib/api'
+import type { Session } from '../types'
+
+export function useSessions() {
+  return useQuery<Session[]>({
+    queryKey: ['sessions'],
+    queryFn: () => apiFetch<Session[]>('/api/sessions'),
+  })
+}
+
+export function useSession(id: string) {
+  return useQuery<Session>({
+    queryKey: ['sessions', id],
+    queryFn: () => apiFetch<Session>(`/api/sessions/${id}`),
+    enabled: !!id,
+  })
+}

frontend/src/hooks/useSocket.ts

@@ -1,40 +1,40 @@
-/**
- * useSocket — reusable socket.io-client connection.
- */
+import { useEffect, useRef, useCallback } from 'react'
+import { io, type Socket } from 'socket.io-client'
 
-import { useEffect, useRef, useCallback } from 'react';
-import { io, Socket } from 'socket.io-client';
+export type SocketHandler = (event: string, data: unknown) => void
 
-export type SocketHandler = (event: string, data: unknown) => void;
+const SOCKET_EVENTS = [
+  'session:started',
+  'state:discovered',
+  'action:executed',
+  'anomaly:detected',
+  'session:completed',
+  'session:error',
+]
 
-export function useSocket(onEvent: SocketHandler) {
-  const socketRef = useRef<Socket | null>(null);
-  const handlerRef = useRef<SocketHandler>(onEvent);
-  handlerRef.current = onEvent;
+export function useSocket(onEvent?: SocketHandler) {
+  const socketRef = useRef<Socket | null>(null)
+  const handlerRef = useRef<SocketHandler | undefined>(onEvent)
+  handlerRef.current = onEvent
 
   useEffect(() => {
-    const socket = io({ path: '/socket.io' });
-    socketRef.current = socket;
+    const socket = io({ path: '/socket.io' })
+    socketRef.current = socket
 
-    const events = [
-      'session:started',
-      'state:discovered',
-      'action:executed',
-      'anomaly:detected',
-      'session:completed',
-      'session:error',
-    ];
+    SOCKET_EVENTS.forEach(evt => {
+      socket.on(evt, (data: unknown) => {
+        handlerRef.current?.(evt, data)
+      })
+    })
 
-    events.forEach((evt) => {
-      socket.on(evt, (data: unknown) => handlerRef.current(evt, data));
-    });
-
-    return () => { socket.disconnect(); };
-  }, []);
+    return () => {
+      socket.disconnect()
+    }
+  }, [])
 
   const emit = useCallback((event: string, data: unknown) => {
-    socketRef.current?.emit(event, data);
-  }, []);
+    socketRef.current?.emit(event, data)
+  }, [])
 
-  return { emit };
+  return { emit }
 }

frontend/src/pages/AnomalyDetail.tsx

@@ -163,7 +163,7 @@ export function AnomalyDetail() {
   useEffect(() => { loadAnomaly(); }, [loadAnomaly]);
 
   // Listen for AI enrichment via WebSocket
-  useSocket(useCallback((event, data) => {
+  useSocket(useCallback((event: string, data: unknown) => {
     if (event === 'anomaly:enriched') {
       const d = data as WsAnomalyEnriched;
       if (d.anomalyId === anomalyId) {

frontend/src/pages/Dashboard.tsx

@@ -1,8 +1,64 @@
+import { useCallback } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { KPICards } from '@/components/dashboard/KPICards'
+import { TrendChart } from '@/components/dashboard/TrendChart'
+import { SeverityDistribution } from '@/components/dashboard/SeverityDistribution'
+import { RecentFindings } from '@/components/dashboard/RecentFindings'
+import { ActiveSessions } from '@/components/dashboard/ActiveSessions'
+import { QuickActions } from '@/components/dashboard/QuickActions'
+import { useFindings, useFindingStats } from '@/hooks/useFindings'
+import { useSessions } from '@/hooks/useSessions'
+import { useSocket } from '@/hooks/useSocket'
+
 export function Dashboard() {
+  const queryClient = useQueryClient()
+
+  const { data: findings = [], isLoading: findingsLoading } = useFindings()
+  const { data: stats, isLoading: statsLoading } = useFindingStats()
+  const { data: sessions = [] } = useSessions()
+
+  const refreshData = useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey: ['findings'] })
+    void queryClient.invalidateQueries({ queryKey: ['sessions'] })
+  }, [queryClient])
+
+  useSocket(useCallback((event: string) => {
+    if (['session:started', 'session:completed', 'session:error', 'anomaly:detected'].includes(event)) {
+      refreshData()
+    }
+  }, [refreshData]))
+
   return (
-    <div className="flex flex-col items-center justify-center h-full min-h-[60vh] text-center">
-      <h1 className="text-3xl font-bold mb-2">Dashboard</h1>
-      <p className="text-muted-foreground">Coming in Phase 11 — charts and real-time KPIs</p>
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Dashboard</h1>
+          <p className="text-sm text-muted-foreground">Overview of your security findings</p>
+        </div>
+        <QuickActions />
+      </div>
+
+      <KPICards stats={stats} isLoading={statsLoading} />
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2">
+          <TrendChart findings={findings} />
+        </div>
+        <SeverityDistribution findings={findings} />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2">
+          <RecentFindings findings={findings.slice().sort((a, b) => b.timestamp - a.timestamp)} />
+        </div>
+        <ActiveSessions sessions={sessions} />
+      </div>
+
+      {findingsLoading && (
+        <div className="text-center text-sm text-muted-foreground py-4">
+          Loading findings...
+        </div>
+      )}
     </div>
   )
 }

frontend/src/pages/SessionDetail.tsx

@@ -151,7 +151,7 @@ export function SessionDetail() {
     setFeedEvents((prev) => [...prev, { id: nextId(), event, text, timestamp: Date.now() }]);
   }
 
-  useSocket(useCallback((event, data) => {
+  useSocket(useCallback((event: string, data: unknown) => {
     const d = data as Record<string, unknown>;
     if (d['sessionId'] !== sessionId) return;