@agent-link/server 0.1.184 → 0.1.185

package/package.json

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

package/web/app.js

@@ -406,8 +406,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 +433,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(() => {
@@ -695,7 +703,7 @@ 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,
       // Side question (/btw)
@@ -2033,7 +2041,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>
@@ -2090,7 +2098,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 +2402,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>
@@ -2415,7 +2423,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,7 +2498,7 @@ 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>
               </div>
             </div>

package/web/css/base.css

@@ -236,6 +236,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/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);

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 {

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
@@ -469,7 +476,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;

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,20 @@ 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({
         id, role: 'assistant', content: chunk,
         isStreaming: true, timestamp: new Date(),
+        _chunks: [chunk],
       });
       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,12 +59,15 @@ 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({
         id, role: 'assistant', content: pendingText,
         isStreaming: true, timestamp: new Date(),
+        _chunks: [pendingText],
       });
       streamingMessageId = id;
     }