executable-stories-formatters 0.3.0 → 0.4.0

package/dist/{index-DCJ0NvAp.d.cts → index-DyeUWfYK.d.cts}

@@ -1,3 +1,25 @@
+/**
+ * OTel span types for trace waterfall rendering.
+ *
+ * Structurally compatible with autotel's SerializedSpan
+ * and raw OTel nanosecond formats. No import dependency on autotel.
+ */
+type OtelAttributeValue = string | number | boolean | string[] | number[] | boolean[];
+interface OtelSpan {
+    spanId: string;
+    parentSpanId?: string;
+    name: string;
+    /** Preferred: epoch-based milliseconds (from autotel's SerializedSpan) */
+    startTimeMs?: number;
+    durationMs?: number;
+    /** Compatibility: raw OTel nanosecond timestamps */
+    startTimeUnixNano?: number;
+    endTimeUnixNano?: number;
+    status: "ok" | "error" | "unset";
+    statusMessage?: string;
+    attributes?: Record<string, OtelAttributeValue>;
+}
+
 /**
  * Story types — the shared vocabulary for all framework adapters.
  *
@@ -5,6 +27,7 @@
  * They now live in formatters so every adapter can import them
  * from the same place that defines RawRun (the output contract).
  */
+
 /** BDD step keywords for scenario documentation */
 type StepKeyword = "Given" | "When" | "Then" | "And" | "But";
 /** Step execution mode for docs rendering */
@@ -103,6 +126,8 @@ interface StoryMeta {
     docs?: DocEntry[];
     /** Order in which story.init() was called (for source ordering) */
     sourceOrder?: number;
+    /** OTel spans from autotel for trace waterfall rendering */
+    otelSpans?: OtelSpan[];
 }
 /** Key used to store StoryMeta in test metadata */
 declare const STORY_META_KEY = "story";
@@ -375,4 +400,4 @@ interface PlaywrightAdapterOptions {
  */
 declare function adaptPlaywrightRun(testResults: Array<[PlaywrightTestCase, PlaywrightTestResult]>, options?: PlaywrightAdapterOptions): RawRun;
 
-export { type VitestTestCase as A, type VitestTestModule as B, type VitestTestResult as C, type DocEntry as D, type JestAdapterOptions as J, type PlaywrightAdapterOptions as P, type RawStatus as R, type StoryMeta as S, type VitestAdapterOptions as V, type StoryStep as a, type RawAttachment as b, type RawRun as c, type RawCIInfo as d, adaptJestRun as e, adaptPlaywrightRun as f, adaptVitestRun as g, type DocPhase as h, type JestAggregatedResult as i, type JestFileResult as j, type JestTestResult as k, type PlaywrightAnnotation as l, type PlaywrightAttachment as m, type PlaywrightError as n, type PlaywrightLocation as o, type PlaywrightStatus as p, type PlaywrightTestCase as q, type PlaywrightTestResult as r, type RawStepEvent as s, type RawTestCase as t, STORY_META_KEY as u, type StepKeyword as v, type StepMode as w, type StoryFileReport as x, type VitestSerializedError as y, type VitestState as z };
+export { type VitestState as A, type VitestTestCase as B, type VitestTestModule as C, type DocEntry as D, type VitestTestResult as E, type JestAdapterOptions as J, type OtelAttributeValue as O, type PlaywrightAdapterOptions as P, type RawStatus as R, type StoryMeta as S, type VitestAdapterOptions as V, type StoryStep as a, type RawAttachment as b, type RawRun as c, type RawCIInfo as d, adaptJestRun as e, adaptPlaywrightRun as f, adaptVitestRun as g, type DocPhase as h, type JestAggregatedResult as i, type JestFileResult as j, type JestTestResult as k, type OtelSpan as l, type PlaywrightAnnotation as m, type PlaywrightAttachment as n, type PlaywrightError as o, type PlaywrightLocation as p, type PlaywrightStatus as q, type PlaywrightTestCase as r, type PlaywrightTestResult as s, type RawStepEvent as t, type RawTestCase as u, STORY_META_KEY as v, type StepKeyword as w, type StepMode as x, type StoryFileReport as y, type VitestSerializedError as z };

package/dist/{index-DCJ0NvAp.d.ts → index-DyeUWfYK.d.ts}

@@ -1,3 +1,25 @@
+/**
+ * OTel span types for trace waterfall rendering.
+ *
+ * Structurally compatible with autotel's SerializedSpan
+ * and raw OTel nanosecond formats. No import dependency on autotel.
+ */
+type OtelAttributeValue = string | number | boolean | string[] | number[] | boolean[];
+interface OtelSpan {
+    spanId: string;
+    parentSpanId?: string;
+    name: string;
+    /** Preferred: epoch-based milliseconds (from autotel's SerializedSpan) */
+    startTimeMs?: number;
+    durationMs?: number;
+    /** Compatibility: raw OTel nanosecond timestamps */
+    startTimeUnixNano?: number;
+    endTimeUnixNano?: number;
+    status: "ok" | "error" | "unset";
+    statusMessage?: string;
+    attributes?: Record<string, OtelAttributeValue>;
+}
+
 /**
  * Story types — the shared vocabulary for all framework adapters.
  *
@@ -5,6 +27,7 @@
  * They now live in formatters so every adapter can import them
  * from the same place that defines RawRun (the output contract).
  */
+
 /** BDD step keywords for scenario documentation */
 type StepKeyword = "Given" | "When" | "Then" | "And" | "But";
 /** Step execution mode for docs rendering */
@@ -103,6 +126,8 @@ interface StoryMeta {
     docs?: DocEntry[];
     /** Order in which story.init() was called (for source ordering) */
     sourceOrder?: number;
+    /** OTel spans from autotel for trace waterfall rendering */
+    otelSpans?: OtelSpan[];
 }
 /** Key used to store StoryMeta in test metadata */
 declare const STORY_META_KEY = "story";
@@ -375,4 +400,4 @@ interface PlaywrightAdapterOptions {
  */
 declare function adaptPlaywrightRun(testResults: Array<[PlaywrightTestCase, PlaywrightTestResult]>, options?: PlaywrightAdapterOptions): RawRun;
 
-export { type VitestTestCase as A, type VitestTestModule as B, type VitestTestResult as C, type DocEntry as D, type JestAdapterOptions as J, type PlaywrightAdapterOptions as P, type RawStatus as R, type StoryMeta as S, type VitestAdapterOptions as V, type StoryStep as a, type RawAttachment as b, type RawRun as c, type RawCIInfo as d, adaptJestRun as e, adaptPlaywrightRun as f, adaptVitestRun as g, type DocPhase as h, type JestAggregatedResult as i, type JestFileResult as j, type JestTestResult as k, type PlaywrightAnnotation as l, type PlaywrightAttachment as m, type PlaywrightError as n, type PlaywrightLocation as o, type PlaywrightStatus as p, type PlaywrightTestCase as q, type PlaywrightTestResult as r, type RawStepEvent as s, type RawTestCase as t, STORY_META_KEY as u, type StepKeyword as v, type StepMode as w, type StoryFileReport as x, type VitestSerializedError as y, type VitestState as z };
+export { type VitestState as A, type VitestTestCase as B, type VitestTestModule as C, type DocEntry as D, type VitestTestResult as E, type JestAdapterOptions as J, type OtelAttributeValue as O, type PlaywrightAdapterOptions as P, type RawStatus as R, type StoryMeta as S, type VitestAdapterOptions as V, type StoryStep as a, type RawAttachment as b, type RawRun as c, type RawCIInfo as d, adaptJestRun as e, adaptPlaywrightRun as f, adaptVitestRun as g, type DocPhase as h, type JestAggregatedResult as i, type JestFileResult as j, type JestTestResult as k, type OtelSpan as l, type PlaywrightAnnotation as m, type PlaywrightAttachment as n, type PlaywrightError as o, type PlaywrightLocation as p, type PlaywrightStatus as q, type PlaywrightTestCase as r, type PlaywrightTestResult as s, type RawStepEvent as t, type RawTestCase as u, STORY_META_KEY as v, type StepKeyword as w, type StepMode as x, type StoryFileReport as y, type VitestSerializedError as z };

package/dist/index.cjs

@@ -48,7 +48,7 @@ __export(src_exports, {
   deriveStepResults: () => deriveStepResults,
   detectCI: () => detectCI4,
   findGitDir: () => findGitDir,
-  formatDuration: () => formatDuration,
+  formatDuration: () => formatDuration2,
   generateRunId: () => generateRunId,
   generateTestCaseId: () => generateTestCaseId,
   mergeStepResults: () => mergeStepResults,
@@ -970,17 +970,17 @@ function initCollapse() {
 }
 
 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');
   });
 }
@@ -2507,6 +2507,132 @@ body {
   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
@@ -2831,6 +2957,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 `
@@ -2850,6 +2980,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>`;
 }
@@ -2986,6 +3303,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 = {
@@ -5351,7 +5669,7 @@ function readBranchName(cwd = process.cwd()) {
 }
 
 // src/utils/duration.ts
-function formatDuration(ms) {
+function formatDuration2(ms) {
   if (ms < 1e3) {
     return `${Math.round(ms)} ms`;
   }