synthos 0.8.0 → 0.9.0

package/static-files/page.v3.js

@@ -0,0 +1,1290 @@
+(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();
+    }
+})();