@agent-link/server 0.1.145 → 0.1.147

package/package.json

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

package/web/app.js

@@ -19,6 +19,7 @@ import { createConnection } from './modules/connection.js';
 import { createFileBrowser } from './modules/fileBrowser.js';
 import { createFilePreview } from './modules/filePreview.js';
 import { createTeam } from './modules/team.js';
+import { createScrollManager, createHighlightScheduler, formatUsage } from './modules/appHelpers.js';
 
 // ── App ─────────────────────────────────────────────────────────────────────
 const App = {
@@ -117,6 +118,8 @@ const App = {
     const sidebarView = ref('sessions');       // 'sessions' | 'files' | 'preview' (mobile only)
     const isMobile = ref(window.innerWidth <= 768);
     const workdirMenuOpen = ref(false);
+    const teamsCollapsed = ref(false);
+    const chatsCollapsed = ref(false);
 
     // Team creation state
     const teamInstruction = ref('');
@@ -231,38 +234,10 @@ const App = {
     applyTheme();
 
     // ── Scroll management ──
-    let _scrollTimer = null;
-    let _userScrolledUp = false;
-
-    function onMessageListScroll(e) {
-      const el = e.target;
-      _userScrolledUp = (el.scrollHeight - el.scrollTop - el.clientHeight) > 80;
-    }
-
-    function scrollToBottom(force) {
-      if (_userScrolledUp && !force) return;
-      if (_scrollTimer) return;
-      _scrollTimer = setTimeout(() => {
-        _scrollTimer = null;
-        const el = document.querySelector('.message-list');
-        if (el) el.scrollTop = el.scrollHeight;
-      }, 50);
-    }
+    const { onScroll: onMessageListScroll, scrollToBottom, cleanup: cleanupScroll } = createScrollManager('.message-list');
 
     // ── Highlight.js scheduling ──
-    let _hlTimer = null;
-    function scheduleHighlight() {
-      if (_hlTimer) return;
-      _hlTimer = setTimeout(() => {
-        _hlTimer = null;
-        if (typeof hljs !== 'undefined') {
-          document.querySelectorAll('pre code:not([data-highlighted])').forEach(block => {
-            hljs.highlightElement(block);
-            block.dataset.highlighted = 'true';
-          });
-        }
-      }, 300);
-    }
+    const { scheduleHighlight, cleanup: cleanupHighlight } = createHighlightScheduler();
 
     // ── Create module instances ──
 
@@ -475,25 +450,10 @@ const App = {
       document.title = name ? `${name} — AgentLink` : 'AgentLink';
     });
 
-    // ── Usage formatting ──
-    function formatTokens(n) {
-      if (n >= 1000) return (n / 1000).toFixed(1) + 'k';
-      return String(n);
-    }
-    function formatUsage(u) {
-      if (!u) return '';
-      const pct = u.contextWindow ? Math.round(u.inputTokens / u.contextWindow * 100) : 0;
-      const ctx = formatTokens(u.inputTokens) + ' / ' + formatTokens(u.contextWindow) + ' (' + pct + '%)';
-      const cost = '$' + u.totalCost.toFixed(2);
-      const model = u.model.replace(/^claude-/, '').replace(/-\d{8}$/, '').replace(/-1m$/, '');
-      const dur = (u.durationMs / 1000).toFixed(1) + 's';
-      return 'Context ' + ctx + '  \u00b7  Cost ' + cost + '  \u00b7  ' + model + '  \u00b7  ' + dur;
-    }
-
     // ── Lifecycle ──
     onMounted(() => { connect(scheduleHighlight); });
     onUnmounted(() => {
-      closeWs(); streaming.cleanup();
+      closeWs(); streaming.cleanup(); cleanupScroll(); cleanupHighlight();
       window.removeEventListener('resize', _resizeHandler);
       document.removeEventListener('click', _workdirMenuClickHandler);
       document.removeEventListener('keydown', _workdirMenuKeyHandler);
@@ -603,6 +563,7 @@ const App = {
       // File preview
       previewPanelOpen, previewPanelWidth, previewFile, previewLoading, previewMarkdownRendered, filePreview,
       workdirMenuOpen,
+      teamsCollapsed, chatsCollapsed,
       toggleWorkdirMenu() { workdirMenuOpen.value = !workdirMenuOpen.value; },
       workdirMenuBrowse() {
         workdirMenuOpen.value = false;
@@ -885,10 +846,14 @@ const App = {
 
           <!-- Teams section -->
           <div class="sidebar-section sidebar-teams">
-            <div class="sidebar-section-header">
+            <div class="sidebar-section-header" @click="teamsCollapsed = !teamsCollapsed" style="cursor: pointer;">
               <span>Teams History</span>
+              <button class="sidebar-collapse-btn" :title="teamsCollapsed ? 'Expand' : 'Collapse'">
+                <svg :class="{ collapsed: teamsCollapsed }" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>
+              </button>
             </div>
 
+            <div v-show="!teamsCollapsed">
             <button class="new-conversation-btn" @click="newTeam" :disabled="isTeamActive">
               <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
               New team
@@ -932,16 +897,23 @@ const App = {
                 </div>
               </div>
             </div>
+            </div>
           </div>
 
           <div class="sidebar-section sidebar-sessions">
-            <div class="sidebar-section-header">
+            <div class="sidebar-section-header" @click="chatsCollapsed = !chatsCollapsed" style="cursor: pointer;">
               <span>Chat History</span>
-              <button class="sidebar-refresh-btn" @click="requestSessionList" title="Refresh" :disabled="loadingSessions">
-                <svg :class="{ spinning: loadingSessions }" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
-              </button>
+              <span class="sidebar-section-header-actions">
+                <button class="sidebar-refresh-btn" @click.stop="requestSessionList" title="Refresh" :disabled="loadingSessions">
+                  <svg :class="{ spinning: loadingSessions }" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+                </button>
+                <button class="sidebar-collapse-btn" :title="chatsCollapsed ? 'Expand' : 'Collapse'">
+                  <svg :class="{ collapsed: chatsCollapsed }" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>
+                </button>
+              </span>
             </div>
 
+            <div v-show="!chatsCollapsed">
             <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
@@ -1002,6 +974,7 @@ const App = {
                 </div>
               </div>
             </div>
+            </div>
           </div>
 
           <div v-if="serverVersion || agentVersion" class="sidebar-version-footer">

package/web/modules/appHelpers.js

@@ -0,0 +1,84 @@
+// ── UI utility functions for the main App component ──────────────────────────
+
+/**
+ * Create scroll management functions.
+ * @param {string} selector - CSS selector for the scrollable element
+ * @returns {{ onScroll, scrollToBottom, cleanup }}
+ */
+export function createScrollManager(selector) {
+  let _scrollTimer = null;
+  let _userScrolledUp = false;
+
+  function onScroll(e) {
+    const el = e.target;
+    _userScrolledUp = (el.scrollHeight - el.scrollTop - el.clientHeight) > 80;
+  }
+
+  function scrollToBottom(force) {
+    if (_userScrolledUp && !force) return;
+    if (_scrollTimer) return;
+    _scrollTimer = setTimeout(() => {
+      _scrollTimer = null;
+      const el = document.querySelector(selector);
+      if (el) el.scrollTop = el.scrollHeight;
+    }, 50);
+  }
+
+  function cleanup() {
+    if (_scrollTimer) { clearTimeout(_scrollTimer); _scrollTimer = null; }
+  }
+
+  return { onScroll, scrollToBottom, cleanup };
+}
+
+/**
+ * Create a debounced highlight.js scheduler.
+ * @returns {{ scheduleHighlight, cleanup }}
+ */
+export function createHighlightScheduler() {
+  let _hlTimer = null;
+
+  function scheduleHighlight() {
+    if (_hlTimer) return;
+    _hlTimer = setTimeout(() => {
+      _hlTimer = null;
+      if (typeof hljs !== 'undefined') {
+        document.querySelectorAll('pre code:not([data-highlighted])').forEach(block => {
+          hljs.highlightElement(block);
+          block.dataset.highlighted = 'true';
+        });
+      }
+    }, 300);
+  }
+
+  function cleanup() {
+    if (_hlTimer) { clearTimeout(_hlTimer); _hlTimer = null; }
+  }
+
+  return { scheduleHighlight, cleanup };
+}
+
+/**
+ * Format a token count for display (e.g. 1500 → "1.5k").
+ * @param {number} n
+ * @returns {string}
+ */
+export function formatTokens(n) {
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'k';
+  return String(n);
+}
+
+/**
+ * Format a usage stats object into a human-readable summary string.
+ * @param {object|null} u - Usage stats from turn_completed
+ * @returns {string}
+ */
+export function formatUsage(u) {
+  if (!u) return '';
+  const pct = u.contextWindow ? Math.round(u.inputTokens / u.contextWindow * 100) : 0;
+  const ctx = formatTokens(u.inputTokens) + ' / ' + formatTokens(u.contextWindow) + ' (' + pct + '%)';
+  const cost = '$' + u.totalCost.toFixed(2);
+  const model = u.model.replace(/^claude-/, '').replace(/-\d{8}$/, '').replace(/-1m$/, '');
+  const dur = (u.durationMs / 1000).toFixed(1) + 's';
+  return 'Context ' + ctx + '  \u00b7  Cost ' + cost + '  \u00b7  ' + model + '  \u00b7  ' + dur;
+}

package/web/modules/backgroundRouting.js

@@ -0,0 +1,258 @@
+// ── History batch building & background conversation routing ──────────────────
+import { isContextSummary } from './messageHelpers.js';
+
+/**
+ * Convert a history array (from conversation_resumed) into a batch of UI messages.
+ * @param {Array} history - Array of {role, content, ...} from the agent
+ * @param {() => number} nextId - Function that returns the next message ID
+ * @returns {Array} Batch of UI message objects
+ */
+export function buildHistoryBatch(history, nextId) {
+  const batch = [];
+  for (const h of history) {
+    if (h.role === 'user') {
+      if (isContextSummary(h.content)) {
+        batch.push({
+          id: nextId(), role: 'context-summary',
+          content: h.content, contextExpanded: false,
+          timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
+        });
+      } else if (h.isCommandOutput) {
+        batch.push({
+          id: nextId(), role: 'system',
+          content: h.content, isCommandOutput: true,
+          timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
+        });
+      } else {
+        batch.push({
+          id: nextId(), 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: nextId(), role: 'assistant',
+          content: h.content, isStreaming: false,
+          timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
+        });
+      }
+    } else if (h.role === 'tool') {
+      batch.push({
+        id: nextId(), role: 'tool',
+        toolId: h.toolId || '', toolName: h.toolName || 'unknown',
+        toolInput: h.toolInput || '', hasResult: true,
+        expanded: (h.toolName === 'Edit' || h.toolName === 'TodoWrite' || h.toolName === 'Agent'),
+        timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
+      });
+    }
+  }
+  return batch;
+}
+
+/**
+ * Finalize the last streaming assistant message in a message array.
+ * @param {Array} msgs - Array of message objects
+ */
+export function finalizeLastStreaming(msgs) {
+  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;
+    }
+  }
+}
+
+/**
+ * Route a message to a background (non-foreground) conversation's cache.
+ * @param {object} deps - Dependencies: conversationCache, processingConversations, sidebar, wsSend
+ * @param {string} convId - The conversation ID
+ * @param {object} msg - The incoming message
+ */
+export function routeToBackgroundConversation(deps, convId, msg) {
+  const { conversationCache, processingConversations, sidebar, wsSend } = deps;
+  const cache = conversationCache.value[convId];
+  if (!cache) return;
+
+  if (msg.type === 'session_started') {
+    cache.claudeSessionId = msg.claudeSessionId;
+    sidebar.requestSessionList();
+    return;
+  }
+
+  if (msg.type === 'conversation_resumed') {
+    cache.claudeSessionId = msg.claudeSessionId;
+    if (msg.history && Array.isArray(msg.history)) {
+      const nextId = () => ++cache.messageIdCounter;
+      cache.messages = buildHistoryBatch(msg.history, nextId);
+      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') {
+    if (!cache.isProcessing) {
+      cache.isProcessing = true;
+      processingConversations.value[convId] = true;
+    }
+    const data = msg.data;
+    if (!data) return;
+    if (data.type === 'content_block_delta' && data.delta) {
+      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) {
+      const msgs = cache.messages;
+      finalizeLastStreaming(msgs);
+      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' || tool.name === 'Agent'),
+          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') {
+    finalizeLastStreaming(cache.messages);
+    cache.isProcessing = false;
+    cache.isCompacting = false;
+    if (msg.usage) cache.usageStats = msg.usage;
+    if (cache.toolMsgMap) cache.toolMsgMap.clear();
+    processingConversations.value[convId] = false;
+    if (msg.type === 'execution_cancelled') {
+      cache.needsResume = true;
+      cache.messages.push({
+        id: ++cache.messageIdCounter, role: 'system',
+        content: 'Generation stopped.', timestamp: new Date(),
+      });
+    }
+    sidebar.requestSessionList();
+    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') {
+    finalizeLastStreaming(cache.messages);
+    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') {
+    finalizeLastStreaming(cache.messages);
+    cache.messages.push({
+      id: ++cache.messageIdCounter, role: 'system',
+      content: msg.content, isCommandOutput: true, timestamp: new Date(),
+    });
+  } else if (msg.type === 'ask_user_question') {
+    const msgs = cache.messages;
+    finalizeLastStreaming(msgs);
+    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(),
+    });
+  }
+}

package/web/modules/connection.js

@@ -1,6 +1,7 @@
 // ── WebSocket connection, message routing, reconnection ──────────────────────
 import { encrypt, decrypt, isEncrypted, decodeKey } from '../encryption.js';
 import { isContextSummary } from './messageHelpers.js';
+import { buildHistoryBatch, finalizeLastStreaming, routeToBackgroundConversation } from './backgroundRouting.js';
 
 const MAX_RECONNECT_ATTEMPTS = 50;
 const RECONNECT_BASE_DELAY = 1000;
@@ -55,265 +56,7 @@ export function createConnection(deps) {
   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' || h.toolName === 'Agent'),
-              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') {
-      // Safety net: restore processing state if output arrives after reconnect
-      if (!cache.isProcessing) {
-        cache.isProcessing = true;
-        processingConversations.value[convId] = true;
-      }
-      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' || tool.name === 'Agent'),
-            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 (msg.usage) cache.usageStats = msg.usage;
-      if (cache.toolMsgMap) cache.toolMsgMap.clear();
-      processingConversations.value[convId] = false;
-      if (msg.type === 'execution_cancelled') {
-        cache.needsResume = true;
-        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(),
-      });
-    }
-  }
+  // Delegated to backgroundRouting.js module.
 
   function wsSend(msg) {
     if (!ws || ws.readyState !== WebSocket.OPEN) return;
@@ -493,7 +236,7 @@ export function createConnection(deps) {
       if (msg.conversationId && currentConversationId
           && currentConversationId.value
           && msg.conversationId !== currentConversationId.value) {
-        routeToBackgroundConversation(msg.conversationId, msg);
+        routeToBackgroundConversation({ conversationCache, processingConversations, sidebar, wsSend }, msg.conversationId, msg);
         return;
       }
 
@@ -738,49 +481,7 @@ export function createConnection(deps) {
       } else if (msg.type === 'conversation_resumed') {
         currentClaudeSessionId.value = 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: streaming.nextId(), role: 'context-summary',
-                  content: h.content, contextExpanded: false,
-                  timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
-                });
-              } else if (h.isCommandOutput) {
-                batch.push({
-                  id: streaming.nextId(), role: 'system',
-                  content: h.content, isCommandOutput: true,
-                  timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
-                });
-              } else {
-                batch.push({
-                  id: streaming.nextId(), 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: streaming.nextId(), role: 'assistant',
-                  content: h.content, isStreaming: false,
-                  timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
-                });
-              }
-            } else if (h.role === 'tool') {
-              batch.push({
-                id: streaming.nextId(), role: 'tool',
-                toolId: h.toolId || '', toolName: h.toolName || 'unknown',
-                toolInput: h.toolInput || '', hasResult: true,
-                expanded: (h.toolName === 'Edit' || h.toolName === 'TodoWrite' || h.toolName === 'Agent'), timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
-              });
-            }
-          }
-          messages.value = batch;
+          messages.value = buildHistoryBatch(msg.history, () => streaming.nextId());
           toolMsgMap.clear();
         }
         loadingHistory.value = false;

package/web/style.css

@@ -419,6 +419,38 @@ body {
   cursor: not-allowed;
 }
 
+.sidebar-section-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.sidebar-collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.sidebar-collapse-btn:hover {
+  color: var(--text-primary);
+}
+
+.sidebar-collapse-btn svg {
+  transition: transform 0.2s ease;
+}
+
+.sidebar-collapse-btn svg.collapsed {
+  transform: rotate(-90deg);
+}
+
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }