executable-stories-react 0.15.0 → 0.17.0

package/dist/ssr.d.cts

@@ -91,6 +91,8 @@ interface RenderReportToHtmlOptions {
     share?: boolean;
     /** Command the share dialog hands over, e.g. `npx executable-stories share reports/`. */
     shareCommand?: string;
+    /** Draw the "Architecture, as it ran" span section (default false). `--html-architecture`. */
+    architecture?: boolean;
 }
 /**
  * Render a StoryReport (or a parse Result) to a complete, self-contained HTML

package/dist/ssr.d.ts

@@ -91,6 +91,8 @@ interface RenderReportToHtmlOptions {
     share?: boolean;
     /** Command the share dialog hands over, e.g. `npx executable-stories share reports/`. */
     shareCommand?: string;
+    /** Draw the "Architecture, as it ran" span section (default false). `--html-architecture`. */
+    architecture?: boolean;
 }
 /**
  * Render a StoryReport (or a parse Result) to a complete, self-contained HTML

package/dist/ssr.js

@@ -523,12 +523,29 @@ function DocVideo({ entry }) {
 }
 
 // src/components/doc/DocHtml.tsx
+import { useEffect, useRef, useState } from "react";
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var MEASURE_SCRIPT = "<script>(function(){if(parent===window)return;var last=0,queued=false;var measure=function(){var kids=document.body.children,h=0;for(var i=0;i<kids.length;i++)h=Math.max(h,kids[i].getBoundingClientRect().bottom);return Math.ceil(h||document.body.getBoundingClientRect().bottom)};var post=function(){queued=false;var h=measure();if(h===last)return;last=h;parent.postMessage({__esHtmlHeight:h},'*')};var schedule=function(){if(queued)return;queued=true;requestAnimationFrame(post)};var start=function(){new ResizeObserver(schedule).observe(document.body);new MutationObserver(schedule).observe(document.body,{subtree:true,childList:true,attributes:true,characterData:true});addEventListener('load',schedule);post()};if(document.body)start();else addEventListener('DOMContentLoaded',start)})();</script>";
+var MAX_MEASURED_HEIGHT = 5e3;
 function DocHtml({ entry }) {
-  const height = typeof entry.height === "number" ? `${entry.height}px` : entry.height ?? "400px";
+  const declaredHeight = typeof entry.height === "number" ? `${entry.height}px` : entry.height ?? "400px";
   const title = entry.title ?? "Embedded HTML";
   const safeHref = safeUrl(entry.url ?? entry.path);
-  const frameProps = entry.content !== void 0 ? { srcDoc: entry.content } : { src: safeHref ?? "" };
+  const frameRef = useRef(null);
+  const [measuredHeight, setMeasuredHeight] = useState();
+  useEffect(() => {
+    if (entry.content === void 0) return;
+    const onMessage = (event) => {
+      if (event.source !== frameRef.current?.contentWindow) return;
+      const reported = event.data?.__esHtmlHeight;
+      if (typeof reported !== "number" || !Number.isFinite(reported) || reported <= 0) return;
+      setMeasuredHeight(Math.min(reported, MAX_MEASURED_HEIGHT));
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [entry.content]);
+  const height = measuredHeight === void 0 ? declaredHeight : `${measuredHeight}px`;
+  const frameProps = entry.content !== void 0 ? { srcDoc: entry.content + MEASURE_SCRIPT } : { src: safeHref ?? "" };
   return /* @__PURE__ */ jsxs9("figure", { className: "my-3 overflow-hidden rounded-md border border-border", children: [
     /* @__PURE__ */ jsxs9("figcaption", { className: "flex items-center justify-between border-b border-border bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground", children: [
       /* @__PURE__ */ jsx14("span", { children: entry.title ?? "HTML" }),
@@ -548,6 +565,7 @@ function DocHtml({ entry }) {
     /* @__PURE__ */ jsx14(
       "iframe",
       {
+        ref: frameRef,
         ...frameProps,
         sandbox: "allow-scripts",
         loading: "lazy",
@@ -1096,7 +1114,7 @@ function ScenarioRunHistory({ scenarioId }) {
 }
 
 // src/components/ScenarioStaleness.tsx
-import { useEffect, useState } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 
 // src/lib/provenance.ts
 function formatRelativeAge(thenMs, nowMs) {
@@ -1155,8 +1173,8 @@ import { jsxs as jsxs16 } from "react/jsx-runtime";
 function ScenarioStaleness({ scenario }) {
   const freshness = useScenarioFreshness();
   const fixedNow = freshness?.nowMs;
-  const [now, setNow] = useState(fixedNow);
-  useEffect(() => {
+  const [now, setNow] = useState2(fixedNow);
+  useEffect2(() => {
     if (fixedNow === void 0) setNow(Date.now());
   }, [fixedNow]);
   if (!freshness || now === void 0) return null;
@@ -1170,7 +1188,7 @@ function ScenarioStaleness({ scenario }) {
 }
 
 // src/interactive/collapse-context.ts
-import { createContext as createContext4, useCallback, useContext as useContext5, useState as useState2 } from "react";
+import { createContext as createContext4, useCallback, useContext as useContext5, useState as useState3 } from "react";
 var CollapseContext = createContext4(null);
 var CollapseProvider = CollapseContext.Provider;
 function useCollapse() {
@@ -1744,23 +1762,85 @@ function ReportErrorShell({
   return /* @__PURE__ */ jsx36("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: /* @__PURE__ */ jsx36(ReportSchemaError, { error }) });
 }
 
-// src/components/Report.tsx
+// src/components/ReportSpanGraph.tsx
+import { deriveSpanGraph, spanGraphNodeMark, spanGraphToMermaid } from "executable-stories-core/span-graph";
+import { useMemo as useMemo2 } from "react";
 import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
+var LANE_LABEL = {
+  edge: "Edge",
+  service: "Service",
+  queue: "Queue",
+  datastore: "Data"
+};
+var MARK_LABEL = {
+  failing: "Failing",
+  added: "New",
+  changed: "Changed"
+};
+var MARK_CLASS = {
+  failing: "text-fail",
+  added: "text-pass",
+  changed: "text-pend"
+};
+function MarkBadge({ node }) {
+  const mark = spanGraphNodeMark(node);
+  if (!mark) return null;
+  return /* @__PURE__ */ jsx37("span", { className: cn("ml-2 text-xs font-medium", MARK_CLASS[mark]), children: MARK_LABEL[mark] });
+}
+function ReportSpanGraph() {
+  const report = useReport();
+  const { code, graph, titleById } = useMemo2(() => {
+    const scenarios = report.features.flatMap((feature) => feature.scenarios);
+    const derived = deriveSpanGraph(scenarios);
+    return {
+      graph: derived,
+      code: spanGraphToMermaid(derived),
+      titleById: new Map(scenarios.map((scenario) => [scenario.id, scenario.title]))
+    };
+  }, [report]);
+  if (code === "") return null;
+  return /* @__PURE__ */ jsxs25("section", { className: "es-span-graph mt-6", "aria-labelledby": "es-span-graph-heading", children: [
+    /* @__PURE__ */ jsx37("h2", { id: "es-span-graph-heading", className: "text-base font-semibold text-foreground", children: "Architecture, as it ran" }),
+    /* @__PURE__ */ jsx37("p", { className: "mt-1 text-sm text-muted-foreground", children: "Derived from this run\u2019s traces. Every component was named by a span while a scenario ran, so nothing here is inferred from the code. Instrumented, exercised paths only: a component no scenario reaches does not appear." }),
+    /* @__PURE__ */ jsx37(DocMermaid, { entry: { kind: "mermaid", phase: "static", code } }),
+    /* @__PURE__ */ jsxs25("table", { className: "mt-2 w-full border-collapse text-left text-sm", children: [
+      /* @__PURE__ */ jsx37("caption", { className: "sr-only", children: "Each component and the scenarios that exercised it" }),
+      /* @__PURE__ */ jsx37("thead", { children: /* @__PURE__ */ jsxs25("tr", { className: "text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx37("th", { scope: "col", className: "py-1 pr-4 font-medium", children: "Component" }),
+        /* @__PURE__ */ jsx37("th", { scope: "col", className: "py-1 pr-4 font-medium", children: "Lane" }),
+        /* @__PURE__ */ jsx37("th", { scope: "col", className: "py-1 font-medium", children: "Covered by" })
+      ] }) }),
+      /* @__PURE__ */ jsx37("tbody", { children: graph.nodes.map((node) => /* @__PURE__ */ jsxs25("tr", { className: "border-t border-border align-top", children: [
+        /* @__PURE__ */ jsxs25("th", { scope: "row", className: "py-1.5 pr-4 font-mono text-xs font-normal", children: [
+          node.id,
+          /* @__PURE__ */ jsx37(MarkBadge, { node })
+        ] }),
+        /* @__PURE__ */ jsx37("td", { className: "py-1.5 pr-4 text-xs text-muted-foreground", children: LANE_LABEL[node.kind] }),
+        /* @__PURE__ */ jsx37("td", { className: "py-1.5", children: /* @__PURE__ */ jsx37("ul", { className: "flex flex-col gap-0.5", children: node.scenarioIds.map((id) => /* @__PURE__ */ jsx37("li", { children: /* @__PURE__ */ jsx37("a", { href: `#${id}`, className: "text-xs text-link underline underline-offset-2 hover:text-foreground", children: titleById.get(id) ?? id }) }, id)) }) })
+      ] }, node.id)) })
+    ] })
+  ] });
+}
+
+// src/components/Report.tsx
+import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
 function Report(props) {
-  const { report, customRenderers, renderers, className, title, dataTheme } = props;
+  const { report, customRenderers, renderers, className, title, dataTheme, architecture = false } = props;
   const result = unwrapReport(report);
   if (!result.ok) {
-    return /* @__PURE__ */ jsx37(ReportErrorShell, { error: result.error, className, title, dataTheme });
+    return /* @__PURE__ */ jsx38(ReportErrorShell, { error: result.error, className, title, dataTheme });
   }
   const data = result.data;
   const hasContent = data.features.length > 0;
-  return /* @__PURE__ */ jsx37(ReportRoot, { report: data, customRenderers, renderers, children: /* @__PURE__ */ jsxs25("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: [
-    /* @__PURE__ */ jsx37("header", { className: "es-report-header", children: /* @__PURE__ */ jsx37(ReportTitleBlock, { title }) }),
-    hasContent ? /* @__PURE__ */ jsx37(ReportFeatureList, {}) : /* @__PURE__ */ jsx37(ReportEmpty, {})
+  return /* @__PURE__ */ jsx38(ReportRoot, { report: data, customRenderers, renderers, children: /* @__PURE__ */ jsxs26("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: [
+    /* @__PURE__ */ jsx38("header", { className: "es-report-header", children: /* @__PURE__ */ jsx38(ReportTitleBlock, { title }) }),
+    architecture ? /* @__PURE__ */ jsx38(ReportSpanGraph, {}) : null,
+    hasContent ? /* @__PURE__ */ jsx38(ReportFeatureList, {}) : /* @__PURE__ */ jsx38(ReportEmpty, {})
   ] }) });
 }
 
 // src/ssr-entry.ts
+import { REPORT_FAVICON_LINK } from "executable-stories-core/utils/report-favicon";
 var ROOT_ID = "es-report-root";
 var DATA_ID = "es-report-data";
 var HISTORY_ID = "es-report-history";
@@ -1770,7 +1850,7 @@ function escapeJsonForScript(json) {
 var HLJS_URL = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js";
 var HLJS_CSS_LIGHT = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css";
 var HLJS_CSS_DARK = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css";
-var MERMAID_URL = "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+var MERMAID_URL = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
 function cdnAssets(syntaxHighlighting, mermaid) {
   const headParts = [];
   const imports = [];
@@ -1816,10 +1896,11 @@ function renderReportToHtml(report, options = {}) {
     staleAfterDays = 7,
     scenarioHistory,
     share = false,
-    shareCommand = ""
+    shareCommand = "",
+    architecture = false
   } = options;
   const markup = renderToStaticMarkup(
-    createElement(Report, { report, title })
+    createElement(Report, { report, title, architecture })
   );
   const cdn = cdnAssets(syntaxHighlighting, mermaid);
   const parsed = unwrapReport(report);
@@ -1829,8 +1910,9 @@ function renderReportToHtml(report, options = {}) {
   const historyScript = interactive && scenarioHistory && Object.keys(scenarioHistory).length > 0 ? `<script type="application/json" id="${HISTORY_ID}">${escapeJsonForScript(JSON.stringify(scenarioHistory))}</script>` : "";
   const islandTag = interactive ? `<script>${islandScript}</script>` : "";
   const cdnBody = interactive ? "" : cdn.body;
+  const architectureAttr = architecture ? ` data-es-architecture="true"` : "";
   const shareAttrs = share ? ` data-es-share="true"${shareCommand ? ` data-es-share-cmd="${escapeHtml(shareCommand)}"` : ""}` : "";
-  const islandConfigAttrs = interactive ? ` data-es-syntax="${syntaxHighlighting ? "true" : "false"}" data-es-mermaid="${mermaid ? "true" : "false"}" data-es-stale-days="${Number.isFinite(staleAfterDays) && staleAfterDays >= 0 ? staleAfterDays : 7}"${shareAttrs}` : "";
+  const islandConfigAttrs = interactive ? ` data-es-syntax="${syntaxHighlighting ? "true" : "false"}" data-es-mermaid="${mermaid ? "true" : "false"}" data-es-stale-days="${Number.isFinite(staleAfterDays) && staleAfterDays >= 0 ? staleAfterDays : 7}"${shareAttrs}${architectureAttr}` : "";
   const rootAttrs = interactive ? ` id="${ROOT_ID}" data-title="${escapeHtml(title)}"${islandConfigAttrs}` : "";
   return `<!DOCTYPE html>
 <html lang="${escapeHtml(lang)}" data-theme="${theme === "dark" ? "dark" : "light"}">
@@ -1838,6 +1920,7 @@ function renderReportToHtml(report, options = {}) {
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="color-scheme" content="light dark">
+${REPORT_FAVICON_LINK}
 <title>${escapeHtml(title)}</title>
 ${cdn.head}
 ${headExtra}