Skip to content

feat: UX-B · Pulido transversal (tipografía, jerga, confirmaciones, a11y)#59

Merged
gonzaloMorenoc merged 10 commits into
mainfrom
feat/mnemo-ux-b-pulido
Jul 1, 2026
Merged

feat: UX-B · Pulido transversal (tipografía, jerga, confirmaciones, a11y)#59
gonzaloMorenoc merged 10 commits into
mainfrom
feat/mnemo-ux-b-pulido

Conversation

@gonzaloMorenoc

@gonzaloMorenoc gonzaloMorenoc commented Jul 1, 2026

Copy link
Copy Markdown
Owner

Qué hace este PR

Sub-proyecto B de la mejora de UX (auditoría 2026-06-28, A→B→C). Pulido transversal de calidad percibida, claridad y accesibilidad — sin tocar la lógica de negocio.

Cambios (6 tareas)

  1. Tipografía: cargar Manrope + JetBrains Mono con next/font/google (estaban declaradas pero nunca se cargaban) + los 3 minors que dejó UX-A.
  2. Primitivos (Radix, patrón shadcn): InfoTooltip, Select, AlertDialog + un glosario término→definición.
  3. Jerga: tooltips en los términos de dominio (foso, triaje, gate, regla_sin_test, linaje, certificado…) + traducir los valores crudos (quarantine→"Cuarentena", self_heal→"Auto-reparación"…).
  4. Estados de carga: los 7 "Cargando…" → <Skeleton>.
  5. Confirmaciones: AlertDialog en Aprobar/Rechazar (que crean PR/ticket/self-heal reales) — la mutación solo corre tras confirmar + <select> crudos → <Select>.
  6. Accesibilidad: role/aria-label/aria-live en el grafo, panel de gaps como lista semántica, severidades con icono+texto; Integrations reordenado (config→indexar) + badge "✓ Conectado" + help-text.

Plan de pruebas

  • Frontend: lint:ci 0 + 185 tests + build.
  • Sin backend/migración: git diff src/ db/ vacío.
  • No rompe negocio: las mutaciones/queries no cambian; Aprobar/Rechazar mutan solo tras confirmar (testeado el cancel-no-muta); los <Select> preservan value/onChange.
  • Review final whole-branch = Ready to merge tras 2 fixes de a11y (rol de lista real sin display:contents; aria-describedby en Integrations).

Siguiente

  • UX-C (empaquetado/concurso): verify público + página pública, recorrido guiado del lazo gap→test→PR, demo/seed con las capacidades, docs.

https://claude.ai/code/session_0198KfgRWvAM8BhiVz24uTok

@gonzaloMorenoc
docs: diseño UX-B (pulido transversal)
a6b035f 
Fuentes (next/font Manrope/JetBrains) + minors de UX-A; primitivos shadcn/Radix nuevos
(InfoTooltip, Select, AlertDialog) + glosario de jerga; tooltips aplicados + traducción de
kinds; skeletons consistentes; confirmaciones en acciones que mutan (Aprobar/Rechazar→PR/
ticket/self-heal); a11y del grafo; reordenar Integrations. Un sub-proyecto, plan de varias
tareas. No rompe negocio (solo UI/UX). Sub-proyecto B de la mejora UX.

Claude-Session: https://claude.ai/code/session_0198KfgRWvAM8BhiVz24uTok
@gonzaloMorenoc
docs: plan UX-B (pulido transversal) — 6 tareas
0628ca0 
T1 tipografía next/font + 3 minors de A; T2 primitivos Radix (tooltip/InfoTooltip, select,
alert-dialog) + glosario; T3 jerga aplicada + etiquetas humanas; T4 skeletons; T5
confirmaciones (AlertDialog en Aprobar/Rechazar) + Select unificado; T6 a11y del grafo +
Integrations. No rompe negocio. Verificación local=CI.

Claude-Session: https://claude.ai/code/session_0198KfgRWvAM8BhiVz24uTok
@gonzaloMorenoc
feat(ux): tipografía real (next/font) + minors de UX-A
d7109da 
- layout.tsx: carga Manrope y JetBrains Mono via next/font/google con
  variables --font-sans-loaded / --font-mono-loaded; html recibe las
  clases de variable.
- globals.css: --font-sans y --font-mono usan var(…-loaded) con
  fallback a los nombres literales; fuente siempre disponible.
- topbar.tsx: elimina el <p>Mnemo</p> redundante (subtítulo duplicado).
- onboarding/page.tsx: empty-state sin org enlaza a /app/org
  ("Ir a Organización") en vez de /app/knowledge.
- app/page.tsx: fila de accesos rápidos deriva de NAV_ITEMS filtrado
  por href; ya no es un literal array.
- tests: topbar verifica ausencia del subtítulo duplicado; onboarding
  verifica href=/app/org en el CTA del empty-state.

Claude-Session: https://claude.ai/code/session_0198KfgRWvAM8BhiVz24uTok
@gonzaloMorenoc
feat(ui): primitivos tooltip/select/alert-dialog + glosario
f3a22ab 
- Añade @radix-ui/react-tooltip, @radix-ui/react-select, @radix-ui/react-alert-dialog
- lib/glossary.ts: GLOSSARY con 10 términos de dominio (foso, triaje, self_heal…)
- ui/tooltip.tsx: Tooltip/TooltipTrigger/TooltipContent con Portal (Radix + cn, zinc-900)
- ui/InfoTooltip.tsx: botón HelpCircle que consume GLOSSARY por term o content directo
- ui/select.tsx: Select/SelectTrigger/SelectValue/SelectContent/SelectItem (shadcn-style, rounded-xl)
- ui/alert-dialog.tsx: AlertDialog/Trigger/Content/Title/Description/Action/Cancel con overlay
- Tests: 9 tests (InfoTooltip ×5, Select ×2, AlertDialog ×2) — jsdom, userEvent, todos verdes
- CI gate: lint:ci=0 warnings, tsc clean, npm build OK

Claude-Session: https://claude.ai/code/session_0198KfgRWvAM8BhiVz24uTok
@gonzaloMorenoc
feat(ux): tooltips de jerga + etiquetas humanas
4c99ced 
- ActionsPanel: KIND_LABEL (quarantine→Cuarentena, ticket→Ticket,
  self_heal→Auto-reparación) + InfoTooltip en encabezado "Acciones"
- TriageVerdictList: CATEGORY_LABEL (real→Fallo real, flaky→Flaky,
  maintenance→Mantenimiento, infra→Infra, unknown→Desconocido) +
  InfoTooltip en encabezado + leyenda de colores inline
- CertificateCard: InfoTooltip en "certificado" y "risk score"
- GateCard: InfoTooltip en "Gate (check run)"
- calibration/page: InfoTooltip en "Calibración" y "foso"
- graph/page: SEVERITY_LABEL (alta→Alta, media→Media, baja→Baja) +
  InfoTooltip en "Coverage Gaps"
- defects/page: InfoTooltip en "Defect DNA" y "Linaje"
- Tests ActionsPanel+TriageVerdictList: 6 tests (2→6) con cleanup()

Claude-Session: https://claude.ai/code/session_0198KfgRWvAM8BhiVz24uTok
@gonzaloMorenoc
fix(ux): término de glosario propio para "Linaje" (no self_heal)
f5adc5a 
Claude-Session: https://claude.ai/code/session_0198KfgRWvAM8BhiVz24uTok
@gonzaloMorenoc
feat(ux): skeletons consistentes en la carga
7258dde 
Reemplaza los 7 textos "Cargando…" por <Skeleton> con forma aproximada
del contenido final en graph, integrations, knowledge, onboarding,
test-plan y BriefingCard. Añade data-testid a cada skeleton; actualiza
los tests afectados para verificar el testid en vez del texto plano.

Claude-Session: https://claude.ai/code/session_0198KfgRWvAM8BhiVz24uTok
@gonzaloMorenoc
feat(ux): confirmación en acciones que mutan + Select unificado
de98a55 
- ActionsPanel: Aprobar/Rechazar ahora abren AlertDialog; la mutación
  solo se ejecuta al confirmar, nunca al cancelar
- defects/page RootCausePanel: InfoTooltip no-bloqueante junto al
  botón Analizar causa raíz
- Reemplaza <select> nativo por <Select> de Radix UI en org-switcher,
  knowledge/page (Tipo), FamilyLabelControl y assurance/page (Formato)
- Tests: 5 nuevos casos en ActionsPanel (dialog open, confirm, cancel,
  rechazar confirm/cancel); FamilyLabelControl y org-provider
  actualizados para Radix Select con userEvent
- 34 test files, 176 tests verdes; lint:ci 0; tsc clean; build OK

Claude-Session: https://claude.ai/code/session_0198KfgRWvAM8BhiVz24uTok
@gonzaloMorenoc
feat(ux): a11y del grafo + orden y estado de Integrations
3d7b9e4 
- knowledge-graph-view: añade role="application" + aria-label="Grafo de conocimiento" al contenedor; región aria-live="polite" que anuncia el nodo seleccionado
- graph/page: panel de gaps envuelto en <ul aria-label="Gaps de cobertura"> + <li>; badge de severidad con icono (▲◆▼) + texto (no solo color); actualiza test de orden para ignorar el icono en textContent
- integrations/page: badge "✓ Conectado" (data-testid="github-connected-badge") cuando githubConfig.configured; help-text de formato para Installation ID (gh-install-id-hint) y owner/repo (gh-repo-hint)
- Tests: 7 nuevos tests RED→GREEN (aria-label, aria-live, ul a11y, icono en badge, badge Conectado, hints de formato); 185/185 pasan

Claude-Session: https://claude.ai/code/session_0198KfgRWvAM8BhiVz24uTok
@gonzaloMorenoc
fix(ux): rol de lista real en gaps (sin display:contents) + aria-desc…
5858bc7 
…ribedby en Integrations

I1: <ul>/<li className="contents"> en graph/page.tsx sustituido por flex flex-col gap-3 / list-none
    para preservar el rol de lista en Safari/VoiceOver sin cambio visual.
I2: aria-describedby añadido en integrations/page.tsx a los inputs gh-install-id y gh-repo,
    enlazando los hints ya existentes para lectores de pantalla.

Claude-Session: https://claude.ai/code/session_0198KfgRWvAM8BhiVz24uTok
@vercel

vercel Bot commented Jul 1, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
mnemo Ready Ready Preview, Comment Jul 1, 2026 4:13pm

@gonzaloMorenoc gonzaloMorenoc merged commit 531efbc into main Jul 1, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@gonzaloMorenoc