clay-server 2.36.1-beta.5 → 2.36.2-beta.1

package/lib/public/css/messages.css

@@ -1346,6 +1346,38 @@ pre.mermaid-error {
   padding: 0 20px;
 }
 
+/* Dead-session compaction: when a session is resumed without a live SDK
+   process and the todo widget still has pending/in_progress items, the
+   item list is hidden so the widget doesn't anchor visual position
+   mid-page. Click the header to toggle the .todo-widget-dead-expanded
+   override class which restores the full view. */
+.todo-widget-dead-compact .todo-header {
+  cursor: pointer;
+  border-radius: 12px;
+}
+.todo-widget-dead-compact .todo-header::after {
+  content: "paused";
+  font-size: 10px;
+  color: var(--text-muted);
+  background: rgba(var(--overlay-rgb), 0.06);
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-left: 6px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.todo-widget-dead-compact .todo-progress,
+.todo-widget-dead-compact .todo-items {
+  display: none;
+}
+.todo-widget-dead-compact.todo-widget-dead-expanded .todo-header {
+  border-radius: 12px 12px 0 0;
+}
+.todo-widget-dead-compact.todo-widget-dead-expanded .todo-progress,
+.todo-widget-dead-compact.todo-widget-dead-expanded .todo-items {
+  display: block;
+}
+
 .todo-header {
   display: flex;
   align-items: center;

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

@@ -8,7 +8,7 @@ import { getWs } from './ws-ref.js';
 // --- Leaf module imports ---
 import { showToast } from './utils.js';
 import { refreshIcons, iconHtml } from './icons.js';
-import { renderMarkdown } from './markdown.js';
+import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks } from './markdown.js';
 import { updatePageTitle } from './sidebar.js';
 import { renderSessionList, updateSessionPresence, populateCliSessionList, handleSearchResults, updateSessionBadge } from './sidebar-sessions.js';
 import { updateDmBadge, renderSidebarPresence, setMentionActive, renderUserStrip } from './sidebar-mates.js';
@@ -20,7 +20,7 @@ import { renderMemoryList } from './mate-memory.js';
 import { handlePaletteSessionSwitch, setPaletteVersion } from './command-palette.js';
 import { handleFindInSessionResults } from './session-search.js';
 import { handleInputSync, autoResize, builtinCommands, setScheduleBtnDisabled } from './input.js';
-import { startThinking, appendThinking, stopThinking, resetThinkingGroup, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, closeToolGroup, removeToolFromGroup, resetToolState, getTools, getPlanContent, setPlanContent, renderPlanBanner, renderPlanCard, getTodoTools, handleTodoWrite, handleTaskCreate, handleTaskUpdate, isPlanFilePath, enableMainInput, addTurnMeta, updateSubagentActivity, addSubagentToolEntry, markSubagentDone, initSubagentStop, updateSubagentProgress, updateSubagentTaskStatus, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionCancelled, markPermissionResolved, renderElicitationRequest, markElicitationResolved } from './tools.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 } from './tools.js';
 import { showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundEnabled } from './notifications.js';
 import { handleFsList, handleFsRead, handleFileChanged, handleDirChanged, handleFileHistory, handleGitDiff, handleFileAt, refreshIfOpen, getPendingNavigate, handleFsSearch } from './filebrowser.js';
 import { isProjectSettingsOpen, handleInstructionsRead, handleInstructionsWrite, handleProjectEnv, handleProjectEnvSaved, handleProjectSharedEnv, handleProjectSharedEnvSaved, handleProjectOwnerChanged } from './project-settings.js';
@@ -149,6 +149,20 @@ export function processMessage(msg) {
 
       case "history_done":
         store.set({ replayingHistory: false });
+        // 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-
+        // bottom observer chases for several seconds on long sessions.
+        if (messagesEl) {
+          highlightCodeBlocks(messagesEl);
+          renderMermaidBlocks(messagesEl);
+        }
+        // Compact dead-session todo widgets (unfinished items will never
+        // resolve — the agent isn't coming back) so they don't anchor
+        // visual position mid-page on resume.
+        if (!store.get('sessionIsProcessing')) {
+          applyDeadSessionTodoCompaction();
+        }
         // Hide vendor toggle if session has history (vendor already locked)
         var _hTotal = store.get('historyTotal') || 0;
         var _vtw2 = document.getElementById("vendor-toggle-wrap");
@@ -558,7 +572,7 @@ export function processMessage(msg) {
         } else if (_prevSid) {
           delete store.get('sessionDrafts')[_prevSid];
         }
-        store.set({ activeSessionId: msg.id, cliSessionId: msg.cliSessionId || null, vendorCapabilities: msg.capabilities || {} });
+        store.set({ activeSessionId: msg.id, cliSessionId: msg.cliSessionId || null, vendorCapabilities: msg.capabilities || {}, sessionIsProcessing: !!msg.isProcessing });
         if (msg.vendor) {
           if (!store.get('vendorSelectionLocked') || msg.hasHistory) {
             store.set({ currentVendor: msg.vendor });
@@ -715,6 +729,10 @@ export function processMessage(msg) {
       case "status":
         if (msg.status === "processing") {
           setStatus("processing");
+          // Session became live — undo any dead-session todo compaction
+          // applied at history_done time.
+          store.set({ sessionIsProcessing: true });
+          applyDeadSessionTodoCompaction();
           if (!(store.get('dmMode') && store.get('dmTargetUser') && store.get('dmTargetUser').isMate) && !store.get('matePreThinkingEl')) {
             setActivity("thinking");
           }

package/lib/public/modules/markdown.js

@@ -1,6 +1,7 @@
 import { copyToClipboard, escapeHtml } from './utils.js';
 import { refreshIcons } from './icons.js';
 import { getMermaidThemeVars } from './theme.js';
+import { store } from './store.js';
 
 // Initialize markdown parser
 marked.use({ gfm: true, breaks: false });
@@ -57,6 +58,13 @@ export function parseEmojis(el) {
 var langAliases = { jsonl: "json", dotenv: "bash" };
 
 export function highlightCodeBlocks(el) {
+  // Defer all syntax highlighting + copy-button injection while replaying
+  // history. Doing this per-message during replay triggers a long tail of
+  // sequential reflows that the sticky-bottom scroll observer chases for
+  // 4-8s. After history_done, app-messages.js calls this once on the full
+  // messages container, so unhighlighted blocks (selector :not(.hljs))
+  // are picked up in a single pass.
+  if (store.get('replayingHistory')) return;
   el.querySelectorAll("pre code:not(.hljs):not(.language-mermaid)").forEach(function (block) {
     var cls = Array.from(block.classList).find(function (c) { return c.startsWith("language-"); });
     if (cls) {
@@ -93,6 +101,9 @@ export function highlightCodeBlocks(el) {
 }
 
 export function renderMermaidBlocks(el) {
+  // Same rationale as highlightCodeBlocks: defer mermaid renders until
+  // history_done so they don't cause cascading layout shifts during replay.
+  if (store.get('replayingHistory')) return;
   var blocks = el.querySelectorAll("pre code.language-mermaid");
   blocks.forEach(function (codeEl) {
     var pre = codeEl.parentElement;

package/lib/public/modules/tools.js

@@ -30,6 +30,11 @@ var todoItems = [];
 var todoWidgetEl = null;
 var todoWidgetVisible = true; // whether in-chat widget is in viewport
 var todoObserver = null;
+// When a session is resumed without a live SDK process and still has
+// pending/in_progress items, the widget is rendered in compact mode
+// (header + count only) so it doesn't anchor visual position mid-page
+// or extend the sticky-bottom settle window with a tall element.
+var todoDeadCompact = false;
 var todoMeta = {
   variant: "tasks",
   title: "Tasks",
@@ -1289,7 +1294,12 @@ export function handleTodoWrite(input) {
       activeForm: t.activeForm || "",
     };
   });
+  // A fresh TodoWrite during replay is just historical state. After replay
+  // ends, applyDeadSessionTodoCompaction (called from history_done) decides
+  // whether to compact. During live operation, sessionIsProcessing is true
+  // and applyDeadSessionTodoCompaction is a no-op for compaction.
   renderTodoWidget();
+  applyDeadSessionTodoCompaction();
 }
 
 export function handleTaskCreate(input) {
@@ -1359,7 +1369,9 @@ function renderTodoWidget() {
     todoWidgetEl = document.createElement("div");
     todoWidgetEl.className = "todo-widget";
   }
-  todoWidgetEl.className = "todo-widget" + (todoMeta.variant === "plan" ? " todo-widget-plan" : "");
+  todoWidgetEl.className = "todo-widget"
+    + (todoMeta.variant === "plan" ? " todo-widget-plan" : "")
+    + (todoDeadCompact ? " todo-widget-dead-compact" : "");
 
   var completed = 0;
   for (var i = 0; i < todoItems.length; i++) {
@@ -1395,12 +1407,38 @@ function renderTodoWidget() {
   if (isNew) {
     ctx.addToMessages(todoWidgetEl);
     setupTodoObserver();
+    // Click-to-expand for compact mode. Toggling the override class lets
+    // the user inspect items without permanently un-compacting the widget.
+    todoWidgetEl.addEventListener("click", function (e) {
+      if (!todoWidgetEl.classList.contains("todo-widget-dead-compact")) return;
+      // Only expand on header click, not on items inside an already-expanded view
+      var header = e.target.closest(".todo-header");
+      if (!header) return;
+      todoWidgetEl.classList.toggle("todo-widget-dead-expanded");
+    });
   }
   updateTodoSticky();
   refreshIcons();
   maybeScrollToBottom();
 }
 
+export function applyDeadSessionTodoCompaction() {
+  // Called after history_done and on status changes. Decides whether the
+  // current session is "dead" (resumed, no live SDK process) and whether
+  // the todo widget has unfinished items that will never resolve.
+  var isLive = !!store.get('sessionIsProcessing');
+  var hasUnfinished = false;
+  for (var i = 0; i < todoItems.length; i++) {
+    var s = todoItems[i].status;
+    if (s === "in_progress" || s === "pending") { hasUnfinished = true; break; }
+  }
+  todoDeadCompact = !isLive && hasUnfinished;
+  if (todoWidgetEl) {
+    todoWidgetEl.classList.toggle("todo-widget-dead-compact", todoDeadCompact);
+    if (!todoDeadCompact) todoWidgetEl.classList.remove("todo-widget-dead-expanded");
+  }
+}
+
 function setupTodoObserver() {
   if (todoObserver) { todoObserver.disconnect(); todoObserver = null; }
   if (!todoWidgetEl) return;

package/lib/sessions.js

@@ -345,7 +345,10 @@ function createSessionManager(opts) {
     return session;
   }
 
-  var HISTORY_PAGE_SIZE = 200;
+  // Initial replay payload size. Lowered from 200 to reduce client-side
+  // layout work on resume — older items are loaded progressively on
+  // scroll-up via the existing pagination path.
+  var HISTORY_PAGE_SIZE = 100;
 
   function findTurnBoundary(history, targetIndex) {
     for (var i = targetIndex; i >= 0; i--) {
@@ -420,7 +423,7 @@ function createSessionManager(opts) {
     var _capsByVendor = capabilitiesByVendor || {};
     var _sessionVendor = session.vendor || defaultVendor || "claude";
     var _vendorCaps = _capsByVendor[_sessionVendor] || {};
-    _send({ type: "session_switched", id: localId, cliSessionId: session.cliSessionId || null, loop: session.loop || null, vendor: session.vendor || null, hasHistory: (session.history && session.history.length > 0), capabilities: _vendorCaps });
+    _send({ type: "session_switched", id: localId, cliSessionId: session.cliSessionId || null, loop: session.loop || null, vendor: session.vendor || null, hasHistory: (session.history && session.history.length > 0), capabilities: _vendorCaps, isProcessing: !!session.isProcessing });
     // Send vendor-specific slash commands
     var _vendorCmds = slashCommandsByVendor[_sessionVendor] || slashCommands || [];
     _send({ type: "slash_commands", commands: _vendorCmds, vendor: _sessionVendor });

package/package.json

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