@agent-link/server 0.1.185 → 0.1.186

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-link/server",
-  "version": "0.1.185",
+  "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,
     });
@@ -566,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) {
@@ -706,6 +737,8 @@ const App = {
       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,
@@ -2029,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)">
@@ -2087,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>
@@ -2411,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)">
@@ -2500,6 +2551,7 @@ const App = {
 
               <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>
@@ -2563,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"
@@ -2599,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 {

package/web/css/chat.css

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

package/web/css/input.css

@@ -614,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/tools.css

@@ -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/connection.js

@@ -36,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;
@@ -547,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) {
@@ -611,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/streaming.js

@@ -39,11 +39,12 @@ export function createStreaming({ messages, scrollToBottom }) {
 
     if (!streamMsg) {
       const id = ++messageIdCounter;
-      messages.value.push({
+      const newMsg = {
         id, role: 'assistant', content: chunk,
         isStreaming: true, timestamp: new Date(),
         _chunks: [chunk],
-      });
+      };
+      messages.value.push(newMsg);
       streamingMessageId = id;
     } else {
       streamMsg._chunks.push(chunk);
@@ -64,11 +65,12 @@ export function createStreaming({ messages, scrollToBottom }) {
       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 = '';