Skip to content

cmux-next agent pane: the composer is glass over art, with a top-lit rim - #21786

Merged
teamleaderleo merged 14 commits into
feat-cmux-nextfrom
leo/next-composer-glass
Oct 19, 2026
Merged

teamleaderleo merged 14 commits into
feat-cmux-nextfrom
leo/next-composer-glass

Conversation

@teamleaderleo

@teamleaderleo teamleaderleo commented Oct 18, 2026 •

Copy link
Copy Markdown
Collaborator

The agent composer, its location strip and the New Tab box painted one solid surface over every backdrop. That was Leo's call on 10-14: "Solid, so it sits as chrome over a wallpaper". On 2026-10-18 he said the composer is too opaque and asked for glass like iOS. This PR is step 1 of the composer glass.

  • Over art or a see-through window (:root[data-cmux-see-through], set by desktop.ts):
    • --acpmux-composer-surface is the solid surface at 60%, so the art shows through the window's tint.
    • A top-lit rim (--acpmux-composer-rim, an inset 1px highlight) is added to the composer box and the New Tab box.
    • The strip reads the same variable, so it stays one fill with the box.
  • Opaque windows and Reduce Transparency (both the media query and data-reduce-transparency) keep the solid surface and no rim.
  • Legibility: the prompt is primary text, and the window's tint floor already keeps primary text at 4.5:1 over the art (cmux-next: glass over art keeps main text readable, like iOS, and shows the art #21783).
  • Known edge: in the light tray top-strip style, the tray tucks 12px under the box and may show faintly through the glass there.
  • Tour: composerStates.css now routes to the glass tour (path_map.GLASS), so the change is captured over the art.
  • Step 2, next: WebKit's backdrop-filter can't blur the native art behind the web view. Real blur and the Liquid Glass edge refraction need a native GlassPanelView behind the box, at a rect the page reports, as WebPopupHost already does for menus.

🤖 Generated with Claude Code


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.


Summary by cubic

Turns the agent composer, its location strip, and the New Tab box into glass over art instead of one solid surface, per Leo's 2026-10-18 note that the composer is too opaque.

Over art or a see-through window (data-cmux-see-through), the surface is the solid one at 60% opacity with a top-lit inset rim; the strip reads the same variable so it stays one fill with the box. The rim is tone-derived, stays on keyboard focus, and exists as a layer only on glass so it never reads as a second drop shadow next to --elevation-1. Under a strip or queue the ring is drawn once on the card's ::before layer round strip and card together, so the card itself adds only rim and shadow — no doubled ring or seam. Opaque windows and Reduce Transparency (both the media query and data-reduce-transparency) keep the solid surface with no rim. Under a see-through card the tray's 12px tuck and the strip's foot are masked away so nothing shows through the glass. The composer states tour now routes to the glass tour, and composerStates.css is in the path_map.py glass pattern, so the change is captured over art.

Real blur is a follow-up: WebKit's backdrop-filter can't blur the native art, so it needs a native GlassPanelView behind the box.

Written for commit f27e792. Summary will update on new commits.

View guided diff Turn on auto-fix

teamleaderleo and others added 2 commits October 18, 2026 14:39
The composer, its location strip and the New Tab box painted one solid surface
over every backdrop (Leo 10-14). Leo, 2026-10-18: the composer is too opaque;
do glass like iOS. Over art or a see-through window (data-cmux-see-through)
the surface is now 60% of the solid one with a top-lit rim; opaque windows and
Reduce Transparency keep it solid.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@teamleaderleo teamleaderleo added the media-tour Run the cmux-next UI tour (cmux-next-media.yml) on every push label Oct 18, 2026
@github-actions

github-actions Bot commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor

Receipt for f27e792 (this PR's head; a new push replaces it)

  • Visual review: HQ feed card · gallery before/after runs
  • Checks: this head
  • App of this head (app.zip, kept 1 day): gh workflow run reload-build.yml -R manaflow-ai/cmux --ref feat-cmux-next -f tag=pr21786 -f ref=leo/next-composer-glass -f platform=macos -f backend_mode=local

@coderabbitai

coderabbitai Bot commented Oct 18, 2026 •

Copy link
Copy Markdown

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: bf172990-89b3-414a-92f3-6cfc9e350892

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

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

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

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

@blacksmith-sh

This comment has been minimized.

@github-actions

github-actions Bot commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor

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
red: web / react-apps-check (1); do not merge until green; see lane-rules
red: web / react-apps-check (2); do not merge until green; see lane-rules

@github-actions

github-actions Bot commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor

cmux status (one comment, edited in place; each line is updated by the job that owns it)

Probably yours: agent-pane-mode-keys.test.ts, composer-footer-plain.test.ts, composer-footer-plain.test.ts and 5 more fails here but not on main's latest full suite. Seen on other PRs too (likely flaky): check-system-blue.test.ts.

CI failed on f27e7928a0 (run 39219280668 attempt 1): 2 code, 1 unknown.

Job Verdict Why
web / react-apps-check (2) code a web test failed
web / react-apps-check (1) code a web test failed
web / react-apps-check unknown no known signature; failed step: Check webview test shards

Failures:

  • new in this PR agent-pane-mode-keys.test.ts the trigger and every menu row draw the mode's own shield: failed (job)
  • seen on other PRs check-system-blue.test.ts check-system-blue > this checkout is within its baseline: failed (job)
  • new in this PR composer-footer-plain.test.ts at 760 px (light): off, the chips draw as today: failed (job)
  • new in this PR composer-footer-plain.test.ts at 760 px (light): on, plain text at rest, same labels, no overlap: failed (job)
  • new in this PR composer-footer-plain.test.ts at 760 px (dark): off, the chips draw as today: failed (job)
  • new in this PR composer-footer-plain.test.ts at 760 px (dark): on, plain text at rest, same labels, no overlap: failed (job)
  • new in this PR composer-footer-plain.test.ts at 480 px (light): off, the chips draw as today: failed (job)
  • new in this PR composer-footer-plain.test.ts at 480 px (light): on, plain text at rest, same labels, no overlap: failed (job)
  • new in this PR composer-footer-plain.test.ts at 480 px (dark): off, the chips draw as today: failed (job)
Matched log lines
web / react-apps-check (2): (fail) the trigger and every menu row draw the mode's own shield [1119.02ms]
web / react-apps-check (1): (fail) check-system-blue > this checkout is within its baseline [1190.91ms]

Not re-run automatically: web / react-apps-check (2), web / react-apps-check (1), web / react-apps-check are not machine failures.

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.

CI fast guards failed on f27e7928a0 (https://github.com/manaflow-ai/cmux/actions/runs/39219280668). 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.

@github-actions

github-actions Bot commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor

CI fast guards failed on 73531a0811 (https://github.com/manaflow-ai/cmux/actions/runs/39210220847). 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.

The tray tuck and the strip foot showed through the 60% card; the rim took a literal color and
dropped on keyboard focus.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@cursor

cursor Bot commented Oct 18, 2026

Copy link
Copy Markdown

Bugbot needs on-demand usage enabled

Bugbot uses usage-based billing for this team and requires on-demand usage to be enabled.

A team admin can enable on-demand usage in the Cursor dashboard.

@github-actions

github-actions Bot commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor

cmux-next tour of f27e7928a0f1be244e9a4829d51cd5e20b312f25 (run)

Path-selected interactions

Interaction Changed paths
agent-pane webviews/src/agent\-session/acpmux/composerStates.css
glass webviews/src/agent\-session/acpmux/composerStates.css
core webviews/test/composer\-rim\-hairline.test.ts

Agent pane (before): PASS — 3 ok

tour

Video (mp4)

# Step Result Command
1 Launch ok
2 Open agent chat ok cmux agent new-chat
3 Queue a second chat ok cmux agent new-chat
Screenshots (3)

1. Launch
Launch

2. Open agent chat
Open agent chat

3. Queue a second chat
Queue a second chat

### Agent pane \(after\): PASS — 3 ok

tour

Video (mp4)

# Step Result Command
1 Launch ok
2 Open agent chat ok cmux agent new-chat
3 Queue a second chat ok cmux agent new-chat
Screenshots (3)

1. Launch
Launch

2. Open agent chat
Open agent chat

3. Queue a second chat
Queue a second chat

### Core UI \(before\): PASS — 12 ok

tour

Video (mp4)

# Step Result Command
1 Launch ok
2 New workspace ok cmux workspace new --name Tour
3 Type in the terminal ok cmux workspace name:Tour screen current pane current tab current terminal current write --text "echo hello from the cmux-next tour\r"
4 Split right ok cmux action run splitRight
5 Split down ok cmux action run splitDown
6 New terminal tab ok cmux action run newSurface
7 Browser tab ok cmux tab new-browser --url https://example.com
8 Hide the sidebar ok cmux action run toggleSidebar
9 Show the sidebar ok cmux action run toggleSidebar
10 Notification ok cmux notify --title Tour --body "Hello from CI"
11 Notifications panel ok cmux action run showNotifications
12 Agent chat ok cmux agent new-chat
Screenshots (11)

1. Launch
Launch

2. New workspace
New workspace

3. Type in the terminal
Type in the terminal

4. Split right
Split right

5. Split down
Split down

6. New terminal tab
New terminal tab

7. Browser tab
Browser tab

8. Hide the sidebar
Hide the sidebar

10. Notification
Notification

11. Notifications panel
Notifications panel

12. Agent chat
Agent chat

### Core UI \(after\): PASS — 12 ok

tour

Video (mp4)

# Step Result Command
1 Launch ok
2 New workspace ok cmux workspace new --name Tour
3 Type in the terminal ok cmux workspace name:Tour screen current pane current tab current terminal current write --text "echo hello from the cmux-next tour\r"
4 Split right ok cmux action run splitRight
5 Split down ok cmux action run splitDown
6 New terminal tab ok cmux action run newSurface
7 Browser tab ok cmux tab new-browser --url https://example.com
8 Hide the sidebar ok cmux action run toggleSidebar
9 Show the sidebar ok cmux action run toggleSidebar
10 Notification ok cmux notify --title Tour --body "Hello from CI"
11 Notifications panel ok cmux action run showNotifications
12 Agent chat ok cmux agent new-chat
Screenshots (11)

1. Launch
Launch

2. New workspace
New workspace

3. Type in the terminal
Type in the terminal

4. Split right
Split right

5. Split down
Split down

6. New terminal tab
New terminal tab

7. Browser tab
Browser tab

8. Hide the sidebar
Hide the sidebar

10. Notification
Notification

11. Notifications panel
Notifications panel

12. Agent chat
Agent chat

### Glass and themes \(before\): PASS — 12 ok

tour

Video (mp4)

# Step Result Command
1 Launch over art ok
2 New workspace ok cmux workspace new --name Glass
3 Terminal text and ANSI colors over art ok cmux workspace name:Glass screen current pane current tab current terminal current write --text "clear; echo 'cmux glass tour: plain text stays readable over the art'; for c in 1 2 3 4 5 6 7; do printf '\\033[3%sm color %s \\033[1m bold \\033[0m' $c $c; done; echo\r"
4 Split right ok cmux action run splitRight
5 Agent chat beside the terminal ok cmux agent new-chat
6 Soft Blue over art ok cmux settings set appearance.theme "Soft Blue"
7 Soft Blue Light over art ok cmux settings set appearance.theme "Soft Blue Light"
8 Clay Orange Light over art ok cmux settings set appearance.theme "Clay Orange Light"
9 Art off: Clay Orange Light ok cmux settings unset appearance.background
10 Clay Orange ok cmux settings set appearance.theme "Clay Orange"
11 Soft Blue ok cmux settings set appearance.theme "Soft Blue"
12 Soft Blue Light ok cmux settings set appearance.theme "Soft Blue Light"
Screenshots (12)

1. Launch over art
Launch over art

2. New workspace
New workspace

3. Terminal text and ANSI colors over art
Terminal text and ANSI colors over art

4. Split right
Split right

5. Agent chat beside the terminal
Agent chat beside the terminal

6. Soft Blue over art
Soft Blue over art

7. Soft Blue Light over art
Soft Blue Light over art

8. Clay Orange Light over art
Clay Orange Light over art

9. Art off: Clay Orange Light
Art off: Clay Orange Light

10. Clay Orange
Clay Orange

11. Soft Blue
Soft Blue

12. Soft Blue Light
Soft Blue Light

### Glass and themes \(after\): PASS — 12 ok

tour

Video (mp4)

# Step Result Command
1 Launch over art ok
2 New workspace ok cmux workspace new --name Glass
3 Terminal text and ANSI colors over art ok cmux workspace name:Glass screen current pane current tab current terminal current write --text "clear; echo 'cmux glass tour: plain text stays readable over the art'; for c in 1 2 3 4 5 6 7; do printf '\\033[3%sm color %s \\033[1m bold \\033[0m' $c $c; done; echo\r"
4 Split right ok cmux action run splitRight
5 Agent chat beside the terminal ok cmux agent new-chat
6 Soft Blue over art ok cmux settings set appearance.theme "Soft Blue"
7 Soft Blue Light over art ok cmux settings set appearance.theme "Soft Blue Light"
8 Clay Orange Light over art ok cmux settings set appearance.theme "Clay Orange Light"
9 Art off: Clay Orange Light ok cmux settings unset appearance.background
10 Clay Orange ok cmux settings set appearance.theme "Clay Orange"
11 Soft Blue ok cmux settings set appearance.theme "Soft Blue"
12 Soft Blue Light ok cmux settings set appearance.theme "Soft Blue Light"
Screenshots (12)

1. Launch over art
Launch over art

2. New workspace
New workspace

3. Terminal text and ANSI colors over art
Terminal text and ANSI colors over art

4. Split right
Split right

5. Agent chat beside the terminal
Agent chat beside the terminal

6. Soft Blue over art
Soft Blue over art

7. Soft Blue Light over art
Soft Blue Light over art

8. Clay Orange Light over art
Clay Orange Light over art

9. Art off: Clay Orange Light
Art off: Clay Orange Light

10. Clay Orange
Clay Orange

11. Soft Blue
Soft Blue

12. Soft Blue Light
Soft Blue Light

Tours are data in scripts/cmux-next/media/tours: add a step or a tour file to show your feature.

teamleaderleo and others added 2 commits October 18, 2026 15:28
A plain transparent layer read as a second drop shadow next to --elevation-1.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
teamleaderleo and others added 2 commits October 18, 2026 21:35
Any extra inset layer, even a clear one, counted as a second rim on an opaque card.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@cursor

cursor Bot commented Oct 19, 2026

Copy link
Copy Markdown

Bugbot needs on-demand usage enabled

Bugbot uses usage-based billing for this team and requires on-demand usage to be enabled.

A team admin can enable on-demand usage in the Cursor dashboard.

teamleaderleo and others added 2 commits October 19, 2026 05:04
…s one ring

Red: the glass rim rule redraws the card ring on the card, doubling the
::before layer's ring round strip and card.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…d shadow, not a second ring

Under the default strip the ::before layer draws one ring round strip and
card; the glass rim rule outranked the card's shadow-only rule and drew
the ring again with a seam. Also drops the no-op strip ::after rules.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Fix pushed (8bcd589): over art, a card under the default strip or a queue now draws only the glass rim and shadow, so the ::before layer's ring round strip and card is drawn once, with a browser-lane test (red at 0e56d35). Also dropped the no-op strip ::after rules.

teamleaderleo and others added 3 commits October 18, 2026 23:26
- vp fmt webviews/src/agent-session/acpmux/replyHref.ts
- vp fmt webviews/src/pages/markdown/README.md
- vp fmt webviews/src/pages/markdown/links.ts
- vp fmt webviews/test/markdown-cmux-app-links.test.ts

Autofix-Run: https://github.com/manaflow-ai/cmux/actions/runs/39210220969
…-composer-glass

# Conflicts:
#	webviews/src/pages/markdown/README.md
@cursor

cursor Bot commented Oct 19, 2026

Copy link
Copy Markdown

Bugbot needs on-demand usage enabled

Bugbot uses usage-based billing for this team and requires on-demand usage to be enabled.

A team admin can enable on-demand usage in the Cursor dashboard.

cmux-autofix[bot] and others added 2 commits October 19, 2026 07:02
…8099

# Conflicts:
#	webviews/src/agent-session/acpmux/replyHref.ts
#	webviews/src/pages/markdown/links.ts
@blacksmith-sh

blacksmith-sh Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

Found 10 test failures on Blacksmith runners:

Failures

Test View Logs
/tmp/tmpbdqkud2b/summary-fail.json (live):/summary-fail.json (live): View Logs
/tmp/tmpi_8rvh4u/summary-missing.json (live):/summary-missing.json (live): View Logs
test/agent-pane-mode-keys.test.ts/agent-pane-mode-keys.test View Logs
test/agent-pane-mode-keys.test.ts/agent-pane-mode-keys.test View Logs
test/check-system-blue.test.ts/check-system-blue.test View Logs
test/check-system-blue.test.ts/check-system-blue.test View Logs
test/composer-footer-plain.test.ts/composer-footer-plain.test View Logs
test/composer-footer-plain.test.ts/composer-footer-plain.test View Logs
test/theme-colors.test.ts/theme-colors.test View Logs
test/theme-colors.test.ts/theme-colors.test View Logs

Fix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.

@teamleaderleo
teamleaderleo merged commit 489bd06 into feat-cmux-next Oct 19, 2026
@teamleaderleo
teamleaderleo deleted the leo/next-composer-glass branch October 19, 2026 19:39
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Merged by the coord-2 rescue lane at the reviewed head. Every red on this head also fails on feat-cmux-next from the same morning, in unrelated PRs (#21697, #21729, #21623, #21272): cmux-next checks fails on Motion tokens at the base file TabCell+HibernationRing.swift:109, and react-apps-check fails on check-system-blue, composer-footer-plain, theme-colors and agent-pane-mode-keys.

@github-actions

github-actions Bot commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

media-tour Run the cmux-next UI tour (cmux-next-media.yml) on every push

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant