From f385c2254bd02095d158650a1c9c59d3e00f0e2d Mon Sep 17 00:00:00 2001
From: infosave2007 <urevich55@gmail.com>
Date: Sat, 8 Aug 2026 14:12:39 +0300
Subject: [PATCH] fix(ui): install-command chip and bands slider readable in
 the light theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The chip used var(--panel-2, #23252c) — a variable that doesn't exist with
a hard dark fallback, so in the light theme the install command was a dark
box with dark text. Same class of bug in the bands slider track and handle
labels (invented --panel-2/--fg vars). All moved to the real theme
variables (--panel/--border/--text) via a .cmd-chip class; verified by
computed styles in the light theme (text rgb(15,23,42) on white) and
screenshots of both views.
---
 web/css/styles.css   | 9 ++++++---
 web/js/views/keys.js | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/css/styles.css b/web/css/styles.css
index 2913cd1..3eae362 100644
--- a/web/css/styles.css
+++ b/web/css/styles.css
@@ -599,17 +599,20 @@ body.modal-open { overflow: hidden; }
 
 /* Complexity bands slider */
 .bands-wrap { margin: 4px 0 16px; }
-.bands-track { position: relative; height: 14px; border-radius: 8px; background: var(--panel-2, #23252c); margin: 26px 8px 10px; }
+/* one-line command chip (install commands etc.) — theme-aware */
+.cmd-chip { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 2px 8px; border-radius: 6px; }
+
+.bands-track { position: relative; height: 14px; border-radius: 8px; background: var(--border); margin: 26px 8px 10px; }
 .bands-track.disabled { opacity: .45; pointer-events: none; }
 .bands-zone { position: absolute; top: 0; bottom: 0; }
 .bands-zone.z-low { left: 0; background: color-mix(in srgb, var(--good) 45%, transparent); border-radius: 8px 0 0 8px; }
 .bands-zone.z-med { background: color-mix(in srgb, var(--warn, #f59e0b) 55%, transparent); }
 .bands-zone.z-high { background: color-mix(in srgb, #dc2626 65%, transparent); border-radius: 0 8px 8px 0; }
 .bands-handle { position: absolute; top: -5px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
-  background: var(--fg, #fff); border: 3px solid var(--accent, #6c6cf5); cursor: grab; touch-action: none; z-index: 2; }
+  background: #fff; border: 3px solid var(--accent); cursor: grab; touch-action: none; z-index: 2; }
 .bands-handle:active { cursor: grabbing; }
 .bands-val { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: 11.5px;
-  font-family: var(--mono, monospace); color: var(--fg); background: var(--panel, #1b1d23); padding: 1px 6px;
+  font-family: var(--mono, monospace); color: var(--text); background: var(--panel); padding: 1px 6px;
   border-radius: 6px; border: 1px solid var(--border, #333); white-space: nowrap; }
 .bands-val.raised { top: -46px; }
 .bands-legend { display: flex; gap: 8px; margin: 6px 8px 0; flex-wrap: wrap; }
diff --git a/web/js/views/keys.js b/web/js/views/keys.js
index 83a7cd6..6005236 100644
--- a/web/js/views/keys.js
+++ b/web/js/views/keys.js
@@ -270,7 +270,7 @@ console.log(resp.choices[0].message.content);`,
           h("span", { class: "muted" }, "○ " + t("keys.h.st.notFound")),
           cmd ? h("div", { class: "flex", style: "gap:6px; align-items:center; margin-top:4px" },
             h("span", { class: "muted" }, t("keys.h.install")),
-            h("code", { class: "mono small", style: "background:var(--panel-2,#23252c); padding:2px 8px; border-radius:6px" }, cmd),
+            h("code", { class: "mono small cmd-chip" }, cmd),
             copyInstall) : null);
       }
     }