sysops
365 lines
19 KiB
HTML
365 lines
19 KiB
HTML
{% 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" />
|
|
<link rel="stylesheet" href="/static/css/agent-characters.css?v=3" />
|
|
<script src="/static/js/agent-avatars.js?v=3"></script>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="hm-neo" x-data="agentsSoulHub()" x-init="init()">
|
|
<header class="hm-neo-header page-header">
|
|
<h1>Agents · Soul Registry</h1>
|
|
<p class="hm-sub">Animated team · duidelijke rollen · soul.md · live activiteit</p>
|
|
</header>
|
|
|
|
<div id="viz-toolbar" class="viz-toolbar"></div>
|
|
<div class="hm-chart-panel page-viz-panel viz-mode-chart agents-viz-compact" style="margin-bottom:1rem">
|
|
<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'">
|
|
<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==='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>
|
|
</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">Actief</div><div class="hm-neo-kpi-sub">agents online</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 }" @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 x-text="s.display_name"></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="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>
|
|
<div class="panel">
|
|
<h2 style="margin-top:0;">Netwerk</h2>
|
|
<p class="page-tip" style="margin-top:.25rem;">Agents onderaan → Herman (Co-CEO) → CEO & CTO. Pulse = actieve communicatie.</p>
|
|
<div class="mesh-wrap">
|
|
<svg id="agents-mesh-canvas" class="mesh-svg" viewBox="0 0 1100 640"></svg>
|
|
</div>
|
|
<div class="mesh-legend">
|
|
<span>Groen = healthy</span>
|
|
<span>Oranje = waarschuwing</span>
|
|
<span>Blauw = idle</span>
|
|
<span>Grijs = offline</span>
|
|
</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>
|
|
</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"></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,
|
|
get totalEvents() { return this.souls.reduce((a,s) => a + (s.event_count||0), 0); },
|
|
get activeCount() { return this.souls.filter(s => s.is_active !== false).length; },
|
|
statusClass(s) {
|
|
const st = (s.current_status || '').toLowerCase();
|
|
if (st === 'needs_approval' || st === 'pending') return 'busy';
|
|
if (st === 'error' || st === 'rejected') return 'error';
|
|
if (st === 'completed' || (s.events_6h > 0)) return 'active';
|
|
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 === 'completed') return 'Klaar';
|
|
if (st === 'error') return 'Fout';
|
|
if (s.current_task) return 'Bezig';
|
|
return 'Standby';
|
|
},
|
|
async init() {
|
|
await this.load();
|
|
await this.loadPendingCount();
|
|
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);
|
|
if (this.tab === 'mesh') this.mountMesh();
|
|
});
|
|
},
|
|
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) {
|
|
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 === '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; }
|
|
},
|
|
mountMesh() {
|
|
if (this.meshLoaded || !window.AgentsMesh) return;
|
|
this.meshLoaded = true;
|
|
window.AgentsMesh.mount('agents-mesh-canvas');
|
|
},
|
|
async load() {
|
|
const r = await fetch('/api/agents/souls').then(x => x.json());
|
|
this.souls = r.items || [];
|
|
if (this.souls.length && !this.selected) this.select(this.souls[0].agent_key);
|
|
this.renderViz(window.__vizMode || 'neo-bars');
|
|
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 %}
|