@kaizenreport/kensho-viewer 0.1.0

package/assets/pages.js

@@ -0,0 +1,1472 @@
+/* Auto-generated from pages.jsx by packages/viewer/scripts/build.js. Edit the .jsx — DO NOT edit this file. */
+/* global React, TreeDetailPage, TrendChartV2, HBars, DurationHistogram, FlakeScatter, TimelineGantt, SuiteHeatmap, RetryWaterfall */
+const {
+  useState: useStateP
+} = React;
+
+// ============== GRAPHS PAGE ==============
+function GraphsPage() {
+  const TREND_RUNS = window.TREND_RUNS || [];
+  const HISTOGRAM = window.HISTOGRAM || [];
+  const RICH_TESTS = window.RICH_TESTS || {};
+  const CATEGORIES = window.CATEGORIES || [];
+  const fmt = window._kenshoFmtDuration || (ms => ms + 'ms');
+  const [showAllSuites, setShowAllSuites] = useStateP(false);
+  const SUITE_CAP = 12;
+
+  // Highlight banner derivations — surface the three "punchiest" facts
+  // about the run so a stakeholder can scan and act in 5 seconds.
+  const allRich = Object.values(RICH_TESTS);
+  const slowest = allRich.filter(t => t.durMs > 0).sort((a, b) => b.durMs - a.durMs)[0];
+  const mostRetried = allRich.filter(t => t.retries > 0).sort((a, b) => b.retries - a.retries)[0];
+  const topCategory = CATEGORIES[0];
+
+  // Derive "Status by suite" from RICH_TESTS, grouped by first suite segment.
+  const suiteBuckets = {};
+  Object.values(RICH_TESTS).forEach(t => {
+    const suiteName = (t.suite || '').split('›')[0].trim() || 'Default';
+    if (!suiteBuckets[suiteName]) suiteBuckets[suiteName] = {
+      passed: 0,
+      failed: 0,
+      broken: 0,
+      skipped: 0
+    };
+    if (suiteBuckets[suiteName][t.status] != null) suiteBuckets[suiteName][t.status]++;
+  });
+  const suiteStatusBars = Object.entries(suiteBuckets).map(([label, b]) => {
+    const segs = ['failed', 'broken', 'skipped', 'passed'].filter(k => b[k] > 0).map(k => ({
+      k,
+      n: b[k]
+    }));
+    const total = b.passed + b.failed + b.broken + b.skipped;
+    return {
+      label,
+      segs,
+      total,
+      failures: b.failed + b.broken
+    };
+  }).sort((a, b) => b.failures - a.failures || b.total - a.total);
+  const visibleSuites = showAllSuites ? suiteStatusBars : suiteStatusBars.slice(0, SUITE_CAP);
+  const hiddenSuiteCount = suiteStatusBars.length - visibleSuites.length;
+  const totalTests = Object.values(RICH_TESTS).length;
+  const hasFlake = Object.values(RICH_TESTS).some(t => t.flakeRate > 0);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+    className: "k-h1",
+    style: {
+      marginBottom: 4
+    }
+  }, "Graphs"), /*#__PURE__*/React.createElement("div", {
+    className: "k-meta",
+    style: {
+      marginBottom: 18
+    }
+  }, "Distributions and trends across the active run \xB7 ", totalTests, " tests"), (slowest || mostRetried || topCategory) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gap: 16,
+      marginBottom: 16
+    }
+  }, slowest ? /*#__PURE__*/React.createElement(HighlightStat, {
+    overline: "Slowest test",
+    value: slowest.dur,
+    valueColor: "var(--status-broken-fg)",
+    subtitle: slowest.name,
+    accent: "var(--status-broken)",
+    onClick: () => window.__openTest?.(slowest.id),
+    title: `Open ${slowest.name} →`
+  }) : /*#__PURE__*/React.createElement(HighlightStat, {
+    overline: "Slowest test",
+    value: "\u2014",
+    subtitle: "No timing data",
+    accent: "var(--line)"
+  }), mostRetried ? /*#__PURE__*/React.createElement(HighlightStat, {
+    overline: "Most retried",
+    value: `${mostRetried.retries}×`,
+    valueColor: "#B69CFF",
+    subtitle: mostRetried.name,
+    accent: "#7C5CFF",
+    onClick: () => window.__openTest?.(mostRetried.id),
+    title: `Open ${mostRetried.name} →`
+  }) : /*#__PURE__*/React.createElement(HighlightStat, {
+    overline: "Most retried",
+    value: "0",
+    subtitle: "No retries this run \u2014 clean execution",
+    accent: "var(--line)"
+  }), topCategory ? /*#__PURE__*/React.createElement(HighlightStat, {
+    overline: "Top failure category",
+    value: String(topCategory.count),
+    valueColor: "var(--status-failed-fg)",
+    subtitle: topCategory.kind,
+    accent: "var(--status-failed)",
+    onClick: () => window.__navTo?.('categories'),
+    title: "Open Categories \u2192"
+  }) : /*#__PURE__*/React.createElement(HighlightStat, {
+    overline: "Top failure category",
+    value: "0",
+    subtitle: "No failures this run",
+    accent: "var(--status-passed)"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr',
+      gap: 16
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "card",
+    style: {
+      gridColumn: 'span 2'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hd"
+  }, /*#__PURE__*/React.createElement("h3", null, "Trend \xB7 ", TREND_RUNS.length, " run", TREND_RUNS.length === 1 ? '' : 's'), /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, "stacked status counts")), TREND_RUNS.length > 0 ? /*#__PURE__*/React.createElement(TrendChartV2, {
+    runs: TREND_RUNS
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 30,
+      color: 'var(--fg3)',
+      textAlign: 'center',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12
+    }
+  }, "No run history yet. Run kensho generate over multiple runs to populate.")), /*#__PURE__*/React.createElement("div", {
+    className: "card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hd"
+  }, /*#__PURE__*/React.createElement("h3", null, "Status by suite"), /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, showAllSuites ? `all ${suiteStatusBars.length}` : `top ${visibleSuites.length} of ${suiteStatusBars.length}`, " \xB7 sorted by failures")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 8
+    }
+  }, visibleSuites.map((s, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '160px 1fr 30px',
+      alignItems: 'center',
+      gap: 10
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12,
+      color: 'var(--fg1)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, s.label), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 14,
+      background: 'var(--bg-sunken)',
+      borderRadius: 3,
+      display: 'flex',
+      overflow: 'hidden'
+    }
+  }, s.segs.map((g, j) => /*#__PURE__*/React.createElement("div", {
+    key: j,
+    style: {
+      width: `${g.n / s.total * 100}%`,
+      background: `var(--status-${g.k})`
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      color: 'var(--fg3)',
+      textAlign: 'right'
+    }
+  }, s.total)))), hiddenSuiteCount > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      marginTop: 14,
+      paddingTop: 12,
+      borderTop: '1px solid var(--line)'
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "btn btn-ghost",
+    style: {
+      height: 28,
+      fontSize: 12
+    },
+    onClick: () => setShowAllSuites(true)
+  }, "Show ", hiddenSuiteCount, " more suites \u2192")), showAllSuites && suiteStatusBars.length > SUITE_CAP && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      marginTop: 14,
+      paddingTop: 12,
+      borderTop: '1px solid var(--line)'
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "btn btn-ghost",
+    style: {
+      height: 28,
+      fontSize: 12
+    },
+    onClick: () => setShowAllSuites(false)
+  }, "\u2191 Collapse to top ", SUITE_CAP))), /*#__PURE__*/React.createElement("div", {
+    className: "card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hd"
+  }, /*#__PURE__*/React.createElement("h3", null, "Duration distribution"), /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, "all ", totalTests, " tests")), /*#__PURE__*/React.createElement(DurationHistogram, {
+    buckets: HISTOGRAM
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "card",
+    style: {
+      gridColumn: 'span 2'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hd"
+  }, /*#__PURE__*/React.createElement("h3", null, "Flake rate vs duration"), /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, "last 80 runs \xB7 circle size = sample count")), hasFlake ? /*#__PURE__*/React.createElement(FlakeScatter, {
+    tests: Object.values(RICH_TESTS).filter(t => t.flakeRate > 0).map(t => ({
+      name: t.name,
+      runs: 80,
+      flakeRate: t.flakeRate,
+      avgDur: t.avgDurMs
+    }))
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 30,
+      color: 'var(--fg3)',
+      textAlign: 'center',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12
+    }
+  }, "Flake-rate analysis requires run history. Run kensho generate over multiple runs to populate."))));
+}
+
+// ============== TIMELINE PAGE ==============
+function TimelinePage() {
+  const TIMELINE_TESTS = window.TIMELINE_TESTS || [];
+  const RICH_TESTS = window.RICH_TESTS || {};
+  const KENSHO_INDEX = window.KENSHO_INDEX || {};
+  const fmt = window._kenshoFmtDuration || (ms => ms + 'ms');
+
+  // View modes — at scale (>50 tests) the Gantt becomes unreadable. Default to
+  // 'top' (longest 25), with toggles for failures-only and full view.
+  const [mode, setMode] = useStateP(TIMELINE_TESTS.length > 50 ? 'top' : 'all');
+  const failuresOnly = TIMELINE_TESTS.filter(t => t.status === 'failed' || t.status === 'broken');
+  let visibleTests;
+  if (mode === 'top') {
+    visibleTests = [...TIMELINE_TESTS].sort((a, b) => b.durMs - a.durMs).slice(0, 25);
+  } else if (mode === 'failures') {
+    visibleTests = failuresOnly;
+  } else {
+    visibleTests = TIMELINE_TESTS;
+  }
+
+  // Re-base start times so the Gantt fills the canvas regardless of mode —
+  // showing 25 longest tests with sparse start times leaves dead space at
+  // the front of the chart otherwise.
+  const minStart = visibleTests.length ? Math.min(...visibleTests.map(t => t.start)) : 0;
+  const rebased = visibleTests.map(t => ({
+    ...t,
+    start: t.start - minStart
+  }));
+  const totalMs = rebased.length ? Math.max(...rebased.map(t => t.start + t.durMs)) + 200 : 1000;
+  const fullDurationMs = TIMELINE_TESTS.length ? Math.max(...TIMELINE_TESTS.map(t => t.start + t.durMs)) : 0;
+  const hasHistory = (KENSHO_INDEX.history?.length || 0) > 0;
+  const hasRetries = Object.values(RICH_TESTS).some(t => t.retries > 0);
+  const runId = KENSHO_INDEX.runId ? '#' + KENSHO_INDEX.runId : '';
+  const workers = KENSHO_INDEX.env?.workers || 1;
+  const MODES = [['top', 'Top 25 longest', TIMELINE_TESTS.length > 0 ? Math.min(25, TIMELINE_TESTS.length) : 0], ['failures', 'Failures only', failuresOnly.length], ['all', 'All', TIMELINE_TESTS.length]].filter(([id, _, n]) => n > 0);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+    className: "k-h1",
+    style: {
+      marginBottom: 4
+    }
+  }, "Timeline"), /*#__PURE__*/React.createElement("div", {
+    className: "k-meta",
+    style: {
+      marginBottom: 18
+    }
+  }, "Run ", runId, " \xB7 ", workers, " parallel worker", workers !== 1 ? 's' : '', " \xB7 total ", fmt(fullDurationMs)), /*#__PURE__*/React.createElement("div", {
+    className: "card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hd"
+  }, /*#__PURE__*/React.createElement("h3", null, "Per-test execution \xB7 Gantt"), /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, "click any bar to open the test in detail")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 6,
+      marginBottom: 14,
+      flexWrap: 'wrap'
+    }
+  }, MODES.map(([id, label, n]) => {
+    const active = mode === id;
+    return /*#__PURE__*/React.createElement("button", {
+      key: id,
+      onClick: () => setMode(id),
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        padding: '4px 10px',
+        borderRadius: 999,
+        border: '1px solid ' + (active ? 'var(--brand-blue-500)' : 'var(--line)'),
+        background: active ? 'var(--brand-blue-500)' : 'var(--bg-elev)',
+        color: active ? '#fff' : 'var(--fg2)',
+        fontFamily: 'var(--font-body)',
+        fontSize: 12,
+        fontWeight: 600,
+        cursor: 'pointer',
+        transition: 'all var(--dur-fast)'
+      }
+    }, label, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 11,
+        opacity: 0.9
+      }
+    }, n));
+  })), rebased.length > 0 ? /*#__PURE__*/React.createElement(TimelineGantt, {
+    tests: rebased,
+    totalMs: totalMs,
+    onOpen: t => {
+      if (t.id && RICH_TESTS[t.id]) {
+        window.__openTest?.(t.id);
+        return;
+      }
+      const match = Object.values(RICH_TESTS).find(r => r.name === t.name);
+      if (match) window.__openTest?.(match.id);
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 30,
+      color: 'var(--fg3)',
+      textAlign: 'center',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12
+    }
+  }, mode === 'failures' ? 'No failing tests in this run.' : 'No tests with timing data in this run.')), /*#__PURE__*/React.createElement("div", {
+    className: "card",
+    style: {
+      marginTop: 16
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hd"
+  }, /*#__PURE__*/React.createElement("h3", null, "Suite execution heatmap"), /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, "last 8 runs")), hasHistory ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 30,
+      color: 'var(--fg3)',
+      textAlign: 'center',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12
+    }
+  }, "Heatmap view coming soon. History is populated.") : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 30,
+      color: 'var(--fg3)',
+      textAlign: 'center',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12
+    }
+  }, "Run history not yet populated.")), /*#__PURE__*/React.createElement("div", {
+    className: "card",
+    style: {
+      marginTop: 16
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hd"
+  }, /*#__PURE__*/React.createElement("h3", null, "Retry waterfall"), /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, "attempt-by-attempt status & duration")), hasRetries ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 30,
+      color: 'var(--fg3)',
+      textAlign: 'center',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12
+    }
+  }, "Retry attempt details coming soon. Open a retried test from the suites view.") : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 30,
+      color: 'var(--fg3)',
+      textAlign: 'center',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12
+    }
+  }, "Run history not yet populated.")));
+}
+
+// ============== CATEGORIES PAGE — error-type classification ==============
+function CategoriesPage() {
+  const ERROR_TYPES = window.CATEGORIES || [];
+  const RICH_TESTS = window.RICH_TESTS || {};
+  const [selectedKind, setKind] = useStateP(ERROR_TYPES[0]?.kind ?? null);
+  if (ERROR_TYPES.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "card",
+      style: {
+        padding: 30,
+        textAlign: 'center',
+        color: 'var(--fg3)',
+        fontFamily: 'var(--font-mono)',
+        fontSize: 13
+      }
+    }, "No failures in this run. Nothing to categorize.");
+  }
+  const sel = ERROR_TYPES.find(e => e.kind === selectedKind) || ERROR_TYPES[0];
+  const totalIssues = ERROR_TYPES.reduce((a, b) => a + b.count, 0);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'baseline',
+      justifyContent: 'space-between',
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+    className: "k-h1",
+    style: {
+      marginBottom: 2
+    }
+  }, "Categories"), /*#__PURE__*/React.createElement("div", {
+    className: "k-meta"
+  }, "Failures grouped by error type \xB7 ", ERROR_TYPES.length, " types \xB7 ", totalIssues, " tests")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 6
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "badge b-failed"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dot"
+  }), ERROR_TYPES.filter(e => e.family === 'failed').reduce((a, b) => a + b.count, 0), " product"), /*#__PURE__*/React.createElement("span", {
+    className: "badge b-broken"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dot"
+  }), ERROR_TYPES.filter(e => e.family === 'broken').reduce((a, b) => a + b.count, 0), " test-defects"), /*#__PURE__*/React.createElement("span", {
+    className: "badge b-skipped"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dot"
+  }), ERROR_TYPES.filter(e => e.family === 'skipped').reduce((a, b) => a + b.count, 0), " environment"))), /*#__PURE__*/React.createElement("div", {
+    className: "card",
+    style: {
+      marginBottom: 16
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hd"
+  }, /*#__PURE__*/React.createElement("h3", null, "Distribution by error type"), /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, totalIssues, " test failures")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 8
+    }
+  }, ERROR_TYPES.map(e => /*#__PURE__*/React.createElement("div", {
+    key: e.kind,
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'minmax(220px, 280px) 1fr 36px',
+      alignItems: 'center',
+      gap: 10
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 6,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12.5,
+      color: 'var(--fg1)'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 8,
+      height: 8,
+      borderRadius: 2,
+      background: e.color,
+      flexShrink: 0
+    }
+  }), e.kind), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 18,
+      background: 'var(--bg-sunken)',
+      borderRadius: 3,
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: `${e.count / totalIssues * 100}%`,
+      height: '100%',
+      background: e.color
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12,
+      color: 'var(--fg2)',
+      textAlign: 'right',
+      fontVariantNumeric: 'tabular-nums'
+    }
+  }, e.count))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'minmax(260px, 320px) 1fr',
+      gap: 0,
+      background: 'var(--bg-elev)',
+      border: '1px solid var(--line)',
+      borderRadius: 12,
+      overflow: 'hidden',
+      minHeight: 480
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderRight: '1px solid var(--line)'
+    }
+  }, ERROR_TYPES.map(e => /*#__PURE__*/React.createElement("div", {
+    key: e.kind,
+    onClick: () => setKind(e.kind),
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '1fr auto',
+      alignItems: 'center',
+      gap: 10,
+      padding: '12px 14px',
+      cursor: 'pointer',
+      borderLeft: selectedKind === e.kind ? `2px solid ${e.color}` : '2px solid transparent',
+      background: selectedKind === e.kind ? 'var(--accent-soft)' : 'transparent',
+      borderBottom: '1px solid var(--line)'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 6,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12.5,
+      fontWeight: 600,
+      color: 'var(--fg1)'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 8,
+      height: 8,
+      borderRadius: 2,
+      background: e.color,
+      flexShrink: 0
+    }
+  }), e.kind), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11,
+      color: 'var(--fg3)',
+      marginTop: 3,
+      textTransform: 'uppercase',
+      letterSpacing: '.08em'
+    }
+  }, e.family)), /*#__PURE__*/React.createElement("span", {
+    style: {
+      background: e.color,
+      color: '#fff',
+      fontSize: 11,
+      fontWeight: 700,
+      padding: '2px 8px',
+      borderRadius: 3,
+      fontFamily: 'var(--font-mono)'
+    }
+  }, e.count)))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 24
+    }
+  }, sel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "k-overline",
+    style: {
+      marginBottom: 6
+    }
+  }, sel.family, " \xB7 error type"), /*#__PURE__*/React.createElement("h2", {
+    className: "k-h2",
+    style: {
+      fontSize: 22,
+      fontFamily: 'var(--font-mono)',
+      fontWeight: 600,
+      marginBottom: 8
+    }
+  }, sel.kind), /*#__PURE__*/React.createElement("p", {
+    className: "k-body",
+    style: {
+      marginBottom: 18
+    }
+  }, sel.description), /*#__PURE__*/React.createElement("div", {
+    className: "k-overline",
+    style: {
+      marginBottom: 8
+    }
+  }, "Affected tests \xB7 ", sel.count), /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: '1px solid var(--line)',
+      borderRadius: 8,
+      overflow: 'hidden'
+    }
+  }, sel.tests.map((tid, i) => {
+    const t = RICH_TESTS[tid];
+    const name = t ? t.name : tid;
+    const status = t ? t.status : sel.family;
+    const file = t ? t.file : '';
+    const msg = t?.error?.message || '';
+    const canOpen = !!t;
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      onClick: canOpen ? () => window.__openTest?.(t.id) : undefined,
+      title: canOpen ? `Open ${name} →` : 'Test not found in this run',
+      style: {
+        display: 'grid',
+        gridTemplateColumns: '24px 1fr auto',
+        gap: 10,
+        padding: '12px 14px',
+        borderTop: i ? '1px solid var(--line)' : 'none',
+        alignItems: 'flex-start',
+        cursor: canOpen ? 'pointer' : 'default',
+        transition: 'background 120ms'
+      },
+      onMouseEnter: canOpen ? e => e.currentTarget.style.background = 'var(--bg-hover)' : undefined,
+      onMouseLeave: canOpen ? e => e.currentTarget.style.background = 'transparent' : undefined
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `s-icon ${status}`,
+      style: {
+        marginTop: 2
+      }
+    }, status === 'passed' ? '✓' : status === 'failed' ? '✕' : status === 'broken' ? '!' : '⊘'), /*#__PURE__*/React.createElement("div", {
+      style: {
+        minWidth: 0
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: 'var(--font-body)',
+        fontSize: 13,
+        fontWeight: 600,
+        color: 'var(--fg1)'
+      }
+    }, name), file && /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 11,
+        color: 'var(--fg3)',
+        marginTop: 2
+      }
+    }, file), msg && /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 11.5,
+        color: 'var(--status-failed-fg)',
+        marginTop: 6,
+        padding: '6px 8px',
+        background: 'var(--status-failed-bg)',
+        border: '1px solid var(--status-failed-border)',
+        borderRadius: 4
+      }
+    }, msg)), canOpen && /*#__PURE__*/React.createElement("span", {
+      style: {
+        alignSelf: 'center',
+        fontFamily: 'var(--font-mono)',
+        fontSize: 11,
+        color: 'var(--fg3)',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+        whiteSpace: 'nowrap'
+      }
+    }, "Open ", /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: 13
+      }
+    }, "\u2192")));
+  }))))));
+}
+
+// ============== FLAKY PAGE ==============
+//
+// Single-run flake derivation — Kensho is the OSS, single-run report; rolling
+// flake-rate analysis lives in Kaizen (the SaaS platform). What we CAN derive
+// from one run is meaningful enough to act on:
+//
+//   · "Recovered"  — passed on retry (real flake — non-deterministic test)
+//   · "Broken"     — status=broken (test infra failed mid-execution)
+//   · "Failed retry" — failed even after one or more retries (flaky AND broken)
+//
+// Each card explains the signal in plain language so users understand the
+// difference between a flake and a regular failure. Severity ordering:
+// recovered > broken > failed-with-retry, since recoveries are pure flakes.
+function FlakyPage() {
+  const RICH_TESTS = window.RICH_TESTS || {};
+  const allTests = Object.values(RICH_TESTS);
+  const fmt = window._kenshoFmtDuration || (ms => ms + 'ms');
+
+  // Bucket every test into one of three flake categories (or none).
+  const buckets = {
+    recovered: [],
+    broken: [],
+    failedWithRetries: []
+  };
+  for (const t of allTests) {
+    if (t.retries > 0 && t.status === 'passed') buckets.recovered.push(t);else if (t.status === 'broken') buckets.broken.push(t);else if (t.retries > 0 && (t.status === 'failed' || t.status === 'broken')) buckets.failedWithRetries.push(t);
+  }
+  const flakeTotal = buckets.recovered.length + buckets.broken.length + buckets.failedWithRetries.length;
+  const [filter, setFilter] = useStateP('all');
+
+  // Stable order for rendering — recoveries first (highest signal-to-noise),
+  // then broken, then failed-with-retries. Within each bucket, sort by retry
+  // count desc so the highest-friction tests bubble up.
+  const ALL_FLAKY = [...buckets.recovered.map(t => ({
+    ...t,
+    _bucket: 'recovered'
+  })), ...buckets.broken.map(t => ({
+    ...t,
+    _bucket: 'broken'
+  })), ...buckets.failedWithRetries.map(t => ({
+    ...t,
+    _bucket: 'failedWithRetries'
+  }))].sort((a, b) => (b.retries || 0) - (a.retries || 0));
+  const visible = filter === 'all' ? ALL_FLAKY : ALL_FLAKY.filter(t => t._bucket === filter);
+
+  // j/k/Enter shortcuts on the Flaky list — keep selection local; pressing
+  // Enter delegates to the global window.__openTest hook from app.jsx.
+  const [selectedIdx, setSelectedIdx] = useStateP(-1);
+  React.useEffect(() => {
+    const onMove = e => {
+      if (visible.length === 0) return;
+      const delta = e.detail?.delta || 0;
+      setSelectedIdx(prev => {
+        const idx = prev === -1 ? delta > 0 ? 0 : visible.length - 1 : prev + delta;
+        return Math.max(0, Math.min(visible.length - 1, idx));
+      });
+    };
+    const onOpen = () => {
+      if (selectedIdx >= 0 && visible[selectedIdx]) window.__openTest?.(visible[selectedIdx].id);
+    };
+    window.addEventListener('kensho:move-selection', onMove);
+    window.addEventListener('kensho:open-selection', onOpen);
+    return () => {
+      window.removeEventListener('kensho:move-selection', onMove);
+      window.removeEventListener('kensho:open-selection', onOpen);
+    };
+  }, [selectedIdx, visible]);
+  const passRate = allTests.length > 0 ? Math.round((allTests.length - flakeTotal) / allTests.length * 100) : 100;
+  const flakeRate = allTests.length > 0 ? (flakeTotal / allTests.length * 100).toFixed(1) : '0';
+  if (allTests.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "card",
+      style: {
+        padding: 30,
+        textAlign: 'center',
+        color: 'var(--fg3)'
+      }
+    }, "No tests in this report.");
+  }
+  if (flakeTotal === 0) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+      className: "k-h1",
+      style: {
+        marginBottom: 4
+      }
+    }, "Flaky tests"), /*#__PURE__*/React.createElement("div", {
+      className: "k-meta",
+      style: {
+        marginBottom: 24
+      }
+    }, "Tests that retried, recovered, or broke during execution"), /*#__PURE__*/React.createElement("div", {
+      className: "card",
+      style: {
+        padding: '48px 32px',
+        textAlign: 'center',
+        background: 'linear-gradient(180deg, var(--status-passed-bg), transparent)'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 64,
+        height: 64,
+        borderRadius: 999,
+        background: 'var(--status-passed-bg)',
+        border: '2px solid var(--status-passed-border)',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 16
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: 30,
+        color: 'var(--status-passed)'
+      }
+    }, "\u2713")), /*#__PURE__*/React.createElement("h2", {
+      className: "k-h2",
+      style: {
+        marginBottom: 8,
+        fontSize: 22
+      }
+    }, "No flaky tests detected"), /*#__PURE__*/React.createElement("p", {
+      className: "k-body",
+      style: {
+        maxWidth: 460,
+        margin: '0 auto',
+        color: 'var(--fg2)'
+      }
+    }, "Every test ran cleanly on the first attempt \u2014 no retries, no broken executions. Flaky-test detection here is single-run; rolling flake-rate analysis (last N runs) lives in the Kaizen platform.")));
+  }
+  const FILTERS = [['all', 'All flaky', flakeTotal], ['recovered', 'Recovered', buckets.recovered.length], ['broken', 'Broken', buckets.broken.length], ['failedWithRetries', 'Failed retry', buckets.failedWithRetries.length]].filter(([id, _, n]) => id === 'all' || n > 0);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'baseline',
+      justifyContent: 'space-between',
+      marginBottom: 14,
+      flexWrap: 'wrap',
+      gap: 16
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+    className: "k-h1",
+    style: {
+      marginBottom: 4
+    }
+  }, "Flaky tests"), /*#__PURE__*/React.createElement("div", {
+    className: "k-meta"
+  }, flakeTotal, " of ", allTests.length, " tests showed instability \xB7 ", flakeRate, "% flake rate")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      color: 'var(--fg3)',
+      maxWidth: 380,
+      textAlign: 'right',
+      lineHeight: 1.55
+    }
+  }, "Single-run signal \u2014 derived from ", /*#__PURE__*/React.createElement("code", {
+    style: {
+      color: 'var(--fg2)'
+    }
+  }, "retries"), " + ", /*#__PURE__*/React.createElement("code", {
+    style: {
+      color: 'var(--fg2)'
+    }
+  }, "broken"), ". For rolling flake-rate over many runs, use the Kaizen platform.")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gap: 16,
+      marginBottom: 18
+    }
+  }, /*#__PURE__*/React.createElement(FlakyStatCard, {
+    accent: "var(--status-broken)",
+    icon: "rotate-ccw",
+    label: "Recovered",
+    value: buckets.recovered.length,
+    desc: "Passed on retry \u2014 a real flake (non-deterministic). Investigate the test for hidden timing or state assumptions.",
+    onClick: buckets.recovered.length > 0 ? () => setFilter('recovered') : null
+  }), /*#__PURE__*/React.createElement(FlakyStatCard, {
+    accent: "#7C5CFF",
+    icon: "zap-off",
+    label: "Broken",
+    value: buckets.broken.length,
+    desc: "Test infrastructure failed mid-execution (setup, teardown, or fixture). Often unrelated to product behavior.",
+    onClick: buckets.broken.length > 0 ? () => setFilter('broken') : null
+  }), /*#__PURE__*/React.createElement(FlakyStatCard, {
+    accent: "var(--status-failed)",
+    icon: "alert-triangle",
+    label: "Failed retry",
+    value: buckets.failedWithRetries.length,
+    desc: "Failed even after one or more retries. Could be a real defect masquerading as a flake \u2014 prioritize.",
+    onClick: buckets.failedWithRetries.length > 0 ? () => setFilter('failedWithRetries') : null
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "card",
+    style: {
+      marginBottom: 16
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hd"
+  }, /*#__PURE__*/React.createElement("h3", null, "Affected tests"), /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, visible.length, " shown \xB7 sorted by retry count")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 6,
+      padding: '2px 0 14px',
+      flexWrap: 'wrap'
+    }
+  }, FILTERS.map(([id, label, n]) => {
+    const active = filter === id;
+    return /*#__PURE__*/React.createElement("button", {
+      key: id,
+      onClick: () => setFilter(id),
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        padding: '4px 10px',
+        borderRadius: 999,
+        border: '1px solid ' + (active ? 'var(--brand-blue-500)' : 'var(--line)'),
+        background: active ? 'var(--brand-blue-500)' : 'var(--bg-elev)',
+        color: active ? '#fff' : 'var(--fg2)',
+        fontFamily: 'var(--font-body)',
+        fontSize: 12,
+        fontWeight: 600,
+        cursor: 'pointer',
+        transition: 'all var(--dur-fast)'
+      }
+    }, label, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 11,
+        opacity: 0.9
+      }
+    }, n));
+  })), visible.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '30px 0',
+      textAlign: 'center',
+      color: 'var(--fg3)',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12
+    }
+  }, "No tests in this category.") : /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, visible.map((t, i) => /*#__PURE__*/React.createElement(FlakyTestRow, {
+    key: t.id,
+    test: t,
+    index: i,
+    selected: i === selectedIdx
+  })))));
+}
+
+// FlakyStatCard — stat banner card. Subtle gradient + accent stripe.
+function FlakyStatCard({
+  accent,
+  icon,
+  label,
+  value,
+  desc,
+  onClick
+}) {
+  const clickable = !!onClick;
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: onClick || undefined,
+    style: {
+      position: 'relative',
+      padding: '18px 20px',
+      background: 'var(--bg-elev)',
+      border: '1px solid var(--line)',
+      borderRadius: 12,
+      cursor: clickable ? 'pointer' : 'default',
+      overflow: 'hidden',
+      transition: 'transform var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast)'
+    },
+    onMouseEnter: clickable ? e => {
+      e.currentTarget.style.borderColor = accent;
+      e.currentTarget.style.transform = 'translateY(-1px)';
+    } : undefined,
+    onMouseLeave: clickable ? e => {
+      e.currentTarget.style.borderColor = 'var(--line)';
+      e.currentTarget.style.transform = 'translateY(0)';
+    } : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      bottom: 0,
+      width: 4,
+      background: accent
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      right: -30,
+      top: -30,
+      width: 120,
+      height: 120,
+      borderRadius: '50%',
+      background: `radial-gradient(circle, ${accent}22 0%, transparent 70%)`
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      marginBottom: 8,
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 28,
+      height: 28,
+      borderRadius: 8,
+      background: `${accent}1F`,
+      color: accent,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 14
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10.5,
+      color: 'var(--fg3)',
+      letterSpacing: '.14em',
+      textTransform: 'uppercase'
+    }
+  }, label)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-display)',
+      fontSize: 42,
+      fontWeight: 700,
+      letterSpacing: -0.8,
+      color: 'var(--fg1)',
+      lineHeight: 1,
+      marginBottom: 10
+    }
+  }, value), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-body)',
+      fontSize: 12.5,
+      color: 'var(--fg2)',
+      lineHeight: 1.55
+    }
+  }, desc));
+}
+
+// FlakyTestRow — single affected test in the list.
+function FlakyTestRow({
+  test,
+  index,
+  selected
+}) {
+  const BUCKET_META = {
+    recovered: {
+      color: 'var(--status-broken)',
+      label: 'RECOVERED',
+      pillBg: 'var(--status-broken-bg)',
+      pillFg: 'var(--status-broken-fg)',
+      icon: 'rotate-ccw'
+    },
+    broken: {
+      color: '#7C5CFF',
+      label: 'BROKEN',
+      pillBg: 'rgba(124,92,255,0.15)',
+      pillFg: '#B69CFF',
+      icon: 'zap-off'
+    },
+    failedWithRetries: {
+      color: 'var(--status-failed)',
+      label: 'FAILED RETRY',
+      pillBg: 'var(--status-failed-bg)',
+      pillFg: 'var(--status-failed-fg)',
+      icon: 'alert-triangle'
+    }
+  };
+  const m = BUCKET_META[test._bucket] || BUCKET_META.broken;
+
+  // Compute a rough "stability score" for visual weight: lower = flakier.
+  // 100 base, –20 per retry, –30 if broken, –10 if failed.
+  let stability = 100 - test.retries * 20;
+  if (test.status === 'broken') stability -= 30;else if (test.status === 'failed') stability -= 10;
+  stability = Math.max(0, Math.min(100, stability));
+  const stColor = stability >= 60 ? 'var(--status-broken)' : 'var(--status-failed)';
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: () => window.__openTest?.(test.id),
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'auto 110px 1fr 110px auto',
+      gap: 14,
+      alignItems: 'center',
+      padding: '12px 4px',
+      cursor: 'pointer',
+      borderTop: index ? '1px solid var(--line)' : 'none',
+      background: selected ? 'var(--accent-soft)' : 'transparent',
+      borderLeft: selected ? '2px solid var(--brand-blue-500)' : '2px solid transparent',
+      transition: 'background var(--dur-fast)'
+    },
+    onMouseEnter: e => {
+      if (!selected) e.currentTarget.style.background = 'var(--bg-hover)';
+    },
+    onMouseLeave: e => {
+      if (!selected) e.currentTarget.style.background = 'transparent';
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 32,
+      height: 32,
+      borderRadius: 8,
+      background: `${m.color}1F`,
+      color: m.color,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: m.icon,
+    size: 14
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '3px 0',
+      background: m.pillBg,
+      color: m.pillFg,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10.5,
+      fontWeight: 700,
+      letterSpacing: 0.5,
+      borderRadius: 4
+    }
+  }, m.label), /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-body)',
+      fontSize: 13.5,
+      fontWeight: 600,
+      color: 'var(--fg1)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, test.name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      color: 'var(--fg3)',
+      marginTop: 3,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, test.suite ? /*#__PURE__*/React.createElement("span", null, test.suite) : null, test.suite && test.file ? /*#__PURE__*/React.createElement("span", null, " \xB7 ") : null, test.file ? /*#__PURE__*/React.createElement("span", null, test.file) : null)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 4,
+      alignItems: 'flex-end'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      color: 'var(--fg3)'
+    }
+  }, test.retries > 0 ? `${test.retries} ${test.retries === 1 ? 'retry' : 'retries'}` : 'no retries'), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 90,
+      height: 4,
+      background: 'var(--bg-sunken)',
+      borderRadius: 999,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: `${stability}%`,
+      height: '100%',
+      background: stColor,
+      transition: 'width var(--dur-fast)'
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10,
+      color: 'var(--fg4)',
+      letterSpacing: '.08em',
+      textTransform: 'uppercase'
+    }
+  }, "stability ", stability, "%")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12,
+      color: 'var(--fg3)'
+    }
+  }, test.dur));
+}
+
+// ============== SUITES PAGE — uses TreeDetailPage ==============
+function SuitesView({
+  onOpen
+}) {
+  const tree = window.SUITE_TREE || [];
+  if (tree.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "card",
+      style: {
+        padding: 30,
+        textAlign: 'center',
+        color: 'var(--fg3)'
+      }
+    }, "No suites in this report.");
+  }
+  return /*#__PURE__*/React.createElement(TreeDetailPage, {
+    title: "Suites",
+    subtitle: "Tests grouped by suite organization",
+    tree: tree
+  });
+}
+
+// ============== PACKAGES PAGE — file-path tree, opens detail in-place ==============
+function PackagesPage() {
+  const RICH_TESTS = window.RICH_TESTS || {};
+  const allTests = Object.values(RICH_TESTS);
+  if (allTests.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "card",
+      style: {
+        padding: 30,
+        textAlign: 'center',
+        color: 'var(--fg3)'
+      }
+    }, "No tests in this report.");
+  }
+
+  // Build a tree from RICH_TESTS file paths, e.g. src/test/auth/login.spec.ts → src › test › auth › login.spec.ts
+  const root = {
+    _children: {}
+  };
+  allTests.forEach(t => {
+    if (!t.file) return;
+    const parts = t.file.split(':')[0].split('/');
+    let node = root;
+    parts.forEach((p, i) => {
+      if (!node._children[p]) node._children[p] = {
+        _children: {},
+        _name: p,
+        _isFile: i === parts.length - 1
+      };
+      node = node._children[p];
+      if (node._isFile) node._test = t.id;
+    });
+  });
+  const toTree = (node, prefix = '') => Object.entries(node._children).map(([name, child]) => {
+    const id = prefix + '/' + name;
+    if (child._isFile) {
+      return {
+        id,
+        testId: child._test
+      };
+    }
+    return {
+      id,
+      name,
+      children: toTree(child, id)
+    };
+  });
+
+  // Collapse single-child folders for cleaner display
+  const collapse = nodes => nodes.map(n => {
+    if (!n.children) return n;
+    let kids = collapse(n.children);
+    while (kids.length === 1 && kids[0].children) {
+      n = {
+        ...n,
+        name: n.name + ' › ' + kids[0].name,
+        children: kids[0].children,
+        id: kids[0].id
+      };
+      kids = n.children;
+    }
+    return {
+      ...n,
+      children: kids
+    };
+  });
+  const tree = collapse(toTree(root));
+  if (tree.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "card",
+      style: {
+        padding: 30,
+        textAlign: 'center',
+        color: 'var(--fg3)'
+      }
+    }, "No source-file metadata in this report. Add filePath to your test cases to populate this tree.");
+  }
+  return /*#__PURE__*/React.createElement(TreeDetailPage, {
+    title: "Packages",
+    subtitle: "Tests grouped by source-code package",
+    tree: tree
+  });
+}
+
+// ============== BEHAVIORS PAGE — Epic › Feature › Story tree ==============
+function BehaviorsPage() {
+  const tree = window.BEHAVIOR_TREE || [];
+  if (tree.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "card",
+      style: {
+        padding: 30,
+        textAlign: 'center',
+        color: 'var(--fg3)'
+      }
+    }, "No BDD/behavior annotations in this report. Add behavior.epic/feature/scenario to your test cases to populate this tree.");
+  }
+  return /*#__PURE__*/React.createElement(TreeDetailPage, {
+    title: "Behaviors",
+    subtitle: "BDD tree \xB7 Epic \u203A Feature \u203A Story \xB7 Given/When/Then in test details",
+    tree: tree
+  });
+}
+
+// ============== HISTORY PAGE ==============
+function HistoryPage() {
+  const HISTORY_RUNS = window.HISTORY_RUNS || [];
+  const TREND_RUNS = window.TREND_RUNS || [];
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+    className: "k-h1",
+    style: {
+      marginBottom: 4
+    }
+  }, "History"), /*#__PURE__*/React.createElement("div", {
+    className: "k-meta",
+    style: {
+      marginBottom: 18
+    }
+  }, "Last ", HISTORY_RUNS.length, " run", HISTORY_RUNS.length !== 1 ? 's' : '', " \xB7 main & PR branches"), /*#__PURE__*/React.createElement("div", {
+    className: "card",
+    style: {
+      marginBottom: 16
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hd"
+  }, /*#__PURE__*/React.createElement("h3", null, "Pass-rate trend"), /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, "last ", TREND_RUNS.length, " run", TREND_RUNS.length !== 1 ? 's' : '')), TREND_RUNS.length > 0 ? /*#__PURE__*/React.createElement(TrendChartV2, {
+    runs: TREND_RUNS
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 30,
+      color: 'var(--fg3)',
+      textAlign: 'center',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12
+    }
+  }, "No run history yet. Run kensho generate over multiple runs to populate.")), /*#__PURE__*/React.createElement("div", {
+    className: "card kv-flush"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '24px 200px 1fr 110px 110px 80px',
+      gap: 12,
+      padding: '10px 20px',
+      background: 'var(--bg-sunken)',
+      borderBottom: '1px solid var(--line)',
+      fontSize: 11,
+      letterSpacing: '.12em',
+      textTransform: 'uppercase',
+      fontWeight: 700,
+      color: 'var(--fg3)'
+    }
+  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null, "Run"), /*#__PURE__*/React.createElement("div", null, "Distribution"), /*#__PURE__*/React.createElement("div", null, "Branch \xB7 actor"), /*#__PURE__*/React.createElement("div", null, "Duration"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'right'
+    }
+  }, "When")), HISTORY_RUNS.map((r, i) => {
+    const total = r.passed + r.failed + r.broken + r.skipped;
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      style: {
+        display: 'grid',
+        gridTemplateColumns: '24px 200px 1fr 110px 110px 80px',
+        gap: 12,
+        padding: '12px 20px',
+        borderBottom: i < HISTORY_RUNS.length - 1 ? '1px solid var(--line)' : 'none',
+        alignItems: 'center',
+        cursor: 'pointer'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `s-icon ${r.status}`
+    }, r.status === 'passed' ? '✓' : '✕'), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 12,
+        color: 'var(--fg1)'
+      }
+    }, r.id), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 11,
+        color: 'var(--fg3)'
+      }
+    }, r.passed, " passed \xB7 ", r.failed, " failed \xB7 ", r.broken, " broken \xB7 ", r.skipped, " skipped")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: 12,
+        background: 'var(--bg-sunken)',
+        borderRadius: 3,
+        display: 'flex',
+        overflow: 'hidden'
+      }
+    }, r.passed > 0 && /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: `${r.passed / total * 100}%`,
+        background: 'var(--status-passed)'
+      }
+    }), r.failed > 0 && /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: `${r.failed / total * 100}%`,
+        background: 'var(--status-failed)'
+      }
+    }), r.broken > 0 && /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: `${r.broken / total * 100}%`,
+        background: 'var(--status-broken)'
+      }
+    }), r.skipped > 0 && /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: `${r.skipped / total * 100}%`,
+        background: 'var(--status-skipped)'
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 12,
+        color: 'var(--fg1)'
+      }
+    }, r.branch), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 11,
+        color: 'var(--fg3)'
+      }
+    }, r.actor)), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 12,
+        color: 'var(--fg2)'
+      }
+    }, r.dur), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 11,
+        color: 'var(--fg3)',
+        textAlign: 'right'
+      }
+    }, r.when));
+  })));
+}
+Object.assign(window, {
+  GraphsPage,
+  TimelinePage,
+  CategoriesPage,
+  BehaviorsPage,
+  PackagesPage,
+  HistoryPage,
+  SuitesView,
+  FlakyPage
+});