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],
   };
 }