fase(12): session pages with live feed

frontend/src/components/sessions/SessionConfig.tsx

@@ -0,0 +1,41 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import type { Session } from '../../types'
+
+interface SessionConfigProps {
+  session: Session
+}
+
+export function SessionConfig({ session }: SessionConfigProps) {
+  const duration = session.finishedAt
+    ? Math.round((new Date(session.finishedAt).getTime() - new Date(session.startedAt).getTime()) / 1000)
+    : null
+
+  const rows = [
+    { label: 'URL', value: session.url },
+    { label: 'Status', value: session.status },
+    { label: 'Started', value: new Date(session.startedAt).toLocaleString() },
+    ...(session.finishedAt ? [{ label: 'Finished', value: new Date(session.finishedAt).toLocaleString() }] : []),
+    ...(duration !== null ? [{ label: 'Duration', value: `${duration}s` }] : []),
+    { label: 'States Visited', value: String(session.statesVisited) },
+    { label: 'Findings', value: String(session.anomaliesFound) },
+    ...(session.seed != null ? [{ label: 'Seed', value: String(session.seed) }] : []),
+  ]
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-sm font-medium">Session Configuration</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <dl className="space-y-2">
+          {rows.map(row => (
+            <div key={row.label} className="flex gap-3 text-sm">
+              <dt className="text-muted-foreground w-28 shrink-0">{row.label}</dt>
+              <dd className="font-mono break-all">{row.value}</dd>
+            </div>
+          ))}
+        </dl>
+      </CardContent>
+    </Card>
+  )
+}