@alejandrojca/elmulo-reporter 2.0.0-beta.6 → 2.0.0-beta.8

package/VERSION.json

@@ -1,6 +1,6 @@
 {
   "name": "Elmulo Reporter",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "schemaVersion": 3,
   "source": "elmulo-reporter",
   "results": "elmulo-results",

package/assets/app.css

@@ -27,9 +27,12 @@
   box-sizing: border-box;
 }
 
-body {
-  margin: 0;
-}
+html,
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
 
 html[data-theme="dark"],
 html[data-theme="dark"] * {
@@ -258,10 +261,54 @@ button {
 .metricCard.passed { --metric-color: var(--pw-success); }
 .metricCard.failed { --metric-color: var(--pw-danger); }
 .metricCard.skipped { --metric-color: var(--pw-gray-300); }
-.metricCard.flaky { --metric-color: var(--pw-warning); }
-.metricCard.otherErrors { --metric-color: #d18a00; }
-
-.metricCard.activeFilter {
+.metricCard.flaky { --metric-color: var(--pw-warning); }
+.metricCard.otherErrors { --metric-color: #d18a00; }
+
+.metricCard.failedBreakdown {
+  display: grid;
+  gap: 0.9rem;
+  grid-column: span 2;
+  grid-template-columns: minmax(90px, 0.7fr) minmax(210px, 1.3fr);
+}
+
+.failureMetricTotal {
+  align-self: center;
+}
+
+.failureMetricBreakdown {
+  align-content: center;
+  display: grid;
+  gap: 0.35rem;
+  margin: 0;
+}
+
+.failureMetricBreakdown > div {
+  --breakdown-color: var(--pw-danger);
+  align-items: center;
+  border: 1px solid color-mix(in srgb, var(--breakdown-color) 62%, var(--pw-gray-200));
+  border-radius: 999px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.25rem 0.55rem;
+}
+
+.failureMetricBreakdown .reported { --breakdown-color: var(--pw-blue-600); }
+.failureMetricBreakdown .otherErrors { --breakdown-color: var(--pw-warning); }
+
+.failureMetricBreakdown dt,
+.failureMetricBreakdown dd {
+  color: var(--pw-gray-700);
+  font-size: 0.68rem;
+  font-weight: 800;
+  margin: 0;
+}
+
+.failureMetricBreakdown dd {
+  color: var(--breakdown-color);
+  font-size: 0.82rem;
+}
+
+.metricCard.activeFilter {
   border-color: var(--metric-color, var(--pw-blue-700));
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--metric-color, var(--pw-blue-700)) 18%, transparent);
 }
@@ -363,10 +410,15 @@ button {
   padding: 0.55rem 0.65rem;
 }
 
-.statusLegendItem.empty {
-  opacity: 0.56;
-}
-
+.statusLegendItem.empty {
+  opacity: 0.56;
+}
+
+.statusLegendItem:not(.empty) {
+  border-color: var(--status-color);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-color) 24%, transparent);
+}
+
 .statusLegendDot {
   background: var(--status-color);
   border-radius: 50%;
@@ -2228,18 +2280,35 @@ html[data-theme="dark"] .exportPdfButton {
   grid-template-columns: repeat(5, 1fr);
 }
 
-.attentionCard {
-  background: var(--pw-blue-050);
-  border: 1px solid var(--pw-gray-200);
-  border-left: 4px solid var(--attention-color, var(--pw-blue-700));
+.attentionCard {
+  background: var(--pw-blue-050);
+  border: 1px solid var(--pw-gray-200);
+  border-left: 4px solid var(--attention-color, var(--pw-blue-700));
   border-radius: 14px;
   color: var(--pw-gray-900);
   display: grid;
-  gap: 0.25rem;
-  padding: 0.8rem;
-  text-align: left;
-}
-
+  gap: 0.25rem;
+  padding: 0.8rem;
+  text-align: left;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.attentionCard:not(:disabled):hover,
+.attentionCard:not(:disabled):focus-visible {
+  border-color: var(--attention-color, var(--pw-blue-700));
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, var(--attention-color, var(--pw-blue-700)) 24%, transparent),
+    0 12px 24px color-mix(in srgb, var(--attention-color, var(--pw-blue-700)) 14%, transparent);
+  transform: translateY(-2px);
+}
+
+.attentionCard:not(:disabled):focus-visible {
+  outline: none;
+}
+
 .attentionCard.failed,
 .attentionCard.no_comment,
 .attentionCard.no_ticket {
@@ -3938,15 +4007,23 @@ pre {
 
 /* Elmulo V2 application navigation */
 
-.appFrame {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  min-height: 100vh;
-}
-
-.workspaceShell {
-  min-width: 0;
-}
+.appFrame {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  height: 100vh;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.workspaceShell {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  height: 100vh;
+  height: 100dvh;
+  min-width: 0;
+  overflow: hidden;
+}
 
 .sidebar {
   background:
@@ -4074,23 +4151,40 @@ pre {
   position: relative;
 }
 
-.sidebarIcon {
-  align-items: center;
-  background: rgb(255 255 255 / 7%);
-  border-radius: 9px;
-  display: inline-flex;
-  font-size: 1rem;
-  font-weight: 800;
-  height: 34px;
-  justify-content: center;
-  width: 34px;
-}
-
-.sidebarLink.active .sidebarIcon {
-  background: #dff8f8;
-  color: #075f76;
-}
-
+.sidebarIcon {
+  align-items: center;
+  background: rgb(255 255 255 / 7%);
+  border-radius: 9px;
+  display: inline-flex;
+  height: 34px;
+  justify-content: center;
+  width: 34px;
+}
+
+.sidebarIconImage {
+  filter: brightness(0) invert(1);
+  height: 21px;
+  object-fit: contain;
+  opacity: 0.82;
+  transition: filter 140ms ease, opacity 140ms ease, transform 140ms ease;
+  width: 21px;
+}
+
+.sidebarLink:hover .sidebarIconImage {
+  opacity: 1;
+  transform: scale(1.06);
+}
+
+.sidebarLink.active .sidebarIcon {
+  background: #dff8f8;
+  color: #075f76;
+}
+
+.sidebarLink.active .sidebarIconImage {
+  filter: brightness(0) saturate(100%) invert(29%) sepia(43%) saturate(1271%) hue-rotate(147deg) brightness(91%) contrast(96%);
+  opacity: 1;
+}
+
 .sidebarLabel {
   font-size: 0.85rem;
   font-weight: 700;
@@ -4196,11 +4290,16 @@ pre {
   width: 38px;
 }
 
-.appShell {
-  margin: 0 auto;
-  max-width: 1600px;
-  padding: 1.5rem 2rem 4rem;
-}
+.appShell {
+  height: 100%;
+  margin: 0 auto;
+  max-width: 1600px;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  padding: 1.5rem 2rem 4rem;
+  width: 100%;
+}
 
 .workspaceView[hidden] {
   display: none !important;
@@ -4311,11 +4410,12 @@ pre {
   transform: translateY(-1px);
 }
 
-.overviewLaunchGrid button > span {
-  color: var(--pw-teal);
-  font-size: 1.15rem;
-  font-weight: 800;
-}
+.overviewLaunchIcon {
+  filter: brightness(0) saturate(100%) invert(61%) sepia(78%) saturate(623%) hue-rotate(132deg) brightness(87%) contrast(82%);
+  height: 24px;
+  object-fit: contain;
+  width: 24px;
+}
 
 .overviewLaunchGrid small {
   color: var(--pw-gray-700);

package/assets/app.js

@@ -42,13 +42,13 @@
   const pdfSections = [
     ["summary", "Resumen ejecutivo", "Indicadores principales y evaluación general.", true],
     ["statusDistribution", "Distribución por estado", "Resultados automáticos y clasificaciones manuales.", true],
-    ["runContext", "Contexto de la corrida", "Ambiente, fecha, navegador, tags, rama y pipeline.", true],
+    ["runContext", "Contexto de la corrida", "Ambiente, fecha, navegador, tags, rama y pipeline.", false],
     ["features", "Resultados por Feature", "Totales y estados agrupados por Feature.", true],
     ["issues", "Problemas que requieren seguimiento", "Fallos, Jira, comentarios y tickets asociados.", true],
-    ["previousComparison", "Comparación con la corrida anterior", "Variaciones de resultados y duración.", true],
-    ["recentHistory", "Historial reciente", "Últimas ejecuciones del mismo ambiente.", true],
-    ["flaky", "Pruebas inestables", "Casos que pasaron después de uno o más reintentos.", true],
-    ["recurrentFailures", "Fallos recurrentes", "Pruebas con fallos repetidos en el historial.", true],
+    ["previousComparison", "Comparación con la corrida anterior", "Variaciones de resultados y duración.", false],
+    ["recentHistory", "Historial reciente", "Últimas ejecuciones del mismo ambiente.", false],
+    ["flaky", "Pruebas inestables", "Casos que pasaron después de uno o más reintentos.", false],
+    ["recurrentFailures", "Fallos recurrentes", "Pruebas con fallos repetidos en el historial.", false],
     ["slowTests", "Pruebas más lentas", "Ranking histórico de pruebas por duración.", false],
     ["recommendation", "Recomendación y pendientes", "Evaluación final, fallos sin comentario y sin ticket.", true],
   ];
@@ -705,19 +705,32 @@
     dialog.showModal();
   }
 
-  function metric(label, value, className = "") {
-    return `<article class="metricCard ${className}">
-      <span>${escapeHtml(label)}</span>
-      <strong>${value}</strong>
-    </article>`;
-  }
-
-  function summaryMarkup() {
-    const effectiveStatuses = run.tests.map(effectiveTestStatus);
-    const statusCount = (status) =>
-      effectiveStatuses.filter((value) => value === status).length;
-    const otherErrorsCount = effectiveStatuses.filter((status) =>
-      otherErrorStatuses.has(status)).length;
+  function metric(label, value, className = "") {
+    return `<article class="metricCard ${className}">
+      <span>${escapeHtml(label)}</span>
+      <strong>${value}</strong>
+    </article>`;
+  }
+
+  function failureMetric(total, deltaMarkup, breakdown, className = "") {
+    return `<article class="metricCard failed failedBreakdown ${className}">
+      <div class="failureMetricTotal">
+        <span>Fallidas</span>
+        <strong>${escapeHtml(total)}${deltaMarkup}</strong>
+      </div>
+      <dl class="failureMetricBreakdown" aria-label="Desglose de pruebas fallidas">
+        ${breakdown.map(([label, value, status]) => `<div class="${escapeHtml(status)}">
+          <dt>${escapeHtml(label)}</dt>
+          <dd>${escapeHtml(value)}</dd>
+        </div>`).join("")}
+      </dl>
+    </article>`;
+  }
+
+  function summaryMarkup() {
+    const effectiveStatuses = run.tests.map(effectiveTestStatus);
+    const statusCount = (status) =>
+      effectiveStatuses.filter((value) => value === status).length;
     const activeClass = (status, baseClass = status) =>
       `${baseClass} ${state.status === status ? "activeFilter" : ""}`.trim();
     const previousRun = [...(run.trends?.runs || [])]
@@ -728,26 +741,33 @@
       const difference = Number(current) - Number(previous || 0);
       if (!difference) return '<small class="metricDelta neutral">Sin cambios</small>';
       return `<small class="metricDelta ${difference > 0 ? "up" : "down"}">${difference > 0 ? "+" : ""}${difference} vs. anterior</small>`;
-    };
-    const passedCount = statusCount("passed");
-    const failedCount = statusCount("failed");
-    const previousOtherErrors = previousRun
-      ? Number(previousRun.environment_error || 0) +
-        Number(previousRun.precondition_error || 0) +
-        Number(previousRun.outdated_test || 0) +
-        Number(previousRun.reported || 0)
-      : null;
+    };
+    const passedCount = statusCount("passed");
+    const automaticFailures = run.tests.filter((test) => test.status === "failed");
+    const failedCount = automaticFailures.length;
+    const pendingFailures = automaticFailures.filter((test) =>
+      effectiveTestStatus(test) === "failed").length;
+    const reportedFailures = automaticFailures.filter((test) =>
+      effectiveTestStatus(test) === "reported").length;
+    const otherFailures = automaticFailures.filter((test) => {
+      const status = effectiveTestStatus(test);
+      return otherErrorStatuses.has(status) && status !== "reported";
+    }).length;
 
     return `
       ${metric("Casos", groupTestsByCase(run.tests).length)}
       ${metric("Ejecuciones", run.tests.length)}
       ${metric("Exitosas", `${passedCount}${delta(passedCount, previousRun?.passed)}`, activeClass("passed"))}
-      ${metric("Fallidas", `${failedCount}${delta(failedCount, previousRun?.failed)}`, activeClass("failed"))}
-      ${metric(
-        "Otros errores",
-        `${otherErrorsCount}${delta(otherErrorsCount, previousOtherErrors)}`,
-        activeClass("other_errors", "otherErrors"),
-      )}
+      ${failureMetric(
+        failedCount,
+        delta(failedCount, previousRun?.failed),
+        [
+          ["Pendientes", pendingFailures, "pending"],
+          ["Reportadas", reportedFailures, "reported"],
+          ["Otros errores", otherFailures, "otherErrors"],
+        ],
+        activeClass("failed"),
+      )}
       ${metric("Inestables", run.tests.filter((test) => test.flaky).length, "flaky")}
     `;
   }
@@ -2559,35 +2579,35 @@
   }
 
   const viewMetadata = {
-    overview: {
-      label: "Resumen",
-      description: "Estado de la corrida y señales que requieren atención.",
-      icon: "▣",
-    },
+    overview: {
+      label: "Resumen",
+      description: "Estado de la corrida y señales que requieren atención.",
+      icon: "summary.png",
+    },
     executions: {
       label: "Ejecuciones",
       description: "Tendencias, historial y comparación entre corridas.",
-      icon: "▶",
+      icon: "executions.png",
     },
     quality: {
       label: "Calidad",
       description: "Estabilidad, fallos recurrentes y rendimiento histórico.",
-      icon: "◇",
+      icon: "quality.png",
     },
     analysis: {
       label: "Análisis",
       description: "Bandeja de trabajo para investigar y clasificar fallos.",
-      icon: "!",
+      icon: "analysis.png",
     },
     tests: {
       label: "Pruebas",
       description: "Explorador de casos, pasos, evidencias e historial por Jira.",
-      icon: "☑",
+      icon: "tests.png",
     },
     preferences: {
       label: "Preferencias",
       description: "Apariencia y configuración local del espacio de trabajo.",
-      icon: "⚙",
+      icon: "preferences.png",
     },
   };
 
@@ -2747,7 +2767,9 @@
           aria-current="${state.view === key ? "page" : "false"}"
           title="${escapeHtml(item.label)}"
         >
-          <span class="sidebarIcon" aria-hidden="true">${item.icon}</span>
+          <span class="sidebarIcon" aria-hidden="true">
+            <img class="sidebarIconImage" src="assets/menu-icons/${escapeHtml(item.icon)}" alt="">
+          </span>
           <span class="sidebarLabel">${escapeHtml(item.label)}</span>
           ${badges[key] ? `<span class="sidebarBadge">${escapeHtml(badges[key])}</span>` : ""}
         </button>`).join("")}
@@ -2759,20 +2781,22 @@
     </aside>`;
   }
 
-  function overviewLaunchpadMarkup() {
-    const failed = run.tests.filter((test) => effectiveTestStatus(test) === "failed");
-    const withoutComment = failed.filter((test) => !annotationFor(test).comment).length;
-    return `<section class="overviewLaunchpad" aria-labelledby="overview-next-title">
+  function overviewLaunchpadMarkup() {
+    const failed = run.tests.filter((test) => effectiveTestStatus(test) === "failed");
+    const withoutComment = failed.filter((test) => !annotationFor(test).comment).length;
+    const launchIcon = (view) =>
+      `<img class="overviewLaunchIcon" src="assets/menu-icons/${escapeHtml(viewMetadata[view].icon)}" alt="">`;
+    return `<section class="overviewLaunchpad" aria-labelledby="overview-next-title">
       <header>
         <div><p class="eyebrow">Explorar</p><h2 id="overview-next-title">Continuá el análisis</h2></div>
         <span>Cada área conserva el ambiente, los filtros y la prueba seleccionada.</span>
-      </header>
-      <div class="overviewLaunchGrid">
-        <button type="button" data-nav-view="executions"><span>▶</span><strong>Ejecuciones</strong><small>${escapeHtml(run.trends?.totalRuns || 0)} corridas disponibles</small></button>
-        <button type="button" data-nav-view="quality"><span>◇</span><strong>Calidad histórica</strong><small>Estabilidad, recurrencia y tiempos</small></button>
-        <button type="button" data-nav-view="analysis"><span>!</span><strong>Análisis pendiente</strong><small>${withoutComment} fallos sin comentario</small></button>
-        <button type="button" data-nav-view="tests"><span>☑</span><strong>Explorar pruebas</strong><small>${run.tests.length} ejecuciones en la corrida</small></button>
-      </div>
+      </header>
+      <div class="overviewLaunchGrid">
+        <button type="button" data-nav-view="executions">${launchIcon("executions")}<strong>Ejecuciones</strong><small>${escapeHtml(run.trends?.totalRuns || 0)} corridas disponibles</small></button>
+        <button type="button" data-nav-view="quality">${launchIcon("quality")}<strong>Calidad histórica</strong><small>Estabilidad, recurrencia y tiempos</small></button>
+        <button type="button" data-nav-view="analysis">${launchIcon("analysis")}<strong>Análisis pendiente</strong><small>${withoutComment} fallos sin comentario</small></button>
+        <button type="button" data-nav-view="tests">${launchIcon("tests")}<strong>Explorar pruebas</strong><small>${run.tests.length} ejecuciones en la corrida</small></button>
+      </div>
     </section>`;
   }
 

package/finalize.cjs

@@ -435,7 +435,7 @@ function persistRun(database, run) {
         system: run.system || {},
         source: run.source || {},
         execution: run.execution || null,
-        reporterVersion: "2.0.0-beta.6",
+        reporterVersion: "2.0.0-beta.8",
       }),
     ],
   );
@@ -873,19 +873,27 @@ function buildHtml(run) {
 `;
 }
 
-function copyStaticAssets(reportDir) {
-  // Assets belong to the reporter package, not to the consuming Cypress project.
-  const sourceDir = path.join(__dirname, "assets");
-  const destinationDir = path.join(reportDir, "assets");
-  ensureDir(destinationDir);
-  for (const filename of fs.readdirSync(sourceDir)) {
-    fs.copyFileSync(
-      path.join(sourceDir, filename),
-      path.join(destinationDir, filename),
-    );
-  }
-}
-
+function copyDirectoryContents(sourceDir, destinationDir) {
+  ensureDir(destinationDir);
+  for (const entry of fs.readdirSync(sourceDir, { withFileTypes: true })) {
+    const sourcePath = path.join(sourceDir, entry.name);
+    const destinationPath = path.join(destinationDir, entry.name);
+    if (entry.isDirectory()) {
+      copyDirectoryContents(sourcePath, destinationPath);
+    } else if (entry.isFile()) {
+      fs.copyFileSync(sourcePath, destinationPath);
+    }
+  }
+}
+
+function copyStaticAssets(reportDir) {
+  // Assets belong to the reporter package, not to the consuming Cypress project.
+  copyDirectoryContents(
+    path.join(__dirname, "assets"),
+    path.join(reportDir, "assets"),
+  );
+}
+
 function mergeHttpManifest(run, runDir) {
   const manifest = readJson(path.join(runDir, "http", "manifest.json"), []);
   if (!Array.isArray(manifest) || !manifest.length) return;
@@ -924,7 +932,7 @@ async function finalizeRun(options = {}) {
   if (!run) throw new Error(`No se encontró ${rawPath}`);
 
   run.schemaVersion = DATABASE_SCHEMA_VERSION;
-  run.reporterVersion = "2.0.0-beta.6";
+  run.reporterVersion = "2.0.0-beta.8";
   run.lifecycle = run.lifecycle || "completed";
   run.source = run.source || {
     branch: process.env.CI_COMMIT_REF_NAME || "",
@@ -966,7 +974,9 @@ module.exports = {
   buildTrends,
   buildQualityAnalytics,
   canonicalTestIdentity,
-  compareRuns,
+  compareRuns,
+  copyDirectoryContents,
+  copyStaticAssets,
   enrichRunTests,
   finalizeRun,
   loadAnnotations,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alejandrojca/elmulo-reporter",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "description": "Reporter independiente para ejecuciones de Cypress con dashboard, historial SQLite y evidencias.",
   "type": "commonjs",
   "main": "plugin.cjs",

package/plugin.cjs

@@ -57,7 +57,7 @@ function registerElmuloReporter(on, config, options = {}) {
         "unknown",
       tagExpression: config.env?.TAGS || process.env.CYPRESS_TAGS || "",
       lifecycle: "running",
-      reporterVersion: "2.0.0-beta.6",
+      reporterVersion: "2.0.0-beta.8",
       execution: executionScript
         ? { runner: "npm", script: executionScript, args: executionArgs }
         : null,

package/server.cjs

@@ -182,7 +182,7 @@ async function serveReport(options = {}) {
     if (request.method === "GET" && url.pathname === "/api/health") {
       sendJson(response, 200, {
         ok: true,
-        version: "2.0.0-beta.6",
+        version: "2.0.0-beta.8",
         schemaVersion: 3,
       });
       return;