@kentcdodds/invisible-software

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI agents keep getting better at engineering work</title>
<script>{ const d = location.pathname.replace(/\/graph\/?$/, '/'); const b = document.createElement('base'); b.href = d + 'c/'; document.head.append(b) }</script>
<link rel="icon" href="icons/favicon.ico">
<style>
@font-face { font-family: Inter; src: url(fonts/inter/InterVariable.woff2) format('woff2'); font-weight: 100 900; }
html, body { margin: 0; height: 100%; background: #fff; color: #111; font-family: Inter, system-ui, sans-serif; }
main { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; padding: 3.2vh 4vw 2.4vh; }
h1 { margin: 0; font-size: clamp(26px, 4.4vh, 58px); font-weight: 800; letter-spacing: -0.025em; }
.sub { margin: 0.8vh 0 0; font-size: clamp(14px, 2.2vh, 28px); color: #555; }
#chart { flex: 1; min-height: 0; margin-top: 1.5vh; }
svg { width: 100%; height: 100%; display: block; overflow: visible; }
.credit { font-size: clamp(11px, 1.5vh, 18px); color: #777; }
</style>
</head>
<body>
<main>
	<h1>AI agents keep getting better at engineering work</h1>
	<p class="sub">Best score so far on six agent benchmarks. The bold line is the median.</p>
	<div id="chart"></div>
	<div class="credit">Data: Epoch AI benchmark data (epoch.ai/benchmarks), METR. Best score to date by model release month.</div>
</main>
<script>
const DATA = /* data */null
const COLORS = ['#2563eb', '#db2777', '#059669', '#d97706', '#7c3aed', '#0891b2']
function draw() {
	const box = document.getElementById('chart')
	const W = box.clientWidth, H = box.clientHeight
	const fs = Math.max(12, Math.min(22, H / 32))
	const m = { l: fs * 3.6, r: fs * 11, t: fs * 0.8, b: fs * 2.6 }
	const start = DATA.months.indexOf('2024-01'), n = DATA.months.length
	const x0 = start, x1 = n - 1 + 2
	const X = (i) => m.l + ((i - x0) / (x1 - x0)) * (W - m.l - m.r)
	const Y = (v) => m.t + (1 - v / 100) * (H - m.t - m.b)
	const mon = (s) => new Date(s + '-01T00:00Z').toLocaleString('en-US', { month: 'short', year: 'numeric', timeZone: 'UTC' })
	let s = `<svg viewBox="0 0 ${W} ${H}" font-size="${fs}">`
	for (let v = 0; v <= 100; v += 20) s += `<line x1="${m.l}" x2="${W - m.r}" y1="${Y(v)}" y2="${Y(v)}" stroke="#e8e8e8"/><text x="${m.l - fs * 0.6}" y="${Y(v)}" text-anchor="end" dominant-baseline="middle" fill="#777">${v}%</text>`
	DATA.months.forEach((mo, i) => { if (i >= start && /-(01|07)$/.test(mo)) s += `<line x1="${X(i)}" x2="${X(i)}" y1="${Y(0)}" y2="${Y(0) + 6}" stroke="#999"/><text x="${X(i)}" y="${Y(0) + fs * 1.6}" text-anchor="middle" fill="#777">${mon(mo)}</text>` })
	const labels = []
	DATA.series.forEach((ser, k) => {
		let d = '', last = null
		ser.values.forEach((v, i) => { if (i < start || v == null) return; d += last == null ? `M${X(i)},${Y(v)}` : `H${X(i)}V${Y(v)}`; last = [i, v] })
		d += `H${X(n - 1)}`
		s += `<path d="${d}" fill="none" stroke="${COLORS[k]}" stroke-width="${fs * 0.16}" opacity="0.45"/>`
		labels.push({ y: Y(last[1]), text: ser.name, color: COLORS[k] })
	})
	labels.sort((a, b) => a.y - b.y)
	for (let i = 1; i < labels.length; i++) labels[i].y = Math.max(labels[i].y, labels[i - 1].y + fs * 1.3)
	for (const l of labels) s += `<text x="${X(n - 1) + fs * 0.6}" y="${l.y}" dominant-baseline="middle" fill="${l.color}" opacity="0.8">${l.text}</text>`
	const pts = DATA.median.map((v, i) => [i, v]).filter(([i, v]) => i >= start && v != null)
	let d = `M${X(pts[0][0])},${Y(pts[0][1])}`
	for (let i = 1; i < pts.length; i++) {
		const p0 = pts[Math.max(0, i - 2)], p1 = pts[i - 1], p2 = pts[i], p3 = pts[Math.min(pts.length - 1, i + 1)]
		const c1 = [X(p1[0]) + (X(p2[0]) - X(p0[0])) / 6, Y(p1[1]) + (Y(p2[1]) - Y(p0[1])) / 6]
		const c2 = [X(p2[0]) - (X(p3[0]) - X(p1[0])) / 6, Y(p2[1]) - (Y(p3[1]) - Y(p1[1])) / 6]
		d += `C${c1},${c2},${X(p2[0])},${Y(p2[1])}`
	}
	s += `<path d="${d}" fill="none" stroke="#111" stroke-width="${fs * 0.45}" stroke-linecap="round" stroke-linejoin="round"/>`
	const mark = (mo, above, dx = 0) => { const i = DATA.months.indexOf(mo), v = DATA.median[i]; return `<circle cx="${X(i)}" cy="${Y(v)}" r="${fs * 0.45}" fill="#111"/><text x="${X(i) + dx}" y="${Y(v) + (above ? -fs * 1.1 : fs * 1.7)}" text-anchor="middle" font-weight="800" font-size="${fs * 1.35}" fill="#111">${Math.round(v)}%</text><text x="${X(i) + dx}" y="${Y(v) + (above ? -fs * 2.5 : fs * 3)}" text-anchor="middle" fill="#555">${mon(mo)}</text>` }
	s += mark('2024-06', false) + mark('2026-06', false, -fs * 2.2)
	box.innerHTML = s + '</svg>'
}
draw(); addEventListener('resize', draw)
</script>
</body>
</html>