clay-server 4.0.0-beta.13 → 4.0.0-beta.15

package/lib/public/css/mobile-nav.css

@@ -612,6 +612,86 @@
     font-weight: 600;
   }
 
+  .mobile-driver-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .mobile-driver-header > .mobile-session-item {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .mobile-driver-toggle {
+    width: 32px;
+    height: 44px;
+    padding: 0;
+    border: 0;
+    border-radius: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-dimmer);
+    background: transparent;
+  }
+
+  .mobile-driver-toggle .lucide,
+  .mobile-orphan-toggle .lucide {
+    width: 15px;
+    height: 15px;
+    transition: transform 0.15s ease;
+  }
+
+  .mobile-driver-toggle[aria-expanded="true"] .lucide,
+  .mobile-orphan-toggle[aria-expanded="true"] .lucide {
+    transform: rotate(90deg);
+  }
+
+  .mobile-worker-children {
+    margin-left: 16px;
+    padding-left: 12px;
+    border-left: 1px solid color-mix(in srgb, var(--text-dimmer) 24%, transparent);
+  }
+
+  .mobile-worker-item {
+    min-height: 43px;
+    padding-block: 9px;
+  }
+
+  .mobile-worker-generation {
+    flex-shrink: 0;
+    padding: 2px 6px;
+    border-radius: 999px;
+    color: var(--text-dimmer);
+    background: rgba(var(--overlay-rgb), 0.04);
+    font-size: 10px;
+    font-weight: 650;
+  }
+
+  .mobile-worker-generation.current {
+    color: var(--success);
+    background: color-mix(in srgb, var(--success) 10%, transparent);
+  }
+
+  .mobile-orphan-toggle {
+    width: 100%;
+    min-height: 42px;
+    padding: 8px 12px;
+    border: 0;
+    border-radius: 9px;
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    color: var(--text-dimmer);
+    background: transparent;
+    font: inherit;
+    text-align: left;
+  }
+
+  .mobile-orphan-toggle span:first-of-type {
+    flex: 1;
+  }
+
   .mobile-session-title {
     flex: 1;
     display: inline-flex;

package/lib/public/css/sidebar.css

@@ -926,6 +926,98 @@
   transition: opacity 0.15s;
 }
 
+.session-driver-hierarchy {
+  position: relative;
+}
+
+.session-driver-toggle {
+  width: 18px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--text-dimmer);
+  background: transparent;
+  cursor: pointer;
+}
+
+.session-driver-toggle:hover,
+.session-driver-toggle:focus-visible,
+.session-orphan-toggle:hover,
+.session-orphan-toggle:focus-visible {
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.05);
+  outline: none;
+}
+
+.session-driver-toggle .lucide,
+.session-orphan-toggle .lucide {
+  width: 13px;
+  height: 13px;
+  transition: transform 0.15s ease;
+}
+
+.session-driver-toggle[aria-expanded="true"] .lucide,
+.session-orphan-toggle[aria-expanded="true"] .lucide {
+  transform: rotate(90deg);
+}
+
+.session-worker-children {
+  margin-left: 17px;
+  padding-left: 8px;
+  border-left: 1px solid color-mix(in srgb, var(--text-dimmer) 22%, transparent);
+}
+
+.session-worker-item {
+  height: 33px;
+  border-radius: 7px;
+}
+
+.session-worker-generation,
+.session-worker-count {
+  flex-shrink: 0;
+  padding: 1px 5px;
+  border-radius: 999px;
+  color: var(--text-dimmer);
+  background: rgba(var(--overlay-rgb), 0.04);
+  font-size: 9px;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+}
+
+.session-worker-generation.current {
+  color: var(--success);
+  background: color-mix(in srgb, var(--success) 10%, transparent);
+}
+
+.session-orphan-toggle {
+  width: 100%;
+  height: 32px;
+  padding: 0 9px 0 4px;
+  border: 0;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--text-dimmer);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.session-orphan-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+}
+
 .split-group-text {
   display: flex;
   align-items: center;

package/lib/public/css/worker-proposal.css

@@ -1,4 +1,4 @@
-/* Inline approval surface for Fable's Driver/Worker recommendation. */
+/* Inline approval surface for user-controlled Split Worker configuration. */
 
 .worker-proposal-card {
   width: min(var(--content-width), calc(100% - 40px));
@@ -67,6 +67,30 @@
 
 .worker-proposal-plan li::marker { color: var(--accent2); font-weight: 700; }
 
+.worker-proposal-rationale {
+  display: grid;
+  gap: 4px;
+  margin: 0 0 14px;
+  padding: 10px 12px;
+  border-left: 2px solid color-mix(in srgb, var(--accent2) 62%, var(--border));
+  background: color-mix(in srgb, var(--accent2) 5%, transparent);
+}
+
+.worker-proposal-rationale > span {
+  color: var(--accent2);
+  font-size: 9px;
+  font-weight: 750;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.worker-proposal-rationale p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
 .worker-proposal-config {
   display: grid;
   grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1.2fr) minmax(190px, auto);
@@ -100,6 +124,15 @@
 .worker-proposal-effort-btn:hover { color: var(--text); }
 .worker-proposal-effort-btn.active { background: color-mix(in srgb, var(--accent2) 18%, var(--bg)); color: var(--accent2); }
 
+.worker-proposal-decision {
+  margin-top: 9px;
+  color: var(--text-dimmer);
+  font-size: 9px;
+  line-height: 1.35;
+}
+
+.worker-proposal-decision.automatic { color: var(--accent2); }
+
 .worker-proposal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
 .worker-proposal-action { min-height: 34px; padding: 0 13px; border-radius: 9px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
 .worker-proposal-action.secondary { border: 1px solid var(--border); background: transparent; color: var(--text-muted); }

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

@@ -65,8 +65,9 @@ import { getModelEffortLevels, accumulateUsage, updateUsagePanel, accumulateCont
 import { updateProjectList, resetClientState, showUpdateAvailable, handleRemoveProjectCheckResult, handleRemoveProjectResult, handleBrowseDirResult, handleAddProjectResult, handleCloneProgress } from './app-projects.js';
 import { updateHistorySentinel, prependOlderHistory } from './app-header.js';
 import { hideHomeHub, showHomeHub } from './app-home-hub.js';
-import { handleToolsState, handleToolInstalled, handleToolRemoved, handleToolStorageResult, handleToolLlmResult, handleToolsError, handleToolControlRequest } from './home-tools.js';
+import { handleToolsState, handleToolInstalled, handleToolRemoved, handleToolStorageResult, handleToolLlmResult, handleToolsError, handleToolControlRequest, handleToolServerState, handleToolServerEvent } from './home-tools.js';
 import { handleHomeDockState } from './home-dock.js';
+import { handleToolFrameUrlState } from './home-tool-frame.js';
 import { enterDmMode, exitDmMode, handleMateCreatedInApp, updateMateIconStatus, appendDmMessage, showDmTypingIndicator, buildMateInterviewPrompt } from './app-dm.js';
 import { handleRateLimitEvent, updateRateLimitUsage, addScheduledMessageBubble, removeScheduledMessageBubble, handleFastModeState } from './app-rate-limit.js';
 import { handleRemoteCursorMove, handleRemoteCursorLeave, handleRemoteSelection, clearRemoteCursors } from './app-cursors.js';
@@ -627,6 +628,18 @@ export function processMessage(msg) {
         handleToolControlRequest(msg);
         break;
 
+      case "tool_server_state":
+        handleToolServerState(msg);
+        break;
+
+      case "tool_server_event":
+        handleToolServerEvent(msg);
+        break;
+
+      case "tool_frame_url_state":
+        handleToolFrameUrlState(msg);
+        break;
+
       case "input_sync":
         if (!store.get('dmMode')) handleInputSync(msg.text);
         break;

package/lib/public/modules/home-conversations-sheet.js

@@ -3,12 +3,14 @@
 import { store } from './store.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { getHomeSessionConversations, createHomeSessionActionsTrigger, disposeHomeSessionActionsMenu } from './home-session-actions.js';
+import { buildSessionHierarchy } from './session-hierarchy.js';
 
 var overlay = null;
 var searchInput = null;
 var listEl = null;
 var sheetOpener = null;
 var selectConversation = null;
+var hierarchyExpansion = new Map();
 
 function closeSheet(restoreFocus) {
   if (!overlay) return;
@@ -54,66 +56,118 @@ function handleKeydown(event) {
   }
 }
 
+function conversationMatches(conversation, query) {
+  if (!query) return true;
+  return conversation.title.toLowerCase().indexOf(query) !== -1 || conversation.mateName.toLowerCase().indexOf(query) !== -1;
+}
+
+function createSheetItem(conversation, worker) {
+  var item = document.createElement("div");
+  item.className = "home-conversations-sheet-item" + (worker ? " home-conversations-worker-item" : "");
+  var row = document.createElement("button");
+  row.type = "button";
+  row.className = "home-conversations-sheet-row";
+  var copy = document.createElement("span");
+  copy.className = "home-conversations-sheet-copy";
+  var title = document.createElement("span");
+  title.className = "home-conversations-sheet-row-title";
+  title.textContent = conversation.title;
+  copy.appendChild(title);
+  var mate = document.createElement("span");
+  mate.className = "home-conversations-sheet-row-mate";
+  mate.textContent = worker && conversation.workerGeneration ? conversation.mateName + " · Worker generation " + conversation.workerGeneration : conversation.mateName;
+  copy.appendChild(mate);
+  row.appendChild(copy);
+  if (conversation.isProcessing) {
+    var activity = document.createElement("span");
+    activity.className = "home-sidebar-processing";
+    activity.setAttribute("aria-label", "Processing");
+    row.appendChild(activity);
+  }
+  row.addEventListener("click", function () {
+    var onSelect = selectConversation;
+    closeSheet();
+    if (onSelect) onSelect(conversation.mateId, conversation.sessionId);
+  });
+  var active = conversation.mateId === store.get('homeChatMateId') && conversation.sessionId === store.get('homeChatSessionId');
+  if (active) {
+    item.classList.add("is-active");
+    row.setAttribute("aria-current", "page");
+  }
+  var detailsReturn = sheetOpener;
+  var actions = createHomeSessionActionsTrigger(conversation, {
+    detailsOpener: detailsReturn,
+    beforeOpenDetails: function () { closeSheet(false); },
+  });
+  item.appendChild(row);
+  item.appendChild(actions);
+  return item;
+}
+
+function createSheetHierarchy(root, query) {
+  if (!root.workers.length) return createSheetItem(root.driver, false);
+  var key = root.driver.hierarchyId;
+  var expanded = hierarchyExpansion.has(key) ? hierarchyExpansion.get(key) : !!query;
+  for (var ai = 0; ai < root.workers.length; ai++) {
+    if (root.workers[ai].mateId === store.get('homeChatMateId') && root.workers[ai].sessionId === store.get('homeChatSessionId')) expanded = true;
+  }
+  var wrapper = document.createElement("div");
+  wrapper.className = "home-conversations-driver-hierarchy";
+  var header = document.createElement("div");
+  header.className = "home-conversations-driver-header";
+  var toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = "home-conversations-driver-toggle";
+  var childrenId = "home-sheet-workers-" + String(key).replace(/[^a-zA-Z0-9_-]/g, "-");
+  toggle.setAttribute("aria-expanded", String(expanded));
+  toggle.setAttribute("aria-controls", childrenId);
+  toggle.setAttribute("aria-label", (expanded ? "Collapse" : "Expand") + " Workers for " + (root.driver.title || "Unavailable Driver"));
+  toggle.innerHTML = iconHtml("chevron-right");
+  if (!root.driver.sessionId) toggle.insertAdjacentHTML("beforeend", "<span>Unavailable Driver</span><span>" + root.workers.length + "</span>");
+  toggle.addEventListener("click", function () {
+    hierarchyExpansion.set(key, !expanded);
+    renderRows();
+  });
+  header.appendChild(toggle);
+  if (root.driver.sessionId) header.appendChild(createSheetItem(root.driver, false));
+  wrapper.appendChild(header);
+  var children = document.createElement("div");
+  children.id = childrenId;
+  children.className = "home-conversations-worker-children";
+  children.setAttribute("role", "group");
+  children.setAttribute("aria-label", "Workers for " + (root.driver.title || "Unavailable Driver"));
+  children.hidden = !expanded;
+  var driverMatched = root.driver.sessionId && conversationMatches(root.driver, query);
+  for (var i = 0; i < root.workers.length; i++) {
+    if (!query || driverMatched || conversationMatches(root.workers[i], query)) children.appendChild(createSheetItem(root.workers[i], true));
+  }
+  wrapper.appendChild(children);
+  return wrapper;
+}
+
 function renderRows() {
   if (!listEl) return;
   var query = searchInput ? searchInput.value.trim().toLowerCase() : "";
-  var all = getHomeSessionConversations().filter(function (conversation) {
-    if (!query) return true;
-    return conversation.title.toLowerCase().indexOf(query) !== -1 || conversation.mateName.toLowerCase().indexOf(query) !== -1;
+  var hierarchy = buildSessionHierarchy(getHomeSessionConversations());
+  var roots = hierarchy.roots.filter(function (root) {
+    if (conversationMatches(root.driver, query)) return true;
+    for (var i = 0; i < root.workers.length; i++) if (conversationMatches(root.workers[i], query)) return true;
+    return false;
   });
+  var orphans = hierarchy.orphans.filter(function (worker) { return conversationMatches(worker, query); });
   disposeHomeSessionActionsMenu();
   listEl.innerHTML = "";
-  if (!all.length) {
+  if (!roots.length && !orphans.length) {
     var empty = document.createElement("div");
     empty.className = "home-conversations-sheet-empty";
     empty.textContent = query ? "No chats match your search." : "No chats yet.";
     listEl.appendChild(empty);
     return;
   }
-  for (var i = 0; i < all.length; i++) {
-    (function (conversation) {
-      var item = document.createElement("div");
-      item.className = "home-conversations-sheet-item";
-      var row = document.createElement("button");
-      row.type = "button";
-      row.className = "home-conversations-sheet-row";
-      var copy = document.createElement("span");
-      copy.className = "home-conversations-sheet-copy";
-      var title = document.createElement("span");
-      title.className = "home-conversations-sheet-row-title";
-      title.textContent = conversation.title;
-      copy.appendChild(title);
-      var mate = document.createElement("span");
-      mate.className = "home-conversations-sheet-row-mate";
-      mate.textContent = conversation.mateName;
-      copy.appendChild(mate);
-      row.appendChild(copy);
-      if (conversation.isProcessing) {
-        var activity = document.createElement("span");
-        activity.className = "home-sidebar-processing";
-        activity.setAttribute("aria-label", "Processing");
-        row.appendChild(activity);
-      }
-      row.addEventListener("click", function () {
-        var onSelect = selectConversation;
-        closeSheet();
-        if (onSelect) onSelect(conversation.mateId, conversation.sessionId);
-      });
-      var active = conversation.mateId === store.get('homeChatMateId') && conversation.sessionId === store.get('homeChatSessionId');
-      if (active) {
-        item.classList.add("is-active");
-        row.setAttribute("aria-current", "page");
-      }
-      var detailsReturn = sheetOpener;
-      var actions = createHomeSessionActionsTrigger(conversation, {
-        detailsOpener: detailsReturn,
-        beforeOpenDetails: function () { closeSheet(false); },
-      });
-      item.appendChild(row);
-      item.appendChild(actions);
-      listEl.appendChild(item);
-    })(all[i]);
-  }
+  roots.sort(function (a, b) { return b.lastActivity - a.lastActivity; });
+  for (var i = 0; i < roots.length; i++) listEl.appendChild(createSheetHierarchy(roots[i], query));
+  if (orphans.length) listEl.appendChild(createSheetHierarchy({ driver: { hierarchyId: "orphan-sheet", title: "Unavailable Driver" }, workers: orphans }, query));
+  refreshIcons();
 }
 
 export function openHomeConversationsSheet(onSelect, opener) {

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

@@ -53,6 +53,12 @@ export function getHomeSessionConversations() {
         createdAt: typeof sessions[j].createdAt === "number" ? sessions[j].createdAt : 0,
         lastActivity: typeof sessions[j].lastActivity === "number" ? sessions[j].lastActivity : 0,
         isProcessing: sessions[j].isProcessing === true,
+        sessionRole: sessions[j].sessionRole === "worker" ? "worker" : "driver",
+        parentSessionId: safeText(sessions[j].parentSessionId, null),
+        parentAvailable: sessions[j].parentAvailable === true,
+        workerGeneration: typeof sessions[j].workerGeneration === "number" ? sessions[j].workerGeneration : null,
+        hierarchyId: mateIds[i] + ":" + sessions[j].id,
+        parentHierarchyId: sessions[j].parentSessionId ? mateIds[i] + ":" + sessions[j].parentSessionId : null,
       });
     }
   }

package/lib/public/modules/home-sidebar-chat-list.js

@@ -1,7 +1,98 @@
-// Complete, globally sorted Home chat archive rendered in the sidebar.
+// Complete Home chat archive rendered as provenance-preserving session trees.
 
 import { store } from './store.js';
+import { iconHtml, refreshIcons } from './icons.js';
 import { getHomeSessionConversations, createHomeSessionActionsTrigger, disposeHomeSessionActionsMenu } from './home-session-actions.js';
+import { buildSessionHierarchy } from './session-hierarchy.js';
+
+var expansion = new Map();
+
+function isExpanded(key, workers) {
+  if (expansion.has(key)) return expansion.get(key);
+  for (var i = 0; i < workers.length; i++) {
+    if (workers[i].mateId === store.get('homeChatMateId') && workers[i].sessionId === store.get('homeChatSessionId')) return true;
+  }
+  return false;
+}
+
+function createChatItem(chat, openConversation, worker) {
+  var item = document.createElement("div");
+  item.className = "home-sidebar-recent-item" + (worker ? " home-sidebar-worker-item" : "");
+  var row = document.createElement("button");
+  row.type = "button";
+  row.className = "home-sidebar-recent-row";
+  row.setAttribute("aria-label", chat.title + ", with " + chat.mateName);
+  if (chat.mateId === store.get('homeChatMateId') && chat.sessionId === store.get('homeChatSessionId')) {
+    item.classList.add("is-active");
+    row.setAttribute("aria-current", "page");
+  }
+  var copy = document.createElement("span");
+  copy.className = "home-sidebar-recent-copy";
+  var title = document.createElement("span");
+  title.className = "home-sidebar-recent-title";
+  title.textContent = chat.title;
+  var mate = document.createElement("span");
+  mate.className = "home-sidebar-recent-mate";
+  mate.textContent = worker && chat.workerGeneration ? chat.mateName + " · Worker generation " + chat.workerGeneration : chat.mateName;
+  copy.appendChild(title);
+  copy.appendChild(mate);
+  row.appendChild(copy);
+  if (chat.isProcessing) {
+    var activity = document.createElement("span");
+    activity.className = "home-sidebar-processing";
+    activity.setAttribute("aria-label", "Processing");
+    row.appendChild(activity);
+  }
+  row.addEventListener("click", function () {
+    if (typeof openConversation === "function") openConversation(chat.mateId, chat.sessionId);
+  });
+  item.appendChild(row);
+  item.appendChild(createHomeSessionActionsTrigger(chat));
+  return item;
+}
+
+function createHierarchy(root, openConversation) {
+  if (!root.workers.length) return createChatItem(root.driver, openConversation, false);
+  var wrapper = document.createElement("div");
+  wrapper.className = "home-sidebar-driver-hierarchy";
+  var key = root.driver.hierarchyId;
+  var expanded = isExpanded(key, root.workers);
+  var childrenId = "home-sidebar-workers-" + String(key).replace(/[^a-zA-Z0-9_-]/g, "-");
+  var header = document.createElement("div");
+  header.className = "home-sidebar-driver-header";
+  var toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = "home-sidebar-driver-toggle";
+  toggle.setAttribute("aria-expanded", String(expanded));
+  toggle.setAttribute("aria-controls", childrenId);
+  toggle.setAttribute("aria-label", (expanded ? "Collapse" : "Expand") + " Workers for " + (root.driver.title || "Unavailable Driver"));
+  toggle.innerHTML = iconHtml("chevron-right");
+  toggle.addEventListener("click", function () {
+    expansion.set(key, !expanded);
+    renderHomeSidebarChats(openConversation);
+  });
+  header.appendChild(toggle);
+  if (root.driver.sessionId) header.appendChild(createChatItem(root.driver, openConversation, false));
+  wrapper.appendChild(header);
+  var children = document.createElement("div");
+  children.id = childrenId;
+  children.className = "home-sidebar-worker-children";
+  children.setAttribute("role", "group");
+  children.setAttribute("aria-label", "Workers for " + (root.driver.title || "Unavailable Driver"));
+  children.hidden = !expanded;
+  for (var i = 0; i < root.workers.length; i++) children.appendChild(createChatItem(root.workers[i], openConversation, true));
+  wrapper.appendChild(children);
+  return wrapper;
+}
+
+function createOrphans(workers, openConversation) {
+  var wrapper = createHierarchy({ driver: { hierarchyId: "orphan-home", title: "Unavailable Driver" }, workers: workers }, openConversation);
+  var toggle = wrapper.querySelector(".home-sidebar-driver-toggle");
+  toggle.classList.add("home-sidebar-orphan-toggle");
+  toggle.setAttribute("aria-label", "Toggle Workers whose Driver is unavailable");
+  toggle.insertAdjacentHTML("beforeend", "<span>Unavailable Driver</span><span>" + workers.length + "</span>");
+  return wrapper;
+}
 
 export function renderHomeSidebarChats(openConversation) {
   var list = document.getElementById("home-sidebar-recent-list");
@@ -11,9 +102,7 @@ export function renderHomeSidebarChats(openConversation) {
   var chats = getHomeSessionConversations();
   var scope = store.get('homeChatScope') === "current" ? "current" : "all";
   var activeMateId = store.get('homeChatMateId');
-  if (scope === "current") {
-    chats = chats.filter(function (chat) { return chat.mateId === activeMateId; });
-  }
+  if (scope === "current") chats = chats.filter(function (chat) { return chat.mateId === activeMateId; });
   if (!chats.length) {
     var empty = document.createElement("div");
     empty.className = "home-sidebar-recent-empty";
@@ -21,43 +110,14 @@ export function renderHomeSidebarChats(openConversation) {
     list.appendChild(empty);
     return 0;
   }
-  var activeSessionId = store.get('homeChatSessionId');
-  for (var i = 0; i < chats.length; i++) {
-    (function (chat) {
-      var item = document.createElement("div");
-      item.className = "home-sidebar-recent-item";
-      var row = document.createElement("button");
-      row.type = "button";
-      row.className = "home-sidebar-recent-row";
-      row.setAttribute("aria-label", chat.title + ", with " + chat.mateName);
-      if (chat.mateId === activeMateId && chat.sessionId === activeSessionId) {
-        item.classList.add("is-active");
-        row.setAttribute("aria-current", "page");
-      }
-      var copy = document.createElement("span");
-      copy.className = "home-sidebar-recent-copy";
-      var title = document.createElement("span");
-      title.className = "home-sidebar-recent-title";
-      title.textContent = chat.title;
-      var mate = document.createElement("span");
-      mate.className = "home-sidebar-recent-mate";
-      mate.textContent = chat.mateName;
-      copy.appendChild(title);
-      copy.appendChild(mate);
-      row.appendChild(copy);
-      if (chat.isProcessing) {
-        var activity = document.createElement("span");
-        activity.className = "home-sidebar-processing";
-        activity.setAttribute("aria-label", "Processing");
-        row.appendChild(activity);
-      }
-      row.addEventListener("click", function () {
-        if (typeof openConversation === "function") openConversation(chat.mateId, chat.sessionId);
-      });
-      item.appendChild(row);
-      item.appendChild(createHomeSessionActionsTrigger(chat));
-      list.appendChild(item);
-    })(chats[i]);
+  var hierarchy = buildSessionHierarchy(chats);
+  var hasHierarchy = hierarchy.orphans.length > 0;
+  hierarchy.roots.sort(function (a, b) { return b.lastActivity - a.lastActivity; });
+  for (var i = 0; i < hierarchy.roots.length; i++) {
+    if (hierarchy.roots[i].workers.length) hasHierarchy = true;
+    list.appendChild(createHierarchy(hierarchy.roots[i], openConversation));
   }
+  if (hierarchy.orphans.length) list.appendChild(createOrphans(hierarchy.orphans, openConversation));
+  if (hasHierarchy) refreshIcons();
   return chats.length;
 }