<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude Usage Report - Jul 16 to Aug 15, 2025</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
background: #f5f5f5;
}
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px;
border-radius: 10px;
margin-bottom: 30px;
}
.header h1 { font-size: 2.5em; margin-bottom: 10px; }
.header .subtitle { opacity: 0.9; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; }
.card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.card h2 {
font-size: 0.9em;
text-transform: uppercase;
color: #666;
margin-bottom: 10px;
}
.card .value {
font-size: 2em;
font-weight: bold;
color: #333;
}
.card .subtitle {
font-size: 0.9em;
color: #999;
margin-top: 5px;
}
.chart-container {
background: white;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.chart-container h2 {
margin-bottom: 20px;
color: #333;
}
.insights {
background: white;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.insights h2 { margin-bottom: 15px; }
.insights ul { list-style: none; }
.insights li {
padding: 10px;
margin-bottom: 10px;
border-left: 3px solid #667eea;
background: #f8f9fa;
}
.warning { border-left-color: #f59e0b !important; background: #fef3c7 !important; }
.opportunity { border-left-color: #10b981 !important; background: #d1fae5 !important; }
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #e5e5e5;
}
th {
background: #f8f9fa;
font-weight: 600;
}
.footer {
text-align: center;
margin-top: 40px;
padding: 20px;
color: #666;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Claude Usage Report - Jul 16 to Aug 15, 2025</h1>
<div class="subtitle">
Jul 16, 2025 -
Aug 15, 2025
</div>
</div>
<div class="grid">
<div class="card">
<h2>Total Cost</h2>
<div class="value">$4175.02</div>
<div class="subtitle">Average $139.17/day</div>
</div>
<div class="card">
<h2>Total Tokens</h2>
<div class="value">2835.19M</div>
<div class="subtitle">28919 requests</div>
</div>
<div class="card">
<h2>Cache Efficiency</h2>
<div class="value">9982.6%</div>
<div class="subtitle">Saved $18780.13</div>
</div>
<div class="card">
<h2>Burn Rate</h2>
<div class="value">$5.81/hr</div>
<div class="subtitle">UNKNOWN</div>
</div>
</div>
<div class="chart-container">
<h2>Daily Usage Trend</h2>
<canvas id="dailyChart"></canvas>
</div>
<div class="chart-container">
<h2>Model Distribution</h2>
<canvas id="modelChart"></canvas>
</div>
<div class="insights">
<h2>Insights & Recommendations</h2>
<h3 style="color: #667eea; margin: 20px 0 10px;">đź’ˇ Recommendations</h3>
<ul>
<li>Consider using Claude Haiku for simpler tasks to reduce costs</li><li>Implement request batching to reduce API calls</li>
</ul>
<h3 style="color: #10b981; margin: 20px 0 10px;">✨ Opportunities</h3>
<ul>
<li class="opportunity">Excellent cache efficiency (9982.6%) - saving $18780.13</li>
</ul>
</div>
<div class="chart-container">
<h2>Model Usage</h2>
<table>
<thead>
<tr>
<th>Model</th>
<th>Requests</th>
<th>Total Tokens</th>
<th>Total Cost</th>
<th>Cache Hit Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>claude-opus-4-1-20250805</td>
<td>6,629</td>
<td>673.84M</td>
<td>$1870.10</td>
<td>95.0%</td>
</tr>
<tr>
<td>claude-opus-4-20250514</td>
<td>5,906</td>
<td>494.37M</td>
<td>$1464.34</td>
<td>94.4%</td>
</tr>
<tr>
<td>claude-sonnet-4-20250514</td>
<td>16,384</td>
<td>1666.97M</td>
<td>$840.58</td>
<td>94.6%</td>
</tr>
</tbody>
</table>
</div>
<div class="footer">
Generated on Aug 15, 2025 22:21 •
Ouroboros Claude Monitoring System v1.0.0
</div>
</div>
<script>
// Daily usage chart
const dailyCtx = document.getElementById('dailyChart').getContext('2d');
new Chart(dailyCtx, {
type: 'line',
data: {
labels: ["Jul 16","Jul 17","Jul 18","Jul 19","Jul 21","Jul 23","Jul 24","Jul 27","Jul 28","Aug 3","Aug 4","Aug 5","Aug 6","Aug 7","Aug 8","Aug 9","Aug 10","Aug 11","Aug 12","Aug 13","Aug 14","Aug 15"],
datasets: [{
label: 'Daily Cost ($)',
data: ["13.96","174.73","116.18","3.61","166.24","81.62","95.45","3.53","78.99","108.26","544.52","10.80","193.35","549.84","300.48","583.22","348.56","28.68","233.65","455.15","6.09","78.10"],
borderColor: '#667eea',
backgroundColor: 'rgba(102, 126, 234, 0.1)',
tension: 0.4
}]
},
options: {
responsive: true,
plugins: {
legend: { display: false }
}
}
});
// Model distribution chart
const modelCtx = document.getElementById('modelChart').getContext('2d');
new Chart(modelCtx, {
type: 'doughnut',
data: {
labels: ["opus-4","opus-4","sonnet-4"],
datasets: [{
data: ["1870.10","1464.34","840.58"],
backgroundColor: [
'#667eea',
'#764ba2',
'#f59e0b',
'#10b981',
'#ef4444'
]
}]
},
options: {
responsive: true,
plugins: {
legend: { position: 'right' }
}
}
});
</script>
</body>
</html>