fire-planner: Wave 2 chart-first — flex spending, categorised life

events, interactive Visx Gantt + spending-profile chart

Charts are now the primary editor for life events. The Plan-tab body
re-orders to make charts ~80% of viewport real-estate; legacy form
sections are collapsed into a drawer.

Backend:
- alembic 0004: life_event.category enum (essential / discretionary /
  not_spending). Defaults to essential so existing rows keep their
  full spending impact.
- Simulator gains discretionary_outflows + flex_rules params. Tracks
  per-path running ATH, applies the deepest applicable cut to
  discretionary outflows when portfolio drops vs ATH (PLab-style flex
  spending). Cut amount stays in the portfolio (refund pattern).
- New flex_spending module with FlexRule + applicable_cut +
  cuts_per_year (vectorised). Sortable rules; "deepest cut wins" so
  users specify cumulative cuts at each tier.
- New /scenarios/{id}/spending-profile endpoint returning per-year
  base / essential / discretionary / flex_cut / total breakdown.
- SimulateRequest gains flex_rules + life_event.category roundtrip.
- 8 new tests; 246 total pytest pass; mypy + ruff clean.

Frontend (Visx + ECharts):
- Installed @visx/{scale,shape,group,axis,event,responsive,tooltip}
  for native SVG drag interactions.
- New <SpendingProfileChart> — Visx stacked-area of base/essential/
  discretionary with red flex-cut overlay, hover tooltip, click-to-
  scrub-year.
- New <EventGantt> — interactive Visx Gantt:
    * Click empty space → popover create at that year (default
      essential spending event)
    * Click a bar → inline edit popover (name, kind, range, £/y,
      category) with delete button
    * Drag bar middle → moves the whole event (year-resolution snap)
    * Drag bar edges → resizes year_start / year_end
    * All gestures persist via PATCH /life-events/{id}
- New <FlexRulesEditor> — list of {from_ath_pct, cut} tiers, save-on-
  change to scenario.config_json.flex_rules.
- Plan-tab redesign: NW fan dominant top with floating stat badges
  (Year/Age/NW/Δ NW/Spending/Eff. tax) over the chart; spending-
  profile chart middle; Gantt bottom; flex-rules editor; legacy form
  sections in a collapsed <details> drawer.
- Frontend typecheck + 7 vitest tests + production build all clean.

frontend/src/components/EventGantt.tsx

@@ -0,0 +1,622 @@
+/**
+ * Interactive Gantt of life events (Wave 2 chart-first redesign).
+ *
+ * Visualises every life event as a horizontal bar over the scenario
+ * horizon. Bar color encodes spending category. Drag the middle to slide
+ * the whole event. Drag the left/right edge handles to resize. Click an
+ * empty slot to create a new event at that year. Click an existing bar
+ * to edit it inline via a popover. Persists every interaction through
+ * the existing life-events CRUD endpoints (PATCH for moves/resizes,
+ * POST for create, DELETE from the popover).
+ *
+ * Source-of-truth pattern: this chart IS the editor. The list-form
+ * fallback under the drawer remains for bulk edits and accessibility.
+ */
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { ParentSize } from '@visx/responsive';
+import { scaleBand, scaleLinear } from '@visx/scale';
+import { Group } from '@visx/group';
+import { AxisBottom } from '@visx/axis';
+import { localPoint } from '@visx/event';
+
+import {
+  lifeEventsApi,
+  type LifeEvent,
+  type LifeEventCreateBody,
+  type LifeEventPatchBody,
+  type SpendingCategory,
+} from '@/api/client';
+import { gbp } from '@/lib/format';
+import { emojiFor } from '@/lib/milestone';
+
+interface Props {
+  scenarioId: number;
+  events: LifeEvent[];
+  horizonYears: number;
+  height?: number;
+}
+
+const CATEGORY_FILL: Record<SpendingCategory, string> = {
+  essential: 'rgb(16, 185, 129)',     // emerald-500
+  discretionary: 'rgb(245, 158, 11)', // amber-500
+  not_spending: 'rgb(100, 116, 139)', // slate-500
+};
+
+const CATEGORY_BORDER: Record<SpendingCategory, string> = {
+  essential: 'rgb(5, 150, 105)',
+  discretionary: 'rgb(217, 119, 6)',
+  not_spending: 'rgb(71, 85, 105)',
+};
+
+type DragMode = 'move' | 'left' | 'right';
+
+interface DragState {
+  eventId: number;
+  mode: DragMode;
+  startMouseX: number;
+  origYearStart: number;
+  origYearEnd: number;
+}
+
+interface PopoverState {
+  // Either editing an existing event, or creating one at year_start=N
+  kind: 'edit' | 'create';
+  x: number;
+  y: number;
+  event?: LifeEvent;
+  createYear?: number;
+}
+
+export function EventGantt(props: Props) {
+  return (
+    <ParentSize>
+      {({ width }) => (width > 0 ? <Inner {...props} width={width} /> : null)}
+    </ParentSize>
+  );
+}
+
+function Inner({
+  scenarioId,
+  events,
+  horizonYears,
+  width,
+  height = 220,
+}: Props & { width: number }) {
+  const margin = { top: 12, right: 24, bottom: 28, left: 96 };
+  const innerW = Math.max(0, width - margin.left - margin.right);
+  const sortedEvents = useMemo(
+    () => [...events].sort((a, b) => a.year_start - b.year_start || a.id - b.id),
+    [events],
+  );
+  const rowHeight = 22;
+  const minRows = Math.max(sortedEvents.length, 1);
+  const innerH = Math.max(rowHeight * minRows + 32, height - margin.top - margin.bottom);
+
+  const xScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        domain: [0, Math.max(1, horizonYears - 1)],
+        range: [0, innerW],
+      }),
+    [horizonYears, innerW],
+  );
+
+  const yScale = useMemo(
+    () =>
+      scaleBand<number>({
+        domain: sortedEvents.map((e) => e.id),
+        range: [0, rowHeight * sortedEvents.length],
+        padding: 0.2,
+      }),
+    [sortedEvents],
+  );
+
+  const qc = useQueryClient();
+  const invalidate = () =>
+    qc.invalidateQueries({
+      queryKey: ['scenarios', scenarioId, 'life-events'],
+    });
+  const invalidateProfile = () =>
+    qc.invalidateQueries({
+      queryKey: ['spending-profile', scenarioId],
+    });
+
+  const patchMut = useMutation({
+    mutationFn: ({ id, body }: { id: number; body: LifeEventPatchBody }) =>
+      lifeEventsApi.patch(id, body),
+    onSuccess: () => {
+      invalidate();
+      invalidateProfile();
+    },
+  });
+  const createMut = useMutation({
+    mutationFn: (body: LifeEventCreateBody) =>
+      lifeEventsApi.create(scenarioId, body),
+    onSuccess: () => {
+      invalidate();
+      invalidateProfile();
+    },
+  });
+  const deleteMut = useMutation({
+    mutationFn: (id: number) => lifeEventsApi.delete(id),
+    onSuccess: () => {
+      invalidate();
+      invalidateProfile();
+    },
+  });
+
+  // Drag state lives in a ref so mousemove handlers don't re-render.
+  const drag = useRef<DragState | null>(null);
+  // Pixel-level offset applied during drag (without committing).
+  const [dragOffset, setDragOffset] = useState<{ id: number; dx: number; mode: DragMode } | null>(null);
+  const [popover, setPopover] = useState<PopoverState | null>(null);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (!drag.current) return;
+      setDragOffset({
+        id: drag.current.eventId,
+        dx: e.clientX - drag.current.startMouseX,
+        mode: drag.current.mode,
+      });
+    };
+    const onUp = (e: MouseEvent) => {
+      if (!drag.current) return;
+      const dx = e.clientX - drag.current.startMouseX;
+      const dyears = pxToYears(dx, xScale, horizonYears);
+      const { eventId, mode, origYearStart, origYearEnd } = drag.current;
+      drag.current = null;
+      setDragOffset(null);
+      if (Math.abs(dyears) < 1) return;  // sub-year drag = ignore
+      let body: LifeEventPatchBody = {};
+      if (mode === 'move') {
+        const newStart = clamp(origYearStart + dyears, 0, horizonYears - 1);
+        const span = origYearEnd - origYearStart;
+        body = {
+          year_start: newStart,
+          year_end: clamp(newStart + span, newStart, horizonYears - 1),
+        };
+      } else if (mode === 'left') {
+        body = {
+          year_start: clamp(origYearStart + dyears, 0, origYearEnd),
+        };
+      } else if (mode === 'right') {
+        body = {
+          year_end: clamp(origYearEnd + dyears, origYearStart, horizonYears - 1),
+        };
+      }
+      patchMut.mutate({ id: eventId, body });
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [horizonYears, patchMut, xScale]);
+
+  const startDrag = (e: React.MouseEvent, ev: LifeEvent, mode: DragMode) => {
+    e.stopPropagation();
+    const yearEnd = ev.year_end ?? ev.year_start;
+    drag.current = {
+      eventId: ev.id,
+      mode,
+      startMouseX: e.clientX,
+      origYearStart: ev.year_start,
+      origYearEnd: yearEnd,
+    };
+    setDragOffset({ id: ev.id, dx: 0, mode });
+  };
+
+  const onBackgroundClick = (e: React.MouseEvent<SVGRectElement>) => {
+    const point = localPoint(e);
+    if (!point) return;
+    const x = point.x - margin.left;
+    const year = Math.round(xScale.invert(Math.max(0, Math.min(innerW, x))));
+    setPopover({
+      kind: 'create',
+      x: point.x,
+      y: point.y,
+      createYear: year,
+    });
+  };
+
+  const onBarClick = (e: React.MouseEvent, ev: LifeEvent) => {
+    e.stopPropagation();
+    const point = localPoint(e);
+    if (!point) return;
+    setPopover({ kind: 'edit', x: point.x, y: point.y, event: ev });
+  };
+
+  return (
+    <div className="relative">
+      <svg width={width} height={Math.max(height, innerH + margin.top + margin.bottom)}>
+        <Group left={margin.left} top={margin.top}>
+          {/* Faint year gridlines */}
+          {Array.from({ length: horizonYears }).map((_, i) => {
+            const x = xScale(i) ?? 0;
+            return (
+              <line
+                key={i}
+                x1={x}
+                x2={x}
+                y1={0}
+                y2={innerH}
+                stroke={i % 5 === 0 ? '#cbd5e1' : '#e2e8f0'}
+                strokeWidth={1}
+              />
+            );
+          })}
+          {/* Background click capture (must be drawn before bars) */}
+          <rect
+            x={0}
+            y={0}
+            width={innerW}
+            height={innerH}
+            fill="transparent"
+            onClick={onBackgroundClick}
+            style={{ cursor: 'crosshair' }}
+          />
+          {/* Bars */}
+          {sortedEvents.map((ev) => {
+            const yearEnd = ev.year_end ?? ev.year_start;
+            const offsetDx =
+              dragOffset && dragOffset.id === ev.id ? dragOffset.dx : 0;
+            const dyears = pxToYears(offsetDx, xScale, horizonYears);
+            const isMove = dragOffset?.id === ev.id && dragOffset.mode === 'move';
+            const isLeft = dragOffset?.id === ev.id && dragOffset.mode === 'left';
+            const isRight = dragOffset?.id === ev.id && dragOffset.mode === 'right';
+            const startY = isMove
+              ? ev.year_start + dyears
+              : isLeft
+                ? ev.year_start + dyears
+                : ev.year_start;
+            const endY = isMove
+              ? yearEnd + dyears
+              : isRight
+                ? yearEnd + dyears
+                : yearEnd;
+            const x = xScale(Math.max(0, startY)) ?? 0;
+            const w = Math.max(8, (xScale(Math.max(startY + 0.5, endY)) ?? 0) - x);
+            const y = yScale(ev.id) ?? 0;
+            const h = yScale.bandwidth();
+            const fill = CATEGORY_FILL[ev.category] ?? CATEGORY_FILL.essential;
+            const border =
+              CATEGORY_BORDER[ev.category] ?? CATEGORY_BORDER.essential;
+            return (
+              <g
+                key={ev.id}
+                opacity={ev.enabled ? 1 : 0.4}
+                onClick={(e) => onBarClick(e, ev)}
+                style={{ cursor: 'grab' }}
+              >
+                <rect
+                  x={x}
+                  y={y}
+                  width={w}
+                  height={h}
+                  fill={fill}
+                  stroke={border}
+                  strokeWidth={1}
+                  rx={3}
+                  onMouseDown={(e) => startDrag(e, ev, 'move')}
+                />
+                {/* Left handle */}
+                <rect
+                  x={x - 1}
+                  y={y}
+                  width={6}
+                  height={h}
+                  fill="rgba(0,0,0,0.25)"
+                  rx={3}
+                  onMouseDown={(e) => startDrag(e, ev, 'left')}
+                  style={{ cursor: 'ew-resize' }}
+                />
+                {/* Right handle */}
+                <rect
+                  x={x + w - 5}
+                  y={y}
+                  width={6}
+                  height={h}
+                  fill="rgba(0,0,0,0.25)"
+                  rx={3}
+                  onMouseDown={(e) => startDrag(e, ev, 'right')}
+                  style={{ cursor: 'ew-resize' }}
+                />
+                <text
+                  x={x + 6}
+                  y={y + h / 2}
+                  fill="#fff"
+                  fontSize={11}
+                  dominantBaseline="middle"
+                  pointerEvents="none"
+                  style={{ userSelect: 'none' }}
+                >
+                  {emojiFor(ev.kind)} {ev.name}
+                </text>
+              </g>
+            );
+          })}
+          <AxisBottom
+            top={innerH}
+            scale={xScale}
+            numTicks={Math.min(10, horizonYears)}
+            tickFormat={(v) => `y${Math.round(Number(v))}`}
+            tickStroke="#94a3b8"
+            stroke="#94a3b8"
+            tickLabelProps={{ fill: '#64748b', fontSize: 10, textAnchor: 'middle' }}
+          />
+        </Group>
+        {/* Row labels */}
+        <Group left={0} top={margin.top}>
+          {sortedEvents.map((ev) => {
+            const y = (yScale(ev.id) ?? 0) + yScale.bandwidth() / 2;
+            return (
+              <text
+                key={ev.id}
+                x={margin.left - 8}
+                y={y}
+                fill="#475569"
+                fontSize={11}
+                textAnchor="end"
+                dominantBaseline="middle"
+              >
+                {ev.kind}
+              </text>
+            );
+          })}
+        </Group>
+      </svg>
+
+      {sortedEvents.length === 0 && (
+        <div className="absolute top-12 left-0 right-0 text-center text-xs text-slate-500 pointer-events-none">
+          Click anywhere on the timeline to add a life event.
+        </div>
+      )}
+
+      {popover && (
+        <EventPopover
+          state={popover}
+          onClose={() => setPopover(null)}
+          onCreate={(body) => {
+            createMut.mutate(body);
+            setPopover(null);
+          }}
+          onPatch={(id, body) => {
+            patchMut.mutate({ id, body });
+            setPopover(null);
+          }}
+          onDelete={(id) => {
+            deleteMut.mutate(id);
+            setPopover(null);
+          }}
+          horizonYears={horizonYears}
+        />
+      )}
+    </div>
+  );
+}
+
+function pxToYears(
+  px: number,
+  scale: { invert: (n: number) => number },
+  _horizon: number,
+): number {
+  const yearsAtZero = scale.invert(0);
+  const yearsAtPx = scale.invert(px);
+  return Math.round(yearsAtPx - yearsAtZero);
+}
+
+function clamp(n: number, lo: number, hi: number): number {
+  return Math.max(lo, Math.min(hi, n));
+}
+
+interface PopoverProps {
+  state: PopoverState;
+  horizonYears: number;
+  onClose: () => void;
+  onCreate: (body: LifeEventCreateBody) => void;
+  onPatch: (id: number, body: LifeEventPatchBody) => void;
+  onDelete: (id: number) => void;
+}
+
+const KIND_OPTIONS = [
+  'kid_at_home',
+  'kid_born',
+  'kids_leave_home',
+  'mortgage_payoff',
+  'home_purchase',
+  'sabbatical',
+  'inheritance',
+  'travel',
+  'expense_range',
+  'one_time_income',
+];
+
+function EventPopover({
+  state,
+  horizonYears,
+  onClose,
+  onCreate,
+  onPatch,
+  onDelete,
+}: PopoverProps) {
+  const isEdit = state.kind === 'edit' && state.event;
+  const [name, setName] = useState(isEdit ? state.event!.name : '');
+  const [kind, setKind] = useState(isEdit ? state.event!.kind : 'kid_at_home');
+  const [yearStart, setYearStart] = useState(
+    isEdit ? state.event!.year_start : state.createYear ?? 0,
+  );
+  const [yearEnd, setYearEnd] = useState<number | null>(
+    isEdit ? state.event!.year_end : null,
+  );
+  const [delta, setDelta] = useState(
+    isEdit ? Number(state.event!.delta_gbp_per_year) : -10000,
+  );
+  const [category, setCategory] = useState<SpendingCategory>(
+    isEdit ? state.event!.category : 'essential',
+  );
+
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (isEdit) {
+      onPatch(state.event!.id, {
+        name,
+        kind,
+        year_start: yearStart,
+        year_end: yearEnd,
+        delta_gbp_per_year: String(delta),
+        category,
+      });
+    } else {
+      onCreate({
+        kind,
+        name: name || titleize(kind),
+        year_start: yearStart,
+        year_end: yearEnd,
+        delta_gbp_per_year: String(delta),
+        category,
+      });
+    }
+  };
+
+  return (
+    <div
+      className="absolute z-50 rounded-lg border border-slate-200 bg-white shadow-lg p-3 w-72 text-sm"
+      style={{
+        left: Math.min(state.x + 8, window.innerWidth - 290),
+        top: state.y + 8,
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <form onSubmit={submit} className="space-y-2">
+        <div className="flex items-baseline justify-between">
+          <h3 className="font-semibold text-slate-900">
+            {isEdit ? 'Edit event' : `Add event @ y${state.createYear}`}
+          </h3>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-700"
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+        <label className="block text-xs">
+          <span className="uppercase tracking-wide text-slate-500">Name</span>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder={titleize(kind)}
+            className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1 text-sm"
+            autoFocus
+          />
+        </label>
+        <label className="block text-xs">
+          <span className="uppercase tracking-wide text-slate-500">Kind</span>
+          <select
+            value={kind}
+            onChange={(e) => setKind(e.target.value)}
+            className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1 text-sm"
+          >
+            {KIND_OPTIONS.map((k) => (
+              <option key={k} value={k}>
+                {emojiFor(k)} {k}
+              </option>
+            ))}
+          </select>
+        </label>
+        <div className="grid grid-cols-2 gap-2">
+          <label className="block text-xs">
+            <span className="uppercase tracking-wide text-slate-500">Year start</span>
+            <input
+              type="number"
+              min={0}
+              max={horizonYears - 1}
+              value={yearStart}
+              onChange={(e) => setYearStart(clamp(Number(e.target.value), 0, horizonYears - 1))}
+              className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1 text-sm tabular-nums"
+            />
+          </label>
+          <label className="block text-xs">
+            <span className="uppercase tracking-wide text-slate-500">Year end</span>
+            <input
+              type="number"
+              min={yearStart}
+              max={horizonYears - 1}
+              value={yearEnd ?? ''}
+              placeholder="—"
+              onChange={(e) =>
+                setYearEnd(e.target.value === '' ? null : Number(e.target.value))
+              }
+              className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1 text-sm tabular-nums"
+            />
+          </label>
+        </div>
+        <label className="block text-xs">
+          <span className="uppercase tracking-wide text-slate-500">
+            £ per year ({delta < 0 ? 'expense' : 'income'})
+          </span>
+          <input
+            type="number"
+            value={delta}
+            step={1000}
+            onChange={(e) => setDelta(Number(e.target.value))}
+            className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1 text-sm tabular-nums"
+          />
+          <div className="text-xs text-slate-500 mt-0.5">
+            {delta !== 0 && `${delta < 0 ? '−' : '+'}${gbp(Math.abs(delta))}/y`}
+          </div>
+        </label>
+        <fieldset className="text-xs">
+          <legend className="uppercase tracking-wide text-slate-500 mb-1">Category</legend>
+          <div className="flex gap-1">
+            {(['essential', 'discretionary', 'not_spending'] as const).map((c) => (
+              <button
+                key={c}
+                type="button"
+                onClick={() => setCategory(c)}
+                className={[
+                  'flex-1 rounded-md px-2 py-1 text-xs border',
+                  category === c
+                    ? 'border-slate-900 bg-slate-900 text-white'
+                    : 'border-slate-300 text-slate-600 hover:bg-slate-50',
+                ].join(' ')}
+              >
+                {c.replace('_', ' ')}
+              </button>
+            ))}
+          </div>
+        </fieldset>
+        <div className="flex items-center justify-between pt-1">
+          {isEdit && (
+            <button
+              type="button"
+              onClick={() => onDelete(state.event!.id)}
+              className="text-xs text-red-700 hover:underline"
+            >
+              Delete
+            </button>
+          )}
+          <div className="flex-1" />
+          <button
+            type="submit"
+            className="rounded-md bg-slate-900 text-white text-xs font-medium px-3 py-1.5 hover:bg-slate-800"
+          >
+            {isEdit ? 'Save' : 'Create'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+function titleize(kind: string): string {
+  return kind
+    .split('_')
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join(' ');
+}