shadownrx-code 2.0.0 → 2.1.0

package/README.md

@@ -1,74 +1,130 @@
 # shadownrx-code
 
+[![npm version](https://img.shields.io/npm/v/shadownrx-code.svg)](https://www.npmjs.com/package/shadownrx-code)
+[![node](https://img.shields.io/node/v/shadownrx-code.svg)](https://www.npmjs.com/package/shadownrx-code)
+
 Configurador interactivo de terminal para la plataforma de build de
-`shadownrx/code`. Detecta si tu proyecto es Flutter, React Native, una PWA
-(Capacitor) o Electron, te hace un par de preguntas, y te escribe
-`.github/workflows/build.yml` ya configurado — no compila nada localmente, solo
-prepara el workflow que corre gratis en GitHub Actions.
+`shadownrx/code`. Detecta si el proyecto es Flutter, React Native, una PWA
+(Capacitor) o Electron, formula las preguntas de configuración necesarias, y
+genera `.github/workflows/build.yml` listo para usar. No compila nada de
+forma local: únicamente prepara el workflow que se ejecuta en GitHub
+Actions.
 
 ```
-▲ shadownrx/code — configurador de CI para Android, iOS y Electron
+  ███████╗██╗  ██╗ █████╗ ██████╗  ██████╗ ██╗    ██╗███╗   ██╗██████╗ ██╗  ██╗
+  ...
+  /code · CI gratis para Android, iOS y Electron · v2.0.1
+
+  ✔ Proyecto detectado: React Native
+
+  ━━━━━━━━━━━━──────────── Paso 3/4 · Firma
+✔ ¿Ya tenés listos los secrets de firma (keystore / certificado de Apple)? … yes
+
+  ╭─ Pipeline en GitHub Actions ───────────────────────────────────────────╮
+  │ ◉   git push                       main · PR · tags v* · manual        │
+  │ │                                                                      │
+  │ ◆   detect              [ubuntu]   project_type: react-native          │
+  │ │                                                                      │
+  │ ├─▶ build-android       [ubuntu]   → .apk  .aab                        │
+  │ ├─▶ build-ios           [macos]    → .ipa                              │
+  │ │                                                                      │
+  │ ◆   notify              [ubuntu]   resumen · Slack opcional            │
+  ╰────────────────────────────────────────────────────────────────────────╯
+```
+
+Antes de escribir muestra un resumen, el pipeline que va a correr en GitHub
+Actions y una vista previa del YAML con resaltado de sintaxis. Respeta
+`NO_COLOR`, y si la terminal es angosta usa un encabezado compacto.
 
-? Detecté un proyecto React Native en este directorio. ¿Es correcto? › Yes
-? ¿Qué deseas compilar? › Android + iOS (ambas)
-? ¿Ya tenés listos los secrets de firma (keystore / certificado de Apple)? › No
-? ¿Adjuntar los builds a un GitHub Release cuando pushees un tag (v1.2.3)? › No
+### Opciones
+
+| Flag | Qué hace |
+|---|---|
+| `-y`, `--yes` | Sin preguntas: usa el tipo detectado (o `auto`) y los valores por defecto |
+| `-t`, `--type <tipo>` | Fija el tipo: `flutter`, `react-native`, `pwa`, `electron` o `auto` |
+| `--target <t>` | Qué compilar (no Electron): `both`, `android` o `ios` |
+| `--release` | Adjunta los builds a un GitHub Release en tags `v*` |
+| `--dry-run` | Muestra el workflow sin escribir nada |
+| `-f`, `--force` | Sobrescribe `build.yml` sin preguntar |
+| `--cwd <dir>` | Proyecto a configurar (por defecto, el directorio actual) |
+| `--no-color` | Desactiva los colores |
 
-✔ Escribí .github/workflows/build.yml
+```bash
+npx shadownrx-code -y --release            # CI sin preguntas, con releases
+npx shadownrx-code -t flutter --dry-run    # solo previsualizar
 ```
 
-Para Electron, la pregunta "¿Qué deseas compilar?" y la de firma no aparecen
-(Electron siempre compila Linux + macOS + Windows, y la firma todavía no está
-soportada) — solo pregunta el tipo de proyecto y si querés adjuntar a un
-GitHub Release.
+Para proyectos Electron las preguntas de plataforma de compilación y de
+firma no se muestran: Electron siempre compila para Linux, macOS y Windows,
+y la firma de sus artefactos aún no está soportada por la plataforma. En ese
+caso solo se pregunta el tipo de proyecto y si se desea adjuntar los
+artefactos a un GitHub Release.
+
+## Instalación
 
-## Usar
+El paquete está publicado en npm como
+[`shadownrx-code`](https://www.npmjs.com/package/shadownrx-code).
 
-Publicado en npm como
-[`shadownrx-code`](https://www.npmjs.com/package/shadownrx-code) (v2.0.0).
-Alcanza con:
+**Sin instalación** (recomendado): `npx` descarga la última versión
+publicada, la ejecuta una única vez, y no deja nada instalado de forma
+permanente.
 
 ```bash
 npx shadownrx-code
 ```
 
-parado en la raíz de tu proyecto (Flutter, React Native, PWA o Electron) — sin
-clonar nada ni instalar nada de forma permanente: `npx` baja la última
-versión publicada, la corre, y listo.
-
-También podés instalarlo global si preferís no repetir la descarga cada vez:
+**Instalación global**, si se prefiere evitar la descarga en cada
+ejecución:
 
 ```bash
 npm install -g shadownrx-code
 shadownrx-code
 ```
 
-O correr la versión local del repo clonado:
+**Desde el código fuente del repositorio**, sin depender del registro de
+npm:
 
 ```bash
 git clone https://github.com/shadownrx/code
 cd code/cli
 npm install
-node bin.js   # parado en la raíz de TU proyecto, o pasale el cwd que corresponda
+node bin.js
 ```
 
-o, apuntando directo a la carpeta de tu proyecto:
+También puede apuntarse directamente a un proyecto en otra ruta:
 
 ```bash
 cd /ruta/a/tu/proyecto
 node /ruta/a/code/cli/bin.js
 ```
 
+En todos los casos, el comando debe ejecutarse parado en la raíz del
+proyecto a configurar (Flutter, React Native, PWA o Electron).
+
 ## Como tool de Cursor (o cualquier cliente MCP)
 
-Además del CLI interactivo, `mcp-server.js` expone lo mismo como un servidor
-[MCP](https://modelcontextprotocol.io) — así el agente de Cursor (o Claude
-Code, Windsurf, o cualquier editor con soporte MCP; no es algo específico de
-Cursor) puede llamarlo directamente en la conversación, sin que abras una
-terminal vos.
+Además del CLI interactivo, `mcp-server.js` expone la misma funcionalidad
+como un servidor [MCP](https://modelcontextprotocol.io), de modo que el
+agente de Cursor (o Claude Code, Windsurf, o cualquier editor con soporte
+MCP — no es específico de Cursor) puede invocarla directamente durante la
+conversación, sin necesidad de abrir una terminal.
+
+Configuración en `.cursor/mcp.json` del proyecto (o en el `mcp.json`
+global de Cursor):
 
-Agregá esto a `.cursor/mcp.json` en tu proyecto (o al `mcp.json` global de
-Cursor):
+```json
+{
+  "mcpServers": {
+    "shadownrx-code": {
+      "command": "npx",
+      "args": ["-y", "shadownrx-code-mcp"]
+    }
+  }
+}
+```
+
+Alternativamente, apuntando a una copia local del repositorio en lugar del
+paquete publicado:
 
 ```json
 {
@@ -81,56 +137,59 @@ Cursor):
 }
 ```
 
-También podés usar `"command": "npx", "args": ["-y", "shadownrx-code-mcp"]`
-en vez de la ruta absoluta, sin necesidad de clonar el repo.
-
-Este mismo repo ya trae [`.cursor/mcp.json`](../.cursor/mcp.json) apuntando a
-`cli/mcp-server.js` con `${workspaceFolder}` — si abrís `shadownrx/code` en
-Cursor, la tool queda disponible sola. Eso sí, corré `npm install` en `cli/`
-primero (`node_modules` no se commitea): el server necesita
-`@modelcontextprotocol/sdk` y `zod` instalados para arrancar.
+Este repositorio incluye [`.cursor/mcp.json`](../.cursor/mcp.json)
+configurado con la segunda variante y `${workspaceFolder}` — al abrir
+`shadownrx/code` en Cursor, la tool queda disponible automáticamente. Es
+necesario ejecutar `npm install` en `cli/` una vez (`node_modules` no se
+versiona): el servidor requiere `@modelcontextprotocol/sdk` y `zod`
+instalados para iniciar.
 
 Expone dos tools:
 
 | Tool | Qué hace |
 |---|---|
-| `detect_project_type` | Solo lee: reporta si un directorio es Flutter/React Native/PWA/Electron. No escribe nada. |
-| `setup_mobile_ci` | Detecta (o recibe `project_type` explícito) y escribe `.github/workflows/build.yml` — mismos parámetros que el CLI interactivo (`build_android`, `build_ios`, `build_electron`, `create_release`), más `overwrite` para confirmar si el archivo ya existe. |
+| `detect_project_type` | Solo lectura: reporta si un directorio es Flutter, React Native, PWA o Electron. No escribe nada. |
+| `setup_mobile_ci` | Detecta el tipo de proyecto (o recibe `project_type` explícito) y escribe `.github/workflows/build.yml` — mismos parámetros que el CLI interactivo (`build_android`, `build_ios`, `build_electron`, `create_release`), más `overwrite` para confirmar la sobrescritura si el archivo ya existe. |
 
-Ambas tools están probadas de punta a punta contra el server real (no un
-mock): `mcp-server.test.js` levanta `mcp-server.js` como subproceso vía stdio
-con el `Client` del SDK de MCP y llama las tools de verdad.
+Ambas tools están cubiertas por tests de punta a punta contra el servidor
+real (no un mock): `mcp-server.test.js` levanta `mcp-server.js` como
+subproceso vía stdio, usando el `Client` del SDK de MCP para invocar las
+tools reales.
 
 ## Qué pregunta y por qué
 
-Cada pregunta mapea 1 a 1 a un input real de
-[`build-mobile.yml`](../.github/workflows/build-mobile.yml) — no hay ninguna
-opción que prometa algo que la plataforma no haga. Ver
-[`docs/USAGE.md`](../docs/USAGE.md) para el detalle de cada input.
+Cada pregunta mapea uno a uno con un input real de
+[`build-mobile.yml`](../.github/workflows/build-mobile.yml): no hay ninguna
+opción que prometa una funcionalidad que la plataforma no implemente. El
+detalle de cada input está documentado en
+[`docs/USAGE.md`](../docs/USAGE.md).
 
 | Pregunta | Input generado |
 |---|---|
 | Tipo de proyecto (auto-detectado o elegido) | `project_type` |
 | Qué compilar (Android / iOS / ambas) — no aplica a Electron | `build_android`, `build_ios` |
-| ¿Adjuntar a un GitHub Release en tags? | `create_release` (+ el bloque `permissions: contents: write` que necesita) |
+| ¿Adjuntar a un GitHub Release en tags? | `create_release` (incluye el bloque `permissions: contents: write` requerido) |
 
-Para Electron, en vez de `build_android`/`build_ios` se emite
-`build_electron: true` (siempre compila los tres sistemas operativos).
+Para proyectos Electron, en lugar de `build_android`/`build_ios` se emite
+`build_electron: true` (siempre compila para los tres sistemas operativos).
 
-Si respondés que ya tenés los secrets de firma listos, te lista los nombres
-exactos que hay que cargar en GitHub y te manda a `docs/SIGNING.md` — no los
-pide ni los toca, esos siempre se configuran a mano como secrets de GitHub.
+Si se indica que los secrets de firma ya están configurados, se listan los
+nombres exactos que deben cargarse en GitHub y se referencia
+`docs/SIGNING.md`. El CLI no solicita ni manipula esos secrets: siempre se
+configuran manualmente como GitHub Secrets.
 
-Si `.github/workflows/build.yml` ya existe, pregunta antes de pisarlo.
+Si `.github/workflows/build.yml` ya existe, se solicita confirmación antes
+de sobrescribirlo.
 
 ## Desarrollo
 
-`lib.js` tiene toda la lógica pura (detección de proyecto + generación del
-YAML) separada de `bin.js` (la parte interactiva con
-[`prompts`](https://www.npmjs.com/package/prompts)) y de `mcp-server.js` (el
-server MCP) — justamente para no duplicar la lógica y poder testearla sin
-simular una terminal ni un cliente MCP real:
+La lógica pura (detección de proyecto y generación del YAML) vive en
+`lib.js`, separada de `bin.js` (la interfaz interactiva, con
+[`prompts`](https://www.npmjs.com/package/prompts)), de `ui.js` (banner,
+paneles, spinner y diagrama en ANSI puro, sin dependencias) y de `mcp-server.js`
+(el servidor MCP). Esta separación evita duplicar lógica y permite testear
+sin simular una terminal ni un cliente MCP real:
 
 ```bash
-npm test   # node --test — corre lib.test.js y mcp-server.test.js
+npm test   # node --test — corre lib.test.js, ui.test.js y mcp-server.test.js
 ```

package/bin.js

@@ -1,6 +1,8 @@
 #!/usr/bin/env node
 import fs from 'node:fs';
+import os from 'node:os';
 import path from 'node:path';
+import { parseArgs } from 'node:util';
 import prompts from 'prompts';
 import {
   PROJECT_LABELS,
@@ -9,151 +11,307 @@ import {
   detectProjectType,
   iosSecrets,
 } from './lib.js';
+import {
+  banner,
+  box,
+  c,
+  gradient,
+  highlightYaml,
+  pipeline,
+  rule,
+  setColor,
+  spin,
+  stepHeader,
+  sym,
+  table,
+} from './ui.js';
+
+const pkg = JSON.parse(fs.readFileSync(new URL('./package.json', import.meta.url), 'utf8'));
+const TAGLINE = 'CI gratis para Android, iOS y Electron';
+const PROJECT_TYPES = ['flutter', 'react-native', 'pwa', 'electron', 'auto'];
+const TARGETS = ['both', 'android', 'ios'];
+// Inner width shared by every panel so their right edges line up.
+const PANEL = 72;
+
+const HELP_ROWS = [
+  ['-y, --yes', 'Sin preguntas: usa lo detectado y los defaults'],
+  ['-t, --type <tipo>', `Tipo: ${PROJECT_TYPES.join('|')}`],
+  ['    --target <t>', `Qué compilar: ${TARGETS.join('|')}`],
+  ['    --release', 'Adjuntar builds a un GitHub Release en tags v*'],
+  ['    --dry-run', 'Muestra el workflow sin escribir nada'],
+  ['-f, --force', 'Sobrescribe build.yml sin preguntar'],
+  ['    --cwd <dir>', 'Proyecto a configurar (default: directorio actual)'],
+  ['    --no-color', 'Desactiva colores (también respeta NO_COLOR)'],
+  ['-v, --version', 'Muestra la versión'],
+  ['-h, --help', 'Muestra esta ayuda'],
+];
 
-const cwd = process.cwd();
+function parseCli(argv) {
+  const { values } = parseArgs({
+    args: argv,
+    options: {
+      yes: { type: 'boolean', short: 'y' },
+      type: { type: 'string', short: 't' },
+      target: { type: 'string' },
+      release: { type: 'boolean' },
+      'dry-run': { type: 'boolean' },
+      force: { type: 'boolean', short: 'f' },
+      cwd: { type: 'string' },
+      'no-color': { type: 'boolean' },
+      version: { type: 'boolean', short: 'v' },
+      help: { type: 'boolean', short: 'h' },
+    },
+    strict: true,
+  });
+  if (values.type && !PROJECT_TYPES.includes(values.type)) {
+    throw new Error(`--type inválido: "${values.type}". Opciones: ${PROJECT_TYPES.join(', ')}`);
+  }
+  if (values.target && !TARGETS.includes(values.target)) {
+    throw new Error(`--target inválido: "${values.target}". Opciones: ${TARGETS.join(', ')}`);
+  }
+  return values;
+}
+
+function printHelp() {
+  console.log(banner({ version: pkg.version, tagline: TAGLINE }));
+  console.log(
+    box(
+      [
+        `${c.bold('Uso:')} ${c.cyan('npx shadownrx-code')} ${c.gray('[opciones]')}`,
+        '',
+        ...table(HELP_ROWS, { keyColor: c.cyan }),
+        '',
+        c.gray('Ejemplos:'),
+        `  ${c.cyan('npx shadownrx-code')}                       ${c.gray('# modo interactivo')}`,
+        `  ${c.cyan('npx shadownrx-code -y --release')}          ${c.gray('# defaults + releases')}`,
+        `  ${c.cyan('npx shadownrx-code -t flutter --dry-run')}  ${c.gray('# solo previsualizar')}`,
+      ],
+      { title: 'Ayuda', minWidth: PANEL }
+    )
+  );
+  console.log();
+}
+
+function displayPath(p) {
+  const home = os.homedir();
+  const short = p.startsWith(home) ? '~' + p.slice(home.length) : p;
+  return short.length > PANEL - 12 ? '…' + short.slice(-(PANEL - 13)) : short;
+}
 
 function onCancel() {
-  console.log('\nCancelado — no se modificó nada.\n');
+  console.log(`\n  ${sym.fail()} ${c.bold('Cancelado')} ${c.gray('— no se modificó nada.')}\n`);
   process.exit(1);
 }
 
+async function ask(question) {
+  return prompts({ name: 'value', ...question }, { onCancel }).then((r) => r.value);
+}
+
 async function main() {
-  console.log('\n▲ shadownrx/code — configurador de CI para Android, iOS y Electron\n');
-  console.log('Esto escribe .github/workflows/build.yml en este proyecto. No compila nada');
-  console.log('acá: el build corre gratis en GitHub Actions con cada push.\n');
+  let opts;
+  try {
+    opts = parseCli(process.argv.slice(2));
+  } catch (err) {
+    console.error(`\n  ${sym.fail()} ${err.message}\n  ${c.gray('Probá')} ${c.cyan('--help')}\n`);
+    process.exit(2);
+  }
+  if (opts['no-color']) setColor(false);
+  if (opts.version) return console.log(pkg.version);
+  if (opts.help) return printHelp();
 
-  const detected = detectProjectType(cwd);
-  let projectType = detected;
+  const cwd = path.resolve(opts.cwd ?? process.cwd());
+  const auto = Boolean(opts.yes);
 
+  console.log(banner({ version: pkg.version, tagline: TAGLINE }));
+  console.log(
+    box(
+      [
+        `Genera ${c.cyan('.github/workflows/build.yml')} para este proyecto.`,
+        `No compila nada acá: el build corre ${c.green('gratis')} en GitHub Actions`,
+        `con cada push — sin Mac ni Windows en tu máquina.`,
+        '',
+        `${c.gray('Proyecto:')} ${c.bold(displayPath(cwd))}`,
+      ],
+      { title: gradient('Configurador de CI'), minWidth: PANEL }
+    )
+  );
+
+  // ── Detección ────────────────────────────────────────────────────────────
+  console.log();
+  const detected = await spin('Analizando el proyecto…', () => detectProjectType(cwd));
   if (detected) {
-    const { confirmDetected } = await prompts(
-      {
-        type: 'confirm',
-        name: 'confirmDetected',
-        message: `Detecté un proyecto ${PROJECT_LABELS[detected]} en este directorio. ¿Es correcto?`,
-        initial: true,
-      },
-      { onCancel }
-    );
-    if (!confirmDetected) projectType = null;
+    console.log(`  ${sym.ok()} Proyecto detectado: ${c.bold(PROJECT_LABELS[detected])}`);
+  } else {
+    console.log(`  ${sym.warn()} ${c.yellow('No pude detectar el tipo de proyecto')} ${c.gray('(Flutter / RN / PWA / Electron)')}`);
   }
 
+  let projectType = opts.type ?? null;
+  const willBeElectron = (projectType ?? detected) === 'electron';
+  const totalSteps = willBeElectron ? 2 : 4;
+  let step = 0;
+
   if (!projectType) {
-    const { picked } = await prompts(
-      {
-        type: 'select',
-        name: 'picked',
-        message: '¿Qué tipo de proyecto es?',
-        choices: [
-          { title: 'Flutter', value: 'flutter' },
-          { title: 'React Native', value: 'react-native' },
-          { title: 'PWA (Capacitor)', value: 'pwa' },
-          { title: 'Electron', value: 'electron' },
-          { title: 'Detectar automáticamente en cada build', value: 'auto' },
-        ],
-      },
-      { onCancel }
-    );
-    projectType = picked;
+    if (auto) {
+      projectType = detected ?? 'auto';
+    } else {
+      console.log(stepHeader(++step, totalSteps, 'Tipo de proyecto'));
+      if (detected) {
+        const ok = await ask({
+          type: 'confirm',
+          message: `¿Es un proyecto ${PROJECT_LABELS[detected]}?`,
+          initial: true,
+        });
+        if (ok) projectType = detected;
+      }
+      if (!projectType) {
+        projectType = await ask({
+          type: 'select',
+          message: '¿Qué tipo de proyecto es?',
+          choices: [
+            { title: 'Flutter', value: 'flutter', description: 'pubspec.yaml' },
+            { title: 'React Native', value: 'react-native', description: 'react-native en package.json' },
+            { title: 'PWA (Capacitor)', value: 'pwa', description: 'capacitor.config.*' },
+            { title: 'Electron', value: 'electron', description: 'escritorio: Linux, macOS, Windows' },
+            { title: 'Detectar en cada build', value: 'auto', description: 'project_type: auto' },
+          ],
+        });
+      }
+    }
+  } else {
+    step++;
   }
 
   const isElectron = projectType === 'electron';
+  const steps = isElectron ? 2 : 4;
 
   let buildAndroid = true;
   let buildIos = true;
-  let buildElectron = true;
   let wantsSigning = false;
 
   if (isElectron) {
-    console.log('\nElectron compila Linux, macOS y Windows en paralelo — no hace falta elegir.\n');
+    console.log(`\n  ${sym.info()} Electron compila ${c.bold('Linux, macOS y Windows')} en paralelo ${c.gray('— no hace falta elegir.')}`);
   } else {
-    const { target } = await prompts(
-      {
+    let target = opts.target;
+    if (!target && !auto) {
+      console.log(stepHeader(++step, steps, 'Plataformas'));
+      target = await ask({
         type: 'select',
-        name: 'target',
         message: '¿Qué deseas compilar?',
         choices: [
-          { title: 'Android + iOS (ambas)', value: 'both' },
-          { title: 'Solo Android', value: 'android' },
-          { title: 'Solo iOS', value: 'ios' },
+          { title: 'Android + iOS', value: 'both', description: '.apk/.aab + .ipa' },
+          { title: 'Solo Android', value: 'android', description: '.apk/.aab en runner Linux' },
+          { title: 'Solo iOS', value: 'ios', description: '.ipa en runner macOS' },
         ],
-      },
-      { onCancel }
-    );
+      });
+    } else step++;
+    target ??= 'both';
     buildAndroid = target !== 'ios';
     buildIos = target !== 'android';
 
-    const signingAnswer = await prompts(
-      {
+    if (!auto) {
+      console.log(stepHeader(++step, steps, 'Firma'));
+      wantsSigning = await ask({
         type: 'confirm',
-        name: 'wantsSigning',
         message: '¿Ya tenés listos los secrets de firma (keystore / certificado de Apple)?',
         initial: false,
-      },
-      { onCancel }
-    );
-    wantsSigning = signingAnswer.wantsSigning;
+      });
+    } else step++;
   }
 
-  const { wantsRelease } = await prompts(
-    {
+  let createRelease = Boolean(opts.release);
+  if (!opts.release && !auto) {
+    console.log(stepHeader(++step, steps, 'Releases'));
+    createRelease = await ask({
       type: 'confirm',
-      name: 'wantsRelease',
-      message: '¿Adjuntar los builds a un GitHub Release cuando pushees un tag (v1.2.3)?',
+      message: '¿Adjuntar los builds a un GitHub Release al pushear un tag (v1.2.3)?',
       initial: false,
-    },
-    { onCancel }
+    });
+  }
+
+  // ── Resumen ──────────────────────────────────────────────────────────────
+  const config = { projectType, buildAndroid, buildIos, buildElectron: true, createRelease };
+  const yaml = buildWorkflowYaml(config);
+  const yes = c.green('sí');
+  const no = c.gray('no');
+
+  const platforms = isElectron
+    ? 'Linux · macOS · Windows'
+    : [buildAndroid && 'Android', buildIos && 'iOS'].filter(Boolean).join(' · ');
+
+  console.log(`\n  ${gradient('━'.repeat(PANEL + 2))}\n`);
+  console.log(
+    box(
+      table([
+        ['Proyecto', c.bold(PROJECT_LABELS[projectType] ?? 'Auto-detectar en cada build')],
+        ['Plataformas', c.bold(platforms)],
+        ['Firma', isElectron ? c.gray('no soportada aún') : wantsSigning ? yes : c.gray('sin firmar (por ahora)')],
+        ['GitHub Release', createRelease ? yes : no],
+      ]),
+      { title: 'Resumen', color: c.cyan, minWidth: PANEL }
+    )
   );
+  console.log();
+  console.log(box(pipeline(config), { title: 'Pipeline en GitHub Actions', color: c.magenta, minWidth: PANEL }));
+  console.log();
+  console.log(box(highlightYaml(yaml), { title: '.github/workflows/build.yml', color: c.blue, minWidth: PANEL }));
+  console.log();
 
+  if (opts['dry-run']) {
+    console.log(`  ${sym.info()} ${c.bold('--dry-run')}: no se escribió nada.\n`);
+    return;
+  }
+
+  // ── Escritura ────────────────────────────────────────────────────────────
   const workflowPath = path.join(cwd, '.github', 'workflows', 'build.yml');
-  if (fs.existsSync(workflowPath)) {
-    const { overwrite } = await prompts(
-      {
-        type: 'confirm',
-        name: 'overwrite',
-        message: `Ya existe ${path.relative(cwd, workflowPath)}. ¿Sobrescribir?`,
-        initial: false,
-      },
-      { onCancel }
-    );
-    if (!overwrite) {
-      console.log('\nCancelado — no se modificó nada.\n');
+  const rel = path.relative(cwd, workflowPath);
+
+  if (!auto) {
+    const go = await ask({ type: 'confirm', message: `¿Escribir ${rel}?`, initial: true });
+    if (!go) onCancel();
+  }
+
+  if (fs.existsSync(workflowPath) && !opts.force) {
+    if (fs.readFileSync(workflowPath, 'utf8') === yaml) {
+      console.log(`  ${sym.ok()} ${rel} ya está al día ${c.gray('— nada que cambiar.')}\n`);
       return;
     }
+    if (auto) {
+      console.log(`  ${sym.warn()} ${c.yellow(`Ya existe ${rel}.`)} Usá ${c.cyan('--force')} para sobrescribirlo.\n`);
+      process.exit(1);
+    }
+    const overwrite = await ask({ type: 'confirm', message: `Ya existe ${rel}. ¿Sobrescribir?`, initial: false });
+    if (!overwrite) onCancel();
   }
 
-  const yaml = buildWorkflowYaml({
-    projectType,
-    buildAndroid,
-    buildIos,
-    buildElectron,
-    createRelease: wantsRelease,
-  });
+  await spin(`Escribiendo ${rel}…`, () => {
+    fs.mkdirSync(path.dirname(workflowPath), { recursive: true });
+    fs.writeFileSync(workflowPath, yaml);
+  }, { minMs: 300 });
 
-  fs.mkdirSync(path.dirname(workflowPath), { recursive: true });
-  fs.writeFileSync(workflowPath, yaml);
-
-  console.log(`\n✔ Escribí ${path.relative(cwd, workflowPath)}\n`);
+  // ── Próximos pasos ───────────────────────────────────────────────────────
+  const next = [`${sym.ok()} ${c.bold(`Escribí ${rel}`)}`, ''];
 
   if (isElectron) {
-    console.log(
-      'Los builds de Electron salen sin firmar por ahora (la firma de macOS/Windows\n' +
-        'todavía no está soportada por la plataforma).\n'
-    );
+    next.push(`${sym.warn()} Los builds de Electron salen ${c.yellow('sin firmar')} por ahora.`, '');
   } else if (wantsSigning) {
-    console.log('Agregá estos secrets en GitHub (Settings → Secrets and variables → Actions):\n');
-    if (buildAndroid) console.log(`  Android: ${androidSecrets().join(', ')}`);
-    if (buildIos) console.log(`  iOS:     ${iosSecrets().join(', ')}`);
-    console.log('\nDetalle paso a paso: https://github.com/shadownrx/code/blob/main/docs/SIGNING.md\n');
+    next.push(c.bold('Cargá estos secrets en GitHub:'));
+    next.push(c.gray('Settings → Secrets and variables → Actions'), '');
+    if (buildAndroid) next.push(c.green('Android'), ...androidSecrets().map((s) => `  ${c.gray('☐')} ${s}`));
+    if (buildIos) next.push(c.green('iOS'), ...iosSecrets().map((s) => `  ${c.gray('☐')} ${s}`));
+    next.push('', `${c.gray('Guía:')} ${c.underline('https://github.com/shadownrx/code/blob/main/docs/SIGNING.md')}`, '');
   } else {
-    console.log(
-      'Por ahora va a compilar sin firmar (sirve para probar que compila y correr en\n' +
-        'simulador/emulador). Cuando quieras builds firmados, mirá docs/SIGNING.md.\n'
-    );
+    next.push(`${sym.info()} Va a compilar ${c.yellow('sin firmar')}: sirve para emulador/simulador.`);
+    next.push(`  ${c.gray('Para builds firmados mirá')} ${c.cyan('docs/SIGNING.md')}`, '');
   }
 
-  console.log('Siguiente paso: hacé commit y push — el primer build corre solo, gratis,');
-  console.log('sin necesitar Mac (ni Windows, si es Electron) en tu máquina.\n');
+  next.push(rule(c.bold('Siguiente paso'), PANEL - 2).trimStart(), '');
+  next.push(`  ${c.cyan('git add')} ${rel}`);
+  next.push(`  ${c.cyan('git commit')} -m ${c.yellow('"ci: build con shadownrx/code"')}`);
+  next.push(`  ${c.cyan('git push')}`);
+  if (createRelease) next.push('', `${c.gray('Para un release:')} ${c.cyan('git tag v1.0.0 && git push --tags')}`);
+
+  console.log(box(next, { title: gradient('Listo'), color: c.green, style: 'round', minWidth: PANEL }));
+  console.log();
 }
 
 main();

package/lib.js

@@ -9,7 +9,7 @@ export const PROJECT_LABELS = {
 };
 
 /**
- * Same detection rules as .github/actions/detect-project/action.yml,
+ * Same detection rules as the `detect` job in .github/workflows/build-mobile.yml,
  * ported to Node so the CLI can guess before asking.
  */
 export function detectProjectType(cwd) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadownrx-code",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Interactive CLI + MCP server for the shadownrx/code free Android/iOS/PWA/Electron build platform — writes .github/workflows/build.yml for your project, or exposes the same thing as tools for Cursor/Claude Code/any MCP client.",
   "type": "module",
   "bin": {
@@ -10,6 +10,7 @@
   "files": [
     "bin.js",
     "lib.js",
+    "ui.js",
     "mcp-server.js"
   ],
   "scripts": {

package/ui.js

@@ -0,0 +1,279 @@
+// Terminal rendering helpers for bin.js: banner, boxes, spinner, pipeline
+// diagram, YAML highlighting. Pure ANSI, no dependencies. Every helper
+// degrades to plain ASCII-art text when color is off (NO_COLOR, non-TTY,
+// --no-color), so piping the output into a file or CI log stays readable.
+
+const env = process.env;
+
+export function colorLevel(stream = process.stdout) {
+  if ('NO_COLOR' in env) return 0;
+  if (env.FORCE_COLOR === '0') return 0;
+  if (!stream.isTTY && !env.FORCE_COLOR) return 0;
+  if (/truecolor|24bit/i.test(env.COLORTERM || '')) return 3;
+  if (/-256(color)?$/i.test(env.TERM || '')) return 2;
+  return env.FORCE_COLOR === '3' ? 3 : 2;
+}
+
+let level = colorLevel();
+export function setColor(enabled) {
+  level = enabled ? Math.max(colorLevel(), 2) : 0;
+}
+
+const sgr = (open, close) => (s) => (level ? `\x1b[${open}m${s}\x1b[${close}m` : String(s));
+export const c = {
+  bold: sgr(1, 22),
+  dim: sgr(2, 22),
+  italic: sgr(3, 23),
+  underline: sgr(4, 24),
+  red: sgr(31, 39),
+  green: sgr(32, 39),
+  yellow: sgr(33, 39),
+  blue: sgr(34, 39),
+  magenta: sgr(35, 39),
+  cyan: sgr(36, 39),
+  gray: sgr(90, 39),
+};
+
+function rgbTo256(r, g, b) {
+  const q = (v) => Math.round((v / 255) * 5);
+  return 16 + 36 * q(r) + 6 * q(g) + q(b);
+}
+
+export function rgb(r, g, b) {
+  return (s) => {
+    if (!level) return String(s);
+    const code = level === 3 ? `38;2;${r};${g};${b}` : `38;5;${rgbTo256(r, g, b)}`;
+    return `\x1b[${code}m${s}\x1b[39m`;
+  };
+}
+
+// Brand gradient: cyan → violet → pink.
+const STOPS = [
+  [0, 229, 255],
+  [124, 77, 255],
+  [255, 45, 149],
+];
+
+function gradientAt(t) {
+  const seg = Math.min(STOPS.length - 2, Math.floor(t * (STOPS.length - 1)));
+  const local = t * (STOPS.length - 1) - seg;
+  const [a, b] = [STOPS[seg], STOPS[seg + 1]];
+  return a.map((v, i) => Math.round(v + (b[i] - v) * local));
+}
+
+/** Colors each visible character of a plain string along the brand gradient. */
+export function gradient(text, { offset = 0, span } = {}) {
+  if (!level) return text;
+  const chars = [...text];
+  const total = span ?? chars.length;
+  return chars
+    .map((ch, i) => (ch === ' ' ? ch : rgb(...gradientAt(Math.min(1, (i + offset) / Math.max(1, total - 1))))(ch)))
+    .join('');
+}
+
+const ANSI_RE = /\x1b\[[0-9;]*m/g;
+export const stripAnsi = (s) => String(s).replace(ANSI_RE, '');
+export const visibleWidth = (s) => [...stripAnsi(s)].length;
+export const padEnd = (s, width) => s + ' '.repeat(Math.max(0, width - visibleWidth(s)));
+
+// ─── Banner ─────────────────────────────────────────────────────────────────
+
+// "ANSI Shadow" figlet font, only the glyphs the banner needs. Each glyph's
+// rows share one width so letters can be concatenated column by column.
+const FONT = {
+  S: ['███████╗', '██╔════╝', '███████╗', '╚════██║', '███████║', '╚══════╝'],
+  H: ['██╗  ██╗', '██║  ██║', '███████║', '██╔══██║', '██║  ██║', '╚═╝  ╚═╝'],
+  A: [' █████╗ ', '██╔══██╗', '███████║', '██╔══██║', '██║  ██║', '╚═╝  ╚═╝'],
+  D: ['██████╗ ', '██╔══██╗', '██║  ██║', '██║  ██║', '██████╔╝', '╚═════╝ '],
+  O: [' ██████╗ ', '██╔═══██╗', '██║   ██║', '██║   ██║', '╚██████╔╝', ' ╚═════╝ '],
+  W: ['██╗    ██╗', '██║    ██║', '██║ █╗ ██║', '██║███╗██║', '╚███╔███╔╝', ' ╚══╝╚══╝ '],
+  N: ['███╗   ██╗', '████╗  ██║', '██╔██╗ ██║', '██║╚██╗██║', '██║ ╚████║', '╚═╝  ╚═══╝'],
+  R: ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██║  ██║', '╚═╝  ╚═╝'],
+  X: ['██╗  ██╗', '╚██╗██╔╝', ' ╚███╔╝ ', ' ██╔██╗ ', '██╔╝ ██╗', '╚═╝  ╚═╝'],
+};
+
+/** Renders `word` in the ANSI Shadow font; returns one string per row. */
+export function bigText(word) {
+  const glyphs = [...word.toUpperCase()].map((ch) => {
+    if (!FONT[ch]) throw new Error(`bigText: no glyph for "${ch}"`);
+    return FONT[ch];
+  });
+  return FONT.S.map((_, r) => glyphs.map((g) => g[r]).join('').replace(/\s+$/, ''));
+}
+
+export function banner({ version, tagline, columns = process.stdout.columns || 80 }) {
+  const sub = `${c.bold('/code')} ${c.gray('·')} ${c.gray(tagline)} ${c.gray('·')} ${c.dim(`v${version}`)}`;
+  const lines = bigText('shadownrx');
+  // Narrow terminal: the 77-column logo would wrap into garbage.
+  if (columns < Math.max(...lines.map((l) => [...l].length)) + 2) {
+    return ['', `  ${gradient('▲ shadownrx')}${sub}`, ''].join('\n');
+  }
+  const width = Math.max(...lines.map((l) => [...l].length));
+  const art = lines.map((line) => {
+    if (!level) return line;
+    return [...line]
+      .map((ch, i) => {
+        if (ch === ' ') return ch;
+        const paint = rgb(...gradientAt(i / (width - 1)));
+        // Solid blocks in full color, the box-drawing "shadow" dimmed.
+        return ch === '█' ? paint(ch) : c.dim(paint(ch));
+      })
+      .join('');
+  });
+  return ['', ...art.map((l) => '  ' + l), '  ' + sub, ''].join('\n');
+}
+
+// ─── Boxes & layout ─────────────────────────────────────────────────────────
+
+const BORDERS = {
+  round: { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' },
+  heavy: { tl: '┏', tr: '┓', bl: '┗', br: '┛', h: '━', v: '┃' },
+  double: { tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║' },
+};
+
+/**
+ * Draws a framed panel around `content` (string or array of lines).
+ * `color` paints the border; `title` is embedded in the top edge.
+ */
+export function box(content, { title, color = c.gray, style = 'round', padding = 1, minWidth = 0 } = {}) {
+  const b = BORDERS[style];
+  const lines = (Array.isArray(content) ? content : String(content).split('\n'));
+  const titleWidth = title ? visibleWidth(title) + 4 : 0;
+  const inner = Math.max(minWidth, titleWidth, ...lines.map((l) => visibleWidth(l) + padding * 2));
+  const pad = ' '.repeat(padding);
+
+  let top;
+  if (title) {
+    const head = `${b.h} ${title} `;
+    top = color(b.tl + b.h) + c.bold(` ${title} `) + color(b.h.repeat(Math.max(0, inner - visibleWidth(head))) + b.tr);
+  } else {
+    top = color(b.tl + b.h.repeat(inner) + b.tr);
+  }
+  const body = lines.map((l) => color(b.v) + padEnd(pad + l, inner) + color(b.v));
+  const bottom = color(b.bl + b.h.repeat(inner) + b.br);
+  return [top, ...body, bottom].map((l) => '  ' + l).join('\n');
+}
+
+/** Two-column key/value rows with the keys right-padded to the same width. */
+export function table(rows, { keyColor = c.gray } = {}) {
+  const kw = Math.max(...rows.map(([k]) => visibleWidth(k)));
+  return rows.map(([k, v]) => `${keyColor(padEnd(k, kw))}  ${v}`);
+}
+
+export function progressBar(done, total, width = 24) {
+  const filled = Math.round((done / total) * width);
+  const bar = '━'.repeat(filled);
+  return gradient(bar, { span: width }) + c.gray('─'.repeat(width - filled));
+}
+
+export function stepHeader(n, total, title) {
+  const label = c.bold(`Paso ${n}/${total}`);
+  return `\n  ${progressBar(n - 1, total)}  ${label} ${c.gray('·')} ${title}\n`;
+}
+
+export function rule(label = '', width = 64) {
+  if (!label) return '  ' + c.gray('─'.repeat(width));
+  const tail = Math.max(2, width - visibleWidth(label) - 4);
+  return `  ${c.gray('──')} ${label} ${c.gray('─'.repeat(tail))}`;
+}
+
+// ─── Spinner ────────────────────────────────────────────────────────────────
+
+const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+/**
+ * Runs `task` while showing an animated spinner (TTY only), keeping it
+ * visible for at least `minMs` so it doesn't flash by unreadably.
+ */
+export async function spin(text, task, { minMs = 450, stream = process.stdout } = {}) {
+  const started = Date.now();
+  let i = 0;
+  let timer;
+  if (stream.isTTY) {
+    stream.write('\x1b[?25l');
+    timer = setInterval(() => {
+      stream.write(`\r  ${rgb(...gradientAt((i % FRAMES.length) / (FRAMES.length - 1)))(FRAMES[i % FRAMES.length])} ${text}`);
+      i++;
+    }, 70);
+  }
+  try {
+    const result = await task();
+    const left = minMs - (Date.now() - started);
+    if (stream.isTTY && left > 0) await new Promise((r) => setTimeout(r, left));
+    return result;
+  } finally {
+    if (timer) {
+      clearInterval(timer);
+      stream.write('\r\x1b[2K\x1b[?25h');
+    }
+  }
+}
+
+export const sym = {
+  ok: () => c.green('✔'),
+  fail: () => c.red('✖'),
+  warn: () => c.yellow('▲'),
+  info: () => c.cyan('●'),
+  arrow: () => c.gray('›'),
+  dot: () => c.gray('·'),
+};
+
+// ─── Pipeline diagram ───────────────────────────────────────────────────────
+
+/**
+ * ASCII flow of the jobs build-mobile.yml will run for this configuration,
+ * mirroring the real job graph (detect → build-* → notify).
+ */
+export function pipeline({ projectType, buildAndroid, buildIos, createRelease }) {
+  const jobs = [];
+  if (projectType === 'electron') {
+    jobs.push(['electron · linux', 'ubuntu', '.AppImage']);
+    jobs.push(['electron · macos', 'macos', '.dmg']);
+    jobs.push(['electron · windows', 'windows', '.exe']);
+  } else {
+    if (buildAndroid) jobs.push(['build-android', 'ubuntu', '.apk  .aab']);
+    if (buildIos) jobs.push(['build-ios', 'macos', '.ipa']);
+  }
+
+  const JOB = 20;
+  const RUN = 10;
+  const node = (glyph, name, run, note) =>
+    `${padEnd(glyph, 4)}${c.bold(padEnd(name, JOB))}${c.gray(padEnd(`[${run}]`, RUN))} ${note}`;
+  const pipe = c.gray('│');
+
+  const lines = [
+    `${padEnd(c.cyan('◉'), 4)}${c.bold(padEnd('git push', JOB + RUN))} ${c.gray('main · PR · tags v* · manual')}`,
+    pipe,
+    node(c.cyan('◆'), 'detect', 'ubuntu', c.gray(`project_type: ${projectType}`)),
+    pipe,
+    ...jobs.map(([name, run, out]) => node(c.gray('├─▶'), name, run, `${c.gray('→')} ${c.green(out)}`)),
+    pipe,
+    node(c.magenta('◆'), 'notify', 'ubuntu', c.gray('resumen · Slack opcional')),
+  ];
+  if (createRelease) lines.push(`${padEnd(c.gray('└─▶'), 4)}${c.yellow(padEnd('GitHub Release', JOB + RUN))} ${c.gray('adjunta los builds en tags v*')}`);
+  return lines;
+}
+
+// ─── YAML highlighting ──────────────────────────────────────────────────────
+
+/** Minimal line-based YAML coloring, enough for the workflow we generate. */
+export function highlightYaml(yaml) {
+  return yaml
+    .replace(/\n$/, '')
+    .split('\n')
+    .map((line, i) => {
+      const num = c.gray(String(i + 1).padStart(2, ' ') + ' │ ');
+      if (!level) return num + line;
+      if (/^\s*#/.test(line)) return num + c.gray(line);
+      const m = line.match(/^(\s*)(-\s+)?([\w.-]+)(:)(\s*)(.*)$/);
+      if (!m) return num + line;
+      const [, ind, dash = '', key, colon, sp, value] = m;
+      let v = value;
+      if (/^(true|false)$/.test(value)) v = c.magenta(value);
+      else if (/^\[.*\]$/.test(value)) v = c.yellow(value);
+      else if (/^["']/.test(value)) v = c.yellow(value);
+      else if (value) v = c.green(value);
+      return num + ind + c.gray(dash) + c.cyan(key) + c.gray(colon) + sp + v;
+    })
+    .join('\n');
+}