nexakit 0.1.0 → 0.2.0

package/plugins/nexakit-panel/hooks/panel.js

@@ -0,0 +1,279 @@
+// Lógica pura del panel: reduce los eventos de la sesión a un estado que el panel dibuja. Sin datos inventados:
+// todo sale de lo que el motor informa (pasos, subagentes, llamadas del servidor, herramientas).
+export const MAX_REGISTRO = 60;
+export const MAX_AGENTES = 8;
+
+export const crear = () => ({
+  lider: { modelo: null, esfuerzo: null, leidos: 0, escritos: 0, herramientas: 0 },
+  agentes: [],
+  asesor: { llamadas: 0, ultimo: null, tiempo: 0 },
+  registro: [],
+  pasos: 0,
+  recomendacion: null,
+  revisiones: [],
+});
+
+export function familia(modelo) {
+  const m = String(modelo ?? '').toLowerCase();
+  for (const nombre of ['haiku', 'sonnet', 'opus', 'fable']) if (m.includes(nombre)) return nombre;
+  return 'otro';
+}
+
+// «claude-sonnet-5-5» → «Sonnet 5.5»; ignora la fecha final de los identificadores largos.
+export function etiquetaModelo(modelo) {
+  if (!modelo) return 'modelo ?';
+  const m = String(modelo).toLowerCase().replace(/^claude-/u, '');
+  const partes = m.match(/^(haiku|sonnet|opus|fable)(?:-(\d{1,2})(?:-(\d{1,2}))?)?(?:-|$)/u);
+  if (!partes) return String(modelo);
+  const nombre = partes[1][0].toUpperCase() + partes[1].slice(1);
+  if (!partes[2]) return nombre;
+  return `${nombre} ${partes[2]}${partes[3] ? `.${partes[3]}` : ''}`;
+}
+
+const NIVELES = { low: 1, medium: 2, high: 3, xhigh: 4, max: 4 };
+export function barraEsfuerzo(esfuerzo) {
+  const llenos = NIVELES[esfuerzo] ?? 0;
+  return '▮'.repeat(llenos) + '▯'.repeat(4 - llenos);
+}
+
+export function duracion(ms) {
+  if (!Number.isFinite(ms) || ms < 1000) return '0 s';
+  if (ms < 60_000) return `${Math.round(ms / 1000)} s`;
+  return `${Math.floor(ms / 60_000)} min ${Math.round((ms % 60_000) / 1000)} s`;
+}
+
+export function hora(ms) {
+  const d = new Date(ms);
+  return [d.getHours(), d.getMinutes(), d.getSeconds()].map((n) => String(n).padStart(2, '0')).join(':');
+}
+
+const conRegistro = (estado, entrada) => ({ ...estado, registro: [...estado.registro, entrada].slice(-MAX_REGISTRO) });
+const nombreDe = (estado, id) => (id ? (estado.agentes.find((a) => a.id === id)?.nombre ?? 'agente') : 'líder');
+
+export function registrarPaso(estado, { modelo, esfuerzo, agentId }) {
+  if (agentId) {
+    return { ...estado, agentes: estado.agentes.map((a) => (a.id === agentId && modelo ? { ...a, modelo } : a)) };
+  }
+  return {
+    ...estado,
+    pasos: estado.pasos + 1,
+    lider: { ...estado.lider, modelo: modelo ?? estado.lider.modelo, esfuerzo: esfuerzo ?? estado.lider.esfuerzo },
+  };
+}
+
+export function iniciarAgente(estado, { id, nombre, modelo, at }) {
+  const agente = { id, nombre, modelo, estado: 'corriendo', inicio: at, fin: null, herramientas: 0, leidos: 0, escritos: 0, ultimo: '' };
+  return conRegistro(
+    { ...estado, agentes: [...estado.agentes, agente].slice(-MAX_AGENTES) },
+    { t: at, quien: nombre, texto: `empieza · ${etiquetaModelo(modelo)}` },
+  );
+}
+
+export function terminarAgente(estado, { id, ok, at }) {
+  const existe = estado.agentes.some((a) => a.id === id);
+  if (!existe) return estado;
+  const agentes = estado.agentes.map((a) => (a.id === id ? { ...a, estado: ok ? 'listo' : 'error', fin: at } : a));
+  return conRegistro({ ...estado, agentes }, { t: at, quien: nombreDe(estado, id), texto: ok ? 'terminó' : 'terminó con error' });
+}
+
+export function registrarHerramienta(estado, { tool, detalle, agentId, at }) {
+  const texto = detalle ? `${tool} · ${detalle}` : tool;
+  const agentes = agentId
+    ? estado.agentes.map((a) => (a.id === agentId ? { ...a, herramientas: a.herramientas + 1, ultimo: texto } : a))
+    : estado.agentes;
+  const lider = agentId ? estado.lider : { ...estado.lider, herramientas: (estado.lider.herramientas ?? 0) + 1 };
+  return conRegistro({ ...estado, agentes, lider }, { t: at, quien: nombreDe(estado, agentId), texto });
+}
+
+export function registrarAsesor(estado, { llamadas, at, tiempo = 0 }) {
+  if (!llamadas) return estado;
+  return conRegistro(
+    { ...estado, asesor: { llamadas: estado.asesor.llamadas + llamadas, ultimo: at, tiempo: (estado.asesor.tiempo ?? 0) + tiempo } },
+    { t: at, quien: 'asesor', texto: `consultado ${llamadas} ${llamadas === 1 ? 'vez' : 'veces'}`, ms: tiempo },
+  );
+}
+
+const esNumero = (valor) => typeof valor === 'number' && Number.isFinite(valor);
+// Línea de uso: solo lo que se conoce; undefined si no hay nada que mostrar.
+export function textoDeUso(uso) {
+  const partes = [];
+  if (esNumero(uso?.context?.percent)) partes.push(`contexto ${Math.round(uso.context.percent)} %`);
+  for (const limite of uso?.rateLimits ?? []) {
+    if (!esNumero(limite?.percentUsed)) continue;
+    if (limite.kind === 'five_hour') partes.push(`5 h ${Math.round(limite.percentUsed)} %`);
+    if (limite.kind === 'seven_day') partes.push(`semana ${Math.round(limite.percentUsed)} %`);
+  }
+  return partes.length > 0 ? partes.join(' · ') : undefined;
+}
+
+// --- Diagrama ---------------------------------------------------------------------------------------------------
+export function barra(fraccion, ancho) {
+  const valor = Number.isFinite(fraccion) ? Math.min(1, Math.max(0, fraccion)) : 0;
+  const llenos = Math.round(valor * ancho);
+  return '█'.repeat(llenos) + '░'.repeat(ancho - llenos);
+}
+
+export function resumenDelegacion(agentes) {
+  return {
+    total: agentes.length,
+    corriendo: agentes.filter((a) => a.estado === 'corriendo').length,
+    listos: agentes.filter((a) => a.estado === 'listo').length,
+    errores: agentes.filter((a) => a.estado === 'error').length,
+    herramientas: agentes.reduce((suma, a) => suma + a.herramientas, 0),
+  };
+}
+
+// Lo que se escribe en --model: la familia si se reconoce, y el texto tal cual si no.
+export function alias(modelo) {
+  if (!modelo) return '?';
+  const f = familia(modelo);
+  return f === 'otro' ? String(modelo) : f;
+}
+
+// La familia de subagentes más usada, en el orden en que aparecieron si hay empate.
+function familiaDominante(agentes) {
+  const cuentas = new Map();
+  for (const a of agentes) cuentas.set(familia(a.modelo), (cuentas.get(familia(a.modelo)) ?? 0) + 1);
+  let mejor = null;
+  for (const [nombre, n] of cuentas) if (mejor === null || n > cuentas.get(mejor)) mejor = nombre;
+  return mejor;
+}
+
+// «Haiku 5.5» si es la familia de subagentes más usada; null si no hay subagentes.
+export function etiquetaEnjambre(agentes) {
+  if (agentes.length === 0) return null;
+  const dominante = familiaDominante(agentes);
+  const representante = [...agentes].reverse().find((a) => familia(a.modelo) === dominante);
+  return etiquetaModelo(representante.modelo);
+}
+
+export function tituloDeOrquesta(estado) {
+  let titulo = 'NEXAKIT · ORQUESTA';
+  if (estado.lider.modelo) titulo += ` · ${etiquetaModelo(estado.lider.modelo).toUpperCase()} DIRIGE`;
+  const enjambre = etiquetaEnjambre(estado.agentes);
+  if (enjambre) titulo += ` · ${enjambre.toUpperCase()} EN ENJAMBRE`;
+  return titulo;
+}
+
+// Una etiqueta por familia de subagentes, el avance de la delegación y el asesor; solo lo que ocurre.
+export function estadoPorFamilia(estado) {
+  const partes = [];
+  const familias = [];
+  for (const a of estado.agentes) if (!familias.includes(familia(a.modelo))) familias.push(familia(a.modelo));
+  for (const nombre of familias) {
+    const suyos = estado.agentes.filter((a) => familia(a.modelo) === nombre);
+    const etiqueta = suyos.some((a) => a.estado === 'corriendo') ? 'enjambre' : suyos.some((a) => a.estado === 'error') ? 'con error' : 'listo';
+    partes.push(`${nombre === 'otro' ? 'agente' : nombre} [${etiqueta}]`);
+  }
+  if (estado.agentes.length > 0) {
+    const r = resumenDelegacion(estado.agentes);
+    partes.push(`subagentes [${r.total - r.corriendo}/${r.total}]`);
+  }
+  if (estado.asesor.llamadas > 0) partes.push(`asesor [consultado ${estado.asesor.llamadas}]`);
+  const ultimaPorIa = new Map((estado.revisiones ?? []).map((r) => [r.ia, r]));
+  for (const [ia, r] of ultimaPorIa) partes.push(`${ia} [${r.estado === 'revisando' ? 'revisando' : r.estado === 'lista' ? 'revisó' : 'falló'}]`);
+  return partes;
+}
+
+// Datos ficticios para ver el diseño sin esperar a que haya actividad real. Siempre se muestran marcados como ejemplo.
+export function ejemplo(ahora) {
+  const t = (segundos) => ahora - segundos * 1000;
+  let s = { ...registrarPaso(crear(), { modelo: 'claude-sonnet-5-5', esfuerzo: 'high' }), pasos: 24 };
+  s = registrarUso(s, { usage: { input_tokens: 8_400, output_tokens: 12_300, cache_read_input_tokens: 660_000, cache_creation_input_tokens: 0 } });
+  s = registrarAsesor(s, { llamadas: 1, at: t(95), tiempo: 4_200 });
+  s = iniciarAgente(s, { id: 'ej1', nombre: 'search', modelo: 'claude-haiku-5-5', at: t(40) });
+  s = iniciarAgente(s, { id: 'ej2', nombre: 'grep', modelo: 'claude-haiku-5-5', at: t(38) });
+  s = iniciarAgente(s, { id: 'ej3', nombre: 'audit', modelo: 'claude-haiku-5-5', at: t(36) });
+  s = registrarHerramienta(s, { tool: 'Glob', detalle: 'src/**/*.ts', agentId: 'ej1', at: t(31) });
+  s = registrarHerramienta(s, { tool: 'Grep', detalle: 'verifyToken', agentId: 'ej2', at: t(28) });
+  s = registrarHerramienta(s, { tool: 'Read', detalle: 'src/auth.ts', agentId: 'ej3', at: t(24) });
+  s = registrarHerramienta(s, { tool: 'Read', detalle: 'src/session.ts', agentId: 'ej3', at: t(20) });
+  s = registrarHerramienta(s, { tool: 'Bash', detalle: 'npm test', agentId: 'ej3', at: t(14) });
+  s = registrarUso(s, { agentId: 'ej1', usage: { input_tokens: 41_000, output_tokens: 900, cache_read_input_tokens: 0, cache_creation_input_tokens: 0 } });
+  s = registrarUso(s, { agentId: 'ej2', usage: { input_tokens: 72_000, output_tokens: 1_400, cache_read_input_tokens: 0, cache_creation_input_tokens: 0 } });
+  s = registrarUso(s, { agentId: 'ej3', usage: { input_tokens: 230_000, output_tokens: 3_100, cache_read_input_tokens: 0, cache_creation_input_tokens: 0 } });
+  s = terminarAgente(s, { id: 'ej3', ok: true, at: t(10) });
+  s = registrarHerramienta(s, { tool: 'Edit', detalle: 'src/auth.ts', at: t(8) });
+  s = registrarAsesor(s, { llamadas: 1, at: t(5), tiempo: 2_800 });
+  return s;
+}
+
+// Uso real de cada paso: leídos = entrada + caché leída + caché escrita; escritos = salida.
+export function registrarUso(estado, { agentId, usage }) {
+  if (!usage) return estado;
+  const leidos = (usage.input_tokens ?? 0) + (usage.cache_read_input_tokens ?? 0) + (usage.cache_creation_input_tokens ?? 0);
+  const escritos = usage.output_tokens ?? 0;
+  if (agentId) {
+    return { ...estado, agentes: estado.agentes.map((a) => (a.id === agentId ? { ...a, leidos: a.leidos + leidos, escritos: a.escritos + escritos } : a)) };
+  }
+  return { ...estado, lider: { ...estado.lider, leidos: estado.lider.leidos + leidos, escritos: estado.lider.escritos + escritos } };
+}
+
+export function tokens(n) {
+  if (!Number.isFinite(n) || n < 1000) return String(Math.max(0, Math.round(n || 0)));
+  if (n < 1_000_000) {
+    const k = n / 1000;
+    return `${k < 10 ? Math.round(k * 10) / 10 : Math.round(k)}k`;
+  }
+  return `${Math.round(n / 100_000) / 10}M`;
+}
+
+// La recomendación que registra el mod nexakit-modelo, observada en su llamada.
+export function registrarRecomendacion(estado, { modelo, esfuerzo, motivo }) {
+  return { ...estado, recomendacion: { modelo, esfuerzo, motivo } };
+}
+
+// Tacha los secretos evidentes de un detalle antes de mostrarlo o guardarlo en disco.
+export function sinSecretos(texto) {
+  return String(texto)
+    .replace(/\b([A-Za-z0-9_]*(?:TOKEN|KEY|SECRET|PASSWORD|PASSWD)[A-Za-z0-9_]*)=([^\s"']+)/giu, '$1=***')
+    .replace(/(Bearer\s+)[^\s"']+/giu, '$1***')
+    .replace(/(--?(?:password|passwd|token|secret|api-key)[= ])[^\s"']+/giu, '$1***');
+}
+
+// --- Revisiones que la sesión manda a otra IA con `nexakit revision --con <ia>` -----------------------------------
+export function esRevision(comando) {
+  const c = String(comando ?? '');
+  if (!/nexakit(?:\.cmd)?['"]?\s+revision\b/u.test(c) || /--disponibles\b/u.test(c)) return null;
+  const valor = (bandera) => {
+    const m = c.match(new RegExp(`${bandera}\\s+(?:"([^"]+)"|'([^']+)'|(\\S+))`, 'u'));
+    return m ? (m[1] ?? m[2] ?? m[3]) : null;
+  };
+  const ia = valor('--con');
+  return ia ? { ia, modelo: valor('--modelo'), esfuerzo: valor('--esfuerzo') } : null;
+}
+
+// Las dos líneas fijas que imprime `nexakit revision` al terminar: modelo que respondió y tokens.
+export function leerSalidaRevision(texto) {
+  const t = String(texto ?? '');
+  const numero = (v) => (v && /^\d+$/u.test(v.trim()) ? Number(v.trim()) : null);
+  const tokensLinea = t.match(/Tokens: entrada (.+?) \(caché (.+?)\) · salida (.+?)\s*$/mu);
+  const respondio = t.match(/Modelo que respondió: (.+?) · /u)?.[1]?.trim();
+  return {
+    respondio: respondio && respondio !== 'no informado' ? respondio : null,
+    entrada: numero(tokensLinea?.[1]),
+    cache: numero(tokensLinea?.[2]),
+    salida: numero(tokensLinea?.[3]),
+  };
+}
+
+export function iniciarRevision(estado, { id, ia, modelo, esfuerzo, at }) {
+  const revision = { id, ia, modelo, esfuerzo, estado: 'revisando', inicio: at, fin: null, entrada: null, cache: null, salida: null, respondio: null };
+  return conRegistro(
+    { ...estado, revisiones: [...(estado.revisiones ?? []), revision].slice(-4) },
+    { t: at, quien: ia, texto: `revisión · ${modelo ?? 'modelo ?'}${esfuerzo ? ` · ${esfuerzo}` : ''}` },
+  );
+}
+
+export function terminarRevision(estado, { id, ok, at, cifras }) {
+  if (!(estado.revisiones ?? []).some((r) => r.id === id)) return estado;
+  let ia = '';
+  const revisiones = estado.revisiones.map((r) => {
+    if (r.id !== id) return r;
+    ia = r.ia;
+    const datos = Object.fromEntries(Object.entries(cifras ?? {}).filter(([, v]) => v != null));
+    return { ...r, ...datos, estado: ok ? 'lista' : 'error', fin: at };
+  });
+  const total = (cifras?.entrada ?? 0) + (cifras?.salida ?? 0);
+  return conRegistro({ ...estado, revisiones }, { t: at, quien: ia, texto: ok ? `revisión lista${total ? ` · tokens ${tokens(total)}` : ''}` : 'revisión falló' });
+}

package/plugins/nexakit-panel/hooks/register.tsx

@@ -0,0 +1,248 @@
+import { atom, read, update } from 'claude-code'
+import type { Register } from 'claude-code'
+
+import type { PanelEstado } from '../types'
+import { ANCHO, dibujar, medidoresDeUso, modeloFrenteARecomendado, tramosParaPanel } from './lienzo.js'
+import {
+  alias, barra, barraEsfuerzo, crear, duracion, ejemplo, estadoPorFamilia, etiquetaEnjambre, etiquetaModelo, familia, hora, iniciarAgente,
+  registrarAsesor, registrarHerramienta, registrarPaso, registrarRecomendacion, registrarUso, resumenDelegacion, sinSecretos,
+  esRevision, iniciarRevision, leerSalidaRevision, terminarRevision, terminarAgente, textoDeUso, tituloDeOrquesta,
+} from './panel.js'
+
+const PANE = 'panel'
+const TITULO = 'Orquesta'
+// Desde este ancho cabe el diagrama de varias columnas; por debajo se dibuja una lista vertical.
+const ANCHO_DIAGRAMA = ANCHO
+const RECOMENDACION = 'mcp__nexakit-modelo__nexakit_recomendacion'
+// Cambia la etiqueta cuando cambien los campos del estado: descarta lo que guardó una versión anterior.
+const panel = atom({ plugin: 'nexakit-panel', key: 'panel' } as const, crear() as PanelEstado, { shape: 'panel-4' })
+// Con `/panel-demo` el panel enseña datos de ejemplo (marcados como tales) sin tocar los reales.
+const demo = atom({ plugin: 'nexakit-panel', key: 'demo' } as const, false, { shape: 'demo-1' })
+
+const COLOR = {
+  sonnet: '#fb923c', haiku: '#60a5fa', opus: '#a78bfa', fable: '#f472b6', otro: '#9ca3af', ok: '#4ade80', error: '#f87171', marca: '#a78bfa',
+} as const
+const colorDe = (modelo: string | null) => COLOR[familia(modelo) as keyof typeof COLOR] ?? COLOR.otro
+
+// Un detalle corto de lo que hizo la herramienta, sin volcar contenido.
+const breve = (entrada: Record<string, unknown>) => {
+  const valor = entrada.file_path ?? entrada.command ?? entrada.pattern ?? entrada.path ?? entrada.description ?? entrada.url ?? ''
+  return sinSecretos(String(valor).replace(/\s+/gu, ' ')).slice(0, 48)
+}
+
+// Foto del estado real para `nexakit panel`, que la dibuja a pantalla completa en otra división de la terminal.
+async function guardarFoto($: Parameters<Parameters<Register>[0]>[1] extends never ? never : any) {
+  try {
+    const home = (await $.env.get('HOME')) || (await $.env.get('USERPROFILE'))
+    if (!home) return
+    const sesion = await $.session.id()
+    const estado = await read($, panel)
+    let uso = null
+    try { uso = await $.session.usage() } catch { /* sin uso */ }
+    let carpeta = ''
+    try { carpeta = String(await $.session.cwd()).split(/[\\/]/u).filter(Boolean).pop() ?? '' } catch { /* sin carpeta */ }
+    let asesorModelo: string | null = null
+    try { const valor = await $.settings.get('advisorModel'); asesorModelo = typeof valor === 'string' && valor ? valor : null } catch { /* sin ajuste */ }
+    const foto = JSON.stringify({ version: 1, sesion, actualizado: await $.clock.now(), carpeta, asesorModelo, uso, estado })
+    const carpetaFotos = `${home}/.nexakit/panel`
+    await $.fs.write(`${carpetaFotos}/${sesion}.json`, foto)
+    await $.fs.write(`${carpetaFotos}/actual.json`, foto)
+  } catch { /* la foto es un extra: nunca rompe la sesión */ }
+}
+
+export const register: Register = on => {
+  on('session.start', async ($, e, next) => {
+    await $.command.register({ name: 'panel', description: 'Abre el panel de la orquestación de esta sesión' })
+    await $.command.register({ name: 'panel-demo', description: 'Activa o desactiva datos de ejemplo en el panel, para ver el diseño' })
+    void $.ui.open({ id: PANE, title: TITULO, columns: ANCHO_DIAGRAMA })
+    return next(e)
+  })
+
+  on('command.run', { command: 'panel' }, async $ => {
+    await $.ui.open({ id: PANE, title: TITULO, columns: ANCHO_DIAGRAMA })
+    return { text: 'Panel de la orquestación abierto.' }
+  })
+
+  on('command.run', { command: 'panel-demo' }, async $ => {
+    const activo = !(await read($, demo))
+    await update($, demo, () => activo)
+    await $.ui.open({ id: PANE, title: TITULO, columns: ANCHO_DIAGRAMA })
+    return { text: activo ? 'Panel con datos de ejemplo (ficticios). Repite /panel-demo para volver a los reales.' : 'Panel con los datos reales de la sesión.' }
+  })
+
+  on('turn.step', async function* ($, e, next) {
+    try {
+      await update($, panel, s => registrarPaso(s, { modelo: e.model, esfuerzo: e.effort == null ? null : String(e.effort), agentId: e.agentId }))
+    } catch { /* observar nunca debe romper la sesión */ }
+    const result = yield* next(e)
+    try {
+      const asesor = (result?.serverToolUses ?? []).filter(uso => uso.name === 'advisor')
+      const at = await $.clock.now()
+      const usage = result?.usage ?? null
+      const agentId = e.agentId
+      await update($, panel, s => {
+        let siguiente = registrarUso(s, { agentId, usage })
+        if (asesor.length > 0) {
+          const tiempo = asesor.reduce((n, u) => n + Math.max(0, (u.endedAt ?? u.startedAt) - u.startedAt), 0)
+          siguiente = registrarAsesor(siguiente, { llamadas: asesor.length, at, tiempo })
+        }
+        return siguiente
+      })
+    } catch { /* idem */ }
+    await guardarFoto($)
+    return result
+  })
+
+  on('agent.spawn', async ($, e, next) => {
+    const salida = await next(e)
+    try {
+      if ('agentId' in salida && salida.agentId) {
+        const at = await $.clock.now()
+        const id = salida.agentId
+        const nombre = e.name ?? e.subagentType ?? e.description ?? 'agente'
+        await update($, panel, s => iniciarAgente(s, { id, nombre: String(nombre).slice(0, 24), modelo: salida.model ?? '', at }))
+        await guardarFoto($)
+      }
+    } catch { /* idem */ }
+    return salida
+  })
+
+  on('turn.complete', async ($, e, next) => {
+    try {
+      if (e.agentId) {
+        const at = await $.clock.now()
+        const id = e.agentId
+        await update($, panel, s => terminarAgente(s, { id, ok: e.reason === 'answer', at }))
+      }
+      await guardarFoto($)
+    } catch { /* idem */ }
+    return next(e)
+  })
+
+  on('tool.call', async ($, e, next) => {
+    const entrada = e as unknown as Record<string, unknown>
+    let revision: { id: string } | null = null
+    try {
+      const at = await $.clock.now()
+      const detalle = breve(entrada)
+      const pedida = e.tool === 'Bash' ? esRevision(entrada.command) : null
+      if (pedida) revision = { id: String(entrada.tool_use_id ?? at) }
+      await update($, panel, s => {
+        let siguiente = registrarHerramienta(s, { tool: e.tool, detalle, agentId: e.agentId, at })
+        if (e.tool === RECOMENDACION) {
+          siguiente = registrarRecomendacion(siguiente, { modelo: String(entrada.model ?? ''), esfuerzo: String(entrada.effort ?? ''), motivo: String(entrada.reason ?? '') })
+        }
+        if (pedida && revision) siguiente = iniciarRevision(siguiente, { id: revision.id, ...pedida, at })
+        return siguiente
+      })
+      await guardarFoto($)
+    } catch { /* idem */ }
+    const resultado = await next(e)
+    if (revision) {
+      try {
+        const at = await $.clock.now()
+        const r = resultado as { result?: { stdout?: string }; text?: string; isError?: boolean; deny?: string }
+        const cifras = leerSalidaRevision(r?.result?.stdout ?? r?.text ?? '')
+        const id = revision.id
+        await update($, panel, s => terminarRevision(s, { id, ok: !r?.isError && !r?.deny, at, cifras }))
+        await guardarFoto($)
+      } catch { /* idem */ }
+    }
+    return resultado
+  })
+
+  on('session.end', async ($, e, next) => {
+    try { await update($, panel, () => crear() as PanelEstado) } catch { /* idem */ }
+    return next(e)
+  })
+
+  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
+    const { Box, Text } = $.ui.resolve(e)
+    const ahora = await $.clock.now()
+    const esEjemplo = await read($, demo)
+    const s = esEjemplo ? ejemplo(ahora) : await read($, panel)
+    let uso = null
+    try { uso = await $.session.usage() } catch { /* sin datos de uso: el panel sigue */ }
+    let carpeta = ''
+    try { carpeta = String(await $.session.cwd()).split('/').filter(Boolean).pop() ?? '' } catch { /* sin directorio */ }
+    const linea = textoDeUso(uso)
+    const ancho = (e.props as { bodyColumns?: number } | undefined)?.bodyColumns ?? e.viewport?.columns ?? 80
+    const filas = Math.max(6, (e.viewport?.rows ?? 30) - 4)
+    const vacio = !esEjemplo && s.pasos === 0 && s.agentes.length === 0 && s.registro.length === 0
+    const quienColor = (quien: string) => {
+      if (quien === 'líder') return colorDe(s.lider.modelo)
+      if (quien === 'asesor') return COLOR.opus
+      const agente = s.agentes.find(a => a.nombre === quien)
+      return agente ? colorDe(agente.modelo) : COLOR.otro
+    }
+
+    let asesorModelo: string | null = null
+    try { const valor = await $.settings.get('advisorModel'); asesorModelo = typeof valor === 'string' && valor ? valor : null } catch { /* sin ajuste */ }
+
+    // ---- Diagrama exacto, carácter a carácter, cuando cabe -------------------------------------------------
+    if (ancho >= ANCHO) {
+      const { filas: lineas } = dibujar(s, { ahora, uso, carpeta, filasMax: e.viewport?.rows, asesorModelo, esEjemplo })
+      return (
+        <Box flexDirection="column">
+          {tramosParaPanel(lineas).map(tramos => (
+            <Box flexDirection="row">
+              {tramos.map(t => (
+                <Text mono wrap="truncate" color={t.c} bold={t.b} dimColor={t.d} backgroundColor={t.bg}>{t.t}</Text>
+              ))}
+            </Box>
+          ))}
+        </Box>
+      )
+    }
+
+    // ---- Versión estrecha: lista vertical, con aviso de cómo ver el diagrama ------------------------------
+    {
+      return (
+        <Box flexDirection="column" gap={1}>
+          <Text bold color={COLOR.marca}>NEXAKIT · ORQUESTA</Text>
+          {esEjemplo && <Text color="#facc15">EJEMPLO · datos ficticios para ver el diseño</Text>}
+          <Text dimColor>{`El diagrama completo necesita ${ANCHO} columnas (ahora ${ancho}). Amplía la ventana o el panel.`}</Text>
+          {vacio && <Text dimColor>Aún no hay actividad en esta sesión.</Text>}
+
+          {s.lider.modelo && (
+            <Box flexDirection="column" borderStyle="round" borderColor={colorDe(s.lider.modelo)} paddingX={1}>
+              <Text bold color={colorDe(s.lider.modelo)}>{`${etiquetaModelo(s.lider.modelo)} · sesión principal`}</Text>
+              <Text>{`esfuerzo ${barraEsfuerzo(s.lider.esfuerzo)} ${s.lider.esfuerzo ?? ''}`.trimEnd()}</Text>
+            </Box>
+          )}
+
+          {s.asesor.llamadas > 0 && (
+            <Box flexDirection="column" borderStyle="round" borderColor={COLOR.opus} paddingX={1}>
+              <Text bold color={COLOR.opus}>{`Asesor · consultas ${s.asesor.llamadas}`}</Text>
+              {s.asesor.ultimo != null && <Text dimColor>{`última a las ${hora(s.asesor.ultimo)}`}</Text>}
+            </Box>
+          )}
+
+          {s.agentes.length > 0 && <Text bold>Subagentes</Text>}
+          {s.agentes.map(agente => (
+            <Box key={agente.id} flexDirection="column" borderStyle="round" borderColor={colorDe(agente.modelo)} paddingX={1}>
+              <Text bold color={colorDe(agente.modelo)}>{agente.nombre}</Text>
+              <Text dimColor>{etiquetaModelo(agente.modelo)}</Text>
+              <Text color={agente.estado === 'listo' ? COLOR.ok : agente.estado === 'error' ? COLOR.error : undefined}>
+                {agente.estado === 'listo' ? '✓ listo' : agente.estado === 'error' ? '✗ con error' : '● corriendo'}
+              </Text>
+              <Text dimColor>{`${agente.herramientas} herramientas · ${duracion((agente.fin ?? ahora) - agente.inicio)}`}</Text>
+            </Box>
+          ))}
+
+          {s.registro.length > 0 && (
+            <Box flexDirection="column" borderStyle="single" borderColor={COLOR.otro} paddingX={1}>
+              <Text bold dimColor>registro</Text>
+              {s.registro.slice(-filas).map(r => (
+                <Text>{`${hora(r.t)}  ${r.quien}  ${r.texto}`}</Text>
+              ))}
+            </Box>
+          )}
+
+          {medidoresDeUso(uso).length > 0 && <Text dimColor>{medidoresDeUso(uso).map(([n, p]) => `${n} ${barra(p / 100, 8)} ${Math.round(p)} %`).join('   ')}</Text>}
+          {s.lider.modelo && (() => { const m = modeloFrenteARecomendado(s); return <Text color={m.coincide ? COLOR.ok : '#facc15'}>{`${m.actual}${m.cola}`}</Text> })()}
+        </Box>
+      )
+    }
+  })
+}

package/plugins/nexakit-panel/tests/lienzo.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, test } from 'claude-code/testing';
+import { ANCHO, aAnsi, dibujar, texto } from '../hooks/lienzo.js';
+import { crear, ejemplo, iniciarRevision, registrarPaso, registrarRecomendacion } from '../hooks/panel.js';
+
+const AHORA = 1_800_000_000_000;
+const USO = { context: { window: 1000000, percent: 31 }, rateLimits: [{ kind: 'five_hour', percentUsed: 43 }, { kind: 'seven_day', percentUsed: 60 }] };
+const demo = () => texto(dibujar(ejemplo(AHORA), { ahora: AHORA, uso: USO, carpeta: 'mi-app' }).filas);
+const cuenta = (lineas: string[], c: string) => lineas.join('').split(c).length - 1;
+
+describe('nexakit-panel · lienzo', () => {
+  test('cada línea mide exactamente el ancho del diagrama', () => {
+    const lineas = demo();
+    expect(ANCHO).toBe(104);
+    for (const l of lineas) expect([...l].length).toBe(ANCHO);
+  });
+
+  test('cabecera: título centrado, regla doble y leyenda', () => {
+    const l = demo();
+    expect(l[0]).toContain('NEXAKIT · ORQUESTA · SONNET 5.5 DIRIGE · HAIKU 5.5 EN ENJAMBRE');
+    expect(l[1]).toMatch(/═{90,}/);
+    expect(l[2]).toContain('■ sonnet 5.5 · líder');
+    expect(l[2]).toContain('■ haiku 5.5 · enjambre');
+    expect(l[2]).toContain('■ delegación');
+    expect(l[2]).toContain('■ asesor');
+  });
+
+  test('todas las cajas y conectores quedan cerrados', () => {
+    const l = demo();
+    expect(cuenta(l, '┌')).toBe(cuenta(l, '┐'));
+    expect(cuenta(l, '└')).toBe(cuenta(l, '┘'));
+  });
+
+  test('líder, delegación, subagentes en fila y vuelta al líder, con uso real', () => {
+    const l = demo().join('\n');
+    expect(l).toContain('Sonnet 5.5 · sesión principal');
+    expect(l).toMatch(/esfuerzo ▮▮▮▯ high/);
+    expect(l).toMatch(/leídos \S+ · escritos \S+/);
+    expect(l).toMatch(/DELEGACIÓN · subagentes +3/);
+    expect(l).toMatch(/listos +█*░* +1\/3/);
+    expect(l).toMatch(/corriendo +█*░* +2\/3/);
+    expect(l).toContain('delegar a subagentes · Haiku 5.5');
+    expect(l).toContain('de vuelta en Sonnet 5.5 · líder');
+    const fila = demo().find((x) => x.includes('search') && x.includes('grep') && x.includes('audit'));
+    expect(fila).toBeTruthy();
+  });
+
+  test('el porcentaje de cada subagente es su parte real del uso y suma 100', () => {
+    const fila = demo().find((x) => (x.match(/\d+%/g) ?? []).length === 3)!;
+    expect(fila).toBeTruthy();
+    const suma = (fila.match(/(\d+)%/g) ?? []).map((p) => Number(p.slice(0, -1))).reduce((a, b) => a + b, 0);
+    expect(Math.abs(suma - 100)).toBeLessThanOrEqual(2);
+  });
+
+  test('asesor a la izquierda con sus consultas, flechas y cifras', () => {
+    const l = demo();
+    expect(l.some((x) => x.includes('ASESOR'))).toBe(true);
+    expect(l.some((x) => /◆ \d\d:\d\d:\d\d/.test(x))).toBe(true);
+    expect(l.some((x) => x.includes('┈▶'))).toBe(true);
+    expect(l.some((x) => /consultas +2/.test(x))).toBe(true);
+  });
+
+  test('registro con título en el borde, y abajo la orden y el estado', () => {
+    const l = demo();
+    expect(l.some((x) => x.includes('┤ registro de sesión ├'))).toBe(true);
+    expect(l.some((x) => x.includes('→ src/auth.ts'))).toBe(true);
+    expect(l.some((x) => x.includes('mi-app $ claude --model sonnet'))).toBe(true);
+    expect(l.some((x) => /haiku \[enjambre\] +subagentes \[1\/3\] +asesor \[consultado 2\]/.test(x))).toBe(true);
+    expect(l.some((x) => /contexto +█+░* +31 %/.test(x))).toBe(true);
+  });
+
+  test('sin actividad no dibuja cajas inventadas', () => {
+    const l = texto(dibujar(crear(), { ahora: AHORA, uso: null, carpeta: 'mi-app' }).filas);
+    expect(l.join('\n')).toContain('Aún no hay actividad');
+    expect(cuenta(l, '┌')).toBe(0);
+    for (const x of l) expect([...x].length).toBe(ANCHO);
+  });
+
+  test('se adapta al alto: recorta el registro y no pasa del máximo', () => {
+    const alto = dibujar(ejemplo(AHORA), { ahora: AHORA, uso: USO, carpeta: 'mi-app', filasMax: 48 }).alto;
+    expect(alto).toBeLessThanOrEqual(48);
+    const completo = dibujar(ejemplo(AHORA), { ahora: AHORA, uso: USO, carpeta: 'mi-app' }).alto;
+    expect(completo).toBeGreaterThan(alto);
+  });
+
+  test('a ANSI: sin color no hay escapes; con color de 24 bits sí', () => {
+    const { filas } = dibujar(ejemplo(AHORA), { ahora: AHORA, uso: USO, carpeta: 'mi-app' });
+    expect(aAnsi(filas, 'none')).not.toContain('\x1b');
+    expect(aAnsi(filas, 'truecolor')).toContain('38;2;');
+    expect(aAnsi(filas, '256')).toContain('38;5;');
+  });
+
+  test('la caja del líder no corta sus cifras', () => {
+    const l = demo().join('\n');
+    expect(l).toMatch(/leídos 668k · escritos 12k/);
+    expect(l).not.toMatch(/escritos 1…/);
+    expect(l).toMatch(/pasos 24 · herramientas 1/);
+  });
+
+  test('cada consulta del asesor dice cuánto duró', () => {
+    expect(demo().some((x) => /duró 4 s/.test(x))).toBe(true);
+  });
+
+  test('si el asesor está configurado, lo nombra y lo pone en la orden', () => {
+    const l = texto(dibujar(ejemplo(AHORA), { ahora: AHORA, uso: USO, carpeta: 'app', asesorModelo: 'opus' }).filas);
+    expect(l.some((x) => x.includes('OPUS'))).toBe(true);
+    expect(l.some((x) => x.includes('claude --model sonnet --advisor opus'))).toBe(true);
+    expect(demo().some((x) => x.includes('--advisor'))).toBe(false);
+  });
+
+  test('abajo, el uso con barras y el modelo frente al recomendado', () => {
+    const conRec = registrarRecomendacion(registrarPaso(ejemplo(AHORA), { modelo: 'claude-opus-5-5', esfuerzo: 'high' }), { modelo: 'sonnet', esfuerzo: 'medium', motivo: 'x' });
+    const l = texto(dibujar(conRec, { ahora: AHORA, uso: USO, carpeta: 'app' }).filas);
+    expect(l.some((x) => /contexto +█+░* +31 %/.test(x) && /5 h +█*░+ +43 %/.test(x) && /semana +█+░* +60 %/.test(x))).toBe(true);
+    expect(l.some((x) => x.includes('modelo claude-opus-5-5 · high → recomendado: sonnet · medium'))).toBe(true);
+    const igual = registrarRecomendacion(registrarPaso(ejemplo(AHORA), { modelo: 'claude-sonnet-5-5', esfuerzo: 'medium' }), { modelo: 'sonnet', esfuerzo: 'medium', motivo: 'x' });
+    expect(texto(dibujar(igual, { ahora: AHORA, uso: USO, carpeta: 'app' }).filas).some((x) => x.includes('modelo claude-sonnet-5-5 · medium ✓'))).toBe(true);
+    for (const x of l) expect([...x].length).toBe(ANCHO);
+  });
+
+  test('una revisión externa sale en su caja a la derecha del líder, con su IA y modelo', () => {
+    const conRev = iniciarRevision(ejemplo(AHORA), { id: 'r1', ia: 'codex', modelo: 'gpt-6.1-sol', esfuerzo: 'high', at: AHORA - 45_000 });
+    const l = texto(dibujar(conRev, { ahora: AHORA, uso: USO, carpeta: 'app' }).filas);
+    expect(l.some((x) => x.includes('Sonnet 5.5 · sesión principal') && x.includes('REVISIÓN'))).toBe(true);
+    for (const t of ['Codex', 'gpt-6.1-sol', '◐ revisando', '■ codex · revisa']) expect(l.some((x) => x.includes(t))).toBe(true);
+    for (const x of l) expect([...x].length).toBe(ANCHO);
+    expect(texto(dibujar(ejemplo(AHORA), { ahora: AHORA, uso: USO, carpeta: 'app' }).filas).some((x) => x.includes('REVISIÓN'))).toBe(false);
+  });
+
+  test('si se le pasa el uso de Codex, lo enseña abajo con sus límites y cuándo fue', () => {
+    const codex = { modelo: 'gpt-6.1-sol', esfuerzo: 'low', leidos: 372_693, cache: 323_584, escritos: 3_899, limite5h: 1, limiteSemana: 14, actualizado: AHORA - 180_000 };
+    const l = texto(dibujar(ejemplo(AHORA), { ahora: AHORA, uso: USO, carpeta: 'app', codex }).filas);
+    const fila = l.find((x) => x.includes('codex gpt-6.1-sol'));
+    expect(fila).toBeTruthy();
+    expect(fila).toMatch(/leídos 373k · escritos 3.9k/);
+    expect(fila).toMatch(/5 h .* 1 %/);
+    expect(fila).toMatch(/semana .* 14 %/);
+    expect(fila).toMatch(/hace 3 min/);
+    const vacio = texto(dibujar(crear(), { ahora: AHORA, uso: null, carpeta: 'app', codex }).filas);
+    expect(vacio.some((x) => x.includes('codex gpt-6.1-sol'))).toBe(true);
+  });
+});
+