<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>lean-ctx savings</title><style>
:root{color-scheme:dark;--bg:#080b12;--panel:#111827;--line:#263247;--ink:#edf3ff;--muted:#8d9ab0;--mint:#55e6b8;--blue:#77a9ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 15% -10%,#173861,transparent 35%),var(--bg);color:var(--ink);font:15px/1.45 ui-sans-serif,system-ui,sans-serif}.wrap{max-width:1180px;margin:auto;padding:46px 24px}header{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.eyebrow{color:var(--mint);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}h1{margin:3px 0 0;font-size:34px;letter-spacing:-.04em}.live{color:var(--muted);font-size:13px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);margin-right:7px}.grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}.card,.panel{background:linear-gradient(145deg,#151e2f,#0d1422);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 12px 35px #0003}.label{color:var(--muted);font-size:13px}.metric{font-size:31px;font-weight:720;letter-spacing:-.04em;margin-top:7px}.hint{color:var(--muted);font-size:12px;margin-top:5px}.two{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.panel h2{font-size:15px;margin:0 0 18px}.row{display:grid;grid-template-columns:140px 1fr 76px;align-items:center;gap:12px;margin:12px 0}.bar{height:8px;background:#202b3d;border-radius:99px;overflow:hidden}.fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--mint))}.value{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.chart{height:188px;width:100%;display:block}.empty{color:var(--muted);padding:18px 0}@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}header{align-items:start;gap:16px;flex-direction:column}}@media(max-width:430px){.grid{grid-template-columns:1fr}.wrap{padding:28px 16px}}
</style></head><body><main class="wrap" x-data="savings()" x-init="load();setInterval(load,2000)">
<header><div><div class="eyebrow">lean-ctx · proxy savings</div><h1>More context. Less spend.</h1></div><div class="live"><span class="dot"></span><span x-text="updated"></span></div></header>
<section class="grid"><div class="card"><div class="label">Total tokens saved</div><div class="metric" x-text="number(stats.total_tokens_saved)"></div><div class="hint">all-time</div></div><div class="card"><div class="label">Compression ratio</div><div class="metric" x-text="percent(stats.compression_ratio)"></div><div class="hint">current proxy session</div></div><div class="card"><div class="label">Requests processed</div><div class="metric" x-text="number(stats.total_requests)"></div><div class="hint"><span x-text="number(stats.session_requests)"></span> this session</div></div><div class="card"><div class="label">Estimated cost saved</div><div class="metric" x-text="money(stats.estimated_cost_saved_usd)"></div><div class="hint">at $2.50 / million input tokens</div></div></section>
<section class="two"><div class="panel"><h2>Tools creating the most savings</h2><template x-if="stats.per_tool_stats.length"><div><template x-for="tool in stats.per_tool_stats" :key="tool.tool"><div class="row"><strong x-text="tool.tool"></strong><div class="bar"><div class="fill" :style="'width:'+bar(tool.tokens_saved)+'%'"></div></div><div class="value"><span x-text="number(tool.tokens_saved)"></span><small> saved</small></div></div></template></div></template><template x-if="!stats.per_tool_stats.length"><div class="empty">Savings will appear here as tools are used.</div></template></div>
<div class="panel"><h2>Session timeline</h2><svg class="chart" viewBox="0 0 360 188" preserveAspectRatio="none"><line x1="0" y1="164" x2="360" y2="164" stroke="#263247"/><template x-for="(v,i) in timeline" :key="i"><rect :x="i*38+5" :y="164-v" width="25" :height="v" rx="4" fill="url(#g)"/></template><defs><linearGradient id="g" x1="0" x2="1"><stop stop-color="#77a9ff"/><stop offset="1" stop-color="#55e6b8"/></linearGradient></defs></svg><div class="hint"><span x-text="number(stats.session_tokens_saved)"></span> tokens saved in current session · <span x-text="uptime"></span> uptime</div></div></section>
</main><script>
function savings(){return{stats:{session_tokens_saved:0,session_requests:0,total_tokens_saved:0,total_requests:0,compression_ratio:0,estimated_cost_saved_usd:0,per_tool_stats:[],uptime_seconds:0},timeline:[],updated:'waiting for proxy',async load(){try{this.stats=await fetch('/api/stats').then(r=>r.json());this.timeline=[...this.timeline,this.stats.session_tokens_saved].slice(-9);let m=Math.max(...this.timeline,1);this.timeline=this.timeline.map(v=>Math.max(5,Math.round(v/m*145)));this.updated='live · updated just now'}catch(_){this.updated='reconnecting…'}},number:n=>new Intl.NumberFormat().format(n||0),percent:n=>(n||0).toFixed(1)+'%',money:n=>'$'+(n||0).toFixed(2),bar(n){let m=Math.max(...this.stats.per_tool_stats.map(x=>x.tokens_saved),1);return Math.max(3,n/m*100)},get uptime(){let s=this.stats.uptime_seconds||0;return s<60?s+'s':Math.floor(s/60)+'m '+s%60+'s'}}}
</script><script>/* Alpine-compatible declarative enhancement without a network dependency. */</script><script>(function(){const root=document.querySelector('[x-data]');if(!root)return;const app=savings();const render=()=>{root.querySelectorAll('[x-text]').forEach(e=>{try{e.textContent=Function('s','return '+e.getAttribute('x-text'))(app)}catch(_){}})};const load=app.load.bind(app);app.load=async()=>{await load();render()};app.load();setInterval(app.load,2000)})()</script></body></html>