clay-server 3.6.0-beta.1 → 3.6.0

package/lib/public/css/messages.css

@@ -177,8 +177,7 @@
 /* --- Delegated work-order card ------------------------------------- */
 /* Self-contained: the generic bubble avatar/name/time are hidden and the
    identity lives in the card's own header strip. The body stays on a
-   NEUTRAL background -- accent only touches the header and the top rule,
-   so long technical briefs read like a document, not a tinted bubble. */
+   neutral background, with a restrained routing color for metadata. */
 .msg-user-delegated .dm-bubble-avatar,
 .msg-user-delegated .dm-bubble-header {
   display: none;
@@ -189,7 +188,7 @@
   overflow: hidden;
   background: var(--bg);
   border: 1px solid var(--border);
-  border-top: 2px solid var(--accent);
+  border-top: 1px solid color-mix(in srgb, var(--link) 55%, var(--border));
   border-radius: 12px;
   max-width: min(720px, 100%);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 4px 14px rgba(0, 0, 0, 0.08);
@@ -201,7 +200,7 @@
   gap: 10px;
   padding: 10px 14px;
   background: linear-gradient(to bottom,
-    color-mix(in srgb, var(--accent) 7%, var(--bg-alt)),
+    color-mix(in srgb, var(--link) 3%, var(--bg-alt)),
     var(--bg-alt));
   border-bottom: 1px solid var(--border-subtle);
 }
@@ -225,7 +224,7 @@
   font-weight: 700;
   letter-spacing: 0.09em;
   text-transform: uppercase;
-  color: var(--accent);
+  color: color-mix(in srgb, var(--link) 68%, var(--text-secondary));
   line-height: 1;
 }
 
@@ -277,8 +276,8 @@
 }
 .msg-user-delegated .delegated-brief li { margin: 3px 0; }
 .msg-user-delegated .delegated-brief li::marker {
-  color: var(--accent);
-  font-weight: 650;
+  color: color-mix(in srgb, var(--link) 52%, var(--text-muted));
+  font-weight: 600;
 }
 
 .msg-user-delegated .dm-bubble-avatar-other {
@@ -286,8 +285,8 @@
 }
 
 .msg-user-delegated .dm-bubble-name {
-  color: var(--accent);
-  font-weight: 650;
+  color: color-mix(in srgb, var(--link) 62%, var(--text-secondary));
+  font-weight: 600;
 }
 
 /* --- User message action bar --- */
@@ -393,6 +392,7 @@
 
 .md-content {
   font-size: 15px;
+  font-weight: var(--font-weight-body);
   line-height: 1.7;
   word-break: break-word;
   color: var(--text);
@@ -477,14 +477,17 @@ pre:hover .code-copy-btn { opacity: 1; }
   border-radius: 0;
 }
 
-.md-content strong { font-weight: 600; }
+.md-content strong { font-weight: var(--font-weight-heading); }
 .md-content em { font-style: italic; font-synthesis: style; }
 
 .md-content a {
-  color: var(--accent);
+  color: var(--link);
   text-decoration: none;
 }
-.md-content a:hover { text-decoration: underline; }
+.md-content a:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
 
 .md-content ul, .md-content ol {
   padding-left: 24px;
@@ -1725,7 +1728,7 @@ pre.mermaid-error {
 }
 
 .dm-msg-name {
-  font-weight: 700;
+  font-weight: var(--font-weight-heading);
   font-size: 15px;
   color: var(--text);
 }
@@ -1856,7 +1859,7 @@ pre.mermaid-error {
 
 .dm-header-name {
   font-size: 15px;
-  font-weight: 700;
+  font-weight: var(--font-weight-heading);
   color: #fff;
   white-space: nowrap;
   overflow: hidden;

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

@@ -113,9 +113,9 @@
   .mobile-home-icon {
     width: 28px;
     height: 28px;
-    border-radius: 8px;
-    transition: transform 0.1s, filter 0.2s;
-    filter: grayscale(1) brightness(1.3) opacity(0.5);
+    object-fit: contain;
+    transition: transform 0.1s, opacity 0.2s;
+    opacity: 0.55;
   }
 
   /* Alerts badge (red) */
@@ -124,11 +124,11 @@
   }
 
   .mobile-tab-home.active .mobile-home-icon {
-    filter: none;
+    opacity: 1;
   }
 
   .mobile-tab-home:active .mobile-home-icon {
-    filter: none;
+    opacity: 1;
     transform: scale(0.92);
   }
 

package/lib/public/css/overlays.css

@@ -1243,7 +1243,7 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: #000;
+  background: var(--bg);
   z-index: 999;
   transition: opacity 0.6s ease;
 }
@@ -1253,15 +1253,67 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
   pointer-events: none;
 }
 
-#ascii-logo-canvas {
-  width: 800px;
-  height: 400px;
+.connect-brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: clamp(0.65rem, 1.2vw, 0.9rem);
+  animation: connect-brand-breathe 3.8s ease-in-out infinite;
+}
+
+.connect-symbol {
+  width: clamp(58px, 6vw, 82px);
+  height: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 12px 28px rgb(88 87 252 / 0.12));
+}
+
+.connect-wordmark {
+  width: clamp(155px, 18vw, 238px);
+  aspect-ratio: 4611 / 1531;
+  background: linear-gradient(
+    105deg,
+    var(--brand-indigo) 18%,
+    var(--brand-indigo) 42%,
+    var(--brand-green) 50%,
+    var(--brand-indigo) 58%,
+    var(--brand-indigo) 82%
+  );
+  background-size: 260% 100%;
+  -webkit-mask: url("../clay-studio-wordmark.svg?v=400") center / contain no-repeat;
+  mask: url("../clay-studio-wordmark.svg?v=400") center / contain no-repeat;
+  animation: connect-wordmark-shimmer 6.4s ease-in-out infinite;
 }
 
 #connect-overlay-msg {
-  color: #555;
+  color: var(--text-dimmer);
   font-family: var(--font-mono);
   font-size: 0.85rem;
-  margin-top: 1.2rem;
+  margin-top: 1.35rem;
   letter-spacing: 0.03em;
 }
+
+@keyframes connect-brand-breathe {
+  0%, 100% { opacity: 0.76; transform: scale(0.992); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes connect-wordmark-shimmer {
+  0%, 18% { background-position: 100% 50%; }
+  58%, 100% { background-position: -100% 50%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .connect-brand,
+  .connect-wordmark {
+    animation: none;
+  }
+
+  .connect-brand {
+    opacity: 0.92;
+  }
+
+  .connect-wordmark {
+    background-position: 50% 50%;
+  }
+}

package/lib/public/css/pane.css

@@ -26,7 +26,6 @@ body.pane-mode #sticky-notes-container {
 body.pane-mode #file-viewer { display: none !important; }
 
 body.pane-mode #connect-overlay { background: var(--bg); }
-body.pane-mode #connect-overlay #ascii-logo-canvas { display: none; }
 body.pane-mode #connect-overlay-msg { color: var(--text-dimmer); }
 
 body.pane-mode .notif-banner-container {

package/lib/public/css/session-actions.css

@@ -21,6 +21,12 @@
   border-color: var(--border);
 }
 
+#header-session-actions-btn:focus { outline: none; }
+#header-session-actions-btn:focus-visible {
+  border-color: color-mix(in srgb, var(--link) 48%, var(--border));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 18%, transparent);
+}
+
 #header-session-actions-btn.hidden { display: none; }
 #header-session-actions-btn .lucide { width: 16px; height: 16px; }
 
@@ -68,14 +74,14 @@
   border: 1px solid var(--border-subtle);
   border-radius: 8px;
   background: rgba(var(--overlay-rgb), 0.035);
-  color: var(--accent2);
+  color: color-mix(in srgb, var(--accent2) 38%, var(--text-secondary));
 }
 
 .session-actions-row-icon .lucide { width: 15px; height: 15px; }
 .session-actions-row-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
 .session-actions-row-copy strong { font-size: 12px; font-weight: 750; }
-.session-actions-row-copy > span { color: var(--text-dimmer); font-size: 10px; line-height: 1.25; }
-.session-actions-row-chevron { color: var(--text-dimmer); }
+.session-actions-row-copy > span { color: var(--text-muted); font-size: 11px; line-height: 1.35; }
+.session-actions-row-chevron { color: var(--text-muted); }
 .session-actions-row-chevron .lucide { width: 13px; height: 13px; }
 
 .handoff-modal { width: min(420px, calc(100vw - 32px)); }

package/lib/public/css/sidebar.css

@@ -67,7 +67,7 @@
 
 .project-list-title {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: var(--font-weight-ui);
   color: var(--text-dimmer);
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -129,7 +129,7 @@
 }
 
 .project-list-item.current .pd-name {
-  font-weight: 600;
+  font-weight: var(--font-weight-ui);
 }
 
 .pd-name {
@@ -266,7 +266,7 @@
 
 .sidebar-section-title {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: var(--font-weight-ui);
   color: var(--text-dimmer);
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -275,7 +275,7 @@
 /* --- Section labels --- */
 .sidebar-section-label {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: var(--font-weight-ui);
   color: var(--text-dimmer);
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -300,6 +300,7 @@
 }
 .sidebar-tools-header .sidebar-section-label {
   padding: 0;
+  color: var(--text-muted);
 }
 
 /* Small shortcut-pill for the Cmd/Ctrl+O hotkey overlay. Mirrors the
@@ -398,33 +399,55 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
-  min-height: 58px;
-  padding: 6px 2px;
+  gap: 5px;
+  min-height: 60px;
+  padding: 5px 2px;
   border-radius: 10px;
   border: none;
-  background: rgba(var(--overlay-rgb), 0.025);
-  color: var(--text-muted);
+  background: transparent;
+  color: var(--text-secondary);
   font-family: inherit;
   font-size: 10px;
   font-weight: 500;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
+  transition: background 0.15s, color 0.15s;
+}
+.palette-tile > .lucide {
+  box-sizing: content-box;
+  width: 16px;
+  height: 16px;
+  padding: 6px;
+  border-radius: 9px;
+  background: var(--bg);
+  color: var(--text-muted);
+  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.1);
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
 }
-.palette-tile .lucide { width: 16px; height: 16px; flex-shrink: 0; }
 .palette-tile:hover {
-  background: rgba(var(--overlay-rgb), 0.08);
+  background: rgba(var(--overlay-rgb), 0.035);
+  color: var(--text);
+}
+.palette-tile:hover > .lucide {
+  background: var(--bg-alt);
   color: var(--text-secondary);
-  box-shadow: 0 2px 10px rgba(var(--shadow-rgb), 0.08);
+  box-shadow: 0 3px 8px rgba(var(--shadow-rgb), 0.14);
+  transform: translateY(-1px);
 }
 .palette-tile.active {
-  background: rgba(var(--overlay-rgb), 0.08);
+  background: rgba(var(--overlay-rgb), 0.035);
+  color: var(--text);
+}
+.palette-tile.active > .lucide {
   color: var(--text);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--link) 52%, var(--border)),
+    0 2px 6px rgba(var(--shadow-rgb), 0.12);
 }
 .palette-tile .tool-btn-label {
-  font-size: 10px;
+  font-size: 10.5px;
   font-weight: 500;
-  line-height: 1.15;
+  line-height: 1.2;
   text-align: center;
   max-width: 100%;
   overflow: hidden;
@@ -611,6 +634,7 @@
 
 .sidebar-sessions-header-row .sidebar-section-label {
   padding: 0;
+  color: var(--text-muted);
 }
 
 .session-filter-count {
@@ -715,12 +739,12 @@
 .sidebar-sessions-search-inline button:hover { color: var(--text); background: var(--sidebar-hover); }
 
 .session-item.search-match {
-  background: var(--accent-12);
+  background: color-mix(in srgb, var(--link) 9%, transparent);
   color: var(--text);
 }
 
 .session-item.search-match .session-item-text {
-  color: var(--accent);
+  color: var(--link);
 }
 
 .session-highlight {
@@ -738,18 +762,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 12px 8px 4px;
+  margin: 14px 8px 5px;
   padding: 0;
   min-height: 22px;
-  font-size: 10px;
+  font-size: 10.5px;
   font-weight: 600;
-  color: var(--text-dimmer);
+  color: var(--text-muted);
   letter-spacing: 0.2px;
 }
 
 .session-group-header-label {
   min-width: 0;
-  color: var(--text-dimmer);
+  color: var(--text-muted);
 }
 
 .session-group-clear-btn {
@@ -822,16 +846,16 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 0 12px;
-  height: 34px;
-  border-radius: 10px;
+  gap: 7px;
+  padding: 0 9px;
+  height: 36px;
+  border-radius: 9px;
   cursor: pointer;
   font-size: 13px;
-  font-weight: 600;
-  color: var(--text-muted);
+  font-weight: var(--font-weight-body);
+  color: var(--text-secondary);
   margin-bottom: 0;
-  transition: background 0.35s ease, color 0.35s ease;
+  transition: background 0.15s ease, color 0.15s ease;
   contain: size layout;
 }
 
@@ -848,14 +872,34 @@
   filter: grayscale(0.9) brightness(0.9);
   transition: opacity 0.15s, filter 0.15s;
 }
+.session-vendor-mark {
+  width: 16px;
+  height: 16px;
+  margin-right: 0;
+  border-radius: 4px;
+  background: transparent;
+  box-shadow: none;
+  opacity: 0.5;
+  filter: grayscale(0.72) saturate(0.6);
+  flex-shrink: 0;
+}
 .session-item:hover .session-vendor-icon,
 .session-item.active .session-vendor-icon {
   opacity: 1;
   filter: none;
 }
+.session-item:hover .session-vendor-mark {
+  opacity: 0.76;
+  filter: grayscale(0.28) saturate(0.82);
+}
+.session-item.active .session-vendor-mark {
+  opacity: 0.88;
+  filter: grayscale(0.12) saturate(0.9);
+}
 
 .session-item-text {
   flex: 1;
+  line-height: 1.3;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -863,14 +907,23 @@
 }
 
 .session-item:hover {
-  background: var(--sidebar-hover);
-  color: var(--text-secondary);
+  background: rgba(var(--overlay-rgb), 0.035);
+  color: var(--text);
 }
 
 .session-item.active {
-  background: var(--sidebar-active);
+  background: color-mix(in srgb, var(--link) 7%, transparent);
   color: var(--text);
-  font-weight: 600;
+  font-weight: var(--font-weight-ui);
+}
+
+.session-item-age {
+  flex-shrink: 0;
+  color: var(--text-dimmer);
+  font-size: 9.5px;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.8;
+  transition: opacity 0.15s;
 }
 
 .split-group-text {
@@ -960,7 +1013,7 @@
   min-width: 18px;
   height: 18px;
   border-radius: 9px;
-  background: #e74c3c;
+  background: var(--link);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
@@ -974,13 +1027,20 @@
 }
 
 .session-item .session-item-text {
-  padding-right: 28px;
+  padding-right: 0;
 }
 
 .session-item:has(.session-presence) .session-item-text {
   padding-right: 54px;
 }
 
+.session-item:has(.session-presence) .session-item-age,
+.session-item:has(.session-unread-badge.has-unread) .session-item-age,
+.session-item:hover .session-item-age,
+.session-item:focus-within .session-item-age {
+  opacity: 0;
+}
+
 .session-close-btn {
   position: absolute;
   right: 8px;
@@ -1067,14 +1127,14 @@
   border: none;
   border-radius: 10px;
   background: transparent;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   font-family: inherit;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   text-align: left;
   min-width: 0;
-  opacity: 0.62;
+  opacity: 1;
   transition: background 0.15s, color 0.15s, opacity 0.15s;
 }
 
@@ -1086,8 +1146,8 @@
 }
 
 .session-top-action-icon {
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   flex-shrink: 0;
   border-radius: 4px;
   object-fit: cover;
@@ -1134,11 +1194,11 @@
   border: none;
   border-radius: 0;
   background: transparent;
-  font-size: 11px;
+  font-size: 10.5px;
   line-height: 1.4;
-  color: color-mix(in srgb, var(--text-dimmer) 88%, transparent);
+  color: var(--text-muted);
   text-align: center;
-  text-shadow: 0 0 10px rgba(var(--shadow-rgb), 0.08);
+  opacity: 0.78;
 }
 
 .session-list-sticky-top {
@@ -1350,7 +1410,7 @@
   border-radius: 10px;
   cursor: pointer;
   font-size: 13px;
-  font-weight: 600;
+  font-weight: var(--font-weight-body);
   color: var(--text-muted);
   transition: background 0.35s ease, color 0.35s ease;
 }
@@ -1707,7 +1767,7 @@
 .user-island-name {
   font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   font-size: 14px;
-  font-weight: 700;
+  font-weight: var(--font-weight-heading);
   color: var(--text);
   white-space: nowrap;
   overflow: hidden;
@@ -1755,30 +1815,6 @@
   transition: background 0.15s, color 0.15s;
 }
 
-.user-island-actions button#user-theme-toggle-btn {
-  color: var(--text-secondary);
-}
-
-.user-island-actions button#user-theme-toggle-btn:hover {
-  color: var(--text);
-}
-
-.user-island-actions button#user-theme-toggle-btn.theme-toggle-light {
-  color: #7b8cff;
-}
-
-.user-island-actions button#user-theme-toggle-btn.theme-toggle-light:hover {
-  color: #98a4ff;
-}
-
-.user-island-actions button#user-theme-toggle-btn.theme-toggle-dark {
-  color: #f2b84d;
-}
-
-.user-island-actions button#user-theme-toggle-btn.theme-toggle-dark:hover {
-  color: #ffca6b;
-}
-
 .user-island-actions button .lucide {
   width: 16px;
   height: 16px;
@@ -1898,99 +1934,6 @@
   height: 20px;
 }
 
-/* --- Theme picker --- */
-.theme-picker {
-  position: fixed;
-  background: var(--bg-alt);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 0;
-  min-width: 220px;
-  max-height: 70vh;
-  overflow-y: auto;
-  box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.5);
-  z-index: 200;
-  opacity: 0;
-  transform: translateY(8px);
-  pointer-events: none;
-  transition: opacity 0.15s, transform 0.15s;
-}
-
-.theme-picker.visible {
-  opacity: 1;
-  transform: translateY(0);
-  pointer-events: auto;
-}
-
-.theme-picker-header {
-  padding: 8px 14px 4px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-dimmer);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  position: sticky;
-  top: 0;
-  background: var(--bg-alt);
-  z-index: 1;
-}
-
-.theme-picker-section {
-  padding-bottom: 4px;
-}
-
-.theme-picker-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 7px 14px;
-  border: none;
-  background: none;
-  color: var(--text-secondary);
-  font-family: inherit;
-  font-size: 13px;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.theme-picker-item:hover {
-  background: rgba(var(--overlay-rgb), 0.05);
-}
-
-.theme-picker-item.active {
-  color: var(--text);
-}
-
-.theme-swatches {
-  display: flex;
-  gap: 3px;
-  flex-shrink: 0;
-}
-
-.theme-swatch {
-  width: 12px;
-  height: 12px;
-  border-radius: 3px;
-  border: 1px solid rgba(var(--overlay-rgb), 0.1);
-}
-
-.theme-picker-label {
-  flex: 1;
-  text-align: left;
-}
-
-.theme-picker-check {
-  font-size: 14px;
-  color: var(--accent);
-  opacity: 0;
-  flex-shrink: 0;
-}
-
-.theme-picker-item.active .theme-picker-check {
-  opacity: 1;
-}
-
 /* --- Sidebar resize handle (overlay, no layout space) --- */
 #sidebar-resize-handle {
   position: absolute;