clay-server 2.14.0 → 2.15.0-beta.1

package/lib/public/css/mates.css

@@ -795,8 +795,8 @@
   height: 16px;
 }
 
-/* Knowledge editor/preview panel (overlays main content) */
-#mate-knowledge-container {
+/* Knowledge editor panel (overlays main content) */
+#mate-knowledge-editor {
   position: absolute;
   inset: 0;
   z-index: 100;
@@ -805,7 +805,61 @@
   flex-direction: column;
   overflow: hidden;
 }
-#mate-knowledge-container.hidden {
+#mate-knowledge-editor.hidden {
+  display: none;
+}
+
+/* --- Knowledge viewer (side panel, mirrors #file-viewer) --- */
+@media (min-width: 1024px) {
+  #mate-knowledge-viewer {
+    width: 50%;
+    max-width: 720px;
+    min-width: 360px;
+    border-left: 1px solid var(--border);
+    background: var(--bg);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  #mate-knowledge-viewer.hidden { display: none; }
+}
+@media (max-width: 1023px) {
+  #mate-knowledge-viewer {
+    position: fixed;
+    inset: 0;
+    background: var(--bg);
+    z-index: 300;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  #mate-knowledge-viewer.hidden { display: none; }
+}
+.mate-knowledge-viewer-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+  min-height: 44px;
+}
+.mate-knowledge-viewer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+}
+
+/* Knowledge editor (full overlay) */
+.mate-knowledge-editor {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.mate-knowledge-editor.hidden {
   display: none;
 }
 
@@ -876,23 +930,25 @@
 .mate-knowledge-file-list {
   flex: 1;
   overflow-y: auto;
-  padding: 4px 0;
+  padding: 4px 6px;
 }
 .mate-knowledge-file-item {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 12px;
+  padding: 5px 8px;
+  border-radius: 8px;
   cursor: pointer;
   font-size: 13px;
   color: var(--text-secondary);
-  transition: background 0.1s;
+  transition: background 0.15s, color 0.15s;
 }
 .mate-knowledge-file-item:hover {
-  background: rgba(var(--overlay-rgb), 0.06);
+  background: var(--sidebar-hover);
+  color: var(--text);
 }
 .mate-knowledge-file-item.active {
-  background: rgba(var(--overlay-rgb), 0.1);
+  background: var(--sidebar-active);
   color: var(--text);
   font-weight: 600;
 }
@@ -922,6 +978,85 @@
   flex-shrink: 0;
 }
 
+/* Common knowledge section headers */
+.mate-knowledge-section-header {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-dimmer);
+  padding: 10px 12px 4px;
+}
+.mate-knowledge-file-badge.common {
+  background: rgba(0, 184, 148, 0.15);
+  color: #00b894;
+}
+.mate-knowledge-file-badge.promoted {
+  background: rgba(0, 184, 148, 0.15);
+  color: #00b894;
+}
+.mate-knowledge-dots-btn {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  margin-left: auto;
+  color: var(--text-dimmer);
+  flex-shrink: 0;
+  opacity: 0.5;
+  transition: opacity 0.15s;
+}
+.mate-knowledge-dots-btn .lucide {
+  width: 14px;
+  height: 14px;
+}
+.mate-knowledge-file-item:hover .mate-knowledge-dots-btn {
+  display: flex;
+}
+.mate-knowledge-dots-btn:hover {
+  opacity: 1;
+}
+.mate-knowledge-file-menu {
+  position: fixed;
+  z-index: 9999;
+  background: var(--sidebar-bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 4px 0;
+  min-width: 140px;
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
+}
+.mate-knowledge-file-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  font-family: inherit;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 13px;
+  white-space: nowrap;
+  transition: background 0.15s;
+}
+.mate-knowledge-file-menu-item:hover {
+  background: rgba(var(--overlay-rgb), 0.05);
+}
+.mate-knowledge-file-menu-item .lucide {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+.mate-knowledge-file-menu-item.menu-item-danger {
+  color: var(--error);
+}
+.mate-knowledge-file-menu-item.menu-item-danger:hover {
+  background: var(--error-8);
+}
+
 /* JSONL table view */
 .mate-knowledge-jsonl-table {
   width: 100%;
@@ -1329,6 +1464,7 @@
 
 /* Match panel header heights to sidebar header (48px) */
 body.mate-dm-active .mate-knowledge-header-bar,
+body.mate-dm-active .mate-knowledge-viewer-header,
 body.mate-dm-active .scheduler-top-bar,
 body.mate-dm-active .notes-archive-header {
   height: 48px;
@@ -1336,7 +1472,7 @@ body.mate-dm-active .notes-archive-header {
   border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 }
 
-/* Knowledge header bar */
+/* Knowledge editor header bar (full mate color, overrides whole area) */
 body.mate-dm-active .mate-knowledge-header-bar {
   background: var(--mate-color);
   color: #fff;
@@ -1361,15 +1497,33 @@ body.mate-dm-active .mate-knowledge-header-bar .mate-knowledge-header-btn:hover
   background: rgba(255, 255, 255, 0.15);
 }
 body.mate-dm-active .mate-knowledge-header-bar .mate-knowledge-header-btn:disabled {
-  color: rgba(255, 255, 255, 0.3);
+  color: rgba(255, 255, 255, 0.4);
 }
 body.mate-dm-active .mate-knowledge-header-bar .mate-knowledge-header-btn:disabled:hover {
   background: none;
-  color: rgba(255, 255, 255, 0.3);
+  color: rgba(255, 255, 255, 0.4);
 }
 body.mate-dm-active .mate-knowledge-header-bar #mate-knowledge-editor-delete:hover {
-  color: #fff;
-  background: rgba(255, 80, 80, 0.4);
+  color: #ff5555;
+  background: rgba(255, 85, 85, 0.15);
+}
+
+/* Knowledge viewer header bar (side panel, light tint via --mate-color + 0a) */
+body.mate-dm-active .mate-knowledge-viewer-header {
+  background: var(--mate-color-tint, var(--bg-secondary));
+  color: var(--text-main);
+  border-bottom: 1px solid var(--border-subtle);
+}
+body.mate-dm-active .mate-knowledge-viewer-header .mate-knowledge-header-icon,
+body.mate-dm-active .mate-knowledge-viewer-header .mate-knowledge-active-name {
+  color: var(--text-main);
+}
+body.mate-dm-active .mate-knowledge-viewer-header .file-viewer-btn {
+  color: var(--text-dim);
+}
+body.mate-dm-active .mate-knowledge-viewer-header .file-viewer-btn:hover {
+  color: var(--text-main);
+  background: rgba(var(--overlay-rgb), 0.08);
 }
 
 /* Scheduler top bar (main header) */

package/lib/public/css/session-search.css

@@ -127,6 +127,15 @@ mark.session-search-highlight-active {
   pointer-events: none;
 }
 
+.search-blink {
+  animation: searchBlink 0.4s ease-in-out 3;
+}
+
+@keyframes searchBlink {
+  0%, 100% { box-shadow: none; }
+  50% { box-shadow: 0 0 0 2px var(--accent); border-radius: 12px; }
+}
+
 /* Mobile */
 @media (max-width: 768px) {
   #find-in-session-btn {

package/lib/public/css/sidebar.css

@@ -384,23 +384,6 @@
   padding: 0 1px;
 }
 
-/* --- Search hit timeline (right-side markers) --- */
-.search-timeline {
-  position: absolute;
-  right: 8px;
-  z-index: 10;
-  pointer-events: none;
-}
-
-.search-blink {
-  animation: searchBlink 0.4s ease-in-out 3;
-}
-
-@keyframes searchBlink {
-  0%, 100% { box-shadow: none; }
-  50% { box-shadow: 0 0 0 2px var(--accent); border-radius: 12px; }
-}
-
 #session-list {
   padding: 2px 8px;
 }

package/lib/public/index.html

@@ -232,7 +232,8 @@
     </div>
 
     <div id="main-column">
-      <div id="mate-knowledge-container" class="hidden">
+      <!-- Knowledge editor (full overlay, shown on Edit) -->
+      <div id="mate-knowledge-editor" class="mate-knowledge-editor hidden">
         <div class="mate-knowledge-header-bar">
           <i data-lucide="file-text" class="mate-knowledge-header-icon"></i>
           <span id="mate-knowledge-active-name" class="mate-knowledge-active-name">No file selected</span>
@@ -462,6 +463,19 @@
     </div>
     <div class="file-viewer-body" id="file-viewer-body"></div>
   </div>
+  <!-- Knowledge viewer (side panel, like file-viewer) -->
+  <div id="mate-knowledge-viewer" class="hidden">
+    <div class="mate-knowledge-viewer-header">
+      <i data-lucide="file-text" class="mate-knowledge-header-icon"></i>
+      <span id="mate-knowledge-viewer-name" class="mate-knowledge-active-name">No file selected</span>
+      <div class="mate-knowledge-toolbar-spacer"></div>
+      <button id="mate-knowledge-viewer-edit-btn" class="file-viewer-btn" title="Edit"><i data-lucide="pencil"></i></button>
+      <button id="mate-knowledge-viewer-close-btn" class="file-viewer-btn" title="Close"><i data-lucide="x"></i></button>
+    </div>
+    <div class="mate-knowledge-viewer-body">
+      <div id="mate-knowledge-viewer-content" class="mate-knowledge-preview-content md-content"></div>
+    </div>
+  </div>
   <div id="project-settings" class="hidden panel-fullscreen">
     <div class="project-settings-layout">
       <div class="project-settings-nav">

package/lib/public/modules/command-palette.js

@@ -12,16 +12,13 @@ var items = [];
 var debounceTimer = null;
 var abortCtrl = null;
 var pendingNav = null;
-var mode = "home"; // "home" or "search"
 var cachedHomeData = null;
 var cachedVersion = null;
 
 // --- Commands registry ---
 var commands = [
-  { id: "search", label: "Search sessions", desc: "Search across all projects", icon: "search", action: "enterSearch" },
   { id: "create-mate", label: "Create Mate", desc: "Create a new AI teammate", icon: "user-plus", action: "createMate" },
   { id: "settings", label: "Server settings", desc: "Configure server", icon: "settings", action: "openSettings" },
-  { id: "home", label: "Home", desc: "Go to home hub", icon: "home", action: "showHome" },
 ];
 
 export function initCommandPalette(_ctx) {
@@ -59,7 +56,6 @@ export function isCommandPaletteOpen() {
 
 export function openCommandPalette() {
   if (!paletteEl) return;
-  mode = "home";
   paletteEl.classList.remove("hidden");
   var searchbar = document.getElementById("cmd-palette-btn");
   if (searchbar) searchbar.style.visibility = "hidden";
@@ -82,7 +78,6 @@ export function closeCommandPalette() {
   resultsEl.innerHTML = "";
   items = [];
   activeIndex = -1;
-  mode = "home";
   if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = null; }
   if (abortCtrl) { abortCtrl.abort(); abortCtrl = null; }
 }
@@ -136,36 +131,18 @@ function buildDOM() {
   inputEl.addEventListener("input", function () {
     var q = inputEl.value;
     if (debounceTimer) clearTimeout(debounceTimer);
-    if (mode === "search") {
+    renderHome(q.trim());
+    if (q.trim()) {
       debounceTimer = setTimeout(function () {
-        fetchSearchResults(q.trim());
-      }, 250);
-    } else {
-      renderHome(q.trim());
+        fetchHomeSearchResults(q.trim());
+      }, 300);
     }
   });
 
   inputEl.addEventListener("keydown", function (e) {
     if (e.key === "Escape") {
       e.preventDefault();
-      if (mode === "search") {
-        // Back to home mode
-        mode = "home";
-        inputEl.value = "";
-        inputEl.placeholder = "Type a command or search...";
-        updateFooter();
-        renderHome("");
-      } else {
-        closeCommandPalette();
-      }
-      return;
-    }
-    if (e.key === "Backspace" && mode === "search" && inputEl.value === "") {
-      e.preventDefault();
-      mode = "home";
-      inputEl.placeholder = "Type a command or search...";
-      updateFooter();
-      renderHome("");
+      closeCommandPalette();
       return;
     }
     if (e.key === "ArrowDown") {
@@ -193,17 +170,9 @@ function buildDOM() {
 }
 
 function updateFooter() {
-  var shortcuts = '';
-  if (mode === "search") {
-    shortcuts =
-      '<span><kbd>&uarr;</kbd> <kbd>&darr;</kbd> navigate</span>' +
-      '<span><kbd>Enter</kbd> open</span>' +
-      '<span><kbd>Esc</kbd> back</span>';
-  } else {
-    shortcuts =
-      '<span><kbd>&uarr;</kbd> <kbd>&darr;</kbd> navigate</span>' +
-      '<span><kbd>Enter</kbd> select</span>';
-  }
+  var shortcuts =
+    '<span><kbd>&uarr;</kbd> <kbd>&darr;</kbd> navigate</span>' +
+    '<span><kbd>Enter</kbd> select</span>';
   var versionText = cachedVersion ? "v" + cachedVersion : "";
   footerEl.innerHTML =
     '<a href="https://github.com/chadbyte/clay" target="_blank" rel="noopener" class="cmd-palette-brand"><img src="favicon-banded.png" width="13" height="13" alt="">Clay ' + versionText + '</a>' +
@@ -359,7 +328,7 @@ function renderHome(filter) {
     }
   }
 
-  if (items.length === 0) {
+  if (items.length === 0 && !f) {
     html = '<div class="cmd-palette-empty">No matching results</div>';
   }
 
@@ -370,80 +339,65 @@ function renderHome(filter) {
 }
 
 // ==========================================
-// SEARCH MODE: cross-project session content search
+// HOME MODE: inline session search (server-side)
 // ==========================================
 
-function enterSearchMode() {
-  mode = "search";
-  inputEl.value = "";
-  inputEl.placeholder = "Search session titles and content...";
-  resultsEl.innerHTML = '<div class="cmd-palette-empty">Type to search across all projects</div>';
-  items = [];
-  activeIndex = -1;
-  updateFooter();
-  inputEl.focus();
-}
+var homeSearchQuery = "";
 
-function fetchSearchResults(query) {
-  if (!query) {
-    resultsEl.innerHTML = '<div class="cmd-palette-empty">Type to search across all projects</div>';
-    items = [];
-    activeIndex = -1;
-    return;
-  }
+function fetchHomeSearchResults(query) {
+  homeSearchQuery = query;
   if (abortCtrl) { abortCtrl.abort(); abortCtrl = null; }
   abortCtrl = new AbortController();
-  resultsEl.innerHTML = '<div class="cmd-palette-loading">Searching...</div>';
   fetch("/api/palette/search?q=" + encodeURIComponent(query), { signal: abortCtrl.signal })
     .then(function (res) { return res.json(); })
     .then(function (data) {
       abortCtrl = null;
-      renderSearchResults(data.results || [], query);
+      if (homeSearchQuery !== query) return;
+      appendHomeSearchResults(data.results || [], query);
     })
     .catch(function (err) {
       if (err.name === "AbortError") return;
       abortCtrl = null;
-      resultsEl.innerHTML = '<div class="cmd-palette-empty">Search failed</div>';
     });
 }
 
-function renderSearchResults(results, query) {
-  items = [];
-  activeIndex = -1;
-
-  if (results.length === 0) {
-    resultsEl.innerHTML = '<div class="cmd-palette-empty">No results found</div>';
-    return;
-  }
+function appendHomeSearchResults(results, query) {
+  if (results.length === 0) return;
 
-  // Group by project
-  var groups = [];
-  var groupMap = {};
-  for (var i = 0; i < results.length; i++) {
-    var r = results[i];
-    if (!groupMap[r.projectSlug]) {
-      groupMap[r.projectSlug] = { slug: r.projectSlug, title: r.projectTitle, icon: r.projectIcon, items: [] };
-      groups.push(groupMap[r.projectSlug]);
+  // Deduplicate: exclude sessions already shown in the Recent section
+  var existingIds = {};
+  for (var e = 0; e < items.length; e++) {
+    if (items[e].type === "session" && items[e].data.sessionId) {
+      existingIds[items[e].data.projectSlug + ":" + items[e].data.sessionId] = true;
     }
-    groupMap[r.projectSlug].items.push(r);
   }
-
-  var html = "";
-  var flatIndex = 0;
-  for (var g = 0; g < groups.length; g++) {
-    var group = groups[g];
-    var label = escapeHtml(group.icon ? group.icon + " " + (group.title || group.slug) : (group.title || group.slug));
-    html += '<div class="cmd-palette-group-label">' + label + '</div>';
-    for (var j = 0; j < group.items.length; j++) {
-      var item = group.items[j];
-      items.push({ type: "search-result", data: item, query: query });
-      var snippet = item.snippet ? escapeHtml(item.snippet) : "";
-      html += renderItem(flatIndex, group.icon || '<i data-lucide="message-square"></i>', escapeHtml(item.sessionTitle || "New Session"), null, snippet);
-      flatIndex++;
-    }
+  var newResults = results.filter(function (r) {
+    return !existingIds[r.projectSlug + ":" + r.sessionId];
+  });
+  if (newResults.length === 0) return;
+
+  // Remove "No matching results" if present
+  var emptyEl = resultsEl.querySelector(".cmd-palette-empty");
+  if (emptyEl) emptyEl.remove();
+
+  // Build HTML and append
+  var html = '<div class="cmd-palette-group-label cmd-palette-search-results-label">Session search results</div>';
+  var flatIndex = items.length;
+  for (var i = 0; i < newResults.length; i++) {
+    var r = newResults[i];
+    items.push({ type: "search-result", data: r, query: query });
+    var projLabel = (r.projectIcon || "") + " " + escapeHtml(r.projectTitle || r.projectSlug);
+    var snippet = r.snippet ? escapeHtml(r.snippet) : "";
+    html += renderItem(flatIndex, r.projectIcon || '<i data-lucide="message-square"></i>', escapeHtml(r.sessionTitle || "New Session"), projLabel.trim(), snippet);
+    flatIndex++;
   }
 
-  resultsEl.innerHTML = html;
+  // Append to results
+  var frag = document.createElement("div");
+  frag.innerHTML = html;
+  while (frag.firstChild) {
+    resultsEl.appendChild(frag.firstChild);
+  }
   refreshIcons();
   bindItemEvents();
 }
@@ -514,10 +468,6 @@ function activateItem(entry) {
 }
 
 function executeCommand(cmd) {
-  if (cmd.action === "enterSearch") {
-    enterSearchMode();
-    return;
-  }
   closeCommandPalette();
   switch (cmd.action) {
     case "createMate":
@@ -526,9 +476,6 @@ function executeCommand(cmd) {
     case "openSettings":
       ctx.runAction("openSettings");
       break;
-    case "showHome":
-      ctx.runAction("showHome");
-      break;
   }
 }