feat(next): tighten session rail gutter

Merged
TE
9d ago
+233-205

What changed

The session rail now stays one 36px rail at every width. Its right edge sits 4px from the transcript, progressively losing spare gutter as the chat narrows, then allowing up to 8px overlap before hiding below the 28px usable gutter. The narrow/tucked 4px tick and divider/card treatment is removed. Session Info shifts preserve the rail's actual 28px requirement instead of reserving 48px, and the rail moves with the transcript.

Chosen gallery variant: agent-pane.thread-minimap-narrow#gap-4-chosen (marked “Chosen.”), compared with 8px and 12px alternatives at wide, Session Info and narrow widths.

Design reference matched: manaflow-ai/cmux-design-references/apps/cmux/live/NOTES.md — the cmux reference's compact control rail and readable content edge.

Leo's feedback

The session rail thing. It's like all of that, the push logic, it's giving way too much room and accommodation to the left side scroll rail situation. This is like the second I move this to the left even more, it's just gonna become an overlay. That's just no. We need to, like, the overlay shouldn't be counted as part of it. Like, it should be able to just, you know, find a way to squeeze it in or whatever. That's just, I don't know. You don't need that much padding for it, I think. If you measure, like, this, that there's, like, there's way more stuff that you could be doing here. You could fit it in further. Like, it's fine if it overlays the text a little bit, just get it close. And if you're hovering over it, like, there's no need for it to, yeah, you don't have to be shy about it. Just do it. We don't need to, like, always have that much padding. If it really does get condensed, then just keep pressing it further. Obviously, you know, probably don't have it overlaid atop the text, but it's also like, well, you know, you could just hide it, right? Although I do notice you have this situation going on where you tuck the rail in. That's— oh fuck, that's really stupid. Like not only do you tuck the rail in, you didn't hide. Like what is this? Is this supposed to be some sort of new thing? Like you— no, just, it should just be the same thing. Like why do you have that oddity there? And when you keep pushing, oh my god. You guys, like you didn't make it a thing that affects the rest of the layout, did you? Like, I don't know. I don't think this is very good. What is it? Actually all you do is just push it to the left, right? But maybe you push it a bit too far to the left. I don't know if you want to have that. I don't know. Like I just feel like you can move it and remove the padding as it shrinks, right? Like as it shrinks, you remove the padding, but you don't need to, like, squeeze it so that, like, at rest it becomes half of what it looks like. I don't think that's necessary. Like right now it's just, as you squeeze and then, okay, eventually the section. It's like you don't need to have it that far in. All of a sudden now you just have, like, why are you trying to preserve the padding so much, like between the rail and the text? You don't need to do that. Don't do it. Just make it good.

Measurements

Chromium gallery render of the shipped gap-4-chosen variant:

WidthRail widthRail-to-text distance
1600px (wide)36px4px
1200px (Session Info reference)36px4px
1040px (gallery Session Info)36px4px
800px (narrow)36px4px
780px (overlap breakpoint)36px-6px overlap
760px (no-room threshold)hidden—

The 780px result is within the named 8px overlap allowance. The rail has no data-narrow state.

Verification

  • bun test test/thread-minimap-narrow.test.tsx test/thread-minimap-rail.test.tsx test/thread-minimap-room.test.ts test/chat-inspector.test.tsx test/chat-inspector-placement.test.ts (51 pass, 1 browser-lane skip)
  • CMUX_BROWSER_TESTS=1 bun test test/thread-minimap-left-rail-stays.test.ts (5 Chromium pass; WebKit unavailable in this lane)
  • CMUX_BROWSER_TESTS=1 bun test test/chat-inspector-placement.test.ts (11 Chromium pass; WebKit unavailable in this lane)
  • bun run typecheck
  • bun run gallery:build
  • bun run check:fixed-waits, bun run check:layers, bun run check:design-tokens, bunx vp lint, and changed-file vp fmt --check

The full scripts/web-lint.sh command remains blocked by an unrelated baseline format failure in src/pages/settings/store.ts; the changed files pass vp fmt --check.

Gallery before/after screenshots are gallery renders from gap-12 (before) and gap-4-chosen (after); Leo's private reference captures are not used.

WidthBeforeAfter
Wide (1600px)Before wideAfter wide
Session Info (1040px)Before Session InfoAfter Session Info
Narrow (780px)Before narrowAfter narrow

agent-identity footer
Agent session: agent session