@appinternalleads/ui 0.2.0

package/src/components/onboarding/ab-tests/AbTestsView.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+import { Box, Pressable, Text } from '../../../core';
+import { blockRadii, useDs, type DensityName } from '../../../tokens';
+import { resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import type { OnboardingOperation } from '../shared/mock';
+import { InvalidConfig } from '../shared/InvalidConfig';
+import { OnboardingCard } from '../shared/OnboardingCard';
+import { usePatternStatus, useSceneReport } from '../shared/runtime';
+import { guarded } from '../shared/guard';
+import { M15, barFill, barStart, revealEnd, rowReveal, toneIn } from '../shared/m15';
+import { DataTip, RevealRow, ToneText, VizBar, useInView, useRevealClock, useTweenedValues } from '../shared/viz';
+import { AB_TESTS_PRESETS, validateAbTests, type AbTestsSettings } from './contract';
+import { abRows, abSummary, abTestsSeed, initialAbTests, type AbTestsSeed } from './engine';
+
+export type AbTestsProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<AbTestsSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  result?: OnboardingResult;
+  reload?: OnboardingOperation<void>;
+  initial?: AbTestsSeed;
+  /** An experiment's name is a button only with this. */
+  onOpen?: (id: string) => void;
+  /** "mobile": A and B stack in one column. */
+  viewport?: 'web' | 'mobile';
+  replay?: number;
+  forceReduced?: boolean;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+/**
+ * **A/B Tests** — the header counts (concluded · running · paused, each an 8px dot and a word); per
+ * experiment: the name (a button with `onOpen`), a mint "✓ Winner: B" once both bars finish (only
+ * concluded at ≥ 95%, never on a tie) or "Paused" (bars at 60%); the hypothesis; A and B — the
+ * leader fills 100%, the other its share, both at once; then the strip: status and sample, and
+ * confidence counting up, its tone after the count. A live update tweens and re-scales in one go.
+ */
+function AbTestsView(props: AbTestsProps) {
+  const config = resolveConfig(AB_TESTS_PRESETS, props.preset, props.config);
+  const issues = validateAbTests(config);
+  if (issues.length) return <InvalidConfig title={config.title} issues={issues} testID={props.testID} />;
+  return <Valid {...props} config={config} />;
+}
+
+function Valid({
+  config, density, status, reload, initial, onOpen, viewport = 'web', replay, forceReduced, onScene, testID,
+}: Omit<AbTestsProps, 'config'> & { config: AbTestsSettings }) {
+  const { colors } = useDs();
+  const key = JSON.stringify([config, initial ?? null]);
+  const state = useMemo(() => initialAbTests(config, initial ?? (config.ship ? abTestsSeed(config, config.ship) : {})), [key]);
+  const rows = abRows(config, state);
+  const summary = abSummary(rows);
+  const pattern = usePatternStatus(status ?? (state.loadReady ? 'loading' : rows.length ? 'ready' : 'empty'), reload);
+  useEffect(() => {
+    if (!state.loadReady || status) return;
+    const t = setTimeout(() => pattern.set('ready'), 1200);
+    return () => clearTimeout(t);
+  }, [state, status, replay]);
+  useSceneReport(pattern.status === 'ready' ? (state.live ? 'live' : state.loadReady ? 'loadReady' : 'default') : pattern.status, onScene);
+
+  const [ref, inView] = useInView();
+  const clock = useRevealClock(inView && pattern.status === 'ready', revealEnd(rows.length), `${replay ?? 0}|${pattern.status}`, forceReduced);
+  const t = clock.t;
+  const n = rows.length;
+  const shown = useTweenedValues([
+    ...rows.map(r => r.a.rate), ...rows.map(r => r.b.rate), ...rows.map(r => r.scaleA), ...rows.map(r => r.scaleB), ...rows.map(r => r.confidencePct),
+  ], M15.fillMs, clock.done, clock.reduced);
+  const at = (block: number, i: number, target: number) => (clock.done ? shown[block * n + i]! : target * barFill(i, t));
+  const tones = { mint: colors.status.executed, apricot: colors.status.needsUser, muted: colors.textSecondary };
+  const mobile = viewport === 'mobile';
+
+  const meta = (
+    <Box gap="s1" aria-label="Experiment status">
+      {([['concluded', colors.status.executed], ['running', colors.textSecondary], ['paused', colors.hairlineStrong]] as const).map(([k, dot]) => (
+        <Box key={k} row align="center" gap="s1">
+          <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: dot }} />
+          <Text numeric style={{ fontSize: 12, color: colors.textSecondary }}>{`${summary.counts[k]} ${k}`}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+
+  return (
+    <OnboardingCard testID={testID} header={{ ...config, subtitle: config.subtitle || summary.subtitle }} copy={config} density={density} status={pattern.status} onRetry={pattern.retry} onEmptyAction={pattern.retry} meta={meta}>
+      <View ref={ref} role={'list' as never} aria-label="Experiments" style={{ opacity: clock.reduced ? clock.fade : 1 }}>
+        {rows.map((r, i) => {
+          const rv = clock.reduced ? { opacity: 1, y: 0 } : rowReveal(i, t);
+          const doneAt = barStart(i) + M15.fillMs;
+          const toneP = clock.done ? 1 : toneIn(doneAt, t);
+          const dim = r.status === 'paused' ? 0.6 : 1;
+          const variant = (k: 'A' | 'B') => {
+            const v = k === 'A' ? r.a : r.b;
+            const rate = at(k === 'A' ? 0 : 1, i, v.rate);
+            const scale = at(k === 'A' ? 2 : 3, i, k === 'A' ? r.scaleA : r.scaleB);
+            return (
+              <DataTip key={k} label={k === 'A' ? r.tipA : r.tipB} style={{ padding: 6, marginHorizontal: -6 }}>
+                <Box gap="s1">
+                  <Box row align="center" gap="s2">
+                    <Text numberOfLines={1} style={{ flex: 1, fontSize: 12, color: colors.textSecondary }}>
+                      <Text style={{ fontWeight: '700', color: colors.textSecondary }}>{`${k}:`}</Text>{` ${v.label}`}
+                    </Text>
+                    <Text numeric style={{ fontSize: 13, fontWeight: '600', color: colors.textPrimary }}>{`${rate.toFixed(1)}%`}</Text>
+                  </Box>
+                  <VizBar
+                    scale={scale}
+                    color={k === 'A' ? colors.textSecondary : colors.accentFill}
+                    track={colors.band}
+                    dim={dim}
+                    a11y={{ role: 'meter', label: `${r.name}, ${k}`, now: v.rate, max: 100, text: k === 'A' ? r.textA : r.textB }}
+                  />
+                </Box>
+              </DataTip>
+            );
+          };
+          return (
+            <RevealRow key={r.id} opacity={rv.opacity} y={rv.y}>
+              <View role={'listitem' as never} style={{ paddingVertical: 14, borderBottomWidth: 1, borderBottomColor: colors.band, gap: 8 }}>
+                <Box row align="center" gap="s2" style={{ flexWrap: 'wrap' }}>
+                  {onOpen ? (
+                    <Pressable role="button" onPress={() => onOpen(r.id)}><Text style={{ fontSize: 14, fontWeight: '600', color: colors.textPrimary }}>{r.name}</Text></Pressable>
+                  ) : <Text style={{ fontSize: 14, fontWeight: '600', color: colors.textPrimary }}>{r.name}</Text>}
+                  {r.winner ? (
+                    <View style={{ opacity: toneP, height: 22, paddingHorizontal: 8, borderRadius: 999, justifyContent: 'center', backgroundColor: colors.statusBg.executed }}>
+                      <Text style={{ fontSize: 12, fontWeight: '600', color: colors.status.executed }}>{`✓ Winner: ${r.winner}`}</Text>
+                    </View>
+                  ) : null}
+                  {r.status === 'paused' ? (
+                    <View style={{ height: 22, paddingHorizontal: 8, borderRadius: 999, justifyContent: 'center', backgroundColor: colors.surfaceSunken }}>
+                      <Text style={{ fontSize: 12, color: colors.textSecondary }}>Paused</Text>
+                    </View>
+                  ) : null}
+                </Box>
+                <Text numberOfLines={1} {...({ title: r.hypothesis } as object)} style={{ fontSize: 12, color: colors.textSecondary }}>{r.hypothesis}</Text>
+                <View style={{ flexDirection: mobile ? 'column' : 'row', gap: mobile ? 10 : 20 }}>
+                  <View style={{ flex: mobile ? undefined : 1 }}>{variant('A')}</View>
+                  <View style={{ flex: mobile ? undefined : 1 }}>{variant('B')}</View>
+                </View>
+                <Box row align="center" gap="s2" style={{ flexWrap: 'wrap', paddingHorizontal: 10, paddingVertical: 8, borderRadius: blockRadii.inset, backgroundColor: colors.surfaceSunken }}>
+                  <Text numeric style={{ flex: 1, fontSize: 12, color: colors.textSecondary }}>{r.statusText}</Text>
+                  <ToneText color={colors.textSecondary} tone={r.toneColor === 'muted' ? undefined : tones[r.toneColor]} toneOpacity={toneP}>
+                    {`Confidence ${Math.round(at(4, i, r.confidencePct))}% · ${r.tone}`}
+                  </ToneText>
+                </Box>
+              </View>
+            </RevealRow>
+          );
+        })}
+      </View>
+    </OnboardingCard>
+  );
+}
+
+/** AbTests, guarded (`shared/guard`). */
+export const AbTests = guarded(AbTestsView, AB_TESTS_PRESETS, 'AbTests');

package/src/components/onboarding/ab-tests/contract.ts

@@ -0,0 +1,60 @@
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **A/B Tests (batch 5 §4.2)** — A against B, per experiment, with confidence and a winner.
+ * Read-only; M15 is the only entrance. The winner and the header counts are computed, never set.
+ * B stays coral: data bars don't count toward the one-coral-primary rule (handoff decision).
+ */
+
+export type AbVariant = { label: string; rate: number; conversions?: number };
+export type AbStatus = 'running' | 'concluded' | 'paused';
+export type AbExperiment = {
+  id?: string;
+  name: string;
+  hypothesis: string;
+  status: AbStatus;
+  /** "Conversion", "Open rate", "Task success" — said in each bar's value text. */
+  metric: string;
+  a: AbVariant;
+  b: AbVariant;
+  sample: number;
+  /** 0–1. */
+  confidence: number;
+};
+
+export const AB_TESTS_SCENES = ['default', 'live', 'loadReady', 'loading', 'empty', 'error'] as const;
+export type AbTestsScene = (typeof AB_TESTS_SCENES)[number];
+export const AB_TESTS_IN_FLIGHT: readonly string[] = [];
+
+export type AbTestsSettings = HeaderConfig & LoadCopy & {
+  experiments: AbExperiment[];
+  /** The `live` scene's overrides, by experiment index — new rates, a new confidence. */
+  live: Partial<Omit<AbExperiment, 'a' | 'b'> & { a: Partial<AbVariant>; b: Partial<AbVariant> }>[];
+  ship: AbTestsScene | null;
+};
+
+export const AB_TESTS_PRESETS = presetsJson as unknown as PresetsFile<AbTestsSettings>;
+
+const num = (v: unknown) => typeof v === 'number' && Number.isFinite(v);
+
+export function validateAbTests(c: AbTestsSettings): OnboardingIssue[] {
+  if (!c || typeof c !== 'object') return [{ path: 'config', message: 'must be an object.' }];
+  if (!Array.isArray(c.experiments)) return [{ path: 'experiments', message: 'experiments must be a list.' }];
+  const out: OnboardingIssue[] = [];
+  c.experiments.forEach((e, i) => {
+    const p = `experiments[${i}]`;
+    if (!e || typeof e !== 'object') { out.push({ path: p, message: 'Each experiment is { name, status, a, b, sample, confidence }.' }); return; }
+    if (typeof e.name !== 'string' || !e.name.trim()) out.push({ path: `${p}.name`, message: 'Every experiment needs a name.' });
+    if (!['running', 'concluded', 'paused'].includes(e.status)) out.push({ path: `${p}.status`, message: 'status is running, concluded or paused.' });
+    for (const v of ['a', 'b'] as const) {
+      const x = e[v];
+      if (!x || typeof x !== 'object' || typeof x.label !== 'string') out.push({ path: `${p}.${v}`, message: `${v.toUpperCase()} needs a label and a rate.` });
+      else if (!num(x.rate) || x.rate < 0 || x.rate > 100) out.push({ path: `${p}.${v}.rate`, message: 'A rate is a percentage from 0 to 100.' });
+    }
+    if (!num(e.sample) || e.sample < 0) out.push({ path: `${p}.sample`, message: 'sample is a count, 0 or more.' });
+    if (!num(e.confidence) || e.confidence < 0 || e.confidence > 1) out.push({ path: `${p}.confidence`, message: 'confidence is from 0 to 1.' });
+  });
+  if (c.live !== undefined && c.live !== null && !Array.isArray(c.live)) out.push({ path: 'live', message: 'live is a list of overrides, by experiment.' });
+  return out;
+}

package/src/components/onboarding/ab-tests/engine.ts

@@ -0,0 +1,75 @@
+import { grouped } from '../shared/m15';
+import type { AbExperiment, AbTestsScene, AbTestsSettings } from './contract';
+
+/** **The A/B Tests engine** — pure: the experiments now (live or not), their leader, winner and words. */
+
+export type AbTestsState = { live: boolean; loadReady: boolean };
+export type AbTestsSeed = Partial<AbTestsState>;
+
+export const initialAbTests = (_c: AbTestsSettings, seed: AbTestsSeed = {}): AbTestsState => ({ live: seed.live ?? false, loadReady: seed.loadReady ?? false });
+
+export function abTestsSeed(_c: AbTestsSettings, scene: AbTestsScene): AbTestsSeed {
+  if (scene === 'live') return { live: true };
+  if (scene === 'loadReady') return { loadReady: true };
+  return {};
+}
+
+export function experimentsOf(c: AbTestsSettings, s: AbTestsState): AbExperiment[] {
+  return c.experiments.map((e, i) => {
+    const o = s.live && c.live?.[i] ? c.live[i]! : {};
+    return { ...e, ...o, id: e.id ?? `x${i}`, a: { ...e.a, ...o.a }, b: { ...e.b, ...o.b } } as AbExperiment;
+  });
+}
+
+export type AbTone = 'significant' | 'trending' | 'not enough data' | 'inconclusive';
+
+export type AbRow = {
+  id: string; name: string; hypothesis: string; status: AbExperiment['status']; metric: string;
+  a: AbExperiment['a']; b: AbExperiment['b']; sample: number; confidence: number;
+  /** Each bar's scale: the leader fills 1; a tie fills both. */
+  scaleA: number; scaleB: number;
+  tie: boolean;
+  leader: 'A' | 'B' | null;
+  winner: 'A' | 'B' | null;
+  confidencePct: number;
+  tone: AbTone;
+  toneColor: 'mint' | 'apricot' | 'muted';
+  statusText: string;
+  tipA: string; tipB: string;
+  textA: string; textB: string;
+};
+
+const lift = (x: number, y: number) => (y > 0 ? Math.round((x / y - 1) * 100) : 0);
+const signed = (n: number) => (n > 0 ? `+${n}%` : n < 0 ? `−${-n}%` : '±0%');
+
+export function abRows(c: AbTestsSettings, s: AbTestsState): AbRow[] {
+  return experimentsOf(c, s).map((e, i) => {
+    const lead = Math.max(e.a.rate, e.b.rate) || 1;
+    const tie = e.a.rate === e.b.rate;
+    const leader = tie ? null : e.b.rate > e.a.rate ? 'B' : 'A';
+    const cf = Math.round(e.confidence * 100);
+    const winner = e.status === 'concluded' && e.confidence >= 0.95 && !tie ? leader : null;
+    const tone: AbTone = e.status === 'concluded' && cf < 95 ? 'inconclusive' : cf >= 95 ? 'significant' : cf >= 80 && e.status === 'running' ? 'trending' : 'not enough data';
+    const conv = (v: AbExperiment['a']) => v.conversions ?? Math.round((v.rate / 100) * e.sample);
+    const metric = e.metric.toLowerCase();
+    const text = (k: 'A' | 'B', v: AbExperiment['a']) => `${k}: ${v.label}, ${v.rate}% ${metric}${leader === k ? ', leading' : tie ? ', tied' : ''}`;
+    return {
+      id: e.id ?? `x${i}`, name: e.name, hypothesis: e.hypothesis, status: e.status, metric: e.metric, a: e.a, b: e.b, sample: e.sample, confidence: e.confidence,
+      scaleA: tie ? 1 : e.a.rate / lead, scaleB: tie ? 1 : e.b.rate / lead,
+      tie, leader, winner, confidencePct: cf, tone,
+      toneColor: tone === 'significant' ? 'mint' : tone === 'trending' ? 'apricot' : 'muted',
+      statusText: `${e.status === 'concluded' ? 'Concluded' : e.status === 'paused' ? 'Paused' : 'Running'} · Sample ${grouped(e.sample)}${tie ? ' · Tied' : ''}`,
+      tipA: `${e.a.label} · ${e.a.rate}% · ${grouped(conv(e.a))} of ${grouped(e.sample)} · ${signed(lift(e.a.rate, e.b.rate))} vs B`,
+      tipB: `${e.b.label} · ${e.b.rate}% · ${grouped(conv(e.b))} of ${grouped(e.sample)} · ${signed(lift(e.b.rate, e.a.rate))} vs A`,
+      textA: text('A', e.a), textB: text('B', e.b),
+    };
+  });
+}
+
+/** "3 experiments · 2 running" — and the header's counts. */
+export function abSummary(rows: AbRow[]) {
+  const count = (st: AbRow['status']) => rows.filter(r => r.status === st).length;
+  const counts = { concluded: count('concluded'), running: count('running'), paused: count('paused') };
+  const n = rows.length;
+  return { counts, subtitle: `${n} experiment${n === 1 ? '' : 's'} · ${counts.running} running` };
+}

package/src/components/onboarding/ab-tests/index.ts

@@ -0,0 +1,6 @@
+export {
+  AB_TESTS_IN_FLIGHT, AB_TESTS_PRESETS, AB_TESTS_SCENES, validateAbTests,
+  type AbExperiment, type AbStatus, type AbTestsScene, type AbTestsSettings, type AbVariant,
+} from './contract';
+export { abRows, abSummary, abTestsSeed, experimentsOf, initialAbTests, type AbRow, type AbTestsSeed, type AbTestsState, type AbTone } from './engine';
+export { AbTests, type AbTestsProps } from './AbTestsView';

package/src/components/onboarding/ab-tests/presets.json

@@ -0,0 +1,325 @@
+{
+  "component": "ab-tests",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "action",
+    "icon": "flask",
+    "title": "A/B tests",
+    "subtitle": "",
+    "experiments": [
+      {
+        "name": "Checkout button copy",
+        "hypothesis": "“Add to cart” is clearer than “Buy now” for first-time visitors",
+        "status": "concluded",
+        "metric": "Conversion",
+        "a": {
+          "label": "Buy now",
+          "rate": 3.2
+        },
+        "b": {
+          "label": "Add to cart",
+          "rate": 4.1
+        },
+        "sample": 24847,
+        "confidence": 0.97
+      },
+      {
+        "name": "Pricing page layout",
+        "hypothesis": "Showing annual savings first increases plan upgrades",
+        "status": "running",
+        "metric": "Conversion",
+        "a": {
+          "label": "Monthly first",
+          "rate": 2.4
+        },
+        "b": {
+          "label": "Annual first",
+          "rate": 2.6
+        },
+        "sample": 8210,
+        "confidence": 0.62
+      },
+      {
+        "name": "Onboarding flow",
+        "hypothesis": "A three-step checklist beats a product tour",
+        "status": "running",
+        "metric": "Completion",
+        "a": {
+          "label": "Product tour",
+          "rate": 38.2
+        },
+        "b": {
+          "label": "Checklist",
+          "rate": 41.5
+        },
+        "sample": 5130,
+        "confidence": 0.91
+      }
+    ],
+    "emptyTitle": "No experiments yet",
+    "emptyBody": "Start an experiment to compare two versions.",
+    "emptyCta": "New experiment",
+    "live": [],
+    "ship": null
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "type": "action",
+      "icon": "mail",
+      "title": "Email subject lines",
+      "experiments": [
+        {
+          "name": "Welcome email",
+          "hypothesis": "Using the first name lifts opens",
+          "status": "running",
+          "metric": "Open rate",
+          "a": {
+            "label": "Welcome to Northwind",
+            "rate": 42.1
+          },
+          "b": {
+            "label": "Ana, your workspace is ready",
+            "rate": 44.8
+          },
+          "sample": 12400,
+          "confidence": 0.84
+        },
+        {
+          "name": "Re-engagement",
+          "hypothesis": "A question beats a discount",
+          "status": "running",
+          "metric": "Open rate",
+          "a": {
+            "label": "20% off this week",
+            "rate": 18.3
+          },
+          "b": {
+            "label": "Still planning Q4?",
+            "rate": 17.9
+          },
+          "sample": 9800,
+          "confidence": 0.72
+        },
+        {
+          "name": "Promo",
+          "hypothesis": "Urgency increases opens on promo sends",
+          "status": "concluded",
+          "metric": "Open rate",
+          "a": {
+            "label": "New autumn range",
+            "rate": 21
+          },
+          "b": {
+            "label": "Ends Sunday: autumn range",
+            "rate": 24.6
+          },
+          "sample": 31200,
+          "confidence": 0.96
+        }
+      ],
+      "live": [
+        {
+          "confidence": 0.9,
+          "a": {
+            "rate": 42.4
+          },
+          "b": {
+            "rate": 45.9
+          }
+        },
+        {
+          "confidence": 0.81,
+          "a": {
+            "rate": 18.1
+          },
+          "b": {
+            "rate": 19.4
+          }
+        }
+      ]
+    },
+    "case3": {
+      "type": "file",
+      "icon": "phone",
+      "title": "Paywall tests",
+      "experiments": [
+        {
+          "name": "Trial length",
+          "hypothesis": "A 14-day trial converts better than 7 days",
+          "status": "paused",
+          "metric": "Trial start",
+          "a": {
+            "label": "7 days",
+            "rate": 11.2
+          },
+          "b": {
+            "label": "14 days",
+            "rate": 12
+          },
+          "sample": 6400,
+          "confidence": 0.55
+        },
+        {
+          "name": "Price anchor",
+          "hypothesis": "Showing the yearly price first reduces churn",
+          "status": "concluded",
+          "metric": "Subscription",
+          "a": {
+            "label": "Monthly price",
+            "rate": 6.8
+          },
+          "b": {
+            "label": "Yearly price",
+            "rate": 7.3
+          },
+          "sample": 18900,
+          "confidence": 0.88
+        },
+        {
+          "name": "Annual default",
+          "hypothesis": "Pre-selecting annual raises annual share",
+          "status": "running",
+          "metric": "Annual share",
+          "a": {
+            "label": "Monthly default",
+            "rate": 31
+          },
+          "b": {
+            "label": "Annual default",
+            "rate": 36.4
+          },
+          "sample": 14200,
+          "confidence": 0.93
+        }
+      ]
+    },
+    "case4": {
+      "type": "agent",
+      "icon": "sparkle",
+      "title": "Prompt variants",
+      "experiments": [
+        {
+          "name": "System prompt v3 vs v4",
+          "hypothesis": "Shorter instructions improve tool choice",
+          "status": "running",
+          "metric": "Task success",
+          "a": {
+            "label": "v3",
+            "rate": 71.2
+          },
+          "b": {
+            "label": "v4",
+            "rate": 76.4
+          },
+          "sample": 3120,
+          "confidence": 0.88
+        },
+        {
+          "name": "Tool order",
+          "hypothesis": "Listing search before calendar reduces wrong calls",
+          "status": "running",
+          "metric": "Task success",
+          "a": {
+            "label": "Calendar first",
+            "rate": 68
+          },
+          "b": {
+            "label": "Search first",
+            "rate": 69.1
+          },
+          "sample": 2480,
+          "confidence": 0.64
+        },
+        {
+          "name": "Answer length",
+          "hypothesis": "Capping answers at 120 words keeps them accepted",
+          "status": "concluded",
+          "metric": "Task success",
+          "a": {
+            "label": "No cap",
+            "rate": 74.8
+          },
+          "b": {
+            "label": "120 words",
+            "rate": 79.9
+          },
+          "sample": 5600,
+          "confidence": 0.98
+        }
+      ]
+    },
+    "case5": {
+      "type": "data",
+      "icon": "globe",
+      "title": "Landing pages",
+      "ship": "loadReady",
+      "experiments": [
+        {
+          "name": "Hero headline",
+          "hypothesis": "Naming the outcome beats naming the feature",
+          "status": "running",
+          "metric": "Sign-up",
+          "a": {
+            "label": "Plan projects faster",
+            "rate": 5.4
+          },
+          "b": {
+            "label": "Ship on time, every time",
+            "rate": 5.4
+          },
+          "sample": 16200,
+          "confidence": 0.5
+        },
+        {
+          "name": "Social proof position",
+          "hypothesis": "Logos above the fold build trust sooner",
+          "status": "running",
+          "metric": "Sign-up",
+          "a": {
+            "label": "Logos below",
+            "rate": 4.9
+          },
+          "b": {
+            "label": "Logos above",
+            "rate": 5.3
+          },
+          "sample": 16200,
+          "confidence": 0.82
+        }
+      ]
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · E-commerce",
+      "title": "Product experiments",
+      "scenario": "Three tests: one winner at 97%, one without enough data at 62%, and one trending at 91%."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · Marketing",
+      "title": "Email subject lines",
+      "scenario": "Press Live update: in Re-engagement the leader flips from A to B. Bars re-scale in one tween."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Mobile",
+      "title": "Paywall tests",
+      "scenario": "One test is paused (dimmed), and one concluded at 88%, so it’s inconclusive with no winner."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · AI agent",
+      "title": "Prompt variants",
+      "scenario": "The metric is task success. The v3 vs v4 prompt test is trending at 88%."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · Growth",
+      "title": "Landing pages",
+      "scenario": "Results load, then reveal. The hero headline test is a tie, so both bars are full and there’s no winner."
+    }
+  }
+}