domma-cms 0.88.0 → 0.89.0

package/plugins/seo/admin/views/seo.js

@@ -0,0 +1,912 @@
+/**
+ * SEO - the admin screen: Pages (the audit), Redirects and Sitemap, plus any
+ * tabs an extension (SEO Pro) adds. A page opens in a slideover: its search
+ * result and share card as they will look, the checks, and its fields.
+ * Settings in a slideover behind the banner cog; "Check again" beside it.
+ *
+ * The Tool upgrade path: domma-reactive state (M.observable / computed /
+ * effect, M.applyBindings), context menus on rows (right-click, ⋮, Shift+F10),
+ * help popovers, theme tokens, a sidebar badge (GET /count). Titles and
+ * descriptions are the site's own text but still reach the DOM through
+ * data-bind-text only, and rows are addressed by index.
+ * `#/plugins/seo/<tab>` opens a tab. Pure logic: ../lib/*.js.
+ */
+import {snippet} from '../lib/analyse.js';
+import {checkRule, matchRedirect} from '../lib/redirects.js';
+import {checkSettings, mergeDefaults, ORG_TYPES} from '../lib/settings.js';
+
+const API = '/plugins/seo';
+const ROUTE = /^#\/plugins\/seo(\/[a-z0-9-]+)?\/?(\?.*)?$/;
+const TABS = ['overview', 'redirects', 'sitemap'];
+const SIDEBAR_URL = '#/plugins/seo';
+const GLYPH = {pass: '✓', warn: '!', fail: '✕', info: 'i'};
+const CODE_TEXT = {301: '301 moved', 302: '302 for now', 307: '307 for now', 308: '308 moved', 410: '410 gone'};
+
+let kit = null;
+async function loadKit() {
+    if (kit) return kit;
+    const [api, chrome, help, tk] = await Promise.all([
+        import('/admin/js/api.js'),
+        import('/admin/js/lib/plugin-chrome.js').catch(() => ({})),
+        import('/admin/js/lib/help-popover.js').catch(() => ({})),
+        import('/admin/js/lib/tool-kit.js')
+    ]);
+    kit = {
+        apiRequest: api.apiRequest,
+        addBannerAction: chrome.addBannerAction || (() => null),
+        helpPopovers: help.helpPopovers || (() => () => {}),
+        onceClosed: tk.onceClosed, openMenuAt: tk.openMenuAt, viewLifetime: tk.viewLifetime
+    };
+    return kit;
+}
+
+const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+function fragment(html) {
+    const t = document.createElement('template');
+    t.innerHTML = html.trim();
+    return t.content.firstElementChild;
+}
+async function copy(text, what) {
+    try { await navigator.clipboard.writeText(text); E.toast(`Copied ${what}.`, {type: 'success'}); }
+    catch { E.toast(`Could not copy - ${text}`, {type: 'warning', duration: 6000}); }
+}
+function refreshBadge() {
+    try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url: SIDEBAR_URL}})); } catch { /* no sidebar */ }
+}
+const tone = (score) => (typeof score !== 'number' ? '' : score >= 85 ? 'good' : score >= 60 ? 'poor' : 'bad');
+const day = (iso) => (iso ? new Date(iso).toLocaleDateString('en-GB', {day: 'numeric', month: 'short', year: 'numeric'}) : '');
+const ago = (iso) => {
+    if (!iso) return '';
+    const m = Math.round((Date.now() - Date.parse(iso)) / 60_000);
+    if (m < 1) return 'just now';
+    if (m < 60) return `${m} min ago`;
+    const h = Math.round(m / 60);
+    if (h < 48) return `${h} hour${h === 1 ? '' : 's'} ago`;
+    return day(iso);
+};
+/** CSV with formula-leading cells defused. */
+function toCsv(rows) {
+    const cell = (v) => {
+        let s = String(v ?? '');
+        if (/^[=+\-@\t\r]/.test(s)) s = `'${s}`;
+        return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+    };
+    const cols = Object.keys(rows[0] || {});
+    return `${[cols.join(','), ...rows.map(r => cols.map(c => cell(r[c])).join(','))].join('\r\n')}\r\n`;
+}
+function download(name, text, type = 'text/csv;charset=utf-8') {
+    const url = URL.createObjectURL(new Blob([text], {type}));
+    const a = Object.assign(document.createElement('a'), {href: url, download: name});
+    document.body.appendChild(a); a.click(); a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 10_000);
+}
+
+const PAGE_ROW = `
+<div class="sox-row" data-bind-data-row="id" tabindex="0" data-bind-title="path">
+    <span class="sox-pill" data-bind-data-tone="tone" data-bind-text="scoreText"></span>
+    <span class="sox-cell"><span data-bind-text="path"></span><small data-bind-text="sourceText"></small></span>
+    <span class="sox-cell sox-hide-sm" data-bind-text="title" data-bind-title="title"></span>
+    <span class="sox-cell sox-muted sox-hide-sm" data-bind-text="problems" data-bind-title="problems"></span>
+    <button type="button" class="sox-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+const SITE_ROW = `
+<div class="sox-row" data-bind-data-row="id" tabindex="0">
+    <span class="sox-cell"><span data-bind-text="text" data-bind-title="text"></span><small data-bind-text="detail" data-bind-title="detail"></small></span>
+    <span class="sox-pill" data-bind-data-tone="tone" data-bind-text="badge"></span>
+    <button type="button" class="sox-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+const RULE_ROW = `
+<div class="sox-row" data-bind-data-row="id" tabindex="0" data-bind-title="note">
+    <span class="sox-cell sox-mono" data-bind-text="from" data-bind-title="from"></span>
+    <span class="sox-arrow" aria-hidden="true">→</span>
+    <span class="sox-cell sox-mono"><span data-bind-text="to" data-bind-title="to"></span><small data-bind-text="note"></small></span>
+    <span class="sox-pill sox-hide-sm" data-bind-data-tone="tone" data-bind-text="code"></span>
+    <span class="sox-cell sox-muted sox-hide-sm" data-bind-text="hits" data-bind-title="lastHit"></span>
+    <button type="button" class="sox-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+const ENTRY_ROW = `
+<div class="sox-row" data-bind-data-row="id" tabindex="0">
+    <span class="sox-cell"><span data-bind-text="path" data-bind-title="path"></span><small data-bind-text="title"></small></span>
+    <span class="sox-cell sox-muted sox-hide-sm" data-bind-text="source"></span>
+    <span class="sox-cell sox-muted sox-hide-sm" data-bind-text="note" data-bind-title="note"></span>
+    <button type="button" class="sox-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+const SOURCE_ROW = `
+<div class="sox-row" data-bind-data-row="id" tabindex="0">
+    <span class="sox-cell"><span data-bind-text="label"></span><small data-bind-text="detail"></small></span>
+    <span class="sox-pill" data-bind-data-tone="tone" data-bind-text="state"></span>
+    <button type="button" class="sox-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+const CHECK_ROW = `
+<div>
+    <div class="sox-group" data-bind-hidden="!head" data-bind-text="head"></div>
+    <div class="sox-check" data-bind-hidden="!title">
+        <span class="sox-status" data-bind-data-status="status" data-bind-text="glyph"></span>
+        <span class="sox-check-main"><strong data-bind-text="title"></strong><small data-bind-text="detail"></small><small data-bind-text="fix" data-bind-hidden="!fix"></small></span>
+    </div>
+</div>`;
+
+export const seoView = {
+    templateUrl: '/plugins/seo/admin/templates/seo.html',
+
+    async onMount($container) {
+        const k = await loadKit();
+        if (!ROUTE.test(location.hash)) return;
+        const lifetime = (seoView._lifetime ??= k.viewLifetime(ROUTE));
+        lifetime.reset();
+        const root = $container.get(0).querySelector('.sox') || $container.get(0);
+        const here = () => ROUTE.test(location.hash) && root.isConnected;
+        const scope = (fn) => { lifetime.add(fn); return fn; };
+        const api = (path, opts) => k.apiRequest(`${API}${path}`, opts);
+
+        // ---- State ----
+        const fromHash = location.hash.match(/seo\/([a-z0-9-]+)/)?.[1] || 'overview';
+        const tab = M.observable(fromHash);
+        const busy = M.observable(true);
+        const error = M.observable('');
+        const hooksOk = M.observable(true);
+        const canManage = M.observable(true);
+        const overview = M.observable(null);
+        const audit = M.observable({results: []});
+        const show = M.observable('all');
+        const source = M.observable('');
+        const query = M.observable('');
+        const redirects = M.observable({rules: [], chains: [], onRename: true});
+        const ruleQuery = M.observable('');
+        const newFrom = M.observable('');
+        const newTo = M.observable('');
+        const newCode = M.observable('301');
+        const sitemap = M.observable({entries: [], left: [], sources: [], labels: {}, robots: ''});
+        const smShow = M.observable('in');
+        const smQuery = M.observable('');
+        const extTabs = M.observable([]);
+        const extOn = M.computed(() => !TABS.includes(tab.value));
+        let polling = null;
+
+        // ---- Derived: pages ----
+        const labelOf = (id) => sitemap.value.labels?.[id] || (id === 'pages' ? 'Pages' : id);
+        const scoreText = M.computed(() => (overview.value?.score ?? null) === null ? '—' : `${overview.value.score}%`);
+        const scoreWidth = M.computed(() => `${overview.value?.score ?? 0}%`);
+        const scoreTone = M.computed(() => tone(overview.value?.score));
+        const ov = M.computed(() => {
+            const o = overview.value;
+            return o ? {pages: String(o.pages), failing: String(o.failing), duplicates: String(o.duplicates), redirects: String(o.redirects)}
+                : {pages: '—', failing: '—', duplicates: '—', redirects: '—'};
+        });
+        const attention = M.computed(() => (overview.value?.failing ? String(overview.value.failing) : ''));
+        const asOf = M.computed(() => {
+            const o = overview.value;
+            if (o?.running) return `Checking… ${o.progress?.done || 0} of ${o.progress?.total || '?'}`;
+            return o?.at ? `Checked ${ago(o.at)}` : 'Not checked yet';
+        });
+        const sourceOptions = M.computed(() => [...new Set((audit.value.results || []).map(r => r.source))]);
+
+        const pageRows = M.observable([]);
+        let pageList = [];
+        scope(M.effect(() => {
+            const q = query.value.trim().toLowerCase();
+            const s = show.value;
+            const src = source.value;
+            pageList = (audit.value.results || []).filter(r => (s === 'all' || (s === 'hidden' ? r.noindex || r.unlisted : !r.noindex && (r.error || r.failing > 0)))
+                && (!src || r.source === src)
+                && (!q || [r.urlPath, r.title, r.label].some(v => String(v || '').toLowerCase().includes(q))));
+            pageList.sort((a, b) => (a.error ? -1 : 0) - (b.error ? -1 : 0) || (a.score ?? 101) - (b.score ?? 101));
+            pageRows.value = pageList.slice(0, 1000).map((r, i) => ({
+                id: `p${i}`, path: r.urlPath,
+                sourceText: [labelOf(r.source), r.noindex ? 'hidden from search engines' : r.unlisted ? 'not in the sitemap' : ''].filter(Boolean).join(' · '),
+                title: r.title || r.label || '',
+                scoreText: r.error ? '!' : typeof r.score === 'number' ? String(r.score) : '—',
+                tone: r.error ? 'bad' : r.noindex ? 'info' : tone(r.score),
+                problems: r.error || (r.problems?.length ? r.problems.join(' · ') : 'Nothing to fix')
+            }));
+        }));
+        const pagesEmpty = M.computed(() => (!overview.value?.at ? (overview.value?.running ? 'Checking every page - this takes a moment…' : 'Not checked yet. Check now with the button top right.')
+            : query.value.trim() ? 'No page matches.' : show.value === 'problems' ? 'Nothing needs attention.' : 'No pages.'));
+
+        const siteRows = M.observable([]);
+        let siteList = [];
+        scope(M.effect(() => {
+            const o = overview.value;
+            siteList = [];
+            if (o) {
+                const seo = o.siteSeo || {};
+                for (const d of o.issues?.duplicateTitles || []) siteList.push({kind: 'dupe', text: `Title on ${d.paths.length} pages: "${d.text}"`, detail: d.paths.join(', '), paths: d.paths, tone: 'poor', badge: 'duplicate'});
+                for (const d of o.issues?.duplicateDescriptions || []) {
+                    const isDefault = seo.defaultDescription && d.text === seo.defaultDescription;
+                    siteList.push({kind: 'dupe', text: isDefault ? `${d.paths.length} pages use the site's default description` : `Description on ${d.paths.length} pages: "${d.text}"`,
+                        detail: d.paths.join(', '), paths: d.paths, tone: 'poor', badge: isDefault ? 'default' : 'duplicate'});
+                }
+                if (!seo.defaultImage) siteList.push({kind: 'setting', text: 'No default share image', detail: 'Pages without their own image share with none. Set one in Settings › SEO.', link: '#/settings', tone: 'poor', badge: 'setting'});
+                if (!o.origin || /localhost|127\.0\.0\.1/.test(o.origin)) siteList.push({kind: 'setting', text: 'The site address is not set', detail: 'Canonical links and the sitemap use whatever address a visitor came in on. Set the site address in Settings.', link: '#/settings', tone: 'poor', badge: 'setting'});
+                if (o.chains) siteList.push({kind: 'chains', text: `${o.chains} redirect${o.chains === 1 ? ' leads' : 's lead'} to another redirect`, detail: 'Each hop is slower and loses a little standing. The Redirects tab shows which.', tone: 'poor', badge: 'redirects'});
+            }
+            siteRows.value = siteList.map((x, i) => ({id: `s${i}`, text: x.text, detail: x.detail || '', tone: x.tone, badge: x.badge}));
+        }));
+
+        // ---- Derived: redirects ----
+        const ruleRows = M.observable([]);
+        let ruleList = [];
+        scope(M.effect(() => {
+            const q = ruleQuery.value.trim().toLowerCase();
+            const chained = new Set(redirects.value.chains.map(c => c.id));
+            ruleList = redirects.value.rules.filter(r => !q || `${r.from} ${r.to} ${r.note}`.toLowerCase().includes(q));
+            ruleRows.value = ruleList.map((r, i) => ({
+                id: `r${i}`, from: r.from, to: r.code === 410 ? '(gone)' : r.to,
+                note: [r.auto ? 'Added when the page moved' : r.note, chained.has(r.id) ? 'leads to another redirect' : ''].filter(Boolean).join(' · '),
+                code: String(r.code), tone: r.code === 410 ? 'bad' : chained.has(r.id) ? 'poor' : r.code === 301 || r.code === 308 ? 'good' : 'info',
+                hits: r.hits ? `${r.hits.toLocaleString('en-GB')} use${r.hits === 1 ? '' : 's'}` : 'unused',
+                lastHit: r.lastHit ? `Last used ${ago(r.lastHit)}` : 'Not used yet'
+            }));
+        }));
+        const ruleCount = M.computed(() => (redirects.value.rules.length ? String(redirects.value.rules.length) : ''));
+        const ruleText = M.computed(() => `${ruleList.length + 0 * ruleRows.value.length} of ${redirects.value.rules.length}`);
+        const rulesEmpty = M.computed(() => (ruleQuery.value.trim() ? 'No redirect matches.' : 'No redirects yet.'));
+        const chainText = M.computed(() => {
+            const n = redirects.value.chains.length;
+            return n ? `${n} redirect${n === 1 ? ' leads' : 's lead'} to another. Right-click one and choose "Go straight there" to make it one hop.` : '';
+        });
+        const renameText = M.computed(() => (redirects.value.onRename ? 'When a page is renamed, a redirect from its old address is added for you.' : 'Redirects are not added when a page is renamed (see Settings).'));
+
+        // ---- Derived: sitemap ----
+        const sourceRows = M.observable([]);
+        scope(M.effect(() => {
+            sourceRows.value = sitemap.value.sources.map((s, i) => ({
+                id: `x${i}`, label: labelOf(s.id),
+                detail: `${s.listed} of ${s.count} listed`,
+                state: s.on ? 'on' : 'off', tone: s.on ? 'good' : ''
+            }));
+        }));
+        const smRows = M.observable([]);
+        let smList = [];
+        scope(M.effect(() => {
+            const q = smQuery.value.trim().toLowerCase();
+            const list = smShow.value === 'in' ? sitemap.value.entries : sitemap.value.left;
+            smList = list.filter(e => !q || `${e.urlPath} ${e.title}`.toLowerCase().includes(q));
+            smRows.value = smList.slice(0, 2000).map((e, i) => ({
+                id: `e${i}`, path: e.urlPath, title: e.title || '', source: labelOf(e.source),
+                note: e.why || [e.lastmod ? `Changed ${day(e.lastmod)}` : '', e.changefreq || '', e.priority !== undefined ? `priority ${e.priority}` : ''].filter(Boolean).join(' · ')
+            }));
+        }));
+        const robots = M.computed(() => sitemap.value.robots || '');
+        const smText = M.computed(() => `${smList.length + 0 * smRows.value.length} address${smList.length === 1 ? '' : 'es'}`);
+        const smEmpty = M.computed(() => (!sitemap.value.hooks ? 'This version of Domma CMS lists only its own pages in the sitemap.' : smQuery.value.trim() ? 'No address matches.' : smShow.value === 'in' ? 'The sitemap is empty.' : 'Nothing is left out.'));
+
+        // ---- Server ----
+        const denied = (e) => /403|forbidden/i.test(String(e?.message));
+        async function loadOverview() {
+            try {
+                const o = await api('/overview');
+                if (!here() || !o) return;
+                overview.value = o;
+                hooksOk.value = o.hooks !== false;
+                error.value = '';
+                if (o.running) poll();
+            } catch (e) {
+                if (here()) error.value = denied(e) ? 'You do not have access to SEO.' : `Could not load SEO: ${e.message || e}`;
+            }
+        }
+        async function loadAudit() {
+            try {
+                const a = await api('/audit');
+                if (here() && a) audit.value = a;
+            } catch { /* the overview error says enough */ }
+        }
+        async function loadRedirects() {
+            try {
+                const r = await api('/redirects');
+                if (here() && r) redirects.value = r;
+            } catch { /* shown empty */ }
+        }
+        async function loadSitemap() {
+            try {
+                const s = await api('/sitemap');
+                if (here() && s) sitemap.value = s;
+            } catch (e) { if (here() && !denied(e)) E.toast(`Could not load the sitemap: ${e.message || e}`, {type: 'error'}); }
+        }
+        async function loadAll() {
+            busy.value = true;
+            await Promise.all([loadOverview(), loadAudit(), loadRedirects(), loadSitemap()]);
+            if (here()) busy.value = false;
+        }
+        function poll() {
+            if (polling) return;
+            polling = setInterval(async () => {
+                if (!here()) { clearInterval(polling); polling = null; return; }
+                await loadOverview();
+                if (!overview.peek()?.running) {
+                    clearInterval(polling);
+                    polling = null;
+                    await loadAudit();
+                    refreshBadge();
+                }
+            }, 1500);
+        }
+        scope(() => { if (polling) clearInterval(polling); });
+        async function checkNow() {
+            try {
+                const o = await api('/audit', {method: 'POST', body: JSON.stringify({})});
+                if (here()) overview.value = {...overview.peek(), ...o, running: true};
+                poll();
+            } catch (e) { E.toast(`Could not start the check: ${e.message || e}`, {type: 'error'}); }
+        }
+
+        // ---- Actions: redirects ----
+        async function act(fn, done, after = loadRedirects) {
+            try {
+                const r = await fn();
+                if (done) E.toast(done, {type: 'success'});
+                await Promise.all([after(), loadOverview()]);
+                return r;
+            } catch (e) {
+                if (denied(e)) { canManage.value = false; E.toast('Only people who may manage SEO can change this.', {type: 'warning'}); }
+                else E.toast(`Not done: ${e.message || e}`, {type: 'error'});
+                return null;
+            }
+        }
+        const addRedirect = (body, done = `Redirect from ${body.from} added.`) => act(() => api('/redirects', {method: 'POST', body: JSON.stringify(body)}), done);
+        const removeRules = (ids, what) => act(() => api(`/redirects/${encodeURIComponent(ids.join(','))}`, {method: 'DELETE'}), `${what} removed.`);
+        async function testRule(from) {
+            try {
+                const r = await api(`/redirects/test?path=${encodeURIComponent(from.replace(/\/\*$/, '/example'))}`);
+                const hops = r.hops || [];
+                E.toast(hops.length ? hops.map(h => `${h.from} → ${h.code === 410 ? 'gone' : h.to} (${h.code})`).join('  ·  ') : 'No redirect applies.', {type: hops.length > 1 ? 'warning' : 'info', duration: 7000});
+            } catch (e) { E.toast(`Could not test: ${e.message || e}`, {type: 'error'}); }
+        }
+        function editRule(rule) {
+            const f = {from: M.observable(rule.from), to: M.observable(rule.code === 410 ? '' : rule.to), code: M.observable(String(rule.code)), note: M.observable(rule.note || '')};
+            formSlideover(`Redirect from ${rule.from}`, f, `
+                <div class="sox-form-grid">
+                    <div class="sox-wide"><label class="form-label" for="sox-r-from">From</label><input id="sox-r-from" class="form-input sox-mono" data-model="from.value"></div>
+                    <div class="sox-wide"><label class="form-label" for="sox-r-to">To</label><input id="sox-r-to" class="form-input sox-mono" data-model="to.value" data-bind-disabled="code.value === '410'"></div>
+                    <div><label class="form-label" for="sox-r-code">Kind</label><select id="sox-r-code" class="form-input" data-model="code.value">
+                        ${Object.entries(CODE_TEXT).map(([c, t]) => `<option value="${c}">${t}</option>`).join('')}</select></div>
+                    <div><label class="form-label" for="sox-r-note">Note</label><input id="sox-r-note" class="form-input" data-model="note.value"></div>
+                </div>`,
+            () => {
+                const body = {from: f.from.value, to: f.to.value, code: Number(f.code.value), note: f.note.value};
+                const others = redirects.peek().rules.filter(r => r.id !== rule.id);
+                return {body, errors: checkRule(body, others).errors};
+            },
+            async (body) => {
+                await api(`/redirects/${encodeURIComponent(rule.id)}`, {method: 'PUT', body: JSON.stringify(body)});
+                E.toast('Redirect saved.', {type: 'success'});
+                await loadRedirects();
+            });
+        }
+        function importCsv() {
+            const f = {csv: M.observable('')};
+            formSlideover('Import redirects', f, `
+                <p class="sox-note">One redirect per line: <span class="sox-mono">from, to</span>, and optionally the kind (301, 302, 307, 308, 410) and a note. A header line is skipped. Paste from a spreadsheet, or another CMS's export.</p>
+                <textarea class="form-input sox-mono" rows="14" data-model="csv.value" placeholder="/old-page, /new-page&#10;/news/*, /blog/*, 301&#10;/retired, , 410"></textarea>`,
+            () => ({body: {csv: f.csv.value}, errors: f.csv.value.trim() ? {} : {csv: 'Paste some redirects first.'}}),
+            async (body) => {
+                const r = await api('/redirects/import', {method: 'POST', body: JSON.stringify(body)});
+                const s = r.skipped || [];
+                E.toast(`${r.added} added${s.length ? `, ${s.length} skipped - line ${s[0].line}: ${s[0].why}` : '.'}`, {type: s.length ? 'warning' : 'success', duration: s.length ? 9000 : 4000});
+                await Promise.all([loadRedirects(), loadOverview()]);
+            }, 'Import');
+        }
+
+        /** A small form in a slideover: `check()` -> {body, errors}; `submit(body)` saves. */
+        function formSlideover(title, fields, html, check, submit, verb = 'Save') {
+            const saving = M.observable(false);
+            const checked = M.computed(() => check());
+            const errText = M.computed(() => Object.values(checked.value.errors).join(' '));
+            const model = {...fields, saving, errText, cannot: M.computed(() => saving.value || Boolean(errText.value))};
+            const so = E.slideover({title, size: 'md', position: 'right'});
+            const panel = fragment(`<div class="sox-form">${html}
+                <p class="sox-err" data-bind-hidden="!errText.value" data-bind-text="errText.value"></p>
+                <div class="sox-actions"><small class="sox-muted">Ctrl+Enter ${verb.toLowerCase()}s.</small><span class="sox-spacer"></span>
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+                    <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value">${esc(verb)}</button></div></div>`);
+            async function save() {
+                if (model.cannot.peek()) return;
+                saving.value = true;
+                try { await submit(checked.peek().body); so.close(); }
+                catch (e) { E.toast(`Not saved: ${e.message || e}`, {type: 'error'}); }
+                finally { saving.value = false; }
+            }
+            so.element.appendChild(panel);
+            const disposeHelp = k.helpPopovers(panel);
+            const handle = M.applyBindings(model, panel, {methods: {save, cancel: () => so.close()}});
+            panel.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); save(); } });
+            k.onceClosed(so, () => { handle.dispose(); disposeHelp(); });
+            scope(() => { try { so.close(); } catch { /* gone */ } });
+            I.scan(panel);
+            so.open();
+            panel.querySelector('input, textarea')?.focus();
+        }
+
+        // ---- The page editor ----
+        let itemOpen = false;
+        async function openItem(urlPath) {
+            if (itemOpen) return;
+            itemOpen = true;
+            let d;
+            try {
+                d = await api(`/item?path=${encodeURIComponent(urlPath)}`);
+            } catch (e) {
+                itemOpen = false;
+                E.toast(`Could not open ${urlPath}: ${e.message || e}`, {type: 'error'});
+                return;
+            }
+            const f = {
+                title: M.observable(d.fields.title), description: M.observable(d.fields.description), focus: M.observable(d.fields.focus),
+                image: M.observable(d.fields.image), noindex: M.observable(d.fields.noindex)
+            };
+            const L = d.limits || {};
+            const pageTitle = d.page?.title || d.live?.h1 || '';
+            const defTitle = d.kind === 'page' ? `${pageTitle}${d.defaults.separator}${d.defaults.siteTitle}` : (d.live?.title || '');
+            const defDesc = d.kind === 'page' ? (d.defaults.description || '') : (d.live?.description || '');
+            const defImage = d.kind === 'page' ? d.defaults.image : (d.live?.image || '');
+            const effTitle = M.computed(() => f.title.value.trim() || defTitle);
+            const effDesc = M.computed(() => f.description.value.trim() || defDesc);
+            const effImage = M.computed(() => f.image.value.trim() || defImage);
+            const origin = d.origin || location.origin;
+            const serp = M.computed(() => snippet({title: effTitle.value, description: effDesc.value, url: `${origin}${urlPath}`, limits: L}));
+            const meter = (text, min, max) => {
+                const n = text.length;
+                return {text: `${n} / ${max}`, width: `${Math.min(100, (n / max) * 100)}%`, tone: !n ? 'bad' : n < min || n > max ? 'poor' : 'good'};
+            };
+            const titleMeter = M.computed(() => meter(effTitle.value, L.titleMin || 30, L.titleMax || 60));
+            const descMeter = M.computed(() => meter(effDesc.value, L.descMin || 70, L.descMax || 160));
+            const host = (() => { try { return new URL(origin).host; } catch { return location.host; } })();
+            const shareBg = M.computed(() => (effImage.value ? `url("${effImage.value.replace(/["\\\n\r]/g, '')}")` : 'none'));
+            const checks = M.observable([]);
+            const setChecks = (analysis) => {
+                const rows = [];
+                const list = analysis?.checks || [];
+                const order = {fail: 0, warn: 1, pass: 2, info: 3};
+                for (const g of [...new Set(list.map(c => c.group))]) {
+                    rows.push({id: `g-${g}`, head: g, title: '', detail: '', fix: '', status: '', glyph: ''});
+                    for (const c of list.filter(x => x.group === g).sort((a, b) => order[a.status] - order[b.status])) {
+                        rows.push({id: `c-${c.id}`, head: '', title: c.title, detail: c.detail, fix: c.status === 'pass' ? '' : c.fix, status: c.status, glyph: GLYPH[c.status] || '?'});
+                    }
+                }
+                checks.value = rows;
+            };
+            setChecks(d.analysis);
+            const scoreLine = M.observable(d.analysis ? `Score ${d.analysis.score}% · ${d.analysis.failing} failing, ${d.analysis.warnings} could be better` : (d.status === 200 ? '' : `Not live (answers ${d.status || 'nothing'}) - the checks run once it is published.`));
+            const body = () => ({path: urlPath, title: f.title.value, description: f.description.value, focus: f.focus.value, image: f.image.value, noindex: f.noindex.value});
+            let opened = JSON.stringify(body());
+            const saving = M.observable(false);
+            const errText = M.computed(() => (f.image.value.trim() && !/^(https?:\/\/|\/)/i.test(f.image.value.trim()) ? 'The image: a path like /media/photo.jpg, or a full web address.' : ''));
+            const model = {...f, saving, errText, checks, scoreLine, serp, titleMeter, descMeter, shareBg, effTitle, effDesc, host,
+                hasImage: M.computed(() => Boolean(effImage.value)), defTitle, defDesc, canManage,
+                cannot: M.computed(() => saving.value || Boolean(errText.value) || !canManage.value)};
+            const so = E.slideover({title: `SEO · ${urlPath}`, size: 'lg', position: 'right'});
+            const note = d.kind === 'url'
+                ? '<p class="sox-note is-warn">A plugin serves this address (a blog post, a listing). What you set here takes the place of its own SEO fields.</p>'
+                : d.page?.status !== 'published' ? `<p class="sox-note is-warn">This page is a ${esc(d.page?.status || 'draft')} - not live yet.</p>` : '';
+            const redirectNote = d.redirect ? `<p class="sox-note is-bad">A redirect sends visitors from here to ${esc(d.redirect.to || '(gone)')} - they never see this page.</p>` : '';
+            const panel = fragment(`
+                <div class="sox-form">
+                    ${note}${redirectNote}
+                    <section><h4>As it will look <span data-help="The search result is drawn the way Google draws it, cut where it cuts (roughly - it measures pixels). The share card is what Facebook, LinkedIn, WhatsApp and others show when someone shares the link."></span>
+                        <span class="sox-spacer"></span><a class="btn btn-xs btn-ghost" href="${esc(urlPath)}" target="_blank" rel="noopener"><span data-icon="external-link" data-icon-size="12"></span> Open</a></h4>
+                        <div class="sox-previews">
+                            <div class="sox-serp" aria-label="Search result preview">
+                                <div class="sox-serp-crumbs" data-bind-text="serp.value.crumbs"></div>
+                                <div class="sox-serp-title" data-bind-text="serp.value.title"></div>
+                                <div class="sox-serp-desc" data-bind-text="serp.value.description"></div>
+                            </div>
+                            <div class="sox-share" aria-label="Share card preview">
+                                <div class="sox-share-img"><span data-bind-hidden="hasImage.value">No image</span></div>
+                                <div class="sox-share-body"><small data-bind-text="host"></small><strong data-bind-text="effTitle.value"></strong><span data-bind-text="effDesc.value"></span></div>
+                            </div>
+                        </div>
+                    </section>
+                    <section><h4>Search and sharing</h4><div class="sox-form-grid">
+                        <div class="sox-wide"><label class="form-label" for="sox-i-title">Title <span data-help="The blue link in search results and the headline of a share. Say what the page is about, words that matter first. Empty uses the page title and the site name."></span></label>
+                            <input id="sox-i-title" class="form-input" data-model="title.value" placeholder="${esc(defTitle)}" maxlength="200">
+                            <div class="sox-meter" data-bind-data-tone="titleMeter.value.tone"><span class="sox-bar"><span data-bind-style-width="titleMeter.value.width"></span></span><span data-bind-text="titleMeter.value.text"></span></div></div>
+                        <div class="sox-wide"><label class="form-label" for="sox-i-desc">Description <span data-help="The grey text under the link. One or two sentences that make someone want to click. Empty uses the site's default - which every other such page shares."></span></label>
+                            <textarea id="sox-i-desc" rows="3" class="form-input" data-model="description.value" placeholder="${esc(defDesc)}" maxlength="400"></textarea>
+                            <div class="sox-meter" data-bind-data-tone="descMeter.value.tone"><span class="sox-bar"><span data-bind-style-width="descMeter.value.width"></span></span><span data-bind-text="descMeter.value.text"></span></div></div>
+                        <div><label class="form-label" for="sox-i-focus">Focus keyphrase <span data-help="The search this page should be found for - 'garden tools', 'plumber in Leeds'. The checks then look for it in the title, description, heading, address and opening. It is not shown anywhere."></span></label>
+                            <input id="sox-i-focus" class="form-input" data-model="focus.value" maxlength="100"></div>
+                        <div><label class="form-label" for="sox-i-image">Share image <span data-help="Shown when the page is shared. 1200 × 630 pixels is ideal. A path from Media (/media/photo.jpg) or a full address. Empty uses the site's default image."></span></label>
+                            <input id="sox-i-image" class="form-input sox-mono" data-model="image.value" list="sox-media" placeholder="${esc(defImage || '/media/…')}"></div>
+                        <label class="sox-wide" style="display:flex;align-items:center;gap:.5rem"><input type="checkbox" class="form-switch" data-model="noindex.value"> Hide from search engines
+                            <span data-help="Asks search engines not to list this page, and leaves it out of the sitemap. For thank-you pages, private landing pages and the like. It stays reachable by its address."></span></label>
+                    </div><datalist id="sox-media"></datalist></section>
+                    <section><h4>Checks <small class="sox-muted" data-bind-text="scoreLine.value"></small></h4>
+                        <div class="sox-checks" data-each="checks.value key=id"></div>
+                    </section>
+                    <p class="sox-err" data-bind-hidden="!errText.value" data-bind-text="errText.value"></p>
+                    <div class="sox-actions">
+                        <small class="sox-muted">Ctrl+Enter saves.</small><span class="sox-spacer"></span>
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Close</button>
+                        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value"><span data-icon="save" data-icon-size="13"></span> Save and check</button>
+                    </div>
+                </div>`);
+            panel.querySelector('.sox-checks').innerHTML = CHECK_ROW;
+            fillMedia(panel.querySelector('#sox-media'));
+            async function save() {
+                if (model.cannot.peek()) return;
+                saving.value = true;
+                try {
+                    await api('/item', {method: 'PUT', body: JSON.stringify(body())});
+                    opened = JSON.stringify(body());
+                    E.toast('Saved.', {type: 'success'});
+                    const fresh = await api(`/item?path=${encodeURIComponent(urlPath)}`).catch(() => null);
+                    if (fresh?.analysis) {
+                        setChecks(fresh.analysis);
+                        scoreLine.value = `Score ${fresh.analysis.score}% · ${fresh.analysis.failing} failing, ${fresh.analysis.warnings} could be better`;
+                    }
+                    loadAudit(); loadOverview(); refreshBadge();
+                } catch (e) {
+                    if (denied(e)) canManage.value = false;
+                    E.toast(`Not saved: ${e.message || e}`, {type: 'error'});
+                } finally {
+                    saving.value = false;
+                }
+            }
+            so.element.appendChild(panel);
+            const disposeHelp = k.helpPopovers(panel);
+            const handle = M.applyBindings(model, panel, {methods: {save, cancel: () => so.close()}});
+            const shareImg = panel.querySelector('.sox-share-img');
+            const stopBg = M.effect(() => { shareImg.style.backgroundImage = shareBg.value; });
+            panel.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); save(); } });
+            k.onceClosed(so, () => { handle.dispose(); disposeHelp(); stopBg?.(); itemOpen = false; });
+            guardClose(so, () => JSON.stringify(body()) !== opened);
+            scope(() => { try { so.close(true); } catch { /* gone */ } });
+            I.scan(panel);
+            so.open();
+        }
+        let media = null;
+        async function fillMedia(list) {
+            try {
+                media ??= await k.apiRequest('/media').then(r => (Array.isArray(r) ? r : r?.files || r?.items || []));
+                for (const m of media) {
+                    const url = m.url || m.path || (m.filename ? `/media/${m.filename}` : '');
+                    if (url && /\.(jpe?g|png|webp|gif|avif|svg)$/i.test(url)) list.appendChild(Object.assign(document.createElement('option'), {value: url}));
+                }
+            } catch { media = []; }
+        }
+        function guardClose(so, dirty) {
+            const close = so.close.bind(so);
+            let asking = false;
+            so.close = async (force) => {
+                if (force !== true && dirty()) {
+                    if (asking) return undefined;
+                    asking = true;
+                    const ok = await E.confirm('Discard the changes you have not saved?');
+                    asking = false;
+                    if (!ok) return undefined;
+                }
+                return close();
+            };
+        }
+
+        // ---- Settings (slideover) ----
+        let settingsOpen = false;
+        async function openSettings() {
+            if (settingsOpen) return;
+            settingsOpen = true;
+            let s;
+            try {
+                const r = await api('/settings');
+                s = mergeDefaults(r.settings);
+                hooksOk.value = r.hooks !== false;
+            } catch (e) {
+                settingsOpen = false;
+                E.toast(`Could not load the settings: ${e.message || e}`, {type: 'error'});
+                return;
+            }
+            const o = s.organisation;
+            const f = {
+                orgOn: M.observable(o.enabled), orgType: M.observable(o.type), orgName: M.observable(o.name), orgUrl: M.observable(o.url), orgLogo: M.observable(o.logo),
+                orgEmail: M.observable(o.email), orgPhone: M.observable(o.phone), orgSame: M.observable(o.sameAs.join('\n')),
+                street: M.observable(o.address.street), locality: M.observable(o.address.locality), region: M.observable(o.address.region),
+                postcode: M.observable(o.address.postcode), country: M.observable(o.address.country),
+                articles: M.observable(s.articles), exclude: M.observable(s.sitemap.exclude.join('\n')),
+                blockAll: M.observable(s.robots.blockAll), robotsExtra: M.observable(s.robots.extra), onRename: M.observable(s.redirects.onRename),
+                every: M.observable(String(s.audit.everyHours)), tMin: M.observable(String(s.audit.titleMin)), tMax: M.observable(String(s.audit.titleMax)),
+                dMin: M.observable(String(s.audit.descMin)), dMax: M.observable(String(s.audit.descMax)), words: M.observable(String(s.audit.minWords))
+            };
+            const body = () => ({
+                organisation: {enabled: f.orgOn.value, type: f.orgType.value, name: f.orgName.value, url: f.orgUrl.value, logo: f.orgLogo.value, email: f.orgEmail.value, phone: f.orgPhone.value, sameAs: f.orgSame.value,
+                    address: {street: f.street.value, locality: f.locality.value, region: f.region.value, postcode: f.postcode.value, country: f.country.value}},
+                articles: f.articles.value,
+                sitemap: {exclude: f.exclude.value, sources: s.sitemap.sources},
+                robots: {blockAll: f.blockAll.value, extra: f.robotsExtra.value},
+                redirects: {onRename: f.onRename.value},
+                audit: {everyHours: f.every.value, titleMin: f.tMin.value, titleMax: f.tMax.value, descMin: f.dMin.value, descMax: f.dMax.value, minWords: f.words.value}
+            });
+            const opened = JSON.stringify(body());
+            const saving = M.observable(false);
+            const checked = M.computed(() => checkSettings(body(), s));
+            const errText = M.computed(() => Object.values(checked.value.errors).join(' '));
+            const model = {...f, saving, errText, hooksOk, cannot: M.computed(() => saving.value || Boolean(errText.value)), isPerson: M.computed(() => f.orgType.value === 'Person')};
+            const input = (id, key, label, help = '', attrs = '') => `<div><label class="form-label" for="sox-s-${id}">${label}${help ? ` <span data-help="${esc(help)}"></span>` : ''}</label>
+                <input id="sox-s-${id}" class="form-input" data-model="${key}.value" ${attrs}></div>`;
+            const num = (id, key, label, min, max, help = '') => input(id, key, label, help, `type="number" min="${min}" max="${max}"`);
+            const sw = (key, label, help = '') => `<label class="sox-wide" style="display:flex;align-items:center;gap:.5rem"><input type="checkbox" class="form-switch" data-model="${key}.value"> ${label}${help ? ` <span data-help="${esc(help)}"></span>` : ''}</label>`;
+            const so = E.slideover({title: 'SEO settings', size: 'md', position: 'right'});
+            const panel = fragment(`
+                <div class="sox-form">
+                    <p class="sox-note is-warn" data-bind-hidden="hooksOk.value">This version of Domma CMS cannot take the sitemap, robots.txt and structured data settings below - they apply once it is updated (0.89 or later).</p>
+                    <p class="sox-note">The site's default title, description and share image are in <a href="#/settings">Settings › SEO</a>.</p>
+                    <section><h4>Who is behind the site <span data-help="Structured data on the home page, so search engines can show the name, logo and contact details - a knowledge panel, or a local business in maps."></span></h4><div class="sox-form-grid">
+                        ${sw('orgOn', 'Tell search engines who runs the site')}
+                        <div><label class="form-label" for="sox-s-type">It is</label><select id="sox-s-type" class="form-input" data-model="orgType.value">
+                            ${ORG_TYPES.map(t => `<option value="${t}">${{Organization: 'An organisation', LocalBusiness: 'A local business', Person: 'A person'}[t]}</option>`).join('')}</select></div>
+                        ${input('name', 'orgName', 'Name')}
+                        ${input('url', 'orgUrl', 'Web address', 'Empty uses the site address.', 'placeholder="https://…"')}
+                        ${input('logo', 'orgLogo', 'Logo (or photo)', 'A square image works best - a path from Media or a full address.', 'placeholder="/media/logo.png"')}
+                        ${input('email', 'orgEmail', 'Email', '', 'type="email"')}
+                        ${input('phone', 'orgPhone', 'Phone')}
+                        <div class="sox-wide" data-bind-hidden="isPerson.value"><label class="form-label">Address <span data-help="For a local business, the address customers visit. Leave empty for an organisation without one."></span></label>
+                            <div class="sox-form-grid"><input class="form-input sox-wide" placeholder="Street" aria-label="Street" data-model="street.value">
+                            <input class="form-input" placeholder="Town or city" aria-label="Town or city" data-model="locality.value"><input class="form-input" placeholder="County or region" aria-label="County or region" data-model="region.value">
+                            <input class="form-input" placeholder="Postcode" aria-label="Postcode" data-model="postcode.value"><input class="form-input" placeholder="Country (GB)" aria-label="Country" data-model="country.value"></div></div>
+                        <div class="sox-wide"><label class="form-label" for="sox-s-same">Profiles elsewhere <span data-help="Your pages on Facebook, LinkedIn, Instagram, X and so on - one address per line. Search engines use them to know they are you."></span></label>
+                            <textarea id="sox-s-same" rows="3" class="form-input sox-mono" data-model="orgSame.value" placeholder="https://www.linkedin.com/company/…"></textarea></div>
+                        ${sw('articles', 'Mark blog posts as articles', 'Adds BlogPosting structured data to each post - headline, image, publisher - which search engines use for article results.')}
+                    </div></section>
+                    <section><h4>Sitemap and robots.txt</h4><div class="sox-form-grid">
+                        <div class="sox-wide"><label class="form-label" for="sox-s-ex">Leave out of the sitemap <span data-help="One address per line. Ending with / leaves out everything under it: /members/ covers /members/area. To hide one page from search engines altogether, open it on the Pages tab instead."></span></label>
+                            <textarea id="sox-s-ex" rows="3" class="form-input sox-mono" data-model="exclude.value" placeholder="/thank-you&#10;/members/"></textarea></div>
+                        ${sw('blockAll', 'Ask every search engine to stay away', 'robots.txt then says Disallow: / to everyone. For a site that is not ready yet - remember to switch it off at launch. It is a request: well-behaved crawlers honour it.')}
+                        <div class="sox-wide"><label class="form-label" for="sox-s-rob">More robots.txt rules <span data-help="Lines like Disallow: /private/ join the rules for every crawler. Start with User-agent: to add rules for one crawler, e.g. User-agent: GPTBot then Disallow: / to keep an AI crawler out."></span></label>
+                            <textarea id="sox-s-rob" rows="3" class="form-input sox-mono" data-model="robotsExtra.value" placeholder="Disallow: /private/"></textarea></div>
+                    </div></section>
+                    <section><h4>Redirects</h4><div class="sox-form-grid">
+                        ${sw('onRename', 'Add a redirect when a page is renamed', 'The old address keeps working, and any redirect that pointed at it is re-aimed at the new one - so there are never chains.')}
+                    </div></section>
+                    <section><h4>The checks</h4><div class="sox-form-grid">
+                        ${num('every', 'every', 'Check every page every (hours)', 0, 168, '0 checks only when you ask.')}
+                        ${num('words', 'words', 'Words a page should have', 0, 5000)}
+                        ${num('tmin', 'tMin', 'Shortest title', 10, 70)}
+                        ${num('tmax', 'tMax', 'Longest title', 30, 100, 'Google cuts titles at about 60 characters.')}
+                        ${num('dmin', 'dMin', 'Shortest description', 30, 160)}
+                        ${num('dmax', 'dMax', 'Longest description', 80, 320, 'Google cuts descriptions at about 155-160 characters.')}
+                    </div></section>
+                    <p class="sox-err" data-bind-hidden="!errText.value" data-bind-text="errText.value"></p>
+                    <div class="sox-actions">
+                        <small class="sox-muted">Ctrl+Enter saves.</small><span class="sox-spacer"></span>
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+                        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value"><span data-icon="save" data-icon-size="13"></span> Save</button>
+                    </div>
+                </div>`);
+            async function save() {
+                if (model.cannot.peek()) return;
+                saving.value = true;
+                try {
+                    await api('/settings', {method: 'PUT', body: JSON.stringify(checked.peek().settings)});
+                    E.toast('Settings saved.', {type: 'success'});
+                    so.close(true);
+                    loadAll();
+                } catch (e) {
+                    E.toast(`Not saved: ${e.message || e}`, {type: 'error'});
+                } finally {
+                    saving.value = false;
+                }
+            }
+            so.element.appendChild(panel);
+            const disposeHelp = k.helpPopovers(panel);
+            const handle = M.applyBindings(model, panel, {methods: {save, cancel: () => so.close()}});
+            panel.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); save(); } });
+            k.onceClosed(so, () => { handle.dispose(); disposeHelp(); settingsOpen = false; });
+            guardClose(so, () => JSON.stringify(body()) !== opened);
+            scope(() => { try { so.close(true); } catch { /* gone */ } });
+            I.scan(panel);
+            so.open();
+        }
+        async function setSource(id, on) {
+            try {
+                const r = await api('/settings');
+                const s = mergeDefaults(r.settings);
+                s.sitemap.sources[id] = on;
+                await api('/settings', {method: 'PUT', body: JSON.stringify(s)});
+                E.toast(`${labelOf(id)} ${on ? 'back in' : 'left out of'} the sitemap.`, {type: 'success'});
+                loadSitemap();
+            } catch (e) { E.toast(`Not changed: ${e.message || e}`, {type: 'error'}); }
+        }
+
+        // ---- Menus ----
+        const rowIndex = (row) => Number(String(row?.dataset?.row || '').slice(1));
+        function pageItems(row) {
+            const r = pageList[rowIndex(row)];
+            if (!r) return [];
+            return [
+                {header: r.urlPath},
+                {label: 'Title, description and checks…', icon: 'edit-3', action: () => openItem(r.urlPath)},
+                {label: 'Open the page', icon: 'external-link', action: () => window.open(r.urlPath, '_blank', 'noopener')},
+                {label: 'Redirect it elsewhere…', icon: 'corner-up-right', disabled: !canManage.peek(), action: () => { setTab('redirects'); newFrom.value = r.urlPath; newTo.value = ''; }},
+                {type: 'divider'},
+                {label: 'Copy the address', icon: 'copy', action: () => copy(r.urlPath, 'the address')},
+                {label: 'Copy the problems', icon: 'clipboard', disabled: !r.problems?.length && !r.error, action: () => copy(`${r.urlPath}\n${r.error || r.problems.join('\n')}`, 'the problems')}
+            ];
+        }
+        function siteItems(row) {
+            const x = siteList[rowIndex(row)];
+            if (!x) return [];
+            if (x.kind === 'dupe') {
+                return [{header: 'Open one of them'}, ...x.paths.slice(0, 12).map(p => ({label: p, icon: 'edit-3', action: () => openItem(p)})),
+                    {type: 'divider'}, {label: 'Copy the addresses', icon: 'copy', action: () => copy(x.paths.join('\n'), 'the addresses')}];
+            }
+            if (x.kind === 'chains') return [{label: 'Show the redirects', icon: 'corner-up-right', action: () => setTab('redirects')}];
+            return [{label: 'Go to Settings', icon: 'settings', action: () => { location.hash = x.link; }}];
+        }
+        function siteMain(row) {
+            const x = siteList[rowIndex(row)];
+            if (x?.kind === 'dupe') openItem(x.paths[0]);
+            else if (x?.kind === 'chains') setTab('redirects');
+            else if (x?.link) location.hash = x.link;
+        }
+        function ruleItems(row) {
+            const r = ruleList[rowIndex(row)];
+            if (!r) return [];
+            const rules = redirects.peek().rules;
+            const chained = redirects.peek().chains.some(c => c.id === r.id);
+            // Where the chain really ends: follow it, as a visitor would.
+            let end = null;
+            if (chained) {
+                end = r.to;
+                for (let i = 0; i < 10; i++) {
+                    const hop = matchRedirect(rules, end);
+                    if (!hop) break;
+                    if (hop.code === 410) { end = null; break; }
+                    end = hop.location;
+                    if (/^https?:/i.test(end)) break;
+                }
+            }
+            return [
+                {header: `${r.from} → ${r.code === 410 ? 'gone' : r.to}`},
+                {label: 'Edit…', icon: 'edit-3', disabled: !canManage.peek(), action: () => editRule(r)},
+                {label: 'Test it', icon: 'play', action: () => testRule(r.from)},
+                {label: 'Go straight there', icon: 'fast-forward', disabled: !end || !canManage.peek(),
+                    action: () => act(() => api(`/redirects/${encodeURIComponent(r.id)}`, {method: 'PUT', body: JSON.stringify({to: end})}), `${r.from} now goes straight to ${end}.`)},
+                {label: 'Open the old address', icon: 'external-link', disabled: r.from.endsWith('/*'), action: () => window.open(r.from, '_blank', 'noopener')},
+                {type: 'divider'},
+                {label: 'Copy', icon: 'copy', action: () => copy(`${r.from} ${r.to} ${r.code}`, 'the redirect')},
+                {label: 'Remove', icon: 'trash-2', danger: true, disabled: !canManage.peek(), action: async () => {
+                    if (await E.confirm(`Remove the redirect from ${esc(r.from)}? Visitors to it will get "not found".`)) removeRules([r.id], 'Redirect');
+                }}
+            ];
+        }
+        function entryItems(row) {
+            const e = smList[rowIndex(row)];
+            if (!e) return [];
+            return [
+                {header: e.urlPath},
+                {label: 'Title, description and checks…', icon: 'edit-3', action: () => openItem(e.urlPath)},
+                {label: 'Open', icon: 'external-link', action: () => window.open(e.urlPath, '_blank', 'noopener')},
+                {type: 'divider'},
+                {label: 'Copy the address', icon: 'copy', action: () => copy(e.urlPath, 'the address')}
+            ];
+        }
+        function sourceItems(row) {
+            const s = sitemap.peek().sources[rowIndex(row)];
+            if (!s) return [];
+            return [{header: labelOf(s.id)},
+                {label: s.on ? 'Leave all of it out' : 'List it again', icon: s.on ? 'eye-off' : 'eye', disabled: !canManage.peek(), action: () => setSource(s.id, !s.on)}];
+        }
+
+        function wireList(el, items, main) {
+            const menu = E.contextMenu(el, {cursor: 'glyph', match: '[data-row]', inherit: false, density: 'compact', items: (row) => items(row)});
+            scope(() => menu?.destroy?.());
+            const onClick = (e) => {
+                const row = e.target.closest('[data-row]');
+                if (!row || e.target.closest('a')) return;
+                if (e.target.closest('.sox-kebab')) { k.openMenuAt(row); return; }
+                main?.(row);
+            };
+            const onKey = (e) => {
+                const row = e.target.closest('[data-row]');
+                if (!row) return;
+                if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); k.openMenuAt(row); }
+                else if (e.key === 'Enter' && e.target === row) main?.(row);
+            };
+            el.addEventListener('click', onClick);
+            el.addEventListener('keydown', onKey);
+            scope(() => { el.removeEventListener('click', onClick); el.removeEventListener('keydown', onKey); });
+        }
+
+        // ---- Extension tabs (SEO Pro) ----
+        const extHost = root.querySelector('.sox-ext-body');
+        const extButtons = root.querySelector('.sox-ext-tabs');
+        let extMounted = null;
+        async function loadExtensions() {
+            let tabs = [];
+            try { tabs = (await api('/extensions'))?.tabs || []; } catch { /* none */ }
+            if (!here()) return;
+            extTabs.value = tabs;
+            extButtons.replaceChildren(...tabs.map(t => {
+                const b = document.createElement('button');
+                b.type = 'button';
+                b.setAttribute('role', 'tab');
+                b.dataset.ext = t.key;
+                b.innerHTML = `<span data-icon="${esc(t.icon || 'box')}" data-icon-size="14"></span> ${esc(t.label)} <span class="sox-pro">PRO</span>`;
+                if (t.help) b.title = t.help;
+                b.addEventListener('click', () => setTab(t.key));
+                return b;
+            }));
+            I.scan(extButtons);
+            syncExt();
+        }
+        async function syncExt() {
+            for (const b of extButtons.querySelectorAll('button')) b.classList.toggle('is-on', b.dataset.ext === tab.peek());
+            const t = extTabs.peek().find(x => x.key === tab.peek());
+            if (!t) {
+                if (!TABS.includes(tab.peek())) setTab('overview');
+                return;
+            }
+            if (extMounted?.key === t.key) return;
+            try { extMounted?.dispose?.(); } catch { /* gone */ }
+            extHost.replaceChildren();
+            try {
+                const mod = await import(t.module);
+                if (!here() || tab.peek() !== t.key) return;
+                const dispose = await mod.mount(extHost, {kit: k, api: k.apiRequest, scope, here, openItem, reload: loadAll, E, M, I});
+                extMounted = {key: t.key, dispose};
+            } catch (e) {
+                extHost.innerHTML = `<p class="sox-note is-bad">${esc(t.label)} could not be shown: ${esc(e.message || e)}</p>`;
+            }
+        }
+        scope(() => { try { extMounted?.dispose?.(); } catch { /* gone */ } });
+
+        // ---- Bindings ----
+        root.querySelector('.sox-pages').innerHTML = PAGE_ROW;
+        root.querySelector('.sox-site').innerHTML = SITE_ROW;
+        root.querySelector('.sox-rules').innerHTML = RULE_ROW;
+        root.querySelector('.sox-entries').innerHTML = ENTRY_ROW;
+        root.querySelector('.sox-sources').innerHTML = SOURCE_ROW;
+        const select = root.querySelector('.sox-select');
+        scope(M.effect(() => {
+            const opts = sourceOptions.value;
+            select.replaceChildren(new Option('Everything', ''), ...opts.map(o => new Option(labelOf(o), o)));
+            select.value = source.peek();
+        }));
+        function setTab(t) {
+            if (tab.peek() !== t) {
+                tab.value = t;
+                history.replaceState(null, '', `#/plugins/seo${t === 'overview' ? '' : `/${t}`}`);
+                if (t === 'redirects') loadRedirects();
+                if (t === 'sitemap') loadSitemap();
+            }
+            syncExt();
+        }
+        const model = {tab, busy, error, hooksOk, canManage, scoreText, scoreWidth, scoreTone, ov, attention, asOf, sourceOptions, source, show, query,
+            pageRows, pagesEmpty, siteRows, ruleRows, ruleCount, ruleText, rulesEmpty, chainText, renameText, ruleQuery, newFrom, newTo, newCode,
+            sourceRows, smRows, smShow, smQuery, smText, smEmpty, robots, extOn};
+        const methods = {
+            tab_overview: () => setTab('overview'), tab_redirects: () => setTab('redirects'), tab_sitemap: () => setTab('sitemap'),
+            show_all: () => { show.value = 'all'; }, show_problems: () => { show.value = 'problems'; }, show_hidden: () => { show.value = 'hidden'; },
+            sm_in: () => { smShow.value = 'in'; }, sm_out: () => { smShow.value = 'out'; },
+            importCsv,
+            exportRules: () => {
+                const rules = redirects.peek().rules;
+                if (!rules.length) { E.toast('Nothing to export.', {type: 'info'}); return; }
+                download(`redirects-${location.hostname}-${new Date().toISOString().slice(0, 10)}.csv`,
+                    toCsv(rules.map(r => ({from: r.from, to: r.to, code: r.code, note: r.note || '', hits: r.hits || 0, last_used: r.lastHit || ''}))));
+            },
+            addRule: () => {
+                const body = {from: newFrom.peek(), to: newTo.peek(), code: Number(newCode.peek())};
+                const {errors} = checkRule(body, redirects.peek().rules);
+                if (Object.keys(errors).length) { E.toast(Object.values(errors).join(' '), {type: 'warning'}); return false; }
+                addRedirect(body).then((r) => { if (r) { newFrom.value = ''; newTo.value = ''; } });
+                return false;
+            }
+        };
+        const bindings = M.applyBindings(model, root, {methods});
+        scope(() => bindings.dispose());
+        scope(k.helpPopovers(root, {position: 'bottom'}));
+        wireList(root.querySelector('.sox-pages'), pageItems, (row) => { const r = pageList[rowIndex(row)]; if (r) openItem(r.urlPath); });
+        wireList(root.querySelector('.sox-site'), siteItems, siteMain);
+        wireList(root.querySelector('.sox-rules'), ruleItems, (row) => { const r = ruleList[rowIndex(row)]; if (r && canManage.peek()) editRule(r); });
+        wireList(root.querySelector('.sox-entries'), entryItems, (row) => { const e = smList[rowIndex(row)]; if (e) openItem(e.urlPath); });
+        wireList(root.querySelector('.sox-sources'), sourceItems);
+
+        k.addBannerAction($container, {id: 'seo-check', icon: 'refresh-cw', title: 'Check every page again', onClick: checkNow});
+        k.addBannerAction($container, {id: 'seo-settings', icon: 'settings', title: 'SEO settings', onClick: openSettings});
+
+        I.scan(root);
+        await Promise.all([loadAll(), loadExtensions()]);
+        if (here()) I.scan(root);
+        if (here() && !overview.peek()?.at && !overview.peek()?.running) checkNow();
+    }
+};
+