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/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: '' } };