@saulwade/swl-ses 1.5.2 → 1.6.0

package/scripts/tui/lib/render.js

@@ -0,0 +1,264 @@
+'use strict';
+
+/**
+ * Primitivas de render para la TUI custom de swl-ses.
+ * Zero-deps. Solo escape codes ANSI estándar + readline para keypress.
+ *
+ * Modelo:
+ *   - `iniciarModoTui()` entra al alternate screen buffer, oculta cursor.
+ *   - `salirModoTui()` restaura el buffer principal y muestra el cursor.
+ *   - Cada pantalla llama `limpiarPantalla()` y dibuja desde (1,1).
+ *   - Las coordenadas son 1-based (compatibilidad con escape codes ANSI).
+ *
+ * Diseño defensivo:
+ *   - Si stdout no es TTY (CI, pipe), todas las funciones de cursor son no-op
+ *     y los dibujos se reducen a console.log lineal.
+ *   - Capturar SIGINT y exit para garantizar salirModoTui() siempre.
+ */
+
+const { colores, borde, iconos } = require('./colores');
+
+const ES_TTY = !!process.stdout.isTTY;
+
+// ---------------------------------------------------------------------------
+// Control del terminal
+// ---------------------------------------------------------------------------
+
+let modoTuiActivo = false;
+let limpiezaRegistrada = false;
+
+function iniciarModoTui() {
+  if (modoTuiActivo || !ES_TTY) return;
+  modoTuiActivo = true;
+
+  // Alternate screen buffer: preserva el contenido del terminal pre-TUI
+  process.stdout.write('\x1b[?1049h');
+  // Ocultar cursor
+  process.stdout.write('\x1b[?25l');
+  // Limpiar
+  process.stdout.write('\x1b[2J\x1b[H');
+
+  // Registrar limpieza al salir (idempotente)
+  if (!limpiezaRegistrada) {
+    limpiezaRegistrada = true;
+    const limpieza = () => salirModoTui();
+    process.once('exit', limpieza);
+    process.once('SIGINT', () => { salirModoTui(); process.exit(130); });
+    process.once('SIGTERM', () => { salirModoTui(); process.exit(143); });
+  }
+}
+
+function salirModoTui() {
+  if (!modoTuiActivo || !ES_TTY) return;
+  modoTuiActivo = false;
+
+  // Mostrar cursor
+  process.stdout.write('\x1b[?25h');
+  // Salir del alternate screen buffer (restaura contenido pre-TUI)
+  process.stdout.write('\x1b[?1049l');
+}
+
+function estaActivo() {
+  return modoTuiActivo;
+}
+
+// ---------------------------------------------------------------------------
+// Movimiento de cursor
+// ---------------------------------------------------------------------------
+
+function moverCursor(fila, col) {
+  if (!ES_TTY) return;
+  process.stdout.write(`\x1b[${fila};${col}H`);
+}
+
+function limpiarPantalla() {
+  if (!ES_TTY) return;
+  process.stdout.write('\x1b[2J\x1b[H');
+}
+
+function limpiarLinea() {
+  if (!ES_TTY) return;
+  process.stdout.write('\x1b[2K\r');
+}
+
+function obtenerDimensiones() {
+  return {
+    cols: process.stdout.columns || 80,
+    rows: process.stdout.rows || 24,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Escritura posicionada
+// ---------------------------------------------------------------------------
+
+/**
+ * Escribe texto en una posición específica de la pantalla. El texto
+ * puede contener escape codes ANSI (colores) — no se cuentan en la longitud.
+ */
+function escribirEn(fila, col, texto) {
+  moverCursor(fila, col);
+  process.stdout.write(texto);
+}
+
+/**
+ * Cuenta la longitud visual de un string ignorando códigos ANSI.
+ * Útil para centrar/alinear texto con color sin distorsionar el cálculo.
+ */
+function anchoVisual(texto) {
+  return String(texto).replace(/\x1b\[[0-9;]*m/g, '').length;
+}
+
+/**
+ * Recorta un string a `maxAncho` caracteres visuales preservando códigos ANSI.
+ * Si excede, agrega '…' al final.
+ */
+function recortar(texto, maxAncho) {
+  const s = String(texto);
+  if (anchoVisual(s) <= maxAncho) return s;
+
+  // Conservar códigos ANSI mientras se cuentan solo caracteres visibles
+  let resultado = '';
+  let ancho = 0;
+  let i = 0;
+  while (i < s.length && ancho < maxAncho - 1) {
+    if (s[i] === '\x1b' && s[i + 1] === '[') {
+      // copiar el escape code completo sin contar
+      const finCode = s.indexOf('m', i);
+      if (finCode === -1) break;
+      resultado += s.slice(i, finCode + 1);
+      i = finCode + 1;
+    } else {
+      resultado += s[i];
+      ancho++;
+      i++;
+    }
+  }
+  return resultado + '…\x1b[0m';
+}
+
+/**
+ * Rellena un string a `ancho` caracteres visuales con espacios a la derecha.
+ */
+function rellenarDer(texto, ancho) {
+  const diff = ancho - anchoVisual(texto);
+  return diff > 0 ? String(texto) + ' '.repeat(diff) : recortar(texto, ancho);
+}
+
+/**
+ * Centra un string en `ancho` caracteres visuales.
+ */
+function centrar(texto, ancho) {
+  const sobra = ancho - anchoVisual(texto);
+  if (sobra <= 0) return recortar(texto, ancho);
+  const izq = Math.floor(sobra / 2);
+  const der = sobra - izq;
+  return ' '.repeat(izq) + texto + ' '.repeat(der);
+}
+
+// ---------------------------------------------------------------------------
+// Cajas y paneles
+// ---------------------------------------------------------------------------
+
+/**
+ * Dibuja una caja con borde rounded en (fila, col) con ancho y alto dados.
+ * Opciones:
+ *   - titulo: string opcional centrado en la línea superior
+ *   - color: función de color a aplicar al borde
+ *   - doble: usar borde doble (═║) en lugar de rounded (─│)
+ *   - resaltado: invertir colores del borde (para indicar foco)
+ */
+function dibujarCaja(fila, col, ancho, alto, opts = {}) {
+  if (!ES_TTY) return;
+  if (ancho < 2 || alto < 2) return;
+
+  const c = opts.color || colores.gris;
+  const b = opts.doble ? {
+    esqSI: borde.dbEsqSupIzq, esqSD: borde.dbEsqSupDer,
+    esqII: borde.dbEsqInfIzq, esqID: borde.dbEsqInfDer,
+    h: borde.dbHorizontal,    v: borde.dbVertical,
+  } : {
+    esqSI: borde.esquinaSupIzq, esqSD: borde.esquinaSupDer,
+    esqII: borde.esquinaInfIzq, esqID: borde.esquinaInfDer,
+    h: borde.horizontal,        v: borde.vertical,
+  };
+
+  // Línea superior con título opcional
+  let lineaSup;
+  if (opts.titulo) {
+    const tituloRecortado = recortar(opts.titulo, ancho - 4);
+    const anchoTitulo = anchoVisual(tituloRecortado);
+    const izq = b.h.repeat(2);
+    const der = b.h.repeat(Math.max(0, ancho - 4 - anchoTitulo));
+    lineaSup = c(b.esqSI + izq) + ' ' + tituloRecortado + ' ' + c(der + b.esqSD);
+  } else {
+    lineaSup = c(b.esqSI + b.h.repeat(ancho - 2) + b.esqSD);
+  }
+  escribirEn(fila, col, lineaSup);
+
+  // Laterales
+  for (let f = fila + 1; f < fila + alto - 1; f++) {
+    escribirEn(f, col, c(b.v));
+    escribirEn(f, col + ancho - 1, c(b.v));
+  }
+
+  // Línea inferior
+  escribirEn(fila + alto - 1, col, c(b.esqII + b.h.repeat(ancho - 2) + b.esqID));
+}
+
+/**
+ * Dibuja una barra horizontal de progreso en (fila, col) con ancho dado.
+ * Porcentaje entre 0 y 1. Estilo: [████░░░░░░] 42%
+ */
+function dibujarBarra(fila, col, ancho, porcentaje, opts = {}) {
+  const pct = Math.max(0, Math.min(1, porcentaje));
+  const lleno = opts.charLleno || '█';
+  const vacio = opts.charVacio || '░';
+  const colorLleno = opts.colorLleno || colores.verde;
+  const colorVacio = opts.colorVacio || colores.dim;
+
+  const anchoBarra = ancho - 7; // reservar espacio para " 100%"
+  const llenoN = Math.round(pct * anchoBarra);
+  const vacioN = anchoBarra - llenoN;
+
+  const barra = colorLleno(lleno.repeat(llenoN)) + colorVacio(vacio.repeat(vacioN));
+  const pctStr = String(Math.round(pct * 100)).padStart(3) + '%';
+
+  escribirEn(fila, col, barra + ' ' + colores.dim(pctStr));
+}
+
+/**
+ * Dibuja una línea de pie (footer hint) con atajos de teclado.
+ * Ejemplo: "↑↓ navegar · Enter elegir · Esc salir"
+ */
+function dibujarPiePagina(atajos) {
+  const { rows, cols } = obtenerDimensiones();
+  const sep = colores.dim(' · ');
+  const linea = atajos
+    .map(([tecla, accion]) => `${colores.cyan(tecla)} ${colores.dim(accion)}`)
+    .join(sep);
+  escribirEn(rows, 1, ' ' + recortar(linea, cols - 2));
+}
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+module.exports = {
+  ES_TTY,
+  iniciarModoTui,
+  salirModoTui,
+  estaActivo,
+  moverCursor,
+  limpiarPantalla,
+  limpiarLinea,
+  obtenerDimensiones,
+  escribirEn,
+  anchoVisual,
+  recortar,
+  rellenarDer,
+  centrar,
+  dibujarCaja,
+  dibujarBarra,
+  dibujarPiePagina,
+};

package/scripts/tui/lib/teclas.js

@@ -0,0 +1,113 @@
+'use strict';
+
+/**
+ * Handler unificado de keypress para la TUI de swl-ses.
+ * Zero-deps. Usa readline.emitKeypressEvents para parsear secuencias ANSI.
+ *
+ * Modelo de uso:
+ *
+ *   const teclado = crearTeclado();
+ *   teclado.on('up',     () => cursor--);
+ *   teclado.on('down',   () => cursor++);
+ *   teclado.on('return', () => resolver());
+ *   teclado.on('escape', () => cancelar());
+ *   teclado.activar();
+ *   // ... eventualmente
+ *   teclado.desactivar();
+ *
+ * Maneja:
+ *   - Flechas (up/down/left/right)
+ *   - vim-keys (h/j/k/l) opcional
+ *   - Espacio, return, escape, tab
+ *   - Ctrl+C (re-emite como 'escape' por default; se puede sobrescribir)
+ *   - Teclas alfanuméricas como caracteres (con `keypress` evento)
+ */
+
+const readline = require('readline');
+
+function crearTeclado(opciones = {}) {
+  const aliasVim = opciones.vim !== false; // por default soporta h/j/k/l
+  const handlers = new Map();
+  let activo = false;
+  let modoAnterior = null;
+
+  function _resolverNombre(key, str) {
+    if (!key) return null;
+    if (key.ctrl && key.name === 'c') return 'escape'; // Ctrl+C → escape
+    if (key.name) return key.name;
+    return null;
+  }
+
+  function onKeypress(str, key) {
+    if (!activo) return;
+
+    const nombre = _resolverNombre(key, str);
+    if (!nombre) return;
+
+    // Alias vim
+    let normalizado = nombre;
+    if (aliasVim) {
+      if (nombre === 'k') normalizado = 'up';
+      else if (nombre === 'j') normalizado = 'down';
+      else if (nombre === 'h') normalizado = 'left';
+      else if (nombre === 'l') normalizado = 'right';
+    }
+
+    // Disparar handlers exactos
+    if (handlers.has(normalizado)) {
+      handlers.get(normalizado).forEach(fn => fn(key, str));
+    }
+
+    // Handler genérico para cualquier tecla
+    if (handlers.has('*')) {
+      handlers.get('*').forEach(fn => fn(nombre, str, key));
+    }
+  }
+
+  function activar() {
+    if (activo) return;
+    if (!process.stdin.isTTY) {
+      // No-TTY: no podemos leer teclas. El llamador debe manejar este caso.
+      return;
+    }
+    activo = true;
+    readline.emitKeypressEvents(process.stdin);
+    modoAnterior = process.stdin.isRaw;
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.on('keypress', onKeypress);
+  }
+
+  function desactivar() {
+    if (!activo) return;
+    activo = false;
+    if (process.stdin.isTTY) {
+      process.stdin.removeListener('keypress', onKeypress);
+      process.stdin.setRawMode(modoAnterior || false);
+      process.stdin.pause();
+    }
+  }
+
+  function on(tecla, handler) {
+    if (!handlers.has(tecla)) handlers.set(tecla, []);
+    handlers.get(tecla).push(handler);
+    return api;
+  }
+
+  function off(tecla, handler) {
+    if (!handlers.has(tecla)) return api;
+    if (!handler) {
+      handlers.delete(tecla);
+      return api;
+    }
+    const arr = handlers.get(tecla).filter(h => h !== handler);
+    if (arr.length === 0) handlers.delete(tecla);
+    else handlers.set(tecla, arr);
+    return api;
+  }
+
+  const api = { activar, desactivar, on, off, estaActivo: () => activo };
+  return api;
+}
+
+module.exports = { crearTeclado };

package/scripts/tui/pantallas/inspect.js

@@ -0,0 +1,173 @@
+'use strict';
+
+/**
+ * Pantalla Inspect — navegador read-only de componentes instalados.
+ *
+ * Flujo:
+ *   1. Lista de instalaciones detectadas (runtime + scope + perfil + version)
+ *   2. Al seleccionar una, muestra detalles:
+ *      - Componentes por categoría (con conteos)
+ *      - Última actualización
+ *      - Lista de hooks registrados
+ *      - Lista de skills disponibles
+ *
+ * No modifica nada. Solo lee de los archivos de estado.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { selectorUnico } = require('../componentes/selector-unico');
+const render = require('../lib/render');
+const teclas = require('../lib/teclas');
+const { colores, semantico, iconos } = require('../lib/colores');
+
+function _cargarDatosInstalaciones() {
+  let detectarRuntimes, cargarEstado;
+  try {
+    ({ detectarRuntimes } = require('../../lib/detectar-runtime'));
+    ({ cargarEstado } = require('../../lib/estado'));
+  } catch (_) {
+    return [];
+  }
+
+  const runtimes = detectarRuntimes();
+  const filas = [];
+  for (const runtime of runtimes) {
+    const candidatos = [
+      { ruta: runtime.global, scope: 'global' },
+      { ruta: path.resolve(runtime.local), scope: 'proyecto' },
+    ];
+    for (const { ruta, scope } of candidatos) {
+      if (!fs.existsSync(ruta)) continue;
+      const estado = cargarEstado(ruta);
+      if (!estado) continue;
+      filas.push({
+        id: `${runtime.id}:${scope}`,
+        runtimeId: runtime.id,
+        runtimeNombre: runtime.nombre,
+        scope,
+        ruta,
+        version: estado.versionSistema || 'desconocida',
+        perfil: estado.perfil || '-',
+        instalado: estado.fechaInstalacion || estado.timestamp || '-',
+        componentes: estado.componentesInstalados || [],
+        archivos: estado.archivosInstalados || [],
+      });
+    }
+  }
+  return filas;
+}
+
+function _agruparPorCategoria(archivos) {
+  const grupos = {};
+  for (const a of archivos) {
+    const cat = a.tipo || a.categoria || 'otros';
+    grupos[cat] = (grupos[cat] || 0) + 1;
+  }
+  return grupos;
+}
+
+function _pantallaDetalle(fila) {
+  return new Promise((resolve) => {
+    if (!render.ES_TTY || !process.stdin.isTTY) {
+      resolve();
+      return;
+    }
+
+    function _renderizar() {
+      render.limpiarPantalla();
+      const { cols, rows } = render.obtenerDimensiones();
+
+      render.escribirEn(2, 3, semantico.titulo(`${fila.runtimeNombre} — ${fila.scope}`));
+      render.escribirEn(3, 3, colores.dim(fila.ruta));
+
+      const datos = [
+        ['Versión', colores.cyan('v' + fila.version)],
+        ['Perfil', semantico.enfasis(fila.perfil)],
+        ['Instalado', fila.instalado],
+        ['Total componentes', String(fila.componentes.length)],
+        ['Total archivos', String(fila.archivos.length)],
+      ];
+
+      datos.forEach((d, i) => {
+        render.escribirEn(5 + i, 5,
+          render.rellenarDer(colores.dim(d[0] + ':'), 22) + d[1]);
+      });
+
+      // Conteos por categoría
+      const grupos = _agruparPorCategoria(fila.archivos);
+      const categorias = Object.entries(grupos).sort(([a], [b]) => a.localeCompare(b));
+
+      const filaCat = 5 + datos.length + 2;
+      render.escribirEn(filaCat, 3, semantico.enfasis('Archivos por categoría:'));
+      categorias.forEach(([cat, n], i) => {
+        const fila = filaCat + 1 + i;
+        if (fila >= rows - 3) return;
+        render.escribirEn(fila, 5,
+          render.rellenarDer(`${iconos.punto} ${cat}`, 22) +
+          colores.cyan(String(n).padStart(4)));
+      });
+
+      render.dibujarPiePagina([
+        ['Enter|Esc', 'volver al listado'],
+      ]);
+    }
+
+    render.iniciarModoTui();
+    _renderizar();
+
+    const onResize = () => _renderizar();
+    process.stdout.on('resize', onResize);
+
+    const teclado = teclas.crearTeclado();
+    function _finalizar() {
+      teclado.desactivar();
+      process.stdout.removeListener('resize', onResize);
+      render.salirModoTui();
+      resolve();
+    }
+    teclado.on('return', _finalizar);
+    teclado.on('escape', _finalizar);
+    teclado.activar();
+  });
+}
+
+async function ejecutarInspect() {
+  const instalaciones = _cargarDatosInstalaciones();
+
+  if (instalaciones.length === 0) {
+    return {
+      exito: false,
+      error: 'No se detectaron instalaciones SWL en este equipo.',
+      sugerencia: 'Ejecuta swl-ses install para crear una.',
+    };
+  }
+
+  // Loop: seleccionar una instalación → ver detalle → volver al listado.
+  // Esc en el listado sale del Inspect.
+  while (true) {
+    const items = instalaciones.map(i => ({
+      valor: i.id,
+      etiqueta: `${i.runtimeNombre} (${i.scope}) — v${i.version} · perfil ${i.perfil}`,
+      descripcion: `${i.componentes.length} componentes · ${i.archivos.length} archivos · ${i.ruta}`,
+    }));
+
+    const elegida = await selectorUnico({
+      titulo: 'Inspect — Elige una instalación para ver detalle:',
+      items,
+    });
+    if (!elegida) break;
+
+    const fila = instalaciones.find(i => i.id === elegida);
+    if (fila) await _pantallaDetalle(fila);
+  }
+
+  return { exito: true };
+}
+
+module.exports = {
+  ejecutarInspect,
+  _cargarDatosInstalaciones,
+  _agruparPorCategoria,
+};