clay-server 2.34.0-beta.1 → 2.34.0-beta.10

package/lib/public/css/notifications-center.css

@@ -309,45 +309,49 @@
 
 .light-theme .notif-banner-clear-all {
   background:
-    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.72)),
-    rgba(255,255,255,0.62);
-  border-color: rgba(24, 32, 56, 0.10);
+    linear-gradient(180deg, rgba(255,255,255,0.54), rgba(255,255,255,0.28)),
+    rgba(248,250,255,0.22);
+  backdrop-filter: blur(10px) saturate(1.08);
+  -webkit-backdrop-filter: blur(10px) saturate(1.08);
+  border-color: rgba(255,255,255,0.52);
   color: rgba(36, 45, 66, 0.72);
   box-shadow:
-    inset 0 1px 0 rgba(255,255,255,0.85),
-    0 8px 22px rgba(31, 41, 55, 0.08);
+    inset 0 1px 0 rgba(255,255,255,0.78),
+    0 8px 22px rgba(31, 41, 55, 0.07);
 }
 
 .light-theme .notif-banner-clear-all:hover {
   color: rgba(22, 29, 45, 0.92);
   background:
-    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78)),
-    rgba(255,255,255,0.7);
-  border-color: rgba(24, 32, 56, 0.14);
+    linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.34)),
+    rgba(248,250,255,0.26);
+  border-color: rgba(255,255,255,0.6);
 }
 
 .light-theme .notif-banner {
   background:
-    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.74)),
-    rgba(255,255,255,0.60);
-  border-color: rgba(27, 35, 56, 0.08);
+    linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.22)),
+    rgba(248,250,255,0.2);
+  backdrop-filter: blur(12px) saturate(1.05);
+  -webkit-backdrop-filter: blur(12px) saturate(1.05);
+  border: 1px solid rgba(255,255,255,0.5);
   box-shadow:
-    inset 0 1px 0 rgba(255,255,255,0.88),
-    0 10px 30px rgba(31, 41, 55, 0.10);
+    inset 0 1px 0 rgba(255,255,255,0.72),
+    0 10px 30px rgba(31, 41, 55, 0.09);
 }
 
 .light-theme .notif-banner:hover {
-  border-color: rgba(27, 35, 56, 0.12);
+  border-color: rgba(255,255,255,0.62);
   box-shadow:
-    inset 0 1px 0 rgba(255,255,255,0.92),
-    0 12px 34px rgba(31, 41, 55, 0.12);
+    inset 0 1px 0 rgba(255,255,255,0.8),
+    0 12px 34px rgba(31, 41, 55, 0.11);
 }
 
 .light-theme .notif-banner-icon {
-  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(244,247,252,0.82));
-  border-color: rgba(27, 35, 56, 0.08);
+  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(246,249,255,0.36));
+  border-color: rgba(255,255,255,0.52);
   color: var(--text-secondary);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
 }
 
 .light-theme .notif-banner-project {

package/lib/public/css/sidebar.css

@@ -285,8 +285,7 @@
 /* --- Tools section --- */
 #sidebar-tools {
   flex-shrink: 0;
-  border-bottom: 1px solid var(--border-subtle);
-  padding-bottom: 4px;
+  padding-bottom: 6px;
 }
 
 /* Section header: "Tools" label on the left, a dim keyboard-hint next
@@ -404,17 +403,24 @@
   padding: 6px 2px;
   border-radius: 10px;
   border: none;
-  background: transparent;
+  background: rgba(var(--overlay-rgb), 0.025);
   color: var(--text-muted);
   font-family: inherit;
   font-size: 10px;
   font-weight: 500;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
 .palette-tile .lucide { width: 16px; height: 16px; flex-shrink: 0; }
-.palette-tile:hover { background: var(--sidebar-hover); color: var(--text-secondary); }
-.palette-tile.active { background: var(--sidebar-hover); color: var(--text); }
+.palette-tile:hover {
+  background: rgba(var(--overlay-rgb), 0.08);
+  color: var(--text-secondary);
+  box-shadow: 0 2px 10px rgba(var(--shadow-rgb), 0.08);
+}
+.palette-tile.active {
+  background: rgba(var(--overlay-rgb), 0.08);
+  color: var(--text);
+}
 .palette-tile .tool-btn-label {
   font-size: 10px;
   font-weight: 500;
@@ -585,78 +591,107 @@
   flex-shrink: 0;
 }
 
-.session-list-header {
+.sidebar-sessions-header-row {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 8px 8px 4px 12px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-dimmer);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  padding: 4px 8px 2px 12px;
+  gap: 8px;
 }
 
-.session-list-header-actions {
-  display: flex;
+/* --- Session search --- */
+.sidebar-sessions-search-inline {
+  position: relative;
+  margin-left: auto;
+  width: 150px;
+}
+
+.sidebar-sessions-search-inline.hidden {
+  display: none;
+}
+
+.sidebar-sessions-header-row .sidebar-section-label {
+  padding: 0;
+}
+
+.session-filter-count {
+  display: inline-flex;
   align-items: center;
-  gap: 2px;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: rgba(var(--overlay-rgb), 0.08);
+  color: var(--text-dimmer);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
 }
 
-.session-list-header-actions button {
-  display: flex;
+.session-filter-count.hidden {
+  display: none;
+}
+
+.sidebar-sessions-header-row > #session-header-search-btn {
+  margin-left: auto;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
-  border-radius: 6px;
   border: none;
+  border-radius: 6px;
   background: transparent;
   color: var(--text-dimmer);
   cursor: pointer;
   padding: 0;
-  transition: color 0.15s, background 0.15s;
+  opacity: 0.45;
+  transition: color 0.15s, background 0.15s, opacity 0.15s;
 }
 
-.session-list-header-actions button .lucide { width: 14px; height: 14px; }
-.session-list-header-actions button:hover { color: var(--text); background: var(--sidebar-hover); }
+.sidebar-sessions-header-row > #session-header-search-btn.active,
+.sidebar-sessions-header-row > #session-header-search-btn:hover {
+  color: var(--text);
+  background: var(--sidebar-hover);
+  opacity: 1;
+}
 
-/* --- Session search --- */
-#session-search {
-  padding: 0 12px 8px;
-  position: relative;
+.sidebar-sessions-header-row > #session-header-search-btn .lucide,
+.sidebar-sessions-header-row > #session-header-search-btn svg {
+  width: 14px;
+  height: 14px;
 }
 
-#session-search.hidden {
-  display: none;
+.sidebar-sessions-search-inline:not(.hidden) + #session-header-search-btn {
+  margin-left: 0;
 }
 
-#session-search-input {
+.sidebar-sessions-search-inline input {
   width: 100%;
-  padding: 7px 28px 7px 10px;
+  padding: 6px 28px 6px 10px;
   border-radius: 8px;
   border: 1px solid var(--border);
   background: var(--input-bg);
   color: var(--text);
-  font-size: 13px;
+  font-size: 12px;
   font-family: inherit;
   outline: none;
   transition: border-color 0.15s;
   box-sizing: border-box;
 }
 
-#session-search-input:focus {
+.sidebar-sessions-search-inline input:focus {
   border-color: var(--accent);
 }
 
-#session-search-input::placeholder {
+.sidebar-sessions-search-inline input::placeholder {
   color: var(--text-dimmer);
 }
 
-#session-search-clear {
+.sidebar-sessions-search-inline button {
   position: absolute;
-  right: 16px;
-  top: calc(50% - 4px);
+  right: 6px;
+  top: 50%;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
@@ -672,13 +707,13 @@
   transition: color 0.15s, background 0.15s;
 }
 
-#session-search-clear .lucide { width: 14px; height: 14px; }
-#session-search-clear:hover { color: var(--text); background: var(--sidebar-hover); }
-
-#search-session-btn.active {
-  color: var(--accent);
+.sidebar-sessions-search-inline button.hidden {
+  display: none;
 }
 
+.sidebar-sessions-search-inline button .lucide { width: 14px; height: 14px; }
+.sidebar-sessions-search-inline button:hover { color: var(--text); background: var(--sidebar-hover); }
+
 .session-item.search-match {
   background: var(--accent-12);
   color: var(--text);
@@ -688,10 +723,6 @@
   color: var(--accent);
 }
 
-.session-item.search-dimmed {
-  opacity: 0.35;
-}
-
 .session-highlight {
   background: var(--accent-30);
   color: var(--text);
@@ -700,15 +731,46 @@
 }
 
 #session-list {
-  padding: 2px 8px;
+  padding: 0 8px 2px;
 }
 
 .session-group-header {
-  padding: 10px 12px 4px;
-  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 12px 8px 4px;
+  padding: 0;
+  min-height: 22px;
+  font-size: 10px;
   font-weight: 600;
   color: var(--text-dimmer);
-  letter-spacing: 0.3px;
+  letter-spacing: 0.2px;
+}
+
+.session-group-header-label {
+  min-width: 0;
+  color: var(--text-dimmer);
+}
+
+.session-group-clear-btn {
+  border: none;
+  background: rgba(var(--overlay-rgb), 0.04);
+  color: var(--text-dimmer);
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0 8px;
+  height: 20px;
+  border-radius: 999px;
+  letter-spacing: 0.2px;
+  opacity: 0.82;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.session-group-clear-btn:hover {
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.08);
 }
 
 /* --- Schedule countdown items --- */
@@ -792,6 +854,26 @@
   font-weight: 600;
 }
 
+.session-item.drag-over-above::before,
+.session-item.drag-over-below::after {
+  content: "";
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--accent);
+  pointer-events: none;
+}
+
+.session-item.drag-over-above::before {
+  top: -1px;
+}
+
+.session-item.drag-over-below::after {
+  bottom: -1px;
+}
+
 .session-item .session-processing,
 .mate-session-item .session-processing {
   display: inline-block;
@@ -810,92 +892,226 @@
   box-shadow: 0 0 4px var(--success);
 }
 
-.session-bookmark-btn {
+/* Session unread badge */
+.session-unread-badge {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background: #e74c3c;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  line-height: 18px;
+  text-align: center;
+  z-index: 2;
+}
+
+.session-item .session-item-text {
+  padding-right: 28px;
+}
+
+.session-item:has(.session-presence) .session-item-text {
+  padding-right: 54px;
+}
+
+.session-close-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
-  width: 20px;
-  height: 20px;
-  border-radius: 6px;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
   border: none;
+  border-radius: 999px;
   background: transparent;
   color: var(--text-dimmer);
   cursor: pointer;
-  align-items: center;
-  justify-content: center;
   padding: 0;
-  margin-right: 2px;
-  flex-shrink: 0;
   opacity: 0;
-  transition: opacity 0.2s ease, color 0.15s, background 0.15s;
+  pointer-events: none;
+  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
 }
 
-.session-bookmark-btn.hover {
-  position: absolute;
-  right: 30px;
-  top: 50%;
-  transform: translateY(-50%);
+.session-close-btn .lucide,
+.session-close-btn svg {
+  width: 12px;
+  height: 12px;
+  display: block;
 }
 
-.session-bookmark-btn.inline {
-  margin-right: 2px;
-  flex-shrink: 0;
+.session-item:hover .session-close-btn,
+.session-loop-child:hover .session-close-btn,
+.session-item:focus-within .session-close-btn,
+.session-loop-child:focus-within .session-close-btn {
+  opacity: 0.82;
+  pointer-events: auto;
+}
+
+.session-close-btn:hover {
+  opacity: 1;
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.08);
+}
+
+.session-close-btn.armed {
+  opacity: 1;
+  pointer-events: auto;
+  width: 20px;
+  height: 20px;
+  color: #fff;
+  background: rgba(220, 38, 38, 0.92);
+  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.18);
 }
 
-.session-bookmark-btn .lucide,
-.session-bookmark-btn svg {
+.session-close-btn.armed:hover {
+  color: #fff;
+  background: rgba(220, 38, 38, 1);
+}
+
+.session-close-btn.armed .lucide,
+.session-close-btn.armed svg {
   width: 13px;
   height: 13px;
-  display: block;
 }
 
-.session-item:hover .session-bookmark-btn.hover,
-.session-item:focus-within .session-bookmark-btn.hover,
-.session-bookmark-btn.bookmarked {
+.session-item:hover .session-unread-badge,
+.session-item:focus-within .session-unread-badge {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.session-top-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2px;
+  padding: 0 0 2px;
+}
+
+.session-top-action {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 34px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-muted);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  min-width: 0;
+  opacity: 0.62;
+  transition: background 0.15s, color 0.15s, opacity 0.15s;
+}
+
+.session-top-action .lucide,
+.session-top-action svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.session-top-action:hover {
+  background: var(--sidebar-hover);
+  color: var(--text);
   opacity: 1;
 }
 
-.session-bookmark-btn:hover {
-  color: var(--accent);
-  background: rgba(var(--overlay-rgb), 0.06);
+.session-favorites-section {
+  min-height: 6px;
+  margin: 0 8px;
+  border-radius: 12px;
+  transition: background 0.15s ease, box-shadow 0.15s ease;
 }
 
-.session-bookmark-btn.bookmarked {
-  color: var(--accent);
+.session-favorites-empty {
+  margin: 2px 0 0;
+  padding: 6px 2px 2px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  font-size: 11px;
+  line-height: 1.4;
+  color: color-mix(in srgb, var(--text-dimmer) 88%, transparent);
+  text-align: center;
+  text-shadow: 0 0 10px rgba(var(--shadow-rgb), 0.08);
 }
 
-.session-bookmark-btn.bookmarked .lucide,
-.session-bookmark-btn.bookmarked svg {
-  fill: currentColor;
-  stroke: currentColor;
+.session-list-sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  background: var(--sidebar-bg);
 }
 
-/* Session unread badge */
-.session-unread-badge {
+.session-favorites-divider {
+  position: relative;
+  margin: 0 12px 2px;
+  height: 18px;
+  border-radius: 999px;
+}
+
+.session-favorites-divider::before {
+  content: "";
   position: absolute;
-  right: 8px;
+  left: 0;
+  right: 0;
   top: 50%;
+  height: 1px;
+  background: var(--border-subtle, var(--border));
   transform: translateY(-50%);
-  min-width: 18px;
-  height: 18px;
-  border-radius: 9px;
-  background: #e74c3c;
-  color: #fff;
-  font-size: 11px;
-  font-weight: 700;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  padding: 0 5px;
-  line-height: 18px;
-  text-align: center;
-  z-index: 2;
 }
 
-.session-item .session-item-text {
-  padding-right: 28px;
+.session-favorites-section.drag-hover,
+.session-regular-drop.drag-hover {
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+.session-favorites-section.drag-hover {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
+}
+
+.session-favorites-section.drag-hover .session-favorites-empty {
+  background: transparent;
+  color: var(--text);
+}
+
+.session-favorites-divider.drag-hover::before {
+  background: var(--accent);
+  height: 2px;
+}
+
+.session-regular-drop {
+  min-height: 12px;
+  border-radius: 12px;
+}
+
+.session-item[draggable="true"] {
+  -webkit-user-drag: element;
+}
+
+.session-item.dragging {
+  opacity: 0.45;
 }
 
 .session-unread-badge.has-unread {
   display: flex;
+  transition: opacity 0.15s ease;
 }
 
 .session-more-btn {
@@ -932,6 +1148,14 @@
   margin-right: 2px;
 }
 
+.session-item .session-presence {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 0;
+}
+
 .session-presence-avatar {
   width: 18px;
   height: 18px;
@@ -1155,6 +1379,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
+  padding-right: 22px;
 }
 
 .session-loop-child .session-processing {