From 8edc758c7ba02332e95450c61854aaab30544302 Mon Sep 17 00:00:00 2001 From: Leo Li Date: Tue, 20 Oct 2026 23:35:10 -0700 Subject: [PATCH 1/2] webviews: the Options chip truncates only when its row is full, and takes its row's pill shape (two base reds) fe0e57b3e1c added the composer's Options chip with a 180px cap on its face and the access chip's 999px radius. chip-fixed-width (Leo 2026-10-20: chips truncate only when the row is full) and agent-pane-no-capsules (pills only for the composer's chip family) went red on base. The face now shrinks with the row and ellipsizes there; the chip is listed with the model, effort and access chips it sits beside, whose pill is the Claude app's (#22107). Co-Authored-By: Claude Opus 5.5 Agent-Session: https://cmux.com/deeplink/agent?harness=claude&session=01a15cfb-0392-7f93-b611-98366b6dc130&host=cosmic-gray --- .../src/agent-session/acpmux/composerControls.css | 13 ++++++++++--- webviews/test/agent-pane-no-capsules.test.ts | 6 ++++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/webviews/src/agent-session/acpmux/composerControls.css b/webviews/src/agent-session/acpmux/composerControls.css index 03488758f694..bf45dec6756f 100644 --- a/webviews/src/agent-session/acpmux/composerControls.css +++ b/webviews/src/agent-session/acpmux/composerControls.css @@ -249,18 +249,25 @@ .acpmux-chip-pending { pointer-events: none; } .acpmux-chip-pending .acpmux-picker-button:hover { background: none; } /* The Options chip (AgentOptionsMenu): the harness's other settings, a quiet pill like the access - chip, its face one option's name and choice or "Options". */ + chip, its face one option's name and choice or "Options". It gives way only when its row is + full: the chip shrinks with the row and its face ellipsizes there, never at a fixed width while + the row has room (chip-fixed-width.test.ts). */ :is(.acpmux-composer-bar, .nt-pickers) .acpmux-options .acpmux-picker-button { height: 28px; + min-width: 0; + max-width: 100%; gap: 4px; padding: 0 6px 0 8px; border-radius: 999px; color: var(--agent-muted); } +:is(.acpmux-composer-bar, .nt-pickers) .acpmux-chips > .acpmux-options { flex: 0 1 auto; min-width: 0; } .acpmux-options .acpmux-picker-button[aria-expanded="true"], .acpmux-options .acpmux-picker-button:hover { color: var(--agent-text); } -.acpmux-options-text { - max-width: 180px; +.acpmux-options-text, +.acpmux-composer-bar .acpmux-options .acpmux-options-text { + flex: 0 1 auto; + min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/webviews/test/agent-pane-no-capsules.test.ts b/webviews/test/agent-pane-no-capsules.test.ts index 3e3fc649a480..398a906186e2 100644 --- a/webviews/test/agent-pane-no-capsules.test.ts +++ b/webviews/test/agent-pane-no-capsules.test.ts @@ -19,8 +19,9 @@ if (!built && process.env.CI) throw new Error(`agent-pane-no-capsules: ${page} i if (!built) console.warn("agent-pane-no-capsules: skipping (run scripts/cmux-next/build-agent-pane-web.sh)"); /** Capsules by nature: a toggle's track, a slider's track and fill, a progress bar, drawn lines, - * and the composer's model, effort and access chips, whose hover, focus and open background is the - * Claude app's soft pill (#22107; composer-chip-plain-rest and composer-chip-press check it). The + * and the composer's model, effort, access and Options chips, whose hover, focus and open background + * is the Claude app's soft pill (#22107; composer-chip-plain-rest and composer-chip-press check it). + * The Options chip (AgentOptionsMenu) sits in the same row and takes the access chip's shape. The * Cards New Tab template (u2851, from the user's scrawl of Aside's New Tab page) is a pill design * on purpose: its field, its Search | Ask switch (track, thumb and buttons) and its selected Chats * tab are round (newtab/screen.css). The other templates keep small-radius rects. */ @@ -33,6 +34,7 @@ const SHAPES = new Set([ ":is(.acpmux-composer-bar,.nt-pickers) .acpmux-model .acpmux-picker-button", ":is(.acpmux-composer-bar,.nt-pickers) .acpmux-effort .acpmux-picker-button", ":is(.acpmux-composer-bar,.nt-pickers) .acpmux-access .acpmux-picker-button", + ":is(.acpmux-composer-bar,.nt-pickers) .acpmux-options .acpmux-picker-button", ".acpmux-model .acpmux-picker-button", ".acpmux-effort .acpmux-picker-button", ".acpmux-access .acpmux-picker-button", From 6204e92b745b364c79ec126073972d17974506ce Mon Sep 17 00:00:00 2001 From: Leo Li Date: Tue, 20 Oct 2026 23:42:30 -0700 Subject: [PATCH 2/2] webviews: the composer row takes its steps before the Options chip gives up text, and the chip keeps a floor Review of #23068: as the row's only shrinking item, the Options chip took the whole shortfall first, hid the overflow from composerRowFit (so no label stepped down) and could shrink to nothing. The row now counts the face's whole width (data-fit-natural), and the chip stops at the New Tab model chip's 56px floor. Co-Authored-By: Claude Opus 5.5 Agent-Session: https://cmux.com/deeplink/agent?harness=claude&session=01a15cfb-0392-7f93-b611-98366b6dc130&host=cosmic-gray --- webviews/src/agent-session/acpmux/AgentOptionsMenu.tsx | 4 +++- webviews/src/agent-session/acpmux/composerControls.css | 7 ++++--- webviews/src/agent-session/acpmux/composerRowFit.ts | 4 ++++ 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/webviews/src/agent-session/acpmux/AgentOptionsMenu.tsx b/webviews/src/agent-session/acpmux/AgentOptionsMenu.tsx index ba8295992503..ec9c93c2114d 100644 --- a/webviews/src/agent-session/acpmux/AgentOptionsMenu.tsx +++ b/webviews/src/agent-session/acpmux/AgentOptionsMenu.tsx @@ -38,7 +38,9 @@ export function AgentOptionsMenu({ aria-haspopup="menu" data-menu="options" > - {face} + + {face} + diff --git a/webviews/src/agent-session/acpmux/composerControls.css b/webviews/src/agent-session/acpmux/composerControls.css index bf45dec6756f..8719138a62b3 100644 --- a/webviews/src/agent-session/acpmux/composerControls.css +++ b/webviews/src/agent-session/acpmux/composerControls.css @@ -250,8 +250,9 @@ .acpmux-chip-pending .acpmux-picker-button:hover { background: none; } /* The Options chip (AgentOptionsMenu): the harness's other settings, a quiet pill like the access chip, its face one option's name and choice or "Options". It gives way only when its row is - full: the chip shrinks with the row and its face ellipsizes there, never at a fixed width while - the row has room (chip-fixed-width.test.ts). */ + full: the row takes its steps first (composerRowFit.ts counts the face's whole width), then the + chip shrinks, down to the New Tab model chip's floor, and its face ellipsizes; never at a fixed + width while the row has room (chip-fixed-width.test.ts). */ :is(.acpmux-composer-bar, .nt-pickers) .acpmux-options .acpmux-picker-button { height: 28px; min-width: 0; @@ -261,7 +262,7 @@ border-radius: 999px; color: var(--agent-muted); } -:is(.acpmux-composer-bar, .nt-pickers) .acpmux-chips > .acpmux-options { flex: 0 1 auto; min-width: 0; } +:is(.acpmux-composer-bar, .nt-pickers) .acpmux-chips > .acpmux-options { flex: 0 1 auto; min-width: 56px; } .acpmux-options .acpmux-picker-button[aria-expanded="true"], .acpmux-options .acpmux-picker-button:hover { color: var(--agent-text); } .acpmux-options-text, diff --git a/webviews/src/agent-session/acpmux/composerRowFit.ts b/webviews/src/agent-session/acpmux/composerRowFit.ts index 261998e6ee7b..0dabd0ef0b89 100644 --- a/webviews/src/agent-session/acpmux/composerRowFit.ts +++ b/webviews/src/agent-session/acpmux/composerRowFit.ts @@ -120,6 +120,10 @@ function widthAt(element: HTMLElement, then: Forms): number { const taken = part.getBoundingClientRect().width + (parent ? px(getComputedStyle(parent).columnGap) : 0); width += before ? -taken : taken; } + // A face that ellipsizes when the row is full (`data-fit-natural`, the Options chip) counts at its + // whole width, so the row takes its steps before that face gives up any text. + for (const face of element.querySelectorAll("[data-fit-natural]")) + width += Math.max(0, face.scrollWidth - face.clientWidth); return width; }