SysOps: voice-agy-webbuilder-backup — 2026-06-23 10:04 UTC
This commit is contained in:
sysops
@@ -1,9 +1,149 @@
|
||||
(function () {
|
||||
const NS = 'http://www.w3.org/2000/svg';
|
||||
const TIER_ROWS = [4, 5, 7];
|
||||
const MIN_NODE_GAP = 148;
|
||||
const VIEW_W = 1200;
|
||||
const VIEW_H = 860;
|
||||
|
||||
function make(tag, attrs = {}) {
|
||||
/** Korte rol-context per agent (NL) */
|
||||
const AGENT_HINTS = {
|
||||
marketing: { short: 'Campagnes', domain: 'Groei' },
|
||||
retail: { short: 'Supermarkten', domain: 'Groei' },
|
||||
bizdev: { short: 'Deals', domain: 'Groei' },
|
||||
research: { short: 'Marktintel', domain: 'Groei' },
|
||||
browser: { short: 'Web research', domain: 'Groei' },
|
||||
webbuilder: { short: 'Websites', domain: 'Product' },
|
||||
product: { short: 'Assortiment', domain: 'Product' },
|
||||
packaging: { short: 'Verpakking', domain: 'Product' },
|
||||
design: { short: 'Visuals', domain: 'Product' },
|
||||
halal: { short: 'Compliance', domain: 'Product' },
|
||||
sourcing: { short: 'Inkoop', domain: 'Product' },
|
||||
finance: { short: 'Cijfers', domain: 'Operatie' },
|
||||
hr: { short: 'Team', domain: 'Operatie' },
|
||||
knowledge: { short: 'Kennisbank', domain: 'Operatie' },
|
||||
email: { short: 'Inbox', domain: 'Operatie' },
|
||||
sysops: { short: 'Infra', domain: 'Operatie' },
|
||||
};
|
||||
|
||||
const CLUSTERS = {
|
||||
growth: {
|
||||
label: 'Groei',
|
||||
icon: '📈',
|
||||
color: 'rgba(0, 229, 255, 0.14)',
|
||||
stroke: 'rgba(0, 229, 255, 0.35)',
|
||||
agents: ['marketing', 'retail', 'bizdev', 'research', 'browser'],
|
||||
},
|
||||
product: {
|
||||
label: 'Product',
|
||||
icon: '📦',
|
||||
color: 'rgba(168, 85, 247, 0.12)',
|
||||
stroke: 'rgba(168, 85, 247, 0.35)',
|
||||
agents: ['product', 'packaging', 'design', 'halal', 'sourcing', 'webbuilder'],
|
||||
},
|
||||
ops: {
|
||||
label: 'Operatie',
|
||||
icon: '⚙️',
|
||||
color: 'rgba(34, 197, 94, 0.1)',
|
||||
stroke: 'rgba(34, 197, 94, 0.32)',
|
||||
agents: ['finance', 'hr', 'knowledge', 'email', 'sysops'],
|
||||
},
|
||||
};
|
||||
|
||||
/** @type {Record<string, object>} */
|
||||
const COMM_MODES = {
|
||||
pyramid: {
|
||||
id: 'pyramid',
|
||||
label: 'Piramide',
|
||||
subtitle: 'Herman als hub',
|
||||
icon: '◆',
|
||||
desc: 'Rapport ↑ en delegatie ↓. Alleen live handoffs tussen agents.',
|
||||
layout: 'pyramid',
|
||||
showExecutive: true,
|
||||
showReport: true,
|
||||
showDelegate: true,
|
||||
showLivePeers: true,
|
||||
showStaticPeers: false,
|
||||
activeOnly: false,
|
||||
edgeBend: 0.42,
|
||||
},
|
||||
mesh: {
|
||||
id: 'mesh',
|
||||
label: 'Vol netwerk',
|
||||
subtitle: 'Alle partners',
|
||||
icon: '⬡',
|
||||
desc: 'Volledige samenwerkingsmatrix — wie met wie kan werken.',
|
||||
layout: 'pyramid',
|
||||
showExecutive: true,
|
||||
showReport: true,
|
||||
showDelegate: true,
|
||||
showLivePeers: true,
|
||||
showStaticPeers: true,
|
||||
activeOnly: false,
|
||||
staticPeerOpacity: 0.35,
|
||||
edgeBend: 0.38,
|
||||
},
|
||||
org: {
|
||||
id: 'org',
|
||||
label: 'Organigram',
|
||||
subtitle: 'Pure hiërarchie',
|
||||
icon: '▤',
|
||||
desc: 'CEO → Herman → agents. Geen peer-lijnen, overzichtelijk.',
|
||||
layout: 'pyramid',
|
||||
showExecutive: true,
|
||||
showReport: true,
|
||||
showDelegate: true,
|
||||
showLivePeers: false,
|
||||
showStaticPeers: false,
|
||||
activeOnly: false,
|
||||
edgeBend: 0.12,
|
||||
straightExec: true,
|
||||
},
|
||||
pulse: {
|
||||
id: 'pulse',
|
||||
label: 'Live stream',
|
||||
subtitle: 'Alleen actief',
|
||||
icon: '◎',
|
||||
desc: 'Geen stille lijnen — alleen wat nu beweegt (pulse).',
|
||||
layout: 'pyramid',
|
||||
showExecutive: true,
|
||||
showReport: true,
|
||||
showDelegate: true,
|
||||
showLivePeers: true,
|
||||
showStaticPeers: false,
|
||||
activeOnly: true,
|
||||
edgeBend: 0.45,
|
||||
},
|
||||
clusters: {
|
||||
id: 'clusters',
|
||||
label: 'Domeinen',
|
||||
subtitle: 'Per afdeling',
|
||||
icon: '◉',
|
||||
desc: 'Groei · Product · Operatie — agents gegroepeerd rond Herman.',
|
||||
layout: 'clusters',
|
||||
showExecutive: true,
|
||||
showReport: true,
|
||||
showDelegate: true,
|
||||
showLivePeers: true,
|
||||
showStaticPeers: true,
|
||||
activeOnly: false,
|
||||
staticPeerOpacity: 0.2,
|
||||
edgeBend: 0.5,
|
||||
intraClusterOnly: false,
|
||||
},
|
||||
};
|
||||
|
||||
const STORAGE_KEY = 'foodlinkk_mesh_comm_mode';
|
||||
let cachedData = null;
|
||||
let pickerBound = false;
|
||||
let onModeChangeCb = null;
|
||||
let lastMountOpts = {};
|
||||
|
||||
function make(tag, attrs) {
|
||||
attrs = attrs || {};
|
||||
const el = document.createElementNS(NS, tag);
|
||||
Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
|
||||
Object.entries(attrs).forEach(function (pair) {
|
||||
el.setAttribute(pair[0], String(pair[1]));
|
||||
});
|
||||
return el;
|
||||
}
|
||||
|
||||
@@ -11,9 +151,234 @@
|
||||
while (el.firstChild) el.removeChild(el.firstChild);
|
||||
}
|
||||
|
||||
function linePath(x1, y1, x2, y2) {
|
||||
const midY = y1 + (y2 - y1) * 0.45;
|
||||
return `M ${x1} ${y1} C ${x1} ${midY}, ${x2} ${midY}, ${x2} ${y2}`;
|
||||
function curvePath(x1, y1, x2, y2, bend) {
|
||||
if (bend != null && bend < 0.18) {
|
||||
return 'M ' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2;
|
||||
}
|
||||
const midY = y1 + (y2 - y1) * (bend != null ? bend : 0.42);
|
||||
return 'M ' + x1 + ' ' + y1 + ' C ' + x1 + ' ' + midY + ', ' + x2 + ' ' + midY + ', ' + x2 + ' ' + y2;
|
||||
}
|
||||
|
||||
function clusterOf(key) {
|
||||
const k = (key || '').toLowerCase();
|
||||
return (
|
||||
Object.keys(CLUSTERS).find(function (cid) {
|
||||
return CLUSTERS[cid].agents.indexOf(k) >= 0;
|
||||
}) || null
|
||||
);
|
||||
}
|
||||
|
||||
function spreadTier(nodes, width, minGap) {
|
||||
if (nodes.length <= 1) return;
|
||||
nodes.sort(function (a, b) {
|
||||
return a._x - b._x;
|
||||
});
|
||||
for (let i = 1; i < nodes.length; i++) {
|
||||
const gap = nodes[i]._x - nodes[i - 1]._x;
|
||||
if (gap < minGap) {
|
||||
const shift = minGap - gap;
|
||||
for (let j = i; j < nodes.length; j++) nodes[j]._x += shift;
|
||||
}
|
||||
}
|
||||
const tierCx = (nodes[0]._x + nodes[nodes.length - 1]._x) / 2;
|
||||
const offset = width / 2 - tierCx;
|
||||
nodes.forEach(function (n) {
|
||||
n._x += offset;
|
||||
});
|
||||
}
|
||||
|
||||
function deoverlapLayout(souls, width) {
|
||||
const tiers = {};
|
||||
souls.forEach(function (n) {
|
||||
const y = n._y || 0;
|
||||
if (!tiers[y]) tiers[y] = [];
|
||||
tiers[y].push(n);
|
||||
});
|
||||
Object.keys(tiers).forEach(function (y) {
|
||||
spreadTier(tiers[y], width, MIN_NODE_GAP);
|
||||
});
|
||||
}
|
||||
|
||||
function agentSubtitle(node) {
|
||||
const hint = AGENT_HINTS[(node.agent_key || '').toLowerCase()];
|
||||
const task = (node.current_task || node.last_event_title || '').trim();
|
||||
if (task) return task.length > 32 ? task.slice(0, 30) + '…' : task;
|
||||
if (hint) return hint.short;
|
||||
return (node.role_title || '').split('·')[0].trim().slice(0, 24);
|
||||
}
|
||||
|
||||
function agentStatus(node) {
|
||||
if (node.is_active) return 'live';
|
||||
const h = node.health || 'idle';
|
||||
if (h === 'warn') return 'warn';
|
||||
if (h === 'healthy') return 'ready';
|
||||
return 'idle';
|
||||
}
|
||||
|
||||
function addRotateAnim(group, dur) {
|
||||
const anim = document.createElementNS(NS, 'animateTransform');
|
||||
anim.setAttribute('attributeName', 'transform');
|
||||
anim.setAttribute('type', 'rotate');
|
||||
anim.setAttribute('from', '0 0 0');
|
||||
anim.setAttribute('to', '360 0 0');
|
||||
anim.setAttribute('dur', dur || '12s');
|
||||
anim.setAttribute('repeatCount', 'indefinite');
|
||||
group.appendChild(anim);
|
||||
}
|
||||
|
||||
function layoutPyramid(souls, width, positions) {
|
||||
const cx = width / 2;
|
||||
const hermanY = positions.hermanY;
|
||||
const execY = positions.execY;
|
||||
const tierYs = positions.tierYs;
|
||||
const minGap = MIN_NODE_GAP;
|
||||
let idx = 0;
|
||||
TIER_ROWS.forEach(function (count, tierIdx) {
|
||||
const y = tierYs[tierIdx] || 580;
|
||||
const slice = souls.slice(idx, idx + count);
|
||||
idx += count;
|
||||
const n = slice.length;
|
||||
if (!n) return;
|
||||
const span = Math.max(minGap * Math.max(n - 1, 1), minGap);
|
||||
const startX = cx - span / 2;
|
||||
slice.forEach(function (node, i) {
|
||||
node._x = n === 1 ? cx : startX + (span * i) / Math.max(1, n - 1);
|
||||
node._y = y;
|
||||
node._tier = tierIdx;
|
||||
node._cluster = clusterOf(node.agent_key);
|
||||
});
|
||||
});
|
||||
while (idx < souls.length) {
|
||||
const y = 660;
|
||||
const rest = souls.slice(idx);
|
||||
const n = rest.length;
|
||||
const span = Math.max(minGap * Math.max(n - 1, 1), minGap);
|
||||
const startX = cx - span / 2;
|
||||
rest.forEach(function (node, i) {
|
||||
node._x = n === 1 ? cx : startX + (span * i) / Math.max(1, n - 1);
|
||||
node._y = y;
|
||||
node._cluster = clusterOf(node.agent_key);
|
||||
});
|
||||
idx = souls.length;
|
||||
}
|
||||
deoverlapLayout(souls, width);
|
||||
return { cx: cx, hermanY: hermanY, execY: execY };
|
||||
}
|
||||
|
||||
function layoutClusters(souls, width, height) {
|
||||
const cx = width / 2;
|
||||
const hermanY = height * 0.42;
|
||||
const execY = 58;
|
||||
const clusterCenters = {
|
||||
growth: { x: cx - 280, y: height * 0.72, r: 118 },
|
||||
product: { x: cx, y: height * 0.78, r: 118 },
|
||||
ops: { x: cx + 280, y: height * 0.72, r: 118 },
|
||||
};
|
||||
|
||||
souls.forEach(function (node) {
|
||||
const key = (node.agent_key || '').toLowerCase();
|
||||
const cid = clusterOf(key) || 'product';
|
||||
const center = clusterCenters[cid];
|
||||
const members = CLUSTERS[cid].agents;
|
||||
const idx = members.indexOf(key);
|
||||
const n = members.length;
|
||||
const angleStart = -Math.PI * 0.72;
|
||||
const angleEnd = -Math.PI * 0.28;
|
||||
const angle =
|
||||
n <= 1 ? (angleStart + angleEnd) / 2 : angleStart + ((angleEnd - angleStart) * idx) / (n - 1);
|
||||
const dist = center.r * 0.72;
|
||||
node._x = center.x + Math.cos(angle) * dist;
|
||||
node._y = center.y + Math.sin(angle) * dist * 0.55;
|
||||
node._cluster = cid;
|
||||
node._clusterCx = center.x;
|
||||
node._clusterCy = center.y;
|
||||
});
|
||||
|
||||
return { cx: cx, hermanY: hermanY, execY: execY, clusterCenters: clusterCenters };
|
||||
}
|
||||
|
||||
function isSvgVisible(svg) {
|
||||
if (!svg) return false;
|
||||
const r = svg.getBoundingClientRect();
|
||||
return r.width > 8 && r.height > 8;
|
||||
}
|
||||
|
||||
function showMeshLoading(svg, text) {
|
||||
clear(svg);
|
||||
const g = make('g', { class: 'mesh-loading' });
|
||||
const t = make('text', {
|
||||
x: 600,
|
||||
y: 360,
|
||||
'text-anchor': 'middle',
|
||||
fill: '#94a3b8',
|
||||
'font-size': 14,
|
||||
});
|
||||
t.textContent = text || 'Netwerk laden…';
|
||||
g.appendChild(t);
|
||||
svg.appendChild(g);
|
||||
}
|
||||
|
||||
function showMeshError(svg, text) {
|
||||
clear(svg);
|
||||
const t = make('text', { x: 32, y: 40, fill: '#ef4444', 'font-size': 14 });
|
||||
t.textContent = text || 'Mesh kon niet geladen worden';
|
||||
svg.appendChild(t);
|
||||
}
|
||||
|
||||
function whenSvgVisible(svg, fn) {
|
||||
if (!svg) return;
|
||||
if (isSvgVisible(svg)) {
|
||||
fn();
|
||||
return;
|
||||
}
|
||||
let tries = 0;
|
||||
const tick = function () {
|
||||
tries += 1;
|
||||
if (isSvgVisible(svg)) {
|
||||
fn();
|
||||
return;
|
||||
}
|
||||
if (tries < 60) {
|
||||
requestAnimationFrame(tick);
|
||||
} else {
|
||||
fn();
|
||||
}
|
||||
};
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
function watchSvgResize(svg, renderFn) {
|
||||
if (!svg || svg._meshResizeObs || typeof ResizeObserver === 'undefined') return;
|
||||
const wrap = svg.closest('.mesh-wrap') || svg.parentElement;
|
||||
if (!wrap) return;
|
||||
let hadSize = isSvgVisible(svg);
|
||||
svg._meshResizeObs = new ResizeObserver(function () {
|
||||
const vis = isSvgVisible(svg);
|
||||
if (vis && !hadSize) {
|
||||
hadSize = true;
|
||||
renderFn();
|
||||
} else if (vis) {
|
||||
hadSize = true;
|
||||
}
|
||||
});
|
||||
svg._meshResizeObs.observe(wrap);
|
||||
}
|
||||
|
||||
function renderMesh(svg, opts) {
|
||||
if (!svg || !cachedData) return;
|
||||
const drawOpts = Object.assign({}, lastMountOpts, opts || {}, {
|
||||
commMode: (opts && opts.commMode) || getSavedMode(),
|
||||
});
|
||||
const doDraw = function () {
|
||||
try {
|
||||
drawMesh(svg, cachedData, drawOpts);
|
||||
} catch (e) {
|
||||
console.error('drawMesh failed', e);
|
||||
showMeshError(svg, 'Diagram fout: ' + (e.message || 'onbekend'));
|
||||
}
|
||||
};
|
||||
doDraw();
|
||||
watchSvgResize(svg, doDraw);
|
||||
}
|
||||
|
||||
async function loadMeshData() {
|
||||
@@ -22,67 +387,209 @@
|
||||
return r.json();
|
||||
}
|
||||
|
||||
function drawMesh(svg, data) {
|
||||
async function ensureMeshData() {
|
||||
if (cachedData) return cachedData;
|
||||
cachedData = await loadMeshData();
|
||||
return cachedData;
|
||||
}
|
||||
|
||||
let pendingRender = false;
|
||||
|
||||
function scheduleRender(opts) {
|
||||
const svg = document.getElementById('agents-mesh-canvas');
|
||||
if (!svg) return;
|
||||
if (opts) lastMountOpts = Object.assign({}, lastMountOpts, opts);
|
||||
if (pendingRender) return;
|
||||
pendingRender = true;
|
||||
whenSvgVisible(svg, function () {
|
||||
pendingRender = false;
|
||||
renderMesh(svg, opts);
|
||||
});
|
||||
}
|
||||
|
||||
function nodePos(nodesByKey, key) {
|
||||
const n = nodesByKey[key];
|
||||
if (n && n._x != null) return { x: n._x, y: n._y };
|
||||
return null;
|
||||
}
|
||||
|
||||
function resolveMode(opts) {
|
||||
const id = (opts && opts.commMode) || localStorage.getItem(STORAGE_KEY) || 'pyramid';
|
||||
return COMM_MODES[id] || COMM_MODES.pyramid;
|
||||
}
|
||||
|
||||
function drawMesh(svg, data, opts) {
|
||||
opts = opts || {};
|
||||
const mode = resolveMode(opts);
|
||||
const onNodeClick = opts.onNodeClick;
|
||||
|
||||
clear(svg);
|
||||
svg.setAttribute('data-mesh-mode', mode.id);
|
||||
|
||||
const vb = svg.viewBox.baseVal;
|
||||
const width = vb && vb.width ? vb.width : 1100;
|
||||
const height = vb && vb.height ? vb.height : 640;
|
||||
const width = vb && vb.width ? vb.width : VIEW_W;
|
||||
const height = vb && vb.height ? vb.height : VIEW_H;
|
||||
if (!vb || vb.width !== VIEW_W || vb.height !== VIEW_H) {
|
||||
svg.setAttribute('viewBox', '0 0 ' + VIEW_W + ' ' + VIEW_H);
|
||||
}
|
||||
|
||||
const cx = width / 2;
|
||||
const hermanY = 280;
|
||||
const execY = 75;
|
||||
const agentY = 520;
|
||||
const positions = {
|
||||
execY: 72,
|
||||
hermanY: mode.layout === 'clusters' ? height * 0.38 : 228,
|
||||
tierYs: [400, 540, 690],
|
||||
};
|
||||
|
||||
const souls = (data.nodes || []).filter((n) => {
|
||||
const souls = (data.nodes || []).filter(function (n) {
|
||||
const key = (n.agent_key || '').toLowerCase();
|
||||
return key && key !== 'herman';
|
||||
});
|
||||
|
||||
const edgesBySource = {};
|
||||
(data.edges || []).forEach((e) => { edgesBySource[e.source] = e; });
|
||||
const layoutMeta =
|
||||
mode.layout === 'clusters'
|
||||
? layoutClusters(souls, width, height)
|
||||
: layoutPyramid(souls, width, positions);
|
||||
|
||||
const agentCount = Math.max(1, souls.length);
|
||||
const pad = 70;
|
||||
const span = width - pad * 2;
|
||||
souls.forEach((node, i) => {
|
||||
node._x = pad + (span * i) / Math.max(1, agentCount - 1 || 1);
|
||||
if (agentCount === 1) node._x = cx;
|
||||
node._y = agentY;
|
||||
const cx = layoutMeta.cx;
|
||||
const hermanY = layoutMeta.hermanY;
|
||||
const execY = layoutMeta.execY;
|
||||
|
||||
const nodesByKey = {};
|
||||
souls.forEach(function (n) {
|
||||
nodesByKey[(n.agent_key || '').toLowerCase()] = n;
|
||||
});
|
||||
|
||||
const ceo = { x: cx - 180, y: execY, label: 'CEO', sub: 'Aissa · beslissingen' };
|
||||
const cto = { x: cx + 180, y: execY, label: 'CTO', sub: 'Platform · techniek' };
|
||||
const ceo = { x: cx - 200, y: execY, label: 'CEO', sub: 'Aissa' };
|
||||
const cto = { x: cx + 200, y: execY, label: 'CTO', sub: 'Platform' };
|
||||
|
||||
const edgesLayer = make('g');
|
||||
const nodesLayer = make('g');
|
||||
const bgLayer = make('g', { class: 'mesh-bg' });
|
||||
const clusterLayer = make('g', { class: 'mesh-clusters' });
|
||||
const edgesLayer = make('g', { class: 'mesh-edges' });
|
||||
const nodesLayer = make('g', { class: 'mesh-nodes' });
|
||||
svg.appendChild(bgLayer);
|
||||
if (mode.layout === 'clusters') svg.appendChild(clusterLayer);
|
||||
svg.appendChild(edgesLayer);
|
||||
svg.appendChild(nodesLayer);
|
||||
|
||||
function addEdge(x1, y1, x2, y2, pulse) {
|
||||
const d = linePath(x1, y1, x2, y2);
|
||||
edgesLayer.appendChild(make('path', { d, class: 'mesh-edge' }));
|
||||
if (mode.layout === 'pyramid') {
|
||||
positions.tierYs.forEach(function (y, i) {
|
||||
bgLayer.appendChild(
|
||||
make('rect', {
|
||||
x: 40,
|
||||
y: y - 42,
|
||||
width: width - 80,
|
||||
height: 84,
|
||||
rx: 12,
|
||||
class: 'mesh-tier-band mesh-tier-' + i,
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (mode.layout === 'clusters' && layoutMeta.clusterCenters) {
|
||||
Object.keys(CLUSTERS).forEach(function (cid) {
|
||||
const c = CLUSTERS[cid];
|
||||
const center = layoutMeta.clusterCenters[cid];
|
||||
if (!center) return;
|
||||
const g = make('g', { class: 'mesh-cluster-blob mesh-cluster-' + cid });
|
||||
g.appendChild(
|
||||
make('ellipse', {
|
||||
cx: center.x,
|
||||
cy: center.y,
|
||||
rx: center.r + 28,
|
||||
ry: center.r * 0.62,
|
||||
fill: c.color,
|
||||
stroke: c.stroke,
|
||||
'stroke-width': 1.2,
|
||||
})
|
||||
);
|
||||
const lbl = make('text', {
|
||||
x: center.x,
|
||||
y: center.y - center.r * 0.35,
|
||||
class: 'mesh-cluster-label',
|
||||
'text-anchor': 'middle',
|
||||
});
|
||||
lbl.textContent = c.icon + ' ' + c.label;
|
||||
g.appendChild(lbl);
|
||||
clusterLayer.appendChild(g);
|
||||
});
|
||||
}
|
||||
|
||||
function addEdge(x1, y1, x2, y2, cls, pulse, extraAttrs) {
|
||||
const d = curvePath(x1, y1, x2, y2, mode.edgeBend);
|
||||
const attrs = { d: d, class: 'mesh-edge ' + cls };
|
||||
if (extraAttrs) Object.assign(attrs, extraAttrs);
|
||||
edgesLayer.appendChild(make('path', attrs));
|
||||
if (pulse) {
|
||||
const p = make('path', { d, class: 'mesh-pulse' });
|
||||
p.style.animationDuration = pulse + 's';
|
||||
const p = make('path', { d: d, class: 'mesh-pulse mesh-pulse-active ' + cls });
|
||||
p.style.animationDuration = (typeof pulse === 'number' ? pulse : 2.6) + 's';
|
||||
edgesLayer.appendChild(p);
|
||||
}
|
||||
}
|
||||
|
||||
souls.forEach((node) => {
|
||||
const weight = edgesBySource[node.agent_key]?.weight || 1;
|
||||
addEdge(node._x, node._y - 26, cx, hermanY + 48, Math.max(1.2, 3.2 - Math.min(2, weight / 10)));
|
||||
if (mode.showExecutive) {
|
||||
const execCls = mode.straightExec ? 'mesh-edge-executive mesh-edge-straight' : 'mesh-edge-executive';
|
||||
addEdge(ceo.x, ceo.y + 30, cx, hermanY - 46, execCls, false);
|
||||
addEdge(cto.x, cto.y + 30, cx, hermanY - 46, execCls, false);
|
||||
}
|
||||
|
||||
(data.peer_edges || []).forEach(function (e) {
|
||||
const live = e.type === 'live';
|
||||
if (live && !mode.showLivePeers) return;
|
||||
if (!live && !mode.showStaticPeers) return;
|
||||
if (mode.activeOnly && !live) return;
|
||||
|
||||
const a = nodePos(nodesByKey, e.source);
|
||||
const b = nodePos(nodesByKey, e.target);
|
||||
if (!a || !b) return;
|
||||
|
||||
const srcNode = nodesByKey[e.source];
|
||||
const tgtNode = nodesByKey[e.target];
|
||||
const sameCluster =
|
||||
srcNode &&
|
||||
tgtNode &&
|
||||
srcNode._cluster &&
|
||||
srcNode._cluster === tgtNode._cluster;
|
||||
|
||||
if (mode.intraClusterOnly && !sameCluster) return;
|
||||
|
||||
const cls = live ? 'mesh-edge-peer-live' : 'mesh-edge-peer';
|
||||
const pulse = live ? 2.2 : false;
|
||||
const extra = {};
|
||||
if (!live && mode.staticPeerOpacity != null) {
|
||||
extra['stroke-opacity'] = mode.staticPeerOpacity;
|
||||
}
|
||||
if (sameCluster && mode.layout === 'clusters') {
|
||||
extra['stroke-opacity'] = live ? 0.75 : mode.staticPeerOpacity || 0.25;
|
||||
}
|
||||
|
||||
addEdge(a.x, a.y, b.x, b.y, cls, pulse, extra);
|
||||
});
|
||||
|
||||
addEdge(cx, hermanY - 48, ceo.x, ceo.y + 28, 2.2);
|
||||
addEdge(cx, hermanY - 48, cto.x, cto.y + 28, 2.4);
|
||||
if (mode.showReport) {
|
||||
(data.report_edges || []).forEach(function (e) {
|
||||
if (mode.activeOnly && !e.active) return;
|
||||
const a = nodePos(nodesByKey, e.source);
|
||||
if (!a) return;
|
||||
addEdge(a.x, a.y - 24, cx, hermanY + 42, 'mesh-edge-report', e.active ? 2.4 : false);
|
||||
});
|
||||
}
|
||||
|
||||
if (mode.showDelegate) {
|
||||
(data.delegate_edges || []).forEach(function (e) {
|
||||
if (mode.activeOnly && !e.active) return;
|
||||
const b = nodePos(nodesByKey, e.target);
|
||||
if (!b) return;
|
||||
addEdge(cx, hermanY + 42, b.x, b.y - 24, 'mesh-edge-delegate', e.active ? 2.0 : false);
|
||||
});
|
||||
}
|
||||
|
||||
function drawExec(node, cls) {
|
||||
const g = make('g', { class: `mesh-node mesh-exec ${cls}` });
|
||||
g.appendChild(make('circle', { cx: node.x, cy: node.y, r: 34, class: 'main' }));
|
||||
g.appendChild(make('circle', { cx: node.x, cy: node.y, r: 42, class: 'ring' }));
|
||||
g.appendChild(make('text', { x: node.x, y: node.y - 2, 'font-size': 13 }));
|
||||
g.lastChild.textContent = node.label;
|
||||
const sub = make('text', { x: node.x, y: node.y + 14, 'font-size': 9, opacity: 0.85 });
|
||||
const g = make('g', { class: 'mesh-node mesh-exec ' + cls, transform: 'translate(' + node.x + ',' + node.y + ')' });
|
||||
g.appendChild(make('circle', { cx: 0, cy: 0, r: 30, class: 'main' }));
|
||||
const t = make('text', { x: 0, y: -42, class: 'mesh-label mesh-label-exec' });
|
||||
t.textContent = node.label;
|
||||
g.appendChild(t);
|
||||
const sub = make('text', { x: 0, y: -26, class: 'mesh-sublabel' });
|
||||
sub.textContent = node.sub;
|
||||
g.appendChild(sub);
|
||||
nodesLayer.appendChild(g);
|
||||
@@ -91,56 +598,222 @@
|
||||
drawExec(ceo, 'mesh-ceo');
|
||||
drawExec(cto, 'mesh-cto');
|
||||
|
||||
const herman = make('g', { class: 'mesh-node mesh-herman' });
|
||||
herman.appendChild(make('circle', { class: 'ring', cx, cy: hermanY, r: 58 }));
|
||||
herman.appendChild(make('circle', { class: 'main', cx, cy: hermanY, r: 44 }));
|
||||
const crown = make('text', { x: cx, y: hermanY - 4, 'font-size': 22, 'text-anchor': 'middle' });
|
||||
crown.textContent = '👑';
|
||||
herman.appendChild(crown);
|
||||
const hLabel = make('text', { x: cx, y: hermanY + 18 });
|
||||
hLabel.textContent = 'Herman · Co-CEO';
|
||||
herman.appendChild(hLabel);
|
||||
const hSub = make('text', { x: cx, y: hermanY + 34, 'font-size': 10, opacity: 0.85 });
|
||||
hSub.textContent = 'Takenverdeler';
|
||||
herman.appendChild(hSub);
|
||||
nodesLayer.appendChild(herman);
|
||||
const hermanActive =
|
||||
(data.delegate_edges || []).some(function (e) {
|
||||
return e.active;
|
||||
}) ||
|
||||
(data.report_edges || []).some(function (e) {
|
||||
return e.active;
|
||||
});
|
||||
|
||||
souls.forEach((node) => {
|
||||
const hermanG = make('g', {
|
||||
class: 'mesh-node mesh-herman' + (hermanActive ? ' active' : ''),
|
||||
transform: 'translate(' + cx + ',' + hermanY + ')',
|
||||
});
|
||||
if (hermanActive) {
|
||||
const ringG = make('g', { class: 'mesh-herman-ring' });
|
||||
ringG.appendChild(make('circle', { class: 'ring', cx: 0, cy: 0, r: 54 }));
|
||||
addRotateAnim(ringG, '14s');
|
||||
hermanG.appendChild(ringG);
|
||||
}
|
||||
hermanG.appendChild(make('circle', { class: 'main', cx: 0, cy: 0, r: 40 }));
|
||||
const crown = make('text', { x: 0, y: 6, class: 'mesh-herman-crown', 'text-anchor': 'middle' });
|
||||
crown.textContent = '👑';
|
||||
hermanG.appendChild(crown);
|
||||
const hLabel = make('text', { x: 0, y: 64, class: 'mesh-label mesh-label-herman' });
|
||||
hLabel.textContent = 'Herman';
|
||||
hermanG.appendChild(hLabel);
|
||||
const hSub = make('text', { x: 0, y: 80, class: 'mesh-sublabel mesh-sublabel-herman' });
|
||||
hSub.textContent = 'Co-CEO · takenverdeler';
|
||||
hermanG.appendChild(hSub);
|
||||
const hTask = make('text', { x: 0, y: 94, class: 'mesh-context' });
|
||||
const hermanNode = (data.nodes || []).find(function (n) {
|
||||
return (n.agent_key || '').toLowerCase() === 'herman';
|
||||
});
|
||||
hTask.textContent = hermanNode ? agentSubtitle(hermanNode) : 'Coördineert alle agents';
|
||||
hermanG.appendChild(hTask);
|
||||
nodesLayer.appendChild(hermanG);
|
||||
|
||||
souls.forEach(function (node, idx) {
|
||||
const key = (node.agent_key || '').toLowerCase();
|
||||
const group = make('g', { class: `mesh-node mesh-agent ${node.health || 'idle'}` });
|
||||
group.appendChild(make('circle', { cx: node._x, cy: node._y, r: 22 }));
|
||||
const shortName = (node.display_name || node.agent_key || '?').split(' ')[0];
|
||||
const t = make('text', { x: node._x, y: node._y + 4 });
|
||||
t.textContent = shortName;
|
||||
const live = !!node.is_active;
|
||||
const status = agentStatus(node);
|
||||
const hint = AGENT_HINTS[key];
|
||||
const clusterCls = node._cluster ? ' mesh-agent-cluster-' + node._cluster : '';
|
||||
const labelAbove = typeof node._tier === 'number' ? node._tier % 2 === 1 : idx % 2 === 1;
|
||||
const group = make('g', {
|
||||
class:
|
||||
'mesh-node mesh-agent mesh-status-' +
|
||||
status +
|
||||
' ' +
|
||||
(node.health || 'idle') +
|
||||
(live ? ' mesh-agent-live' : '') +
|
||||
clusterCls,
|
||||
transform: 'translate(' + node._x + ',' + node._y + ')',
|
||||
});
|
||||
if (live) {
|
||||
const pulseG = make('g', { class: 'mesh-pulse-wrap' });
|
||||
pulseG.appendChild(make('circle', { cx: 0, cy: 0, r: 28, class: 'pulse-ring' }));
|
||||
group.appendChild(pulseG);
|
||||
}
|
||||
group.appendChild(make('circle', { cx: 0, cy: 0, r: 22, class: 'main' }));
|
||||
const emoji = make('text', { x: 0, y: 5, class: 'mesh-emoji', 'text-anchor': 'middle' });
|
||||
emoji.textContent = node.avatar_emoji || (hint && hint.short ? hint.short.charAt(0) : '') || '●';
|
||||
group.appendChild(emoji);
|
||||
const displayName = (node.display_name || key || '?').split(' ')[0];
|
||||
const nameY = labelAbove ? -30 : 36;
|
||||
const ctxY = labelAbove ? -16 : 52;
|
||||
const domY = labelAbove ? -2 : 66;
|
||||
const t = make('text', { x: 0, y: nameY, class: 'mesh-label mesh-label-agent' });
|
||||
t.textContent = displayName;
|
||||
group.appendChild(t);
|
||||
const role = make('text', { x: node._x, y: node._y + 38, 'font-size': 9, opacity: 0.82 });
|
||||
role.textContent = (node.role_title || key).split('·')[0].trim().slice(0, 18);
|
||||
group.appendChild(role);
|
||||
const status = make('text', { x: node._x, y: node._y + 52, 'font-size': 8, class: 'mesh-status' });
|
||||
status.textContent = (node.health || 'idle').toUpperCase();
|
||||
group.appendChild(status);
|
||||
group.addEventListener('click', () => {
|
||||
if (window.Cockpit && Cockpit.toast) {
|
||||
Cockpit.toast(`${node.display_name || key}: ${node.health || 'idle'}`, 'info');
|
||||
}
|
||||
const ctx = make('text', { x: 0, y: ctxY, class: 'mesh-context' });
|
||||
ctx.textContent = agentSubtitle(node);
|
||||
group.appendChild(ctx);
|
||||
if (hint && mode.layout !== 'clusters') {
|
||||
const dom = make('text', { x: 0, y: domY, class: 'mesh-domain' });
|
||||
dom.textContent = hint.domain;
|
||||
group.appendChild(dom);
|
||||
}
|
||||
const tip =
|
||||
(node.role_title || '') +
|
||||
(node.responsibilities ? '\n' + String(node.responsibilities).slice(0, 120) : '') +
|
||||
(node.current_task ? '\nNu: ' + node.current_task : '');
|
||||
group.setAttribute('title', tip.slice(0, 200));
|
||||
group.addEventListener('click', function () {
|
||||
if (onNodeClick) onNodeClick(node);
|
||||
});
|
||||
nodesLayer.appendChild(group);
|
||||
});
|
||||
}
|
||||
|
||||
async function mount(targetId) {
|
||||
const svg = document.getElementById(targetId);
|
||||
if (!svg) return;
|
||||
try {
|
||||
const data = await loadMeshData();
|
||||
drawMesh(svg, data);
|
||||
} catch (e) {
|
||||
clear(svg);
|
||||
const msg = make('text', { x: 32, y: 40, fill: '#ef4444', 'font-size': 14 });
|
||||
msg.textContent = 'Mesh kon niet geladen worden';
|
||||
svg.appendChild(msg);
|
||||
function updatePickerUI(modeId) {
|
||||
document.querySelectorAll('[data-mesh-mode]').forEach(function (btn) {
|
||||
const active = btn.getAttribute('data-mesh-mode') === modeId;
|
||||
btn.classList.toggle('is-active', active);
|
||||
btn.setAttribute('aria-pressed', active ? 'true' : 'false');
|
||||
});
|
||||
const wrap = document.querySelector('.mesh-wrap');
|
||||
if (wrap) {
|
||||
wrap.className = 'mesh-wrap mesh-wrap-mode-' + modeId;
|
||||
wrap.setAttribute('data-mode', modeId);
|
||||
}
|
||||
const badge = document.getElementById('mesh-mode-badge');
|
||||
if (badge && COMM_MODES[modeId]) {
|
||||
badge.textContent = COMM_MODES[modeId].label;
|
||||
}
|
||||
}
|
||||
|
||||
window.AgentsMesh = { mount };
|
||||
function pickMode(modeId, opts, silent) {
|
||||
const mode = COMM_MODES[modeId] ? modeId : 'pyramid';
|
||||
const drawOpts = Object.assign({}, lastMountOpts, opts || {}, { commMode: mode });
|
||||
if (!silent) saveMode(mode);
|
||||
updatePickerUI(mode);
|
||||
if (onModeChangeCb) onModeChangeCb(mode);
|
||||
const svg = document.getElementById('agents-mesh-canvas');
|
||||
if (!svg) return mode;
|
||||
showMeshLoading(svg, 'Stijl: ' + COMM_MODES[mode].label + '…');
|
||||
ensureMeshData()
|
||||
.then(function () {
|
||||
whenSvgVisible(svg, function () {
|
||||
renderMesh(svg, drawOpts);
|
||||
});
|
||||
})
|
||||
.catch(function (e) {
|
||||
showMeshError(svg, 'Mesh laden mislukt — ' + (e.message || ''));
|
||||
});
|
||||
return mode;
|
||||
}
|
||||
|
||||
function bindModePicker(opts) {
|
||||
lastMountOpts = Object.assign({}, lastMountOpts, opts || {});
|
||||
if (pickerBound) return;
|
||||
pickerBound = true;
|
||||
document.addEventListener('click', function (e) {
|
||||
const btn = e.target.closest('[data-mesh-mode]');
|
||||
if (!btn) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const id = btn.getAttribute('data-mesh-mode');
|
||||
pickMode(id);
|
||||
});
|
||||
}
|
||||
|
||||
function setModeChangeCallback(fn) {
|
||||
onModeChangeCb = fn;
|
||||
}
|
||||
|
||||
async function mount(targetId, opts) {
|
||||
opts = opts || {};
|
||||
lastMountOpts = opts;
|
||||
const svg = document.getElementById(targetId);
|
||||
if (!svg) return null;
|
||||
bindModePicker(opts);
|
||||
const modeObj = resolveMode(opts);
|
||||
updatePickerUI(modeObj.id);
|
||||
showMeshLoading(svg, 'Netwerk laden…');
|
||||
try {
|
||||
await ensureMeshData();
|
||||
const drawOpts = Object.assign({}, opts, { commMode: modeObj.id });
|
||||
whenSvgVisible(svg, function () {
|
||||
renderMesh(svg, drawOpts);
|
||||
});
|
||||
return cachedData;
|
||||
} catch (e) {
|
||||
showMeshError(svg, 'Mesh laden mislukt — ' + (e.message || ''));
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh(targetId, opts) {
|
||||
cachedData = null;
|
||||
return mount(targetId, opts);
|
||||
}
|
||||
|
||||
function redraw(targetId, opts) {
|
||||
const svg = document.getElementById(targetId);
|
||||
if (!svg || !cachedData) return;
|
||||
whenSvgVisible(svg, function () {
|
||||
renderMesh(svg, opts || {});
|
||||
});
|
||||
}
|
||||
|
||||
function saveMode(modeId) {
|
||||
if (COMM_MODES[modeId]) localStorage.setItem(STORAGE_KEY, modeId);
|
||||
}
|
||||
|
||||
function getSavedMode() {
|
||||
const id = localStorage.getItem(STORAGE_KEY) || 'pyramid';
|
||||
return COMM_MODES[id] ? id : 'pyramid';
|
||||
}
|
||||
|
||||
window.AgentsMesh = {
|
||||
mount,
|
||||
refresh,
|
||||
redraw,
|
||||
pickMode,
|
||||
bindModePicker,
|
||||
setModeChangeCallback,
|
||||
loadMeshData,
|
||||
drawMesh,
|
||||
COMM_MODES,
|
||||
CLUSTERS,
|
||||
saveMode,
|
||||
getSavedMode,
|
||||
};
|
||||
|
||||
function bootPicker() {
|
||||
bindModePicker({});
|
||||
const saved = getSavedMode();
|
||||
updatePickerUI(saved);
|
||||
}
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', bootPicker);
|
||||
} else {
|
||||
bootPicker();
|
||||
}
|
||||
|
||||
if (window.location.pathname.indexOf('/agents') >= 0) {
|
||||
ensureMeshData().catch(function () {});
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user