@jvittechs/jai1-cli 0.1.100 → 0.1.101

package/dist/web-chat/app.js

@@ -18,6 +18,7 @@
 
     const MAX_STORAGE_SIZE = 4.5 * 1024 * 1024;
     const MAX_CONTEXT_TOKENS = 175000; // 175K token limit
+    const MAX_MENTIONED_FILES = 5; // Maximum files that can be mentioned
 
     // ============================================
     // Agent Definitions
@@ -350,6 +351,11 @@ When reviewing code:
         currentConversationId: null,
         isStreaming: false,
         modelStats: null, // { date, models: { [modelId]: { limit, used, remaining } } }
+        // File mention state
+        mentionedFiles: [], // Array of { path, name, size, language }
+        fileSearchResults: [], // Autocomplete results
+        isFileSearching: false, // Autocomplete loading state
+        fileServiceInfo: null, // { workingDir, maxFiles }
     };
 
     // ============================================
@@ -620,6 +626,31 @@ When reviewing code:
                 reader.releaseLock();
             }
         },
+
+        // === File API Methods ===
+
+        async getFileServiceInfo() {
+            const response = await this.request('/api/files/info');
+            return response.json();
+        },
+
+        async searchFiles(query, limit = 10) {
+            const response = await this.request(`/api/files/search?q=${encodeURIComponent(query)}&limit=${limit}`);
+            return response.json();
+        },
+
+        async readFile(filePath) {
+            const response = await this.request(`/api/files/read?path=${encodeURIComponent(filePath)}`);
+            return response.json();
+        },
+
+        async readFiles(paths) {
+            const response = await this.request('/api/files/batch', {
+                method: 'POST',
+                body: JSON.stringify({ paths }),
+            });
+            return response.json();
+        },
     };
 
     class APIError extends Error {
@@ -719,6 +750,431 @@ When reviewing code:
         },
     };
 
+    // ============================================
+    // File Mention System
+    // ============================================
+    const FileMention = {
+        autocompleteEl: null,
+        debounceTimer: null,
+        selectedIndex: -1,
+        mentionStartPos: -1,
+        lastQuery: '',
+
+        init() {
+            // Create autocomplete dropdown
+            this.createAutocompleteElement();
+            // Create mentioned files container
+            this.createMentionedFilesContainer();
+            // Load file service info
+            this.loadFileServiceInfo();
+        },
+
+        createAutocompleteElement() {
+            this.autocompleteEl = document.createElement('div');
+            this.autocompleteEl.className = 'file-autocomplete hidden';
+            this.autocompleteEl.innerHTML = `
+                <div class="file-autocomplete-header">
+                    <span class="autocomplete-icon">📁</span>
+                    <span class="autocomplete-title">Files</span>
+                    <span class="autocomplete-hint">↑↓ to navigate, Enter to select, Esc to close</span>
+                </div>
+                <div class="file-autocomplete-list"></div>
+            `;
+            // Insert before input container
+            const inputArea = document.querySelector('.input-area');
+            if (inputArea) {
+                inputArea.insertBefore(this.autocompleteEl, inputArea.querySelector('.input-container'));
+            }
+        },
+
+        createMentionedFilesContainer() {
+            const container = document.createElement('div');
+            container.id = 'mentioned-files';
+            container.className = 'mentioned-files hidden';
+            // Insert before input selectors
+            const inputArea = document.querySelector('.input-area');
+            const selectors = inputArea?.querySelector('.input-selectors');
+            if (inputArea && selectors) {
+                inputArea.insertBefore(container, selectors);
+            }
+        },
+
+        async loadFileServiceInfo() {
+            try {
+                const response = await API.getFileServiceInfo();
+                if (response.success && response.data) {
+                    state.fileServiceInfo = response.data;
+                }
+            } catch (error) {
+                console.error('Failed to load file service info:', error);
+            }
+        },
+
+        // Detect @ mention in textarea
+        detectMention(textarea) {
+            const text = textarea.value;
+            const cursorPos = textarea.selectionStart;
+
+            // Find @ before cursor
+            let atPos = -1;
+            for (let i = cursorPos - 1; i >= 0; i--) {
+                const char = text[i];
+                if (char === '@') {
+                    atPos = i;
+                    break;
+                }
+                // Stop at whitespace or newline (not a mention)
+                if (char === ' ' || char === '\n' || char === '\t') {
+                    break;
+                }
+            }
+
+            if (atPos === -1) {
+                this.hideAutocomplete();
+                return null;
+            }
+
+            // Extract query after @
+            const query = text.substring(atPos + 1, cursorPos);
+            this.mentionStartPos = atPos;
+            return query;
+        },
+
+        async handleInput(textarea) {
+            const query = this.detectMention(textarea);
+
+            if (query === null) {
+                return;
+            }
+
+            // Debounce search
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(async () => {
+                if (query.length >= 1) {
+                    await this.searchFiles(query);
+                } else {
+                    this.hideAutocomplete();
+                }
+            }, 150);
+        },
+
+        async searchFiles(query) {
+            if (query === this.lastQuery) return;
+            this.lastQuery = query;
+
+            state.isFileSearching = true;
+            this.selectedIndex = 0; // Reset selection for new search
+            this.showAutocomplete();
+            this.renderLoading();
+
+            try {
+                const response = await API.searchFiles(query, 10);
+                if (response.success && response.data) {
+                    state.fileSearchResults = response.data.files || [];
+                    this.selectedIndex = state.fileSearchResults.length > 0 ? 0 : -1;
+                    this.renderResults();
+                }
+            } catch (error) {
+                console.error('File search error:', error);
+                this.renderError('Failed to search files');
+            } finally {
+                state.isFileSearching = false;
+            }
+        },
+
+        showAutocomplete() {
+            if (this.autocompleteEl) {
+                this.autocompleteEl.classList.remove('hidden');
+            }
+        },
+
+        hideAutocomplete() {
+            if (this.autocompleteEl) {
+                this.autocompleteEl.classList.add('hidden');
+            }
+            this.selectedIndex = -1;
+            this.mentionStartPos = -1;
+            this.lastQuery = '';
+            state.fileSearchResults = [];
+        },
+
+        renderLoading() {
+            const list = this.autocompleteEl?.querySelector('.file-autocomplete-list');
+            if (list) {
+                list.innerHTML = `
+                    <div class="file-autocomplete-loading">
+                        <span class="loading-spinner">◌</span>
+                        <span>Searching files...</span>
+                    </div>
+                `;
+            }
+        },
+
+        renderError(message) {
+            const list = this.autocompleteEl?.querySelector('.file-autocomplete-list');
+            if (list) {
+                list.innerHTML = `
+                    <div class="file-autocomplete-error">
+                        <span>⚠</span>
+                        <span>${escapeHtml(message)}</span>
+                    </div>
+                `;
+            }
+        },
+
+        renderResults() {
+            const list = this.autocompleteEl?.querySelector('.file-autocomplete-list');
+            if (!list) return;
+
+            if (state.fileSearchResults.length === 0) {
+                list.innerHTML = `
+                    <div class="file-autocomplete-empty">
+                        <span>No files found</span>
+                    </div>
+                `;
+                return;
+            }
+
+            list.innerHTML = '';
+            state.fileSearchResults.forEach((file, index) => {
+                const item = document.createElement('div');
+                item.className = 'file-autocomplete-item' + (index === this.selectedIndex ? ' selected' : '');
+                item.dataset.index = index;
+                item.innerHTML = `
+                    <span class="file-icon">${this.getFileIcon(file.extension)}</span>
+                    <span class="file-path">${escapeHtml(file.path)}</span>
+                    <span class="file-size">${this.formatFileSize(file.size)}</span>
+                `;
+                item.addEventListener('click', () => this.selectFile(index));
+                item.addEventListener('mouseenter', () => {
+                    this.selectedIndex = index;
+                    this.updateSelection();
+                });
+                list.appendChild(item);
+            });
+        },
+
+        getFileIcon(extension) {
+            const iconMap = {
+                'ts': '📘', 'tsx': '📘', 'js': '📙', 'jsx': '📙',
+                'vue': '💚', 'php': '🐘', 'py': '🐍',
+                'json': '📋', 'md': '📝', 'css': '🎨', 'scss': '🎨',
+                'html': '🌐', 'sql': '🗄️', 'sh': '⚙️',
+            };
+            return iconMap[extension] || '📄';
+        },
+
+        formatFileSize(bytes) {
+            if (bytes < 1024) return bytes + 'B';
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'KB';
+            return (bytes / (1024 * 1024)).toFixed(1) + 'MB';
+        },
+
+        updateSelection() {
+            const items = this.autocompleteEl?.querySelectorAll('.file-autocomplete-item');
+            items?.forEach((item, index) => {
+                item.classList.toggle('selected', index === this.selectedIndex);
+            });
+        },
+
+        handleKeydown(e, textarea) {
+            if (this.autocompleteEl?.classList.contains('hidden')) {
+                return false;
+            }
+
+            // No results to navigate
+            if (state.fileSearchResults.length === 0) {
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    this.hideAutocomplete();
+                    return true;
+                }
+                return false;
+            }
+
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (this.selectedIndex < 0) {
+                        this.selectedIndex = 0;
+                    } else {
+                        this.selectedIndex = Math.min(this.selectedIndex + 1, state.fileSearchResults.length - 1);
+                    }
+                    this.updateSelection();
+                    this.scrollToSelected();
+                    return true;
+
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (this.selectedIndex < 0) {
+                        this.selectedIndex = state.fileSearchResults.length - 1;
+                    } else if (this.selectedIndex > 0) {
+                        this.selectedIndex--;
+                    }
+                    this.updateSelection();
+                    this.scrollToSelected();
+                    return true;
+
+                case 'Enter':
+                    if (this.selectedIndex >= 0) {
+                        e.preventDefault();
+                        this.selectFile(this.selectedIndex, textarea);
+                        return true;
+                    } else if (state.fileSearchResults.length > 0) {
+                        // Select first item if none selected
+                        e.preventDefault();
+                        this.selectFile(0, textarea);
+                        return true;
+                    }
+                    break;
+
+                case 'Escape':
+                    e.preventDefault();
+                    this.hideAutocomplete();
+                    return true;
+
+                case 'Tab':
+                    if (state.fileSearchResults.length > 0) {
+                        e.preventDefault();
+                        this.selectFile(Math.max(this.selectedIndex, 0), textarea);
+                        return true;
+                    }
+                    break;
+            }
+
+            return false;
+        },
+
+        scrollToSelected() {
+            const list = this.autocompleteEl?.querySelector('.file-autocomplete-list');
+            const selectedItem = list?.querySelector('.file-autocomplete-item.selected');
+            if (selectedItem && list) {
+                selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        },
+
+        selectFile(index, textarea = elements.messageInput) {
+            const file = state.fileSearchResults[index];
+            if (!file) return;
+
+            // Check if already mentioned
+            if (state.mentionedFiles.some(f => f.path === file.path)) {
+                this.hideAutocomplete();
+                // Remove the @query from textarea
+                this.removeMentionText(textarea);
+                return;
+            }
+
+            // Check max files limit
+            if (state.mentionedFiles.length >= MAX_MENTIONED_FILES) {
+                alert(`Maximum ${MAX_MENTIONED_FILES} files can be mentioned per message`);
+                this.hideAutocomplete();
+                return;
+            }
+
+            // Add to mentioned files
+            state.mentionedFiles.push(file);
+            this.renderMentionedFiles();
+
+            // Remove @query from textarea
+            this.removeMentionText(textarea);
+
+            this.hideAutocomplete();
+            textarea.focus();
+        },
+
+        removeMentionText(textarea) {
+            if (this.mentionStartPos >= 0) {
+                const text = textarea.value;
+                const cursorPos = textarea.selectionStart;
+                const newText = text.substring(0, this.mentionStartPos) + text.substring(cursorPos);
+                textarea.value = newText;
+                textarea.selectionStart = textarea.selectionEnd = this.mentionStartPos;
+                // Trigger input event
+                textarea.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        },
+
+        renderMentionedFiles() {
+            const container = document.getElementById('mentioned-files');
+            if (!container) return;
+
+            if (state.mentionedFiles.length === 0) {
+                container.classList.add('hidden');
+                container.innerHTML = '';
+                return;
+            }
+
+            container.classList.remove('hidden');
+            container.innerHTML = `
+                <div class="mentioned-files-header">
+                    <span class="mentioned-icon">📎</span>
+                    <span class="mentioned-title">Attached Files (${state.mentionedFiles.length}/${MAX_MENTIONED_FILES})</span>
+                </div>
+                <div class="mentioned-files-list">
+                    ${state.mentionedFiles.map((file, index) => `
+                        <div class="mentioned-file-badge" data-index="${index}">
+                            <span class="badge-icon">${this.getFileIcon(file.extension)}</span>
+                            <span class="badge-path">${escapeHtml(file.path)}</span>
+                            <button class="badge-remove" title="Remove file">×</button>
+                        </div>
+                    `).join('')}
+                </div>
+            `;
+
+            // Add remove handlers
+            container.querySelectorAll('.badge-remove').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    const index = parseInt(e.target.closest('.mentioned-file-badge').dataset.index);
+                    this.removeFile(index);
+                });
+            });
+        },
+
+        removeFile(index) {
+            state.mentionedFiles.splice(index, 1);
+            this.renderMentionedFiles();
+        },
+
+        clearFiles() {
+            state.mentionedFiles = [];
+            this.renderMentionedFiles();
+        },
+
+        // Get file contents for mentioned files
+        async getFileContents() {
+            if (state.mentionedFiles.length === 0) {
+                return [];
+            }
+
+            const paths = state.mentionedFiles.map(f => f.path);
+            try {
+                const response = await API.readFiles(paths);
+                if (response.success && response.data) {
+                    return response.data.files || [];
+                }
+            } catch (error) {
+                console.error('Failed to read files:', error);
+            }
+            return [];
+        },
+
+        // Format file context for LLM
+        formatFileContext(files) {
+            if (!files || files.length === 0) return '';
+
+            let context = '\n\n[Attached Files]\n\n';
+            files.forEach(file => {
+                if (file.error) {
+                    context += `--- ${file.path} ---\n[Error: ${file.error}]\n\n`;
+                } else {
+                    context += `--- ${file.path} ---\n\`\`\`${file.language || 'text'}\n${file.content}\n\`\`\`\n\n`;
+                }
+            });
+            return context;
+        },
+    };
+
     // ============================================
     // UI Rendering
     // ============================================
@@ -1182,13 +1638,18 @@ When reviewing code:
 
         // Enter to send (Shift+Enter for new line)
         elements.messageInput.addEventListener('keydown', (e) => {
+            // First check if FileMention wants to handle this key
+            if (FileMention.handleKeydown(e, elements.messageInput)) {
+                return;
+            }
+
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
                 handleSend();
             }
         });
 
-        // Auto-resize textarea
+        // Auto-resize textarea and handle file mention
         elements.messageInput.addEventListener('input', () => {
             const el = elements.messageInput;
             el.style.height = 'auto';
@@ -1203,6 +1664,9 @@ When reviewing code:
 
             // Enable/disable send button
             elements.sendBtn.disabled = !el.value.trim() || state.isStreaming;
+
+            // Handle file mention detection
+            FileMention.handleInput(el);
         });
 
         // New chat button
@@ -1344,9 +1808,27 @@ When reviewing code:
         elements.messageInput.style.height = 'auto';
         elements.charCount.textContent = '';
 
+        // Get file contents if any files are mentioned
+        let fileContents = [];
+        let fileContextStr = '';
+        const hasMentionedFiles = state.mentionedFiles.length > 0;
+        if (hasMentionedFiles) {
+            fileContents = await FileMention.getFileContents();
+            fileContextStr = FileMention.formatFileContext(fileContents);
+            FileMention.clearFiles(); // Clear after getting contents
+        }
+
+        // Build full message with file context
+        const fullMessage = fileContextStr ? content + fileContextStr : content;
+
+        // Display user message (show original content, not with file context)
+        const displayMessage = hasMentionedFiles
+            ? content + `\n\n📎 _${fileContents.length} file(s) attached_`
+            : content;
+
         // Add user message
-        Conversations.addMessage('user', content);
-        UI.appendMessage('user', content);
+        Conversations.addMessage('user', displayMessage);
+        UI.appendMessage('user', displayMessage);
 
         // Check token limit before sending
         if (UI.checkTokenLimit()) {
@@ -1371,8 +1853,8 @@ When reviewing code:
             const agent = UI.getAgentById(conversation.agent || state.selectedAgent);
             const systemPrompt = agent.systemPrompt;
 
-            // Stream response
-            for await (const event of API.streamChat(content, state.selectedModel, history, systemPrompt)) {
+            // Stream response (send fullMessage with file context)
+            for await (const event of API.streamChat(fullMessage, state.selectedModel, history, systemPrompt)) {
                 if (event.type === 'chunk') {
                     fullResponse += event.content;
                     UI.updateStreamingMessage(assistantMsgEl, fullResponse);
@@ -1471,6 +1953,9 @@ When reviewing code:
             // Setup event listeners
             setupEventListeners();
 
+            // Initialize file mention system
+            FileMention.init();
+
             // Load stats (only once at init)
             loadStats();