Add branching intake wizard (derived steps + radio-group atom)

A second wizard demonstrating a BRANCHING flow: the visible steps are derived
from the answers by a pure `visibleSteps` function rather than stored, so
answering "buiten Nederland gewerkt? -> ja" or reporting few hours adds steps
and the progress denominator changes live. Same Elm-style store + RemoteData
patterns as the fixed wizard; answers persist to localStorage.

- intake.machine.ts: IntakeState union + Answers + visibleSteps + pure reduce (+spec)
- intake-wizard organism, intake.page, submit-intake command
- new radio-group atom (ControlValueAccessor) in shared/ui
- /intake route + dashboard link + concepts showcase section
- tighten Aantekening.type to a 'Specialisme' | 'Aantekening' union
- README + ARCHITECTURE updated

Verified live end-to-end (branches add steps 4->5->6, review, submit) with no
console errors; build, unit tests, and Storybook all green.

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

src/app/herregistratie/application/submit-intake.ts

@@ -0,0 +1,14 @@
+import { Result, ok, err } from '@shared/kernel/fp';
+import { ValidIntake } from '../domain/intake.machine';
+
+/**
+ * Command: send the intake questionnaire to the backend. Returns a Result so the
+ * caller branches on success/failure without try/catch. ponytail: faked with a
+ * timer; swap for a real POST when there's an API. The "uren must be > 0" rule
+ * lets the demo show the failure path.
+ */
+export async function submitIntake(data: ValidIntake): Promise<Result<string, void>> {
+  await new Promise((r) => setTimeout(r, 800));
+  if (data.uren === 0) return err('Aanvraag afgewezen: geen gewerkte uren geregistreerd.');
+  return ok(undefined);
+}

src/app/herregistratie/domain/intake.machine.spec.ts

@@ -0,0 +1,106 @@
+import { describe, it, expect } from 'vitest';
+import { ok, err } from '@shared/kernel/fp';
+import {
+  Answers,
+  initial,
+  visibleSteps,
+  currentStep,
+  next,
+  back,
+  submit,
+  resolve,
+  reduce,
+  IntakeState,
+} from './intake.machine';
+
+const answering = (answers: Answers, cursor = 0): IntakeState => ({ tag: 'Answering', answers, cursor, errors: {} });
+
+describe('visibleSteps (the branching)', () => {
+  it('asks only buitenland/uren/punten/review by default', () => {
+    expect(visibleSteps({})).toEqual(['buitenland', 'uren', 'punten', 'review']);
+  });
+
+  it('adds the buitenlandDetails step when worked abroad', () => {
+    expect(visibleSteps({ buitenlandGewerkt: 'ja' })).toContain('buitenlandDetails');
+    expect(visibleSteps({ buitenlandGewerkt: 'nee' })).not.toContain('buitenlandDetails');
+  });
+
+  it('adds the scholing step only when NL-hours are below the threshold', () => {
+    expect(visibleSteps({ uren: '500' })).toContain('scholing');
+    expect(visibleSteps({ uren: '4160' })).not.toContain('scholing');
+  });
+});
+
+describe('navigation', () => {
+  it('Next is a no-op (sets an error) when the current step is invalid', () => {
+    const s = next(initial); // buitenland unanswered
+    expect(s.tag).toBe('Answering');
+    expect((s as any).cursor).toBe(0);
+    expect((s as any).errors.buitenland).toBeTruthy();
+  });
+
+  it('Next advances once the step is valid', () => {
+    const s = next(answering({ buitenlandGewerkt: 'nee' }));
+    expect((s as any).cursor).toBe(1);
+    expect(currentStep(s as any)).toBe('uren');
+  });
+
+  it('keeps the cursor in range when an answer collapses a branch', () => {
+    // Worked abroad, cursor sitting on the extra detail step (index 1)...
+    const collapsed = reduce(answering({ buitenlandGewerkt: 'ja' }, 1), { tag: 'SetAnswer', key: 'buitenlandGewerkt', value: 'nee' });
+    // ...the detail step is gone; cursor must not point past the new shorter list.
+    expect((collapsed as any).cursor).toBeLessThan(visibleSteps((collapsed as any).answers).length);
+  });
+
+  it('Back never goes below the first step', () => {
+    expect(back(initial)).toBe(initial);
+  });
+});
+
+describe('submit', () => {
+  const complete: Answers = { buitenlandGewerkt: 'nee', uren: '4160', punten: '200' };
+
+  it('reaches Submitting ONLY with valid answers', () => {
+    expect(submit(answering({ buitenlandGewerkt: 'nee', uren: '4160', punten: 'x' })).tag).toBe('Answering');
+    const good = submit(answering(complete));
+    expect(good.tag).toBe('Submitting');
+    expect((good as any).data.uren).toBe(4160);
+  });
+
+  it('low hours requires the scholing answer before submit', () => {
+    const noScholing = submit(answering({ buitenlandGewerkt: 'nee', uren: '500', punten: '200' }));
+    expect(noScholing.tag).toBe('Answering'); // scholing step is required, unanswered
+    const withScholing = submit(answering({ buitenlandGewerkt: 'nee', uren: '500', scholingGevolgd: 'ja', punten: '200' }));
+    expect(withScholing.tag).toBe('Submitting');
+    expect((withScholing as any).data.aanvullendeScholing).toBe(true);
+  });
+
+  it('resolve maps Submitting to Submitted / Failed', () => {
+    const submitting = submit(answering(complete));
+    expect(resolve(submitting, ok(undefined)).tag).toBe('Submitted');
+    expect(resolve(submitting, err('boom')).tag).toBe('Failed');
+  });
+});
+
+describe('reduce (message-driven happy path)', () => {
+  it('drives abroad branch end to end', () => {
+    let s: IntakeState = initial;
+    s = reduce(s, { tag: 'SetAnswer', key: 'buitenlandGewerkt', value: 'ja' });
+    s = reduce(s, { tag: 'Next' });
+    expect(currentStep(s as any)).toBe('buitenlandDetails');
+    s = reduce(s, { tag: 'SetAnswer', key: 'land', value: 'België' });
+    s = reduce(s, { tag: 'SetAnswer', key: 'buitenlandseUren', value: '800' });
+    s = reduce(s, { tag: 'Next' });
+    expect(currentStep(s as any)).toBe('uren');
+    s = reduce(s, { tag: 'SetAnswer', key: 'uren', value: '4160' });
+    s = reduce(s, { tag: 'Next' });
+    expect(currentStep(s as any)).toBe('punten');
+    s = reduce(s, { tag: 'SetAnswer', key: 'punten', value: '200' });
+    s = reduce(s, { tag: 'Next' });
+    expect(currentStep(s as any)).toBe('review');
+    s = reduce(s, { tag: 'Submit' });
+    expect(s.tag).toBe('Submitting');
+    s = reduce(s, { tag: 'SubmitConfirmed' });
+    expect(s.tag).toBe('Submitted');
+  });
+});

src/app/herregistratie/domain/intake.machine.ts

@@ -0,0 +1,190 @@
+import { Result, ok, err, assertNever } from '@shared/kernel/fp';
+import { Uren, parseUren } from '@registratie/domain/value-objects/uren';
+
+/**
+ * A BRANCHING wizard. Unlike herregistratie.machine (fixed 2 steps), the set of
+ * steps here is NOT stored — it's *derived* from the answers by `visibleSteps`.
+ * Answer "buiten Nederland gewerkt? → ja" and two extra steps appear; report few
+ * hours and a scholing-question appears. The progress bar's denominator changes
+ * as you type. "Which question comes next" is a pure function, so it's trivial
+ * to test and impossible to get out of sync with the data.
+ */
+
+export type JaNee = 'ja' | 'nee';
+
+/** Every possible question, as a union — never a bare string. */
+export type StepId = 'buitenland' | 'buitenlandDetails' | 'uren' | 'scholing' | 'punten' | 'review';
+
+/** One record carried across every step (and persisted). All optional: the user
+    fills it in gradually, and branches may never ask some fields. */
+export interface Answers {
+  buitenlandGewerkt?: JaNee; // Q1
+  land?: string; // Q1a — only when buitenlandGewerkt === 'ja'
+  buitenlandseUren?: string; // Q1b — only when buitenlandGewerkt === 'ja'
+  uren?: string; // Q2 — uren in NL
+  scholingGevolgd?: JaNee; // Q3 — only when total hours are below the threshold
+  punten?: string; // Q4
+}
+
+/** What we have after the review step parses — guaranteed valid/typed. */
+export interface ValidIntake {
+  werktBuitenland: boolean;
+  land?: string;
+  buitenlandseUren?: Uren;
+  uren: Uren;
+  aanvullendeScholing?: boolean;
+  punten: Uren;
+}
+
+/** Below this many NL-hours we ask whether extra scholing was followed. */
+const LAGE_UREN_DREMPEL = 1000;
+
+function lageUren(a: Answers): boolean {
+  const r = parseUren(a.uren ?? '');
+  return r.ok && r.value < LAGE_UREN_DREMPEL;
+}
+
+/**
+ * THE branching, as one pure function. The step list is recomputed on every
+ * transition, so changing an earlier answer immediately adds/removes later steps.
+ */
+export function visibleSteps(a: Answers): StepId[] {
+  const steps: StepId[] = ['buitenland'];
+  if (a.buitenlandGewerkt === 'ja') steps.push('buitenlandDetails');
+  steps.push('uren');
+  if (lageUren(a)) steps.push('scholing');
+  steps.push('punten', 'review');
+  return steps;
+}
+
+export type IntakeState =
+  | { tag: 'Answering'; answers: Answers; cursor: number; errors: Partial<Record<StepId, string>> }
+  | { tag: 'Submitting'; data: ValidIntake }
+  | { tag: 'Submitted'; data: ValidIntake }
+  | { tag: 'Failed'; data: ValidIntake; error: string };
+
+export const initial: IntakeState = { tag: 'Answering', answers: {}, cursor: 0, errors: {} };
+
+/** Which step the cursor currently points at (clamped to the live step list). */
+export function currentStep(s: Extract<IntakeState, { tag: 'Answering' }>): StepId {
+  const steps = visibleSteps(s.answers);
+  return steps[Math.min(s.cursor, steps.length - 1)];
+}
+
+/** Validate ONE step's fields. Returns the per-field error keyed by StepId. */
+function validateStep(step: StepId, a: Answers): Result<Partial<Record<StepId, string>>, void> {
+  switch (step) {
+    case 'buitenland':
+      return a.buitenlandGewerkt ? ok(undefined) : err({ buitenland: 'Maak een keuze.' });
+    case 'buitenlandDetails': {
+      if (!a.land || a.land.trim() === '') return err({ buitenlandDetails: 'Vul een land in.' });
+      const u = parseUren(a.buitenlandseUren ?? '');
+      return u.ok ? ok(undefined) : err({ buitenlandDetails: u.error });
+    }
+    case 'uren': {
+      const u = parseUren(a.uren ?? '');
+      return u.ok ? ok(undefined) : err({ uren: u.error });
+    }
+    case 'scholing':
+      return a.scholingGevolgd ? ok(undefined) : err({ scholing: 'Maak een keuze.' });
+    case 'punten': {
+      const p = parseUren(a.punten ?? '');
+      return p.ok ? ok(undefined) : err({ punten: p.error });
+    }
+    case 'review':
+      return ok(undefined); // review shows a summary; no own fields
+    default:
+      return assertNever(step);
+  }
+}
+
+/** Parse the whole questionnaire into a ValidIntake (called on submit). */
+function validateAll(a: Answers): Result<Partial<Record<StepId, string>>, ValidIntake> {
+  const errors: Partial<Record<StepId, string>> = {};
+  for (const step of visibleSteps(a)) {
+    const r = validateStep(step, a);
+    if (!r.ok) Object.assign(errors, r.error);
+  }
+  if (Object.keys(errors).length > 0) return err(errors);
+
+  const uren = parseUren(a.uren ?? '');
+  const punten = parseUren(a.punten ?? '');
+  // visibleSteps guaranteed these parse, but keep the compiler happy.
+  if (!uren.ok || !punten.ok) return err(errors);
+
+  const werktBuitenland = a.buitenlandGewerkt === 'ja';
+  const buitenland = parseUren(a.buitenlandseUren ?? '');
+  return ok({
+    werktBuitenland,
+    land: werktBuitenland ? a.land : undefined,
+    buitenlandseUren: werktBuitenland && buitenland.ok ? buitenland.value : undefined,
+    uren: uren.value,
+    aanvullendeScholing: lageUren(a) ? a.scholingGevolgd === 'ja' : undefined,
+    punten: punten.value,
+  });
+}
+
+export function setAnswer(s: IntakeState, key: keyof Answers, value: string): IntakeState {
+  if (s.tag !== 'Answering') return s;
+  const answers = { ...s.answers, [key]: value };
+  // Editing an earlier answer can shrink the step list; clamp the cursor.
+  const cursor = Math.min(s.cursor, visibleSteps(answers).length - 1);
+  return { ...s, answers, cursor };
+}
+
+export function next(s: IntakeState): IntakeState {
+  if (s.tag !== 'Answering') return s;
+  const r = validateStep(currentStep(s), s.answers);
+  if (!r.ok) return { ...s, errors: r.error };
+  const last = visibleSteps(s.answers).length - 1;
+  return { ...s, cursor: Math.min(s.cursor + 1, last), errors: {} };
+}
+
+export function back(s: IntakeState): IntakeState {
+  if (s.tag !== 'Answering' || s.cursor === 0) return s;
+  return { ...s, cursor: s.cursor - 1, errors: {} };
+}
+
+export function submit(s: IntakeState): IntakeState {
+  if (s.tag !== 'Answering') return s;
+  const r = validateAll(s.answers);
+  return r.ok ? { tag: 'Submitting', data: r.value } : { ...s, errors: r.error };
+}
+
+export function resolve(s: IntakeState, r: Result<string, void>): IntakeState {
+  if (s.tag !== 'Submitting') return s;
+  return r.ok ? { tag: 'Submitted', data: s.data } : { tag: 'Failed', data: s.data, error: r.error };
+}
+
+export type IntakeMsg =
+  | { tag: 'SetAnswer'; key: keyof Answers; value: string }
+  | { tag: 'Next' }
+  | { tag: 'Back' }
+  | { tag: 'Submit' }
+  | { tag: 'Retry' }
+  | { tag: 'SubmitConfirmed' }
+  | { tag: 'SubmitFailed'; error: string }
+  | { tag: 'Seed'; state: IntakeState };
+
+export function reduce(s: IntakeState, m: IntakeMsg): IntakeState {
+  switch (m.tag) {
+    case 'SetAnswer':
+      return setAnswer(s, m.key, m.value);
+    case 'Next':
+      return next(s);
+    case 'Back':
+      return back(s);
+    case 'Submit':
+      return submit(s);
+    case 'Retry':
+      return s.tag === 'Failed' ? { tag: 'Submitting', data: s.data } : s;
+    case 'SubmitConfirmed':
+      return s.tag === 'Submitting' ? { tag: 'Submitted', data: s.data } : s;
+    case 'SubmitFailed':
+      return s.tag === 'Submitting' ? { tag: 'Failed', data: s.data, error: m.error } : s;
+    case 'Seed':
+      return m.state;
+    default:
+      return assertNever(m);
+  }
+}

src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts

@@ -0,0 +1,186 @@
+import { Component, computed, effect, inject, input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FormFieldComponent } from '@shared/ui/form-field/form-field.component';
+import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
+import { RadioGroupComponent } from '@shared/ui/radio-group/radio-group.component';
+import { ButtonComponent } from '@shared/ui/button/button.component';
+import { AlertComponent } from '@shared/ui/alert/alert.component';
+import { SpinnerComponent } from '@shared/ui/spinner/spinner.component';
+import { createStore } from '@shared/application/store';
+import { BigProfileStore } from '@registratie/application/big-profile.store';
+import {
+  IntakeState,
+  IntakeMsg,
+  Answers,
+  StepId,
+  initial,
+  reduce,
+  visibleSteps,
+} from '@herregistratie/domain/intake.machine';
+import { submitIntake } from '@herregistratie/application/submit-intake';
+
+const STORAGE_KEY = 'intake-v1'; // ponytail: bump the suffix if the Answers shape changes; no migration.
+const JA_NEE = [{ value: 'ja', label: 'Ja' }, { value: 'nee', label: 'Nee' }];
+
+/** Organism: a BRANCHING intake questionnaire. All state lives in one signal
+    driven by the pure `reduce` (intake.machine.ts). Which step renders is derived
+    from the answers via `visibleSteps`, never stored — so editing an earlier
+    answer immediately changes the remaining steps. Answers are persisted to
+    localStorage so a page reload keeps the user's progress. */
+@Component({
+  selector: 'app-intake-wizard',
+  imports: [FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent, ButtonComponent, AlertComponent, SpinnerComponent],
+  template: `
+    @switch (state().tag) {
+      @case ('Answering') {
+        <p class="rhc-paragraph" style="color:var(--rhc-color-grijs-700)">Stap {{ cursor() + 1 }} van {{ steps().length }}</p>
+        <form (ngSubmit)="onPrimary()" style="max-width:30rem">
+          @switch (step()) {
+            @case ('buitenland') {
+              <app-form-field label="Heeft u de afgelopen 5 jaar buiten Nederland gewerkt?" fieldId="buitenland" [error]="err('buitenland')">
+                <app-radio-group name="buitenland" [options]="jaNee"
+                  [ngModel]="answers().buitenlandGewerkt ?? ''" (ngModelChange)="set('buitenlandGewerkt', $event)" />
+              </app-form-field>
+            }
+            @case ('buitenlandDetails') {
+              <app-form-field label="In welk land?" fieldId="land" [error]="err('buitenlandDetails')">
+                <app-text-input inputId="land" [ngModel]="answers().land ?? ''" (ngModelChange)="set('land', $event)" name="land" placeholder="bijv. België" />
+              </app-form-field>
+              <app-form-field label="Hoeveel uur heeft u daar gewerkt?" fieldId="buitenlandseUren">
+                <app-text-input inputId="buitenlandseUren" [ngModel]="answers().buitenlandseUren ?? ''" (ngModelChange)="set('buitenlandseUren', $event)" name="buitenlandseUren" placeholder="bijv. 800" />
+              </app-form-field>
+            }
+            @case ('uren') {
+              <app-form-field label="Gewerkte uren in Nederland (afgelopen 5 jaar)" fieldId="uren" [error]="err('uren')">
+                <app-text-input inputId="uren" [ngModel]="answers().uren ?? ''" (ngModelChange)="set('uren', $event)" name="uren" placeholder="bijv. 4160" />
+              </app-form-field>
+            }
+            @case ('scholing') {
+              <app-form-field label="U werkte relatief weinig uren. Heeft u aanvullende scholing gevolgd?" fieldId="scholing" [error]="err('scholing')">
+                <app-radio-group name="scholing" [options]="jaNee"
+                  [ngModel]="answers().scholingGevolgd ?? ''" (ngModelChange)="set('scholingGevolgd', $event)" />
+              </app-form-field>
+            }
+            @case ('punten') {
+              <app-form-field label="Behaalde nascholingspunten" fieldId="punten" [error]="err('punten')">
+                <app-text-input inputId="punten" [ngModel]="answers().punten ?? ''" (ngModelChange)="set('punten', $event)" name="punten" placeholder="bijv. 200" />
+              </app-form-field>
+            }
+            @case ('review') {
+              <app-alert type="info">Controleer uw antwoorden en dien de aanvraag in.</app-alert>
+              <dl class="rhc-data-summary rhc-data-summary--row" style="margin:1rem 0">
+                <div><dt>Buiten NL gewerkt</dt><dd>{{ answers().buitenlandGewerkt ?? '—' }}</dd></div>
+                @if (answers().buitenlandGewerkt === 'ja') {
+                  <div><dt>Land</dt><dd>{{ answers().land }}</dd></div>
+                  <div><dt>Buitenlandse uren</dt><dd>{{ answers().buitenlandseUren }}</dd></div>
+                }
+                <div><dt>Uren NL</dt><dd>{{ answers().uren }}</dd></div>
+                @if (steps().includes('scholing')) {
+                  <div><dt>Aanvullende scholing</dt><dd>{{ answers().scholingGevolgd }}</dd></div>
+                }
+                <div><dt>Nascholingspunten</dt><dd>{{ answers().punten }}</dd></div>
+              </dl>
+            }
+          }
+          <div style="display:flex;gap:0.5rem;margin-top:1rem">
+            @if (cursor() > 0) {
+              <app-button type="button" variant="secondary" (click)="dispatch({ tag: 'Back' })">Vorige</app-button>
+            }
+            <app-button type="submit" variant="primary">{{ step() === 'review' ? 'Aanvraag indienen' : 'Volgende' }}</app-button>
+          </div>
+        </form>
+      }
+      @case ('Submitting') {
+        <app-spinner /> <span>Aanvraag wordt verwerkt…</span>
+      }
+      @case ('Submitted') {
+        <app-alert type="ok">Uw aanvraag tot herregistratie is ontvangen.</app-alert>
+        <div style="margin-top:1rem">
+          <app-button variant="secondary" (click)="restart()">Opnieuw beginnen</app-button>
+        </div>
+      }
+      @case ('Failed') {
+        <app-alert type="error">Indienen mislukt: {{ failedError() }}</app-alert>
+        <div style="margin-top:1rem">
+          <app-button variant="secondary" (click)="onRetry()">Opnieuw proberen</app-button>
+        </div>
+      }
+    }
+  `,
+})
+export class IntakeWizardComponent {
+  private profile = inject(BigProfileStore);
+  private store = createStore<IntakeState, IntakeMsg>(initial, reduce);
+
+  /** Optional seed so Storybook / the showcase can mount any state directly. */
+  seed = input<IntakeState>(initial);
+
+  readonly jaNee = JA_NEE;
+  readonly state = this.store.model;
+  readonly dispatch = this.store.dispatch;
+
+  private answering = computed(() => (this.state().tag === 'Answering' ? (this.state() as Extract<IntakeState, { tag: 'Answering' }>) : null));
+  /** Public so the showcase can render the live step list next to the wizard. */
+  readonly steps = computed<StepId[]>(() => visibleSteps(this.answering()?.answers ?? {}));
+  protected cursor = computed(() => this.answering()?.cursor ?? 0);
+  protected answers = computed<Answers>(() => this.answering()?.answers ?? {});
+  protected step = computed<StepId>(() => this.steps()[Math.min(this.cursor(), this.steps().length - 1)]);
+  protected failedError = computed(() => (this.state().tag === 'Failed' ? (this.state() as Extract<IntakeState, { tag: 'Failed' }>).error : ''));
+
+  protected err = (k: StepId) => this.answering()?.errors[k] ?? '';
+  protected set = (key: keyof Answers, value: string) => this.dispatch({ tag: 'SetAnswer', key, value });
+
+  constructor() {
+    // An explicit seed (stories) wins; otherwise resume from localStorage.
+    const seeded = this.seed();
+    queueMicrotask(() => this.dispatch({ tag: 'Seed', state: seeded !== initial ? seeded : (this.restore() ?? initial) }));
+    // Persist only while answering; clear once the flow is done.
+    effect(() => {
+      const s = this.state();
+      if (s.tag === 'Answering') localStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+      else localStorage.removeItem(STORAGE_KEY);
+    });
+  }
+
+  private restore(): IntakeState | null {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    try {
+      return JSON.parse(raw) as IntakeState;
+    } catch {
+      return null; // ponytail: corrupt entry -> start fresh, no migration.
+    }
+  }
+
+  onPrimary() {
+    const s = this.state();
+    if (s.tag !== 'Answering') return;
+    this.dispatch(this.step() === 'review' ? { tag: 'Submit' } : { tag: 'Next' });
+    this.runIfSubmitting();
+  }
+
+  onRetry() {
+    this.dispatch({ tag: 'Retry' });
+    this.runIfSubmitting();
+  }
+
+  restart() {
+    this.dispatch({ tag: 'Seed', state: initial });
+  }
+
+  /** The effect: when we enter Submitting, call the backend, flip the optimistic
+      cross-page flag, then dispatch the outcome (and commit/rollback). */
+  private async runIfSubmitting() {
+    const s = this.state();
+    if (s.tag !== 'Submitting') return;
+    this.profile.beginHerregistratie();
+    const r = await submitIntake(s.data);
+    if (r.ok) {
+      this.dispatch({ tag: 'SubmitConfirmed' });
+      this.profile.confirmHerregistratie();
+    } else {
+      this.dispatch({ tag: 'SubmitFailed', error: r.error });
+      this.profile.rollbackHerregistratie();
+    }
+  }
+}

src/app/herregistratie/ui/intake-wizard/intake-wizard.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { provideHttpClient } from '@angular/common/http';
+import { IntakeWizardComponent } from './intake-wizard.component';
+import { IntakeState, Answers } from '@herregistratie/domain/intake.machine';
+import { Uren } from '@registratie/domain/value-objects/uren';
+
+const validData = { werktBuitenland: false, uren: 4160 as Uren, punten: 200 as Uren };
+
+const meta: Meta<IntakeWizardComponent> = {
+  title: 'Herregistratie/IntakeWizard',
+  component: IntakeWizardComponent,
+  // Injects BigProfileStore (optimistic flag) which creates httpResources.
+  decorators: [applicationConfig({ providers: [provideHttpClient()] })],
+};
+export default meta;
+type Story = StoryObj<IntakeWizardComponent>;
+
+const answering = (answers: Answers, cursor = 0): IntakeState => ({ tag: 'Answering', answers, cursor, errors: {} });
+
+export const Start: Story = { args: { seed: answering({}) } };
+export const AbroadBranch: Story = { args: { seed: answering({ buitenlandGewerkt: 'ja' }, 1) } };
+export const LowHoursScholing: Story = { args: { seed: answering({ buitenlandGewerkt: 'nee', uren: '500' }, 2) } };
+export const Review: Story = { args: { seed: answering({ buitenlandGewerkt: 'nee', uren: '4160', punten: '200' }, 3) } };
+export const Submitting: Story = { args: { seed: { tag: 'Submitting', data: validData } } };
+export const Submitted: Story = { args: { seed: { tag: 'Submitted', data: validData } } };
+export const Failed: Story = { args: { seed: { tag: 'Failed', data: validData, error: 'Netwerkfout' } } };

src/app/herregistratie/ui/intake.page.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
+import { AlertComponent } from '@shared/ui/alert/alert.component';
+import { IntakeWizardComponent } from '@herregistratie/ui/intake-wizard/intake-wizard.component';
+
+/** Page: the branching intake questionnaire. Built entirely from existing
+    building blocks (page shell + alert + the intake-wizard organism). */
+@Component({
+  selector: 'app-intake-page',
+  imports: [PageShellComponent, AlertComponent, IntakeWizardComponent],
+  template: `
+    <app-page-shell heading="Herregistratie — intake" backLink="/dashboard">
+      <app-alert type="info">
+        Een paar vragen bepalen welke gegevens we nodig hebben. Afhankelijk van uw
+        antwoorden verschijnen er extra vragen. Uw antwoorden blijven bewaard als u
+        de pagina herlaadt.
+      </app-alert>
+      <div style="margin-top:1.5rem">
+        <app-intake-wizard />
+      </div>
+    </app-page-shell>
+  `,
+})
+export class IntakePage {}