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

package/lib/public/css/menus.css

@@ -44,29 +44,64 @@
 #header-rename-btn .lucide { width: 13px; height: 13px; }
 
 #header-add-worker-btn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  border: 1px solid transparent;
-  background: none;
-  color: var(--text-dimmer);
+  gap: 7px;
+  width: auto;
+  height: 28px;
+  border: 1px solid color-mix(in srgb, var(--accent2) 28%, var(--border));
+  background: var(--accent2-8);
+  color: var(--accent2);
   cursor: pointer;
   border-radius: 8px;
   flex-shrink: 0;
-  padding: 0;
-  margin-left: 4px;
+  padding: 0 9px 0 7px;
+  margin-left: 0;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
   transition: color 0.15s, background 0.15s, border-color 0.15s;
 }
-#header-add-worker-btn:hover { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.04); border-color: var(--border); }
-#header-add-worker-btn .lucide { width: 13px; height: 13px; }
+#header-add-worker-btn:hover {
+  color: var(--accent2-hover);
+  background: var(--accent2-15);
+  border-color: color-mix(in srgb, var(--accent2) 48%, var(--border));
+}
+.header-worker-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.header-worker-icon > .lucide { width: 15px; height: 15px; }
+.header-worker-add-badge {
+  position: absolute;
+  right: -4px;
+  bottom: -3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--accent2);
+  color: var(--bg);
+  box-shadow: 0 0 0 2px var(--bg);
+}
+.header-worker-add-badge .lucide { width: 7px; height: 7px; stroke-width: 3; }
+.header-worker-label { letter-spacing: 0.01em; }
 #header-add-worker-btn.hidden { display: none; }
 body.dm-mode #header-add-worker-btn { display: none; }
 
-/* "Close terminal" button: sits just left of the rename pencil during a live
-   TUI session. Matches the rename button's chrome; reds out on hover since it
-   stops the running claude (the session stays resumable). */
+/* "Close terminal" button for a live TUI session. Matches the session-control
+   chrome; reds out on hover since it stops the running agent while preserving
+   the resumable session. */
 #header-tui-close-btn {
   display: flex;
   align-items: center;
@@ -980,4 +1015,3 @@ body.dm-mode #header-add-worker-btn { display: none; }
   #config-chip .config-chip-icon { display: inline; width: 14px; height: 14px; }
   #config-chip-label { display: none; }
 }
-

package/lib/public/css/pane.css

@@ -23,6 +23,10 @@ body.pane-mode #sticky-notes-container {
   display: none !important;
 }
 
+body.pane-mode .notif-banner-container {
+  display: none !important;
+}
+
 body.pane-mode #main-area {
   border: 0;
   border-radius: 0;

package/lib/public/index.html

@@ -373,12 +373,11 @@
           </div>
           <button id="hamburger-btn" aria-label="Toggle sidebar" title="Toggle sidebar"><i data-lucide="menu"></i></button>
           <span class="header-title" id="header-title">Connecting...</span>
+          <button id="header-rename-btn" type="button" title="Rename session"><i data-lucide="pencil"></i></button>
           <button id="header-info-btn" type="button" title="Session info"><i data-lucide="info"></i></button>
           <button id="header-full-access-btn" type="button" class="session-full-access hidden" role="switch" aria-checked="false" title="Skip Permissions is off — permission prompts are on">
             <span class="session-full-access-label">Skip Permissions</span><span class="session-full-access-track" aria-hidden="true"><span></span></span>
           </button>
-          <button id="header-rename-btn" type="button" title="Rename session"><i data-lucide="pencil"></i></button>
-          <button id="header-add-worker-btn" type="button" title="Add Worker — this session becomes the Driver of a pair"><i data-lucide="user-plus"></i></button>
           <button type="button" id="header-tui-close-btn" class="header-tui-close-btn hidden" title="Close terminal (keeps history, resume anytime)" aria-label="Close terminal"><i data-lucide="power"></i></button>
           <div id="mate-mobile-title" class="mate-mobile-title hidden">
             <img id="mate-mobile-avatar" class="mate-mobile-avatar" alt="">
@@ -389,6 +388,13 @@
         <div id="ralph-sticky" class="hidden"></div>
         <div id="debate-sticky" class="hidden"></div>
         <div class="status">
+          <button id="header-add-worker-btn" type="button" aria-label="Add AI Worker" title="Add an AI Worker — this session becomes the Driver of a pair">
+            <span class="header-worker-icon" aria-hidden="true">
+              <i data-lucide="bot"></i>
+              <span class="header-worker-add-badge"><i data-lucide="plus"></i></span>
+            </span>
+            <span class="header-worker-label">Add Worker</span>
+          </button>
           <button type="button" id="header-tui-font-btn" class="header-tui-font-btn hidden" title="Terminal font" aria-label="Terminal font">
             <i data-lucide="type"></i>
           </button>

package/lib/public/modules/app-panels.js

@@ -861,7 +861,9 @@ export function updateContextPanel() {
       hCtxEl = document.createElement("div");
       hCtxEl.className = "header-context";
       hCtxEl.innerHTML = '<div class="header-context-bar"><div class="header-context-fill"></div></div><span class="header-context-label"></span>';
-      statusArea.insertBefore(hCtxEl, statusArea.firstChild);
+      var workerBtn = document.getElementById("header-add-worker-btn");
+      var contextAnchor = workerBtn && workerBtn.parentNode === statusArea ? workerBtn.nextSibling : statusArea.firstChild;
+      statusArea.insertBefore(hCtxEl, contextAnchor);
       hCtxEl.addEventListener("mouseenter", function() {
         if (store.get('richContextUsage')) {
           showCtxPopover();

package/lib/public/modules/pane-bridge.js

@@ -5,6 +5,7 @@
 
 import { store } from './store.js';
 import { applyContextView, getContextView } from './app-panels.js';
+import { forceExternalLinkToNewTab } from './pane-links.js';
 
 var panelOpen = false;
 
@@ -29,9 +30,19 @@ function togglePaneContextPanel() {
   applyContextView(panelOpen ? "panel" : "off");
 }
 
+function preparePaneLink(event) {
+  var target = event.target;
+  if (!target || typeof target.closest !== "function") return;
+  var anchor = target.closest("a[href]");
+  if (!anchor || anchor.hasAttribute("download")) return;
+  forceExternalLinkToNewTab(anchor, window.location.href);
+}
+
 export function initPaneBridge() {
   if (!store.get('paneMode')) return;
   panelOpen = getContextView() === "panel";
+  document.addEventListener("click", preparePaneLink, true);
+  document.addEventListener("auxclick", preparePaneLink, true);
   window.addEventListener("message", function (event) {
     if (event.origin !== window.location.origin) return;
     var msg = event.data;

package/lib/public/modules/pane-links.js

@@ -0,0 +1,23 @@
+export function isExternalWebLink(href, currentHref) {
+  if (!href) return false;
+  try {
+    var url = new URL(href, currentHref);
+    var currentUrl = new URL(currentHref);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return false;
+    return url.origin !== currentUrl.origin;
+  } catch (err) {
+    return false;
+  }
+}
+
+export function forceExternalLinkToNewTab(anchor, currentHref) {
+  if (!anchor || !isExternalWebLink(anchor.href, currentHref)) return false;
+
+  var rel = (anchor.getAttribute("rel") || "").split(/\s+/).filter(Boolean);
+  if (rel.indexOf("noopener") === -1) rel.push("noopener");
+  if (rel.indexOf("noreferrer") === -1) rel.push("noreferrer");
+
+  anchor.setAttribute("target", "_blank");
+  anchor.setAttribute("rel", rel.join(" "));
+  return true;
+}

package/package.json

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