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

package/lib/public/app.js

@@ -12,6 +12,7 @@ import { initInput, clearPendingImages, handleInputSync, autoResize, builtinComm
 import { initQrCode, triggerShare } from './modules/qrcode.js';
 import { initFileBrowser, loadRootDirectory, refreshTree, handleFsList, handleFsRead, handleDirChanged, refreshIfOpen, handleFileChanged, handleFileHistory, handleGitDiff, handleFileAt, getPendingNavigate, closeFileViewer, resetFileBrowser } from './modules/filebrowser.js';
 import { initTerminal, openTerminal, closeTerminal, resetTerminals, handleTermList, handleTermCreated, handleTermOutput, handleTermResized, handleTermExited, handleTermClosed, sendTerminalCommand } from './modules/terminal.js';
+import { initContextSources, updateTerminalList, handleContextSourcesState, getActiveSources, hasActiveSources } from './modules/context-sources.js';
 import { initStickyNotes, handleNotesList, handleNoteCreated, handleNoteUpdated, handleNoteDeleted, openArchive, closeArchive, isArchiveOpen, hideNotes, showNotes, isNotesVisible } from './modules/sticky-notes.js';
 import { initTheme, getThemeColor, getComputedVar, onThemeChange, getCurrentTheme } from './modules/theme.js';
 import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionResolved, markPermissionCancelled, renderElicitationRequest, markElicitationResolved, renderPlanBanner, renderPlanCard, handleTodoWrite, handleTaskCreate, handleTaskUpdate, startThinking, appendThinking, stopThinking, resetThinkingGroup, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, addTurnMeta, resetTurnMetaCost, enableMainInput, getTools, getPlanContent, setPlanContent, isPlanFilePath, getTodoTools, updateSubagentActivity, addSubagentToolEntry, markSubagentDone, updateSubagentProgress, initSubagentStop, closeToolGroup, removeToolFromGroup } from './modules/tools.js';
@@ -2598,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 = {
@@ -2645,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");
@@ -2652,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);
@@ -2717,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
@@ -3663,23 +3829,13 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     suggestionChipsEl.innerHTML = "";
     var chip = document.createElement("button");
     chip.className = "suggestion-chip";
-    chip.innerHTML =
-      '<span class="suggestion-chip-send">' + iconHtml("sparkles") +
-      '<span class="suggestion-chip-text">' + escapeHtml(suggestion) + '</span></span>' +
-      '<span class="suggestion-chip-edit">' + iconHtml("pencil") + '</span>';
+    chip.innerHTML = iconHtml("sparkles") +
+      '<span class="suggestion-chip-text">' + escapeHtml(suggestion) + '</span>';
     chip.addEventListener("click", function () {
       inputEl.value = suggestion;
       hideSuggestionChips();
       sendMessage();
     });
-    chip.querySelector(".suggestion-chip-edit").addEventListener("click", function (e) {
-      e.stopPropagation();
-      inputEl.value = suggestion;
-      inputEl.focus();
-      inputEl.select();
-      autoResize();
-      hideSuggestionChips();
-    });
     suggestionChipsEl.appendChild(chip);
     suggestionChipsEl.classList.remove("hidden");
     refreshIcons();
@@ -4061,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);
@@ -4623,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();
@@ -4797,6 +4965,11 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
 
         case "term_list":
           handleTermList(msg);
+          updateTerminalList(msg.terminals);
+          break;
+
+        case "context_sources_state":
+          handleContextSourcesState(msg);
           break;
 
         case "term_created":
@@ -5763,6 +5936,12 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     fileViewerEl: $("file-viewer"),
   });
 
+  // --- Context Sources ---
+  initContextSources({
+    get ws() { return ws; },
+    get connected() { return connected; },
+  });
+
   // --- Playbook Engine ---
   initPlaybook();
 

package/lib/public/css/input.css

@@ -271,6 +271,165 @@
   border-color: var(--error);
 }
 
+/* ==========================================================================
+   Context Sources — chips above input
+   ========================================================================== */
+
+#context-sources-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 0 8px 4px;
+  position: relative;
+}
+
+#context-sources-add {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px dashed var(--border);
+  background: transparent;
+  color: var(--text-dimmer);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+#context-sources-add .lucide { width: 12px; height: 12px; }
+
+#context-sources-add:hover {
+  color: var(--text-secondary);
+  border-color: var(--text-dimmer);
+  background: var(--sidebar-hover);
+}
+
+#context-sources-chips {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.context-chip {
+  display: inline-flex;
+  align-items: stretch;
+  padding: 0;
+  border-radius: 8px;
+  background: var(--bg-alt);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  border: 1px solid var(--border);
+  transition: border-color 0.15s;
+}
+
+.context-chip-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px 6px 12px;
+}
+
+.context-chip-label .lucide { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); }
+
+.context-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  border: none;
+  border-left: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0;
+  border-radius: 0 8px 8px 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+.context-chip-remove:hover {
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.08);
+}
+
+.context-chip-remove .lucide { width: 14px; height: 14px; }
+
+#context-sources-picker.hidden { display: none; }
+
+#context-sources-picker {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  min-width: 200px;
+  background: var(--sidebar-bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 4px 0;
+  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.15);
+  z-index: 200;
+  animation: ctxPickerAppear 0.12s ease-out;
+}
+
+@keyframes ctxPickerAppear {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.context-picker-section-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-dimmer);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 8px 12px 4px;
+}
+
+.context-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.context-picker-item:hover {
+  background: rgba(var(--overlay-rgb), 0.05);
+}
+
+.context-picker-item .lucide { width: 14px; height: 14px; flex-shrink: 0; }
+
+.context-picker-check {
+  margin-left: auto;
+  width: 14px;
+  height: 14px;
+  color: var(--accent);
+  display: none;
+}
+
+.context-picker-item.active .context-picker-check {
+  display: block;
+}
+
+.context-picker-empty {
+  padding: 12px;
+  color: var(--text-dimmer);
+  font-size: 13px;
+  text-align: center;
+}
+
 /* ==========================================================================
    Input Area — Claude-style unified container
    ========================================================================== */
@@ -521,98 +680,53 @@
 #suggestion-chips {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
-  padding: 8px 6px;
+  gap: 4px;
+  padding: 4px 6px;
   position: absolute;
   bottom: 100%;
   left: 0;
   right: 0;
   z-index: 5;
-  background: transparent;
 }
 
 #suggestion-chips.hidden { display: none; }
 
 .suggestion-chip {
   display: inline-flex;
-  align-items: stretch;
-  padding: 0;
-  border-radius: 16px;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px 4px 8px;
+  border-radius: 6px;
   border: 1px solid var(--border);
-  background: var(--bg-alt);
+  background: rgba(var(--overlay-rgb), 0.08);
   color: var(--text-secondary);
-  font-size: 13px;
+  font-size: 12px;
   font-family: inherit;
   cursor: pointer;
-  transition: border-color 0.15s;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
   text-align: left;
   max-width: 100%;
-  line-height: 1.3;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  line-height: 1.2;
 }
 
 .suggestion-chip:hover {
   border-color: var(--accent);
+  background: var(--accent-bg);
+  color: var(--accent);
 }
 
 .suggestion-chip .lucide {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   flex-shrink: 0;
   color: var(--accent);
 }
 
-.suggestion-chip-send {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  flex: 1;
-  min-width: 0;
-  padding: 8px 10px 8px 14px;
-  border-radius: 16px 0 0 16px;
-  transition: background 0.15s, color 0.15s;
-}
-
-.suggestion-chip-send:hover {
-  background: var(--accent-bg);
-  color: var(--accent);
-}
-
 .suggestion-chip-text {
   flex: 1;
   min-width: 0;
 }
 
-.suggestion-chip-edit {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 12px;
-  border-left: 1px solid var(--border);
-  border-radius: 0 16px 16px 0;
-  background: rgba(128, 128, 128, 0.07);
-  cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
-}
-
-.suggestion-chip:hover .suggestion-chip-edit {
-  border-left-color: var(--accent);
-}
-
-.suggestion-chip-edit:hover {
-  background: var(--accent-bg);
-}
-
-.suggestion-chip-edit .lucide {
-  width: 14px;
-  height: 14px;
-  color: var(--text-secondary);
-}
-
-.suggestion-chip-edit:hover .lucide {
-  color: var(--accent);
-}
-
 /* ==========================================================================
    Animations
    ========================================================================== */

package/lib/public/css/menus.css

@@ -474,6 +474,13 @@
 
 #config-chip .lucide { width: 10px; height: 10px; }
 #config-chip .config-chip-icon { display: none; }
+
+@media (max-width: 1000px) {
+  #config-chip .config-chip-icon { display: inline-flex; width: 16px; height: 16px; }
+  #config-chip-label { display: none; }
+  #config-chip .lucide:last-child { display: none; }
+  #config-chip { padding: 0 6px; }
+}
 #config-chip:hover { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.06); }
 #config-chip.active { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.06); }
 

package/lib/public/css/sidebar.css

@@ -257,6 +257,16 @@
   letter-spacing: 0.5px;
 }
 
+/* --- Section labels --- */
+.sidebar-section-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dimmer);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 4px 12px 2px;
+}
+
 /* --- Tools section --- */
 #sidebar-tools {
   flex-shrink: 0;