clay-server 2.15.2 → 2.16.0-beta.2

package/lib/public/index.html

@@ -83,6 +83,8 @@
           <p id="hub-greeting-date"></p>
         </div>
 
+        <div id="home-hub-mates" class="home-hub-mates hidden"></div>
+
         <div class="hub-columns">
           <div class="hub-card hub-upcoming">
             <div class="hub-card-header">
@@ -198,6 +200,7 @@
         <img id="mate-sidebar-avatar" class="mate-sidebar-avatar" alt="">
         <span id="mate-sidebar-name" class="mate-sidebar-name"></span>
         <div id="mate-sidebar-seed-tooltip" class="mate-seed-tooltip hidden"></div>
+        <button id="mate-sidebar-toggle-btn" class="sidebar-collapse-btn" title="Collapse sidebar"><i data-lucide="panel-left-close"></i></button>
       </div>
       <div id="mate-sidebar-tools">
         <button id="mate-knowledge-btn"><i data-lucide="book-open"></i> <span>Knowledge</span><span id="mate-knowledge-count" class="sidebar-badge hidden"></span></button>
@@ -246,8 +249,12 @@
           <button id="mate-knowledge-editor-save" class="mate-knowledge-header-btn" disabled title="Save"><i data-lucide="save"></i></button>
           <button id="mate-knowledge-close-btn" class="mate-knowledge-header-btn" title="Close"><i data-lucide="x"></i></button>
         </div>
+        <div class="mate-knowledge-tab-bar">
+          <button class="mate-knowledge-tab-btn active" data-tab="edit">Edit</button>
+          <button class="mate-knowledge-tab-btn" data-tab="preview">Preview</button>
+        </div>
         <div class="mate-knowledge-body">
-          <div class="mate-knowledge-editor-pane">
+          <div class="mate-knowledge-editor-pane mobile-active">
             <div class="mate-editor-highlight-wrap">
               <pre class="mate-editor-highlight-pre" aria-hidden="true"><code id="mate-knowledge-editor-highlight" class="language-markdown"></code></pre>
               <textarea id="mate-knowledge-editor-content" placeholder="Select a file from the sidebar..." spellcheck="false"></textarea>
@@ -265,10 +272,19 @@
       <div class="title-bar-content">
         <div id="header-left">
           <button id="sidebar-expand-btn" title="Open sidebar"><i data-lucide="panel-left-open"></i></button>
+          <div id="mate-collapsed-info" class="mate-collapsed-info">
+            <img id="mate-collapsed-avatar" class="mate-collapsed-avatar" alt="">
+            <span id="mate-collapsed-name" class="mate-collapsed-name"></span>
+          </div>
           <button id="hamburger-btn" aria-label="Toggle sidebar" title="Toggle sidebar"><i data-lucide="menu"></i></button>
           <span class="header-title" id="header-title">Connecting...</span>
           <button id="header-info-btn" type="button" title="Session info"><i data-lucide="info"></i></button>
           <button id="header-rename-btn" type="button" title="Rename session"><i data-lucide="pencil"></i></button>
+          <div id="mate-mobile-title" class="mate-mobile-title hidden">
+            <button id="mate-mobile-back" class="mate-mobile-back" type="button" aria-label="Back"><i data-lucide="chevron-left"></i></button>
+            <img id="mate-mobile-avatar" class="mate-mobile-avatar" alt="">
+            <span id="mate-mobile-name" class="mate-mobile-name"></span>
+          </div>
         </div>
         <div id="todo-sticky" class="hidden"></div>
         <div id="ralph-sticky" class="hidden"></div>
@@ -444,11 +460,11 @@
 
   <!-- Mobile bottom tab bar -->
   <div id="mobile-tab-bar">
-    <button class="mobile-tab" data-tab="projects"><i data-lucide="folder-kanban"></i><span class="mobile-tab-label">Projects</span></button>
-    <button class="mobile-tab" data-tab="sessions"><i data-lucide="messages-square"></i><span class="mobile-tab-label">Sessions</span></button>
-    <button class="mobile-tab-home" id="mobile-home-btn"><img src="/icon-banded-76.png" alt="Clay" class="mobile-home-icon"></button>
-    <button class="mobile-tab" data-tab="files"><i data-lucide="folder-tree"></i><span class="mobile-tab-label">Files</span></button>
-    <button class="mobile-tab" data-tab="terminal"><i data-lucide="square-terminal"></i><span id="mobile-terminal-count" class="mobile-tab-badge hidden"></span><span class="mobile-tab-label">Terminal</span></button>
+    <button class="mobile-tab" data-tab="chat" id="mob-tab-chat"><i data-lucide="message-square"></i><span class="mobile-tab-label">Chat</span></button>
+    <button class="mobile-tab" data-tab="search" id="mob-tab-search"><i data-lucide="search"></i><span class="mobile-tab-label">Search</span></button>
+    <button class="mobile-tab-home" id="mobile-home-btn"><img src="/icon-banded-76.png" alt="Home" class="mobile-home-icon"></button>
+    <button class="mobile-tab" data-tab="tools" id="mob-tab-tools"><i data-lucide="wrench"></i><span class="mobile-tab-label">Tools</span></button>
+    <button class="mobile-tab" data-tab="settings" id="mob-tab-settings"><i data-lucide="settings"></i><span class="mobile-tab-label">Settings</span></button>
   </div>
 
   <div id="file-viewer" class="hidden">
@@ -481,6 +497,16 @@
       <div class="project-settings-nav">
         <div class="project-settings-nav-inner">
           <div class="server-settings-nav-header" id="ps-nav-title">-</div>
+          <select id="ps-nav-dropdown" class="settings-nav-dropdown">
+            <optgroup label="General">
+              <option value="profile" selected>Profile</option>
+              <option value="defaults">Model</option>
+            </optgroup>
+            <optgroup label="Config">
+              <option value="instructions">Instructions</option>
+              <option value="environment">Environment</option>
+            </optgroup>
+          </select>
           <div class="server-settings-nav-items">
             <div class="settings-nav-category">General</div>
             <button class="settings-nav-item active" data-section="profile"><span>Profile</span></button>
@@ -662,6 +688,11 @@
       <button class="term-key term-key-arrow" data-key="down">&#9660;</button>
       <button class="term-key term-key-arrow" data-key="left">&#9664;</button>
       <button class="term-key term-key-arrow" data-key="right">&#9654;</button>
+      <span class="term-key-spacer"></span>
+      <button class="term-key term-key-toggle" data-key="alt">Alt</button>
+      <button class="term-key" data-key="pipe">|</button>
+      <button class="term-key" data-key="slash">/</button>
+      <button class="term-key" data-key="tilde">~</button>
     </div>
     <div id="terminal-body"></div>
   </div>
@@ -759,6 +790,7 @@
           <div class="settings-nav-category">Config</div>
           <button class="settings-nav-item" data-section="claudemd"><span>Instructions</span></button>
           <button class="settings-nav-item" data-section="environment"><span>Environment</span></button>
+          <button class="settings-nav-item" data-section="storage"><span>Storage</span></button>
           <div class="settings-nav-separator settings-admin-only"></div>
           <div class="settings-nav-category settings-admin-only">Admin</div>
           <button class="settings-nav-item settings-admin-only" data-section="admin-users"><span>Users</span></button>
@@ -988,6 +1020,25 @@
             <!-- rows rendered by JS -->
           </div>
         </div>
+        <div class="server-settings-section" data-section="storage">
+          <h2>Storage</h2>
+          <div class="settings-card">
+            <label class="settings-toggle-row">
+              <div>
+                <span class="settings-label">Image retention</span>
+                <div class="settings-hint">Automatically delete chat images older than this period.</div>
+              </div>
+              <select id="settings-image-retention" class="settings-select">
+                <option value="0">Forever</option>
+                <option value="3">3 days</option>
+                <option value="7" selected>7 days</option>
+                <option value="14">14 days</option>
+                <option value="30">30 days</option>
+                <option value="90">90 days</option>
+              </select>
+            </label>
+          </div>
+        </div>
         <div class="server-settings-section hidden" data-section="keep-awake" id="settings-keep-awake-section">
           <h2>Keep Awake</h2>
           <div class="settings-card">

package/lib/public/modules/longpress.js

@@ -0,0 +1,74 @@
+// Long-press to synthesize contextmenu events on touch devices.
+// All existing contextmenu listeners automatically work with this.
+
+var LONG_PRESS_MS = 500;
+var MOVE_THRESHOLD = 10;
+
+var _timer = null;
+var _startX = 0;
+var _startY = 0;
+var _fired = false;
+var _targetEl = null;
+
+function cancelTimer() {
+  if (_timer) {
+    clearTimeout(_timer);
+    _timer = null;
+  }
+}
+
+export function initLongPress() {
+  if (!("ontouchstart" in window)) return;
+
+  document.addEventListener("touchstart", function (e) {
+    if (e.touches.length !== 1) {
+      cancelTimer();
+      return;
+    }
+    var touch = e.touches[0];
+    _startX = touch.clientX;
+    _startY = touch.clientY;
+    _fired = false;
+    _targetEl = e.target;
+
+    _timer = setTimeout(function () {
+      _timer = null;
+      _fired = true;
+
+      // Haptic feedback if available
+      if (navigator.vibrate) navigator.vibrate(30);
+
+      var evt = new MouseEvent("contextmenu", {
+        bubbles: true,
+        cancelable: true,
+        clientX: _startX,
+        clientY: _startY
+      });
+      _targetEl.dispatchEvent(evt);
+    }, LONG_PRESS_MS);
+  }, { passive: true });
+
+  document.addEventListener("touchmove", function (e) {
+    if (!_timer) return;
+    var touch = e.touches[0];
+    var dx = touch.clientX - _startX;
+    var dy = touch.clientY - _startY;
+    if (dx * dx + dy * dy > MOVE_THRESHOLD * MOVE_THRESHOLD) {
+      cancelTimer();
+    }
+  }, { passive: true });
+
+  document.addEventListener("touchend", function (e) {
+    cancelTimer();
+    // Suppress tap/click after a long-press fired
+    if (_fired) {
+      _fired = false;
+      e.preventDefault();
+    }
+  }, { passive: false });
+
+  document.addEventListener("touchcancel", function () {
+    cancelTimer();
+    _fired = false;
+  }, { passive: true });
+}

package/lib/public/modules/mate-knowledge.js

@@ -161,6 +161,36 @@ export function initMateKnowledge(mateWsGetter) {
     editorContentEl.addEventListener("scroll", syncHighlightScroll);
     initFormatPopover(editorContentEl);
   }
+
+  // --- Mobile tab switching (Edit / Preview) ---
+  var tabBar = document.querySelector(".mate-knowledge-tab-bar");
+  if (tabBar) {
+    var tabBtns = tabBar.querySelectorAll(".mate-knowledge-tab-btn");
+    var editorPane = document.querySelector(".mate-knowledge-editor-pane");
+    var previewPane = document.querySelector(".mate-knowledge-preview-pane");
+    for (var ti = 0; ti < tabBtns.length; ti++) {
+      (function (btn) {
+        btn.addEventListener("click", function () {
+          for (var j = 0; j < tabBtns.length; j++) {
+            tabBtns[j].classList.remove("active");
+          }
+          btn.classList.add("active");
+          var tab = btn.dataset.tab;
+          if (editorPane && previewPane) {
+            if (tab === "edit") {
+              editorPane.classList.add("mobile-active");
+              previewPane.classList.remove("mobile-active");
+            } else {
+              editorPane.classList.remove("mobile-active");
+              previewPane.classList.add("mobile-active");
+              // Ensure preview is up to date
+              if (typeof updatePreview === "function") updatePreview();
+            }
+          }
+        });
+      })(tabBtns[ti]);
+    }
+  }
 }
 
 // --- Mode switching ---

package/lib/public/modules/mate-sidebar.js

@@ -139,11 +139,16 @@ export function showMateSidebar(mateId, mateData) {
 
   var mateColor = profile.avatarColor || mateData.avatarColor || "#7c3aed";
 
-  if (avatarEl) {
-    avatarEl.src = "https://api.dicebear.com/9.x/" + encodeURIComponent(avatarStyle) + "/svg?seed=" + encodeURIComponent(avatarSeed) + "&size=32";
-  }
+  var avatarUrl = "https://api.dicebear.com/9.x/" + encodeURIComponent(avatarStyle) + "/svg?seed=" + encodeURIComponent(avatarSeed) + "&size=32";
+  if (avatarEl) avatarEl.src = avatarUrl;
   if (nameEl) nameEl.textContent = displayName;
 
+  // Also populate collapsed header info
+  var collapsedAvatar = document.getElementById("mate-collapsed-avatar");
+  var collapsedName = document.getElementById("mate-collapsed-name");
+  if (collapsedAvatar) collapsedAvatar.src = avatarUrl;
+  if (collapsedName) collapsedName.textContent = displayName;
+
   // Apply mate color to sidebar
   var headerEl = columnEl.querySelector(".mate-sidebar-header");
   if (headerEl) headerEl.style.background = mateColor;
@@ -375,14 +380,14 @@ function renderMateSessionItem(s) {
   el.className = "mate-session-item" + (s.active ? " active" : "");
   el.dataset.sessionId = s.id;
 
+  var processingDot = document.createElement("span");
+  processingDot.className = "session-processing";
+  if (!s.isProcessing) processingDot.style.display = "none";
+  el.appendChild(processingDot);
+
   var textSpan = document.createElement("span");
   textSpan.className = "mate-session-item-text";
-  var html = "";
-  if (s.isProcessing) {
-    html += '<span class="mate-session-processing"></span>';
-  }
-  html += escapeHtml(s.title || "New Session");
-  textSpan.innerHTML = html;
+  textSpan.textContent = s.title || "New Session";
   el.appendChild(textSpan);
 
   // Relative time

package/lib/public/modules/notifications.js

@@ -71,10 +71,20 @@ export function initNotifications(_ctx) {
   // --- Mobile viewport (iOS keyboard handling) ---
   if (window.visualViewport) {
     var layout = $("layout");
+    var mobileTabBar = document.getElementById("mobile-tab-bar");
     function onViewportChange() {
       layout.style.height = window.visualViewport.height + "px";
       document.documentElement.scrollTop = 0;
       ctx.scrollToBottom();
+      // Hide tab bar when software keyboard is open
+      if (mobileTabBar) {
+        var keyboardOpen = window.visualViewport.height < window.innerHeight * 0.75;
+        if (keyboardOpen) {
+          mobileTabBar.classList.add("keyboard-hidden");
+        } else {
+          mobileTabBar.classList.remove("keyboard-hidden");
+        }
+      }
     }
     window.visualViewport.addEventListener("resize", onViewportChange);
     window.visualViewport.addEventListener("scroll", onViewportChange);

package/lib/public/modules/project-settings.js

@@ -33,6 +33,14 @@ export function initProjectSettings(appCtx, emojiCategories) {
     });
   }
 
+  // Mobile dropdown nav
+  var psNavDropdown = document.getElementById("ps-nav-dropdown");
+  if (psNavDropdown) {
+    psNavDropdown.addEventListener("change", function () {
+      switchSection(psNavDropdown.value);
+    });
+  }
+
   // Close button
   var closeBtn = document.getElementById("project-settings-close");
   if (closeBtn) {
@@ -201,6 +209,12 @@ function switchSection(name) {
     sections[j].classList.toggle("active", active2);
   }
 
+  // Sync mobile dropdown
+  var psNavDropdown = document.getElementById("ps-nav-dropdown");
+  if (psNavDropdown && psNavDropdown.value !== name) {
+    psNavDropdown.value = name;
+  }
+
   // Lazy-load section data
   if (name === "defaults") populateDefaults();
   if (name === "instructions") loadInstructions();

package/lib/public/modules/server-settings.js

@@ -155,6 +155,17 @@ export function initServerSettings(appCtx) {
     });
   }
 
+  // Image retention select
+  var imageRetentionSelect = document.getElementById("settings-image-retention");
+  if (imageRetentionSelect) {
+    imageRetentionSelect.addEventListener("change", function () {
+      var ws = ctx.ws;
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "set_image_retention", days: parseInt(this.value, 10) }));
+      }
+    });
+  }
+
   // Global CLAUDE.md: save button
   var ssClaudeMdSave = document.getElementById("ss-claudemd-save");
   if (ssClaudeMdSave) {
@@ -468,6 +479,12 @@ export function updateDaemonConfig(config) {
   var keepAwakeToggle = document.getElementById("settings-keep-awake");
   if (keepAwakeToggle) keepAwakeToggle.checked = !!config.keepAwake;
 
+  // Image retention
+  var imageRetentionSelect = document.getElementById("settings-image-retention");
+  if (imageRetentionSelect && config.imageRetentionDays !== undefined) {
+    imageRetentionSelect.value = String(config.imageRetentionDays);
+  }
+
   // Early Access toggle
   var channelToggle = document.getElementById("settings-update-channel");
   if (channelToggle) {