frontend: What-If page with fan chart driven by /simulate

New /what-if route. Sticky form on the left (jurisdiction, strategy,
glide, NW seed, spending, savings, horizon, optional floor for
vpw_floor, MC paths) submits to POST /simulate; results panel renders
summary stats + the new FanChart.

FanChart component layers seven series:
- p10 invisible baseline (line, transparent)
- p10→p25 stacked area (low opacity)
- p25→p75 stacked area (IQR, mid opacity)
- p75→p90 stacked area (low opacity)
- p50 solid median line (drawn last, prominent)
- p10 + p90 dashed lines on top of the bands

Stacking deltas keeps the band fills clean — plotting raw quantiles
each as their own area would overlap badly. Reusable by scenario
detail in the next chunk (same ProjectionPoint[] shape).

5 tests pass (was 2). 470 KB gzipped (ECharts).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/pages/WhatIf.tsx

@@ -0,0 +1,281 @@
+/**
+ * What-If — interactive Monte Carlo. Form on the left, fan chart on the
+ * right. Hits POST /simulate (no DB write); ~1-3s for 5k paths.
+ */
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+
+import { api, type SimulateRequest, type SimulateResult } from '@/api/client';
+import { FanChart } from '@/components/FanChart';
+import { gbp, pct } from '@/lib/format';
+
+const JURISDICTIONS = ['uk', 'cyprus', 'bulgaria', 'malaysia', 'thailand', 'uae', 'nomad'];
+const STRATEGIES = ['trinity', 'guyton_klinger', 'vpw', 'vpw_floor'];
+const GLIDES = ['rising', 'static_60_40'];
+
+const DEFAULTS: SimulateRequest = {
+  jurisdiction: 'cyprus',
+  strategy: 'guyton_klinger',
+  leave_uk_year: 2,
+  glide_path: 'rising',
+  spending_gbp: '60000',
+  nw_seed_gbp: '1500000',
+  savings_per_year_gbp: '0',
+  horizon_years: 60,
+  floor_gbp: null,
+  n_paths: 5000,
+  seed: 42,
+};
+
+export function WhatIf() {
+  const [form, setForm] = useState<SimulateRequest>(DEFAULTS);
+  const sim = useMutation({
+    mutationFn: (req: SimulateRequest) => api.simulate(req),
+  });
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    sim.mutate({
+      ...form,
+      floor_gbp: form.strategy === 'vpw_floor' ? form.floor_gbp : null,
+    });
+  };
+
+  const update = <K extends keyof SimulateRequest>(key: K, value: SimulateRequest[K]) =>
+    setForm((f) => ({ ...f, [key]: value }));
+
+  return (
+    <section className="space-y-6">
+      <header>
+        <h1 className="text-3xl font-semibold tracking-tight">What if…</h1>
+        <p className="text-sm text-slate-500">
+          Run a single Monte Carlo against the engine. No data persisted.
+        </p>
+      </header>
+
+      <div className="grid grid-cols-1 lg:grid-cols-[320px_1fr] gap-6 items-start">
+        <form
+          onSubmit={onSubmit}
+          className="rounded-lg border border-slate-200 bg-white p-5 space-y-4 sticky top-4"
+        >
+          <Field label="Jurisdiction">
+            <Select
+              value={form.jurisdiction}
+              onChange={(v) => update('jurisdiction', v)}
+              options={JURISDICTIONS}
+            />
+          </Field>
+          <Field label="Strategy">
+            <Select
+              value={form.strategy}
+              onChange={(v) => update('strategy', v)}
+              options={STRATEGIES}
+            />
+          </Field>
+          <Field label="Glide path">
+            <Select
+              value={form.glide_path}
+              onChange={(v) => update('glide_path', v)}
+              options={GLIDES}
+            />
+          </Field>
+          <Field label="Years until leaving UK">
+            <NumberInput
+              value={form.leave_uk_year}
+              onChange={(v) => update('leave_uk_year', v)}
+              min={0}
+              max={60}
+            />
+          </Field>
+          <Field label="Annual spending (£)">
+            <NumberInput
+              value={Number(form.spending_gbp)}
+              onChange={(v) => update('spending_gbp', String(v))}
+              min={0}
+              step={1000}
+            />
+          </Field>
+          <Field label="NW seed (£)">
+            <NumberInput
+              value={Number(form.nw_seed_gbp)}
+              onChange={(v) => update('nw_seed_gbp', String(v))}
+              min={0}
+              step={10000}
+            />
+          </Field>
+          <Field label="Annual savings (£)">
+            <NumberInput
+              value={Number(form.savings_per_year_gbp ?? 0)}
+              onChange={(v) => update('savings_per_year_gbp', String(v))}
+              min={0}
+              step={1000}
+            />
+          </Field>
+          <Field label="Horizon (years)">
+            <NumberInput
+              value={form.horizon_years ?? 60}
+              onChange={(v) => update('horizon_years', v)}
+              min={5}
+              max={100}
+            />
+          </Field>
+          {form.strategy === 'vpw_floor' && (
+            <Field label="Floor (£/yr)">
+              <NumberInput
+                value={Number(form.floor_gbp ?? 40000)}
+                onChange={(v) => update('floor_gbp', String(v))}
+                min={0}
+                step={1000}
+              />
+            </Field>
+          )}
+          <Field label="Monte Carlo paths">
+            <NumberInput
+              value={form.n_paths ?? 5000}
+              onChange={(v) => update('n_paths', v)}
+              min={100}
+              max={50000}
+              step={500}
+            />
+          </Field>
+
+          <button
+            type="submit"
+            disabled={sim.isPending}
+            className="w-full rounded-md bg-slate-900 text-white text-sm font-medium px-4 py-2 hover:bg-slate-800 disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            {sim.isPending ? 'Running…' : 'Run simulation'}
+          </button>
+        </form>
+
+        <div className="space-y-4 min-w-0">
+          {sim.isError && (
+            <div className="rounded-md border border-red-200 bg-red-50 p-4 text-red-800 text-sm">
+              {String((sim.error as Error)?.message ?? sim.error)}
+            </div>
+          )}
+          {!sim.data && !sim.isPending && !sim.isError && (
+            <div className="rounded-lg border border-slate-200 bg-white p-12 text-center text-slate-500">
+              Set parameters on the left and run a simulation.
+            </div>
+          )}
+          {sim.isPending && (
+            <div className="rounded-lg border border-slate-200 bg-white p-12 text-center text-slate-500">
+              Running Monte Carlo…
+            </div>
+          )}
+          {sim.data && <Results result={sim.data} horizon={form.horizon_years ?? 60} />}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Results({ result, horizon }: { result: SimulateResult; horizon: number }) {
+  return (
+    <>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <Stat label="Success rate" value={pct(result.success_rate)} accent />
+        <Stat label="Median ending NW" value={gbp(result.p50_ending_gbp)} />
+        <Stat label="P10 ending" value={gbp(result.p10_ending_gbp)} />
+        <Stat label="P90 ending" value={gbp(result.p90_ending_gbp)} />
+        <Stat label="Median lifetime tax" value={gbp(result.median_lifetime_tax_gbp)} />
+        <Stat
+          label="Median years to ruin"
+          value={result.median_years_to_ruin ?? 'never'}
+        />
+        <Stat label="Horizon" value={`${horizon} years`} />
+        <Stat label="Engine time" value={`${result.elapsed_seconds}s`} />
+      </div>
+      <div className="rounded-lg border border-slate-200 bg-white p-5">
+        <h2 className="text-lg font-semibold mb-2">Portfolio fan</h2>
+        <FanChart yearly={result.yearly} height={420} showWithdrawal />
+      </div>
+    </>
+  );
+}
+
+function Stat({
+  label,
+  value,
+  accent,
+}: {
+  label: string;
+  value: string | number;
+  accent?: boolean;
+}) {
+  return (
+    <div className="rounded-md border border-slate-200 bg-white p-3">
+      <div className="text-xs uppercase tracking-wide text-slate-500">{label}</div>
+      <div
+        className={`text-xl font-semibold tabular-nums mt-1 ${
+          accent ? 'text-emerald-700' : ''
+        }`}
+      >
+        {value}
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <label className="block">
+      <span className="text-xs uppercase tracking-wide text-slate-500">{label}</span>
+      <div className="mt-1">{children}</div>
+    </label>
+  );
+}
+
+function Select({
+  value,
+  onChange,
+  options,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  options: string[];
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400"
+    >
+      {options.map((o) => (
+        <option key={o} value={o}>
+          {o}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function NumberInput({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+}) {
+  return (
+    <input
+      type="number"
+      value={value}
+      min={min}
+      max={max}
+      step={step}
+      onChange={(e) => {
+        const n = Number(e.target.value);
+        if (Number.isFinite(n)) onChange(n);
+      }}
+      className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm tabular-nums focus:outline-none focus:ring-2 focus:ring-slate-400"
+    />
+  );
+}