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