executable-stories-react 0.4.0 → 0.5.0

package/dist/interactive.js

@@ -4,9 +4,10 @@
 import {
   useCallback as useCallback4,
   useDeferredValue,
+  useId as useId2,
   useMemo as useMemo3,
   useRef as useRef3,
-  useState as useState5
+  useState as useState7
 } from "react";
 
 // src/result.ts
@@ -106,11 +107,15 @@ var badgeVariants = 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: {
@@ -663,7 +668,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
           }
         ),
@@ -802,12 +807,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) {
@@ -817,8 +822,10 @@ function persist(ids) {
   } catch {
   }
 }
-function useCollapseState() {
-  const [collapsed, setCollapsed] = useState(readPersisted);
+function useCollapseState(computeDefault) {
+  const [collapsed, setCollapsed] = useState(
+    () => readPersisted() ?? computeDefault?.() ?? /* @__PURE__ */ new Set()
+  );
   const isCollapsed = useCallback((id) => collapsed.has(id), [collapsed]);
   const toggle = useCallback((id) => {
     setCollapsed((prev) => {
@@ -896,7 +903,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
@@ -927,52 +934,89 @@ function CardContent({ className, ...props }) {
   );
 }
 
-// src/components/ReportScenario.tsx
+// src/components/ui/dropdown-menu.tsx
+import "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { CheckIcon } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs14 } from "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__ */ jsx22(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger(props) {
+  return /* @__PURE__ */ jsx22(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  className,
+  align = "end",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx22(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx22(
+    MenuPrimitive.Positioner,
+    {
+      "data-slot": "dropdown-menu-positioner",
+      className: "z-50",
+      align,
+      sideOffset,
+      children: /* @__PURE__ */ jsx22(
+        MenuPrimitive.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__ */ jsx22(
+    MenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      className: cn(itemClasses, className),
+      ...props
+    }
+  );
+}
+
+// src/components/ReportScenario.tsx
+import { LinkIcon, FileTextIcon, SparklesIcon, MoreHorizontalIcon } from "lucide-react";
+import { jsx as jsx23, jsxs as jsxs15 } from "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__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     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__ */ jsxs14(CardHeader, { className: "px-4 py-3", children: [
-          /* @__PURE__ */ jsxs14("div", { className: cn("flex items-start gap-4", hideTitle ? "justify-end" : "justify-between"), children: [
-            hideTitle ? null : /* @__PURE__ */ jsxs14("h3", { id: titleId, className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
-              collapsible ? /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsxs15(CardHeader, { className: "px-4 py-3", children: [
+          /* @__PURE__ */ jsxs15("div", { className: cn("flex items-start gap-4", hideTitle ? "justify-end" : "justify-between"), children: [
+            hideTitle ? null : /* @__PURE__ */ jsxs15("h3", { id: titleId, className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+              collapsible ? /* @__PURE__ */ jsx23(
                 "button",
                 {
                   type: "button",
@@ -981,60 +1025,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__ */ jsx22("span", { "aria-hidden": true, className: cn("inline-block text-xs transition-transform", !collapsed && "rotate-90"), children: "\u25B8" })
+                  children: /* @__PURE__ */ jsx23("span", { "aria-hidden": true, className: cn("inline-block text-xs transition-transform", !collapsed && "rotate-90"), children: "\u25B8" })
                 }
               ) : null,
-              /* @__PURE__ */ jsx22("span", { "aria-hidden": true, className: cn("text-sm leading-none", STATUS_GLYPH_COLOR[scenario.status]), children: STATUS_GLYPH[scenario.status] }),
-              /* @__PURE__ */ jsx22("span", { children: scenario.title })
+              /* @__PURE__ */ jsx23("span", { "aria-hidden": true, className: cn("text-sm leading-none", meta.glyphColor), children: meta.glyph }),
+              /* @__PURE__ */ jsx23("span", { children: scenario.title })
             ] }),
-            /* @__PURE__ */ jsxs14("div", { className: "flex shrink-0 items-center gap-2", children: [
-              /* @__PURE__ */ jsx22(ScenarioRunHistory, { scenarioId: scenario.id }),
-              scenario.durationMs > 0 ? /* @__PURE__ */ jsx22("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: formatDuration(scenario.durationMs) }) : null,
-              /* @__PURE__ */ jsx22(Badge, { variant: STATUS_BADGE[scenario.status], "aria-label": `Status: ${label}`, children: label }),
-              actions ? /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-0.5", children: [
-                /* @__PURE__ */ jsx22(
-                  "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__ */ jsx22(
-                  "button",
+            /* @__PURE__ */ jsxs15("div", { className: "flex shrink-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx23(ScenarioRunHistory, { scenarioId: scenario.id }),
+              scenario.durationMs > 0 ? /* @__PURE__ */ jsx23("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: formatDuration(scenario.durationMs) }) : null,
+              meta.showPill ? /* @__PURE__ */ jsx23(Badge, { variant: meta.badgeVariant, "aria-label": `Status: ${label}`, children: label }) : /* @__PURE__ */ jsx23("span", { className: "sr-only", children: `Status: ${label}` }),
+              actions ? /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx23(
+                  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__ */ jsx23(MoreHorizontalIcon, { "aria-hidden": true })
                   }
                 ),
-                /* @__PURE__ */ jsx22(
-                  "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__ */ jsxs15(DropdownMenuContent, { align: "end", children: [
+                  /* @__PURE__ */ jsxs15(DropdownMenuItem, { onClick: () => actions.copyLink(scenario), children: [
+                    /* @__PURE__ */ jsx23(LinkIcon, {}),
+                    " Copy link"
+                  ] }),
+                  /* @__PURE__ */ jsxs15(DropdownMenuItem, { onClick: () => actions.copyMarkdown(scenario), children: [
+                    /* @__PURE__ */ jsx23(FileTextIcon, {}),
+                    " Copy as Markdown"
+                  ] }),
+                  /* @__PURE__ */ jsxs15(DropdownMenuItem, { onClick: () => actions.copyPrompt(scenario), children: [
+                    /* @__PURE__ */ jsx23(SparklesIcon, {}),
+                    " Explain with AI"
+                  ] })
+                ] })
               ] }) : null
             ] })
           ] }),
-          scenario.tags.length > 0 || (scenario.tickets?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs14("ul", { "aria-label": "Tags and tickets", className: "flex flex-wrap gap-1.5", children: [
-            scenario.tags.map((t) => /* @__PURE__ */ jsx22("li", { children: /* @__PURE__ */ jsx22(Badge, { variant: "tag", children: t }) }, `tag-${t}`)),
-            (scenario.tickets ?? []).map((ticket) => /* @__PURE__ */ jsx22("li", { children: ticket.url ? /* @__PURE__ */ jsx22("a", { href: ticket.url, target: "_blank", rel: "noreferrer noopener", children: /* @__PURE__ */ jsx22(Badge, { variant: "outline", children: ticket.id }) }) : /* @__PURE__ */ jsx22(Badge, { variant: "outline", children: ticket.id }) }, `ticket-${ticket.id}`))
+          scenario.tags.length > 0 || (scenario.tickets?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs15("ul", { "aria-label": "Tags and tickets", className: "flex flex-wrap gap-1.5", children: [
+            scenario.tags.map((t) => /* @__PURE__ */ jsx23("li", { children: /* @__PURE__ */ jsx23(Badge, { variant: "tag", children: t }) }, `tag-${t}`)),
+            (scenario.tickets ?? []).map((ticket) => /* @__PURE__ */ jsx23("li", { children: ticket.url ? /* @__PURE__ */ jsx23("a", { href: ticket.url, target: "_blank", rel: "noreferrer noopener", children: /* @__PURE__ */ jsx23(Badge, { variant: "outline", children: ticket.id }) }) : /* @__PURE__ */ jsx23(Badge, { variant: "outline", children: ticket.id }) }, `ticket-${ticket.id}`))
           ] }) : null
         ] }),
-        /* @__PURE__ */ jsxs14(CardContent, { id: bodyId, hidden: collapsed, className: "px-4 pt-0 pb-4", children: [
-          scenario.errorMessage ? /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsxs15(CardContent, { id: bodyId, hidden: collapsed, className: "px-4 pt-0 pb-4", children: [
+          scenario.errorMessage ? /* @__PURE__ */ jsx23(
             "pre",
             {
               role: "alert",
@@ -1042,10 +1075,10 @@ function ReportScenario({ scenario, hideTitle = false }) {
               children: scenario.errorMessage
             }
           ) : null,
-          /* @__PURE__ */ jsx22(ReportSteps, { scenario }),
-          scenario.docEntries.length > 0 ? /* @__PURE__ */ jsx22("div", { "data-es-docs": true, className: "mt-3", children: /* @__PURE__ */ jsx22(ReportDocEntries, { entries: scenario.docEntries }) }) : null,
-          /* @__PURE__ */ jsx22(ReportAttachments, { attachments: scenario.attachments }),
-          /* @__PURE__ */ jsx22(ReportTrace, { spans: scenario.otelSpans })
+          /* @__PURE__ */ jsx23(ReportSteps, { scenario }),
+          scenario.docEntries.length > 0 ? /* @__PURE__ */ jsx23("div", { "data-es-docs": true, className: "mt-3", children: /* @__PURE__ */ jsx23(ReportDocEntries, { entries: scenario.docEntries }) }) : null,
+          /* @__PURE__ */ jsx23(ReportAttachments, { attachments: scenario.attachments }),
+          /* @__PURE__ */ jsx23(ReportTrace, { spans: scenario.otelSpans })
         ] })
       ]
     }
@@ -1053,13 +1086,13 @@ function ReportScenario({ scenario, hideTitle = false }) {
 }
 
 // src/components/ReportScenarioList.tsx
-import { Fragment as Fragment8, jsx as jsx23 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx24 } from "react/jsx-runtime";
 function ReportScenarioList({ feature }) {
-  return /* @__PURE__ */ jsx23(Fragment8, { children: feature.scenarios.map((scenario) => /* @__PURE__ */ jsx23(ReportScenario, { scenario }, scenario.id)) });
+  return /* @__PURE__ */ jsx24(Fragment8, { children: feature.scenarios.map((scenario) => /* @__PURE__ */ jsx24(ReportScenario, { scenario }, scenario.id)) });
 }
 
 // src/components/ReportFeature.tsx
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function ReportFeature({ feature }) {
   const titleId = `${feature.id}-title`;
   const bodyId = `${feature.id}-body`;
@@ -1067,74 +1100,80 @@ function ReportFeature({ feature }) {
   const skipped = s.skipped + s.pending;
   const collapse = useCollapse();
   const collapsed = collapse?.isCollapsed(feature.id) ?? false;
-  return /* @__PURE__ */ jsxs15(
-    "section",
-    {
-      id: feature.id,
-      "data-slot": "feature",
-      "aria-labelledby": titleId,
-      className: "overflow-hidden rounded-xl border border-border bg-card shadow-sm",
-      children: [
-        /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between gap-4 border-b border-border bg-muted/40 px-4 py-3", children: [
-          /* @__PURE__ */ jsxs15("div", { className: "flex min-w-0 items-center gap-2", children: [
-            collapse ? /* @__PURE__ */ jsx24(
-              "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__ */ jsxs16(
+      "section",
+      {
+        id: feature.id,
+        "data-slot": "feature",
+        "aria-labelledby": titleId,
+        className: "flex flex-col gap-3",
+        children: [
+          /* @__PURE__ */ jsxs16("div", { className: "flex items-end justify-between gap-4 border-b border-border pb-2", children: [
+            /* @__PURE__ */ jsxs16("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx25("h2", { id: titleId, className: "text-base font-semibold tracking-tight text-foreground", children: collapse ? /* @__PURE__ */ jsxs16(
+                "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__ */ jsx25("span", { "aria-hidden": true, className: cn("shrink-0 text-xs text-muted-foreground transition-transform", !collapsed && "rotate-90"), children: "\u25B8" }),
+                    /* @__PURE__ */ jsx25("span", { className: "truncate", children: feature.title })
+                  ]
+                }
+              ) : feature.title }),
+              /* @__PURE__ */ jsx25("p", { className: cn("mt-0.5 truncate font-mono text-xs text-muted-foreground", collapse && "pl-5"), children: feature.sourceFile })
+            ] }),
+            /* @__PURE__ */ jsxs16(
+              "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__ */ jsx24("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__ */ jsxs16("span", { children: [
+                    s.passed,
+                    " passed"
+                  ] }),
+                  /* @__PURE__ */ jsx25("span", { "aria-hidden": true, children: "\xB7" }),
+                  /* @__PURE__ */ jsxs16("span", { className: cn(s.failed > 0 && "font-medium text-fail"), children: [
+                    s.failed,
+                    " failed"
+                  ] }),
+                  skipped > 0 ? /* @__PURE__ */ jsxs16(Fragment9, { children: [
+                    /* @__PURE__ */ jsx25("span", { "aria-hidden": true, children: "\xB7" }),
+                    /* @__PURE__ */ jsxs16("span", { children: [
+                      skipped,
+                      " skipped"
+                    ] })
+                  ] }) : null
+                ]
               }
-            ) : null,
-            /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx24("h2", { id: titleId, className: "text-sm font-semibold tracking-tight text-foreground", children: feature.title }),
-              /* @__PURE__ */ jsx24("p", { className: "mt-0.5 truncate font-mono text-xs text-muted-foreground", children: feature.sourceFile })
-            ] })
+            )
           ] }),
-          /* @__PURE__ */ jsxs15(
-            "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__ */ jsxs15("span", { "aria-hidden": true, className: "text-pass", children: [
-                  "\u2713",
-                  s.passed
-                ] }),
-                /* @__PURE__ */ jsxs15("span", { "aria-hidden": true, className: "text-fail", children: [
-                  "\u2717",
-                  s.failed
-                ] }),
-                /* @__PURE__ */ jsxs15("span", { "aria-hidden": true, className: "text-skip", children: [
-                  "\u25CB",
-                  skipped
-                ] })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx24("div", { id: bodyId, hidden: collapsed, className: "flex flex-col gap-2 p-3", children: /* @__PURE__ */ jsx24(ReportScenarioList, { feature }) })
-      ]
-    }
+          /* @__PURE__ */ jsx25("div", { id: bodyId, hidden: collapsed, className: "flex flex-col gap-3", children: /* @__PURE__ */ jsx25(ReportScenarioList, { feature }) })
+        ]
+      }
+    )
   );
 }
 
 // src/components/ReportFeatureList.tsx
-import { Fragment as Fragment9, jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function ReportFeatureList() {
   const report = useReport();
-  return /* @__PURE__ */ jsx25(Fragment9, { children: report.features.map((feature) => /* @__PURE__ */ jsx25(ReportFeature, { feature }, feature.id)) });
+  return /* @__PURE__ */ jsx26("div", { className: "flex flex-col gap-8", children: report.features.map((feature) => /* @__PURE__ */ jsx26(ReportFeature, { feature }, feature.id)) });
 }
 
 // src/components/ui/empty.tsx
 import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       "data-slot": "empty",
@@ -1147,7 +1186,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       "data-slot": "empty-header",
@@ -1174,7 +1213,7 @@ var emptyMediaVariants = cva2(
   }
 );
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       "data-slot": "empty-title",
@@ -1185,16 +1224,16 @@ function EmptyTitle({ className, ...props }) {
 }
 
 // src/components/ReportEmpty.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function ReportEmpty({ message }) {
-  return /* @__PURE__ */ jsx27(Empty, { "aria-live": "polite", className: "border", children: /* @__PURE__ */ jsx27(EmptyHeader, { children: /* @__PURE__ */ jsx27(EmptyTitle, { children: message ?? "No scenarios in this report." }) }) });
+  return /* @__PURE__ */ jsx28(Empty, { "aria-live": "polite", className: "border", children: /* @__PURE__ */ jsx28(EmptyHeader, { children: /* @__PURE__ */ jsx28(EmptyTitle, { children: message ?? "No scenarios in this report." }) }) });
 }
 
 // src/components/ReportSummary.tsx
-import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 function ReportSummary({ className }) {
   const report = useReport();
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     ReportSummaryView,
     {
       summary: report.summary,
@@ -1203,38 +1242,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__ */ jsxs16("p", { className: cn("text-sm text-muted-foreground", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsxs16("span", { children: [
-      /* @__PURE__ */ jsx28("strong", { className: "font-semibold text-foreground", children: summary.total }),
-      " scenario",
-      summary.total === 1 ? "" : "s"
-    ] }),
-    " \xB7 ",
-    /* @__PURE__ */ jsxs16("span", { "data-status": "passed", className: "text-pass", children: [
-      summary.passed,
-      " passed"
-    ] }),
-    " \xB7 ",
-    /* @__PURE__ */ jsxs16("span", { "data-status": "failed", className: "text-fail", children: [
-      summary.failed,
-      " failed"
-    ] }),
-    summary.skipped > 0 ? /* @__PURE__ */ jsxs16(Fragment10, { children: [
-      " \xB7 ",
-      /* @__PURE__ */ jsxs16("span", { "data-status": "skipped", className: "text-skip", children: [
-        summary.skipped,
-        " skipped"
-      ] })
-    ] }) : null,
-    summary.pending > 0 ? /* @__PURE__ */ jsxs16(Fragment10, { children: [
-      " \xB7 ",
-      /* @__PURE__ */ jsxs16("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__ */ jsx29(
+    "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__ */ jsxs17(
+          "div",
+          {
+            "data-status": c.status,
+            className: "rounded-lg border bg-card px-4 py-3",
+            children: [
+              /* @__PURE__ */ jsxs17("dt", { className: "flex items-center gap-1.5 font-mono text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: [
+                /* @__PURE__ */ jsx29("span", { className: cn("size-1.5 shrink-0 rounded-full", tone.dot), "aria-hidden": "true" }),
+                c.label
+              ] }),
+              /* @__PURE__ */ jsx29("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
@@ -1287,7 +1342,7 @@ function prUrl(ci) {
 }
 
 // src/components/ReportMeta.tsx
-import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 function ReportMeta() {
   const report = useReport();
   const items = [];
@@ -1310,13 +1365,13 @@ function ReportMeta() {
     const short = sha.slice(0, 8);
     items.push({
       label: "Commit",
-      value: url ? /* @__PURE__ */ jsx29("a", { href: url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: short }) : short
+      value: url ? /* @__PURE__ */ jsx30("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__ */ jsxs17("a", { href: report.ci.url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: [
+      value: report.ci.url ? /* @__PURE__ */ jsxs18("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}` : ""}`
@@ -1327,54 +1382,144 @@ function ReportMeta() {
     const label = `#${report.ci.prNumber}`;
     items.push({
       label: "PR",
-      value: url ? /* @__PURE__ */ jsx29("a", { href: url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: label }) : label
+      value: url ? /* @__PURE__ */ jsx30("a", { href: url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: label }) : label
     });
   }
   if (items.length === 0) return null;
-  return /* @__PURE__ */ jsx29("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__ */ jsxs17("div", { className: "flex gap-1.5", children: [
-    /* @__PURE__ */ jsx29("dt", { className: "font-medium", children: item.label }),
-    /* @__PURE__ */ jsx29("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__ */ jsxs18("details", { "data-es-meta-card": true, className: "es-run-details group rounded-lg border border-border bg-card text-xs", children: [
+      /* @__PURE__ */ jsxs18("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__ */ jsx30("span", { "aria-hidden": true, className: "text-xs transition-transform group-open:rotate-90", children: "\u25B8" }),
+        "Run details"
+      ] }),
+      /* @__PURE__ */ jsx30("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__ */ jsxs18("div", { className: "flex items-baseline gap-1.5", children: [
+        /* @__PURE__ */ jsx30("dt", { className: "font-medium", children: item.label }),
+        /* @__PURE__ */ jsx30("dd", { className: "font-mono text-foreground", children: item.value })
+      ] }, item.label)) })
+    ] })
+  );
 }
 
 // src/components/ReportSchemaError.tsx
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 function ReportSchemaError({ error }) {
-  return /* @__PURE__ */ jsxs18("section", { className: "es-schema-error", role: "alert", "aria-live": "assertive", children: [
-    /* @__PURE__ */ jsx30("p", { children: /* @__PURE__ */ jsx30("strong", { children: "Report could not be displayed." }) }),
-    /* @__PURE__ */ jsx30("p", { children: error.message }),
-    error.code === "SCHEMA_VERSION_MISMATCH" ? /* @__PURE__ */ jsxs18("p", { children: [
+  return /* @__PURE__ */ jsxs19("section", { className: "es-schema-error", role: "alert", "aria-live": "assertive", children: [
+    /* @__PURE__ */ jsx31("p", { children: /* @__PURE__ */ jsx31("strong", { children: "Report could not be displayed." }) }),
+    /* @__PURE__ */ jsx31("p", { children: error.message }),
+    error.code === "SCHEMA_VERSION_MISMATCH" ? /* @__PURE__ */ jsxs19("p", { children: [
       "The report bundle is newer than this version of ",
-      /* @__PURE__ */ jsx30("code", { children: "executable-stories-react" }),
+      /* @__PURE__ */ jsx31("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__ */ jsxs18("details", { children: [
-      /* @__PURE__ */ jsxs18("summary", { children: [
+    error.issues && error.issues.length > 0 ? /* @__PURE__ */ jsxs19("details", { children: [
+      /* @__PURE__ */ jsxs19("summary", { children: [
         error.issues.length,
         " validation issue",
         error.issues.length === 1 ? "" : "s"
       ] }),
-      /* @__PURE__ */ jsx30("pre", { children: error.issues.slice(0, 20).map((i) => `${i.path}: ${i.message}`).join("\n") })
+      /* @__PURE__ */ jsx31("pre", { children: error.issues.slice(0, 20).map((i) => `${i.path}: ${i.message}`).join("\n") })
     ] }) : null
   ] });
 }
 
 // src/components/ReportShell.tsx
-import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
-function ReportTitleBlock({ title }) {
-  return /* @__PURE__ */ jsxs19(Fragment11, { children: [
-    /* @__PURE__ */ jsx31("h1", { children: title ?? "Story Report" }),
-    /* @__PURE__ */ jsx31(ReportSummary, {}),
-    /* @__PURE__ */ jsx31(ReportMeta, {})
-  ] });
-}
+import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 function ReportErrorShell({
   error,
   className,
   title,
   dataTheme
 }) {
-  return /* @__PURE__ */ jsx31("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: /* @__PURE__ */ jsx31(ReportSchemaError, { error }) });
+  return /* @__PURE__ */ jsx32("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: /* @__PURE__ */ jsx32(ReportSchemaError, { error }) });
+}
+
+// src/interactive/ReportInteractive.tsx
+import { Monitor, Moon, Sun } from "lucide-react";
+
+// src/components/ui/switch.tsx
+import "react";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { jsx as jsx33 } from "react/jsx-runtime";
+function Switch({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx33(
+    SwitchPrimitive.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__ */ jsx33(
+        SwitchPrimitive.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
+import * as React5 from "react";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var toggleItemVariants = cva3(
+  "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__ */ jsx34(
+    ToggleGroupPrimitive,
+    {
+      "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__ */ jsx34(ToggleGroupContext.Provider, { value: { size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  size,
+  ...props
+}) {
+  const context = React5.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx34(
+    TogglePrimitive,
+    {
+      "data-slot": "toggle-group-item",
+      className: cn(toggleItemVariants({ size: context.size ?? size }), "flex-1 shrink-0", className),
+      ...props,
+      children
+    }
+  );
 }
 
 // src/interactive/ReportSearch.tsx
@@ -1382,7 +1527,30 @@ import {
   forwardRef,
   useId
 } from "react";
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+
+// src/components/ui/input.tsx
+import "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx35(
+    "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
+import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var ReportSearch = forwardRef(
   function ReportSearch2(props, ref) {
     const {
@@ -1390,11 +1558,11 @@ var ReportSearch = forwardRef(
       onChange,
       matchedCount,
       totalCount,
-      placeholder = "Search scenarios, tags, or step text\u2026",
+      placeholder = "Search scenarios or tags\u2026",
       className
     } = props;
     const inputId = 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);
     }
@@ -1404,24 +1572,46 @@ var ReportSearch = forwardRef(
         e.preventDefault();
       }
     }
-    return /* @__PURE__ */ jsxs20("div", { className: ["es-search", className].filter(Boolean).join(" "), children: [
-      /* @__PURE__ */ jsx32("label", { htmlFor: inputId, className: "es-search-label", children: "Search" }),
-      /* @__PURE__ */ jsx32(
-        "input",
+    return /* @__PURE__ */ jsxs21("div", { className: cn("es-search flex flex-col gap-1", className), children: [
+      /* @__PURE__ */ jsx36("label", { htmlFor: inputId, className: "sr-only", children: "Search" }),
+      /* @__PURE__ */ jsxs21("div", { className: "relative w-full sm:w-72", children: [
+        /* @__PURE__ */ jsx36(
+          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__ */ jsx36(
+          Input,
+          {
+            ref,
+            id: inputId,
+            type: "search",
+            value,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            placeholder,
+            autoComplete: "off",
+            spellCheck: false,
+            "aria-keyshortcuts": "/",
+            className: "pl-8"
+          }
+        )
+      ] }),
+      showCounts ? /* @__PURE__ */ jsxs21(
+        "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__ */ jsx32("span", { className: "es-search-counts", "aria-live": "polite", children: value ? `${matchedCount} of ${totalCount}` : `${totalCount} total` }) : null
+      ) : null
     ] });
   }
 );
@@ -1450,7 +1640,7 @@ function scrollToScenarioId(scenarioId, options = {}) {
 }
 
 // src/interactive/ReportFailureBanner.tsx
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 function ReportFailureBanner({ failures }) {
   const first = failures[0];
   const jumpToFirst = useCallback2(() => {
@@ -1458,7 +1648,7 @@ function ReportFailureBanner({ failures }) {
     scrollToScenarioId(first.scenarioId);
   }, [first]);
   if (failures.length === 0) return null;
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: "es-failure-banner",
@@ -1466,20 +1656,20 @@ function ReportFailureBanner({ failures }) {
       "aria-live": "polite",
       "aria-label": "Failure summary",
       children: [
-        /* @__PURE__ */ jsxs21("span", { className: "es-failure-banner-text", children: [
-          /* @__PURE__ */ jsx33("strong", { children: failures.length }),
+        /* @__PURE__ */ jsxs22("span", { className: "es-failure-banner-text", children: [
+          /* @__PURE__ */ jsx37("strong", { children: failures.length }),
           " ",
           "failure",
           failures.length === 1 ? "" : "s"
         ] }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx37(
           "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"
           }
         )
       ]
@@ -1489,7 +1679,7 @@ function ReportFailureBanner({ failures }) {
 
 // src/interactive/ReportFreshness.tsx
 import { useEffect, useState as useState2 } from "react";
-import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 function ReportFreshness({ lastRunMs, ciUrl, staleAfterDays, nowMs }) {
   const [now, setNow] = useState2(nowMs);
   useEffect(() => {
@@ -1497,7 +1687,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__ */ jsx34(
+  const runLink = ciUrl ? /* @__PURE__ */ jsx38(
     "a",
     {
       href: ciUrl,
@@ -1508,22 +1698,22 @@ function ReportFreshness({ lastRunMs, ciUrl, staleAfterDays, nowMs }) {
     }
   ) : null;
   if (isReportStale(lastRunMs, staleAfterDays, now)) {
-    return /* @__PURE__ */ jsxs22("div", { className: "es-stale-banner", role: "status", "aria-label": "Report freshness", children: [
-      /* @__PURE__ */ jsxs22("span", { children: [
-        /* @__PURE__ */ jsxs22("strong", { children: [
+    return /* @__PURE__ */ jsxs23("div", { className: "es-stale-banner", role: "status", "aria-label": "Report freshness", children: [
+      /* @__PURE__ */ jsxs23("span", { children: [
+        /* @__PURE__ */ jsxs23("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__ */ jsxs22("p", { className: "es-freshness", "aria-label": "Report freshness", children: [
+  return /* @__PURE__ */ jsxs23("p", { className: "es-freshness", "aria-label": "Report freshness", children: [
     "Verified ",
     age,
-    runLink ? /* @__PURE__ */ jsxs22(Fragment12, { children: [
+    runLink ? /* @__PURE__ */ jsxs23(Fragment11, { children: [
       " \xB7 ",
       runLink
     ] }) : null
@@ -1531,15 +1721,15 @@ function ReportFreshness({ lastRunMs, ciUrl, staleAfterDays, nowMs }) {
 }
 
 // src/interactive/ReportLastRunDelta.tsx
-import { Fragment as Fragment13, jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 var MAX_LINKS = 5;
 function ScenarioLinks({ scenarios, tone }) {
-  return /* @__PURE__ */ jsxs23(Fragment13, { children: [
-    scenarios.slice(0, MAX_LINKS).map((s, i) => /* @__PURE__ */ jsxs23("span", { children: [
+  return /* @__PURE__ */ jsxs24(Fragment12, { children: [
+    scenarios.slice(0, MAX_LINKS).map((s, i) => /* @__PURE__ */ jsxs24("span", { children: [
       i > 0 ? ", " : "",
-      /* @__PURE__ */ jsx35("a", { href: `#${s.id}`, className: cn("underline underline-offset-2 hover:no-underline", tone), children: s.title })
+      /* @__PURE__ */ jsx39("a", { href: `#${s.id}`, className: cn("underline underline-offset-2 hover:no-underline", tone), children: s.title })
     ] }, s.id)),
-    scenarios.length > MAX_LINKS ? /* @__PURE__ */ jsxs23("span", { children: [
+    scenarios.length > MAX_LINKS ? /* @__PURE__ */ jsxs24("span", { children: [
       " and ",
       scenarios.length - MAX_LINKS,
       " more"
@@ -1556,23 +1746,23 @@ function ReportLastRunDelta({
   if (!delta) return null;
   const { newlyFailing, newlyPassing, added } = delta;
   if (newlyFailing.length === 0 && newlyPassing.length === 0 && added.length === 0) {
-    return /* @__PURE__ */ jsx35("p", { className: "text-xs text-muted-foreground", "data-testid": "es-last-run-delta", children: "Since last run: no behavior changes." });
+    return /* @__PURE__ */ jsx39("p", { className: "text-xs text-muted-foreground", "data-testid": "es-last-run-delta", children: "Since last run: no behavior changes." });
   }
-  return /* @__PURE__ */ jsxs23("p", { className: "text-xs text-muted-foreground", "data-testid": "es-last-run-delta", children: [
-    /* @__PURE__ */ jsx35("span", { className: "font-medium text-foreground", children: "Since last run:" }),
-    newlyFailing.length > 0 ? /* @__PURE__ */ jsxs23("span", { className: "ml-2 text-fail", children: [
+  return /* @__PURE__ */ jsxs24("p", { className: "text-xs text-muted-foreground", "data-testid": "es-last-run-delta", children: [
+    /* @__PURE__ */ jsx39("span", { className: "font-medium text-foreground", children: "Since last run:" }),
+    newlyFailing.length > 0 ? /* @__PURE__ */ jsxs24("span", { className: "ml-2 text-fail", children: [
       newlyFailing.length,
       " newly failing (",
-      /* @__PURE__ */ jsx35(ScenarioLinks, { scenarios: newlyFailing, tone: "text-fail" }),
+      /* @__PURE__ */ jsx39(ScenarioLinks, { scenarios: newlyFailing, tone: "text-fail" }),
       ")"
     ] }) : null,
-    newlyPassing.length > 0 ? /* @__PURE__ */ jsxs23("span", { className: "ml-2 text-pass", children: [
+    newlyPassing.length > 0 ? /* @__PURE__ */ jsxs24("span", { className: "ml-2 text-pass", children: [
       newlyPassing.length,
       " fixed (",
-      /* @__PURE__ */ jsx35(ScenarioLinks, { scenarios: newlyPassing, tone: "text-pass" }),
+      /* @__PURE__ */ jsx39(ScenarioLinks, { scenarios: newlyPassing, tone: "text-pass" }),
       ")"
     ] }) : null,
-    added.length > 0 ? /* @__PURE__ */ jsxs23("span", { className: "ml-2", children: [
+    added.length > 0 ? /* @__PURE__ */ jsxs24("span", { className: "ml-2", children: [
       added.length,
       " new"
     ] }) : null
@@ -1581,14 +1771,78 @@ function ReportLastRunDelta({
 
 // src/interactive/ReportShortcutsHelp.tsx
 import { useEffect as useEffect2, useRef } from "react";
-import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
+
+// src/components/ui/button.tsx
+import "react";
+import { cva as cva4 } from "class-variance-authority";
+import { useRender as useRender2 } from "@base-ui/react/use-render";
+var buttonVariants = cva4(
+  "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 useRender2({
+    defaultTagName: "button",
+    render,
+    props: {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  });
+}
+
+// src/interactive/ReportShortcutsHelp.tsx
+import { jsx as jsx40, jsxs as jsxs25 } from "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__ */ jsx40("span", { className: "inline-flex items-center gap-1", children: parts.map((k, i) => /* @__PURE__ */ jsxs25("span", { className: "inline-flex items-center gap-1", children: [
+    i > 0 ? /* @__PURE__ */ jsx40("span", { className: "text-xs text-muted-foreground", children: "+" }) : null,
+    /* @__PURE__ */ jsx40("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 = useRef(null);
   useEffect2(() => {
@@ -1597,20 +1851,20 @@ function ReportShortcutsHelp({ open, onClose }) {
     if (open && !dialog.open) dialog.showModal();
     else if (!open && dialog.open) dialog.close();
   }, [open]);
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "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__ */ jsx36("h2", { children: "Keyboard shortcuts" }),
-        /* @__PURE__ */ jsx36("dl", { children: SHORTCUTS.map((s) => /* @__PURE__ */ jsxs24("div", { children: [
-          /* @__PURE__ */ jsx36("dt", { children: /* @__PURE__ */ jsx36("kbd", { children: s.keys }) }),
-          /* @__PURE__ */ jsx36("dd", { children: s.description })
+        /* @__PURE__ */ jsx40("h2", { className: "text-base font-semibold", children: "Keyboard shortcuts" }),
+        /* @__PURE__ */ jsx40("dl", { className: "mt-4 grid grid-cols-[auto_1fr] items-center gap-x-4 gap-y-2.5", children: SHORTCUTS.map((s) => /* @__PURE__ */ jsxs25("div", { className: "col-span-2 grid grid-cols-subgrid items-center", children: [
+          /* @__PURE__ */ jsx40("dt", { className: "justify-self-start", children: /* @__PURE__ */ jsx40(Keys, { keys: s.keys }) }),
+          /* @__PURE__ */ jsx40("dd", { className: "text-sm text-muted-foreground", children: s.description })
         ] }, s.keys)) }),
-        /* @__PURE__ */ jsx36("form", { method: "dialog", children: /* @__PURE__ */ jsx36("button", { type: "submit", className: "es-shortcuts-close", children: "Close" }) })
+        /* @__PURE__ */ jsx40("form", { method: "dialog", className: "mt-6", children: /* @__PURE__ */ jsx40(Button, { type: "submit", variant: "outline", size: "sm", children: "Close" }) })
       ]
     }
   );
@@ -1783,7 +2037,9 @@ function listFailures(report) {
 }
 
 // src/interactive/ReportFilters.tsx
-import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+var TAG_LIMIT = 12;
 function ReportFilters({
   statuses,
   status,
@@ -1792,11 +2048,14 @@ function ReportFilters({
   activeTags,
   onToggleTag
 }) {
+  const [showAllTags, setShowAllTags] = useState3(false);
   if (statuses.length === 0 && tags.length === 0) return null;
-  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-2", children: [
-    statuses.length > 0 ? /* @__PURE__ */ jsx37("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__ */ jsxs26("div", { className: "flex flex-col gap-2", children: [
+    statuses.length > 0 ? /* @__PURE__ */ jsx41("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__ */ jsxs25(
+      return /* @__PURE__ */ jsxs26(
         "button",
         {
           type: "button",
@@ -1808,40 +2067,61 @@ function ReportFilters({
           ),
           children: [
             opt.label,
-            /* @__PURE__ */ jsx37("span", { className: "ml-1 font-mono opacity-70", children: opt.count })
+            /* @__PURE__ */ jsx41("span", { className: "ml-1 font-mono opacity-70", children: opt.count })
           ]
         },
         opt.key
       );
     }) }) : null,
-    tags.length > 0 ? /* @__PURE__ */ jsx37("ul", { "aria-label": "Filter by tag", className: "flex flex-wrap gap-1.5", children: tags.map((tag) => {
-      const active = activeTags.includes(tag);
-      return /* @__PURE__ */ jsx37("li", { children: /* @__PURE__ */ jsx37(
+    tags.length > 0 ? /* @__PURE__ */ jsxs26("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__ */ jsx41("li", { children: /* @__PURE__ */ jsx41(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": active,
+            onClick: () => onToggleTag(tag),
+            className: "cursor-pointer",
+            children: /* @__PURE__ */ jsx41(
+              Badge,
+              {
+                variant: "tag",
+                className: cn(
+                  active && "border-primary bg-primary text-primary-foreground"
+                ),
+                children: tag
+              }
+            )
+          }
+        ) }, tag);
+      }),
+      tags.length > TAG_LIMIT ? /* @__PURE__ */ jsx41("li", { children: /* @__PURE__ */ jsx41(
         "button",
         {
           type: "button",
-          "aria-pressed": active,
-          onClick: () => onToggleTag(tag),
-          className: "cursor-pointer",
-          children: /* @__PURE__ */ jsx37(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
-import { useEffect as useEffect5, useMemo as useMemo2, useState as useState3 } from "react";
-import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useMemo as useMemo2, useState as useState4 } from "react";
+import { jsx as jsx42, jsxs as jsxs27 } from "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] = useState3(null);
+  const [activeId, setActiveId] = useState4(null);
   const scenarioIds = useMemo2(
     () => report.features.flatMap((f) => f.scenarios.map((s) => s.id)),
     [report]
@@ -1861,91 +2141,166 @@ function ReportToc() {
     return () => observer.disconnect();
   }, [scenarioIds]);
   if (report.features.length === 0) return null;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx42("ul", { className: "flex list-none flex-col gap-4 pl-0", children: report.features.map((feature) => /* @__PURE__ */ jsxs27("li", { children: [
+    /* @__PURE__ */ jsx42("p", { className: "mb-1.5 font-semibold leading-snug text-foreground", children: feature.title }),
+    /* @__PURE__ */ jsx42("ul", { className: "flex list-none flex-col gap-0.5 pl-0", children: feature.scenarios.map((scenario) => {
+      const active = activeId === scenario.id;
+      return /* @__PURE__ */ jsx42("li", { children: /* @__PURE__ */ jsxs27(
+        "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__ */ jsx42(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn("mt-1 size-1.5 shrink-0 rounded-full", DOT[scenario.status])
+              }
+            ),
+            /* @__PURE__ */ jsx42("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__ */ jsxs27(
     "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__ */ jsx38("ul", { className: "flex flex-col gap-3", children: report.features.map((feature) => /* @__PURE__ */ jsxs26("li", { children: [
-        /* @__PURE__ */ jsx38("p", { className: "mb-1 truncate font-semibold text-foreground", children: feature.title }),
-        /* @__PURE__ */ jsx38("ul", { className: "flex flex-col", children: feature.scenarios.map((scenario) => {
-          const active = activeId === scenario.id;
-          return /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsxs26(
-            "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__ */ jsx38("span", { "aria-hidden": true, className: cn("shrink-0", DOT[scenario.status]), children: "\u2022" }),
-                /* @__PURE__ */ jsx38("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__ */ jsx42("p", { className: "mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Contents" }),
+        /* @__PURE__ */ jsx42(TocContent, {})
+      ]
     }
   );
 }
 
+// src/interactive/ReportTocDrawer.tsx
+import { useState as useState5 } from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { ListIcon, XIcon } from "lucide-react";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+function ReportTocDrawer() {
+  const report = useReport();
+  const [open, setOpen] = useState5(false);
+  if (report.features.length === 0) return null;
+  return /* @__PURE__ */ jsxs28(DialogPrimitive.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs28(DialogPrimitive.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__ */ jsx43(ListIcon, { "aria-hidden": true }),
+      " Contents"
+    ] }),
+    /* @__PURE__ */ jsxs28(DialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx43(DialogPrimitive.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__ */ jsxs28(DialogPrimitive.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__ */ jsxs28("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx43(DialogPrimitive.Title, { className: "text-xs font-semibold tracking-wide text-muted-foreground uppercase", children: "Contents" }),
+          /* @__PURE__ */ jsx43(
+            DialogPrimitive.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__ */ jsx43(XIcon, { "aria-hidden": true })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx43(TocContent, { onNavigate: () => setOpen(false) })
+      ] })
+    ] })
+  ] });
+}
+
 // src/interactive/use-theme.ts
-import { useCallback as useCallback3, useEffect as useEffect6, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useState as useState6 } from "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] = useState4("light");
+  const [pref, setPrefState] = useState6("system");
   useEffect6(() => {
-    const t = initialTheme();
-    setTheme(t);
-    applyTheme(t);
+    const p = initialPref();
+    setPrefState(p);
+    applyTheme(p);
   }, []);
-  const toggle = useCallback3(() => {
-    setTheme((prev) => {
-      const next = prev === "dark" ? "light" : "dark";
-      applyTheme(next);
-      try {
-        localStorage.setItem(KEY, next);
-      } catch {
-      }
-      return next;
-    });
+  useEffect6(() => {
+    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 = useCallback3((p) => {
+    setPrefState(p);
+    applyTheme(p);
+    try {
+      localStorage.setItem(KEY, p);
+    } catch {
+    }
   }, []);
-  return { theme, toggle };
+  return { pref, setPref };
 }
 
 // src/interactive/ReportInteractive.tsx
-import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 function ReportInteractive(props) {
   const { report, className, title, dataTheme } = props;
   const result = unwrapReport(report);
   if (!result.ok) {
-    return /* @__PURE__ */ jsx39(ReportErrorShell, { error: result.error, className, title, dataTheme });
+    return /* @__PURE__ */ jsx44(ReportErrorShell, { error: result.error, className, title, dataTheme });
   }
-  return /* @__PURE__ */ jsx39(ReportInteractiveView, { ...props, report: result.data });
+  return /* @__PURE__ */ jsx44(ReportInteractiveView, { ...props, report: result.data });
+}
+var THEME_OPTIONS = [
+  { value: "light", label: "Light", Icon: Sun },
+  { value: "system", label: "System", Icon: Monitor },
+  { value: "dark", label: "Dark", Icon: Moon }
+];
+function ThemeSegment({ pref, onPref }) {
+  return /* @__PURE__ */ jsx44(
+    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__ */ jsx44(ToggleGroupItem, { value, "aria-label": label, title: label, className: "px-2", children: /* @__PURE__ */ jsx44(Icon, {}) }, value))
+    }
+  );
 }
 function ReportInteractiveView({
   report,
@@ -1955,16 +2310,19 @@ function ReportInteractiveView({
   title,
   dataTheme,
   hideHeader = false,
+  hideToc = false,
   staleAfterDays = 7,
   scenarioHistory
 }) {
-  const [query, setQuery] = useState5("");
-  const [statusFilter, setStatusFilter] = useState5("all");
-  const [activeTags, setActiveTags] = useState5([]);
-  const [detail, setDetail] = useState5("full");
-  const [helpOpen, setHelpOpen] = useState5(false);
-  const { theme, toggle: toggleTheme } = useTheme();
+  const [query, setQuery] = useState7("");
+  const [statusFilter, setStatusFilter] = useState7("all");
+  const [activeTags, setActiveTags] = useState7([]);
+  const [detail, setDetail] = useState7("full");
+  const [helpOpen, setHelpOpen] = useState7(false);
+  const { pref: themePref, setPref: setThemePref } = useTheme();
   const searchRef = useRef3(null);
+  const expandId = useId2();
+  const docsId = useId2();
   const deferredQuery = useDeferredValue(query);
   const failures = useMemo3(() => listFailures(report), [report]);
   const filtered = useMemo3(
@@ -1988,7 +2346,7 @@ function ReportInteractiveView({
     (tag) => setActiveTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]),
     []
   );
-  const [toast, setToast] = useState5(null);
+  const [toast, setToast] = useState7(null);
   const toastTimer = useRef3(null);
   const showToast = useCallback4((msg) => {
     setToast(msg);
@@ -2012,12 +2370,21 @@ function ReportInteractiveView({
     [copy]
   );
   const failureIndexRef = useRef3(0);
-  const collapse = useCollapseState();
   const allCollapsibleIds = useMemo3(
     () => report.features.flatMap((f) => [f.id, ...f.scenarios.map((s) => s.id)]),
     [report]
   );
+  const collapse = useCollapseState();
   const collapseAll = useCallback4(() => collapse.collapseAll(allCollapsibleIds), [collapse, allCollapsibleIds]);
+  const [expandedAll, setExpandedAll] = useState7(true);
+  const setExpanded = useCallback4(
+    (expanded) => {
+      if (expanded) collapse.expandAll();
+      else collapseAll();
+      setExpandedAll(expanded);
+    },
+    [collapse, collapseAll]
+  );
   const focusSearch = useCallback4(() => {
     searchRef.current?.focus();
   }, []);
@@ -2043,20 +2410,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__ */ jsx39(CollapseProvider, { value: collapse.api, children: /* @__PURE__ */ jsx39(ScenarioActionsProvider, { value: scenarioActions, children: /* @__PURE__ */ jsx39(ScenarioHistoryProvider, { value: scenarioHistory ?? null, children: /* @__PURE__ */ jsx39(
+  const showToc = !hideToc && totalScenarios > 3;
+  return /* @__PURE__ */ jsx44(CollapseProvider, { value: collapse.api, children: /* @__PURE__ */ jsx44(ScenarioActionsProvider, { value: scenarioActions, children: /* @__PURE__ */ jsx44(ScenarioHistoryProvider, { value: scenarioHistory ?? null, children: /* @__PURE__ */ jsx44(
     ReportRoot,
     {
       report: filtered,
       customRenderers,
       renderers,
-      children: /* @__PURE__ */ jsxs27(
+      children: /* @__PURE__ */ jsxs29(
         "main",
         {
           className: cn("es-report", "es-report-interactive", className),
@@ -2065,9 +2433,38 @@ function ReportInteractiveView({
           "data-theme": dataTheme,
           "data-detail-level": detail,
           children: [
-            /* @__PURE__ */ jsxs27("header", { className: "es-report-header", children: [
-              hideHeader ? null : /* @__PURE__ */ jsx39(ReportTitleBlock, { title }),
-              /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsxs29("header", { className: "es-report-header", children: [
+              /* @__PURE__ */ jsxs29(
+                "div",
+                {
+                  "data-es-navbar": true,
+                  className: cn(
+                    "flex flex-wrap items-center gap-4",
+                    hideHeader ? "justify-end" : "justify-between"
+                  ),
+                  children: [
+                    hideHeader ? null : /* @__PURE__ */ jsx44("h1", { className: "min-w-0", children: title ?? "Story Report" }),
+                    /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx44(
+                        ReportSearch,
+                        {
+                          ref: searchRef,
+                          value: query,
+                          onChange: setQuery,
+                          matchedCount: matchedScenarios,
+                          totalCount: totalScenarios
+                        }
+                      ),
+                      /* @__PURE__ */ jsx44(ThemeSegment, { pref: themePref, onPref: setThemePref })
+                    ] })
+                  ]
+                }
+              ),
+              hideHeader ? null : /* @__PURE__ */ jsxs29(Fragment13, { children: [
+                /* @__PURE__ */ jsx44(ReportSummary, {}),
+                /* @__PURE__ */ jsx44(ReportMeta, {})
+              ] }),
+              /* @__PURE__ */ jsx44(
                 ReportFreshness,
                 {
                   lastRunMs: reportLastRunMs(report),
@@ -2075,62 +2472,8 @@ function ReportInteractiveView({
                   staleAfterDays
                 }
               ),
-              /* @__PURE__ */ jsx39(ReportLastRunDelta, { history: scenarioHistory, report }),
-              /* @__PURE__ */ jsxs27("div", { className: "flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ jsx39(
-                  ReportSearch,
-                  {
-                    ref: searchRef,
-                    value: query,
-                    onChange: setQuery,
-                    matchedCount: matchedScenarios,
-                    totalCount: totalScenarios
-                  }
-                ),
-                /* @__PURE__ */ jsxs27("div", { className: "flex shrink-0 gap-1", children: [
-                  /* @__PURE__ */ jsx39(
-                    "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__ */ jsx39(
-                    "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__ */ jsx39(
-                    "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__ */ jsx39(
-                    "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__ */ jsx39(
+              /* @__PURE__ */ jsx44(ReportLastRunDelta, { history: scenarioHistory, report }),
+              /* @__PURE__ */ jsx44(
                 ReportFilters,
                 {
                   statuses: statusOptions,
@@ -2140,26 +2483,44 @@ function ReportInteractiveView({
                   activeTags,
                   onToggleTag: toggleTag
                 }
-              )
+              ),
+              /* @__PURE__ */ jsxs29("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-2 border-t border-border/60 pt-3", children: [
+                showToc ? /* @__PURE__ */ jsx44(ReportTocDrawer, {}) : null,
+                /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx44(Switch, { id: expandId, checked: expandedAll, onCheckedChange: setExpanded }),
+                  /* @__PURE__ */ jsx44("label", { htmlFor: expandId, className: "cursor-pointer text-sm text-muted-foreground select-none", children: "Expand all" })
+                ] }),
+                /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx44(
+                    Switch,
+                    {
+                      id: docsId,
+                      checked: detail === "full",
+                      onCheckedChange: (checked) => setDetail(checked ? "full" : "minimal")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx44("label", { htmlFor: docsId, className: "cursor-pointer text-sm text-muted-foreground select-none", children: "Show documentation" })
+                ] })
+              ] })
             ] }),
-            /* @__PURE__ */ jsx39(ReportFailureBanner, { failures }),
-            hasContent ? /* @__PURE__ */ jsxs27("div", { className: "flex gap-6", children: [
-              /* @__PURE__ */ jsx39(ReportToc, {}),
-              /* @__PURE__ */ jsx39("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: /* @__PURE__ */ jsx39(ReportFeatureList, {}) })
-            ] }) : /* @__PURE__ */ jsx39(ReportEmpty, { message: query ? "No scenarios match the search." : void 0 }),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx44(ReportFailureBanner, { failures }),
+            hasContent ? showToc ? /* @__PURE__ */ jsxs29("div", { className: "flex gap-6", children: [
+              /* @__PURE__ */ jsx44(ReportToc, {}),
+              /* @__PURE__ */ jsx44("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: /* @__PURE__ */ jsx44(ReportFeatureList, {}) })
+            ] }) : /* @__PURE__ */ jsx44("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx44(ReportFeatureList, {}) }) : /* @__PURE__ */ jsx44(ReportEmpty, { message: query ? "No scenarios match the search." : void 0 }),
+            /* @__PURE__ */ jsx44(
               "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__ */ jsx39(ReportShortcutsHelp, { open: helpOpen, onClose: () => setHelpOpen(false) }),
-            toast ? /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx44(ReportShortcutsHelp, { open: helpOpen, onClose: () => setHelpOpen(false) }),
+            toast ? /* @__PURE__ */ jsx44(
               "div",
               {
                 role: "status",
@@ -2179,11 +2540,11 @@ function ReportInteractiveView({
 import { useMemo as useMemo4 } from "react";
 
 // src/interactive/island-renderers.tsx
-import { createElement, useEffect as useEffect8, useState as useState7 } from "react";
+import { createElement, useEffect as useEffect8, useState as useState9 } from "react";
 
 // src/components/doc/MermaidView.tsx
-import { useEffect as useEffect7, useRef as useRef4, useState as useState6 } from "react";
-import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef4, useState as useState8 } from "react";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 function prefersDark(el) {
   const themed = el?.closest("[data-theme]");
   if (themed?.dataset.theme === "dark") return true;
@@ -2192,7 +2553,7 @@ function prefersDark(el) {
 }
 function MermaidView({ entry, load }) {
   const ref = useRef4(null);
-  const [svg, setSvg] = useState6(null);
+  const [svg, setSvg] = useState8(null);
   useEffect7(() => {
     let cancelled = false;
     const draw = async () => {
@@ -2220,9 +2581,9 @@ function MermaidView({ entry, load }) {
     };
   }, [entry.code, load]);
   if (svg) {
-    return /* @__PURE__ */ jsxs28("figure", { ref, className: "my-3", children: [
-      entry.title ? /* @__PURE__ */ jsx40("figcaption", { className: "mb-1.5 text-xs font-medium text-muted-foreground", children: entry.title }) : null,
-      /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsxs30("figure", { ref, className: "my-3", children: [
+      entry.title ? /* @__PURE__ */ jsx45("figcaption", { className: "mb-1.5 text-xs font-medium text-muted-foreground", children: entry.title }) : null,
+      /* @__PURE__ */ jsx45(
         "div",
         {
           role: "img",
@@ -2233,11 +2594,11 @@ function MermaidView({ entry, load }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsx40(MermaidSource, { entry, ref });
+  return /* @__PURE__ */ jsx45(MermaidSource, { entry, ref });
 }
 
 // src/interactive/island-renderers.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "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) {
@@ -2254,7 +2615,7 @@ function cachedCdnModule(url) {
 var loadMermaidFromCdn = cachedCdnModule(MERMAID_ESM);
 var loadHljs = cachedCdnModule(HLJS_ESM);
 function CdnHighlightedCode({ entry }) {
-  const [html, setHtml] = useState7(null);
+  const [html, setHtml] = useState9(null);
   useEffect8(() => {
     let cancelled = false;
     void (async () => {
@@ -2271,13 +2632,13 @@ function CdnHighlightedCode({ entry }) {
       cancelled = true;
     };
   }, [entry.content, entry.lang]);
-  return /* @__PURE__ */ jsx41(CodeFigure, { label: entry.label, children: html !== null ? /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx46(CodeFigure, { label: entry.label, children: html !== null ? /* @__PURE__ */ jsx46(
     "code",
     {
       className: cn("hljs font-mono text-xs", entry.lang && `language-${entry.lang}`),
       dangerouslySetInnerHTML: { __html: html }
     }
-  ) : /* @__PURE__ */ jsx41("code", { className: cn("font-mono text-xs", entry.lang && `language-${entry.lang}`), children: entry.content }) });
+  ) : /* @__PURE__ */ jsx46("code", { className: cn("font-mono text-xs", entry.lang && `language-${entry.lang}`), children: entry.content }) });
 }
 function buildIslandRenderers(opts) {
   const renderers = {};
@@ -2291,12 +2652,13 @@ function buildIslandRenderers(opts) {
 }
 
 // src/interactive/ReportInteractiveIsland.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function ReportInteractiveIsland({
   report,
   title,
   className,
   hideHeader,
+  hideToc,
   syntaxHighlighting = true,
   mermaid = true
 }) {
@@ -2304,13 +2666,14 @@ function ReportInteractiveIsland({
     () => buildIslandRenderers({ syntaxHighlighting, mermaid }),
     [syntaxHighlighting, mermaid]
   );
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx47(
     ReportInteractive,
     {
       report,
       title,
       className,
       hideHeader,
+      hideToc,
       renderers
     }
   );