clay-server 4.1.0-beta.8 → 4.1.0

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

@@ -3,10 +3,6 @@
 
 import { iconHtml, refreshIcons } from './icons.js';
 import { store } from './store.js';
-import { scheduledMessageControl } from './scheduled-message-state.js';
-import { getWs } from './ws-ref.js';
-import { addToMessages, scrollToBottom } from './app-rendering.js';
-import { userAvatarUrl } from './avatar.js';
 import { setScheduleDelayMs, clearScheduleDelay } from './input.js';
 
 // --- Module-owned state ---
@@ -17,8 +13,7 @@ var rateLimitResetTimer = null;
 var rateLimitUsageEl = null;
 var rateLimitResetState = {};
 var rateLimitTickTimer = null;
-var scheduledMsgEl = null;
-var scheduledCountdownTimer = null;
+var rateLimitPopoverTimers = [];
 var fastModeIndicatorEl = null;
 
 // --- Internal helpers ---
@@ -31,7 +26,7 @@ function getVendorUsageMeta(vendor) {
     codex: {
       icon: "/codex-avatar.png",
       alt: "Codex",
-      href: "https://chatgpt.com/admin/usage",
+      href: "https://chatgpt.com/codex/settings/usage",
       title: "Check usage on ChatGPT",
     },
     claude: {
@@ -41,7 +36,7 @@ function getVendorUsageMeta(vendor) {
       title: "Check usage on claude.ai",
     },
   };
-  return fallbacks[vendor] || fallbacks.claude;
+  return fallbacks[vendor] || null;
 }
 
 function vendorTracksRateLimits(vendor) {
@@ -57,6 +52,37 @@ function vendorSupportsScheduledMessages(vendor) {
   return scheduledMessageVendors.indexOf(vendor) !== -1;
 }
 
+function rateLimitEventAppliesToPane(msg, state) {
+  var activeSessionId = state.activeSessionId;
+  var activeVendor = state.currentVendor || "claude";
+  if (!msg) return false;
+  if (msg.sessionId != null && String(msg.sessionId) !== String(activeSessionId)) return false;
+  if (msg.vendor) return msg.vendor === activeVendor;
+  // Legacy Claude records predate vendor/session stamps. Never project them
+  // into a non-Claude pane, where they would look like Claude usage.
+  return activeVendor === "claude";
+}
+
+function rateLimitStateKey(sessionId, vendor) {
+  return String(store.get('currentSlug') || "") + "\u0000" +
+    String(store.get('myUserId') || "") + "\u0000" +
+    String(sessionId == null ? "" : sessionId) + "\u0000" + String(vendor || "claude");
+}
+
+function getActiveRateLimitState() {
+  var state = store.get('rateLimitState') || {};
+  var key = rateLimitStateKey(store.get('activeSessionId'), store.get('currentVendor'));
+  return state[key] || {};
+}
+
+function setActiveRateLimitState(next) {
+  var state = Object.assign({}, store.get('rateLimitState') || {});
+  var key = rateLimitStateKey(store.get('activeSessionId'), store.get('currentVendor'));
+  state[key] = next;
+  store.set({ rateLimitState: state });
+  rateLimitResetState = next;
+}
+
 function rateLimitTypeLabel(type) {
   if (!type) return "Usage";
   var labels = {
@@ -114,13 +140,15 @@ function updateRateLimitIndicator(msg) {
   var isRejected = msg.status === "rejected";
   var pillClass = "header-rate-limit" + (isRejected ? " rejected" : " warning");
   var label = isRejected ? "Rate limited" : "Rate warning";
+  var meta = getVendorUsageMeta(store.get('currentVendor') || "claude");
+  var link = meta
+    ? '<a href="' + meta.href + '" target="_blank" rel="noopener" class="rate-limit-link" title="' + meta.title + '">' + iconHtml("external-link") + "</a>"
+    : '<span class="rate-limit-link unavailable" title="Usage information is unavailable for this vendor">' + iconHtml("external-link") + "</span>";
   rateLimitIndicatorEl.innerHTML =
     '<span class="' + pillClass + '">' +
       iconHtml("alert-triangle") +
       '<span class="header-pill-text">' + label + "</span>" +
-      '<a href="https://claude.ai/settings/usage" target="_blank" rel="noopener" class="rate-limit-link">' +
-        iconHtml("external-link") +
-      "</a>" +
+      link +
     "</span>";
   refreshIcons();
 }
@@ -137,10 +165,12 @@ function showRateLimitPopover(text, isRejected) {
   rateLimitIndicatorEl.appendChild(pop);
 
   // Auto-dismiss after 5s
-  setTimeout(function () {
+  var fadeTimer = setTimeout(function () {
     pop.classList.add("fade-out");
-    setTimeout(function () { if (pop.parentNode) pop.remove(); }, 300);
+    var removeTimer = setTimeout(function () { if (pop.parentNode) pop.remove(); }, 300);
+    rateLimitPopoverTimers.push(removeTimer);
   }, 5000);
+  rateLimitPopoverTimers.push(fadeTimer);
 }
 
 function clearRateLimitIndicator() {
@@ -174,22 +204,81 @@ function tickRateLimitUsage() {
   if (!rateLimitUsageEl) return;
   var parts = [];
   var types = ["five_hour", "seven_day", "seven_day_opus", "seven_day_sonnet"];
+  var nextState = Object.assign({}, rateLimitResetState);
+  var changed = false;
   for (var i = 0; i < types.length; i++) {
     var entry = rateLimitResetState[types[i]];
     if (!entry || !entry.resetsAt) continue;
     var timeStr = formatResetTime(entry.resetsAt);
-    if (!timeStr) { delete rateLimitResetState[types[i]]; continue; }
+    if (!timeStr) { delete nextState[types[i]]; changed = true; continue; }
     parts.push(rateLimitTypeShortLabel(types[i]) + " resets " + timeStr);
   }
+  if (changed) setActiveRateLimitState(nextState);
   if (parts.length === 0) {
-    rateLimitUsageEl.innerHTML = iconHtml("activity") + '<span>Check usage</span>' + iconHtml("external-link");
-    refreshIcons();
+    renderRateLimitUsage();
+    return;
+  }
+  renderRateLimitUsage();
+}
+
+function renderRateLimitUsage() {
+  var activeVendor = store.get('currentVendor') || "claude";
+  if (!vendorTracksRateLimits(activeVendor)) {
+    if (rateLimitUsageEl) {
+      rateLimitUsageEl.remove();
+      rateLimitUsageEl = null;
+    }
     if (rateLimitTickTimer) { clearInterval(rateLimitTickTimer); rateLimitTickTimer = null; }
     return;
   }
-  var label = parts.join(" · ");
-  rateLimitUsageEl.innerHTML = iconHtml("activity") + '<span>' + label + '</span>' + iconHtml("external-link");
+
+  rateLimitResetState = getActiveRateLimitState();
+  var topBarActions = document.querySelector("#top-bar .top-bar-actions");
+  if (!topBarActions) return;
+  if (!rateLimitUsageEl) {
+    rateLimitUsageEl = document.createElement("a");
+    rateLimitUsageEl.id = "rate-limit-usage-link";
+    rateLimitUsageEl.className = "top-bar-pill pill-dim usage-check-link";
+    rateLimitUsageEl.target = "_blank";
+    rateLimitUsageEl.rel = "noopener";
+    var ref = document.getElementById("skip-perms-pill");
+    topBarActions.insertBefore(rateLimitUsageEl, ref);
+  }
+  rateLimitUsageEl.style.display = "";
+
+  var parts = [];
+  var types = ["five_hour", "seven_day", "seven_day_opus", "seven_day_sonnet"];
+  for (var i = 0; i < types.length; i++) {
+    var entry = rateLimitResetState[types[i]];
+    if (!entry || !entry.resetsAt) continue;
+    var timeStr = formatResetTime(entry.resetsAt);
+    if (!timeStr) continue;
+    parts.push(rateLimitTypeShortLabel(types[i]) + " resets " + timeStr);
+  }
+
+  var label = parts.length > 0 ? parts.join(" · ") : "Check usage";
+  var meta = getVendorUsageMeta(activeVendor);
+  if (meta) {
+    rateLimitUsageEl.href = meta.href;
+    rateLimitUsageEl.title = meta.title;
+    rateLimitUsageEl.removeAttribute("aria-disabled");
+    rateLimitUsageEl.innerHTML =
+      '<img src="' + meta.icon + '" class="usage-check-vendor-icon" alt="' + meta.alt + '">' +
+      '<span>' + label + '</span>' + iconHtml("external-link");
+  } else {
+    rateLimitUsageEl.removeAttribute("href");
+    rateLimitUsageEl.setAttribute("aria-disabled", "true");
+    rateLimitUsageEl.title = "Usage information is unavailable for this vendor";
+    rateLimitUsageEl.innerHTML = '<span>' + (parts.length > 0 ? label : "Usage unavailable") + '</span>';
+  }
   refreshIcons();
+
+  if (parts.length > 0 && !rateLimitTickTimer) {
+    rateLimitTickTimer = setInterval(tickRateLimitUsage, 30000);
+  } else if (parts.length === 0 && rateLimitTickTimer) {
+    clearInterval(rateLimitTickTimer);
+    rateLimitTickTimer = null;
+  }
 }
 
 // --- Exported functions ---
@@ -199,15 +288,32 @@ export function initRateLimit() {
     if (state.currentVendor !== prev.currentVendor && state.currentVendor) {
       if (!vendorSupportsScheduledMessages(state.currentVendor)) clearScheduleDelay();
     }
-    if (state.currentVendor !== prev.currentVendor || state.vendorInfo !== prev.vendorInfo) {
-      if (rateLimitUsageEl) {
-        rateLimitUsageEl.style.display = vendorTracksRateLimits(state.currentVendor || "claude") ? "" : "none";
-      }
+    if (state.currentVendor !== prev.currentVendor || state.activeSessionId !== prev.activeSessionId
+        || state.currentSlug !== prev.currentSlug || state.myUserId !== prev.myUserId) {
+      resetRateLimitState();
+    }
+    if (state.vendorInfo !== prev.vendorInfo && state.currentVendor === prev.currentVendor && state.activeSessionId === prev.activeSessionId
+        && state.currentSlug === prev.currentSlug && state.myUserId === prev.myUserId) {
+      renderRateLimitUsage();
     }
   });
 }
 
 export function handleRateLimitEvent(msg) {
+  if (!rateLimitEventAppliesToPane(msg, store.snap())) return;
+  if (msg.resetsAt && msg.resetsAt <= Date.now()) {
+    var expiredState = Object.assign({}, getActiveRateLimitState());
+    if (msg.rateLimitType) delete expiredState[msg.rateLimitType];
+    setActiveRateLimitState(expiredState);
+    clearRateLimitIndicator();
+    renderRateLimitUsage();
+    return;
+  }
+  if (msg.rateLimitType && msg.resetsAt) {
+    var eventState = Object.assign({}, getActiveRateLimitState());
+    eventState[msg.rateLimitType] = { resetsAt: msg.resetsAt, status: msg.status };
+    setActiveRateLimitState(eventState);
+  }
   var isRejected = msg.status === "rejected";
   var typeLabel = rateLimitTypeLabel(msg.rateLimitType);
   var popoverText = "";
@@ -232,8 +338,12 @@ export function handleRateLimitEvent(msg) {
     rateLimitResetTimer = setTimeout(function () {
       rateLimitResetsAt = null;
       rateLimitResetTimer = null;
+      var currentState = Object.assign({}, getActiveRateLimitState());
+      delete currentState[msg.rateLimitType];
+      setActiveRateLimitState(currentState);
       // Clear schedule mode when rate limit resets
       clearScheduleDelay();
+      renderRateLimitUsage();
     }, msg.resetsAt - Date.now() + 1000);
   } else {
     var pct = msg.utilization ? Math.round(msg.utilization * 100) : null;
@@ -245,230 +355,19 @@ export function handleRateLimitEvent(msg) {
 }
 
 export function updateRateLimitUsage(msg) {
+  if (!rateLimitEventAppliesToPane(msg, store.snap())) return;
   var activeVendor = store.get('currentVendor') || "claude";
   if (!vendorTracksRateLimits(activeVendor)) {
-    if (rateLimitUsageEl) rateLimitUsageEl.style.display = "none";
+    renderRateLimitUsage();
     return;
   }
   if (msg.rateLimitType && msg.resetsAt) {
-    rateLimitResetState[msg.rateLimitType] = { resetsAt: msg.resetsAt, status: msg.status };
-  }
-
-  var topBarActions = document.querySelector("#top-bar .top-bar-actions");
-  if (!topBarActions) return;
-
-  if (!rateLimitUsageEl) {
-    rateLimitUsageEl = document.createElement("a");
-    rateLimitUsageEl.id = "rate-limit-usage-link";
-    rateLimitUsageEl.className = "top-bar-pill pill-dim usage-check-link";
-    rateLimitUsageEl.target = "_blank";
-    rateLimitUsageEl.rel = "noopener";
-    var ref = document.getElementById("skip-perms-pill");
-    topBarActions.insertBefore(rateLimitUsageEl, ref);
+    var nextState = Object.assign({}, getActiveRateLimitState());
+    nextState[msg.rateLimitType] = { resetsAt: msg.resetsAt, status: msg.status };
+    setActiveRateLimitState(nextState);
   }
-  rateLimitUsageEl.style.display = "";
 
-  // Build label from available reset times
-  var parts = [];
-  var types = ["five_hour", "seven_day", "seven_day_opus", "seven_day_sonnet"];
-  for (var i = 0; i < types.length; i++) {
-    var entry = rateLimitResetState[types[i]];
-    if (!entry || !entry.resetsAt) continue;
-    var timeStr = formatResetTime(entry.resetsAt);
-    if (!timeStr) continue;
-    parts.push(rateLimitTypeShortLabel(types[i]) + " resets " + timeStr);
-  }
-
-  var label = parts.length > 0 ? parts.join(" · ") : "Check usage";
-  var vendor = activeVendor;
-  var meta = getVendorUsageMeta(vendor);
-  rateLimitUsageEl.href = meta.href;
-  rateLimitUsageEl.title = meta.title;
-  rateLimitUsageEl.innerHTML =
-    '<img src="' + meta.icon + '" class="usage-check-vendor-icon" alt="' + meta.alt + '">' +
-    '<span>' + label + '</span>' +
-    iconHtml("external-link");
-  refreshIcons();
-
-  // Start or stop live countdown tick
-  if (parts.length > 0 && !rateLimitTickTimer) {
-    rateLimitTickTimer = setInterval(tickRateLimitUsage, 30000);
-  } else if (parts.length === 0 && rateLimitTickTimer) {
-    clearInterval(rateLimitTickTimer);
-    rateLimitTickTimer = null;
-  }
-}
-
-export function addScheduledMessageBubble(text, resetsAt, correlation) {
-  removeScheduledMessageBubble();
-  var isChannel = document.body.classList.contains("wide-view");
-  var wrap = document.createElement("div");
-  wrap.className = "msg-user scheduled-msg-wrap";
-  wrap.id = "scheduled-msg-bubble";
-
-  var countdownEl;
-  var cancelBtn;
-
-  if (isChannel) {
-    // Channel mode: avatar + header with scheduled badge + message
-    var _me = store.get('cachedAllUsers').find(function (u) { return u.id === store.get('myUserId'); });
-    var _myName = document.body.dataset.myDisplayName || (_me && (_me.displayName || _me.username)) || "Me";
-
-    var avi = document.createElement("img");
-    avi.className = "dm-bubble-avatar dm-bubble-avatar-me";
-    avi.src = document.body.dataset.myAvatarUrl || userAvatarUrl(_me || { id: store.get('myUserId') }, 36);
-    wrap.appendChild(avi);
-
-    var content = document.createElement("div");
-    content.className = "dm-bubble-content";
-
-    var header = document.createElement("div");
-    header.className = "dm-bubble-header";
-
-    var nameSpan = document.createElement("span");
-    nameSpan.className = "dm-bubble-name";
-    nameSpan.textContent = _myName;
-    header.appendChild(nameSpan);
-
-    var badge = document.createElement("span");
-    badge.className = "scheduled-msg-badge";
-    badge.innerHTML = iconHtml("clock");
-    countdownEl = document.createElement("span");
-    countdownEl.className = "scheduled-msg-countdown";
-    badge.appendChild(countdownEl);
-    header.appendChild(badge);
-
-    var actions = document.createElement("span");
-    actions.className = "scheduled-msg-actions";
-
-    var sendNowBtn = document.createElement("button");
-    sendNowBtn.className = "scheduled-msg-send-now";
-    sendNowBtn.textContent = "Send now";
-    sendNowBtn.addEventListener("click", function () {
-      var ws = getWs();
-      if (ws && ws.readyState === 1) {
-        ws.send(JSON.stringify(scheduledMessageControl("send_scheduled_now", correlation)));
-      }
-    });
-    actions.appendChild(sendNowBtn);
-
-    var sep = document.createElement("span");
-    sep.className = "scheduled-msg-sep";
-    sep.textContent = "\u00b7";
-    actions.appendChild(sep);
-
-    cancelBtn = document.createElement("button");
-    cancelBtn.className = "scheduled-msg-cancel";
-    cancelBtn.textContent = "Cancel";
-    cancelBtn.addEventListener("click", function () {
-      var ws = getWs();
-      if (ws && ws.readyState === 1) {
-        ws.send(JSON.stringify(scheduledMessageControl("cancel_scheduled_message", correlation)));
-      }
-    });
-    actions.appendChild(cancelBtn);
-
-    header.appendChild(actions);
-
-    content.appendChild(header);
-
-    var bubble = document.createElement("div");
-    bubble.className = "bubble scheduled-msg-bubble";
-    var textEl = document.createElement("span");
-    textEl.textContent = text;
-    bubble.appendChild(textEl);
-    content.appendChild(bubble);
-
-    wrap.appendChild(content);
-  } else {
-    // Bubble mode: original layout
-    var bubble = document.createElement("div");
-    bubble.className = "bubble scheduled-msg-bubble";
-
-    var textEl = document.createElement("span");
-    textEl.textContent = text;
-    bubble.appendChild(textEl);
-
-    var metaEl = document.createElement("div");
-    metaEl.className = "scheduled-msg-meta";
-
-    var clockIcon = document.createElement("span");
-    clockIcon.className = "scheduled-msg-icon";
-    clockIcon.innerHTML = iconHtml("clock");
-    metaEl.appendChild(clockIcon);
-
-    countdownEl = document.createElement("span");
-    countdownEl.className = "scheduled-msg-countdown";
-    metaEl.appendChild(countdownEl);
-
-    var sendNowBtn2 = document.createElement("button");
-    sendNowBtn2.className = "scheduled-msg-send-now";
-    sendNowBtn2.textContent = "Send now";
-    sendNowBtn2.addEventListener("click", function () {
-      var ws = getWs();
-      if (ws && ws.readyState === 1) {
-        ws.send(JSON.stringify(scheduledMessageControl("send_scheduled_now", correlation)));
-      }
-    });
-    metaEl.appendChild(sendNowBtn2);
-
-    var sep2 = document.createElement("span");
-    sep2.className = "scheduled-msg-sep";
-    sep2.textContent = "\u00b7";
-    metaEl.appendChild(sep2);
-
-    cancelBtn = document.createElement("button");
-    cancelBtn.className = "scheduled-msg-cancel";
-    cancelBtn.textContent = "Cancel";
-    cancelBtn.addEventListener("click", function () {
-      var ws = getWs();
-      if (ws && ws.readyState === 1) {
-        ws.send(JSON.stringify(scheduledMessageControl("cancel_scheduled_message", correlation)));
-      }
-    });
-    metaEl.appendChild(cancelBtn);
-
-    wrap.appendChild(bubble);
-    wrap.appendChild(metaEl);
-  }
-
-  addToMessages(wrap);
-  scheduledMsgEl = wrap;
-  scrollToBottom();
-
-  // Start countdown
-  function updateCountdown() {
-    var remaining = resetsAt - Date.now();
-    if (remaining <= 0) {
-      countdownEl.textContent = "Sending...";
-      if (scheduledCountdownTimer) { clearInterval(scheduledCountdownTimer); scheduledCountdownTimer = null; }
-      return;
-    }
-    var hrs = Math.floor(remaining / 3600000);
-    var mins = Math.floor((remaining % 3600000) / 60000);
-    var secs = Math.floor((remaining % 60000) / 1000);
-    var timeStr = "";
-    if (hrs > 0) timeStr += hrs + "h ";
-    if (mins > 0 || hrs > 0) timeStr += mins + "m ";
-    timeStr += secs + "s";
-
-    var sendDate = new Date(resetsAt);
-    var absTime = sendDate.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-    countdownEl.textContent = "Sends at " + absTime + " (" + timeStr + ")";
-  }
-  updateCountdown();
-  scheduledCountdownTimer = setInterval(updateCountdown, 1000);
-}
-
-export function removeScheduledMessageBubble() {
-  if (scheduledMsgEl) {
-    scheduledMsgEl.remove();
-    scheduledMsgEl = null;
-  }
-  if (scheduledCountdownTimer) {
-    clearInterval(scheduledCountdownTimer);
-    scheduledCountdownTimer = null;
-  }
+  renderRateLimitUsage();
 }
 
 export function handleFastModeState(state) {
@@ -498,12 +397,18 @@ export function handleFastModeState(state) {
   refreshIcons();
 }
 
-export function getScheduledMsgEl() { return scheduledMsgEl; }
-
 export function resetRateLimitState() {
   clearRateLimitIndicator();
-  store.set({ scheduledMessageCorrelation: null });
-  removeScheduledMessageBubble();
+  rateLimitResetsAt = null;
+  if (rateLimitResetTimer) { clearTimeout(rateLimitResetTimer); rateLimitResetTimer = null; }
+  clearScheduleDelay();
+  for (var i = 0; i < rateLimitPopoverTimers.length; i++) clearTimeout(rateLimitPopoverTimers[i]);
+  rateLimitPopoverTimers = [];
+  if (rateLimitTickTimer) { clearInterval(rateLimitTickTimer); rateLimitTickTimer = null; }
   if (rateLimitCountdownTimer) { clearInterval(rateLimitCountdownTimer); rateLimitCountdownTimer = null; }
+  rateLimitResetState = getActiveRateLimitState();
+  renderRateLimitUsage();
   if (fastModeIndicatorEl) { fastModeIndicatorEl.remove(); fastModeIndicatorEl = null; }
 }
+
+export { rateLimitEventAppliesToPane, getVendorUsageMeta };

package/lib/public/modules/avatar-imprint.js

@@ -1,10 +1,9 @@
-// Clay Imprints: deterministic SVG identities derived from a stable seed.
+// Local pixel identities: deterministic SVG avatars derived from a stable seed.
 
 var PAPER = "#f1efe8";
 var INK = "#1b1b1a";
-var LIGHT_BASE = "#e7e5de";
-var LIGHT_FIELD = "#333330";
 var MUTED_INDIGO = "#72778f";
+var IDENTICON_PALETTE = ["#333330", MUTED_INDIGO, "#6f8382", "#887b91", "#8a806a"];
 var MATE_MARK_PALETTE = [
   { background: "#6f7489", foreground: PAPER },
   { background: "#78816c", foreground: PAPER },
@@ -24,25 +23,6 @@ function hashString(value) {
   return hash >>> 0;
 }
 
-function makeRandom(seed) {
-  var state = seed >>> 0;
-  return function nextRandom() {
-    state += 0x6d2b79f5;
-    var value = state;
-    value = Math.imul(value ^ (value >>> 15), value | 1);
-    value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
-    return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
-  };
-}
-
-function between(random, min, max) {
-  return min + random() * (max - min);
-}
-
-function number(value) {
-  return Math.round(value * 100) / 100;
-}
-
 function xmlText(value) {
   return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -54,62 +34,37 @@ function legacyIdentity(style, seed) {
   return "legacy:" + sourceStyle + ":" + sourceSeed;
 }
 
-function curvePath(y, bow, endOffset) {
-  return "M -28 " + number(y) +
-    " C 17 " + number(y + bow) +
-    ", 71 " + number(y - bow) +
-    ", 124 " + number(y + endOffset);
-}
-
-function cutPath(random) {
-  var start = between(random, 37, 52);
-  var first = between(random, 14, 84);
-  var second = between(random, 12, 86);
-  var end = between(random, 40, 64);
-  return "M -22 " + number(start) + " C 21 " + number(first) + ", 73 " + number(second) + ", 118 " + number(end);
-}
-
 export function imprintSvg(options) {
   var settings = options || {};
   var size = Math.max(12, Math.min(256, Number(settings.size) || 64));
   var identity = legacyIdentity(settings.style, settings.seed);
   var hash = hashString(identity);
-  var random = makeRandom(hash);
-  var darkBase = random() > 0.52;
-  var base = darkBase ? INK : LIGHT_BASE;
-  var field = darkBase ? PAPER : LIGHT_FIELD;
-  var accent = MUTED_INDIGO;
-  var rotation = Math.floor(random() * 4) * 90;
-  var bandWidth = between(random, 37, 56);
-  var secondaryWidth = between(random, 14, 24);
-  var cutWidth = between(random, 15, 25);
-  var firstY = between(random, 24, 42);
-  var secondY = between(random, 58, 78);
-  var firstBow = between(random, -34, 34);
-  var secondBow = between(random, -32, 32);
-  var firstPath = curvePath(firstY, firstBow, 6);
-  var secondPath = curvePath(secondY, -secondBow, -5);
-  var contours = "";
+  var cells = identiconCells(hash);
+  var foreground = IDENTICON_PALETTE[hash % IDENTICON_PALETTE.length];
+  var pixels = "";
+  for (var i = 0; i < cells.length; i++) {
+    pixels += '<rect x="' + (cells[i][0] + 1) + '" y="' + (cells[i][1] + 1) + '" width="1" height="1"/>';
+  }
+  return '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size +
+    '" viewBox="0 0 7 7" shape-rendering="crispEdges"><rect width="7" height="7" fill="' + PAPER +
+    '"/><g fill="' + foreground + '">' + pixels + '</g><rect x="0.5" y="0.5" width="6" height="6" fill="none" stroke="' +
+    INK + '" stroke-opacity="0.14" stroke-width="0.08"/></svg>';
+}
 
-  if (size >= 40) {
-    for (var contour = -1; contour <= 1; contour++) {
-      var offset = contour * 5.2;
-      contours += '<path d="' + curvePath(firstY + offset, firstBow, 0) + '" fill="none" stroke="' +
-        (darkBase ? PAPER : INK) + '" stroke-opacity="0.2" stroke-width="0.8"/>';
+// Generate the left three columns and mirror them into a compact 5x5 grid.
+export function identiconCells(hash) {
+  var value = hash >>> 0;
+  var cells = [];
+  for (var row = 0; row < 5; row++) {
+    for (var column = 0; column < 3; column++) {
+      value = Math.imul(value ^ (value >>> 13), 16777619) >>> 0;
+      if ((value & 1) || (row === 2 && column === 1)) {
+        cells.push([column, row]);
+        if (column < 2) cells.push([4 - column, row]);
+      }
     }
   }
-
-  var clipId = "imprint-" + hash.toString(16);
-  return '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size +
-    '" viewBox="0 0 96 96"><defs><clipPath id="' + clipId +
-    '"><rect width="96" height="96" rx="24"/></clipPath></defs><g clip-path="url(#' + clipId +
-    ')"><rect width="96" height="96" fill="' + base + '"/><g transform="rotate(' + rotation +
-    ' 48 48)"><path d="' + firstPath + '" fill="none" stroke="' + field + '" stroke-width="' +
-    number(bandWidth) + '" stroke-linecap="square"/><path d="' + secondPath + '" fill="none" stroke="' +
-    accent + '" stroke-width="' + number(secondaryWidth) + '" stroke-linecap="square"/><path d="' +
-    cutPath(random) + '" fill="none" stroke="' + base + '" stroke-width="' + number(cutWidth) +
-    '" stroke-linecap="square"/>' + contours + '</g></g><rect x="0.5" y="0.5" width="95" height="95" rx="23.5" fill="none" stroke="' +
-    (darkBase ? "#000000" : INK) + '" stroke-opacity="0.16"/></svg>';
+  return cells;
 }
 
 export function imprintDataUrl(options) {

package/lib/public/modules/avatar.js

@@ -1,11 +1,11 @@
-// Centralized Clay Imprint URL builder for people and Mates.
+// Centralized local avatar URL builder for people and Mates.
 import { imprintDataUrl, mateMarkDataUrl } from './avatar-imprint.js';
 
 var imprintCache = new Map();
 var mateMarkCache = new Map();
 
 // Legacy style remains part of the identity hash so existing selections map
-// deterministically into the new Clay Imprint system.
+// deterministically into the local pixel identity system.
 export function avatarUrl(style, seed, size) {
   var cacheKey = [style || 'imprint', seed || 'anonymous', size || 64].join('|');
   if (imprintCache.has(cacheKey)) return imprintCache.get(cacheKey);
@@ -15,12 +15,20 @@ export function avatarUrl(style, seed, size) {
   return url;
 }
 
+// Use the same bounded account identity for fresh fallbacks across every surface.
+export function userAvatarSeed(user) {
+  var profile = user && user.profile ? user.profile : user;
+  var savedSeed = profile && profile.avatarSeed || user && user.avatarSeed;
+  if (savedSeed) return String(savedSeed);
+  var identity = profile && (profile.username || profile.id || profile.userId) || user && (user.username || user.id || user.userId) || 'anonymous';
+  return String(identity).substring(0, 30);
+}
+
 // Build avatar URL for a user object, preferring custom avatar if set.
 export function userAvatarUrl(user, size) {
   if (user && user.avatarCustom) return user.avatarCustom;
   var style = (user && user.avatarStyle) || 'imprint';
-  var seed = (user && (user.avatarSeed || user.username || user.id)) || 'anonymous';
-  return avatarUrl(style, seed, size);
+  return avatarUrl(style, userAvatarSeed(user), size);
 }
 
 export function mateMarkUrl(seed, size) {