Architect-review remediation: enforce conventions, prod-safe tooling, one form idiom, resilience seams

Acts on the showcase review. Four workstreams; all tests green
(npm run lint, 70 FE tests, ng build, 33 backend tests).

Enforcement + CI:
- eslint.config.mjs bans `any` and enforces layer/context boundaries
  (domain ≠ Angular; herregistratie → registratie → shared, auth → shared);
  `npm run lint` added; ajv 6 scoped to ESLint via nested override.
- .github/workflows/ci.yml: FE lint+check:tokens+test+build, backend dotnet test,
  and an API-client drift check.

One form idiom (the headline finding):
- change-request-form converged onto the wizard pattern — change-request.machine.ts
  (Model/Msg/reduce + value objects) + submit-change-request.ts (Result) + a real
  POST /api/v1/change-requests (server re-validates). Spec + story added; the detail
  page no longer holds an ad-hoc success signal.

Resilience/observability seam:
- api-client.provider.ts: request timeout, X-Correlation-Id, Idempotency-Key for
  writes; comments naming the retry/auth seams.
- Backend logs correlation id + a no-PII submit-audit line; /api/v1 prefix +
  backward-compat note; client regenerated.

Quick wins:
- Dev tooling excluded from prod: scenario.interceptor wired only under isDevMode()
  (?scenario= inert in prod); debug panel @if(isDev) (tree-shaken out).
- src/environments + apiBaseUrl into provideApiClient (angular.json fileReplacements).
- Backend /health + /health/ready.
- Debug view PII-minimised (redactProfile: name/address/DOB redacted, BIG masked).
- IntakePolicyAdapter (removes inline resource in the intake wizard).
- README de-staled; CLAUDE.md gains EN/NL + forms-one-idiom + lint/CI notes.
- Stories: text-input, link, data-row, site-header, site-footer, change-request-form.

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

src/app/app.config.ts

@@ -1,4 +1,4 @@
-import { ApplicationConfig, LOCALE_ID, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { ApplicationConfig, LOCALE_ID, isDevMode, provideBrowserGlobalErrorListeners } from '@angular/core';
 import { provideRouter, withViewTransitions } from '@angular/router';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { registerLocaleData } from '@angular/common';
@@ -14,7 +14,9 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideRouter(routes, withViewTransitions()),
-    provideHttpClient(withInterceptors([scenarioInterceptor])),
+    // Dev-only: the ?scenario= toggle must never reach a production build, where
+    // a query param could otherwise force errors on the live app.
+    provideHttpClient(withInterceptors(isDevMode() ? [scenarioInterceptor] : [])),
     provideApiClient(),
     { provide: LOCALE_ID, useValue: 'nl' },
   ]

src/app/herregistratie/infrastructure/intake-policy.adapter.ts

@@ -0,0 +1,16 @@
+import { Injectable, inject, resource } from '@angular/core';
+import { ApiClient } from '@shared/infrastructure/api-client';
+
+/**
+ * Infrastructure adapter for the intake policy (the scholing threshold config
+ * value). Same shape as every other adapter — a signal `resource` over the
+ * generated typed client — so HTTP lives in exactly one place per concern.
+ */
+@Injectable({ providedIn: 'root' })
+export class IntakePolicyAdapter {
+  private client = inject(ApiClient);
+
+  policyResource() {
+    return resource({ loader: () => this.client.policy() });
+  }
+}

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

@@ -1,4 +1,4 @@
-import { Component, computed, effect, inject, input, resource, untracked } from '@angular/core';
+import { Component, computed, effect, inject, input, untracked } 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';
@@ -22,6 +22,7 @@ import {
 } from '@herregistratie/domain/intake.machine';
 import { submitIntake } from '@herregistratie/application/submit-intake';
 import { ApiClient } from '@shared/infrastructure/api-client';
+import { IntakePolicyAdapter } from '@herregistratie/infrastructure/intake-policy.adapter';
 
 const STORAGE_KEY = 'intake-v3'; // ponytail: bump the suffix if the persisted state shape changes; no migration.
 const JA_NEE = [{ value: 'ja', label: 'Ja' }, { value: 'nee', label: 'Nee' }];
@@ -111,12 +112,12 @@ const JA_NEE = [{ value: 'ja', label: 'Ja' }, { value: 'nee', label: 'Nee' }];
 export class IntakeWizardComponent {
   private profile = inject(BigProfileStore);
   private apiClient = inject(ApiClient);
+  private policy = inject(IntakePolicyAdapter);
   private store = createStore<IntakeState, IntakeMsg>(initial, reduce);
 
-  // Server-owned policy: the scholing threshold is fetched from the backend
-  // (`GET /api/intake/policy`), not hardcoded. The backend stays the authority
-  // and re-validates on submit.
-  private policyRes = resource({ loader: () => this.apiClient.policy() });
+  // Server-owned policy: the scholing threshold is fetched from the backend, not
+  // hardcoded. The backend stays the authority and re-validates on submit.
+  private policyRes = this.policy.policyResource();
 
   /** Optional seed so Storybook / the showcase can mount any state directly. */
   seed = input<IntakeState>(initial);

src/app/registratie/application/submit-change-request.ts

@@ -0,0 +1,22 @@
+import { Result, ok, err } from '@shared/kernel/fp';
+import { Valid } from '@registratie/domain/change-request.machine';
+import { ApiClient } from '@shared/infrastructure/api-client';
+import { problemDetail } from '@shared/infrastructure/api-error';
+
+/**
+ * Command: POST an address change to the backend (`/api/v1/change-requests`),
+ * which re-validates and returns a reference. Same shape as the other submit
+ * commands — a `Result`, never a thrown error — so the form's reduce can branch.
+ */
+export async function submitChangeRequest(client: ApiClient, data: Valid): Promise<Result<string, string>> {
+  try {
+    const res = await client.changeRequests({
+      straat: data.straat,
+      postcode: data.postcode,
+      woonplaats: data.woonplaats,
+    });
+    return ok(res.referentie ?? '');
+  } catch (e) {
+    return err(problemDetail(e, 'Het indienen is niet gelukt. Probeer het later opnieuw.'));
+  }
+}

src/app/registratie/domain/change-request.machine.spec.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { State, reduce, initial } from './change-request.machine';
+
+const editingWith = (draft: Partial<{ straat: string; postcode: string; woonplaats: string }>): State => ({
+  tag: 'Editing',
+  draft: { straat: '', postcode: '', woonplaats: '', ...draft },
+  errors: {},
+});
+
+describe('change-request reduce', () => {
+  it('SetField updates the draft while editing', () => {
+    const s = reduce(initial, { tag: 'SetField', key: 'straat', value: 'Lange Voorhout 9' });
+    expect(s.tag).toBe('Editing');
+    expect((s as Extract<State, { tag: 'Editing' }>).draft.straat).toBe('Lange Voorhout 9');
+  });
+
+  it('Submit with an invalid draft stays Editing and reports field errors', () => {
+    const s = reduce(editingWith({ straat: '', postcode: 'nope' }), { tag: 'Submit' });
+    expect(s.tag).toBe('Editing');
+    const errors = (s as Extract<State, { tag: 'Editing' }>).errors;
+    expect(errors.straat).toBeTruthy();
+    expect(errors.postcode).toBeTruthy();
+  });
+
+  it('Submit with a valid draft moves to Submitting with parsed (normalised) data', () => {
+    const s = reduce(editingWith({ straat: 'Lange Voorhout 9', postcode: '2514ea' }), { tag: 'Submit' });
+    expect(s.tag).toBe('Submitting');
+    expect((s as Extract<State, { tag: 'Submitting' }>).data.postcode).toBe('2514 EA');
+  });
+
+  it('confirms and fails only from Submitting; Retry re-submits a failure', () => {
+    const submitting = reduce(editingWith({ straat: 'A 1', postcode: '2514 EA' }), { tag: 'Submit' });
+    const ok = reduce(submitting, { tag: 'SubmitConfirmed', referentie: 'BIG-2026-1' });
+    expect(ok).toMatchObject({ tag: 'Submitted', referentie: 'BIG-2026-1' });
+
+    const failed = reduce(submitting, { tag: 'SubmitFailed', error: 'boom' });
+    expect(failed).toMatchObject({ tag: 'Failed', error: 'boom' });
+    expect(reduce(failed, { tag: 'Retry' }).tag).toBe('Submitting');
+  });
+
+  it('Reset returns to the initial editing state', () => {
+    const submitting = reduce(editingWith({ straat: 'A 1', postcode: '2514 EA' }), { tag: 'Submit' });
+    expect(reduce(submitting, { tag: 'Reset' })).toEqual(initial);
+  });
+});

src/app/registratie/domain/change-request.machine.ts

@@ -0,0 +1,82 @@
+import { Result, assertNever } from '@shared/kernel/fp';
+import { Postcode, parsePostcode } from '@registratie/domain/value-objects/postcode';
+
+/** What the user is typing (raw, possibly invalid). */
+export interface Draft {
+  straat: string;
+  postcode: string;
+  woonplaats: string;
+}
+
+/** After parsing — postcode is the branded type, so downstream can't get a raw one. */
+export interface Valid {
+  straat: string;
+  postcode: Postcode;
+  woonplaats: string;
+}
+
+export type Errors = Partial<Record<keyof Draft, string>>;
+
+/**
+ * The change-request (adreswijziging) form as one tagged union — the SAME idiom
+ * as the wizards, just single-step. `draft`/`errors` exist only while Editing;
+ * Submitting/Submitted/Failed carry the parsed `Valid`. Illegal states (submitting
+ * an invalid draft, a success screen with errors) are unrepresentable.
+ */
+export type State =
+  | { tag: 'Editing'; draft: Draft; errors: Errors }
+  | { tag: 'Submitting'; data: Valid }
+  | { tag: 'Submitted'; data: Valid; referentie: string }
+  | { tag: 'Failed'; data: Valid; error: string };
+
+export const initial: State = {
+  tag: 'Editing',
+  draft: { straat: '', postcode: '', woonplaats: '' },
+  errors: {},
+};
+
+/** Parse via the value objects; on success hand back a Valid, else per-field errors. */
+function validate(draft: Draft): Result<Errors, Valid> {
+  const straat = draft.straat.trim();
+  const postcode = parsePostcode(draft.postcode);
+  const errors: Errors = {};
+  if (!straat) errors.straat = 'Vul straat en huisnummer in.';
+  if (!postcode.ok) errors.postcode = postcode.error;
+  if (straat && postcode.ok) {
+    return { ok: true, value: { straat, postcode: postcode.value, woonplaats: draft.woonplaats.trim() } };
+  }
+  return { ok: false, error: errors };
+}
+
+export type Msg =
+  | { tag: 'SetField'; key: keyof Draft; value: string }
+  | { tag: 'Submit' }
+  | { tag: 'Retry' }
+  | { tag: 'SubmitConfirmed'; referentie: string }
+  | { tag: 'SubmitFailed'; error: string }
+  | { tag: 'Reset' }
+  | { tag: 'Seed'; state: State }; // mount a specific state (stories/tests)
+
+export function reduce(s: State, m: Msg): State {
+  switch (m.tag) {
+    case 'SetField':
+      return s.tag === 'Editing' ? { ...s, draft: { ...s.draft, [m.key]: m.value } } : s;
+    case 'Submit': {
+      if (s.tag !== 'Editing') return s;
+      const r = validate(s.draft);
+      return r.ok ? { tag: 'Submitting', data: r.value } : { ...s, errors: r.error };
+    }
+    case 'Retry':
+      return s.tag === 'Failed' ? { tag: 'Submitting', data: s.data } : s;
+    case 'SubmitConfirmed':
+      return s.tag === 'Submitting' ? { tag: 'Submitted', data: s.data, referentie: m.referentie } : s;
+    case 'SubmitFailed':
+      return s.tag === 'Submitting' ? { tag: 'Failed', data: s.data, error: m.error } : s;
+    case 'Reset':
+      return initial;
+    case 'Seed':
+      return m.state;
+    default:
+      return assertNever(m);
+  }
+}

src/app/registratie/ui/change-request-form/change-request-form.component.ts

@@ -1,60 +1,93 @@
-import { Component, output, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { Component, computed, inject, input } from '@angular/core';
 import { ButtonComponent } from '@shared/ui/button/button.component';
 import { HeadingComponent } from '@shared/ui/heading/heading.component';
-import { AddressFieldsComponent, AdresValue } from '@registratie/ui/address-fields/address-fields.component';
-import { Postcode, parsePostcode } from '@registratie/domain/value-objects/postcode';
+import { AlertComponent } from '@shared/ui/alert/alert.component';
+import { AddressFieldsComponent, AdresValue, AdresErrors } from '@registratie/ui/address-fields/address-fields.component';
+import { createStore } from '@shared/application/store';
+import { State, Msg, initial, reduce } from '@registratie/domain/change-request.machine';
+import { submitChangeRequest } from '@registratie/application/submit-change-request';
+import { ApiClient } from '@shared/infrastructure/api-client';
 
-/** A submitted change request carries a *parsed* postcode (branded Postcode),
-    not a raw string — downstream code can't receive an unvalidated one. */
-export interface ChangeRequest {
-  street: string;
-  zip: Postcode;
-  city: string;
-}
-
-/** Organism: change-request (adreswijziging) form. Reuses the same form-field
-    molecule + text-input/button atoms as the login form. Field errors come
-    straight from the parser's Result — no parallel "is it valid" flag to drift. */
+/**
+ * Organism: change-request (adreswijziging) form. Uses the SAME idiom as the
+ * wizards — all state in one signal driven by the pure `reduce`
+ * (change-request.machine.ts), submitted via a `submit-*` command returning
+ * `Result`. Renders the shared `<app-address-fields>`; the server re-validates.
+ */
 @Component({
   selector: 'app-change-request-form',
-  imports: [FormsModule, ButtonComponent, HeadingComponent, AddressFieldsComponent],
+  imports: [ButtonComponent, HeadingComponent, AlertComponent, AddressFieldsComponent],
   template: `
-    <app-heading [level]="2">Adreswijziging doorgeven</app-heading>
-    <form (ngSubmit)="onSubmit()" style="max-width:28rem">
-      <app-address-fields
-        idPrefix="cr"
-        [value]="{ straat: street, postcode: zip, woonplaats: city }"
-        [errors]="{ straat: streetError(), postcode: zipError() }"
-        (fieldChange)="onAdres($event)" />
+    @if (state().tag === 'Submitted') {
+      <app-alert type="ok">
+        Uw adreswijziging is ontvangen (referentie {{ referentie() }}). U ontvangt binnen 5 werkdagen bericht.
+      </app-alert>
       <div style="margin-top:1rem">
-        <app-button type="submit" variant="primary">Wijziging indienen</app-button>
+        <app-button variant="secondary" (click)="dispatch({ tag: 'Reset' })">Nieuwe wijziging doorgeven</app-button>
       </div>
-    </form>
+    } @else {
+      <app-heading [level]="2">Adreswijziging doorgeven</app-heading>
+      <form (ngSubmit)="onSubmit()" style="max-width:28rem">
+        <app-address-fields
+          idPrefix="cr"
+          [value]="adres()"
+          [errors]="errors()"
+          (fieldChange)="dispatch({ tag: 'SetField', key: $event.key, value: $event.value })" />
+
+        @if (failedError()) {
+          <div style="margin-top:1rem"><app-alert type="error">Het indienen is niet gelukt: {{ failedError() }}</app-alert></div>
+        }
+
+        <div style="margin-top:1rem">
+          <app-button type="submit" variant="primary" [disabled]="state().tag === 'Submitting'">
+            {{ state().tag === 'Submitting' ? 'Bezig met indienen…' : 'Wijziging indienen' }}
+          </app-button>
+        </div>
+      </form>
+    }
   `,
 })
 export class ChangeRequestFormComponent {
-  street = '';
-  zip = '';
-  city = '';
-  streetError = signal('');
-  zipError = signal('');
-  submitted = output<ChangeRequest>();
+  private apiClient = inject(ApiClient);
+  private store = createStore<State, Msg>(initial, reduce);
 
-  onAdres(e: { key: keyof AdresValue; value: string }) {
-    if (e.key === 'straat') this.street = e.value;
-    else if (e.key === 'postcode') this.zip = e.value;
-    else this.city = e.value;
+  /** Optional seed so Storybook / tests can mount any state directly. */
+  seed = input<State>(initial);
+
+  readonly state = this.store.model;
+  protected dispatch = this.store.dispatch;
+
+  private editing = computed(() => (this.state().tag === 'Editing' ? (this.state() as Extract<State, { tag: 'Editing' }>) : null));
+  protected errors = computed<AdresErrors>(() => this.editing()?.errors ?? {});
+  protected failedError = computed(() => (this.state().tag === 'Failed' ? (this.state() as Extract<State, { tag: 'Failed' }>).error : ''));
+  protected referentie = computed(() => (this.state().tag === 'Submitted' ? (this.state() as Extract<State, { tag: 'Submitted' }>).referentie : ''));
+
+  /** The address shown in the fields — the live draft while editing, the parsed
+      data while submitting/failed (so the user sees what they sent). */
+  protected adres = computed<AdresValue>(() => {
+    const s = this.state();
+    if (s.tag === 'Editing') return s.draft;
+    if (s.tag === 'Submitting' || s.tag === 'Failed') {
+      return { straat: s.data.straat, postcode: s.data.postcode, woonplaats: s.data.woonplaats };
+    }
+    return { straat: '', postcode: '', woonplaats: '' }; // Submitted shows the success alert, not the fields
+  });
+
+  constructor() {
+    queueMicrotask(() => this.dispatch({ tag: 'Seed', state: this.seed() }));
   }
 
   onSubmit() {
-    const street = this.street.trim();
-    this.streetError.set(street ? '' : 'Vul straat en huisnummer in.');
+    this.dispatch({ tag: 'Submit' });
+    this.runIfSubmitting();
+  }
 
-    const postcode = parsePostcode(this.zip);
-    this.zipError.set(postcode.ok ? '' : postcode.error);
-
-    if (!street || !postcode.ok) return;
-    this.submitted.emit({ street, zip: postcode.value, city: this.city.trim() });
+  /** Effect: when we entered Submitting, call the command, then dispatch the outcome. */
+  private async runIfSubmitting() {
+    const s = this.state();
+    if (s.tag !== 'Submitting') return;
+    const r = await submitChangeRequest(this.apiClient, s.data);
+    if (r.ok) this.dispatch({ tag: 'SubmitConfirmed', referentie: r.value });
+    else this.dispatch({ tag: 'SubmitFailed', error: r.error });
   }
 }

src/app/registratie/ui/change-request-form/change-request-form.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { provideHttpClient } from '@angular/common/http';
+import { ChangeRequestFormComponent } from './change-request-form.component';
+import { provideApiClient } from '@shared/infrastructure/api-client.provider';
+import { Postcode } from '@registratie/domain/value-objects/postcode';
+
+const validData = { straat: 'Lange Voorhout 9', postcode: '2514 EA' as Postcode, woonplaats: 'Den Haag' };
+
+const meta: Meta<ChangeRequestFormComponent> = {
+  title: 'Organisms/Change Request Form',
+  component: ChangeRequestFormComponent,
+  // The form injects ApiClient (over HttpClient) for the submit command.
+  decorators: [applicationConfig({ providers: [provideHttpClient(), provideApiClient()] })],
+};
+export default meta;
+type Story = StoryObj<ChangeRequestFormComponent>;
+
+// One render per state of the machine.
+export const Empty: Story = { args: { seed: { tag: 'Editing', draft: { straat: '', postcode: '', woonplaats: '' }, errors: {} } } };
+export const WithErrors: Story = {
+  args: {
+    seed: {
+      tag: 'Editing',
+      draft: { straat: '', postcode: 'nope', woonplaats: '' },
+      errors: { straat: 'Vul straat en huisnummer in.', postcode: 'Voer een geldige postcode in, bijv. 1234 AB.' },
+    },
+  },
+};
+export const Submitting: Story = { args: { seed: { tag: 'Submitting', data: validData } } };
+export const Submitted: Story = { args: { seed: { tag: 'Submitted', data: validData, referentie: 'BIG-2026-123456' } } };
+export const Failed: Story = { args: { seed: { tag: 'Failed', data: validData, error: 'Netwerkfout' } } };

src/app/registratie/ui/registration-detail.page.ts

@@ -1,6 +1,5 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
-import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
 import { ASYNC } from '@shared/ui/async/async.component';
 import { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';
@@ -10,7 +9,7 @@ import { BigProfileStore } from '@registratie/application/big-profile.store';
 @Component({
   selector: 'app-registration-detail-page',
   imports: [
-    PageShellComponent, AlertComponent, SkeletonComponent, ...ASYNC,
+    PageShellComponent, SkeletonComponent, ...ASYNC,
     RegistrationSummaryComponent, ChangeRequestFormComponent,
   ],
   template: `
@@ -25,16 +24,11 @@ import { BigProfileStore } from '@registratie/application/big-profile.store';
       </app-async>
 
       <div style="margin-top:2rem">
-        @if (submitted()) {
-          <app-alert type="ok">Uw adreswijziging is ontvangen. U ontvangt binnen 5 werkdagen bericht.</app-alert>
-        } @else {
-          <app-change-request-form (submitted)="submitted.set(true)" />
-        }
+        <app-change-request-form />
       </div>
     </app-page-shell>
   `,
 })
 export class RegistrationDetailPage {
   protected store = inject(BigProfileStore);
-  submitted = signal(false);
 }

src/app/shared/infrastructure/api-client.provider.ts

@@ -1,31 +1,48 @@
 import { Provider } from '@angular/core';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { firstValueFrom } from 'rxjs';
+import { firstValueFrom, timeout, TimeoutError } from 'rxjs';
 import { ApiClient, ProblemDetails } from './api-client';
+import { environment } from '../../../environments/environment';
+
+/** Single place every API call passes through: the seam for cross-cutting concerns. */
+const REQUEST_TIMEOUT_MS = 10_000;
 
 /**
  * Adapts Angular's HttpClient to the fetch-shaped interface the NSwag-generated
- * client expects, so every API call flows through HttpClient interceptors — the
- * `?scenario=` toggle (scenario.interceptor.ts) and any future auth header. The
- * generated client is the only place HTTP shapes are known; this is the only
- * place it meets Angular's HTTP stack.
+ * client expects, so every API call flows through HttpClient interceptors (the
+ * `?scenario=` toggle) and the cross-cutting concerns below. The generated client
+ * is the only place HTTP shapes are known; this is the only place it meets
+ * Angular's HTTP stack — i.e. the one seam to add:
+ *   - timeout (done — REQUEST_TIMEOUT_MS),
+ *   - correlation id (done — X-Correlation-Id, echoed in backend logs),
+ *   - idempotency key for writes (done — Idempotency-Key; a real retry would thread
+ *     a STABLE key per logical submit so re-sends dedupe; here it's per-attempt),
+ *   - auth: attach `Authorization: Bearer …` here (one line) when real DigiD lands,
+ *   - retry/backoff: wrap the pipe with rxjs `retry({ count, delay })` here.
  */
 function httpClientFetch(http: HttpClient) {
   return {
     async fetch(url: RequestInfo, init?: RequestInit): Promise<Response> {
       const method = (init?.method ?? 'GET').toUpperCase();
-      const headers = (init?.headers ?? {}) as Record<string, string>;
+      const headers: Record<string, string> = {
+        ...((init?.headers ?? {}) as Record<string, string>),
+        'X-Correlation-Id': crypto.randomUUID(),
+      };
+      if (method !== 'GET') headers['Idempotency-Key'] = crypto.randomUUID();
       try {
         const res = await firstValueFrom(
-          http.request(method, url as string, {
-            body: init?.body as string | undefined,
-            headers,
-            observe: 'response',
-            responseType: 'text',
-          }),
+          http
+            .request(method, url as string, {
+              body: init?.body as string | undefined,
+              headers,
+              observe: 'response',
+              responseType: 'text',
+            })
+            .pipe(timeout(REQUEST_TIMEOUT_MS)),
         );
         return new Response(res.body ?? '', { status: res.status || 200 });
       } catch (e) {
+        if (e instanceof TimeoutError) return new Response('', { status: 504 });
         const err = e as HttpErrorResponse;
         const body = typeof err.error === 'string' ? err.error : JSON.stringify(err.error ?? {});
         // ponytail: clamp to a Response-constructible status (an aborted/interceptor
@@ -37,11 +54,12 @@ function httpClientFetch(http: HttpClient) {
   };
 }
 
-/** Provide a root ApiClient that talks through HttpClient (relative `/api` base URL). */
+/** Provide a root ApiClient that talks through HttpClient. Base URL comes from the
+ *  environment (relative '' in dev → proxy; configurable per deployment). */
 export function provideApiClient(): Provider {
   return {
     provide: ApiClient,
-    useFactory: (http: HttpClient) => new ApiClient('', httpClientFetch(http)),
+    useFactory: (http: HttpClient) => new ApiClient(environment.apiBaseUrl, httpClientFetch(http)),
     deps: [HttpClient],
   };
 }

src/app/shared/infrastructure/api-client.ts

@@ -17,11 +17,77 @@ export class ApiClient {
         this.baseUrl = baseUrl ?? "";
     }
 
+    /**
+     * @return OK
+     */
+    health(): Promise<void> {
+        let url_ = this.baseUrl + "/health";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processHealth(_response);
+        });
+    }
+
+    protected processHealth(response: Response): Promise<void> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            return;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<void>(null as any);
+    }
+
+    /**
+     * @return OK
+     */
+    ready(): Promise<void> {
+        let url_ = this.baseUrl + "/health/ready";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processReady(_response);
+        });
+    }
+
+    protected processReady(response: Response): Promise<void> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            return;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<void>(null as any);
+    }
+
     /**
      * @return OK
      */
     dashboardView(): Promise<DashboardViewDto> {
-        let url_ = this.baseUrl + "/api/dashboard-view";
+        let url_ = this.baseUrl + "/api/v1/dashboard-view";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
@@ -57,7 +123,7 @@ export class ApiClient {
      * @return OK
      */
     notes(): Promise<AantekeningDto[]> {
-        let url_ = this.baseUrl + "/api/notes";
+        let url_ = this.baseUrl + "/api/v1/notes";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
@@ -93,7 +159,7 @@ export class ApiClient {
      * @return OK
      */
     address(): Promise<BrpAddressDto> {
-        let url_ = this.baseUrl + "/api/brp/address";
+        let url_ = this.baseUrl + "/api/v1/brp/address";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
@@ -129,7 +195,7 @@ export class ApiClient {
      * @return OK
      */
     diplomas(): Promise<DuoLookupDto> {
-        let url_ = this.baseUrl + "/api/duo/diplomas";
+        let url_ = this.baseUrl + "/api/v1/duo/diplomas";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
@@ -165,7 +231,7 @@ export class ApiClient {
      * @return OK
      */
     policy(): Promise<IntakePolicyDto> {
-        let url_ = this.baseUrl + "/api/intake/policy";
+        let url_ = this.baseUrl + "/api/v1/intake/policy";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
@@ -201,7 +267,7 @@ export class ApiClient {
      * @return OK
      */
     registrations(body: RegistratieRequest): Promise<ReferentieResponse> {
-        let url_ = this.baseUrl + "/api/registrations";
+        let url_ = this.baseUrl + "/api/v1/registrations";
         url_ = url_.replace(/[?&]$/, "");
 
         const content_ = JSON.stringify(body);
@@ -247,7 +313,7 @@ export class ApiClient {
      * @return OK
      */
     herregistraties(body: HerregistratieRequest): Promise<ReferentieResponse> {
-        let url_ = this.baseUrl + "/api/herregistraties";
+        let url_ = this.baseUrl + "/api/v1/herregistraties";
         url_ = url_.replace(/[?&]$/, "");
 
         const content_ = JSON.stringify(body);
@@ -293,7 +359,7 @@ export class ApiClient {
      * @return OK
      */
     intakes(body: IntakeRequest): Promise<ReferentieResponse> {
-        let url_ = this.baseUrl + "/api/intakes";
+        let url_ = this.baseUrl + "/api/v1/intakes";
         url_ = url_.replace(/[?&]$/, "");
 
         const content_ = JSON.stringify(body);
@@ -334,6 +400,52 @@ export class ApiClient {
         }
         return Promise.resolve<ReferentieResponse>(null as any);
     }
+
+    /**
+     * @return OK
+     */
+    changeRequests(body: ChangeRequestRequest): Promise<ReferentieResponse> {
+        let url_ = this.baseUrl + "/api/v1/change-requests";
+        url_ = url_.replace(/[?&]$/, "");
+
+        const content_ = JSON.stringify(body);
+
+        let options_: RequestInit = {
+            body: content_,
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processChangeRequests(_response);
+        });
+    }
+
+    protected processChangeRequests(response: Response): Promise<ReferentieResponse> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ReferentieResponse;
+            return result200;
+            });
+        } else if (status === 422) {
+            return response.text().then((_responseText) => {
+            let result422: any = null;
+            result422 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ProblemDetails;
+            return throwException("Unprocessable Content", status, _responseText, _headers, result422);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<ReferentieResponse>(null as any);
+    }
 }
 
 export interface AantekeningDto {
@@ -353,6 +465,12 @@ export interface BrpAddressDto {
     adres?: AdresDto;
 }
 
+export interface ChangeRequestRequest {
+    straat?: string | undefined;
+    postcode?: string | undefined;
+    woonplaats?: string | undefined;
+}
+
 export interface DashboardViewDto {
     registration?: RegistrationDto;
     person?: PersonDto;

src/app/shared/layout/shell/shell.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, isDevMode } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { SiteHeaderComponent } from '@shared/layout/site-header/site-header.component';
 import { SiteFooterComponent } from '@shared/layout/site-footer/site-footer.component';
@@ -27,7 +27,11 @@ import { DebugStateComponent } from '@shared/ui/debug-state/debug-state.componen
       </main>
       <app-site-footer />
     </div>
-    <app-debug-state />
+    @if (isDev) {
+      <app-debug-state />
+    }
   `,
 })
-export class ShellComponent {}
+export class ShellComponent {
+  protected readonly isDev = isDevMode();
+}

src/app/shared/layout/site-footer/site-footer.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { SiteFooterComponent } from './site-footer.component';
+
+const meta: Meta<SiteFooterComponent> = {
+  title: 'Layout/Site Footer',
+  component: SiteFooterComponent,
+  render: () => ({ template: `<app-site-footer />` }),
+};
+export default meta;
+type Story = StoryObj<SiteFooterComponent>;
+
+export const Default: Story = {};

src/app/shared/layout/site-header/site-header.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { provideRouter } from '@angular/router';
+import { SiteHeaderComponent } from './site-header.component';
+
+const meta: Meta<SiteHeaderComponent> = {
+  title: 'Layout/Site Header',
+  component: SiteHeaderComponent,
+  decorators: [applicationConfig({ providers: [provideRouter([])] })],
+  render: (args) => ({
+    props: args,
+    template: `<app-site-header [subtitle]="subtitle" />`,
+  }),
+  args: { subtitle: 'Mijn omgeving' },
+};
+export default meta;
+type Story = StoryObj<SiteHeaderComponent>;
+
+export const Default: Story = {};

src/app/shared/ui/data-row/data-row.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { DataRowComponent } from './data-row.component';
+
+const meta: Meta<DataRowComponent> = {
+  title: 'Molecules/Data Row',
+  component: DataRowComponent,
+  render: (args) => ({
+    props: args,
+    // Rows live inside an RHC data-summary list (dt/dd); wrap so it renders in context.
+    template: `<dl class="rhc-data-summary"><app-data-row [key]="key" [value]="value" /></dl>`,
+  }),
+  args: { key: 'BIG-nummer', value: '19012345601' },
+};
+export default meta;
+type Story = StoryObj<DataRowComponent>;
+
+export const Default: Story = {};
+export const Empty: Story = { args: { key: 'Tweede naam', value: '' } };

src/app/shared/ui/debug-state/debug-state.component.ts

@@ -3,7 +3,8 @@ import { JsonPipe } from '@angular/common';
 import { SessionStore } from '@auth/application/session.store';
 import { Session } from '@auth/domain/session';
 import { BigProfileStore } from '@registratie/application/big-profile.store';
-import { maskBsn } from './mask';
+import { map } from '@shared/application/remote-data';
+import { maskBsn, redactProfile } from './mask';
 
 /**
  * Dev-only "show the current Model" panel (Elm-debugger style, read-only).
@@ -48,9 +49,11 @@ export class DebugStateComponent {
   // on construction, so we must not instantiate it until the dev asks to look.
   private profileStore?: BigProfileStore;
 
+  // PII is redacted/masked here (see mask.ts): the panel inspects state SHAPE,
+  // never personal data — a deliberate habit for a PII-handling app.
   protected readonly snapshot = computed(() => ({
     session: maskSession(this.session.session()),
-    profile: this.profileStore?.profile(),
+    profile: this.profileStore ? map(this.profileStore.profile(), redactProfile) : undefined,
     decisions: this.profileStore?.decisions(),
     aantekeningen: this.profileStore?.aantekeningen(),
     pendingHerregistratie: this.profileStore?.pendingHerregistratie(),

src/app/shared/ui/debug-state/mask.ts

@@ -1,5 +1,34 @@
+import { BigProfile } from '@registratie/domain/big-profile';
+
+const REDACTED = '‹redacted›';
+
+/** Keep the last `keep` characters, mask the rest. */
+function maskTail(value: string, keep: number): string {
+  if (value.length <= keep) return '*'.repeat(value.length);
+  return '*'.repeat(value.length - keep) + value.slice(-keep);
+}
+
 /** Redact a BSN for the dev state view: keep the last 3 digits, mask the rest. */
 export function maskBsn(bsn: string): string {
-  if (bsn.length <= 3) return '*'.repeat(bsn.length);
-  return '*'.repeat(bsn.length - 3) + bsn.slice(-3);
+  return maskTail(bsn, 3);
+}
+
+/**
+ * Data minimisation for the dev "show the Model" panel: keep the structural /
+ * decision-relevant fields (status, beroep, dates of registration) but redact
+ * direct personal identifiers (name, address, date of birth) and mask the BIG
+ * number. The panel is for inspecting state SHAPE, never for reading PII.
+ */
+export function redactProfile(p: BigProfile): unknown {
+  return {
+    registration: {
+      bigNummer: maskTail(p.registration.bigNummer, 3),
+      naam: REDACTED,
+      beroep: p.registration.beroep,
+      registratiedatum: p.registration.registratiedatum,
+      geboortedatum: REDACTED,
+      status: p.registration.status,
+    },
+    person: { naam: REDACTED, geboortedatum: REDACTED, adres: REDACTED },
+  };
 }

src/app/shared/ui/link/link.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { provideRouter } from '@angular/router';
+import { LinkComponent } from './link.component';
+
+const meta: Meta<LinkComponent> = {
+  title: 'Atoms/Link',
+  component: LinkComponent,
+  decorators: [applicationConfig({ providers: [provideRouter([])] })],
+  render: (args) => ({
+    props: args,
+    template: `<app-link [to]="to">Naar het dashboard</app-link>`,
+  }),
+  args: { to: '/dashboard' },
+};
+export default meta;
+type Story = StoryObj<LinkComponent>;
+
+export const Default: Story = {};

src/app/shared/ui/text-input/text-input.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { TextInputComponent } from './text-input.component';
+
+const meta: Meta<TextInputComponent> = {
+  title: 'Atoms/Text Input',
+  component: TextInputComponent,
+  render: (args) => ({
+    props: args,
+    template: `<app-text-input [type]="type" [placeholder]="placeholder" [invalid]="invalid" [inputId]="inputId" />`,
+  }),
+  args: { inputId: 'demo', placeholder: 'Bijv. 1234 AB' },
+};
+export default meta;
+type Story = StoryObj<TextInputComponent>;
+
+export const Default: Story = {};
+export const Invalid: Story = { args: { invalid: true } };
+export const Password: Story = { args: { type: 'password', placeholder: '' } };

src/environments/environment.prod.ts

@@ -0,0 +1,10 @@
+/**
+ * Production environment. `apiBaseUrl` stays relative ('') for a same-origin /
+ * reverse-proxy deployment; set it to the API origin (e.g. 'https://api.example.nl')
+ * when the SPA and backend are served from different hosts. This is the single
+ * place the deployed API location is configured.
+ */
+export const environment = {
+  production: true,
+  apiBaseUrl: '',
+};

src/environments/environment.ts

@@ -0,0 +1,10 @@
+/**
+ * Default (development) environment. `apiBaseUrl` is empty so requests are
+ * relative to the current origin — in dev the ng-serve proxy forwards /api to the
+ * backend (proxy.conf.json). Swapped for environment.prod.ts in production builds
+ * (angular.json fileReplacements).
+ */
+export const environment = {
+  production: false,
+  apiBaseUrl: '',
+};