feat(ui): enhance component share UX and add new interactive simulations

apps/web/scripts/generate-thumbnail.ts

@@ -3,9 +3,9 @@ import * as path from 'node:path';
 import * as fs from 'node:fs/promises';
 
 async function run() {
-    const apiKey = process.env.REPLICATE_API_KEY;
+    const apiKey = process.env.REPLICATE_API_TOKEN || process.env.REPLICATE_API_KEY;
     if (!apiKey) {
-        console.error("❌ Missing REPLICATE_API_KEY in environment.");
+        console.error("❌ Missing REPLICATE_API_TOKEN in environment.");
         process.exit(1);
     }
 
@@ -34,9 +34,35 @@ async function run() {
     console.log(`Generating abstract thumbnail for topic: "${topic}"`);
 
     const generator = new ThumbnailGenerator({ replicateApiKey: apiKey });
-    const outputPath = path.join(process.cwd(), 'public', 'blog', filename);
+    const isRoot = process.cwd().endsWith('mintel.me');
+    const baseDir = isRoot ? path.join(process.cwd(), 'apps', 'web') : process.cwd();
 
-    await generator.generateImage(topic, outputPath);
+    const outputPath = path.join(baseDir, 'public', 'blog', filename);
+
+    // Check if thumbnail already exists to avoid redundant generation
+    try {
+        await fs.access(outputPath);
+        console.log(`⏭️ Thumbnail already exists, skipping: ${filename}`);
+        return;
+    } catch {
+        // File does not exist, proceed with generation
+    }
+
+    const inspirationPath = path.join(baseDir, 'public', 'blog', 'inspiration.png');
+    let hasInspiration = false;
+    try {
+        await fs.access(inspirationPath);
+        hasInspiration = true;
+    } catch {
+        hasInspiration = false;
+    }
+
+    const customPrompt = `Extremely clean, flat, abstract geometric illustration. Use the provided image prompt ONLY as a STRICT style, color, and texture reference. Do not copy the image content, just the aesthetic. Characteristics: Flat vector design, 2D only (no 3D), tech/startup/agency aesthetics, highly professional, abstract data representations, extensive use of whitespace. No text, no chaotic lines, no humans.`;
+
+    await generator.generateImage(topic, outputPath, {
+        systemPrompt: customPrompt,
+        imagePrompt: hasInspiration ? inspirationPath : undefined,
+    });
 }
 
 run().catch((e) => {

apps/web/scripts/verify-embeds.ts

@@ -4,7 +4,7 @@ import puppeteer from 'puppeteer';
     try {
         console.log("Starting Chrome...");
         const browser = await puppeteer.launch({
-            headless: 'new',
+            headless: true,
             args: ['--no-sandbox', '--disable-setuid-sandbox']
         });