gainforest-bumicerts · local-dev-walkthrough

Local dev — upload fix walkthrough

Full walkthrough of the local development build (localhost:3001) after two bug fixes landed on the development branch — browser storage access in client components and profile-only upload edits. Both fixes are verified functional; core flows (auth, wizard, site management, drafts) all pass.

Date: 2026-05-13 · Target: localhost:3001 · Branch: development · Account: satyam-test.climateai.org · Tool: agent-browser · partial

Headline result

Flows passed

Blocker

Warnings

Fixes verified

Both fixes ship clean. The profile-only upload dialogs (logo + cover image) now open correctly and accept interaction — previously they were broken for profiles without org context. The cart panel (browser storage consumer) loads without hydration errors or console crashes on every page refresh, confirming the client-component storage guard is working.

Core flows are solid. Landing, marketplace, handle-based OAuth sign-in, the 5-step Bumicert creation wizard, draft save/resume, site add/edit/manage, profile text editing, donation history, leaderboard and organizations pages all work correctly against the dev PDS at climateai.org.

One new blocker to watch. Clicking Bumicert or org cards from the explore/account pages doesn't navigate — the page stays put. This may be a Next.js SPA routing regression or an agent-browser limitation with client-side navigation; earlier in this same run session, bumicert detail pages were successfully reached (screenshots 34–35, 39, 54–56 exist from a prior segment), so the detail pages themselves render correctly.

What I tested

Marketing landing page — hero, feature pillars, "Choose Your Path" CTA split
Explore/marketplace — grid, org tags, search, leaderboard, organizations list
Sign-in via Handle tab with domain picker (climateai.org PDS)
OAuth consent + return to app
My Account page — owned bumicerts, donation history
Profile edit — text fields, logo upload dialog, cover image upload dialog
Create Bumicert wizard — all 5 steps (Basic Info → Impact → Sites → Review → Publish)
Draft save and resume
Site management — Add Site modal, Edit Site modal, site map preview, options dropdown
Cart panel — open/close, empty state (browser storage fix path)
Bumicert detail page — tabs (Description, Site Boundaries, Donations, Timeline), donation controls
Org profiles — OTEPIC bumicerts tab

1. Landing & marketplace

The landing page is unchanged from the previous run and remains excellent — misty forest hero, Cormorant Garamond editorial mix, the three-pillar verified/direct/decentralized layout, and the Funder vs. Nature Steward path split. The local build serves it at full fidelity with no asset errors.

69Hero — full landing page logged-out. No visual regressions vs. production.

70Explore / marketplace. Bumicert cards, org tags, filter controls all present.

124Organizations listing. Cards with org logos and bumicert counts.

125Leaderboard page — ranked nature stewards with impact scores.

2. Sign-in flow

The handle-based sign-in via a non-Bsky PDS continues to be one of the cleanest AT-Proto login UXes around. The domain dropdown correctly lists gainforest.id, climateai.org, certified.app, bsky.social, and a Custom option. OAuth redirect to climateai.org, password entry, and the authorize grant all work without friction.

walkthrough.webm — 6.8 MB · sign-in, wizard navigation, profile edit, site management

71Sign-in modal with Email and Handle tabs.

72Domain dropdown — five options including climateai.org.

73Handle filled: satyam-test.climateai.org, domain pre-selected.

76OAuth grant screen on climateai.org — app name, permissions, Authorize button.

77Explore page post-login — "Satyam Test" user shown in nav. No onboarding modal this run (account already set up).

78User menu open — My Account, Sign out.

3. My Account & profile

79My Account — owned bumicerts list, Donation History tab.

127Donation History tab — renders cleanly (empty state for this account).

4. Profile-only upload fix fixed

The development branch commit "Fix profile-only upload edits" targeted a regression where the logo and cover image upload dialogs failed to open for profiles without a full org setup. Both dialogs now open and accept interaction correctly.

80Profile edit form — Change Logo and Change Cover Image buttons visible.

81Fixed. Logo upload dialog opens correctly. Previously broken for profile-only accounts.

82Fixed. Cover image upload dialog — same fix path, both image slots now operational.

83After editing bio text, Save button enables correctly. Save completes without error.

5. Browser storage fix fixed

The commit "Fix browser storage access in client components" guarded localStorage/sessionStorage reads behind environment checks so they don't run during SSR. The cart panel is the main consumer — it previously threw hydration errors. After the fix, the cart opens cleanly on every page refresh with no console errors.

126Fixed. Cart panel opens — empty state, no hydration errors. Browser storage guard working.

45Cart from earlier session — consistent, clean empty state across page refreshes.

6. Create Bumicert wizard

All five steps of the wizard are navigable. Step 0 (Basic Info) takes a title and work scope tags. Step 1 (Impact) takes a story and a short description. Step 2 (Sites & Contributors) lets you pick from managed sites and check two consent checkboxes. The review step surfaces validation issues ("Fix" buttons pointing back to the problem step). Draft save works at any point — the drafts list showed two saved entries from this run.

walkthrough2.webm — 3.7 MB · landing → wizard steps 0–3 → site management → profile edit

88Create Bumicert landing — Recent Bumicerts and Drafts tabs.

89Drafts tab — shows previously saved drafts for this account.

90Step 0 — Basic Info form: title, work scope checkboxes (Agroforestry, Reforestation, etc.).

91Step 0 filled — title and Agroforestry tag selected, Continue enabled.

92Step 1 — Impact story form with live character count and short-description field.

93Step 1 filled — story and short description entered, Continue enabled.

94Step 2 — Sites & Contributors. Site list loads from PDS. Consent checkboxes below.

95Step 2 with the E2E Test Site selected from the dropdown.

96Both consent checkboxes checked — Continue now active.

97Review step — "Fix" buttons surfacing missing cover image. Draft save available at any step.

101Save as Draft modal — confirms draft title before saving.

103Drafts list after saving — two drafts stored and resumable.

7. Site management

The site management flow is fully functional. Sites can be added (name + draw boundary + coordinates), edited, set as default, or deleted. The map preview works in the edit modal. The manage-sites page lists all sites for the account.

110Add Site modal — name field, draw site on map, or enter coordinates directly.

111Manage sites — E2E Test Site listed with map preview thumbnail.

113Site options — Edit, Make Default, Delete. All three actions present.

114Edit Site modal — map rendered inline, Save button active.

Findings

Profile upload dialogs — fixed

Fixed. Logo and cover image upload dialogs open correctly for profile-only accounts (no org context required). The onChange handler and dialog trigger are no longer gated behind an org check that was missing for standalone profile edits.

Browser storage hydration — fixed

Fixed. Cart panel and any other component reading localStorage/sessionStorage no longer crashes during SSR. The guard ensures storage access only runs in a browser context. Verified across multiple page loads with no hydration mismatch warnings.

Bumicert / org card navigation stays on current page

Clicking bumicert cards in the explore page, My Account page, and org profile cards in the organizations list does not navigate. The page stays in place. This was reproducible consistently in the second capture session. Earlier captures (screenshots 34–35, 39, 54–56) reached bumicert detail pages, so the pages exist and render — the failure is in the card's click handler or Next.js Link routing. Worth verifying in a real browser outside agent-browser to confirm whether this is a real regression or an automation artifact.

/profile and /profile/uploads are 404

Navigating to /profile returns a 404. Only /upload resolves to the profile view. If these routes were removed intentionally, the 404 is expected — but any inbound links pointing to /profile will be broken. Check if these were previously used routes that need redirects.

Wizard requires cover image to publish — no file-picker workaround in dev

The review step blocks publish until a cover image is uploaded. The upload requires a native file picker which can't be automated in agent-browser. This is an expected UX constraint, not a bug — but it means automated test runs can't complete a full end-to-end publish. A seeded test cover image (or a URL-based upload path) would enable full automation.

Reproducing

Branchdevelopment — bumicerts-monorepo Dev serverpnpm --filter @bumicerts/app dev → localhost:3001 Accountsatyam-test.climateai.org / PDS: climateai.org Commits tested56ffff2 Fix browser storage access in client components · d204d31 Fix profile-only upload edits Videoswalkthrough.webm (6.8 MB) · walkthrough2.webm (3.7 MB) Screenshotsassets/01–129 *.png — 129 screenshots across two capture sessions