lean-ctx 3.9.5

Context Runtime for AI Agents with CCP. 71 MCP tools, 10 read modes, 95+ compression patterns, cross-session memory (CCP), persistent AI knowledge with temporal facts + contradiction detection, multi-agent context sharing, LITM-aware positioning, AAAK compact format, adaptive compression with Thompson Sampling bandits. Supports 24+ AI tools. Reduces LLM token consumption by up to 99%.
Documentation
<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<title>My usage · lean-ctx gateway</title>
<link rel="stylesheet" href="/me/static/fonts/fonts.css">
<link rel="stylesheet" href="/me/static/base.css">
<link rel="stylesheet" href="/me/static/me.css">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%2309090b'/%3E%3Cpath d='M10 8v16h12' stroke='%2334d399' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
</head>
<body>

<!-- ── Login ─────────────────────────────────────────────────────────── -->
<div id="login" class="login-wrap" hidden>
  <div class="login-card">
    <div class="login-brand">
      <span class="login-glyph"></span>
      <div>
        <div class="login-title">My usage</div>
        <div class="login-sub">lean-ctx · personal gateway view</div>
      </div>
    </div>
    <label class="login-label" for="key-input">Your gateway key</label>
    <form id="login-form" autocomplete="off">
      <input id="key-input" class="login-input" type="password"
             placeholder="your personal gateway key" spellcheck="false" autofocus>
      <button id="login-btn" class="btn btn-primary" type="submit">Show my usage</button>
    </form>
    <div id="login-error" class="login-error" hidden></div>
    <div class="login-hint">
      The same key your IDE uses to talk to the gateway. It identifies you, so
      you only ever see your own numbers. Kept in this tab's session only —
      never in URLs or persistent storage.
    </div>
  </div>
</div>

<!-- ── App ───────────────────────────────────────────────────────────── -->
<div id="app" hidden>
  <header class="topbar">
    <div class="topbar-brand">
      <span class="topbar-glyph"></span>
      <div class="topbar-names">
        <span id="who" class="topbar-org">My usage</span>
        <span class="topbar-product"><span id="org-label"></span> · lean-ctx gateway <span id="version" class="mono"></span></span>
      </div>
    </div>
    <div class="topbar-right">
      <div id="window-picker" class="seg" role="tablist" aria-label="Time window">
        <button class="seg-btn" data-days="1">24h</button>
        <button class="seg-btn" data-days="7">7d</button>
        <button class="seg-btn active" data-days="30">30d</button>
        <button class="seg-btn" data-days="90">90d</button>
      </div>
      <button id="refresh-btn" class="icon-btn" title="Refresh"></button>
      <button id="theme-btn" class="icon-btn" title="Toggle theme"></button>
      <button id="logout-btn" class="icon-btn" title="Sign out"></button>
    </div>
  </header>

  <main class="content">
    <!-- KPI grid -->
    <section class="kpi-grid">
      <div class="kpi-card">
        <div class="kpi-label">My spend <span class="kpi-window-label"></span></div>
        <div class="kpi-value mono" id="kpi-spend"></div>
        <div class="kpi-foot" id="kpi-spend-foot"></div>
      </div>
      <div class="kpi-card kpi-accent">
        <div class="kpi-label">Saved for me <span class="kpi-window-label"></span></div>
        <div class="kpi-value mono accent" id="kpi-saved"></div>
        <div class="kpi-foot" id="kpi-saved-foot"></div>
      </div>
      <div class="kpi-card">
        <div class="kpi-label">Requests</div>
        <div class="kpi-value mono" id="kpi-requests"></div>
        <div class="kpi-foot" id="kpi-requests-foot"></div>
      </div>
      <div class="kpi-card">
        <div class="kpi-label">Tokens</div>
        <div class="kpi-value mono" id="kpi-tokens"></div>
        <div class="kpi-foot" id="kpi-tokens-foot"></div>
      </div>
      <div class="kpi-card">
        <div class="kpi-label">Smart-routed <span class="info-dot" title="Requests the gateway routed to a cheaper or org-preferred model (aliases like acme/fast, or intent tiers).">i</span></div>
        <div class="kpi-value mono" id="kpi-routed"></div>
        <div class="kpi-foot" id="kpi-routed-foot"></div>
      </div>
    </section>

    <!-- Trend chart -->
    <section class="panel">
      <div class="panel-head">
        <h2>My spend &amp; savings trend</h2>
        <div class="legend">
          <span class="legend-item"><i class="dot dot-cost"></i>Spend</span>
          <span class="legend-item"><i class="dot dot-saved"></i>Saved</span>
        </div>
      </div>
      <div class="chart-wrap"><canvas id="trend-chart" height="220"></canvas></div>
      <div id="trend-empty" class="empty" hidden>No usage in this window yet — send a request through the gateway and it appears here within seconds.</div>
    </section>

    <!-- Models -->
    <section class="panel">
      <div class="panel-head">
        <h2>My models</h2>
      </div>
      <div class="table-wrap">
        <table class="data-table" id="models-table">
          <thead>
            <tr>
              <th>Model</th><th>Provider</th>
              <th class="num">Req</th><th class="num">In tok</th><th class="num">Out tok</th>
              <th class="num">Saved</th><th class="num">Cost</th>
            </tr>
          </thead>
          <tbody id="models-body"></tbody>
        </table>
      </div>
      <div id="models-empty" class="empty" hidden>No model usage in this window.</div>
    </section>

    <!-- Projects -->
    <section class="panel">
      <div class="panel-head">
        <h2>My projects</h2>
      </div>
      <div class="table-wrap">
        <table class="data-table" id="projects-table">
          <thead>
            <tr><th>Project</th><th class="bar-cell">Spend share</th><th class="num">Req</th><th class="num">Saved</th><th class="num">Cost</th></tr>
          </thead>
          <tbody id="projects-body"></tbody>
        </table>
      </div>
      <div id="projects-empty" class="empty" hidden>No project usage in this window.</div>
    </section>

    <!-- Tools (MCP) — hidden entirely until this person used the tool channel -->
    <section class="panel" id="tools-panel" hidden>
      <div class="panel-head">
        <h2>My tools <span class="muted">MCP via gateway</span></h2>
      </div>
      <div class="table-wrap">
        <table class="data-table" id="tools-table">
          <thead>
            <tr>
              <th>Server</th><th>Tool</th>
              <th class="num">Calls</th><th class="num">Result tok</th>
              <th class="num">Context cost <span class="info-dot" title="Tool-result tokens priced at the org's reference model input rate — what this context costs each time it flows into a model turn.">i</span></th>
            </tr>
          </thead>
          <tbody id="tools-body"></tbody>
        </table>
      </div>
    </section>

    <footer class="foot">
      <span id="foot-window" class="mono"></span>
      <span>your rows only · numbers from <code>usage_events</code></span>
    </footer>
  </main>
</div>

<div id="toast" class="toast" hidden></div>

<script src="/me/static/vendor/chart.umd.min.js"></script>
<script src="/me/static/me.js"></script>
</body>
</html>