executable-stories-formatters 0.7.11 → 0.7.13

package/dist/cli.js

@@ -615,6 +615,7 @@ function deriveStepResults(steps, scenarioStatus, error) {
   if (scenarioStatus === "passed") {
     return steps.map((_, index) => ({
       index,
+      stepId: steps[index].id,
       status: "passed",
       durationMs: 0
     }));
@@ -622,6 +623,7 @@ function deriveStepResults(steps, scenarioStatus, error) {
   if (scenarioStatus === "skipped" || scenarioStatus === "pending") {
     return steps.map((_, index) => ({
       index,
+      stepId: steps[index].id,
       status: scenarioStatus,
       durationMs: 0
     }));
@@ -629,16 +631,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 };
     }
   });
 }
@@ -660,18 +663,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
@@ -805,6 +813,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
@@ -826,6 +835,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,
@@ -1306,19 +1316,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
           }
         };
@@ -2836,6 +2861,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);
@@ -2992,6 +3025,27 @@ body {
   border: 1px solid var(--border);
 }
 
+.attachment-unavailable {
+  padding: 0.75rem 1rem;
+  border: 1px dashed var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  background: var(--muted, transparent);
+  color: var(--muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.attachment-unavailable-label {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.attachment-unavailable-path {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.75rem;
+  word-break: break-all;
+  opacity: 0.8;
+}
+
 /* ============================================================================
    Chevron Icon - smooth rotation
    ============================================================================ */
@@ -3557,6 +3611,84 @@ body {
   font-style: italic;
 }
 
+.doc-screenshot-missing {
+  padding: 0.75rem 1rem;
+  border: 1px dashed var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  background: var(--muted, transparent);
+  color: var(--muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.doc-screenshot-missing-label {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.doc-screenshot-missing-path {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.75rem;
+  word-break: break-all;
+  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
    ============================================================================ */
@@ -13531,11 +13663,18 @@ function renderTagBar(args, deps) {
 </div>`;
 }
 
+// src/notifiers/ansi-strip.ts
+function stripAnsi(text2) {
+  return text2.replace(/\x1B\[[0-?]*[ -/]*[@-~]/g, "");
+}
+
 // src/formatters/html/renderers/error-box.ts
 function renderErrorBox(args, deps) {
-  const body = args.stack != null ? `${deps.escapeHtml(args.message)}
+  const message = stripAnsi(args.message);
+  const stack = args.stack != null ? stripAnsi(args.stack) : void 0;
+  const body = stack != null ? `${deps.escapeHtml(message)}
 
-${deps.escapeHtml(args.stack)}` : deps.escapeHtml(args.message);
+${deps.escapeHtml(stack)}` : deps.escapeHtml(message);
   return `<div class="error-box">${body}</div>`;
 }
 
@@ -13548,6 +13687,7 @@ function renderAttachments(args, deps) {
     const isImage = att.mediaType.startsWith("image/");
     const isVideo = att.mediaType.startsWith("video/");
     const isBase64 = att.contentEncoding === "BASE64";
+    const isUnreachableFsPath = deps.embedScreenshots && !isBase64 && typeof att.body === "string" && /^(?:[/\\]|[A-Za-z]:[/\\])/.test(att.body);
     if (isImage && deps.embedScreenshots && isBase64) {
       return `
 <div class="attachment">
@@ -13555,12 +13695,19 @@ function renderAttachments(args, deps) {
   <img class="attachment-image" src="data:${att.mediaType};base64,${att.body}" alt="${deps.escapeHtml(att.name)}" />
 </div>`;
     }
-    if (isVideo && deps.embedScreenshots) {
+    if (isVideo && deps.embedScreenshots && !isUnreachableFsPath) {
       const src = isBase64 ? `data:${att.mediaType};base64,${att.body}` : att.body;
       return `
 <div class="attachment">
   ${deps.escapeHtml(att.name)}
   <video class="attachment-video" controls src="${deps.escapeHtml(src)}"></video>
+</div>`;
+    }
+    if (isUnreachableFsPath) {
+      return `
+<div class="attachment attachment-unavailable">
+  <div class="attachment-unavailable-label">${deps.escapeHtml(att.name)} unavailable</div>
+  <div class="attachment-unavailable-path">${deps.escapeHtml(att.body)}</div>
 </div>`;
     }
     const href = isBase64 ? `data:${att.mediaType};base64,${att.body}` : att.body;
@@ -13643,13 +13790,40 @@ function renderDocScreenshot(entry, deps) {
   const alt = entry.alt ?? "Screenshot";
   const embedEnabled = deps.embedScreenshots ?? true;
   const isRemote = /^(?:https?:|data:)/i.test(entry.path);
-  const src = embedEnabled && !isRemote && deps.readScreenshot ? deps.readScreenshot(entry.path) ?? entry.path : entry.path;
+  const embedAttempted = !isRemote && embedEnabled && !!deps.readScreenshot;
+  const inlined = embedAttempted ? deps.readScreenshot(entry.path) : void 0;
+  const isAbsoluteFsPath = !isRemote && /^(?:[/\\]|[A-Za-z]:[/\\])/.test(entry.path);
+  if (embedAttempted && inlined === void 0 && isAbsoluteFsPath) {
+    const captionHtml = entry.alt ? `<div class="doc-screenshot-caption">${deps.escapeHtml(entry.alt)}</div>` : "";
+    return `<div class="doc-screenshot doc-screenshot-missing">
+  <div class="doc-screenshot-missing-label">Screenshot unavailable</div>
+  <div class="doc-screenshot-missing-path">${deps.escapeHtml(entry.path)}</div>
+  ${captionHtml}
+</div>`;
+  }
+  const src = inlined ?? entry.path;
   return `<div class="doc-screenshot">
   <img src="${deps.escapeHtml(src)}" alt="${deps.escapeHtml(alt)}" class="doc-screenshot-img" />
   ${entry.alt ? `<div class="doc-screenshot-caption">${deps.escapeHtml(entry.alt)}</div>` : ""}
 </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>
@@ -13718,8 +13892,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>`;
@@ -13767,6 +13944,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) {
@@ -13834,7 +14012,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>
@@ -14838,6 +15016,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;
@@ -15000,6 +15181,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`);
@@ -18052,11 +18243,6 @@ function pickleStepArgumentToDocs(ps) {
   return docs;
 }
 
-// src/notifiers/ansi-strip.ts
-function stripAnsi(text2) {
-  return text2.replace(/\x1B\[[0-?]*[ -/]*[@-~]/g, "");
-}
-
 // src/notifiers/slack.ts
 function truncate(text2, maxLen) {
   if (text2.length <= maxLen) return text2;