clay-server 2.33.1 → 2.34.0-beta.10

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 {

package/lib/public/index.html

@@ -197,17 +197,14 @@
         </div>
         <div id="sidebar-sessions-header">
           <div id="sessions-header-content">
-            <div class="session-list-header">
-              <span>Sessions</span>
-              <div class="session-list-header-actions">
-                <button id="new-session-btn" type="button" data-tip="New session"><i data-lucide="plus"></i></button>
-                <button id="resume-session-btn" type="button" data-tip="Import CLI session"><i data-lucide="import"></i></button>
-                <button id="search-session-btn" type="button" data-tip="Search sessions"><i data-lucide="search"></i></button>
+            <div class="sidebar-sessions-header-row">
+              <span class="sidebar-section-label">Sessions</span>
+              <span id="session-filter-count" class="session-filter-count hidden"></span>
+              <div id="session-header-search-inline" class="sidebar-sessions-search-inline hidden">
+                <input id="session-header-search-input" type="text" placeholder="Search sessions..." autocomplete="off" spellcheck="false" />
+                <button id="session-header-search-clear" type="button" aria-label="Clear search"><i data-lucide="x"></i></button>
               </div>
-            </div>
-            <div id="session-search" class="hidden">
-              <input id="session-search-input" type="text" placeholder="Search sessions..." autocomplete="off" spellcheck="false" />
-              <button id="session-search-clear" type="button" aria-label="Clear search"><i data-lucide="x"></i></button>
+              <button id="session-header-search-btn" type="button" aria-label="Search sessions" title="Search sessions"><i data-lucide="search"></i></button>
             </div>
           </div>
           <div id="files-header-content" class="hidden"></div>
@@ -1855,7 +1852,7 @@
             <div class="mate-intro-step"><span class="mate-intro-step-num">2</span> Have a short interview where your Mate gets to know you</div>
             <div class="mate-intro-step"><span class="mate-intro-step-num">3</span> Start talking</div>
           </div>
-          <p class="mate-intro-privacy">Mates run on Claude Code. No separate API keys or external services needed. Your conversations stay on your Clay server and are never stored elsewhere.</p>
+          <p class="mate-intro-privacy">Mates run on Claude Code or ChatGPT Codex, your choice. No separate API keys or external services needed. Your conversations stay on your Clay server and are never stored elsewhere.</p>
         </div>
       </div>
       <!-- Step 1: Relationship -->
@@ -1996,26 +1993,24 @@
         </div>
       </div>
 
-      <!-- Step 4: Autonomy -->
+      <!-- Step 4: Vendor -->
       <div class="mate-step" data-step="4">
-        <h3>How much should they do on their own?</h3>
-        <p class="mate-hint">This is about how much freedom your mate gets before checking with you.</p>
-        <div class="mate-autonomy-options">
-          <button class="mate-autonomy-btn" data-value="always_ask">
-            <span class="mate-autonomy-title">Ask me everything</span>
-            <span class="mate-autonomy-desc">"Before you do anything, run it by me first."</span>
-          </button>
-          <button class="mate-autonomy-btn active" data-value="minor_stuff_ok">
-            <span class="mate-autonomy-title">Small stuff is fine</span>
-            <span class="mate-autonomy-desc">"Little things, just do it. Anything big, ask me."</span>
-          </button>
-          <button class="mate-autonomy-btn" data-value="mostly_autonomous">
-            <span class="mate-autonomy-title">Mostly free</span>
-            <span class="mate-autonomy-desc">"Do your thing. Only check if it's really important."</span>
+        <h3>Which model should power them?</h3>
+        <p class="mate-hint">You can switch this anytime from the mate's settings.</p>
+        <div class="mate-vendor-option-list">
+          <button class="mate-vendor-option-btn active" data-value="claude">
+            <img src="/claude-code-avatar.png" class="mate-vendor-option-icon" alt="Claude Code">
+            <div class="mate-vendor-option-text">
+              <span class="mate-vendor-option-title">Claude Code</span>
+              <span class="mate-vendor-option-desc">Anthropic's Claude. Thoughtful, conversational, strong at nuanced reasoning and long-form writing. A good default for most mates.</span>
+            </div>
           </button>
-          <button class="mate-autonomy-btn" data-value="fully_autonomous">
-            <span class="mate-autonomy-title">Full freedom</span>
-            <span class="mate-autonomy-desc">"Just get it done and tell me after."</span>
+          <button class="mate-vendor-option-btn" data-value="codex">
+            <img src="/codex-avatar.png" class="mate-vendor-option-icon" alt="ChatGPT Codex">
+            <div class="mate-vendor-option-text">
+              <span class="mate-vendor-option-title">ChatGPT Codex</span>
+              <span class="mate-vendor-option-desc">OpenAI's GPT coding agent. Fast and direct, strong at code generation and tight execution loops. Good for builder-type mates.</span>
+            </div>
           </button>
         </div>
       </div>

package/lib/public/modules/app-dm.js

@@ -474,8 +474,6 @@ export function buildMateInterviewPrompt(mate) {
     var styles = sd.communicationStyle.map(function (s) { return styleLabels[s] || s.replace(/_/g, " "); });
     parts.push("Communication: " + styles.join(", "));
   }
-  if (sd.autonomy) parts.push("Autonomy: " + sd.autonomy.replace(/_/g, " "));
-
   return "Use the /clay-mate-interview skill to start the interview.\n\n" +
     "Mate ID: " + mate.id + "\n" +
     "Mate Directory: .claude/mates/" + mate.id + "\n\n" +