Manager v3: Mermaid inline + Syntax highlight + LiveMetrics header + CSS v2

This commit is contained in:
WEVAL Deploy
2026-03-29 00:14:58 +01:00
parent 13bfb15867
commit 8078dee97d
3 changed files with 59 additions and 2 deletions

13
api/live-metrics.php Normal file
View File

@@ -0,0 +1,13 @@
<?php
header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *");
$disk = "?";
exec("df / --output=pcent | tail -1", $o); if($o) $disk = trim($o[0]);
$ram = "?";
exec("free -m | grep Mem", $o2); if($o2){ $p=preg_split("/\s+/",trim($o2[0])); $ram=round($p[2]/1024,1)."G/".round($p[1]/1024,1)."G"; }
$om = 0;
$oj = @file_get_contents("http://localhost:11434/api/tags");
if ($oj) { $od = json_decode($oj, true); if($od) $om = count($od["models"] ?? []); }
$up = "?";
exec("uptime -p", $o3); if($o3) $up = str_replace("up ","",trim($o3[0]));
echo json_encode(["disk"=>$disk,"ram"=>$ram,"ollama"=>$om,"uptime"=>$up]);

View File

@@ -73,3 +73,17 @@ div[style*="BladeRazor"][style*="borderRadius"]{
transition:all 0.2s!important;
box-shadow:0 2px 8px rgba(0,0,0,0.2)!important
}
/* === MERMAID DIAGRAMS === */
div[style*="minHeight:60"] svg{max-width:100%;height:auto}
div[style*="minHeight:60"]{overflow-x:auto}
/* === HIGHLIGHT.JS OVERRIDES === */
pre code.hljs{background:transparent!important;padding:0!important}
.hljs{background:transparent!important}
/* === LIVE METRICS BADGES === */
div[style*="letterSpacing:"0.3px""][style*="fontSize:8"]{animation:fadeIn 0.5s ease-out;backdrop-filter:blur(4px)}
/* === ENHANCED MESSAGE BUBBLES === */
div[style*="marginBottom:10"][style*="animation"]{backdrop-filter:blur(2px)}

View File

@@ -20,6 +20,10 @@ a.ext{color:var(--a2);text-decoration:none;font-size:9px;padding:2px 6px;border-
a.ext:hover{border-color:var(--a2)}
</style>
<link rel=\stylesheet\ href=\/assets/manager-v2.css\>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:false,theme:"dark",securityLevel:"loose",logLevel:5})</script>
</head>
<body>
<div id="root"></div>
@@ -41,7 +45,7 @@ function md(text){
for(var i=0;i<lines.length;i++){
var line=lines[i];
if(line.match(/^```/)){
if(inCode){out.push(h("pre",{key:"c"+i,className:"m",style:{background:"#0d1117",border:"1px solid var(--bd)",borderRadius:5,padding:8,margin:"6px 0",fontSize:10,color:"#e6edf3",overflowX:"auto",lineHeight:1.5}},h("code",null,codeBuf.join("\n"))));codeBuf=[];inCode=false}
if(inCode){if(codeLang==="mermaid"){var mid="mm"+i+Math.random().toString(36).slice(2,6);out.push(h("div",{key:"c"+i,ref:function(el){if(el&&window.mermaid){try{window.mermaid.render(mid,codeBuf.join("\n")).then(function(r){el.innerHTML=r.svg}).catch(function(e){el.textContent=codeBuf.join("\n")})}catch(e){el.textContent=codeBuf.join("\n")}}},style:{background:"#0d1117",border:"1px solid rgba(0,229,160,0.1)",borderRadius:10,padding:16,margin:"10px 0",minHeight:60}}))}else{out.push(h("pre",{key:"c"+i,className:"m",ref:function(el){if(el&&window.hljs){var code=el.querySelector("code");if(code&&!code.dataset.hl){try{window.hljs.highlightElement(code)}catch(e){}code.dataset.hl="1"}}},style:{background:"#0d1117",border:"1px solid rgba(0,229,160,0.08)",borderRadius:10,padding:14,margin:"10px 0",fontSize:11,color:"#e6edf3",overflowX:"auto",lineHeight:1.6}},h("code",{className:codeLang?"language-"+codeLang:""},codeBuf.join("\n"))))};codeBuf=[];inCode=false}
else{codeLang=line.slice(3);inCode=true}
}else if(inCode){codeBuf.push(line)}
else if(line.match(/^### /)){out.push(h("div",{key:"h"+i,style:{fontSize:11,fontWeight:700,color:"var(--a2)",margin:"8px 0 4px"}},line.slice(4)))}
@@ -69,6 +73,32 @@ function inlineFormat(s){
return parts.length?parts:s;
}
/* === LIVE METRICS === */
function LiveMetrics(){
var d=useState(null),data=d[0],setData=d[1];
useEffect(function(){
function load(){
fetch("/api/live-metrics.php").then(function(r){return r.json()}).then(setData).catch(function(){});
}
load();var t=setInterval(load,30000);return function(){clearInterval(t)};
},[]);
if(!data)return null;
var items=[
{l:"Disk",v:data.disk||"?",c:parseInt(data.disk)>85?"var(--er)":"var(--ac)"},
{l:"RAM",v:data.ram||"?",c:"var(--a2)"},
{l:"Ollama",v:(data.ollama||"?")+" mdl",c:"var(--pu)"},
{l:"Up",v:data.uptime||"?",c:"var(--ac)"}
];
return h("div",{style:{display:"flex",gap:8,alignItems:"center"}},
items.map(function(it,i){
return h("div",{key:i,className:"m",style:{fontSize:8,padding:"3px 8px",borderRadius:6,background:it.c+"11",border:"1px solid "+it.c+"33",color:it.c,letterSpacing:"0.3px",whiteSpace:"nowrap"}},
h("span",{style:{opacity:0.7}},it.l+": "),h("span",{style:{fontWeight:600}},it.v)
);
})
);
}
/* TABS */
var TABS=[
{id:"manager",icon:"\u2605",label:"Manager"},{id:"monitor",icon:"\u25C9",label:"Monitor"},{id:"term",icon:">",label:"Terminal"},
@@ -264,7 +294,7 @@ function ManagerPanel(){
h("div",{style:{fontSize:12,fontWeight:700,background:"linear-gradient(90deg,var(--ac),var(--a2))",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent"}},"WEVAL Manager - Unified AI Brain"),
h("div",{className:"m",style:{fontSize:8,color:"var(--dm)",marginTop:2}},[kb,git,infra,sql,crm,deer,nuclei_t,play,harvest,crab,mm,searx,toolfk,pdf,cons,chain,codeExec,seq].filter(Boolean).length+" / 22 caps active | 9 agents | "+CAPS.length+" capabilities")
),
h("button",{onClick:function(){setShow("caps")},className:"m",style:{padding:"4px 10px",borderRadius:4,border:"1px solid var(--pu)",background:"var(--pu)11",color:"var(--pu)",fontSize:8}},CAPS.length+" capabilities")
h("button",{onClick:function(){setShow("caps")},className:"m",style:{padding:"4px 10px",borderRadius:4,border:"1px solid var(--pu)",background:"var(--pu)11",color:"var(--pu)",fontSize:8}},CAPS.length+" capabilities"),h(LiveMetrics,null)
),
// Capability toggles bar
show==="caps"?capsOverlay: