clay-server 2.9.3 → 2.10.0-beta.1

package/lib/public/app.js

@@ -1825,6 +1825,7 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     scrollToBottom: function() { scrollToBottom(); },
     setActivity: function(text) { setActivity(text); },
     stopUrgentBlink: function() { stopUrgentBlink(); },
+    showImageModal: showImageModal,
     getContextPercent: function() {
       var used = contextData.input;
       var win = contextData.contextWindow;
@@ -2896,8 +2897,8 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
             var tr = getTools()[msg.id];
             if (tr && tr.hidden) break; // skip hidden plan tools
             // Always call updateToolResult for Edit (to show diff from input), or when content exists
-            if (msg.content != null || (tr && tr.name === "Edit" && tr.input && tr.input.old_string)) {
-              updateToolResult(msg.id, msg.content || "", msg.is_error || false);
+            if (msg.content != null || msg.images || (tr && tr.name === "Edit" && tr.input && tr.input.old_string)) {
+              updateToolResult(msg.id, msg.content || "", msg.is_error || false, msg.images);
             }
             // Refresh file browser if an Edit/Write tool modified the open file
             if (!msg.is_error && tr && (tr.name === "Edit" || tr.name === "Write") && tr.input && tr.input.file_path) {
@@ -3450,7 +3451,17 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     if (reconnectTimer) return;
     reconnectTimer = setTimeout(function () {
       reconnectTimer = null;
-      connect();
+      // Check if auth is still valid before reconnecting
+      fetch("/info").then(function (res) {
+        if (res.status === 401) {
+          location.reload();
+          return;
+        }
+        connect();
+      }).catch(function () {
+        // Server still down, try connecting anyway
+        connect();
+      });
     }, reconnectDelay);
     reconnectDelay = Math.min(reconnectDelay * 1.5, 10000);
   }

package/lib/public/css/messages.css

@@ -858,6 +858,25 @@ pre.mermaid-error {
   font-size: 12px;
 }
 
+/* --- Image viewer (Read tool) --- */
+.tool-result-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+}
+
+.tool-result-image img {
+  max-width: 100%;
+  max-height: 400px;
+  border-radius: 8px;
+  border: 1px solid var(--border-subtle);
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.tool-result-image img:hover { opacity: 0.85; }
+
 /* --- Code viewer (Read tool) --- */
 .code-viewer {
   display: flex;

package/lib/public/modules/tools.js

@@ -1281,7 +1281,16 @@ function parseLineNumberedContent(text) {
   return { numbers: numbers, code: code };
 }
 
-export function updateToolResult(id, content, isError) {
+var IMAGE_EXTS = new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".svg", ".bmp", ".ico"]);
+
+function isImagePath(filePath) {
+  if (!filePath) return false;
+  var dotIdx = filePath.lastIndexOf(".");
+  if (dotIdx === -1) return false;
+  return IMAGE_EXTS.has(filePath.substring(dotIdx).toLowerCase());
+}
+
+export function updateToolResult(id, content, isError, images) {
   var tool = tools[id];
   if (!tool) return;
 
@@ -1309,6 +1318,27 @@ export function updateToolResult(id, content, isError) {
   } else if (!isError && isDiffContent(displayContent)) {
     var patchLang = tool.input && tool.input.file_path ? getLanguageFromPath(tool.input.file_path) : null;
     resultBlock.appendChild(renderPatchDiff(displayContent, patchLang));
+  } else if (!isError && tool.name === "Read" && tool.input && tool.input.file_path && isImagePath(tool.input.file_path)) {
+    // Image file: show inline preview
+    var imgWrap = document.createElement("div");
+    imgWrap.className = "tool-result-image";
+    var img = document.createElement("img");
+    if (images && images.length > 0) {
+      img.src = "data:" + images[0].mediaType + ";base64," + images[0].data;
+    } else {
+      img.src = "api/file?path=" + encodeURIComponent(tool.input.file_path);
+    }
+    img.alt = tool.input.file_path.split("/").pop();
+    img.draggable = false;
+    img.addEventListener("click", function (e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (ctx.showImageModal) ctx.showImageModal(this.src);
+    });
+    imgWrap.appendChild(img);
+    resultBlock.appendChild(imgWrap);
+    resultBlock.className = "tool-result-block";
+    tool.el.classList.add("expanded");
   } else if (!isError && tool.name === "Read" && tool.input && tool.input.file_path) {
     var parsed = parseLineNumberedContent(displayContent);
     if (parsed) {

package/lib/sdk-bridge.js

@@ -279,6 +279,7 @@ function createSDKBridge(opts) {
               delete session.activeTaskToolIds[block.tool_use_id];
             }
             var resultText = "";
+            var resultImages = [];
             if (typeof block.content === "string") {
               resultText = block.content;
             } else if (Array.isArray(block.content)) {
@@ -286,14 +287,25 @@ function createSDKBridge(opts) {
                 .filter(function(c) { return c.type === "text"; })
                 .map(function(c) { return c.text; })
                 .join("\n");
+              for (var ri = 0; ri < block.content.length; ri++) {
+                var rc = block.content[ri];
+                if (rc.type === "image" && rc.source) {
+                  resultImages.push({
+                    mediaType: rc.source.media_type,
+                    data: rc.source.data,
+                  });
+                }
+              }
             }
             session.sentToolResults[block.tool_use_id] = true;
-            sendAndRecord(session, {
+            var toolResultMsg = {
               type: "tool_result",
               id: block.tool_use_id,
               content: resultText,
               is_error: block.is_error || false,
-            });
+            };
+            if (resultImages.length > 0) toolResultMsg.images = resultImages;
+            sendAndRecord(session, toolResultMsg);
           }
         }
       }

package/lib/sessions.js

@@ -325,6 +325,7 @@ function createSessionManager(opts) {
     if (!session) return;
 
     activeSessionId = localId;
+    if (targetWs) targetWs._clayActiveSession = localId;
 
     // In multi-user mode with a specific client, only send to that client
     var _send = (targetWs && sendTo) ? function (obj) { sendTo(targetWs, obj); } : send;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.9.3",
+  "version": "2.10.0-beta.1",
   "description": "Web UI for Claude Code. Any device. Push notifications.",
   "bin": {
     "clay-server": "./bin/cli.js",