metrascope 0.1.0 → 0.1.2

package/README.md

@@ -1,10 +1,22 @@
-# metrascope
+<p align="center">
+  <img src="assets/logo.svg" width="120" height="120" alt="Metrascope logo">
+</p>
+
+<h1 align="center">metrascope</h1>
+
+[![npm version](https://img.shields.io/npm/v/metrascope.svg)](https://www.npmjs.com/package/metrascope)
+[![license](https://img.shields.io/npm/l/metrascope.svg)](./LICENSE)
+[![node](https://img.shields.io/node/v/metrascope.svg)](https://nodejs.org)
 
 See where your coding-agent tokens go. One local command, no upload.
 
 A unified, local dashboard for **multiple coding agents** — pick an agent in the
 header and see its own usage. Auto-detects whatever you have installed.
 
+```bash
+npx metrascope
+```
+
 | Agent | Reads | Tokens | Reasoning | Cache | Est. cost | Rate limit |
 |---|---|---|---|---|---|---|
 | **Codex** | `~/.codex` sessions | ✓ | ✓ | ✓ | — | ✓ |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metrascope",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "See where your coding-agent tokens go. One local command — Codex, Claude Code, Qwen Code, OpenCode & more. Zero upload.",
   "main": "src/index.js",
   "bin": {
@@ -35,11 +35,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Buckibarnes17/codex-spend.git"
+    "url": "git+https://github.com/Buckibarnes17/metrascope.git"
   },
-  "homepage": "https://github.com/Buckibarnes17/codex-spend#readme",
+  "homepage": "https://github.com/Buckibarnes17/metrascope#readme",
   "bugs": {
-    "url": "https://github.com/Buckibarnes17/codex-spend/issues"
+    "url": "https://github.com/Buckibarnes17/metrascope/issues"
   },
   "dependencies": {
     "express": "^4.21.0",

package/src/adapters/claude.js

@@ -9,7 +9,31 @@ const id = 'claude';
 const label = 'Claude Code';
 const mark = 'CC';
 const accent = '#cc785c';
-const capabilities = { cost: true, reasoning: false, rateLimit: false, cache: true, tools: true, contextWindow: false };
+const capabilities = { cost: true, reasoning: false, rateLimit: false, cache: true, tools: true, contextWindow: false, limitEvents: true };
+
+// Claude Code logs a synthetic 429 assistant message when you hit a usage limit,
+// e.g. "You've hit your session limit · resets 4:20pm (Asia/Kolkata)".
+const LIMIT_RX = /hit your (?:(\w+) )?limit\s*[·.]?\s*resets\s+([0-9]{1,2}:[0-9]{2}\s*[ap]m)\s*\(([^)]+)\)/i;
+function limitHitFromEntry(entry) {
+  if (entry.apiErrorStatus !== 429 && entry.error !== 'rate_limit') return null;
+  const content = entry.message && entry.message.content;
+  const text = Array.isArray(content) ? content.map((b) => b.text || '').join(' ') : (typeof content === 'string' ? content : '');
+  const m = text.match(LIMIT_RX);
+  if (!m) return null;
+  return {
+    timestamp: entry.timestamp || null,
+    kind: /session/i.test(m[1] || '') ? 'session' : 'weekly',
+    reset: m[2].replace(/\s+/g, ''),
+    tz: m[3],
+  };
+}
+function summarizeLimitHits(hits) {
+  const pick = (kind) => {
+    const list = hits.filter((h) => h.kind === kind).sort((a, b) => (b.timestamp || '').localeCompare(a.timestamp || ''));
+    return { count: list.length, last: list[0] || null };
+  };
+  return { total: hits.length, session: pick('session'), weekly: pick('weekly') };
+}
 
 // Anthropic API per-token pricing (estimate; subscription billing differs).
 const MODEL_PRICING = {
@@ -122,6 +146,7 @@ async function parse(options = {}) {
 
   const warnings = [];
   const sessions = [];
+  const limitHits = [];
   let projectDirs = [];
   try { projectDirs = fs.readdirSync(projectsDir).filter((d) => { try { return fs.statSync(path.join(projectsDir, d)).isDirectory(); } catch { return false; } }); } catch { /* */ }
 
@@ -135,6 +160,7 @@ async function parse(options = {}) {
       let entries;
       try { entries = await parseJSONLFile(filePath); } catch { continue; }
       if (!entries.length) continue;
+      for (const e of entries) { const hit = limitHitFromEntry(e); if (hit) limitHits.push(hit); }
       const rawTurns = extractTurns(entries);
       if (!rawTurns.length) continue;
 
@@ -177,7 +203,9 @@ async function parse(options = {}) {
     }
   }
   if (!sessions.length) return emptyResult(source, capabilities, [{ type: 'no-sessions', message: 'No Claude Code sessions with usage found.' }]);
-  return buildResult(sessions, source, capabilities, warnings);
+  const result = buildResult(sessions, source, capabilities, warnings);
+  result.limitEvents = summarizeLimitHits(limitHits);
+  return result;
 }
 
 module.exports = { id, label, mark, accent, capabilities, home, detect, parse };

package/src/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Metrascope">
+  <!-- dark bars -->
+  <rect x="255" y="615" width="85" height="210" rx="16" fill="#2f333a"/>
+  <rect x="405" y="485" width="85" height="340" rx="16" fill="#2f333a"/>
+  <rect x="710" y="565" width="85" height="260" rx="16" fill="#2f333a"/>
+  <!-- gold "i" bar + dot (the highlighted metric) -->
+  <rect x="560" y="310" width="85" height="515" rx="16" fill="#d4a44a"/>
+  <circle cx="602" cy="205" r="48" fill="#d4a44a"/>
+</svg>

package/src/public/index.html

@@ -3,7 +3,9 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Agent Spend</title>
+<title>Metrascope</title>
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<link rel="alternate icon" type="image/png" href="/favicon.png">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -37,6 +39,7 @@ button,input{font:inherit}
 header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
 .brand{display:flex;align-items:center;gap:12px}
 .mark{width:36px;height:36px;border-radius:9px;color:var(--brand-fg);background:linear-gradient(160deg,var(--brand),var(--brand-hover));display:grid;place-items:center;font-weight:850;font-size:14px;letter-spacing:.02em;box-shadow:var(--edge)}
+.logo{width:38px;height:38px;display:block;flex:0 0 auto}
 h1{margin:0;font-size:18px;line-height:1.1;letter-spacing:-.01em}
 .sub{margin-top:3px;color:var(--soft);font-size:11px;font-family:var(--mono);max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
@@ -188,7 +191,7 @@ tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 70%,transparent)
 </style>
 </head>
 <body>
-<div id="app" class="loading">Loading agent usage&hellip;</div>
+<div id="app" class="loading">Loading Metrascope&hellip;</div>
 <div class="scrim" id="scrim" onclick="closeDrawer()"></div>
 <div class="chart-tip" id="chartTip"></div>
 <aside class="drawer" id="drawer" aria-hidden="true"><div id="drawerContent"></div></aside>
@@ -244,17 +247,16 @@ function render(){
   const t=DATA.totals, app=document.getElementById('app'), src=DATA.source||{}, c=caps();
   app.className='wrap';
   app.innerHTML=`
-<header class="anim"><div class="brand"><div class="mark">${esc(src.mark||'CX')}</div><div><h1>Agent Spend</h1><div class="sub" title="${esc(src.home||'')}">${esc(src.label||'')} · ${esc(src.home||'')}${t.dateRange?' · '+t.dateRange.from+' → '+t.dateRange.to:''}</div></div></div><div class="actions"><button class="btn" onclick="toggleTheme()">${theme==='dark'?'☀ Light':'☾ Dark'}</button><button class="btn" onclick="openShare()">Share</button><button class="btn primary" onclick="refresh()">↻ Refresh</button></div></header>
+<header class="anim"><div class="brand"><img class="logo" src="/favicon.svg" alt="Metrascope" width="38" height="38"><div><h1>Metrascope</h1><div class="sub" title="${esc(src.home||'')}">${esc(src.label||'')} · ${esc(src.home||'')}${t.dateRange?' · '+t.dateRange.from+' → '+t.dateRange.to:''}</div></div></div><div class="actions"><button class="btn" onclick="toggleTheme()">${theme==='dark'?'☀ Light':'☾ Dark'}</button><button class="btn" onclick="openShare()">Share</button><button class="btn primary" onclick="refresh()">↻ Refresh</button></div></header>
 ${agentBar()}
 ${DATA.warnings?.length?`<div class="warnbox anim">${DATA.warnings.map(w=>esc(w.message)).join('<br>')}</div>`:''}
 ${!DATA.sessions.length?`<div class="card empty anim">No ${esc(src.label||'agent')} sessions with token usage found.<div class="muted" style="margin-top:8px">${esc(src.home||'')}</div></div>`:`
 <div class="summary anim">${kpiStrip(t,c)}</div>
-${c.rateLimit?ratebar(t.latestRateLimit):''}
 <div class="tabs anim">
   ${tabBtn('overview','Overview')}${tabBtn('sessions','Sessions')}${tabBtn('prompts','Prompts')}${tabBtn('insights',`Insights · ${DATA.insights.length}`)}
 </div>
 <div id="view" class="view"></div>`}`;
-  if(DATA.sessions.length){renderView();if(c.rateLimit)startRlTimer()}
+  if(DATA.sessions.length){renderView()}
 }
 
 function agentBar(){if(!SOURCES.length)return'';return`<div class="agentbar anim">${SOURCES.map(s=>`<button class="agent ${s.id===sourceId?'on':''}" ${s.available?'':'disabled'} title="${s.available?esc(s.home):'not detected on this machine'}" onclick="setSource('${s.id}')"><span class="amark" style="background:${s.available?s.accent:'var(--surface-3)'};color:${s.available?accentFg(s.accent):'var(--faint)'}">${esc(s.mark)}</span>${esc(s.label)}${s.available?'':' <span class="muted" style="font-size:10px">·n/a</span>'}</button>`).join('')}</div>`}
@@ -353,14 +355,6 @@ function promptDetail(p){return`<div><div class="section-head"><h2>Prompt #${p.r
 ${(p.tools||[]).length?`<div>${p.tools.map(t=>`<span class="tool-chip">${esc(t.tool)} · ${fmt(t.count)}</span>`).join('')}</div>`:''}
 <div class="turns">${p.turns.map((t,i)=>`<div class="turn"><div class="rk">${i+1}</div><div><strong style="font-size:12px">${timeFmt(t.timestamp)}</strong><div class="muted">${esc(t.model)}${t.contextWindow?' · ctx '+fmt(t.contextWindow):''}</div><div class="token-strip">${strip(t)}</div></div><div class="num">${fmt(t.totalTokens)}<div class="muted" style="font-weight:600">${fmt(freshInput(t))} fresh · ${fmt(t.cachedInputTokens)} cached · ${fmt(t.outputTokens)} out</div></div></div>`).join('')}</div>`}
 
-/* ===== rate-limit bar ===== */
-function windowLabel(min){if(!min)return'window';if(min%1440===0)return(min/1440)+'-day';if(min%60===0)return(min/60)+'-hour';return min+'-min'}
-function resetText(unixSec){if(!unixSec)return'';const ms=unixSec*1000-Date.now();if(ms<=0)return'resetting now';const m=Math.floor(ms/60000),h=Math.floor(m/60),d=Math.floor(h/24);if(d>=1)return`resets in ${d}d ${h%24}h`;if(h>=1)return`resets in ${h}h ${m%60}m`;return`resets in ${m}m`}
-function rlColor(pct){if(pct==null)return'var(--blue)';if(pct>=80)return'var(--rose)';if(pct>=50)return'var(--amber)';return'var(--green)'}
-function rlSeg(k,win,pct,reset){const p=pct==null?0:pct;return`<div class="rl"><div class="rl-top"><span class="k">${k} · ${windowLabel(win)}</span><span class="v" style="color:${rlColor(pct)}">${pct==null?'n/a':pct+'%'}</span></div><div class="rl-track"><div class="rl-fill" style="width:${Math.min(100,p)}%;background:${rlColor(pct)}"></div></div><div class="rl-reset" data-reset="${reset||''}">${reset?resetText(reset):'no reset recorded'}</div></div>`}
-function ratebar(r){if(!r)return'';return`<div class="ratebar anim"><div class="plan"><span class="muted" style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em">Plan</span><span class="name">${esc(r.planType||'unknown')}</span>${r.reachedType?`<span class="badge" style="background:var(--rose-bg);border-color:var(--rose-border);color:var(--rose)">limit hit</span>`:''}</div>${rlSeg('Primary',r.primaryWindowMinutes,r.primaryUsedPercent,r.primaryResetsAt)}${rlSeg('Weekly',r.secondaryWindowMinutes,r.secondaryUsedPercent,r.secondaryResetsAt)}</div>`}
-function startRlTimer(){if(rlTimer)clearInterval(rlTimer);rlTimer=setInterval(()=>{document.querySelectorAll('.rl-reset[data-reset]').forEach(el=>{const v=el.getAttribute('data-reset');if(v)el.textContent=resetText(Number(v))})},30000)}
-
 /* ===== charts ===== */
 function setupCanvas(id,h){const c=document.getElementById(id);if(!c)return null;const ctx=c.getContext('2d'),dpr=Math.min(window.devicePixelRatio||1,2);let w=c.clientWidth||(c.parentElement&&c.parentElement.clientWidth)||600;w=Math.max(120,Math.min(w,2400));h=h||c.height||210;c.width=Math.round(w*dpr);c.height=Math.round(h*dpr);c.style.height=h+'px';ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,w,h);return{ctx,width:w,height:h,el:c}}
 /* ---- chart tooltips ---- */