clay-server 3.7.0 → 3.8.0-beta.2

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

@@ -215,7 +215,7 @@ export function enterDmMode(key, targetUser, messages) {
     var termBtn = document.getElementById("terminal-toggle-btn");
     if (termBtn) termBtn.style.display = "none";
     // Apply mate color to chat title bar and panels
-    var mateColor = (targetUser.profile && targetUser.profile.avatarColor) || targetUser.avatarColor || "#7c3aed";
+    var mateColor = (targetUser.profile && targetUser.profile.avatarColor) || targetUser.avatarColor || "#5857fc";
     document.body.style.setProperty("--mate-color", mateColor);
     document.body.style.setProperty("--mate-color-tint", mateColor + "0a");
     document.body.classList.add("mate-dm-active");
@@ -223,19 +223,12 @@ export function enterDmMode(key, targetUser, messages) {
     var mp = targetUser.profile || {};
     var mateAvUrlDm = mateAvatarUrl(targetUser, 36);
     var myUser = store.get('cachedAllUsers').find(function (u) { return u.id === store.get('myUserId'); });
-    if (!myUser) {
-      try { var cached = JSON.parse(localStorage.getItem("clay_my_user") || "null"); if (cached) myUser = cached; } catch(e) {}
-    }
     var myAvatarUrl = userAvatarUrl(myUser || { id: store.get('myUserId') }, 36);
     var myDisplayName = (myUser && myUser.displayName) || "";
     document.body.dataset.mateAvatarUrl = mateAvUrlDm;
     document.body.dataset.mateName = mp.displayName || targetUser.displayName || targetUser.name || "";
     document.body.dataset.myAvatarUrl = myAvatarUrl;
     document.body.dataset.myDisplayName = myDisplayName;
-    // Cache my info for restore after hard refresh
-    if (myUser) {
-      try { localStorage.setItem("clay_my_user", JSON.stringify({ displayName: myUser.displayName, avatarStyle: myUser.avatarStyle, avatarSeed: myUser.avatarSeed, avatarCustom: myUser.avatarCustom, username: myUser.username })); } catch(e) {}
-    }
     var titleBarContent = document.querySelector(".title-bar-content");
     if (titleBarContent) {
       titleBarContent.style.background = mateColor;

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

@@ -95,7 +95,7 @@ export function processMessage(msg) {
         if (headerTitleEl) headerTitleEl.textContent = _mdn;
         var _tbpn = document.getElementById("title-bar-project-name");
         if (_tbpn) _tbpn.textContent = _mdn;
-        var _mc2 = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#7c3aed";
+        var _mc2 = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#5857fc";
         var _tbc2 = document.querySelector(".title-bar-content");
         if (_tbc2) { _tbc2.style.background = _mc2; _tbc2.classList.add("mate-dm-active"); }
         document.body.classList.add("mate-dm-active");
@@ -299,7 +299,7 @@ export function processMessage(msg) {
           var tbProjectName = document.getElementById("title-bar-project-name");
           if (tbProjectName) tbProjectName.textContent = _mateDN;
           // Re-apply mate title bar styling (may be lost during project switch)
-          var _mc = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#7c3aed";
+          var _mc = (store.get('dmTargetUser').profile && store.get('dmTargetUser').profile.avatarColor) || store.get('dmTargetUser').avatarColor || "#5857fc";
           var _tbc = document.querySelector(".title-bar-content");
           if (_tbc) { _tbc.style.background = _mc; _tbc.classList.add("mate-dm-active"); }
           document.body.classList.add("mate-dm-active");

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

@@ -257,12 +257,13 @@ export function updateProjectList(msg) {
     if (msg.dmConversations) store.set({ cachedDmConversations: msg.dmConversations });
     // renderUserStrip is handled by the store subscriber
     var st2 = store.snap();
-    if (document.body.classList.contains("mate-dm-active") || document.body.classList.contains("wide-view")) {
-      var refreshedMyUser = st2.cachedAllUsers.find(function (u) { return u.id === st2.myUserId; });
-      if (refreshedMyUser) {
-        document.body.dataset.myDisplayName = refreshedMyUser.displayName || refreshedMyUser.username || "";
-        document.body.dataset.myAvatarUrl = userAvatarUrl(refreshedMyUser, 36);
-        try { localStorage.setItem("clay_my_user", JSON.stringify({ displayName: refreshedMyUser.displayName, username: refreshedMyUser.username, avatarStyle: refreshedMyUser.avatarStyle, avatarSeed: refreshedMyUser.avatarSeed, avatarCustom: refreshedMyUser.avatarCustom })); } catch(e) {}
+    var refreshedMyUser = st2.cachedAllUsers.find(function (u) { return u.id === st2.myUserId; });
+    if (refreshedMyUser) {
+      document.body.dataset.myDisplayName = refreshedMyUser.displayName || refreshedMyUser.username || "";
+      document.body.dataset.myAvatarUrl = userAvatarUrl(refreshedMyUser, 36);
+      var myMessageAvatars = document.querySelectorAll('.dm-bubble-avatar-me');
+      for (var avatarIndex = 0; avatarIndex < myMessageAvatars.length; avatarIndex++) {
+        myMessageAvatars[avatarIndex].src = document.body.dataset.myAvatarUrl;
       }
     }
     // Render my avatar (always present, hidden behind user-island)

package/lib/public/modules/app-rate-limit.js

@@ -311,7 +311,6 @@ export function addScheduledMessageBubble(text, resetsAt) {
   if (isChannel) {
     // Channel mode: avatar + header with scheduled badge + message
     var _me = store.get('cachedAllUsers').find(function (u) { return u.id === store.get('myUserId'); });
-    if (!_me) { try { _me = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch(e) {} }
     var _myName = document.body.dataset.myDisplayName || (_me && (_me.displayName || _me.username)) || "Me";
 
     var avi = document.createElement("img");

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

@@ -552,9 +552,6 @@ export function addUserMessage(text, images, pastes, fromUserId, fromUserName, d
     _displayName = fromUserName || (_targetUser && (_targetUser.displayName || _targetUser.username)) || "User";
   } else {
     _targetUser = cachedAllUsers.find(function (u) { return u.id === myUserId; });
-    if (!_targetUser) {
-      try { _targetUser = JSON.parse(localStorage.getItem("clay_my_user") || "null"); } catch(e) {}
-    }
     _displayName = document.body.dataset.myDisplayName || "";
     if (!_displayName) {
       _displayName = (_targetUser && (_targetUser.displayName || _targetUser.username)) || "Me";

package/lib/public/modules/avatar-imprint.js

@@ -0,0 +1,134 @@
+// Clay Imprints: deterministic SVG identities derived from a stable seed.
+
+var PAPER = "#f1efe8";
+var INK = "#1b1b1a";
+var LIGHT_BASE = "#e7e5de";
+var LIGHT_FIELD = "#333330";
+var REGISTRATION_INDIGO = "#5857fc";
+var BRAND_GREEN = "#07e5a3";
+
+function hashString(value) {
+  var text = String(value || "anonymous");
+  var hash = 2166136261;
+  for (var index = 0; index < text.length; index++) {
+    hash ^= text.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+
+function makeRandom(seed) {
+  var state = seed >>> 0;
+  return function nextRandom() {
+    state += 0x6d2b79f5;
+    var value = state;
+    value = Math.imul(value ^ (value >>> 15), value | 1);
+    value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
+    return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function between(random, min, max) {
+  return min + random() * (max - min);
+}
+
+function number(value) {
+  return Math.round(value * 100) / 100;
+}
+
+function xmlText(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function legacyIdentity(style, seed) {
+  var sourceStyle = String(style || "imprint").toLowerCase();
+  var sourceSeed = String(seed || "anonymous");
+  if (sourceStyle === "imprint") return sourceSeed;
+  return "legacy:" + sourceStyle + ":" + sourceSeed;
+}
+
+function curvePath(y, bow, endOffset) {
+  return "M -28 " + number(y) +
+    " C 17 " + number(y + bow) +
+    ", 71 " + number(y - bow) +
+    ", 124 " + number(y + endOffset);
+}
+
+function cutPath(random) {
+  var start = between(random, 37, 52);
+  var first = between(random, 14, 84);
+  var second = between(random, 12, 86);
+  var end = between(random, 40, 64);
+  return "M -22 " + number(start) + " C 21 " + number(first) + ", 73 " + number(second) + ", 118 " + number(end);
+}
+
+export function imprintSvg(options) {
+  var settings = options || {};
+  var size = Math.max(12, Math.min(256, Number(settings.size) || 64));
+  var identity = legacyIdentity(settings.style, settings.seed);
+  var hash = hashString(identity);
+  var random = makeRandom(hash);
+  var darkBase = random() > 0.52;
+  var base = darkBase ? INK : LIGHT_BASE;
+  var field = darkBase ? PAPER : LIGHT_FIELD;
+  var accent = REGISTRATION_INDIGO;
+  var rotation = Math.floor(random() * 4) * 90;
+  var bandWidth = between(random, 37, 56);
+  var secondaryWidth = between(random, 14, 24);
+  var cutWidth = between(random, 15, 25);
+  var firstY = between(random, 24, 42);
+  var secondY = between(random, 58, 78);
+  var firstBow = between(random, -34, 34);
+  var secondBow = between(random, -32, 32);
+  var firstPath = curvePath(firstY, firstBow, 6);
+  var secondPath = curvePath(secondY, -secondBow, -5);
+  var contours = "";
+
+  if (size >= 40) {
+    for (var contour = -1; contour <= 1; contour++) {
+      var offset = contour * 5.2;
+      contours += '<path d="' + curvePath(firstY + offset, firstBow, 0) + '" fill="none" stroke="' +
+        (darkBase ? PAPER : INK) + '" stroke-opacity="0.2" stroke-width="0.8"/>';
+    }
+  }
+
+  var clipId = "imprint-" + hash.toString(16);
+  return '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size +
+    '" viewBox="0 0 96 96"><defs><clipPath id="' + clipId +
+    '"><rect width="96" height="96" rx="24"/></clipPath></defs><g clip-path="url(#' + clipId +
+    ')"><rect width="96" height="96" fill="' + base + '"/><g transform="rotate(' + rotation +
+    ' 48 48)"><path d="' + firstPath + '" fill="none" stroke="' + field + '" stroke-width="' +
+    number(bandWidth) + '" stroke-linecap="square"/><path d="' + secondPath + '" fill="none" stroke="' +
+    accent + '" stroke-width="' + number(secondaryWidth) + '" stroke-linecap="square"/><path d="' +
+    cutPath(random) + '" fill="none" stroke="' + base + '" stroke-width="' + number(cutWidth) +
+    '" stroke-linecap="square"/>' + contours + '</g></g><rect x="0.5" y="0.5" width="95" height="95" rx="23.5" fill="none" stroke="' +
+    (darkBase ? "#000000" : INK) + '" stroke-opacity="0.16"/></svg>';
+}
+
+export function imprintDataUrl(options) {
+  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(imprintSvg(options));
+}
+
+export function mateMarkSvg(options) {
+  var settings = options || {};
+  var size = Math.max(12, Math.min(256, Number(settings.size) || 64));
+  var identity = String(settings.seed || "M").trim();
+  var initial = Array.from(identity || "M")[0].toUpperCase();
+  var palette = [
+    { background: REGISTRATION_INDIGO, foreground: PAPER },
+    { background: BRAND_GREEN, foreground: INK },
+    { background: PAPER, foreground: REGISTRATION_INDIGO },
+  ][initial.codePointAt(0) % 3];
+  var clipId = "mate-mark";
+
+  return '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size +
+    '" viewBox="0 0 96 96"><defs><clipPath id="' + clipId +
+    '"><rect width="96" height="96" rx="24"/></clipPath></defs><g clip-path="url(#' + clipId +
+    ')"><rect width="96" height="96" fill="' + palette.background + '"/><text x="48" y="50" fill="' + palette.foreground +
+    '" font-family="Arial, Helvetica, sans-serif" font-size="43" font-weight="600" text-anchor="middle" dominant-baseline="middle">' +
+    xmlText(initial) + '</text></g><rect x="0.5" y="0.5" width="95" height="95" rx="23.5" fill="none" stroke="#000000" stroke-opacity="0.18"/></svg>';
+}
+
+export function mateMarkDataUrl(options) {
+  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(mateMarkSvg(options));
+}

package/lib/public/modules/avatar.js

@@ -1,36 +1,42 @@
-// Centralized avatar URL builder and style definitions
-// All DiceBear avatar URLs should be constructed through this module.
+// Centralized Clay Imprint URL builder for people and Mates.
+import { imprintDataUrl, mateMarkDataUrl } from './avatar-imprint.js';
 
-export var AVATAR_STYLES = [
-  { id: 'thumbs', name: 'Thumbs' },
-  { id: 'bottts', name: 'Bots' },
-  { id: 'pixel-art', name: 'Pixel' },
-  { id: 'adventurer', name: 'Adventurer' },
-  { id: 'micah', name: 'Micah' },
-  { id: 'fun-emoji', name: 'Emoji' },
-  { id: 'icons', name: 'Icons' },
-];
+var imprintCache = new Map();
+var mateMarkCache = new Map();
 
-// Build a DiceBear avatar URL from style, seed, and optional size.
+// Legacy style remains part of the identity hash so existing selections map
+// deterministically into the new Clay Imprint system.
 export function avatarUrl(style, seed, size) {
-  var s = encodeURIComponent(seed || 'anonymous');
-  return 'https://api.dicebear.com/9.x/' + (style || 'thumbs') + '/svg?seed=' + s + '&size=' + (size || 64);
+  var cacheKey = [style || 'imprint', seed || 'anonymous', size || 64].join('|');
+  if (imprintCache.has(cacheKey)) return imprintCache.get(cacheKey);
+  var url = imprintDataUrl({ style: style || 'imprint', seed: seed || 'anonymous', size: size || 64 });
+  if (imprintCache.size >= 512) imprintCache.delete(imprintCache.keys().next().value);
+  imprintCache.set(cacheKey, url);
+  return url;
 }
 
 // Build avatar URL for a user object, preferring custom avatar if set.
 export function userAvatarUrl(user, size) {
   if (user && user.avatarCustom) return user.avatarCustom;
-  var style = (user && user.avatarStyle) || 'thumbs';
+  var style = (user && user.avatarStyle) || 'imprint';
   var seed = (user && (user.avatarSeed || user.username || user.id)) || 'anonymous';
   return avatarUrl(style, seed, size);
 }
 
+export function mateMarkUrl(seed, size) {
+  var cacheKey = [seed || 'mate', size || 64].join('|');
+  if (mateMarkCache.has(cacheKey)) return mateMarkCache.get(cacheKey);
+  var url = mateMarkDataUrl({ seed: seed || 'mate', size: size || 64 });
+  if (mateMarkCache.size >= 256) mateMarkCache.delete(mateMarkCache.keys().next().value);
+  mateMarkCache.set(cacheKey, url);
+  return url;
+}
+
 // Build avatar URL for a mate object, preferring custom avatar if set.
 export function mateAvatarUrl(mate, size) {
-  if (!mate) return avatarUrl('bottts', 'mate', size);
+  if (!mate) return mateMarkUrl('mate', size);
   var p = mate.profile || mate;
   if (p.avatarCustom || mate.avatarCustom) return p.avatarCustom || mate.avatarCustom;
-  var style = p.avatarStyle || mate.avatarStyle || 'bottts';
-  var seed = p.avatarSeed || mate.avatarSeed || mate.id || 'mate';
-  return avatarUrl(style, seed, size);
+  var identity = p.displayName || mate.name || mate.displayName || 'Mate';
+  return mateMarkUrl(identity, size);
 }

package/lib/public/modules/debate.js

@@ -53,7 +53,15 @@ export function resetDebateState() {
 }
 
 function buildAvatarUrl(meta) {
-  return "https://api.dicebear.com/7.x/" + (meta.avatarStyle || "bottts") + "/svg?seed=" + encodeURIComponent(meta.avatarSeed || meta.mateId || "mate");
+  return mateAvatarUrl({
+    id: meta.mateId,
+    profile: {
+      avatarStyle: meta.avatarStyle || "imprint",
+      avatarSeed: meta.avatarSeed || meta.mateId || "mate",
+      avatarColor: meta.avatarColor || "#5857fc",
+      avatarCustom: meta.avatarCustom || "",
+    },
+  }, 32);
 }
 
 // --- Float info panel ---
@@ -943,12 +951,9 @@ function createPanelItem(mate) {
   cb.type = "checkbox";
   item.appendChild(cb);
 
-  var avatarSrc = "https://api.dicebear.com/7.x/" +
-    ((mate.profile && mate.profile.avatarStyle) || "bottts") +
-    "/svg?seed=" + encodeURIComponent((mate.profile && mate.profile.avatarSeed) || mate.id);
   var avi = document.createElement("img");
   avi.className = "debate-panel-item-avatar";
-  avi.src = avatarSrc;
+  avi.src = mateAvatarUrl(mate, 32);
   item.appendChild(avi);
 
   var info = document.createElement("div");

package/lib/public/modules/generated-images.js

@@ -3,6 +3,11 @@
 import { refreshIcons, iconHtml } from './icons.js';
 import { showImageModal } from './app-misc.js';
 import { addToMessages, scrollToBottom } from './app-rendering.js';
+import { store } from './store.js';
+import { copyToClipboard, showToast } from './utils.js';
+
+var detailsModal = null;
+var detailsEscapeHandler = null;
 
 function fileNameFromImage(image) {
   if (image.fileName) return image.fileName;
@@ -24,6 +29,202 @@ function actionButton(icon, label) {
   return button;
 }
 
+function closeImageDetails() {
+  if (detailsModal) detailsModal.remove();
+  if (detailsEscapeHandler) document.removeEventListener('keydown', detailsEscapeHandler);
+  detailsModal = null;
+  detailsEscapeHandler = null;
+}
+
+function setActionState(button, icon, label) {
+  if (!button) return;
+  button.innerHTML = iconHtml(icon) + '<span>' + label + '</span>';
+  button.title = label;
+  button.setAttribute('aria-label', label);
+  refreshIcons(button);
+}
+
+function saveGeneratedImage(image, targetPath, overwrite) {
+  var basePath = store.get('basePath') || '';
+  return fetch(basePath + 'api/generated-image/save', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'same-origin',
+    body: JSON.stringify({
+      fileName: fileNameFromImage(image),
+      path: targetPath,
+      overwrite: !!overwrite,
+    }),
+  }).then(function (response) {
+    return response.text().then(function (text) {
+      var data = {};
+      try { data = JSON.parse(text); } catch (e) { data.error = text || 'Could not save image'; }
+      data.status = response.status;
+      data.ok = response.ok && data.ok !== false;
+      return data;
+    });
+  });
+}
+
+function showGeneratedImageDetails(image, promptText, sourceSaveButton, focusPath) {
+  closeImageDetails();
+  var prompt = promptText || '';
+  var fileName = fileNameFromImage(image);
+  var overwrite = false;
+
+  var backdrop = document.createElement('div');
+  backdrop.className = 'generated-image-details-backdrop';
+  var modal = document.createElement('section');
+  modal.className = 'generated-image-details';
+  modal.setAttribute('role', 'dialog');
+  modal.setAttribute('aria-modal', 'true');
+  modal.setAttribute('aria-labelledby', 'generated-image-details-title');
+
+  var header = document.createElement('header');
+  header.className = 'generated-image-details-header';
+  var heading = document.createElement('div');
+  var eyebrow = document.createElement('span');
+  eyebrow.className = 'generated-image-details-eyebrow';
+  eyebrow.textContent = 'IMAGE GENERATION';
+  var title = document.createElement('h2');
+  title.id = 'generated-image-details-title';
+  title.textContent = 'Image details';
+  heading.appendChild(eyebrow);
+  heading.appendChild(title);
+  var closeButton = actionButton('x', 'Close');
+  closeButton.classList.add('generated-image-details-close');
+  closeButton.addEventListener('click', closeImageDetails);
+  header.appendChild(heading);
+  header.appendChild(closeButton);
+  modal.appendChild(header);
+
+  var body = document.createElement('div');
+  body.className = 'generated-image-details-body';
+  var preview = document.createElement('div');
+  preview.className = 'generated-image-details-preview';
+  var previewImage = document.createElement('img');
+  previewImage.src = image.url;
+  previewImage.alt = prompt ? 'Generated image: ' + prompt : 'Generated image';
+  previewImage.addEventListener('click', function () { showImageModal(image.url); });
+  preview.appendChild(previewImage);
+  body.appendChild(preview);
+
+  var promptSection = document.createElement('section');
+  promptSection.className = 'generated-image-details-section';
+  var promptHeader = document.createElement('div');
+  promptHeader.className = 'generated-image-details-section-header';
+  var promptLabel = document.createElement('h3');
+  promptLabel.textContent = 'Prompt';
+  promptHeader.appendChild(promptLabel);
+  if (prompt) {
+    var copyPrompt = actionButton('copy', 'Copy prompt');
+    copyPrompt.addEventListener('click', function () { copyToClipboard(prompt); });
+    promptHeader.appendChild(copyPrompt);
+  }
+  var promptBody = document.createElement('div');
+  promptBody.className = 'generated-image-details-prompt';
+  promptBody.textContent = prompt || 'Prompt details are not available for this image.';
+  promptSection.appendChild(promptHeader);
+  promptSection.appendChild(promptBody);
+  body.appendChild(promptSection);
+
+  var saveSection = document.createElement('section');
+  saveSection.className = 'generated-image-details-section generated-image-save-section';
+  var saveLabel = document.createElement('label');
+  saveLabel.htmlFor = 'generated-image-project-path';
+  saveLabel.textContent = 'Project path';
+  var pathInput = document.createElement('input');
+  pathInput.id = 'generated-image-project-path';
+  pathInput.type = 'text';
+  pathInput.value = 'assets/generated/' + fileName;
+  pathInput.spellcheck = false;
+  pathInput.autocomplete = 'off';
+  var saveHint = document.createElement('p');
+  saveHint.className = 'generated-image-save-hint';
+  saveHint.textContent = 'The folder will be created inside this project if needed.';
+  var saveError = document.createElement('p');
+  saveError.className = 'generated-image-save-error hidden';
+  saveSection.appendChild(saveLabel);
+  saveSection.appendChild(pathInput);
+  saveSection.appendChild(saveHint);
+  saveSection.appendChild(saveError);
+  body.appendChild(saveSection);
+  modal.appendChild(body);
+
+  var footer = document.createElement('footer');
+  footer.className = 'generated-image-details-footer';
+  var cancelButton = document.createElement('button');
+  cancelButton.type = 'button';
+  cancelButton.className = 'generated-image-secondary-button';
+  cancelButton.textContent = 'Cancel';
+  cancelButton.addEventListener('click', closeImageDetails);
+  var saveButton = document.createElement('button');
+  saveButton.type = 'button';
+  saveButton.className = 'generated-image-primary-button';
+  saveButton.innerHTML = iconHtml('save') + '<span>Save to project</span>';
+  footer.appendChild(cancelButton);
+  footer.appendChild(saveButton);
+  modal.appendChild(footer);
+  backdrop.appendChild(modal);
+  document.body.appendChild(backdrop);
+  detailsModal = backdrop;
+
+  function resetOverwrite() {
+    overwrite = false;
+    saveError.classList.add('hidden');
+    saveError.textContent = '';
+    saveButton.classList.remove('generated-image-primary-button--replace');
+    saveButton.innerHTML = iconHtml('save') + '<span>Save to project</span>';
+    refreshIcons(saveButton);
+  }
+
+  pathInput.addEventListener('input', resetOverwrite);
+  saveButton.addEventListener('click', function () {
+    var targetPath = pathInput.value.trim();
+    if (!targetPath) {
+      saveError.textContent = 'Enter a project path.';
+      saveError.classList.remove('hidden');
+      pathInput.focus();
+      return;
+    }
+    saveButton.disabled = true;
+    saveError.classList.add('hidden');
+    saveGeneratedImage(image, targetPath, overwrite).then(function (result) {
+      saveButton.disabled = false;
+      if (result.ok) {
+        setActionState(sourceSaveButton, 'check', 'Saved');
+        if (sourceSaveButton) sourceSaveButton.disabled = true;
+        showToast('Saved to ' + result.path);
+        closeImageDetails();
+        return;
+      }
+      saveError.textContent = result.error || 'Could not save image.';
+      saveError.classList.remove('hidden');
+      if (result.status === 409) {
+        overwrite = true;
+        saveButton.classList.add('generated-image-primary-button--replace');
+        saveButton.innerHTML = iconHtml('replace') + '<span>Replace file</span>';
+        refreshIcons(saveButton);
+      }
+    }).catch(function () {
+      saveButton.disabled = false;
+      saveError.textContent = 'Could not save image.';
+      saveError.classList.remove('hidden');
+    });
+  });
+
+  backdrop.addEventListener('click', function (event) {
+    if (event.target === backdrop) closeImageDetails();
+  });
+  detailsEscapeHandler = function (event) {
+    if (event.key === 'Escape') closeImageDetails();
+  };
+  document.addEventListener('keydown', detailsEscapeHandler);
+  refreshIcons(backdrop);
+  if (focusPath) pathInput.focus();
+  else closeButton.focus();
+}
+
 function findProgressRow(toolId) {
   var rows = document.querySelectorAll('.generated-image-row[data-image-tool-id]');
   for (var i = 0; i < rows.length; i++) {
@@ -99,10 +300,12 @@ export function renderGeneratedImage(msg) {
   label.innerHTML = iconHtml('sparkles') + '<span>Generated image</span>';
   meta.appendChild(label);
   if (msg.prompt) {
-    var prompt = document.createElement('span');
+    var prompt = document.createElement('button');
+    prompt.type = 'button';
     prompt.className = 'generated-image-prompt';
     prompt.textContent = msg.prompt;
-    prompt.title = msg.prompt;
+    prompt.title = 'View full prompt';
+    prompt.addEventListener('click', function () { showGeneratedImageDetails(image, msg.prompt, null, false); });
     meta.appendChild(prompt);
   }
   footer.appendChild(meta);
@@ -112,6 +315,12 @@ export function renderGeneratedImage(msg) {
   var openButton = actionButton('maximize-2', 'Open');
   openButton.addEventListener('click', function () { showImageModal(image.url); });
   actions.appendChild(openButton);
+  var saveButton = actionButton('save', 'Save');
+  saveButton.addEventListener('click', function () { showGeneratedImageDetails(image, msg.prompt, saveButton, true); });
+  var detailsButton = actionButton('info', 'Details');
+  detailsButton.addEventListener('click', function () { showGeneratedImageDetails(image, msg.prompt, saveButton, false); });
+  actions.appendChild(detailsButton);
+  actions.appendChild(saveButton);
   var downloadLink = document.createElement('a');
   downloadLink.className = 'generated-image-action';
   downloadLink.href = image.url;

package/lib/public/modules/mate-sidebar.js

@@ -139,7 +139,7 @@ export function showMateSidebar(mateId, mateData) {
   var profile = mateData.profile || mateData || {};
   var displayName = profile.displayName || mateData.displayName || mateData.name || "Mate";
 
-  var mateColor = profile.avatarColor || mateData.avatarColor || "#7c3aed";
+  var mateColor = profile.avatarColor || mateData.avatarColor || "#5857fc";
 
   var mateAvUrl = mateAvatarUrl(mateData, 32);
   if (avatarEl) avatarEl.src = mateAvUrl;
@@ -267,7 +267,7 @@ export function updateMateSidebarProfile(mateData) {
   if (!columnEl || !mateData) return;
   var profile = mateData.profile || mateData || {};
   var displayName = profile.displayName || mateData.displayName || mateData.name || "Mate";
-  var mateColor = profile.avatarColor || mateData.avatarColor || "#7c3aed";
+  var mateColor = profile.avatarColor || mateData.avatarColor || "#5857fc";
 
   if (avatarEl) {
     avatarEl.src = mateAvatarUrl(mateData, 32);