executable-stories-formatters 0.2.0 → 0.4.0

package/dist/index.js

@@ -883,20 +883,32 @@ 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() {
-  document.querySelectorAll('.feature, .scenario').forEach(el => {
+  document.querySelectorAll('.feature, .scenario, .trace-view').forEach(el => {
     el.classList.remove('collapsed');
-    const header = el.querySelector('.feature-header, .scenario-header');
+    const header = el.querySelector('.feature-header, .scenario-header, .trace-view-header');
     header?.setAttribute('aria-expanded', 'true');
   });
 }
 
 function collapseAll() {
-  document.querySelectorAll('.feature, .scenario').forEach(el => {
+  document.querySelectorAll('.feature, .scenario, .trace-view').forEach(el => {
     el.classList.add('collapsed');
-    const header = el.querySelector('.feature-header, .scenario-header');
+    const header = el.querySelector('.feature-header, .scenario-header, .trace-view-header');
     header?.setAttribute('aria-expanded', 'false');
   });
 }
@@ -1086,6 +1098,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%);
@@ -1144,6 +1157,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%);
@@ -1192,6 +1206,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%);
   }
@@ -1737,6 +1752,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;
@@ -2413,6 +2434,133 @@ body {
   font-family: inherit;
   background: none;
 }
+
+/* ============================================================================
+   Trace View - OTel span waterfall
+   ============================================================================ */
+.trace-view {
+  margin-top: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  overflow: hidden;
+}
+
+.trace-view-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--card);
+  cursor: pointer;
+  user-select: none;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--foreground);
+  transition: background-color 0.15s ease;
+}
+
+.trace-view-header:hover {
+  background: var(--accordion-header-hover);
+}
+
+.trace-view-count {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  padding: 0.125rem 0.5rem;
+  background: var(--success-light);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+}
+
+.trace-view-content {
+  border-top: 1px solid var(--border);
+  padding: 0.5rem 0.75rem;
+  background: var(--accordion-content-bg);
+}
+
+.trace-view.collapsed .trace-view-content {
+  display: none;
+}
+
+.trace-view-axis {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.625rem;
+  font-family: var(--font-mono);
+  color: var(--muted-foreground);
+  padding-bottom: 0.375rem;
+  margin-bottom: 0.375rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.trace-view-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.1875rem 0;
+  font-size: 0.75rem;
+}
+
+.trace-view-name {
+  width: 35%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-family: var(--font-mono);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--foreground);
+}
+
+.trace-view-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.trace-view-status-ok { background: var(--success); }
+.trace-view-status-error { background: var(--error); }
+.trace-view-status-unset { background: var(--muted-foreground); }
+
+.trace-view-bar-container {
+  flex: 1;
+  position: relative;
+  height: 1.25rem;
+  background: var(--muted);
+  border-radius: 2px;
+}
+
+.trace-view-bar {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  border-radius: 2px;
+  min-width: 2px;
+  display: flex;
+  align-items: center;
+  padding: 0 0.375rem;
+  font-size: 0.625rem;
+  font-family: var(--font-mono);
+  color: white;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.trace-view-bar-ok { background: var(--success); }
+.trace-view-bar-error { background: var(--error); }
+.trace-view-bar-unset { background: var(--muted-foreground); }
+
+@media print {
+  .trace-view.collapsed .trace-view-content {
+    display: block;
+  }
+}
+
 `;
 
 // src/formatters/html/renderers/status.ts
@@ -2657,10 +2805,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}`;
 }
@@ -2672,6 +2821,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;
@@ -2679,6 +2852,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 },
@@ -2699,6 +2885,10 @@ function renderScenario(args, deps) {
       embedScreenshots: deps.embedScreenshots
     }
   );
+  const traceView = deps.renderTraceView(
+    { spans: tc.story.otelSpans },
+    { escapeHtml: deps.escapeHtml }
+  );
   const collapsedClass = deps.startCollapsed ? " collapsed" : "";
   const ariaExpanded = !deps.startCollapsed;
   return `
@@ -2709,7 +2899,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>
@@ -2718,6 +2908,193 @@ function renderScenario(args, deps) {
     ${steps}
     ${error}
     ${attachments}
+    ${traceView}
+  </div>
+</div>`;
+}
+
+// src/formatters/html/renderers/trace-view.ts
+var VALID_STATUSES = /* @__PURE__ */ new Set(["ok", "error", "unset"]);
+var TOOLTIP_MAX_LENGTH = 4096;
+function safeStatus(status) {
+  return VALID_STATUSES.has(status) ? status : "unset";
+}
+function formatDuration(ms) {
+  if (ms >= 1e3) return `${(ms / 1e3).toFixed(2)}s`;
+  return `${ms.toFixed(1)}ms`;
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function normalizeSpans(spans) {
+  const result = [];
+  for (const span of spans) {
+    if (!span || typeof span !== "object") continue;
+    if (typeof span.spanId !== "string" || typeof span.name !== "string") continue;
+    let startTimeMs;
+    let durationMs;
+    if (span.startTimeMs != null && span.durationMs != null) {
+      startTimeMs = span.startTimeMs;
+      durationMs = span.durationMs;
+    } else if (span.startTimeUnixNano != null && span.endTimeUnixNano != null) {
+      startTimeMs = span.startTimeUnixNano / 1e6;
+      durationMs = (span.endTimeUnixNano - span.startTimeUnixNano) / 1e6;
+    } else {
+      continue;
+    }
+    durationMs = Math.max(0, durationMs);
+    if (!isFinite(startTimeMs) || !isFinite(durationMs)) continue;
+    result.push({
+      spanId: span.spanId,
+      parentSpanId: span.parentSpanId,
+      name: span.name,
+      startTimeMs,
+      durationMs,
+      status: safeStatus(span.status),
+      statusMessage: span.statusMessage,
+      attributes: span.attributes
+    });
+  }
+  return result;
+}
+function buildTree(spans) {
+  const byId = /* @__PURE__ */ new Map();
+  for (const span of spans) {
+    let key = span.spanId;
+    if (byId.has(key)) {
+      let suffix = 2;
+      while (byId.has(`${span.spanId}__dup${suffix}`)) suffix++;
+      key = `${span.spanId}__dup${suffix}`;
+    }
+    byId.set(key, { span: { ...span, spanId: key }, children: [], depth: 0 });
+  }
+  const roots = [];
+  for (const node of byId.values()) {
+    const parentId = node.span.parentSpanId;
+    const parent = parentId ? byId.get(parentId) : void 0;
+    if (parent && parent !== node) {
+      parent.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+  for (const node of byId.values()) {
+    node.children.sort((a, b) => a.span.startTimeMs - b.span.startTimeMs);
+  }
+  roots.sort((a, b) => a.span.startTimeMs - b.span.startTimeMs);
+  const visited = /* @__PURE__ */ new Set();
+  function assignDepth(node, depth) {
+    if (visited.has(node.span.spanId)) return;
+    visited.add(node.span.spanId);
+    node.depth = depth;
+    for (const child of node.children) {
+      assignDepth(child, depth + 1);
+    }
+  }
+  for (const root of roots) {
+    assignDepth(root, 0);
+  }
+  for (const node of byId.values()) {
+    if (!visited.has(node.span.spanId)) {
+      node.children = [];
+      roots.push(node);
+      assignDepth(node, 0);
+    }
+  }
+  roots.sort((a, b) => a.span.startTimeMs - b.span.startTimeMs);
+  return roots;
+}
+function flattenTree(roots) {
+  const result = [];
+  function walk(node) {
+    result.push(node);
+    for (const child of node.children) {
+      walk(child);
+    }
+  }
+  for (const root of roots) {
+    walk(root);
+  }
+  return result;
+}
+function buildTooltip(span, escapeHtml2) {
+  const parts = [];
+  parts.push(`${span.name} (${formatDuration(span.durationMs)})`);
+  if (span.statusMessage) {
+    parts.push(`Status: ${span.statusMessage}`);
+  }
+  if (span.attributes) {
+    const keys = Object.keys(span.attributes).sort();
+    for (const key of keys) {
+      const val = span.attributes[key];
+      const formatted = Array.isArray(val) ? `[${val.map((v) => String(v)).join(", ")}]` : String(val);
+      parts.push(`${key}=${formatted}`);
+    }
+  }
+  let text = parts.join("\n");
+  if (text.length > TOOLTIP_MAX_LENGTH) {
+    text = text.slice(0, TOOLTIP_MAX_LENGTH - 3) + "...";
+  }
+  return escapeHtml2(text);
+}
+function renderTraceView(args, deps) {
+  if (!args.spans || args.spans.length === 0) return "";
+  const normalized = normalizeSpans(args.spans);
+  if (normalized.length === 0) return "";
+  const roots = buildTree(normalized);
+  const flat = flattenTree(roots);
+  let minStart = Infinity;
+  let maxEnd = -Infinity;
+  for (const node of flat) {
+    const s = node.span.startTimeMs;
+    const e = s + node.span.durationMs;
+    if (s < minStart) minStart = s;
+    if (e > maxEnd) maxEnd = e;
+  }
+  let totalDuration = maxEnd - minStart;
+  if (totalDuration <= 0) totalDuration = 1;
+  const rows = flat.map((node) => {
+    const { span, depth } = node;
+    const indent = depth * 16;
+    const minWidth = 0.5;
+    let spanLeft = clamp(
+      (span.startTimeMs - minStart) / totalDuration * 100,
+      0,
+      100
+    );
+    if (spanLeft + minWidth > 100) {
+      spanLeft = 100 - minWidth;
+    }
+    const spanWidth = clamp(
+      span.durationMs / totalDuration * 100,
+      minWidth,
+      100 - spanLeft
+    );
+    const tooltip = buildTooltip(span, deps.escapeHtml);
+    const durationLabel = formatDuration(span.durationMs);
+    return `    <div class="trace-view-row">
+      <div class="trace-view-name" style="padding-left: ${indent}px" title="${deps.escapeHtml(span.name)}">
+        <span class="trace-view-status-dot trace-view-status-${span.status}"></span>
+        ${deps.escapeHtml(span.name)}
+      </div>
+      <div class="trace-view-bar-container">
+        <div class="trace-view-bar trace-view-bar-${span.status}" style="left: ${spanLeft.toFixed(2)}%; width: ${spanWidth.toFixed(2)}%" title="${tooltip}">${durationLabel}</div>
+      </div>
+    </div>`;
+  }).join("\n");
+  const axisEnd = formatDuration(maxEnd - minStart);
+  return `<div class="trace-view collapsed">
+  <div class="trace-view-header" role="button" tabindex="0" aria-expanded="false">
+    <span>Spans</span>
+    <span class="trace-view-count">${flat.length}</span>
+    <span class="chevron">&#9660;</span>
+  </div>
+  <div class="trace-view-content">
+    <div class="trace-view-axis">
+      <span>0ms</span>
+      <span>${axisEnd}</span>
+    </div>
+${rows}
   </div>
 </div>`;
 }
@@ -2843,7 +3220,8 @@ function createHtmlFormatter(options = {}) {
   const stepsDeps = {
     escapeHtml,
     getStatusIcon,
-    renderDocs
+    renderDocs,
+    highlightStepParams: (text) => highlightStepParams(text, { escapeHtml })
   };
   const scenarioDeps = {
     escapeHtml,
@@ -2853,6 +3231,7 @@ function createHtmlFormatter(options = {}) {
     renderDocs,
     renderErrorBox: (args, d) => renderErrorBox(args, d),
     renderAttachments: (args, d) => renderAttachments(args, d),
+    renderTraceView: (args, d) => renderTraceView(args, d),
     embedScreenshots: opts.embedScreenshots
   };
   const featureDeps = {
@@ -3145,6 +3524,7 @@ var MarkdownFormatter = class {
       includeSummaryTable: options.includeSummaryTable ?? false,
       permalinkBaseUrl: options.permalinkBaseUrl,
       ticketUrlTemplate: options.ticketUrlTemplate,
+      traceUrlTemplate: options.traceUrlTemplate,
       includeSourceLinks: options.includeSourceLinks ?? true,
       customRenderers: options.customRenderers
     };
@@ -3367,6 +3747,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(" | "));
     }
@@ -5205,7 +5597,7 @@ function readBranchName(cwd = process.cwd()) {
 }
 
 // src/utils/duration.ts
-function formatDuration(ms) {
+function formatDuration2(ms) {
   if (ms < 1e3) {
     return `${Math.round(ms)} ms`;
   }
@@ -5309,6 +5701,31 @@ function detectCI4(env = process.env) {
   return void 0;
 }
 
+// src/utils/otel-detect.ts
+import { createRequire } from "module";
+function getRequire() {
+  const url = import.meta.url ?? (typeof __filename !== "undefined" ? `file://${__filename}` : void 0);
+  if (!url) throw new Error("Cannot determine module URL");
+  return 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",
@@ -5499,6 +5916,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
       }
@@ -5624,6 +6042,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
         });
@@ -5668,7 +6087,7 @@ export {
   deriveStepResults,
   detectCI4 as detectCI,
   findGitDir,
-  formatDuration,
+  formatDuration2 as formatDuration,
   generateRunId,
   generateTestCaseId,
   mergeStepResults,
@@ -5685,7 +6104,9 @@ export {
   readPackageVersion,
   resolveAttachment,
   resolveAttachments,
+  resolveTraceUrl,
   slugify,
+  tryGetActiveOtelContext,
   validateCanonicalRun
 };
 //# sourceMappingURL=index.js.map