Skip to content

Instantly share code, notes, and snippets.

@joacopaz
Created April 24, 2026 19:42
Show Gist options
  • Select an option

  • Save joacopaz/fc2bfaf0fa48325fe6689ba4a4afc36d to your computer and use it in GitHub Desktop.

Select an option

Save joacopaz/fc2bfaf0fa48325fe6689ba4a4afc36d to your computer and use it in GitHub Desktop.
Laurel (laurel.ai) — agent usage 2026-04-01 to 2026-04-20
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Laurel (laurel.ai) — Agent Usage</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
body { font: 14px/1.5 system-ui, sans-serif; margin: 2rem; max-width: 1100px; color: #1a1a1a; }
h1 { margin: 0 0 0.25rem 0; }
.meta { color: #555; margin-bottom: 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.card { background: #f5f5f7; padding: 1rem 1.25rem; border-radius: 8px; }
.card .label { color: #666; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.card .value { font-size: 1.75rem; font-weight: 600; margin-top: 0.25rem; }
.chart-wrap { background: #fff; border: 1px solid #eaeaea; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; }
table { border-collapse: collapse; width: 100%; margin-top: 0.5rem; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #eee; }
th { background: #fafafa; font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.footnote { color: #666; font-size: 12px; margin-top: 1rem; }
</style>
</head>
<body>
<h1>Laurel (laurel.ai) — Agent Usage</h1>
<div class="meta">
Customer ID <code>0d8456da-3c1d-49b2-b6d3-b0440f0f3de8</code> (John Fiedler, enterprise) ·
window 2026-04-01 → 2026-04-20 ·
source: gateway <code>usage_flushed</code> events in CloudWatch (30-day retention)
</div>
<div class="grid">
<div class="card"><div class="label">Total tokens</div><div class="value">235,641</div></div>
<div class="card"><div class="label">Total requests</div><div class="value">1,179</div></div>
<div class="card"><div class="label">Active days</div><div class="value">17</div></div>
</div>
<div class="chart-wrap">
<h3 style="margin-top:0">Tokens per day, stacked by agent</h3>
<canvas id="tokens-chart" height="110"></canvas>
</div>
<div class="chart-wrap">
<h3 style="margin-top:0">Requests per day (total)</h3>
<canvas id="requests-chart" height="90"></canvas>
</div>
<div class="chart-wrap">
<h3 style="margin-top:0">Per-agent totals (window)</h3>
<table>
<thead><tr><th>Agent</th><th class="num">Tokens</th><th class="num">Requests</th></tr></thead>
<tbody>
<tr><td>Security agent</td><td class="num">170,325</td><td class="num">731</td></tr><tr><td>AI Sasha</td><td class="num">42,364</td><td class="num">366</td></tr><tr><td>(deleted) ce61ac76</td><td class="num">20,041</td><td class="num">58</td></tr><tr><td>(deleted) 5ceb4b2c</td><td class="num">2,911</td><td class="num">24</td></tr>
</tbody>
</table>
</div>
<p class="footnote">
Sourced from <code>usage_flushed</code> log events across
<code>/ecs/{clutch,openclaw}-prod/agents/0d8456da-3c1d-49b2-b6d3-b0440f0f3de8</code>.
CloudWatch retains 30 days, so activity before 2026-04-01 is not shown here — the admin DB records 4 requests / 563 tokens in 2026-03 before this window.
Log totals (235,641 tokens, 1,179 requests) run ~10% higher than the DB usage table (213,252 tokens, 1,101 requests) because <code>usage_flushed</code> fires once per flush attempt — retry-duplicates and flushes from agents that were later deleted show up here but not in the table.
</p>
<script>
const days = ["2026-04-01","2026-04-02","2026-04-03","2026-04-04","2026-04-05","2026-04-06","2026-04-07","2026-04-08","2026-04-09","2026-04-10","2026-04-11","2026-04-12","2026-04-13","2026-04-14","2026-04-15","2026-04-16","2026-04-17","2026-04-18","2026-04-19","2026-04-20"];
const palette = ["#2563eb","#16a34a","#dc2626","#9333ea","#ea580c","#0891b2","#db2777"];
const stacked = [{"label":"AI Sasha","data":[0,0,0,0,0,0,0,0,0,0,0,0,1171,7027,8370,528,17779,0,0,7489]},{"label":"Security agent","data":[980,446,868,63070,5866,6453,4520,5428,17486,26700,8558,0,6308,0,23642,0,0,0,0,0]},{"label":"(deleted) 5ceb4b2c","data":[0,2911,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},{"label":"(deleted) ce61ac76","data":[429,19612,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}].map((ds, i) => ({
...ds,
backgroundColor: palette[i % palette.length],
borderColor: palette[i % palette.length],
borderWidth: 0,
stack: "tokens",
}));
new Chart(document.getElementById("tokens-chart"), {
type: "bar",
data: { labels: days, datasets: stacked },
options: {
responsive: true,
interaction: { mode: "index", intersect: false },
scales: {
x: { stacked: true, ticks: { autoSkip: true, maxTicksLimit: 24 } },
y: { stacked: true, title: { display: true, text: "tokens" }, beginAtZero: true },
},
plugins: { legend: { position: "bottom" }, tooltip: { callbacks: { label: (ctx) => ctx.dataset.label + ": " + ctx.parsed.y.toLocaleString() } } },
},
});
new Chart(document.getElementById("requests-chart"), {
type: "bar",
data: {
labels: days,
datasets: [{ label: "requests", data: [8,82,6,202,54,56,35,53,75,50,38,0,105,52,141,48,130,0,0,44], backgroundColor: "#2563eb" }],
},
options: {
responsive: true,
scales: { y: { beginAtZero: true, title: { display: true, text: "requests" } }, x: { ticks: { autoSkip: true, maxTicksLimit: 24 } } },
plugins: { legend: { display: false } },
},
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment