Manager v3: Mermaid inline + Syntax highlight + LiveMetrics header + CSS v2
This commit is contained in:
13
api/live-metrics.php
Normal file
13
api/live-metrics.php
Normal 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]);
|
||||
@@ -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)}
|
||||
|
||||
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user