clay-server 2.26.0-beta.1 → 2.26.0-beta.11

package/lib/public/css/input.css

@@ -271,6 +271,214 @@
   border-color: var(--error);
 }
 
+/* ==========================================================================
+   Context Sources — chips above input
+   ========================================================================== */
+
+#context-sources-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 0 8px 4px;
+  position: relative;
+}
+
+#context-sources-add {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px dashed var(--border);
+  background: transparent;
+  color: var(--text-dimmer);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+#context-sources-add .lucide { width: 12px; height: 12px; }
+
+#context-sources-add:hover {
+  color: var(--text-secondary);
+  border-color: var(--text-dimmer);
+  background: var(--sidebar-hover);
+}
+
+#context-sources-chips {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.context-chip {
+  display: inline-flex;
+  align-items: stretch;
+  padding: 0;
+  border-radius: 8px;
+  background: var(--bg-alt);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  border: 1px solid var(--border);
+  transition: border-color 0.15s;
+  animation: chipIn 0.3s ease-out;
+}
+
+@keyframes chipIn {
+  from { opacity: 0; transform: translateY(6px) scale(0.95); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.context-chip-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px 6px 12px;
+}
+
+.context-chip-label .lucide { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); }
+
+.context-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  border: none;
+  border-left: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0;
+  border-radius: 0 8px 8px 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+.context-chip-remove:hover {
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.08);
+}
+
+.context-chip-remove .lucide { width: 14px; height: 14px; }
+
+#context-sources-picker.hidden { display: none; }
+
+#context-sources-picker {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  min-width: 200px;
+  max-height: 320px;
+  overflow-y: auto;
+  background: var(--sidebar-bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 4px 0;
+  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.15);
+  z-index: 200;
+  animation: ctxPickerAppear 0.12s ease-out;
+}
+
+@keyframes ctxPickerAppear {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.context-picker-section-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-dimmer);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 8px 12px 4px;
+}
+
+.context-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.context-picker-item:hover {
+  background: rgba(var(--overlay-rgb), 0.05);
+}
+
+.context-picker-item .lucide { width: 14px; height: 14px; flex-shrink: 0; }
+
+.context-picker-check {
+  margin-left: auto;
+  width: 14px;
+  height: 14px;
+  color: var(--accent);
+  display: none;
+}
+
+.context-picker-item.active .context-picker-check {
+  display: block;
+}
+
+.context-picker-empty {
+  padding: 12px;
+  color: var(--text-dimmer);
+  font-size: 13px;
+  text-align: center;
+}
+.context-picker-ext-notice {
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.context-picker-ext-notice-text {
+  font-size: 12px;
+  color: var(--text-dimmer);
+  line-height: 1.4;
+}
+.context-picker-ext-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text);
+  background: var(--bg-hover, rgba(255,255,255,0.06));
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s;
+  width: fit-content;
+}
+.context-picker-ext-btn:hover {
+  background: var(--bg-active, rgba(255,255,255,0.1));
+}
+.context-picker-ext-btn .lucide {
+  width: 13px;
+  height: 13px;
+}
+
+.context-picker-favicon {
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+
 /* ==========================================================================
    Input Area — Claude-style unified container
    ========================================================================== */
@@ -291,15 +499,14 @@
   display: flex;
   flex-direction: column;
   background: var(--input-bg);
-  border: 1px solid var(--border);
+  border: none;
   border-radius: 8px;
-  padding: 6px;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  padding: 7px;
+  transition: box-shadow 0.2s;
 }
 
 #input-row:focus-within {
-  border-color: var(--text-dimmer);
-  box-shadow: 0 0 0 1px rgba(109, 104, 96, 0.15);
+  box-shadow: 0 0 0 1px var(--border);
 }
 
 #input {
@@ -378,7 +585,7 @@
   border-radius: 10px;
   border: 1px solid transparent;
   background:
-    linear-gradient(var(--bg, #282a36), var(--bg, #282a36)) padding-box,
+    linear-gradient(var(--ask-mate-bg, var(--bg)), var(--ask-mate-bg, var(--bg))) padding-box,
     linear-gradient(135deg, #4ecdc4 0%, #4ecdc4 25%, #556bf7, #a855f7, #f857a6, #ff6b6b) border-box;
   color: transparent;
   cursor: pointer;
@@ -521,98 +728,48 @@
 #suggestion-chips {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
-  padding: 8px 6px;
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  z-index: 5;
-  background: transparent;
+  gap: 4px;
+  padding: 4px 6px;
 }
 
 #suggestion-chips.hidden { display: none; }
 
 .suggestion-chip {
   display: inline-flex;
-  align-items: stretch;
-  padding: 0;
-  border-radius: 16px;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px 4px 8px;
+  border-radius: 6px;
   border: 1px solid var(--border);
-  background: var(--bg-alt);
+  background: rgba(var(--overlay-rgb), 0.08);
   color: var(--text-secondary);
-  font-size: 13px;
+  font-size: 12px;
   font-family: inherit;
   cursor: pointer;
-  transition: border-color 0.15s;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
   text-align: left;
   max-width: 100%;
-  line-height: 1.3;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  line-height: 1.2;
 }
 
 .suggestion-chip:hover {
   border-color: var(--accent);
+  background: var(--accent-bg);
+  color: var(--accent);
 }
 
 .suggestion-chip .lucide {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   flex-shrink: 0;
   color: var(--accent);
 }
 
-.suggestion-chip-send {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  flex: 1;
-  min-width: 0;
-  padding: 8px 10px 8px 14px;
-  border-radius: 16px 0 0 16px;
-  transition: background 0.15s, color 0.15s;
-}
-
-.suggestion-chip-send:hover {
-  background: var(--accent-bg);
-  color: var(--accent);
-}
-
 .suggestion-chip-text {
   flex: 1;
   min-width: 0;
 }
 
-.suggestion-chip-edit {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 12px;
-  border-left: 1px solid var(--border);
-  border-radius: 0 16px 16px 0;
-  background: rgba(128, 128, 128, 0.07);
-  cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
-}
-
-.suggestion-chip:hover .suggestion-chip-edit {
-  border-left-color: var(--accent);
-}
-
-.suggestion-chip-edit:hover {
-  background: var(--accent-bg);
-}
-
-.suggestion-chip-edit .lucide {
-  width: 14px;
-  height: 14px;
-  color: var(--text-secondary);
-}
-
-.suggestion-chip-edit:hover .lucide {
-  color: var(--accent);
-}
-
 /* ==========================================================================
    Animations
    ========================================================================== */
@@ -809,27 +966,83 @@
   flex: 1;
 }
 
-.scheduled-msg-cancel {
-  display: flex;
+
+/* Channel mode: scheduled badge in header row */
+.scheduled-msg-badge {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  vertical-align: middle;
+}
+.scheduled-msg-badge svg,
+.scheduled-msg-badge .lucide {
+  width: 13px;
+  height: 13px;
+}
+/* Scheduled message action links (shared by both modes) */
+.scheduled-msg-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 4px;
+}
+.scheduled-msg-send-now {
+  padding: 0;
   border: none;
-  border-radius: 4px;
   background: none;
-  color: var(--text-dimmer);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
   cursor: pointer;
+  transition: text-decoration 0.15s;
+}
+.scheduled-msg-send-now:hover {
+  text-decoration: underline;
+}
+.scheduled-msg-sep {
+  color: var(--text-dimmer);
+  font-size: 12px;
+  user-select: none;
+}
+.scheduled-msg-cancel {
   padding: 0;
-  transition: background 0.15s, color 0.15s;
+  border: none;
+  background: none;
+  color: var(--text-dimmer);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: color 0.15s;
 }
-
 .scheduled-msg-cancel:hover {
-  background: rgba(var(--overlay-rgb), 0.08);
   color: var(--error);
 }
 
-.scheduled-msg-cancel .lucide {
-  width: 14px;
-  height: 14px;
+/* Channel mode: strip bubble box styling, render as plain text */
+body.wide-view .scheduled-msg-wrap .bubble {
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+/* Channel mode: header alignment */
+body.wide-view .scheduled-msg-wrap .dm-bubble-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+body.wide-view .scheduled-msg-wrap .scheduled-msg-countdown {
+  font-size: inherit;
+  color: inherit;
 }

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/menus.css

@@ -474,6 +474,13 @@
 
 #config-chip .lucide { width: 10px; height: 10px; }
 #config-chip .config-chip-icon { display: none; }
+
+@media (max-width: 1000px) {
+  #config-chip .config-chip-icon { display: inline-flex; width: 16px; height: 16px; }
+  #config-chip-label { display: none; }
+  #config-chip .lucide:last-child { display: none; }
+  #config-chip { padding: 0 6px; }
+}
 #config-chip:hover { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.06); }
 #config-chip.active { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.06); }