From 582693a4c86eeeb32b1f67452b37aad802115dcc Mon Sep 17 00:00:00 2001
From: sw-factory-automations <software-factory@ona.com>
Date: Sun, 24 May 2026 00:11:05 +0000
Subject: [PATCH 1/2] fix: guard ThemeProvider localStorage access against
 SecurityError
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap localStorage.getItem and localStorage.setItem in try-catch in
theme.tsx to prevent crashes when storage access is denied (restricted
browsers, privacy settings, embedded contexts). Falls back to dark
theme on read, silently ignores on write.

The inline theme script in layout.tsx already had this protection, but
ThemeProvider did not — causing a SecurityError that broke the entire
React render tree for affected users.

Co-authored-by: Ona <no-reply@ona.com>
---
 .agents/conventions.md        |  1 +
 src/lib/sentry/sentry.test.ts |  1 +
 src/lib/theme.test.tsx        | 91 +++++++++++++++++++++++++++++++++++
 src/lib/theme.tsx             | 18 +++++--
 4 files changed, 106 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/theme.test.tsx
diff --git a/.agents/conventions.md b/.agents/conventions.md
index 46e1fcb..1bf6a04 100644
--- a/.agents/conventions.md
+++ b/.agents/conventions.md
@@ -596,6 +596,7 @@ Theme is managed by `src/lib/theme.tsx` which provides `ThemeProvider` and `useT
 - **Flash prevention:** Inline `<script>` in `<head>` reads localStorage before React hydrates.
 - **System detection:** `prefers-color-scheme` media query listener when preference is `"system"`.
 - **Default:** `"dark"` (existing users who haven't set a preference get dark mode).
+- **localStorage safety:** All `localStorage` calls must be wrapped in try-catch. Browsers may throw `SecurityError` when storage access is denied (privacy settings, embedded contexts, enterprise policies). Fall back to `"dark"` on read, silently ignore on write.
 
 ```typescript
 // Reading theme in a client component
diff --git a/src/lib/sentry/sentry.test.ts b/src/lib/sentry/sentry.test.ts
index 9658850..27cfcb8 100644
--- a/src/lib/sentry/sentry.test.ts
+++ b/src/lib/sentry/sentry.test.ts
@@ -20,6 +20,7 @@ const BARE_CATCH_PERMANENT_ALLOWLIST = new Set([
   "src/components/members/invite-form.tsx", // clipboard writeText — intentionally silent on permission denied
   "src/components/members/pending-invite-list.tsx", // clipboard writeText — intentionally silent on permission denied
   "src/lib/use-persisted-expanded.ts", // localStorage read/write — intentionally silent in private browsing / SSR
+  "src/lib/theme.tsx", // localStorage read/write — intentionally silent when storage access is denied (SecurityError)
   "src/components/editor/demo-editor.tsx", // URL validation (new URL() throws) — same pattern as editor.tsx
   "src/components/editor/local-persistence-plugin.tsx", // sessionStorage read/write — intentionally silent in private browsing
 ]);
diff --git a/src/lib/theme.test.tsx b/src/lib/theme.test.tsx
new file mode 100644
index 0000000..abadefc
--- /dev/null
+++ b/src/lib/theme.test.tsx
@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ThemeProvider, useTheme } from "./theme";
+
+function wrapper({ children }: { children: ReactNode }) {
+  return <ThemeProvider>{children}</ThemeProvider>;
+}
+
+describe("ThemeProvider", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.removeAttribute("data-theme");
+    document.documentElement.classList.remove("dark");
+  });
+
+  it("defaults to dark when localStorage is empty", () => {
+    const { result } = renderHook(() => useTheme(), { wrapper });
+    expect(result.current.preference).toBe("dark");
+    expect(result.current.resolved).toBe("dark");
+  });
+
+  it("reads stored preference from localStorage", () => {
+    localStorage.setItem("memo-theme", "light");
+    const { result } = renderHook(() => useTheme(), { wrapper });
+    expect(result.current.preference).toBe("light");
+    expect(result.current.resolved).toBe("light");
+  });
+
+  it("ignores invalid stored values", () => {
+    localStorage.setItem("memo-theme", "invalid-value");
+    const { result } = renderHook(() => useTheme(), { wrapper });
+    expect(result.current.preference).toBe("dark");
+  });
+
+  it("persists preference changes to localStorage", () => {
+    const { result } = renderHook(() => useTheme(), { wrapper });
+    act(() => result.current.setPreference("light"));
+    expect(localStorage.getItem("memo-theme")).toBe("light");
+    expect(result.current.preference).toBe("light");
+  });
+
+  /**
+   * Regression test for Sentry MEMO-2H: SecurityError when localStorage is
+   * blocked (restricted browsers, privacy settings, embedded contexts).
+   * ThemeProvider must fall back to dark theme instead of crashing.
+   */
+  describe("localStorage SecurityError handling", () => {
+    let getItemSpy: ReturnType<typeof vi.spyOn>;
+    let setItemSpy: ReturnType<typeof vi.spyOn>;
+
+    beforeEach(() => {
+      getItemSpy = vi.spyOn(Storage.prototype, "getItem").mockImplementation(
+        () => {
+          throw new DOMException(
+            "Failed to read the 'localStorage' property from 'Window': Access is denied for this document.",
+            "SecurityError",
+          );
+        },
+      );
+      setItemSpy = vi.spyOn(Storage.prototype, "setItem").mockImplementation(
+        () => {
+          throw new DOMException(
+            "Failed to set the 'localStorage' property on 'Window': Access is denied for this document.",
+            "SecurityError",
+          );
+        },
+      );
+    });
+
+    afterEach(() => {
+      getItemSpy.mockRestore();
+      setItemSpy.mockRestore();
+    });
+
+    it("falls back to dark theme when getItem throws SecurityError", () => {
+      const { result } = renderHook(() => useTheme(), { wrapper });
+      expect(result.current.preference).toBe("dark");
+      expect(result.current.resolved).toBe("dark");
+    });
+
+    it("does not crash when setItem throws SecurityError", () => {
+      const { result } = renderHook(() => useTheme(), { wrapper });
+      expect(() => {
+        act(() => result.current.setPreference("light"));
+      }).not.toThrow();
+      expect(result.current.preference).toBe("light");
+      expect(result.current.resolved).toBe("light");
+    });
+  });
+});
diff --git a/src/lib/theme.tsx b/src/lib/theme.tsx
index 2b8453d..35e81f8 100644
--- a/src/lib/theme.tsx
+++ b/src/lib/theme.tsx
@@ -28,17 +28,25 @@ function applyTheme(theme: ResolvedTheme) {
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [preference, setPreferenceState] = useState<ThemePreference>(() => {
     if (typeof window === "undefined") return "dark";
-    const stored = localStorage.getItem(STORAGE_KEY);
-    return stored === "light" || stored === "dark" || stored === "system"
-      ? stored
-      : "dark";
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored === "light" || stored === "dark" || stored === "system"
+        ? stored
+        : "dark";
+    } catch {
+      return "dark";
+    }
   });
   const [resolved, setResolved] = useState<ResolvedTheme>(() =>
     preference === "system" ? getSystemTheme() : preference,
   );
 
   function setPreference(pref: ThemePreference) {
-    localStorage.setItem(STORAGE_KEY, pref);
+    try {
+      localStorage.setItem(STORAGE_KEY, pref);
+    } catch {
+      // Storage unavailable (SecurityError in restricted browsers)
+    }
     setPreferenceState(pref);
     const next = pref === "system" ? getSystemTheme() : pref;
     setResolved(next);

From eca94ce50391cd5ca61cfe5dbbd8e97627b69993 Mon Sep 17 00:00:00 2001
From: sw-factory-automations <software-factory@ona.com>
Date: Sun, 24 May 2026 01:07:15 +0000
Subject: [PATCH 2/2] chore: re-trigger CI (Vercel status stuck pending)

Co-authored-by: Ona <no-reply@ona.com>
