clay-server 5.2.0 → 5.2.1-beta.1

package/lib/public/app.js

@@ -1,5 +1,6 @@
 import { initStudioBridge } from './modules/clay-studio-bridge.js';
 import { initSharedBrowser } from './modules/shared-browser.js';
+import { initTopbarWorkbenchControls } from './modules/topbar-workbench-controls.js';
 import { initGenerationStop } from './modules/generation-stop.js';
 import { initIssueLinks } from './modules/clay-issue-links.js';
 import { initIssues, closeIssues } from './modules/issues.js';
@@ -332,6 +333,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     splitDelegations: {},
     pairResultStatus: [],
     notesTemporarilyHidden: false,
+    pairResultTrayOpen: false,
     dmMode: false,
     historyFrom: 0,
     loadingMore: false,
@@ -1288,6 +1290,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     fileViewerEl: $("file-viewer"),
   });
   initGitPanel();
+  initTopbarWorkbenchControls();
   initSharedBrowser();
   initStudioBridge();
   initWorkerPaneLock();

package/lib/public/css/command-palette.css

@@ -5,7 +5,6 @@
 /* --- Top bar search bar trigger (Slack-style) --- */
 .cmd-palette-searchbar {
   position: absolute;
-  left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
@@ -20,8 +19,19 @@
   font-size: 12px;
   color: var(--text-dimmer);
   transition: background 0.15s, border-color 0.15s;
-  width: min(520px, 40%);
+  /* topbar-workbench-controls.js publishes the width the free gap allows. */
+  width: var(--top-bar-search-width, min(520px, 40%));
+  left: var(--top-bar-search-left, 50%);
+}
+
+/* Not enough gap beside the actions: same trigger, icon only. */
+#top-bar.search-icon .cmd-palette-searchbar {
+  width: 24px;
+  padding: 0;
+  justify-content: center;
 }
+#top-bar.search-icon .cmd-palette-searchbar-text,
+#top-bar.search-icon .cmd-palette-searchbar-kbd { display: none; }
 
 .cmd-palette-searchbar:hover {
   background: rgba(var(--overlay-rgb), 0.08);

package/lib/public/css/filebrowser.css

@@ -390,7 +390,8 @@
 
 /* --- Panel fullscreen --- */
 @media (min-width: 1024px) {
-  #main-column:has(.panel-fullscreen:not(.hidden):not(#shared-browser-panel)) > .title-bar-content { display: none; }
+  /* Browser, Terminal and Files expand below the session title; see right-workbench.css. */
+  #main-column:has(.panel-fullscreen:not(.hidden):not(#shared-browser-panel, #terminal-container, #file-viewer)) > .title-bar-content { display: none; }
   #main-panels:has(.panel-fullscreen:not(.hidden)) > #app { display: none; }
 }
 @media (max-width: 1023px) {
@@ -1060,15 +1061,13 @@
     width: 70%;
     max-width: 1200px;
   }
+  /* Same in-flow region as Browser and Terminal (right-workbench.css). */
   #file-viewer.panel-fullscreen {
-    position: fixed;
-    inset: 0;
     width: 100%;
-    height: 100dvh;
+    height: 100%;
     max-width: none;
     min-width: 0;
     margin: 0;
-    z-index: 10000;
     border: 0;
     border-radius: 0;
     background: var(--bg);

package/lib/public/css/messages.css

@@ -1278,23 +1278,42 @@ pre.mermaid-error {
 .plan-banner.plan-exit { color: var(--success); }
 .plan-banner.plan-exit .plan-banner-icon { color: var(--success); }
 
-/* Recovery notices use the same quiet surface as session work references. */
-.pair-result-status { flex: 0 0 auto; margin: 8px 16px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-alt); color: var(--text-muted); font-size: 12px; line-height: 1.5; max-height: 35vh; overflow-y: auto; }
-.pair-result-status-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-secondary); }
-.pair-result-status button { font: inherit; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; }
-.pair-result-status .pair-result-status-dismiss { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 0; font-size: 20px; line-height: 1; }
-.pair-result-status button:hover { background: var(--input-bg); color: var(--text); }
-.pair-result-status button:focus-visible, .pair-result-status summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.pair-result-status-details > summary { cursor: pointer; width: fit-content; }
-.pair-result-status-card { padding: 10px 0; border-top: 1px solid var(--border); margin-top: 8px; }
+/* Worker recovery notice: one compact, content-width disclosure aligned to the conversation inset. */
+.pair-result-status { position: relative; flex: 0 0 auto; align-self: flex-start; box-sizing: border-box; width: fit-content; min-width: 0; max-width: calc(100% - 32px); margin: 8px 16px 0; border: 1px solid var(--border-subtle); border-radius: 8px; background: rgba(var(--overlay-rgb), 0.02); color: var(--text-muted); font-size: 12px; line-height: 1.5; }
+.pair-result-status.is-open { width: min(640px, calc(100% - 32px)); }
+.pair-result-status-bar { display: flex; align-items: center; gap: 2px; min-height: 30px; padding: 0 2px 0 0; }
+.pair-result-status button { font: inherit; color: var(--text-secondary); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
+.pair-result-status-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; margin: 1px 0 1px 1px; }
+.pair-result-status-icon { display: inline-flex; color: var(--text-dimmer); }
+.pair-result-status-tone-blocked .pair-result-status-icon, .pair-result-status-tone-uncertain .pair-result-status-icon { color: var(--warning); }
+.pair-result-status .lucide { width: 14px; height: 14px; }
+.pair-result-status-label { color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
+.pair-result-status-review { color: var(--text-muted); white-space: nowrap; }
+.pair-result-status-chevron { display: inline-flex; color: var(--text-dimmer); transition: transform 0.15s; }
+.pair-result-status.is-open .pair-result-status-chevron { transform: rotate(180deg); }
+.pair-result-status-state, .pair-result-status-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.pair-result-status .pair-result-status-dismiss { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 0; color: var(--text-dimmer); }
+.pair-result-status button:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--text); }
+.pair-result-status button:focus-visible, .pair-result-status summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.pair-result-status-tray { border-radius: 0 0 7px 7px; max-height: min(40vh, 360px); overflow-y: auto; padding: 0 10px 8px; border-top: 1px solid var(--border-subtle); overflow-wrap: anywhere; }
+.pair-result-status-tray[hidden] { display: none; }
+.pair-result-status-card { padding: 8px 0; }
+.pair-result-status-card + .pair-result-status-card { border-top: 1px solid var(--border-subtle); }
 .pair-result-status-card > strong, .pair-result-status-card > span { display: block; }
 .pair-result-status-card > strong { color: var(--text-secondary); font-weight: 500; margin-bottom: 3px; }
 .pair-result-status-card details { margin-top: 7px; }
 .pair-result-status-card summary { cursor: pointer; }
 .pair-result-status-card pre { max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
-.pair-result-status-retry { margin-top: 8px; padding: 4px 8px; }
+.pair-result-status .pair-result-status-retry { margin-top: 8px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; }
 .pair-result-status-retry:disabled { cursor: not-allowed; opacity: 0.55; }
-@media (max-width: 600px) { .pair-result-status { margin: 6px 8px 0; } .pair-result-status .pair-result-status-dismiss { min-width: 36px; height: 36px; } }
+@media (prefers-reduced-motion: reduce) { .pair-result-status-chevron { transition: none; } }
+@media (max-width: 600px) {
+  .pair-result-status { margin: 6px 8px 0; max-width: calc(100% - 16px); }
+  .pair-result-status.is-open { width: calc(100% - 16px); }
+  .pair-result-status-bar { min-height: 36px; }
+  .pair-result-status-toggle { min-height: 34px; }
+  .pair-result-status .pair-result-status-dismiss { flex-basis: 36px; width: 36px; height: 36px; }
+}
 
 
 /* --- Plan card --- */

package/lib/public/css/overlays.css

@@ -66,6 +66,9 @@
 /* Vendor usage overview: one compact chip per tracked vendor, details in a popover */
 .vendor-usage-overview { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
 .vendor-usage-item { display: inline-flex; position: relative; }
+/* Crowded top bar: per-vendor chips fold into the always-last all-vendors chip, then the session usage link. */
+#top-bar.usage-compact .vendor-usage-item:not(:last-child),
+#top-bar.usage-compact-link #rate-limit-usage-link { display: none; }
 .top-bar-actions button.vendor-usage-chip {
   display: inline-flex;
   padding: 2px 8px;

package/lib/public/css/right-workbench.css

@@ -20,6 +20,34 @@
   animation: none;
 }
 
+/* Desktop expansion of Browser, Terminal and Files shares one region: the
+   area below the session title (the title and its right tools stay visible).
+   Chat (#app) is hidden by filebrowser.css; the split host is a sibling whose
+   pane headers overflow its collapsed width, so lift it out of flow and make it
+   unpaintable and unclickable while expanded, including descendants that force visibility. Its frames keep their size and
+   state, and modals keep their own stacking above this region. */
+@media (min-width: 1024px) {
+  :is(#file-viewer, #terminal-container, #shared-browser-panel).panel-fullscreen {
+    align-self: stretch;
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    height: 100%;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+  }
+  #main-panels:has(> :is(#file-viewer, #terminal-container, #shared-browser-panel).panel-fullscreen:not(.hidden)) > #split-host {
+    position: absolute;
+    inset: 0;
+    visibility: hidden;
+    pointer-events: none;
+    /* Some descendants set visibility:visible themselves (for example the
+       pending permission spinner); the clip keeps all of them unpainted. */
+    clip-path: inset(100%);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   :is(#file-viewer, #terminal-container, #project-logs-panel, #you-panel, #issues-panel, #linear-panel, #notes-browser, #scheduled-tasks-panel, #debates-workbench, #shared-browser-panel, #mcp-skills-workbench, #mate-knowledge-workbench):not(.panel-fullscreen) {
     animation: none;

package/lib/public/css/title-bar.css

@@ -120,6 +120,22 @@
 
 #server-settings-btn.active { color: var(--text); }
 
+/* Browser, Terminal and sticky-note visibility live beside Notifications and
+   Settings on desktop. Match those compact top-bar buttons; the same nodes keep
+   their own IDs, state and handlers (see topbar-workbench-controls.js). */
+.top-bar-actions :is(#shared-browser-toggle-btn, #terminal-toggle-btn, #sticky-notes-toggle-btn) {
+  position: relative;
+  padding: 3px;
+  border: 0;
+  border-radius: 6px;
+}
+.top-bar-actions :is(#shared-browser-toggle-btn, #terminal-toggle-btn, #sticky-notes-toggle-btn) .lucide { width: 14px; height: 14px; }
+.top-bar-actions :is(#shared-browser-toggle-btn, #terminal-toggle-btn, #sticky-notes-toggle-btn):hover { color: var(--text-secondary); background: rgba(var(--overlay-rgb), 0.06); border: 0; }
+.top-bar-actions #shared-browser-toggle-btn:disabled:hover { background: none; }
+/* These controls belong to a session: keep them out of the project-less shell and while the title bar is replaced by another view. */
+body.projects-shell .top-bar-actions :is(#shared-browser-toggle-btn, #terminal-toggle-btn, #sticky-notes-toggle-btn),
+#top-bar.title-bar-hidden .top-bar-actions :is(#shared-browser-toggle-btn, #terminal-toggle-btn, #sticky-notes-toggle-btn) { display: none; }
+
 /* --- Theme toggle pill switch (light/dark) --- */
 .theme-toggle {
   display: flex;

package/lib/public/index.html

@@ -77,6 +77,10 @@ body { background: transparent; color: inherit; }
       <!-- Pill badges -->
       <div id="skip-perms-pill" class="top-bar-pill pill-error hidden"><i data-lucide="shield-off"></i> <span>Skip perms</span></div>
       <div id="client-count" class="top-bar-pill pill-accent hidden"><i data-lucide="users"></i> <span id="client-count-text"></span></div>
+      <!-- Right workbench controls: same nodes and handlers as before; app JS returns them to the title bar on mobile. -->
+      <button type="button" id="shared-browser-toggle-btn" class="hidden" title="Browser" aria-label="Browser" aria-controls="shared-browser-panel" aria-expanded="false" disabled><i data-lucide="globe"></i></button>
+      <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
+      <button type="button" id="sticky-notes-toggle-btn" aria-label="Hide sticky notes" aria-pressed="false" title="Hide sticky notes"><i data-lucide="eye-off"></i></button>
       <button id="notif-center-btn" title="Notifications"><i data-lucide="bell"></i><span id="notif-center-badge" class="notif-badge hidden">0</span></button>
       <button id="server-settings-btn" title="Settings" aria-label="Settings" aria-expanded="false"><i data-lucide="settings"></i></button>
     </div>
@@ -324,9 +328,6 @@ body { background: transparent; color: inherit; }
           </button>
           <button id="debate-pdf-btn" class="hidden" title="Export debate as PDF"><i data-lucide="download"></i></button>
           <button id="find-in-session-btn" title="Search in session (Ctrl+F)"><i data-lucide="search"></i></button>
-          <button type="button" id="sticky-notes-toggle-btn" aria-label="Hide sticky notes" aria-pressed="false" title="Hide sticky notes"><i data-lucide="eye-off"></i></button>
-          <button type="button" id="shared-browser-toggle-btn" class="hidden" title="Browser" aria-label="Browser" aria-controls="shared-browser-panel" aria-expanded="false" disabled><i data-lucide="globe"></i></button>
-          <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
         </div>
       </div>
     <div id="main-panels">

package/lib/public/modules/pair-result-status.js

@@ -1,8 +1,13 @@
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { showConfirm } from './app-misc.js';
+import { iconHtml, refreshIcons } from './icons.js';
 
 var statusGeneration = 0;
+// Whether the review tray is open lives in the store (pairResultTrayOpen), so it
+// survives server re-renders and resets on clear or session switch.
+function isTrayOpen() { return !!store.get("pairResultTrayOpen"); }
+function setTrayOpen(open) { if (isTrayOpen() !== open) store.set({ pairResultTrayOpen: open }); }
 
 function retrySource(item) {
   return { item: item, generation: statusGeneration, projectSlug: store.get("currentSlug") || store.get("activeProjectSlug") || null,
@@ -43,56 +48,100 @@ function dismiss(items) {
   });
 }
 
+function worstState(items) {
+  if (items.some(function (item) { return item.state === "blocked"; })) return "blocked";
+  if (items.some(function (item) { return item.state === "uncertain"; })) return "uncertain";
+  return "pending";
+}
+
+function stateWords(state) {
+  return state === "blocked" ? "blocked" : (state === "uncertain" ? "delivery uncertain" : "pending");
+}
+
+function button(className, label, icon) {
+  var node = document.createElement("button");
+  node.type = "button"; node.className = className;
+  if (label) node.setAttribute("aria-label", label);
+  if (icon) node.innerHTML = iconHtml(icon);
+  return node;
+}
+
+function renderCard(item) {
+  var card = document.createElement("div");
+  card.className = "pair-result-status-card pair-result-status-" + item.state;
+  var title = document.createElement("strong");
+  title.textContent = item.state === "blocked" ? "Split Worker result blocked" :
+    (item.state === "uncertain" ? (item.hasCompletedResult === false ? "Split Worker recovery uncertain" : "Split Worker result delivery uncertain") : "Split Worker result pending");
+  var message = document.createElement("span");
+  message.textContent = item.message || "The completed result is retained.";
+  card.appendChild(title); card.appendChild(message);
+  if (item.hasCompletedResult !== false) {
+    var details = document.createElement("details"), summary = document.createElement("summary"), body = document.createElement("pre");
+    summary.textContent = "View completed result";
+    body.textContent = item.error ? "Error: " + item.error : (item.response || "No text response was recorded.");
+    details.appendChild(summary); details.appendChild(body); card.appendChild(details);
+  }
+  if (item.canRetry) {
+    var retryButton = button("pair-result-status-retry", null, null);
+    retryButton.textContent = "Retry delivery";
+    retryButton.addEventListener("click", retry.bind(null, item));
+    card.appendChild(retryButton);
+  }
+  return card;
+}
+
 function renderPairResultStatus() {
   var existing = document.getElementById("pair-result-status");
+  var focusedToggle = !!(existing && existing.ownerDocument.activeElement && existing.ownerDocument.activeElement.className === "pair-result-status-toggle");
   if (existing) existing.remove();
   var items = store.get("pairResultStatus") || [];
-  if (!items.length) return;
+  if (!items.length) { setTrayOpen(false); return; }
   var messages = document.getElementById("messages");
   if (!messages || !messages.parentElement) return;
+  var trayOpen = isTrayOpen();
+  var state = worstState(items);
+  var label = items.length === 1 ? "Worker update" : items.length + " Worker updates";
   var section = document.createElement("section");
   section.id = "pair-result-status";
-  section.className = "pair-result-status";
-  section.setAttribute("role", "status");
-  var header = document.createElement("div");
-  header.className = "pair-result-status-header";
-  var heading = document.createElement("span");
-  heading.textContent = items.length === 1 ? "Worker update needs attention" : items.length + " Worker updates need attention";
-  var close = document.createElement("button");
-  close.type = "button"; close.className = "pair-result-status-dismiss";
-  close.textContent = "×";
-  close.setAttribute("aria-label", "Dismiss Worker notices");
+  section.className = "pair-result-status pair-result-status-tone-" + state + (trayOpen ? " is-open" : "");
+  var bar = document.createElement("div");
+  bar.className = "pair-result-status-bar";
+  var toggle = button("pair-result-status-toggle", null, null);
+  toggle.setAttribute("aria-expanded", trayOpen ? "true" : "false");
+  toggle.setAttribute("aria-controls", "pair-result-status-tray");
+  toggle.innerHTML = '<span class="pair-result-status-icon" aria-hidden="true">' + iconHtml(state === "pending" ? "clock" : "triangle-alert") + '</span>' +
+    '<span class="pair-result-status-label">' + label + '</span>' +
+    '<span class="pair-result-status-state">, ' + stateWords(state) + '.</span>' +
+    '<span class="pair-result-status-review">Review</span>' +
+    '<span class="pair-result-status-chevron" aria-hidden="true">' + iconHtml("chevron-down") + '</span>';
+  // One short polite announcement; the details stay in the tray.
+  var live = document.createElement("span");
+  live.className = "pair-result-status-live"; live.setAttribute("role", "status"); live.textContent = label;
+  bar.appendChild(live);
+  var close = button("pair-result-status-dismiss", "Dismiss Worker notices", "x");
   close.title = "Dismiss notices. Retained tasks and results are kept.";
   close.addEventListener("click", dismiss.bind(null, items));
-  header.appendChild(heading); header.appendChild(close); section.appendChild(header);
-  var content = document.createElement("details"), toggle = document.createElement("summary");
-  content.className = "pair-result-status-details";
-  toggle.textContent = "Review updates";
-  content.appendChild(toggle); section.appendChild(content);
-  for (var i = 0; i < items.length; i++) {
-    var item = items[i], card = document.createElement("div");
-    card.className = "pair-result-status-card pair-result-status-" + item.state;
-    var title = document.createElement("strong");
-    title.textContent = item.state === "blocked" ? "Split Worker result blocked" :
-      (item.state === "uncertain" ? (item.hasCompletedResult === false ? "Split Worker recovery uncertain" : "Split Worker result delivery uncertain") : "Split Worker result pending");
-    var message = document.createElement("span");
-    message.textContent = item.message || "The completed result is retained.";
-    card.appendChild(title); card.appendChild(message);
-    if (item.hasCompletedResult !== false) {
-      var details = document.createElement("details"), summary = document.createElement("summary"), body = document.createElement("pre");
-      summary.textContent = "View completed result";
-      body.textContent = item.error ? "Error: " + item.error : (item.response || "No text response was recorded.");
-      details.appendChild(summary); details.appendChild(body); card.appendChild(details);
-    }
-    if (item.canRetry) {
-      var button = document.createElement("button");
-      button.type = "button"; button.className = "pair-result-status-retry"; button.textContent = "Retry delivery";
-      button.addEventListener("click", retry.bind(null, item));
-      card.appendChild(button);
-    }
-    content.appendChild(card);
-  }
+  bar.appendChild(toggle); bar.appendChild(close); section.appendChild(bar);
+  var tray = document.createElement("div");
+  tray.id = "pair-result-status-tray"; tray.className = "pair-result-status-tray";
+  tray.hidden = !trayOpen;
+  for (var i = 0; i < items.length; i++) tray.appendChild(renderCard(items[i]));
+  section.appendChild(tray);
+  toggle.addEventListener("click", function () {
+    trayOpen = !isTrayOpen(); setTrayOpen(trayOpen);
+    toggle.setAttribute("aria-expanded", trayOpen ? "true" : "false");
+    tray.hidden = !trayOpen;
+    section.className = section.className.replace(/ is-open/g, "") + (trayOpen ? " is-open" : "");
+  });
+  section.addEventListener("keydown", function (event) {
+    if (event.key !== "Escape" || !isTrayOpen()) return;
+    trayOpen = false; setTrayOpen(false); toggle.setAttribute("aria-expanded", "false"); tray.hidden = true;
+    section.className = section.className.replace(/ is-open/g, "");
+    if (toggle.focus) toggle.focus();
+  });
   messages.parentElement.insertBefore(section, messages);
+  refreshIcons();
+  if (focusedToggle && toggle.focus) toggle.focus();
 }
 
 function handlePairResultStatus(msg) {
@@ -105,6 +154,7 @@ function handlePairResultStatus(msg) {
 
 function clearPairResultStatus() {
   statusGeneration++;
+  setTrayOpen(false);
   store.set({ pairResultStatus: [] });
   renderPairResultStatus();
 }

package/lib/public/modules/topbar-workbench-controls.js

@@ -0,0 +1,102 @@
+// Placement of the Browser, Terminal and sticky-note visibility buttons.
+// Desktop keeps them in the top bar beside Notifications and Settings; where the
+// top bar is hidden (mobile) the very same nodes return to the title bar status
+// area. Nodes, IDs, handlers, state and permissions are never recreated.
+var MOBILE = '(max-width: 768px)';
+var IDS = ['sticky-notes-toggle-btn', 'shared-browser-toggle-btn', 'terminal-toggle-btn'];
+var DESKTOP_ORDER = ['shared-browser-toggle-btn', 'terminal-toggle-btn', 'sticky-notes-toggle-btn'];
+
+function place(mobile) {
+  var status = document.querySelector('#main-column > .title-bar-content .status');
+  var actions = document.querySelector('#top-bar .top-bar-actions');
+  var anchor = document.getElementById('notif-center-btn');
+  if (!status || !actions) return;
+  var order = mobile ? IDS : DESKTOP_ORDER;
+  for (var i = 0; i < order.length; i++) {
+    var node = document.getElementById(order[i]);
+    if (!node) continue;
+    if (mobile) status.appendChild(node);
+    else actions.insertBefore(node, anchor);
+  }
+}
+
+// The search trigger is centred in the bar. It keeps that place and width when
+// the free gap between the left group and the actions allows, otherwise it
+// collapses to an icon-only trigger (same node, ID, handler and label) inside
+// the gap. If even the icon cannot fit, the per-vendor usage chips fold into the
+// existing all-vendors chip, then the active-session usage link folds, before
+// anything else is touched. Action buttons are never hidden or clipped.
+var MIN_FULL = 150, ICON = 24, MARGIN = 12;
+
+// Sizes seen right after the last applied layout. Observer wake-ups that find the
+// same sizes (including the ones our own class changes cause) do no work at all.
+var applied = null;
+
+function sizes(bar, left, actions) {
+  return Math.round(bar.offsetWidth) + '|' + Math.round(left.offsetWidth) + '|' + Math.round(actions.offsetWidth);
+}
+
+function layoutTopbar(force) {
+  var bar = document.getElementById('top-bar');
+  var left = bar && bar.querySelector('.top-bar-left-pills');
+  var actions = bar && bar.querySelector('.top-bar-actions');
+  var search = document.getElementById('cmd-palette-btn');
+  if (!bar || !left || !actions || !search) return;
+  if (!bar.offsetWidth) return;
+  if (!force && applied === sizes(bar, left, actions)) return;
+  if (getComputedStyle(search).display === 'none') return;
+  var levels = [[], ['usage-compact'], ['usage-compact', 'usage-compact-link']];
+  var result = null;
+  for (var i = 0; i < levels.length && !result; i++) {
+    bar.classList.remove('usage-compact', 'usage-compact-link', 'search-icon');
+    levels[i].forEach(function (name) { bar.classList.add(name); });
+    bar.style.removeProperty('--top-bar-search-width'); bar.style.removeProperty('--top-bar-search-left');
+    var width = bar.getBoundingClientRect().width, center = width / 2;
+    var barLeft = bar.getBoundingClientRect().left;
+    var leftEdge = left.getBoundingClientRect().right - barLeft, actionsEdge = actions.getBoundingClientRect().left - barLeft;
+    var half = Math.min(center - leftEdge, actionsEdge - center) - MARGIN;
+    var target = Math.min(520, width * 0.4);
+    if (2 * half >= MIN_FULL) result = { mode: 'full', width: Math.min(target, 2 * half), left: null, level: i };
+    else if (actionsEdge - leftEdge >= ICON + 2 * MARGIN) {
+      // Stay centred in the bar when that is inside the gap.
+      var lo = leftEdge + MARGIN + ICON / 2, hi = actionsEdge - MARGIN - ICON / 2;
+      result = { mode: 'icon', width: ICON, left: Math.min(Math.max(center, lo), hi), level: i };
+    }
+  }
+  if (!result) result = { mode: 'icon', width: ICON, left: Math.max(left.getBoundingClientRect().right - bar.getBoundingClientRect().left + MARGIN + ICON / 2, 0), level: levels.length - 1 };
+  bar.classList.toggle('search-icon', result.mode === 'icon');
+  if (result.mode === 'full') bar.style.setProperty('--top-bar-search-width', Math.round(result.width) + 'px');
+  else bar.style.setProperty('--top-bar-search-left', Math.round(result.left) + 'px');
+  applied = sizes(bar, left, actions);
+}
+
+function observeTopbarLayout() {
+  var bar = document.getElementById('top-bar');
+  if (!bar || typeof ResizeObserver === 'undefined') return;
+  var queued = false;
+  var run = function (force) { if (queued) return; queued = true; requestAnimationFrame(function () { queued = false; layoutTopbar(force === true); }); };
+  var observer = new ResizeObserver(function () { run(false); });
+  observer.observe(bar);
+  ['.top-bar-left-pills', '.top-bar-actions'].forEach(function (selector) { var node = bar.querySelector(selector); if (node) observer.observe(node); });
+  // Content swaps that leave the applied size unchanged (a folded usage chip changing)
+  // still need a fresh decision; plain class toggles are caught by the size observers.
+  new MutationObserver(function () { run(true); }).observe(bar.querySelector('.top-bar-actions'), { childList: true, subtree: true, characterData: true });
+  layoutTopbar(true);
+}
+
+// Mirror "title bar replaced by another view" on the top bar so CSS needs no body-level :has().
+function mirrorTitleBarHidden() {
+  var title = document.querySelector('#main-column > .title-bar-content'), bar = document.getElementById('top-bar');
+  if (!title || !bar) return;
+  var sync = function () { bar.classList.toggle('title-bar-hidden', title.classList.contains('hidden')); };
+  sync();
+  new MutationObserver(sync).observe(title, { attributes: true, attributeFilter: ['class'] });
+}
+
+export function initTopbarWorkbenchControls() {
+  var query = window.matchMedia(MOBILE);
+  place(query.matches);
+  query.addEventListener('change', function () { place(query.matches); });
+  mirrorTitleBarHidden();
+  observeTopbarLayout();
+}

package/lib/public/style.css

@@ -6,7 +6,7 @@
 @import url("css/linear.css");
 @import url("css/base.css?v=20260828-type1");
 @import url("css/icon-strip.css?v=20260828-surfaces4");
-@import url("css/title-bar.css?v=20261018-actions-layer");
+@import url("css/title-bar.css?v=20261018-workbench-controls2");
 @import url("css/clay-workspace.css?v=20261010-tint");
 @import url("css/pane.css");
 @import url("css/worker-proposal.css");
@@ -14,15 +14,15 @@
 @import url("css/session-actions.css?v=20260828-contrast1");
 @import url("css/sidebar.css?v=20261018-quick-appearance");
 @import url("css/session-folders.css");
-@import url("css/overlays.css?v=20261017-usage2");
+@import url("css/overlays.css?v=20261018-topbar-gap");
 @import url("css/menus.css");
-@import url("css/messages.css?v=20260828-delegated-muted1");
+@import url("css/messages.css?v=20261018-worker-notice");
 @import url("css/generated-images.css?v=20260829-save-details1");
 @import url("css/rewind.css");
 @import url("css/elicitation-form.css");
 @import url("css/input.css?v=20261002-stop-inline1");
 @import url("css/pending-message-queue.css?v=20260914-queue1");
-@import url("css/filebrowser.css?v=20261018-browser-header1");
+@import url("css/filebrowser.css?v=20261018-workbench-region");
 @import url("css/git-panel.css");
 @import url("css/git-placard.css");
 @import url("css/diff.css");
@@ -53,7 +53,7 @@
 @import url("css/session-search.css");
 @import url("css/tooltip.css");
 @import url("css/mates.css?v=20260407");
-@import url("css/command-palette.css?v=20260910-ask-clay-controls1");
+@import url("css/command-palette.css?v=20261018-topbar-gap");
 @import url("css/mention.css");
 @import url("css/debate.css");
 @import url("css/home-debate-planning.css");
@@ -76,7 +76,7 @@
 @import url("./css/mcp-skills-workbench.css");
 @import url("css/skills-workbench.css");
 
-@import url("css/right-workbench.css");
+@import url("css/right-workbench.css?v=20261018-workbench-region");
 
 @import url("css/mate-conversation.css");
 

package/package.json

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