Refactor inline JSX into named components

# Refactor inline JSX into named components

## When to use it
Use this workflow when you're past the "make something that works" phase and about to ship to users.

## Steps
1. Map — list the surface area of the change. Capture in PLAN.md.
2. De-risk — the thing most likely to bite you goes first (auth, billing, data).
3. Ship the smallest end-to-end slice.
4. Test with a real user (or realistic data) before broadening.
5. Iterate with tight feedback loops; don't batch five changes before testing.

## Anti-patterns
- "While I'm in here" refactors that expand scope
- Skipping empty/error states because the happy path works
- Trusting the first AI pass without running the code
- Shipping without a rollback plan