synthos 0.10.0 → 0.11.0

package/static-files/shell-modals.v3.js

@@ -0,0 +1,521 @@
+/**
+ * shell-modals.v3.js — Shared dialog components for the SynthOS shell chrome.
+ *
+ * Runs in the parent frame alongside shell.v3.js. Must load BEFORE shell.v3.js so
+ * the open* functions are available when the toolbar wires up its click
+ * handlers.
+ *
+ * Exposes on window:
+ *   __synthOSOpenSaveModal()              — save-as-new-page (brainstorm-style)
+ *   __synthOSOpenCopyModal(page)          — copy-to-new-page (brainstorm-style)
+ *   __synthOSOpenEditModal(page, onDone)  — edit page metadata (FluentLM)
+ *   __synthOSShowError(msg)               — shared error dialog
+ *
+ * Both gallery (/pages context menu) and shell toolbar use these via
+ * postMessage shell:modal events — keeps all modal UI in one place.
+ */
+(function() {
+    'use strict';
+
+    // Read window.__shellInit lazily via getShellInit() — capturing it at IIFE
+    // load time risks racing the shell-init script injection.
+
+    // --- Helpers -------------------------------------------------------------
+
+    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';
+            var clone = el.cloneNode(true);
+            var s = clone.querySelector('strong');
+            if (s) s.remove();
+            var chipsEl = clone.querySelector('.suggestion-chips');
+            if (chipsEl) chipsEl.remove();
+            messages.push({ role: role, content: clone.textContent.trim() });
+        }
+        return messages;
+    }
+
+    function makeEl(html) {
+        var tmp = document.createElement('div');
+        tmp.innerHTML = html.trim();
+        return tmp.firstChild;
+    }
+
+    function wireMousedownDismiss(overlay, closeFn) {
+        var md = null;
+        overlay.addEventListener('mousedown', function(e) { md = e.target; });
+        overlay.addEventListener('click', function(e) {
+            if (e.target === overlay && md === overlay) closeFn();
+            md = null;
+        });
+    }
+
+    // --- Error Modal (shared, brainstorm-style) ------------------------------
+
+    var errorModal = makeEl(
+        '<div id="synthos-errorModal" class="modal-overlay">' +
+            '<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(--bodyText);"></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>' +
+        '</div>'
+    );
+    document.body.appendChild(errorModal);
+
+    function showError(msg) {
+        document.getElementById('synthos-errorMessage').textContent = msg;
+        errorModal.classList.add('show');
+    }
+    function closeError() { errorModal.classList.remove('show'); }
+    document.getElementById('synthos-errorCloseBtn').addEventListener('click', closeError);
+    document.getElementById('synthos-errorOkBtn').addEventListener('click', closeError);
+    wireMousedownDismiss(errorModal, closeError);
+
+    // --- Shared styles for Save/Copy advanced-options expando ----------------
+
+    var ADV_TOGGLE_STYLE = 'background:none;border:none;color:var(--bodySubtext);font-size:13px;cursor:pointer;padding:8px 0;display:flex;align-items:center;gap:6px;';
+    var ADV_ICON_STYLE = 'font-size:10px;transition:transform .2s;display:inline-block;';
+    var ADV_CONTENT_STYLE = 'display:none;padding-left:16px;border-left:2px solid var(--bodyDivider);margin-left:4px;';
+    var ADV_INNER_STACK_STYLE = 'display:flex;flex-direction:column;gap:12px;margin-top:12px;';
+
+    // --- Save Modal (brainstorm-style with Advanced Options expando) ---------
+
+    var saveModal = makeEl(
+        '<div id="synthos-saveModal" class="modal-overlay">' +
+            '<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(--bodySubtext);">Display Title <span style="color:var(--themePrimary);">*</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(--bodySubtext);">Categories <span style="color:var(--themePrimary);">*</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 class="synthos-adv">' +
+                        '<button type="button" id="synthos-saveAdvToggle" style="' + ADV_TOGGLE_STYLE + '">' +
+                            '<span id="synthos-saveAdvIcon" style="' + ADV_ICON_STYLE + '">&#9654;</span> Advanced Options' +
+                        '</button>' +
+                        '<div id="synthos-saveAdvContent" style="' + ADV_CONTENT_STYLE + '">' +
+                            '<div style="' + ADV_INNER_STACK_STYLE + '">' +
+                                '<div>' +
+                                    '<label style="display:block;margin-bottom:4px;font-size:13px;color:var(--bodySubtext);">Greeting <span style="font-size:11px;opacity:0.7;">(optional)</span></label>' +
+                                    '<input type="text" id="synthos-saveGreetingInput" class="brainstorm-input" placeholder="Enter a custom greeting..." style="width:100%;box-sizing:border-box;">' +
+                                    '<div style="font-size:11px;color:var(--bodySubtext);margin-top:4px;opacity:0.7;">Initial message shown when the page loads.</div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</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(--bodyDivider);color:var(--bodySubtext);">Cancel</button>' +
+                    '<button type="button" class="brainstorm-send-btn" id="synthos-saveConfirmBtn">Save</button>' +
+                '</div>' +
+            '</div>' +
+        '</div>'
+    );
+    document.body.appendChild(saveModal);
+
+    var saveTitleInput = document.getElementById('synthos-saveTitleInput');
+    var saveCategoriesInput = document.getElementById('synthos-saveCategoriesInput');
+    var saveGreetingInput = document.getElementById('synthos-saveGreetingInput');
+    var saveTitleError = document.getElementById('synthos-saveTitleError');
+    var saveCategoriesError = document.getElementById('synthos-saveCategoriesError');
+    var saveConfirmBtn = document.getElementById('synthos-saveConfirmBtn');
+    var saveAdvContent = document.getElementById('synthos-saveAdvContent');
+    var saveAdvIcon = document.getElementById('synthos-saveAdvIcon');
+
+    function getShellInit() { return window.__shellInit || {}; }
+    function getPageName() { return getShellInit().page || ''; }
+
+    function openSaveModal() {
+        var si = getShellInit();
+        var isBuilder = si.isBuilder || false;
+        saveTitleInput.value = isBuilder ? '' : (si.pageTitle || '');
+        saveCategoriesInput.value = isBuilder ? '' : (si.pageCategories || []).join(', ');
+        saveGreetingInput.value = isBuilder ? '' : (si.greeting || '');
+        saveTitleError.style.display = 'none';
+        saveCategoriesError.style.display = 'none';
+        saveConfirmBtn.disabled = false;
+        saveConfirmBtn.textContent = 'Save';
+        // Advanced Options always collapsed on open
+        saveAdvContent.style.display = 'none';
+        saveAdvIcon.style.transform = '';
+        saveModal.classList.add('show');
+        setTimeout(function() { saveTitleInput.focus(); }, 0);
+    }
+    function closeSaveModal() { saveModal.classList.remove('show'); }
+
+    function submitSave() {
+        var title = saveTitleInput.value.trim();
+        var cats = saveCategoriesInput.value.trim();
+        var greeting = saveGreetingInput.value.trim();
+        var valid = true;
+        if (!title) { saveTitleError.style.display = 'block'; valid = false; } else { saveTitleError.style.display = 'none'; }
+        if (!cats) { saveCategoriesError.style.display = 'block'; valid = false; } else { saveCategoriesError.style.display = 'none'; }
+        if (!valid) return;
+        var categories = cats.split(',').map(function(c) { return c.trim(); }).filter(Boolean);
+
+        saveConfirmBtn.disabled = true;
+        saveConfirmBtn.textContent = 'Saving...';
+
+        var body = { title: title, categories: categories };
+        if (greeting) body.greeting = greeting;
+        body.history = extractHistory();
+
+        var activePageName = getPageName();
+        var activeShellInit = getShellInit();
+        fetch('/' + activePageName + '/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) {
+                if (activeShellInit.noPersistHistory) {
+                    fetch('/' + activePageName + '/reset', { method: 'POST' })
+                        .finally(function() { window.location.href = result.data.redirect; });
+                } else {
+                    window.location.href = result.data.redirect;
+                }
+            } else {
+                closeSaveModal();
+                showError(result.data.error || 'An unknown error occurred');
+                saveConfirmBtn.disabled = false;
+                saveConfirmBtn.textContent = 'Save';
+            }
+        })
+        .catch(function(err) {
+            closeSaveModal();
+            showError('Network error: ' + err.message);
+            saveConfirmBtn.disabled = false;
+            saveConfirmBtn.textContent = 'Save';
+        });
+    }
+
+    document.getElementById('synthos-saveCloseBtn').addEventListener('click', closeSaveModal);
+    document.getElementById('synthos-saveCancelBtn').addEventListener('click', closeSaveModal);
+    saveConfirmBtn.addEventListener('click', submitSave);
+    wireMousedownDismiss(saveModal, closeSaveModal);
+    document.getElementById('synthos-saveAdvToggle').addEventListener('click', function() {
+        if (saveAdvContent.style.display === 'none') {
+            saveAdvContent.style.display = 'block';
+            saveAdvIcon.style.transform = 'rotate(90deg)';
+        } else {
+            saveAdvContent.style.display = 'none';
+            saveAdvIcon.style.transform = '';
+        }
+    });
+    saveTitleInput.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); submitSave(); } });
+    saveCategoriesInput.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); submitSave(); } });
+    saveGreetingInput.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); submitSave(); } });
+
+    // --- Copy Modal (brainstorm-style — matches Save dialog) -----------------
+
+    var copyModal = makeEl(
+        '<div id="synthos-copyModal" class="modal-overlay">' +
+            '<div class="modal-content" style="max-width:480px;">' +
+                '<div class="modal-header">' +
+                    '<span>Copy to New Page</span>' +
+                    '<button type="button" class="brainstorm-close-btn" id="synthos-copyCloseBtn">&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(--bodySubtext);">Display Title <span style="color:var(--themePrimary);">*</span></label>' +
+                        '<input type="text" id="synthos-copyTitle" class="brainstorm-input" placeholder="Enter a display title..." style="width:100%;box-sizing:border-box;">' +
+                        '<div style="font-size:11px;color:var(--bodySubtext);margin-top:4px;opacity:0.7;">Source: <span id="synthos-copySource"></span></div>' +
+                        '<div id="synthos-copyTitleError" 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(--bodySubtext);">Categories <span style="color:var(--themePrimary);">*</span></label>' +
+                        '<input type="text" id="synthos-copyCategories" class="brainstorm-input" placeholder="e.g. Tool, Game, Utility" style="width:100%;box-sizing:border-box;">' +
+                        '<div id="synthos-copyCategoriesError" style="color:#ff6b6b;font-size:12px;margin-top:4px;display:none;">At least one category is required</div>' +
+                    '</div>' +
+                    '<div class="synthos-adv">' +
+                        '<button type="button" id="synthos-copyAdvToggle" style="' + ADV_TOGGLE_STYLE + '">' +
+                            '<span id="synthos-copyAdvIcon" style="' + ADV_ICON_STYLE + '">&#9654;</span> Advanced Options' +
+                        '</button>' +
+                        '<div id="synthos-copyAdvContent" style="' + ADV_CONTENT_STYLE + '">' +
+                            '<div style="' + ADV_INNER_STACK_STYLE + '">' +
+                                '<div>' +
+                                    '<label style="display:block;margin-bottom:4px;font-size:13px;color:var(--bodySubtext);">Custom Page ID <span style="font-size:11px;opacity:0.7;">(optional)</span></label>' +
+                                    '<input type="text" id="synthos-copyPageId" class="brainstorm-input" placeholder="Auto-generated from title..." style="width:100%;box-sizing:border-box;">' +
+                                    '<div style="font-size:11px;color:var(--bodySubtext);margin-top:4px;opacity:0.7;">Used in the URL. Leave blank to auto-generate from title.</div>' +
+                                '</div>' +
+                                '<div>' +
+                                    '<label style="display:block;margin-bottom:4px;font-size:13px;color:var(--bodySubtext);">Greeting <span style="font-size:11px;opacity:0.7;">(optional)</span></label>' +
+                                    '<input type="text" id="synthos-copyGreeting" class="brainstorm-input" placeholder="Initial chat message..." style="width:100%;box-sizing:border-box;">' +
+                                    '<div style="font-size:11px;color:var(--bodySubtext);margin-top:4px;opacity:0.7;">Shown when the new page first loads.</div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</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-copyCancelBtn" style="background:transparent;border:1px solid var(--bodyDivider);color:var(--bodySubtext);">Cancel</button>' +
+                    '<button type="button" class="brainstorm-send-btn" id="synthos-copyConfirmBtn">Create Copy</button>' +
+                '</div>' +
+            '</div>' +
+        '</div>'
+    );
+    document.body.appendChild(copyModal);
+
+    var copyTitleInput = document.getElementById('synthos-copyTitle');
+    var copyCategoriesInput = document.getElementById('synthos-copyCategories');
+    var copyPageIdInput = document.getElementById('synthos-copyPageId');
+    var copyGreetingInput = document.getElementById('synthos-copyGreeting');
+    var copySourceDisplay = document.getElementById('synthos-copySource');
+    var copyTitleError = document.getElementById('synthos-copyTitleError');
+    var copyCategoriesError = document.getElementById('synthos-copyCategoriesError');
+    var copyConfirmBtn = document.getElementById('synthos-copyConfirmBtn');
+    var copyAdvContent = document.getElementById('synthos-copyAdvContent');
+    var copyAdvIcon = document.getElementById('synthos-copyAdvIcon');
+    var copySource = null;
+
+    function openCopyModal(pageRecord) {
+        copySource = pageRecord || {};
+        copySourceDisplay.textContent = copySource.title || copySource.name || '';
+        copyTitleInput.value = '';
+        copyCategoriesInput.value = (copySource.categories || []).join(', ');
+        copyPageIdInput.value = '';
+        copyGreetingInput.value = copySource.greeting || '';
+        copyTitleError.style.display = 'none';
+        copyCategoriesError.style.display = 'none';
+        copyAdvContent.style.display = 'none';
+        copyAdvIcon.style.transform = '';
+        copyConfirmBtn.disabled = false;
+        copyConfirmBtn.textContent = 'Create Copy';
+        copyModal.classList.add('show');
+        setTimeout(function() { copyTitleInput.focus(); }, 0);
+    }
+    function closeCopyModal() {
+        copyModal.classList.remove('show');
+        copySource = null;
+    }
+
+    function submitCopy() {
+        if (!copySource || !copySource.name) return;
+        var newTitle = copyTitleInput.value.trim();
+        var newName = copyPageIdInput.value.trim();
+        var greeting = copyGreetingInput.value.trim();
+        var cats = copyCategoriesInput.value.trim();
+        var valid = true;
+        if (!newTitle && !newName) { copyTitleError.style.display = 'block'; valid = false; } else { copyTitleError.style.display = 'none'; }
+        if (!cats) { copyCategoriesError.style.display = 'block'; valid = false; } else { copyCategoriesError.style.display = 'none'; }
+        if (!valid) return;
+        if (!newName) newName = newTitle;
+        newName = newName.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_-]/g, '');
+        if (!newName) { showError('Page name must contain at least one valid character (letters, numbers, hyphens, or underscores).'); copyTitleInput.focus(); return; }
+        var newCategories = cats.split(',').map(function(c) { return c.trim(); }).filter(Boolean);
+
+        copyConfirmBtn.disabled = true;
+        copyConfirmBtn.textContent = 'Copying...';
+
+        var body = { name: newName, title: newTitle, categories: newCategories };
+        if (greeting) body.greeting = greeting;
+
+        fetch('/api/pages/' + encodeURIComponent(copySource.name) + '/copy', {
+            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) {
+                copyConfirmBtn.disabled = false;
+                copyConfirmBtn.textContent = 'Create Copy';
+                showError(result.data.error || 'Failed to copy page');
+                return;
+            }
+            closeCopyModal();
+            window.location.href = '/' + newName;
+        })
+        .catch(function(err) {
+            copyConfirmBtn.disabled = false;
+            copyConfirmBtn.textContent = 'Create Copy';
+            showError('Failed to copy page: ' + err.message);
+        });
+    }
+
+    document.getElementById('synthos-copyCloseBtn').addEventListener('click', closeCopyModal);
+    document.getElementById('synthos-copyCancelBtn').addEventListener('click', closeCopyModal);
+    copyConfirmBtn.addEventListener('click', submitCopy);
+    wireMousedownDismiss(copyModal, closeCopyModal);
+    document.getElementById('synthos-copyAdvToggle').addEventListener('click', function() {
+        if (copyAdvContent.style.display === 'none') {
+            copyAdvContent.style.display = 'block';
+            copyAdvIcon.style.transform = 'rotate(90deg)';
+        } else {
+            copyAdvContent.style.display = 'none';
+            copyAdvIcon.style.transform = '';
+        }
+    });
+    [copyTitleInput, copyCategoriesInput, copyPageIdInput, copyGreetingInput].forEach(function(el) {
+        el.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); submitCopy(); } });
+    });
+
+    // --- Edit Modal (FluentLM — used by /pages gallery) ----------------------
+
+    var editModal = makeEl(
+        '<div id="synthos-editModal" class="flm-dialog-overlay">' +
+            '<div class="flm-dialog">' +
+                '<div class="flm-dialog-header">' +
+                    '<h2 class="flm-dialog-title">Edit Page Definition</h2>' +
+                    '<button class="flm-dialog-close" data-icon="Cancel" aria-label="Close" id="synthos-editCloseBtn"></button>' +
+                '</div>' +
+                '<div class="flm-dialog-body">' +
+                    '<div class="flm-stack" style="gap: var(--spacingM);">' +
+                        '<div class="flm-textfield">' +
+                            '<label class="flm-label" for="synthos-editTitle">Display Title</label>' +
+                            '<input class="flm-textfield-input" id="synthos-editTitle" placeholder="Enter display title...">' +
+                            '<span class="flm-text flm-text--small flm-text--secondary">Page name: <span id="synthos-editName"></span></span>' +
+                        '</div>' +
+                        '<div class="flm-textfield">' +
+                            '<label class="flm-label" for="synthos-editCategories">Categories (comma-separated)</label>' +
+                            '<input class="flm-textfield-input" id="synthos-editCategories" placeholder="e.g. Tools, Games, Utilities">' +
+                        '</div>' +
+                        '<label class="flm-checkbox">' +
+                            '<input type="checkbox" class="flm-checkbox-input" id="synthos-editPinned">' +
+                            '<span class="flm-checkbox-mark"></span>' +
+                            '<span class="flm-checkbox-label">Pinned to Favorites</span>' +
+                        '</label>' +
+                        '<div>' +
+                            '<label class="flm-checkbox">' +
+                                '<input type="checkbox" class="flm-checkbox-input" id="synthos-editLocked">' +
+                                '<span class="flm-checkbox-mark"></span>' +
+                                '<span class="flm-checkbox-label">Locked</span>' +
+                            '</label>' +
+                            '<span class="flm-text flm-text--small flm-text--secondary flm-text--block" style="margin-top:4px;padding-left:26px;">Locked pages are read-only and cannot be modified through chat.</span>' +
+                        '</div>' +
+                        '<div>' +
+                            '<label class="flm-checkbox">' +
+                                '<input type="checkbox" class="flm-checkbox-input" id="synthos-editShowInAll" checked>' +
+                                '<span class="flm-checkbox-mark"></span>' +
+                                '<span class="flm-checkbox-label">Show in All</span>' +
+                            '</label>' +
+                            '<span class="flm-text flm-text--small flm-text--secondary flm-text--block" style="margin-top:4px;padding-left:26px;">When unchecked, this page is hidden from the "All" filter and only appears under its category.</span>' +
+                        '</div>' +
+                    '</div>' +
+                '</div>' +
+                '<div class="flm-dialog-footer">' +
+                    '<div style="flex:1;"></div>' +
+                    '<button class="flm-button" id="synthos-editCancelBtn">Cancel</button>' +
+                    '<button class="flm-button flm-button--primary" id="synthos-editSaveBtn">Save Changes</button>' +
+                '</div>' +
+            '</div>' +
+        '</div>'
+    );
+    document.body.appendChild(editModal);
+
+    var editTitleInput = document.getElementById('synthos-editTitle');
+    var editCategoriesInput = document.getElementById('synthos-editCategories');
+    var editPinnedInput = document.getElementById('synthos-editPinned');
+    var editLockedInput = document.getElementById('synthos-editLocked');
+    var editShowInAllInput = document.getElementById('synthos-editShowInAll');
+    var editNameDisplay = document.getElementById('synthos-editName');
+    var editSaveBtn = document.getElementById('synthos-editSaveBtn');
+    var editTarget = null;
+    var editCallback = null;
+
+    function openEditModal(pageRecord, onSuccess) {
+        editTarget = pageRecord || {};
+        editCallback = typeof onSuccess === 'function' ? onSuccess : null;
+        editNameDisplay.textContent = editTarget.name || '';
+        editTitleInput.value = editTarget.title || '';
+        editCategoriesInput.value = (editTarget.categories || []).join(', ');
+        editPinnedInput.checked = !!editTarget.pinned;
+        editLockedInput.checked = editTarget.mode === 'locked';
+        editShowInAllInput.checked = editTarget.showInAll !== false;
+        editSaveBtn.disabled = false;
+        editSaveBtn.textContent = 'Save Changes';
+        editModal.classList.add('flm-dialog-overlay--open');
+        setTimeout(function() { editTitleInput.focus(); }, 0);
+    }
+    function closeEditModal() {
+        editModal.classList.remove('flm-dialog-overlay--open');
+        editTarget = null;
+        editCallback = null;
+    }
+
+    function submitEdit() {
+        if (!editTarget || !editTarget.name) return;
+        var newTitle = editTitleInput.value.trim();
+        var newCategories = editCategoriesInput.value.split(',').map(function(c) { return c.trim(); }).filter(Boolean);
+        var body = {
+            title: newTitle || undefined,
+            categories: newCategories,
+            pinned: editPinnedInput.checked,
+            showInAll: editShowInAllInput.checked,
+            mode: editLockedInput.checked ? 'locked' : 'unlocked'
+        };
+
+        editSaveBtn.disabled = true;
+        editSaveBtn.textContent = 'Saving...';
+
+        var cb = editCallback;
+        fetch('/api/pages/' + encodeURIComponent(editTarget.name), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body)
+        })
+        .then(function(res) {
+            if (!res.ok) return res.text().then(function(t) { throw new Error(t || 'Failed to update page'); });
+            return null;
+        })
+        .then(function() {
+            closeEditModal();
+            if (cb) { try { cb(); } catch(_) {} }
+        })
+        .catch(function(err) {
+            editSaveBtn.disabled = false;
+            editSaveBtn.textContent = 'Save Changes';
+            showError('Failed to save changes: ' + err.message);
+        });
+    }
+
+    document.getElementById('synthos-editCloseBtn').addEventListener('click', closeEditModal);
+    document.getElementById('synthos-editCancelBtn').addEventListener('click', closeEditModal);
+    editSaveBtn.addEventListener('click', submitEdit);
+    wireMousedownDismiss(editModal, closeEditModal);
+    [editTitleInput, editCategoriesInput].forEach(function(el) {
+        el.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); submitEdit(); } });
+    });
+
+    // --- Escape closes whichever modal is open -------------------------------
+
+    document.addEventListener('keydown', function(e) {
+        if (e.key !== 'Escape') return;
+        if (errorModal.classList.contains('show')) { closeError(); return; }
+        if (saveModal.classList.contains('show')) { closeSaveModal(); return; }
+        if (copyModal.classList.contains('show')) { closeCopyModal(); return; }
+        if (editModal.classList.contains('flm-dialog-overlay--open')) { closeEditModal(); return; }
+    });
+
+    // --- Public API ----------------------------------------------------------
+
+    window.__synthOSOpenSaveModal = openSaveModal;
+    window.__synthOSOpenCopyModal = openCopyModal;
+    window.__synthOSOpenEditModal = openEditModal;
+    window.__synthOSShowError = showError;
+})();