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>Crush Usage Statistics</title>
7 <link rel="preconnect" href="https://cdn.jsdelivr.net" />
8 <link rel="preconnect" href="https://fonts.googleapis.com" />
9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10 <link
11 href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
12 rel="stylesheet"
13 />
14 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
15 <style>
16 {{.CSS}}
17 </style>
18 </head>
19 <body>
20 <div class="container">
21 <div class="header-wrapper">
22 <a href="https://charm.land/crush" class="header-link">
23 <div class="header-content">
24 <div class="header-svg">{{.Header}}</div>
25 <div class="heartbit-svg">{{.Heartbit}}</div>
26 </div>
27 </a>
28 </div>
29
30 <div class="header-info">
31 Generated by {{.Username}} for {{.ProjectName}} on {{.GeneratedAt}}.
32 </div>
33
34 <div class="stats-grid">
35 <div class="stat-card">
36 <h3>Total Sessions</h3>
37 <div class="value" id="total-sessions"></div>
38 </div>
39 <div class="stat-card">
40 <h3>Total Messages</h3>
41 <div class="value" id="total-messages"></div>
42 </div>
43 <div class="stat-card">
44 <h3>Total Tokens</h3>
45 <div class="value" id="total-tokens"></div>
46 </div>
47 <div class="stat-card">
48 <h3>Total Cost</h3>
49 <div class="value cost" id="total-cost"></div>
50 </div>
51 <div class="stat-card">
52 <h3>Tokens/Session</h3>
53 <div class="value" id="avg-tokens"></div>
54 </div>
55 <div class="stat-card">
56 <h3>Response Time</h3>
57 <div class="value" id="avg-response"></div>
58 </div>
59 </div>
60
61 <div class="charts-grid">
62 <div class="chart-card full-width">
63 <h2>Activity Heatmap</h2>
64 <div class="chart-container tall">
65 <canvas id="heatmapChart"></canvas>
66 </div>
67 </div>
68
69 <div class="chart-card full-width">
70 <h2>Activity (Last 30 Days)</h2>
71 <div class="chart-container tall">
72 <canvas id="recentActivityChart"></canvas>
73 </div>
74 </div>
75
76 <div class="chart-card full-width">
77 <h2>Tool Usage</h2>
78 <div class="chart-container tall">
79 <canvas id="toolChart"></canvas>
80 </div>
81 </div>
82
83 <div class="chart-row">
84 <div class="chart-card">
85 <h2>Messages by Provider</h2>
86 <div class="chart-container">
87 <canvas id="providerPieChart"></canvas>
88 </div>
89 </div>
90
91 <div class="chart-card">
92 <h2>Token Distribution</h2>
93 <div class="chart-container">
94 <canvas id="tokenPieChart"></canvas>
95 </div>
96 </div>
97 </div>
98
99 <div class="chart-card full-width">
100 <h2>Usage by Model</h2>
101 <div class="chart-container tall">
102 <canvas id="modelChart"></canvas>
103 </div>
104 </div>
105
106 <div class="chart-card full-width">
107 <h2>Daily Usage History</h2>
108 <div style="overflow-x: auto">
109 <table id="daily-table">
110 <thead>
111 <tr>
112 <th>Date</th>
113 <th>Sessions</th>
114 <th>Prompt Tokens</th>
115 <th>Completion Tokens</th>
116 <th>Total Tokens</th>
117 <th>Cost</th>
118 </tr>
119 </thead>
120 <tbody></tbody>
121 </table>
122 </div>
123 </div>
124 </div>
125 </div>
126
127 <div class="footer-container">
128 <div class="footer">{{.Footer}}</div>
129 </div>
130
131 <script>
132 const stats = {{.StatsJSON}};
133 {{.JS}}
134 </script>
135 </body>
136</html>