feat(dashboard): plan-gated product pages + professional sidebar overhaul #4048 — ccantynz/alecrae.com

Originally written by @ccantynz-alt on GitHub.
Imported from https://github.com/ccantynz-alt/AlecRae.com/pull/83

Summary

8 new dashboard pages surfacing backend products that had no UI — AI Agent, Files, Security Center, Integrations, Email Hygiene, Achievements/Gamification, Notifications, and Translation Center
PlanGate component (components/plan-gate.tsx) wraps any page in a paywall that reads the user's plan from /v1/auth/me and blocks access with an upgrade prompt — nothing ships that costs us money without the customer paying first
Professional sidebar overhaul — 9 named sections (Mail / AI Features / Tools / Automation / Team / Insights / Settings / Admin), PRO/PERSONAL tier badges on gated nav items, new routes wired throughout

Route	Feature	Gate
`/agent`	AI Inbox Agent — status, morning briefing, draft approve/reject, runs log, config	PRO
`/files`	File browser — storage bar, type filters, search, grid with download/delete	PERSONAL
`/security-center`	Threat score/grade, sender verification (SPF/DKIM/DMARC), events log, trust toggles	Free
`/integrations`	Zapier/Make/n8n/custom platform cards, webhooks, API key management	PRO
`/hygiene`	Email hygiene score, subscription tracker, weekly habits chart	PERSONAL
`/achievements`	Inbox Zero streaks + achievement badge grid	Free
`/notifications`	Push permission, 6 notification toggles, quiet hours, AI batching	Free
`/translate`	Live translation with language swap, history, monthly stats	PERSONAL

apps/web/lib/plan.ts — PlanTier type, TIER_ORDER, isPlanAtLeast(), FEATURE_PLANS map
apps/web/components/plan-gate.tsx — PlanGate (paywall wrapper) + PlanBadge (coloured tier chip)
apps/web/lib/api-features.ts — 7 new typed API clients (agentApi, filesApi, securityCenterApi, hygieneApi, gamificationApi, pushNotificationsApi, translateApi); all featureFetch calls carry explicit generic type parameters

Sign in and verify sidebar shows 9 sections with correct PRO/PERSONAL badges
Visit /agent on a free account — should see upgrade paywall
Visit /agent on a Pro account — should see agent status and draft queue
Visit /security-center — should be accessible on all tiers
Visit /files on a free account — should see upgrade prompt
Visit /notifications — push permission flow works on supported browsers
Visit /translate — translate button fires API, result displays inline
Visit /integrations — connect/disconnect platform toggles work
Build passes: NODE_TLS_REJECT_UNAUTHORIZED=0 ./node_modules/.bin/next build (70/70 static pages, 0 errors)

🤖 Generated with Claude Code

Generated by Claude Code