executable-stories-react 0.15.0 → 0.16.0

package/dist/ssr.cjs

@@ -23,7 +23,7 @@ __export(ssr_entry_exports, {
   renderReportToHtml: () => renderReportToHtml
 });
 module.exports = __toCommonJS(ssr_entry_exports);
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_server = require("react-dom/server");
 
 // src/result.ts
@@ -544,12 +544,29 @@ function DocVideo({ entry }) {
 }
 
 // src/components/doc/DocHtml.tsx
+var import_react5 = require("react");
 var import_jsx_runtime14 = require("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 = (0, import_url.safeUrl)(entry.url ?? entry.path);
-  const frameProps = entry.content !== void 0 ? { srcDoc: entry.content } : { src: safeHref ?? "" };
+  const frameRef = (0, import_react5.useRef)(null);
+  const [measuredHeight, setMeasuredHeight] = (0, import_react5.useState)();
+  (0, import_react5.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__ */ (0, import_jsx_runtime14.jsxs)("figure", { className: "my-3 overflow-hidden rounded-md border border-border", children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("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__ */ (0, import_jsx_runtime14.jsx)("span", { children: entry.title ?? "HTML" }),
@@ -569,6 +586,7 @@ function DocHtml({ entry }) {
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "iframe",
       {
+        ref: frameRef,
         ...frameProps,
         sandbox: "allow-scripts",
         loading: "lazy",
@@ -1022,11 +1040,11 @@ function ReportTrace({ spans }) {
 }
 
 // src/interactive/scenario-history-context.ts
-var import_react5 = require("react");
-var ScenarioHistoryContext = (0, import_react5.createContext)(null);
+var import_react6 = require("react");
+var ScenarioHistoryContext = (0, import_react6.createContext)(null);
 var ScenarioHistoryProvider = ScenarioHistoryContext.Provider;
 function useScenarioHistory() {
-  return (0, import_react5.useContext)(ScenarioHistoryContext);
+  return (0, import_react6.useContext)(ScenarioHistoryContext);
 }
 
 // src/lib/run-history.ts
@@ -1117,7 +1135,7 @@ function ScenarioRunHistory({ scenarioId }) {
 }
 
 // src/components/ScenarioStaleness.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/lib/provenance.ts
 function formatRelativeAge(thenMs, nowMs) {
@@ -1164,11 +1182,11 @@ function prUrl(ci) {
 }
 
 // src/interactive/scenario-freshness-context.tsx
-var import_react6 = require("react");
-var ScenarioFreshnessContext = (0, import_react6.createContext)(null);
+var import_react7 = require("react");
+var ScenarioFreshnessContext = (0, import_react7.createContext)(null);
 var ScenarioFreshnessProvider = ScenarioFreshnessContext.Provider;
 function useScenarioFreshness() {
-  return (0, import_react6.useContext)(ScenarioFreshnessContext);
+  return (0, import_react7.useContext)(ScenarioFreshnessContext);
 }
 
 // src/components/ScenarioStaleness.tsx
@@ -1176,8 +1194,8 @@ var import_jsx_runtime24 = require("react/jsx-runtime");
 function ScenarioStaleness({ scenario }) {
   const freshness = useScenarioFreshness();
   const fixedNow = freshness?.nowMs;
-  const [now, setNow] = (0, import_react7.useState)(fixedNow);
-  (0, import_react7.useEffect)(() => {
+  const [now, setNow] = (0, import_react8.useState)(fixedNow);
+  (0, import_react8.useEffect)(() => {
     if (fixedNow === void 0) setNow(Date.now());
   }, [fixedNow]);
   if (!freshness || now === void 0) return null;
@@ -1191,20 +1209,20 @@ function ScenarioStaleness({ scenario }) {
 }
 
 // src/interactive/collapse-context.ts
-var import_react8 = require("react");
-var CollapseContext = (0, import_react8.createContext)(null);
+var import_react9 = require("react");
+var CollapseContext = (0, import_react9.createContext)(null);
 var CollapseProvider = CollapseContext.Provider;
 function useCollapse() {
-  return (0, import_react8.useContext)(CollapseContext);
+  return (0, import_react9.useContext)(CollapseContext);
 }
 
 // src/interactive/scenario-actions.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_scenario_markdown = require("executable-stories-core/utils/scenario-markdown");
-var ScenarioActionsContext = (0, import_react9.createContext)(null);
+var ScenarioActionsContext = (0, import_react10.createContext)(null);
 var ScenarioActionsProvider = ScenarioActionsContext.Provider;
 function useScenarioActions() {
-  return (0, import_react9.useContext)(ScenarioActionsContext);
+  return (0, import_react10.useContext)(ScenarioActionsContext);
 }
 
 // src/components/ui/card.tsx
@@ -1765,23 +1783,85 @@ function ReportErrorShell({
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ReportSchemaError, { error }) });
 }
 
-// src/components/Report.tsx
+// src/components/ReportSpanGraph.tsx
+var import_span_graph = require("executable-stories-core/span-graph");
+var import_react11 = require("react");
 var import_jsx_runtime38 = require("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 = (0, import_span_graph.spanGraphNodeMark)(node);
+  if (!mark) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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 } = (0, import_react11.useMemo)(() => {
+    const scenarios = report.features.flatMap((feature) => feature.scenarios);
+    const derived = (0, import_span_graph.deriveSpanGraph)(scenarios);
+    return {
+      graph: derived,
+      code: (0, import_span_graph.spanGraphToMermaid)(derived),
+      titleById: new Map(scenarios.map((scenario) => [scenario.id, scenario.title]))
+    };
+  }, [report]);
+  if (code === "") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("section", { className: "es-span-graph mt-6", "aria-labelledby": "es-span-graph-heading", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { id: "es-span-graph-heading", className: "text-base font-semibold text-foreground", children: "Architecture, as it ran" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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__ */ (0, import_jsx_runtime38.jsx)(DocMermaid, { entry: { kind: "mermaid", phase: "static", code } }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("table", { className: "mt-2 w-full text-left text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("caption", { className: "sr-only", children: "Each component and the scenarios that exercised it" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("tr", { className: "text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("th", { scope: "col", className: "py-1 pr-4 font-medium", children: "Component" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("th", { scope: "col", className: "py-1 pr-4 font-medium", children: "Lane" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("th", { scope: "col", className: "py-1 font-medium", children: "Covered by" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tbody", { children: graph.nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("tr", { className: "border-t border-border align-top", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("th", { scope: "row", className: "py-1.5 pr-4 font-mono text-xs font-normal", children: [
+          node.id,
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MarkBadge, { node })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("td", { className: "py-1.5 pr-4 text-xs text-muted-foreground", children: LANE_LABEL[node.kind] }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("td", { className: "py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: "flex flex-col gap-0.5", children: node.scenarioIds.map((id) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("a", { href: `#${id}`, className: "text-xs underline underline-offset-2", children: titleById.get(id) ?? id }) }, id)) }) })
+      ] }, node.id)) })
+    ] })
+  ] });
+}
+
+// src/components/Report.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Report(props) {
   const { report, customRenderers, renderers, className, title, dataTheme } = props;
   const result = unwrapReport(report);
   if (!result.ok) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ReportErrorShell, { error: result.error, className, title, dataTheme });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportErrorShell, { error: result.error, className, title, dataTheme });
   }
   const data = result.data;
   const hasContent = data.features.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ReportRoot, { report: data, customRenderers, renderers, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("header", { className: "es-report-header", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ReportTitleBlock, { title }) }),
-    hasContent ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ReportFeatureList, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ReportEmpty, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportRoot, { report: data, customRenderers, renderers, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("header", { className: "es-report-header", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportTitleBlock, { title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportSpanGraph, {}),
+    hasContent ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportFeatureList, {}) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportEmpty, {})
   ] }) });
 }
 
 // src/ssr-entry.ts
+var import_report_favicon = require("executable-stories-core/utils/report-favicon");
 var ROOT_ID = "es-report-root";
 var DATA_ID = "es-report-data";
 var HISTORY_ID = "es-report-history";
@@ -1840,7 +1920,7 @@ function renderReportToHtml(report, options = {}) {
     shareCommand = ""
   } = options;
   const markup = (0, import_server.renderToStaticMarkup)(
-    (0, import_react10.createElement)(Report, { report, title })
+    (0, import_react12.createElement)(Report, { report, title })
   );
   const cdn = cdnAssets(syntaxHighlighting, mermaid);
   const parsed = unwrapReport(report);
@@ -1859,6 +1939,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">
+${import_report_favicon.REPORT_FAVICON_LINK}
 <title>${escapeHtml(title)}</title>
 ${cdn.head}
 ${headExtra}