executable-stories-react 0.4.0 → 0.5.0

package/dist/interactive.cjs

@@ -1,8 +1,10 @@
 "use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/interactive/index.ts
@@ -37,7 +47,7 @@ __export(interactive_exports, {
 module.exports = __toCommonJS(interactive_exports);
 
 // src/interactive/ReportInteractive.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // src/result.ts
 var ok = (data) => ({ ok: true, data });
@@ -136,11 +146,15 @@ var badgeVariants = (0, import_class_variance_authority.cva)(
         outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         link: "text-primary underline-offset-4 [a&]:hover:underline",
-        passed: "border-pass-border bg-pass-bg text-pass font-mono uppercase",
+        // Pass/skip/pending are the quiet states: outline + coloured text, no
+        // fill, so a green report reads calm. Only `failed` keeps a tinted
+        // fill, making it the single loud badge on the page, so red pops the
+        // instant something breaks. Colour-as-accent, matching the KPI cards.
+        passed: "border-pass-border text-pass font-mono uppercase",
         failed: "border-fail-border bg-fail-bg text-fail font-mono uppercase",
-        skipped: "border-skip-border bg-skip-bg text-skip font-mono uppercase",
-        pending: "border-pend-border bg-pend-bg text-pend font-mono uppercase",
-        tag: "border-pass-border bg-pass-bg text-pass font-mono font-medium"
+        skipped: "border-skip-border text-skip font-mono uppercase",
+        pending: "border-pend-border text-pend font-mono uppercase",
+        tag: "border-border text-muted-foreground font-mono font-medium [a&]:hover:bg-muted"
       }
     },
     defaultVariants: {
@@ -693,7 +707,7 @@ function ReportTrace({ spans }) {
           {
             className: "min-w-0 flex-1 truncate text-foreground",
             style: { paddingLeft: `${row.depth * 12}px` },
-            title: row.statusMessage ? `${row.name} \u2014 ${row.statusMessage}` : row.name,
+            title: row.statusMessage ? `${row.name}: ${row.statusMessage}` : row.name,
             children: row.name
           }
         ),
@@ -832,12 +846,12 @@ function useCollapse() {
 }
 var STORAGE_KEY = "es-collapsed-ids";
 function readPersisted() {
-  if (typeof localStorage === "undefined") return /* @__PURE__ */ new Set();
+  if (typeof localStorage === "undefined") return null;
   try {
     const raw = localStorage.getItem(STORAGE_KEY);
-    return raw ? new Set(JSON.parse(raw)) : /* @__PURE__ */ new Set();
+    return raw ? new Set(JSON.parse(raw)) : null;
   } catch {
-    return /* @__PURE__ */ new Set();
+    return null;
   }
 }
 function persist(ids) {
@@ -847,8 +861,10 @@ function persist(ids) {
   } catch {
   }
 }
-function useCollapseState() {
-  const [collapsed, setCollapsed] = (0, import_react6.useState)(readPersisted);
+function useCollapseState(computeDefault) {
+  const [collapsed, setCollapsed] = (0, import_react6.useState)(
+    () => readPersisted() ?? computeDefault?.() ?? /* @__PURE__ */ new Set()
+  );
   const isCollapsed = (0, import_react6.useCallback)((id) => collapsed.has(id), [collapsed]);
   const toggle = (0, import_react6.useCallback)((id) => {
     setCollapsed((prev) => {
@@ -926,7 +942,7 @@ function Card({ className, ...props }) {
     {
       "data-slot": "card",
       className: cn(
-        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-xs",
         className
       ),
       ...props
@@ -957,52 +973,89 @@ function CardContent({ className, ...props }) {
   );
 }
 
-// src/components/ReportScenario.tsx
+// src/components/ui/dropdown-menu.tsx
+var React3 = require("react");
+var import_menu = require("@base-ui/react/menu");
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var STATUS_LABEL = {
-  passed: "Passed",
-  failed: "Failed",
-  skipped: "Skipped",
-  pending: "Pending"
-};
-var STATUS_GLYPH = {
-  passed: "\u2713",
-  failed: "\u2717",
-  skipped: "\u25CB",
-  pending: "\u25CB"
-};
-var STATUS_GLYPH_COLOR = {
-  passed: "text-pass",
-  failed: "text-fail",
-  skipped: "text-skip",
-  pending: "text-pend"
-};
-var STATUS_BADGE = {
-  passed: "passed",
-  failed: "failed",
-  skipped: "skipped",
-  pending: "pending"
+var itemClasses = "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground";
+function DropdownMenu(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  className,
+  align = "end",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_menu.Menu.Positioner,
+    {
+      "data-slot": "dropdown-menu-positioner",
+      className: "z-50",
+      align,
+      sideOffset,
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_menu.Menu.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          className: cn(
+            "z-50 min-w-[11rem] origin-[var(--transform-origin)] overflow-hidden rounded-md border border-border bg-popover p-1 font-sans text-sm text-popover-foreground shadow-md transition-[opacity,transform] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_menu.Menu.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      className: cn(itemClasses, className),
+      ...props
+    }
+  );
+}
+
+// src/components/ReportScenario.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var STATUS_META = {
+  passed: { label: "Passed", glyph: "\u2713", glyphColor: "text-pass", badgeVariant: "passed", showPill: false },
+  failed: { label: "Failed", glyph: "\u2717", glyphColor: "text-fail", badgeVariant: "failed", showPill: true },
+  skipped: { label: "Skipped", glyph: "\u25CB", glyphColor: "text-skip", badgeVariant: "skipped", showPill: true },
+  pending: { label: "Pending", glyph: "\u25CB", glyphColor: "text-pend", badgeVariant: "pending", showPill: true }
 };
 function ReportScenario({ scenario, hideTitle = false }) {
   const titleId = `${scenario.id}-title`;
   const bodyId = `${scenario.id}-body`;
-  const label = scenario.planned ? "Planned" : STATUS_LABEL[scenario.status];
+  const meta = STATUS_META[scenario.status];
+  const label = scenario.planned ? "Planned" : meta.label;
   const collapse = useCollapse();
   const collapsible = collapse !== null && !hideTitle;
   const collapsed = collapsible ? collapse.isCollapsed(scenario.id) : false;
   const actions = useScenarioActions();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     Card,
     {
       id: scenario.id,
       "data-status": scenario.status,
-      ...hideTitle ? { "aria-label": `${scenario.title} \u2014 ${label}` } : { "aria-labelledby": titleId },
+      ...hideTitle ? { "aria-label": `${scenario.title}, ${label}` } : { "aria-labelledby": titleId },
       className: "gap-0 py-0",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardHeader, { className: "px-4 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("flex items-start gap-4", hideTitle ? "justify-end" : "justify-between"), children: [
-            hideTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("h3", { id: titleId, className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
-              collapsible ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(CardHeader, { className: "px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("flex items-start gap-4", hideTitle ? "justify-end" : "justify-between"), children: [
+            hideTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("h3", { id: titleId, className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+              collapsible ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1011,60 +1064,49 @@ function ReportScenario({ scenario, hideTitle = false }) {
                   "aria-controls": bodyId,
                   "aria-label": `Toggle ${scenario.title}`,
                   className: "shrink-0 cursor-pointer text-muted-foreground hover:text-foreground",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": true, className: cn("inline-block text-xs transition-transform", !collapsed && "rotate-90"), children: "\u25B8" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": true, className: cn("inline-block text-xs transition-transform", !collapsed && "rotate-90"), children: "\u25B8" })
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": true, className: cn("text-sm leading-none", STATUS_GLYPH_COLOR[scenario.status]), children: STATUS_GLYPH[scenario.status] }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: scenario.title })
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": true, className: cn("text-sm leading-none", meta.glyphColor), children: meta.glyph }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: scenario.title })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScenarioRunHistory, { scenarioId: scenario.id }),
-              scenario.durationMs > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: formatDuration(scenario.durationMs) }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Badge, { variant: STATUS_BADGE[scenario.status], "aria-label": `Status: ${label}`, children: label }),
-              actions ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => actions.copyLink(scenario),
-                    "aria-label": `Copy link to ${scenario.title}`,
-                    title: "Copy permalink",
-                    className: "cursor-pointer rounded px-1 py-0.5 font-mono text-[0.625rem] text-muted-foreground hover:bg-muted hover:text-foreground",
-                    children: "link"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                  "button",
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScenarioRunHistory, { scenarioId: scenario.id }),
+              scenario.durationMs > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: formatDuration(scenario.durationMs) }) : null,
+              meta.showPill ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Badge, { variant: meta.badgeVariant, "aria-label": `Status: ${label}`, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only", children: `Status: ${label}` }),
+              actions ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DropdownMenu, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  DropdownMenuTrigger,
                   {
-                    type: "button",
-                    onClick: () => actions.copyMarkdown(scenario),
-                    "aria-label": `Copy ${scenario.title} as Markdown`,
-                    title: "Copy as Markdown",
-                    className: "cursor-pointer rounded px-1 py-0.5 font-mono text-[0.625rem] text-muted-foreground hover:bg-muted hover:text-foreground",
-                    children: "md"
+                    "aria-label": `Actions for ${scenario.title}`,
+                    className: "cursor-pointer rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground [&_svg]:size-4",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react2.MoreHorizontalIcon, { "aria-hidden": true })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => actions.copyPrompt(scenario),
-                    "aria-label": `Copy ${scenario.title} as an AI investigation prompt`,
-                    title: "Copy as AI prompt",
-                    className: "cursor-pointer rounded px-1 py-0.5 font-mono text-[0.625rem] text-muted-foreground hover:bg-muted hover:text-foreground",
-                    children: "ai"
-                  }
-                )
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DropdownMenuContent, { align: "end", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DropdownMenuItem, { onClick: () => actions.copyLink(scenario), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react2.LinkIcon, {}),
+                    " Copy link"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DropdownMenuItem, { onClick: () => actions.copyMarkdown(scenario), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react2.FileTextIcon, {}),
+                    " Copy as Markdown"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DropdownMenuItem, { onClick: () => actions.copyPrompt(scenario), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react2.SparklesIcon, {}),
+                    " Explain with AI"
+                  ] })
+                ] })
               ] }) : null
             ] })
           ] }),
-          scenario.tags.length > 0 || (scenario.tickets?.length ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("ul", { "aria-label": "Tags and tickets", className: "flex flex-wrap gap-1.5", children: [
-            scenario.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Badge, { variant: "tag", children: t }) }, `tag-${t}`)),
-            (scenario.tickets ?? []).map((ticket) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: ticket.url ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: ticket.url, target: "_blank", rel: "noreferrer noopener", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Badge, { variant: "outline", children: ticket.id }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Badge, { variant: "outline", children: ticket.id }) }, `ticket-${ticket.id}`))
+          scenario.tags.length > 0 || (scenario.tickets?.length ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("ul", { "aria-label": "Tags and tickets", className: "flex flex-wrap gap-1.5", children: [
+            scenario.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Badge, { variant: "tag", children: t }) }, `tag-${t}`)),
+            (scenario.tickets ?? []).map((ticket) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { children: ticket.url ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ticket.url, target: "_blank", rel: "noreferrer noopener", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Badge, { variant: "outline", children: ticket.id }) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Badge, { variant: "outline", children: ticket.id }) }, `ticket-${ticket.id}`))
           ] }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardContent, { id: bodyId, hidden: collapsed, className: "px-4 pt-0 pb-4", children: [
-          scenario.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(CardContent, { id: bodyId, hidden: collapsed, className: "px-4 pt-0 pb-4", children: [
+          scenario.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "pre",
             {
               role: "alert",
@@ -1072,10 +1114,10 @@ function ReportScenario({ scenario, hideTitle = false }) {
               children: scenario.errorMessage
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ReportSteps, { scenario }),
-          scenario.docEntries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-es-docs": true, className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ReportDocEntries, { entries: scenario.docEntries }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ReportAttachments, { attachments: scenario.attachments }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ReportTrace, { spans: scenario.otelSpans })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ReportSteps, { scenario }),
+          scenario.docEntries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { "data-es-docs": true, className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ReportDocEntries, { entries: scenario.docEntries }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ReportAttachments, { attachments: scenario.attachments }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ReportTrace, { spans: scenario.otelSpans })
         ] })
       ]
     }
@@ -1083,13 +1125,13 @@ function ReportScenario({ scenario, hideTitle = false }) {
 }
 
 // src/components/ReportScenarioList.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function ReportScenarioList({ feature }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: feature.scenarios.map((scenario) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ReportScenario, { scenario }, scenario.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: feature.scenarios.map((scenario) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ReportScenario, { scenario }, scenario.id)) });
 }
 
 // src/components/ReportFeature.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function ReportFeature({ feature }) {
   const titleId = `${feature.id}-title`;
   const bodyId = `${feature.id}-body`;
@@ -1097,74 +1139,80 @@ function ReportFeature({ feature }) {
   const skipped = s.skipped + s.pending;
   const collapse = useCollapse();
   const collapsed = collapse?.isCollapsed(feature.id) ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    "section",
-    {
-      id: feature.id,
-      "data-slot": "feature",
-      "aria-labelledby": titleId,
-      className: "overflow-hidden rounded-xl border border-border bg-card shadow-sm",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-between gap-4 border-b border-border bg-muted/40 px-4 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
-            collapse ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-              "button",
+  return (
+    // Suite = a section heading + a divider, NOT another bordered card. Drops a
+    // layer of nesting so the scenario cards below read as the primary unit.
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "section",
+      {
+        id: feature.id,
+        "data-slot": "feature",
+        "aria-labelledby": titleId,
+        className: "flex flex-col gap-3",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-end justify-between gap-4 border-b border-border pb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { id: titleId, className: "text-base font-semibold tracking-tight text-foreground", children: collapse ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => collapse.toggle(feature.id),
+                  "aria-expanded": !collapsed,
+                  "aria-controls": bodyId,
+                  className: "flex w-full cursor-pointer items-center gap-2 text-left hover:text-foreground/80",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": true, className: cn("shrink-0 text-xs text-muted-foreground transition-transform", !collapsed && "rotate-90"), children: "\u25B8" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate", children: feature.title })
+                  ]
+                }
+              ) : feature.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: cn("mt-0.5 truncate font-mono text-xs text-muted-foreground", collapse && "pl-5"), children: feature.sourceFile })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+              "p",
               {
-                type: "button",
-                onClick: () => collapse.toggle(feature.id),
-                "aria-expanded": !collapsed,
-                "aria-controls": bodyId,
-                "aria-label": `Toggle ${feature.title}`,
-                className: "shrink-0 cursor-pointer text-muted-foreground hover:text-foreground",
-                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": true, className: cn("inline-block text-xs transition-transform", !collapsed && "rotate-90"), children: "\u25B8" })
+                className: "flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground",
+                "aria-label": `${s.passed} passed, ${s.failed} failed, ${skipped} skipped`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { children: [
+                    s.passed,
+                    " passed"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": true, children: "\xB7" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cn(s.failed > 0 && "font-medium text-fail"), children: [
+                    s.failed,
+                    " failed"
+                  ] }),
+                  skipped > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": true, children: "\xB7" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { children: [
+                      skipped,
+                      " skipped"
+                    ] })
+                  ] }) : null
+                ]
               }
-            ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { id: titleId, className: "text-sm font-semibold tracking-tight text-foreground", children: feature.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "mt-0.5 truncate font-mono text-xs text-muted-foreground", children: feature.sourceFile })
-            ] })
+            )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-            "div",
-            {
-              role: "img",
-              className: "flex shrink-0 items-center gap-2.5 font-mono text-xs font-medium",
-              "aria-label": `${s.passed} passed, ${s.failed} failed, ${skipped} skipped`,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { "aria-hidden": true, className: "text-pass", children: [
-                  "\u2713",
-                  s.passed
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { "aria-hidden": true, className: "text-fail", children: [
-                  "\u2717",
-                  s.failed
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { "aria-hidden": true, className: "text-skip", children: [
-                  "\u25CB",
-                  skipped
-                ] })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { id: bodyId, hidden: collapsed, className: "flex flex-col gap-2 p-3", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ReportScenarioList, { feature }) })
-      ]
-    }
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { id: bodyId, hidden: collapsed, className: "flex flex-col gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReportScenarioList, { feature }) })
+        ]
+      }
+    )
   );
 }
 
 // src/components/ReportFeatureList.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ReportFeatureList() {
   const report = useReport();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: report.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReportFeature, { feature }, feature.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-col gap-8", children: report.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ReportFeature, { feature }, feature.id)) });
 }
 
 // src/components/ui/empty.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       "data-slot": "empty",
@@ -1177,7 +1225,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       "data-slot": "empty-header",
@@ -1204,7 +1252,7 @@ var emptyMediaVariants = (0, import_class_variance_authority2.cva)(
   }
 );
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       "data-slot": "empty-title",
@@ -1215,16 +1263,16 @@ function EmptyTitle({ className, ...props }) {
 }
 
 // src/components/ReportEmpty.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function ReportEmpty({ message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Empty, { "aria-live": "polite", className: "border", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EmptyHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EmptyTitle, { children: message ?? "No scenarios in this report." }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Empty, { "aria-live": "polite", className: "border", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EmptyHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EmptyTitle, { children: message ?? "No scenarios in this report." }) }) });
 }
 
 // src/components/ReportSummary.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function ReportSummary({ className }) {
   const report = useReport();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     ReportSummaryView,
     {
       summary: report.summary,
@@ -1233,38 +1281,54 @@ function ReportSummary({ className }) {
     }
   );
 }
+var TONE = {
+  total: { num: "text-foreground", dot: "bg-muted-foreground/50" },
+  passed: { num: "text-pass", dot: "bg-pass" },
+  failed: { num: "text-fail", dot: "bg-fail" },
+  skipped: { num: "text-skip", dot: "bg-skip" },
+  pending: { num: "text-pend", dot: "bg-pend" }
+};
 function ReportSummaryView({ summary, className, ariaLabel }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: cn("text-sm text-muted-foreground", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("strong", { className: "font-semibold text-foreground", children: summary.total }),
-      " scenario",
-      summary.total === 1 ? "" : "s"
-    ] }),
-    " \xB7 ",
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { "data-status": "passed", className: "text-pass", children: [
-      summary.passed,
-      " passed"
-    ] }),
-    " \xB7 ",
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { "data-status": "failed", className: "text-fail", children: [
-      summary.failed,
-      " failed"
-    ] }),
-    summary.skipped > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-      " \xB7 ",
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { "data-status": "skipped", className: "text-skip", children: [
-        summary.skipped,
-        " skipped"
-      ] })
-    ] }) : null,
-    summary.pending > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-      " \xB7 ",
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { "data-status": "pending", className: "text-pend", children: [
-        summary.pending,
-        " pending"
-      ] })
-    ] }) : null
-  ] });
+  const cards = [
+    { status: "total", label: "Total", value: summary.total },
+    { status: "passed", label: "Passed", value: summary.passed },
+    { status: "failed", label: "Failed", value: summary.failed },
+    { status: "skipped", label: "Skipped", value: summary.skipped }
+  ];
+  if (summary.pending > 0) {
+    cards.push({ status: "pending", label: "Pending", value: summary.pending });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "dl",
+    {
+      className: cn(
+        "grid grid-cols-2 gap-3",
+        // Columns follow the card count so the row is always full — 5 statuses
+        // (pending present) never leave a lone orphan card below a row of four.
+        cards.length === 5 ? "sm:grid-cols-5" : "sm:grid-cols-4",
+        className
+      ),
+      "aria-label": ariaLabel,
+      children: cards.map((c) => {
+        const tone = TONE[c.status];
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          "div",
+          {
+            "data-status": c.status,
+            className: "rounded-lg border bg-card px-4 py-3",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("dt", { className: "flex items-center gap-1.5 font-mono text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("size-1.5 shrink-0 rounded-full", tone.dot), "aria-hidden": "true" }),
+                c.label
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("dd", { className: cn("mt-2 text-3xl font-semibold leading-none tracking-tight tabular-nums", tone.num), children: c.value })
+            ]
+          },
+          c.status
+        );
+      })
+    }
+  );
 }
 
 // src/lib/provenance.ts
@@ -1317,7 +1381,7 @@ function prUrl(ci) {
 }
 
 // src/components/ReportMeta.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ReportMeta() {
   const report = useReport();
   const items = [];
@@ -1340,13 +1404,13 @@ function ReportMeta() {
     const short = sha.slice(0, 8);
     items.push({
       label: "Commit",
-      value: url ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("a", { href: url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: short }) : short
+      value: url ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: short }) : short
     });
   }
   if (report.ci) {
     items.push({
       label: "CI",
-      value: report.ci.url ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("a", { href: report.ci.url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: [
+      value: report.ci.url ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("a", { href: report.ci.url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: [
         ciDisplayName(report.ci.name),
         report.ci.buildNumber ? ` #${report.ci.buildNumber}` : ""
       ] }) : `${ciDisplayName(report.ci.name)}${report.ci.buildNumber ? ` #${report.ci.buildNumber}` : ""}`
@@ -1357,59 +1421,172 @@ function ReportMeta() {
     const label = `#${report.ci.prNumber}`;
     items.push({
       label: "PR",
-      value: url ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("a", { href: url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: label }) : label
+      value: url ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: label }) : label
     });
   }
   if (items.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("dl", { "aria-label": "Run metadata", className: "flex flex-wrap gap-x-6 gap-y-1 text-xs text-muted-foreground", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex gap-1.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("dt", { className: "font-medium", children: item.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("dd", { className: "font-mono text-foreground", children: item.value })
-  ] }, item.label)) });
+  return (
+    // Run metadata is useful but secondary to "what failed" — tuck it into a
+    // collapsed disclosure so it doesn't push the result down. Native <details>
+    // so it works with no JS (the SSR/no-hydration report still toggles).
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("details", { "data-es-meta-card": true, className: "es-run-details group rounded-lg border border-border bg-card text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("summary", { className: "flex cursor-pointer list-none select-none items-center gap-1.5 px-4 py-2 font-medium text-muted-foreground [&::-webkit-details-marker]:hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "aria-hidden": true, className: "text-xs transition-transform group-open:rotate-90", children: "\u25B8" }),
+        "Run details"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dl", { className: "flex flex-wrap gap-x-5 gap-y-2 border-t border-border px-4 py-3 text-muted-foreground", "aria-label": "Run metadata", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-baseline gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dt", { className: "font-medium", children: item.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dd", { className: "font-mono text-foreground", children: item.value })
+      ] }, item.label)) })
+    ] })
+  );
 }
 
 // src/components/ReportSchemaError.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ReportSchemaError({ error }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "es-schema-error", role: "alert", "aria-live": "assertive", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("strong", { children: "Report could not be displayed." }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { children: error.message }),
-    error.code === "SCHEMA_VERSION_MISMATCH" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { className: "es-schema-error", role: "alert", "aria-live": "assertive", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("strong", { children: "Report could not be displayed." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { children: error.message }),
+    error.code === "SCHEMA_VERSION_MISMATCH" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { children: [
       "The report bundle is newer than this version of ",
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("code", { children: "executable-stories-react" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("code", { children: "executable-stories-react" }),
       ". Upgrade the package, or regenerate the report with an older formatters CLI."
     ] }) : null,
-    error.issues && error.issues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("details", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("summary", { children: [
+    error.issues && error.issues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("details", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("summary", { children: [
         error.issues.length,
         " validation issue",
         error.issues.length === 1 ? "" : "s"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("pre", { children: error.issues.slice(0, 20).map((i) => `${i.path}: ${i.message}`).join("\n") })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("pre", { children: error.issues.slice(0, 20).map((i) => `${i.path}: ${i.message}`).join("\n") })
     ] }) : null
   ] });
 }
 
 // src/components/ReportShell.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-function ReportTitleBlock({ title }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h1", { children: title ?? "Story Report" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ReportSummary, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ReportMeta, {})
-  ] });
-}
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ReportErrorShell({
   error,
   className,
   title,
   dataTheme
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ReportSchemaError, { error }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ReportSchemaError, { error }) });
+}
+
+// src/interactive/ReportInteractive.tsx
+var import_lucide_react5 = require("lucide-react");
+
+// src/components/ui/switch.tsx
+var React4 = require("react");
+var import_switch = require("@base-ui/react/switch");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function Switch({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_switch.Switch.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:bg-primary data-[unchecked]:bg-input",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        import_switch.Switch.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-[checked]:translate-x-[calc(100%-2px)] data-[unchecked]:translate-x-0"
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/toggle-group.tsx
+var React5 = __toESM(require("react"), 1);
+var import_toggle_group = require("@base-ui/react/toggle-group");
+var import_toggle = require("@base-ui/react/toggle");
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var toggleItemVariants = (0, import_class_variance_authority3.cva)(
+  "inline-flex items-center justify-center gap-1.5 rounded-md font-medium whitespace-nowrap text-muted-foreground transition-[color,background-color,box-shadow] outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-background data-[pressed]:text-foreground data-[pressed]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      size: {
+        default: "h-9 px-3 text-sm",
+        sm: "h-8 px-2.5 text-[0.82rem]"
+      }
+    },
+    defaultVariants: { size: "default" }
+  }
+);
+var ToggleGroupContext = React5.createContext({
+  size: "default"
+});
+function ToggleGroup({
+  className,
+  size,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_toggle_group.ToggleGroup,
+    {
+      "data-slot": "toggle-group",
+      className: cn("flex w-fit items-center gap-0.5 rounded-lg bg-muted p-0.5", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToggleGroupContext.Provider, { value: { size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  size,
+  ...props
+}) {
+  const context = React5.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_toggle.Toggle,
+    {
+      "data-slot": "toggle-group-item",
+      className: cn(toggleItemVariants({ size: context.size ?? size }), "flex-1 shrink-0", className),
+      ...props,
+      children
+    }
+  );
 }
 
 // src/interactive/ReportSearch.tsx
 var import_react8 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_lucide_react3 = require("lucide-react");
+
+// src/components/ui/input.tsx
+var React6 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/interactive/ReportSearch.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var ReportSearch = (0, import_react8.forwardRef)(
   function ReportSearch2(props, ref) {
     const {
@@ -1417,11 +1594,11 @@ var ReportSearch = (0, import_react8.forwardRef)(
       onChange,
       matchedCount,
       totalCount,
-      placeholder = "Search scenarios, tags, or step text\u2026",
+      placeholder = "Search scenarios or tags\u2026",
       className
     } = props;
     const inputId = (0, import_react8.useId)();
-    const showCounts = typeof matchedCount === "number" && typeof totalCount === "number";
+    const showCounts = value.trim().length > 0 && typeof matchedCount === "number" && typeof totalCount === "number";
     function handleChange(e) {
       onChange(e.target.value);
     }
@@ -1431,24 +1608,46 @@ var ReportSearch = (0, import_react8.forwardRef)(
         e.preventDefault();
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: ["es-search", className].filter(Boolean).join(" "), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { htmlFor: inputId, className: "es-search-label", children: "Search" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        "input",
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("es-search flex flex-col gap-1", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { htmlFor: inputId, className: "sr-only", children: "Search" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative w-full sm:w-72", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          import_lucide_react3.Search,
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          Input,
+          {
+            ref,
+            id: inputId,
+            type: "search",
+            value,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            placeholder,
+            autoComplete: "off",
+            spellCheck: false,
+            "aria-keyshortcuts": "/",
+            className: "pl-8"
+          }
+        )
+      ] }),
+      showCounts ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        "span",
         {
-          ref,
-          id: inputId,
-          type: "search",
-          value,
-          onChange: handleChange,
-          onKeyDown: handleKeyDown,
-          placeholder,
-          autoComplete: "off",
-          spellCheck: false,
-          "aria-keyshortcuts": "/"
+          className: "text-xs tabular-nums text-muted-foreground",
+          "aria-live": "polite",
+          children: [
+            matchedCount,
+            " of ",
+            totalCount,
+            " scenarios"
+          ]
         }
-      ),
-      showCounts ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "es-search-counts", "aria-live": "polite", children: value ? `${matchedCount} of ${totalCount}` : `${totalCount} total` }) : null
+      ) : null
     ] });
   }
 );
@@ -1477,7 +1676,7 @@ function scrollToScenarioId(scenarioId, options = {}) {
 }
 
 // src/interactive/ReportFailureBanner.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function ReportFailureBanner({ failures }) {
   const first = failures[0];
   const jumpToFirst = (0, import_react9.useCallback)(() => {
@@ -1485,7 +1684,7 @@ function ReportFailureBanner({ failures }) {
     scrollToScenarioId(first.scenarioId);
   }, [first]);
   if (failures.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       className: "es-failure-banner",
@@ -1493,20 +1692,20 @@ function ReportFailureBanner({ failures }) {
       "aria-live": "polite",
       "aria-label": "Failure summary",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "es-failure-banner-text", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: failures.length }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "es-failure-banner-text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("strong", { children: failures.length }),
           " ",
           "failure",
           failures.length === 1 ? "" : "s"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "button",
           {
             type: "button",
             className: "es-failure-banner-jump",
             onClick: jumpToFirst,
-            "aria-label": "Jump to first failure",
-            children: "Jump to first \u2193"
+            "aria-label": "View first failure",
+            children: "View first failure \u2193"
           }
         )
       ]
@@ -1516,7 +1715,7 @@ function ReportFailureBanner({ failures }) {
 
 // src/interactive/ReportFreshness.tsx
 var import_react10 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function ReportFreshness({ lastRunMs, ciUrl, staleAfterDays, nowMs }) {
   const [now, setNow] = (0, import_react10.useState)(nowMs);
   (0, import_react10.useEffect)(() => {
@@ -1524,7 +1723,7 @@ function ReportFreshness({ lastRunMs, ciUrl, staleAfterDays, nowMs }) {
   }, [nowMs]);
   if (lastRunMs === void 0 || now === void 0) return null;
   const age = formatRelativeAge(lastRunMs, now);
-  const runLink = ciUrl ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  const runLink = ciUrl ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "a",
     {
       href: ciUrl,
@@ -1535,22 +1734,22 @@ function ReportFreshness({ lastRunMs, ciUrl, staleAfterDays, nowMs }) {
     }
   ) : null;
   if (isReportStale(lastRunMs, staleAfterDays, now)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "es-stale-banner", role: "status", "aria-label": "Report freshness", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("strong", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "es-stale-banner", role: "status", "aria-label": "Report freshness", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("strong", { children: [
           "Last verified ",
           age,
           "."
         ] }),
-        " This report may no longer match the current behavior \u2014 look for a newer run."
+        " This report may no longer match the current behavior. Look for a newer run."
       ] }),
       runLink
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "es-freshness", "aria-label": "Report freshness", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { className: "es-freshness", "aria-label": "Report freshness", children: [
     "Verified ",
     age,
-    runLink ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    runLink ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
       " \xB7 ",
       runLink
     ] }) : null
@@ -1558,15 +1757,15 @@ function ReportFreshness({ lastRunMs, ciUrl, staleAfterDays, nowMs }) {
 }
 
 // src/interactive/ReportLastRunDelta.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var MAX_LINKS = 5;
 function ScenarioLinks({ scenarios, tone }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    scenarios.slice(0, MAX_LINKS).map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    scenarios.slice(0, MAX_LINKS).map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { children: [
       i > 0 ? ", " : "",
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { href: `#${s.id}`, className: cn("underline underline-offset-2 hover:no-underline", tone), children: s.title })
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("a", { href: `#${s.id}`, className: cn("underline underline-offset-2 hover:no-underline", tone), children: s.title })
     ] }, s.id)),
-    scenarios.length > MAX_LINKS ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { children: [
+    scenarios.length > MAX_LINKS ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { children: [
       " and ",
       scenarios.length - MAX_LINKS,
       " more"
@@ -1583,23 +1782,23 @@ function ReportLastRunDelta({
   if (!delta) return null;
   const { newlyFailing, newlyPassing, added } = delta;
   if (newlyFailing.length === 0 && newlyPassing.length === 0 && added.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xs text-muted-foreground", "data-testid": "es-last-run-delta", children: "Since last run: no behavior changes." });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-xs text-muted-foreground", "data-testid": "es-last-run-delta", children: "Since last run: no behavior changes." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "text-xs text-muted-foreground", "data-testid": "es-last-run-delta", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-medium text-foreground", children: "Since last run:" }),
-    newlyFailing.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "ml-2 text-fail", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "text-xs text-muted-foreground", "data-testid": "es-last-run-delta", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "font-medium text-foreground", children: "Since last run:" }),
+    newlyFailing.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ml-2 text-fail", children: [
       newlyFailing.length,
       " newly failing (",
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ScenarioLinks, { scenarios: newlyFailing, tone: "text-fail" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ScenarioLinks, { scenarios: newlyFailing, tone: "text-fail" }),
       ")"
     ] }) : null,
-    newlyPassing.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "ml-2 text-pass", children: [
+    newlyPassing.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ml-2 text-pass", children: [
       newlyPassing.length,
       " fixed (",
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ScenarioLinks, { scenarios: newlyPassing, tone: "text-pass" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ScenarioLinks, { scenarios: newlyPassing, tone: "text-pass" }),
       ")"
     ] }) : null,
-    added.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "ml-2", children: [
+    added.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ml-2", children: [
       added.length,
       " new"
     ] }) : null
@@ -1608,14 +1807,78 @@ function ReportLastRunDelta({
 
 // src/interactive/ReportShortcutsHelp.tsx
 var import_react11 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+
+// src/components/ui/button.tsx
+var React7 = require("react");
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_use_render2 = require("@base-ui/react/use-render");
+var buttonVariants = (0, import_class_variance_authority4.cva)(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  render,
+  ...props
+}) {
+  return (0, import_use_render2.useRender)({
+    defaultTagName: "button",
+    render,
+    props: {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  });
+}
+
+// src/interactive/ReportShortcutsHelp.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var SHORTCUTS = [
   { keys: "/", description: "Focus search" },
   { keys: "f", description: "Jump to next failure" },
-  { keys: "Shift+F", description: "Jump to previous failure" },
-  { keys: "Esc", description: "Clear search / close dialog" },
-  { keys: "?", description: "Toggle this help" }
+  { keys: "Shift F", description: "Jump to previous failure" },
+  { keys: "e", description: "Expand all" },
+  { keys: "c", description: "Collapse all" },
+  { keys: "?", description: "Toggle this help" },
+  { keys: "Esc", description: "Clear search / close" }
 ];
+function Keys({ keys }) {
+  const parts = keys.split(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "inline-flex items-center gap-1", children: parts.map((k, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
+    i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xs text-muted-foreground", children: "+" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("kbd", { className: "inline-flex h-6 min-w-6 items-center justify-center rounded border border-border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground", children: k })
+  ] }, k)) });
+}
 function ReportShortcutsHelp({ open, onClose }) {
   const dialogRef = (0, import_react11.useRef)(null);
   (0, import_react11.useEffect)(() => {
@@ -1624,20 +1887,20 @@ function ReportShortcutsHelp({ open, onClose }) {
     if (open && !dialog.open) dialog.showModal();
     else if (!open && dialog.open) dialog.close();
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "dialog",
     {
       ref: dialogRef,
-      className: "es-shortcuts-help",
+      className: "es-shortcuts-help m-auto w-[min(90vw,28rem)] rounded-lg border border-border bg-card p-6 text-card-foreground shadow-lg [overscroll-behavior:contain] backdrop:bg-black/40",
       "aria-label": "Keyboard shortcuts",
       onClose,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h2", { children: "Keyboard shortcuts" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("dl", { children: SHORTCUTS.map((s) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("dt", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("kbd", { children: s.keys }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("dd", { children: s.description })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h2", { className: "text-base font-semibold", children: "Keyboard shortcuts" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dl", { className: "mt-4 grid grid-cols-[auto_1fr] items-center gap-x-4 gap-y-2.5", children: SHORTCUTS.map((s) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "col-span-2 grid grid-cols-subgrid items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dt", { className: "justify-self-start", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Keys, { keys: s.keys }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dd", { className: "text-sm text-muted-foreground", children: s.description })
         ] }, s.keys)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("form", { method: "dialog", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "submit", className: "es-shortcuts-close", children: "Close" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("form", { method: "dialog", className: "mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { type: "submit", variant: "outline", size: "sm", children: "Close" }) })
       ]
     }
   );
@@ -1810,7 +2073,9 @@ function listFailures(report) {
 }
 
 // src/interactive/ReportFilters.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var TAG_LIMIT = 12;
 function ReportFilters({
   statuses,
   status,
@@ -1819,11 +2084,14 @@ function ReportFilters({
   activeTags,
   onToggleTag
 }) {
+  const [showAllTags, setShowAllTags] = (0, import_react14.useState)(false);
   if (statuses.length === 0 && tags.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    statuses.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { role: "group", "aria-label": "Filter by status", className: "flex flex-wrap gap-1", children: statuses.map((opt) => {
+  const tagsCollapsed = tags.length > TAG_LIMIT && !showAllTags;
+  const visibleTags = tagsCollapsed ? tags.slice(0, TAG_LIMIT) : tags;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    statuses.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { role: "group", "aria-label": "Filter by status", className: "flex flex-wrap gap-1", children: statuses.map((opt) => {
       const active = status === opt.key;
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         "button",
         {
           type: "button",
@@ -1835,45 +2103,66 @@ function ReportFilters({
           ),
           children: [
             opt.label,
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ml-1 font-mono opacity-70", children: opt.count })
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ml-1 font-mono opacity-70", children: opt.count })
           ]
         },
         opt.key
       );
     }) }) : null,
-    tags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { "aria-label": "Filter by tag", className: "flex flex-wrap gap-1.5", children: tags.map((tag) => {
-      const active = activeTags.includes(tag);
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    tags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("ul", { "aria-label": "Filter by tag", className: "flex flex-wrap items-center gap-1.5", children: [
+      visibleTags.map((tag) => {
+        const active = activeTags.includes(tag);
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": active,
+            onClick: () => onToggleTag(tag),
+            className: "cursor-pointer",
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              Badge,
+              {
+                variant: "tag",
+                className: cn(
+                  active && "border-primary bg-primary text-primary-foreground"
+                ),
+                children: tag
+              }
+            )
+          }
+        ) }, tag);
+      }),
+      tags.length > TAG_LIMIT ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "button",
         {
           type: "button",
-          "aria-pressed": active,
-          onClick: () => onToggleTag(tag),
-          className: "cursor-pointer",
-          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Badge, { variant: active ? "default" : "tag", children: tag })
+          "aria-expanded": showAllTags,
+          onClick: () => setShowAllTags((v) => !v),
+          className: "cursor-pointer rounded-full px-2 py-0.5 text-xs font-medium text-muted-foreground hover:text-foreground",
+          children: tagsCollapsed ? `+${tags.length - TAG_LIMIT} more` : "Show fewer"
         }
-      ) }, tag);
-    }) }) : null
+      ) }) : null
+    ] }) : null
   ] });
 }
 
 // src/interactive/ReportToc.tsx
-var import_react14 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var DOT = {
-  passed: "text-pass",
-  failed: "text-fail",
-  skipped: "text-skip",
-  pending: "text-pend"
+  passed: "bg-pass",
+  failed: "bg-fail",
+  skipped: "bg-skip",
+  pending: "bg-pend"
 };
-function ReportToc() {
+function TocContent({ onNavigate }) {
   const report = useReport();
-  const [activeId, setActiveId] = (0, import_react14.useState)(null);
-  const scenarioIds = (0, import_react14.useMemo)(
+  const [activeId, setActiveId] = (0, import_react15.useState)(null);
+  const scenarioIds = (0, import_react15.useMemo)(
     () => report.features.flatMap((f) => f.scenarios.map((s) => s.id)),
     [report]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (typeof IntersectionObserver === "undefined") return;
     const els = scenarioIds.map((id) => document.getElementById(id)).filter((el) => el !== null);
     if (els.length === 0) return;
@@ -1888,91 +2177,166 @@ function ReportToc() {
     return () => observer.disconnect();
   }, [scenarioIds]);
   if (report.features.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: "flex list-none flex-col gap-4 pl-0", children: report.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "mb-1.5 font-semibold leading-snug text-foreground", children: feature.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: "flex list-none flex-col gap-0.5 pl-0", children: feature.scenarios.map((scenario) => {
+      const active = activeId === scenario.id;
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        "a",
+        {
+          href: `#${scenario.id}`,
+          onClick: (e) => {
+            e.preventDefault();
+            scrollToScenarioId(scenario.id, { updateHash: true });
+            onNavigate?.();
+          },
+          "aria-current": active ? "true" : void 0,
+          className: cn(
+            "flex items-start gap-2 border-l-2 py-1 pl-2.5 leading-snug hover:text-foreground",
+            active ? "border-primary font-medium text-foreground" : "border-border text-muted-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn("mt-1 size-1.5 shrink-0 rounded-full", DOT[scenario.status])
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "break-words", children: scenario.title })
+          ]
+        }
+      ) }, scenario.id);
+    }) })
+  ] }, feature.id)) });
+}
+function ReportToc() {
+  const report = useReport();
+  if (report.features.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "nav",
     {
       "aria-label": "Table of contents",
-      className: "sticky top-4 hidden h-fit w-56 shrink-0 self-start text-xs lg:block",
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: "flex flex-col gap-3", children: report.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-1 truncate font-semibold text-foreground", children: feature.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: "flex flex-col", children: feature.scenarios.map((scenario) => {
-          const active = activeId === scenario.id;
-          return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-            "a",
-            {
-              href: `#${scenario.id}`,
-              onClick: (e) => {
-                e.preventDefault();
-                scrollToScenarioId(scenario.id, { updateHash: true });
-              },
-              "aria-current": active ? "true" : void 0,
-              className: cn(
-                "flex items-center gap-1.5 truncate border-l-2 py-0.5 pl-2 hover:text-foreground",
-                active ? "border-primary font-medium text-foreground" : "border-border text-muted-foreground"
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: cn("shrink-0", DOT[scenario.status]), children: "\u2022" }),
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "truncate", children: scenario.title })
-              ]
-            }
-          ) }, scenario.id);
-        }) })
-      ] }, feature.id)) })
+      className: "sticky top-4 hidden h-fit w-64 shrink-0 self-start text-xs lg:block",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Contents" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TocContent, {})
+      ]
     }
   );
 }
 
+// src/interactive/ReportTocDrawer.tsx
+var import_react16 = require("react");
+var import_dialog = require("@base-ui/react/dialog");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+function ReportTocDrawer() {
+  const report = useReport();
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  if (report.features.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_dialog.Dialog.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_dialog.Dialog.Trigger, { className: "flex cursor-pointer items-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground lg:hidden [&_svg]:size-3.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react4.ListIcon, { "aria-hidden": true }),
+      " Contents"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_dialog.Dialog.Portal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_dialog.Dialog.Backdrop, { className: "fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_dialog.Dialog.Popup, { className: "fixed inset-y-0 left-0 z-50 flex w-72 max-w-[80vw] flex-col gap-3 overflow-y-auto border-r border-border bg-background p-4 font-sans text-xs shadow-lg outline-none transition-transform duration-200 data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_dialog.Dialog.Title, { className: "text-xs font-semibold tracking-wide text-muted-foreground uppercase", children: "Contents" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_dialog.Dialog.Close,
+            {
+              "aria-label": "Close contents",
+              className: "cursor-pointer rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground [&_svg]:size-4",
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react4.XIcon, { "aria-hidden": true })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TocContent, { onNavigate: () => setOpen(false) })
+      ] })
+    ] })
+  ] });
+}
+
 // src/interactive/use-theme.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 var KEY = "es-theme";
-function applyTheme(theme) {
+function systemDark() {
+  return typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function resolve(pref) {
+  return pref === "system" ? systemDark() ? "dark" : "light" : pref;
+}
+function applyTheme(pref) {
   if (typeof document !== "undefined") {
-    document.documentElement.setAttribute("data-theme", theme);
+    document.documentElement.setAttribute("data-theme", resolve(pref));
   }
 }
-function initialTheme() {
+function initialPref() {
   if (typeof localStorage !== "undefined") {
     const stored = localStorage.getItem(KEY);
-    if (stored === "light" || stored === "dark") return stored;
-  }
-  if (typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark") {
-    return "dark";
+    if (stored === "light" || stored === "dark" || stored === "system") return stored;
   }
-  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)").matches) {
-    return "dark";
-  }
-  return "light";
+  return "system";
 }
 function useTheme() {
-  const [theme, setTheme] = (0, import_react15.useState)("light");
-  (0, import_react15.useEffect)(() => {
-    const t = initialTheme();
-    setTheme(t);
-    applyTheme(t);
+  const [pref, setPrefState] = (0, import_react17.useState)("system");
+  (0, import_react17.useEffect)(() => {
+    const p = initialPref();
+    setPrefState(p);
+    applyTheme(p);
   }, []);
-  const toggle = (0, import_react15.useCallback)(() => {
-    setTheme((prev) => {
-      const next = prev === "dark" ? "light" : "dark";
-      applyTheme(next);
-      try {
-        localStorage.setItem(KEY, next);
-      } catch {
-      }
-      return next;
-    });
+  (0, import_react17.useEffect)(() => {
+    if (typeof matchMedia === "undefined") return;
+    const mq = matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => {
+      if (pref === "system") applyTheme("system");
+    };
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [pref]);
+  const setPref = (0, import_react17.useCallback)((p) => {
+    setPrefState(p);
+    applyTheme(p);
+    try {
+      localStorage.setItem(KEY, p);
+    } catch {
+    }
   }, []);
-  return { theme, toggle };
+  return { pref, setPref };
 }
 
 // src/interactive/ReportInteractive.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function ReportInteractive(props) {
   const { report, className, title, dataTheme } = props;
   const result = unwrapReport(report);
   if (!result.ok) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportErrorShell, { error: result.error, className, title, dataTheme });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportErrorShell, { error: result.error, className, title, dataTheme });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportInteractiveView, { ...props, report: result.data });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportInteractiveView, { ...props, report: result.data });
+}
+var THEME_OPTIONS = [
+  { value: "light", label: "Light", Icon: import_lucide_react5.Sun },
+  { value: "system", label: "System", Icon: import_lucide_react5.Monitor },
+  { value: "dark", label: "Dark", Icon: import_lucide_react5.Moon }
+];
+function ThemeSegment({ pref, onPref }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ToggleGroup,
+    {
+      size: "sm",
+      value: [pref],
+      onValueChange: (v) => {
+        const next = v[0];
+        if (next) onPref(next);
+      },
+      "aria-label": "Color theme",
+      children: THEME_OPTIONS.map(({ value, label, Icon }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ToggleGroupItem, { value, "aria-label": label, title: label, className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, {}) }, value))
+    }
+  );
 }
 function ReportInteractiveView({
   report,
@@ -1982,24 +2346,27 @@ function ReportInteractiveView({
   title,
   dataTheme,
   hideHeader = false,
+  hideToc = false,
   staleAfterDays = 7,
   scenarioHistory
 }) {
-  const [query, setQuery] = (0, import_react16.useState)("");
-  const [statusFilter, setStatusFilter] = (0, import_react16.useState)("all");
-  const [activeTags, setActiveTags] = (0, import_react16.useState)([]);
-  const [detail, setDetail] = (0, import_react16.useState)("full");
-  const [helpOpen, setHelpOpen] = (0, import_react16.useState)(false);
-  const { theme, toggle: toggleTheme } = useTheme();
-  const searchRef = (0, import_react16.useRef)(null);
-  const deferredQuery = (0, import_react16.useDeferredValue)(query);
-  const failures = (0, import_react16.useMemo)(() => listFailures(report), [report]);
-  const filtered = (0, import_react16.useMemo)(
+  const [query, setQuery] = (0, import_react18.useState)("");
+  const [statusFilter, setStatusFilter] = (0, import_react18.useState)("all");
+  const [activeTags, setActiveTags] = (0, import_react18.useState)([]);
+  const [detail, setDetail] = (0, import_react18.useState)("full");
+  const [helpOpen, setHelpOpen] = (0, import_react18.useState)(false);
+  const { pref: themePref, setPref: setThemePref } = useTheme();
+  const searchRef = (0, import_react18.useRef)(null);
+  const expandId = (0, import_react18.useId)();
+  const docsId = (0, import_react18.useId)();
+  const deferredQuery = (0, import_react18.useDeferredValue)(query);
+  const failures = (0, import_react18.useMemo)(() => listFailures(report), [report]);
+  const filtered = (0, import_react18.useMemo)(
     () => filterReport(report, { query: deferredQuery, status: statusFilter, tags: activeTags }),
     [report, deferredQuery, statusFilter, activeTags]
   );
   const isFiltering = query !== deferredQuery;
-  const statusOptions = (0, import_react16.useMemo)(() => {
+  const statusOptions = (0, import_react18.useMemo)(() => {
     const s = report.summary;
     const opts = [
       { key: "all", label: "All", count: s.total }
@@ -2010,19 +2377,19 @@ function ReportInteractiveView({
     if (s.pending) opts.push({ key: "pending", label: "Pending", count: s.pending });
     return opts;
   }, [report]);
-  const tagOptions = (0, import_react16.useMemo)(() => allTags(report), [report]);
-  const toggleTag = (0, import_react16.useCallback)(
+  const tagOptions = (0, import_react18.useMemo)(() => allTags(report), [report]);
+  const toggleTag = (0, import_react18.useCallback)(
     (tag) => setActiveTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]),
     []
   );
-  const [toast, setToast] = (0, import_react16.useState)(null);
-  const toastTimer = (0, import_react16.useRef)(null);
-  const showToast = (0, import_react16.useCallback)((msg) => {
+  const [toast, setToast] = (0, import_react18.useState)(null);
+  const toastTimer = (0, import_react18.useRef)(null);
+  const showToast = (0, import_react18.useCallback)((msg) => {
     setToast(msg);
     if (toastTimer.current) clearTimeout(toastTimer.current);
     toastTimer.current = setTimeout(() => setToast(null), 1800);
   }, []);
-  const copy = (0, import_react16.useCallback)(
+  const copy = (0, import_react18.useCallback)(
     (text, msg) => {
       if (typeof navigator !== "undefined" && navigator.clipboard) {
         navigator.clipboard.writeText(text).then(() => showToast(msg), () => showToast("Copy failed"));
@@ -2030,7 +2397,7 @@ function ReportInteractiveView({
     },
     [showToast]
   );
-  const scenarioActions = (0, import_react16.useMemo)(
+  const scenarioActions = (0, import_react18.useMemo)(
     () => ({
       copyLink: (s) => copy(scenarioPermalink(s), "Link copied"),
       copyMarkdown: (s) => copy(scenarioToMarkdown(s), "Markdown copied"),
@@ -2038,17 +2405,26 @@ function ReportInteractiveView({
     }),
     [copy]
   );
-  const failureIndexRef = (0, import_react16.useRef)(0);
-  const collapse = useCollapseState();
-  const allCollapsibleIds = (0, import_react16.useMemo)(
+  const failureIndexRef = (0, import_react18.useRef)(0);
+  const allCollapsibleIds = (0, import_react18.useMemo)(
     () => report.features.flatMap((f) => [f.id, ...f.scenarios.map((s) => s.id)]),
     [report]
   );
-  const collapseAll = (0, import_react16.useCallback)(() => collapse.collapseAll(allCollapsibleIds), [collapse, allCollapsibleIds]);
-  const focusSearch = (0, import_react16.useCallback)(() => {
+  const collapse = useCollapseState();
+  const collapseAll = (0, import_react18.useCallback)(() => collapse.collapseAll(allCollapsibleIds), [collapse, allCollapsibleIds]);
+  const [expandedAll, setExpandedAll] = (0, import_react18.useState)(true);
+  const setExpanded = (0, import_react18.useCallback)(
+    (expanded) => {
+      if (expanded) collapse.expandAll();
+      else collapseAll();
+      setExpandedAll(expanded);
+    },
+    [collapse, collapseAll]
+  );
+  const focusSearch = (0, import_react18.useCallback)(() => {
     searchRef.current?.focus();
   }, []);
-  const stepFailure = (0, import_react16.useCallback)(
+  const stepFailure = (0, import_react18.useCallback)(
     (direction) => {
       if (failures.length === 0) return;
       failureIndexRef.current = (failureIndexRef.current + direction + failures.length) % failures.length;
@@ -2057,10 +2433,10 @@ function ReportInteractiveView({
     },
     [failures]
   );
-  const toggleHelp = (0, import_react16.useCallback)(() => {
+  const toggleHelp = (0, import_react18.useCallback)(() => {
     setHelpOpen((v) => !v);
   }, []);
-  const escape = (0, import_react16.useCallback)(() => {
+  const escape = (0, import_react18.useCallback)(() => {
     if (helpOpen) setHelpOpen(false);
     else if (query !== "") setQuery("");
   }, [helpOpen, query]);
@@ -2070,20 +2446,21 @@ function ReportInteractiveView({
     onPrevFailure: () => stepFailure(-1),
     onToggleHelp: toggleHelp,
     onEscape: escape,
-    onExpandAll: collapse.expandAll,
-    onCollapseAll: collapseAll
+    onExpandAll: () => setExpanded(true),
+    onCollapseAll: () => setExpanded(false)
   });
   useDeepLinkScroll();
   const hasContent = filtered.features.length > 0;
   const totalScenarios = report.summary.total;
   const matchedScenarios = filtered.summary.total;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CollapseProvider, { value: collapse.api, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ScenarioActionsProvider, { value: scenarioActions, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ScenarioHistoryProvider, { value: scenarioHistory ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  const showToc = !hideToc && totalScenarios > 3;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CollapseProvider, { value: collapse.api, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ScenarioActionsProvider, { value: scenarioActions, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ScenarioHistoryProvider, { value: scenarioHistory ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     ReportRoot,
     {
       report: filtered,
       customRenderers,
       renderers,
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         "main",
         {
           className: cn("es-report", "es-report-interactive", className),
@@ -2092,9 +2469,38 @@ function ReportInteractiveView({
           "data-theme": dataTheme,
           "data-detail-level": detail,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("header", { className: "es-report-header", children: [
-              hideHeader ? null : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportTitleBlock, { title }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("header", { className: "es-report-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                "div",
+                {
+                  "data-es-navbar": true,
+                  className: cn(
+                    "flex flex-wrap items-center gap-4",
+                    hideHeader ? "justify-end" : "justify-between"
+                  ),
+                  children: [
+                    hideHeader ? null : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h1", { className: "min-w-0", children: title ?? "Story Report" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                        ReportSearch,
+                        {
+                          ref: searchRef,
+                          value: query,
+                          onChange: setQuery,
+                          matchedCount: matchedScenarios,
+                          totalCount: totalScenarios
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeSegment, { pref: themePref, onPref: setThemePref })
+                    ] })
+                  ]
+                }
+              ),
+              hideHeader ? null : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportSummary, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportMeta, {})
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 ReportFreshness,
                 {
                   lastRunMs: reportLastRunMs(report),
@@ -2102,62 +2508,8 @@ function ReportInteractiveView({
                   staleAfterDays
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportLastRunDelta, { history: scenarioHistory, report }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                  ReportSearch,
-                  {
-                    ref: searchRef,
-                    value: query,
-                    onChange: setQuery,
-                    matchedCount: matchedScenarios,
-                    totalCount: totalScenarios
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex shrink-0 gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: collapse.expandAll,
-                      "aria-keyshortcuts": "e",
-                      className: "cursor-pointer rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
-                      children: "Expand all"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: collapseAll,
-                      "aria-keyshortcuts": "c",
-                      className: "cursor-pointer rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
-                      children: "Collapse all"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setDetail((d) => d === "full" ? "minimal" : "full"),
-                      "aria-pressed": detail === "minimal",
-                      className: "cursor-pointer rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
-                      children: detail === "full" ? "Hide docs" : "Show docs"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: toggleTheme,
-                      "aria-label": `Switch to ${theme === "dark" ? "light" : "dark"} theme`,
-                      className: "cursor-pointer rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
-                      children: theme === "dark" ? "\u2600 Light" : "\u263E Dark"
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportLastRunDelta, { history: scenarioHistory, report }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 ReportFilters,
                 {
                   statuses: statusOptions,
@@ -2167,26 +2519,44 @@ function ReportInteractiveView({
                   activeTags,
                   onToggleTag: toggleTag
                 }
-              )
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-2 border-t border-border/60 pt-3", children: [
+                showToc ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportTocDrawer, {}) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Switch, { id: expandId, checked: expandedAll, onCheckedChange: setExpanded }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { htmlFor: expandId, className: "cursor-pointer text-sm text-muted-foreground select-none", children: "Expand all" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    Switch,
+                    {
+                      id: docsId,
+                      checked: detail === "full",
+                      onCheckedChange: (checked) => setDetail(checked ? "full" : "minimal")
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { htmlFor: docsId, className: "cursor-pointer text-sm text-muted-foreground select-none", children: "Show documentation" })
+                ] })
+              ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportFailureBanner, { failures }),
-            hasContent ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex gap-6", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportToc, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportFeatureList, {}) })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportEmpty, { message: query ? "No scenarios match the search." : void 0 }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportFailureBanner, { failures }),
+            hasContent ? showToc ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex gap-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportToc, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportFeatureList, {}) })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportFeatureList, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportEmpty, { message: query ? "No scenarios match the search." : void 0 }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "button",
               {
                 type: "button",
-                className: "es-shortcuts-trigger",
+                className: "es-shortcuts-trigger fixed right-4 bottom-4 z-40 flex size-9 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50",
                 "aria-label": "Keyboard shortcuts",
-                "aria-keyshortcuts": "Shift+?",
+                "aria-keyshortcuts": "?",
                 onClick: toggleHelp,
                 children: "?"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportShortcutsHelp, { open: helpOpen, onClose: () => setHelpOpen(false) }),
-            toast ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReportShortcutsHelp, { open: helpOpen, onClose: () => setHelpOpen(false) }),
+            toast ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "div",
               {
                 role: "status",
@@ -2203,14 +2573,14 @@ function ReportInteractiveView({
 }
 
 // src/interactive/ReportInteractiveIsland.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 
 // src/interactive/island-renderers.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/components/doc/MermaidView.tsx
-var import_react17 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function prefersDark(el) {
   const themed = el?.closest("[data-theme]");
   if (themed?.dataset.theme === "dark") return true;
@@ -2218,9 +2588,9 @@ function prefersDark(el) {
   return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-color-scheme: dark)").matches;
 }
 function MermaidView({ entry, load }) {
-  const ref = (0, import_react17.useRef)(null);
-  const [svg, setSvg] = (0, import_react17.useState)(null);
-  (0, import_react17.useEffect)(() => {
+  const ref = (0, import_react19.useRef)(null);
+  const [svg, setSvg] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
     let cancelled = false;
     const draw = async () => {
       try {
@@ -2247,9 +2617,9 @@ function MermaidView({ entry, load }) {
     };
   }, [entry.code, load]);
   if (svg) {
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("figure", { ref, className: "my-3", children: [
+      entry.title ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("figcaption", { className: "mb-1.5 text-xs font-medium text-muted-foreground", children: entry.title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "div",
         {
           role: "img",
@@ -2260,11 +2630,11 @@ function MermaidView({ entry, load }) {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MermaidSource, { entry, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MermaidSource, { entry, ref });
 }
 
 // src/interactive/island-renderers.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var HLJS_ESM = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js";
 var MERMAID_ESM = "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
 function cachedCdnModule(url) {
@@ -2281,8 +2651,8 @@ function cachedCdnModule(url) {
 var loadMermaidFromCdn = cachedCdnModule(MERMAID_ESM);
 var loadHljs = cachedCdnModule(HLJS_ESM);
 function CdnHighlightedCode({ entry }) {
-  const [html, setHtml] = (0, import_react18.useState)(null);
-  (0, import_react18.useEffect)(() => {
+  const [html, setHtml] = (0, import_react20.useState)(null);
+  (0, import_react20.useEffect)(() => {
     let cancelled = false;
     void (async () => {
       try {
@@ -2298,46 +2668,48 @@ function CdnHighlightedCode({ entry }) {
       cancelled = true;
     };
   }, [entry.content, entry.lang]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CodeFigure, { label: entry.label, children: html !== null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CodeFigure, { label: entry.label, children: html !== null ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "code",
     {
       className: cn("hljs font-mono text-xs", entry.lang && `language-${entry.lang}`),
       dangerouslySetInnerHTML: { __html: html }
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("code", { className: cn("font-mono text-xs", entry.lang && `language-${entry.lang}`), children: entry.content }) });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("code", { className: cn("font-mono text-xs", entry.lang && `language-${entry.lang}`), children: entry.content }) });
 }
 function buildIslandRenderers(opts) {
   const renderers = {};
   if (opts.mermaid) {
-    renderers.mermaid = (entry) => (0, import_react18.createElement)(MermaidView, { entry, load: loadMermaidFromCdn });
+    renderers.mermaid = (entry) => (0, import_react20.createElement)(MermaidView, { entry, load: loadMermaidFromCdn });
   }
   if (opts.syntaxHighlighting) {
-    renderers.code = (entry) => (0, import_react18.createElement)(CdnHighlightedCode, { entry });
+    renderers.code = (entry) => (0, import_react20.createElement)(CdnHighlightedCode, { entry });
   }
   return renderers;
 }
 
 // src/interactive/ReportInteractiveIsland.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function ReportInteractiveIsland({
   report,
   title,
   className,
   hideHeader,
+  hideToc,
   syntaxHighlighting = true,
   mermaid = true
 }) {
-  const renderers = (0, import_react19.useMemo)(
+  const renderers = (0, import_react21.useMemo)(
     () => buildIslandRenderers({ syntaxHighlighting, mermaid }),
     [syntaxHighlighting, mermaid]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     ReportInteractive,
     {
       report,
       title,
       className,
       hideHeader,
+      hideToc,
       renderers
     }
   );