clay-server 3.0.0 → 3.1.0-beta.2

package/lib/public/css/icon-strip.css

@@ -223,6 +223,7 @@
 
 /* Show dot only on active item or when processing */
 .icon-strip-item.active .icon-strip-status,
+.icon-strip-wt-item.active .icon-strip-status,
 .icon-strip-status.processing {
   opacity: 1;
 }
@@ -247,6 +248,7 @@
 
 /* Pending permission shake */
 .icon-strip-item.has-pending-perm,
+.icon-strip-wt-item.has-pending-perm,
 .icon-strip-mate.has-pending-perm {
   animation: permShake 2s ease-in-out infinite;
 }
@@ -1144,6 +1146,155 @@
   opacity: 1;
 }
 
+/* --- Worktree folder groups --- */
+.icon-strip-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.icon-strip-group .folder-header {
+  position: relative;
+}
+
+.icon-strip-group-chevron {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dimmer);
+  pointer-events: auto;
+  cursor: pointer;
+  transition: transform 0.15s ease, background 0.15s, border-color 0.15s;
+  z-index: 2;
+  line-height: 1;
+}
+
+.icon-strip-group-chevron i,
+.icon-strip-group-chevron svg {
+  width: 10px;
+  height: 10px;
+}
+
+.icon-strip-group-chevron:hover {
+  background: var(--bg-hover, var(--bg-alt));
+  border-color: var(--text-dimmer);
+  color: var(--text-secondary);
+}
+
+.icon-strip-group.collapsed .icon-strip-group-chevron {
+  background: var(--border);
+}
+
+.icon-strip-group-items {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  transition: max-height 0.2s ease;
+  max-height: 500px;
+  border-left: 2px solid var(--border);
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.icon-strip-group.collapsed .icon-strip-group-items {
+  max-height: 0;
+}
+
+/* Worktree items (smaller than regular project icons) */
+.icon-strip-wt-item {
+  width: 48px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  text-decoration: none;
+  color: var(--text-secondary);
+  transition: background 0.15s;
+}
+
+.icon-strip-wt-item::before {
+  content: "";
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: var(--bg-alt);
+  opacity: 0.7;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.icon-strip-wt-item:hover::before {
+  opacity: 1;
+}
+
+.icon-strip-wt-item.active::before {
+  background: var(--accent);
+  opacity: 1;
+}
+
+.icon-strip-wt-item.active {
+  color: #fff;
+}
+
+.icon-strip-wt-item .wt-branch-abbrev {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  pointer-events: none;
+  position: relative;
+  z-index: 1;
+}
+
+/* Disabled/inaccessible worktree */
+.icon-strip-wt-item.wt-disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.icon-strip-wt-item.wt-disabled::after {
+  content: "\1F6AB";
+  position: absolute;
+  font-size: 14px;
+  z-index: 3;
+  filter: grayscale(0.3);
+}
+
+/* Group add button */
+.icon-strip-group-add {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  border: 1.5px dashed var(--border);
+  background: transparent;
+  color: var(--text-dimmer);
+  font-size: 16px;
+  font-weight: 400;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 2px 0 4px 0;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+
+.icon-strip-group-add:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: rgba(var(--accent-rgb, 124, 58, 237), 0.08);
+}
+
 /* --- Worktree creation modal --- */
 .wt-modal-overlay {
   position: fixed;
@@ -1258,6 +1409,45 @@ select.wt-modal-input {
   cursor: not-allowed;
 }
 
+/* --- Mobile worktree folder --- */
+.mobile-project-folder {
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile-project-item.wt-item {
+  padding-left: 28px;
+  opacity: 0.85;
+}
+
+.mobile-project-item.wt-disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.mobile-folder-chevron {
+  font-size: 8px;
+  color: var(--text-dimmer);
+  margin-left: auto;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+  padding: 4px;
+}
+
+.mobile-project-folder.collapsed .mobile-folder-chevron {
+  transform: rotate(-90deg);
+}
+
+.mobile-folder-items {
+  overflow: hidden;
+  transition: max-height 0.2s ease;
+  max-height: 500px;
+}
+
+.mobile-project-folder.collapsed .mobile-folder-items {
+  max-height: 0;
+}
+
 /* --- Per-project presence avatars --- */
 /* --- Mobile: hide icon strip --- */
 /* --- Skeleton loading placeholders --- */

package/lib/public/css/messages.css

@@ -165,9 +165,111 @@
   display: flex;
 }
 
+/* --- Delegated work-order card ------------------------------------- */
+/* Self-contained: the generic bubble avatar/name/time are hidden and the
+   identity lives in the card's own header strip. The body stays on a
+   NEUTRAL background -- accent only touches the header and the top rule,
+   so long technical briefs read like a document, not a tinted bubble. */
+.msg-user-delegated .dm-bubble-avatar,
+.msg-user-delegated .dm-bubble-header {
+  display: none;
+}
+
 .msg-user-delegated .bubble {
-  background: color-mix(in srgb, var(--accent) 11%, var(--bg-elevated, var(--bg-hover)));
-  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
+  padding: 0;
+  overflow: hidden;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-top: 2px solid var(--accent);
+  border-radius: 12px;
+  max-width: min(720px, 100%);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 4px 14px rgba(0, 0, 0, 0.08);
+}
+
+.delegated-card-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: linear-gradient(to bottom,
+    color-mix(in srgb, var(--accent) 7%, var(--bg-alt)),
+    var(--bg-alt));
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.delegated-card-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+  flex-shrink: 0;
+}
+
+.delegated-card-headtext {
+  display: grid;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.delegated-card-eyebrow {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--accent);
+  line-height: 1;
+}
+
+.delegated-card-from {
+  font-size: 12.5px;
+  font-weight: 650;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.delegated-card-time {
+  font-size: 10px;
+  color: var(--text-dimmer);
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-top: 2px;
+}
+
+.msg-user-delegated .delegated-brief {
+  padding: 13px 16px 15px;
+  font-size: 13px;
+  line-height: 1.7;
+}
+.msg-user-delegated .delegated-brief > :first-child { margin-top: 0; }
+.msg-user-delegated .delegated-brief > :last-child { margin-bottom: 0; }
+.msg-user-delegated .delegated-brief p { margin: 8px 0; }
+.msg-user-delegated .delegated-brief pre {
+  max-width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+}
+.msg-user-delegated .delegated-brief code {
+  font-size: 12px;
+}
+.msg-user-delegated .delegated-brief h1,
+.msg-user-delegated .delegated-brief h2,
+.msg-user-delegated .delegated-brief h3 {
+  font-size: 13px;
+  font-weight: 700;
+  margin: 14px 0 4px;
+}
+.msg-user-delegated .delegated-brief ol,
+.msg-user-delegated .delegated-brief ul {
+  padding-left: 20px;
+  margin: 6px 0;
+}
+.msg-user-delegated .delegated-brief li { margin: 3px 0; }
+.msg-user-delegated .delegated-brief li::marker {
+  color: var(--accent);
+  font-weight: 650;
 }
 
 .msg-user-delegated .dm-bubble-avatar-other {

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

@@ -160,10 +160,6 @@
     background: rgba(var(--overlay-rgb), 0.06);
   }
 
-  .mobile-project-item.has-pending-perm {
-    animation: permShake 2s ease-in-out infinite;
-  }
-
   .mobile-project-abbrev {
     width: 32px;
     height: 32px;

package/lib/public/css/pane.css

@@ -187,6 +187,33 @@ button.split-pair-role:hover { filter: brightness(1.25); }
 @keyframes pair-divider-flow-left { 0%, 100% { transform: translateX(3px); opacity: 0.65; } 50% { transform: translateX(-3px); opacity: 1; } }
 @keyframes pair-status-pulse { 50% { opacity: 0.55; } }
 
+/* Worker-pane composer notice: shown while this pane's session processes a
+   delegated turn. Informational only -- the composer stays enabled. */
+.pane-delegation-notice {
+  display: none;
+  align-items: center;
+  gap: 6px;
+  margin: 0 12px;
+  padding: 4px 10px;
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  border-bottom: 0;
+  border-radius: 8px 8px 0 0;
+  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1.4;
+}
+.pane-delegation-notice.visible { display: flex; }
+.pane-delegation-notice::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  flex-shrink: 0;
+  animation: pair-status-pulse 1.5s ease-in-out infinite;
+}
+
 /* Pair dialog rides the standard wt-modal pattern; these classes only add
    the two-column role layout on top of it. */
 .pair-modal { min-width: 480px; max-width: 560px; }

package/lib/public/css/rewind.css

@@ -677,3 +677,13 @@
   border: 1px dashed var(--border, #444);
 }
 
+
+/* Attention pulse: shown when the user sends a message while a permission
+   request is still unanswered (the turn is blocked on it). */
+.permission-container.permission-attention {
+  animation: permission-attention-pulse 0.65s ease-in-out 3;
+}
+@keyframes permission-attention-pulse {
+  0%, 100% { box-shadow: none; }
+  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
+}

package/lib/public/css/sticky-notes.css

@@ -72,6 +72,15 @@
   box-shadow: 0 4px 20px rgba(var(--shadow-rgb), 0.2);
 }
 
+.sticky-note.sticky-note-attention {
+  animation: sticky-note-attention-pulse 0.65s ease-in-out 3;
+}
+
+@keyframes sticky-note-attention-pulse {
+  0%, 100% { box-shadow: 0 2px 12px rgba(var(--shadow-rgb), 0.12); }
+  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent), 0 4px 20px rgba(var(--shadow-rgb), 0.2); }
+}
+
 .sticky-note.dragging,
 .sticky-note.resizing {
   opacity: 0.92;
@@ -109,6 +118,15 @@
 /* On hover, header stays fully visible */
 .sticky-note:hover .sticky-note-header { opacity: 1; }
 
+.sticky-note-agent-badge {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  object-fit: cover;
+  flex: 0 0 auto;
+  opacity: 0.8;
+}
+
 .sticky-note-spacer {
   flex: 1;
   min-width: 0;
@@ -317,15 +335,37 @@
 }
 
 .sticky-note-rendered .sn-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
   font-size: 12px;
   margin-right: 4px;
   opacity: 0.6;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 3px;
+  transition: opacity 0.15s, background 0.15s, transform 0.15s;
+}
+
+.sticky-note-rendered .sn-check:hover,
+.sticky-note-rendered .sn-check:focus-visible {
+  opacity: 1;
+  background: rgba(0,0,0,0.07);
+  outline: none;
+  transform: scale(1.08);
 }
 
 .sticky-note-rendered .sn-check.checked {
   opacity: 0.9;
 }
 
+.dark-theme .sticky-note-rendered .sn-check:hover,
+.dark-theme .sticky-note-rendered .sn-check:focus-visible {
+  background: rgba(255,255,255,0.1);
+}
+
 /* --- Resize handle (bottom-right corner) --- */
 .sticky-note-resize {
   position: absolute;
@@ -631,9 +671,12 @@
   font-weight: 400 !important;
   color: var(--text-dimmer) !important;
   margin-top: 6px !important;
+  max-width: 520px;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 4px;
+  line-height: 1.55;
 }
 
 .notes-archive-empty-sub .lucide {

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

@@ -272,175 +272,6 @@
   transform: rotate(180deg);
 }
 
-.branch-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-  max-width: 132px;
-  /* Optical alignment: the pill reads slightly high next to the 17px/800
-     project name, so nudge it down within the centered flex row. */
-  margin-top: 2px;
-  padding: 4px 7px;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background: var(--bg-alt);
-  color: var(--text-secondary);
-  font: 600 11px/1.2 "Pretendard", system-ui, sans-serif;
-  cursor: pointer;
-  flex-shrink: 1;
-}
-
-.branch-chip.hidden,
-.branch-chip-menu.hidden {
-  display: none;
-}
-
-.branch-chip:hover,
-.branch-chip.open {
-  border-color: var(--text-dimmer);
-  color: var(--text);
-}
-
-.branch-chip > svg {
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-}
-
-#branch-chip-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.branch-chip-chevron {
-  transition: transform 0.15s;
-}
-
-.branch-chip.open .branch-chip-chevron {
-  transform: rotate(180deg);
-}
-
-.branch-chip-menu {
-  position: fixed;
-  z-index: 10020;
-  width: 250px;
-  padding: 6px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: var(--bg);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
-}
-
-.branch-chip-row {
-  display: flex;
-  align-items: center;
-  border-radius: 7px;
-}
-
-.branch-chip-row:hover {
-  background: var(--bg-alt);
-}
-
-.branch-chip-row-main,
-.branch-chip-row-action,
-.branch-chip-new {
-  border: 0;
-  background: transparent;
-  color: var(--text-secondary);
-  font-family: inherit;
-  cursor: pointer;
-}
-
-.branch-chip-row-main {
-  min-width: 0;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 8px;
-  text-align: left;
-}
-
-.branch-chip-row-main:disabled {
-  opacity: 0.38;
-  cursor: not-allowed;
-}
-
-.branch-chip-row-main svg,
-.branch-chip-row-action svg,
-.branch-chip-new svg {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-}
-
-.branch-chip-row-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.branch-chip-row.current .branch-chip-row-label {
-  color: var(--text);
-  font-weight: 700;
-}
-
-.branch-chip-row-main > .lucide-check {
-  margin-left: auto;
-  color: var(--accent);
-}
-
-.branch-chip-processing {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--success, #23a55a);
-  flex-shrink: 0;
-}
-
-.branch-chip-pending {
-  min-width: 17px;
-  padding: 1px 4px;
-  border-radius: 8px;
-  background: var(--danger, #e74c3c);
-  color: #fff;
-  font-size: 9px;
-  text-align: center;
-}
-
-.branch-chip-row-action {
-  display: flex;
-  padding: 7px;
-  opacity: 0;
-}
-
-.branch-chip-row:hover .branch-chip-row-action,
-.branch-chip-row-action:focus-visible {
-  opacity: 0.7;
-}
-
-.branch-chip-row-action:hover {
-  color: var(--danger, #e74c3c);
-  opacity: 1;
-}
-
-.branch-chip-new {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  margin-top: 5px;
-  padding: 9px 8px 7px;
-  border-top: 1px solid var(--border-subtle);
-  text-align: left;
-}
-
-.branch-chip-new:hover {
-  color: var(--text);
-}
-
 .project-rename-input {
   width: 100%;
   font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

package/lib/public/index.html

@@ -210,12 +210,6 @@
           <span class="title-bar-project-name" id="title-bar-project-name"></span>
           <i data-lucide="chevron-down" class="title-bar-chevron"></i>
         </button>
-        <button id="branch-chip" class="branch-chip hidden" type="button" aria-label="Switch branch" aria-expanded="false" aria-haspopup="menu">
-          <i data-lucide="git-branch"></i>
-          <span id="branch-chip-label"></span>
-          <i data-lucide="chevron-down" class="branch-chip-chevron"></i>
-        </button>
-        <div id="branch-chip-menu" class="branch-chip-menu hidden"></div>
         <span id="sidebar-presence" class="sidebar-presence"></span>
         <button id="sidebar-toggle-btn" class="sidebar-collapse-btn" title="Collapse sidebar"><i data-lucide="panel-left-close"></i></button>
       </div>

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

@@ -109,6 +109,14 @@ export function blinkIO() {
   var sessionDot = document.querySelector(".session-item.active .session-processing") ||
                    document.querySelector(".mate-session-item.active .session-processing");
   if (sessionDot) sessionDot.classList.add("io");
+  // If active project is a worktree, also blink the parent project dot
+  var activeWt = document.querySelector("#icon-strip-projects .icon-strip-wt-item.active");
+  var parentDot = null;
+  if (activeWt) {
+    var group = activeWt.closest(".icon-strip-group");
+    if (group) parentDot = group.querySelector(".folder-header .icon-strip-status");
+    if (parentDot) parentDot.classList.add("io");
+  }
   // Mobile chat chip dot + mobile session dot
   var mobileChipDot = null;
   var _s = store.snap();
@@ -127,6 +135,7 @@ export function blinkIO() {
     var sd = document.querySelector(".session-item.active .session-processing.io") ||
              document.querySelector(".mate-session-item.active .session-processing.io");
     if (sd) sd.classList.remove("io");
+    if (parentDot) parentDot.classList.remove("io");
     if (mobileChipDot) mobileChipDot.classList.remove("io");
     if (mobileSessionDot) mobileSessionDot.classList.remove("io");
   }, 80);
@@ -146,7 +155,7 @@ export function blinkSessionDot(sessionId) {
 export function updateCrossProjectBlink() {
   if (crossProjectBlinkTimer) { clearTimeout(crossProjectBlinkTimer); crossProjectBlinkTimer = null; }
   function doBlink() {
-    var dots = document.querySelectorAll("#icon-strip-projects .icon-strip-item:not(.active) .icon-strip-status.processing, #icon-strip-users .icon-strip-mate:not(.active) .icon-strip-status.processing");
+    var dots = document.querySelectorAll("#icon-strip-projects .icon-strip-item:not(.active) .icon-strip-status.processing, #icon-strip-projects .icon-strip-wt-item:not(.active) .icon-strip-status.processing, #icon-strip-users .icon-strip-mate:not(.active) .icon-strip-status.processing");
     // Also blink mobile chat chip dots (same icon-strip-status class inside chips)
     var mobileDots = document.querySelectorAll(".mobile-chat-chip .icon-strip-status.processing");
     var allDots = [];

package/lib/public/modules/app-home-hub.js

@@ -619,7 +619,6 @@ export function showHomeHub() {
   // anywhere via the persistent FAB (#clay-fab), not embedded here.
   if (store.get('dmMode')) exitDmMode();
   homeHubVisible = true;
-  store.set({ homeHubVisible: true });
   homeHub.classList.remove("hidden");
   // Show close button only if there's a project to return to
   if (hubCloseBtn) {
@@ -653,7 +652,6 @@ export function showHomeHub() {
 export function hideHomeHub() {
   if (!homeHubVisible) return;
   homeHubVisible = false;
-  store.set({ homeHubVisible: false });
   homeHub.classList.add("hidden");
   stopTipRotation();
   var mobileHome = document.getElementById("mobile-home-btn");