@jpkme/diff-review 0.1.3 → 0.1.5

package/README.md

@@ -22,7 +22,23 @@ O sin instalar:
 npx @jpkme/diff-review
 ```
 
-Abre `http://127.0.0.1:5190`. Opciones: `--port`, `--host`, `--no-open`.
+### Modos
+
+Desde un **repo git**, el default es terminal-first:
+
+1. Elegís **branch** y **base** con prompts en la terminal (`@clack/prompts`; tipeá para filtrar).
+2. Copia el prompt al portapapeles y espera el JSON (`diff-rev_{branchTip}_{baseTip}.json`).
+3. Valida y abre el viewer con el reporte ya importado.
+
+Si pasás `--branch` y `--base` juntos, saltea los selects. Si quedan iguales (diff vacío), abre la UI.
+
+Para abrir la UI primero (sin esperar el JSON):
+
+```bash
+diff-review --ui
+```
+
+Opciones: `--port`, `--host`, `--base`, `--branch`, `--no-open`.
 
 Si lo lanzás desde un repositorio git, la UI precarga esa ruta y el branch actual.
 
@@ -35,12 +51,12 @@ npm run build            # build de producción → web/build
 npm start                # mismo que el bin global
 ```
 
-## Flujo
+## Flujo (UI)
 
-1. Pegá la ruta (o URL) del repo y elegí branch / base — o lanzá `diff-review` desde el repo y se precarga solo.
+1. Pegá la ruta (o URL) del repo y elegí branch / base — o lanzá `diff-review` / `diff-review --ui` desde el repo.
 2. Copiá el prompt (o el comando de skill `/diff-review`).
-3. Corrélo en tu agente; que escriba `diff-review-output.json`.
-4. Arrastrá ese JSON a la dropzone. La UI hidrata los diffs con git.
+3. Corrélo en tu agente; que escriba `diff-rev_{branchTip}_{baseTip}.json` (también acepta nombres legacy).
+4. Arrastrá ese JSON a la dropzone (o dejá que el CLI lo importe solo). La UI hidrata los diffs con git.
 
 "Ver ejemplo" carga un reporte de muestra sin tocar un repo.
 
@@ -84,7 +100,7 @@ y minificados.
 .
 ├── bin/          # CLI (diff-review)
 ├── schema.json   # contrato del JSON que escribe el agente
-├── lib/          # git / extract (dev + tests; va embebido en el build)
+├── lib/          # git / extract / prompt (dev + tests; va en el paquete)
 └── web/          # UI SvelteKit → web/build en el paquete npm
 ```
 

package/bin/diff-review.mjs

@@ -1,9 +1,11 @@
 #!/usr/bin/env node
 /**
- * CLI: levanta la UI local (build de SvelteKit) y abre el browser.
+ * CLI híbrido C:
+ *   diff-review              → terminal: elegir branch/base → prompt + wait JSON → viewer
+ *   diff-review --ui         → web-first (UI inmediata)
  *
- *   diff-review
  *   diff-review --port 5191
+ *   diff-review --branch x --base y   → saltea selects de Clack
  *   diff-review --no-open
  */
 
@@ -12,6 +14,13 @@ import { existsSync } from 'node:fs';
 import { createServer } from 'node:net';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import * as p from '@clack/prompts';
+import { autocompleteEs } from '../lib/autocomplete-es.mjs';
+import { copyTextToClipboard } from '../lib/clipboard.mjs';
+import { branchTips, getRemoteUrl, listBranches, tryResolveGitRoot } from '../lib/git.mjs';
+import { makeOutputFilename } from '../lib/output-name.mjs';
+import { buildPrompt } from '../lib/prompt.mjs';
+import { waitForReviewOutput } from '../lib/wait-output.mjs';
 
 const here = dirname(fileURLToPath(import.meta.url));
 const packageRoot = join(here, '..');
@@ -37,14 +46,22 @@ function resolveNodeBin() {
 }
 
 function printHelp() {
-	console.log(`diff-review — UI local para revisar un branch con tu agente.
+	console.log(`diff-review — review de branch con tu agente + UI local.
 
 Usage:
   diff-review [options]
 
+Por defecto (desde un repo git): elegís branch/base en la terminal (Clack),
+copia el prompt, espera el JSON y abre el viewer.
+Si pasás --branch y --base juntos, saltea los selects.
+Con --ui: abre la UI de inmediato (web-first).
+
 Options:
   -p, --port <n>   Puerto (default ${DEFAULT_PORT})
       --host <h>   Host (default ${DEFAULT_HOST})
+      --ui         Abrir la UI primero (sin esperar JSON)
+      --base <b>   Base del merge-base (salta el select de base)
+      --branch <b> Branch a revisar (salta el select de branch)
       --no-open    No abrir el navegador
   -h, --help       Esta ayuda
 
@@ -53,12 +70,23 @@ Requiere git en PATH. Los reportes viven en localStorage del navegador.
 }
 
 function parseArgs(argv) {
-	const opts = { port: DEFAULT_PORT, host: DEFAULT_HOST, open: true, help: false };
+	const opts = {
+		port: DEFAULT_PORT,
+		host: DEFAULT_HOST,
+		open: true,
+		help: false,
+		ui: false,
+		base: '',
+		branch: ''
+	};
 	for (let i = 0; i < argv.length; i++) {
 		const a = argv[i];
 		if (a === '-h' || a === '--help') opts.help = true;
 		else if (a === '--no-open') opts.open = false;
+		else if (a === '--ui') opts.ui = true;
 		else if (a === '--host') opts.host = argv[++i] || opts.host;
+		else if (a === '--base') opts.base = argv[++i] || opts.base;
+		else if (a === '--branch') opts.branch = argv[++i] || opts.branch;
 		else if (a === '-p' || a === '--port') {
 			const n = Number(argv[++i]);
 			if (!Number.isFinite(n) || n <= 0) {
@@ -105,13 +133,172 @@ function canListen(host, port) {
 	});
 }
 
-async function main() {
-	const opts = parseArgs(process.argv.slice(2));
-	if (opts.help) {
-		printHelp();
+/**
+ * @returns {{
+ *   repo: string,
+ *   listed: { branches: string[], current: string, defaultBase: string },
+ *   remoteUrl?: string
+ * } | null}
+ */
+function loadRepoLaunch() {
+	const cwd = process.cwd();
+	const root = tryResolveGitRoot(cwd);
+	if (!root) return null;
+	const listed = listBranches(root);
+	const remoteUrl = getRemoteUrl(root) || undefined;
+	return { repo: root, listed, remoteUrl };
+}
+
+function defaultBranch(listed) {
+	return listed.current && listed.current !== 'HEAD' ? listed.current : listed.branches[0] || '';
+}
+
+function defaultBase(listed, branch) {
+	const preferred = listed.branches.includes('develop') ? 'develop' : listed.defaultBase;
+	if (preferred && preferred !== branch) return preferred;
+	return listed.branches.find((b) => b !== branch) || preferred || '';
+}
+
+function branchOptions(listed) {
+	return listed.branches.map((b) => ({
+		value: b,
+		label: b,
+		hint: b === listed.current ? 'actual' : b === listed.defaultBase ? 'base típica' : undefined
+	}));
+}
+
+function ensureValue(value, label) {
+	if (p.isCancel(value)) {
+		p.cancel('Cancelado.');
 		process.exit(0);
 	}
+	if (value == null || value === '') {
+		p.cancel(`Falta ${label}.`);
+		process.exit(1);
+	}
+	return /** @type {string} */ (value);
+}
+
+/**
+ * Selects interactivos salvo que --branch y --base vengan juntos.
+ * @param {{ listed: { branches: string[], current: string, defaultBase: string }, repo: string }} launch
+ * @param {{ branch: string, base: string }} opts
+ */
+async function resolveBranchBase(launch, opts) {
+	const flagBranch = String(opts.branch || '').trim();
+	const flagBase = String(opts.base || '').trim();
+	const bothFlags = Boolean(flagBranch && flagBase);
+
+	if (bothFlags) {
+		return { branch: flagBranch, base: flagBase, prompted: false };
+	}
+
+	if (!p.isTTY) {
+		const branch = flagBranch || defaultBranch(launch.listed);
+		const base = flagBase || defaultBase(launch.listed, branch);
+		return { branch, base, prompted: false };
+	}
+
+	if (!launch.listed.branches.length) {
+		p.cancel('No hay branches en este repo.');
+		process.exit(1);
+	}
+
+	const options = branchOptions(launch.listed);
+	p.intro('diff-review');
+	p.log.info(launch.repo);
+
+	let branch = flagBranch;
+	if (!branch) {
+		branch = ensureValue(
+			await autocompleteEs({
+				message: 'Branch a revisar',
+				options,
+				initialValue: defaultBranch(launch.listed) || undefined,
+				maxItems: 12
+			}),
+			'branch'
+		);
+	} else {
+		p.log.step(`Branch: ${branch}`);
+	}
+
+	let base = flagBase;
+	if (!base) {
+		base = ensureValue(
+			await autocompleteEs({
+				message: 'Base (merge-base)',
+				options,
+				initialValue: defaultBase(launch.listed, branch) || undefined,
+				maxItems: 12
+			}),
+			'base'
+		);
+	} else {
+		p.log.step(`Base: ${base}`);
+	}
+
+	while (branch === base) {
+		p.log.warn(`Branch y base son iguales (${branch}): el diff estaría vacío.`);
+		base = ensureValue(
+			await autocompleteEs({
+				message: 'Elegí otra base',
+				options,
+				initialValue: defaultBase(launch.listed, branch) || undefined,
+				maxItems: 12
+			}),
+			'base'
+		);
+	}
+
+	return { branch, base, prompted: true };
+}
+
+function buildOutputFilename(repo, branch, base) {
+	try {
+		const tips = branchTips(repo, branch, base);
+		return makeOutputFilename({
+			branchSha: tips.branchSha,
+			baseSha: tips.baseSha
+		});
+	} catch (err) {
+		console.warn(
+			'No pude resolver tips para el nombre del JSON:',
+			err instanceof Error ? err.message : err
+		);
+		return makeOutputFilename({});
+	}
+}
+
+function copyPromptOrWarn(prompt) {
+	if (copyTextToClipboard(prompt)) return true;
+	p.log.warn(
+		'No pude copiar al portapapeles. Copiá el prompt a mano desde la terminal o reintentá.'
+	);
+	return false;
+}
+
+function explainWaitingForAgent(outputFilename, { copied, useClack }) {
+	const copyMsg = copied
+		? 'Se copió un prompt al portapapeles: pegalo en el chat de tu agente de IA para generar el contenido de la review.'
+		: 'Generá el JSON con tu agente de IA usando el prompt de esta sesión (no se pudo copiar solo al portapapeles).';
+	const waitMsg = `Aguardando el resultado del agente (${outputFilename} en la raíz del repo). La UI web se abre cuando ese archivo esté listo.`;
+
+	if (useClack) {
+		p.log.success(copyMsg);
+		p.log.info(waitMsg);
+		p.outro('Ctrl+C cancela la espera.');
+		return;
+	}
+	console.log(copyMsg);
+	console.log(waitMsg);
+	console.log('(Ctrl+C cancela la espera)');
+}
 
+/**
+ * @param {{ host: string, port: number, open: boolean, launchCwd: string, importFile?: string, openPath?: string }} cfg
+ */
+async function startServer(cfg) {
 	if (!existsSync(entry)) {
 		console.error(`No encontré el build en ${entry}
 Corré desde el repo: npm run build
@@ -119,23 +306,23 @@ O reinstalá el paquete (el tarball de npm incluye el build).`);
 		process.exit(1);
 	}
 
-	if (!(await canListen(opts.host, opts.port))) {
-		console.error(`No se pudo usar ${opts.host}:${opts.port} (¿ocupado?). Probá --port otro.`);
+	if (!(await canListen(cfg.host, cfg.port))) {
+		console.error(`No se pudo usar ${cfg.host}:${cfg.port} (¿ocupado?). Probá --port otro.`);
 		process.exit(1);
 	}
 
-	const origin = `http://${opts.host}:${opts.port}`;
+	const origin = `http://${cfg.host}:${cfg.port}`;
+	const openUrl = cfg.openPath ? `${origin}${cfg.openPath}` : origin;
 	const nodeBin = resolveNodeBin();
-	/** CWD del usuario al invocar el CLI (el server corre desde web/build). */
-	const launchCwd = process.cwd();
 	const child = spawn(nodeBin, [entry], {
 		cwd: buildDir,
 		env: {
 			...process.env,
-			HOST: opts.host,
-			PORT: String(opts.port),
+			HOST: cfg.host,
+			PORT: String(cfg.port),
 			ORIGIN: origin,
-			DIFF_REVIEW_LAUNCH_CWD: launchCwd
+			DIFF_REVIEW_LAUNCH_CWD: cfg.launchCwd,
+			...(cfg.importFile ? { DIFF_REVIEW_IMPORT_FILE: cfg.importFile } : {})
 		},
 		stdio: ['ignore', 'pipe', 'inherit'],
 		windowsHide: false
@@ -152,7 +339,7 @@ O reinstalá el paquete (el tarball de npm incluye el build).`);
 				if (!ready) {
 					ready = true;
 					console.log(`diff-review listo en ${terminalLink(origin)} — Ctrl+C para salir.`);
-					if (opts.open) openBrowser(origin);
+					if (cfg.open) openBrowser(openUrl);
 				}
 				continue;
 			}
@@ -175,4 +362,127 @@ O reinstalá el paquete (el tarball de npm incluye el build).`);
 	process.on('SIGTERM', stop);
 }
 
-main();
+async function runUiMode(opts, launch, launchCwd) {
+	const listed = launch?.listed;
+	const branch = String(opts.branch || '').trim() || (listed ? defaultBranch(listed) : '');
+	const base =
+		String(opts.base || '').trim() || (listed ? defaultBase(listed, branch) : 'develop');
+	const outputFilename = launch
+		? buildOutputFilename(launch.repo, branch, base)
+		: makeOutputFilename({});
+
+	if (launch) {
+		console.log(`Repo:   ${launch.repo}`);
+		console.log(`Branch: ${branch}  (base: ${base})`);
+		const prompt = buildPrompt(
+			{
+				source: 'local',
+				repo: launch.repo,
+				branch,
+				base,
+				remoteUrl: launch.remoteUrl
+			},
+			{ outputFilename }
+		);
+		if (copyTextToClipboard(prompt)) {
+			console.log('Prompt copiado al portapapeles.');
+		} else {
+			console.log('No pude copiar al portapapeles; pegá el prompt a mano desde la UI o reintentá.');
+		}
+	} else {
+		console.log('Sin repo git en el CWD — la UI arranca vacía.');
+	}
+
+	await startServer({
+		host: opts.host,
+		port: opts.port,
+		open: opts.open,
+		launchCwd,
+		openPath: launch ? `/?notify=prompt&out=${encodeURIComponent(outputFilename)}` : '/'
+	});
+}
+
+async function main() {
+	const opts = parseArgs(process.argv.slice(2));
+	if (opts.help) {
+		printHelp();
+		process.exit(0);
+	}
+
+	const launchCwd = process.cwd();
+	const launch = loadRepoLaunch();
+
+	if (opts.ui) {
+		await runUiMode(opts, launch, launchCwd);
+		return;
+	}
+
+	if (!launch) {
+		console.error(
+			'No hay un repositorio git en el directorio actual.\nUsá --ui para abrir la interfaz, o corré diff-review desde un repo.'
+		);
+		process.exit(1);
+	}
+
+	const { branch, base, prompted } = await resolveBranchBase(launch, opts);
+
+	if (branch === base) {
+		// Ambos flags iguales / sin TTY: no se puede corregir en selects.
+		console.log(
+			`Branch y base son iguales (${branch}): el diff estaría vacío.\nAbro la UI para que elijas otra combinación.`
+		);
+		await startServer({
+			host: opts.host,
+			port: opts.port,
+			open: opts.open,
+			launchCwd,
+			openPath: '/'
+		});
+		return;
+	}
+
+	const outputFilename = buildOutputFilename(launch.repo, branch, base);
+
+	if (!prompted) {
+		console.log(`Repo:   ${launch.repo}`);
+		console.log(`Branch: ${branch}  (base: ${base})`);
+	} else {
+		p.note(`${branch}  ←  ${base}\n${outputFilename}`, 'Review');
+	}
+
+	const prompt = buildPrompt(
+		{
+			source: 'local',
+			repo: launch.repo,
+			branch,
+			base,
+			remoteUrl: launch.remoteUrl
+		},
+		{ outputFilename }
+	);
+
+	const copied = copyPromptOrWarn(prompt);
+	explainWaitingForAgent(outputFilename, { copied, useClack: prompted });
+
+	const result = await waitForReviewOutput(launch.repo, outputFilename, {
+		onInvalid: (errors) => {
+			console.log(`JSON encontrado pero inválido (${errors.length} error(es)). Esperando corrección…`);
+			for (const e of errors.slice(0, 5)) console.log(`  · ${e}`);
+		}
+	});
+
+	console.log('JSON OK. Abriendo la UI web…');
+	await startServer({
+		host: opts.host,
+		port: opts.port,
+		open: opts.open,
+		launchCwd: launch.repo,
+		importFile: result.path,
+		openPath: '/?import=1'
+	});
+}
+
+main().catch((err) => {
+	console.error(err?.message || err);
+	process.exit(1);
+});

package/lib/autocomplete-es.mjs

@@ -0,0 +1,143 @@
+/**
+ * Autocomplete estilo Clack con etiquetas en español
+ * ("Buscar:" en lugar de "Search:").
+ */
+import { AutocompletePrompt, settings } from '@clack/core';
+import {
+	S_BAR,
+	S_BAR_END,
+	S_RADIO_ACTIVE,
+	S_RADIO_INACTIVE,
+	limitOptions,
+	symbol
+} from '@clack/prompts';
+import { styleText } from 'node:util';
+
+function optionLabel(opt) {
+	return opt.label ?? String(opt.value ?? '');
+}
+
+function defaultFilter(search, option) {
+	const q = String(search || '').toLowerCase();
+	if (!q) return true;
+	const label = optionLabel(option).toLowerCase();
+	const value = String(option.value ?? '').toLowerCase();
+	const hint = String(option.hint ?? '').toLowerCase();
+	return label.includes(q) || value.includes(q) || hint.includes(q);
+}
+
+/**
+ * @template Value
+ * @param {{
+ *   message: string,
+ *   options: Array<{ value: Value, label?: string, hint?: string, disabled?: boolean }>,
+ *   initialValue?: Value,
+ *   maxItems?: number,
+ *   placeholder?: string,
+ * }} opts
+ * @returns {Promise<Value | symbol>}
+ */
+export function autocompleteEs(opts) {
+	return new AutocompletePrompt({
+		options: opts.options,
+		initialValue: opts.initialValue !== undefined ? [opts.initialValue] : undefined,
+		filter: defaultFilter,
+		render() {
+			const withGuide = settings.withGuide;
+			const title = withGuide
+				? [`${styleText('gray', S_BAR)}`, `${symbol(this.state)}  ${opts.message}`]
+				: [`${symbol(this.state)}  ${opts.message}`];
+			const input = this.userInput;
+			const all = this.options;
+			const placeholder = opts.placeholder;
+			const showPlaceholder = input === '' && placeholder !== undefined;
+
+			const styleOption = (opt, kind) => {
+				const label = optionLabel(opt);
+				const hint =
+					opt.hint && opt.value === this.focusedValue ? styleText('dim', ` (${opt.hint})`) : '';
+				switch (kind) {
+					case 'active':
+						return `${styleText('green', S_RADIO_ACTIVE)} ${label}${hint}`;
+					case 'inactive':
+						return `${styleText('dim', S_RADIO_INACTIVE)} ${styleText('dim', label)}`;
+					case 'disabled':
+						return `${styleText('gray', S_RADIO_INACTIVE)} ${styleText(['strikethrough', 'gray'], label)}`;
+					default:
+						return label;
+				}
+			};
+
+			switch (this.state) {
+				case 'submit': {
+					const selected = this.selectedValues?.[0];
+					const label =
+						selected !== undefined
+							? `  ${styleText('dim', optionLabel(all.find((o) => o.value === selected) || { value: selected }))}`
+							: '';
+					const bar = withGuide ? styleText('gray', S_BAR) : '';
+					return `${title.join('\n')}\n${bar}${label}`;
+				}
+				case 'cancel': {
+					const typed = input ? `  ${styleText(['strikethrough', 'dim'], input)}` : '';
+					const bar = withGuide ? styleText('gray', S_BAR) : '';
+					return `${title.join('\n')}\n${bar}${typed}`;
+				}
+				default: {
+					const color = this.state === 'error' ? 'yellow' : 'cyan';
+					const prefix = withGuide ? `${styleText(color, S_BAR)}  ` : '';
+					const end = withGuide ? styleText(color, S_BAR_END) : '';
+
+					let field = '';
+					if (this.isNavigating || showPlaceholder) {
+						const shown = showPlaceholder ? placeholder : input;
+						field = shown !== '' ? ` ${styleText('dim', shown)}` : '';
+					} else {
+						field = ` ${this.userInputWithCursor}`;
+					}
+
+					const matchHint =
+						this.filteredOptions.length !== all.length
+							? styleText(
+									'dim',
+									` (${this.filteredOptions.length} coincidencia${this.filteredOptions.length === 1 ? '' : 's'})`
+								)
+							: '';
+
+					const lines = [...title];
+					if (withGuide) lines.push(`${prefix.trimEnd()}`);
+					lines.push(`${prefix}${styleText('dim', 'Buscar:')}${field}${matchHint}`);
+
+					if (this.filteredOptions.length === 0 && input) {
+						lines.push(`${prefix}${styleText('yellow', 'Sin coincidencias')}`);
+					}
+					if (this.state === 'error') {
+						lines.push(`${prefix}${styleText('yellow', this.error)}`);
+					}
+
+					const hints = [
+						`${styleText('dim', '↑/↓')} elegir`,
+						`${styleText('dim', 'Enter')} confirmar`,
+						`${styleText('dim', 'Escribí')} para filtrar`
+					];
+					const footer = [`${prefix}${hints.join(' · ')}`, end];
+
+					const options =
+						this.filteredOptions.length === 0
+							? []
+							: limitOptions({
+									cursor: this.cursor,
+									options: this.filteredOptions,
+									columnPadding: withGuide ? 3 : 0,
+									rowPadding: lines.length + footer.length,
+									style: (opt, active) =>
+										styleOption(opt, opt.disabled ? 'disabled' : active ? 'active' : 'inactive'),
+									maxItems: opts.maxItems
+								});
+
+					return [...lines, ...options.map((row) => `${prefix}${row}`), ...footer].join('\n');
+				}
+			}
+		}
+	}).prompt();
+}

package/lib/clipboard.mjs

@@ -0,0 +1,29 @@
+import { spawnSync } from "node:child_process";
+
+/** Copia texto al portapapeles del SO. Devuelve true si parece haber funcionado. */
+export function copyTextToClipboard(text) {
+  const value = String(text ?? "");
+  try {
+    if (process.platform === "win32") {
+      const r = spawnSync("clip", [], {
+        input: value,
+        encoding: "utf8",
+        windowsHide: true,
+      });
+      return r.status === 0;
+    }
+    if (process.platform === "darwin") {
+      const r = spawnSync("pbcopy", [], { input: value, encoding: "utf8" });
+      return r.status === 0;
+    }
+    let r = spawnSync("wl-copy", [], { input: value, encoding: "utf8" });
+    if (r.status === 0) return true;
+    r = spawnSync("xclip", ["-selection", "clipboard"], {
+      input: value,
+      encoding: "utf8",
+    });
+    return r.status === 0;
+  } catch {
+    return false;
+  }
+}