From 761b5c1811d71d56b080b7995fef151370388826 Mon Sep 17 00:00:00 2001
From: ErnestZhao <223518102+Siyuan-Zhao770707@users.noreply.github.com>
Date: Mon, 21 Sep 2026 12:19:37 +0800
Subject: [PATCH 1/2] fix(dsh): style the shadow row's reset arrow like the
 blur row's
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`.bc-dim-reset` existed only in the page markup and in the click handler —
the sheet carried no rule for it at all, so the background-shadow row rendered
a raw user-agent button next to the styled pill controls while the identical
blur row below it looked right.

Group both selectors onto one rule so the two cannot drift apart again, and
cover it with a test that reads the class name out of the markup, finds a rule
for exactly that class in the injected sheet, and asserts the two arrows carry
the same declarations. A new control that ships unstyled now fails the suite
instead of reaching users.
---
 integrations/deepseek-harness/console.js      |  7 ++-
 .../deepseek-harness/test/console.test.mjs    | 52 +++++++++++++++++++
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/integrations/deepseek-harness/console.js b/integrations/deepseek-harness/console.js
index 92b9ea0..4e7bf9c 100644
--- a/integrations/deepseek-harness/console.js
+++ b/integrations/deepseek-harness/console.js
@@ -42,8 +42,11 @@
 #beauticode-console-page .bc-blur-slider::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--dsw-alias-border-l3)}
 #beauticode-console-page .bc-blur-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:.5px solid var(--dsw-alias-border-l4);border-radius:50%;background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-shadow-lv1);cursor:pointer}
 #beauticode-console-page .bc-blur-value{min-width:2.6em;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;font-variant-numeric:tabular-nums;text-align:right}
-#beauticode-console-page .bc-blur-reset{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:8px;background:0 0;color:var(--dsw-alias-label-tertiary)}
-#beauticode-console-page .bc-blur-reset:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}
+/* Both reset buttons share one appearance. bc-dim-reset used to be missing from
+   this sheet entirely, so the shadow row rendered a raw UA button next to the
+   styled blur row; keep the two selectors together so they cannot drift again. */
+#beauticode-console-page .bc-dim-reset,#beauticode-console-page .bc-blur-reset{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:8px;background:0 0;color:var(--dsw-alias-label-tertiary)}
+#beauticode-console-page .bc-dim-reset:hover,#beauticode-console-page .bc-blur-reset:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}
 #beauticode-console-page .bc-dim-slider{-webkit-appearance:none;appearance:none;width:120px;height:4px;margin:0;padding:0;border-radius:999px;background:var(--dsw-alias-border-l3);cursor:pointer}
 #beauticode-console-page .bc-dim-slider::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--dsw-alias-border-l3)}
 #beauticode-console-page .bc-dim-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:.5px solid var(--dsw-alias-border-l4);border-radius:50%;background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-shadow-lv1);cursor:pointer}
diff --git a/integrations/deepseek-harness/test/console.test.mjs b/integrations/deepseek-harness/test/console.test.mjs
index 8c2ef37..522881e 100644
--- a/integrations/deepseek-harness/test/console.test.mjs
+++ b/integrations/deepseek-harness/test/console.test.mjs
@@ -590,6 +590,58 @@ test("the reset arrow writes the default value instead of an auto state", async
   assert.equal(page.querySelector(".bc-dim-slider")?.value, "0");
 });
 
+/**
+ * The reset arrows are <button> elements inside a flex control, so they carry no
+ * user-agent affordance of their own: with no rule of their own they render as
+ * raw UA buttons next to the styled pill controls. bc-dim-reset shipped that way
+ * — the shadow row showed a grey box while the identical blur row below it
+ * looked right.
+ *
+ * The check reads the class name out of the markup and then looks for a rule for
+ * exactly that class, so a future control cannot ship unstyled either.
+ */
+test("every reset arrow in the page markup has a rule in the injected sheet", async () => {
+  const document = createConsoleDocument();
+  mountSettingsDialog(document);
+  await loadConsole(document);
+
+  const page = pageEl(document);
+  const sheet = document.head.querySelector("style")?.textContent ?? "";
+  assert.ok(sheet.includes("#beauticode-console-page"), "the console ships its own sheet");
+
+  const classes = [...page.innerHTML.matchAll(/class="(bc-[\w-]*reset)"/g)].map((m) => m[1]);
+  assert.deepEqual(
+    classes.sort(),
+    ["bc-blur-reset", "bc-dim-reset"],
+    "both rows expose a reset arrow",
+  );
+  // The sheet writes the pair as a selector list (`.bc-dim-reset,.bc-blur-reset{…}`)
+  // precisely so the two cannot drift, so locate the declaration block by finding
+  // the class name and then reading forward to its braces: a regex anchored on
+  // `\.name\{` would only accept the one-class-per-rule shape.
+  const decl = (name, suffix = "") => {
+    const at = sheet.indexOf(`.${name}${suffix}`);
+    if (at < 0) return undefined;
+    const open = sheet.indexOf("{", at);
+    const close = sheet.indexOf("}", open);
+    if (open < 0 || close < 0) return undefined;
+    return sheet.slice(open + 1, close);
+  };
+  for (const name of classes) {
+    const base = decl(name);
+    assert.ok(base, `${name} has a base rule`);
+    assert.match(base, /cursor:pointer/, `${name} keeps the hand cursor`);
+    assert.ok(decl(name, ":hover"), `${name} has a hover rule`);
+  }
+  // Same affordance, so the two must not drift apart again.
+  assert.equal(
+    decl("bc-dim-reset"),
+    decl("bc-blur-reset"),
+    "the reset arrows share one appearance",
+  );
+  assert.equal(decl("bc-dim-reset", ":hover"), decl("bc-blur-reset", ":hover"));
+});
+
 /**
  * Fullscreen is the only thing a page may call to hide the browser's own chrome
  * (tab strip, address bar), and browsers only honour the request from inside the

From ffc3ffeda545ab268f38944eb04e643ba80d29e8 Mon Sep 17 00:00:00 2001
From: ErnestZhao <223518102+Siyuan-Zhao770707@users.noreply.github.com>
Date: Mon, 21 Sep 2026 12:35:34 +0800
Subject: [PATCH 2/2] test(dsh): require a selector boundary when locating a
 reset-arrow rule
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review feedback (CodeRabbit, PR #67) on the `decl(name)` helper: a bare
`sheet.indexOf(`.${name}${suffix}`)` also matches a *hover* selector, so
`decl("bc-dim-reset")` would happily return `.bc-dim-reset:hover`'s block when
the base rule is gone.

Measured before/after (delete the shared base rule
`#beauticode-console-page .bc-dim-reset,#beauticode-console-page .bc-blur-reset{…}`
from console.js, then run this file):

| assertion | failure reported |
| --- | --- |
| old (indexOf) | `bc-blur-reset keeps the hand cursor` — names the wrong symptom |
| new (boundary) | `bc-blur-reset has a base rule` — names the actual cause |

So this is not an escape hatch — the test still failed either way, because the
following cursor assertion caught it incidentally — but the failure now points
at the thing that actually broke. The lookahead accepts both shapes the sheet
uses (`.name{…}` and the shared selector list `.a,.b{…}`), which is why the
helper used indexOf in the first place.

Negative control: base rule deleted → 23 pass / 1 fail (as above); base rule
restored → 24 pass / 0 fail.
---
 integrations/deepseek-harness/test/console.test.mjs | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/integrations/deepseek-harness/test/console.test.mjs b/integrations/deepseek-harness/test/console.test.mjs
index 522881e..4270090 100644
--- a/integrations/deepseek-harness/test/console.test.mjs
+++ b/integrations/deepseek-harness/test/console.test.mjs
@@ -620,9 +620,12 @@ test("every reset arrow in the page markup has a rule in the injected sheet", as
   // the class name and then reading forward to its braces: a regex anchored on
   // `\.name\{` would only accept the one-class-per-rule shape.
   const decl = (name, suffix = "") => {
-    const at = sheet.indexOf(`.${name}${suffix}`);
-    if (at < 0) return undefined;
-    const open = sheet.indexOf("{", at);
+    // Require a selector boundary after the name. A bare indexOf would accept
+    // `.bc-dim-reset:hover` as the base rule for `.bc-dim-reset`, so dropping the
+    // base rule while keeping the hover rule would still pass.
+    const match = sheet.match(new RegExp(`\\.${name}${suffix}(?=\\s*[,{])`));
+    if (!match) return undefined;
+    const open = sheet.indexOf("{", match.index);
     const close = sheet.indexOf("}", open);
     if (open < 0 || close < 0) return undefined;
     return sheet.slice(open + 1, close);