Test results grid

// test-grid: eight test suites across the last 30 CI runs (#1184 to #1213), oldest run on the left.
// A cell is one suite in one run: pass is ink at 42%, one rung under a candle body, because 240 cells
// at 55% read as one bright slab beside candle; fail is the down colour at a body's 55%, a skipped suite keeps its slot as a 12% outline (heatmap's future days), and the one run
// that failed and then passed on retry is the single Claude orange cell. Cells are 6px wide on a 7.6px pitch so
// 30 runs fit between the names and the two count columns; rows are 13px apart so a 10px name sits
// beside each strip. The render suite breaks for four runs and is fixed in the fifth, agents has one
// stray failure, and a FAIL count is red only when it is above zero. A seeded walk, the same picture
// every time. Sample data only.
const W = 380
const H = 154
const STAGE = '#FAF9F5'
const INK = '#141413'
const MUTED = '#73726C'
const DOWN = '#AB2B3F'
const CLAUDE = '#D77757'
const FONT = "'Inter Tight','Segoe UI',system-ui,sans-serif"
const MONO = "ui-monospace,'Cascadia Mono',Consolas,monospace"
const f = n => n.toFixed(1)

const RUNS = 30
const FIRST_RUN = 1184
const X0 = 80 // left edge of the first run's cell
const PITCH = 7.6
const CELL = 6
const ROW0 = 30 // top of the first suite's strip
const ROW = 13
const CELL_H = 9
const PASS_X = 338 // the two count columns, right-aligned
const FAIL_X = W - 12

const SUITES = ['hooks', 'render', 'vendor', 'pane', 'usage', 'agents', 'mcp', 'e2e']

function rng(seed) {
  return () => (seed = (Math.imul(seed, 1103515245) + 12345) & 0x7fffffff) / 0x7fffffff
}

const text = (x, y, s, { size = 9, fill = MUTED, anchor = 'start', font = FONT } = {}) =>
  `<text x="${f(x)}" y="${f(y)}"${anchor === 'start' ? '' : ` text-anchor="${anchor}"`} font-size="${size}" font-family="${font}" fill="${fill}">${s}</text>`

// 'p' pass, 'f' fail, 's' skipped, 'k' flaky (failed, passed on retry; it counts as a pass)
function sample() {
  const rnd = rng(20261021)
  return SUITES.map(name => {
    const runs = []
    for (let r = 0; r < RUNS; r++) {
      const u = rnd()
      let s = 'p'
      if (name === 'e2e' && u < 0.16) s = 's' // docs-only pushes skip the desktop run
      if (name === 'mcp' && u < 0.07) s = 's'
      if (name === 'agents' && u > 0.965) s = 'f' // a rare real failure
      if (name === 'render' && r >= 19 && r <= 22) s = 'f' // a regression, fixed in the fifth run
      if (name === 'usage' && r === 25) s = 'k'
      runs.push(s)
    }
    return { name, runs }
  })
}

function draw() {
  const suites = sample()
  const parts = [`<rect width="${W}" height="${H}" rx="4" fill="${STAGE}"/>`]
  const lastX = X0 + (RUNS - 1) * PITCH + CELL
  parts.push(text(12, 22, 'SUITE'))
  parts.push(text(X0, 22, `#${FIRST_RUN}`, { font: MONO }))
  parts.push(text(lastX, 22, `#${FIRST_RUN + RUNS - 1}`, { font: MONO, anchor: 'end' }))
  parts.push(text(PASS_X, 22, 'PASS', { anchor: 'end' }))
  parts.push(text(FAIL_X, 22, 'FAIL', { anchor: 'end' }))

  suites.forEach(({ name, runs }, i) => {
    const y = ROW0 + i * ROW
    parts.push(text(12, y + 7.5, name, { size: 10, fill: INK }))
    runs.forEach((s, r) => {
      const x = X0 + r * PITCH
      if (s === 's') {
        parts.push(`<rect x="${f(x + 0.5)}" y="${f(y + 0.5)}" width="${CELL - 1}" height="${CELL_H - 1}" fill="none" stroke="${INK}" stroke-opacity="0.12"/>`)
      } else {
        const fill = s === 'f' ? DOWN : s === 'k' ? CLAUDE : INK
        const op = s === 'k' ? '0.9' : s === 'f' ? '0.55' : '0.42'
        parts.push(`<rect x="${f(x)}" y="${y}" width="${CELL}" height="${CELL_H}" fill="${fill}" fill-opacity="${op}"/>`)
      }
    })
    const pass = runs.filter(s => s === 'p' || s === 'k').length
    const fail = runs.filter(s => s === 'f').length
    parts.push(text(PASS_X, y + 8, String(pass), { size: 11, fill: INK, anchor: 'end' }))
    parts.push(text(FAIL_X, y + 8, String(fail), { size: 11, fill: fail ? DOWN : MUTED, anchor: 'end' }))
  })

  // The key on the caption line, right-aligned: each swatch is drawn the way the cells are
  const KEY = [['PASS', INK, 0.42], ['FAIL', DOWN, 0.55], ['SKIP', null, 0], ['FLAKY', CLAUDE, 0.9]]
  let kx = W - 12
  const ky = H - 8
  for (let k = KEY.length - 1; k >= 0; k--) {
    const [label, fill, op] = KEY[k]
    parts.push(text(kx, ky, label, { anchor: 'end' }))
    kx -= label.length * 5 + 4 + CELL
    if (fill) parts.push(`<rect x="${f(kx)}" y="${ky - 7}" width="${CELL}" height="${CELL + 1}" fill="${fill}" fill-opacity="${op}"/>`)
    else parts.push(`<rect x="${f(kx + 0.5)}" y="${ky - 6.5}" width="${CELL - 1}" height="${CELL}" fill="none" stroke="${INK}" stroke-opacity="0.12"/>`)
    kx -= 10
  }
  parts.push(text(12, ky, `SAMPLE ${RUNS} CI RUNS`))
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}">${parts.join('')}</svg>`
}

let source // drawn on first use and kept: the pane loads every design, so none pays at load time
export default {
  id: 'test-grid',
  title: 'Test results grid',
  category: 'code',
  description: 'Test suites across recent CI runs: pass, fail and skipped cells, a flaky run in Claude orange, and pass and fail counts for each suite.',
  element: ui => ui.Svg({ source: (source ??= draw()), alt: `Grid of ${SUITES.length} test suites over ${RUNS} CI runs with pass, fail, skipped and flaky cells, sample data`, width: W, height: H }),
}