clay-server 3.6.0-beta.1 → 3.6.0

package/lib/public/modules/theme.js

@@ -1,4 +1,4 @@
-import { iconHtml, refreshIcons } from './icons.js';
+import { refreshIcons } from './icons.js';
 import { setTerminalTheme } from './terminal.js';
 import { setTuiSessionTheme } from './session-tui-view.js';
 import { setTuiAttentionTheme } from './tui-attention.js';
@@ -58,81 +58,26 @@ function luminance(hex) {
   return (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) / 255;
 }
 
-// --- Dracula default: exact CSS values for initial render (before API loads) ---
-var defaultExactVars = {
-  "--bg": "#282a36",
-  "--bg-alt": "#363447",
-  "--text": "#f0f1f4",
-  "--text-secondary": "#f8f8f2",
-  "--text-muted": "#9ea8c7",
-  "--text-dimmer": "#6272a4",
-  "--accent": "#ffb86c",
-  "--accent-hover": "#ffc17e",
-  "--accent-bg": "rgba(255, 184, 108, 0.12)",
-  "--code-bg": "#22242e",
-  "--border": "#44475a",
-  "--border-subtle": "#333644",
-  "--input-bg": "#3d3e51",
-  "--user-bubble": "#404154",
-  "--error": "#ff5555",
-  "--success": "#50fa7b",
-  "--warning": "#f1fa8c",
-  "--sidebar-bg": "#242631",
-  "--sidebar-hover": "#2f2f3f",
-  "--sidebar-active": "#3d3e51",
-  "--filebrowser-bg": "#2e3042",
-  "--filebrowser-border": "#383a4d",
-  "--accent-8": "rgba(255, 184, 108, 0.08)",
-  "--accent-12": "rgba(255, 184, 108, 0.12)",
-  "--accent-15": "rgba(255, 184, 108, 0.15)",
-  "--accent-20": "rgba(255, 184, 108, 0.20)",
-  "--accent-25": "rgba(255, 184, 108, 0.25)",
-  "--accent-30": "rgba(255, 184, 108, 0.30)",
-  "--accent2": "#80bfff",
-  "--accent2-hover": "#8fc7ff",
-  "--accent2-bg": "rgba(128, 191, 255, 0.12)",
-  "--accent2-8": "rgba(128, 191, 255, 0.08)",
-  "--accent2-12": "rgba(128, 191, 255, 0.12)",
-  "--accent2-15": "rgba(128, 191, 255, 0.15)",
-  "--accent2-20": "rgba(128, 191, 255, 0.20)",
-  "--accent2-25": "rgba(128, 191, 255, 0.25)",
-  "--accent2-30": "rgba(128, 191, 255, 0.30)",
-  "--error-8": "rgba(255, 85, 85, 0.08)",
-  "--error-12": "rgba(255, 85, 85, 0.12)",
-  "--error-15": "rgba(255, 85, 85, 0.15)",
-  "--error-25": "rgba(255, 85, 85, 0.25)",
-  "--success-8": "rgba(80, 250, 123, 0.08)",
-  "--success-12": "rgba(80, 250, 123, 0.12)",
-  "--success-15": "rgba(80, 250, 123, 0.15)",
-  "--success-25": "rgba(80, 250, 123, 0.25)",
-  "--warning-bg": "rgba(241, 250, 140, 0.12)",
-  "--overlay-rgb": "255,255,255",
-  "--shadow-rgb": "0,0,0",
-  "--hl-comment": "#6272a4",
-  "--hl-keyword": "#ff79c6",
-  "--hl-string": "#50fa7b",
-  "--hl-number": "#ffb86c",
-  "--hl-function": "#80bfff",
-  "--hl-variable": "#ff5555",
-  "--hl-type": "#f1fa8c",
-  "--hl-constant": "#ffb86c",
-  "--hl-tag": "#ff5555",
-  "--hl-attr": "#80bfff",
-  "--hl-regexp": "#8be9fd",
-  "--hl-meta": "#bd93f9",
-  "--hl-builtin": "#ffb86c",
-  "--hl-symbol": "#bd93f9",
-  "--hl-addition": "#50fa7b",
-  "--hl-deletion": "#ff5555"
+var DEFAULT_DARK_THEME_ID = "clay-dark";
+var DEFAULT_LIGHT_THEME_ID = "clay-light";
+
+// Embedded defaults keep the first render branded before /api/themes loads.
+var defaultDarkFallback = {
+  name: "Clay Studio Dark", variant: "dark",
+  base00: "171715", base01: "20201D", base02: "393934", base03: "686861",
+  base04: "A0A098", base05: "D1D1CA", base06: "E8E8E2", base07: "FAFAF5",
+  base08: "FF7479", base09: "7776FF", base0A: "E0B45B", base0B: "07E5A3",
+  base0C: "5FD2C0", base0D: "8AA7FF", base0E: "C39AF3", base0F: "D69A7D",
+  accent2: "07E5A3", link: "7F7EC8"
 };
 
-// Minimal Dracula palette for getThemeColor before API loads
-var defaultFallback = {
-  name: "Dracula", variant: "dark",
-  base00: "282a36", base01: "363447", base02: "44475a", base03: "6272a4",
-  base04: "9ea8c7", base05: "f8f8f2", base06: "f0f1f4", base07: "ffffff",
-  base08: "ff5555", base09: "ffb86c", base0A: "f1fa8c", base0B: "50fa7b",
-  base0C: "8be9fd", base0D: "80bfff", base0E: "ff79c6", base0F: "bd93f9"
+var defaultLightFallback = {
+  name: "Clay Studio Light", variant: "light",
+  base00: "F7F7F3", base01: "EEEEEA", base02: "D7D7D0", base03: "A2A29B",
+  base04: "73736C", base05: "44443F", base06: "252522", base07: "151513",
+  base08: "C84B50", base09: "5857FC", base0A: "956A19", base0B: "087B59",
+  base0C: "187A7C", base0D: "3F62B4", base0E: "7A52A8", base0F: "9A5A46",
+  accent2: "07E5A3", link: "4948B8"
 };
 
 // --- Compute CSS variables from a base16 palette ---
@@ -146,6 +91,7 @@ function computeVars(theme) {
 
   var isLight = theme.variant === "light";
   var accent2 = theme.accent2 ? "#" + theme.accent2 : b.base0D;
+  var link = theme.link ? "#" + theme.link : b.base0D;
 
   return {
     "--bg":             b.base00,
@@ -157,6 +103,8 @@ function computeVars(theme) {
     "--accent":         b.base09,
     "--accent-hover":   isLight ? darken(b.base09, 0.12) : lighten(b.base09, 0.12),
     "--accent-bg":      hexToRgba(b.base09, 0.12),
+    "--link":           link,
+    "--link-hover":     isLight ? darken(link, 0.10) : lighten(link, 0.10),
     "--code-bg":        isLight ? darken(b.base00, 0.03) : darken(b.base00, 0.15),
     "--border":         b.base02,
     "--border-subtle":  mixColors(b.base00, b.base02, 0.6),
@@ -216,6 +164,8 @@ function computeVars(theme) {
   };
 }
 
+var defaultExactVars = computeVars(defaultDarkFallback);
+
 function computeTerminalTheme(theme) {
   var b = {};
   var keys = ["base00","base01","base02","base03","base04","base05","base06","base07",
@@ -250,7 +200,7 @@ function computeTerminalTheme(theme) {
 }
 
 function computeMermaidVars(theme) {
-  var vars = currentThemeId === "dracula" ? defaultExactVars : computeVars(theme);
+  var vars = currentThemeId === DEFAULT_DARK_THEME_ID ? defaultExactVars : computeVars(theme);
   var isLight = theme.variant === "light";
   return {
     darkMode: !isLight,
@@ -269,7 +219,7 @@ function computeMermaidVars(theme) {
 var themes = {};
 var customSet = {};   // ids that came from ~/.clay/themes/
 var themesLoaded = false;
-var currentThemeId = "dracula";
+var currentThemeId = DEFAULT_DARK_THEME_ID;
 var changeCallbacks = [];
 var STORAGE_KEY = "clay-theme";
 var MODE_KEY = "clay-mode";        // "light" | "dark" | null (system)
@@ -279,7 +229,10 @@ var WIDE_KEY = "clay-wide-view";   // cached from server, "bubble" | "channel"
 // --- Helpers ---
 
 function getTheme(id) {
-  return themes[id] || (id === "dracula" ? defaultFallback : null);
+  if (themes[id]) return themes[id];
+  if (id === DEFAULT_DARK_THEME_ID) return defaultDarkFallback;
+  if (id === DEFAULT_LIGHT_THEME_ID) return defaultLightFallback;
+  return null;
 }
 
 function isCustom(id) {
@@ -289,7 +242,7 @@ function isCustom(id) {
 // --- Public API ---
 
 export function getCurrentTheme() {
-  return getTheme(currentThemeId) || defaultFallback;
+  return getTheme(currentThemeId) || defaultDarkFallback;
 }
 
 export function getThemeId() {
@@ -302,7 +255,7 @@ export function getThemeColor(baseKey) {
 }
 
 export function getComputedVar(varName) {
-  if (currentThemeId === "dracula" && !themesLoaded) return defaultExactVars[varName] || "";
+  if (currentThemeId === DEFAULT_DARK_THEME_ID && !themesLoaded) return defaultExactVars[varName] || "";
   var theme = getCurrentTheme();
   var vars = computeVars(theme);
   return vars[varName] || "";
@@ -330,11 +283,11 @@ export function getThemes() {
 
 export function applyTheme(themeId, fromPicker) {
   var theme = getTheme(themeId);
-  if (!theme) themeId = "dracula";
+  if (!theme) themeId = getEffectiveMode() === "light" ? DEFAULT_LIGHT_THEME_ID : DEFAULT_DARK_THEME_ID;
   theme = getTheme(themeId);
   currentThemeId = themeId;
 
-  var vars = (themeId === "dracula" && !themesLoaded) ? defaultExactVars : computeVars(theme);
+  var vars = (themeId === DEFAULT_DARK_THEME_ID && !themesLoaded) ? defaultExactVars : computeVars(theme);
   var root = document.documentElement;
   var varNames = Object.keys(vars);
   for (var i = 0; i < varNames.length; i++) {
@@ -383,8 +336,8 @@ export function applyTheme(themeId, fromPicker) {
 
 // --- Favicon update on theme change ---
 function updateMascotSvgs(vars, isLight) {
-  var faviconEl = document.querySelector('link[rel="icon"][type="image/png"]');
-  if (faviconEl) faviconEl.setAttribute("href", "favicon-banded.png");
+  var faviconEl = document.querySelector('link[rel="icon"]');
+  if (faviconEl) faviconEl.setAttribute("href", "clay-studio-favicon-32.png");
 }
 
 // --- Theme loading from server ---
@@ -412,8 +365,9 @@ function loadThemes() {
       }
     }
 
-    // Ensure dracula always exists
-    if (!themes.dracula) themes.dracula = defaultFallback;
+    // Keep both Clay Studio defaults available even if a bundled file is missing.
+    if (!themes[DEFAULT_DARK_THEME_ID]) themes[DEFAULT_DARK_THEME_ID] = defaultDarkFallback;
+    if (!themes[DEFAULT_LIGHT_THEME_ID]) themes[DEFAULT_LIGHT_THEME_ID] = defaultLightFallback;
 
     themesLoaded = true;
 
@@ -424,9 +378,12 @@ function loadThemes() {
     // (before this, only defaultExactVars was used as fallback)
     applyTheme(currentThemeId);
   }).catch(function () {
-    // API unavailable — keep dracula fallback
-    themes.dracula = defaultFallback;
+    // API unavailable — keep the embedded Clay Studio pair.
+    themes[DEFAULT_DARK_THEME_ID] = defaultDarkFallback;
+    themes[DEFAULT_LIGHT_THEME_ID] = defaultLightFallback;
     themesLoaded = true;
+    if (pickerEl) rebuildPicker();
+    applyTheme(currentThemeId);
   });
 }
 
@@ -469,14 +426,14 @@ function themeIdForMode(mode) {
   var skin = null;
   try { skin = localStorage.getItem(SKIN_KEY); } catch (e) {}
 
-  // Default skin pair: clay (dark) / clay-light (light)
+  // Default Clay Studio skin pair.
   if (!skin) {
-    return mode === "light" ? "ayu-light" : "dracula";
+    return mode === "light" ? DEFAULT_LIGHT_THEME_ID : DEFAULT_DARK_THEME_ID;
   }
 
   // Custom skin — try to find the counterpart
   var current = getTheme(skin);
-  if (!current) return mode === "light" ? "ayu-light" : "dracula";
+  if (!current) return mode === "light" ? DEFAULT_LIGHT_THEME_ID : DEFAULT_DARK_THEME_ID;
 
   // Already the right variant?
   if (current.variant === mode) return skin;
@@ -489,10 +446,10 @@ function themeIdForMode(mode) {
 
   if (mode === "light") {
     if (lightId && themes[lightId]) return lightId;
-    return "ayu-light";
+    return DEFAULT_LIGHT_THEME_ID;
   } else {
     if (darkId && themes[darkId]) return darkId;
-    return "dracula";
+    return DEFAULT_DARK_THEME_ID;
   }
 }
 
@@ -616,58 +573,36 @@ function buildPickerContent() {
     }
   }
 
-  // Clay default themes always first in their section
+  // Clay Studio default themes always first in their section.
   function pinFirst(arr, pinId) {
     var idx = arr.indexOf(pinId);
     if (idx > 0) { arr.splice(idx, 1); arr.unshift(pinId); }
   }
-  pinFirst(darkIds, "dracula");
-  pinFirst(lightIds, "ayu-light");
-
-  // Dark section
-  if (darkIds.length > 0) {
-    var darkHeader = document.createElement("div");
-    darkHeader.className = "theme-picker-header";
-    darkHeader.textContent = "Dark";
-    pickerEl.appendChild(darkHeader);
-
-    var darkList = document.createElement("div");
-    darkList.className = "theme-picker-section";
-    for (var d = 0; d < darkIds.length; d++) {
-      darkList.appendChild(createThemeItem(darkIds[d], themes[darkIds[d]]));
+  pinFirst(darkIds, DEFAULT_DARK_THEME_ID);
+  pinFirst(lightIds, DEFAULT_LIGHT_THEME_ID);
+
+  function appendThemeGroup(label, ids) {
+    if (ids.length === 0) return;
+    var group = document.createElement("div");
+    group.className = "theme-picker-group";
+
+    var header = document.createElement("div");
+    header.className = "theme-picker-header";
+    header.textContent = label;
+    group.appendChild(header);
+
+    var list = document.createElement("div");
+    list.className = "theme-picker-section";
+    for (var j = 0; j < ids.length; j++) {
+      list.appendChild(createThemeItem(ids[j], themes[ids[j]]));
     }
-    pickerEl.appendChild(darkList);
+    group.appendChild(list);
+    pickerEl.appendChild(group);
   }
 
-  // Light section
-  if (lightIds.length > 0) {
-    var lightHeader = document.createElement("div");
-    lightHeader.className = "theme-picker-header";
-    lightHeader.textContent = "Light";
-    pickerEl.appendChild(lightHeader);
-
-    var lightList = document.createElement("div");
-    lightList.className = "theme-picker-section";
-    for (var l = 0; l < lightIds.length; l++) {
-      lightList.appendChild(createThemeItem(lightIds[l], themes[lightIds[l]]));
-    }
-    pickerEl.appendChild(lightList);
-  }
-
-  // Custom section
-  if (customIds.length > 0) {
-    var customHeader = document.createElement("div");
-    customHeader.className = "theme-picker-header";
-    customHeader.textContent = "Custom";
-    pickerEl.appendChild(customHeader);
-
-    var customList = document.createElement("div");
-    customList.className = "theme-picker-section";
-    for (var c = 0; c < customIds.length; c++) {
-      customList.appendChild(createThemeItem(customIds[c], themes[customIds[c]]));
-    }
-    pickerEl.appendChild(customList);
-  }
+  appendThemeGroup("Dark", darkIds);
+  appendThemeGroup("Light", lightIds);
+  appendThemeGroup("Custom", customIds);
 }
 
 function createThemePicker() {
@@ -681,34 +616,34 @@ function createThemePicker() {
   return pickerEl;
 }
 
+export function mountThemePicker(container) {
+  if (!container) return;
+  var picker = createThemePicker();
+  picker.classList.add("theme-picker-embedded");
+  if (picker.parentNode !== container) container.appendChild(picker);
+  rebuildPicker();
+}
+
 function rebuildPicker() {
   if (!pickerEl) return;
   buildPickerContent();
 }
 
-var pickerVisible = false;
-
-function togglePicker() {
-  // Legacy — no longer used as floating popover
-  // Picker is now embedded in server settings
-}
-
-function closePicker() {
-  // Legacy — no longer needed
-}
-
 // --- Init ---
 export function initTheme() {
-  // Determine initial theme from saved mode + skin, or system preference
+  // 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) {
+  if (saved && savedSkin) {
     currentThemeId = saved;
   } else {
-    // No saved theme — use system mode
+    // No explicit skin — use the Clay Studio pair in the system mode.
     var mode = getSystemMode();
-    currentThemeId = mode === "light" ? "ayu-light" : "dracula";
+    currentThemeId = mode === "light" ? DEFAULT_LIGHT_THEME_ID : DEFAULT_DARK_THEME_ID;
   }
 
   // Apply wide view state from localStorage
@@ -717,8 +652,7 @@ export function initTheme() {
   // Load all themes from server, then apply properly
   loadThemes();
 
-  // Theme toggle is now in User Settings (us-theme-toggle)
-  // Wired up in user-settings.js initUserSettings()
+  // The theme picker is mounted in User Settings by user-settings.js.
 
   // Listen for system preference changes (only applies if user has no manual override)
   if (window.matchMedia) {
@@ -743,99 +677,4 @@ export function initTheme() {
   // Set initial toggle icon
   updateToggleIcon();
 
-  var islandToggle = document.getElementById("user-theme-toggle-btn");
-  if (islandToggle && !islandToggle._clayThemeBound) {
-    islandToggle._clayThemeBound = true;
-    // Lock down static skin icon (independent of mode) and open the
-    // theme picker popover anchored to the button.
-    islandToggle.innerHTML = iconHtml("palette");
-    islandToggle.title = "Themes";
-    islandToggle.setAttribute("aria-label", "Themes");
-    refreshIcons();
-    islandToggle.addEventListener("click", function (e) {
-      e.stopPropagation();
-      toggleIslandThemePicker(islandToggle);
-    });
-  }
-}
-
-// --- Floating popover anchored to the user island button ---
-//
-// Mounts the picker (built by createThemePicker) into document.body as a
-// fixed-position overlay aligned under the anchor's right edge. Click
-// outside or Escape closes it. The picker DOM is shared with any other
-// embed point (settings page); we just reparent and reposition.
-
-var islandPickerOpen = false;
-var islandPickerOutsideHandler = null;
-var islandPickerKeyHandler = null;
-
-function positionPickerNearAnchor(anchorEl) {
-  if (!pickerEl || !anchorEl) return;
-  var rect = anchorEl.getBoundingClientRect();
-  var picker = pickerEl;
-  // Render hidden first to measure
-  picker.style.left = "0px";
-  picker.style.top = "0px";
-  var pw = picker.offsetWidth || 240;
-  var ph = picker.offsetHeight || 280;
-  var vw = window.innerWidth;
-  var vh = window.innerHeight;
-  // Right-align to anchor, drop below by 8px. Flip upward if not enough
-  // room below. Clamp into viewport on both axes.
-  var left = rect.right - pw;
-  if (left < 8) left = 8;
-  if (left + pw > vw - 8) left = vw - pw - 8;
-  var top = rect.bottom + 8;
-  if (top + ph > vh - 8) {
-    var flipped = rect.top - ph - 8;
-    if (flipped >= 8) top = flipped;
-    else top = Math.max(8, vh - ph - 8);
-  }
-  picker.style.left = left + "px";
-  picker.style.top = top + "px";
-}
-
-function closeIslandThemePicker() {
-  if (!islandPickerOpen) return;
-  islandPickerOpen = false;
-  if (pickerEl) pickerEl.classList.remove("visible");
-  if (islandPickerOutsideHandler) {
-    document.removeEventListener("mousedown", islandPickerOutsideHandler, true);
-    islandPickerOutsideHandler = null;
-  }
-  if (islandPickerKeyHandler) {
-    document.removeEventListener("keydown", islandPickerKeyHandler, true);
-    islandPickerKeyHandler = null;
-  }
-}
-
-export function toggleIslandThemePicker(anchorEl) {
-  if (islandPickerOpen) {
-    closeIslandThemePicker();
-    return;
-  }
-  if (!pickerEl) createThemePicker();
-  if (pickerEl.parentNode !== document.body) {
-    document.body.appendChild(pickerEl);
-  }
-  positionPickerNearAnchor(anchorEl);
-  pickerEl.classList.add("visible");
-  islandPickerOpen = true;
-
-  // Click anywhere outside picker (and not the anchor) closes it. Use
-  // capture phase + mousedown so the click that opened the picker
-  // doesn't immediately close it.
-  islandPickerOutsideHandler = function (ev) {
-    if (!pickerEl) return;
-    if (pickerEl.contains(ev.target)) return;
-    if (anchorEl && anchorEl.contains(ev.target)) return;
-    closeIslandThemePicker();
-  };
-  document.addEventListener("mousedown", islandPickerOutsideHandler, true);
-
-  islandPickerKeyHandler = function (ev) {
-    if (ev.key === "Escape") closeIslandThemePicker();
-  };
-  document.addEventListener("keydown", islandPickerKeyHandler, true);
 }

package/lib/public/modules/user-settings.js

@@ -3,7 +3,7 @@
 
 import { refreshIcons } from './icons.js';
 import { showToast } from './utils.js';
-import { getChatLayout, setChatLayout } from './theme.js';
+import { getChatLayout, mountThemePicker, setChatLayout } from './theme.js';
 import { applyTerminalFont } from './terminal-prefs.js';
 import { showEmailSetupModal, getEmailAccountListCache } from './context-sources.js';
 import { setSTTLang } from './stt.js';
@@ -231,8 +231,7 @@ export function initUserSettings(appCtx) {
     });
   }
 
-  // Theme picker lives on the user island button now (palette icon).
-  // No appearance-section mount required.
+  mountThemePicker(document.getElementById('us-theme-picker'));
 
   // Terminal font picker lives in the title bar (visible only while a
   // TUI session is active). See lib/public/modules/header-tui-font.js.

package/lib/public/style.css

@@ -1,16 +1,16 @@
-@import url("css/base.css");
-@import url("css/icon-strip.css");
-@import url("css/title-bar.css?v=20260824");
+@import url("css/base.css?v=20260828-type1");
+@import url("css/icon-strip.css?v=20260828-surfaces4");
+@import url("css/title-bar.css?v=20260828-project-header1");
 @import url("css/pane.css");
 @import url("css/worker-proposal.css");
-@import url("css/session-actions.css");
-@import url("css/sidebar.css");
-@import url("css/overlays.css");
+@import url("css/session-actions.css?v=20260828-contrast1");
+@import url("css/sidebar.css?v=20260828-session-list3");
+@import url("css/overlays.css?v=20260827-brand3");
 @import url("css/menus.css");
-@import url("css/messages.css?v=20260824");
+@import url("css/messages.css?v=20260828-delegated-muted1");
 @import url("css/rewind.css");
-@import url("css/input.css");
-@import url("css/filebrowser.css");
+@import url("css/input.css?v=20260828-composer-depth1");
+@import url("css/filebrowser.css?v=20260828-workbench4");
 @import url("css/git-panel.css");
 @import url("css/diff.css");
 @import url("css/highlight.css");
@@ -26,7 +26,7 @@
 @import url("css/playbook.css");
 @import url("css/stt.css");
 @import url("css/profile.css");
-@import url("css/user-settings.css");
+@import url("css/user-settings.css?v=20260828-type1");
 @import url("css/admin.css");
 @import url("css/session-search.css");
 @import url("css/tooltip.css");

package/lib/public/sw.js

@@ -1,4 +1,4 @@
-var CACHE_NAME = "clay-offline-v3";
+var CACHE_NAME = "clay-offline-v4";
 
 self.addEventListener("install", function (event) {
   event.waitUntil(self.skipWaiting());
@@ -68,7 +68,7 @@ self.addEventListener("fetch", function (event) {
             // If even the index page is not cached, show a minimal offline page
             if (indexCached) return indexCached;
             return new Response(
-              "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>Clay</title>" +
+              "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>Clay Studio</title>" +
               "<style>body{margin:0;background:#000;color:#888;display:flex;" +
               "align-items:center;justify-content:center;height:100vh;" +
               "font-family:monospace;font-size:1.2em}</style></head>" +
@@ -97,6 +97,8 @@ self.addEventListener("push", function (event) {
     body: data.body || "",
     tag: data.tag || "clay",
     data: data,
+    icon: "/clay-studio-symbol.png",
+    badge: "/clay-studio-favicon-32.png",
   };
 
   if (data.type === "permission_request") {

package/lib/themes/clay-dark.json

@@ -0,0 +1,11 @@
+{
+  "name": "Clay Studio Dark",
+  "author": "Clay Studio",
+  "variant": "dark",
+  "base00": "171715", "base01": "20201D", "base02": "393934", "base03": "686861",
+  "base04": "A0A098", "base05": "D1D1CA", "base06": "E8E8E2", "base07": "FAFAF5",
+  "base08": "FF7479", "base09": "7776FF", "base0A": "E0B45B", "base0B": "07E5A3",
+  "base0C": "5FD2C0", "base0D": "8AA7FF", "base0E": "C39AF3", "base0F": "D69A7D",
+  "accent2": "07E5A3",
+  "link": "7F7EC8"
+}

package/lib/themes/clay-light.json

@@ -0,0 +1,11 @@
+{
+  "name": "Clay Studio Light",
+  "author": "Clay Studio",
+  "variant": "light",
+  "base00": "F7F7F3", "base01": "EEEEEA", "base02": "D7D7D0", "base03": "A2A29B",
+  "base04": "73736C", "base05": "44443F", "base06": "252522", "base07": "151513",
+  "base08": "C84B50", "base09": "5857FC", "base0A": "956A19", "base0B": "087B59",
+  "base0C": "187A7C", "base0D": "3F62B4", "base0E": "7A52A8", "base0F": "9A5A46",
+  "accent2": "07E5A3",
+  "link": "4948B8"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "3.6.0-beta.1",
+  "version": "3.6.0",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js",