Files
apf_portal/CLAUDE.md
T
Julien Gautier a9b36efb75
CI / scan (pull_request) Successful in 2m34s
CI / commits (pull_request) Successful in 2m43s
CI / check (pull_request) Successful in 2m49s
CI / a11y (pull_request) Successful in 2m36s
CI / perf (pull_request) Successful in 6m37s
feat(portal-admin): skeleton app per ADR-0020
First step of the admin track. Scaffold the second Angular SPA in
the workspace alongside `portal-shell`, with the architectural
decisions from the v1 ADRs already wired so subsequent feature PRs
can drop straight into modules.

What lands:

- App generated via `nx g @nx/angular:application` (with the
  matching e2e project skeleton). Standalone, zoneless-ready,
  prefix `app`, scss component styles, css root stylesheet, no SSR.
- Tags `scope:portal-admin, type:app` so module-boundary lint
  treats `portal-admin` distinctly from `portal-shell` and only
  allows it to depend on `scope:portal-admin` + `scope:shared`
  libs.
- Tailwind v4 wired (`.postcssrc.json` + `@import 'tailwindcss'`),
  class-based dark mode (`@custom-variant dark ...`), brand palette
  imported from `libs/shared/tokens/src/brand-tokens.css` —
  identical visual baseline to portal-shell. ADR-0016 a11y baseline
  applies; ADR-0017 perf budget relaxed to **500 KB gzip initial**
  per ADR-0020 §"Performance budgets".
- i18n configured to mirror portal-shell (per ADR-0019): sourceLocale
  `en`, target `fr`, baseHref `/{locale}/` per locale,
  `@angular/localize/init` polyfill, `localize: ["en", "fr"]` on
  production, `i18nMissingTranslation: "error"` so CI blocks any PR
  that adds a marker without translating it. Seed `messages.fr.xlf`
  carries the four marked strings used by the placeholder page +
  skip-link + route title.
- Skeleton home page at `/` with a placeholder `<h1>`, intro
  paragraph, and a small "Skeleton — coming soon" status chip in
  the brand-accent palette. Marked for i18n.
- Skip-link landmark (WCAG 2.4.1) at the App level, with the same
  styling as portal-shell (component-scoped scss).
- Wildcard catch-all route bounces unknown paths to home, same
  defensive pattern as PR #96 on portal-shell.
- Dev server on port **4300** (vs 4200 for portal-shell) so both
  can run in parallel during cross-app development.
- `serve-static` target without `spa: true` — locale-prefixed
  routing in production will be handled by the reverse proxy (per
  ADR-0019), same as portal-shell since PR #92.

Production build: 62 KB gzip initial per locale (vs the 500 KB
relaxed budget). Both `dist/apps/portal-admin/browser/{en,fr}/`
emitted with the right `<html lang>` and `<base href>`.

Out of scope (each its own follow-up PR):

- Admin app shell (header / sidebar / footer with "Admin" badge).
- OpenTelemetry tracing setup (will register as
  `service.name=portal-admin` per ADR-0012).
- `environment.ts` wiring (per ADR-0018) for the admin's own BFF
  endpoints.
- BFF `AdminModule` + `AdminRoleGuard` + first `/api/admin/me`
  smoke route (per ADR-0020 §"Auth").
- First functional module (CMS / menu / users / audit viewer).

CLAUDE.md picks up the second app in its naming + commands sections.
2026-05-12 01:41:50 +02:00

15 KiB
Raw Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project rules (durable)

These constraints were set by the project lead at kickoff. They apply to every change.

  • Scale & quality bar. Treat this as a large-scale portal for a sizable organization, not a prototype. No bricolage, no exotic stacks. Default to stable, recognized, battle-tested choices. Cutting-edge / "à la pointe" alternatives must always be evaluated alongside the stable option, but are only adopted when the trade-off is captured in an ADR (drivers, risk, exit strategy). Pre-1.0 dependencies and one-maintainer projects are rejected unless an ADR justifies the exception.
  • Security, performance, accessibility. All three are first-class concerns from day one — never bolted on. Architecture, dependency, and feature decisions must explicitly consider their impact on these axes and document the trade-offs.
  • Project name. Currently apf_portal, provisional. Do not hardcode it outside repo/workspace-level metadata so a rename stays a one-line change.
  • Language. All code, identifiers, comments, documentation, commit messages, and PR descriptions are written in English. (Conversation with the project lead happens in French — but artifacts shipped in the repo are English-only.)
  • Commits / PRs. Never add a Co-Authored-By: Claude trailer or a 🤖 Generated with Claude Code footer to commits or PR bodies.
  • Be a peer, not a typist. Challenge requests when a better approach exists; surface trade-offs frankly. Don't silently execute a suboptimal directive — propose, then execute the agreed plan.

Documentation

  • All documentation lives in .md files under docs/, indexed by docs/README.md. The index is maintained automatically whenever a doc is added, renamed, or removed — no need to be asked.
  • Documentation is written proactively whenever it is genuinely useful (architecture, runbooks, onboarding, security/perf/a11y rationales). It is not created for trivial things just to tick a box.
  • The folder notes/ is the project lead's personal scratchpad — git-ignored and not part of project artifacts. Never write project documentation there.

Architectural Decision Records (ADRs)

  • Format: MADR 4.0.0 (https://adr.github.io/, https://github.com/adr/madr). Template at docs/decisions/template.md.
  • Location: flat folder docs/decisions/, indexed by docs/decisions/README.md.
  • Filename convention: NNNN-kebab-title.md with globally sequential 4-digit numbers. Numbers are never reset and never reused — even when an ADR is superseded or deprecated.
  • Categorization: via the tags: array in the MADR frontmatter (e.g. [frontend, security]). The canonical tag vocabulary lives in docs/decisions/README.md; never invent ad-hoc tags inline.
  • Proactivity. Any non-trivial development decision (tool/library choice, framework pattern, security control, perf budget, a11y target, naming convention, deprecation, breaking change) warrants proposing an ADR before implementation. Don't wait to be asked. Update the index in the same change.

Architecture (recorded in ADRs)

The structural, security, observability, and quality choices are recorded as ADRs and summarized below. Any change to these requires updating the corresponding ADR.

  • Workspace: Nx monorepo with the apps preset, managed by pnpm — see ADR-0002.
  • Naming: workspace apf-portal; apps portal-shell (end-user SPA), portal-admin (admin SPA, skeleton in place — see ADR-0020), and portal-bff (backend); libs feature-<name> and shared-<scope> — see ADR-0003.
  • Frontend (portal-shell): Angular at the latest LTS major — standalone APIs, zoneless change detection, Signals, CSR only (no SSR), Vitest, SCSS — see ADR-0004.
  • Backend (portal-bff): NestJS at the latest stable major, mounted on the Express adapter (Fastify adapter swappable later) — see ADR-0005.
  • Persistence: PostgreSQL (latest stable major) via Prisma — see ADR-0006.
  • Sessions: opaque session id in __Host-portal_session, payload in self-hosted Redis (Sentinel HA in prod, single node in dev), tokens encrypted at rest with AES-256-GCM, idle 30 min sliding + absolute 12 h — see ADR-0010.
  • MFA: enforced by Entra ID Conditional Access (org-side policy, P1 licensing required); BFF sanity-checks the amr claim at session creation; @RequireMfa() decorator and freshness-based step-up are designed-in for future sensitive routes (no v1 consumer) — see ADR-0011.
  • Identity: multi-tenant Microsoft Entra ID with B2B invitation for workforce in v1, dual-audience design ready for future External ID activation — see ADR-0008.
  • Authentication flow: OIDC Authorization Code + PKCE via @azure/msal-node, executed entirely on the BFF; SPA never holds tokens; __Host- prefixed cookies, double-submit CSRF, RP-initiated logout — see ADR-0009.
  • Observability: Pino + nestjs-pino for structured JSON logs, OpenTelemetry SDK + auto-instrumentations for traces, W3C Trace Context propagation across SPA → BFF → DB → Redis, nestjs-cls for request-scoped context (trace_id, session_id, user_id_hash, audience), 100 % sampling at the app with tail sampling deferred to the OTel Collector, stdout + OTLP shipping — see ADR-0012.
  • Audit trail: dedicated audit.events schema in the same Postgres instance, append-only by Postgres role grants (audit_writer INSERT, audit_reader SELECT, audit_archiver DELETE older than retention; no UPDATE/TRUNCATE to anyone); 365-day retention default; cross-referenced with app logs via trace_id and actor_id_hash (same salt); blocking writes (no audit ⇒ no action) — see ADR-0013.
  • Downstream API access: unified DownstreamApiClient (@nestjs/axios + cockatiel), per-service DownstreamApiConfig; default auth strategy is OBO via MSAL Node for Entra-protected APIs (downstream-scoped tokens cached in Redis with AES-256-GCM under a dedicated key); fallback strategy is service credential + signed X-User-Assertion JWT (BFF JWKS at /.well-known/jwks.json); per-call audience pre-check; no axios/fetch outside src/downstream/ — see ADR-0014.
  • CI/CD: Gitea Actions (level-2 implementation; will be superseded by a GitLab migration ADR within 6-18 months). Trunk-based with squash-merge, branch protection on main, all CI gates blocking. Thin YAML — orchestration logic lives in package.json scripts (ci:check, ci:scan, ci:commits) and Nx targets, runnable locally. Gates: format / lint / type-check / test / build / audit / secret-scan / commit-lint, plus a11y (per ADR-0016) and future perf. Self-hosted act_runner on-prem. Conventional Commits validated locally (hook) and in CI (defense in depth). Required reviewer count = 0 in v1, raised to ≥1 once a second contributor joins. Signed commits recommended, revisited at GitLab migration — see ADR-0015.
  • Accessibility: WCAG 2.2 AA baseline + targeted AAA on criteria with high impact for APF's user base (1.4.6 Contrast Enhanced, 2.2.3 No Timing, 2.3.3 Animation, 3.1.5 Reading Level, 1.4.8 Visual Presentation, 2.4.9 Link Purpose, 3.3.5 Help). RGAA 4.1 alignment for French audit. UI stack: Angular CDK + TailwindCSS (spartan-ng library deferred until it reaches 1.0.0; v1 components are written in-house in libs/shared/ui/ on Angular CDK, applying the spartan-ng philosophy of headless primitives + utility CSS + copy-paste). User-preferences panel (contrast / text size / motion / spacing / cognitive simplification / reading focus) persisted in session. Tooling: @angular-eslint/template/* lint, @axe-core/playwright e2e (blocking on critical/serious), token-contrast CI check, touch-target check (44×44 min). Manual testing cadence with APF's internal user panel before each major release. Public accessibility statement page at /accessibility and /accessibilite — see ADR-0016.
  • Performance budgets: Core Web Vitals at Google "Good" thresholds (LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1, TBT ≤ 200 ms, TTFB ≤ 800 ms), Lighthouse Performance ≥ 90 on critical routes. Lighthouse CI (@lhci/cli) runs in CI with median-of-3 mitigation, blocking on threshold breach. Angular bundle budgets (type: "error"): initial ≤ 300 KB gzip, lazy chunks ≤ 100 KB gzip. BFF p95/p99 SLOs per endpoint family observed via OTel (advisory in CI, alerting in prod). Weekly scheduled Lighthouse run on prod env. a11y wins over perf when they conflict — see ADR-0017.
  • Environment configuration: SPA per-environment values via Angular environment.ts + fileReplacements at build time (no runtime config-fetch). BFF reads process.env directly with small per-key boot-time validators (no @nestjs/config overhead at this scale). The audit log uses a separate AUDIT_DATABASE_URL connection pool in production (audit_writer-only login, defense in depth) and falls back to the shared pool + SET LOCAL ROLE in dev — see ADR-0018.
  • Internationalisation: @angular/localize in build-time mode, two locales (fr default served at /, en), source locale = English (project English-only rule). Path-based URLs always prefixed (/fr/..., /en/...); / smart-redirects via cookie → Accept-Languagefr. UI strings live in XLIFF (messages.fr.xlf); editorial / CMS content is BFF-served already localised (see admin app). Footer hosts the locale switcher; switching writes a __Host-portal_locale cookie and hard-refreshes — see ADR-0019.
  • Admin application (portal-admin): dedicated Angular SPA alongside portal-shell, sharing the same portal-bff via /api/admin/* routes guarded by an Entra admin role + @RequireMfa({ freshness: 600 }) at entry. Distinct origin / cookie / session from portal-shell (__Host-portal_admin_session). v1 modules: CMS for static pages (multilingual), menu management, user list (read-only), audit log viewer. Bundle budget relaxed to ≤ 500 KB gzip (vs 300 KB for portal-shell); same a11y + dark-mode baseline. Shared UI primitives (Icon, LayoutStateService, brand tokens) graduate to libs/shared/* as both apps need them — see ADR-0020.
  • Local quality gates: Husky + lint-staged + commitlint with Conventional Commits — see ADR-0007.
  • Runtime: Node.js latest LTS major.

Repository status

The Nx workspace is not yet bootstrapped — there is no package.json, no source code, no tests. ADRs 0001 → 0020 cover the structural, security, observability, quality, i18n, and admin-app choices for phase-1, phase-2, and phase-3a. The security baseline ADR is paused awaiting RSSI input on the OWASP ASVS reference level and adjacent frameworks (HDS, GDPR, possibly PCI DSS / NIS 2). The next step is to scaffold the workspace per docs/setup/03-angular-nx-monorepo.md, which has already been rewritten to align with the phase-1 ADRs.

If asked to "build", "test", or "run" anything, first verify whether the workspace exists; if not, the right response is to scaffold it, not to invent commands.

Commands once the workspace exists

App-scoped — <app> is one of portal-shell, portal-admin, portal-bff:

pnpm nx serve <app>      # dev server
pnpm nx build <app>
pnpm nx test <app>       # Vitest, all tests for the app
pnpm nx lint <app>

Run a single test file:

pnpm nx test <app> --testFile=path/to/file.spec.ts

Workspace-wide:

pnpm nx run-many -t lint test build
pnpm nx affected -t lint test build   # only projects affected by current changes
pnpm nx format:check

Environment conventions

  • Never install Angular globally. Use pnpm dlx for one-off CLI invocations and project-local pnpm nx ... for everything else — versions stay pinned per project.
  • Work inside the WSL filesystem (~/dev/...), never under /mnt/c — the latter has severe I/O penalties that break Nx caching and dev-server reload times.
  • pnpm is mandatory (activated via corepack enable); do not introduce npm or yarn lockfiles.
  • Prettier config target: singleQuote: true, semi: true, printWidth: 100.

General Guidelines for working with Nx

  • For navigating/exploring the workspace, invoke the nx-workspace skill first - it has patterns for querying projects, targets, and dependencies
  • When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through nx (i.e. nx run, nx run-many, nx affected) instead of using the underlying tooling directly
  • Prefix nx commands with the workspace's package manager (e.g., pnpm nx build, npm exec nx test) - avoids using globally installed CLI
  • You have access to the Nx MCP server and its tools, use them to help the user
  • For Nx plugin best practices, check node_modules/@nx/<plugin>/PLUGIN.md. Not all plugins have this file - proceed without it if unavailable.
  • NEVER guess CLI flags - always check nx_docs or --help first when unsure

Scaffolding & Generators

  • For scaffolding tasks (creating apps, libs, project structure, setup), ALWAYS invoke the nx-generate skill FIRST before exploring or calling MCP tools

When to use nx_docs

  • USE for: advanced config options, unfamiliar flags, migration guides, plugin configuration, edge cases
  • DON'T USE for: basic generator syntax (nx g @nx/react:app), standard commands, things you already know
  • The nx-generate skill handles generator discovery internally - don't call nx_docs just to look up generator syntax