@lemantorus/opencode-analytics 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +211 -0
- package/bin/opencode-analytics.js +143 -0
- package/package.json +38 -0
- package/public/app.js +880 -0
- package/public/index.html +176 -0
- package/public/styles.css +826 -0
- package/server/db.js +541 -0
- package/server/index.js +491 -0
- package/server/pricing.json +122 -0
- package/server/user-prices.json +4 -0
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>OpenCode Analytics</title>
|
|
7
|
+
<link rel="stylesheet" href="styles.css">
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" defer></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div class="container">
|
|
12
|
+
<header>
|
|
13
|
+
<div class="header-left">
|
|
14
|
+
<h1>OpenCode Analytics</h1>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="header-controls">
|
|
17
|
+
<label class="checkbox-wrapper">
|
|
18
|
+
<input type="checkbox" id="checkAsFree" checked>
|
|
19
|
+
<span>Check as Free</span>
|
|
20
|
+
</label>
|
|
21
|
+
<button id="refreshPricingBtn" class="btn btn-outline" title="Reset all custom prices to server defaults. Your changes will be lost.">Actualize prices</button>
|
|
22
|
+
<button id="editPricingBtn" class="btn btn-outline">Edit Pricing</button>
|
|
23
|
+
</div>
|
|
24
|
+
</header>
|
|
25
|
+
|
|
26
|
+
<section class="overview-cards">
|
|
27
|
+
<div class="card">
|
|
28
|
+
<div class="card-icon">💬</div>
|
|
29
|
+
<div class="card-content">
|
|
30
|
+
<div class="card-label">Messages</div>
|
|
31
|
+
<div class="card-value" id="totalMessages">-</div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="card">
|
|
35
|
+
<div class="card-icon">📥</div>
|
|
36
|
+
<div class="card-content">
|
|
37
|
+
<div class="card-label">Input Tokens</div>
|
|
38
|
+
<div class="card-value" id="totalInput">-</div>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="card">
|
|
42
|
+
<div class="card-icon">📤</div>
|
|
43
|
+
<div class="card-content">
|
|
44
|
+
<div class="card-label">Output Tokens</div>
|
|
45
|
+
<div class="card-value" id="totalOutput">-</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="card">
|
|
49
|
+
<div class="card-icon">âš¡</div>
|
|
50
|
+
<div class="card-content">
|
|
51
|
+
<div class="card-label">Cache Read</div>
|
|
52
|
+
<div class="card-value" id="totalCacheRead">-</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="card highlight">
|
|
56
|
+
<div class="card-icon">💰</div>
|
|
57
|
+
<div class="card-content">
|
|
58
|
+
<div class="card-label">Estimated Cost</div>
|
|
59
|
+
<div class="card-value" id="totalCost">-</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</section>
|
|
63
|
+
|
|
64
|
+
<section class="time-filter-row">
|
|
65
|
+
<div class="time-filter" id="mainTimeFilter">
|
|
66
|
+
<button class="btn btn-sm" data-range="7">7D</button>
|
|
67
|
+
<button class="btn btn-sm active" data-range="30">30D</button>
|
|
68
|
+
<button class="btn btn-sm" data-range="90">90D</button>
|
|
69
|
+
<button class="btn btn-sm" data-range="365">1Y</button>
|
|
70
|
+
<button class="btn btn-sm" data-range="all">All</button>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="date-range-picker">
|
|
73
|
+
<label>From:</label>
|
|
74
|
+
<input type="date" id="startDate">
|
|
75
|
+
<label>To:</label>
|
|
76
|
+
<input type="date" id="endDate">
|
|
77
|
+
<button class="btn btn-sm btn-primary" id="applyDateRange">Apply</button>
|
|
78
|
+
</div>
|
|
79
|
+
</section>
|
|
80
|
+
|
|
81
|
+
<section class="charts-grid">
|
|
82
|
+
<div class="chart-container">
|
|
83
|
+
<h3>Usage by Model</h3>
|
|
84
|
+
<div class="chart-wrapper"><canvas id="modelsChart"></canvas></div>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="chart-container">
|
|
87
|
+
<h3>Cost Distribution</h3>
|
|
88
|
+
<div class="chart-wrapper"><canvas id="costChart"></canvas></div>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="chart-container full-width">
|
|
91
|
+
<div class="chart-header">
|
|
92
|
+
<h3>Daily Usage Trend</h3>
|
|
93
|
+
<div class="chart-type-toggle">
|
|
94
|
+
<button class="btn btn-sm active" data-chart="tokens">Tokens</button>
|
|
95
|
+
<button class="btn btn-sm" data-chart="cost">Cost</button>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="chart-wrapper large"><canvas id="dailyChart"></canvas></div>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="chart-container">
|
|
101
|
+
<div class="chart-header">
|
|
102
|
+
<h3>Hourly Activity</h3>
|
|
103
|
+
<div class="chart-type-toggle">
|
|
104
|
+
<button class="btn btn-sm active" data-hourly="messages">Messages</button>
|
|
105
|
+
<button class="btn btn-sm" data-hourly="tps">TPS</button>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="chart-wrapper"><canvas id="hourlyChart"></canvas></div>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="chart-container">
|
|
111
|
+
<h3>Weekly Cost</h3>
|
|
112
|
+
<div class="chart-wrapper"><canvas id="weeklyChart"></canvas></div>
|
|
113
|
+
</div>
|
|
114
|
+
</section>
|
|
115
|
+
|
|
116
|
+
<section class="charts-grid">
|
|
117
|
+
<div class="chart-container full-width">
|
|
118
|
+
<div class="chart-header">
|
|
119
|
+
<h3>Models Usage</h3>
|
|
120
|
+
<div class="dropdown" id="tpsModelDropdown">
|
|
121
|
+
<button type="button" class="dropdown-toggle">Select models â–¼</button>
|
|
122
|
+
<div class="dropdown-menu">
|
|
123
|
+
<div class="dropdown-options"></div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="chart-wrapper large"><canvas id="tpsChart"></canvas></div>
|
|
128
|
+
</div>
|
|
129
|
+
</section>
|
|
130
|
+
|
|
131
|
+
<section class="models-table">
|
|
132
|
+
</section>
|
|
133
|
+
|
|
134
|
+
<section class="models-table">
|
|
135
|
+
<h3>Models Breakdown</h3>
|
|
136
|
+
<div class="table-wrapper">
|
|
137
|
+
<table id="modelsTable">
|
|
138
|
+
<thead>
|
|
139
|
+
<tr>
|
|
140
|
+
<th>Model</th>
|
|
141
|
+
<th>Messages</th>
|
|
142
|
+
<th>Input</th>
|
|
143
|
+
<th>Output</th>
|
|
144
|
+
<th>Cache Read</th>
|
|
145
|
+
<th>Cache Write</th>
|
|
146
|
+
<th>Cost</th>
|
|
147
|
+
<th>Type</th>
|
|
148
|
+
</tr>
|
|
149
|
+
</thead>
|
|
150
|
+
<tbody></tbody>
|
|
151
|
+
</table>
|
|
152
|
+
</div>
|
|
153
|
+
</section>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<div id="pricingModal" class="modal">
|
|
157
|
+
<div class="modal-content">
|
|
158
|
+
<div class="modal-header">
|
|
159
|
+
<h2>Edit Pricing</h2>
|
|
160
|
+
<button class="close-btn">×</button>
|
|
161
|
+
</div>
|
|
162
|
+
<div class="modal-body">
|
|
163
|
+
<p class="modal-info">Prices are per 1M tokens. Models sorted by usage. Changes override OpenRouter defaults.</p>
|
|
164
|
+
<div id="pricingList"></div>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<div id="loading" class="loading">
|
|
170
|
+
<div class="spinner"></div>
|
|
171
|
+
<span>Loading analytics...</span>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<script src="app.js?v=10"></script>
|
|
175
|
+
</body>
|
|
176
|
+
</html>
|