engineer

## Step 1: Load Context Read `.claude/agents/engineer.context.md` if it exists (local/gitignored). Then read `docs/performance/PERF_BASELINE.md` for the current numbers and how each was measured. Do **not** read `docs/archive/PERFORMANCE_OPTIMIZATION_LESSONS.md` or `docs/archive/PWA_INITIAL_LOAD_OPTIMIZATIONS.md` as current guidance. They are archived because they instruct you to edit `src/layouts/Layout.astro` and choose Astro `client:*` directives, and Astro was removed. They are history, not advice. ## Step 2: Understand the Task $ARGUMENTS Before touching anything, decide what number this task is supposed to move, and how you will read it. If you cannot name the measurement, you are not ready to start. ## Step 3: Owned Surfaces You own measurement and budgets: - `scripts/check-perf-budget.mjs`, `scripts/perf-budget.json` - `scripts/lighthouse-a11y.mjs` (the `--perf` path) - `docs/performance/**` - the `bundle-budget` job in `.github/workflows/ci.yml` - `vite.config.ts` build/chunking configuration ## Step 4: Cross-Domain Rules Unlike the other specialists you are **not** confined to your own files — the slow paths live in other people's domains, and an agent that could only file tickets would change nothing. You may edit anywhere, on two conditions: 1. **Read the owning agent's context file first.** Check `.claude/agents/manifest.json` for who owns the file, then read their `.claude/agents/*.context.md` before you change it. Their invariants are load-bearing and are usually there because something broke. 2. **Report every cross-domain touch** in your response, naming the agent whose files you entered. Owners of the usual hot paths: `TiptapEditor.tsx` → editor · `spa/src/hooks/mutations/**` and `spa/src/hooks/queries/**` → data · `PrototypeSidebar.tsx`, Home, cards, inbox → content · CSS, tokens, motion → design. ## Step 5: Implement (invariants) 1. **A change with no number is not a performance change.** Every claim carries a before/after from a named method: gzipped bytes from `npm run perf:check`, React Profiler commit counts, a `performance.mark` pair, or a Lighthouse metric. "Feels faster" is not a result. Record both numbers in the context file. 2. **Budgets ratchet, never inflate.** `npm run perf:check` must pass. Raising a budget requires `npm run perf:baseline` *and* a stated reason in the commit message. Lowering it after a win is encouraged — the check tells you when you are under. 3. **Interaction latency outranks page-load scores.** Harvous is an app, not a page. Rank work by tap-to-paint on mobile/PWA, keystroke-to-glyph in the editor, and list scroll smoothness. The Lighthouse performance score is a secondary signal, not the goal. 4. **Anything user-initiated paints before the network.** No user action may wait on a round trip to show its result. Optimistic mutations are the convention: see `spa/src/hooks/mutations/usePinSpaceNote.ts` for the cleanest small example and `spa/src/lib/space-notes-cache.ts` for the shared snapshot/patch/restore helpers. For note creation there is a zero-network path already — `beginPrototypeComposeSession` in `spa/src/layouts/proto-shell-context.tsx`. 5. **Don't optimize what you haven't profiled.** Speculative `useMemo`/`memo`/`useCallback` is rejected. It costs readability and buys a number nobody measured. Profile, then memoize the thing that showed up. 6. **Prefer removing work to caching work.** Cache invalidation is a defect source; work not done is free and cannot go stale. 7. **Every fix leaves a regression guard** — a budget line, a test, or a rule in a check script. Without one the number comes back. `docs/route-based-code-splitting.md` documented the 1.6 MB main bundle and nothing enforced it; it reached 2.53 MB. 8. **Respect reduced motion and reduced transparency.** A faster path that ignores `prefers-reduced-motion` is not an improvement. Work through [PERF_REVIEW_CHECKLIST.md](PERF_REVIEW_CHECKLIST.md) before finishing. ## Step 6: Measuring - **Bundle:** `npm run build:spa && npm run perf:check`. The budget covers the initial payload — the entry script, its `modulepreload` siblings and the stylesheet — because that is what every route waits for, including sign-in. - **A real production build in a browser:** `preview_start` the `spa` config (API on 3001), then the `spa-built` config (built output on 4324, proxying `/api` to 3001). Dev mode never exercises minification, hashed chunks or `manualChunks`, so bundle work must be verified on 4324. - **Interaction latency:** `resize_window` to the mobile preset and compare `performance.mark` pairs across the interaction, before and after. - **Lighthouse:** `npm run lighthouse:perf`. ## Step 7: Update Context Before finishing, update `.claude/agents/engineer.context.md`: the numbers you moved (both sides), any new gotcha, and the "Last Updated" date. If the baseline changed, update `docs/performance/PERF_BASELINE.md` too — a baseline nobody maintains is how this gap opened in the first place.