# review-mockup — E250-C0053

**Aprobada:** `v1-accordion.html` — **decisión del usuario (vs)**, override de la recomendación inicial del revisor (v3).
**Motivo:** v1 cumple los cuatro criterios de superficie visual (lista las 4 integraciones; secretos write-only enmascarados; indicador configurado/vacío visible **incluso con el panel colapsado**; confirmación de guardado y error de validación legibles) y es el diseño preferido por el usuario. La objeción del revisor a v1 era de preferencia de uso, no de incumplimiento: una tarjeta-`collapse` por integración obliga a abrir cada panel para auditar todos los campos a la vez. El usuario prioriza el patrón acordeón (un servicio en foco, estado siempre visible en la cabecera). Ajuste menor a aplicar en el build: el texto de ayuda "vacío = conservar" sólo aparece hoy en TuriTop — repetirlo en las otras 3 integraciones.

> Recomendación original del revisor (conservada para contexto): `v3-sectioned-form.html`, por mostrar las 4 integraciones y todos los estados a la vez sin interacción. Descartada a favor de la preferencia del usuario.

Las tres comparten base sólida: shell real de `PanelView.vue` (sidebar + breadcrumb + nuevo ítem de nav 🔌 Integraciones marcado activo), tema `e250` real (primary verde `#2eac66` vía tokens DaisyUI), DaisyUI semántico, banner + badge "MOCKUP — no producción" presente. Verificadas renderizadas con Playwright (1280×900); sin errores de render (sólo 404 de favicon y un hint benigno de "password field not in a form").

## Findings por variante

### v1-accordion.html
- ✅ Tema e250, shell real, DaisyUI semántico, banner de mockup presente.
- ✅ Secretos write-only (`type="password"` + placeholder enmascarado `••••1234 — escribe para sobrescribir` / `(sin configurar)`), texto "Vacío = conserva la clave guardada", badge configurada/vacía visible en la cabecera **incluso colapsada** (buena decisión de auditoría).
- ✅ Error de validación inline (`input-error` + `label-text-alt text-error` + `alert-error`) en Stripe; confirmación `text-success ✓ Guardado` en TuriTop.
- [ ] Menor: el texto de ayuda "Vacío = conservar" sólo aparece en TuriTop; las otras 3 integraciones no lo repiten. Unificar en el build.
- [ ] Menor: requiere abrir cada panel para auditar el resto de campos — coste de interacción frente a v3.

### v2-tabs.html
- ✅ Tema e250, shell real, DaisyUI semántico (`tabs tabs-bordered`), banner presente.
- ✅ Secretos write-only con placeholder enmascarado y ayuda "El valor guardado nunca se muestra. Vacío = conservar"; punto de estado por pestaña (● success / ○ warning); `alert-success` de confirmación.
- [ ] **Bloqueante para esta variante como UI de producción:** sólo la pestaña activa (TuriTop) es contenido real; Stripe/Volcano/Resend viven dentro de un `<details>` etiquetado "Mockup: previsualizar contenido de las otras pestañas". El criterio "lista las 4 integraciones con sus campos editables" no queda demostrado para 3 de 4 sin ese hack de mockup. No descalifica el patrón de tabs, pero el mockup no prueba la superficie completa.
- [ ] Menor: el botón `join-item` "configurada" pegado al input de password es un adorno no-estándar (no aparece en los SFC de referencia); el badge de cabecera ya comunica el estado. Eliminar para no duplicar señal.

### v3-sectioned-form.html (aprobada)
- ✅ Tema e250, shell real, DaisyUI semántico, banner + badge de mockup presente.
- ✅ Las 4 integraciones visibles de un vistazo, cada una con su botón Guardar (`btn-primary btn-xs`) y su badge de estado configurada/vacía.
- ✅ Secretos write-only en las 4 (placeholder enmascarado + label "secreto · write-only"); campos no-secretos en claro (base URLs, OCTO capabilities, host/puerto/protocolo, from/to).
- ✅ Demuestra **simultáneamente** confirmación de guardado (`alert-success` en Resend) y error legible (`input-error` + `label-text-alt text-error` + `alert-error` en Stripe con puerto inválido `443abc`) — cubre ambos estados del contrato en una sola toma.
- [ ] Menor: la ayuda "vacío = conservar" está sólo en la intro de cabecera, no junto a cada input secreto como en v1; al construir, añadir el `label-text-alt` por campo secreto para que la instrucción quede al lado del input.
- [ ] Menor: con muchas integraciones el formulario crece en vertical; con 4 es cómodo, pero si en el futuro se añaden más, reconsiderar el patrón. Fuera de alcance ahora.

## Veredicto
aprobado: `v1-accordion.html` (decisión del usuario vs; override de la recomendación v3 del revisor). Ajuste menor para el build TDD con `build-frontend`: repetir la ayuda "vacío = conservar" por campo secreto en las 4 integraciones, no sólo en TuriTop.