@brainerce/mcp-server 1.1.0 → 1.3.0

package/dist/index.js

@@ -728,20 +728,25 @@ Display: banners in header, badges on product cards (strikethrough + discounted
 function getRecommendationsSection() {
   return `## Product Recommendations (Cross-Sells & Upsells)
 
+Recommendations come **embedded in the product response** \u2014 no extra API call needed for product pages.
+
 \`\`\`typescript
 import type { ProductRecommendation, ProductRecommendationsResponse, CartRecommendationsResponse } from 'brainerce';
 
-// Product page \u2014 cross-sells, upsells, related
-const recs: ProductRecommendationsResponse = await client.getProductRecommendations(productId);
-// recs.crossSells, recs.upsells, recs.related
+// Product page \u2014 recommendations are embedded in the product response
+const product = await client.getProductBySlug('some-slug');
+const recs = (product as any).recommendations as ProductRecommendationsResponse | undefined;
+// recs?.upsells \u2014 premium alternatives (show on product page)
+// recs?.related \u2014 similar products (show at bottom of product page)
+// recs?.crossSells \u2014 complementary products (typically used on cart page)
 
-// Cart page \u2014 cross-sell suggestions for cart items
+// Cart page \u2014 cross-sell suggestions for cart items (separate call)
 const cartRecs: CartRecommendationsResponse = await client.getCartRecommendations(cartId, 4);
-// cartRecs.recommendations \u2014 deduplicated cross-sells
+// cartRecs.recommendations \u2014 deduplicated cross-sells (excludes items already in cart)
 \`\`\`
 
 ProductRecommendation: \`id\`, \`name\`, \`slug\`, \`basePrice\`, \`salePrice\`, \`images\`, \`type\`, \`inventory\`, \`relationType\`.
-Display "You might also like" on product pages, "Recommended for you" in cart.`;
+Display upsells + related on product pages, cross-sells on cart page.`;
 }
 function getInventorySection() {
   return `## Inventory, Stock Display & Reservation Countdown
@@ -1910,39 +1915,24 @@ var EMBEDDED_TEMPLATES = {
   "src/lib/brainerce.ts.ejs": `import { BrainerceClient } from 'brainerce';
 
 const CONNECTION_ID = process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID || 'vc_YOUR_CONNECTION_ID';
-const API_URL = process.env.NEXT_PUBLIC_BRAINERCE_API_URL || 'https://api.brainerce.com';
 
-// Singleton SDK client
+// Singleton SDK client \u2014 routes through same-origin BFF proxy for httpOnly cookie auth
 let clientInstance: BrainerceClient | null = null;
 
 export function getClient(): BrainerceClient {
   if (!clientInstance) {
     clientInstance = new BrainerceClient({
       connectionId: CONNECTION_ID,
-      baseUrl: API_URL,
+      baseUrl: '/api/store', // same-origin proxy handles auth via httpOnly cookie
+      proxyMode: true, // skip client-side token checks; proxy adds Authorization header
     });
   }
   return clientInstance;
 }
 
-// Auth token helpers
-const TOKEN_KEY = 'brainerce_customer_token';
+// Cart ID helpers (not a security token \u2014 safe in localStorage)
 const CART_ID_KEY = 'brainerce_cart_id';
 
-export function getStoredToken(): string | null {
-  if (typeof window === 'undefined') return null;
-  return localStorage.getItem(TOKEN_KEY);
-}
-
-export function setStoredToken(token: string | null): void {
-  if (typeof window === 'undefined') return;
-  if (token) {
-    localStorage.setItem(TOKEN_KEY, token);
-  } else {
-    localStorage.removeItem(TOKEN_KEY);
-  }
-}
-
 export function getStoredCartId(): string | null {
   if (typeof window === 'undefined') return null;
   return localStorage.getItem(CART_ID_KEY);
@@ -1957,14 +1947,158 @@ export function setStoredCartId(cartId: string | null): void {
   }
 }
 
-// Initialize client with stored auth
+// Initialize client (no token hydration \u2014 auth handled by httpOnly cookie)
 export function initClient(): BrainerceClient {
-  const client = getClient();
-  const token = getStoredToken();
-  if (token) {
-    client.setCustomerToken(token);
+  return getClient();
+}
+`,
+  "src/lib/auth.ts": `/**
+ * Client-side auth helpers that call the BFF proxy API routes.
+ * All mutating requests include the CSRF header.
+ * The token is managed server-side via httpOnly cookies \u2014 never exposed to JS.
+ */
+
+const CONNECTION_ID = process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID || '';
+
+const CSRF_HEADERS: Record<string, string> = {
+  'Content-Type': 'application/json',
+  'X-Requested-With': 'brainerce',
+};
+
+interface LoginResult {
+  customer: {
+    id: string;
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    emailVerified: boolean;
+  };
+  expiresAt: string;
+  requiresVerification?: boolean;
+}
+
+interface RegisterResult {
+  customer: {
+    id: string;
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    emailVerified: boolean;
+  };
+  expiresAt: string;
+  requiresVerification?: boolean;
+}
+
+interface AuthStatus {
+  isLoggedIn: boolean;
+  customer?: {
+    id: string;
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    phone?: string;
+    emailVerified: boolean;
+  };
+  error?: string;
+}
+
+interface VerifyEmailResult {
+  verified: boolean;
+  message?: string;
+}
+
+async function handleResponse<T>(response: Response): Promise<T> {
+  const data = await response.json();
+  if (!response.ok) {
+    throw new Error(data.message || data.error || \`Request failed (\${response.status})\`);
   }
-  return client;
+  return data as T;
+}
+
+/**
+ * Login via BFF proxy. The proxy sets the httpOnly cookie on success.
+ */
+export async function proxyLogin(email: string, password: string): Promise<LoginResult> {
+  const response = await fetch(\`/api/store/api/vc/\${CONNECTION_ID}/customers/login\`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify({ email, password }),
+  });
+  return handleResponse<LoginResult>(response);
+}
+
+/**
+ * Register via BFF proxy. The proxy sets the httpOnly cookie on success.
+ */
+export async function proxyRegister(data: {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+}): Promise<RegisterResult> {
+  const response = await fetch(\`/api/store/api/vc/\${CONNECTION_ID}/customers/register\`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify(data),
+  });
+  return handleResponse<RegisterResult>(response);
+}
+
+/**
+ * Check auth status. Reads httpOnly cookie server-side and validates with backend.
+ */
+export async function checkAuthStatus(): Promise<AuthStatus> {
+  const response = await fetch('/api/auth/me');
+  return response.json();
+}
+
+/**
+ * Logout. Clears httpOnly auth cookies server-side.
+ */
+export async function proxyLogout(): Promise<void> {
+  await fetch('/api/auth/logout', {
+    method: 'POST',
+    headers: { 'X-Requested-With': 'brainerce' },
+  });
+}
+
+/**
+ * Verify email via BFF proxy. The auth token is in the httpOnly cookie (set during login/register).
+ * The proxy adds the Authorization header automatically.
+ */
+export async function proxyVerifyEmail(code: string): Promise<VerifyEmailResult> {
+  const response = await fetch(\`/api/store/api/vc/\${CONNECTION_ID}/customers/verify-email\`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify({ code }),
+  });
+  return handleResponse<VerifyEmailResult>(response);
+}
+
+/**
+ * Resend verification email via BFF proxy.
+ * Uses the auth token from the httpOnly cookie.
+ */
+export async function proxyResendVerification(): Promise<{ message: string }> {
+  const response = await fetch(\`/api/store/api/vc/\${CONNECTION_ID}/customers/resend-verification\`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+  });
+  return handleResponse<{ message: string }>(response);
+}
+
+/**
+ * Reset password via BFF proxy.
+ * The reset token is in an httpOnly cookie (set by /api/auth/reset-callback when the user
+ * clicked the email link). The proxy reads it server-side \u2014 the token never reaches client JS.
+ */
+export async function proxyResetPassword(newPassword: string): Promise<{ message: string }> {
+  const response = await fetch('/api/auth/reset-password', {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify({ newPassword }),
+  });
+  return handleResponse<{ message: string }>(response);
 }
 `,
   "src/lib/utils.ts": `import { clsx, type ClassValue } from 'clsx';
@@ -1977,9 +2111,10 @@ export function cn(...inputs: ClassValue[]) {
   "src/providers/store-provider.tsx.ejs": `'use client';
 
 import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
-import type { StoreInfo, Cart } from 'brainerce';
+import type { StoreInfo, Cart, CustomerProfile } from 'brainerce';
 import { getCartTotals } from 'brainerce';
-import { getClient, initClient, getStoredToken, setStoredToken, setStoredCartId } from '@/lib/brainerce';
+import { getClient, initClient, setStoredCartId } from '@/lib/brainerce';
+import { checkAuthStatus, proxyLogout } from '@/lib/auth';
 
 // ---- Store Info Context ----
 interface StoreInfoContextValue {
@@ -2000,17 +2135,17 @@ export function useStoreInfo() {
 interface AuthContextValue {
   isLoggedIn: boolean;
   authLoading: boolean;
-  token: string | null;
-  login: (token: string) => void;
-  logout: () => void;
+  customer: CustomerProfile | null;
+  login: () => Promise<void>;
+  logout: () => Promise<void>;
 }
 
 const AuthContext = createContext<AuthContextValue>({
   isLoggedIn: false,
   authLoading: true,
-  token: null,
-  login: () => {},
-  logout: () => {},
+  customer: null,
+  login: async () => {},
+  logout: async () => {},
 });
 
 export function useAuth() {
@@ -2042,26 +2177,46 @@ export function useCart() {
 export function StoreProvider({ children }: { children: React.ReactNode }) {
   const [storeInfo, setStoreInfo] = useState<StoreInfo | null>(null);
   const [storeLoading, setStoreLoading] = useState(true);
-  const [token, setToken] = useState<string | null>(null);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [customer, setCustomer] = useState<CustomerProfile | null>(null);
   const [authLoading, setAuthLoading] = useState(true);
   const [cart, setCart] = useState<Cart | null>(null);
   const [cartLoading, setCartLoading] = useState(true);
 
-  // Initialize client and auth
+  // Check auth status via httpOnly cookie (server-side validation)
+  const refreshAuth = useCallback(async () => {
+    try {
+      const status = await checkAuthStatus();
+      setIsLoggedIn(status.isLoggedIn);
+      setCustomer(status.isLoggedIn ? (status.customer as CustomerProfile) : null);
+    } catch {
+      setIsLoggedIn(false);
+      setCustomer(null);
+    } finally {
+      setAuthLoading(false);
+    }
+  }, []);
+
+  // Initialize client, check auth, and fetch store info
   useEffect(() => {
     const client = initClient();
-    const stored = getStoredToken();
-    if (stored) {
-      setToken(stored);
+
+    // Optimistic check: if brainerce_logged_in cookie exists, assume logged in
+    // while we validate the actual token server-side
+    if (typeof document !== 'undefined' && document.cookie.includes('brainerce_logged_in=1')) {
+      setIsLoggedIn(true);
     }
-    setAuthLoading(false);
 
+    // Validate auth token server-side
+    refreshAuth();
+
+    // Fetch store info (public, no auth needed)
     client
       .getStoreInfo()
       .then(setStoreInfo)
       .catch(console.error)
       .finally(() => setStoreLoading(false));
-  }, []);
+  }, [refreshAuth]);
 
   // Cart management
   const refreshCart = useCallback(async () => {
@@ -2084,24 +2239,26 @@ export function StoreProvider({ children }: { children: React.ReactNode }) {
 
   useEffect(() => {
     refreshCart();
-  }, [refreshCart, token]);
+  }, [refreshCart, isLoggedIn]);
 
-  const login = useCallback((newToken: string) => {
-    const client = getClient();
-    client.setCustomerToken(newToken);
-    setStoredToken(newToken);
-    setToken(newToken);
+  // Called after successful login (cookie already set by proxy)
+  const login = useCallback(async () => {
+    // Refresh auth state from server (reads httpOnly cookie)
+    await refreshAuth();
 
     // Merge guest session cart into customer cart
+    const client = getClient();
     client.syncCartOnLogin().catch(console.error);
-  }, []);
+  }, [refreshAuth]);
+
+  const logout = useCallback(async () => {
+    // Clear httpOnly cookie server-side
+    await proxyLogout();
 
-  const logout = useCallback(() => {
     const client = getClient();
-    client.clearCustomerToken();
     client.onLogout();
-    setStoredToken(null);
-    setToken(null);
+    setIsLoggedIn(false);
+    setCustomer(null);
     setCart(null);
     refreshCart();
   }, [refreshCart]);
@@ -2114,7 +2271,7 @@ export function StoreProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <StoreInfoContext.Provider value={{ storeInfo, loading: storeLoading }}>
-      <AuthContext.Provider value={{ isLoggedIn: !!token, authLoading, token, login, logout }}>
+      <AuthContext.Provider value={{ isLoggedIn, authLoading, customer, login, logout }}>
         <CartContext.Provider
           value={{ cart, cartLoading, refreshCart, itemCount, totals }}
         >
@@ -2263,7 +2420,7 @@ export default function RootLayout({
 `,
   "src/app/products/page.tsx": `'use client';
 
-import { Suspense, useEffect, useState, useCallback } from 'react';
+import { Suspense, useEffect, useState, useCallback, useRef } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import type { Product } from 'brainerce';
 import type { ProductQueryParams } from 'brainerce';
@@ -2289,9 +2446,198 @@ const sortOptions: SortOption[] = [
   { labelKey: 'sortPriceHigh', sortBy: 'price', sortOrder: 'desc' },
 ];
 
-interface CategoryFilter {
+interface CategoryNode {
   id: string;
   name: string;
+  parentId?: string | null;
+  children: CategoryNode[];
+}
+
+/** Collect all descendant IDs (including self) */
+function getAllDescendantIds(node: CategoryNode): string[] {
+  const ids = [node.id];
+  for (const child of node.children) {
+    ids.push(...getAllDescendantIds(child));
+  }
+  return ids;
+}
+
+/** Check if a category or any of its descendants matches the selected ID */
+function isActiveInTree(node: CategoryNode, selectedId: string): boolean {
+  if (node.id === selectedId) return true;
+  return node.children.some((child) => isActiveInTree(child, selectedId));
+}
+
+/** Chevron down SVG */
+function ChevronDown({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 4.5L6 7.5L9 4.5" />
+    </svg>
+  );
+}
+
+/** Recursive dropdown items for nested categories */
+function CategoryDropdownItems({
+  children,
+  depth,
+  selectedId,
+  onSelect,
+}: {
+  children: CategoryNode[];
+  depth: number;
+  selectedId: string;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <>
+      {children.map((child) => (
+        <div key={child.id}>
+          <button
+            onClick={() => onSelect(child.id)}
+            className={cn(
+              'w-full text-start px-4 py-2 text-sm transition-colors hover:bg-muted',
+              selectedId === child.id && 'bg-primary/10 text-primary font-medium'
+            )}
+            style={{ paddingInlineStart: \`\${(depth + 1) * 16}px\` }}
+          >
+            {child.name}
+          </button>
+          {child.children.length > 0 && (
+            <CategoryDropdownItems
+              children={child.children}
+              depth={depth + 1}
+              selectedId={selectedId}
+              onSelect={onSelect}
+            />
+          )}
+        </div>
+      ))}
+    </>
+  );
+}
+
+/** Category chip with dropdown for subcategories */
+function CategoryChip({
+  category,
+  selectedId,
+  onSelect,
+  tc,
+}: {
+  category: CategoryNode;
+  selectedId: string;
+  onSelect: (id: string) => void;
+  tc: (key: string) => string;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const hasChildren = category.children.length > 0;
+  const isActive = isActiveInTree(category, selectedId);
+
+  // Find the display name for the selected subcategory
+  function findName(nodes: CategoryNode[], id: string): string | null {
+    for (const n of nodes) {
+      if (n.id === id) return n.name;
+      const found = findName(n.children, id);
+      if (found) return found;
+    }
+    return null;
+  }
+
+  const selectedChildName =
+    isActive && selectedId !== category.id ? findName(category.children, selectedId) : null;
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  if (!hasChildren) {
+    return (
+      <button
+        onClick={() => onSelect(category.id)}
+        className={cn(
+          'rounded-full border px-3 py-1.5 text-sm transition-colors',
+          selectedId === category.id
+            ? 'bg-primary text-primary-foreground border-primary'
+            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
+        )}
+      >
+        {category.name}
+      </button>
+    );
+  }
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((prev) => !prev)}
+        className={cn(
+          'inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-sm transition-colors',
+          isActive
+            ? 'bg-primary text-primary-foreground border-primary'
+            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
+        )}
+      >
+        {category.name}
+        {selectedChildName && (
+          <span className="opacity-80">
+            {'\xB7'} {selectedChildName}
+          </span>
+        )}
+        <ChevronDown
+          className={cn('transition-transform ms-0.5', open && 'rotate-180')}
+        />
+      </button>
+
+      {open && (
+        <div className="bg-background border-border absolute start-0 top-full z-50 mt-1 min-w-[180px] overflow-hidden rounded-lg border shadow-lg">
+          {/* "All in [category]" option */}
+          <button
+            onClick={() => {
+              onSelect(category.id);
+              setOpen(false);
+            }}
+            className={cn(
+              'w-full text-start px-4 py-2 text-sm font-medium transition-colors hover:bg-muted',
+              selectedId === category.id && 'bg-primary/10 text-primary'
+            )}
+          >
+            {tc('all')} {category.name}
+          </button>
+          <div className="bg-border mx-2 h-px" />
+          {/* Recursive children */}
+          <div
+            onClick={() => setOpen(false)}
+          >
+            <CategoryDropdownItems
+              children={category.children}
+              depth={0}
+              selectedId={selectedId}
+              onSelect={onSelect}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }
 
 function ProductsContent() {
@@ -2310,18 +2656,18 @@ function ProductsContent() {
   const [page, setPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [total, setTotal] = useState(0);
-  const [categories, setCategories] = useState<CategoryFilter[]>([]);
+  const [categories, setCategories] = useState<CategoryNode[]>([]);
 
   const sortIndex = parseInt(sortParam, 10) || 0;
   const currentSort = sortOptions[sortIndex] || sortOptions[0];
 
-  // Load categories
+  // Load categories (keep tree structure)
   useEffect(() => {
     async function loadCategories() {
       try {
         const client = getClient();
         const result = await client.getCategories();
-        setCategories(result.categories.map((c) => ({ id: c.id, name: c.name })));
+        setCategories(result.categories as CategoryNode[]);
       } catch {
         // Categories endpoint may not be available in all modes
       }
@@ -2390,6 +2736,10 @@ function ProductsContent() {
     router.push(\`/products?\${params.toString()}\`);
   }
 
+  function handleCategorySelect(id: string) {
+    updateParam('category', id);
+  }
+
   return (
     <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
       {/* Page Header */}
@@ -2421,18 +2771,13 @@ function ProductsContent() {
               {tc('all')}
             </button>
             {categories.map((cat) => (
-              <button
+              <CategoryChip
                 key={cat.id}
-                onClick={() => updateParam('category', cat.id)}
-                className={cn(
-                  'rounded-full border px-3 py-1.5 text-sm transition-colors',
-                  categoryId === cat.id
-                    ? 'bg-primary text-primary-foreground border-primary'
-                    : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
-                )}
-              >
-                {cat.name}
-              </button>
+                category={cat}
+                selectedId={categoryId}
+                onSelect={handleCategorySelect}
+                tc={tc as (key: string) => string}
+              />
             ))}
           </div>
         )}
@@ -2514,7 +2859,18 @@ import { useEffect, useState, useMemo } from 'react';
 import { useParams } from 'next/navigation';
 import Image from 'next/image';
 import Link from 'next/link';
-import type { Product, ProductVariant, ProductImage, ProductMetafield } from 'brainerce';
+import type {
+  Product,
+  ProductVariant,
+  ProductImage,
+  ProductMetafield,
+  ProductRecommendationsResponse,
+  DownloadFile,
+} from 'brainerce';
+
+type ProductWithRecommendations = Product & {
+  recommendations?: ProductRecommendationsResponse;
+};
 import { getProductPriceInfo, getDescriptionContent } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useCart } from '@/providers/store-provider';
@@ -2522,6 +2878,7 @@ import { PriceDisplay } from '@/components/shared/price-display';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { VariantSelector } from '@/components/products/variant-selector';
 import { StockBadge } from '@/components/products/stock-badge';
+import { RecommendationSection } from '@/components/products/recommendation-section';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
@@ -2615,7 +2972,7 @@ export default function ProductDetailPage() {
   const { refreshCart } = useCart();
   const t = useTranslations('productDetail');
   const tc = useTranslations('common');
-  const [product, setProduct] = useState<Product | null>(null);
+  const [product, setProduct] = useState<ProductWithRecommendations | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
@@ -2624,6 +2981,8 @@ export default function ProductDetailPage() {
   const [addingToCart, setAddingToCart] = useState(false);
   const [addedMessage, setAddedMessage] = useState(false);
 
+  const recommendations = product?.recommendations ?? null;
+
   // Load product
   useEffect(() => {
     async function load() {
@@ -2632,7 +2991,7 @@ export default function ProductDetailPage() {
         setError(null);
         const client = getClient();
         const p = await client.getProductBySlug(slug);
-        setProduct(p);
+        setProduct(p as ProductWithRecommendations);
 
         // Auto-select first variant
         if (p.variants && p.variants.length > 0) {
@@ -2838,8 +3197,43 @@ export default function ProductDetailPage() {
             size="lg"
           />
 
-          {/* Stock */}
-          <StockBadge inventory={inventory} lowStockThreshold={5} />
+          {/* Stock / Digital badge */}
+          {product.isDownloadable ? (
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-800 dark:bg-green-950/30 dark:text-green-400">
+              <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              </svg>
+              {t('instantDownload')}
+            </span>
+          ) : (
+            <StockBadge inventory={inventory} lowStockThreshold={5} />
+          )}
+
+          {/* Downloadable files info */}
+          {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
+            <div className="bg-muted/50 rounded-lg border p-4">
+              <p className="text-foreground mb-2 text-sm font-medium">
+                {t('filesIncluded', { count: product.downloads.length })}
+              </p>
+              <ul className="space-y-1.5">
+                {product.downloads.map((file: DownloadFile) => (
+                  <li key={file.id} className="text-muted-foreground flex items-center gap-2 text-sm">
+                    <svg className="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                    </svg>
+                    <span className="truncate">{file.name}</span>
+                    {file.size && (
+                      <span className="flex-shrink-0 text-xs">
+                        ({file.size < 1024 * 1024
+                          ? \`\${(file.size / 1024).toFixed(0)} KB\`
+                          : \`\${(file.size / (1024 * 1024)).toFixed(1)} MB\`})
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
 
           {/* Variant Selector */}
           {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
@@ -2903,6 +3297,13 @@ export default function ProductDetailPage() {
             </button>
           </div>
 
+          {/* Download after purchase note */}
+          {product.isDownloadable && (
+            <p className="text-muted-foreground text-sm">
+              {t('downloadAfterPurchase')}
+            </p>
+          )}
+
           {/* Description */}
           {description && (
             <div className="border-border border-t pt-4">
@@ -2940,19 +3341,41 @@ export default function ProductDetailPage() {
           )}
         </div>
       </div>
+
+      {/* Upsells \u2014 premium alternatives (product page) */}
+      {recommendations?.upsells && recommendations.upsells.length > 0 && (
+        <RecommendationSection
+          title={t('upgradeYourChoice')}
+          items={recommendations.upsells}
+          className="mt-12"
+        />
+      )}
+
+      {/* Related products \u2014 similar items (bottom of product page) */}
+      {recommendations?.related && recommendations.related.length > 0 && (
+        <RecommendationSection
+          title={t('similarProducts')}
+          items={recommendations.related}
+          className="mt-12"
+        />
+      )}
     </div>
   );
 }
 `,
   "src/app/cart/page.tsx": `'use client';
 
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
+import type { CartRecommendationsResponse } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
 import { useCart } from '@/providers/store-provider';
 import { CartItem } from '@/components/cart/cart-item';
 import { CartSummary } from '@/components/cart/cart-summary';
 import { CouponInput } from '@/components/cart/coupon-input';
 import { CartNudges } from '@/components/cart/cart-nudges';
 import { ReservationCountdown } from '@/components/cart/reservation-countdown';
+import { CartRecommendationSection } from '@/components/products/recommendation-section';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { useTranslations } from '@/lib/translations';
 
@@ -2960,6 +3383,17 @@ export default function CartPage() {
   const { cart, cartLoading, refreshCart, itemCount } = useCart();
   const t = useTranslations('cart');
   const tc = useTranslations('common');
+  const [cartRecs, setCartRecs] = useState<CartRecommendationsResponse | null>(null);
+
+  // Load cross-sell recommendations when cart changes
+  useEffect(() => {
+    if (!cart?.id || cart.items.length === 0) {
+      setCartRecs(null);
+      return;
+    }
+    const client = getClient();
+    client.getCartRecommendations(cart.id, 4).then(setCartRecs).catch(() => {});
+  }, [cart?.id, cart?.items.length]);
 
   if (cartLoading) {
     return (
@@ -3051,6 +3485,15 @@ export default function CartPage() {
           </div>
         </div>
       </div>
+
+      {/* Cross-sell recommendations */}
+      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
+        <CartRecommendationSection
+          title={t('youMightAlsoNeed')}
+          items={cartRecs.recommendations}
+          className="mt-10"
+        />
+      )}
     </div>
   );
 }
@@ -3934,8 +4377,8 @@ export default function OrderConfirmationPage() {
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { getClient } from '@/lib/brainerce';
 import { useAuth } from '@/providers/store-provider';
+import { proxyLogin } from '@/lib/auth';
 import { LoginForm } from '@/components/auth/login-form';
 import { OAuthButtons } from '@/components/auth/oauth-buttons';
 import { useTranslations } from '@/lib/translations';
@@ -3949,15 +4392,16 @@ export default function LoginPage() {
   async function handleLogin(email: string, password: string) {
     try {
       setError(null);
-      const client = getClient();
-      const result = await client.loginCustomer(email, password);
+      const result = await proxyLogin(email, password);
 
       if (result.requiresVerification) {
-        router.push(\`/verify-email?token=\${encodeURIComponent(result.token)}\`);
+        // Verification token is NOT the auth JWT \u2014 safe to pass in URL
+        router.push('/verify-email');
         return;
       }
 
-      auth.login(result.token);
+      // Cookie was set by the proxy; refresh auth state
+      await auth.login();
       router.push('/');
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Login failed. Please try again.';
@@ -3993,8 +4437,8 @@ export default function LoginPage() {
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { getClient } from '@/lib/brainerce';
 import { useAuth } from '@/providers/store-provider';
+import { proxyRegister } from '@/lib/auth';
 import { RegisterForm } from '@/components/auth/register-form';
 import { OAuthButtons } from '@/components/auth/oauth-buttons';
 import { useTranslations } from '@/lib/translations';
@@ -4013,20 +4457,16 @@ export default function RegisterPage() {
   }) {
     try {
       setError(null);
-      const client = getClient();
-      const result = await client.registerCustomer({
-        firstName: data.firstName,
-        lastName: data.lastName,
-        email: data.email,
-        password: data.password,
-      });
+      const result = await proxyRegister(data);
 
       if (result.requiresVerification) {
-        router.push(\`/verify-email?token=\${encodeURIComponent(result.token)}\`);
+        // Cookie already set by proxy; verify-email uses it for auth
+        router.push('/verify-email');
         return;
       }
 
-      auth.login(result.token);
+      // Cookie was set by the proxy; refresh auth state
+      await auth.login();
       router.push('/');
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Registration failed. Please try again.';
@@ -4060,10 +4500,10 @@ export default function RegisterPage() {
   "src/app/verify-email/page.tsx": `'use client';
 
 import { Suspense, useState, useRef, useEffect, useCallback } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { getClient } from '@/lib/brainerce';
 import { useAuth } from '@/providers/store-provider';
+import { proxyVerifyEmail, proxyResendVerification } from '@/lib/auth';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { useTranslations } from '@/lib/translations';
 
@@ -4072,10 +4512,8 @@ const RESEND_COOLDOWN_SECONDS = 60;
 
 function VerifyEmailContent() {
   const router = useRouter();
-  const searchParams = useSearchParams();
   const auth = useAuth();
 
-  const token = searchParams.get('token');
   const t = useTranslations('auth');
 
   const [digits, setDigits] = useState<string[]>(Array(CODE_LENGTH).fill(''));
@@ -4103,18 +4541,17 @@ function VerifyEmailContent() {
 
   const handleSubmit = useCallback(
     async (code: string) => {
-      if (!token || code.length !== CODE_LENGTH || loading) return;
+      if (code.length !== CODE_LENGTH || loading) return;
 
       try {
         setLoading(true);
         setError(null);
-        const client = getClient();
-        const result = await client.verifyEmail(code, token);
+        // Auth token is in httpOnly cookie \u2014 proxy adds Authorization header
+        const result = await proxyVerifyEmail(code);
 
         if (result.verified) {
-          // token field exists on newer SDK versions
-          const authToken = (result as unknown as { token?: string }).token || token;
-          auth.login(authToken);
+          // Refresh auth state (cookie already set)
+          await auth.login();
           setSuccess('Email verified successfully! Redirecting...');
           setTimeout(() => router.push('/'), 1500);
         } else {
@@ -4128,7 +4565,7 @@ function VerifyEmailContent() {
         setLoading(false);
       }
     },
-    [token, loading, auth, router]
+    [loading, auth, router]
   );
 
   function handleDigitChange(index: number, value: string) {
@@ -4182,13 +4619,12 @@ function VerifyEmailContent() {
   }
 
   async function handleResend() {
-    if (!token || resending || cooldown > 0) return;
+    if (resending || cooldown > 0) return;
 
     try {
       setResending(true);
       setError(null);
-      const client = getClient();
-      await client.resendVerificationEmail(token);
+      await proxyResendVerification();
       setSuccess('Verification code sent! Check your email.');
       setCooldown(RESEND_COOLDOWN_SECONDS);
       // Clear digits for fresh entry
@@ -4208,37 +4644,6 @@ function VerifyEmailContent() {
     handleSubmit(code);
   }
 
-  // No token provided
-  if (!token) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
-        <div className="w-full max-w-md space-y-4 text-center">
-          <svg
-            className="text-muted-foreground mx-auto h-12 w-12"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={1.5}
-              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-            />
-          </svg>
-          <h1 className="text-foreground text-2xl font-bold">{t('verificationInvalid')}</h1>
-          <p className="text-muted-foreground text-sm">{t('verificationInvalidDesc')}</p>
-          <Link
-            href="/register"
-            className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-          >
-            {t('goToRegister')}
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
       <div className="w-full max-w-md space-y-6">
@@ -4368,8 +4773,8 @@ function OAuthCallbackContent() {
   const t = useTranslations('auth');
 
   const oauthSuccess = searchParams.get('oauth_success');
-  const token = searchParams.get('token');
   const oauthError = searchParams.get('oauth_error');
+  // Token is no longer in URL \u2014 it was set as httpOnly cookie by /api/auth/oauth-callback
 
   useEffect(() => {
     // Prevent double-processing in React StrictMode
@@ -4381,13 +4786,15 @@ function OAuthCallbackContent() {
       return;
     }
 
-    if (oauthSuccess === 'true' && token) {
-      auth.login(token);
-      router.push('/');
+    if (oauthSuccess === 'true') {
+      // Cookie was already set by the API route; refresh auth state
+      auth.login().then(() => {
+        router.push('/');
+      });
     } else {
       setError(t('authFailedDesc'));
     }
-  }, [oauthSuccess, token, oauthError, auth, router]);
+  }, [oauthSuccess, oauthError, auth, router, t]);
 
   if (error) {
     return (
@@ -4554,6 +4961,354 @@ export default function AccountPage() {
     </div>
   );
 }
+`,
+  "src/app/api/store/[...path]/route.ts": `import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+
+const BACKEND_URL = (process.env.BRAINERCE_API_URL || 'https://api.brainerce.com').replace(
+  /\\/$/,
+  ''
+);
+
+const TOKEN_COOKIE = 'brainerce_customer_token';
+const LOGGED_IN_COOKIE = 'brainerce_logged_in';
+const CSRF_HEADER = 'x-requested-with';
+const CSRF_VALUE = 'brainerce';
+
+const COOKIE_MAX_AGE = 7 * 24 * 60 * 60; // 7 days
+
+/** Auth endpoints whose responses contain tokens to intercept */
+const AUTH_ENDPOINTS = ['customers/login', 'customers/register', 'customers/verify-email'];
+
+function isAuthEndpoint(path: string): boolean {
+  return AUTH_ENDPOINTS.some((ep) => path.endsWith(ep));
+}
+
+function isSecure(): boolean {
+  return process.env.NODE_ENV === 'production';
+}
+
+function setAuthCookies(response: NextResponse, token: string): void {
+  response.cookies.set(TOKEN_COOKIE, token, {
+    httpOnly: true,
+    secure: isSecure(),
+    sameSite: 'lax',
+    path: '/',
+    maxAge: COOKIE_MAX_AGE,
+  });
+  response.cookies.set(LOGGED_IN_COOKIE, '1', {
+    httpOnly: false,
+    secure: isSecure(),
+    sameSite: 'lax',
+    path: '/',
+    maxAge: COOKIE_MAX_AGE,
+  });
+}
+
+function clearAuthCookies(response: NextResponse): void {
+  response.cookies.delete(TOKEN_COOKIE);
+  response.cookies.delete(LOGGED_IN_COOKIE);
+}
+
+async function proxyRequest(
+  request: NextRequest,
+  params: { path: string[] }
+): Promise<NextResponse> {
+  const method = request.method;
+
+  // CSRF protection for mutating requests
+  if (['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)) {
+    const csrfHeader = request.headers.get(CSRF_HEADER);
+    if (csrfHeader !== CSRF_VALUE) {
+      return NextResponse.json({ error: 'CSRF validation failed' }, { status: 403 });
+    }
+  }
+
+  // Build backend URL from path segments
+  const pathSegments = params.path.join('/');
+  const backendUrl = new URL(\`\${BACKEND_URL}/\${pathSegments}\`);
+
+  // Forward query parameters
+  request.nextUrl.searchParams.forEach((value, key) => {
+    backendUrl.searchParams.set(key, value);
+  });
+
+  // Build headers for backend request
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+
+  // Forward Origin/Referer so backend BrowserOriginGuard accepts proxied requests
+  const origin = request.headers.get('origin');
+  const referer = request.headers.get('referer');
+  if (origin) headers['Origin'] = origin;
+  if (referer) headers['Referer'] = referer;
+
+  // Forward SDK version header if present
+  const sdkVersion = request.headers.get('x-sdk-version');
+  if (sdkVersion) {
+    headers['X-SDK-Version'] = sdkVersion;
+  }
+
+  // Add auth token from httpOnly cookie
+  const cookieStore = await cookies();
+  const tokenCookie = cookieStore.get(TOKEN_COOKIE);
+  if (tokenCookie?.value) {
+    headers['Authorization'] = \`Bearer \${tokenCookie.value}\`;
+  }
+
+  // Forward request body for non-GET requests
+  let body: string | undefined;
+  if (method !== 'GET' && method !== 'HEAD') {
+    try {
+      body = await request.text();
+    } catch {
+      // No body
+    }
+  }
+
+  // Proxy the request to backend
+  let backendResponse: Response;
+  try {
+    backendResponse = await fetch(backendUrl.toString(), {
+      method,
+      headers,
+      body,
+    });
+  } catch (error) {
+    return NextResponse.json({ error: 'Backend service unavailable' }, { status: 502 });
+  }
+
+  // Read response body
+  const responseText = await backendResponse.text();
+
+  // For auth endpoints: intercept token, set cookie, strip token from response
+  if (backendResponse.ok && method === 'POST' && isAuthEndpoint(pathSegments)) {
+    try {
+      const data = JSON.parse(responseText);
+      if (data.token) {
+        const token = data.token;
+
+        // Strip token from client response
+        const { token: _stripped, ...safeData } = data;
+
+        const response = NextResponse.json(safeData, {
+          status: backendResponse.status,
+        });
+        setAuthCookies(response, token);
+        return response;
+      }
+    } catch {
+      // Not JSON or no token field \u2014 pass through
+    }
+  }
+
+  // Handle 401 responses: clear auth cookies
+  if (backendResponse.status === 401 && tokenCookie?.value) {
+    const response = new NextResponse(responseText, {
+      status: backendResponse.status,
+      headers: {
+        'Content-Type': backendResponse.headers.get('Content-Type') || 'application/json',
+      },
+    });
+    clearAuthCookies(response);
+    return response;
+  }
+
+  // Pass through response as-is
+  return new NextResponse(responseText, {
+    status: backendResponse.status,
+    headers: {
+      'Content-Type': backendResponse.headers.get('Content-Type') || 'application/json',
+    },
+  });
+}
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  return proxyRequest(request, await params);
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  return proxyRequest(request, await params);
+}
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  return proxyRequest(request, await params);
+}
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  return proxyRequest(request, await params);
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  return proxyRequest(request, await params);
+}
+`,
+  "src/app/api/auth/oauth-callback/route.ts": `import { NextRequest, NextResponse } from 'next/server';
+
+const TOKEN_COOKIE = 'brainerce_customer_token';
+const LOGGED_IN_COOKIE = 'brainerce_logged_in';
+const COOKIE_MAX_AGE = 7 * 24 * 60 * 60; // 7 days
+
+function isSecure(): boolean {
+  return process.env.NODE_ENV === 'production';
+}
+
+/**
+ * OAuth callback handler.
+ * The backend redirects here with ?token=jwt&oauth_success=true after OAuth code exchange.
+ * We set the httpOnly cookie and redirect to the client-side callback page (without the token).
+ */
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl;
+  const token = searchParams.get('token');
+  const oauthSuccess = searchParams.get('oauth_success');
+  const oauthError = searchParams.get('oauth_error');
+
+  // Build redirect URL to client-side callback page
+  const redirectUrl = new URL('/auth/callback', request.url);
+
+  if (oauthError) {
+    redirectUrl.searchParams.set('oauth_error', oauthError);
+    return NextResponse.redirect(redirectUrl);
+  }
+
+  if (oauthSuccess === 'true' && token) {
+    redirectUrl.searchParams.set('oauth_success', 'true');
+
+    const response = NextResponse.redirect(redirectUrl);
+
+    // Set httpOnly cookie with the token
+    response.cookies.set(TOKEN_COOKIE, token, {
+      httpOnly: true,
+      secure: isSecure(),
+      sameSite: 'lax',
+      path: '/',
+      maxAge: COOKIE_MAX_AGE,
+    });
+
+    // Set indicator cookie (readable by client JS)
+    response.cookies.set(LOGGED_IN_COOKIE, '1', {
+      httpOnly: false,
+      secure: isSecure(),
+      sameSite: 'lax',
+      path: '/',
+      maxAge: COOKIE_MAX_AGE,
+    });
+
+    return response;
+  }
+
+  // Fallback: no token or success flag
+  redirectUrl.searchParams.set('oauth_error', 'Authentication failed');
+  return NextResponse.redirect(redirectUrl);
+}
+`,
+  "src/app/api/auth/me/route.ts": `import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+
+const BACKEND_URL = (process.env.BRAINERCE_API_URL || 'https://api.brainerce.com').replace(
+  /\\/$/,
+  ''
+);
+
+const CONNECTION_ID = process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID || '';
+
+const TOKEN_COOKIE = 'brainerce_customer_token';
+const LOGGED_IN_COOKIE = 'brainerce_logged_in';
+
+/**
+ * Auth status check endpoint.
+ * Reads the httpOnly cookie, validates against backend, returns auth state.
+ */
+export async function GET() {
+  const cookieStore = await cookies();
+  const tokenCookie = cookieStore.get(TOKEN_COOKIE);
+
+  if (!tokenCookie?.value) {
+    return NextResponse.json({ isLoggedIn: false });
+  }
+
+  try {
+    // Validate token by calling backend profile endpoint
+    const response = await fetch(\`\${BACKEND_URL}/api/vc/\${CONNECTION_ID}/customers/me\`, {
+      headers: {
+        Authorization: \`Bearer \${tokenCookie.value}\`,
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      // Token is invalid or expired \u2014 clear cookies
+      const res = NextResponse.json({ isLoggedIn: false });
+      res.cookies.delete(TOKEN_COOKIE);
+      res.cookies.delete(LOGGED_IN_COOKIE);
+      return res;
+    }
+
+    const customer = await response.json();
+    return NextResponse.json({ isLoggedIn: true, customer });
+  } catch {
+    // Backend unreachable \u2014 don't clear cookies, might be temporary
+    return NextResponse.json({ isLoggedIn: false, error: 'Service unavailable' }, { status: 503 });
+  }
+}
+`,
+  "src/app/api/auth/logout/route.ts": `import { NextResponse } from 'next/server';
+
+const TOKEN_COOKIE = 'brainerce_customer_token';
+const LOGGED_IN_COOKIE = 'brainerce_logged_in';
+
+/**
+ * Logout endpoint. Clears auth cookies.
+ */
+export async function POST() {
+  const response = NextResponse.json({ success: true });
+  response.cookies.delete(TOKEN_COOKIE);
+  response.cookies.delete(LOGGED_IN_COOKIE);
+  return response;
+}
+`,
+  "src/middleware.ts": `import { NextRequest, NextResponse } from 'next/server';
+
+const TOKEN_COOKIE = 'brainerce_customer_token';
+
+/** Routes that require customer authentication */
+const PROTECTED_PATHS = ['/account'];
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+  const isProtected = PROTECTED_PATHS.some((p) => pathname.startsWith(p));
+
+  if (isProtected) {
+    const token = request.cookies.get(TOKEN_COOKIE);
+    if (!token?.value) {
+      const loginUrl = new URL('/login', request.url);
+      return NextResponse.redirect(loginUrl);
+    }
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/account/:path*'],
+};
 `,
   "src/components/products/product-card.tsx": `'use client';
 
@@ -4574,6 +5329,7 @@ interface ProductCardProps {
 
 export function ProductCard({ product, className }: ProductCardProps) {
   const t = useTranslations('common');
+  const tp = useTranslations('productDetail');
   const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
   const mainImage = product.images?.[0];
   const imageUrl = mainImage?.url || null;
@@ -4618,6 +5374,11 @@ export function ProductCard({ product, className }: ProductCardProps) {
             </span>
           )}
           <DiscountBadge discount={product.discount} />
+          {product.isDownloadable && (
+            <span className="bg-primary text-primary-foreground rounded px-2 py-1 text-xs font-bold">
+              {tp('digitalProduct')}
+            </span>
+          )}
         </div>
       </div>
 
@@ -5885,8 +6646,11 @@ declare global {
 }
 
 // Payment SDK script URLs \u2014 resolved per provider
+// SRI hashes must be regenerated when the provider updates their SDK
 const PAYMENT_SDK_URL = 'https://cdn.meshulam.co.il/sdk/gs.min.js';
+const PAYMENT_SDK_SRI = 'sha384-e1OYzZERZLgbR8Zw1I4Ww/J7qXGyEsZb7LF0z5W/sbnTsFwtxop7sKZsLGNp6CB1';
 const APPLE_PAY_SDK_URL = 'https://meshulam.co.il/_media/js/apple_pay_sdk/sdk.min.js';
+const APPLE_PAY_SDK_SRI = 'sha384-CG67HXmWBeyuRR/jqFsYr6dGEMFyuZw3/hRmcyACJRYHGb/1ebEkQZyzdJXDc9/u';
 
 interface PaymentStepProps {
   checkoutId: string;
@@ -5897,7 +6661,7 @@ interface PaymentStepProps {
  * Load a script tag if not already present in the DOM.
  * Resolves when the script loads (or immediately if already present).
  */
-function loadScript(src: string, optional = false): Promise<void> {
+function loadScript(src: string, optional = false, integrity?: string): Promise<void> {
   return new Promise((resolve) => {
     if (document.querySelector(\`script[src="\${src}"]\`)) {
       resolve();
@@ -5906,6 +6670,10 @@ function loadScript(src: string, optional = false): Promise<void> {
     const script = document.createElement('script');
     script.src = src;
     script.async = true;
+    if (integrity) {
+      script.integrity = integrity;
+      script.crossOrigin = 'anonymous';
+    }
     script.onload = () => resolve();
     script.onerror = () => {
       if (optional) {
@@ -5998,10 +6766,10 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
 
     async function loadSdkScripts() {
       // Load Apple Pay SDK (optional)
-      await loadScript(APPLE_PAY_SDK_URL, true);
+      await loadScript(APPLE_PAY_SDK_URL, true, APPLE_PAY_SDK_SRI);
 
       // Load payment SDK script
-      await loadScript(PAYMENT_SDK_URL);
+      await loadScript(PAYMENT_SDK_URL, false, PAYMENT_SDK_SRI);
 
       // Wait for SDK global to be set by the script
       const available = await waitForPaymentSdkGlobal();
@@ -6664,7 +7432,7 @@ export function OAuthButtons({ className }: OAuthButtonsProps) {
     try {
       setRedirecting(provider);
       const client = getClient();
-      const redirectUrl = window.location.origin + '/auth/callback';
+      const redirectUrl = window.location.origin + '/api/auth/oauth-callback';
       const result = await client.getOAuthAuthorizeUrl(provider, { redirectUrl });
       window.location.href = result.authorizationUrl;
     } catch (err) {
@@ -6946,10 +7714,11 @@ export function ProfileSection({ profile, onProfileUpdate, className }: ProfileS
 `,
   "src/components/account/order-history.tsx": `'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Image from 'next/image';
-import type { Order, OrderStatus } from 'brainerce';
+import type { Order, OrderStatus, OrderDownloadLink } from 'brainerce';
 import { formatPrice } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
@@ -7133,6 +7902,11 @@ function OrderCard({ order }: { order: Order }) {
             </div>
           ))}
 
+          {/* Downloads section */}
+          {order.hasDownloads && (
+            <OrderDownloads orderId={order.id} />
+          )}
+
           <OrderFinancialSummary order={order} currency={currency} />
         </div>
       )}
@@ -7140,6 +7914,71 @@ function OrderCard({ order }: { order: Order }) {
   );
 }
 
+function OrderDownloads({ orderId }: { orderId: string }) {
+  const t = useTranslations('account');
+  const [downloads, setDownloads] = useState<OrderDownloadLink[] | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function fetch() {
+      try {
+        const client = getClient();
+        const links = await client.getOrderDownloads(orderId);
+        if (!cancelled) setDownloads(links);
+      } catch {
+        if (!cancelled) setDownloads([]);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    fetch();
+    return () => { cancelled = true; };
+  }, [orderId]);
+
+  if (loading) {
+    return (
+      <div className="border-border border-t pt-2">
+        <p className="text-muted-foreground animate-pulse text-xs">{t('downloads')}...</p>
+      </div>
+    );
+  }
+
+  if (!downloads || downloads.length === 0) return null;
+
+  return (
+    <div className="border-border space-y-2 border-t pt-2">
+      <p className="text-foreground text-sm font-medium">{t('downloads')}</p>
+      {downloads.map((link, idx) => (
+        <div key={idx} className="flex items-center gap-3">
+          <div className="min-w-0 flex-1">
+            <p className="text-foreground truncate text-sm">{link.fileName}</p>
+            <p className="text-muted-foreground text-xs">
+              {link.productName}
+              {' \xB7 '}
+              {link.downloadLimit != null
+                ? t('downloadsRemaining', { used: link.downloadsUsed, limit: link.downloadLimit })
+                : t('unlimitedDownloads')}
+              {' \xB7 '}
+              {link.expiresAt
+                ? t('expiresAt', { date: new Date(link.expiresAt).toLocaleDateString() })
+                : t('noExpiry')}
+            </p>
+          </div>
+          <a
+            href={link.downloadUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bg-primary text-primary-foreground flex-shrink-0 rounded px-3 py-1 text-xs font-medium hover:opacity-90"
+          >
+            {t('downloadFile')}
+          </a>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 function OrderFinancialSummary({ order, currency }: { order: Order; currency: string }) {
   const tc = useTranslations('common');
   const totalAmount = order.totalAmount || order.total || '0';
@@ -8021,7 +8860,7 @@ var DETAILED = `# Required Pages \u2014 Detailed Guide
 - Stock badge
 - Discount badge (\`getProductDiscountBadge()\`)
 - Add to cart button (disabled when \`!canPurchase\`)
-- Product recommendations (\`getProductRecommendations()\`)
+- Product recommendations (from \`product.recommendations\` \u2014 embedded in product response)
 - Use \`client.getProductBySlug(slug)\`
 
 ## 4. Cart (\`/cart\`)
@@ -8299,6 +9138,39 @@ my-store/
 | \`app/auth/callback/page.tsx\` | Extracts OAuth token from URL params, stores in localStorage |
 | \`app/account/page.tsx\` | Protected page: getMyProfile() + getMyOrders() |
 | \`components/Header.tsx\` | Site header with nav, cart count badge, search autocomplete |
+
+## Content Security Policy (CSP)
+
+Payment SDKs load iframes and scripts from external domains. Add these CSP headers in \`next.config.js\`:
+
+\`\`\`js
+// next.config.js
+module.exports = {
+  async headers() {
+    return [{
+      source: '/(.*)',
+      headers: [{
+        key: 'Content-Security-Policy',
+        value: [
+          "default-src 'self'",
+          "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.meshulam.co.il https://meshulam.co.il https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://js.stripe.com https://pay.google.com",
+          "style-src 'self' 'unsafe-inline'",
+          "img-src 'self' data: blob: https:",
+          "font-src 'self' data:",
+          "frame-src 'self' https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://*.creditguard.co.il https://js.stripe.com https://hooks.stripe.com https://pay.google.com",
+          "connect-src 'self' https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://google.com https://pay.google.com https://*.stripe.com https://*.creditguard.co.il",
+          "worker-src 'self' blob:",
+        ].join('; '),
+      }],
+    }];
+  },
+};
+\`\`\`
+
+**Required domains by provider:**
+- **Grow**: \`*.meshulam.co.il\`, \`grow.link\`, \`*.grow.link\`, \`*.grow.security\`, \`*.creditguard.co.il\`
+- **Stripe**: \`js.stripe.com\`, \`hooks.stripe.com\`, \`*.stripe.com\`
+- **Google Pay**: \`pay.google.com\`, \`google.com\`
 `;
 
 // src/resources/project-template.ts