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

package/lib/public/modules/sidebar-sessions.js

@@ -12,7 +12,6 @@ import { dismissOverlayPanels, closeSidebar, updatePageTitle, spawnDustParticles
 import { showConfirm } from './app-misc.js';
 import { getUpcomingSchedules } from './scheduler.js';
 import { refreshMobileChatSheet } from './sidebar-mobile.js';
-import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
 import { openGroup, openWorkerWithDriver, separateGroup } from './split-view.js';
 import { groupedSessionIds } from './split-group-helpers.js';
 import { resolvePreferredVendor } from './default-vendor.js';
@@ -24,6 +23,7 @@ import { renderFolderToolbar, captureFolderInputs, folderToolbarNeedsRender } fr
 import { captureFolderCollapseAnimations } from './session-folder-collapse.js';
 import { getListSearchQuery, getListSearchMatchIds, applyListSearchResults, filterItemsBySearch } from './session-list-search.js';
 import { expectCreatedSession } from './session-create.js';
+import { isMateWorkspace } from './project-mate-navigation.js';
 import { describeSessionDelete } from './session-delete-scope.js';
 import { renderSessionPresence, setSessionPresence } from './session-presence-ui.js';
 import {
@@ -31,6 +31,9 @@ import {
   renderDesktopDriverHierarchy,
   renderDesktopOrphanHierarchy
 } from './sidebar-session-hierarchy.js';
+import { ordinarySessionListSessions } from './session-list-visibility.js';
+import { formatSessionActivity } from './session-activity-tooltip.js';
+import { bindSessionTitleMarquee } from './session-title-marquee.js';
 import { summarizeSidebarItems } from './sidebar-session-counts.js';
 import {
   cancelSessionInlineRename,
@@ -272,7 +275,7 @@ function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData) {
 
 
   // Session visibility toggle (only the session owner can change)
-  if (store.get('isMultiUserMode') && sessionData && sessionData.ownerId && sessionData.ownerId === store.get('myUserId')) {
+  if (!isMateWorkspace(store.snap()) && store.get('isMultiUserMode') && sessionData && !sessionData.isMate && sessionData.ownerId && sessionData.ownerId === store.get('myUserId')) {
     var currentVis = (sessionData && sessionData.sessionVisibility) || "private";
     var isPrivate = currentVis === "private";
     var visItem = document.createElement("button");
@@ -514,6 +517,17 @@ function isSessionVisibleBySearch(sessionId) {
   return getListSearchMatchIds().has(sessionId);
 }
 
+function appendSessionTitleLine(el, textSpan) {
+  var processingDot = textSpan.querySelector('.session-processing');
+  if (processingDot) processingDot.remove();
+  var titleLine = document.createElement('span');
+  titleLine.className = 'session-item-title-line';
+  titleLine.appendChild(textSpan);
+  if (processingDot) titleLine.appendChild(processingDot);
+  el.appendChild(titleLine);
+  return titleLine;
+}
+
 // --- Loop child / run / group rendering ---
 
 function renderLoopChild(s) {
@@ -539,7 +553,7 @@ function renderLoopChild(s) {
     textHtml += '<span class="session-loop-role-badge' + roleCls + '">' + roleName + iterSuffix + '</span>';
   }
   textSpan.innerHTML = textHtml;
-  el.appendChild(textSpan);
+  appendSessionTitleLine(el, textSpan);
   appendSessionCloseButton(el, s);
 
   el.addEventListener("click", (function (id) {
@@ -665,7 +679,7 @@ function renderLoopGroup(loopId, children, groupKey) {
     textHtml += '<span class="session-loop-count' + countClass + '">' + countLabel + '</span>';
   }
   textSpan.innerHTML = textHtml;
-  el.appendChild(textSpan);
+  appendSessionTitleLine(el, textSpan);
 
   // More button (ellipsis)
   var moreBtn = document.createElement("button");
@@ -768,7 +782,7 @@ function renderLoopRun(parentGk, startedAtKey, sessions, isRalph) {
   textHtml += '<span class="session-loop-run-time">' + escapeHtml(timeLabel) + '</span>';
   textHtml += '<span class="session-loop-count' + (isRalph ? "" : " scheduled") + '">' + sessions.length + '</span>';
   textSpan.innerHTML = textHtml;
-  el.appendChild(textSpan);
+  appendSessionTitleLine(el, textSpan);
 
   // Click row -> switch to latest session of this run
   el.addEventListener("click", (function (id) {
@@ -799,26 +813,24 @@ function renderLoopRun(parentGk, startedAtKey, sessions, isRalph) {
 
 function renderSessionItem(s, options) {
   var itemOptions = options || {};
+  var displaySession = s;
+  if (itemOptions.promotedActive || itemOptions.promotedProcessing || itemOptions.promotedUnread !== undefined) {
+    displaySession = Object.assign({}, s, {
+      active: !!(s.active || itemOptions.promotedActive),
+      isProcessing: !!(s.isProcessing || itemOptions.promotedProcessing),
+      unread: (s.unread || 0) + (itemOptions.promotedUnread || 0),
+    });
+  }
   var el = document.createElement("div");
   var isMatch = getListSearchMatchIds() !== null && getListSearchMatchIds().has(s.id);
-  el.className = "session-item" + (s.active ? " active" : "") + (isMatch ? " search-match" : "");
+  el.className = "session-item" + (displaySession.active ? " active" : "") + (isMatch ? " search-match" : "");
   if (itemOptions.worker) el.classList.add("session-worker-item");
   el.dataset.sessionId = s.id;
 
-  // Keep agent identity separate from the title so each row has a stable
-  // visual anchor instead of mixing a tiny inline logo into the text.
-  var itemVendor = s.vendor || "claude";
-  var vendorIcon = document.createElement("img");
-  vendorIcon.className = "session-vendor-icon session-vendor-mark";
-  vendorIcon.src = VENDOR_AVATARS[itemVendor] || VENDOR_AVATARS.claude;
-  vendorIcon.alt = "";
-  vendorIcon.title = VENDOR_NAMES[itemVendor] || itemVendor;
-  el.appendChild(vendorIcon);
-
   var textSpan = document.createElement("span");
   textSpan.className = "session-item-text";
   var textHtml = "";
-  if (s.isProcessing) {
+  if (displaySession.isProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
   if (s.backgroundTaskCount) {
@@ -832,8 +844,12 @@ function renderSessionItem(s, options) {
   }
   textHtml += '<span class="session-item-title">' + highlightMatch(s.title || "New Session", getListSearchQuery()) + '</span>';
   textSpan.innerHTML = textHtml;
-  el.appendChild(textSpan);
-  appendGithubWork(el, s, textSpan);
+  textSpan.setAttribute("aria-label", s.title || "New Session");
+  var titleEl = textSpan.querySelector(".session-item-title");
+  var activityTitle = formatSessionActivity(s.lastActivity);
+  if (titleEl && activityTitle) titleEl.title = activityTitle;
+  var titleLine = appendSessionTitleLine(el, textSpan);
+  appendGithubWork(el, s, titleLine);
 
   if (itemOptions.worker) {
     var workerLabel = document.createElement("span");
@@ -844,13 +860,6 @@ function renderSessionItem(s, options) {
 
   var trailing = document.createElement("span");
   trailing.className = "session-row-trailing";
-  var ageText = relativeTime(s.lastActivity || 0);
-  if (ageText) {
-    var age = document.createElement("span");
-    age.className = "session-item-age";
-    age.textContent = ageText;
-    trailing.appendChild(age);
-  }
 
   // Right-click / long-press: context menu
   el.addEventListener("contextmenu", (function(id, title, cliSid, anchor, sData) {
@@ -865,8 +874,8 @@ function renderSessionItem(s, options) {
   var unreadBadge = document.createElement("span");
   unreadBadge.className = "session-unread-badge";
   unreadBadge.dataset.sessionId = s.id;
-  if (s.unread > 0) {
-    unreadBadge.textContent = s.unread > 99 ? "99+" : String(s.unread);
+  if (displaySession.unread > 0) {
+    unreadBadge.textContent = displaySession.unread > 99 ? "99+" : String(displaySession.unread);
     unreadBadge.classList.add("has-unread");
   }
   el.appendChild(unreadBadge);
@@ -877,6 +886,7 @@ function renderSessionItem(s, options) {
     if (isFavoriteSession(s)) el.classList.add("is-favorite");
   }
   appendSessionCloseButton(actions, s);
+  el.style.setProperty("--session-actions-width", (actions.childNodes.length * 18 + Math.max(0, actions.childNodes.length - 1) * 4 + 21) + "px");
   if (actions.childNodes.length) trailing.appendChild(actions);
   if (trailing.childNodes.length) el.appendChild(trailing);
 
@@ -898,6 +908,7 @@ function renderSessionItem(s, options) {
 
   // Presence avatars (multi-user)
   renderSessionPresence(el, String(s.id));
+  bindSessionTitleMarquee(el, textSpan.querySelector(".session-item-title"), actions);
   if (!itemOptions.worker) setupFolderDrag(el, s);
 
   return el;
@@ -911,14 +922,7 @@ function renderSplitGroupItem(group, members) {
 
   var text = document.createElement("span");
   text.className = "session-item-text split-group-text";
-  var html = '<span class="split-group-glyph" aria-hidden="true">' + iconHtml("columns-2") + '</span><span class="split-group-vendors">';
-  for (var i = 0; i < members.length; i++) {
-    var vendor = members[i].vendor || "claude";
-    html += '<img class="session-vendor-icon split-group-vendor" src="' +
-      (VENDOR_AVATARS[vendor] || VENDOR_AVATARS.claude) + '" alt="" title="' +
-      escapeHtml(VENDOR_NAMES[vendor] || vendor) + '">';
-  }
-  html += "</span>";
+  var html = '<span class="split-group-glyph" aria-hidden="true">' + iconHtml("columns-2") + '</span>';
   var splitProcessing = false;
   var splitBackgroundTaskCount = 0;
   for (var si = 0; si < members.length; si++) {
@@ -929,7 +933,7 @@ function renderSplitGroupItem(group, members) {
   if (splitBackgroundTaskCount) html += '<span class="session-background-task-count">' + splitBackgroundTaskCount + '</span>';
   html += '<span class="split-group-name">' + highlightMatch(group.name || "Split", getListSearchQuery()) + "</span>";
   text.innerHTML = html;
-  el.appendChild(text);
+  appendSessionTitleLine(el, text);
 
   var unread = 0;
   for (var ui = 0; ui < members.length; ui++) unread += members[ui].unread || 0;
@@ -938,7 +942,6 @@ function renderSplitGroupItem(group, members) {
   badge.dataset.splitGroupId = group.id;
   if (unread > 0) badge.textContent = unread > 99 ? "99+" : String(unread);
   el.appendChild(badge);
-
   el.addEventListener("click", function () {
     if (openGroup(group)) {
       dismissOverlayPanels();
@@ -994,22 +997,23 @@ export function renderSessionList(sessions) {
 
   // Partition: loop sessions vs normal sessions
   // Group by loopId + date so all runs of the same task on the same day are merged
+  var visibleSessions = ordinarySessionListSessions(cachedSessions);
   var splitGroups = store.get('splitGroups') || [];
   var groupedIds = groupedSessionIds(splitGroups);
-  var hierarchy = prepareSidebarHierarchy(cachedSessions);
+  var hierarchy = prepareSidebarHierarchy(visibleSessions);
   var hierarchyByDriver = hierarchy.byDriver;
   var hierarchySessionIds = hierarchy.sessionIds;
   hierarchySessionIds.forEach(function (id) { groupedIds.delete(id); });
   var sessionsById = new Map();
-  for (var si = 0; si < cachedSessions.length; si++) sessionsById.set(cachedSessions[si].id, cachedSessions[si]);
+  for (var si = 0; si < visibleSessions.length; si++) sessionsById.set(visibleSessions[si].id, visibleSessions[si]);
   var loopGroups = {}; // groupKey -> [sessions]
   var normalSessions = [];
-  for (var i = 0; i < cachedSessions.length; i++) {
-    var s = cachedSessions[i];
+  for (var i = 0; i < visibleSessions.length; i++) {
+    var s = visibleSessions[i];
     if (s.sessionRole === "worker") continue;
     if (groupedIds.has(s.id)) continue;
-    if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph" && s.loop.source !== "debate") {
-      // Task crafting sessions live in the scheduler calendar, not the main list (except debate)
+    if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph") {
+      // Task crafting sessions live in the scheduler calendar, not the main list.
       continue;
     } else if (s.loop && s.loop.loopId) {
       var startedAt = s.loop.startedAt || 0;
@@ -1029,11 +1033,6 @@ export function renderSessionList(sessions) {
     if (driverRoot) items.push({ type: "driver-hierarchy", root: driverRoot, data: driverRoot.driver, lastActivity: driverRoot.lastActivity });
     else items.push({ type: "session", data: normalSessions[j], lastActivity: normalSessions[j].lastActivity || 0 });
   }
-  if (hierarchy.orphans.length) {
-    var orphanActivity = 0;
-    for (var oi = 0; oi < hierarchy.orphans.length; oi++) orphanActivity = Math.max(orphanActivity, hierarchy.orphans[oi].lastActivity || 0);
-    items.push({ type: "orphan-workers", workers: hierarchy.orphans, lastActivity: orphanActivity });
-  }
   for (var sg = 0; sg < splitGroups.length; sg++) {
     var splitGroup = splitGroups[sg];
     var splitMembers = [];
@@ -1083,7 +1082,7 @@ export function renderSessionList(sessions) {
       if (it.type === "loop") return renderLoopGroup(it.loopId, it.children, it.groupKey) || document.createElement("div");
       if (it.type === "split-group") return renderSplitGroupItem(it.group, it.members);
       if (it.type === "driver-hierarchy") return renderDesktopDriverHierarchy(it.root, renderSessionItem, rerender, matchIds);
-      if (it.type === "orphan-workers") return renderDesktopOrphanHierarchy(it.workers, renderSessionItem, rerender, matchIds);
+      if (it.type === "orphan-workers") return document.createElement("div");
       return renderSessionItem(it.data);
     },
   };

package/lib/public/modules/sidebar.js

@@ -62,6 +62,14 @@ export function closeSidebar() {
   ctx.sidebarOverlay.classList.remove("visible");
 }
 
+export function toggleSidebarCollapse() {
+  if (!ctx) return;
+  var layout = ctx.$("layout");
+  var collapsed = layout.classList.toggle("sidebar-collapsed");
+  try { localStorage.setItem("sidebar-collapsed", collapsed ? "1" : ""); } catch (e) {}
+  setTimeout(function () { syncResizeHandles(); }, 210);
+}
+
 export function initSidebar(_ctx) {
   ctx = _ctx;
 
@@ -87,13 +95,6 @@ export function initSidebar(_ctx) {
   ctx.sidebarOverlay.addEventListener("click", closeSidebar);
 
   // --- Desktop sidebar collapse/expand ---
-  function toggleSidebarCollapse() {
-    var layout = ctx.$("layout");
-    var collapsed = layout.classList.toggle("sidebar-collapsed");
-    try { localStorage.setItem("sidebar-collapsed", collapsed ? "1" : ""); } catch (e) {}
-    setTimeout(function () { syncUserIslandWidth(); syncResizeHandle(); }, 210);
-  }
-
   if (ctx.sidebarToggleBtn) ctx.sidebarToggleBtn.addEventListener("click", toggleSidebarCollapse);
   if (ctx.sidebarExpandBtn) ctx.sidebarExpandBtn.addEventListener("click", toggleSidebarCollapse);
   var mateSidebarToggle = document.getElementById("mate-sidebar-toggle-btn");
@@ -245,12 +246,9 @@ export function initSidebar(_ctx) {
 
   function syncUserIslandWidth() {
     if (!userIsland) return;
-    var mateSidebarColumn = document.getElementById("mate-sidebar-column");
-    var isMateDM = document.body.classList.contains("mate-dm-active");
-    var col = (isMateDM && mateSidebarColumn && !mateSidebarColumn.classList.contains("hidden")) ? mateSidebarColumn : sidebarColumn;
-    if (!col) return;
-    var rect = col.getBoundingClientRect();
-    userIsland.style.width = (rect.right - 8 - 8) + "px";
+    var iconStrip = document.getElementById("icon-strip");
+    var stripWidth = iconStrip ? iconStrip.getBoundingClientRect().width : 0;
+    userIsland.style.width = (stripWidth > 0 ? stripWidth : 72) + "px";
   }
 
   // --- Sidebar resize handle ---

package/lib/public/modules/stt-picker.js

@@ -1,3 +1,5 @@
+import { confirmSettingsAction as showConfirmDialog } from './server-settings-state.js';
+import { enhanceSettingsSelects } from './settings-select.js';
 import { store } from './store.js';
 import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
@@ -5,7 +7,10 @@ import { speechLanguages, voiceModel, loadSpeechSettings, saveSpeechSettings, sa
 import { stopSTT } from './stt-controller.js';
 import { browserSpeechInfo, compareSpeechModels } from './stt-browser.js';
 
-export function closeSpeechPicker() {
+export function closeSpeechPicker(force) {
+  if(document.querySelector('.admin-modal-overlay, #settings-confirm') && !force)return;
+  var input = document.querySelector("#speech-api-key");
+  if (!force && input && input.value) {showConfirmDialog("Discard the unsaved voice API key?", "Discard", function () {closeSpeechPicker(true);});return;}
   var state = store.get('speechPopup');
   store.set({ speechPopup: null });
   if (state && state.anchor.isConnected) { state.anchor.setAttribute('aria-expanded', 'false'); state.anchor.focus(); }
@@ -59,8 +64,10 @@ function render() {
   popup.style.left = Math.max(8, Math.min(bounds.right - 324, window.innerWidth - 332)) + 'px';
   popup.style.bottom = Math.max(8, window.innerHeight - bounds.top + 8) + 'px';
   popup.style.maxHeight = Math.max(150, bounds.top - 16) + 'px';
+  if (state.anchor.closest('#user-settings')) {popup.style.bottom = 'auto';popup.style.top = 'max(16px, calc(50dvh - 260px))';popup.style.maxHeight = 'calc(100dvh - 48px)';}
   popup.addEventListener('click', function (event) {
     var button = event.target.closest('button'); if (!button || button.disabled) return;
+    if (popup.querySelector("#speech-api-key") && popup.querySelector("#speech-api-key").value && (button.dataset.mode || button.dataset.provider || button.dataset.model)) {showConfirmDialog('Discard the unsaved voice API key?', 'Discard', function () {form.elements.key.value = '';button.click();});return;}
     if (button.dataset.mode) patch({ mode: button.dataset.mode, provider: null, keyModel: null });
     else if (button.dataset.provider) {
       var keyModel = button.parentElement.querySelector('[data-model]').dataset.model;
@@ -80,7 +87,7 @@ function render() {
   var form = popup.querySelector('form');
   if (form && previousProvider === state.provider) form.elements.key.value = unsavedKey;
   if (form) form.addEventListener('submit', function (event) {
-    event.preventDefault(); var key = form.elements.key.value; form.elements.key.value = '';
+    event.preventDefault(); var key = form.elements.key.value;
     save({ provider: state.provider, key: key }, false);
   });
   var select = popup.querySelector('select');
@@ -89,6 +96,7 @@ function render() {
     try { await saveSpeechLanguage(code); if (store.get('speechPopup')) patch({ busy: false, error: '' }); }
     catch (error) { if (store.get('speechPopup')) patch({ busy: false, error: error.message }); }
   });
+  enhanceSettingsSelects(popup);
   var focus = Array.from(popup.querySelectorAll('[data-focus]')).find(function (el) { return el.dataset.focus === focusKey && !el.disabled; });
   (form && previousProvider !== state.provider ? form.elements.key : (focus || popup.querySelector('input,button'))).focus();
 }
@@ -108,14 +116,15 @@ export function initSpeechPicker() {
   });
   document.addEventListener('pointerdown', function (event) {
     var state = store.get('speechPopup'); var popup = document.getElementById('speech-picker');
+    if(event.target.closest('.admin-modal-overlay, #settings-confirm'))return;
     if (state && popup && !popup.contains(event.target) && !state.anchor.contains(event.target)) closeSpeechPicker();
   });
   document.addEventListener('keydown', function (event) {
-    if (!store.get('speechPopup')) return;
-    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeSpeechPicker(); }
+    if (!store.get('speechPopup') || document.querySelector('.admin-modal-overlay, #settings-confirm')) return;
+    if (event.key === 'Escape') { if(document.activeElement.closest('.settings-picker') && document.activeElement.closest('.settings-picker').querySelector('[aria-expanded=true]'))return; event.preventDefault(); event.stopPropagation(); closeSpeechPicker(); }
     if (event.key === 'Tab') {
       var popup = document.getElementById('speech-picker');
-      var items = popup.querySelectorAll('button:not(:disabled),input:not(:disabled),select:not(:disabled),a[href]');
+      var items = Array.from(popup.querySelectorAll('button:not(:disabled),input:not(:disabled),select:not(:disabled),a[href]')).filter(function(el){return el.getClientRects().length && el.tabIndex!==-1;});
       var first = items[0]; var last = items[items.length - 1];
       if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
       else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }

package/lib/public/modules/terminal-prefs.js

@@ -1,3 +1,15 @@
+export var TERMINAL_FONT_OPTIONS = [
+  { label: "SF Mono",         family: "'SF Mono', Menlo, Monaco, 'Courier New', monospace" },
+  { label: "JetBrains Mono",  family: "'JetBrains Mono', 'SF Mono', Menlo, monospace" },
+  { label: "Fira Code",       family: "'Fira Code', 'SF Mono', Menlo, monospace" },
+  { label: "Cascadia Code",   family: "'Cascadia Code', 'SF Mono', Menlo, monospace" },
+  { label: "IBM Plex Mono",   family: "'IBM Plex Mono', 'SF Mono', Menlo, monospace" },
+  { label: "Source Code Pro", family: "'Source Code Pro', 'SF Mono', Menlo, monospace" },
+  { label: "Roboto Mono",     family: "'Roboto Mono', 'SF Mono', Menlo, monospace" },
+  { label: "D2 Coding",       family: "'D2 coding', 'D2Coding', 'SF Mono', Menlo, monospace" },
+  { label: "System mono",     family: "ui-monospace, monospace" },
+];
+
 // terminal-prefs.js
 //
 // Single source of truth for terminal font preferences (family + size).
@@ -98,3 +110,13 @@ export function applyTerminalFont(family, size) {
 export function onTerminalFontChange(fn) {
   if (typeof fn === "function") listeners.push(fn);
 }
+
+// Publish only acknowledged values, shared by settings and the terminal toolbar.
+export async function saveTerminalFont(family, size) {
+  var response = await fetch('/api/user/terminal-font', {
+    method: 'PUT', headers: {'Content-Type':'application/json'},
+    body: JSON.stringify({family: family, size: size})
+  });
+  if (!response.ok) throw new Error('Could not save terminal typography. Try again.');
+  applyTerminalFont(family, size);
+}

package/lib/public/modules/theme.js

@@ -1,3 +1,4 @@
+import { store } from './store.js';
 import { refreshIcons } from './icons.js';
 import { setTerminalTheme } from './terminal.js';
 import { setTuiSessionTheme } from './session-tui-view.js';
@@ -315,19 +316,7 @@ export function applyTheme(themeId, fromPicker) {
   var mermaidVars = computeMermaidVars(theme);
   try { updateMermaidTheme(mermaidVars); } catch (e) {}
 
-  try {
-    localStorage.setItem(STORAGE_KEY, themeId);
-    localStorage.setItem(STORAGE_KEY + "-vars", JSON.stringify(vars));
-    localStorage.setItem(STORAGE_KEY + "-variant", theme.variant || "dark");
-  } catch (e) {}
-
-  // When picked from skin selector, save as skin preference and sync mode
-  if (fromPicker) {
-    try {
-      localStorage.setItem(SKIN_KEY, themeId);
-      localStorage.setItem(MODE_KEY, isLight ? "light" : "dark");
-    } catch (e) {}
-  }
+  if (fromPicker) saveAppearance(themeId, isLight ? 'light' : 'dark');
 
   updateToggleIcon();
 
@@ -417,7 +406,7 @@ function getSystemMode() {
 // Returns the effective mode: user override or system
 function getEffectiveMode() {
   var saved = null;
-  try { saved = localStorage.getItem(MODE_KEY); } catch (e) {}
+  saved = (store.get('appearanceDraft') || store.get('appearancePreference') || {}).mode;
   if (saved === "light" || saved === "dark") return saved;
   return getSystemMode();
 }
@@ -426,7 +415,10 @@ function getEffectiveMode() {
 // If user has a custom skin selected, find its dark/light counterpart
 function themeIdForMode(mode) {
   var skin = null;
-  try { skin = localStorage.getItem(SKIN_KEY); } catch (e) {}
+  var preference = store.get('appearanceDraft') || store.get('appearancePreference') || {};
+  var paired = preference[mode + 'Theme'];
+  if (paired && getTheme(paired) && getTheme(paired).variant === mode) return paired;
+  skin = preference.theme;
 
   // Default Clay Studio skin pair.
   if (!skin) {
@@ -457,24 +449,12 @@ function themeIdForMode(mode) {
 
 // --- Wide view ---
 
-export function isWideView() {
-  try {
-    var v = localStorage.getItem(WIDE_KEY);
-    return v === null ? true : v !== "bubble"; // default: Channel (wide)
-  } catch (e) { return true; }
-}
-
-export function getChatLayout() {
-  try {
-    var v = localStorage.getItem(WIDE_KEY);
-    return v === "bubble" ? "bubble" : "channel";
-  } catch (e) { return "channel"; }
-}
-
+export function isWideView() { return getChatLayout() === 'channel'; }
+export function getChatLayout() { return store.get('personalChatLayout') || 'channel'; }
 export function setChatLayout(layout) {
-  var val = (layout === "bubble") ? "bubble" : "channel";
-  try { localStorage.setItem(WIDE_KEY, val); } catch (e) {}
-  document.body.classList.toggle("wide-view", val === "channel");
+  var val = layout === 'bubble' ? 'bubble' : 'channel';
+  store.set({ personalChatLayout: val });
+  document.body.classList.toggle('wide-view', val === 'channel');
 }
 
 export function setWideView(enabled) {
@@ -485,9 +465,10 @@ export function setWideView(enabled) {
 export function toggleDarkMode() {
   var current = getEffectiveMode();
   var next = current === "dark" ? "light" : "dark";
-  try { localStorage.setItem(MODE_KEY, next); } catch (e) {}
+
   var tid = themeIdForMode(next);
   applyTheme(tid);
+  saveAppearance(tid, next);
   updateToggleIcon();
 }
 
@@ -633,26 +614,11 @@ function rebuildPicker() {
 
 // --- Init ---
 export function initTheme() {
-  // Preserve an explicitly selected skin. Previously auto-applied Ayu Light
-  // and Dracula values have no SKIN_KEY, so they migrate to the Clay pair.
-  var saved = null;
-  var savedSkin = null;
-  try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) {}
-  try { savedSkin = localStorage.getItem(SKIN_KEY); } catch (e) {}
-
-  if (saved && savedSkin) {
-    currentThemeId = saved;
-  } else {
-    // No explicit skin — use the Clay Studio pair in the system mode.
-    var mode = getSystemMode();
-    currentThemeId = mode === "light" ? DEFAULT_LIGHT_THEME_ID : DEFAULT_DARK_THEME_ID;
-  }
-
-  // Apply wide view state from localStorage
-  document.body.classList.toggle("wide-view", isWideView());
+  currentThemeId = getSystemMode() === 'light' ? DEFAULT_LIGHT_THEME_ID : DEFAULT_DARK_THEME_ID;
+  document.body.classList.toggle('wide-view', isWideView());
 
   // Load all themes from server, then apply properly
-  loadThemes();
+  loadThemes().then(loadAppearance);
 
   // The theme picker is mounted in User Settings by user-settings.js.
 
@@ -661,7 +627,7 @@ export function initTheme() {
     var mq = window.matchMedia("(prefers-color-scheme: dark)");
     var handler = function () {
       var userMode = null;
-      try { userMode = localStorage.getItem(MODE_KEY); } catch (e) {}
+      userMode = (store.get('appearanceDraft') || store.get('appearancePreference') || {}).mode;
       if (!userMode) {
         // No manual override — follow system
         var sysMode = getSystemMode();
@@ -680,3 +646,73 @@ export function initTheme() {
   updateToggleIcon();
 
 }
+
+function appearanceStatus(text, error) {
+  store.set({ appearanceSaveStatus: text, appearanceSaveError: !!error });
+  var status = document.getElementById('us-appearance-status');
+  if (status) { status.textContent = text; status.dataset.state = error ? 'error' : ''; }
+}
+export function getAppearanceChoices() {
+  return { mode: (store.get('appearanceDraft') || store.get('appearancePreference') || {}).mode || 'system', lightTheme: themeIdForMode('light'), darkTheme: themeIdForMode('dark') };
+}
+export function retryAppearanceSave() {
+  var draft = store.get('appearanceDraft');
+  if (draft) saveAppearance(draft.theme, draft.mode, draft);
+}
+export function selectAppearanceMode(mode) {
+  var effective = mode === 'system' ? getSystemMode() : mode;
+  var id = themeIdForMode(effective);
+  saveAppearance(id, mode === 'system' ? null : mode);
+  applyTheme(id);
+}
+export function selectAppearanceTheme(mode, id) {
+  if (!getTheme(id) || getTheme(id).variant !== mode) return;
+  var effective = getEffectiveMode();
+  var current = store.get('appearanceDraft') || store.get('appearancePreference') || {};
+  var change = {}; change[mode + 'Theme'] = id;
+  saveAppearance(mode === effective ? id : currentThemeId, current.mode || null, change);
+  if (mode === effective) applyTheme(id);
+}
+function saveAppearance(theme, mode, overrides) {
+  var values = Object.assign({}, store.get('appearanceDraft') || store.get('appearancePreference') || {}, {theme:theme, mode:mode}, overrides || {});
+  delete values.configured;
+  var selected = getTheme(theme);
+  if (selected) values[selected.variant + 'Theme'] = theme;
+  store.set({appearanceDraft:values});
+  var queue = store.get('appearanceSaveQueue') || Promise.resolve();
+  var next = queue.catch(function () {}).then(function () {return persistAppearance(values);});
+  store.set({appearanceSaveQueue:next});
+  return next;
+}
+async function persistAppearance(values) {
+  var request = (store.get('appearanceSaveRequest') || 0) + 1;
+  store.set({ appearanceSaveRequest: request });
+  appearanceStatus('Saving appearance…');
+  try {
+    var response = await fetch('/api/user/appearance', {method:'PUT',headers:{'Content-Type':'application/json','X-Clay-Settings':'1'},body:JSON.stringify(values)});
+    if (!response.ok) throw new Error('Could not save appearance. Your preview remains. Retry to save it.');
+    if (store.get('appearanceSaveRequest') !== request) return;
+    var saved = await response.json();
+    store.set({ appearancePreference: saved, appearanceDraft: store.get('appearanceDraft') === values ? null : store.get('appearanceDraft') });
+    [STORAGE_KEY,SKIN_KEY,MODE_KEY,STORAGE_KEY+'-vars',STORAGE_KEY+'-variant'].forEach(function (key) {try {localStorage.removeItem(key);}catch(error){}});
+    appearanceStatus('Saved. Applied to this view; other devices use it when they reload.');
+  } catch(error) {if(store.get('appearanceSaveRequest') === request) appearanceStatus(error.message,true);}
+}
+async function loadAppearance() {
+  try {
+    var response = await fetch('/api/user/appearance');
+    if (!response.ok) throw new Error('Appearance preferences unavailable.');
+    var data = await response.json();
+    if(store.get('appearanceSaveRequest'))return;
+    if (data.configured) {store.set({appearancePreference:data});applyTheme(themeIdForMode(data.mode || getSystemMode()));}
+    else {
+      var legacy = null;try {legacy = localStorage.getItem(STORAGE_KEY);}catch(error){}
+      if(legacy && getTheme(legacy))store.set({legacyAppearanceAvailable:legacy});
+    }
+  } catch(error) {appearanceStatus(error.message,true);}
+}
+
+export function importLegacyAppearance() {
+  var legacy=store.get('legacyAppearanceAvailable');
+  if(legacy) {applyTheme(legacy,true);store.set({legacyAppearanceAvailable:null});}
+}

package/lib/public/modules/thinking-lifecycle.js

@@ -3,6 +3,7 @@ import { iconHtml, refreshIcons } from './icons.js';
 import { store } from './store.js';
 import { addToMessages, keepActiveThinkingAtTail, scrollToBottom } from './chat-render-runtime.js';
 import { prepareThinkingView, bindThinkingView, updateThinkingView, beginThinkingView, setThinkingViewLive, finishThinkingView } from './thinking-view.js';
+import { resolveProjectAssistantIdentity, applyProjectAssistantIdentity } from './project-chat-identity.js';
 
 function getThinkingState() {
   return store.get('thinkingState') || null;
@@ -19,8 +20,7 @@ function updateThinkingState(state, patch) {
 }
 
 function isMateThinking() {
-  var target = store.get('dmTargetUser');
-  return !!(store.get('dmMode') && target && target.isMate);
+  return resolveProjectAssistantIdentity(store.snap(), store.get('currentVendor')).kind === 'mate';
 }
 
 function maybeScrollToBottom() {
@@ -30,10 +30,10 @@ function maybeScrollToBottom() {
 function createThinkingElement() {
   var el = document.createElement("div");
   el.className = "thinking-item";
-  if (isMateThinking()) {
-    var target = store.get('dmTargetUser');
-    var mateName = (target && target.displayName) || "Mate";
-    var mateAvatar = document.body.dataset.mateAvatarUrl || "";
+  var identity = resolveProjectAssistantIdentity(store.snap(), store.get('currentVendor'));
+  if (identity.kind === 'mate') {
+    var mateName = identity.name;
+    var mateAvatar = identity.avatarUrl;
     el.classList.add("mate-thinking");
     el.innerHTML =
       '<img class="dm-bubble-avatar dm-bubble-avatar-mate" src="' + escapeHtml(mateAvatar) + '" alt="">' +
@@ -48,6 +48,7 @@ function createThinkingElement() {
       '</div>' +
       '<div class="thinking-content"></div>' +
       '</div>';
+    applyProjectAssistantIdentity(el, identity);
   } else {
     el.innerHTML =
       '<div class="thinking-header">' +