synthos 0.10.0 → 0.11.0

package/static-files/page.v3.js

@@ -1,1290 +1,1292 @@
-(function() {
-    // Fallback navigation — overridden in section 10 with unsaved-changes guard
-    if (!window.__synthOSNavigateTo) {
-        window.__synthOSNavigateTo = function(url) { window.location.href = url; };
-    }
-
-    if (window.__synthOSChatPanel) return;
-    window.__synthOSChatPanel = true;
-
-    // Product name — used for branding throughout the page script
-    var pn = (window.pageInfo && window.pageInfo.productName) ? window.pageInfo.productName : 'SynthOS';
-
-    // 0. First-run greeting — replace default greeting when ?firstRun=true
-    (function() {
-        var params = new URLSearchParams(window.location.search);
-        if (params.get('firstRun') !== 'true') return;
-        var greeting = document.getElementById('defaultGreeting');
-        if (!greeting) return;
-        greeting.innerHTML =
-            '<p><strong>Welcome to ' + pn + '!</strong></p>' +
-            '<p>You\'re all set up and ready to start creating. This is the <strong>Builder</strong> — your main workspace. Just type what you want to build into the chat and ' + pn + ' will generate it for you as a live, interactive page.</p>' +
-            '<p>You can create just about anything: dashboards, tools, games, visualizations, forms, calculators — if it can be expressed as a web page, you can build it here through conversation.</p>' +
-            '<p><strong>How pages work:</strong></p>' +
-            '<ul>' +
-                '<li>Each creation lives on its own <strong>page</strong>. When you save, it gets a name and becomes part of your collection.</li>' +
-                '<li>The <strong>Pages</strong> button (in the link bar above) takes you to the <strong>Pages Gallery</strong> where you can browse, open, and manage all your saved creations.</li>' +
-            '</ul>' +
-            '<p><strong>Key actions:</strong></p>' +
-            '<ul>' +
-                '<li><strong>Save</strong> — saves your current page. You\'ll be prompted for a name the first time. <em>Save often!</em> Your work only persists when you save it.</li>' +
-                '<li><strong>Reset</strong> — clears the current page back to a blank slate. Useful when you want to start fresh on something new.</li>' +
-            '</ul>' +
-            '<p>When you\'re ready, we recommend trying the <a href="/solar_tutorial">Solar Tutorial</a> — it\'s a guided walkthrough that will show you the basics of creating with ' + pn + ' step by step.</p>' +
-            '<p>Have fun building!</p>';
-    })();
-
-    // 1. Themed tooltips for chat panel controls
-    (function() {
-        var style = document.createElement('style');
-        style.textContent =
-            '.synthos-tooltip {' +
-                'position: fixed;' +
-                'padding: 6px 10px;' +
-                'background: var(--bg-tertiary, #0f0f23);' +
-                'color: var(--text-secondary, #b794f6);' +
-                'border: 1px solid var(--border-color, rgba(138,43,226,0.3));' +
-                'border-radius: 6px;' +
-                'font-size: 12px;' +
-                'max-width: 150px;' +
-                'text-align: center;' +
-                'pointer-events: none;' +
-                'z-index: 10000;' +
-                'box-shadow: 0 2px 8px rgba(0,0,0,0.3);' +
-                'opacity: 0;' +
-                'transition: opacity 0.15s;' +
-            '}' +
-            '.synthos-tooltip.visible { opacity: 1; }';
-        document.head.appendChild(style);
-
-        var tip = document.createElement('div');
-        tip.className = 'synthos-tooltip';
-        document.body.appendChild(tip);
-
-        function show(el) {
-            tip.textContent = el.getAttribute('data-tooltip');
-            tip.style.display = 'block';
-            tip.classList.remove('visible');
-            var r = el.getBoundingClientRect();
-            var tw = tip.offsetWidth;
-            var left = r.left + (r.width / 2) - (tw / 2);
-            if (left < 4) left = 4;
-            if (left + tw > window.innerWidth - 4) left = window.innerWidth - tw - 4;
-            tip.style.left = left + 'px';
-            tip.style.top = (r.top - tip.offsetHeight - 6) + 'px';
-            void tip.offsetWidth;
-            tip.classList.add('visible');
-        }
-
-        function hide() {
-            tip.classList.remove('visible');
-            tip.style.display = 'none';
-        }
-        hide();
-
-        function attach(el, text) {
-            el.setAttribute('data-tooltip', text);
-            el.addEventListener('mouseenter', function() { show(el); });
-            el.addEventListener('mouseleave', hide);
-        }
-
-        window.__synthOSTooltip = attach;
-    })();
-
-    var chatInput = document.getElementById('chatInput');
-
-    // 2. Form submit handler — fetch+JSON with attachment support
-    var chatForm = document.getElementById('chatForm');
-    if (chatForm) {
-        chatForm.addEventListener('submit', function(e) {
-            e.preventDefault();
-
-            var ci = document.getElementById('chatInput');
-            var messageText = ci ? ci.value : '';
-
-            // Append any captured console errors to the outgoing message
-            var errors = window.__synthOSErrors;
-            if (errors && errors.length > 0 && messageText.trim()) {
-                messageText = messageText + '\n\nCONSOLE_ERRORS:\n' + errors.join('\n---\n');
-                window.__synthOSErrors = [];
-            }
-
-            if (!messageText.trim()) return;
-
-            // Show overlay and disable inputs
-            var overlay = document.getElementById('loadingOverlay');
-            if (overlay) overlay.style.display = 'flex';
-            setTimeout(function() {
-                if (ci) ci.disabled = true;
-                var sb = document.querySelector('.chat-send-btn');
-                if (sb) sb.disabled = true;
-            }, 50);
-
-            // Build JSON body with optional attachments
-            var body = { message: messageText };
-            var attachments = window.__synthOSAttachments;
-            if (attachments && attachments.length > 0) {
-                body.attachments = attachments.map(function(a) {
-                    return { mediaType: a.mediaType, data: a.data, name: a.name };
-                });
-            }
-
-            fetch(window.location.pathname, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(body)
-            })
-            .then(function(res) { return res.text(); })
-            .then(function(html) {
-                // Mark page as dirty (unsaved changes) for required-page prompt
-                window.__synthOSPageDirty = true;
-                // Reset guards so page-v3.js re-initializes on the new DOM
-                window.__synthOSChatPanel = false;
-                window.__synthOSNavigateTo = null;
-                document.open();
-                document.write(html);
-                document.close();
-            })
-            .catch(function(err) {
-                console.error('Submit failed:', err);
-                if (overlay) overlay.style.display = 'none';
-                if (ci) ci.disabled = false;
-                var sb = document.querySelector('.chat-send-btn');
-                if (sb) sb.disabled = false;
-            });
-
-            // Clear attachments after submit
-            window.__synthOSAttachments = [];
-            var pillsContainer = document.querySelector('.attachment-pills');
-            if (pillsContainer) pillsContainer.innerHTML = '';
-        });
-    }
-
-    // 2b. Enter submits, Shift+Enter adds newline
-    (function() {
-        var ci = document.getElementById('chatInput');
-        if (!ci) return;
-        ci.addEventListener('keydown', function(e) {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                var form = document.getElementById('chatForm');
-                if (form) form.requestSubmit();
-            }
-        });
-    })();
-
-    // 3. Save modal — themed modal with title, categories, greeting
-    (function() {
-
-        // Detect if current page is a Builders or System page (start with blank fields)
-        var isBuilder = window.pageInfo && Array.isArray(window.pageInfo.categories) &&
-            (window.pageInfo.categories.indexOf('Builders') !== -1 ||
-             window.pageInfo.categories.indexOf('System') !== -1);
-
-        // Original title for change detection
-        var originalTitle = (window.pageInfo && window.pageInfo.title) ? window.pageInfo.title : '';
-
-        // --- Create save modal ---
-        var modal = document.createElement('div');
-        modal.id = 'synthos-saveModal';
-        modal.className = 'modal-overlay';
-        modal.innerHTML =
-            '<div class="modal-content" style="max-width:480px;">' +
-                '<div class="modal-header">' +
-                    '<span>Save Page</span>' +
-                    '<button type="button" class="brainstorm-close-btn" id="synthos-saveCloseBtn">&times;</button>' +
-                '</div>' +
-                '<div class="modal-body" style="display:flex;flex-direction:column;gap:12px;padding:16px 20px;">' +
-                    '<div>' +
-                        '<label style="display:block;margin-bottom:4px;font-size:13px;color:var(--text-secondary);">Display Title <span style="color:var(--accent-primary);">*</span></label>' +
-                        '<input type="text" id="synthos-saveTitleInput" class="brainstorm-input" placeholder="Enter a display title..." style="width:100%;box-sizing:border-box;">' +
-                        '<div id="synthos-saveTitleError" style="color:#ff6b6b;font-size:12px;margin-top:4px;display:none;">Title is required</div>' +
-                    '</div>' +
-                    '<div>' +
-                        '<label style="display:block;margin-bottom:4px;font-size:13px;color:var(--text-secondary);">Categories <span style="color:var(--accent-primary);">*</span></label>' +
-                        '<input type="text" id="synthos-saveCategoriesInput" class="brainstorm-input" placeholder="e.g. Tool, Game, Utility" style="width:100%;box-sizing:border-box;">' +
-                        '<div id="synthos-saveCategoriesError" style="color:#ff6b6b;font-size:12px;margin-top:4px;display:none;">At least one category is required</div>' +
-                    '</div>' +
-                    '<div>' +
-                        '<label style="display:block;margin-bottom:4px;font-size:13px;color:var(--text-secondary);">Greeting <span style="font-size:11px;opacity:0.7;">(optional)</span></label>' +
-                        '<input type="text" id="synthos-saveGreetingInput" class="brainstorm-input" placeholder="Available when title changes" style="width:100%;box-sizing:border-box;" disabled>' +
-                        '<div style="font-size:11px;color:var(--text-secondary);margin-top:4px;opacity:0.7;" id="synthos-saveGreetingHint">Change the title to enable a custom greeting.</div>' +
-                    '</div>' +
-                '</div>' +
-                '<div class="modal-footer" style="display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;">' +
-                    '<button type="button" class="brainstorm-send-btn" id="synthos-saveCancelBtn" style="background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);">Cancel</button>' +
-                    '<button type="button" class="brainstorm-send-btn" id="synthos-saveConfirmBtn">Save</button>' +
-                '</div>' +
-            '</div>';
-        document.body.appendChild(modal);
-
-        // --- Create error modal ---
-        var errorModal = document.createElement('div');
-        errorModal.id = 'synthos-errorModal';
-        errorModal.className = 'modal-overlay';
-        errorModal.innerHTML =
-            '<div class="modal-content" style="max-width:400px;">' +
-                '<div class="modal-header">' +
-                    '<span>Error</span>' +
-                    '<button type="button" class="brainstorm-close-btn" id="synthos-errorCloseBtn">&times;</button>' +
-                '</div>' +
-                '<div class="modal-body" style="padding:16px 20px;">' +
-                    '<p id="synthos-errorMessage" style="margin:0;color:var(--text-primary);"></p>' +
-                '</div>' +
-                '<div class="modal-footer" style="display:flex;justify-content:flex-end;padding:12px 20px;">' +
-                    '<button type="button" class="brainstorm-send-btn" id="synthos-errorOkBtn">OK</button>' +
-                '</div>' +
-            '</div>';
-        document.body.appendChild(errorModal);
-
-        // --- Element references ---
-        var titleInput = document.getElementById('synthos-saveTitleInput');
-        var categoriesInput = document.getElementById('synthos-saveCategoriesInput');
-        var greetingInput = document.getElementById('synthos-saveGreetingInput');
-        var greetingHint = document.getElementById('synthos-saveGreetingHint');
-        var titleError = document.getElementById('synthos-saveTitleError');
-        var categoriesError = document.getElementById('synthos-saveCategoriesError');
-
-        // --- Greeting enable/disable based on title change ---
-        titleInput.addEventListener('input', function() {
-            var changed = titleInput.value.trim() !== originalTitle;
-            greetingInput.disabled = !changed;
-            if (changed) {
-                greetingInput.placeholder = 'Enter a custom greeting...';
-                greetingHint.textContent = 'Replaces the initial Synthos greeting and removes chat history.';
-            } else {
-                greetingInput.placeholder = 'Available when title changes';
-                greetingInput.value = '';
-                greetingHint.textContent = 'Change the title to enable a custom greeting.';
-            }
-        });
-
-        // --- Open modal ---
-        function openSaveModal() {
-            // Pre-fill fields (blank for Builder pages)
-            titleInput.value = isBuilder ? '' : originalTitle;
-            categoriesInput.value = isBuilder ? '' : (
-                (window.pageInfo && Array.isArray(window.pageInfo.categories))
-                    ? window.pageInfo.categories.join(', ')
-                    : ''
-            );
-            greetingInput.value = '';
-            greetingInput.disabled = true;
-            greetingInput.placeholder = 'Available when title changes';
-            greetingHint.textContent = 'Change the title to enable a custom greeting.';
-            titleError.style.display = 'none';
-            categoriesError.style.display = 'none';
-            modal.classList.add('show');
-            titleInput.focus();
-        }
-
-        function closeSaveModal() {
-            modal.classList.remove('show');
-        }
-
-        function showError(msg) {
-            document.getElementById('synthos-errorMessage').textContent = msg;
-            errorModal.classList.add('show');
-        }
-
-        function closeError() {
-            errorModal.classList.remove('show');
-        }
-
-        // --- Submit ---
-        function submitSave() {
-            var title = titleInput.value.trim();
-            var cats = categoriesInput.value.trim();
-            var greeting = greetingInput.value.trim();
-            var valid = true;
-
-            // Validate
-            if (!title) {
-                titleError.style.display = 'block';
-                valid = false;
-            } else {
-                titleError.style.display = 'none';
-            }
-            if (!cats) {
-                categoriesError.style.display = 'block';
-                valid = false;
-            } else {
-                categoriesError.style.display = 'none';
-            }
-            if (!valid) return;
-
-            // Parse categories
-            var categories = cats.split(',').map(function(c) { return c.trim(); }).filter(Boolean);
-
-            // Disable button during save
-            var confirmBtn = document.getElementById('synthos-saveConfirmBtn');
-            confirmBtn.disabled = true;
-            confirmBtn.textContent = 'Saving...';
-
-            var body = { title: title, categories: categories };
-            if (greeting && !greetingInput.disabled) {
-                body.greeting = greeting;
-            }
-
-            fetch(window.location.pathname + '/save', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(body)
-            })
-            .then(function(res) {
-                return res.json().then(function(data) {
-                    return { ok: res.ok, data: data };
-                });
-            })
-            .then(function(result) {
-                if (result.ok && result.data.redirect) {
-                    window.__synthOSPageDirty = false;
-                    window.location.href = result.data.redirect;
-                } else {
-                    closeSaveModal();
-                    showError(result.data.error || 'An unknown error occurred');
-                    confirmBtn.disabled = false;
-                    confirmBtn.textContent = 'Save';
-                }
-            })
-            .catch(function(err) {
-                closeSaveModal();
-                showError('Network error: ' + err.message);
-                confirmBtn.disabled = false;
-                confirmBtn.textContent = 'Save';
-            });
-        }
-
-        // Expose openSaveModal globally for toolbar button
-        window.__synthOSOpenSaveModal = openSaveModal;
-
-        // --- Event listeners ---
-        document.getElementById('synthos-saveCloseBtn').addEventListener('click', closeSaveModal);
-        document.getElementById('synthos-saveCancelBtn').addEventListener('click', closeSaveModal);
-        document.getElementById('synthos-saveConfirmBtn').addEventListener('click', submitSave);
-        document.getElementById('synthos-errorCloseBtn').addEventListener('click', closeError);
-        document.getElementById('synthos-errorOkBtn').addEventListener('click', closeError);
-
-        var saveModalMouseDownTarget = null;
-        modal.addEventListener('mousedown', function(e) { saveModalMouseDownTarget = e.target; });
-        modal.addEventListener('click', function(e) {
-            if (e.target === modal && saveModalMouseDownTarget === modal) closeSaveModal();
-            saveModalMouseDownTarget = null;
-        });
-        var errorModalMouseDownTarget = null;
-        errorModal.addEventListener('mousedown', function(e) { errorModalMouseDownTarget = e.target; });
-        errorModal.addEventListener('click', function(e) {
-            if (e.target === errorModal && errorModalMouseDownTarget === errorModal) closeError();
-            errorModalMouseDownTarget = null;
-        });
-
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Escape') {
-                if (modal.classList.contains('show')) closeSaveModal();
-                if (errorModal.classList.contains('show')) closeError();
-            }
-        });
-
-        // Enter key in title/categories inputs triggers save
-        titleInput.addEventListener('keydown', function(e) {
-            if (e.key === 'Enter') { e.preventDefault(); submitSave(); }
-        });
-        categoriesInput.addEventListener('keydown', function(e) {
-            if (e.key === 'Enter') { e.preventDefault(); submitSave(); }
-        });
-    })();
-
-    // 4. Chat scroll to bottom
-    var chatMessages = document.getElementById('chatMessages');
-    if (chatMessages) {
-        chatMessages.scrollTo({
-            top: chatMessages.scrollHeight,
-            behavior: 'smooth'
-        });
-    }
-
-    // 5. Shell toolbar button wiring
-    (function() {
-        var DB_NAME = 'synthos-ui';
-        var STORE_NAME = 'panel-state';
-        var pageName = window.location.pathname.replace(/^\//, '') || 'builder';
-        var isBuilderPage = pageName === 'builder';
-
-        // IndexedDB helpers
-        function openDB(cb) {
-            var req = indexedDB.open(DB_NAME, 1);
-            req.onupgradeneeded = function() {
-                var db = req.result;
-                if (!db.objectStoreNames.contains(STORE_NAME)) {
-                    db.createObjectStore(STORE_NAME);
-                }
-            };
-            req.onsuccess = function() { cb(req.result); };
-            req.onerror = function() { cb(null); };
-        }
-
-        function saveCollapsed(collapsed) {
-            openDB(function(db) {
-                if (!db) return;
-                var tx = db.transaction(STORE_NAME, 'readwrite');
-                tx.objectStore(STORE_NAME).put(collapsed, pageName);
-            });
-        }
-
-        function loadCollapsed(cb) {
-            openDB(function(db) {
-                if (!db) { cb(null); return; }
-                var tx = db.transaction(STORE_NAME, 'readonly');
-                var req = tx.objectStore(STORE_NAME).get(pageName);
-                req.onsuccess = function() { cb(req.result); };
-                req.onerror = function() { cb(null); };
-            });
-        }
-
-        function setCollapsed(collapsed) {
-            if (collapsed) {
-                document.body.classList.add('chat-collapsed');
-            } else {
-                document.body.classList.remove('chat-collapsed');
-            }
-            saveCollapsed(collapsed);
-        }
-
-        // Restore state — builder page always starts open
-        if (isBuilderPage) {
-            document.body.classList.remove('chat-collapsed');
-        } else {
-            loadCollapsed(function(val) {
-                if (val === true) {
-                    document.body.classList.add('chat-collapsed');
-                }
-            });
-        }
-
-        // Builder toggle — show/hide chat panel
-        var builderToggle = document.getElementById('builderToggle');
-        if (builderToggle) {
-            builderToggle.addEventListener('click', function() {
-                var collapsed = !document.body.classList.contains('chat-collapsed');
-                setCollapsed(collapsed);
-            });
-        }
-
-        // Builder close button — same as collapse
-        var builderClose = document.getElementById('builderClose');
-        if (builderClose) {
-            builderClose.addEventListener('click', function() {
-                setCollapsed(true);
-            });
-        }
-
-        // Pages button — navigate to pages gallery
-        var pagesBtn = document.getElementById('pagesBtn');
-        if (pagesBtn) {
-            pagesBtn.addEventListener('click', function() {
-                window.__synthOSNavigateTo('/pages');
-            });
-        }
-
-        // Save button — open save modal
-        var saveBtn = document.getElementById('saveBtn');
-        if (saveBtn) {
-            saveBtn.addEventListener('click', function() {
-                if (window.__synthOSOpenSaveModal) window.__synthOSOpenSaveModal();
-            });
-        }
-
-        // Settings button — navigate to settings page
-        var settingsBtn = document.getElementById('settingsBtn');
-        if (settingsBtn) {
-            settingsBtn.addEventListener('click', function() {
-                window.__synthOSNavigateTo('/settings');
-            });
-        }
-    })();
-
-    // 6. Focus management — prevent viewer content from stealing keystrokes
-    (function() {
-        var ci = document.getElementById('chatInput');
-        var vp = document.getElementById('viewerPanel');
-        if (!ci || !vp) return;
-
-        ci.addEventListener('mousedown', function(e) {
-            e.stopPropagation();
-        });
-
-        ['keydown', 'keyup', 'keypress'].forEach(function(type) {
-            document.addEventListener(type, function(e) {
-                if (document.activeElement === ci) {
-                    // Allow Enter (without Shift) to reach the submit handler
-                    if (e.key === 'Enter' && !e.shiftKey) return;
-                    e.stopImmediatePropagation();
-                }
-            }, true);
-        });
-
-        vp.setAttribute('tabindex', '-1');
-        ci.addEventListener('blur', function() {
-            vp.focus();
-        });
-    })();
-
-    // 7. Brainstorm — dynamic brainstorming UI (available on every v2 page)
-    (function() {
-        var chatInput = document.getElementById('chatInput');
-        if (!chatInput) return;
-
-        // --- Create icon row (.chat-input-wrapper) appended to #chatForm ---
-        var form = document.getElementById('chatForm');
-        var wrapper = document.querySelector('.chat-input-wrapper');
-        if (!wrapper) {
-            wrapper = document.createElement('div');
-            wrapper.className = 'chat-input-wrapper';
-            if (form) form.appendChild(wrapper);
-        }
-
-        // --- Create brainstorm icon button ---
-        var brainstormBtn = document.createElement('button');
-        brainstormBtn.type = 'button';
-        brainstormBtn.className = 'brainstorm-icon-btn';
-        if (window.__synthOSTooltip) window.__synthOSTooltip(brainstormBtn, 'Brainstorm ideas');
-        brainstormBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
-            '<circle cx="12" cy="12" r="3"></circle>' +
-            '<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>' +
-            '</svg>';
-        wrapper.appendChild(brainstormBtn);
-
-        // --- Create send button ---
-        var sendBtn = document.createElement('button');
-        sendBtn.type = 'submit';
-        sendBtn.className = 'chat-send-btn';
-        if (window.__synthOSTooltip) window.__synthOSTooltip(sendBtn, 'Send message');
-        sendBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
-            '<line x1="12" y1="19" x2="12" y2="5"></line>' +
-            '<polyline points="5 12 12 5 19 12"></polyline>' +
-            '</svg>';
-        wrapper.appendChild(sendBtn);
-
-        // --- Auto-grow textarea ---
-        chatInput.addEventListener('input', function() {
-            this.style.height = 'auto';
-            this.style.height = this.scrollHeight + 'px';
-        });
-
-        // --- Create brainstorm modal ---
-        var modal = document.createElement('div');
-        modal.id = 'synthos-brainstormModal';
-        modal.className = 'modal-overlay brainstorm-modal';
-        modal.innerHTML =
-            '<div class="modal-content">' +
-                '<div class="modal-header">' +
-                    '<span>Brainstorm</span>' +
-                    '<button type="button" class="brainstorm-close-btn" id="synthos-brainstormCloseBtn">&times;</button>' +
-                '</div>' +
-                '<div class="brainstorm-messages" id="synthos-brainstormMessages"></div>' +
-                '<div class="brainstorm-input-row">' +
-                    '<input type="text" class="brainstorm-input" id="synthos-brainstormInput" placeholder="What\'s on your mind...">' +
-                    '<button type="button" class="brainstorm-send-btn" id="synthos-brainstormSendBtn">Send</button>' +
-                '</div>' +
-            '</div>';
-        document.body.appendChild(modal);
-
-        // --- State ---
-        var brainstormHistory = [];
-
-        // --- Helpers ---
-        function openBrainstorm() {
-            modal.classList.add('show');
-            // Grab text from chat input as initial topic
-            var topic = chatInput.value.trim();
-            if (topic) {
-                chatInput.value = '';
-                sendBrainstormText(topic, true);
-            } else {
-                // No topic — send context-only opener so LLM starts the brainstorm
-                sendBrainstormText('', true);
-            }
-        }
-
-        function closeBrainstorm() {
-            modal.classList.remove('show');
-            brainstormHistory = [];
-            document.getElementById('synthos-brainstormMessages').innerHTML = '';
-        }
-
-        function scrollBrainstormToBottom() {
-            var el = document.getElementById('synthos-brainstormMessages');
-            el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
-        }
-
-        function escapeHtml(str) {
-            var div = document.createElement('div');
-            div.appendChild(document.createTextNode(str));
-            return div.innerHTML;
-        }
-
-        function appendBrainstormMessage(role, text, prompt, suggestions, isOpener) {
-            var div = document.createElement('div');
-            div.className = 'brainstorm-message ' + (role === 'user' ? 'brainstorm-user' : 'brainstorm-assistant');
-            if (role === 'assistant') {
-                var html;
-                if (typeof marked !== 'undefined') {
-                    html = marked.parse(text);
-                } else {
-                    html = escapeHtml(text);
-                }
-                div.innerHTML = '<strong>' + pn + ':</strong> ' + html;
-                // Clickable suggestion chips
-                if (suggestions && suggestions.length > 0) {
-                    var chips = document.createElement('div');
-                    chips.className = 'brainstorm-suggestions';
-                    suggestions.forEach(function(s) {
-                        var chip = document.createElement('button');
-                        chip.type = 'button';
-                        chip.className = 'brainstorm-suggestion-chip';
-                        chip.textContent = s;
-                        chip.addEventListener('click', function() {
-                            submitSuggestion(s);
-                        });
-                        chips.appendChild(chip);
-                    });
-                    div.appendChild(chips);
-                }
-                // "Build It" button — skip on the opener response
-                if (prompt && !isOpener) {
-                    var btnRow = document.createElement('div');
-                    btnRow.className = 'brainstorm-build-row';
-                    var buildBtn = document.createElement('button');
-                    buildBtn.type = 'button';
-                    buildBtn.className = 'brainstorm-build-btn';
-                    buildBtn.textContent = 'Build It';
-                    buildBtn.setAttribute('data-prompt', prompt);
-                    buildBtn.addEventListener('click', function() {
-                        chatInput.value = this.getAttribute('data-prompt');
-                        closeBrainstorm();
-                        chatInput.focus();
-                    });
-                    btnRow.appendChild(buildBtn);
-                    div.appendChild(btnRow);
-                }
-            } else {
-                div.textContent = text;
-            }
-            document.getElementById('synthos-brainstormMessages').appendChild(div);
-            scrollBrainstormToBottom();
-        }
-
-        function submitSuggestion(text) {
-            // Disable old suggestion chips so they can't be double-clicked
-            var oldChips = document.querySelectorAll('#synthos-brainstormMessages .brainstorm-suggestion-chip');
-            for (var i = 0; i < oldChips.length; i++) {
-                oldChips[i].disabled = true;
-            }
-            sendBrainstormText(text, false);
-        }
-
-        function getBrainstormContext() {
-            var chatEl = document.getElementById('chatMessages');
-            if (!chatEl) return '<CHAT_HISTORY>\n';
-            var msgs = chatEl.querySelectorAll('.chat-message');
-            var lines = [];
-            var started = false;
-            for (var i = 0; i < msgs.length; i++) {
-                var text = msgs[i].innerText;
-                if (!started && /^User:/i.test(text.trim())) started = true;
-                if (started) lines.push(text);
-            }
-            return '<CHAT_HISTORY>\n' + lines.join('\n');
-        }
-
-        // Send from the input field
-        function sendBrainstormMessage() {
-            var input = document.getElementById('synthos-brainstormInput');
-            var text = input.value.trim();
-            if (!text) return;
-            input.value = '';
-            sendBrainstormText(text, false);
-        }
-
-        // Core fetch — isOpener=true means this is the initial call when brainstorm opens
-        function sendBrainstormText(text, isOpener) {
-            var input = document.getElementById('synthos-brainstormInput');
-            var userMsg = text || (isOpener ? 'Look at the conversation so far and suggest what we could build or improve.' : '');
-            if (!userMsg) return;
-
-            // Show user message in chat (skip for auto-generated opener)
-            if (text) {
-                appendBrainstormMessage('user', text);
-            }
-            brainstormHistory.push({ role: 'user', content: userMsg });
-
-            var thinking = document.createElement('div');
-            thinking.className = 'brainstorm-thinking';
-            thinking.id = 'synthos-brainstormThinking';
-            thinking.textContent = 'Thinking...';
-            document.getElementById('synthos-brainstormMessages').appendChild(thinking);
-            scrollBrainstormToBottom();
-
-            input.disabled = true;
-            document.getElementById('synthos-brainstormSendBtn').disabled = true;
-
-            fetch('/api/brainstorm', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    context: getBrainstormContext(),
-                    messages: brainstormHistory
-                })
-            })
-            .then(function(res) {
-                if (!res.ok) throw new Error('Brainstorm request failed');
-                return res.json();
-            })
-            .then(function(data) {
-                var thinkingEl = document.getElementById('synthos-brainstormThinking');
-                if (thinkingEl) thinkingEl.remove();
-
-                var response = data.response || 'Sorry, I didn\'t get a response.';
-                var prompt = data.prompt || '';
-                var suggestions = Array.isArray(data.suggestions) ? data.suggestions : [];
-                appendBrainstormMessage('assistant', response, prompt, suggestions, isOpener);
-                brainstormHistory.push({
-                    role: 'assistant',
-                    content: response + '\n\n[Suggested prompt: ' + prompt + ']'
-                });
-            })
-            .catch(function(err) {
-                var thinkingEl = document.getElementById('synthos-brainstormThinking');
-                if (thinkingEl) thinkingEl.remove();
-                appendBrainstormMessage('assistant', 'Something went wrong: ' + err.message);
-            })
-            .finally(function() {
-                input.disabled = false;
-                document.getElementById('synthos-brainstormSendBtn').disabled = false;
-                input.focus();
-            });
-        }
-
-        // --- Event listeners ---
-        brainstormBtn.addEventListener('click', openBrainstorm);
-        document.getElementById('synthos-brainstormCloseBtn').addEventListener('click', closeBrainstorm);
-
-        var brainstormMouseDownTarget = null;
-        modal.addEventListener('mousedown', function(e) { brainstormMouseDownTarget = e.target; });
-        modal.addEventListener('click', function(e) {
-            if (e.target === modal && brainstormMouseDownTarget === modal) closeBrainstorm();
-            brainstormMouseDownTarget = null;
-        });
-
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Escape' && modal.classList.contains('show')) closeBrainstorm();
-        });
-
-        document.getElementById('synthos-brainstormSendBtn').addEventListener('click', sendBrainstormMessage);
-        document.getElementById('synthos-brainstormInput').addEventListener('keydown', function(e) {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                sendBrainstormMessage();
-            }
-        });
-    })();
-
-    // 8. Attach button — + menu, attachment pills, file picker, screenshot tool
-    (function() {
-        var chatInput = document.getElementById('chatInput');
-        if (!chatInput) return;
-        var chatForm = document.getElementById('chatForm');
-        var wrapper = chatForm ? chatForm.querySelector('.chat-input-wrapper') : null;
-        if (!wrapper) return;
-
-        // --- Attachments state ---
-        if (!window.__synthOSAttachments) window.__synthOSAttachments = [];
-
-        // --- Create pills container (inside #chatForm, before textarea) ---
-        var pillsContainer = document.createElement('div');
-        pillsContainer.className = 'attachment-pills';
-        if (chatForm) {
-            chatForm.insertBefore(pillsContainer, chatForm.firstChild);
-        }
-
-        function renderPills() {
-            pillsContainer.innerHTML = '';
-            var attachments = window.__synthOSAttachments;
-            if (!attachments || attachments.length === 0) return;
-            for (var i = 0; i < attachments.length; i++) {
-                (function(idx) {
-                    var att = attachments[idx];
-                    var pill = document.createElement('div');
-                    pill.className = 'attachment-pill';
-
-                    var thumb = document.createElement('img');
-                    thumb.src = 'data:' + att.mediaType + ';base64,' + att.data;
-                    thumb.style.cssText = 'width:24px;height:24px;object-fit:cover;border-radius:3px;';
-                    pill.appendChild(thumb);
-
-                    var nameSpan = document.createElement('span');
-                    nameSpan.textContent = att.name || 'image';
-                    nameSpan.style.cssText = 'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;';
-                    pill.appendChild(nameSpan);
-
-                    var removeBtn = document.createElement('button');
-                    removeBtn.type = 'button';
-                    removeBtn.className = 'attachment-pill-remove';
-                    removeBtn.textContent = '\u00d7';
-                    removeBtn.addEventListener('click', function() {
-                        window.__synthOSAttachments.splice(idx, 1);
-                        renderPills();
-                    });
-                    pill.appendChild(removeBtn);
-
-                    pillsContainer.appendChild(pill);
-                })(i);
-            }
-        }
-
-        // Expose for debugging
-        window.__synthOSRenderPills = renderPills;
-
-        // --- Helper: add an image attachment from a data URL ---
-        function addImageFromDataUrl(dataUrl, name) {
-            var commaIdx = dataUrl.indexOf(',');
-            if (commaIdx === -1) return;
-            var meta = dataUrl.substring(0, commaIdx); // data:image/png;base64
-            var base64 = dataUrl.substring(commaIdx + 1);
-            var mediaType = meta.replace('data:', '').replace(';base64', '');
-            window.__synthOSAttachments.push({
-                mediaType: mediaType,
-                data: base64,
-                name: name || 'image'
-            });
-            renderPills();
-        }
-
-        // --- Hidden file input ---
-        var fileInput = document.createElement('input');
-        fileInput.type = 'file';
-        fileInput.accept = 'image/*';
-        fileInput.style.display = 'none';
-        document.body.appendChild(fileInput);
-
-        fileInput.addEventListener('change', function() {
-            var file = fileInput.files && fileInput.files[0];
-            if (!file) return;
-            var reader = new FileReader();
-            reader.onload = function() {
-                addImageFromDataUrl(reader.result, file.name);
-            };
-            reader.readAsDataURL(file);
-            fileInput.value = '';
-        });
-
-        // --- Paste image from clipboard (document-level to catch all pastes) ---
-        document.addEventListener('paste', function(e) {
-            // Only handle pastes when chat input is focused or no other editable is focused
-            var active = document.activeElement;
-            var isEditable = active && (active.isContentEditable ||
-                (active.tagName === 'TEXTAREA' && active !== chatInput) ||
-                (active.tagName === 'INPUT' && active !== chatInput));
-            if (isEditable) return;
-
-            var items = e.clipboardData && e.clipboardData.items;
-            if (!items) return;
-            for (var i = 0; i < items.length; i++) {
-                if (items[i].type.indexOf('image/') === 0) {
-                    var blob = items[i].getAsFile();
-                    if (!blob) continue;
-                    e.preventDefault();
-                    var reader = new FileReader();
-                    reader.onload = function() {
-                        addImageFromDataUrl(reader.result, 'pasted-image.png');
-                    };
-                    reader.readAsDataURL(blob);
-                    return; // only handle the first image
-                }
-            }
-        });
-
-        // --- + button ---
-        var attachBtn = document.createElement('button');
-        attachBtn.type = 'button';
-        attachBtn.className = 'attach-btn';
-        if (window.__synthOSTooltip) window.__synthOSTooltip(attachBtn, 'Attach file or screenshot');
-        attachBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>';
-        wrapper.insertBefore(attachBtn, wrapper.firstChild);
-
-        // --- Popup menu ---
-        var menu = document.createElement('div');
-        menu.className = 'attach-menu';
-
-        var menuAttachFile = document.createElement('div');
-        menuAttachFile.className = 'attach-menu-item';
-        menuAttachFile.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"></path></svg> Attach File';
-        menu.appendChild(menuAttachFile);
-
-        var menuScreenshot = document.createElement('div');
-        menuScreenshot.className = 'attach-menu-item';
-        menuScreenshot.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg> Screenshot';
-        menu.appendChild(menuScreenshot);
-
-        wrapper.appendChild(menu);
-
-        var menuOpen = false;
-        function toggleMenu() {
-            menuOpen = !menuOpen;
-            menu.style.display = menuOpen ? 'flex' : 'none';
-        }
-        function closeMenu() {
-            menuOpen = false;
-            menu.style.display = 'none';
-        }
-
-        attachBtn.addEventListener('click', function(e) {
-            e.stopPropagation();
-            toggleMenu();
-        });
-
-        document.addEventListener('click', function() {
-            if (menuOpen) closeMenu();
-        });
-        menu.addEventListener('click', function(e) { e.stopPropagation(); });
-
-        menuAttachFile.addEventListener('click', function() {
-            closeMenu();
-            fileInput.click();
-        });
-
-        // --- Screenshot annotation flow (multi-rectangle) ---
-        menuScreenshot.addEventListener('click', function() {
-            closeMenu();
-            startScreenshotAnnotation();
-        });
-
-        function startScreenshotAnnotation() {
-            var viewerPanel = document.getElementById('viewerPanel');
-            if (!viewerPanel) return;
-
-            // Create overlay
-            var overlay = document.createElement('div');
-            overlay.className = 'screenshot-overlay';
-
-            // Instructions bar
-            var instrBar = document.createElement('div');
-            instrBar.style.cssText = 'position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:white;padding:6px 14px;border-radius:6px;font-size:13px;z-index:10;pointer-events:none;';
-            instrBar.textContent = 'Draw rectangles to highlight areas, then click Capture';
-            overlay.appendChild(instrBar);
-
-            // Persistent action buttons (always visible)
-            var actions = document.createElement('div');
-            actions.className = 'screenshot-actions';
-            actions.style.cssText = 'position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;';
-
-            var captureBtn = document.createElement('button');
-            captureBtn.type = 'button';
-            captureBtn.textContent = 'Capture';
-            captureBtn.className = 'brainstorm-send-btn';
-            captureBtn.style.cssText = 'padding:6px 16px;font-size:13px;';
-
-            var cancelBtn = document.createElement('button');
-            cancelBtn.type = 'button';
-            cancelBtn.textContent = 'Cancel';
-            cancelBtn.className = 'brainstorm-send-btn';
-            cancelBtn.style.cssText = 'padding:6px 16px;font-size:13px;background:transparent;border:1px solid rgba(255,255,255,0.3);color:white;';
-
-            actions.appendChild(captureBtn);
-            actions.appendChild(cancelBtn);
-            overlay.appendChild(actions);
-
-            // Drawing state
-            var currentRect = null;
-            var startX, startY, isDrawing = false;
-            var allRects = []; // Array of {el, x, y, w, h}
-
-            overlay.addEventListener('mousedown', function(e) {
-                if (e.target.tagName === 'BUTTON') return;
-                isDrawing = true;
-                var overlayBounds = overlay.getBoundingClientRect();
-                startX = e.clientX - overlayBounds.left;
-                startY = e.clientY - overlayBounds.top;
-
-                // Create a new rectangle element
-                currentRect = document.createElement('div');
-                currentRect.className = 'screenshot-rect';
-                currentRect.style.display = 'block';
-                currentRect.style.left = startX + 'px';
-                currentRect.style.top = startY + 'px';
-                currentRect.style.width = '0';
-                currentRect.style.height = '0';
-                overlay.appendChild(currentRect);
-            });
-
-            overlay.addEventListener('mousemove', function(e) {
-                if (!isDrawing || !currentRect) return;
-                var overlayBounds = overlay.getBoundingClientRect();
-                var curX = e.clientX - overlayBounds.left;
-                var curY = e.clientY - overlayBounds.top;
-                var x = Math.min(startX, curX);
-                var y = Math.min(startY, curY);
-                var w = Math.abs(curX - startX);
-                var h = Math.abs(curY - startY);
-                currentRect.style.left = x + 'px';
-                currentRect.style.top = y + 'px';
-                currentRect.style.width = w + 'px';
-                currentRect.style.height = h + 'px';
-            });
-
-            overlay.addEventListener('mouseup', function() {
-                if (!isDrawing || !currentRect) return;
-                isDrawing = false;
-                var w = parseInt(currentRect.style.width);
-                var h = parseInt(currentRect.style.height);
-                if (w < 10 || h < 10) {
-                    // Too small — discard
-                    currentRect.remove();
-                    currentRect = null;
-                    return;
-                }
-                allRects.push({
-                    el: currentRect,
-                    x: parseInt(currentRect.style.left),
-                    y: parseInt(currentRect.style.top),
-                    w: w,
-                    h: h
-                });
-                currentRect = null;
-            });
-
-            captureBtn.addEventListener('click', function() {
-                doCapture();
-            });
-            cancelBtn.addEventListener('click', function() {
-                cleanup();
-            });
-
-            function doCapture() {
-                if (typeof html2canvas === 'undefined') {
-                    console.error('html2canvas not loaded');
-                    cleanup();
-                    return;
-                }
-
-                // Capture the full viewer panel without the overlay
-                overlay.style.visibility = 'hidden';
-
-                html2canvas(viewerPanel, { useCORS: true, logging: false }).then(function(fullCanvas) {
-                    // Draw red rectangles onto the captured canvas
-                    var vpRect = viewerPanel.getBoundingClientRect();
-                    var scaleX = fullCanvas.width / vpRect.width;
-                    var scaleY = fullCanvas.height / vpRect.height;
-
-                    var ctx = fullCanvas.getContext('2d');
-                    ctx.strokeStyle = 'red';
-                    ctx.lineWidth = 3 * Math.max(scaleX, scaleY);
-
-                    for (var i = 0; i < allRects.length; i++) {
-                        var r = allRects[i];
-                        ctx.strokeRect(
-                            Math.round(r.x * scaleX),
-                            Math.round(r.y * scaleY),
-                            Math.round(r.w * scaleX),
-                            Math.round(r.h * scaleY)
-                        );
-                    }
-
-                    var dataUrl = fullCanvas.toDataURL('image/png');
-                    var base64 = dataUrl.split(',')[1];
-                    window.__synthOSAttachments.push({
-                        mediaType: 'image/png',
-                        data: base64,
-                        name: 'screenshot.png'
-                    });
-                    renderPills();
-                    cleanup();
-                }).catch(function(err) {
-                    console.error('Screenshot capture failed:', err);
-                    cleanup();
-                });
-            }
-
-            function cleanup() {
-                if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
-                document.removeEventListener('keydown', onKeyDown);
-            }
-
-            // Escape to cancel
-            function onKeyDown(e) {
-                if (e.key === 'Escape') {
-                    cleanup();
-                }
-            }
-            document.addEventListener('keydown', onKeyDown);
-
-            viewerPanel.style.position = 'relative';
-            viewerPanel.appendChild(overlay);
-        }
-    })();
-
-    // 9. Undo link — shown after the last chat message when a version exists
-    (function() {
-        var meta = document.querySelector('meta[name="synthos-version"]');
-        if (!meta) return;
-        var version = parseInt(meta.getAttribute('content'), 10);
-        if (!version || version <= 0) return;
-
-        var cm = document.getElementById('chatMessages');
-        if (!cm) return;
-
-        // Remove any existing undo links
-        var existing = cm.querySelectorAll('.synthos-undo-link');
-        for (var i = 0; i < existing.length; i++) existing[i].remove();
-
-        // Create undo link div
-        var undoDiv = document.createElement('div');
-        undoDiv.className = 'synthos-undo-link';
-        undoDiv.style.cssText = 'text-align:right;padding:4px 12px 2px;';
-
-        var link = document.createElement('a');
-        link.href = '#';
-        link.textContent = 'undo';
-        link.style.cssText = 'color:var(--accent-primary,#a78bfa);font-size:12px;text-decoration:none;opacity:0.7;';
-        link.addEventListener('mouseenter', function() { link.style.opacity = '1'; link.style.textDecoration = 'underline'; });
-        link.addEventListener('mouseleave', function() { link.style.opacity = '0.7'; link.style.textDecoration = 'none'; });
-
-        link.addEventListener('click', function(e) {
-            e.preventDefault();
-            var overlay = document.getElementById('loadingOverlay');
-            if (overlay) overlay.style.display = 'flex';
-
-            fetch(window.location.pathname + '/undo', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: '{}'
-            })
-            .then(function(res) { return res.text(); })
-            .then(function(html) {
-                window.__synthOSChatPanel = false;
-                window.__synthOSPageDirty = false;
-                window.__synthOSNavigateTo = null;
-                document.open();
-                document.write(html);
-                document.close();
-            })
-            .catch(function(err) {
-                console.error('Undo failed:', err);
-                if (overlay) overlay.style.display = 'none';
-            });
-        });
-
-        undoDiv.appendChild(link);
-
-        // "try again" link — re-submits the last user message against the previous page state
-        var msgs = cm.querySelectorAll('.chat-message');
-        var lastUserMsg = '';
-        for (var j = msgs.length - 1; j >= 0; j--) {
-            var strong = msgs[j].querySelector('strong');
-            if (strong && strong.textContent.trim().replace(/:$/, '') === 'User') {
-                // Get the text content after "User:" — everything in the <p> minus the strong
-                var p = msgs[j].querySelector('p');
-                if (p) {
-                    var clone = p.cloneNode(true);
-                    var s = clone.querySelector('strong');
-                    if (s) s.remove();
-                    lastUserMsg = clone.textContent.trim();
-                }
-                break;
-            }
-        }
-
-        if (lastUserMsg) {
-            var sep = document.createTextNode('  ·  ');
-            undoDiv.appendChild(sep);
-
-            var tryLink = document.createElement('a');
-            tryLink.href = '#';
-            tryLink.textContent = 'try again';
-            tryLink.style.cssText = 'color:var(--accent-primary,#a78bfa);font-size:12px;text-decoration:none;opacity:0.7;';
-            tryLink.addEventListener('mouseenter', function() { tryLink.style.opacity = '1'; tryLink.style.textDecoration = 'underline'; });
-            tryLink.addEventListener('mouseleave', function() { tryLink.style.opacity = '0.7'; tryLink.style.textDecoration = 'none'; });
-
-            tryLink.addEventListener('click', function(e) {
-                e.preventDefault();
-                var overlay = document.getElementById('loadingOverlay');
-                if (overlay) overlay.style.display = 'flex';
-                var ci = document.getElementById('chatInput');
-                if (ci) ci.disabled = true;
-                var sb = document.querySelector('.chat-send-btn');
-                if (sb) sb.disabled = true;
-
-                fetch(window.location.pathname, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ message: lastUserMsg, tryAgain: true })
-                })
-                .then(function(res) { return res.text(); })
-                .then(function(html) {
-                    window.__synthOSPageDirty = true;
-                    window.__synthOSChatPanel = false;
-                    window.__synthOSNavigateTo = null;
-                    document.open();
-                    document.write(html);
-                    document.close();
-                })
-                .catch(function(err) {
-                    console.error('Try again failed:', err);
-                    if (overlay) overlay.style.display = 'none';
-                    if (ci) ci.disabled = false;
-                    if (sb) sb.disabled = false;
-                });
-            });
-
-            undoDiv.appendChild(tryLink);
-        }
-
-        cm.appendChild(undoDiv);
-    })();
-
-    // 10. Unsaved-changes prompt for required pages (FluentLM dialog)
-    (function() {
-        // Create the unsaved-changes confirmation dialog
-        var overlay = document.createElement('div');
-        overlay.className = 'flm-dialog-overlay';
-        overlay.id = 'synthos-unsavedDialog';
-        overlay.innerHTML =
-            '<div class="flm-dialog">' +
-                '<div class="flm-dialog-header">' +
-                    '<h2 class="flm-dialog-title">Unsaved Changes</h2>' +
-                    '<button class="flm-dialog-close" data-icon="Cancel" aria-label="Close" data-dialog-close></button>' +
-                '</div>' +
-                '<div class="flm-dialog-body">You have unsaved changes that will be lost if you leave this page.</div>' +
-                '<div class="flm-dialog-footer">' +
-                    '<button class="flm-button" data-dialog-close id="synthos-unsavedStay">Stay</button>' +
-                    '<button class="flm-button flm-button--primary" id="synthos-unsavedLeave">Leave</button>' +
-                '</div>' +
-            '</div>';
-        document.body.appendChild(overlay);
-
-        var pendingUrl = null;
-
-        document.getElementById('synthos-unsavedLeave').addEventListener('click', function() {
-            overlay.classList.remove('is-open');
-            if (pendingUrl) {
-                window.__synthOSPageDirty = false;
-                window.location.href = pendingUrl;
-            }
-        });
-
-        // Navigate with unsaved-changes guard
-        window.__synthOSNavigateTo = function(url) {
-            if (window.__synthOSPageDirty && window.pageInfo && window.pageInfo.isRequiredPage) {
-                pendingUrl = url;
-                overlay.classList.add('is-open');
-            } else {
-                window.location.href = url;
-            }
-        };
-    })();
-
-    // Initial focus — run after all setup (including chat-collapsed check)
-    if (chatInput && !document.body.classList.contains('chat-collapsed')) {
-        chatInput.focus();
-    }
-})();
+(function() {
+    // Fallback navigation — overridden in section 10 with unsaved-changes guard
+    if (!window.__synthOSNavigateTo) {
+        window.__synthOSNavigateTo = function(url) { window.location.href = url; };
+    }
+
+    if (window.__synthOSChatPanel) return;
+    window.__synthOSChatPanel = true;
+
+    // Product name — used for branding throughout the page script
+    var pn = (window.pageInfo && window.pageInfo.productName) ? window.pageInfo.productName : 'SynthOS';
+
+    // 1. Themed tooltips for chat panel controls
+    (function() {
+        var style = document.createElement('style');
+        style.textContent =
+            '.synthos-tooltip {' +
+                'position: fixed;' +
+                'padding: 6px 10px;' +
+                'background: var(--bg-tertiary, #0f0f23);' +
+                'color: var(--text-secondary, #b794f6);' +
+                'border: 1px solid var(--border-color, rgba(138,43,226,0.3));' +
+                'border-radius: 6px;' +
+                'font-size: 12px;' +
+                'max-width: 150px;' +
+                'text-align: center;' +
+                'pointer-events: none;' +
+                'z-index: 10000;' +
+                'box-shadow: 0 2px 8px rgba(0,0,0,0.3);' +
+                'opacity: 0;' +
+                'transition: opacity 0.15s;' +
+            '}' +
+            '.synthos-tooltip.visible { opacity: 1; }';
+        document.head.appendChild(style);
+
+        var tip = document.createElement('div');
+        tip.className = 'synthos-tooltip';
+        document.body.appendChild(tip);
+
+        function show(el) {
+            tip.textContent = el.getAttribute('data-tooltip');
+            tip.style.display = 'block';
+            tip.classList.remove('visible');
+            var r = el.getBoundingClientRect();
+            var tw = tip.offsetWidth;
+            var left = r.left + (r.width / 2) - (tw / 2);
+            if (left < 4) left = 4;
+            if (left + tw > window.innerWidth - 4) left = window.innerWidth - tw - 4;
+            tip.style.left = left + 'px';
+            tip.style.top = (r.top - tip.offsetHeight - 6) + 'px';
+            void tip.offsetWidth;
+            tip.classList.add('visible');
+        }
+
+        function hide() {
+            tip.classList.remove('visible');
+            tip.style.display = 'none';
+        }
+        hide();
+
+        function attach(el, text) {
+            el.setAttribute('data-tooltip', text);
+            el.addEventListener('mouseenter', function() { show(el); });
+            el.addEventListener('mouseleave', hide);
+        }
+
+        window.__synthOSTooltip = attach;
+    })();
+
+    var chatInput = document.getElementById('chatInput');
+
+    // 2. Form submit handler — fetch+JSON with attachment support
+    var chatForm = document.getElementById('chatForm');
+    if (chatForm) {
+        chatForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            var ci = document.getElementById('chatInput');
+            var messageText = ci ? ci.value : '';
+
+            // Append any captured console errors to the outgoing message
+            var errors = window.__synthOSErrors;
+            if (errors && errors.length > 0 && messageText.trim()) {
+                messageText = messageText + '\n\nCONSOLE_ERRORS:\n' + errors.join('\n---\n');
+                window.__synthOSErrors = [];
+            }
+
+            if (!messageText.trim()) return;
+
+            // Show overlay and disable inputs
+            var overlay = document.getElementById('loadingOverlay');
+            if (overlay) overlay.style.display = 'flex';
+            setTimeout(function() {
+                if (ci) ci.disabled = true;
+                var sb = document.querySelector('.chat-send-btn');
+                if (sb) sb.disabled = true;
+            }, 50);
+
+            // Build JSON body with optional attachments
+            var body = { message: messageText };
+            var attachments = window.__synthOSAttachments;
+            if (attachments && attachments.length > 0) {
+                body.attachments = attachments.map(function(a) {
+                    return { mediaType: a.mediaType, data: a.data, name: a.name };
+                });
+            }
+
+            fetch(window.location.pathname, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body)
+            })
+            .then(function(res) { return res.text(); })
+            .then(function(html) {
+                // Mark page as dirty (unsaved changes) for required-page prompt
+                window.__synthOSPageDirty = true;
+                // Reset guards so page-v3.js re-initializes on the new DOM
+                window.__synthOSChatPanel = false;
+                window.__synthOSNavigateTo = null;
+                document.open();
+                document.write(html);
+                document.close();
+            })
+            .catch(function(err) {
+                console.error('Submit failed:', err);
+                if (overlay) overlay.style.display = 'none';
+                if (ci) ci.disabled = false;
+                var sb = document.querySelector('.chat-send-btn');
+                if (sb) sb.disabled = false;
+            });
+
+            // Clear attachments after submit
+            window.__synthOSAttachments = [];
+            var pillsContainer = document.querySelector('.attachment-pills');
+            if (pillsContainer) pillsContainer.innerHTML = '';
+        });
+    }
+
+    // 2b. Enter submits, Shift+Enter adds newline
+    (function() {
+        var ci = document.getElementById('chatInput');
+        if (!ci) return;
+        ci.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                var form = document.getElementById('chatForm');
+                if (form) form.requestSubmit();
+            }
+        });
+    })();
+
+    // 3. Save modal — themed modal with title, categories, greeting
+    (function() {
+
+        // Detect if current page is a Builders, System, or Starters page (start with blank fields)
+        var isBuilder = window.pageInfo && Array.isArray(window.pageInfo.categories) &&
+            (window.pageInfo.categories.indexOf('Builders') !== -1 ||
+             window.pageInfo.categories.indexOf('System') !== -1 ||
+             window.pageInfo.categories.indexOf('_Starters') !== -1);
+
+        // Original title for change detection
+        var originalTitle = (window.pageInfo && window.pageInfo.title) ? window.pageInfo.title : '';
+
+        // --- Create save modal ---
+        var modal = document.createElement('div');
+        modal.id = 'synthos-saveModal';
+        modal.className = 'modal-overlay';
+        modal.innerHTML =
+            '<div class="modal-content" style="max-width:480px;">' +
+                '<div class="modal-header">' +
+                    '<span>Save Page</span>' +
+                    '<button type="button" class="brainstorm-close-btn" id="synthos-saveCloseBtn">&times;</button>' +
+                '</div>' +
+                '<div class="modal-body" style="display:flex;flex-direction:column;gap:12px;padding:16px 20px;">' +
+                    '<div>' +
+                        '<label style="display:block;margin-bottom:4px;font-size:13px;color:var(--text-secondary);">Display Title <span style="color:var(--accent-primary);">*</span></label>' +
+                        '<input type="text" id="synthos-saveTitleInput" class="brainstorm-input" placeholder="Enter a display title..." style="width:100%;box-sizing:border-box;">' +
+                        '<div id="synthos-saveTitleError" style="color:#ff6b6b;font-size:12px;margin-top:4px;display:none;">Title is required</div>' +
+                    '</div>' +
+                    '<div>' +
+                        '<label style="display:block;margin-bottom:4px;font-size:13px;color:var(--text-secondary);">Categories <span style="color:var(--accent-primary);">*</span></label>' +
+                        '<input type="text" id="synthos-saveCategoriesInput" class="brainstorm-input" placeholder="e.g. Tool, Game, Utility" style="width:100%;box-sizing:border-box;">' +
+                        '<div id="synthos-saveCategoriesError" style="color:#ff6b6b;font-size:12px;margin-top:4px;display:none;">At least one category is required</div>' +
+                    '</div>' +
+                    '<div>' +
+                        '<label style="display:block;margin-bottom:4px;font-size:13px;color:var(--text-secondary);">Greeting <span style="font-size:11px;opacity:0.7;">(optional)</span></label>' +
+                        '<input type="text" id="synthos-saveGreetingInput" class="brainstorm-input" placeholder="Available when title changes" style="width:100%;box-sizing:border-box;" disabled>' +
+                        '<div style="font-size:11px;color:var(--text-secondary);margin-top:4px;opacity:0.7;" id="synthos-saveGreetingHint">Change the title to enable a custom greeting.</div>' +
+                    '</div>' +
+                '</div>' +
+                '<div class="modal-footer" style="display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;">' +
+                    '<button type="button" class="brainstorm-send-btn" id="synthos-saveCancelBtn" style="background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);">Cancel</button>' +
+                    '<button type="button" class="brainstorm-send-btn" id="synthos-saveConfirmBtn">Save</button>' +
+                '</div>' +
+            '</div>';
+        document.body.appendChild(modal);
+
+        // --- Create error modal ---
+        var errorModal = document.createElement('div');
+        errorModal.id = 'synthos-errorModal';
+        errorModal.className = 'modal-overlay';
+        errorModal.innerHTML =
+            '<div class="modal-content" style="max-width:400px;">' +
+                '<div class="modal-header">' +
+                    '<span>Error</span>' +
+                    '<button type="button" class="brainstorm-close-btn" id="synthos-errorCloseBtn">&times;</button>' +
+                '</div>' +
+                '<div class="modal-body" style="padding:16px 20px;">' +
+                    '<p id="synthos-errorMessage" style="margin:0;color:var(--text-primary);"></p>' +
+                '</div>' +
+                '<div class="modal-footer" style="display:flex;justify-content:flex-end;padding:12px 20px;">' +
+                    '<button type="button" class="brainstorm-send-btn" id="synthos-errorOkBtn">OK</button>' +
+                '</div>' +
+            '</div>';
+        document.body.appendChild(errorModal);
+
+        // --- Element references ---
+        var titleInput = document.getElementById('synthos-saveTitleInput');
+        var categoriesInput = document.getElementById('synthos-saveCategoriesInput');
+        var greetingInput = document.getElementById('synthos-saveGreetingInput');
+        var greetingHint = document.getElementById('synthos-saveGreetingHint');
+        var titleError = document.getElementById('synthos-saveTitleError');
+        var categoriesError = document.getElementById('synthos-saveCategoriesError');
+
+        // --- Greeting enable/disable based on title change ---
+        titleInput.addEventListener('input', function() {
+            var changed = titleInput.value.trim() !== originalTitle;
+            greetingInput.disabled = !changed;
+            if (changed) {
+                greetingInput.placeholder = 'Enter a custom greeting...';
+                greetingHint.textContent = 'Replaces the initial Synthos greeting and removes chat history.';
+            } else {
+                greetingInput.placeholder = 'Available when title changes';
+                greetingInput.value = '';
+                greetingHint.textContent = 'Change the title to enable a custom greeting.';
+            }
+        });
+
+        // --- Open modal ---
+        function openSaveModal() {
+            // Pre-fill fields (blank for Builder pages)
+            titleInput.value = isBuilder ? '' : originalTitle;
+            categoriesInput.value = isBuilder ? '' : (
+                (window.pageInfo && Array.isArray(window.pageInfo.categories))
+                    ? window.pageInfo.categories.join(', ')
+                    : ''
+            );
+            greetingInput.value = '';
+            greetingInput.disabled = true;
+            greetingInput.placeholder = 'Available when title changes';
+            greetingHint.textContent = 'Change the title to enable a custom greeting.';
+            titleError.style.display = 'none';
+            categoriesError.style.display = 'none';
+            modal.classList.add('show');
+            titleInput.focus();
+        }
+
+        function closeSaveModal() {
+            modal.classList.remove('show');
+        }
+
+        function showError(msg) {
+            document.getElementById('synthos-errorMessage').textContent = msg;
+            errorModal.classList.add('show');
+        }
+
+        function closeError() {
+            errorModal.classList.remove('show');
+        }
+
+        // --- Submit ---
+        function submitSave() {
+            var title = titleInput.value.trim();
+            var cats = categoriesInput.value.trim();
+            var greeting = greetingInput.value.trim();
+            var valid = true;
+
+            // Validate
+            if (!title) {
+                titleError.style.display = 'block';
+                valid = false;
+            } else {
+                titleError.style.display = 'none';
+            }
+            if (!cats) {
+                categoriesError.style.display = 'block';
+                valid = false;
+            } else {
+                categoriesError.style.display = 'none';
+            }
+            if (!valid) return;
+
+            // Parse categories
+            var categories = cats.split(',').map(function(c) { return c.trim(); }).filter(Boolean);
+
+            // Disable button during save
+            var confirmBtn = document.getElementById('synthos-saveConfirmBtn');
+            confirmBtn.disabled = true;
+            confirmBtn.textContent = 'Saving...';
+
+            var body = { title: title, categories: categories };
+            if (greeting && !greetingInput.disabled) {
+                body.greeting = greeting;
+            }
+
+            fetch(window.location.pathname + '/save', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body)
+            })
+            .then(function(res) {
+                return res.json().then(function(data) {
+                    return { ok: res.ok, data: data };
+                });
+            })
+            .then(function(result) {
+                if (result.ok && result.data.redirect) {
+                    window.__synthOSPageDirty = false;
+                    window.location.href = result.data.redirect;
+                } else {
+                    closeSaveModal();
+                    showError(result.data.error || 'An unknown error occurred');
+                    confirmBtn.disabled = false;
+                    confirmBtn.textContent = 'Save';
+                }
+            })
+            .catch(function(err) {
+                closeSaveModal();
+                showError('Network error: ' + err.message);
+                confirmBtn.disabled = false;
+                confirmBtn.textContent = 'Save';
+            });
+        }
+
+        // Expose openSaveModal globally for toolbar button
+        window.__synthOSOpenSaveModal = openSaveModal;
+
+        // --- Event listeners ---
+        document.getElementById('synthos-saveCloseBtn').addEventListener('click', closeSaveModal);
+        document.getElementById('synthos-saveCancelBtn').addEventListener('click', closeSaveModal);
+        document.getElementById('synthos-saveConfirmBtn').addEventListener('click', submitSave);
+        document.getElementById('synthos-errorCloseBtn').addEventListener('click', closeError);
+        document.getElementById('synthos-errorOkBtn').addEventListener('click', closeError);
+
+        var saveModalMouseDownTarget = null;
+        modal.addEventListener('mousedown', function(e) { saveModalMouseDownTarget = e.target; });
+        modal.addEventListener('click', function(e) {
+            if (e.target === modal && saveModalMouseDownTarget === modal) closeSaveModal();
+            saveModalMouseDownTarget = null;
+        });
+        var errorModalMouseDownTarget = null;
+        errorModal.addEventListener('mousedown', function(e) { errorModalMouseDownTarget = e.target; });
+        errorModal.addEventListener('click', function(e) {
+            if (e.target === errorModal && errorModalMouseDownTarget === errorModal) closeError();
+            errorModalMouseDownTarget = null;
+        });
+
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                if (modal.classList.contains('show')) closeSaveModal();
+                if (errorModal.classList.contains('show')) closeError();
+            }
+        });
+
+        // Enter key in title/categories inputs triggers save
+        titleInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter') { e.preventDefault(); submitSave(); }
+        });
+        categoriesInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter') { e.preventDefault(); submitSave(); }
+        });
+    })();
+
+    // 4. Chat scroll to bottom
+    var chatMessages = document.getElementById('chatMessages');
+    if (chatMessages) {
+        chatMessages.scrollTo({
+            top: chatMessages.scrollHeight,
+            behavior: 'smooth'
+        });
+    }
+
+    // 5. Shell toolbar button wiring
+    (function() {
+        var DB_NAME = 'synthos-ui';
+        var STORE_NAME = 'panel-state';
+        var pageName = window.location.pathname.replace(/^\//, '') || 'builder';
+        var isBuilderPage = pageName === 'builder';
+
+        // IndexedDB helpers
+        function openDB(cb) {
+            var req = indexedDB.open(DB_NAME, 1);
+            req.onupgradeneeded = function() {
+                var db = req.result;
+                if (!db.objectStoreNames.contains(STORE_NAME)) {
+                    db.createObjectStore(STORE_NAME);
+                }
+            };
+            req.onsuccess = function() { cb(req.result); };
+            req.onerror = function() { cb(null); };
+        }
+
+        function saveCollapsed(collapsed) {
+            openDB(function(db) {
+                if (!db) return;
+                var tx = db.transaction(STORE_NAME, 'readwrite');
+                tx.objectStore(STORE_NAME).put(collapsed, pageName);
+            });
+        }
+
+        function loadCollapsed(cb) {
+            openDB(function(db) {
+                if (!db) { cb(null); return; }
+                var tx = db.transaction(STORE_NAME, 'readonly');
+                var req = tx.objectStore(STORE_NAME).get(pageName);
+                req.onsuccess = function() { cb(req.result); };
+                req.onerror = function() { cb(null); };
+            });
+        }
+
+        function setCollapsed(collapsed) {
+            if (collapsed) {
+                document.body.classList.add('chat-collapsed');
+            } else {
+                document.body.classList.remove('chat-collapsed');
+            }
+            saveCollapsed(collapsed);
+        }
+
+        // Restore state — builder page always starts open
+        if (isBuilderPage) {
+            document.body.classList.remove('chat-collapsed');
+        } else {
+            loadCollapsed(function(val) {
+                if (val === true) {
+                    document.body.classList.add('chat-collapsed');
+                }
+            });
+        }
+
+        // Builder toggle — show/hide chat panel
+        var builderToggle = document.getElementById('builderToggle');
+        if (builderToggle) {
+            builderToggle.addEventListener('click', function() {
+                var collapsed = !document.body.classList.contains('chat-collapsed');
+                setCollapsed(collapsed);
+            });
+        }
+
+        // Builder close button — same as collapse
+        var builderClose = document.getElementById('builderClose');
+        if (builderClose) {
+            builderClose.addEventListener('click', function() {
+                setCollapsed(true);
+            });
+        }
+
+        // Pages button — navigate to pages gallery
+        var pagesBtn = document.getElementById('pagesBtn');
+        if (pagesBtn) {
+            pagesBtn.addEventListener('click', function() {
+                window.__synthOSNavigateTo('/pages');
+            });
+        }
+
+        // Save button — open save modal
+        var saveBtn = document.getElementById('saveBtn');
+        if (saveBtn) {
+            saveBtn.addEventListener('click', function() {
+                if (window.__synthOSOpenSaveModal) window.__synthOSOpenSaveModal();
+            });
+        }
+
+        // Settings button — navigate to settings page
+        var settingsBtn = document.getElementById('settingsBtn');
+        if (settingsBtn) {
+            settingsBtn.addEventListener('click', function() {
+                window.__synthOSNavigateTo('/settings');
+            });
+        }
+    })();
+
+    // 6. Focus management — prevent viewer content from stealing keystrokes
+    (function() {
+        var ci = document.getElementById('chatInput');
+        var vp = document.getElementById('viewerPanel');
+        if (!ci || !vp) return;
+
+        ci.addEventListener('mousedown', function(e) {
+            e.stopPropagation();
+        });
+
+        ['keydown', 'keyup', 'keypress'].forEach(function(type) {
+            document.addEventListener(type, function(e) {
+                if (document.activeElement === ci) {
+                    // Allow Enter (without Shift) to reach the submit handler
+                    if (e.key === 'Enter' && !e.shiftKey) return;
+                    e.stopImmediatePropagation();
+                }
+            }, true);
+        });
+
+        vp.setAttribute('tabindex', '-1');
+        ci.addEventListener('blur', function() {
+            vp.focus();
+        });
+    })();
+
+    // 7. Brainstorm — dynamic brainstorming UI (available on every v2 page)
+    (function() {
+        var chatInput = document.getElementById('chatInput');
+        if (!chatInput) return;
+
+        // --- Create icon row (.chat-input-wrapper) appended to #chatForm ---
+        var form = document.getElementById('chatForm');
+        var wrapper = document.querySelector('.chat-input-wrapper');
+        if (!wrapper) {
+            wrapper = document.createElement('div');
+            wrapper.className = 'chat-input-wrapper';
+            if (form) form.appendChild(wrapper);
+        }
+
+        // --- Create brainstorm icon button ---
+        var brainstormBtn = document.createElement('button');
+        brainstormBtn.type = 'button';
+        brainstormBtn.className = 'brainstorm-icon-btn';
+        if (window.__synthOSTooltip) window.__synthOSTooltip(brainstormBtn, 'Brainstorm ideas');
+        brainstormBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+            '<circle cx="12" cy="12" r="3"></circle>' +
+            '<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>' +
+            '</svg>';
+        wrapper.appendChild(brainstormBtn);
+
+        // --- Create send button ---
+        var sendBtn = document.createElement('button');
+        sendBtn.type = 'submit';
+        sendBtn.className = 'chat-send-btn';
+        if (window.__synthOSTooltip) window.__synthOSTooltip(sendBtn, 'Send message');
+        sendBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+            '<line x1="12" y1="19" x2="12" y2="5"></line>' +
+            '<polyline points="5 12 12 5 19 12"></polyline>' +
+            '</svg>';
+        wrapper.appendChild(sendBtn);
+
+        // --- Auto-grow textarea (capped) ---
+        chatInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            var maxH = parseFloat(getComputedStyle(this).maxHeight) || 120;
+            this.style.height = Math.min(this.scrollHeight, maxH) + 'px';
+        });
+
+        // --- Create brainstorm modal ---
+        var modal = document.createElement('div');
+        modal.id = 'synthos-brainstormModal';
+        modal.className = 'modal-overlay brainstorm-modal';
+        modal.innerHTML =
+            '<div class="modal-content">' +
+                '<div class="modal-header">' +
+                    '<span>Brainstorm</span>' +
+                    '<button type="button" class="brainstorm-close-btn" id="synthos-brainstormCloseBtn">&times;</button>' +
+                '</div>' +
+                '<div class="brainstorm-messages" id="synthos-brainstormMessages"></div>' +
+                '<div class="brainstorm-input-row">' +
+                    '<input type="text" class="brainstorm-input" id="synthos-brainstormInput" placeholder="What\'s on your mind...">' +
+                    '<button type="button" class="brainstorm-send-btn" id="synthos-brainstormSendBtn">Send</button>' +
+                '</div>' +
+            '</div>';
+        document.body.appendChild(modal);
+
+        // --- State ---
+        var brainstormHistory = [];
+
+        // --- Helpers ---
+        function openBrainstorm() {
+            modal.classList.add('show');
+            // Grab text from chat input as initial topic
+            var topic = chatInput.value.trim();
+            if (topic) {
+                chatInput.value = '';
+                sendBrainstormText(topic, true);
+            } else {
+                // No topic — send context-only opener so LLM starts the brainstorm
+                sendBrainstormText('', true);
+            }
+        }
+
+        function closeBrainstorm() {
+            modal.classList.remove('show');
+            brainstormHistory = [];
+            document.getElementById('synthos-brainstormMessages').innerHTML = '';
+        }
+
+        function scrollBrainstormToBottom() {
+            var el = document.getElementById('synthos-brainstormMessages');
+            el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+        }
+
+        function escapeHtml(str) {
+            var div = document.createElement('div');
+            div.appendChild(document.createTextNode(str));
+            return div.innerHTML;
+        }
+
+        function appendBrainstormMessage(role, text, prompt, suggestions, isOpener) {
+            var div = document.createElement('div');
+            div.className = 'brainstorm-message ' + (role === 'user' ? 'brainstorm-user' : 'brainstorm-assistant');
+            if (role === 'assistant') {
+                var html;
+                if (typeof marked !== 'undefined') {
+                    html = marked.parse(text);
+                } else {
+                    html = escapeHtml(text);
+                }
+                div.innerHTML = '<strong>' + pn + ':</strong> ' + html;
+                // Clickable suggestion chips
+                if (suggestions && suggestions.length > 0) {
+                    var chips = document.createElement('div');
+                    chips.className = 'brainstorm-suggestions';
+                    suggestions.forEach(function(s) {
+                        var chip = document.createElement('button');
+                        chip.type = 'button';
+                        chip.className = 'brainstorm-suggestion-chip';
+                        chip.textContent = s;
+                        chip.addEventListener('click', function() {
+                            submitSuggestion(s);
+                        });
+                        chips.appendChild(chip);
+                    });
+                    div.appendChild(chips);
+                }
+                // "Build It" button — skip on the opener response
+                if (prompt && !isOpener) {
+                    var btnRow = document.createElement('div');
+                    btnRow.className = 'brainstorm-build-row';
+                    var buildBtn = document.createElement('button');
+                    buildBtn.type = 'button';
+                    buildBtn.className = 'brainstorm-build-btn';
+                    buildBtn.textContent = 'Build It';
+                    buildBtn.setAttribute('data-prompt', prompt);
+                    buildBtn.addEventListener('click', function() {
+                        chatInput.value = this.getAttribute('data-prompt');
+                        closeBrainstorm();
+                        chatInput.focus();
+                    });
+                    btnRow.appendChild(buildBtn);
+                    div.appendChild(btnRow);
+                }
+            } else {
+                div.textContent = text;
+            }
+            document.getElementById('synthos-brainstormMessages').appendChild(div);
+            scrollBrainstormToBottom();
+        }
+
+        function submitSuggestion(text) {
+            // Disable old suggestion chips so they can't be double-clicked
+            var oldChips = document.querySelectorAll('#synthos-brainstormMessages .brainstorm-suggestion-chip');
+            for (var i = 0; i < oldChips.length; i++) {
+                oldChips[i].disabled = true;
+            }
+            sendBrainstormText(text, false);
+        }
+
+        function getBrainstormContext() {
+            var chatEl = document.getElementById('chatMessages');
+            if (!chatEl) return '<CHAT_HISTORY>\n';
+            var msgs = chatEl.querySelectorAll('.chat-message');
+            var lines = [];
+            var started = false;
+            for (var i = 0; i < msgs.length; i++) {
+                var text = msgs[i].innerText;
+                if (!started && /^User:/i.test(text.trim())) started = true;
+                if (started) lines.push(text);
+            }
+            return '<CHAT_HISTORY>\n' + lines.join('\n');
+        }
+
+        // Send from the input field
+        function sendBrainstormMessage() {
+            var input = document.getElementById('synthos-brainstormInput');
+            var text = input.value.trim();
+            if (!text) return;
+            input.value = '';
+            sendBrainstormText(text, false);
+        }
+
+        // Core fetch — isOpener=true means this is the initial call when brainstorm opens
+        function sendBrainstormText(text, isOpener) {
+            var input = document.getElementById('synthos-brainstormInput');
+            var userMsg = text || (isOpener ? 'Look at the conversation so far and suggest what we could build or improve.' : '');
+            if (!userMsg) return;
+
+            // Show user message in chat (skip for auto-generated opener)
+            if (text) {
+                appendBrainstormMessage('user', text);
+            }
+            brainstormHistory.push({ role: 'user', content: userMsg });
+
+            var thinking = document.createElement('div');
+            thinking.className = 'brainstorm-thinking';
+            thinking.id = 'synthos-brainstormThinking';
+            thinking.textContent = 'Thinking...';
+            document.getElementById('synthos-brainstormMessages').appendChild(thinking);
+            scrollBrainstormToBottom();
+
+            input.disabled = true;
+            document.getElementById('synthos-brainstormSendBtn').disabled = true;
+
+            fetch('/api/brainstorm', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    context: getBrainstormContext(),
+                    messages: brainstormHistory
+                })
+            })
+            .then(function(res) {
+                if (!res.ok) throw new Error('Brainstorm request failed');
+                return res.json();
+            })
+            .then(function(data) {
+                var thinkingEl = document.getElementById('synthos-brainstormThinking');
+                if (thinkingEl) thinkingEl.remove();
+
+                var response = data.response || 'Sorry, I didn\'t get a response.';
+                var prompt = data.prompt || '';
+                var suggestions = Array.isArray(data.suggestions) ? data.suggestions : [];
+                appendBrainstormMessage('assistant', response, prompt, suggestions, isOpener);
+                brainstormHistory.push({
+                    role: 'assistant',
+                    content: response + '\n\n[Suggested prompt: ' + prompt + ']'
+                });
+            })
+            .catch(function(err) {
+                var thinkingEl = document.getElementById('synthos-brainstormThinking');
+                if (thinkingEl) thinkingEl.remove();
+                appendBrainstormMessage('assistant', 'Something went wrong: ' + err.message);
+            })
+            .finally(function() {
+                input.disabled = false;
+                document.getElementById('synthos-brainstormSendBtn').disabled = false;
+                input.focus();
+            });
+        }
+
+        // --- Event listeners ---
+        brainstormBtn.addEventListener('click', openBrainstorm);
+        document.getElementById('synthos-brainstormCloseBtn').addEventListener('click', closeBrainstorm);
+
+        var brainstormMouseDownTarget = null;
+        modal.addEventListener('mousedown', function(e) { brainstormMouseDownTarget = e.target; });
+        modal.addEventListener('click', function(e) {
+            if (e.target === modal && brainstormMouseDownTarget === modal) closeBrainstorm();
+            brainstormMouseDownTarget = null;
+        });
+
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape' && modal.classList.contains('show')) closeBrainstorm();
+        });
+
+        document.getElementById('synthos-brainstormSendBtn').addEventListener('click', sendBrainstormMessage);
+        document.getElementById('synthos-brainstormInput').addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendBrainstormMessage();
+            }
+        });
+    })();
+
+    // 8. Attach button — + menu, attachment pills, file picker, screenshot tool
+    (function() {
+        var chatInput = document.getElementById('chatInput');
+        if (!chatInput) return;
+        var chatForm = document.getElementById('chatForm');
+        var wrapper = chatForm ? chatForm.querySelector('.chat-input-wrapper') : null;
+        if (!wrapper) return;
+
+        // --- Attachments state ---
+        if (!window.__synthOSAttachments) window.__synthOSAttachments = [];
+
+        // --- Create pills container (inside #chatForm, before textarea) ---
+        var pillsContainer = document.createElement('div');
+        pillsContainer.className = 'attachment-pills';
+        if (chatForm) {
+            chatForm.insertBefore(pillsContainer, chatForm.firstChild);
+        }
+
+        function renderPills() {
+            pillsContainer.innerHTML = '';
+            var attachments = window.__synthOSAttachments;
+            if (!attachments || attachments.length === 0) return;
+            for (var i = 0; i < attachments.length; i++) {
+                (function(idx) {
+                    var att = attachments[idx];
+                    var pill = document.createElement('div');
+                    pill.className = 'attachment-pill';
+
+                    var thumb = document.createElement('img');
+                    thumb.src = 'data:' + att.mediaType + ';base64,' + att.data;
+                    thumb.style.cssText = 'width:24px;height:24px;object-fit:cover;border-radius:3px;';
+                    pill.appendChild(thumb);
+
+                    var nameSpan = document.createElement('span');
+                    nameSpan.textContent = att.name || 'image';
+                    nameSpan.style.cssText = 'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;';
+                    pill.appendChild(nameSpan);
+
+                    var removeBtn = document.createElement('button');
+                    removeBtn.type = 'button';
+                    removeBtn.className = 'attachment-pill-remove';
+                    removeBtn.textContent = '\u00d7';
+                    removeBtn.addEventListener('click', function() {
+                        window.__synthOSAttachments.splice(idx, 1);
+                        renderPills();
+                    });
+                    pill.appendChild(removeBtn);
+
+                    pillsContainer.appendChild(pill);
+                })(i);
+            }
+        }
+
+        // Expose for debugging
+        window.__synthOSRenderPills = renderPills;
+
+        // --- Helper: add an image attachment from a data URL ---
+        function addImageFromDataUrl(dataUrl, name) {
+            var commaIdx = dataUrl.indexOf(',');
+            if (commaIdx === -1) return;
+            var meta = dataUrl.substring(0, commaIdx); // data:image/png;base64
+            var base64 = dataUrl.substring(commaIdx + 1);
+            var mediaType = meta.replace('data:', '').replace(';base64', '');
+            window.__synthOSAttachments.push({
+                mediaType: mediaType,
+                data: base64,
+                name: name || 'image'
+            });
+            renderPills();
+        }
+
+        // --- Hidden file input ---
+        var fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.style.display = 'none';
+        document.body.appendChild(fileInput);
+
+        fileInput.addEventListener('change', function() {
+            var file = fileInput.files && fileInput.files[0];
+            if (!file) return;
+            var reader = new FileReader();
+            reader.onload = function() {
+                addImageFromDataUrl(reader.result, file.name);
+            };
+            reader.readAsDataURL(file);
+            fileInput.value = '';
+        });
+
+        // --- Paste image from clipboard (document-level to catch all pastes) ---
+        document.addEventListener('paste', function(e) {
+            // Only handle pastes when chat input is focused or no other editable is focused
+            var active = document.activeElement;
+            var isEditable = active && (active.isContentEditable ||
+                (active.tagName === 'TEXTAREA' && active !== chatInput) ||
+                (active.tagName === 'INPUT' && active !== chatInput));
+            if (isEditable) return;
+
+            var items = e.clipboardData && e.clipboardData.items;
+            if (!items) return;
+            for (var i = 0; i < items.length; i++) {
+                if (items[i].type.indexOf('image/') === 0) {
+                    var blob = items[i].getAsFile();
+                    if (!blob) continue;
+                    e.preventDefault();
+                    var reader = new FileReader();
+                    reader.onload = function() {
+                        addImageFromDataUrl(reader.result, 'pasted-image.png');
+                    };
+                    reader.readAsDataURL(blob);
+                    return; // only handle the first image
+                }
+            }
+        });
+
+        // --- Drag-and-drop file attachment ---
+        var chatForm = document.getElementById('chatForm');
+        if (chatForm) {
+            chatForm.addEventListener('dragover', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            });
+            chatForm.addEventListener('drop', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                var files = e.dataTransfer && e.dataTransfer.files;
+                if (!files || !files.length) return;
+                for (var i = 0; i < files.length; i++) {
+                    (function(file) {
+                        var reader = new FileReader();
+                        reader.onload = function() {
+                            addImageFromDataUrl(reader.result, file.name);
+                        };
+                        reader.readAsDataURL(file);
+                    })(files[i]);
+                }
+            });
+        }
+
+        // --- + button ---
+        var attachBtn = document.createElement('button');
+        attachBtn.type = 'button';
+        attachBtn.className = 'attach-btn';
+        if (window.__synthOSTooltip) window.__synthOSTooltip(attachBtn, 'Attach file or screenshot');
+        attachBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>';
+        wrapper.insertBefore(attachBtn, wrapper.firstChild);
+
+        // --- Popup menu ---
+        var menu = document.createElement('div');
+        menu.className = 'attach-menu';
+
+        var menuAttachFile = document.createElement('div');
+        menuAttachFile.className = 'attach-menu-item';
+        menuAttachFile.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"></path></svg> Attach File';
+        menu.appendChild(menuAttachFile);
+
+        var menuScreenshot = document.createElement('div');
+        menuScreenshot.className = 'attach-menu-item';
+        menuScreenshot.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg> Screenshot';
+        menu.appendChild(menuScreenshot);
+
+        wrapper.appendChild(menu);
+
+        var menuOpen = false;
+        function toggleMenu() {
+            menuOpen = !menuOpen;
+            menu.style.display = menuOpen ? 'flex' : 'none';
+        }
+        function closeMenu() {
+            menuOpen = false;
+            menu.style.display = 'none';
+        }
+
+        attachBtn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            toggleMenu();
+        });
+
+        document.addEventListener('click', function() {
+            if (menuOpen) closeMenu();
+        });
+        menu.addEventListener('click', function(e) { e.stopPropagation(); });
+
+        menuAttachFile.addEventListener('click', function() {
+            closeMenu();
+            fileInput.click();
+        });
+
+        // --- Screenshot annotation flow (multi-rectangle) ---
+        menuScreenshot.addEventListener('click', function() {
+            closeMenu();
+            startScreenshotAnnotation();
+        });
+
+        function startScreenshotAnnotation() {
+            var viewerPanel = document.getElementById('viewerPanel');
+            if (!viewerPanel) return;
+
+            // Create overlay
+            var overlay = document.createElement('div');
+            overlay.className = 'screenshot-overlay';
+
+            // Instructions bar
+            var instrBar = document.createElement('div');
+            instrBar.style.cssText = 'position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:white;padding:6px 14px;border-radius:6px;font-size:13px;z-index:10;pointer-events:none;';
+            instrBar.textContent = 'Draw rectangles to highlight areas, then click Capture';
+            overlay.appendChild(instrBar);
+
+            // Persistent action buttons (always visible)
+            var actions = document.createElement('div');
+            actions.className = 'screenshot-actions';
+            actions.style.cssText = 'position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;';
+
+            var captureBtn = document.createElement('button');
+            captureBtn.type = 'button';
+            captureBtn.textContent = 'Capture';
+            captureBtn.className = 'brainstorm-send-btn';
+            captureBtn.style.cssText = 'padding:6px 16px;font-size:13px;';
+
+            var cancelBtn = document.createElement('button');
+            cancelBtn.type = 'button';
+            cancelBtn.textContent = 'Cancel';
+            cancelBtn.className = 'brainstorm-send-btn';
+            cancelBtn.style.cssText = 'padding:6px 16px;font-size:13px;background:transparent;border:1px solid rgba(255,255,255,0.3);color:white;';
+
+            actions.appendChild(captureBtn);
+            actions.appendChild(cancelBtn);
+            overlay.appendChild(actions);
+
+            // Drawing state
+            var currentRect = null;
+            var startX, startY, isDrawing = false;
+            var allRects = []; // Array of {el, x, y, w, h}
+
+            overlay.addEventListener('mousedown', function(e) {
+                if (e.target.tagName === 'BUTTON') return;
+                isDrawing = true;
+                var overlayBounds = overlay.getBoundingClientRect();
+                startX = e.clientX - overlayBounds.left;
+                startY = e.clientY - overlayBounds.top;
+
+                // Create a new rectangle element
+                currentRect = document.createElement('div');
+                currentRect.className = 'screenshot-rect';
+                currentRect.style.display = 'block';
+                currentRect.style.left = startX + 'px';
+                currentRect.style.top = startY + 'px';
+                currentRect.style.width = '0';
+                currentRect.style.height = '0';
+                overlay.appendChild(currentRect);
+            });
+
+            overlay.addEventListener('mousemove', function(e) {
+                if (!isDrawing || !currentRect) return;
+                var overlayBounds = overlay.getBoundingClientRect();
+                var curX = e.clientX - overlayBounds.left;
+                var curY = e.clientY - overlayBounds.top;
+                var x = Math.min(startX, curX);
+                var y = Math.min(startY, curY);
+                var w = Math.abs(curX - startX);
+                var h = Math.abs(curY - startY);
+                currentRect.style.left = x + 'px';
+                currentRect.style.top = y + 'px';
+                currentRect.style.width = w + 'px';
+                currentRect.style.height = h + 'px';
+            });
+
+            overlay.addEventListener('mouseup', function() {
+                if (!isDrawing || !currentRect) return;
+                isDrawing = false;
+                var w = parseInt(currentRect.style.width);
+                var h = parseInt(currentRect.style.height);
+                if (w < 10 || h < 10) {
+                    // Too small — discard
+                    currentRect.remove();
+                    currentRect = null;
+                    return;
+                }
+                allRects.push({
+                    el: currentRect,
+                    x: parseInt(currentRect.style.left),
+                    y: parseInt(currentRect.style.top),
+                    w: w,
+                    h: h
+                });
+                currentRect = null;
+            });
+
+            captureBtn.addEventListener('click', function() {
+                doCapture();
+            });
+            cancelBtn.addEventListener('click', function() {
+                cleanup();
+            });
+
+            function doCapture() {
+                if (typeof html2canvas === 'undefined') {
+                    console.error('html2canvas not loaded');
+                    cleanup();
+                    return;
+                }
+
+                // Capture the full viewer panel without the overlay
+                overlay.style.visibility = 'hidden';
+
+                html2canvas(viewerPanel, { useCORS: true, logging: false }).then(function(fullCanvas) {
+                    // Draw red rectangles onto the captured canvas
+                    var vpRect = viewerPanel.getBoundingClientRect();
+                    var scaleX = fullCanvas.width / vpRect.width;
+                    var scaleY = fullCanvas.height / vpRect.height;
+
+                    var ctx = fullCanvas.getContext('2d');
+                    ctx.strokeStyle = 'red';
+                    ctx.lineWidth = 3 * Math.max(scaleX, scaleY);
+
+                    for (var i = 0; i < allRects.length; i++) {
+                        var r = allRects[i];
+                        ctx.strokeRect(
+                            Math.round(r.x * scaleX),
+                            Math.round(r.y * scaleY),
+                            Math.round(r.w * scaleX),
+                            Math.round(r.h * scaleY)
+                        );
+                    }
+
+                    var dataUrl = fullCanvas.toDataURL('image/png');
+                    var base64 = dataUrl.split(',')[1];
+                    window.__synthOSAttachments.push({
+                        mediaType: 'image/png',
+                        data: base64,
+                        name: 'screenshot.png'
+                    });
+                    renderPills();
+                    cleanup();
+                }).catch(function(err) {
+                    console.error('Screenshot capture failed:', err);
+                    cleanup();
+                });
+            }
+
+            function cleanup() {
+                if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+                document.removeEventListener('keydown', onKeyDown);
+            }
+
+            // Escape to cancel
+            function onKeyDown(e) {
+                if (e.key === 'Escape') {
+                    cleanup();
+                }
+            }
+            document.addEventListener('keydown', onKeyDown);
+
+            viewerPanel.style.position = 'relative';
+            viewerPanel.appendChild(overlay);
+        }
+    })();
+
+    // 9. Undo link — shown after the last chat message when a version exists
+    (function() {
+        var meta = document.querySelector('meta[name="synthos-version"]');
+        if (!meta) return;
+        var version = parseInt(meta.getAttribute('content'), 10);
+        if (!version || version <= 0) return;
+
+        var cm = document.getElementById('chatMessages');
+        if (!cm) return;
+
+        // Remove any existing undo links
+        var existing = cm.querySelectorAll('.synthos-undo-link');
+        for (var i = 0; i < existing.length; i++) existing[i].remove();
+
+        // Create undo link div
+        var undoDiv = document.createElement('div');
+        undoDiv.className = 'synthos-undo-link';
+        undoDiv.style.cssText = 'text-align:right;padding:4px 12px 2px;';
+
+        var link = document.createElement('a');
+        link.href = '#';
+        link.textContent = 'undo';
+        link.style.cssText = 'color:var(--accent-primary,#a78bfa);font-size:12px;text-decoration:none;opacity:0.7;';
+        link.addEventListener('mouseenter', function() { link.style.opacity = '1'; link.style.textDecoration = 'underline'; });
+        link.addEventListener('mouseleave', function() { link.style.opacity = '0.7'; link.style.textDecoration = 'none'; });
+
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            var overlay = document.getElementById('loadingOverlay');
+            if (overlay) overlay.style.display = 'flex';
+
+            fetch(window.location.pathname + '/undo', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: '{}'
+            })
+            .then(function(res) { return res.text(); })
+            .then(function(html) {
+                window.__synthOSChatPanel = false;
+                window.__synthOSPageDirty = false;
+                window.__synthOSNavigateTo = null;
+                document.open();
+                document.write(html);
+                document.close();
+            })
+            .catch(function(err) {
+                console.error('Undo failed:', err);
+                if (overlay) overlay.style.display = 'none';
+            });
+        });
+
+        undoDiv.appendChild(link);
+
+        // "try again" link — re-submits the last user message against the previous page state
+        var msgs = cm.querySelectorAll('.chat-message');
+        var lastUserMsg = '';
+        for (var j = msgs.length - 1; j >= 0; j--) {
+            var strong = msgs[j].querySelector('strong');
+            if (strong && strong.textContent.trim().replace(/:$/, '') === 'User') {
+                // Get the text content after "User:" — everything in the <p> minus the strong
+                var p = msgs[j].querySelector('p');
+                if (p) {
+                    var clone = p.cloneNode(true);
+                    var s = clone.querySelector('strong');
+                    if (s) s.remove();
+                    lastUserMsg = clone.textContent.trim();
+                }
+                break;
+            }
+        }
+
+        if (lastUserMsg) {
+            var sep = document.createTextNode('  ·  ');
+            undoDiv.appendChild(sep);
+
+            var tryLink = document.createElement('a');
+            tryLink.href = '#';
+            tryLink.textContent = 'try again';
+            tryLink.style.cssText = 'color:var(--accent-primary,#a78bfa);font-size:12px;text-decoration:none;opacity:0.7;';
+            tryLink.addEventListener('mouseenter', function() { tryLink.style.opacity = '1'; tryLink.style.textDecoration = 'underline'; });
+            tryLink.addEventListener('mouseleave', function() { tryLink.style.opacity = '0.7'; tryLink.style.textDecoration = 'none'; });
+
+            tryLink.addEventListener('click', function(e) {
+                e.preventDefault();
+                var overlay = document.getElementById('loadingOverlay');
+                if (overlay) overlay.style.display = 'flex';
+                var ci = document.getElementById('chatInput');
+                if (ci) ci.disabled = true;
+                var sb = document.querySelector('.chat-send-btn');
+                if (sb) sb.disabled = true;
+
+                fetch(window.location.pathname, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message: lastUserMsg, tryAgain: true })
+                })
+                .then(function(res) { return res.text(); })
+                .then(function(html) {
+                    window.__synthOSPageDirty = true;
+                    window.__synthOSChatPanel = false;
+                    window.__synthOSNavigateTo = null;
+                    document.open();
+                    document.write(html);
+                    document.close();
+                })
+                .catch(function(err) {
+                    console.error('Try again failed:', err);
+                    if (overlay) overlay.style.display = 'none';
+                    if (ci) ci.disabled = false;
+                    if (sb) sb.disabled = false;
+                });
+            });
+
+            undoDiv.appendChild(tryLink);
+        }
+
+        cm.appendChild(undoDiv);
+    })();
+
+    // 10. Unsaved-changes prompt for required pages (FluentLM dialog)
+    (function() {
+        // Create the unsaved-changes confirmation dialog
+        var overlay = document.createElement('div');
+        overlay.className = 'flm-dialog-overlay';
+        overlay.id = 'synthos-unsavedDialog';
+        overlay.innerHTML =
+            '<div class="flm-dialog">' +
+                '<div class="flm-dialog-header">' +
+                    '<h2 class="flm-dialog-title">Unsaved Changes</h2>' +
+                    '<button class="flm-dialog-close" data-icon="Cancel" aria-label="Close" data-dialog-close></button>' +
+                '</div>' +
+                '<div class="flm-dialog-body">You have unsaved changes that will be lost if you leave this page.</div>' +
+                '<div class="flm-dialog-footer">' +
+                    '<button class="flm-button" data-dialog-close id="synthos-unsavedStay">Stay</button>' +
+                    '<button class="flm-button flm-button--primary" id="synthos-unsavedLeave">Leave</button>' +
+                '</div>' +
+            '</div>';
+        document.body.appendChild(overlay);
+
+        var pendingUrl = null;
+
+        document.getElementById('synthos-unsavedLeave').addEventListener('click', function() {
+            overlay.classList.remove('is-open');
+            if (pendingUrl) {
+                window.__synthOSPageDirty = false;
+                window.location.href = pendingUrl;
+            }
+        });
+
+        // Navigate with unsaved-changes guard
+        window.__synthOSNavigateTo = function(url) {
+            if (window.__synthOSPageDirty && window.pageInfo && window.pageInfo.isRequiredPage) {
+                pendingUrl = url;
+                overlay.classList.add('is-open');
+            } else {
+                window.location.href = url;
+            }
+        };
+    })();
+
+
+    // Initial focus — run after all setup (including chat-collapsed check)
+    if (chatInput && !document.body.classList.contains('chat-collapsed')) {
+        chatInput.focus();
+    }
+})();