@agent-link/server 0.1.162 → 0.1.164

package/package.json

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

package/web/app.js

@@ -25,6 +25,13 @@ import { LOOP_TEMPLATES, LOOP_TEMPLATE_KEYS, buildCronExpression, formatSchedule
 import { createScrollManager, createHighlightScheduler, formatUsage } from './modules/appHelpers.js';
 import { createI18n } from './modules/i18n.js';
 
+// ── Slash commands ──────────────────────────────────────────────────────────
+const SLASH_COMMANDS = [
+  { command: '/cost', descKey: 'slash.cost' },
+  { command: '/context', descKey: 'slash.context' },
+  { command: '/compact', descKey: 'slash.compact' },
+];
+
 // ── App ─────────────────────────────────────────────────────────────────────
 const App = {
   setup() {
@@ -59,6 +66,7 @@ const App = {
     const queuedMessages = ref([]);
     const usageStats = ref(null);
     const inputRef = ref(null);
+    const slashMenuIndex = ref(0);
 
     // Sidebar state
     const sidebarOpen = ref(window.innerWidth > 768);
@@ -119,12 +127,21 @@ const App = {
     const fileTreeRoot = ref(null);
     const fileTreeLoading = ref(false);
     const fileContextMenu = ref(null);
-    const sidebarView = ref('sessions');       // 'sessions' | 'files' | 'preview' (mobile only)
+    const sidebarView = ref('sessions');       // 'sessions' | 'files' | 'preview' | 'memory' (mobile only)
     const isMobile = ref(window.innerWidth <= 768);
     const workdirMenuOpen = ref(false);
     const teamsCollapsed = ref(false);
     const chatsCollapsed = ref(false);
     const loopsCollapsed = ref(false);
+
+    // Memory management state
+    const memoryPanelOpen = ref(false);
+    const memoryFiles = ref([]);
+    const memoryDir = ref(null);
+    const memoryLoading = ref(false);
+    const memoryEditing = ref(false);
+    const memoryEditContent = ref('');
+    const memorySaving = ref(false);
     const _sidebarCollapseKey = () => hostname.value ? `agentlink-sidebar-collapsed-${hostname.value}` : null;
     const loadingTeams = ref(false);
     const loadingLoops = ref(false);
@@ -184,6 +201,12 @@ const App = {
     const previewFile = ref(null);
     const previewLoading = ref(false);
     const previewMarkdownRendered = ref(false);
+    const isMemoryPreview = computed(() => {
+      if (!previewFile.value?.filePath || !memoryDir.value) return false;
+      const fp = previewFile.value.filePath.replace(/\\/g, '/');
+      const md = memoryDir.value.replace(/\\/g, '/');
+      return fp.startsWith(md);
+    });
 
     // ── switchConversation: save current → load target ──
     // Defined here and used by sidebar.newConversation, sidebar.resumeSession, workdir_changed
@@ -331,6 +354,8 @@ const App = {
       // Multi-session parallel
       currentConversationId, processingConversations, conversationCache,
       switchConversation,
+      // Memory management
+      memoryFiles, memoryDir, memoryLoading, memoryEditing, memoryEditContent, memorySaving, memoryPanelOpen,
       // i18n
       t,
     });
@@ -398,6 +423,17 @@ const App = {
       && !messages.value.some(m => m.role === 'ask-question' && !m.answered)
     );
 
+    // ── Slash command menu ──
+    const slashMenuVisible = computed(() => {
+      const txt = inputText.value;
+      return txt.startsWith('/') && !/\s/.test(txt.slice(1));
+    });
+    const filteredSlashCommands = computed(() => {
+      const txt = inputText.value.toLowerCase();
+      return SLASH_COMMANDS.filter(c => c.command.startsWith(txt));
+    });
+    watch(filteredSlashCommands, () => { slashMenuIndex.value = 0; });
+
     // ── Auto-resize textarea ──
     function autoResize() {
       const ta = inputRef.value;
@@ -487,7 +523,42 @@ const App = {
       if (idx !== -1) queuedMessages.value.splice(idx, 1);
     }
 
+    function selectSlashCommand(cmd) {
+      inputText.value = cmd.command;
+      sendMessage();
+    }
+
     function handleKeydown(e) {
+      // Slash menu key handling
+      if (slashMenuVisible.value && filteredSlashCommands.value.length > 0 && !e.isComposing) {
+        const len = filteredSlashCommands.value.length;
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          slashMenuIndex.value = (slashMenuIndex.value + 1) % len;
+          return;
+        }
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          slashMenuIndex.value = (slashMenuIndex.value - 1 + len) % len;
+          return;
+        }
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          selectSlashCommand(filteredSlashCommands.value[slashMenuIndex.value]);
+          return;
+        }
+        if (e.key === 'Tab') {
+          e.preventDefault();
+          inputText.value = filteredSlashCommands.value[slashMenuIndex.value].command;
+          return;
+        }
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          inputText.value = '';
+          return;
+        }
+      }
+
       if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
         e.preventDefault();
         sendMessage();
@@ -554,6 +625,7 @@ const App = {
       serverVersion, agentVersion, latency,
       messages, visibleMessages, hasMoreMessages, loadMoreMessages,
       inputText, isProcessing, isCompacting, canSend, hasInput, inputRef, queuedMessages, usageStats,
+      slashMenuVisible, filteredSlashCommands, slashMenuIndex, selectSlashCommand,
       sendMessage, handleKeydown, cancelExecution, removeQueuedMessage, onMessageListScroll,
       getRenderedContent, copyMessage, toggleTool,
       isPrevAssistant: _isPrevAssistant,
@@ -670,6 +742,59 @@ const App = {
         workdirMenuOpen.value = false;
         navigator.clipboard.writeText(workDir.value);
       },
+      // Memory management
+      memoryPanelOpen, memoryFiles, memoryDir, memoryLoading,
+      memoryEditing, memoryEditContent, memorySaving, isMemoryPreview,
+      workdirMenuMemory() {
+        workdirMenuOpen.value = false;
+        if (isMobile.value) {
+          sidebarView.value = 'memory';
+        } else {
+          memoryPanelOpen.value = !memoryPanelOpen.value;
+          if (memoryPanelOpen.value) filePanelOpen.value = false;
+        }
+        if (!memoryFiles.value.length) {
+          memoryLoading.value = true;
+          wsSend({ type: 'list_memory' });
+        }
+      },
+      refreshMemory() {
+        memoryLoading.value = true;
+        wsSend({ type: 'list_memory' });
+      },
+      openMemoryFile(file) {
+        memoryEditing.value = false;
+        memoryEditContent.value = '';
+        if (memoryDir.value) {
+          const sep = memoryDir.value.includes('\\') ? '\\' : '/';
+          filePreview.openPreview(memoryDir.value + sep + file.name);
+        }
+        if (isMobile.value) sidebarView.value = 'preview';
+      },
+      startMemoryEdit() {
+        memoryEditing.value = true;
+        memoryEditContent.value = previewFile.value?.content || '';
+      },
+      cancelMemoryEdit() {
+        if (memoryEditContent.value !== (previewFile.value?.content || '')) {
+          if (!confirm(t('memory.discardChanges'))) return;
+        }
+        memoryEditing.value = false;
+        memoryEditContent.value = '';
+      },
+      saveMemoryEdit() {
+        if (!previewFile.value) return;
+        memorySaving.value = true;
+        wsSend({
+          type: 'update_memory',
+          filename: previewFile.value.fileName,
+          content: memoryEditContent.value,
+        });
+      },
+      deleteMemoryFile(file) {
+        if (!confirm(t('memory.deleteConfirm', { name: file.name }))) return;
+        wsSend({ type: 'delete_memory', filename: file.name });
+      },
       // Team mode
       team,
       teamState: team.teamState,
@@ -1077,18 +1202,28 @@ const App = {
           <!-- Mobile: file preview view -->
           <div v-else-if="isMobile && sidebarView === 'preview'" class="file-preview-mobile">
             <div class="file-preview-mobile-header">
-              <button class="file-panel-mobile-back" @click="filePreview.closePreview()">
+              <button class="file-panel-mobile-back" @click="filePreview.closePreview(); memoryEditing = false">
                 <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                 {{ t('sidebar.files') }}
               </button>
               <div class="preview-header-actions">
-                <button v-if="previewFile?.content && filePreview.isMarkdownFile(previewFile.fileName)"
+                <button v-if="isMemoryPreview && previewFile && !memoryEditing"
+                        class="preview-edit-btn" @click="startMemoryEdit()" :title="t('memory.edit')">
+                  <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/></svg>
+                  {{ t('memory.edit') }}
+                </button>
+                <span v-if="memoryEditing" class="preview-edit-label">{{ t('memory.editing') }}</span>
+                <button v-if="memoryEditing" class="memory-header-cancel" @click="cancelMemoryEdit()">{{ t('loop.cancel') }}</button>
+                <button v-if="memoryEditing" class="memory-header-save" @click="saveMemoryEdit()" :disabled="memorySaving">
+                  {{ memorySaving ? t('memory.saving') : t('memory.save') }}
+                </button>
+                <button v-if="previewFile?.content && !memoryEditing && filePreview.isMarkdownFile(previewFile.fileName)"
                         class="preview-md-toggle" :class="{ active: previewMarkdownRendered }"
                         @click="previewMarkdownRendered = !previewMarkdownRendered"
                         :title="previewMarkdownRendered ? t('preview.showSource') : t('preview.renderMarkdown')">
                   <svg viewBox="0 0 16 16" width="14" height="14"><path fill="currentColor" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"/></svg>
                 </button>
-                <span v-if="previewFile" class="file-preview-mobile-size">
+                <span v-if="previewFile && !memoryEditing" class="file-preview-mobile-size">
                   {{ filePreview.formatFileSize(previewFile.totalSize) }}
                 </span>
               </div>
@@ -1097,7 +1232,10 @@ const App = {
               {{ previewFile?.fileName || t('preview.preview') }}
             </div>
             <div class="preview-panel-body">
-              <div v-if="previewLoading" class="preview-loading">{{ t('preview.loading') }}</div>
+              <div v-if="memoryEditing" class="memory-edit-container">
+                <textarea class="memory-edit-textarea" v-model="memoryEditContent"></textarea>
+              </div>
+              <div v-else-if="previewLoading" class="preview-loading">{{ t('preview.loading') }}</div>
               <div v-else-if="previewFile?.error" class="preview-error">
                 {{ previewFile.error }}
               </div>
@@ -1122,6 +1260,31 @@ const App = {
             </div>
           </div>
 
+          <!-- Mobile: memory view -->
+          <div v-else-if="isMobile && sidebarView === 'memory'" class="file-panel-mobile">
+            <div class="file-panel-mobile-header">
+              <button class="file-panel-mobile-back" @click="sidebarView = 'sessions'">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                {{ t('sidebar.sessions') }}
+              </button>
+              <button class="file-panel-btn" @click="refreshMemory()" :title="t('sidebar.refresh')">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+              </button>
+            </div>
+            <div v-if="memoryLoading" class="file-panel-loading">{{ t('memory.loading') }}</div>
+            <div v-else-if="memoryFiles.length === 0" class="memory-empty">
+              <p>{{ t('memory.noFiles') }}</p>
+              <p class="memory-empty-hint">{{ t('memory.noFilesHint') }}</p>
+            </div>
+            <div v-else class="file-tree">
+              <div v-for="file in memoryFiles" :key="file.name"
+                   class="file-tree-item" @click="openMemoryFile(file)">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zM6 20V4h5v5c0 .55.45 1 1 1h5v10H6z"/></svg>
+                <span class="file-tree-name">{{ file.name }}</span>
+              </div>
+            </div>
+          </div>
+
           <!-- Normal sidebar content (sessions view) -->
           <template v-else>
           <div class="sidebar-section">
@@ -1150,6 +1313,10 @@ const App = {
                   <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
                   <span>{{ t('sidebar.copyPath') }}</span>
                 </div>
+                <div class="workdir-menu-item" @click.stop="workdirMenuMemory()">
+                  <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zM6 20V4h5v5c0 .55.45 1 1 1h5v10H6z"/></svg>
+                  <span>{{ t('sidebar.memory') }}</span>
+                </div>
               </div>
               <div v-if="filteredWorkdirHistory.length > 0" class="workdir-history">
                 <div class="workdir-history-label">{{ t('sidebar.recentDirectories') }}</div>
@@ -1421,6 +1588,39 @@ const App = {
         </div>
         </Transition>
 
+        <!-- Memory panel (desktop) -->
+        <Transition name="file-panel">
+        <div v-if="memoryPanelOpen && !isMobile" class="file-panel memory-panel">
+          <div class="file-panel-header">
+            <span class="file-panel-title">{{ t('memory.title') }}</span>
+            <div class="file-panel-actions">
+              <button class="file-panel-btn" @click="refreshMemory()" :title="t('sidebar.refresh')">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+              </button>
+              <button class="file-panel-btn" @click="memoryPanelOpen = false" :title="t('sidebar.close')">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+              </button>
+            </div>
+          </div>
+          <div v-if="memoryLoading" class="file-panel-loading">{{ t('memory.loading') }}</div>
+          <div v-else-if="memoryFiles.length === 0" class="memory-empty">
+            <p>{{ t('memory.noFiles') }}</p>
+            <p class="memory-empty-hint">{{ t('memory.noFilesHint') }}</p>
+          </div>
+          <div v-else class="file-tree">
+            <div v-for="file in memoryFiles" :key="file.name" class="file-tree-item memory-file-item">
+              <div class="memory-file-row" @click="openMemoryFile(file)">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zM6 20V4h5v5c0 .55.45 1 1 1h5v10H6z"/></svg>
+                <span class="file-tree-name">{{ file.name }}</span>
+              </div>
+              <button class="memory-delete-btn" @click.stop="deleteMemoryFile(file)" :title="t('memory.deleteFile')">
+                <svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+        </Transition>
+
         <!-- Chat area -->
         <div class="chat-area">
 
@@ -2241,6 +2441,15 @@ const App = {
               </div>
             </div>
             <div v-if="usageStats" class="usage-bar">{{ formatUsage(usageStats) }}</div>
+            <div v-if="slashMenuVisible && filteredSlashCommands.length > 0" class="slash-menu">
+              <div v-for="(cmd, i) in filteredSlashCommands" :key="cmd.command"
+                   :class="['slash-menu-item', { active: i === slashMenuIndex }]"
+                   @mouseenter="slashMenuIndex = i"
+                   @click="selectSlashCommand(cmd)">
+                <span class="slash-menu-cmd">{{ cmd.command }}</span>
+                <span class="slash-menu-desc">{{ t(cmd.descKey) }}</span>
+              </div>
+            </div>
             <div
               :class="['input-card', { 'drag-over': dragOver }]"
               @dragover="handleDragOver"
@@ -2304,10 +2513,23 @@ const App = {
             <span v-if="previewFile" class="preview-panel-size">
               {{ filePreview.formatFileSize(previewFile.totalSize) }}
             </span>
-            <button class="preview-panel-close" @click="filePreview.closePreview()" :title="t('preview.closePreview')">&times;</button>
+            <button v-if="isMemoryPreview && previewFile && !memoryEditing"
+                    class="preview-edit-btn" @click="startMemoryEdit()" :title="t('memory.edit')">
+              <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/></svg>
+              {{ t('memory.edit') }}
+            </button>
+            <span v-if="memoryEditing" class="preview-edit-label">{{ t('memory.editing') }}</span>
+            <button v-if="memoryEditing" class="memory-header-cancel" @click="cancelMemoryEdit()">{{ t('loop.cancel') }}</button>
+            <button v-if="memoryEditing" class="memory-header-save" @click="saveMemoryEdit()" :disabled="memorySaving">
+              {{ memorySaving ? t('memory.saving') : t('memory.save') }}
+            </button>
+            <button class="preview-panel-close" @click="filePreview.closePreview(); memoryEditing = false" :title="t('preview.closePreview')">&times;</button>
           </div>
           <div class="preview-panel-body">
-            <div v-if="previewLoading" class="preview-loading">{{ t('preview.loading') }}</div>
+            <div v-if="memoryEditing" class="memory-edit-container">
+              <textarea class="memory-edit-textarea" v-model="memoryEditContent"></textarea>
+            </div>
+            <div v-else-if="previewLoading" class="preview-loading">{{ t('preview.loading') }}</div>
             <div v-else-if="previewFile?.error" class="preview-error">
               {{ previewFile.error }}
             </div>

package/web/css/ask-question.css

@@ -0,0 +1,321 @@
+/* ── AskUserQuestion interactive card ── */
+.ask-question-wrapper {
+  max-width: 100%;
+  padding-left: 0.25rem;
+  margin: 0.5rem 0;
+}
+
+.ask-question-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--accent);
+  border-radius: 10px;
+  padding: 0.8rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ask-question-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.ask-question-header {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--accent);
+}
+
+.ask-question-text {
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.ask-question-options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ask-question-option {
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.ask-question-option:hover {
+  border-color: var(--text-secondary);
+  background: var(--bg-tertiary);
+}
+
+.ask-question-option.selected {
+  border-color: var(--accent);
+  background: rgba(107, 159, 206, 0.12);
+}
+
+.ask-option-label {
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.ask-option-desc {
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  margin-top: 2px;
+  line-height: 1.4;
+}
+
+.ask-question-custom {
+  margin-top: 2px;
+}
+
+.ask-question-custom input {
+  width: 100%;
+  padding: 6px 10px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 0.85rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ask-question-custom input::placeholder {
+  color: var(--text-secondary);
+}
+
+.ask-question-custom input:focus {
+  border-color: var(--accent);
+}
+
+.ask-question-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ask-question-submit {
+  padding: 6px 20px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.ask-question-submit:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.ask-question-submit:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.ask-question-answered {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+}
+
+.ask-answered-icon {
+  color: var(--success);
+  font-size: 0.8rem;
+}
+
+.ask-answered-text {
+  font-style: italic;
+}
+
+.context-summary-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px dashed var(--border);
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.context-summary-bar:hover {
+  background: var(--bg-tertiary);
+}
+
+.context-summary-icon {
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.context-summary-label {
+  flex: 1;
+}
+
+.context-summary-toggle {
+  font-size: 0.72rem;
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+
+.context-summary-body {
+  margin-top: 6px;
+  padding: 0.6rem 0.8rem;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.context-summary-body .markdown-body {
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+}
+
+/* ── System message ── */
+.system-msg {
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+  font-style: italic;
+  padding: 0.25rem 0;
+}
+
+.system-msg.command-output-msg {
+  text-align: left;
+  font-style: normal;
+  font-size: 0.85rem;
+  padding: 0.5rem 0;
+}
+
+.system-msg.error-msg {
+  text-align: left;
+  font-style: normal;
+  color: #d45454;
+  background: rgba(212, 84, 84, 0.08);
+  border: 1px solid rgba(212, 84, 84, 0.2);
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  font-size: 0.85rem;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* ── History loading indicator ── */
+.history-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2rem 0;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.history-loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+/* ── Load more button ── */
+.load-more-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 0.75rem 0;
+}
+
+.load-more-btn {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.4rem 1.2rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.load-more-btn:hover {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+/* ── Typing indicator ── */
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0.5rem 0.9rem;
+}
+
+.typing-indicator span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-secondary);
+  animation: typing 1.2s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
+  30% { opacity: 1; transform: scale(1); }
+}
+
+/* ── Context compaction inline message ── */
+.compact-msg {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--warning) !important;
+  font-style: normal !important;
+  font-weight: 500;
+}
+
+.compact-inline-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(212, 162, 76, 0.3);
+  border-top-color: var(--warning);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+.compact-done-icon {
+  color: var(--success, #4ead6a);
+  font-weight: 700;
+  font-style: normal;
+}
+