projects/oc-monitor/oc-monitor-design.html

<!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>