@alfacapital-tech/c4builder 0.9.0-rc.1 → 0.9.0-rc.3

package/dist/cli/commands/site.comments.js

@@ -1,17 +1,39 @@
+import { UI_STRINGS } from "./site.i18n.js";
 export const COMMENTS_PATH = '/__c4builder/comments';
+export const FEEDBACK_PATH = '/__c4builder/feedback';
+export const FEEDBACK_HEADER = 'X-C4builder-Feedback';
 const CSS = [
-    '.c4b-cbtn{position:absolute;z-index:1001;padding:4px 10px;border:1px solid #42b983;border-radius:4px;background:#fff;color:#2c3e50;font:13px/1.4 sans-serif;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}',
+    '.c4b-cbtns{position:absolute;z-index:1001;white-space:nowrap}',
+    '.c4b-cbtns button{margin-right:4px;padding:4px 10px;border:1px solid #42b983;border-radius:4px;background:#fff;color:#2c3e50;font:13px/1.4 sans-serif;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}',
+    '.c4b-cbtns button.c4b-fb{border-color:#3b82f6}',
     '.c4b-cpop{position:absolute;z-index:1002;width:380px;max-width:calc(100vw - 32px);padding:10px;border:1px solid #ddd;border-radius:6px;background:#fff;color:#2c3e50;font:13px/1.4 sans-serif;box-shadow:0 4px 16px rgba(0,0,0,.2)}',
     '.c4b-cpop blockquote{margin:0 0 8px;padding:4px 8px;border-left:3px solid #42b983;background:#f8f8f8;max-height:80px;overflow:auto;font-size:12px;white-space:pre-wrap}',
-    '.c4b-cpop textarea{width:100%;box-sizing:border-box;min-height:70px;padding:6px;border:1px solid #ccc;border-radius:4px;font:13px/1.4 sans-serif;resize:vertical}',
+    '.c4b-cpop textarea,.c4b-review textarea{width:100%;box-sizing:border-box;min-height:70px;padding:6px;border:1px solid #ccc;border-radius:4px;font:13px/1.4 sans-serif;resize:vertical}',
     '.c4b-cpop .c4b-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}',
     '.c4b-cpop small{color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
-    '.c4b-cpop button{padding:4px 12px;border:1px solid #ccc;border-radius:4px;background:#fff;color:#2c3e50;cursor:pointer;font:13px sans-serif}',
-    '.c4b-cpop button.c4b-primary{border-color:#42b983;background:#42b983;color:#fff}',
-    '.c4b-cpop button:disabled{opacity:.6;cursor:default}',
+    // Кнопки поповера не сжимаются: длинную подсказку обрезает многоточие, а не кнопки уходят
+    // на вторую строку (русские подписи и длинные названия разделов).
+    '.c4b-cpop .c4b-row>span{flex:none}',
+    '.c4b-cpop button,.c4b-review button{padding:4px 12px;border:1px solid #ccc;border-radius:4px;background:#fff;color:#2c3e50;cursor:pointer;font:13px sans-serif}',
+    '.c4b-cpop button.c4b-primary,.c4b-review button.c4b-primary{border-color:#42b983;background:#42b983;color:#fff}',
+    '.c4b-cpop button:disabled,.c4b-review button:disabled{opacity:.6;cursor:default}',
+    // Панель review — ниже кнопок у выделения и поповера: она прибита к низу экрана и иначе
+    // перекрывает их у выделения в нижних строках.
+    '.c4b-review{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1000;width:520px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:8px 12px;border:1px solid #3b82f6;border-radius:6px;background:#fff;color:#2c3e50;font:13px/1.4 sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.2)}',
+    '.c4b-review .c4b-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}',
+    '.c4b-review .c4b-row small{flex:1;color:#888;white-space:nowrap}',
+    // Кнопки панели переносятся одной группой: иначе при нехватке места часть уезжает на
+    // вторую строку, а Discard остаётся один в первой.
+    '.c4b-review .c4b-acts{display:flex;gap:6px;margin-left:auto}',
+    '.c4b-review button.c4b-link{padding:0;border:0;background:none;color:#2c3e50;font-weight:700;text-decoration:underline dotted}',
+    '.c4b-review ul{margin:6px 0;padding:0;list-style:none;max-height:40vh;overflow:auto}',
+    '.c4b-review li{padding:3px 0;border-top:1px solid #eee;overflow-wrap:anywhere}',
+    '.c4b-review textarea{margin-top:6px}',
+    '.c4b-review .c4b-del{opacity:1}',
     '.c4b-ctoast{position:fixed;left:16px;bottom:16px;z-index:1003;max-width:420px;padding:8px 14px;border-radius:6px;background:#2c3e50;color:#fff;font:13px/1.4 sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.3)}',
     '.c4b-ctoast.c4b-err{background:#c0392b}',
     'mark.c4b-hl{background:#fff3a0;color:inherit;padding:0;border-radius:2px}',
+    'mark.c4b-dhl{background:#cfe3ff;color:inherit;padding:0;border-radius:2px}',
     'sup.c4b-ref{font-size:.7em;line-height:0;margin-left:1px;user-select:none}',
     'sup.c4b-ref a{color:#b58900;text-decoration:none;font-weight:700;cursor:pointer}',
     '.c4b-qrow{transition:background .3s}',
@@ -21,22 +43,47 @@ const CSS = [
     '.c4b-del:hover{color:#fff;background:#c0392b;border-color:#c0392b}',
     '.c4b-del:disabled{opacity:.5;cursor:default}'
 ].join('');
-const jsString = (s) => JSON.stringify(s)
+const jsValue = (v) => JSON.stringify(v)
     .replace(/</g, '\\u003c')
     .replace(/[\u0080-￿]/g, (c) => `\\u${c.charCodeAt(0).toString(16).padStart(4, '0')}`);
-export const commentsSnippet = (heading) => `
+// Начальное состояние агентского режима и ключ проекта вставляет сервер, дальше его обновляют
+// события `c4builder:agent` от сниппета livereload (change site-agent-feedback, design D4, D8).
+// Язык выбирает сам скрипт: при `auto` — по navigator.languages (change site-ui-language, D1).
+export const commentsSnippet = (heading, { agent = false, listening = false, project = '', language = 'auto' } = {}) => `
 <script>
 (function () {
     if (window.__c4builderComments) return;
     window.__c4builderComments = true;
     var ENDPOINT = '${COMMENTS_PATH}';
-    var HEADING = ${jsString(heading)};
+    var FEEDBACK = '${FEEDBACK_PATH}';
+    var HEADING = ${jsValue(heading)};
     var TOAST_KEY = '__c4builderCommentToast';
+    var DRAFT_KEY = '__c4builderReview:' + ${jsValue(project)};
+    var AGENT = { on: ${agent}, listening: ${listening} };
     var BLOCKS = 'p,li,td,th,h1,h2,h3,h4,h5,h6,pre,blockquote,dd,dt,div,section,details,summary';
     var style = document.createElement('style');
-    style.textContent = ${jsString(CSS)};
+    style.textContent = ${jsValue(CSS)};
     document.head.appendChild(style);
 
+    var STRINGS = ${jsValue(UI_STRINGS)};
+    var has = function (lang) { return Object.prototype.hasOwnProperty.call(STRINGS, lang); };
+    var LANG = (function (pref) {
+        if (has(pref)) return pref;
+        var prefs = [].concat(navigator.languages || [], navigator.language || []);
+        for (var i = 0; i < prefs.length; i++) {
+            var tag = String(prefs[i]).toLowerCase().split('-')[0];
+            if (has(tag)) return tag;
+        }
+        return 'en';
+    })(${jsValue(language)});
+    var plural = new Intl.PluralRules(LANG);
+    var t = function (key, vars) {
+        vars = vars || {};
+        var s = STRINGS[LANG][key];
+        if (typeof s === 'object') s = s[plural.select(vars.n)];
+        return s.replace(/\\{(\\w+)\\}/g, function (m, k) { return k in vars ? String(vars[k]) : m; });
+    };
+
     var collapse = function (s) { return String(s).replace(/\\s+/g, ' ').trim(); };
     var same = function (a, b) { return collapse(a).toLowerCase() === collapse(b).toLowerCase(); };
 
@@ -109,7 +156,7 @@ export const commentsSnippet = (heading) => `
         for (var r = 0; r < roots.length; r++) walk(roots[r]);
         return { text: chars.join(''), map: map };
     };
-    var wrapRange = function (idx, from, to, title) {
+    var wrapRange = function (idx, from, to, title, cls) {
         var first = null, last = null, i;
         for (i = from; i < to && !first; i++) first = idx.map[i];
         for (i = to - 1; i >= from && !last; i--) last = idx.map[i];
@@ -125,9 +172,10 @@ export const commentsSnippet = (heading) => `
             var end = n === last.node ? last.offset + 1 : n.nodeValue.length;
             if (end < n.nodeValue.length) n.splitText(end);
             var mid = start > 0 ? n.splitText(start) : n;
-            if (!mid.nodeValue.trim()) continue;
+            // Overlapping quotes: the number link of a question is not part of the text.
+            if (!mid.nodeValue.trim() || mid.parentNode.closest('sup.c4b-ref')) continue;
             var mark = document.createElement('mark');
-            mark.className = 'c4b-hl';
+            mark.className = cls;
             mark.title = title;
             mid.parentNode.insertBefore(mark, mid);
             mark.appendChild(mid);
@@ -135,6 +183,20 @@ export const commentsSnippet = (heading) => `
         }
         return marks;
     };
+    var tryIn = function (idx, quote, cls, title) {
+        var at = idx.text.indexOf(quote);
+        var marks = at < 0 ? null : wrapRange(idx, at, at + quote.length, title, cls);
+        return marks && marks.length ? marks : null;
+    };
+    // The quote is searched in its own section first: the same words may repeat on the page.
+    var locate = function (root, q, skip, cls, title) {
+        var marks = null;
+        if (q.section) {
+            var sh = findHeading(root, q.section);
+            if (sh && skip.indexOf(sh) < 0) marks = tryIn(textIndex(sectionOf(sh), skip), q.quote, cls, title);
+        }
+        return marks || tryIn(textIndex([root], skip), q.quote, cls, title);
+    };
     var flash = function (row) {
         row.scrollIntoView({ block: 'center', behavior: 'smooth' });
         row.classList.add('c4b-qflash');
@@ -168,28 +230,23 @@ export const commentsSnippet = (heading) => `
             del.type = 'button';
             del.className = 'c4b-del';
             del.textContent = '\\u00d7';
-            del.title = 'Remove this question';
+            del.title = t('removeQuestion');
             del.addEventListener('click', function (e) {
                 e.preventDefault();
                 e.stopPropagation();
                 del.disabled = true;
                 send({ page: pageFile(), number: Number(item.number) || null, text: collapse(item.text) }, 'DELETE').then(function (r) {
-                    var msg = 'Removed from ' + r.file;
+                    var msg = t('removed', { file: r.file });
                     try { sessionStorage.setItem(TOAST_KEY, msg); } catch (e) {}
                     toast(msg);
                 }, function (err) {
                     del.disabled = false;
-                    toast('Remove failed: ' + (err && err.message ? err.message : err), true);
+                    failure('removeFailed')(err);
                 });
             });
             item.cell.appendChild(del);
         };
         var skip = [h].concat(section);
-        var tryIn = function (idx, q) {
-            var at = idx.text.indexOf(q.quote);
-            var marks = at < 0 ? null : wrapRange(idx, at, at + q.quote.length, q.comment);
-            return marks && marks.length ? marks : null;
-        };
         items.forEach(function (item) {
             item.row.classList.add('c4b-qrow');
             item.row.id = item.row.id || 'c4b-q-' + item.number;
@@ -197,11 +254,7 @@ export const commentsSnippet = (heading) => `
             // Index is rebuilt per try: wrapping splits text nodes and stales the previous map.
             var q = null, marks = null;
             parseQuestions(item.text).some(function (c) {
-                if (c.section) {
-                    var sh = findHeading(root, c.section);
-                    if (sh && skip.indexOf(sh) < 0) marks = tryIn(textIndex(sectionOf(sh), skip), c);
-                }
-                marks = marks || tryIn(textIndex([root], skip), c);
+                marks = locate(root, c, skip, 'c4b-hl', c.comment);
                 q = marks ? c : null;
                 return !!marks;
             });
@@ -219,7 +272,12 @@ export const commentsSnippet = (heading) => `
             lastMark.parentNode.insertBefore(sup, lastMark.nextSibling);
         });
     };
-    var schedule = function () { setTimeout(function () { try { highlight(); } catch (e) {} }, 50); };
+    var schedule = function () {
+        setTimeout(function () {
+            try { highlight(); } catch (e) {}
+            try { highlightDraft(); } catch (e) {}
+        }, 50);
+    };
     var docsifyVm = null;
     if (window.$docsify) {
         window.$docsify.plugins = [].concat(window.$docsify.plugins || [], function (hook, vm) {
@@ -230,12 +288,24 @@ export const commentsSnippet = (heading) => `
     window.addEventListener('hashchange', function () { setTimeout(schedule, 300); });
     window.addEventListener('load', function () { setTimeout(schedule, 500); });
 
-    var btn = document.createElement('button');
-    btn.type = 'button';
-    btn.className = 'c4b-cbtn';
-    btn.textContent = 'Comment';
-    btn.hidden = true;
-    document.body.appendChild(btn);
+    var button = function (label, onClick, cls) {
+        var b = document.createElement('button');
+        b.type = 'button';
+        b.textContent = label;
+        if (cls) b.className = cls;
+        if (onClick) b.addEventListener('click', onClick);
+        return b;
+    };
+    var btns = document.createElement('div');
+    btns.className = 'c4b-cbtns';
+    btns.hidden = true;
+    var fbBtn = button(t('feedback'), null, 'c4b-fb');
+    fbBtn.title = t('feedbackTitle');
+    var qBtn = button(t('question'));
+    qBtn.title = t('questionTitle', { heading: HEADING });
+    btns.appendChild(fbBtn);
+    btns.appendChild(qBtn);
+    document.body.appendChild(btns);
     var pop = null;
 
     var selection = function () {
@@ -273,9 +343,9 @@ export const commentsSnippet = (heading) => `
     var update = function () {
         if (pop) return;
         var s = selection();
-        if (!s) { btn.hidden = true; return; }
-        btn.hidden = false;
-        place(btn, anchorRect(s.range));
+        if (!s) { btns.hidden = true; return; }
+        btns.hidden = false;
+        place(btns, anchorRect(s.range));
     };
     document.addEventListener('selectionchange', function () { setTimeout(update, 0); });
 
@@ -292,8 +362,8 @@ export const commentsSnippet = (heading) => `
         if (!p) return (window.$docsify && window.$docsify.homepage) || 'README.md';
         return /\\.md$/i.test(p) ? p : p + '.md';
     };
-    var send = function (body, method) {
-        return fetch(ENDPOINT, {
+    var send = function (body, method, url) {
+        return fetch(url || ENDPOINT, {
             method: method || 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(body)
@@ -304,75 +374,246 @@ export const commentsSnippet = (heading) => `
             });
         });
     };
+    var failure = function (key) {
+        return function (err) { toast(t(key, { error: err && err.message ? err.message : err }), true); };
+    };
+
+    // Feedback to the agent: "Delivered" only after the server handed the batch to
+    // "c4builder feedback"; the event may outrun the POST response, hence both maps.
+    var delivered = {}, pending = {};
+    var sendBatch = function (decision, comments, general) {
+        return send({ decision: decision, comments: comments, general: general }, 'POST', FEEDBACK).then(function (r) {
+            if (delivered[r.id]) return toast(t('delivered'));
+            pending[r.id] = true;
+            toast(t(r.queued ? 'queued' : 'sent'));
+        });
+    };
+    window.addEventListener('c4builder:delivered', function (e) {
+        var id = e.detail && e.detail.id;
+        delivered[id] = true;
+        if (pending[id]) { delete pending[id]; toast(t('delivered')); }
+    });
+
+    // Review draft lives in localStorage per project: it survives livereload and a closed tab;
+    // without storage it lives until the page reloads.
+    var memDraft = [];
+    var draft = function () {
+        try {
+            var v = JSON.parse(localStorage.getItem(DRAFT_KEY) || '[]');
+            return Array.isArray(v) ? v : [];
+        } catch (e) { return memDraft; }
+    };
+    var saveDraft = function (items) {
+        memDraft = items;
+        try {
+            if (items.length) localStorage.setItem(DRAFT_KEY, JSON.stringify(items));
+            else localStorage.removeItem(DRAFT_KEY);
+        } catch (e) {}
+        renderPanel();
+        highlightDraft();
+    };
+    var highlightDraft = function () {
+        var root = content();
+        if (!root) return;
+        var marks = root.querySelectorAll('mark.c4b-dhl');
+        for (var i = 0; i < marks.length; i++) {
+            var m = marks[i], parent = m.parentNode;
+            while (m.firstChild) parent.insertBefore(m.firstChild, m);
+            parent.removeChild(m);
+            parent.normalize();
+        }
+        var page = pageFile();
+        var h = findHeading(root, HEADING);
+        var skip = h ? [h].concat(sectionOf(h)) : [];
+        draft().forEach(function (it) {
+            if (it.page === page) locate(root, { quote: collapse(it.quote), section: it.section }, skip, 'c4b-dhl', it.comment);
+        });
+    };
+
+    var panel = document.createElement('div');
+    panel.className = 'c4b-review';
+    var expanded = false, busy = false;
+    var count = button('', function () { expanded = !expanded; renderPanel(); }, 'c4b-link');
+    var listen = document.createElement('small');
+    listen.className = 'c4b-listen';
+    var list = document.createElement('ul');
+    var general = document.createElement('textarea');
+    general.placeholder = t('generalPlaceholder');
+    general.hidden = true;
+    var finish = function (decision) {
+        var items = draft(), ids = items.map(function (it) { return it.id; });
+        busy = true;
+        renderPanel();
+        sendBatch(decision, items, general.hidden ? '' : general.value.trim()).then(function () {
+            general.value = '';
+            general.hidden = true;
+            expanded = false;
+            saveDraft(draft().filter(function (it) { return ids.indexOf(it.id) < 0; }));
+        }, failure('reviewFailed')).then(function () { busy = false; renderPanel(); });
+    };
+    var discard = button(t('discard'), function () {
+        var n = draft().length;
+        if (n && !window.confirm(t('discardConfirm', { n: n }))) return;
+        general.value = '';
+        general.hidden = true;
+        saveDraft([]);
+    });
+    // One finishing action, two labels: on an empty draft "Approve" does not read as "finish".
+    var approve = button('', function () { finish('approved'); });
+    var submit = button(t('submitReview'), function () {
+        if (!general.hidden) return finish('submitted');
+        general.hidden = false;
+        general.focus();
+    }, 'c4b-primary');
+    general.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') { e.preventDefault(); general.hidden = true; }
+        else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); submit.click(); }
+    });
+    var head = document.createElement('div');
+    head.className = 'c4b-row';
+    var acts = document.createElement('span');
+    acts.className = 'c4b-acts';
+    [discard, approve, submit].forEach(function (el) { acts.appendChild(el); });
+    [count, listen, acts].forEach(function (el) { head.appendChild(el); });
+    panel.appendChild(head);
+    panel.appendChild(list);
+    panel.appendChild(general);
+    document.body.appendChild(panel);
+    var renderPanel = function () {
+        panel.hidden = !AGENT.on;
+        var items = draft(), pages = {}, empty = !items.length;
+        items.forEach(function (it) { pages[it.page] = true; });
+        var n = Object.keys(pages).length;
+        count.textContent = empty
+            ? t('reviewEmpty')
+            : t('reviewCount', { comments: t('comments', { n: items.length }), pages: t('pages', { n: n }) });
+        count.disabled = empty;
+        list.textContent = '';
+        items.forEach(function (it) {
+            var li = document.createElement('li');
+            var q = collapse(it.quote);
+            li.textContent = it.page + ' \\u2014 \\u00ab' + (q.length > 60 ? q.slice(0, 59) + '\\u2026' : q) + '\\u00bb: ' + it.comment;
+            var del = button('\\u00d7', function () {
+                saveDraft(draft().filter(function (x) { return x.id !== it.id; }));
+            }, 'c4b-del');
+            del.title = t('removeFromReview');
+            li.appendChild(del);
+            list.appendChild(li);
+        });
+        list.hidden = !expanded || empty;
+        approve.textContent = t(empty ? 'done' : 'approve');
+        approve.title = t(empty ? 'doneTitle' : 'approveTitle');
+        approve.className = empty ? 'c4b-primary' : '';
+        discard.hidden = submit.hidden = empty;
+        discard.disabled = busy;
+        approve.disabled = busy;
+        submit.disabled = busy || empty;
+    };
+    var renderAgent = function () {
+        fbBtn.hidden = !AGENT.on;
+        renderPanel();
+        var text = t(AGENT.listening ? 'listening' : 'notListening');
+        var els = document.querySelectorAll('.c4b-listen');
+        for (var i = 0; i < els.length; i++) { els[i].textContent = text; els[i].title = text; }
+    };
+    window.addEventListener('c4builder:agent', function (e) {
+        var d = e.detail || {};
+        AGENT.on = !!d.on;
+        AGENT.listening = !!d.listening;
+        renderAgent();
+    });
+    window.addEventListener('storage', function (e) {
+        if (e.key === DRAFT_KEY) { renderPanel(); highlightDraft(); }
+    });
 
     var close = function () {
         if (pop) { pop.remove(); pop = null; }
-        btn.hidden = true;
+        btns.hidden = true;
     };
-    var open = function (data, rect) {
+    var open = function (data, rect, feedback) {
         close();
         pop = document.createElement('div');
         pop.className = 'c4b-cpop';
         var quote = document.createElement('blockquote');
         quote.textContent = data.quote;
         var ta = document.createElement('textarea');
-        ta.placeholder = 'Your question or comment (Ctrl+Enter to add, Esc to cancel)';
+        ta.placeholder = t(feedback ? 'feedbackPlaceholder' : 'questionPlaceholder');
         var row = document.createElement('div');
         row.className = 'c4b-row';
         var hint = document.createElement('small');
-        hint.textContent = 'To: ' + HEADING + (data.section ? ' / ' + data.section : '');
-        hint.title = hint.textContent;
+        if (feedback) hint.className = 'c4b-listen';
+        else hint.textContent = hint.title = t('questionTo', { target: HEADING + (data.section ? ' / ' + data.section : '') });
         var actions = document.createElement('span');
-        var cancel = document.createElement('button');
-        cancel.type = 'button';
-        cancel.textContent = 'Cancel';
-        var ok = document.createElement('button');
-        ok.type = 'button';
-        ok.className = 'c4b-primary';
-        ok.textContent = 'Add';
-        actions.appendChild(cancel);
-        actions.appendChild(document.createTextNode(' '));
-        actions.appendChild(ok);
+        var buttons = [button(t('cancel'), close)];
+        var run = function (action) {
+            return function () {
+                var comment = ta.value.trim();
+                if (!comment) { ta.focus(); return; }
+                buttons.forEach(function (b) { b.disabled = true; });
+                action(comment).then(close, function (err) {
+                    buttons.forEach(function (b) { b.disabled = false; });
+                    failure(feedback ? 'feedbackFailed' : 'questionFailed')(err);
+                });
+            };
+        };
+        var item = function (comment) {
+            return { page: pageFile(), quote: data.quote, section: data.section, comment: comment };
+        };
+        var primary;
+        if (feedback) {
+            var add = button(t('addToReview'), run(function (c) {
+                var it = item(c);
+                it.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
+                saveDraft(draft().concat([it]));
+                return Promise.resolve();
+            }));
+            var now = button(t('sendNow'), run(function (c) { return sendBatch('submitted', [item(c)], ''); }));
+            buttons.push(add, now);
+            // As in a GitLab merge request: once a review is started, comments go into it.
+            primary = draft().length ? add : now;
+        } else {
+            primary = button(t('addQuestion'), run(function (c) {
+                return send(item(c)).then(function (r) {
+                    var msg = t(r.number ? 'addedNumber' : 'added', { file: r.file, number: r.number });
+                    try { sessionStorage.setItem(TOAST_KEY, msg); } catch (e) {}
+                    toast(msg);
+                });
+            }));
+            buttons.push(primary);
+        }
+        primary.className = 'c4b-primary';
+        buttons.forEach(function (b) {
+            actions.appendChild(b);
+            actions.appendChild(document.createTextNode(' '));
+        });
         row.appendChild(hint);
         row.appendChild(actions);
         pop.appendChild(quote);
         pop.appendChild(ta);
         pop.appendChild(row);
         document.body.appendChild(pop);
+        renderAgent();
         place(pop, rect);
         ta.focus();
-        var submit = function () {
-            var comment = ta.value.trim();
-            if (!comment) { ta.focus(); return; }
-            ok.disabled = true;
-            cancel.disabled = true;
-            send({ page: pageFile(), quote: data.quote, section: data.section, comment: comment }).then(function (r) {
-                var msg = 'Added to ' + r.file + (r.number ? ' as #' + r.number : '');
-                try { sessionStorage.setItem(TOAST_KEY, msg); } catch (e) {}
-                close();
-                toast(msg);
-            }, function (err) {
-                ok.disabled = false;
-                cancel.disabled = false;
-                toast('Comment failed: ' + (err && err.message ? err.message : err), true);
-            });
-        };
-        ok.addEventListener('click', submit);
-        cancel.addEventListener('click', close);
         ta.addEventListener('keydown', function (e) {
             if (e.key === 'Escape') { e.preventDefault(); close(); }
-            else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); submit(); }
+            else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); primary.click(); }
         });
     };
 
-    btn.addEventListener('mousedown', function (e) { e.preventDefault(); });
-    btn.addEventListener('click', function () {
-        var s = selection();
-        if (s) open({ quote: s.text, section: headingBefore(s.range) }, anchorRect(s.range));
-    });
+    var openFor = function (feedback) {
+        return function () {
+            var s = selection();
+            if (s) open({ quote: s.text, section: headingBefore(s.range) }, anchorRect(s.range), feedback);
+        };
+    };
+    btns.addEventListener('mousedown', function (e) { e.preventDefault(); });
+    fbBtn.addEventListener('click', openFor(true));
+    qBtn.addEventListener('click', openFor(false));
     document.addEventListener('mousedown', function (e) {
-        if (pop && !pop.contains(e.target) && e.target !== btn) close();
+        if (pop && !pop.contains(e.target) && !btns.contains(e.target)) close();
     });
     window.addEventListener('hashchange', close);
+    renderAgent();
 })();
 </script>`;

package/dist/cli/commands/site.i18n.js

@@ -0,0 +1,88 @@
+// Словарь интерфейса страницы `site -w` (change site-ui-language). Единственный файл `src/`, где
+// тест cli-language разрешает кириллицу: это текст страницы в браузере, а не вывод CLI. Наборы
+// ключей en и ru совпадают (проверяет тот же тест). `{name}` подставляет скрипт страницы; строка
+// с числом — объект форм для Intl.PluralRules, число в ней — `{n}`.
+export const UI_STRINGS = {
+    en: {
+        feedback: 'Feedback',
+        feedbackTitle: 'Tell the agent what to change',
+        question: 'Question',
+        questionTitle: 'Add a question to the {heading} section of the source file',
+        removeQuestion: 'Remove this question',
+        removed: 'Removed from {file}',
+        added: 'Added to {file}',
+        addedNumber: 'Added to {file} as #{number}',
+        sent: 'Sent to the agent',
+        delivered: 'Delivered to the agent',
+        queued: 'Queued — agent is not listening',
+        reviewFailed: 'Review failed: {error}',
+        feedbackFailed: 'Feedback failed: {error}',
+        questionFailed: 'Question failed: {error}',
+        removeFailed: 'Remove failed: {error}',
+        generalPlaceholder: 'Overall comment (optional, Ctrl+Enter to submit, Esc to hide)',
+        discard: 'Discard',
+        discardConfirm: { one: 'Discard {n} pending comment?', other: 'Discard {n} pending comments?' },
+        approve: 'Approve',
+        approveTitle: 'Tell the agent there is nothing more to change (pending comments go along)',
+        done: 'Done — no changes',
+        doneTitle: 'Tell the agent there is nothing to change',
+        submitReview: 'Submit review',
+        reviewEmpty: 'Review: nothing pending',
+        reviewCount: 'Review: {comments} ({pages})',
+        comments: { one: '{n} pending', other: '{n} pending' },
+        pages: { one: '{n} page', other: '{n} pages' },
+        removeFromReview: 'Remove from the review',
+        listening: 'agent: listening ●',
+        notListening: 'agent: not listening ○',
+        feedbackPlaceholder: 'What should the agent change? (Ctrl+Enter to send, Esc to cancel)',
+        questionPlaceholder: 'Your question (Ctrl+Enter to send, Esc to cancel)',
+        questionTo: 'To: {target}',
+        cancel: 'Cancel',
+        addToReview: 'Add to review',
+        sendNow: 'Send now',
+        addQuestion: 'Add question'
+    },
+    ru: {
+        feedback: 'Замечание',
+        feedbackTitle: 'Сказать агенту, что изменить',
+        question: 'Вопрос',
+        questionTitle: 'Добавить вопрос в раздел «{heading}» исходного файла',
+        removeQuestion: 'Удалить вопрос',
+        removed: 'Удалено из {file}',
+        added: 'Добавлено в {file}',
+        addedNumber: 'Добавлено в {file} под номером {number}',
+        sent: 'Отправлено агенту',
+        delivered: 'Доставлено агенту',
+        queued: 'В очереди: агент не слушает',
+        reviewFailed: 'Не удалось отправить ревью: {error}',
+        feedbackFailed: 'Не удалось отправить замечание: {error}',
+        questionFailed: 'Не удалось добавить вопрос: {error}',
+        removeFailed: 'Не удалось удалить вопрос: {error}',
+        generalPlaceholder: 'Общий комментарий (необязательно; Ctrl+Enter — отправить, Esc — скрыть)',
+        discard: 'Очистить',
+        discardConfirm: {
+            one: 'Удалить из ревью {n} замечание?',
+            few: 'Удалить из ревью {n} замечания?',
+            many: 'Удалить из ревью {n} замечаний?'
+        },
+        approve: 'Одобрить',
+        approveTitle: 'Сообщить агенту, что правок больше нет (замечания из ревью уйдут вместе с этим)',
+        done: 'Готово, правок нет',
+        doneTitle: 'Сообщить агенту, что правок нет',
+        submitReview: 'Отправить ревью',
+        reviewEmpty: 'Ревью: замечаний нет',
+        reviewCount: 'Ревью: {comments} {pages}',
+        comments: { one: '{n} замечание', few: '{n} замечания', many: '{n} замечаний' },
+        pages: { one: 'на {n} странице', few: 'на {n} страницах', many: 'на {n} страницах' },
+        removeFromReview: 'Убрать из ревью',
+        listening: 'агент: слушает ●',
+        notListening: 'агент: не слушает ○',
+        feedbackPlaceholder: 'Что должен изменить агент? (Ctrl+Enter — отправить, Esc — отмена)',
+        questionPlaceholder: 'Ваш вопрос (Ctrl+Enter — отправить, Esc — отмена)',
+        questionTo: 'Куда: {target}',
+        cancel: 'Отмена',
+        addToReview: 'В ревью',
+        sendNow: 'Отправить',
+        addQuestion: 'Добавить вопрос'
+    }
+};