@agent-link/server 0.1.113 → 0.1.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-link/server",
-  "version": "0.1.113",
+  "version": "0.1.114",
   "description": "AgentLink relay server",
   "license": "MIT",
   "repository": {

package/web/app.js

@@ -89,6 +89,75 @@ const App = {
     const fileInputRef = ref(null);
     const dragOver = ref(false);
 
+    // Multi-session parallel state
+    const conversationCache = ref({});          // conversationId → saved state snapshot
+    const currentConversationId = ref(crypto.randomUUID());    // currently visible conversation
+    const processingConversations = ref({});    // conversationId → boolean
+
+    // ── switchConversation: save current → load target ──
+    // Defined here and used by sidebar.newConversation, sidebar.resumeSession, workdir_changed
+    // Needs access to streaming / connection which are created later, so we use late-binding refs.
+    let _getToolMsgMap = () => new Map();
+    let _restoreToolMsgMap = () => {};
+    let _clearToolMsgMap = () => {};
+
+    function switchConversation(newConvId) {
+      const oldConvId = currentConversationId.value;
+
+      // Save current state (if there is one)
+      if (oldConvId) {
+        const streamState = streaming.saveState();
+        conversationCache.value[oldConvId] = {
+          messages: messages.value,
+          isProcessing: isProcessing.value,
+          isCompacting: isCompacting.value,
+          loadingHistory: loadingHistory.value,
+          claudeSessionId: currentClaudeSessionId.value,
+          visibleLimit: visibleLimit.value,
+          needsResume: needsResume.value,
+          streamingState: streamState,
+          toolMsgMap: _getToolMsgMap(),
+          messageIdCounter: streaming.getMessageIdCounter(),
+          queuedMessages: queuedMessages.value,
+        };
+      }
+
+      // Load target state
+      const cached = conversationCache.value[newConvId];
+      if (cached) {
+        messages.value = cached.messages;
+        isProcessing.value = cached.isProcessing;
+        isCompacting.value = cached.isCompacting;
+        loadingHistory.value = cached.loadingHistory || false;
+        currentClaudeSessionId.value = cached.claudeSessionId;
+        visibleLimit.value = cached.visibleLimit;
+        needsResume.value = cached.needsResume;
+        streaming.restoreState(cached.streamingState || { pendingText: '', streamingMessageId: null, messageIdCounter: cached.messageIdCounter || 0 });
+        // Background routing may have incremented messageIdCounter beyond what
+        // streamingState recorded at save time — use the authoritative value.
+        streaming.setMessageIdCounter(cached.messageIdCounter || 0);
+        _restoreToolMsgMap(cached.toolMsgMap || new Map());
+        queuedMessages.value = cached.queuedMessages || [];
+      } else {
+        // New blank conversation
+        messages.value = [];
+        isProcessing.value = false;
+        isCompacting.value = false;
+        loadingHistory.value = false;
+        currentClaudeSessionId.value = null;
+        visibleLimit.value = 50;
+        needsResume.value = false;
+        streaming.setMessageIdCounter(0);
+        streaming.setStreamingMessageId(null);
+        streaming.reset();
+        _clearToolMsgMap();
+        queuedMessages.value = [];
+      }
+
+      currentConversationId.value = newConvId;
+      scrollToBottom(true);
+    }
+
     // Theme
     const theme = ref(localStorage.getItem('agentlink-theme') || 'light');
     function applyTheme() {
@@ -159,9 +228,12 @@ const App = {
       deleteConfirmOpen, deleteConfirmTitle,
       renamingSessionId, renameText,
       hostname, workdirHistory,
+      // Multi-session parallel
+      currentConversationId, conversationCache, processingConversations,
+      switchConversation,
     });
 
-    const { connect, wsSend, closeWs, submitPassword, setDequeueNext } = createConnection({
+    const { connect, wsSend, closeWs, submitPassword, setDequeueNext, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap } = createConnection({
       status, agentName, hostname, workDir, sessionId, error,
       serverVersion, agentVersion, latency,
       messages, isProcessing, isCompacting, visibleLimit, queuedMessages,
@@ -169,11 +241,18 @@ const App = {
       folderPickerLoading, folderPickerEntries, folderPickerPath,
       authRequired, authPassword, authError, authAttempts, authLocked,
       streaming, sidebar, scrollToBottom,
+      // Multi-session parallel
+      currentConversationId, processingConversations, conversationCache,
+      switchConversation,
     });
 
     // Now wire up the forwarding function
     _wsSend = wsSend;
     setDequeueNext(dequeueNext);
+    // Wire up late-binding toolMsgMap functions for switchConversation
+    _getToolMsgMap = getToolMsgMap;
+    _restoreToolMsgMap = restoreToolMsgMap;
+    _clearToolMsgMap = clearToolMsgMap;
 
     // ── Computed ──
     const hasInput = computed(() => !!(inputText.value.trim() || attachments.value.length > 0));
@@ -205,6 +284,9 @@ const App = {
       }));
 
       const payload = { type: 'chat', prompt: text || '(see attached files)' };
+      if (currentConversationId.value) {
+        payload.conversationId = currentConversationId.value;
+      }
       if (needsResume.value && currentClaudeSessionId.value) {
         payload.resumeSessionId = currentClaudeSessionId.value;
         needsResume.value = false;
@@ -228,6 +310,9 @@ const App = {
         userMsg.status = 'sent';
         messages.value.push(userMsg);
         isProcessing.value = true;
+        if (currentConversationId.value) {
+          processingConversations.value[currentConversationId.value] = true;
+        }
         wsSend(payload);
       }
       scrollToBottom(true);
@@ -236,7 +321,11 @@ const App = {
 
     function cancelExecution() {
       if (!isProcessing.value) return;
-      wsSend({ type: 'cancel_execution' });
+      const cancelPayload = { type: 'cancel_execution' };
+      if (currentConversationId.value) {
+        cancelPayload.conversationId = currentConversationId.value;
+      }
+      wsSend(cancelPayload);
     }
 
     function dequeueNext() {
@@ -249,6 +338,9 @@ const App = {
       };
       messages.value.push(userMsg);
       isProcessing.value = true;
+      if (currentConversationId.value) {
+        processingConversations.value[currentConversationId.value] = true;
+      }
       wsSend(queued.payload);
       scrollToBottom(true);
     }
@@ -311,6 +403,8 @@ const App = {
       requestSessionList: sidebar.requestSessionList,
       formatRelativeTime,
       groupedSessions: sidebar.groupedSessions,
+      isSessionProcessing: sidebar.isSessionProcessing,
+      processingConversations,
       // Folder picker
       folderPickerOpen, folderPickerPath, folderPickerEntries,
       folderPickerLoading, folderPickerSelected,
@@ -395,7 +489,7 @@ const App = {
               </div>
               <div class="sidebar-workdir-header">
                 <div class="sidebar-workdir-label">Working Directory</div>
-                <button class="sidebar-change-dir-btn" @click="openFolderPicker" title="Change working directory" :disabled="isProcessing">
+                <button class="sidebar-change-dir-btn" @click="openFolderPicker" title="Change working directory">
                   <svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
                 </button>
               </div>
@@ -427,7 +521,7 @@ const App = {
               </button>
             </div>
 
-            <button class="new-conversation-btn" @click="newConversation" :disabled="isProcessing">
+            <button class="new-conversation-btn" @click="newConversation">
               <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
               New conversation
             </button>
@@ -443,9 +537,10 @@ const App = {
                 <div class="session-group-label">{{ group.label }}</div>
                 <div
                   v-for="s in group.sessions" :key="s.sessionId"
-                  :class="['session-item', { active: currentClaudeSessionId === s.sessionId }]"
+                  :class="['session-item', { active: currentClaudeSessionId === s.sessionId, processing: isSessionProcessing(s.sessionId) }]"
                   @click="renamingSessionId !== s.sessionId && resumeSession(s)"
                   :title="s.preview"
+                  :aria-label="(s.title || s.sessionId.slice(0, 8)) + (isSessionProcessing(s.sessionId) ? ' (processing)' : '')"
                 >
                   <div v-if="renamingSessionId === s.sessionId" class="session-rename-row">
                     <input
@@ -462,7 +557,7 @@ const App = {
                   <div v-else class="session-title">{{ s.title }}</div>
                   <div class="session-meta">
                     <span>{{ formatRelativeTime(s.lastModified) }}</span>
-                    <span v-if="renamingSessionId !== s.sessionId && !isProcessing" class="session-actions">
+                    <span v-if="renamingSessionId !== s.sessionId" class="session-actions">
                       <button
                         class="session-rename-btn"
                         @click.stop="startRename(s)"

package/web/modules/connection.js

@@ -20,6 +20,9 @@ export function createConnection(deps) {
     authRequired, authPassword, authError, authAttempts, authLocked,
     streaming, sidebar,
     scrollToBottom,
+    // Multi-session parallel
+    currentConversationId, processingConversations, conversationCache,
+    switchConversation,
   } = deps;
 
   // Dequeue callback — set after creation to resolve circular dependency
@@ -33,6 +36,265 @@ export function createConnection(deps) {
   let pingTimer = null;
   const toolMsgMap = new Map(); // toolId -> message (for fast tool_result lookup)
 
+  // ── toolMsgMap save/restore for conversation switching ──
+  function getToolMsgMap() { return new Map(toolMsgMap); }
+  function restoreToolMsgMap(map) { toolMsgMap.clear(); for (const [k, v] of map) toolMsgMap.set(k, v); }
+  function clearToolMsgMap() { toolMsgMap.clear(); }
+
+  // ── Background conversation routing ──
+  // When a message arrives for a conversation that is not the current foreground,
+  // update its cached state directly (no streaming animation).
+  function routeToBackgroundConversation(convId, msg) {
+    const cache = conversationCache.value[convId];
+    if (!cache) return; // no cache entry — discard
+
+    if (msg.type === 'session_started') {
+      // Claude session ID captured for background conversation
+      cache.claudeSessionId = msg.claudeSessionId;
+      sidebar.requestSessionList();
+      return;
+    }
+
+    if (msg.type === 'conversation_resumed') {
+      cache.claudeSessionId = msg.claudeSessionId;
+      if (msg.history && Array.isArray(msg.history)) {
+        const batch = [];
+        for (const h of msg.history) {
+          if (h.role === 'user') {
+            if (isContextSummary(h.content)) {
+              batch.push({
+                id: ++cache.messageIdCounter, role: 'context-summary',
+                content: h.content, contextExpanded: false,
+                timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
+              });
+            } else if (h.isCommandOutput) {
+              batch.push({
+                id: ++cache.messageIdCounter, role: 'system',
+                content: h.content, isCommandOutput: true,
+                timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
+              });
+            } else {
+              batch.push({
+                id: ++cache.messageIdCounter, role: 'user',
+                content: h.content,
+                timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
+              });
+            }
+          } else if (h.role === 'assistant') {
+            const last = batch[batch.length - 1];
+            if (last && last.role === 'assistant' && !last.isStreaming) {
+              last.content += '\n\n' + h.content;
+            } else {
+              batch.push({
+                id: ++cache.messageIdCounter, role: 'assistant',
+                content: h.content, isStreaming: false,
+                timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
+              });
+            }
+          } else if (h.role === 'tool') {
+            batch.push({
+              id: ++cache.messageIdCounter, role: 'tool',
+              toolId: h.toolId || '', toolName: h.toolName || 'unknown',
+              toolInput: h.toolInput || '', hasResult: true,
+              expanded: (h.toolName === 'Edit' || h.toolName === 'TodoWrite'),
+              timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
+            });
+          }
+        }
+        cache.messages = batch;
+        if (cache.toolMsgMap) cache.toolMsgMap.clear();
+      }
+      cache.loadingHistory = false;
+      if (msg.isCompacting) {
+        cache.isCompacting = true;
+        cache.isProcessing = true;
+        processingConversations.value[convId] = true;
+        cache.messages.push({
+          id: ++cache.messageIdCounter, role: 'system',
+          content: 'Context compacting...', isCompactStart: true,
+          timestamp: new Date(),
+        });
+      } else if (msg.isProcessing) {
+        cache.isProcessing = true;
+        processingConversations.value[convId] = true;
+        cache.messages.push({
+          id: ++cache.messageIdCounter, role: 'system',
+          content: 'Agent is processing...',
+          timestamp: new Date(),
+        });
+      } else {
+        cache.messages.push({
+          id: ++cache.messageIdCounter, role: 'system',
+          content: 'Session restored. You can continue the conversation.',
+          timestamp: new Date(),
+        });
+      }
+      return;
+    }
+
+    if (msg.type === 'claude_output') {
+      const data = msg.data;
+      if (!data) return;
+      if (data.type === 'content_block_delta' && data.delta) {
+        // Append text to last assistant message (or create new one)
+        const msgs = cache.messages;
+        const last = msgs.length > 0 ? msgs[msgs.length - 1] : null;
+        if (last && last.role === 'assistant' && last.isStreaming) {
+          last.content += data.delta;
+        } else {
+          msgs.push({
+            id: ++cache.messageIdCounter, role: 'assistant',
+            content: data.delta, isStreaming: true, timestamp: new Date(),
+          });
+        }
+      } else if (data.type === 'tool_use' && data.tools) {
+        // Finalize streaming message
+        const msgs = cache.messages;
+        const last = msgs.length > 0 ? msgs[msgs.length - 1] : null;
+        if (last && last.role === 'assistant' && last.isStreaming) {
+          last.isStreaming = false;
+          if (isContextSummary(last.content)) {
+            last.role = 'context-summary';
+            last.contextExpanded = false;
+          }
+        }
+        for (const tool of data.tools) {
+          const toolMsg = {
+            id: ++cache.messageIdCounter, role: 'tool',
+            toolId: tool.id, toolName: tool.name || 'unknown',
+            toolInput: tool.input ? JSON.stringify(tool.input, null, 2) : '',
+            hasResult: false, expanded: (tool.name === 'Edit' || tool.name === 'TodoWrite'),
+            timestamp: new Date(),
+          };
+          msgs.push(toolMsg);
+          if (tool.id) {
+            if (!cache.toolMsgMap) cache.toolMsgMap = new Map();
+            cache.toolMsgMap.set(tool.id, toolMsg);
+          }
+        }
+      } else if (data.type === 'user' && data.tool_use_result) {
+        const result = data.tool_use_result;
+        const results = Array.isArray(result) ? result : [result];
+        const tMap = cache.toolMsgMap || new Map();
+        for (const r of results) {
+          const toolMsg = tMap.get(r.tool_use_id);
+          if (toolMsg) {
+            toolMsg.toolOutput = typeof r.content === 'string'
+              ? r.content : JSON.stringify(r.content, null, 2);
+            toolMsg.hasResult = true;
+          }
+        }
+      }
+    } else if (msg.type === 'turn_completed' || msg.type === 'execution_cancelled') {
+      // Finalize streaming message
+      const msgs = cache.messages;
+      const last = msgs.length > 0 ? msgs[msgs.length - 1] : null;
+      if (last && last.role === 'assistant' && last.isStreaming) {
+        last.isStreaming = false;
+        if (isContextSummary(last.content)) {
+          last.role = 'context-summary';
+          last.contextExpanded = false;
+        }
+      }
+      cache.isProcessing = false;
+      cache.isCompacting = false;
+      if (cache.toolMsgMap) cache.toolMsgMap.clear();
+      processingConversations.value[convId] = false;
+      if (msg.type === 'execution_cancelled') {
+        cache.messages.push({
+          id: ++cache.messageIdCounter, role: 'system',
+          content: 'Generation stopped.', timestamp: new Date(),
+        });
+      }
+      sidebar.requestSessionList();
+      // Dequeue next message for this background conversation
+      if (cache.queuedMessages && cache.queuedMessages.length > 0) {
+        const queued = cache.queuedMessages.shift();
+        cache.messages.push({
+          id: ++cache.messageIdCounter, role: 'user', status: 'sent',
+          content: queued.content, attachments: queued.attachments,
+          timestamp: new Date(),
+        });
+        cache.isProcessing = true;
+        processingConversations.value[convId] = true;
+        wsSend(queued.payload);
+      }
+    } else if (msg.type === 'context_compaction') {
+      if (msg.status === 'started') {
+        cache.isCompacting = true;
+        cache.messages.push({
+          id: ++cache.messageIdCounter, role: 'system',
+          content: 'Context compacting...', isCompactStart: true,
+          timestamp: new Date(),
+        });
+      } else if (msg.status === 'completed') {
+        cache.isCompacting = false;
+        const startMsg = [...cache.messages].reverse().find(m => m.isCompactStart && !m.compactDone);
+        if (startMsg) {
+          startMsg.content = 'Context compacted';
+          startMsg.compactDone = true;
+        }
+      }
+    } else if (msg.type === 'error') {
+      // Finalize streaming
+      const msgs = cache.messages;
+      const last = msgs.length > 0 ? msgs[msgs.length - 1] : null;
+      if (last && last.role === 'assistant' && last.isStreaming) {
+        last.isStreaming = false;
+      }
+      cache.messages.push({
+        id: ++cache.messageIdCounter, role: 'system',
+        content: msg.message, isError: true, timestamp: new Date(),
+      });
+      cache.isProcessing = false;
+      cache.isCompacting = false;
+      processingConversations.value[convId] = false;
+    } else if (msg.type === 'command_output') {
+      const msgs = cache.messages;
+      const last = msgs.length > 0 ? msgs[msgs.length - 1] : null;
+      if (last && last.role === 'assistant' && last.isStreaming) {
+        last.isStreaming = false;
+      }
+      cache.messages.push({
+        id: ++cache.messageIdCounter, role: 'system',
+        content: msg.content, isCommandOutput: true, timestamp: new Date(),
+      });
+    } else if (msg.type === 'ask_user_question') {
+      // Finalize streaming
+      const msgs = cache.messages;
+      const last = msgs.length > 0 ? msgs[msgs.length - 1] : null;
+      if (last && last.role === 'assistant' && last.isStreaming) {
+        last.isStreaming = false;
+      }
+      // Remove AskUserQuestion tool msg
+      for (let i = msgs.length - 1; i >= 0; i--) {
+        const m = msgs[i];
+        if (m.role === 'tool' && m.toolName === 'AskUserQuestion') {
+          msgs.splice(i, 1);
+          break;
+        }
+        if (m.role === 'user') break;
+      }
+      const questions = msg.questions || [];
+      const selectedAnswers = {};
+      const customTexts = {};
+      for (let i = 0; i < questions.length; i++) {
+        selectedAnswers[i] = questions[i].multiSelect ? [] : null;
+        customTexts[i] = '';
+      }
+      msgs.push({
+        id: ++cache.messageIdCounter,
+        role: 'ask-question',
+        requestId: msg.requestId,
+        questions,
+        answered: false,
+        selectedAnswers,
+        customTexts,
+        timestamp: new Date(),
+      });
+    }
+  }
+
   function wsSend(msg) {
     if (!ws || ws.readyState !== WebSocket.OPEN) return;
     if (sessionKey) {
@@ -186,6 +448,16 @@ export function createConnection(deps) {
         msg = parsed;
       }
 
+      // ── Multi-session: route messages to background conversations ──
+      // Messages with a conversationId that doesn't match the current foreground
+      // conversation are routed to their cached background state.
+      if (msg.conversationId && currentConversationId
+          && currentConversationId.value
+          && msg.conversationId !== currentConversationId.value) {
+        routeToBackgroundConversation(msg.conversationId, msg);
+        return;
+      }
+
       if (msg.type === 'connected') {
         // Reset auth state
         authRequired.value = false;
@@ -230,6 +502,17 @@ export function createConnection(deps) {
         isCompacting.value = false;
         queuedMessages.value = [];
         loadingSessions.value = false;
+        // Clear processing state for all background conversations
+        if (conversationCache) {
+          for (const [convId, cached] of Object.entries(conversationCache.value)) {
+            cached.isProcessing = false;
+            cached.isCompacting = false;
+            processingConversations.value[convId] = false;
+          }
+        }
+        if (currentConversationId && currentConversationId.value) {
+          processingConversations.value[currentConversationId.value] = false;
+        }
       } else if (msg.type === 'agent_reconnected') {
         status.value = 'Connected';
         error.value = '';
@@ -255,9 +538,16 @@ export function createConnection(deps) {
         isProcessing.value = false;
         isCompacting.value = false;
         loadingSessions.value = false;
+        if (currentConversationId && currentConversationId.value) {
+          processingConversations.value[currentConversationId.value] = false;
+        }
         _dequeueNext();
       } else if (msg.type === 'claude_output') {
         handleClaudeOutput(msg, scheduleHighlight);
+      } else if (msg.type === 'session_started') {
+        // Claude session ID captured — update and refresh sidebar
+        currentClaudeSessionId.value = msg.claudeSessionId;
+        sidebar.requestSessionList();
       } else if (msg.type === 'command_output') {
         streaming.flushReveal();
         finalizeStreamingMsg(scheduleHighlight);
@@ -292,6 +582,9 @@ export function createConnection(deps) {
         isProcessing.value = false;
         isCompacting.value = false;
         toolMsgMap.clear();
+        if (currentConversationId && currentConversationId.value) {
+          processingConversations.value[currentConversationId.value] = false;
+        }
         if (msg.type === 'execution_cancelled') {
           messages.value.push({
             id: streaming.nextId(), role: 'system',
@@ -299,6 +592,7 @@ export function createConnection(deps) {
           });
           scrollToBottom();
         }
+        sidebar.requestSessionList();
         _dequeueNext();
       } else if (msg.type === 'ask_user_question') {
         streaming.flushReveal();
@@ -420,15 +714,24 @@ export function createConnection(deps) {
         workDir.value = msg.workDir;
         localStorage.setItem(`agentlink-workdir-${sessionId.value}`, msg.workDir);
         sidebar.addToWorkdirHistory(msg.workDir);
-        messages.value = [];
-        queuedMessages.value = [];
-        toolMsgMap.clear();
-        visibleLimit.value = 50;
-        streaming.setMessageIdCounter(0);
-        streaming.setStreamingMessageId(null);
-        streaming.reset();
-        currentClaudeSessionId.value = null;
-        isProcessing.value = false;
+
+        // Multi-session: switch to a new blank conversation for the new workdir.
+        // Background conversations keep running and receiving output in their cache.
+        if (switchConversation) {
+          const newConvId = crypto.randomUUID();
+          switchConversation(newConvId);
+        } else {
+          // Fallback for old code path (no switchConversation)
+          messages.value = [];
+          queuedMessages.value = [];
+          toolMsgMap.clear();
+          visibleLimit.value = 50;
+          streaming.setMessageIdCounter(0);
+          streaming.setStreamingMessageId(null);
+          streaming.reset();
+          currentClaudeSessionId.value = null;
+          isProcessing.value = false;
+        }
         messages.value.push({
           id: streaming.nextId(), role: 'system',
           content: 'Working directory changed to: ' + msg.workDir,
@@ -485,5 +788,5 @@ export function createConnection(deps) {
     ws.send(JSON.stringify({ type: 'authenticate', password: pwd }));
   }
 
-  return { connect, wsSend, closeWs, submitPassword, setDequeueNext };
+  return { connect, wsSend, closeWs, submitPassword, setDequeueNext, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap };
 }

package/web/modules/sidebar.js

@@ -32,18 +32,65 @@ export function createSidebar(deps) {
     folderPickerOpen, folderPickerPath, folderPickerEntries,
     folderPickerLoading, folderPickerSelected, streaming,
     hostname, workdirHistory,
+    // Multi-session parallel
+    currentConversationId, conversationCache, processingConversations,
+    switchConversation,
   } = deps;
 
   // ── Session management ──
 
+  let _sessionListTimer = null;
+
   function requestSessionList() {
+    // Debounce: coalesce rapid calls (e.g. session_started + turn_completed)
+    // into a single request. First call fires immediately, subsequent calls
+    // within 2s are deferred.
+    if (_sessionListTimer) {
+      clearTimeout(_sessionListTimer);
+      _sessionListTimer = setTimeout(() => {
+        _sessionListTimer = null;
+        loadingSessions.value = true;
+        wsSend({ type: 'list_sessions' });
+      }, 2000);
+      return;
+    }
     loadingSessions.value = true;
     wsSend({ type: 'list_sessions' });
+    _sessionListTimer = setTimeout(() => { _sessionListTimer = null; }, 2000);
   }
 
   function resumeSession(session) {
-    if (isProcessing.value) return;
     if (window.innerWidth <= 768) sidebarOpen.value = false;
+
+    // Multi-session: check if we already have a conversation loaded for this claudeSessionId
+    if (switchConversation && conversationCache) {
+      // Check cache for existing conversation with this claudeSessionId
+      for (const [convId, cached] of Object.entries(conversationCache.value)) {
+        if (cached.claudeSessionId === session.sessionId) {
+          switchConversation(convId);
+          return;
+        }
+      }
+      // Check if current foreground already shows this session
+      if (currentClaudeSessionId.value === session.sessionId) {
+        return;
+      }
+      // Create new conversationId, switch to it, then send resume
+      const newConvId = crypto.randomUUID();
+      switchConversation(newConvId);
+      currentClaudeSessionId.value = session.sessionId;
+      needsResume.value = true;
+      loadingHistory.value = true;
+      wsSend({
+        type: 'resume_conversation',
+        conversationId: newConvId,
+        claudeSessionId: session.sessionId,
+      });
+      return;
+    }
+
+    // Legacy fallback (no multi-session)
+    if (isProcessing.value) return;
     messages.value = [];
     visibleLimit.value = 50;
     streaming.setMessageIdCounter(0);
@@ -61,8 +108,22 @@ export function createSidebar(deps) {
   }
 
   function newConversation() {
-    if (isProcessing.value) return;
     if (window.innerWidth <= 768) sidebarOpen.value = false;
+
+    // Multi-session: just switch to a new blank conversation
+    if (switchConversation) {
+      const newConvId = crypto.randomUUID();
+      switchConversation(newConvId);
+      messages.value.push({
+        id: streaming.nextId(), role: 'system',
+        content: 'New conversation started.',
+        timestamp: new Date(),
+      });
+      return;
+    }
+
+    // Legacy fallback (no multi-session)
+    if (isProcessing.value) return;
     messages.value = [];
     visibleLimit.value = 50;
     streaming.setMessageIdCounter(0);
@@ -94,8 +155,13 @@ export function createSidebar(deps) {
   const deleteConfirmTitle = deps.deleteConfirmTitle;
 
   function deleteSession(session) {
-    if (isProcessing.value) return;
-    if (currentClaudeSessionId.value === session.sessionId) return; // guard
+    if (currentClaudeSessionId.value === session.sessionId) return; // guard: foreground
+    // Guard: check background conversations that are actively processing
+    if (conversationCache) {
+      for (const [, cached] of Object.entries(conversationCache.value)) {
+        if (cached.claudeSessionId === session.sessionId && cached.isProcessing) return;
+      }
+    }
     pendingDeleteSession = session;
     deleteConfirmTitle.value = session.title || session.sessionId.slice(0, 8);
     deleteConfirmOpen.value = true;
@@ -119,7 +185,6 @@ export function createSidebar(deps) {
   const renameText = deps.renameText;
 
   function startRename(session) {
-    if (isProcessing.value) return;
     renamingSessionId.value = session.sessionId;
     renameText.value = session.title || '';
   }
@@ -251,7 +316,6 @@ export function createSidebar(deps) {
   }
 
   function switchToWorkdir(path) {
-    if (isProcessing.value) return;
     wsSend({ type: 'change_workdir', workDir: path });
   }
 
@@ -259,6 +323,23 @@ export function createSidebar(deps) {
     return workdirHistory.value.filter(p => p !== workDir.value);
   });
 
+  // ── isSessionProcessing ──
+  // Used by sidebar template to show processing indicator on session items
+  function isSessionProcessing(claudeSessionId) {
+    if (!conversationCache || !processingConversations) return false;
+    // Check cached background conversations
+    for (const [convId, cached] of Object.entries(conversationCache.value)) {
+      if (cached.claudeSessionId === claudeSessionId && cached.isProcessing) {
+        return true;
+      }
+    }
+    // Check current foreground conversation
+    if (currentClaudeSessionId.value === claudeSessionId && isProcessing.value) {
+      return true;
+    }
+    return false;
+  }
+
   // ── Grouped sessions ──
 
   const groupedSessions = computed(() => {
@@ -288,7 +369,7 @@ export function createSidebar(deps) {
     startRename, confirmRename, cancelRename,
     openFolderPicker, folderPickerNavigateUp, folderPickerSelectItem,
     folderPickerEnter, folderPickerGoToPath, confirmFolderPicker,
-    groupedSessions,
+    groupedSessions, isSessionProcessing,
     loadWorkdirHistory, addToWorkdirHistory, removeFromWorkdirHistory,
     switchToWorkdir, filteredWorkdirHistory,
   };

package/web/modules/streaming.js

@@ -84,10 +84,27 @@ export function createStreaming({ messages, scrollToBottom }) {
     if (revealTimer !== null) { clearTimeout(revealTimer); revealTimer = null; }
   }
 
+  function saveState() {
+    flushReveal(); // flush pending text into the message before saving
+    return {
+      pendingText: '',
+      streamingMessageId,
+      messageIdCounter,
+    };
+  }
+
+  function restoreState(saved) {
+    flushReveal(); // clear any current pending
+    pendingText = saved.pendingText || '';
+    streamingMessageId = saved.streamingMessageId ?? null;
+    messageIdCounter = saved.messageIdCounter || 0;
+    if (pendingText) startReveal();
+  }
+
   return {
     startReveal, flushReveal, appendPending, reset, cleanup,
     getMessageIdCounter, setMessageIdCounter,
     getStreamingMessageId, setStreamingMessageId,
-    nextId,
+    nextId, saveState, restoreState,
   };
 }

package/web/style.css

@@ -518,6 +518,24 @@ body {
   line-height: 1.3;
 }
 
+/* Processing indicator: pulsing dot before session title */
+.session-item.processing .session-title::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  margin-right: 6px;
+  vertical-align: middle;
+  animation: pulse-dot 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
 .session-meta {
   font-size: 0.7rem;
   color: var(--text-secondary);