{% extends "base.html" %}
{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<link rel="stylesheet" href="/static/css/hermes.css" />
<link rel="stylesheet" href="/static/css/herman-dashboard.css?v=13" />
<link rel="stylesheet" href="/static/css/agents-mesh.css?v=8" />
<link rel="stylesheet" href="/static/css/agent-characters.css?v=4" />
<link rel="stylesheet" href="/static/css/agents-warroom.css?v=18" />
<script src="/static/js/agent-avatars.js?v=4"></script>
{% endblock %}
{% block content %}
<div class="hm-neo" x-data="agentsSoulHub()" x-init="init()">
  <header class="hm-neo-header page-header" x-show="tab!=='warroom'" x-cloak>
    <h1>Agents · Soul Registry</h1>
    <p class="hm-sub">Animated team · duidelijke rollen · soul.md · live activiteit</p>
  </header>
  <header class="hm-neo-header page-header wr-page-header" x-show="tab==='warroom'" x-cloak>
    <h1>War Room</h1>
    <p class="hm-sub">Teamchat · @mentions · 1:1 DM · pop-out voor tweede scherm</p>
  </header>

  <div id="viz-toolbar" class="viz-toolbar" x-show="tab!=='warroom'" x-cloak></div>
  <div class="hm-chart-panel page-viz-panel viz-mode-chart agents-viz-compact" style="margin-bottom:1rem"
    x-show="tab!=='warroom'" x-cloak>
    <div class="hm-chart-head"><h4>Agent activiteit (events)</h4><small>5 visualisatie-modi</small></div>
    <div class="page-viz-body">
      <div class="hm-chart-wrap page-viz-canvas"><canvas id="chart-agents-viz"></canvas></div>
      <div id="viz-agents-alt" class="viz-alt"></div>
    </div>
  </div>

  <div class="vtabs-layout" style="--vt-color:#ffd700" x-ref="vtabsWrap">
    <nav class="vtabs-nav" x-ref="vtabsNav" :style="'--vt-indicator-top:'+tabIndicatorTop+'px;--vt-indicator-h:'+tabIndicatorH+'px'">
      <div class="vtabs-nav-header"><strong>Agents</strong></div>
      <button class="vtab-btn" :class="{active: tab==='souls'}" @click="setTab('souls', $el)">
        <span class="vtab-icon">🧬</span><span>Souls</span>
      </button>
      <button class="vtab-btn" :class="{active: tab==='mesh'}" @click="setTab('mesh', $el)">
        <span class="vtab-icon">🕸️</span><span>Netwerk</span>
      </button>
      <button class="vtab-btn" :class="{active: tab==='terminals'}" @click="setTab('terminals', $el)" data-tab="terminals">
        <span class="vtab-icon">🖥️</span><span>Terminals</span>
      </button>
      <button class="vtab-btn" :class="{active: tab==='approvals'}" @click="setTab('approvals', $el)">
        <span class="vtab-icon">✓</span><span>Goedkeuringen</span>
        <span class="vtab-badge" x-show="pendingCount" x-text="pendingCount"></span>
      </button>
      <button class="vtab-btn" :class="{active: tab==='warroom'}" @click="setTab('warroom', $el)" data-tab="warroom">
        <span class="vtab-icon">⚔️</span><span>War Room</span>
      </button>
    </nav>

    <div class="vtabs-content">
      <section x-show="tab==='souls'" x-cloak>
        <div class="hm-neo-kpi-row" style="grid-template-columns:repeat(4,1fr)">
          <div class="hm-neo-kpi"><div class="hm-neo-kpi-top"><div class="hm-neo-ring" style="--ring-color:#00e5ff;--ring-pct:80%"><div class="hm-neo-ring-inner">🤖</div></div><div><div class="hm-neo-kpi-label">Agents</div><div class="hm-neo-kpi-sub">geregistreerd</div></div></div><div class="hm-neo-kpi-value" x-text="souls.length">0</div><div class="hm-eq"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></div>
          <div class="hm-neo-kpi"><div class="hm-neo-kpi-top"><div class="hm-neo-ring" style="--ring-color:#b8ff3c;--ring-pct:70%"><div class="hm-neo-ring-inner">⚡</div></div><div><div class="hm-neo-kpi-label">Events</div><div class="hm-neo-kpi-sub">totaal gelogd</div></div></div><div class="hm-neo-kpi-value" x-text="totalEvents">0</div><div class="hm-eq"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></div>
          <div class="hm-neo-kpi"><div class="hm-neo-kpi-top"><div class="hm-neo-ring" style="--ring-color:#ff9f43;--ring-pct:50%"><div class="hm-neo-ring-inner">✓</div></div><div><div class="hm-neo-kpi-label">Aan het werk</div><div class="hm-neo-kpi-sub" x-text="idleCount + ' idle · ' + offlineCount + ' offline'">live status</div></div></div><div class="hm-neo-kpi-value" x-text="activeCount">0</div><div class="hm-eq"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></div>
          <div class="hm-neo-kpi"><div class="hm-neo-kpi-top"><div class="hm-neo-ring" style="--ring-color:#ffd700;--ring-pct:90%"><div class="hm-neo-ring-inner">👑</div></div><div><div class="hm-neo-kpi-label">Herman</div><div class="hm-neo-kpi-sub">Co-CEO · takenverdeler</div></div></div><div class="hm-neo-kpi-value" style="font-size:1.1rem">Co-CEO</div><div class="hm-eq"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></div>
        </div>

        <div class="agents-neo-grid">
          <template x-for="s in souls" :key="s.agent_key">
            <article class="agent-soul-card" :class="{ selected: selected?.agent_key === s.agent_key, 'is-working': isWorking(s) && !isBusy(s), 'is-busy': isBusy(s) }" @click="select(s.agent_key)">
              <div class="agent-char-wrap" :class="s.agent_key"
                :data-agent-avatar="s.agent_key"
                :data-agent-color="s.avatar_color || '#1e3a5f'"
                x-init="$nextTick(() => window.AgentAvatars && AgentAvatars.paint($el, s.agent_key, s.avatar_color))"></div>
              <strong>
                <span x-text="s.display_name"></span>
                <span class="agent-activity-eq" x-show="isWorking(s) || isBusy(s)" aria-hidden="true"><span></span><span></span><span></span><span></span></span>
              </strong>
              <div class="hm-neo-kpi-sub" x-text="s.role_title"></div>
              <span class="agent-status-pill" :class="statusClass(s)">
                <span class="dot"></span>
                <span x-text="statusLabel(s)"></span>
              </span>
              <p class="agent-current-task" x-text="s.current_task || 'Wacht op taak…'"></p>
              <p class="agent-role-desc" x-text="s.responsibilities || '—'"></p>
              <div class="agent-meta-row">
                <button type="button" class="agent-events-link"
                  @click.stop="goTerminal(s.agent_key)"
                  title="Open live terminal">Terminal →</button>
                <button type="button" class="agent-events-link"
                  @click.stop="openEvents(s.agent_key, s.display_name)"
                  x-text="(s.event_count||0) + ' events'"
                  :title="'Bekijk wat ' + s.display_name + ' heeft gedaan'"></button>
                <span class="agent-tag" x-text="s.agent_key"></span>
              </div>
            </article>
          </template>
        </div>

        <div class="agent-soul-editor" x-show="selected" x-cloak>
          <div class="agent-editor-header">
            <div class="agent-char-wrap large" :class="selected?.agent_key"
              :data-agent-avatar="selected?.agent_key"
              :data-agent-color="selected?.avatar_color || '#1e3a5f'"
              x-effect="selected && $nextTick(() => window.AgentAvatars && AgentAvatars.paint($el, selected.agent_key, selected.avatar_color))"></div>
            <div style="flex:1">
              <h2><span x-text="selected?.display_name"></span> — <span x-text="selected?.role_title"></span></h2>
              <p style="margin:0.25rem 0 0;color:#94a3b8;font-size:0.85rem" x-text="selected?.responsibilities"></p>
            </div>
            <div style="display:flex;gap:0.5rem;flex-shrink:0">
              <button class="btn btn-pulse-green" @click="save()" :disabled="saving">Opslaan</button>
              <a href="/settings?tab=permissions" class="btn btn-pulse-purple">Herman rechten →</a>
            </div>
          </div>
          <label>Rol titel<input class="form-input" x-model="form.role_title"></label>
          <label>Functie & werkzaamheden<textarea class="form-input" rows="3" x-model="form.responsibilities"></textarea></label>
          <label>Soul.md (karakter, tone of voice, regels)<textarea x-model="form.soul_md"></textarea></label>
          <div style="display:flex;justify-content:space-between;align-items:center;margin-top:1rem">
            <h3 style="font-size:0.75rem;text-transform:uppercase;color:#64748b;margin:0">Recente activiteit</h3>
            <button type="button" class="agent-events-link" x-show="selected" @click="openEvents(selected.agent_key, selected.display_name)">Alle events →</button>
          </div>
          <template x-for="ev in (selected?.recent_events||[])" :key="ev.id">
            <button type="button" class="hub-feed-item agent-event-clickable" @click="openEvents(selected.agent_key, selected.display_name, ev.id)">
              <span class="agent-event-time" x-text="formatEventTime(ev.created_at)"></span>
              <span class="agent-event-title" x-text="ev.title||ev.event_type"></span>
              <span class="badge badge-sm" x-text="ev.status||'—'"></span>
            </button>
          </template>
          <p x-show="!(selected?.recent_events||[]).length" class="muted">Nog geen events voor deze agent.</p>
        </div>
      </section>

      <section x-show="tab==='mesh'" x-cloak
        x-effect="if (tab === 'mesh') { $nextTick(() => mountMesh()) }">
        <div class="panel">
          <div class="mesh-framework-head">
            <h2 style="margin-top:0;">Agent Communicatie Framework</h2>
            <p class="page-tip" style="margin-top:.25rem;">Kies hoe je het netwerk wilt zien. Klik een agent → live terminal. Alle terminals onder tab <strong>Terminals</strong>.</p>
          </div>

          <div class="mesh-mode-section" id="mesh-mode-picker">
            <label>Communicatiestijl</label>
            <div class="mesh-mode-grid">
              <button type="button" class="mesh-mode-card" data-mesh-mode="pyramid" aria-pressed="false"
                onclick="window.AgentsMesh&&AgentsMesh.pickMode('pyramid')">
                <span class="mesh-mode-check" aria-hidden="true"></span>
                <span class="mesh-mode-icon">◆</span>
                <span class="mesh-mode-title">Piramide</span>
                <span class="mesh-mode-sub">Herman als hub</span>
                <span class="mesh-mode-desc">Rapport ↑ en delegatie ↓. Alleen live handoffs.</span>
              </button>
              <button type="button" class="mesh-mode-card" data-mesh-mode="mesh" aria-pressed="false"
                onclick="window.AgentsMesh&&AgentsMesh.pickMode('mesh')">
                <span class="mesh-mode-check" aria-hidden="true"></span>
                <span class="mesh-mode-icon">⬡</span>
                <span class="mesh-mode-title">Vol netwerk</span>
                <span class="mesh-mode-sub">Alle partners</span>
                <span class="mesh-mode-desc">Volledige samenwerkingsmatrix zichtbaar.</span>
              </button>
              <button type="button" class="mesh-mode-card" data-mesh-mode="org" aria-pressed="false"
                onclick="window.AgentsMesh&&AgentsMesh.pickMode('org')">
                <span class="mesh-mode-check" aria-hidden="true"></span>
                <span class="mesh-mode-icon">▤</span>
                <span class="mesh-mode-title">Organigram</span>
                <span class="mesh-mode-sub">Pure hiërarchie</span>
                <span class="mesh-mode-desc">CEO → Herman → agents, geen peer-lijnen.</span>
              </button>
              <button type="button" class="mesh-mode-card" data-mesh-mode="pulse" aria-pressed="false"
                onclick="window.AgentsMesh&&AgentsMesh.pickMode('pulse')">
                <span class="mesh-mode-check" aria-hidden="true"></span>
                <span class="mesh-mode-icon">◎</span>
                <span class="mesh-mode-title">Live stream</span>
                <span class="mesh-mode-sub">Alleen actief</span>
                <span class="mesh-mode-desc">Geen stille lijnen — alleen wat nu beweegt.</span>
              </button>
              <button type="button" class="mesh-mode-card" data-mesh-mode="clusters" aria-pressed="false"
                onclick="window.AgentsMesh&&AgentsMesh.pickMode('clusters')">
                <span class="mesh-mode-check" aria-hidden="true"></span>
                <span class="mesh-mode-icon">◉</span>
                <span class="mesh-mode-title">Domeinen</span>
                <span class="mesh-mode-sub">Per afdeling</span>
                <span class="mesh-mode-desc">Groei · Product · Operatie gegroepeerd.</span>
              </button>
            </div>
          </div>

          <div class="mesh-toolbar">
            <span id="mesh-mode-badge" class="mesh-mode-badge">Piramide</span>
            <button type="button" class="btn btn-sm" @click="remountMesh()">↻ Verversen</button>
            <button type="button" class="btn btn-sm btn-pulse" @click="setTab('terminals', $refs.vtabsNav?.querySelector('[data-tab=terminals]'))">Alle terminals</button>
          </div>
          <div class="mesh-wrap">
            <svg id="agents-mesh-canvas" class="mesh-svg" viewBox="0 0 1200 860"></svg>
          </div>
          <div class="mesh-legend">
            <span class="leg-report">↑ Rapport</span>
            <span class="leg-delegate">↓ Delegatie</span>
            <span class="leg-peer" x-show="meshLegendPeer">↔ Handoff</span>
            <span class="leg-exec" x-show="meshLegendExec">⇅ Executive</span>
          </div>
          <div class="mesh-terminal-focus" x-show="focusTerminalKey" x-cloak>
            <div class="agent-term-head">
              <span class="term-dot"></span>
              <strong x-text="'Terminal · ' + (focusTerminalName || '')"></strong>
              <button type="button" class="btn btn-sm" @click="clearFocusTerminal()">Sluiten</button>
            </div>
            <div class="agent-term-body" :data-term-key="focusTerminalKey" data-term-focus="1"></div>
          </div>
        </div>
      </section>

      <section x-show="tab==='terminals'" x-cloak>
        <div class="panel">
          <h2 style="margin-top:0;">Agent terminals</h2>
          <p class="agents-terminals-intro">Elke agent heeft een eigen terminal. Typ commando's en druk <kbd>Enter</kbd> — output verschijnt live. Start met <code>help</code>.</p>
          <div class="agents-terminals-grid">
            <template x-for="s in souls" :key="'term-' + s.agent_key">
              <article class="agent-term-window"
                :class="{ 'is-live': (s.events_6h||0) > 0 || s.current_task, 'is-expanded': expandedTerminal === s.agent_key }"
                @click="expandTerminal(s.agent_key)">
                <header class="agent-term-head">
                  <span class="term-dot"></span>
                  <strong x-text="s.display_name"></strong>
                  <small x-text="s.current_task || s.last_event_title || 'Standby'"></small>
                </header>
                <div class="agent-term-body" :data-term-key="s.agent_key"></div>
                <footer class="agent-term-foot" @click.stop>
                  <label class="agent-term-cmd" :for="'term-in-' + s.agent_key">
                    <span class="term-prompt" x-text="s.agent_key + '>'"></span>
                    <input type="text"
                      :id="'term-in-' + s.agent_key"
                      class="agent-term-input"
                      :data-term-input="s.agent_key"
                      :placeholder="s.agent_key === 'herman' ? 'briefing · vraag aan Herman…' : (s.agent_key === 'webbuilder' ? 'build <opdracht> · projects · status …' : 'help · status · handoff …')"
                      autocomplete="off"
                      spellcheck="false" />
                  </label>
                </footer>
              </article>
            </template>
          </div>
        </div>
      </section>

      <section x-show="tab==='approvals'" x-cloak x-data="approvalsPanel()" x-init="load()">
        <div class="panel">
          <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;margin-bottom:1rem">
            <div>
              <h2 style="margin:0;">Approval queue</h2>
              <p class="page-tip">Agents dienen queries in → jij keurt goed → pas daarna mag de actie uitgevoerd worden.</p>
            </div>
            <button class="btn btn-sm btn-pulse" @click="load()">↻ Verversen</button>
          </div>
          <table class="data-table">
            <thead><tr><th>#</th><th>Agent</th><th>Actie</th><th>Titel</th><th>Status</th><th>Tijd</th><th></th></tr></thead>
            <tbody>
              <template x-for="r in items" :key="r.id">
                <tr>
                  <td x-text="r.id"></td>
                  <td x-text="r.agent_key"></td>
                  <td x-text="r.action_type"></td>
                  <td x-text="r.title"></td>
                  <td><span class="badge" :class="r.status==='pending'?'badge-warn':'badge-positive'" x-text="r.status"></span></td>
                  <td x-text="(r.created_at||'').substring(0,16).replace('T',' ')"></td>
                  <td>
                    <template x-if="r.status==='pending'">
                      <span>
                        <button class="btn btn-sm btn-approve" @click="approve(r.id)">✓</button>
                        <button class="btn btn-sm btn-reject" @click="reject(r.id)">✗</button>
                      </span>
                    </template>
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
          <p x-show="!items.length" class="muted">Geen approval requests.</p>
        </div>
      </section>

      <section x-show="tab==='warroom'" x-cloak>
        <div x-data="warRoomHub()" x-init="init()" class="wr-hub-root">
        <div class="panel" style="padding:0.75rem">
          <div class="wr-layout">
            <aside class="wr-roster">
              <h3>Kanalen</h3>
              <button type="button" class="wr-room-btn" :class="{active: room && room.kind==='warroom'}" @click="openWarroom()">
                <span>⚔️</span><strong>#war-room</strong>
              </button>
              <h3 style="margin-top:0.85rem">Agents</h3>
              <template x-for="s in souls" :key="'wr-'+s.agent_key">
                <button type="button" class="wr-agent-btn"
                  :class="{active: room && room.kind==='dm' && room.agent_key===s.agent_key}"
                  @click="selectAgent(s.agent_key)"
                  @dblclick.prevent="openDm(s.agent_key)"
                  title="Klik = @tag in War Room · dubbelklik = DM">
                  <div class="agent-char-wrap"
                    :data-agent-avatar="s.agent_key"
                    :data-agent-color="s.avatar_color || '#1e3a5f'"
                    x-init="$nextTick(() => window.AgentAvatars && AgentAvatars.paint($el, s.agent_key, s.avatar_color))"></div>
                  <div class="wr-agent-meta">
                    <strong x-text="s.display_name"></strong>
                    <small x-text="'@'+s.agent_key"></small>
                  </div>
                </button>
              </template>
            </aside>
            <div class="wr-main">
              <div class="wr-head">
                <div>
                  <h2 x-text="room ? (room.title || ('#'+room.kind)) : 'War Room'"></h2>
                  <small class="muted" x-show="status" x-text="status"></small>
                </div>
                <div class="wr-head-actions">
                  <label class="btn btn-sm" style="display:inline-flex;align-items:center;gap:0.3rem;cursor:pointer;margin:0" title="Agents praten onderling door"><input type="checkbox" x-model="autoDebate" @change="autoDebate && scheduleContinue(1500)" style="margin:0" /> A2A</label>
                  <button type="button" class="btn btn-sm btn-pulse" @click="openVoiceRoom()" :disabled="!room" title="Spraakmeeting met agents">🎙️ Voice Room</button><button type="button" class="btn btn-sm" :class="{'is-recording': voiceRecording}" @mousedown.prevent="startVoiceTalk($event)" @mouseup.prevent="stopVoiceTalk($event)" @touchstart.prevent="startVoiceTalk($event)" @touchend.prevent="stopVoiceTalk($event)" :disabled="voiceBusy || busy || !room" title="Snel praten">🎤</button>
                  <button type="button" class="btn btn-sm" @click="popOut()" title="Open op tweede scherm">Pop-out ↗</button>
                  <button type="button" class="btn btn-sm" @click="room && openRoom(room.id)" :disabled="busy">↻</button>
                </div>
              </div>
              <div class="wr-log" x-ref="wrLog">
                <p class="wr-empty" x-show="!messages.length && !typing">Nog geen berichten — tag agents met @marketing of deel een bestand.</p>
                <template x-for="m in messages" :key="m.id">
                  <div class="wr-bubble"
                    :class="{'is-user': m.sender_type==='user', 'is-agent': m.sender_type==='agent', 'is-system': m.sender_type==='system'}">
                    <div class="wr-avatar" x-show="m.sender_type!=='system'">
                      <template x-if="m.sender_type==='agent'">
                        <div class="agent-char-wrap"
                          :data-agent-avatar="m.agent_key"
                          data-agent-color="#1e3a5f"
                          x-init="$nextTick(() => window.AgentAvatars && AgentAvatars.paint($el, m.agent_key))"></div>
                      </template>
                      <template x-if="m.sender_type==='user' && (m.sender_avatar_url || me.avatar_url)">
                        <img :src="m.sender_avatar_url || me.avatar_url" alt="" />
                      </template>
                      <template x-if="m.sender_type==='user' && !(m.sender_avatar_url || me.avatar_url)">
                        <span class="wr-avatar-fallback" x-text="(m.username||me.username||'?').slice(0,2).toUpperCase()"></span>
                      </template>
                    </div>
                    <div class="wr-bubble-body">
                      <div class="wr-bubble-meta">
                        <span x-text="labelForMessage(m)"></span>
                        <span x-show="m.agent_key" x-text="' · @'+m.agent_key"></span>
                        <button type="button" class="wr-msg-del" title="Verwijderen"
                          @click.stop="deleteMessage(m)">🗑</button>
                      </div>
                      <div class="wr-bubble-text" x-text="m.content"></div>
                      <div class="wr-attach-list" x-show="attachmentsOf(m).length">
                        <template x-for="(a, ai) in attachmentsOf(m)" :key="m.id+'-a-'+ai">
                          <a class="wr-attach-card" :href="a.url" target="_blank" rel="noopener">
                            <img x-show="isImage(a)" :src="a.url" :alt="a.name" />
                            <span x-text="a.name"></span>
                          </a>
                        </template>
                      </div>
                    </div>
                  </div>
                </template>
                <div class="wr-bubble is-agent is-typing" x-show="typing" x-cloak>
                  <div class="wr-avatar">
                    <div class="agent-char-wrap"
                      :data-agent-avatar="typing && typing.agent_key"
                      x-effect="if (typing && window.AgentAvatars) AgentAvatars.paint($el, typing.agent_key)"></div>
                  </div>
                  <div class="wr-bubble-body">
                    <div class="wr-bubble-meta">
                      <span x-text="(typing && typing.display_name) || 'Agent'"></span>
                      <span> · typt</span>
                    </div>
                    <div class="wr-bubble-text wr-typing-cursor" x-text="(typing && typing.text) || '…'"></div>
                  </div>
                </div>
              </div>
              <div class="wr-composer">
                <div class="wr-composer-tools">
                  <button type="button" class="btn btn-sm" :class="{'is-recording': voiceRecording}" @mousedown.prevent="startVoiceTalk($event)" @mouseup.prevent="stopVoiceTalk($event)" @touchstart.prevent="startVoiceTalk($event)" @touchend.prevent="stopVoiceTalk($event)" :disabled="voiceBusy || busy" title="Houd in om te praten">🎤</button>
                  <button type="button" class="btn btn-sm" @click="emojiOpen=!emojiOpen" :disabled="busy">😊</button>
                  <label class="btn btn-sm" style="cursor:pointer;margin:0">
                    📎
                    <input type="file" hidden multiple @change="onPickFiles($event)"
                      accept=".png,.jpg,.jpeg,.gif,.webp,.pdf,.txt,.csv,.xlsx,.xls,.doc,.docx,.zip,.json,.md,image/*" />
                  </label>
                  <div class="wr-emoji-pop" x-show="emojiOpen" @click.outside="emojiOpen=false" x-cloak>
                    <template x-for="em in emojis" :key="em">
                      <button type="button" @click="insertEmoji(em)" x-text="em"></button>
                    </template>
                  </div>
                </div>
                <div class="wr-pending" x-show="pendingFiles.length">
                  <template x-for="(f, fi) in pendingFiles" :key="f.url">
                    <span class="wr-pending-chip">
                      <span x-text="f.name"></span>
                      <button type="button" @click="removePending(fi)" title="Verwijderen">×</button>
                    </span>
                  </template>
                </div>
                <div class="wr-composer-wrap">
                  <div class="wr-mention-pop" x-show="mentionOpen && mentionSuggestions().length" x-cloak>
                    <template x-for="(s, si) in mentionSuggestions()" :key="'m-'+s.agent_key">
                      <button type="button" class="wr-mention-item"
                        :class="{active: si===mentionIndex}"
                        @mousedown.prevent="pickMention(s)">
                        <strong x-text="s.display_name"></strong>
                        <small x-text="'@'+s.agent_key"></small>
                      </button>
                    </template>
                  </div>
                  <textarea class="form-input" rows="2" x-ref="wrInput" x-model="draft"
                    @input="onDraftInput()" @keydown="onKey($event)"
                    placeholder="Typ @bizdev of @finance… agent antwoordt hier in de War Room"
                    :disabled="!room"></textarea>
                </div>
                <button type="button" class="btn btn-pulse-green" @click="send()" :disabled="!canSend()">Stuur</button>
              </div>


              <div class="wr-voice-overlay" :class="{ 'is-open': voiceRoomOpen }" x-show="voiceRoomOpen" x-cloak @keydown.escape.window="closeVoiceRoom()">
                <div class="wr-voice-panel" @click.stop>
                  <div class="wr-voice-head">
                    <div>
                      <h3>🎙️ Foodlinkk Voice Room</h3>
                      <small class="muted">Jij + agents in één gesprek (spraak)</small>
                    </div>
                    <div class="wr-voice-head-actions">
                      <label class="btn btn-sm" style="display:inline-flex;align-items:center;gap:0.25rem;margin:0;cursor:pointer">
                        <input type="checkbox" x-model="speakReplies" style="margin:0" /> 🔊 Voorlezen
                      </label>
                      <button type="button" class="btn btn-sm btn-pulse" @click="closeVoiceRoom()">Sluiten</button>
                    </div>
                  </div>

                  <div class="wr-voice-status" x-text="status || (voiceRecording ? 'Luisteren…' : (voiceSpeakingKey ? (voiceSpeakingKey + ' spreekt…') : 'Houd de microfoon in om te praten'))"></div>

                  <div class="wr-voice-grid">
                    <div class="wr-voice-card is-human" :class="{'is-live': voiceRecording}">
                      <div class="wr-voice-avatar wr-voice-avatar-human" x-text="(me.username||'Jij').slice(0,2).toUpperCase()"></div>
                      <strong x-text="me.username || 'Jij'"></strong>
                      <small x-show="voiceRecording">🎤 aan het woord</small>
                      <small x-show="!voiceRecording" class="muted">mens</small>
                    </div>
                    <template x-for="s in voiceAgentSouls()" :key="'vr-'+s.agent_key">
                      <div class="wr-voice-card is-agent"
                        :class="{'is-live': voiceSpeakingKey===s.agent_key, 'is-off': !isVoiceAgent(s.agent_key)}"
                        @click="toggleVoiceAgent(s.agent_key)"
                        :title="isVoiceAgent(s.agent_key) ? 'Klik = uit meeting' : 'Klik = in meeting'">
                        <div class="wr-voice-avatar agent-char-wrap"
                          :data-agent-avatar="s.agent_key"
                          x-init="$nextTick(() => window.AgentAvatars && AgentAvatars.paint($el, s.agent_key))"></div>
                        <strong x-text="s.display_name || s.agent_key"></strong>
                        <small x-show="voiceSpeakingKey===s.agent_key">🔊 spreekt</small>
                        <small x-show="voiceSpeakingKey!==s.agent_key" class="muted" x-text="isVoiceAgent(s.agent_key) ? ('@'+s.agent_key) : 'niet in meeting'"></small>
                      </div>
                    </template>
                  </div>

                  <p class="wr-voice-hint" x-show="voiceLastHeard">Laatst gehoord: <span x-text="voiceLastHeard"></span></p>

                  <div class="wr-voice-ptt">
                    <button type="button" class="wr-ptt-btn"
                      :class="{'is-recording': voiceRecording, 'is-busy': voiceBusy}"
                      @mousedown.prevent="startVoiceTalk($event)" @mouseup.prevent="stopVoiceTalk($event)"
                      @touchstart.prevent="startVoiceTalk($event)" @touchend.prevent="stopVoiceTalk($event)"
                      @mouseleave="voiceRecording && stopVoiceTalk($event)"
                      :disabled="voiceBusy || busy">
                      <span x-show="!voiceRecording && !voiceBusy">🎤 Ingedrukt houden</span>
                      <span x-show="voiceRecording">● Luisteren… laat los</span>
                      <span x-show="voiceBusy && !voiceRecording">⏳ Bezig…</span>
                    </button>
                  </div>

                  <div class="wr-voice-foot">
                    <span class="muted">Klik agents om ze in/uit de meeting te zetten. Standaard praat @herman; 🔊 leest antwoorden voor.</span>
                    <a class="btn btn-sm" href="https://meet.ffmuc.net/FoodlinkkWR1" :href="callHref()" target="_blank" rel="noopener">Alleen-mensen video ↗</a>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
        </div>
      </section>
    </div>
  </div>

  <div class="agent-events-backdrop" x-show="eventsOpen" x-cloak @click="closeEvents()"></div>
  <aside class="agent-events-drawer" :class="{ open: eventsOpen }" x-cloak>
    <header class="agent-events-head">
      <div>
        <h3 x-text="eventsAgentName || 'Agent'"></h3>
        <p class="muted" x-text="eventsList.length + ' activiteiten gelogd'"></p>
      </div>
      <button type="button" class="btn btn-sm" @click="closeEvents()">✕</button>
    </header>
    <div class="agent-events-body" x-show="!eventsLoading">
      <template x-for="ev in eventsList" :key="ev.id">
        <article class="agent-event-card" :class="{ expanded: selectedEvent?.id === ev.id }" @click="toggleEventDetail(ev)">
          <div class="agent-event-card-top">
            <time x-text="formatEventTime(ev.created_at)"></time>
            <span class="badge badge-sm" :class="eventStatusClass(ev.status)" x-text="ev.status || 'completed'"></span>
          </div>
          <strong x-text="ev.title || ev.event_type"></strong>
          <div class="agent-event-meta">
            <span x-text="ev.event_type"></span>
            <span x-show="ev.channel" x-text="'· ' + ev.channel"></span>
          </div>
          <div class="agent-event-detail" x-show="selectedEvent?.id === ev.id" x-cloak>
            <p x-show="ev.body" x-text="ev.body"></p>
            <pre x-show="!ev.body && ev.metadata && Object.keys(ev.metadata||{}).length" x-text="JSON.stringify(ev.metadata, null, 2)"></pre>
            <p x-show="!ev.body && !(ev.metadata && Object.keys(ev.metadata||{}).length)" class="muted">Geen extra details voor dit event.</p>
          </div>
        </article>
      </template>
      <p x-show="!eventsList.length && !eventsLoading" class="muted" style="padding:1rem">Nog geen events voor deze agent.</p>
    </div>
    <p x-show="eventsLoading" class="muted" style="padding:1.5rem">Events laden…</p>
  </aside>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/dashboard-layout.js?v=2"></script>
<script src="/static/js/page-viz.js?v=1"></script>
<script src="/static/js/agents-mesh.js?v=11"></script>
<script src="/static/js/agents-terminals.js?v=6"></script>
<script src="/static/js/agents-warroom.js?v=18"></script>
<script>
function agentsSoulHub() {
  return {
    tab: '{{ active_tab }}',
    tabIndicatorTop: 0,
    tabIndicatorH: 40,
    meshLoaded: false,
    pendingCount: 0,
    souls: [], selected: null, form: {}, saving: false,
    eventsOpen: false, eventsAgentKey: null, eventsAgentName: '', eventsList: [], eventsLoading: false, selectedEvent: null,
    terminalOpen: false, terminalAgentKey: null, terminalAgentName: '', terminalLines: [], _terminalEs: null,
    meshCommMode: 'pyramid',
    meshLegendPeer: true,
    meshLegendExec: true,
    focusTerminalKey: null, focusTerminalName: '', expandedTerminal: null,
    get totalEvents() { return this.souls.reduce((a,s) => a + (s.event_count||0), 0); },
    get activeCount() { return this.souls.filter(s => (s.events_6h||0) > 0).length; },
    get idleCount() { return this.souls.filter(s => (s.events_6h||0) === 0 && (s.event_count||0) > 0).length; },
    get offlineCount() { return this.souls.filter(s => (s.event_count||0) === 0).length; },
    isBusy(s) {
      const st = (s.current_status || '').toLowerCase();
      return st === 'needs_approval' || st === 'pending' || (s.activity === 'busy') || ((s.events_6h||0) >= 5);
    },
    isWorking(s) { return (s.events_6h||0) > 0 || s.working === true; },
    statusClass(s) {
      const st = (s.current_status || '').toLowerCase();
      if (st === 'needs_approval' || st === 'pending' || this.isBusy(s)) return 'busy';
      if (st === 'error' || st === 'rejected') return 'error';
      if ((s.events_6h||0) > 0 || s.activity === 'active') return 'active';
      if ((s.event_count||0) === 0) return 'offline';
      return 'idle';
    },
    formatEventTime(ts) {
      return (ts || '').substring(0, 16).replace('T', ' ');
    },
    eventStatusClass(status) {
      const s = (status || '').toLowerCase();
      if (s === 'pending' || s === 'needs_approval') return 'badge-warn';
      if (s === 'error' || s === 'rejected') return 'badge-negative';
      if (s === 'approved' || s === 'completed') return 'badge-positive';
      return '';
    },
    async openEvents(key, name, focusId) {
      if (!key) return;
      this.eventsAgentKey = key;
      this.eventsAgentName = name || key;
      this.eventsOpen = true;
      this.eventsLoading = true;
      this.selectedEvent = null;
      try {
        const r = await fetch('/api/agents/souls/' + encodeURIComponent(key) + '/events?limit=50').then(x => x.json());
        this.eventsList = r.items || [];
        if (focusId) {
          const hit = this.eventsList.find(e => e.id === focusId);
          if (hit) this.selectedEvent = hit;
        }
      } catch (e) { this.eventsList = []; }
      this.eventsLoading = false;
    },
    closeEvents() {
      this.eventsOpen = false;
      this.selectedEvent = null;
    },
    toggleEventDetail(ev) {
      this.selectedEvent = this.selectedEvent?.id === ev.id ? null : ev;
    },
    statusLabel(s) {
      const st = (s.current_status || '').toLowerCase();
      if (st === 'needs_approval') return 'Wacht op goedkeuring';
      if (st === 'pending') return 'In wachtrij';
      if (st === 'error') return 'Fout';
      if (this.isBusy(s)) return 'Bezig · live';
      if ((s.events_6h||0) > 0) return 'Actief · ' + (s.events_6h||0) + '/6u';
      if ((s.event_count||0) === 0) return 'Offline';
      return 'Idle';
    },
    async init() {
      this.syncMeshMode();
      await this.load();
      await this.loadPendingCount();
      this._poll = setInterval(() => {
        if (this.tab === 'warroom') {
          this.loadPendingCount();
          return;
        }
        this.load(true);
        this.loadPendingCount();
      }, 20000);
      if (window.PageViz) {
        window.PageViz.init('agents', (mode) => this.renderViz(mode));
      }
      this.$nextTick(() => {
        const activeBtn = this.$refs.vtabsNav?.querySelector('.vtab-btn.active');
        if (activeBtn) this.updateTabIndicator(activeBtn);
        const self = this;
        if (window.AgentsMesh) {
          AgentsMesh.bindModePicker({
            onNodeClick: function (node) {
              self.focusTerminal(node.agent_key, node.display_name);
            },
          });
        }
        if (window.AgentsTerminals && this.tab !== 'warroom') AgentsTerminals.startLiveStream();
        if (this.tab === 'mesh') this.mountMesh();
        if (this.tab === 'terminals') this.startTerminals();
      });
    },
    updateTabIndicator(el) {
      if (!el || !this.$refs.vtabsNav) return;
      const navRect = this.$refs.vtabsNav.getBoundingClientRect();
      const btnRect = el.getBoundingClientRect();
      this.tabIndicatorTop = Math.max(0, btnRect.top - navRect.top);
      this.tabIndicatorH = btnRect.height || 40;
    },
    setTab(next, el) {
      const prev = this.tab;
      this.tab = next;
      this.updateTabIndicator(el);
      const url = new URL(window.location.href);
      url.searchParams.set('tab', next);
      window.history.replaceState({}, '', url.toString());
      if (next === 'mesh') this.mountMesh();
      if (next === 'terminals') this.startTerminals();
      if (next === 'warroom') {
        if (window.AgentsTerminals && AgentsTerminals.stopLiveStream) AgentsTerminals.stopLiveStream();
      } else if (prev === 'warroom') {
        if (window.AgentsTerminals && AgentsTerminals.startLiveStream) AgentsTerminals.startLiveStream();
        this.$nextTick(() => {
          this.renderViz(window.__vizMode || 'neo-bars');
          window.AgentAvatars && AgentAvatars.paintAll(this.$root);
        });
      }
      if (next === 'approvals') this.loadPendingCount();
    },
    async loadPendingCount() {
      try {
        const r = await fetch('/api/agents/approvals?status=pending').then(x => x.json());
        this.pendingCount = (r.items || []).length;
      } catch (e) { this.pendingCount = 0; }
    },
    syncMeshMode() {
      if (!window.AgentsMesh) return;
      const self = this;
      this.meshCommMode = AgentsMesh.getSavedMode();
      this.updateMeshLegend();
      AgentsMesh.setModeChangeCallback(function (id) {
        self.meshCommMode = id;
        self.updateMeshLegend();
      });
    },
    updateMeshLegend() {
      const m = (window.AgentsMesh && AgentsMesh.COMM_MODES) ? AgentsMesh.COMM_MODES[this.meshCommMode] : null;
      this.meshLegendPeer = m ? (m.showLivePeers || m.showStaticPeers) : true;
      this.meshLegendExec = m ? m.showExecutive !== false : true;
    },
    setMeshMode(id) {
      if (window.AgentsMesh) AgentsMesh.pickMode(id);
      this.meshCommMode = id;
      this.updateMeshLegend();
    },
    remountMesh() {
      if (window.AgentsMesh && AgentsMesh.refresh) {
        const self = this;
        AgentsMesh.refresh('agents-mesh-canvas', {
          commMode: this.meshCommMode,
          onNodeClick: function (node) {
            self.focusTerminal(node.agent_key, node.display_name);
          },
        });
      } else {
        this.mountMesh();
      }
    },
    mountMesh() {
      if (!window.AgentsMesh) return;
      const self = this;
      const opts = {
        commMode: this.meshCommMode,
        onNodeClick: function (node) {
          self.focusTerminal(node.agent_key, node.display_name);
        },
      };
      window.AgentsMesh.mount('agents-mesh-canvas', opts).catch(function (e) {
        if (window.Cockpit) Cockpit.toast('Mesh: ' + (e.message || 'laden mislukt'), 'error');
      });
      if (this.focusTerminalKey && window.AgentsTerminals) {
        this.$nextTick(function () { AgentsTerminals.mountAll(); });
      }
    },
    focusTerminal(key, name) {
      this.focusTerminalKey = key;
      this.focusTerminalName = name || key;
      this.expandedTerminal = key;
      this.$nextTick(function () {
        if (window.AgentsTerminals) AgentsTerminals.mountAll();
      });
    },
    clearFocusTerminal() {
      this.focusTerminalKey = null;
      this.focusTerminalName = '';
    },
    goTerminal(key) {
      const soul = this.souls.find(function (s) { return s.agent_key === key; });
      const btn = this.$refs.vtabsNav?.querySelector('[data-tab=terminals]');
      this.setTab('terminals', btn);
      this.expandedTerminal = key;
      this.$nextTick(function () {
        const el = document.querySelector('[data-term-key="' + key + '"]');
        if (el) el.closest('.agent-term-window')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      });
    },
    expandTerminal(key) {
      this.expandedTerminal = this.expandedTerminal === key ? null : key;
    },
    startTerminals() {
      this.$nextTick(function () {
        if (window.AgentsTerminals) {
          AgentsTerminals.mountAll();
          AgentsTerminals.bindInputs();
        }
      });
    },
    async load(quiet) {
      const r = await fetch('/api/agents/souls').then(x => x.json());
      const items = r.items || [];
      // Avoid Alpine thrash: only replace souls when something meaningful changed
      const sig = items.map(s => [s.agent_key, s.event_count, s.events_6h, s.current_status, s.activity, s.current_task].join(':')).join('|');
      if (sig !== this._soulsSig) {
        this._soulsSig = sig;
        this.souls = items;
      }
      if (this.souls.length && !this.selected) this.select(this.souls[0].agent_key);
      if (this.tab === 'warroom') return; // no chart / global avatar repaint on War Room
      this.$nextTick(() => {
        (this.souls || []).forEach((s) => {
          const el = document.querySelector('.agent-grid [data-agent-avatar="' + s.agent_key + '"], .hm-neo [data-agent-avatar="' + s.agent_key + '"]');
          if (el && window.AgentAvatars) AgentAvatars.paint(el, s.agent_key, s.avatar_color);
        });
      });
      this.renderViz(window.__vizMode || 'neo-bars');
      if (!quiet) this.$nextTick(() => window.AgentAvatars && AgentAvatars.paintAll(this.$root));
    },
    renderViz(mode) {
      if (!window.VizEngine) return;
      const rows = (this.souls || []).map(s => ({
        label: s.agent_key,
        value: s.event_count || 0,
        raw: s.event_count || 0,
      })).sort((a, b) => b.raw - a.raw).slice(0, 12);
      if (!rows.length) rows.push({ label: 'geen', value: 0, raw: 0 });
      VizEngine.renderFromRows(mode,
        document.getElementById('chart-agents-viz'),
        document.getElementById('viz-agents-alt'),
        'agents-page', 'Events per agent', rows, 'hm-eq-lime'
      );
    },
    async select(key) {
      const r = await fetch('/api/agents/souls/' + key).then(x => x.json());
      this.selected = r.soul;
      this.form = { role_title: r.soul.role_title, responsibilities: r.soul.responsibilities, soul_md: r.soul.soul_md };
    },
    async save() {
      if (!this.selected) return;
      this.saving = true;
      try {
        await Cockpit.api('/api/agents/souls/' + this.selected.agent_key, { method: 'PUT', body: JSON.stringify(this.form) });
        Cockpit.toast('Soul opgeslagen', 'success');
        await this.load();
        await this.select(this.selected.agent_key);
      } catch (e) { Cockpit.toast(e.message, 'error'); }
      this.saving = false;
    }
  };
}

function approvalsPanel() {
  return {
    items: [],
    async load() {
      try {
        const r = await fetch('/api/agents/approvals?limit=50').then(x => x.json());
        this.items = r.items || [];
      } catch (e) { this.items = []; }
    },
    async approve(id) {
      await Cockpit.api('/api/agents/approvals/' + id + '/approve', { method: 'POST', body: '{}' });
      Cockpit.toast('Goedgekeurd — agent mag query uitvoeren', 'success');
      await this.load();
    },
    async reject(id) {
      const reason = prompt('Reden afwijzing (optioneel):') || '';
      await Cockpit.api('/api/agents/approvals/' + id + '/reject', { method: 'POST', body: JSON.stringify({ reason }) });
      Cockpit.toast('Afgewezen', 'info');
      await this.load();
    },
  };
}
</script>
{% endblock %}