v2.7 Refinement: layout móvil, CI con GitHub Actions, onboarding y pulido de UX (77/77 tests)

.github/run-tests.mjs

@@ -0,0 +1,30 @@
+// Runner headless de tests.html para CI (GitHub Actions).
+// Requiere: un servidor HTTP sirviendo el repo en :8741 y playwright instalado.
+// Uso local:  python -m http.server 8741 &  node .github/run-tests.mjs
+import { chromium } from "playwright";
+
+const browser = await chromium.launch();
+const page = await browser.newPage();
+page.on("pageerror", e => console.error("ERROR DE PÁGINA:", e.message));
+
+await page.goto("http://localhost:8741/tests.html");
+
+// Esperar a que el summary muestre el resultado final ("N/M tests")
+await page.waitForFunction(() => {
+  const s = document.getElementById("summary");
+  return s && /\d+\/\d+ tests/.test(s.textContent);
+}, { timeout: 60000 });
+
+const summary = await page.evaluate(() => document.getElementById("summary").textContent);
+const ok = await page.evaluate(() => document.getElementById("summary").className === "ok");
+console.log(summary);
+
+if (!ok) {
+  const fails = await page.evaluate(() =>
+    [...document.querySelectorAll("#results .err")].map(e => e.parentElement.textContent)
+  );
+  for (const f of fails) console.error("\nFALLO: " + f);
+}
+
+await browser.close();
+process.exit(ok ? 0 : 1);

.github/workflows/tests.yml

@@ -0,0 +1,30 @@
+# Corre la suite de regresión (tests.html) en Chromium headless.
+# tests.html es dev-only: el producto distribuible sigue siendo solo index.html.
+name: tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  regression:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Instalar Playwright (Chromium)
+        run: |
+          npm init -y > /dev/null
+          npm install playwright > /dev/null
+          npx playwright install --with-deps chromium
+
+      - name: Servir el repo y ejecutar la suite
+        run: |
+          python3 -m http.server 8741 &
+          sleep 1
+          node .github/run-tests.mjs

CLAUDE.md

@@ -35,9 +35,11 @@ python -m http.server 8741
 
 All tests must pass before committing changes to `index.html`.
 
+CI: `.github/workflows/tests.yml` runs the full suite headless (Playwright + Chromium, via `.github/run-tests.mjs`) on every push to main and every PR.
+
 ## Architecture
 
-Everything is in `index.html` (~1955 lines): CSS in `<style>`, HTML markup in `<body>`, and JavaScript in `<script>`. No modules, no bundler.
+Everything is in `index.html` (~2100 lines): CSS in `<style>`, HTML markup in `<body>`, and JavaScript in `<script>`. No modules, no bundler.
 
 ### Key JavaScript Functions
 
@@ -62,6 +64,8 @@ Everything is in `index.html` (~1955 lines): CSS in `<style>`, HTML markup in `<
 | `loadFile(f)` | Shared file loader for drag & drop and the Open button |
 | `liveValidate()` | Debounced ✓/✗ indicator in the input header (XML or JSON, paused >2MB) |
 | `savePrefs()` / `loadPrefs()` | Opt-in config persistence in localStorage (`xmlshield-prefs`) |
+| `fmtBytes(n)` | Human-readable sizes for the KPI row (B/KB/MB) |
+| `markGutterErrorLine(line)` | Paints the live-validation error line red in the input gutter |
 
 ### Browser APIs Used
 

README.md

@@ -4,7 +4,8 @@
 
 XMLShield es una herramienta de formateo y minificación de XML que funciona completamente en tu navegador, sin enviar datos a ningún servidor. Diseñada en respuesta a preocupaciones sobre la seguridad de herramientas online, XMLShield te da control total sobre tus archivos XML sensibles.
 
-[![Version](https://img.shields.io/badge/version-2.0-blue.svg)](https://github.com/luisfemojica/xmlshield/releases)
+[![Version](https://img.shields.io/badge/version-2.7-blue.svg)](https://github.com/luisfemojica/xmlshield/releases)
+[![Tests](https://github.com/luisfemojica/xmlshield/actions/workflows/tests.yml/badge.svg)](https://github.com/luisfemojica/xmlshield/actions/workflows/tests.yml)
 [![License](https://img.shields.io/badge/license-Public%20Domain-green.svg)](LICENSE)
 [![Live Demo](https://img.shields.io/badge/demo-online-brightgreen.svg)](https://luisfemojica.github.io/xmlshield/)
 [![No Dependencies](https://img.shields.io/badge/dependencies-0-orange.svg)](index.html)
@@ -99,8 +100,12 @@ XMLShield es una herramienta de formateo y minificación de XML que funciona com
 | `Ctrl + Enter` | Formatear XML |
 | `Ctrl + M` | Minificar XML |
 | `Ctrl + B` | Cambiar vista (Resaltada/Texto/Árbol) |
+| `Ctrl + O` | Abrir archivo |
+| `Ctrl + F` | Buscar en la salida |
+| `Ctrl + H` | Buscar y reemplazar en la entrada |
 | `Ctrl + L` | Limpiar editores |
 | `Ctrl + G` | Ir a línea específica |
+| `Tab` (en el editor) | Insertar sangría |
 | `Ctrl + Z` | Deshacer (fuera del editor) |
 | `Ctrl + Y` | Rehacer (fuera del editor) |
 
@@ -260,7 +265,19 @@ Refactorización completa con diseño moderno, panel dividido, gradientes, modo
 
 - ✅ Diff/comparación semántica de XMLs (ignora orden de atributos y espacios)
 
-**🎉 Roadmap v2.x completado de principio a fin** — ~1955 líneas | ~72KB (límite duro: 100KB) | 68 tests de regresión.
+### v2.7 - "Refinement" ✅ COMPLETADO
+**Fecha:** Junio 2026
+
+- ✅ Layout móvil real: paneles apilados y página con scroll (antes los editores quedaban inusables)
+- ✅ Botón "📄 Ejemplo" y preset `?demo=1` para onboarding
+- ✅ Formatear/Minificar también embellecen y compactan JSON
+- ✅ La línea del error se marca en rojo en el gutter
+- ✅ Árbol interactivo: contador de hijos y click en un tag → su ruta XPath
+- ✅ Modo comparar acepta abrir/arrastrar archivo para el XML B
+- ✅ KPIs con unidades legibles (B/KB/MB), favicon, atajos Ctrl+O/F/H y Tab con sangría
+- ✅ CI en GitHub Actions: la suite corre headless en cada PR
+
+**🎉 Roadmap v2.x completado de principio a fin** — ~2100 líneas | ~80KB (límite duro: 100KB) | 77 tests de regresión con CI.
 
 ### v3.0+ - "XMLShield Extended" 🔮 2027+
 **Proyecto separado** con features avanzadas:
@@ -374,6 +391,17 @@ Para features más avanzadas, considera XMLShield Extended (v3.0+) o herramienta
 
 ## 📝 Changelog
 
+### v2.7 - Junio 2026
+- ✅ Layout móvil real: paneles apilados a ancho completo y página con scroll
+- ✅ Botón "📄 Ejemplo" en el panel de entrada + preset `?demo=1`
+- ✅ Formatear y Minificar detectan JSON y lo embellecen/compactan
+- ✅ La validación en vivo marca la línea del error en rojo en el gutter
+- ✅ Árbol interactivo: contador de hijos y click en un tag copia su ruta XPath al campo de consulta
+- ✅ El modo comparar acepta abrir o arrastrar archivo para el XML B
+- ✅ KPIs con unidades legibles (B/KB/MB), favicon inline, atajos Ctrl+O/F/H y Tab con sangría
+- ✅ CI con GitHub Actions: los 77 tests corren headless en cada push y PR
+- ✅ Screenshot del README regenerado con la app actual
+
 ### v2.6 - Junio 2026
 - ✅ Diff semántico entre dos XML con rutas tipo XPath y marcadores ➕/➖/✏️ (ignora orden de atributos y espacios)
 - ✅ Scrollbars visibles en editores (el scroll horizontal nativo era casi invisible)

docs/ROADMAP.md

@@ -3,7 +3,7 @@
 
 > **Documento vivo** - Se actualiza cada release
 > **Última revisión:** Junio 2026
-> **Versión actual:** v2.6 — 🎉 Roadmap v2.x COMPLETADO (v2.0 a v2.6)
+> **Versión actual:** v2.7 — 🎉 Roadmap v2.x COMPLETADO (v2.0 a v2.7)
 
 ---
 
@@ -305,6 +305,57 @@ El scroll horizontal nativo era casi invisible (sobre todo en temas oscuros). Ba
 
 ---
 
+### v2.7 - "Refinement" ✅ COMPLETADO
+**Fecha de release:** Junio 2026
+**Esfuerzo:** 1 semana
+**Prioridad:** Alta (pulido post-roadmap, decisión tras el NO-GO de v3.0)
+
+#### Fixes de la auditoría v2.7
+
+##### 1. Layout móvil real ✅ IMPLEMENTADO
+El media query repetía el grid de 2 columnas: en un teléfono los editores quedaban en ~190px inusables y el header (más alto que el viewport) dejaba los paneles sin altura. Ahora los paneles se apilan a ancho completo (70vh cada uno) y la página hace scroll. Controles en dos columnas compactas.
+
+##### 2. KPIs con unidades legibles ✅ IMPLEMENTADO
+`fmtBytes()`: "11.8 MB" en vez de "12345678 bytes".
+
+##### 3. Favicon inline ✅ IMPLEMENTADO
+Emoji 🛡️ como SVG data-URI: sin requests 404 y sin archivos extra.
+
+##### 4. Screenshot del README regenerado ✅ IMPLEMENTADO
+Capturado con Chrome headless usando el nuevo preset `?demo=1&theme=oscuro`.
+
+#### Quick wins de producto
+
+##### 5. Botón "Ejemplo" + preset ?demo=1 ✅ IMPLEMENTADO
+Carga un XML demo (atributos, repetidos, CDATA, comentario) y lo formatea. Onboarding instantáneo.
+
+##### 6. Línea de error marcada en el gutter ✅ IMPLEMENTADO
+La validación en vivo ya conocía línea y columna; ahora la pinta en rojo en el gutter (XML y JSON).
+
+##### 7. Formatear/Minificar JSON ✅ IMPLEMENTADO
+Si la entrada es JSON (ya se detectaba para validar y convertir), Formatear lo embellece y Minificar lo compacta en vez de fallar.
+
+##### 8. Árbol interactivo ✅ IMPLEMENTADO
+Contador de hijos por nodo y click en un nombre de tag → su ruta XPath va al campo de consulta (y al portapapeles). Sinergia directa con XPath de v2.5.
+
+##### 9. Archivo B en modo comparar ✅ IMPLEMENTADO
+El panel derecho acepta arrastrar un archivo y el botón Abrir carga el XML B durante la comparación.
+
+##### 10. Más atajos ✅ IMPLEMENTADO
+Ctrl+O (abrir), Ctrl+F (buscar en salida), Ctrl+H (reemplazar), y Tab inserta sangría en el editor.
+
+#### Infraestructura
+
+##### 11. CI con GitHub Actions ✅ IMPLEMENTADO
+`.github/workflows/tests.yml` + `.github/run-tests.mjs`: la suite completa corre en Chromium headless (Playwright) en cada push a main y cada PR. Badge de estado en el README. Hasta ahora los tests solo corrían a mano.
+
+#### Métricas Alcanzadas v2.7
+- **Tamaño:** ~80KB (dentro del límite duro de 100KB)
+- **Líneas:** ~2100 (bajo el techo de ~2500)
+- **Tests:** 77 casos pasando (9 nuevos) + CI automático
+
+---
+
 ## 🔮 Visión Futura (Post v2.6)
 
 ### v3.0 - "XMLShield Extended" — ❌ NO-GO (decisión: Junio 2026)
@@ -330,6 +381,7 @@ Las dos features de v3.0 que sí cabían en la filosofía (XPath y Diff) ya fuer
 │          │ v2.4 ✅  │          │          │
 │          │ v2.5 ✅  │          │          │
 │          │ v2.6 ✅  │          │          │
+│          │ v2.7 ✅  │          │          │
 └──────────┴──────────┴──────────┴──────────┘
 ```
 
@@ -371,6 +423,12 @@ Las dos features de v3.0 que sí cabían en la filosofía (XPath y Diff) ya fuer
 - [x] Comparación usable para archivos de hasta 5MB (truncado a 1000 diferencias)
 - [x] Archivo final <100KB y <2500 líneas (~72KB, ~1955 líneas)
 
+### v2.7 Success Criteria
+- [x] App usable en móvil (paneles apilados, editores >400px de alto)
+- [x] CI verde en cada push/PR con la suite completa (77 tests)
+- [x] Cada fix/quick win con su test de regresión
+- [x] Archivo final <100KB y <2500 líneas (~80KB, ~2100 líneas)
+
 ---
 
 ## 🚫 Features Descartadas
@@ -395,6 +453,7 @@ Las dos features de v3.0 que sí cabían en la filosofía (XPath y Diff) ya fuer
 | v2.4 | 100% | 9/9 | ~1606 | ~57KB | ✅ Released |
 | v2.5 | 100% | 4/4 | ~1825 | ~66KB | ✅ Released |
 | v2.6 | 100% | 1/1 | ~1955 | ~72KB | ✅ Released |
+| v2.7 | 100% | 11/11 | ~2100 | ~80KB | ✅ Released |
 
 ---
 

docs/SCOPE.md

@@ -130,6 +130,18 @@ XMLShield es una herramienta de formateo y minificación de XML que funciona **1
 
 - ✅ **Diff/comparación semántica de XMLs** — reevaluado y promovido desde v3.0: cupo en ~120 líneas auditables y sirve directamente a los casos de uso primarios #2 y #3 (analistas y sysadmins). Ignora orden de atributos y espacios; reporte con rutas tipo XPath y marcadores ➕/➖/✏️.
 
+#### ⚪ v2.7 (Refinement) ✅ COMPLETADO
+**Estimado:** 1 semana | **Complejidad:** Baja-Media | **Líneas:** +150
+
+Pulido post-roadmap tras el NO-GO de v3.0:
+
+- ✅ **Layout móvil real** (paneles apilados, página con scroll) — el caso de uso móvil existía desde el botón Abrir de v2.4 pero la UI no acompañaba
+- ✅ **Onboarding**: botón Ejemplo + preset `?demo=1`
+- ✅ **Formatear/Minificar JSON** (la entrada JSON ya se detectaba para validar y convertir)
+- ✅ **Línea de error marcada en el gutter**, árbol interactivo con rutas XPath, archivo B en comparar
+- ✅ **KPIs legibles, favicon, más atajos** (Ctrl+O/F/H, Tab con sangría)
+- ✅ **CI con GitHub Actions** (infraestructura dev, no toca el producto)
+
 ---
 
 ## ❌ Fuera del Alcance (v2.x)