Cursor keeps putting everything in one 1400-line page.tsx, how do I split it safely

Small moves, one per commit, and make the AI move code instead of writing code.

1. Commit what you have.
2. Pick the most self-contained piece (usually something with no state, like the footer or a card).
3. Prompt: "Move the JSX for the pricing card verbatim into components/pricing-card.tsx. Pass what it needs as props. Do not rename, restyle or change any logic."
4. Click through the app. Commit.
5. Repeat.

Stateful pieces last. When you get to those, pass the state and setter down as props first. Clean it up later, once everything lives in its own file.

It's boring and takes an evening. That's the point.

On top of that, since this is App Router: split by where the code needs to run. The data loading can go to the server page. Only the interactive parts (filters, modal) need "use client":

app/page.tsx              → server: fetch data, render layout
components/filters.tsx    → client: useState for filters
components/results.tsx    → client or server, depending on interactivity

You'll probably find half the 1400 lines don't need to be client code at all.

Before any moving: ask the agent for a map, no code. 'List the sections of this file, which state each one reads and writes.' That list tells you which pieces are safe to extract first (the ones that touch no state).