Skip to content

cmux-next: right-side panels slide in without lag or overflow; directional enter and exit in the agent pane - #22795

Merged
teamleaderleo merged 10 commits into
feat-cmux-nextfrom
cmux/directional-motion
Oct 21, 2026
Merged

teamleaderleo merged 10 commits into
feat-cmux-nextfrom
cmux/directional-motion

Conversation

@teamleaderleo

@teamleaderleo teamleaderleo commented Oct 21, 2026 •

Copy link
Copy Markdown
Collaborator

Leo (2026-10-20): opening anything on the right side of a chat pane (the Summary from the list icon, the in-chat Browser from the globe, a New Tab column) animated slowly, lagged and drew the panel past the window's right edge. Things that appear should come in from where they belong and leave the way they came.

What changes

Native: right-side panels

  • Past the window edge. A Chromium page is a child window. CEFClipShape only handed the fork rounded clips and the strip mask, so a page that a layout spring carried past the screen's edge drew past the window. That is the band beside the Summary in Leo's screenshot. Square-clipping ancestors (the screen, the pane clip) and the window now form a visible region, which is added as a clip when the page reaches past it. At rest it adds nothing.
  • Lag. While a pane is on a layout spring (split, close, zoom), PaneHostView holds its content at the larger of its size when the spring started and its size at rest. The content is pinned to the edge nearer its rest and laid out once when the spring lands. The chat keeps its width under an opening panel instead of reflowing on every frame, and the panel lays out at its final size and slides in with its right edge. Terminals already held their grid; now pages do too. Debug toggle motion.pane.holdContent (on).

Webview: directional enter and exit

  • ui/presence.ts adds usePresence(shown, edge). It keeps a closing surface mounted until its exit plays and marks it with data-enter and data-presence. ui/popupSurface.css draws the motion with transitions:
  • Applied to (only the Summary card uses usePresence and plays an exit; the others animate in and close at once):
    • From the right: the Summary card (the inline column travels its own width inside the pane, so the chat lays out once; the popover travels a few points), the session rail, the side preview, Changes and the inspector.
    • From the top: quick open and the find pill.
    • From the left: the narrow pane's sidebar drawer.
    • Rising out of the composer: questions, notices, the PR dock, the agents pill and queued prompts.
    • Popups: they travel a few points out of their trigger by side; the composer's menus rise from it.
  • Gallery: agent-pane.summary-motion (open, and open then close).

Popover anchoring and layout stay with the summary-panel lane; this PR only adds motion and the native clip.

Changelog

  • Fixed: Panels that open on the right of a chat (Summary, Browser, New Tab) slide in from the right without lag and no longer draw past the window's edge.
  • Changed: Panels, cards, bars and drawers in the agent pane enter from the edge they belong to and leave the way they came.

Tests

Red-then-green tests are in the first commit:

  • Tests/CmuxNextAppTests/PaneMotionContentHoldTests.swift: a page past the screen's edge is cut there; a shrinking pane keeps its content width until the spring lands; a pane opening on the right lays out at its rest size and rides its right edge.
  • webviews/test/presence.test.tsx: enter, exit on transitionend, reopen mid-exit reverses the same node, motion off unmounts at once.

Observed / Not run

  • Observed locally: bun test test/presence.test.tsx passes (3 tests). test/summary-card-geometry.test.ts, gallery coverage and manifest tests, and the 44 webview test files about summary, popups, motion, rail, find, bottom stack and inspector all pass. Oxfmt and Oxlint pass on the changed files, and tsc shows no errors in them. The full bun run check fails only on Oxfmt in four settings files this PR does not touch (base).
  • Observed on b318d91 (base merge of 2e38ac1): the fleet app compile and link (cmux-ci compile-check --app) passes. CI's cmux-next swift test built the package and tests; its one red test, AgentPaneImageActionsTests.swift:72 followed by an index-out-of-range crash, fails the same way on the unrelated cmux-next: a clicked link's tab takes the focus; closing it gives the focus back #22990 (base). Webview shards: after one rerun, the reds are only the base ones (composer + glyph, gallery coverage, Oxfmt in App.tsx); agent-pane-stream-jitter, thread-minimap-feel and bare-pr-refs passed on the rerun. cmux-next checks: only base reds (Tier routing on CmuxNextHomeEngineTests); "Pushed commits add no violations". Capture: media-tour.
  • Not run: CI's own Release compile and Debug scheme compile stayed queued for over three hours (fleet backlog); the fleet app compile above stands in for them. No native before/after recording beyond the media tour.

Agent session: cosmic-gray

🤖 Generated with Claude Code

teamleaderleo and others added 3 commits October 20, 2026 18:50
…ame layout, no page past the screen, directional presence)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?harness=claude&session=01a15bd2-9ef6-7eb1-a944-4d97704685c6&host=cosmic-gray
… and a Chromium page stays inside its screen

Leo 2026-10-20: opening the chat's Browser, its Summary or a New Tab column animated
slowly, lagged and drew the panel past the window's right edge.

- PaneHostView holds its content at the larger of its size when the spring started
  and its size at rest, pinned to the edge nearer its rest, and lays it out once when
  the spring lands: the chat keeps its width under the opening panel, and the panel
  lays out at its final size and slides in with its right edge. Debug toggle
  motion.pane.holdContent (on).
- CEFClipShape adds the square region the screen, the pane clip and the window leave
  visible when a page reaches past it, so a Chromium page (a child window) is cut at
  the screen's edge instead of drawing past the window.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?harness=claude&session=01a15bd2-9ef6-7eb1-a944-4d97704685c6&host=cosmic-gray
… side panels, the bottom stack, top bars and drawers

Leo 2026-10-20: things that appear come in from where they belong and leave the way
they came; the Summary panel lagged and misbehaved on toggle.

- ui/presence.ts: usePresence(shown, edge) keeps a closing surface mounted until its
  exit plays and marks it data-enter / data-presence; ui/popupSurface.css draws the
  motion on transitions (a reopen mid-exit reverses in place, a second open changes
  nothing), timed from the host's --agent-motion-in/-out, so the motion switches and
  ui.animationSpeed govern it. Reduce Motion keeps the fade; motion off removes it at once.
- Summary card slides in from the pane's right edge and back out (inline column its own
  width, the chat lays out once; popover a few points). Session rail, side preview,
  Changes and the inspector enter from the right; quick open and the find pill drop from
  the top; the narrow sidebar drawer comes from the left; questions, notices, the PR dock,
  the agents pill and queued prompts rise out of the composer. Popups travel a few points
  out of their trigger by side.
- Gallery: agent-pane.summary-motion.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?harness=claude&session=01a15bd2-9ef6-7eb1-a944-4d97704685c6&host=cosmic-gray
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

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

@github-actions

github-actions Bot commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

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

Review f14cb97: HQ feed card · gallery before/after runs · checks

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=pr22795 -f ref=cmux/directional-motion -f platform=macos -f backend_mode=local

Unclear: web / react-apps-check failed: no known signature; failed step: Check webview test shards.

CI failed on b318d91543 (run 39580881321 attempt 1): 2 code, 1 unknown.
macOS jobs did not run: compile and app tests were skipped: Fast static checks skipped.

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

Failures:

  • seen on other PRs gallery-coverage.test.ts gallery coverage > the entries are valid: failed (job)
  • seen on other PRs composer-claude-split.test.ts chromium: + is its glyph, named Add with no tooltip: failed (job)
  • seen on other PRs composer-claude-split.test.ts webkit: + is its glyph, named Add with no tooltip: failed (job)
Matched log lines
web / react-apps-check (1): FAIL: test_coverage_base_gap_warns_on_a_pr_changing_the_gallery_format (__main__.ScopedChecksTests.test_coverage_base_gap_warns_on_a_pr_changing_the_gallery_format)
web / react-apps-check (2): (fail) chromium: + is its glyph, named Add with no tooltip [1889.22ms]

Not re-run automatically: web / react-apps-check (1), web / react-apps-check (2), 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.

red: cmux-next checks (god files, concurrency, crash safety, l10n); base red: the same failure on the base 2e38ac1; does not block
red: web / Web status; base red: the same failure on the base 2e38ac1; does not block
red: web / react-apps-check; base red: the same failure on the base 2e38ac1; does not block
red: web / react-apps-check (1); NEW: - [] + [ + "agent-pane.background-hint#claudeAcp: variant names are lower kebab case", + ] - Expected - 1 + Received + 3 at <anonymous> (/tmp/tmprri0aoaw/webvie is not red on the base 2e38ac1; do not merge until green; see lane-rules
red: web / react-apps-check (2); NEW: { "name": "Add", "text": "", - "tooltip": "", + "tooltip": "Add files, screenshots and more", } - Expected - 1 + Received + 1 at <anonymous> (/home/runner/_work is not red on the base 2e38ac1; do not merge until green; see lane-rules

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

Tour of b318d91543 (run): no media. The tour job failed before the tour ran (build or setup); the run log has the output.

…ths, Reduce Motion exempts only presence panels

Review of #22795:
- PaneClipView no longer autoresizes the content: layoutClip places it, and the
  autoresize resized held content on every spring frame before it was set back.
- The new tests compare frame widths to typed CGFloat constants (an Int literal
  difference fails #expect even when equal).
- The global Reduce Motion rule exempts [data-presence] panels only, not every
  [data-enter] surface and its own unrelated transitions.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?harness=claude&session=01a15bd2-9ef6-7eb1-a944-4d97704685c6&host=cosmic-gray
@blacksmith-sh

blacksmith-sh Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

Found 7 test failures on Blacksmith runners:

Failures

Test View Logs
/tmp/tmp93_eddgs/summary-missing.json (live):/summary-missing.json (live): View Logs
/tmp/tmpvfrdjq0h/summary-fail.json (live):/summary-fail.json (live): View Logs
convention violations found (ERROR lines above)./
convention violations found (ERROR lines above).
View Logs
test/composer-claude-split.test.ts/composer-claude-split.test View Logs
test/composer-claude-split.test.ts/composer-claude-split.test View Logs
test_coverage_base_gap_warns_on_a_pr_changing_the_gallery_format (main.ScopedChecks
Tests.test_coverage_base_gap_warns_on_a_pr_changing_the_gallery_format)/
test_coverage_base_gap_warns_on_a_pr_changing_the_gallery_format (main.ScopedChecks
Tests.test_coverage_base_gap_warns_on_a_pr_changing_the_gallery_format)
View Logs
test_every_source_and_test_directory_is_a_target (main.GraphCoversThePackage.test_e
very_source_and_test_directory_is_a_target) (directory='CmuxNextHomeEngineTests')/
test_every_source_and_test_directory_is_a_target (main.GraphCoversThePackage.test_e
very_source_and_test_directory_is_a_target) (directory='CmuxNextHomeEngineTests')
View Logs

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

@teamleaderleo

This comment has been minimized.

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

cmux-next guards / nightly-guards / workflow-guard-tests / release-notary is red on 15 of 18 fresh feat-cmux-next PR heads in the last 2:00:00, so it is most likely a base red, not this PR's. The base-reds lane has it; a base merge picks up the fix once it lands.

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

owner: 01a15c78-6428-7081-b456-fe0fcbc491fc

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

cmux-next guards / defaults-snapshot is red on 18 of 18 fresh feat-cmux-next PR heads in the last 2:00:00, so it is most likely a base red, not this PR's. The base-reds lane has it; a base merge picks up the fix once it lands.

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Owned by directional-motion-78 on huge-blue · session

teamleaderleo and others added 4 commits October 21, 2026 06:24
…ectional-motion

# Conflicts:
#	webviews/src/ui/popupSurface.css
…r test measures after the menu's entrance

A queued row travelling 4 px measured as cut while the queue scrolled its
focused row and Show less into whole-row view (agent-pane-queue-collapse).
The folder picker's field was measured mid-entrance, 1 px off its rest.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?harness=claude&session=01a15cc2-04ea-7352-837a-21905d44c199&host=huge-blue
…ectional-motion

# Conflicts:
#	webviews/src/agent-session/acpmux/summary/SessionRail.tsx
#	webviews/src/agent-session/acpmux/summary/summary.css
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

codex-review: SHIP at b318d91

  • Reviewed the current diff, focused tests, and affected call paths; no correctness bug found.

@teamleaderleo
teamleaderleo merged commit e0a42bf into feat-cmux-next Oct 21, 2026
@teamleaderleo
teamleaderleo deleted the cmux/directional-motion branch October 21, 2026 11:39
teamleaderleo added a commit that referenced this pull request Oct 21, 2026
styles.css conflict: base only restyled a removed sidebar rule; kept the
removal, and dropped the sidebar enter rule #22795 added (nothing renders
.acpmux-sidebar).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?harness=claude&session=01a15c2b-c6e5-7540-ad96-0eb60604230e&host=huge-blue
teamleaderleo added a commit that referenced this pull request Oct 21, 2026
…ts own gallery entries; the pane motion help names the content hold (#23357)

suggestion-lists-float opened /gallery/frame.html without entryPath and waited
in EVERY_ENTRY_PENDING for #22795, which changed it; it now loads and warms only
agent-pane.composer and agent-pane.new-tab. The motion.pane.variant help said
content keeps its final size; since #22795 it keeps the larger of its starting
and final size until the spring lands.


Agent-Session: https://cmux.com/deeplink/agent?harness=claude&session=01a15cc2-04ea-7352-837a-21905d44c199&host=huge-blue

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Oct 21, 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 risk:normal Risk tier (docs/ci/risk-tiers.md)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant