update

_layouts/embed-preview.html

@@ -54,6 +54,38 @@
                 </button>
             </div>
             
+            <!-- Diff View (if enabled) -->
+            <div id="diff-view" class="hidden mb-2">
+                <div class="bg-dynamic-muted border border-dynamic-border rounded-lg p-2">
+                    <div class="flex items-center justify-between mb-1.5">
+                        <div class="flex items-center gap-1.5">
+                            <svg class="w-3 h-3 text-dynamic-primary flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7.414A2 2 0 0017.414 6L14 2.586A2 2 0 0012.586 2H4zm2 4a1 1 0 011-1h4a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7zm-1 5a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule="evenodd"/>
+                            </svg>
+                            <span id="diff-filename" class="text-xs font-medium text-dynamic-foreground truncate"></span>
+                        </div>
+                        <div class="flex rounded-md overflow-hidden">
+                            <button id="accept-diff" class="px-2 py-0.5 bg-green-500 hover:bg-green-600 text-white text-[10px] font-medium transition-colors flex items-center gap-0.5">
+                                <svg class="w-2.5 h-2.5" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                                </svg>
+                                <span class="hidden sm:inline">Accept</span>
+                            </button>
+                            <button id="reject-diff" class="px-2 py-0.5 bg-red-500 hover:bg-red-600 text-white text-[10px] font-medium transition-colors flex items-center gap-0.5">
+                                <svg class="w-2.5 h-2.5" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                                </svg>
+                                <span class="hidden sm:inline">Reject</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="space-y-0.5">
+                        <div id="diff-old-content" class="bg-red-50/70 dark:bg-red-950/20 p-1 rounded text-[10px] font-mono whitespace-pre-wrap text-red-700 dark:text-red-400 overflow-x-auto border border-red-200/50 dark:border-red-900/30 max-h-20 overflow-y-auto custom-scrollbar"></div>
+                        <div id="diff-new-content" class="bg-green-50/70 dark:bg-green-950/20 p-1 rounded text-[10px] font-mono whitespace-pre-wrap text-green-700 dark:text-green-400 overflow-x-auto border border-green-200/50 dark:border-green-900/30 max-h-20 overflow-y-auto custom-scrollbar"></div>
+                    </div>
+                </div>
+            </div>
+            
             <!-- Main Prompt Interface - Full Height -->
             <div class="flex-1 flex flex-col min-h-0">
                 <div id="prompt-container" class="flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-3 relative focus-within:border-dynamic-primary transition-colors flex flex-col min-h-0">

_layouts/embed.html

@@ -50,6 +50,22 @@
         <div class="designer-panel w-full lg:w-80 flex flex-col h-auto lg:h-full overflow-hidden order-2 lg:order-1 flex-shrink-0">
             <div class="flex-1 overflow-y-auto custom-scrollbar">
                 <div class="p-4 lg:p-6 lg:pt-0 space-y-4">
+                    <!-- Example Selector - Separated at top -->
+                    <div class="pb-4 border-b border-dynamic-border">
+                        <div class="space-y-2">
+                            <label class="text-sm font-medium text-dynamic-muted-foreground">Load Example</label>
+                            <select id="example-select" class="w-full p-3 lg:p-2 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm focus-ring touch-target">
+                                <option value="">Choose an example...</option>
+                                <option value="vibe-coding">Vibe coding (no diff)</option>
+                                <option value="vibe-coding-diff">Vibe coding with diff</option>
+                                <option value="chatgpt">ChatGPT example</option>
+                                <option value="claude">Claude example</option>
+                                <option value="image-analysis">Image analysis</option>
+                                <option value="api-design">API design</option>
+                            </select>
+                        </div>
+                    </div>
+                    
                     <!-- Context -->
                     <div class="space-y-2">
                         <label class="text-sm font-medium text-dynamic-muted-foreground">Context</label>
@@ -65,14 +81,6 @@
                                  class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar touch-target"
                                  rows="8"
                                  placeholder="Enter your prompt..."></textarea>
-                        <div class="flex gap-3">
-                            <button type="button" id="vibe-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity touch-target py-1">
-                                Vibe coding example →
-                            </button>
-                            <button type="button" id="chat-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity touch-target py-1">
-                                Chat example →
-                            </button>
-                        </div>
                     </div>
                     
                     <!-- Model & Mode -->
@@ -250,6 +258,42 @@
                             Add * at the end of a filename to highlight it (e.g., main.js*)
                         </p>
                     </div>
+                    
+                    <!-- Diff View -->
+                    <div class="space-y-2">
+                        <div class="flex items-center justify-between">
+                            <label class="text-sm font-medium text-dynamic-muted-foreground">Diff View</label>
+                            <label class="flex items-center space-x-1.5 text-xs">
+                                <input type="checkbox" id="designer-show-diff" class="rounded border-dynamic-border w-3.5 h-3.5">
+                                <span class="text-dynamic-muted-foreground">Show diff</span>
+                            </label>
+                        </div>
+                        <div id="diff-fields" class="space-y-3 hidden">
+                            <div>
+                                <label class="text-xs text-dynamic-muted-foreground">File Name</label>
+                                <input type="text" id="designer-diff-filename" 
+                                       class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target font-mono"
+                                       placeholder="components/ProductList.tsx">
+                            </div>
+                            <div>
+                                <label class="text-xs text-dynamic-muted-foreground">Old Text</label>
+                                <textarea id="designer-diff-old" 
+                                         class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar touch-target font-mono"
+                                         rows="4"
+                                         placeholder="// Original code..."></textarea>
+                            </div>
+                            <div>
+                                <label class="text-xs text-dynamic-muted-foreground">New Text</label>
+                                <textarea id="designer-diff-new" 
+                                         class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar touch-target font-mono"
+                                         rows="4"
+                                         placeholder="// Updated code..."></textarea>
+                            </div>
+                            <p class="text-[10px] text-dynamic-muted-foreground mt-2 opacity-70">
+                                Note: Large diffs may exceed URL length limits. Keep diff text short for sharing.
+                            </p>
+                        </div>
+                    </div>
                 </div>
             </div>
             

embed-preview-script.js

@@ -26,7 +26,11 @@ class EmbedPreview {
             lightColor: this.params.lightColor || '#3b82f6',
             darkColor: this.params.darkColor || '#60a5fa',
             themeMode: this.params.themeMode || 'auto',
-            filetree: this.params.filetree ? decodeURIComponent(this.params.filetree).split('\n').filter(f => f.trim()) : []
+            filetree: this.params.filetree ? decodeURIComponent(this.params.filetree).split('\n').filter(f => f.trim()) : [],
+            showDiff: this.params.showDiff === 'true',
+            diffFilename: this.params.diffFilename || '',
+            diffOldText: this.params.diffOldText ? decodeURIComponent(this.params.diffOldText) : '',
+            diffNewText: this.params.diffNewText ? decodeURIComponent(this.params.diffNewText) : ''
         };
     }
     
@@ -187,6 +191,7 @@ class EmbedPreview {
     }
     
     render() {
+        this.renderDiffView();
         this.renderContextPills();
         this.renderPromptText();
         this.renderSettingsPills();
@@ -373,6 +378,57 @@ class EmbedPreview {
         return pill;
     }
     
+    renderDiffView() {
+        const diffView = document.getElementById('diff-view');
+        if (!diffView) return;
+        
+        if (this.config.showDiff && (this.config.diffOldText || this.config.diffNewText)) {
+            diffView.classList.remove('hidden');
+            
+            // Set filename
+            const filenameElement = document.getElementById('diff-filename');
+            if (filenameElement) {
+                filenameElement.textContent = this.config.diffFilename || 'untitled';
+            }
+            
+            // Set diff content
+            const oldContent = document.getElementById('diff-old-content');
+            const newContent = document.getElementById('diff-new-content');
+            
+            if (oldContent) {
+                oldContent.textContent = this.config.diffOldText || '(empty)';
+                // Update colors based on dark mode
+                if (this.isDarkMode) {
+                    oldContent.style.backgroundColor = 'rgba(127, 29, 29, 0.15)';
+                    oldContent.style.color = '#fca5a5';
+                    oldContent.style.borderColor = 'rgba(127, 29, 29, 0.3)';
+                } else {
+                    oldContent.style.backgroundColor = 'rgba(254, 226, 226, 0.7)';
+                    oldContent.style.color = '#b91c1c';
+                    oldContent.style.borderColor = 'rgba(252, 165, 165, 0.5)';
+                }
+            }
+            if (newContent) {
+                newContent.textContent = this.config.diffNewText || '(empty)';
+                // Update colors based on dark mode
+                if (this.isDarkMode) {
+                    newContent.style.backgroundColor = 'rgba(20, 83, 45, 0.15)';
+                    newContent.style.color = '#86efac';
+                    newContent.style.borderColor = 'rgba(20, 83, 45, 0.3)';
+                } else {
+                    newContent.style.backgroundColor = 'rgba(220, 252, 231, 0.7)';
+                    newContent.style.color = '#15803d';
+                    newContent.style.borderColor = 'rgba(134, 239, 172, 0.5)';
+                }
+            }
+            
+            // Buttons are dummy - no click handlers needed
+            // They're just for visual representation
+        } else {
+            diffView.classList.add('hidden');
+        }
+    }
+    
     highlightMentions(text) {
         return text.replaceAll(/@(https?:\/\/[^\s]+.*?|\w+\.\w+|\w+)/g, '<span class="mention">@$1</span>');
     }

embed-script.js

@@ -34,7 +34,11 @@ class EmbedDesigner {
                 height: this.params.height || savedConfig.height || '400',
                 themeMode: this.params.themeMode || savedConfig.themeMode || 'auto',
                 filetree: this.params.filetree ? decodeURIComponent(this.params.filetree).split('\n').filter(f => f.trim()) : (savedConfig.filetree || []),
-                showFiletree: savedConfig.showFiletree !== undefined ? savedConfig.showFiletree : true
+                showFiletree: savedConfig.showFiletree !== undefined ? savedConfig.showFiletree : true,
+                showDiff: this.params.showDiff === 'true' || savedConfig.showDiff || false,
+                diffFilename: this.params.diffFilename || savedConfig.diffFilename || '',
+                diffOldText: this.params.diffOldText ? decodeURIComponent(this.params.diffOldText) : (savedConfig.diffOldText || ''),
+                diffNewText: this.params.diffNewText ? decodeURIComponent(this.params.diffNewText) : (savedConfig.diffNewText || '')
             };
         }
         
@@ -57,7 +61,11 @@ class EmbedDesigner {
             height: '400',
             themeMode: 'auto',
             filetree: [],
-            showFiletree: true
+            showFiletree: true,
+            showDiff: false,
+            diffFilename: '',
+            diffOldText: '',
+            diffNewText: ''
         };
     }
     
@@ -81,7 +89,11 @@ class EmbedDesigner {
                         height: config.height || '400',
                         themeMode: config.themeMode || 'auto',
                         filetree: config.filetree || [],
-                        showFiletree: config.showFiletree !== undefined ? config.showFiletree : true
+                        showFiletree: config.showFiletree !== undefined ? config.showFiletree : true,
+                        showDiff: config.showDiff || false,
+                        diffFilename: config.diffFilename || '',
+                        diffOldText: config.diffOldText || '',
+                        diffNewText: config.diffNewText || ''
                     };
                 }
             }
@@ -177,6 +189,25 @@ class EmbedDesigner {
             darkColorPicker.value = this.config.darkColor;
             darkColorText.value = this.config.darkColor;
         }
+        
+        // Set up diff view
+        const showDiffCheckbox = document.getElementById('designer-show-diff');
+        const diffFields = document.getElementById('diff-fields');
+        if (showDiffCheckbox) {
+            showDiffCheckbox.checked = this.config.showDiff || false;
+            if (diffFields) {
+                diffFields.classList.toggle('hidden', !this.config.showDiff);
+            }
+        }
+        
+        // Set diff field values
+        const diffFilename = document.getElementById('designer-diff-filename');
+        const diffOldText = document.getElementById('designer-diff-old');
+        const diffNewText = document.getElementById('designer-diff-new');
+        
+        if (diffFilename) diffFilename.value = this.config.diffFilename || '';
+        if (diffOldText) diffOldText.value = this.config.diffOldText || '';
+        if (diffNewText) diffNewText.value = this.config.diffNewText || '';
     }
     
     updateThemeModeButtons() {
@@ -195,7 +226,7 @@ class EmbedDesigner {
     
     setupDesignerEvents() {
         // Form changes update preview
-        ['designer-prompt', 'designer-context', 'designer-mode-select', 'designer-thinking', 'designer-max', 'designer-filetree', 'designer-show-filetree'].forEach(id => {
+        ['designer-prompt', 'designer-context', 'designer-mode-select', 'designer-thinking', 'designer-max', 'designer-filetree', 'designer-show-filetree', 'designer-diff-filename', 'designer-diff-old', 'designer-diff-new'].forEach(id => {
             const element = document.getElementById(id);
             if (element) {
                 element.addEventListener('input', () => this.updateConfigFromForm());
@@ -203,6 +234,18 @@ class EmbedDesigner {
             }
         });
         
+        // Diff view toggle
+        const showDiffCheckbox = document.getElementById('designer-show-diff');
+        const diffFields = document.getElementById('diff-fields');
+        if (showDiffCheckbox) {
+            showDiffCheckbox.addEventListener('change', (e) => {
+                if (diffFields) {
+                    diffFields.classList.toggle('hidden', !e.target.checked);
+                }
+                this.updateConfigFromForm();
+            });
+        }
+        
         // Theme mode buttons
         document.querySelectorAll('.theme-mode-btn').forEach(btn => {
             btn.addEventListener('click', (e) => {
@@ -329,7 +372,11 @@ class EmbedDesigner {
                     height: '400',
                     themeMode: 'auto',
                     filetree: [],
-                    showFiletree: true
+                    showFiletree: true,
+                    showDiff: false,
+                    diffFilename: '',
+                    diffOldText: '',
+                    diffNewText: ''
                 };
                 // Update UI to reflect defaults
                 this.setupDesignerElements();
@@ -338,14 +385,37 @@ class EmbedDesigner {
             }
         });
         
-        // Example buttons
+        // Example select
-        document.getElementById('vibe-example').addEventListener('click', () => {
+        const exampleSelect = document.getElementById('example-select');
-            this.loadVibeExample();
+        if (exampleSelect) {
-        });
+            exampleSelect.addEventListener('change', (e) => {
-        
+                const example = e.target.value;
-        document.getElementById('chat-example').addEventListener('click', () => {
+                if (example) {
-            this.loadChatExample();
+                    switch (example) {
+                        case 'vibe-coding':
+                            this.loadVibeCodingExample();
+                            break;
+                        case 'vibe-coding-diff':
+                            this.loadVibeCodingDiffExample();
+                            break;
+                        case 'chatgpt':
+                            this.loadChatGPTExample();
+                            break;
+                        case 'claude':
+                            this.loadClaudeExample();
+                            break;
+                        case 'image-analysis':
+                            this.loadImageAnalysisExample();
+                            break;
+                        case 'api-design':
+                            this.loadAPIDesignExample();
+                            break;
+                    }
+                    // Reset select to placeholder after loading
+                    exampleSelect.value = '';
+                }
             });
+        }
         
         // Modal events
         document.getElementById('close-modal').addEventListener('click', () => this.hideEmbedModal());
@@ -383,7 +453,11 @@ class EmbedDesigner {
             height: heightSlider ? heightSlider.value : '400',
             themeMode: this.config.themeMode || 'auto',
             filetree: document.getElementById('designer-filetree').value.split('\n').map(f => f.trim()).filter(f => f),
-            showFiletree: document.getElementById('designer-show-filetree').checked
+            showFiletree: document.getElementById('designer-show-filetree').checked,
+            showDiff: document.getElementById('designer-show-diff').checked,
+            diffFilename: document.getElementById('designer-diff-filename').value,
+            diffOldText: document.getElementById('designer-diff-old').value,
+            diffNewText: document.getElementById('designer-diff-new').value
         };
         
         this.updatePreview();
@@ -457,6 +531,19 @@ class EmbedDesigner {
         if (this.config.darkColor !== '#60a5fa') params.set('darkColor', this.config.darkColor);
         if (this.config.themeMode !== 'auto') params.set('themeMode', this.config.themeMode);
         if (this.config.showFiletree && this.config.filetree && this.config.filetree.length > 0) params.set('filetree', encodeURIComponent(this.config.filetree.join('\n')));
+        if (this.config.showDiff) {
+            params.set('showDiff', 'true');
+            if (this.config.diffFilename) params.set('diffFilename', this.config.diffFilename);
+            // Truncate diff text if too long to prevent URL length issues
+            if (this.config.diffOldText) {
+                const truncated = this.config.diffOldText.substring(0, 100);
+                params.set('diffOldText', encodeURIComponent(truncated)+'...');
+            }
+            if (this.config.diffNewText) {
+                const truncated = this.config.diffNewText.substring(0, 100);
+                params.set('diffNewText', encodeURIComponent(truncated)+'...');
+            }
+        }
         params.set('preview', 'true');
         
         return `/embed-preview/?${params.toString()}`;
@@ -474,6 +561,19 @@ class EmbedDesigner {
         if (this.config.darkColor !== '#60a5fa') params.set('darkColor', this.config.darkColor);
         if (this.config.themeMode !== 'auto') params.set('themeMode', this.config.themeMode);
         if (this.config.showFiletree && this.config.filetree && this.config.filetree.length > 0) params.set('filetree', encodeURIComponent(this.config.filetree.join('\n')));
+        if (this.config.showDiff) {
+            params.set('showDiff', 'true');
+            if (this.config.diffFilename) params.set('diffFilename', this.config.diffFilename);
+            // Truncate diff text if too long to prevent URL length issues
+            if (this.config.diffOldText) {
+                const truncated = this.config.diffOldText.substring(0, 150);
+                params.set('diffOldText', encodeURIComponent(truncated));
+            }
+            if (this.config.diffNewText) {
+                const truncated = this.config.diffNewText.substring(0, 150);
+                params.set('diffNewText', encodeURIComponent(truncated));
+            }
+        }
         
         return `${window.location.origin}/embed-preview/?${params.toString()}`;
     }
@@ -554,44 +654,26 @@ class EmbedDesigner {
         }, duration);
     }
     
-    loadVibeExample() {
+    loadVibeCodingExample() {
+        // Vibe coding example WITHOUT diff
         // Set vibe coding example values
         document.getElementById('designer-prompt').value = 
-`I'm working on a React e-commerce app. The current ProductList component is getting messy with too much logic. 
+`Refactor my React ProductList component:
+- Extract filtering logic to custom hook
+- Split into smaller components  
+- Add TypeScript types
+- Implement virtualization
 
-Can you help me refactor it to:
+Currently handles display, filtering, sorting, and pagination in one file.
-1. Extract the filtering logic into a custom hook
-2. Split the large component into smaller, reusable pieces
-3. Add proper TypeScript types
-4. Implement virtualization for better performance with large product lists
 
-The component currently handles products display, filtering by category/price, sorting, and pagination all in one file. I want a cleaner architecture.
+@web Check React Query docs for data fetching patterns.`;
         
-Please check the @https://tanstack.com/query/latest/docs/react/overview for data fetching best practices and consider if we should integrate it for product data management.`;
+        document.getElementById('designer-context').value = '@codebase, ProductList.tsx';
-        
-        document.getElementById('designer-context').value = '@codebase, ProductList.tsx, components/, hooks/';
         document.getElementById('designer-filetree').value = 
-`src/
+`src/components/ProductList.tsx*
-src/components/
-src/components/ProductList.tsx*
 src/components/ProductCard.tsx
-src/components/ProductGrid.tsx
-src/components/Filters/
-src/components/Filters/CategoryFilter.tsx
-src/components/Filters/PriceRangeFilter.tsx
-src/components/Filters/index.tsx
-src/hooks/
 src/hooks/useProducts.ts
-src/hooks/useFilters.ts
+src/types/product.ts`;
-src/hooks/useInfiniteScroll.ts
-src/types/
-src/types/product.ts
-src/api/
-src/api/products.ts
-src/utils/
-src/utils/formatters.ts
-package.json
-tsconfig.json`;
         
         // Set vibe coding settings
         document.getElementById('designer-model').value = 'Claude 4 Opus';
@@ -620,30 +702,94 @@ tsconfig.json`;
         this.config.themeMode = 'dark';
         this.updateThemeModeButtons();
         
+        // No diff for this example
+        document.getElementById('designer-show-diff').checked = false;
+        document.getElementById('diff-fields').classList.add('hidden');
+        
         // Update config from form
         this.updateConfigFromForm();
         
         this.showNotification('Vibe coding example loaded!');
     }
     
-    loadChatExample() {
+    loadVibeCodingDiffExample() {
-        // Set chat example values
+        // Vibe coding WITH diff - user giving feedback on suggested changes
+        document.getElementById('designer-prompt').value = 
+`Actually, don't use Error | null for the error state. Instead:
+- Create a custom ApiError type with code, message, and retry()
+- Add an AbortController for request cancellation
+- Include error boundary integration
+- Show me how to handle network vs API errors differently
+
+Also add a refetch function that the UI can call.`;
+        
+        document.getElementById('designer-context').value = '@codebase, useProducts.ts';
+        document.getElementById('designer-filetree').value = 
+`src/hooks/useProducts.ts*
+src/types/errors.ts
+src/utils/api.ts`;
+        
+        // Set same settings as regular vibe coding
+        document.getElementById('designer-model').value = 'Claude 4 Opus';
+        document.getElementById('designer-mode-select').value = 'agent';
+        document.getElementById('designer-thinking').checked = true;
+        document.getElementById('designer-max').checked = true;
+        document.getElementById('designer-show-filetree').checked = true;
+        
+        // Set height and colors
+        const heightSlider = document.getElementById('designer-height');
+        const heightValue = document.getElementById('height-value');
+        if (heightSlider) {
+            heightSlider.value = '500';
+            if (heightValue) {
+                heightValue.textContent = '500';
+            }
+        }
+        
+        document.getElementById('designer-light-color').value = '#8b5cf6';
+        document.getElementById('designer-light-color-text').value = '#8b5cf6';
+        document.getElementById('designer-dark-color').value = '#a78bfa';
+        document.getElementById('designer-dark-color-text').value = '#a78bfa';
+        
+        this.config.themeMode = 'dark';
+        this.updateThemeModeButtons();
+        
+        // Add diff view showing the previous suggestion
+        document.getElementById('designer-show-diff').checked = true;
+        document.getElementById('diff-fields').classList.remove('hidden');
+        document.getElementById('designer-diff-filename').value = 'useProducts.ts';
+        document.getElementById('designer-diff-old').value = 
+`const [products, setProducts] = useState([]);
+const [loading, setLoading] = useState(true);`;
+        document.getElementById('designer-diff-new').value = 
+`const [products, setProducts] = useState<Product[]>([]);
+const [loading, setLoading] = useState(true);
+const [error, setError] = useState<Error | null>(null);`;
+        
+        // Update config from form
+        this.updateConfigFromForm();
+        
+        this.showNotification('Vibe coding with diff loaded!');
+    }
+    
+    loadChatGPTExample() {
+        // ChatGPT example with green colors
         document.getElementById('designer-prompt').value = 
 `I'm planning a dinner party for 8 people this weekend. One person is vegetarian, another is gluten-free, and I want to make something impressive but not too complicated. 
 
 Can you suggest a menu with appetizers, main course, and dessert that would work for everyone? I have about 4 hours to prepare everything and a moderate cooking skill level.`;
         
-        document.getElementById('designer-context').value = '#Screenshot Kitchen Layout.png, Recipes Collection.pdf';
+        document.getElementById('designer-context').value = '#Kitchen Layout.png, #Pantry Inventory.jpg';
         document.getElementById('designer-filetree').value = '';
         
-        // Set chat settings
+        // ChatGPT settings
         document.getElementById('designer-model').value = 'GPT 4o';
         document.getElementById('designer-mode-select').value = 'chat';
         document.getElementById('designer-thinking').checked = false;
         document.getElementById('designer-max').checked = false;
         document.getElementById('designer-show-filetree').checked = false;
         
-        // Set height and colors for chat example
+        // Set height and colors for ChatGPT
         const heightSlider = document.getElementById('designer-height');
         const heightValue = document.getElementById('height-value');
         if (heightSlider) {
@@ -653,20 +799,184 @@ Can you suggest a menu with appetizers, main course, and dessert that would work
             }
         }
         
-        // Set friendly color scheme (green)
+        // ChatGPT green color scheme
         document.getElementById('designer-light-color').value = '#10b981';
         document.getElementById('designer-light-color-text').value = '#10b981';
         document.getElementById('designer-dark-color').value = '#34d399';
         document.getElementById('designer-dark-color-text').value = '#34d399';
         
-        // Set light theme mode for chat
+        // Light theme for ChatGPT
         this.config.themeMode = 'light';
         this.updateThemeModeButtons();
         
+        // Clear diff view
+        document.getElementById('designer-show-diff').checked = false;
+        document.getElementById('diff-fields').classList.add('hidden');
+        
         // Update config from form
         this.updateConfigFromForm();
         
-        this.showNotification('Chat example loaded!');
+        this.showNotification('ChatGPT example loaded!');
+    }
+    
+    loadClaudeExample() {
+        // Claude example with orange colors - daily usage
+        document.getElementById('designer-prompt').value = 
+`Help me write a professional email to decline a job offer while keeping the door open for future opportunities. 
+
+Context:
+- Received offer from TechCorp as Senior Engineer
+- Great team and compensation, but role doesn't align with my career goals
+- Want to maintain good relationship with the hiring manager Sarah
+- Interested in their upcoming ML team expansion next year
+
+Keep it warm but professional, around 150-200 words.`;
+        
+        document.getElementById('designer-context').value = '';
+        document.getElementById('designer-filetree').value = '';
+        
+        // Claude settings
+        document.getElementById('designer-model').value = 'Claude 3.7 Sonnet';
+        document.getElementById('designer-mode-select').value = 'chat';
+        document.getElementById('designer-thinking').checked = false;
+        document.getElementById('designer-max').checked = false;
+        document.getElementById('designer-show-filetree').checked = false;
+        
+        // Set height and colors for Claude
+        const heightSlider = document.getElementById('designer-height');
+        const heightValue = document.getElementById('height-value');
+        if (heightSlider) {
+            heightSlider.value = '350';
+            if (heightValue) {
+                heightValue.textContent = '350';
+            }
+        }
+        
+        // Claude orange color scheme
+        document.getElementById('designer-light-color').value = '#f97316';
+        document.getElementById('designer-light-color-text').value = '#f97316';
+        document.getElementById('designer-dark-color').value = '#fb923c';
+        document.getElementById('designer-dark-color-text').value = '#fb923c';
+        
+        // Auto theme for Claude
+        this.config.themeMode = 'auto';
+        this.updateThemeModeButtons();
+        
+        // Clear diff view
+        document.getElementById('designer-show-diff').checked = false;
+        document.getElementById('diff-fields').classList.add('hidden');
+        
+        // Update config from form
+        this.updateConfigFromForm();
+        
+        this.showNotification('Claude example loaded!');
+    }
+    
+    loadImageAnalysisExample() {
+        // Image analysis example
+        document.getElementById('designer-prompt').value = 
+`Analyze these UI screenshots and provide detailed feedback on:
+- Visual hierarchy and layout
+- Color scheme and contrast
+- Typography choices
+- Accessibility concerns
+- Mobile responsiveness issues`;
+        
+        document.getElementById('designer-context').value = '#Homepage Desktop.png, #Homepage Mobile.png, #Dashboard View.jpg';
+        document.getElementById('designer-filetree').value = '';
+        
+        // Image analysis settings
+        document.getElementById('designer-model').value = 'GPT 4.1';
+        document.getElementById('designer-mode-select').value = 'chat';
+        document.getElementById('designer-thinking').checked = false;
+        document.getElementById('designer-max').checked = false;
+        document.getElementById('designer-show-filetree').checked = false;
+        
+        // Set height and colors
+        const heightSlider = document.getElementById('designer-height');
+        const heightValue = document.getElementById('height-value');
+        if (heightSlider) {
+            heightSlider.value = '400';
+            if (heightValue) {
+                heightValue.textContent = '400';
+            }
+        }
+        
+        // Pink/purple color scheme for design
+        document.getElementById('designer-light-color').value = '#ec4899';
+        document.getElementById('designer-light-color-text').value = '#ec4899';
+        document.getElementById('designer-dark-color').value = '#f472b6';
+        document.getElementById('designer-dark-color-text').value = '#f472b6';
+        
+        // Light theme
+        this.config.themeMode = 'light';
+        this.updateThemeModeButtons();
+        
+        // Clear diff view
+        document.getElementById('designer-show-diff').checked = false;
+        document.getElementById('diff-fields').classList.add('hidden');
+        
+        // Update config from form
+        this.updateConfigFromForm();
+        
+        this.showNotification('Image analysis example loaded!');
+    }
+    
+    loadAPIDesignExample() {
+        // API design example
+        document.getElementById('designer-prompt').value = 
+`Design a RESTful API for a task management system with:
+- User authentication
+- Project and task CRUD operations
+- Team collaboration features
+- Real-time notifications
+
+Include endpoint definitions, request/response schemas, and error handling patterns.`;
+        
+        document.getElementById('designer-context').value = '@web REST best practices, openapi.yaml';
+        document.getElementById('designer-filetree').value = 
+`api/
+api/v1/
+api/v1/users/
+api/v1/projects/
+api/v1/tasks/
+docs/openapi.yaml*`;
+        
+        // API design settings
+        document.getElementById('designer-model').value = 'Claude 4 Opus';
+        document.getElementById('designer-mode-select').value = 'manual';
+        document.getElementById('designer-thinking').checked = true;
+        document.getElementById('designer-max').checked = false;
+        document.getElementById('designer-show-filetree').checked = true;
+        
+        // Set height and colors
+        const heightSlider = document.getElementById('designer-height');
+        const heightValue = document.getElementById('height-value');
+        if (heightSlider) {
+            heightSlider.value = '500';
+            if (heightValue) {
+                heightValue.textContent = '500';
+            }
+        }
+        
+        // Blue color scheme for API
+        document.getElementById('designer-light-color').value = '#3b82f6';
+        document.getElementById('designer-light-color-text').value = '#3b82f6';
+        document.getElementById('designer-dark-color').value = '#60a5fa';
+        document.getElementById('designer-dark-color-text').value = '#60a5fa';
+        
+        // Dark theme for technical
+        this.config.themeMode = 'dark';
+        this.updateThemeModeButtons();
+        
+        // Clear diff view
+        document.getElementById('designer-show-diff').checked = false;
+        document.getElementById('diff-fields').classList.add('hidden');
+        
+        // Update config from form
+        this.updateConfigFromForm();
+        
+        this.showNotification('API design example loaded!');
     }
 }