feat(browser-tabs): tab-owned split panes — one strip, tabs contain panes

[adamleithp]

What

Split panes, v2 model (supersedes the window-owned-panes approach in #3338): the single title-bar tab strip stays, and each tab owns a split-pane layout. Panes are the content units and carry the identity (canvas / task / channel section / app view); a tab's pill renders its focused pane's identity, plus a mini layout glyph of the actual pane tree when the tab holds more than one pane.

• Split gesture: drag tab B's pill onto the content area while tab A is active — 4 edge zones per pane, a center zone (merge to the right of that pane), and 4 thin root-edge zones. B merges INTO A (mergeTabIntoTab splices B's whole pane subtree via insertNodeInLayout), B's pill disappears, focus lands on B's focused pane.
• Close a pane: hover X on each pane of a multi-pane tab; the last remaining pane makes the tab single-pane again.
• Per-pane history: every pane hosts its own router over memory history; the title-bar back/forward buttons follow the focused pane. A pane's location IS its content pointer — PaneChrome reconciles every location change into setPaneTarget, and the old history tabId-stamping machinery is deleted.
• Tab switches are pure store mutations (browser-like): they leave history untouched; inactive tabs' panes unmount but their routers stay cached, so locations survive switches and restore across reloads (sessionStorage) and relaunches (pane identity).

Model

window { activeTabId }            — which tab the strip shows
tab    { layout, focusedPaneId }  — strip unit; owns a PaneLayoutNode tree
pane   { tabId, identity… }       — content unit; one router each

Migration

0021_tab_owned_panes: new browser_panes table, one pane backfilled per existing tab (<tabId>-pane), tab identity columns dropped, layout/focused_pane_id added. Also heals dev profiles that dogfooded the pre-merge v1 branch (drops v1's window-owned browser_panes, re-adds browser_windows.active_tab_id). Verified by replaying the full 0000→0021 chain over seeded v0 data and over a copy of a real v1-dogfooded dev DB.

Verified live (CDP)

Strip in title bar; tab click switches pane trees with locations preserved; pill drag → right-edge and bottom-edge merges (row/column splits) with the pill disappearing and the glyph appearing; glyph reflects the real tree; hover X collapses a pane and drops the glyph; new tab lands on the new-tab page; reload restores tabs, split layout, and focus; sidebar navigation targets the focused pane and enables its back button.

Notes

• Back/forward no longer replay tab switches (intended, browser-like).
• Inactive tabs unmount their panes (terminals detach on tab switch) — same as pre-split behaviour.
• pnpm typecheck green across the monorepo; shared suite 111 tests (transforms + layout math + decidePaneNavigation); ui suite 1471 tests green; migration replay harness green. Pre-existing better-sqlite3 ABI mismatch keeps the sqlite-backed workspace-server tests red on main too (unrelated).

🤖 Generated with Claude Code

[trunk-io]

Merging to main in this repository is managed by Trunk.

• To merge this pull request, check the box to the left or comment /trunk merge below.

After your PR is submitted to the merge queue, this comment will be automatically updated with its status. If the PR fails, failure details will also be posted here

[github-actions]

React Doctor found 10 issues in 4 files · 10 warnings.

10 warnings

src/features/browser-tabs/PaneLayoutGlyph.tsx

• ⚠️ src/features/browser-tabs/PaneLayoutGlyph.tsx:43 Static value rebuilt every render prefer-module-scope-static-value

src/features/browser-tabs/panes/PaneTreeRenderer.tsx

• ⚠️ src/features/browser-tabs/panes/PaneTreeRenderer.tsx:41 Ref initializer runs on every render rerender-lazy-ref-init
• ⚠️ src/features/browser-tabs/panes/PaneTreeRenderer.tsx:106 Component rendered by inline function call no-render-in-render
• ⚠️ src/features/browser-tabs/panes/PaneTreeRenderer.tsx:142 Component rendered by inline function call no-render-in-render

src/router/routes/__root.tsx

• ⚠️ src/router/routes/__root.tsx:127 Chained array iterations js-combine-iterations

src/shell/AppShell.tsx

• ⚠️ src/shell/AppShell.tsx:116 Large component is hard to read and change no-giant-component
• ⚠️ src/shell/AppShell.tsx:179 Ref initializer runs on every render rerender-lazy-ref-init
• ⚠️ src/shell/AppShell.tsx:262 State only used in handlers rerender-state-only-in-handlers
• ⚠️ src/shell/AppShell.tsx:265 Event logic handled in an effect no-event-handler
• ⚠️ src/shell/AppShell.tsx:282 Event logic handled in an effect no-event-handler

_{Reviewed by React Doctor for commit 1a8e99f.}

[greptile-apps]

_{Reviews (1): Last reviewed commit: "feat(browser-tabs): tab-owned split pane..." | Re-trigger Greptile}

[greptile-apps]

Replacement Columns Removed Too Soon

This migration drops the old tab identity columns in the same step that introduces browser_panes. During a staged rollout, any still-running code that reads or writes browser_tabs.dashboard_id, task_id, channel_id, channel_section, scroll_state, or app_view can fail immediately after the migration runs instead of continuing until the replacement has fully rolled out.

Rule Used: When removing database fields, do not remove them ... (source)

Learned From
PostHog/posthog#32876

[adamleithp]

This rule targets staged rollouts against a shared server DB; this is the desktop app's per-install local SQLite — the binary and its migrations ship together, so there is no old reader running against the migrated schema. The real re-run hazard (ledger behind schema re-executing 0021, whose backfill reads the dropped columns and whose DROP TABLE would wipe pane rows) is now handled by a migration guard in migrate.ts: the probe fails on a post-0021 schema and the migration is recorded and skipped. Leaving unresolved for a human look, but no column-retention change planned.