antri_cli 1.27.0 → 1.28.0

package/dist/desktop/public/app.js

@@ -2,10 +2,16 @@
 
 let currentConfig = null;
 let activeTab = 'chat';
+let attachedFiles = [];
+let availableCommands = [];
+let activePaletteMatches = [];
+let paletteSelectedIndex = 0;
+let activePaletteMode = null; // 'slash' | 'file' | null
 
 // Initialize on Load
 document.addEventListener('DOMContentLoaded', async () => {
   await loadStatus();
+  await loadCommands();
   await loadProfiles();
   await loadSkills();
   await loadMemory();
@@ -34,6 +40,17 @@ async function loadStatus() {
   }
 }
 
+// Load Slash Commands for Prompt Toolkit
+async function loadCommands() {
+  try {
+    const res = await fetch('/api/commands');
+    const data = await res.json();
+    availableCommands = data.commands || [];
+  } catch (err) {
+    console.error('Failed to load commands:', err);
+  }
+}
+
 // Load Models for Provider
 async function loadModels() {
   try {
@@ -132,13 +149,243 @@ function showTab(tabName) {
   if (navButtons[navIndex]) navButtons[navIndex].classList.add('active');
 }
 
+// File Upload Handler (Images & Files)
+async function handleFileSelected(event) {
+  const files = event.target.files;
+  if (!files || files.length === 0) return;
+
+  for (const file of files) {
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      const data = e.target.result;
+      try {
+        const res = await fetch('/api/upload', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            fileName: file.name,
+            fileType: file.type || 'text/plain',
+            data,
+          }),
+        });
+        const uploadRes = await res.json();
+        if (uploadRes.success) {
+          attachedFiles.push({
+            name: file.name,
+            path: uploadRes.filePath,
+            isImage: uploadRes.isImage,
+            dataUrl: uploadRes.isImage ? data : null,
+          });
+          renderAttachmentChips();
+        }
+      } catch (err) {
+        console.error('File upload failed:', err);
+      }
+    };
+    if (file.type.startsWith('image/')) {
+      reader.readAsDataURL(file);
+    } else {
+      reader.readAsText(file);
+    }
+  }
+
+  // Reset input
+  event.target.value = '';
+}
+
+function renderAttachmentChips() {
+  const tray = document.getElementById('attachment-preview-tray');
+  if (!tray) return;
+
+  if (attachedFiles.length === 0) {
+    tray.classList.add('hidden');
+    tray.innerHTML = '';
+    return;
+  }
+
+  tray.classList.remove('hidden');
+  tray.innerHTML = '';
+
+  attachedFiles.forEach((file, index) => {
+    const chip = document.createElement('div');
+    chip.className = 'attachment-chip';
+    if (file.isImage && file.dataUrl) {
+      chip.innerHTML = `
+        <img src="${file.dataUrl}" alt="preview" />
+        <span>${file.name}</span>
+        <button class="remove-chip-btn" onclick="removeAttachment(${index})">×</button>
+      `;
+    } else {
+      chip.innerHTML = `
+        <span>${file.name}</span>
+        <button class="remove-chip-btn" onclick="removeAttachment(${index})">×</button>
+      `;
+    }
+    tray.appendChild(chip);
+  });
+}
+
+function removeAttachment(index) {
+  attachedFiles.splice(index, 1);
+  renderAttachmentChips();
+}
+
+// Prompt Toolkit Text & Key Handler
+async function handleInputText(event) {
+  const val = event.target.value;
+  const cursorPos = event.target.selectionStart;
+
+  // 1. Slash command mode
+  if (val.startsWith('/')) {
+    const query = val.toLowerCase();
+    activePaletteMatches = availableCommands.filter((cmd) => {
+      const baseName = cmd.name.split(' ')[0].toLowerCase();
+      return baseName.startsWith(query) || cmd.name.toLowerCase().startsWith(query);
+    });
+    activePaletteMode = 'slash';
+    renderPalette('Commands', activePaletteMatches);
+    return;
+  }
+
+  // 2. Attachment file mode (@)
+  const lastAt = val.lastIndexOf('@', cursorPos - 1);
+  if (lastAt !== -1 && (lastAt === 0 || val[lastAt - 1] === ' ')) {
+    const query = val.slice(lastAt + 1, cursorPos);
+    if (!query.includes(' ')) {
+      try {
+        const res = await fetch(`/api/files?query=${encodeURIComponent(query)}`);
+        const data = await res.json();
+        activePaletteMatches = data.items.map((item) => ({
+          name: item.name,
+          description: item.isDirectory ? 'Directory' : item.relativePath,
+          relativePath: item.relativePath,
+          isDirectory: item.isDirectory,
+        }));
+        activePaletteMode = 'file';
+        renderPalette(`Files: ${data.currentDir}`, activePaletteMatches);
+        return;
+      } catch (e) {}
+    }
+  }
+
+  hidePalette();
+}
+
+function renderPalette(title, items) {
+  const palette = document.getElementById('prompt-toolkit-palette');
+  const header = document.getElementById('palette-header');
+  const list = document.getElementById('palette-list');
+
+  if (!palette || !items || items.length === 0) {
+    hidePalette();
+    return;
+  }
+
+  header.textContent = title;
+  list.innerHTML = '';
+  paletteSelectedIndex = Math.min(paletteSelectedIndex, items.length - 1);
+  if (paletteSelectedIndex < 0) paletteSelectedIndex = 0;
+
+  items.slice(0, 10).forEach((item, idx) => {
+    const el = document.createElement('div');
+    el.className = `palette-item ${idx === paletteSelectedIndex ? 'active' : ''}`;
+    el.innerHTML = `
+      <span class="palette-name">${item.name}</span>
+      <span class="palette-desc">${item.description || ''}</span>
+      ${item.isDirectory ? '<span class="palette-tag">dir</span>' : ''}
+    `;
+    el.onclick = () => selectPaletteItem(idx);
+    list.appendChild(el);
+  });
+
+  palette.classList.remove('hidden');
+}
+
+function hidePalette() {
+  const palette = document.getElementById('prompt-toolkit-palette');
+  if (palette) palette.classList.add('hidden');
+  activePaletteMode = null;
+  activePaletteMatches = [];
+  paletteSelectedIndex = 0;
+}
+
+function selectPaletteItem(index) {
+  const item = activePaletteMatches[index];
+  if (!item) return;
+
+  const input = document.getElementById('prompt-input');
+
+  if (activePaletteMode === 'slash') {
+    const rawCmd = item.name.split(' ')[0];
+    input.value = rawCmd + ' ';
+    hidePalette();
+    input.focus();
+  } else if (activePaletteMode === 'file') {
+    const val = input.value;
+    const cursorPos = input.selectionStart;
+    const lastAt = val.lastIndexOf('@', cursorPos - 1);
+    if (lastAt !== -1) {
+      input.value = val.slice(0, lastAt) + '@' + item.relativePath + ' ' + val.slice(cursorPos);
+    }
+    hidePalette();
+    input.focus();
+  }
+}
+
+function handleInputKey(event) {
+  const palette = document.getElementById('prompt-toolkit-palette');
+  const isPaletteVisible = palette && !palette.classList.contains('hidden');
+
+  if (isPaletteVisible && activePaletteMatches.length > 0) {
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      paletteSelectedIndex = (paletteSelectedIndex - 1 + activePaletteMatches.length) % activePaletteMatches.length;
+      renderPalette(document.getElementById('palette-header').textContent, activePaletteMatches);
+      return;
+    }
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      paletteSelectedIndex = (paletteSelectedIndex + 1) % activePaletteMatches.length;
+      renderPalette(document.getElementById('palette-header').textContent, activePaletteMatches);
+      return;
+    }
+    if (event.key === 'Tab' || event.key === 'Enter') {
+      if (!event.ctrlKey && !event.metaKey) {
+        event.preventDefault();
+        selectPaletteItem(paletteSelectedIndex);
+        return;
+      }
+    }
+    if (event.key === 'Escape') {
+      hidePalette();
+      return;
+    }
+  }
+
+  // Ctrl + Enter to submit prompt
+  if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+    event.preventDefault();
+    submitPrompt();
+  }
+}
+
 // Chat Prompt Submission with SSE Streaming
 async function submitPrompt() {
   const input = document.getElementById('prompt-input');
-  const prompt = input.value.trim();
+  let prompt = input.value.trim();
+
+  // Attach any uploaded files to prompt
+  if (attachedFiles.length > 0) {
+    const attachmentsText = attachedFiles.map((f) => `\n[Attached File: ${f.name} (${f.path})]`).join('');
+    prompt = prompt + '\n' + attachmentsText;
+    attachedFiles = [];
+    renderAttachmentChips();
+  }
+
   if (!prompt) return;
 
   input.value = '';
+  hidePalette();
 
   // Intercept /debate or /goal inside chat
   if (prompt.startsWith('/debate')) {
@@ -232,13 +479,6 @@ function setPrompt(text) {
   input.focus();
 }
 
-function handleInputKey(event) {
-  if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
-    event.preventDefault();
-    submitPrompt();
-  }
-}
-
 // Dialectic Debate Runner
 async function startDebate() {
   const input = document.getElementById('debate-query-input');

package/dist/desktop/public/index.html

@@ -15,7 +15,7 @@
   <header class="app-header">
     <div class="brand-zone">
       <span class="logo-mark">ANTRI</span>
-      <span class="version-tag">v1.27.0</span>
+      <span class="version-tag">v1.28.0</span>
     </div>
 
     <!-- Mode Toggle -->
@@ -116,12 +116,32 @@
             </div>
           </div>
 
-          <!-- Bottom Prompt Box -->
+          <!-- Bottom Prompt Box & Prompt Toolkit -->
           <div class="chat-input-bar">
+            <!-- Prompt Toolkit Dropdown Palette -->
+            <div id="prompt-toolkit-palette" class="prompt-toolkit-palette hidden">
+              <div class="palette-header" id="palette-header">Commands</div>
+              <div class="palette-list" id="palette-list">
+                <!-- Dynamically populated -->
+              </div>
+            </div>
+
+            <!-- Attached Files Preview Tray -->
+            <div id="attachment-preview-tray" class="attachment-preview-tray hidden"></div>
+
             <div class="input-container">
-              <textarea id="prompt-input" placeholder="Ask ANTRI, type /plan, /goal, or @ to attach files..." rows="2" onkeydown="handleInputKey(event)"></textarea>
+              <!-- Hidden File Input -->
+              <input type="file" id="file-upload-input" multiple accept="image/*,.txt,.ts,.js,.json,.py,.md,.csv,.html,.css" style="display:none;" onchange="handleFileSelected(event)" />
+              
+              <div class="input-row">
+                <button id="btn-attach-file" class="attach-btn" title="Upload image or file" onclick="document.getElementById('file-upload-input').click()">
+                  +
+                </button>
+                <textarea id="prompt-input" placeholder="Ask ANTRI, type / for commands, @ for files..." rows="2" onkeydown="handleInputKey(event)" oninput="handleInputText(event)"></textarea>
+              </div>
+
               <div class="input-actions">
-                <span class="shortcut-tip">Press Ctrl + Enter to send · @ for files</span>
+                <span class="shortcut-tip">Press <b>Ctrl + Enter</b> to send · <b>/</b> commands · <b>@</b> files</span>
                 <button id="send-btn" class="send-btn" onclick="submitPrompt()">
                   <span>Send</span>
                 </button>

package/dist/desktop/public/style.css

@@ -394,25 +394,175 @@ body.antri-app {
   display: inline-block;
 }
 
-/* Chat Input Bar */
+/* Chat Input Bar & Attachments */
 .chat-input-bar {
   position: absolute;
   bottom: 1.25rem;
   left: 2.75rem;
   right: 2.75rem;
+  z-index: 50;
 }
 
 .input-container {
   background: var(--bg-card);
   border: 1px solid var(--border-main);
   border-radius: var(--radius-lg);
-  padding: 1.1rem 1.35rem;
+  padding: 0.9rem 1.25rem;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
   display: flex;
   flex-direction: column;
+  gap: 0.5rem;
+  position: relative;
+}
+
+.input-row {
+  display: flex;
+  align-items: flex-start;
   gap: 0.75rem;
 }
 
+.attach-btn {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-main);
+  background: var(--bg-subtle);
+  color: var(--text-primary);
+  font-size: 1.15rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  margin-top: 2px;
+}
+
+.attach-btn:hover {
+  background: var(--bg-hover);
+  border-color: var(--text-primary);
+}
+
+.attachment-preview-tray {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.4rem 0.2rem;
+  border-bottom: 1px solid var(--border-light);
+  margin-bottom: 0.25rem;
+}
+
+.attachment-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: var(--bg-subtle);
+  border: 1px solid var(--border-main);
+  padding: 0.25rem 0.6rem;
+  border-radius: var(--radius-xs);
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+}
+
+.attachment-chip img {
+  width: 18px;
+  height: 18px;
+  object-fit: cover;
+  border-radius: 2px;
+}
+
+.attachment-chip .remove-chip-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-tertiary);
+  font-weight: 700;
+  cursor: pointer;
+  padding: 0 0.2rem;
+}
+
+.attachment-chip .remove-chip-btn:hover {
+  color: var(--accent-warning);
+}
+
+/* Prompt Toolkit Autocomplete Palette */
+.prompt-toolkit-palette {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  left: 0;
+  right: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-main);
+  border-radius: var(--radius-md);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  max-height: 280px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+}
+
+.palette-header {
+  padding: 0.5rem 0.9rem;
+  background: var(--bg-sidebar);
+  border-bottom: 1px solid var(--border-main);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 700;
+  color: var(--text-tertiary);
+}
+
+.palette-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.palette-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 1rem;
+  cursor: pointer;
+  border-bottom: 1px solid var(--border-light);
+  transition: all 0.1s ease;
+}
+
+.palette-item:last-child {
+  border-bottom: none;
+}
+
+.palette-item.active,
+.palette-item:hover {
+  background: var(--bg-subtle);
+}
+
+.palette-name {
+  font-family: var(--font-mono);
+  font-size: 0.84rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  min-width: 140px;
+}
+
+.palette-desc {
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  flex: 1;
+  margin-left: 1rem;
+}
+
+.palette-tag {
+  font-size: 0.7rem;
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+}
+
+.hidden {
+  display: none !important;
+}
+
 .input-container textarea {
   background: transparent;
   border: none;

package/dist/desktop/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/desktop/server.ts"],"names":[],"mappings":"AAiCA,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,IAAI,CAAQ;IACpB,OAAO,CAAC,WAAW,CAAa;;IAMnB,KAAK,IAAI,OAAO,CAAC,MAAM,CAAC;IAkExB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;YAUpB,SAAS;WAyMH,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;CA0BnD"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/desktop/server.ts"],"names":[],"mappings":"AAoCA,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,IAAI,CAAQ;IACpB,OAAO,CAAC,WAAW,CAAa;;IAMnB,KAAK,IAAI,OAAO,CAAC,MAAM,CAAC;IAqExB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;YAUpB,SAAS;WAyPH,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;CAyBnD"}

package/dist/desktop/server.js

@@ -1,6 +1,7 @@
 import http from 'http';
 import fs from 'fs';
 import path from 'path';
+import os from 'os';
 import { fileURLToPath } from 'url';
 import { spawn } from 'child_process';
 import { configManager } from '../core/config.js';
@@ -12,6 +13,8 @@ import { memoryManager } from '../memory/manager.js';
 import { SkillSynthesizer } from '../core/skillSynthesizer.js';
 import { getAllActiveTools } from '../core/tools.js';
 import { getAvailableModels } from '../providers/models.js';
+import { PROMPT_TOOLKIT_COMMANDS } from '../cli/promptToolkit.js';
+import { FilePickerService } from '../cli/dialogs/filePicker.js';
 import chalk from 'chalk';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -52,7 +55,7 @@ export class DesktopServer {
                 const pathname = url.pathname;
                 // 1. API Endpoints
                 if (pathname.startsWith('/api/')) {
-                    await this.handleApi(pathname, req, res);
+                    await this.handleApi(pathname, url, req, res);
                     return;
                 }
                 // 2. Static File Serving
@@ -68,6 +71,9 @@ export class DesktopServer {
                     '.json': 'application/json',
                     '.png': 'image/png',
                     '.svg': 'image/svg+xml',
+                    '.jpg': 'image/jpeg',
+                    '.jpeg': 'image/jpeg',
+                    '.webp': 'image/webp',
                 };
                 try {
                     const data = fs.readFileSync(filePath);
@@ -103,7 +109,7 @@ export class DesktopServer {
             }
         });
     }
-    async handleApi(pathname, req, res) {
+    async handleApi(pathname, url, req, res) {
         const config = configManager.get();
         // GET /api/status
         if (pathname === '/api/status' && req.method === 'GET') {
@@ -115,6 +121,20 @@ export class DesktopServer {
             }));
             return;
         }
+        // GET /api/commands (Prompt Toolkit Slash Commands)
+        if (pathname === '/api/commands' && req.method === 'GET') {
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ commands: PROMPT_TOOLKIT_COMMANDS }));
+            return;
+        }
+        // GET /api/files (Prompt Toolkit File Browser for @)
+        if (pathname === '/api/files' && req.method === 'GET') {
+            const query = url.searchParams.get('query') || '';
+            const { currentDir, items } = FilePickerService.listDirectory(config.workingDir, query);
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ currentDir, items }));
+            return;
+        }
         // GET /api/models
         if (pathname === '/api/models' && req.method === 'GET') {
             const models = await getAvailableModels(config);
@@ -153,6 +173,33 @@ export class DesktopServer {
         req.on('end', async () => {
             try {
                 const payload = body ? JSON.parse(body) : {};
+                // POST /api/upload (File and Image Uploader)
+                if (pathname === '/api/upload' && req.method === 'POST') {
+                    const fileName = payload.fileName || `upload_${Date.now()}.bin`;
+                    const fileData = payload.data || ''; // Base64 or text data
+                    const fileType = payload.fileType || 'text/plain';
+                    const uploadDir = path.join(os.homedir(), '.antri', 'attachments');
+                    if (!fs.existsSync(uploadDir)) {
+                        fs.mkdirSync(uploadDir, { recursive: true });
+                    }
+                    const savedPath = path.join(uploadDir, fileName);
+                    if (fileData.startsWith('data:')) {
+                        const base64Data = fileData.split(',')[1];
+                        fs.writeFileSync(savedPath, Buffer.from(base64Data, 'base64'));
+                    }
+                    else {
+                        fs.writeFileSync(savedPath, fileData, 'utf-8');
+                    }
+                    res.writeHead(200, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({
+                        success: true,
+                        filePath: savedPath,
+                        fileName,
+                        fileType,
+                        isImage: fileType.startsWith('image/'),
+                    }));
+                    return;
+                }
                 // POST /api/chat (SSE Streaming)
                 if (pathname === '/api/chat' && req.method === 'POST') {
                     res.writeHead(200, {
@@ -262,7 +309,7 @@ export class DesktopServer {
                 // POST /api/profile/save
                 if (pathname === '/api/profile/save' && req.method === 'POST') {
                     const active = profileManager.getActiveProfileName();
-                    const filePath = path.join(process.env.HOME || process.env.USERPROFILE || '.', '.antri', 'profiles', `${active}.md`);
+                    const filePath = path.join(os.homedir(), '.antri', 'profiles', `${active}.md`);
                     fs.writeFileSync(filePath, payload.content, 'utf-8');
                     res.writeHead(200, { 'Content-Type': 'application/json' });
                     res.end(JSON.stringify({ success: true }));
@@ -289,7 +336,7 @@ export class DesktopServer {
         const port = await desktop.start();
         const url = `http://localhost:${port}`;
         console.log();
-        console.log(chalk.bgHex('#7c3aed').bold.white(' ⚡ ANTRI DESKTOP APP LAUNCHED '));
+        console.log(chalk.bgHex('#7c3aed').bold.white(' ANTRI DESKTOP APP LAUNCHED '));
         console.log(chalk.hex('#a5b4fc')(`Local Desktop Control Plane running at: ${chalk.bold.cyan(url)}`));
         console.log(chalk.hex('#64748b')('Shared Memory, Thinking Profiles, Skills & Providers actively synced with CLI.'));
         console.log();
@@ -297,7 +344,6 @@ export class DesktopServer {
         const platform = process.platform;
         try {
             if (platform === 'win32') {
-                // Try launching Microsoft Edge or Chrome in standalone App Mode window
                 spawn('cmd.exe', ['/c', 'start', 'msedge', `--app=${url}`], { detached: true, stdio: 'ignore' });
             }
             else if (platform === 'darwin') {