vibecarbon 0.4.0 → 0.5.1

package/carbon/backup/compose-backup.sh

@@ -2,139 +2,63 @@
 set -e
 
 # ============================================================================
-# Vibecarbon Compose Backup Script
+# Vibecarbon Compose Backup Script — single source of truth for compose backups
 #
-# Runs via cron on the VPS. Creates a full backup archive containing all
-# PostgreSQL databases and storage files, uploads to S3, and cleans up
-# old backups based on retention policy.
+# Runs via cron on the VPS (and on-demand from the CLI). Triggers a wal-g base
+# backup from inside the db container (which already has WALG_S3_PREFIX + AWS_*
+# configured from .env) and prunes old base backups via `wal-g delete retain`.
 #
-# Environment Variables (loaded from .backup-env):
-#   PROJECT_NAME           - Project name for backup naming
-#   BACKUP_RETENTION_DAYS  - Days to keep backups (default: 30)
-#   S3_BACKUP_BUCKET       - S3 bucket for backup storage
-#   S3_ACCESS_KEY          - S3 access key
-#   S3_SECRET_KEY          - S3 secret key
-#   S3_ENDPOINT            - S3 endpoint URL
-#   S3_REGION              - S3 region
+# Invoked as `cd <project-dir> && RETAIN=<n> bash backup/compose-backup.sh`, so
+# it operates relative to the current working directory — no PROJECT_NAME
+# needed. Both the cron path and the on-demand path use the SAME invocation
+# (src/lib/deploy/compose/index.js composeBackupCmd), so the quoting/behavior
+# can never drift.
+#
+# Environment Variables:
+#   RETAIN  - Number of full base backups to keep (default: 7)
 # ============================================================================
 
-# Prevent concurrent backups
+# Prevent concurrent backups (cron + a manual run racing each other).
 LOCKFILE="/tmp/vibecarbon-backup.lock"
 exec 200>"${LOCKFILE}"
 flock -n 200 || { echo "Backup already running — skipping"; exit 0; }
 
-PROJECT="${PROJECT_NAME:?PROJECT_NAME is required}"
-REMOTE_DIR="/opt/${PROJECT}"
-TIMESTAMP=$(date +%Y%m%d_%H%M%S)
-WORK_DIR="/tmp/backup_${TIMESTAMP}"
-ARCHIVE_NAME="${PROJECT}_${TIMESTAMP}_full.tar.gz"
-RETENTION_DAYS="${BACKUP_RETENTION_DAYS:-30}"
+RETAIN="${RETAIN:-7}"
 
-echo "=== Vibecarbon Compose Backup ==="
+echo "=== Vibecarbon Compose Backup (wal-g) ==="
 echo "Started at $(date)"
-echo "Retention: ${RETENTION_DAYS} days"
-
-mkdir -p "${WORK_DIR}"
-
-# ============================================================================
-# Step 1: Dump postgres database
-# ============================================================================
-
-echo "Backing up postgres database..."
-cd "${REMOTE_DIR}" && docker compose exec -T db pg_dump -U postgres postgres \
-  | gzip > "${WORK_DIR}/postgres.sql.gz"
-DB_SIZE=$(du -h "${WORK_DIR}/postgres.sql.gz" | cut -f1)
-echo "postgres: ${DB_SIZE}"
-
-# ============================================================================
-# Step 2: Dump optional service databases (n8n, metabase)
-# ============================================================================
+echo "Retain: ${RETAIN} full base backups"
 
-for EXTRA_DB in n8n metabase; do
-  DB_EXISTS=$(cd "${REMOTE_DIR}" && docker compose exec -T db \
-    psql -U postgres -tAc "SELECT 1 FROM pg_database WHERE datname='${EXTRA_DB}'" 2>/dev/null || echo "")
-  if [ "${DB_EXISTS}" = "1" ]; then
-    echo "Backing up ${EXTRA_DB} database..."
-    cd "${REMOTE_DIR}" && docker compose exec -T db pg_dump -U postgres "${EXTRA_DB}" \
-      | gzip > "${WORK_DIR}/${EXTRA_DB}.sql.gz"
-    EXTRA_SIZE=$(du -h "${WORK_DIR}/${EXTRA_DB}.sql.gz" | cut -f1)
-    echo "${EXTRA_DB}: ${EXTRA_SIZE}"
+# wal-g connects to PG via libpq; PGUSER=supabase_admin is REQUIRED (only the
+# superuser may call pg_backup_start; unset, libpq defaults to OS user root →
+# "role root does not exist"). The pg_is_in_recovery()='f' guard makes the
+# backup a no-op on a standby (exit 0), so only the primary pushes to S3.
+#
+# The S3-configured guard exits 0 BEFORE wal-g runs when no S3 backup target is
+# configured. docker-compose.yml renders WALG_S3_PREFIX as
+#   s3://${S3_BACKUP_BUCKET:-${S3_BUCKET:-}}/backups/${PROJECT_NAME}/walg
+# so an unconfigured deploy yields the empty-bucket form `s3:///backups/...`
+# (and empty AWS_ACCESS_KEY_ID). Without this guard an always-installed cron
+# would `set -e`-fail nightly into backup.log on no-S3 deploys. Checking inside
+# the container is robust: it tests the actual env wal-g sees (source of truth),
+# covers both the cron and on-demand paths, and needs no deploy-time S3 plumbing.
+docker compose exec -T db bash -c '
+  export PGUSER=supabase_admin PGHOST=localhost PGPORT=5432 PGDATABASE=postgres
+  case "${WALG_S3_PREFIX:-}" in
+    ""|s3:///*)
+      echo "scheduled backup skipped: no S3 backup target configured (empty WALG_S3_PREFIX)."
+      exit 0
+      ;;
+  esac
+  if [ -z "${AWS_ACCESS_KEY_ID:-}" ] || [ -z "${AWS_SECRET_ACCESS_KEY:-}" ]; then
+    echo "scheduled backup skipped: no S3 credentials configured (empty AWS_ACCESS_KEY_ID/SECRET)."
+    exit 0
   fi
-done
-
-# ============================================================================
-# Step 3: Storage files (file backend only)
-# ============================================================================
-
-STORAGE_COUNT=$(cd "${REMOTE_DIR}" && docker compose exec -T storage \
-  sh -c 'find /var/lib/storage -type f 2>/dev/null | wc -l' 2>/dev/null || echo "0")
-if [ "${STORAGE_COUNT}" -gt 0 ] 2>/dev/null; then
-  echo "Backing up ${STORAGE_COUNT} storage files..."
-  cd "${REMOTE_DIR}" && docker compose exec -T storage \
-    tar czf - -C / var/lib/storage > "${WORK_DIR}/storage.tar.gz"
-  STORAGE_SIZE=$(du -h "${WORK_DIR}/storage.tar.gz" | cut -f1)
-  echo "Storage: ${STORAGE_SIZE}"
-fi
-
-# ============================================================================
-# Step 4: Create combined archive
-# ============================================================================
-
-echo "Creating archive: ${ARCHIVE_NAME}"
-tar czf "${REMOTE_DIR}/backups/${ARCHIVE_NAME}" -C "${WORK_DIR}" .
-TOTAL_SIZE=$(du -h "${REMOTE_DIR}/backups/${ARCHIVE_NAME}" | cut -f1)
-echo "Total archive size: ${TOTAL_SIZE}"
-
-# ============================================================================
-# Step 5: Upload to S3 (if configured)
-# ============================================================================
-
-if [ -n "${S3_BACKUP_BUCKET}" ] && [ -n "${S3_ACCESS_KEY}" ] && [ -n "${S3_SECRET_KEY}" ] && [ -n "${S3_ENDPOINT}" ]; then
-  echo "Uploading to S3: s3://${S3_BACKUP_BUCKET}/backups/${ARCHIVE_NAME}"
-
-  export AWS_ACCESS_KEY_ID="${S3_ACCESS_KEY}"
-  export AWS_SECRET_ACCESS_KEY="${S3_SECRET_KEY}"
-  export AWS_DEFAULT_REGION="${S3_REGION:-us-east-1}"
-
-  aws s3 cp "${REMOTE_DIR}/backups/${ARCHIVE_NAME}" \
-    "s3://${S3_BACKUP_BUCKET}/backups/${ARCHIVE_NAME}" \
-    --endpoint-url "${S3_ENDPOINT}"
-
-  echo "Upload complete"
-
-  # S3 retention cleanup
-  echo "Cleaning up S3 backups older than ${RETENTION_DAYS} days..."
-  CUTOFF_DATE=$(date -d "-${RETENTION_DAYS} days" +%Y%m%d 2>/dev/null || echo "")
-  if [ -n "${CUTOFF_DATE}" ]; then
-    aws s3api list-objects-v2 \
-      --bucket "${S3_BACKUP_BUCKET}" \
-      --prefix "backups/${PROJECT}_" \
-      --endpoint-url "${S3_ENDPOINT}" \
-      --query "Contents[].Key" \
-      --output text 2>/dev/null | tr '\t' '\n' | while read -r key; do
-        [ -z "${key}" ] || [ "${key}" = "None" ] && continue
-        FILE_DATE=$(echo "${key}" | sed -n 's/.*_\([0-9]\{8\}\)_[0-9]\{6\}_full\.tar\.gz$/\1/p')
-        if [ -n "${FILE_DATE}" ] && [ "${FILE_DATE}" -lt "${CUTOFF_DATE}" ] 2>/dev/null; then
-          echo "Deleting expired backup: ${key}"
-          aws s3 rm "s3://${S3_BACKUP_BUCKET}/${key}" --endpoint-url "${S3_ENDPOINT}"
-        fi
-      done
+  if [ "$(psql -U supabase_admin -d postgres -tAc "SELECT pg_is_in_recovery()")" != "f" ]; then
+    echo "supabase-db is in recovery (standby) — skipping base backup."
+    exit 0
   fi
-else
-  echo "No S3 configured — backup stored locally only"
-fi
-
-# ============================================================================
-# Step 6: Local retention cleanup
-# ============================================================================
-
-find "${REMOTE_DIR}/backups" -name "${PROJECT}_*_full.tar.gz" -mtime "+${RETENTION_DAYS}" -delete 2>/dev/null || true
-
-# ============================================================================
-# Cleanup
-# ============================================================================
-
-rm -rf "${WORK_DIR}"
+  wal-g backup-push "$PGDATA" && wal-g delete retain FULL "'"${RETAIN}"'" --confirm
+'
 
 echo "=== Backup completed at $(date) ==="
-echo "Archive: ${ARCHIVE_NAME} (${TOTAL_SIZE})"

package/carbon/biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.4.9/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
   "linter": {
     "enabled": true,
     "rules": {

package/carbon/docker-compose.metabase.prod.yml

@@ -15,11 +15,10 @@ services:
     labels:
       # Production Traefik routing with SSL
       - "traefik.enable=true"
-      # HTTPS router with super_admin auth
+      # HTTPS router with super_admin auth — cert from default store
       - "traefik.http.routers.metabase.rule=Host(`metabase.${DOMAIN}`)"
       - "traefik.http.routers.metabase.entrypoints=websecure"
       - "traefik.http.routers.metabase.tls=true"
-      - "traefik.http.routers.metabase.tls.certresolver=letsencrypt"
       - "traefik.http.routers.metabase.middlewares=super-admin-auth@file"
       - "traefik.http.services.metabase.loadbalancer.server.port=3000"
       # HTTP to HTTPS redirect

package/carbon/docker-compose.n8n.prod.yml

@@ -18,11 +18,10 @@ services:
     labels:
       # Production Traefik routing with SSL
       - "traefik.enable=true"
-      # HTTPS router with super_admin auth
+      # HTTPS router with super_admin auth — cert from default store
       - "traefik.http.routers.n8n.rule=Host(`n8n.${DOMAIN}`)"
       - "traefik.http.routers.n8n.entrypoints=websecure"
       - "traefik.http.routers.n8n.tls=true"
-      - "traefik.http.routers.n8n.tls.certresolver=letsencrypt"
       - "traefik.http.routers.n8n.middlewares=super-admin-auth@file"
       - "traefik.http.services.n8n.loadbalancer.server.port=5678"
       # HTTP to HTTPS redirect

package/carbon/docker-compose.prod.yml

@@ -26,7 +26,12 @@ services:
       - "traefik.http.routers.app-http.entrypoints=web"
       - "traefik.http.routers.app-http.middlewares=redirect-to-https"
       - "traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https"
-      # HTTPS router with TLS
+      # HTTPS router for the app at the bare apex (${DOMAIN}). The apex gets its
+      # OWN single-domain cert via certresolver — it is intentionally NOT in the
+      # default wildcard store cert, because apex + `*.${DOMAIN}` share the
+      # `_acme-challenge.${DOMAIN}` TXT name and some DNS providers (Hetzner)
+      # can't hold both challenge values at once. The subdomain routers below use
+      # `tls=true` (no resolver) and serve the `*.${DOMAIN}` default cert via SNI.
       - "traefik.http.routers.app.rule=Host(`${DOMAIN:-localhost}`)"
       - "traefik.http.routers.app.entrypoints=websecure"
       - "traefik.http.routers.app.tls=true"
@@ -109,10 +114,9 @@ services:
       - "traefik.http.routers.dashboard-http.rule=Host(`traefik.${DOMAIN}`)"
       - "traefik.http.routers.dashboard-http.entrypoints=web"
       - "traefik.http.routers.dashboard-http.middlewares=redirect-to-https"
-      # HTTPS dashboard with super_admin auth
+      # HTTPS dashboard with super_admin auth — cert from default store
       - "traefik.http.routers.dashboard.entrypoints=websecure"
       - "traefik.http.routers.dashboard.tls=true"
-      - "traefik.http.routers.dashboard.tls.certresolver=letsencrypt"
       - "traefik.http.routers.dashboard.middlewares=super-admin-auth@file"
     deploy:
       resources:
@@ -127,11 +131,10 @@ services:
   studio:
     labels:
       - "traefik.enable=true"
-      # HTTPS router with admin auth
+      # HTTPS router with admin auth — cert from default store
       - "traefik.http.routers.studio.rule=Host(`studio.${DOMAIN}`)"
       - "traefik.http.routers.studio.entrypoints=websecure"
       - "traefik.http.routers.studio.tls=true"
-      - "traefik.http.routers.studio.tls.certresolver=letsencrypt"
       - "traefik.http.routers.studio.middlewares=admin-auth@file"
       - "traefik.http.services.studio.loadbalancer.server.port=3000"
 
@@ -260,11 +263,10 @@ services:
       - "traefik.http.routers.kong-http.rule=Host(`api.${DOMAIN:-localhost}`)"
       - "traefik.http.routers.kong-http.entrypoints=web"
       - "traefik.http.routers.kong-http.middlewares=redirect-to-https"
-      # HTTPS router for Supabase API
+      # HTTPS router for Supabase API — cert from default store
       - "traefik.http.routers.kong.rule=Host(`api.${DOMAIN:-localhost}`)"
       - "traefik.http.routers.kong.entrypoints=websecure"
       - "traefik.http.routers.kong.tls=true"
-      - "traefik.http.routers.kong.tls.certresolver=letsencrypt"
       - "traefik.http.services.kong.loadbalancer.server.port=8000"
     deploy:
       resources:

package/carbon/k8s/base/traefik/certificate.yaml

@@ -1,11 +1,17 @@
 # TLS Certificate for Vibecarbon application
 # Requires cert-manager to be installed (kubectl apply -k k8s/infra/)
 #
-# issuerRef.name is patched per-deployment by applyK3sManifests in
-# src/lib/deploy/k8s/k3s.js — it picks letsencrypt-{prod,staging}-{
-# cloudflare,hetzner,manual} based on dnsProvider + ACME_CA_SERVER.
-# The placeholder below keeps this template valid for kustomize and
-# is overwritten before cert-manager ever sees a Certificate request.
+# issuerRef.name and dnsNames are BOTH patched per-deployment by
+# applyK3sManifests in src/lib/deploy/k8s/k3s.js:
+#   - issuerRef.name → letsencrypt-{prod,staging}-{cloudflare,hetzner,manual}
+#     based on dnsProvider + ACME_CA_SERVER.
+#   - dnsNames → [domain] for manual (HTTP-01) issuers;
+#                [domain, "*.domain"] for DNS-01 (cloudflare/hetzner) issuers.
+#     DNS-01 allows a wildcard SAN so one cert covers every subdomain
+#     (api, studio, dashboard, grafana, n8n, ...) without separate ACME orders.
+#
+# The placeholders below keep this template valid for kustomize; they are
+# overwritten before cert-manager ever sees a Certificate request.
 apiVersion: cert-manager.io/v1
 kind: Certificate
 metadata:
@@ -17,5 +23,5 @@ spec:
     kind: ClusterIssuer
   dnsNames:
     - app.example.com  # Patched with actual domain at deploy time
-  # Optional: Include additional subdomains
-  # - "*.app.example.com"
+    # For DNS-01 (managed-DNS) deploys the wildcard is added at deploy time:
+    # - "*.app.example.com"

package/carbon/k8s/values/supabase.values.yaml

@@ -174,6 +174,14 @@ deployment:
             {
               echo "restore_command = 'wal-g wal-fetch \"%f\" \"%p\"'"
               echo "recovery_target_action = 'promote'"
+              # Pin recovery to the fetched base backup's OWN timeline. Default
+              # 'latest' makes postgres chase the newest timeline with a .history
+              # file; in HA, repeated restore→promote cycles leave DIVERGENT
+              # timelines in the shared wal-g S3 prefix, and 'latest' can pick one
+              # that forked before this base backup → crash-loop "requested
+              # timeline N is not a child of this server's history". 'current'
+              # recovers along the base backup's timeline, then promotes fresh.
+              echo "recovery_target_timeline = 'current'"
               if [ "${RESTORE_TARGET}" != "latest" ]; then
                 # PITR: RESTORE_TARGET is an ISO-8601 timestamp — replay only up
                 # to that point instead of to the end of the WAL stream.

package/carbon/package.json

@@ -59,42 +59,41 @@
     "@mdx-js/react": "^3.1.1",
     "@mdx-js/rollup": "^3.1.1",
     "@scalar/api-reference-react": "^0.9.41",
-    "@supabase/ssr": "^0.9.0",
     "@supabase/supabase-js": "^2.106.2",
-    "@tanstack/react-query": "^5.95.2",
+    "@tanstack/react-query": "^5.100.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.40.0",
     "hono": "^4.12.23",
-    "i18next": "^25.10.9",
+    "i18next": "^26.3.0",
     "i18next-browser-languagedetector": "^8.2.1",
     "input-otp": "^1.4.2",
-    "ioredis": "^5.10.1",
+    "ioredis": "^5.11.0",
     "lenis": "^1.3.23",
-    "lucide-react": "^1.7.0",
+    "lucide-react": "^1.17.0",
     "next-themes": "^0.4.6",
-    "nodemailer": "^8.0.8",
+    "nodemailer": "^8.0.10",
     "pino": "^10.3.1",
-    "react": "^19.2.6",
-    "react-day-picker": "^9.14.0",
-    "react-dom": "^19.2.6",
-    "react-hook-form": "^7.72.0",
-    "react-i18next": "^16.6.6",
+    "react": "^19.2.7",
+    "react-day-picker": "^10.0.1",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.77.0",
+    "react-i18next": "^17.0.8",
     "react-resizable-panels": "^4.11.2",
-    "react-router-dom": "^7.15.1",
+    "react-router-dom": "^7.16.0",
     "recharts": "^3.8.1",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^5.2.0",
     "sonner": "^2.0.7",
-    "stripe": "^20.4.1",
-    "tailwind-merge": "^3.5.0",
+    "stripe": "^22.2.0",
+    "tailwind-merge": "^3.6.0",
     "vaul": "^1.1.2",
-    "zod": "^4.3.6"
+    "zod": "^4.4.3"
   },
   "pnpm": {
     "onlyBuiltDependencies": [
@@ -123,33 +122,32 @@
     }
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.15",
+    "@biomejs/biome": "^2.4.16",
     "@hono/swagger-ui": "^0.6.1",
     "@scalar/hono-api-reference": "^0.10.19",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.3.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^25.9.1",
     "@types/nodemailer": "^8.0.0",
     "@types/pg": "^8.20.0",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/coverage-v8": "^4.1.7",
-    "concurrently": "^9.2.1",
+    "@vitest/coverage-v8": "^4.1.8",
     "esbuild": "^0.28.0",
-    "jsdom": "^26.1.0",
+    "jsdom": "^29.1.1",
     "pg": "^8.21.0",
     "pino-pretty": "^13.1.3",
     "remark-gfm": "^4.0.1",
-    "shadcn": "^4.8.1",
+    "shadcn": "^4.10.0",
     "tailwindcss": "^4.3.0",
-    "tsx": "^4.22.3",
+    "tsx": "^4.22.4",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.7"
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   }
 }

package/carbon/scripts/docker-up.js

@@ -124,7 +124,19 @@ const manifest = loadManifest();
 
 // Get port configuration with offset applied
 const portEnv = getPortEnvVars();
-const execOpts = { stdio: 'inherit', env: { ...process.env, ...portEnv } };
+
+// Pin local builds to the `default` (docker-driver) BuildKit builder.
+// `docker compose up` delegates image builds to `buildx bake`, which uses the
+// globally-selected builder. A long-lived `docker-container` builder (e.g. a
+// `vc-multiarch` builder left active via `buildx create --use` after a
+// multi-arch release build) freezes its /etc/resolv.conf at creation time — so
+// after a laptop changes network/subnet it keeps querying a dead DNS server and
+// builds fail with "i/o timeout" resolving registry-1.docker.io. The default
+// builder builds through the daemon's live DNS on every build, sidestepping
+// that whole class. Local dev/test never needs multi-arch; an explicit
+// BUILDX_BUILDER in the environment still wins, for anyone who wants otherwise.
+const buildEnv = { BUILDX_BUILDER: process.env.BUILDX_BUILDER || 'default' };
+const execOpts = { stdio: 'inherit', env: { ...process.env, ...portEnv, ...buildEnv } };
 
 // Check if any optional services (metabase, n8n, observability, etc.) are enabled.
 // These can have slow health checks (e.g. Metabase JVM takes 2-4 min), so we start

package/carbon/src/client/components/DeploymentScenariosSection.tsx

@@ -0,0 +1,171 @@
+import { motion } from 'framer-motion';
+import { ArrowLeftRight, CornerDownRight, RefreshCw, Server } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import vibecarbonIcon from '../assets/vibecarbon-icon.svg';
+
+type Shape = 'single' | 'pair' | 'cluster' | 'multiCluster';
+type Accent = 'teal' | 'magenta';
+
+interface Scenario {
+  id: string;
+  shape: Shape;
+  accent: Accent;
+}
+
+const ACCENTS: Record<Accent, { text: string; pill: string; cluster: string; hover: string }> = {
+  teal: {
+    text: 'text-primary',
+    pill: 'border-primary/30 text-primary',
+    cluster: 'border-primary/30',
+    hover: 'hover:border-primary/30',
+  },
+  magenta: {
+    text: 'text-secondary-accent',
+    pill: 'border-secondary-accent/30 text-secondary-accent',
+    cluster: 'border-secondary-accent/30',
+    hover: 'hover:border-secondary-accent/30',
+  },
+};
+
+const SCENARIOS: Scenario[] = [
+  { id: 'compose', shape: 'single', accent: 'teal' },
+  { id: 'composeHa', shape: 'pair', accent: 'magenta' },
+  { id: 'k8s', shape: 'cluster', accent: 'teal' },
+  { id: 'k8sHa', shape: 'multiCluster', accent: 'magenta' },
+];
+
+// A single server "node" — same visual language as WorkflowSection's DeployVisual pods.
+function Node({ color }: { color: string }) {
+  return (
+    <div className="flex items-center justify-center rounded-md border border-border/60 bg-background/60 p-1.5 dark:border-white/10 dark:bg-white/[0.03]">
+      <Server className={`size-3.5 ${color}`} strokeWidth={1.5} />
+    </div>
+  );
+}
+
+// A dashed "cluster" outline wrapping N nodes. `count` is a fixed literal per topology
+// (2 or 3), so naming the nodes gives each a stable, reorder-free key.
+const NODE_KEYS = ['n1', 'n2', 'n3'];
+
+function Cluster({ color, border, count }: { color: string; border: string; count: number }) {
+  return (
+    <div className={`flex items-center gap-1 rounded-lg border border-dashed ${border} p-1.5`}>
+      {NODE_KEYS.slice(0, count).map((key) => (
+        <Node key={key} color={color} />
+      ))}
+    </div>
+  );
+}
+
+// Topology glyph: 1 node / 2 nodes + failover / 3-node cluster / 2 clusters + region failover.
+function Topology({ shape, accent }: { shape: Shape; accent: Accent }) {
+  const { text, cluster } = ACCENTS[accent];
+  switch (shape) {
+    case 'single':
+      return <Node color={text} />;
+    case 'pair':
+      return (
+        <div className="flex items-center gap-2">
+          <Node color={text} />
+          <RefreshCw className={`size-3.5 ${text}`} strokeWidth={1.5} />
+          <Node color={text} />
+        </div>
+      );
+    case 'cluster':
+      return <Cluster color={text} border={cluster} count={3} />;
+    case 'multiCluster':
+      return (
+        <div className="flex items-center gap-2">
+          <Cluster color={text} border={cluster} count={2} />
+          <ArrowLeftRight className={`size-3.5 ${text}`} strokeWidth={1.5} />
+          <Cluster color={text} border={cluster} count={2} />
+        </div>
+      );
+  }
+}
+
+export function DeploymentScenariosSection() {
+  const { t } = useTranslation();
+
+  return (
+    <section className="relative py-24 md:py-36">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="mb-10 text-center">
+          <motion.div
+            className="mb-6 flex justify-center"
+            animate={{ y: [0, -6, 0] }}
+            transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
+          >
+            <img
+              src={vibecarbonIcon}
+              alt=""
+              width={56}
+              height={56}
+              className="drop-shadow-[0_0_12px_oklch(0.82_0.14_192/0.6)]"
+            />
+          </motion.div>
+          <h2 className="mb-4 text-3xl font-black tracking-tight md:text-5xl">
+            {t('landing.deploy.headline')}{' '}
+            <span className="bg-gradient-to-r from-primary via-cyan-400 to-secondary-accent bg-clip-text text-transparent">
+              {t('landing.deploy.headlineHighlight')}
+            </span>
+          </h2>
+          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+            {t('landing.deploy.subheading')}
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {SCENARIOS.map((scenario, index) => {
+            const accent = ACCENTS[scenario.accent];
+            const features = t(`landing.deploy.${scenario.id}.features`, {
+              returnObjects: true,
+            }) as string[];
+
+            return (
+              <motion.div
+                key={scenario.id}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: '-50px' }}
+                transition={{ duration: 0.4, delay: index * 0.08 }}
+                className={`group flex flex-col rounded-2xl border border-border/60 bg-muted/40 p-6 transition-all duration-300 dark:border-white/10 dark:bg-white/5 ${accent.hover} hover:bg-muted/80 dark:hover:bg-white/10`}
+              >
+                {/* Topology glyph */}
+                <div className="mb-5 flex h-12 items-center">
+                  <Topology shape={scenario.shape} accent={scenario.accent} />
+                </div>
+
+                {/* Name + tagline */}
+                <h3 className="text-lg font-bold text-foreground">
+                  {t(`landing.deploy.${scenario.id}.name`)}
+                </h3>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {t(`landing.deploy.${scenario.id}.tagline`)}
+                </p>
+
+                {/* Attribute pills */}
+                <div className="mt-4 flex flex-wrap gap-2">
+                  {features.map((feature) => (
+                    <span
+                      key={feature}
+                      className={`rounded-full border px-2.5 py-0.5 text-xs font-medium ${accent.pill}`}
+                    >
+                      {feature}
+                    </span>
+                  ))}
+                </div>
+
+                {/* Best for */}
+                <div className="mt-5 flex items-center gap-1.5 text-sm text-muted-foreground">
+                  <CornerDownRight className={`size-4 shrink-0 ${accent.text}`} strokeWidth={1.5} />
+                  <span>{t(`landing.deploy.${scenario.id}.bestFor`)}</span>
+                </div>
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

package/carbon/src/client/components/ui/calendar.tsx

@@ -70,7 +70,7 @@ function Calendar({
             : 'cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5',
           defaultClassNames.caption_label
         ),
-        table: 'w-full border-collapse',
+        month_grid: 'w-full border-collapse',
         weekdays: cn('flex', defaultClassNames.weekdays),
         weekday: cn(
           'text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none',