### Implement UX-4 Feature on Goals Page

### Command/plan

I will be implementing UX-4 from @TODO.md Read the task. Implementation details:

1. Add a new button on the Goals page

2. Reuse the onboarding calculator screen in an edit goals mode

3. In that mode, when the user is done, save goals and return to /dashboard/goals

4. Do not force the user through how it works or first meal

5. Preload current values if possible

6. Polish the CTA copy so the mode switch is obvious

I'll explore the relevant files in parallel to understand the current implementation.

### Agent

Now I have a clear picture. Let me design the plan.

### ToolSearch

### Write.claude/plans/velvety-plotting-tarjan.md

`★ Insight ─────────────────────────────────────`

1. The `location.state` pattern (used by `ConfirmMealPage`) is ideal here: same URL, different behavior — no new routes, no URL params leaking into history, no prop drilling through the router tree.

2. `useState` lazy initializers (the value, not a function) run once at mount, making them perfect for seeding form state from navigation state — cleaner than a `useEffect` that sets state after render.

3. The cache gap (OnboardingGoalsPage calls `useGoals.saveGoals`, bypassing `useCachedGoals`) is fixed with a `goalsUpdated` flag in navigate state — a lightweight one-way signal that triggers a targeted `refetch()` on the destination page.
`─────────────────────────────────────────────────`

**Plan summary:**

**2 files changed, no new routes:**

1. **`GoalsPage.tsx`** — add a "Recalculate Goals" secondary button that navigates to `/dashboard/onboarding/goals` with `{ editMode: true, currentGoals: formData }` in state.

2. **`OnboardingGoalsPage.tsx`** — read `location.state` to detect edit mode, then:
   1. Pre-fill manual tab fields with passed goal values
   2. Show "Update Your Goals" header + "Save Goals" / "Cancel" CTAs
   3. Skip `refetchOnboarding()` and navigate to `/dashboard/goals` (not `/how-it-works`) on save
   4. Trigger a cache refresh in GoalsPage via `{ state: { goalsUpdated: true } }` on navigate back

### ExitPlanMode

Good feedback. Let me update the plan.

Updated. The revised plan for `GoalsPage`:

1. **Remove** all `Input` fields, `isSaving`, `handleSaveGoals`, and the Save button
2. **Add** read-only display rows for each macro (color dot + label + value, right-aligned)
3. **Single CTA**: "Edit Goals" primary button → navigates to the calculator in edit mode

Everything else in the plan stays the same.

### ExitPlanMode

Now let me implement.

Both files updated and the build is clean. Here's what changed:

**`GoalsPage.tsx`** — The 5 input fields and Save button are gone. Goals display as a clean read-only list (color dot + label + value). A single "Edit Goals" button navigates to the calculator with the current goal values pre-loaded. On return, a `goalsUpdated` flag triggers a cache refresh.

**`OnboardingGoalsPage.tsx`** — Detects `location.state.editMode` at mount. In edit mode: header reads "Update Your Goals", the manual tab is pre-filled with current values, the bottom bar shows a "Cancel" button above "Save Goals", and on save it returns to `/dashboard/goals` (skipping `refetchOnboarding` and the how-it-works flow entirely). The original onboarding flow is completely unchanged.