100 lines
3.4 KiB
Markdown
100 lines
3.4 KiB
Markdown
# 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 }
|
|
}
|
|
}
|
|
})
|
|
```
|