From 537607201076cb20bef3ec0b6edb52d5c145a900 Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sun, 12 Jul 2026 23:55:06 +0530
Subject: [PATCH] chore: add on-device ?diag= A/B harness for Android soft-nav
 CSS (#936)

The Android-Chrome soft-nav CSS loss (#936) does not reproduce in headless
Blink across every emulated path, so confirming the cause needs a real
device. This adds a query-param A/B harness to the marketing site, the same
on-device method used for the iOS oklch repaint bug (#610).

Loading any page with ?diag=<mode> bakes a small head script (persisted
across client-router soft navs) that applies a repaint/recalc nudge to the
swapped DOM after each nav, plus an on-screen badge showing the active mode
and path. Modes: control (baseline, no nudge), reflow, repaint, recolor,
nudge (display toggle). Whitelisted, so only a known literal reaches the
inline script; entirely absent without the param, so production is
byte-unchanged.

References #936 (diagnostic step; the framework fix follows once a mode is
confirmed to restore styling on-device).
---
 website/app/layout.ts | 58 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/website/app/layout.ts b/website/app/layout.ts
index 3c91fb4b1..6c918f1e9 100644
--- a/website/app/layout.ts
+++ b/website/app/layout.ts
@@ -60,8 +60,19 @@ export function generateMetadata(ctx: { url: string }) {
 const navLink = 'text-fg-muted no-underline font-medium text-sm px-[11px] py-2 rounded-lg transition-colors duration-[140ms] hover:text-fg hover:bg-bg-subtle';
 const panelLink = 'text-fg-muted no-underline font-medium text-sm px-3 py-[10px] rounded-[9px] hover:text-fg hover:bg-bg-subtle';
 
-export default function RootLayout({ children }: { children: unknown }) {
+export default function RootLayout({ children, url }: { children: unknown; url?: string | URL }) {
   const nonce = cspNonce();
+  // #936 on-device A/B diagnostic. Inert unless the ENTRY page is loaded with
+  // ?diag=<mode>. The mode is baked into a head script that persists across
+  // client-router soft navs (add-only head merge keeps it), so loading
+  // /?diag=nudge once governs the whole session. Whitelisted so the value that
+  // reaches the inline script is always a known literal.
+  const DIAG_MODES = new Set(['control', 'reflow', 'repaint', 'recolor', 'nudge']);
+  let diagMode = '';
+  try {
+    const raw = new URL(String(url ?? ''), 'http://x').searchParams.get('diag') || '';
+    if (DIAG_MODES.has(raw)) diagMode = raw;
+  } catch { /* no url in this context */ }
   return html`
     <link rel="icon" href="/public/favicon.svg" type="image/svg+xml" sizes="any">
     <link rel="icon" href="/public/favicon.png" type="image/png" sizes="32x32">
@@ -141,6 +152,51 @@ export default function RootLayout({ children }: { children: unknown }) {
       });
     </script>
 
+    <!-- #936 on-device soft-nav CSS diagnostic. Emitted only when the entry
+         load carried ?diag=<mode>; otherwise diagMode is '' and this whole
+         block is absent, so production is untouched. Applies a repaint/recalc
+         nudge to the swapped DOM after each client-router nav to see which one
+         (if any) restores styling on real Android Chrome. -->
+    ${diagMode ? html`<script nonce="${nonce}" data-webjs-diag="${diagMode}">
+      (function () {
+        var mode = "${diagMode}";
+        var tick = 0;
+        function badge() {
+          var b = document.getElementById('webjs-diag-badge');
+          if (!b) {
+            b = document.createElement('div');
+            b.id = 'webjs-diag-badge';
+            b.style.cssText = 'position:fixed;left:8px;bottom:8px;z-index:99999;background:#111;color:#fff;font:600 12px/1.2 system-ui,sans-serif;padding:6px 9px;border-radius:8px;opacity:0.85;pointer-events:none;max-width:70vw';
+            (document.body || document.documentElement).appendChild(b);
+          }
+          b.textContent = 'diag: ' + mode + ' @ ' + location.pathname;
+        }
+        function nudge() {
+          try {
+            if (mode === 'reflow') { void document.body.offsetHeight; }
+            else if (mode === 'repaint') {
+              var el = document.body;
+              el.style.transform = 'translateZ(0)';
+              requestAnimationFrame(function () { requestAnimationFrame(function () { el.style.transform = ''; }); });
+            }
+            else if (mode === 'recolor') { document.documentElement.style.setProperty('--webjs-diag-tick', String(tick++)); }
+            else if (mode === 'nudge') {
+              var h = document.documentElement, prev = h.style.display;
+              h.style.display = 'none'; void h.offsetHeight; h.style.display = prev;
+            }
+            /* mode 'control' does nothing: it only shows the badge, to confirm the
+               bug still reproduces with the diagnostic script present. */
+          } catch (_) {}
+        }
+        document.addEventListener('webjs:navigate', function () {
+          requestAnimationFrame(function () { nudge(); badge(); });
+        });
+        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', badge);
+        else badge();
+        try { console.log('[webjs-diag] active mode:', mode); } catch (_) {}
+      })();
+    </script>` : ''}
+
     <link rel="stylesheet" href="/public/tailwind.css">
     <style>
       /* Foundation tokens + effects that Tailwind utilities cannot express. */