From 20b3160b362396e60de5de5c49d4bdfcc57e4355 Mon Sep 17 00:00:00 2001
From: Hussain Jamal <hjamal9865@gmail.com>
Date: Sat, 9 May 2026 04:30:27 +0500
Subject: [PATCH 1/5] Fix dropdown visibility contrast issue

---
 .../components/configuration-selector.tsx     | 32 ++++---
 .../version-selector-panel.tsx                | 92 +++++++++++--------
 .../components/controls/select-control.tsx    | 51 +++++-----
 3 files changed, 104 insertions(+), 71 deletions(-)

diff --git a/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
index b748fbbd..2173454a 100644
--- a/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Info } from "lucide-react";
+import { Info, ChevronDown } from "lucide-react";
 import type { Telemetry } from "@/types/javaagent";
 
 interface ConfigurationSelectorProps {
@@ -53,18 +53,24 @@ export function ConfigurationSelector({
           >
             Configuration
           </label>
-          <select
-            id="config-select"
-            value={selectedWhen}
-            onChange={(e) => onWhenChange(e.target.value)}
-            className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 min-w-0 flex-1 cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none sm:min-w-[200px] sm:flex-none"
-          >
-            {telemetry.map((t) => (
-              <option key={t.when} value={t.when}>
-                {getConfigLabel(t.when)}
-              </option>
-            ))}
-          </select>
+          <div className="relative flex-1 sm:flex-none">
+            <select
+              id="config-select"
+              value={selectedWhen}
+              onChange={(e) => onWhenChange(e.target.value)}
+              className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 min-w-0 w-full cursor-pointer appearance-none rounded-lg border-2 py-2.5 pr-10 pl-4 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none sm:min-w-[200px]"
+            >
+              {telemetry.map((t) => (
+                <option key={t.when} value={t.when} className="bg-card text-foreground">
+                  {getConfigLabel(t.when)}
+                </option>
+              ))}
+            </select>
+            <ChevronDown
+              className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+              aria-hidden="true"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx b/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
index b3ef2de5..16b0dbd3 100644
--- a/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Info } from "lucide-react";
+import { Info, ChevronDown } from "lucide-react";
 import type { VersionInfo } from "@/types/javaagent";
 
 interface VersionSelectorPanelProps {
@@ -59,18 +59,24 @@ export function VersionSelectorPanel({
             >
               From
             </label>
-            <select
-              id="from-version-select"
-              value={fromVersion}
-              onChange={(e) => onFromVersionChange(e.target.value)}
-              className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 w-full cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none"
-            >
-              {versions.map((v) => (
-                <option key={v.version} value={v.version}>
-                  {v.version} {v.is_latest ? "(latest)" : ""}
-                </option>
-              ))}
-            </select>
+            <div className="relative">
+              <select
+                id="from-version-select"
+                value={fromVersion}
+                onChange={(e) => onFromVersionChange(e.target.value)}
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+              >
+                {versions.map((v) => (
+                  <option key={v.version} value={v.version} className="bg-card text-foreground">
+                    {v.version} {v.is_latest ? "(latest)" : ""}
+                  </option>
+                ))}
+              </select>
+              <ChevronDown
+                className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+                aria-hidden="true"
+              />
+            </div>
           </div>
 
           {/* To version selector */}
@@ -81,18 +87,24 @@ export function VersionSelectorPanel({
             >
               To
             </label>
-            <select
-              id="to-version-select"
-              value={toVersion}
-              onChange={(e) => onToVersionChange(e.target.value)}
-              className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 w-full cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none"
-            >
-              {versions.map((v) => (
-                <option key={v.version} value={v.version}>
-                  {v.version} {v.is_latest ? "(latest)" : ""}
-                </option>
-              ))}
-            </select>
+            <div className="relative">
+              <select
+                id="to-version-select"
+                value={toVersion}
+                onChange={(e) => onToVersionChange(e.target.value)}
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+              >
+                {versions.map((v) => (
+                  <option key={v.version} value={v.version} className="bg-card text-foreground">
+                    {v.version} {v.is_latest ? "(latest)" : ""}
+                  </option>
+                ))}
+              </select>
+              <ChevronDown
+                className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+                aria-hidden="true"
+              />
+            </div>
           </div>
         </div>
 
@@ -104,18 +116,24 @@ export function VersionSelectorPanel({
             >
               Configuration
             </label>
-            <select
-              id="when-condition-select"
-              value={whenCondition}
-              onChange={(e) => onWhenConditionChange(e.target.value)}
-              className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 w-full cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none"
-            >
-              {availableConditions.map((c) => (
-                <option key={c} value={c}>
-                  {c === "default" ? "Default" : c}
-                </option>
-              ))}
-            </select>
+            <div className="relative">
+              <select
+                id="when-condition-select"
+                value={whenCondition}
+                onChange={(e) => onWhenConditionChange(e.target.value)}
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+              >
+                {availableConditions.map((c) => (
+                  <option key={c} value={c} className="bg-card text-foreground">
+                    {c === "default" ? "Default" : c}
+                  </option>
+                ))}
+              </select>
+              <ChevronDown
+                className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+                aria-hidden="true"
+              />
+            </div>
           </div>
         )}
       </div>
diff --git a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
index 3ff28bd9..64e95b49 100644
--- a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
+++ b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { useId } from "react";
+import { ChevronDown } from "lucide-react";
 import type { SelectNode } from "@/types/configuration";
 import { useConfigurationBuilder } from "@/hooks/use-configuration-builder";
 import { ControlWrapper } from "./control-wrapper";
@@ -26,7 +27,7 @@ interface SelectControlProps {
 }
 
 const SELECT_CLASS =
-  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20";
+  "w-full appearance-none rounded-lg border border-border/60 bg-background/80 px-4 pr-10 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20";
 
 export function SelectControl({ node, path, value, onChange }: SelectControlProps) {
   const id = useId();
@@ -41,26 +42,34 @@ export function SelectControl({ node, path, value, onChange }: SelectControlProp
       descriptionId={node.description ? descId : undefined}
       error={error}
     >
-      <select
-        id={id}
-        value={value ?? ""}
-        aria-describedby={node.description ? descId : undefined}
-        aria-required={node.required || undefined}
-        onChange={(e) => onChange(path, e.target.value === "" ? null : e.target.value)}
-        onBlur={() => validateField(path)}
-        className={SELECT_CLASS}
-      >
-        {node.nullable ? (
-          <option value="">{node.nullBehavior ?? node.defaultBehavior ?? "Default"}</option>
-        ) : value === null ? (
-          <option value="" disabled hidden />
-        ) : null}
-        {node.enumOptions.map((opt) => (
-          <option key={opt.value} value={opt.value}>
-            {opt.value}
-          </option>
-        ))}
-      </select>
+      <div className="relative">
+        <select
+          id={id}
+          value={value ?? ""}
+          aria-describedby={node.description ? descId : undefined}
+          aria-required={node.required || undefined}
+          onChange={(e) => onChange(path, e.target.value === "" ? null : e.target.value)}
+          onBlur={() => validateField(path)}
+          className={SELECT_CLASS}
+        >
+          {node.nullable ? (
+            <option value="" className="bg-card text-foreground">
+              {node.nullBehavior ?? node.defaultBehavior ?? "Default"}
+            </option>
+          ) : value === null ? (
+            <option value="" disabled hidden className="bg-card text-foreground" />
+          ) : null}
+          {node.enumOptions.map((opt) => (
+            <option key={opt.value} value={opt.value} className="bg-card text-foreground">
+              {opt.value}
+            </option>
+          ))}
+        </select>
+        <ChevronDown
+          className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+          aria-hidden="true"
+        />
+      </div>
     </ControlWrapper>
   );
 }

From 05a826441225ae1090760ae2f48bddfc741224be Mon Sep 17 00:00:00 2001
From: Hussain Jamal <hjamal9865@gmail.com>
Date: Sun, 10 May 2026 03:45:15 +0500
Subject: [PATCH 2/5] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 .../features/java-agent/components/configuration-selector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
index 2173454a..946b8f0e 100644
--- a/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
@@ -58,10 +58,10 @@ export function ConfigurationSelector({
               id="config-select"
               value={selectedWhen}
               onChange={(e) => onWhenChange(e.target.value)}
-              className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 min-w-0 w-full cursor-pointer appearance-none rounded-lg border-2 py-2.5 pr-10 pl-4 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none sm:min-w-[200px]"
+              className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 min-w-0 w-full cursor-pointer appearance-none rounded-lg border-2 py-2.5 pr-10 pl-4 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark] sm:min-w-[200px]"
             >
               {telemetry.map((t) => (
-                <option key={t.when} value={t.when} className="bg-card text-foreground">
+                <option key={t.when} value={t.when}>
                   {getConfigLabel(t.when)}
                 </option>
               ))}

From 81473a06c179ac907d58e80e688ef24ffa22f96b Mon Sep 17 00:00:00 2001
From: Hussain Jamal <hjamal9865@gmail.com>
Date: Sun, 10 May 2026 04:24:46 +0500
Subject: [PATCH 3/5] fix: improve dark mode select dropdown accessibility

---
 .../telemetry-comparison/version-selector-panel.tsx  | 12 ++++++------
 .../java-agent/components/version-selector.tsx       |  2 +-
 .../components/controls/control-styles.ts            |  4 ++--
 .../components/controls/select-control.tsx           |  8 ++++----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx b/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
index 16b0dbd3..0796b078 100644
--- a/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
@@ -64,10 +64,10 @@ export function VersionSelectorPanel({
                 id="from-version-select"
                 value={fromVersion}
                 onChange={(e) => onFromVersionChange(e.target.value)}
-                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
               >
                 {versions.map((v) => (
-                  <option key={v.version} value={v.version} className="bg-card text-foreground">
+                  <option key={v.version} value={v.version}>
                     {v.version} {v.is_latest ? "(latest)" : ""}
                   </option>
                 ))}
@@ -92,10 +92,10 @@ export function VersionSelectorPanel({
                 id="to-version-select"
                 value={toVersion}
                 onChange={(e) => onToVersionChange(e.target.value)}
-                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
               >
                 {versions.map((v) => (
-                  <option key={v.version} value={v.version} className="bg-card text-foreground">
+                  <option key={v.version} value={v.version}>
                     {v.version} {v.is_latest ? "(latest)" : ""}
                   </option>
                 ))}
@@ -121,10 +121,10 @@ export function VersionSelectorPanel({
                 id="when-condition-select"
                 value={whenCondition}
                 onChange={(e) => onWhenConditionChange(e.target.value)}
-                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
               >
                 {availableConditions.map((c) => (
-                  <option key={c} value={c} className="bg-card text-foreground">
+                  <option key={c} value={c}>
                     {c === "default" ? "Default" : c}
                   </option>
                 ))}
diff --git a/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx b/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx
index 95688450..2c8a1267 100644
--- a/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx
@@ -41,7 +41,7 @@ export function VersionSelector({
           id={id}
           value={currentVersion}
           onChange={(e) => onVersionChange(e.target.value)}
-          className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 cursor-pointer appearance-none rounded-lg border py-1.5 pr-8 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+          className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 cursor-pointer appearance-none rounded-lg border py-1.5 pr-8 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
         >
           {versions.map((v) => (
             <option key={v.version} value={v.version}>
diff --git a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts
index b4b7b809..7ebb6046 100644
--- a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts
+++ b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts
@@ -20,11 +20,11 @@
  * touches one place.
  */
 export const INPUT_CLASS =
-  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20";
+  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:[color-scheme:dark]";
 
 /**
  * Compact variant used by list-of-input controls (string-list, number-list)
  * where each row needs a tighter vertical rhythm than a standalone input.
  */
 export const LIST_INPUT_CLASS =
-  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20";
+  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:[color-scheme:dark]";
diff --git a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
index 64e95b49..1cea1256 100644
--- a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
+++ b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
@@ -27,7 +27,7 @@ interface SelectControlProps {
 }
 
 const SELECT_CLASS =
-  "w-full appearance-none rounded-lg border border-border/60 bg-background/80 px-4 pr-10 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20";
+  "w-full appearance-none rounded-lg border border-border/60 bg-background/80 px-4 pr-10 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:[color-scheme:dark]";
 
 export function SelectControl({ node, path, value, onChange }: SelectControlProps) {
   const id = useId();
@@ -53,14 +53,14 @@ export function SelectControl({ node, path, value, onChange }: SelectControlProp
           className={SELECT_CLASS}
         >
           {node.nullable ? (
-            <option value="" className="bg-card text-foreground">
+            <option value="">
               {node.nullBehavior ?? node.defaultBehavior ?? "Default"}
             </option>
           ) : value === null ? (
-            <option value="" disabled hidden className="bg-card text-foreground" />
+            <option value="" disabled hidden />
           ) : null}
           {node.enumOptions.map((opt) => (
-            <option key={opt.value} value={opt.value} className="bg-card text-foreground">
+            <option key={opt.value} value={opt.value}>
               {opt.value}
             </option>
           ))}

From 12511cf3c0c6e82251d5b30fe0276df4c3d1e156 Mon Sep 17 00:00:00 2001
From: Hussain Jamal <hjamal9865@gmail.com>
Date: Sun, 10 May 2026 04:32:02 +0500
Subject: [PATCH 4/5] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 .../configuration/components/controls/select-control.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
index 1cea1256..54826a41 100644
--- a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
+++ b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
@@ -27,7 +27,7 @@ interface SelectControlProps {
 }
 
 const SELECT_CLASS =
-  "w-full appearance-none rounded-lg border border-border/60 bg-background/80 px-4 pr-10 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:[color-scheme:dark]";
+  "w-full appearance-none rounded-lg border border-border/60 bg-background/80 px-4 pr-10 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 [color-scheme:dark]";
 
 export function SelectControl({ node, path, value, onChange }: SelectControlProps) {
   const id = useId();

From 85739ec3bb9a7152176baeee414e2d1345e24246 Mon Sep 17 00:00:00 2001
From: Hussain Jamal <hjamal9865@gmail.com>
Date: Sun, 10 May 2026 04:39:03 +0500
Subject: [PATCH 5/5] fix: improve dark mode

---
 .../java-agent/components/configuration-selector.tsx        | 2 +-
 .../telemetry-comparison/version-selector-panel.tsx         | 6 +++---
 .../src/features/java-agent/components/version-selector.tsx | 2 +-
 .../configuration/components/controls/control-styles.ts     | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
index 946b8f0e..83403b7f 100644
--- a/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
@@ -58,7 +58,7 @@ export function ConfigurationSelector({
               id="config-select"
               value={selectedWhen}
               onChange={(e) => onWhenChange(e.target.value)}
-              className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 min-w-0 w-full cursor-pointer appearance-none rounded-lg border-2 py-2.5 pr-10 pl-4 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark] sm:min-w-[200px]"
+              className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 min-w-0 w-full cursor-pointer appearance-none rounded-lg border-2 py-2.5 pr-10 pl-4 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none [color-scheme:dark] sm:min-w-[200px]"
             >
               {telemetry.map((t) => (
                 <option key={t.when} value={t.when}>
diff --git a/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx b/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
index 0796b078..6a9a9538 100644
--- a/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
@@ -64,7 +64,7 @@ export function VersionSelectorPanel({
                 id="from-version-select"
                 value={fromVersion}
                 onChange={(e) => onFromVersionChange(e.target.value)}
-                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none [color-scheme:dark]"
               >
                 {versions.map((v) => (
                   <option key={v.version} value={v.version}>
@@ -92,7 +92,7 @@ export function VersionSelectorPanel({
                 id="to-version-select"
                 value={toVersion}
                 onChange={(e) => onToVersionChange(e.target.value)}
-                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none [color-scheme:dark]"
               >
                 {versions.map((v) => (
                   <option key={v.version} value={v.version}>
@@ -121,7 +121,7 @@ export function VersionSelectorPanel({
                 id="when-condition-select"
                 value={whenCondition}
                 onChange={(e) => onWhenConditionChange(e.target.value)}
-                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none [color-scheme:dark]"
               >
                 {availableConditions.map((c) => (
                   <option key={c} value={c}>
diff --git a/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx b/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx
index 2c8a1267..3e7def43 100644
--- a/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx
@@ -41,7 +41,7 @@ export function VersionSelector({
           id={id}
           value={currentVersion}
           onChange={(e) => onVersionChange(e.target.value)}
-          className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 cursor-pointer appearance-none rounded-lg border py-1.5 pr-8 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
+          className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 cursor-pointer appearance-none rounded-lg border py-1.5 pr-8 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none [color-scheme:dark]"
         >
           {versions.map((v) => (
             <option key={v.version} value={v.version}>
diff --git a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts
index 7ebb6046..4a4781f5 100644
--- a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts
+++ b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts
@@ -20,11 +20,11 @@
  * touches one place.
  */
 export const INPUT_CLASS =
-  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:[color-scheme:dark]";
+  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 [color-scheme:dark]";
 
 /**
  * Compact variant used by list-of-input controls (string-list, number-list)
  * where each row needs a tighter vertical rhythm than a standalone input.
  */
 export const LIST_INPUT_CLASS =
-  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:[color-scheme:dark]";
+  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 [color-scheme:dark]";