feat(ui): two-pane split with a resizable splitter (RIG-4446)

[rigel-mintaka]

This PR is part of a stack containing 7 PRs:

1. main
2. refactor(ui): extract parseRoute and add ViewScope with useView (RIG-4439) #1652
3. refactor(ui): move routed surfaces and agent-workspace state onto the view scope (RIG-4442) #1675
4. feat(ui): window layout model, hash sync and session persistence (RIG-4443) #1743
5. feat(ui): view tab strip with keep-alive and open-in-tab links (RIG-4444) #1755
6. feat(ui): W leader chords and palette commands for tabs and panes (RIG-4445) #1770
7. "feat(ui): two-pane split with a resizable splitter (RIG-4446)" (this PR)
8. fix(ui): chrome cleanup: drop ADE and usage bar, Session Log naming, pane edges, row re-measure (RIG-4771) #1811

Tabs T6 of docs/designs/ui/compass-in-window-tabs/design.md §T6 (RIG-4446), stacked on T5 #1770. A split tab now shows its two views side by side (or stacked) with a resizable splitter.

Changes

• components/SplitPane.tsx (SplitPane: Component<{ tabId }>): renders one tab's box.
  • Views are keyed by id, so splitting or closing the other pane never remounts a view; a half-typed draft survives.
  • Each panel keeps view-panel, role=tabpanel, its id and aria-labelledby, and gains data-view-id and data-focused.
  • The splitter follows the ARIA window-splitter pattern: role=separator, orientation, aria-valuemin/max/now, tabindex=0. Arrow keys on the split axis step 5%; pointer drag uses pointer capture. Both dispatch resize, so the reducer clamps to 0.2–0.8 and the layout effect persists it.
• design/components/split-pane.css: --cx-* tokens only. 1px --cx-border divider, and a 1px --cx-border-focus outline on the focused pane.
• App.tsx: <main> renders one SplitPane per tab. Panels are found under main by data-view-id instead of a ref map. The focus effect keeps its order (show, move focus if leaving, hide) and also toggles each tab's box.
• window-layout.ts exports MIN_RATIO/MAX_RATIO. mountApp takes an optional layout storage.

Tests

• SplitPane.test.tsx, 9 tests: row and column rendering, no splitter on a single view, arrow-key and drag resize (clamped and persisted), the focused-pane marker, a draft surviving split and close-other, an inactive split tab hiding its splitter. 7 of 9 were red before SplitPane existed; the other 2 are regression guards.
• e2e split-view.spec.ts (§T6 acceptance): w v on a channel puts two panels side by side, and together they fill main (±2px). The second pane navigates to an agent, a send from the first pane's composer leaves the second pane on the agent, and the first pane stays focused. The fill check was red with a max-width: 40% panel rule.
• SplitPane.test.tsx also covers a drag ending on lost capture or a released button, and tab-keep-alive-style focus checks that removing a focused splitter (close other pane, close tab, next tab) leaves focus in a shown pane.
• Visual split-view.png: captured locally, as feat(ui): view tab strip with keep-alive and open-in-tab links (RIG-4444) #1755 did under DL-399 (docs(ui): allow local visual baseline captures on branches (RIG-4421, RIG-4447) #1644). The other 13 shots match unchanged.
• Playwright visual-smoke + split-view + tab-strip, --update-snapshots=none: 17 passed.
• moon run compass-ui:test: 1296 pass, 0 fail. Typecheck, stylelint and biome clean.

Known gap

The agent view's 340px log panel does not fit a half-width pane; the view clips it. RIG-4682 tracks making the agent view adapt to narrow panes.

Spec-impact: none.
Ledger-impact: none

Co-authored-by: Matt Wilkinson matt@rigel.build

[linear-code]

RIG-4446

[github-actions]

Compass engineering docs preview: https://compass-ui-rig-4446-split-pa.compass-eng-docs.pages.dev

Deployed from compass-ui/rig-4446-split-pane at 815eaf0.

[trunk-io]

This pull request is queued for merge as part of 1798, which will merge 1652, 1675, 1743, 1755, 1770, 1780, 1787, 1798.

[trunk-io]

This pull request was merged into main as part of stacked PR 1798.