clay-server 2.7.2 → 2.8.0

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

@@ -316,7 +316,7 @@ function populateSettings() {
   if (wsPathEl) wsPathEl.textContent = ctx.wsPath || "/ws";
 
   // Skip permissions
-  var spBanner = document.getElementById("skip-perms-banner");
+  var spBanner = document.getElementById("skip-perms-pill");
   if (skipPermsEl) {
     var isSkip = spBanner && !spBanner.classList.contains("hidden");
     skipPermsEl.textContent = isSkip ? "Enabled" : "Disabled";

package/lib/public/modules/sidebar.js

@@ -2,6 +2,7 @@ import { escapeHtml, copyToClipboard } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { openProjectSettings } from './project-settings.js';
 import { triggerShare } from './qrcode.js';
+import { parseEmojis } from './markdown.js';
 
 var ctx;
 
@@ -10,11 +11,16 @@ var searchQuery = "";
 var searchMatchIds = null; // null = no search, Set of matched session IDs
 var searchDebounce = null;
 var cachedSessions = [];
+var expandedLoopGroups = new Set();
 
 // --- Cached project data for mobile sheet ---
 var cachedProjectList = [];
 var cachedCurrentSlug = null;
 
+// --- Countdown timer for upcoming schedules ---
+var countdownTimer = null;
+var countdownContainer = null;
+
 // --- Session context menu ---
 var sessionCtxMenu = null;
 var sessionCtxSessionId = null;
@@ -115,6 +121,94 @@ function startInlineRename(sessionId, currentTitle) {
   input.addEventListener("click", function (e) { e.stopPropagation(); });
 }
 
+function showLoopCtxMenu(anchorBtn, loopId, loopName, childCount) {
+  closeSessionCtxMenu();
+
+  var menu = document.createElement("div");
+  menu.className = "session-ctx-menu";
+
+  var renameItem = document.createElement("button");
+  renameItem.className = "session-ctx-item";
+  renameItem.innerHTML = iconHtml("pencil") + " <span>Rename</span>";
+  renameItem.addEventListener("click", function (e) {
+    e.stopPropagation();
+    closeSessionCtxMenu();
+    startLoopInlineRename(loopId, loopName);
+  });
+  menu.appendChild(renameItem);
+
+  var deleteItem = document.createElement("button");
+  deleteItem.className = "session-ctx-item session-ctx-delete";
+  deleteItem.innerHTML = iconHtml("trash-2") + " <span>Delete</span>";
+  deleteItem.addEventListener("click", function (e) {
+    e.stopPropagation();
+    closeSessionCtxMenu();
+    var msg = 'Delete "' + (loopName || "Ralph Loop") + '"';
+    if (childCount > 1) msg += " and its " + childCount + " sessions";
+    msg += "? This cannot be undone.";
+    ctx.showConfirm(msg, function () {
+      if (ctx.ws && ctx.connected) {
+        ctx.ws.send(JSON.stringify({ type: "delete_loop_group", loopId: loopId }));
+      }
+    });
+  });
+  menu.appendChild(deleteItem);
+
+  document.body.appendChild(menu);
+  sessionCtxMenu = menu;
+  refreshIcons();
+
+  requestAnimationFrame(function () {
+    var btnRect = anchorBtn.getBoundingClientRect();
+    menu.style.position = "fixed";
+    menu.style.top = (btnRect.bottom + 2) + "px";
+    menu.style.right = (window.innerWidth - btnRect.right) + "px";
+    menu.style.left = "auto";
+    var menuRect = menu.getBoundingClientRect();
+    if (menuRect.bottom > window.innerHeight - 8) {
+      menu.style.top = (btnRect.top - menuRect.height - 2) + "px";
+    }
+  });
+}
+
+function startLoopInlineRename(loopId, currentName) {
+  var el = ctx.sessionListEl.querySelector('.session-loop-group[data-loop-id="' + loopId + '"]');
+  if (!el) return;
+  var textSpan = el.querySelector(".session-item-text");
+  if (!textSpan) return;
+
+  var input = document.createElement("input");
+  input.type = "text";
+  input.className = "session-rename-input";
+  input.value = currentName || "Ralph Loop";
+
+  var originalHtml = textSpan.innerHTML;
+  textSpan.innerHTML = "";
+  textSpan.appendChild(input);
+  input.focus();
+  input.select();
+
+  function commitRename() {
+    var newName = input.value.trim();
+    if (newName && newName !== currentName && ctx.ws && ctx.connected) {
+      ctx.ws.send(JSON.stringify({ type: "loop_registry_rename", id: loopId, name: newName }));
+    }
+    textSpan.innerHTML = originalHtml;
+    if (newName && newName !== currentName) {
+      // Update text inline immediately
+      var nameNode = textSpan.querySelector(".session-loop-name");
+      if (nameNode) nameNode.textContent = newName;
+    }
+  }
+
+  input.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") { e.preventDefault(); commitRename(); }
+    if (e.key === "Escape") { e.preventDefault(); textSpan.innerHTML = originalHtml; }
+  });
+  input.addEventListener("blur", commitRename);
+  input.addEventListener("click", function (e) { e.stopPropagation(); });
+}
+
 function getDateGroup(ts) {
   var now = new Date();
   var d = new Date(ts);
@@ -139,6 +233,155 @@ function highlightMatch(text, query) {
   return escapeHtml(before) + '<mark class="session-highlight">' + escapeHtml(match) + '</mark>' + escapeHtml(after);
 }
 
+function renderLoopChild(s) {
+  var el = document.createElement("div");
+  var isMatch = searchMatchIds !== null && searchMatchIds.has(s.id);
+  var dimmed = searchMatchIds !== null && !isMatch;
+  el.className = "session-loop-child" + (s.active ? " active" : "") + (isMatch ? " search-match" : "") + (dimmed ? " search-dimmed" : "");
+  el.dataset.sessionId = s.id;
+
+  var textSpan = document.createElement("span");
+  textSpan.className = "session-item-text";
+  var textHtml = "";
+  if (s.isProcessing) {
+    textHtml += '<span class="session-processing"></span>';
+  }
+  if (s.loop) {
+    var isRalphChild = s.loop.source === "ralph";
+    var roleName = s.loop.role === "crafting" ? "Crafting" : s.loop.role === "judge" ? "Judge" : (isRalphChild ? "Coder" : "Run");
+    var iterSuffix = s.loop.role === "crafting" ? "" : " #" + s.loop.iteration;
+    var roleCls = s.loop.role === "crafting" ? " crafting" : (!isRalphChild ? " scheduled" : "");
+    textHtml += '<span class="session-loop-role-badge' + roleCls + '">' + roleName + iterSuffix + '</span>';
+  }
+  textSpan.innerHTML = textHtml;
+  el.appendChild(textSpan);
+
+  el.addEventListener("click", (function (id) {
+    return function () {
+      if (ctx.ws && ctx.connected) {
+        ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+        closeSidebar();
+      }
+    };
+  })(s.id));
+
+  return el;
+}
+
+function renderLoopGroup(loopId, children, groupKey) {
+  var gk = groupKey || loopId;
+  // Sort children by iteration then role (coder before judge)
+  children.sort(function (a, b) {
+    var ai = (a.loop && a.loop.iteration) || 0;
+    var bi = (b.loop && b.loop.iteration) || 0;
+    if (ai !== bi) return ai - bi;
+    // coder before judge within same iteration
+    var ar = (a.loop && a.loop.role === "judge") ? 1 : 0;
+    var br = (b.loop && b.loop.role === "judge") ? 1 : 0;
+    return ar - br;
+  });
+
+  var expanded = expandedLoopGroups.has(gk);
+  var hasActive = false;
+  var anyProcessing = false;
+  var latestSession = children[0];
+  for (var i = 0; i < children.length; i++) {
+    if (children[i].active) hasActive = true;
+    if (children[i].isProcessing) anyProcessing = true;
+    if ((children[i].lastActivity || 0) > (latestSession.lastActivity || 0)) {
+      latestSession = children[i];
+    }
+  }
+
+  var loopName = (children[0].loop && children[0].loop.name) || "Ralph Loop";
+  var isRalph = children[0].loop && children[0].loop.source === "ralph";
+  var isCrafting = false;
+  var maxIter = 0;
+  for (var j = 0; j < children.length; j++) {
+    var iter = (children[j].loop && children[j].loop.iteration) || 0;
+    if (iter > maxIter) maxIter = iter;
+    if (children[j].loop && children[j].loop.role === "crafting") isCrafting = true;
+  }
+
+  var wrapper = document.createElement("div");
+  wrapper.className = "session-loop-wrapper";
+
+  // Group header row
+  var el = document.createElement("div");
+  el.className = "session-loop-group" + (hasActive ? " active" : "") + (expanded ? " expanded" : "") + (isRalph ? "" : " scheduled");
+  el.dataset.loopId = loopId;
+
+  var chevron = document.createElement("button");
+  chevron.className = "session-loop-chevron";
+  chevron.innerHTML = iconHtml("chevron-right");
+  chevron.addEventListener("click", (function (lid) {
+    return function (e) {
+      e.stopPropagation();
+      if (expandedLoopGroups.has(lid)) {
+        expandedLoopGroups.delete(lid);
+      } else {
+        expandedLoopGroups.add(lid);
+      }
+      renderSessionList(null);
+    };
+  })(gk));
+  el.appendChild(chevron);
+
+  var textSpan = document.createElement("span");
+  textSpan.className = "session-item-text";
+  var textHtml = "";
+  if (anyProcessing) {
+    textHtml += '<span class="session-processing"></span>';
+  }
+  var groupIcon = isRalph ? "repeat" : "calendar-clock";
+  textHtml += '<span class="session-loop-icon' + (isRalph ? "" : " scheduled") + '">' + iconHtml(groupIcon) + '</span>';
+  textHtml += '<span class="session-loop-name">' + escapeHtml(loopName) + '</span>';
+  if (isCrafting && children.length === 1) {
+    textHtml += '<span class="session-loop-badge crafting">Crafting</span>';
+  } else {
+    textHtml += '<span class="session-loop-count' + (isRalph ? "" : " scheduled") + '">' + children.length + '</span>';
+  }
+  textSpan.innerHTML = textHtml;
+  el.appendChild(textSpan);
+
+  // More button (ellipsis)
+  var moreBtn = document.createElement("button");
+  moreBtn.className = "session-more-btn";
+  moreBtn.innerHTML = iconHtml("ellipsis");
+  moreBtn.title = "More options";
+  moreBtn.addEventListener("click", (function (lid, name, count, btn) {
+    return function (e) {
+      e.stopPropagation();
+      showLoopCtxMenu(btn, lid, name, count);
+    };
+  })(loopId, loopName, children.length, moreBtn));
+  el.appendChild(moreBtn);
+
+  // Click row (not chevron/more) → switch to latest session
+  el.addEventListener("click", (function (id) {
+    return function () {
+      if (ctx.ws && ctx.connected) {
+        ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+        closeSidebar();
+      }
+    };
+  })(latestSession.id));
+
+  wrapper.appendChild(el);
+
+  // Expanded children
+  if (expanded) {
+    var childContainer = document.createElement("div");
+    childContainer.className = "session-loop-children";
+    for (var k = 0; k < children.length; k++) {
+      childContainer.appendChild(renderLoopChild(children[k]));
+    }
+    wrapper.appendChild(childContainer);
+  }
+
+  return wrapper;
+}
+
 function renderSessionItem(s) {
   var el = document.createElement("div");
   var isMatch = searchMatchIds !== null && searchMatchIds.has(s.id);
@@ -185,15 +428,51 @@ export function renderSessionList(sessions) {
 
   ctx.sessionListEl.innerHTML = "";
 
-  // Sort by lastActivity descending (most recent first)
-  var sorted = cachedSessions.slice().sort(function (a, b) {
+  // Partition: loop sessions vs normal sessions
+  // Group by loopId + startedAt so different runs of the same task are separate groups
+  var loopGroups = {}; // groupKey -> [sessions]
+  var normalSessions = [];
+  for (var i = 0; i < cachedSessions.length; i++) {
+    var s = cachedSessions[i];
+    if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph") {
+      // Task crafting sessions live in the scheduler calendar, not the main list
+      continue;
+    } else if (s.loop && s.loop.loopId) {
+      var groupKey = s.loop.loopId + ":" + (s.loop.startedAt || 0);
+      if (!loopGroups[groupKey]) loopGroups[groupKey] = [];
+      loopGroups[groupKey].push(s);
+    } else {
+      normalSessions.push(s);
+    }
+  }
+
+  // Build virtual items: normal sessions + one entry per loop group (using latest child's lastActivity)
+  var items = [];
+  for (var j = 0; j < normalSessions.length; j++) {
+    items.push({ type: "session", data: normalSessions[j], lastActivity: normalSessions[j].lastActivity || 0 });
+  }
+  var groupKeys = Object.keys(loopGroups);
+  for (var k = 0; k < groupKeys.length; k++) {
+    var gk = groupKeys[k];
+    var children = loopGroups[gk];
+    var realLoopId = children[0].loop.loopId;
+    var maxActivity = 0;
+    for (var m = 0; m < children.length; m++) {
+      var act = children[m].lastActivity || 0;
+      if (act > maxActivity) maxActivity = act;
+    }
+    items.push({ type: "loop", loopId: realLoopId, groupKey: gk, children: children, lastActivity: maxActivity });
+  }
+
+  // Sort by lastActivity descending
+  items.sort(function (a, b) {
     return (b.lastActivity || 0) - (a.lastActivity || 0);
   });
 
   var currentGroup = "";
-  for (var i = 0; i < sorted.length; i++) {
-    var s = sorted[i];
-    var group = getDateGroup(s.lastActivity || 0);
+  for (var n = 0; n < items.length; n++) {
+    var item = items[n];
+    var group = getDateGroup(item.lastActivity || 0);
     if (group !== currentGroup) {
       currentGroup = group;
       var header = document.createElement("div");
@@ -201,7 +480,11 @@ export function renderSessionList(sessions) {
       header.textContent = group;
       ctx.sessionListEl.appendChild(header);
     }
-    ctx.sessionListEl.appendChild(renderSessionItem(s));
+    if (item.type === "loop") {
+      ctx.sessionListEl.appendChild(renderLoopGroup(item.loopId, item.children, item.groupKey));
+    } else {
+      ctx.sessionListEl.appendChild(renderSessionItem(item.data));
+    }
   }
   refreshIcons();
   updatePageTitle();
@@ -356,6 +639,18 @@ function renderSheetProjects(listEl) {
 }
 
 function renderSheetSessions(listEl) {
+  // New session button at top
+  var newBtn = document.createElement("button");
+  newBtn.className = "mobile-session-new";
+  newBtn.innerHTML = '<i data-lucide="plus" style="width:16px;height:16px"></i> New session';
+  newBtn.addEventListener("click", function () {
+    if (ctx.ws && ctx.connected) {
+      ctx.ws.send(JSON.stringify({ type: "new_session" }));
+    }
+    closeMobileSheet();
+  });
+  listEl.appendChild(newBtn);
+
   var sorted = cachedSessions.slice().sort(function (a, b) {
     return (b.lastActivity || 0) - (a.lastActivity || 0);
   });
@@ -435,6 +730,14 @@ export function initSidebar(_ctx) {
     }
   });
 
+  // --- New Ralph Loop button ---
+  var newRalphBtn = ctx.$("new-ralph-btn");
+  if (newRalphBtn) {
+    newRalphBtn.addEventListener("click", function () {
+      if (ctx.openRalphWizard) ctx.openRalphWizard();
+    });
+  }
+
   // --- Session search ---
   var searchBtn = ctx.$("search-session-btn");
   var searchBox = ctx.$("session-search");
@@ -577,7 +880,7 @@ export function initSidebar(_ctx) {
   // --- Mobile tab bar ---
   var mobileTabBar = document.getElementById("mobile-tab-bar");
   var mobileTabs = mobileTabBar ? mobileTabBar.querySelectorAll(".mobile-tab") : [];
-  var mobileNewBtn = document.getElementById("mobile-new-session-btn");
+  var mobileHomeBtn = document.getElementById("mobile-home-btn");
 
   function setMobileTabActive(tabName) {
     for (var i = 0; i < mobileTabs.length; i++) {
@@ -615,13 +918,11 @@ export function initSidebar(_ctx) {
     })(mobileTabs[t]);
   }
 
-  if (mobileNewBtn) {
-    mobileNewBtn.addEventListener("click", function () {
-      if (ctx.ws && ctx.connected) {
-        ctx.ws.send(JSON.stringify({ type: "new_session" }));
-        closeSidebar();
-        setMobileTabActive("");
-      }
+  if (mobileHomeBtn) {
+    mobileHomeBtn.addEventListener("click", function () {
+      closeSidebar();
+      setMobileTabActive("");
+      if (ctx.showHomeHub) ctx.showHomeHub();
     });
   }
 
@@ -710,6 +1011,54 @@ export function initSidebar(_ctx) {
 
   // Initial sync even if no resize handle
   syncUserIslandWidth();
+
+  // --- Schedule countdown timer ---
+  startCountdownTimer();
+}
+
+function startCountdownTimer() {
+  if (countdownTimer) clearInterval(countdownTimer);
+  countdownTimer = setInterval(updateCountdowns, 1000);
+}
+
+function updateCountdowns() {
+  if (!ctx || !ctx.getUpcomingSchedules || !ctx.sessionListEl) return;
+  var upcoming = ctx.getUpcomingSchedules(3 * 60 * 1000); // 3 minutes
+
+  // Remove stale container
+  if (countdownContainer && !ctx.sessionListEl.contains(countdownContainer)) {
+    countdownContainer = null;
+  }
+
+  if (upcoming.length === 0) {
+    if (countdownContainer) {
+      countdownContainer.remove();
+      countdownContainer = null;
+    }
+    return;
+  }
+
+  if (!countdownContainer) {
+    countdownContainer = document.createElement("div");
+    countdownContainer.className = "session-countdown-group";
+    ctx.sessionListEl.insertBefore(countdownContainer, ctx.sessionListEl.firstChild);
+  }
+
+  var html = "";
+  var now = Date.now();
+  for (var i = 0; i < upcoming.length; i++) {
+    var u = upcoming[i];
+    var remaining = Math.max(0, Math.ceil((u.nextRunAt - now) / 1000));
+    var min = Math.floor(remaining / 60);
+    var sec = remaining % 60;
+    var timeStr = min + ":" + (sec < 10 ? "0" : "") + sec;
+    var colorStyle = u.color ? " style=\"border-left-color:" + u.color + "\"" : "";
+    html += '<div class="session-countdown-item"' + colorStyle + '>';
+    html += '<span class="session-countdown-name">' + escapeHtml(u.name) + '</span>';
+    html += '<span class="session-countdown-badge">' + timeStr + '</span>';
+    html += '</div>';
+  }
+  countdownContainer.innerHTML = html;
 }
 
 // --- CLI session picker ---
@@ -1249,11 +1598,10 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
   deleteItem.addEventListener("click", function (e) {
     e.stopPropagation();
     closeProjectCtxMenu();
-    ctx.showConfirm('Remove project "' + name + '"?', function () {
-      if (ctx.ws && ctx.connected) {
-        ctx.ws.send(JSON.stringify({ type: "remove_project", slug: slug }));
-      }
-    });
+    // Check for tasks/schedules first before removing
+    if (ctx.ws && ctx.connected) {
+      ctx.ws.send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name }));
+    }
   });
   menu.appendChild(deleteItem);
 
@@ -1366,9 +1714,7 @@ function showEmojiPicker(slug, anchorEl) {
         grid.appendChild(btn);
       })(emojis[i]);
     }
-    if (typeof twemoji !== "undefined") {
-      twemoji.parse(grid, { folder: "svg", ext: ".svg" });
-    }
+    parseEmojis(grid);
     scrollArea.scrollTop = 0;
   }
 
@@ -1383,9 +1729,7 @@ function showEmojiPicker(slug, anchorEl) {
   buildGrid(EMOJI_CATEGORIES[0].emojis);
 
   // Parse tabs with twemoji
-  if (typeof twemoji !== "undefined") {
-    twemoji.parse(tabBar, { folder: "svg", ext: ".svg" });
-  }
+  parseEmojis(tabBar);
 
   document.body.appendChild(picker);
   emojiPickerEl = picker;
@@ -1489,8 +1833,8 @@ function showTrashZone() {
       // Spawn dust particles at trash position
       var rect = trash.getBoundingClientRect();
       spawnDustParticles(rect.left + rect.width / 2, rect.top + rect.height / 2);
-      // Remove project
-      ctx.ws.send(JSON.stringify({ type: "remove_project", slug: slug }));
+      // Check for tasks before removing
+      ctx.ws.send(JSON.stringify({ type: "remove_project_check", slug: slug }));
     }
   });
 }
@@ -1649,9 +1993,7 @@ export function renderIconStrip(projects, currentSlug) {
       var emojiSpan = document.createElement("span");
       emojiSpan.className = "project-emoji";
       emojiSpan.textContent = p.icon;
-      if (typeof twemoji !== "undefined") {
-        twemoji.parse(emojiSpan, { folder: "svg", ext: ".svg" });
-      }
+      parseEmojis(emojiSpan);
       el.appendChild(emojiSpan);
     } else {
       el.appendChild(document.createTextNode(getProjectAbbrev(p.name)));
@@ -1771,11 +2113,16 @@ export function initIconStrip(_ctx) {
     exploreBtn.addEventListener("mouseleave", hideIconTooltip);
   }
 
-  // Tooltip for home icon
+  // Tooltip + click for home icon
   var homeIcon = document.querySelector(".icon-strip-home");
   if (homeIcon) {
     homeIcon.addEventListener("mouseenter", function () { showIconTooltip(homeIcon, "Clay"); });
     homeIcon.addEventListener("mouseleave", hideIconTooltip);
+    homeIcon.addEventListener("click", function (e) {
+      e.preventDefault();
+      if (_ctx.showHomeHub) _ctx.showHomeHub();
+    });
+    homeIcon.style.cursor = "pointer";
   }
 
   // Chevron dropdown on project name

package/lib/public/modules/sticky-notes.js

@@ -1,4 +1,5 @@
 import { refreshIcons, iconHtml } from './icons.js';
+import { parseEmojis } from './markdown.js';
 
 var ctx;
 var notes = new Map();  // id -> { data, el }
@@ -1123,6 +1124,7 @@ function renderArchiveCards() {
       var bodyLines = (noteData.data.text || "").split("\n").slice(1).join("\n").trim();
       if (bodyLines) {
         body.innerHTML = renderMiniMarkdown("_\n" + bodyLines).replace('<div class="sn-title">_</div>', "");
+        parseEmojis(body);
       }
       card.appendChild(body);