Repository navigation
feat(app): try header separators and spacing from Knobs - #57925
Conversation
There was a problem hiding this comment.
Looks good. I ran the app's Playwright harness on the base and on this branch with a project + worktree session, both wide and narrow (review panel open). In the narrow header the base's slash sat noticeably further from the worktree icon than from the title. With this change the divider has about 10px to the title, and the side toward the worktree icon is unchanged (about 8.5px measured from the icon button's box). The wide layout shows the divider before the title and keeps the project / worktree slash inside the trigger. session-header.spec.ts and subagent-child-navigation.spec.ts pass (32 tests), and packages/app type-checks.
Public API: unchanged. The new Knobs entries are internal, app-only tuning keys.
No blocking concerns.


Kit wants to try separators other than the slash, and the slash was not equidistant after the icon-only headers (#57811/#57870).
Cause: the slash rule in the narrow container query targeted
[data-variant="slash"], an attribute the merged markup no longer has, so it never matched. The narrow header had no compensation for its own padding, and the project side was 3-4px wider than the title side.Change: one
SessionHeaderSeparatorreplaces every/between breadcrumb segments (location, ancestor trail). It is chosen and tuned from Knobs → Experiments:The marks are drawn at their exact ink size, so margins are computed from the gap minus the padding the neighbouring segment already adds (wide, narrow icon-only, and with a worktree). The
project / worktreeslash inside the location trigger is unchanged. The usrnk1 narrow-header geometry assertion insession-header.spec.tsno longer covers the separator, so it keeps only the avatar and worktree-icon spacing.Ink-to-ink gaps in px at the default settings, measured on 4x headless renders of the real header (project side / title side, LTR; RTL in the review):
Every option stays within 0.75px of the gap in all four layouts, LTR and RTL (contact sheets on the review).