clay-server 2.5.0 → 2.5.1

package/lib/public/css/base.css

@@ -74,75 +74,75 @@
 ::-webkit-scrollbar-thumb:hover { background: rgba(var(--overlay-rgb),0.25); }
 
 :root {
-  --bg: #1F1B1B;
-  --bg-alt: #2A2525;
-  --text: #E5DED8;
-  --text-secondary: #C2BAB4;
-  --text-muted: #A09590;
-  --text-dimmer: #7D7370;
-  --accent: #FE7150;
-  --accent-hover: #FE8265;
-  --accent-bg: rgba(254, 113, 80, 0.12);
-  --code-bg: #1A1717;
-  --border: #352F2F;
-  --border-subtle: #282323;
-  --input-bg: #302A2A;
-  --user-bubble: #322C2C;
-  --error: #F74728;
-  --success: #09E5A3;
-  --warning: #E5A040;
-  --accent-8: rgba(254, 113, 80, 0.08);
-  --accent-12: rgba(254, 113, 80, 0.12);
-  --accent-15: rgba(254, 113, 80, 0.15);
-  --accent-20: rgba(254, 113, 80, 0.20);
-  --accent-25: rgba(254, 113, 80, 0.25);
-  --accent-30: rgba(254, 113, 80, 0.30);
-  --accent2: #5857FC;
-  --accent2-hover: #6C6BFC;
-  --accent2-bg: rgba(88, 87, 252, 0.12);
-  --accent2-8: rgba(88, 87, 252, 0.08);
-  --accent2-12: rgba(88, 87, 252, 0.12);
-  --accent2-15: rgba(88, 87, 252, 0.15);
-  --accent2-20: rgba(88, 87, 252, 0.20);
-  --accent2-25: rgba(88, 87, 252, 0.25);
-  --accent2-30: rgba(88, 87, 252, 0.30);
-  --error-8: rgba(247, 71, 40, 0.08);
-  --error-12: rgba(247, 71, 40, 0.12);
-  --error-15: rgba(247, 71, 40, 0.15);
-  --error-25: rgba(247, 71, 40, 0.25);
-  --success-8: rgba(9, 229, 163, 0.08);
-  --success-12: rgba(9, 229, 163, 0.12);
-  --success-15: rgba(9, 229, 163, 0.15);
-  --success-25: rgba(9, 229, 163, 0.25);
-  --warning-bg: rgba(229, 160, 64, 0.12);
+  --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;
+  --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: #7D7370;
-  --hl-keyword: #D085CC;
-  --hl-string: #09E5A3;
-  --hl-number: #FE7150;
-  --hl-function: #6BA0E5;
-  --hl-variable: #F74728;
-  --hl-type: #E5A040;
-  --hl-constant: #FE7150;
-  --hl-tag: #F74728;
-  --hl-attr: #6BA0E5;
-  --hl-regexp: #4EC9B0;
-  --hl-meta: #D09558;
-  --hl-builtin: #FE7150;
-  --hl-symbol: #D09558;
-  --hl-addition: #09E5A3;
-  --hl-deletion: #F74728;
-  --sidebar-bg: #1C1818;
-  --sidebar-hover: #252020;
-  --sidebar-active: #302A2A;
+  --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;
+  --sidebar-bg: #242631;
+  --sidebar-hover: #2f2f3f;
+  --sidebar-active: #3d3e51;
   --safe-top: env(safe-area-inset-top, 0px);
   --safe-bottom: env(safe-area-inset-bottom, 0px);
   --content-width: 760px;
 }
 
 ::selection {
-  background: rgba(9, 229, 163, 0.25);
+  background: rgba(80, 250, 123, 0.25);
 }
 
 html, body {

package/lib/public/css/mobile-nav.css

@@ -16,12 +16,12 @@
     bottom: 0;
     left: 0;
     right: 0;
-    height: 56px;
+    height: calc(56px + var(--safe-bottom));
     padding-bottom: var(--safe-bottom);
     background: var(--bg);
     border-top: 1px solid var(--border);
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-around;
     z-index: 200;
   }

package/lib/public/css/overlays.css

@@ -11,18 +11,19 @@
   position: relative;
 }
 
-/* --- Onboarding banner --- */
+/* --- Onboarding banner (sits above #top-bar) --- */
 #onboarding-banner {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 8px 16px;
+  padding: 6px 16px;
   background: var(--accent-8);
   border-bottom: 1px solid var(--accent-15);
   font-size: 12px;
   color: var(--text-secondary);
+  z-index: 20;
 }
 
 #onboarding-banner.hidden { display: none; }
@@ -66,19 +67,20 @@
 #onboarding-banner-close .lucide { width: 14px; height: 14px; }
 #onboarding-banner-close:hover { color: var(--text-secondary); }
 
-/* --- Update banner --- */
+/* --- Update / Announce banner (sits above #top-bar, full width) --- */
 #update-banner {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 8px 16px;
+  padding: 6px 16px;
   background: var(--success-8);
   border-bottom: 1px solid var(--success-15);
   font-size: 12px;
   color: var(--text-secondary);
   position: relative;
+  z-index: 20;
 }
 
 #update-banner.hidden { display: none; }
@@ -196,19 +198,20 @@
 #update-banner-close .lucide { width: 14px; height: 14px; }
 #update-banner-close:hover { color: var(--text-secondary); }
 
-/* --- Skip permissions banner --- */
+/* --- Skip permissions banner (sits above #top-bar) --- */
 #skip-perms-banner {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 7px 16px;
+  padding: 6px 16px;
   background: var(--error-12);
   border-bottom: 1px solid var(--error-25);
   font-size: 12px;
   font-weight: 500;
   color: var(--error);
+  z-index: 20;
 }
 
 #skip-perms-banner.hidden { display: none; }

package/lib/public/css/sidebar.css

@@ -560,7 +560,7 @@
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: var(--accent2);
+  background: var(--success);
   color: #fff;
   font-family: "Nunito", sans-serif;
   font-size: 15px;
@@ -618,102 +618,6 @@
   color: var(--text-secondary);
 }
 
-.user-island-chip {
-  --chip-star: #FFE500;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 4px 11px 4px 8px;
-  border-radius: 99px;
-  border: 1px solid var(--accent2-30);
-  background: var(--accent2);
-  color: #fff;
-  font-family: inherit;
-  font-size: 11px;
-  font-weight: 700;
-  text-decoration: none;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  white-space: nowrap;
-  overflow: hidden;
-  box-shadow:
-    0 1px 4px color-mix(in srgb, var(--accent2), black 75%),
-    inset 0 1px 0 rgba(255, 255, 255, 0.06);
-}
-
-/* shimmer sweep */
-.user-island-chip::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -120%;
-  width: 60%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
-  animation: chip-shimmer 5s ease-in-out 2s infinite;
-  pointer-events: none;
-}
-
-@keyframes chip-shimmer {
-  0%, 75%, 100% { left: -120%; }
-  35% { left: 160%; }
-}
-
-.chip-octocat {
-  width: 13px;
-  height: 13px;
-  flex-shrink: 0;
-  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
-  transition: filter 0.3s ease;
-}
-
-.chip-star {
-  color: var(--chip-star);
-  font-size: 9px;
-  line-height: 1;
-  text-shadow: 0 0 5px color-mix(in srgb, var(--chip-star), transparent 60%);
-  animation: chip-star-pulse 3s ease-in-out infinite;
-  transition: text-shadow 0.3s ease;
-}
-
-@keyframes chip-star-pulse {
-  0%, 100% { opacity: 0.75; text-shadow: 0 0 4px color-mix(in srgb, var(--chip-star), transparent 70%); }
-  50% { opacity: 1; text-shadow: 0 0 8px color-mix(in srgb, var(--chip-star), transparent 35%); }
-}
-
-.chip-label {
-  color: #fff;
-  letter-spacing: 0.01em;
-}
-
-.user-island-chip:hover {
-  border-color: color-mix(in srgb, var(--chip-star), transparent 55%);
-  background: var(--accent2-hover);
-  box-shadow:
-    0 2px 10px color-mix(in srgb, var(--chip-star), transparent 88%),
-    0 1px 4px color-mix(in srgb, var(--accent2), black 65%),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
-  transform: translateY(-1px);
-}
-
-.user-island-chip:hover .chip-octocat {
-  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
-}
-
-.user-island-chip:hover .chip-star {
-  text-shadow: 0 0 10px color-mix(in srgb, var(--chip-star), transparent 10%);
-  animation: none;
-  opacity: 1;
-}
-
-.user-island-chip:active {
-  transform: translateY(0);
-  box-shadow:
-    0 1px 3px color-mix(in srgb, var(--accent2), black 65%),
-    inset 0 1px 2px rgba(0, 0, 0, 0.15);
-}
-
 #layout.sidebar-collapsed #user-island .user-island-info,
 #layout.sidebar-collapsed #user-island .user-island-actions {
   display: none;

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

@@ -93,8 +93,9 @@
 
 .title-bar-project-name {
   width: 100%;
-  font-size: 13px;
-  font-weight: 600;
+  font-family: "Nunito", sans-serif;
+  font-size: 15px;
+  font-weight: 800;
   color: var(--text);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -137,6 +138,13 @@
     height: calc(32px + var(--safe-top));
   }
 
+  .top-bar-actions {
+    top: auto;
+    bottom: 0;
+    height: 32px;
+    transform: none;
+  }
+
   #sidebar-column {
     width: 0 !important;
     min-width: 0 !important;

package/lib/public/index.html

@@ -21,6 +21,22 @@
 </head>
 <body>
 <div id="layout">
+  <!-- === Announce Bars (above top bar, full width) === -->
+  <div id="update-banner" class="hidden">
+    <span class="update-banner-text"><i data-lucide="arrow-up-circle"></i> A new version of Clay is available: <strong id="update-version"></strong></span>
+    <button id="update-now">Update now</button>
+    <button id="update-how" title="Manual update instructions">?</button>
+    <button id="update-banner-close" aria-label="Dismiss"><i data-lucide="x"></i></button>
+  </div>
+  <div id="onboarding-banner" class="hidden">
+    <span class="onboarding-banner-text" id="onboarding-banner-text"></span>
+    <button id="onboarding-banner-close" aria-label="Dismiss"><i data-lucide="x"></i></button>
+  </div>
+  <div id="skip-perms-banner" class="hidden">
+    <i data-lucide="shield-off"></i>
+    <span>Skip permissions mode is active. All tool executions are auto-approved.</span>
+  </div>
+
   <!-- === Top Bar (full width, forms reverse-ㄱ with icon strip) === -->
   <div id="top-bar">
     <a href="https://github.com/chadbyte/claude-relay" target="_blank" rel="noopener" class="top-bar-title"><img class="top-bar-icon" src="favicon.svg" width="16" height="16" alt="">Clay</a>
@@ -130,21 +146,6 @@
       </div>
       <div id="main-panels">
       <div id="app">
-        <div id="update-banner" class="hidden">
-          <span class="update-banner-text"><i data-lucide="arrow-up-circle"></i> A new version of Clay is available: <strong id="update-version"></strong></span>
-          <button id="update-now">Update now</button>
-          <button id="update-how" title="Manual update instructions">?</button>
-          <button id="update-banner-close" aria-label="Dismiss"><i data-lucide="x"></i></button>
-        </div>
-        <div id="onboarding-banner" class="hidden">
-          <span class="onboarding-banner-text" id="onboarding-banner-text"></span>
-          <button id="onboarding-banner-close" aria-label="Dismiss"><i data-lucide="x"></i></button>
-        </div>
-        <div id="skip-perms-banner" class="hidden">
-          <i data-lucide="shield-off"></i>
-          <span>Skip permissions mode is active. All tool executions are auto-approved.</span>
-        </div>
-
         <div id="connect-overlay">
       <img class="connect-logo" src="favicon.svg" width="48" height="48" alt="Clay">
       <span class="connect-wordmark">Clay</span>
@@ -352,7 +353,6 @@
       <span class="user-island-name">Clay <span id="footer-version" class="footer-version"></span></span>
     </div>
     <div class="user-island-actions">
-      <a href="https://github.com/chadbyte/claude-relay" target="_blank" rel="noopener" class="user-island-chip" title="Star on GitHub"><svg class="chip-octocat" viewBox="0 0 16 16" fill="white" width="13" height="13"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg><span class="chip-star">★</span><span class="chip-label">Star Clay</span></a>
     </div>
   </div>
 

package/lib/public/modules/theme.js

@@ -55,80 +55,79 @@ function luminance(hex) {
   return (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) / 255;
 }
 
-// --- Clay default: exact CSS values for initial render (before API loads) ---
-var clayExactVars = {
-  "--bg": "#1F1B1B",
-  "--bg-alt": "#2A2525",
-  "--text": "#E5DED8",
-  "--text-secondary": "#C2BAB4",
-  "--text-muted": "#A09590",
-  "--text-dimmer": "#7D7370",
-  "--accent": "#FE7150",
-  "--accent-hover": "#FE8265",
-  "--accent-bg": "rgba(254, 113, 80, 0.12)",
-  "--code-bg": "#1A1717",
-  "--border": "#352F2F",
-  "--border-subtle": "#282323",
-  "--input-bg": "#302A2A",
-  "--user-bubble": "#322C2C",
-  "--error": "#F74728",
-  "--success": "#09E5A3",
-  "--warning": "#E5A040",
-  "--sidebar-bg": "#1C1818",
-  "--sidebar-hover": "#252020",
-  "--sidebar-active": "#302A2A",
-  "--accent-8": "rgba(254, 113, 80, 0.08)",
-  "--accent-12": "rgba(254, 113, 80, 0.12)",
-  "--accent-15": "rgba(254, 113, 80, 0.15)",
-  "--accent-20": "rgba(254, 113, 80, 0.20)",
-  "--accent-25": "rgba(254, 113, 80, 0.25)",
-  "--accent-30": "rgba(254, 113, 80, 0.30)",
-  "--accent2": "#5857FC",
-  "--accent2-hover": "#6C6BFC",
-  "--accent2-bg": "rgba(88, 87, 252, 0.12)",
-  "--accent2-8": "rgba(88, 87, 252, 0.08)",
-  "--accent2-12": "rgba(88, 87, 252, 0.12)",
-  "--accent2-15": "rgba(88, 87, 252, 0.15)",
-  "--accent2-20": "rgba(88, 87, 252, 0.20)",
-  "--accent2-25": "rgba(88, 87, 252, 0.25)",
-  "--accent2-30": "rgba(88, 87, 252, 0.30)",
-  "--error-8": "rgba(247, 71, 40, 0.08)",
-  "--error-12": "rgba(247, 71, 40, 0.12)",
-  "--error-15": "rgba(247, 71, 40, 0.15)",
-  "--error-25": "rgba(247, 71, 40, 0.25)",
-  "--success-8": "rgba(9, 229, 163, 0.08)",
-  "--success-12": "rgba(9, 229, 163, 0.12)",
-  "--success-15": "rgba(9, 229, 163, 0.15)",
-  "--success-25": "rgba(9, 229, 163, 0.25)",
-  "--warning-bg": "rgba(229, 160, 64, 0.12)",
+// --- 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",
+  "--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": "#7D7370",
-  "--hl-keyword": "#D085CC",
-  "--hl-string": "#09E5A3",
-  "--hl-number": "#FE7150",
-  "--hl-function": "#6BA0E5",
-  "--hl-variable": "#F74728",
-  "--hl-type": "#E5A040",
-  "--hl-constant": "#FE7150",
-  "--hl-tag": "#F74728",
-  "--hl-attr": "#6BA0E5",
-  "--hl-regexp": "#4EC9B0",
-  "--hl-meta": "#D09558",
-  "--hl-builtin": "#FE7150",
-  "--hl-symbol": "#D09558",
-  "--hl-addition": "#09E5A3",
-  "--hl-deletion": "#F74728"
+  "--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"
 };
 
-// Minimal clay dark palette for getThemeColor before API loads
-var clayFallback = {
-  name: "Clay Dark", variant: "dark",
-  base00: "1F1B1B", base01: "2A2525", base02: "352F2F", base03: "7D7370",
-  base04: "A09590", base05: "C2BAB4", base06: "E5DED8", base07: "FFFFFF",
-  base08: "F74728", base09: "FE7150", base0A: "E5A040", base0B: "09E5A3",
-  base0C: "4EC9B0", base0D: "6BA0E5", base0E: "D085CC", base0F: "D09558",
-  accent2: "5857FC"
+// 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"
 };
 
 // --- Compute CSS variables from a base16 palette ---
@@ -243,7 +242,7 @@ function computeTerminalTheme(theme) {
 }
 
 function computeMermaidVars(theme) {
-  var vars = currentThemeId === "clay" ? clayExactVars : computeVars(theme);
+  var vars = currentThemeId === "dracula" ? defaultExactVars : computeVars(theme);
   var isLight = theme.variant === "light";
   return {
     darkMode: !isLight,
@@ -262,7 +261,7 @@ function computeMermaidVars(theme) {
 var themes = {};
 var customSet = {};   // ids that came from ~/.clay/themes/
 var themesLoaded = false;
-var currentThemeId = "clay";
+var currentThemeId = "dracula";
 var changeCallbacks = [];
 var STORAGE_KEY = "clay-theme";
 var MODE_KEY = "clay-mode";        // "light" | "dark" | null (system)
@@ -271,7 +270,7 @@ var SKIN_KEY = "clay-skin";        // theme id within current variant pair
 // --- Helpers ---
 
 function getTheme(id) {
-  return themes[id] || (id === "clay" ? clayFallback : null);
+  return themes[id] || (id === "dracula" ? defaultFallback : null);
 }
 
 function isCustom(id) {
@@ -281,7 +280,7 @@ function isCustom(id) {
 // --- Public API ---
 
 export function getCurrentTheme() {
-  return getTheme(currentThemeId) || clayFallback;
+  return getTheme(currentThemeId) || defaultFallback;
 }
 
 export function getThemeId() {
@@ -294,7 +293,7 @@ export function getThemeColor(baseKey) {
 }
 
 export function getComputedVar(varName) {
-  if (currentThemeId === "clay" && !themesLoaded) return clayExactVars[varName] || "";
+  if (currentThemeId === "dracula" && !themesLoaded) return defaultExactVars[varName] || "";
   var theme = getCurrentTheme();
   var vars = computeVars(theme);
   return vars[varName] || "";
@@ -322,11 +321,11 @@ export function getThemes() {
 
 export function applyTheme(themeId, fromPicker) {
   var theme = getTheme(themeId);
-  if (!theme) themeId = "clay";
+  if (!theme) themeId = "dracula";
   theme = getTheme(themeId);
   currentThemeId = themeId;
 
-  var vars = (themeId === "clay" && !themesLoaded) ? clayExactVars : computeVars(theme);
+  var vars = (themeId === "dracula" && !themesLoaded) ? defaultExactVars : computeVars(theme);
   var root = document.documentElement;
   var varNames = Object.keys(vars);
   for (var i = 0; i < varNames.length; i++) {
@@ -409,8 +408,8 @@ function loadThemes() {
       }
     }
 
-    // Ensure clay always exists
-    if (!themes.clay) themes.clay = clayFallback;
+    // Ensure dracula always exists
+    if (!themes.dracula) themes.dracula = defaultFallback;
 
     themesLoaded = true;
 
@@ -418,11 +417,11 @@ function loadThemes() {
     if (pickerEl) rebuildPicker();
 
     // Always apply the current theme now that real data is loaded
-    // (before this, only clayExactVars was used as fallback)
+    // (before this, only defaultExactVars was used as fallback)
     applyTheme(currentThemeId);
   }).catch(function () {
-    // API unavailable — keep clay fallback
-    themes.clay = clayFallback;
+    // API unavailable — keep dracula fallback
+    themes.dracula = defaultFallback;
     themesLoaded = true;
   });
 }
@@ -468,12 +467,12 @@ function themeIdForMode(mode) {
 
   // Default skin pair: clay (dark) / clay-light (light)
   if (!skin) {
-    return mode === "light" ? "clay-light" : "clay";
+    return mode === "light" ? "ayu-light" : "dracula";
   }
 
   // Custom skin — try to find the counterpart
   var current = getTheme(skin);
-  if (!current) return mode === "light" ? "clay-light" : "clay";
+  if (!current) return mode === "light" ? "ayu-light" : "dracula";
 
   // Already the right variant?
   if (current.variant === mode) return skin;
@@ -486,10 +485,10 @@ function themeIdForMode(mode) {
 
   if (mode === "light") {
     if (lightId && themes[lightId]) return lightId;
-    return "clay-light";
+    return "ayu-light";
   } else {
     if (darkId && themes[darkId]) return darkId;
-    return "clay";
+    return "dracula";
   }
 }
 
@@ -595,8 +594,8 @@ function buildPickerContent() {
     var idx = arr.indexOf(pinId);
     if (idx > 0) { arr.splice(idx, 1); arr.unshift(pinId); }
   }
-  pinFirst(darkIds, "clay");
-  pinFirst(lightIds, "clay-light");
+  pinFirst(darkIds, "dracula");
+  pinFirst(lightIds, "ayu-light");
 
   // Dark section
   if (darkIds.length > 0) {
@@ -682,7 +681,7 @@ export function initTheme() {
   } else {
     // No saved theme — use system mode
     var mode = getSystemMode();
-    currentThemeId = mode === "light" ? "clay-light" : "clay";
+    currentThemeId = mode === "light" ? "ayu-light" : "dracula";
   }
 
   // Load all themes from server, then apply properly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Web UI for Claude Code. Any device. Push notifications.",
   "bin": {
     "clay-server": "./bin/cli.js"