claude-relay 2.2.1 → 2.2.3

package/bin/cli.js

@@ -312,6 +312,33 @@ function getLocalIP() {
 }
 
 // --- Certs ---
+function isRoutableIP(addr) {
+  if (addr.startsWith("10.")) return true;
+  if (addr.startsWith("192.168.")) return true;
+  if (addr.startsWith("100.")) {
+    var second = parseInt(addr.split(".")[1], 10);
+    return second >= 64 && second <= 127; // CGNAT (Tailscale)
+  }
+  if (addr.startsWith("172.")) {
+    var second = parseInt(addr.split(".")[1], 10);
+    return second >= 16 && second <= 31;
+  }
+  return false;
+}
+
+function getAllIPs() {
+  var ips = [];
+  var ifaces = os.networkInterfaces();
+  for (var addrs of Object.values(ifaces)) {
+    for (var j = 0; j < addrs.length; j++) {
+      if (addrs[j].family === "IPv4" && !addrs[j].internal && isRoutableIP(addrs[j].address)) {
+        ips.push(addrs[j].address);
+      }
+    }
+  }
+  return ips;
+}
+
 function ensureCerts(ip) {
   var homeDir = os.homedir();
   var certDir = path.join(homeDir, ".claude-relay", "certs");
@@ -336,21 +363,29 @@ function ensureCerts(ip) {
     if (!fs.existsSync(caRoot)) caRoot = null;
   } catch (e) {}
 
+  // Collect all IPv4 addresses (Tailscale + LAN)
+  var allIPs = getAllIPs();
+
   if (fs.existsSync(keyPath) && fs.existsSync(certPath)) {
     var needRegen = false;
-    if (ip && ip !== "localhost") {
-      try {
-        var certText = execFileSync("openssl", ["x509", "-in", certPath, "-text", "-noout"], { encoding: "utf8" });
-        if (certText.indexOf(ip) === -1) needRegen = true;
-      } catch (e) {}
-    }
+    try {
+      var certText = execFileSync("openssl", ["x509", "-in", certPath, "-text", "-noout"], { encoding: "utf8" });
+      for (var i = 0; i < allIPs.length; i++) {
+        if (certText.indexOf(allIPs[i]) === -1) {
+          needRegen = true;
+          break;
+        }
+      }
+    } catch (e) { needRegen = true; }
     if (!needRegen) return { key: keyPath, cert: certPath, caRoot: caRoot };
   }
 
   fs.mkdirSync(certDir, { recursive: true });
 
   var domains = ["localhost", "127.0.0.1", "::1"];
-  if (ip && ip !== "localhost") domains.push(ip);
+  for (var i = 0; i < allIPs.length; i++) {
+    if (domains.indexOf(allIPs[i]) === -1) domains.push(allIPs[i]);
+  }
 
   try {
     execSync(
@@ -1435,22 +1470,6 @@ function showSetupGuide(config, ip, goBack) {
   var wantRemote = false;
   var wantPush = false;
 
-  // If everything is already set up, skip straight to QR
-  var tsReady = getTailscaleIP() !== null;
-  var mcReady = hasMkcert();
-  if (tsReady && mcReady && config.tls) {
-    console.clear();
-    printLogo();
-    log("");
-    log(sym.pointer + "  " + a.bold + "Setup Notifications" + a.reset);
-    log(sym.bar);
-    log(sym.done + "  " + a.green + "Tailscale" + a.reset + a.dim + " · " + getTailscaleIP() + a.reset);
-    log(sym.done + "  " + a.green + "HTTPS" + a.reset + a.dim + " · mkcert installed" + a.reset);
-    log(sym.bar);
-    showSetupQR();
-    return;
-  }
-
   console.clear();
   printLogo();
   log("");
@@ -1564,10 +1583,19 @@ function showSetupGuide(config, ip, goBack) {
 
   function showSetupQR() {
     var tsIP = getTailscaleIP();
+    var lanIP = null;
+    if (!wantRemote) {
+      var allIPs = getAllIPs();
+      for (var j = 0; j < allIPs.length; j++) {
+        if (!allIPs[j].startsWith("100.")) { lanIP = allIPs[j]; break; }
+      }
+    }
+    var setupIP = wantRemote ? (tsIP || ip) : (lanIP || ip);
+    var setupQuery = wantRemote ? "" : "?mode=lan";
     // Always use HTTP onboarding URL for QR/setup when TLS is active
     var setupUrl = config.tls
-      ? "http://" + (tsIP || ip) + ":" + (config.port + 1) + "/setup"
-      : "http://" + (tsIP || ip) + ":" + config.port + "/setup";
+      ? "http://" + setupIP + ":" + (config.port + 1) + "/setup" + setupQuery
+      : "http://" + setupIP + ":" + config.port + "/setup" + setupQuery;
     log(sym.pointer + "  " + a.bold + "Continue on your device" + a.reset);
     log(sym.bar + "  " + a.dim + "Scan the QR code or open:" + a.reset);
     log(sym.bar + "  " + a.bold + setupUrl + a.reset);
@@ -1576,7 +1604,7 @@ function showSetupGuide(config, ip, goBack) {
       var lines = code.split("\n").map(function (l) { return "  " + sym.bar + "  " + l; }).join("\n");
       console.log(lines);
       log(sym.bar);
-      if (tsIP) {
+      if (wantRemote) {
         log(sym.bar + "  " + a.dim + "Can't connect? Make sure Tailscale is installed on your phone too." + a.reset);
       } else {
         log(sym.bar + "  " + a.dim + "Can't connect? Your phone must be on the same Wi-Fi network." + a.reset);

package/lib/pages.js

@@ -40,7 +40,7 @@ function pinPageHtml() {
     '</script></div></body></html>';
 }
 
-function setupPageHtml(httpsUrl, httpUrl, hasCert) {
+function setupPageHtml(httpsUrl, httpUrl, hasCert, lanMode) {
   return `<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
@@ -195,6 +195,7 @@ h1{color:#DA7756;font-size:22px;margin:0 0 4px;text-align:center}
   <div class="step-desc">Install Claude Relay as an app for quick access and a full-screen experience.</div>
 
   <div class="platform-ios">
+    <div class="check-status warn">On iOS, push notifications only work from the installed app. This step is required.</div>
     <div id="ios-not-safari" class="check-status warn" style="display:none">You must use <b>Safari</b> to install. Open this page in Safari first.</div>
     <div id="ios-safari-steps">
       <div class="instruction"><div class="inst-num">1</div>
@@ -237,6 +238,7 @@ h1{color:#DA7756;font-size:22px;margin:0 0 4px;text-align:center}
   </div>
 
   <div id="pwa-status" class="check-status pending">After installing, open Claude Relay from your home screen to continue setup.</div>
+  <button class="skip-link" id="pwa-skip" onclick="nextStep()" style="display:none">Skip for now</button>
 </div>
 
 <!-- Step 3: Push Notifications -->
@@ -270,6 +272,7 @@ h1{color:#DA7756;font-size:22px;margin:0 0 4px;text-align:center}
 var httpsUrl = ${JSON.stringify(httpsUrl)};
 var httpUrl = ${JSON.stringify(httpUrl)};
 var hasCert = ${hasCert ? 'true' : 'false'};
+var lanMode = ${lanMode ? 'true' : 'false'};
 var isHttps = location.protocol === "https:";
 var ua = navigator.userAgent;
 var isIOS = /iPhone|iPad|iPod/.test(ua);
@@ -326,10 +329,17 @@ if (isStandalone && localStorage.getItem("setup-pending")) {
 
 function buildSteps(hasPushSub) {
   steps = [];
-  if (!isTailscale && !isLocal) steps.push("tailscale");
+  if (!isTailscale && !isLocal && !lanMode) steps.push("tailscale");
   if (hasCert && !isHttps) steps.push("cert");
-  if (!isStandalone) steps.push("pwa");
-  if ((isHttps || isLocal) && !hasPushSub) steps.push("push");
+  if (isAndroid) {
+    // Android: push first (works in browser), then PWA as optional
+    if ((isHttps || isLocal) && !hasPushSub) steps.push("push");
+    if (!isStandalone) steps.push("pwa");
+  } else {
+    // iOS: PWA required for push, so install first
+    if (!isStandalone) steps.push("pwa");
+    if ((isHttps || isLocal) && !hasPushSub) steps.push("push");
+  }
   steps.push("done");
 
   // Trigger HTTPS check now that steps are built
@@ -350,6 +360,14 @@ function buildSteps(hasPushSub) {
     localStorage.setItem("setup-pending", String(stepsBeforePwa + 1));
   }
 
+  // Android: PWA is optional, show skip button and update text
+  if (isAndroid && steps.indexOf("pwa") !== -1) {
+    var pwaSkip = document.getElementById("pwa-skip");
+    var pwaStatus = document.getElementById("pwa-status");
+    if (pwaSkip) pwaSkip.style.display = "block";
+    if (pwaStatus) pwaStatus.textContent = "Optional: install for quick access and full-screen experience.";
+  }
+
   // Push: show warning if not on HTTPS
   if (!isHttps && !isLocal) {
     pushBtn.style.display = "none";
@@ -393,7 +411,7 @@ function showStep(idx) {
 function nextStep() {
   // After cert step on HTTP, redirect to HTTPS for remaining steps
   if (!isHttps && steps[currentStep] === "cert") {
-    location.replace(httpsUrl + "/setup");
+    location.replace(httpsUrl + "/setup" + (lanMode ? "?mode=lan" : ""));
     return;
   }
   if (currentStep < steps.length - 1) showStep(currentStep + 1);
@@ -616,7 +634,7 @@ if (!isHttps && !isLocal) {
     var ac = new AbortController();
     setTimeout(function() { ac.abort(); }, 3000);
     fetch(info.httpsUrl + "/info", { signal: ac.signal, mode: "no-cors" })
-      .then(function() { location.replace(info.httpsUrl + "/setup"); })
+      .then(function() { location.replace(info.httpsUrl + "/setup" + (lanMode ? "?mode=lan" : "")); })
       .catch(function() { init(); });
   }).catch(function() { init(); });
 } else {

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/lib/server.js

@@ -202,16 +202,17 @@ function createServer(opts) {
     }
 
     // Setup page
-    if (req.url === "/setup" && req.method === "GET") {
+    if (fullUrl === "/setup" && req.method === "GET") {
       var host = req.headers.host || "localhost";
       var hostname = host.split(":")[0];
       var protocol = tlsOptions ? "https" : "http";
       var setupUrl = protocol + "://" + hostname + ":" + portNum;
+      var lanMode = /[?&]mode=lan/.test(req.url);
       res.writeHead(200, {
         "Content-Type": "text/html; charset=utf-8",
         "Access-Control-Allow-Origin": "*",
       });
-      res.end(setupPageHtml(setupUrl, setupUrl, !!caContent));
+      res.end(setupPageHtml(setupUrl, setupUrl, !!caContent, lanMode));
       return;
     }
 
@@ -364,8 +365,9 @@ function createServer(opts) {
         var hostname = host.split(":")[0];
         var httpsSetupUrl = "https://" + hostname + ":" + portNum;
         var httpSetupUrl = "http://" + hostname + ":" + (portNum + 1);
+        var lanMode = /[?&]mode=lan/.test(req.url);
         res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
-        res.end(setupPageHtml(httpsSetupUrl, httpSetupUrl, !!caContent));
+        res.end(setupPageHtml(httpsSetupUrl, httpSetupUrl, !!caContent, lanMode));
         return;
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-relay",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "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 };