@agent-link/server 0.1.44 → 0.1.45

package/package.json

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

package/web/app.js

@@ -506,19 +506,20 @@ const App = {
                 </div>
 
                 <!-- System message -->
-                <div v-else-if="msg.role === 'system'" class="system-msg">
+                <div v-else-if="msg.role === 'system'" :class="['system-msg', { 'compact-msg': msg.isCompactStart }]">
+                  <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>
                   {{ msg.content }}
                 </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

@@ -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;

package/web/style.css

@@ -1263,25 +1263,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 +1284,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 ── */