executable-stories-formatters 0.2.0 → 0.3.0

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

@@ -1086,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() {
@@ -1289,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%);
@@ -1347,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%);
@@ -1395,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%);
   }
@@ -1940,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;
@@ -2616,6 +2637,7 @@ body {
   font-family: inherit;
   background: none;
 }
+
 `;
 
 // src/formatters/html/renderers/status.ts
@@ -2860,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}`;
 }
@@ -2875,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;
@@ -2882,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 },
@@ -2912,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>
@@ -3046,7 +3106,8 @@ function createHtmlFormatter(options = {}) {
   const stepsDeps = {
     escapeHtml,
     getStatusIcon,
-    renderDocs
+    renderDocs,
+    highlightStepParams: (text) => highlightStepParams(text, { escapeHtml })
   };
   const scenarioDeps = {
     escapeHtml,
@@ -3348,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
     };
@@ -3570,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(" | "));
     }
@@ -5124,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
       }
@@ -5249,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
         });