domma-cms 0.91.0 → 0.92.0

package/plugins/feedback/admin/views/inbox.js

@@ -0,0 +1,325 @@
+/**
+ * Feedback on the Domma server: every site's reports in one inbox.
+ *
+ * Chips by status (with counts), filters for site and type, search. A report
+ * opens in a slideover: what was sent and by whom, its status, a reply the site
+ * will see, internal notes it will not, and - with Waypoint Pro here - a
+ * Waypoint issue made from it, whose progress the report then follows.
+ * Right-click (or the row's kebab, or Shift+F10) for the quick moves.
+ */
+
+import {api, esc, openPanel, refreshBadge, stamp, store, when} from '../lib/kit.js';
+
+const ROW = `
+<div class="fb-row" data-id="{{id}}" tabindex="0" role="button">
+  <span class="fb-type" data-bind-title="typeLabel"><span data-icon="{{icon}}" data-icon-size="16"></span></span>
+  <span class="fb-main"><strong data-bind-text="title"></strong><small data-bind-text="meta"></small></span>
+  <span class="fb-key" data-bind-hidden="!issueKey" data-bind-text="issueKey"></span>
+  <span class="fb-chip" data-bind-class="tone" data-bind-text="statusLabel"></span>
+  <button type="button" class="fb-kebab" aria-label="Actions" title="Actions">&#8942;</button>
+</div>`;
+
+const TONE = {new: 'info', acknowledged: 'muted', planned: 'info', 'in-progress': 'warning', done: 'success', declined: 'muted'};
+const ISSUE_TYPES = [{key: 'bug', label: 'Bug'}, {key: 'story', label: 'Story'}, {key: 'task', label: 'Task'}];
+const PRIORITIES = [{key: 'highest', label: 'Highest'}, {key: 'high', label: 'High'}, {key: 'medium', label: 'Medium'}, {key: 'low', label: 'Low'}, {key: 'lowest', label: 'Lowest'}];
+
+export async function mount(root, ctx) {
+    const {kit, scope, here, meta, id} = ctx;
+    const types = meta.types || [];
+    const statuses = meta.statuses || [];
+    const iconOf = (t) => types.find(x => x.key === t)?.icon || 'message-square';
+    const labelOf = (t) => types.find(x => x.key === t)?.short || t;
+    const statusOf = (s) => statuses.find(x => x.key === s)?.label || s;
+
+    const reports = M.observable([]);
+    const sites = M.observable({});
+    const loading = M.observable(true);
+    const error = M.observable('');
+    const filter = M.observable(store.get('feedback.inbox-filter') || 'open');
+    const site = M.observable('');
+    const type = M.observable('');
+    const query = M.observable('');
+    scope(M.effect(() => store.set('feedback.inbox-filter', filter.value)));
+
+    const FILTERS = [
+        {key: 'open', label: 'Open', match: (s) => !['done', 'declined'].includes(s)},
+        ...statuses.map(s => ({key: s.key, label: s.label, match: (x) => x === s.key})),
+        {key: 'all', label: 'All', match: () => true}
+    ];
+    const counts = M.computed(() => {
+        const out = {};
+        for (const f of FILTERS) out[f.key] = reports.value.filter(r => f.match(r.status)).length;
+        return out;
+    });
+    const siteOptions = M.computed(() => Object.entries(sites.value).map(([slug, name]) => ({slug, name}))
+        .filter(s => reports.value.some(r => r.site === s.slug)).sort((a, b) => a.name.localeCompare(b.name)));
+    const rows = M.observable([]);
+    scope(M.effect(() => {
+        const f = FILTERS.find(x => x.key === filter.value) || FILTERS[0];
+        const q = query.value.trim().toLowerCase();
+        rows.value = reports.value
+            .filter(r => f.match(r.status))
+            .filter(r => !site.value || r.site === site.value)
+            .filter(r => !type.value || r.type === type.value)
+            .filter(r => !q || [r.title, r.description, r.userName, r.siteName, r.issueKey].join(' ').toLowerCase().includes(q))
+            .map(r => ({
+                id: r.id,
+                title: r.title,
+                icon: iconOf(r.type),
+                typeLabel: labelOf(r.type),
+                meta: [r.siteName, r.userName, when(r.createdAt), r.severity === 'blocker' ? 'Blocker' : ''].filter(Boolean).join(' · '),
+                statusLabel: statusOf(r.status),
+                tone: `is-${TONE[r.status] || 'muted'}`,
+                issueKey: r.issueKey || ''
+            }));
+    }));
+    const emptyText = M.computed(() => (reports.value.length ? 'Nothing matches.' : 'No feedback yet. Reports from every site the manager runs arrive here.'));
+
+    root.innerHTML = '';
+    const view = document.createElement('div');
+    view.className = 'fb-card';
+    view.innerHTML = `
+<div class="fb-bar">
+  <div class="fb-seg" role="group" aria-label="Show">
+    ${FILTERS.map(f => `<button type="button" data-filter="${esc(f.key)}" data-bind-class="filter.value === '${esc(f.key)}' && 'is-on'">${esc(f.label)} <b data-bind-text="counts.value['${esc(f.key)}']"></b></button>`).join('')}
+  </div>
+  <span data-help-title="Feedback inbox" data-help="Everything the sites' admins sent. Open a report to set its status, reply (the site sees the reply and the status, never the internal notes) or make a Waypoint issue from it - once linked, the report follows the issue: planned, in progress, done. Right-click a row for quick moves."></span>
+</div>
+<div class="fb-bar">
+  <select class="form-select fb-filter" aria-label="Site" data-model="site.value">
+    <option value="">Every site</option>
+  </select>
+  <select class="form-select fb-filter" aria-label="Type" data-model="type.value">
+    <option value="">Every type</option>
+    ${types.map(t => `<option value="${esc(t.key)}">${esc(t.short)}</option>`).join('')}
+  </select>
+  <input type="search" class="form-input fb-search" placeholder="Search title, text, person, site..." aria-label="Search feedback" data-model="query.value">
+</div>
+<p class="fb-note" data-bind-hidden="!loading.value">Loading...</p>
+<p class="fb-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
+<p class="fb-note" data-bind-hidden="loading.value || error.value || rows.value.length" data-bind-text="emptyText.value"></p>
+<div class="fb-list" data-each="rows.value key=id"></div>`;
+    root.appendChild(view);
+    // Help first: its scan also scans icons, and a row template scanned while its icon is still
+    // {{icon}} is marked processed - every row cloned from it would then stay blank.
+    scope(kit.helpPopovers(view, {position: 'bottom'}));
+    view.querySelector('.fb-list').innerHTML = ROW;
+    // The list re-renders whenever the rows change; its icons need scanning each time,
+    // after the render has landed (flush first, or the spans are scanned empty).
+    const listEl = view.querySelector('.fb-list');
+    scope(M.effect(() => {
+        rows.value;
+        Promise.resolve().then(() => { M.flush?.(); I.scan(listEl); });
+    }));
+
+    // The site list is small and changes only on load: fill it by hand.
+    const siteSelect = view.querySelector('select[aria-label="Site"]');
+    scope(M.effect(() => {
+        const chosen = site.peek();
+        siteSelect.length = 1;
+        for (const s of siteOptions.value) {
+            const o = document.createElement('option');
+            o.value = s.slug;
+            o.textContent = s.name;
+            siteSelect.appendChild(o);
+        }
+        siteSelect.value = chosen;
+    }));
+
+    async function load() {
+        try {
+            const res = await api.reports();
+            if (!here()) return;
+            sites.value = res.sites || {};
+            reports.value = Array.isArray(res.reports) ? res.reports : [];
+            error.value = '';
+        } catch (err) {
+            error.value = `Could not load the feedback: ${err.message || err}`;
+        } finally {
+            loading.value = false;
+            I.scan(view);
+        }
+    }
+    const replace = (r) => { reports.value = reports.peek().map(x => (x.id === r.id ? {...x, ...r} : x)); };
+
+    async function setStatus(r, status) {
+        try {
+            replace(await api.update(r.id, {status}));
+            refreshBadge();
+            E.toast(`${statusOf(status)}.`, {type: 'success'});
+        } catch (err) {
+            E.toast(err.message || String(err), {type: 'error'});
+        }
+    }
+
+    async function remove(r) {
+        if (!await E.confirm(`Delete "${esc(r.title)}"? The site will no longer see it either. This cannot be undone.`)) return;
+        try {
+            await api.remove(r.id);
+            reports.value = reports.peek().filter(x => x.id !== r.id);
+            refreshBadge();
+            E.toast('Deleted.', {type: 'success'});
+        } catch (err) {
+            E.toast(err.message || String(err), {type: 'error'});
+        }
+    }
+
+    async function open(reportId) {
+        let r;
+        try { r = await api.report(reportId); } catch (err) { E.toast(err.message || String(err), {type: 'error'}); return; }
+        replace(r);
+        let wp = {available: false, projects: []};
+        if (!r.issueId) { try { wp = await api.waypoint(); } catch { /* no Waypoint */ } }
+
+        const f = {
+            status: M.observable(r.status), reply: M.observable(r.reply || ''), notes: M.observable(r.notes || ''),
+            busy: M.observable(false),
+            project: M.observable(wp.projects?.[0]?.id || ''),
+            itype: M.observable(r.type === 'bug' ? 'bug' : r.type === 'feature' ? 'story' : 'task'),
+            priority: M.observable(r.severity === 'blocker' ? 'highest' : r.severity === 'major' ? 'high' : 'medium'),
+            issueKey: M.observable(r.issueKey || ''), issueStatus: M.observable(r.issueStatus || '')
+        };
+        const facts = [
+            ['From', `${r.userName || 'An admin'}${r.userEmail ? ` <${r.userEmail}>` : ''}`],
+            ['Site', r.siteName || r.site],
+            ['Sent', stamp(r.createdAt)],
+            ['Type', labelOf(r.type)],
+            ...(r.severity ? [['Severity', r.severity]] : []),
+            ...(r.where ? [['Where', r.where]] : []),
+            ...(r.cmsVersion ? [['CMS', r.cmsVersion]] : [])
+        ];
+        let panel = null;
+        panel = await openPanel({
+            title: r.title,
+            size: 'lg',
+            model: f,
+            html: `<div class="fb-detail">
+  <dl class="fb-facts">${facts.map(([a, b]) => `<div><dt>${esc(a)}</dt><dd>${esc(b)}</dd></div>`).join('')}</dl>
+  <h4>What they sent</h4>
+  <div class="fb-text">${esc(r.description)}</div>
+
+  <div class="fb-form">
+    <label class="form-label" for="fb-status">Status <span data-help="What the site sees. Once a Waypoint issue is linked, the status follows it - except Not planned, which stays until you change it."></span></label>
+    <select id="fb-status" class="form-select" data-model="status.value">
+      ${statuses.map(s => `<option value="${esc(s.key)}">${esc(s.label)}</option>`).join('')}
+    </select>
+    <label class="form-label" for="fb-reply">Reply to the site <span data-help="The site's admins see this in their Feedback screen, and are told there is a reply."></span></label>
+    <textarea id="fb-reply" class="form-textarea" rows="5" maxlength="8000" data-model="reply.value"></textarea>
+    <label class="form-label" for="fb-notes">Internal notes <span data-help="Only here. Never sent to the site."></span></label>
+    <textarea id="fb-notes" class="form-textarea" rows="3" maxlength="8000" data-model="notes.value"></textarea>
+    <div class="fb-actions"><span class="fb-spacer"></span>
+      <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="busy.value"><span data-icon="check" data-icon-size="13"></span> Save</button>
+    </div>
+  </div>
+
+  <div class="fb-waypoint" data-bind-hidden="!issueKey.value">
+    <h4>Waypoint</h4>
+    <p>Tracked as <a href="#/plugins/waypoint-pro" class="fb-issue-link" data-on-click="openIssue" title="Open the issue in Waypoint"><strong data-bind-text="issueKey.value"></strong></a><span data-bind-hidden="!issueStatus.value"> - <span data-bind-text="issueStatus.value"></span></span>.</p>
+  </div>
+  ${!r.issueId && wp.available ? `<div class="fb-waypoint" data-bind-hidden="issueKey.value">
+    <h4>Make a Waypoint issue <span data-help="Files this report in Waypoint Pro with its text, the site and who sent it. The report then follows the issue's progress."></span></h4>
+    ${wp.projects?.length ? `<div class="fb-grid3">
+      <label><span class="form-label">Project</span><select class="form-select" data-model="project.value">${wp.projects.map(p => `<option value="${esc(p.id)}">${esc(p.key ? `${p.key} - ${p.name}` : p.name)}</option>`).join('')}</select></label>
+      <label><span class="form-label">Type</span><select class="form-select" data-model="itype.value">${ISSUE_TYPES.map(t => `<option value="${t.key}">${t.label}</option>`).join('')}</select></label>
+      <label><span class="form-label">Priority</span><select class="form-select" data-model="priority.value">${PRIORITIES.map(p => `<option value="${p.key}">${p.label}</option>`).join('')}</select></label>
+    </div>
+    <div class="fb-actions"><span class="fb-spacer"></span>
+      <button type="button" class="btn btn-sm btn-outline" data-on-click="promote" data-bind-disabled="busy.value"><span data-icon="layers" data-icon-size="13"></span> Create Waypoint issue</button>
+    </div>` : '<p class="fb-note">Waypoint has no projects yet. Make one there first.</p>'}
+  </div>` : ''}
+
+  <h4>History</h4>
+  <ul class="fb-history">${(r.history || []).slice().reverse().map(h => `<li><span>${esc(h.what)}</span><small>${esc(h.by || '')} · ${esc(stamp(h.at))}</small></li>`).join('')}</ul>
+</div>`,
+            methods: {
+                async save() {
+                    if (f.busy.peek()) return;
+                    f.busy.value = true;
+                    try {
+                        const next = await api.update(r.id, {status: f.status.peek(), reply: f.reply.peek(), notes: f.notes.peek()});
+                        replace(next);
+                        refreshBadge();
+                        E.toast('Saved.', {type: 'success'});
+                        panel?.close();
+                    } catch (err) {
+                        E.toast(err.message || String(err), {type: 'error'});
+                    } finally {
+                        f.busy.value = false;
+                    }
+                },
+                openIssue(e) {
+                    e?.preventDefault?.();
+                    const key = f.issueKey.peek();
+                    if (!key) return;
+                    panel?.close();
+                    location.hash = `#/plugins/waypoint-pro/i/${encodeURIComponent(key)}`;
+                },
+                async promote() {
+                    if (f.busy.peek() || !f.project.peek()) return;
+                    f.busy.value = true;
+                    try {
+                        const next = await api.promote(r.id, {projectId: f.project.peek(), type: f.itype.peek(), priority: f.priority.peek()});
+                        replace(next);
+                        f.issueKey.value = next.issueKey || '';
+                        f.status.value = next.status;
+                        refreshBadge();
+                        E.toast(`Filed as ${next.issueKey || 'a Waypoint issue'}.`, {type: 'success'});
+                    } catch (err) {
+                        E.toast(err.message || String(err), {type: 'error'});
+                    } finally {
+                        f.busy.value = false;
+                    }
+                }
+            }
+        });
+        // Opening a new report is seeing it.
+        if (r.status === 'new') {
+            try { const next = await api.update(r.id, {status: 'acknowledged'}); replace(next); f.status.value = next.status; refreshBadge(); }
+            catch { /* stays new */ }
+        }
+    }
+
+    const bindings = M.applyBindings({loading, error, filter, site, type, query, rows, counts, emptyText}, view);
+    scope(() => bindings.dispose());
+    view.querySelector('.fb-seg').addEventListener('click', (e) => {
+        const b = e.target.closest('[data-filter]');
+        if (b) filter.value = b.dataset.filter;
+    });
+
+    // Rows: click or Enter opens; right-click, the kebab or Shift+F10 = the menu.
+    const list = view.querySelector('.fb-list');
+    const byId = (rid) => reports.peek().find(x => x.id === rid);
+    const menu = E.contextMenu(list, {
+        cursor: 'glyph', match: '.fb-row', inherit: false, density: 'compact',
+        items: (row) => {
+            const r = byId(row.dataset.id);
+            if (!r) return [];
+            return [
+                {label: 'Open', icon: 'eye', action: () => open(r.id)},
+                {type: 'divider'},
+                ...statuses.filter(s => s.key !== r.status).map(s => ({label: `Mark ${s.label.toLowerCase()}`, icon: 'flag', action: () => setStatus(r, s.key)})),
+                {type: 'divider'},
+                {label: 'Delete', icon: 'trash', danger: true, action: () => remove(r)}
+            ];
+        }
+    });
+    const onClick = (e) => {
+        const row = e.target.closest('.fb-row');
+        if (!row) return;
+        const kebab = e.target.closest('.fb-kebab');
+        if (kebab) { kit.openMenuAt(kebab); return; }
+        open(row.dataset.id);
+    };
+    const onKey = (e) => {
+        const row = e.target.closest('.fb-row');
+        if (!row) return;
+        if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); kit.openMenuAt(row); }
+        else if (e.key === 'Enter' && e.target === row) open(row.dataset.id);
+    };
+    list.addEventListener('click', onClick);
+    list.addEventListener('keydown', onKey);
+    scope(() => { list.removeEventListener('click', onClick); list.removeEventListener('keydown', onKey); menu?.destroy?.(); });
+
+    await load();
+    if (id && here()) open(id);
+}

package/plugins/feedback/admin/views/send.js

@@ -0,0 +1,223 @@
+/**
+ * Feedback on a site: send Domma a bug, a request, a question or a thank you,
+ * and see what became of everything this site sent.
+ *
+ * A report is kept on this site before it is sent, so a Domma server that is
+ * restarting only delays it ("Waiting to send"); opening this screen tries
+ * again. A site the manager did not start has nowhere to send to, and says so.
+ */
+
+import {api, esc, openPanel, refreshBadge, stamp, when} from '../lib/kit.js';
+
+const ROW = `
+<div class="fb-row" data-id="{{key}}" tabindex="0" role="button">
+  <span class="fb-type" data-bind-title="typeLabel"><span data-icon="{{icon}}" data-icon-size="16"></span></span>
+  <span class="fb-main"><strong data-bind-text="title"></strong><small data-bind-text="meta"></small></span>
+  <span class="fb-dot" data-bind-hidden="!unread" title="New reply from Domma"></span>
+  <span class="fb-chip" data-bind-class="tone" data-bind-text="statusLabel"></span>
+</div>`;
+
+const TONE = {new: 'info', acknowledged: 'muted', planned: 'info', 'in-progress': 'warning', done: 'success', declined: 'muted',
+    waiting: 'warning', refused: 'bad'};
+
+export async function mount(root, ctx) {
+    const {kit, scope, here, meta, id} = ctx;
+    const types = meta.types || [];
+    const iconOf = (t) => types.find(x => x.key === t)?.icon || 'message-square';
+    const labelOf = (t) => types.find(x => x.key === t)?.short || t;
+
+    const connected = M.observable(Boolean(ctx.mode.connected));
+    const reports = M.observable([]);
+    const loading = M.observable(true);
+    const reachable = M.observable(true);
+    const error = M.observable('');
+    const rows = M.observable([]);
+    scope(M.effect(() => {
+        rows.value = reports.value.map(r => ({
+            key: r.id || r.ref,
+            title: r.title,
+            icon: iconOf(r.type),
+            typeLabel: labelOf(r.type),
+            meta: [when(r.createdAt), r.userName, r.issueKey ? `Tracked as ${r.issueKey}` : ''].filter(Boolean).join(' · '),
+            statusLabel: r.statusLabel,
+            tone: `is-${TONE[r.status] || 'muted'}`,
+            unread: Boolean(r.unread)
+        }));
+    }));
+    const waitingCount = M.computed(() => reports.value.filter(r => r.status === 'waiting').length);
+
+    root.innerHTML = '';
+    const view = document.createElement('div');
+    view.className = 'fb-card';
+    view.innerHTML = `
+<div class="fb-empty-state" data-bind-hidden="connected.value">
+  <span data-icon="cloud-off" data-icon-size="28"></span>
+  <h3>This site is not connected to Domma</h3>
+  <p>Feedback travels through the Domma server that runs this site. This one was not started by it, so there is nowhere to send from here. If you think that is wrong, ask whoever set the site up.</p>
+</div>
+<div data-bind-hidden="!connected.value">
+  <div class="fb-bar">
+    <div class="fb-intro">
+      <strong>Tell Domma what is broken, missing or good.</strong>
+      <span>Every report is read. You will see its progress here, and any reply.</span>
+    </div>
+    <span data-help-title="Feedback" data-help="Reports go to the Domma team, with your name and this site attached so we can come back to you. You see everything this site has sent, whoever sent it. A report shows as Seen, Planned, In progress, Done or Not planned as it moves, and a reply from Domma appears in it - the sidebar badge counts replies you have not opened."></span>
+    <span class="fb-spacer"></span>
+    <button type="button" class="btn btn-primary btn-sm" data-on-click="compose"><span data-icon="send" data-icon-size="14"></span> Send feedback</button>
+  </div>
+  <p class="fb-note is-warn" data-bind-hidden="!waitingCount.value">
+    <span data-icon="clock" data-icon-size="14"></span>
+    <span data-bind-text="waitingCount.value === 1 ? '1 report is waiting to send' : waitingCount.value + ' reports are waiting to send'"></span> - it goes as soon as the Domma server answers.
+    <button type="button" class="btn btn-ghost btn-xs" data-on-click="reload">Try now</button>
+  </p>
+  <p class="fb-note is-warn" data-bind-hidden="reachable.value || loading.value">Domma could not be reached just now, so the statuses below may be out of date.</p>
+  <p class="fb-note" data-bind-hidden="!loading.value">Loading...</p>
+  <p class="fb-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
+  <p class="fb-note" data-bind-hidden="loading.value || rows.value.length">Nothing sent yet. Found something odd, or wish the CMS did something it does not? Send feedback.</p>
+  <div class="fb-list" data-each="rows.value key=key"></div>
+</div>`;
+    root.appendChild(view);
+    // Help first: its scan also scans icons, and a row template scanned while its icon is still
+    // {{icon}} is marked processed - every row cloned from it would then stay blank.
+    scope(kit.helpPopovers(view, {position: 'bottom'}));
+    view.querySelector('.fb-list').innerHTML = ROW;
+    // The list re-renders whenever the rows change; its icons need scanning each time,
+    // after the render has landed (flush first, or the spans are scanned empty).
+    const listEl = view.querySelector('.fb-list');
+    scope(M.effect(() => {
+        rows.value;
+        Promise.resolve().then(() => { M.flush?.(); I.scan(listEl); });
+    }));
+
+    async function load() {
+        loading.value = true;
+        try {
+            const res = await api.sent();
+            if (!here()) return;
+            connected.value = Boolean(res.connected);
+            reachable.value = Boolean(res.reachable) || !res.connected;
+            reports.value = Array.isArray(res.reports) ? res.reports : [];
+            error.value = '';
+        } catch (err) {
+            error.value = `Could not load your feedback: ${err.message || err}`;
+        } finally {
+            loading.value = false;
+            I.scan(view);
+        }
+    }
+
+    const byKey = (k) => reports.peek().find(r => (r.id || r.ref) === k);
+
+    function compose() {
+        const f = {
+            type: M.observable('bug'), title: M.observable(''), description: M.observable(''),
+            where: M.observable(''), severity: M.observable('minor'), busy: M.observable(false)
+        };
+        const isBug = M.computed(() => f.type.value === 'bug');
+        let panel = null;
+        openPanel({
+            title: 'Send feedback to Domma',
+            size: 'md',
+            model: {...f, isBug},
+            html: `<div class="fb-form">
+  <label class="form-label">What is it?</label>
+  <div class="fb-types" role="radiogroup" aria-label="Type">
+    ${types.map(t => `<button type="button" role="radio" data-type="${esc(t.key)}" data-bind-class="type.value === '${esc(t.key)}' && 'is-on'" data-bind-aria-checked="type.value === '${esc(t.key)}'"><span data-icon="${esc(t.icon)}" data-icon-size="16"></span>${esc(t.label)}</button>`).join('')}
+  </div>
+  <label class="form-label" for="fb-title">Title</label>
+  <input id="fb-title" class="form-input" maxlength="140" data-model="title.value" placeholder="One line: what happened, or what you would like">
+  <label class="form-label" for="fb-desc">Description <span data-help="For a bug: what you did, what you expected, and what happened instead. For a request: what you are trying to get done - the why helps more than the how."></span></label>
+  <textarea id="fb-desc" class="form-textarea" rows="8" maxlength="8000" data-model="description.value"></textarea>
+  <div data-bind-hidden="!isBug.value">
+    <label class="form-label" for="fb-sev">How bad is it?</label>
+    <select id="fb-sev" class="form-select" data-model="severity.value">
+      ${(ctx.meta.severities || [{key: 'minor', label: 'Minor - a nuisance'}, {key: 'major', label: 'Major - gets in the way'}, {key: 'blocker', label: 'Blocker - cannot carry on'}]).map(s => `<option value="${esc(s.key)}">${esc(s.label)}</option>`).join('')}
+    </select>
+  </div>
+  <label class="form-label" for="fb-where">Where <span data-help="The screen or page it is about, if there is one - e.g. Pages, the Blog editor, /contact. Optional."></span></label>
+  <input id="fb-where" class="form-input" maxlength="300" data-model="where.value" placeholder="Optional">
+  <p class="fb-hint">Sent with your name, this site and its CMS version, so Domma can reply.</p>
+  <div class="fb-actions"><span class="fb-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="send" data-bind-disabled="busy.value"><span data-icon="send" data-icon-size="13"></span> Send</button>
+  </div>
+</div>`,
+            methods: {
+                cancel: () => panel?.close(),
+                async send() {
+                    if (f.busy.peek()) return;
+                    f.busy.value = true;
+                    try {
+                        const r = await api.send({type: f.type.peek(), title: f.title.peek(), description: f.description.peek(),
+                            where: f.where.peek(), severity: f.type.peek() === 'bug' ? f.severity.peek() : ''});
+                        E.toast(r.message || 'Sent.', {type: r.state === 'sent' ? 'success' : 'warning'});
+                        panel?.close();
+                        await load();
+                    } catch (err) {
+                        E.toast(err.message || String(err), {type: 'error'});
+                    } finally {
+                        f.busy.value = false;
+                    }
+                }
+            }
+        }).then(p => {
+            panel = p;
+            p.panel.querySelector('.fb-types').addEventListener('click', (e) => {
+                const b = e.target.closest('[data-type]');
+                if (b) f.type.value = b.dataset.type;
+            });
+            p.panel.querySelector('#fb-title')?.focus();
+        });
+    }
+
+    async function open(k) {
+        const r = byKey(k);
+        if (!r) return;
+        const lines = [
+            ['Type', labelOf(r.type)],
+            ['Status', r.statusLabel],
+            ['Sent', `${stamp(r.createdAt)}${r.userName ? ` by ${r.userName}` : ''}`],
+            ...(r.severity ? [['Severity', r.severity]] : []),
+            ...(r.where ? [['Where', r.where]] : []),
+            ...(r.issueKey ? [['Tracked as', `${r.issueKey}${r.issueStatus ? ` (${r.issueStatus})` : ''}`]] : []),
+            ...(r.lastError ? [['Last try', r.lastError]] : [])
+        ];
+        await openPanel({
+            title: r.title,
+            size: 'md',
+            html: `<div class="fb-detail">
+  <dl class="fb-facts">${lines.map(([a, b]) => `<div><dt>${esc(a)}</dt><dd>${esc(b)}</dd></div>`).join('')}</dl>
+  <h4>What was sent</h4>
+  <div class="fb-text">${esc(r.description)}</div>
+  ${r.reply ? `<h4><span data-icon="corner-up-left" data-icon-size="14"></span> Domma replied <small>${esc(stamp(r.replyAt))}</small></h4><div class="fb-text fb-reply">${esc(r.reply)}</div>` : '<p class="fb-note">No reply yet. The status above moves as Domma works on it.</p>'}
+</div>`
+        });
+        if (r.unread && r.id) {
+            try {
+                await api.seen(r.id, r.replyAt);
+                reports.value = reports.peek().map(x => (x === r ? {...x, unread: false} : x));
+                refreshBadge();
+            } catch { /* the badge catches up next time */ }
+        }
+    }
+
+    const bindings = M.applyBindings({connected, loading, reachable, error, rows, waitingCount}, view, {
+        methods: {compose, reload: () => load()}
+    });
+    scope(() => bindings.dispose());
+
+    const list = view.querySelector('.fb-list');
+    const onClick = (e) => { const row = e.target.closest('.fb-row'); if (row) open(row.dataset.id); };
+    const onKey = (e) => { const row = e.target.closest('.fb-row'); if (row && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); open(row.dataset.id); } };
+    list.addEventListener('click', onClick);
+    list.addEventListener('keydown', onKey);
+    scope(() => { list.removeEventListener('click', onClick); list.removeEventListener('keydown', onKey); });
+
+    I.scan(view);
+    if (connected.peek()) {
+        await load();
+        if (id && here()) open(id);
+    } else {
+        loading.value = false;
+    }
+}

package/plugins/feedback/collections/feedback-reports.json

@@ -0,0 +1,24 @@
+{
+  "slug": "feedback-reports",
+  "title": "Feedback Reports",
+  "description": "Feedback sent to Domma by the admins of every site the manager runs. Read and answer it in Feedback, never here: the sites see only what the Feedback inbox lets them.",
+  "plugin": "feedback",
+  "fields": [
+    {"name": "site", "label": "Site", "type": "text"},
+    {"name": "type", "label": "Type", "type": "text"},
+    {"name": "title", "label": "Title", "type": "text"},
+    {"name": "description", "label": "Description", "type": "textarea"},
+    {"name": "status", "label": "Status", "type": "text"},
+    {"name": "userName", "label": "Sent by", "type": "text"},
+    {"name": "userEmail", "label": "Email", "type": "text"},
+    {"name": "reply", "label": "Reply to the site", "type": "textarea"},
+    {"name": "notes", "label": "Internal notes", "type": "textarea"},
+    {"name": "issueKey", "label": "Waypoint issue", "type": "text"}
+  ],
+  "api": {
+    "create": {"enabled": false, "access": "admin"},
+    "read":   {"enabled": false, "access": "admin"},
+    "update": {"enabled": false, "access": "admin"},
+    "delete": {"enabled": false, "access": "admin"}
+  }
+}

package/plugins/feedback/config.js

@@ -0,0 +1,15 @@
+/**
+ * Feedback - default settings (config/plugins.json `feedback.settings` overrides).
+ *
+ * Sender side:
+ *   syncMinutes    how often a site sends what is waiting and looks for replies
+ *
+ * Receiver side (the manager):
+ *   perSiteMax     reports one site may send in perSiteMinutes; more answer 429
+ *   perSiteMinutes the window for perSiteMax
+ */
+export default {
+    syncMinutes: 60,
+    perSiteMax: 10,
+    perSiteMinutes: 10
+};