Complete Payment and Auth Integration Plan

Summary

You are creating a new plan file in the .agents/plans/ directory.

Your Task

Determine the slug - Use `Look on the landing page, the I want you to implement full payment with all the parameters on the pricing page implemented, in all aspects.

link from the landing page,

add upgrade under the dropdown user can go to their polar profile to cancel their plan, etc etc

I need you to use context7 to get the docs for polar and polar combined with better-auth and implement the auth fully in the application.` as the file slug (kebab-case recommended) 2. Gather content - Collect or generate the plan content 3. Create the file - Use the create-plan script to generate the file

Usage

The script will automatically:

Generate a unique three-word ID (e.g., happy-blue-moon)
Create frontmatter with current date and formatted title
Save the file as {id}-{slug}.md in .agents/plans/

Creating the File

Option 1: Direct Content

If you have the content ready, run:

bash

npx tsx ~/.config/opencode/scripts/create-plan.ts "Look on the landing page, the I want you to implement full payment with all the parameters on the pricing page implemented, in all aspects.
link from the landing page,
add upgrade under the dropdownuser can go to their polar profile to cancel their plan, etc etc
I need you to use context7 to get the docs for polar and polar combined with better-auth and implement the auth fully in the application." "Your plan content here"

npx tsx ~/.config/opencode/scripts/create-plan.ts "Look on the landing page, the I want you to implement full payment with all the parameters on the pricing page implemented, in all aspects.
link from the landing page,
add upgrade under the dropdownuser can go to their polar profile to cancel their plan, etc etc
I need you to use context7 to get the docs for polar and polar combined with better-auth and implement the auth fully in the application." "Your plan content here"

Option 2: Multi-line Content (Heredoc)

For multi-line content, use heredoc:

bash

npx tsx ~/.config/opencode/scripts/create-plan.ts "Look on the landing page, the I want you to implement full payment with all the parameters on the pricing page implemented, in all aspects.
link from the landing page,
add upgrade under the dropdownuser can go to their polar profile to cancel their plan, etc etc
I need you to use context7 to get the docs for polar and polar combined with better-auth and implement the auth fully in the application." << HEREDOCYour multi-lineplan contentgoes hereHEREDOC

npx tsx ~/.config/opencode/scripts/create-plan.ts "Look on the landing page, the I want you to implement full payment with all the parameters on the pricing page implemented, in all aspects.
link from the landing page,
add upgrade under the dropdownuser can go to their polar profile to cancel their plan, etc etc
I need you to use context7 to get the docs for polar and polar combined with better-auth and implement the auth fully in the application." << HEREDOCYour multi-lineplan contentgoes hereHEREDOC

Option 3: Pipe Content

You can also pipe content:

bash

echo "Your content" | npx tsx ~/.config/opencode/scripts/create-plan.ts "Look on the landing page, the I want you to implement full payment with all the parameters on the pricing page implemented, in all aspects.
link from the landing page,
add upgrade under the dropdownuser can go to their polar profile to cancel their plan, etc etc
I need you to use context7 to get the docs for polar and polar combined with better-auth and implement the auth fully in the application."

echo "Your content" | npx tsx ~/.config/opencode/scripts/create-plan.ts "Look on the landing page, the I want you to implement full payment with all the parameters on the pricing page implemented, in all aspects.
link from the landing page,
add upgrade under the dropdownuser can go to their polar profile to cancel their plan, etc etc
I need you to use context7 to get the docs for polar and polar combined with better-auth and implement the auth fully in the application."

File Format

The created file will have:

The title is automatically formatted from the slug (e.g., my-feature -> My Feature).

Guidelines

Use descriptive slugs in kebab-case (e.g., user-authentication, api-integration)
Include clear, actionable plan content
The unique ID ensures no filename conflicts
Files are automatically dated for organization

Begin

Create a plan file using the slug from `Look on the landing page, the I want you to implement full payment with all the parameters on the pricing page implemented, in all aspects.

link from the landing page,

add upgrade under the dropdown user can go to their polar profile to cancel their plan, etc etc

I need you to use context7 to get the docs for polar and polar combined with better-auth and implement the auth fully in the application.` and appropriate content for the planning task.

Readbmrks

Read.agents

Updated todos

Checking current integration requirements first by pulling official docs for Polar and Better Auth via Context7, then I’ll draft the plan content and generate the .agents/plans file.

Used Context7 Resolve Library Id

Used Context7 Query Docs

Updated todos

Searched filesapp/**/{page,layout,route}.{ts,tsx,js,jsx}in //Users/duncan/dev/bmrks

I pulled the relevant Polar + Better Auth docs and now I’m mapping that into this repo’s existing landing/pricing/auth structure so the plan file is implementation-ready.

Searched filescomponents/**/*.{ts,tsx}in //Users/duncan/dev/bmrks

Readlanding-pricing.tsx

Readheader.tsx

Readauth.ts

Readauth-client.ts

Readschema.prisma

Readlanding.tsx

Readpackage.json

Used Context7 Query Docs

Updated todos

>npx tsx ~/.config/opencode/scripts/create-plan.ts "landing-page-full-payment-pricing-upgrade-polar-profile-cancel-better-auth" <<'HEREDOC'
## Outcome
Ship end-to-end paid plan flow: landing/pricing checkout, in-app upgrade entry, Polar customer portal cancel/manage, and Better Auth + Polar subscription sync.

## Context7 constraints (authoritative)
- Better Auth Polar plugin: `polar({ client, createCustomerOnSignUp, use: [checkout(), portal(), webhooks()] })`.
- Client actions: `authClient.checkout(...)`, `authClient.customer.portal()`, `authClient.customer.subscriptions.list(...)`.
- Polar checkout core params to wire end-to-end: `product_price_id` (or mapped slug), `success_url`, `customer_email`, `metadata`, optional discount/seat params when supported.

## Plan
1. Baseline + config
- Audit current files: `components/landing-pricing.tsx`, `components/landing.tsx`, `components/header.tsx`, `lib/auth.ts`, `lib/auth-client.ts`, `prisma/schema.prisma`.
- Add deps: `@polar-sh/better-auth`, `@polar-sh/sdk`.
- Add env contract: `POLAR_ACCESS_TOKEN`, `POLAR_WEBHOOK_SECRET`, `POLAR_SERVER`, `POLAR_PRO_MONTHLY_PRODUCT_ID` (or price ID), `POLAR_PRO_YEARLY_PRODUCT_ID`, `NEXT_PUBLIC_APP_URL`.

2. Server auth + billing integration
- Extend `lib/auth.ts` with Polar client and Better Auth Polar plugin.
- Enable: checkout (monthly/yearly mappings + success/return URLs + auth-only policy), portal, webhooks.
- Add webhook handlers to persist entitlement state in app DB (active/canceled/trialing, plan, renewal/cancel timestamps, Polar customer id).
- Regenerate/update Better Auth Prisma models; apply migration/push safely.

3. Client auth integration
- Extend `lib/auth-client.ts` with `polarClient()` so checkout/portal/subscription methods are typed on client.
- Add a small billing helper wrapper for checkout payload creation and error handling.

4. Landing + pricing conversion
- Replace static `/signup` CTA in `components/landing-pricing.tsx` with plan-aware actions:
  - signed out: redirect to signup/login with intended plan + cycle.
  - signed in: call `authClient.checkout` with mapped monthly/yearly product + metadata (`source: landing_pricing`, cycle, user id/ref id if needed).
- Ensure all pricing parameters used in app-level payload builder; keep yearly/monthly toggle behavior intact.
- Add pricing-to-checkout navigation from landing where needed.

5. Dashboard dropdown upgrade + portal
- In `components/header.tsx` add:
  - `Upgrade` item (opens Pro checkout flow).
  - `Manage Billing` / `Billing Portal` item (calls `authClient.customer.portal()` for cancel/manage).
- Hide/disable Upgrade when user already has active Pro; show manage billing instead.

6. Entitlement sync + feature gating
- Derive `isPro` from webhook-synced state (not optimistic client state).
- Update relevant server/client checks for Pro-only features.
- Add fallback reconciliation path using `authClient.customer.subscriptions.list({ active: true })` for drift recovery.

7. Verification
- Sandbox flow test: new checkout, upgrade, renewal event, cancellation in Polar portal, access downgrade.
- Verify webhook signature handling and idempotency.
- Run `bun run typecheck`, `bun run lint`, focused tests, and `bun run build`.

## Done criteria
- Pricing cards initiate correct Polar checkout for monthly/yearly.
- Dashboard dropdown contains working Upgrade + Billing Portal actions.
- User can cancel/manage in Polar portal; app entitlement updates via webhook.
- Auth + billing integration fully typed, migrated, and passing lint/typecheck/build.

## Unresolved questions
- Exact Polar product/price IDs and whether checkout should use product IDs vs price IDs in this app.
- Final Pro feature gate list (which capabilities require active subscription now).
- Preferred post-checkout and post-portal return URLs (dashboard only vs contextual return).
HEREDOC

Readplans

Readgentle-jade-leaf-landing-page-full-payment-pricing-upgrade-polar-profile-cancel-better-auth.md

Updated todos

Created and verified.

Ran npx tsx ~/.config/opencode/scripts/create-plan.ts with slug landing-page-full-payment-pricing-upgrade-polar-profile-cancel-better-auth.
Generated file: .agents/plans/gentle-jade-leaf-landing-page-full-payment-pricing-upgrade-polar-profile-cancel-better-auth.md.
Plan content is populated with Context7-backed Polar + Better Auth implementation steps (checkout, portal, webhooks, pricing-page params, dropdown upgrade flow, auth sync).
Included an ## Unresolved questions section at the end of the plan per plan-mode guidance.

Ran sub-agentDeep-dive interview to flesh out a spec or design document

[search-mode] MAXIMIZE SEARCH EFFORT. Launch multiple background agents IN PARALLEL:

explore agents (codebase patterns, file structures, ast-grep)
librarian agents (remote repos, official docs, GitHub examples) Plus direct tools: Grep, ripgrep (rg), ast-grep (sg) NEVER stop at first result - be exhaustive.

not soft, read the @components/landing-pricing.tsx and implement all of them, not some, all of them.

Quick summary of that task-tool run: it returned a task_id (ses_38d096f9effe72COm8I2Qwl3ZZ) but no actual result payload, so no interview findings were produced yet.

I’m now continuing with full implementation (not partial): wiring Polar + Better Auth, upgrading pricing actions, and adding upgrade/manage-billing controls in the dropdown. I’ll verify everything with typecheck/lint/build afterward.

Updated todos

Used Context7 Resolve Library Id

Ran sub-agentMap auth and session data flow for billing integration

Ran sub-agentMap landing pricing and checkout trigger integration points

Ran sub-agentCollect authoritative Better Auth plus Polar plugin docs details

Ran sub-agentCollect Polar checkout parameter and subscription lifecycle details

System Reminder

[BACKGROUND TASK COMPLETED]
**ID:** `bg_f9b40869`
**Description:** Map auth and session data flow for billing integration
**Duration:** 23s

**1 task still in progress.** You WILL be notified when ALL complete.
Do NOT poll - continue productive work.

Use `background_output(task_id="bg_f9b40869")` to retrieve this result when ready.

System Reminder

[ALL BACKGROUND TASKS COMPLETE]

**Completed:**
- `bg_f9b40869`: Map auth and session data flow for billing integration
- `bg_369bd9be`: Map landing pricing and checkout trigger integration points

Use `background_output(task_id="<id>")` to retrieve each result.

Used Background Output

Great — I’ve pulled the completed background findings and they align with your instruction: implement all pricing behavior, not partial.

Now I’m moving straight into code changes across pricing, auth, billing state, and dropdown UX so monthly/yearly checkout, upgrade, and portal cancellation all work end-to-end. I’ll run full verification after implementation.

[SYSTEM DIRECTIVE: OH-MY-OPENCODE - TODO CONTINUATION]

Incomplete tasks remain in your todo list. Continue working on the next pending task.

Proceed without asking for permission
Mark each task complete when finished
Do not stop until all tasks are done

[Status: 0/6 completed, 6 remaining]

Remaining tasks:

[in_progress] Reconfirm Polar + Better Auth docs via Context7 and map required flows
[pending] Deeply scan codebase for pricing/auth/header integration points and existing patterns
[pending] Implement Polar + Better Auth server integration and billing data model/webhooks
[pending] Implement client billing integration on landing pricing (all checkout parameters)
[pending] Add Upgrade and Manage Billing entries in user dropdown with proper gating
[pending] Run db generation/migration + diagnostics + typecheck + lint + build

Updated todos

Used Context7 Query Docs

I’ve refreshed docs with Context7 and confirmed the concrete APIs we need (authClient.checkout, authClient.customer.portal, subscription list, Polar webhook plugin). Next I’m mapping every integration point in this repo before patching.

Updated todos

Searched filesserver/**/*.tsin //Users/duncan/dev/bmrks

Searched fileslib/**/*.{ts,tsx}in //Users/duncan/dev/bmrks

Searched filesapp/**/*.{ts,tsx}in //Users/duncan/dev/bmrks

Greppedexport const router = { $$$ }

Readrouter.ts

Readcontext.ts

Readorpc.ts

Readpage.tsx

Readdashboard-content.tsx

Readschema.ts

Readdb.ts

Readprofile.ts

Readroute.ts

Readauth-server.ts

Readsettings-dialog.tsx

Readpage.tsx

Read.env.example

Readsignup-form.tsx

Readlogin-form.tsx

Readpage.tsx

Readoauth-button.tsx

Readbookmarks.ts