clay-server 3.7.0 → 3.8.0-beta.1

package/lib/os-users.js

@@ -98,7 +98,7 @@ function resolveOsUserInfo(username) {
 
 /**
  * Run a file system operation as a specific OS user via a helper subprocess.
- * op: "list", "read", "write", "stat"
+ * op: "list", "read", "write", "read_binary", "mkdir", "copy", "stat"
  * args: operation-specific arguments
  * osUserInfo: { uid, gid } from resolveOsUserInfo
  * Returns the result object or throws.
@@ -164,6 +164,22 @@ function fsAsUser(op, args, osUserInfo) {
       "fs.writeFileSync(f, content, 'utf8');",
       "process.stdout.write(JSON.stringify({ ok: true }));",
     ].join(" ");
+  } else if (op === "mkdir") {
+    script = [
+      "var fs = require('fs');",
+      "var dir = " + JSON.stringify(args.dir) + ";",
+      "fs.mkdirSync(dir, { recursive: true });",
+      "process.stdout.write(JSON.stringify({ ok: true }));",
+    ].join(" ");
+  } else if (op === "copy") {
+    script = [
+      "var fs = require('fs');",
+      "var source = " + JSON.stringify(args.source) + ";",
+      "var file = " + JSON.stringify(args.file) + ";",
+      "var overwrite = " + JSON.stringify(!!args.overwrite) + ";",
+      "fs.copyFileSync(source, file, overwrite ? 0 : fs.constants.COPYFILE_EXCL);",
+      "process.stdout.write(JSON.stringify({ ok: true }));",
+    ].join(" ");
   } else {
     throw new Error("Unknown fsAsUser operation: " + op);
   }

package/lib/project-http.js

@@ -41,7 +41,7 @@ function parseJsonBody(req) {
  * ctx fields:
  *   cwd, slug, project, sm, send, sendTo, imagesDir, osUsers, pushModule,
  *   safePath, safeAbsPath, getOsUserInfoForReq, sendExtensionCommandAny,
- *   _extToken, _browserTabList
+ *   saveGeneratedImageToProject, _extToken, _browserTabList
  */
 function attachHTTP(ctx) {
   var cwd = ctx.cwd;
@@ -51,6 +51,7 @@ function attachHTTP(ctx) {
   var gitAttribution = ctx.gitAttribution;
   var send = ctx.send;
   var imagesDir = ctx.imagesDir;
+  var saveGeneratedImageToProject = ctx.saveGeneratedImageToProject;
   var osUsers = ctx.osUsers;
   var pushModule = ctx.pushModule;
   var safePath = ctx.safePath;
@@ -122,6 +123,38 @@ function attachHTTP(ctx) {
       return true;
     }
 
+    // Copy a generated image from Clay's session storage into the project.
+    if (req.method === "POST" && urlPath === "/api/generated-image/save") {
+      if (usersModule.isMultiUser()) {
+        var imageSaveUser = req._clayUser;
+        var imageSavePermissions = imageSaveUser ? usersModule.getEffectivePermissions(imageSaveUser, osUsers) : null;
+        if (!imageSavePermissions || !imageSavePermissions.fileBrowser) {
+          res.writeHead(403, { "Content-Type": "application/json" });
+          res.end('{"error":"File browser access is not permitted"}');
+          return true;
+        }
+      }
+      parseJsonBody(req).then(function (body) {
+        if (typeof saveGeneratedImageToProject !== "function") {
+          res.writeHead(501, { "Content-Type": "application/json" });
+          res.end('{"error":"Generated image saving is not available"}');
+          return;
+        }
+        var result = saveGeneratedImageToProject(
+          body.fileName,
+          body.path,
+          !!body.overwrite,
+          getOsUserInfoForReq(req)
+        );
+        res.writeHead(result.ok ? 200 : (result.status || 500), { "Content-Type": "application/json" });
+        res.end(JSON.stringify(result));
+      }).catch(function () {
+        res.writeHead(400, { "Content-Type": "application/json" });
+        res.end('{"error":"Invalid JSON body"}');
+      });
+      return true;
+    }
+
     // File upload
     if (req.method === "POST" && urlPath === "/api/upload") {
       parseJsonBody(req).then(function (body) {

package/lib/project-image.js

@@ -12,13 +12,98 @@ var execFileSync = require("child_process").execFileSync;
 function attachImage(ctx) {
   var cwd = ctx.cwd;
   var slug = ctx.slug;
+  var fsAsUser = ctx.fsAsUser;
 
   // --- Chat image storage ---
   var _imgConfig = require("./config");
   var _imgUtils = require("./utils");
   var _imagesBaseDir = path.join(_imgConfig.CONFIG_DIR, "images");
   var _imagesEncodedCwd = _imgUtils.encodeCwd(cwd);
-  var imagesDir = path.join(_imagesBaseDir, _imagesEncodedCwd);
+  var imagesDir = ctx.imagesDir || path.join(_imagesBaseDir, _imagesEncodedCwd);
+
+  function isWithin(base, candidate) {
+    return candidate === base || candidate.indexOf(base + path.sep) === 0;
+  }
+
+  function saveGeneratedImageToProject(fileName, requestedPath, overwrite, osUserInfo) {
+    if (typeof fileName !== "string" || !/^\d+-[a-f0-9]+\.\w+$/.test(fileName)) {
+      return { ok: false, status: 400, error: "Invalid generated image" };
+    }
+    if (typeof requestedPath !== "string" || !requestedPath.trim() || requestedPath.length > 500) {
+      return { ok: false, status: 400, error: "Enter a project path" };
+    }
+
+    var sourcePath = path.join(imagesDir, fileName);
+    var sourceExt = path.extname(fileName).toLowerCase();
+    var targetPath = requestedPath.trim();
+    if (path.isAbsolute(targetPath)) {
+      return { ok: false, status: 400, error: "Use a project-relative path" };
+    }
+    var targetExt = path.extname(targetPath).toLowerCase();
+    if (targetExt !== sourceExt) {
+      return { ok: false, status: 400, error: "Keep the " + sourceExt + " file extension" };
+    }
+
+    var projectRoot;
+    var targetAbs;
+    try {
+      projectRoot = fs.realpathSync(cwd);
+      targetAbs = path.resolve(projectRoot, targetPath);
+    } catch (e) {
+      return { ok: false, status: 400, error: "Project path is not available" };
+    }
+    if (targetAbs === projectRoot || !isWithin(projectRoot, targetAbs)) {
+      return { ok: false, status: 403, error: "Path must stay inside the project" };
+    }
+
+    try {
+      var sourceReal = fs.realpathSync(sourcePath);
+      var imagesRoot = fs.realpathSync(imagesDir);
+      if (!isWithin(imagesRoot, sourceReal) || !fs.statSync(sourceReal).isFile()) {
+        return { ok: false, status: 404, error: "Generated image not found" };
+      }
+
+      var parentDir = path.dirname(targetAbs);
+      var existingParent = parentDir;
+      while (!fs.existsSync(existingParent) && existingParent !== projectRoot) {
+        existingParent = path.dirname(existingParent);
+      }
+      var realExistingParent = fs.realpathSync(existingParent);
+      if (!isWithin(projectRoot, realExistingParent)) {
+        return { ok: false, status: 403, error: "Path must stay inside the project" };
+      }
+      if (osUserInfo && typeof fsAsUser === "function") {
+        fsAsUser("mkdir", { dir: parentDir }, osUserInfo);
+      } else {
+        fs.mkdirSync(parentDir, { recursive: true });
+      }
+      var realParent = fs.realpathSync(parentDir);
+      if (!isWithin(projectRoot, realParent)) {
+        return { ok: false, status: 403, error: "Path must stay inside the project" };
+      }
+      if (fs.existsSync(targetAbs)) {
+        if (fs.lstatSync(targetAbs).isSymbolicLink()) {
+          return { ok: false, status: 403, error: "Symbolic link targets cannot be replaced" };
+        }
+        if (!overwrite) {
+          return { ok: false, status: 409, error: "A file already exists at this path" };
+        }
+      }
+
+      if (osUserInfo && typeof fsAsUser === "function") {
+        fsAsUser("copy", { source: sourceReal, file: targetAbs, overwrite: !!overwrite }, osUserInfo);
+      } else {
+        fs.copyFileSync(sourceReal, targetAbs, overwrite ? 0 : fs.constants.COPYFILE_EXCL);
+      }
+      try { fs.chmodSync(targetAbs, 0o644); } catch (e2) {}
+      return { ok: true, path: path.relative(projectRoot, targetAbs).split(path.sep).join("/") };
+    } catch (e) {
+      if (e && e.code === "EEXIST") {
+        return { ok: false, status: 409, error: "A file already exists at this path" };
+      }
+      return { ok: false, status: 500, error: "Could not save the generated image" };
+    }
+  }
 
   // Convert imageRefs in history entries to images with URLs for the client
   function hydrateImageRefs(entry) {
@@ -89,6 +174,7 @@ function attachImage(ctx) {
     imagesDir: imagesDir,
     hydrateImageRefs: hydrateImageRefs,
     saveImageFile: saveImageFile,
+    saveGeneratedImageToProject: saveGeneratedImageToProject,
   };
 }
 

package/lib/project.js

@@ -187,7 +187,7 @@ function createProjectContext(opts) {
   // Do NOT write to .claude-local/settings.json -- the SDK reads that too, causing duplicate spawns.
 
   // --- Image engine (delegated to project-image.js) ---
-  var _image = attachImage({ cwd: cwd, slug: slug });
+  var _image = attachImage({ cwd: cwd, slug: slug, fsAsUser: fsAsUser });
   var imagesDir = _image.imagesDir;
   var hydrateImageRefs = _image.hydrateImageRefs;
   var saveImageFile = _image.saveImageFile;
@@ -1632,6 +1632,7 @@ function createProjectContext(opts) {
     gitAttribution: _gitAttribution,
     send: send,
     imagesDir: imagesDir,
+    saveGeneratedImageToProject: _image.saveGeneratedImageToProject,
     osUsers: osUsers,
     pushModule: pushModule,
     safePath: safePath,

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/index.html

@@ -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/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/style.css

@@ -8,7 +8,7 @@
 @import url("css/overlays.css?v=20260827-brand3");
 @import url("css/menus.css");
 @import url("css/messages.css?v=20260828-delegated-muted1");
-@import url("css/generated-images.css?v=20260829c");
+@import url("css/generated-images.css?v=20260829-save-details1");
 @import url("css/rewind.css");
 @import url("css/input.css?v=20260828-composer-depth1");
 @import url("css/filebrowser.css?v=20260829-terminal-canvas1");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "3.7.0",
+  "version": "3.8.0-beta.1",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js",