Arquitectura frontend¶

El frontend React/Vite contiene una pantalla de demostración del vertical slice. Consume exclusivamente VITE_API_BASE_URL, mantiene estados de carga/error/éxito y no conoce SQLite, drivers, secretos ni reglas de riesgo.

UI-01 permite seleccionar motor, solicitar capacidades, verificar conexión y descubrir recursos mediante los endpoints versionados. En modo live solo habilita recursos devueltos por el backend; si el motor está en fixture mode ofrece explícitamente el recurso demo. Muestra loading, vacío, permiso denegado, soporte no disponible y limitaciones, sin presentar datos de conexión ni credenciales. Las visualizaciones presentan resultado agregado, severidad, impacto y hallazgos. Las validaciones de UX no sustituyen la API.

UI-02 consume GET /api/v1/operations para construir el formulario: cada operación declara sus campos requeridos, opcionales y capability. El navegador valida la presencia y forma básica antes de enviar, bloquea una capability no declarada y asocia los errores 422 de la API a su campo. El payload final se envía sin valores vacíos ni secretos; el backend sigue validando semántica, capacidad y límites.

UI-03 consume el historial paginado, el detalle, la comparación y la exportación ya publicados por la API. Los filtros y la selección de hasta dos reportes solo controlan la presentación: el backend decide si la evidencia es comparable y conserva razones y deltas nulos cuando no lo es. La descarga usa el nombre Content-Disposition únicamente si es seguro, o un nombre local de reserva; el navegador no recibe ni construye credenciales.

UI-04 refuerza la presentación sin cambiar contratos: los controles tienen etiquetas, foco visible y estados aria-invalid; los reportes con muestra o evidencia incompleta muestran que el resultado no es una garantía. Los reintentos se limitan a consultas de conexión e historial, que son read-only; no existe reintento automático de análisis ni de operaciones sobre motores.