gemini-cli-templates
Version:
Advanced analytics dashboard and monitoring tool for Gemini CLI with real-time metrics, token tracking, and telemetry visualization
278 lines (263 loc) • 10.6 kB
HTML
<html>
<head>
<title>Gemini CLI Analytics Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
<div class="header-left">
<div class="status-dot"></div>
<div>
<h1>Gemini CLI Analytics Dashboard</h1>
<div class="version">v1.0.0</div>
<div class="header-subtitle">Real-time monitoring and analytics for Gemini CLI sessions</div>
<div class="header-subtitle" id="last-update">last update: <span id="timestamp"></span></div>
</div>
</div>
<div class="header-right">
<div class="header-actions">
<button class="btn" id="theme-toggle">🌙 Dark</button>
<a class="btn" href="https://github.com/davila7/gemini-cli-templates" target="_blank">⭐ Star on GitHub</a>
</div>
</div>
</div>
<div class="container">
<!-- Controls Section -->
<div style="display: flex; justify-content: flex-end; margin-bottom: 24px; gap: 12px;">
<button class="btn" id="refresh-btn">Refresh</button>
<button class="btn" id="export-btn">Export</button>
</div>
<!-- Main Metrics Grid -->
<div class="metrics-grid" id="main-metrics">
<div class="metric-card">
<div class="metric-header">
<div class="metric-title">Total Sessions</div>
</div>
<div class="metric-value" id="total-sessions">0</div>
<div class="metric-details">
<div class="metric-detail-row">
<span class="metric-detail-label">This Week:</span>
<span class="metric-detail-value" id="sessions-week">0</span>
</div>
<div class="metric-detail-row">
<span class="metric-detail-label">Active:</span>
<span class="metric-detail-value" id="sessions-active">0</span>
</div>
</div>
</div>
<div class="metric-card">
<div class="metric-header">
<div class="metric-title">Total Tools</div>
</div>
<div class="metric-value" id="total-tools">0</div>
<div class="metric-details">
<div class="metric-detail-row">
<span class="metric-detail-label">This Week:</span>
<span class="metric-detail-value" id="tools-week">0</span>
</div>
<div class="metric-detail-row">
<span class="metric-detail-label">Success Rate:</span>
<span class="metric-detail-value" id="tools-success">0%</span>
</div>
</div>
</div>
<div class="metric-card">
<div class="metric-header">
<div class="metric-title">Total Tokens</div>
</div>
<div class="metric-value" id="total-tokens">0</div>
<div class="metric-details">
<div class="metric-detail-row">
<span class="metric-detail-label">Input:</span>
<span class="metric-detail-value" id="tokens-input">0</span>
</div>
<div class="metric-detail-row">
<span class="metric-detail-label">Output:</span>
<span class="metric-detail-value" id="tokens-output">0</span>
</div>
</div>
</div>
<div class="metric-card">
<div class="metric-header">
<div class="metric-title">Total API Calls</div>
</div>
<div class="metric-value" id="total-apis">0</div>
<div class="metric-details">
<div class="metric-detail-row">
<span class="metric-detail-label">Avg Duration:</span>
<span class="metric-detail-value" id="api-duration">0ms</span>
</div>
<div class="metric-detail-row">
<span class="metric-detail-label">Success Rate:</span>
<span class="metric-detail-value" id="api-success">0%</span>
</div>
</div>
</div>
</div>
<!-- Current Session -->
<div class="current-session" id="current-session" style="display: none;">
<div class="session-header">
<div class="session-title">Current Session</div>
<div class="session-status">
<div class="status-badge">
<span>●</span>
<span>Active</span>
</div>
</div>
</div>
<div class="session-detail" id="session-detail">Session ID: Loading...</div>
<div class="session-progress">
<div class="progress-bar">
<div class="progress-fill" id="session-progress" style="width: 0%"></div>
</div>
<div class="progress-text">
<span id="session-time">0h 0m remaining</span>
<span id="session-estimate">0/0 est.</span>
</div>
</div>
</div>
<!-- Tabs -->
<div class="tabs">
<button class="tab-button active" data-tab="analytics">Analytics</button>
<button class="tab-button" data-tab="metrics">Metrics Logs</button>
<button class="tab-button" data-tab="traces">Trace Logs</button>
</div>
<!-- Analytics Tab -->
<div id="analytics" class="tab-content active">
<!-- Date Filter -->
<div class="date-filter-section">
<div class="filter-header">
<h3>Time Range Filter</h3>
<div class="filter-presets">
<button class="filter-preset active" data-range="7">Last 7 days</button>
<button class="filter-preset" data-range="30">Last 30 days</button>
<button class="filter-preset" data-range="90">Last 90 days</button>
<button class="filter-preset" data-range="custom">Custom</button>
</div>
</div>
<div class="date-inputs" id="custom-date-inputs" style="display: none;">
<div class="date-input-group">
<label>Start Date:</label>
<input type="datetime-local" id="start-date" class="date-input">
</div>
<div class="date-input-group">
<label>End Date:</label>
<input type="datetime-local" id="end-date" class="date-input">
</div>
<button class="btn" id="apply-filter">Apply Filter</button>
</div>
</div>
<!-- Charts Section -->
<div class="charts-grid">
<div class="chart-card">
<div class="chart-header">
<h3>🎯 Token Usage Distribution</h3>
<div class="chart-summary" id="token-summary">
Total: <span id="total-tokens-chart">0</span> tokens
</div>
</div>
<div class="chart-container">
<canvas id="token-chart"></canvas>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<h3>📈 Sessions Over Time</h3>
<div class="chart-summary" id="sessions-summary">
Total: <span id="total-sessions-chart">0</span> sessions
</div>
</div>
<div class="chart-container">
<canvas id="sessions-chart"></canvas>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<h3>⚡ API Response Times</h3>
<div class="chart-summary" id="response-summary">
Avg: <span id="avg-response-time">0ms</span>
</div>
</div>
<div class="chart-container">
<canvas id="response-times-chart"></canvas>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<h3>🔧 Tool Usage</h3>
<div class="chart-summary" id="tools-summary">
Total: <span id="total-tools-chart">0</span> calls
</div>
</div>
<div class="chart-container">
<canvas id="tools-chart"></canvas>
</div>
</div>
</div>
</div>
<!-- Metrics Logs Tab -->
<div id="metrics" class="tab-content">
<div class="logs-header">
<div class="logs-title">
<h3>Metrics Logs</h3>
<div class="logs-stats">
<span class="status-badge" id="metrics-count">0 metrics</span>
<span class="logs-last-update">Last update: <span id="metrics-timestamp">--</span></span>
</div>
</div>
<div class="logs-controls">
<button class="btn" id="refresh-metrics">Refresh</button>
<select class="logs-filter" id="metrics-filter">
<option value="all">All Metrics</option>
<option value="token">Token Metrics</option>
<option value="session">Session Metrics</option>
<option value="tool">Tool Metrics</option>
</select>
</div>
</div>
<div id="metrics-logs-content" class="logs-content">
<div class="loading">Loading metrics logs...</div>
</div>
<div class="pagination" id="metrics-pagination">
<button class="btn pagination-btn" id="metrics-prev" disabled>← Previous</button>
<span class="pagination-info" id="metrics-page-info">Page 1 of 1</span>
<button class="btn pagination-btn" id="metrics-next" disabled>Next →</button>
</div>
</div>
<!-- Trace Logs Tab -->
<div id="traces" class="tab-content">
<div class="logs-header">
<div class="logs-title">
<h3>Trace Logs</h3>
<div class="logs-stats">
<span class="status-badge" id="traces-count">0 traces</span>
<span class="logs-last-update">Last update: <span id="traces-timestamp">--</span></span>
</div>
</div>
<div class="logs-controls">
<button class="btn" id="refresh-traces">Refresh</button>
<select class="logs-filter" id="traces-filter">
<option value="all">All Traces</option>
<option value="api">API Calls</option>
<option value="tool">Tool Calls</option>
<option value="error">Errors</option>
</select>
</div>
</div>
<div id="traces-logs-content" class="logs-content">
<div class="loading">Loading trace logs...</div>
</div>
<div class="pagination" id="traces-pagination">
<button class="btn pagination-btn" id="traces-prev" disabled>← Previous</button>
<span class="pagination-info" id="traces-page-info">Page 1 of 1</span>
<button class="btn pagination-btn" id="traces-next" disabled>Next →</button>
</div>
</div>
</div>
<script src="js/api.js" type="module"></script>
<script src="js/ui.js" type="module"></script>
<script src="js/app.js" type="module"></script>
</body>
</html>