feat(scaling): first screen with ladder, ceilings, guardrails and progress

app/scaling/components/CeilingCards.tsx

@@ -0,0 +1,46 @@
+import Link from 'next/link';
+
+import { Card } from '../../components/ui/Card';
+import { Text } from '../../components/ui/Text';
+import { deriveBinding, type Ceiling, type CeilingInput } from '../snapshot.mjs';
+import { Info } from './Info';
+import { Tag } from './Tag';
+
+const AREAS: [Ceiling['area'], string][] = [['da', 'DA'], ['execution', 'Execution'], ['state', 'State'], ['networking', 'Networking']];
+
+function input({ name, value, unit, status, asOf }: CeilingInput): string {
+  const shown = value === null ? status : `${value} ${unit}`.trim();
+  return [name, shown, value === null ? null : status, asOf && new Date(asOf).toISOString().slice(0, 10)].filter(Boolean).join(' · ');
+}
+
+export function CeilingCards({ ceilings }: { ceilings: Ceiling[] }) {
+  const binding = deriveBinding(ceilings);
+  return (
+    <section className="flex flex-col gap-3">
+      <Text as="h2" variant="headline">Ceilings by bottleneck <span className="text-bds-gray-60">· Mgas/s</span></Text>
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        {AREAS.map(([area, name]) => {
+          const c = ceilings.find((x) => x.area === area)!;
+          return (
+            <Card key={area} className="flex flex-col gap-2 bg-background p-4 text-[13px] dark:bg-white/5">
+              <span className="flex items-center gap-1">
+                <Link className="underline" href={`/scaling/${area}`}><Text as="span" variant="label">{name}</Text></Link>
+                <Info label={`About the ${name} ceiling`}>{c.help}</Info>
+              </span>
+              <span className="flex flex-wrap items-center gap-2">
+                <span className="font-mono text-[20px]">{c.value === null ? '—' : c.value.toLocaleString('en-US', { maximumFractionDigits: 2 })}</span>
+                <Tag tag={c.tag} />
+                {c === binding ? <span className="rounded-md bg-base-blue px-2 py-0.5 text-[12px] text-white">Binding</span> : null}
+              </span>
+              <code className="break-words font-mono text-[12px] text-bds-gray-60">{c.formula}</code>
+              {c.reason ? <p className="text-bds-gray-60">{c.reason}</p> : null}
+              <ul className="flex flex-col gap-0.5 text-[12px] text-bds-gray-60 empty:hidden">
+                {c.inputs.map((i) => <li key={i.name}>{input(i)}</li>)}
+              </ul>
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

app/scaling/components/Guardrails.tsx

@@ -0,0 +1,57 @@
+import { cn } from '../../components/ui/cn';
+import { Card } from '../../components/ui/Card';
+import { Text } from '../../components/ui/Text';
+import type { Guardrail } from '../snapshot.mjs';
+import { Info } from './Info';
+import { Tag } from './Tag';
+
+const TH = 'px-4 py-2 text-left text-[12px] font-[500] text-bds-gray-60';
+const TD = 'px-4 py-3 align-top';
+const DOT: Record<Guardrail['status'], string> = { ok: 'bg-bds-green-50', breached: 'bg-bds-red-50', unknown: 'bg-bds-gray-30' };
+const STATUS: Record<Guardrail['status'], string> = { ok: 'OK', breached: 'Breached', unknown: 'Unknown' };
+
+const fmt = (n: number, unit: string) => `${n.toLocaleString('en-US', { maximumFractionDigits: 2 })} ${unit}`.trim();
+
+export function Guardrails({ guardrails }: { guardrails: Guardrail[] }) {
+  return (
+    <section className="flex flex-col gap-3">
+      <Text as="h2" variant="headline">Guardrails</Text>
+      <Card className="overflow-x-auto bg-background dark:bg-white/5">
+        <table className="w-full border-collapse text-[13px]">
+          <thead>
+            <tr className="border-b border-bds-gray-10 dark:border-white/10">
+              <th className={TH}>Guardrail</th>
+              <th className={TH}>Value</th>
+              <th className={TH}>Threshold</th>
+              <th className={TH}>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {guardrails.map((g) => (
+              <tr key={g.id} className="border-b border-bds-gray-10 last:border-0 dark:border-white/10">
+                <td className={TD}>
+                  <span className="flex items-center gap-1">{g.label} <Info label={`About ${g.label}`}>{g.help}</Info></span>
+                </td>
+                <td className={cn(TD, 'whitespace-nowrap font-mono')}>{g.value === null ? '—' : fmt(g.value, g.unit)}</td>
+                <td className={TD}>
+                  <span className="flex flex-wrap items-center gap-2">
+                    <span className="whitespace-nowrap font-mono">{g.threshold === null ? '—' : `${g.comparator === '<=' ? '≤' : '≥'} ${fmt(g.threshold, g.unit)}`}</span>
+                    {g.thresholdTag === 'set' ? null : <Tag tag={g.thresholdTag} />}
+                    {g.owner ? <span className="text-bds-gray-60">{g.owner}</span> : null}
+                  </span>
+                </td>
+                <td className={cn(TD, 'whitespace-nowrap')}>
+                  <span className="flex items-center gap-2">
+                    <span aria-hidden="true" className={cn('h-2 w-2 rounded-full', DOT[g.status])} />
+                    {STATUS[g.status]}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Card>
+      <Text variant="footnote" tone="muted">Breached SLOs are not attributed to saturation until triaged.</Text>
+    </section>
+  );
+}

app/scaling/components/Info.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useId, useState, type ReactNode } from 'react';
+import { Popover } from '@base-ui/react/popover';
+
+// A popover, not InfoTooltip: it must also open on tap and stay open until Escape or an outside click.
+export function Info({ label, children }: { label: string; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const popupId = useId();
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger
+        openOnHover
+        aria-label={label}
+        aria-controls={open ? popupId : undefined}
+        aria-describedby={open ? popupId : undefined}
+        onFocus={(e) => e.currentTarget.matches(':focus-visible') && setOpen(true)}
+        onBlur={() => setOpen(false)}
+        className="inline-flex h-4 w-4 shrink-0 cursor-help items-center justify-center rounded-full text-bds-gray-50 outline-none transition-colors hover:text-base-blue focus-visible:ring-2 focus-visible:ring-base-blue/40 data-[popup-open]:text-base-blue"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="9" />
+          <path d="M12 11v5M12 8h.01" />
+        </svg>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner side="top" sideOffset={8} collisionPadding={12} className="z-[140]">
+          <Popover.Popup
+            id={popupId}
+            initialFocus={false}
+            className="max-w-[18rem] rounded-lg bg-background px-3 py-2 text-[12px] leading-relaxed text-bds-gray-70 shadow-lg outline-none ring-1 ring-black/[0.04] dark:bg-[#1a1a1a] dark:ring-inset dark:ring-white/10"
+          >
+            {children}
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

app/scaling/components/Ladder.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useLayoutEffect, useRef, useState } from 'react';
+
+import { cn } from '../../components/ui/cn';
+import { Text } from '../../components/ui/Text';
+import { deriveBinding, type Rung, type Snapshot } from '../snapshot.mjs';
+import { Info } from './Info';
+import { Tag } from './Tag';
+import { layoutRungs, type Anchor } from './ladderLayout';
+
+const LABEL_PX = 150;
+const ROW = 44;
+const AXIS = 12;
+const AREA_NAME = { da: 'DA', execution: 'execution', state: 'state', networking: 'networking' };
+const ALIGN: Record<Anchor, string> = { start: 'items-start text-left', middle: 'items-center text-center', end: 'items-end text-right' };
+const SHIFT: Record<Anchor, string> = { start: 'none', middle: 'translateX(-50%)', end: 'translateX(-100%)' };
+
+type Props = Pick<Snapshot, 'ladder' | 'ceilings' | 'translations' | 'windows'>;
+type Item = { id: string; label: string; value: number | null; tag: string; help: string; limit?: boolean };
+
+function items({ ladder, ceilings, windows }: Props): Item[] {
+  const rung = (id: string, label: string, r: Rung): Item =>
+    ({ id, label, value: r.value, tag: r.tag, help: r.window ? `${r.help} Window: ${windows[r.window].label}.` : r.help });
+  const binding = deriveBinding(ceilings);
+  const ceiling: Item = binding
+    ? { id: 'ceiling', label: `Ceiling · ${AREA_NAME[binding.area]}`, value: binding.value, tag: binding.tag, help: binding.help }
+    : { id: 'ceiling', label: 'Ceiling', value: null, tag: 'not-modeled', help: `No area ceiling is measured or modeled yet: ${ceilings.map((c) => `${AREA_NAME[c.area]} ${c.tag}`).join(', ')}.` };
+  return [
+    rung('p50', 'Observed p50', ladder.observed.p50),
+    rung('p99', 'Observed p99', ladder.observed.p99),
+    rung('operating', 'Operating point', ladder.operatingPoint),
+    rung('qualified', 'Qualified sustained', ladder.qualified),
+    ceiling,
+    { ...rung('limit', 'Configured limit', ladder.configuredLimit), limit: true },
+  ];
+}
+
+function translation({ gasPerPayment, gasPerSwap }: Snapshot['translations']): string {
+  if (!gasPerPayment && !gasPerSwap) return 'Translation to payments/s and swaps/s: constants pending';
+  const per = (c: typeof gasPerPayment, noun: string) => (c ? `${Math.round(1e6 / c.value)} ${noun}/s` : `${noun}/s pending`);
+  return `1 Mgas/s ≈ ${per(gasPerPayment, 'payments')} ≈ ${per(gasPerSwap, 'swaps')}`;
+}
+
+export function Ladder(props: Props) {
+  const axisRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(960);
+  useLayoutEffect(() => {
+    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+    observer.observe(axisRef.current!);
+    return () => observer.disconnect();
+  }, []);
+
+  const all = items(props);
+  const valued = all.flatMap((i) => (i.value === null ? [] : [{ id: i.id, value: i.value }]));
+  const max = props.ladder.configuredLimit.value ?? Math.max(0, ...valued.map((v) => v.value));
+  const placed = new Map(max > 0 ? layoutRungs(valued, max, LABEL_PX / width).map((p) => [p.id, p]) : []);
+  const depth = (side: string) => 1 + Math.max(-1, ...[...placed.values()].filter((p) => p.side === side).map((p) => p.tier));
+  const above = depth('above');
+  const axisY = above * ROW + AXIS / 2;
+
+  return (
+    <section className="flex flex-col gap-3">
+      <Text as="h2" variant="headline">Capacity ladder <span className="text-bds-gray-60">· Mgas/s</span></Text>
+      <div ref={axisRef} className="relative" style={{ height: (above + depth('below')) * ROW + AXIS }}>
+        <div className="absolute inset-x-0 h-px bg-bds-gray-30 dark:bg-white/20" style={{ top: axisY }} />
+        {all.map((item) => {
+          const p = placed.get(item.id);
+          if (!p) return null;
+          const top = p.side === 'above' ? (above - 1 - p.tier) * ROW : above * ROW + AXIS + p.tier * ROW;
+          const left = `${p.x * 100}%`;
+          return (
+            <div key={item.id}>
+              <div
+                className={cn('absolute w-px', item.limit ? 'bg-bds-gray-40' : 'bg-base-blue')}
+                style={{ left, top: p.side === 'above' ? top + ROW : axisY, height: p.side === 'above' ? axisY - top - ROW : top - axisY }}
+              />
+              <div
+                className={cn('absolute z-10 flex flex-col bg-background', p.side === 'above' ? 'justify-end' : 'justify-start', ALIGN[p.anchor])}
+                style={{ left, top, width: LABEL_PX, height: ROW, transform: SHIFT[p.anchor] }}
+              >
+                <span className="flex items-center gap-1 text-[12px] text-bds-gray-60">
+                  {item.label} <Info label={`About ${item.label}`}>{item.help}</Info>
+                </span>
+                <span className={cn('font-mono text-[13px]', item.limit && 'text-bds-gray-60')}>
+                  {item.value!.toLocaleString('en-US', { maximumFractionDigits: 2 })}
+                  {item.limit ? null : <span className="ml-1 font-sans text-[11px] text-bds-gray-60">{item.tag}</span>}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <ul className="flex flex-wrap gap-x-4 gap-y-1 text-[13px] empty:hidden">
+        {all.filter((item) => !placed.has(item.id)).map((item) => (
+          <li key={item.id} className="flex items-center gap-1.5">
+            <span className="text-bds-gray-60">{item.label}</span>
+            <Tag tag={item.tag} />
+            <Info label={`About ${item.label}`}>{item.help}</Info>
+          </li>
+        ))}
+      </ul>
+      <Text variant="label.regular" tone="muted">{translation(props.translations)}</Text>
+    </section>
+  );
+}

app/scaling/components/Progress.tsx

@@ -0,0 +1,62 @@
+import { Card } from '../../components/ui/Card';
+import { EmptyState } from '../../components/ui/EmptyState';
+import { Text } from '../../components/ui/Text';
+import type { WorkItem } from '../snapshot.mjs';
+import { Info } from './Info';
+import { Tag } from './Tag';
+
+export function Progress({ work }: { work: WorkItem[] }) {
+  return (
+    <section className="flex flex-col gap-3">
+      <Text as="h2" variant="headline">Progress</Text>
+      {work.length === 0 ? (
+        <EmptyState description="No current work supplied for this snapshot." />
+      ) : (
+        <Card className="divide-y divide-bds-gray-10 bg-background text-[13px] dark:divide-white/10 dark:bg-white/5">
+          {work.map((w) => <Row key={w.title} item={w} />)}
+        </Card>
+      )}
+      <Text variant="footnote" tone="muted">Expected effects are not summed.</Text>
+    </section>
+  );
+}
+
+function Row({ item: w }: { item: WorkItem }) {
+  const l = w.linear;
+  return (
+    <div className="flex flex-col gap-2 px-4 py-3">
+      <span className="flex flex-wrap items-center gap-2">
+        <Text as="span" variant="label">{w.title}</Text>
+        <Info label={`About ${w.title}`}>
+          <p>Hypothesis: {w.hypothesis}</p>
+          <p>Change: {w.change}</p>
+          <p>Owner: {w.owner ?? 'none assigned'}</p>
+        </Info>
+        <Tag tag={w.area} />
+        <Tag tag={l ? l.state : 'proposed'} />
+      </span>
+      {l ? (
+        <span className="flex items-center gap-2">
+          <span
+            role="progressbar"
+            aria-label={`${l.scopeDone} of ${l.scopeTotal} issues done`}
+            aria-valuemin={0}
+            aria-valuemax={l.scopeTotal}
+            aria-valuenow={l.scopeDone}
+            className="h-1.5 w-40 overflow-hidden rounded-full bg-bds-gray-10 dark:bg-white/10"
+          >
+            <span className="block h-full bg-base-blue" style={{ width: `${l.scopeTotal ? (100 * l.scopeDone) / l.scopeTotal : 0}%` }} />
+          </span>
+          <span className="font-mono text-[12px] text-bds-gray-60">{l.scopeDone}/{l.scopeTotal}</span>
+        </span>
+      ) : null}
+      <p><span className="text-bds-gray-60">Expected:</span> {w.expected ?? 'Not estimated'}</p>
+      {w.evidence && w.realized ? <p><span className="text-bds-gray-60">Realized:</span> {w.realized}</p> : null}
+      <div className="flex flex-wrap gap-3">
+        {[w.evidence, l && { label: 'Linear', url: l.url }, ...w.links].map((link) => link ? (
+          <a key={link.url} className="w-fit underline" href={link.url} target="_blank" rel="noreferrer">{link.label}</a>
+        ) : null)}
+      </div>
+    </div>
+  );
+}

app/scaling/components/Tag.tsx

@@ -0,0 +1,12 @@
+const LABEL: Record<string, string> = {
+  measured: 'Measured', modeled: 'Modeled', estimated: 'Estimated',
+  'not-measured': 'Not measured', 'not-modeled': 'Not modeled', 'not-established': 'Not established',
+  provisional: 'Provisional', unset: 'Unset',
+  da: 'DA', execution: 'Execution', state: 'State', networking: 'Networking',
+};
+
+export function Tag({ tag }: { tag: string }) {
+  return (
+    <span className="rounded-md border border-dashed border-bds-gray-40 px-2 py-0.5 text-[12px] text-bds-gray-60">{LABEL[tag] ?? tag}</span>
+  );
+}

app/scaling/components/firstScreen.test.tsx

@@ -0,0 +1,70 @@
+import { readFileSync } from 'node:fs';
+
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import type { Snapshot } from '../snapshot.mjs';
+import { CeilingCards } from './CeilingCards';
+import { Guardrails } from './Guardrails';
+import { Progress } from './Progress';
+
+// Synthetic data only: real snapshots are internal and never committed.
+function fixture(): Snapshot {
+  return JSON.parse(readFileSync(new URL('../fixtures/synthetic.v2.json', import.meta.url), 'utf8'));
+}
+
+const cards = (html: string) => html.split('<a ').slice(1);
+
+describe('CeilingCards', () => {
+  it('renders every area in a fixed order with its tag, and badges the binding card', () => {
+    const html = cards(renderToStaticMarkup(<CeilingCards ceilings={fixture().ceilings.reverse()} />));
+    expect(html.map((c) => c.match(/href="\/scaling\/(\w+)"/)![1])).toEqual(['da', 'execution', 'state', 'networking']);
+    expect(html.map((c) => c.match(/border-dashed[^>]*>([^<]+)</)![1])).toEqual(['Modeled', 'Estimated', 'Not modeled', 'Not modeled']);
+    expect(html.map((c) => c.includes('>Binding<'))).toEqual([true, false, false, false]);
+  });
+
+  it('moves the binding badge to a lower measured ceiling, and shows a dash, reason and pending inputs when there is no value', () => {
+    const { ceilings } = fixture();
+    ceilings[1] = { ...ceilings[1], value: 90, tag: 'measured' };
+    const html = cards(renderToStaticMarkup(<CeilingCards ceilings={ceilings} />));
+    expect(html.map((c) => c.includes('>Binding<'))).toEqual([false, true, false, false]);
+    expect(html[2]).toContain('>—<');
+    expect(html[2]).toContain('live-state growth not measured');
+    expect(html[2]).toContain('state_bytes_per_gas · pending</li>');
+    expect(html[2]).toContain('runway_years · 4 years · provisional · 2026-01-01</li>');
+  });
+});
+
+describe('Guardrails', () => {
+  it('shows comparator and unit with the threshold, tags provisional and unset thresholds, and colors only known statuses', () => {
+    const rows = renderToStaticMarkup(<Guardrails guardrails={fixture().guardrails} />).split('<tr').slice(2);
+    expect(rows[0]).toContain('≤ 80 %');
+    expect(rows[0]).toContain('bg-bds-green-50');
+    expect(rows[1]).toContain('≥ 99.9 %');
+    expect(rows[1]).toContain('bg-bds-red-50');
+    expect(rows[2]).toContain('>Provisional<');
+    expect(rows[2]).toContain('Synthetic owner');
+    expect(rows[3]).toContain('>Unset<');
+    expect(rows[3]).toContain('bg-bds-gray-30');
+    expect(rows[3]).not.toMatch(/bg-bds-(green|red)/);
+  });
+});
+
+describe('Progress', () => {
+  it('shows Linear state and a labelled bar when linked, and proposed with no bar otherwise', () => {
+    const [linked, proposed] = renderToStaticMarkup(<Progress work={fixture().work} />).split('px-4 py-3').slice(1);
+    expect(linked).toContain('>started<');
+    expect(linked).toContain('aria-label="4 of 10 issues done"');
+    expect(linked).toContain('width:40%');
+    expect(linked).toContain('Realized:');
+    expect(linked).toContain('href="https://example.com/synthetic/linear/project"');
+    expect(proposed).toContain('>proposed<');
+    expect(proposed).not.toContain('progressbar');
+    expect(proposed).not.toContain('Realized:');
+  });
+
+  it('hides realized without evidence', () => {
+    const [item] = fixture().work;
+    expect(renderToStaticMarkup(<Progress work={[{ ...item, evidence: null }]} />)).not.toContain('Realized:');
+  });
+});