Analytics Dashboard Page (pages/Analytics.tsx)

mperkins0155/Claude-Code-Agent-Monitor · ui, UI / Frontend, react, analytics, charts, realtime, websocket, monitoring

Displays real‑time analytics of sessions, token usage, and events using heatmaps, trend lines, and interactive charts refreshed via WebSocket.

// Source: https://github.com/mperkins0155/Claude-Code-Agent-Monitor | License: MIT | Copyright 2026 - Now, Son Nguyen
// Provided via justclaw.it.com; keep this notice with the code.
/**
 * @file Analytics.tsx
 * @description Provides a comprehensive analytics dashboard for monitoring Claude Code sessions, agents, token usage, and events in real-time. Features include an activity heatmap, token distribution charts, paginated chart legends, session outcome breakdowns, and more, all with interactive tooltips and live updates via WebSocket.
 * @author Son Nguyen <hoangson091104@gmail.com>
 */
/* =============================================================================
 * MODULE_GUIDE — extended in-file reference (comments only; safe to read, never executed)
 * ===========================

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search 40K more like it.

Get a free API key