cmux NEXT: draggable Session Info cards and shared edge treatments
Status: Session Info cards, edge fade, and running-row shimmer await Astra review and gallery verification.
Leo asked for “separate rounded cards” in Session Info that “can be clicked and dragged to reorder,” with the order persisted per user and keyboard reordering accessible. This stacked PR keeps the floating panel and existing contents, adds native handle drag plus Arrow-Up/Arrow-Down movement, and persists the section order.
Leo also asked for “subtle but nice but integrated” blur fading at the sticky Outputs and Session Info headers. The shared ui-scroll-edge-fade CSS component uses the foundations token contract (--cmux-scroll-edge-band: 16px, --cmux-scroll-edge-blur: 8px, --cmux-scroll-edge-opacity: 0.82) with reduced-transparency solid fallback and no scroll JavaScript. Gallery variants cover subtle, balanced (chosen), and roomy treatments.
Leo clarified the running treatment: “the thinking shimmer works like that, and then the session reel, it asks for it to also have that. I like that. Although I think it could maybe be a bit slower on the session info region.” Session Info task and server rows now use the existing shared cmux-wave shimmer with a slower 2.4s chosen duration; 2.0s and 3.0s alternatives are in the gallery. The tray remains on its existing 1.6s wave.
Gallery evidence: agent-pane.chat-inspector variants cards-balanced, edge-balanced, and wave-balanced (with quiet/roomy spacing, subtle/roomy edge, and 2.0s/3.0s wave alternatives). Before/after captures are generated from the gallery states for light and dark review.
Scroll-edge captures (base before vs this PR after; real rendered Outputs rows at scroll 0 and scrolled, light and dark):
Before — feat-cmux-next




After — 93fef04f80cd6538b3746526cc61c6e28befd568




Persistence now uses a stamped string-list value (@cmux-order/v1/<time>/<writer> plus the section IDs) in native settings and the local fallback. Every pane applies only newer revisions; RPC acknowledgements never apply order payloads and clear only the matching fallback stamp. The native config-file actor compares and publishes atomically. Native file-watcher edits, including an edit retaining an old stamp or deleting the key, become a fresh stamped order (deletion becomes a stamped default) and reach open panes; a newer stamped peer write is accepted without restamping, while stale writes restore the held value. Reset All writes a newer stamped default, so delayed writes cannot restore the old order. Legacy arrays remain readable.
Validation:
- 153 focused webview tests passed (783 expectations), including card persistence/drag/keyboard, edge rendering, task shimmer rows, and summary/Inspector regressions.
bun run typecheck,check:fixed-waits,check:layers, andcheck:design-tokenspass.- Latest revision: 31 focused persistence/card/dead-click tests and 7 browser geometry/transparency tests pass. Full
scripts/web-lint.shpasses; typecheck covers 2,903 files. - Rejected native writes retain the stamped local order across reloads; local storage is cleared only when its matching stamp is confirmed. Sticky headers become opaque only after scrolling; linked and plain Sources share the 8px icon gap.
- The four valid base captures and four after captures are retained; visuals are unchanged by the watcher-only fix.
- Exact-head native suite passed at
aa01c65396a2f41df8692e6db57e4d4b277c0737in fleet receipt38c4e496516c0a7cde1ab102:InspectorOrderRevisionTests,AgentPaneDisplaySettingTests, andResetAllRetiredKeysTestsall passed.
![View with [code]smith](https://pr-comments-assets.blacksmith.sh/codesmith/view-with-codesmith-dark-v3-3x.png)
![Autofix with [code]smith](https://pr-comments-assets.blacksmith.sh/codesmith/autofix-with-codesmith-dark-3x.png)
Need help on this PR? Tag @codesmith-bot with what you need.
Summary by cubic
Turns Session Info's fixed section blocks into separate rounded glass cards users reorder by dragging a keyboard-focusable six-dot handle or pressing Arrow-Up/Arrow-Down, with the order persisted through a hidden native setting edited by dragging the cards themselves. Adds a shared CSS-only blur fade for the sticky Outputs and Session Info headers, and slows the running-row shimmer in Session Info to a calm 2.4s while the tray keeps its 1.6s wave.
- The shared
ui-scroll-edge-fadecomponent is driven by the--cmux-scroll-edge-*tokens, needs no scroll listeners, reveals only after a card's own content scrolls, stays hidden while its disclosure is folded, and falls back to a solid reduced-transparency surface. - The handle is an accessible drag handle; dragging never toggles a section, and keyboard reordering moves the focused card among the visible cards, skipping sections hidden by a layout variant.
- The order is a natural string list whose first member carries a Lamport timestamp and writer identity, so the config actor publishes the newest order and a delayed write or file-watcher reload cannot overwrite a newer persisted one; a local fallback survives rejected writes and reloads, and Reset All clears both. The hidden setting is fully localized in the catalog.
- Task entry animations keep their fade-in from the top while running rows shimmer, so new tasks still stand out.
- The original
glance,rules, andgroupslayouts remain in the gallery, along with subtle, balanced (shipped), and roomy variants for cards, edge, and wave. - Verified by more than 150 focused webview tests plus native revision-parser unit tests, and by typecheck, layer, fixed-wait, and design-token checks.
Agent session: agent session