claude-relay 2.2.1 → 2.2.2

package/lib/project.js

@@ -4,7 +4,6 @@ var { createSessionManager } = require("./sessions");
 var { createSDKBridge } = require("./sdk-bridge");
 var { createTerminalManager } = require("./terminal-manager");
 var { fetchLatestVersion, isNewer } = require("./updater");
-var { fetchUsageData } = require("./usage");
 var { execFileSync } = require("child_process");
 
 // SDK loaded dynamically (ESM module)
@@ -317,14 +316,6 @@ function createProjectContext(opts) {
       return;
     }
 
-    if (msg.type === "get_usage") {
-      fetchUsageData().then(function (data) {
-        sendTo(ws, { type: "usage_data", data: data });
-      }).catch(function (err) {
-        sendTo(ws, { type: "usage_data", error: err.message || "Failed to fetch usage data" });
-      });
-      return;
-    }
 
     if (msg.type === "set_model" && msg.model) {
       var session = sm.getActiveSession();

package/lib/public/app.js

@@ -502,8 +502,6 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       connectOverlay.classList.add("hidden");
       stopVerbCycle();
       updateFavicon("#57AB5A");
-      if (usageFab) usageFab.classList.remove("hidden");
-      if (usageHeaderBtn) usageHeaderBtn.classList.remove("hidden");
     } else if (status === "processing") {
       statusDot.classList.add("processing");
       processing = true;
@@ -605,8 +603,6 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   // --- Usage panel ---
   var usagePanel = $("usage-panel");
   var usagePanelClose = $("usage-panel-close");
-  var usageFab = $("usage-fab");
-  var usageHeaderBtn = $("usage-header-btn");
   var usageCostEl = $("usage-cost");
   var usageInputEl = $("usage-input");
   var usageOutputEl = $("usage-output");
@@ -615,126 +611,12 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   var usageTurnsEl = $("usage-turns");
   var sessionUsage = { cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
 
-  // Rate limit bar elements
-  var usageLoading = $("usage-loading");
-  var usageError = $("usage-error");
-  var usageBars = $("usage-bars");
-  var usageRateLimitFetched = false;
-
   function formatTokens(n) {
     if (n >= 1000000) return (n / 1000000).toFixed(1) + "M";
     if (n >= 1000) return (n / 1000).toFixed(1) + "K";
     return String(n);
   }
 
-  function formatTimeUntil(isoStr) {
-    if (!isoStr) return "";
-    var d = new Date(isoStr);
-    var now = Date.now();
-    var diff = d.getTime() - now;
-    if (diff <= 0) return "Resets soon";
-    var hours = Math.floor(diff / 3600000);
-    var minutes = Math.floor((diff % 3600000) / 60000);
-    var relative;
-    if (hours > 24) {
-      var days = Math.floor(hours / 24);
-      relative = days + "d " + (hours % 24) + "h";
-    } else if (hours > 0) {
-      relative = hours + "h " + minutes + "m";
-    } else {
-      relative = minutes + "m";
-    }
-    // Absolute time: "Mon 2/17 15:00" or "15:00" if today
-    var nowDate = new Date(now);
-    var month = d.getMonth() + 1;
-    var day = d.getDate();
-    var hh = String(d.getHours()).padStart(2, "0");
-    var mm = String(d.getMinutes()).padStart(2, "0");
-    var sameDay = d.getFullYear() === nowDate.getFullYear() && d.getMonth() === nowDate.getMonth() && d.getDate() === nowDate.getDate();
-    var abs = sameDay ? hh + ":" + mm : month + "/" + day + " " + hh + ":" + mm;
-    return "Resets in " + relative + " (" + abs + ")";
-  }
-
-  function updateRateLimitBar(prefix, utilization, resetsAt) {
-    var pctEl = $("usage-pct-" + prefix);
-    var fillEl = $("usage-fill-" + prefix);
-    var resetEl = $("usage-reset-" + prefix);
-    var groupEl = $("usage-bar-" + prefix);
-    if (!pctEl || !fillEl || !resetEl) return;
-
-    if (utilization == null) {
-      if (groupEl) groupEl.classList.add("hidden");
-      return;
-    }
-    if (groupEl) groupEl.classList.remove("hidden");
-
-    var pct = Math.max(0, Math.min(100, Math.round(utilization)));
-    pctEl.textContent = pct + "%";
-    fillEl.style.width = pct + "%";
-    fillEl.className = "usage-bar-fill";
-    if (prefix === "extra") fillEl.classList.add("usage-bar-fill-extra");
-    if (pct >= 90) fillEl.classList.add("critical");
-    else if (pct >= 70) fillEl.classList.add("warn");
-
-    resetEl.textContent = formatTimeUntil(resetsAt);
-  }
-
-  function handleUsageData(msg) {
-    if (!usageLoading || !usageError || !usageBars) return;
-    usageLoading.style.display = "none";
-
-    if (msg.error) {
-      usageError.textContent = msg.error;
-      usageError.classList.remove("hidden");
-      usageBars.classList.add("hidden");
-      return;
-    }
-
-    usageError.classList.add("hidden");
-    usageBars.classList.remove("hidden");
-    var data = msg.data || {};
-
-    // Session (five_hour)
-    var session = data.five_hour || {};
-    updateRateLimitBar("session", session.utilization, session.resets_at);
-
-    // Weekly all models (seven_day)
-    var weekly = data.seven_day || {};
-    updateRateLimitBar("weekly", weekly.utilization, weekly.resets_at);
-
-    // Weekly Sonnet only (seven_day_sonnet)
-    var sonnet = data.seven_day_sonnet || {};
-    updateRateLimitBar("sonnet", sonnet.utilization, sonnet.resets_at);
-
-    // Extra usage
-    var extra = data.extra_usage || {};
-    var extraGroup = $("usage-bar-extra");
-    if (extra.is_enabled) {
-      if (extraGroup) extraGroup.classList.remove("hidden");
-      // Compute reset time as first of next month
-      var now = new Date();
-      var nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
-      updateRateLimitBar("extra", extra.utilization, nextMonth.toISOString());
-      var extraResetEl = $("usage-reset-extra");
-      if (extraResetEl && extra.monthly_limit != null) {
-        var usedDollars = (extra.used_credits / 100).toFixed(2);
-        var limitDollars = (extra.monthly_limit / 100).toFixed(2);
-        extraResetEl.textContent = "$" + usedDollars + " / $" + limitDollars;
-      }
-    } else {
-      if (extraGroup) extraGroup.classList.add("hidden");
-    }
-
-    usageRateLimitFetched = true;
-  }
-
-  function requestUsageData() {
-    if (!ws || ws.readyState !== 1) return;
-    if (usageLoading) usageLoading.style.display = "";
-    if (usageError) usageError.classList.add("hidden");
-    ws.send(JSON.stringify({ type: "get_usage" }));
-  }
-
   function updateUsagePanel() {
     if (!usageCostEl) return;
     usageCostEl.textContent = "$" + sessionUsage.cost.toFixed(4);
@@ -761,40 +643,17 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     sessionUsage = { cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
     updateUsagePanel();
     if (usagePanel) usagePanel.classList.add("hidden");
-    if (usageFab) usageFab.classList.remove("active");
-    if (usageHeaderBtn) usageHeaderBtn.classList.remove("active");
-    usageRateLimitFetched = false;
   }
 
   function toggleUsagePanel() {
     if (!usagePanel) return;
-    var isHidden = usagePanel.classList.toggle("hidden");
-    if (usageFab) usageFab.classList.toggle("active", !isHidden);
-    if (usageHeaderBtn) usageHeaderBtn.classList.toggle("active", !isHidden);
-    // Fetch rate limit data when opening
-    if (!isHidden) {
-      requestUsageData();
-    }
+    usagePanel.classList.toggle("hidden");
     refreshIcons();
   }
 
   if (usagePanelClose) {
     usagePanelClose.addEventListener("click", function () {
       usagePanel.classList.add("hidden");
-      if (usageFab) usageFab.classList.remove("active");
-      if (usageHeaderBtn) usageHeaderBtn.classList.remove("active");
-    });
-  }
-
-  if (usageFab) {
-    usageFab.addEventListener("click", function () {
-      toggleUsagePanel();
-    });
-  }
-
-  if (usageHeaderBtn) {
-    usageHeaderBtn.addEventListener("click", function () {
-      toggleUsagePanel();
     });
   }
 
@@ -1195,10 +1054,6 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           updateModelSelector(msg.model, msg.models || []);
           break;
 
-        case "usage_data":
-          handleUsageData(msg);
-          break;
-
         case "client_count":
           var countEl = document.getElementById("client-count");
           if (countEl) {

package/lib/public/css/menus.css

@@ -85,24 +85,6 @@
   flex-shrink: 0;
 }
 
-/* --- Usage header button (mobile only) --- */
-#usage-header-btn {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  color: var(--text-dimmer);
-  cursor: pointer;
-  padding: 4px;
-  transition: color 0.15s, background 0.15s, border-color 0.15s;
-}
-#usage-header-btn .lucide { width: 15px; height: 15px; }
-#usage-header-btn:hover { color: var(--text-secondary); background: rgba(255,255,255,0.04); border-color: var(--border); }
-#usage-header-btn.active { color: var(--accent); border-color: var(--accent); }
-#usage-header-btn.hidden { display: none !important; }
-
 /* --- Terminal toggle button --- */
 #terminal-toggle-btn {
   display: flex;
@@ -485,68 +467,29 @@
   padding: 8px 14px 12px;
 }
 
-/* --- Rate limit bars --- */
-.usage-loading {
-  color: var(--text-muted);
-  padding: 8px 0;
-  text-align: center;
-}
-
-.usage-error {
-  color: var(--error);
-  padding: 6px 0;
-  font-size: 11px;
-  line-height: 1.4;
-}
-
-.usage-error.hidden { display: none; }
-
-.usage-bar-group {
-  margin-bottom: 10px;
-}
-
-.usage-bar-group:last-child { margin-bottom: 0; }
-.usage-bar-group.hidden { display: none; }
-
-.usage-bar-label {
+/* --- Plan usage link --- */
+.usage-external-link {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 4px;
-  color: var(--text-secondary);
-  font-size: 11px;
-}
-
-.usage-bar-pct {
-  font-family: "SF Mono", Menlo, Monaco, monospace;
-  font-weight: 600;
-  font-size: 11px;
-}
-
-.usage-bar-track {
-  height: 6px;
-  background: var(--input-bg);
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: 6px;
   border: 1px solid var(--border-subtle);
-  border-radius: 3px;
-  overflow: hidden;
+  background: var(--input-bg);
+  color: var(--text-secondary);
+  font-size: 12px;
+  text-decoration: none;
+  transition: background 0.15s, color 0.15s;
 }
-
-.usage-bar-fill {
-  height: 100%;
-  border-radius: 3px;
-  background: var(--accent);
-  transition: width 0.4s ease;
-  min-width: 0;
+.usage-external-link:hover {
+  background: var(--hover-bg);
+  color: var(--text-primary);
 }
-
-.usage-bar-fill.warn { background: var(--warning, #E5A84B); }
-.usage-bar-fill.critical { background: var(--error); }
-.usage-bar-fill-extra { background: var(--text-dimmer); }
-
-.usage-bar-reset {
-  font-size: 10px;
-  color: var(--text-muted);
-  margin-top: 2px;
+.usage-external-link svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
 }
 
 .usage-divider {
@@ -580,31 +523,6 @@
   font-weight: 500;
 }
 
-/* --- Usage FAB --- */
-#usage-fab {
-  position: fixed;
-  bottom: calc(var(--safe-bottom, 0px) + 16px);
-  right: 16px;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 1px solid var(--border);
-  background: var(--bg-alt);
-  color: var(--text-muted);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  z-index: 90;
-  transition: color 0.15s, background 0.15s, border-color 0.15s;
-}
-
-#usage-fab.hidden { display: none; }
-#usage-fab .lucide { width: 18px; height: 18px; }
-#usage-fab:hover { color: var(--text); border-color: var(--text-dimmer); }
-#usage-fab.active { color: var(--accent); border-color: var(--accent); }
-
 @media (max-width: 768px) {
   #usage-panel {
     top: auto;
@@ -614,8 +532,6 @@
     width: auto;
     max-height: 60vh;
   }
-  #usage-fab { display: none !important; }
-  #usage-header-btn:not(.hidden) { display: flex; }
 }
 
 .status-dot.connected { background: var(--success); }

package/lib/public/index.html

@@ -80,9 +80,6 @@
         <i data-lucide="ellipsis" style="width:14px;height:14px"></i>
       </button>
       <div id="sidebar-footer-menu" class="hidden">
-        <button class="sidebar-menu-item" id="footer-usage">
-          <i data-lucide="gauge"></i> <span>Usage</span>
-        </button>
         <a class="sidebar-menu-item" href="https://github.com/chadbyte/claude-relay" target="_blank" rel="noopener">
           <i data-lucide="github"></i> <span>GitHub</span>
         </a>
@@ -125,7 +122,6 @@
             </label>
           </div>
         </div>
-        <button id="usage-header-btn" class="hidden" title="Usage"><i data-lucide="dollar-sign"></i></button>
         <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
         <button id="qr-btn" title="Share"><i data-lucide="share"></i></button>
         <div id="qr-overlay" class="hidden">
@@ -173,33 +169,11 @@
         <button id="usage-panel-close" aria-label="Close"><i data-lucide="x"></i></button>
       </div>
       <div class="usage-panel-body">
-        <div id="usage-rate-limits">
-          <div id="usage-loading" class="usage-loading">Loading...</div>
-          <div id="usage-error" class="usage-error hidden"></div>
-          <div id="usage-bars" class="hidden">
-            <div class="usage-bar-group" id="usage-bar-session">
-              <div class="usage-bar-label"><span>Current session</span><span class="usage-bar-pct" id="usage-pct-session"></span></div>
-              <div class="usage-bar-track"><div class="usage-bar-fill" id="usage-fill-session"></div></div>
-              <div class="usage-bar-reset" id="usage-reset-session"></div>
-            </div>
-            <div class="usage-bar-group" id="usage-bar-weekly">
-              <div class="usage-bar-label"><span>Current week (all models)</span><span class="usage-bar-pct" id="usage-pct-weekly"></span></div>
-              <div class="usage-bar-track"><div class="usage-bar-fill" id="usage-fill-weekly"></div></div>
-              <div class="usage-bar-reset" id="usage-reset-weekly"></div>
-            </div>
-            <div class="usage-bar-group" id="usage-bar-sonnet">
-              <div class="usage-bar-label"><span>Current week (Sonnet only)</span><span class="usage-bar-pct" id="usage-pct-sonnet"></span></div>
-              <div class="usage-bar-track"><div class="usage-bar-fill" id="usage-fill-sonnet"></div></div>
-              <div class="usage-bar-reset" id="usage-reset-sonnet"></div>
-            </div>
-            <div class="usage-bar-group hidden" id="usage-bar-extra">
-              <div class="usage-bar-label"><span>Extra usage</span><span class="usage-bar-pct" id="usage-pct-extra"></span></div>
-              <div class="usage-bar-track"><div class="usage-bar-fill usage-bar-fill-extra" id="usage-fill-extra"></div></div>
-              <div class="usage-bar-reset" id="usage-reset-extra"></div>
-            </div>
-          </div>
-        </div>
-        <div class="usage-divider" id="usage-session-divider"></div>
+        <a href="https://claude.ai/settings/usage" target="_blank" rel="noopener" class="usage-external-link">
+          <span>Check plan usage on claude.ai</span>
+          <i data-lucide="external-link"></i>
+        </a>
+        <div class="usage-divider"></div>
         <div class="usage-section-label">Session</div>
         <div class="usage-row"><span class="usage-label">Cost</span><span id="usage-cost" class="usage-value">$0.0000</span></div>
         <div class="usage-row"><span class="usage-label">Input tokens</span><span id="usage-input" class="usage-value">0</span></div>
@@ -211,7 +185,6 @@
     </div>
     <div id="todo-sticky" class="hidden"></div>
     <button id="new-msg-btn" class="hidden" aria-label="Scroll to bottom"></button>
-    <button id="usage-fab" class="hidden" aria-label="Usage"><i data-lucide="gauge"></i></button>
     <div id="input-area">
       <div id="input-wrapper">
         <div id="slash-menu"></div>

package/lib/public/modules/notifications.js

@@ -137,7 +137,6 @@ export function initNotifications(_ctx) {
     var footerBtn = $("sidebar-footer-btn");
     var footerMenu = $("sidebar-footer-menu");
     var footerUpdateCheck = $("footer-update-check");
-    var footerUsage = $("footer-usage");
     if (!footerBtn || !footerMenu) return;
 
     footerBtn.addEventListener("click", function (e) {
@@ -151,14 +150,6 @@ export function initNotifications(_ctx) {
       }
     });
 
-    if (footerUsage && ctx.toggleUsagePanel) {
-      footerUsage.addEventListener("click", function (e) {
-        e.stopPropagation();
-        footerMenu.classList.add("hidden");
-        ctx.toggleUsagePanel();
-      });
-    }
-
     function setUpdateIcon(name, spin) {
       var el = footerUpdateCheck.querySelector(".lucide, [data-lucide]");
       if (!el) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-relay",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Web UI for Claude Code. Any device. Push notifications.",
   "bin": {
     "claude-relay": "./bin/cli.js"

package/lib/usage.js

@@ -1,90 +0,0 @@
-var os = require("os");
-var path = require("path");
-var fs = require("fs");
-var { execFileSync } = require("child_process");
-var https = require("https");
-
-var BASE_API_URL = "https://api.anthropic.com";
-
-function readOAuthToken() {
-  // Priority 1: env var override
-  if (process.env.CLAUDE_CODE_OAUTH_TOKEN) {
-    return process.env.CLAUDE_CODE_OAUTH_TOKEN;
-  }
-
-  // Priority 2: macOS keychain
-  if (process.platform === "darwin") {
-    try {
-      var user = os.userInfo().username;
-      var data = execFileSync("security", [
-        "find-generic-password", "-a", user, "-w", "-s", "Claude Code-credentials"
-      ], { encoding: "utf8", timeout: 5000 }).trim();
-      if (data) {
-        var parsed = JSON.parse(data);
-        if (parsed.claudeAiOauth && parsed.claudeAiOauth.accessToken) {
-          return parsed.claudeAiOauth.accessToken;
-        }
-      }
-    } catch (e) { /* fall through */ }
-  }
-
-  // Priority 3: plaintext credentials file
-  var configDir = process.env.CLAUDE_CONFIG_DIR || path.join(os.homedir(), ".claude");
-  var credFile = path.join(configDir, ".credentials.json");
-  try {
-    var content = fs.readFileSync(credFile, "utf8");
-    var parsed = JSON.parse(content);
-    if (parsed.claudeAiOauth && parsed.claudeAiOauth.accessToken) {
-      return parsed.claudeAiOauth.accessToken;
-    }
-  } catch (e) { /* fall through */ }
-
-  return null;
-}
-
-function fetchUsageData() {
-  return new Promise(function (resolve, reject) {
-    var token = readOAuthToken();
-    if (!token) {
-      reject(new Error("No OAuth token available"));
-      return;
-    }
-
-    var url = new URL(BASE_API_URL + "/api/oauth/usage");
-    var options = {
-      hostname: url.hostname,
-      port: url.port || 443,
-      path: url.pathname,
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        "Authorization": "Bearer " + token,
-        "anthropic-beta": "oauth-2025-04-20",
-        "User-Agent": "claude-code/2.0.0",
-      },
-      timeout: 5000,
-    };
-
-    var req = https.request(options, function (res) {
-      var body = "";
-      res.on("data", function (chunk) { body += chunk; });
-      res.on("end", function () {
-        if (res.statusCode !== 200) {
-          reject(new Error("Usage API returned " + res.statusCode));
-          return;
-        }
-        try {
-          resolve(JSON.parse(body));
-        } catch (e) {
-          reject(new Error("Invalid JSON from usage API"));
-        }
-      });
-    });
-
-    req.on("error", function (err) { reject(err); });
-    req.on("timeout", function () { req.destroy(); reject(new Error("Usage API timeout")); });
-    req.end();
-  });
-}
-
-module.exports = { fetchUsageData: fetchUsageData };