clay-server 4.3.0-beta.9 → 4.3.0

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

@@ -358,10 +358,15 @@
     background: rgba(var(--overlay-rgb), 0.06);
   }
 
-  /* Primary creation action + a labeled provider selector. */
+  .mobile-session-new:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+
+  /* Primary creation action with an adjacent icon-only provider selector. */
   .mobile-session-new-row {
     display: flex;
-    gap: 6px;
+    gap: 0;
     padding: 6px 8px 8px;
   }
 
@@ -369,36 +374,43 @@
     flex: 1 1 auto;
     width: auto;
     margin-bottom: 0;
+    min-width: 0;
     padding: 10px 12px;
     border: 1px solid var(--border-subtle);
     border-radius: 8px;
     background: rgba(var(--overlay-rgb), 0.03);
     color: var(--text);
     gap: 8px;
+    border-radius: 8px 0 0 8px;
+    white-space: normal;
+    line-height: 1.2;
   }
   .mobile-session-new-row .mobile-session-new-provider {
-    flex: 0 1 132px;
-    width: 132px;
-    min-width: 104px;
+    flex: 0 0 34px;
+    width: 34px;
+    min-width: 34px;
     margin-bottom: 0;
-    padding: 6px 9px;
+    padding: 0;
     border: 1px solid var(--border-subtle);
-    border-radius: 8px;
+    border-left-color: var(--border);
+    border-radius: 0 8px 8px 0;
     background: rgba(var(--overlay-rgb), 0.03);
     color: var(--text-muted);
-    display: grid;
-    gap: 2px;
-  }
-  .mobile-session-new-row .mobile-session-new-provider.expanded .session-create-provider-chevron svg {
-    transform: rotate(180deg);
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    justify-content: center;
   }
   .mobile-session-new-row .mobile-session-new-main:active,
   .mobile-session-new-row .mobile-session-new-provider:active {
     background: rgba(var(--overlay-rgb), 0.1);
   }
 
-  .mobile-session-new-row .session-create-provider-label { font-size: 9px; }
-  .mobile-session-new-row .session-create-provider-name { font-size: 12px; }
+  .mobile-session-new-row .session-create-provider-chevron .lucide,
+  .mobile-session-new-row .session-create-provider-chevron svg {
+    width: 14px;
+    height: 14px;
+  }
 
   .mobile-vendor-list {
     display: flex;

package/lib/public/css/sidebar.css

@@ -1262,77 +1262,81 @@
   opacity: 1;
 }
 
-/* Primary creation action + a visibly grouped provider selector. */
+.session-top-action:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Primary creation action with an adjacent icon-only provider selector. */
 .session-top-action-split {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: stretch;
-  gap: 6px;
+  gap: 0;
   min-width: 0;
 }
 
 .session-top-action-split .split-main {
-  flex: 1 1 110px;
+  flex: 1 1 auto;
   width: auto;
-  min-width: 110px;
-  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
-  background: color-mix(in srgb, var(--accent) 13%, transparent);
+  min-width: 0;
+  padding: 0 9px;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1.2;
+  border: 1px solid var(--border-subtle);
+  background: color-mix(in srgb, var(--sidebar-hover) 46%, transparent);
   color: var(--text);
-  font-weight: 600;
-  white-space: nowrap;
+  font-weight: 500;
+  white-space: normal;
+  text-align: left;
+  border-radius: 9px 0 0 9px;
 }
 
 .session-top-action-split .split-main:hover {
-  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
-  background: color-mix(in srgb, var(--accent) 19%, transparent);
+  border-color: var(--border);
+  background: var(--sidebar-hover);
 }
 
 .session-top-action-split .split-provider {
-  flex: 1 1 104px;
-  width: auto;
-  min-width: 104px;
-  padding: 5px 8px;
+  flex: 0 0 26px;
+  width: 26px;
+  min-width: 26px;
+  padding: 0;
   border: 1px solid var(--border-subtle);
-  background: color-mix(in srgb, var(--sidebar-hover) 48%, transparent);
-  border-radius: 9px;
-  display: grid;
-  gap: 1px;
-}
-
-.session-create-provider-label {
-  display: block;
-  color: var(--text-dimmer);
-  font-size: 9px;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
+  border-left-color: var(--border);
+  background: color-mix(in srgb, var(--sidebar-hover) 46%, transparent);
+  border-radius: 0 9px 9px 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  justify-content: center;
 }
 
-.session-create-provider-choice {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  min-width: 0;
+.session-top-action-split .split-provider:hover {
+  background: var(--sidebar-hover);
 }
 
-.session-create-provider-name {
-  overflow: hidden;
-  color: var(--text-secondary);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.session-create-provider-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 0;
+  border-radius: 4px;
+  object-fit: cover;
 }
 
 .session-create-provider-chevron {
   display: inline-flex;
-  margin-left: auto;
 }
 
-.session-create-provider[aria-expanded="true"] .session-create-provider-chevron svg {
-  transform: rotate(180deg);
+.session-create-provider-chevron .lucide,
+.session-create-provider-chevron svg {
+  width: 14px;
+  height: 14px;
+}
+
+.session-create-provider[aria-expanded="true"] {
+  background: var(--sidebar-hover);
 }
 
 .session-favorites-section {

package/lib/public/modules/session-creation-cta.js

@@ -2,6 +2,19 @@
 
 import { iconHtml } from './icons.js';
 
+var SESSION_VENDOR_LABELS = {
+  claude: "Claude",
+  codex: "Codex",
+  antigravity: "Antigravity",
+  opencode: "OpenCode",
+  kimi: "Kimi",
+  grok: "Grok",
+  copilot: "Copilot",
+  qwen: "Qwen",
+  junie: "Junie",
+  kiro: "Kiro",
+};
+
 export function renderSessionCreationCta(options) {
   var row = document.createElement("div");
   row.className = options.rowClass + " session-create-cta";
@@ -9,7 +22,10 @@ export function renderSessionCreationCta(options) {
   var createButton = document.createElement("button");
   createButton.className = options.createClass + " session-create-primary";
   createButton.type = "button";
-  createButton.textContent = "Create session";
+  var vendorLabel = SESSION_VENDOR_LABELS[options.vendorKey] || options.vendorName;
+  createButton.innerHTML = '<img src="' + options.vendorAvatar +
+    '" class="' + options.iconClass + ' session-create-provider-icon" alt="">' +
+    '<span>Create new ' + vendorLabel + ' session</span>';
   createButton.title = options.createTitle;
   createButton.setAttribute("aria-label", options.createTitle);
   createButton.addEventListener("click", options.onCreate);
@@ -19,13 +35,10 @@ export function renderSessionCreationCta(options) {
   providerButton.className = options.providerClass + " session-create-provider";
   providerButton.type = "button";
   providerButton.title = options.providerTitle;
-  providerButton.setAttribute("aria-label", "AI provider: " + options.vendorName + ". " + options.providerTitle);
+  providerButton.setAttribute("aria-label", "Switch AI provider (current: " + options.vendorName + ")");
   providerButton.setAttribute("aria-expanded", "false");
   providerButton.setAttribute("aria-controls", options.menuId);
-  providerButton.innerHTML = '<span class="session-create-provider-label">AI provider</span>' +
-    '<span class="session-create-provider-choice"><img src="' + options.vendorAvatar +
-    '" class="' + options.iconClass + ' session-create-provider-icon" alt=""><span class="session-create-provider-name">' +
-    options.vendorName + '</span>' + iconHtml("chevron-down", "session-create-provider-chevron") + '</span>';
+  providerButton.innerHTML = iconHtml("chevron-down", "session-create-provider-chevron");
   providerButton.addEventListener("click", options.onProvider);
   row.appendChild(providerButton);
 

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

@@ -689,10 +689,11 @@ export function renderMobileSessionsInto(container) {
     createClass: "mobile-session-new mobile-session-new-main",
     providerClass: "mobile-session-new mobile-session-new-provider",
     iconClass: "mobile-session-new-icon",
+    vendorKey: mobileDefaultVendor,
     vendorName: mobileVendorName,
     vendorAvatar: VENDOR_AVATARS[mobileDefaultVendor] || VENDOR_AVATARS.claude,
     createTitle: mobileCreateTitle,
-    providerTitle: "Choose an AI provider",
+    providerTitle: "Switch AI provider (current: " + mobileVendorName + ")",
     menuId: vendorList.id,
     onCreate: function () { startNewSession(mobileDefaultVendor); closeMobileSheet(); },
     onProvider: function () {

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

@@ -372,10 +372,11 @@ export function renderSessionTopActions() {
     createClass: "session-top-action split-main",
     providerClass: "session-top-action split-provider",
     iconClass: "session-top-action-icon",
+    vendorKey: defaultVendor,
     vendorName: vendorName,
     vendorAvatar: VENDOR_AVATARS[defaultVendor] || VENDOR_AVATARS.claude,
     createTitle: createTitle,
-    providerTitle: "Choose an AI provider or launch mode",
+    providerTitle: "Switch AI provider (current: " + vendorName + ")",
     menuId: "session-new-menu",
     onCreate: function () { startNewSession(defaultVendor); },
     onProvider: function (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "4.3.0-beta.9",
+  "version": "4.3.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"