Autonomous-Bug-Explorer/.ralph/specs/legacy/frontend.md

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.

// vite.config.ts
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': 'http://localhost:3001',
      '/socket.io': { target: 'http://localhost:3001', ws: true }
    }
  }
})