executable-stories-formatters 0.1.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Jag Reehal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -119,7 +119,7 @@ const generator = new ReportGenerator({
 
 | Format | Description | File Extension |
 | --- | --- | --- |
-| `html` | Interactive HTML report with search and screenshots | `.html` |
+| `html` | Interactive HTML report with search, screenshots, step parameter highlighting (quoted strings and numbers), syntax-highlighted code blocks, Mermaid diagrams, and Markdown in doc sections | `.html` |
 | `markdown` | Markdown user-story documentation | `.md` |
 | `junit` | JUnit XML for CI integration | `.junit.xml` |
 | `cucumber-json` | Cucumber JSON for tooling compatibility | `.cucumber.json` |

package/dist/cli.js

@@ -896,50 +896,162 @@ function initTheme() {
 }
 `;
 var JS_CORE = `
+// Filter state
+var activeTags = new Set();
+var activeStatus = null;
+
 // Search functionality
 function initSearch() {
-  const input = document.querySelector('.search-input');
+  var input = document.querySelector('.search-input');
   if (!input) return;
 
-  let debounceTimer;
-  input.addEventListener('input', (e) => {
+  var debounceTimer;
+  input.addEventListener('input', function() {
     clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => {
-      filterScenarios(e.target.value.toLowerCase().trim());
+    debounceTimer = setTimeout(function() {
+      applyAllFilters();
     }, 150);
   });
 
   // Clear search on Escape
-  input.addEventListener('keydown', (e) => {
+  input.addEventListener('keydown', function(e) {
     if (e.key === 'Escape') {
       e.target.value = '';
-      filterScenarios('');
+      applyAllFilters();
     }
   });
 }
 
-function filterScenarios(query) {
-  const features = document.querySelectorAll('.feature');
+// Tag filter
+function initTagFilter() {
+  document.querySelectorAll('.tag-pill').forEach(function(pill) {
+    pill.addEventListener('click', function() {
+      var tag = pill.dataset.tag;
+      if (activeTags.has(tag)) {
+        activeTags.delete(tag);
+        pill.classList.remove('active');
+      } else {
+        activeTags.add(tag);
+        pill.classList.add('active');
+      }
+      updateClearButton();
+      applyAllFilters();
+    });
+  });
 
-  features.forEach(feature => {
-    const scenarios = feature.querySelectorAll('.scenario');
-    let visibleCount = 0;
+  var clearBtn = document.querySelector('.tag-bar-clear');
+  if (clearBtn) {
+    clearBtn.addEventListener('click', function() {
+      activeTags.clear();
+      document.querySelectorAll('.tag-pill.active').forEach(function(p) { p.classList.remove('active'); });
+      updateClearButton();
+      applyAllFilters();
+    });
+  }
+}
 
-    scenarios.forEach(scenario => {
-      const title = scenario.querySelector('.scenario-title')?.textContent?.toLowerCase() || '';
-      const tags = Array.from(scenario.querySelectorAll('.tag')).map(t => t.textContent.toLowerCase());
-      const steps = Array.from(scenario.querySelectorAll('.step-text')).map(s => s.textContent.toLowerCase());
+function updateClearButton() {
+  var clearBtn = document.querySelector('.tag-bar-clear');
+  if (clearBtn) {
+    clearBtn.style.display = activeTags.size > 0 ? '' : 'none';
+  }
+}
 
-      const matches = !query ||
-        title.includes(query) ||
-        tags.some(t => t.includes(query)) ||
-        steps.some(s => s.includes(query));
+// Status filter (clickable summary cards)
+function initStatusFilter() {
+  document.querySelectorAll('.summary-card').forEach(function(card) {
+    card.style.cursor = 'pointer';
+    if (!card.classList.contains('passed') && !card.classList.contains('failed') && !card.classList.contains('skipped')) {
+      card.addEventListener('click', function() {
+        activeStatus = null;
+        document.querySelectorAll('.summary-card').forEach(function(c) { c.classList.remove('status-active'); });
+        applyAllFilters();
+      });
+      return;
+    }
+    card.addEventListener('click', function() {
+      var status = card.classList.contains('passed') ? 'passed' :
+                   card.classList.contains('failed') ? 'failed' : 'skipped';
+      if (activeStatus === status) {
+        activeStatus = null;
+        card.classList.remove('status-active');
+      } else {
+        activeStatus = status;
+        document.querySelectorAll('.summary-card').forEach(function(c) { c.classList.remove('status-active'); });
+        card.classList.add('status-active');
+      }
+      applyAllFilters();
+    });
+  });
+}
 
-      scenario.style.display = matches ? '' : 'none';
-      if (matches) visibleCount++;
+// Unified filter: composes search + tags + status
+function applyAllFilters() {
+  var searchInput = document.querySelector('.search-input');
+  var searchQuery = searchInput ? searchInput.value.toLowerCase().trim() : '';
+  var features = document.querySelectorAll('.feature');
+  var visibleCount = 0;
+  var totalCount = 0;
+
+  features.forEach(function(feature) {
+    var scenarios = feature.querySelectorAll('.scenario');
+    var featureVisible = 0;
+
+    scenarios.forEach(function(scenario) {
+      totalCount++;
+      var title = (scenario.querySelector('.scenario-title') || {}).textContent || '';
+      title = title.toLowerCase();
+      var tags = Array.from(scenario.querySelectorAll('.scenario-meta .tag')).map(function(t) { return t.textContent.toLowerCase(); });
+      var steps = Array.from(scenario.querySelectorAll('.step-text')).map(function(s) { return s.textContent.toLowerCase(); });
+      var statusEl = scenario.querySelector('.status-icon');
+      var status = statusEl && statusEl.classList.contains('status-passed') ? 'passed' :
+                   statusEl && statusEl.classList.contains('status-failed') ? 'failed' :
+                   statusEl && statusEl.classList.contains('status-skipped') ? 'skipped' : 'pending';
+
+      var matchesSearch = !searchQuery ||
+        title.includes(searchQuery) ||
+        tags.some(function(t) { return t.includes(searchQuery); }) ||
+        steps.some(function(s) { return s.includes(searchQuery); });
+
+      var matchesTags = activeTags.size === 0 ||
+        tags.some(function(t) { return activeTags.has(t); });
+
+      var matchesStatus = !activeStatus ||
+        status === activeStatus ||
+        (activeStatus === 'skipped' && status === 'pending');
+
+      var visible = matchesSearch && matchesTags && matchesStatus;
+      scenario.style.display = visible ? '' : 'none';
+      if (visible) { visibleCount++; featureVisible++; }
     });
 
-    feature.style.display = visibleCount > 0 ? '' : 'none';
+    feature.style.display = featureVisible > 0 ? '' : 'none';
+  });
+
+  updateFilterResults(visibleCount, totalCount);
+}
+
+function updateFilterResults(visible, total) {
+  var el = document.querySelector('.filter-results');
+  if (!el) return;
+  var searchInput = document.querySelector('.search-input');
+  var isFiltering = activeTags.size > 0 || activeStatus ||
+    (searchInput && searchInput.value.trim().length > 0);
+  el.style.display = isFiltering ? '' : 'none';
+  var vc = el.querySelector('.visible-count');
+  var tc = el.querySelector('.total-count');
+  if (vc) vc.textContent = visible;
+  if (tc) tc.textContent = total;
+}
+
+// Keyboard shortcuts
+function initKeyboardShortcuts() {
+  document.addEventListener('keydown', function(e) {
+    if (e.key === '/' && !e.ctrlKey && !e.metaKey && e.target.tagName !== 'INPUT') {
+      e.preventDefault();
+      var input = document.querySelector('.search-input');
+      if (input) input.focus();
+    }
   });
 }
 
@@ -974,6 +1086,18 @@ function initCollapse() {
       }
     });
   });
+
+  document.querySelectorAll('.trace-view-header').forEach(header => {
+    header.addEventListener('click', () => {
+      toggleCollapse(header, header.closest('.trace-view'));
+    });
+    header.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleCollapse(header, header.closest('.trace-view'));
+      }
+    });
+  });
 }
 
 function expandAll() {
@@ -1024,6 +1148,9 @@ function generateScript(options) {
     initCalls.push("initTheme();");
   }
   initCalls.push("initSearch();");
+  initCalls.push("initTagFilter();");
+  initCalls.push("initStatusFilter();");
+  initCalls.push("initKeyboardShortcuts();");
   initCalls.push("initCollapse();");
   const initScript = `
 // Initialize on load
@@ -1174,6 +1301,7 @@ var CSS_STYLES = `
   --tag-bg: hsl(145 55% 95%);
   --tag-color: hsl(145 63% 30%);
   --tag-border: hsl(145 55% 85%);
+  --step-param-color: hsl(220 70% 50%);
 
   /* Accordion/Collapsible styling */
   --accordion-header-hover: hsl(0 0% 98%);
@@ -1232,6 +1360,7 @@ var CSS_STYLES = `
   --tag-bg: hsl(145 35% 14%);
   --tag-color: hsl(145 63% 60%);
   --tag-border: hsl(145 35% 22%);
+  --step-param-color: hsl(220 70% 70%);
 
   /* Accordion/Collapsible styling */
   --accordion-header-hover: hsl(0 0% 11%);
@@ -1280,6 +1409,7 @@ var CSS_STYLES = `
     --tag-bg: hsl(145 35% 14%);
     --tag-color: hsl(145 63% 60%);
     --tag-border: hsl(145 35% 22%);
+    --step-param-color: hsl(220 70% 70%);
     --accordion-header-hover: hsl(0 0% 11%);
     --accordion-content-bg: hsl(0 0% 7%);
   }
@@ -1507,6 +1637,98 @@ body {
 }
 .summary-card.pending .value { color: var(--pending); }
 
+/* ============================================================================
+   Tag Filter Bar
+   ============================================================================ */
+.tag-bar {
+  margin-bottom: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.tag-bar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.tag-bar-label {
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted-foreground);
+  font-weight: 500;
+}
+
+.tag-bar-clear {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius);
+  transition: all 0.15s ease;
+}
+
+.tag-bar-clear:hover {
+  background: var(--muted);
+}
+
+.tag-bar-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.tag-pill {
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.625rem;
+  background: var(--tag-bg);
+  color: var(--tag-color);
+  border: 1px solid var(--tag-border);
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.tag-pill:hover {
+  background: var(--success-border);
+}
+
+.tag-pill.active {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+}
+
+/* ============================================================================
+   Summary Card Status Filter
+   ============================================================================ */
+.summary-card.status-active {
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
+}
+
+/* ============================================================================
+   Filter Results Counter
+   ============================================================================ */
+.filter-results {
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--muted-foreground);
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+
 /* ============================================================================
    Feature Sections - shadcn accordion style
    ============================================================================ */
@@ -1733,6 +1955,12 @@ body {
   color: var(--foreground);
 }
 
+.step-param {
+  font-style: italic;
+  font-weight: 500;
+  color: var(--step-param-color);
+}
+
 .step-duration {
   color: var(--muted-foreground);
   font-size: 0.6875rem;
@@ -1894,8 +2122,10 @@ body {
     padding: 0;
   }
 
-  .header-actions {
-    display: none;
+  .header-actions,
+  .tag-bar,
+  .filter-results {
+    display: none !important;
   }
 
   .feature,
@@ -2407,6 +2637,7 @@ body {
   font-family: inherit;
   background: none;
 }
+
 `;
 
 // src/formatters/html/renderers/status.ts
@@ -2469,6 +2700,28 @@ function renderSummary(args, _deps) {
 </div>`;
 }
 
+// src/formatters/html/renderers/tag-bar.ts
+function renderTagBar(args, deps) {
+  const { tags, totalScenarios } = args;
+  if (tags.length === 0) return "";
+  const pills = tags.map(
+    (tag) => `<button type="button" class="tag-pill" data-tag="${deps.escapeHtml(tag)}">${deps.escapeHtml(tag)}</button>`
+  ).join("\n      ");
+  return `
+<div class="tag-bar">
+  <div class="tag-bar-header">
+    <span class="tag-bar-label">Filter by tag</span>
+    <button type="button" class="tag-bar-clear" style="display:none">Clear</button>
+  </div>
+  <div class="tag-bar-pills">
+    ${pills}
+  </div>
+</div>
+<div class="filter-results" style="display:none">
+  Showing <span class="visible-count">0</span> of <span class="total-count">${totalScenarios}</span> scenarios
+</div>`;
+}
+
 // src/formatters/html/renderers/error-box.ts
 function renderErrorBox(args, deps) {
   const body = args.stack != null ? `${deps.escapeHtml(args.message)}
@@ -2629,10 +2882,11 @@ function renderStep(step, stepResult, index, deps) {
   const isContinuation = CONTINUATION_KEYWORDS.includes(keywordTrimmed);
   const stepClass = isContinuation ? "step continuation" : "step";
   const stepDocs = deps.renderDocs(step.docs, "step-docs");
+  const textHtml = deps.highlightStepParams ? deps.highlightStepParams(step.text) : deps.escapeHtml(step.text);
   return `<div class="${stepClass}">
   <span class="step-status ${statusClass}">${statusIcon}</span>
   <span class="step-keyword">${deps.escapeHtml(step.keyword)}</span>
-  <span class="step-text">${deps.escapeHtml(step.text)}</span>
+  <span class="step-text">${textHtml}</span>
   <span class="step-duration">${duration}</span>
 </div>${stepDocs}`;
 }
@@ -2644,6 +2898,30 @@ function renderSteps(args, deps) {
   return `<div class="steps">${stepsHtml}</div>`;
 }
 
+// src/formatters/html/renderers/step-params.ts
+var STEP_PARAM_PATTERN = /"[^"]*"|(?<![\w.\-])\d+(?:\.\d+)?(?![\w.\-])/g;
+function highlightStepParams(text, deps) {
+  const matches = Array.from(text.matchAll(STEP_PARAM_PATTERN));
+  if (matches.length === 0) {
+    return deps.escapeHtml(text);
+  }
+  let result = "";
+  let lastIndex = 0;
+  for (const match of matches) {
+    const matchStart = match.index;
+    const matchEnd = matchStart + match[0].length;
+    if (matchStart > lastIndex) {
+      result += deps.escapeHtml(text.slice(lastIndex, matchStart));
+    }
+    result += `<span class="step-param">${deps.escapeHtml(match[0])}</span>`;
+    lastIndex = matchEnd;
+  }
+  if (lastIndex < text.length) {
+    result += deps.escapeHtml(text.slice(lastIndex));
+  }
+  return result;
+}
+
 // src/formatters/html/renderers/scenario.ts
 function renderScenario(args, deps) {
   const { tc } = args;
@@ -2651,6 +2929,19 @@ function renderScenario(args, deps) {
   const statusClass = `status-${tc.status}`;
   const duration = tc.durationMs > 0 ? `${(tc.durationMs / 1e3).toFixed(2)}s` : "";
   const tags = tc.tags.map((t) => `<span class="tag">${deps.escapeHtml(t)}</span>`).join("");
+  const otelMeta = tc.story.meta?.otel;
+  let traceBadge = "";
+  if (otelMeta?.traceId) {
+    const shortId = otelMeta.traceId.slice(0, 16);
+    const traceLink = tc.story.docs?.find(
+      (d) => d.kind === "link" && d.label === "View Trace"
+    );
+    if (traceLink) {
+      traceBadge = `<a class="tag trace-tag" href="${deps.escapeHtml(traceLink.url)}" title="${deps.escapeHtml(otelMeta.traceId)}" target="_blank" rel="noopener">${deps.escapeHtml(shortId)}\u2026</a>`;
+    } else {
+      traceBadge = `<span class="tag trace-tag" title="${deps.escapeHtml(otelMeta.traceId)}">${deps.escapeHtml(shortId)}\u2026</span>`;
+    }
+  }
   const storyDocs = deps.renderDocs(tc.story.docs, "story-docs");
   const steps = deps.renderSteps(
     { steps: tc.story.steps, stepResults: tc.stepResults },
@@ -2681,7 +2972,7 @@ function renderScenario(args, deps) {
         <span class="status-icon ${statusClass}">${statusIcon}</span>
         <span class="scenario-name">${deps.escapeHtml(tc.story.scenario)}</span>
       </div>
-      <div class="scenario-meta">${tags}</div>
+      <div class="scenario-meta">${tags}${traceBadge}</div>
     </div>
     <span class="scenario-duration">${duration}</span>
   </div>
@@ -2768,6 +3059,15 @@ function buildBody(args, deps) {
       deps.summaryDeps
     )
   );
+  const allTags = [
+    ...new Set(run.testCases.flatMap((tc) => tc.tags))
+  ].sort();
+  parts.push(
+    deps.renderTagBar(
+      { tags: allTags, totalScenarios: total },
+      deps.tagBarDeps
+    )
+  );
   const byFile = groupBy(run.testCases, (tc) => tc.sourceFile);
   for (const [file, testCases] of byFile) {
     parts.push(
@@ -2806,7 +3106,8 @@ function createHtmlFormatter(options = {}) {
   const stepsDeps = {
     escapeHtml,
     getStatusIcon,
-    renderDocs
+    renderDocs,
+    highlightStepParams: (text) => highlightStepParams(text, { escapeHtml })
   };
   const scenarioDeps = {
     escapeHtml,
@@ -2824,12 +3125,15 @@ function createHtmlFormatter(options = {}) {
     renderScenario: (args) => renderScenario(args, scenarioDeps),
     scenarioDeps
   };
+  const tagBarDeps = { escapeHtml };
   const bodyDeps = {
     renderMetaInfo,
     renderSummary,
+    renderTagBar,
     renderFeature,
     metaDeps: { escapeHtml },
     summaryDeps: {},
+    tagBarDeps,
     featureDeps
   };
   return {
@@ -3105,6 +3409,7 @@ var MarkdownFormatter = class {
       includeSummaryTable: options.includeSummaryTable ?? false,
       permalinkBaseUrl: options.permalinkBaseUrl,
       ticketUrlTemplate: options.ticketUrlTemplate,
+      traceUrlTemplate: options.traceUrlTemplate,
       includeSourceLinks: options.includeSourceLinks ?? true,
       customRenderers: options.customRenderers
     };
@@ -3327,6 +3632,18 @@ var MarkdownFormatter = class {
         meta.push(`Tickets: ${tc.story.tickets.map((t) => `\`${t}\``).join(", ")}`);
       }
     }
+    const otelMeta = tc.story.meta?.otel;
+    if (otelMeta?.traceId) {
+      const traceTemplate = this.options.traceUrlTemplate;
+      if (traceTemplate) {
+        const url = traceTemplate.replace(/\{traceId\}/g, otelMeta.traceId);
+        meta.push(
+          `Trace: [${otelMeta.traceId.slice(0, 16)}\u2026](${url})`
+        );
+      } else {
+        meta.push(`Trace: \`${otelMeta.traceId}\``);
+      }
+    }
     if (meta.length > 0) {
       lines.push(meta.join(" | "));
     }
@@ -4881,6 +5198,7 @@ var ReportGenerator = class {
         includeSummaryTable: options.markdown?.includeSummaryTable ?? false,
         permalinkBaseUrl: options.markdown?.permalinkBaseUrl,
         ticketUrlTemplate: options.markdown?.ticketUrlTemplate,
+        traceUrlTemplate: options.markdown?.traceUrlTemplate,
         includeSourceLinks: options.markdown?.includeSourceLinks ?? true,
         customRenderers: options.markdown?.customRenderers
       }
@@ -5006,6 +5324,7 @@ var ReportGenerator = class {
           includeSummaryTable: this.options.markdown.includeSummaryTable,
           permalinkBaseUrl: this.options.markdown.permalinkBaseUrl,
           ticketUrlTemplate: this.options.markdown.ticketUrlTemplate,
+          traceUrlTemplate: this.options.markdown.traceUrlTemplate,
           includeSourceLinks: this.options.markdown.includeSourceLinks,
           customRenderers: this.options.markdown.customRenderers
         });