vibecarbon 0.1.0

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

@@ -0,0 +1,341 @@
+import type { Factor } from '@supabase/supabase-js';
+import { ShieldCheck, ShieldOff, Smartphone } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import { useAuth } from '@/components/auth/AuthProvider';
+import { PageHeader } from '@/components/PageHeader';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
+import { Switch } from '@/components/ui/switch';
+import { ContentPanel } from '../../components/ContentPanel';
+
+export default function Security() {
+  const { t } = useTranslation();
+  const { mfa, hasMfaEnabled, mfaRequired } = useAuth();
+  const [searchParams] = useSearchParams();
+
+  const [factors, setFactors] = useState<Factor[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  // Enrollment state
+  const [enrolling, setEnrolling] = useState(false);
+  const [enrollmentData, setEnrollmentData] = useState<{
+    id: string;
+    qrCode: string;
+    secret: string;
+  } | null>(null);
+  const [verificationCode, setVerificationCode] = useState('');
+  const [verifying, setVerifying] = useState(false);
+
+  // Unenroll state
+  const [unenrolling, setUnenrolling] = useState(false);
+  const [factorToUnenroll, setFactorToUnenroll] = useState<string | null>(null);
+
+  // Show setup prompt if redirected from login with MFA required
+  const setupRequired = searchParams.get('setup') === 'required';
+
+  const loadFactors = useCallback(async () => {
+    try {
+      const factorList = await mfa.listFactors();
+      setFactors(factorList.filter((f) => f.status === 'verified'));
+    } catch {
+      setError('Failed to load MFA factors');
+    } finally {
+      setLoading(false);
+    }
+  }, [mfa]);
+
+  // Load factors on mount
+  useEffect(() => {
+    loadFactors();
+  }, [loadFactors]);
+
+  const handleStartEnrollment = async () => {
+    setEnrolling(true);
+    setError('');
+
+    try {
+      const data = await mfa.enroll('Authenticator App');
+      if (data && data.type === 'totp' && 'totp' in data) {
+        setEnrollmentData({
+          id: data.id,
+          qrCode: data.totp.qr_code,
+          secret: data.totp.secret,
+        });
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to start enrollment');
+      setEnrolling(false);
+    }
+  };
+
+  const handleVerifyEnrollment = async () => {
+    if (!enrollmentData || verificationCode.length !== 6) return;
+
+    setVerifying(true);
+    setError('');
+
+    try {
+      // Create challenge and verify
+      const challenge = await mfa.challenge(enrollmentData.id);
+      if (challenge) {
+        await mfa.verify(enrollmentData.id, challenge.id, verificationCode);
+      }
+
+      // Success - refresh factors and close dialog
+      await loadFactors();
+      setEnrollmentData(null);
+      setEnrolling(false);
+      setVerificationCode('');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Invalid verification code');
+      setVerificationCode('');
+    } finally {
+      setVerifying(false);
+    }
+  };
+
+  const handleCancelEnrollment = async () => {
+    // If we have an unverified factor, unenroll it
+    if (enrollmentData) {
+      try {
+        await mfa.unenroll(enrollmentData.id);
+      } catch {
+        // Ignore error - factor may not exist
+      }
+    }
+    setEnrollmentData(null);
+    setEnrolling(false);
+    setVerificationCode('');
+    setError('');
+  };
+
+  const handleUnenroll = async () => {
+    if (!factorToUnenroll) return;
+
+    setUnenrolling(true);
+    setError('');
+
+    try {
+      await mfa.unenroll(factorToUnenroll);
+      await loadFactors();
+      setFactorToUnenroll(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to disable 2FA');
+    } finally {
+      setUnenrolling(false);
+    }
+  };
+
+  return (
+    <>
+      <PageHeader title={t('security.title')} description={t('security.description')} />
+
+      <ContentPanel variant="narrow">
+        {setupRequired && !hasMfaEnabled && (
+          <div className="p-4 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-900 rounded-lg">
+            <div className="flex items-start gap-3">
+              <ShieldOff className="size-5 text-amber-600 dark:text-amber-500 mt-0.5" />
+              <div>
+                <p className="font-medium text-amber-800 dark:text-amber-200">
+                  {t('security.mfaRequired')}
+                </p>
+                <p className="text-sm text-amber-700 dark:text-amber-300 mt-1">
+                  {t('security.mfaRequiredDescription')}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-lg">{error}</div>
+        )}
+
+        <Card>
+          <CardHeader>
+            <div className="flex items-start justify-between gap-4">
+              <div className="space-y-1">
+                <CardTitle className="flex items-center gap-2">
+                  <Smartphone className="size-5" />
+                  {t('security.twoFactor')}
+                </CardTitle>
+                <CardDescription>{t('security.twoFactorDescription')}</CardDescription>
+              </div>
+              {!loading && (
+                <Switch
+                  checked={hasMfaEnabled}
+                  disabled={enrolling || unenrolling || mfaRequired}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      handleStartEnrollment();
+                    } else if (factors.length > 0) {
+                      setFactorToUnenroll(factors[0].id);
+                    }
+                  }}
+                />
+              )}
+            </div>
+          </CardHeader>
+          {!loading && (hasMfaEnabled || mfaRequired) && (
+            <CardContent className="space-y-4">
+              {hasMfaEnabled && (
+                <>
+                  <div className="flex items-center gap-3 p-3 bg-emerald-50 dark:bg-emerald-950/30 rounded-lg">
+                    <ShieldCheck className="size-4 text-emerald-600 dark:text-emerald-500 shrink-0" />
+                    <p className="text-sm text-emerald-700 dark:text-emerald-300">
+                      {t('security.mfaEnabledDescription')}
+                    </p>
+                  </div>
+
+                  {factors.length > 0 && (
+                    <div className="space-y-2">
+                      <p className="text-sm font-medium">{t('security.enrolledAuthenticators')}</p>
+                      {factors.map((factor) => (
+                        <div
+                          key={factor.id}
+                          className="flex items-center justify-between p-3 border rounded-lg"
+                        >
+                          <div className="flex items-center gap-3">
+                            <Smartphone className="size-4 text-muted-foreground" />
+                            <span className="text-sm">
+                              {factor.friendly_name || t('security.authenticatorApp')}
+                            </span>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="text-destructive hover:text-destructive"
+                            onClick={() => setFactorToUnenroll(factor.id)}
+                          >
+                            {t('common.remove')}
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </>
+              )}
+
+              {mfaRequired && (
+                <p className="text-sm text-muted-foreground">{t('security.mfaRequiredByOrg')}</p>
+              )}
+            </CardContent>
+          )}
+        </Card>
+      </ContentPanel>
+
+      {/* Enrollment Dialog */}
+      <Dialog open={!!enrollmentData} onOpenChange={() => handleCancelEnrollment()}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('security.setupMfa')}</DialogTitle>
+            <DialogDescription>{t('security.setupMfaDescription')}</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6">
+            {/* QR Code */}
+            <div className="flex justify-center">
+              {enrollmentData?.qrCode && (
+                <div
+                  className="p-4 bg-white rounded-lg"
+                  // biome-ignore lint/security/noDangerouslySetInnerHtml: QR code is SVG from Supabase
+                  dangerouslySetInnerHTML={{ __html: enrollmentData.qrCode }}
+                />
+              )}
+            </div>
+
+            {/* Manual entry */}
+            <div className="space-y-2">
+              <p className="text-sm text-muted-foreground text-center">{t('security.cantScan')}</p>
+              <code className="block text-center text-sm bg-muted p-2 rounded font-mono break-all">
+                {enrollmentData?.secret}
+              </code>
+            </div>
+
+            {/* Verification code input */}
+            <div className="space-y-2">
+              <p className="text-sm font-medium text-center">{t('security.enterCode')}</p>
+              <div className="flex justify-center">
+                <InputOTP
+                  maxLength={6}
+                  value={verificationCode}
+                  onChange={setVerificationCode}
+                  onComplete={handleVerifyEnrollment}
+                  disabled={verifying}
+                >
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </div>
+            </div>
+
+            {error && (
+              <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-lg text-center">
+                {error}
+              </div>
+            )}
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="ghost" onClick={handleCancelEnrollment} disabled={verifying}>
+              {t('common.cancel')}
+            </Button>
+            <Button
+              onClick={handleVerifyEnrollment}
+              disabled={verifying || verificationCode.length !== 6}
+            >
+              {verifying ? t('security.verifying') : t('security.verifyAndEnable')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Unenroll Confirmation Dialog */}
+      <Dialog open={!!factorToUnenroll} onOpenChange={() => setFactorToUnenroll(null)}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('security.disableMfa')}</DialogTitle>
+            <DialogDescription>{t('security.disableMfaDescription')}</DialogDescription>
+          </DialogHeader>
+
+          {mfaRequired && (
+            <div className="p-3 text-sm text-amber-700 bg-amber-50 dark:bg-amber-950/30 dark:text-amber-300 rounded-lg">
+              {t('security.disableMfaWarning')}
+            </div>
+          )}
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="ghost"
+              onClick={() => setFactorToUnenroll(null)}
+              disabled={unenrolling}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button variant="destructive" onClick={handleUnenroll} disabled={unenrolling}>
+              {unenrolling ? t('security.disabling') : t('security.disable2fa')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/carbon/src/client/public/favicon.svg

@@ -0,0 +1,19 @@
+<svg width="877" height="1012" viewBox="0 0 877 1012" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_77_141)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M434.346 2.3064C436.82 0.879051 439.867 0.879058 442.342 2.30641L872.685 250.582C875.162 252.01 876.688 254.652 876.688 257.511V754.051C876.688 756.91 875.162 759.552 872.685 760.981L442.342 1009.26C439.867 1010.68 436.82 1010.68 434.346 1009.26L4.00221 760.981C1.52575 759.552 0 756.91 0 754.051V257.511C0 254.652 1.52576 252.01 4.00222 250.582L434.346 2.3064ZM708.094 505.781C708.094 577.323 679.674 645.935 629.086 696.523C578.498 747.111 509.886 775.531 438.344 775.531C366.802 775.531 298.19 747.111 247.602 696.523C197.014 645.935 168.594 577.323 168.594 505.781C168.594 434.239 197.014 365.627 247.602 315.039C298.19 264.451 366.802 236.031 438.344 236.031C509.886 236.031 578.498 264.451 629.086 315.039C679.674 365.627 708.094 434.239 708.094 505.781Z" fill="url(#paint0_linear_77_141)"/>
+<path d="M876.688 252.891V472.062L438.344 606.938L0 472.062V252.891L438.344 0L876.688 252.891Z" fill="url(#paint1_linear_77_141)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_77_141" x1="0" y1="0" x2="0" y2="1011.56" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5EEAD4"/>
+<stop offset="1" stop-color="#0D9488"/>
+</linearGradient>
+<linearGradient id="paint1_linear_77_141" x1="175.338" y1="-5.42644e-06" x2="516.194" y2="492.348" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.5"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_77_141">
+<rect width="876.688" height="1011.56" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/carbon/src/client/public/robots.txt

@@ -0,0 +1,8 @@
+User-agent: *
+Allow: /
+Disallow: /dashboard
+Disallow: /settings
+Disallow: /admin
+Disallow: /api/
+
+Sitemap: {{SITE_URL}}/sitemap.xml

package/carbon/src/server/billing/index.ts

@@ -0,0 +1,104 @@
+/**
+ * Billing provider factory.
+ *
+ * Selects the active payment provider based on the BILLING_PROVIDER env var
+ * (defaults to 'stripe'). The provider instance is cached so it's created once
+ * per process lifetime.
+ */
+
+import { env } from '../lib/env';
+import type { BillingProvider, BillingProviderType } from './provider';
+import { PaddleProvider } from './providers/paddle';
+import { PolarProvider } from './providers/polar';
+import { StripeProvider } from './providers/stripe';
+
+// Re-export types for convenience
+export type {
+  BillingProvider,
+  BillingProviderType,
+  CheckoutResult,
+  PortalResult,
+  SubscriptionInfo,
+} from './provider';
+
+/** Cached provider instance (one per process). */
+let cachedProvider: BillingProvider | null = null;
+let cachedProviderType: BillingProviderType | null = null;
+
+/**
+ * Get the active billing provider instance.
+ *
+ * The provider is determined by the BILLING_PROVIDER env var and cached
+ * for the lifetime of the process.
+ *
+ * @throws {Error} if the BILLING_PROVIDER value is unsupported
+ */
+export function getBillingProvider(): BillingProvider {
+  const providerType = env.BILLING_PROVIDER;
+
+  // Return cached instance if the provider type hasn't changed
+  if (cachedProvider && cachedProviderType === providerType) {
+    return cachedProvider;
+  }
+
+  switch (providerType) {
+    case 'stripe':
+      cachedProvider = new StripeProvider();
+      break;
+    case 'paddle':
+      cachedProvider = new PaddleProvider();
+      break;
+    case 'polar':
+      cachedProvider = new PolarProvider();
+      break;
+    default:
+      throw new Error(`Unknown billing provider: ${providerType}`);
+  }
+
+  cachedProviderType = providerType;
+  return cachedProvider;
+}
+
+/**
+ * Check if the active billing provider is properly configured.
+ *
+ * Returns false if the provider type is unknown or the provider's
+ * required credentials are missing.
+ */
+export function isBillingConfigured(): boolean {
+  try {
+    return getBillingProvider().isConfigured();
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Get the provider-specific price IDs from environment variables.
+ *
+ * Used by the pricing endpoint and webhook handler to map price IDs
+ * back to plan names.
+ */
+export function getProviderPriceIds(): { starter?: string; pro?: string } {
+  const providerType = env.BILLING_PROVIDER;
+
+  switch (providerType) {
+    case 'stripe':
+      return {
+        starter: env.STRIPE_PRICE_STARTER,
+        pro: env.STRIPE_PRICE_PRO,
+      };
+    case 'paddle':
+      return {
+        starter: env.PADDLE_PRICE_STARTER,
+        pro: env.PADDLE_PRICE_PRO,
+      };
+    case 'polar':
+      return {
+        starter: env.POLAR_PRICE_STARTER,
+        pro: env.POLAR_PRICE_PRO,
+      };
+    default:
+      return {};
+  }
+}

package/carbon/src/server/billing/provider.ts

@@ -0,0 +1,81 @@
+/**
+ * Billing provider abstraction layer.
+ *
+ * Defines a common interface that all payment providers (Stripe, Paddle, Polar)
+ * must implement. This allows the billing routes and webhook handlers to remain
+ * provider-agnostic, selecting the active provider at runtime via BILLING_PROVIDER.
+ */
+
+export type BillingProviderType = 'stripe' | 'paddle' | 'polar';
+
+export interface CheckoutResult {
+  url: string;
+  sessionId?: string;
+}
+
+export interface PortalResult {
+  url: string;
+}
+
+export interface SubscriptionInfo {
+  id: string;
+  status: string;
+  planId: string;
+  priceId: string;
+  currentPeriodEnd: string | null;
+  cancelAtPeriodEnd: boolean;
+  price: {
+    unitAmount: number;
+    currency: string;
+    interval: string;
+  };
+  product: {
+    id: string;
+    name: string;
+  };
+}
+
+export interface BillingProvider {
+  readonly type: BillingProviderType;
+
+  /** Returns true if the provider has its required API keys configured. */
+  isConfigured(): boolean;
+
+  /** Create a checkout session and return the redirect URL. */
+  createCheckout(params: {
+    customerId: string;
+    priceId: string;
+    successUrl: string;
+    cancelUrl: string;
+    metadata: Record<string, string>;
+    mode?: 'subscription' | 'payment';
+  }): Promise<CheckoutResult>;
+
+  /** Create a customer portal session and return the redirect URL. */
+  createPortalSession(params: { customerId: string; returnUrl: string }): Promise<PortalResult>;
+
+  /** Retrieve subscription details for a customer. */
+  getSubscription(params: {
+    customerId: string;
+    subscriptionId: string;
+  }): Promise<SubscriptionInfo | null>;
+
+  /**
+   * Verify and parse an incoming webhook payload.
+   * Returns a normalized event type and data payload.
+   */
+  handleWebhook(params: {
+    body: string;
+    signature: string;
+  }): Promise<{ type: string; data: Record<string, unknown> }>;
+
+  /** Create a customer in the provider and return the provider's customer ID. */
+  createCustomer(params: {
+    email: string;
+    name: string;
+    metadata: Record<string, string>;
+  }): Promise<string>;
+
+  /** Delete a customer in the provider. */
+  deleteCustomer(customerId: string): Promise<void>;
+}