Add Stripe billing, pricing page, and plan enforcement

- Pricing page at /pricing with value-framed tiers (Free/Starter/Pro/Team)
- Stripe Checkout integration (checkout sessions, customer portal)
- Billing API client (createCheckout, createPortalSession, getBillingStatus)
- Plan enforcement: free plan limited to 3 cloud projects, no private projects
- UpgradeModal shown when user hits plan limits in the IDE
- Worker billing endpoints (checkout, portal, webhook, status)
- D1 schema migration for subscriptions table and user billing columns
- Webhook signature verification with constant-time comparison
- Pricing link added to landing page nav and footer

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Filip-Bumbu

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import IDE from './pages/IDE'
 import Embed from './pages/Embed'
 import ProjectPage from './pages/ProjectPage'
 import UserProfile from './pages/UserProfile'
+import Pricing from './pages/Pricing'
 
 function App() {
   const navigate = useNavigate()
@@ -27,6 +28,7 @@ function App() {
       <Route path="/embed" element={<Embed />} />
       <Route path="/p/:id" element={<ProjectPage />} />
       <Route path="/u/:username" element={<UserProfile />} />
+      <Route path="/pricing" element={<Pricing />} />
     </Routes>
   )
 }

frontend/src/components/UpgradeModal.tsx

@@ -0,0 +1,86 @@
+/**
+ * UpgradeModal — shown when user hits a plan limit
+ * Nudges them to upgrade with context about what they tried to do
+ */
+import { Link } from 'react-router-dom'
+import { X, Sparkles, ArrowRight } from 'lucide-react'
+
+interface UpgradeModalProps {
+  isOpen: boolean
+  onClose: () => void
+  reason?: 'cloud_limit' | 'private_project' | 'generic'
+  message?: string
+}
+
+const REASONS = {
+  cloud_limit: {
+    title: "You've hit your project limit",
+    description: 'Free accounts can save up to 3 cloud projects. Upgrade to Starter to save unlimited projects with short URLs.',
+    cta: 'Unlock unlimited projects',
+  },
+  private_project: {
+    title: 'Private projects need Starter',
+    description: 'Keep your work private with a Starter plan. You also get version history, short URLs, and a public profile.',
+    cta: 'Go private',
+  },
+  generic: {
+    title: 'Upgrade to do more',
+    description: 'Get cloud storage, private projects, and more with a paid plan.',
+    cta: 'See plans',
+  },
+}
+
+export default function UpgradeModal({ isOpen, onClose, reason = 'generic', message }: UpgradeModalProps) {
+  if (!isOpen) return null
+
+  const content = REASONS[reason] || REASONS.generic
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative bg-[#0f0f11] border border-white/10 rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl">
+        {/* Close */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-500 hover:text-white transition"
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        {/* Icon */}
+        <div className="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-5">
+          <Sparkles className="w-6 h-6 text-purple-400" />
+        </div>
+
+        {/* Content */}
+        <h2 className="text-xl font-bold text-white mb-2">{content.title}</h2>
+        <p className="text-gray-400 text-sm leading-relaxed mb-2">
+          {message || content.description}
+        </p>
+
+        {/* Free tier note */}
+        <p className="text-gray-500 text-xs mb-6">
+          Your existing URL-based projects are always free and unlimited.
+        </p>
+
+        {/* Actions */}
+        <div className="flex gap-3">
+          <Link
+            to="/pricing"
+            onClick={onClose}
+            className="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-purple-600 hover:bg-purple-500 text-white font-medium text-sm transition"
+          >
+            {content.cta}
+            <ArrowRight className="w-4 h-4" />
+          </Link>
+          <button
+            onClick={onClose}
+            className="px-4 py-3 rounded-xl bg-white/5 hover:bg-white/10 text-gray-400 text-sm transition"
+          >
+            Later
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/lib/api.ts

@@ -50,10 +50,14 @@ function getAuthHeaders(): HeadersInit {
   return headers
 }
 
-class ApiError extends Error {
-  constructor(message: string, public status: number) {
+export class ApiError extends Error {
+  public code: string
+  public feature?: string
+  constructor(message: string, public status: number, code?: string, feature?: string) {
     super(message)
     this.name = 'ApiError'
+    this.code = code || 'error'
+    this.feature = feature
   }
 }
 
@@ -66,10 +70,15 @@ async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
     },
   })
 
-  const data = await res.json()
+  const data = await res.json() as any
 
   if (!res.ok) {
-    throw new ApiError(data.error || 'Request failed', res.status)
+    throw new ApiError(
+      data.message || data.error || 'Request failed',
+      res.status,
+      data.error,          // 'plan_limit' or other error code
+      data.feature,        // 'private_projects' etc.
+    )
   }
 
   return data as T
@@ -131,3 +140,29 @@ export async function getMyProjects(): Promise<{ projects: ProjectListItem[] }>
 export async function getUserProjects(userId: string): Promise<{ projects: ProjectListItem[] }> {
   return request(`/api/users/${userId}/projects`)
 }
+
+// ── Billing ────────────────────────────────────────
+
+export interface BillingStatus {
+  plan: 'free' | 'starter' | 'pro' | 'team'
+  status: 'active' | 'canceled' | 'past_due' | 'none'
+  current_period_end: string | null
+  cancel_at_period_end: boolean
+}
+
+export async function getBillingStatus(): Promise<BillingStatus> {
+  return request('/api/billing/status')
+}
+
+export async function createCheckout(priceId: string): Promise<{ url: string }> {
+  return request('/api/billing/checkout', {
+    method: 'POST',
+    body: JSON.stringify({ price_id: priceId }),
+  })
+}
+
+export async function createPortalSession(): Promise<{ url: string }> {
+  return request('/api/billing/portal', {
+    method: 'POST',
+  })
+}

frontend/src/pages/IDE.tsx

@@ -35,8 +35,10 @@ import SearchPanel from '../components/SearchPanel'
 import GitHubModal from '../components/GitHubModal'
 import SourceControlPanel from '../components/SourceControlPanel'
 import EditorPaneV2 from '../components/EditorPaneV2'
+import UpgradeModal from '../components/UpgradeModal'
 import { PaneManagerProvider, usePaneManager } from '../components/PaneManager'
 import { GitHubRepo } from '../lib/github'
+import { ApiError } from '../lib/api'
 import { File } from '../types/workspace'
 
 function EditorPaneRoot({ 
@@ -120,6 +122,9 @@ export default function IDE() {
   const [showGitHub, setShowGitHub] = useState(false)
   const [showSourceControl, setShowSourceControl] = useState(false)
   const [showEmbed, setShowEmbed] = useState(false)
+  const [showUpgrade, setShowUpgrade] = useState(false)
+  const [upgradeReason, setUpgradeReason] = useState<'cloud_limit' | 'private_project' | 'generic'>('generic')
+  const [upgradeMessage, setUpgradeMessage] = useState<string | undefined>()
   const [sourceRepo, setSourceRepo] = useState<GitHubRepo | null>(null)
   const [githubUser, setGithubUser] = useState<{ login: string; avatar_url: string } | null>(null)
   const [isRunning, setIsRunning] = useState(false)
@@ -250,19 +255,30 @@ export default function IDE() {
   }
 
   const handleSaveToCloud = async () => {
-    let id: string | null
-    if (cloudProjectId) {
-      await updateCloud()
-      id = cloudProjectId
-    } else {
-      const title = getProjectTitle(workspace)
-      id = await saveToCloud({ title })
-    }
-    if (id) {
-      const url = `${window.location.origin}/p/${id}`
-      await navigator.clipboard.writeText(url)
-      setShowCloudSaved(true)
-      setTimeout(() => setShowCloudSaved(false), 3000)
+    try {
+      let id: string | null
+      if (cloudProjectId) {
+        await updateCloud()
+        id = cloudProjectId
+      } else {
+        const title = getProjectTitle(workspace)
+        id = await saveToCloud({ title })
+      }
+      if (id) {
+        const url = `${window.location.origin}/p/${id}`
+        await navigator.clipboard.writeText(url)
+        setShowCloudSaved(true)
+        setTimeout(() => setShowCloudSaved(false), 3000)
+      }
+    } catch (e: any) {
+      if (e instanceof ApiError && e.code === 'plan_limit') {
+        setUpgradeReason(e.feature === 'private_projects' ? 'private_project' : 'cloud_limit')
+        setUpgradeMessage(e.message)
+        setShowUpgrade(true)
+      } else {
+        // Show generic error for network failures, auth errors, etc.
+        useWorkspaceStore.setState({ error: e?.message || 'Failed to save project' })
+      }
     }
   }
 
@@ -734,6 +750,7 @@ export default function IDE() {
       <GitHubModal isOpen={showGitHub} onClose={() => setShowGitHub(false)} onImport={setSourceRepo} />
       <SourceControlPanel isOpen={showSourceControl} onClose={() => setShowSourceControl(false)} sourceRepo={sourceRepo} />
       <EmbedModal isOpen={showEmbed} onClose={() => setShowEmbed(false)} />
+      <UpgradeModal isOpen={showUpgrade} onClose={() => setShowUpgrade(false)} reason={upgradeReason} message={upgradeMessage} />
     </div>
   )
 }

frontend/src/pages/Landing.tsx

@@ -70,15 +70,18 @@ export default function Landing() {
             <span className="text-lg font-semibold text-white">HashIDEA</span>
           </Link>
           <div className="flex items-center gap-4">
-            <a 
-              href="https://github.com/WickTheThird/HashIDEA" 
-              target="_blank" 
+            <Link to="/pricing" className="text-sm text-gray-400 hover:text-white transition-colors">
+              Pricing
+            </Link>
+            <a
+              href="https://github.com/WickTheThird/HashIDEA"
+              target="_blank"
               rel="noopener"
               className="text-gray-400 hover:text-white transition-colors"
             >
               <Github className="w-5 h-5" />
             </a>
-            <Link 
+            <Link
               to="/ide"
               className="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white text-sm font-medium rounded transition-colors"
             >
@@ -450,6 +453,7 @@ export default function Landing() {
             <span className="text-gray-400">HashIDEA</span>
           </div>
           <div className="flex items-center gap-6">
+            <Link to="/pricing" className="hover:text-white transition-colors">Pricing</Link>
             <a href="https://github.com/WickTheThird/HashIDEA" target="_blank" rel="noopener" className="hover:text-white transition-colors">GitHub</a>
             <span>Built by <a href="https://github.com/WickTheThird" target="_blank" rel="noopener" className="hover:text-white transition-colors">WickTheThird</a></span>
           </div>