Velocity vs Validation

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 56,
  slug: 'velocity-vs-validation',
  name: 'Velocity vs Validation',
  category: 'metrics-telemetry',
  pillar: 'de',
  description: 'Twin sparklines comparing how fast code is generated against how fast it\'s validated — the DE pillar\'s thesis in a chart.',
  spec: `## Intent
Visualise the central insight of the DE pillar: AI raises generation velocity faster than humans raise validation throughput. Two sparklines on the same time axis, one labelled VELOCITY (generation), one labelled VALIDATION (verification). The gap between them is "drift surface."

## Acceptance Criteria
- [ ] Both lines share the same x-axis (time)
- [ ] Velocity line trends sharply up; validation line trends modestly up
- [ ] Filled area between the lines is shaded "danger"
- [ ] Legend identifies each line by colour
- [ ] Renders without JS

## Constraints
- Pure SVG, no runtime
- Numbers are illustrative`,
  tags: ['svg', 'chart', 'real-content'],
  status: 'stable',
  health: { ics: 88, a11y: 'aa', themed: true, animated: false },
};

const velocity   = [12, 22, 28, 38, 56, 78, 110, 145, 192];
const validation = [10, 18, 22, 26, 30, 34, 40,  48,  56];
const max = 200;
const toPts = (arr: number[]) =>
  arr.map((v, i) => `${(i / (arr.length - 1)) * 100},${100 - (v / max) * 100}`).join(' ');
const velocityPts   = toPts(velocity);
const validationPts = toPts(validation);
const gap = velocityPts + ' ' + validation.map((v, i) => `${((validation.length - 1 - i) / (validation.length - 1)) * 100},${100 - (validation[validation.length - 1 - i] / max) * 100}`).join(' ');
---

<div class="w-full bg-paper text-black border-4 border-black">
  <header class="flex items-baseline justify-between px-3 py-2 border-b-2 border-black bg-paper">
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">// 30-day rolling</span>
    <span class="font-mono text-[10px] uppercase tracking-widest">DRIFT SURFACE</span>
  </header>

  <div class="p-3">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="w-full h-32 block">
      <polygon points={gap} fill="var(--color-danger)" opacity="0.18" />
      <polyline points={validationPts} fill="none" stroke="var(--color-co)" stroke-width="2.5" vector-effect="non-scaling-stroke" />
      <polyline points={velocityPts}   fill="none" stroke="var(--color-de)" stroke-width="2.5" vector-effect="non-scaling-stroke" />
    </svg>
  </div>

  <footer class="grid grid-cols-2 border-t-2 border-black">
    <div class="px-3 py-2 border-e-2 border-black flex items-center gap-2">
      <span class="inline-block w-3 h-1 bg-de"></span>
      <span class="font-mono text-[10px] uppercase tracking-widest">velocity</span>
      <span class="ms-auto font-black text-sm tabular-nums">{velocity.at(-1)}</span>
    </div>
    <div class="px-3 py-2 flex items-center gap-2">
      <span class="inline-block w-3 h-1 bg-co"></span>
      <span class="font-mono text-[10px] uppercase tracking-widest">validation</span>
      <span class="ms-auto font-black text-sm tabular-nums">{validation.at(-1)}</span>
    </div>
  </footer>
</div>