-
-
Loading agent activity...
-
-
-
-
Messages
-
0
-
received and sent
-
-
-
-
-
+
+
`;
- 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 = `
Error loading agent activity: ${escapeHTML(e.message)}
`;
- }
+ document.getElementById('agents-lanes').innerHTML =
+ `
Error loading agent activity: ${escapeHTML(e.message)}
`;
}
+ 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 => `
-
-
- ${escapeHTML(vm.name)}
- ${vm.active ? 'online' : 'offline'}
-
- `).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 ? `
${ops.map(op => {
+ const elapsed = Math.floor((Date.now() - op.startedAt) / 1000);
+ const stale = elapsed > 300;
+ return `
+
+
+ ${escapeHTML(op.name)}
+ ${formatElapsed(elapsed)}
+ ${stale ? '(stale?)' : ''}
+
`;
+ }).join('')}
` : '';
+
+ 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 ? `
${escapeHTML(details)}
` : '';
+ const expandHTML = details ? '
' : '';
+
+ return `
+
+
+ ${getEventBody(evt)}
+ ${expandHTML}
+ ${detailHTML}
+
`;
+ }).join('') : '
No recent activity
';
+
+ return `
+
+
+ ${opsHTML}
+
${eventsHTML}
+
`;
+ }).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 = `
+
Runs Today ${s.messages}
+
Tool Calls ${s.tools}
+
Errors ${s.errors}
+ `;
+ }
+
+ 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', '
(stale?)');
+ }
+ }
+ });
}
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 = '
Waiting for agent activity...
';
- 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 ? `
${escapeHTML(details)}
` : '';
- const expandHTML = details ? '
' : '';
-
- return `
-
-
- ${getEventBody(evt)}
- ${expandHTML}
- ${detailHTML}
-
- `;
- }).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 = '
No data yet';
- return;
- }
-
- list.innerHTML = topTools.map(([name, count]) => `
-
- ${escapeHTML(name)}
- ${count}
-
- `).join('');
- }
-
async function renderDashboard() {
dashboardState = {
summary: null,
@@ -1001,7 +1251,8 @@