@agent-link/server 0.1.44 → 0.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-link/server",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "description": "AgentLink relay server",
   "type": "module",
   "main": "dist/index.js",

package/web/app.js

@@ -403,8 +403,7 @@ const App = {
                 <template v-if="msg.role === 'user'">
                   <div class="message-role-label user-label">You</div>
                   <div class="message-bubble user-bubble" :title="formatTimestamp(msg.timestamp)">
-                    <div v-if="msg.isCommandOutput" class="message-content markdown-body" v-html="getRenderedContent(msg)"></div>
-                    <div v-else class="message-content">{{ msg.content }}</div>
+                    <div class="message-content">{{ msg.content }}</div>
                     <div v-if="msg.attachments && msg.attachments.length" class="message-attachments">
                       <div v-for="(att, ai) in msg.attachments" :key="ai" class="message-attachment-chip">
                         <img v-if="att.isImage && att.thumbUrl" :src="att.thumbUrl" class="message-attachment-thumb" />
@@ -506,19 +505,21 @@ const App = {
                 </div>
 
                 <!-- System message -->
-                <div v-else-if="msg.role === 'system'" class="system-msg">
-                  {{ msg.content }}
+                <div v-else-if="msg.role === 'system'" :class="['system-msg', { 'compact-msg': msg.isCompactStart, 'command-output-msg': msg.isCommandOutput }]">
+                  <template v-if="msg.isCompactStart && !msg.compactDone">
+                    <span class="compact-inline-spinner"></span>
+                  </template>
+                  <template v-if="msg.isCompactStart && msg.compactDone">
+                    <span class="compact-done-icon">✓</span>
+                  </template>
+                  <div v-if="msg.isCommandOutput" class="message-content markdown-body" v-html="getRenderedContent(msg)"></div>
+                  <template v-else>{{ msg.content }}</template>
                 </div>
               </div>
 
-              <div v-if="isProcessing && !isCompacting && !messages.some(m => m.isStreaming)" class="typing-indicator">
+              <div v-if="isProcessing && !messages.some(m => m.isStreaming)" class="typing-indicator">
                 <span></span><span></span><span></span>
               </div>
-
-              <div v-if="isCompacting" class="compacting-banner">
-                <div class="compacting-spinner"></div>
-                <span class="compacting-text">Context compacting in progress...</span>
-              </div>
             </div>
           </div>
 

package/web/modules/connection.js

@@ -183,7 +183,7 @@ export function createConnection(deps) {
         streaming.flushReveal();
         finalizeStreamingMsg(scheduleHighlight);
         messages.value.push({
-          id: streaming.nextId(), role: 'user',
+          id: streaming.nextId(), role: 'system',
           content: msg.content, isCommandOutput: true,
           timestamp: new Date(),
         });
@@ -191,8 +191,21 @@ export function createConnection(deps) {
       } else if (msg.type === 'context_compaction') {
         if (msg.status === 'started') {
           isCompacting.value = true;
+          messages.value.push({
+            id: streaming.nextId(), role: 'system',
+            content: 'Context compacting...', isCompactStart: true,
+            timestamp: new Date(),
+          });
+          scrollToBottom();
         } 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);
+          if (startMsg) {
+            startMsg.content = 'Context compacted';
+            startMsg.compactDone = true;
+          }
+          scrollToBottom();
         }
       } else if (msg.type === 'turn_completed' || msg.type === 'execution_cancelled') {
         isProcessing.value = false;
@@ -250,10 +263,16 @@ export function createConnection(deps) {
                   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, isCommandOutput: !!h.isCommandOutput,
+                  content: h.content,
                   timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
                 });
               }

package/web/style.css

@@ -1190,6 +1190,13 @@ body {
   padding: 0.25rem 0;
 }
 
+.system-msg.command-output-msg {
+  text-align: left;
+  font-style: normal;
+  font-size: 0.85rem;
+  padding: 0.5rem 0;
+}
+
 /* ── History loading indicator ── */
 .history-loading {
   display: flex;
@@ -1263,25 +1270,20 @@ body {
   30% { opacity: 1; transform: scale(1); }
 }
 
-/* ── Context compaction banner ── */
-.compacting-banner {
-  display: flex;
+/* ── Context compaction inline message ── */
+.compact-msg {
+  display: inline-flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 16px;
-  margin: 0.75rem 0;
-  border-radius: 8px;
-  background: rgba(245, 158, 11, 0.08);
-  border: 1px solid rgba(245, 158, 11, 0.25);
-  color: var(--warning);
-  font-size: 0.85rem;
+  gap: 6px;
+  color: var(--warning) !important;
+  font-style: normal !important;
   font-weight: 500;
-  animation: compacting-pulse 2s ease-in-out infinite;
 }
 
-.compacting-spinner {
-  width: 16px;
-  height: 16px;
+.compact-inline-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
   border: 2px solid rgba(245, 158, 11, 0.3);
   border-top-color: var(--warning);
   border-radius: 50%;
@@ -1289,13 +1291,10 @@ body {
   flex-shrink: 0;
 }
 
-.compacting-text {
-  flex: 1;
-}
-
-@keyframes compacting-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
+.compact-done-icon {
+  color: var(--success, #22c55e);
+  font-weight: 700;
+  font-style: normal;
 }
 
 /* ── Input area ── */