Skip to content

Extract split-pane layout into center-pane-split.tsx#800

Merged
selfcontained merged 1 commit into
mainfrom
agt_749930000c62/job-debt-collector-5e2b649f
Jul 19, 2026
Merged

Extract split-pane layout into center-pane-split.tsx#800
selfcontained merged 1 commit into
mainfrom
agt_749930000c62/job-debt-collector-5e2b649f

Conversation

@selfcontained

Copy link
Copy Markdown
Owner

What

Extract the ~80-line isSplit render block out of agents-view.tsx into a new presentational CenterPaneSplit component (apps/web/src/components/app/center-pane-split.tsx).

Why this is tech debt

agents-view.tsx is one of the largest, most-frequently-touched web components (1006 lines). The split-pane JSX is a self-contained, purely presentational chunk that was inlined in the middle of the render tree, making the component harder to read. This is the "self-contained sub-component extraction" the tech-debt backlog recommended for this file — chosen over a risky big split of the WebSocket/terminal lifecycle.

Change

  • New CenterPaneSplit receives splitState, the three refs (splitLeftRef, splitButtonRef, splitTerminalSlotRef), changesElement, isMobile, onLayoutChange, and onExitSplit.
  • Pure refactor: the JSX is byte-identical. Refs are created in the parent and passed down; the terminal DOM node is still portaled into the shared split terminal slot; all layout effects and state stay in agents-view.tsx.
  • Removed now-unused Split (lucide) and Resizable* imports from agents-view.tsx.
  • agents-view.tsx: 1006 → 933 lines.

Validation

  • pnpm run check
  • pnpm run finalize:web
  • pnpm run test:e2e ✅ (168 passed, 13 skipped — terminal-live suite requires live mode)
  • Playwright smoke check: agents view mounts with 0 console errors.

No behavior change.

Next run

Backlog: continue trimming agents-view.tsx (933 lines) with another self-contained extraction (e.g. the bottom dialog cluster or the center-pane header toolbar), or do a fresh dead-code/duplication scan of apps/server/src and apps/web/src.

🤖 Generated with Claude Code

Move the ~80-line isSplit render block out of agents-view.tsx into a new
presentational CenterPaneSplit component. Pure refactor: the JSX is
unchanged and the terminal DOM node is still portaled into the shared
split terminal slot; refs and layout effects stay in the parent.

agents-view.tsx: 1006 -> 933 lines.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
@selfcontained
selfcontained merged commit fd99dbb into main Jul 19, 2026
1 check passed
@selfcontained
selfcontained deleted the agt_749930000c62/job-debt-collector-5e2b649f branch July 19, 2026 09:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant