docs: enterprise refactor plan with ralph specs

.ralph/specs/legacy/frontend.md

@@ -0,0 +1,99 @@
+# 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 }
+    }
+  }
+})
+```