clay-server 2.11.0 → 2.12.0

package/lib/public/css/icon-strip.css

@@ -176,11 +176,11 @@
   color: #fff;
 }
 
-/* --- Socket status indicator on icon (bottom-right dot) --- */
+/* --- Socket status indicator on icon (top-left dot) --- */
 .icon-strip-status {
   position: absolute;
-  bottom: 3px;
-  right: 3px;
+  top: 3px;
+  left: 3px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -192,6 +192,7 @@
 
 /* Show dot only on active item or when processing */
 .icon-strip-item.active .icon-strip-status,
+.icon-strip-wt-item.active .icon-strip-status,
 .icon-strip-status.processing {
   opacity: 1;
 }
@@ -733,8 +734,8 @@
 /* Project unread badge */
 .icon-strip-project-badge {
   position: absolute;
-  top: -2px;
-  right: -2px;
+  top: 1px;
+  right: 1px;
   min-width: 18px;
   height: 18px;
   border-radius: 9px;
@@ -888,6 +889,308 @@
   text-align: center;
 }
 
+/* --- Worktree folder groups --- */
+.icon-strip-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.icon-strip-group .folder-header {
+  position: relative;
+}
+
+.icon-strip-group-chevron {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dimmer);
+  pointer-events: auto;
+  cursor: pointer;
+  transition: transform 0.15s ease, background 0.15s, border-color 0.15s;
+  z-index: 2;
+  line-height: 1;
+}
+
+.icon-strip-group-chevron i,
+.icon-strip-group-chevron svg {
+  width: 10px;
+  height: 10px;
+}
+
+.icon-strip-group-chevron:hover {
+  background: var(--bg-hover, var(--bg-alt));
+  border-color: var(--text-dimmer);
+  color: var(--text-secondary);
+}
+
+.icon-strip-group.collapsed .icon-strip-group-chevron {
+  background: var(--border);
+}
+
+.icon-strip-group-items {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  transition: max-height 0.2s ease;
+  max-height: 500px;
+  border-left: 2px solid var(--border);
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.icon-strip-group.collapsed .icon-strip-group-items {
+  max-height: 0;
+}
+
+/* Worktree items (smaller than regular project icons) */
+.icon-strip-wt-item {
+  width: 48px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  text-decoration: none;
+  color: var(--text-secondary);
+  transition: background 0.15s;
+}
+
+.icon-strip-wt-item::before {
+  content: "";
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: var(--bg-alt);
+  opacity: 0.7;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.icon-strip-wt-item:hover::before {
+  opacity: 1;
+}
+
+.icon-strip-wt-item.active::before {
+  background: var(--accent);
+  opacity: 1;
+}
+
+.icon-strip-wt-item.active {
+  color: #fff;
+}
+
+.icon-strip-wt-item .wt-branch-abbrev {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  pointer-events: none;
+  position: relative;
+  z-index: 1;
+}
+
+/* Disabled/inaccessible worktree */
+.icon-strip-wt-item.wt-disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.icon-strip-wt-item.wt-disabled::after {
+  content: "\1F6AB";
+  position: absolute;
+  font-size: 14px;
+  z-index: 3;
+  filter: grayscale(0.3);
+}
+
+/* Group add button */
+.icon-strip-group-add {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  border: 1.5px dashed var(--border);
+  background: transparent;
+  color: var(--text-dimmer);
+  font-size: 16px;
+  font-weight: 400;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 2px 0 4px 0;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+
+.icon-strip-group-add:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: rgba(var(--accent-rgb, 124, 58, 237), 0.08);
+}
+
+/* --- Worktree creation modal --- */
+.wt-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9998;
+}
+
+.wt-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  min-width: 340px;
+  max-width: 420px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.wt-modal-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+}
+
+.wt-modal-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 10px 0 4px 0;
+}
+
+.wt-modal-label:first-of-type {
+  margin-top: 0;
+}
+
+.wt-modal-input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-alt);
+  color: var(--text-primary);
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.wt-modal-input:focus {
+  border-color: var(--accent);
+}
+
+select.wt-modal-input {
+  appearance: auto;
+  cursor: pointer;
+}
+
+.wt-modal-error {
+  color: var(--error, #ef4444);
+  font-size: 12px;
+  margin-top: 8px;
+  display: none;
+}
+
+.wt-modal-error.visible {
+  display: block;
+}
+
+.wt-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.wt-modal-btn {
+  padding: 7px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  background: var(--bg-alt);
+  color: var(--text-primary);
+  font-family: inherit;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.wt-modal-btn:hover {
+  background: var(--bg-hover, var(--bg-alt));
+}
+
+.wt-modal-btn.primary {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+.wt-modal-btn.primary:hover {
+  opacity: 0.9;
+}
+
+.wt-modal-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* --- Mobile worktree folder --- */
+.mobile-project-folder {
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile-project-item.wt-item {
+  padding-left: 28px;
+  opacity: 0.85;
+}
+
+.mobile-project-item.wt-disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.mobile-folder-chevron {
+  font-size: 8px;
+  color: var(--text-dimmer);
+  margin-left: auto;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+  padding: 4px;
+}
+
+.mobile-project-folder.collapsed .mobile-folder-chevron {
+  transform: rotate(-90deg);
+}
+
+.mobile-folder-items {
+  overflow: hidden;
+  transition: max-height 0.2s ease;
+  max-height: 500px;
+}
+
+.mobile-project-folder.collapsed .mobile-folder-items {
+  max-height: 0;
+}
+
 /* --- Per-project presence avatars --- */
 /* --- Mobile: hide icon strip --- */
 @media (max-width: 768px) {

package/lib/public/css/menus.css

@@ -426,22 +426,7 @@
   filter: brightness(1.3);
 }
 
-.tooltip {
-  position: fixed;
-  background: var(--code-bg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 6px 12px;
-  font-size: 12px;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.15s;
-  z-index: 200;
-}
-
-.tooltip.visible { opacity: 1; }
+/* .tooltip styles moved to css/tooltip.css */
 
 /* --- Config chip (inline in input bottom bar) --- */
 #config-chip-wrap {

package/lib/public/css/messages.css

@@ -8,6 +8,13 @@
   -webkit-overflow-scrolling: touch;
   overscroll-behavior-y: contain;
   padding: 20px 0 12px;
+  position: relative;
+}
+
+/* --- Remote cursors (Figma-style) --- */
+.remote-cursor {
+  pointer-events: none;
+  z-index: 9999;
 }
 
 /* --- Sticky todo (inline in title bar) --- */

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

@@ -0,0 +1,150 @@
+/* ==========================================================================
+   In-session search (Cmd+F / Ctrl+F)
+   ========================================================================== */
+
+/* --- Toggle button (in title bar, matches sticky-notes / terminal buttons) --- */
+#find-in-session-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  padding: 4px;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+  position: relative;
+}
+
+#find-in-session-btn .lucide { width: 15px; height: 15px; }
+#find-in-session-btn:hover { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.04); border-color: var(--border); }
+#find-in-session-btn.active { color: var(--text); background: rgba(var(--overlay-rgb),0.06); border-color: var(--border); }
+
+/* --- Floating search bar --- */
+.session-search-bar {
+  position: absolute;
+  top: 0;
+  right: 16px;
+  z-index: 50;
+  animation: sessionSearchSlideDown 0.15s ease-out;
+}
+
+.session-search-bar.hidden {
+  display: none;
+}
+
+.session-search-inner {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-top: none;
+  border-radius: 0 0 10px 10px;
+  padding: 6px 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+#find-in-session-input {
+  width: 200px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 13px;
+  outline: none;
+  font-family: inherit;
+}
+
+#find-in-session-input:focus {
+  border-color: var(--accent);
+}
+
+#find-in-session-input::placeholder {
+  color: var(--text-muted);
+}
+
+.session-search-count {
+  font-size: 11px;
+  color: var(--text-muted);
+  min-width: 60px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.session-search-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.session-search-btn:hover {
+  background: var(--hover);
+  color: var(--text);
+}
+
+/* Highlight marks */
+mark.session-search-highlight {
+  background: var(--accent-30, rgba(255, 165, 0, 0.3));
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+mark.session-search-highlight-active {
+  background: var(--accent, #f59e0b);
+  color: var(--bg, #fff);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+@keyframes sessionSearchSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Timeline (scroll map) - reuses rewind-timeline styles */
+.find-in-session-timeline {
+  position: absolute;
+  right: 8px;
+  z-index: 10;
+  pointer-events: none;
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  #find-in-session-btn {
+    display: none;
+  }
+
+  .session-search-bar {
+    right: 8px;
+    left: 8px;
+  }
+
+  #find-in-session-input {
+    flex: 1;
+    width: auto;
+    min-width: 0;
+  }
+
+  .session-search-inner {
+    padding: 4px 6px;
+  }
+}

package/lib/public/css/sidebar.css

@@ -1001,6 +1001,36 @@
   color: var(--text-secondary);
 }
 
+/* Cursor sharing toggle */
+.cursor-share-btn {
+  position: relative;
+}
+.cursor-share-btn.on {
+  color: var(--accent, #0ACF83);
+}
+.cursor-share-btn.off {
+  color: var(--text-muted);
+  opacity: 0.5;
+}
+.cursor-share-btn.off::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 22px;
+  height: 2px;
+  background: var(--danger, #F24822);
+  transform: translate(-50%, -50%) rotate(-45deg);
+  border-radius: 1px;
+  pointer-events: none;
+}
+.cursor-share-btn.on:hover {
+  color: var(--accent, #0ACF83);
+}
+.cursor-share-btn.off:hover {
+  opacity: 0.7;
+}
+
 #layout.sidebar-collapsed #user-island .user-island-info,
 #layout.sidebar-collapsed #user-island .user-island-actions {
   display: none;

package/lib/public/css/tooltip.css

@@ -0,0 +1,20 @@
+/* ==========================================================================
+   Global JS Tooltip (unified)
+   ========================================================================== */
+
+.tooltip {
+  position: fixed;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s;
+  z-index: 10000;
+}
+
+.tooltip.visible { opacity: 1; }

package/lib/public/index.html

@@ -200,7 +200,7 @@
       <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>
-          <button id="hamburger-btn" aria-label="Toggle sidebar"><i data-lucide="menu"></i></button>
+          <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>
@@ -208,6 +208,7 @@
         <div id="todo-sticky" class="hidden"></div>
         <div id="ralph-sticky" class="hidden"></div>
         <div class="status">
+          <button id="find-in-session-btn" title="Search in session (Ctrl+F)"><i data-lucide="search"></i></button>
           <button id="sticky-notes-toggle-btn" title="Sticky notes"><i data-lucide="sticky-note"></i><span class="sticky-notes-count hidden"></span></button>
           <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
         </div>

package/lib/public/modules/notifications.js

@@ -190,64 +190,7 @@ export function initNotifications(_ctx) {
   })();
 
   // Onboarding pill removed — install flow handled by PWA install button
-
-  // --- Tooltip ---
-  var tooltipEl = document.createElement("div");
-  tooltipEl.className = "tooltip";
-  document.body.appendChild(tooltipEl);
-  var tooltipTimer = null;
-
-  function showTooltipAt(target) {
-    tooltipEl.textContent = target.dataset.tip;
-    tooltipEl.style.top = "-9999px";
-    tooltipEl.style.left = "0";
-    tooltipEl.style.right = "";
-    tooltipEl.style.transform = "";
-    tooltipEl.classList.add("visible");
-    var tipW = tooltipEl.offsetWidth;
-    var rect = target.getBoundingClientRect();
-    var centerX = rect.left + rect.width / 2;
-    var leftPos = centerX - tipW / 2;
-    tooltipEl.style.top = (rect.bottom + 8) + "px";
-    if (leftPos + tipW > window.innerWidth - 8) {
-      tooltipEl.style.left = "";
-      tooltipEl.style.right = "8px";
-    } else {
-      tooltipEl.style.left = Math.max(8, leftPos) + "px";
-      tooltipEl.style.right = "";
-    }
-  }
-
-  function hideTooltip() {
-    tooltipEl.classList.remove("visible");
-    clearTimeout(tooltipTimer);
-  }
-
-  document.addEventListener("click", function (e) {
-    var target = e.target.closest("[data-tip]");
-    if (target) {
-      showTooltipAt(target);
-      clearTimeout(tooltipTimer);
-      tooltipTimer = setTimeout(hideTooltip, 2000);
-    } else {
-      hideTooltip();
-    }
-  });
-
-  document.addEventListener("mouseover", function (e) {
-    var target = e.target.closest("[data-tip]");
-    if (target) {
-      clearTimeout(tooltipTimer);
-      showTooltipAt(target);
-    }
-  });
-
-  document.addEventListener("mouseout", function (e) {
-    var target = e.target.closest("[data-tip]");
-    if (target) {
-      hideTooltip();
-    }
-  });
+  // Tooltip system moved to modules/tooltip.js
 
   // --- iOS Safari detection ---
   var isIOSSafari = (function () {