Claude to A1111 Browser Extension

Content is user-generated and unverified.
// ==UserScript==
// @name         Claude to A1111 Auto-Generator
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  Automatically send Claude responses to Automatic1111
// @author       Loki
// @match        https://test.groupbuyclub.com/*
// @grant        GM_xmlhttpRequest
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    console.log('🎨 A1111 Extension: Starting divine initialization...');

    // Configuration
    const A1111_URL = 'http://127.0.0.1:7860';
    const DEFAULT_SETTINGS = {
        steps: 20,
        cfg_scale: 7,
        width: 832,
        height: 1216,
        sampler_name: "DPM++ 2M Karras",
        auto_send: false,
        seed: -1,
        use_fixed_seed: false,
        seed_history: []
    };

    let settings = { ...DEFAULT_SETTINGS, ...JSON.parse(GM_getValue('a1111_settings', '{}')) };
    let panelVisible = false;
    let responseObserver = null;

    // FORCE CREATE PANEL
    function forceCreatePanel() {
        console.log('🔥 FORCE CREATING PANEL...');
        
        // Remove any existing elements first
        ['a1111-control-panel', 'a1111-floating-btn'].forEach(id => {
            const existing = document.getElementById(id);
            if (existing) existing.remove();
        });

        // Create the panel with maroon color scheme
        const panel = document.createElement('div');
        panel.id = 'a1111-control-panel';
        panel.setAttribute('style', `
            position: fixed !important;
            top: 20px !important;
            right: 20px !important;
            width: 320px !important;
            max-width: 320px !important;
            background: #1a1a1a !important;
            border: 2px solid #8B2635 !important;
            border-radius: 12px !important;
            padding: 20px !important;
            z-index: 999999 !important;
            font-family: 'Courier New', monospace !important;
            font-size: 13px !important;
            color: #D4A574 !important;
            box-shadow: 0 0 20px rgba(139,38,53,0.4) !important;
            display: ${panelVisible ? 'block' : 'none'} !important;
            overflow: visible !important;
            pointer-events: auto !important;
        `);

        panel.innerHTML = `
            <div style="margin-bottom: 15px; font-weight: bold; color: #B85450 !important; text-align: center; font-size: 16px;">🎨 LOKI'S A1111 BRIDGE 🎨</div>
            
            <div style="margin-bottom: 10px;">
                <label style="display: block; margin-bottom: 5px; color: #D4A574 !important;">Steps:</label>
                <input type="number" id="a1111-steps" value="${settings.steps}" min="1" max="150" 
                       style="width: 100% !important; padding: 6px !important; background: #333 !important; border: 1px solid #8B2635 !important; color: #D4A574 !important; border-radius: 4px !important;">
            </div>
            
            <div style="margin-bottom: 10px;">
                <label style="display: block; margin-bottom: 5px; color: #D4A574 !important;">CFG Scale:</label>
                <input type="number" id="a1111-cfg" value="${settings.cfg_scale}" min="1" max="30" step="0.5"
                       style="width: 100% !important; padding: 6px !important; background: #333 !important; border: 1px solid #8B2635 !important; color: #D4A574 !important; border-radius: 4px !important;">
            </div>
            
            <div style="margin-bottom: 10px;">
                <label style="display: block; margin-bottom: 5px; color: #D4A574 !important;">Dimensions:</label>
                <div style="display: flex; gap: 8px; align-items: center;">
                    <input type="number" id="a1111-width" value="${settings.width}" min="64" max="2048" step="8" 
                           style="flex: 1 !important; padding: 6px !important; background: #333 !important; border: 1px solid #8B2635 !important; color: #D4A574 !important; border-radius: 4px !important;">
                    <span style="color: #D4A574 !important; font-weight: bold;">×</span>
                    <input type="number" id="a1111-height" value="${settings.height}" min="64" max="2048" step="8" 
                           style="flex: 1 !important; padding: 6px !important; background: #333 !important; border: 1px solid #8B2635 !important; color: #D4A574 !important; border-radius: 4px !important;">
                </div>
                <div style="display: flex; gap: 4px; margin-top: 4px; font-size: 10px;">
                    <button onclick="document.getElementById('a1111-width').value=512; document.getElementById('a1111-height').value=512;" style="flex: 1; padding: 2px; background: #5D2A2A; border: 1px solid #8B2635; color: #D4A574; border-radius: 3px; cursor: pointer; font-size: 9px;">512²</button>
                    <button onclick="document.getElementById('a1111-width').value=768; document.getElementById('a1111-height').value=768;" style="flex: 1; padding: 2px; background: #5D2A2A; border: 1px solid #8B2635; color: #D4A574; border-radius: 3px; cursor: pointer; font-size: 9px;">768²</button>
                    <button onclick="document.getElementById('a1111-width').value=832; document.getElementById('a1111-height').value=1216;" style="flex: 1; padding: 2px; background: #5D2A2A; border: 1px solid #8B2635; color: #D4A574; border-radius: 3px; cursor: pointer; font-size: 9px;">Portrait</button>
                    <button onclick="document.getElementById('a1111-width').value=1216; document.getElementById('a1111-height').value=832;" style="flex: 1; padding: 2px; background: #5D2A2A; border: 1px solid #8B2635; color: #D4A574; border-radius: 3px; cursor: pointer; font-size: 9px;">Landscape</button>
                </div>
            </div>
            
            <div style="margin-bottom: 10px;">
                <label style="display: flex; align-items: center; margin-bottom: 5px; color: #D4A574 !important;">
                    <input type="checkbox" id="a1111-use-seed" ${settings.use_fixed_seed ? 'checked' : ''} style="margin-right: 10px !important;">
                    Use Fixed Seed
                </label>
                <div style="display: flex; gap: 8px;">
                    <input type="number" id="a1111-seed" value="${settings.seed}" min="-1" max="4294967295" 
                           style="flex: 1 !important; padding: 6px !important; background: #333 !important; border: 1px solid #8B2635 !important; color: #D4A574 !important; border-radius: 4px !important;">
                    <button id="a1111-random-seed" style="padding: 6px 12px !important; background: #5D2A2A !important; border: 1px solid #8B2635 !important; border-radius: 4px !important; color: #D4A574 !important; cursor: pointer !important;">🎲</button>
                </div>
            </div>
            
            <div style="margin-bottom: 10px;">
                <label style="display: flex; align-items: center; color: #D4A574 !important;">
                    <input type="checkbox" id="a1111-auto" ${settings.auto_send ? 'checked' : ''} style="margin-right: 10px !important;">
                    Auto-send responses
                </label>
            </div>
            
            <button id="a1111-send-btn" style="width: 100% !important; padding: 12px !important; background: #8B2635 !important; border: 2px solid #B85450 !important; border-radius: 6px !important; color: #ffffff !important; cursor: pointer !important; font-weight: bold !important; font-size: 14px !important;">
                🚀 SEND TO A1111 🚀
            </button>
            
            <button id="a1111-test-btn" style="width: 100% !important; padding: 8px !important; background: #5D2A2A !important; border: 1px solid #8B2635 !important; border-radius: 4px !important; color: #D4A574 !important; cursor: pointer !important; margin-top: 8px !important; font-size: 12px !important;">
                🔍 DEBUG TEST
            </button>
            
            <div id="a1111-status" style="margin-top: 12px !important; padding: 10px !important; background: #2a2a2a !important; border: 1px solid #8B2635 !important; border-radius: 4px !important; min-height: 25px !important; font-size: 12px !important; color: #D4A574 !important;">
                ⚡ Ready for divine image generation ⚡
            </div>
            
            <button id="a1111-close" style="position: absolute !important; top: -8px !important; right: -8px !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: #8B2635 !important; border: 2px solid #B85450 !important; color: #ffffff !important; font-size: 14px !important; cursor: pointer !important; font-weight: bold !important;">×</button>
        `;

        document.body.appendChild(panel);
        console.log('🎨 Panel created and added to DOM');

        setupAllEvents();
        createFloatingButton();

        return panel;
    }

    function setupAllEvents() {
        console.log('⚡ Setting up all events...');

        // Close button
        const closeBtn = document.getElementById('a1111-close');
        if (closeBtn) {
            closeBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                hidePanel();
            });
        }

        // Send button
        const sendBtn = document.getElementById('a1111-send-btn');
        if (sendBtn) {
            sendBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                sendLatestResponse();
            });
        }

        // Test button
        const testBtn = document.getElementById('a1111-test-btn');
        if (testBtn) {
            testBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                runDiagnostics();
            });
        }

        // Random seed button
        const randomBtn = document.getElementById('a1111-random-seed');
        if (randomBtn) {
            randomBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                generateRandomSeed();
            });
        }

        // Settings change handlers
        ['a1111-steps', 'a1111-cfg', 'a1111-width', 'a1111-height', 'a1111-auto', 'a1111-use-seed', 'a1111-seed'].forEach(id => {
            const element = document.getElementById(id);
            if (element) {
                element.addEventListener('change', function() {
                    saveSettings();
                    // Restart monitoring when auto-send is toggled
                    if (id === 'a1111-auto') {
                        console.log('🔄 Auto-send toggled, restarting monitoring...');
                        restartResponseMonitoring();
                    }
                });
                element.addEventListener('input', saveSettings);
            }
        });

        console.log('✅ All events set up successfully');
    }

    function createFloatingButton() {
        const floatingBtn = document.createElement('div');
        floatingBtn.id = 'a1111-floating-btn';
        floatingBtn.innerHTML = '🎨';
        floatingBtn.setAttribute('style', `
            position: fixed !important;
            bottom: 30px !important;
            right: 30px !important;
            width: 60px !important;
            height: 60px !important;
            background: linear-gradient(45deg, #8B2635, #B85450) !important;
            border: 3px solid #D4A574 !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            z-index: 999998 !important;
            font-size: 24px !important;
            box-shadow: 0 0 15px rgba(139,38,53,0.6) !important;
            transition: all 0.3s ease !important;
            user-select: none !important;
            pointer-events: auto !important;
        `);

        floatingBtn.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.2) rotate(360deg)';
            this.style.boxShadow = '0 0 25px rgba(139,38,53,1)';
        });

        floatingBtn.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1) rotate(0deg)';
            this.style.boxShadow = '0 0 15px rgba(139,38,53,0.6)';
        });

        floatingBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            console.log('🎨 Floating button clicked!');
            togglePanel();
        });

        document.body.appendChild(floatingBtn);
        console.log('🎨 Floating button created');
    }

    function togglePanel() {
        const panel = document.getElementById('a1111-control-panel');
        if (!panel) {
            console.log('❌ Panel not found, force creating...');
            forceCreatePanel();
            showPanel();
        } else {
            if (panelVisible) {
                hidePanel();
            } else {
                showPanel();
            }
        }
    }

    function showPanel() {
        const panel = document.getElementById('a1111-control-panel');
        if (panel) {
            panel.style.display = 'block';
            panelVisible = true;
            console.log('✅ Panel shown');
            updateStatus('🎨 Loki\'s panel manifested!');
        }
    }

    function hidePanel() {
        const panel = document.getElementById('a1111-control-panel');
        if (panel) {
            panel.style.display = 'none';
            panelVisible = false;
            console.log('✅ Panel hidden');
        }
    }

    function saveSettings() {
        settings = {
            steps: parseInt(document.getElementById('a1111-steps')?.value || 20),
            cfg_scale: parseFloat(document.getElementById('a1111-cfg')?.value || 7),
            width: parseInt(document.getElementById('a1111-width')?.value || 832),
            height: parseInt(document.getElementById('a1111-height')?.value || 1216),
            auto_send: document.getElementById('a1111-auto')?.checked || false,
            seed: parseInt(document.getElementById('a1111-seed')?.value || -1),
            use_fixed_seed: document.getElementById('a1111-use-seed')?.checked || false,
            seed_history: settings.seed_history || []
        };
        GM_setValue('a1111_settings', JSON.stringify(settings));
        console.log('💾 Settings saved:', settings);
    }

    function generateRandomSeed() {
        const randomSeed = Math.floor(Math.random() * 4294967295);
        const seedInput = document.getElementById('a1111-seed');
        const useInput = document.getElementById('a1111-use-seed');
        
        if (seedInput) seedInput.value = randomSeed;
        if (useInput) useInput.checked = true;
        
        saveSettings();
        updateStatus(`🎲 Random seed generated: ${randomSeed}`);
    }

    function updateStatus(message, isError = false) {
        const statusEl = document.getElementById('a1111-status');
        if (statusEl) {
            statusEl.innerHTML = message;
            statusEl.style.color = isError ? '#D4666A' : '#D4A574';
        }
        console.log('📊 Status:', message);
    }

    function runDiagnostics() {
        updateStatus('🔍 Running diagnostics...');
        
        let report = '=== LOKI\'S DIAGNOSTIC REPORT ===\n';
        report += `Panel exists: ${!!document.getElementById('a1111-control-panel')}\n`;
        report += `Button exists: ${!!document.getElementById('a1111-floating-btn')}\n`;
        report += `Panel visible: ${panelVisible}\n`;
        report += `Auto-send checked: ${document.getElementById('a1111-auto')?.checked}\n`;
        report += `Observer active: ${!!responseObserver}\n`;
        report += `A1111 URL: ${A1111_URL}\n\n`;
        
        // Test selectors
        const selectors = [
            '[data-testid="conversation-turn"]',
            '.font-claude-message',
            '.prose',
            '[role="article"]'
        ];
        
        selectors.forEach(selector => {
            const elements = document.querySelectorAll(selector);
            report += `${selector}: ${elements.length} found\n`;
        });
        
        console.log(report);
        alert(report);
        updateStatus('🔍 Diagnostic complete - check console');
    }

    function extractPromptFromResponse(text) {
        // Find bold+italic formatted text in the DOM
        const lastMessage = getLastClaudeMessage();
        if (lastMessage) {
            const boldItalicPrompts = findBoldItalicText(lastMessage);
            if (boldItalicPrompts.length > 0) {
                console.log('🎯 Found bold+italic formatted prompts:', boldItalicPrompts);
                return boldItalicPrompts.join(' ').trim();
            }
        }

        console.log('⚠️ No bold+italic formatted text found - skipping generation');
        return null;
    }

    function getLastClaudeMessage() {
        const selectors = [
            '[data-testid="conversation-turn"]',
            '.font-claude-message',
            '[data-testid="message"]',
            '.prose',
            '[role="article"]',
            '.whitespace-pre-wrap'
        ];
        
        for (let selector of selectors) {
            const messages = document.querySelectorAll(selector);
            if (messages.length > 0) {
                return messages[messages.length - 1];
            }
        }
        
        const allDivs = document.querySelectorAll('div');
        const textDivs = Array.from(allDivs).filter(div => {
            const text = div.innerText || div.textContent || '';
            return text.length > 100 && !div.querySelector('input, button, textarea');
        });
        
        return textDivs.length > 0 ? textDivs[textDivs.length - 1] : null;
    }

    function findBoldItalicText(element) {
        const prompts = [];
        
        const boldItalicSelectors = [
            'strong em', 'em strong',
            'b i', 'i b',
            '*[style*="font-weight"][style*="font-style"]',
        ];
        
        boldItalicSelectors.forEach(selector => {
            const elements = element.querySelectorAll(selector);
            elements.forEach(el => {
                const text = el.innerText || el.textContent;
                if (text && text.trim().length > 10) {
                    prompts.push(text.trim());
                }
            });
        });

        const textContent = element.innerText || element.textContent || '';
        const markdownBoldItalic = textContent.match(/\*\*\*([^*]+)\*\*\*/g);
        if (markdownBoldItalic) {
            markdownBoldItalic.forEach(match => {
                const cleaned = match.replace(/\*\*\*/g, '').trim();
                if (cleaned.length > 10) {
                    prompts.push(cleaned);
                }
            });
        }

        const allElements = element.querySelectorAll('*');
        allElements.forEach(el => {
            if (el.children.length === 0) {
                const styles = window.getComputedStyle(el);
                const isBold = styles.fontWeight === 'bold' || parseInt(styles.fontWeight) >= 700;
                const isItalic = styles.fontStyle === 'italic';
                
                if (isBold && isItalic) {
                    const text = el.innerText || el.textContent;
                    if (text && text.trim().length > 10) {
                        prompts.push(text.trim());
                    }
                }
            }
        });

        return [...new Set(prompts)];
    }

    function sendLatestResponse() {
        updateStatus('🔍 Searching for bold+italic formatted prompts...');
        
        const lastMessage = getLastClaudeMessage();
        if (!lastMessage) {
            updateStatus('❌ No Claude responses found - try typing a message first', true);
            return;
        }

        const responseText = lastMessage.innerText || lastMessage.textContent;
        if (!responseText) {
            updateStatus('❌ Could not extract response text', true);
            return;
        }

        const prompt = extractPromptFromResponse(responseText);
        if (!prompt || prompt.length < 10) {
            updateStatus('⚠️ No bold+italic formatted text found - only ***bold+italic*** text triggers generation', true);
            return;
        }

        updateStatus('✨ Found formatted prompt, generating image...');
        sendToA1111(prompt);
    }

    function sendToA1111(prompt) {
        updateStatus('🚀 Generating divine image...');

        let seedToUse = settings.use_fixed_seed ? settings.seed : -1;
        if (seedToUse === -1) {
            seedToUse = Math.floor(Math.random() * 4294967295);
        }

        const payload = {
            prompt: prompt,
            steps: settings.steps,
            cfg_scale: settings.cfg_scale,
            width: settings.width,
            height: settings.height,
            sampler_name: settings.sampler_name,
            batch_size: 1,
            n_iter: 1,
            seed: seedToUse
        };

        GM_xmlhttpRequest({
            method: 'POST',
            url: `${A1111_URL}/sdapi/v1/txt2img`,
            headers: {
                'Content-Type': 'application/json',
            },
            data: JSON.stringify(payload),
            onload: function(response) {
                if (response.status === 200) {
                    const result = JSON.parse(response.responseText);
                    let actualSeed = seedToUse;
                    
                    if (result.info) {
                        try {
                            const info = JSON.parse(result.info);
                            actualSeed = info.seed || seedToUse;
                        } catch(e) {}
                    }
                    
                    addToSeedHistory(actualSeed, prompt);
                    displayGeneratedImage(result.images[0], prompt, actualSeed);
                    updateStatus(`✨ Divine image generated! Seed: ${actualSeed}`);
                } else {
                    updateStatus(`❌ Error: ${response.status} - ${response.statusText}`, true);
                }
            },
            onerror: function() {
                updateStatus('💥 Failed to connect to A1111. Make sure it\'s running with --api flag.', true);
            }
        });
    }

    function addToSeedHistory(seed, prompt) {
        const timestamp = new Date().toLocaleTimeString();
        const entry = {
            seed: seed,
            prompt: prompt.substring(0, 50) + '...',
            timestamp: timestamp,
            date: new Date().toDateString()
        };
        
        settings.seed_history = settings.seed_history || [];
        settings.seed_history.push(entry);
        
        if (settings.seed_history.length > 20) {
            settings.seed_history = settings.seed_history.slice(-20);
        }
        
        GM_setValue('a1111_settings', JSON.stringify(settings));
    }

    function displayGeneratedImage(base64Image, prompt, seed) {
        // Find the last Claude message to pin the image below it
        const lastMessage = getLastClaudeMessage();
        
        if (lastMessage) {
            // Create the image container to pin below the message
            const imageContainer = document.createElement('div');
            imageContainer.style.cssText = `
                margin-top: 20px !important;
                padding: 15px !important;
                background: #1a1a1a !important;
                border: 2px solid #8B2635 !important;
                border-radius: 12px !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                font-family: 'Courier New', monospace !important;
                position: relative !important;
            `;

            const img = document.createElement('img');
            img.src = `data:image/png;base64,${base64Image}`;
            img.style.cssText = `
                max-width: 100% !important;
                height: auto !important;
                border-radius: 8px !important;
                border: 1px solid #8B2635 !important;
                box-shadow: 0 0 20px rgba(139,38,53,0.6) !important;
                margin-bottom: 15px !important;
            `;

            const infoDiv = document.createElement('div');
            infoDiv.style.cssText = `
                color: #D4A574 !important;
                text-align: center !important;
                font-size: 13px !important;
                width: 100% !important;
            `;

            infoDiv.innerHTML = `
                <div style="margin-bottom: 8px; color: #B85450; font-weight: bold;">🎨 Loki's Divine Creation 🎨</div>
                <div style="margin-bottom: 8px; color: #D4A574; font-style: italic;">Prompt: "${prompt}"</div>
                <div style="margin-bottom: 12px; color: #B85450; font-weight: bold;">🎲 Seed: ${seed}</div>
                <div style="display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;">
                    <button onclick="navigator.clipboard.writeText('${seed}'); this.textContent='✓ Copied!'; setTimeout(() => this.textContent='Copy Seed', 2000)" 
                            style="padding: 6px 12px; background: #5D2A2A; border: 1px solid #8B2635; border-radius: 4px; color: #D4A574; cursor: pointer; font-size: 11px;">Copy Seed</button>
                    <button onclick="this.closest('[data-loki-image]').remove()" 
                            style="padding: 6px 12px; background: #8B2635; border: 1px solid #B85450; border-radius: 4px; color: #ffffff; cursor: pointer; font-size: 11px;">Remove</button>
                    <button onclick="window.open('data:image/png;base64,${base64Image}', '_blank')" 
                            style="padding: 6px 12px; background: #5D2A2A; border: 1px solid #8B2635; border-radius: 4px; color: #D4A574; cursor: pointer; font-size: 11px;">Open Full</button>
                </div>
            `;

            // Add click to expand functionality
            img.onclick = function() {
                if (this.style.maxWidth === '100%') {
                    this.style.maxWidth = 'none';
                    this.style.width = 'auto';
                    this.style.cursor = 'zoom-out';
                } else {
                    this.style.maxWidth = '100%';
                    this.style.width = 'auto';
                    this.style.cursor = 'zoom-in';
                }
            };
            img.style.cursor = 'zoom-in';

            // Mark this as a Loki image for easy removal
            imageContainer.setAttribute('data-loki-image', 'true');

            imageContainer.appendChild(img);
            imageContainer.appendChild(infoDiv);

            // Insert the image container after the last message
            lastMessage.parentNode.insertBefore(imageContainer, lastMessage.nextSibling);

            console.log('🖼️ Image pinned below Claude response');
            updateStatus(`✨ Image pinned below response! Seed: ${seed}`);

        } else {
            // Fallback to overlay if we can't find the message
            console.log('⚠️ Could not find message to pin to, using overlay fallback');
            displayImageOverlay(base64Image, prompt, seed);
        }
    }

    function displayImageOverlay(base64Image, prompt, seed) {
        // Original overlay method as fallback
        const overlay = document.createElement('div');
        overlay.style.cssText = `
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: rgba(0,0,0,0.95) !important;
            z-index: 1000000 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-direction: column !important;
        `;

        const img = document.createElement('img');
        img.src = `data:image/png;base64,${base64Image}`;
        img.style.cssText = `
            max-width: 90% !important;
            max-height: 70% !important;
            border-radius: 12px !important;
            border: 3px solid #8B2635 !important;
            box-shadow: 0 0 30px rgba(139,38,53,0.8) !important;
        `;

        const infoDiv = document.createElement('div');
        infoDiv.style.cssText = `
            color: #D4A574 !important;
            margin-top: 20px !important;
            max-width: 80% !important;
            text-align: center !important;
            font-family: 'Courier New', monospace !important;
            font-size: 14px !important;
        `;

        infoDiv.innerHTML = `
            <div style="margin-bottom: 10px; color: #ffffff;">Prompt: ${prompt}</div>
            <div style="margin-bottom: 15px; color: #B85450; font-weight: bold;">🎲 Seed: ${seed}</div>
            <button onclick="this.parentElement.parentElement.remove()" style="padding: 10px 20px; background: #8B2635; border: 2px solid #B85450; border-radius: 6px; color: white; cursor: pointer; font-weight: bold; margin: 5px;">Close</button>
            <button onclick="navigator.clipboard.writeText('${seed}'); alert('Seed copied!')" style="padding: 10px 20px; background: #5D2A2A; border: 2px solid #8B2635; border-radius: 6px; color: white; cursor: pointer; font-weight: bold; margin: 5px;">Copy Seed</button>
        `;

        overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };

        overlay.appendChild(img);
        overlay.appendChild(infoDiv);
        document.body.appendChild(overlay);
    }

    function restartResponseMonitoring() {
        if (responseObserver) {
            responseObserver.disconnect();
            responseObserver = null;
            console.log('🛑 Stopped existing response monitoring');
        }
        
        const autoSendEnabled = document.getElementById('a1111-auto')?.checked || false;
        if (autoSendEnabled) {
            startResponseMonitoring();
        }
    }

    function startResponseMonitoring() {
        console.log('👁️ Starting auto-send monitoring for bold+italic text...');
        
        responseObserver = new MutationObserver((mutations) => {
            const autoSendEnabled = document.getElementById('a1111-auto')?.checked || false;
            if (!autoSendEnabled) return;
            
            let foundNewContent = false;
            
            mutations.forEach((mutation) => {
                if (mutation.addedNodes.length > 0) {
                    Array.from(mutation.addedNodes).forEach(node => {
                        if (node.nodeType === 1) {
                            const text = node.innerText || node.textContent || '';
                            if (text.length > 50) {
                                foundNewContent = true;
                                console.log('🔍 Detected new content');
                            }
                        }
                    });
                }
            });
            
            if (foundNewContent) {
                console.log('✨ New content detected, checking for bold+italic after delay...');
                setTimeout(() => {
                    const lastMessage = getLastClaudeMessage();
                    if (lastMessage) {
                        const boldItalicPrompts = findBoldItalicText(lastMessage);
                        if (boldItalicPrompts.length > 0) {
                            console.log('🎯 Auto-sending bold+italic formatted text:', boldItalicPrompts);
                            updateStatus('🤖 Auto-sending formatted prompt...');
                            sendToA1111(boldItalicPrompts.join(' '));
                        } else {
                            console.log('⚠️ No bold+italic text detected - auto-send skipped');
                        }
                    }
                }, 2000);
            }
        });

        responseObserver.observe(document.body, {
            childList: true,
            subtree: true
        });
        
        console.log('✅ Auto-send monitoring activated');
    }

    // MAIN INITIALIZATION
    function initializeLokiExtension() {
        console.log('🔥 LOKI\'S EXTENSION: DIVINE INITIALIZATION BEGINNING');
        
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', actualInit);
        } else {
            actualInit();
        }
    }

    function actualInit() {
        console.log('⚡ Starting actual initialization...');
        
        setTimeout(() => {
            console.log('🎨 Creating control panel...');
            forceCreatePanel();
            
            setTimeout(() => {
                const autoSendEnabled = settings.auto_send || document.getElementById('a1111-auto')?.checked;
                if (autoSendEnabled) {
                    console.log('🤖 Auto-send enabled, starting monitoring...');
                    startResponseMonitoring();
                } else {
                    console.log('🤖 Auto-send disabled, monitoring inactive');
                }
            }, 500);
            
            setTimeout(() => {
                if (!document.getElementById('a1111-floating-btn')) {
                    console.log('🔄 Floating button missing, recreating...');
                    createFloatingButton();
                }
                
                console.log('✅ LOKI\'S EXTENSION: FULLY INITIALIZED');
            }, 2000);
            
        }, 1000);
    }

    // START THE MAGIC
    initializeLokiExtension();

})();
Content is user-generated and unverified.