Composer: a subtler, glassy focus ring

webviews/src/agent-session/acpmux/composerStates.css

@@ -279,12 +279,27 @@ button.acpmux-send:disabled:not(.acpmux-cancel):not(.acpmux-send-ready) {
    (Lawrence, Leo 10-14): the same one-device-pixel rim, never a wider ring or the accent, and clear
    with appearance.borders none. Its tone steps 30% toward the text (--acpmux-composer-edge-focus):
    the earlier 8% step was below what an eye can see, so a focused composer was pixel-identical to an
-   idle one in every theme (cg-composer focus audit, 10-14). The card's rim goes round the location
+   idle one in every theme (cg-composer focus audit, 10-14). Leo 2026-10-19 asked for a subtler focus,
+   so it steps 22%: still well clear of the invisible 8%. Over art the glass card also catches more
+   light on its top edge (below). The card's rim goes round the location
    strip too (composerLocation.css), so the focused rim stays one outline. Shell mode takes its own accent,
    the mode's mark. The prompt itself draws no ring (desktop.css, cx-ncc.57). */
 .acpmux-composer,
 .nt-composer {
-  --acpmux-composer-edge-focus: color-mix(in srgb, var(--agent-text) 30%, var(--acpmux-composer-edge));
+  --acpmux-composer-edge-focus: color-mix(in srgb, var(--agent-text) 22%, var(--acpmux-composer-edge));
+}
+/* Glass focus: over art (data-cmux-see-through) a focused card's top-lit rim (#21786) brightens, as
+   light catches a lifted pane of glass, instead of the ring growing heavier. Reduce Transparency
+   draws no rim layer at all (above), so it keeps the plain step. */
+:root[data-cmux-see-through]
+  :is(
+    .acpmux-composer-box:has(:focus-visible),
+    .acpmux-composer:has(> .acpmux-composer-strip :focus-visible) > .acpmux-composer-box
+  ) {
+  --acpmux-composer-rim: inset 0 1px 0 light-dark(
+    color-mix(in srgb, var(--cmux-tone-light) 85%, transparent),
+    color-mix(in srgb, var(--cmux-tone-light) 22%, transparent)
+  );
 }
 :root[data-borders="none"] :is(.acpmux-composer, .nt-composer) {
   --acpmux-composer-edge-focus: transparent;

webviews/test/composer-rim-hairline.test.ts

@@ -16,9 +16,10 @@ import { warmViteServer } from "./support/warmDevServer";
 type Inset = { spread: number; alpha: number };
 
 await requireBrowserLane("composer-rim-hairline.test.ts", async () => {
-  /** The composer edge's alpha over this page's transparent background, and its quiet focus step: 30% text over the edge. */
+  /** The composer edge's alpha over this page's transparent background, and its quiet focus step: 22% text over the edge
+   * (Leo 2026-10-19, a subtler focus; still well past the 8% step an eye could not see). */
   const EDGE = 0.18;
-  const FOCUS = 0.3 + 0.7 * EDGE;
+  const FOCUS = 0.22 + 0.78 * EDGE;
   setDefaultTimeout(120_000);
   try {
     await (await chromium.launch({ headless: true })).close();
@@ -160,6 +161,22 @@ await requireBrowserLane("composer-rim-hairline.test.ts", async () => {
     await page.close();
   });
 
+  // Over art the focused glass card catches more light on its top edge (the glass rim, #21786), in
+  // place of a heavier ring: the ring keeps its one-device-pixel quiet step.
+  test("over art keyboard focus brightens the glass card's top-lit rim", async () => {
+    const page = await open(2);
+    await page.evaluate(() => document.documentElement.setAttribute("data-cmux-see-through", ""));
+    const topRim = async () => (await insets(page, "composer")).find(({ spread }) => spread === 0)?.alpha ?? 0;
+    const rest = await topRim();
+    expect(rest, "the glass card draws its top-lit rim").toBeGreaterThan(0);
+    await page.focus("#composer-field");
+    expect(await topRim(), "focus brightens the top-lit rim").toBeGreaterThan(rest);
+    const ring = (await insets(page, "composer")).filter(({ spread }) => spread > 0);
+    expect(ring.length, "one ring").toBe(1);
+    expect(ring[0]?.alpha, "the ring keeps the quiet focus step").toBeCloseTo(FOCUS, 2);
+    await page.close();
+  });
+
   test("pointer focus leaves the composer rim quiet while keyboard traversal raises it", async () => {
     const page = await open(2);
     const rest = await insets(page, "composer");