@agent-link/server 0.1.184 → 0.1.186

package/package.json

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

package/web/app.js

@@ -127,6 +127,10 @@ const App = {
     const currentConversationId = ref(crypto.randomUUID());    // currently visible conversation
     const processingConversations = ref({});    // conversationId → boolean
 
+    // Plan mode state
+    const planMode = ref(false);
+    const pendingPlanMode = ref(null); // 'enter' | 'exit' | null — set while toggle is in flight
+
     // File browser state
     const filePanelOpen = ref(false);
     const filePanelWidth = ref(parseInt(localStorage.getItem('agentlink-file-panel-width'), 10) || 280);
@@ -240,6 +244,7 @@ const App = {
           messageIdCounter: streaming.getMessageIdCounter(),
           queuedMessages: queuedMessages.value,
           usageStats: usageStats.value,
+          planMode: planMode.value,
         };
       }
 
@@ -260,6 +265,7 @@ const App = {
         _restoreToolMsgMap(cached.toolMsgMap || new Map());
         queuedMessages.value = cached.queuedMessages || [];
         usageStats.value = cached.usageStats || null;
+        planMode.value = cached.planMode || false;
       } else {
         // New blank conversation
         messages.value = [];
@@ -275,6 +281,7 @@ const App = {
         _clearToolMsgMap();
         queuedMessages.value = [];
         usageStats.value = null;
+        planMode.value = false;
       }
 
       currentConversationId.value = newConvId;
@@ -364,6 +371,8 @@ const App = {
       memoryFiles, memoryDir, memoryLoading, memoryEditing, memoryEditContent, memorySaving, memoryPanelOpen,
       // Side question (/btw)
       btwState, btwPending,
+      // Plan mode
+      setPlanMode,
       // i18n
       t,
     });
@@ -406,8 +415,15 @@ const App = {
     });
     setFilePreview(filePreview);
 
-    // Track mobile state on resize
-    let _resizeHandler = () => { isMobile.value = window.innerWidth <= 768; };
+    // Track mobile state on resize (rAF-throttled)
+    let _resizeRafId = 0;
+    let _resizeHandler = () => {
+      if (_resizeRafId) return;
+      _resizeRafId = requestAnimationFrame(() => {
+        _resizeRafId = 0;
+        isMobile.value = window.innerWidth <= 768;
+      });
+    };
     window.addEventListener('resize', _resizeHandler);
 
     // Close workdir menu on outside click or Escape
@@ -426,10 +442,11 @@ const App = {
 
     // ── Computed ──
     const hasInput = computed(() => !!(inputText.value.trim() || attachments.value.length > 0));
+    const hasPendingQuestion = computed(() => messages.value.some(m => m.role === 'ask-question' && !m.answered));
     const canSend = computed(() =>
-      status.value === 'Connected' && hasInput.value && !isCompacting.value
-      && !messages.value.some(m => m.role === 'ask-question' && !m.answered)
+      status.value === 'Connected' && hasInput.value && !isCompacting.value && !hasPendingQuestion.value
     );
+    const hasStreamingMessage = computed(() => messages.value.some(m => m.isStreaming));
 
     // ── Slash command menu ──
     const slashMenuVisible = computed(() => {
@@ -558,6 +575,28 @@ const App = {
       if (idx !== -1) queuedMessages.value.splice(idx, 1);
     }
 
+    // ── Plan mode ──
+    function togglePlanMode() {
+      if (isProcessing.value) return;
+      const newMode = !planMode.value;
+      pendingPlanMode.value = newMode ? 'enter' : 'exit';
+      isProcessing.value = true;
+      if (currentConversationId.value) {
+        processingConversations.value[currentConversationId.value] = true;
+      }
+      const instruction = newMode ? 'Enter plan mode now.' : 'Exit plan mode now.';
+      messages.value.push({
+        id: streaming.nextId(), role: 'user', content: instruction,
+        status: 'sent', timestamp: new Date(),
+      });
+      wsSend({ type: 'set_plan_mode', enabled: newMode, conversationId: currentConversationId.value, claudeSessionId: currentClaudeSessionId.value });
+      nextTick(() => scrollToBottom());
+    }
+    function setPlanMode(enabled) {
+      planMode.value = enabled;
+      pendingPlanMode.value = null;
+    }
+
     function selectSlashCommand(cmd) {
       slashMenuOpen.value = false;
       if (cmd.isPrefix) {
@@ -695,9 +734,11 @@ const App = {
       status, agentName, hostname, workDir, sessionId, error,
       serverVersion, agentVersion, latency,
       messages, visibleMessages, hasMoreMessages, loadMoreMessages,
-      inputText, isProcessing, isCompacting, canSend, hasInput, inputRef, queuedMessages, usageStats,
+      inputText, isProcessing, isCompacting, canSend, hasInput, hasStreamingMessage, inputRef, queuedMessages, usageStats,
       slashMenuVisible, filteredSlashCommands, slashMenuIndex, slashMenuOpen, selectSlashCommand, openSlashMenu,
       sendMessage, handleKeydown, cancelExecution, removeQueuedMessage, onMessageListScroll,
+      // Plan mode
+      planMode, pendingPlanMode, togglePlanMode,
       // Side question (/btw)
       btwState, btwPending, dismissBtw, renderMarkdown,
       getRenderedContent, copyMessage, toggleTool,
@@ -2021,6 +2062,12 @@ const App = {
                             <div class="message-content markdown-body" v-html="getRenderedContent(msg)"></div>
                           </div>
                         </div>
+                        <!-- Plan mode switch indicator -->
+                        <div v-else-if="msg.role === 'tool' && (msg.toolName === 'EnterPlanMode' || msg.toolName === 'ExitPlanMode')" class="plan-mode-divider">
+                          <span class="plan-mode-divider-line"></span>
+                          <span class="plan-mode-divider-text">{{ msg.toolName === 'EnterPlanMode' ? t('tool.enteredPlanMode') : t('tool.exitedPlanMode') }}</span>
+                          <span class="plan-mode-divider-line"></span>
+                        </div>
                         <!-- Agent tool use -->
                         <div v-else-if="msg.role === 'tool'" class="tool-line-wrapper">
                           <div :class="['tool-line', { completed: msg.hasResult, running: !msg.hasResult }]" @click="toggleTool(msg)">
@@ -2033,7 +2080,7 @@ const App = {
                             </span>
                             <span class="tool-toggle">{{ msg.expanded ? '\u{25B2}' : '\u{25BC}' }}</span>
                           </div>
-                          <div v-show="msg.expanded" class="tool-expand">
+                          <div v-if="msg.expanded" class="tool-expand">
                             <div v-if="isEditTool(msg) && getEditDiffHtml(msg)" class="tool-diff" v-html="getEditDiffHtml(msg)"></div>
                             <div v-else-if="getFormattedToolInput(msg)" class="tool-input-formatted" v-html="getFormattedToolInput(msg)"></div>
                             <pre v-else-if="msg.toolInput" class="tool-block">{{ msg.toolInput }}</pre>
@@ -2079,6 +2126,11 @@ const App = {
                         <div class="message-content markdown-body" v-html="getRenderedContent(msg)"></div>
                       </div>
                     </div>
+                    <div v-else-if="msg.role === 'tool' && (msg.toolName === 'EnterPlanMode' || msg.toolName === 'ExitPlanMode')" class="plan-mode-divider">
+                      <span class="plan-mode-divider-line"></span>
+                      <span class="plan-mode-divider-text">{{ msg.toolName === 'EnterPlanMode' ? t('tool.enteredPlanMode') : t('tool.exitedPlanMode') }}</span>
+                      <span class="plan-mode-divider-line"></span>
+                    </div>
                     <div v-else-if="msg.role === 'tool'" class="tool-line-wrapper">
                       <div :class="['tool-line', { completed: msg.hasResult, running: !msg.hasResult }]" @click="toggleTool(msg)">
                         <span class="tool-icon" v-html="getToolIcon(msg.toolName)"></span>
@@ -2090,7 +2142,7 @@ const App = {
                         </span>
                         <span class="tool-toggle">{{ msg.expanded ? '\u{25B2}' : '\u{25BC}' }}</span>
                       </div>
-                      <div v-show="msg.expanded" class="tool-expand">
+                      <div v-if="msg.expanded" class="tool-expand">
                         <div v-if="isEditTool(msg) && getEditDiffHtml(msg)" class="tool-diff" v-html="getEditDiffHtml(msg)"></div>
                         <div v-else-if="getFormattedToolInput(msg)" class="tool-input-formatted" v-html="getFormattedToolInput(msg)"></div>
                         <pre v-else-if="msg.toolInput" class="tool-block">{{ msg.toolInput }}</pre>
@@ -2394,7 +2446,7 @@ const App = {
                     </span>
                     <span class="tool-toggle">{{ msg.expanded ? '\u{25B2}' : '\u{25BC}' }}</span>
                   </div>
-                  <div v-show="msg.expanded" class="tool-expand team-agent-tool-expand">
+                  <div v-if="msg.expanded" class="tool-expand team-agent-tool-expand">
                     <pre v-if="msg.toolInput" class="tool-block">{{ msg.toolInput }}</pre>
                     <div v-if="msg.toolOutput" class="team-agent-tool-result">
                       <div class="team-agent-tool-result-label">{{ t('team.agentResult') }}</div>
@@ -2403,6 +2455,13 @@ const App = {
                   </div>
                 </div>
 
+                <!-- Plan mode switch indicator -->
+                <div v-else-if="msg.role === 'tool' && (msg.toolName === 'EnterPlanMode' || msg.toolName === 'ExitPlanMode')" class="plan-mode-divider">
+                  <span class="plan-mode-divider-line"></span>
+                  <span class="plan-mode-divider-text">{{ msg.toolName === 'EnterPlanMode' ? t('tool.enteredPlanMode') : t('tool.exitedPlanMode') }}</span>
+                  <span class="plan-mode-divider-line"></span>
+                </div>
+
                 <!-- Tool use block (collapsible) -->
                 <div v-else-if="msg.role === 'tool'" class="tool-line-wrapper">
                   <div :class="['tool-line', { completed: msg.hasResult, running: !msg.hasResult }]" @click="toggleTool(msg)">
@@ -2415,7 +2474,7 @@ const App = {
                     </span>
                     <span class="tool-toggle">{{ msg.expanded ? '\u{25B2}' : '\u{25BC}' }}</span>
                   </div>
-                  <div v-show="msg.expanded" class="tool-expand">
+                  <div v-if="msg.expanded" class="tool-expand">
                     <div v-if="isEditTool(msg) && getEditDiffHtml(msg)" class="tool-diff" v-html="getEditDiffHtml(msg)"></div>
                     <div v-else-if="getFormattedToolInput(msg)" class="tool-input-formatted" v-html="getFormattedToolInput(msg)"></div>
                     <pre v-else-if="msg.toolInput" class="tool-block">{{ msg.toolInput }}</pre>
@@ -2490,8 +2549,9 @@ const App = {
                 </div>
               </div>
 
-              <div v-if="isProcessing && !messages.some(m => m.isStreaming)" class="typing-indicator">
+              <div v-if="isProcessing && !hasStreamingMessage" class="typing-indicator">
                 <span></span><span></span><span></span>
+                <span v-if="pendingPlanMode" class="typing-label">{{ pendingPlanMode === 'enter' ? t('tool.enteringPlanMode') : t('tool.exitingPlanMode') }}</span>
               </div>
             </div>
           </div>
@@ -2555,7 +2615,7 @@ const App = {
               </div>
             </div>
             <div
-              :class="['input-card', { 'drag-over': dragOver }]"
+              :class="['input-card', { 'drag-over': dragOver, 'plan-mode': planMode }]"
               @dragover="handleDragOver"
               @dragleave="handleDragLeave"
               @drop="handleDrop"
@@ -2591,6 +2651,10 @@ const App = {
                   <button class="slash-btn" @click="openSlashMenu" :disabled="status !== 'Connected'" :title="t('input.slashCommands')">
                     <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7 21 11 3h2L9 21H7Z"/></svg>
                   </button>
+                  <button :class="['plan-mode-btn', { active: planMode }]" @click="togglePlanMode" :disabled="isProcessing" :title="planMode ? 'Switch to Normal Mode' : 'Switch to Plan Mode'">
+                    <svg viewBox="0 0 24 24" width="12" height="12"><rect x="6" y="4" width="4" height="16" rx="1" fill="currentColor"/><rect x="14" y="4" width="4" height="16" rx="1" fill="currentColor"/></svg>
+                    Plan
+                  </button>
                 </div>
                 <button v-if="isProcessing && !hasInput" @click="cancelExecution" class="send-btn stop-btn" :title="t('input.stopGeneration')">
                   <svg viewBox="0 0 24 24" width="14" height="14"><rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor"/></svg>

package/web/css/ask-question.css

@@ -271,7 +271,7 @@
   padding: 0.5rem 0.9rem;
 }
 
-.typing-indicator span {
+.typing-indicator span:not(.typing-label) {
   width: 6px;
   height: 6px;
   border-radius: 50%;
@@ -279,11 +279,11 @@
   animation: typing 1.2s infinite ease-in-out;
 }
 
-.typing-indicator span:nth-child(2) {
+.typing-indicator span:not(.typing-label):nth-child(2) {
   animation-delay: 0.2s;
 }
 
-.typing-indicator span:nth-child(3) {
+.typing-indicator span:not(.typing-label):nth-child(3) {
   animation-delay: 0.4s;
 }
 
@@ -292,6 +292,18 @@
   30% { opacity: 1; transform: scale(1); }
 }
 
+.typing-label {
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  margin-left: 4px;
+  white-space: nowrap;
+  animation: none;
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  background: none;
+}
+
 /* ── Context compaction inline message ── */
 .compact-msg {
   display: inline-flex;

package/web/css/base.css

@@ -30,6 +30,8 @@
   --border: #353535;
   --code-bg: #1a1a1a;
   --code-header-bg: #222222;
+  --plan-mode: #d4a24c;
+  --plan-mode-bg: rgba(212, 162, 76, 0.1);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
 }
 
@@ -48,6 +50,8 @@
   --border: #d1d5db;
   --code-bg: #f1f3f5;
   --code-header-bg: #e9ecef;
+  --plan-mode: #d97706;
+  --plan-mode-bg: rgba(217, 119, 6, 0.08);
 }
 
 html {
@@ -236,6 +240,25 @@ body {
   margin-top: 0.75rem;
 }
 
+/* ── Shared keyframes ── */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 /* ── Main body (sidebar + chat) ── */
 .main-body {
   flex: 1;

package/web/css/chat.css

@@ -172,3 +172,5 @@
   padding: 0.2rem 0;
 }
 
+
+

package/web/css/file-browser.css

@@ -151,10 +151,6 @@
   margin-left: auto;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
 .file-tree-empty {
   padding: 4px 8px;
   font-size: 0.75rem;

package/web/css/input.css

@@ -225,7 +225,6 @@
   align-items: center;
   justify-content: center;
   gap: 16px;
-  backdrop-filter: blur(2px);
 }
 .workdir-switching-spinner {
   width: 36px;
@@ -233,10 +232,7 @@
   border: 3px solid rgba(255, 255, 255, 0.2);
   border-top-color: rgba(255, 255, 255, 0.8);
   border-radius: 50%;
-  animation: workdir-spin 0.7s linear infinite;
-}
-@keyframes workdir-spin {
-  to { transform: rotate(360deg); }
+  animation: spin 0.7s linear infinite;
 }
 .workdir-switching-text {
   color: rgba(255, 255, 255, 0.9);
@@ -618,6 +614,56 @@
   color: var(--text-secondary);
 }
 
+/* ── Plan Mode toggle button ── */
+.plan-mode-btn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 0 8px;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+  white-space: nowrap;
+}
+
+.plan-mode-btn:hover:not(:disabled) {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+  border-color: var(--text-secondary);
+}
+
+.plan-mode-btn.active {
+  color: var(--plan-mode);
+  background: var(--plan-mode-bg);
+  border-color: var(--plan-mode);
+}
+
+.plan-mode-btn.active:hover:not(:disabled) {
+  background: rgba(212, 162, 76, 0.18);
+}
+
+.plan-mode-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.plan-mode-btn svg {
+  flex-shrink: 0;
+}
+
+
+/* ── Input card plan mode accent ── */
+.input-card.plan-mode {
+  border-top: 2px solid var(--plan-mode);
+}
+
 /* ── Sidebar backdrop (mobile overlay) ── */
 .sidebar-backdrop {
   display: none;

package/web/css/loop.css

@@ -185,7 +185,7 @@
   border: 1px solid var(--border);
   border-radius: 6px;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: color 0.15s, border-color 0.15s;
   white-space: nowrap;
 }
 .loop-action-btn:hover:not(:disabled) {
@@ -353,11 +353,7 @@
 }
 .loop-exec-status-running {
   color: var(--accent);
-  animation: loop-spin 1s linear infinite;
-}
-@keyframes loop-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  animation: spin 1s linear infinite;
 }
 .loop-exec-status-success {
   color: #10B981;
@@ -428,11 +424,7 @@
   height: 8px;
   border-radius: 50%;
   background: var(--accent);
-  animation: loop-pulse 1.5s ease-in-out infinite;
-}
-@keyframes loop-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
+  animation: pulse 1.5s ease-in-out infinite;
 }
 
 /* ── Modal dialog (generic) ── */

package/web/css/sidebar.css

@@ -210,11 +210,6 @@
   transform: rotate(-90deg);
 }
 
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
 .spinning {
   animation: spin 0.8s linear infinite;
 }
@@ -329,12 +324,7 @@
   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; }
+  animation: pulse 1.5s ease-in-out infinite;
 }
 
 .session-meta {

package/web/css/team.css

@@ -21,7 +21,7 @@
   font-size: 0.75rem;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
 }
 
 .team-mode-btn.active {
@@ -194,7 +194,7 @@
   color: var(--text-secondary);
   font-size: 0.78rem;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: color 0.15s, border-color 0.15s;
 }
 .team-lead-prompt-reset:hover {
   color: var(--text-primary);
@@ -258,7 +258,7 @@
   color: var(--text-secondary);
   font-size: 0.85rem;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: color 0.15s, border-color 0.15s;
 }
 
 .team-create-cancel:hover {
@@ -293,7 +293,7 @@
   padding: 14px 16px;
   border: 1px solid var(--border);
   border-radius: 10px;
-  transition: all 0.15s;
+  transition: border-color 0.15s, background 0.15s;
   background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 100%);
 }
 
@@ -354,7 +354,7 @@
   border: 1px solid var(--accent);
   border-radius: 6px;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: color 0.15s, background 0.15s;
   white-space: nowrap;
 }
 
@@ -500,7 +500,7 @@
   color: var(--error);
   font-size: 0.8rem;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: background 0.15s;
 }
 
 .team-dissolve-btn:hover {
@@ -515,7 +515,7 @@
   color: var(--text-secondary);
   font-size: 0.8rem;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: color 0.15s, border-color 0.15s;
 }
 
 .team-back-btn:hover {
@@ -531,7 +531,7 @@
   color: var(--accent);
   font-size: 0.8rem;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: background 0.15s;
 }
 
 .team-new-btn:hover {
@@ -1111,7 +1111,7 @@
   color: var(--text-secondary);
   font-size: 0.78rem;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: color 0.15s, border-color 0.15s;
   margin-right: 4px;
 }
 

package/web/css/tools.css

@@ -97,8 +97,8 @@
 }
 
 @keyframes toolExpand {
-  from { opacity: 0; max-height: 0; }
-  to { opacity: 1; max-height: 500px; }
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 .tool-block {
@@ -304,3 +304,24 @@
   margin: 0.75rem 0;
 }
 
+/* ── Plan mode divider ── */
+.plan-mode-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 8px 0;
+}
+
+.plan-mode-divider-line {
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+.plan-mode-divider-text {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  font-weight: 500;
+}
+

package/web/locales/en.json

@@ -245,6 +245,10 @@
   "tool.inPath": "in {path}",
   "tool.done": "{done}/{total} done",
   "tool.replaceAll": "(replace all)",
+  "tool.enteredPlanMode": "Entered Plan Mode",
+  "tool.exitedPlanMode": "Exited Plan Mode",
+  "tool.enteringPlanMode": "Entering Plan Mode...",
+  "tool.exitingPlanMode": "Exiting Plan Mode...",
 
   "usage.context": "Context",
   "usage.cost": "Cost",

package/web/locales/zh.json

@@ -245,6 +245,10 @@
   "tool.inPath": "在 {path}",
   "tool.done": "{done}/{total} 已完成",
   "tool.replaceAll": "（全部替换）",
+  "tool.enteredPlanMode": "已进入计划模式",
+  "tool.exitedPlanMode": "已退出计划模式",
+  "tool.enteringPlanMode": "正在进入计划模式...",
+  "tool.exitingPlanMode": "正在退出计划模式...",
 
   "usage.context": "上下文",
   "usage.cost": "费用",

package/web/modules/appHelpers.js

@@ -44,7 +44,8 @@ export function createHighlightScheduler() {
     _hlTimer = setTimeout(() => {
       _hlTimer = null;
       if (typeof hljs !== 'undefined') {
-        document.querySelectorAll('pre code:not([data-highlighted])').forEach(block => {
+        const root = document.querySelector('.message-list') || document;
+        root.querySelectorAll('pre code:not([data-highlighted])').forEach(block => {
           hljs.highlightElement(block);
           block.dataset.highlighted = 'true';
         });

package/web/modules/backgroundRouting.js

@@ -1,6 +1,13 @@
 // ── History batch building & background conversation routing ──────────────────
 import { isContextSummary } from './messageHelpers.js';
 
+function findLast(arr, predicate) {
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (predicate(arr[i])) return arr[i];
+  }
+  return undefined;
+}
+
 /**
  * Convert a history array (from conversation_resumed) into a batch of UI messages.
  * @param {Array} history - Array of {role, content, ...} from the agent
@@ -133,11 +140,14 @@ export function routeToBackgroundConversation(deps, convId, msg) {
       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;
+        if (!last._chunks) last._chunks = [last.content];
+        last._chunks.push(data.delta);
+        last.content = last._chunks.join('');
       } else {
         msgs.push({
           id: ++cache.messageIdCounter, role: 'assistant',
           content: data.delta, isStreaming: true, timestamp: new Date(),
+          _chunks: [data.delta],
         });
       }
     } else if (data.type === 'tool_use' && data.tools) {
@@ -206,7 +216,7 @@ export function routeToBackgroundConversation(deps, convId, msg) {
       });
     } else if (msg.status === 'completed') {
       cache.isCompacting = false;
-      const startMsg = [...cache.messages].reverse().find(m => m.isCompactStart && !m.compactDone);
+      const startMsg = findLast(cache.messages, m => m.isCompactStart && !m.compactDone);
       if (startMsg) {
         startMsg.content = 'Context compacted';
         startMsg.compactDone = true;

package/web/modules/connection.js

@@ -7,6 +7,13 @@ const MAX_RECONNECT_ATTEMPTS = 50;
 const RECONNECT_BASE_DELAY = 1000;
 const RECONNECT_MAX_DELAY = 15000;
 
+function findLast(arr, predicate) {
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (predicate(arr[i])) return arr[i];
+  }
+  return undefined;
+}
+
 /**
  * Creates the WebSocket connection controller.
  * @param {object} deps - All reactive state and callbacks needed
@@ -29,6 +36,8 @@ export function createConnection(deps) {
     memoryFiles, memoryDir, memoryLoading, memoryEditing, memoryEditContent, memorySaving, memoryPanelOpen,
     // Side question (/btw)
     btwState, btwPending,
+    // Plan mode
+    setPlanMode,
     // i18n
     t,
   } = deps;
@@ -469,7 +478,7 @@ export function createConnection(deps) {
         } else if (msg.status === 'completed') {
           isCompacting.value = false;
           // Update the start message to show completed
-          const startMsg = [...messages.value].reverse().find(m => m.isCompactStart && !m.compactDone);
+          const startMsg = findLast(messages.value, m => m.isCompactStart && !m.compactDone);
           if (startMsg) {
             startMsg.content = t('system.contextCompacted');
             startMsg.compactDone = true;
@@ -540,6 +549,10 @@ export function createConnection(deps) {
           messages.value = buildHistoryBatch(msg.history, () => streaming.nextId());
           toolMsgMap.clear();
         }
+        // Detect plan mode from agent-provided flag
+        if (msg.planMode != null) {
+          if (setPlanMode) setPlanMode(!!msg.planMode);
+        }
         loadingHistory.value = false;
         // Restore live status from agent (compacting / processing)
         if (msg.isCompacting) {
@@ -604,6 +617,17 @@ export function createConnection(deps) {
             btwState.value.done = true;
           }
         }
+      } else if (msg.type === 'plan_mode_changed') {
+        if (setPlanMode) setPlanMode(msg.enabled);
+        // For the immediate path (no injected turn), clear isProcessing here
+        // because turn_completed will never arrive.
+        if (msg.immediate) {
+          isProcessing.value = false;
+          if (currentConversationId.value) {
+            processingConversations.value[currentConversationId.value] = false;
+          }
+        }
+        // For the injected path, turn_completed handles isProcessing naturally.
       } else if (msg.type === 'workdir_changed') {
         workdirSwitching.value = false;
         workDir.value = msg.workDir;

package/web/modules/messageHelpers.js

@@ -4,6 +4,13 @@ import { renderMarkdown } from './markdown.js';
 // ── Helpers ──────────────────────────────────────────────────────────────────
 const CONTEXT_SUMMARY_PREFIX = 'This session is being continued from a previous conversation';
 
+function parseToolInput(msg) {
+  if (msg._parsedInput !== undefined) return msg._parsedInput;
+  try { msg._parsedInput = JSON.parse(msg.toolInput); }
+  catch { msg._parsedInput = null; }
+  return msg._parsedInput;
+}
+
 export function isContextSummary(text) {
   return typeof text === 'string' && text.trimStart().startsWith(CONTEXT_SUMMARY_PREFIX);
 }
@@ -28,6 +35,10 @@ export function formatTimestamp(ts) {
 
 export function getRenderedContent(msg) {
   if (msg.role !== 'assistant' && !msg.isCommandOutput) return msg.content;
+  if (msg.isStreaming) {
+    const t = msg.content || '';
+    return t.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
+  }
   return renderMarkdown(msg.content);
 }
 
@@ -55,9 +66,9 @@ export function toggleTool(msg) {
 
 export function getToolSummary(msg, t) {
   const name = msg.toolName;
-  const input = msg.toolInput;
+  const obj = parseToolInput(msg);
+  if (!obj) return '';
   try {
-    const obj = JSON.parse(input);
     if (name === 'Read' && obj.file_path) return obj.file_path;
     if (name === 'Edit' && obj.file_path) return obj.file_path;
     if (name === 'Write' && obj.file_path) return obj.file_path;
@@ -83,8 +94,9 @@ export function isEditTool(msg) {
 
 export function getFormattedToolInput(msg, t) {
   if (!msg.toolInput) return null;
+  const obj = parseToolInput(msg);
+  if (!obj) return null;
   try {
-    const obj = JSON.parse(msg.toolInput);
     const esc = s => s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
     const name = msg.toolName;
 
@@ -169,8 +181,9 @@ export function getFormattedToolInput(msg, t) {
 }
 
 export function getEditDiffHtml(msg, t) {
+  const obj = parseToolInput(msg);
+  if (!obj) return null;
   try {
-    const obj = JSON.parse(msg.toolInput);
     if (!obj.old_string && !obj.new_string) return null;
     const esc = s => s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
     const filePath = obj.file_path || '';

package/web/modules/streaming.js

@@ -34,19 +34,21 @@ export function createStreaming({ messages, scrollToBottom }) {
       ? messages.value.find(m => m.id === streamingMessageId)
       : null;
 
+    const chunk = pendingText.slice(0, CHARS_PER_TICK);
+    pendingText = pendingText.slice(CHARS_PER_TICK);
+
     if (!streamMsg) {
       const id = ++messageIdCounter;
-      const chunk = pendingText.slice(0, CHARS_PER_TICK);
-      pendingText = pendingText.slice(CHARS_PER_TICK);
-      messages.value.push({
+      const newMsg = {
         id, role: 'assistant', content: chunk,
         isStreaming: true, timestamp: new Date(),
-      });
+        _chunks: [chunk],
+      };
+      messages.value.push(newMsg);
       streamingMessageId = id;
     } else {
-      const chunk = pendingText.slice(0, CHARS_PER_TICK);
-      pendingText = pendingText.slice(CHARS_PER_TICK);
-      streamMsg.content += chunk;
+      streamMsg._chunks.push(chunk);
+      streamMsg.content = streamMsg._chunks.join('');
     }
     scrollToBottom();
     if (pendingText) revealTimer = setTimeout(revealTick, TICK_MS);
@@ -58,13 +60,17 @@ export function createStreaming({ messages, scrollToBottom }) {
     const streamMsg = streamingMessageId !== null
       ? messages.value.find(m => m.id === streamingMessageId) : null;
     if (streamMsg) {
-      streamMsg.content += pendingText;
+      if (!streamMsg._chunks) streamMsg._chunks = [streamMsg.content];
+      streamMsg._chunks.push(pendingText);
+      streamMsg.content = streamMsg._chunks.join('');
     } else {
       const id = ++messageIdCounter;
-      messages.value.push({
+      const newMsg = {
         id, role: 'assistant', content: pendingText,
         isStreaming: true, timestamp: new Date(),
-      });
+        _chunks: [pendingText],
+      };
+      messages.value.push(newMsg);
       streamingMessageId = id;
     }
     pendingText = '';