feat: the assistant's chat - the name clear of the close button, typing dots while the model starts, thinking that opens without reflow; asking before a command: «Выполнить команду на [машина]?», the command in mono, a red «Отмена»

internal/server/web/static/ui.js

@@ -9,7 +9,7 @@
     dlg = document.createElement('dialog');
     dlg.className = 'uidlg';
     dlg.innerHTML = '<form method="dialog"><p class="ui-text"></p><input class="ui-input" autocomplete="off" spellcheck="false">' +
-      '<div class="row end"><button type="button" class="btn ghost ui-no">Отмена</button><button type="submit" class="ui-yes">OK</button></div></form>';
+      '<div class="row end"><button type="button" class="btn ghost close ui-no">Отмена</button><button type="submit" class="ui-yes">OK</button></div></form>';
     document.body.appendChild(dlg);
   }
   function ask(text, o) {
@@ -20,6 +20,9 @@
     // is as wide as its words, up to the screen's room.
     const t = dlg.querySelector('.ui-text');
     t.textContent = '';
+    // "{chip}" in the text: the chip stands there, inside the sentence.
+    const parts = String(text).split('{chip}');
+    text = parts.shift();
     String(text).split(/(\s+)/).forEach(w => {
       if (w.length > 28 && !/\s/.test(w)) {
         const s = document.createElement('span');
@@ -27,10 +30,28 @@
         t.appendChild(s);
       } else t.appendChild(document.createTextNode(w));
     });
+    // Extras of a question about an action: where (a chip), the command in
+    // mono, a note under it.
+    if (parts.length && o.chip) {
+      const c = document.createElement('span'); c.className = 'ui-chip'; c.textContent = o.chip; c.title = o.chip;
+      t.append(c, parts.join(''));
+      o = Object.assign({}, o, {chip: ''});
+    }
+    dlg.querySelectorAll('.ui-extra').forEach(e => e.remove());
+    if (o.chip || o.code || o.note) {
+      const box = document.createElement('div');
+      box.className = 'ui-extra';
+      if (o.chip) { const c = document.createElement('div'); c.className = 'ui-chip'; c.textContent = o.chip; c.title = o.chip; box.appendChild(c); }
+      if (o.code) { const p = document.createElement('pre'); p.className = 'ui-code'; p.textContent = o.code; box.appendChild(p); }
+      if (o.note) { const n = document.createElement('p'); n.className = 'ui-note'; n.textContent = o.note; box.appendChild(n); }
+      t.after(box);
+    }
     input.hidden = !o.input;
     input.value = o.value || '';
     yes.textContent = o.ok || 'OK';
     yes.className = 'ui-yes' + (o.danger ? ' btn danger' : '');
+    // «Отмена» red, unless «да» is the red one (a delete): never two reds.
+    dlg.querySelector('.ui-no').classList.toggle('close', !o.danger);
     return new Promise(done => {
       const end = v => { dlg.onclose = null; done(v); };
       dlg.querySelector('.ui-no').onclick = () => dlg.close('');