helix-assistant-cli 0.2.14 → 0.6.0

package/src/ui/autocomplete.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import chalk from 'chalk';
 import type { AgentClient } from '../client/agent-client';
 import { formatSkill, formatMcp, ORANGE, CYAN, MAGENTA, DIM } from './colors';
 import { discoverUserSkillNames, getUserSkillsDirectory } from '../skills/user-skill-discovery';
@@ -14,16 +14,19 @@ export const SLASH_COMMANDS: CommandDefinition[] = [
   { command: '/skill', description: 'Listar o inspeccionar skills registradas', usage: '/skill [nombre]' },
   { command: '/mcp', description: 'Listar servidores MCP y sus herramientas', usage: '/mcp [defaults]' },
   { command: '/create-mcp', description: 'Registrar y configurar un nuevo servidor MCP' },
-  { command: '/browser', description: 'Ver estado del navegador web o abrir URLs', usage: '/browser [open <url>]' },
+  { command: '/browser', description: 'Ver estado, abrir URLs o alternar la vista ASCII', usage: '/browser [open <url>|live [on|off]]' },
+  { command: '/subagents', description: 'Ver el panel ASCII o chatear con un subagente', usage: '/subagents [list|chat <id> <mensaje>]' },
   { command: '/config-apikey', description: 'Configurador interactivo de API Keys (OpenAI, Anthropic, Gemini, etc.)' },
   { command: '/show-apikey', description: 'Ver estado y validez de las API Keys configuradas' },
-  { command: '/microphone', description: 'Ver o alternar estado del micrófono', usage: '/microphone [enable|disable]' },
+  { command: '/microphone', description: 'Ver o alternar estado del micrófono', usage: '/microphone [enable|disable]' },
   { command: '/tasks', description: 'Ver tareas activas y recientes del agente' },
+  { command: '/model', description: 'Ver o cambiar el modelo activo (free/local/cloud)', usage: '/model [list|set <id>|effort <low|medium|high>]' },
   { command: '/models', description: 'Listar modelos disponibles de proveedores configurados' },
+  { command: '/memory', description: 'Ver estadísticas del harness de aprendizaje adaptativo', usage: '/memory [stats|rules|reset]' },
   { command: '/status', description: 'Mostrar resumen del estado del sistema' },
   { command: '/providers', description: 'Ver proveedores configurados y salud de sus claves' },
   { command: '/capabilities', description: 'Ver capacidades activas: sandbox, subagentes, voz y browser' },
-  { command: '/settings', description: 'Ver configuración efectiva sin exponer secretos' },
+  { command: '/settings', description: 'Ver configuración efectiva sin exponer secretos' },
   { command: '/clear', description: 'Limpiar pantalla y restaurar el banner de HELIX' },
   { command: '/stop', description: 'Parada de emergencia de todas las tareas activas' },
   { command: '/help', description: 'Mostrar ayuda de comandos y atajos' },
@@ -116,7 +119,21 @@ export class Autocompleter {
       return [hits.length ? hits : options, line];
     }
 
-    // 3. Browser sub-arguments
+    // 3. Model sub-arguments
+    if (trimmed.startsWith('/model ')) {
+      const options = ['/model list', '/model set ', '/model effort low', '/model effort medium', '/model effort high'];
+      const hits = options.filter((o) => o.toLowerCase().startsWith(trimmed.toLowerCase()));
+      return [hits.length ? hits : options, line];
+    }
+
+    // 3b. Memory sub-arguments
+    if (trimmed.startsWith('/memory ')) {
+      const options = ['/memory stats', '/memory rules', '/memory reset'];
+      const hits = options.filter((o) => o.toLowerCase().startsWith(trimmed.toLowerCase()));
+      return [hits.length ? hits : options, line];
+    }
+
+    // 4. Browser sub-arguments
     if (trimmed.startsWith('/browser ')) {
       const options = ['/browser open https://'];
       return [options, line];
@@ -158,16 +175,16 @@ export class Autocompleter {
    */
   public renderHelp(): void {
     console.log('');
-    console.log(`  ${chalk.hex('#FF8C00').bold('⬡ Comandos Disponibles')}  ${chalk.gray('(/ + [Tab] para autocompletar)')}`);
-    console.log(`  ${chalk.gray('─'.repeat(50))}`);
+    console.log(`  ${chalk.hex('#FF8C00').bold('⬡ Comandos Disponibles')}  ${chalk.gray('(/ + [Tab] para autocompletar)')}`);
+    console.log(`  ${chalk.gray('─'.repeat(50))}`);
     for (const cmd of SLASH_COMMANDS) {
       const usage = cmd.usage ? `  ${chalk.gray(cmd.usage)}` : '';
       console.log(`  ${chalk.magenta(cmd.command.padEnd(16))} ${chalk.gray(cmd.description)}${usage}`);
     }
 
     console.log('');
-    console.log(`  ${chalk.hex('#FF8C00').bold('⬡ Prefijos Especiales')}`);
-    console.log(`  ${chalk.gray('─'.repeat(50))}`);
+    console.log(`  ${chalk.hex('#FF8C00').bold('⬡ Prefijos Especiales')}`);
+    console.log(`  ${chalk.gray('─'.repeat(50))}`);
     console.log(`  ${formatSkill('nombre')}            ${chalk.gray('Invoca una skill registrada')}`);
     console.log(`  ${formatMcp('herramienta')}       ${chalk.gray('Invoca herramientas MCP')}`);
     console.log('');

package/src/ui/browser-ascii.ts

@@ -0,0 +1,82 @@
+import jpeg from 'jpeg-js';
+
+const ASCII_RAMP = ' .:-=+*#%@';
+const MAX_FRAME_WIDTH = 76;
+const MAX_FRAME_HEIGHT = 34;
+const MAX_JPEG_BYTES = 560_000;
+
+export function grayscaleToAscii(
+  pixels: number[][],
+  width = MAX_FRAME_WIDTH,
+): string {
+  if (!pixels.length || !pixels[0]?.length) {
+    throw new Error('Browser frame has no pixels to render.');
+  }
+  const boundedWidth = Math.max(1, Math.min(MAX_FRAME_WIDTH, Math.floor(width)));
+  const sourceHeight = pixels.length;
+  const sourceWidth = pixels[0].length;
+  const outputHeight = Math.max(
+    1,
+    Math.min(MAX_FRAME_HEIGHT, Math.round((sourceHeight / sourceWidth) * boundedWidth * 0.5)),
+  );
+  const lines: string[] = [];
+
+  for (let y = 0; y < outputHeight; y += 1) {
+    const sourceY = Math.min(sourceHeight - 1, Math.floor((y / outputHeight) * sourceHeight));
+    let line = '';
+    for (let x = 0; x < boundedWidth; x += 1) {
+      const sourceX = Math.min(sourceWidth - 1, Math.floor((x / boundedWidth) * sourceWidth));
+      const value = Math.max(0, Math.min(255, pixels[sourceY][sourceX]));
+      const index = Math.round(((255 - value) / 255) * (ASCII_RAMP.length - 1));
+      line += ASCII_RAMP[index];
+    }
+    lines.push(line);
+  }
+  return lines.join('\n');
+}
+
+export function renderJpegAsAscii(base64: string, width = MAX_FRAME_WIDTH): string {
+  if (
+    typeof base64 !== 'string'
+    || !/^[A-Za-z0-9+/]+={0,2}$/.test(base64)
+    || base64.length > Math.ceil(MAX_JPEG_BYTES * 4 / 3)
+  ) {
+    throw new Error('Browser frame is not a valid, bounded Base64 JPEG.');
+  }
+  const bytes = Buffer.from(base64, 'base64');
+  if (bytes.length === 0 || bytes.length > MAX_JPEG_BYTES) {
+    throw new Error('Browser frame exceeds the supported JPEG size.');
+  }
+  const image = jpeg.decode(bytes, {
+    useTArray: true,
+    formatAsRGBA: true,
+    maxResolutionInMP: 4,
+    maxMemoryUsageInMB: 128,
+  });
+  const pixels: number[][] = [];
+  const outputWidth = Math.min(MAX_FRAME_WIDTH, image.width);
+  const outputHeight = Math.max(
+    1,
+    Math.min(
+      MAX_FRAME_HEIGHT,
+      Math.round((image.height / image.width) * outputWidth * 0.5),
+    ),
+  );
+
+  for (let y = 0; y < outputHeight; y += 1) {
+    const row: number[] = [];
+    const sourceY = Math.min(image.height - 1, Math.floor((y / outputHeight) * image.height));
+    for (let x = 0; x < outputWidth; x += 1) {
+      const sourceX = Math.min(image.width - 1, Math.floor((x / outputWidth) * image.width));
+      const offset = (sourceY * image.width + sourceX) * 4;
+      row.push(
+        image.data[offset] * 0.299
+        + image.data[offset + 1] * 0.587
+        + image.data[offset + 2] * 0.114,
+      );
+    }
+    pixels.push(row);
+  }
+
+  return grayscaleToAscii(pixels, Math.min(width, outputWidth));
+}

package/src/ui/repl.ts

@@ -1,4 +1,4 @@
-import readline from 'readline';
+import readline from 'readline';
 import chalk from 'chalk';
 import prompts from 'prompts';
 import { AgentClient } from '../client/agent-client';
@@ -24,9 +24,13 @@ import { handleCreateSkill, handleListSkills } from '../commands/skills';
 import { handleCreateMcp, handleListMcp, handleMcpDefaults } from '../commands/mcp';
 import { handleMicrophoneCommand } from '../commands/mic';
 import { handleBrowserCommand } from '../commands/browser';
+import { handleSubagentsCommand } from '../commands/subagents';
 import type { ConfirmationRequest } from '../client/types';
 import { formatTerminalMarkdown } from './markdown';
 import { handleCapabilities, handleProviders, handleSettings } from '../commands/diagnostics';
+import { renderJpegAsAscii } from './browser-ascii';
+import { handleModelCommand } from '../commands/model';
+import { handleMemoryCommand } from '../commands/memory';
 
 export interface ReplOptions {
   wsUrl: string;
@@ -47,6 +51,7 @@ export class HelixRepl {
   private activeTasksCount: number = 0;
   private isProcessingPrompt: boolean = false;
   private plain: boolean = false;
+  private browserLiveViewEnabled: boolean = false;
 
   constructor(private options: ReplOptions) {
     this.conversationId = `cli_conv_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`;
@@ -116,7 +121,7 @@ export class HelixRepl {
       this.waitingLogged = false;
       await this._syncSettings();
       await this.autocompleter.refreshSuggestions();
-      process.stdout.write(`\r\x1b[K${chalk.green('●')} ${chalk.greenBright.bold('Conectado al agente HELIX')}  \n`);
+      process.stdout.write(`\r\x1b[K${chalk.green('●')} ${chalk.greenBright.bold('Conectado al agente HELIX')}  \n`);
       this._promptUser();
     });
 
@@ -126,39 +131,39 @@ export class HelixRepl {
       }
       if (!this.waitingLogged) {
         this.waitingLogged = true;
-        console.log(`\n${RED('●')} ${chalk.yellowBright('Esperando al servicio del agente HELIX en ws://127.0.0.1:8765...')}`);
-        console.log(`${GRAY('  (Si no responde tras 3 reintentos, el CLI lo iniciará automáticamente en segundo plano)')}\n`);
+        console.log(`\n${RED('●')} ${chalk.yellowBright('Esperando al servicio del agente HELIX en ws://127.0.0.1:8765...')}`);
+        console.log(`${GRAY('  (Si no responde tras 3 reintentos, el CLI lo iniciará automáticamente en segundo plano)')}\n`);
       }
       this._promptUser();
     });
 
     this.client.on('auto_spawning_agent', () => {
-      process.stdout.write(`\n${CYAN_BOLD('⚙️')} ${chalk.hex('#FF9F1C').bold('[AUTO-START]:')} Iniciando el servicio del agente HELIX en segundo plano...\n`);
-      process.stdout.write(`${GRAY('  Por favor espere mientras termina de inicializarse (no se realizarán reintentos hasta que esté listo).')}\n`);
+      process.stdout.write(`\n${CYAN_BOLD('⚙️')} ${chalk.hex('#FF9F1C').bold('[AUTO-START]:')} Iniciando el servicio del agente HELIX en segundo plano...\n`);
+      process.stdout.write(`${GRAY('  Por favor espere mientras termina de inicializarse (no se realizarán reintentos hasta que esté listo).')}\n`);
     });
 
     this.client.on('agent_starting_progress', (data: { elapsedSec: number }) => {
-      process.stdout.write(`\r  ${chalk.hex('#FF9F1C')('⏳')} ${chalk.gray(`Inicializando subsistemas de HELIX en segundo plano... (${data.elapsedSec}s)`)}`);
+      process.stdout.write(`\r  ${chalk.hex('#FF9F1C')('⏳')} ${chalk.gray(`Inicializando subsistemas de HELIX en segundo plano... (${data.elapsedSec}s)`)}`);
     });
 
     this.client.on('agent_ready', () => {
-      process.stdout.write(`\r\x1b[K  ${chalk.green('✔')} ${chalk.greenBright('Servicio de HELIX listo. Conectando...')}\n\n`);
+      process.stdout.write(`\r\x1b[K  ${chalk.green('✔')} ${chalk.greenBright('Servicio de HELIX listo. Conectando...')}\n\n`);
     });
 
     this.client.on('agent_start_failed', (data: { error?: string }) => {
-      process.stdout.write(`\r\x1b[K\n  ${chalk.red('✖')} ${chalk.redBright('No se pudo iniciar el servicio automáticamente:')} ${chalk.gray(data?.error || 'Tiempo agotado')}\n`);
+      process.stdout.write(`\r\x1b[K\n  ${chalk.red('✖')} ${chalk.redBright('No se pudo iniciar el servicio automáticamente:')} ${chalk.gray(data?.error || 'Tiempo agotado')}\n`);
       this._promptUser();
     });
 
     // Voice Capture indicator
     this.client.on('voice_capture_started', () => {
       this.isCapturingVoice = true;
-      process.stdout.write(`\n${chalk.bgRed.white.bold(' 🎙️   [VOZ DETECTADA - HEY HELIX]: Capturando audio... ')}\n`);
+      process.stdout.write(`\n${chalk.bgRed.white.bold(' 🎙️   [VOZ DETECTADA - HEY HELIX]: Capturando audio... ')}\n`);
     });
 
     this.client.on('voice_capture_stopped', () => {
       this.isCapturingVoice = false;
-      process.stdout.write(`\n${chalk.bgCyan.black.bold(' 🔊 [AUDIO RECIBIDO]: Procesando voz... ')}\n`);
+      process.stdout.write(`\n${chalk.bgCyan.black.bold(' 🔊 [AUDIO RECIBIDO]: Procesando voz... ')}\n`);
       this._promptUser();
     });
 
@@ -166,7 +171,7 @@ export class HelixRepl {
     this.client.on('react_step', (step: { iteration?: number; role?: string }) => {
       const iter = step?.iteration ?? 1;
       const role = step?.role ? chalk.gray(` (${step.role})`) : '';
-      process.stdout.write(`\r  ${chalk.hex('#FF9F1C')('◆')} ${chalk.gray(`Paso ${iter}${role} — Razonando...`)}`);
+      process.stdout.write(`\r  ${chalk.hex('#FF9F1C')('◆')} ${chalk.gray(`Paso ${iter}${role} — Razonando...`)}`);
     });
 
     // Agent assistant message
@@ -185,13 +190,13 @@ export class HelixRepl {
 
       // Branded header
       console.log('');
-      console.log(`  ${chalk.hex('#FF8C00').bold('⬡ HELIX')}${modelBadge}`);
+      console.log(`  ${chalk.hex('#FF8C00').bold('⬡ HELIX')}${modelBadge}`);
 
       // Content with subtle left border and clean Markdown formatting
       const formatted = formatTerminalMarkdown(content, this.plain);
       const contentLines = formatted.trim().split('\n');
       for (const line of contentLines) {
-        console.log(`  ${chalk.gray('│')} ${line}`);
+        console.log(`  ${chalk.gray('│')} ${line}`);
       }
       console.log('');
 
@@ -210,16 +215,39 @@ export class HelixRepl {
         this.activeTaskId = task.task_id || null;
       }
     });
+
+    this.client.on('browser_frame', (payload: {
+      conversation_id?: string;
+      mime_type?: string;
+      image_base64?: string;
+    }) => {
+      if (
+        !this.browserLiveViewEnabled
+        || !payload?.conversation_id?.startsWith('cli_')
+        || payload.mime_type !== 'image/jpeg'
+        || typeof payload.image_base64 !== 'string'
+      ) {
+        return;
+      }
+      try {
+        process.stdout.write('\r\x1b[K');
+        console.log(`\n${CYAN_BOLD('  HELIX LIVE BROWSER')}`);
+        console.log(renderJpegAsAscii(payload.image_base64));
+        this._promptUser();
+      } catch (error) {
+        console.log(RED(`  No se pudo representar el cuadro del navegador: ${(error as Error).message}`));
+      }
+    });
   }
 
   private async _handleConfirmationDialog(req: ConfirmationRequest): Promise<void> {
-    console.log(`\n${YELLOW_BOLD('⚠️   CONFIRMACIÓN DE ACCIÓN REQUERIDA')}`);
-    console.log(`  Acción:      ${chalk.white.bold(req.action || req.tool || 'Acción del sistema')}`);
+    console.log(`\n${YELLOW_BOLD('⚠️   CONFIRMACIÓN DE ACCIÓN REQUERIDA')}`);
+    console.log(`  Acción:      ${chalk.white.bold(req.action || req.tool || 'Acción del sistema')}`);
     if (req.description) {
-      console.log(`  Descripción: ${DIM(req.description)}`);
+      console.log(`  Descripción: ${DIM(req.description)}`);
     }
     if (req.arguments && Object.keys(req.arguments).length > 0) {
-      console.log(`  Parámetros:  ${GRAY(JSON.stringify(req.arguments))}`);
+      console.log(`  Parámetros:  ${GRAY(JSON.stringify(req.arguments))}`);
     }
 
     this.rl?.pause();
@@ -227,17 +255,17 @@ export class HelixRepl {
       const answer = await prompts({
         type: 'confirm',
         name: 'confirmed',
-        message: '¿Permitir al agente ejecutar esta acción?',
+        message: '¿Permitir al agente ejecutar esta acción?',
         initial: true,
       });
 
       const reqId = req.request_id || req.id || '';
       if (answer && answer.confirmed) {
         this.client.confirmAction(reqId);
-        console.log(GREEN('  ✔ Acción confirmada.\n'));
+        console.log(GREEN('  ✔ Acción confirmada.\n'));
       } else {
         this.client.rejectAction(reqId);
-        console.log(RED('  ✖ Acción rechazada.\n'));
+        console.log(RED('  ✖ Acción rechazada.\n'));
       }
     } finally {
       if (process.stdin.isTTY && typeof process.stdin.setRawMode === 'function') {
@@ -269,7 +297,7 @@ export class HelixRepl {
     });
 
     rl.on('close', () => {
-      console.log(DIM('\nCerrando sesión de HELIX CLI...'));
+      console.log(DIM('\nCerrando sesión de HELIX CLI...'));
       this.client.close();
       process.exit(0);
     });
@@ -283,7 +311,7 @@ export class HelixRepl {
         this.activeTaskId = null;
         this._promptUser();
       } else {
-        console.log(DIM('\n¡Hasta pronto!'));
+        console.log(DIM('\n¡Hasta pronto!'));
         this.client.close();
         process.exit(0);
       }
@@ -294,7 +322,7 @@ export class HelixRepl {
 
   private _promptUser(): void {
     if (!this.rl) return;
-    const promptPrefix = `  ${chalk.hex('#FF8C00').bold('helix')} ${chalk.gray('❯')} `;
+    const promptPrefix = `  ${chalk.hex('#FF8C00').bold('helix')} ${chalk.gray('❯')} `;
     this.rl.setPrompt(promptPrefix);
     this.rl.prompt();
   }
@@ -306,7 +334,7 @@ export class HelixRepl {
     }
 
     if (this.client.isStarting) {
-      console.log(`\n  ${chalk.yellow('⚠️')}  ${chalk.yellowBright('El servicio de HELIX se está iniciando en segundo plano. Espera a que termine antes de enviar comandos o reintentar.')}\n`);
+      console.log(`\n  ${chalk.yellow('⚠️')}  ${chalk.yellowBright('El servicio de HELIX se está iniciando en segundo plano. Espera a que termine antes de enviar comandos o reintentar.')}\n`);
       this._promptUser();
       return;
     }
@@ -383,18 +411,48 @@ export class HelixRepl {
           break;
         }
 
-        case '/browser':
+        case '/browser': {
+          const browserArgs = args.trim().split(/\s+/);
+          if (browserArgs[0]?.toLowerCase() === 'live') {
+            const requestedState = browserArgs[1]?.toLowerCase();
+            if (requestedState && !['on', 'off'].includes(requestedState)) {
+              console.log(YELLOW('  Uso: /browser live [on|off]\n'));
+              break;
+            }
+            this.browserLiveViewEnabled = requestedState
+              ? requestedState === 'on'
+              : !this.browserLiveViewEnabled;
+            console.log(
+              this.browserLiveViewEnabled
+                ? GREEN('  Vista ASCII del navegador activada.\n')
+                : YELLOW('  Vista ASCII del navegador desactivada.\n'),
+            );
+            break;
+          }
           await handleBrowserCommand(this.client, args);
           break;
+        }
+
+        case '/subagents':
+          await handleSubagentsCommand(this.client, args);
+          break;
 
         case '/tasks':
           await this._handleListTasks();
           break;
 
+        case '/model':
+          await handleModelCommand(this.client, args);
+          break;
+
         case '/models':
           await this._handleListModels();
           break;
 
+        case '/memory':
+          await handleMemoryCommand(this.client, args);
+          break;
+
         case '/status':
           await this._handleStatus();
           break;
@@ -416,7 +474,7 @@ export class HelixRepl {
           this.client.emergencyStop();
           this.isProcessingPrompt = false;
           this.activeTaskId = null;
-          console.log(GREEN('✔ Todas las tareas han sido detenidas.\n'));
+          console.log(GREEN('✔ Todas las tareas han sido detenidas.\n'));
           break;
 
         case '/exit':
@@ -436,7 +494,7 @@ export class HelixRepl {
 
     // --- Direct chat message / @skill / #mcp ---
     if (!this.client.connected) {
-      console.log(YELLOW('⚠ El agente no está conectado actualmente. Intentando enviar de todos modos...'));
+      console.log(YELLOW('⚠ El agente no está conectado actualmente. Intentando enviar de todos modos...'));
     }
 
     // Highlight skills in strong orange (#FF8C00) and mcps in cyan
@@ -448,8 +506,8 @@ export class HelixRepl {
     this.isProcessingPrompt = true;
     this.activeTasksCount++;
 
-    process.stdout.write(`  ${chalk.gray('→')} ${formattedEcho}\n`);
-    process.stdout.write(`  ${chalk.hex('#FF9F1C')('◆')} ${chalk.gray('Procesando...')}`);
+    process.stdout.write(`  ${chalk.gray('→')} ${formattedEcho}\n`);
+    process.stdout.write(`  ${chalk.hex('#FF9F1C')('â—†')} ${chalk.gray('Procesando...')}`);
 
     const sent = this.client.sendUserText(
       line,
@@ -459,7 +517,7 @@ export class HelixRepl {
 
     if (!sent) {
       process.stdout.write('\r\x1b[K');
-      console.log(RED('✖ Error: No se pudo enviar el mensaje (WebSocket desconectado).'));
+      console.log(RED('✖ Error: No se pudo enviar el mensaje (WebSocket desconectado).'));
       this.isProcessingPrompt = false;
       this.activeTasksCount = Math.max(0, this.activeTasksCount - 1);
       this._promptUser();
@@ -469,7 +527,7 @@ export class HelixRepl {
   private async _handleListTasks(): Promise<void> {
     try {
       const tasks = await this.client.getTasks();
-      console.log(`\n${BOLD('📋 Tareas Registradas en HELIX:')}\n`);
+      console.log(`\n${BOLD('📋 Tareas Registradas en HELIX:')}\n`);
       if (!tasks || tasks.length === 0) {
         console.log(GRAY('  No hay tareas recientes registradas.\n'));
         return;
@@ -477,10 +535,10 @@ export class HelixRepl {
 
       for (const t of tasks.slice(-10)) {
         let statusBadge = chalk.gray(t.status);
-        if (t.status === 'COMPLETED') statusBadge = chalk.green('✔ Completada');
-        if (t.status === 'RUNNING') statusBadge = chalk.yellow('⏳ En ejecución');
-        if (t.status === 'FAILED') statusBadge = chalk.red('✖ Fallida');
-        if (t.status === 'CANCELLED') statusBadge = chalk.gray('○ Cancelada');
+        if (t.status === 'COMPLETED') statusBadge = chalk.green('✔ Completada');
+        if (t.status === 'RUNNING') statusBadge = chalk.yellow('⏳ En ejecución');
+        if (t.status === 'FAILED') statusBadge = chalk.red('✖ Fallida');
+        if (t.status === 'CANCELLED') statusBadge = chalk.gray('â—‹ Cancelada');
 
         console.log(`  ${statusBadge} ${DIM(t.task_id)}`);
         if (t.prompt) console.log(`    ${chalk.white(t.prompt)}`);
@@ -494,14 +552,14 @@ export class HelixRepl {
   private async _handleListModels(): Promise<void> {
     try {
       const models = await this.client.getModels();
-      console.log(`\n${BOLD('🧠 Modelos Disponibles en Proveedores Configurados:')}\n`);
+      console.log(`\n${BOLD('🧠 Modelos Disponibles en Proveedores Configurados:')}\n`);
       if (!models || models.length === 0) {
         console.log(GRAY('  No hay modelos disponibles. Configura tus API Keys con /config-apikey.\n'));
         return;
       }
 
       for (const m of models) {
-        console.log(`  ${CYAN('•')} ${chalk.bold(m.id)} ${DIM(`[${m.provider}]`)}`);
+        console.log(`  ${CYAN('•')} ${chalk.bold(m.id)} ${DIM(`[${m.provider}]`)}`);
       }
       console.log('');
     } catch (err) {
@@ -511,11 +569,11 @@ export class HelixRepl {
 
   private async _handleStatus(): Promise<void> {
     console.log('');
-    console.log(`  ${chalk.hex('#FF8C00').bold('⬡ Estado del Sistema')}`);
-    console.log(`  ${chalk.gray('─'.repeat(40))}`);
-    console.log(`  ${chalk.gray('Agente WS')}     ${this.client.connected ? chalk.green('● Conectado') : chalk.red('● Desconectado')} ${chalk.gray(this.client.url)}`);
-    console.log(`  ${chalk.gray('Micrófono')}     ${this.voiceEnabled ? chalk.green('● Activo') + chalk.gray(' (hey helix)') : chalk.red('● Inactivo')}`);
-    console.log(`  ${chalk.gray('Conversación')}  ${chalk.gray(this.conversationId)} ${chalk.gray(`(${this.conversationHistory.length} msgs)`)}`);
+    console.log(`  ${chalk.hex('#FF8C00').bold('⬡ Estado del Sistema')}`);
+    console.log(`  ${chalk.gray('─'.repeat(40))}`);
+    console.log(`  ${chalk.gray('Agente WS')}     ${this.client.connected ? chalk.green('● Conectado') : chalk.red('● Desconectado')} ${chalk.gray(this.client.url)}`);
+    console.log(`  ${chalk.gray('Micrófono')}     ${this.voiceEnabled ? chalk.green('● Activo') + chalk.gray(' (hey helix)') : chalk.red('● Inactivo')}`);
+    console.log(`  ${chalk.gray('Conversación')}  ${chalk.gray(this.conversationId)} ${chalk.gray(`(${this.conversationHistory.length} msgs)`)}`);
     console.log(`  ${chalk.gray('Skills')}        ${chalk.hex('#FF8C00').bold(this.autocompleter.getSkills().length.toString())} registradas`);
     console.log(`  ${chalk.gray('MCP Tools')}     ${chalk.cyan.bold(this.autocompleter.getMcpTools().length.toString())} disponibles`);
     console.log('');

package/tests/cli.test.ts

@@ -7,6 +7,9 @@ import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
 import { discoverUserSkillNames } from '../src/skills/user-skill-discovery';
+import { renderSubagentPanel } from '../src/commands/subagents';
+import { grayscaleToAscii, renderJpegAsAscii } from '../src/ui/browser-ascii';
+import jpeg from 'jpeg-js';
 
 test('Autocompleter suggests slash commands', () => {
   const completer = new Autocompleter();
@@ -18,6 +21,7 @@ test('Autocompleter suggests slash commands', () => {
   assert.ok(completions.includes('/mcp'));
   assert.ok(completions.includes('/create-mcp'));
   assert.ok(completions.includes('/browser'));
+  assert.ok(completions.includes('/subagents'));
   assert.ok(completions.includes('/config-apikey'));
   assert.ok(completions.includes('/show-apikey'));
   assert.ok(completions.includes('/microphone'));
@@ -28,6 +32,43 @@ test('Autocompleter suggests slash commands', () => {
   assert.ok(completions.includes('/clear'));
 });
 
+test('Subagent panel renders ASCII rows with current status and action', () => {
+  const panel = renderSubagentPanel(
+    [{ profile_id: 'flowbot', name: 'Flowbot', role: 'Browser automation' }],
+    [{
+      profile_id: 'flowbot',
+      status: 'running',
+      progress: 50,
+      current_action: 'Opening browser',
+    }],
+  );
+
+  assert.ok(panel.includes('+'));
+  assert.ok(panel.includes('flowbot'));
+  assert.ok(panel.includes('Flowbot'));
+  assert.ok(panel.includes('RUNNING'));
+  assert.ok(panel.includes('50%'));
+  assert.ok(panel.includes('Opening browser'));
+});
+
+test('Browser image renderer maps grayscale to a bounded ASCII frame', () => {
+  assert.equal(
+    grayscaleToAscii([[0, 255], [0, 255], [128, 64], [128, 64]], 2),
+    '@ \n=#',
+  );
+});
+
+test('Browser image renderer decodes JPEG frames and rejects invalid payloads', () => {
+  const image = jpeg.encode({
+    data: Buffer.from([255, 255, 255, 255]),
+    width: 1,
+    height: 1,
+  }, 80);
+
+  assert.equal(renderJpegAsAscii(image.data.toString('base64'), 1), ' ');
+  assert.throws(() => renderJpegAsAscii('not-a-jpeg'), /valid, bounded Base64 JPEG/);
+});
+
 test('Autocompleter filters slash commands by prefix', () => {
   const completer = new Autocompleter();
 

package/tsconfig.json

@@ -1,4 +1,4 @@
-{
+{
   "compilerOptions": {
     "target": "ES2022",
     "module": "commonjs",
@@ -9,11 +9,11 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    // @ts-ignore - node is deprecated but required for CommonJS compatibility with current dependencies
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "declaration": true
+    "declaration": true,
+    "types": ["node", "ws"]
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]
-}
+}