diff --git a/cmd/web-ui/static/app.js b/cmd/web-ui/static/app.js
index b216f71..262c1b0 100644
--- a/cmd/web-ui/static/app.js
+++ b/cmd/web-ui/static/app.js
@@ -10,6 +10,9 @@
let openclawUnsubscribe = null;
let agentsState = createAgentsState();
let agentsUnsubscribe = null;
+ let dashboardState = null;
+ let dashboardUnsubscribe = null;
+ let dashboardChart = null;
function getWsURL() {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -70,13 +73,23 @@
agentsUnsubscribe();
agentsUnsubscribe = null;
}
+ if (dashboardUnsubscribe) {
+ dashboardUnsubscribe();
+ dashboardUnsubscribe = null;
+ }
+ if (dashboardChart) {
+ dashboardChart.destroy();
+ dashboardChart = null;
+ }
}
function route() {
cleanupLiveViews();
const path = window.location.pathname;
- if (path === '/' || path === '/sessions') {
+ if (path === '/') {
+ renderDashboard();
+ } else if (path === '/sessions') {
renderSessions();
} else if (path.startsWith('/agents')) {
renderAgents();
@@ -907,5 +920,425 @@
`).join('');
}
+ async function renderDashboard() {
+ dashboardState = {
+ summary: null,
+ timeseries: null,
+ window: '1h',
+ recentEvents: [],
+ recentEventIDs: new Set(),
+ toolCounts: {},
+ };
+
+ app.innerHTML = `
+
+
+
+
+
+ `;
+
+ document.querySelectorAll('.window-btn').forEach(btn => {
+ btn.addEventListener('click', () => {
+ document.querySelectorAll('.window-btn').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ dashboardState.window = btn.dataset.w;
+ loadTimeseries();
+ });
+ });
+
+ renderDashVMStrip();
+
+ try {
+ const [summaryData, tsData, recentData, snapshots] = 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: [] })),
+ ]);
+
+ if (!isCurrentPath('/')) return;
+
+ mergeOpenClawEvents(snapshots.events || []);
+ renderDashVMStrip();
+
+ dashboardState.summary = summaryData;
+ dashboardState.timeseries = tsData;
+ renderSummaryCards();
+ renderTimeseriesChart();
+ renderFrameworkBars();
+
+ 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();
+ renderDashTopTools();
+ } catch (e) {
+ console.error('Dashboard load error:', e);
+ }
+
+ dashboardUnsubscribe = subscribeWS(handleDashboardWS);
+ }
+
+ function renderDashVMStrip() {
+ const strip = document.getElementById('dash-vm-strip');
+ if (!strip) return;
+ const vms = getVMStatus();
+ strip.innerHTML = vms.map(vm => `
+
+
+ ${escapeHTML(vm.name)}
+ ${vm.active ? 'online' : 'offline'}
+
+ `).join('');
+ }
+
+ function handleDashboardWS(msg) {
+ if (msg.type !== 'message') return;
+
+ const eventType = getEnvelopeType(msg.data);
+
+ if (eventType === 'openclaw.snapshot') {
+ mergeOpenClawEvents([msg.data]);
+ renderDashVMStrip();
+ return;
+ }
+
+ if (dashboardState.summary) {
+ if (eventType === 'run.start') dashboardState.summary.runs_today++;
+ if (eventType === 'error') dashboardState.summary.errors_today++;
+ if (eventType === 'span.end') {
+ const attrs = getEnvelopeAttributes(msg.data);
+ if (attrs.span_kind === 'tool') dashboardState.summary.tool_calls_today++;
+ }
+ renderSummaryCards();
+ }
+
+ const id = getRecordID(msg.data);
+ if (id && !dashboardState.recentEventIDs.has(id)) {
+ dashboardState.recentEventIDs.add(id);
+ dashboardState.recentEvents.push(msg.data);
+ tallyTool(msg.data);
+
+ while (dashboardState.recentEvents.length > 50) {
+ const removed = dashboardState.recentEvents.shift();
+ dashboardState.recentEventIDs.delete(getRecordID(removed));
+ }
+
+ renderDashFeed();
+ renderDashTopTools();
+ }
+
+ if (dashboardState.timeseries && dashboardState.window === '1h') {
+ appendToCurrentBucket(msg.data);
+ }
+ }
+
+ function tallyTool(evt) {
+ const eventType = getEnvelopeType(evt);
+ if (eventType === 'span.end') {
+ const attrs = getEnvelopeAttributes(evt);
+ if (attrs.span_kind === 'tool') {
+ const name = attrs.name || 'unknown';
+ dashboardState.toolCounts[name] = (dashboardState.toolCounts[name] || 0) + 1;
+ }
+ }
+ }
+
+ function renderSummaryCards() {
+ const s = dashboardState.summary;
+ if (!s) return;
+
+ const el = (id, val) => {
+ const e = document.getElementById(id);
+ if (e) e.textContent = String(val);
+ };
+
+ el('dash-active', s.active_sessions);
+ el('dash-runs', s.runs_today);
+ el('dash-tools', s.tool_calls_today);
+ el('dash-errors', s.errors_today);
+
+ const errEl = document.getElementById('dash-errors');
+ if (errEl) {
+ errEl.classList.toggle('has-errors', s.errors_today > 0);
+ }
+ }
+
+ async function loadTimeseries() {
+ try {
+ const data = await api('/v1/stats/timeseries?window=' + dashboardState.window);
+ if (!isCurrentPath('/')) return;
+ dashboardState.timeseries = data;
+ renderTimeseriesChart();
+ } catch (e) {
+ console.error('Failed to load timeseries:', e);
+ }
+ }
+
+ function renderTimeseriesChart() {
+ const container = document.getElementById('dash-chart');
+ if (!container || !dashboardState.timeseries) return;
+
+ const ts = dashboardState.timeseries;
+ if (!ts.series || ts.series.length === 0) {
+ container.innerHTML = 'No data for this window
';
+ return;
+ }
+
+ if (dashboardChart) {
+ dashboardChart.destroy();
+ dashboardChart = null;
+ }
+
+ container.innerHTML = '';
+
+ const timestamps = ts.series.map(b => Math.floor(new Date(b.ts).getTime() / 1000));
+ const runs = ts.series.map(b => b.runs);
+ const tools = ts.series.map(b => b.tools);
+ const errors = ts.series.map(b => b.errors);
+
+ const width = container.clientWidth || 600;
+ const height = 200;
+
+ const opts = {
+ width,
+ height,
+ cursor: { show: true },
+ scales: {
+ x: { time: true },
+ y: { auto: true, min: 0 },
+ },
+ axes: [
+ {
+ stroke: '#4e6070',
+ grid: { stroke: 'rgba(28, 38, 55, 0.6)', width: 1 },
+ ticks: { stroke: 'rgba(28, 38, 55, 0.6)', width: 1 },
+ font: '11px Fira Code',
+ },
+ {
+ stroke: '#4e6070',
+ grid: { stroke: 'rgba(28, 38, 55, 0.6)', width: 1 },
+ ticks: { stroke: 'rgba(28, 38, 55, 0.6)', width: 1 },
+ font: '11px Fira Code',
+ size: 50,
+ },
+ ],
+ series: [
+ {},
+ {
+ label: 'Runs',
+ stroke: '#34d399',
+ width: 2,
+ fill: 'rgba(52, 211, 153, 0.08)',
+ },
+ {
+ label: 'Tools',
+ stroke: '#22d3ee',
+ width: 2,
+ fill: 'rgba(34, 211, 238, 0.08)',
+ },
+ {
+ label: 'Errors',
+ stroke: '#f87171',
+ width: 2,
+ fill: 'rgba(248, 113, 113, 0.08)',
+ },
+ ],
+ };
+
+ dashboardChart = new uPlot(opts, [timestamps, runs, tools, errors], container);
+
+ const ro = new ResizeObserver(entries => {
+ for (const entry of entries) {
+ if (dashboardChart) {
+ dashboardChart.setSize({ width: entry.contentRect.width, height: 200 });
+ }
+ }
+ });
+ ro.observe(container);
+ }
+
+ function appendToCurrentBucket(evt) {
+ const ts = dashboardState.timeseries;
+ if (!ts || !ts.series || ts.series.length === 0) return;
+
+ const now = Math.floor(Date.now() / 60000) * 60000;
+ const last = ts.series[ts.series.length - 1];
+ const lastTs = new Date(last.ts).getTime();
+
+ let bucket;
+ if (Math.abs(now - lastTs) < 60000) {
+ bucket = last;
+ } else {
+ bucket = { ts: new Date(now).toISOString(), runs: 0, tools: 0, errors: 0 };
+ ts.series.push(bucket);
+ }
+
+ const eventType = getEnvelopeType(evt);
+ if (eventType === 'run.start') bucket.runs++;
+ if (eventType === 'error') bucket.errors++;
+ if (eventType === 'span.end') {
+ const attrs = getEnvelopeAttributes(evt);
+ if (attrs.span_kind === 'tool') bucket.tools++;
+ }
+
+ renderTimeseriesChart();
+ }
+
+ function renderFrameworkBars() {
+ const container = document.getElementById('dash-fw-bars');
+ if (!container || !dashboardState.summary) return;
+
+ const byFw = dashboardState.summary.by_framework || {};
+ const entries = Object.entries(byFw).sort((a, b) => {
+ const totalA = a[1].runs + a[1].tools + a[1].errors;
+ const totalB = b[1].runs + b[1].tools + b[1].errors;
+ return totalB - totalA;
+ });
+
+ if (entries.length === 0) {
+ container.innerHTML = 'No framework data
';
+ return;
+ }
+
+ const maxTotal = Math.max(...entries.map(([, s]) => s.runs + s.tools + s.errors));
+
+ container.innerHTML = entries.map(([name, stats]) => {
+ const total = stats.runs + stats.tools + stats.errors;
+ const pct = maxTotal > 0 ? (total / maxTotal * 100) : 0;
+ const cssClass = name.replace(/[^a-z0-9-]/g, '-');
+ return `
+
+
+ ${escapeHTML(name)}
+ ${total} events
+
+
+
Waiting for events...
';
+ return;
+ }
+
+ feed.innerHTML = recent.map(evt => {
+ const eventType = getEnvelopeType(evt);
+ const vmName = getVMName(evt);
+ const vmClass = getVMClassName(vmName);
+ const source = getEnvelopeSource(evt);
+ const framework = source.framework || '';
+ const tag = framework
+ ? `${escapeHTML(framework)}`
+ : '';
+
+ return `
+
+
+ ${getEventBody(evt)}
+
+ `;
+ }).join('');
+ }
+
+ function renderDashTopTools() {
+ const list = document.getElementById('dash-top-tools');
+ if (!list) return;
+
+ const topTools = Object.entries(dashboardState.toolCounts)
+ .sort((a, b) => b[1] - a[1])
+ .slice(0, 10);
+
+ if (topTools.length === 0) {
+ list.innerHTML = 'No tool data yet';
+ return;
+ }
+
+ list.innerHTML = topTools.map(([name, count]) => `
+
+ ${escapeHTML(name)}
+ ${count}
+
+ `).join('');
+ }
+
route();
})();