executable-stories-react 0.13.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/ssr.cjs CHANGED
@@ -366,7 +366,7 @@ function formatValue(value) {
366
366
  function DocKv({ entry }) {
367
367
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("dl", { className: "my-2 flex flex-wrap items-baseline gap-x-2 text-sm", children: [
368
368
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dt", { className: "font-semibold text-muted-foreground", children: entry.label }),
369
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dd", { className: "font-mono text-foreground", children: formatValue(entry.value) })
369
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dd", { className: "min-w-0 break-words font-mono text-foreground", children: formatValue(entry.value) })
370
370
  ] });
371
371
  }
372
372
 
@@ -574,7 +574,7 @@ function DocHtml({ entry }) {
574
574
  loading: "lazy",
575
575
  title,
576
576
  className: "block w-full border-0",
577
- style: { height }
577
+ style: { height, colorScheme: "light", background: "#fff" }
578
578
  }
579
579
  )
580
580
  ] });
@@ -1327,57 +1327,68 @@ function ReportScenario({ scenario, hideTitle = false }) {
1327
1327
  className: "gap-0 py-0",
1328
1328
  children: [
1329
1329
  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CardHeader, { className: "px-4 py-3", children: [
1330
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("flex items-start gap-4", hideTitle ? "justify-end" : "justify-between"), children: [
1331
- hideTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("h3", { id: titleId, className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
1332
- collapsible ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1333
- "button",
1334
- {
1335
- type: "button",
1336
- onClick: () => collapse.toggle(scenario.id),
1337
- "aria-expanded": !collapsed,
1338
- "aria-controls": bodyId,
1339
- "aria-label": `Toggle ${scenario.title}`,
1340
- className: "shrink-0 cursor-pointer text-muted-foreground hover:text-foreground",
1341
- children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": true, className: cn("inline-block text-xs transition-transform", !collapsed && "rotate-90"), children: "\u25B8" })
1342
- }
1343
- ) : null,
1344
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": true, className: cn("text-sm leading-none", meta.glyphColor), children: meta.glyph }),
1345
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: scenario.title })
1346
- ] }),
1347
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
1348
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScenarioRunHistory, { scenarioId: scenario.id }),
1349
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScenarioStaleness, { scenario }),
1350
- scenario.durationMs > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: (0, import_duration3.formatDuration)(scenario.durationMs) }) : null,
1351
- meta.showPill ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: meta.badgeVariant, "aria-label": `Status: ${label}`, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sr-only", children: `Status: ${label}` }),
1352
- actions ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenu, { children: [
1353
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1354
- DropdownMenuTrigger,
1355
- {
1356
- "aria-label": `Actions for ${scenario.title}`,
1357
- className: "cursor-pointer rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground [&_svg]:size-4",
1358
- children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.MoreHorizontalIcon, { "aria-hidden": true })
1359
- }
1360
- ),
1361
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuContent, { align: "end", children: [
1362
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuItem, { onClick: () => actions.copyLink(scenario), children: [
1363
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.LinkIcon, {}),
1364
- " Copy link"
1365
- ] }),
1366
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuItem, { onClick: () => actions.copyMarkdown(scenario), children: [
1367
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.FileTextIcon, {}),
1368
- " Copy as Markdown"
1369
- ] }),
1370
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuItem, { onClick: () => actions.copyPrompt(scenario), children: [
1371
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.SparklesIcon, {}),
1372
- " Explain with AI"
1373
- ] })
1330
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
1331
+ "div",
1332
+ {
1333
+ className: cn(
1334
+ // Wraps rather than squeezing: on a phone the status/duration group
1335
+ // is ~160px, which leaves a title column a few characters wide.
1336
+ "flex flex-wrap items-start gap-x-4 gap-y-1",
1337
+ hideTitle ? "justify-end" : "justify-between"
1338
+ ),
1339
+ children: [
1340
+ hideTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("h3", { id: titleId, className: "flex min-w-0 flex-1 basis-48 items-center gap-2 text-sm font-medium text-foreground", children: [
1341
+ collapsible ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1342
+ "button",
1343
+ {
1344
+ type: "button",
1345
+ onClick: () => collapse.toggle(scenario.id),
1346
+ "aria-expanded": !collapsed,
1347
+ "aria-controls": bodyId,
1348
+ "aria-label": `Toggle ${scenario.title}`,
1349
+ className: "shrink-0 cursor-pointer text-muted-foreground hover:text-foreground",
1350
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": true, className: cn("inline-block text-xs transition-transform", !collapsed && "rotate-90"), children: "\u25B8" })
1351
+ }
1352
+ ) : null,
1353
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": true, className: cn("text-sm leading-none", meta.glyphColor), children: meta.glyph }),
1354
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: scenario.title })
1355
+ ] }),
1356
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
1357
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScenarioRunHistory, { scenarioId: scenario.id }),
1358
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScenarioStaleness, { scenario }),
1359
+ scenario.durationMs > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: (0, import_duration3.formatDuration)(scenario.durationMs) }) : null,
1360
+ meta.showPill ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: meta.badgeVariant, "aria-label": `Status: ${label}`, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sr-only", children: `Status: ${label}` }),
1361
+ actions ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenu, { children: [
1362
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1363
+ DropdownMenuTrigger,
1364
+ {
1365
+ "aria-label": `Actions for ${scenario.title}`,
1366
+ className: "cursor-pointer rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground [&_svg]:size-4",
1367
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.MoreHorizontalIcon, { "aria-hidden": true })
1368
+ }
1369
+ ),
1370
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuContent, { align: "end", children: [
1371
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuItem, { onClick: () => actions.copyLink(scenario), children: [
1372
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.LinkIcon, {}),
1373
+ " Copy link"
1374
+ ] }),
1375
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuItem, { onClick: () => actions.copyMarkdown(scenario), children: [
1376
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.FileTextIcon, {}),
1377
+ " Copy as Markdown"
1378
+ ] }),
1379
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuItem, { onClick: () => actions.copyPrompt(scenario), children: [
1380
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react2.SparklesIcon, {}),
1381
+ " Explain with AI"
1382
+ ] })
1383
+ ] })
1384
+ ] }) : null
1374
1385
  ] })
1375
- ] }) : null
1376
- ] })
1377
- ] }),
1386
+ ]
1387
+ }
1388
+ ),
1378
1389
  scenario.tags.length > 0 || (scenario.tickets?.length ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("ul", { "aria-label": "Tags and tickets", className: "flex flex-wrap gap-1.5", children: [
1379
1390
  scenario.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "tag", children: t }) }, `tag-${t}`)),
1380
- (scenario.tickets ?? []).map((ticket) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { children: ticket.url ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: ticket.url, target: "_blank", rel: "noreferrer noopener", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "outline", children: ticket.id }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "outline", children: ticket.id }) }, `ticket-${ticket.id}`))
1391
+ (scenario.tickets ?? []).map((ticket) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { children: ticket.url ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: ticket.url, target: "_blank", rel: "noreferrer noopener", className: "inline-flex min-h-6 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "outline", children: ticket.id }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "outline", children: ticket.id }) }, `ticket-${ticket.id}`))
1381
1392
  ] }) : null
1382
1393
  ] }),
1383
1394
  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CardContent, { id: bodyId, hidden: collapsed, className: "px-4 pt-0 pb-4", children: [
@@ -1643,6 +1654,7 @@ function ReportSummaryView({ summary, className, ariaLabel }) {
1643
1654
 
1644
1655
  // src/components/ReportMeta.tsx
1645
1656
  var import_duration4 = require("executable-stories-core/utils/duration");
1657
+ var import_report_queries = require("executable-stories-core/report-queries");
1646
1658
  var import_jsx_runtime35 = require("react/jsx-runtime");
1647
1659
  function ReportMeta() {
1648
1660
  const report = useReport();
@@ -1686,7 +1698,9 @@ function ReportMeta() {
1686
1698
  value: url ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { href: url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: label }) : label
1687
1699
  });
1688
1700
  }
1689
- if (items.length === 0) return null;
1701
+ const slowest = (0, import_report_queries.slowestScenarios)(report, 5);
1702
+ const showSlowest = slowest.length >= 3;
1703
+ if (items.length === 0 && !showSlowest) return null;
1690
1704
  return (
1691
1705
  // Run metadata is useful but secondary to "what failed" — tuck it into a
1692
1706
  // collapsed disclosure so it doesn't push the result down. Native <details>
@@ -1699,7 +1713,14 @@ function ReportMeta() {
1699
1713
  /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsxs)("div", { className: "flex items-baseline gap-1.5", children: [
1700
1714
  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dt", { className: "font-medium", children: item.label }),
1701
1715
  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dd", { className: "font-mono text-foreground", children: item.value })
1702
- ] }, item.label)) })
1716
+ ] }, item.label)) }),
1717
+ showSlowest ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "border-t border-border px-4 py-3", children: [
1718
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mb-1.5 font-medium text-muted-foreground", children: "Slowest scenarios" }),
1719
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ol", { className: "flex flex-col gap-1", "aria-label": "Slowest scenarios", children: slowest.map((s) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "flex items-baseline justify-between gap-4", children: [
1720
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { href: `#${s.id}`, className: "min-w-0 text-primary underline underline-offset-2", children: s.title }),
1721
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "shrink-0 font-mono tabular-nums text-muted-foreground", children: (0, import_duration4.formatDuration)(s.durationMs) })
1722
+ ] }, s.id)) })
1723
+ ] }) : null
1703
1724
  ] })
1704
1725
  );
1705
1726
  }