Skip to content

feat(app): try header separators and spacing from Knobs - #57925

Merged
kitlangton merged 2 commits into
betafrom
slash-gaps
Oct 21, 2026
Merged

kitlangton merged 2 commits into
betafrom
slash-gaps

Conversation

@kitlangton

Copy link
Copy Markdown
Contributor

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 SessionHeaderSeparator replaces every / between breadcrumb segments (location, ancestor trail). It is chosen and tuned from Knobs → Experiments:

  • Header separator: Divider (default), Slash, Chevron, Bold chevron, Dot
  • Size, weight, opacity, and gap (one ink-to-ink gap, applied to both sides)

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 / worktree slash inside the location trigger is unchanged. The usrnk1 narrow-header geometry assertion in session-header.spec.ts no 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):

layout before (slash) after (divider)
wide 10.5 / 10.0 10.0 / 10.75
wide + worktree 10.5 / 10.25 10.75 / 10.0
narrow (≤640px) 13.75 / 10.0 10.0 / 10.0
narrow + worktree 12.75 / 10.0 10.0 / 10.0

Every option stays within 0.75px of the gap in all four layouts, LTR and RTL (contact sheets on the review).

@opencode-agent opencode-agent Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Before

After

@kitlangton
kitlangton merged commit cf56221 into beta Oct 21, 2026
9 of 15 checks passed
@kitlangton
kitlangton deleted the slash-gaps branch October 21, 2026 21:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant