clay-server 3.7.0 → 3.8.0-beta.2

package/lib/public/css/generated-images.css

@@ -168,12 +168,27 @@
 }
 
 .generated-image-prompt {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
   overflow: hidden;
+  background: transparent;
   color: var(--text-muted);
+  font: inherit;
   font-size: 11px;
   line-height: 1.35;
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: pointer;
+}
+
+.generated-image-prompt:hover {
+  color: var(--text-secondary);
+  text-decoration: underline;
+  text-decoration-color: var(--border);
+  text-underline-offset: 3px;
 }
 
 .generated-image-actions {
@@ -209,6 +224,213 @@
   height: 14px;
 }
 
+.generated-image-details-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 10050;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.58);
+  backdrop-filter: blur(5px);
+}
+
+.generated-image-details {
+  display: flex;
+  width: min(720px, 100%);
+  max-height: min(820px, calc(100dvh - 48px));
+  overflow: hidden;
+  flex-direction: column;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--bg);
+  box-shadow: 0 24px 80px rgba(var(--shadow-rgb), 0.42);
+}
+
+.generated-image-details-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 17px 18px 15px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.generated-image-details-header h2 {
+  margin: 2px 0 0;
+  color: var(--text);
+  font-size: 17px;
+  line-height: 1.2;
+}
+
+.generated-image-details-eyebrow {
+  display: block;
+  color: var(--accent);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+
+.generated-image-details-close {
+  width: 32px;
+  padding: 0;
+  justify-content: center;
+}
+
+.generated-image-details-close span { display: none; }
+
+.generated-image-details-body {
+  display: grid;
+  grid-template-columns: 190px minmax(0, 1fr);
+  gap: 18px;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.generated-image-details-preview {
+  grid-row: span 2;
+  overflow: hidden;
+  align-self: start;
+  border: 1px solid var(--border-subtle);
+  border-radius: 11px;
+  background: var(--bg-alt);
+}
+
+.generated-image-details-preview img {
+  display: block;
+  width: 100%;
+  max-height: 280px;
+  object-fit: contain;
+  cursor: zoom-in;
+}
+
+.generated-image-details-section {
+  min-width: 0;
+}
+
+.generated-image-details-section-header {
+  display: flex;
+  min-height: 28px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 7px;
+}
+
+.generated-image-details-section h3,
+.generated-image-save-section label {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+}
+
+.generated-image-details-section-header .generated-image-action {
+  height: 27px;
+  padding: 0 7px;
+}
+
+.generated-image-details-prompt {
+  max-height: 220px;
+  padding: 11px 12px;
+  overflow-y: auto;
+  border: 1px solid var(--border-subtle);
+  border-radius: 9px;
+  background: var(--bg-alt);
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.generated-image-save-section {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.generated-image-save-section input {
+  width: 100%;
+  height: 38px;
+  padding: 0 11px;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  outline: none;
+  background: var(--input-bg);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.generated-image-save-section input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-12);
+}
+
+.generated-image-save-hint,
+.generated-image-save-error {
+  margin: 0;
+  font-size: 10px;
+  line-height: 1.4;
+}
+
+.generated-image-save-hint { color: var(--text-dimmer); }
+.generated-image-save-error { color: var(--error); }
+.generated-image-save-error.hidden { display: none; }
+
+.generated-image-details-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 13px 18px;
+  border-top: 1px solid var(--border-subtle);
+  background: var(--bg-alt);
+}
+
+.generated-image-secondary-button,
+.generated-image-primary-button {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 0 14px;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.generated-image-secondary-button {
+  background: transparent;
+  color: var(--text-secondary);
+}
+
+.generated-image-primary-button {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: #fff;
+}
+
+.generated-image-primary-button--replace {
+  border-color: var(--warning);
+  background: var(--warning);
+  color: var(--bg);
+}
+
+.generated-image-primary-button:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+
+.generated-image-primary-button .lucide {
+  width: 14px;
+  height: 14px;
+}
+
 @media (max-width: 560px) {
   .generated-image-row { padding: 0 12px; }
   .generated-image-card { border-radius: 12px; }
@@ -222,4 +444,24 @@
     justify-content: center;
     padding: 0;
   }
+
+  .generated-image-details-backdrop { padding: 10px; }
+
+  .generated-image-details {
+    max-height: calc(100dvh - 20px);
+    border-radius: 13px;
+  }
+
+  .generated-image-details-body {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    padding: 16px;
+  }
+
+  .generated-image-details-preview {
+    grid-row: auto;
+    width: min(220px, 100%);
+  }
+
+  .generated-image-details-preview img { max-height: 220px; }
 }

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

@@ -206,10 +206,10 @@
 }
 
 .icon-strip-item.active::before {
-  background: var(--bg);
+  background: color-mix(in srgb, var(--brand-indigo) 6%, var(--bg));
   box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--link) 62%, var(--border)),
-    0 1px 3px rgba(var(--shadow-rgb), 0.16);
+    0 5px 14px color-mix(in srgb, var(--brand-indigo) 28%, transparent),
+    0 1px 3px rgba(var(--shadow-rgb), 0.14);
 }
 
 .icon-strip-item.active {

package/lib/public/css/profile.css

@@ -18,13 +18,16 @@
   to { opacity: 1; transform: translateY(0); }
 }
 
-/* Banner */
+/* Identity header */
 .profile-banner {
   height: 52px;
   position: relative;
   transition: background 0.2s ease;
   border-radius: 14px 14px 0 0;
   z-index: 1;
+  background: var(--bg);
+  border-top: 3px solid var(--profile-accent, #5857fc);
+  border-bottom: 1px solid var(--border);
 }
 
 .profile-close-btn {
@@ -34,8 +37,8 @@
   width: 24px;
   height: 24px;
   border: none;
-  background: rgba(0, 0, 0, 0.3);
-  color: #fff;
+  background: var(--bg-alt);
+  color: var(--text-muted);
   border-radius: 50%;
   font-size: 16px;
   line-height: 1;
@@ -47,7 +50,8 @@
 }
 
 .profile-close-btn:hover {
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--bg-hover, var(--bg-alt));
+  color: var(--text);
 }
 
 /* Avatar row (overlaps banner) */
@@ -65,7 +69,7 @@
 .profile-popover-avatar {
   width: 60px;
   height: 60px;
-  border-radius: 50%;
+  border-radius: 17px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -79,30 +83,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 50%;
-}
-
-/* Shuffle button next to Avatar label */
-.profile-shuffle-btn {
-  background: none;
-  border: none;
-  padding: 0;
-  margin-left: 4px;
-  cursor: pointer;
-  color: var(--text-muted);
-  vertical-align: middle;
-  transition: color 0.15s;
-  display: inline-flex;
-  align-items: center;
-}
-
-.profile-shuffle-btn .lucide {
-  width: 12px;
-  height: 12px;
-}
-
-.profile-shuffle-btn:hover {
-  color: var(--text);
+  border-radius: 14px;
 }
 
 .profile-name-display {
@@ -202,66 +183,140 @@
   border-color: var(--accent);
 }
 
-/* Avatar style grid */
-.profile-avatar-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 6px;
+/* Clay Imprint identity control */
+.profile-imprint-panel {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg);
+  padding: 9px;
 }
 
-.profile-avatar-option {
-  width: 100%;
-  aspect-ratio: 1;
-  border-radius: 10px;
-  border: 2px solid var(--border);
-  background: var(--bg);
-  cursor: pointer;
-  padding: 3px;
-  overflow: hidden;
+.profile-imprint-preview {
   display: flex;
   align-items: center;
-  justify-content: center;
-  transition: border-color 0.15s, transform 0.1s;
+  gap: 10px;
+  min-height: 54px;
 }
 
-.profile-avatar-option img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  border-radius: 6px;
+.profile-imprint-preview img {
+  width: 50px;
+  height: 50px;
+  border-radius: 13px;
+  flex: 0 0 auto;
 }
 
-.profile-avatar-option:hover {
-  border-color: var(--text-muted);
-  transform: scale(1.05);
+.profile-imprint-preview span {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
 }
 
-.profile-avatar-option.profile-avatar-option-active {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent);
+.profile-imprint-preview strong {
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.profile-imprint-preview small {
+  color: var(--text-dimmer);
+  font-size: 10px;
+}
+
+.profile-imprint-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 5px;
+  margin-top: 8px;
 }
 
-/* Avatar upload button */
-.profile-avatar-upload .profile-avatar-upload-icon {
+.profile-imprint-actions button {
+  min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--bg-alt);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: 600;
+  white-space: nowrap;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: var(--text-muted);
+  gap: 4px;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
 }
-.profile-avatar-upload .profile-avatar-upload-icon svg {
-  width: 24px;
-  height: 24px;
+
+.profile-imprint-actions button:hover {
+  color: var(--text);
+  border-color: var(--text-muted);
 }
-.profile-avatar-upload:hover .profile-avatar-upload-icon {
+
+.profile-imprint-actions button.is-active {
   color: var(--text);
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.profile-imprint-actions button .lucide {
+  width: 11px;
+  height: 11px;
+}
+
+.profile-avatar-upload {
+  grid-column: 1 / -1;
+}
+
+.profile-mate-mark-actions .profile-avatar-upload {
+  grid-column: auto;
+}
+
+.profile-avatar-upload.is-active::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--accent);
 }
+
 .profile-avatar-custom-preview {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 6px;
+  border-radius: 12px;
+}
+
+.profile-use-imprint.is-active::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.profile-imprint-actions button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.profile-imprint-actions button:active {
+  transform: translateY(1px);
+}
+
+.profile-imprint-actions button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.profile-imprint-actions button:disabled:hover {
+  border-color: var(--border);
+  color: var(--text-muted);
+}
+
+.profile-imprint-actions button.is-active:hover {
+  color: var(--text);
 }
 
 /* Avatar positioner overlay */
@@ -297,7 +352,7 @@
   color: var(--text-muted);
   font-size: 20px;
   cursor: pointer;
-  border-radius: 50%;
+  border-radius: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -313,7 +368,7 @@
   color: var(--text);
 }
 .avatar-positioner-viewport {
-  border-radius: 50%;
+  border-radius: 26%;
   overflow: hidden;
   position: relative;
   cursor: grab;
@@ -368,30 +423,3 @@
 .avatar-positioner-btn-done:hover {
   filter: brightness(1.1);
 }
-
-/* Color swatch grid */
-.profile-color-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.profile-color-swatch {
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  border: 2px solid transparent;
-  cursor: pointer;
-  transition: transform 0.15s, border-color 0.15s;
-  padding: 0;
-}
-
-.profile-color-swatch:hover {
-  transform: scale(1.15);
-}
-
-.profile-color-swatch.profile-color-active {
-  border-color: #fff;
-  box-shadow: 0 0 0 2px var(--accent);
-}
-

package/lib/public/css/session-actions.css

@@ -2,23 +2,29 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
+  gap: 6px;
+  width: auto;
   height: 28px;
-  padding: 0;
-  border: 1px solid transparent;
+  margin: 0;
+  padding: 0 9px;
+  border: 1px solid var(--border-subtle);
   border-radius: 8px;
-  background: transparent;
-  color: var(--text-dimmer);
+  background: color-mix(in srgb, var(--brand-indigo) 5%, var(--bg));
+  color: var(--text-secondary);
   cursor: pointer;
   flex-shrink: 0;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 650;
+  white-space: nowrap;
   transition: color 0.15s, background 0.15s, border-color 0.15s;
 }
 
 #header-session-actions-btn:hover,
 #header-session-actions-btn[aria-expanded="true"] {
   color: var(--text);
-  background: rgba(var(--overlay-rgb), 0.05);
-  border-color: var(--border);
+  background: color-mix(in srgb, var(--brand-indigo) 9%, var(--bg));
+  border-color: color-mix(in srgb, var(--brand-indigo) 32%, var(--border));
 }
 
 #header-session-actions-btn:focus { outline: none; }
@@ -28,12 +34,26 @@
 }
 
 #header-session-actions-btn.hidden { display: none; }
-#header-session-actions-btn .lucide { width: 16px; height: 16px; }
+#header-session-actions-btn .lucide:first-child {
+  width: 14px;
+  height: 14px;
+  color: color-mix(in srgb, var(--brand-indigo) 78%, var(--text));
+}
+
+#header-session-actions-btn .session-actions-trigger-chevron {
+  width: 13px;
+  height: 13px;
+  transition: transform 0.16s ease;
+}
+
+#header-session-actions-btn[aria-expanded="true"] .session-actions-trigger-chevron {
+  transform: rotate(180deg);
+}
 
 .session-actions-menu {
   position: fixed;
   z-index: 10020;
-  width: 286px;
+  width: min(300px, calc(100vw - 16px));
   padding: 6px;
   border: 1px solid var(--border);
   border-radius: 12px;
@@ -63,6 +83,17 @@
 }
 
 .session-actions-row:hover { background: var(--bg-alt); }
+.session-actions-row.is-primary {
+  background: color-mix(in srgb, var(--brand-indigo) 6%, transparent);
+}
+.session-actions-row.is-primary:hover {
+  background: color-mix(in srgb, var(--brand-indigo) 10%, transparent);
+}
+.session-actions-row.is-primary .session-actions-row-icon {
+  border-color: transparent;
+  background: var(--brand-indigo);
+  color: var(--brand-paper);
+}
 .session-actions-row:disabled { cursor: default; opacity: 0.42; }
 .session-actions-row:disabled:hover { background: transparent; }
 

package/lib/public/css/user-settings.css

@@ -342,7 +342,7 @@
   flex-shrink: 0;
   width: 56px;
   height: 56px;
-  border-radius: 50%;
+  border-radius: 26%;
   overflow: hidden;
   border: 1px solid rgba(var(--overlay-rgb), 0.1);
   background: var(--bg);

package/lib/public/index.html

@@ -388,8 +388,8 @@
         <div id="ralph-sticky" class="hidden"></div>
         <div id="debate-sticky" class="hidden"></div>
         <div class="status">
-          <button id="header-session-actions-btn" type="button" aria-label="Session actions" title="Session actions" aria-haspopup="menu" aria-expanded="false">
-            <i data-lucide="ellipsis"></i>
+          <button id="header-session-actions-btn" type="button" aria-label="Session actions" aria-haspopup="menu" aria-expanded="false">
+            <i data-lucide="bot"></i><span>Add AI worker</span><i class="session-actions-trigger-chevron" data-lucide="chevron-down"></i>
           </button>
           <button type="button" id="header-tui-font-btn" class="header-tui-font-btn hidden" title="Terminal font" aria-label="Terminal font">
             <i data-lucide="type"></i>
@@ -2282,7 +2282,7 @@
 <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?v=20260829-terminal-dark1"></script>
+<script type="module" src="app.js?v=20260829-image-save-details1"></script>
 <div id="pwa-install-modal" class="pwa-modal hidden">
   <div class="pwa-modal-backdrop"></div>
   <div class="pwa-modal-card">

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

@@ -72,8 +72,8 @@ function createCursorElement(userId, displayName, color, avatarStyle, avatarSeed
   // Avatar
   var avatarImg = document.createElement("img");
   avatarImg.className = "remote-cursor-avatar";
-  avatarImg.src = avatarCustom ? avatarCustom : avatarUrl(avatarStyle || "thumbs", avatarSeed || userId, 16);
-  avatarImg.style.cssText = "width:14px;height:14px;border-radius:50%;background:#fff;flex-shrink:0;";
+  avatarImg.src = avatarCustom ? avatarCustom : avatarUrl(avatarStyle || "imprint", avatarSeed || userId, 16);
+  avatarImg.style.cssText = "width:14px;height:14px;border-radius:4px;background:#fff;flex-shrink:0;";
   tag.appendChild(avatarImg);
 
   // Name label