205 lines
10 KiB
JavaScript
205 lines
10 KiB
JavaScript
// WEVAL Manager Enhancement v3.1 — CDN features (defer, try-catch)
|
|
// Loaded externally to avoid breaking React
|
|
|
|
(function() {
|
|
"use strict";
|
|
|
|
// 1. Load Mermaid.js (deferred)
|
|
function loadMermaid() {
|
|
return new Promise(function(resolve) {
|
|
if (window.mermaid) { resolve(); return; }
|
|
var s = document.createElement("script");
|
|
s.src = "https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js";
|
|
s.defer = true;
|
|
s.onload = function() {
|
|
try { mermaid.initialize({startOnLoad:false,theme:"dark",securityLevel:"loose"}); } catch(e) {}
|
|
resolve();
|
|
};
|
|
s.onerror = function() { resolve(); };
|
|
document.head.appendChild(s);
|
|
});
|
|
}
|
|
|
|
// 2. Load highlight.js (deferred)
|
|
function loadHljs() {
|
|
return new Promise(function(resolve) {
|
|
if (window.hljs) { resolve(); return; }
|
|
var link = document.createElement("link");
|
|
link.rel = "stylesheet";
|
|
link.href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css";
|
|
document.head.appendChild(link);
|
|
var s = document.createElement("script");
|
|
s.src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js";
|
|
s.defer = true;
|
|
s.onload = function() { resolve(); };
|
|
s.onerror = function() { resolve(); };
|
|
document.head.appendChild(s);
|
|
});
|
|
}
|
|
|
|
// 3. Render mermaid diagrams in chat messages
|
|
window.renderMermaidInChat = function() {
|
|
try {
|
|
if (!window.mermaid) return;
|
|
document.querySelectorAll("pre code.language-mermaid, .mermaid-source").forEach(function(el) {
|
|
if (el.dataset.rendered) return;
|
|
var container = document.createElement("div");
|
|
container.className = "mermaid";
|
|
container.textContent = el.textContent;
|
|
el.parentNode.replaceChild(container, el);
|
|
el.dataset.rendered = "1";
|
|
});
|
|
mermaid.run();
|
|
} catch(e) { console.warn("Mermaid render:", e); }
|
|
};
|
|
|
|
// 4. Highlight code blocks
|
|
window.highlightCodeBlocks = function() {
|
|
try {
|
|
if (!window.hljs) return;
|
|
document.querySelectorAll("pre code:not(.hljs)").forEach(function(el) {
|
|
hljs.highlightElement(el);
|
|
});
|
|
} catch(e) {}
|
|
};
|
|
|
|
// 5. LiveMetrics header component
|
|
window.updateLiveMetrics = function() {
|
|
var el = document.getElementById("live-metrics-bar");
|
|
if (!el) return;
|
|
fetch("/api/prometheus-api.php").then(function(r){return r.json()}).then(function(d) {
|
|
var m = d.metrics || {};
|
|
el.innerHTML = "<span>Load: "+(m.load||"--")+"</span> | <span>RAM: "+(m.ram_avail_gb||"--")+"GB free</span> | <span>Uptime: "+(m.uptime_days||"--")+"d</span>";
|
|
}).catch(function(){});
|
|
};
|
|
|
|
// 6. ArtifactPanel for code/diagram display
|
|
window.showArtifact = function(content, type) {
|
|
var panel = document.getElementById("artifact-panel");
|
|
if (!panel) {
|
|
panel = document.createElement("div");
|
|
panel.id = "artifact-panel";
|
|
panel.style.cssText = "position:fixed;right:0;top:60px;width:45vw;height:calc(100vh - 60px);background:#0f172a;border-left:1px solid #1e293b;z-index:1000;overflow:auto;padding:16px;display:none;transition:transform .3s";
|
|
document.body.appendChild(panel);
|
|
}
|
|
panel.innerHTML = "<button onclick=\"this.parentElement.style.display=\'none\'\" style=\"position:absolute;top:8px;right:8px;background:none;border:none;color:#94a3b8;font-size:1.2em;cursor:pointer\">✕</button><div style=\"margin-top:32px\">" + content + "</div>";
|
|
panel.style.display = "block";
|
|
if (type === "code") highlightCodeBlocks();
|
|
if (type === "mermaid") renderMermaidInChat();
|
|
};
|
|
|
|
// Auto-init on load
|
|
Promise.all([loadMermaid(), loadHljs()]).then(function() {
|
|
console.log("[Manager v3.1] CDN features loaded: mermaid + hljs");
|
|
// Set up MutationObserver for auto-rendering
|
|
var observer = new MutationObserver(function() {
|
|
renderMermaidInChat();
|
|
highlightCodeBlocks();
|
|
});
|
|
var chat = document.querySelector(".chat-messages, #chat-container, [class*=message]");
|
|
if (chat) observer.observe(chat, {childList:true, subtree:true});
|
|
});
|
|
|
|
// Update metrics every 30s
|
|
setInterval(function() { try { updateLiveMetrics(); } catch(e) {} }, 30000);
|
|
setTimeout(function() { try { updateLiveMetrics(); } catch(e) {} }, 2000);
|
|
|
|
})();
|
|
|
|
|
|
// === AEGIS + SKILLSMITH + AIOS — Manager Integration ===
|
|
|
|
// AEGIS Security Panel
|
|
window.loadAegisPanel = function() {
|
|
Promise.all([
|
|
fetch("/api/aegis-api.php?action=status").then(r=>r.json()),
|
|
fetch("/api/aegis-api.php?action=scan&target=wevia").then(r=>r.json()),
|
|
fetch("/api/aegis-api.php?action=policy").then(r=>r.json())
|
|
]).then(function(data) {
|
|
var s=data[0], scan=data[1], pol=data[2];
|
|
var html = '<div style="padding:12px"><h3 style="color:#22c55e;margin-bottom:12px">AEGIS — AI Agent Security</h3>';
|
|
html += '<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px">';
|
|
html += '<div style="background:rgba(34,197,94,0.1);padding:8px;border-radius:8px;text-align:center"><strong style="font-size:1.4em;color:#22c55e">'+scan.trust_grade+'</strong><br><small>Trust Grade</small></div>';
|
|
html += '<div style="background:rgba(34,197,94,0.1);padding:8px;border-radius:8px;text-align:center"><strong style="font-size:1.4em;color:#22c55e">'+scan.agents_detected+'</strong><br><small>Agents Monitored</small></div>';
|
|
html += '<div style="background:rgba(34,197,94,0.1);padding:8px;border-radius:8px;text-align:center"><strong style="font-size:1.4em;color:#22c55e">'+scan.injections_blocked+'</strong><br><small>Injections Blocked</small></div>';
|
|
html += '</div>';
|
|
html += '<div style="font-size:12px;color:#94a3b8"><strong>Policies:</strong> ';
|
|
(pol.policies||[]).forEach(function(p){html+='<span style="background:rgba(34,197,94,0.15);padding:2px 6px;border-radius:4px;margin:2px">'+p.name+'</span> '});
|
|
html += '</div></div>';
|
|
if(window.showArtifact) window.showArtifact(html,'html');
|
|
else { var d=document.createElement('div');d.innerHTML=html;document.body.appendChild(d); }
|
|
}).catch(function(e){console.warn("AEGIS:",e)});
|
|
};
|
|
|
|
// SkillSmith Discovery Panel
|
|
window.loadSkillSmithPanel = function(query) {
|
|
var q = query || "security";
|
|
Promise.all([
|
|
fetch("/api/skillsmith-api.php?action=status").then(r=>r.json()),
|
|
fetch("/api/skillsmith-api.php?action=search&q="+encodeURIComponent(q)).then(r=>r.json()),
|
|
fetch("/api/skillsmith-api.php?action=recommend").then(r=>r.json())
|
|
]).then(function(data) {
|
|
var s=data[0], res=data[1], rec=data[2];
|
|
var html = '<div style="padding:12px"><h3 style="color:#a78bfa;margin-bottom:12px">SkillSmith — '+s.skills+' Skills</h3>';
|
|
html += '<div style="margin-bottom:12px"><strong>Search: "'+q+'"</strong><br>';
|
|
(res.results||[]).forEach(function(r){
|
|
html += '<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05)"><span>'+r.name+'</span><span style="color:#a78bfa">'+r.score+'/100 '+r.trust+'</span></div>';
|
|
});
|
|
html += '</div>';
|
|
html += '<div><strong>Recommendations:</strong><br>';
|
|
(rec.recommendations||[]).forEach(function(r){
|
|
html += '<div style="padding:4px 0"><span style="color:#22c55e">'+r.score+'</span> '+r.name+'</div>';
|
|
});
|
|
html += '</div></div>';
|
|
if(window.showArtifact) window.showArtifact(html,'html');
|
|
}).catch(function(e){console.warn("SkillSmith:",e)});
|
|
};
|
|
|
|
// AIOS Kernel Dashboard
|
|
window.loadAIOSPanel = function() {
|
|
Promise.all([
|
|
fetch("/api/aios-api.php?action=status").then(r=>r.json()),
|
|
fetch("/api/aios-api.php?action=agents").then(r=>r.json()),
|
|
fetch("/api/aios-api.php?action=kernel").then(r=>r.json())
|
|
]).then(function(data) {
|
|
var s=data[0], ag=data[1], k=data[2];
|
|
var html = '<div style="padding:12px"><h3 style="color:#38bdf8;margin-bottom:12px">AIOS Kernel v0.3</h3>';
|
|
html += '<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px">';
|
|
var kern = s.kernel||{};
|
|
html += '<div style="background:rgba(56,189,248,0.1);padding:8px;border-radius:8px;text-align:center"><strong>'+((kern.tools||{}).registered||38)+'</strong><br><small>Tools</small></div>';
|
|
html += '<div style="background:rgba(56,189,248,0.1);padding:8px;border-radius:8px;text-align:center"><strong>'+((kern.tools||{}).apis||65)+'</strong><br><small>APIs</small></div>';
|
|
html += '<div style="background:rgba(56,189,248,0.1);padding:8px;border-radius:8px;text-align:center"><strong>'+((kern.llm_router||{}).providers||7)+'</strong><br><small>LLM Providers</small></div>';
|
|
html += '<div style="background:rgba(56,189,248,0.1);padding:8px;border-radius:8px;text-align:center"><strong>'+(s.agents||3)+'</strong><br><small>Agents Active</small></div>';
|
|
html += '</div>';
|
|
html += '<div><strong>Agents:</strong><br>';
|
|
(ag.agents||[]).forEach(function(a){
|
|
var color = a.status==="running"?"#22c55e":a.status==="ready"?"#f59e0b":"#64748b";
|
|
html += '<div style="display:flex;justify-content:space-between;padding:3px 0"><span>'+a.name+'</span><span style="color:'+color+'">'+a.status+'</span></div>';
|
|
});
|
|
html += '</div></div>';
|
|
if(window.showArtifact) window.showArtifact(html,'html');
|
|
}).catch(function(e){console.warn("AIOS:",e)});
|
|
};
|
|
|
|
// Auto-register in Manager toggle system
|
|
(function(){
|
|
setTimeout(function(){
|
|
var toggleArea = document.querySelector(".toggles, .tools-grid, #tools-panel, .capabilities");
|
|
if (!toggleArea) return;
|
|
var newToggles = [
|
|
{id:"aegis",label:"AEGIS Security",fn:"loadAegisPanel",color:"#22c55e"},
|
|
{id:"skillsmith",label:"SkillSmith 20K",fn:"loadSkillSmithPanel",color:"#a78bfa"},
|
|
{id:"aios",label:"AIOS Kernel",fn:"loadAIOSPanel",color:"#38bdf8"}
|
|
];
|
|
newToggles.forEach(function(t){
|
|
if(document.getElementById("toggle-"+t.id)) return;
|
|
var btn = document.createElement("button");
|
|
btn.id = "toggle-"+t.id;
|
|
btn.textContent = t.label;
|
|
btn.style.cssText = "background:rgba(255,255,255,0.05);border:1px solid "+t.color+";color:"+t.color+";padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;margin:4px";
|
|
btn.onclick = function(){window[t.fn]()};
|
|
toggleArea.appendChild(btn);
|
|
});
|
|
}, 3000);
|
|
})();
|