clay-server 4.3.0-beta.3 → 4.3.0-beta.4

package/lib/public/css/overlays.css

@@ -518,7 +518,7 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
 .popover-copy:hover { color: var(--text); border-color: var(--text-dimmer); }
 .popover-copy.copied { color: var(--success); border-color: var(--success); }
 
-/* Skip permissions pill */
+/* Quiet native toolbar control for session permission mode. */
 .session-permission-control {
   display: inline-flex;
   align-items: center;
@@ -535,35 +535,40 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
   flex: 0 0 auto;
   gap: 1px;
   padding: 2px;
-  border: 1px solid color-mix(in srgb, var(--border, #45484f) 88%, transparent);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--surface-raised, rgba(0,0,0,.18)) 86%, transparent);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.12);
+  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-alt) 72%, transparent);
 }
 .session-permission-segmented button {
   position: relative;
-  flex: 0 0 auto;
+  flex: 0 0 48px;
+  width: 48px;
+  height: 22px;
   border: 0;
   border-radius: 7px;
-  padding: 4px 9px;
-  color: var(--text-muted, inherit);
+  padding: 3px 4px;
+  color: var(--text-secondary);
   background: transparent;
   font: inherit;
+  font-weight: 500;
   font-size: 11px;
   line-height: 1;
   white-space: nowrap;
   cursor: pointer;
-  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
-}
-.session-permission-segmented button:hover:not(:disabled) { color: var(--text, #fff); background: rgba(255,255,255,.07); }
-.session-permission-segmented button:focus-visible { outline: 2px solid var(--accent, #6f8cff); outline-offset: 1px; z-index: 1; }
-.session-permission-segmented button.active { background: var(--accent, #6f8cff); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
-.session-permission-segmented button:disabled { cursor: not-allowed; opacity: .5; }
+  transition: color .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
+}
+.session-permission-segmented button:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--bg) 76%, transparent); }
+.session-permission-segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }
+.session-permission-segmented button.active { border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-weight: var(--font-weight-heading, 600); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12); }
+:root.light-theme .session-permission-segmented button.active { background: var(--bg); }
+.session-permission-segmented button:disabled { cursor: not-allowed; }
+.session-permission-control:not(.permission-pending) .session-permission-segmented button:disabled { color: var(--text-muted); opacity: .65; }
 .session-permission-control.permission-pending .session-permission-segmented button:disabled { cursor: wait; }
-.session-permission-segmented button.pending { color: #fff; }
-.permission-spinner { display: inline-block; visibility: hidden; width: 10px; height: 10px; margin-left: 4px; vertical-align: -1px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; }
+.session-permission-segmented button.pending { color: var(--text); background: color-mix(in srgb, var(--bg) 42%, transparent); }
+.session-permission-segmented button.pending .permission-label { visibility: hidden; }
+.permission-spinner { position: absolute; inset: 50% auto auto 50%; display: block; visibility: hidden; width: 10px; height: 10px; transform: translate(-50%, -50%); border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; }
 .session-permission-segmented button.pending .permission-spinner { visibility: visible; animation: permission-spin .7s linear infinite; }
-@keyframes permission-spin { to { transform: rotate(360deg); } }
+@keyframes permission-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
 .session-permission-status {
   flex: 0 1 auto;
   min-width: 0;
@@ -592,12 +597,8 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
 }
 .permission-runtime-fallback .session-permission-status { color: var(--warning, #d49a55); }
 .permission-globally-forced .session-permission-status { color: var(--warning, #d49a55); }
-.permission-label-short { display: none; }
 @media (max-width: 760px) {
-  .permission-label-long { display: none; }
-  .permission-label-short { display: inline; }
   .session-permission-control { column-gap: 4px; }
-  .session-permission-segmented button { padding-inline: 7px; }
   .session-permission-status {
     max-width: 132px;
     font-size: 9px;

package/lib/public/css/pane.css

@@ -365,31 +365,35 @@ body.pane-mode #input-area {
   line-height: 1;
 }
 
-/* Header-scoped (two-class) selectors: pane.css loads BEFORE menus.css in
-   style.css, so the base .session-full-access rules would win a specificity
-   tie and keep the pill at its 22px title-bar size inside the 24px pane
-   header. Scope under .split-pane-header to outrank them. */
+/* Header-scoped selectors keep the compact permission control clear of the
+   title and close affordance while preserving the shared header rhythm. */
+.split-pane-header {
+  height: 28px;
+  min-height: 28px;
+}
+
 .split-pane-header .split-pane-full-access {
-  height: 22px;
+  height: 24px;
   align-self: center;
   margin-left: 0;
   padding: 0;
   gap: 4px;
-  font-size: 10px;
+  font-size: 11px;
   letter-spacing: 0.02em;
   flex-wrap: nowrap;
   flex: 0 0 auto;
-  overflow: hidden;
 }
 
 .split-pane-header .session-permission-segmented button {
-  min-height: 18px;
-  padding: 3px 6px;
-  font-size: 10px;
+  min-height: 20px;
+  height: 20px;
+  font-size: 11px;
 }
 
-.split-pane-header .permission-label-long { display: none; }
-.split-pane-header .permission-label-short { display: inline; }
+.split-pane-header .session-permission-segmented {
+  height: 24px;
+  padding: 1px;
+}
 
 .split-pane-header .session-permission-status {
   flex: 0 0 auto;

package/lib/public/index.html

@@ -410,9 +410,9 @@
           <button id="header-info-btn" type="button" title="Session info"><i data-lucide="info"></i></button>
           <div id="header-full-access-btn" class="session-permission-control hidden" role="group" aria-label="Session permission mode">
             <div class="session-permission-segmented">
-              <button type="button" data-permission-mode="default"><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>
-              <button type="button" data-permission-mode="auto"><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>
-              <button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions" title="Skip permissions"><span class="permission-label-long permission-label">Skip permissions</span><span class="permission-label-short permission-label" aria-hidden="true">Skip</span><span class="permission-spinner" aria-hidden="true"></span></button>
+              <button type="button" data-permission-mode="default" aria-label="Ask permissions" title="Ask permissions"><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>
+              <button type="button" data-permission-mode="auto" aria-label="Auto permissions" title="Auto permissions"><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>
+              <button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions" title="Skip permissions"><span class="permission-label">Skip</span><span class="permission-spinner" aria-hidden="true"></span></button>
             </div>
             <span class="session-permission-status hidden" aria-live="polite"></span>
           </div>

package/lib/public/modules/permission-control.js

@@ -46,9 +46,9 @@ export function createPermissionControl(className, ariaLabel) {
   control.setAttribute("role", "group");
   control.setAttribute("aria-label", ariaLabel || "Session permission mode");
   control.innerHTML = '<div class="session-permission-segmented">' +
-    '<button type="button" data-permission-mode="default"><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
-    '<button type="button" data-permission-mode="auto"><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
-    '<button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions" title="Skip permissions"><span class="permission-label-long permission-label">Skip permissions</span><span class="permission-label-short permission-label" aria-hidden="true">Skip</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
+    '<button type="button" data-permission-mode="default" aria-label="Ask permissions" title="Ask permissions"><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
+    '<button type="button" data-permission-mode="auto" aria-label="Auto permissions" title="Auto permissions"><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
+    '<button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions" title="Skip permissions"><span class="permission-label">Skip</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
     '</div><span class="session-permission-status" aria-live="polite"></span>';
   control.querySelector(".session-permission-status").setAttribute("aria-atomic", "true");
   return control;
@@ -101,6 +101,7 @@ export function renderPermissionControl(control, state) {
   control.classList.toggle("permission-globally-forced", globallyForced);
   control.classList.toggle("permission-runtime-fallback", state.permissionMode === "auto" && !!state.effectivePermissionMode && state.effectivePermissionMode !== "auto");
   control.setAttribute("aria-busy", pending ? "true" : "false");
+  var buttonTitles = { default: "Ask permissions", auto: "Auto permissions", bypassPermissions: "Skip permissions" };
   var buttons = control.querySelectorAll("[data-permission-mode]");
   for (var i = 0; i < buttons.length; i++) {
     var mode = buttons[i].dataset.permissionMode;
@@ -113,8 +114,7 @@ export function renderPermissionControl(control, state) {
     buttons[i].classList.toggle("pending", requested);
     buttons[i].setAttribute("aria-pressed", selected ? "true" : "false");
     buttons[i].setAttribute("aria-busy", requested ? "true" : "false");
-    if (unsupported) buttons[i].title = "Auto permissions are unavailable for this Claude session.";
-    else buttons[i].removeAttribute("title");
+    buttons[i].title = unsupported ? "Auto permissions are unavailable for this Claude session." : buttonTitles[mode];
   }
   var status = control.querySelector(".session-permission-status");
   if (status) {

package/package.json

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