clay-server 5.1.0-beta.1 → 6.0.0-beta.1

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

@@ -2,6 +2,16 @@
    Icon Strip — Discord-style vertical server/project bar
    ========================================================================== */
 
+#layout-body {
+  --account-rail-bottom: 12px;
+  --account-rail-avatar-target: 44px;
+  --account-rail-control-gap: 4px;
+  --account-rail-cursor-target: 28px;
+  --account-rail-clearance: 8px;
+  --account-rail-strip-fixed-top: calc(48px + 58px + 48px);
+  --account-rail-footer-height: calc(var(--account-rail-bottom) + var(--account-rail-avatar-target) + var(--account-rail-control-gap) + var(--account-rail-cursor-target) + var(--account-rail-clearance));
+}
+
 #icon-strip {
   position: relative;
   width: 72px;
@@ -10,7 +20,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 0 80px;
+  padding: 0 0 var(--account-rail-footer-height, 100px);
   overflow: hidden;
   z-index: 2;
 }
@@ -59,6 +69,16 @@
   opacity: 1;
 }
 
+.icon-strip-brand {
+  cursor: default;
+}
+
+.icon-strip-brand:hover::before,
+.icon-strip-brand.active::before {
+  background: var(--bg-alt);
+  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.08);
+}
+
 .icon-strip-home.active::before {
   background: var(--bg);
   box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.14);
@@ -149,6 +169,7 @@
 /* --- Scrollable project list area --- */
 .icon-strip-projects {
   width: 100%;
+  flex: 1 1 0;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
@@ -164,6 +185,133 @@
   display: none;
 }
 
+/* --- Project / Mate rotary filter --- */
+.icon-strip-filter {
+  width: 100%;
+  height: 58px;
+  flex: 0 0 58px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-strip-filter-knob {
+  width: 48px;
+  height: 56px;
+  padding: 3px 0 2px;
+  border: 0;
+  background: transparent;
+  color: var(--text-dimmer);
+  font: inherit;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+
+.icon-strip-filter-face {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--bg);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, white 42%, transparent),
+    0 1px 2px rgba(var(--shadow-rgb), 0.1);
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+
+.icon-strip-filter-pointer {
+  position: absolute;
+  inset: 2px;
+  border-radius: 50%;
+  transition: transform 180ms cubic-bezier(0.2, 0.75, 0.3, 1);
+}
+
+.icon-strip-filter-pointer::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 2px;
+  width: 5px;
+  height: 2px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--accent) 72%, var(--text-dimmer));
+  box-shadow: inset 0 1px 1px rgba(var(--shadow-rgb), 0.28);
+  transform: translateX(-50%);
+}
+
+.icon-strip-filter-category {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  pointer-events: none;
+}
+
+.icon-strip-filter-category .lucide {
+  width: 14px;
+  height: 14px;
+  stroke-width: 1.8;
+}
+
+.icon-strip-filter-knob[data-mode="all"] [data-filter-icon="all"],
+.icon-strip-filter-knob[data-mode="projects"] [data-filter-icon="projects"],
+.icon-strip-filter-knob[data-mode="mates"] [data-filter-icon="mates"] {
+  display: flex;
+}
+
+.icon-strip-filter-label {
+  max-width: 48px;
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 11px;
+  letter-spacing: 0.01em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon-strip-filter-knob:hover .icon-strip-filter-face {
+  background: var(--bg-alt);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, white 48%, transparent),
+    0 2px 6px rgba(var(--shadow-rgb), 0.14);
+}
+
+.icon-strip-filter-knob:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: 13px;
+}
+
+.icon-strip-projects[data-filter-mode="projects"] > [data-mate-id],
+.icon-strip-projects[data-filter-mode="mates"] > .icon-strip-item[data-slug],
+.icon-strip-projects[data-filter-mode="mates"] > .icon-strip-group,
+.icon-strip-projects:not([data-filter-mode="all"]) > .icon-strip-peer-separator {
+  display: none;
+}
+
+.icon-strip-peer-separator {
+  width: 24px;
+  height: 1px;
+  margin: 4px 0;
+  flex: 0 0 1px;
+  background: color-mix(in srgb, var(--border) 72%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icon-strip-filter-pointer {
+    transition-duration: 0.01ms;
+  }
+}
+
 /* --- Project icon item (48px hit-box, 38px visible bg) --- */
 .icon-strip-item {
   position: relative;
@@ -217,6 +365,29 @@
 }
 
 /* --- Socket status indicator on icon (top-left dot) --- */
+.icon-strip-project-mate {
+  border: 0;
+  padding: 0;
+  font: inherit;
+}
+
+.icon-strip-mate-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+.icon-strip-project-mate:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -3px;
+  border-radius: 12px;
+}
+
+.icon-strip-project-mate.active .icon-strip-mate-avatar {
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
 .icon-strip-status {
   position: absolute;
   top: 3px;
@@ -363,6 +534,37 @@
   box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.5);
 }
 
+.icon-strip-tooltip-mate {
+  padding: 6px 10px 6px 7px;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: 9px;
+  background: var(--sidebar-bg);
+}
+
+.icon-strip-tooltip-mate-identity {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.icon-strip-tooltip-mate-avatar {
+  width: 18px;
+  height: 18px;
+  flex: none;
+  border-radius: 50%;
+  object-fit: cover;
+  box-shadow: 0 0 0 1px var(--border);
+}
+
+.icon-strip-tooltip-label {
+  min-width: 0;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .icon-strip-tooltip.visible {
   opacity: 1;
   transform: translateX(0);
@@ -379,6 +581,10 @@
   border-left: none;
 }
 
+.icon-strip-tooltip-mate::before {
+  border-right-color: var(--sidebar-bg);
+}
+
 /* --- Drag-and-drop reordering --- */
 .icon-strip-item.dragging {
   opacity: 0.3;
@@ -546,6 +752,12 @@
 
 .project-ctx-item .lucide { width: 15px; height: 15px; flex-shrink: 0; }
 .project-ctx-item:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--text); }
+.project-ctx-item:focus-visible {
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.06);
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
 .project-ctx-item:first-child { border-radius: 6px 6px 0 0; }
 .project-ctx-item:last-child { border-radius: 0 0 6px 6px; }
 
@@ -845,20 +1057,20 @@
   height: 22px;
 }
 
-/* Mate section wrapper — pinned just above the user-island at the
-   bottom of the strip. Groups the \u2318M hint pill with the users
-   list so the hint sits directly above the mate avatars rather than
-   floating up in the project section's flex flow. */
+/* Mate section wrapper — an in-flow footer above the user-island.
+   Its rendered height is reserved after Add project, while the project
+   and Mate icon region takes and scrolls within the remaining space. */
 .icon-strip-mate-section {
-  position: absolute;
-  bottom: 74px; /* above user-island (58px + 8px bottom + 8px gap) */
-  left: 50%;
-  transform: translateX(-50%);
+  flex: 0 0 auto;
+  max-height: max(0px, calc(100vh - var(--account-rail-footer-height, 116px) - var(--account-rail-strip-fixed-top, 154px)));
+  overflow-y: auto;
+  scrollbar-width: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
 }
+.icon-strip-mate-section::-webkit-scrollbar { display: none; }
 
 /* --- User avatars (circle, inside the mate section) --- */
 .icon-strip-users {
@@ -1024,29 +1236,6 @@
 
 /* DM mode: keep same position (user-island gone but layout stays) */
 
-/* --- My avatar at bottom of icon strip (always present, behind user-island) --- */
-/* Positioned to align with icon-strip center (72px / 2 = 36px) */
-/* Matches user-island avatar center: left:8px + padding:10px + 18px = 36px */
-.icon-strip-me {
-  position: absolute;
-  bottom: 19px; /* vertically center with user-island (bottom:8px + height:58px/2 - 16px) */
-  left: 36px;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  z-index: 1; /* below user-island z-index: 15 */
-}
-
-.icon-strip-me-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
 /* --- DM user picker popup --- */
 .dm-user-picker {
   position: fixed;
@@ -1547,3 +1736,31 @@ select.wt-modal-input {
     display: none;
   }
 }
+
+/* Mate workspaces omit repository, filesystem, and terminal controls. */
+body.mate-workspace-active #session-actions {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+/* Use the full column for captions at the 192px sidebar minimum, keeping
+   words such as Knowledge intact without enlarging the icon face. */
+body.mate-workspace-active #session-actions .palette-tile {
+  padding-inline: 0;
+}
+body.mate-workspace-active #git-placard,
+body.mate-workspace-active #sidebar-panel-git,
+body.mate-workspace-active #file-browser-btn,
+body.mate-workspace-active #terminal-sidebar-btn,
+body.mate-workspace-active #project-logs-btn,
+body.mate-workspace-active #issues-btn,
+body.mate-workspace-active #terminal-toggle-btn,
+body.mate-workspace-active #shell-command-btn,
+body.mate-workspace-active #input-more-shell,
+body.mate-workspace-active #loop-interview-btn,
+body.mate-workspace-active #composer-handoff-btn {
+  display: none !important;
+}
+
+#knowledge-workbench-btn { display: none !important; }
+body.mate-workspace-active #knowledge-workbench-btn { display: flex !important; }
+#mate-project-debates-btn { display: none !important; }
+body.mate-workspace-active #mate-project-debates-btn { display: flex !important; }

package/lib/public/css/input.css

@@ -742,7 +742,9 @@
 }
 
 #input-wrapper {
-  max-width: var(--content-width);
+  /* Writing follows the pane width independently of transcript layout.
+     Mate workspaces provide their own bounded composer override. */
+  max-width: 100%;
   margin: 0 auto;
   position: relative;
 }

package/lib/public/css/mate-conversation.css

@@ -0,0 +1,176 @@
+/* Restore the Home conversation's reading measure inside Mate projects.
+   The existing project renderer, queue and composer still own behavior. */
+body.mate-workspace-active { --content-width: 720px; }
+body.mate-workspace-active #messages { padding-inline: max(0px, calc((100% - 720px) / 2)); }
+body.mate-workspace-active #messages > .msg-assistant,
+body.mate-workspace-active #messages > .msg-user {
+  width: 100%;
+  max-width: 720px;
+  box-sizing: border-box;
+  margin: 0 auto 12px;
+  padding: 4px 20px;
+  border-radius: 0;
+}
+body.mate-workspace-active #messages > .msg-assistant {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 9px;
+  align-items: start;
+}
+body.mate-workspace-active .msg-assistant > .dm-bubble-avatar {
+  display: block;
+  width: 34px;
+  height: 34px;
+  margin-top: 1px;
+  border-radius: 8px;
+}
+body.mate-workspace-active .msg-assistant > .dm-bubble-content { min-width: 0; }
+body.mate-workspace-active .msg-assistant .dm-bubble-header {
+  display: flex;
+  align-items: baseline;
+  min-height: 19px;
+  gap: 7px;
+  margin-bottom: 2px;
+}
+body.mate-workspace-active .msg-assistant .dm-bubble-name { font-size: 13px; font-weight: 650; }
+body.mate-workspace-active .msg-assistant .dm-bubble-time { font-size: 10px; color: var(--text-dimmer); }
+body.mate-workspace-active .msg-assistant .md-content { line-height: 1.58; }
+body.mate-workspace-active #messages > .msg-user:not(.msg-user-other):not(.msg-user-delegated) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+body.mate-workspace-active .msg-user:not(.msg-user-other):not(.msg-user-delegated) > .msg-actions {
+  align-self: flex-end;
+  margin-left: 0;
+  padding-top: 2px;
+}
+body.mate-workspace-active .msg-user:not(.msg-user-other):not(.msg-user-delegated) > .dm-bubble-avatar,
+body.mate-workspace-active .msg-user:not(.msg-user-other):not(.msg-user-delegated) .dm-bubble-header { display: none; }
+body.mate-workspace-active .msg-user:not(.msg-user-other):not(.msg-user-delegated) > .dm-bubble-content {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: min(560px, 100%);
+  align-items: flex-end;
+}
+body.mate-workspace-active .msg-user:not(.msg-user-other):not(.msg-user-delegated) .bubble {
+  background: var(--bg-alt);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  padding: 8px 11px;
+  max-width: 100%;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* One writing row, with secondary tools and model selection underneath.
+   Display contents preserves the live controls and their event handlers. */
+body.mate-workspace-active #input-wrapper { max-width: 720px; }
+body.mate-workspace-active #input-row,
+body.mate-workspace-active #input-row:focus-within {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  gap: 6px 4px;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+  transform: none;
+  border-radius: 0;
+}
+body.mate-workspace-active #input-row::before {
+  content: "";
+  grid-area: 4 / 1 / 5 / -1;
+  align-self: stretch;
+  background: var(--bg);
+  border: 1px solid var(--border-subtle);
+  border-radius: 22px;
+  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .09);
+  pointer-events: none;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+body.mate-workspace-active #input-row:focus-within::before {
+  border-color: color-mix(in srgb, var(--brand-indigo) 65%, var(--border-subtle));
+  box-shadow: 0 2px 6px rgba(var(--shadow-rgb), .12);
+}
+@media (prefers-reduced-motion: reduce) {
+  body.mate-workspace-active #input-row::before { transition: none; }
+}
+body.mate-workspace-active #input-bottom,
+body.mate-workspace-active #input-bottom-right { display: contents; }
+body.mate-workspace-active #image-preview-bar { grid-area: 2 / 1 / 3 / -1; }
+body.mate-workspace-active #suggestion-chips { grid-area: 3 / 1 / 4 / -1; }
+body.mate-workspace-active #input-textarea-wrap { grid-area: 4 / 1 / 5 / 2; align-self: center; }
+body.mate-workspace-active #input,
+body.mate-workspace-active #ghost-suggestion {
+  display: block;
+  font-size: 16px;
+  line-height: 1.45;
+  padding: 12px 0 12px 15px;
+}
+body.mate-workspace-active #ghost-suggestion.hidden { display: none; }
+body.mate-workspace-active #send-btn,
+body.mate-workspace-active #stt-btn,
+body.mate-workspace-active #input-bottom-right > #generation-stop {
+  position: relative;
+  align-self: end;
+  margin: 7px 0;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+}
+body.mate-workspace-active #send-btn { grid-area: 4 / 4 / 5 / 5; margin-right: 8px; }
+body.mate-workspace-active #input-bottom-right > .stt-controls { grid-area: 4 / 3 / 5 / 4; position: relative; align-self: end; }
+body.mate-workspace-active #input-row .stt-progress { grid-area: 6 / 1 / 7 / -1; }
+body.mate-workspace-active #input-bottom-right > #generation-stop { grid-area: 4 / 2 / 5 / 3; }
+body.mate-workspace-active #attach-wrap { grid-area: 5 / 1 / 6 / 3; min-width: 0; flex-wrap: wrap; }
+body.mate-workspace-active #config-chip-wrap { grid-area: 5 / 3 / 6 / 5; align-self: start; justify-self: end; }
+body.mate-workspace-active #active-vendor-indicator,
+body.mate-workspace-active #attach-wrap .composer-tool-group-collaboration,
+body.mate-workspace-active #attach-wrap .composer-tool-group-execution { display: none; }
+@media (max-width: 768px) {
+  /* The rail is absent here; its floating footer must not cover writing tools. */
+  body.mate-workspace-active #user-island { display: none; }
+  body.mate-workspace-active #messages > .msg-assistant,
+  body.mate-workspace-active #messages > .msg-user { padding-inline: 12px; }
+  body.mate-workspace-active #input-area { padding-inline: 12px; }
+}
+
+body.mate-workspace-active #context-mini { grid-area: 1 / 1 / 2 / -1; }
+
+/* Keep the restored conversational action rows aligned with Mate replies. */
+body.mate-workspace-active #messages > .mate-tool-group,
+body.mate-workspace-active #messages > .mate-thinking,
+body.mate-workspace-active #messages > .mate-permission,
+body.mate-workspace-active #messages > .mate-ask-user {
+  box-sizing: border-box;
+  max-width: 720px;
+  margin: 0 auto 12px;
+  padding: 4px 20px;
+  gap: 9px;
+}
+body.mate-workspace-active .mate-tool-group > .dm-bubble-avatar,
+body.mate-workspace-active .mate-thinking > .dm-bubble-avatar,
+body.mate-workspace-active .mate-permission > .dm-bubble-avatar,
+body.mate-workspace-active .mate-ask-user > .dm-bubble-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+}
+@media (max-width: 768px) {
+  body.mate-workspace-active #messages > .mate-tool-group,
+  body.mate-workspace-active #messages > .mate-thinking,
+  body.mate-workspace-active #messages > .mate-permission,
+  body.mate-workspace-active #messages > .mate-ask-user { padding-inline: 12px; }
+}
+
+/* Action summaries belong to the reply's text lane, without repeated identity. */
+body.mate-workspace-active .mate-tool-group > .dm-bubble-avatar { display: none; }
+body.mate-workspace-active #messages > .mate-tool-group {
+  padding: 2px 20px 2px 63px;
+  margin-bottom: 8px;
+}
+body.mate-workspace-active .mate-tool-group > .dm-bubble-content { padding-top: 0; }
+@media (max-width: 768px) {
+  body.mate-workspace-active #messages > .mate-tool-group { padding-inline: 55px 12px; }
+}