[teamleaderleo]

The design judge needs to compare looks for what stands on top of the agent composer: the location strip (folder · machine · branch) on a new chat and the New Tab, and the queued prompts once a chat has started. Today there is one look (a tab of the card's fill, flush on the card's top edge, sharing its rim), and #20789 proposed changing it outright.

This adds one Debug setting, agentPane.debug.topStripStyle (Debug Settings > Pages), with three values. New agent tabs read it.

• default: today's tab. The app sets nothing on the page, so it renders exactly as before.
• bump: Composer: the location strip stands a few px apart from the card #20789's look. The strip (or, mid-chat, the queue) stands 4 px above the card inside its own closed hairline, and the card draws its whole rim.
• plain: no fill, no rim, no tab. Muted text floats 4 px above the card, its first ink on the card's content edge (where the prompt's text starts: 16 px in the chat, 18 px in the New Tab), as Codex and Claude Code desktop show context above their prompt. A queued row's actions take their own room at its end instead of fading over a tray.

Nothing changes in Settings or Labs. This supersedes #20789, which changed the default look.

How it works

AgentPaneTunables.topStripStyle is a choice tunable. For bump and plain the app sets data-top-strip on the page's <html> (both hosts, through the same document attributes as agentPane.debug.foldLongThoughts from #20948). Every variant rule in composerLocation.css is scoped under :root[data-top-strip], so without the attribute none of it applies.

Borrowed from AI Elements

plain follows AI Elements' restraint: an addon above the prompt (InputGroupAddon align="block-start") is plain text-muted-foreground with no border or fill of its own, sharing the field's inline padding, so its text lines up with the prompt's. Muted at rest, the text color on hover (the strip's existing ghost buttons).

Stills

Gallery (agent-pane.composer-strip, variants project = new chat and queued = mid-chat with two queued prompts), frame=component, toggle set on <html>.

Contact sheets (all three values side by side):

Catppuccin Latte

Catppuccin Mocha

Per value:

Catppuccin Latte

	default	bump	plain
new chat, 760 px
mid-chat queued, 760 px
new chat, 400 px
mid-chat queued, 400 px

Catppuccin Mocha

	default	bump	plain
new chat, 760 px
mid-chat queued, 760 px
new chat, 400 px
mid-chat queued, 400 px

Tests

• webviews/test/composer-top-strip-variants.test.ts (Chromium): for the new chat strip, the mid-chat queue and the New Tab strip, at 760 and 400 px, each value draws the expected structure. default: flush (gap 0), filled, the hairline on the top and sides only, the card's rim masked under a strip. bump: a 2 to 6 px gap, filled, one closed hairline ring, the card's rim whole. plain: a 2 to 6 px gap, no fill, no rim, first ink within 1 px of the card's content edge. Ran locally with CMUX_BROWSER_TESTS=1 together with composer-location-strip, agent-pane-bottom-stack and composer-edges: 46 pass, 0 fail (on the merged base).
• AgentPaneTopStripStyleTests (Swift Testing): default sets no attribute, bump/plain set data-top-strip beside fold-long-thoughts, and the tunable is listed in Debug Settings. swift test --filter AgentPaneTopStripStyleTests: 3 pass.
• bun run check in webviews/ passes for the changed files.

🤖 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: 6923d241-373b-4183-9230-c8a6cb1f131a

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.}

[blacksmith-sh]

Found 3 test failures on Blacksmith runners:

Failures

Test	View Logs
convention violations found (ERROR lines above)./ convention violations found (ERROR lines above).	View Logs
test/composer-type-scale.test.ts/composer-type-scale.test	View Logs
test/composer-type-scale.test.ts/composer-type-scale.test	View Logs

^{Need help on this PR? Tag @codesmith-bot with what you need.}

[teamleaderleo]

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

[github-actions]

Gallery

Review in feed

139 states changed: agent-pane.transcript/long-code, agent-pane.chat-width/standard, agent-pane.artifact-panel/markdown, agent-pane.transcript/shell-grouped-commands, agent-pane.edited-files-settings/changed, ... · 57 play checks failed

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

State	Before · after
agent-pane.transcript/long-code (Apple System Colors, webkit)
agent-pane.transcript/long-code (Apple System Colors, chromium)
agent-pane.chat-width/standard (Apple System Colors, chromium)
agent-pane.artifact-panel/markdown (Apple System Colors, webkit)
agent-pane.transcript/shell-grouped-commands (Apple System Colors, webkit)
agent-pane.edited-files-settings/changed (Apple System Colors, webkit)

133 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-strip-variants/?entry=agent-pane.transcript#/agent-pane.transcript/long-code
• agent-pane.chat-width/standard: /wt/cg-composer-top-strip-variants/?entry=agent-pane.chat-width#/agent-pane.chat-width/standard
• agent-pane.artifact-panel/markdown: /wt/cg-composer-top-strip-variants/?entry=agent-pane.artifact-panel#/agent-pane.artifact-panel/markdown
• agent-pane.transcript/shell-grouped-commands: /wt/cg-composer-top-strip-variants/?entry=agent-pane.transcript#/agent-pane.transcript/shell-grouped-commands
• agent-pane.edited-files-settings/changed: /wt/cg-composer-top-strip-variants/?entry=agent-pane.edited-files-settings#/agent-pane.edited-files-settings/changed
• agent-pane.edited-files-settings/defaults: /wt/cg-composer-top-strip-variants/?entry=agent-pane.edited-files-settings#/agent-pane.edited-files-settings/defaults
• 67 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/markdown (Apple System Colors, webkit): play: no element for button "Open preview"
• agent-pane.new-chat-no-shift/send-to-streaming (Apple System Colors, webkit): step 2 press Enter: anchor .acpmux-model moved 49.3 px (limit 1)
• agent-pane.new-chat-no-shift/send-to-streaming (Apple System Colors Light, chromium): step 2 press Enter: anchor .acpmux-model moved 49.3 px (limit 1)
• agent-pane.bottom-stack/trust-then-individual (Apple System Colors Light, chromium): step 1 click button "Trust": layout shift 0.1064 (limit 0) · step 3 click .acpmux-access-grant-remove: layout shift 0.1064 (limit 0)
• agent-pane.bottom-stack/trust-then-permission (Apple System Colors Light, chromium): step 1 click button "Trust": layout shift 0.2200 (limit 0) · step 3 click .acpmux-access-grant-remove: layout shift 0.2200 (limit 0)
• agent-pane.bottom-stack/trust-then-permission (Apple System Colors, chromium): step 1 click button "Trust": layout shift 0.2200 (limit 0) · step 3 click .acpmux-access-grant-remove: layout shift 0.2200 (limit 0)
• 290 more on the diff page

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

_{2115 unchanged · base c50480f · head f85243e}

[github-actions]

Unclear: web / react-apps-check failed: no known signature; failed step: Test webviews.

CI failed on f85243e143 (run 38713530136 attempt 1): 1 unknown.
macOS jobs did not run: compile and app tests were skipped: Fast static checks skipped.

Job	Verdict	Why
web / react-apps-check	unknown	no known signature; failed step: Test webviews

Not re-run automatically: web / react-apps-check is not a machine failure.

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]

red: web / Web status; do not merge until green; see lane-rules
red: web / react-apps-check; do not merge until green; see lane-rules

[github-actions]

CI fast guards failed on f85243e143 (https://github.com/manaflow-ai/cmux/actions/runs/38713530136). It does not block the merge; a red guard merged into main breaks it for every open PR.
The log named no failed step; see the run.

Agents: python3 scripts/ci/guard_attribution.py fix applies the mechanical fixes locally. This comment is updated in place on each push.