From f2eb496c1c6ff0c6329e8e1b5c76e33e759fd89a Mon Sep 17 00:00:00 2001
From: Amit Kumar <ak.nitrr13@gmail.com>
Date: Mon, 4 May 2026 07:32:27 +0000
Subject: [PATCH] fix(ui): extract theme-flash inline script to /theme-flash.js
 for strict CSP
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The strict CSP shipped from internal/api/security_headers.go uses
script-src 'self' 'wasm-unsafe-eval' — no 'unsafe-inline'. The
theme-flash FOUC guard in index.html was an inline <script>, so every
page load logged a CSP violation:

  Refused to execute inline script because it violates the following
  Content Security Policy directive: script-src 'self' 'wasm-unsafe-eval'

The script never ran, which meant a brief flash-of-wrong-theme on
first paint in dark mode (and vice-versa).

Move the script verbatim into ui/public/theme-flash.js (Vite copies
public/ to /dist root at build time) and reference it from index.html
via <script src="/theme-flash.js">. CSP 'self' allows it without an
inline-script exception. The script body is unchanged so behaviour is
identical when it runs.

Trade-off: one extra HTTP/2 request before paint. The file is 1.2 KiB
so this is well below the perceptible-jank threshold and worth it for
keeping the strict CSP intact.
---
 ui/dist/index.html       | 12 ++++++++++--
 ui/index.html            | 39 ++++++++-------------------------------
 ui/public/theme-flash.js | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 33 deletions(-)
 create mode 100644 ui/public/theme-flash.js
diff --git a/ui/dist/index.html b/ui/dist/index.html
index 7377cc6..566bca9 100644
--- a/ui/dist/index.html
+++ b/ui/dist/index.html
@@ -11,10 +11,18 @@
     <link rel="apple-touch-icon" href="/favicon.svg" />
     <link rel="manifest" href="/manifest.webmanifest" />
     <title>docsiq — GraphRAG knowledge base</title>
-    <script type="module" crossorigin src="/assets/index-BYq_8sLj.js"></script>
+    <!--
+      Theme-flash guard moved out of an inline <script> so the strict
+      CSP (script-src 'self', no 'unsafe-inline') accepts it. Vite
+      copies ui/public/theme-flash.js to /theme-flash.js at build
+      time. Loaded synchronously here so it executes before the SPA
+      hydrates and prevents FOUC.
+    -->
+    <script src="/theme-flash.js"></script>
+    <script type="module" crossorigin src="/assets/index-Dtmrigu0.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-S-ySWqyJ.js">
     <link rel="modulepreload" crossorigin href="/assets/graph-YlRq3euP.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-DBMDkFdw.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-BZYFJ-vO.css">
   </head>
   <body>
     <div id="root"></div>
diff --git a/ui/index.html b/ui/index.html
index 158abc8..a36c444 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -11,37 +11,14 @@
     <link rel="apple-touch-icon" href="/favicon.svg" />
     <link rel="manifest" href="/manifest.webmanifest" />
     <title>docsiq — GraphRAG knowledge base</title>
-    <script>
-      // Block 5.9 — theme-flash guard. Applies the persisted theme class
-      // before React hydrates so there is no FOUC on first paint. Must run
-      // synchronously in <head>. Keep in sync with Zustand persist key
-      // `docsiq-ui` and the Providers.tsx effect that toggles .dark.
-      (function () {
-        try {
-          var raw = localStorage.getItem("docsiq-ui");
-          var theme = "system";
-          if (raw) {
-            var parsed = JSON.parse(raw);
-            if (parsed && parsed.state && typeof parsed.state.theme === "string") {
-              theme = parsed.state.theme;
-            }
-          }
-          var effective = theme;
-          if (theme === "system") {
-            effective = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
-              ? "dark"
-              : "light";
-          }
-          var root = document.documentElement;
-          root.dataset.theme = effective;
-          if (effective === "dark") root.classList.add("dark");
-        } catch (e) {
-          // If localStorage is unavailable (privacy mode) we simply let
-          // React decide after hydration; there is a brief FOUC but no
-          // crash. Do not log — this runs before any logger is attached.
-        }
-      })();
-    </script>
+    <!--
+      Theme-flash guard moved out of an inline <script> so the strict
+      CSP (script-src 'self', no 'unsafe-inline') accepts it. Vite
+      copies ui/public/theme-flash.js to /theme-flash.js at build
+      time. Loaded synchronously here so it executes before the SPA
+      hydrates and prevents FOUC.
+    -->
+    <script src="/theme-flash.js"></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/ui/public/theme-flash.js b/ui/public/theme-flash.js
new file mode 100644
index 0000000..daa5c7e
--- /dev/null
+++ b/ui/public/theme-flash.js
@@ -0,0 +1,32 @@
+// Theme-flash guard. Applies the persisted theme class before React
+// hydrates so there is no FOUC on first paint. Runs synchronously
+// from <head> via <script src="/theme-flash.js">. Lives in public/
+// (not src/) so it is served as a static asset and the strict CSP
+// (script-src 'self') accepts it without an inline-script exception.
+// Keep in sync with the Zustand persist key `docsiq-ui` and the
+// Providers.tsx effect that toggles `.dark`.
+(function () {
+  try {
+    var raw = localStorage.getItem("docsiq-ui");
+    var theme = "system";
+    if (raw) {
+      var parsed = JSON.parse(raw);
+      if (parsed && parsed.state && typeof parsed.state.theme === "string") {
+        theme = parsed.state.theme;
+      }
+    }
+    var effective = theme;
+    if (theme === "system") {
+      effective =
+        window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light";
+    }
+    var root = document.documentElement;
+    root.dataset.theme = effective;
+    if (effective === "dark") root.classList.add("dark");
+  } catch (e) {
+    // localStorage unavailable (privacy mode) — let React decide
+    // after hydration; brief FOUC but no crash. Do not log.
+  }
+})();
