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

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/public/index.html

@@ -415,6 +415,13 @@
       <div id="input-wrapper">
         <div id="mention-menu"></div>
         <div id="slash-menu"></div>
+        <div id="context-sources-bar">
+          <div id="context-sources-chips"></div>
+          <button id="context-sources-add" type="button" title="Add context source"><i data-lucide="plus"></i><span>Context Sources</span></button>
+          <div id="context-sources-picker" class="hidden">
+            <div class="context-picker-section" id="context-picker-terminals"></div>
+          </div>
+        </div>
         <div id="suggestion-chips" class="hidden"></div>
         <div id="input-row">
           <div id="context-mini" class="hidden">

package/lib/public/modules/context-sources.js

@@ -0,0 +1,226 @@
+// Context Sources — attach terminal output (and future browser tabs) as context for Claude
+
+var ctx = null;
+var activeSourceIds = new Set();
+var terminalList = []; // synced from terminal module's term_list
+
+export function initContextSources(_ctx) {
+  ctx = _ctx;
+
+  var addBtn = document.getElementById("context-sources-add");
+  var picker = document.getElementById("context-sources-picker");
+
+  addBtn.addEventListener("click", function(e) {
+    e.stopPropagation();
+    if (picker.classList.contains("hidden")) {
+      renderPicker();
+      picker.classList.remove("hidden");
+      document.addEventListener("click", closePicker, true);
+    } else {
+      closePicker();
+    }
+  });
+
+  picker.addEventListener("click", function(e) {
+    e.stopPropagation();
+  });
+}
+
+function closePicker() {
+  var picker = document.getElementById("context-sources-picker");
+  picker.classList.add("hidden");
+  document.removeEventListener("click", closePicker, true);
+}
+
+// Restore state from server
+export function handleContextSourcesState(msg) {
+  var saved = msg.active || [];
+  activeSourceIds = new Set(saved);
+  renderChips();
+}
+
+// Save active sources to server
+function saveToServer() {
+  if (ctx && ctx.ws && ctx.connected) {
+    ctx.ws.send(JSON.stringify({
+      type: "context_sources_save",
+      active: Array.from(activeSourceIds)
+    }));
+  }
+}
+
+// Called when term_list arrives from server
+export function updateTerminalList(terminals) {
+  terminalList = terminals || [];
+
+  // Remove active sources that no longer exist
+  var changed = false;
+  for (var id of activeSourceIds) {
+    if (id.startsWith("term:")) {
+      var termId = parseInt(id.split(":")[1], 10);
+      var found = false;
+      for (var i = 0; i < terminalList.length; i++) {
+        if (terminalList[i].id === termId) { found = true; break; }
+      }
+      if (!found) {
+        activeSourceIds.delete(id);
+        changed = true;
+      }
+    }
+  }
+
+  if (changed) saveToServer();
+  renderChips();
+
+  // If picker is open, re-render it
+  var picker = document.getElementById("context-sources-picker");
+  if (!picker.classList.contains("hidden")) {
+    renderPicker();
+  }
+}
+
+function toggleSource(sourceId) {
+  if (activeSourceIds.has(sourceId)) {
+    activeSourceIds.delete(sourceId);
+  } else {
+    activeSourceIds.add(sourceId);
+  }
+  saveToServer();
+  renderChips();
+  renderPicker();
+}
+
+function removeSource(sourceId) {
+  activeSourceIds.delete(sourceId);
+  saveToServer();
+  renderChips();
+
+  var picker = document.getElementById("context-sources-picker");
+  if (!picker.classList.contains("hidden")) {
+    renderPicker();
+  }
+}
+
+function renderChips() {
+  var container = document.getElementById("context-sources-chips");
+  container.innerHTML = "";
+
+  for (var id of activeSourceIds) {
+    var chip = document.createElement("div");
+    chip.className = "context-chip";
+
+    var label = getSourceLabel(id);
+    var iconName = getSourceIcon(id);
+
+    var labelEl = document.createElement("span");
+    labelEl.className = "context-chip-label";
+    labelEl.innerHTML =
+      '<i data-lucide="' + iconName + '"></i>' +
+      '<span>' + escapeHtml(label) + '</span>';
+    chip.appendChild(labelEl);
+
+    var removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.className = "context-chip-remove";
+    removeBtn.title = "Remove";
+    removeBtn.innerHTML = '<i data-lucide="minus"></i>';
+    removeBtn.setAttribute("data-source-id", id);
+    removeBtn.addEventListener("click", function(e) {
+      e.stopPropagation();
+      removeSource(this.getAttribute("data-source-id"));
+      if (typeof lucide !== "undefined") lucide.createIcons();
+    });
+
+    chip.appendChild(removeBtn);
+    container.appendChild(chip);
+  }
+
+  // Update add button label
+  var addBtn = document.getElementById("context-sources-add");
+  var labelSpan = addBtn.querySelector("span");
+  if (activeSourceIds.size > 0) {
+    labelSpan.textContent = "";
+    labelSpan.style.display = "none";
+  } else {
+    labelSpan.textContent = "Context Sources";
+    labelSpan.style.display = "";
+  }
+
+  if (typeof lucide !== "undefined") lucide.createIcons();
+}
+
+function renderPicker() {
+  var section = document.getElementById("context-picker-terminals");
+  section.innerHTML = "";
+
+  var sectionLabel = document.createElement("div");
+  sectionLabel.className = "context-picker-section-label";
+  sectionLabel.textContent = "Terminals";
+  section.appendChild(sectionLabel);
+
+  if (terminalList.length === 0) {
+    var empty = document.createElement("div");
+    empty.className = "context-picker-empty";
+    empty.textContent = "No terminals open";
+    section.appendChild(empty);
+    return;
+  }
+
+  for (var i = 0; i < terminalList.length; i++) {
+    var term = terminalList[i];
+    var sourceId = "term:" + term.id;
+    var isActive = activeSourceIds.has(sourceId);
+
+    var item = document.createElement("div");
+    item.className = "context-picker-item" + (isActive ? " active" : "");
+    item.setAttribute("data-source-id", sourceId);
+
+    item.innerHTML =
+      '<i data-lucide="square-terminal"></i>' +
+      '<span>' + escapeHtml(term.title || ("Terminal " + term.id)) + '</span>' +
+      '<i data-lucide="check" class="context-picker-check"></i>';
+
+    item.addEventListener("click", function() {
+      toggleSource(this.getAttribute("data-source-id"));
+      if (typeof lucide !== "undefined") lucide.createIcons();
+    });
+
+    section.appendChild(item);
+  }
+
+  if (typeof lucide !== "undefined") lucide.createIcons();
+}
+
+function getSourceLabel(id) {
+  if (id.startsWith("term:")) {
+    var termId = parseInt(id.split(":")[1], 10);
+    for (var i = 0; i < terminalList.length; i++) {
+      if (terminalList[i].id === termId) {
+        return terminalList[i].title || ("Terminal " + termId);
+      }
+    }
+    return "Terminal " + termId;
+  }
+  return id;
+}
+
+function getSourceIcon(id) {
+  if (id.startsWith("term:")) return "square-terminal";
+  return "circle";
+}
+
+// Get active source IDs (for use when sending messages)
+export function getActiveSources() {
+  return Array.from(activeSourceIds);
+}
+
+// Check if any sources are active
+export function hasActiveSources() {
+  return activeSourceIds.size > 0;
+}
+
+function escapeHtml(str) {
+  var div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}

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

@@ -28,6 +28,7 @@ function createTerminalManager(opts) {
       pty: pty,
       scrollback: [],
       scrollbackSize: 0,
+      totalBytesWritten: 0,
       cols: cols || 80,
       rows: rows || 24,
       title: "Terminal " + id,
@@ -38,11 +39,13 @@ function createTerminalManager(opts) {
     };
 
     pty.onData(function (data) {
-      // Buffer scrollback
-      session.scrollback.push(data);
+      // Buffer scrollback with timestamps
+      var ts = Date.now();
+      session.scrollback.push({ ts: ts, data: data });
       session.scrollbackSize += data.length;
+      session.totalBytesWritten += data.length;
       while (session.scrollbackSize > SCROLLBACK_MAX && session.scrollback.length > 1) {
-        session.scrollbackSize -= session.scrollback[0].length;
+        session.scrollbackSize -= session.scrollback[0].data.length;
         session.scrollback.shift();
       }
 
@@ -81,7 +84,7 @@ function createTerminalManager(opts) {
 
     // Replay scrollback only for newly attached clients
     if (!alreadySubscribed && session.scrollback.length > 0) {
-      var replay = session.scrollback.join("");
+      var replay = session.scrollback.map(function(c) { return c.data; }).join("");
       sendTo(ws, { type: "term_output", id: id, data: replay });
     }
 
@@ -176,6 +179,18 @@ function createTerminalManager(opts) {
     return result;
   }
 
+  function getScrollback(id) {
+    var session = terminals.get(id);
+    if (!session) return null;
+    var content = session.scrollback.map(function(c) { return c.data; }).join("");
+    return {
+      content: content,
+      chunks: session.scrollback,
+      totalBytesWritten: session.totalBytesWritten,
+      bufferStart: session.totalBytesWritten - content.length
+    };
+  }
+
   function destroyAll() {
     for (var session of terminals.values()) {
       if (session.pty) {
@@ -196,6 +211,7 @@ function createTerminalManager(opts) {
     close: close,
     rename: rename,
     list: list,
+    getScrollback: getScrollback,
     destroyAll: destroyAll,
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.26.0-beta.3",
+  "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",