executable-stories-formatters 0.7.12 → 0.7.14

package/dist/{index-C0OOaaiK.d.cts → index-fqrm5-Xr.d.cts}

@@ -1,3 +1,27 @@
+/**
+ * Typed CI provider and canonical CI info.
+ *
+ * RawCIInfo.name = legacy transport string (kept for backward compat + schema).
+ * CIInfo.displayName = canonical display name for downstream consumers.
+ *
+ * All downstream code (HTML meta, notifications, history) uses CIInfo via mappers.
+ */
+
+type CIProvider = "github" | "gitlab" | "circleci" | "jenkins" | "azure" | "buildkite" | "travis" | "unknown";
+interface CIInfo {
+    provider: CIProvider;
+    displayName: string;
+    url?: string;
+    buildNumber?: string;
+    branch?: string;
+    commitSha?: string;
+    prNumber?: string;
+}
+/** Convert RawCIInfo (legacy transport) to canonical CIInfo. */
+declare function toCIInfo(raw?: RawCIInfo): CIInfo | undefined;
+/** Convert canonical CIInfo back to RawCIInfo (for serialization). */
+declare function toRawCIInfo(ci?: CIInfo): RawCIInfo | undefined;
+
 /**
  * OTel span types for trace waterfall rendering.
  *
@@ -175,6 +199,7 @@ interface RawAttachment {
 /** Raw step event from framework (if available) */
 interface RawStepEvent {
     index?: number;
+    stepId?: string;
     title?: string;
     status?: RawStatus;
     durationMs?: number;
@@ -248,30 +273,6 @@ interface RawRun {
     ci?: RawCIInfo;
 }
 
-/**
- * Typed CI provider and canonical CI info.
- *
- * RawCIInfo.name = legacy transport string (kept for backward compat + schema).
- * CIInfo.displayName = canonical display name for downstream consumers.
- *
- * All downstream code (HTML meta, notifications, history) uses CIInfo via mappers.
- */
-
-type CIProvider = "github" | "gitlab" | "circleci" | "jenkins" | "azure" | "buildkite" | "travis" | "unknown";
-interface CIInfo {
-    provider: CIProvider;
-    displayName: string;
-    url?: string;
-    buildNumber?: string;
-    branch?: string;
-    commitSha?: string;
-    prNumber?: string;
-}
-/** Convert RawCIInfo (legacy transport) to canonical CIInfo. */
-declare function toCIInfo(raw?: RawCIInfo): CIInfo | undefined;
-/** Convert canonical CIInfo back to RawCIInfo (for serialization). */
-declare function toRawCIInfo(ci?: CIInfo): RawCIInfo | undefined;
-
 /**
  * Jest Adapter - Layer 1.
  *
@@ -400,6 +401,15 @@ interface PlaywrightTestResult {
     errors: PlaywrightError[];
     attachments: PlaywrightAttachment[];
     retry: number;
+    /** Optional step events if caller captures Playwright step timing. */
+    stepEvents?: Array<{
+        index?: number;
+        stepId?: string;
+        title?: string;
+        status?: RawStatus;
+        durationMs?: number;
+        errorMessage?: string;
+    }>;
 }
 /** Playwright test case annotation */
 interface PlaywrightAnnotation {

package/dist/{index-C0OOaaiK.d.ts → index-fqrm5-Xr.d.ts}

@@ -1,3 +1,27 @@
+/**
+ * Typed CI provider and canonical CI info.
+ *
+ * RawCIInfo.name = legacy transport string (kept for backward compat + schema).
+ * CIInfo.displayName = canonical display name for downstream consumers.
+ *
+ * All downstream code (HTML meta, notifications, history) uses CIInfo via mappers.
+ */
+
+type CIProvider = "github" | "gitlab" | "circleci" | "jenkins" | "azure" | "buildkite" | "travis" | "unknown";
+interface CIInfo {
+    provider: CIProvider;
+    displayName: string;
+    url?: string;
+    buildNumber?: string;
+    branch?: string;
+    commitSha?: string;
+    prNumber?: string;
+}
+/** Convert RawCIInfo (legacy transport) to canonical CIInfo. */
+declare function toCIInfo(raw?: RawCIInfo): CIInfo | undefined;
+/** Convert canonical CIInfo back to RawCIInfo (for serialization). */
+declare function toRawCIInfo(ci?: CIInfo): RawCIInfo | undefined;
+
 /**
  * OTel span types for trace waterfall rendering.
  *
@@ -175,6 +199,7 @@ interface RawAttachment {
 /** Raw step event from framework (if available) */
 interface RawStepEvent {
     index?: number;
+    stepId?: string;
     title?: string;
     status?: RawStatus;
     durationMs?: number;
@@ -248,30 +273,6 @@ interface RawRun {
     ci?: RawCIInfo;
 }
 
-/**
- * Typed CI provider and canonical CI info.
- *
- * RawCIInfo.name = legacy transport string (kept for backward compat + schema).
- * CIInfo.displayName = canonical display name for downstream consumers.
- *
- * All downstream code (HTML meta, notifications, history) uses CIInfo via mappers.
- */
-
-type CIProvider = "github" | "gitlab" | "circleci" | "jenkins" | "azure" | "buildkite" | "travis" | "unknown";
-interface CIInfo {
-    provider: CIProvider;
-    displayName: string;
-    url?: string;
-    buildNumber?: string;
-    branch?: string;
-    commitSha?: string;
-    prNumber?: string;
-}
-/** Convert RawCIInfo (legacy transport) to canonical CIInfo. */
-declare function toCIInfo(raw?: RawCIInfo): CIInfo | undefined;
-/** Convert canonical CIInfo back to RawCIInfo (for serialization). */
-declare function toRawCIInfo(ci?: CIInfo): RawCIInfo | undefined;
-
 /**
  * Jest Adapter - Layer 1.
  *
@@ -400,6 +401,15 @@ interface PlaywrightTestResult {
     errors: PlaywrightError[];
     attachments: PlaywrightAttachment[];
     retry: number;
+    /** Optional step events if caller captures Playwright step timing. */
+    stepEvents?: Array<{
+        index?: number;
+        stepId?: string;
+        title?: string;
+        status?: RawStatus;
+        durationMs?: number;
+        errorMessage?: string;
+    }>;
 }
 /** Playwright test case annotation */
 interface PlaywrightAnnotation {

package/dist/index.cjs

@@ -158,6 +158,7 @@ function deriveStepResults(steps, scenarioStatus, error) {
   if (scenarioStatus === "passed") {
     return steps.map((_, index) => ({
       index,
+      stepId: steps[index].id,
       status: "passed",
       durationMs: 0
     }));
@@ -165,6 +166,7 @@ function deriveStepResults(steps, scenarioStatus, error) {
   if (scenarioStatus === "skipped" || scenarioStatus === "pending") {
     return steps.map((_, index) => ({
       index,
+      stepId: steps[index].id,
       status: scenarioStatus,
       durationMs: 0
     }));
@@ -172,16 +174,17 @@ function deriveStepResults(steps, scenarioStatus, error) {
   const failingIndex = findFailingStepIndex(steps, error);
   return steps.map((_, index) => {
     if (index < failingIndex) {
-      return { index, status: "passed", durationMs: 0 };
+      return { index, stepId: steps[index].id, status: "passed", durationMs: 0 };
     } else if (index === failingIndex) {
       return {
         index,
+        stepId: steps[index].id,
         status: "failed",
         durationMs: 0,
         errorMessage: error?.message
       };
     } else {
-      return { index, status: "skipped", durationMs: 0 };
+      return { index, stepId: steps[index].id, status: "skipped", durationMs: 0 };
     }
   });
 }
@@ -203,18 +206,23 @@ function mergeStepResults(derived, events) {
     return derived;
   }
   const actualByIndex = /* @__PURE__ */ new Map();
+  const actualByStepId = /* @__PURE__ */ new Map();
   for (const event of events) {
     if (event.index !== void 0) {
       actualByIndex.set(event.index, event);
     }
+    if (event.stepId) {
+      actualByStepId.set(event.stepId, event);
+    }
   }
   return derived.map((step) => {
-    const actual = actualByIndex.get(step.index);
+    const actual = (step.stepId ? actualByStepId.get(step.stepId) : void 0) ?? actualByIndex.get(step.index);
     if (!actual) {
       return step;
     }
     return {
       index: step.index,
+      stepId: step.stepId ?? actual.stepId,
       status: normalizeStepStatus(actual.status) ?? step.status,
       durationMs: actual.durationMs ?? step.durationMs,
       errorMessage: actual.errorMessage ?? step.errorMessage
@@ -348,6 +356,7 @@ function canonicalizeTestCase(raw, options, projectRoot) {
     derivedSteps,
     raw.stepEvents?.map((e) => ({
       index: e.index,
+      stepId: e.stepId,
       status: e.status,
       durationMs: e.durationMs,
       errorMessage: e.errorMessage
@@ -369,6 +378,7 @@ function canonicalizeTestCase(raw, options, projectRoot) {
     sourceFile,
     sourceLine: raw.sourceLine ?? 1,
     status,
+    rawStatus: raw.status,
     durationMs: raw.durationMs ?? 0,
     errorMessage: raw.error?.message,
     errorStack: raw.error?.stack,
@@ -736,19 +746,34 @@ ${doc.markdown}`,
           }
         };
       }
-      case "tag":
+      case "custom":
+        if (doc.type === "visual" && doc.data && typeof doc.data === "object") {
+          const data = doc.data;
+          const status = typeof data.status === "string" ? data.status : "unknown";
+          const lines = [`Visual Check (${status})`];
+          if (typeof data.baseline === "string") lines.push(`Baseline: ${data.baseline}`);
+          if (typeof data.actual === "string") lines.push(`Actual: ${data.actual}`);
+          if (typeof data.diff === "string") lines.push(`Diff: ${data.diff}`);
+          return {
+            doc_string: {
+              content: lines.join("\n"),
+              content_type: "text/plain",
+              line: 0
+            }
+          };
+        }
         return {
           doc_string: {
-            content: doc.names.map((n) => `@${n}`).join(" "),
-            content_type: "text/plain",
+            content: JSON.stringify(doc.data, null, 2),
+            content_type: "application/json",
             line: 0
           }
         };
-      case "custom":
+      case "tag":
         return {
           doc_string: {
-            content: JSON.stringify(doc.data, null, 2),
-            content_type: "application/json",
+            content: doc.names.map((n) => `@${n}`).join(" "),
+            content_type: "text/plain",
             line: 0
           }
         };
@@ -2266,6 +2291,14 @@ body {
   font-family: var(--font-mono);
 }
 
+.outcome-tag {
+  background: var(--status-fail-bg, color-mix(in srgb, var(--destructive, #ef4444) 12%, transparent));
+  color: var(--destructive, #b91c1c);
+  border-color: color-mix(in srgb, var(--destructive, #ef4444) 35%, transparent);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
 .scenario-duration {
   font-size: 0.75rem;
   color: var(--muted-foreground);
@@ -3029,6 +3062,63 @@ body {
   opacity: 0.8;
 }
 
+/* ============================================================================
+   Documentation Entries - Visual Check
+   ============================================================================ */
+.doc-visual {
+  margin-bottom: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  background: var(--muted, transparent);
+}
+
+.doc-visual:last-child {
+  margin-bottom: 0;
+}
+
+.doc-visual-header {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.doc-visual-status {
+  font-size: 0.6875rem;
+  font-family: var(--font-mono);
+  font-weight: 500;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background: var(--tag-bg);
+  color: var(--tag-color);
+  border: 1px solid var(--tag-border);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.doc-visual-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.5rem;
+}
+
+.doc-visual-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.doc-visual-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--muted-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
 /* ============================================================================
    Documentation Entries - Custom
    ============================================================================ */
@@ -13151,6 +13241,22 @@ function renderDocScreenshot(entry, deps) {
 </div>`;
 }
 function renderDocCustom(entry, deps) {
+  if (entry.type === "visual" && entry.data && typeof entry.data === "object") {
+    const data = entry.data;
+    const status = typeof data.status === "string" ? data.status : "unknown";
+    const baseline = typeof data.baseline === "string" ? data.baseline : void 0;
+    const actual = typeof data.actual === "string" ? data.actual : void 0;
+    const diff = typeof data.diff === "string" ? data.diff : void 0;
+    const maybeImg = (src, label) => src ? `<div class="doc-visual-item"><div class="doc-visual-label">${deps.escapeHtml(label ?? "")}</div><img src="${deps.escapeHtml(src)}" alt="${deps.escapeHtml(label ?? "visual image")}" class="doc-screenshot-img" /></div>` : "";
+    return `<div class="doc-visual">
+  <div class="doc-visual-header">Visual Check <span class="doc-visual-status">${deps.escapeHtml(status)}</span></div>
+  <div class="doc-visual-grid">
+    ${maybeImg(baseline, "Baseline")}
+    ${maybeImg(actual, "Actual")}
+    ${maybeImg(diff, "Diff")}
+  </div>
+</div>`;
+  }
   const dataStr = JSON.stringify(entry.data, null, 2);
   return `<div class="doc-custom">
   <div class="doc-custom-type">${deps.escapeHtml(entry.type)}</div>
@@ -13219,8 +13325,11 @@ function renderStep(step, stepResult, index, deps) {
 </div>${stepDocs}`;
 }
 function renderSteps(args, deps) {
+  const byStepId = new Map(
+    args.stepResults.filter((sr) => typeof sr.stepId === "string" && sr.stepId.length > 0).map((sr) => [sr.stepId, sr])
+  );
   const stepsHtml = args.steps.map((step, index) => {
-    const stepResult = args.stepResults.find((sr) => sr.index === index);
+    const stepResult = (step.id ? byStepId.get(step.id) : void 0) ?? args.stepResults.find((sr) => sr.index === index);
     return renderStep(step, stepResult, index, deps);
   }).join("");
   return `<div class="steps">${stepsHtml}</div>`;
@@ -13273,6 +13382,7 @@ function renderScenario(args, deps) {
   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 tickets = (tc.story.tickets ?? []).map((t) => renderTicket(t, deps.ticketUrlTemplate, deps.escapeHtml)).join("");
+  const outcomeBadge = tc.rawStatus === "timeout" || tc.rawStatus === "interrupted" ? `<span class="tag outcome-tag">${deps.escapeHtml(tc.rawStatus)}</span>` : "";
   const otelMeta = tc.story.meta?.otel;
   let traceBadge = "";
   if (otelMeta?.traceId) {
@@ -13340,7 +13450,7 @@ function renderScenario(args, deps) {
         <span class="status-icon ${statusClass}">${statusIcon2}</span>
         <span class="scenario-name">${deps.escapeHtml(tc.story.scenario)}</span>
       </div>
-      <div class="scenario-meta">${tags}${tickets}${sourceLink}${traceBadge}${metricBadges}</div>
+      <div class="scenario-meta">${tags}${tickets}${outcomeBadge}${sourceLink}${traceBadge}${metricBadges}</div>
     </div>
     <div class="scenario-actions">
       <button class="copy-scenario-btn" onclick="copyScenarioAsMarkdown('scenario-${tc.id}')" aria-label="Copy scenario as markdown" title="Copy as Markdown"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
@@ -14344,6 +14454,9 @@ var MarkdownFormatter = class {
       });
       meta.push(`Tickets: ${ticketLinks.join(", ")}`);
     }
+    if (tc.rawStatus === "timeout" || tc.rawStatus === "interrupted") {
+      meta.push(`Outcome: \`${tc.rawStatus}\``);
+    }
     const otelMeta = tc.story.meta?.otel;
     if (otelMeta?.traceId) {
       const traceTemplate = this.options.traceUrlTemplate;
@@ -14506,6 +14619,16 @@ var MarkdownFormatter = class {
         lines.push(`${indent}![${entry.alt ?? "Screenshot"}](${entry.path})`);
         break;
       case "custom":
+        if (entry.type === "visual" && entry.data && typeof entry.data === "object") {
+          const data = entry.data;
+          const status = typeof data.status === "string" ? data.status : "unknown";
+          lines.push(`${indent}**Visual Check** (${status})`);
+          if (typeof data.baseline === "string") lines.push(`${indent}- Baseline: ${data.baseline}`);
+          if (typeof data.actual === "string") lines.push(`${indent}- Actual: ${data.actual}`);
+          if (typeof data.diff === "string") lines.push(`${indent}- Diff: ${data.diff}`);
+          lines.push(`${indent}`);
+          break;
+        }
         lines.push(`${indent}**[${entry.type}]**`);
         lines.push(`${indent}`);
         lines.push(`${indent}\`\`\`json`);
@@ -17157,6 +17280,14 @@ function adaptPlaywrightRun(testResults, options = {}) {
       message: result.errors[0].message,
       stack: result.errors[0].stack
     } : void 0;
+    const stepEvents = result.stepEvents?.length ? result.stepEvents : story.steps.map(
+      (step, index) => step.durationMs !== void 0 ? {
+        index,
+        stepId: step.id,
+        title: step.text,
+        durationMs: step.durationMs
+      } : void 0
+    ).filter((e) => e !== void 0);
     testCases.push({
       externalId: test.titlePath().join(" > "),
       title: story.scenario,
@@ -17167,8 +17298,7 @@ function adaptPlaywrightRun(testResults, options = {}) {
       status: mapPlaywrightStatus(result.status),
       durationMs: result.duration,
       error,
-      stepEvents: void 0,
-      // Playwright could provide step info, but we don't capture it yet
+      stepEvents: stepEvents.length > 0 ? stepEvents : void 0,
       attachments,
       meta: {
         playwrightStatus: result.status,