executable-stories-formatters 0.3.0 → 0.4.0

package/dist/adapters.d.cts

@@ -1 +1 @@
-export { J as JestAdapterOptions, i as JestAggregatedResult, j as JestFileResult, k as JestTestResult, P as PlaywrightAdapterOptions, l as PlaywrightAnnotation, m as PlaywrightAttachment, n as PlaywrightError, o as PlaywrightLocation, p as PlaywrightStatus, q as PlaywrightTestCase, r as PlaywrightTestResult, x as StoryFileReport, V as VitestAdapterOptions, y as VitestSerializedError, z as VitestState, A as VitestTestCase, B as VitestTestModule, C as VitestTestResult, e as adaptJestRun, f as adaptPlaywrightRun, g as adaptVitestRun } from './index-DCJ0NvAp.cjs';
+export { J as JestAdapterOptions, i as JestAggregatedResult, j as JestFileResult, k as JestTestResult, P as PlaywrightAdapterOptions, m as PlaywrightAnnotation, n as PlaywrightAttachment, o as PlaywrightError, p as PlaywrightLocation, q as PlaywrightStatus, r as PlaywrightTestCase, s as PlaywrightTestResult, y as StoryFileReport, V as VitestAdapterOptions, z as VitestSerializedError, A as VitestState, B as VitestTestCase, C as VitestTestModule, E as VitestTestResult, e as adaptJestRun, f as adaptPlaywrightRun, g as adaptVitestRun } from './index-DyeUWfYK.cjs';

package/dist/adapters.d.ts

@@ -1 +1 @@
-export { J as JestAdapterOptions, i as JestAggregatedResult, j as JestFileResult, k as JestTestResult, P as PlaywrightAdapterOptions, l as PlaywrightAnnotation, m as PlaywrightAttachment, n as PlaywrightError, o as PlaywrightLocation, p as PlaywrightStatus, q as PlaywrightTestCase, r as PlaywrightTestResult, x as StoryFileReport, V as VitestAdapterOptions, y as VitestSerializedError, z as VitestState, A as VitestTestCase, B as VitestTestModule, C as VitestTestResult, e as adaptJestRun, f as adaptPlaywrightRun, g as adaptVitestRun } from './index-DCJ0NvAp.js';
+export { J as JestAdapterOptions, i as JestAggregatedResult, j as JestFileResult, k as JestTestResult, P as PlaywrightAdapterOptions, m as PlaywrightAnnotation, n as PlaywrightAttachment, o as PlaywrightError, p as PlaywrightLocation, q as PlaywrightStatus, r as PlaywrightTestCase, s as PlaywrightTestResult, y as StoryFileReport, V as VitestAdapterOptions, z as VitestSerializedError, A as VitestState, B as VitestTestCase, C as VitestTestModule, E as VitestTestResult, e as adaptJestRun, f as adaptPlaywrightRun, g as adaptVitestRun } from './index-DyeUWfYK.js';

package/dist/cli.js

@@ -1101,17 +1101,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');
   });
 }
@@ -2638,6 +2638,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
@@ -2962,6 +3088,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 `
@@ -2981,6 +3111,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>`;
 }
@@ -3117,6 +3434,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 = {