executable-stories-react 0.15.0 → 0.16.0

package/dist/index.cjs

@@ -611,12 +611,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" }),
@@ -636,6 +653,7 @@ function DocHtml({ entry }) {
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "iframe",
       {
+        ref: frameRef,
         ...frameProps,
         sandbox: "allow-scripts",
         loading: "lazy",
@@ -1089,11 +1107,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
@@ -1184,7 +1202,7 @@ function ScenarioRunHistory({ scenarioId }) {
 }
 
 // src/components/ScenarioStaleness.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/lib/provenance.ts
 function reportLastRunMs(report) {
@@ -1240,11 +1258,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
@@ -1252,8 +1270,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;
@@ -1267,20 +1285,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
@@ -1841,25 +1859,86 @@ 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/components/doc/MermaidView.tsx
-var import_react10 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function prefersDark(el) {
   const themed = el?.closest("[data-theme]");
   if (themed?.dataset.theme === "dark") return true;
@@ -1867,10 +1946,10 @@ function prefersDark(el) {
   return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-color-scheme: dark)").matches;
 }
 function MermaidView({ entry, load }) {
-  const ref = (0, import_react10.useRef)(null);
-  const [svg, setSvg] = (0, import_react10.useState)(null);
-  const [error, setError] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  const ref = (0, import_react12.useRef)(null);
+  const [svg, setSvg] = (0, import_react12.useState)(null);
+  const [error, setError] = (0, import_react12.useState)(null);
+  (0, import_react12.useEffect)(() => {
     let cancelled = false;
     const draw = async () => {
       let mermaid;
@@ -1913,9 +1992,9 @@ function MermaidView({ entry, load }) {
     };
   }, [entry.code, load]);
   if (svg) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("figure", { ref, className: "my-3", children: [
-      entry.title ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("figcaption", { className: "mb-1.5 text-xs font-medium text-muted-foreground", children: entry.title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("figure", { ref, className: "my-3", children: [
+      entry.title ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("figcaption", { className: "mb-1.5 text-xs font-medium text-muted-foreground", children: entry.title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "div",
         {
           role: "img",
@@ -1926,8 +2005,8 @@ function MermaidView({ entry, load }) {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "p",
       {
         role: "alert",
@@ -1939,34 +2018,34 @@ function MermaidView({ entry, load }) {
         ]
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MermaidSource, { entry, ref })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MermaidSource, { entry, ref })
   ] });
 }
 
 // src/components/doc/MermaidDiagram.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var mermaidLoader;
 function loadMermaid() {
   mermaidLoader ??= import("mermaid").then((m) => m.default);
   return mermaidLoader;
 }
 function MermaidDiagram({ entry, load = loadMermaid }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MermaidView, { entry, load });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MermaidView, { entry, load });
 }
 
 // src/components/ScenarioExplorer.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // src/components/ui/command.tsx
 var React4 = require("react");
 var import_cmdk = require("cmdk");
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Command({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_cmdk.Command,
     {
       "data-slot": "command",
@@ -1982,14 +2061,14 @@ function CommandInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       "data-slot": "command-input-wrapper",
       className: "flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react3.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react3.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           import_cmdk.Command.Input,
           {
             "data-slot": "command-input",
@@ -2008,7 +2087,7 @@ function CommandList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_cmdk.Command.List,
     {
       "data-slot": "command-list",
@@ -2023,7 +2102,7 @@ function CommandList({
 function CommandEmpty({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_cmdk.Command.Empty,
     {
       "data-slot": "command-empty",
@@ -2036,7 +2115,7 @@ function CommandGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_cmdk.Command.Group,
     {
       "data-slot": "command-group",
@@ -2052,7 +2131,7 @@ function CommandItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_cmdk.Command.Item,
     {
       "data-slot": "command-item",
@@ -2066,7 +2145,7 @@ function CommandItem({
 }
 
 // src/components/ScenarioExplorer.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var STATUS_FILTERS = [
   { value: "all", label: "All" },
   { value: "passed", label: "Passed" },
@@ -2075,24 +2154,24 @@ var STATUS_FILTERS = [
   { value: "pending", label: "Pending" }
 ];
 function ScenarioExplorer({ scenarios, summary }) {
-  const [status, setStatus] = (0, import_react11.useState)("all");
+  const [status, setStatus] = (0, import_react13.useState)("all");
   const visible = status === "all" ? scenarios : scenarios.filter((s) => s.status === status);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "font-sans text-foreground", children: [
-    summary ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("p", { className: "mb-3 text-sm text-muted-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "font-sans text-foreground", children: [
+    summary ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("p", { className: "mb-3 text-sm text-muted-foreground", children: [
       summary.total,
       " scenarios \xB7 ",
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-pass", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "text-pass", children: [
         summary.passed,
         " passed"
       ] }),
       " \xB7",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-fail", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "text-fail", children: [
         summary.failed,
         " failed"
       ] })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", role: "group", "aria-label": "Filter by status", children: STATUS_FILTERS.map((f) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", role: "group", "aria-label": "Filter by status", children: STATUS_FILTERS.map((f) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "button",
       {
         type: "button",
@@ -2107,26 +2186,26 @@ function ScenarioExplorer({ scenarios, summary }) {
       },
       f.value
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       Command,
       {
         className: "rounded-lg border border-border bg-card",
         filter: (value, search) => value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CommandInput, { placeholder: "Search scenarios\u2026" }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(CommandList, { className: "max-h-none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CommandEmpty, { children: "No scenarios match your filters." }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CommandGroup, { children: visible.map((s) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CommandInput, { placeholder: "Search scenarios\u2026" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CommandList, { className: "max-h-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CommandEmpty, { children: "No scenarios match your filters." }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CommandGroup, { children: visible.map((s) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               CommandItem,
               {
                 value: `${s.title} ${s.feature} ${s.tags.join(" ")}`,
                 asChild: true,
                 className: "cursor-pointer",
-                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("a", { href: s.href, className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Badge, { variant: s.status, children: s.status }),
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "min-w-0 flex-1 truncate font-medium", children: s.title }),
-                  s.tags.slice(0, 3).map((t) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Badge, { variant: "tag", className: "hidden sm:inline-flex", children: t }, t)),
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("code", { className: "hidden font-mono text-xs text-muted-foreground md:inline", children: s.feature })
+                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("a", { href: s.href, className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Badge, { variant: s.status, children: s.status }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "min-w-0 flex-1 truncate font-medium", children: s.title }),
+                  s.tags.slice(0, 3).map((t) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Badge, { variant: "tag", className: "hidden sm:inline-flex", children: t }, t)),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("code", { className: "hidden font-mono text-xs text-muted-foreground md:inline", children: s.feature })
                 ] })
               },
               s.id