fix(cmux-next): align composer control chrome

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

@@ -77,16 +77,18 @@
   display: flex;
   flex: 1 1 auto;
   align-items: center;
-  gap: 6px;
+  /* Keep the folder/computer pair and the optional branch on one optical rhythm.  The
+     controls already carry their own hit-area insets; this is the only inter-control gap. */
+  gap: var(--acpmux-location-gap, 6px);
   min-width: 0;
   height: 100%;
   margin: 0;
   padding: 0 var(--acpmux-strip-pad, 4px);
   box-sizing: border-box;
 }
-/* Folder and computer are two ghost buttons 2 px apart (ui/ghost.css .ui-ghost-row), told apart by
-   their icons; no "·" between them, which floated against the folder's chevron. */
-.acpmux-composer-context > .acpmux-location-leading { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 0; }
+/* Folder and computer share the same small inter-control gap, told apart by their icons; no "·"
+   floats between them against the folder's chevron. */
+.acpmux-composer-context > .acpmux-location-leading { display: flex; align-items: center; gap: var(--acpmux-location-gap, 6px); min-width: 0; flex: 1 1 0; }
 .acpmux-composer-context > .acpmux-location-leading > .acpmux-location-picker,
 .acpmux-composer-context > .acpmux-location-picker { flex: 0 1 auto; min-width: 0; }
 /* The folder gives up width before the computer: the computer never shrinks (even a fraction of a
@@ -147,8 +149,10 @@
   color: var(--agent-text);
 }
 @media (hover: hover) and (pointer: fine) {
-  .acpmux-location-button:hover {
-    background: var(--acpmux-composer-hover);
+  /* A location control is a text/icon affordance.  Its transparent hit area must not turn
+     into a full rounded pill on hover; the open state above remains the persistent menu cue. */
+  .acpmux-location-button.ui-ghost:hover {
+    background: transparent;
     color: var(--agent-text);
   }
 }
@@ -162,10 +166,14 @@
 }
 .acpmux-location-button:active { background: color-mix(in srgb, var(--agent-text) 18%, var(--agent-page-bg, var(--acpmux-base))); }
 .acpmux-location-button:focus-visible {
-  outline: 1.5px solid color-mix(in srgb, var(--agent-text) 55%, transparent);
-  outline-offset: 0;
+  outline: 2px solid color-mix(in srgb, var(--agent-text) 72%, transparent);
+  outline-offset: 2px;
   color: var(--agent-text);
 }
+.acpmux-location-button > .ui-ghost-icon:last-child {
+  /* The chevron path is optically high inside its 14px viewBox. */
+  transform: translateY(0.75px);
+}
 .acpmux-location-label {
   min-width: 0;
   overflow: hidden;
@@ -234,8 +242,11 @@
    test/composer-row-rhythm.test.ts measures it. */
 .acpmux-composer-bar {
   --acpmux-row-inset: 6px;
-  --acpmux-row-gap: 4px;
-  --acpmux-row-group-gap: 12px;
+  /* The model and effort buttons need a 7 px layout gap to draw the same 19 px optical gap as
+     the trailing controls (their 6 px text insets account for the difference). Actions keep the
+     4 px box gap because their icon bearings already add those 3 px visually. */
+  --acpmux-row-gap: 7px;
+  --acpmux-row-group-gap: 10px;
   --acpmux-row-icon-gap: 4px;
   --acpmux-row-edge: 12px;
   min-height: 52px;
@@ -375,7 +386,7 @@
   font-size: var(--text-detail);
 }
 @media (max-width: 480px) {
-  .acpmux-composer-context { gap: 2px; }
+  .acpmux-composer-context { --acpmux-location-gap: 4px; }
   .acpmux-location-button,
   .acpmux-location-readonly { max-width: 145px; }
   .acpmux-location-readonly { padding-inline: 4px; }
@@ -395,7 +406,7 @@
 }
 /* The trailing cluster takes the row's free space on its leading side, in either direction. */
 .acpmux-composer-bar .acpmux-composer-actions {
-  gap: var(--acpmux-row-gap);
+  gap: 4px;
   margin-left: 0;
   margin-inline-start: auto;
 }
@@ -460,7 +471,9 @@
   .acpmux-composer-bar .acpmux-plan:hover,
   .acpmux-composer-bar .acpmux-steer:hover,
   .acpmux-composer-bar .acpmux-mic:not([data-state="listening"], [data-state="finalizing"]):hover {
-    background: var(--acpmux-row-hover);
+    /* Keep hover on the ink, not on the full transparent hit target. */
+    background: transparent;
+    color: var(--agent-text);
   }
 }
 .acpmux-composer-bar .acpmux-picker-button:active,
@@ -492,6 +505,29 @@
 .acpmux-composer-bar .acpmux-access.acpmux-unrestricted .acpmux-picker-button[aria-expanded="true"] {
   color: var(--acpmux-warning);
 }
+.acpmux-composer-bar :is(.acpmux-picker-button, .acpmux-plan, .acpmux-steer, .acpmux-mic):focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--agent-text) 72%, transparent);
+  outline-offset: 0;
+}
+@media (prefers-contrast: more) {
+  .acpmux-composer-bar :is(.acpmux-picker-button, .acpmux-plan, .acpmux-steer, .acpmux-mic):focus-visible {
+    outline-offset: 2px;
+  }
+}
+/* Hover is ink-only, but a selected/open control must keep its state wash while the pointer is
+   over it. */
+.acpmux-composer-bar .acpmux-picker-button[aria-expanded="true"],
+.acpmux-composer-bar .acpmux-access-trigger[aria-expanded="true"] {
+  background: var(--acpmux-row-hover);
+}
+.acpmux-composer-bar .acpmux-plan[aria-pressed="true"]:hover {
+  background: color-mix(in srgb, var(--agent-accent, var(--agent-text)) 22%, transparent);
+}
+.acpmux-composer-bar .acpmux-picker-button > .acpmux-icon:last-child,
+.acpmux-composer-bar .acpmux-access-trigger > .acpmux-icon:last-child {
+  /* Match the location strip's optical correction for the shared down-chevron. */
+  transform: translateY(0.75px);
+}
 .acpmux-composer-bar .acpmux-model-name,
 .acpmux-composer-bar .acpmux-effort .acpmux-picker-button,
 .acpmux-composer-bar .acpmux-access .acpmux-picker-button {
@@ -516,6 +552,7 @@
 .acpmux-composer-bar > :not(.acpmux-chips),
 .acpmux-composer-bar .acpmux-chips > * { flex: none; }
 .acpmux-composer-bar .acpmux-chips > .acpmux-effort { flex: 0 100000 auto; min-width: 44px; }
+.acpmux-composer-bar[data-fit="icons"] .acpmux-chips > .acpmux-effort { min-width: 49px; }
 .acpmux-composer-bar .acpmux-chips > .acpmux-model { flex: 0 1 auto; min-width: 56px; }
 .acpmux-composer-bar .acpmux-effort .acpmux-picker-button,
 .acpmux-composer-bar .acpmux-model .acpmux-picker-button { min-width: 0; max-width: 100%; }

webviews/test/composer-row-rhythm.test.ts

@@ -30,6 +30,8 @@
   box: Span;
   /** What it draws, leading to trailing: text runs and icons (Send: its disc). */
   parts: { kind: "text" | "icon" | "disc"; left: number; right: number }[];
+  /** The shared down-chevron's optical correction, when this control has one. */
+  chevronY?: number;
 };
 type Row = { bar: Span; content: Span; controls: Control[] };
 
@@ -61,6 +63,12 @@
       if (!element || !shown(element)) return [];
       const rect = element.getBoundingClientRect();
       const parts: Control["parts"] = [];
+      const chevron = element.querySelector<SVGElement>(":scope > .acpmux-icon:last-child");
+      const chevronTransform = chevron ? getComputedStyle(chevron).transform : "none";
+      const chevronY =
+        chevronTransform !== "none"
+          ? Number.parseFloat(chevronTransform.match(/matrix\([^,]+,[^,]+,[^,]+,[^,]+,[^,]+,([^)]+)\)/)?.[1] ?? "NaN")
+          : undefined;
       const disc = getComputedStyle(element).backgroundColor;
       if (name === "send" && disc !== "rgba(0, 0, 0, 0)" && disc !== "transparent")
         parts.push({ kind: "disc", left: rect.left, right: rect.right });
@@ -107,7 +115,7 @@
         walk(element);
       }
       parts.sort((a, b) => a.left - b.left);
-      return [{ name, box: { left: rect.left, right: rect.right }, parts }];
+      return [{ name, box: { left: rect.left, right: rect.right }, parts, chevronY }];
     });
     controls.sort((a, b) => a.box.left - b.box.left);
     return {
@@ -262,6 +270,11 @@
               `chips' ${key} differs: ${insides.map((inside) => `${inside.name} ${inside[key]?.toFixed(1) ?? "-"}`).join(", ")}`,
             );
         }
+        // Location and composer pickers share the same optical correction for their down-chevron.
+        for (const control of controls.filter(({ name }) => ["model", "effort", "mode"].includes(name))) {
+          if (control.chevronY === undefined || Math.abs(control.chevronY - 0.75) > 0.05)
+            problems.push(`${control.name} chevron transform is ${control.chevronY ?? "missing"}, expected 0.75`);
+        }
         // The + glyph and Send's disc sit the same distance from the bar's sides.
         const lead = controls[0] ? drawn(controls[0]).left - measured.bar.left : 0;
         const trail = send ? measured.bar.right - drawn(send).right : 0;
@@ -271,6 +284,6 @@
           problems.push(
             `Send ends ${(measured.content.right - send.box.right).toFixed(1)} px before the bar's content edge`,
           );
         expect(problems).toEqual([]);
       });
 });