From 2f1c904d746f6b543f0973e2ac72cf19ad651ea7 Mon Sep 17 00:00:00 2001
From: Randi <55005611+rdself@users.noreply.github.com>
Date: Tue, 28 Apr 2026 07:31:48 -0400
Subject: [PATCH] Fix light mode active request payload modal (#1714)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Integrated into release/v3.7.3 — fixes light mode payload modal transparency
---
 src/app/globals.css                           |  3 +++
 src/shared/components/ActiveRequestsPanel.tsx |  6 +++---
 tests/integration/integration-wiring.test.ts  | 21 +++++++++++++++++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 8cafa49ba0..bed5113281 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -41,6 +41,7 @@
   --color-bg-primary: #f9f9fb;
   --color-bg-subtle: #f0f0f5;
   --color-surface: #ffffff;
+  --color-card: #ffffff;
   --color-sidebar: #f5f5fa;
   --color-border: rgba(0, 0, 0, 0.08);
   --color-text-main: #1a1a2e;
@@ -61,6 +62,7 @@
   --color-bg-primary: #0b0e14;
   --color-bg-subtle: #111520;
   --color-surface: #161b22;
+  --color-card: #161b22;
   --color-sidebar: #10141e;
   --color-border: rgba(255, 255, 255, 0.08);
   --color-text-main: #e6e6ef;
@@ -93,6 +95,7 @@
   --color-bg-primary: var(--color-bg-primary);
   --color-bg-subtle: var(--color-bg-subtle);
   --color-surface: var(--color-surface);
+  --color-card: var(--color-card);
   --color-sidebar: var(--color-sidebar);
   --color-border: var(--color-border);
   --color-text-main: var(--color-text-main);
diff --git a/src/shared/components/ActiveRequestsPanel.tsx b/src/shared/components/ActiveRequestsPanel.tsx
index 074983ed86..7de34f721d 100644
--- a/src/shared/components/ActiveRequestsPanel.tsx
+++ b/src/shared/components/ActiveRequestsPanel.tsx
@@ -67,7 +67,7 @@ export default function ActiveRequestsPanel() {
   }
 
   return (
-    <div className="rounded-xl border border-border bg-card/70">
+    <div className="rounded-xl border border-border bg-surface">
       <div className="flex items-center justify-between gap-4 border-b border-border px-4 py-3">
         <div>
           <h3 className="text-sm font-semibold uppercase tracking-wide text-text-main">
@@ -120,8 +120,8 @@ export default function ActiveRequestsPanel() {
       </div>
 
       {selectedRow && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4 py-6">
-          <div className="flex max-h-[85vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-2xl">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 px-4 py-6 backdrop-blur-sm">
+          <div className="flex max-h-[85vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-border bg-surface shadow-2xl">
             <div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
               <div>
                 <h4 className="text-lg font-semibold text-text-main">
diff --git a/tests/integration/integration-wiring.test.ts b/tests/integration/integration-wiring.test.ts
index d805c5d99a..8dfface716 100644
--- a/tests/integration/integration-wiring.test.ts
+++ b/tests/integration/integration-wiring.test.ts
@@ -257,6 +257,27 @@ describe("API Routes — dashboard and tool consumers", () => {
     assertRouteMethods("src/app/api/usage/call-logs/[id]/route.ts", ["GET"]);
   });
 
+  it("keeps the active request payload modal on opaque theme surfaces", () => {
+    const activeRequests = readProjectFile("src/shared/components/ActiveRequestsPanel.tsx");
+    const globals = readProjectFile("src/app/globals.css");
+
+    assert.ok(activeRequests, "ActiveRequestsPanel should exist");
+    assert.ok(globals, "globals.css should exist");
+    assert.match(globals, /--color-card:\s+#ffffff/);
+    assert.match(globals, /--color-card:\s+#161b22/);
+    assert.match(globals, /--color-card:\s+var\(--color-card\)/);
+    assert.match(activeRequests, /rounded-xl border border-border bg-surface/);
+    assert.match(activeRequests, /backdrop-blur-sm/);
+    assert.match(
+      activeRequests,
+      /rounded-2xl[^"]*border border-border[^"]*bg-surface[^"]*shadow-2xl/
+    );
+    assert.doesNotMatch(activeRequests, /bg-card\/70/);
+    assert.doesNotMatch(activeRequests, /rounded-2xl[^"]*bg-card/);
+    assert.doesNotMatch(activeRequests, /shadow-\[/);
+    assert.doesNotMatch(activeRequests, /border-black\/10/);
+  });
+
   it("keeps usage quota wired through A2A and MCP tools", () => {
     const quotaSkill = readProjectFile("src/lib/a2a/skills/quotaManagement.ts");
     const mcpAdvancedTools = readProjectFile("open-sse/mcp-server/tools/advancedTools.ts");