helix-assistant-cli 0.0.0-stage → 0.2.4

package/src/ui/autocomplete.ts

@@ -0,0 +1,153 @@
+import chalk from 'chalk';
+import type { AgentClient } from '../client/agent-client';
+import { formatSkill, formatMcp, ORANGE, CYAN, MAGENTA, DIM } from './colors';
+
+export interface CommandDefinition {
+  command: string;
+  description: string;
+  usage?: string;
+}
+
+export const SLASH_COMMANDS: CommandDefinition[] = [
+  { command: '/create-skill', description: 'Crear una nueva skill interactiva para HELIX' },
+  { command: '/skill', description: 'Listar o inspeccionar skills registradas', usage: '/skill [nombre]' },
+  { command: '/mcp', description: 'Listar servidores MCP y sus herramientas' },
+  { 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: '/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: '/tasks', description: 'Ver tareas activas y recientes del agente' },
+  { command: '/models', description: 'Listar modelos disponibles de proveedores configurados' },
+  { command: '/status', description: 'Mostrar resumen del estado del sistema' },
+  { 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' },
+  { command: '/exit', description: 'Salir del CLI' },
+];
+
+export class Autocompleter {
+  private skills: string[] = [];
+  private mcpTools: string[] = [];
+
+  constructor(private client?: AgentClient) {}
+
+  public async refreshSuggestions(): Promise<void> {
+    if (!this.client || !this.client.connected) return;
+    try {
+      const skills = await this.client.getSkills();
+      if (skills) {
+        this.skills = skills.map((s) => s.name);
+      }
+    } catch {
+      // Ignored if client is offline
+    }
+
+    try {
+      const servers = await this.client.getMcpServers();
+      if (servers) {
+        const tools: string[] = [];
+        for (const s of servers) {
+          tools.push(s.name);
+          if (s.tools) {
+            for (const t of s.tools) {
+              tools.push(`${s.name}_${t.name}`);
+            }
+          }
+        }
+        this.mcpTools = tools;
+      }
+    } catch {
+      // Ignored
+    }
+  }
+
+  public getSkills(): string[] {
+    return this.skills;
+  }
+
+  public getMcpTools(): string[] {
+    return this.mcpTools;
+  }
+
+  /**
+   * Completer function matching readline specification:
+   * (line: string) => [string[], string]
+   */
+  public completer(line: string): [string[], string] {
+    const trimmed = line.trimStart();
+
+    // 1. Skill sub-arguments for /skill <name>
+    if (trimmed.startsWith('/skill ')) {
+      const arg = trimmed.slice('/skill '.length).toLowerCase();
+      const hits = this.skills
+        .filter((s) => s.toLowerCase().startsWith(arg))
+        .map((s) => `/skill ${s}`);
+      return [hits.length ? hits : this.skills.map((s) => `/skill ${s}`), line];
+    }
+
+    // 2. Microphone sub-arguments
+    if (trimmed.startsWith('/microphone ')) {
+      const arg = trimmed.slice('/microphone '.length).toLowerCase();
+      const options = ['/microphone enable', '/microphone disable'];
+      const hits = options.filter((o) => o.toLowerCase().startsWith(trimmed.toLowerCase()));
+      return [hits.length ? hits : options, line];
+    }
+
+    // 3. Browser sub-arguments
+    if (trimmed.startsWith('/browser ')) {
+      const options = ['/browser open https://'];
+      return [options, line];
+    }
+
+    // 4. Slash command autocompletion
+    if (trimmed.startsWith('/')) {
+      const hits = SLASH_COMMANDS
+        .map((c) => c.command)
+        .filter((c) => c.toLowerCase().startsWith(trimmed.toLowerCase()));
+      return [hits.length ? hits : SLASH_COMMANDS.map((c) => c.command), line];
+    }
+
+    // 5. In-line @skill mention autocompletion
+    const lastAtMatch = /(?:^|\s)(@)([a-zA-Z0-9_-]*)$/.exec(line);
+    if (lastAtMatch) {
+      const prefix = line.slice(0, line.length - lastAtMatch[2].length);
+      const query = lastAtMatch[2].toLowerCase();
+      const matches = this.skills.filter((s) => s.toLowerCase().startsWith(query));
+      const hits = (matches.length ? matches : this.skills).map((s) => `${prefix}${s} `);
+      return [hits, line];
+    }
+
+    // 6. In-line #mcp mention autocompletion
+    const lastHashMatch = /(?:^|\s)(#)([a-zA-Z0-9_-]*)$/.exec(line);
+    if (lastHashMatch) {
+      const prefix = line.slice(0, line.length - lastHashMatch[2].length);
+      const query = lastHashMatch[2].toLowerCase();
+      const matches = this.mcpTools.filter((t) => t.toLowerCase().startsWith(query));
+      const hits = (matches.length ? matches : this.mcpTools).map((t) => `${prefix}${t} `);
+      return [hits, line];
+    }
+
+    return [[], line];
+  }
+
+  /**
+   * Formats the list of commands for display.
+   */
+  public renderHelp(): void {
+    console.log('');
+    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(`  ${formatSkill('nombre')}            ${chalk.gray('Invoca una skill registrada')}`);
+    console.log(`  ${formatMcp('herramienta')}       ${chalk.gray('Invoca herramientas MCP')}`);
+    console.log('');
+  }
+}

package/src/ui/banner.ts

@@ -0,0 +1,85 @@
+import chalk from 'chalk';
+import { ORANGE, CYAN, GREEN, RED, YELLOW, GRAY, BOLD, DIM } from './colors';
+
+export interface BannerStatusOptions {
+  connected: boolean;
+  wsUrl: string;
+  voiceEnabled: boolean;
+  isCapturingVoice?: boolean;
+  currentModel?: string | null;
+  activeTasksCount?: number;
+}
+
+// Exact bash logo with ANSI RGB codes - DO NOT MODIFY
+export function getAsciiLogo(terminalWidth: number = 80): string {
+  const lines = [
+    '   \x1b[48;2;255;227;143m\x1b[38;2;255;255;255m▀\x1b[49m\x1b[38;2;255;227;143m█   \x1b[48;2;255;227;143m\x1b[38;2;255;255;255m▀\x1b[49m\x1b[38;2;255;227;143m█\x1b[0m',
+    '   \x1b[38;2;255;210;77m██   ██       \x1b[38;2;255;255;255m██████  ██      ██  ██    ██\x1b[0m',
+    '\x1b[38;2;255;215;119m██ \x1b[38;2;255;191;31m██   ██ \x1b[38;2;255;215;119m██    \x1b[38;2;246;246;246m██      ██      ██   ██  ██\x1b[0m',
+    '\x1b[38;2;255;191;36m██ \x1b[38;2;255;171;10m███\x1b[48;2;255;171;10m\x1b[38;2;255;255;255m▀\x1b[49m\x1b[38;2;255;171;10m███ \x1b[38;2;255;191;36m██    \x1b[38;2;236;236;236m████    ██      ██     ██\x1b[0m',
+    '\x1b[38;2;255;160;18m██ \x1b[38;2;255;145;20m███████ \x1b[38;2;255;160;18m██    \x1b[38;2;226;226;226m██      ██      ██   ██  ██\x1b[0m',
+    '\x1b[38;2;255;127;26m██ \x1b[38;2;255;122;26m██   ██ \x1b[38;2;255;127;26m██    \x1b[38;2;216;216;216m██████  ██████  ██  ██    ██\x1b[0m',
+    '\x1b[38;2;240;98;15m██ \x1b[38;2;255;95;18m██   ██ \x1b[38;2;240;98;15m██\x1b[0m',
+    '   \x1b[38;2;220;74;12m██   ██\x1b[0m'
+  ];
+  const visibleWidth = 62;
+  const leftPad = Math.max(0, Math.floor((terminalWidth - visibleWidth) / 2));
+  const padding = ' '.repeat(leftPad);
+  return lines.map(line => padding + line).join('\n');
+}
+
+export function getStatusBar(options: BannerStatusOptions): string {
+  const conn = options.connected
+    ? `${chalk.green('●')} ${chalk.greenBright.bold('CONECTADO')} ${chalk.gray(options.wsUrl)}`
+    : `${chalk.red('●')} ${chalk.redBright.bold('DESCONECTADO')} ${chalk.gray(options.wsUrl)}`;
+  let mic: string;
+  if (options.isCapturingVoice) {
+    mic = chalk.bgRed.white.bold(' 🎙️ CAPTURANDO ');
+  } else if (options.voiceEnabled) {
+    mic = `${chalk.green('●')} ${chalk.white('Mic')} ${chalk.gray('"hey helix"')}`;
+  } else {
+    mic = `${chalk.red('●')} ${chalk.gray('Mic Off')}`;
+  }
+  const model = options.currentModel
+    ? `${chalk.hex('#FF9F1C')('⚡')} ${chalk.white(options.currentModel)}`
+    : `${chalk.hex('#FF9F1C')('⚡')} ${chalk.white('Local ReAct')}`;
+  const tasks = (options.activeTasksCount ?? 0) > 0
+    ? `  ${chalk.yellow('⏳')} ${chalk.yellowBright(String(options.activeTasksCount))}`
+    : '';
+  const sep = chalk.gray(' │ ');
+  return `  ${conn}${sep}${mic}${sep}${model}${tasks}`;
+}
+
+export function renderHeader(options: BannerStatusOptions, clearScreen: boolean = false): void {
+  if (clearScreen) {
+    process.stdout.write('\x1bc');
+  }
+  const width = process.stdout.columns || 80;
+  const logo = getAsciiLogo(width);
+  const tagline = 'Persistent AI Desktop Agent';
+  const tagPad = Math.max(0, Math.floor((width - tagline.length - 8) / 2));
+  const subtitle = ' '.repeat(tagPad) + chalk.gray('╶───') + ' ' + chalk.hex('#FF9F1C')(tagline) + ' ' + chalk.gray('───╴');
+  const statusBar = getStatusBar(options);
+  const thinLine = chalk.gray('─'.repeat(width));
+  console.log('');
+  console.log(logo);
+  console.log('');
+  console.log(subtitle);
+  console.log('');
+  console.log(thinLine);
+  console.log(statusBar);
+  console.log(thinLine);
+  console.log(`  ${chalk.hex('#FF8C00')('@skill')} ${chalk.gray('Skills')}  ${chalk.gray('│')}  ${chalk.cyan('#mcp')} ${chalk.gray('Herramientas')}  ${chalk.gray('│')}  ${chalk.magenta('/help')} ${chalk.gray('Comandos')}`);
+  console.log(thinLine);
+  console.log('');
+}
+
+export function getVoiceIndicator(isCapturing: boolean, voiceEnabled: boolean): string {
+  if (isCapturing) return chalk.bgRed.white.bold(' 🎙️  VOZ DETECTADA [HEY HELIX] 🔊 ');
+  if (voiceEnabled) return chalk.green('🟢 [Mic Activo]');
+  return chalk.red('🔴 [Mic Inactivo]');
+}
+
+export const HELIX_LOGO_ASCII = getAsciiLogo;
+export const HELIX_BIG_ART = getAsciiLogo;
+export const HELIX_HARD_BLOCKS = getAsciiLogo;

package/src/ui/chat.ts

@@ -0,0 +1 @@
+export { HelixRepl, type ReplOptions } from './repl';

package/src/ui/colors.ts

@@ -0,0 +1,70 @@
+import chalk from 'chalk';
+
+export const customChalk = new chalk.Instance({ level: 3 });
+
+// Brand colors
+export const ORANGE = customChalk.hex('#FF8C00');
+export const ORANGE_BOLD = customChalk.hex('#FF8C00').bold;
+export const ORANGE_BG = customChalk.bgHex('#FF8C00').black.bold;
+
+export const CYAN = customChalk.cyan;
+export const CYAN_BOLD = customChalk.cyan.bold;
+export const MAGENTA = customChalk.magenta;
+export const MAGENTA_BOLD = customChalk.magenta.bold;
+export const GREEN = customChalk.green;
+export const GREEN_BOLD = customChalk.green.bold;
+export const RED = customChalk.red;
+export const RED_BOLD = customChalk.red.bold;
+export const YELLOW = customChalk.yellow;
+export const YELLOW_BOLD = customChalk.yellow.bold;
+export const GRAY = customChalk.gray;
+export const BOLD = customChalk.bold;
+export const DIM = customChalk.dim;
+
+/**
+ * Highlights skill names with strong orange (#FF8C00).
+ */
+export function formatSkill(name: string): string {
+  const clean = name.startsWith('@') ? name : `@${name}`;
+  return ORANGE_BOLD(clean);
+}
+
+/**
+ * Highlights MCP tool/server names.
+ */
+export function formatMcp(name: string): string {
+  const clean = name.startsWith('#') ? name : `#${name}`;
+  return CYAN_BOLD(clean);
+}
+
+/**
+ * Highlights slash commands.
+ */
+export function formatCommand(cmd: string): string {
+  const clean = cmd.startsWith('/') ? cmd : `/${cmd}`;
+  return MAGENTA_BOLD(clean);
+}
+
+/**
+ * Formats user input text highlighting @skills in orange and #mcps in cyan.
+ */
+export function highlightMentions(text: string, knownSkills: string[] = []): string {
+  let result = text;
+  
+  // Highlight @skill in orange
+  result = result.replace(/(^|\s)(@[a-zA-Z0-9_-]+)/g, (_match, prefix, mention) => {
+    return `${prefix}${ORANGE_BOLD(mention)}`;
+  });
+
+  // Highlight #mcp in cyan
+  result = result.replace(/(^|\s)(#[a-zA-Z0-9_-]+)/g, (_match, prefix, mention) => {
+    return `${prefix}${CYAN_BOLD(mention)}`;
+  });
+
+  // Highlight /commands in magenta
+  result = result.replace(/(^|\s)(\/[a-zA-Z0-9_-]+)/g, (_match, prefix, mention) => {
+    return `${prefix}${MAGENTA_BOLD(mention)}`;
+  });
+
+  return result;
+}