# ABE — Frontend Specification

## Tecnología
- React 18 + TypeScript
- Vite (bundler, más simple que webpack)
- TailwindCSS (estilos sin escribir CSS manual)
- socket.io-client (WebSocket)
- React Router v6 (navegación entre páginas)

## Ubicación
El frontend vive en `frontend/` en la raíz del proyecto, completamente separado de `src/`.
```
frontend/
├── src/
│   ├── pages/
│   │   ├── Dashboard.tsx       ← página principal
│   │   ├── SessionDetail.tsx   ← detalle de una sesión en vivo
│   │   └── AnomalyDetail.tsx   ← detalle de un bug report
│   ├── components/
│   │   ├── NewSessionForm.tsx  ← formulario para lanzar exploración
│   │   ├── SessionList.tsx     ← lista de sesiones
│   │   ├── AnomalyList.tsx     ← lista de anomalías
│   │   ├── LiveFeed.tsx        ← stream en tiempo real de eventos
│   │   └── AnomalyCard.tsx     ← tarjeta de una anomalía
│   ├── hooks/
│   │   ├── useSocket.ts        ← conexión WebSocket reutilizable
│   │   └── useApi.ts           ← fetch helper para la API REST
│   ├── types.ts                ← tipos TypeScript del frontend (espejo de interfaces.ts)
│   ├── App.tsx                 ← router principal
│   └── main.tsx                ← entry point
├── index.html
├── vite.config.ts
├── tailwind.config.ts
└── package.json
```

---

## Página 1 — Dashboard (ruta: `/`)

Contiene:
- Botón "New Exploration" que abre el formulario
- `NewSessionForm`: campos URL y Seed, botón Start
- `SessionList`: tabla con todas las sesiones (estado, URL, anomalías encontradas, fecha)
- `AnomalyList`: lista de las últimas anomalías de todas las sesiones

---

## Página 2 — Session Detail (ruta: `/sessions/:sessionId`)

Contiene:
- Header con URL explorada, estado (running/completed), seed
- Botón "Stop" si la sesión está activa
- `LiveFeed`: lista en tiempo real de eventos WebSocket
  - Cada evento muestra icono + texto + timestamp
  - Scroll automático al último evento
  - Colores: verde para state:discovered, amarillo para action:executed, rojo para anomaly:detected
- `AnomalyList`: anomalías encontradas en esta sesión (se actualiza en tiempo real)

---

## Página 3 — Anomaly Detail (ruta: `/anomalies/:anomalyId`)

Contiene:
- Header con tipo, severidad (badge de color), descripción
- Sección "Reproduction Steps": lista numerada de acciones
- Sección "Evidence":
  - Screenshot a tamaño completo (imagen)
  - Botón para ver DOM snapshot (abre en nueva pestaña)
- Sección "HTTP Log": tabla con requests (URL, método, status, duración)
- Sección "Raw Errors": bloque de código con los errores textuales
- Botón "Run Replay": llama a POST /api/anomalies/:id/replay y muestra estado

---

## Colores de severidad (badges)
- critical → rojo  (#ef4444)
- high     → naranja (#f97316)
- medium   → amarillo (#eab308)
- low      → azul (#3b82f6)

---

## Conexión con la API

Todas las llamadas van a `http://localhost:3001`.
En `vite.config.ts` configurar proxy para `/api` y `/socket.io` apuntando a `localhost:3001`.
```typescript
// vite.config.ts
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': 'http://localhost:3001',
      '/socket.io': { target: 'http://localhost:3001', ws: true }
    }
  }
})
```