clay-server 3.0.0 → 3.1.0-beta.1

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

@@ -430,6 +430,35 @@ export function addUserMessage(text, images, pastes, fromUserId, fromUserName, d
   bubble.className = "bubble";
   bubble.dir = "auto";
 
+  // Delegated work orders render as a self-contained card: identity lives
+  // in an in-card header strip (the generic bubble avatar/header are hidden
+  // via CSS) and the body is clean markdown on a neutral background.
+  if (isDelegated) {
+    var cardHead = document.createElement("div");
+    cardHead.className = "delegated-card-head";
+    var cardAvi = document.createElement("img");
+    cardAvi.className = "delegated-card-avatar";
+    cardAvi.src = VENDOR_AVATARS[delegatedMeta.delegatedByVendor] || VENDOR_AVATARS.claude;
+    cardAvi.alt = "";
+    cardHead.appendChild(cardAvi);
+    var cardHeadText = document.createElement("div");
+    cardHeadText.className = "delegated-card-headtext";
+    var eyebrow = document.createElement("span");
+    eyebrow.className = "delegated-card-eyebrow";
+    eyebrow.textContent = "Delegated task";
+    cardHeadText.appendChild(eyebrow);
+    var cardFrom = document.createElement("span");
+    cardFrom.className = "delegated-card-from";
+    cardFrom.textContent = delegatedMeta.delegatedByTitle || "Driver";
+    cardHeadText.appendChild(cardFrom);
+    cardHead.appendChild(cardHeadText);
+    var cardTime = document.createElement("span");
+    cardTime.className = "delegated-card-time";
+    cardTime.textContent = getMsgTime();
+    cardHead.appendChild(cardTime);
+    bubble.appendChild(cardHead);
+  }
+
   if (images && images.length > 0) {
     var imgRow = document.createElement("div");
     imgRow.className = "bubble-images";
@@ -475,9 +504,19 @@ export function addUserMessage(text, images, pastes, fromUserId, fromUserName, d
   }
 
   if (text) {
-    var textEl = document.createElement("span");
-    textEl.textContent = text;
-    bubble.appendChild(textEl);
+    if (isDelegated) {
+      // Delegated instructions are agent-authored work orders: render them
+      // as markdown (headings, lists, code) instead of a plain text blob.
+      var mdEl = document.createElement("div");
+      mdEl.className = "md-content delegated-brief";
+      mdEl.innerHTML = renderMarkdown(text);
+      highlightCodeBlocks(mdEl);
+      bubble.appendChild(mdEl);
+    } else {
+      var textEl = document.createElement("span");
+      textEl.textContent = text;
+      bubble.appendChild(textEl);
+    }
   }
 
 

package/lib/public/modules/dom-refs.js

@@ -16,5 +16,6 @@ export function getSessionListEl() { return ref("session-list"); }
 
 export function getStatusDot() {
   return document.querySelector("#icon-strip-projects .icon-strip-item.active .icon-strip-status") ||
+         document.querySelector("#icon-strip-projects .icon-strip-wt-item.active .icon-strip-status") ||
          document.querySelector("#icon-strip-users .icon-strip-mate.active .icon-strip-status");
 }

package/lib/public/modules/input.js

@@ -6,6 +6,7 @@ import { store } from './store.js';
 import { mateAvatarUrl } from './avatar.js';
 import { tuiIsActive, tuiSubmitText } from './session-tui-view.js';
 import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
+import { showToast } from './utils.js';
 
 var ctx;
 
@@ -284,6 +285,18 @@ export function sendMessage() {
   if (_selVendor) payload.vendor = _selVendor;
   ctx.ws.send(JSON.stringify(payload));
 
+  // A turn blocked on an unanswered tool-permission request looks like a
+  // black hole: the new message queues silently while the dots keep
+  // bouncing, so users re-send the same text (and both copies land once
+  // the permission is answered). Point them at the pending card instead.
+  var pendingPerm = document.querySelector("#messages .permission-container:not(.resolved)");
+  if (pendingPerm) {
+    pendingPerm.scrollIntoView({ behavior: "smooth", block: "center" });
+    pendingPerm.classList.add("permission-attention");
+    setTimeout(function () { pendingPerm.classList.remove("permission-attention"); }, 2600);
+    showToast("A tool permission request is still waiting — your message is queued until you answer it.", "error");
+  }
+
   // First message commits the vendor and bumps the session into
   // has-history state. The server won't re-fire session_switched after a
   // message, so mirror the vendor-toggle/active-indicator swap locally:

package/lib/public/modules/project-switcher.js

@@ -19,7 +19,6 @@ import { getCachedProjects, switchProject } from './app-projects.js';
 import { openDm } from './app-dm.js';
 import { mateAvatarUrl } from './avatar.js';
 import { parseEmojis } from './markdown.js';
-import { switcherProjectName } from './worktree-family.js';
 
 var _projectMru = [];   // project slugs, most recent first
 var _mateMru = [];      // mate ids (mate_XXX), most recent first
@@ -264,7 +263,7 @@ function buildProjectEntries() {
     var unreachable = p.isWorktree && p.worktreeAccessible === false;
     return {
       key: p.slug,
-      title: switcherProjectName(projects, p),
+      title: p.title || p.project || p.slug,
       icon: p.icon || null,
       fallbackIcon: 'folder',
       isCurrent: p.slug === store.get('currentSlug'),

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

@@ -38,7 +38,6 @@ import { showHomeHub } from './app-home-hub.js';
 import { openTerminal } from './terminal.js';
 import { requestKnowledgeList } from './mate-knowledge.js';
 import { loadRootDirectory } from './filebrowser.js';
-import { aggregateFamily, familyOf, parentProjects } from './worktree-family.js';
 
 // --- Mobile state ---
 var mobileChatSheetOpen = false;
@@ -148,22 +147,10 @@ function closeMobileSheet() {
 }
 
 function renderSheetProjects(listEl) {
-  var projects = getCachedProjectList();
-  var parents = parentProjects(projects);
-  var activeFamily = familyOf(projects, getCachedCurrentSlug());
-  var activeSlug = activeFamily.parent ? activeFamily.parent.slug : getCachedCurrentSlug();
-
-  for (var i = 0; i < parents.length; i++) {
+  for (var i = 0; i < getCachedProjectList().length; i++) {
     (function (p) {
-      var family = familyOf(projects, p.slug);
-      var displayProject = aggregateFamily(p, family.worktrees);
-      var hasWorktreeUnread = family.worktrees.some(function (worktree) { return worktree.unread > 0; });
-      var hasWorktreePending = family.worktrees.some(function (worktree) { return worktree.pendingPermissions > 0; });
       var el = document.createElement("button");
-      el.className = "mobile-project-item" + (p.slug === activeSlug ? " active" : "");
-      if ((displayProject.pendingPermissions > 0 && p.slug !== activeSlug) || hasWorktreePending) {
-        el.classList.add("has-pending-perm");
-      }
+      el.className = "mobile-project-item" + (p.slug === getCachedCurrentSlug() ? " active" : "");
 
       var abbrev = document.createElement("span");
       abbrev.className = "mobile-project-abbrev";
@@ -180,16 +167,16 @@ function renderSheetProjects(listEl) {
       name.textContent = p.name;
       el.appendChild(name);
 
-      if (displayProject.isProcessing) {
+      if (p.isProcessing) {
         var dot = document.createElement("span");
         dot.className = "mobile-project-processing";
         el.appendChild(dot);
       }
 
-      if (displayProject.unread > 0 && (p.slug !== activeSlug || hasWorktreeUnread)) {
+      if (p.unread > 0 && p.slug !== getCachedCurrentSlug()) {
         var mBadge = document.createElement("span");
         mBadge.className = "mobile-project-unread";
-        mBadge.textContent = displayProject.unread > 99 ? "99+" : String(displayProject.unread);
+        mBadge.textContent = p.unread > 99 ? "99+" : String(p.unread);
         el.appendChild(mBadge);
       }
 
@@ -199,7 +186,7 @@ function renderSheetProjects(listEl) {
       });
 
       listEl.appendChild(el);
-    })(parents[i]);
+    })(getCachedProjectList()[i]);
   }
 }
 

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

@@ -10,10 +10,9 @@ import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { closeSidebar } from './sidebar.js';
 import { showIconTooltip, hideIconTooltip, closeUserCtxMenu, getCurrentDmUserId } from './sidebar-mates.js';
-import { switchProject, openAddProjectModal } from './app-projects.js';
+import { switchProject, openAddProjectModal, getCachedProjects } from './app-projects.js';
 import { showHomeHub } from './app-home-hub.js';
 import { getPendingTuiAttention } from './app-notifications.js';
-import { aggregateFamily } from './worktree-family.js';
 
 // --- Project state ---
 var cachedProjectList = [];
@@ -32,6 +31,9 @@ var emojiPickerEl = null;
 var draggedSlug = null;
 var draggedEl = null;
 
+// --- Worktree folder collapse state (session-local) ---
+var wtCollapsed = {};
+
 var EMOJI_CATEGORIES = [
   { id: "frequent", icon: "🕐", label: "Frequent", emojis: [
     "😀","😎","🤓","🧠","💡","🔥","⚡","🚀",
@@ -519,8 +521,17 @@ function showIconCtxMenu(anchorEl, slug, name) {
       }
     });
     menu.appendChild(removeWtItem);
+  } else {
+    var wtItem = document.createElement("button");
+    wtItem.className = "project-ctx-item";
+    wtItem.innerHTML = iconHtml("git-branch") + " <span>Add Worktree</span>";
+    wtItem.addEventListener("click", function (e) {
+      e.stopPropagation();
+      closeProjectCtxMenu();
+      showWorktreeModal(slug, name || slug);
+    });
+    menu.appendChild(wtItem);
   }
-  // Worktree creation lives in the title-bar branch chip, not here.
 
   document.body.appendChild(menu);
   projectCtxMenu = menu;
@@ -605,7 +616,20 @@ function showProjectCtxMenu(anchorEl, slug, name, icon, position) {
     }
   }
 
-  // Worktree creation lives in the title-bar branch chip, not here.
+  var sep2 = document.createElement("div");
+  sep2.className = "project-ctx-separator";
+  menu.appendChild(sep2);
+
+  // --- Add Worktree ---
+  var wtItem = document.createElement("button");
+  wtItem.className = "project-ctx-item";
+  wtItem.innerHTML = iconHtml("git-branch") + " <span>Add Worktree</span>";
+  wtItem.addEventListener("click", function (e) {
+    e.stopPropagation();
+    closeProjectCtxMenu();
+    showWorktreeModal(slug, name || slug);
+  });
+  menu.appendChild(wtItem);
 
   if (!store.get('permissions') || store.get('permissions').deleteProject !== false) {
     var sep3 = document.createElement("div");
@@ -926,6 +950,12 @@ function setupDragHandlers(el, slug) {
   });
 }
 
+// --- Worktree folder collapse ---
+
+function setWtCollapsed(slug, collapsed) {
+  wtCollapsed[slug] = collapsed;
+}
+
 function groupProjects(projects) {
   var parents = [];
   var wtByParent = {};
@@ -941,21 +971,6 @@ function groupProjects(projects) {
   return { parents: parents, wtByParent: wtByParent };
 }
 
-function aggregateProjectFamily(parent, worktrees) {
-  var aggregate = aggregateFamily(parent, worktrees);
-  aggregate.hasFamilyPendingAttention = getPendingTuiAttention(parent.slug) > 0;
-  aggregate.hasWorktreeUnread = false;
-  aggregate.hasWorktreePending = false;
-  for (var i = 0; i < worktrees.length; i++) {
-    if (getPendingTuiAttention(worktrees[i].slug) > 0) aggregate.hasFamilyPendingAttention = true;
-    if (worktrees[i].unread > 0) aggregate.hasWorktreeUnread = true;
-    if (worktrees[i].pendingPermissions > 0 || getPendingTuiAttention(worktrees[i].slug) > 0) {
-      aggregate.hasWorktreePending = true;
-    }
-  }
-  return aggregate;
-}
-
 // --- Icon item creation ---
 
 function createIconItem(p, currentSlug) {
@@ -987,7 +1002,7 @@ function createIconItem(p, currentSlug) {
 
   var projectBadge = document.createElement("span");
   projectBadge.className = "icon-strip-project-badge";
-  if (p.unread > 0 && (!isActive || p.hasWorktreeUnread)) {
+  if (p.unread > 0 && !isActive) {
     projectBadge.textContent = p.unread > 99 ? "99+" : String(p.unread);
     projectBadge.classList.add("has-unread");
   }
@@ -997,8 +1012,7 @@ function createIconItem(p, currentSlug) {
   // broadcast — they surface via tui_attention notifications. We shake the
   // same icon for either, so the user notices regardless of which engine
   // is asking.
-  if ((!isActive && (p.pendingPermissions > 0 || p.hasFamilyPendingAttention || getPendingTuiAttention(p.slug) > 0)) ||
-      p.hasWorktreePending) {
+  if (!isActive && (p.pendingPermissions > 0 || getPendingTuiAttention(p.slug) > 0)) {
     el.classList.add("has-pending-perm");
   }
 
@@ -1019,7 +1033,7 @@ function createIconItem(p, currentSlug) {
 
 // --- Worktree creation modal ---
 
-export function showWorktreeModal(parentSlug, parentName) {
+function showWorktreeModal(parentSlug, parentName) {
   var existing = document.getElementById("wt-modal-container");
   if (existing) existing.remove();
 
@@ -1174,17 +1188,164 @@ export function renderIconStrip(projects, currentSlug) {
   for (var i = 0; i < grouped.parents.length; i++) {
     var p = grouped.parents[i];
     var worktrees = grouped.wtByParent[p.slug] || [];
-    var familyProject = aggregateProjectFamily(p, worktrees);
-    var el = createIconItem(familyProject, currentSlug);
+    var hasWorktrees = worktrees.length > 0;
+
+    if (!hasWorktrees) {
+      var el = createIconItem(p, currentSlug);
+      (function (slug, name, elem) {
+        elem.addEventListener("contextmenu", function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          showIconCtxMenu(elem, slug, name);
+        });
+      })(p.slug, p.name || p.slug, el);
+      setupDragHandlers(el, p.slug);
+      container.appendChild(el);
+      continue;
+    }
+
+    // Folder group for parent + worktrees
+    var folder = document.createElement("div");
+    folder.className = "icon-strip-group";
+    folder.dataset.parentSlug = p.slug;
+    if (wtCollapsed[p.slug]) folder.classList.add("collapsed");
+
+    if (!p.isProcessing) {
+      for (var wpi = 0; wpi < worktrees.length; wpi++) {
+        if (worktrees[wpi].isProcessing) { p.isProcessing = true; break; }
+      }
+    }
+
+    var header = createIconItem(p, currentSlug);
+    header.classList.add("folder-header");
     (function (slug, name, elem) {
       elem.addEventListener("contextmenu", function (e) {
         e.preventDefault();
         e.stopPropagation();
         showIconCtxMenu(elem, slug, name);
       });
-    })(p.slug, p.name || p.slug, el);
-    setupDragHandlers(el, p.slug);
-    container.appendChild(el);
+    })(p.slug, p.name || p.slug, header);
+    setupDragHandlers(header, p.slug);
+
+    var chevron = document.createElement("span");
+    chevron.className = "icon-strip-group-chevron";
+    chevron.innerHTML = '<i data-lucide="git-branch"></i>';
+    (function (parentSlug, folderEl) {
+      chevron.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var nowCollapsed = folderEl.classList.toggle("collapsed");
+        setWtCollapsed(parentSlug, nowCollapsed);
+      });
+      chevron.addEventListener("contextmenu", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+      });
+    })(p.slug, folder);
+    chevron.setAttribute("data-tip", "Toggle worktrees");
+    header.appendChild(chevron);
+    folder.appendChild(header);
+
+    var itemsContainer = document.createElement("div");
+    itemsContainer.className = "icon-strip-group-items";
+
+    for (var wi = 0; wi < worktrees.length; wi++) {
+      (function (wt) {
+        var wtEl = document.createElement("a");
+        var isWtActive = wt.slug === currentSlug && !currentDmUserId;
+        var isAccessible = wt.worktreeAccessible !== false;
+        wtEl.className = "icon-strip-wt-item" + (isWtActive ? " active" : "") + (!isAccessible ? " wt-disabled" : "");
+        wtEl.href = "/p/" + wt.slug + "/";
+        wtEl.dataset.slug = wt.slug;
+
+        if (wt.icon) {
+          var wtEmoji = document.createElement("span");
+          wtEmoji.className = "wt-branch-abbrev project-emoji";
+          wtEmoji.textContent = wt.icon;
+          parseEmojis(wtEmoji);
+          wtEl.appendChild(wtEmoji);
+        } else {
+          var abbrev = document.createElement("span");
+          abbrev.className = "wt-branch-abbrev";
+          abbrev.textContent = getProjectAbbrev(wt.name);
+          wtEl.appendChild(abbrev);
+        }
+
+        var wtStatus = document.createElement("span");
+        wtStatus.className = "icon-strip-status";
+        if (wt.isProcessing) wtStatus.classList.add("processing");
+        wtEl.appendChild(wtStatus);
+
+        var tooltipText = wt.name;
+        if (!isAccessible) {
+          tooltipText += " (outside project path, cannot be accessed)";
+        }
+        (function (text, elem) {
+          elem.addEventListener("mouseenter", function () { showIconTooltip(elem, text); });
+          elem.addEventListener("mouseleave", hideIconTooltip);
+        })(tooltipText, wtEl);
+
+        if (isAccessible) {
+          (function (slug) {
+            wtEl.addEventListener("click", function (e) {
+              e.preventDefault();
+              if (switchProject) switchProject(slug);
+            });
+          })(wt.slug);
+        } else {
+          wtEl.addEventListener("click", function (e) {
+            e.preventDefault();
+          });
+        }
+
+        if (isAccessible) {
+          (function (slug, name, elem) {
+            elem.addEventListener("contextmenu", function (e) {
+              e.preventDefault();
+              e.stopPropagation();
+              showIconCtxMenu(elem, slug, name);
+            });
+          })(wt.slug, wt.name, wtEl);
+        } else {
+          wtEl.addEventListener("contextmenu", function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+          });
+        }
+
+        if (!isWtActive && (wt.pendingPermissions > 0 || getPendingTuiAttention(wt.slug) > 0)) {
+          wtEl.classList.add("has-pending-perm");
+        }
+
+        itemsContainer.appendChild(wtEl);
+      })(worktrees[wi]);
+    }
+
+    var hasWtPendingPerm = false;
+    for (var wpi2 = 0; wpi2 < worktrees.length; wpi2++) {
+      if (worktrees[wpi2].pendingPermissions > 0 || getPendingTuiAttention(worktrees[wpi2].slug) > 0) {
+        hasWtPendingPerm = true;
+        break;
+      }
+    }
+    if (hasWtPendingPerm) folder.classList.remove("collapsed");
+
+    var addBtn = document.createElement("button");
+    addBtn.className = "icon-strip-group-add";
+    addBtn.textContent = "+";
+    (function (parentSlug, parentName, btn) {
+      btn.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        showWorktreeModal(parentSlug, parentName);
+      });
+      btn.addEventListener("mouseenter", function () { showIconTooltip(btn, "New worktree"); });
+      btn.addEventListener("mouseleave", hideIconTooltip);
+    })(p.slug, p.name, addBtn);
+    itemsContainer.appendChild(addBtn);
+
+    folder.appendChild(itemsContainer);
+    container.appendChild(folder);
   }
 
   // Update home icon active state
@@ -1212,17 +1373,50 @@ function renderProjectList(projects, currentSlug) {
   for (var i = 0; i < grouped.parents.length; i++) {
     var p = grouped.parents[i];
     var worktrees = grouped.wtByParent[p.slug] || [];
-    list.appendChild(createMobileProjectItem(aggregateProjectFamily(p, worktrees), currentSlug));
+
+    if (worktrees.length === 0) {
+      list.appendChild(createMobileProjectItem(p, currentSlug, false));
+      continue;
+    }
+
+    var folderDiv = document.createElement("div");
+    folderDiv.className = "mobile-project-folder";
+    if (wtCollapsed[p.slug]) folderDiv.classList.add("collapsed");
+
+    var headerEl = createMobileProjectItem(p, currentSlug, false);
+    var chevron = document.createElement("span");
+    chevron.className = "mobile-folder-chevron";
+    chevron.innerHTML = "&#9660;";
+    (function (parentSlug, fDiv) {
+      chevron.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var nowCollapsed = fDiv.classList.toggle("collapsed");
+        setWtCollapsed(parentSlug, nowCollapsed);
+      });
+    })(p.slug, folderDiv);
+    headerEl.appendChild(chevron);
+    folderDiv.appendChild(headerEl);
+
+    var wtList = document.createElement("div");
+    wtList.className = "mobile-folder-items";
+    for (var wi = 0; wi < worktrees.length; wi++) {
+      var isAccessible = worktrees[wi].worktreeAccessible !== false;
+      var wtItem = createMobileProjectItem(worktrees[wi], currentSlug, true);
+      if (!isAccessible) wtItem.classList.add("wt-disabled");
+      if (!isAccessible) {
+        wtItem.addEventListener("click", function (e) { e.preventDefault(); e.stopPropagation(); });
+      }
+      wtList.appendChild(wtItem);
+    }
+    folderDiv.appendChild(wtList);
+    list.appendChild(folderDiv);
   }
 }
 
-function createMobileProjectItem(p, currentSlug) {
+function createMobileProjectItem(p, currentSlug, isWorktree) {
   var el = document.createElement("button");
-  var isActive = p.slug === currentSlug;
-  el.className = "mobile-project-item" + (isActive ? " active" : "");
-  if ((!isActive && (p.pendingPermissions > 0 || p.hasFamilyPendingAttention)) || p.hasWorktreePending) {
-    el.classList.add("has-pending-perm");
-  }
+  el.className = "mobile-project-item" + (p.slug === currentSlug ? " active" : "") + (isWorktree ? " wt-item" : "");
 
   var abbrev = document.createElement("span");
   abbrev.className = "mobile-project-abbrev";
@@ -1245,13 +1439,6 @@ function createMobileProjectItem(p, currentSlug) {
     el.appendChild(dot);
   }
 
-  if (p.unread > 0 && (!isActive || p.hasWorktreeUnread)) {
-    var badge = document.createElement("span");
-    badge.className = "mobile-project-unread";
-    badge.textContent = p.unread > 99 ? "99+" : String(p.unread);
-    el.appendChild(badge);
-  }
-
   el.addEventListener("click", function () {
     if (switchProject) switchProject(p.slug);
     if (closeSidebar) closeSidebar();
@@ -1263,30 +1450,12 @@ function createMobileProjectItem(p, currentSlug) {
 export function getEmojiCategories() { return EMOJI_CATEGORIES; }
 
 export function updateProjectBadge(slug, count) {
-  var targetSlug = slug;
-  for (var i = 0; i < cachedProjectList.length; i++) {
-    if (cachedProjectList[i].slug !== slug) continue;
-    cachedProjectList[i].unread = count;
-    if (cachedProjectList[i].isWorktree && cachedProjectList[i].parentSlug) {
-      targetSlug = cachedProjectList[i].parentSlug;
-    }
-    break;
-  }
-
-  var displayCount = count;
-  var grouped = groupProjects(cachedProjectList);
-  for (var pi = 0; pi < grouped.parents.length; pi++) {
-    if (grouped.parents[pi].slug !== targetSlug) continue;
-    displayCount = aggregateFamily(grouped.parents[pi], grouped.wtByParent[targetSlug] || []).unread;
-    break;
-  }
-
-  var icon = document.querySelector('.icon-strip-item[data-slug="' + targetSlug + '"]');
+  var icon = document.querySelector('.icon-strip-item[data-slug="' + slug + '"]');
   if (!icon) return;
   var badge = icon.querySelector(".icon-strip-project-badge");
   if (!badge) return;
-  if (displayCount > 0) {
-    badge.textContent = displayCount > 99 ? "99+" : String(displayCount);
+  if (count > 0) {
+    badge.textContent = count > 99 ? "99+" : String(count);
     badge.classList.add("has-unread");
   } else {
     badge.textContent = "";

package/lib/public/modules/split-pair-ui.js

@@ -251,11 +251,41 @@ export function handlePairCreated(msg) {
   return msg.group || null;
 }
 
+// --- Worker-pane composer notice -------------------------------------
+// Shown inside a pane iframe while ITS session is processing a delegated
+// turn: typing is allowed (queueing is correct behavior), the bar just
+// makes it visible that a new message joins the Driver's turn.
+var workerNoticeEl = null;
+
+export function showWorkerDelegationNotice(driverTitle) {
+  if (!store.get('paneMode')) return;
+  var inputArea = document.getElementById("input-area");
+  if (!inputArea || !inputArea.parentNode) return;
+  if (!workerNoticeEl) {
+    workerNoticeEl = document.createElement("div");
+    workerNoticeEl.className = "pane-delegation-notice";
+    inputArea.parentNode.insertBefore(workerNoticeEl, inputArea);
+  }
+  var who = driverTitle ? "“" + driverTitle + "”" : "the Driver";
+  workerNoticeEl.textContent = "Following an instruction from " + who + " — messages you send now join the same turn.";
+  workerNoticeEl.classList.add("visible");
+}
+
+export function hideWorkerDelegationNotice() {
+  if (workerNoticeEl) workerNoticeEl.classList.remove("visible");
+}
+
 export function handleSplitDelegation(msg) {
   var states = Object.assign({}, store.get('splitDelegations') || {});
   if (msg.active) states[msg.groupId] = msg;
   else delete states[msg.groupId];
   store.set({ splitDelegations: states });
+  // Inside the worker's own pane, mirror the delegation into the composer
+  // notice (the delegated user_message shows it too; this covers the end).
+  if (store.get('paneMode') && msg.to === store.get('activeSessionId')) {
+    if (msg.active) showWorkerDelegationNotice(null);
+    else hideWorkerDelegationNotice();
+  }
 }
 
 function sendSetPair(groupId, driverId) {

package/lib/public/modules/sticky-notes.js

@@ -1,4 +1,5 @@
 import { refreshIcons, iconHtml } from './icons.js';
+import { VENDOR_AVATARS } from './app-rendering.js';
 
 var ctx;
 var notes = new Map();  // id -> { data, el }
@@ -256,6 +257,15 @@ function renderNote(data) {
   var header = document.createElement("div");
   header.className = "sticky-note-header";
 
+  if (data.origin && VENDOR_AVATARS[data.origin.vendor]) {
+    var originBadge = document.createElement("img");
+    originBadge.className = "sticky-note-agent-badge";
+    originBadge.src = VENDOR_AVATARS[data.origin.vendor];
+    originBadge.alt = "";
+    originBadge.title = "Created by " + data.origin.vendor;
+    header.appendChild(originBadge);
+  }
+
   var closeBtn = document.createElement("button");
   closeBtn.className = "sticky-note-btn sticky-note-close";
   closeBtn.title = "Close";
@@ -916,6 +926,17 @@ export function handleNoteUpdated(msg) {
   if (archiveOpen) renderArchiveCards();
 }
 
+export function handleNoteWritten(msg) {
+  var entry = notes.get(msg.id);
+  if (!entry) return;
+  entry.el.classList.remove("sticky-note-attention");
+  void entry.el.offsetWidth;
+  entry.el.classList.add("sticky-note-attention");
+  setTimeout(function () {
+    entry.el.classList.remove("sticky-note-attention");
+  }, 2100);
+}
+
 export function handleNoteDeleted(msg) {
   var entry = notes.get(msg.id);
   if (!entry) return;