vibecarbon 0.5.0 → 0.6.0

package/carbon/src/client/index.html

@@ -13,10 +13,10 @@
     <meta property="og:type" content="website" />
     <meta property="og:title" content="%VITE_PROJECT_NAME%" />
     <meta property="og:description" content="Build, launch, and scale your SaaS product with auth, billing, teams, email, blog, docs, i18n, and production infrastructure included." />
-    <meta property="og:url" content="{{SITE_URL}}" />
+    <meta property="og:url" content="%VITE_PUBLIC_URL%" />
     <meta property="og:site_name" content="%VITE_PROJECT_NAME%" />
     <!-- Replace with your own 1200x630 OG image for social sharing previews -->
-    <meta property="og:image" content="{{SITE_URL}}/og-image.png" />
+    <meta property="og:image" content="%VITE_PUBLIC_URL%/og-image.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
 
@@ -24,7 +24,7 @@
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="%VITE_PROJECT_NAME%" />
     <meta name="twitter:description" content="Build, launch, and scale your SaaS product with auth, billing, teams, email, blog, docs, i18n, and production infrastructure included." />
-    <meta name="twitter:image" content="{{SITE_URL}}/og-image.png" />
+    <meta name="twitter:image" content="%VITE_PUBLIC_URL%/og-image.png" />
 
     <!-- RSS -->
     <link rel="alternate" type="application/rss+xml" title="%VITE_PROJECT_NAME% Blog" href="/rss.xml" />

package/carbon/src/client/locales/en.json

@@ -524,7 +524,7 @@
     },
     "cta": {
       "badge": "Secure by design",
-      "headline": "Ship something you own.",
+      "headline": "Ship your next big thing!",
       "subheading": "Production-grade, automated everything."
     },
     "footer": {

package/carbon/src/client/pages/Pricing.tsx

@@ -0,0 +1,169 @@
+import {
+  type CatalogTier,
+  catalogTiers,
+  formatPlanPrice,
+  formatTierPrice,
+  type Plan,
+  plans,
+} from '@shared/pricing';
+import { ArrowRight, Check, X } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { Wordmark } from '@/components/Logo';
+import { Nav } from '@/components/Nav';
+import { SEO } from '@/components/SEO';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface PricingCardProps {
+  name: string;
+  description: string | null;
+  price: string;
+  /** Feature rows. Catalog tiers are all included; demo plans mark exclusions. */
+  features: { text: string; included: boolean }[];
+  ctaLabel: string;
+  popular?: boolean;
+}
+
+function PricingCard({
+  name,
+  description,
+  price,
+  features,
+  ctaLabel,
+  popular = false,
+}: PricingCardProps) {
+  return (
+    <div
+      className={cn(
+        'relative flex flex-col rounded-2xl border p-6 transition-shadow',
+        popular ? 'border-primary shadow-lg shadow-primary/10' : 'border-border'
+      )}
+    >
+      {popular && (
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+          <Badge>Most popular</Badge>
+        </div>
+      )}
+
+      <div className="mb-4">
+        <h2 className="text-lg font-semibold">{name}</h2>
+        {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+      </div>
+
+      <div className="mb-6">
+        <span className="text-4xl font-bold">{price}</span>
+      </div>
+
+      <ul className="mb-8 flex-1 space-y-3">
+        {features.map((feature) => (
+          <li key={feature.text} className="flex items-start gap-2.5 text-sm">
+            {feature.included ? (
+              <Check className="mt-0.5 size-4 shrink-0 text-primary" />
+            ) : (
+              <X className="mt-0.5 size-4 shrink-0 text-muted-foreground/50" />
+            )}
+            <span className={feature.included ? '' : 'text-muted-foreground/50'}>
+              {feature.text}
+            </span>
+          </li>
+        ))}
+      </ul>
+
+      <Button variant={popular ? 'default' : 'outline'} size="lg" asChild className="w-full">
+        <Link to="/signup" className="inline-flex items-center gap-2">
+          {ctaLabel}
+          <ArrowRight className="size-4 shrink-0" />
+        </Link>
+      </Button>
+    </div>
+  );
+}
+
+/** Cap the column count at the number of cards so 1–2 tiers don't stretch oddly. */
+const gridColsByCount: Record<number, string> = {
+  1: 'sm:max-w-md sm:mx-auto',
+  2: 'sm:grid-cols-2 sm:max-w-3xl sm:mx-auto',
+  3: 'sm:grid-cols-2 lg:grid-cols-3',
+  4: 'sm:grid-cols-2 lg:grid-cols-4',
+};
+
+export default function Pricing() {
+  const useCatalog = catalogTiers.length > 0;
+  const count = useCatalog ? catalogTiers.length : plans.length;
+  const gridCols = gridColsByCount[Math.min(count, 4)] ?? 'sm:grid-cols-2 lg:grid-cols-4';
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Nav />
+      <SEO
+        title="Pricing"
+        description="Simple, transparent pricing. Start free and scale as you grow."
+      />
+
+      <div className="mx-auto max-w-6xl px-6 pt-32 pb-24">
+        {/* Header */}
+        <div className="mx-auto mb-16 max-w-2xl text-center">
+          <h1 className="mb-4 text-4xl font-black tracking-tight md:text-5xl">
+            Simple, transparent pricing
+          </h1>
+          <p className="text-lg text-muted-foreground">
+            Start free and upgrade when you're ready to ship. No hidden fees.
+          </p>
+        </div>
+
+        {/* Plan cards */}
+        <div className={cn('grid items-stretch gap-6', gridCols)}>
+          {useCatalog
+            ? catalogTiers.map((tier: CatalogTier) => (
+                <PricingCard
+                  key={tier.priceId}
+                  name={tier.name}
+                  description={tier.description}
+                  price={formatTierPrice(tier)}
+                  features={tier.features.map((text) => ({ text, included: true }))}
+                  ctaLabel={tier.amount === 0 ? 'Get started' : `Choose ${tier.name}`}
+                />
+              ))
+            : plans.map((plan: Plan) => (
+                <PricingCard
+                  key={plan.id}
+                  name={plan.name}
+                  description={plan.description}
+                  price={formatPlanPrice(plan)}
+                  features={plan.features}
+                  ctaLabel={plan.id === 'free' ? 'Get started' : `Choose ${plan.name}`}
+                  popular={plan.popular}
+                />
+              ))}
+        </div>
+      </div>
+
+      <footer className="border-t border-border py-8">
+        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-6 sm:flex-row">
+          <Wordmark size="sm" />
+          <div className="flex items-center gap-6">
+            <Link
+              to="/"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Home
+            </Link>
+            <Link
+              to="/privacy"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Privacy
+            </Link>
+            <Link
+              to="/terms"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Terms
+            </Link>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/carbon/src/client/pages/settings/Billing.tsx

@@ -1,4 +1,4 @@
-import { type Plan, type PlanId, plans } from '@shared/pricing';
+import { formatPlanPrice, type Plan, type PlanId, plans } from '@shared/pricing';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { AlertCircle, Check, CreditCard, ExternalLink, Loader2, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -287,7 +287,6 @@ export default function Billing() {
                   {displayPlans.map((plan) => {
                     const isCurrentPlan = plan.id === currentPlanId;
                     const priceId = getPriceId(plan);
-                    const price = plan.price.monthly;
 
                     return (
                       <div
@@ -306,10 +305,7 @@ export default function Billing() {
                           <p className="text-sm text-muted-foreground mt-1">{plan.description}</p>
                         </div>
                         <div className="mb-4">
-                          <span className="text-3xl font-bold">
-                            {price === 0 ? t('common.free') : `$${(price / 100).toFixed(0)}`}
-                          </span>
-                          {price > 0 && <span className="text-muted-foreground text-sm">/mo</span>}
+                          <span className="text-3xl font-bold">{formatPlanPrice(plan)}</span>
                         </div>
                         <ul className="space-y-2 mb-6 flex-1">
                           {plan.features.map((feature) => (

package/carbon/src/server/index.ts

@@ -506,11 +506,30 @@ if (process.env.NODE_ENV === 'production') {
     })
   );
 
-  // Serve static files from dist/client
-  app.use('/*', serveStatic({ root: './dist/client' }));
+  // Serve static files from dist/client. HTML (index.html for `/`) must NOT be
+  // heuristically cached, or returning visitors keep loading a stale index that
+  // references old hash-busted asset URLs after a deploy. `no-cache` still allows
+  // 304 revalidation, so it's cheap — only the tiny HTML is re-checked.
+  app.use(
+    '/*',
+    serveStatic({
+      root: './dist/client',
+      onFound: (path, c) => {
+        if (path.endsWith('.html')) c.header('Cache-Control', 'no-cache');
+      },
+    })
+  );
 
-  // SPA fallback - serve index.html for client-side routing
-  app.get('/*', serveStatic({ path: './dist/client/index.html' }));
+  // SPA fallback - serve index.html for client-side routing (always revalidate)
+  app.get(
+    '/*',
+    serveStatic({
+      path: './dist/client/index.html',
+      onFound: (_path, c) => {
+        c.header('Cache-Control', 'no-cache');
+      },
+    })
+  );
 } else {
   // Development: redirect root to API docs (frontend served by Vite dev server)
   app.get('/', (c) => c.redirect('/api/docs'));

package/carbon/src/shared/billing-catalog.ts

@@ -0,0 +1,25 @@
+/**
+ * Billing catalog snapshot — single source of truth for the operator's activated
+ * provider products (the dynamic, price-sorted tier list).
+ *
+ * GENERATED by `vibecarbon configure` (Payments → Stripe): it fetches the live
+ * products/prices, lets the operator pick which to activate, and writes them here
+ * so the public pricing surface renders accurate pricing WITHOUT calling the
+ * provider API on every page load. Re-run `vibecarbon configure` to refresh, then
+ * redeploy.
+ *
+ * Contains NO secrets — product names, amounts, and price IDs are all public.
+ * Ships empty; `pricing.ts` falls back to the generic free/starter/pro demo plans
+ * until this is populated.
+ *
+ * Types live in `billing-catalog.types.ts` (not regenerated). Do not hand-edit
+ * the data below — re-run `vibecarbon configure` instead.
+ */
+
+import type { BillingCatalog } from './billing-catalog.types';
+
+export const billingCatalog: BillingCatalog = {
+  provider: null,
+  generatedAt: null,
+  tiers: [],
+};

package/carbon/src/shared/billing-catalog.types.ts

@@ -0,0 +1,35 @@
+/**
+ * Type definitions for the billing-catalog snapshot. Kept separate from the
+ * generated data file (`billing-catalog.ts`) so `vibecarbon configure` can
+ * regenerate the data without touching these stable types.
+ *
+ * The catalog is a price-sorted list of the products the operator activated in
+ * their provider (via `vibecarbon configure` → Payments). Each activated product
+ * becomes a tier shown on the public pricing surface. The template's generic
+ * free/starter/pro demo (in `pricing.ts`) is separate and used when the catalog
+ * is empty.
+ */
+
+export interface CatalogTier {
+  /** Provider price ID (e.g. Stripe `price_...`). */
+  priceId: string;
+  /** Product name — the tier's display name. */
+  name: string;
+  description: string | null;
+  /** Feature bullets, from the product's provider "marketing features". */
+  features: string[];
+  /** Amount in the currency's smallest unit (e.g. cents). 0 = free. */
+  amount: number;
+  /** ISO 4217 currency code, lowercase (e.g. `usd`). */
+  currency: string;
+  interval: 'month' | 'year' | 'one_time';
+  type: 'recurring' | 'one_time';
+}
+
+export interface BillingCatalog {
+  provider: 'stripe' | 'paddle' | 'polar' | null;
+  /** ISO 8601 timestamp of the last `vibecarbon configure` snapshot. */
+  generatedAt: string | null;
+  /** Activated tiers, sorted by `amount` ascending. */
+  tiers: CatalogTier[];
+}

package/carbon/src/shared/pricing.ts

@@ -11,6 +11,11 @@
  * Server-side: import { getStripePriceId } from '@/shared/pricing' (resolves env vars)
  */
 
+import { billingCatalog } from './billing-catalog';
+import type { CatalogTier } from './billing-catalog.types';
+
+export type { CatalogTier };
+
 export type PlanId = 'free' | 'starter' | 'pro';
 
 export interface PlanFeature {
@@ -32,6 +37,12 @@ export interface Plan {
     apiRequestsPerMinute: number;
   };
   popular?: boolean;
+  // Dynamic fields, populated from the billing-catalog snapshot when the
+  // provider has been configured. Undefined falls back to the hardcoded price.
+  priceId?: string;
+  currency?: string; // ISO 4217, lowercase (e.g. 'usd')
+  interval?: 'month' | 'year' | 'one_time';
+  type?: 'recurring' | 'one_time';
 }
 
 /**
@@ -57,7 +68,7 @@ function buildFeatures(included: string[]): PlanFeature[] {
   }));
 }
 
-export const plans: Plan[] = [
+const basePlans: Plan[] = [
   {
     id: 'free',
     name: 'Free',
@@ -120,10 +131,54 @@ export const plans: Plan[] = [
   },
 ];
 
+/**
+ * The template's generic SaaS demo plans (free/starter/pro). Used as the fallback
+ * on the pricing surface when no provider catalog has been configured.
+ */
+export const plans: Plan[] = basePlans;
+
 export function getPlan(planId: PlanId): Plan | undefined {
   return plans.find((p) => p.id === planId);
 }
 
+/**
+ * The activated provider products (price-sorted), synced by `vibecarbon configure`
+ * → Payments. When non-empty, these drive the public pricing surface instead of
+ * the generic demo `plans`. Sorted defensively by amount in case the snapshot isn't.
+ */
+export const catalogTiers: CatalogTier[] = [...billingCatalog.tiers].sort(
+  (a, b) => a.amount - b.amount
+);
+
+function priceSuffix(interval: CatalogTier['interval'], type: CatalogTier['type']): string {
+  if (type === 'one_time' || interval === 'one_time') return '';
+  if (interval === 'year') return '/yr';
+  return '/mo';
+}
+
+function formatAmount(amount: number, currency: string): string {
+  const value = amount / 100;
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: (currency || 'usd').toUpperCase(),
+    minimumFractionDigits: 0,
+    maximumFractionDigits: Number.isInteger(value) ? 0 : 2,
+  }).format(value);
+}
+
+/** Currency- and interval-aware price label for an activated catalog tier. */
+export function formatTierPrice(tier: CatalogTier): string {
+  if (tier.amount === 0) return 'Free';
+  return `${formatAmount(tier.amount, tier.currency)}${priceSuffix(tier.interval, tier.type)}`;
+}
+
+/** Currency- and interval-aware price label for a demo plan. */
+export function formatPlanPrice(plan: Plan): string {
+  const cents = plan.price.monthly;
+  if (cents === 0) return 'Free';
+  return `${formatAmount(cents, plan.currency ?? 'usd')}${priceSuffix(plan.interval ?? 'month', plan.type ?? 'recurring')}`;
+}
+
 export function formatPrice(cents: number): string {
   if (cents === 0) return 'Free';
   return `$${(cents / 100).toFixed(0)}/mo`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibecarbon",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Create and manage production-ready Vibecarbon applications",
   "type": "module",
   "bin": "./src/cli.js",
@@ -57,12 +57,12 @@
     "url": "https://github.com/hyperformant/vibecarbon.git"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.1017.0",
-    "@clack/prompts": "^1.1.0",
-    "@pulumi/hcloud": "^1.32.2",
-    "@pulumi/pulumi": "^3.231.0",
+    "@aws-sdk/client-s3": "^3.1058.0",
+    "@clack/prompts": "^1.5.0",
+    "@pulumi/hcloud": "^1.38.0",
+    "@pulumi/pulumi": "^3.244.0",
     "bcryptjs": "^3.0.3",
-    "undici": "^8.1.0",
+    "undici": "^8.3.0",
     "which": "^7.0.0"
   },
   "pnpm": {
@@ -81,18 +81,18 @@
     }
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.9",
+    "@biomejs/biome": "^2.4.16",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/better-sqlite3": "^7.6.13",
-    "@vitest/coverage-v8": "^4.1.1",
+    "@vitest/coverage-v8": "^4.1.8",
     "autocannon": "^8.0.0",
-    "better-sqlite3": "^12.8.0",
+    "better-sqlite3": "^12.10.0",
     "conventional-changelog-conventionalcommits": "^9.3.1",
     "semantic-release": "^25.0.3",
-    "tsx": "^4.21.0",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.1",
-    "zod": "^4.3.6"
+    "tsx": "^4.22.4",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8",
+    "zod": "^4.4.3"
   }
 }

package/src/activate.js

@@ -111,7 +111,7 @@ export async function runActivate(args) {
     spinner.stop('License validation failed');
     p.log.error(c.error(`Error: ${result.error}`));
     p.log.info('');
-    p.log.info(`${c.dim('Purchase a license at')} ${c.info('https://vibecarbon.dev/pricing')}`);
+    p.log.info(`${c.dim('Purchase a license at')} ${c.info('https://vibecarbon.com/#pricing')}`);
     process.exit(1);
   }