clay-server 5.1.0-beta.1 → 5.1.0-beta.2

package/lib/public/modules/home-debate-controls.js

@@ -1,295 +1,24 @@
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-
-var slotEl = null;
-var normalComposerEl = null;
-var modelEl = null;
-var controlEl = null;
-var controlMode = null;
-var controlStateKey = null;
-var currentState = null;
-var currentRequestId = null;
-var startNewDebate = null;
-var inputEl = null;
-var primaryEl = null;
-var secondaryEl = null;
-var activityEl = null;
-var handEl = null;
-var stopEl = null;
-var composing = false;
-
-function textElement(tag, className, text) {
-  var element = document.createElement(tag);
-  element.className = className;
-  element.textContent = text || "";
-  return element;
-}
-
-function findHeader(messages) {
-  for (var i = (messages || []).length - 1; i >= 0; i--) if (messages[i] && messages[i].role === "debate_header") return messages[i];
-  return null;
-}
-
-function findActiveTurn(messages) {
-  for (var i = (messages || []).length - 1; i >= 0; i--) {
-    if (messages[i] && messages[i].role === "debate_turn" && messages[i].status === "active") return messages[i];
-  }
-  return null;
-}
-
-export function homeDebateControlState(messages) {
-  var header = findHeader(messages);
-  if (!header || ["live", "ended", "interrupted"].indexOf(header.phase) === -1) return null;
-  var mode = header.phase === "live" ? (header.interaction || "default") : "terminal";
-  return { mode: mode, header: header, turn: findActiveTurn(messages), phase: header.phase };
-}
-
-function ensureElements() {
-  var nextSlot = document.getElementById("home-debate-controls-slot");
-  if (slotEl === nextSlot) return !!slotEl;
-  slotEl = nextSlot;
-  normalComposerEl = document.getElementById("home-mate-chat-composer");
-  modelEl = document.getElementById("home-mate-chat-session-model");
-  controlEl = null;
-  controlMode = null;
-  controlStateKey = null;
-  return !!slotEl;
-}
-
-function clearControls() {
-  if (slotEl) slotEl.innerHTML = "";
-  controlEl = null;
-  controlMode = null;
-  controlStateKey = null;
-  currentState = null;
-  inputEl = null;
-  primaryEl = null;
-  secondaryEl = null;
-  activityEl = null;
-  handEl = null;
-  stopEl = null;
-  composing = false;
-}
-
-function setSpecialMode(active) {
-  if (normalComposerEl) normalComposerEl.hidden = active;
-  if (modelEl) modelEl.hidden = active;
-  if (slotEl) slotEl.hidden = !active;
-}
-
-function sendControl(action, data) {
-  var ws = getWs();
-  if (!ws || ws.readyState !== 1 || !currentState) return false;
-  ws.send(JSON.stringify({
-    type: "home_debate_control",
-    action: action,
-    mateId: store.get('homeChatMateId'),
-    sessionId: store.get('homeChatSessionId'),
-    requestId: currentRequestId,
-    text: data && data.text ? data.text : "",
-    response: data && data.response ? data.response : null,
-  }));
-  return true;
-}
-
-function button(label, className) {
-  var element = textElement("button", className, label);
-  element.type = "button";
-  return element;
-}
-
-function dots() {
-  var group = document.createElement("span");
-  group.className = "home-debate-control-dots";
-  group.setAttribute("aria-hidden", "true");
-  for (var i = 0; i < 3; i++) group.appendChild(document.createElement("i"));
-  return group;
-}
-
-function activityLabel(state) {
-  if (state.header.stopping) return state.turn ? "Stopping after " + (state.turn.mateName || "the current speaker") + " finishes" : "Stopping debate";
-  if (!state.turn) return state.header.handRaised ? "Your hand is raised" : "Debate is live";
-  var name = state.turn.mateName || "Mate";
-  var activity = state.turn.activity || (state.turn.text ? "speaking" : "preparing");
-  return name + " is " + activity.toLowerCase();
-}
-
-function lockSubmission(label) {
-  if (inputEl) inputEl.disabled = true;
-  if (primaryEl) { primaryEl.disabled = true; primaryEl.textContent = label; }
-  if (secondaryEl) secondaryEl.disabled = true;
-}
-
-function submitInput(action, response) {
-  var text = inputEl ? inputEl.value.trim() : "";
-  if (action === "user_floor" && !text) return false;
-  if (!sendControl(action, { text: text, response: response })) return false;
-  lockSubmission(action === "user_floor" ? "Sending…" : "Continuing…");
-  return true;
-}
-
-function bindInput(submit) {
-  inputEl.addEventListener("compositionstart", function () { composing = true; });
-  inputEl.addEventListener("compositionend", function () { composing = false; });
-  inputEl.addEventListener("input", function () {
-    if (controlMode === "user_floor" && primaryEl) primaryEl.disabled = !inputEl.value.trim();
-  });
-  inputEl.addEventListener("keydown", function (event) {
-    if (event.key !== "Enter" || event.shiftKey || event.isComposing || composing || event.keyCode === 229) return;
-    event.preventDefault();
-    submit();
-  });
-}
-
-function focusInputOnce() {
-  var target = inputEl;
-  if (!target) return;
-  var focus = function () {
-    if (target === inputEl && !target.disabled && target.isConnected !== false) target.focus({ preventScroll: true });
-  };
-  if (typeof requestAnimationFrame === "function") requestAnimationFrame(focus);
-  else focus();
-}
-
-function buildDefault(state) {
-  var context = document.createElement("div");
-  context.className = "home-debate-control-context";
-  context.appendChild(dots());
-  activityEl = textElement("span", "home-debate-control-activity", activityLabel(state));
-  activityEl.setAttribute("role", "status");
-  activityEl.setAttribute("aria-live", "polite");
-  context.appendChild(activityEl);
-  controlEl.appendChild(context);
-  var actions = document.createElement("div");
-  actions.className = "home-debate-control-actions";
-  handEl = button(state.header.handRaised ? "Hand raised" : "Raise hand", "home-debate-control-secondary");
-  handEl.setAttribute("aria-pressed", state.header.handRaised ? "true" : "false");
-  handEl.disabled = state.header.handRaised === true;
-  handEl.addEventListener("click", function () {
-    if (!sendControl("hand_raise")) return;
-    handEl.disabled = true;
-    handEl.textContent = "Raising hand…";
-  });
-  stopEl = button(state.header.stopping ? "Cancel stop" : "Stop debate", state.header.stopping ? "home-debate-control-secondary" : "home-debate-control-stop");
-  stopEl.addEventListener("click", function () {
-    var cancelling = currentState && currentState.header && currentState.header.stopping === true;
-    if (!sendControl(cancelling ? "cancel_stop" : "stop")) return;
-    stopEl.disabled = true;
-    stopEl.textContent = cancelling ? "Cancelling…" : "Stopping…";
-  });
-  actions.appendChild(handEl);
-  actions.appendChild(stopEl);
-  controlEl.appendChild(actions);
-}
-
-function buildInputMode(state) {
-  var isFloor = state.mode === "user_floor";
-  var heading = textElement("div", "home-debate-control-heading", isFloor ? "You have the floor" : "The moderator is ready to conclude");
-  heading.id = "home-debate-control-heading";
-  controlEl.appendChild(heading);
-  inputEl = document.createElement("textarea");
-  inputEl.rows = 2;
-  inputEl.placeholder = isFloor ? "Share your thoughts with the panel" : "Add an optional direction to continue";
-  inputEl.setAttribute("aria-labelledby", heading.id);
-  controlEl.appendChild(inputEl);
-  var actions = document.createElement("div");
-  actions.className = "home-debate-control-actions";
-  if (isFloor) {
-    primaryEl = button("Send", "home-debate-control-primary");
-    primaryEl.disabled = true;
-    primaryEl.addEventListener("click", function () { submitInput("user_floor"); });
-    secondaryEl = button("Pass", "home-debate-control-secondary");
-    secondaryEl.addEventListener("click", function () {
-      if (!sendControl("user_floor", { text: "(The user passed without speaking)" })) return;
-      lockSubmission("Sending…");
-    });
-  } else {
-    primaryEl = button("Continue", "home-debate-control-primary");
-    primaryEl.addEventListener("click", function () { submitInput("conclude", "continue"); });
-    secondaryEl = button("End debate", "home-debate-control-stop");
-    secondaryEl.addEventListener("click", function () {
-      if (!sendControl("conclude", { response: "end" })) return;
-      lockSubmission("Ending…");
-    });
-  }
-  actions.appendChild(primaryEl);
-  actions.appendChild(secondaryEl);
-  controlEl.appendChild(actions);
-  bindInput(function () { submitInput(isFloor ? "user_floor" : "conclude", isFloor ? null : "continue"); });
-  focusInputOnce();
-}
-
-function terminalLabel(state) {
-  if (state.phase === "interrupted") return "Debate interrupted when Clay restarted";
-  if (state.header.reason === "error") return "The debate stopped after an error";
-  if (state.header.reason === "stopped" || state.header.reason === "user_stopped") return "Debate stopped";
-  return "Debate ended";
-}
-
-function buildTerminal(state) {
-  var status = textElement("div", "home-debate-control-terminal-status", terminalLabel(state));
-  status.setAttribute("role", "status");
-  controlEl.appendChild(status);
-  var actions = document.createElement("div");
-  actions.className = "home-debate-control-actions";
-  primaryEl = button("Resume debate", "home-debate-control-primary");
-  primaryEl.addEventListener("click", function () {
-    if (!sendControl("resume")) return;
-    lockSubmission("Resuming…");
-  });
-  actions.appendChild(primaryEl);
-  if (typeof startNewDebate === "function") {
-    secondaryEl = button("New debate", "home-debate-control-secondary");
-    secondaryEl.addEventListener("click", function () { startNewDebate(); });
-    actions.appendChild(secondaryEl);
-  }
-  controlEl.appendChild(actions);
-}
-
-function buildControls(state) {
-  slotEl.innerHTML = "";
-  controlEl = document.createElement("section");
-  controlEl.className = "home-debate-control-surface home-debate-control-" + state.mode;
-  controlEl.setAttribute("role", state.mode === "default" ? "toolbar" : "region");
-  controlEl.setAttribute("aria-label", state.mode === "terminal" ? "Debate status" : "Live debate controls");
-  slotEl.appendChild(controlEl);
-  if (state.mode === "default") buildDefault(state);
-  else if (state.mode === "user_floor" || state.mode === "conclude") buildInputMode(state);
-  else buildTerminal(state);
-  controlMode = state.mode;
-  controlStateKey = state.mode + ":" + state.phase + ":" + (state.header.reason || "");
-}
-
-function updateControls(state) {
-  if (state.mode !== "default") return;
-  var label = activityLabel(state);
-  if (activityEl && activityEl.textContent !== label) activityEl.textContent = label;
-  if (state.header.handRaised && handEl) {
-    handEl.textContent = "Hand raised";
-    handEl.disabled = true;
-    handEl.setAttribute("aria-pressed", "true");
+import { createDebateControls } from './debate-controls.js';
+export { homeDebateControlState } from './debate-controls.js';
+
+var controls = createDebateControls({
+  slotId: "home-debate-controls-slot",
+  composerId: "home-mate-chat-composer",
+  modelId: "home-mate-chat-session-model",
+  send: function (action, data, requestId) {
+    var ws = getWs();
+    if (!ws || ws.readyState !== 1) return false;
+    ws.send(JSON.stringify({
+      type: "home_debate_control", action: action,
+      mateId: store.get('homeChatMateId'), sessionId: store.get('homeChatSessionId'),
+      requestId: requestId, text: data.text || "", response: data.response || null
+    }));
+    return true;
   }
-  if (stopEl) {
-    stopEl.disabled = false;
-    stopEl.textContent = state.header.stopping ? "Cancel stop" : "Stop debate";
-    stopEl.className = state.header.stopping ? "home-debate-control-secondary" : "home-debate-control-stop";
-  }
-}
+});
 
 export function renderHomeDebateControls(messages, requestId, onStartNewDebate) {
-  if (!ensureElements()) return false;
-  var state = homeDebateControlState(messages);
-  currentRequestId = requestId || null;
-  startNewDebate = onStartNewDebate || null;
-  if (!state) {
-    setSpecialMode(false);
-    clearControls();
-    return false;
-  }
-  currentState = state;
-  setSpecialMode(true);
-  var nextStateKey = state.mode + ":" + state.phase + ":" + (state.header.reason || "");
-  if (!controlEl || controlMode !== state.mode || controlStateKey !== nextStateKey) buildControls(state);
-  else updateControls(state);
-  return true;
+  return controls.render(messages, requestId, onStartNewDebate);
 }

package/lib/public/modules/home-mate-avatar-editor.js

@@ -0,0 +1,228 @@
+// Mate avatar choices hosted inside the current settings dialog.
+
+import { avatarUrl, mateAvatarUrl, MATE_AVATAR_STYLES } from './avatar.js';
+import { showAvatarPositioner } from './profile.js';
+import { getWs } from './ws-ref.js';
+import { store } from './store.js';
+
+var activeToken = 0;
+var activeMateId = null;
+var pending = null;
+var statusByMate = Object.create(null);
+var draftByMate = Object.create(null);
+
+function mateName(mate) {
+  var profile = mate && mate.profile ? mate.profile : {};
+  return profile.displayName || (mate && (mate.displayName || mate.name)) || 'Mate';
+}
+
+function mateProfile(mate) {
+  return Object.assign({}, mate && mate.profile ? mate.profile : {});
+}
+
+function sendProfile(mate, profile, rerender, message) {
+  draftByMate[mate.id] = profile;
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) {
+    statusByMate[mate.id] = { kind: 'error', text: 'Clay is offline. Your choice was not saved.' };
+    rerender();
+    return false;
+  }
+  pending = { mateId: mate.id, style: profile.avatarStyle || 'imprint', seed: profile.avatarSeed || '', custom: profile.avatarCustom || '' };
+  statusByMate[mate.id] = { kind: 'pending', text: message || 'Saving avatar…' };
+  ws.send(JSON.stringify({ type: 'mate_update', mateId: mate.id, updates: { profile: profile } }));
+  rerender();
+  return true;
+}
+
+function appendStatus(body, mate) {
+  var state = statusByMate[mate.id];
+  var status = document.createElement('div');
+  status.className = 'home-mate-avatar-status' + (state ? ' is-' + state.kind : '');
+  status.setAttribute('aria-live', 'polite');
+  status.textContent = state ? state.text : '';
+  body.appendChild(status);
+}
+
+function createChoice(label, src, selected) {
+  var button = document.createElement('button');
+  button.type = 'button';
+  button.className = 'home-mate-avatar-choice';
+  button.setAttribute('aria-label', label + ' avatar');
+  button.setAttribute('aria-pressed', selected ? 'true' : 'false');
+  button.title = label;
+  var image = document.createElement('img');
+  image.src = src;
+  image.alt = '';
+  image.draggable = false;
+  var text = document.createElement('span');
+  text.textContent = label;
+  button.appendChild(image);
+  button.appendChild(text);
+  return button;
+}
+
+function selectStyle(mate, style, seed, rerender) {
+  var profile = mateProfile(mate);
+  profile.avatarStyle = style;
+  profile.avatarSeed = seed;
+  profile.avatarCustom = '';
+  sendProfile(mate, profile, rerender);
+}
+
+function uploadBlob(mate, blob, token, rerender) {
+  pending = null;
+  statusByMate[mate.id] = { kind: 'pending', text: 'Uploading image…' };
+  rerender();
+  blob.arrayBuffer().then(function (buffer) {
+    return fetch('/api/mate-avatar/' + encodeURIComponent(mate.id), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/octet-stream' },
+      body: new Uint8Array(buffer),
+    });
+  }).then(function (response) {
+    return response.json().then(function (data) {
+      if (!response.ok || !data.ok || !data.avatar) throw new Error(data.error || 'Upload failed');
+      return data.avatar;
+    });
+  }).then(function (avatar) {
+    if (token !== activeToken) return;
+    var profile = mateProfile(mate);
+    profile.avatarCustom = avatar;
+    draftByMate[mate.id] = profile;
+    statusByMate[mate.id] = { kind: 'saved', text: 'Image saved.' };
+    var mates = store.get('cachedMatesList') || [];
+    store.set({ cachedMatesList: mates.map(function (item) {
+      return item && item.id === mate.id ? Object.assign({}, item, { profile: profile }) : item;
+    }) });
+    var ws = getWs();
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: 'mate_update', mateId: mate.id, updates: { profile: profile } }));
+    }
+    rerender();
+  }).catch(function (error) {
+    if (token !== activeToken) return;
+    statusByMate[mate.id] = { kind: 'error', text: error && error.message ? error.message : 'Could not upload this image.' };
+    rerender();
+  });
+}
+
+function openUpload(mate, input, rerender) {
+  var file = input.files && input.files[0];
+  if (!file) return;
+  var token = ++activeToken;
+  var image = new Image();
+  var objectUrl = URL.createObjectURL(file);
+  image.onload = function () {
+    if (token !== activeToken) {
+      URL.revokeObjectURL(objectUrl);
+      return;
+    }
+    showAvatarPositioner(image, objectUrl, function (blob) {
+      URL.revokeObjectURL(objectUrl);
+      if (token === activeToken) uploadBlob(mate, blob, token, rerender);
+    });
+  };
+  image.onerror = function () {
+    URL.revokeObjectURL(objectUrl);
+    if (token !== activeToken) return;
+    statusByMate[mate.id] = { kind: 'error', text: 'Could not read this image.' };
+    rerender();
+  };
+  image.src = objectUrl;
+}
+
+export function renderHomeMateAvatarEditor(body, mate, rerender) {
+  if (!mate) return;
+  if (activeMateId !== mate.id) {
+    activeMateId = mate.id;
+    activeToken++;
+  }
+  var profile = draftByMate[mate.id] || mateProfile(mate);
+  var name = mateName(mate);
+  var style = profile.avatarStyle || 'imprint';
+  var seed = profile.avatarSeed || mate.id || name;
+  var locked = profile.avatarLocked === true;
+  var section = document.createElement('section');
+  section.className = 'home-mate-avatar-editor';
+  var heading = document.createElement('div');
+  heading.className = 'home-mate-avatar-heading';
+  var preview = document.createElement('img');
+  preview.className = 'home-mate-avatar-preview';
+  preview.src = mateAvatarUrl(Object.assign({}, mate, { profile: profile }), 72);
+  preview.alt = name + ' avatar';
+  var copy = document.createElement('div');
+  var title = document.createElement('h3');
+  title.textContent = 'Avatar';
+  var note = document.createElement('p');
+  note.textContent = locked ? 'This built-in avatar is managed by Clay.' : 'Choose a locally generated style or upload your own image.';
+  copy.appendChild(title);
+  copy.appendChild(note);
+  heading.appendChild(preview);
+  heading.appendChild(copy);
+  section.appendChild(heading);
+  if (!locked) {
+    var choices = document.createElement('div');
+    choices.className = 'home-mate-avatar-choices';
+    choices.setAttribute('role', 'group');
+    choices.setAttribute('aria-label', 'Avatar for ' + name);
+    for (var i = 0; i < MATE_AVATAR_STYLES.length; i++) {
+      (function (entry) {
+        var choice = createChoice(entry.name, avatarUrl(entry.id, seed, 48), !profile.avatarCustom && style === entry.id);
+        choice.addEventListener('click', function () { selectStyle(mate, entry.id, seed, rerender); });
+        choices.appendChild(choice);
+      })(MATE_AVATAR_STYLES[i]);
+    }
+    section.appendChild(choices);
+    var actions = document.createElement('div');
+    actions.className = 'home-mate-avatar-actions';
+    var shuffle = document.createElement('button');
+    shuffle.type = 'button';
+    shuffle.textContent = 'Shuffle selected style';
+    shuffle.disabled = style === 'imprint' || style === 'initial' || !!profile.avatarCustom;
+    shuffle.addEventListener('click', function () {
+      selectStyle(mate, style, Math.random().toString(36).substring(2, 10), rerender);
+    });
+    var upload = document.createElement('button');
+    upload.type = 'button';
+    upload.textContent = profile.avatarCustom ? 'Replace image' : 'Upload image';
+    var input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/png,image/jpeg,image/gif,image/webp';
+    input.className = 'home-mate-avatar-file-input';
+    input.hidden = true;
+    input.tabIndex = -1;
+    input.setAttribute('aria-hidden', 'true');
+    input.addEventListener('change', function () { openUpload(mate, input, rerender); });
+    upload.addEventListener('click', function () { input.click(); });
+    actions.appendChild(shuffle);
+    actions.appendChild(upload);
+    actions.appendChild(input);
+    section.appendChild(actions);
+  }
+  appendStatus(section, mate);
+  body.appendChild(section);
+}
+
+export function confirmHomeMateAvatar(mate) {
+  if (!mate || !pending || pending.mateId !== mate.id) return false;
+  var profile = mateProfile(mate);
+  if ((profile.avatarStyle || 'imprint') !== pending.style || (profile.avatarSeed || '') !== pending.seed || (profile.avatarCustom || '') !== pending.custom) return false;
+  pending = null;
+  delete draftByMate[mate.id];
+  statusByMate[mate.id] = { kind: 'saved', text: 'Avatar saved.' };
+  return true;
+}
+
+export function failHomeMateAvatar(mateId, message) {
+  if (!pending || !mateId || pending.mateId !== mateId) return false;
+  statusByMate[pending.mateId] = { kind: 'error', text: message || 'Could not save this avatar.' };
+  pending = null;
+  return true;
+}
+
+export function clearHomeMateAvatarEditor() {
+  activeToken++;
+  activeMateId = null;
+  pending = null;
+}

package/lib/public/modules/home-mate-color-picker.js

@@ -0,0 +1,66 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { MATE_WORKSPACE_COLORS, workspaceColor } from './mate-workspace-color.js';
+
+var timer = null;
+var sequence = 0;
+function state() { return store.get('mateColorSave'); }
+function put(value) { store.set({ mateColorSave: value }); }
+export function resetMateColor() { clearTimeout(timer); put(null); }
+export function mateColorSaving() { return !!(state() && state().requestId); }
+export function applyMateColorResult(msg) {
+  var s = state();
+  if (!s || !s.requestId || msg.requestId !== s.requestId || (msg.mate ? msg.mate.id : msg.mateId) !== s.mateId) return false;
+  clearTimeout(timer);
+  put(Object.assign({}, s, { requestId: null, error: msg.mate ? '' : (msg.error || 'Could not save the color. Try again.'), saved: !!msg.mate }));
+  return true;
+}
+export function renderMateColorPicker(body, mate, render) {
+  if (!mate || mate.builtinKey === 'clay' || mate.primary) return;
+  var color = workspaceColor(mate);
+  var s = state();
+  if (s && s.mateId !== mate.id) s = null;
+  var section = document.createElement('section'); section.className = 'mate-color-picker';
+  var title = document.createElement('h4'); title.textContent = 'Workspace color'; section.appendChild(title);
+  var help = document.createElement('p'); help.className = 'mate-settings-help';
+  help.textContent = 'Give this Mate its own color. Soft in daylight, muted after dark.';
+  section.appendChild(help);
+  var preview = document.createElement('div'); preview.className = 'mate-color-previews';
+  ['light', 'dark'].forEach(function (theme) {
+    var sample = document.createElement('div'); sample.className = 'mate-color-preview ' + theme;
+    sample.style.backgroundColor = color[theme];
+    sample.innerHTML = '<span class="mate-color-preview-label">' + (theme === 'light' ? 'Light' : 'Dark') + '</span><div class="mate-color-preview-canvas"><strong>Room to think</strong><span>A little color. A clear mind.</span></div>';
+    preview.appendChild(sample);
+  });
+  section.appendChild(preview);
+  var swatches = document.createElement('div'); swatches.className = 'mate-color-swatches';
+  swatches.setAttribute('role', 'group'); swatches.setAttribute('aria-label', 'Workspace color');
+  MATE_WORKSPACE_COLORS.forEach(function (choice) {
+    var button = document.createElement('button'); button.type = 'button'; button.id = 'mate-color-' + choice.id;
+    button.className = 'mate-color-swatch'; button.style.setProperty('--swatch', choice.pigment);
+    button.title = choice.label; button.setAttribute('aria-label', choice.label);
+    button.setAttribute('aria-pressed', String(color.id === choice.id));
+    button.setAttribute('aria-disabled', String(!!(s && s.requestId)));
+    if (color.id === choice.id) button.textContent = '✓';
+    button.addEventListener('click', function () {
+      if (mateColorSaving()) return;
+      var ws = getWs();
+      if (!ws || ws.readyState !== 1) { put({mateId:mate.id,error:'Clay is offline. Reconnect and try again.'}); render(); return; }
+      var requestId = 'mate-color-' + Date.now() + '-' + (++sequence);
+      put({mateId:mate.id,requestId:requestId,color:choice.id,error:''}); render();
+      try { ws.send(JSON.stringify({type:'mate_update',mateId:mate.id,requestId:requestId,updates:{workspaceColor:choice.id}})); }
+      catch (error) { put({mateId:mate.id,error:'Could not send the color. Try again.'}); render(); return; }
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        if (state() && state().requestId === requestId) {
+          put({mateId:mate.id,error:'No response received. Reconnect to check the saved color before retrying.'}); render();
+        }
+      },15000);
+    });
+    swatches.appendChild(button);
+  });
+  section.appendChild(swatches);
+  var status = document.createElement('p'); status.className = 'mate-settings-status'; status.setAttribute('role', s && s.error ? 'alert' : 'status');
+  status.textContent = (s && s.error) || (s && s.requestId ? 'Saving color…' : color.label + (s && s.saved ? ' · Saved' : ''));
+  section.appendChild(status); body.appendChild(section);
+}

package/lib/public/modules/home-mate-creation.js

@@ -81,7 +81,7 @@ export function applyHomeMateProposal(messages, msg) {
 export function resolveHomeMateProposal(messages, msg) {
   for (var i = 0; i < messages.length; i++) {
     if (messages[i].role !== "mate_proposal" || !messages[i].proposal || messages[i].proposal.proposalId !== msg.proposalId) continue;
-    messages[i] = Object.assign({}, messages[i], { status: msg.action === "create" ? "created" : (msg.action === "cancel" ? "cancelled" : "pending"), mateId: msg.mateId || null, mateName: msg.mateName || "", error: msg.error || "" });
+    messages[i] = Object.assign({}, messages[i], { status: msg.action === "create" ? "created" : (msg.action === "cancel" ? "cancelled" : "pending"), mateId: msg.createdMateId || null, mateName: msg.mateName || "", error: msg.error || "" });
   }
   return messages;
 }