clay-server 3.6.0-beta.1 → 3.6.0

package/lib/public/css/title-bar.css

@@ -30,7 +30,7 @@
   padding: 2px 10px;
   font-family: inherit;
   font-size: 11px;
-  font-weight: 600;
+  font-weight: var(--font-weight-ui);
   cursor: pointer;
   white-space: nowrap;
   line-height: 1;
@@ -208,33 +208,65 @@
 .title-bar-project-dropdown {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   flex: 1;
   min-width: 0;
   background: none;
   border: none;
-  padding: 4px 8px;
-  margin: -4px -8px;
-  border-radius: 6px;
+  padding: 4px;
+  margin: 0;
+  border-radius: 10px;
   cursor: pointer;
-  transition: background 0.15s;
+  text-align: left;
+  transition: background 0.15s, box-shadow 0.15s;
   font-family: inherit;
 }
 
-.title-bar-project-dropdown:hover {
-  background: rgba(var(--overlay-rgb), 0.06);
+.title-bar-project-dropdown:hover,
+.title-bar-project-dropdown.open {
+  background: rgba(var(--overlay-rgb), 0.035);
+}
+
+.title-bar-project-dropdown:focus { outline: none; }
+.title-bar-project-dropdown:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 18%, transparent);
 }
 
 .title-bar-project-icon {
-  display: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+  background: var(--bg);
+  color: var(--text-muted);
+  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.1);
   font-size: 18px;
   line-height: 1;
   flex-shrink: 0;
+  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
 }
 
-.title-bar-project-icon.has-icon {
-  display: inline-flex;
-  align-items: center;
+.title-bar-project-icon::before {
+  content: "";
+  width: 15px;
+  height: 15px;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.title-bar-project-icon.has-icon::before {
+  display: none;
+}
+
+.title-bar-project-dropdown:hover .title-bar-project-icon,
+.title-bar-project-dropdown.open .title-bar-project-icon {
+  background: var(--bg-alt);
+  box-shadow: 0 3px 8px rgba(var(--shadow-rgb), 0.14);
+  transform: translateY(-1px);
 }
 
 .title-bar-project-icon .emoji {
@@ -251,9 +283,10 @@
 
 .title-bar-project-name {
   font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 17px;
-  font-weight: 800;
+  font-size: 14px;
+  font-weight: var(--font-weight-heading);
   color: var(--text);
+  flex: 0 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -261,10 +294,10 @@
 }
 
 .title-bar-chevron {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   flex-shrink: 0;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   transition: transform 0.2s;
 }
 
@@ -276,7 +309,7 @@
   width: 100%;
   font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   font-size: 17px;
-  font-weight: 800;
+  font-weight: var(--font-weight-heading);
   color: var(--text);
   background: var(--bg-alt);
   border: 1px solid var(--accent);

package/lib/public/css/user-settings.css

@@ -59,7 +59,7 @@
 
 .us-modal-title {
   font-size: 15px;
-  font-weight: 700;
+  font-weight: var(--font-weight-heading);
   color: var(--text);
   letter-spacing: 0.01em;
 }
@@ -196,7 +196,7 @@
 .us-section h2 {
   margin: 0 0 14px;
   font-size: 18px;
-  font-weight: 700;
+  font-weight: var(--font-weight-heading);
   color: var(--text);
   letter-spacing: -0.01em;
 }
@@ -204,7 +204,7 @@
 .us-section h3 {
   margin: 22px 0 10px;
   font-size: 12px;
-  font-weight: 700;
+  font-weight: var(--font-weight-heading);
   color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -228,6 +228,108 @@
   padding: 14px;
 }
 
+#user-settings .settings-theme-card .settings-field {
+  padding: 14px;
+}
+
+#user-settings .settings-theme-picker {
+  margin-top: 14px;
+}
+
+#user-settings .theme-picker {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+#user-settings .theme-picker-group {
+  min-width: 0;
+}
+
+#user-settings .theme-picker-header {
+  padding: 0 2px 8px;
+  font-size: 11px;
+  font-weight: var(--font-weight-heading);
+  color: var(--text-dimmer);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+#user-settings .theme-picker-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+#user-settings .theme-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 42px;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: var(--bg);
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+}
+
+#user-settings .theme-picker-item:hover {
+  border-color: var(--border);
+  color: var(--text);
+}
+
+#user-settings .theme-picker-item.active {
+  border-color: var(--accent);
+  background: var(--accent-8);
+  color: var(--text);
+}
+
+#user-settings .theme-swatches {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+#user-settings .theme-swatch {
+  width: 10px;
+  height: 16px;
+  border: 1px solid rgba(var(--overlay-rgb), 0.1);
+}
+
+#user-settings .theme-swatch:first-child {
+  border-radius: 4px 0 0 4px;
+}
+
+#user-settings .theme-swatch:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
+#user-settings .theme-picker-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#user-settings .theme-picker-check {
+  flex-shrink: 0;
+  color: var(--accent);
+  font-size: 14px;
+  opacity: 0;
+}
+
+#user-settings .theme-picker-item.active .theme-picker-check {
+  opacity: 1;
+}
+
 #user-settings .us-account-hero {
   display: flex;
   align-items: center;
@@ -282,7 +384,7 @@
 
 #user-settings .us-account-name {
   font-size: 17px;
-  font-weight: 700;
+  font-weight: var(--font-weight-heading);
   color: var(--text);
   line-height: 1.2;
   letter-spacing: -0.01em;
@@ -337,7 +439,7 @@
   display: block;
   margin-bottom: 4px;
   font-size: 13px;
-  font-weight: 700;
+  font-weight: var(--font-weight-ui);
   color: var(--text-secondary);
 }
 
@@ -518,7 +620,7 @@
   background: var(--accent);
   color: #fff;
   font-size: 13px;
-  font-weight: 600;
+  font-weight: var(--font-weight-ui);
   cursor: pointer;
 }
 
@@ -580,7 +682,7 @@
 #user-settings .settings-pin-form-title {
   margin-bottom: 8px;
   font-size: 12px;
-  font-weight: 700;
+  font-weight: var(--font-weight-heading);
   color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -673,7 +775,7 @@
 
 #user-settings .layout-option-label {
   font-size: 14px;
-  font-weight: 700;
+  font-weight: var(--font-weight-heading);
   color: var(--text);
 }
 
@@ -836,6 +938,10 @@
     grid-template-columns: 1fr;
   }
 
+  #user-settings .theme-picker {
+    grid-template-columns: 1fr;
+  }
+
   #user-settings .us-account-hero {
     align-items: flex-start;
   }

package/lib/public/index.html

@@ -11,10 +11,10 @@
   if(!isIOS){var l=document.createElement("link");l.rel="manifest";l.href="/manifest.json";document.head.appendChild(l)}
 })();
 </script>
-<meta name="theme-color" content="#282a36">
-<link rel="icon" type="image/png" href="favicon-banded.png">
+<meta name="theme-color" content="#171715">
+<link rel="icon" type="image/png" sizes="32x32" href="clay-studio-favicon-32.png">
 <link rel="apple-touch-icon" href="apple-touch-icon.png">
-<title>Clay</title>
+<title>Clay Studio</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Nunito:wght@700;800&display=swap" rel="stylesheet">
@@ -30,7 +30,7 @@
 (function(){try{var k="clay-theme-vars",v=localStorage.getItem(k),r=document.documentElement;if(v){var o=JSON.parse(v),p;for(p in o)r.style.setProperty(p,o[p]);var vt=localStorage.getItem(k.replace("-vars","-variant"));if(vt==="light"){r.classList.add("light-theme");r.classList.remove("dark-theme")}else{r.classList.add("dark-theme");r.classList.remove("light-theme")}var m=document.querySelector('meta[name="theme-color"]');if(m&&o["--bg"])m.setAttribute("content",o["--bg"])}else{var sl=window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches;if(sl){r.classList.add("light-theme");r.classList.remove("dark-theme")}}}catch(e){}})();
 </script>
 <script>if(window.navigator.standalone||window.matchMedia("(display-mode:standalone)").matches){document.documentElement.classList.add("pwa-standalone")}</script>
-<link rel="stylesheet" href="style.css?v=20260826a">
+<link rel="stylesheet" href="style.css?v=20260828-clay-theme1">
 <style>
 @media(max-width:768px){
   /* User messages: vertical stack, avatar on top, right-aligned */
@@ -101,9 +101,9 @@
 
   <!-- === Icon Strip === -->
   <div id="icon-strip">
-    <div class="icon-strip-home" title="Clay">
+    <div class="icon-strip-home" title="Clay Studio">
       <span class="icon-strip-pill"></span>
-      <img class="icon-strip-logo" src="icon-banded-76.png" width="38" height="38" alt="Clay">
+      <img class="icon-strip-logo" src="clay-studio-symbol.png" width="38" height="38" alt="Clay Studio">
     </div>
     <div class="icon-strip-separator"></div>
     <button type="button" class="icon-strip-hint" id="icon-strip-hint-project" data-switcher-mode="project" aria-label="Switch project"></button>
@@ -206,7 +206,7 @@
     <div id="sidebar-column">
       <div class="title-bar-sidebar">
         <button class="title-bar-project-dropdown" id="title-bar-project-dropdown">
-          <span class="title-bar-project-icon" id="title-bar-project-icon"></span>
+          <span class="title-bar-project-icon" id="title-bar-project-icon" aria-hidden="true"></span>
           <span class="title-bar-project-name" id="title-bar-project-name"></span>
           <i data-lucide="chevron-down" class="title-bar-chevron"></i>
         </button>
@@ -399,10 +399,13 @@
           <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
         </div>
       </div>
-      <div id="main-panels">
+    <div id="main-panels">
       <div id="app">
         <div id="connect-overlay">
-      <canvas id="ascii-logo-canvas"></canvas>
+      <div class="connect-brand">
+        <img class="connect-symbol" src="clay-studio-symbol.png" alt="">
+        <div class="connect-wordmark" role="img" aria-label="Clay Studio"></div>
+      </div>
       <p id="connect-overlay-msg">Connecting…</p>
     </div>
     <div id="sticky-notes-container" class="hidden"></div>
@@ -673,7 +676,7 @@
   <div id="mobile-tab-bar">
     <button class="mobile-tab" data-tab="chat" id="mob-tab-chat"><i data-lucide="message-square"></i><span class="mobile-tab-label">Chat</span></button>
     <button class="mobile-tab" data-tab="search" id="mob-tab-search"><i data-lucide="search"></i><span class="mobile-tab-label">Search</span></button>
-    <button class="mobile-tab-home" id="mobile-home-btn"><img src="/icon-banded-76.png" alt="Home" class="mobile-home-icon"></button>
+    <button class="mobile-tab-home" id="mobile-home-btn"><img src="/clay-studio-symbol.png" alt="Clay Studio home" class="mobile-home-icon"></button>
     <button class="mobile-tab" data-tab="tools" id="mob-tab-tools"><i data-lucide="wrench"></i><span class="mobile-tab-label">Tools</span></button>
     <button class="mobile-tab" data-tab="settings" id="mob-tab-settings"><i data-lucide="settings"></i><span class="mobile-tab-label">Settings</span></button>
   </div>
@@ -682,7 +685,18 @@
     <div class="file-viewer-header">
       <div class="file-viewer-tabbar">
         <div class="file-viewer-tabs" id="file-viewer-tabs" role="tablist"></div>
-        <div class="file-viewer-toolbar" aria-label="Editor actions">
+        <div class="file-viewer-window-actions" aria-label="Document viewer controls">
+          <button class="file-viewer-btn" id="file-viewer-fullscreen" title="Toggle fullscreen" aria-label="Toggle document viewer fullscreen"><i data-lucide="maximize-2"></i></button>
+          <button class="file-viewer-btn" id="file-viewer-close" title="Close viewer" aria-label="Close document viewer"><i data-lucide="x"></i></button>
+        </div>
+      </div>
+      <div class="file-viewer-breadcrumbs">
+        <div class="file-viewer-path" id="file-viewer-path" aria-label="Current file path"></div>
+        <span class="file-viewer-live-status hidden" id="file-viewer-live-status" aria-live="polite">
+          <span class="file-viewer-live-dot"></span>
+          <span class="file-viewer-live-label">Editing</span>
+        </span>
+        <div class="file-viewer-toolbar" aria-label="Current file actions">
           <button class="file-viewer-btn hidden" id="file-viewer-render" title="Toggle rendered view"><i data-lucide="book-open"></i></button>
           <button class="file-viewer-btn hidden" id="file-viewer-pdf" title="Export PDF"><i data-lucide="file-down"></i></button>
           <button class="file-viewer-btn hidden" id="file-viewer-slides" title="Present as slides" aria-label="Present Markdown as slides" aria-pressed="false"><i data-lucide="presentation"></i></button>
@@ -691,17 +705,8 @@
           <button class="file-viewer-btn" id="file-viewer-refresh" title="Refresh"><i data-lucide="refresh-cw"></i></button>
           <button class="file-viewer-btn" id="file-viewer-copy" title="Copy contents" aria-label="Copy contents"><i data-lucide="copy"></i></button>
           <button class="file-viewer-btn hidden" id="file-viewer-copy-formatted" title="Copy Markdown formatting" aria-label="Copy Markdown formatting"><i data-lucide="clipboard-copy"></i></button>
-          <button class="file-viewer-btn" id="file-viewer-fullscreen" title="Toggle fullscreen"><i data-lucide="maximize-2"></i></button>
-          <button class="file-viewer-btn" id="file-viewer-close" title="Close"><i data-lucide="x"></i></button>
         </div>
       </div>
-      <div class="file-viewer-breadcrumbs">
-        <div class="file-viewer-path" id="file-viewer-path" aria-label="Current file path"></div>
-        <span class="file-viewer-live-status hidden" id="file-viewer-live-status" aria-live="polite">
-          <span class="file-viewer-live-dot"></span>
-          <span class="file-viewer-live-label">Editing</span>
-        </span>
-      </div>
     </div>
     <div class="file-viewer-body" id="file-viewer-body"></div>
   </div>
@@ -957,7 +962,6 @@
       </div>
     </div>
     <div class="user-island-actions">
-      <button id="user-theme-toggle-btn" title="Themes" aria-label="Themes"><i data-lucide="palette"></i></button>
       <button id="user-settings-btn" title="User settings"><i data-lucide="settings"></i></button>
     </div>
   </div>
@@ -1079,6 +1083,13 @@
         <!-- Appearance section -->
         <div class="us-section" data-section="us-appearance">
           <h2>Appearance</h2>
+          <div class="settings-card settings-theme-card">
+            <div class="settings-field">
+              <div class="settings-label">Theme</div>
+              <div class="settings-hint">Choose the color palette used across Clay Studio.</div>
+              <div id="us-theme-picker" class="settings-theme-picker" aria-label="Theme selection"></div>
+            </div>
+          </div>
           <div class="settings-card">
             <div class="settings-label" style="margin-bottom:10px;">Chat layout</div>
             <div class="layout-switcher" id="us-layout-switcher">
@@ -1203,9 +1214,6 @@
             <option value="notifications">Notifications</option>
             <option value="security">Security</option>
           </optgroup>
-          <optgroup label="Defaults">
-            <option value="models">Model</option>
-          </optgroup>
           <optgroup label="Config">
             <option value="claudemd">Instructions</option>
             <option value="environment">Environment</option>
@@ -1229,9 +1237,6 @@
           <button class="settings-nav-item" data-section="notifications"><span>Notifications</span></button>
           <button class="settings-nav-item" data-section="security"><span>Security</span></button>
           <div class="settings-nav-separator"></div>
-          <div class="settings-nav-category">Defaults</div>
-          <button class="settings-nav-item" data-section="models"><span>Model</span></button>
-          <div class="settings-nav-separator"></div>
           <div class="settings-nav-category">Config</div>
           <button class="settings-nav-item" data-section="claudemd"><span>Instructions</span></button>
           <button class="settings-nav-item" data-section="environment"><span>Environment</span></button>
@@ -1328,55 +1333,6 @@
             </div>
           </div>
         </div>
-        <div class="server-settings-section" data-section="models">
-          <h2>Model</h2>
-          <p class="settings-hint" style="margin-bottom: 20px;">Configure which model to use and how Claude behaves during sessions.</p>
-          <div class="settings-card">
-            <div class="settings-field">
-              <label class="settings-label">Model</label>
-              <div class="settings-hint">Choose the Claude model to use. Larger models are slower but more capable.</div>
-              <div id="ss-model-list" class="settings-model-list"></div>
-            </div>
-          </div>
-          <div class="settings-card" id="ss-beta-card" style="display:none">
-            <div class="settings-field">
-              <label class="settings-label">Extended Context (Beta)</label>
-              <div class="settings-hint">Enable 1M token context window for Sonnet models. Allows processing much larger codebases and files, but may increase latency.</div>
-              <label class="settings-toggle-row ss-beta-toggle-row">
-                <div>
-                  <span class="settings-label">1M Context</span>
-                </div>
-                <input type="checkbox" id="ss-beta-1m">
-                <span class="toggle-track"><span class="toggle-thumb"></span></span>
-              </label>
-            </div>
-          </div>
-          <div class="settings-card">
-            <div class="settings-field">
-              <label class="settings-label">Mode</label>
-              <div class="settings-hint">Controls how Claude handles tool use and file edits.</div>
-              <div id="ss-mode-list" class="settings-model-list"></div>
-            </div>
-          </div>
-          <div class="settings-card" id="ss-effort-card">
-            <div class="settings-field">
-              <label class="settings-label">Effort</label>
-              <div class="settings-hint">Controls how much thinking effort Claude puts into responses. Higher effort means longer, more thorough responses.</div>
-              <div class="settings-btn-group" id="ss-effort-bar"></div>
-            </div>
-          </div>
-          <div class="settings-card" id="ss-thinking-card">
-            <div class="settings-field">
-              <label class="settings-label">Thinking</label>
-              <div class="settings-hint">Controls whether Claude shows its reasoning process. Budget mode lets you set a token limit.</div>
-              <div class="settings-btn-group" id="ss-thinking-bar"></div>
-              <div id="ss-thinking-budget-row" class="settings-budget-row" style="display:none">
-                <label class="settings-budget-label">Budget tokens</label>
-                <input id="ss-thinking-budget" type="number" class="settings-budget-input" min="1024" max="128000" step="1024" value="10000">
-              </div>
-            </div>
-          </div>
-        </div>
         <div class="server-settings-section" data-section="security">
           <h2>Security</h2>
           <div class="settings-card">

package/lib/public/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Clay",
+  "name": "Clay Studio",
   "short_name": "Clay",
   "id": "/",
   "start_url": "/",
@@ -17,11 +17,6 @@
       "src": "icon-512.png",
       "sizes": "512x512",
       "type": "image/png"
-    },
-    {
-      "src": "icon-mono.svg",
-      "sizes": "any",
-      "type": "image/svg+xml"
     }
   ]
 }

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

@@ -5,7 +5,6 @@ import { store } from './store.js';
 import { getWs, setWs } from './ws-ref.js';
 import { getStatusDot, getSendBtn } from './dom-refs.js';
 import { setSendBtnMode, blinkIO, setActivity } from './app-favicon.js';
-import { startLogoAnimation, stopLogoAnimation } from './ascii-logo.js';
 import { hasSendableContent } from './input.js';
 import { processMessage } from './app-messages.js';
 import { flushPendingExtMessages } from './app-misc.js';
@@ -45,7 +44,6 @@ export function initConnection() {
         if (connectOverlay) connectOverlay.classList.add("hidden");
         var updPill = document.getElementById("update-pill-wrap");
         if (updPill) updPill.classList.add("hidden");
-        stopLogoAnimation();
       } else {
         if (sendBtn) sendBtn.disabled = true;
         if (hasConnectedOnce && connectOverlay) {
@@ -53,7 +51,6 @@ export function initConnection() {
           if (overlayMessage) overlayMessage.textContent = "Reconnecting to server…";
         }
         if (connectOverlay) connectOverlay.classList.remove("hidden");
-        startLogoAnimation();
       }
     }
 

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

@@ -10,7 +10,7 @@ import { escapeHtml } from './utils.js';
 
 // --- Module-owned state ---
 var faviconLink, faviconOrigHref, faviconCanvas, faviconCtx, faviconImg, faviconImgReady;
-var BAND_COLORS = [[0,235,160],[0,200,220],[30,100,255],[88,50,255],[200,60,180],[255,90,50]];
+var pendingFaviconColor = null;
 var faviconAnimTimer = null, faviconAnimFrame = 0;
 var urgentBlinkTimer = null, urgentTitleTimer = null, savedTitle = null;
 var ioTimer = null;
@@ -27,11 +27,18 @@ export function initFavicon() {
   faviconImg = null;
   faviconImgReady = false;
 
-  // Load the banded favicon image for masking
+  // Load the brand symbol for status and attention variants.
   (function () {
     faviconImg = new Image();
-    faviconImg.onload = function () { faviconImgReady = true; };
-    faviconImg.src = (store.get('basePath') || "") + "favicon-banded.png";
+    faviconImg.onload = function () {
+      faviconImgReady = true;
+      if (pendingFaviconColor) {
+        var color = pendingFaviconColor;
+        pendingFaviconColor = null;
+        updateFavicon(color);
+      }
+    };
+    faviconImg.src = (store.get('basePath') || "") + "clay-studio-symbol.png";
   })();
 
   // Reset cached favicon href on theme change
@@ -46,17 +53,16 @@ export function updateFavicon(bgColor) {
     return;
   }
   if (!faviconOrigHref) faviconOrigHref = faviconLink.href;
-  // Simple solid-color favicon for non-animated states
+  if (!faviconImgReady) {
+    pendingFaviconColor = bgColor;
+    return;
+  }
   faviconCtx.clearRect(0, 0, 32, 32);
+  faviconCtx.drawImage(faviconImg, 0, 0, 32, 32);
   faviconCtx.fillStyle = bgColor;
   faviconCtx.beginPath();
-  faviconCtx.arc(16, 16, 14, 0, Math.PI * 2);
+  faviconCtx.arc(25, 25, 5, 0, Math.PI * 2);
   faviconCtx.fill();
-  faviconCtx.fillStyle = "#fff";
-  faviconCtx.font = "bold 22px Nunito, sans-serif";
-  faviconCtx.textAlign = "center";
-  faviconCtx.textBaseline = "middle";
-  faviconCtx.fillText("C", 16, 17);
   faviconLink.href = faviconCanvas.toDataURL("image/png");
 }
 
@@ -64,24 +70,12 @@ export function drawFaviconAnimFrame() {
   if (store.get('paneMode')) return;
   if (!faviconImgReady) return;
   var S = 32;
-  var bands = BAND_COLORS.length;
-  var totalFrames = bands * 2;
-  var offset = faviconAnimFrame % totalFrames;
-
-  // Draw flowing color bands as background
   faviconCtx.clearRect(0, 0, S, S);
-  var bandH = Math.ceil(S / bands);
-  for (var i = 0; i < bands + totalFrames; i++) {
-    var ci = ((i + offset) % bands + bands) % bands;
-    var c = BAND_COLORS[ci];
-    faviconCtx.fillStyle = "rgb(" + c[0] + "," + c[1] + "," + c[2] + ")";
-    faviconCtx.fillRect(0, (i - offset) * bandH, S, bandH);
-  }
-
-  // Use the banded C image as a mask -- draw it on top with destination-in
-  faviconCtx.globalCompositeOperation = "destination-in";
   faviconCtx.drawImage(faviconImg, 0, 0, S, S);
-  faviconCtx.globalCompositeOperation = "source-over";
+  faviconCtx.fillStyle = faviconAnimFrame % 2 === 0 ? "#07e5a3" : "#5857fc";
+  faviconCtx.beginPath();
+  faviconCtx.arc(25, 7, 5, 0, Math.PI * 2);
+  faviconCtx.fill();
 
   faviconLink.href = faviconCanvas.toDataURL("image/png");
   faviconAnimFrame++;
@@ -177,8 +171,7 @@ export function startUrgentBlink() {
   savedTitle = document.title;
   if (!faviconOrigHref && faviconLink) faviconOrigHref = faviconLink.href;
   faviconAnimFrame = 0;
-  // Color flow animation at ~12fps
-  urgentBlinkTimer = setInterval(drawFaviconAnimFrame, 83);
+  urgentBlinkTimer = setInterval(drawFaviconAnimFrame, 500);
   // Title blink separately
   var titleTick = 0;
   urgentTitleTimer = setInterval(function () {