synthos 0.10.1 → 0.11.0

package/static-files/shell.v3.js

@@ -0,0 +1,1865 @@
+/**
+ * shell.v3.js — Parent-frame chrome logic for the SynthOS iframe architecture.
+ *
+ * Runs in the parent frame (shell document). Manages:
+ * - Chat form submission → POST to server → send result to iframe via postMessage
+ * - Toolbar button wiring (builder toggle, pages, save, settings)
+ * - Save modal
+ * - Brainstorm modal
+ * - Attachment handling (file picker, paste, drag-drop, screenshot)
+ * - Undo / try-again links
+ * - Unsaved-changes guard
+ * - Focus management between chat and iframe
+ * - postMessage bridge to iframe (shell:* ← page, page:* → page)
+ */
+(function() {
+    var ORIGIN = window.location.origin;
+    var frame = document.getElementById('viewerFrame');
+
+    // --- Shell Init Data (injected by server as JSON) ------------------------
+    var shellInit = window.__shellInit || {};
+    var pageName = shellInit.page || '';
+    var isRequestActive = false;
+    var capturedErrors = [];
+    var pageVersion = shellInit.version || 0;
+    // A page with `page.c*.html` on disk has pending unsaved changes from a
+    // prior session — Save should save, not fall through to Copy.
+    var pageDirty = pageVersion > 0;
+
+    function setPageDirty(v) {
+        pageDirty = !!v;
+        if (typeof updateSaveBtnState === 'function') updateSaveBtnState();
+    }
+
+    // Gate all inline chat affordances (suggestion chips, send: links,
+    // undo/try-again/reset links) while a server request is in flight.
+    // The CSS class does the visual + pointer-events block; the boolean
+    // is checked at the top of each action handler as defense-in-depth.
+    function setChatBusy(busy) {
+        isRequestActive = !!busy;
+        var cm = document.getElementById('chatMessages');
+        if (cm) cm.classList.toggle('chat-busy', !!busy);
+    }
+
+    // Product name for branding
+    var pn = shellInit.productName || 'SynthOS';
+
+    // --- Loading Overlay ----------------------------------------------------
+    // Corner-peek radial fade. Tune these to change how much of the page shows
+    // at the edges of the overlay.
+    var LOADING_FADE_SIZE = 95;      // 40..95 — diameter of the opaque centre (% of viewport)
+    var LOADING_FADE_SOFTNESS = 47;  // 20..80 — width of the fade edge
+
+    var LOADING_SAYINGS = [
+        'Waving my AI wand...',
+        'Brewing up something magical...',
+        'Consulting the digital oracle...',
+        'Sprinkling some pixel dust...',
+        'Teaching electrons to dance...',
+        'Summoning the code spirits...',
+        'Painting with algorithms...',
+        'Weaving digital tapestry...',
+        'Charging the flux capacitor...',
+        'Aligning the digital stars...',
+        'Mixing the perfect pixel potion...',
+        'Whispering to the servers...',
+        'Folding space-time (just a little)...',
+        'Assembling tiny digital elves...',
+        'Tuning the neural frequencies...',
+        'Polishing every last pixel...',
+        'Asking the cloud for a favor...',
+        'Spinning up the imagination engine...',
+        'Translating thoughts into code...',
+        'Doing some AI magic...'
+    ];
+    var LOADING_TIPS = [
+        'You can use markdown in any text field for rich formatting.',
+        'Always remember to save your work \u2014 save intermediate versions to separate pages when exploring an idea.',
+        'Try asking for specific color schemes to customize your pages theme.',
+        'Use the brainstorm icon in the chat panel to have AI help you flush out an idea.',
+        'You can reference data from other pages using shared tables.',
+        'Pin your most-used pages to favorites in the pages gallery for quick access.',
+        'Use keyboard shortcuts to speed up your workflow.',
+        'You can upload files and images for reference directly to the page builder.',
+        'Ask the AI to add animations or interactive elements to your pages.',
+        'Connect external APIs through the Connectors settings for live data.',
+        'Ask the page builder to add an AI chat feature so users can interact with your page conversationally.',
+        'Brainstorm with the AI first to flesh out your idea before building \u2014 a clear spec makes for a better page.',
+        'Tell the AI to use shared storage for data you want reused across pages, like a list of employees or products.',
+        'Describe who will use the page and what they need to accomplish \u2014 context helps the AI build something useful.',
+        'Try asking for a specific layout like a dashboard, kanban board, or wizard to steer the structure.',
+        'Paste a screenshot of a design you like and ask the AI to build something inspired by it.',
+        'When a change misses the mark, use the undo link in the chat to roll back to the previous version.',
+        'Break complex builds into stages \u2014 start with the layout, then add data, then wire up interactions.',
+        'Ask the AI to include form validation or confirmation dialogs for a more polished feel.',
+        'Give the AI specific feedback when something is off \u2014 "make the header smaller" works better than "fix the header".'
+    ];
+
+    var loadingSubstatusInterval = null;
+    var loadingTipInterval = null;
+    var lastSayingIdx = -1;
+    var lastTipIdx = -1;
+    var loadingMaskApplied = false;
+
+    function pickRandom(arr, lastIdxRef) {
+        var idx;
+        do {
+            idx = Math.floor(Math.random() * arr.length);
+        } while (idx === lastIdxRef.value && arr.length > 1);
+        lastIdxRef.value = idx;
+        return arr[idx];
+    }
+
+    function applyLoadingMask(el) {
+        if (!el || loadingMaskApplied) return;
+        var size = LOADING_FADE_SIZE;
+        var soft = LOADING_FADE_SOFTNESS;
+        var innerStop = Math.max(0, size - soft);
+        var main = 'radial-gradient(ellipse ' + size + '% ' + (size - 5) + '% at 50% 48%, black ' + innerStop + '%, transparent ' + size + '%)';
+        var blobSize = Math.round(size * 0.45);
+        var blobSoft = Math.round(soft * 0.7);
+        var blobInner = Math.max(0, blobSize - blobSoft);
+        var tl = 'radial-gradient(ellipse ' + (blobSize + 8) + '% ' + (blobSize - 3) + '% at 12% 15%, rgba(0,0,0,0.55) ' + blobInner + '%, transparent ' + blobSize + '%)';
+        var tr = 'radial-gradient(ellipse ' + (blobSize - 2) + '% ' + (blobSize + 5) + '% at 88% 18%, rgba(0,0,0,0.45) ' + blobInner + '%, transparent ' + blobSize + '%)';
+        var bl = 'radial-gradient(ellipse ' + (blobSize + 3) + '% ' + (blobSize - 5) + '% at 18% 82%, rgba(0,0,0,0.4) ' + blobInner + '%, transparent ' + blobSize + '%)';
+        var br = 'radial-gradient(ellipse ' + (blobSize + 10) + '% ' + blobSize + '% at 82% 80%, rgba(0,0,0,0.5) ' + blobInner + '%, transparent ' + blobSize + '%)';
+        var mask = [main, tl, tr, bl, br].join(', ');
+        el.style.webkitMaskImage = mask;
+        el.style.maskImage = mask;
+        el.style.webkitMaskComposite = 'source-over';
+        el.style.maskComposite = 'add';
+        loadingMaskApplied = true;
+    }
+
+    function fadeSubstatusTo(text) {
+        var sub = document.getElementById('loadingSubstatus');
+        if (!sub) return;
+        sub.classList.add('fade-out');
+        setTimeout(function() {
+            sub.textContent = text;
+            sub.classList.remove('fade-out');
+        }, 300);
+    }
+
+    function setLoadingStatus(text) {
+        var st = document.getElementById('loadingStatus');
+        if (st && text) st.textContent = text;
+        // Whenever the status changes, rotate the substatus saying too.
+        fadeSubstatusTo(pickRandom(LOADING_SAYINGS, lastSayingRef));
+    }
+
+    // Shared refs so pickRandom sees the same "last index" state across calls.
+    var lastSayingRef = { value: -1 };
+    var lastTipRef = { value: -1 };
+
+    // "Building Page" only fits the first change on a starter or the builder page.
+    // Every subsequent change — and every change on a regular page — is an update.
+    function getTransformStatusLabel() {
+        var isStarterOrBuilder = shellInit.isStarter || pageName === 'builder';
+        return (pageVersion === 0 && isStarterOrBuilder) ? 'Building Page' : 'Updating Page';
+    }
+
+    function showLoadingOverlay(initialStatus) {
+        var overlay = document.getElementById('loadingOverlay');
+        if (!overlay) return;
+        var masked = overlay.querySelector('.loading-masked');
+        applyLoadingMask(masked);
+
+        var statusText = initialStatus || getTransformStatusLabel();
+        var statusEl = document.getElementById('loadingStatus');
+        if (statusEl) statusEl.textContent = statusText;
+
+        var sub = document.getElementById('loadingSubstatus');
+        if (sub) {
+            sub.classList.remove('fade-out');
+            sub.textContent = pickRandom(LOADING_SAYINGS, lastSayingRef);
+        }
+        var tipText = overlay.querySelector('#loadingTip .loading-tip-text');
+        if (tipText) tipText.textContent = pickRandom(LOADING_TIPS, lastTipRef);
+
+        overlay.style.display = 'flex';
+
+        if (!loadingSubstatusInterval) {
+            loadingSubstatusInterval = setInterval(function() {
+                fadeSubstatusTo(pickRandom(LOADING_SAYINGS, lastSayingRef));
+            }, 3500);
+        }
+        if (!loadingTipInterval) {
+            loadingTipInterval = setInterval(function() {
+                var t = document.querySelector('#loadingTip .loading-tip-text');
+                if (t) t.textContent = pickRandom(LOADING_TIPS, lastTipRef);
+            }, 15000);
+        }
+    }
+
+    function hideLoadingOverlay() {
+        var overlay = document.getElementById('loadingOverlay');
+        if (overlay) overlay.style.display = 'none';
+        if (loadingSubstatusInterval) { clearInterval(loadingSubstatusInterval); loadingSubstatusInterval = null; }
+        if (loadingTipInterval) { clearInterval(loadingTipInterval); loadingTipInterval = null; }
+    }
+
+    // --- postMessage Bridge --------------------------------------------------
+
+    function sendToPage(type, payload) {
+        if (frame && frame.contentWindow) {
+            frame.contentWindow.postMessage(
+                { source: 'synthos-shell', type: type, payload: payload || {} },
+                ORIGIN
+            );
+        }
+    }
+
+    window.addEventListener('message', function(event) {
+        if (event.origin !== ORIGIN) return;
+        var msg = event.data;
+        if (!msg || msg.source !== 'synthos-page') return;
+
+        switch (msg.type) {
+            case 'shell:ready':
+                // iframe bridge initialized
+                break;
+            case 'shell:error':
+                if (Array.isArray(msg.payload.errors)) {
+                    capturedErrors = capturedErrors.concat(msg.payload.errors);
+                    showErrorInChat();
+                }
+                break;
+            case 'shell:navigate':
+                navigateTo(msg.payload.url);
+                break;
+            case 'shell:dirty':
+                // Only honor dirty=true from the iframe. Clean transitions
+                // (after save / reset / undo) are shell-initiated and bypass
+                // this channel — an incoming dirty=false is either spurious
+                // (leftover setter firing on iframe reload) or redundant.
+                if (msg.payload.dirty) setPageDirty(true);
+                break;
+            case 'shell:modal':
+                if (msg.payload.modal === 'save') {
+                    if (window.__synthOSOpenSaveModal) window.__synthOSOpenSaveModal();
+                } else if (msg.payload.modal === 'copy' && msg.payload.page) {
+                    if (window.__synthOSOpenCopyModal) window.__synthOSOpenCopyModal(msg.payload.page);
+                } else if (msg.payload.modal === 'edit' && msg.payload.page) {
+                    if (window.__synthOSOpenEditModal) window.__synthOSOpenEditModal(msg.payload.page, function() {
+                        sendToPage('page:pages-changed', {});
+                    });
+                }
+                break;
+            case 'shell:builder':
+                if (msg.payload.action === 'toggle') toggleBuilder();
+                else if (msg.payload.action === 'open') setCollapsed(false);
+                else if (msg.payload.action === 'close') setCollapsed(true);
+                break;
+            case 'shell:submit-chat':
+                if (msg.payload.message) submitChatMessage(msg.payload.message);
+                break;
+            case 'shell:loading':
+                if (msg.payload.show) showLoadingOverlay(msg.payload.status);
+                else hideLoadingOverlay();
+                break;
+            case 'shell:focus-chat':
+                var ci = document.getElementById('chatInput');
+                if (ci) ci.focus();
+                break;
+            case 'shell:reload':
+                window.location.reload();
+                break;
+        }
+    });
+
+    // --- Error Display in Chat -----------------------------------------------
+
+    function showErrorInChat() {
+        var cm = document.getElementById('chatMessages');
+        if (!cm) return;
+        if (showErrorInChat._pending) return;
+        showErrorInChat._pending = true;
+        setTimeout(function() {
+            showErrorInChat._pending = false;
+            if (capturedErrors.length === 0) return;
+            var fixPrompt = 'Fix the following JavaScript errors on this page:\n\nCONSOLE_ERRORS:\n' + capturedErrors.join('\n---\n');
+            capturedErrors = [];
+            var md = 'I noticed a JavaScript error on this page. [Let me try to fix it](send:' + encodeURIComponent(fixPrompt) + ')';
+            appendChatMessage('assistant', md);
+        }, 500);
+    }
+
+    // Surface silently-skipped change ops (stale node IDs, locked elements, etc.)
+    // so partial/broken builds don't pass unnoticed. The "try again" link from
+    // appendUndoLinks below gives the user a recovery path.
+    function showSkippedOpsWarning(result) {
+        if (!result || !result.skippedOps || result.skippedOps <= 0) return;
+        var reasons = Array.isArray(result.skipReasons) ? result.skipReasons : [];
+        var lines = reasons.map(function(r) { return '- ' + r; });
+        var md = '**Warning:** ' + result.skippedOps + ' change op(s) were skipped — the page may be incomplete.';
+        if (lines.length > 0) md += '\n' + lines.join('\n');
+        appendChatMessage('assistant', md);
+    }
+
+    // --- Render Chat Messages from Server Init Data --------------------------
+
+    function renderInitialMessages(messages) {
+        var cm = document.getElementById('chatMessages');
+        if (!cm || !messages || !messages.length) return;
+        cm.innerHTML = '';
+        for (var i = 0; i < messages.length; i++) {
+            var msg = messages[i];
+            if (msg.role && msg.content) {
+                // New format: { role: 'user'|'assistant', content: string }
+                var roleName = msg.role === 'user' ? 'User' : pn;
+                appendChatMessage(roleName, msg.content);
+            } else if (msg.html) {
+                // Legacy format: { id?, html } — raw HTML from extractChatMessages
+                var div = document.createElement('div');
+                div.className = 'chat-message';
+                if (msg.id) div.id = msg.id;
+                div.innerHTML = msg.html;
+                cm.appendChild(div);
+            }
+        }
+        scrollChatToBottom();
+    }
+
+    // Render greeting from metadata (authoritative source)
+    var greetingText = shellInit.greeting || '';
+    var isGreetingEditable = greetingText && !shellInit.isLocked && pageName !== 'builder';
+
+    // Always render the full conversation (greeting + every per-change turn).
+    // The server concatenates page.c<n>.json files in order so the shell only
+    // has to display what it's handed.
+    if (shellInit.messages && shellInit.messages.length > 0) {
+        renderInitialMessages(shellInit.messages);
+    }
+
+    // --- Chat Scroll ---------------------------------------------------------
+
+    function scrollChatToBottom() {
+        var cm = document.getElementById('chatMessages');
+        if (cm) {
+            cm.scrollTo({ top: cm.scrollHeight, behavior: 'smooth' });
+        }
+    }
+
+    // 0. First-run greeting — sourced from page.json firstRunGreeting field
+    (function() {
+        var params = new URLSearchParams(window.location.search);
+        if (!params.get('firstRun')) return;
+        var firstRunHtml = shellInit.firstRunGreeting || '';
+        if (!firstRunHtml) return;
+        var cm = document.getElementById('chatMessages');
+        if (!cm) return;
+        // Replace content with first-run greeting (HTML content from metadata)
+        cm.innerHTML = '';
+        var div = document.createElement('div');
+        div.className = 'chat-message';
+        div.id = 'defaultGreeting';
+        // Replace product name placeholder
+        div.innerHTML = firstRunHtml.replace(/SynthOS/g, pn);
+        cm.appendChild(div);
+    })();
+
+    // --- Chat Form Submit (§2) -----------------------------------------------
+
+    var chatInput = document.getElementById('chatInput');
+    var chatForm = document.getElementById('chatForm');
+
+    if (chatForm) {
+        chatForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            // Don't allow a second submit while one is in flight.
+            if (isRequestActive) return;
+
+            var ci = document.getElementById('chatInput');
+            var messageText = ci ? ci.value : '';
+
+            if (!messageText.trim()) return;
+
+            // Capture any pending JS errors as a separate field (not appended to user message)
+            var pendingErrors = null;
+            if (capturedErrors.length > 0) {
+                pendingErrors = capturedErrors.slice();
+                capturedErrors = [];
+            }
+
+            // Show overlay and disable inputs
+            showLoadingOverlay();
+            setTimeout(function() {
+                if (ci) ci.disabled = true;
+                var sb = document.querySelector('.chat-send-btn');
+                if (sb) sb.disabled = true;
+            }, 50);
+
+            // Append user message to chat (clean, without error noise)
+            appendChatMessage('User', messageText);
+
+            // Extract conversation history from chat DOM
+            var history = extractHistory();
+
+            // Build JSON body — errors sent as separate field so chat history stays clean
+            var body = { message: messageText, history: history };
+            if (pendingErrors) body.errors = pendingErrors;
+            if (shellInit.builderStarter) body.starter = shellInit.builderStarter;
+            var attachments = shellAttachments;
+            if (attachments && attachments.length > 0) {
+                body.attachments = attachments.map(function(a) {
+                    return { mediaType: a.mediaType, data: a.data, name: a.name };
+                });
+            }
+
+            // POST to server — streaming NDJSON response
+            setChatBusy(true);
+            var postUrl = '/' + pageName;
+
+            fetch(postUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body)
+            })
+            .then(function(res) {
+                // Stream NDJSON: read line by line, handle progress + result events
+                var reader = res.body.getReader();
+                var decoder = new TextDecoder();
+                var buffer = '';
+                var finalResult = null;
+
+                function processLines() {
+                    var nlIdx;
+                    while ((nlIdx = buffer.indexOf('\n')) !== -1) {
+                        var line = buffer.slice(0, nlIdx).trim();
+                        buffer = buffer.slice(nlIdx + 1);
+                        if (!line) continue;
+                        try {
+                            var evt = JSON.parse(line);
+                            if (evt.event === 'progress') {
+                                var statusText = evt.status === 'classifying' ? 'Analyzing Request'
+                                    : evt.status === 'transforming' ? getTransformStatusLabel()
+                                    : (typeof evt.status === 'string' && evt.status.indexOf('tool_call:') === 0) ? 'Gathering Context'
+                                    : null;
+                                if (statusText) setLoadingStatus(statusText);
+                            } else if (evt.event === 'result') {
+                                finalResult = evt;
+                            } else if (evt.event === 'error') {
+                                finalResult = { errorText: evt.error };
+                            }
+                        } catch (e) { /* skip unparseable lines */ }
+                    }
+                }
+
+                function readChunk() {
+                    return reader.read().then(function(chunk) {
+                        if (chunk.done) {
+                            processLines(); // flush remaining buffer
+                            return finalResult;
+                        }
+                        buffer += decoder.decode(chunk.value, { stream: true });
+                        processLines();
+                        return readChunk();
+                    });
+                }
+
+                return readChunk();
+            })
+            .then(function(result) {
+                setChatBusy(false);
+                if (!result) {
+                    appendChatMessage(pn, 'No response received.');
+                    hideLoadingOverlay();
+                    if (ci) ci.disabled = false;
+                    var sb = document.querySelector('.chat-send-btn');
+                    if (sb) sb.disabled = false;
+                    return;
+                }
+                setPageDirty(true);
+                if (typeof result.version === 'number') pageVersion = result.version;
+                else pageVersion++;
+
+                sendToPage('page:load', { html: result.html });
+
+                // Hide overlay and re-enable inputs
+                hideLoadingOverlay();
+                if (ci) { ci.disabled = false; ci.value = ''; ci.focus(); }
+                var sb = document.querySelector('.chat-send-btn');
+                if (sb) sb.disabled = false;
+
+                // Append assistant response message based on result type
+                if (result.errorText) {
+                    var errMsg = String(result.errorText);
+                    if (errMsg.length > 500) errMsg = errMsg.slice(0, 500) + '\u2026';
+                    appendChatMessage(pn, 'Error: ' + errMsg);
+                } else if (result.replyText) {
+                    appendChatMessage(pn, result.replyText);
+                } else {
+                    appendChatMessage(pn, 'Page updated.');
+                }
+
+                // Surface skipped ops (partial build — some ops silently dropped)
+                showSkippedOpsWarning(result);
+
+                // Add undo/try-again links and clear action
+                appendUndoLinks(messageText);
+                appendClearAction();
+
+                scrollChatToBottom();
+            })
+            .catch(function(err) {
+                setChatBusy(false);
+                console.error('Submit failed:', err);
+                hideLoadingOverlay();
+                if (ci) ci.disabled = false;
+                var sb = document.querySelector('.chat-send-btn');
+                if (sb) sb.disabled = false;
+
+                appendChatMessage(pn, 'Something went wrong: ' + err.message);
+                scrollChatToBottom();
+            });
+
+            // Clear attachments
+            shellAttachments = [];
+            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 ? form.requestSubmit() : form.dispatchEvent(new Event('submit'));
+            }
+        });
+    })();
+
+    // --- Chat Helpers --------------------------------------------------------
+
+    function escapeHtml(str) {
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode(str));
+        return div.innerHTML;
+    }
+
+    function renderMarkdown(text) {
+        var result = { html: '', suggestions: [] };
+        if (typeof marked === 'undefined') { result.html = escapeHtml(text); return result; }
+        var html = marked.parse(text);
+        // Strip dangerous URI schemes from rendered links
+        var tmp = document.createElement('div');
+        tmp.innerHTML = html;
+        var anchors = tmp.querySelectorAll('a[href]');
+        for (var i = 0; i < anchors.length; i++) {
+            var href = (anchors[i].getAttribute('href') || '').trim().toLowerCase();
+            if (href.indexOf('javascript:') === 0 || href.indexOf('data:') === 0 || href.indexOf('vbscript:') === 0) {
+                anchors[i].removeAttribute('href');
+            }
+        }
+        // Extract suggest: links and collect as chips
+        var suggestAnchors = tmp.querySelectorAll('a[href^="suggest:"]');
+        for (var i = 0; i < suggestAnchors.length; i++) {
+            var a = suggestAnchors[i];
+            var payload = decodeURIComponent(a.getAttribute('href').substring(8));
+            var label = a.textContent;
+            result.suggestions.push({ label: label, payload: payload });
+            // Remove the anchor (and its parent li/p if it's the only child)
+            var parent = a.parentNode;
+            if (parent && parent.tagName === 'LI' && parent.children.length === 1) {
+                var ul = parent.parentNode;
+                ul.removeChild(parent);
+                if (ul.children.length === 0) ul.parentNode.removeChild(ul);
+            } else if (parent && parent.tagName === 'P' && parent.children.length === 1 && parent.textContent.trim() === label) {
+                parent.parentNode.removeChild(parent);
+            } else {
+                a.parentNode.removeChild(a);
+            }
+        }
+        result.html = tmp.innerHTML;
+        return result;
+    }
+
+    function buildSuggestionChips(suggestions) {
+        if (!suggestions || suggestions.length === 0) return null;
+        var container = document.createElement('div');
+        container.className = 'suggestion-chips';
+        for (var i = 0; i < suggestions.length; i++) {
+            var btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'suggestion-chip';
+            btn.textContent = suggestions[i].label;
+            btn.setAttribute('data-payload', suggestions[i].payload);
+            container.appendChild(btn);
+        }
+        return container;
+    }
+
+    function appendChatMessage(role, text) {
+        var cm = document.getElementById('chatMessages');
+        if (!cm) return;
+        var div = document.createElement('div');
+        div.className = 'chat-message';
+        if (role === 'User') {
+            div.classList.add('chat-message--user');
+            var header = document.createElement('p');
+            header.innerHTML = '<strong>User:</strong>';
+            div.appendChild(header);
+            var body = document.createElement('div');
+            body.className = 'chat-user-body';
+            body.textContent = text;
+            div.appendChild(body);
+            applyUserMessageClamp(body, div);
+        } else {
+            // Any non-User role renders under the configured product name so
+            // legacy callers that pass 'assistant' don't leak the raw role
+            // string as a bubble label.
+            var rendered = renderMarkdown(text);
+            div.innerHTML = '<p><strong>' + escapeHtml(pn) + ':</strong></p>' + rendered.html;
+            var chips = buildSuggestionChips(rendered.suggestions);
+            if (chips) div.appendChild(chips);
+        }
+        cm.appendChild(div);
+        scrollChatToBottom();
+    }
+
+    // Add a "More" toggle to a user message body when its content overflows
+    // the collapsed max-height. Uses the body's own scrollHeight vs clientHeight
+    // after layout, so short messages never get the toggle.
+    function applyUserMessageClamp(body, container) {
+        requestAnimationFrame(function() {
+            if (body.scrollHeight <= body.clientHeight + 1) return;
+            body.classList.add('chat-user-body--clamped');
+            var toggle = document.createElement('button');
+            toggle.type = 'button';
+            toggle.className = 'chat-more-toggle';
+            toggle.textContent = 'More';
+            toggle.addEventListener('click', function() {
+                var expanded = body.classList.toggle('chat-user-body--expanded');
+                toggle.textContent = expanded ? 'Less' : 'More';
+            });
+            container.appendChild(toggle);
+        });
+    }
+
+    function extractHistory() {
+        var messages = [];
+        var chatMsgs = document.querySelectorAll('#chatMessages .chat-message');
+        for (var i = 0; i < chatMsgs.length; i++) {
+            var el = chatMsgs[i];
+            var strong = el.querySelector('strong');
+            if (!strong) continue;
+            var roleName = strong.textContent.trim().replace(/:$/, '');
+            var role = (roleName === 'User') ? 'user' : 'assistant';
+            // Clone the entire message div, remove the role label, chips, and
+            // any UI-only affordances (More toggle), then extract text
+            var clone = el.cloneNode(true);
+            var s = clone.querySelector('strong');
+            if (s) s.remove();
+            var chipsEl = clone.querySelector('.suggestion-chips');
+            if (chipsEl) chipsEl.remove();
+            var moreBtn = clone.querySelector('.chat-more-toggle');
+            if (moreBtn) moreBtn.remove();
+            messages.push({ role: role, content: clone.textContent.trim() });
+        }
+        return messages;
+    }
+
+    // --- Submit Chat Message (programmatic) ----------------------------------
+
+    function submitChatMessage(text) {
+        if (isRequestActive) return;
+        var ci = document.getElementById('chatInput');
+        if (ci) ci.value = text;
+        var form = document.getElementById('chatForm');
+        if (form) form.requestSubmit ? form.requestSubmit() : form.dispatchEvent(new Event('submit'));
+    }
+
+    // --- Chat Link Click Handler ---------------------------------------------
+
+    (function() {
+        var cm = document.getElementById('chatMessages');
+        if (!cm) return;
+        cm.addEventListener('click', function(e) {
+            var anchor = e.target.closest('a[href]');
+            if (!anchor) return;
+            var href = anchor.getAttribute('href');
+            if (!href) return;
+
+            // Send link: send: scheme — submit message on behalf of user
+            if (href.indexOf('send:') === 0) {
+                e.preventDefault();
+                var message = decodeURIComponent(href.substring(5));
+                submitChatMessage(message);
+                return;
+            }
+
+            // Navigation link: root-relative path
+            if (href.charAt(0) === '/' && href.charAt(1) !== '/') {
+                e.preventDefault();
+                navigateTo(href);
+                return;
+            }
+
+            // External links: open in new tab
+            anchor.target = '_blank';
+            anchor.rel = 'noopener';
+        });
+        // Suggestion chip click handler
+        cm.addEventListener('click', function(e) {
+            var btn = e.target.closest ? e.target.closest('.suggestion-chip') : null;
+            if (!btn) return;
+            var payload = btn.getAttribute('data-payload') || '';
+            // Disable all chips in this message
+            var chips = btn.parentNode.querySelectorAll('.suggestion-chip');
+            for (var i = 0; i < chips.length; i++) chips[i].disabled = true;
+            submitChatMessage(payload);
+        });
+    })();
+
+    // --- Undo / Try Again Links (§9) -----------------------------------------
+
+    function appendUndoLinks(lastUserMsg) {
+        var cm = document.getElementById('chatMessages');
+        if (!cm || pageVersion <= 0) return;
+
+        var undoDiv = document.createElement('div');
+        undoDiv.className = 'synthos-undo-link';
+        undoDiv.style.cssText = 'text-align:right;padding:4px 12px 2px;';
+
+        var undoLink = document.createElement('a');
+        undoLink.href = '#';
+        undoLink.textContent = 'undo';
+        undoLink.style.cssText = 'color:var(--accent-primary,#a78bfa);font-size:12px;text-decoration:none;opacity:0.7;';
+        undoLink.addEventListener('mouseenter', function() { undoLink.style.opacity = '1'; undoLink.style.textDecoration = 'underline'; });
+        undoLink.addEventListener('mouseleave', function() { undoLink.style.opacity = '0.7'; undoLink.style.textDecoration = 'none'; });
+
+        undoLink.addEventListener('click', function(e) {
+            e.preventDefault();
+            doUndo();
+        });
+        undoDiv.appendChild(undoLink);
+
+        if (lastUserMsg) {
+            var sep = document.createTextNode('  \u00b7  ');
+            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();
+                doTryAgain(lastUserMsg);
+            });
+            undoDiv.appendChild(tryLink);
+        }
+
+        cm.appendChild(undoDiv);
+    }
+
+    // --- Clear Conversation Action -------------------------------------------
+
+    function appendClearAction() {
+        var cm = document.getElementById('chatMessages');
+        if (!cm) return;
+        // Remove any existing clear action first
+        var existing = cm.querySelector('.synthos-clear-action');
+        if (existing) existing.remove();
+
+        // Regular pages now rely on undo to roll back changes — no chat-level reset
+        // affordance. Only ephemeral pages (Starters/System) still surface the link
+        // as "Clear conversation", since their chat history isn't journaled to disk.
+        if (!shellInit.noPersistHistory) return;
+
+        // Only show if there's conversation beyond the initial greeting
+        var msgs = cm.querySelectorAll('.chat-message');
+        if (msgs.length <= 1) return;
+
+        var clearDiv = document.createElement('div');
+        clearDiv.className = 'synthos-clear-action';
+        clearDiv.style.cssText = 'text-align:center;padding:8px 12px 4px;';
+
+        var clearLink = document.createElement('a');
+        clearLink.href = '#';
+        clearLink.textContent = 'Clear conversation';
+        clearLink.style.cssText = 'color:var(--bodySubtext,#888);font-size:12px;text-decoration:none;opacity:0.7;';
+        clearLink.addEventListener('mouseenter', function() { clearLink.style.opacity = '1'; clearLink.style.textDecoration = 'underline'; });
+        clearLink.addEventListener('mouseleave', function() { clearLink.style.opacity = '0.7'; clearLink.style.textDecoration = 'none'; });
+        clearLink.addEventListener('click', function(e) {
+            e.preventDefault();
+            doReset();
+        });
+
+        clearDiv.appendChild(clearLink);
+        cm.appendChild(clearDiv);
+    }
+
+
+    function doReset() {
+        if (isRequestActive) return;
+        setChatBusy(true);
+        showLoadingOverlay('Updating Page');
+
+        fetch('/' + pageName + '/reset', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: '{}'
+        })
+        .then(function(res) { return res.json(); })
+        .then(function(result) {
+            setChatBusy(false);
+            setPageDirty(false);
+            pageVersion = 0;
+
+            // Reload the iframe with the fresh page
+            sendToPage('page:load', { html: result.html });
+
+            // Re-render chat with just the greeting
+            var cm = document.getElementById('chatMessages');
+            if (cm) cm.innerHTML = '';
+            if (result.greeting && result.greeting.length > 0) {
+                renderInitialMessages(result.greeting);
+            }
+
+            hideLoadingOverlay();
+            var ci = document.getElementById('chatInput');
+            if (ci) ci.focus();
+            scrollChatToBottom();
+        })
+        .catch(function(err) {
+            setChatBusy(false);
+            console.error('Reset failed:', err);
+            hideLoadingOverlay();
+        });
+    }
+
+    function doUndo() {
+        if (isRequestActive) return;
+        setChatBusy(true);
+        showLoadingOverlay('Updating Page');
+
+        fetch('/' + pageName + '/undo', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: '{}'
+        })
+        .then(function(res) { return res.text(); })
+        .then(function(html) {
+            setChatBusy(false);
+            if (pageVersion > 0) pageVersion--;
+            // Pending c-files may still remain after undo — mirror that.
+            setPageDirty(pageVersion > 0);
+            sendToPage('page:load', { html: html });
+            hideLoadingOverlay();
+
+            // Remove the last undo link + the entire last turn from the chat.
+            // A turn is: one user message followed by one-or-more assistant
+            // bubbles (primary reply, plus any validation/skipped-ops warnings
+            // appended after it). Counting "last N messages" misses the user
+            // message whenever warnings pushed it further up the list.
+            var cm = document.getElementById('chatMessages');
+            if (cm) {
+                var undoLinks = cm.querySelectorAll('.synthos-undo-link');
+                if (undoLinks.length > 0) undoLinks[undoLinks.length - 1].remove();
+                var userMsgs = cm.querySelectorAll('.chat-message--user');
+                if (userMsgs.length > 0) {
+                    var lastUser = userMsgs[userMsgs.length - 1];
+                    var cursor = lastUser.nextElementSibling;
+                    while (cursor) {
+                        var next = cursor.nextElementSibling;
+                        if (cursor.classList.contains('chat-message')) cursor.remove();
+                        cursor = next;
+                    }
+                    lastUser.remove();
+                }
+            }
+            appendClearAction();
+            scrollChatToBottom();
+        })
+        .catch(function(err) {
+            setChatBusy(false);
+            console.error('Undo failed:', err);
+            hideLoadingOverlay();
+        });
+    }
+
+    function doTryAgain(message) {
+        if (isRequestActive) return;
+        showLoadingOverlay();
+        var ci = document.getElementById('chatInput');
+        if (ci) ci.disabled = true;
+        var sb = document.querySelector('.chat-send-btn');
+        if (sb) sb.disabled = true;
+
+        setChatBusy(true);
+        var tryAgainBody = { message: message, tryAgain: true, history: extractHistory() };
+        if (shellInit.builderStarter) tryAgainBody.starter = shellInit.builderStarter;
+        fetch('/' + pageName, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(tryAgainBody)
+        })
+        .then(function(res) {
+            // Stream NDJSON
+            var reader = res.body.getReader();
+            var decoder = new TextDecoder();
+            var buffer = '';
+            var finalResult = null;
+            function processLines() {
+                var nlIdx;
+                while ((nlIdx = buffer.indexOf('\n')) !== -1) {
+                    var line = buffer.slice(0, nlIdx).trim();
+                    buffer = buffer.slice(nlIdx + 1);
+                    if (!line) continue;
+                    try {
+                        var evt = JSON.parse(line);
+                        if (evt.event === 'result') finalResult = evt;
+                        else if (evt.event === 'error') finalResult = { errorText: evt.error };
+                    } catch (e) { /* skip */ }
+                }
+            }
+            function readChunk() {
+                return reader.read().then(function(chunk) {
+                    if (chunk.done) { processLines(); return finalResult; }
+                    buffer += decoder.decode(chunk.value, { stream: true });
+                    processLines();
+                    return readChunk();
+                });
+            }
+            return readChunk();
+        })
+        .then(function(result) {
+            setChatBusy(false);
+            if (!result) { hideLoadingOverlay(); return; }
+            setPageDirty(true);
+            if (typeof result.version === 'number') pageVersion = result.version;
+            sendToPage('page:load', { html: result.html });
+            hideLoadingOverlay();
+            if (ci) { ci.disabled = false; ci.focus(); }
+            if (sb) sb.disabled = false;
+
+            // Remove the last undo link + every assistant/warning bubble that
+            // followed the most recent user message (primary reply plus any
+            // validation/skipped-ops warnings). Keep the user message itself —
+            // try-again re-submits it verbatim.
+            var cm = document.getElementById('chatMessages');
+            if (cm) {
+                var undoLinks = cm.querySelectorAll('.synthos-undo-link');
+                if (undoLinks.length > 0) undoLinks[undoLinks.length - 1].remove();
+                var userMsgs = cm.querySelectorAll('.chat-message--user');
+                if (userMsgs.length > 0) {
+                    var lastUser = userMsgs[userMsgs.length - 1];
+                    var cursor = lastUser.nextElementSibling;
+                    while (cursor) {
+                        var next = cursor.nextElementSibling;
+                        if (cursor.classList.contains('chat-message')) cursor.remove();
+                        cursor = next;
+                    }
+                }
+            }
+            if (result.replyText) {
+                appendChatMessage(pn, result.replyText);
+            } else {
+                appendChatMessage(pn, 'Page updated (retry).');
+            }
+            showSkippedOpsWarning(result);
+            appendUndoLinks(message);
+            appendClearAction();
+            scrollChatToBottom();
+        })
+        .catch(function(err) {
+            setChatBusy(false);
+            console.error('Try again failed:', err);
+            hideLoadingOverlay();
+            if (ci) ci.disabled = false;
+            if (sb) sb.disabled = false;
+        });
+    }
+
+    // --- Save / Copy modal (§3) — implementation lives in shell-modals.v3.js -
+    // shell-modals.v3.js loads first and exposes:
+    //   window.__synthOSOpenSaveModal()           — save dialog (create new page from current)
+    //   window.__synthOSOpenCopyModal(pageRecord) — copy dialog (unified with /pages gallery)
+    //   window.__synthOSOpenEditModal(page, cb)   — edit dialog (unified with /pages gallery)
+    //   window.__synthOSShowError(msg)            — shared error dialog
+
+    // --- Shell Toolbar (§5) --------------------------------------------------
+
+    var DB_NAME = 'synthos-ui';
+    var STORE_NAME = 'panel-state';
+    var isBuilderPage = pageName === 'builder';
+
+    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);
+    }
+
+    function toggleBuilder() {
+        var collapsed = !document.body.classList.contains('chat-collapsed');
+        setCollapsed(collapsed);
+    }
+
+    // Restore chat panel state
+    if (isBuilderPage) {
+        document.body.classList.remove('chat-collapsed');
+    } else {
+        loadCollapsed(function(val) {
+            if (val === true) {
+                document.body.classList.add('chat-collapsed');
+            }
+        });
+    }
+
+    // Builder toggle
+    var builderToggle = document.getElementById('builderToggle');
+    if (builderToggle) {
+        builderToggle.addEventListener('click', toggleBuilder);
+    }
+
+    // Builder close button
+    var builderClose = document.getElementById('builderClose');
+    if (builderClose) {
+        builderClose.addEventListener('click', function() { setCollapsed(true); });
+    }
+
+    // Pages button — propagate firstRun flag until we reach the Pages gallery.
+    // Disabled (greyed out, no clicks) when already on /pages.
+    var pagesBtn = document.getElementById('pagesBtn');
+    if (pagesBtn) {
+        if (pageName === 'pages') {
+            pagesBtn.disabled = true;
+            pagesBtn.style.opacity = '0.4';
+            pagesBtn.style.pointerEvents = 'none';
+            pagesBtn.style.cursor = 'not-allowed';
+        } else {
+            pagesBtn.addEventListener('click', function() {
+                var params = new URLSearchParams(window.location.search);
+                var isFirstRun = params.get('firstRun') && pageName !== 'pages';
+                navigateTo(isFirstRun ? '/pages?firstRun=1' : '/pages');
+            });
+        }
+    }
+
+    // Save button — dual-mode:
+    //   Builder page: "Save Page" — disabled until there are unsaved changes.
+    //   Other pages: "Save Page" while dirty, "Copy Page" when clean.
+    var saveBtn = document.getElementById('saveBtn');
+    function updateSaveBtnState() {
+        if (!saveBtn) return;
+        var mode;
+        if (isBuilderPage) {
+            mode = pageDirty ? 'save' : 'disabled';
+        } else {
+            mode = pageDirty ? 'save' : 'copy';
+        }
+        saveBtn.dataset.mode = mode;
+        if (mode === 'disabled') {
+            saveBtn.disabled = true;
+            saveBtn.setAttribute('aria-label', 'Save Page');
+            saveBtn.style.opacity = '0.4';
+            saveBtn.style.pointerEvents = 'none';
+            saveBtn.style.cursor = 'not-allowed';
+        } else {
+            saveBtn.disabled = false;
+            saveBtn.setAttribute('aria-label', mode === 'save' ? 'Save Page' : 'Copy Page');
+            saveBtn.style.opacity = '';
+            saveBtn.style.pointerEvents = '';
+            saveBtn.style.cursor = '';
+        }
+    }
+    if (saveBtn) {
+        saveBtn.addEventListener('click', function() {
+            if (saveBtn.disabled) return;
+            var mode = saveBtn.dataset.mode || 'save';
+            if (mode === 'copy' && window.__synthOSOpenCopyModal) {
+                window.__synthOSOpenCopyModal({
+                    name: pageName,
+                    title: shellInit.pageTitle || '',
+                    categories: shellInit.pageCategories || [],
+                    greeting: shellInit.greeting || ''
+                });
+            } else if (window.__synthOSOpenSaveModal) {
+                window.__synthOSOpenSaveModal();
+            }
+        });
+        updateSaveBtnState();
+    }
+
+    // Settings button
+    var settingsBtn = document.getElementById('settingsBtn');
+    if (settingsBtn) {
+        settingsBtn.addEventListener('click', function() { navigateTo('/settings'); });
+    }
+
+    // --- Navigation with Dirty Check (§10) -----------------------------------
+
+    // Create unsaved-changes dialog
+    var unsavedOverlay = document.createElement('div');
+    unsavedOverlay.className = 'flm-dialog-overlay';
+    unsavedOverlay.id = 'synthos-unsavedDialog';
+    unsavedOverlay.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(unsavedOverlay);
+
+    var pendingUrl = null;
+
+    document.getElementById('synthos-unsavedLeave').addEventListener('click', function() {
+        unsavedOverlay.classList.remove('flm-dialog-overlay--open');
+        if (pendingUrl) {
+            setPageDirty(false);
+            window.location.href = pendingUrl;
+        }
+    });
+
+    document.getElementById('synthos-unsavedStay').addEventListener('click', function() {
+        unsavedOverlay.classList.remove('flm-dialog-overlay--open');
+        pendingUrl = null;
+    });
+
+    function navigateTo(url) {
+        if ((pageDirty || isRequestActive) && (shellInit.isRequiredPage || shellInit.isStarter)) {
+            pendingUrl = url;
+            unsavedOverlay.classList.add('flm-dialog-overlay--open');
+        } else {
+            window.location.href = url;
+        }
+    }
+
+    // --- Focus Management (§6) -----------------------------------------------
+
+    (function() {
+        var ci = document.getElementById('chatInput');
+        if (!ci) return;
+
+        ci.addEventListener('mousedown', function(e) {
+            e.stopPropagation();
+        });
+
+        ['keydown', 'keyup', 'keypress'].forEach(function(type) {
+            document.addEventListener(type, function(e) {
+                if (document.activeElement === ci) {
+                    if (e.key === 'Enter' && !e.shiftKey) return;
+                    e.stopImmediatePropagation();
+                }
+            }, true);
+        });
+    })();
+
+    // --- Brainstorm (§7) -----------------------------------------------------
+
+    (function() {
+        var chatInputEl = document.getElementById('chatInput');
+        if (!chatInputEl) return;
+
+        // --- Create icon row (.chat-input-wrapper) ---
+        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);
+        }
+
+        // --- Brainstorm icon button ---
+        var brainstormBtn = document.createElement('button');
+        brainstormBtn.type = 'button';
+        brainstormBtn.className = 'brainstorm-icon-btn';
+        brainstormBtn.setAttribute('aria-label', '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);
+
+        // --- Send button ---
+        var sendBtn = document.createElement('button');
+        sendBtn.type = 'submit';
+        sendBtn.className = 'chat-send-btn';
+        sendBtn.setAttribute('aria-label', '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 ---
+        chatInputEl.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 bModal = document.createElement('div');
+        bModal.id = 'synthos-brainstormModal';
+        bModal.className = 'modal-overlay brainstorm-modal';
+        bModal.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(bModal);
+
+        var brainstormHistory = [];
+
+        function openBrainstorm() {
+            bModal.classList.add('show');
+            var topic = chatInputEl.value.trim();
+            if (topic) {
+                chatInputEl.value = '';
+                sendBrainstormText(topic, true);
+            } else {
+                sendBrainstormText('', true);
+            }
+        }
+
+        function closeBrainstorm() {
+            bModal.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 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 fullText = text;
+                if (suggestions && suggestions.length > 0) {
+                    fullText += '\n\n';
+                    suggestions.forEach(function(s) {
+                        fullText += '- [' + s + '](suggest:' + encodeURIComponent(s) + ')\n';
+                    });
+                }
+                var rendered;
+                if (typeof marked !== 'undefined') {
+                    rendered = renderMarkdown(fullText);
+                } else {
+                    rendered = { html: escapeHtml(fullText), suggestions: [] };
+                }
+                div.innerHTML = '<strong>' + pn + ':</strong> ' + rendered.html;
+                var chips = buildSuggestionChips(rendered.suggestions);
+                if (chips) div.appendChild(chips);
+                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() {
+                        chatInputEl.value = this.getAttribute('data-prompt');
+                        closeBrainstorm();
+                        chatInputEl.focus();
+                    });
+                    btnRow.appendChild(buildBtn);
+                    div.appendChild(btnRow);
+                }
+            } else {
+                div.textContent = text;
+            }
+            document.getElementById('synthos-brainstormMessages').appendChild(div);
+            scrollBrainstormToBottom();
+        }
+
+        // Delegated click handler for suggestion chips inside brainstorm messages
+        document.getElementById('synthos-brainstormMessages').addEventListener('click', function(e) {
+            var btn = e.target.closest ? e.target.closest('.suggestion-chip') : null;
+            if (!btn) return;
+            var payload = btn.getAttribute('data-payload') || '';
+            // Disable all suggestion chips in brainstorm to prevent re-clicks
+            var chips = document.querySelectorAll('#synthos-brainstormMessages .suggestion-chip');
+            for (var i = 0; i < chips.length; i++) {
+                chips[i].disabled = true;
+            }
+            sendBrainstormText(payload, false);
+        });
+
+        function getBrainstormContext() {
+            // Read chat history from the shell's own chat panel
+            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');
+        }
+
+        function sendBrainstormMessage() {
+            var input = document.getElementById('synthos-brainstormInput');
+            var text = input.value.trim();
+            if (!text) return;
+            input.value = '';
+            sendBrainstormText(text, false);
+        }
+
+        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;
+
+            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();
+            });
+        }
+
+        brainstormBtn.addEventListener('click', openBrainstorm);
+        document.getElementById('synthos-brainstormCloseBtn').addEventListener('click', closeBrainstorm);
+
+        var brainstormMouseDownTarget = null;
+        bModal.addEventListener('mousedown', function(e) { brainstormMouseDownTarget = e.target; });
+        bModal.addEventListener('click', function(e) {
+            if (e.target === bModal && brainstormMouseDownTarget === bModal) closeBrainstorm();
+            brainstormMouseDownTarget = null;
+        });
+
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape' && bModal.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();
+            }
+        });
+    })();
+
+    // --- Attachments (§8) ----------------------------------------------------
+
+    var shellAttachments = [];
+
+    (function() {
+        var chatInputEl = document.getElementById('chatInput');
+        if (!chatInputEl) return;
+        var chatFormEl = document.getElementById('chatForm');
+        var wrapper = chatFormEl ? chatFormEl.querySelector('.chat-input-wrapper') : null;
+        if (!wrapper) return;
+
+        // Pills container
+        var pillsContainer = document.createElement('div');
+        pillsContainer.className = 'attachment-pills';
+        if (chatFormEl) chatFormEl.insertBefore(pillsContainer, chatFormEl.firstChild);
+
+        function renderPills() {
+            pillsContainer.innerHTML = '';
+            if (!shellAttachments || shellAttachments.length === 0) return;
+            for (var i = 0; i < shellAttachments.length; i++) {
+                (function(idx) {
+                    var att = shellAttachments[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() {
+                        shellAttachments.splice(idx, 1);
+                        renderPills();
+                    });
+                    pill.appendChild(removeBtn);
+
+                    pillsContainer.appendChild(pill);
+                })(i);
+            }
+        }
+
+        function addImageFromDataUrl(dataUrl, name) {
+            var commaIdx = dataUrl.indexOf(',');
+            if (commaIdx === -1) return;
+            var meta = dataUrl.substring(0, commaIdx);
+            var base64 = dataUrl.substring(commaIdx + 1);
+            var mediaType = meta.replace('data:', '').replace(';base64', '');
+            shellAttachments.push({ mediaType: mediaType, data: base64, name: name || 'image' });
+            renderPills();
+        }
+
+        // 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 from clipboard
+        document.addEventListener('paste', function(e) {
+            var active = document.activeElement;
+            var isEditable = active && (active.isContentEditable ||
+                (active.tagName === 'TEXTAREA' && active !== chatInputEl) ||
+                (active.tagName === 'INPUT' && active !== chatInputEl));
+            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;
+                }
+            }
+        });
+
+        // Drag-and-drop
+        if (chatFormEl) {
+            chatFormEl.addEventListener('dragover', function(e) { e.preventDefault(); e.stopPropagation(); });
+            chatFormEl.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';
+        attachBtn.setAttribute('aria-label', '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 flow
+        menuScreenshot.addEventListener('click', function() {
+            closeMenu();
+            startScreenshotAnnotation();
+        });
+
+        function startScreenshotAnnotation() {
+            var viewerPanel = document.getElementById('viewerPanel');
+            if (!viewerPanel) return;
+
+            var overlay = document.createElement('div');
+            overlay.className = 'screenshot-overlay';
+
+            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);
+
+            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);
+
+            var currentRect = null;
+            var startX, startY, isDrawing = false;
+            var allRects = [];
+
+            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;
+                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);
+                currentRect.style.left = x + 'px';
+                currentRect.style.top = y + 'px';
+                currentRect.style.width = Math.abs(curX - startX) + 'px';
+                currentRect.style.height = Math.abs(curY - startY) + '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) { 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', doCapture);
+            cancelBtn.addEventListener('click', cleanup);
+
+            function doCapture() {
+                if (typeof html2canvas === 'undefined') {
+                    console.error('html2canvas not loaded');
+                    cleanup();
+                    return;
+                }
+                overlay.style.visibility = 'hidden';
+                html2canvas(viewerPanel, { useCORS: true, logging: false }).then(function(fullCanvas) {
+                    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(r.x * scaleX, r.y * scaleY, r.w * scaleX, r.h * scaleY);
+                    }
+                    var dataUrl = fullCanvas.toDataURL('image/png');
+                    var b64 = dataUrl.split(',')[1];
+                    shellAttachments.push({ mediaType: 'image/png', data: b64, 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);
+            }
+
+            function onKeyDown(e) { if (e.key === 'Escape') cleanup(); }
+            document.addEventListener('keydown', onKeyDown);
+
+            viewerPanel.style.position = 'relative';
+            viewerPanel.appendChild(overlay);
+        }
+    })();
+
+    // --- Initial Undo Links (§9) — show if version > 0 on load --------------
+
+    if (pageVersion > 0 && !shellInit.isLocked) {
+        // Find the last user message from init messages — the new server
+        // journal always sends { role, content } objects.
+        var lastUserMsg = '';
+        if (shellInit.messages) {
+            for (var j = shellInit.messages.length - 1; j >= 0; j--) {
+                var m = shellInit.messages[j];
+                if (m && m.role === 'user' && typeof m.content === 'string') {
+                    lastUserMsg = m.content.trim();
+                    break;
+                }
+            }
+        }
+        appendUndoLinks(lastUserMsg);
+    }
+    // Append clear/reset action (no-op if there's nothing to reset)
+    appendClearAction();
+
+    // --- Editable Greeting (non-locked, non-builder pages) -----------------
+
+    (function() {
+        if (!isGreetingEditable) return;
+        var cm = document.getElementById('chatMessages');
+        if (!cm) return;
+        var firstMsg = cm.querySelector('.chat-message');
+        if (!firstMsg) return;
+
+        // Position the message relatively so we can place the edit icon
+        firstMsg.style.position = 'relative';
+
+        var editBtn = document.createElement('button');
+        editBtn.type = 'button';
+        editBtn.className = 'synthos-greeting-edit-btn';
+        editBtn.setAttribute('aria-label', 'Edit greeting');
+        editBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>';
+        editBtn.style.cssText = 'position:absolute;top:6px;right:6px;background:transparent;border:none;color:var(--bodySubtext,#888);cursor:pointer;padding:4px;border-radius:4px;opacity:0;transition:opacity 0.15s;';
+
+        firstMsg.addEventListener('mouseenter', function() { editBtn.style.opacity = '1'; });
+        firstMsg.addEventListener('mouseleave', function() { editBtn.style.opacity = '0'; });
+
+        editBtn.addEventListener('click', function() {
+            var p = firstMsg.querySelector('p');
+            if (!p) return;
+
+            // Extract current greeting text (strip the "SynthOS:" prefix)
+            var strong = p.querySelector('strong');
+            var currentText = '';
+            if (strong) {
+                var clone = p.cloneNode(true);
+                clone.querySelector('strong').remove();
+                currentText = clone.textContent.trim();
+            } else {
+                currentText = p.textContent.trim();
+            }
+
+            // Replace message content with editable textarea
+            var original = firstMsg.innerHTML;
+            firstMsg.innerHTML = '';
+            firstMsg.style.padding = '8px';
+            editBtn.style.display = 'none';
+
+            var textarea = document.createElement('textarea');
+            textarea.className = 'brainstorm-input';
+            textarea.value = currentText;
+            textarea.style.cssText = 'width:100%;min-height:60px;box-sizing:border-box;resize:vertical;font-size:13px;';
+            firstMsg.appendChild(textarea);
+
+            var btnRow = document.createElement('div');
+            btnRow.style.cssText = 'display:flex;justify-content:flex-end;gap:6px;margin-top:6px;';
+
+            var cancelBtn = document.createElement('button');
+            cancelBtn.type = 'button';
+            cancelBtn.className = 'brainstorm-send-btn';
+            cancelBtn.textContent = 'Cancel';
+            cancelBtn.style.cssText = 'padding:4px 12px;font-size:12px;background:transparent;border:1px solid var(--bodyDivider,#444);color:var(--bodySubtext,#888);';
+
+            var saveBtn = document.createElement('button');
+            saveBtn.type = 'button';
+            saveBtn.className = 'brainstorm-send-btn';
+            saveBtn.textContent = 'Save';
+            saveBtn.style.cssText = 'padding:4px 12px;font-size:12px;';
+
+            btnRow.appendChild(cancelBtn);
+            btnRow.appendChild(saveBtn);
+            firstMsg.appendChild(btnRow);
+
+            textarea.focus();
+
+            cancelBtn.addEventListener('click', function() {
+                firstMsg.innerHTML = original;
+                firstMsg.style.padding = '';
+                editBtn.style.display = '';
+                firstMsg.appendChild(editBtn);
+            });
+
+            saveBtn.addEventListener('click', function() {
+                var newText = textarea.value.trim();
+                if (!newText) { cancelBtn.click(); return; }
+
+                saveBtn.disabled = true;
+                saveBtn.textContent = 'Saving...';
+
+                fetch('/' + pageName + '/greeting', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ greeting: newText })
+                })
+                .then(function(res) { return res.json(); })
+                .then(function(result) {
+                    if (result.ok) {
+                        // Update the displayed message
+                        firstMsg.innerHTML = '';
+                        firstMsg.style.padding = '';
+                        var newP = document.createElement('p');
+                        newP.innerHTML = '<strong>' + escapeHtml(pn) + ':</strong> ' + escapeHtml(newText);
+                        firstMsg.appendChild(newP);
+                        firstMsg.appendChild(editBtn);
+                        editBtn.style.display = '';
+                        // Update shellInit so save modal has current greeting
+                        shellInit.greeting = newText;
+                    } else {
+                        cancelBtn.click();
+                    }
+                })
+                .catch(function() { cancelBtn.click(); });
+            });
+
+            textarea.addEventListener('keydown', function(e) {
+                if (e.key === 'Escape') { e.preventDefault(); cancelBtn.click(); }
+                if (e.key === 'Enter' && e.ctrlKey) { e.preventDefault(); saveBtn.click(); }
+            });
+        });
+
+        firstMsg.appendChild(editBtn);
+    })();
+
+    // --- Initial Focus -------------------------------------------------------
+    if (chatInput && !document.body.classList.contains('chat-collapsed')) {
+        chatInput.focus();
+    }
+
+    // --- Scroll chat to bottom on load ---
+    scrollChatToBottom();
+})();