clay-server 4.0.0-beta.2 → 4.0.0-beta.21

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

@@ -1,78 +1,16 @@
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-import { refreshIcons, iconHtml } from './icons.js';
 import { addSystemMessage, VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
 import { openPairDialog } from './split-pair-ui.js';
 import { buildAgentVendorSelect, fillAgentModels, buildAgentEffortSelect, fillAgentEffort } from './agent-config-selects.js';
 import { showToast } from './utils.js';
 
-var menu = null;
-var button = null;
-var outsideHandler = null;
-var escapeHandler = null;
+var addWorkerButton = null;
+var handoffButton = null;
 var handoffDialog = null;
 var handoffEscapeHandler = null;
 var handoffSubmitButton = null;
 
-function closeMenu() {
-  if (menu) menu.remove();
-  menu = null;
-  if (button) button.setAttribute("aria-expanded", "false");
-  if (outsideHandler) document.removeEventListener("pointerdown", outsideHandler, true);
-  if (escapeHandler) document.removeEventListener("keydown", escapeHandler);
-  outsideHandler = null;
-  escapeHandler = null;
-}
-
-function positionMenu() {
-  if (!menu || !button) return;
-  var rect = button.getBoundingClientRect();
-  var width = menu.offsetWidth;
-  menu.style.top = Math.round(rect.bottom + 6) + "px";
-  menu.style.left = Math.max(8, Math.min(window.innerWidth - width - 8, Math.round(rect.right - width))) + "px";
-}
-
-function actionRow(icon, label, description) {
-  var row = document.createElement("button");
-  row.type = "button";
-  row.className = "session-actions-row";
-  row.setAttribute("role", "menuitem");
-  row.innerHTML = iconHtml(icon, "session-actions-row-icon") +
-    '<span class="session-actions-row-copy"><strong></strong><span></span></span>' +
-    iconHtml("chevron-right", "session-actions-row-chevron");
-  row.querySelector("strong").textContent = label;
-  row.querySelector(".session-actions-row-copy > span").textContent = description;
-  return row;
-}
-
-function menuShell(label) {
-  var el = document.createElement("div");
-  el.className = "session-actions-menu";
-  el.setAttribute("role", "menu");
-  el.setAttribute("aria-label", label);
-  document.body.appendChild(el);
-  menu = el;
-  button.setAttribute("aria-expanded", "true");
-  return el;
-}
-
-function installCloseHandlers() {
-  outsideHandler = function (event) {
-    if (menu && !menu.contains(event.target) && event.target !== button && !button.contains(event.target)) closeMenu();
-  };
-  escapeHandler = function (event) {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      closeMenu();
-      if (button) button.focus();
-    }
-  };
-  setTimeout(function () {
-    document.addEventListener("pointerdown", outsideHandler, true);
-    document.addEventListener("keydown", escapeHandler);
-  }, 0);
-}
-
 function closeHandoffDialog() {
   if (handoffDialog) handoffDialog.remove();
   if (handoffEscapeHandler) document.removeEventListener("keydown", handoffEscapeHandler);
@@ -95,10 +33,19 @@ function handoffField(labelText, control) {
 function requestHandoffDialog() {
   var ws = getWs();
   if (!ws || ws.readyState !== 1) return;
-  closeMenu();
   ws.send(JSON.stringify({ type: "handoff_session_options" }));
 }
 
+function openWorkerDialog() {
+  var sessionId = store.get('activeSessionId');
+  if (!sessionId) return;
+  openPairDialog({
+    sessionId: sessionId,
+    title: document.getElementById("header-title").textContent,
+    vendor: store.get('currentVendor') || "claude",
+  });
+}
+
 function showHandoffDialog(options) {
   closeHandoffDialog();
   var installed = options.installedVendors || [];
@@ -215,55 +162,32 @@ function showHandoffDialog(options) {
   vendorSelect.focus();
 }
 
-function showMainMenu() {
-  closeMenu();
-  var el = menuShell("Session actions");
-  var addWorker = actionRow("bot", "Add Split Worker", "Open a visible Split Worker beside this session.");
-  addWorker.classList.add("is-primary");
-  addWorker.addEventListener("click", function () {
-    var sessionId = store.get('activeSessionId');
-    if (!sessionId) return;
-    closeMenu();
-    openPairDialog({
-      sessionId: sessionId,
-      title: document.getElementById("header-title").textContent,
-      vendor: store.get('currentVendor') || "claude",
-    });
-  });
-  var handoff = actionRow("send", "Send context to another agent", "Start a new session with this conversation's context.");
-  var unavailable = !store.get('sessionHasHistory') || store.get('sessionIsProcessing');
-  handoff.disabled = unavailable;
-  handoff.title = unavailable ? "Available after the current turn is complete" : "";
-  handoff.addEventListener("click", requestHandoffDialog);
-  el.appendChild(addWorker);
-  el.appendChild(handoff);
-  refreshIcons();
-  positionMenu();
-  installCloseHandlers();
-}
-
-function updateVisibility() {
-  if (!button) return;
+function updateControls() {
+  if (!addWorkerButton || !handoffButton) return;
   var state = store.snap();
   var hidden = !state.activeSessionId || state.dmMode || state.paneMode || !!state.splitPanes || state.activeSessionMode !== "gui";
-  button.classList.toggle("hidden", hidden);
-  if (hidden) closeMenu();
+  addWorkerButton.classList.toggle("hidden", hidden);
+  handoffButton.classList.toggle("hidden", hidden);
+  handoffButton.disabled = hidden || !state.sessionHasHistory || state.sessionIsProcessing;
+  handoffButton.title = handoffButton.disabled && !hidden
+    ? "Available after the current turn is complete"
+    : "Continue in another agent";
 }
 
 export function initSessionActions() {
-  button = document.getElementById("header-session-actions-btn");
-  if (!button) return;
-  button.addEventListener("click", function () {
-    if (menu) closeMenu();
-    else showMainMenu();
-  });
+  addWorkerButton = document.getElementById("composer-add-worker-btn");
+  handoffButton = document.getElementById("composer-handoff-btn");
+  if (!addWorkerButton || !handoffButton) return;
+  addWorkerButton.addEventListener("click", openWorkerDialog);
+  handoffButton.addEventListener("click", requestHandoffDialog);
   store.subscribe(function (state, prev) {
     if (state.activeSessionId !== prev.activeSessionId || state.dmMode !== prev.dmMode ||
         state.paneMode !== prev.paneMode || state.splitPanes !== prev.splitPanes ||
-        state.activeSessionMode !== prev.activeSessionMode) updateVisibility();
+        state.activeSessionMode !== prev.activeSessionMode ||
+        state.sessionHasHistory !== prev.sessionHasHistory ||
+        state.sessionIsProcessing !== prev.sessionIsProcessing) updateControls();
   });
-  window.addEventListener("resize", closeMenu);
-  updateVisibility();
+  updateControls();
 }
 
 export function handleSessionActionMessage(msg) {

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

@@ -0,0 +1,54 @@
+// Pure projection shared by desktop, mobile and Home session lists.
+
+export function buildSessionHierarchy(sessions) {
+  var source = Array.isArray(sessions) ? sessions : [];
+  var byId = new Map();
+  var workersByParent = new Map();
+  var roots = [];
+  var orphans = [];
+  for (var i = 0; i < source.length; i++) byId.set(nodeId(source[i]), source[i]);
+  for (var j = 0; j < source.length; j++) {
+    var session = source[j];
+    if (session.sessionRole !== "worker") {
+      roots.push({ driver: session, workers: [] });
+      continue;
+    }
+    var parent = session.parentAvailable ? byId.get(parentNodeId(session)) : null;
+    if (!parent || parent.sessionRole === "worker") {
+      orphans.push(session);
+      continue;
+    }
+    if (!workersByParent.has(nodeId(parent))) workersByParent.set(nodeId(parent), []);
+    workersByParent.get(nodeId(parent)).push(session);
+  }
+  for (var k = 0; k < roots.length; k++) {
+    roots[k].workers = workersByParent.get(nodeId(roots[k].driver)) || [];
+    roots[k].workers.sort(compareWorkers);
+    roots[k].lastActivity = latestActivity(roots[k]);
+  }
+  orphans.sort(compareWorkers);
+  return { roots: roots, orphans: orphans };
+}
+
+function nodeId(session) {
+  return session && session.hierarchyId != null ? session.hierarchyId : session.id;
+}
+
+function parentNodeId(session) {
+  return session && session.parentHierarchyId != null ? session.parentHierarchyId : session.parentSessionId;
+}
+
+function compareWorkers(a, b) {
+  var ag = typeof a.workerGeneration === "number" ? a.workerGeneration : 0;
+  var bg = typeof b.workerGeneration === "number" ? b.workerGeneration : 0;
+  if (ag !== bg) return bg - ag;
+  return (b.lastActivity || 0) - (a.lastActivity || 0);
+}
+
+export function latestActivity(root) {
+  var latest = root.driver.lastActivity || 0;
+  for (var i = 0; i < root.workers.length; i++) {
+    if ((root.workers[i].lastActivity || 0) > latest) latest = root.workers[i].lastActivity || 0;
+  }
+  return latest;
+}

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

@@ -37,6 +37,11 @@ import { openHomeChat } from './home-mate-chat.js';
 import { openTerminal } from './terminal.js';
 import { requestKnowledgeList } from './mate-knowledge.js';
 import { loadRootDirectory } from './filebrowser.js';
+import {
+  prepareSidebarHierarchy,
+  renderMobileDriverHierarchy,
+  renderMobileOrphanHierarchy
+} from './sidebar-session-hierarchy.js';
 
 // --- Mobile state ---
 var mobileChatSheetOpen = false;
@@ -374,9 +379,11 @@ function renderSheetSessions(listEl) {
 }
 
 // Helper: create a mobile session item element
-function createMobileSessionItem(s) {
+function createMobileSessionItem(s, options) {
+  var itemOptions = options || {};
   var el = document.createElement("button");
   el.className = "mobile-session-item" + (s.active ? " active" : "");
+  if (itemOptions.worker) el.classList.add("mobile-worker-item");
 
   // Vendor badge (legacy sessions without a vendor are Claude)
   var mVendor = s.vendor || "claude";
@@ -398,6 +405,13 @@ function createMobileSessionItem(s) {
   titleSpan.appendChild(document.createTextNode(s.title || "New Session"));
   el.appendChild(titleSpan);
 
+  if (itemOptions.worker) {
+    var generation = document.createElement("span");
+    generation.className = "mobile-worker-generation" + (itemOptions.current ? " current" : "");
+    generation.textContent = itemOptions.current ? "Current" : (s.workerGeneration ? "Gen " + s.workerGeneration : "Worker");
+    el.appendChild(generation);
+  }
+
   // Unread badge (right side)
   if (s.unread > 0 && !s.active) {
     var badge = document.createElement("span");
@@ -720,10 +734,13 @@ function renderMobileSessionsInto(container) {
 
   // Partition: loop sessions vs normal sessions (same logic as desktop renderSessionList)
   var sessions = getCachedSessions();
+  var hierarchy = prepareSidebarHierarchy(sessions);
+  var hierarchyByDriver = hierarchy.byDriver;
   var loopGroups = {};
   var normalSessions = [];
   for (var i = 0; i < sessions.length; i++) {
     var s = sessions[i];
+    if (s.sessionRole === "worker") continue;
     if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph" && s.loop.source !== "debate") {
       continue;
     } else if (s.loop && s.loop.loopId) {
@@ -740,7 +757,14 @@ function renderMobileSessionsInto(container) {
   // Build virtual items
   var items = [];
   for (var j = 0; j < normalSessions.length; j++) {
-    items.push({ type: "session", data: normalSessions[j], lastActivity: normalSessions[j].lastActivity || 0 });
+    var driverRoot = hierarchyByDriver.get(normalSessions[j].id);
+    if (driverRoot) items.push({ type: "driver-hierarchy", data: driverRoot.driver, root: driverRoot, lastActivity: driverRoot.lastActivity });
+    else items.push({ type: "session", data: normalSessions[j], lastActivity: normalSessions[j].lastActivity || 0 });
+  }
+  if (hierarchy.orphans.length) {
+    var orphanActivity = 0;
+    for (var oi = 0; oi < hierarchy.orphans.length; oi++) orphanActivity = Math.max(orphanActivity, hierarchy.orphans[oi].lastActivity || 0);
+    items.push({ type: "orphan-workers", workers: hierarchy.orphans, lastActivity: orphanActivity });
   }
   var groupKeys = Object.keys(loopGroups);
   for (var k = 0; k < groupKeys.length; k++) {
@@ -757,8 +781,8 @@ function renderMobileSessionsInto(container) {
 
   // Sort by lastActivity descending
   items.sort(function (a, b) {
-    var aBookmarked = !!(a.type === "loop" ? false : a.data && a.data.bookmarked);
-    var bBookmarked = !!(b.type === "loop" ? false : b.data && b.data.bookmarked);
+    var aBookmarked = !!(a.type === "loop" || a.type === "orphan-workers" ? false : a.data && a.data.bookmarked);
+    var bBookmarked = !!(b.type === "loop" || b.type === "orphan-workers" ? false : b.data && b.data.bookmarked);
     if (aBookmarked !== bBookmarked) return aBookmarked ? -1 : 1;
     return (b.lastActivity || 0) - (a.lastActivity || 0);
   });
@@ -767,7 +791,7 @@ function renderMobileSessionsInto(container) {
   var regularItems = [];
   for (var n = 0; n < items.length; n++) {
     var item = items[n];
-    if (item.type === "session" && item.data && item.data.bookmarked) {
+    if ((item.type === "session" || item.type === "driver-hierarchy") && item.data && item.data.bookmarked) {
       bookmarkedItems.push(item);
     } else {
       regularItems.push(item);
@@ -781,7 +805,8 @@ function renderMobileSessionsInto(container) {
     container.appendChild(bookmarkedHeader);
 
     for (var bi = 0; bi < bookmarkedItems.length; bi++) {
-      container.appendChild(createMobileSessionItem(bookmarkedItems[bi].data));
+      if (bookmarkedItems[bi].type === "driver-hierarchy") container.appendChild(renderMobileDriverHierarchy(bookmarkedItems[bi].root, createMobileSessionItem, refreshMobileChatSheet));
+      else container.appendChild(createMobileSessionItem(bookmarkedItems[bi].data));
     }
   }
 
@@ -800,6 +825,10 @@ function renderMobileSessionsInto(container) {
     }
     if (item.type === "loop") {
       container.appendChild(createMobileLoopGroup(item.loopId, item.children, item.groupKey));
+    } else if (item.type === "driver-hierarchy") {
+      container.appendChild(renderMobileDriverHierarchy(item.root, createMobileSessionItem, refreshMobileChatSheet));
+    } else if (item.type === "orphan-workers") {
+      container.appendChild(renderMobileOrphanHierarchy(item.workers, createMobileSessionItem, refreshMobileChatSheet));
     } else {
       container.appendChild(createMobileSessionItem(item.data));
     }
@@ -887,8 +916,7 @@ function renderSheetMateProfile(listEl) {
   var actions = [
     { icon: "book-open", label: "Knowledge", btnId: "mate-knowledge-btn", countId: "mate-knowledge-count" },
     { icon: "sticky-note", label: "Sticky Notes", btnId: "sticky-notes-sidebar-btn", countId: "sticky-notes-sidebar-count" },
-    { icon: "puzzle", label: "Skills", btnId: "mate-skills-btn" },
-    { icon: "calendar", label: "Scheduled Tasks", btnId: "mate-scheduler-btn" }
+    { icon: "puzzle", label: "Skills", btnId: "mate-skills-btn" }
   ];
 
   for (var i = 0; i < actions.length; i++) {
@@ -1005,12 +1033,11 @@ function renderSheetTools(listEl) {
     { icon: "brain", label: "Memory", action: "mate-memory" },
     { icon: "book-open", label: "Knowledge", action: "mate-knowledge" },
     { icon: "sticky-note", label: "Sticky Notes", action: "mate-sticky" },
-    { icon: "puzzle", label: "Skills", action: "mate-skills" },
-    { icon: "calendar-clock", label: "Scheduled Tasks", action: "mate-scheduler" }
+    { icon: "puzzle", label: "Skills", action: "mate-skills" }
   ] : [
     { icon: "folder-tree", label: "Files", action: "files" },
     { icon: "square-terminal", label: "Terminal", action: "terminal" },
-    { icon: "calendar-clock", label: "Scheduled Tasks", action: "scheduler" }
+    { icon: "notebook-tabs", label: "Logs", action: "project-logs" }
   ];
 
   for (var i = 0; i < items.length; i++) {
@@ -1025,8 +1052,8 @@ function renderSheetTools(listEl) {
           setTimeout(function () { openMobileSheet("files"); }, 250);
         } else if (item.action === "terminal") {
           openTerminal();
-        } else if (item.action === "scheduler") {
-          targetId = "scheduler-btn";
+        } else if (item.action === "project-logs") {
+          targetId = "project-logs-btn";
         } else if (item.action === "mate-knowledge") {
           setTimeout(function () { openMobileSheet("mate-knowledge"); }, 250);
           return;
@@ -1036,8 +1063,6 @@ function renderSheetTools(listEl) {
           targetId = "mate-skills-btn";
         } else if (item.action === "mate-memory") {
           targetId = "mate-memory-btn";
-        } else if (item.action === "mate-scheduler") {
-          targetId = "mate-scheduler-btn";
         } else if (item.action === "mate-debate") {
           targetId = "mate-debate-btn";
         }

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

@@ -0,0 +1,214 @@
+// Shared Driver/Worker hierarchy behavior for the project desktop and mobile lists.
+
+import { iconHtml } from './icons.js';
+import { store } from './store.js';
+import { buildSessionHierarchy } from './session-hierarchy.js';
+
+var expansionBySurface = {
+  desktop: new Map(),
+  mobile: new Map(),
+};
+
+export function prepareSidebarHierarchy(sessions) {
+  var hierarchy = buildSessionHierarchy(sessions);
+  var byDriver = new Map();
+  var sessionIds = new Set();
+  for (var i = 0; i < hierarchy.roots.length; i++) {
+    var root = hierarchy.roots[i];
+    if (!root.workers.length) continue;
+    byDriver.set(root.driver.id, root);
+    sessionIds.add(root.driver.id);
+    for (var j = 0; j < root.workers.length; j++) sessionIds.add(root.workers[j].id);
+  }
+  for (var k = 0; k < hierarchy.orphans.length; k++) sessionIds.add(hierarchy.orphans[k].id);
+  return {
+    byDriver: byDriver,
+    orphans: hierarchy.orphans,
+    sessionIds: sessionIds,
+  };
+}
+
+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);
+  }
+  return result;
+}
+
+export function hierarchyItemMatches(item, matchIds) {
+  if (matchIds === null) return true;
+  if (item.type === "driver-hierarchy") {
+    if (matchIds.has(item.root.driver.id)) return true;
+    for (var i = 0; i < item.root.workers.length; i++) {
+      if (matchIds.has(item.root.workers[i].id)) return true;
+    }
+    return false;
+  }
+  if (item.type === "orphan-workers") {
+    for (var j = 0; j < item.workers.length; j++) {
+      if (matchIds.has(item.workers[j].id)) return true;
+    }
+    return false;
+  }
+  return true;
+}
+
+function expanded(surface, key, workers, matchIds) {
+  var state = expansionBySurface[surface];
+  if (state.has(key)) return state.get(key);
+  return defaultHierarchyExpanded(workers, matchIds, currentWorkerIds());
+}
+
+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;
+  }
+  return false;
+}
+
+function toggle(surface, key, wasExpanded, rerender) {
+  expansionBySurface[surface].set(key, !wasExpanded);
+  rerender();
+}
+
+function visibleWorker(worker, driver, matchIds) {
+  return matchIds === null || matchIds.has(worker.id) || matchIds.has(driver.id);
+}
+
+export function renderDesktopDriverHierarchy(root, renderSession, rerender, matchIds) {
+  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 childrenId = "session-workers-" + root.driver.id;
+  var header = document.createElement("div");
+  header.className = "session-driver-header";
+  var row = renderSession(root.driver);
+  row.classList.add("session-driver-item");
+  var control = document.createElement("button");
+  control.type = "button";
+  control.className = "session-driver-toggle";
+  control.setAttribute("aria-expanded", String(isExpanded));
+  control.setAttribute("aria-controls", childrenId);
+  control.setAttribute("aria-label", (isExpanded ? "Collapse" : "Expand") + " Workers for " + (root.driver.title || "New Session"));
+  control.innerHTML = iconHtml("chevron-right");
+  var children = document.createElement("div");
+  children.id = childrenId;
+  children.className = "session-worker-children";
+  children.setAttribute("role", "group");
+  children.setAttribute("aria-label", "Workers for " + (root.driver.title || "New Session"));
+  children.hidden = !isExpanded;
+  control.addEventListener("click", function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var nextExpanded = !isExpanded;
+    expansionBySurface.desktop.set(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;
+    isExpanded = nextExpanded;
+  });
+  header.appendChild(control);
+  header.appendChild(row);
+  wrapper.appendChild(header);
+
+  var current = currentWorkerIds();
+  for (var i = 0; i < root.workers.length; i++) {
+    if (!visibleWorker(root.workers[i], root.driver, matchIds)) continue;
+    children.appendChild(renderSession(root.workers[i], { worker: true, current: current.has(root.workers[i].id) }));
+  }
+  wrapper.appendChild(children);
+  return wrapper;
+}
+
+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 control = document.createElement("button");
+  control.type = "button";
+  control.className = "session-orphan-toggle";
+  control.setAttribute("aria-expanded", String(isExpanded));
+  control.setAttribute("aria-controls", "session-orphan-workers");
+  control.innerHTML = iconHtml("chevron-right") + '<span class="session-orphan-title">Unavailable Driver</span><span class="session-worker-count">' + workers.length + "</span>";
+  control.addEventListener("click", function () { toggle("desktop", "orphan", isExpanded, rerender); });
+  wrapper.appendChild(control);
+
+  var children = document.createElement("div");
+  children.id = "session-orphan-workers";
+  children.className = "session-worker-children";
+  children.setAttribute("role", "group");
+  children.setAttribute("aria-label", "Workers whose Driver is unavailable");
+  children.hidden = !isExpanded;
+  var current = currentWorkerIds();
+  for (var i = 0; i < workers.length; i++) {
+    if (matchIds !== null && !matchIds.has(workers[i].id)) continue;
+    children.appendChild(renderSession(workers[i], { worker: true, current: current.has(workers[i].id) }));
+  }
+  wrapper.appendChild(children);
+  return wrapper;
+}
+
+export function renderMobileDriverHierarchy(root, renderSession, rerender) {
+  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 childrenId = "mobile-session-workers-" + root.driver.id;
+  var header = document.createElement("div");
+  header.className = "mobile-driver-header";
+  var control = document.createElement("button");
+  control.type = "button";
+  control.className = "mobile-driver-toggle";
+  control.setAttribute("aria-expanded", String(isExpanded));
+  control.setAttribute("aria-controls", childrenId);
+  control.setAttribute("aria-label", (isExpanded ? "Collapse" : "Expand") + " Workers for " + (root.driver.title || "New Session"));
+  control.innerHTML = iconHtml("chevron-right");
+  control.addEventListener("click", function () { toggle("mobile", key, isExpanded, rerender); });
+  header.appendChild(control);
+  header.appendChild(renderSession(root.driver));
+  wrapper.appendChild(header);
+
+  var children = document.createElement("div");
+  children.id = childrenId;
+  children.className = "mobile-worker-children";
+  children.setAttribute("role", "group");
+  children.setAttribute("aria-label", "Workers for " + (root.driver.title || "New Session"));
+  children.hidden = !isExpanded;
+  var current = currentWorkerIds();
+  for (var i = 0; i < root.workers.length; i++) {
+    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) {
+  var wrapper = document.createElement("div");
+  wrapper.className = "mobile-driver-hierarchy mobile-orphan-hierarchy";
+  var isExpanded = expanded("mobile", "orphan", workers, null);
+  var control = document.createElement("button");
+  control.type = "button";
+  control.className = "mobile-orphan-toggle";
+  control.setAttribute("aria-expanded", String(isExpanded));
+  control.setAttribute("aria-controls", "mobile-orphan-workers");
+  control.innerHTML = iconHtml("chevron-right") + "<span>Unavailable Driver</span><span>" + workers.length + "</span>";
+  control.addEventListener("click", function () { toggle("mobile", "orphan", isExpanded, rerender); });
+  wrapper.appendChild(control);
+
+  var children = document.createElement("div");
+  children.id = "mobile-orphan-workers";
+  children.className = "mobile-worker-children";
+  children.setAttribute("role", "group");
+  children.setAttribute("aria-label", "Workers whose Driver is unavailable");
+  children.hidden = !isExpanded;
+  var current = currentWorkerIds();
+  for (var i = 0; i < workers.length; i++) {
+    children.appendChild(renderSession(workers[i], { worker: true, current: current.has(workers[i].id) }));
+  }
+  wrapper.appendChild(children);
+  return wrapper;
+}