From 1df35e495ffe9b84b4914a6ce7894adc62c0afef Mon Sep 17 00:00:00 2001
From: mforce <cesarinleyva@hotmail.com>
Date: Mon, 14 Sep 2026 18:15:12 +0000
Subject: [PATCH 01/10] feat(api): mint a per-response CSP style nonce

MUI styles through Emotion, which injects a <style> element at runtime.
Under `style-src 'self'` the browser refuses to parse it, so no MUI
styling reaches the screen and nothing reports it.

`BuildContentSecurityPolicy(nonce)` replaces the policy constant and
`GetOrCreateNonce` mints 16 bytes of RandomNumberGenerator output per
request, cached on `HttpContext.Items` so the document and the header
read one value. Nothing else in the policy moves, and the test now pins
the whole string rebuilt from the one token allowed to vary.
---
 src/Cluckwork.Api/Security/SecurityHeaders.cs | 66 ++++++++++++++---
 .../SecurityHeadersTests.cs                   | 71 ++++++++++++++++++-
 2 files changed, 125 insertions(+), 12 deletions(-)

diff --git a/src/Cluckwork.Api/Security/SecurityHeaders.cs b/src/Cluckwork.Api/Security/SecurityHeaders.cs
index b97f4fe5f..4f41a0cc7 100644
--- a/src/Cluckwork.Api/Security/SecurityHeaders.cs
+++ b/src/Cluckwork.Api/Security/SecurityHeaders.cs
@@ -1,12 +1,29 @@
 namespace Cluckwork.Api.Security;
 
-// #144 — a handful of static response headers, hand-rolled rather than pulling
-// in an external security-headers package (the values never vary per request).
-// Applied via Response.OnStarting so they land on EVERY response — API, static
-// files, the SPA fallback, and error responses re-executed by the exception
-// handler — no matter which branch of the pipeline produced it.
+using System.Security.Cryptography;
+
+// #144 — a handful of response headers, hand-rolled rather than pulling in an
+// external security-headers package. Applied via Response.OnStarting so they
+// land on EVERY response — API, static files, the SPA shell, and error
+// responses re-executed by the exception handler — no matter which branch of
+// the pipeline produced it.
+//
+// Every value here is constant except one: #873 gives style-src a per-response
+// nonce, so the policy is BUILT rather than stored. An earlier version of this
+// comment said "the values never vary per request", which is now false.
 public static class SecurityHeaders
 {
+    // 128 bits from a cryptographic RNG. CSP asks only that a nonce be
+    // unguessable; base64 of 16 bytes is 24 characters, short enough to repeat
+    // in a header and in the document without bloating either.
+    public const int NonceByteCount = 16;
+
+    // The <meta> the SPA shell writes the same nonce into, and the only place
+    // web/src/theme/FarmThemeProvider.tsx reads it from.
+    public const string NonceMetaName = "csp-nonce";
+
+    private const string NonceItemKey = "Cluckwork.Csp.Nonce";
+
     // Strict same-origin policy. The SPA loads only same-origin scripts, styles,
     // fonts and images and calls only the same-origin API (/api/v1), so every
     // fetch directive is 'self'; the pre-paint theme script was moved out of
@@ -14,6 +31,17 @@ public static class SecurityHeaders
     // or nonce (#144). frame-ancestors 'none' blocks clickjacking; object-src
     // 'none' and base-uri 'self' close the usual injection escape hatches.
     //
+    // style-src keeps 'self' AND carries a per-response nonce (#873). Both
+    // halves are load-bearing. 'self' admits styles.css and the Inter font CSS,
+    // which are same-origin <link> elements a nonce does not cover. The nonce
+    // admits the <style> elements Emotion injects at runtime for MUI (#674) —
+    // without it the browser drops every one of them, so no `sx`, `styled()` or
+    // `styleOverrides` value reaches the screen, and it fails silently. The
+    // policy stays strict: 'unsafe-inline' was rejected in #873 because it
+    // reopens CSS injection, including attribute-selector exfiltration.
+    // script-src deliberately gains nothing here — scripts are still external
+    // same-origin files, so they need no nonce and must not be given one.
+    //
     // img-src carries `blob:` for one reason (#123): the farm logo is served
     // from an endpoint behind the Authorization header, which an <img src> to
     // /api/v1/account/logo cannot send. The SPA fetches the bytes through the
@@ -28,10 +56,10 @@ public static class SecurityHeaders
     // outright — silently, since a blocked register() only rejects a promise.
     // It stays 'self': a worker may still only be loaded from this origin, so
     // this permits our own shell-caching worker and nothing remote.
-    public const string ContentSecurityPolicy =
+    public static string BuildContentSecurityPolicy(string styleNonce) =>
         "default-src 'self'; " +
         "script-src 'self'; " +
-        "style-src 'self'; " +
+        $"style-src 'self' 'nonce-{styleNonce}'; " +
         "img-src 'self' blob:; " +
         "font-src 'self'; " +
         "connect-src 'self'; " +
@@ -42,14 +70,34 @@ public static class SecurityHeaders
         "form-action 'self'; " +
         "object-src 'none'";
 
+    /// <summary>The style nonce for this response, minted on first ask and reused after.</summary>
+    /// <remarks>
+    /// The SPA shell asks for it while building the document it is about to
+    /// return and the header callback asks for it on the way out, so the header
+    /// and the page carry the same value by construction rather than by two
+    /// independent draws that could disagree. Never logged, and never put where
+    /// a log scope or an exception message would pick it up.
+    /// </remarks>
+    public static string GetOrCreateNonce(HttpContext context)
+    {
+        if (context.Items.TryGetValue(NonceItemKey, out var existing) && existing is string already)
+            return already;
+
+        var nonce = Convert.ToBase64String(RandomNumberGenerator.GetBytes(NonceByteCount));
+        context.Items[NonceItemKey] = nonce;
+        return nonce;
+    }
+
     public static IApplicationBuilder UseSecurityHeaders(this IApplicationBuilder app) =>
         app.Use(async (context, next) =>
         {
             context.Response.OnStarting(static state =>
             {
-                var headers = ((HttpContext)state).Response.Headers;
+                var current = (HttpContext)state;
+                var headers = current.Response.Headers;
                 // Don't clobber a header a downstream handler set deliberately.
-                headers.TryAdd("Content-Security-Policy", ContentSecurityPolicy);
+                headers.TryAdd("Content-Security-Policy",
+                    BuildContentSecurityPolicy(GetOrCreateNonce(current)));
                 headers.TryAdd("X-Content-Type-Options", "nosniff");
                 headers.TryAdd("Referrer-Policy", "no-referrer");
                 // Redundant with frame-ancestors 'none' for modern browsers, kept
diff --git a/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs b/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs
index 6b1eb21ee..e9501717c 100644
--- a/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs
+++ b/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs
@@ -2,6 +2,7 @@ namespace Cluckwork.Api.IntegrationTests;
 
 using System.Collections.Generic;
 using System.Net;
+using System.Text.RegularExpressions;
 using Cluckwork.Api.IntegrationTests.Infrastructure;
 using Cluckwork.Api.Security;
 using Microsoft.AspNetCore.Builder;
@@ -18,6 +19,19 @@ namespace Cluckwork.Api.IntegrationTests;
 [Collection(IntegrationCollection.Name)]
 public sealed class SecurityHeadersTests(CluckworkWebApplicationFactory factory)
 {
+    // #873 — the one token in the policy that changes per response. Pulled out
+    // by pattern rather than by offset so a directive added ahead of style-src
+    // cannot silently shift what this reads.
+    private static readonly Regex StyleNoncePattern =
+        new(@"style-src 'self' 'nonce-(?<nonce>[^']+)'", RegexOptions.Compiled);
+
+    internal static string StyleNonce(string csp)
+    {
+        var match = StyleNoncePattern.Match(csp);
+        Assert.True(match.Success, $"no style-src nonce in the policy: {csp}");
+        return match.Groups["nonce"].Value;
+    }
+
     [Theory]
     [InlineData("/health/live")]              // a normal 200
     [InlineData("/definitely-not-a-route")]   // a 404 — headers come from OnStarting, so still present
@@ -25,13 +39,61 @@ public async Task Every_response_carries_the_security_headers(string path)
     {
         var res = await factory.CreateClient().GetAsync(path);
 
-        Assert.Equal(SecurityHeaders.ContentSecurityPolicy,
-            res.Headers.GetValues("Content-Security-Policy").Single());
+        // The WHOLE policy, not a set of Contains checks: rebuilt from the one
+        // value that is allowed to vary, so any other directive that changed —
+        // added, dropped, reordered, widened — fails here (#873).
+        var csp = res.Headers.GetValues("Content-Security-Policy").Single();
+        Assert.Equal(SecurityHeaders.BuildContentSecurityPolicy(StyleNonce(csp)), csp);
         Assert.Equal("nosniff", res.Headers.GetValues("X-Content-Type-Options").Single());
         Assert.Equal("no-referrer", res.Headers.GetValues("Referrer-Policy").Single());
         Assert.Equal("DENY", res.Headers.GetValues("X-Frame-Options").Single());
     }
 
+    [Fact]
+    public async Task Style_src_keeps_self_and_adds_exactly_one_nonce()
+    {
+        var csp = (await factory.CreateClient().GetAsync("/health/live"))
+            .Headers.GetValues("Content-Security-Policy").Single();
+
+        // #873 — the COMPLETE token set. 'self' has to stay (styles.css and the
+        // Inter font CSS are same-origin links a nonce does not cover) and the
+        // nonce has to be there (MUI's Emotion styles are injected at runtime).
+        // A set assertion is what fails if a later change drops either, or
+        // reaches for 'unsafe-inline' to make a symptom go away.
+        var styleSrc = csp
+            .Split(';', StringSplitOptions.TrimEntries | StringSplitOptions.RemoveEmptyEntries)
+            .Single(d => d.StartsWith("style-src ", StringComparison.Ordinal));
+        var tokens = styleSrc.Split(' ');
+        Assert.Equal(3, tokens.Length);
+        Assert.Equal("style-src", tokens[0]);
+        Assert.Equal("'self'", tokens[1]);
+        Assert.StartsWith("'nonce-", tokens[2], StringComparison.Ordinal);
+
+        // A cryptographic nonce, not a counter or a constant: exactly the
+        // 16 bytes SecurityHeaders says it mints, base64-encoded.
+        Assert.Equal(SecurityHeaders.NonceByteCount,
+            Convert.FromBase64String(StyleNonce(csp)).Length);
+
+        // Nowhere else. script-src taking a nonce would be a far larger
+        // concession than this change makes, and it must not ride along.
+        Assert.Equal(1, csp.Split("'nonce-").Length - 1);
+    }
+
+    [Fact]
+    public async Task Each_response_mints_a_fresh_nonce()
+    {
+        var client = factory.CreateClient();
+
+        var first = StyleNonce((await client.GetAsync("/health/live"))
+            .Headers.GetValues("Content-Security-Policy").Single());
+        var second = StyleNonce((await client.GetAsync("/health/live"))
+            .Headers.GetValues("Content-Security-Policy").Single());
+
+        // A nonce reused across responses is not a nonce: an attacker who reads
+        // one page's value could then author a <style> the next page admits.
+        Assert.NotEqual(first, second);
+    }
+
     [Fact]
     public async Task Csp_blocks_inline_script_and_framing()
     {
@@ -73,8 +135,11 @@ public async Task Csp_allows_blob_images_and_nothing_else_off_origin()
         // Nothing else was loosened alongside it.
         Assert.DoesNotContain("*", csp);
         Assert.DoesNotContain("data:", csp);
-        foreach (var directive in new[] { "default-src", "script-src", "style-src", "font-src", "connect-src" })
+        foreach (var directive in new[] { "default-src", "script-src", "font-src", "connect-src" })
             Assert.Contains($"{directive} 'self';", csp);
+        // style-src is the one that is not a bare 'self' any more (#873); its
+        // exact token set is asserted in Style_src_keeps_self_and_adds_exactly_one_nonce.
+        Assert.Contains("style-src 'self' 'nonce-", csp);
     }
 
     [Fact]

From c752107662085ad3193b6aa43d4312f5376eb9ac Mon Sep 17 00:00:00 2001
From: mforce <cesarinleyva@hotmail.com>
Date: Mon, 14 Sep 2026 18:15:12 +0000
Subject: [PATCH 02/10] feat(api): serve index.html templated with the
 response's nonce

`SpaShell` reads the built index.html once at boot, splits it at
<head>, and answers `/`, `/index.html` and the SPA fallback with a
`<meta name="csp-nonce">` carrying that response's own nonce.

`/index.html` is in that set on purpose: workbox precaches it and the
service worker then answers every navigation from the cached response,
so an untemplated copy there costs MUI its styling on every client that
installed the worker.

The shell emits no ETag and no Last-Modified. A validator derived from
the file would tell a client its cached copy is fresh while the live
header no longer admits that copy's nonce. #141's `no-cache` is
unchanged and hashed /assets/* stay static and immutable.
---
 src/Cluckwork.Api/Hosting/SpaShell.cs         | 125 ++++++++++++++++
 src/Cluckwork.Api/Program.cs                  |  24 +++-
 .../SpaShellTests.cs                          | 133 ++++++++++++++++++
 .../StaticAssetCachingTests.cs                |  18 ++-
 4 files changed, 291 insertions(+), 9 deletions(-)
 create mode 100644 src/Cluckwork.Api/Hosting/SpaShell.cs
 create mode 100644 tests/Cluckwork.Api.IntegrationTests/SpaShellTests.cs

diff --git a/src/Cluckwork.Api/Hosting/SpaShell.cs b/src/Cluckwork.Api/Hosting/SpaShell.cs
new file mode 100644
index 000000000..603b7094a
--- /dev/null
+++ b/src/Cluckwork.Api/Hosting/SpaShell.cs
@@ -0,0 +1,125 @@
+namespace Cluckwork.Api.Hosting;
+
+using System.Text;
+using Cluckwork.Api.Security;
+using Microsoft.Net.Http.Headers;
+
+// #873 — the built SPA's index.html, served as a TEMPLATED response rather than
+// as a static file, because one value in it has to match the response's own
+// Content-Security-Policy header: the style nonce Emotion needs before MUI's
+// runtime styles are allowed to apply (#674).
+//
+// WHY A SPLIT AT BOOT RATHER THAN A REPLACE PER REQUEST. The document never
+// changes while the process lives — it is baked into the image — so the only
+// per-request work is writing two frozen halves around a 24-character value.
+// A per-request read or Replace would re-scan several kilobytes on every
+// navigation for a result that cannot differ.
+//
+// WHY NO ETag AND NO Last-Modified. Every response now carries a different
+// nonce, so a validator derived from the FILE would tell a client its stale
+// copy is still fresh, and that copy names a nonce the new response's header
+// does not admit — MUI would silently lose its styles on exactly the clients
+// that cached best. #141's policy is otherwise unchanged: `no-cache`, never
+// `immutable`, so the update-detection path the PWA relies on (#142) still
+// revalidates on every navigation.
+public sealed class SpaShell
+{
+    // Matched case-insensitively because HTML tag names are, even though Vite
+    // emits a lower-case one and has no reason to stop.
+    private const string HeadOpenTag = "<head>";
+
+    private readonly string _head;
+    private readonly string _tail;
+
+    private SpaShell(string head, string tail)
+    {
+        _head = head;
+        _tail = tail;
+    }
+
+    /// <summary>
+    /// The shell for this environment, or <c>null</c> when there is no built SPA
+    /// to serve — Development, where Vite serves the app, and the test host.
+    /// </summary>
+    public static SpaShell? Load(IWebHostEnvironment environment)
+    {
+        var webRoot = environment.WebRootPath;
+        if (string.IsNullOrEmpty(webRoot))
+            return null;
+
+        var indexPath = Path.Combine(webRoot, "index.html");
+        return File.Exists(indexPath) ? FromDocument(File.ReadAllText(indexPath)) : null;
+    }
+
+    /// <summary>Splits a document around the one place the nonce meta goes.</summary>
+    /// <exception cref="InvalidOperationException">
+    /// The document has no &lt;head&gt;. Thrown at boot, in the serving process
+    /// only (a one-shot verb exits before the HTTP pipeline is built), because
+    /// the alternative is a container that starts, passes its health probe and
+    /// serves an app with no MUI styling at all — the #510 shape: a check that
+    /// belongs at boot must not be deferred into a per-request surprise.
+    /// </exception>
+    public static SpaShell FromDocument(string document)
+    {
+        var head = document.IndexOf(HeadOpenTag, StringComparison.OrdinalIgnoreCase);
+        if (head < 0)
+            throw new InvalidOperationException(
+                "The built SPA's index.html has no <head>, so the CSP nonce (#873) cannot be "
+                + "written into it. Serving it untemplated would drop every MUI style silently.");
+
+        var insertAt = head + HeadOpenTag.Length;
+        return new SpaShell(document[..insertAt], document[insertAt..]);
+    }
+
+    /// <summary>Writes the shell carrying this response's own style nonce.</summary>
+    public Task WriteAsync(HttpContext context)
+    {
+        // The SAME value the security-headers callback will put in the policy:
+        // both go through GetOrCreateNonce, which mints once per request.
+        var nonce = SecurityHeaders.GetOrCreateNonce(context);
+
+        var response = context.Response;
+        response.ContentType = "text/html; charset=utf-8";
+        // Indexer, not TryAdd: this is the deliberate policy #312's default
+        // defers to, exactly as the static-file callback's assignment was.
+        response.Headers[HeaderNames.CacheControl] = StaticAssetCaching.AlwaysRevalidate;
+
+        // The nonce is base64 of this process's own RNG output, so it carries no
+        // character the attribute would have to escape.
+        return response.WriteAsync(
+            $"{_head}<meta name=\"{SecurityHeaders.NonceMetaName}\" content=\"{nonce}\">{_tail}",
+            Encoding.UTF8);
+    }
+}
+
+public static class SpaShellExtensions
+{
+    /// <summary>
+    /// Answers <c>/</c> and <c>/index.html</c> with the templated shell.
+    /// </summary>
+    /// <remarks>
+    /// Registered BEFORE the static-file middleware, which is the whole point:
+    /// left to itself it would serve the untemplated file from wwwroot. Both
+    /// paths matter and neither is redundant. <c>/</c> is what a person opens,
+    /// and it used to be reached through UseDefaultFiles, which this replaces.
+    /// <c>/index.html</c> is what WORKBOX fetches to precache, and the service
+    /// worker then answers every navigation from that cached response (#142) —
+    /// so an untemplated copy there would mean the app loses its MUI styling for
+    /// every client that installed the worker, online and offline alike.
+    /// </remarks>
+    public static IApplicationBuilder UseSpaShell(this IApplicationBuilder app, SpaShell shell) =>
+        app.Use(async (context, next) =>
+        {
+            // Ordinal, mirroring the case-sensitive file lookup this replaces on
+            // Linux: /INDEX.HTML 404s here exactly as it did when the static
+            // middleware owned the path.
+            var path = context.Request.Path.Value;
+            if (path == "/" || string.Equals(path, "/index.html", StringComparison.Ordinal))
+            {
+                await shell.WriteAsync(context);
+                return;
+            }
+
+            await next();
+        });
+}
diff --git a/src/Cluckwork.Api/Program.cs b/src/Cluckwork.Api/Program.cs
index 55c855e63..00cd270fd 100644
--- a/src/Cluckwork.Api/Program.cs
+++ b/src/Cluckwork.Api/Program.cs
@@ -208,7 +208,14 @@
 // public — mounted before auth. API routes and the SPA fallback are wired below.
 // #141 — hashed /assets/* are immutable-forever, index.html revalidates, so a
 // fronting CDN (and browsers) can cache aggressively without serving a stale app.
-app.UseDefaultFiles();
+//
+// #873 — index.html is NOT one of those static assets any more. It carries a
+// per-response CSP nonce, so it is read and split once here and written by
+// SpaShell below; `null` means there is no built SPA (Development, the test
+// host), and everything then behaves exactly as it did before.
+var spaShell = SpaShell.Load(app.Environment);
+if (spaShell is not null)
+    app.UseSpaShell(spaShell);
 app.UseStaticFiles(new StaticFileOptions
 {
     OnPrepareResponse = StaticAssetCaching.ApplyCacheHeaders
@@ -563,12 +570,15 @@
 // index.html. Lowest route priority, so the /api/v1 endpoints and /health above
 // always match first. No-op in dev (no wwwroot) — dev uses the Vite server.
 // #141 — the fallback ALWAYS serves index.html, so it unconditionally emits
-// no-cache (AlwaysRevalidateHeader): a new deploy propagates immediately even
-// through a fronting CDN, and a missing /assets/x can never be pinned immutable.
-app.MapFallbackToFile("index.html", new StaticFileOptions
-{
-    OnPrepareResponse = StaticAssetCaching.AlwaysRevalidateHeader
-});
+// no-cache: a new deploy propagates immediately even through a fronting CDN,
+// and a missing /assets/x can never be pinned immutable.
+if (spaShell is not null)
+    app.MapFallback(spaShell.WriteAsync);
+else
+    app.MapFallbackToFile("index.html", new StaticFileOptions
+    {
+        OnPrepareResponse = StaticAssetCaching.AlwaysRevalidateHeader
+    });
 
 app.Run();
 return 0;
diff --git a/tests/Cluckwork.Api.IntegrationTests/SpaShellTests.cs b/tests/Cluckwork.Api.IntegrationTests/SpaShellTests.cs
new file mode 100644
index 000000000..e24e1398b
--- /dev/null
+++ b/tests/Cluckwork.Api.IntegrationTests/SpaShellTests.cs
@@ -0,0 +1,133 @@
+namespace Cluckwork.Api.IntegrationTests;
+
+using System.Net;
+using System.Text.RegularExpressions;
+using Cluckwork.Api.Hosting;
+using Cluckwork.Api.Security;
+
+// #873 — the SPA's index.html is served as a templated response so the document
+// and its own Content-Security-Policy header name the SAME style nonce. If they
+// ever disagree, MUI's Emotion styles are dropped by the browser and nothing
+// says so: the page renders, the console carries one CSP line, and every test
+// that reads the DOM rather than the rendered result still passes.
+//
+// Reuses StaticCachingFactory (#141), which already writes a throwaway web root:
+// the suite otherwise runs with no wwwroot, because the built SPA only exists in
+// the Docker image.
+public sealed class SpaShellTests(StaticCachingFactory factory)
+    : IClassFixture<StaticCachingFactory>
+{
+    private static readonly Regex NonceMetaPattern =
+        new(@"<meta name=""csp-nonce"" content=""(?<nonce>[^""]*)"">", RegexOptions.Compiled);
+
+    private static string MetaNonce(string html)
+    {
+        var match = NonceMetaPattern.Match(html);
+        Assert.True(match.Success, "the served document carries no csp-nonce meta");
+        return match.Groups["nonce"].Value;
+    }
+
+    private static string? CacheControl(HttpResponseMessage res) =>
+        res.Headers.TryGetValues("Cache-Control", out var v) ? string.Join(", ", v) : null;
+
+    [Theory]
+    [InlineData("/")]                 // what a person opens
+    [InlineData("/index.html")]       // what workbox fetches to precache (#142)
+    [InlineData("/some/spa/route")]   // client-side routing, via the fallback
+    public async Task Served_document_carries_the_same_nonce_as_its_own_header(string path)
+    {
+        var res = await factory.CreateClient().GetAsync(path);
+
+        Assert.Equal(HttpStatusCode.OK, res.StatusCode);
+        Assert.Equal("text/html", res.Content.Headers.ContentType?.MediaType);
+
+        var header = SecurityHeadersTests.StyleNonce(
+            res.Headers.GetValues("Content-Security-Policy").Single());
+        Assert.Equal(header, MetaNonce(await res.Content.ReadAsStringAsync()));
+    }
+
+    [Fact]
+    public async Task Two_requests_get_two_different_nonces()
+    {
+        var client = factory.CreateClient();
+
+        var first = MetaNonce(await client.GetStringAsync("/"));
+        var second = MetaNonce(await client.GetStringAsync("/"));
+
+        // The failure this catches is the cheap implementation: mint once at
+        // boot, hand the same value to every client forever. The page would look
+        // right, the header would match, and the nonce would be worthless.
+        Assert.NotEqual(first, second);
+    }
+
+    [Fact]
+    public async Task The_document_is_otherwise_the_built_file()
+    {
+        var html = await factory.CreateClient().GetStringAsync("/");
+
+        // Templating is an INSERTION, not a rewrite: everything the build emitted
+        // is still there, and the meta sits inside <head> where a parser will
+        // read it before the bundle runs.
+        Assert.Equal(
+            StaticCachingFactory.IndexHtml,
+            NonceMetaPattern.Replace(html, string.Empty));
+        Assert.Contains($"<head><meta name=\"{SecurityHeaders.NonceMetaName}\"", html);
+    }
+
+    [Fact]
+    public async Task The_shell_revalidates_and_carries_no_stale_validator()
+    {
+        var res = await factory.CreateClient().GetAsync("/");
+
+        // #141's policy survives: revalidate, never immutable.
+        Assert.Equal(StaticAssetCaching.AlwaysRevalidate, CacheControl(res));
+        Assert.NotEqual(StaticAssetCaching.ImmutableAsset, CacheControl(res));
+
+        // And no validator, which is new (#873). The static-file middleware used
+        // to emit an ETag and Last-Modified derived from the FILE — both now lie,
+        // because each response's body differs. A client honouring a 304 would
+        // keep a document whose nonce the live header no longer admits, and MUI
+        // would lose its styling on exactly the best-behaved caches.
+        Assert.Null(res.Headers.ETag);
+        Assert.Null(res.Content.Headers.LastModified);
+    }
+
+    [Theory]
+    [InlineData("/api/v1/not-a-real-endpoint")]
+    [InlineData("/health/not-a-real-check")]
+    public async Task Api_and_health_guards_still_outrank_the_shell(string path)
+    {
+        // #266 — an unknown /health/* answered with a 200 text/html shell would
+        // make the container HEALTHCHECK report a dead app healthy, and an
+        // unknown /api/* answered the same way would put a cache header on an
+        // API response (#141). The shell is the lowest-priority route and must
+        // stay that way; these two are the reason it is not a bare catch-all.
+        var res = await factory.CreateClient().GetAsync(path);
+
+        Assert.Equal(HttpStatusCode.NotFound, res.StatusCode);
+        Assert.Equal("application/problem+json", res.Content.Headers.ContentType?.MediaType);
+    }
+
+    [Fact]
+    public async Task Hashed_assets_are_untouched_and_still_immutable()
+    {
+        var res = await factory.CreateClient().GetAsync(StaticCachingFactory.HashedAsset);
+
+        res.EnsureSuccessStatusCode();
+        Assert.Equal(StaticAssetCaching.ImmutableAsset, CacheControl(res));
+        Assert.DoesNotContain("csp-nonce", await res.Content.ReadAsStringAsync());
+    }
+
+    [Fact]
+    public void A_document_with_no_head_is_refused_at_load()
+    {
+        // The boot-time half of the fail-closed posture. An index.html that
+        // cannot be templated would otherwise start, pass /health/ready and
+        // serve an app with no MUI styling — the #510 shape, where a check
+        // deferred past boot becomes an invisible per-request defect.
+        var thrown = Assert.Throws<InvalidOperationException>(
+            () => SpaShell.FromDocument("<!doctype html><body>no head here</body>"));
+
+        Assert.Contains("<head>", thrown.Message, StringComparison.Ordinal);
+    }
+}
diff --git a/tests/Cluckwork.Api.IntegrationTests/StaticAssetCachingTests.cs b/tests/Cluckwork.Api.IntegrationTests/StaticAssetCachingTests.cs
index 2a0b1c80a..6067ed41b 100644
--- a/tests/Cluckwork.Api.IntegrationTests/StaticAssetCachingTests.cs
+++ b/tests/Cluckwork.Api.IntegrationTests/StaticAssetCachingTests.cs
@@ -16,11 +16,25 @@ public sealed class StaticCachingFactory : CluckworkWebApplicationFactory
 
     public const string HashedAsset = "/assets/app-deadbeef.js";
 
+    public const string IndexHtml =
+        """
+        <!doctype html>
+        <html lang="en">
+          <head>
+            <meta charset="UTF-8" />
+            <title>cluckwork</title>
+          </head>
+          <body><div id="root"></div></body>
+        </html>
+        """;
+
     public StaticCachingFactory()
     {
         Directory.CreateDirectory(Path.Combine(_webRoot, "assets"));
-        File.WriteAllText(Path.Combine(_webRoot, "index.html"),
-            "<!doctype html><title>cluckwork</title>");
+        // Shaped like the file Vite actually emits, because #873 templates it:
+        // SpaShell splits on <head>, so a fixture without one would exercise a
+        // document the build can never produce.
+        File.WriteAllText(Path.Combine(_webRoot, "index.html"), IndexHtml);
         File.WriteAllText(Path.Combine(_webRoot, "assets", "app-deadbeef.js"),
             "console.log('hashed bundle');");
         File.WriteAllText(Path.Combine(_webRoot, "favicon.ico"), "icon-bytes");

From 8acebf584fc9c1fbd46311617286acd44f693ec8 Mon Sep 17 00:00:00 2001
From: mforce <cesarinleyva@hotmail.com>
Date: Mon, 14 Sep 2026 18:15:26 +0000
Subject: [PATCH 03/10] feat(web): give Emotion the page nonce

`FarmThemeProvider` reads `<meta name="csp-nonce">` once at module load
and wraps its children in `CacheProvider` with a cache created from that
value. A missing meta yields no nonce, which is Vite's dev document and,
in a production build, the fail-closed outcome.

`@emotion/cache` moves from a transitive of `@emotion/react` to a
declared dependency; the regenerated lock adds one line and pins nothing
new.

The login screen renders one hidden MUI Chip. Emotion injects nothing
until an MUI component renders, so the end-to-end check needs one to
read. It is `.sr-only` and `aria-hidden` because this slice is
groundwork sequenced before every screen slice, and a visible Chip would
make a styling decision #864 owns.
---
 web/package-lock.json                         |  1 +
 web/package.json                              |  1 +
 web/src/routes/Login.tsx                      | 22 ++++++++++
 .../theme/FarmThemeProvider.nonce.test.tsx    | 34 ++++++++++++++++
 web/src/theme/FarmThemeProvider.test.tsx      | 16 ++++++++
 web/src/theme/FarmThemeProvider.tsx           | 40 ++++++++++++++++++-
 6 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 web/src/theme/FarmThemeProvider.nonce.test.tsx

diff --git a/web/package-lock.json b/web/package-lock.json
index bf7537bd5..5304e422b 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,6 +8,7 @@
       "name": "cluckwork-web",
       "version": "0.0.0",
       "dependencies": {
+        "@emotion/cache": "^11.14.0",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@fontsource-variable/inter": "^5.3.0",
diff --git a/web/package.json b/web/package.json
index be82e3294..b7c544eb4 100644
--- a/web/package.json
+++ b/web/package.json
@@ -15,6 +15,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fontsource-variable/inter": "^5.3.0",
diff --git a/web/src/routes/Login.tsx b/web/src/routes/Login.tsx
index 777ce8fd2..d3afeaf34 100644
--- a/web/src/routes/Login.tsx
+++ b/web/src/routes/Login.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import type { FormEvent } from "react";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
 import { useTranslation } from "react-i18next";
+import Chip from "@mui/material/Chip";
 import { useAuth } from "../auth/useAuth";
 import { ApiError } from "../api/client";
 import { BusyButton } from "../components/BusyButton";
@@ -210,6 +211,27 @@ export function Login() {
   return (
     <main className="auth">
       <ThemeToggle className="auth-theme" showLabel={false} iconSize={18} />
+      {/* #873 — the only rendered MUI component in the app today, and it exists
+          to be measured rather than seen. Emotion's injected <style> is what the
+          CSP nonce admits, and Emotion injects nothing until an MUI component
+          renders, so without this the end-to-end check has nothing to read: the
+          spec asserts this element's themed background under the real
+          Production policy, online and offline.
+
+          Hidden from both audiences deliberately. `.sr-only` takes it off screen
+          and `aria-hidden` takes it out of the accessibility tree, because #873
+          is groundwork sequenced BEFORE every screen slice — putting a visible
+          Chip on the login screen would make a product styling decision that
+          #864 owns. The first slice that renders a real MUI component deletes
+          this and points the spec at that component instead. */}
+      <Chip
+        label="MUI"
+        color="primary"
+        size="small"
+        className="sr-only"
+        aria-hidden="true"
+        data-testid="csp-style-probe"
+      />
       <form className="card" onSubmit={onSubmit}>
         <h1>{t("title")}</h1>
         {needsSetup && (
diff --git a/web/src/theme/FarmThemeProvider.nonce.test.tsx b/web/src/theme/FarmThemeProvider.nonce.test.tsx
new file mode 100644
index 000000000..ce6fbf69d
--- /dev/null
+++ b/web/src/theme/FarmThemeProvider.nonce.test.tsx
@@ -0,0 +1,34 @@
+// #873 — the nonce half of FarmThemeProvider, in its own file because the
+// module reads the meta ONCE at import time. `vi.hoisted` is what runs before
+// the import below, so this file proves the real wiring rather than a factory
+// the app does not call. The no-meta direction lives in FarmThemeProvider.test.tsx,
+// which is a separate file for the same reason: two module-load states cannot
+// share one module registry.
+import { describe, expect, it, vi } from "vitest";
+import { render } from "@testing-library/react";
+import Chip from "@mui/material/Chip";
+
+const NONCE = "Y3NwLW5vbmNlLXRlc3QtdmFs";
+
+vi.hoisted(() => {
+  const meta = document.createElement("meta");
+  meta.name = "csp-nonce";
+  meta.content = "Y3NwLW5vbmNlLXRlc3QtdmFs";
+  document.head.appendChild(meta);
+});
+
+import { FarmThemeProvider } from "./FarmThemeProvider";
+
+describe("FarmThemeProvider under a CSP nonce (#873)", () => {
+  it("stamps the page's nonce on every style element Emotion injects", () => {
+    render(<FarmThemeProvider><Chip label="probe" color="primary" /></FarmThemeProvider>);
+
+    // MUI styles through Emotion, and these are the elements the browser drops
+    // under `style-src 'self'` when they carry no nonce — which is the whole
+    // defect #873 fixes. Asserting the tags EXIST first keeps the assertion from
+    // passing vacuously on a render that injected nothing.
+    const styles = [...document.querySelectorAll<HTMLStyleElement>("style[data-emotion]")];
+    expect(styles.length).toBeGreaterThan(0);
+    for (const style of styles) expect(style.getAttribute("nonce")).toBe(NONCE);
+  });
+});
diff --git a/web/src/theme/FarmThemeProvider.test.tsx b/web/src/theme/FarmThemeProvider.test.tsx
index df980f6b9..21ef1c0f4 100644
--- a/web/src/theme/FarmThemeProvider.test.tsx
+++ b/web/src/theme/FarmThemeProvider.test.tsx
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "@testing-library/react";
 import { useTheme } from "@mui/material/styles";
+import Chip from "@mui/material/Chip";
 import { FarmThemeProvider } from "./FarmThemeProvider";
 
 function Probe() {
@@ -28,4 +29,19 @@ describe("FarmThemeProvider (#674)", () => {
     document.documentElement.dataset.theme = "light";
     await waitFor(() => expect(screen.getByRole("status")).toHaveTextContent("light"));
   });
+
+  // #873 — this file carries NO csp-nonce meta, which is the Vite dev server's
+  // document. The cache must then carry no nonce at all rather than an empty or
+  // literal one: `nonce=""` is a value the browser compares against the policy
+  // and rejects, so a fallback here would break dev to look tidy in production.
+  // The meta-present direction is FarmThemeProvider.nonce.test.tsx.
+  it("leaves the nonce off when the document carries no meta", () => {
+    expect(document.querySelector('meta[name="csp-nonce"]')).toBeNull();
+
+    render(<FarmThemeProvider><Chip label="probe" color="primary" /></FarmThemeProvider>);
+
+    const styles = [...document.querySelectorAll<HTMLStyleElement>("style[data-emotion]")];
+    expect(styles.length).toBeGreaterThan(0);
+    for (const style of styles) expect(style.hasAttribute("nonce")).toBe(false);
+  });
 });
diff --git a/web/src/theme/FarmThemeProvider.tsx b/web/src/theme/FarmThemeProvider.tsx
index 134b5a73c..2b2d86c94 100644
--- a/web/src/theme/FarmThemeProvider.tsx
+++ b/web/src/theme/FarmThemeProvider.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import type { ReactNode } from "react";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import type { Shadows, Theme } from "@mui/material/styles";
 import {
@@ -33,6 +35,38 @@ function elevationScale(tokens: TokenValues): Shadows {
   return scale as Shadows;
 }
 
+/**
+ * The page's CSP style nonce, or `undefined` when the document does not carry
+ * one (#873).
+ *
+ * Read ONCE, at module load. The server writes this meta into the same response
+ * whose `Content-Security-Policy` header names the nonce, so the value cannot
+ * change while the document lives and re-reading it would only invite a caller
+ * to believe it can.
+ *
+ * `undefined` is the correct answer, not a degraded one. Vite's dev server
+ * serves index.html untouched and applies no policy, so there is nothing to
+ * satisfy. In a production build a missing meta means the header's nonce
+ * reached nobody, and Emotion's styles are then blocked — which is the
+ * fail-closed outcome #873 chose. Do not add a fallback that loosens it.
+ */
+const cspNonce = document
+  .querySelector<HTMLMetaElement>('meta[name="csp-nonce"]')
+  ?.content || undefined;
+
+/**
+ * One Emotion cache for the whole app, carrying that nonce.
+ *
+ * MUI styles through Emotion, which injects a `<style>` element at runtime; under
+ * `style-src 'self'` with no nonce the browser drops it and no MUI styling
+ * reaches the screen at all (#873, measured on the sim harness in #871).
+ *
+ * `prepend` puts those tags ahead of `styles.css` in `<head>`, so at equal
+ * specificity this app's own stylesheet still wins — which is what keeps
+ * `styles.css` the source of truth the #674 record says it is.
+ */
+const emotionCache = createCache({ key: "mui", nonce: cspNonce, prepend: true });
+
 /**
  * Build MUI's theme from one already-resolved set of this app's tokens.
  *
@@ -239,5 +273,9 @@ export function FarmThemeProvider({ children }: { children: ReactNode }) {
     [signal],
   );
 
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  return (
+    <CacheProvider value={emotionCache}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </CacheProvider>
+  );
 }

From 2a9a17958ec02f95834abbadf76abc201c68f2e7 Mon Sep 17 00:00:00 2001
From: mforce <cesarinleyva@hotmail.com>
Date: Mon, 14 Sep 2026 18:15:26 +0000
Subject: [PATCH 04/10] test(e2e): prove MUI's styles apply under the real CSP,
 offline included

The defect is invisible to every other instrument here: the DOM is
correct and only the computed style is wrong. So the spec reads a
rendered background in a real browser under the real header, and
compares the document's nonce with the one its own response admits.

The offline half is not redundant. The service worker answers
navigations from the precached shell, and that is only safe because
workbox caches one whole Response, so the header and the body it stores
were minted together.

mutants.ts records why these two mutants are source rebuilds rather than
network-boundary ones: a page.route rewrite lands on the first load and
lapses once the worker takes over, which is the half that matters.
---
 tools/simulation/ui/specs/csp-nonce.spec.ts | 144 ++++++++++++++++++++
 tools/simulation/ui/src/mutants.ts          |  10 ++
 2 files changed, 154 insertions(+)
 create mode 100644 tools/simulation/ui/specs/csp-nonce.spec.ts

diff --git a/tools/simulation/ui/specs/csp-nonce.spec.ts b/tools/simulation/ui/specs/csp-nonce.spec.ts
new file mode 100644
index 000000000..bb2d27120
--- /dev/null
+++ b/tools/simulation/ui/specs/csp-nonce.spec.ts
@@ -0,0 +1,144 @@
+// #873 — MUI's styles reach the screen under the real Production CSP.
+//
+// ================== WHY THIS SPEC EXISTS AT ALL ==================
+//
+// The defect it guards is invisible to every other instrument in this repo. The
+// page renders, the DOM is correct, React is happy, and the `<style>` element
+// Emotion injected is sitting in `<head>` — the browser simply refused to PARSE
+// it, so `sheet === null` and not one declaration applies. Measured in #871:
+// `html` computed `box-sizing: content-box`, `/daily-entry` laid out 419px wide
+// in a 390px frame, and the only complaint anywhere was one console line.
+//
+// So the assertion has to be on a COMPUTED STYLE in a real browser under the
+// real header. A unit test cannot see it (jsdom applies no policy), and an
+// integration test cannot either (it reads bytes, and the bytes were always
+// right).
+//
+// ================== THE OFFLINE HALF, AND WHY IT IS NOT REDUNDANT =========
+//
+// The nonce is per response, and the service worker (#142) precaches the shell
+// and answers navigations from it. That is only safe because the cached entry is
+// one whole Response: the `Content-Security-Policy` header and the `<meta>` in
+// the body were minted together and are cached together, so they still agree
+// when the network is gone. Nothing enforces that — it is a property of how
+// workbox stores a response — which is exactly why it is asserted rather than
+// assumed.
+
+import { expect, test } from "../src/fixtures";
+import type { Page } from "@playwright/test";
+import { BASE_URL } from "../src/env";
+import { tEn } from "../src/i18n";
+
+const PROBE = '[data-testid="csp-style-probe"]';
+
+/** The nonce the response's own policy admits. */
+function headerNonce(csp: string | undefined): string {
+  const match = /style-src 'self' 'nonce-([^']+)'/.exec(csp ?? "");
+  expect(match?.[1], `no style-src nonce in the policy: ${csp}`).toBeTruthy();
+  return match![1]!;
+}
+
+/** The nonce the served document handed to Emotion. */
+function documentNonce(page: Page): Promise<string | null> {
+  return page.evaluate(
+    () => document.querySelector<HTMLMetaElement>('meta[name="csp-nonce"]')?.content ?? null,
+  );
+}
+
+/**
+ * `--brand` as the engine resolves it, so the comparison below is colour to
+ * colour rather than hex string to `rgb()`.
+ *
+ * Adds the rule through the CSSOM of a sheet the page already loaded, which is
+ * the one styling instrument this policy permits — an injected `<style>` is the
+ * very thing the policy blocks, and reaching for `addStyleTag` here would
+ * measure nothing while looking like it worked (see src/mutants.ts, "THE THIRD
+ * BOUNDARY").
+ */
+function brandColour(page: Page): Promise<string> {
+  return page.evaluate(() => {
+    const sheet = [...document.styleSheets].find((s) => s.href?.endsWith(".css"));
+    if (!sheet) throw new Error("the SPA stylesheet has not loaded — nothing to read --brand from");
+    sheet.insertRule(".csp-brand-reference { background-color: var(--brand); }", sheet.cssRules.length);
+    const reference = document.createElement("div");
+    reference.className = "csp-brand-reference";
+    document.body.appendChild(reference);
+    const colour = getComputedStyle(reference).backgroundColor;
+    reference.remove();
+    return colour;
+  });
+}
+
+/** Records every CSP refusal the browser reports, for the whole test. */
+function cspViolations(page: Page): string[] {
+  const seen: string[] = [];
+  page.on("console", (message) => {
+    if (/content security policy/i.test(message.text())) seen.push(message.text());
+  });
+  return seen;
+}
+
+test.describe("CSP nonce (#873)", () => {
+  test("MUI's themed background applies, and the page's nonce is its own response's", async ({ page }) => {
+    const violations = cspViolations(page);
+
+    const response = await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded" });
+    await page.getByRole("button", { name: tEn("auth:signIn") }).waitFor({ state: "visible" });
+
+    // The document and the header that governs it were minted together.
+    expect(await documentNonce(page)).toBe(headerNonce(response!.headers()["content-security-policy"]));
+
+    const probe = page.locator(PROBE);
+    await expect(probe, "the MUI probe is not on the login screen").toBeAttached();
+
+    // The measurement. Without the nonce this is `rgba(0, 0, 0, 0)`: Emotion's
+    // style element is present and refused, so the Chip has no background at
+    // all. With it, the farm's own brand colour reaches an MUI component.
+    const background = await probe.evaluate((el) => getComputedStyle(el).backgroundColor);
+    expect(background, "MUI's injected styles did not apply — the nonce is not reaching Emotion")
+      .not.toBe("rgba(0, 0, 0, 0)");
+    expect(background, "MUI applied a background, but not the farm's").toBe(await brandColour(page));
+
+    expect(violations, "the browser refused something under the policy").toEqual([]);
+  });
+
+  test("the cached shell keeps its nonce and its header together offline", async ({ page, context }) => {
+    const violations = cspViolations(page);
+
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded" });
+    await page.waitForFunction(
+      async () => (await navigator.serviceWorker.getRegistration("/"))?.active?.state === "activated",
+      null,
+      { timeout: 15_000 },
+    );
+    await page.evaluate(() => navigator.serviceWorker.ready.then(() => undefined));
+    // Control arrives on the NEXT navigation (#142 registers without
+    // clientsClaim), and an uncontrolled page has no worker to answer the
+    // offline reload — without this the test would fail for the wrong reason.
+    await page.reload();
+    await page.waitForFunction(() => !!navigator.serviceWorker.controller, null, { timeout: 15_000 });
+
+    await context.setOffline(true);
+    try {
+      const response = await page.reload({ waitUntil: "domcontentloaded" });
+      await page.getByRole("button", { name: tEn("auth:signIn") }).waitFor({ state: "visible" });
+
+      // Served by the worker from the precache, with no network behind it — and
+      // still carrying the header it was cached with, naming the nonce its own
+      // body carries.
+      expect(await documentNonce(page))
+        .toBe(headerNonce(response!.headers()["content-security-policy"]));
+
+      const background = await page.locator(PROBE)
+        .evaluate((el) => getComputedStyle(el).backgroundColor);
+      expect(background, "the cached shell lost its MUI styling offline")
+        .toBe(await brandColour(page));
+
+      expect(violations, "the browser refused something under the cached policy").toEqual([]);
+    } finally {
+      // Restore even if an assertion throws — a context left offline fails every
+      // later spec in the run with an unrelated network error.
+      await context.setOffline(false);
+    }
+  });
+});
diff --git a/tools/simulation/ui/src/mutants.ts b/tools/simulation/ui/src/mutants.ts
index 53fa5a84d..2fb5be569 100644
--- a/tools/simulation/ui/src/mutants.ts
+++ b/tools/simulation/ui/src/mutants.ts
@@ -176,6 +176,16 @@
 //   * the nav role gates — for the reason above;
 //   * the in-memory-token guarantee (#145) — a purely client-side property;
 //   * the PWA specs — see 277-decisions.md on why `sw.js` cannot be mutated here.
+//   * csp-nonce.spec.ts (#873) — covered, but NOT from here. Its two mutants
+//     (drop the nonce from the header; drop the meta from the document) were run
+//     as SOURCE mutations with an image rebuild, and both had to be, for the
+//     same reason the PWA specs are unreachable: the service worker answers
+//     navigations from the precache, so a `page.route` rewrite of the document
+//     or its headers lands on the first load and silently lapses for the offline
+//     half — which is the half that spec exists for. A network mutant there
+//     would have killed the online test, survived the offline one, and read as
+//     a vacuous spec rather than an unfaithful instrument. The rebuild outputs
+//     are in PR #873.
 //
 // ================== SAFETY ==================
 //

From 0adefbfaf9324163af4f9c3bc75c84303e1e5fd3 Mon Sep 17 00:00:00 2001
From: mforce <cesarinleyva@hotmail.com>
Date: Mon, 14 Sep 2026 18:15:26 +0000
Subject: [PATCH 05/10] docs(674): record the CSP amendment and the SPA-serving
 change

The amendment carries the finding, the two rejected options, and the
invariant that every Emotion cache in this app carries the page nonce.
It also states the consequence a reader will not infer: for a client
running the service worker the nonce is per precache entry, not per
request.

architecture.md gains the SpaShell placement row, because a middleware
whose order is load-bearing belongs in the drawn pipeline.
---
 docs/architecture.md                       |  7 +--
 docs/decisions/674-ui-component-library.md | 57 ++++++++++++++++++++++
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/docs/architecture.md b/docs/architecture.md
index 9cf82c25c..385d64f37 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -23,7 +23,7 @@ flowchart TD
     CLI -->|yes| EXIT["run, then exit — the HTTP<br/>pipeline is never registered"]
     CLI -->|no| EDGE
 
-    EDGE["forwarded headers · security headers · cache defaults<br/>HSTS <i>(not in Development)</i> · exception handler<br/>HTTPS redirect · static files · request logging"]
+    EDGE["forwarded headers · security headers · cache defaults<br/>HSTS <i>(not in Development)</i> · exception handler<br/>HTTPS redirect · SPA shell · static files · request logging"]
     EDGE --> LIMITS["rate limiter · per-endpoint body caps"]
     LIMITS --> AUTHN["UseAuthentication<br/><i>JWT → HttpContext.User</i>"]
     AUTHN --> AMBIENT["AmbientPrincipalMiddleware<br/><i>blanks the ambient principal for endpoints that must ignore a bearer</i>"]
@@ -33,10 +33,10 @@ flowchart TD
     EPOCH --> MCP["MustChangePasswordMiddleware<br/><i>403s everything but change-password + logout</i>"]
     MCP --> AUTHZ["UseAuthorization"]
     AUTHZ --> IDEM["IdempotencyMiddleware"]
-    IDEM --> ENDPOINT["endpoint · /health · SPA fallback"]
+    IDEM --> ENDPOINT["endpoint · /health · SPA shell fallback"]
 ```
 
-Four positions in that chain are decisions, not accidents:
+Five positions in that chain are decisions, not accidents:
 
 | Placement | Why | Break it and |
 |---|---|---|
@@ -44,6 +44,7 @@ Four positions in that chain are decisions, not accidents:
 | `CredentialEpochMiddleware` **after** tenant resolution | It reads the user's current epoch from the tenant's database | A revoked credential keeps working (#364) |
 | `MustChangePasswordMiddleware` **before** `UseAuthorization` | The gate then applies uniformly, whatever policy tier an endpoint carries | An endpoint's own policy decides whether a forced reset is enforced (#283) |
 | `IdempotencyMiddleware` **after** `UseAuthorization` | A replay returns a cached response *without invoking the endpoint* | A role-denied caller replaying someone else's key gets the cached response instead of a 403 |
+| `SpaShell` **before** the static-file middleware | It templates `/` and `/index.html` with this response's CSP nonce (#873), and the static middleware would otherwise serve the untemplated file from `wwwroot` first | MUI's Emotion styles are refused by the browser and nothing says so — worst on the clients that installed the service worker, which precaches `/index.html` and answers every navigation from it |
 
 The epoch check is a database round trip on **every authenticated request**, on
 purpose — the round trip *is* the fail-closed guarantee. Do not cache it.
diff --git a/docs/decisions/674-ui-component-library.md b/docs/decisions/674-ui-component-library.md
index 8aa1157b0..e0f14f99a 100644
--- a/docs/decisions/674-ui-component-library.md
+++ b/docs/decisions/674-ui-component-library.md
@@ -199,3 +199,60 @@ time.
    a separate entry, and adopting them costs +118.9 KiB of precache (+24.1 KiB on the latin subset
    a phone fetches). So `font-variation-settings: "opsz" 32` on today's face does nothing. #835
    owns the swap and is charged against #825's ceiling.
+
+## Amendment (2026-09-14): CSP — MUI's styles need a nonce, and the policy stays strict
+
+**Issue:** #873 · **Found by:** #871, on the sim harness at 390px.
+
+### The finding
+
+This app ships `style-src 'self'` with no `'unsafe-inline'`. MUI styles through Emotion,
+which injects a `<style>` element at runtime, and the browser refuses to parse it under that
+policy. Nothing in the app reports it: the element sits in `<head>` with `sheet === null`,
+React is happy, and the only complaint is one console line. Measured in #871 — `html` computed
+`box-sizing: content-box` where `CssBaseline` sets `border-box`, and `/daily-entry` laid out
+419px wide in a 390px frame. Every `sx`, `styled()` and `styleOverrides` value travels that
+same path, so **no MUI styling reached the screen at all**. It stayed invisible until #871
+only because no MUI component had rendered yet.
+
+### The three options, and why the third won
+
+| Option | What it costs |
+| --- | --- |
+| `'unsafe-inline'` on `style-src` | Reopens CSS injection, attribute-selector exfiltration included. A security regression this record would then have to own, to spare a library from carrying a nonce. |
+| Build-time CSS extraction | Fights the decision above: the palette is read off the *document* at runtime so the four farm palettes (#149/#586) reach MUI with no per-palette configuration. Extraction wants the values at build time, which is the opposite. |
+| **A per-response nonce** | One RNG draw per response, one templated document, one `CacheProvider`. The policy stays exactly as strict as it was. |
+
+The owner chose the third (2026-09-14). `script-src` is untouched and must stay that way: the
+pre-paint theme script was externalised in #144 precisely so scripts need no nonce.
+
+### The invariant
+
+**Every Emotion cache in this app carries the page's nonce.** There is one today —
+`web/src/theme/FarmThemeProvider.tsx` builds it at module load from
+`<meta name="csp-nonce">` and hands it to `CacheProvider`. A second cache created anywhere,
+for any reason, is a second thing that must read the same meta; a cache without the nonce
+injects styles the browser silently discards, and the screen looks *almost* right, which is
+the worst way for this to fail.
+
+A missing meta yields `nonce: undefined`, deliberately. That is the Vite dev server's document,
+where no policy applies. In a production build it means the header's nonce reached nobody and
+the styles are blocked — the fail-closed outcome. Do not add a fallback that loosens it.
+
+### Two consequences worth knowing before you touch this
+
+**`index.html` is no longer a static file.** `SpaShell` (`src/Cluckwork.Api/Hosting/`) reads it
+once at boot, splits it at `<head>`, and writes the nonce meta into every response;
+`SecurityHeaders.GetOrCreateNonce` is what both the document and the header read, so they cannot
+disagree. It carries no `ETag` and no `Last-Modified` — a validator derived from the file would
+tell a client its cached copy is fresh while the live header no longer admits that copy's nonce.
+`#141`'s `no-cache` survives unchanged, and hashed `/assets/*` are untouched.
+
+**For a client running the service worker, the nonce is per precache entry, not per request.**
+`navigateFallback` (#142) answers navigations from the cached shell, online and offline alike, so
+that client keeps one nonce until the worker updates. That is safe for the reason the offline
+assertion in `tools/simulation/ui/specs/csp-nonce.spec.ts` checks rather than assumes: workbox
+caches one whole `Response`, so the header and the body it stores were minted together and stay
+together. What survives is "the nonce is unguessable and specific to this client's cached shell",
+not "fresh on every navigation" — and the alternative, refusing to precache the shell, would
+retire the offline guarantee #142 exists for.

From 92dcb178ad743ca8e30a22acbaba73a7d16d609e Mon Sep 17 00:00:00 2001
From: mforce <cesarinleyva@hotmail.com>
Date: Mon, 14 Sep 2026 19:33:01 +0000
Subject: [PATCH 06/10] test(api): pin the CSP header test against an
 independent expected string
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every_response_carries_the_security_headers compared the response against
SecurityHeaders.BuildContentSecurityPolicy(nonce) — the same function under
test — so a directive dropped from the builder changed both sides of the
assertion identically and stayed green. Confirmed by mutation: removing
form-action 'self' from the builder left the test passing until the expected
policy was rewritten by hand as a literal string with only the nonce
substituted, after which the same mutation went red.

Local Codex review on #874.
---
 .../SecurityHeadersTests.cs                   | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs b/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs
index e9501717c..e5f4f1299 100644
--- a/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs
+++ b/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs
@@ -32,6 +32,29 @@ internal static string StyleNonce(string csp)
         return match.Groups["nonce"].Value;
     }
 
+    // #874 review (local Codex pass): written independently of
+    // SecurityHeaders.BuildContentSecurityPolicy rather than calling it, so a
+    // directive dropped, reordered, or widened in the implementation changes
+    // only ONE side of the comparison below. Calling the builder on both sides
+    // (the prior version of this test) meant a deleted directive vanished from
+    // both the response and the "expected" value identically, and nothing in
+    // the file would have caught it — confirmed by mutation: removing
+    // `form-action 'self'` from the builder left this test green until the
+    // string below was pinned by hand.
+    private static string ExpectedContentSecurityPolicy(string styleNonce) =>
+        "default-src 'self'; "
+        + "script-src 'self'; "
+        + $"style-src 'self' 'nonce-{styleNonce}'; "
+        + "img-src 'self' blob:; "
+        + "font-src 'self'; "
+        + "connect-src 'self'; "
+        + "frame-src 'none'; "
+        + "worker-src 'self'; "
+        + "frame-ancestors 'none'; "
+        + "base-uri 'self'; "
+        + "form-action 'self'; "
+        + "object-src 'none'";
+
     [Theory]
     [InlineData("/health/live")]              // a normal 200
     [InlineData("/definitely-not-a-route")]   // a 404 — headers come from OnStarting, so still present
@@ -39,11 +62,12 @@ public async Task Every_response_carries_the_security_headers(string path)
     {
         var res = await factory.CreateClient().GetAsync(path);
 
-        // The WHOLE policy, not a set of Contains checks: rebuilt from the one
-        // value that is allowed to vary, so any other directive that changed —
-        // added, dropped, reordered, widened — fails here (#873).
+        // The WHOLE policy, not a set of Contains checks: compared against an
+        // independently written expected string (#874 review) with only the
+        // nonce substituted, so any other directive that changed — added,
+        // dropped, reordered, widened — fails here (#873).
         var csp = res.Headers.GetValues("Content-Security-Policy").Single();
-        Assert.Equal(SecurityHeaders.BuildContentSecurityPolicy(StyleNonce(csp)), csp);
+        Assert.Equal(ExpectedContentSecurityPolicy(StyleNonce(csp)), csp);
         Assert.Equal("nosniff", res.Headers.GetValues("X-Content-Type-Options").Single());
         Assert.Equal("no-referrer", res.Headers.GetValues("Referrer-Policy").Single());
         Assert.Equal("DENY", res.Headers.GetValues("X-Frame-Options").Single());

From f1d02d630a586a875c9ee377665c116e49e8c743 Mon Sep 17 00:00:00 2001
From: mforce <cesarinleyva@hotmail.com>
Date: Mon, 14 Sep 2026 19:33:14 +0000
Subject: [PATCH 07/10] fix(api): hide the SPA shell's source document and
 restrict it to GET/HEAD
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two gaps in the #873 SPA shell, both measured against a real loopback
Kestrel listener before being fixed:

- UseSpaShell's exact-match check misses a raw "GET //index.html" request
  (Kestrel does not collapse a double leading slash the way it collapses a
  "/./" segment, which the app never even sees), so it fell through to
  UseStaticFiles. PhysicalFileProvider still resolved it to the on-disk
  index.html and served it raw — no nonce meta, plus an ETag/Last-Modified
  pair #873 deliberately never emits on this document. IndexHtmlHidingFileProvider
  wraps the static-file provider so index.html is unreachable under any
  spelling; the request then falls through further to MapFallback, which
  answers with the templated shell like any other client-side route.

- MapFallback(spaShell.WriteAsync) carried no HTTP method restriction, so
  POST / and DELETE /index.html both returned a 200 HTML shell. The
  StaticFileMiddleware + MapFallbackToFile pair this replaced served only
  GET/HEAD (measured against that pre-#873 pipeline directly: it answers 405
  with "Allow: GET, HEAD"). UseSpaShell's exact-match branch now falls
  through for any other method, and MapFallback carries the same
  HttpMethodMetadata, so both entry points answer the one 405.

/./index.html needed no fix: Kestrel's own PathNormalizer collapses it to
/index.html before the app runs, which SpaShellTests now pins directly.

Local Codex review on #874.
---
 src/Cluckwork.Api/Hosting/SpaShell.cs         | 49 +++++++++-
 src/Cluckwork.Api/Program.cs                  | 21 ++++-
 .../SpaShellRawPathTests.cs                   | 91 +++++++++++++++++++
 .../SpaShellTests.cs                          | 74 +++++++++++++++
 4 files changed, 232 insertions(+), 3 deletions(-)
 create mode 100644 tests/Cluckwork.Api.IntegrationTests/SpaShellRawPathTests.cs

diff --git a/src/Cluckwork.Api/Hosting/SpaShell.cs b/src/Cluckwork.Api/Hosting/SpaShell.cs
index 603b7094a..4e0b4349d 100644
--- a/src/Cluckwork.Api/Hosting/SpaShell.cs
+++ b/src/Cluckwork.Api/Hosting/SpaShell.cs
@@ -2,6 +2,8 @@ namespace Cluckwork.Api.Hosting;
 
 using System.Text;
 using Cluckwork.Api.Security;
+using Microsoft.Extensions.FileProviders;
+using Microsoft.Extensions.Primitives;
 using Microsoft.Net.Http.Headers;
 
 // #873 — the built SPA's index.html, served as a TEMPLATED response rather than
@@ -114,7 +116,14 @@ public static IApplicationBuilder UseSpaShell(this IApplicationBuilder app, SpaS
             // Linux: /INDEX.HTML 404s here exactly as it did when the static
             // middleware owned the path.
             var path = context.Request.Path.Value;
-            if (path == "/" || string.Equals(path, "/index.html", StringComparison.Ordinal))
+            var method = context.Request.Method;
+            // GET/HEAD only (#874 review, local Codex pass): the static-file
+            // middleware this replaced only ever served GET/HEAD, and falling
+            // through here (rather than answering 405 directly) lets the SAME
+            // 405 come from the MapFallback registration in Program.cs, whose
+            // HttpMethodMetadata is the one place that decision is made.
+            if ((path == "/" || string.Equals(path, "/index.html", StringComparison.Ordinal))
+                && (HttpMethods.IsGet(method) || HttpMethods.IsHead(method)))
             {
                 await shell.WriteAsync(context);
                 return;
@@ -123,3 +132,41 @@ public static IApplicationBuilder UseSpaShell(this IApplicationBuilder app, SpaS
             await next();
         });
 }
+
+/// <summary>
+/// Hides the shell's own source document from static-file serving (#874 review,
+/// local Codex pass).
+/// </summary>
+/// <remarks>
+/// <see cref="SpaShellExtensions.UseSpaShell"/>'s exact-match check is a literal
+/// compare against <c>Request.Path.Value</c>. Kestrel does not collapse a raw
+/// "GET //index.html" request-target the way it collapses a "/./" segment (the
+/// latter is resolved before the app ever sees it; the former is not), so that
+/// request misses the exact match and falls through to <c>UseStaticFiles</c> —
+/// whose <c>PhysicalFileProvider</c> still resolves it to the same on-disk
+/// index.html, serving the untemplated build artifact with no nonce meta under a
+/// CSP header that now requires one. Wrapping the file provider makes the
+/// document unreachable through static serving no matter how many leading
+/// slashes or what case the request spells it with; the request then falls
+/// through further to <c>MapFallback</c>, which answers with the templated shell
+/// exactly as it already does for any other client-side route.
+/// </remarks>
+public sealed class IndexHtmlHidingFileProvider(IFileProvider inner) : IFileProvider
+{
+    public IDirectoryContents GetDirectoryContents(string subpath) => inner.GetDirectoryContents(subpath);
+
+    public IFileInfo GetFileInfo(string subpath)
+    {
+        // Split rather than compare the raw string: collapses any number of
+        // leading or doubled slashes away, so "//index.html" and "/index.html"
+        // resolve to the same single segment. Case-insensitive because the goal
+        // is "this file is never servable raw" — not a second copy of the
+        // case-sensitive Linux lookup UseSpaShell already relies on, so
+        // /INDEX.HTML still 404s either way, just earlier.
+        var segments = subpath.Split('/', StringSplitOptions.RemoveEmptyEntries);
+        var isIndexHtml = segments is [var only] && string.Equals(only, "index.html", StringComparison.OrdinalIgnoreCase);
+        return isIndexHtml ? new NotFoundFileInfo(subpath) : inner.GetFileInfo(subpath);
+    }
+
+    public IChangeToken Watch(string filter) => inner.Watch(filter);
+}
diff --git a/src/Cluckwork.Api/Program.cs b/src/Cluckwork.Api/Program.cs
index 00cd270fd..b9e2315f6 100644
--- a/src/Cluckwork.Api/Program.cs
+++ b/src/Cluckwork.Api/Program.cs
@@ -26,6 +26,7 @@
 using Cluckwork.Infrastructure.RateLimiting;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Diagnostics;
+using Microsoft.AspNetCore.Http.Metadata;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
 using Serilog;
@@ -218,7 +219,15 @@
     app.UseSpaShell(spaShell);
 app.UseStaticFiles(new StaticFileOptions
 {
-    OnPrepareResponse = StaticAssetCaching.ApplyCacheHeaders
+    OnPrepareResponse = StaticAssetCaching.ApplyCacheHeaders,
+    // #874 review (local Codex pass) — null (the middleware's own default,
+    // env.WebRootFileProvider) when there is no built SPA to template in the
+    // first place; wrapped only when SpaShell owns index.html, so the raw file
+    // can never leak through an alternate path spelling UseSpaShell's exact
+    // compare misses (e.g. a raw "GET //index.html").
+    FileProvider = spaShell is not null
+        ? new IndexHtmlHidingFileProvider(app.Environment.WebRootFileProvider)
+        : null
 });
 
 // One structured completion line per request (#214): method, path, status,
@@ -573,7 +582,15 @@
 // no-cache: a new deploy propagates immediately even through a fronting CDN,
 // and a missing /assets/x can never be pinned immutable.
 if (spaShell is not null)
-    app.MapFallback(spaShell.WriteAsync);
+    // GET/HEAD only (#874 review, local Codex pass): the StaticFileMiddleware +
+    // MapFallbackToFile pair this replaced served only GET/HEAD (the former
+    // skips other methods outright, the latter carries its own GET/HEAD
+    // HttpMethodMetadata) — measured directly against that pre-#873 pipeline,
+    // which answers 405 with "Allow: GET, HEAD" for e.g. POST / or DELETE
+    // /index.html. Without this metadata spaShell.WriteAsync has no method
+    // restriction of its own and those same requests get a 200 HTML shell.
+    app.MapFallback(spaShell.WriteAsync)
+        .WithMetadata(new HttpMethodMetadata([HttpMethods.Get, HttpMethods.Head]));
 else
     app.MapFallbackToFile("index.html", new StaticFileOptions
     {
diff --git a/tests/Cluckwork.Api.IntegrationTests/SpaShellRawPathTests.cs b/tests/Cluckwork.Api.IntegrationTests/SpaShellRawPathTests.cs
new file mode 100644
index 000000000..ddb005d42
--- /dev/null
+++ b/tests/Cluckwork.Api.IntegrationTests/SpaShellRawPathTests.cs
@@ -0,0 +1,91 @@
+namespace Cluckwork.Api.IntegrationTests;
+
+using System.Net;
+using System.Net.Sockets;
+using System.Text;
+using Cluckwork.Api.IntegrationTests.Infrastructure;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.Hosting.Server;
+using Microsoft.AspNetCore.Hosting.Server.Features;
+using Microsoft.Extensions.DependencyInjection;
+
+// #874 review (local Codex pass) — a raw "GET //index.html" request-target.
+// TestServer's in-memory transport routes every request through System.Uri,
+// which treats a leading "//" as an RFC 3986 network-path reference (a NEW
+// authority) rather than a literal path segment — measured directly:
+// HttpClient.GetAsync("//index.html") AND TestServer's own
+// Server.CreateRequest("//index.html") both come back 400 on a host mismatch,
+// neither ever reaching the app with the path the review is actually about.
+// This binds a real loopback Kestrel listener, the same pattern
+// HstsOverRealTlsTests (#344) uses for the same reason, and writes the request
+// line by hand over a raw socket to prove what a real client's request
+// actually carries.
+public sealed class RawPathKestrelFactory : CluckworkWebApplicationFactory
+{
+    private readonly string _webRoot = Path.Combine(
+        Path.GetTempPath(), "cluckwork-rawpath-" + Guid.NewGuid().ToString("N"));
+
+    public RawPathKestrelFactory()
+    {
+        // Must run before anything touches Services (which starts the host) —
+        // same constraint TlsKestrelFactory documents.
+        UseKestrel(options => options.Listen(IPAddress.Loopback, 0));
+        Directory.CreateDirectory(_webRoot);
+        File.WriteAllText(Path.Combine(_webRoot, "index.html"), StaticCachingFactory.IndexHtml);
+    }
+
+    protected override void ConfigureWebHost(IWebHostBuilder builder)
+    {
+        base.ConfigureWebHost(builder);
+        builder.UseWebRoot(_webRoot);
+    }
+
+    public int Port => new Uri(Services.GetRequiredService<IServer>()
+        .Features.Get<IServerAddressesFeature>()!.Addresses
+        .Single(a => a.StartsWith("http://", StringComparison.Ordinal))).Port;
+
+    protected override void Dispose(bool disposing)
+    {
+        base.Dispose(disposing);
+        if (disposing)
+            try { Directory.Delete(_webRoot, recursive: true); } catch { /* best effort */ }
+    }
+}
+
+public sealed class SpaShellRawPathTests(RawPathKestrelFactory factory)
+    : IClassFixture<RawPathKestrelFactory>
+{
+    private async Task<(int Status, string Raw)> SendRawRequestAsync(string requestLine)
+    {
+        using var socket = new Socket(SocketType.Stream, ProtocolType.Tcp);
+        await socket.ConnectAsync(IPAddress.Loopback, factory.Port);
+        using var stream = new NetworkStream(socket, ownsSocket: false);
+        var request = Encoding.ASCII.GetBytes(
+            $"{requestLine} HTTP/1.1\r\nHost: 127.0.0.1\r\nConnection: close\r\n\r\n");
+        await stream.WriteAsync(request);
+
+        using var reader = new StreamReader(stream, Encoding.ASCII);
+        var raw = await reader.ReadToEndAsync();
+        var statusLine = raw[..raw.IndexOf("\r\n", StringComparison.Ordinal)];
+        return (int.Parse(statusLine.Split(' ')[1]), raw);
+    }
+
+    [Fact]
+    public async Task Double_leading_slash_never_serves_the_untemplated_document()
+    {
+        var (status, raw) = await SendRawRequestAsync("GET //index.html");
+
+        // Two acceptable outcomes: a 200 that DOES carry the nonce meta (served
+        // by MapFallback, exactly like any other client-side route falls
+        // through to it), or anything that is not a 200 HTML document. What
+        // must never happen — and did, before IndexHtmlHidingFileProvider —
+        // is a 200 whose body is the raw build artifact with no nonce meta at
+        // all: UseStaticFiles's PhysicalFileProvider used to resolve this exact
+        // request to the on-disk index.html and serve it with an ETag, the
+        // validator #873's own design forbids on this document.
+        if (status == 200)
+            Assert.Contains("csp-nonce", raw);
+        else
+            Assert.NotEqual(200, status);
+    }
+}
diff --git a/tests/Cluckwork.Api.IntegrationTests/SpaShellTests.cs b/tests/Cluckwork.Api.IntegrationTests/SpaShellTests.cs
index e24e1398b..1f88e2b30 100644
--- a/tests/Cluckwork.Api.IntegrationTests/SpaShellTests.cs
+++ b/tests/Cluckwork.Api.IntegrationTests/SpaShellTests.cs
@@ -4,6 +4,7 @@ namespace Cluckwork.Api.IntegrationTests;
 using System.Text.RegularExpressions;
 using Cluckwork.Api.Hosting;
 using Cluckwork.Api.Security;
+using Microsoft.Extensions.FileProviders;
 
 // #873 — the SPA's index.html is served as a templated response so the document
 // and its own Content-Security-Policy header name the SAME style nonce. If they
@@ -118,6 +119,43 @@ public async Task Hashed_assets_are_untouched_and_still_immutable()
         Assert.DoesNotContain("csp-nonce", await res.Content.ReadAsStringAsync());
     }
 
+    [Fact]
+    public async Task Dot_segment_is_normalised_before_the_shell_ever_sees_it()
+    {
+        // #874 review (local Codex pass): "/./index.html" is a request Kestrel's
+        // OWN PathNormalizer collapses to "/index.html" ahead of the app — proven
+        // against a real loopback Kestrel listener, not just this in-memory
+        // TestServer, before this test was written. CreateRequest bypasses
+        // System.Uri's own resolution (which HttpClient.GetAsync would apply
+        // first and produce a different, misleading path), so this exercises the
+        // same normalisation a raw request line gets.
+        var res = await factory.Server.CreateRequest("/./index.html").GetAsync();
+
+        Assert.Equal(HttpStatusCode.OK, res.StatusCode);
+        var header = SecurityHeadersTests.StyleNonce(
+            res.Headers.GetValues("Content-Security-Policy").Single());
+        Assert.Equal(header, MetaNonce(await res.Content.ReadAsStringAsync()));
+    }
+
+    [Theory]
+    [InlineData("POST", "/")]
+    [InlineData("DELETE", "/index.html")]
+    public async Task Write_methods_cannot_get_a_successful_shell_response(string method, string path)
+    {
+        // #874 review (local Codex pass): the StaticFileMiddleware + MapFallbackToFile
+        // pair this replaced served only GET/HEAD; MapFallback(spaShell.WriteAsync)
+        // has no method restriction of its own, so before this fix POST / and
+        // DELETE /index.html both returned a 200 HTML shell — measured against
+        // the pre-#873 pipeline, which answers exactly this 405.
+        var res = await factory.CreateClient()
+            .SendAsync(new HttpRequestMessage(new HttpMethod(method), path));
+
+        Assert.Equal(HttpStatusCode.MethodNotAllowed, res.StatusCode);
+        // Allow is a content header per the HttpClient model, not a response one.
+        Assert.Equal(new[] { "GET", "HEAD" }, res.Content.Headers.Allow.Order());
+        Assert.NotEqual("text/html", res.Content.Headers.ContentType?.MediaType);
+    }
+
     [Fact]
     public void A_document_with_no_head_is_refused_at_load()
     {
@@ -131,3 +169,39 @@ public void A_document_with_no_head_is_refused_at_load()
         Assert.Contains("<head>", thrown.Message, StringComparison.Ordinal);
     }
 }
+
+// #874 review (local Codex pass) — the wrapper directly, in isolation from the
+// HTTP pipeline: the file genuinely exists on disk (proven by
+// Unrelated_files_still_pass_through reading a sibling normally), yet no
+// spelling of a request for it resolves through this provider.
+public sealed class IndexHtmlHidingFileProviderTests : IDisposable
+{
+    private readonly string _root = Path.Combine(
+        Path.GetTempPath(), "cluckwork-hiding-" + Guid.NewGuid().ToString("N"));
+    private readonly IndexHtmlHidingFileProvider _provider;
+
+    public IndexHtmlHidingFileProviderTests()
+    {
+        Directory.CreateDirectory(Path.Combine(_root, "assets"));
+        File.WriteAllText(Path.Combine(_root, "index.html"), "<!doctype html>");
+        File.WriteAllText(Path.Combine(_root, "assets", "app.js"), "console.log(1)");
+        _provider = new IndexHtmlHidingFileProvider(new PhysicalFileProvider(_root));
+    }
+
+    public void Dispose()
+    {
+        try { Directory.Delete(_root, recursive: true); } catch { /* best effort */ }
+    }
+
+    [Theory]
+    [InlineData("/index.html")]     // the normal request
+    [InlineData("//index.html")]    // the alternate spelling Kestrel does not collapse
+    [InlineData("index.html")]      // no leading slash at all
+    [InlineData("/INDEX.HTML")]     // case variance
+    public void Index_html_is_hidden_under_every_spelling(string subpath) =>
+        Assert.False(_provider.GetFileInfo(subpath).Exists);
+
+    [Fact]
+    public void Unrelated_files_still_pass_through() =>
+        Assert.True(_provider.GetFileInfo("/assets/app.js").Exists);
+}

From 454f06948735a138d9a937350be5602634f6b5a5 Mon Sep 17 00:00:00 2001
From: mforce <cesarinleyva@hotmail.com>
Date: Mon, 14 Sep 2026 19:41:06 +0000
Subject: [PATCH 08/10] test(api): pin the nonce-length guard to a literal
 minimum, not the constant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Style_src_keeps_self_and_adds_exactly_one_nonce asserted the decoded nonce
length equals SecurityHeaders.NonceByteCount — the same constant under
test — so shrinking NonceByteCount from 16 to 4 (32-bit nonces, well below
CSP's "unguessable" floor) changed both sides of the assertion identically
and stayed green. Confirmed by mutation: set the constant to 4, the test
stayed green until the assertion was rewritten against a literal minimum of
16 decoded bytes, after which the same mutation went red.

Local Codex review round 2 on #874, at d02cad9.
---
 .../SecurityHeadersTests.cs                        | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs b/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs
index e5f4f1299..9a8a94a8d 100644
--- a/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs
+++ b/tests/Cluckwork.Api.IntegrationTests/SecurityHeadersTests.cs
@@ -93,10 +93,16 @@ public async Task Style_src_keeps_self_and_adds_exactly_one_nonce()
         Assert.Equal("'self'", tokens[1]);
         Assert.StartsWith("'nonce-", tokens[2], StringComparison.Ordinal);
 
-        // A cryptographic nonce, not a counter or a constant: exactly the
-        // 16 bytes SecurityHeaders says it mints, base64-encoded.
-        Assert.Equal(SecurityHeaders.NonceByteCount,
-            Convert.FromBase64String(StyleNonce(csp)).Length);
+        // A cryptographic nonce, not a counter or a constant: at least 16
+        // decoded bytes (128 bits, CSP's own floor for "unguessable"),
+        // base64-encoded. A literal minimum, not SecurityHeaders.NonceByteCount
+        // itself (#874 review round 2, local Codex pass): comparing against the
+        // implementation's own constant meant shrinking NonceByteCount from 16
+        // to 4 changed both sides of the assertion identically and stayed
+        // green — confirmed by mutation, reverted after.
+        var decodedNonce = Convert.FromBase64String(StyleNonce(csp));
+        Assert.True(decodedNonce.Length >= 16,
+            $"nonce must decode to at least 16 bytes (128 bits), got {decodedNonce.Length}");
 
         // Nowhere else. script-src taking a nonce would be a far larger
         // concession than this change makes, and it must not ride along.

From feb46ef0885baed965f2785ef5c15f85324fca4b Mon Sep 17 00:00:00 2001
From: mforce <cesarinleyva@hotmail.com>
Date: Mon, 14 Sep 2026 20:56:22 +0000
Subject: [PATCH 09/10] fix(web): remove the hidden CSP-probe Chip from
 Login.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Owner decision on #874 (2026-09-14): the hidden `.sr-only`, `aria-hidden`
MUI Chip on the login screen was production markup that existed only for a
test — the #873 CSP-nonce Playwright spec needed a real Emotion-styled
element to read a computed background from, and a probe is not the same
thing as a real component. Removed rather than relocated.

csp-nonce.spec.ts keeps the nonce-agreement assertions (the served
document's meta nonce matches its own response header's style-src nonce,
online and after an offline service-worker reload) and the no-CSP-violation
assertion; the computed-background assertions and the brandColour/PROBE
helpers they needed are gone with the probe. The end-to-end "an MUI
component's computed style applies under the real CSP, online and offline"
assertion moves to #864's first rendered MUI component — amendment comment
on that issue, and in docs/decisions/674-ui-component-library.md.

PR #874 body's Scope and Verification amended to match: the Login.tsx
bullet, the two Playwright mutation rows that depended on the probe (kept
the four that don't), and the six probe screenshots replaced with a
sentence — this PR changes nothing a user sees.
---
 docs/decisions/674-ui-component-library.md  |  9 +++
 tools/simulation/ui/specs/csp-nonce.spec.ts | 71 +++++----------------
 web/src/routes/Login.tsx                    | 22 -------
 3 files changed, 24 insertions(+), 78 deletions(-)

diff --git a/docs/decisions/674-ui-component-library.md b/docs/decisions/674-ui-component-library.md
index e0f14f99a..fce96af59 100644
--- a/docs/decisions/674-ui-component-library.md
+++ b/docs/decisions/674-ui-component-library.md
@@ -256,3 +256,12 @@ caches one whole `Response`, so the header and the body it stores were minted to
 together. What survives is "the nonce is unguessable and specific to this client's cached shell",
 not "fresh on every navigation" — and the alternative, refusing to precache the shell, would
 retire the offline guarantee #142 exists for.
+
+**No MUI component renders in production today, and nothing here stands in for one.** An earlier
+draft of #873 had `web/src/routes/Login.tsx` render one hidden `Chip`, solely so the Playwright
+spec had a real Emotion-styled element to read a computed background from. The owner's #874 review
+(2026-09-14) removed it: production markup that exists only for a test is a cost this record does
+not accept paying. `csp-nonce.spec.ts` still proves the invariant above — the nonce the document
+carries matches its own response header, online and after an offline reload — but not that MUI's
+styles visibly apply anywhere; #864 tracks the first slice that renders a real component and picks
+that assertion back up there.
diff --git a/tools/simulation/ui/specs/csp-nonce.spec.ts b/tools/simulation/ui/specs/csp-nonce.spec.ts
index bb2d27120..d5371f2c0 100644
--- a/tools/simulation/ui/specs/csp-nonce.spec.ts
+++ b/tools/simulation/ui/specs/csp-nonce.spec.ts
@@ -1,18 +1,19 @@
-// #873 — MUI's styles reach the screen under the real Production CSP.
+// #873 — the served document and its own Content-Security-Policy header carry
+// the SAME style nonce, online and after a service-worker offline reload.
 //
-// ================== WHY THIS SPEC EXISTS AT ALL ==================
+// ================== WHAT THIS SPEC DOES NOT COVER, AND WHY =================
 //
-// The defect it guards is invisible to every other instrument in this repo. The
-// page renders, the DOM is correct, React is happy, and the `<style>` element
-// Emotion injected is sitting in `<head>` — the browser simply refused to PARSE
-// it, so `sheet === null` and not one declaration applies. Measured in #871:
-// `html` computed `box-sizing: content-box`, `/daily-entry` laid out 419px wide
-// in a 390px frame, and the only complaint anywhere was one console line.
-//
-// So the assertion has to be on a COMPUTED STYLE in a real browser under the
-// real header. A unit test cannot see it (jsdom applies no policy), and an
-// integration test cannot either (it reads bytes, and the bytes were always
-// right).
+// #873 originally asserted a COMPUTED STYLE here too — the farm's brand colour
+// reaching an MUI component under the real Production CSP — through a hidden
+// probe Chip on the login screen that existed only to be measured. The owner's
+// #874 review decision (2026-09-14) removed that probe as production markup
+// that exists only for a test: Login.tsx renders no MUI component today, and a
+// hidden one is not a substitute for the real thing. That end-to-end assertion
+// — an MUI component's computed style applies under the real CSP, online and
+// offline — moves to the first screen slice that actually renders one; #864
+// tracks it. Until then this spec proves the narrower, still load-bearing
+// half: the nonce the document carries is the nonce its own header admits, and
+// nothing the browser loads is CSP-refused.
 //
 // ================== THE OFFLINE HALF, AND WHY IT IS NOT REDUNDANT =========
 //
@@ -29,8 +30,6 @@ import type { Page } from "@playwright/test";
 import { BASE_URL } from "../src/env";
 import { tEn } from "../src/i18n";
 
-const PROBE = '[data-testid="csp-style-probe"]';
-
 /** The nonce the response's own policy admits. */
 function headerNonce(csp: string | undefined): string {
   const match = /style-src 'self' 'nonce-([^']+)'/.exec(csp ?? "");
@@ -45,30 +44,6 @@ function documentNonce(page: Page): Promise<string | null> {
   );
 }
 
-/**
- * `--brand` as the engine resolves it, so the comparison below is colour to
- * colour rather than hex string to `rgb()`.
- *
- * Adds the rule through the CSSOM of a sheet the page already loaded, which is
- * the one styling instrument this policy permits — an injected `<style>` is the
- * very thing the policy blocks, and reaching for `addStyleTag` here would
- * measure nothing while looking like it worked (see src/mutants.ts, "THE THIRD
- * BOUNDARY").
- */
-function brandColour(page: Page): Promise<string> {
-  return page.evaluate(() => {
-    const sheet = [...document.styleSheets].find((s) => s.href?.endsWith(".css"));
-    if (!sheet) throw new Error("the SPA stylesheet has not loaded — nothing to read --brand from");
-    sheet.insertRule(".csp-brand-reference { background-color: var(--brand); }", sheet.cssRules.length);
-    const reference = document.createElement("div");
-    reference.className = "csp-brand-reference";
-    document.body.appendChild(reference);
-    const colour = getComputedStyle(reference).backgroundColor;
-    reference.remove();
-    return colour;
-  });
-}
-
 /** Records every CSP refusal the browser reports, for the whole test. */
 function cspViolations(page: Page): string[] {
   const seen: string[] = [];
@@ -79,7 +54,7 @@ function cspViolations(page: Page): string[] {
 }
 
 test.describe("CSP nonce (#873)", () => {
-  test("MUI's themed background applies, and the page's nonce is its own response's", async ({ page }) => {
+  test("the page's nonce is its own response's, and nothing is CSP-refused", async ({ page }) => {
     const violations = cspViolations(page);
 
     const response = await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded" });
@@ -88,17 +63,6 @@ test.describe("CSP nonce (#873)", () => {
     // The document and the header that governs it were minted together.
     expect(await documentNonce(page)).toBe(headerNonce(response!.headers()["content-security-policy"]));
 
-    const probe = page.locator(PROBE);
-    await expect(probe, "the MUI probe is not on the login screen").toBeAttached();
-
-    // The measurement. Without the nonce this is `rgba(0, 0, 0, 0)`: Emotion's
-    // style element is present and refused, so the Chip has no background at
-    // all. With it, the farm's own brand colour reaches an MUI component.
-    const background = await probe.evaluate((el) => getComputedStyle(el).backgroundColor);
-    expect(background, "MUI's injected styles did not apply — the nonce is not reaching Emotion")
-      .not.toBe("rgba(0, 0, 0, 0)");
-    expect(background, "MUI applied a background, but not the farm's").toBe(await brandColour(page));
-
     expect(violations, "the browser refused something under the policy").toEqual([]);
   });
 
@@ -129,11 +93,6 @@ test.describe("CSP nonce (#873)", () => {
       expect(await documentNonce(page))
         .toBe(headerNonce(response!.headers()["content-security-policy"]));
 
-      const background = await page.locator(PROBE)
-        .evaluate((el) => getComputedStyle(el).backgroundColor);
-      expect(background, "the cached shell lost its MUI styling offline")
-        .toBe(await brandColour(page));
-
       expect(violations, "the browser refused something under the cached policy").toEqual([]);
     } finally {
       // Restore even if an assertion throws — a context left offline fails every
diff --git a/web/src/routes/Login.tsx b/web/src/routes/Login.tsx
index d3afeaf34..777ce8fd2 100644
--- a/web/src/routes/Login.tsx
+++ b/web/src/routes/Login.tsx
@@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from "react";
 import type { FormEvent } from "react";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
 import { useTranslation } from "react-i18next";
-import Chip from "@mui/material/Chip";
 import { useAuth } from "../auth/useAuth";
 import { ApiError } from "../api/client";
 import { BusyButton } from "../components/BusyButton";
@@ -211,27 +210,6 @@ export function Login() {
   return (
     <main className="auth">
       <ThemeToggle className="auth-theme" showLabel={false} iconSize={18} />
-      {/* #873 — the only rendered MUI component in the app today, and it exists
-          to be measured rather than seen. Emotion's injected <style> is what the
-          CSP nonce admits, and Emotion injects nothing until an MUI component
-          renders, so without this the end-to-end check has nothing to read: the
-          spec asserts this element's themed background under the real
-          Production policy, online and offline.
-
-          Hidden from both audiences deliberately. `.sr-only` takes it off screen
-          and `aria-hidden` takes it out of the accessibility tree, because #873
-          is groundwork sequenced BEFORE every screen slice — putting a visible
-          Chip on the login screen would make a product styling decision that
-          #864 owns. The first slice that renders a real MUI component deletes
-          this and points the spec at that component instead. */}
-      <Chip
-        label="MUI"
-        color="primary"
-        size="small"
-        className="sr-only"
-        aria-hidden="true"
-        data-testid="csp-style-probe"
-      />
       <form className="card" onSubmit={onSubmit}>
         <h1>{t("title")}</h1>
         {needsSetup && (

From ec484633326c8b2a8ac72b5fa07f3b34da0fa069 Mon Sep 17 00:00:00 2001
From: mforce <cesarinleyva@hotmail.com>
Date: Wed, 16 Sep 2026 04:35:50 +0000
Subject: [PATCH 10/10] fix(api): name the SPA shell fallback handler so the
 #872 adapter-reach walk resolves it

The guard resolves a route handler through its declaring type; a method
group on a local variable (spaShell.WriteAsync) has none it can see and
the walk fails closed. A local function keeps the same delegate and the
same GET/HEAD metadata.
---
 src/Cluckwork.Api/Program.cs | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Cluckwork.Api/Program.cs b/src/Cluckwork.Api/Program.cs
index b9e2315f6..237513033 100644
--- a/src/Cluckwork.Api/Program.cs
+++ b/src/Cluckwork.Api/Program.cs
@@ -582,6 +582,7 @@
 // no-cache: a new deploy propagates immediately even through a fronting CDN,
 // and a missing /assets/x can never be pinned immutable.
 if (spaShell is not null)
+{
     // GET/HEAD only (#874 review, local Codex pass): the StaticFileMiddleware +
     // MapFallbackToFile pair this replaced served only GET/HEAD (the former
     // skips other methods outright, the latter carries its own GET/HEAD
@@ -589,8 +590,13 @@
     // which answers 405 with "Allow: GET, HEAD" for e.g. POST / or DELETE
     // /index.html. Without this metadata spaShell.WriteAsync has no method
     // restriction of its own and those same requests get a 200 HTML shell.
-    app.MapFallback(spaShell.WriteAsync)
+    // A named local function rather than the method group: the #872 adapter-reach
+    // walk resolves a handler through its declaring type, and a method group on
+    // a local variable has none it can see.
+    Task WriteSpaShell(HttpContext context) => spaShell.WriteAsync(context);
+    app.MapFallback(WriteSpaShell)
         .WithMetadata(new HttpMethodMetadata([HttpMethods.Get, HttpMethods.Head]));
+}
 else
     app.MapFallbackToFile("index.html", new StaticFileOptions
     {