16 lines
6.1 KiB
HTML
16 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KimiFleet</title>
|
|
<style>
|
|
:root{color-scheme:dark;--bg:#0b1020;--panel:#121a31;--line:#253252;--text:#edf2ff;--muted:#98a7ca;--accent:#76a7ff;--ok:#50d7a1;--warn:#ffc46b;--bad:#ff7777}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#19274b,#0b1020 58%);color:var(--text);font:14px Inter,ui-sans-serif,system-ui}header{padding:28px max(6vw,24px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}h1{margin:0;font-size:25px;letter-spacing:-.6px}.sub{color:var(--muted);margin-top:5px}.live{color:var(--ok);font-weight:700}.dot{width:9px;height:9px;display:inline-block;border-radius:50%;background:var(--ok);margin-right:7px;box-shadow:0 0 14px var(--ok)}main{max-width:1280px;margin:0 auto;padding:26px;display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.panel{background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 16px 40px #0003}h2{margin:0 0 15px;font-size:15px}.agents{display:grid;gap:12px}.agent{padding:15px;border:1px solid var(--line);border-radius:12px;background:#0d152a}.agent-top{display:flex;justify-content:space-between;align-items:center}.name{font-weight:750;font-size:16px}.badge{padding:4px 9px;border-radius:999px;background:#1a2b4c;color:var(--accent);font-size:12px}.state-ready{color:var(--ok)}.state-working{color:var(--warn)}.state-error{color:var(--bad)}.meta{color:var(--muted);font-size:12px;margin-top:8px}.now{display:flex;align-items:center;gap:8px;margin-top:13px;padding:9px 10px;border-radius:8px;background:#101c33;color:#d8e4ff}.now-mark{width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 10px var(--warn);flex:none}.now.ready .now-mark{background:var(--ok);box-shadow:0 0 10px var(--ok)}.now.error .now-mark{background:var(--bad);box-shadow:0 0 10px var(--bad)}.now-label{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted)}.now-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scopes{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}.scope{font:11px ui-monospace,monospace;background:#17223d;border-radius:5px;padding:3px 6px;color:#c0cdf1}.events{height:600px;overflow:auto;display:flex;flex-direction:column-reverse;gap:8px}.event{border-left:3px solid var(--accent);background:#0d152a;border-radius:0 8px 8px 0;padding:10px 11px}.event-head{font-size:12px;color:var(--muted);margin-bottom:4px}.event-body{line-height:1.35;word-break:break-word}.empty{color:var(--muted);padding:18px 3px}@media(max-width:850px){main{grid-template-columns:1fr}.events{height:360px}}
|
|
</style></head><body><header><div><h1>KimiFleet</h1><div class="sub">MCP-controlled Kimi K3 agent fleet</div></div><div class="live"><span class="dot"></span>LIVE</div></header><main><section class="panel"><h2>Agents</h2><div id="agents" class="agents"><div class="empty">Loading agents…</div></div></section><section class="panel"><h2>Activity</h2><div id="events" class="events"><div class="empty">Waiting for events…</div></div></section></main>
|
|
<script>
|
|
const agents=document.querySelector('#agents'),events=document.querySelector('#events'),activityByAgent=new Map();
|
|
const esc=s=>String(s??'').replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
|
function drawAgents(items){agents.innerHTML=items.length?items.map(a=>{const activity=activityByAgent.get(a.name)||a.activity||(a.state==='ready'?'Ready for a task':'Synchronizing live activity…');return `<article class="agent"><div class="agent-top"><div><span class="name">${esc(a.name)}</span> <span class="badge">${esc(a.role)}</span></div><b class="state-${esc(a.state)}">${esc(a.state)}</b></div><div class="meta">${esc(a.workspace)}</div><div class="now ${esc(a.state)}" title="${esc(activity)}"><span class="now-mark"></span><span class="now-label">NOW</span><span class="now-text">${esc(activity)}</span></div><div class="scopes">${(a.scopes||[]).map(s=>`<span class="scope">${esc(s)}</span>`).join('')||'<span class="meta">No exclusive scopes</span>'}</div></article>`}).join(''):'<div class="empty">No agents yet. Create one through the MCP tool or REST API.</div>'}
|
|
async function refresh(){try{drawAgents(await (await fetch('/agents')).json())}catch{agents.innerHTML='<div class="empty">Dashboard cannot reach KimiFleet.</div>'}}
|
|
function add(e){const live=activity(e);if(live)activityByAgent.set(e.agent,live);const text=pretty(e);if(text===null)return;events.querySelector('.empty')?.remove();const time=new Date(e.time).toLocaleTimeString();const row=document.createElement('article');row.className='event';row.innerHTML=`<div class="event-head">${esc(time)} · ${esc(e.agent)} · ${esc(e.kind)}</div><div class="event-body">${esc(text)}</div>`;events.prepend(row);while(events.children.length>140)events.removeChild(events.lastChild)}
|
|
function pretty(e){if(e.kind!=='session/update')return e.message;try{const u=JSON.parse(e.message).update;if(u.sessionUpdate==='tool_call_update')return `${u.title||'Tool call'} — ${u.status||'in progress'}`;if(['agent_thought_chunk','agent_message_chunk','available_commands_update','tool_call'].includes(u.sessionUpdate))return null;return u.sessionUpdate||'session update'}catch{return e.message}}
|
|
function activity(e){if(e.kind==='prompt')return 'Planning assigned task';if(e.kind==='completed')return 'Ready for a task';if(e.kind==='permission')return 'Approving requested action';if(e.kind!=='session/update')return null;try{const u=JSON.parse(e.message).update;if(u.sessionUpdate==='tool_call'){if(u.kind==='read')return 'Reading project files';if(u.kind==='bash')return 'Running a project command';return u.title||'Executing a tool'}if(u.sessionUpdate==='tool_call_update')return u.title||null;if(u.sessionUpdate==='agent_thought_chunk')return 'Analyzing task';if(u.sessionUpdate==='agent_message_chunk')return 'Preparing a report';return null}catch{return null}}
|
|
new EventSource('/events').onmessage=x=>{add(JSON.parse(x.data));refresh()};refresh();setInterval(refresh,5000);
|
|
</script></body></html>
|