@o2vend/theme-cli 1.0.32 → 1.0.33

package/lib/lib/dev-server.js

@@ -106,23 +106,31 @@ class DevServer {
     
     // Process CSS files through Liquid to support theme variables
     // This handles CSS files that contain Liquid syntax like {{ settings.color_primary }}
-    this.app.get('/assets/:filename.css', async (req, res, next) => {
+    // Supports both root assets and subdirectories: /assets/file.css and /assets/css/file.css
+    this.app.get('/assets/*.css', async (req, res, next) => {
       try {
-        // Get filename from params
-        const filename = req.params.filename + '.css';
-        const cssPath = path.join(this.themePath, 'assets', filename);
+        // Extract the relative path from /assets/ (remove leading /assets/)
+        const relativePath = req.path.replace(/^\/assets\//, '');
+        const cssPath = path.join(this.themePath, 'assets', relativePath);
+        
+        // Normalize path to prevent directory traversal
+        const normalizedPath = path.normalize(cssPath);
+        const assetsDir = path.normalize(path.join(this.themePath, 'assets'));
+        if (!normalizedPath.startsWith(assetsDir)) {
+          return res.status(403).send('Invalid path');
+        }
         
-        if (!fs.existsSync(cssPath)) {
+        if (!fs.existsSync(normalizedPath)) {
           return next();
         }
         
-        const cssContent = fs.readFileSync(cssPath, 'utf8');
+        const cssContent = fs.readFileSync(normalizedPath, 'utf8');
         
         // Check if CSS contains Liquid variable syntax ({{ }})
         // Only process if it contains actual Liquid variables, not just comments
         if (cssContent.includes('{{') && cssContent.includes('settings.')) {
           try {
-            // Load settings from theme config
+            // Load settings from theme config (already extracts 'current' section)
             const settings = this.loadThemeSettings();
             
             // Process through Liquid
@@ -132,14 +140,14 @@ class DevServer {
             res.setHeader('Cache-Control', 'no-cache');
             return res.send(processedCss);
           } catch (liquidError) {
-            console.error(`[CSS] Liquid processing error for ${filename}:`, liquidError.message);
+            console.error(`[CSS] Liquid processing error for ${relativePath}:`, liquidError.message);
             // Fall through to serve static file
           }
         }
         
         // Serve static file if no Liquid processing needed or if processing failed
         res.setHeader('Content-Type', 'text/css; charset=utf-8');
-        res.sendFile(cssPath);
+        res.sendFile(normalizedPath);
       } catch (error) {
         console.error(`[CSS] Error processing ${req.path}:`, error.message);
         next();
@@ -444,6 +452,7 @@ class DevServer {
         
         const html = await renderWithLayout(this.liquid, 'templates/index', context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -453,7 +462,53 @@ class DevServer {
     // Products listing page
     this.app.get('/products', async (req, res, next) => {
       try {
-        const context = await this.buildContext(req, 'products');
+        // Check for category filter in query parameters
+        const categoryFilter = req.query.category;
+        
+        let context = await this.buildContext(req, 'products');
+        
+        // If category filter is present, filter products by category
+        if (categoryFilter) {
+          console.log(`[PRODUCTS PAGE] Filtering by category: ${categoryFilter}`);
+          
+          // Find category by name or handle (case-insensitive)
+          const category = context.categories?.find(c => 
+            (c.name && c.name.toLowerCase() === categoryFilter.toLowerCase()) ||
+            (c.handle && c.handle.toLowerCase() === categoryFilter.toLowerCase())
+          );
+          
+          if (category) {
+            console.log(`[PRODUCTS PAGE] Found category: ${category.name} (ID: ${category.id})`);
+            
+            // Filter products by categoryId
+            const filteredProducts = context.products.filter(p => 
+              p.categoryId === category.id || 
+              String(p.categoryId).toLowerCase() === String(category.id).toLowerCase()
+            );
+            
+            context.products = filteredProducts;
+            console.log(`[PRODUCTS PAGE] Filtered products: ${filteredProducts.length} products in category`);
+            
+            // Update collection context
+            context.collection = context.collection || {};
+            context.collection.title = category.name || 'Products';
+            context.collection.handle = category.handle || categoryFilter;
+            context.collection.description = category.description;
+            context.collection.totalProducts = filteredProducts.length;
+          } else {
+            console.warn(`[PRODUCTS PAGE] Category not found: ${categoryFilter}, showing all products`);
+          }
+        }
+        
+        // Ensure all products have proper URL field if missing
+        context.products = (context.products || []).map(product => {
+          if (!product.url && !product.link) {
+            const handle = product.handle || product.slug || product.id;
+            product.url = `/products/${handle}`;
+            product.link = `/products/${handle}`;
+          }
+          return product;
+        });
         
         // DEBUG: Log context data for /products page
         console.log(`[PRODUCTS PAGE] Context summary:`);
@@ -468,8 +523,30 @@ class DevServer {
         if (!context.products || context.products.length === 0) {
           console.warn('[PRODUCTS PAGE] ⚠️  No products in context, attempting to reload...');
           try {
-            const productsResponse = await this.apiClient.getProducts({ limit: 50, offset: 0 });
+            const queryParams = {};
+            if (categoryFilter) {
+              // Find category and filter by categoryId
+              const category = context.categories?.find(c => 
+                (c.name && c.name.toLowerCase() === categoryFilter.toLowerCase()) ||
+                (c.handle && c.handle.toLowerCase() === categoryFilter.toLowerCase())
+              );
+              if (category) {
+                queryParams.categoryId = category.id;
+              }
+            }
+            const productsResponse = await this.apiClient.getProducts({ limit: 50, offset: 0, ...queryParams });
             context.products = productsResponse.products || productsResponse.data?.products || [];
+            
+            // Ensure URLs are set
+            context.products = context.products.map(product => {
+              if (!product.url && !product.link) {
+                const handle = product.handle || product.slug || product.id;
+                product.url = `/products/${handle}`;
+                product.link = `/products/${handle}`;
+              }
+              return product;
+            });
+            
             console.log(`[PRODUCTS PAGE] ✅ Reloaded ${context.products.length} products`);
           } catch (error) {
             console.error('[PRODUCTS PAGE] ❌ Failed to load products:', error.message);
@@ -479,10 +556,14 @@ class DevServer {
           if (context.products.length > 0) {
             const sampleProduct = context.products[0];
             const hasStock = 'stock' in sampleProduct || 'quantity' in sampleProduct;
+            const hasImage = sampleProduct.thumbnailImage1 || sampleProduct.imageUrl || (sampleProduct.images && sampleProduct.images.length > 0);
+            const hasUrl = sampleProduct.url || sampleProduct.link;
             // Use nullish coalescing to show 0 values correctly
             const stockValue = sampleProduct.stock ?? sampleProduct.quantity ?? 'N/A';
-            console.log(`[PRODUCTS PAGE DEBUG] Sample product - Title: ${sampleProduct.title || sampleProduct.name}, Has stock: ${hasStock}, Stock: ${stockValue}`);
-            console.log(`[PRODUCTS PAGE DEBUG] Product stock details: stock=${sampleProduct.stock}, quantity=${sampleProduct.quantity}, inStock=${sampleProduct.inStock}`);
+            console.log(`[PRODUCTS PAGE DEBUG] Sample product - Title: ${sampleProduct.title || sampleProduct.name}`);
+            console.log(`[PRODUCTS PAGE DEBUG]   - Has stock: ${hasStock}, Stock: ${stockValue}`);
+            console.log(`[PRODUCTS PAGE DEBUG]   - Has image: ${hasImage}, Has URL: ${hasUrl}`);
+            console.log(`[PRODUCTS PAGE DEBUG]   - URL: ${sampleProduct.url || sampleProduct.link || 'missing'}`);
             
             // Check a few more products to see stock distribution
             const stockCounts = context.products.slice(0, 5).map(p => p.stock ?? 0);
@@ -527,13 +608,20 @@ class DevServer {
         if (context.products && context.products.length > 0) {
           context.collection = context.collection || {};
           context.collection.products = context.products;
-          context.collection.title = 'All Products';
-          context.collection.handle = 'all';
-          context.collection.totalProducts = context.products.length;
+          if (!context.collection.title) {
+            context.collection.title = categoryFilter ? `${categoryFilter} Products` : 'All Products';
+          }
+          if (!context.collection.handle) {
+            context.collection.handle = categoryFilter || 'all';
+          }
+          if (!context.collection.totalProducts) {
+            context.collection.totalProducts = context.products.length;
+          }
         }
         
         const html = await renderWithLayout(this.liquid, 'templates/products', context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         // If products template doesn't exist, try collections template as fallback
@@ -542,6 +630,7 @@ class DevServer {
             const context = await this.buildContext(req, 'collection');
             const html = await renderWithLayout(this.liquid, 'templates/collection', context, this.themePath);
             res.setHeader('Content-Type', 'text/html; charset=utf-8');
+            res.setHeader('Cache-Control', 'no-cache');
             res.send(html);
           } catch (fallbackError) {
             next(error);
@@ -555,7 +644,46 @@ class DevServer {
     // Product detail page
     this.app.get('/products/:handle', async (req, res, next) => {
       try {
-        const context = await this.buildContext(req, 'product', { productHandle: req.params.handle });
+        const handle = req.params.handle;
+        console.log(`[PRODUCT PAGE] Looking up product with handle: ${handle}`);
+        
+        const context = await this.buildContext(req, 'product', { productHandle: handle });
+        
+        // Check if product was found
+        if (!context.product) {
+          console.warn(`[PRODUCT PAGE] Product not found with handle: ${handle}`);
+          // Try to find product by ID if handle looks like an ID
+          if (handle.match(/^\d+$/) || handle.startsWith('product-')) {
+            const productId = handle.replace(/^product-/, '');
+            console.log(`[PRODUCT PAGE] Trying to find product by ID: ${productId}`);
+            const allProducts = context.products || [];
+            const productById = allProducts.find(p => 
+              String(p.id) === productId || 
+              String(p.id) === handle ||
+              (p.handle && p.handle.includes(productId))
+            );
+            if (productById) {
+              context.product = productById;
+              console.log(`[PRODUCT PAGE] Found product by ID: ${productById.title || productById.name}`);
+            }
+          }
+          
+          // If still not found, return 404
+          if (!context.product) {
+            return res.status(404).send(`
+              <!DOCTYPE html>
+              <html>
+              <head><title>Product Not Found</title></head>
+              <body>
+                <h1>Product Not Found</h1>
+                <p>Product with handle "${handle}" was not found.</p>
+                <p><a href="/products">Back to Products</a></p>
+              </body>
+              </html>
+            `);
+          }
+        }
+        
         // Try multiple template names: product-detail, product, product-page
         let html;
         const templateOptions = ['templates/product-detail', 'templates/product', 'templates/product-page'];
@@ -573,8 +701,10 @@ class DevServer {
           throw new Error(`Product template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
+        console.error(`[PRODUCT PAGE] Error rendering product page:`, error);
         next(error);
       }
     });
@@ -600,6 +730,7 @@ class DevServer {
           throw new Error(`Product template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -626,6 +757,7 @@ class DevServer {
           throw new Error(`Product template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -652,6 +784,7 @@ class DevServer {
           }
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -670,6 +803,39 @@ class DevServer {
         if (category) {
           context.category = category;
           context.collection = category;
+          
+          // Filter products by this category
+          const filteredProducts = (context.products || []).filter(p => 
+            p.categoryId === category.id || 
+            String(p.categoryId).toLowerCase() === String(category.id).toLowerCase()
+          );
+          
+          // Ensure all products have proper URL field if missing
+          filteredProducts.forEach(product => {
+            if (!product.url && !product.link) {
+              const handle = product.handle || product.slug || product.id;
+              product.url = `/products/${handle}`;
+              product.link = `/products/${handle}`;
+            }
+          });
+          
+          context.collection.products = filteredProducts;
+          context.collection.totalProducts = filteredProducts.length;
+          context.products = filteredProducts; // Also set in products array for consistency
+          
+          console.log(`[COLLECTION PAGE] Category: ${category.name}, Products: ${filteredProducts.length}`);
+        } else {
+          // No category found, use all products
+          context.products = (context.products || []).map(product => {
+            if (!product.url && !product.link) {
+              const handle = product.handle || product.slug || product.id;
+              product.url = `/products/${handle}`;
+              product.link = `/products/${handle}`;
+            }
+            return product;
+          });
+          context.collection = context.collection || {};
+          context.collection.products = context.products;
         }
         
         let html;
@@ -688,6 +854,7 @@ class DevServer {
           throw new Error(`Category/Collection template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -714,6 +881,7 @@ class DevServer {
           throw new Error(`Categories template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -730,6 +898,39 @@ class DevServer {
         if (category) {
           context.category = category;
           context.collection = category;
+          
+          // Filter products by this category
+          const filteredProducts = (context.products || []).filter(p => 
+            p.categoryId === category.id || 
+            String(p.categoryId).toLowerCase() === String(category.id).toLowerCase()
+          );
+          
+          // Ensure all products have proper URL field if missing
+          filteredProducts.forEach(product => {
+            if (!product.url && !product.link) {
+              const handle = product.handle || product.slug || product.id;
+              product.url = `/products/${handle}`;
+              product.link = `/products/${handle}`;
+            }
+          });
+          
+          context.collection.products = filteredProducts;
+          context.collection.totalProducts = filteredProducts.length;
+          context.products = filteredProducts; // Also set in products array for consistency
+          
+          console.log(`[CATEGORY PAGE] Category: ${category.name}, Products: ${filteredProducts.length}`);
+        } else {
+          // No category found, use all products
+          context.products = (context.products || []).map(product => {
+            if (!product.url && !product.link) {
+              const handle = product.handle || product.slug || product.id;
+              product.url = `/products/${handle}`;
+              product.link = `/products/${handle}`;
+            }
+            return product;
+          });
+          context.collection = context.collection || {};
+          context.collection.products = context.products;
         }
         
         let html;
@@ -748,6 +949,7 @@ class DevServer {
           throw new Error(`Category template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -775,6 +977,7 @@ class DevServer {
           html = this.createSimpleBrandsPage(context);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -813,6 +1016,7 @@ class DevServer {
           html = this.createSimpleBrandPage(context, brand);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -825,6 +1029,7 @@ class DevServer {
         const context = await this.buildContext(req, 'cart');
         const html = await renderWithLayout(this.liquid, 'templates/cart', context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -837,6 +1042,7 @@ class DevServer {
         const context = await this.buildContext(req, 'search', { query: req.query.q });
         const html = await renderWithLayout(this.liquid, 'templates/search', context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -890,12 +1096,14 @@ class DevServer {
         try {
           const html = await renderWithLayout(this.liquid, 'templates/page', context, this.themePath);
           res.setHeader('Content-Type', 'text/html; charset=utf-8');
+          res.setHeader('Cache-Control', 'no-cache');
           res.send(html);
         } catch (templateError) {
           // If no page template, render raw HTML content within layout
           console.log(`[PAGE] No page template found, rendering raw HTML for ${req.params.handle}`);
           const html = this.renderLandingPage(context);
           res.setHeader('Content-Type', 'text/html; charset=utf-8');
+          res.setHeader('Cache-Control', 'no-cache');
           res.send(html);
         }
       } catch (error) {
@@ -934,6 +1142,7 @@ class DevServer {
         
         const html = await renderWithLayout(this.liquid, 'templates/page', context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -950,6 +1159,7 @@ class DevServer {
         
         const html = this.generateDevDashboard({ templates, sections, widgets, snippets });
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -974,6 +1184,7 @@ class DevServer {
           backUrl: '/dev'
         });
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -1033,6 +1244,7 @@ class DevServer {
           backUrl: '/dev'
         });
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -1081,6 +1293,7 @@ class DevServer {
           backUrl: '/dev'
         });
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -1118,12 +1331,122 @@ class DevServer {
         const context = await this.buildContext(req, pageType);
         const html = await renderWithLayout(this.liquid, `templates/${templateName}`, context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
       }
     });
 
+    // Catch-all route for category/collection handles at root level (e.g., /toys-and-games)
+    // This handles links from widgets that use category handles directly
+    this.app.get('/:handle', async (req, res, next) => {
+      try {
+        const handle = req.params.handle;
+        
+        // Skip if it's a known route path or static file extension
+        const knownPaths = ['assets', 'images', 'api', 'dev', 'favicon.ico', 'products', 'collections', 'categories', 'brands', 'cart', 'search', 'page', 'pages'];
+        const staticExtensions = ['.css', '.js', '.jpg', '.jpeg', '.png', '.gif', '.svg', '.webp', '.woff', '.woff2', '.ttf', '.eot', '.ico'];
+        const hasStaticExtension = staticExtensions.some(ext => handle.toLowerCase().endsWith(ext));
+        
+        if (knownPaths.includes(handle) || hasStaticExtension) {
+          return next();
+        }
+        
+        // Build context to get categories and products
+        const context = await this.buildContext(req, 'collection', { collectionHandle: handle });
+        
+        // Try to find category by handle (case-insensitive)
+        const category = context.categories?.find(c => 
+          (c.handle && c.handle.toLowerCase() === handle.toLowerCase()) ||
+          (c.name && c.name.toLowerCase().replace(/\s+/g, '-') === handle.toLowerCase())
+        );
+        
+        if (category) {
+          // Found a category - render collection page
+          context.category = category;
+          context.collection = category;
+          
+          // Filter products by this category
+          const filteredProducts = (context.products || []).filter(p => 
+            p.categoryId === category.id || 
+            String(p.categoryId).toLowerCase() === String(category.id).toLowerCase()
+          );
+          
+          // Ensure all products have proper URL field if missing
+          filteredProducts.forEach(product => {
+            if (!product.url && !product.link) {
+              const productHandle = product.handle || product.slug || product.id;
+              product.url = `/products/${productHandle}`;
+              product.link = `/products/${productHandle}`;
+            }
+          });
+          
+          context.collection.products = filteredProducts;
+          context.collection.totalProducts = filteredProducts.length;
+          context.products = filteredProducts; // Also set in products array for consistency
+          
+          console.log(`[ROOT COLLECTION] Category: ${category.name}, Products: ${filteredProducts.length}`);
+          
+          // Try to render collection template
+          let html;
+          const templateOptions = ['templates/categories', 'templates/category', 'templates/collection', 'templates/products'];
+          for (const template of templateOptions) {
+            try {
+              html = await renderWithLayout(this.liquid, template, context, this.themePath);
+              break;
+            } catch (error) {
+              if (!error.message?.includes('Template not found')) {
+                throw error;
+              }
+            }
+          }
+          
+          if (html) {
+            res.setHeader('Content-Type', 'text/html; charset=utf-8');
+            res.setHeader('Cache-Control', 'no-cache');
+            return res.send(html);
+          }
+        }
+        
+        // Not a category - check if it's a product handle
+        const product = context.products?.find(p => 
+          (p.handle && p.handle.toLowerCase() === handle.toLowerCase()) ||
+          (p.slug && p.slug.toLowerCase() === handle.toLowerCase())
+        );
+        
+        if (product) {
+          // Found a product - render product detail page
+          const productContext = await this.buildContext(req, 'product', { productHandle: product.handle || product.slug || handle });
+          
+          let html;
+          const templateOptions = ['templates/product-detail', 'templates/product', 'templates/product-page'];
+          for (const template of templateOptions) {
+            try {
+              html = await renderWithLayout(this.liquid, template, productContext, this.themePath);
+              break;
+            } catch (error) {
+              if (!error.message?.includes('Template not found')) {
+                throw error;
+              }
+            }
+          }
+          
+          if (html) {
+            res.setHeader('Content-Type', 'text/html; charset=utf-8');
+            res.setHeader('Cache-Control', 'no-cache');
+            return res.send(html);
+          }
+        }
+        
+        // Not found - pass to next middleware (will eventually 404)
+        next();
+      } catch (error) {
+        // If there's an error, pass to next middleware
+        next(error);
+      }
+    });
+
     // Favicon handler
     this.app.get('/favicon.ico', (req, res) => {
       res.status(204).end(); // No Content
@@ -1267,10 +1590,13 @@ class DevServer {
 
     try {
       // Load settings from settings_data.json
+      // Extract 'current' section to match webstore behavior
       const settingsPath = path.join(this.themePath, 'config', 'settings_data.json');
       if (fs.existsSync(settingsPath)) {
         const settingsData = fs.readFileSync(settingsPath, 'utf8');
-        context.settings = JSON.parse(settingsData);
+        const parsedData = JSON.parse(settingsData);
+        // Extract 'current' section like loadThemeSettings() does
+        context.settings = parsedData.current || parsedData.presets?.default || {};
       }
     } catch (error) {
       console.warn('[CONTEXT] Failed to load settings:', error.message);
@@ -1350,6 +1676,50 @@ class DevServer {
           // Load products
           const productsResponse = await this.apiClient.getProducts({ limit: 50, offset: 0 });
           context.products = productsResponse.products || productsResponse.data?.products || [];
+          
+          // Ensure all products have proper URL, images, and stock fields
+          context.products = context.products.map((product, index) => {
+            // Ensure URL field exists
+            if (!product.url && !product.link) {
+              const handle = product.handle || product.slug || product.id;
+              product.url = `/products/${handle}`;
+              product.link = `/products/${handle}`;
+              
+              // Debug first few products to verify URL generation
+              if (index < 3) {
+                console.log(`[CONTEXT] Product ${index + 1} URL: ${product.url} (handle: ${product.handle || 'none'}, slug: ${product.slug || 'none'}, id: ${product.id || 'none'})`);
+              }
+            }
+            // Ensure stock fields exist (they should from mock-data, but double-check)
+            if (product.stock === undefined && product.stockQuantity === undefined) {
+              // Calculate from variants if available
+              if (product.variants && product.variants.length > 0) {
+                const totalStock = product.variants.reduce((sum, v) => sum + (v.stock || 0), 0);
+                product.stock = totalStock;
+                product.stockQuantity = totalStock;
+                product.inStock = totalStock > 0;
+                product.available = totalStock > 0;
+              } else {
+                // Default to in stock if no stock info
+                product.stock = 10;
+                product.stockQuantity = 10;
+                product.inStock = true;
+                product.available = true;
+              }
+            }
+            // Ensure image fields exist (they should from mock-data, but double-check)
+            if (!product.thumbnailImage1 && !product.imageUrl && (!product.images || product.images.length === 0)) {
+              // Fallback to picsum placeholder
+              const imageId = product.id ? String(product.id).replace(/\D/g, '') || '1' : '1';
+              product.imageUrl = `https://picsum.photos/seed/${imageId}/800/800`;
+              product.thumbnailImage1 = {
+                url: product.imageUrl,
+                altText: product.title || product.name || 'Product image'
+              };
+            }
+            return product;
+          });
+          
           console.log(`[CONTEXT] Loaded ${context.products.length} products`);
           
           // DEBUG: Verify products have quantity/stock field
@@ -1446,40 +1816,57 @@ class DevServer {
         if (pageType === 'product' && extra.productHandle) {
           // Load single product data
           try {
+            const searchHandle = extra.productHandle.toLowerCase().trim();
+            console.log(`[CONTEXT] Searching for product with handle: ${searchHandle}`);
+            
             // First try to find in already loaded products
-            let product = context.products?.find(p => 
-              (p.handle && p.handle.toLowerCase() === extra.productHandle.toLowerCase()) || 
-              (p.slug && p.slug.toLowerCase() === extra.productHandle.toLowerCase()) ||
-              (p.id && String(p.id).toLowerCase() === extra.productHandle.toLowerCase())
-            );
+            // Check multiple fields: handle, slug, id, and also check if handle contains the ID
+            let product = context.products?.find(p => {
+              const pHandle = (p.handle || '').toLowerCase().trim();
+              const pSlug = (p.slug || '').toLowerCase().trim();
+              const pId = String(p.id || '').toLowerCase().trim();
+              const pIdStr = String(p.id || '');
+              
+              return pHandle === searchHandle || 
+                     pSlug === searchHandle ||
+                     pId === searchHandle ||
+                     (searchHandle.startsWith('product-') && pId === searchHandle.replace('product-', '')) ||
+                     (pHandle && searchHandle.includes(pIdStr)) ||
+                     (pSlug && searchHandle.includes(pIdStr));
+            });
             
             // If not found, try loading more products
             if (!product) {
+              console.log(`[CONTEXT] Product not found in initial list, loading more products...`);
               const productsResponse = await this.apiClient.getProducts({ limit: 100 });
               const allProducts = productsResponse.products || productsResponse.data?.products || [];
-              product = allProducts.find(p => 
-                (p.handle && p.handle.toLowerCase() === extra.productHandle.toLowerCase()) || 
-                (p.slug && p.slug.toLowerCase() === extra.productHandle.toLowerCase()) ||
-                (p.id && String(p.id).toLowerCase() === extra.productHandle.toLowerCase())
-              );
+              product = allProducts.find(p => {
+                const pHandle = (p.handle || '').toLowerCase().trim();
+                const pSlug = (p.slug || '').toLowerCase().trim();
+                const pId = String(p.id || '').toLowerCase().trim();
+                const pIdStr = String(p.id || '');
+                
+                return pHandle === searchHandle || 
+                       pSlug === searchHandle ||
+                       pId === searchHandle ||
+                       (searchHandle.startsWith('product-') && pId === searchHandle.replace('product-', '')) ||
+                       (pHandle && searchHandle.includes(pIdStr)) ||
+                       (pSlug && searchHandle.includes(pIdStr));
+              });
             }
             
             if (product) {
               context.product = product;
-              console.log(`[CONTEXT] Found product: ${product.title || product.name} (handle: ${product.handle || product.slug})`);
+              console.log(`[CONTEXT] ✅ Found product: ${product.title || product.name} (handle: ${product.handle || product.slug || product.id})`);
             } else {
-              console.warn(`[CONTEXT] Product not found with handle/slug/id: ${extra.productHandle}`);
-              // Fallback to first product if handle not found
-              if (context.products && context.products.length > 0) {
-                context.product = context.products[0];
-                console.log(`[CONTEXT] Using fallback product: ${context.product.title || context.product.name}`);
-              }
+              console.warn(`[CONTEXT] ⚠️  Product not found with handle/slug/id: ${extra.productHandle}`);
+              console.warn(`[CONTEXT] Available product handles: ${(context.products || []).slice(0, 5).map(p => p.handle || p.slug || p.id).join(', ')}`);
+              // Don't use fallback - let the route handler deal with 404
             }
           } catch (error) {
-            console.warn('[CONTEXT] Failed to load product:', error.message);
-            if (context.products && context.products.length > 0) {
-              context.product = context.products[0];
-            }
+            console.error('[CONTEXT] ❌ Failed to load product:', error.message);
+            console.error('[CONTEXT] Error stack:', error.stack);
+            // Don't use fallback on error - let route handle it
           }
         }
       } catch (error) {
@@ -2586,14 +2973,36 @@ class DevServer {
    */
   async stop() {
     return new Promise((resolve) => {
+      let resolved = false;
+      const safeResolve = () => {
+        if (!resolved) {
+          resolved = true;
+          console.log(chalk.yellow('\n👋 Server stopped'));
+          resolve();
+        }
+      };
+      
+      // Increase max listeners to prevent warning if multiple shutdown attempts
+      if (this.server && this.server.setMaxListeners) {
+        this.server.setMaxListeners(20);
+      }
+      
       // Stop file watcher
       if (this.fileWatcher && typeof this.fileWatcher.close === 'function') {
-        this.fileWatcher.close();
+        try {
+          this.fileWatcher.close();
+        } catch (error) {
+          // Ignore errors when closing watcher
+        }
       }
       
       // Close Socket.IO
       if (this.io && typeof this.io.close === 'function') {
-        this.io.close();
+        try {
+          this.io.close();
+        } catch (error) {
+          // Ignore errors when closing Socket.IO
+        }
       }
       
       // Stop mock API
@@ -2601,14 +3010,37 @@ class DevServer {
         this.mockApi.stop().catch(() => {});
       }
       
-      // Close HTTP server
+      // Close HTTP server - check if it's actually listening/running
       if (this.server) {
-        this.server.close(() => {
-          console.log(chalk.yellow('\n👋 Server stopped'));
-          resolve();
+        // Check if server is listening before trying to close
+        const isListening = this.server.listening || false;
+        
+        if (!isListening) {
+          // Server is already closed/not running
+          safeResolve();
+          return;
+        }
+        
+        // Remove all existing listeners to prevent memory leak warning
+        this.server.removeAllListeners('close');
+        
+        // Close the server - use callback instead of event listener to avoid duplicate calls
+        this.server.close((err) => {
+          if (err) {
+            // Ignore ERR_SERVER_NOT_RUNNING errors as they're harmless
+            if (err.code !== 'ERR_SERVER_NOT_RUNNING') {
+              console.error(chalk.red('Error closing server:'), err.message);
+            }
+          }
+          safeResolve();
         });
+        
+        // Fallback timeout in case close callback doesn't fire
+        setTimeout(() => {
+          safeResolve();
+        }, 2000);
       } else {
-        resolve();
+        safeResolve();
       }
     });
   }

package/lib/lib/mock-data.js

@@ -65,6 +65,25 @@ function generateMockProducts(count = 20) {
   console.log(`[MOCK DATA] Generating ${count} mock products with variations and stock...`);
   const products = [];
   
+  // Category mapping - map category names to category IDs (matching generateMockCategories order)
+  const categoryMap = {
+    'Electronics': 'category-1',
+    'Clothing': 'category-2',
+    'Accessories': 'category-3',
+    'Home & Garden': 'category-4',
+    'Home': 'category-4', // Alias for Home & Garden
+    'Sports & Fitness': 'category-5',
+    'Sports': 'category-5', // Alias for Sports & Fitness
+    'Books & Media': 'category-6',
+    'Toys & Games': 'category-7',
+    'Beauty & Health': 'category-8',
+    'Automotive': 'category-9',
+    'Food & Beverages': 'category-10',
+    'Furniture': 'category-4', // Map Furniture to Home & Garden
+    'Office': 'category-6', // Map Office to Books & Media (or could be separate)
+    'Footwear': 'category-2' // Map Footwear to Clothing
+  };
+  
   // Product data with images from picsum.photos (reliable placeholder service)
   const productData = [
     { name: 'Wireless Headphones', category: 'Electronics', imageId: 1 },
@@ -115,7 +134,13 @@ function generateMockProducts(count = 20) {
     const productId = `product-${i + 1}`;
     const basePrice = Math.floor(Math.random() * 50000) + 1000; // $10 to $500 (in cents)
     const comparePrice = basePrice * 1.5;
-    const productName = productNames[i % productNames.length];
+    const productTemplate = productData[i % productData.length];
+    const productName = productTemplate.name;
+    const productCategory = productTemplate.category;
+    const productImageId = productTemplate.imageId;
+    
+    // Get categoryId from category name using categoryMap
+    const categoryId = categoryMap[productCategory] || 'category-1'; // Default to Electronics if not found
     
     // Determine stock quantity - mix of low stock, high stock, and out of stock
     const stockType = i % 5;
@@ -278,18 +303,19 @@ function generateMockProducts(count = 20) {
       stock: totalStock,
       stockQuantity: totalStock, // Alternative property for stock
       sku: `SKU-${i + 1}`,
-      categoryId: `category-${(i % 10) + 1}`,
+      categoryId: categoryId, // Use mapped categoryId based on product category
+      category: productCategory, // Also include category name for reference
       brandId: `brand-${(i % 8) + 1}`,
       // Primary thumbnail for product cards
       thumbnailImage1: {
-        url: `https://picsum.photos/seed/${productData[i % productData.length].imageId}/800/800`,
+        url: `https://picsum.photos/seed/${productImageId}/800/800`,
         altText: productName
       },
-      imageUrl: `https://picsum.photos/seed/${productData[i % productData.length].imageId}/800/800`,
+      imageUrl: `https://picsum.photos/seed/${productImageId}/800/800`,
       images: [
         {
           id: `img-${i + 1}-1`,
-          url: `https://picsum.photos/seed/${productData[i % productData.length].imageId}/800/800`,
+          url: `https://picsum.photos/seed/${productImageId}/800/800`,
           alt: productName,
           altText: productName,
           width: 800,
@@ -297,7 +323,7 @@ function generateMockProducts(count = 20) {
         },
         {
           id: `img-${i + 1}-2`,
-          url: `https://picsum.photos/seed/${productData[i % productData.length].imageId + 100}/800/800`,
+          url: `https://picsum.photos/seed/${productImageId + 100}/800/800`,
           alt: `${productName} - View 2`,
           altText: `${productName} - View 2`,
           width: 800,
@@ -305,7 +331,7 @@ function generateMockProducts(count = 20) {
         },
         {
           id: `img-${i + 1}-3`,
-          url: `https://picsum.photos/seed/${productData[i % productData.length].imageId + 200}/800/800`,
+          url: `https://picsum.photos/seed/${productImageId + 200}/800/800`,
           alt: `${productName} - View 3`,
           altText: `${productName} - View 3`,
           width: 800,
@@ -342,10 +368,22 @@ function generateMockProducts(count = 20) {
   const productsWithVariations = products.filter(p => (p.variants?.length || 0) > 1).length;
   const productsWithOptions = products.filter(p => (p.options?.length || 0) > 0).length;
   const outOfStock = products.filter(p => !p.inStock || (p.stock || 0) === 0).length;
+  
+  // Log category distribution
+  const categoryDistribution = {};
+  products.forEach(p => {
+    const cat = p.categoryId || 'unknown';
+    categoryDistribution[cat] = (categoryDistribution[cat] || 0) + 1;
+  });
+  const categorySummary = Object.entries(categoryDistribution)
+    .map(([cat, count]) => `${cat}: ${count}`)
+    .join(', ');
+  
   console.log(`[MOCK DATA] ✅ Generated ${products.length} products:`);
   console.log(`  - With variations: ${productsWithVariations}`);
   console.log(`  - With options: ${productsWithOptions}`);
   console.log(`  - Out of stock: ${outOfStock}`);
+  console.log(`  - Category distribution: ${categorySummary}`);
   
   return products;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@o2vend/theme-cli",
-  "version": "1.0.32",
+  "version": "1.0.33",
   "description": "O2VEND Theme Development CLI - Standalone tool for local theme development",
   "bin": {
     "o2vend": "./bin/o2vend"