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