executable-stories-react 0.13.0 → 0.15.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/index.js CHANGED
@@ -344,7 +344,7 @@ function formatValue(value) {
344
344
  function DocKv({ entry }) {
345
345
  return /* @__PURE__ */ jsxs2("dl", { className: "my-2 flex flex-wrap items-baseline gap-x-2 text-sm", children: [
346
346
  /* @__PURE__ */ jsx6("dt", { className: "font-semibold text-muted-foreground", children: entry.label }),
347
- /* @__PURE__ */ jsx6("dd", { className: "font-mono text-foreground", children: formatValue(entry.value) })
347
+ /* @__PURE__ */ jsx6("dd", { className: "min-w-0 break-words font-mono text-foreground", children: formatValue(entry.value) })
348
348
  ] });
349
349
  }
350
350
 
@@ -552,7 +552,7 @@ function DocHtml({ entry }) {
552
552
  loading: "lazy",
553
553
  title,
554
554
  className: "block w-full border-0",
555
- style: { height }
555
+ style: { height, colorScheme: "light", background: "#fff" }
556
556
  }
557
557
  )
558
558
  ] });
@@ -1314,57 +1314,68 @@ function ReportScenario({ scenario, hideTitle = false }) {
1314
1314
  className: "gap-0 py-0",
1315
1315
  children: [
1316
1316
  /* @__PURE__ */ jsxs18(CardHeader, { className: "px-4 py-3", children: [
1317
- /* @__PURE__ */ jsxs18("div", { className: cn("flex items-start gap-4", hideTitle ? "justify-end" : "justify-between"), children: [
1318
- hideTitle ? null : /* @__PURE__ */ jsxs18("h3", { id: titleId, className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
1319
- collapsible ? /* @__PURE__ */ jsx26(
1320
- "button",
1321
- {
1322
- type: "button",
1323
- onClick: () => collapse.toggle(scenario.id),
1324
- "aria-expanded": !collapsed,
1325
- "aria-controls": bodyId,
1326
- "aria-label": `Toggle ${scenario.title}`,
1327
- className: "shrink-0 cursor-pointer text-muted-foreground hover:text-foreground",
1328
- children: /* @__PURE__ */ jsx26("span", { "aria-hidden": true, className: cn("inline-block text-xs transition-transform", !collapsed && "rotate-90"), children: "\u25B8" })
1329
- }
1330
- ) : null,
1331
- /* @__PURE__ */ jsx26("span", { "aria-hidden": true, className: cn("text-sm leading-none", meta.glyphColor), children: meta.glyph }),
1332
- /* @__PURE__ */ jsx26("span", { children: scenario.title })
1333
- ] }),
1334
- /* @__PURE__ */ jsxs18("div", { className: "flex shrink-0 items-center gap-2", children: [
1335
- /* @__PURE__ */ jsx26(ScenarioRunHistory, { scenarioId: scenario.id }),
1336
- /* @__PURE__ */ jsx26(ScenarioStaleness, { scenario }),
1337
- scenario.durationMs > 0 ? /* @__PURE__ */ jsx26("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: formatDuration3(scenario.durationMs) }) : null,
1338
- meta.showPill ? /* @__PURE__ */ jsx26(Badge, { variant: meta.badgeVariant, "aria-label": `Status: ${label}`, children: label }) : /* @__PURE__ */ jsx26("span", { className: "sr-only", children: `Status: ${label}` }),
1339
- actions ? /* @__PURE__ */ jsxs18(DropdownMenu, { children: [
1340
- /* @__PURE__ */ jsx26(
1341
- DropdownMenuTrigger,
1342
- {
1343
- "aria-label": `Actions for ${scenario.title}`,
1344
- className: "cursor-pointer rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground [&_svg]:size-4",
1345
- children: /* @__PURE__ */ jsx26(MoreHorizontalIcon, { "aria-hidden": true })
1346
- }
1347
- ),
1348
- /* @__PURE__ */ jsxs18(DropdownMenuContent, { align: "end", children: [
1349
- /* @__PURE__ */ jsxs18(DropdownMenuItem, { onClick: () => actions.copyLink(scenario), children: [
1350
- /* @__PURE__ */ jsx26(LinkIcon, {}),
1351
- " Copy link"
1352
- ] }),
1353
- /* @__PURE__ */ jsxs18(DropdownMenuItem, { onClick: () => actions.copyMarkdown(scenario), children: [
1354
- /* @__PURE__ */ jsx26(FileTextIcon, {}),
1355
- " Copy as Markdown"
1356
- ] }),
1357
- /* @__PURE__ */ jsxs18(DropdownMenuItem, { onClick: () => actions.copyPrompt(scenario), children: [
1358
- /* @__PURE__ */ jsx26(SparklesIcon, {}),
1359
- " Explain with AI"
1360
- ] })
1317
+ /* @__PURE__ */ jsxs18(
1318
+ "div",
1319
+ {
1320
+ className: cn(
1321
+ // Wraps rather than squeezing: on a phone the status/duration group
1322
+ // is ~160px, which leaves a title column a few characters wide.
1323
+ "flex flex-wrap items-start gap-x-4 gap-y-1",
1324
+ hideTitle ? "justify-end" : "justify-between"
1325
+ ),
1326
+ children: [
1327
+ hideTitle ? null : /* @__PURE__ */ jsxs18("h3", { id: titleId, className: "flex min-w-0 flex-1 basis-48 items-center gap-2 text-sm font-medium text-foreground", children: [
1328
+ collapsible ? /* @__PURE__ */ jsx26(
1329
+ "button",
1330
+ {
1331
+ type: "button",
1332
+ onClick: () => collapse.toggle(scenario.id),
1333
+ "aria-expanded": !collapsed,
1334
+ "aria-controls": bodyId,
1335
+ "aria-label": `Toggle ${scenario.title}`,
1336
+ className: "shrink-0 cursor-pointer text-muted-foreground hover:text-foreground",
1337
+ children: /* @__PURE__ */ jsx26("span", { "aria-hidden": true, className: cn("inline-block text-xs transition-transform", !collapsed && "rotate-90"), children: "\u25B8" })
1338
+ }
1339
+ ) : null,
1340
+ /* @__PURE__ */ jsx26("span", { "aria-hidden": true, className: cn("text-sm leading-none", meta.glyphColor), children: meta.glyph }),
1341
+ /* @__PURE__ */ jsx26("span", { children: scenario.title })
1342
+ ] }),
1343
+ /* @__PURE__ */ jsxs18("div", { className: "flex shrink-0 items-center gap-2", children: [
1344
+ /* @__PURE__ */ jsx26(ScenarioRunHistory, { scenarioId: scenario.id }),
1345
+ /* @__PURE__ */ jsx26(ScenarioStaleness, { scenario }),
1346
+ scenario.durationMs > 0 ? /* @__PURE__ */ jsx26("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: formatDuration3(scenario.durationMs) }) : null,
1347
+ meta.showPill ? /* @__PURE__ */ jsx26(Badge, { variant: meta.badgeVariant, "aria-label": `Status: ${label}`, children: label }) : /* @__PURE__ */ jsx26("span", { className: "sr-only", children: `Status: ${label}` }),
1348
+ actions ? /* @__PURE__ */ jsxs18(DropdownMenu, { children: [
1349
+ /* @__PURE__ */ jsx26(
1350
+ DropdownMenuTrigger,
1351
+ {
1352
+ "aria-label": `Actions for ${scenario.title}`,
1353
+ className: "cursor-pointer rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground [&_svg]:size-4",
1354
+ children: /* @__PURE__ */ jsx26(MoreHorizontalIcon, { "aria-hidden": true })
1355
+ }
1356
+ ),
1357
+ /* @__PURE__ */ jsxs18(DropdownMenuContent, { align: "end", children: [
1358
+ /* @__PURE__ */ jsxs18(DropdownMenuItem, { onClick: () => actions.copyLink(scenario), children: [
1359
+ /* @__PURE__ */ jsx26(LinkIcon, {}),
1360
+ " Copy link"
1361
+ ] }),
1362
+ /* @__PURE__ */ jsxs18(DropdownMenuItem, { onClick: () => actions.copyMarkdown(scenario), children: [
1363
+ /* @__PURE__ */ jsx26(FileTextIcon, {}),
1364
+ " Copy as Markdown"
1365
+ ] }),
1366
+ /* @__PURE__ */ jsxs18(DropdownMenuItem, { onClick: () => actions.copyPrompt(scenario), children: [
1367
+ /* @__PURE__ */ jsx26(SparklesIcon, {}),
1368
+ " Explain with AI"
1369
+ ] })
1370
+ ] })
1371
+ ] }) : null
1361
1372
  ] })
1362
- ] }) : null
1363
- ] })
1364
- ] }),
1373
+ ]
1374
+ }
1375
+ ),
1365
1376
  scenario.tags.length > 0 || (scenario.tickets?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs18("ul", { "aria-label": "Tags and tickets", className: "flex flex-wrap gap-1.5", children: [
1366
1377
  scenario.tags.map((t) => /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsx26(Badge, { variant: "tag", children: t }) }, `tag-${t}`)),
1367
- (scenario.tickets ?? []).map((ticket) => /* @__PURE__ */ jsx26("li", { children: ticket.url ? /* @__PURE__ */ jsx26("a", { href: ticket.url, target: "_blank", rel: "noreferrer noopener", children: /* @__PURE__ */ jsx26(Badge, { variant: "outline", children: ticket.id }) }) : /* @__PURE__ */ jsx26(Badge, { variant: "outline", children: ticket.id }) }, `ticket-${ticket.id}`))
1378
+ (scenario.tickets ?? []).map((ticket) => /* @__PURE__ */ jsx26("li", { children: ticket.url ? /* @__PURE__ */ jsx26("a", { href: ticket.url, target: "_blank", rel: "noreferrer noopener", className: "inline-flex min-h-6 items-center", children: /* @__PURE__ */ jsx26(Badge, { variant: "outline", children: ticket.id }) }) : /* @__PURE__ */ jsx26(Badge, { variant: "outline", children: ticket.id }) }, `ticket-${ticket.id}`))
1368
1379
  ] }) : null
1369
1380
  ] }),
1370
1381
  /* @__PURE__ */ jsxs18(CardContent, { id: bodyId, hidden: collapsed, className: "px-4 pt-0 pb-4", children: [
@@ -1630,6 +1641,7 @@ function ReportSummaryView({ summary, className, ariaLabel }) {
1630
1641
 
1631
1642
  // src/components/ReportMeta.tsx
1632
1643
  import { formatDuration as formatDuration4 } from "executable-stories-core/utils/duration";
1644
+ import { slowestScenarios } from "executable-stories-core/report-queries";
1633
1645
  import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
1634
1646
  function ReportMeta() {
1635
1647
  const report = useReport();
@@ -1673,7 +1685,9 @@ function ReportMeta() {
1673
1685
  value: url ? /* @__PURE__ */ jsx34("a", { href: url, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: label }) : label
1674
1686
  });
1675
1687
  }
1676
- if (items.length === 0) return null;
1688
+ const slowest = slowestScenarios(report, 5);
1689
+ const showSlowest = slowest.length >= 3;
1690
+ if (items.length === 0 && !showSlowest) return null;
1677
1691
  return (
1678
1692
  // Run metadata is useful but secondary to "what failed" — tuck it into a
1679
1693
  // collapsed disclosure so it doesn't push the result down. Native <details>
@@ -1686,7 +1700,14 @@ function ReportMeta() {
1686
1700
  /* @__PURE__ */ jsx34("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__ */ jsxs22("div", { className: "flex items-baseline gap-1.5", children: [
1687
1701
  /* @__PURE__ */ jsx34("dt", { className: "font-medium", children: item.label }),
1688
1702
  /* @__PURE__ */ jsx34("dd", { className: "font-mono text-foreground", children: item.value })
1689
- ] }, item.label)) })
1703
+ ] }, item.label)) }),
1704
+ showSlowest ? /* @__PURE__ */ jsxs22("div", { className: "border-t border-border px-4 py-3", children: [
1705
+ /* @__PURE__ */ jsx34("div", { className: "mb-1.5 font-medium text-muted-foreground", children: "Slowest scenarios" }),
1706
+ /* @__PURE__ */ jsx34("ol", { className: "flex flex-col gap-1", "aria-label": "Slowest scenarios", children: slowest.map((s) => /* @__PURE__ */ jsxs22("li", { className: "flex items-baseline justify-between gap-4", children: [
1707
+ /* @__PURE__ */ jsx34("a", { href: `#${s.id}`, className: "min-w-0 text-primary underline underline-offset-2", children: s.title }),
1708
+ /* @__PURE__ */ jsx34("span", { className: "shrink-0 font-mono tabular-nums text-muted-foreground", children: formatDuration4(s.durationMs) })
1709
+ ] }, s.id)) })
1710
+ ] }) : null
1690
1711
  ] })
1691
1712
  );
1692
1713
  }