From bf8da4174bdfcc37dbde1af780d2172dccf0932c Mon Sep 17 00:00:00 2001
From: DiyanaDimitrova <diyana.dimitrova.1992@gmail.com>
Date: Thu, 6 Aug 2026 23:12:21 +0300
Subject: [PATCH 1/4] fix(web): stop per-page hydration mismatch from nonce on
 stylesheet links (#274)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React Router seeds its FrameworkContext nonce from `<ServerRouter nonce>` (needed for
the streaming `<script>` chunks), and `<Links>` stamps that nonce on every `<link>` it
renders. The client's `<HydratedRouter>` never receives the nonce — it isn't serialized
into the hydration handoff — so on the client `<Links>` renders the same links WITHOUT a
nonce. The result is a server `nonce="…"` vs client `nonce={undefined}` attribute
mismatch on every page: React warns and leaves that subtree in its server state.

Pass an explicit empty nonce to `<Links>` so server and client both render `nonce=""`
and agree. The stylesheet/icon links never needed a real nonce (CSP is
`style-src 'self' 'unsafe-inline'`); scripts keep their real nonce via `<Scripts>` /
renderToReadableStream, so the CSP script gate is unchanged.

Verified with headless Chrome (CDP console capture): the hydration warning is gone on
/, /contracts, /companies, /authorities and /methodology; scripts still carry the
per-request nonce.
---
 apps/web/app/root.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)
diff --git a/apps/web/app/root.tsx b/apps/web/app/root.tsx
index ba3aa473e..0b983bc35 100644
--- a/apps/web/app/root.tsx
+++ b/apps/web/app/root.tsx
@@ -125,7 +125,23 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta name="twitter:card" content="summary_large_image" />
         {imageUrl && <meta name="twitter:image" content={imageUrl} />}
         <Meta />
-        <Links />
+        {/*
+          Force an empty (but present) nonce on the stylesheet/icon <link>s.
+
+          `<ServerRouter nonce>` seeds React Router's FrameworkContext nonce — needed for the
+          streaming <script> chunks — and <Links> reads that same context nonce and stamps it on
+          every <link> it renders. The client's <HydratedRouter> never receives the nonce (it isn't
+          serialized in the hydration handoff), so <Links> renders the links WITHOUT a nonce on the
+          client. Server `nonce="…"` vs client `nonce={undefined}` is a hydration attribute mismatch
+          on EVERY page (issue #274).
+
+          Passing an explicit non-null nonce here wins over the context nonce (RR only falls back to
+          the context value when the prop is null), so both server and client render `nonce=""` —
+          they match. The links never needed a real nonce anyway: the CSP is `style-src 'self'
+          'unsafe-inline'` (no style nonce), so the value is cosmetic. Scripts keep their real nonce
+          via <Scripts nonce> / renderToReadableStream, so the CSP script gate is unaffected.
+        */}
+        <Links nonce="" />
         {schemaOrg && (
           <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: schemaOrg }} />
         )}

From 7198cadc486312fce9bd2ece43e865cc8c5b12c4 Mon Sep 17 00:00:00 2001
From: DiyanaDimitrova <diyana.dimitrova.1992@gmail.com>
Date: Mon, 10 Aug 2026 14:48:17 +0300
Subject: [PATCH 2/4] fix(web): suppress browser-extension hydration noise on
 <body> (#274)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After the stylesheet-nonce fix, the remaining per-page hydration warning comes from
browser extensions (ColorZilla's `cz-shortcut-listen`, Grammarly's `data-gr-*`, password
managers, …) that inject attributes onto <body> before React hydrates — React then reports
a server≠client attribute mismatch. The app sets no attributes on <body>, so the source is
purely the visitor's extensions.

Add `suppressHydrationWarning` to <body> — React's documented escape hatch for third-party
DOM mutations. It's shallow: it silences mismatches on <body>'s own attributes/text only,
never its children, so a genuine app-level mismatch inside the page still surfaces. This
clears the last of the console noise #274 set out to remove so real mismatches aren't masked.
---
 apps/web/app/root.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/web/app/root.tsx b/apps/web/app/root.tsx
index 0b983bc35..f2fbef078 100644
--- a/apps/web/app/root.tsx
+++ b/apps/web/app/root.tsx
@@ -147,7 +147,16 @@ export function Layout({ children }: { children: React.ReactNode }) {
         )}
         <script src="/assets/accessibility/accessibility.js" defer />
       </head>
-      <body>
+      {/*
+        `suppressHydrationWarning` on <body>: browser extensions (ColorZilla → `cz-shortcut-listen`,
+        Grammarly → `data-gr-*`, password managers, etc.) inject attributes onto <body> BEFORE React
+        hydrates, which React then reports as a „server ≠ client" attribute mismatch on every page.
+        The app itself sets no attributes on <body>, so the only source is the visitor's extensions —
+        noise we can't control, and exactly the console clutter #274 set out to clear so real mismatches
+        aren't masked. The flag is SHALLOW (it suppresses mismatches on <body>'s own attributes/text
+        only, never its children), so a genuine app-level mismatch inside the page still surfaces.
+      */}
+      <body suppressHydrationWarning>
         {children}
         <ScrollRestoration nonce={nonce} getKey={scrollKey} />
         <Scripts nonce={nonce} />

From 64edcb348b427b5a1c430e27552ab2ad5425a398 Mon Sep 17 00:00:00 2001
From: DiyanaDimitrova <diyana.dimitrova.1992@gmail.com>
Date: Mon, 10 Aug 2026 16:12:25 +0300
Subject: [PATCH 3/4] test(web): guard the #274 hydration-fix props in root
 Layout

The review's one actionable note was a missing regression test. A faithful SSR test
would need React Router internals (a manifest + data-router state) to reproduce the
server/client FrameworkContext nonce split, which is brittle and couples to RR internals.
Instead, add a focused AST guard over the exported `Layout`: assert `<Links>` carries an
explicit empty `nonce` and `<body>` carries `suppressHydrationWarning`. It fails if either
prop is reverted (verified), catching the exact regression without SSR scaffolding.

Reads root.tsx via Vite's `?raw` import (typed by vite/client) rather than node:fs, since
apps/web test files typecheck under the Workers config which has no Node types.
---
 apps/web/app/root.render.test.ts | 69 ++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 apps/web/app/root.render.test.ts

diff --git a/apps/web/app/root.render.test.ts b/apps/web/app/root.render.test.ts
new file mode 100644
index 000000000..d39d5baab
--- /dev/null
+++ b/apps/web/app/root.render.test.ts
@@ -0,0 +1,69 @@
+// The nonce mismatch is created by ServerRouter's FrameworkContext, but reproducing that
+// server/client split needs Router internals (a manifest and data-router state) rather than the
+// app's rendering harness. Keep this regression test structural: it protects the two exact
+// Layout props that make the server and client markup agree without coupling to those internals.
+import ts from 'typescript';
+import { describe, expect, it } from 'vitest';
+// Read root.tsx as a raw string via Vite's `?raw` import (typed by vite/client) rather than node:fs —
+// apps/web test files are typechecked under the Workers config (tsconfig.cloudflare.json), which has no
+// Node types, so `node:fs`/`node:url` would not resolve.
+import rootRaw from './root.tsx?raw';
+
+const rootSource = ts.createSourceFile(
+  'root.tsx',
+  rootRaw,
+  ts.ScriptTarget.Latest,
+  true,
+  ts.ScriptKind.TSX,
+);
+
+const layout = rootSource.statements.find(
+  (statement): statement is ts.FunctionDeclaration =>
+    ts.isFunctionDeclaration(statement) && statement.name?.text === 'Layout',
+);
+
+function layoutElements(tagName: string): ts.JsxOpeningLikeElement[] {
+  const elements: ts.JsxOpeningLikeElement[] = [];
+  const visit = (node: ts.Node) => {
+    const element = ts.isJsxElement(node)
+      ? node.openingElement
+      : ts.isJsxSelfClosingElement(node)
+        ? node
+        : undefined;
+    if (element?.tagName.getText(rootSource) === tagName) {
+      elements.push(element);
+    }
+    ts.forEachChild(node, visit);
+  };
+  ts.forEachChild(layout!, visit);
+  return elements;
+}
+
+function attribute(element: ts.JsxOpeningLikeElement, name: string): ts.JsxAttribute | undefined {
+  return element.attributes.properties.find(
+    (property): property is ts.JsxAttribute =>
+      ts.isJsxAttribute(property) && property.name.getText(rootSource) === name,
+  );
+}
+
+describe('root Layout hydration guards', () => {
+  it('passes an explicit empty nonce to Links', () => {
+    const nonce = attribute(layoutElements('Links')[0]!, 'nonce');
+
+    expect(layout).toBeDefined();
+    expect(
+      nonce?.initializer && ts.isStringLiteral(nonce.initializer) && nonce.initializer.text,
+    ).toBe('');
+  });
+
+  it('suppresses hydration warnings on body attributes', () => {
+    const suppressHydrationWarning = attribute(
+      layoutElements('body')[0]!,
+      'suppressHydrationWarning',
+    );
+
+    expect(layout).toBeDefined();
+    expect(suppressHydrationWarning).toBeDefined();
+    expect(suppressHydrationWarning?.initializer).toBeUndefined();
+  });
+});

From 515dba037dab1fe5eec2f50edca37e13df04d9ba Mon Sep 17 00:00:00 2001
From: DiyanaDimitrova <diyana.dimitrova.1992@gmail.com>
Date: Wed, 12 Aug 2026 16:59:47 +0300
Subject: [PATCH 4/4] docs(web): tighten #274 hydration-fix comments + guard
 <body> scope

Address the non-blocking review notes on PR #300:

- root.tsx <Links> comment: only the stylesheet links surface the mismatch (icon
  links are React 19 hoistables matched by href/rel, where nonce isn't compared);
  it's a dev-console warning, not a production defect (prod react-dom does no
  attribute hydration diffing); the RR fallback is `== null` (null/undefined);
  record the origin (react-router 7.18.0, remix-run/react-router#15170) so the
  workaround is removable at a future bump; note the empty nonce flows through the
  whole <Links> subtree (criticalCss <style> / PrefetchPageLinks modulepreloads).
- root.tsx <body> comment: correct "no body attributes" -> "no body attributes
  before hydration" (accessibility.js + SiteHeader mutate it from useEffect), and
  note the flag would mask a pre-hydration body mismatch.
- security.ts: back-reference that <Links nonce=""> relies on style-src keeping
  'self' with no nonce source.
- root.render.test.ts: add a guard that <body> has exactly one attribute
  (suppressHydrationWarning); reorder so toBeDefined() runs before the derefs.

No runtime change. typecheck + lint + @sigma/web 485/485.
---
 apps/web/app/lib/security.ts     |  2 ++
 apps/web/app/root.render.test.ts | 26 +++++++++++++++++++-------
 apps/web/app/root.tsx            | 32 +++++++++++++++++++-------------
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/apps/web/app/lib/security.ts b/apps/web/app/lib/security.ts
index 4ace62ebf..2929058e8 100644
--- a/apps/web/app/lib/security.ts
+++ b/apps/web/app/lib/security.ts
@@ -10,6 +10,8 @@ function csp(scriptSrc: string[]): string {
     // `script-src` is enforced. All static inline styles have been migrated to classes in app.css,
     // shrinking this to a handful of injection-free numeric/colour values; with no HTML-injection
     // sink today, this stays defense-in-depth.
+    // <Links nonce=""> in root.tsx relies on `style-src` retaining 'self' without a nonce source,
+    // so its empty link nonce remains inert.
     "style-src 'self' 'unsafe-inline'",
     "font-src 'self'",
     "img-src 'self' data:",
diff --git a/apps/web/app/root.render.test.ts b/apps/web/app/root.render.test.ts
index d39d5baab..5bc0588d8 100644
--- a/apps/web/app/root.render.test.ts
+++ b/apps/web/app/root.render.test.ts
@@ -48,22 +48,34 @@ function attribute(element: ts.JsxOpeningLikeElement, name: string): ts.JsxAttri
 
 describe('root Layout hydration guards', () => {
   it('passes an explicit empty nonce to Links', () => {
-    const nonce = attribute(layoutElements('Links')[0]!, 'nonce');
-
     expect(layout).toBeDefined();
+    const links = layoutElements('Links');
+    expect(links[0]).toBeDefined();
+    const nonce = attribute(links[0]!, 'nonce');
     expect(
       nonce?.initializer && ts.isStringLiteral(nonce.initializer) && nonce.initializer.text,
     ).toBe('');
   });
 
   it('suppresses hydration warnings on body attributes', () => {
-    const suppressHydrationWarning = attribute(
-      layoutElements('body')[0]!,
-      'suppressHydrationWarning',
-    );
-
     expect(layout).toBeDefined();
+    const bodies = layoutElements('body');
+    expect(bodies[0]).toBeDefined();
+    const suppressHydrationWarning = attribute(bodies[0]!, 'suppressHydrationWarning');
     expect(suppressHydrationWarning).toBeDefined();
     expect(suppressHydrationWarning?.initializer).toBeUndefined();
   });
+
+  it('keeps body hydration suppression scoped to its only attribute', () => {
+    expect(layout).toBeDefined();
+    const bodies = layoutElements('body');
+    expect(bodies[0]).toBeDefined();
+
+    const attributes = bodies[0]!.attributes.properties;
+    expect(attributes).toHaveLength(1);
+    expect(ts.isJsxAttribute(attributes[0]!)).toBe(true);
+    expect((attributes[0]! as ts.JsxAttribute).name.getText(rootSource)).toBe(
+      'suppressHydrationWarning',
+    );
+  });
 });
diff --git a/apps/web/app/root.tsx b/apps/web/app/root.tsx
index f2fbef078..250b7301f 100644
--- a/apps/web/app/root.tsx
+++ b/apps/web/app/root.tsx
@@ -126,20 +126,26 @@ export function Layout({ children }: { children: React.ReactNode }) {
         {imageUrl && <meta name="twitter:image" content={imageUrl} />}
         <Meta />
         {/*
-          Force an empty (but present) nonce on the stylesheet/icon <link>s.
+          Force an empty (but present) nonce throughout <Links>.
 
           `<ServerRouter nonce>` seeds React Router's FrameworkContext nonce — needed for the
           streaming <script> chunks — and <Links> reads that same context nonce and stamps it on
           every <link> it renders. The client's <HydratedRouter> never receives the nonce (it isn't
-          serialized in the hydration handoff), so <Links> renders the links WITHOUT a nonce on the
-          client. Server `nonce="…"` vs client `nonce={undefined}` is a hydration attribute mismatch
-          on EVERY page (issue #274).
+          serialized in the hydration handoff), so <Links> renders without it on the client. Only the
+          stylesheet links surface this mismatch: icon links are React 19 hoistables matched by
+          href/rel, where nonce is not compared. The shell stylesheets make this a development-console
+          warning on every page; production react-dom does no attribute hydration diffing (issue #274).
 
-          Passing an explicit non-null nonce here wins over the context nonce (RR only falls back to
-          the context value when the prop is null), so both server and client render `nonce=""` —
-          they match. The links never needed a real nonce anyway: the CSP is `style-src 'self'
-          'unsafe-inline'` (no style nonce), so the value is cosmetic. Scripts keep their real nonce
-          via <Scripts nonce> / renderToReadableStream, so the CSP script gate is unaffected.
+          Passing an explicit non-null nonce here wins over the context nonce (RR falls back only when
+          the prop is null/undefined), so both server and client render `nonce=""` — they match.
+          This regressed in react-router 7.18.0 (remix-run/react-router#15170, “Use the ServerRouter
+          nonce for nonce-aware SSR components”); before that <Links> did not read the context nonce.
+          Revisit/remove this workaround if a future RR release changes that behaviour.
+
+          The explicit value flows through the whole <Links> subtree, including criticalCss <style> and
+          PrefetchPageLinks modulepreload links. This app uses neither today; if enabled they receive an
+          empty nonce, inert under `style-src 'self' 'unsafe-inline'` but relevant if style-src gains a
+          nonce source. Scripts retain their real nonce via <Scripts nonce> / renderToReadableStream.
         */}
         <Links nonce="" />
         {schemaOrg && (
@@ -151,10 +157,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
         `suppressHydrationWarning` on <body>: browser extensions (ColorZilla → `cz-shortcut-listen`,
         Grammarly → `data-gr-*`, password managers, etc.) inject attributes onto <body> BEFORE React
         hydrates, which React then reports as a „server ≠ client" attribute mismatch on every page.
-        The app itself sets no attributes on <body>, so the only source is the visitor's extensions —
-        noise we can't control, and exactly the console clutter #274 set out to clear so real mismatches
-        aren't masked. The flag is SHALLOW (it suppresses mismatches on <body>'s own attributes/text
-        only, never its children), so a genuine app-level mismatch inside the page still surfaces.
+        The app sets no <body> attributes before hydration: accessibility and overflow changes run in
+        useEffect afterwards. This suppresses extension noise, but would also mask a pre-hydration body
+        attribute mismatch (for example, from an inline script). The flag is SHALLOW: it suppresses
+        only <body>'s own attributes/text, never its children, so page-level mismatches still surface.
       */}
       <body suppressHydrationWarning>
         {children}
