fix: make debug mode toggle work at runtime

The debug/insecure warning banner was only controlled by the compile-time
DEBUG constant. The settings easter egg checkbox toggled state.debugMode
and the runtime log flag, but neither index.js nor helpers.js checked
these runtime values — the banner was created/updated based solely on
the compile-time constant.

Changes:
- Extract banner logic into updateDebugBanner() in helpers.js that
  checks isDebug() (combines compile-time DEBUG and runtime debugMode)
- Banner is dynamically created/removed: appears when debug is enabled,
  removed when disabled (no stale banners)
- index.js init() syncs runtime debug flag from persisted state before
  first render, then delegates to updateDebugBanner()
- settings.js calls updateDebugBanner() after the checkbox change so
  the banner immediately reflects the new state
- Debug mode persists across popup close/reopen via state.debugMode

Fixes the bug where the settings debug toggle had no visible effect.

src/popup/index.js

@@ -1,18 +1,19 @@
 // AutistMask popup entry point.
 // Loads state, initializes views, triggers first render.
 
-const { DEBUG } = require("../shared/constants");
 const {
     state,
     saveState,
     loadState,
     currentNetwork,
 } = require("../shared/state");
+const { isDebug, setRuntimeDebug } = require("../shared/log");
 const { refreshPrices } = require("../shared/prices");
 const { refreshBalances } = require("../shared/balances");
 const {
     $,
     showView,
+    updateDebugBanner,
     setRenderMain,
     pushCurrentView,
     goBack,
@@ -209,21 +210,11 @@ async function init() {
     await loadState();
     applyTheme(state.theme);
 
-    const net = currentNetwork();
+    // Sync runtime debug flag from persisted state before first render
-    if (DEBUG || net.isTestnet) {
+    setRuntimeDebug(state.debugMode);
-        const banner = document.createElement("div");
+
-        banner.id = "debug-banner";
+    // Create the debug/testnet banner if needed (uses runtime debug state)
-        if (DEBUG && net.isTestnet) {
+    updateDebugBanner();
-            banner.textContent = "DEBUG / INSECURE [TESTNET]";
-        } else if (net.isTestnet) {
-            banner.textContent = "[TESTNET]";
-        } else {
-            banner.textContent = "DEBUG / INSECURE";
-        }
-        banner.style.cssText =
-            "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";
-        document.body.prepend(banner);
-    }
 
     // Auto-default active address
     if (

src/popup/views/helpers.js

@@ -1,6 +1,7 @@
 // Shared DOM helpers used by all views.
 
 const { DEBUG } = require("../../shared/constants");
+const { isDebug } = require("../../shared/log");
 const {
     formatUsd,
     getPrice,
@@ -59,19 +60,37 @@ function showView(name) {
     clearFlash();
     state.currentView = name;
     saveState();
+    updateDebugBanner(name);
+}
+
+// Create or update the debug/insecure warning banner.
+// Called on every view switch and after the settings debug toggle changes.
+// The banner is shown when the compile-time DEBUG constant is true OR when
+// the user has enabled runtime debug mode via the settings easter egg, OR
+// when the active network is a testnet.
+function updateDebugBanner(viewName) {
+    const debug = isDebug();
     const net = currentNetwork();
-    if (DEBUG || net.isTestnet) {
+    const show = debug || net.isTestnet;
-        const banner = document.getElementById("debug-banner");
+    let banner = document.getElementById("debug-banner");
-        if (banner) {
+    if (show) {
-            if (DEBUG && net.isTestnet) {
+        if (!banner) {
-                banner.textContent =
+            banner = document.createElement("div");
-                    "DEBUG / INSECURE [TESTNET] (" + name + ")";
+            banner.id = "debug-banner";
-            } else if (net.isTestnet) {
+            banner.style.cssText =
-                banner.textContent = "[TESTNET]";
+                "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";
-            } else {
+            document.body.prepend(banner);
-                banner.textContent = "DEBUG / INSECURE (" + name + ")";
-            }
         }
+        const suffix = viewName ? " (" + viewName + ")" : "";
+        if (debug && net.isTestnet) {
+            banner.textContent = "DEBUG / INSECURE [TESTNET]" + suffix;
+        } else if (net.isTestnet) {
+            banner.textContent = "[TESTNET]" + suffix;
+        } else {
+            banner.textContent = "DEBUG / INSECURE" + suffix;
+        }
+    } else if (banner) {
+        banner.remove();
     }
 }
 
@@ -417,6 +436,7 @@ module.exports = {
     showError,
     hideError,
     showView,
+    updateDebugBanner,
     setRenderMain,
     pushCurrentView,
     goBack,

src/popup/views/settings.js

@@ -1,6 +1,7 @@
 const {
     $,
     showView,
+    updateDebugBanner,
     showFlash,
     escapeHtml,
     flashCopyFeedback,
@@ -372,11 +373,12 @@ function init(ctx) {
         }
     });
 
-    // Debug mode toggle
+    // Debug mode toggle — update runtime flag, persist, and re-render banner
     $("settings-debug-mode").addEventListener("change", async () => {
         state.debugMode = $("settings-debug-mode").checked;
         setRuntimeDebug(state.debugMode);
         await saveState();
+        updateDebugBanner(state.currentView);
     });
 
     // Sync runtime debug flag on init