executable-stories-formatters 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -65,7 +65,9 @@ __export(src_exports, {
   readPackageVersion: () => readPackageVersion,
   resolveAttachment: () => resolveAttachment,
   resolveAttachments: () => resolveAttachments,
+  resolveTraceUrl: () => resolveTraceUrl,
   slugify: () => slugify,
+  tryGetActiveOtelContext: () => tryGetActiveOtelContext,
   validateCanonicalRun: () => validateCanonicalRun
 });
 module.exports = __toCommonJS(src_exports);
@@ -953,6 +955,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() {
@@ -1156,6 +1170,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%);
@@ -1214,6 +1229,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%);
@@ -1262,6 +1278,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%);
   }
@@ -1807,6 +1824,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;
@@ -2483,6 +2506,7 @@ body {
   font-family: inherit;
   background: none;
 }
+
 `;
 
 // src/formatters/html/renderers/status.ts
@@ -2727,10 +2751,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}`;
 }
@@ -2742,6 +2767,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;
@@ -2749,6 +2798,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 },
@@ -2779,7 +2841,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>
@@ -2913,7 +2975,8 @@ function createHtmlFormatter(options = {}) {
   const stepsDeps = {
     escapeHtml,
     getStatusIcon,
-    renderDocs
+    renderDocs,
+    highlightStepParams: (text) => highlightStepParams(text, { escapeHtml })
   };
   const scenarioDeps = {
     escapeHtml,
@@ -3215,6 +3278,7 @@ var MarkdownFormatter = class {
       includeSummaryTable: options.includeSummaryTable ?? false,
       permalinkBaseUrl: options.permalinkBaseUrl,
       ticketUrlTemplate: options.ticketUrlTemplate,
+      traceUrlTemplate: options.traceUrlTemplate,
       includeSourceLinks: options.includeSourceLinks ?? true,
       customRenderers: options.customRenderers
     };
@@ -3437,6 +3501,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(" | "));
     }
@@ -5379,6 +5455,32 @@ function detectCI4(env = process.env) {
   return void 0;
 }
 
+// src/utils/otel-detect.ts
+var import_node_module = require("module");
+var import_meta2 = {};
+function getRequire() {
+  const url = import_meta2.url ?? (typeof __filename !== "undefined" ? `file://${__filename}` : void 0);
+  if (!url) throw new Error("Cannot determine module URL");
+  return (0, import_node_module.createRequire)(url);
+}
+function tryGetActiveOtelContext() {
+  try {
+    const api = getRequire()("@opentelemetry/api");
+    const span = api.trace?.getActiveSpan?.();
+    if (!span) return void 0;
+    const ctx = span.spanContext?.();
+    if (!ctx?.traceId || ctx.traceId === "00000000000000000000000000000000")
+      return void 0;
+    return { traceId: ctx.traceId, spanId: ctx.spanId };
+  } catch {
+    return void 0;
+  }
+}
+function resolveTraceUrl(template, traceId) {
+  if (!template) return void 0;
+  return template.replace(/\{traceId\}/g, traceId);
+}
+
 // src/index.ts
 var FORMAT_EXTENSIONS = {
   markdown: ".md",
@@ -5569,6 +5671,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
       }
@@ -5694,6 +5797,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
         });
@@ -5756,7 +5860,9 @@ function normalizePlaywrightResults(testResults, adapterOptions, canonicalizeOpt
   readPackageVersion,
   resolveAttachment,
   resolveAttachments,
+  resolveTraceUrl,
   slugify,
+  tryGetActiveOtelContext,
   validateCanonicalRun
 });
 //# sourceMappingURL=index.cjs.map