@brainerce/mcp-server 1.2.0 → 1.3.0

package/dist/index.mjs

@@ -685,20 +685,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
@@ -2372,7 +2377,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';
@@ -2398,9 +2403,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() {
@@ -2419,18 +2613,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
       }
@@ -2499,6 +2693,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 */}
@@ -2530,18 +2728,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>
         )}
@@ -2623,7 +2816,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';
@@ -2631,6 +2835,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';
 
@@ -2724,7 +2929,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);
@@ -2733,6 +2938,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() {
@@ -2741,7 +2948,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) {
@@ -2947,8 +3154,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 && (
@@ -3012,6 +3254,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">
@@ -3049,19 +3298,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';
 
@@ -3069,6 +3340,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 (
@@ -3160,6 +3442,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>
   );
 }
@@ -4704,6 +4995,12 @@ async function proxyRequest(
     '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) {
@@ -4989,6 +5286,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;
@@ -5033,6 +5331,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>
 
@@ -7368,10 +7671,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';
 
@@ -7555,6 +7859,11 @@ function OrderCard({ order }: { order: Order }) {
             </div>
           ))}
 
+          {/* Downloads section */}
+          {order.hasDownloads && (
+            <OrderDownloads orderId={order.id} />
+          )}
+
           <OrderFinancialSummary order={order} currency={currency} />
         </div>
       )}
@@ -7562,6 +7871,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';
@@ -8443,7 +8817,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\`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brainerce/mcp-server",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "MCP server for AI-powered Brainerce store building. Provides SDK docs, types, and code examples to AI tools like Lovable, Cursor, and Claude Code.",
   "bin": {
     "brainerce-mcp": "dist/bin/stdio.js"