Session Info: drag any section anywhere, lifted, with neighbours sliding

TE
6d ago
+764-201

Summary

Leo's words:

  • 2026-10-31: "THE SESSION INFO HAS SO MANY FUCKING THINGS" / "THE CLICK DRAG" / "THE VARIOUS OTHER FUCKING IMPROVEMENTS" / "WHERE IS MY FUCKING PARITY"
  • 2026-10-28: "you can't click and drag the individual sections around ... you didn't even notice, apparently, the fucking 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."
  • 2026-10-29: "LITERALLY BE THE EXACT SAME FUCKING SITUTAION AS BEFORE BUT NOW YOU CAN FUCKING FCLICK AND DRAG TO REARRANGE"

#27291 let a section move by its six-dot handle, but only inside its own block, and the move was a jump-swap: no lift, no placeholder, no motion. Claude desktop lets every card go anywhere in the panel, with the grabbed one following the pointer.

After this change:

  • Any section goes anywhere. One order across the panel (sectionOrder.ts), not three per-block orders. Every section keeps the block it belongs to (where it runs, what it made, what it runs), and a hairline sits wherever two adjacent sections come from different blocks. The default order draws the same three blocks it drew before, and a browser test pins the spacing (0 inside "where it runs", 6px inside a block, 8px + hairline + 8px between blocks).
  • Nice drag-and-drop. The held section lifts (raised surface and shadow, only while held) and follows the pointer; its neighbours slide out of the way (FLIP on --cmux-motion-standard, ease-out, transform only); on release it settles into place on the same step and the order is saved. Escape puts it back and saves nothing. Up/Down Arrow on the focused handle still move it one place, now across a block's edge too, animated, with focus kept.
  • Nobody loses their order. The per-block object #27291 stored under cmux.agentPane.inspector.order is read as its blocks in a row; the next move writes the new array shape. An older pane reading the array falls back to the default order.
  • No box at rest. The "no box around a section" rule (design/session-panel.md) holds: only the held section gets a surface, and only while held. No cards.
  • Handle placement stays where #27291 put it (the body's left padding beside the section's first row, hover/focus-revealed, lit while held). A trailing grip would compete with the section's value column (percent, counts) on the right, which design/grid.md keeps for trailing marks.

Stop and cleanup (timers/animations): every slide is a finite 180ms Web Animation, cancelled when the section moves again or the list unmounts; the window pointermove/pointerup/pointercancel/blur/keydown listeners exist only while a drag runs. Reduce Motion and the host's motion switch (data-agent-motion="off") move everything in one frame. The order store now re-reads storage only when its text changed (one getItem per read), which also fixes a stale order across remounts when another pane changed it while none listened.

Spec: leo-workspace design/session-panel.md (teamleaderleo/leo-workspace#1871), new "Reordering (drag)" section (teamleaderleo/leo-workspace#1871).

Prior art: #27291 (merged; this builds on it). #26720 (open, HOLD, BLOCK at aa01c65; its session is gone) also made one global order, but with HTML5 drag, boxed cards and native settings across ~40 files. Leo's recorded asks for this surface ask for drag, not boxes ("separate rounded cards" appears only in #26720's own body), so this builds fresh on tip without cards and credits #26720's one-order idea. Open #28773/#27923 add a Usage section and touch sectionOrder.ts; they add their id to GROUP_SECTIONS as before.

Testing

Ran on the Linux fleet (cmux-ci test, Chromium for browser lanes) at this branch:

  • test/inspector-section-order.test.tsx 10 pass: default layout pinned; a drag from "what it made" into "where it runs" (lifted while held, hairlines follow, nothing saved until drop, saved after); Escape restores; Arrow keys cross a block edge and keep focus; the #27291 per-block value migrates; parseOrder on both shapes; another pane's storage event; a remount after another pane changed the order; refused storage; a hidden section keeps its slot.
  • test/inspector-section-order-browser.test.tsx 4 pass (Chromium): before hover the pixels equal the panel without handles; the three blocks' spacing and hairlines in the default order; hover shows the handle and nothing moves.
  • test/inspector-dead-clicks.test.tsx 7, test/chat-inspector-glass.test.tsx 4, test/chat-inspector-overlay-toggle.test.ts 24 pass.
  • vp check (types, 3387 files), vp lint on changed files, check:design-tokens pass.

Observed / Not run

Observed: the tests above; the gallery captures below. Not run: a tagged native build (webview-only change; the panel is the same webview in the app).

Changelog

Changed: Session Info sections can be dragged anywhere in the panel by their six-dot handle; the grabbed section lifts and follows the pointer while the others slide out of its way.

Proof

No screenshots: they gate nothing (LW#1854, cmux#28998). The gallery has agent-pane.chat-inspector reorder-dragging (Outputs held mid-drag over Context) and the shipped full state for a side-by-side via scripts/gallery-compare.sh.

Agent session: agent session

🤖 Generated with Claude Code