fix(web-ui): security hardening, SPA nav, and modularization
Ship the in-progress ES-module refactor of the web-ui (new static/modules/ layout, Usage/Settings pages, uplot-based dashboard) alongside a round of security and UX fixes: - main.go: add CSP + X-Frame-Options: DENY + X-Content-Type-Options: nosniff + Referrer-Policy middleware on every response; WS CheckOrigin now requires Origin host to match Host (blocks cross-site WebSocket hijacking); upgrade client before dialing upstream so origin check runs first; fatal on unparseable AGENTMON_QUERY_BASE. - app.js: delegated click handler intercepts same-origin <a> clicks for SPA navigation (prev. every nav link caused a full page reload, dropping WS + in-memory state); delegated .copy-btn[data-copy] handler replaces inline onclick=; removed window.navigate / window.copyToClipboard globals and the duplicated handleGlobalSearch. - modules/nav-signal.js: per-route AbortController so in-flight fetches are cancelled when the user navigates away, preventing stale toasts and wasted renders. - modules/api.js: honours the nav signal by default; AbortError is silent. - modules/router.js: resets the nav controller on every route; dropped the fixed 80ms transition delay; breadcrumbs no longer emit inline onclick= (delegated handler picks them up). - modules/utils.js: renderCopyButton emits data-copy=\"...\" instead of nesting a JS string inside an HTML attribute — fixes an XSS where values containing ' broke out via ' decoding. Verified: go build clean; `node --check` clean on all modified modules; manual curl probes confirm security headers present on every response and WS upgrade returns 403 for cross-origin/missing Origin while 101 for same-origin. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
William Valentin
@@ -0,0 +1,939 @@
|
||||
// ── agents.js — Agents page ───────────────────────────────
|
||||
|
||||
import {
|
||||
escapeHTML,
|
||||
formatDuration,
|
||||
formatCount,
|
||||
formatCost,
|
||||
formatTokenCount,
|
||||
formatElapsed,
|
||||
getEnvelopeType,
|
||||
getEnvelopePayload,
|
||||
getEnvelopeAttributes,
|
||||
getEnvelopeCorrelation,
|
||||
getEnvelopeTS,
|
||||
getRecordID,
|
||||
getEventIcon,
|
||||
getEventLabel,
|
||||
getEventBody,
|
||||
getEventDetails,
|
||||
isAgentTimelineEvent,
|
||||
isCurrentPath,
|
||||
getAgentIdentity,
|
||||
normalizeAgentKey,
|
||||
agentsSkeleton,
|
||||
} from '../utils.js';
|
||||
|
||||
import { subscribeWS } from '../ws.js';
|
||||
|
||||
import {
|
||||
agentsState,
|
||||
resetAgentsState,
|
||||
mergeOpenClawEvents,
|
||||
getVMStatus,
|
||||
isOpenClawVM,
|
||||
isAgentOnline,
|
||||
openclawState,
|
||||
} from '../state.js';
|
||||
|
||||
import { app, navigate, renderBreadcrumbs, isRouteCurrent } from '../router.js';
|
||||
import { api } from '../api.js';
|
||||
|
||||
// ── Module-level state ───────────────────────────────────
|
||||
|
||||
let agentsUnsubscribe = null;
|
||||
let _agentsRenderTimer = null;
|
||||
|
||||
// ── Private helpers ──────────────────────────────────────
|
||||
|
||||
function ensureAgentBucket(evt) {
|
||||
const identity = getAgentIdentity(evt);
|
||||
if (!identity.key) return null;
|
||||
|
||||
if (!agentsState.agents[identity.key]) {
|
||||
agentsState.agents[identity.key] = {
|
||||
key: identity.key,
|
||||
name: identity.name,
|
||||
framework: identity.framework,
|
||||
host: identity.host,
|
||||
clientID: identity.clientID,
|
||||
sessions: {},
|
||||
operations: {},
|
||||
events: [],
|
||||
eventIDs: new Set(),
|
||||
lastSeenAt: 0,
|
||||
liveLoaded: false,
|
||||
liveLoading: false,
|
||||
};
|
||||
}
|
||||
|
||||
const agent = agentsState.agents[identity.key];
|
||||
agent.name = identity.name || agent.name || identity.key;
|
||||
agent.framework = identity.framework || agent.framework;
|
||||
agent.host = identity.host || agent.host;
|
||||
agent.clientID = identity.clientID || agent.clientID;
|
||||
return agent;
|
||||
}
|
||||
|
||||
function getSortedAgentKeys() {
|
||||
return Object.keys(agentsState.agents).sort((a, b) => {
|
||||
const left = agentsState.agents[a];
|
||||
const right = agentsState.agents[b];
|
||||
const leftOnline = isAgentOnline(left);
|
||||
const rightOnline = isAgentOnline(right);
|
||||
|
||||
if (leftOnline !== rightOnline) return leftOnline ? -1 : 1;
|
||||
return (left.name || left.key).localeCompare(right.name || right.key);
|
||||
});
|
||||
}
|
||||
|
||||
function ensureSelectedAgentKey() {
|
||||
const keys = getSortedAgentKeys();
|
||||
if (keys.length === 0) {
|
||||
agentsState.selectedAgentKey = '';
|
||||
return '';
|
||||
}
|
||||
if (!agentsState.selectedAgentKey || !agentsState.agents[agentsState.selectedAgentKey]) {
|
||||
agentsState.selectedAgentKey = keys[0];
|
||||
}
|
||||
return agentsState.selectedAgentKey;
|
||||
}
|
||||
|
||||
function setAgentsViewMode(mode) {
|
||||
agentsState.viewMode = mode === 'live' ? 'live' : 'overview';
|
||||
renderAgentsContent();
|
||||
if (agentsState.viewMode === 'live') {
|
||||
void loadSelectedAgentLiveData();
|
||||
}
|
||||
}
|
||||
|
||||
function getAgentBucket(evt) {
|
||||
return ensureAgentBucket(evt);
|
||||
}
|
||||
|
||||
function processAgentEvent(evt) {
|
||||
const agent = getAgentBucket(evt);
|
||||
if (!agent) return;
|
||||
|
||||
const eventType = getEnvelopeType(evt);
|
||||
const correlation = getEnvelopeCorrelation(evt);
|
||||
const attrs = getEnvelopeAttributes(evt);
|
||||
const ts = new Date(getEnvelopeTS(evt)).getTime();
|
||||
agent.lastSeenAt = Number.isFinite(ts) ? ts : Date.now();
|
||||
|
||||
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) {
|
||||
const payload = getEnvelopePayload(evt);
|
||||
agent.operations['s:' + correlation.span_id] = {
|
||||
type: 'span',
|
||||
name: attrs.name || attrs.span_kind || 'unknown',
|
||||
kind: attrs.span_kind || '',
|
||||
subType: attrs.type || '',
|
||||
startedAt: new Date(getEnvelopeTS(evt)).getTime() || Date.now(),
|
||||
promptPreview: payload.prompt_preview || '',
|
||||
inputPreview: payload.input ? (typeof payload.input === 'string' ? payload.input : JSON.stringify(payload.input)) : '',
|
||||
spanID: correlation.span_id,
|
||||
runID: correlation.run_id || '',
|
||||
};
|
||||
}
|
||||
if (eventType === 'span.end' && correlation.span_id) {
|
||||
const op = agent.operations['s:' + correlation.span_id];
|
||||
if (op) {
|
||||
const payload = getEnvelopePayload(evt);
|
||||
op.resultPreview = payload.result_preview || '';
|
||||
op.status = payload.status || '';
|
||||
op.durationMS = payload.duration_ms || 0;
|
||||
op.endedAt = new Date(getEnvelopeTS(evt)).getTime() || Date.now();
|
||||
op.usage = payload.usage || null;
|
||||
setTimeout(() => {
|
||||
delete agent.operations['s:' + correlation.span_id];
|
||||
refreshThinkingStream(agent);
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
if (eventType === 'run.start' && correlation.run_id) {
|
||||
const payload = getEnvelopePayload(evt);
|
||||
agent.operations['r:' + correlation.run_id] = {
|
||||
type: 'run',
|
||||
name: 'Thinking…',
|
||||
kind: 'run',
|
||||
startedAt: new Date(getEnvelopeTS(evt)).getTime() || Date.now(),
|
||||
promptPreview: payload.prompt_preview || payload.message_preview || payload.message || '',
|
||||
runID: correlation.run_id,
|
||||
};
|
||||
}
|
||||
if (eventType === 'run.end' && correlation.run_id) {
|
||||
const op = agent.operations['r:' + correlation.run_id];
|
||||
if (op) {
|
||||
const payload = getEnvelopePayload(evt);
|
||||
op.endedAt = new Date(getEnvelopeTS(evt)).getTime() || Date.now();
|
||||
op.status = payload.status || '';
|
||||
op.usage = payload.usage || null;
|
||||
op.model = payload.model || '';
|
||||
op.thinkingTokens = (payload.usage && payload.usage.thinking_tokens) || 0;
|
||||
setTimeout(() => {
|
||||
delete agent.operations['r:' + correlation.run_id];
|
||||
refreshThinkingStream(agent);
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
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 hasSpecificSpans = ops.some(op => op.kind && op.kind !== 'run');
|
||||
return hasSpecificSpans ? ops.filter(op => op.kind && op.kind !== 'run') : ops;
|
||||
}
|
||||
|
||||
function buildAgentActivityBars(agent, bucketCount) {
|
||||
const events = agent.events || [];
|
||||
if (events.length === 0) return '';
|
||||
const count = bucketCount || 20;
|
||||
const now = Date.now();
|
||||
const windowMS = 3600000; // 1 hour
|
||||
const bucketMS = windowMS / count;
|
||||
const buckets = new Array(count).fill(0);
|
||||
|
||||
for (const evt of events) {
|
||||
const ts = new Date(getEnvelopeTS(evt)).getTime();
|
||||
const age = now - ts;
|
||||
if (age > windowMS || age < 0) continue;
|
||||
const idx = Math.min(count - 1, Math.floor((windowMS - age) / bucketMS));
|
||||
buckets[idx]++;
|
||||
}
|
||||
|
||||
const max = Math.max(...buckets, 1);
|
||||
return `<div class="agent-lane-sparkline">${buckets.map(b => {
|
||||
const pct = (b / max * 100).toFixed(0);
|
||||
return `<div class="agent-lane-sparkline-bar" style="height:${Math.max(pct, 3)}%"></div>`;
|
||||
}).join('')}</div>`;
|
||||
}
|
||||
|
||||
function renderAgentLanes() {
|
||||
const contentEl = document.getElementById('agents-content');
|
||||
if (!contentEl) return;
|
||||
contentEl.innerHTML = '<div class="agent-lanes" id="agents-lanes"></div>';
|
||||
|
||||
const lanesEl = document.getElementById('agents-lanes');
|
||||
if (!lanesEl) return;
|
||||
|
||||
const agentKeys = getSortedAgentKeys();
|
||||
|
||||
if (agentKeys.length === 0) {
|
||||
lanesEl.innerHTML = '<p class="empty-state">No recent agent activity</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
lanesEl.innerHTML = agentKeys.map(key => {
|
||||
const agent = agentsState.agents[key];
|
||||
const isOnline = isAgentOnline(agent);
|
||||
const sessionCount = Object.keys(agent.sessions).length;
|
||||
const ops = getAgentDisplayOps(agent);
|
||||
const subagentCount = ops.filter(op => op.kind === 'agent' || op.subType === 'subagent').length;
|
||||
|
||||
const statusClass = sessionCount > 0 ? ' has-sessions' : '';
|
||||
const statusText = !isOnline ? 'offline'
|
||||
: subagentCount > 0 ? subagentCount + ' subagent' + (subagentCount > 1 ? 's' : '')
|
||||
: 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;
|
||||
const kindClass = op.kind === 'agent' || op.subType === 'subagent' ? ' subagent' : '';
|
||||
return `
|
||||
<div class="active-op${stale ? ' stale' : ''}${kindClass}">
|
||||
<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 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" data-agent-key="${escapeHTML(key)}">
|
||||
<div class="agent-lane-header">
|
||||
<div>
|
||||
<div class="agent-lane-name">
|
||||
<span class="agent-lane-dot ${isOnline ? 'online' : 'offline'}"></span>
|
||||
${escapeHTML(agent.name || key)}
|
||||
</div>
|
||||
<div class="agent-lane-meta">${escapeHTML(agent.framework || 'unknown')}${agent.host && agent.host !== agent.name ? ' · ' + escapeHTML(agent.host) : ''}</div>
|
||||
${buildAgentActivityBars(agent)}
|
||||
</div>
|
||||
<span class="agent-lane-status${statusClass}">${statusText}</span>
|
||||
</div>
|
||||
${opsHTML}
|
||||
<div class="agent-lane-events">${eventsHTML}</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
lanesEl.querySelectorAll('.agent-lane[data-agent-key]').forEach(lane => {
|
||||
lane.addEventListener('click', () => {
|
||||
selectAgent(lane.dataset.agentKey || '', 'live');
|
||||
});
|
||||
});
|
||||
lanesEl.querySelectorAll('.timeline-expand-hint').forEach(button => {
|
||||
button.addEventListener('click', event => {
|
||||
event.stopPropagation();
|
||||
button.parentElement.classList.toggle('expanded');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderAgentSummary() {
|
||||
const el = document.getElementById('agents-summary');
|
||||
if (!el) return;
|
||||
const s = agentsState.dbStats;
|
||||
const liveAgents = getSortedAgentKeys().filter(key => isAgentOnline(agentsState.agents[key])).length;
|
||||
const liveSubagents = getSortedAgentKeys().reduce((count, key) => {
|
||||
const agent = agentsState.agents[key];
|
||||
return count + Object.values(agent.operations).filter(op => op.kind === 'agent' || op.subType === 'subagent').length;
|
||||
}, 0);
|
||||
el.innerHTML = `
|
||||
<div class="agents-summary-stat">Live Agents <span class="value">${liveAgents}</span></div>
|
||||
<div class="agents-summary-stat">Active Subagents <span class="value">${liveSubagents}</span></div>
|
||||
<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 getAgentLabel(agent) {
|
||||
if (!agent) return 'Unknown';
|
||||
return agent.name || agent.host || agent.framework || agent.key || 'Unknown';
|
||||
}
|
||||
|
||||
function getAgentLiveSummary(agent) {
|
||||
const recent = agent.events.slice().reverse();
|
||||
const activeOps = getAgentDisplayOps(agent);
|
||||
const sessionIDs = Object.keys(agent.sessions);
|
||||
const live = {
|
||||
sessionIDs,
|
||||
activeOps,
|
||||
activeSubagents: activeOps.filter(op => op.kind === 'agent' || op.subType === 'subagent'),
|
||||
activeTools: activeOps.filter(op => op.kind === 'tool'),
|
||||
latestPrompt: '',
|
||||
latestRunStatus: '',
|
||||
latestModel: '',
|
||||
latestError: '',
|
||||
latestUsage: null,
|
||||
latestContextWindow: null,
|
||||
};
|
||||
|
||||
for (const evt of recent) {
|
||||
const eventType = getEnvelopeType(evt);
|
||||
const payload = getEnvelopePayload(evt);
|
||||
if (!live.latestPrompt && eventType === 'run.start') {
|
||||
live.latestPrompt = payload.prompt_preview || payload.message_preview || payload.message || '';
|
||||
}
|
||||
if (!live.latestRunStatus && eventType === 'run.end') {
|
||||
live.latestRunStatus = payload.status || '';
|
||||
live.latestModel = payload.model || '';
|
||||
live.latestUsage = payload.usage || null;
|
||||
live.latestContextWindow = payload.context_window || null;
|
||||
}
|
||||
if (!live.latestUsage && eventType === 'metric.snapshot' && payload.metrics) {
|
||||
live.latestUsage = payload.metrics.usage || null;
|
||||
live.latestModel = live.latestModel || payload.metrics.model || '';
|
||||
}
|
||||
if (!live.latestError && eventType === 'error') {
|
||||
const errPayload = payload.error || {};
|
||||
live.latestError = errPayload.message || payload.message || '';
|
||||
}
|
||||
if (live.latestPrompt && live.latestRunStatus && live.latestError) break;
|
||||
}
|
||||
|
||||
return live;
|
||||
}
|
||||
|
||||
function buildLiveEventContext(evt) {
|
||||
const eventType = getEnvelopeType(evt);
|
||||
const payload = getEnvelopePayload(evt);
|
||||
const attrs = getEnvelopeAttributes(evt);
|
||||
const correlation = getEnvelopeCorrelation(evt);
|
||||
const parts = [];
|
||||
|
||||
if ((eventType === 'span.start' || eventType === 'span.end') && attrs.span_kind === 'tool') {
|
||||
if (payload.input) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">input</span><span class="v">${escapeHTML(typeof payload.input === 'string' ? payload.input : JSON.stringify(payload.input))}</span></div>`);
|
||||
}
|
||||
if (payload.result_preview) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">result</span><span class="v">${escapeHTML(String(payload.result_preview))}</span></div>`);
|
||||
}
|
||||
}
|
||||
if ((eventType === 'span.start' || eventType === 'span.end') && (attrs.span_kind === 'agent' || attrs.type === 'subagent')) {
|
||||
if (payload.prompt_preview) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">prompt</span><span class="v">${escapeHTML(String(payload.prompt_preview))}</span></div>`);
|
||||
}
|
||||
if (payload.usage && payload.usage.total_tokens !== undefined) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">tokens</span><span class="v">${escapeHTML(formatCount(payload.usage.total_tokens))}</span></div>`);
|
||||
}
|
||||
if (payload.usage && payload.usage.total_cost !== undefined) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">cost</span><span class="v">${escapeHTML(formatCost(payload.usage.total_cost))}</span></div>`);
|
||||
}
|
||||
}
|
||||
if (eventType === 'run.start') {
|
||||
const preview = payload.prompt_preview || payload.message_preview || payload.message || '';
|
||||
if (preview) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">prompt</span><span class="v">${escapeHTML(String(preview))}</span></div>`);
|
||||
}
|
||||
}
|
||||
if (eventType === 'run.end') {
|
||||
if (payload.model) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">model</span><span class="v">${escapeHTML(String(payload.model))}</span></div>`);
|
||||
}
|
||||
if (payload.usage && payload.usage.total_tokens !== undefined) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">tokens</span><span class="v">${escapeHTML(formatCount(payload.usage.total_tokens))}</span></div>`);
|
||||
}
|
||||
if (payload.duration_ms !== undefined) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">duration</span><span class="v">${escapeHTML(formatDuration(payload.duration_ms))}</span></div>`);
|
||||
}
|
||||
}
|
||||
if (eventType === 'metric.snapshot' && payload.metrics) {
|
||||
if (payload.metrics.model) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">model</span><span class="v">${escapeHTML(String(payload.metrics.model))}</span></div>`);
|
||||
}
|
||||
if (payload.metrics.usage && payload.metrics.usage.total_tokens !== undefined) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">tokens</span><span class="v">${escapeHTML(formatCount(payload.metrics.usage.total_tokens))}</span></div>`);
|
||||
}
|
||||
if (payload.metrics.usage && payload.metrics.usage.total_cost !== undefined) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">cost</span><span class="v">${escapeHTML(formatCost(payload.metrics.usage.total_cost))}</span></div>`);
|
||||
}
|
||||
}
|
||||
if (eventType === 'error') {
|
||||
const errPayload = payload.error || {};
|
||||
if (errPayload.type) {
|
||||
parts.push(`<div class="live-detail-row"><span class="k">type</span><span class="v">${escapeHTML(String(errPayload.type))}</span></div>`);
|
||||
}
|
||||
}
|
||||
|
||||
const ids = [];
|
||||
if (correlation.session_id) ids.push(`session ${correlation.session_id}`);
|
||||
if (correlation.run_id) ids.push(`run ${correlation.run_id}`);
|
||||
if (correlation.span_id) ids.push(`span ${correlation.span_id}`);
|
||||
if (ids.length > 0) {
|
||||
parts.push(`<div class="live-detail-row ids"><span class="k">ids</span><span class="v">${escapeHTML(ids.join(' · '))}</span></div>`);
|
||||
}
|
||||
|
||||
return parts.join('');
|
||||
}
|
||||
|
||||
function getRunGroupLabel(runID, events) {
|
||||
const runStart = events.find(evt => getEnvelopeType(evt) === 'run.start');
|
||||
if (!runStart) {
|
||||
return runID ? `Run ${runID.slice(0, 12)}...` : 'Session activity';
|
||||
}
|
||||
const payload = getEnvelopePayload(runStart);
|
||||
const preview = payload.prompt_preview || payload.message_preview || payload.message || '';
|
||||
if (preview) {
|
||||
return preview.length > 72 ? preview.slice(0, 72) + '...' : preview;
|
||||
}
|
||||
return runID ? `Run ${runID.slice(0, 12)}...` : 'Session activity';
|
||||
}
|
||||
|
||||
function groupAgentEventsByRun(events) {
|
||||
const groups = [];
|
||||
const byRun = new Map();
|
||||
|
||||
for (const evt of events) {
|
||||
const correlation = getEnvelopeCorrelation(evt);
|
||||
const runID = correlation.run_id || '';
|
||||
const key = runID || `session:${correlation.session_id || 'unknown'}`;
|
||||
if (!byRun.has(key)) {
|
||||
const group = {
|
||||
key,
|
||||
runID,
|
||||
sessionID: correlation.session_id || '',
|
||||
events: [],
|
||||
subagents: new Set(),
|
||||
tools: new Set(),
|
||||
};
|
||||
byRun.set(key, group);
|
||||
groups.push(group);
|
||||
}
|
||||
|
||||
const group = byRun.get(key);
|
||||
group.events.push(evt);
|
||||
const attrs = getEnvelopeAttributes(evt);
|
||||
if (attrs.span_kind === 'agent' || attrs.type === 'subagent') {
|
||||
group.subagents.add(attrs.name || 'unknown');
|
||||
}
|
||||
if (attrs.span_kind === 'tool' && attrs.name) {
|
||||
group.tools.add(attrs.name);
|
||||
}
|
||||
}
|
||||
|
||||
return groups;
|
||||
}
|
||||
|
||||
function refreshThinkingStream(agent) {
|
||||
if (!agent) return;
|
||||
const selectedKey = agentsState.selectedAgentKey;
|
||||
if (agent.key !== selectedKey) return;
|
||||
const streamEl = document.getElementById('thinking-stream-' + selectedKey);
|
||||
if (streamEl) {
|
||||
streamEl.innerHTML = renderThinkingStream(agent);
|
||||
}
|
||||
}
|
||||
|
||||
function renderThinkingStream(agent) {
|
||||
const now = Date.now();
|
||||
const ops = Object.values(agent.operations).filter(op => {
|
||||
if (op.endedAt) return (now - op.endedAt) < 3000;
|
||||
return (now - op.startedAt) < 300000;
|
||||
});
|
||||
|
||||
if (ops.length === 0) {
|
||||
return '<div class="thinking-stream-empty">Idle — waiting for activity</div>';
|
||||
}
|
||||
|
||||
return ops.map(op => {
|
||||
const elapsed = op.endedAt
|
||||
? Math.floor((op.endedAt - op.startedAt) / 1000)
|
||||
: Math.floor((now - op.startedAt) / 1000);
|
||||
const isEnded = !!op.endedAt;
|
||||
const isSubagent = op.kind === 'agent' || op.subType === 'subagent';
|
||||
const isRun = op.kind === 'run';
|
||||
const isTool = op.kind === 'tool';
|
||||
|
||||
let icon, kindLabel, kindClass;
|
||||
if (isRun) {
|
||||
icon = isEnded ? '✓' : '◌';
|
||||
kindLabel = isEnded ? (op.status === 'success' ? 'Done' : op.status || 'Done') : 'Thinking';
|
||||
kindClass = 'thinking-op-run' + (isEnded ? ' ended' : ' active');
|
||||
} else if (isSubagent) {
|
||||
icon = isEnded ? '✓' : '◎';
|
||||
kindLabel = isEnded ? (op.status === 'success' ? 'Subagent done' : 'Subagent ' + (op.status || 'done')) : 'Subagent';
|
||||
kindClass = 'thinking-op-subagent' + (isEnded ? ' ended' : ' active');
|
||||
} else if (isTool) {
|
||||
icon = isEnded ? '✓' : '▸';
|
||||
kindLabel = isEnded ? (op.status === 'success' ? 'Tool done' : 'Tool ' + (op.status || 'done')) : 'Tool';
|
||||
kindClass = 'thinking-op-tool' + (isEnded ? ' ended' : ' active');
|
||||
} else {
|
||||
icon = '·';
|
||||
kindLabel = op.name;
|
||||
kindClass = 'thinking-op-other' + (isEnded ? ' ended' : ' active');
|
||||
}
|
||||
|
||||
const preview = op.promptPreview || op.inputPreview || '';
|
||||
const result = op.resultPreview || '';
|
||||
const usage = op.usage || {};
|
||||
const thinkingToks = op.thinkingTokens || usage.thinking_tokens || 0;
|
||||
const totalToks = usage.total_tokens || 0;
|
||||
|
||||
const navigableRunID = isRun ? op.runID : (isSubagent ? op.runID : '');
|
||||
const clickable = navigableRunID ? ` clickable" data-run-id="${escapeHTML(navigableRunID)}` : '';
|
||||
|
||||
return `
|
||||
<div class="thinking-op ${kindClass}${clickable ? ' thinking-op-link' : ''}"${clickable ? ` data-run-id="${escapeHTML(navigableRunID)}"` : ''}>
|
||||
<div class="thinking-op-header">
|
||||
<span class="thinking-op-icon${isRun && !isEnded ? ' spin' : ''}">${icon}</span>
|
||||
<span class="thinking-op-kind">${escapeHTML(kindLabel)}</span>
|
||||
<span class="thinking-op-name">${escapeHTML(op.name)}</span>
|
||||
<span class="thinking-op-elapsed${isEnded ? '' : ' live'}" data-start="${op.startedAt}" data-ended="${op.endedAt || ''}">
|
||||
${isEnded ? formatElapsed(elapsed) : `<span class="active-op-time" data-start="${op.startedAt}">${formatElapsed(elapsed)}</span>`}
|
||||
</span>
|
||||
${navigableRunID ? '<span class="thinking-op-arrow">→</span>' : ''}
|
||||
</div>
|
||||
${preview ? `<div class="thinking-op-preview">${escapeHTML(preview.length > 180 ? preview.slice(0, 180) + '…' : preview)}</div>` : ''}
|
||||
${result ? `<div class="thinking-op-result">${escapeHTML(result.length > 180 ? result.slice(0, 180) + '…' : result)}</div>` : ''}
|
||||
${(thinkingToks || totalToks) ? `<div class="thinking-op-tokens">${thinkingToks ? `<span class="thinking-tok-badge">🧠 ${formatTokenCount(thinkingToks)} thinking</span>` : ''}${totalToks ? `<span class="thinking-tok-badge">⚡ ${formatTokenCount(totalToks)} total</span>` : ''}</div>` : ''}
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function renderAgentsLive() {
|
||||
const contentEl = document.getElementById('agents-content');
|
||||
if (!contentEl) return;
|
||||
|
||||
const agentKeys = getSortedAgentKeys();
|
||||
const selectedKey = ensureSelectedAgentKey();
|
||||
if (!selectedKey || agentKeys.length === 0) {
|
||||
contentEl.innerHTML = '<p class="empty-state">No recent agent activity</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const selected = agentsState.agents[selectedKey];
|
||||
const summary = getAgentLiveSummary(selected);
|
||||
const recent = selected.events.slice(-80).reverse();
|
||||
const runGroups = groupAgentEventsByRun(recent);
|
||||
|
||||
contentEl.innerHTML = `
|
||||
<div class="agents-live-layout">
|
||||
<aside class="agents-live-sidebar">
|
||||
<div class="section-title">Agents</div>
|
||||
<div class="agent-picker" id="agent-picker">
|
||||
${agentKeys.map(key => {
|
||||
const agent = agentsState.agents[key];
|
||||
const active = key === selectedKey ? ' active' : '';
|
||||
const online = isAgentOnline(agent) ? 'online' : 'offline';
|
||||
const sessions = Object.keys(agent.sessions).length;
|
||||
const ops = getAgentDisplayOps(agent).length;
|
||||
return `
|
||||
<button class="agent-picker-item${active}" data-agent-key="${escapeHTML(key)}" type="button">
|
||||
<span class="agent-picker-dot ${online}"></span>
|
||||
<span class="agent-picker-main">
|
||||
<span class="agent-picker-name">${escapeHTML(getAgentLabel(agent))}</span>
|
||||
<span class="agent-picker-meta">${escapeHTML(agent.framework || 'unknown')} · ${sessions} sessions · ${ops} ops</span>
|
||||
</span>
|
||||
</button>`;
|
||||
}).join('')}
|
||||
</div>
|
||||
</aside>
|
||||
<section class="agents-live-main">
|
||||
<div class="agents-live-header">
|
||||
<div>
|
||||
<div class="agent-lane-name"><span class="agent-lane-dot ${isAgentOnline(selected) ? 'online' : 'offline'}"></span>${escapeHTML(getAgentLabel(selected))}</div>
|
||||
<div class="agent-lane-meta">${escapeHTML(selected.framework || 'unknown')}${selected.host && selected.host !== selected.name ? ' · ' + escapeHTML(selected.host) : ''}</div>
|
||||
</div>
|
||||
<div class="agents-live-badges">
|
||||
<span class="agents-live-badge">${summary.sessionIDs.length} sessions</span>
|
||||
<span class="agents-live-badge">${summary.activeSubagents.length} subagents</span>
|
||||
<span class="agents-live-badge">${summary.activeTools.length} tools</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agents-live-cards">
|
||||
<div class="agents-live-card thinking-stream-card">
|
||||
<div class="agents-live-card-title">
|
||||
Live Operations
|
||||
${summary.activeOps.length > 0 ? `<span class="live-indicator" style="margin-left:0.5rem"><span class="live-dot"></span>${summary.activeOps.length} active</span>` : ''}
|
||||
</div>
|
||||
<div class="thinking-stream" id="thinking-stream-${escapeHTML(selectedKey)}">
|
||||
${renderThinkingStream(selected)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="agents-live-card">
|
||||
<div class="agents-live-card-title">Last Run</div>
|
||||
<div class="live-kv"><span>Status</span><strong>${escapeHTML(summary.latestRunStatus || '—')}</strong></div>
|
||||
<div class="live-kv"><span>Model</span><strong>${escapeHTML(summary.latestModel || '—')}</strong></div>
|
||||
<div class="live-kv"><span>Tokens</span><strong>${escapeHTML(formatTokenCount(summary.latestUsage ? summary.latestUsage.total_tokens : null))}</strong></div>
|
||||
<div class="live-kv"><span>Thinking</span><strong class="thinking-toks">${escapeHTML(formatTokenCount(summary.latestUsage ? summary.latestUsage.thinking_tokens : null))}</strong></div>
|
||||
<div class="live-kv"><span>Cost</span><strong>${escapeHTML(formatCost(summary.latestUsage ? summary.latestUsage.total_cost : null))}</strong></div>
|
||||
${summary.latestError ? `<div class="live-kv error-kv"><span>Error</span><strong>${escapeHTML(summary.latestError)}</strong></div>` : ''}
|
||||
</div>
|
||||
<div class="agents-live-card">
|
||||
<div class="agents-live-card-title">Context Window</div>
|
||||
<div class="live-kv"><span>Input</span><strong>${escapeHTML(formatTokenCount(summary.latestContextWindow ? summary.latestContextWindow.input_tokens : null))}</strong></div>
|
||||
<div class="live-kv"><span>Output</span><strong>${escapeHTML(formatTokenCount(summary.latestContextWindow ? summary.latestContextWindow.output_tokens : null))}</strong></div>
|
||||
<div class="live-kv"><span>Used</span><strong>${escapeHTML(formatTokenCount(summary.latestContextWindow ? summary.latestContextWindow.used_tokens : null))}</strong></div>
|
||||
<div class="live-kv"><span>Remaining</span><strong>${escapeHTML(formatTokenCount(summary.latestContextWindow ? summary.latestContextWindow.tokens_remaining : null))}</strong></div>
|
||||
${summary.latestContextWindow && summary.latestContextWindow.max_tokens ? `
|
||||
<div class="context-bar">
|
||||
<div class="context-bar-fill" style="width:${Math.min(100, ((summary.latestContextWindow.used_tokens || 0) / summary.latestContextWindow.max_tokens * 100)).toFixed(1)}%"></div>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="agents-live-timeline">
|
||||
${runGroups.length > 0 ? runGroups.map(group => `
|
||||
<section class="live-run-group">
|
||||
<div class="live-run-group-header">
|
||||
<div class="live-run-group-title">${escapeHTML(getRunGroupLabel(group.runID, group.events))}</div>
|
||||
<div class="live-run-group-meta">
|
||||
<span>${escapeHTML(group.runID ? `run ${group.runID.slice(0, 12)}...` : 'session-only')}</span>
|
||||
<span>${escapeHTML(group.subagents.size > 0 ? `${group.subagents.size} subagents` : '0 subagents')}</span>
|
||||
<span>${escapeHTML(group.tools.size > 0 ? `${group.tools.size} tools` : '0 tools')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="live-run-events">
|
||||
${group.events.map(evt => `
|
||||
<div class="timeline-event live-event">
|
||||
<div class="timeline-event-header">
|
||||
${getEventIcon(getEnvelopeType(evt))}
|
||||
<span class="timeline-event-type">${escapeHTML(getEventLabel(getEnvelopeType(evt)))}</span>
|
||||
<span class="timeline-event-time">${escapeHTML(new Date(getEnvelopeTS(evt)).toLocaleTimeString())}</span>
|
||||
</div>
|
||||
${getEventBody(evt)}
|
||||
<div class="live-detail-grid">${buildLiveEventContext(evt)}</div>
|
||||
</div>`).join('')}
|
||||
</div>
|
||||
</section>
|
||||
`).join('') : '<p class="empty-state">No recent activity</p>'}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
`;
|
||||
|
||||
contentEl.querySelectorAll('[data-agent-key]').forEach(button => {
|
||||
button.addEventListener('click', () => selectAgent(button.dataset.agentKey || '', 'live'));
|
||||
});
|
||||
|
||||
const mainSection = contentEl.querySelector('.agents-live-main');
|
||||
if (mainSection) {
|
||||
mainSection.addEventListener('click', e => {
|
||||
const op = e.target.closest('.thinking-op[data-run-id]');
|
||||
if (op && op.dataset.runId) {
|
||||
navigate('/runs/' + op.dataset.runId);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleAgentsRender() {
|
||||
if (_agentsRenderTimer) return;
|
||||
_agentsRenderTimer = requestAnimationFrame(() => {
|
||||
_agentsRenderTimer = null;
|
||||
renderAgentsContent();
|
||||
});
|
||||
}
|
||||
|
||||
function handleAgentsWS(msg) {
|
||||
if (msg.type !== 'message') return;
|
||||
|
||||
const eventType = getEnvelopeType(msg.data);
|
||||
if (eventType === 'openclaw.snapshot') {
|
||||
mergeOpenClawEvents([msg.data]);
|
||||
scheduleAgentsRender();
|
||||
return;
|
||||
}
|
||||
if (!isAgentTimelineEvent(msg.data)) 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]);
|
||||
scheduleAgentsRender();
|
||||
}
|
||||
|
||||
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) {
|
||||
let changed = false;
|
||||
|
||||
for (const evt of events) {
|
||||
const id = getRecordID(evt);
|
||||
const agent = getAgentBucket(evt);
|
||||
if (!id || !agent || agent.eventIDs.has(id)) continue;
|
||||
processAgentEvent(evt);
|
||||
changed = true;
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
function recomputeAgentStats() {
|
||||
const stats = { messages: 0, tools: 0, errors: 0, toolCounts: {} };
|
||||
|
||||
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++;
|
||||
}
|
||||
}
|
||||
|
||||
agentsState.stats = stats;
|
||||
}
|
||||
|
||||
function bindAgentViewToggle() {
|
||||
const root = document.getElementById('agents-view-toggle');
|
||||
if (!root) return;
|
||||
root.querySelectorAll('[data-mode]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
setAgentsViewMode(button.dataset.mode || 'overview');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateAgentViewToggle() {
|
||||
const root = document.getElementById('agents-view-toggle');
|
||||
if (!root) return;
|
||||
root.querySelectorAll('[data-mode]').forEach(button => {
|
||||
button.classList.toggle('active', button.dataset.mode === agentsState.viewMode);
|
||||
});
|
||||
}
|
||||
|
||||
function renderAgentsContent() {
|
||||
renderAgentSummary();
|
||||
updateAgentViewToggle();
|
||||
if (agentsState.viewMode === 'live') {
|
||||
renderAgentsLive();
|
||||
return;
|
||||
}
|
||||
renderAgentLanes();
|
||||
}
|
||||
|
||||
async function loadSelectedAgentLiveData() {
|
||||
const selectedKey = ensureSelectedAgentKey();
|
||||
if (!selectedKey) return;
|
||||
|
||||
const agent = agentsState.agents[selectedKey];
|
||||
if (!agent || agent.liveLoaded || agent.liveLoading || !agent.clientID || !agent.framework) {
|
||||
return;
|
||||
}
|
||||
|
||||
agent.liveLoading = true;
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
params.set('client_id', agent.clientID);
|
||||
params.set('framework', agent.framework);
|
||||
params.set('limit', '250');
|
||||
const data = await api('/v1/agents/live?' + params.toString());
|
||||
addAgentEvents((data.events || []).slice().reverse());
|
||||
agent.liveLoaded = true;
|
||||
} catch (err) {
|
||||
console.error('Failed to load live agent context:', err);
|
||||
} finally {
|
||||
agent.liveLoading = false;
|
||||
if (isCurrentPath('/agents') && agentsState.viewMode === 'live' && agentsState.selectedAgentKey === selectedKey) {
|
||||
renderAgentsContent();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Exports ──────────────────────────────────────────────
|
||||
|
||||
export async function renderAgents(initialKey, routeToken) {
|
||||
resetAgentsState();
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="page-header">
|
||||
<h2>Agents <span class="live-indicator"><span class="live-dot"></span>Live</span></h2>
|
||||
</div>
|
||||
<div class="agents-toolbar">
|
||||
<div class="view-toggle" id="agents-view-toggle">
|
||||
<button class="view-toggle-btn active" data-mode="overview" type="button">Overview</button>
|
||||
<button class="view-toggle-btn" data-mode="live" type="button">Live</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agents-summary-row" id="agents-summary"></div>
|
||||
<div id="agents-content">${agentsSkeleton()}</div>
|
||||
`;
|
||||
|
||||
bindAgentViewToggle();
|
||||
|
||||
try {
|
||||
const [snapshots, events, summaryData] = await Promise.all([
|
||||
api('/v1/events?event_type=openclaw.snapshot&limit=100').catch(() => ({ events: [] })),
|
||||
api('/v1/events?limit=300'),
|
||||
api('/v1/stats/summary').catch(() => null),
|
||||
]);
|
||||
|
||||
if ((routeToken && !isRouteCurrent(routeToken)) || !isCurrentPath('/agents')) return;
|
||||
|
||||
if (summaryData) {
|
||||
agentsState.dbStats.messages = summaryData.runs_today || 0;
|
||||
agentsState.dbStats.tools = summaryData.tool_calls_today || 0;
|
||||
agentsState.dbStats.errors = summaryData.errors_today || 0;
|
||||
}
|
||||
|
||||
mergeOpenClawEvents(snapshots.events || []);
|
||||
addAgentEvents((events.events || []).filter(isAgentTimelineEvent).slice().reverse());
|
||||
|
||||
if (initialKey && agentsState.agents[initialKey]) {
|
||||
agentsState.selectedAgentKey = initialKey;
|
||||
renderBreadcrumbs();
|
||||
}
|
||||
|
||||
renderAgentsContent();
|
||||
} catch (e) {
|
||||
if (routeToken && !isRouteCurrent(routeToken)) return;
|
||||
document.getElementById('agents-content').innerHTML =
|
||||
`<p class="empty-state">Error loading agent activity: ${escapeHTML(e.message)}</p>`;
|
||||
}
|
||||
|
||||
if (!routeToken || isRouteCurrent(routeToken)) {
|
||||
agentsState.timerInterval = setInterval(updateAgentTimers, 1000);
|
||||
agentsUnsubscribe = subscribeWS(handleAgentsWS);
|
||||
}
|
||||
}
|
||||
|
||||
export function selectAgent(key, nextMode) {
|
||||
if (!key || !agentsState.agents[key]) return;
|
||||
agentsState.selectedAgentKey = key;
|
||||
if (nextMode) {
|
||||
agentsState.viewMode = nextMode;
|
||||
}
|
||||
const newPath = '/agents/' + encodeURIComponent(key);
|
||||
if (window.location.pathname !== newPath) {
|
||||
history.pushState(null, '', newPath);
|
||||
renderBreadcrumbs();
|
||||
}
|
||||
renderAgentsContent();
|
||||
if (agentsState.viewMode === 'live') {
|
||||
void loadSelectedAgentLiveData();
|
||||
}
|
||||
}
|
||||
|
||||
export function cleanup() {
|
||||
if (agentsState.timerInterval) {
|
||||
clearInterval(agentsState.timerInterval);
|
||||
agentsState.timerInterval = null;
|
||||
}
|
||||
if (agentsUnsubscribe) {
|
||||
agentsUnsubscribe();
|
||||
agentsUnsubscribe = null;
|
||||
}
|
||||
if (_agentsRenderTimer) {
|
||||
cancelAnimationFrame(_agentsRenderTimer);
|
||||
_agentsRenderTimer = null;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,412 @@
|
||||
import { app, isRouteCurrent } from '../router.js';
|
||||
import { api } from '../api.js';
|
||||
import {
|
||||
escapeHTML, relativeTime,
|
||||
getEnvelopeType, getEnvelopePayload, getEnvelopeTS,
|
||||
isCurrentPath, infrastructureSkeleton, formatBytes,
|
||||
} from '../utils.js';
|
||||
import { subscribeWS } from '../ws.js';
|
||||
import {
|
||||
openclawState, swarmState,
|
||||
mergeOpenClawEvents, mergeSwarmSnapshot, mergeSwarmServiceSnapshot,
|
||||
getK8sHomelabServices,
|
||||
} from '../state.js';
|
||||
|
||||
let infraUnsubscribe = null;
|
||||
let _infraTimerInterval = null;
|
||||
|
||||
export function cleanup() {
|
||||
if (infraUnsubscribe) { infraUnsubscribe(); infraUnsubscribe = null; }
|
||||
if (_infraTimerInterval) { clearInterval(_infraTimerInterval); _infraTimerInterval = null; }
|
||||
}
|
||||
|
||||
function handleInfraWS(msg) {
|
||||
if (msg.type !== 'message') return;
|
||||
|
||||
const eventType = getEnvelopeType(msg.data);
|
||||
|
||||
if (eventType === 'openclaw.snapshot') {
|
||||
mergeOpenClawEvents([msg.data]);
|
||||
if (isCurrentPath('/infrastructure')) renderInfraGrid();
|
||||
// Dead branch removed: if (isCurrentPath('/agents')) renderAgentVMStrip()
|
||||
return;
|
||||
}
|
||||
|
||||
if (eventType === 'swarm.snapshot') {
|
||||
mergeSwarmSnapshot(msg.data);
|
||||
if (isCurrentPath('/infrastructure')) renderInfraGrid();
|
||||
return;
|
||||
}
|
||||
|
||||
if (eventType === 'swarm.service.snapshot') {
|
||||
mergeSwarmServiceSnapshot(msg.data);
|
||||
if (isCurrentPath('/infrastructure')) renderInfraGrid();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadInfrastructureSnapshots() {
|
||||
const [ocData, swarmData, serviceData] = await Promise.all([
|
||||
api('/v1/events?event_type=openclaw.snapshot&limit=100'),
|
||||
api('/v1/events?event_type=swarm.snapshot&limit=10').catch(() => ({ events: [] })),
|
||||
api('/v1/events?event_type=swarm.service.snapshot&limit=100').catch(() => ({ events: [] })),
|
||||
]);
|
||||
|
||||
mergeOpenClawEvents(ocData.events || []);
|
||||
for (const evt of swarmData.events || []) mergeSwarmSnapshot(evt);
|
||||
for (const evt of serviceData.events || []) mergeSwarmServiceSnapshot(evt);
|
||||
}
|
||||
|
||||
// ── Infrastructure Uptime & Freshness ───────────────────
|
||||
function getUptimeBadge(uptimeSec) {
|
||||
if (!uptimeSec) return '';
|
||||
const hours = uptimeSec / 3600;
|
||||
const pct = Math.min(100, (hours / 24) * 100);
|
||||
const cls = pct >= 99 ? 'good' : pct >= 90 ? 'warn' : 'bad';
|
||||
return `<span class="uptime-badge ${cls}">${pct.toFixed(0)}% / 24h</span>`;
|
||||
}
|
||||
|
||||
function formatUptime(sec) {
|
||||
if (!sec) return '-';
|
||||
if (sec < 60) return sec + 's';
|
||||
if (sec < 3600) return Math.floor(sec / 60) + 'm';
|
||||
if (sec < 86400) return Math.floor(sec / 3600) + 'h ' + Math.floor((sec % 3600) / 60) + 'm';
|
||||
return Math.floor(sec / 86400) + 'd ' + Math.floor((sec % 86400) / 3600) + 'h';
|
||||
}
|
||||
|
||||
function serviceCardHeader(svc) {
|
||||
const uptimeBadge = getUptimeBadge(svc.uptime_sec);
|
||||
return `
|
||||
<div class="service-card-header">
|
||||
<div>
|
||||
<div class="service-card-name">${escapeHTML(svc.name)}${uptimeBadge ? ' ' + uptimeBadge : ''}</div>
|
||||
<div class="service-role-tag">${escapeHTML(svc.role || '')}</div>
|
||||
</div>
|
||||
<span class="service-badge ${escapeHTML(svc.status || 'down')}">${escapeHTML(svc.status || 'down')}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function serviceStatRow(label, value, valueClass) {
|
||||
return `
|
||||
<div class="service-stat-row">
|
||||
<span class="service-stat-label">${escapeHTML(label)}</span>
|
||||
<span class="service-stat-value${valueClass ? ' ' + valueClass : ''}">${value}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderVMCard(name) {
|
||||
const evt = openclawState.instances[name];
|
||||
const payload = getEnvelopePayload(evt);
|
||||
const inst = payload.instance || {};
|
||||
const host = payload.host || {};
|
||||
const guest = payload.guest;
|
||||
const issues = payload.issues;
|
||||
|
||||
return `
|
||||
<div class="vm-card">
|
||||
<div class="vm-card-header">
|
||||
<h3>${escapeHTML(inst.name || name)}</h3>
|
||||
<div class="vm-status ${host.state === 'running' ? 'running' : 'stopped'}">
|
||||
${host.state === 'running' ? 'Running' : 'Stopped'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="vm-updated"><span class="freshness-timer" data-ts="${escapeHTML(getEnvelopeTS(evt))}">Updated ${escapeHTML(relativeTime(getEnvelopeTS(evt)))}</span></div>
|
||||
<table class="vm-stats">
|
||||
<tr><td>Host</td><td>${escapeHTML(inst.host || '-')}</td></tr>
|
||||
<tr><td>Domain</td><td>${escapeHTML(inst.domain || '-')}</td></tr>
|
||||
<tr><td>vCPUs</td><td>${host.vcpus || '-'}</td></tr>
|
||||
<tr><td>Memory</td><td>${escapeHTML(formatBytes(host.memory_kib ? host.memory_kib * 1024 : 0) || '-')}</td></tr>
|
||||
<tr><td>Disk</td><td>${escapeHTML(formatBytes(host.disk_actual_bytes) || '-')}</td></tr>
|
||||
<tr><td>Autostart</td><td>${host.autostart ? 'Yes' : 'No'}</td></tr>
|
||||
</table>
|
||||
${guest ? `
|
||||
<div class="vm-card-divider"></div>
|
||||
<table class="vm-stats">
|
||||
<tr><td>Gateway</td><td style="${guest.service_active ? 'color:var(--success)' : 'color:var(--error)'}">${guest.service_active ? 'Active' : 'Inactive'}</td></tr>
|
||||
<tr><td>HTTP</td><td style="${guest.http_status === 200 ? 'color:var(--success)' : 'color:var(--error)'}">${guest.http_status || 'N/A'}</td></tr>
|
||||
<tr><td>Version</td><td>${escapeHTML(guest.version || '-')}</td></tr>
|
||||
<tr><td>Guest Mem</td><td>${guest.memory_percent !== undefined ? guest.memory_percent.toFixed(1) : '-'}%</td></tr>
|
||||
<tr><td>Guest Disk</td><td>${guest.disk_percent !== undefined ? guest.disk_percent.toFixed(1) : '-'}%</td></tr>
|
||||
<tr><td>Load</td><td>${guest.load_average !== undefined ? guest.load_average.toFixed(2) : '-'}</td></tr>
|
||||
<tr><td>Uptime</td><td>${escapeHTML(guest.service_uptime || '-')}</td></tr>
|
||||
</table>
|
||||
` : ''}
|
||||
${issues && Object.values(issues).some(Boolean) ? `
|
||||
<div class="vm-card-divider"></div>
|
||||
<div class="vm-issues-label">Issues</div>
|
||||
<div class="vm-issues">
|
||||
${Object.entries(issues).filter(([, value]) => value).map(([key]) => `
|
||||
<span class="issue ${escapeHTML(key)}">${escapeHTML(key.replace(/_/g, ' '))}</span>
|
||||
`).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderLLMProxyCard(svc) {
|
||||
const extra = svc.extra || {};
|
||||
const modelCount = extra.model_count;
|
||||
const cooldowns = extra.cooldown_count || 0;
|
||||
const httpStatus = svc.http_status;
|
||||
const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';
|
||||
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div style="display:flex;align-items:baseline;gap:0.5rem">
|
||||
<span class="llm-model-count">${modelCount !== undefined ? modelCount : '-'}</span>
|
||||
<span class="llm-model-label">models</span>
|
||||
</div>
|
||||
${cooldowns > 0 ? `<div class="llm-cooldown-banner">⚠ ${cooldowns} model${cooldowns > 1 ? 's' : ''} in cooldown</div>` : ''}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderDBCard(svc) {
|
||||
const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderSearchCard(svc) {
|
||||
const extra = svc.extra || {};
|
||||
const ms = extra.response_ms;
|
||||
const httpStatus = svc.http_status;
|
||||
const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
|
||||
${ms !== undefined ? serviceStatRow('Response', ms + 'ms', ms < 500 ? 'ok' : 'warn') : ''}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderMCPCard(svc) {
|
||||
const extra = svc.extra || {};
|
||||
const reachable = extra.port_reachable;
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${reachable !== undefined ? serviceStatRow('Port', reachable ? 'reachable' : 'unreachable', reachable ? 'ok' : 'bad') : ''}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderVoiceCard(svc) {
|
||||
const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderAutomationCard(svc) {
|
||||
const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderAPICard(svc) {
|
||||
const httpStatus = svc.http_status;
|
||||
const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderWorkerCard(svc) {
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderGenericServiceCard(svc) {
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderServiceCard(svc) {
|
||||
const role = svc.role || 'unknown';
|
||||
switch (role) {
|
||||
case 'llm-proxy': return renderLLMProxyCard(svc);
|
||||
case 'db': return renderDBCard(svc);
|
||||
case 'search': return renderSearchCard(svc);
|
||||
case 'mcp': return renderMCPCard(svc);
|
||||
case 'voice': return renderVoiceCard(svc);
|
||||
case 'automation':return renderAutomationCard(svc);
|
||||
case 'api':
|
||||
case 'web': return renderAPICard(svc);
|
||||
case 'worker':
|
||||
case 'queue': return renderWorkerCard(svc);
|
||||
default: return renderGenericServiceCard(svc);
|
||||
}
|
||||
}
|
||||
|
||||
function renderHomelabServiceCard(svc) {
|
||||
const httpClass = svc.httpStatus === 200 ? 'ok' : svc.httpStatus ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Endpoint', escapeHTML(svc.endpoint || '-'), '')}
|
||||
${serviceStatRow('Bucket', escapeHTML(svc.bucket ? `${svc.bucket}/${svc.prefix || ''}` : '-'), '')}
|
||||
${serviceStatRow('Usage', escapeHTML(formatBytes(svc.totalBytes) || '-'), '')}
|
||||
${serviceStatRow('Objects', escapeHTML(svc.objectCount !== undefined ? String(svc.objectCount) : '-'), '')}
|
||||
${serviceStatRow('HTTP', svc.httpStatus ? String(svc.httpStatus) : '-', httpClass)}
|
||||
${serviceStatRow('Source', escapeHTML(svc.sourceInstance || '-'), '')}
|
||||
${serviceStatRow('Latest', escapeHTML(svc.latestBackup ? relativeTime(svc.latestBackup) : '-'), '')}
|
||||
${svc.error ? serviceStatRow('Error', escapeHTML(svc.error), 'bad') : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderInfraGrid() {
|
||||
const vmNames = Object.keys(openclawState.instances).sort();
|
||||
const allServices = Object.values(swarmState.services);
|
||||
const agentmonServices = allServices.filter(s => s.group === 'agentmon');
|
||||
const swarmServices = allServices.filter(s => s.group !== 'agentmon');
|
||||
const homelabServices = getK8sHomelabServices();
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="page-header">
|
||||
<div class="page-header-row">
|
||||
<h2>Infrastructure <span class="live-indicator"><span class="live-dot"></span>Live</span></h2>
|
||||
<button class="refresh-btn" id="infra-refresh-btn" type="button" title="Refresh infrastructure data">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 2.5A7 7 0 1 0 14 9"/><polyline points="14 2.5 14 6 10.5 6"/></svg>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="infra-section">
|
||||
<p class="infra-section-title">VMs</p>
|
||||
${vmNames.length === 0
|
||||
? '<p class="empty-state">No VM data</p>'
|
||||
: `<div class="vm-grid">${vmNames.map(name => renderVMCard(name)).join('')}</div>`
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="infra-section">
|
||||
<p class="infra-section-title">Swarm Services</p>
|
||||
${swarmServices.length === 0
|
||||
? '<p class="empty-state">No swarm service data</p>'
|
||||
: `<div class="service-grid">${swarmServices.map(svc => renderServiceCard(svc)).join('')}</div>`
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="infra-section">
|
||||
<p class="infra-section-title">K8s Homelab</p>
|
||||
${homelabServices.length === 0
|
||||
? '<p class="empty-state">No k8s homelab service data</p>'
|
||||
: `<div class="service-grid">${homelabServices.map(svc => renderHomelabServiceCard(svc)).join('')}</div>`
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="infra-section">
|
||||
<p class="infra-section-title">Agentmon</p>
|
||||
${agentmonServices.length === 0
|
||||
? '<p class="empty-state">No agentmon service data</p>'
|
||||
: `<div class="service-grid">${agentmonServices.map(svc => renderServiceCard(svc)).join('')}</div>`
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Start freshness timer — update "Updated X ago" text every 10s
|
||||
if (_infraTimerInterval) clearInterval(_infraTimerInterval);
|
||||
_infraTimerInterval = setInterval(() => {
|
||||
document.querySelectorAll('.freshness-timer[data-ts]').forEach(el => {
|
||||
el.textContent = 'Updated ' + relativeTime(el.dataset.ts);
|
||||
});
|
||||
}, 10000);
|
||||
|
||||
// Manual refresh button
|
||||
document.getElementById('infra-refresh-btn')?.addEventListener('click', async () => {
|
||||
const btn = document.getElementById('infra-refresh-btn');
|
||||
if (btn) btn.disabled = true;
|
||||
try {
|
||||
await loadInfrastructureSnapshots();
|
||||
renderInfraGrid();
|
||||
} finally {
|
||||
const b = document.getElementById('infra-refresh-btn');
|
||||
if (b) b.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export async function renderInfrastructure(routeToken) {
|
||||
app.innerHTML = `<div class="page-header"><h2>Infrastructure</h2></div><div style="margin-top:1rem">${infrastructureSkeleton()}</div>`;
|
||||
|
||||
infraUnsubscribe = subscribeWS(handleInfraWS);
|
||||
|
||||
try {
|
||||
await loadInfrastructureSnapshots();
|
||||
if (routeToken && !isRouteCurrent(routeToken)) return;
|
||||
|
||||
if (isCurrentPath('/infrastructure')) {
|
||||
renderInfraGrid();
|
||||
}
|
||||
} catch (e) {
|
||||
if (isCurrentPath('/infrastructure')) {
|
||||
app.innerHTML = `<div class="page-header"><h2>Infrastructure</h2></div><p class="empty-state">Error: ${escapeHTML(e.message)}</p>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,409 @@
|
||||
import { app, navigate, isRouteCurrent } from '../router.js';
|
||||
import { api } from '../api.js';
|
||||
import {
|
||||
escapeHTML, formatDuration, formatTokenCount, formatCost, formatElapsed,
|
||||
getEnvelopeCorrelation, getEnvelopeType, getEnvelopeAttributes, getEnvelopePayload,
|
||||
isCurrentPath, renderCopyButton, statusIcon, skeletonRows, extractRunUsage,
|
||||
} from '../utils.js';
|
||||
import { subscribeWS } from '../ws.js';
|
||||
|
||||
let runDetailUnsubscribe = null;
|
||||
let runLiveOps = {}; // spanID → { name, kind, startedAt, promptPreview, inputPreview }
|
||||
let _runReloadTimer = null;
|
||||
let runSpansViewMode = 'table';
|
||||
|
||||
export function cleanup() {
|
||||
if (runDetailUnsubscribe) { runDetailUnsubscribe(); runDetailUnsubscribe = null; }
|
||||
clearTimeout(_runReloadTimer);
|
||||
_runReloadTimer = null;
|
||||
runLiveOps = {};
|
||||
}
|
||||
|
||||
function renderSpanPayload(sp) {
|
||||
const outer = sp.payload || {};
|
||||
const inner = outer.payload || {};
|
||||
const parts = [];
|
||||
|
||||
if (sp.kind === 'tool') {
|
||||
if (inner.input !== undefined) {
|
||||
const inputStr = typeof inner.input === 'object'
|
||||
? JSON.stringify(inner.input, null, 2)
|
||||
: String(inner.input);
|
||||
parts.push(`<div class="span-kv"><span class="span-kv-key">Input</span><pre class="span-kv-val span-kv-raw">${escapeHTML(inputStr)}</pre></div>`);
|
||||
}
|
||||
if (inner.result_preview !== undefined) {
|
||||
parts.push(`<div class="span-kv"><span class="span-kv-key">Result</span><pre class="span-kv-val span-kv-raw">${escapeHTML(String(inner.result_preview))}</pre></div>`);
|
||||
}
|
||||
} else if (sp.kind === 'agent') {
|
||||
if (inner.prompt_preview) {
|
||||
parts.push(`<div class="span-kv"><span class="span-kv-key">Prompt</span><pre class="span-kv-val span-kv-raw">${escapeHTML(String(inner.prompt_preview))}</pre></div>`);
|
||||
}
|
||||
if (inner.usage) {
|
||||
const u = inner.usage;
|
||||
const tokens = [
|
||||
u.total_tokens != null ? `${u.total_tokens} total` : null,
|
||||
u.input_tokens != null ? `${u.input_tokens} in` : null,
|
||||
u.output_tokens != null ? `${u.output_tokens} out` : null,
|
||||
].filter(Boolean).join(' · ');
|
||||
if (tokens) parts.push(`<div class="span-kv"><span class="span-kv-key">Tokens</span><span class="span-kv-val">${escapeHTML(tokens)}</span></div>`);
|
||||
if (u.total_cost != null) {
|
||||
parts.push(`<div class="span-kv"><span class="span-kv-key">Cost</span><span class="span-kv-val">${escapeHTML(formatCost(u.total_cost))}</span></div>`);
|
||||
}
|
||||
}
|
||||
if (inner.model) {
|
||||
parts.push(`<div class="span-kv"><span class="span-kv-key">Model</span><span class="span-kv-val">${escapeHTML(String(inner.model))}</span></div>`);
|
||||
}
|
||||
} else {
|
||||
const raw = Object.keys(inner).length > 0 ? inner : (Object.keys(outer).length > 0 ? outer : null);
|
||||
if (raw) {
|
||||
parts.push(`<pre class="span-kv-raw">${escapeHTML(JSON.stringify(raw, null, 2))}</pre>`);
|
||||
}
|
||||
}
|
||||
|
||||
if (sp.duration_ms != null) {
|
||||
parts.push(`<div class="span-kv"><span class="span-kv-key">Duration</span><span class="span-kv-val">${escapeHTML(formatDuration(sp.duration_ms))}</span></div>`);
|
||||
}
|
||||
|
||||
return parts.length > 0
|
||||
? parts.join('')
|
||||
: '<span style="font-size:0.75rem;color:var(--text-dim)">No payload data</span>';
|
||||
}
|
||||
|
||||
function renderTimescale(totalMS) {
|
||||
const ticks = 5;
|
||||
return Array.from({ length: ticks + 1 }, (_, i) => {
|
||||
const pct = (i / ticks * 100).toFixed(0);
|
||||
return `<span style="left:${pct}%">${escapeHTML(formatDuration(totalMS * i / ticks))}</span>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function renderSpanWaterfall(spans, runStartedAt, runDurationMS) {
|
||||
if (!spans || spans.length === 0) return '<p class="empty-state">No spans</p>';
|
||||
const runStart = new Date(runStartedAt).getTime();
|
||||
const totalMS = runDurationMS || Math.max(...spans.map(sp => {
|
||||
const s = new Date(sp.started_at || runStartedAt).getTime();
|
||||
return (s - runStart) + (sp.duration_ms || 0);
|
||||
}), 1);
|
||||
|
||||
return `
|
||||
<div class="waterfall">
|
||||
<div class="waterfall-header">
|
||||
<div class="waterfall-name-col">Span</div>
|
||||
<div class="waterfall-bar-col">
|
||||
<div class="waterfall-timescale">${renderTimescale(totalMS)}</div>
|
||||
</div>
|
||||
</div>
|
||||
${spans.map(sp => {
|
||||
const spStart = sp.started_at ? new Date(sp.started_at).getTime() - runStart : 0;
|
||||
const spDur = sp.duration_ms || 0;
|
||||
const leftPct = Math.max(0, (spStart / totalMS * 100)).toFixed(2);
|
||||
const widthPct = Math.max(0.5, (spDur / totalMS * 100)).toFixed(2);
|
||||
const kindClass = sp.kind || 'unknown';
|
||||
const statusClass = sp.status === 'error' ? ' wf-error' : sp.status === 'success' ? ' wf-success' : '';
|
||||
return `
|
||||
<div class="waterfall-row">
|
||||
<div class="waterfall-name-col">
|
||||
<span class="span-kind-badge ${escapeHTML(kindClass)}">${escapeHTML(sp.kind || '?')}</span>
|
||||
<span class="waterfall-name" title="${escapeHTML(sp.name || '')}">${escapeHTML((sp.name || '(unnamed)').slice(0, 40))}</span>
|
||||
</div>
|
||||
<div class="waterfall-bar-col">
|
||||
<div class="waterfall-bar-track">
|
||||
<div class="waterfall-bar${statusClass}" style="left:${leftPct}%;width:${widthPct}%" title="${escapeHTML(formatDuration(spDur))}">
|
||||
<span class="waterfall-bar-label">${spDur > totalMS * 0.05 ? escapeHTML(formatDuration(spDur)) : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderRunSpansRows(spans) {
|
||||
if (!spans || spans.length === 0) {
|
||||
return '<tr><td colspan="4" class="empty-state">No spans</td></tr>';
|
||||
}
|
||||
return spans.map((sp, i) => {
|
||||
const kindClass = sp.kind || 'unknown';
|
||||
return `
|
||||
<tr class="expandable run-span-row ${sp.status === 'error' ? 'tr-error' : ''}" data-index="${i}">
|
||||
<td>
|
||||
<span class="expand-icon"></span>
|
||||
<span class="span-kind-badge ${escapeHTML(kindClass)}">${escapeHTML(sp.kind || '?')}</span>
|
||||
${escapeHTML(sp.name || '(unnamed)')}
|
||||
</td>
|
||||
<td>${escapeHTML(sp.kind || '-')}</td>
|
||||
<td>${statusIcon(sp.status)}</td>
|
||||
<td>${escapeHTML(formatDuration(sp.duration_ms))}</td>
|
||||
</tr>
|
||||
<tr class="span-detail-row" data-index="${i}" style="display:none">
|
||||
<td colspan="4">
|
||||
<div class="span-details-structured">${renderSpanPayload(sp)}</div>
|
||||
</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function renderRunSpansTable(spans) {
|
||||
return `
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Kind</th>
|
||||
<th>Status</th>
|
||||
<th>Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="spans-body">
|
||||
${renderRunSpansRows(spans)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function captureOpenSpanIndices() {
|
||||
const openIndices = new Set();
|
||||
document.querySelectorAll('tr.span-detail-row').forEach(row => {
|
||||
if (row.style.display !== 'none') openIndices.add(row.dataset.index);
|
||||
});
|
||||
return openIndices;
|
||||
}
|
||||
|
||||
function restoreOpenSpanIndices(openIndices) {
|
||||
if (!openIndices || openIndices.size === 0) return;
|
||||
document.querySelectorAll('tr.span-detail-row').forEach(row => {
|
||||
if (!openIndices.has(row.dataset.index)) return;
|
||||
row.style.display = 'table-row';
|
||||
const hdr = document.querySelector(`tr.run-span-row[data-index="${row.dataset.index}"]`);
|
||||
const icon = hdr?.querySelector('.expand-icon');
|
||||
if (icon) icon.style.transform = 'rotate(45deg)';
|
||||
});
|
||||
}
|
||||
|
||||
function updateSpanViewButtons() {
|
||||
document.getElementById('spans-view-table')?.classList.toggle('active', runSpansViewMode === 'table');
|
||||
document.getElementById('spans-view-waterfall')?.classList.toggle('active', runSpansViewMode === 'waterfall');
|
||||
}
|
||||
|
||||
function renderSpansView(spans, run, openIndices) {
|
||||
const container = document.getElementById('spans-container');
|
||||
if (!container) return;
|
||||
|
||||
if (runSpansViewMode === 'waterfall') {
|
||||
container.innerHTML = renderSpanWaterfall(
|
||||
spans,
|
||||
run.started_at,
|
||||
run.ended_at ? new Date(run.ended_at) - new Date(run.started_at) : null,
|
||||
);
|
||||
} else {
|
||||
container.innerHTML = renderRunSpansTable(spans);
|
||||
bindRunSpanRows();
|
||||
restoreOpenSpanIndices(openIndices);
|
||||
}
|
||||
|
||||
updateSpanViewButtons();
|
||||
}
|
||||
|
||||
function bindSpanViewToggles(spans, run) {
|
||||
const tableBtn = document.getElementById('spans-view-table');
|
||||
const waterfallBtn = document.getElementById('spans-view-waterfall');
|
||||
|
||||
if (tableBtn) {
|
||||
tableBtn.onclick = () => {
|
||||
runSpansViewMode = 'table';
|
||||
renderSpansView(spans, run, captureOpenSpanIndices());
|
||||
};
|
||||
}
|
||||
if (waterfallBtn) {
|
||||
waterfallBtn.onclick = () => {
|
||||
runSpansViewMode = 'waterfall';
|
||||
renderSpansView(spans, run, captureOpenSpanIndices());
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function bindRunSpanRows() {
|
||||
document.querySelectorAll('tr.run-span-row').forEach(row => {
|
||||
row.addEventListener('click', () => {
|
||||
const idx = row.dataset.index;
|
||||
const detailRow = document.querySelector(`tr.span-detail-row[data-index="${idx}"]`);
|
||||
const icon = row.querySelector('.expand-icon');
|
||||
if (!detailRow) return;
|
||||
const isOpen = detailRow.style.display !== 'none';
|
||||
detailRow.style.display = isOpen ? 'none' : 'table-row';
|
||||
if (icon) icon.style.transform = isOpen ? '' : 'rotate(45deg)';
|
||||
});
|
||||
row.setAttribute('tabindex', '0');
|
||||
row.setAttribute('role', 'button');
|
||||
row.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
row.click();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderRunLiveOps() {
|
||||
const el = document.getElementById('run-live-ops');
|
||||
if (!el) return;
|
||||
const ops = Object.values(runLiveOps);
|
||||
if (ops.length === 0) {
|
||||
el.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
el.innerHTML = `<div class="run-live-ops-inner">${ops.map(op => {
|
||||
const elapsed = Math.floor((Date.now() - op.startedAt) / 1000);
|
||||
const isSubagent = op.kind === 'agent' || op.subType === 'subagent';
|
||||
const icon = isSubagent ? '◎' : op.kind === 'run' ? '◌' : '▸';
|
||||
const label = isSubagent ? 'subagent' : op.kind === 'run' ? 'thinking' : 'tool';
|
||||
const preview = op.promptPreview || op.inputPreview || '';
|
||||
return `
|
||||
<div class="run-live-op-pill ${label}">
|
||||
<span class="run-live-op-spin">${icon}</span>
|
||||
<span class="run-live-op-name">${escapeHTML(op.name)}</span>
|
||||
${preview ? `<span class="run-live-op-preview">${escapeHTML(preview.length > 60 ? preview.slice(0, 60) + '…' : preview)}</span>` : ''}
|
||||
<span class="run-live-op-time active-op-time" data-start="${op.startedAt}">${formatElapsed(elapsed)}</span>
|
||||
</div>`;
|
||||
}).join('')}</div>`;
|
||||
}
|
||||
|
||||
function handleRunWS(runID, msg) {
|
||||
if (msg.type !== 'message') return;
|
||||
const correlation = getEnvelopeCorrelation(msg.data);
|
||||
if (correlation?.run_id !== runID) return;
|
||||
|
||||
// Track live ops from WS without full reload
|
||||
const eventType = getEnvelopeType(msg.data);
|
||||
const attrs = getEnvelopeAttributes(msg.data);
|
||||
const payload = getEnvelopePayload(msg.data);
|
||||
const spanID = correlation.span_id;
|
||||
|
||||
if (eventType === 'span.start' && spanID) {
|
||||
runLiveOps[spanID] = {
|
||||
name: attrs.name || attrs.span_kind || 'span',
|
||||
kind: attrs.span_kind || '',
|
||||
subType: attrs.type || '',
|
||||
startedAt: Date.now(),
|
||||
promptPreview: payload.prompt_preview || '',
|
||||
inputPreview: payload.input ? (typeof payload.input === 'string' ? payload.input.slice(0, 100) : '') : '',
|
||||
};
|
||||
renderRunLiveOps();
|
||||
}
|
||||
if (eventType === 'span.end' && spanID) {
|
||||
delete runLiveOps[spanID];
|
||||
renderRunLiveOps();
|
||||
}
|
||||
if (eventType === 'run.start') {
|
||||
runLiveOps['__run__'] = {
|
||||
name: 'Thinking…',
|
||||
kind: 'run',
|
||||
startedAt: Date.now(),
|
||||
promptPreview: payload.prompt_preview || payload.message_preview || payload.message || '',
|
||||
inputPreview: '',
|
||||
};
|
||||
renderRunLiveOps();
|
||||
}
|
||||
if (eventType === 'run.end') {
|
||||
delete runLiveOps['__run__'];
|
||||
runLiveOps = {};
|
||||
renderRunLiveOps();
|
||||
}
|
||||
|
||||
clearTimeout(_runReloadTimer);
|
||||
_runReloadTimer = setTimeout(() => loadRunDetailData(runID), 500);
|
||||
}
|
||||
|
||||
async function loadRunDetailData(runID) {
|
||||
if (!isCurrentPath('/runs/' + runID)) return;
|
||||
try {
|
||||
const data = await api('/v1/runs/' + runID);
|
||||
const spans = data.spans || [];
|
||||
const r = data.run;
|
||||
const openIndices = captureOpenSpanIndices();
|
||||
|
||||
renderSpansView(spans, r, openIndices);
|
||||
bindSpanViewToggles(spans, r);
|
||||
|
||||
const countEl = document.getElementById('run-detail-span-count');
|
||||
if (countEl) countEl.textContent = spans.length;
|
||||
|
||||
if (r.ended_at) {
|
||||
const durEl = document.getElementById('run-detail-duration');
|
||||
if (durEl) durEl.textContent = formatDuration(new Date(r.ended_at) - new Date(r.started_at));
|
||||
if (runDetailUnsubscribe) { runDetailUnsubscribe(); runDetailUnsubscribe = null; }
|
||||
const liveSpan = document.querySelector('.section-title .live-indicator');
|
||||
if (liveSpan) liveSpan.remove();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to reload run detail:', e);
|
||||
}
|
||||
}
|
||||
|
||||
export async function renderRun(runID, routeToken) {
|
||||
app.innerHTML = '<div style="padding:2rem"><div class="skeleton-line" style="width:40%;height:1.5rem;margin-bottom:1rem"></div><div class="skeleton-line" style="width:60%;margin-bottom:2rem"></div>' + '<div class="table-container"><table><thead><tr><th>Name</th><th>Kind</th><th>Status</th><th>Duration</th></tr></thead><tbody>' + skeletonRows(5, 4) + '</tbody></table></div></div>';
|
||||
runLiveOps = {};
|
||||
runSpansViewMode = 'table';
|
||||
let data;
|
||||
try {
|
||||
data = await api('/v1/runs/' + runID);
|
||||
} catch (e) {
|
||||
if (routeToken && !isRouteCurrent(routeToken)) return;
|
||||
app.innerHTML = `<p class="empty-state">Error loading run: ${escapeHTML(e.message)}</p>`;
|
||||
return;
|
||||
}
|
||||
if (routeToken && !isRouteCurrent(routeToken)) return;
|
||||
|
||||
const r = data.run;
|
||||
const spans = data.spans || [];
|
||||
const duration = r.ended_at
|
||||
? formatDuration(new Date(r.ended_at) - new Date(r.started_at))
|
||||
: 'ongoing';
|
||||
const runUsage = extractRunUsage(spans);
|
||||
|
||||
app.innerHTML = `
|
||||
<a href="/sessions/${escapeHTML(r.session_id)}" class="back-link">← Back to Session</a>
|
||||
<div class="page-header">
|
||||
<h2>Run <span style="font-family:var(--font-mono);font-size:1.1rem;color:var(--accent)" title="${escapeHTML(runID)}">${escapeHTML(runID.substring(0, 16))}…</span>${renderCopyButton(runID)} ${statusIcon(r.status)}</h2>
|
||||
<div class="meta-tiles">
|
||||
<div class="meta-tile">
|
||||
<div class="meta-tile-label">Started</div>
|
||||
<div class="meta-tile-value">${escapeHTML(new Date(r.started_at).toLocaleString())}</div>
|
||||
</div>
|
||||
<div class="meta-tile">
|
||||
<div class="meta-tile-label">Duration</div>
|
||||
<div class="meta-tile-value" id="run-detail-duration">${escapeHTML(duration)}</div>
|
||||
</div>
|
||||
${r.model ? `<div class="meta-tile"><div class="meta-tile-label">Model</div><div class="meta-tile-value" style="font-size:0.78rem">${escapeHTML(r.model.replace(/^claude-/, ''))}</div></div>` : ''}
|
||||
${r.tool_count ? `<div class="meta-tile"><div class="meta-tile-label">Tool Calls</div><div class="meta-tile-value">${r.tool_count}</div></div>` : ''}
|
||||
${runUsage ? `<div class="meta-tile"><div class="meta-tile-label">Tokens</div><div class="meta-tile-value">${escapeHTML(formatTokenCount(runUsage.totalTokens))}</div>${(runUsage.inputTokens || runUsage.outputTokens) ? `<div class="meta-tile-sub">${escapeHTML(formatTokenCount(runUsage.inputTokens))} in · ${escapeHTML(formatTokenCount(runUsage.outputTokens))} out</div>` : ''}</div>` : ''}
|
||||
${runUsage ? `<div class="meta-tile"><div class="meta-tile-label">Cost</div><div class="meta-tile-value">${escapeHTML(formatCost(runUsage.totalCost))}</div></div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
${!r.ended_at ? '<div class="run-live-ops" id="run-live-ops"></div>' : ''}
|
||||
<div class="section-title">
|
||||
Spans <span class="count" id="run-detail-span-count">${spans.length}</span>
|
||||
${!r.ended_at ? '<span class="live-indicator" style="margin-left:0.5rem"><span class="live-dot"></span>Live</span>' : ''}
|
||||
<div class="view-toggle" style="margin-left:auto">
|
||||
<button class="view-toggle-btn active" id="spans-view-table" type="button">Table</button>
|
||||
<button class="view-toggle-btn" id="spans-view-waterfall" type="button">Waterfall</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spans-container">
|
||||
${renderRunSpansTable(spans)}
|
||||
</div>
|
||||
`;
|
||||
|
||||
bindRunSpanRows();
|
||||
bindSpanViewToggles(spans, r);
|
||||
|
||||
document.querySelector('.back-link').addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
navigate('/sessions/' + r.session_id);
|
||||
});
|
||||
|
||||
if (!r.ended_at) {
|
||||
runDetailUnsubscribe = subscribeWS((msg) => handleRunWS(runID, msg));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
import { app, navigate, isRouteCurrent } from '../router.js';
|
||||
import { api } from '../api.js';
|
||||
import {
|
||||
escapeHTML, formatDuration, formatTokenCount, formatCost,
|
||||
getEnvelopeCorrelation, getEnvelopeType,
|
||||
isCurrentPath, renderCopyButton, statusIcon, extractRunUsage,
|
||||
} from '../utils.js';
|
||||
import { subscribeWS } from '../ws.js';
|
||||
|
||||
let sessionDetailUnsubscribe = null;
|
||||
let _sessionReloadTimer = null;
|
||||
|
||||
export function cleanup() {
|
||||
if (sessionDetailUnsubscribe) { sessionDetailUnsubscribe(); sessionDetailUnsubscribe = null; }
|
||||
clearTimeout(_sessionReloadTimer);
|
||||
_sessionReloadTimer = null;
|
||||
}
|
||||
|
||||
function renderSessionRunsRows(runs) {
|
||||
if (!runs || runs.length === 0) {
|
||||
return '<tr><td colspan="7" class="empty-state">No runs</td></tr>';
|
||||
}
|
||||
|
||||
return runs.map((r, i) => {
|
||||
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-/, '')) : '-';
|
||||
const spans = r.spans || [];
|
||||
const spansHTML = spans.length > 0 ? `
|
||||
<div class="session-run-spans">
|
||||
${spans.map(sp => {
|
||||
const body = getSessionSpanSummary(sp);
|
||||
return `
|
||||
<div class="session-span-pill ${escapeHTML(sp.kind || 'unknown')}">
|
||||
<span class="session-span-name">${escapeHTML(sp.name || sp.kind || 'span')}</span>
|
||||
<span class="session-span-meta">${escapeHTML(body)}</span>
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
` : '<div class="empty-state" style="padding:0.5rem 0">No spans yet</div>';
|
||||
|
||||
return `
|
||||
<tr class="clickable expandable-run ${r.status === 'error' ? 'tr-error' : ''}" data-run="${escapeHTML(r.run_id)}" data-index="${i}">
|
||||
<td class="id-cell" title="${escapeHTML(r.run_id)}"><span class="expand-icon"></span>${escapeHTML(r.run_id.substring(0, 12))}...${renderCopyButton(r.run_id)}</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>
|
||||
<tr class="span-detail-row" data-index="${i}" style="display:none">
|
||||
<td colspan="7">
|
||||
<div class="session-run-detail">
|
||||
<div class="section-title" style="margin-bottom:0.5rem">Spans <span class="count">${spans.length}</span></div>
|
||||
${spansHTML}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function getSessionSpanSummary(sp) {
|
||||
const payload = sp.payload || {};
|
||||
const innerPayload = payload.payload || {};
|
||||
if (sp.kind === 'tool') {
|
||||
const result = innerPayload.result_preview || '';
|
||||
const duration = sp.duration_ms !== undefined && sp.duration_ms !== null ? formatDuration(sp.duration_ms) : '-';
|
||||
return result ? `${duration} · ${String(result).slice(0, 80)}` : duration;
|
||||
}
|
||||
if (sp.kind === 'agent') {
|
||||
const usage = innerPayload.usage || {};
|
||||
const totalTokens = usage.total_tokens !== undefined ? `${usage.total_tokens} tok` : '';
|
||||
const duration = sp.duration_ms !== undefined && sp.duration_ms !== null ? formatDuration(sp.duration_ms) : '-';
|
||||
return totalTokens ? `${duration} · ${totalTokens}` : duration;
|
||||
}
|
||||
return sp.duration_ms !== undefined && sp.duration_ms !== null ? formatDuration(sp.duration_ms) : '-';
|
||||
}
|
||||
|
||||
function bindSessionRunRows() {
|
||||
document.querySelectorAll('tr.expandable-run').forEach(row => {
|
||||
row.addEventListener('click', event => {
|
||||
if (event.metaKey || event.ctrlKey) {
|
||||
navigate('/runs/' + row.dataset.run);
|
||||
return;
|
||||
}
|
||||
|
||||
const idx = row.dataset.index;
|
||||
const detailRow = document.querySelector(`tr.span-detail-row[data-index="${idx}"]`);
|
||||
const icon = row.querySelector('.expand-icon');
|
||||
if (!detailRow) return;
|
||||
|
||||
if (detailRow.style.display === 'none') {
|
||||
detailRow.style.display = 'table-row';
|
||||
if (icon) icon.style.transform = 'rotate(45deg)';
|
||||
} else {
|
||||
detailRow.style.display = 'none';
|
||||
if (icon) icon.style.transform = '';
|
||||
}
|
||||
});
|
||||
|
||||
row.addEventListener('dblclick', () => navigate('/runs/' + row.dataset.run));
|
||||
row.setAttribute('tabindex', '0');
|
||||
row.setAttribute('role', 'button');
|
||||
row.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
row.click();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleSessionWS(sessionID, msg) {
|
||||
if (msg.type !== 'message') return;
|
||||
const correlation = getEnvelopeCorrelation(msg.data);
|
||||
if (correlation?.session_id !== sessionID) return;
|
||||
const eventType = getEnvelopeType(msg.data);
|
||||
if (!['run.start', 'run.end', 'span.start', 'span.end', 'session.end', 'error'].includes(eventType)) return;
|
||||
clearTimeout(_sessionReloadTimer);
|
||||
_sessionReloadTimer = setTimeout(() => loadSessionData(sessionID), 300);
|
||||
}
|
||||
|
||||
async function loadSessionData(sessionID) {
|
||||
if (!isCurrentPath('/sessions/' + sessionID)) return;
|
||||
const data = await api('/v1/sessions/' + sessionID);
|
||||
const runs = data.runs || [];
|
||||
|
||||
const tbody = document.getElementById('session-runs-body');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = renderSessionRunsRows(runs);
|
||||
bindSessionRunRows();
|
||||
|
||||
const countSpan = document.querySelector('.section-title .count');
|
||||
if (countSpan) countSpan.textContent = runs.length;
|
||||
}
|
||||
|
||||
export async function renderSession(sessionID, routeToken) {
|
||||
const data = await api('/v1/sessions/' + sessionID);
|
||||
if (routeToken && !isRouteCurrent(routeToken)) return;
|
||||
const s = data.session;
|
||||
const runs = data.runs || [];
|
||||
const active = !s.ended_at;
|
||||
const duration = s.ended_at
|
||||
? formatDuration(new Date(s.ended_at) - new Date(s.started_at))
|
||||
: 'ongoing';
|
||||
|
||||
// Aggregate token/cost/tool data from runs' spans
|
||||
let sessionTotalTokens = 0, sessionTotalCost = 0, sessionTotalTools = 0;
|
||||
runs.forEach(r => {
|
||||
const usage = extractRunUsage(r.spans || []);
|
||||
if (usage) { sessionTotalTokens += usage.totalTokens; sessionTotalCost += usage.totalCost; }
|
||||
sessionTotalTools += (r.tool_count || 0);
|
||||
});
|
||||
|
||||
app.innerHTML = `
|
||||
<a href="/sessions" class="back-link">← Back to Sessions</a>
|
||||
<div class="page-header">
|
||||
<h2>Session <span style="font-family:var(--font-mono);font-size:1.1rem;color:var(--accent)" title="${escapeHTML(sessionID)}">${escapeHTML(sessionID.substring(0, 16))}...</span>${renderCopyButton(sessionID)}</h2>
|
||||
<div class="session-status-line">
|
||||
<span class="fw-dot ${escapeHTML((s.framework || 'unknown').replace(/[^a-z0-9-]/g, '-'))} ${active ? 'active' : 'ended'}"></span>
|
||||
<span class="session-status-text">${active ? 'Active' : 'Ended'}</span>
|
||||
</div>
|
||||
<div class="meta-tiles">
|
||||
<div class="meta-tile">
|
||||
<div class="meta-tile-label">Started</div>
|
||||
<div class="meta-tile-value">${escapeHTML(new Date(s.started_at).toLocaleString())}</div>
|
||||
</div>
|
||||
<div class="meta-tile">
|
||||
<div class="meta-tile-label">Framework</div>
|
||||
<div class="meta-tile-value">${escapeHTML(s.framework || '-')}</div>
|
||||
</div>
|
||||
<div class="meta-tile">
|
||||
<div class="meta-tile-label">Host</div>
|
||||
<div class="meta-tile-value">${escapeHTML(s.host || '-')}</div>
|
||||
</div>
|
||||
<div class="meta-tile">
|
||||
<div class="meta-tile-label">Duration</div>
|
||||
<div class="meta-tile-value">${escapeHTML(duration)}</div>
|
||||
</div>
|
||||
${sessionTotalTokens > 0 ? `<div class="meta-tile"><div class="meta-tile-label">Total Tokens</div><div class="meta-tile-value">${escapeHTML(formatTokenCount(sessionTotalTokens))}</div></div>` : ''}
|
||||
${sessionTotalCost > 0 ? `<div class="meta-tile"><div class="meta-tile-label">Total Cost</div><div class="meta-tile-value">${escapeHTML(formatCost(sessionTotalCost))}</div></div>` : ''}
|
||||
${sessionTotalTools > 0 ? `<div class="meta-tile"><div class="meta-tile-label">Total Tools</div><div class="meta-tile-value">${sessionTotalTools}</div></div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title">Runs <span class="count">${runs.length}</span></div>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Run ID</th>
|
||||
<th>Status</th>
|
||||
<th>Model</th>
|
||||
<th>Tools</th>
|
||||
<th>Spans</th>
|
||||
<th>Duration</th>
|
||||
<th>Started</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="session-runs-body">
|
||||
${renderSessionRunsRows(runs)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
|
||||
bindSessionRunRows();
|
||||
|
||||
document.querySelector('.back-link').addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
navigate('/sessions');
|
||||
});
|
||||
|
||||
sessionDetailUnsubscribe = subscribeWS((msg) => handleSessionWS(sessionID, msg));
|
||||
}
|
||||
@@ -0,0 +1,480 @@
|
||||
import { app, navigate, isRouteCurrent } from '../router.js';
|
||||
import { api } from '../api.js';
|
||||
import {
|
||||
escapeHTML, relativeTime,
|
||||
getEnvelopeType, getEnvelopeCorrelation, getEnvelopeSource, getEnvelopeTS,
|
||||
isCurrentPath, renderCopyButton, sessionsSkeleton,
|
||||
} from '../utils.js';
|
||||
import { subscribeWS } from '../ws.js';
|
||||
|
||||
let sessionsState = { sessions: [], cursor: null, total: 0, activeSessionByBackend: {} };
|
||||
let sessionsPageUnsubscribe = null;
|
||||
|
||||
let sessionFilterMode = 'all';
|
||||
let sessionSortKey = 'started_at';
|
||||
let sessionSortDir = 'desc';
|
||||
|
||||
export function cleanup() {
|
||||
if (sessionsPageUnsubscribe) { sessionsPageUnsubscribe(); sessionsPageUnsubscribe = null; }
|
||||
if (sessionsState.timerInterval) { clearInterval(sessionsState.timerInterval); }
|
||||
sessionsState = { sessions: [], cursor: null, total: 0, activeSessionByBackend: {} };
|
||||
}
|
||||
|
||||
function isSessionActive(s) { return !s.ended_at; }
|
||||
|
||||
function sortSessions(sessions) {
|
||||
return [...sessions].sort((a, b) => {
|
||||
let av = a[sessionSortKey], bv = b[sessionSortKey];
|
||||
if (sessionSortKey === 'started_at') {
|
||||
av = new Date(av).getTime();
|
||||
bv = new Date(bv).getTime();
|
||||
} else if (typeof av === 'string') {
|
||||
av = av.toLowerCase();
|
||||
bv = (bv || '').toLowerCase();
|
||||
}
|
||||
if (av == null) av = 0;
|
||||
if (bv == null) bv = 0;
|
||||
if (av < bv) return sessionSortDir === 'asc' ? -1 : 1;
|
||||
if (av > bv) return sessionSortDir === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
function groupSessionsByDate(sessions) {
|
||||
const now = new Date();
|
||||
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
const yesterdayStart = new Date(todayStart);
|
||||
yesterdayStart.setDate(yesterdayStart.getDate() - 1);
|
||||
const weekStart = new Date(todayStart);
|
||||
weekStart.setDate(weekStart.getDate() - 6);
|
||||
const groups = [
|
||||
{ label: 'Today', items: [] },
|
||||
{ label: 'Yesterday', items: [] },
|
||||
{ label: 'This Week', items: [] },
|
||||
{ label: 'Older', items: [] },
|
||||
];
|
||||
for (const s of sessions) {
|
||||
const d = new Date(s.started_at);
|
||||
if (d >= todayStart) groups[0].items.push(s);
|
||||
else if (d >= yesterdayStart) groups[1].items.push(s);
|
||||
else if (d >= weekStart) groups[2].items.push(s);
|
||||
else groups[3].items.push(s);
|
||||
}
|
||||
return groups.filter(g => g.items.length > 0);
|
||||
}
|
||||
|
||||
function getSessionBackendKey(s) {
|
||||
const framework = s.framework || 'unknown';
|
||||
const backendID = s.client_id || s.host || 'unknown';
|
||||
return `${framework}|${backendID}`;
|
||||
}
|
||||
|
||||
function sessionActivityTS(s) {
|
||||
const raw = s._lastActivityTS || Date.parse(s.started_at);
|
||||
return Number.isFinite(raw) ? raw : 0;
|
||||
}
|
||||
|
||||
function recomputeActiveSessionByBackend() {
|
||||
const next = {};
|
||||
const bestTS = {};
|
||||
sessionsState.sessions.forEach(s => {
|
||||
if (!isSessionActive(s)) return;
|
||||
const key = getSessionBackendKey(s);
|
||||
const ts = sessionActivityTS(s);
|
||||
if (!next[key] || ts > bestTS[key]) {
|
||||
next[key] = s.session_id;
|
||||
bestTS[key] = ts;
|
||||
}
|
||||
});
|
||||
sessionsState.activeSessionByBackend = next;
|
||||
}
|
||||
|
||||
function sessionDotState(s) {
|
||||
if (!isSessionActive(s)) return 'ended';
|
||||
const key = getSessionBackendKey(s);
|
||||
const activeSessionID = sessionsState.activeSessionByBackend[key];
|
||||
return activeSessionID === s.session_id ? 'active' : 'idle';
|
||||
}
|
||||
|
||||
function touchSessionActivity(sessionID, ts, source) {
|
||||
const session = sessionsState.sessions.find(s => s.session_id === sessionID);
|
||||
if (!session) return null;
|
||||
|
||||
const parsedTS = Date.parse(ts || '');
|
||||
const activityTS = Number.isFinite(parsedTS) ? parsedTS : Date.now();
|
||||
session._lastActivityTS = Math.max(session._lastActivityTS || 0, activityTS);
|
||||
|
||||
if (source && typeof source === 'object') {
|
||||
if (source.framework) session.framework = source.framework;
|
||||
if (source.host) session.host = source.host;
|
||||
if (source.client_id) session.client_id = source.client_id;
|
||||
}
|
||||
|
||||
const key = getSessionBackendKey(session);
|
||||
sessionsState.activeSessionByBackend[key] = session.session_id;
|
||||
return session;
|
||||
}
|
||||
|
||||
function updatePaginationInfo() {
|
||||
const el = document.getElementById('pagination-info');
|
||||
if (!el) return;
|
||||
const loaded = sessionsState.sessions.length;
|
||||
const total = sessionsState.total || loaded;
|
||||
let filtered = loaded;
|
||||
if (sessionFilterMode === 'active') {
|
||||
filtered = sessionsState.sessions.filter(s => isSessionActive(s)).length;
|
||||
} else if (sessionFilterMode === 'ended') {
|
||||
filtered = sessionsState.sessions.filter(s => !isSessionActive(s)).length;
|
||||
} else if (sessionFilterMode === 'errored') {
|
||||
filtered = sessionsState.sessions.filter(s => (s._errorCount || 0) > 0).length;
|
||||
}
|
||||
if (filtered < loaded) {
|
||||
el.textContent = `Showing ${filtered} of ${loaded} loaded (${total} total)`;
|
||||
} else {
|
||||
el.textContent = `Showing ${loaded} of ${total}`;
|
||||
}
|
||||
}
|
||||
|
||||
function refreshSessionsTable() {
|
||||
const tbody = document.getElementById('sessions-body');
|
||||
if (!tbody) return;
|
||||
|
||||
// Update pill counts based on full unfiltered sessions list
|
||||
const all = sessionsState.sessions;
|
||||
const activeCount = all.filter(s => isSessionActive(s)).length;
|
||||
const endedCount = all.filter(s => !isSessionActive(s)).length;
|
||||
const erroredCount = all.filter(s => (s._errorCount || 0) > 0).length;
|
||||
const pillDefs = [
|
||||
{ filter: 'all', count: all.length },
|
||||
{ filter: 'active', count: activeCount },
|
||||
{ filter: 'ended', count: endedCount },
|
||||
{ filter: 'errored', count: erroredCount },
|
||||
];
|
||||
pillDefs.forEach(({ filter, count }) => {
|
||||
const btn = document.querySelector(`#session-pills [data-filter="${filter}"]`);
|
||||
if (!btn) return;
|
||||
let countEl = btn.querySelector('.pill-count');
|
||||
if (!countEl) {
|
||||
countEl = document.createElement('span');
|
||||
countEl.className = 'pill-count';
|
||||
btn.appendChild(countEl);
|
||||
}
|
||||
countEl.textContent = count;
|
||||
});
|
||||
|
||||
// Apply filter
|
||||
let filtered = sessionsState.sessions;
|
||||
if (sessionFilterMode === 'active') {
|
||||
filtered = filtered.filter(s => isSessionActive(s));
|
||||
} else if (sessionFilterMode === 'ended') {
|
||||
filtered = filtered.filter(s => !isSessionActive(s));
|
||||
} else if (sessionFilterMode === 'errored') {
|
||||
filtered = filtered.filter(s => (s._errorCount || 0) > 0);
|
||||
}
|
||||
|
||||
const groups = groupSessionsByDate(sortSessions(filtered));
|
||||
if (groups.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="empty-state">No sessions found</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Update sort indicator classes on headers
|
||||
document.querySelectorAll('th.sortable').forEach(th => {
|
||||
th.classList.remove('sort-asc', 'sort-desc');
|
||||
if (th.dataset.sort === sessionSortKey) {
|
||||
th.classList.add(sessionSortDir === 'asc' ? 'sort-asc' : 'sort-desc');
|
||||
}
|
||||
});
|
||||
const allFiltered = groups.flatMap(g => g.items);
|
||||
const maxDuration = Math.max(...allFiltered.map(s => {
|
||||
const start = new Date(s.started_at).getTime();
|
||||
const end = s.ended_at ? new Date(s.ended_at).getTime() : Date.now();
|
||||
return end - start;
|
||||
}), 1);
|
||||
tbody.innerHTML = groups.map(group => {
|
||||
const rows = group.items.map(s => {
|
||||
const fw = s.framework || 'unknown';
|
||||
const fwClass = fw.replace(/[^a-z0-9-]/g, '-');
|
||||
const active = isSessionActive(s);
|
||||
const dotState = sessionDotState(s);
|
||||
const dotTitle = dotState === 'active'
|
||||
? 'Currently active session'
|
||||
: (active ? 'Open session' : 'Session ended');
|
||||
const rowClass = active ? 'clickable active-session' : 'clickable';
|
||||
const start = new Date(s.started_at).getTime();
|
||||
const end = s.ended_at ? new Date(s.ended_at).getTime() : Date.now();
|
||||
const duration = end - start;
|
||||
const barWidth = Math.max(4, (duration / maxDuration) * 80);
|
||||
const durationBar = `<span class="session-duration-bar" style="width:${barWidth.toFixed(0)}px"></span>`;
|
||||
const errorCell = (s._errorCount || 0) > 0
|
||||
? `<span class="error-count-badge">${s._errorCount}</span>`
|
||||
: '<span style="color:var(--text-dim)">—</span>';
|
||||
return `
|
||||
<tr class="${rowClass}" data-session="${escapeHTML(s.session_id)}">
|
||||
<td class="id-cell" title="${escapeHTML(s.session_id)}">${escapeHTML(s.session_id.substring(0, 12))}…${renderCopyButton(s.session_id)}</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))}${durationBar}</td>
|
||||
<td>${errorCell}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
return `<tr class="session-date-group"><td colspan="6">${escapeHTML(group.label)}</td></tr>${rows}`;
|
||||
}).join('');
|
||||
tbody.querySelectorAll('tr.clickable').forEach(row => {
|
||||
row.addEventListener('click', () => navigate('/sessions/' + row.dataset.session));
|
||||
});
|
||||
updatePaginationInfo();
|
||||
}
|
||||
|
||||
// Dead code: renderSessionRow is never called but preserved for fidelity
|
||||
function renderSessionRow(s) { // eslint-disable-line no-unused-vars
|
||||
const fw = s.framework || 'unknown';
|
||||
const fwClass = fw.replace(/[^a-z0-9-]/g, '-');
|
||||
const active = isSessionActive(s);
|
||||
const dotState = sessionDotState(s);
|
||||
const dotTitle = dotState === 'active'
|
||||
? 'Currently active session'
|
||||
: (active ? 'Open session' : 'Session ended');
|
||||
const errorCell = (s._errorCount || 0) > 0
|
||||
? `<span class="error-count-badge">${s._errorCount}</span>`
|
||||
: '<span style="color:var(--text-dim)">—</span>';
|
||||
return `
|
||||
<td class="id-cell" title="${escapeHTML(s.session_id)}">${escapeHTML(s.session_id.substring(0, 12))}…${renderCopyButton(s.session_id)}</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>
|
||||
<td>${errorCell}</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) {
|
||||
// Update only the text node, preserving the duration bar span
|
||||
const bar = td.querySelector('.session-duration-bar');
|
||||
td.textContent = relativeTime(s.started_at);
|
||||
if (bar) td.appendChild(bar);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleSessionsWS(msg) {
|
||||
if (msg.type !== 'message') return;
|
||||
const eventType = getEnvelopeType(msg.data);
|
||||
const correlation = getEnvelopeCorrelation(msg.data);
|
||||
const source = getEnvelopeSource(msg.data);
|
||||
const ts = getEnvelopeTS(msg.data);
|
||||
const sessionId = correlation?.session_id || msg.data.event?.id;
|
||||
|
||||
if (eventType === 'session.start') {
|
||||
const newSession = {
|
||||
session_id: sessionId,
|
||||
started_at: ts || new Date().toISOString(),
|
||||
framework: source.framework || 'unknown',
|
||||
client_id: source.client_id || '',
|
||||
host: source.host || '-',
|
||||
run_count: 1,
|
||||
_lastActivityTS: Date.parse(ts || '') || Date.now(),
|
||||
};
|
||||
sessionsState.sessions.unshift(newSession);
|
||||
const backendKey = getSessionBackendKey(newSession);
|
||||
sessionsState.activeSessionByBackend[backendKey] = newSession.session_id;
|
||||
refreshSessionsTable();
|
||||
return;
|
||||
}
|
||||
|
||||
const tbody = document.getElementById('sessions-body');
|
||||
if (!tbody) return;
|
||||
|
||||
if (sessionId) {
|
||||
touchSessionActivity(sessionId, ts, source);
|
||||
}
|
||||
|
||||
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 row = tbody.querySelector(`[data-session="${sessionId}"]`);
|
||||
if (row && row.cells[3]) 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();
|
||||
recomputeActiveSessionByBackend();
|
||||
}
|
||||
}
|
||||
|
||||
if (eventType === 'error' && sessionId) {
|
||||
const session = sessionsState.sessions.find(s => s.session_id === sessionId);
|
||||
if (session) {
|
||||
session._errorCount = (session._errorCount || 0) + 1;
|
||||
}
|
||||
}
|
||||
|
||||
refreshSessionsTable();
|
||||
}
|
||||
|
||||
async function loadSessions(routeToken) {
|
||||
const params = new URLSearchParams();
|
||||
const from = document.getElementById('filter-from').value;
|
||||
const to = document.getElementById('filter-to').value;
|
||||
const framework = document.getElementById('filter-framework').value;
|
||||
const host = document.getElementById('filter-host').value;
|
||||
|
||||
// Sync filters to URL
|
||||
const filterParams = new URLSearchParams();
|
||||
if (from) filterParams.set('from', from);
|
||||
if (to) filterParams.set('to', to);
|
||||
if (framework) filterParams.set('framework', framework);
|
||||
if (host) filterParams.set('host', host);
|
||||
const filterQS = filterParams.toString();
|
||||
const newURL = '/sessions' + (filterQS ? '?' + filterQS : '');
|
||||
if (window.location.pathname + window.location.search !== newURL) {
|
||||
history.replaceState(null, '', newURL);
|
||||
}
|
||||
|
||||
if (from) params.set('from', from);
|
||||
if (to) params.set('to', to);
|
||||
if (framework) params.set('framework', framework);
|
||||
if (host) params.set('host', host);
|
||||
if (sessionsState.cursor) params.set('cursor', sessionsState.cursor);
|
||||
|
||||
const data = await api('/v1/sessions?' + params.toString());
|
||||
if (routeToken && !isRouteCurrent(routeToken)) return;
|
||||
const incoming = (data.sessions || []).map(s => ({
|
||||
...s,
|
||||
_lastActivityTS: Date.parse(s.started_at || '') || Date.now(),
|
||||
}));
|
||||
sessionsState.sessions = sessionsState.sessions.concat(incoming);
|
||||
sessionsState.cursor = data.next_cursor;
|
||||
// total is only returned on the first page (no cursor)
|
||||
if (data.total !== undefined) sessionsState.total = data.total;
|
||||
recomputeActiveSessionByBackend();
|
||||
|
||||
refreshSessionsTable();
|
||||
document.getElementById('load-more').style.display = sessionsState.cursor ? 'block' : 'none';
|
||||
}
|
||||
|
||||
export async function renderSessions(routeToken) {
|
||||
// Reset filter mode on each page visit
|
||||
sessionFilterMode = 'all';
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="page-header">
|
||||
<h2>Sessions</h2>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<label>From <input type="date" id="filter-from"></label>
|
||||
<label>To <input type="date" id="filter-to"></label>
|
||||
<label>Framework
|
||||
<select id="filter-framework">
|
||||
<option value="">All</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Host <input type="text" id="filter-host" placeholder="hostname"></label>
|
||||
</div>
|
||||
<div class="filter-pills" id="session-pills">
|
||||
<button class="filter-pill active" data-filter="all">All</button>
|
||||
<button class="filter-pill" data-filter="active">Active</button>
|
||||
<button class="filter-pill" data-filter="ended">Ended</button>
|
||||
<button class="filter-pill" data-filter="errored">With Errors</button>
|
||||
</div>
|
||||
<div class="pagination-info" id="pagination-info"></div>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sortable" data-sort="session_id">Session <span class="sort-icon"></span></th>
|
||||
<th class="sortable" data-sort="framework">Framework <span class="sort-icon"></span></th>
|
||||
<th class="sortable" data-sort="host">Host <span class="sort-icon"></span></th>
|
||||
<th class="sortable" data-sort="run_count">Runs <span class="sort-icon"></span></th>
|
||||
<th class="sortable" data-sort="started_at">Time <span class="sort-icon"></span></th>
|
||||
<th>Errors</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="sessions-body">${sessionsSkeleton()}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button id="load-more" class="load-more" style="display:none">Load more</button>
|
||||
`;
|
||||
|
||||
// Wire up filter pill click handlers
|
||||
document.querySelectorAll('#session-pills .filter-pill').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('#session-pills .filter-pill').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
sessionFilterMode = btn.dataset.filter;
|
||||
refreshSessionsTable();
|
||||
});
|
||||
});
|
||||
|
||||
// Wire up sortable column headers
|
||||
document.querySelectorAll('th.sortable').forEach(th => {
|
||||
th.addEventListener('click', () => {
|
||||
const key = th.dataset.sort;
|
||||
if (sessionSortKey === key) {
|
||||
sessionSortDir = sessionSortDir === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
sessionSortKey = key;
|
||||
sessionSortDir = 'desc';
|
||||
}
|
||||
refreshSessionsTable();
|
||||
});
|
||||
});
|
||||
|
||||
api('/v1/stats/summary').then(data => {
|
||||
if (routeToken && !isRouteCurrent(routeToken)) return;
|
||||
const sel = document.getElementById('filter-framework');
|
||||
if (!sel || !data.by_framework) return;
|
||||
for (const fw of Object.keys(data.by_framework).sort()) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = fw;
|
||||
opt.textContent = fw;
|
||||
sel.appendChild(opt);
|
||||
}
|
||||
}).catch(() => {});
|
||||
|
||||
// Restore filters from URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('from')) document.getElementById('filter-from').value = urlParams.get('from');
|
||||
if (urlParams.get('to')) document.getElementById('filter-to').value = urlParams.get('to');
|
||||
if (urlParams.get('framework')) document.getElementById('filter-framework').value = urlParams.get('framework');
|
||||
if (urlParams.get('host')) document.getElementById('filter-host').value = urlParams.get('host');
|
||||
|
||||
['from', 'to', 'framework'].forEach(f => {
|
||||
document.getElementById('filter-' + f).addEventListener('change', () => {
|
||||
sessionsState.sessions = [];
|
||||
sessionsState.cursor = null;
|
||||
loadSessions(routeToken);
|
||||
});
|
||||
});
|
||||
let _hostDebounce = null;
|
||||
document.getElementById('filter-host').addEventListener('input', () => {
|
||||
clearTimeout(_hostDebounce);
|
||||
_hostDebounce = setTimeout(() => {
|
||||
sessionsState.sessions = [];
|
||||
sessionsState.cursor = null;
|
||||
loadSessions(routeToken);
|
||||
}, 400);
|
||||
});
|
||||
|
||||
document.getElementById('load-more').addEventListener('click', () => loadSessions(routeToken));
|
||||
|
||||
sessionsState = { sessions: [], cursor: null, total: 0, timerInterval: null, activeSessionByBackend: {} };
|
||||
await loadSessions(routeToken);
|
||||
if (routeToken && !isRouteCurrent(routeToken)) return;
|
||||
|
||||
sessionsState.timerInterval = setInterval(updateSessionTimers, 30000);
|
||||
sessionsPageUnsubscribe = subscribeWS(handleSessionsWS);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { app } from '../router.js';
|
||||
import { showToast } from '../api.js';
|
||||
|
||||
export async function renderSettings() {
|
||||
app.innerHTML = `
|
||||
<div class="page-header">
|
||||
<h2>Settings</h2>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3 class="settings-section-title">Data Retention</h3>
|
||||
<p class="settings-section-desc">Delete events older than the specified number of days. This runs automatically every 24 hours. Currently configured via <code>RETENTION_DAYS</code> environment variable (default: 30 days).</p>
|
||||
<div class="settings-row">
|
||||
<label class="settings-label" for="retention-days">Purge events older than</label>
|
||||
<div class="settings-input-group">
|
||||
<input type="number" id="retention-days" class="settings-input" min="1" max="365" value="30">
|
||||
<span class="settings-input-suffix">days</span>
|
||||
<button class="settings-btn" id="run-retention-btn" type="button">Run Now</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="retention-result" class="settings-result"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('run-retention-btn')?.addEventListener('click', async () => {
|
||||
const days = parseInt(document.getElementById('retention-days').value, 10);
|
||||
if (!days || days < 1) { showToast('Enter a valid number of days', 'error'); return; }
|
||||
const btn = document.getElementById('run-retention-btn');
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Running…';
|
||||
try {
|
||||
const resp = await fetch('/api/v1/admin/retention', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ days }),
|
||||
});
|
||||
const data = await resp.json();
|
||||
if (!resp.ok) throw new Error(data.error || 'Request failed');
|
||||
const result = document.getElementById('retention-result');
|
||||
if (result) result.innerHTML = `<span class="settings-result-ok">Deleted ${data.deleted} events older than ${new Date(data.cutoff).toLocaleDateString()}.</span>`;
|
||||
showToast(`Deleted ${data.deleted} events`, 'success');
|
||||
} catch (e) {
|
||||
showToast('Retention failed: ' + e.message, 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Run Now';
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { app, isRouteCurrent } from '../router.js';
|
||||
import { api } from '../api.js';
|
||||
import { escapeHTML, formatTokenCount, formatCost } from '../utils.js';
|
||||
|
||||
export async function renderUsage(routeToken) {
|
||||
app.innerHTML = `
|
||||
<div class="page-header"><h2>Usage</h2></div>
|
||||
<div id="usage-content"><div class="usage-loading">Loading…</div></div>
|
||||
`;
|
||||
|
||||
const [summary, toolsData, modelsData, tsData] = await Promise.all([
|
||||
api('/v1/stats/summary').catch(() => null),
|
||||
api('/v1/stats/top-tools?limit=20').catch(() => ({ tools: [] })),
|
||||
api('/v1/stats/top-models?limit=10').catch(() => ({ models: [] })),
|
||||
api('/v1/stats/timeseries?window=7d').catch(() => ({ series: [] })),
|
||||
]);
|
||||
if (routeToken && !isRouteCurrent(routeToken)) return;
|
||||
|
||||
const tools = toolsData.tools || [];
|
||||
const models = modelsData.models || [];
|
||||
const series = tsData.series || [];
|
||||
|
||||
// Aggregate 7d totals from timeseries
|
||||
const totals7d = series.reduce((acc, b) => {
|
||||
acc.runs += b.runs || 0;
|
||||
acc.tools += b.tools || 0;
|
||||
acc.errors += b.errors || 0;
|
||||
acc.tokens += b.tokens || 0;
|
||||
acc.cost += b.cost || 0;
|
||||
return acc;
|
||||
}, { runs: 0, tools: 0, errors: 0, tokens: 0, cost: 0 });
|
||||
|
||||
const s = summary || {};
|
||||
|
||||
const content = document.getElementById('usage-content');
|
||||
if (!content) return;
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="usage-summary-tiles">
|
||||
<div class="meta-tile"><div class="meta-tile-label">Active Sessions</div><div class="meta-tile-value">${s.active_sessions || 0}</div></div>
|
||||
<div class="meta-tile"><div class="meta-tile-label">Runs Today</div><div class="meta-tile-value">${s.runs_today || 0}</div></div>
|
||||
<div class="meta-tile"><div class="meta-tile-label">Tool Calls Today</div><div class="meta-tile-value">${s.tool_calls_today || 0}</div></div>
|
||||
<div class="meta-tile"><div class="meta-tile-label">Errors Today</div><div class="meta-tile-value">${s.errors_today || 0}</div></div>
|
||||
<div class="meta-tile"><div class="meta-tile-label">Tokens Today</div><div class="meta-tile-value">${formatTokenCount(s.tokens_today || 0)}</div></div>
|
||||
<div class="meta-tile"><div class="meta-tile-label">Cost Today</div><div class="meta-tile-value">${formatCost(s.cost_today || 0)}</div></div>
|
||||
</div>
|
||||
|
||||
<div class="usage-section-row">
|
||||
<div class="usage-panel">
|
||||
<div class="section-title">7-Day Totals</div>
|
||||
<div class="usage-7d-tiles">
|
||||
<div class="usage-7d-tile"><span class="usage-7d-label">Runs</span><strong>${totals7d.runs}</strong></div>
|
||||
<div class="usage-7d-tile"><span class="usage-7d-label">Tool Calls</span><strong>${totals7d.tools}</strong></div>
|
||||
<div class="usage-7d-tile"><span class="usage-7d-label">Errors</span><strong>${totals7d.errors}</strong></div>
|
||||
<div class="usage-7d-tile"><span class="usage-7d-label">Tokens</span><strong>${formatTokenCount(totals7d.tokens)}</strong></div>
|
||||
<div class="usage-7d-tile"><span class="usage-7d-label">Est. Cost</span><strong>${formatCost(totals7d.cost)}</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="usage-section-row">
|
||||
<div class="usage-panel">
|
||||
<div class="section-title">Top Models <span class="count">${models.length}</span></div>
|
||||
${models.length === 0 ? '<p class="empty-state">No model data yet</p>' : `
|
||||
<ul class="stat-list" id="usage-models-list">
|
||||
${(() => {
|
||||
const max = models[0]?.count || 1;
|
||||
return models.map(m => {
|
||||
const pct = (m.count / max * 100).toFixed(1);
|
||||
return `<li>
|
||||
<div class="stat-list-header">
|
||||
<span class="stat-list-name">${escapeHTML(m.name)}</span>
|
||||
<span class="stat-list-count">${m.count}</span>
|
||||
</div>
|
||||
<div class="stat-list-bar-track">
|
||||
<div class="stat-list-bar-fill model" style="width:${pct}%"></div>
|
||||
</div>
|
||||
</li>`;
|
||||
}).join('');
|
||||
})()}
|
||||
</ul>`}
|
||||
</div>
|
||||
|
||||
<div class="usage-panel">
|
||||
<div class="section-title">Top Tools <span class="count">${tools.length}</span></div>
|
||||
${tools.length === 0 ? '<p class="empty-state">No tool data yet</p>' : `
|
||||
<ul class="stat-list" id="usage-tools-list">
|
||||
${(() => {
|
||||
const max = tools[0]?.count || 1;
|
||||
return tools.map(t => {
|
||||
const pct = (t.count / max * 100).toFixed(1);
|
||||
return `<li>
|
||||
<div class="stat-list-header">
|
||||
<span class="stat-list-name">${escapeHTML(t.name)}</span>
|
||||
<span class="stat-list-count">${t.count}</span>
|
||||
</div>
|
||||
<div class="stat-list-bar-track">
|
||||
<div class="stat-list-bar-fill tool" style="width:${pct}%"></div>
|
||||
</div>
|
||||
</li>`;
|
||||
}).join('');
|
||||
})()}
|
||||
</ul>`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
Reference in New Issue
Block a user