clay-server 3.6.0 → 3.7.0-beta.1

package/lib/project-image.js

@@ -34,7 +34,7 @@ function attachImage(ctx) {
       return hydrated;
     }
     if (!entry.imageRefs) return entry;
-    if (entry.type !== "user_message" && entry.type !== "mention_user" && entry.type !== "user_mention") return entry;
+    if (entry.type !== "user_message" && entry.type !== "mention_user" && entry.type !== "user_mention" && entry.type !== "generated_image") return entry;
     var images = [];
     for (var ri = 0; ri < entry.imageRefs.length; ri++) {
       var ref = entry.imageRefs[ri];

package/lib/project.js

@@ -882,6 +882,7 @@ function createProjectContext(opts) {
     scheduleMessage: function (session, text, resetsAt) {
       scheduleMessage(session, text, resetsAt);
     },
+    saveImageFile: saveImageFile,
     getAutoContinueSetting: function (session) {
       // Per-user setting in multi-user mode
       if (usersModule.isMultiUser() && session && session.ownerId) {

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

@@ -0,0 +1,225 @@
+.generated-image-row {
+  width: 100%;
+  max-width: var(--content-width);
+  margin: 4px auto 16px;
+  padding: 0 20px;
+}
+
+.generated-image-card {
+  width: min(560px, 100%);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--bg-alt);
+  box-shadow: 0 8px 28px rgba(var(--shadow-rgb), 0.16);
+}
+
+.generated-image-status {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: min(560px, 100%);
+  min-height: 30px;
+  padding: 0 2px 7px;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.generated-image-status .lucide {
+  width: 14px;
+  height: 14px;
+  color: var(--accent);
+  animation: generated-image-sparkle 2.4s ease-in-out infinite;
+}
+
+.generated-image-status-dots::after {
+  content: "";
+  animation: generated-image-ellipsis 1.4s steps(4, end) infinite;
+}
+
+.generated-image-card--pending {
+  position: relative;
+  width: min(560px, 100%);
+  aspect-ratio: 1 / 1;
+  border-color: var(--border-subtle);
+  background: var(--bg-alt);
+  box-shadow: none;
+}
+
+.generated-image-particle-field {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.generated-image-particle-field::before {
+  position: absolute;
+  inset: 11%;
+  content: "";
+  background-image: radial-gradient(circle, var(--text-dimmer) 1.4px, transparent 1.7px);
+  background-position: center;
+  background-size: 25px 25px;
+  opacity: 0.52;
+  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.88) 38%, transparent 72%);
+  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.88) 38%, transparent 72%);
+  animation: generated-image-field 3.2s ease-in-out infinite;
+}
+
+.generated-image-particle-field::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 36%;
+  aspect-ratio: 1 / 1;
+  border: 1px solid var(--accent-15);
+  border-radius: 50%;
+  content: "";
+  background: radial-gradient(circle, var(--accent-12), transparent 68%);
+  transform: translate(-50%, -50%);
+  animation: generated-image-pulse 3.2s ease-in-out infinite;
+}
+
+@keyframes generated-image-field {
+  0%, 100% { opacity: 0.28; transform: scale(0.92) rotate(-2deg); }
+  50% { opacity: 0.68; transform: scale(1.04) rotate(2deg); }
+}
+
+@keyframes generated-image-pulse {
+  0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.72); }
+  50% { opacity: 0.72; transform: translate(-50%, -50%) scale(1.08); }
+}
+
+@keyframes generated-image-sparkle {
+  0%, 100% { opacity: 0.5; transform: scale(0.86) rotate(-8deg); }
+  50% { opacity: 1; transform: scale(1.08) rotate(8deg); }
+}
+
+@keyframes generated-image-ellipsis {
+  0% { content: ""; }
+  25% { content: "."; }
+  50% { content: ".."; }
+  75%, 100% { content: "..."; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .generated-image-status .lucide,
+  .generated-image-status-dots::after,
+  .generated-image-particle-field::before,
+  .generated-image-particle-field::after {
+    animation: none;
+  }
+}
+
+.generated-image-preview {
+  display: grid;
+  place-items: center;
+  min-height: 180px;
+  max-height: 680px;
+  overflow: hidden;
+  background:
+    linear-gradient(45deg, rgba(var(--overlay-rgb), 0.025) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(var(--overlay-rgb), 0.025) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(var(--overlay-rgb), 0.025) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(var(--overlay-rgb), 0.025) 75%);
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+  background-size: 16px 16px;
+}
+
+.generated-image-preview img {
+  display: block;
+  width: 100%;
+  max-height: 680px;
+  object-fit: contain;
+  cursor: zoom-in;
+}
+
+.generated-image-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  min-height: 52px;
+  padding: 9px 10px 9px 14px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.generated-image-meta {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.generated-image-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.generated-image-label .lucide {
+  width: 13px;
+  height: 13px;
+  color: var(--accent);
+}
+
+.generated-image-prompt {
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.generated-image-actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 4px;
+}
+
+.generated-image-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 32px;
+  padding: 0 9px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-muted);
+  font: inherit;
+  font-size: 11px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.generated-image-action:hover {
+  border-color: var(--border);
+  background: rgba(var(--overlay-rgb), 0.04);
+  color: var(--text);
+}
+
+.generated-image-action .lucide {
+  width: 14px;
+  height: 14px;
+}
+
+@media (max-width: 560px) {
+  .generated-image-row { padding: 0 12px; }
+  .generated-image-card { border-radius: 12px; }
+
+  .generated-image-action span {
+    display: none;
+  }
+
+  .generated-image-action {
+    width: 32px;
+    justify-content: center;
+    padding: 0;
+  }
+}

package/lib/public/css/input.css

@@ -762,7 +762,7 @@
   color: var(--text-muted);
 }
 
-/* --- Bottom toolbar (attach left, model+send right) --- */
+/* --- Bottom toolbar (attach left, session config + send right) --- */
 #input-bottom {
   display: flex;
   align-items: center;
@@ -777,21 +777,7 @@
   flex-shrink: 0;
 }
 
-/* --- Vendor toggle (split toggle) --- */
-#vendor-toggle-wrap {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow: hidden;
-  height: 30px;
-  flex-shrink: 0;
-}
-#vendor-toggle-wrap.hidden { display: none; }
-
-/* Compact session-vendor icon shown next to the config-chip when the
-   full vendor-toggle is hidden (because the session's vendor is already
-   committed). Visual only - not clickable. */
+/* Compact committed-session vendor icon next to the config chip. */
 #active-vendor-indicator {
   display: inline-flex;
   align-items: center;
@@ -806,73 +792,13 @@
   border-radius: 4px;
   object-fit: cover;
 }
-#vendor-toggle-wrap.locked {
-  border: none;
-  height: auto;
-  pointer-events: none;
-}
-#vendor-toggle-wrap.locked .vendor-toggle-btn:not(.active) { display: none; }
-#vendor-toggle-wrap.locked .vendor-toggle-btn.active {
-  background: transparent;
-  padding: 0;
-  gap: 0;
-  opacity: 0.7;
-}
-#vendor-toggle-wrap.locked .vendor-toggle-btn.active .vendor-toggle-label { display: none; }
-#vendor-toggle-wrap.locked .vendor-toggle-btn:first-child { border-right: none; }
-.vendor-toggle-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 10px;
-  height: 100%;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--text-secondary);
-  transition: background 0.15s, color 0.15s;
-  white-space: nowrap;
-}
-.vendor-toggle-btn:first-child { border-right: 1px solid var(--border); }
-.vendor-toggle-btn.active {
-  background: var(--accent-12);
-  color: var(--accent);
-  font-weight: 600;
-}
-.vendor-toggle-btn.disabled {
-  opacity: 0.35;
-  cursor: default;
-}
-.vendor-toggle-btn.disabled:not(.active) { display: none; }
-.vendor-toggle-icon {
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  object-fit: cover;
-}
-.vendor-toggle-label {
-  pointer-events: none;
-}
-.vendor-toggle-btn.experimental::after,
 .vendor-experimental-badge {
-  content: "🧪";
   font-size: 10px;
   line-height: 1;
   font-weight: 400;
   filter: saturate(0.85);
-}
-.vendor-experimental-badge {
   margin-left: auto;
 }
-@media (min-width: 901px) {
-  .vendor-toggle-btn:not(.active) .vendor-toggle-label { display: none; }
-  .vendor-toggle-btn:not(.active) { padding: 0 8px; }
-}
-@media (max-width: 900px) {
-  .vendor-toggle-label { display: none; }
-  .vendor-toggle-btn { padding: 0 8px; }
-}
 
 /* --- Attach buttons & menu --- */
 #attach-wrap {
@@ -1290,7 +1216,6 @@
    Attach (files/images -> path injection) and voice input stay available. */
 body.tui-composer-active #schedule-btn,
 body.tui-composer-active #ask-mate-btn,
-body.tui-composer-active #vendor-toggle-wrap,
 body.tui-composer-active #active-vendor-indicator,
 body.tui-composer-active #config-chip-wrap {
   display: none !important;

package/lib/public/index.html

@@ -30,7 +30,7 @@
 (function(){try{var k="clay-theme-vars",v=localStorage.getItem(k),r=document.documentElement;if(v){var o=JSON.parse(v),p;for(p in o)r.style.setProperty(p,o[p]);var vt=localStorage.getItem(k.replace("-vars","-variant"));if(vt==="light"){r.classList.add("light-theme");r.classList.remove("dark-theme")}else{r.classList.add("dark-theme");r.classList.remove("light-theme")}var m=document.querySelector('meta[name="theme-color"]');if(m&&o["--bg"])m.setAttribute("content",o["--bg"])}else{var sl=window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches;if(sl){r.classList.add("light-theme");r.classList.remove("dark-theme")}}}catch(e){}})();
 </script>
 <script>if(window.navigator.standalone||window.matchMedia("(display-mode:standalone)").matches){document.documentElement.classList.add("pwa-standalone")}</script>
-<link rel="stylesheet" href="style.css?v=20260828-clay-theme1">
+<link rel="stylesheet" href="style.css?v=20260829-imagegen3">
 <style>
 @media(max-width:768px){
   /* User messages: vertical stack, avatar on top, right-aligned */
@@ -524,48 +524,6 @@
               </div>
             </div>
             <div id="input-bottom-right">
-              <div id="vendor-toggle-wrap">
-                <button id="vendor-btn-claude" class="vendor-toggle-btn active" data-vendor="claude">
-                  <img src="/claude-code-avatar.png" class="vendor-toggle-icon" alt="Claude">
-                  <span class="vendor-toggle-label">Claude Code</span>
-                </button>
-                <button id="vendor-btn-codex" class="vendor-toggle-btn" data-vendor="codex">
-                  <img src="/codex-avatar.png" class="vendor-toggle-icon" alt="Codex">
-                  <span class="vendor-toggle-label">Codex</span>
-                </button>
-                <button id="vendor-btn-antigravity" class="vendor-toggle-btn" data-vendor="antigravity">
-                  <img src="/antigravity-avatar.png" class="vendor-toggle-icon" alt="Antigravity">
-                  <span class="vendor-toggle-label">Antigravity CLI</span>
-                </button>
-                <button id="vendor-btn-opencode" class="vendor-toggle-btn" data-vendor="opencode">
-                  <img src="/opencode-avatar.svg" class="vendor-toggle-icon" alt="OpenCode">
-                  <span class="vendor-toggle-label">OpenCode</span>
-                </button>
-                <button id="vendor-btn-kimi" class="vendor-toggle-btn" data-vendor="kimi">
-                  <img src="/kimi-avatar.svg" class="vendor-toggle-icon" alt="Kimi">
-                  <span class="vendor-toggle-label">Kimi Code</span>
-                </button>
-                <button id="vendor-btn-grok" class="vendor-toggle-btn" data-vendor="grok">
-                  <img src="/grok-avatar.svg" class="vendor-toggle-icon" alt="Grok">
-                  <span class="vendor-toggle-label">Grok Build</span>
-                </button>
-                <button id="vendor-btn-copilot" class="vendor-toggle-btn" data-vendor="copilot">
-                  <img src="/copilot-avatar.svg" class="vendor-toggle-icon" alt="GitHub Copilot">
-                  <span class="vendor-toggle-label">GitHub Copilot CLI</span>
-                </button>
-                <button id="vendor-btn-qwen" class="vendor-toggle-btn" data-vendor="qwen">
-                  <img src="/qwen-avatar.svg" class="vendor-toggle-icon" alt="Qwen">
-                  <span class="vendor-toggle-label">Qwen Code</span>
-                </button>
-                <button id="vendor-btn-junie" class="vendor-toggle-btn" data-vendor="junie">
-                  <img src="/junie-avatar.svg" class="vendor-toggle-icon" alt="Junie">
-                  <span class="vendor-toggle-label">Junie CLI</span>
-                </button>
-                <button id="vendor-btn-kiro" class="vendor-toggle-btn" data-vendor="kiro">
-                  <img src="/kiro-avatar.svg" class="vendor-toggle-icon" alt="Kiro">
-                  <span class="vendor-toggle-label">Kiro CLI</span>
-                </button>
-              </div>
               <div id="active-vendor-indicator" class="hidden" title="Session vendor">
                 <img id="active-vendor-icon" alt="">
               </div>
@@ -2323,7 +2281,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=20260826a"></script>
+<script type="module" src="app.js?v=20260829-imagegen3"></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-messages.js

@@ -46,6 +46,7 @@ import { showImageModal, sendExtensionCommand, handleMcpToolCallMessage } from '
 import { handleMcpServersState } from './mcp-ui.js';
 import { handleShellCommandResult } from './shell-command.js';
 import { handleLoopRegistryUpdated, handleScheduleRunStarted, handleScheduleRunFinished, handleLoopScheduled, isSchedulerOpen, enterCraftingMode, exitCraftingMode, handleLoopRegistryFiles } from './scheduler.js';
+import { renderGeneratedImage, renderImageGenerationProgress, clearImageGenerationProgress, clearAllImageGenerationProgress } from './generated-images.js';
 
 // --- App module imports ---
 import { scrollToBottom, addToMessages, addUserMessage, addSystemMessage, removeMatePreThinking, appendDelta, finalizeAssistantBlock, addConflictMessage, addContextOverflowMessage, showSuggestionChips, armStickyBottom, VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
@@ -178,17 +179,6 @@ export function processMessage(msg) {
         if (!store.get('sessionIsProcessing')) {
           applyDeadSessionTodoCompaction();
         }
-        // Show the locked vendor toggle only when history exists AND the
-        // vendor isn't already committed. With a committed vendor,
-        // session_switched has already hidden the toggle and shown the
-        // small #active-vendor-indicator; re-showing the locked toggle
-        // here would duplicate the avatar next to the indicator.
-        var _hTotal = store.get('historyTotal') || 0;
-        var _vtw2 = document.getElementById("vendor-toggle-wrap");
-        if (_vtw2 && _hTotal > 0 && !store.get('currentVendor')) {
-          _vtw2.classList.remove("hidden");
-          _vtw2.classList.add("locked");
-        }
         // Restore cached rich context usage BEFORE updateContextPanel runs
         if (msg.contextUsage) {
           store.set({ richContextUsage: msg.contextUsage });
@@ -747,30 +737,9 @@ export function processMessage(msg) {
           selectDefaultVendorForBlankSession();
         }
         if (!msg.model) requestVendorModels(store.get('currentVendor') || "claude", true);
-        // Vendor toggle visibility + active-vendor indicator next to the
-        // model chip.
-        //   - Session has an explicit vendor: hide the toggle (it's
-        //     committed for this conversation) and show a small avatar
-        //     next to the config chip so the user still sees which vendor
-        //     is in use.
-        //   - History without recorded vendor: show locked toggle, no icon
-        //     (we don't know what to render).
-        //   - Brand-new no-vendor session: show toggle, no icon.
-        var _vtw = document.getElementById("vendor-toggle-wrap");
+        // Show the committed session vendor next to the model chip.
         var _avi = document.getElementById("active-vendor-indicator");
         var _avIcon = document.getElementById("active-vendor-icon");
-        if (_vtw) {
-          if (msg.vendor) {
-            _vtw.classList.add("hidden");
-            _vtw.classList.remove("locked");
-          } else if (msg.hasHistory) {
-            _vtw.classList.remove("hidden");
-            _vtw.classList.add("locked");
-          } else {
-            _vtw.classList.remove("locked");
-            _vtw.classList.remove("hidden");
-          }
-        }
         if (_avi && _avIcon) {
           if (msg.vendor && VENDOR_AVATARS[msg.vendor]) {
             _avIcon.src = VENDOR_AVATARS[msg.vendor];
@@ -996,6 +965,7 @@ export function processMessage(msg) {
         break;
 
       case "tool_executing":
+        if (msg.name === "ImageGen") renderImageGenerationProgress(msg);
         if ((msg.name === "propose_debate" || (msg.name && msg.name.indexOf("propose_debate") !== -1)) && msg.input) {
           var _dpTool = getTools()[msg.id];
           if (_dpTool) {
@@ -1047,6 +1017,7 @@ export function processMessage(msg) {
       case "tool_result": {
           var tr = getTools()[msg.id];
           if (tr && tr.hidden) break; // skip hidden plan tools
+          if (msg.is_error && tr && tr.name === "ImageGen") clearImageGenerationProgress(msg.id);
           // Always call updateToolResult for Edit (to show diff from input), or when content exists
           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);
@@ -1061,6 +1032,10 @@ export function processMessage(msg) {
         }
         break;
 
+      case "generated_image":
+        renderGeneratedImage(msg);
+        break;
+
       case "ask_user_answered":
         markAskUserAnswered(msg.toolId, msg.answers);
         stopUrgentBlink();
@@ -1160,6 +1135,7 @@ export function processMessage(msg) {
         stopThinking();
         markAllToolsDone();
         closeToolGroup();
+        clearAllImageGenerationProgress();
         finalizeAssistantBlock();
         addTurnMeta(msg.cost, msg.duration);
         accumulateUsage(msg.cost, msg.usage);

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

@@ -5,7 +5,6 @@ import { refreshIcons } from "./icons.js";
 import { escapeHtml, showToast } from "./utils.js";
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-import { VENDOR_NAMES, isExperimentalVendor } from './app-rendering.js';
 import { reportPaneContext } from './pane-bridge.js';
 import { setupModelPicker, renderModelPicker, requestVendorModels, prepareModelPickerOpen, modelDisplayName } from './model-picker.js';
 
@@ -368,79 +367,8 @@ export function initPanels() {
   configWebsearchSection = $("config-websearch-section");
   configWebsearchBar = $("config-websearch-bar");
 
-  // --- Vendor toggle ---
-  var vendorToggleWrap = $("vendor-toggle-wrap");
-  var vendorBtnClaude = $("vendor-btn-claude");
-  var vendorBtnCodex = $("vendor-btn-codex");
-  var vendorBtnAntigravity = $("vendor-btn-antigravity");
-  var vendorBtnOpenCode = $("vendor-btn-opencode");
-  var vendorBtnKimi = $("vendor-btn-kimi");
-  var vendorBtnGrok = $("vendor-btn-grok");
-  var vendorBtnCopilot = $("vendor-btn-copilot");
-  var vendorBtnQwen = $("vendor-btn-qwen");
-  var vendorBtnJunie = $("vendor-btn-junie");
-  var vendorBtnKiro = $("vendor-btn-kiro");
-  var vendorBtns = {
-    claude: vendorBtnClaude,
-    codex: vendorBtnCodex,
-    antigravity: vendorBtnAntigravity,
-    opencode: vendorBtnOpenCode,
-    kimi: vendorBtnKimi,
-    grok: vendorBtnGrok,
-    copilot: vendorBtnCopilot,
-    qwen: vendorBtnQwen,
-    junie: vendorBtnJunie,
-    kiro: vendorBtnKiro,
-  };
-
-  function updateVendorToggle() {
-    var installed = store.get('installedVendors') || [];
-    var current = store.get('currentVendor') || "claude";
-
-    var vendors = Object.keys(vendorBtns);
-    for (var i = 0; i < vendors.length; i++) {
-      var v = vendors[i];
-      var btn = vendorBtns[v];
-      if (!btn) continue;
-      var isInstalled = installed.indexOf(v) !== -1;
-      btn.classList.toggle("active", v === current);
-      btn.classList.toggle("disabled", !isInstalled);
-      btn.classList.toggle("experimental", isExperimentalVendor(v));
-      var title = isInstalled ? (VENDOR_NAMES[v] || v) : (VENDOR_NAMES[v] || v) + " is not installed";
-      if (isExperimentalVendor(v)) title += " · Experimental integration; not yet validated through direct use testing";
-      btn.title = title;
-    }
-  }
-
-  function onVendorClick(vendor) {
-    if (vendor === (store.get('currentVendor') || "claude")) return;
-    var installed = store.get('installedVendors') || [];
-    if (installed.indexOf(vendor) === -1) return;
-    store.set({ currentVendor: vendor, currentModel: "", currentModels: [], vendorCapabilities: {}, vendorSelectionLocked: true, sessionVendorBound: true });
-    var ws = getWs();
-    if (ws) ws.send(JSON.stringify({ type: "set_vendor", vendor: vendor }));
-  }
-
-  if (vendorBtnClaude) vendorBtnClaude.addEventListener("click", function() { onVendorClick("claude"); });
-  if (vendorBtnCodex) vendorBtnCodex.addEventListener("click", function() { onVendorClick("codex"); });
-  if (vendorBtnAntigravity) vendorBtnAntigravity.addEventListener("click", function() { onVendorClick("antigravity"); });
-  if (vendorBtnOpenCode) vendorBtnOpenCode.addEventListener("click", function() { onVendorClick("opencode"); });
-  if (vendorBtnKimi) vendorBtnKimi.addEventListener("click", function() { onVendorClick("kimi"); });
-  if (vendorBtnGrok) vendorBtnGrok.addEventListener("click", function() { onVendorClick("grok"); });
-  if (vendorBtnCopilot) vendorBtnCopilot.addEventListener("click", function() { onVendorClick("copilot"); });
-  if (vendorBtnQwen) vendorBtnQwen.addEventListener("click", function() { onVendorClick("qwen"); });
-  if (vendorBtnJunie) vendorBtnJunie.addEventListener("click", function() { onVendorClick("junie"); });
-  if (vendorBtnKiro) vendorBtnKiro.addEventListener("click", function() { onVendorClick("kiro"); });
-
   // --- Reactive UI sync ---
   store.subscribe(function (state, prev) {
-    // Vendor toggle state
-    if (state.availableVendors !== prev.availableVendors ||
-        state.installedVendors !== prev.installedVendors ||
-        state.currentVendor !== prev.currentVendor) {
-      updateVendorToggle();
-    }
-
     // richContextUsage changed -> update popover + panel
     if (state.richContextUsage !== prev.richContextUsage) {
       if (state.richContextUsage) {

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

@@ -0,0 +1,132 @@
+// Inline presentation for images produced by Codex ImageGen.
+
+import { refreshIcons, iconHtml } from './icons.js';
+import { showImageModal } from './app-misc.js';
+import { addToMessages, scrollToBottom } from './app-rendering.js';
+
+function fileNameFromImage(image) {
+  if (image.fileName) return image.fileName;
+  try {
+    var url = new URL(image.url, window.location.href);
+    return decodeURIComponent(url.pathname.split('/').pop()) || 'generated-image.png';
+  } catch (e) {
+    return 'generated-image.png';
+  }
+}
+
+function actionButton(icon, label) {
+  var button = document.createElement('button');
+  button.type = 'button';
+  button.className = 'generated-image-action';
+  button.title = label;
+  button.setAttribute('aria-label', label);
+  button.innerHTML = iconHtml(icon) + '<span>' + label + '</span>';
+  return button;
+}
+
+function findProgressRow(toolId) {
+  var rows = document.querySelectorAll('.generated-image-row[data-image-tool-id]');
+  for (var i = 0; i < rows.length; i++) {
+    if (rows[i].dataset.imageToolId === String(toolId || '')) return rows[i];
+  }
+  return null;
+}
+
+export function renderImageGenerationProgress(msg) {
+  if (!msg.id || findProgressRow(msg.id)) return;
+
+  var row = document.createElement('div');
+  row.className = 'generated-image-row generated-image-row--pending';
+  row.dataset.imageToolId = msg.id;
+
+  var status = document.createElement('div');
+  status.className = 'generated-image-status';
+  status.setAttribute('role', 'status');
+  status.setAttribute('aria-live', 'polite');
+  status.innerHTML = iconHtml('sparkles') + '<span>Creating image</span><span class="generated-image-status-dots" aria-hidden="true"></span>';
+  row.appendChild(status);
+
+  var card = document.createElement('div');
+  card.className = 'generated-image-card generated-image-card--pending';
+  card.setAttribute('aria-hidden', 'true');
+  var field = document.createElement('div');
+  field.className = 'generated-image-particle-field';
+  card.appendChild(field);
+  row.appendChild(card);
+
+  addToMessages(row);
+  refreshIcons(row);
+  scrollToBottom();
+}
+
+export function clearImageGenerationProgress(toolId) {
+  var row = findProgressRow(toolId);
+  if (row && row.classList.contains('generated-image-row--pending')) row.remove();
+}
+
+export function clearAllImageGenerationProgress() {
+  var rows = document.querySelectorAll('.generated-image-row--pending');
+  for (var i = 0; i < rows.length; i++) rows[i].remove();
+}
+
+export function renderGeneratedImage(msg) {
+  var image = msg.images && msg.images[0];
+  if (!image || !image.url) return;
+
+  var row = document.createElement('div');
+  row.className = 'generated-image-row';
+  row.dataset.imageToolId = msg.id || '';
+  var card = document.createElement('figure');
+  card.className = 'generated-image-card';
+  card.dataset.toolId = msg.id || '';
+
+  var imageWrap = document.createElement('div');
+  imageWrap.className = 'generated-image-preview';
+  var img = document.createElement('img');
+  img.src = image.url;
+  img.alt = msg.prompt ? 'Generated image: ' + msg.prompt : 'Generated image';
+  img.loading = 'lazy';
+  img.addEventListener('click', function () { showImageModal(image.url); });
+  imageWrap.appendChild(img);
+  card.appendChild(imageWrap);
+
+  var footer = document.createElement('figcaption');
+  footer.className = 'generated-image-footer';
+  var meta = document.createElement('div');
+  meta.className = 'generated-image-meta';
+  var label = document.createElement('span');
+  label.className = 'generated-image-label';
+  label.innerHTML = iconHtml('sparkles') + '<span>Generated image</span>';
+  meta.appendChild(label);
+  if (msg.prompt) {
+    var prompt = document.createElement('span');
+    prompt.className = 'generated-image-prompt';
+    prompt.textContent = msg.prompt;
+    prompt.title = msg.prompt;
+    meta.appendChild(prompt);
+  }
+  footer.appendChild(meta);
+
+  var actions = document.createElement('div');
+  actions.className = 'generated-image-actions';
+  var openButton = actionButton('maximize-2', 'Open');
+  openButton.addEventListener('click', function () { showImageModal(image.url); });
+  actions.appendChild(openButton);
+  var downloadLink = document.createElement('a');
+  downloadLink.className = 'generated-image-action';
+  downloadLink.href = image.url;
+  downloadLink.download = fileNameFromImage(image);
+  downloadLink.title = 'Download';
+  downloadLink.setAttribute('aria-label', 'Download');
+  downloadLink.innerHTML = iconHtml('download') + '<span>Download</span>';
+  actions.appendChild(downloadLink);
+  footer.appendChild(actions);
+  card.appendChild(footer);
+  row.appendChild(card);
+
+  var progressRow = findProgressRow(msg.id);
+  if (progressRow) progressRow.replaceWith(row);
+  else addToMessages(row);
+  refreshIcons(row);
+  scrollToBottom();
+}

package/lib/public/modules/input.js

@@ -78,23 +78,15 @@ export var builtinCommands = [
 
 function commitVendorForTurn() {
   var committedVendor = store.get('currentVendor');
-  var vendorToggle = document.getElementById("vendor-toggle-wrap");
   var activeIndicator = document.getElementById("active-vendor-indicator");
   var activeIcon = document.getElementById("active-vendor-icon");
   if (committedVendor) {
-    if (vendorToggle) {
-      vendorToggle.classList.add("hidden");
-      vendorToggle.classList.remove("locked");
-    }
     if (activeIndicator && activeIcon) {
       activeIcon.src = VENDOR_AVATARS[committedVendor] || VENDOR_AVATARS.claude;
       activeIcon.alt = VENDOR_NAMES[committedVendor] || VENDOR_NAMES.claude;
       activeIndicator.title = (VENDOR_NAMES[committedVendor] || VENDOR_NAMES.claude) + " session";
       activeIndicator.classList.remove("hidden");
     }
-  } else if (vendorToggle) {
-    vendorToggle.classList.remove("hidden");
-    vendorToggle.classList.add("locked");
   }
   store.set({ vendorSelectionLocked: false, sessionHasHistory: true });
 }
@@ -339,8 +331,7 @@ export function sendMessage() {
 
   // First message commits the vendor and bumps the session into
   // has-history state. The server won't re-fire session_switched after a
-  // message, so mirror the vendor-toggle/active-indicator swap locally:
-  // hide the picker, show the small avatar next to the config chip.
+  // message, so show the small vendor avatar next to the config chip.
   // Bumping sessionHasHistory drives in-session lock states (e.g. the
   // Codex model picker that becomes informational once the thread is
   // bound to a model).

package/lib/public/style.css

@@ -8,6 +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/rewind.css");
 @import url("css/input.css?v=20260828-composer-depth1");
 @import url("css/filebrowser.css?v=20260828-workbench4");

package/lib/sdk-bridge.js

@@ -392,6 +392,8 @@ function createSDKBridge(opts) {
     pushModule: pushModule,
     getNotificationsModule: getNotificationsModule,
     adapter: adapter,
+    saveImageFile: opts.saveImageFile,
+    getSessionLinuxUser: getSessionLinuxUser,
     onProcessingChanged: onProcessingChanged,
     onTurnDone: onTurnDone,
     onAutoTitle: function (session) { autoGenerateTitle(session); },

package/lib/sdk-message-processor.js

@@ -18,6 +18,8 @@ function attachMessageProcessor(ctx) {
   var opts = ctx.opts;
   var discoverSkillDirs = ctx.discoverSkillDirs;
   var mergeSkills = ctx.mergeSkills;
+  var saveImageFile = ctx.saveImageFile;
+  var getSessionLinuxUser = ctx.getSessionLinuxUser || function () { return null; };
 
   var AUTO_TITLE_TURN_THRESHOLD = 2;
 
@@ -29,8 +31,19 @@ function attachMessageProcessor(ctx) {
     return null;
   }
 
-  function sendAndRecord(session, obj) {
-    sm.sendAndRecord(session, obj);
+  function sendAndRecord(session, obj, clientObj) {
+    sm.sendAndRecord(session, obj, clientObj);
+  }
+
+  function parseGeneratedImage(parsed) {
+    var data = parsed.data || "";
+    var mediaType = parsed.mediaType || "image/png";
+    var dataUrlMatch = /^data:(image\/[a-z0-9.+-]+);base64,([\s\S]+)$/i.exec(data);
+    if (dataUrlMatch) {
+      mediaType = dataUrlMatch[1];
+      data = dataUrlMatch[2];
+    }
+    return { mediaType: mediaType, data: data.replace(/\s/g, "") };
   }
 
   function sendToSession(session, obj) {
@@ -276,6 +289,48 @@ function attachMessageProcessor(ctx) {
         is_error: !!parsed.isError,
       });
 
+    } else if (parsed.yokeType === "generated_image") {
+      var generated = parseGeneratedImage(parsed);
+      var fileName = null;
+      if (!parsed.isError && generated.data && typeof saveImageFile === "function") {
+        fileName = saveImageFile(generated.mediaType, generated.data, getSessionLinuxUser(session));
+      }
+      if (!fileName) {
+        sendAndRecord(session, {
+          type: "tool_result",
+          id: parsed.toolId,
+          content: parsed.isError ? "Image generation failed." : "The generated image could not be saved.",
+          is_error: true,
+        });
+      } else {
+        sendAndRecord(session, {
+          type: "tool_result",
+          id: parsed.toolId,
+          content: "Image generated",
+          is_error: false,
+        });
+        var imageRef = { mediaType: generated.mediaType, file: fileName };
+        var storedImage = {
+          type: "generated_image",
+          id: parsed.toolId,
+          prompt: parsed.prompt || "",
+          transparentBackground: parsed.transparentBackground,
+          imageRefs: [imageRef],
+        };
+        var liveImage = {
+          type: "generated_image",
+          id: parsed.toolId,
+          prompt: parsed.prompt || "",
+          transparentBackground: parsed.transparentBackground,
+          images: [{
+            mediaType: generated.mediaType,
+            url: "/p/" + slug + "/images/" + fileName,
+            fileName: fileName,
+          }],
+        };
+        sendAndRecord(session, storedImage, liveImage);
+      }
+
     } else if (parsed.yokeType === "plan_updated") {
       var todos = Array.isArray(parsed.plan) ? parsed.plan.map(function(step, idx) {
         var todo = {

package/lib/sessions.js

@@ -874,9 +874,11 @@ function createSessionManager(opts) {
     }
   }
 
-  function doSendAndRecord(session, obj) {
+  function doSendAndRecord(session, obj, clientObj) {
     // Stamp every recorded message so history replay preserves original times
     if (!obj._ts) obj._ts = Date.now();
+    var outgoingObj = clientObj || obj;
+    if (!outgoingObj._ts) outgoingObj._ts = obj._ts;
     session.history.push(obj);
     appendToSessionFile(session, obj);
     // Per-session out-of-band subscribers (used by home-chat to mirror
@@ -885,12 +887,12 @@ function createSessionManager(opts) {
     // clients; they are responsible for any transform + dispatch.
     if (session._subscribers && session._subscribers.size > 0) {
       for (var sub of session._subscribers) {
-        try { sub(obj); } catch (e) { /* swallow — subscriber is optional */ }
+        try { sub(outgoingObj); } catch (e) { /* swallow — subscriber is optional */ }
       }
     }
     if (sendEach) {
       // Multi-user: send to clients whose active session matches this one
-      var data = JSON.stringify(obj);
+      var data = JSON.stringify(outgoingObj);
       var ioData = null;
       sendEach(function (ws) {
         if (ws._clayActiveSession === session.localId) {
@@ -901,7 +903,7 @@ function createSessionManager(opts) {
         }
         // Track unread: increment on "done" for clients not viewing this session
         // Only count if session has no owner (my session) or owner matches this client
-        if (obj.type === "done" && ws._clayActiveSession !== session.localId) {
+        if (outgoingObj.type === "done" && ws._clayActiveSession !== session.localId) {
           var _isMySession = !session.ownerId || (ws._clayUser && ws._clayUser.id === session.ownerId);
           if (_isMySession) {
             if (!ws._clayUnread) ws._clayUnread = {};
@@ -917,10 +919,10 @@ function createSessionManager(opts) {
         setTimeout(function () { session._ioThrottle = false; }, 80);
       }
     } else if (session.localId === activeSessionId) {
-      send(obj);
+      send(outgoingObj);
     } else {
       // Track unread for single-user mode on "done"
-      if (obj.type === "done") {
+      if (outgoingObj.type === "done") {
         singleUserUnread[session.localId] = (singleUserUnread[session.localId] || 0) + 1;
         send({ type: "session_unread", id: session.localId, count: singleUserUnread[session.localId] });
       }

package/lib/yoke/adapters/codex.js

@@ -31,6 +31,7 @@ var backgroundTasks = require("../codex-background-tasks");
 //   agentMessage       -> text response
 //   reasoning          -> thinking
 //   commandExecution   -> bash/shell
+//   imageGeneration    -> ImageGen with a persisted inline image
 //   fileChange         -> file edits
 //   mcpToolCall        -> MCP tool
 //   webSearch          -> web search
@@ -417,6 +418,44 @@ function flattenEvent(notification, state) {
       return events;
     }
 
+    // Image generation. Codex emits the generated PNG as base64 in `result`;
+    // the message processor persists it before anything reaches the browser.
+    if (item.type === "imageGeneration" || item.type === "image_generation") {
+      if (!state.toolBlocks[item.id]) {
+        state.blockCounter++;
+        state.toolBlocks[item.id] = "blk_" + state.blockCounter;
+        var imageBlockId = state.toolBlocks[item.id];
+        events.push({
+          yokeType: "tool_start",
+          blockId: imageBlockId,
+          toolId: item.id,
+          toolName: "ImageGen",
+        });
+        events.push({
+          yokeType: "tool_executing",
+          blockId: imageBlockId,
+          toolId: item.id,
+          toolName: "ImageGen",
+          input: { prompt: item.revisedPrompt || "" },
+        });
+      }
+      if (evtPhase === "completed") {
+        events.push({
+          yokeType: "generated_image",
+          toolId: item.id,
+          blockId: state.toolBlocks[item.id],
+          data: item.result || "",
+          mediaType: item.mediaType || "image/png",
+          prompt: item.revisedPrompt || "",
+          savedPath: item.savedPath || null,
+          transparentBackground: item.transparentBackground == null ? null : !!item.transparentBackground,
+          isError: item.status === "failed",
+          status: item.status || "completed",
+        });
+      }
+      return events;
+    }
+
     // Command execution (bash/shell)
     if (item.type === "commandExecution" || item.type === "command_execution") {
       var commandText = item.command || state.commandInputs[item.id] || "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "3.6.0",
+  "version": "3.7.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",