fix(dsh): style the shadow row's reset arrow like the blur row's

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}

integrations/deepseek-harness/test/console.test.mjs

@@ -590,6 +590,61 @@ 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 = "") => {
+    // 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);
+  };
+  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