[ogunrombimoyin1212-jpg]

feat: image optimisation, privacy-safe logging/analytics gating, README + architecture docs

Closes #684
Closes #692
Closes #693
Closes #694

(Part of Phase 3 — Epics M, O, P.)

Summary

Four Phase 3 backlog items, delivered together because the docs (#693, #694)
describe the logger/analytics and image components added by #692 and #684.

---

#684 — Image optimisation and lazy loading (performance)

New: src/components/shared/ResponsiveImage.tsx — one wrapper that applies the image rules everywhere:

• loading="lazy" by default; priority → loading="eager" + fetchPriority="high" + sync decode
• required width/height → space reserved, no layout shift
• optional srcSet / sizes passthrough (for API-exposed variants)
• solid placeholder + fade-in until the bitmap loads
• onError → fallback image (neutral inline SVG by default, fallbackSrc override); srcset dropped for the fallback; state is keyed by src so changing a gallery image resets cleanly

Adopted in: PetCard (also gains an opt-in priority prop), ListingCard, InterestPetCard, the listing gallery (ListingInfoTab) and the pet-details gallery (PetlistingdetailsPage). First gallery image is eager, the rest lazy.

The issue names PetGallery.tsx; no such file exists. The galleries are ListingInfoTab.tsx and PetlistingdetailsPage.tsx, so those were converted.

#692 — Privacy-safe logging and analytics gating (security, privacy)

• src/lib/analytics.ts
  • Inert unless VITE_ENABLE_ANALYTICS === 'true' (exact match): no listeners, no beacons, no fetches.
  • Event allow-list (EVENT_ALLOW_LIST): unknown events dropped; only listed property keys kept; values must be numbers, booleans or short enum-like tokens ([A-Za-z0-9_\-/.]{1,64}), so free text, emails, phones and document names cannot be sent even under an allowed key. Query strings/hashes stripped from route values.
  • reportError sends only name / scrubbed message / scrubbed stack; sent with credentials: 'omit'.
  • Delivers to optional VITE_ANALYTICS_ENDPOINT; without it nothing is sent.
• src/lib/logger.ts — debug/info no-op in production; warn/error always emit but are scrubbed.
• src/lib/scrub.ts — shared PII scrubbing: sensitive keys (password, token, authorization, cookie, email, phone, body, payload, message, …) redacted recursively; JWTs, Bearer tokens, emails, phone numbers and ?token=-style query secrets removed from strings; Errors reduced to name + scrubbed message.
• Audit: every console.* in src/ replaced with logger. Removed leaks: rating payload logged in adoptionService.submitRating, approval payload in useAdoptionApprovals, adoption-completion data in the demo page, and the user's email in the MSW password-reset handler. Nothing logs request bodies, headers or cookies.
• initAnalytics() called from main.tsx; .env.example documents both variables.

#693 — README and feature documentation

• README Features now lists Approval, Dispute, Custody, Notifications with links to new guides in docs/features/*.md (file map, routes, mocks, hook usage snippets per feature).
• Project-structure tree rewritten from the real src/ (the old tree listed common/, forms/, features/pets, which don't exist). A note explains where documents/profile/auth live, since they are not features/ folders.
• Privacy/analytics section and env vars added.
• Correction: README claimed tokens are stored in "HttpOnly cookies"; the code uses a Bearer token in browser storage. Text fixed and linked to the auth-flow doc.

#694 — Architecture and data-flow documentation

docs/architecture.md, Mermaid, each diagram written against cited files:
request flow (component → hook → service → ApiClient → backend), realtime flow (socket → invalidate → refetch; optimistic merge only for the user's own actions), auth/session flow, a per-mutation cache-invalidation map (diagram + table), and an explicit frontend/blockchain boundary.

§6 "Known deviations" records where the code departs from the layering (e.g. direct fetch/axios/XHR in a few hooks; two notification socket implementations of which only the context provider is mounted; duplicate features/dispute and features/disputes). These are documented, not changed here.

---

Tests

Area	Coverage
analytics.test.ts	flag off (undefined, "false", "TRUE", "1") → zero beacons/fetches/listeners; allow-list; PII stripped under allowed and disallowed keys; error scrubbing
logger.test.ts	prod no-ops debug/info; warn/error scrubbed; scrub unit tests
ResponsiveImage.test.tsx	lazy/eager + fetchpriority, dimensions, srcset/sizes, placeholder → loaded, error fallback, src-change reset
e2e/analytics-gating.spec.ts	flag off → no analytics requests and no sendBeacon across /home, /listings

Verification

Run on a branch cut from current upstream/main:

• tsc -b: clean · eslint on all changed/new files: clean
• vitest run (all directories under src/): 122 files, 967 tests passed
• Not run: the Playwright spec and the Lighthouse acceptance check for [089] Image optimisation and lazy loading #684 (no browsers in my environment). Please confirm in CI that /listings shows no image layout shift and "defer offscreen images" passes; the existing lighthouserc.js budget covers /listings.

Notes for reviewers

• No new dependencies.
• ResponsiveImage hides the image (opacity-0) until onLoad; images served from cache still fire load, so nothing stays hidden.
• Analytics event names in EVENT_ALLOW_LIST are an initial vocabulary; call sites are not wired yet, since the issue asks for the gate and the allow-list, not specific instrumentation.

🤖 Generated with Claude Code

[vercel]

@ogunrombimoyin1212-jpg is attempting to deploy a commit to the sheriffamina1-9497's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@ogunrombimoyin1212-jpg Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[amina69]

@ogunrombimoyin1212-jpg kindly fix the conflict