feat: add swarm strip to dashboard
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
William Valentin
+493
-194
@@ -1,4 +1,43 @@
|
||||
(function() {
|
||||
|
||||
// ── Theme toggle ─────────────────────────────────────────
|
||||
const THEME_CYCLE = ['system', 'light', 'dark'];
|
||||
const THEME_ICONS = {
|
||||
system: '<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="2" width="14" height="10" rx="1.5"/><path d="M5 15h6M8 12v3"/></svg>',
|
||||
light: '<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="3"/><line x1="8" y1="1" x2="8" y2="3"/><line x1="8" y1="13" x2="8" y2="15"/><line x1="1" y1="8" x2="3" y2="8"/><line x1="13" y1="8" x2="15" y2="8"/><line x1="3.05" y1="3.05" x2="4.46" y2="4.46"/><line x1="11.54" y1="11.54" x2="12.95" y2="12.95"/><line x1="12.95" y1="3.05" x2="11.54" y2="4.46"/><line x1="4.46" y1="11.54" x2="3.05" y2="12.95"/></svg>',
|
||||
dark: '<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 10a5 5 0 1 1-7-7 6 6 0 0 0 7 7z"/></svg>',
|
||||
};
|
||||
const THEME_LABELS = { system: 'System theme', light: 'Light theme', dark: 'Dark theme' };
|
||||
|
||||
function getTheme() { return localStorage.getItem('theme') || 'system'; }
|
||||
|
||||
function applyTheme(theme) {
|
||||
if (theme === 'system') document.documentElement.removeAttribute('data-theme');
|
||||
else document.documentElement.setAttribute('data-theme', theme);
|
||||
}
|
||||
|
||||
function updateToggleBtn(theme) {
|
||||
const btn = document.getElementById('theme-toggle');
|
||||
if (!btn) return;
|
||||
btn.innerHTML = THEME_ICONS[theme];
|
||||
btn.title = THEME_LABELS[theme];
|
||||
}
|
||||
|
||||
function cycleTheme() {
|
||||
const next = THEME_CYCLE[(THEME_CYCLE.indexOf(getTheme()) + 1) % THEME_CYCLE.length];
|
||||
if (next === 'system') localStorage.removeItem('theme');
|
||||
else localStorage.setItem('theme', next);
|
||||
applyTheme(next);
|
||||
updateToggleBtn(next);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateToggleBtn(getTheme());
|
||||
const btn = document.getElementById('theme-toggle');
|
||||
if (btn) btn.addEventListener('click', cycleTheme);
|
||||
});
|
||||
// ─────────────────────────────────────────────────────────
|
||||
|
||||
const app = document.getElementById('app');
|
||||
|
||||
let ws = null;
|
||||
@@ -6,8 +45,10 @@
|
||||
const wsCallbacks = new Set();
|
||||
|
||||
let sessionsState = { sessions: [], cursor: null };
|
||||
let sessionsUnsubscribe = null;
|
||||
let openclawState = { instances: {} };
|
||||
let openclawUnsubscribe = null;
|
||||
let swarmState = { services: {} }; // keyed by service name
|
||||
let agentsState = createAgentsState();
|
||||
let agentsUnsubscribe = null;
|
||||
let dashboardState = null;
|
||||
@@ -74,6 +115,14 @@
|
||||
agentsUnsubscribe();
|
||||
agentsUnsubscribe = null;
|
||||
}
|
||||
if (sessionsState && sessionsState.timerInterval) {
|
||||
clearInterval(sessionsState.timerInterval);
|
||||
sessionsState.timerInterval = null;
|
||||
}
|
||||
if (sessionsUnsubscribe) {
|
||||
sessionsUnsubscribe();
|
||||
sessionsUnsubscribe = null;
|
||||
}
|
||||
if (dashboardUnsubscribe) {
|
||||
dashboardUnsubscribe();
|
||||
dashboardUnsubscribe = null;
|
||||
@@ -86,6 +135,10 @@
|
||||
dashboardResizeObserver.disconnect();
|
||||
dashboardResizeObserver = null;
|
||||
}
|
||||
if (agentsState && agentsState.timerInterval) {
|
||||
clearInterval(agentsState.timerInterval);
|
||||
agentsState.timerInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
function route() {
|
||||
@@ -136,6 +189,8 @@
|
||||
return resp.json();
|
||||
}
|
||||
|
||||
function tryParseJSON(s) { try { return s ? JSON.parse(s) : null; } catch { return null; } }
|
||||
|
||||
function escapeHTML(value) {
|
||||
return String(value ?? '')
|
||||
.replace(/&/g, '&')
|
||||
@@ -277,8 +332,96 @@
|
||||
|
||||
document.getElementById('load-more').addEventListener('click', loadSessions);
|
||||
|
||||
sessionsState = { sessions: [], cursor: null };
|
||||
sessionsState = { sessions: [], cursor: null, timerInterval: null };
|
||||
await loadSessions();
|
||||
|
||||
sessionsState.timerInterval = setInterval(updateSessionTimers, 30000);
|
||||
sessionsUnsubscribe = subscribeWS(handleSessionsWS);
|
||||
}
|
||||
|
||||
function isSessionActive(s) { return !s.ended_at; }
|
||||
|
||||
function renderSessionRow(s) {
|
||||
const fw = s.framework || 'unknown';
|
||||
const fwClass = fw.replace(/[^a-z0-9-]/g, '-');
|
||||
const active = isSessionActive(s);
|
||||
const dotState = active ? 'active' : 'ended';
|
||||
const dotTitle = active ? 'Active session' : 'Session ended';
|
||||
return `
|
||||
<td class="id-cell">${escapeHTML(s.session_id.substring(0, 12))}…</td>
|
||||
<td><span class="fw-dot ${escapeHTML(fwClass)} ${dotState}" title="${dotTitle}"></span>${escapeHTML(fw)}</td>
|
||||
<td>${escapeHTML(s.host || '-')}</td>
|
||||
<td>${s.run_count}</td>
|
||||
<td title="${escapeHTML(s.started_at)}">${escapeHTML(relativeTime(s.started_at))}</td>
|
||||
`;
|
||||
}
|
||||
|
||||
function updateSessionTimers() {
|
||||
const tbody = document.getElementById('sessions-body');
|
||||
if (!tbody) return;
|
||||
sessionsState.sessions.forEach(s => {
|
||||
const row = tbody.querySelector(`[data-session="${s.session_id}"]`);
|
||||
if (row) {
|
||||
const td = row.cells[4];
|
||||
if (td) td.textContent = relativeTime(s.started_at);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleSessionsWS(msg) {
|
||||
if (msg.type !== 'message') return;
|
||||
const eventType = getEnvelopeType(msg.data);
|
||||
const correlation = getEnvelopeCorrelation(msg.data);
|
||||
const sessionId = correlation?.session_id || msg.data.event?.id;
|
||||
|
||||
if (eventType === 'session.start') {
|
||||
const source = msg.data.event?.source;
|
||||
const newSession = {
|
||||
session_id: sessionId,
|
||||
started_at: msg.data.event?.ts,
|
||||
framework: source?.framework || 'unknown',
|
||||
host: source?.host || '-',
|
||||
run_count: 1,
|
||||
active: true,
|
||||
};
|
||||
sessionsState.sessions.unshift(newSession);
|
||||
const tbody = document.getElementById('sessions-body');
|
||||
if (tbody) {
|
||||
const row = tbody.insertRow(0);
|
||||
row.className = 'clickable active';
|
||||
row.dataset.session = newSession.session_id;
|
||||
row.innerHTML = renderSessionRow(newSession);
|
||||
row.addEventListener('click', () => navigate('/sessions/' + row.dataset.session));
|
||||
}
|
||||
}
|
||||
|
||||
if (eventType === 'run.start' && sessionId) {
|
||||
const session = sessionsState.sessions.find(s => s.session_id === sessionId);
|
||||
if (session) {
|
||||
session.run_count = (session.run_count || 0) + 1;
|
||||
const tbody = document.getElementById('sessions-body');
|
||||
if (tbody) {
|
||||
const row = tbody.querySelector(`[data-session="${sessionId}"]`);
|
||||
if (row) row.cells[3].textContent = session.run_count;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (eventType === 'session.end' && sessionId) {
|
||||
const session = sessionsState.sessions.find(s => s.session_id === sessionId);
|
||||
if (session) {
|
||||
session.ended_at = new Date().toISOString();
|
||||
const tbody = document.getElementById('sessions-body');
|
||||
if (tbody) {
|
||||
const row = tbody.querySelector(`[data-session="${sessionId}"]`);
|
||||
if (row) {
|
||||
const dot = row.querySelector('.fw-dot');
|
||||
dot.classList.remove('active');
|
||||
dot.classList.add('ended');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSessions() {
|
||||
@@ -302,10 +445,13 @@
|
||||
tbody.innerHTML = sessionsState.sessions.map(s => {
|
||||
const fw = s.framework || 'unknown';
|
||||
const fwClass = fw.replace(/[^a-z0-9-]/g, '-');
|
||||
const active = isSessionActive(s);
|
||||
const dotState = active ? 'active' : 'ended';
|
||||
const dotTitle = active ? 'Active session' : 'Session ended';
|
||||
return `
|
||||
<tr class="clickable" data-session="${escapeHTML(s.session_id)}">
|
||||
<tr class="clickable ${active ? 'active' : ''}" data-session="${escapeHTML(s.session_id)}">
|
||||
<td class="id-cell">${escapeHTML(s.session_id.substring(0, 12))}…</td>
|
||||
<td><span class="fw-dot ${escapeHTML(fwClass)}"></span>${escapeHTML(fw)}</td>
|
||||
<td><span class="fw-dot ${escapeHTML(fwClass)} ${dotState}" title="${dotTitle}"></span>${escapeHTML(fw)}</td>
|
||||
<td>${escapeHTML(s.host || '-')}</td>
|
||||
<td>${s.run_count}</td>
|
||||
<td title="${escapeHTML(s.started_at)}">${escapeHTML(relativeTime(s.started_at))}</td>
|
||||
@@ -358,6 +504,8 @@
|
||||
<tr>
|
||||
<th>Run ID</th>
|
||||
<th>Status</th>
|
||||
<th>Model</th>
|
||||
<th>Tools</th>
|
||||
<th>Spans</th>
|
||||
<th>Duration</th>
|
||||
<th>Started</th>
|
||||
@@ -368,16 +516,19 @@
|
||||
const runDuration = r.ended_at
|
||||
? formatDuration(new Date(r.ended_at) - new Date(r.started_at))
|
||||
: '-';
|
||||
const modelLabel = r.model ? escapeHTML(r.model.replace(/^claude-/, '')) : '-';
|
||||
return `
|
||||
<tr class="clickable" data-run="${escapeHTML(r.run_id)}">
|
||||
<td class="id-cell">${escapeHTML(r.run_id.substring(0, 12))}...</td>
|
||||
<td>${statusIcon(r.status)}</td>
|
||||
<td><span class="model-badge">${modelLabel}</span></td>
|
||||
<td>${r.tool_count || 0}</td>
|
||||
<td>${r.span_count}</td>
|
||||
<td>${escapeHTML(runDuration)}</td>
|
||||
<td>${escapeHTML(new Date(r.started_at).toLocaleTimeString())}</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('') || '<tr><td colspan="5" class="empty-state">No runs</td></tr>'}
|
||||
}).join('') || '<tr><td colspan="7" class="empty-state">No runs</td></tr>'}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -391,6 +542,50 @@
|
||||
e.preventDefault();
|
||||
navigate('/sessions');
|
||||
});
|
||||
|
||||
sessionsUnsubscribe = subscribeWS((msg) => handleSessionWS(sessionID, msg));
|
||||
}
|
||||
|
||||
function handleSessionWS(sessionID, msg) {
|
||||
if (msg.type !== 'message') return;
|
||||
const correlation = getEnvelopeCorrelation(msg.data);
|
||||
if (correlation?.session_id !== sessionID) return;
|
||||
|
||||
loadSessionData(sessionID);
|
||||
}
|
||||
|
||||
async function loadSessionData(sessionID) {
|
||||
if (!isCurrentPath('/sessions/' + sessionID)) return;
|
||||
const data = await api('/v1/sessions/' + sessionID);
|
||||
const runs = data.runs || [];
|
||||
|
||||
const tbody = document.querySelector('#app table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = runs.map(r => {
|
||||
const runDuration = r.ended_at
|
||||
? formatDuration(new Date(r.ended_at) - new Date(r.started_at))
|
||||
: '-';
|
||||
const modelLabel = r.model ? escapeHTML(r.model.replace(/^claude-/, '')) : '-';
|
||||
return `
|
||||
<tr class="clickable" data-run="${escapeHTML(r.run_id)}">
|
||||
<td class="id-cell">${escapeHTML(r.run_id.substring(0, 12))}...</td>
|
||||
<td>${statusIcon(r.status)}</td>
|
||||
<td><span class="model-badge">${modelLabel}</span></td>
|
||||
<td>${r.tool_count || 0}</td>
|
||||
<td>${r.span_count}</td>
|
||||
<td>${escapeHTML(runDuration)}</td>
|
||||
<td>${escapeHTML(new Date(r.started_at).toLocaleTimeString())}</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('') || '<tr><td colspan="7" class="empty-state">No runs</td></tr>';
|
||||
|
||||
tbody.querySelectorAll('tr.clickable').forEach(row => {
|
||||
row.addEventListener('click', () => navigate('/runs/' + row.dataset.run));
|
||||
});
|
||||
|
||||
const countSpan = document.querySelector('.section-title .count');
|
||||
if (countSpan) countSpan.textContent = runs.length;
|
||||
}
|
||||
|
||||
async function renderRun(runID) {
|
||||
@@ -521,6 +716,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
function mergeSwarmSnapshot(evt) {
|
||||
const payload = getEnvelopePayload(evt);
|
||||
const services = payload.services || [];
|
||||
for (const svc of services) {
|
||||
if (svc.name) swarmState.services[svc.name] = svc;
|
||||
}
|
||||
}
|
||||
|
||||
function mergeSwarmServiceSnapshot(evt) {
|
||||
const payload = getEnvelopePayload(evt);
|
||||
const svc = payload.service;
|
||||
if (svc && svc.name) swarmState.services[svc.name] = svc;
|
||||
}
|
||||
|
||||
function renderOpenClawGrid() {
|
||||
const names = Object.keys(openclawState.instances).sort();
|
||||
|
||||
@@ -591,15 +800,14 @@
|
||||
}
|
||||
|
||||
function createAgentsState() {
|
||||
function agentBucket() {
|
||||
return { sessions: {}, operations: {}, events: [], eventIDs: new Set() };
|
||||
}
|
||||
return {
|
||||
events: [],
|
||||
eventIDs: new Set(),
|
||||
stats: {
|
||||
messages: 0,
|
||||
tools: 0,
|
||||
errors: 0,
|
||||
toolCounts: {},
|
||||
},
|
||||
agents: { zap: agentBucket(), orb: agentBucket(), sun: agentBucket() },
|
||||
stats: { messages: 0, tools: 0, errors: 0, toolCounts: {} },
|
||||
dbStats: { messages: 0, tools: 0, errors: 0 },
|
||||
timerInterval: null,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -616,6 +824,68 @@
|
||||
});
|
||||
}
|
||||
|
||||
function getAgentBucket(evt) {
|
||||
const name = getVMName(evt).toLowerCase();
|
||||
return agentsState.agents[name] || null;
|
||||
}
|
||||
|
||||
function processAgentEvent(evt) {
|
||||
const agent = getAgentBucket(evt);
|
||||
if (!agent) return;
|
||||
|
||||
const eventType = getEnvelopeType(evt);
|
||||
const correlation = getEnvelopeCorrelation(evt);
|
||||
const attrs = getEnvelopeAttributes(evt);
|
||||
|
||||
if (eventType === 'session.start' && correlation.session_id) {
|
||||
agent.sessions[correlation.session_id] = { ts: getEnvelopeTS(evt) };
|
||||
}
|
||||
if (eventType === 'session.end' && correlation.session_id) {
|
||||
delete agent.sessions[correlation.session_id];
|
||||
}
|
||||
|
||||
if (eventType === 'span.start' && correlation.span_id) {
|
||||
agent.operations['s:' + correlation.span_id] = {
|
||||
type: 'span',
|
||||
name: attrs.name || attrs.span_kind || 'unknown',
|
||||
kind: attrs.span_kind || '',
|
||||
startedAt: new Date(getEnvelopeTS(evt)).getTime() || Date.now(),
|
||||
};
|
||||
}
|
||||
if (eventType === 'span.end' && correlation.span_id) {
|
||||
delete agent.operations['s:' + correlation.span_id];
|
||||
}
|
||||
|
||||
if (eventType === 'run.start' && correlation.run_id) {
|
||||
agent.operations['r:' + correlation.run_id] = {
|
||||
type: 'run',
|
||||
name: 'Thinking…',
|
||||
kind: 'run',
|
||||
startedAt: new Date(getEnvelopeTS(evt)).getTime() || Date.now(),
|
||||
};
|
||||
}
|
||||
if (eventType === 'run.end' && correlation.run_id) {
|
||||
delete agent.operations['r:' + correlation.run_id];
|
||||
}
|
||||
|
||||
const id = getRecordID(evt);
|
||||
if (id && !agent.eventIDs.has(id)) {
|
||||
agent.eventIDs.add(id);
|
||||
agent.events.push(evt);
|
||||
while (agent.events.length > 100) {
|
||||
const removed = agent.events.shift();
|
||||
agent.eventIDs.delete(getRecordID(removed));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getAgentDisplayOps(agent) {
|
||||
const now = Date.now();
|
||||
const ops = Object.values(agent.operations).filter(op => (now - op.startedAt) < 300000);
|
||||
const hasTools = ops.some(op => op.kind === 'tool');
|
||||
return hasTools ? ops.filter(op => op.kind === 'tool') : ops;
|
||||
}
|
||||
|
||||
async function renderAgents() {
|
||||
agentsState = createAgentsState();
|
||||
|
||||
@@ -623,98 +893,177 @@
|
||||
<div class="page-header">
|
||||
<h2>Agents <span class="live-indicator"><span class="live-dot"></span>Live</span></h2>
|
||||
</div>
|
||||
<div class="vm-strip" id="agents-vm-strip"></div>
|
||||
<div class="agents-layout">
|
||||
<div class="timeline" id="agents-timeline">
|
||||
<p class="empty-state">Loading agent activity...</p>
|
||||
</div>
|
||||
<div class="stats-panel">
|
||||
<div class="stat-card" style="--card-accent:var(--accent)">
|
||||
<div class="stat-card-title">Messages</div>
|
||||
<div class="stat-card-value" id="stat-messages">0</div>
|
||||
<div class="stat-card-sub">received and sent</div>
|
||||
</div>
|
||||
<div class="stat-card" style="--card-accent:var(--purple)">
|
||||
<div class="stat-card-title">Tool Calls</div>
|
||||
<div class="stat-card-value" id="stat-tools">0</div>
|
||||
</div>
|
||||
<div class="stat-card" style="--card-accent:var(--error)">
|
||||
<div class="stat-card-title">Errors</div>
|
||||
<div class="stat-card-value" id="stat-errors">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card-title">Top Tools</div>
|
||||
<ul class="stat-list" id="stat-top-tools">
|
||||
<li style="color:var(--text-dim);font-size:0.8rem">No data yet</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agents-summary-row" id="agents-summary"></div>
|
||||
<div class="agent-lanes" id="agents-lanes">
|
||||
<div class="agent-lane"><div class="agent-lane-header"><div class="agent-lane-name">ZAP</div></div><div class="agent-lane-events"><p class="empty-state">Loading...</p></div></div>
|
||||
<div class="agent-lane"><div class="agent-lane-header"><div class="agent-lane-name">ORB</div></div><div class="agent-lane-events"><p class="empty-state">Loading...</p></div></div>
|
||||
<div class="agent-lane"><div class="agent-lane-header"><div class="agent-lane-name">SUN</div></div><div class="agent-lane-events"><p class="empty-state">Loading...</p></div></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
renderAgentVMStrip();
|
||||
|
||||
try {
|
||||
const [snapshots, events] = await Promise.all([
|
||||
const [snapshots, events, summaryData] = await Promise.all([
|
||||
api('/v1/events?event_type=openclaw.snapshot&limit=100').catch(() => ({ events: [] })),
|
||||
api('/v1/events?framework=openclaw&limit=200'),
|
||||
api('/v1/stats/summary').catch(() => null),
|
||||
]);
|
||||
|
||||
if (!isCurrentPath('/agents')) {
|
||||
return;
|
||||
if (!isCurrentPath('/agents')) return;
|
||||
|
||||
if (summaryData) {
|
||||
const fw = (summaryData.by_framework || {}).openclaw || {};
|
||||
agentsState.dbStats.messages = fw.runs || 0;
|
||||
agentsState.dbStats.tools = fw.tools || 0;
|
||||
agentsState.dbStats.errors = fw.errors || 0;
|
||||
}
|
||||
|
||||
mergeOpenClawEvents(snapshots.events || []);
|
||||
renderAgentVMStrip();
|
||||
addAgentEvents((events.events || []).slice().reverse());
|
||||
renderAgentTimeline();
|
||||
renderAgentStats();
|
||||
renderAgentLanes();
|
||||
renderAgentSummary();
|
||||
} catch (e) {
|
||||
const timeline = document.getElementById('agents-timeline');
|
||||
if (timeline) {
|
||||
timeline.innerHTML = `<p class="empty-state">Error loading agent activity: ${escapeHTML(e.message)}</p>`;
|
||||
}
|
||||
document.getElementById('agents-lanes').innerHTML =
|
||||
`<p class="empty-state">Error loading agent activity: ${escapeHTML(e.message)}</p>`;
|
||||
}
|
||||
|
||||
agentsState.timerInterval = setInterval(updateAgentTimers, 1000);
|
||||
agentsUnsubscribe = subscribeWS(handleAgentsWS);
|
||||
}
|
||||
|
||||
function renderAgentVMStrip() {
|
||||
const strip = document.getElementById('agents-vm-strip');
|
||||
if (!strip) {
|
||||
return;
|
||||
}
|
||||
function renderAgentLanes() {
|
||||
const lanesEl = document.getElementById('agents-lanes');
|
||||
if (!lanesEl) return;
|
||||
|
||||
const vms = getVMStatus();
|
||||
strip.innerHTML = vms.map(vm => `
|
||||
<div class="vm-pill ${vm.active ? 'active' : 'inactive'}">
|
||||
<span class="vm-pill-dot"></span>
|
||||
<span class="vm-pill-name">${escapeHTML(vm.name)}</span>
|
||||
<span class="vm-pill-label">${vm.active ? 'online' : 'offline'}</span>
|
||||
</div>
|
||||
`).join('');
|
||||
const vmNames = ['zap', 'orb', 'sun'];
|
||||
|
||||
lanesEl.innerHTML = vmNames.map(name => {
|
||||
const agent = agentsState.agents[name];
|
||||
const vmStatus = getVMStatus().find(v => v.name === name);
|
||||
const isOnline = vmStatus && vmStatus.active;
|
||||
const sessionCount = Object.keys(agent.sessions).length;
|
||||
const ops = getAgentDisplayOps(agent);
|
||||
|
||||
const statusClass = sessionCount > 0 ? ' has-sessions' : '';
|
||||
const statusText = !isOnline ? 'offline'
|
||||
: sessionCount > 0 ? sessionCount + ' session' + (sessionCount > 1 ? 's' : '')
|
||||
: 'idle';
|
||||
|
||||
const opsHTML = ops.length > 0 ? `<div class="active-ops">${ops.map(op => {
|
||||
const elapsed = Math.floor((Date.now() - op.startedAt) / 1000);
|
||||
const stale = elapsed > 300;
|
||||
return `
|
||||
<div class="active-op${stale ? ' stale' : ''}">
|
||||
<span class="active-op-dot"></span>
|
||||
<span class="active-op-name">${escapeHTML(op.name)}</span>
|
||||
<span class="active-op-time" data-start="${op.startedAt}">${formatElapsed(elapsed)}</span>
|
||||
${stale ? '<span class="active-op-stale">(stale?)</span>' : ''}
|
||||
</div>`;
|
||||
}).join('')}</div>` : '';
|
||||
|
||||
const recent = agent.events.slice(-40).reverse();
|
||||
const eventsHTML = recent.length > 0 ? recent.map(evt => {
|
||||
const eventType = getEnvelopeType(evt);
|
||||
const vmClass = getVMClassName(name);
|
||||
const details = getEventDetails(evt);
|
||||
const detailHTML = details ? `<div class="timeline-detail">${escapeHTML(details)}</div>` : '';
|
||||
const expandHTML = details ? '<button class="timeline-expand-hint" type="button">details</button>' : '';
|
||||
|
||||
return `
|
||||
<div class="timeline-event">
|
||||
<div class="timeline-event-header">
|
||||
${getEventIcon(eventType)}
|
||||
<span class="timeline-event-type">${escapeHTML(getEventLabel(eventType))}</span>
|
||||
<span class="timeline-event-time">${escapeHTML(new Date(getEnvelopeTS(evt)).toLocaleTimeString())}</span>
|
||||
</div>
|
||||
${getEventBody(evt)}
|
||||
${expandHTML}
|
||||
${detailHTML}
|
||||
</div>`;
|
||||
}).join('') : '<p class="empty-state">No recent activity</p>';
|
||||
|
||||
return `
|
||||
<div class="agent-lane">
|
||||
<div class="agent-lane-header">
|
||||
<div class="agent-lane-name">
|
||||
<span class="agent-lane-dot ${isOnline ? 'online' : 'offline'}"></span>
|
||||
${escapeHTML(name.toUpperCase())}
|
||||
</div>
|
||||
<span class="agent-lane-status${statusClass}">${statusText}</span>
|
||||
</div>
|
||||
${opsHTML}
|
||||
<div class="agent-lane-events">${eventsHTML}</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
lanesEl.querySelectorAll('.timeline-expand-hint').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
button.parentElement.classList.toggle('expanded');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function formatElapsed(seconds) {
|
||||
if (seconds < 60) return seconds + 's';
|
||||
if (seconds < 3600) return Math.floor(seconds / 60) + 'm ' + (seconds % 60) + 's';
|
||||
return Math.floor(seconds / 3600) + 'h ' + Math.floor((seconds % 3600) / 60) + 'm';
|
||||
}
|
||||
|
||||
function renderAgentSummary() {
|
||||
const el = document.getElementById('agents-summary');
|
||||
if (!el) return;
|
||||
const s = agentsState.dbStats;
|
||||
el.innerHTML = `
|
||||
<div class="agents-summary-stat">Runs Today <span class="value">${s.messages}</span></div>
|
||||
<div class="agents-summary-stat">Tool Calls <span class="value">${s.tools}</span></div>
|
||||
<div class="agents-summary-stat">Errors <span class="value">${s.errors}</span></div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderAgentVMStrip() {
|
||||
// VM online/offline state is shown in each lane header via getVMStatus().
|
||||
// Re-render lanes to pick up the updated openclawState.
|
||||
renderAgentLanes();
|
||||
}
|
||||
|
||||
function handleAgentsWS(msg) {
|
||||
if (msg.type !== 'message') {
|
||||
return;
|
||||
}
|
||||
if (msg.type !== 'message') return;
|
||||
|
||||
const eventType = getEnvelopeType(msg.data);
|
||||
if (eventType === 'openclaw.snapshot') {
|
||||
mergeOpenClawEvents([msg.data]);
|
||||
renderAgentVMStrip();
|
||||
renderAgentLanes();
|
||||
return;
|
||||
}
|
||||
|
||||
const framework = getEnvelopeSource(msg.data).framework || msg.data.source_framework;
|
||||
if (framework !== 'openclaw') {
|
||||
return;
|
||||
}
|
||||
if (framework !== 'openclaw') return;
|
||||
|
||||
if (eventType === 'run.start') agentsState.dbStats.messages++;
|
||||
else if (eventType === 'span.end') {
|
||||
const attrs = getEnvelopeAttributes(msg.data);
|
||||
if (attrs.span_kind === 'tool') agentsState.dbStats.tools++;
|
||||
} else if (eventType === 'error') agentsState.dbStats.errors++;
|
||||
|
||||
addAgentEvents([msg.data]);
|
||||
renderAgentTimeline();
|
||||
renderAgentStats();
|
||||
renderAgentLanes();
|
||||
renderAgentSummary();
|
||||
}
|
||||
|
||||
function updateAgentTimers() {
|
||||
document.querySelectorAll('.active-op-time[data-start]').forEach(el => {
|
||||
const start = parseInt(el.dataset.start, 10);
|
||||
if (!start) return;
|
||||
const elapsed = Math.floor((Date.now() - start) / 1000);
|
||||
el.textContent = formatElapsed(elapsed);
|
||||
|
||||
const op = el.closest('.active-op');
|
||||
if (op && elapsed > 300 && !op.classList.contains('stale')) {
|
||||
op.classList.add('stale');
|
||||
if (!op.querySelector('.active-op-stale')) {
|
||||
op.insertAdjacentHTML('beforeend', '<span class="active-op-stale">(stale?)</span>');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addAgentEvents(events) {
|
||||
@@ -722,52 +1071,35 @@
|
||||
|
||||
for (const evt of events) {
|
||||
const id = getRecordID(evt);
|
||||
if (!id || agentsState.eventIDs.has(id)) {
|
||||
continue;
|
||||
}
|
||||
agentsState.eventIDs.add(id);
|
||||
agentsState.events.push(evt);
|
||||
const agent = getAgentBucket(evt);
|
||||
if (!id || !agent || agent.eventIDs.has(id)) continue;
|
||||
processAgentEvent(evt);
|
||||
changed = true;
|
||||
}
|
||||
|
||||
if (!changed) {
|
||||
return;
|
||||
if (changed) {
|
||||
for (const agent of Object.values(agentsState.agents)) {
|
||||
agent.events.sort((a, b) => new Date(getEnvelopeTS(a)).getTime() - new Date(getEnvelopeTS(b)).getTime());
|
||||
}
|
||||
recomputeAgentStats();
|
||||
}
|
||||
|
||||
agentsState.events.sort((a, b) => new Date(getEnvelopeTS(a)).getTime() - new Date(getEnvelopeTS(b)).getTime());
|
||||
|
||||
while (agentsState.events.length > 500) {
|
||||
const removed = agentsState.events.shift();
|
||||
agentsState.eventIDs.delete(getRecordID(removed));
|
||||
}
|
||||
|
||||
recomputeAgentStats();
|
||||
}
|
||||
|
||||
function recomputeAgentStats() {
|
||||
const stats = {
|
||||
messages: 0,
|
||||
tools: 0,
|
||||
errors: 0,
|
||||
toolCounts: {},
|
||||
};
|
||||
const stats = { messages: 0, tools: 0, errors: 0, toolCounts: {} };
|
||||
|
||||
for (const evt of agentsState.events) {
|
||||
const eventType = getEnvelopeType(evt);
|
||||
const attrs = getEnvelopeAttributes(evt);
|
||||
for (const agent of Object.values(agentsState.agents)) {
|
||||
for (const evt of agent.events) {
|
||||
const eventType = getEnvelopeType(evt);
|
||||
const attrs = getEnvelopeAttributes(evt);
|
||||
|
||||
if (eventType === 'run.start' || eventType === 'run.end') {
|
||||
stats.messages++;
|
||||
}
|
||||
|
||||
if (eventType === 'span.end' && attrs.span_kind === 'tool') {
|
||||
stats.tools++;
|
||||
const toolName = attrs.name || 'unknown';
|
||||
stats.toolCounts[toolName] = (stats.toolCounts[toolName] || 0) + 1;
|
||||
}
|
||||
|
||||
if (eventType === 'error') {
|
||||
stats.errors++;
|
||||
if (eventType === 'run.start' || eventType === 'run.end') stats.messages++;
|
||||
if (eventType === 'span.end' && attrs.span_kind === 'tool') {
|
||||
stats.tools++;
|
||||
const toolName = attrs.name || 'unknown';
|
||||
stats.toolCounts[toolName] = (stats.toolCounts[toolName] || 0) + 1;
|
||||
}
|
||||
if (eventType === 'error') stats.errors++;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -882,88 +1214,6 @@
|
||||
return JSON.stringify(details, null, 2);
|
||||
}
|
||||
|
||||
function renderAgentTimeline() {
|
||||
const timeline = document.getElementById('agents-timeline');
|
||||
if (!timeline) {
|
||||
return;
|
||||
}
|
||||
|
||||
const recent = agentsState.events.slice(-100).reverse();
|
||||
if (recent.length === 0) {
|
||||
timeline.innerHTML = '<p class="empty-state">Waiting for agent activity...</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
timeline.innerHTML = recent.map((evt, index) => {
|
||||
const eventType = getEnvelopeType(evt);
|
||||
const vmName = getVMName(evt);
|
||||
const vmClass = getVMClassName(vmName);
|
||||
const details = getEventDetails(evt);
|
||||
const detailHTML = details ? `<div class="timeline-detail">${escapeHTML(details)}</div>` : '';
|
||||
const expandHTML = details ? '<button class="timeline-expand-hint" type="button">details</button>' : '';
|
||||
|
||||
return `
|
||||
<div class="timeline-event" data-index="${index}">
|
||||
<div class="timeline-event-header">
|
||||
${getEventIcon(eventType)}
|
||||
<span class="timeline-vm-tag ${vmClass}">${escapeHTML(vmName)}</span>
|
||||
<span class="timeline-event-type">${escapeHTML(getEventLabel(eventType))}</span>
|
||||
<span class="timeline-event-time">${escapeHTML(new Date(getEnvelopeTS(evt)).toLocaleTimeString())}</span>
|
||||
</div>
|
||||
${getEventBody(evt)}
|
||||
${expandHTML}
|
||||
${detailHTML}
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
timeline.querySelectorAll('.timeline-expand-hint').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
button.parentElement.classList.toggle('expanded');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderAgentStats() {
|
||||
const stats = agentsState.stats;
|
||||
|
||||
const messagesEl = document.getElementById('stat-messages');
|
||||
if (messagesEl) {
|
||||
messagesEl.textContent = String(stats.messages);
|
||||
}
|
||||
|
||||
const toolsEl = document.getElementById('stat-tools');
|
||||
if (toolsEl) {
|
||||
toolsEl.textContent = String(stats.tools);
|
||||
}
|
||||
|
||||
const errorsEl = document.getElementById('stat-errors');
|
||||
if (errorsEl) {
|
||||
errorsEl.textContent = String(stats.errors);
|
||||
}
|
||||
|
||||
const list = document.getElementById('stat-top-tools');
|
||||
if (!list) {
|
||||
return;
|
||||
}
|
||||
|
||||
const topTools = Object.entries(stats.toolCounts)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 8);
|
||||
|
||||
if (topTools.length === 0) {
|
||||
list.innerHTML = '<li style="color:var(--text-dim);font-size:0.8rem">No data yet</li>';
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = topTools.map(([name, count]) => `
|
||||
<li>
|
||||
<span class="stat-list-name">${escapeHTML(name)}</span>
|
||||
<span class="stat-list-count">${count}</span>
|
||||
</li>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function renderDashboard() {
|
||||
dashboardState = {
|
||||
summary: null,
|
||||
@@ -1001,7 +1251,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title" style="margin-bottom:0.75rem">Infrastructure</div>
|
||||
<div class="vm-strip" id="dash-vm-strip" style="margin-bottom:1.5rem"></div>
|
||||
<div class="vm-strip" id="dash-vm-strip"></div>
|
||||
<div class="swarm-strip" id="dash-swarm-strip"></div>
|
||||
<div class="charts-row">
|
||||
<div class="chart-panel">
|
||||
<div class="chart-header">
|
||||
@@ -1062,32 +1313,48 @@
|
||||
|
||||
renderDashVMStrip();
|
||||
|
||||
// Render cached data immediately while the API call is in-flight
|
||||
const cachedSummary = tryParseJSON(localStorage.getItem('agentmon:dash:summary'));
|
||||
const cachedTS = tryParseJSON(localStorage.getItem('agentmon:dash:ts:' + dashboardState.window));
|
||||
if (cachedSummary) { dashboardState.summary = cachedSummary; renderSummaryCards(); }
|
||||
if (cachedTS) { dashboardState.timeseries = cachedTS; renderTimeseriesChart(); renderFrameworkBars(); }
|
||||
|
||||
try {
|
||||
const [summaryData, tsData, recentData, snapshots] = await Promise.all([
|
||||
const [summaryData, tsData, recentData, snapshots, swarmSnaps, topToolsData] = await Promise.all([
|
||||
api('/v1/stats/summary'),
|
||||
api('/v1/stats/timeseries?window=1h'),
|
||||
api('/v1/events?limit=20'),
|
||||
api('/v1/events?event_type=openclaw.snapshot&limit=100').catch(() => ({ events: [] })),
|
||||
api('/v1/events?event_type=swarm.snapshot&limit=10').catch(() => ({ events: [] })),
|
||||
api('/v1/stats/top-tools').catch(() => ({ tools: [] })),
|
||||
]);
|
||||
|
||||
if (!isCurrentPath('/')) return;
|
||||
|
||||
mergeOpenClawEvents(snapshots.events || []);
|
||||
renderDashVMStrip();
|
||||
for (const evt of swarmSnaps.events || []) mergeSwarmSnapshot(evt);
|
||||
renderSwarmStrip_dash();
|
||||
|
||||
dashboardState.summary = summaryData;
|
||||
dashboardState.timeseries = tsData;
|
||||
localStorage.setItem('agentmon:dash:summary', JSON.stringify(summaryData));
|
||||
localStorage.setItem('agentmon:dash:ts:' + dashboardState.window, JSON.stringify(tsData));
|
||||
renderSummaryCards();
|
||||
renderTimeseriesChart();
|
||||
renderFrameworkBars();
|
||||
|
||||
// Seed tool counts from the dedicated top-tools endpoint
|
||||
for (const t of (topToolsData.tools || [])) {
|
||||
dashboardState.toolCounts[t.name] = t.count;
|
||||
}
|
||||
|
||||
const events = (recentData.events || []).slice().reverse();
|
||||
for (const evt of events) {
|
||||
const id = getRecordID(evt);
|
||||
if (id && !dashboardState.recentEventIDs.has(id)) {
|
||||
dashboardState.recentEventIDs.add(id);
|
||||
dashboardState.recentEvents.push(evt);
|
||||
tallyTool(evt);
|
||||
}
|
||||
}
|
||||
renderDashFeed();
|
||||
@@ -1112,6 +1379,25 @@
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function renderSwarmStrip_dash() {
|
||||
const strip = document.getElementById('dash-swarm-strip');
|
||||
if (!strip) return;
|
||||
const services = Object.values(swarmState.services);
|
||||
if (services.length === 0) return;
|
||||
strip.innerHTML = services.map(svc => {
|
||||
const statusClass = svc.status === 'healthy' ? 'active'
|
||||
: svc.status === 'degraded' ? 'degraded' : 'inactive';
|
||||
const label = svc.status || 'unknown';
|
||||
return `
|
||||
<div class="vm-pill ${statusClass}">
|
||||
<span class="vm-pill-dot"></span>
|
||||
<span class="vm-pill-name">${escapeHTML(svc.name)}</span>
|
||||
<span class="vm-pill-label">${escapeHTML(label)}</span>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function handleDashboardWS(msg) {
|
||||
if (msg.type !== 'message') return;
|
||||
|
||||
@@ -1122,6 +1408,16 @@
|
||||
renderDashVMStrip();
|
||||
return;
|
||||
}
|
||||
if (eventType === 'swarm.snapshot') {
|
||||
mergeSwarmSnapshot(msg.data);
|
||||
renderSwarmStrip_dash();
|
||||
return;
|
||||
}
|
||||
if (eventType === 'swarm.service.snapshot') {
|
||||
mergeSwarmServiceSnapshot(msg.data);
|
||||
renderSwarmStrip_dash();
|
||||
return;
|
||||
}
|
||||
|
||||
if (dashboardState.summary) {
|
||||
if (eventType === 'session.start') dashboardState.summary.active_sessions++;
|
||||
@@ -1200,9 +1496,12 @@
|
||||
dashboardChart.destroy();
|
||||
dashboardChart = null;
|
||||
}
|
||||
const cachedWin = tryParseJSON(localStorage.getItem('agentmon:dash:ts:' + dashboardState.window));
|
||||
if (cachedWin) { dashboardState.timeseries = cachedWin; renderTimeseriesChart(); }
|
||||
const data = await api('/v1/stats/timeseries?window=' + dashboardState.window);
|
||||
if (!isCurrentPath('/')) return;
|
||||
dashboardState.timeseries = data;
|
||||
localStorage.setItem('agentmon:dash:ts:' + dashboardState.window, JSON.stringify(data));
|
||||
renderTimeseriesChart();
|
||||
} catch (e) {
|
||||
console.error('Failed to load timeseries:', e);
|
||||
|
||||
+380
-10
@@ -30,6 +30,9 @@
|
||||
--radius: 6px;
|
||||
--radius-lg: 10px;
|
||||
--radius-xl: 14px;
|
||||
|
||||
--header-bg: rgba(7, 9, 15, 0.82);
|
||||
--code-text: #7a9ab5;
|
||||
}
|
||||
|
||||
/* ── Reset ─────────────────────────────────────────────────── */
|
||||
@@ -62,7 +65,7 @@ header {
|
||||
justify-content: space-between;
|
||||
padding: 0 2rem;
|
||||
height: 54px;
|
||||
background: rgba(7, 9, 15, 0.82);
|
||||
background: var(--header-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
@@ -301,7 +304,7 @@ main > * {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -394,6 +397,15 @@ tr.clickable:hover td:first-child {
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.model-badge {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
background: var(--surface-2);
|
||||
color: var(--text-dim);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* ── Load more ─────────────────────────────────────────────── */
|
||||
.load-more {
|
||||
display: block;
|
||||
@@ -458,7 +470,7 @@ tr.expandable:hover .expand-icon::before {
|
||||
font-size: 0.78rem;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
color: #7a9ab5;
|
||||
color: var(--code-text);
|
||||
line-height: 1.75;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
@@ -737,6 +749,22 @@ tr.expandable:hover .expand-icon::before {
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* ── Swarm strip ──────────────────────────────────────────── */
|
||||
.swarm-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.vm-pill.degraded {
|
||||
border-color: rgba(251, 191, 36, 0.3);
|
||||
}
|
||||
|
||||
.vm-pill.degraded .vm-pill-dot {
|
||||
background: var(--warning);
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -850,7 +878,7 @@ tr.expandable:hover .expand-icon::before {
|
||||
border-radius: var(--radius);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: #7a9ab5;
|
||||
color: var(--code-text);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
line-height: 1.65;
|
||||
@@ -1068,9 +1096,9 @@ tr.expandable:hover .expand-icon::before {
|
||||
}
|
||||
|
||||
.summary-card-value {
|
||||
font-family: var(--font-display);
|
||||
font-family: var(--font-body);
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1;
|
||||
@@ -1300,10 +1328,17 @@ tr.expandable:hover .expand-icon::before {
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.fw-dot.openclaw { background: var(--accent); }
|
||||
.fw-dot.claude-code { background: var(--success); }
|
||||
.fw-dot.opencode { background: var(--purple); }
|
||||
.fw-dot.unknown { background: var(--text-dim); }
|
||||
.fw-dot.openclaw { background: var(--accent); --fw-glow: var(--accent); }
|
||||
.fw-dot.claude-code { background: var(--success); --fw-glow: var(--success); }
|
||||
.fw-dot.opencode { background: var(--purple); --fw-glow: var(--purple); }
|
||||
.fw-dot.unknown { background: var(--text-dim); --fw-glow: var(--text-dim); }
|
||||
.fw-dot.ended { opacity: 0.3; }
|
||||
.fw-dot.active { box-shadow: 0 0 6px var(--fw-glow); animation: fwPulse 2s ease-in-out infinite; }
|
||||
|
||||
@keyframes fwPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* ── Meta tiles ───────────────────────────────────────────── */
|
||||
.meta-tiles {
|
||||
@@ -1350,3 +1385,338 @@ tr.expandable:hover .expand-icon::before {
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ── Light theme variables ────────────────────────────────── */
|
||||
[data-theme="light"] {
|
||||
--bg: #f5f7fa;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #edf0f5;
|
||||
--card: rgba(255, 255, 255, 0.9);
|
||||
--border: rgba(200, 210, 225, 0.8);
|
||||
--border-soft: rgba(200, 210, 225, 0.5);
|
||||
|
||||
--text: #3d4a5c;
|
||||
--text-dim: #8b9ab0;
|
||||
--text-bright: #1a2332;
|
||||
|
||||
--accent: #0891b2;
|
||||
--accent-dim: rgba(8, 145, 178, 0.08);
|
||||
--accent-glow: rgba(8, 145, 178, 0.15);
|
||||
|
||||
--success: #059669;
|
||||
--error: #dc2626;
|
||||
--warning: #d97706;
|
||||
--purple: #7c3aed;
|
||||
|
||||
--header-bg: rgba(245, 247, 250, 0.92);
|
||||
--code-text: #4a6580;
|
||||
}
|
||||
|
||||
[data-theme="light"] body {
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 40% at 50% -20%, rgba(8, 145, 178, 0.04) 0%, transparent 70%),
|
||||
radial-gradient(circle at 1px 1px, rgba(8, 145, 178, 0.025) 1px, transparent 0);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
html:not([data-theme]) {
|
||||
--bg: #f5f7fa;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #edf0f5;
|
||||
--card: rgba(255, 255, 255, 0.9);
|
||||
--border: rgba(200, 210, 225, 0.8);
|
||||
--border-soft: rgba(200, 210, 225, 0.5);
|
||||
|
||||
--text: #3d4a5c;
|
||||
--text-dim: #8b9ab0;
|
||||
--text-bright: #1a2332;
|
||||
|
||||
--accent: #0891b2;
|
||||
--accent-dim: rgba(8, 145, 178, 0.08);
|
||||
--accent-glow: rgba(8, 145, 178, 0.15);
|
||||
|
||||
--success: #059669;
|
||||
--error: #dc2626;
|
||||
--warning: #d97706;
|
||||
--purple: #7c3aed;
|
||||
|
||||
--header-bg: rgba(245, 247, 250, 0.92);
|
||||
--code-text: #4a6580;
|
||||
}
|
||||
|
||||
html:not([data-theme]) body {
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 40% at 50% -20%, rgba(8, 145, 178, 0.04) 0%, transparent 70%),
|
||||
radial-gradient(circle at 1px 1px, rgba(8, 145, 178, 0.025) 1px, transparent 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Theme toggle button ──────────────────────────────────── */
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
margin-left: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
color: var(--text-bright);
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
|
||||
/* ── Agent lanes ──────────────────────────────────────────── */
|
||||
.agents-summary-row {
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.agents-summary-stat {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.6rem 1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-dim);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.agents-summary-stat .value {
|
||||
color: var(--text-bright);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.agent-lanes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.agent-lanes {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-lane {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.agent-lane-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.875rem 1.125rem;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
}
|
||||
|
||||
.agent-lane-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-bright);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.agent-lane-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.agent-lane-dot.online {
|
||||
background: var(--success);
|
||||
box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
|
||||
animation: livePulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.agent-lane-dot.offline {
|
||||
background: var(--text-dim);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.agent-lane-status {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.agent-lane-status.has-sessions {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
/* ── Active operations ────────────────────────────────────── */
|
||||
.active-ops {
|
||||
padding: 0.625rem 1.125rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
}
|
||||
|
||||
.active-op {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0.625rem;
|
||||
background: var(--accent-dim);
|
||||
border: 1px solid rgba(34, 211, 238, 0.15);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.75rem;
|
||||
animation: fadeUp 0.2s ease both;
|
||||
}
|
||||
|
||||
[data-theme="light"] .active-op {
|
||||
border-color: rgba(8, 145, 178, 0.2);
|
||||
}
|
||||
|
||||
.active-op.stale {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.active-op-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--success);
|
||||
box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
|
||||
animation: livePulse 1.5s ease-in-out infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.active-op.stale .active-op-dot {
|
||||
background: var(--warning);
|
||||
box-shadow: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.active-op-name {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.active-op-time {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-dim);
|
||||
font-size: 0.7rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.active-op-stale {
|
||||
color: var(--warning);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Lane event feed ──────────────────────────────────────── */
|
||||
.agent-lane-events {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: 520px;
|
||||
padding: 0.625rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.agent-lane-events::after {
|
||||
content: '';
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 32px;
|
||||
background: linear-gradient(to bottom, transparent, var(--surface));
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.agent-lane-events .timeline-event {
|
||||
padding: 0.5rem 0.625rem;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 0.25rem;
|
||||
border: 1px solid var(--border-soft);
|
||||
background: transparent;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.agent-lane-events .timeline-event-header {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.agent-lane-events .timeline-event-time {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.agent-lane-events .empty-state {
|
||||
padding: 2rem 1rem;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
/* ── Mobile layout ────────────────────────────────────────── */
|
||||
@media (max-width: 640px) {
|
||||
main {
|
||||
padding: 1.25rem 1rem;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
header nav a {
|
||||
padding: 0.375rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
header {
|
||||
height: auto;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5rem 1rem;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
header nav {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
border-top: 1px solid var(--border-soft);
|
||||
padding: 0.375rem 0;
|
||||
margin-top: 0.25rem;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
header nav a {
|
||||
padding: 0.3rem 0.5rem;
|
||||
font-size: 0.73rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user