Session Info: drag a section's six-dot handle to reorder it

Merged
TE
6d ago
+715-17

Session Info stays exactly as it was. The one addition: each section can be dragged by a six-dot handle to rearrange it, and the order stays.

Leo's words (2026-10-29):

"dude why the f*** did you guys remake the fing session info intO A FING BAR THAT FING LAYOUT SHIFTS WHEN I ASKED FOR IT TO LITERALLY BE THE EXACT SAME FING SITUTAION AS BEFORE BUT NOW YOU CAN FING FCLICK AND DRAG TO REARRANGE THE FRUCKING SESSIONS WHAT THE F"

and earlier (2026-10-28): "you can't click and drag the individual sections around ā€¦ the f***ing click-draggable thing, the little, you know, the six dots or whatever, to, like, reorder and rearrange things with a nice little drag-and-drop thing."

Follows #27268 (landed as fda88a6e), which reverted #26988's summary card.

What changes

  • Every section (Environment, Context, Connectors, Changes, Outputs, Subagents, Background tasks) gets a six-dot handle, absolutely positioned in the body's existing 10px left padding. It is opacity: 0 until the section is hovered, the handle has keyboard focus, or a drag is underway. It takes no room, so the panel's pixels before any hover are byte-identical to the panel without handles. A Chromium test checks this.
  • Pointer-dragging the handle moves the section as the pointer passes a neighbour's midpoint. Up and Down Arrow on the focused handle move it one place. A section moves only within its own block (where it runs / what it made / what it runs), so the blocks' hairlines and spacing stay. There is no drag image, placeholder or animation.
  • The order is per user: one localStorage key, cmux.agentPane.inspector.order. Other panes follow through the storage event. Unknown or duplicate ids in a saved order are dropped, and a section the saved order lacks keeps its default slot.
  • Nothing else changes: no restyle, no new bar, no edge treatments, no shimmer.

Why not #26720. #26720 also restyles sections as separate rounded glass cards, adds a scroll-edge blur and a slower running shimmer, and adds a native setting with Lamport-stamped revisions plus MDM and schema entries. Leo's ask was "the exact same ā€¦ but now you can click and drag", so this PR is the minimal version. #26720 stays open with its owner.

Guard test (default layout). inspector-section-order.test.tsx pins the three blocks and their sections in default order for the gallery's full chat. It also checks that the handle is the only thing each section gained. inspector-section-order-browser.test.tsx lays out the real panel in Chromium and requires byte-identical pixels and identical section boxes with and without the handles, and that hovering shows a handle without moving anything.

Timers, observers, loops. No timers. One storage listener on window, added with the first subscriber and removed with the last. Pointer capture is released on pointerup, pointercancel or lostpointercapture.

Risk: normal. UI behaviour inside Session Info only, with no new defaults or settings.

Gallery: agent-pane.chat-inspector/full, agent-pane.chat-inspector/subagents-busy

Changelog

Added: Session Info sections can be dragged by their handle to reorder them; the order is remembered.

Observed / Not run

  • Ran on cmux-ci (Linux, Chromium) at 21496411 (the same diff before the rebase onto fda88a6e): bun run check and 11 test files, the two new tests, inspector-dead-clicks, chat-inspector*, running-wave and inspector-subagent-card-stays. All pass, exit 0. The earlier run caught the handle sitting outside the body's 6px padding, fixed in d021afdd.
  • Not run: a drag recording in the real app.

Agent session: agent session

šŸ¤– Generated with Claude Code