clay-server 5.2.0-beta.10 → 5.2.0-beta.11

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

@@ -4,9 +4,8 @@ import { checkComposerDeparture, saveSessionRichDraft } from './session-rich-dra
 // Extracted from app.js (PR-29)
 
 import { showProjectsHub, hideProjectsHub, completeProjectsOnboarding } from './projects-hub.js';
-import { escapeHtml, showToast } from './utils.js';
+import { showToast } from './utils.js';
 import { refreshIcons } from './icons.js';
-import { parseEmojis } from './markdown.js';
 import { store } from './store.js';
 import { resetModelPickerState } from './model-picker.js';
 import { getWs, setWs } from './ws-ref.js';
@@ -50,157 +49,6 @@ var cachedRemovedProjects = [];
 var pendingRemoveSlug = null;
 var pendingRemoveName = null;
 
-// Add-project modal state
-var addProjectModal = null;
-var addProjectInput = null;
-var addProjectCreateInput = null;
-var addProjectCloneInput = null;
-var addProjectCloneProgress = null;
-var addProjectSuggestions = null;
-var addProjectError = null;
-var addProjectOk = null;
-var addProjectCancel = null;
-var addProjectModeBtns = null;
-var addProjectPanels = null;
-var addProjectRemoved = null;
-var addProjectPrefixEl = null;
-var addProjectPrefixValue = "";
-var addProjectDebounce = null;
-var addProjectActiveIdx = -1;
-var addProjectMode = "existing";
-
-export function initProjects() {
-  // Init add-project modal DOM refs
-  addProjectModal = document.getElementById("add-project-modal");
-  addProjectInput = document.getElementById("add-project-input");
-  addProjectCreateInput = document.getElementById("add-project-create-input");
-  addProjectCloneInput = document.getElementById("add-project-clone-input");
-  addProjectCloneProgress = document.getElementById("add-project-clone-progress");
-  addProjectSuggestions = document.getElementById("add-project-suggestions");
-  addProjectError = document.getElementById("add-project-error");
-  addProjectOk = document.getElementById("add-project-ok");
-  addProjectCancel = document.getElementById("add-project-cancel");
-  addProjectModeBtns = addProjectModal.querySelectorAll(".add-project-mode-btn");
-  addProjectPanels = addProjectModal.querySelectorAll(".add-project-panel");
-  addProjectRemoved = document.getElementById("add-project-removed");
-  addProjectPrefixEl = document.getElementById("add-project-prefix");
-
-  // Mode button click listeners
-  for (var mbi = 0; mbi < addProjectModeBtns.length; mbi++) {
-    addProjectModeBtns[mbi].addEventListener("click", function () {
-      if (this.disabled) return;
-      switchAddProjectMode(this.dataset.mode);
-    });
-  }
-
-  // Existing project input listeners
-  addProjectInput.addEventListener("focus", function () {
-    var val = addProjectInput.value;
-    if ((val || addProjectPrefixValue) && addProjectSuggestions.children.length === 0) {
-      requestBrowseDir(val);
-    } else if (addProjectSuggestions.children.length > 0) {
-      addProjectSuggestions.classList.remove("hidden");
-    }
-  });
-
-  addProjectModal.querySelector(".confirm-dialog").addEventListener("click", function (e) {
-    if (e.target === addProjectInput || addProjectInput.contains(e.target)) return;
-    if (e.target === addProjectSuggestions || addProjectSuggestions.contains(e.target)) return;
-    addProjectSuggestions.classList.add("hidden");
-    addProjectActiveIdx = -1;
-  });
-
-  addProjectInput.addEventListener("input", function () {
-    var val = addProjectInput.value;
-    addProjectError.classList.add("hidden");
-    if (addProjectDebounce) clearTimeout(addProjectDebounce);
-    addProjectDebounce = setTimeout(function () {
-      requestBrowseDir(val);
-    }, 200);
-  });
-
-  addProjectInput.addEventListener("keydown", function (e) {
-    var items = addProjectSuggestions.querySelectorAll(".add-project-suggestion-item");
-
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      if (items.length > 0) {
-        var next = addProjectActiveIdx < items.length - 1 ? addProjectActiveIdx + 1 : 0;
-        setActiveIdx(next);
-      }
-      return;
-    }
-
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      if (items.length > 0) {
-        var prev = addProjectActiveIdx > 0 ? addProjectActiveIdx - 1 : items.length - 1;
-        setActiveIdx(prev);
-      }
-      return;
-    }
-
-    if (e.key === "Tab") {
-      e.preventDefault();
-      var target = addProjectActiveIdx >= 0 && addProjectActiveIdx < items.length
-        ? items[addProjectActiveIdx]
-        : items.length > 0 ? items[0] : null;
-      if (target) {
-        var fullP = target.dataset.path + "/";
-        addProjectInput.value = stripPrefix(fullP);
-        addProjectError.classList.add("hidden");
-        requestBrowseDir(addProjectInput.value);
-      }
-      return;
-    }
-
-    if (e.key === "Enter") {
-      e.preventDefault();
-      if (addProjectActiveIdx >= 0 && addProjectActiveIdx < items.length) {
-        var fullPicked = items[addProjectActiveIdx].dataset.path + "/";
-        addProjectInput.value = stripPrefix(fullPicked);
-        addProjectError.classList.add("hidden");
-        requestBrowseDir(addProjectInput.value);
-        return;
-      }
-      submitAddProject();
-      return;
-    }
-
-    if (e.key === "Escape") {
-      e.preventDefault();
-      closeAddProjectModal();
-      return;
-    }
-  });
-
-  // Enter key on create/clone inputs
-  addProjectCreateInput.addEventListener("keydown", function (e) {
-    if (e.key === "Enter") { e.preventDefault(); submitAddProject(); }
-    if (e.key === "Escape") { e.preventDefault(); closeAddProjectModal(); }
-  });
-
-  addProjectCloneInput.addEventListener("keydown", function (e) {
-    if (e.key === "Enter") { e.preventDefault(); submitAddProject(); }
-    if (e.key === "Escape") { e.preventDefault(); closeAddProjectModal(); }
-  });
-
-  addProjectOk.addEventListener("click", function () { submitAddProject(); });
-  addProjectCancel.addEventListener("click", function () { closeAddProjectModal(); });
-
-  // Close on backdrop click
-  addProjectModal.querySelector(".confirm-backdrop").addEventListener("click", function () {
-    closeAddProjectModal();
-  });
-
-  // Project list add button
-  var projectListAddBtn = document.getElementById("project-list-add");
-  if (projectListAddBtn) {
-    projectListAddBtn.addEventListener("click", function () {
-      openAddProjectModal();
-    });
-  }
-}
 
 // --- State accessors ---
 
@@ -643,257 +491,3 @@ export function handleRemoveProjectResult(msg) {
     showToast(msg.error || "Failed to remove project", "error");
   }
 }
-
-// --- Add project modal ---
-
-function switchAddProjectMode(mode) {
-  addProjectMode = mode;
-  for (var mi = 0; mi < addProjectModeBtns.length; mi++) {
-    var btn = addProjectModeBtns[mi];
-    if (btn.dataset.mode === mode) {
-      btn.classList.add("active");
-    } else {
-      btn.classList.remove("active");
-    }
-  }
-  for (var pi = 0; pi < addProjectPanels.length; pi++) {
-    var panel = addProjectPanels[pi];
-    if (panel.dataset.panel === mode) {
-      panel.classList.add("active");
-    } else {
-      panel.classList.remove("active");
-    }
-  }
-  addProjectError.classList.add("hidden");
-  addProjectCloneProgress.classList.add("hidden");
-  if (mode === "existing") {
-    addProjectOk.textContent = "Add";
-  } else if (mode === "create") {
-    addProjectOk.textContent = "Create";
-  } else if (mode === "clone") {
-    addProjectOk.textContent = "Clone";
-  }
-  setTimeout(function () {
-    if (mode === "existing") {
-      addProjectInput.focus();
-    } else if (mode === "create") {
-      addProjectCreateInput.focus();
-    } else if (mode === "clone") {
-      addProjectCloneInput.focus();
-    }
-  }, 50);
-}
-
-export function openAddProjectModal(mode) {
-  addProjectModal.classList.remove("hidden");
-  addProjectCreateInput.value = "";
-  addProjectCloneInput.value = "";
-  addProjectError.classList.add("hidden");
-  addProjectError.textContent = "";
-  addProjectCloneProgress.classList.add("hidden");
-  addProjectSuggestions.classList.add("hidden");
-  addProjectSuggestions.innerHTML = "";
-  addProjectActiveIdx = -1;
-  addProjectOk.disabled = false;
-  var existingBtn = addProjectModal.querySelector('.add-project-mode-btn[data-mode="existing"]');
-  var st = store.snap();
-  if (st.isOsUsers) {
-    existingBtn.disabled = false;
-    var myUser = st.cachedAllUsers.find(function (u) { return u.id === st.myUserId; });
-    var isAdmin = myUser && myUser.role === "admin";
-    if (!isAdmin && myUser && myUser.linuxUser) {
-      // Non-admin: lock prefix to home directory
-      addProjectPrefixValue = "/home/" + myUser.linuxUser + "/";
-      addProjectPrefixEl.textContent = addProjectPrefixValue;
-      addProjectPrefixEl.classList.remove("hidden");
-      addProjectInput.value = "";
-      addProjectInput.placeholder = "subdirectory";
-    } else {
-      // Admin: no prefix restriction
-      addProjectPrefixValue = "";
-      addProjectPrefixEl.classList.add("hidden");
-      addProjectInput.value = "/";
-      addProjectInput.placeholder = "/";
-    }
-    switchAddProjectMode("existing");
-  } else {
-    addProjectPrefixValue = "";
-    addProjectPrefixEl.classList.add("hidden");
-    addProjectInput.value = "/";
-    addProjectInput.placeholder = "/";
-    existingBtn.disabled = false;
-    switchAddProjectMode("existing");
-  }
-  if (mode === "create" || mode === "clone") switchAddProjectMode(mode);
-  renderRemovedProjectsList();
-}
-
-function renderRemovedProjectsList() {
-  if (!addProjectRemoved) return;
-  addProjectRemoved.innerHTML = "";
-  if (!cachedRemovedProjects || cachedRemovedProjects.length === 0) {
-    addProjectRemoved.classList.add("hidden");
-    return;
-  }
-  addProjectRemoved.classList.remove("hidden");
-  for (var ri = 0; ri < cachedRemovedProjects.length; ri++) {
-    var rp = cachedRemovedProjects[ri];
-    var item = document.createElement("div");
-    item.className = "add-project-removed-item";
-    item.dataset.path = rp.path;
-    item.addEventListener("click", function () {
-      var p = this.dataset.path;
-      var ws = getWs();
-      if (ws && ws.readyState === 1) {
-        ws.send(JSON.stringify({ type: "add_project", path: p }));
-      }
-      closeAddProjectModal();
-    });
-    var iconEl = document.createElement("span");
-    iconEl.className = "add-project-removed-icon";
-    iconEl.textContent = rp.icon || "\uD83D\uDCC1";
-    item.appendChild(iconEl);
-    var info = document.createElement("div");
-    info.className = "add-project-removed-info";
-    var nameEl = document.createElement("div");
-    nameEl.className = "add-project-removed-name";
-    nameEl.textContent = rp.title || rp.path.split("/").pop() || rp.path;
-    info.appendChild(nameEl);
-    var pathEl = document.createElement("div");
-    pathEl.className = "add-project-removed-path";
-    pathEl.textContent = rp.path;
-    info.appendChild(pathEl);
-    item.appendChild(info);
-    addProjectRemoved.appendChild(item);
-  }
-  try { parseEmojis(addProjectRemoved); } catch (e) {}
-}
-
-export function closeAddProjectModal() {
-  addProjectModal.classList.add("hidden");
-  addProjectInput.value = "";
-  addProjectCreateInput.value = "";
-  addProjectCloneInput.value = "";
-  addProjectSuggestions.classList.add("hidden");
-  addProjectSuggestions.innerHTML = "";
-  addProjectError.classList.add("hidden");
-  addProjectCloneProgress.classList.add("hidden");
-  addProjectActiveIdx = -1;
-  addProjectPrefixValue = "";
-  addProjectPrefixEl.classList.add("hidden");
-  if (addProjectDebounce) { clearTimeout(addProjectDebounce); addProjectDebounce = null; }
-}
-
-function getFullPath(inputVal) {
-  return addProjectPrefixValue + inputVal;
-}
-
-function stripPrefix(fullPath) {
-  if (addProjectPrefixValue && fullPath.indexOf(addProjectPrefixValue) === 0) {
-    return fullPath.slice(addProjectPrefixValue.length);
-  }
-  return fullPath;
-}
-
-function requestBrowseDir(val) {
-  var ws = getWs();
-  if (!ws || ws.readyState !== 1) return;
-  ws.send(JSON.stringify({ type: "browse_dir", path: getFullPath(val) }));
-}
-
-export function handleBrowseDirResult(msg) {
-  addProjectSuggestions.innerHTML = "";
-  addProjectActiveIdx = -1;
-  if (msg.error) {
-    addProjectSuggestions.classList.add("hidden");
-    return;
-  }
-  var entries = msg.entries || [];
-  if (entries.length === 0) {
-    addProjectSuggestions.classList.add("hidden");
-    return;
-  }
-  for (var si = 0; si < entries.length; si++) {
-    var entry = entries[si];
-    var item = document.createElement("div");
-    item.className = "add-project-suggestion-item";
-    item.dataset.path = entry.path;
-    item.innerHTML = '<i data-lucide="folder"></i><span class="add-project-suggestion-name">' +
-      escapeHtml(entry.name) + '</span>';
-    item.addEventListener("click", function (e) {
-      var fullP = this.dataset.path + "/";
-      addProjectInput.value = stripPrefix(fullP);
-      addProjectInput.focus();
-      addProjectError.classList.add("hidden");
-      requestBrowseDir(addProjectInput.value);
-    });
-    addProjectSuggestions.appendChild(item);
-  }
-  addProjectSuggestions.classList.remove("hidden");
-  refreshIcons();
-}
-
-export function handleAddProjectResult(msg) {
-  addProjectCloneProgress.classList.add("hidden");
-  if (msg.ok) {
-    closeAddProjectModal();
-    if (msg.existing) {
-      showToast("Project already registered", "info");
-    } else {
-      var toastMsg = addProjectMode === "create" ? "Project created" : addProjectMode === "clone" ? "Project cloned" : "Project added";
-      showToast(toastMsg, "success");
-    }
-    if (msg.slug) switchProject(msg.slug);
-  } else {
-    addProjectError.textContent = msg.error || "Failed to add project";
-    addProjectError.classList.remove("hidden");
-    addProjectOk.disabled = false;
-  }
-}
-
-export function handleCloneProgress(msg) {
-  if (msg.status === "cloning") {
-    addProjectCloneProgress.classList.remove("hidden");
-  }
-}
-
-function setActiveIdx(idx) {
-  var items = addProjectSuggestions.querySelectorAll(".add-project-suggestion-item");
-  addProjectActiveIdx = idx;
-  for (var ai = 0; ai < items.length; ai++) {
-    if (ai === idx) {
-      items[ai].classList.add("active");
-      items[ai].scrollIntoView({ block: "nearest" });
-    } else {
-      items[ai].classList.remove("active");
-    }
-  }
-}
-
-function submitAddProject() {
-  addProjectError.classList.add("hidden");
-  addProjectOk.disabled = true;
-
-  if (addProjectMode === "existing") {
-    var val = getFullPath(addProjectInput.value).replace(/\/+$/, "");
-    if (!val) { addProjectOk.disabled = false; return; }
-    var ws = getWs();
-    if (ws && ws.readyState === 1) {
-      ws.send(JSON.stringify({ type: "add_project", path: val }));
-    }
-  } else if (addProjectMode === "create") {
-    var name = addProjectCreateInput.value.trim();
-    if (!name) { addProjectOk.disabled = false; return; }
-    var ws2 = getWs();
-    if (ws2 && ws2.readyState === 1) {
-      ws2.send(JSON.stringify({ type: "create_project", name: name }));
-    }
-  } else if (addProjectMode === "clone") {
-    var url = addProjectCloneInput.value.trim();
-    if (!url) { addProjectOk.disabled = false; return; }
-    var ws3 = getWs();
-    if (ws3 && ws3.readyState === 1) {
-      ws3.send(JSON.stringify({ type: "clone_project", url: url }));
-    }
-  }
-}

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

@@ -238,9 +238,16 @@ function tickRateLimitUsage() {
   renderRateLimitUsage();
 }
 
+// Once the server's vendor overview has answered, every vendor including the
+// displayed one is shown by the overview chips, so this session-scoped link
+// stands down. Rejection, warning and scheduling state is untouched.
+function overviewOwnsUsageDisplay() {
+  return !!store.get('vendorUsageOverview');
+}
+
 function renderRateLimitUsage() {
   var activeVendor = store.get('currentVendor') || "claude";
-  if (!vendorTracksRateLimits(activeVendor)) {
+  if (!vendorTracksRateLimits(activeVendor) || overviewOwnsUsageDisplay()) {
     if (rateLimitUsageEl) {
       rateLimitUsageEl.remove();
       rateLimitUsageEl = null;
@@ -320,6 +327,10 @@ export function initRateLimit() {
         || state.currentSlug !== prev.currentSlug || state.myUserId !== prev.myUserId) {
       resetRateLimitState();
     }
+    if (state.vendorUsageOverview !== prev.vendorUsageOverview && state.currentVendor === prev.currentVendor && state.activeSessionId === prev.activeSessionId
+        && state.currentSlug === prev.currentSlug && state.myUserId === prev.myUserId) {
+      renderRateLimitUsage();
+    }
     if (state.vendorInfo !== prev.vendorInfo && state.currentVendor === prev.currentVendor && state.activeSessionId === prev.activeSessionId
         && state.currentSlug === prev.currentSlug && state.myUserId === prev.myUserId) {
       renderRateLimitUsage();

package/lib/public/modules/clay-tool-presentation.js

@@ -172,6 +172,7 @@ rows('clay-workspace', [
   ['inspect_mate_chat_change', 'Inspecting Mate conversation change', 'Mate conversation change inspected', 'Mate conversation'],
   ['control_mate_chat', 'Requesting Mate conversation change', 'Mate conversation request returned', 'Mate conversation', 'why', 'mate-chat'],
   ['control_schedules', 'Requesting schedule change', 'Schedule change request returned', 'Scheduling', 'why', 'schedule-control'],
+  ['read_vendor_usage', 'Reading vendor usage', 'Vendor usage read', 'Vendor usage', 'projectSlug'],
   ['read_project_records', 'Reading project records', 'Project records read', 'Project records', 'projectSlug'],
   ['inspect_project_record_change', 'Inspecting record change', 'Record change inspected', 'Project records', 'projectSlug'],
   ['control_project_records', 'Requesting record change', 'Record change request returned', 'Project records', 'why'],

package/lib/public/modules/contextual-clay.js

@@ -1,3 +1,4 @@
+import { mateLoadingMarkup, updateMateLoadingScene } from './mate-loading-scene.js';
 import { attachContextualSessionCitations } from './contextual-session-citations.js';
 import { attachContextualConversations } from './contextual-mate-sessions.js';
 import { getCachedSessions } from './sidebar-sessions.js';
@@ -67,6 +68,7 @@ function render() {
   var mate = contextualMate(state().mateId);
   if (mate) {
     var name = getHomeMateName(mate);
+    updateMateLoadingScene(surface.querySelector('[data-clay-loading]'), name, mateAvatarUrl(mate, 96));
     surface.setAttribute('aria-label', name + ' conversation');
     surface.querySelector('strong').textContent = name;
     var header = surface.querySelector('header');
@@ -130,7 +132,7 @@ function ensureSurface() {
   if (!host()) {
     var surface = document.createElement('section');
     surface.id = 'contextual-clay'; surface.setAttribute('role', 'dialog');
-    surface.innerHTML = '<header><img class="contextual-clay-avatar" alt=""><div class="contextual-clay-identity"><strong></strong><div class="contextual-context-line"><span data-clay-context></span><details class="contextual-clay-context"><summary aria-label="What this Mate can see" title="What this Mate can see">' + iconHtml('circle-help') + '</summary><p></p></details></div></div><div class="contextual-clay-actions"><button type="button" data-clay-expand>' + iconHtml('arrow-up-right') + '<span></span></button><button type="button" data-clay-close title="Close">' + iconHtml('x') + '</button></div></header><p class="contextual-capabilities" role="note" aria-label="Conversation capabilities"></p><div class="contextual-clay-body"><p data-clay-loading role="status">Opening conversation…</p></div>';
+    surface.innerHTML = '<header><img class="contextual-clay-avatar" alt=""><div class="contextual-clay-identity"><strong></strong><div class="contextual-context-line"><span data-clay-context></span><details class="contextual-clay-context"><summary aria-label="What this Mate can see" title="What this Mate can see">' + iconHtml('circle-help') + '</summary><p></p></details></div></div><div class="contextual-clay-actions"><button type="button" data-clay-expand>' + iconHtml('arrow-up-right') + '<span></span></button><button type="button" data-clay-close title="Close">' + iconHtml('x') + '</button></div></header><p class="contextual-capabilities" role="note" aria-label="Conversation capabilities"></p><div class="contextual-clay-body">' + mateLoadingMarkup() + '</div>';
     surface.addEventListener('contextual-clay-keydown', function (event) {
       var detail = event.detail; var frame = contextualFrame();
       if (!detail || !frame || detail.source !== frame.contentWindow) return;

package/lib/public/modules/github-star.js

@@ -0,0 +1,66 @@
+// github-star.js - Public star count beside the top-bar GitHub Star link.
+//
+// The link itself is static markup. This module only fills in the count read
+// from the server's cached GET /api/github-stars. An unknown count leaves the
+// count segment hidden; nothing is invented, and the module never writes to
+// GitHub or sends anything about the user.
+
+import { store } from './store.js';
+
+var REFRESH_MS = 60 * 60 * 1000;
+var MOBILE_QUERY = "(max-width: 768px)";
+
+var timer = null;
+var inflight = false;
+
+// 999 -> "999", 1234 -> "1.2k", 12500 -> "12.5k", 1200000 -> "1.2m"
+export function formatStarCount(n) {
+  if (typeof n !== "number" || !isFinite(n) || n < 0) return "";
+  n = Math.floor(n);
+  if (n < 1000) return String(n);
+  var units = [[1000000, "m"], [1000, "k"]];
+  for (var i = 0; i < units.length; i++) {
+    if (n >= units[i][0]) {
+      var v = Math.floor(n / units[i][0] * 10) / 10;
+      return (v % 1 === 0 ? String(v) : v.toFixed(1)) + units[i][1];
+    }
+  }
+  return String(n);
+}
+
+function render() {
+  var count = store.get("githubStarCount");
+  var countEl = document.getElementById("github-star-count");
+  var linkEl = document.getElementById("github-star-link");
+  if (!countEl || !linkEl) return;
+  var text = typeof count === "number" ? formatStarCount(count) : "";
+  countEl.textContent = text;
+  countEl.classList.toggle("hidden", !text);
+  linkEl.setAttribute("aria-label", text ? "Star Clay on GitHub, " + count + " stars" : "Star Clay on GitHub");
+}
+
+function isMobile() {
+  return !!(window.matchMedia && window.matchMedia(MOBILE_QUERY).matches);
+}
+
+function load() {
+  if (inflight || isMobile()) return Promise.resolve();
+  inflight = true;
+  return fetch("/api/github-stars", { credentials: "same-origin" }).then(function (res) {
+    return res.ok ? res.json() : null;
+  }).then(function (data) {
+    // Keep the last known count when the server has none or the call failed.
+    if (data && typeof data.stars === "number") {
+      store.set({ githubStarCount: data.stars });
+      render();
+    }
+  }).catch(function () {}).then(function () { inflight = false; });
+}
+
+export function initGithubStar() {
+  if (!document.getElementById("github-star")) return;
+  render();
+  load();
+  if (timer) clearInterval(timer);
+  timer = setInterval(load, REFRESH_MS);
+}

package/lib/public/modules/mate-loading-scene.js

@@ -0,0 +1,17 @@
+// Decorative opening state; conversation readiness remains with its host.
+export function mateLoadingMarkup() {
+  return '<div data-clay-loading class="mate-loading" role="status" aria-live="polite">' +
+    '<div class="mate-loading-scene" aria-hidden="true">' +
+    '<img class="mate-loading-avatar" alt="">' +
+    '<img class="mate-loading-desk" src="/welcome-art/conversation-desk.png" alt="" decoding="async">' +
+    '</div><p class="mate-loading-label"></p>' +
+    '<div class="mate-loading-dots" aria-hidden="true"><span></span><span></span><span></span></div></div>';
+}
+
+export function updateMateLoadingScene(element, name, avatar) {
+  var image = element.querySelector('.mate-loading-avatar');
+  if (image.getAttribute('src') !== avatar) image.setAttribute('src', avatar);
+  var label = element.querySelector('.mate-loading-label');
+  var text = 'Getting ready with ' + name;
+  if (label.textContent !== text) label.textContent = text;
+}

package/lib/public/modules/profile.js

@@ -135,9 +135,12 @@ export function uploadAvatarBlob(blob) {
 }
 
 // --- Avatar position picker ---
-export function showAvatarPositioner(img, objectUrl, onDone) {
+// With a host element the editor mounts inline as a settings subview instead
+// of a page-level overlay.
+export function showAvatarPositioner(img, objectUrl, onDone, host) {
   var outputSize = 256;
   var viewSize = 220;
+  var priorFocus = document.activeElement;
 
   // State
   var scale = 1;
@@ -169,7 +172,7 @@ export function showAvatarPositioner(img, objectUrl, onDone) {
 
   // Build overlay
   var overlay = document.createElement('div');
-  overlay.className = 'avatar-positioner-overlay';
+  overlay.className = host ? 'avatar-positioner-inline settings-subview' : 'avatar-positioner-overlay';
 
   var container = document.createElement('div');
   container.className = 'avatar-positioner-container';
@@ -225,8 +228,10 @@ export function showAvatarPositioner(img, objectUrl, onDone) {
   container.appendChild(btnRow);
 
   overlay.appendChild(container);
-  document.body.appendChild(overlay);
+  if (host) { host.classList.add('has-subview'); host.appendChild(overlay); overlay.setAttribute('role', 'region'); overlay.setAttribute('aria-label', 'Position your avatar'); }
+  else document.body.appendChild(overlay);
   updatePreview();
+  if (host) doneFocus();
 
   // Drag
   var dragging = false;
@@ -288,9 +293,12 @@ export function showAvatarPositioner(img, objectUrl, onDone) {
     updatePreview();
   }, { passive: false });
 
+  function doneFocus() { closeBtn.focus(); }
+
   function cleanup(revoke) {
     document.removeEventListener('keydown', onOverlayKeydown);
     overlay.remove();
+    if (host) { host.classList.remove('has-subview'); if (priorFocus && priorFocus.isConnected) priorFocus.focus(); }
     if (revoke) URL.revokeObjectURL(objectUrl);
   }
 

package/lib/public/modules/project-mate-creation-workspace.js

@@ -81,6 +81,9 @@ function startMateCreation() {
   maybeStartPendingCreation();
 }
 
+// Entry for the zero-project welcome: the same Clay-guided flow the add button's Mate choice runs.
+export function startClayMateCreation() { startMateCreation(); }
+
 function maybeStartPendingCreation() {
   var state = store.snap();
   if (!state.projectMateCreationPendingStart || !state.connected || state.activeProjectSlug !== 'mate-' + state.projectMateCreationMateId) return;
@@ -89,11 +92,17 @@ function maybeStartPendingCreation() {
   store.set({ projectMateCreationPendingStart: false, projectMateCreationAwaitingHistory: true, projectMateCreationRequestId: requestId });
 }
 
-function choiceButton(icon, title, description) {
+function choiceButton(artwork, title, description) {
   var button = document.createElement('button');
   button.type = 'button';
   button.className = 'project-create-choice-option';
-  button.innerHTML = iconHtml(icon);
+  var image = document.createElement('img');
+  image.src = '/welcome-art/' + artwork + '.png';
+  image.alt = '';
+  image.width = 1536;
+  image.height = 1024;
+  image.decoding = 'async';
+  button.appendChild(image);
   var copy = document.createElement('span');
   var heading = document.createElement('strong');
   heading.textContent = title;
@@ -121,9 +130,9 @@ export function openProjectCreateChoice(opener, openProject) {
   var title = document.createElement('h2');
   title.id = 'project-create-choice-title';
   title.textContent = 'What would you like to add?';
-  var mate = choiceButton('users', 'Mate', 'Shape a new collaborator with Clay');
+  var mate = choiceButton('mate-clay', 'Create a Mate', 'A specialist to work alongside you.');
   mate.addEventListener('click', startMateCreation);
-  var project = choiceButton('folder-plus', 'Project', 'Add a local workspace');
+  var project = choiceButton('project-clay', 'Start a project', 'Work on code or files together.');
   project.addEventListener('click', function () {
     closeChoice(false);
     openProject();