Add War Room voice meeting, fix chat overlay, and ship 5 cyan UI themes.

Voice Room lets humans talk with agents via Whisper/TTS; chat typing no longer blocked by a full-screen overlay, attachments/avatars are larger, and Settings exposes five vivid mid-dark cyan/blue themes for the whole cockpit.

cockpit/static/js/agents-warroom.js

@@ -25,11 +25,30 @@ window.WarRoomHub = (function () {
       _polling: false,
       status: '',
       emojiOpen: false,
+      mentionOpen: false,
+      mentionQuery: '',
+      mentionIndex: 0,
       emojis: EMOJIS,
       pendingFiles: [],
       typing: null, // { agent_key, display_name, text }
+      callOpen: false,
+      callBusy: false,
+      callUrl: '',
+      callSlug: '',
+      voiceRecording: false,
+      voiceBusy: false,
+      speakReplies: true,
+      voiceRoomOpen: false,
+      voiceRoomAgents: ['herman'],
+      voiceSpeakingKey: '',
+      voiceLastHeard: '',
+      _voiceRec: null,
+      _voiceStream: null,
+      _voiceChunks: null,
 
       async init() {
+        this.voiceRoomOpen = false;
+        this.busy = false;
         await Promise.all([this.loadMe(), this.loadSouls(), this.loadRooms()]);
         var params = new URLSearchParams(window.location.search || '');
         var want = params.get('room');
@@ -44,6 +63,7 @@ window.WarRoomHub = (function () {
 
       destroy() {
         if (this._poll) clearInterval(this._poll);
+        if (this._continueTimer) clearTimeout(this._continueTimer);
       },
 
       async loadMe() {
@@ -123,6 +143,10 @@ window.WarRoomHub = (function () {
             this.paintAvatars();
             this.scrollLog();
           }.bind(this));
+          var last = (this.messages || [])[(this.messages || []).length - 1];
+          if (last && last.sender_type === 'agent' && this.room && this.room.kind === 'warroom') {
+            this.scheduleContinue(4000);
+          }
         } catch (e) {
           this.status = e.message || 'Laden mislukt';
         }
@@ -201,6 +225,7 @@ window.WarRoomHub = (function () {
             '/messages?limit=50&after_id=' +
             (this.lastId || 0);
           var r = await fetch(url).then(function (x) { return x.json(); });
+          this.removeDeletedIds(r.deleted_ids || []);
           if (this.mergeMessages(r.items || [])) {
             this.$nextTick(function () {
               this.paintAvatars();
@@ -228,9 +253,63 @@ window.WarRoomHub = (function () {
       },
 
       insertMention(key) {
-        this.draft = (this.draft || '') + '@' + key + ' ';
+        var d = this.draft || '';
+        var at = d.lastIndexOf('@');
+        if (at >= 0 && !/\s/.test(d.slice(at + 1))) {
+          // replace partial @query
+          this.draft = d.slice(0, at) + '@' + key + ' ';
+        } else {
+          this.draft = d + (d && !/\s$/.test(d) ? ' ' : '') + '@' + key + ' ';
+        }
+        this.mentionOpen = false;
+        this.mentionQuery = '';
+        this.mentionIndex = 0;
+        this.$nextTick(function () {
+          var el = this.$refs && this.$refs.wrInput;
+          if (el) { el.focus(); el.setSelectionRange(this.draft.length, this.draft.length); }
+        }.bind(this));
       },
 
+      mentionSuggestions() {
+        if (!this.mentionOpen) return [];
+        var q = (this.mentionQuery || '').toLowerCase();
+        return (this.souls || []).filter(function (s) {
+          if (!s || !s.agent_key) return false;
+          if (!q) return true;
+          var key = String(s.agent_key).toLowerCase();
+          var name = String(s.display_name || '').toLowerCase();
+          return key.indexOf(q) === 0 || key.indexOf(q) >= 0 || name.indexOf(q) >= 0;
+        }).slice(0, 8);
+      },
+
+      onDraftInput() {
+        var d = this.draft || '';
+        var m = /(^|\s)@([a-zA-Z0-9_-]*)$/.exec(d);
+        if (m) {
+          this.mentionOpen = true;
+          this.mentionQuery = m[2] || '';
+          this.mentionIndex = 0;
+        } else {
+          this.mentionOpen = false;
+          this.mentionQuery = '';
+        }
+      },
+
+      pickMention(s) {
+        if (!s) return;
+        this.insertMention(s.agent_key);
+      },
+
+      /** Roster: in #war-room → @tag; anders open DM */
+      selectAgent(agentKey) {
+        if (this.room && this.room.kind === 'warroom') {
+          this.insertMention(agentKey);
+          return;
+        }
+        this.openDm(agentKey);
+      },
+
+
       async onPickFiles(ev) {
         var files = Array.prototype.slice.call((ev.target && ev.target.files) || []);
         if (ev.target) ev.target.value = '';
@@ -295,6 +374,7 @@ window.WarRoomHub = (function () {
           }
           await this.consumeStream(resp);
           this.status = '';
+          this.scheduleContinue(2000);
         } catch (e) {
           this.draft = text;
           this.pendingFiles = files;
@@ -345,6 +425,8 @@ window.WarRoomHub = (function () {
           this.upsertMessage(ev.message);
           this.status = 'Agent typt…';
           this.$nextTick(function () { this.scrollLog(); }.bind(this));
+        } else if (type === 'continue_start') {
+          this.status = 'Agents praten verder over: ' + ((ev.topic || '').slice(0, 80));
         } else if (type === 'typing_start') {
           this.typing = {
             agent_key: ev.agent_key,
@@ -368,6 +450,7 @@ window.WarRoomHub = (function () {
         } else if (type === 'agent' && ev.message) {
           this.typing = null;
           this.upsertMessage(ev.message);
+          if (ev.message.content) this.speakText(ev.message.content, ev.message.agent_key);
           this.$nextTick(function () {
             this.paintAvatars();
             this.scrollLog();
@@ -385,12 +468,379 @@ window.WarRoomHub = (function () {
       },
 
       onKey(e) {
+        var sug = this.mentionSuggestions();
+        if (this.mentionOpen && sug.length) {
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.mentionIndex = (this.mentionIndex + 1) % sug.length;
+            return;
+          }
+          if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.mentionIndex = (this.mentionIndex - 1 + sug.length) % sug.length;
+            return;
+          }
+          if (e.key === 'Enter' || e.key === 'Tab') {
+            e.preventDefault();
+            this.pickMention(sug[this.mentionIndex] || sug[0]);
+            return;
+          }
+          if (e.key === 'Escape') {
+            this.mentionOpen = false;
+            return;
+          }
+        }
         if (e.key === 'Enter' && !e.shiftKey) {
           e.preventDefault();
           this.send();
         }
       },
 
+
+
+      scheduleContinue(delayMs) {
+        if (!this.autoDebate || !this.room || this.room.kind !== 'warroom') return;
+        if (this._continueTimer) clearTimeout(this._continueTimer);
+        var self = this;
+        this._continueTimer = setTimeout(function () { self.runContinue(2); }, delayMs || 2500);
+      },
+
+      async runContinue(turns) {
+        if (!this.autoDebate || !this.room || this.room.kind !== 'warroom') return;
+        if (this.busy || this._continueBusy) return;
+        // only continue if last message is from an agent (they are mid-debate)
+        var last = (this.messages || [])[(this.messages || []).length - 1];
+        if (!last || last.sender_type !== 'agent') return;
+
+        this._continueBusy = true;
+        this.status = 'Agents overleggen verder…';
+        try {
+          var resp = await fetch('/api/agents/warroom/rooms/' + this.room.id + '/continue?turns=' + (turns || 2), {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: { Accept: 'text/event-stream', 'Content-Type': 'application/json' },
+            body: '{}',
+          });
+          if (!resp.ok) throw new Error('Continue mislukt');
+          this.busy = true;
+          await this.consumeStream(resp);
+          this.busy = false;
+          this.status = '';
+          // keep the debate alive a bit while the tab is open
+          this.scheduleContinue(12000);
+        } catch (e) {
+          this.busy = false;
+          this.status = '';
+        }
+        this._continueBusy = false;
+      },
+
+      async deleteMessage(m) {
+        if (!this.room || !m || !m.id) return;
+        if (!window.confirm('Bericht verwijderen?')) return;
+        try {
+          var r = await fetch('/api/agents/warroom/rooms/' + this.room.id + '/messages/' + m.id, {
+            method: 'DELETE',
+            credentials: 'same-origin',
+          }).then(function (x) { return x.json().then(function (d) { return { ok: x.ok, d: d }; }); });
+          if (!r.ok) throw new Error((r.d && (r.d.detail || r.d.message)) || 'Verwijderen mislukt');
+          this.messages = (this.messages || []).filter(function (x) { return x.id !== m.id; });
+          if (window.Cockpit) Cockpit.toast('Bericht verwijderd', 'ok');
+        } catch (e) {
+          if (window.Cockpit) Cockpit.toast(e.message || 'Verwijderen mislukt', 'error');
+        }
+      },
+
+      removeDeletedIds(ids) {
+        if (!ids || !ids.length) return;
+        var set = {};
+        ids.forEach(function (id) { set[id] = true; });
+        this.messages = (this.messages || []).filter(function (m) { return !set[m.id]; });
+      },
+
+
+
+      openVoiceRoom() {
+        if (!this.room) {
+          if (window.Cockpit) Cockpit.toast('Geen room geladen', 'error');
+          return;
+        }
+        if (!(this.voiceRoomAgents || []).length) {
+          this.voiceRoomAgents = ['herman'];
+        }
+        this.speakReplies = true;
+        this.voiceRoomOpen = true;
+        this.callOpen = false;
+        this.status = 'Voice Room open — houd 🎤 in om te praten';
+        this._announceVoiceRoom('join');
+        if (this.micNeedsHttps()) {
+          // still open UI; mic will prompt on first PTT
+          this.status = 'Voice Room open — voor mic: gebruik HTTPS (:8643)';
+        }
+      },
+
+      closeVoiceRoom() {
+        if (this.voiceRecording) {
+          try { this.stopVoiceTalk(); } catch (e) {}
+        }
+        if (window.speechSynthesis) try { window.speechSynthesis.cancel(); } catch (e2) {}
+        this.voiceRoomOpen = false;
+        this.voiceSpeakingKey = '';
+        this._announceVoiceRoom('leave');
+        if (this.status && String(this.status).indexOf('Voice') === 0) this.status = '';
+      },
+
+      async _announceVoiceRoom(action) {
+        if (!this.room) return;
+        try {
+          await fetch('/api/agents/warroom/rooms/' + this.room.id + '/voice-room', {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ action: action || 'join', agents: this.voiceRoomAgents || [] }),
+          });
+          await this.pollNew();
+        } catch (e) { /* quiet */ }
+      },
+
+      toggleVoiceAgent(key) {
+        var list = (this.voiceRoomAgents || []).slice();
+        var i = list.indexOf(key);
+        if (i >= 0) {
+          if (list.length <= 1) return; // keep at least one
+          list.splice(i, 1);
+        } else {
+          list.push(key);
+        }
+        this.voiceRoomAgents = list;
+      },
+
+      isVoiceAgent(key) {
+        return (this.voiceRoomAgents || []).indexOf(key) >= 0;
+      },
+
+      voiceAgentSouls() {
+        var souls = (this.souls || []).slice();
+        if (!souls.length) {
+          return (this.voiceRoomAgents || ['herman']).map(function (k) {
+            return { agent_key: k, display_name: k };
+          });
+        }
+        var prefer = ['herman','retail','bizdev','halal','finance','marketing','legal'];
+        souls.sort(function (a, b) {
+          var ia = prefer.indexOf(a.agent_key); var ib = prefer.indexOf(b.agent_key);
+          if (ia < 0) ia = 99; if (ib < 0) ib = 99;
+          return ia - ib || String(a.display_name||'').localeCompare(String(b.display_name||''));
+        });
+        return souls.slice(0, 12);
+      },
+
+      secureWarroomUrl() {
+        try {
+          var u = new URL(window.location.href);
+          if (u.protocol === 'https:') {
+            if (u.pathname.indexOf('/agents') === 0 && u.search.indexOf('tab=') < 0) {
+              u.searchParams.set('tab', 'warroom');
+            }
+            return u.toString();
+          }
+          u.protocol = 'https:';
+          if (u.port === '8610' || u.port === '8600') u.port = '8643';
+          else if (!u.port || u.port === '80') u.port = '8643';
+          if (u.pathname.indexOf('/warroom/popup') >= 0) {
+            /* keep popup path */
+          } else {
+            u.pathname = '/agents';
+            u.searchParams.set('tab', 'warroom');
+          }
+          return u.toString();
+        } catch (e) {
+          return 'https://10.4.7.18:8643/agents?tab=warroom';
+        }
+      },
+
+      micNeedsHttps() {
+        return !(window.isSecureContext && navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
+      },
+
+      async ensureMic() {
+        if (!this.micNeedsHttps()) return true;
+        this.status = 'Microfoon vereist HTTPS — open veilige War Room';
+        if (window.Cockpit) {
+          Cockpit.toast('Mic werkt niet op HTTP. Open HTTPS War Room.', 'error');
+        }
+        var url = this.secureWarroomUrl();
+        var go = window.confirm('Spraak met agents werkt via HTTPS.\n\nNu openen?\n' + url);
+        if (go) window.open(url, '_blank');
+        return false;
+      },
+
+      async startVoiceTalk(ev) {
+        if (ev) { try { ev.preventDefault(); } catch (e0) {} }
+        if (this.voiceRecording || this.voiceBusy || this.busy) return;
+        if (!this.voiceRoomOpen) this.openVoiceRoom();
+        if (!(await this.ensureMic())) return;
+        try {
+          this._voiceChunks = [];
+          this._voiceStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+          var rec = new MediaRecorder(this._voiceStream);
+          this._voiceRec = rec;
+          var self = this;
+          rec.ondataavailable = function (e) {
+            if (e.data && e.data.size) self._voiceChunks.push(e.data);
+          };
+          rec.start(200);
+          this.voiceRecording = true;
+          this.status = '🎤 Luisteren… laat los om te sturen';
+        } catch (e) {
+          this.status = 'Microfoon geweigerd of niet beschikbaar';
+          if (window.Cockpit) Cockpit.toast(this.status, 'error');
+          this._stopVoiceStream();
+        }
+      },
+
+      async stopVoiceTalk(ev) {
+        if (ev) { try { ev.preventDefault(); } catch (e0) {} }
+        if (!this.voiceRecording || !this._voiceRec) return;
+        var self = this;
+        this.voiceRecording = false;
+        this.voiceBusy = true;
+        this.status = 'Spraak omzetten…';
+        await new Promise(function (resolve) {
+          self._voiceRec.onstop = function () { resolve(); };
+          try { self._voiceRec.stop(); } catch (e1) { resolve(); }
+        });
+        this._stopVoiceStream();
+        try {
+          var blob = new Blob(this._voiceChunks || [], { type: 'audio/webm' });
+          this._voiceChunks = [];
+          if (!blob.size) throw new Error('Geen audio opgenomen');
+          var fd = new FormData();
+          fd.append('file', blob, 'warroom-voice.webm');
+          var r = await fetch('/api/voice/transcribe', { method: 'POST', body: fd, credentials: 'same-origin' });
+          var j = await r.json().catch(function () { return {}; });
+          if (!r.ok) throw new Error(j.detail || j.error || 'Transcriptie mislukt');
+          var text = (j.text || '').trim();
+          if (!text) throw new Error('Geen spraak herkend — probeer opnieuw');
+          // Stuur naar War Room (agents antwoorden zoals bij typen)
+          this.voiceLastHeard = text;
+          var tags = (this.voiceRoomAgents || ['herman']).map(function (k) { return '@' + k; });
+          // Mention selected voice-room agents so they all can answer
+          var missing = tags.filter(function (t) { return text.toLowerCase().indexOf(t) < 0; });
+          if (missing.length) text = missing.join(' ') + ' ' + text;
+          this.draft = text;
+          this.status = 'Versturen naar Voice Room…';
+          if (this.voiceRoomOpen) this.voiceSpeakingKey = '';
+          await this.send();
+          this.status = this.voiceRoomOpen ? 'Voice Room — wachten op agents…' : '';
+        } catch (e) {
+          this.status = e.message || 'Voice mislukt';
+          if (window.Cockpit) Cockpit.toast(this.status, 'error');
+        }
+        this.voiceBusy = false;
+      },
+
+      _stopVoiceStream() {
+        try { if (this._voiceRec && this._voiceRec.state !== 'inactive') this._voiceRec.stop(); } catch (e) {}
+        this._voiceRec = null;
+        if (this._voiceStream) {
+          try { this._voiceStream.getTracks().forEach(function (t) { t.stop(); }); } catch (e2) {}
+        }
+        this._voiceStream = null;
+      },
+
+      speakText(text, agentKey) {
+        if (!this.speakReplies || !text || !window.speechSynthesis) return;
+        try {
+          window.speechSynthesis.cancel();
+          var self = this;
+          this.voiceSpeakingKey = agentKey || 'agent';
+          var u = new SpeechSynthesisUtterance(String(text).slice(0, 900));
+          u.lang = 'nl-NL';
+          u.rate = 1.02;
+          var voices = window.speechSynthesis.getVoices() || [];
+          var nl = voices.find(function (v) { return /nl/i.test(v.lang) && /google|microsoft|maarten|xander|neder/i.test(v.name); })
+            || voices.find(function (v) { return /nl/i.test(v.lang); });
+          if (nl) u.voice = nl;
+          u.onend = function () {
+            if (self.voiceSpeakingKey === (agentKey || 'agent')) self.voiceSpeakingKey = '';
+            if (self.voiceRoomOpen) self.status = 'Voice Room — jouw beurt (houd 🎤 in)';
+          };
+          window.speechSynthesis.speak(u);
+          if (this.voiceRoomOpen) {
+            this.status = (agentKey || 'Agent') + ' spreekt…';
+          }
+        } catch (e) { /* ignore */ }
+      },
+
+
+      callHref() {
+        var id = (this.room && this.room.id) ? this.room.id : 1;
+        var slug = 'FoodlinkkWR' + id;
+        if (this.room && this.room.kind === 'dm' && this.room.agent_key) {
+          slug = 'FoodlinkkDM' + this.room.agent_key + id;
+        }
+        return 'https://meet.ffmuc.net/' + slug;
+      },
+
+      onCallClick() {
+        // Runs in the same user-gesture as the <a> navigation — always show panel.
+        var url = this.callHref();
+        this.callUrl = url;
+        this.callSlug = url.split('/').pop();
+        this.callOpen = true;
+        this.status = 'Call open — nieuw tabblad of klik Deelnemen';
+        this.announceCall(url);
+      },
+
+      async announceCall(url) {
+        if (!this.room || this.callBusy) return;
+        this.callBusy = true;
+        try {
+          var r = await fetch('/api/agents/warroom/rooms/' + this.room.id + '/call', {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: { 'Content-Type': 'application/json' },
+            body: '{}',
+          }).then(function (x) { return x.json().then(function (d) { return { ok: x.ok, d: d }; }); });
+          if (r.ok && r.d && r.d.url) {
+            this.callUrl = r.d.url;
+            this.callSlug = r.d.slug || this.callSlug;
+          }
+          await this.pollNew();
+        } catch (e) {
+          /* panel + tab already useful without announce */
+        }
+        this.callBusy = false;
+      },
+
+      async startCall() {
+        // Fallback if something still calls startCall()
+        this.onCallClick();
+        var url = this.callUrl || this.callHref();
+        window.open(url, '_blank');
+      },
+
+      closeCall() {
+        this.callOpen = false;
+        if (this.status && String(this.status).indexOf('Call') === 0) this.status = '';
+      },
+
+      openCallExternal() {
+        var url = this.callUrl || this.callHref();
+        window.open(url, '_blank');
+      },
+
+      async copyCallLink() {
+        var link = (this.callUrl || this.callHref()).split('#')[0];
+        try {
+          await navigator.clipboard.writeText(link);
+          if (window.Cockpit) Cockpit.toast('Link gekopieerd', 'ok');
+        } catch (e) {
+          window.prompt('Kopieer deze call-link:', link);
+        }
+      },
+
       popOut() {
         var q = this.room ? '?room=' + this.room.id : '';
         openPopup(q);
@@ -414,13 +864,16 @@ window.WarRoomHub = (function () {
   return { openPopup: openPopup, controller: warRoomController };
 })();
 
-document.addEventListener('alpine:init', function () {
-  if (window.Alpine && Alpine.data) {
-    Alpine.data('warRoomHub', function () {
-      return WarRoomHub.controller({ popupMode: false });
-    });
-    Alpine.data('warRoomPopup', function () {
-      return WarRoomHub.controller({ popupMode: true });
-    });
-  }
-});
+function __flkRegisterWarRoomAlpine() {
+  if (!window.Alpine || typeof Alpine.data !== 'function') return;
+  if (Alpine.__flkWarRoomRegistered) return;
+  Alpine.data('warRoomHub', function () {
+    return WarRoomHub.controller({ popupMode: false });
+  });
+  Alpine.data('warRoomPopup', function () {
+    return WarRoomHub.controller({ popupMode: true });
+  });
+  Alpine.__flkWarRoomRegistered = true;
+}
+document.addEventListener('alpine:init', __flkRegisterWarRoomAlpine);
+__flkRegisterWarRoomAlpine();