clay-server 4.3.0-beta.7 → 4.3.0-beta.8

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

@@ -358,8 +358,7 @@
     background: rgba(var(--overlay-rgb), 0.06);
   }
 
-  /* Split "New session" row: main action on the last-used vendor + a chevron
-     that expands .mobile-vendor-list below it. Mirrors the desktop sidebar. */
+  /* Primary creation action + a labeled provider selector. */
   .mobile-session-new-row {
     display: flex;
     gap: 6px;
@@ -377,26 +376,30 @@
     color: var(--text);
     gap: 8px;
   }
-  .mobile-session-new-row .mobile-session-new-chevron {
-    flex: 0 0 auto;
-    width: 44px;
+  .mobile-session-new-row .mobile-session-new-provider {
+    flex: 0 1 132px;
+    width: 132px;
+    min-width: 104px;
     margin-bottom: 0;
-    padding: 10px 0;
+    padding: 6px 9px;
     border: 1px solid var(--border-subtle);
     border-radius: 8px;
     background: rgba(var(--overlay-rgb), 0.03);
     color: var(--text-muted);
-    justify-content: center;
-    gap: 0;
+    display: grid;
+    gap: 2px;
   }
-  .mobile-session-new-row .mobile-session-new-chevron.expanded svg {
+  .mobile-session-new-row .mobile-session-new-provider.expanded .session-create-provider-chevron svg {
     transform: rotate(180deg);
   }
   .mobile-session-new-row .mobile-session-new-main:active,
-  .mobile-session-new-row .mobile-session-new-chevron: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-vendor-list {
     display: flex;
     flex-direction: column;

package/lib/public/css/sidebar.css

@@ -1262,26 +1262,77 @@
   opacity: 1;
 }
 
-/* Split button: main action + chevron sharing one grid cell. */
+/* Primary creation action + a visibly grouped provider selector. */
 .session-top-action-split {
   display: flex;
+  flex-wrap: wrap;
   align-items: stretch;
-  gap: 2px;
+  gap: 6px;
   min-width: 0;
 }
 
 .session-top-action-split .split-main {
-  flex: 1 1 auto;
+  flex: 1 1 110px;
   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);
+  color: var(--text);
+  font-weight: 600;
+  white-space: nowrap;
 }
 
-.session-top-action-split .split-chevron {
-  flex: 0 0 auto;
-  width: 28px;
-  min-width: 28px;
-  padding: 0;
-  justify-content: center;
-  gap: 0;
+.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);
+}
+
+.session-top-action-split .split-provider {
+  flex: 1 1 104px;
+  width: auto;
+  min-width: 104px;
+  padding: 5px 8px;
+  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;
+}
+
+.session-create-provider-choice {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+}
+
+.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-chevron {
+  display: inline-flex;
+  margin-left: auto;
+}
+
+.session-create-provider[aria-expanded="true"] .session-create-provider-chevron svg {
+  transform: rotate(180deg);
 }
 
 .session-favorites-section {

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

@@ -0,0 +1,33 @@
+// Shared, presentation-only session creation controls for desktop and mobile.
+
+import { iconHtml } from './icons.js';
+
+export function renderSessionCreationCta(options) {
+  var row = document.createElement("div");
+  row.className = options.rowClass + " session-create-cta";
+
+  var createButton = document.createElement("button");
+  createButton.className = options.createClass + " session-create-primary";
+  createButton.type = "button";
+  createButton.textContent = "Create session";
+  createButton.title = options.createTitle;
+  createButton.setAttribute("aria-label", options.createTitle);
+  createButton.addEventListener("click", options.onCreate);
+  row.appendChild(createButton);
+
+  var providerButton = document.createElement("button");
+  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-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.addEventListener("click", options.onProvider);
+  row.appendChild(providerButton);
+
+  return { element: row, createButton: createButton, providerButton: providerButton };
+}

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

@@ -16,6 +16,7 @@ import {
 } from './sidebar-sessions.js';
 import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES, isExperimentalVendor } from './app-rendering.js';
 import { defaultVendorUnavailable, resolvePreferredVendor, saveDefaultVendor } from './default-vendor.js';
+import { renderSessionCreationCta } from './session-creation-cta.js';
 import {
   getCachedProjectList,
   getCachedCurrentSlug,
@@ -671,42 +672,49 @@ function createMobileLoopGroup(loopId, children, groupKey) {
 }
 
 // Helper: render sorted sessions into a container with date groups (with loop session grouping)
-function renderMobileSessionsInto(container) {
-  // Mirrors the desktop sidebar's split button: one "New session" action on
-  // the project's last-used vendor, plus a chevron that expands the full
-  // vendor list. The list expands inline rather than as a fixed-position
-  // popover because it lives inside a scrolling bottom sheet.
+export function renderMobileSessionsInto(container) {
   var mobileDefaultVendor = resolvePreferredVendor(store.get('installedVendors') || []) || resolveDefaultVendor();
   var mobileInstalled = store.get('installedVendors') || [];
   var mobileDefaultState = store.get('defaultVendorState') || {};
 
-  var newRow = document.createElement("div");
-  newRow.className = "mobile-session-new-row";
-
-  var mainBtn = document.createElement("button");
-  mainBtn.className = "mobile-session-new mobile-session-new-main";
-  mainBtn.title = "New " + (VENDOR_NAMES[mobileDefaultVendor] || mobileDefaultVendor) + " session";
-  if (defaultVendorUnavailable(mobileInstalled)) mainBtn.title += " (saved default is unavailable; using installed priority)";
-  mainBtn.innerHTML = '<img src="' + (VENDOR_AVATARS[mobileDefaultVendor] || VENDOR_AVATARS.claude) +
-    '" class="mobile-session-new-icon" alt=""><span>New ' + (VENDOR_NAMES[mobileDefaultVendor] || mobileDefaultVendor) + ' session</span>';
-  mainBtn.addEventListener("click", function () {
-    startNewSession(mobileDefaultVendor);
-    closeMobileSheet();
-  });
-  newRow.appendChild(mainBtn);
-
   var vendorList = document.createElement("div");
   vendorList.className = "mobile-vendor-list hidden";
-
-  var chevronBtn = document.createElement("button");
-  chevronBtn.className = "mobile-session-new mobile-session-new-chevron";
-  chevronBtn.setAttribute("aria-label", "Choose a vendor");
-  chevronBtn.innerHTML = iconHtml("chevron-down");
-  chevronBtn.addEventListener("click", function () {
-    vendorList.classList.toggle("hidden");
-    chevronBtn.classList.toggle("expanded");
+  vendorList.id = "mobile-session-provider-menu";
+  var mobileVendorName = VENDOR_NAMES[mobileDefaultVendor] || mobileDefaultVendor;
+  var mobileCreateTitle = "Create a " + mobileVendorName + " session";
+  if (defaultVendorUnavailable(mobileInstalled)) mobileCreateTitle += " (saved default is unavailable; using installed priority)";
+  var controls;
+  controls = renderSessionCreationCta({
+    rowClass: "mobile-session-new-row",
+    createClass: "mobile-session-new mobile-session-new-main",
+    providerClass: "mobile-session-new mobile-session-new-provider",
+    iconClass: "mobile-session-new-icon",
+    vendorName: mobileVendorName,
+    vendorAvatar: VENDOR_AVATARS[mobileDefaultVendor] || VENDOR_AVATARS.claude,
+    createTitle: mobileCreateTitle,
+    providerTitle: "Choose an AI provider",
+    menuId: vendorList.id,
+    onCreate: function () { startNewSession(mobileDefaultVendor); closeMobileSheet(); },
+    onProvider: function () {
+      var opening = vendorList.classList.contains("hidden");
+      vendorList.classList.toggle("hidden", !opening);
+      controls.providerButton.classList.toggle("expanded", opening);
+      controls.providerButton.setAttribute("aria-expanded", opening ? "true" : "false");
+      if (opening) {
+        var first = vendorList.querySelector("button:not(:disabled)");
+        if (first) first.focus();
+      }
+    },
+  });
+  var newRow = controls.element;
+  vendorList.addEventListener("keydown", function (e) {
+    if (e.key !== "Escape") return;
+    e.preventDefault();
+    vendorList.classList.add("hidden");
+    controls.providerButton.classList.remove("expanded");
+    controls.providerButton.setAttribute("aria-expanded", "false");
+    controls.providerButton.focus();
   });
-  newRow.appendChild(chevronBtn);
 
   if (defaultVendorUnavailable(mobileInstalled) && mobileDefaultState.preference) {
     var mobileFallbackNote = document.createElement("div");
@@ -727,7 +735,7 @@ function renderMobileSessionsInto(container) {
       if (!isInstalled) vBtn.classList.add("disabled");
       if (vendor === mobileDefaultVendor) vBtn.classList.add("active");
       vBtn.innerHTML = '<img src="' + VENDOR_AVATARS[vendor] + '" class="mobile-session-new-icon" alt="">' +
-        '<span>' + name + '</span>' +
+        '<span>' + (isInstalled ? "Create with " : "Learn about ") + name + '</span>' +
         (isExperimentalVendor(vendor) ? '<span class="vendor-experimental-badge" aria-label="Experimental integration" title="Experimental integration; not yet validated through direct use testing">🧪</span>' : '') +
         (isInstalled ? "" : '<span class="mobile-vendor-note">Not installed</span>');
       vBtn.addEventListener("click", function () {
@@ -735,6 +743,9 @@ function renderMobileSessionsInto(container) {
           window.open(VENDOR_HOMEPAGES[vendor], "_blank", "noopener");
           return;
         }
+        vendorList.classList.add("hidden");
+        controls.providerButton.classList.remove("expanded");
+        controls.providerButton.setAttribute("aria-expanded", "false");
         startNewSession(vendor);
         closeMobileSheet();
       });

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

@@ -17,6 +17,7 @@ import { openGroup, separateGroup } from './split-view.js';
 import { groupedSessionIds } from './split-group-helpers.js';
 import { defaultVendorUnavailable, resolvePreferredVendor, saveDefaultVendor } from './default-vendor.js';
 import { openPairDialog } from './split-pair-ui.js';
+import { renderSessionCreationCta } from './session-creation-cta.js';
 import {
   hierarchyItemMatches,
   prepareSidebarHierarchy,
@@ -53,10 +54,11 @@ var armedDeleteTimer = null;
 store.subscribe(function (state, previous) {
   if (state.defaultVendorState !== previous.defaultVendorState || state.installedVendors !== previous.installedVendors) {
     var reopenNewMenu = !!(sessionCtxMenu && sessionCtxMenuAnchor);
+    var sessionList = getSessionListEl();
     if (reopenNewMenu) closeSessionCtxMenu();
-    if (getSessionListEl()) renderSessionList();
-    if (reopenNewMenu) {
-      var freshAnchor = getSessionListEl().querySelector(".session-top-action.split-chevron");
+    if (sessionList) renderSessionList();
+    if (reopenNewMenu && sessionList) {
+      var freshAnchor = sessionList.querySelector(".session-top-action.split-provider");
       if (freshAnchor) showNewSessionMenu(freshAnchor, resolveDefaultVendor());
     }
   }
@@ -356,58 +358,49 @@ export function startNewSession(vendor, extra) {
   });
 }
 
-function renderSessionTopActions() {
+export function renderSessionTopActions() {
   var wrap = document.createElement("div");
   wrap.className = "session-top-actions";
 
-  // Single split button. The main half creates a session with the project's
-  // last-used vendor (for Claude the server applies the claudeOpenMode pref);
-  // the chevron opens the vendor picker plus alternate launch modes.
   var defaultVendor = resolveDefaultVendor();
-
-  var cell = document.createElement("div");
-  cell.className = "session-top-action-split";
-
-  var mainBtn = document.createElement("button");
-  mainBtn.className = "session-top-action split-main";
-  mainBtn.type = "button";
-  mainBtn.title = "New " + (VENDOR_NAMES[defaultVendor] || defaultVendor) + " session";
-  if (defaultVendorUnavailable(store.get('installedVendors') || [])) mainBtn.title += " (saved default is unavailable; using installed priority)";
-  mainBtn.innerHTML = '<img src="' + (VENDOR_AVATARS[defaultVendor] || VENDOR_AVATARS.claude) +
-    '" class="session-top-action-icon" alt=""><span>New session</span>';
-  mainBtn.addEventListener("click", function () {
-    startNewSession(defaultVendor);
-  });
-  cell.appendChild(mainBtn);
-
-  var chevron = document.createElement("button");
-  chevron.className = "session-top-action split-chevron";
-  chevron.type = "button";
-  chevron.title = "Choose a vendor or launch mode";
-  chevron.setAttribute("aria-label", "Choose a vendor or launch mode");
-  chevron.innerHTML = iconHtml("chevron-down");
-  chevron.addEventListener("click", function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (sessionCtxMenu) { closeSessionCtxMenu(); return; }
-    showNewSessionMenu(chevron, defaultVendor);
+  var vendorName = VENDOR_NAMES[defaultVendor] || defaultVendor;
+  var createTitle = "Create a " + vendorName + " session";
+  if (defaultVendorUnavailable(store.get('installedVendors') || [])) createTitle += " (saved default is unavailable; using installed priority)";
+  var controls;
+  controls = renderSessionCreationCta({
+    rowClass: "session-top-action-split",
+    createClass: "session-top-action split-main",
+    providerClass: "session-top-action split-provider",
+    iconClass: "session-top-action-icon",
+    vendorName: vendorName,
+    vendorAvatar: VENDOR_AVATARS[defaultVendor] || VENDOR_AVATARS.claude,
+    createTitle: createTitle,
+    providerTitle: "Choose an AI provider or launch mode",
+    menuId: "session-new-menu",
+    onCreate: function () { startNewSession(defaultVendor); },
+    onProvider: function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (sessionCtxMenu) { closeSessionCtxMenu(); return; }
+      showNewSessionMenu(controls.providerButton, defaultVendor);
+    },
   });
-  cell.appendChild(chevron);
-
-  wrap.appendChild(cell);
+  wrap.appendChild(controls.element);
   return wrap;
 }
 
-// Dropdown anchored to the split-button chevron. Reuses the session-ctx-menu
-// element/var so the global document click handler closes it.
+// Provider disclosure anchored to the grouped provider control. Reuses the
+// session-ctx-menu element/var so the global document click handler closes it.
 function showNewSessionMenu(anchorBtn, defaultVendor) {
   closeSessionCtxMenu();
 
   var menu = document.createElement("div");
   menu.className = "session-ctx-menu session-new-menu";
+  menu.id = "session-new-menu";
   var installed = store.get('installedVendors') || [];
   var defaultVendorState = store.get('defaultVendorState') || {};
   sessionCtxMenuAnchor = anchorBtn;
+  anchorBtn.setAttribute("aria-expanded", "true");
 
   if (defaultVendorUnavailable(installed) && defaultVendorState.preference) {
     var fallbackNote = document.createElement("div");
@@ -430,7 +423,7 @@ function showNewSessionMenu(anchorBtn, defaultVendor) {
       if (vendor === defaultVendor) item.classList.add("active");
       item.type = "button";
       item.innerHTML = '<img src="' + VENDOR_AVATARS[vendor] + '" class="session-top-action-icon" alt="">' +
-        '<span class="session-new-vendor-name">' + name + '</span>' +
+        '<span class="session-new-vendor-name">' + (isInstalled ? "Create with " : "Learn about ") + name + '</span>' +
         (isExperimentalVendor(vendor) ? '<span class="vendor-experimental-badge" aria-label="Experimental integration" title="Experimental integration; not yet validated through direct use testing">🧪</span>' : '') +
         (isInstalled ? "" : '<span class="session-new-vendor-note">Not installed</span>' + iconHtml("external-link"));
       item.title = isInstalled
@@ -526,6 +519,12 @@ function showNewSessionMenu(anchorBtn, defaultVendor) {
 
   document.body.appendChild(menu);
   sessionCtxMenu = menu;
+  menu.addEventListener("keydown", function (e) {
+    if (e.key !== "Escape") return;
+    e.preventDefault();
+    e.stopPropagation();
+    closeSessionCtxMenu(true);
+  });
   refreshIcons();
 
   requestAnimationFrame(function () {
@@ -542,6 +541,8 @@ function showNewSessionMenu(anchorBtn, defaultVendor) {
     if (menuRect.bottom > window.innerHeight - 8) {
       menu.style.top = (btnRect.top - menuRect.height - 2) + "px";
     }
+    var firstMenuItem = menu.querySelector("button:not(:disabled)");
+    if (firstMenuItem) firstMenuItem.focus();
   });
 }
 
@@ -718,13 +719,16 @@ export function getExpandedLoopRuns() {
 
 // --- Context menu ---
 
-function closeSessionCtxMenu() {
+function closeSessionCtxMenu(restoreFocus) {
+  var anchor = sessionCtxMenuAnchor;
+  if (anchor) anchor.setAttribute("aria-expanded", "false");
   sessionCtxMenuAnchor = null;
   if (sessionCtxMenu) {
     sessionCtxMenu.remove();
     sessionCtxMenu = null;
     sessionCtxSessionId = null;
   }
+  if (restoreFocus && anchor && document.contains(anchor)) anchor.focus();
 }
 
 function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData) {

package/package.json

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