Skip to content

Split agents-view into header component + layout/expansion hooks - #870

Merged
selfcontained merged 2 commits into
mainfrom
agt_2afb169041e7/job-componentizer-4722ce53
Aug 3, 2026
Merged

Split agents-view into header component + layout/expansion hooks#870
selfcontained merged 2 commits into
mainfrom
agt_2afb169041e7/job-componentizer-4722ce53

Conversation

@selfcontained

Copy link
Copy Markdown
Owner

What

agents-view.tsx regrew from 774 to 952 lines after the split-pane (#743/#800) and whiteboard (#752) features landed. This extracts the three growth clusters, bringing it to 755 lines:

  • hooks/use-center-pane-layout.ts (new, 121 lines) — split-pane state, tab drag-and-drop plumbing (drag-over/leave/drop handlers, drop zones), and the stable terminal-container reparenting portal that keeps the terminal DOM alive across single↔split layout changes.
  • components/app/agents-view-header.tsx (new, 160 lines) — the h-14 header bar: sidebar toggle, quick-phrases button, diff-stats badge, center tab bar, changes settings popover, media-sidebar toggle, and the reconnect scan line. Pure presentational; all state stays in AgentsView.
  • hooks/use-expanded-agent.ts (new, 62 lines) — localStorage-persisted expanded-card state, the selection-follow effect (resolving nested review agents to their parent), and the toggle.

Why

agents-view.tsx was the top backlog item for the componentizer job — three prior extraction passes (use-media-sidebar-state, use-agent-actions, use-agents-view-routing) had been outgrown by new feature wiring.

Behavior

Purely structural — no rendered-output or behavior change. All hooks remain mounted in AgentsView itself (per the state-lifetime rule from PR #803), so no state lifetime changes. One mechanical lint fix: setExpandedAgentId added to handleOpenSubmittedReview deps since it now comes from the custom hook (same stable setter).

Validation

  • pnpm run finalize:web green
  • pnpm run test:e2e — 175 passed (includes 6 split-pane drag tests covering the extracted layout hook)
  • Playwright visual pass on a seeded dev stack: agent selection, card expansion follow, tab switching, Changes tab render all identical

Queued next

unified-diff-view.tsx (605 lines) — hunk/line renderers and parsing helpers extraction.

🤖 Generated with Claude Code

selfcontainedand others added 2 commits August 3, 2026 02:09
agents-view.tsx regrew to 952 lines after the split-pane (#743/#800) and
whiteboard (#752) features landed. Extract the three growth clusters:
- use-center-pane-layout.ts: split-pane state, tab drag-and-drop plumbing,
and the stable terminal container reparenting portal logic
- agents-view-header.tsx: the h-14 header bar (sidebar toggle, quick
phrases, diff-stats badge, center tab bar, media toggle, reconnect scan)
- use-expanded-agent.ts: persisted expanded-card state and the
selection-follow effect
Pure structural refactor; rendered output and behavior are identical.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Review feedback: the persistence and selection-follow effects originally
registered late in AgentsView's effect sequence. Split them into
useExpandedAgentSync, called at the original effect position, so passive
effect ordering is unchanged. useExpandedAgent keeps only the state and
toggle at the original useState position.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sign up for freeto 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

@selfcontained