claude-relay 2.2.0 → 2.2.2

package/README.md

@@ -185,6 +185,10 @@ npx claude-relay -p 8080      # Specify port
 npx claude-relay --no-https   # Disable HTTPS
 npx claude-relay --no-update  # Skip update check
 npx claude-relay --debug      # Enable debug panel
+npx claude-relay --add .      # Add current directory to running daemon
+npx claude-relay --add /path  # Add a project by path
+npx claude-relay --remove .   # Remove a project
+npx claude-relay --list       # List registered projects
 ```
 
 ## Requirements

package/bin/cli.js

@@ -18,6 +18,9 @@ var debugMode = false;
 var autoYes = false;
 var cliPin = null;
 var shutdownMode = false;
+var addPath = null;
+var removePath = null;
+var listMode = false;
 
 for (var i = 0; i < args.length; i++) {
   if (args[i] === "-p" || args[i] === "--port") {
@@ -40,8 +43,19 @@ for (var i = 0; i < args.length; i++) {
     i++;
   } else if (args[i] === "--shutdown") {
     shutdownMode = true;
+  } else if (args[i] === "--add") {
+    addPath = args[i + 1] || ".";
+    i++;
+  } else if (args[i] === "--remove") {
+    removePath = args[i + 1] || null;
+    i++;
+  } else if (args[i] === "--list") {
+    listMode = true;
   } else if (args[i] === "-h" || args[i] === "--help") {
     console.log("Usage: claude-relay [-p|--port <port>] [--no-https] [--no-update] [--debug] [-y|--yes] [--pin <pin>] [--shutdown]");
+    console.log("       claude-relay --add <path>     Add a project to the running daemon");
+    console.log("       claude-relay --remove <path>  Remove a project from the running daemon");
+    console.log("       claude-relay --list            List registered projects");
     console.log("");
     console.log("Options:");
     console.log("  -p, --port <port>  Port to listen on (default: 2633)");
@@ -51,6 +65,9 @@ for (var i = 0; i < args.length; i++) {
     console.log("  -y, --yes          Skip interactive prompts (accept defaults)");
     console.log("  --pin <pin>        Set 6-digit PIN (use with --yes)");
     console.log("  --shutdown         Shut down the running relay daemon");
+    console.log("  --add <path>       Add a project directory (use '.' for current)");
+    console.log("  --remove <path>    Remove a project directory");
+    console.log("  --list             List all registered projects");
     process.exit(0);
   }
 }
@@ -75,6 +92,93 @@ if (shutdownMode) {
   return;
 }
 
+// --- Handle --add before anything else ---
+if (addPath !== null) {
+  var absAdd = path.resolve(addPath);
+  try {
+    var stat = fs.statSync(absAdd);
+    if (!stat.isDirectory()) {
+      console.error("Not a directory: " + absAdd);
+      process.exit(1);
+    }
+  } catch (e) {
+    console.error("Directory not found: " + absAdd);
+    process.exit(1);
+  }
+  var addConfig = loadConfig();
+  isDaemonAliveAsync(addConfig).then(function (alive) {
+    if (!alive) {
+      console.error("No running daemon. Start with: npx claude-relay");
+      process.exit(1);
+    }
+    sendIPCCommand(socketPath(), { cmd: "add_project", path: absAdd }).then(function (res) {
+      if (res.ok) {
+        if (res.existing) {
+          console.log("Already registered: " + res.slug);
+        } else {
+          console.log("Added: " + res.slug + " \u2192 " + absAdd);
+        }
+        process.exit(0);
+      } else {
+        console.error("Failed: " + (res.error || "unknown error"));
+        process.exit(1);
+      }
+    });
+  });
+  return;
+}
+
+// --- Handle --remove before anything else ---
+if (removePath !== null) {
+  var absRemove = path.resolve(removePath);
+  var removeConfig = loadConfig();
+  isDaemonAliveAsync(removeConfig).then(function (alive) {
+    if (!alive) {
+      console.error("No running daemon. Start with: npx claude-relay");
+      process.exit(1);
+    }
+    sendIPCCommand(socketPath(), { cmd: "remove_project", path: absRemove }).then(function (res) {
+      if (res.ok) {
+        console.log("Removed: " + path.basename(absRemove));
+        process.exit(0);
+      } else {
+        console.error("Failed: " + (res.error || "project not found"));
+        process.exit(1);
+      }
+    });
+  });
+  return;
+}
+
+// --- Handle --list before anything else ---
+if (listMode) {
+  var listConfig = loadConfig();
+  isDaemonAliveAsync(listConfig).then(function (alive) {
+    if (!alive) {
+      console.error("No running daemon. Start with: npx claude-relay");
+      process.exit(1);
+    }
+    sendIPCCommand(socketPath(), { cmd: "get_status" }).then(function (res) {
+      if (!res.ok || !res.projects || res.projects.length === 0) {
+        console.log("No projects registered.");
+        process.exit(0);
+        return;
+      }
+      console.log("Projects (" + res.projects.length + "):\n");
+      for (var p = 0; p < res.projects.length; p++) {
+        var proj = res.projects[p];
+        var label = "  " + proj.slug;
+        if (proj.title) label += " (" + proj.title + ")";
+        label += "\n    " + proj.path;
+        console.log(label);
+      }
+      console.log("");
+      process.exit(0);
+    });
+  });
+  return;
+}
+
 var cwd = process.cwd();
 
 // --- ANSI helpers ---

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) {
@@ -1623,6 +1478,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     sessionListEl: sessionListEl,
     scrollToBottom: scrollToBottom,
     basePath: basePath,
+    toggleUsagePanel: toggleUsagePanel,
   });
 
   // --- QR code ---

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/css/messages.css

@@ -46,6 +46,21 @@
 #todo-sticky .todo-sticky-chevron { display: inline-flex; color: var(--text-muted); transition: transform 0.2s; }
 #todo-sticky .todo-sticky-chevron .lucide { width: 12px; height: 12px; }
 #todo-sticky.collapsed .todo-sticky-chevron { transform: rotate(-90deg); }
+#todo-sticky .todo-sticky-active { display: none; }
+#todo-sticky.collapsed .todo-sticky-active {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+  font-size: 11px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#todo-sticky.collapsed .todo-sticky-active .lucide { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
+#todo-sticky.collapsed .todo-sticky-title { flex: none; }
 
 #todo-sticky .todo-sticky-progress { height: 2px; background: var(--border); }
 #todo-sticky .todo-sticky-progress-bar { height: 100%; background: var(--success); transition: width 0.3s ease; }

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/public/modules/tools.js

@@ -693,10 +693,16 @@ function updateTodoSticky() {
   var pct = Math.round(completed / todoItems.length * 100);
   var wasCollapsed = stickyEl.classList.contains("collapsed");
 
+  var inProgressItem = null;
+  for (var j = 0; j < todoItems.length; j++) {
+    if (todoItems[j].status === "in_progress") { inProgressItem = todoItems[j]; break; }
+  }
+
   var html = '<div class="todo-sticky-inner">' +
     '<div class="todo-sticky-header">' +
     '<span class="todo-sticky-icon">' + iconHtml("list-checks") + '</span>' +
     '<span class="todo-sticky-title">Tasks</span>' +
+    (inProgressItem ? '<span class="todo-sticky-active">' + iconHtml("loader", "icon-spin") + ' ' + escapeHtml(inProgressItem.activeForm || inProgressItem.content) + '</span>' : '') +
     '<span class="todo-sticky-count">' + completed + '/' + todoItems.length + '</span>' +
     '<span class="todo-sticky-chevron">' + iconHtml("chevron-down") + '</span>' +
     '</div>' +

package/package.json

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