clay-server 2.26.0-beta.8 → 2.26.0

package/lib/public/css/mates.css

@@ -487,24 +487,24 @@
   background: var(--border, #333);
 }
 
-/* === Mate badge in user strip === */
-.icon-strip-user-mate-badge {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 14px;
-  height: 14px;
-  background: var(--accent, #6c5ce7);
-  border-radius: 50%;
-  border: 2px solid var(--bg, #282a36);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* === Mate avatar in user strip: squircle + desaturate === */
+.icon-strip-mate .icon-strip-user-avatar {
+  border-radius: 8px;
+  filter: saturate(0.65);
 }
-.icon-strip-user-mate-badge svg {
-  width: 8px;
-  height: 8px;
-  color: #fff;
+.icon-strip-mate:hover .icon-strip-user-avatar,
+.icon-strip-mate.mention-active .icon-strip-user-avatar {
+  filter: saturate(1);
+}
+.icon-strip-mate.active .icon-strip-user-avatar {
+  filter: saturate(1);
+  box-shadow: 0 0 0 2px var(--accent);
+  border-radius: 8px;
+}
+
+/* Hide legacy bot badge (replaced by squircle shape) */
+.icon-strip-user-mate-badge {
+  display: none;
 }
 
 /* Mate item in DM picker */
@@ -2342,7 +2342,9 @@ body.mate-dm-active .turn-meta {
    ========================================================================== */
 
 /* --- Mate Thinking: flex layout matching msg-assistant --- */
-body.mate-dm-active .mate-thinking {
+/* Applies in both Mate DM and channel project chat */
+body.mate-dm-active .mate-thinking,
+body.wide-view .mate-thinking {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -2351,10 +2353,12 @@ body.mate-dm-active .mate-thinking {
   margin: 0;
   max-width: 100%;
 }
-body.mate-dm-active .mate-thinking:hover {
+body.mate-dm-active .mate-thinking:hover,
+body.wide-view .mate-thinking:hover {
   background: var(--bg-alt);
 }
-body.mate-dm-active .mate-thinking > .dm-bubble-avatar {
+body.mate-dm-active .mate-thinking > .dm-bubble-avatar,
+body.wide-view .mate-thinking > .dm-bubble-avatar {
   display: block;
   width: 36px;
   height: 36px;
@@ -2362,7 +2366,8 @@ body.mate-dm-active .mate-thinking > .dm-bubble-avatar {
   flex-shrink: 0;
   margin-top: 2px;
 }
-body.mate-dm-active .mate-thinking > .dm-bubble-content {
+body.mate-dm-active .mate-thinking > .dm-bubble-content,
+body.wide-view .mate-thinking > .dm-bubble-content {
   flex: 1;
   min-width: 0;
 }
@@ -2373,7 +2378,8 @@ body.mate-dm-active .mate-thinking > .dm-bubble-content {
   gap: 4px;
   padding: 4px 0;
 }
-body.mate-dm-active .mate-thinking:not(.done) .mate-thinking-row {
+body.mate-dm-active .mate-thinking:not(.done) .mate-thinking-row,
+body.wide-view .mate-thinking:not(.done) .mate-thinking-row {
   display: flex;
 }
 .mate-thinking-dots {
@@ -2400,10 +2406,16 @@ body.mate-dm-active .mate-thinking:not(.done) .mate-thinking-row {
 }
 
 /* When done, hide mate row (JS does this too), show compact expandable header */
-body.mate-dm-active .mate-thinking.done .mate-thinking-row {
+body.mate-dm-active .mate-thinking.done .mate-thinking-row,
+body.wide-view .mate-thinking.done .mate-thinking-row {
   display: none;
 }
-body.mate-dm-active .mate-thinking.done .thinking-header {
+body.mate-dm-active .mate-thinking.done .mate-thinking-activity,
+body.wide-view .mate-thinking.done .mate-thinking-activity {
+  display: none;
+}
+body.mate-dm-active .mate-thinking.done .thinking-header,
+body.wide-view .mate-thinking.done .thinking-header {
   display: inline-flex !important;
   font-size: 12px;
   padding: 4px 10px;
@@ -2412,16 +2424,19 @@ body.mate-dm-active .mate-thinking.done .thinking-header {
   opacity: 0.7;
   transition: opacity 0.15s;
 }
-body.mate-dm-active .mate-thinking.done .thinking-header:hover {
+body.mate-dm-active .mate-thinking.done .thinking-header:hover,
+body.wide-view .mate-thinking.done .thinking-header:hover {
   opacity: 1;
   background: rgba(var(--overlay-rgb), 0.08);
 }
-body.mate-dm-active .mate-thinking .thinking-content {
+body.mate-dm-active .mate-thinking .thinking-content,
+body.wide-view .mate-thinking .thinking-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.25s ease;
 }
-body.mate-dm-active .mate-thinking.expanded .thinking-content {
+body.mate-dm-active .mate-thinking.expanded .thinking-content,
+body.wide-view .mate-thinking.expanded .thinking-content {
   max-height: 2000px;
 }
 
@@ -2476,8 +2491,10 @@ body.mate-dm-active .mate-tool-group .tool-name {
   color: var(--text-muted);
 }
 
-/* --- Mate Permission: flex layout matching msg-assistant --- */
-body.mate-dm-active .mate-permission {
+/* --- Conversational Permission: flex layout matching msg-assistant --- */
+/* Applies in both Mate DM and channel project chat */
+body.mate-dm-active .mate-permission,
+body.wide-view .mate-permission {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -2490,10 +2507,12 @@ body.mate-dm-active .mate-permission {
   margin: 0;
   max-width: 100%;
 }
-body.mate-dm-active .mate-permission:hover {
+body.mate-dm-active .mate-permission:hover,
+body.wide-view .mate-permission:hover {
   background: var(--bg-alt);
 }
-body.mate-dm-active .mate-permission > .dm-bubble-avatar {
+body.mate-dm-active .mate-permission > .dm-bubble-avatar,
+body.wide-view .mate-permission > .dm-bubble-avatar {
   display: block;
   width: 36px;
   height: 36px;
@@ -2501,7 +2520,8 @@ body.mate-dm-active .mate-permission > .dm-bubble-avatar {
   flex-shrink: 0;
   margin-top: 2px;
 }
-body.mate-dm-active .mate-permission > .dm-bubble-content {
+body.mate-dm-active .mate-permission > .dm-bubble-content,
+body.wide-view .mate-permission > .dm-bubble-content {
   flex: 1;
   min-width: 0;
 }
@@ -2569,14 +2589,14 @@ body.mate-dm-active .mate-permission > .dm-bubble-content {
 .mate-permission-deny {
   color: var(--text-muted);
 }
-/* Resolved state */
-body.mate-dm-active .mate-permission.resolved .mate-permission-actions {
+/* Resolved state (works in both Mate DM and channel project chat) */
+.mate-permission.resolved .mate-permission-actions {
   pointer-events: none;
 }
-body.mate-dm-active .mate-permission.resolved .mate-permission-reply {
+.mate-permission.resolved .mate-permission-reply {
   display: none;
 }
-body.mate-dm-active .mate-permission.resolved .permission-decision-label {
+.mate-permission.resolved .permission-decision-label {
   font-size: 12px;
   color: var(--text-dimmer);
 }
@@ -2732,27 +2752,6 @@ body.mate-dm-active .activity-inline:not(.mention-activity-bar):not(.mate-pre-ac
     -webkit-tap-highlight-color: transparent;
   }
 
-  .mate-mobile-back {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-    flex-shrink: 0;
-    background: none;
-    border: none;
-    color: #fff;
-    cursor: pointer;
-    padding: 0;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .mate-mobile-back svg {
-    width: 22px;
-    height: 22px;
-  }
-
   .mate-mobile-avatar {
     width: 32px;
     height: 32px;

package/lib/public/css/mention.css

@@ -107,8 +107,8 @@
   padding: 3px 6px 3px 4px;
   margin: 0 0 4px 0;
   border-radius: 6px;
-  background: color-mix(in srgb, var(--chip-color, #6c5ce7) 12%, transparent);
-  border: 1px solid color-mix(in srgb, var(--chip-color, #6c5ce7) 25%, transparent);
+  background: color-mix(in srgb, var(--chip-color, #6c5ce7) 15%, var(--bg-alt));
+  border: 1px solid color-mix(in srgb, var(--chip-color, #6c5ce7) 30%, var(--border));
   cursor: default;
   flex-shrink: 0;
   width: fit-content;
@@ -131,19 +131,22 @@
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
+  line-height: 18px;
 }
 
 .input-mention-chip-remove {
   background: none;
   border: none;
-  padding: 0 2px;
+  padding: 0;
   margin: 0;
   cursor: pointer;
   font-size: 15px;
-  line-height: 1;
+  line-height: 18px;
   color: var(--text-dimmer);
   opacity: 0.6;
   transition: opacity 0.1s;
+  display: flex;
+  align-items: center;
 }
 
 .input-mention-chip-remove:hover {

package/lib/public/css/messages.css

@@ -1798,6 +1798,23 @@ body.wide-view .msg-assistant:hover {
   background: var(--bg-alt);
 }
 
+/* Grouped messages: same sender within same minute, hide avatar + header */
+body.wide-view .msg-user.grouped > .dm-bubble-avatar,
+body.wide-view .msg-assistant.grouped > .dm-bubble-avatar,
+body.mate-dm-active .msg-assistant.grouped > .dm-bubble-avatar {
+  visibility: hidden;
+}
+body.wide-view .msg-user.grouped .dm-bubble-header,
+body.wide-view .msg-assistant.grouped .dm-bubble-header,
+body.mate-dm-active .msg-assistant.grouped .dm-bubble-header {
+  display: none;
+}
+body.wide-view .msg-user.grouped,
+body.wide-view .msg-assistant.grouped,
+body.mate-dm-active .msg-assistant.grouped {
+  padding-top: 1px;
+}
+
 body.wide-view .msg-user {
   justify-content: flex-start;
 }

package/lib/public/css/mobile-nav.css

@@ -342,7 +342,6 @@
     margin-bottom: 4px;
     background: none;
     border: none;
-    border-bottom: 1px solid var(--border-subtle);
     color: var(--accent);
     font-family: "Pretendard", system-ui, sans-serif;
     font-size: 15px;
@@ -351,6 +350,9 @@
     text-align: left;
     -webkit-tap-highlight-color: transparent;
   }
+  .mobile-session-new:last-of-type {
+    border-bottom: 1px solid var(--border-subtle);
+  }
 
   .mobile-session-new:active {
     background: rgba(var(--overlay-rgb), 0.06);

package/lib/public/css/rewind.css

@@ -197,8 +197,13 @@
 }
 
 .context-card-header .context-card-icon {
-  font-size: 13px;
   opacity: 0.7;
+  display: inline-flex;
+  align-items: center;
+}
+.context-card-header .context-card-icon .lucide {
+  width: 14px;
+  height: 14px;
 }
 
 .context-card-screenshot {
@@ -226,10 +231,16 @@
 
 .context-card-meta {
   display: flex;
-  justify-content: space-between;
-  align-items: baseline;
+  align-items: center;
   margin-top: 8px;
-  gap: 12px;
+  gap: 6px;
+}
+.context-card-favicon {
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+  flex-shrink: 0;
+  object-fit: contain;
 }
 
 .context-card-title {
@@ -240,6 +251,8 @@
   text-overflow: ellipsis;
   flex: 1;
   min-width: 0;
+  flex: 1;
+  min-width: 0;
 }
 
 .context-card-domain {

package/lib/public/index.html

@@ -256,11 +256,11 @@
         <button id="mate-sticky-notes-btn"><i data-lucide="sticky-note"></i> <span>Sticky Notes</span></button>
         <button id="mate-skills-btn"><i data-lucide="puzzle"></i> <span>Skills</span></button>
         <button id="mate-scheduler-btn"><i data-lucide="calendar-clock"></i> <span>Scheduled Tasks</span></button>
-        <button id="mate-debate-btn"><i data-lucide="mic"></i> <span>Debate</span></button>
       </div>
       <div id="mate-sidebar-conversations">
         <div class="mate-sidebar-sessions-header">
           <span>Conversations</span>
+          <button id="mate-debate-btn" class="mate-debate-pill" title="New Debate"><i data-lucide="mic"></i> Debate</button>
           <div class="mate-sidebar-actions">
             <button id="mate-search-session-btn" type="button" title="Search sessions"><i data-lucide="search"></i></button>
             <button id="mate-new-session-btn" type="button" title="New session"><i data-lucide="plus"></i></button>
@@ -332,7 +332,6 @@
           <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>
@@ -1507,30 +1506,38 @@
   </div>
 </div>
 
-<!-- Debate Modal -->
+<!-- Debate Modal (Wizard) -->
 <div id="debate-modal" class="hidden">
   <div class="debate-modal-backdrop"></div>
   <div class="debate-modal-card">
     <div class="debate-modal-header">
       <span><i data-lucide="mic"></i> New Debate</span>
+      <div class="debate-wizard-steps">
+        <span class="debate-step-dot active" data-step="0"></span>
+        <span class="debate-step-dot" data-step="1"></span>
+      </div>
       <button id="debate-modal-close">&times;</button>
     </div>
-    <div class="debate-modal-body">
-      <label class="debate-field-label" for="debate-topic-input">Topic <span class="debate-field-req">*</span></label>
-      <textarea id="debate-topic-input" rows="2" placeholder="e.g. Should AI development be regulated?"></textarea>
-      <label class="debate-field-label" for="debate-panel-list">Select panelists</label>
-      <div id="debate-panel-list" class="debate-panel-list"></div>
-      <div id="debate-skip-setup-row" class="debate-skip-setup-row hidden">
-        <label class="debate-toggle-label">
-          <input type="checkbox" id="debate-skip-setup-toggle">
-          <span>Skip setup</span>
-          <span class="debate-skip-setup-hint">Moderator generates the brief automatically from conversation context</span>
-        </label>
+    <!-- Step 0: Topic -->
+    <div class="debate-wizard-page active" data-step="0">
+      <div class="debate-modal-body">
+        <label class="debate-field-label" for="debate-topic-input">Topic <span class="debate-field-req">*</span></label>
+        <textarea id="debate-topic-input" rows="2" placeholder="e.g. Should AI development be regulated?"></textarea>
+      </div>
+    </div>
+    <!-- Step 1: Panelists -->
+    <div class="debate-wizard-page" data-step="1">
+      <div class="debate-modal-body">
+        <label class="debate-field-label" for="debate-panel-list">Select panelists</label>
+        <div id="debate-panel-list" class="debate-panel-list"></div>
       </div>
     </div>
     <div class="debate-modal-footer">
       <button id="debate-modal-cancel" class="debate-btn-cancel">Cancel</button>
-      <button id="debate-modal-start" class="debate-btn-start">Start</button>
+      <button id="debate-modal-back" class="debate-btn-back hidden">Back</button>
+      <button id="debate-modal-quick" class="debate-btn-quick hidden">Quick Start</button>
+      <button id="debate-modal-next" class="debate-btn-next hidden">Choose Panel</button>
+      <button id="debate-modal-start" class="debate-btn-start hidden">Design Debate</button>
     </div>
   </div>
 </div>
@@ -2033,6 +2040,7 @@
 <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5/lib/xterm.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0/lib/addon-fit.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0/lib/addon-web-links.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-webgl@0/lib/addon-webgl.min.js"></script>
 <script type="module" src="app.js"></script>
 <div id="pwa-install-modal" class="pwa-modal hidden">
   <div class="pwa-modal-backdrop"></div>

package/lib/public/modules/context-sources.js

@@ -223,12 +223,27 @@ function renderPicker() {
   var tabSection = document.getElementById("context-picker-tabs");
   tabSection.innerHTML = "";
 
-  if (browserTabList.length > 0) {
-    var tabLabel = document.createElement("div");
-    tabLabel.className = "context-picker-section-label";
-    tabLabel.textContent = "Browser Tabs";
-    tabSection.appendChild(tabLabel);
-
+  var tabLabel = document.createElement("div");
+  tabLabel.className = "context-picker-section-label";
+  tabLabel.textContent = "Browser Tabs";
+  tabSection.appendChild(tabLabel);
+
+  if (browserTabList.length === 0) {
+    // Extension not connected: show notice with setup button
+    var notice = document.createElement("div");
+    notice.className = "context-picker-ext-notice";
+    notice.innerHTML =
+      '<span class="context-picker-ext-notice-text">Chrome extension required to access browser tabs.</span>' +
+      '<button class="context-picker-ext-btn" type="button"><i data-lucide="puzzle"></i> Setup Extension</button>';
+    var setupBtn = notice.querySelector(".context-picker-ext-btn");
+    setupBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closePicker();
+      var extPill = document.getElementById("ext-pill");
+      if (extPill) extPill.click();
+    });
+    tabSection.appendChild(notice);
+  } else {
     for (var j = 0; j < browserTabList.length; j++) {
       var tab = browserTabList[j];
       var tabSourceId = "tab:" + tab.id;