clay-server 4.0.0-beta.24 → 4.0.0-beta.25

package/lib/public/app.js

@@ -377,6 +377,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     currentMsgEl: null,
     currentFullText: "",
     matePreThinkingEl: null,
+    thinkingState: null,
     // panels
     fileViewerFullscreen: false,
     markdownSlidesActive: false,

package/lib/public/css/messages.css

@@ -693,6 +693,8 @@ pre.mermaid-error {
 
 .thinking-header {
   display: inline-flex;
+  max-width: 100%;
+  box-sizing: border-box;
   align-items: center;
   gap: 6px;
   cursor: pointer;
@@ -726,9 +728,44 @@ pre.mermaid-error {
 .thinking-label {
   font-size: 13px;
   color: var(--text-muted);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
+.thinking-live .thinking-header {
+  padding: 6px 0;
+  background: transparent;
+  border-radius: 0;
+}
+
+.thinking-live .thinking-chevron { display: none; }
+
+.thinking-live .thinking-label {
+  background: linear-gradient(100deg, var(--text-muted) 40%, var(--text-dimmer) 50%, var(--text-muted) 60%);
+  background-size: 300% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: thinking-summary-shimmer 2.8s ease-in-out infinite;
+}
+
+@keyframes thinking-summary-shimmer {
+  from { background-position: 100% 0; }
+  to { background-position: 0% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .thinking-live .thinking-label { animation: none; background: none; color: var(--text-muted); }
+}
+
+.thinking-header[aria-disabled="true"] { cursor: default; }
+.thinking-header:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.thinking-item .thinking-spinner { display: none; }
+
 .thinking-duration {
+  flex-shrink: 0;
   color: var(--text-dimmer);
   font-size: 12px;
 }
@@ -753,7 +790,7 @@ pre.mermaid-error {
   font-size: 13px;
   line-height: 1.55;
   color: var(--text-muted);
-  white-space: pre-wrap;
+  white-space: normal;
   word-break: break-word;
   max-height: 300px;
   overflow-y: auto;
@@ -762,6 +799,8 @@ pre.mermaid-error {
 }
 
 .thinking-item.expanded .thinking-content { display: block; }
+.thinking-content > :first-child { margin-top: 0; }
+.thinking-content > :last-child { margin-bottom: 0; }
 
 /* ==========================================================================
    Tool Items

package/lib/public/css/pane.css

@@ -104,6 +104,49 @@ body.pane-mode #input-area {
   flex-shrink: 0;
 }
 
+.split-pane-header.has-worker-runtime {
+  flex-wrap: nowrap;
+}
+
+.split-pane-header.has-worker-runtime .split-pane-context {
+  order: 1;
+}
+
+.split-pane-header.has-worker-runtime .split-pane-close {
+  order: 2;
+  flex-shrink: 0;
+}
+
+.split-worker-runtime {
+  flex: 0 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.split-worker-runtime-model {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+  font-weight: 600;
+}
+
+.split-worker-runtime-thinking {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--bg-alt);
+  color: var(--text-secondary);
+}
+
 .split-pane-title {
   flex: 0 1 auto;
   max-width: 46%;
@@ -192,8 +235,7 @@ body.pane-mode #input-area {
 @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. */
+/* Worker activity notice shown while this pane processes a delegated task. */
 .pane-delegation-notice {
   display: none;
   align-items: center;
@@ -202,7 +244,7 @@ body.pane-mode #input-area {
   max-width: var(--content-width);
   margin: 0 auto;
   padding: 4px 10px;
-  border-radius: 8px 8px 0 0;
+  border-radius: 8px;
   background: color-mix(in srgb, var(--accent) 8%, var(--bg));
   color: var(--text-secondary);
   font-size: 11px;
@@ -210,13 +252,6 @@ body.pane-mode #input-area {
   transition: box-shadow 0.2s;
 }
 .pane-delegation-notice.visible { display: flex; }
-.pane-delegation-notice.visible:has(+ #input-wrapper #input-row:focus-within) {
-  box-shadow: 0 0 0 1px var(--border);
-  clip-path: inset(-1px -1px 0 -1px);
-}
-.pane-delegation-notice.visible + #input-wrapper #input-row {
-  border-radius: 0 0 8px 8px;
-}
 .pane-delegation-notice::before {
   content: "";
   width: 6px;

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

@@ -141,9 +141,9 @@
 .worker-proposal-action:not(:disabled):hover { filter: brightness(1.12); }
 .worker-proposal-action:disabled, .worker-proposal-select:disabled, .worker-proposal-effort-btn:disabled { cursor: default; opacity: 0.58; }
 
-.worker-proposal-error, .worker-proposal-result { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 10px; line-height: 1.45; }
+.worker-proposal-error { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 10px; line-height: 1.45; }
 .worker-proposal-error { color: var(--error); background: var(--error-8); }
-.worker-proposal-result { max-height: 96px; overflow: hidden; color: var(--text-muted); background: color-mix(in srgb, var(--success) 7%, transparent); white-space: pre-wrap; }
+.worker-proposal-error.hidden { display: none; }
 .worker-proposal-card[data-status="starting"] .worker-proposal-status,
 .worker-proposal-card[data-status="running"] .worker-proposal-status { animation: worker-proposal-pulse 1.6s ease-in-out infinite; }
 .worker-proposal-card[data-status="completed"] { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }

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

@@ -29,6 +29,7 @@ import { handleSessionActionMessage } from './session-actions.js';
 import { renderWorkerProposal, updateWorkerProposal } from './worker-proposal.js';
 import { handleInputSync, autoResize, builtinCommands, setScheduleBtnDisabled, sendShellResultToAgent } from './input.js';
 import { startThinking, appendThinking, stopThinking, resetThinkingGroup, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, closeToolGroup, removeToolFromGroup, resetToolState, getTools, getPlanContent, setPlanContent, renderPlanBanner, renderPlanCard, getTodoTools, handleTodoWrite, handleTaskCreate, handleTaskUpdate, applyDeadSessionTodoCompaction, isPlanFilePath, enableMainInput, addTurnMeta, updateSubagentActivity, addSubagentToolEntry, markSubagentDone, initSubagentStop, updateSubagentProgress, updateSubagentTaskStatus, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionCancelled, markPermissionResolved, renderElicitationRequest, markElicitationResolved, renderUserDialogRequest, markUserDialogResolved, updateThinkingTokens } from './tools.js';
+import { finishThinkingTurn, resumeThinkingAfterReplay } from './thinking-lifecycle.js';
 import { showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundEnabled } from './notifications.js';
 import { handleFsList, handleFsRead, handleFileChanged, handleDirChanged, handleFileHistory, handleGitDiff, handleFileAt, refreshIfOpen, getPendingNavigate, handleFsSearch, presentMarkdownEdit } from './filebrowser.js';
 import { beginMarkdownTurn, finishMarkdownTurn, markdownPathFromToolInput } from './markdown-live-edit.js';
@@ -189,6 +190,7 @@ export function processMessage(msg) {
 
       case "history_done":
         store.set({ replayingHistory: false });
+        resumeThinkingAfterReplay(store.get('sessionIsProcessing'));
         // Batched syntax highlight + mermaid pass for the entire replayed
         // transcript. Per-message highlights are skipped during replay
         // (see markdown.js) to avoid cascading reflows that the sticky-
@@ -1028,7 +1030,6 @@ export function processMessage(msg) {
         if (typeof msg.text !== "string") break;
         removeMatePreThinking();
         stopThinking();
-        resetThinkingGroup();
         setActivity(null);
         appendDelta(msg.text);
         break;
@@ -1228,7 +1229,7 @@ export function processMessage(msg) {
         // were missed by the client).
         removeMatePreThinking();
         setActivity(null);
-        stopThinking();
+        finishThinkingTurn();
         markAllToolsDone();
         closeToolGroup();
         clearAllImageGenerationProgress();
@@ -1248,7 +1249,7 @@ export function processMessage(msg) {
       case "done":
         removeMatePreThinking();
         setActivity(null);
-        stopThinking();
+        finishThinkingTurn();
         hideWorkerDelegationNotice();
         markAllToolsDone();
         closeToolGroup();
@@ -1271,6 +1272,7 @@ export function processMessage(msg) {
       case "error":
         removeMatePreThinking();
         setActivity(null);
+        finishThinkingTurn();
         addSystemMessage(msg.text, true);
         break;
 
@@ -1322,13 +1324,14 @@ export function processMessage(msg) {
       case "process_conflict":
         removeMatePreThinking();
         setActivity(null);
+        finishThinkingTurn();
         addConflictMessage(msg);
         break;
 
       case "session_writer_conflict":
         removeMatePreThinking();
         setActivity(null);
-        stopThinking();
+        finishThinkingTurn();
         markAllToolsDone();
         closeToolGroup();
         addSystemMessage(msg.text || "This session is already open in another process.", true);
@@ -1337,13 +1340,14 @@ export function processMessage(msg) {
       case "context_overflow":
         removeMatePreThinking();
         setActivity(null);
+        finishThinkingTurn();
         addContextOverflowMessage(msg);
         break;
 
       case "auth_required":
         removeMatePreThinking();
         setActivity(null);
-        stopThinking();
+        finishThinkingTurn();
         markAllToolsDone();
         closeToolGroup();
         appendDelta((msg.text || "Authentication required.") + "\n");

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

@@ -3,6 +3,8 @@ import { getWs } from './ws-ref.js';
 import { VENDOR_AVATARS } from './app-rendering.js';
 import { buildAgentVendorSelect, fillAgentModels, buildAgentEffortSelect, fillAgentEffort } from './agent-config-selects.js';
 import { showToast } from './utils.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { appendWorkerRuntime } from './split-worker-runtime.js';
 
 var pairDialog = null;
 // Set when the dialog was opened via "Add Split Worker" on an existing session:
@@ -190,8 +192,7 @@ export function handlePairCreated(msg) {
 
 // --- 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.
+// turn. Identifies the Driver responsible for the current task.
 var workerNoticeEl = null;
 
 export function showWorkerDelegationNotice(driverTitle) {
@@ -205,7 +206,7 @@ export function showWorkerDelegationNotice(driverTitle) {
     inputArea.insertBefore(workerNoticeEl, inputWrapper);
   }
   var who = driverTitle ? "“" + driverTitle + "”" : "the Driver";
-  workerNoticeEl.textContent = "Following an instruction from " + who + " — messages you send now join the same turn.";
+  workerNoticeEl.textContent = "Working on a task from " + who + ".";
   workerNoticeEl.classList.add("visible");
 }
 
@@ -239,8 +240,10 @@ export function syncPairChrome(host, split) {
   for (var i = 0; i < groups.length; i++) {
     if (groups[i].id === split.groupId) { group = groups[i]; break; }
   }
-  var oldBadges = host.querySelectorAll(".split-pair-role, .split-pair-live, .split-pair-set-driver");
+  var oldBadges = host.querySelectorAll(".split-pair-role, .split-pair-live, .split-pair-set-driver, .split-worker-runtime");
   for (var bi = 0; bi < oldBadges.length; bi++) oldBadges[bi].remove();
+  var runtimeHeaders = host.querySelectorAll(".has-worker-runtime");
+  for (var ri = 0; ri < runtimeHeaders.length; ri++) runtimeHeaders[ri].classList.remove("has-worker-runtime");
   host.classList.remove("split-delegating", "split-direction-right", "split-direction-left");
   if (!group) return;
   var headers = host.querySelectorAll(".split-pane-header");
@@ -272,6 +275,14 @@ export function syncPairChrome(host, split) {
       var title = header.querySelector(".split-pane-title");
       var access = header.querySelector(".split-pane-full-access");
       header.insertBefore(badge, access ? access.nextSibling : (title ? title.nextSibling : null));
+      if (!isDriver) {
+        var sessions = getCachedSessions() || [];
+        var workerSession = null;
+        for (var wi = 0; wi < sessions.length; wi++) {
+          if (sessions[wi].id === sessionId) { workerSession = sessions[wi]; break; }
+        }
+        appendWorkerRuntime(header, workerSession);
+      }
     })(split.panes[pi].sessionId, headers[pi]);
   }
   var active = (store.get('splitDelegations') || {})[group.id];

package/lib/public/modules/split-worker-runtime.js

@@ -0,0 +1,24 @@
+// Read the Worker's own session metadata, never the active Driver's settings.
+export function workerRuntimeLabels(session) {
+  var model = session && typeof session.model === "string" ? session.model : "";
+  var effort = session && typeof session.effort === "string" ? session.effort : "";
+  var level = effort === "xhigh" ? "X-High" : (effort ? effort.charAt(0).toUpperCase() + effort.slice(1) : "Default");
+  return { model: model || "Default model", thinking: "Thinking: " + level };
+}
+
+export function appendWorkerRuntime(header, session) {
+  var labels = workerRuntimeLabels(session);
+  var runtime = document.createElement("div");
+  runtime.className = "split-worker-runtime";
+  var model = document.createElement("span");
+  model.className = "split-worker-runtime-model";
+  model.textContent = labels.model;
+  model.title = "Model: " + labels.model;
+  var thinking = document.createElement("span");
+  thinking.className = "split-worker-runtime-thinking";
+  thinking.textContent = labels.thinking;
+  runtime.appendChild(model);
+  runtime.appendChild(thinking);
+  header.classList.add("has-worker-runtime");
+  header.appendChild(runtime);
+}

package/lib/public/modules/thinking-lifecycle.js

@@ -0,0 +1,175 @@
+import { escapeHtml } from './utils.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { store } from './store.js';
+import { addToMessages, scrollToBottom } from './chat-render-runtime.js';
+import { prepareThinkingView, bindThinkingView, updateThinkingView, beginThinkingView, setThinkingViewLive, finishThinkingView } from './thinking-view.js';
+
+function getThinkingState() {
+  return store.get('thinkingState') || null;
+}
+
+function setThinkingState(state) {
+  store.set({ thinkingState: state });
+}
+
+function updateThinkingState(state, patch) {
+  var next = Object.assign({}, state, patch);
+  setThinkingState(next);
+  return next;
+}
+
+function isMateThinking() {
+  var target = store.get('dmTargetUser');
+  return !!(store.get('dmMode') && target && target.isMate);
+}
+
+function maybeScrollToBottom() {
+  if (!store.get('replayingHistory')) scrollToBottom();
+}
+
+function createThinkingElement() {
+  var el = document.createElement("div");
+  el.className = "thinking-item";
+  if (isMateThinking()) {
+    var target = store.get('dmTargetUser');
+    var mateName = (target && target.displayName) || "Mate";
+    var mateAvatar = document.body.dataset.mateAvatarUrl || "";
+    el.classList.add("mate-thinking");
+    el.innerHTML =
+      '<img class="dm-bubble-avatar dm-bubble-avatar-mate" src="' + escapeHtml(mateAvatar) + '" alt="">' +
+      '<div class="dm-bubble-content">' +
+      '<div class="dm-bubble-header"><span class="dm-bubble-name">' + escapeHtml(mateName) + '</span></div>' +
+      '<div class="mate-thinking-dots mate-thinking-activity"><span></span><span></span><span></span></div>' +
+      '<div class="thinking-header" style="display:none">' +
+      '<span class="thinking-chevron">' + iconHtml("chevron-right") + '</span>' +
+      '<span class="thinking-label">Thinking</span>' +
+      '<span class="thinking-duration"></span>' +
+      '<span class="thinking-spinner">' + iconHtml("loader", "icon-spin") + '</span>' +
+      '</div>' +
+      '<div class="thinking-content"></div>' +
+      '</div>';
+  } else {
+    el.innerHTML =
+      '<div class="thinking-header">' +
+      '<span class="thinking-chevron">' + iconHtml("chevron-right") + '</span>' +
+      '<span class="thinking-label">Thinking</span>' +
+      '<span class="thinking-duration"></span>' +
+      '<span class="thinking-spinner">' + iconHtml("loader", "icon-spin") + '</span>' +
+      '</div>' +
+      '<div class="thinking-content"></div>';
+  }
+  prepareThinkingView(el);
+  bindThinkingView(el);
+  addToMessages(el);
+  return el;
+}
+
+function showMateActivity(el, active, hasContent) {
+  if (!el.classList.contains("mate-thinking")) return;
+  var activity = el.querySelector(".mate-thinking-activity");
+  var header = el.querySelector(".thinking-header");
+  if (activity) activity.style.display = active ? "" : "none";
+  if (header) header.style.display = active || !hasContent ? "none" : "";
+}
+
+export function startThinkingSegment() {
+  var thinkingState = getThinkingState();
+  if (thinkingState && thinkingState.active) return thinkingState.el;
+  if (!thinkingState || thinkingState.ended) {
+    thinkingState = {
+      el: createThinkingElement(),
+      detailsText: "",
+      segmentText: "",
+      latestText: "",
+      active: false,
+      ended: false,
+      startTime: 0,
+      totalDuration: 0,
+    };
+  }
+  thinkingState = updateThinkingState(thinkingState, {
+    active: true,
+    segmentText: "",
+    startTime: Date.now(),
+  });
+  beginThinkingView(thinkingState.el, !store.get('replayingHistory') && !isMateThinking());
+  showMateActivity(thinkingState.el, true, !!thinkingState.detailsText.trim());
+  refreshIcons();
+  maybeScrollToBottom();
+  return thinkingState.el;
+}
+
+export function appendThinkingText(text) {
+  var thinkingState = getThinkingState();
+  if (!thinkingState || !thinkingState.active || typeof text !== "string" || !text) return;
+  var separator = !thinkingState.segmentText && thinkingState.detailsText ? "\n\n" : "";
+  var segmentText = thinkingState.segmentText + text;
+  thinkingState = updateThinkingState(thinkingState, {
+    segmentText: segmentText,
+    detailsText: thinkingState.detailsText + separator + text,
+    latestText: segmentText.trim() ? segmentText : thinkingState.latestText,
+  });
+  updateThinkingView(thinkingState.el, thinkingState.segmentText || thinkingState.latestText, thinkingState.detailsText);
+  maybeScrollToBottom();
+}
+
+export function stopThinkingSegment(duration) {
+  var thinkingState = getThinkingState();
+  if (!thinkingState || !thinkingState.active) return;
+  var seconds = typeof duration === "number" ? duration : (Date.now() - thinkingState.startTime) / 1000;
+  thinkingState = updateThinkingState(thinkingState, {
+    totalDuration: thinkingState.totalDuration + seconds,
+    active: false,
+  });
+  finishThinkingView(thinkingState.el, thinkingState.latestText, thinkingState.detailsText);
+  thinkingState.el.querySelector(".thinking-duration").textContent = " " + thinkingState.totalDuration.toFixed(1) + "s";
+  showMateActivity(thinkingState.el, false, !!thinkingState.detailsText.trim());
+}
+
+export function finishThinkingTurn() {
+  var thinkingState = getThinkingState();
+  if (!thinkingState) return;
+  stopThinkingSegment();
+  thinkingState = getThinkingState();
+  thinkingState = updateThinkingState(thinkingState, { ended: true });
+  finishThinkingView(thinkingState.el, thinkingState.latestText, thinkingState.detailsText);
+  showMateActivity(thinkingState.el, false, !!thinkingState.detailsText.trim());
+}
+
+export function resetThinkingTurn() {
+  finishThinkingTurn();
+  setThinkingState(null);
+}
+
+export function clearThinkingState() {
+  setThinkingState(null);
+}
+
+export function saveThinkingState() {
+  return getThinkingState();
+}
+
+export function restoreThinkingState(saved) {
+  setThinkingState(saved || null);
+}
+
+export function resumeThinkingAfterReplay(processing) {
+  var thinkingState = getThinkingState();
+  if (!thinkingState || !thinkingState.active || !processing) return;
+  setThinkingViewLive(thinkingState.el, !isMateThinking());
+  showMateActivity(thinkingState.el, true, !!thinkingState.detailsText.trim());
+}
+
+export function updateThinkingTokenEstimate(estimatedTokens) {
+  var thinkingState = getThinkingState();
+  if (!thinkingState || !thinkingState.active || !thinkingState.el) return;
+  var label = thinkingState.el.querySelector(".thinking-label");
+  if (!label) return;
+  var count = estimatedTokens || 0;
+  var display = count >= 1000 ? ("~" + (Math.round(count / 100) / 10) + "k") : ("~" + count);
+  if (thinkingState.latestText.trim()) {
+    label.title = label.textContent + " · " + display + " tokens";
+  } else {
+    label.textContent = "Thinking " + display + " tokens";
+  }
+}

package/lib/public/modules/thinking-summary.js

@@ -0,0 +1,28 @@
+// Summarize only supplied text; a heading is preferable to a prose excerpt.
+function plainText(text) {
+  return text.replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1")
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, "$1")
+    .replace(/^\s*(?:#{1,6}\s+|>\s*)/gm, "")
+    .replace(/[*_`~]/g, "")
+    .replace(/\s+/g, " ").trim();
+}
+
+export function thinkingSummary(text) {
+  if (typeof text !== "string" || !text.trim()) return "Thinking";
+  var lines = text.split("\n");
+  var heading = "";
+  for (var i = 0; i < lines.length; i++) {
+    if (/^\s*(?:#{1,6}\s+|\*\*|__)/.test(lines[i])) {
+      var candidate = plainText(lines[i]);
+      if (candidate) heading = candidate;
+    }
+  }
+  var paragraphs = text.trim().split(/\n\s*\n/);
+  var summary = heading || plainText(paragraphs[paragraphs.length - 1]);
+  if (!heading) {
+    var sentence = summary.match(/^.*?[.!?。！？](?:\s|$)/);
+    if (sentence) summary = sentence[0].trim();
+  }
+  if (!summary) return "Thinking";
+  return summary.length > 140 ? summary.slice(0, 139).trimEnd() + "…" : summary;
+}

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

@@ -0,0 +1,75 @@
+import { thinkingSummary } from './thinking-summary.js';
+import { renderMarkdown } from './markdown.js';
+
+export function prepareThinkingView(el) {
+  el.hidden = false;
+  el.classList.remove("empty", "done", "expanded", "thinking-live");
+  var header = el.querySelector(".thinking-header");
+  header.setAttribute("role", "button");
+  header.setAttribute("aria-expanded", "false");
+  header.setAttribute("aria-disabled", "true");
+  header.tabIndex = -1;
+  header.style.cursor = "";
+  el.querySelector(".thinking-chevron").style.display = "";
+  el.querySelector(".thinking-label").textContent = "Thinking";
+  el.querySelector(".thinking-label").removeAttribute("title");
+  el.querySelector(".thinking-duration").textContent = "";
+  el.querySelector(".thinking-content").textContent = "";
+}
+
+export function bindThinkingView(el) {
+  var header = el.querySelector(".thinking-header");
+  function toggle() {
+    if (header.getAttribute("aria-disabled") === "true") return;
+    el.classList.toggle("expanded");
+    header.setAttribute("aria-expanded", el.classList.contains("expanded") ? "true" : "false");
+  }
+  header.addEventListener("click", toggle);
+  header.addEventListener("keydown", function (event) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    toggle();
+  });
+}
+
+export function updateThinkingView(el, summaryText, detailsText) {
+  var summary = thinkingSummary(summaryText);
+  var label = el.querySelector(".thinking-label");
+  label.textContent = summary;
+  label.title = summary;
+  el.querySelector(".thinking-content").innerHTML = detailsText.trim() ? renderMarkdown(detailsText) : "";
+}
+
+export function setThinkingViewLive(el, live) {
+  el.classList.toggle("thinking-live", !!live);
+}
+
+export function beginThinkingView(el, shimmer) {
+  el.hidden = false;
+  el.classList.remove("done", "empty", "expanded");
+  setThinkingViewLive(el, shimmer);
+  var header = el.querySelector(".thinking-header");
+  header.setAttribute("aria-expanded", "false");
+  header.setAttribute("aria-disabled", "true");
+  header.tabIndex = -1;
+  header.style.cursor = "";
+  el.querySelector(".thinking-chevron").style.display = "";
+}
+
+export function finishThinkingView(el, summaryText, detailsText) {
+  el.classList.remove("thinking-live");
+  el.classList.add("done");
+  el.classList.remove("expanded");
+  updateThinkingView(el, summaryText, detailsText);
+  var hasContent = !!detailsText.trim();
+  var header = el.querySelector(".thinking-header");
+  header.setAttribute("aria-expanded", "false");
+  header.setAttribute("aria-disabled", hasContent ? "false" : "true");
+  header.tabIndex = hasContent ? 0 : -1;
+  header.style.cursor = hasContent ? "pointer" : "default";
+  el.hidden = !hasContent;
+  if (!hasContent) {
+    el.classList.add("empty");
+    el.querySelector(".thinking-chevron").style.display = "none";
+  }
+}

package/lib/public/modules/tools.js

@@ -7,6 +7,7 @@ import { mateAvatarUrl } from './avatar.js';
 import { getChatLayout } from './theme.js';
 import { store } from './store.js';
 import { VENDOR_NAMES } from './app-rendering.js';
+import { startThinkingSegment, appendThinkingText, stopThinkingSegment, resetThinkingTurn, clearThinkingState, saveThinkingState, restoreThinkingState, updateThinkingTokenEstimate } from './thinking-lifecycle.js';
 
 var ctx;
 
@@ -46,8 +47,6 @@ var todoMeta = {
 
 // --- Tool tracking ---
 var tools = {};
-var currentThinking = null;
-var thinkingGroup = null; // { el, count, totalDuration }
 var pendingPermissions = {};
 
 // --- Tool group tracking ---
@@ -1354,12 +1353,7 @@ export function markUserDialogResolved(requestId, behavior) {
 // Annotates the active thinking block's label with a running token estimate.
 // No-op when no thinking block is active.
 export function updateThinkingTokens(estimatedTokens) {
-  if (!currentThinking || !currentThinking.el) return;
-  var label = currentThinking.el.querySelector(".thinking-label");
-  if (!label) return;
-  var n = estimatedTokens || 0;
-  var disp = n >= 1000 ? ("~" + (Math.round(n / 100) / 10) + "k") : ("~" + n);
-  label.textContent = "Thinking " + disp + " tokens";
+  updateThinkingTokenEstimate(estimatedTokens);
 }
 
 // --- Plan mode rendering ---
@@ -1729,128 +1723,23 @@ function updateTodoSticky() {
 // --- Thinking ---
 export function startThinking() {
   ctx.finalizeAssistantBlock();
-
-  // Reuse existing thinking group if consecutive
-  if (thinkingGroup && thinkingGroup.el.classList.contains("done")) {
-    var el = thinkingGroup.el;
-    el.classList.remove("done");
-    el.querySelector(".thinking-content").textContent = "";
-    var reuseLabel = el.querySelector(".thinking-label");
-    if (reuseLabel) reuseLabel.textContent = "Thinking";
-    // Mate mode: restore dots activity row, hide thinking header
-    if (el.classList.contains("mate-thinking")) {
-      var actRow = el.querySelector(".mate-thinking-activity");
-      if (actRow) {
-        actRow.style.display = "";
-      }
-      var header = el.querySelector(".thinking-header");
-      if (header) header.style.display = "none";
-    }
-    currentThinking = { el: el, fullText: "", startTime: Date.now() };
-    refreshIcons();
-    maybeScrollToBottom();
-    if (!el.classList.contains("mate-thinking")) {
-      ctx.setActivity("thinking");
-    }
-    return;
-  }
-
-  var el = document.createElement("div");
-  el.className = "thinking-item";
-
-  if (ctx.isMateDm()) {
-    var mateName = ctx.getMateName();
-    var mateAvatar = ctx.getMateAvatarUrl();
-    el.classList.add("mate-thinking");
-    el.innerHTML =
-      '<img class="dm-bubble-avatar dm-bubble-avatar-mate" src="' + escapeHtml(mateAvatar) + '" alt="">' +
-      '<div class="dm-bubble-content">' +
-      '<div class="dm-bubble-header"><span class="dm-bubble-name">' + escapeHtml(mateName) + '</span></div>' +
-      '<div class="mate-thinking-dots mate-thinking-activity"><span></span><span></span><span></span></div>' +
-      '<div class="thinking-header" style="display:none">' +
-      '<span class="thinking-chevron">' + iconHtml("chevron-right") + '</span>' +
-      '<span class="thinking-label">Thinking</span>' +
-      '<span class="thinking-duration"></span>' +
-      '<span class="thinking-spinner">' + iconHtml("loader", "icon-spin") + '</span>' +
-      '</div>' +
-      '<div class="thinking-content"></div>' +
-      '</div>';
-  } else {
-    el.innerHTML =
-      '<div class="thinking-header">' +
-      '<span class="thinking-chevron">' + iconHtml("chevron-right") + '</span>' +
-      '<span class="thinking-label">Thinking</span>' +
-      '<span class="thinking-duration"></span>' +
-      '<span class="thinking-spinner">' + iconHtml("loader", "icon-spin") + '</span>' +
-      '</div>' +
-      '<div class="thinking-content"></div>';
-  }
-
-  el.querySelector(".thinking-header").addEventListener("click", function () {
-    el.classList.toggle("expanded");
-  });
-
-  ctx.addToMessages(el);
-  refreshIcons();
-  maybeScrollToBottom();
-  thinkingGroup = { el: el, count: 0, totalDuration: 0 };
-  currentThinking = { el: el, fullText: "", startTime: Date.now() };
+  var el = startThinkingSegment();
   if (!ctx.isMateDm()) {
     ctx.setActivity("thinking");
   }
+  return el;
 }
 
 export function appendThinking(text) {
-  if (!currentThinking) return;
-  currentThinking.fullText += text;
-  currentThinking.el.querySelector(".thinking-content").textContent = currentThinking.fullText;
-  maybeScrollToBottom();
+  appendThinkingText(text);
 }
 
 export function stopThinking(duration) {
-  if (!currentThinking) return;
-  var secs = typeof duration === "number" ? duration : (Date.now() - currentThinking.startTime) / 1000;
-  currentThinking.el.classList.add("done");
-  if (thinkingGroup && thinkingGroup.el === currentThinking.el) {
-    thinkingGroup.count++;
-    thinkingGroup.totalDuration += secs;
-    currentThinking.el.querySelector(".thinking-duration").textContent = " " + thinkingGroup.totalDuration.toFixed(1) + "s";
-  } else {
-    currentThinking.el.querySelector(".thinking-duration").textContent = " " + secs.toFixed(1) + "s";
-  }
-  // If no thinking text was streamed (e.g. Codex reasoning items arrive
-  // with encrypted/hidden content, or Claude without extended-thinking),
-  // the expand affordance is misleading because there's nothing inside.
-  // Strip the chevron and the click handler so the header reads as a
-  // plain label.
-  var hasContent = !!(currentThinking.fullText && currentThinking.fullText.length > 0);
-  if (!hasContent) {
-    currentThinking.el.classList.add("empty");
-    var chev = currentThinking.el.querySelector(".thinking-chevron");
-    if (chev) chev.style.display = "none";
-    var hdr = currentThinking.el.querySelector(".thinking-header");
-    if (hdr) {
-      hdr.style.cursor = "default";
-      // Replace click listener by cloning the node (cheapest way to strip listeners).
-      var clone = hdr.cloneNode(true);
-      hdr.parentNode.replaceChild(clone, hdr);
-    }
-  }
-  // In mate mode: hide sparkle activity, show compact thinking header.
-  if (currentThinking.el.classList.contains("mate-thinking")) {
-    var actRow = currentThinking.el.querySelector(".mate-thinking-activity");
-    if (actRow) actRow.style.display = "none";
-    var header = currentThinking.el.querySelector(".thinking-header");
-    if (header) {
-      header.style.display = "";
-      header.style.cursor = hasContent ? "pointer" : "default";
-    }
-  }
-  currentThinking = null;
+  stopThinkingSegment(duration);
 }
 
 export function resetThinkingGroup() {
-  thinkingGroup = null;
+  resetThinkingTurn();
 }
 
 // --- Tool items ---
@@ -2521,7 +2410,7 @@ export function getHiddenResultTools() { return HIDDEN_RESULT_TOOLS; }
 export function saveToolState() {
   return {
     tools: tools,
-    currentThinking: currentThinking,
+    thinkingState: saveThinkingState(),
     todoWidgetEl: todoWidgetEl,
     todoMeta: todoMeta,
     inPlanMode: inPlanMode,
@@ -2536,7 +2425,7 @@ export function saveToolState() {
 
 export function restoreToolState(saved) {
   tools = saved.tools;
-  currentThinking = saved.currentThinking;
+  restoreThinkingState(saved.thinkingState);
   todoWidgetEl = saved.todoWidgetEl;
   todoMeta = saved.todoMeta || normalizeTodoMeta();
   inPlanMode = saved.inPlanMode;
@@ -2553,8 +2442,7 @@ export function restoreToolState(saved) {
 
 export function resetToolState() {
   tools = {};
-  currentThinking = null;
-  thinkingGroup = null;
+  clearThinkingState();
   inPlanMode = false;
   planContent = null;
   currentPlanCardEl = null;

package/lib/public/modules/worker-proposal.js

@@ -128,11 +128,6 @@ function applyState(card, msg) {
     error.textContent = msg.error || "";
     error.classList.toggle("hidden", !msg.error);
   }
-  var preview = card.querySelector(".worker-proposal-result");
-  if (preview && msg.resultPreview) {
-    preview.textContent = msg.resultPreview;
-    preview.classList.remove("hidden");
-  }
   setControlsDisabled(card, status !== "pending");
   var actions = card.querySelector(".worker-proposal-actions");
   if (actions) actions.classList.toggle("hidden", autoAccepted);
@@ -248,9 +243,6 @@ export function renderWorkerProposal(msg) {
   var error = document.createElement("div");
   error.className = "worker-proposal-error hidden";
   card.appendChild(error);
-  var result = document.createElement("div");
-  result.className = "worker-proposal-result hidden";
-  card.appendChild(result);
 
   var actions = document.createElement("div");
   actions.className = "worker-proposal-actions";

package/lib/sdk-bridge.js

@@ -2121,6 +2121,7 @@ function createSDKBridge(opts) {
       // No active query — just store the model for next startQuery
       session.model = model;
       sm.saveSessionFile(session);
+      sm.broadcastSessionList();
       sm.defaultModelByVendor = sm.defaultModelByVendor || {};
       // Confirm against the session vendor so a non-default vendor does not
       // receive model metadata labeled as the project's default adapter.
@@ -2134,6 +2135,7 @@ function createSDKBridge(opts) {
       await session.queryInstance.setModel(model);
       session.model = model;
       sm.saveSessionFile(session);
+      sm.broadcastSessionList();
       sm.defaultModelByVendor = sm.defaultModelByVendor || {};
       var sessionVendor = session.vendor || (adapter && adapter.vendor) || "claude";
       sm.defaultModelByVendor[sessionVendor] = model;
@@ -2156,6 +2158,7 @@ function createSDKBridge(opts) {
     sm.currentEffortByVendor[effortVendor] = clamped;
     session.effort = clamped;
     sm.saveSessionFile(session);
+    sm.broadcastSessionList();
     sm.currentEffort = clamped;
     if (!session.queryInstance) {
       return clamped;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "4.0.0-beta.24",
+  "version": "4.0.0-beta.25",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js",