[teamleaderleo]

The location strip on top of the chat composer (folder · computer · branch, the "top bump") merged into the composer card. It shared the card's fill and edge, sat flush on the card's top edge, and the card's rim was masked out under it, so the tab and the card read as one blob. Leo asked for a bit of separation, not a heavy border.

Now the strip stands 4px above the card inside its own closed hairline rim, and the card keeps its whole rim. The queued-prompts tray still sits flush on the strip, so the queue and the strip read as one tab over the card. The same change applies to the New Tab composer, which uses the same strip.

What changed

• composerLocation.css: the strip gets a bottom margin (--acpmux-strip-gap, 4px), one inset hairline ring on all four sides in --acpmux-composer-edge (the existing hairline token, --cmux-hairline wide, clear under appearance.borders = none), and small bottom corners (5px). Under a queue, its top corners stay square and its top edge gives way to the queue as before, but it keeps its bottom hairline and corners.
• The seam mask is removed: the card no longer draws its rim on a ::before layer with a cutout under the strip. It draws its normal --acpmux-card-ring, including focus and shell-mode states.
• Fill, inset, height, type, and the strip's controls are unchanged. The bottom footer row is untouched.
• Comments in composerStates.css and newtab/screen.css updated to match.

Stills (before → after)

Catppuccin Latte / Mocha, chat composer with a project:

	Before	After
light 760 px
light 400 px
light 300 px
dark 760 px
dark 400 px
dark 300 px

With queued prompts (the queue and strip are one tab, now separated from the card):

	Before	After
light 760 px
light 400 px
light 300 px
dark 760 px
dark 400 px
dark 300 px

Apple System Colors light / dark (after):

	760 px	300 px
apple-light
apple-light, queued
apple-dark
apple-dark, queued

Borrowed from AI Elements

From the shadcn AI Elements study (cmux-cgc-notes/ai-elements.md):

• Spacing: the gap is 4px, on their 4px grid. It is the smallest step that reads as a separate surface without pushing the strip away from the card it belongs to.
• Restraint: their composer group is one 1px border-input rim with no shadows layered on top. Here the strip uses one hairline ring in the existing composer edge token. There is no heavier border, no new color, and no fill step, so the strip and the card are still the same material.
• Nesting: AI Elements shows hierarchy with a single rule and spacing, not boxes inside boxes. The strip sits next to the card as a sibling tab instead of being folded into the card's outline.
• Type weights: unchanged. The strip's labels stay normal weight and muted, which matches their rule that only buttons and titles get font-medium.

Verification

• test/composer-location-strip.test.ts: the strip now sits 2–6px above the card (chat, new chat, New Tab at 420/720px). The old "no hairline across the seam" pixel probe is replaced with a check that the strip draws one whole inset hairline ring and the card draws its own unmasked rim.
• test/agent-pane-bottom-stack.test.ts: new boundary test at 760 and 480px pane heights. With the queue and the strip both shown, the queue sits flush on the strip and the tab stands 2–6px above the card.
• These tests fail against the old CSS (10 failures) and pass with the change. I ran the focused browser suites locally with CMUX_BROWSER_TESTS=1 (composer-location-strip, agent-pane-bottom-stack, composer-edges, composer-rim-hairline, new-tab-composer-layout): 26 pass.
• bun run check passes (layers, type-scale, status-glyphs, system-blue, text-focus, fmt, lint, typecheck).
• No localization impact: no user-facing strings changed.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: Repository: manaflow-ai/cmux/.coderabbit.yaml
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: 761a048a-3199-496b-b106-b36e3649356a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[teamleaderleo]

Bead cx-2cmq2 created for this PR by the cmux coordinator.

[github-actions]

all web/size checks green

[github-actions]

Passes: CI passes on 663fb04d2e.

CI passes on 663fb04d2e (run 38664765399 attempt 1).

Written by scripts/ci/classify_failures.py (ci-failure-attribution.yml); signatures are its SIGNATURES table. A machine verdict is the runner's fault, not this PR's; yours means the failing file is one this PR changes, also red on main that main's latest full suite fails the same way, seen on other PRs that it failed on another pull request's run lately.

[github-actions]

CI fast guards passes on 663fb04d2e (https://github.com/manaflow-ai/cmux/actions/runs/38664765399). This covers only the fast guards, not CI: CI's result is the ci-status check, and the CI failure attribution comment names any failing test.

[github-actions]

Gallery

Review in feed

1872 states changed: agent-pane.transcript/long-code, agent-pane.artifact-panel/versions, agent-pane.reply-paths/path-forms, agent-pane.transcript/mark-unread-menu, agent-pane.new-tab/template-threads, ... · 59 play checks failed

Diff page and renders (the run's gallery-pr artifact)

State	Before · after
agent-pane.transcript/long-code (Apple System Colors, chromium)
agent-pane.artifact-panel/versions (Apple System Colors, chromium)
agent-pane.reply-paths/path-forms (Apple System Colors Light, chromium)
agent-pane.reply-paths/path-forms (Apple System Colors Light, webkit)
agent-pane.reply-paths/path-forms (Apple System Colors, chromium)
agent-pane.reply-paths/path-forms (Apple System Colors, webkit)

1866 more on the diff page.

Live preview (follows this branch; start it with scripts/gallery-live.sh up <branch> from an hq checkout):

• agent-pane.transcript/long-code: /wt/cg-composer-top-bump-separation/?entry=agent-pane.transcript#/agent-pane.transcript/long-code
• agent-pane.artifact-panel/versions: /wt/cg-composer-top-bump-separation/?entry=agent-pane.artifact-panel#/agent-pane.artifact-panel/versions
• agent-pane.reply-paths/path-forms: /wt/cg-composer-top-bump-separation/?entry=agent-pane.reply-paths#/agent-pane.reply-paths/path-forms
• agent-pane.transcript/mark-unread-menu: /wt/cg-composer-top-bump-separation/?entry=agent-pane.transcript#/agent-pane.transcript/mark-unread-menu
• agent-pane.new-tab/template-threads: /wt/cg-composer-top-bump-separation/?entry=agent-pane.new-tab#/agent-pane.new-tab/template-threads
• agent-pane.new-tab/style-switch: /wt/cg-composer-top-bump-separation/?entry=agent-pane.new-tab#/agent-pane.new-tab/style-switch
• 258 more on the diff page

Play checks failed (0 px anchor movement, 0 layout shift, no frame over 33 ms unless the entry gives a reason):

• agent-pane.artifact-panel/versions (Apple System Colors, chromium): play: no element for button "Open preview"
• agent-pane.edited-files/fourteen-files-expanded (Apple System Colors Light, chromium): step 1 click .acpmux-edited-more: layout shift 0.0170 (limit 0)
• agent-pane.edited-files/fourteen-files-expanded (Apple System Colors, chromium): step 1 click .acpmux-edited-more: layout shift 0.0170 (limit 0)
• agent-pane.composer/queued-long (Apple System Colors Light, webkit): play: waitFor did not hold within 5000 ms
• agent-pane.composer/queued-long (Apple System Colors Light, chromium): play: waitFor did not hold within 5000 ms
• agent-pane.composer/queued-long (Apple System Colors, webkit): play: waitFor did not hold within 5000 ms
• 287 more on the diff page

184 nondeterministic states differed from a second render of the same head (a clock or fixture leak) and are not counted as changes.

_{376 unchanged · base 4c56848 · head 663fb04}

[teamleaderleo]

Visual preview of 663fb04: in the maintainers' private review feed.

[teamleaderleo]

Superseded by #20984: this look is now the bump value of the Debug toggle agentPane.debug.topStripStyle (default | bump | plain), with the default unchanged, so the design judge can compare it against today's tab and plain floating text.