Files
vps-management-bot/projects/oc-monitor/oc-monitor-design.html
2026-03-21 01:10:53 +08:00

201 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>OpenClaw Mission Control — 顶尖</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#060a10;--card:#0d1520;--card2:#111c2e;--border:#1a2740;--txt:#c8d6e5;--dim:#5a6f88;--neon:#00e5ff;--green:#00ff88;--warn:#ffb020;--err:#ff4466;--purple:#b8a9ff;--peach:#ffb088}
body{font-family:'SF Mono',Menlo,'Courier New',monospace;background:var(--bg);color:var(--txt);padding:16px}
.wrap{max-width:1200px;margin:0 auto}
h1{font-size:1.3em;color:var(--neon);margin-bottom:4px}
.sub{color:var(--dim);font-size:.75em;margin-bottom:20px}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:20px}
.st{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px;text-align:center}
.st .n{font-size:1.5em;font-weight:700}.st .l{font-size:.7em;color:var(--dim);margin-top:2px}
.s1 .n{color:var(--neon)}.s2 .n{color:var(--purple)}.s3 .n{color:var(--peach)}.s4 .n{color:var(--green)}.s5 .n{color:var(--warn)}.s6 .n{color:var(--err)}
.tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--border)}
.tab{padding:8px 20px;cursor:pointer;color:var(--dim);font-size:.85em;border-bottom:2px solid transparent}
.tab.on{color:var(--neon);border-bottom-color:var(--neon)}
.tp{display:none}.tp.on{display:block}
.nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-bottom:20px}
.nd{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
.nd-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.nd-nm{font-size:1.05em;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.dot.on{background:var(--green);box-shadow:0 0 6px var(--green)}.dot.off{background:var(--err)}
.tg{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.tg span{font-size:.63em;padding:2px 7px;border-radius:10px;background:var(--card2);color:var(--dim);border:1px solid var(--border)}
.tg .ms{color:var(--neon);border-color:rgba(0,229,255,.3)}.tg .wk{color:var(--purple);border-color:rgba(184,169,255,.3)}
.hb{height:28px;display:flex;align-items:end;gap:1px;margin-bottom:8px;overflow:hidden}
.hb i{width:3px;border-radius:1px;background:var(--neon);opacity:.6}
.sec{font-size:.72em;color:var(--dim);margin-bottom:4px}
.pv{display:flex;justify-content:space-between;padding:3px 0;font-size:.78em}
.pv-l{display:flex;gap:5px;align-items:center}
.star{color:var(--warn);font-size:.7em}
.pm{color:var(--dim);font-size:.85em}
.ok{color:var(--green)}.er{color:var(--err)}.ms{color:var(--dim);font-size:.85em}
.gs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
.g{font-size:.7em}.g-l{color:var(--dim)}.g-t{height:4px;background:var(--card2);border-radius:2px;margin:2px 0}
.g-f{height:100%;border-radius:2px}.fg{background:var(--green)}.fb{background:var(--neon)}.fw{background:var(--warn)}.fr{background:var(--err)}
.g-n{font-weight:600}
.tks{display:flex;gap:10px;margin:8px 0}
.tk{flex:1;text-align:center;background:var(--card2);border-radius:6px;padding:5px}
.tk-l{font-size:.63em;color:var(--dim)}.tk-v{font-size:.85em;font-weight:600;color:var(--neon)}
.nd-f{display:flex;gap:8px;font-size:.68em;color:var(--dim);flex-wrap:wrap}
.mx{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:20px}
.mx-h{font-size:.9em;font-weight:600;margin-bottom:10px;color:var(--neon)}
table{width:100%;border-collapse:collapse;font-size:.78em}
th{text-align:left;padding:6px 10px;color:var(--dim);border-bottom:1px solid var(--border);font-weight:500}
td{padding:6px 10px;border-bottom:1px solid rgba(26,39,64,.5)}
.lt{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
.lt-h{font-size:.9em;font-weight:600;margin-bottom:10px;color:var(--purple)}
.lf{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.lf select,.lf input{background:var(--card2);border:1px solid var(--border);color:var(--txt);padding:4px 10px;border-radius:6px;font-size:.78em;font-family:inherit}
.lt td{font-size:.73em}
</style>
</head>
<body>
<div class="wrap">
<h1>🐾 OpenClaw Mission Control</h1>
<div class="sub">顶尖的 AI 基础设施 · 4 nodes · 6 providers · Updated 2026-02-22 17:30</div>
<div class="stats">
<div class="st s1"><div class="n">4</div><div class="l">NODES ONLINE</div></div>
<div class="st s2"><div class="n">1,247</div><div class="l">TODAY REQUESTS</div></div>
<div class="st s3"><div class="n">2.8M</div><div class="l">INPUT TOKENS</div></div>
<div class="st s4"><div class="n">99.2%</div><div class="l">SUCCESS RATE</div></div>
<div class="st s5"><div class="n">6.8s</div><div class="l">AVG TTFT</div></div>
<div class="st s6"><div class="n">8.5s</div><div class="l">AVG LATENCY</div></div>
</div>
<div class="tabs">
<div class="tab on" onclick="sw('nodes')">🖥 Nodes</div>
<div class="tab" onclick="sw('matrix')">📊 Provider Matrix</div>
<div class="tab" onclick="sw('logs')">📋 Request Logs</div>
</div>
<div class="tp on" id="t-nodes">
<div class="nodes">
<div class="nd">
<div class="nd-h"><div><span class="dot on"></span><span class="nd-nm">Mac mini</span></div><span style="font-size:.7em;color:var(--dim)">192.168.1.5</span></div>
<div class="tg"><span class="ms">Master</span><span>OC 2026.2.21</span><span>macOS 26.1 arm64</span></div>
<div class="hb" id="h1"></div>
<div class="sec">Providers</div>
<div class="pv"><div class="pv-l"><span class="star"></span>newcli <span class="pm">opus-4-6</span></div><div><span class="ok"></span> <span class="ms">2.1s</span></div></div>
<div class="pv"><div class="pv-l">bookapi <span class="pm">opus-4-6</span></div><div><span class="ok"></span> <span class="ms">1.8s</span></div></div>
<div class="pv"><div class="pv-l">terminalpub <span class="pm">opus-4-6</span></div><div><span class="ok"></span> <span class="ms">3.2s</span></div></div>
<div class="pv"><div class="pv-l">volcengine <span class="pm">doubao-1.8</span></div><div><span class="ok"></span> <span class="ms">0.9s</span></div></div>
<div class="pv"><div class="pv-l">xstx <span class="pm">opus-4.5</span></div><div><span class="er"></span> <span class="ms">timeout</span></div></div>
<div class="gs">
<div class="g"><span class="g-l">cpu</span><div class="g-t"><div class="g-f fg" style="width:23%"></div></div><span class="g-n">23%</span></div>
<div class="g"><span class="g-l">mem</span><div class="g-t"><div class="g-f fb" style="width:72%"></div></div><span class="g-n">72%</span></div>
<div class="g"><span class="g-l">disk</span><div class="g-t"><div class="g-f fg" style="width:45%"></div></div><span class="g-n">45%</span></div>
<div class="g"><span class="g-l">swap</span><div class="g-t"><div class="g-f fg" style="width:12%"></div></div><span class="g-n">12%</span></div>
</div>
<div class="tks"><div class="tk"><div class="tk-l">Today</div><div class="tk-v">180K</div></div><div class="tk"><div class="tk-l">Week</div><div class="tk-v">1.2M</div></div><div class="tk"><div class="tk-l">Month</div><div class="tk-v">4.8M</div></div></div>
<div class="nd-f"><span>⏱ 5d 12h</span><span>📡 8 sessions</span><span>⚡ gw ✓</span><span>🐾 daemon ✓</span></div>
</div>
<div class="nd">
<div class="nd-h"><div><span class="dot on"></span><span class="nd-nm">HDY</span></div><span style="font-size:.7em;color:var(--dim)">38.76.204.161</span></div>
<div class="tg"><span class="wk">Worker</span><span>OC 2026.2.17</span><span>Debian 13 x64</span></div>
<div class="hb" id="h2"></div>
<div class="sec">Providers</div>
<div class="pv"><div class="pv-l"><span class="star"></span>newcli <span class="pm">opus-4-6</span></div><div><span class="ok"></span> <span class="ms">1.9s</span></div></div>
<div class="pv"><div class="pv-l">volcengine <span class="pm">doubao-1.8</span></div><div><span class="ok"></span> <span class="ms">1.1s</span></div></div>
<div class="gs">
<div class="g"><span class="g-l">cpu</span><div class="g-t"><div class="g-f fg" style="width:8%"></div></div><span class="g-n">8%</span></div>
<div class="g"><span class="g-l">mem</span><div class="g-t"><div class="g-f fg" style="width:35%"></div></div><span class="g-n">35%</span></div>
<div class="g"><span class="g-l">disk</span><div class="g-t"><div class="g-f fg" style="width:28%"></div></div><span class="g-n">28%</span></div>
<div class="g"><span class="g-l">swap</span><div class="g-t"><div class="g-f fg" style="width:0%"></div></div><span class="g-n">0%</span></div>
</div>
<div class="tks"><div class="tk"><div class="tk-l">Today</div><div class="tk-v">45K</div></div><div class="tk"><div class="tk-l">Week</div><div class="tk-v">320K</div></div><div class="tk"><div class="tk-l">Month</div><div class="tk-v">1.1M</div></div></div>
<div class="nd-f"><span>⏱ 12d 3h</span><span>📡 3 sessions</span><span>⚡ gw ✓</span><span>🐾 daemon ✓</span></div>
</div>
<div class="nd">
<div class="nd-h"><div><span class="dot on"></span><span class="nd-nm">OC2</span></div><span style="font-size:.7em;color:var(--dim)">155.103.66.237</span></div>
<div class="tg"><span class="wk">Worker</span><span>OC 2026.2.19</span><span>Debian 13 x64</span></div>
<div class="hb" id="h3"></div>
<div class="sec">Providers</div>
<div class="pv"><div class="pv-l"><span class="star"></span>newcli <span class="pm">opus-4-6</span></div><div><span class="ok"></span> <span class="ms">2.4s</span></div></div>
<div class="pv"><div class="pv-l">terminalpub <span class="pm">opus-4-6</span></div><div><span class="ok"></span> <span class="ms">2.8s</span></div></div>
<div class="gs">
<div class="g"><span class="g-l">cpu</span><div class="g-t"><div class="g-f fg" style="width:5%"></div></div><span class="g-n">5%</span></div>
<div class="g"><span class="g-l">mem</span><div class="g-t"><div class="g-f fg" style="width:42%"></div></div><span class="g-n">42%</span></div>
<div class="g"><span class="g-l">disk</span><div class="g-t"><div class="g-f fg" style="width:15%"></div></div><span class="g-n">15%</span></div>
<div class="g"><span class="g-l">swap</span><div class="g-t"><div class="g-f fg" style="width:0%"></div></div><span class="g-n">0%</span></div>
</div>
<div class="tks"><div class="tk"><div class="tk-l">Today</div><div class="tk-v">62K</div></div><div class="tk"><div class="tk-l">Week</div><div class="tk-v">410K</div></div><div class="tk"><div class="tk-l">Month</div><div class="tk-v">1.5M</div></div></div>
<div class="nd-f"><span>⏱ 8d 7h</span><span>📡 4 sessions</span><span>⚡ gw ✓</span><span>🐾 daemon ✓</span></div>
</div>
<div class="nd" style="border-color:rgba(255,68,102,.3)">
<div class="nd-h"><div><span class="dot off"></span><span class="nd-nm">OC3</span></div><span style="font-size:.7em;color:var(--err)">173.249.215.67</span></div>
<div class="tg"><span class="wk">Worker</span><span>OC 2026.2.15</span><span>Debian 12 x64</span></div>
<div class="hb" id="h4"></div>
<div class="sec">Providers</div>
<div class="pv"><div class="pv-l">newcli <span class="pm">opus-4-6</span></div><div><span class="er"></span> <span class="ms">timeout</span></div></div>
<div class="gs">
<div class="g"><span class="g-l">cpu</span><div class="g-t"><div class="g-f fg" style="width:0%"></div></div><span class="g-n"></span></div>
<div class="g"><span class="g-l">mem</span><div class="g-t"><div class="g-f fg" style="width:0%"></div></div><span class="g-n"></span></div>
<div class="g"><span class="g-l">disk</span><div class="g-t"><div class="g-f fg" style="width:0%"></div></div><span class="g-n"></span></div>
<div class="g"><span class="g-l">swap</span><div class="g-t"><div class="g-f fg" style="width:0%"></div></div><span class="g-n"></span></div>
</div>
<div class="tks"><div class="tk"><div class="tk-l">Today</div><div class="tk-v" style="color:var(--dim)">0</div></div><div class="tk"><div class="tk-l">Week</div><div class="tk-v">85K</div></div><div class="tk"><div class="tk-l">Month</div><div class="tk-v">340K</div></div></div>
<div class="nd-f" style="color:var(--err)"><span>⚠ offline 2h ago</span><span>📡 0 sessions</span><span>⚡ gw ✗</span></div>
</div>
</div></div>
<div class="tp" id="t-matrix">
<div class="mx">
<div class="mx-h">Provider × Node Matrix</div>
<table>
<thead><tr><th>Provider</th><th>Mac mini</th><th>HDY</th><th>OC2</th><th>OC3</th></tr></thead>
<tbody>
<tr><td>newcli (opus-4-6)</td><td class="ok">✓ 2.1s</td><td class="ok">✓ 1.9s</td><td class="ok">✓ 2.4s</td><td class="er">✗ timeout</td></tr>
<tr><td>bookapi (opus-4-6)</td><td class="ok">✓ 1.8s</td><td style="color:var(--dim)"></td><td style="color:var(--dim)"></td><td style="color:var(--dim)"></td></tr>
<tr><td>terminalpub (opus-4-6)</td><td class="ok">✓ 3.2s</td><td style="color:var(--dim)"></td><td class="ok">✓ 2.8s</td><td style="color:var(--dim)"></td></tr>
<tr><td>volcengine (doubao-1.8)</td><td class="ok">✓ 0.9s</td><td class="ok">✓ 1.1s</td><td style="color:var(--dim)"></td><td style="color:var(--dim)"></td></tr>
<tr><td>xstx (opus-4.5)</td><td class="er">✗ timeout</td><td style="color:var(--dim)"></td><td style="color:var(--dim)"></td><td style="color:var(--dim)"></td></tr>
</tbody>
</table>
</div></div>
<div class="tp" id="t-logs">
<div class="lt">
<div class="lt-h">Request Logs</div>
<div class="lf">
<input type="date" value="2026-02-22">
<select><option>All Nodes</option><option>Mac mini</option><option>HDY</option><option>OC2</option><option>OC3</option></select>
<select><option>All Upstream</option><option>newcli</option><option>bookapi</option><option>terminalpub</option><option>volcengine</option></select>
<select><option>All Results</option><option>✓ Success</option><option>✗ Failed</option></select>
</div>
<table>
<thead><tr><th>时间</th><th>Node</th><th>Upstream</th><th>Model</th><th>Result</th><th>Status</th><th>输入</th><th>输出</th><th>TTFT</th><th>总耗时</th></tr></thead>
<tbody>
<tr><td>17:30:48</td><td>Mac mini</td><td>newcli</td><td>opus-4-6</td><td class="ok"></td><td>200</td><td>179.6K</td><td>29</td><td style="color:var(--warn)">10191ms</td><td>10.3s</td></tr>
<tr><td>17:30:38</td><td>Mac mini</td><td>newcli</td><td>opus-4-6</td><td class="ok"></td><td>200</td><td>176.9K</td><td>41</td><td style="color:var(--warn)">8819ms</td><td>9.6s</td></tr>
<tr><td>17:30:28</td><td>HDY</td><td>newcli</td><td>opus-4-6</td><td class="ok"></td><td>200</td><td>52.3K</td><td>156</td><td style="color:var(--warn)">4210ms</td><td>6.1s</td></tr>
<tr><td>17:30:20</td><td>OC2</td><td>terminalpub</td><td>opus-4-6</td><td class="ok"></td><td>200</td><td>88.1K</td><td>43</td><td style="color:var(--warn)">7346ms</td><td>7.6s</td></tr>
<tr><td>17:30:13</td><td>Mac mini</td><td>bookapi</td><td>opus-4-6</td><td class="ok"></td><td>200</td><td>167.8K</td><td>41</td><td style="color:var(--warn)">8602ms</td><td>8.9s</td></tr>
<tr><td>17:30:04</td><td>Mac mini</td><td>volcengine</td><td>doubao-1.8</td><td class="ok"></td><td>200</td><td>12.5K</td><td>320</td><td style="color:var(--green)">890ms</td><td>2.1s</td></tr>
<tr><td>17:29:56</td><td>HDY</td><td>volcengine</td><td>doubao-1.8</td><td class="ok"></td><td>200</td><td>8.2K</td><td>215</td><td style="color:var(--green)">1100ms</td><td>2.8s</td></tr>
<tr><td>17:29:48</td><td>OC3</td><td>newcli</td><td>opus-4-6</td><td class="er"></td><td>504</td><td>45.0K</td><td>0</td><td style="color:var(--err)">30000ms</td><td>30.0s</td></tr>
<tr><td>17:29:39</td><td>Mac mini</td><td>newcli</td><td>opus-4-6</td><td class="ok"></td><td>200</td><td>155.4K</td><td>44</td><td style="color:var(--warn)">6904ms</td><td>7.1s</td></tr>
<tr><td>17:29:32</td><td>OC2</td><td>newcli</td><td>opus-4-6</td><td class="ok"></td><td>200</td><td>91.2K</td><td>89</td><td style="color:var(--warn)">5530ms</td><td>6.8s</td></tr>
</tbody>
</table>
</div></div>
</div>
<script>
function sw(t){document.querySelectorAll('.tab').forEach(e=>e.classList.remove('on'));document.querySelectorAll('.tp').forEach(e=>e.classList.remove('on'));document.querySelector('.tab[onclick*="'+t+'"]').classList.add('on');document.getElementById('t-'+t).classList.add('on')}
['h1','h2','h3','h4'].forEach(id=>{const el=document.getElementById(id);if(!el)return;const off=id==='h4';for(let i=0;i<60;i++){const b=document.createElement('i');b.style.height=(off?0:Math.random()*20+4)+'px';b.style.background=off?'var(--err)':'var(--neon)';b.style.opacity=off?'.2':(.3+Math.random()*.5);el.appendChild(b)}});
</script>
</body></html>