@alejandrojca/elmulo-reporter 2.0.0-beta.7 → 2.0.0-beta.9

package/VERSION.json

@@ -1,6 +1,6 @@
 {
   "name": "Elmulo Reporter",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.9",
   "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%;
@@ -798,19 +850,59 @@ button {
   margin: 1rem 0;
 }
 
-.trendHistoryStats span {
-  background: var(--pw-blue-050);
-  border-radius: 999px;
-  color: var(--pw-gray-700);
-  font-size: 0.78rem;
-  padding: 0.45rem 0.65rem;
-}
-
-.trendHistoryStats .passed { color: #11694f; }
-.trendHistoryStats .failed { color: #b42143; }
-.trendHistoryStats .otherErrors { color: #875100; }
-
-.historicalTestList {
+.historicalExecutionCount {
+  background: var(--pw-blue-050);
+  border-radius: 999px;
+  color: var(--pw-gray-700);
+  font-size: 0.78rem;
+  padding: 0.45rem 0.65rem;
+}
+
+.historicalStatusFilters {
+  display: flex;
+  flex: 1 1 420px;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.historicalStatusFilter {
+  --historical-status-color: var(--pw-gray-700);
+  background: color-mix(in srgb, var(--historical-status-color) 7%, var(--pw-white));
+  border: 1px solid color-mix(in srgb, var(--historical-status-color) 55%, var(--pw-gray-200));
+  border-radius: 999px;
+  color: var(--historical-status-color);
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.42rem 0.65rem;
+  transition:
+    background 140ms ease,
+    box-shadow 140ms ease,
+    transform 140ms ease;
+}
+
+.historicalStatusFilter.passed { --historical-status-color: var(--pw-success); }
+.historicalStatusFilter.failed { --historical-status-color: var(--pw-danger); }
+.historicalStatusFilter.environment_error { --historical-status-color: var(--pw-warning); }
+.historicalStatusFilter.precondition_error { --historical-status-color: #e87922; }
+.historicalStatusFilter.outdated_test { --historical-status-color: #7c5ce5; }
+.historicalStatusFilter.reported { --historical-status-color: var(--pw-blue-600); }
+.historicalStatusFilter.skipped,
+.historicalStatusFilter.pending { --historical-status-color: #71859a; }
+
+.historicalStatusFilter:hover,
+.historicalStatusFilter:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--historical-status-color) 18%, transparent);
+  transform: translateY(-1px);
+}
+
+.historicalStatusFilter.active {
+  background: var(--historical-status-color);
+  border-color: var(--historical-status-color);
+  color: #fff;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--historical-status-color) 22%, transparent);
+}
+
+.historicalTestList {
   display: grid;
   gap: 0.55rem;
   max-height: 480px;
@@ -2228,18 +2320,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 +4047,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 +4191,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 +4330,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 +4450,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],
   ];
@@ -201,9 +201,10 @@
     tag: initialUrlState.get("tag") || "all",
     trendStatus: "total",
     trendEnvironment: initialTrendEnvironment,
-    selectedTrendRunId: null,
-    historicalRun: null,
-    historicalRerun: null,
+    selectedTrendRunId: null,
+    historicalRun: null,
+    historicalRerun: null,
+    historicalStatusFilter: "",
     historyJiraId: null,
     historyTestTitle: "",
     historyCurrentTestId: null,
@@ -705,19 +706,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 +742,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")}
     `;
   }
@@ -1099,7 +1120,7 @@
     </div>`;
   }
 
-  function renderHistoricalRun() {
+  function renderHistoricalRun() {
     const historicalRun = state.historicalRun;
     if (!state.selectedTrendRunId) {
       return `<div class="trendHistoryPlaceholder">
@@ -1110,11 +1131,39 @@
       return `<div class="trendHistoryPlaceholder">Cargando resultados históricos…</div>`;
     }
 
-    const tests = historicalRun.tests || [];
-    const statusCount = (status) =>
-      tests.filter((test) => test.status === status).length;
-    const otherErrors = tests.filter((test) =>
-      otherErrorStatuses.has(test.status)).length;
+    const tests = historicalRun.tests || [];
+    const historicalStatusOrder = [
+      "passed",
+      "failed",
+      "environment_error",
+      "precondition_error",
+      "outdated_test",
+      "reported",
+      "skipped",
+      "pending",
+      "unknown",
+    ];
+    const statusCounts = tests.reduce((counts, test) => {
+      const status = String(test.status || "unknown");
+      counts.set(status, (counts.get(status) || 0) + 1);
+      return counts;
+    }, new Map());
+    const visibleStatuses = [...statusCounts.entries()]
+      .sort(([left], [right]) => {
+        const leftIndex = historicalStatusOrder.indexOf(left);
+        const rightIndex = historicalStatusOrder.indexOf(right);
+        return (leftIndex < 0 ? historicalStatusOrder.length : leftIndex) -
+          (rightIndex < 0 ? historicalStatusOrder.length : rightIndex);
+      });
+    if (
+      state.historicalStatusFilter &&
+      !statusCounts.has(state.historicalStatusFilter)
+    ) {
+      state.historicalStatusFilter = "";
+    }
+    const filteredTests = state.historicalStatusFilter
+      ? tests.filter((test) => test.status === state.historicalStatusFilter)
+      : tests;
     const rerun = state.historicalRerun || historicalRun.rerun || {};
     const rerunBusy = ["starting", "running"].includes(rerun.status);
     const rerunLabel = rerun.status === "starting"
@@ -1152,18 +1201,23 @@
           >×</button>
         </div>
       </header>
-      ${rerunFeedback
-        ? `<div class="trendRerunFeedback ${rerun.status === "failed" || rerun.status === "unavailable" ? "error" : "success"}" role="status">${escapeHtml(rerunFeedback)}</div>`
-        : ""}
-      <div class="trendHistoryStats">
-        <span><strong>${tests.length}</strong> ejecuciones</span>
-        <span class="passed"><strong>${statusCount("passed")}</strong> exitosas</span>
-        <span class="failed"><strong>${statusCount("failed")}</strong> fallidas</span>
-        <span class="otherErrors"><strong>${otherErrors}</strong> otros errores</span>
-      </div>
-      <div class="historicalTestList">
-        ${tests.length
-          ? tests.map((test) => `<article class="historicalTestRow">
+      ${rerunFeedback
+        ? `<div class="trendRerunFeedback ${rerun.status === "failed" || rerun.status === "unavailable" ? "error" : "success"}" role="status">${escapeHtml(rerunFeedback)}</div>`
+        : ""}
+      <div class="trendHistoryStats">
+        <span class="historicalExecutionCount"><strong>${tests.length}</strong> ejecuciones</span>
+        <div class="historicalStatusFilters" aria-label="Filtrar pruebas históricas por estado">
+          ${visibleStatuses.map(([status, count]) => `<button
+            class="historicalStatusFilter ${escapeHtml(status)} ${state.historicalStatusFilter === status ? "active" : ""}"
+            type="button"
+            data-historical-status-filter="${escapeHtml(status)}"
+            aria-pressed="${state.historicalStatusFilter === status}"
+          ><strong>${escapeHtml(count)}</strong> ${escapeHtml(statusLabel[status] || status)}</button>`).join("")}
+        </div>
+      </div>
+      <div class="historicalTestList">
+        ${filteredTests.length
+          ? filteredTests.map((test) => `<article class="historicalTestRow">
               <span class="statusDot ${escapeHtml(test.status)}" aria-hidden="true"></span>
               <span>
                 <strong>${escapeHtml(test.title)}</strong>
@@ -1176,7 +1230,7 @@
                 <small>${escapeHtml(formatDuration(test.duration_ms))}</small>
               </span>
             </article>`).join("")
-          : `<div class="emptyState"><strong>Sin resultados</strong><span>Esta corrida no tiene pruebas registradas.</span></div>`}
+          : `<div class="emptyState"><strong>Sin resultados</strong><span>Esta corrida no tiene pruebas registradas.</span></div>`}
       </div>
     </section>`;
   }
@@ -1205,11 +1259,20 @@
     const closeButton = document.querySelector("[data-close-trend-history]");
     if (!closeButton) return;
     closeButton.addEventListener("click", () => {
-      state.selectedTrendRunId = null;
-      state.historicalRun = null;
-      state.historicalRerun = null;
-      renderTrendArea();
-    });
+      state.selectedTrendRunId = null;
+      state.historicalRun = null;
+      state.historicalRerun = null;
+      state.historicalStatusFilter = "";
+      renderTrendArea();
+    });
+    document.querySelectorAll("[data-historical-status-filter]").forEach((button) => {
+      button.addEventListener("click", () => {
+        const status = button.dataset.historicalStatusFilter;
+        state.historicalStatusFilter =
+          state.historicalStatusFilter === status ? "" : status;
+        renderTrendHistoryPanel();
+      });
+    });
     document.querySelector("[data-rerun-trend-report]")?.addEventListener(
       "click",
       startHistoricalRerun,
@@ -1282,10 +1345,11 @@
   function bindTrendEvents() {
     document.querySelectorAll("[data-trend-run-id]").forEach((button) => {
       button.addEventListener("click", async () => {
-        const requestedRunId = button.dataset.trendRunId;
-        state.selectedTrendRunId = requestedRunId;
-        state.historicalRun = null;
-        state.historicalRerun = null;
+        const requestedRunId = button.dataset.trendRunId;
+        state.selectedTrendRunId = requestedRunId;
+        state.historicalRun = null;
+        state.historicalRerun = null;
+        state.historicalStatusFilter = "";
         renderTrendArea();
 
         try {
@@ -1312,9 +1376,10 @@
 
   async function loadTrendEnvironment(environment) {
     state.trendEnvironment = environment;
-    state.selectedTrendRunId = null;
-    state.historicalRun = null;
-    state.historicalRerun = null;
+    state.selectedTrendRunId = null;
+    state.historicalRun = null;
+    state.historicalRerun = null;
+    state.historicalStatusFilter = "";
     const trendContent = document.getElementById("trend-content");
     const trendHistory = document.getElementById("trend-history");
     const trendCounter = document.getElementById("trend-run-count");
@@ -2559,35 +2624,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 +2812,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 +2826,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.7",
+        reporterVersion: "2.0.0-beta.9",
       }),
     ],
   );
@@ -932,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.7";
+  run.reporterVersion = "2.0.0-beta.9";
   run.lifecycle = run.lifecycle || "completed";
   run.source = run.source || {
     branch: process.env.CI_COMMIT_REF_NAME || "",

package/jira.cjs

@@ -303,12 +303,12 @@ async function jiraRequest(config, pathname, options = {}) {
 }
 
 async function findMatchingIssues(config, fingerprint) {
-  const jql = [
+  const conditions = [
     `project = "${config.projectKey}"`,
     `issuetype = "${config.issueTypeName}"`,
     `labels = "${fingerprint}"`,
-    "ORDER BY created DESC",
   ].join(" AND ");
+  const jql = `${conditions} ORDER BY created DESC`;
   const query = new URLSearchParams({
     jql,
     fields: "summary,status,labels",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alejandrojca/elmulo-reporter",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.9",
   "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.7",
+      reporterVersion: "2.0.0-beta.9",
       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.7",
+        version: "2.0.0-beta.9",
         schemaVersion: 3,
       });
       return;