clay-server 5.0.1 → 5.0.2-beta.1

package/lib/public/css/session-folders.css

@@ -30,6 +30,22 @@
   background: rgba(var(--overlay-rgb), 0.05); color: var(--text-dimmer); font-size: 9.5px; font-weight: 600;
   text-align: center; font-variant-numeric: tabular-nums;
 }
+.session-count-summary { position: relative; }
+.session-count-summary::after {
+  content: attr(data-count-detail); position: absolute; right: -4px; bottom: calc(100% + 6px); z-index: 20;
+  width: max-content; max-width: min(220px, calc(100vw - 24px)); padding: 5px 7px; border: 1px solid var(--border);
+  border-radius: 7px; background: var(--bg-alt, var(--sidebar-bg)); color: var(--text); box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.3);
+  font-size: 10.5px; font-weight: 500; line-height: 1.25; letter-spacing: 0; white-space: nowrap;
+  opacity: 0; visibility: hidden; transform: translateY(2px); pointer-events: none;
+  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
+}
+.session-folder-toggle:hover .session-count-summary::after,
+.session-folder-toggle:focus-visible .session-count-summary::after,
+.session-date-group-count:hover::after, .session-date-group-count:focus-visible::after,
+.session-search-count:hover::after, .session-search-count:focus-visible::after {
+  opacity: 1; visibility: visible; transform: translateY(0);
+}
+.session-date-group-count:focus-visible, .session-search-count:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 
 .session-folder-body[hidden] { display: none; }
 .session-folder-body { padding-left: 4px; border-left: 1px solid var(--border-subtle, var(--border)); margin-left: 7px; }
@@ -84,7 +100,7 @@
 .session-search-count {
   position: absolute; right: 30px; top: 50%; transform: translateY(-50%); min-width: 16px; padding: 0 5px; height: 15px; line-height: 15px;
   border-radius: 999px; background: rgba(var(--overlay-rgb), 0.08); color: var(--text-dimmer); font-size: 9.5px; font-weight: 600; text-align: center;
-  pointer-events: none;
+  cursor: help;
 }
 .session-search-count:empty { display: none; }
 .session-search-clear {
@@ -162,8 +178,9 @@
 .session-folder-tool svg { width: 12px; height: 12px; display: block; }
 .session-folder-tool:hover { color: var(--text); background: rgba(var(--overlay-rgb), 0.08); }
 
-/* The Favorites star: unfilled and revealed on hover or focus, filled and
-   always visible once the session is a favorite. */
+/* The Favorites star: unfilled and revealed on hover or focus, filled when
+   selected. Desktop rows reveal it in the shared trailing slot; mobile keeps
+   the selected star visible as a persistent touch affordance. */
 .session-folder-star-btn {
   position: absolute; right: 52px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; z-index: 1;
   display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent;
@@ -172,13 +189,19 @@
 .session-folder-star-btn svg, .mobile-session-star svg { width: 12px; height: 12px; display: block; }
 .session-item:hover .session-folder-star-btn, .session-item:focus-within .session-folder-star-btn { opacity: 0.82; pointer-events: auto; }
 .session-folder-star-btn:hover { opacity: 1; color: var(--text); background: rgba(var(--overlay-rgb), 0.08); }
-.session-folder-star-btn.is-favorite, .mobile-session-star.is-favorite { color: var(--accent); opacity: 1; pointer-events: auto; }
+.session-folder-star-btn.is-favorite, .mobile-session-star.is-favorite { color: var(--accent); }
+.mobile-session-star.is-favorite { opacity: 1; pointer-events: auto; }
 .session-folder-star-btn.is-favorite svg, .mobile-session-star.is-favorite svg { fill: currentColor; }
 .session-folder-star-btn:focus-visible, .mobile-session-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 
-/* Desktop row actions are a real flex column in the row, not three unrelated
-   offsets over the age and linked-work metadata. Keeping the full cluster's
-   footprint at rest also prevents the title from jumping when actions appear. */
+/* Age and actions share one intrinsic trailing slot. CSS grid takes the wider
+   of the two without adding their widths, so hover/focus swaps content without
+   moving the title, linked work, presence, or row controls. */
+.session-item .session-row-trailing {
+  flex: 0 0 auto; display: grid; align-items: center; justify-items: end; min-width: 0;
+}
+.session-item .session-row-trailing > .session-item-age,
+.session-item .session-row-trailing > .session-row-actions { grid-area: 1 / 1; }
 .session-item .session-row-actions {
   flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 4px;
 }
@@ -186,6 +209,9 @@
 .session-item .session-row-actions > .session-close-btn {
   position: static; flex: 0 0 18px; transform: none;
 }
+.session-item .session-row-trailing .session-folder-star-btn.is-favorite { opacity: 0; pointer-events: none; }
+.session-item:hover .session-row-trailing .session-folder-star-btn.is-favorite,
+.session-item:focus-within .session-row-trailing .session-folder-star-btn.is-favorite { opacity: 0.82; pointer-events: auto; }
 
 /* Mobile: touch-sized targets, always-visible actions, no drag affordances. */
 .session-folder.is-mobile .session-folder-header { min-height: 40px; margin-top: 8px; }
@@ -237,7 +263,10 @@
 .session-folder-view-note { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
 
 @media (prefers-reduced-motion: reduce) {
-  .session-folder, .session-folder-chevron, .session-folder-toggle, .session-folder-tool { transition: none; }
+  .session-folder, .session-folder-chevron, .session-folder-toggle, .session-folder-tool, .session-count-summary::after { transition: none; }
+  .session-row-trailing .session-item-age,
+  .session-row-trailing .session-folder-star-btn,
+  .session-row-trailing .session-close-btn { transition: none; }
   .session-folder-body.folder-collapse-animating { will-change: auto; }
 }
 

package/lib/public/css/session-github.css

@@ -2,7 +2,7 @@
 .session-work-column {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 2px;
   flex: 1 1 auto;
   min-width: 0;
   overflow: visible;
@@ -28,10 +28,71 @@
   line-height: 18px;
 }
 .session-work-column .session-row-github-links {
-  flex-wrap: wrap;
-  gap: 3px 5px;
-  overflow: visible;
+  flex-wrap: nowrap;
+  gap: 3px;
+  overflow: hidden;
+  line-height: 16px;
+}
+.session-row-github-links .session-github-link {
+  min-width: 0;
+  height: 18px;
+  box-sizing: border-box;
+  gap: 3px;
+  padding: 0 4px;
+  font-size: 10.5px;
+}
+.session-row-github-links .session-linear-link {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.session-row-github-links:has(.github-kind-pr, .github-kind-issue) .session-linear-link { max-width: calc(100% - 76px); }
+.linear-work-state-compact { display: none; }
+.session-row-github-links .linear-work-id {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 52%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-row-github-links .linear-work-state {
+  display: block;
+  flex: 1 4 0;
+  min-width: 0;
+  max-width: 52px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+.session-row-github-links .linear-work-state-full { display: none; }
+.session-row-github-links .linear-work-state-compact {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-row-github-links .linear-work-title {
+  flex: 1 5 0;
+  min-width: 0;
+  max-width: 34px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-row-github-links .github-kind-pr,
+.session-row-github-links .github-kind-issue { flex: 0 0 auto; }
+.session-row-github-links .github-work-brand { display: none; }
+.session-row-github-links .github-work-brand svg,
+.session-row-github-links .github-work-status svg { width: 11px; height: 11px; }
+.session-row-github-links .github-work-more { height: 18px; line-height: 16px; padding: 0 3px; font-size: 10.5px; }
+.session-row-github-links .linear-work-brand svg { width: 11px; height: 11px; }
+.session-row-github-links .linear-work-brand { flex: none; }
+.session-row-github-links .session-linear-link,
+.session-row-github-links .session-github-link,
+.session-row-github-links .github-work-more { touch-action: manipulation; }
+.session-row-github-links { min-height: 18px; }
 .session-github-link {
   display: inline-flex;
   align-items: center;
@@ -60,10 +121,25 @@
 }
 
 .session-item:has(.session-work-column) {
+  position: relative;
+  container-type: inline-size;
   height: auto;
-  min-height: 52px;
+  min-height: 46px;
   contain: layout;
 }
+@container (max-width: 280px) {
+  .session-row-github-links .linear-work-title { display: none; }
+}
+.session-item:has(.session-work-column) > .session-vendor-mark,
+.session-item:has(.session-work-column) > .session-work-column,
+.session-item:has(.session-work-column) > .session-presence,
+.session-item:has(.session-work-column) > .session-row-trailing { align-self: flex-start; margin-top: 5px; }
+.session-item:has(.session-work-column) .session-row-github-links {
+  position: absolute;
+  left: 30px;
+  right: 44px;
+  bottom: 3px;
+}
 
 .github-kind-pr.github-state-closed .github-work-status svg { color: #f85149; }
 @media (max-width: 600px) {
@@ -117,6 +193,11 @@
 .github-work-entry-meta { color: var(--text-muted, #888); font-size: 11px; overflow-wrap: anywhere; }
 @media (max-width: 600px) {
   #header-github-links { max-width: 120px; }
-  .mobile-session-item:has(.session-work-column) { align-items: flex-start; }
-  .mobile-session-item .github-work-more { min-height: 28px; }
+  .mobile-session-item:has(.session-work-column) { position: relative; container-type: inline-size; align-items: flex-start; min-height: 70px; padding-block: 8px; }
+  .mobile-session-item:has(.session-work-column) .session-work-column { position: static; }
+  .mobile-session-item:has(.session-work-column) .session-row-github-links { position: absolute; left: 44px; right: 54px; bottom: 8px; }
+  .mobile-session-item .session-row-github-links .session-github-link,
+  .mobile-session-item .session-row-github-links .github-work-more { min-height: 28px; height: 28px; }
+  .mobile-session-item .session-row-github-links .github-work-more { padding-inline: 2px; }
+  .mobile-session-item .session-row-github-links { min-height: 28px; }
 }

package/lib/public/modules/session-date-group-header.js

@@ -3,6 +3,7 @@ import { getWs } from './ws-ref.js';
 import { showConfirm } from './app-misc.js';
 import { describeGroupDelete } from './session-delete-scope.js';
 import { showToast } from './utils.js';
+import { renderSidebarCount } from './sidebar-session-counts.js';
 
 function confirmClear(label, ids, sessions) {
   if (!ids.length) return;
@@ -22,7 +23,7 @@ function confirmClear(label, ids, sessions) {
   });
 }
 
-export function renderDateGroupHeader(dateLabel, folderLabel, ids, sessions, surface, searching) {
+export function renderDateGroupHeader(dateLabel, folderLabel, ids, sessions, surface, searching, displayCounts) {
   var header = document.createElement("div");
   header.className = "session-group-header session-date-group-header" + (surface === "mobile" ? " is-mobile" : "");
   header.setAttribute("role", "heading");
@@ -33,10 +34,7 @@ export function renderDateGroupHeader(dateLabel, folderLabel, ids, sessions, sur
   label.textContent = dateLabel;
   header.appendChild(label);
 
-  var count = document.createElement("span");
-  count.className = "session-date-group-count";
-  count.textContent = String(ids.length);
-  count.setAttribute("aria-label", ids.length + (ids.length === 1 ? " session" : " sessions"));
+  var count = renderSidebarCount("session-date-group-count", displayCounts || { roots: ids.length, workers: 0 }, true);
   header.appendChild(count);
 
   if ((!store.get('permissions') || store.get('permissions').sessionDelete !== false) && ids.length) {

package/lib/public/modules/session-folder-toolbar.js

@@ -13,6 +13,7 @@ import {
   openListSearch, closeListSearch, clearListSearchText, setListSearchQuery, rememberListSearchCaret,
   getListSearchQuery, getListSearchMatchIds, listSearchNeedsRender
 } from './session-list-search.js';
+import { renderSidebarCount } from './sidebar-session-counts.js';
 
 // Visible one wins: the desktop list and the mobile sheet can both be in the DOM.
 function visible(selector) {
@@ -44,7 +45,7 @@ export function folderToolbarNeedsRender(state, previous) {
   return folderDraftNeedsRender(state, previous) || listSearchNeedsRender(state, previous);
 }
 
-function renderSearchBar(bar, surface) {
+function renderSearchBar(bar, surface, displayCounts) {
   var state = store.get('sessionSearch');
   var query = getListSearchQuery();
   var matches = getListSearchMatchIds();
@@ -92,9 +93,8 @@ function renderSearchBar(bar, surface) {
     }, 0);
   });
 
-  var count = document.createElement("span");
-  count.className = "session-search-count";
-  if (query && matches !== null) count.textContent = String(matches.size);
+  var count = renderSidebarCount("session-search-count", displayCounts || { roots: matches ? matches.size : 0, workers: 0 }, true);
+  if (!query || matches === null) count.textContent = "";
   var clear = document.createElement("button");
   clear.type = "button";
   clear.className = "session-search-clear";
@@ -130,7 +130,7 @@ function renderSearchBar(bar, surface) {
   });
 }
 
-export function renderFolderToolbar(surface) {
+export function renderFolderToolbar(surface, displayCounts) {
   var create = store.get('sessionFolderCreate');
   var search = store.get('sessionSearch');
   var wrap = document.createElement("div");
@@ -140,7 +140,7 @@ export function renderFolderToolbar(surface) {
   wrap.appendChild(bar);
 
   if (search && search.open) {
-    renderSearchBar(bar, surface);
+    renderSearchBar(bar, surface, displayCounts);
     return wrap;
   }
 

package/lib/public/modules/session-github.js

@@ -21,6 +21,12 @@ function safeLinks(session) {
 function label(link) {
   return (link.kind === 'pr' ? 'PR #' : 'Issue #') + link.number;
 }
+function compactLinearState(state) {
+  var value = String(state || '');
+  if (/^in progress$/i.test(value)) return 'Active';
+  if (/^cancell?ed$/i.test(value)) return 'Canceled';
+  return value.length > 9 ? value.slice(0, 8) + '\u2026' : value;
+}
 function anchor(url, title, content, className) {
   return '<a class="' + className + '" href="' + escapeHtml(url) + '" target="_blank" rel="noopener noreferrer" title="' + escapeHtml(title) + '" aria-label="' + escapeHtml(title) + '">' + content + '</a>';
 }
@@ -43,7 +49,7 @@ export function githubWorkMarkup(session, detailed, expanded, sessionRow) {
   return '<span class="session-github-links' + (detailed ? ' github-work-details' : '') + (sessionRow ? ' session-row-github-links' : '') + '">' + displayed.map(function (link) {
     if (link.provider === 'linear') {
       var description = link.identifier + ' · ' + link.title + ' · ' + link.stateName + (link.stale ? ' · Last known status' : '');
-      return anchor(link.url, description, LINEAR_MARK + '<span class="linear-work-id">' + escapeHtml(link.identifier) + '</span><span class="linear-work-title">' + escapeHtml(link.title) + '</span><span class="linear-work-state">' + escapeHtml(link.stateName) + '</span>', 'session-github-link session-linear-link');
+      return anchor(link.url, description, LINEAR_MARK + '<span class="linear-work-id">' + escapeHtml(link.identifier) + '</span><span class="linear-work-title">' + escapeHtml(link.title) + '</span><span class="linear-work-state"><span class="linear-work-state-full">' + escapeHtml(link.stateName) + '</span><span class="linear-work-state-compact" aria-hidden="true">' + escapeHtml(compactLinearState(link.stateName)) + '</span></span>', 'session-github-link session-linear-link');
     }
     var state = ['open', 'closed', 'merged', 'draft'].indexOf(link.state) >= 0 ? link.state : 'unknown';
     var icon = link.kind === 'pr' ? (state === 'merged' ? 'git-merge' : state === 'closed' ? 'git-pull-request-closed' : state === 'draft' ? 'git-pull-request-draft' : 'git-pull-request') : (state === 'closed' ? 'circle-check' : 'circle-dot');

package/lib/public/modules/session-presence-ui.js

@@ -38,7 +38,7 @@ export function renderSessionPresence(row, sessionId) {
     container.appendChild(more);
   }
 
-  var anchor = row.querySelector(".session-item-age, .mobile-worker-generation, .mobile-session-unread, .session-row-actions, .mobile-session-star");
+  var anchor = row.querySelector(".session-row-trailing, .session-item-age, .mobile-worker-generation, .mobile-session-unread, .session-row-actions, .mobile-session-star");
   row.insertBefore(container, anchor || null);
   return container;
 }

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

@@ -34,6 +34,7 @@ import {
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { dismissOverlayPanels, closeSidebar } from './sidebar.js';
+import { openWorkerWithDriver } from './split-view.js';
 import { switchProject, getCachedProjects } from './app-projects.js';
 import { showHomeHub } from './app-home-hub.js';
 import { openHomeChat } from './home-mate-chat.js';
@@ -45,6 +46,7 @@ import {
   renderMobileDriverHierarchy,
   renderMobileOrphanHierarchy
 } from './sidebar-session-hierarchy.js';
+import { summarizeSidebarItems } from './sidebar-session-counts.js';
 import { cancelSessionInlineRename, closeSessionContextMenu } from './session-context-menu.js';
 
 // --- Mobile state ---
@@ -443,15 +445,17 @@ function createMobileSessionItem(s, options) {
     openSessionContextMenu(el, s);
   });
 
-  (function (id) {
+  (function (session, worker) {
     el.addEventListener("click", function () {
       if (getWs() && store.get('connected')) {
-        getWs().send(JSON.stringify({ type: "switch_session", id: id }));
+        if (!worker || !openWorkerWithDriver(session)) {
+          getWs().send(JSON.stringify({ type: "switch_session", id: session.id }));
+        }
       }
       if (dismissOverlayPanels) dismissOverlayPanels();
       closeMobileSheet();
     });
-  })(s.id);
+  })(s, !!itemOptions.worker);
 
   return el;
 }
@@ -745,15 +749,16 @@ export function renderMobileSessionsInto(container) {
   var folderCtx = {
     surface: "mobile",
     searching: matchIds !== null,
+    matchIds: matchIds,
     sessions: getCachedSessions(),
     renderItem: function (it) {
       if (it.type === "loop") return createMobileLoopGroup(it.loopId, it.children, it.groupKey);
-      if (it.type === "driver-hierarchy") return renderMobileDriverHierarchy(it.root, createMobileSessionItem, refreshMobileChatSheet);
-      if (it.type === "orphan-workers") return renderMobileOrphanHierarchy(it.workers, createMobileSessionItem, refreshMobileChatSheet);
+      if (it.type === "driver-hierarchy") return renderMobileDriverHierarchy(it.root, createMobileSessionItem, refreshMobileChatSheet, matchIds);
+      if (it.type === "orphan-workers") return renderMobileOrphanHierarchy(it.workers, createMobileSessionItem, refreshMobileChatSheet, matchIds);
       return createMobileSessionItem(it.data);
     },
   };
-  container.appendChild(renderFolderToolbar("mobile"));
+  container.appendChild(renderFolderToolbar("mobile", summarizeSidebarItems(filterItemsBySearch(items, matchIds), matchIds)));
   container.appendChild(renderFavoritesSection(layout, folderCtx));
   renderOrdinarySections(layout, folderCtx, container);
 }

package/lib/public/modules/sidebar-session-counts.js

@@ -0,0 +1,65 @@
+// Display-only sidebar counts. Destructive Clear actions keep their separate
+// authoritative session-id scope and cascade semantics.
+
+function sessionId(session) {
+  return session && typeof session.id === "number" ? session.id : null;
+}
+
+function addSession(session, roots, workers) {
+  var id = sessionId(session);
+  if (id === null) return;
+  if (session.sessionRole === "worker") workers.add(id);
+  else roots.add(id);
+}
+
+function visibleWorker(worker, driver, matchIds) {
+  return matchIds === null || matchIds === undefined || matchIds.has(worker.id) || matchIds.has(driver.id);
+}
+
+function addItem(item, roots, workers, matchIds) {
+  if (!item) return;
+  if (item.type === "session") {
+    addSession(item.data, roots, workers);
+    return;
+  }
+  if (item.type === "driver-hierarchy") {
+    addSession(item.root && item.root.driver, roots, workers);
+    var children = item.root && item.root.workers || [];
+    for (var i = 0; i < children.length; i++) if (visibleWorker(children[i], item.root.driver, matchIds)) addSession(children[i], roots, workers);
+    return;
+  }
+  var sessions = item.type === "orphan-workers" ? item.workers : item.type === "split-group" ? item.members : item.type === "loop" ? item.children : [];
+  for (var j = 0; j < (sessions || []).length; j++) {
+    if (item.type === "orphan-workers" && matchIds !== null && matchIds !== undefined && !matchIds.has(sessions[j].id)) continue;
+    addSession(sessions[j], roots, workers);
+  }
+}
+
+export function summarizeSidebarItems(items, matchIds) {
+  var roots = new Set();
+  var workers = new Set();
+  for (var i = 0; i < (items || []).length; i++) addItem(items[i], roots, workers, matchIds);
+  return { roots: roots.size, workers: workers.size };
+}
+
+export function summarizeSidebarUnits(units, matchIds) {
+  return summarizeSidebarItems((units || []).map(function (unit) { return unit.item; }), matchIds);
+}
+
+export function sidebarCountLabel(counts, short) {
+  var roots = counts && counts.roots || 0;
+  var workers = counts && counts.workers || 0;
+  if (short) return roots + (roots === 1 ? " Driver" : " Drivers") + " · " + workers + (workers === 1 ? " Split Worker" : " Split Workers");
+  return roots + (roots === 1 ? " Driver session" : " Driver sessions") + " and " + workers + (workers === 1 ? " Split Worker session" : " Split Worker sessions");
+}
+
+export function renderSidebarCount(className, counts, focusable) {
+  var count = document.createElement("span");
+  count.className = className + " session-count-summary";
+  count.textContent = String(counts.roots);
+  count.dataset.countDetail = sidebarCountLabel(counts, true);
+  count.setAttribute("aria-label", sidebarCountLabel(counts, false));
+  count.title = sidebarCountLabel(counts, false);
+  if (focusable) count.tabIndex = 0;
+  return count;
+}

package/lib/public/modules/sidebar-session-folders-ui.js

@@ -22,6 +22,7 @@ import { renderNewSessionButton, renderCreateRow } from './session-create-form.j
 import { restoreFolderCollapse, toggleFolderCollapse } from './session-folder-collapse.js';
 import { groupUnitsByDate, groupRootSessionIds } from './session-date-groups.js';
 import { renderDateGroupHeader } from './session-date-group-header.js';
+import { summarizeSidebarUnits, sidebarCountLabel, renderSidebarCount } from './sidebar-session-counts.js';
 
 // Mutable UI state (open menu, drag in flight, the layout each surface last
 // rendered) lives in the store; this module only owns the functions.
@@ -269,15 +270,6 @@ function wireUnitDrop(wrapper, containerId, key) {
 
 // --- Rendering ---
 
-function countUnits(units) {
-  var total = 0;
-  for (var i = 0; i < units.length; i++) {
-    var item = units[i].item;
-    total += item.type === "driver-hierarchy" ? 1 + item.root.workers.length : 1;
-  }
-  return total;
-}
-
 function renderUnit(unit, containerId, ctx) {
   var wrapper = document.createElement("div");
   wrapper.className = "session-folder-unit";
@@ -317,14 +309,17 @@ function renderSection(section, ctx, kind) {
   toggle.className = "session-folder-toggle";
   toggle.setAttribute("aria-expanded", String(!section.collapsed));
   toggle.setAttribute("aria-controls", bodyId);
+  var counts = summarizeSidebarUnits(section.units, ctx.matchIds);
+  toggle.setAttribute("aria-label", (section.collapsed ? "Expand " : "Collapse ") + section.label + ". " + sidebarCountLabel(counts, false));
   var icon = isFavorites ? "star" : (kind === "unfiled" ? "inbox" : "folder");
   toggle.innerHTML = '<span class="session-folder-chevron">' + iconHtml("chevron-right") + "</span>" +
     '<span class="session-folder-icon">' + iconHtml(icon) + "</span>" +
-    '<span class="session-folder-label">' + escapeHtml(section.label) + "</span>" +
-    '<span class="session-folder-count">' + countUnits(section.units) + "</span>";
+    '<span class="session-folder-label">' + escapeHtml(section.label) + "</span>";
+  toggle.appendChild(renderSidebarCount("session-folder-count", counts, false));
   toggle.addEventListener("click", function () {
     if (consumeFolderClickSuppress()) return;
     toggleFolderCollapse(root, body, toggle, surface, section.id, function (collapsed) {
+      toggle.setAttribute("aria-label", (collapsed ? "Expand " : "Collapse ") + section.label + ". " + sidebarCountLabel(counts, false));
       sendFolderOp({ op: "set_collapsed", containerKey: section.id, collapsed: collapsed });
     });
   });
@@ -362,7 +357,7 @@ function renderSection(section, ctx, kind) {
   if (dateGroups) {
     for (var g = 0; g < dateGroups.length; g++) {
       var ids = groupRootSessionIds(dateGroups[g].units);
-      body.appendChild(renderDateGroupHeader(dateGroups[g].label, section.label, ids, ctx.sessions || [], surface, !!ctx.searching));
+      body.appendChild(renderDateGroupHeader(dateGroups[g].label, section.label, ids, ctx.sessions || [], surface, !!ctx.searching, summarizeSidebarUnits(dateGroups[g].units, ctx.matchIds)));
       for (var gu = 0; gu < dateGroups[g].units.length; gu++) body.appendChild(renderUnit(dateGroups[g].units[gu], section.id, ctx));
     }
   } else {

package/lib/public/modules/sidebar-session-hierarchy.js

@@ -32,7 +32,15 @@ export function currentWorkerIds() {
   var result = new Set();
   var groups = store.get('splitGroups') || [];
   for (var i = 0; i < groups.length; i++) {
-    if (groups[i].pair && Number.isInteger(groups[i].pair.workerId)) result.add(groups[i].pair.workerId);
+    var pair = groups[i].pair;
+    if (!pair) continue;
+    if (Array.isArray(pair.workerIds)) {
+      for (var j = 0; j < pair.workerIds.length; j++) {
+        if (Number.isInteger(pair.workerIds[j])) result.add(pair.workerIds[j]);
+      }
+    } else if (Number.isInteger(pair.workerId)) {
+      result.add(pair.workerId);
+    }
   }
   return result;
 }
@@ -55,22 +63,23 @@ export function hierarchyItemMatches(item, matchIds) {
   return true;
 }
 
-function expanded(surface, key, workers, matchIds) {
+function expansionKey(key) {
+  return String(store.get('currentSlug') || '') + ":" + key;
+}
+
+function expanded(surface, key) {
   var state = expansionBySurface[surface];
-  if (state.has(key)) return state.get(key);
-  return defaultHierarchyExpanded(workers, matchIds, currentWorkerIds());
+  var scopedKey = expansionKey(key);
+  if (state.has(scopedKey)) return state.get(scopedKey);
+  return defaultHierarchyExpanded();
 }
 
-export function defaultHierarchyExpanded(workers, matchIds, current) {
-  var currentIds = current || new Set();
-  for (var i = 0; i < workers.length; i++) {
-    if (workers[i].active || currentIds.has(workers[i].id) || (matchIds !== null && matchIds.has(workers[i].id))) return true;
-  }
+export function defaultHierarchyExpanded() {
   return false;
 }
 
 function toggle(surface, key, wasExpanded, rerender) {
-  expansionBySurface[surface].set(key, !wasExpanded);
+  expansionBySurface[surface].set(expansionKey(key), !wasExpanded);
   rerender();
 }
 
@@ -82,7 +91,7 @@ export function renderDesktopDriverHierarchy(root, renderSession, rerender, matc
   var wrapper = document.createElement("div");
   wrapper.className = "session-driver-hierarchy";
   var key = "driver:" + root.driver.id;
-  var isExpanded = expanded("desktop", key, root.workers, matchIds);
+  var isExpanded = expanded("desktop", key);
   var childrenId = "session-workers-" + root.driver.id;
   var header = document.createElement("div");
   header.className = "session-driver-header";
@@ -105,7 +114,7 @@ export function renderDesktopDriverHierarchy(root, renderSession, rerender, matc
     event.preventDefault();
     event.stopPropagation();
     var nextExpanded = !isExpanded;
-    expansionBySurface.desktop.set(key, nextExpanded);
+    expansionBySurface.desktop.set(expansionKey(key), nextExpanded);
     control.setAttribute("aria-expanded", String(nextExpanded));
     control.setAttribute("aria-label", (nextExpanded ? "Collapse" : "Expand") + " Workers for " + (root.driver.title || "New Session"));
     children.hidden = !nextExpanded;
@@ -127,7 +136,7 @@ export function renderDesktopDriverHierarchy(root, renderSession, rerender, matc
 export function renderDesktopOrphanHierarchy(workers, renderSession, rerender, matchIds) {
   var wrapper = document.createElement("div");
   wrapper.className = "session-driver-hierarchy session-orphan-hierarchy";
-  var isExpanded = expanded("desktop", "orphan", workers, matchIds);
+  var isExpanded = expanded("desktop", "orphan");
   var control = document.createElement("button");
   control.type = "button";
   control.className = "session-orphan-toggle";
@@ -152,11 +161,11 @@ export function renderDesktopOrphanHierarchy(workers, renderSession, rerender, m
   return wrapper;
 }
 
-export function renderMobileDriverHierarchy(root, renderSession, rerender) {
+export function renderMobileDriverHierarchy(root, renderSession, rerender, matchIds) {
   var wrapper = document.createElement("div");
   wrapper.className = "mobile-driver-hierarchy";
   var key = "driver:" + root.driver.id;
-  var isExpanded = expanded("mobile", key, root.workers, null);
+  var isExpanded = expanded("mobile", key);
   var childrenId = "mobile-session-workers-" + root.driver.id;
   var header = document.createElement("div");
   header.className = "mobile-driver-header";
@@ -180,16 +189,17 @@ export function renderMobileDriverHierarchy(root, renderSession, rerender) {
   children.hidden = !isExpanded;
   var current = currentWorkerIds();
   for (var i = 0; i < root.workers.length; i++) {
+    if (!visibleWorker(root.workers[i], root.driver, matchIds === undefined ? null : matchIds)) continue;
     children.appendChild(renderSession(root.workers[i], { worker: true, current: current.has(root.workers[i].id) }));
   }
   wrapper.appendChild(children);
   return wrapper;
 }
 
-export function renderMobileOrphanHierarchy(workers, renderSession, rerender) {
+export function renderMobileOrphanHierarchy(workers, renderSession, rerender, matchIds) {
   var wrapper = document.createElement("div");
   wrapper.className = "mobile-driver-hierarchy mobile-orphan-hierarchy";
-  var isExpanded = expanded("mobile", "orphan", workers, null);
+  var isExpanded = expanded("mobile", "orphan");
   var control = document.createElement("button");
   control.type = "button";
   control.className = "mobile-orphan-toggle";
@@ -207,6 +217,7 @@ export function renderMobileOrphanHierarchy(workers, renderSession, rerender) {
   children.hidden = !isExpanded;
   var current = currentWorkerIds();
   for (var i = 0; i < workers.length; i++) {
+    if (matchIds !== null && matchIds !== undefined && !matchIds.has(workers[i].id)) continue;
     children.appendChild(renderSession(workers[i], { worker: true, current: current.has(workers[i].id) }));
   }
   wrapper.appendChild(children);

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

@@ -13,7 +13,7 @@ import { showConfirm } from './app-misc.js';
 import { getUpcomingSchedules } from './scheduler.js';
 import { refreshMobileChatSheet } from './sidebar-mobile.js';
 import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
-import { openGroup, separateGroup } from './split-view.js';
+import { openGroup, openWorkerWithDriver, separateGroup } from './split-view.js';
 import { groupedSessionIds } from './split-group-helpers.js';
 import { resolvePreferredVendor } from './default-vendor.js';
 import {
@@ -31,6 +31,7 @@ import {
   renderDesktopDriverHierarchy,
   renderDesktopOrphanHierarchy
 } from './sidebar-session-hierarchy.js';
+import { summarizeSidebarItems } from './sidebar-session-counts.js';
 import {
   cancelSessionInlineRename,
   closeSessionContextMenu,
@@ -841,12 +842,14 @@ function renderSessionItem(s, options) {
     el.appendChild(workerLabel);
   }
 
+  var trailing = document.createElement("span");
+  trailing.className = "session-row-trailing";
   var ageText = relativeTime(s.lastActivity || 0);
   if (ageText) {
     var age = document.createElement("span");
     age.className = "session-item-age";
     age.textContent = ageText;
-    el.appendChild(age);
+    trailing.appendChild(age);
   }
 
   // Right-click / long-press: context menu
@@ -874,13 +877,16 @@ function renderSessionItem(s, options) {
     if (isFavoriteSession(s)) el.classList.add("is-favorite");
   }
   appendSessionCloseButton(actions, s);
-  if (actions.childNodes.length) el.appendChild(actions);
+  if (actions.childNodes.length) trailing.appendChild(actions);
+  if (trailing.childNodes.length) el.appendChild(trailing);
 
-  el.addEventListener("click", (function (id) {
+  el.addEventListener("click", (function (session, worker) {
     return function () {
       if (getWs() && store.get('connected')) {
         var pendingQuery = getListSearchQuery() || "";
-        getWs().send(JSON.stringify({ type: "switch_session", id: id }));
+        if (!worker || !openWorkerWithDriver(session)) {
+          getWs().send(JSON.stringify({ type: "switch_session", id: session.id }));
+        }
         dismissOverlayPanels();
         closeSidebar();
         if (pendingQuery) {
@@ -888,7 +894,7 @@ function renderSessionItem(s, options) {
         }
       }
     };
-  })(s.id));
+  })(s, !!itemOptions.worker));
 
   // Presence avatars (multi-user)
   renderSessionPresence(el, String(s.id));
@@ -1071,6 +1077,7 @@ export function renderSessionList(sessions) {
   var folderCtx = {
     surface: "desktop",
     searching: matchIds !== null,
+    matchIds: matchIds,
     sessions: cachedSessions,
     renderItem: function (it) {
       if (it.type === "loop") return renderLoopGroup(it.loopId, it.children, it.groupKey) || document.createElement("div");
@@ -1085,7 +1092,7 @@ export function renderSessionList(sessions) {
   // custom folders, then Unfiled. Each header has its own New session button.
   var topActions = document.createElement("div");
   topActions.className = "session-list-sticky-top";
-  topActions.appendChild(renderFolderToolbar("desktop"));
+  topActions.appendChild(renderFolderToolbar("desktop", summarizeSidebarItems(visibleItems, matchIds)));
   getSessionListEl().appendChild(topActions);
 
   var regularContainer = document.createElement("div");

package/lib/public/modules/split-group-helpers.js

@@ -72,6 +72,24 @@ export function isConfiguredWorker(groups, sessionId) {
   return false;
 }
 
+export function resolveWorkerSplitTarget(worker, sessions, groups) {
+  if (!worker || worker.sessionRole !== "worker" || !worker.parentAvailable || !Number.isInteger(worker.parentSessionId)) return null;
+  var list = sessions || [];
+  var driver = null;
+  for (var i = 0; i < list.length; i++) {
+    if (list[i].id === worker.parentSessionId && list[i].sessionRole !== "worker") driver = list[i];
+  }
+  if (!driver) return null;
+  var groupList = groups || [];
+  for (var j = 0; j < groupList.length; j++) {
+    var roles = splitGroupRoles(groupList[j]);
+    if (roles && roles.driverId === driver.id && roles.workerIds.indexOf(worker.id) !== -1) {
+      return { driver: driver, worker: worker, group: groupList[j] };
+    }
+  }
+  return { driver: driver, worker: worker, group: null };
+}
+
 export function splitWorkerCloseRequest(group, sessions, projectSlug, workerId, requestId) {
   var roles = splitGroupRoles(group);
   if (!roles || roles.version !== 2 || roles.workerIds.indexOf(workerId) === -1) return null;

package/lib/public/modules/split-view.js

@@ -6,7 +6,7 @@ import { getWs } from './ws-ref.js';
 import { getCachedSessions } from './sidebar-sessions.js';
 import { refreshIcons } from './icons.js';
 import { detachTuiView } from './session-tui-view.js';
-import { groupedSessionIds, findSplitGroup, isConfiguredWorker, splitGroupRoles, splitGroupMemberIds, splitGroupActiveAnchor, splitWorkerCloseRequest } from './split-group-helpers.js';
+import { groupedSessionIds, findSplitGroup, isConfiguredWorker, resolveWorkerSplitTarget, splitGroupRoles, splitGroupMemberIds, splitGroupActiveAnchor, splitWorkerCloseRequest } from './split-group-helpers.js';
 import { syncPairChrome } from './split-pair-ui.js';
 import { presentMarkdownEdit } from './filebrowser.js';
 import { autoStartLoginIfNeeded } from './vendor-login.js';
@@ -250,6 +250,28 @@ export function openGroup(group) {
   return true;
 }
 
+export function openWorkerWithDriver(worker) {
+  var target = resolveWorkerSplitTarget(worker, getCachedSessions(), store.get('splitGroups'));
+  if (!target) return false;
+  if (target.group) return openGroup(target.group);
+  detachTuiView();
+  store.set({
+    splitPanes: {
+      groupId: null,
+      panes: [paneForSession(target.driver.id), paneForSession(target.worker.id)],
+    },
+  });
+  var activeId = store.get('activeSessionId');
+  if (activeId !== target.driver.id) {
+    var ws = getWs();
+    if (isCurrentProjectSessionReady(store.snap(), ws)) {
+      ws.send(JSON.stringify({ type: "switch_session", id: target.driver.id }));
+    }
+  }
+  dismissSplitOverlays();
+  return true;
+}
+
 // Reload survival: when the restored active session turns out to be a split
 // group member, reopen that group. Safe to call often -- no-ops unless a
 // group member is active natively with no split open.
@@ -366,6 +388,8 @@ function handleSidebarSessionClick(event) {
   if (!sessionId) return;
   event.preventDefault();
   event.stopImmediatePropagation();
+  var session = sessionById(sessionId);
+  if (session && session.sessionRole === "worker" && openWorkerWithDriver(session)) return;
   switchNativeSession(sessionId);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "5.0.1",
+  "version": "5.0.2-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"