fase(11): dashboard page with charts and realtime

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