clay-server 2.26.0-beta.4 → 2.26.0-beta.5

package/lib/public/app.js

@@ -2599,6 +2599,9 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   var contextMiniLabel = $("context-mini-label");
   var contextData = { contextWindow: 0, maxOutputTokens: 0, model: "-", cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
   var headerContextEl = null;
+  var richContextUsage = null;
+  var ctxPopoverEl = null;
+  var ctxPopoverVisible = false;
 
   // Known context window sizes per model (fallback when SDK omits feature flag)
   var KNOWN_CONTEXT_WINDOWS = {
@@ -2646,6 +2649,14 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
         headerContextEl.className = "header-context";
         headerContextEl.innerHTML = '<div class="header-context-bar"><div class="header-context-fill"></div></div><span class="header-context-label"></span>';
         statusArea.insertBefore(headerContextEl, statusArea.firstChild);
+        headerContextEl.addEventListener("mouseenter", function() {
+          if (richContextUsage) {
+            showCtxPopover();
+          }
+        });
+        headerContextEl.addEventListener("mouseleave", function() {
+          ctxHoverTimer = setTimeout(hideCtxPopover, 120);
+        });
       }
       if (headerContextEl) {
         var hFill = headerContextEl.querySelector(".header-context-fill");
@@ -2653,7 +2664,12 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
         hFill.style.width = pct.toFixed(1) + "%";
         hFill.className = "header-context-fill" + cls;
         hLabel.textContent = pct.toFixed(0) + "%";
-        headerContextEl.dataset.tip = "Context window " + pct.toFixed(0) + "% used (" + formatTokens(used) + " / " + formatTokens(win) + " tokens)";
+        // Use data-tip as fallback when rich data is not yet loaded
+        if (richContextUsage) {
+          headerContextEl.removeAttribute("data-tip");
+        } else {
+          headerContextEl.dataset.tip = "Context window " + pct.toFixed(0) + "% used (" + formatTokens(used) + " / " + formatTokens(win) + " tokens)";
+        }
       }
     }
     contextUsedEl.textContent = formatTokens(used);
@@ -2718,9 +2734,158 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
 
   function resetContextData() {
     contextData = { contextWindow: 0, maxOutputTokens: 0, model: "-", cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
+    richContextUsage = null;
+    hideCtxPopover();
     updateContextPanel();
   }
 
+  // --- Rich context usage popover ---
+
+  var ctxHoverTimer = null;
+
+  function ensureCtxPopover() {
+    if (ctxPopoverEl) return;
+    ctxPopoverEl = document.createElement("div");
+    ctxPopoverEl.className = "context-usage-popover hidden";
+    // Keep popover open when hovering over it
+    ctxPopoverEl.addEventListener("mouseenter", function() {
+      if (ctxHoverTimer) { clearTimeout(ctxHoverTimer); ctxHoverTimer = null; }
+    });
+    ctxPopoverEl.addEventListener("mouseleave", function() {
+      hideCtxPopover();
+    });
+  }
+
+  function showCtxPopover() {
+    if (!headerContextEl || !richContextUsage) return;
+    if (ctxHoverTimer) { clearTimeout(ctxHoverTimer); ctxHoverTimer = null; }
+    ensureCtxPopover();
+    headerContextEl.appendChild(ctxPopoverEl);
+    renderCtxPopover();
+    ctxPopoverEl.classList.remove("hidden");
+    ctxPopoverVisible = true;
+  }
+
+  function hideCtxPopover() {
+    if (!ctxPopoverEl) return;
+    ctxPopoverEl.classList.add("hidden");
+    ctxPopoverVisible = false;
+  }
+
+  // Categories to hide from the legend (noise, not actionable)
+  var CTX_HIDDEN_CATS = { "Free space": 1, "Autocompact buffer": 1 };
+
+  function renderCtxPopover() {
+    if (!ctxPopoverEl || !richContextUsage) return;
+    var d = richContextUsage;
+    var cats = d.categories || [];
+    var total = d.totalTokens || 0;
+    var max = d.maxTokens || 0;
+    var pct = d.percentage != null ? d.percentage : (max > 0 ? (total / max) * 100 : 0);
+
+    var html = "";
+
+    // Header
+    html += '<div class="ctx-pop-header">';
+    html += '<span class="ctx-pop-model">' + escHtml(d.model || contextData.model || "-") + '</span>';
+    html += '<span class="ctx-pop-pct">' + pct.toFixed(0) + '%';
+    html += '<span class="ctx-pop-tokens">' + formatTokens(total) + ' / ' + formatTokens(max) + '</span>';
+    html += '</span>';
+    html += '</div>';
+
+    // Category emoji map
+    var CTX_EMOJI = {
+      "System prompt": "\ud83d\udcdc", "System tools": "\ud83d\udee0\ufe0f",
+      "Memory files": "\ud83d\udcc1", "Skills": "\u26a1", "Messages": "\ud83d\udcac",
+      "MCP tools": "\ud83d\udd0c", "Agents": "\ud83e\udd16", "Deferred tools": "\ud83d\udce6"
+    };
+
+    // Stacked bar
+    if (cats.length > 0 && max > 0) {
+      html += '<div class="ctx-cat-bar">';
+      for (var i = 0; i < cats.length; i++) {
+        var cat = cats[i];
+        if (cat.isDeferred || !cat.tokens || CTX_HIDDEN_CATS[cat.name]) continue;
+        var w = Math.max(0.3, (cat.tokens / max) * 100);
+        html += '<div style="width:' + w.toFixed(2) + '%;background:' + escHtml(cat.color) + '"></div>';
+      }
+      html += '</div>';
+
+      // Legend
+      html += '<div class="ctx-cat-legend">';
+      for (var j = 0; j < cats.length; j++) {
+        var c = cats[j];
+        if (c.isDeferred || !c.tokens || CTX_HIDDEN_CATS[c.name]) continue;
+        var emoji = CTX_EMOJI[c.name] || "\ud83d\udcca";
+        html += '<div class="ctx-cat-item">';
+        html += '<span class="ctx-cat-name">' + em(emoji) + ' ' + escHtml(c.name) + '</span>';
+        html += '<span class="ctx-cat-value">' + formatTokens(c.tokens) + '</span>';
+        html += '</div>';
+      }
+      html += '</div>';
+    }
+
+    // Message breakdown
+    var mb = d.messageBreakdown;
+    if (mb) {
+      html += '<div class="ctx-pop-divider"></div>';
+      html += '<div class="ctx-pop-section-label">' + em("\ud83d\udcac") + ' Messages</div>';
+      if (mb.userMessageTokens) {
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udc64") + ' User</span><span class="ctx-pop-row-value">' + formatTokens(mb.userMessageTokens) + '</span></div>';
+      }
+      if (mb.assistantMessageTokens) {
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83e\udd16") + ' Assistant</span><span class="ctx-pop-row-value">' + formatTokens(mb.assistantMessageTokens) + '</span></div>';
+      }
+      if (mb.toolCallTokens) {
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udee0\ufe0f") + ' Tool calls</span><span class="ctx-pop-row-value">' + formatTokens(mb.toolCallTokens) + '</span></div>';
+      }
+      if (mb.toolResultTokens) {
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udccb") + ' Tool results</span><span class="ctx-pop-row-value">' + formatTokens(mb.toolResultTokens) + '</span></div>';
+      }
+      if (mb.attachmentTokens) {
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udcce") + ' Attachments</span><span class="ctx-pop-row-value">' + formatTokens(mb.attachmentTokens) + '</span></div>';
+      }
+    }
+
+    // Memory files
+    var mf = d.memoryFiles;
+    if (mf && mf.length > 0) {
+      html += '<div class="ctx-pop-divider"></div>';
+      html += '<div class="ctx-pop-section-label">' + em("\ud83d\udcc1") + ' Memory Files</div>';
+      var baseCount = {};
+      for (var mc = 0; mc < mf.length; mc++) {
+        var bn = mf[mc].path.split("/").pop() || mf[mc].path;
+        baseCount[bn] = (baseCount[bn] || 0) + 1;
+      }
+      for (var mi = 0; mi < mf.length; mi++) {
+        var fpath = mf[mi].path;
+        var fname = fpath.split("/").pop() || fpath;
+        if (baseCount[fname] > 1) {
+          var parts = fpath.split("/");
+          fname = parts.length >= 2 ? parts[parts.length - 2] + "/" + fname : fpath;
+        }
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udcc4") + ' ' + escHtml(fname) + '</span><span class="ctx-pop-row-value">' + formatTokens(mf[mi].tokens) + '</span></div>';
+      }
+    }
+
+    // Auto-compact note
+    if (d.isAutoCompactEnabled && d.autoCompactThreshold) {
+      html += '<div class="ctx-pop-note">' + em("\u267b\ufe0f") + ' Auto-compact at ' + formatTokens(d.autoCompactThreshold) + '</div>';
+    }
+
+    ctxPopoverEl.innerHTML = html;
+  }
+
+  function escHtml(s) {
+    var div = document.createElement("div");
+    div.textContent = s;
+    return div.innerHTML;
+  }
+
+  function em(emoji) {
+    return '<span class="ctx-emoji">' + emoji + '</span>';
+  }
+
   function resetContext() {
     resetContextData();
     // Keep view state, just reset data
@@ -4052,6 +4217,10 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
 
         case "history_done":
           replayingHistory = false;
+          // Restore cached rich context usage BEFORE updateContextPanel runs
+          if (msg.contextUsage) {
+            richContextUsage = msg.contextUsage;
+          }
           // Restore accurate context data from the last result in full history
           if (msg.lastUsage || msg.lastModelUsage) {
             accumulateContext(msg.lastCost, msg.lastUsage, msg.lastModelUsage, msg.lastStreamInputTokens);
@@ -4614,6 +4783,14 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
           accumulateContext(msg.cost, msg.usage, msg.modelUsage, msg.lastStreamInputTokens);
           break;
 
+        case "context_usage":
+          if (msg.data && !replayingHistory) {
+            richContextUsage = msg.data;
+            if (headerContextEl) headerContextEl.removeAttribute("data-tip");
+            if (ctxPopoverVisible) renderCtxPopover();
+          }
+          break;
+
         case "done":
           setActivity(null);
           stopThinking();

package/lib/public/css/title-bar.css

@@ -342,6 +342,7 @@
   gap: 6px;
   width: 80px;
   cursor: default;
+  position: relative;
 }
 
 .header-context-bar {
@@ -370,6 +371,191 @@
   white-space: nowrap;
 }
 
+/* --- Context usage popover --- */
+.context-usage-popover {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: -12px;
+  width: 320px;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 16px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
+  z-index: 200;
+  animation: ctx-popover-in 0.12s ease-out;
+  line-height: 1.5;
+}
+
+.context-usage-popover.hidden { display: none; }
+
+@keyframes ctx-popover-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Header */
+.ctx-pop-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 12px;
+}
+
+.ctx-pop-model {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: "Roboto Mono", monospace;
+}
+
+.ctx-pop-pct {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--text);
+  font-family: "Roboto Mono", monospace;
+  letter-spacing: -0.5px;
+}
+
+.ctx-pop-tokens {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: "Roboto Mono", monospace;
+  margin-left: 6px;
+  font-weight: 400;
+}
+
+/* Stacked category bar */
+.ctx-cat-bar {
+  display: flex;
+  height: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  background: var(--border);
+  margin-bottom: 12px;
+  gap: 1px;
+}
+
+.ctx-cat-bar > div {
+  height: 100%;
+  min-width: 3px;
+  transition: width 0.3s ease;
+  border-radius: 2px;
+}
+
+/* Category legend */
+.ctx-cat-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-bottom: 4px;
+}
+
+.ctx-cat-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font-size: 12px;
+  padding: 3px 0;
+  border-radius: 4px;
+  transition: background 0.1s ease;
+}
+
+.ctx-cat-item:hover {
+  background: rgba(var(--overlay-rgb), 0.03);
+}
+
+.ctx-emoji {
+  display: inline-block;
+  filter: grayscale(1);
+  font-size: 12px;
+  transition: filter 0.15s ease;
+}
+
+.ctx-cat-item:hover .ctx-emoji,
+.ctx-pop-row:hover .ctx-emoji,
+.ctx-pop-note .ctx-emoji {
+  filter: grayscale(0);
+}
+
+.ctx-cat-name {
+  color: var(--text-secondary);
+}
+
+.ctx-cat-value {
+  font-family: "Roboto Mono", monospace;
+  color: var(--text-muted);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Sections */
+.ctx-pop-divider {
+  border: none;
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 10px 0;
+}
+
+.ctx-pop-section-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.8px;
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+.ctx-pop-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  padding: 3px 0;
+  border-radius: 4px;
+  transition: background 0.1s ease;
+}
+
+.ctx-pop-row:hover {
+  background: rgba(var(--overlay-rgb), 0.03);
+}
+
+.ctx-pop-row-label {
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 12px;
+}
+
+.ctx-pop-row-value {
+  font-family: "Roboto Mono", monospace;
+  color: var(--text-muted);
+  font-size: 11px;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.ctx-pop-note {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 10px;
+  text-align: center;
+  padding: 4px 8px;
+  background: var(--border-subtle);
+  border-radius: 4px;
+  font-family: "Roboto Mono", monospace;
+}
+
+@media (max-width: 400px) {
+  .context-usage-popover {
+    width: 260px;
+    right: -8px;
+  }
+}
+
 /* --- Shared pill style for rate limit & fast mode --- */
 .header-rate-limit,
 .header-fast-mode {

package/lib/sdk-bridge.js

@@ -188,6 +188,10 @@ function createSDKBridge(opts) {
     sm.sendAndRecord(session, obj);
   }
 
+  function sendToSession(session, obj) {
+    sm.sendToSession(session, obj);
+  }
+
   function processSDKMessage(session, parsed) {
     // Timing: log key SDK milestones relative to query start
     if (session._queryStartTs) {
@@ -435,6 +439,15 @@ function createSDKBridge(opts) {
       session.isProcessing = false;
       session.rateLimitResetsAt = null; // clear on success
       onProcessingChanged();
+      // Fetch rich context usage breakdown (fire-and-forget, non-blocking)
+      if (session.queryInstance && typeof session.queryInstance.getContextUsage === "function") {
+        session.queryInstance.getContextUsage().then(function(ctxUsage) {
+          session.lastContextUsage = ctxUsage;
+          sendToSession(session, { type: "context_usage", data: ctxUsage });
+        }).catch(function(e) {
+          console.error("[sdk-bridge] getContextUsage failed (non-fatal):", e.message || e);
+        });
+      }
       var lastStreamInput = session.lastStreamInputTokens || null;
       session.lastStreamInputTokens = null;
       sendAndRecord(session, {
@@ -1196,6 +1209,11 @@ function createSDKBridge(opts) {
           });
           break;
 
+        case "context_usage":
+          session.lastContextUsage = msg.data;
+          sendToSession(session, { type: "context_usage", data: msg.data });
+          break;
+
         case "query_done":
           console.log("[sdk-bridge] IPC query_done received, pid=" + (worker.process ? worker.process.pid : "?"));
           // Mark that we received a proper IPC completion, so the exit
@@ -1698,6 +1716,7 @@ function createSDKBridge(opts) {
       for await (var msg of myQueryInstance) {
         processSDKMessage(session, msg);
       }
+      // (getContextUsage moved to processSDKMessage result handler -- fire-and-forget)
       // Stream ended normally after a task stop — no "result" message was sent,
       // so the session is still marked as processing. Send interrupted feedback.
       if (session.isProcessing && session.taskStopRequested) {

package/lib/sdk-worker.js

@@ -351,7 +351,19 @@ async function handleQueryStart(msg) {
       }
       sendToDaemon({ type: "sdk_event", event: event });
     }
-    perf("all events streamed (counts=" + JSON.stringify(eventCounts) + "), sending query_done");
+    perf("all events streamed (counts=" + JSON.stringify(eventCounts) + "), fetching context usage");
+    // Fetch context usage breakdown before queryInstance is cleared
+    try {
+      if (queryInstance && typeof queryInstance.getContextUsage === "function") {
+        var ctxUsage = await queryInstance.getContextUsage();
+        sendToDaemon({ type: "context_usage", data: ctxUsage });
+        perf("context usage sent");
+      }
+    } catch (e) {
+      // Non-fatal: SDK may have already shut down
+      console.error("[sdk-worker] getContextUsage failed (non-fatal):", e.message);
+    }
+    perf("sending query_done");
     sendToDaemon({ type: "query_done" });
   } catch (err) {
     var errMsg = err.message || String(err);

package/lib/sessions.js

@@ -366,7 +366,7 @@ function createSessionManager(opts) {
       }
     }
 
-    _send({ type: "history_done", lastUsage: lastUsage, lastModelUsage: lastModelUsage, lastCost: lastCost, lastStreamInputTokens: lastStreamInputTokens });
+    _send({ type: "history_done", lastUsage: lastUsage, lastModelUsage: lastModelUsage, lastCost: lastCost, lastStreamInputTokens: lastStreamInputTokens, contextUsage: session.lastContextUsage || null });
   }
 
   function switchSession(localId, targetWs, transform) {
@@ -492,6 +492,20 @@ function createSessionManager(opts) {
     sessions.delete(localId);
   }
 
+  function doSendToSession(session, obj) {
+    // Send to active clients without recording to history/disk (ephemeral data)
+    if (sendEach) {
+      var data = JSON.stringify(obj);
+      sendEach(function (ws) {
+        if (ws._clayActiveSession === session.localId && ws.readyState === 1) {
+          ws.send(data);
+        }
+      });
+    } else if (session.localId === activeSessionId) {
+      send(obj);
+    }
+  }
+
   function doSendAndRecord(session, obj) {
     session.history.push(obj);
     appendToSessionFile(session, obj);
@@ -737,6 +751,7 @@ function createSessionManager(opts) {
     saveSessionFile: saveSessionFile,
     appendToSessionFile: appendToSessionFile,
     sendAndRecord: doSendAndRecord,
+    sendToSession: doSendToSession,
     findTurnBoundary: findTurnBoundary,
     replayHistory: replayHistory,
     searchSessions: searchSessions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.26.0-beta.4",
+  "version": "2.26.0-beta.5",
   "description": "Self-hosted Claude Code in your browser. Multi-session, multi-user, push notifications.",
   "bin": {
     "clay-server": "./bin/cli.js",
@@ -36,7 +36,7 @@
   "homepage": "https://github.com/chadbyte/claude-relay#readme",
   "author": "Chad",
   "dependencies": {
-    "@anthropic-ai/claude-agent-sdk": "^0.2.76",
+    "@anthropic-ai/claude-agent-sdk": "^0.2.92",
     "@lydell/node-pty": "^1.2.0-beta.3",
     "nodemailer": "^6.10.1",
     "qrcode-terminal": "^0.12.0",