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/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);
 }