@kaizenreport/kensho-viewer 0.1.0

package/assets/charts.js

@@ -0,0 +1,1156 @@
+/* Auto-generated from charts.jsx by packages/viewer/scripts/build.js. Edit the .jsx — DO NOT edit this file. */
+/* global React */
+
+// ============== TREND CHART V2 ==============
+// Stacked area chart: four status bands stacked over time.
+// Designed to read calm at a glance — green dominance = healthy run history.
+// One axis (count). Pass-rate is implicit in the green band's share.
+// Hover reveals a vertical guide + tooltip with the per-status breakdown.
+function TrendChartV2({
+  runs
+}) {
+  const [hoverIdx, setHover] = React.useState(null);
+  const W = 760,
+    H = 240,
+    padL = 44,
+    padR = 24,
+    padT = 24,
+    padB = 40;
+  const innerW = W - padL - padR,
+    innerH = H - padT - padB;
+  const totals = runs.map(r => r.passed + r.failed + r.broken + r.skipped);
+  const maxY = Math.ceil(Math.max(...totals, 8) / 4) * 4;
+  const xStep = runs.length > 1 ? innerW / (runs.length - 1) : 0;
+  const xAt = i => padL + i * xStep;
+  const yAt = v => padT + innerH - v / maxY * innerH;
+
+  // Stacking order — passed at the bottom (so it dominates visually when healthy),
+  // then skipped, broken, failed at the top. Cumulative band paths.
+  const ORDER = [{
+    key: 'passed',
+    color: 'var(--status-passed)'
+  }, {
+    key: 'skipped',
+    color: 'var(--status-skipped)'
+  }, {
+    key: 'broken',
+    color: 'var(--status-broken)'
+  }, {
+    key: 'failed',
+    color: 'var(--status-failed)'
+  }];
+
+  // Build cumulative top-of-band y values per run.
+  const stack = runs.map(r => {
+    const acc = [];
+    let c = 0;
+    ORDER.forEach(o => {
+      c += r[o.key] || 0;
+      acc.push(c);
+    });
+    return acc; // [yPassed, yPassed+skipped, …]
+  });
+  const bandPath = bandIdx => {
+    // bottom = previous band's cumulative (or 0 for first), top = this band's cumulative
+    const top = runs.map((_, i) => yAt(stack[i][bandIdx]));
+    const bot = runs.map((_, i) => yAt(bandIdx === 0 ? 0 : stack[i][bandIdx - 1]));
+    const fwd = runs.map((_, i) => `${i === 0 ? 'M' : 'L'}${xAt(i)},${top[i]}`).join(' ');
+    const back = runs.map((_, i) => `L${xAt(runs.length - 1 - i)},${bot[runs.length - 1 - i]}`).join(' ');
+    return `${fwd} ${back} Z`;
+  };
+
+  // y-axis ticks — 5 nice round values
+  const yTicks = [0, maxY / 4, maxY / 2, 3 * maxY / 4, maxY];
+
+  // Run-level summary for tooltip and "current vs previous" indicator
+  const hovered = hoverIdx != null ? runs[hoverIdx] : runs[runs.length - 1];
+  const hoveredTotal = hovered ? hovered.passed + hovered.failed + hovered.broken + hovered.skipped : 0;
+  const hoveredPassRate = hoveredTotal ? hovered.passed / hoveredTotal : 0;
+  const prevIdx = (hoverIdx ?? runs.length - 1) - 1;
+  const prev = prevIdx >= 0 ? runs[prevIdx] : null;
+  const prevPassRate = prev ? prev.passed / Math.max(1, prev.passed + prev.failed + prev.broken + prev.skipped) : 0;
+  const passRateDelta = prev ? (hoveredPassRate - prevPassRate) * 100 : 0;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '1fr auto auto auto auto',
+      gap: 18,
+      alignItems: 'baseline',
+      padding: '4px 4px 14px',
+      borderBottom: '1px solid var(--line)',
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10.5,
+      color: 'var(--fg3)',
+      letterSpacing: 1.2,
+      textTransform: 'uppercase'
+    }
+  }, hoverIdx == null ? 'Current run' : `Run #${hovered.short}`), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'baseline',
+      gap: 8,
+      marginTop: 4
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-display)',
+      fontSize: 26,
+      fontWeight: 700,
+      color: 'var(--fg1)',
+      letterSpacing: -0.5,
+      lineHeight: 1,
+      fontVariantNumeric: 'tabular-nums'
+    }
+  }, Math.round(hoveredPassRate * 100), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 14,
+      color: 'var(--fg3)',
+      marginLeft: 2
+    }
+  }, "%")), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      color: 'var(--fg3)'
+    }
+  }, "pass rate"), prev && /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      fontWeight: 600,
+      color: passRateDelta >= 0 ? 'var(--status-passed)' : 'var(--status-failed)',
+      fontVariantNumeric: 'tabular-nums'
+    }
+  }, passRateDelta >= 0 ? '↑' : '↓', " ", Math.abs(passRateDelta).toFixed(1), "pp"))), ORDER.map(o => /*#__PURE__*/React.createElement("div", {
+    key: o.key,
+    style: {
+      textAlign: 'right',
+      minWidth: 60
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 5,
+      justifyContent: 'flex-end',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10,
+      color: 'var(--fg3)',
+      textTransform: 'uppercase',
+      letterSpacing: 0.5
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 8,
+      height: 8,
+      borderRadius: 2,
+      background: o.color
+    }
+  }), o.key), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 15,
+      fontWeight: 600,
+      color: 'var(--fg1)',
+      fontVariantNumeric: 'tabular-nums',
+      marginTop: 2
+    }
+  }, hovered[o.key] || 0)))), /*#__PURE__*/React.createElement("svg", {
+    viewBox: `0 0 ${W} ${H}`,
+    width: "100%",
+    style: {
+      display: 'block',
+      overflow: 'visible'
+    },
+    onMouseLeave: () => setHover(null)
+  }, yTicks.map((t, i) => /*#__PURE__*/React.createElement("g", {
+    key: i
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: padL,
+    x2: W - padR,
+    y1: yAt(t),
+    y2: yAt(t),
+    stroke: "var(--line)",
+    strokeWidth: "1",
+    strokeDasharray: i === 0 ? '0' : '2 4'
+  }), /*#__PURE__*/React.createElement("text", {
+    x: padL - 10,
+    y: yAt(t) + 4,
+    textAnchor: "end",
+    fontFamily: "var(--font-mono)",
+    fontSize: "10.5",
+    fill: "var(--fg3)",
+    fontVariantNumeric: "tabular-nums"
+  }, t))), /*#__PURE__*/React.createElement("text", {
+    x: padL - 30,
+    y: padT - 8,
+    fontFamily: "var(--font-mono)",
+    fontSize: "10",
+    fill: "var(--fg3)",
+    letterSpacing: "1.2",
+    textAnchor: "start"
+  }, "TESTS"), ORDER.map((o, i) => /*#__PURE__*/React.createElement("path", {
+    key: o.key,
+    d: bandPath(i),
+    fill: o.color,
+    fillOpacity: "0.85"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: runs.map((_, i) => `${i === 0 ? 'M' : 'L'}${xAt(i)},${yAt(stack[i][ORDER.length - 1])}`).join(' '),
+    fill: "none",
+    stroke: "var(--fg1)",
+    strokeOpacity: "0.18",
+    strokeWidth: "1"
+  }), hoverIdx != null && /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+    x1: xAt(hoverIdx),
+    x2: xAt(hoverIdx),
+    y1: padT,
+    y2: padT + innerH,
+    stroke: "var(--fg1)",
+    strokeOpacity: "0.35",
+    strokeWidth: "1",
+    strokeDasharray: "3 3"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: xAt(hoverIdx),
+    cy: yAt(stack[hoverIdx][ORDER.length - 1]),
+    r: "4",
+    fill: "var(--bg-elev)",
+    stroke: "var(--fg1)",
+    strokeWidth: "1.5"
+  })), runs.map((r, i) => /*#__PURE__*/React.createElement("rect", {
+    key: i,
+    x: xAt(i) - xStep / 2,
+    y: padT,
+    width: xStep || innerW,
+    height: innerH,
+    fill: "transparent",
+    onMouseEnter: () => setHover(i)
+  })), runs.map((r, i) => {
+    const isHover = hoverIdx === i;
+    const isLast = i === runs.length - 1;
+    // sparse labels: first, last, every 2nd otherwise
+    const show = i === 0 || isLast || isHover || i % 2 === 0;
+    if (!show) return null;
+    return /*#__PURE__*/React.createElement("text", {
+      key: i,
+      x: xAt(i),
+      y: H - padB + 16,
+      textAnchor: "middle",
+      fontFamily: "var(--font-mono)",
+      fontSize: "10.5",
+      fill: isHover || isLast ? 'var(--fg1)' : 'var(--fg3)',
+      fontWeight: isHover || isLast ? 600 : 400
+    }, "#", r.short);
+  }), /*#__PURE__*/React.createElement("text", {
+    x: xAt(runs.length - 1),
+    y: H - padB + 30,
+    textAnchor: "middle",
+    fontFamily: "var(--font-mono)",
+    fontSize: "9.5",
+    fill: "var(--fg3)",
+    letterSpacing: "0.5",
+    textTransform: "uppercase"
+  }, "now"), /*#__PURE__*/React.createElement("line", {
+    x1: padL,
+    x2: W - padR,
+    y1: padT + innerH,
+    y2: padT + innerH,
+    stroke: "var(--line-strong)",
+    strokeWidth: "1"
+  })));
+}
+
+// ============== TIMELINE (Gantt by suite) ==============
+//
+// Rows = suites (each suite groups its tests on its own row, time-axis horizontal).
+// X axis = wall-clock ms since run start.
+// Bars = individual tests; gaps between bars = idle time within suite.
+// Hover any bar → details fill the right sidebar (no floating tooltips that overflow).
+function TimelineGantt({
+  tests,
+  totalMs,
+  onOpen
+}) {
+  const [hover, setHover] = React.useState(null);
+
+  // group tests by suite, preserve order, map to rows
+  const bySuite = {};
+  tests.forEach(t => {
+    if (!bySuite[t.suite]) bySuite[t.suite] = [];
+    bySuite[t.suite].push(t);
+  });
+  const suiteRows = Object.entries(bySuite); // [[suiteName, [tests]], ...]
+
+  const rowH = 44;
+  const padL = 220,
+    padR = 16,
+    padT = 22,
+    padB = 28;
+  const W = 1000;
+  const H = padT + suiteRows.length * rowH + padB;
+  const innerW = W - padL - padR;
+  const x = ms => padL + ms / totalMs * innerW;
+
+  // tick spacing — aim for 6-8 evenly-spaced ticks regardless of scale, so
+  // the label row stays legible whether the run is 200ms or 5min long.
+  const niceStep = max => {
+    const target = max / 7;
+    const exp = Math.floor(Math.log10(target));
+    const f = target / Math.pow(10, exp);
+    const round = f < 1.5 ? 1 : f < 3.5 ? 2 : f < 7.5 ? 5 : 10;
+    return round * Math.pow(10, exp);
+  };
+  const tickStep = niceStep(totalMs);
+  const ticks = [];
+  for (let t = 0; t <= totalMs; t += tickStep) ticks.push(t);
+  if (ticks[ticks.length - 1] < totalMs - tickStep / 2) ticks.push(totalMs);
+
+  // Format ticks per scale: ms below 2s, integer seconds below 10s,
+  // round seconds at scale, minutes-and-seconds for very long runs.
+  const fmtTick = ms => {
+    if (totalMs < 2000) return ms + 'ms';
+    if (totalMs < 10000) return (ms / 1000).toFixed(1) + 's';
+    if (totalMs < 120000) return Math.round(ms / 1000) + 's';
+    const m = Math.floor(ms / 60000);
+    const s = Math.round(ms % 60000 / 1000);
+    return s ? `${m}m ${s}s` : `${m}m`;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '1fr 280px',
+      gap: 16,
+      alignItems: 'start'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10,
+      color: 'var(--fg3)',
+      letterSpacing: 1.5,
+      textTransform: 'uppercase',
+      paddingLeft: padL,
+      marginBottom: 4
+    }
+  }, "Wall-clock time (s) \u2192"), /*#__PURE__*/React.createElement("svg", {
+    viewBox: `0 0 ${W} ${H}`,
+    width: "100%",
+    style: {
+      display: 'block'
+    },
+    onMouseLeave: () => setHover(null)
+  }, suiteRows.map(([suite, _], i) => /*#__PURE__*/React.createElement("rect", {
+    key: i,
+    x: padL,
+    y: padT + i * rowH,
+    width: innerW,
+    height: rowH,
+    fill: i % 2 ? 'transparent' : 'var(--bg-2)',
+    fillOpacity: "0.5"
+  })), ticks.map((t, i) => /*#__PURE__*/React.createElement("line", {
+    key: i,
+    x1: x(t),
+    x2: x(t),
+    y1: padT,
+    y2: padT + suiteRows.length * rowH,
+    stroke: "var(--line)",
+    strokeWidth: "1",
+    opacity: t === 0 ? 0.8 : 0.5
+  })), ticks.map((t, i) => /*#__PURE__*/React.createElement("text", {
+    key: i,
+    x: x(t),
+    y: padT - 6,
+    textAnchor: i === 0 ? 'start' : i === ticks.length - 1 ? 'end' : 'middle',
+    fontFamily: "var(--font-mono)",
+    fontSize: "11",
+    fill: "var(--fg3)",
+    fontVariantNumeric: "tabular-nums"
+  }, fmtTick(t))), suiteRows.map(([suite, suiteTests], i) => /*#__PURE__*/React.createElement("g", {
+    key: i
+  }, /*#__PURE__*/React.createElement("text", {
+    x: padL - 12,
+    y: padT + i * rowH + rowH / 2 + 4,
+    textAnchor: "end",
+    fontFamily: "var(--font-mono)",
+    fontSize: "12",
+    fill: "var(--fg1)",
+    fontWeight: "600"
+  }, suite), /*#__PURE__*/React.createElement("text", {
+    x: padL - 12,
+    y: padT + i * rowH + rowH / 2 + 18,
+    textAnchor: "end",
+    fontFamily: "var(--font-mono)",
+    fontSize: "10",
+    fill: "var(--fg3)"
+  }, suiteTests.length, " test", suiteTests.length !== 1 ? 's' : ''))), suiteRows.map(([suite, suiteTests], rowIdx) => suiteTests.map((t, i) => {
+    if (t.durMs === 0) return null;
+    // Min bar width 10px so every bar is clickable; 3px slivers from
+    // sub-100ms tests in a 60s run window are unusable on hover.
+    const bx = x(t.start),
+      bw = Math.max(10, x(t.start + t.durMs) - bx);
+    const by = padT + rowIdx * rowH + 6;
+    const bh = rowH - 12;
+    const c = `var(--status-${t.status})`;
+    const isHover = hover && hover.id === t.id;
+    return /*#__PURE__*/React.createElement("g", {
+      key: i,
+      onMouseEnter: () => setHover(t),
+      onClick: () => onOpen?.(t),
+      style: {
+        cursor: 'pointer'
+      }
+    }, /*#__PURE__*/React.createElement("title", null, `${t.name} · ${t.dur} · ${t.status}`), /*#__PURE__*/React.createElement("rect", {
+      x: bx,
+      y: by,
+      width: bw,
+      height: bh,
+      rx: "3",
+      fill: c,
+      fillOpacity: isHover ? 1 : 0.85,
+      stroke: isHover ? c : 'transparent',
+      strokeWidth: "2"
+    }), bw >= 44 && /*#__PURE__*/React.createElement("text", {
+      x: bx + bw / 2,
+      y: by + bh / 2 + 4,
+      textAnchor: "middle",
+      fontFamily: "var(--font-mono)",
+      fontSize: "10.5",
+      fill: "#fff",
+      fontWeight: "700",
+      style: {
+        pointerEvents: 'none'
+      },
+      clipPath: `inset(0 0 0 0)`
+    }, t.dur));
+  })), /*#__PURE__*/React.createElement("line", {
+    x1: x(totalMs),
+    x2: x(totalMs),
+    y1: padT,
+    y2: padT + suiteRows.length * rowH,
+    stroke: "var(--accent)",
+    strokeWidth: "2",
+    strokeDasharray: "2 2"
+  }), /*#__PURE__*/React.createElement("text", {
+    x: x(totalMs),
+    y: padT + suiteRows.length * rowH + 18,
+    textAnchor: "end",
+    fontFamily: "var(--font-mono)",
+    fontSize: "10",
+    fill: "var(--accent)",
+    fontWeight: "700"
+  }, "RUN END"))), /*#__PURE__*/React.createElement(TimelineDetails, {
+    test: hover,
+    totalMs: totalMs
+  }));
+}
+function TimelineDetails({
+  test,
+  totalMs
+}) {
+  if (!test) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        border: '1px solid var(--line)',
+        borderRadius: 6,
+        padding: 14,
+        background: 'var(--bg-2)'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "k-overline",
+      style: {
+        marginBottom: 6
+      }
+    }, "How to read this"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 12,
+        color: 'var(--fg2)',
+        lineHeight: 1.5
+      }
+    }, "Each row is a ", /*#__PURE__*/React.createElement("b", null, "suite"), ". Bars are the ", /*#__PURE__*/React.createElement("b", null, "tests"), " in that suite, positioned by when they started. Hover a bar for details, click to open."), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 12,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6
+      }
+    }, /*#__PURE__*/React.createElement(LegendDot, {
+      color: "var(--status-passed)",
+      label: "Passed"
+    }), /*#__PURE__*/React.createElement(LegendDot, {
+      color: "var(--status-failed)",
+      label: "Failed"
+    }), /*#__PURE__*/React.createElement(LegendDot, {
+      color: "var(--status-broken)",
+      label: "Broken"
+    }), /*#__PURE__*/React.createElement(LegendDot, {
+      color: "var(--status-skipped)",
+      label: "Skipped"
+    })));
+  }
+  const c = `var(--status-${test.status})`;
+  const startPct = test.start / totalMs * 100;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: '1px solid var(--line)',
+      borderRadius: 6,
+      padding: 14,
+      background: 'var(--bg-elev)'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      marginBottom: 10
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 10,
+      height: 10,
+      borderRadius: 2,
+      background: c
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10,
+      color: 'var(--fg3)',
+      textTransform: 'uppercase',
+      letterSpacing: 1
+    }
+  }, test.status)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontWeight: 600,
+      fontSize: 13,
+      color: 'var(--fg1)',
+      marginBottom: 4,
+      wordBreak: 'break-word'
+    }
+  }, test.name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      color: 'var(--fg3)',
+      marginBottom: 10
+    }
+  }, test.suite), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'auto 1fr',
+      gap: '6px 10px',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11.5
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)'
+    }
+  }, "started"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg1)'
+    }
+  }, (test.start / 1000).toFixed(2), "s (", startPct.toFixed(0), "% in)"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)'
+    }
+  }, "duration"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg1)',
+      fontWeight: 600
+    }
+  }, test.dur), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)'
+    }
+  }, "platform"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg1)'
+    }
+  }, test.platform), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)'
+    }
+  }, "retries"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg1)'
+    }
+  }, test.retries), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)'
+    }
+  }, "severity"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg1)'
+    }
+  }, test.severity), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)'
+    }
+  }, "file"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg1)',
+      fontSize: 10.5
+    }
+  }, test.file)));
+}
+function LegendDot({
+  color,
+  label
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 14,
+      height: 8,
+      borderRadius: 2,
+      background: color
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      color: 'var(--fg2)'
+    }
+  }, label));
+}
+
+// ============== RETRY WATERFALL ==============
+function RetryWaterfall({
+  attempts
+}) {
+  // attempts: [{ status, dur, label }]
+  const max = Math.max(...attempts.map(a => a.dur));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 8
+    }
+  }, attempts.map((a, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '70px 1fr 70px',
+      alignItems: 'center',
+      gap: 12
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12,
+      color: 'var(--fg3)'
+    }
+  }, "attempt ", i + 1), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 18,
+      background: 'var(--bg-sunken)',
+      borderRadius: 3,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: `${a.dur / max * 100}%`,
+      height: '100%',
+      background: `var(--status-${a.status})`,
+      display: 'flex',
+      alignItems: 'center',
+      paddingLeft: 8,
+      color: '#fff',
+      fontSize: 11,
+      fontWeight: 600
+    }
+  }, a.label)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12,
+      color: 'var(--fg2)',
+      textAlign: 'right'
+    }
+  }, (a.dur / 1000).toFixed(2), "s"))));
+}
+
+// ============== SUITE HEATMAP ==============
+function SuiteHeatmap({
+  suites,
+  runs
+}) {
+  // suites: [{name, statuses: [last N statuses]}]
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '240px repeat(' + runs + ', 1fr)',
+      alignItems: 'center',
+      gap: 4,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10,
+      color: 'var(--fg3)',
+      marginBottom: 6
+    }
+  }, /*#__PURE__*/React.createElement("div", null), [...Array(runs)].map((_, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    style: {
+      textAlign: 'center'
+    }
+  }, i === 0 ? 'oldest' : i === runs - 1 ? 'latest' : ''))), suites.map((s, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '240px repeat(' + runs + ', 1fr)',
+      alignItems: 'center',
+      gap: 4,
+      marginBottom: 4
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12,
+      color: 'var(--fg1)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, s.name), s.statuses.map((st, j) => /*#__PURE__*/React.createElement("div", {
+    key: j,
+    title: st,
+    style: {
+      height: 20,
+      borderRadius: 3,
+      background: `var(--status-${st})`,
+      opacity: st === 'passed' ? 0.85 : 1
+    }
+  })))));
+}
+
+// ============== FLAKE-RATE SCATTER (quadrant) ==============
+function FlakeScatter({
+  tests
+}) {
+  const [hoverIdx, setHover] = React.useState(null);
+  const [hoverPos, setHoverPos] = React.useState({
+    x: 0,
+    y: 0
+  }); // chart-pixel coords inside .scatter-wrap
+  const wrapRef = React.useRef(null);
+  const W = 560,
+    H = 360,
+    padL = 56,
+    padR = 24,
+    padT = 24,
+    padB = 50;
+  const innerW = W - padL - padR,
+    innerH = H - padT - padB;
+  const maxDur = Math.max(...tests.map(t => t.avgDur));
+  const x = d => padL + d / maxDur * innerW;
+  const y = f => padT + innerH - f * innerH;
+  const flakeMid = 0.15,
+    flakeHigh = 0.35;
+  const sorted = [...tests].sort((a, b) => b.flakeRate - a.flakeRate);
+
+  // Convert SVG coords (which scale with viewBox) to live wrapper pixels for HTML tooltip
+  const svgToPx = (sx, sy) => {
+    const wrap = wrapRef.current;
+    if (!wrap) return {
+      x: 0,
+      y: 0
+    };
+    const r = wrap.getBoundingClientRect();
+    return {
+      x: sx / W * r.width,
+      y: sy / H * r.height
+    };
+  };
+  const onPointEnter = i => () => {
+    const t = tests[i];
+    const cx = x(t.avgDur),
+      cy = y(t.flakeRate);
+    setHoverPos(svgToPx(cx, cy));
+    setHover(i);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '1fr 240px',
+      gap: 20,
+      alignItems: 'start'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: wrapRef,
+    className: "scatter-wrap",
+    style: {
+      position: 'relative'
+    },
+    onMouseLeave: () => setHover(null)
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: `0 0 ${W} ${H}`,
+    width: "100%",
+    style: {
+      display: 'block'
+    },
+    preserveAspectRatio: "xMidYMid meet"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: padL,
+    y: padT,
+    width: innerW,
+    height: y(flakeHigh) - padT,
+    fill: "var(--status-failed-bg)",
+    fillOpacity: "0.6"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: padL,
+    y: y(flakeHigh),
+    width: innerW,
+    height: y(flakeMid) - y(flakeHigh),
+    fill: "var(--status-broken-bg)",
+    fillOpacity: "0.55"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: padL,
+    y: y(flakeMid),
+    width: innerW,
+    height: padT + innerH - y(flakeMid),
+    fill: "var(--status-passed-bg)",
+    fillOpacity: "0.45"
+  }), /*#__PURE__*/React.createElement("text", {
+    x: padL + 10,
+    y: padT + 16,
+    fontFamily: "var(--font-mono)",
+    fontSize: "10",
+    fill: "var(--status-failed)",
+    letterSpacing: "1.5"
+  }, "CRITICAL \u226535%"), /*#__PURE__*/React.createElement("text", {
+    x: padL + 10,
+    y: y(flakeHigh) + 14,
+    fontFamily: "var(--font-mono)",
+    fontSize: "10",
+    fill: "var(--status-broken-fg)",
+    letterSpacing: "1.5"
+  }, "UNSTABLE 15\u201335%"), /*#__PURE__*/React.createElement("text", {
+    x: padL + 10,
+    y: y(flakeMid) + 14,
+    fontFamily: "var(--font-mono)",
+    fontSize: "10",
+    fill: "var(--status-passed)",
+    letterSpacing: "1.5"
+  }, "HEALTHY <15%"), [0, 0.15, 0.35, 0.5, 0.75, 1].map(f => /*#__PURE__*/React.createElement("g", {
+    key: f
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: padL,
+    x2: padL + innerW,
+    y1: y(f),
+    y2: y(f),
+    stroke: "var(--line)",
+    strokeWidth: "1"
+  }), /*#__PURE__*/React.createElement("text", {
+    x: padL - 10,
+    y: y(f) + 4,
+    textAnchor: "end",
+    fontFamily: "var(--font-mono)",
+    fontSize: "11",
+    fill: "var(--fg3)",
+    fontVariantNumeric: "tabular-nums"
+  }, Math.round(f * 100), "%"))), [0, maxDur * 0.25, maxDur * 0.5, maxDur * 0.75, maxDur].map((d, i) => /*#__PURE__*/React.createElement("g", {
+    key: i
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: x(d),
+    x2: x(d),
+    y1: padT,
+    y2: padT + innerH,
+    stroke: "var(--line)",
+    strokeWidth: "1",
+    opacity: i === 0 ? 0 : 0.5
+  }), /*#__PURE__*/React.createElement("text", {
+    x: x(d),
+    y: padT + innerH + 16,
+    textAnchor: "middle",
+    fontFamily: "var(--font-mono)",
+    fontSize: "11",
+    fill: "var(--fg3)",
+    fontVariantNumeric: "tabular-nums"
+  }, (d / 1000).toFixed(1), "s"))), /*#__PURE__*/React.createElement("text", {
+    x: padL - 44,
+    y: padT - 8,
+    fontFamily: "var(--font-mono)",
+    fontSize: "10",
+    fill: "var(--fg3)",
+    letterSpacing: "1.5"
+  }, "FLAKE RATE"), /*#__PURE__*/React.createElement("text", {
+    x: padL + innerW,
+    y: padT + innerH + 36,
+    textAnchor: "end",
+    fontFamily: "var(--font-mono)",
+    fontSize: "10",
+    fill: "var(--fg3)",
+    letterSpacing: "1.5"
+  }, "AVG DURATION \u2192"), /*#__PURE__*/React.createElement("line", {
+    x1: padL,
+    x2: padL + innerW,
+    y1: padT + innerH,
+    y2: padT + innerH,
+    stroke: "var(--line-strong)"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: padL,
+    x2: padL,
+    y1: padT,
+    y2: padT + innerH,
+    stroke: "var(--line-strong)"
+  }), tests.map((t, i) => {
+    const cx = x(t.avgDur),
+      cy = y(t.flakeRate);
+    const c = t.flakeRate >= flakeHigh ? 'var(--status-failed)' : t.flakeRate >= flakeMid ? 'var(--status-broken)' : 'var(--status-passed)';
+    const isHover = hoverIdx === i;
+    return /*#__PURE__*/React.createElement("circle", {
+      key: i,
+      cx: cx,
+      cy: cy,
+      r: isHover ? 8 : 6,
+      fill: c,
+      fillOpacity: isHover ? 1 : 0.78,
+      stroke: c,
+      strokeWidth: isHover ? 2 : 1,
+      style: {
+        cursor: 'pointer',
+        transition: 'r 120ms, fill-opacity 120ms'
+      },
+      onMouseEnter: onPointEnter(i)
+    });
+  })), hoverIdx !== null && (() => {
+    const t = tests[hoverIdx];
+    const wrap = wrapRef.current;
+    const w = wrap ? wrap.getBoundingClientRect().width : W;
+    const h = wrap ? wrap.getBoundingClientRect().height : H;
+    // edge-aware: flip horizontally / vertically if too close to edges
+    const TT_W = 196,
+      TT_H = 50;
+    let left = hoverPos.x + 14;
+    let top = hoverPos.y - TT_H - 10;
+    if (left + TT_W > w - 6) left = hoverPos.x - 14 - TT_W;
+    if (top < 6) top = hoverPos.y + 14;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        left,
+        top,
+        width: TT_W,
+        pointerEvents: 'none',
+        background: '#0B1220',
+        color: '#fff',
+        border: '1px solid rgba(255,255,255,0.08)',
+        borderRadius: 6,
+        padding: '8px 10px',
+        boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
+        fontFamily: 'var(--font-mono)',
+        zIndex: 10
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 12.5,
+        fontWeight: 700,
+        lineHeight: 1.2,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    }, t.name), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 11,
+        color: 'rgba(255,255,255,0.65)',
+        marginTop: 3
+      }
+    }, Math.round(t.flakeRate * 100), "% flaky \xB7 ", (t.avgDur / 1000).toFixed(1), "s avg"));
+  })()), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "k-overline",
+    style: {
+      marginBottom: 8
+    }
+  }, "Worst offenders"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: '1px solid var(--line)',
+      borderRadius: 6,
+      overflow: 'hidden',
+      background: 'var(--bg-elev)'
+    }
+  }, sorted.slice(0, 8).map((t, i) => {
+    const tIdx = tests.indexOf(t);
+    const c = t.flakeRate >= flakeHigh ? 'var(--status-failed)' : t.flakeRate >= flakeMid ? 'var(--status-broken)' : 'var(--status-passed)';
+    const active = hoverIdx === tIdx;
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      onMouseEnter: () => {
+        // also reposition the tooltip near this point in the chart
+        const cx = x(t.avgDur),
+          cy = y(t.flakeRate);
+        setHoverPos(svgToPx(cx, cy));
+        setHover(tIdx);
+      },
+      onMouseLeave: () => setHover(null),
+      style: {
+        display: 'grid',
+        gridTemplateColumns: '8px 1fr auto',
+        gap: 8,
+        padding: '8px 10px',
+        borderBottom: i < 7 ? '1px solid var(--line)' : 'none',
+        alignItems: 'center',
+        cursor: 'pointer',
+        background: active ? 'var(--bg-hover)' : 'transparent',
+        transition: 'background var(--dur-fast)'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: 8,
+        height: 8,
+        borderRadius: 2,
+        background: c
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 11.5,
+        color: 'var(--fg1)',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      }
+    }, t.name), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 11,
+        color: c,
+        fontWeight: 700,
+        fontVariantNumeric: 'tabular-nums'
+      }
+    }, Math.round(t.flakeRate * 100), "%"));
+  }))));
+}
+
+// ============== HORIZONTAL BAR CHART ==============
+function HBars({
+  data,
+  max
+}) {
+  const m = max || Math.max(...data.map(d => d.value));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 8
+    }
+  }, data.map((d, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '180px 1fr 50px',
+      alignItems: 'center',
+      gap: 12
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12,
+      color: 'var(--fg1)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, d.label), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 14,
+      background: 'var(--bg-sunken)',
+      borderRadius: 3,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: `${d.value / m * 100}%`,
+      height: '100%',
+      background: d.color || 'var(--brand-blue-500)',
+      borderRadius: 3
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12,
+      color: 'var(--fg2)',
+      textAlign: 'right'
+    }
+  }, d.display ?? d.value))));
+}
+
+// ============== DURATION HISTOGRAM ==============
+function DurationHistogram({
+  buckets
+}) {
+  const W = 720,
+    H = 180,
+    padL = 28,
+    padR = 12,
+    padT = 12,
+    padB = 28;
+  const innerW = W - padL - padR,
+    innerH = H - padT - padB;
+  const max = Math.max(...buckets.map(b => b.n));
+  const bw = innerW / buckets.length - 4;
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: `0 0 ${W} ${H}`,
+    width: "100%",
+    style: {
+      display: 'block'
+    }
+  }, [0, max / 2, max].map((m, i) => /*#__PURE__*/React.createElement("g", {
+    key: i
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: padL,
+    x2: W - padR,
+    y1: padT + innerH - m / max * innerH,
+    y2: padT + innerH - m / max * innerH,
+    stroke: "var(--line)",
+    strokeDasharray: "2 4"
+  }), /*#__PURE__*/React.createElement("text", {
+    x: padL - 6,
+    y: padT + innerH - m / max * innerH + 3,
+    textAnchor: "end",
+    fontFamily: "var(--font-mono)",
+    fontSize: "10",
+    fill: "var(--fg3)"
+  }, Math.round(m)))), buckets.map((b, i) => {
+    const h = b.n / max * innerH;
+    const x = padL + i * (innerW / buckets.length) + 2;
+    return /*#__PURE__*/React.createElement("g", {
+      key: i
+    }, /*#__PURE__*/React.createElement("rect", {
+      x: x,
+      y: padT + innerH - h,
+      width: bw,
+      height: h,
+      fill: "var(--brand-blue-500)",
+      fillOpacity: "0.85",
+      rx: "2"
+    }), /*#__PURE__*/React.createElement("text", {
+      x: x + bw / 2,
+      y: H - 10,
+      textAnchor: "middle",
+      fontFamily: "var(--font-mono)",
+      fontSize: "10",
+      fill: "var(--fg3)"
+    }, b.label));
+  }));
+}
+Object.assign(window, {
+  TrendChartV2,
+  TimelineGantt,
+  RetryWaterfall,
+  SuiteHeatmap,
+  FlakeScatter,
+  HBars,
+  DurationHistogram
+});