trackops 1.0.1 → 2.0.0

package/ui/js/views/topbar.js

@@ -1,183 +1,239 @@
-/**
- * topbar.js — Barra superior del dashboard
- */
-
-import { icon } from '../icons.js';
-import * as state from '../state.js';
-import * as api from '../api.js';
-import { flash } from './flash.js';
-import { esc, debounce } from '../utils.js';
-import * as theme from '../theme.js';
-
-/** Renderiza el topbar */
-export function render() {
-  const el = document.getElementById('topbar');
-  if (!el) return;
-
-  const payload  = state.getPayload();
-  const projects = state.get('projects');
-  const currentId = state.get('currentProjectId');
-  const runtime  = payload?.runtime;
-
-  el.innerHTML = `
-    <div class="topbar">
-      <!-- Hamburger (mobile) -->
-      <button class="topbar-hamburger" type="button" id="sidebar-toggle" aria-label="Abrir menú" aria-expanded="false" aria-controls="sidebar">
-        <span></span><span></span><span></span>
-      </button>
-
-      <!-- Search -->
-      <div class="topbar-search">
-        <div class="search-wrapper" role="search">
-          <span class="search-icon" aria-hidden="true">${icon('search', 16)}</span>
-          <input
-            type="search"
-            id="global-search"
-            aria-label="Buscar tareas"
-            placeholder="Buscar tareas…"
-            autocomplete="off"
-            value="${esc(state.get('searchQuery'))}"
-          />
-          <span class="search-kbd" aria-hidden="true">⌘F</span>
-        </div>
-      </div>
-
-      <!-- Derecha -->
-      <div class="topbar-right">
-
-        <!-- Timer activo -->
-        <div class="topbar-timer" id="topbar-timer" aria-label="Seguimiento de tiempo" aria-live="polite">
-          <span class="topbar-timer-dot" aria-hidden="true"></span>
-          <span id="topbar-timer-display">00:00:00</span>
-        </div>
-
-        <!-- Repo status -->
-        ${runtime ? _renderRepoBadge(runtime) : ''}
-
-        <!-- Project selector -->
-        ${projects.length > 0 ? _renderProjectSelector(projects, currentId) : ''}
-
-        <!-- Sync button -->
-        <button class="btn btn-ghost btn-sm" id="sync-btn" type="button" aria-label="Sincronizar documentación">
-          ${icon('sync', 16)} Sincronizar
-        </button>
-
-        <!-- Theme toggle -->
-        ${theme.renderButton()}
-
-        <!-- Refresh -->
-        <button class="btn btn-ghost btn-sm btn-icon" id="refresh-btn" type="button" aria-label="Refrescar estado">
-          ${icon('refresh', 16)}
-        </button>
-
-      </div>
-    </div>
-  `;
-
-  _bindEvents();
-}
-
-function _renderRepoBadge(runtime) {
-  const isClean = runtime.clean;
-  const label   = isClean ? 'Repo limpio' : `${runtime.staged}s ${runtime.unstaged}u ${runtime.untracked}?`;
-  return `
-    <div class="repo-badge ${isClean ? 'clean' : 'dirty'}" title="${esc(runtime.branch || '')}">
-      <span class="repo-badge-dot" aria-hidden="true"></span>
-      <span>${icon('gitBranch', 12)} ${esc(runtime.branch || 'sin rama')} · ${label}</span>
-    </div>
-  `;
-}
-
-function _renderProjectSelector(projects, currentId) {
-  const options = projects.map(p =>
-    `<option value="${esc(p.id)}" ${p.id === currentId ? 'selected' : ''} ${p.available ? '' : 'disabled'}>
-      ${esc(p.name)}${p.available ? '' : ' (no disponible)'}
-    </option>`
-  ).join('');
-
-  return `
-    <div class="project-select-wrapper" title="Proyecto activo">
-      <select id="project-select" aria-label="Seleccionar proyecto activo">
-        ${options}
-      </select>
-    </div>
-  `;
-}
-
-function _bindEvents() {
-  // Hamburger → sidebar open
-  document.getElementById('sidebar-toggle')?.addEventListener('click', () => {
-    const sidebar = document.getElementById('sidebar');
-    const isOpen  = sidebar?.classList.toggle('is-open');
-    document.getElementById('sidebar-toggle')?.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-  });
-
-  // Theme toggle
-  theme.bindButton();
-
-  // Cerrar sidebar al hacer clic fuera (mobile)
-  document.addEventListener('click', e => {
-    const sidebar = document.getElementById('sidebar');
-    const toggle  = document.getElementById('sidebar-toggle');
-    if (sidebar?.classList.contains('is-open') &&
-        !sidebar.contains(e.target) && !toggle?.contains(e.target)) {
-      sidebar.classList.remove('is-open');
-      toggle?.setAttribute('aria-expanded', 'false');
-    }
-  });
-
-  // Project selector
-  document.getElementById('project-select')?.addEventListener('change', async e => {
-    const id = e.target.value;
-    state.update('currentProjectId', id);
-    localStorage.setItem('ops-dashboard-project', id);
-    state.update('selectedTaskId', null);
-    // Trigger refresh global
-    window.dispatchEvent(new CustomEvent('ops:refresh'));
-  });
-
-  // Sync button
-  document.getElementById('sync-btn')?.addEventListener('click', async () => {
-    const btn = document.getElementById('sync-btn');
-    if (btn) { btn.disabled = true; btn.innerHTML = `${icon('sync', 16)} Sincronizando…`; }
-    try {
-      await api.syncDocs();
-      flash('Documentación sincronizada.', 'success');
-      window.dispatchEvent(new CustomEvent('ops:refresh'));
-    } catch (err) {
-      flash(err.message, 'error');
-    } finally {
-      if (btn) { btn.disabled = false; btn.innerHTML = `${icon('sync', 16)} Sincronizar`; }
-    }
-  });
-
-  // Refresh button
-  document.getElementById('refresh-btn')?.addEventListener('click', () => {
-    window.dispatchEvent(new CustomEvent('ops:refresh'));
-  });
-
-  // Búsqueda global (debounced)
-  const searchInput = document.getElementById('global-search');
-  if (searchInput) {
-    const handleSearch = debounce(e => {
-      state.update('searchQuery', e.target.value);
-      window.dispatchEvent(new CustomEvent('ops:search', { detail: { query: e.target.value } }));
-    }, 250);
-    searchInput.addEventListener('input', handleSearch);
-
-    // Atajo de teclado ⌘/Ctrl+F
-    document.addEventListener('keydown', e => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
-        e.preventDefault();
-        searchInput.focus();
-        searchInput.select();
-      }
-    });
-  }
-}
-
-/** Actualiza solo el timer del topbar sin re-renderizar */
-export function updateTimer(display) {
-  const el = document.getElementById('topbar-timer-display');
-  if (el) el.textContent = display;
-}
+/**
+ * topbar.js — Barra superior del dashboard
+ */
+
+import { icon } from '../icons.js';
+import * as state from '../state.js';
+import * as api from '../api.js';
+import { flash } from './flash.js';
+import { esc, debounce } from '../utils.js';
+import * as theme from '../theme.js';
+import { t } from '../i18n.js';
+
+/** Renderiza el topbar */
+export function render() {
+  const el = document.getElementById('topbar');
+  if (!el) return;
+
+  const payload  = state.getPayload();
+  const projects = state.get('projects');
+  const currentId = state.get('currentProjectId');
+  const currentLocale = state.get('locale') || payload?.i18n?.locale || 'es';
+  const runtime  = payload?.runtime;
+
+  el.innerHTML = `
+    <div class="topbar">
+      <!-- Hamburger (mobile) -->
+      <button class="topbar-hamburger" type="button" id="sidebar-toggle" aria-label="${t('ui.topbar.openMenu', {}, 'Open menu')}" aria-expanded="false" aria-controls="sidebar">
+        <span></span><span></span><span></span>
+      </button>
+
+      <!-- Search -->
+      <div class="topbar-search">
+        <div class="search-wrapper" role="search">
+          <span class="search-icon" aria-hidden="true">${icon('search', 16)}</span>
+          <input
+            type="search"
+            id="global-search"
+            aria-label="${t('ui.topbar.searchAria', {}, 'Search tasks')}"
+            placeholder="${t('ui.topbar.searchPlaceholder', {}, 'Search tasks…')}"
+            autocomplete="off"
+            value="${esc(state.get('searchQuery'))}"
+          />
+          <span class="search-kbd" aria-hidden="true">⌘F</span>
+        </div>
+      </div>
+
+      <!-- Derecha -->
+      <div class="topbar-right">
+
+        <!-- Timer activo -->
+        <div class="topbar-timer" id="topbar-timer" aria-label="${t('ui.topbar.timer', {}, 'Time tracking')}" aria-live="polite">
+          <span class="topbar-timer-dot" aria-hidden="true"></span>
+          <span id="topbar-timer-display">00:00:00</span>
+        </div>
+
+        <!-- Repo status -->
+        ${runtime ? _renderRepoBadge(runtime) : ''}
+
+        <!-- Project selector -->
+        ${projects.length > 0 ? _renderProjectSelector(projects, currentId) : ''}
+
+        <!-- Locale selector -->
+        ${_renderLocaleSelector(currentLocale)}
+
+        <!-- Sync button -->
+        <button class="btn btn-ghost btn-sm" id="sync-btn" type="button" aria-label="${t('ui.topbar.syncAria', {}, 'Sync documentation')}">
+          ${icon('sync', 16)} ${t('ui.topbar.sync', {}, 'Sync')}
+        </button>
+
+        <!-- Theme toggle -->
+        ${theme.renderButton()}
+
+        <!-- Refresh -->
+        <button class="btn btn-ghost btn-sm btn-icon" id="refresh-btn" type="button" aria-label="${t('ui.topbar.refresh', {}, 'Refresh state')}">
+          ${icon('refresh', 16)}
+        </button>
+
+      </div>
+    </div>
+  `;
+
+  _bindEvents();
+}
+
+function _renderRepoBadge(runtime) {
+  const isClean = runtime.clean;
+  const label = isClean
+    ? t('ui.topbar.repoClean', {}, 'Clean repo')
+    : t('ui.topbar.repoDirty', {
+        staged: runtime.staged,
+        unstaged: runtime.unstaged,
+        untracked: runtime.untracked,
+      }, `${runtime.staged}s ${runtime.unstaged}u ${runtime.untracked}?`);
+  return `
+    <div class="repo-badge ${isClean ? 'clean' : 'dirty'}" title="${esc(runtime.branch || '')}">
+      <span class="repo-badge-dot" aria-hidden="true"></span>
+      <span>${icon('gitBranch', 12)} ${esc(runtime.branch || t('ui.topbar.noBranch', {}, 'no branch'))} · ${label}</span>
+    </div>
+  `;
+}
+
+function _renderProjectSelector(projects, currentId) {
+  const options = projects.map(p =>
+    `<option value="${esc(p.id)}" ${p.id === currentId ? 'selected' : ''} ${p.available ? '' : 'disabled'}>
+      ${esc(p.name)}${p.available ? '' : ` (${t('ui.topbar.unavailable', {}, 'unavailable')})`}
+    </option>`
+  ).join('');
+
+  return `
+    <div class="project-select-wrapper" title="${t('ui.topbar.activeProject', {}, 'Active project')}">
+      <select id="project-select" aria-label="${t('ui.topbar.activeProject', {}, 'Active project')}">
+        ${options}
+      </select>
+    </div>
+  `;
+}
+
+function _renderLocaleSelector(currentLocale) {
+  return `
+    <div class="project-select-wrapper locale-select-wrapper" title="${t('ui.topbar.language', {}, 'Language')}">
+      <select id="locale-select" aria-label="${t('ui.topbar.languageAria', {}, 'Select dashboard language')}">
+        <option value="es" ${currentLocale === 'es' ? 'selected' : ''}>${t('ui.topbar.languageEs', {}, 'ES')}</option>
+        <option value="en" ${currentLocale === 'en' ? 'selected' : ''}>${t('ui.topbar.languageEn', {}, 'EN')}</option>
+      </select>
+    </div>
+  `;
+}
+
+function _applyLocaleState(payload) {
+  if (!payload) return;
+  state.update('payload', payload);
+  if (payload.i18n) {
+    state.update({
+      phases: payload.i18n.phases || [],
+      statusLabels: payload.i18n.statusLabels || {},
+      locale: payload.i18n.locale || 'es',
+      messages: payload.i18n.messages || {},
+    });
+  }
+}
+
+function _bindEvents() {
+  // Hamburger → sidebar open
+  document.getElementById('sidebar-toggle')?.addEventListener('click', () => {
+    const sidebar = document.getElementById('sidebar');
+    const isOpen  = sidebar?.classList.toggle('is-open');
+    document.getElementById('sidebar-toggle')?.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+  });
+
+  // Theme toggle
+  theme.bindButton();
+
+  // Cerrar sidebar al hacer clic fuera (mobile)
+  document.addEventListener('click', e => {
+    const sidebar = document.getElementById('sidebar');
+    const toggle  = document.getElementById('sidebar-toggle');
+    if (sidebar?.classList.contains('is-open') &&
+        !sidebar.contains(e.target) && !toggle?.contains(e.target)) {
+      sidebar.classList.remove('is-open');
+      toggle?.setAttribute('aria-expanded', 'false');
+    }
+  });
+
+  // Project selector
+  document.getElementById('project-select')?.addEventListener('change', async e => {
+    const id = e.target.value;
+    state.update('currentProjectId', id);
+    localStorage.setItem('ops-dashboard-project', id);
+    state.update('selectedTaskId', null);
+    // Trigger refresh global
+    window.dispatchEvent(new CustomEvent('ops:refresh'));
+  });
+
+  document.getElementById('locale-select')?.addEventListener('change', async e => {
+    const select = e.target;
+    const previousLocale = state.get('locale') || 'es';
+    const nextLocale = select.value;
+
+    if (nextLocale === previousLocale) return;
+
+    select.disabled = true;
+    try {
+      const result = await api.updateProjectLocale(nextLocale);
+      _applyLocaleState(result.state);
+      flash(t('ui.topbar.localeUpdated', {}, 'Language updated.'), 'success');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (err) {
+      select.value = previousLocale;
+      flash(err.message, 'error');
+    } finally {
+      select.disabled = false;
+    }
+  });
+
+  // Sync button
+  document.getElementById('sync-btn')?.addEventListener('click', async () => {
+    const btn = document.getElementById('sync-btn');
+    if (btn) { btn.disabled = true; btn.innerHTML = `${icon('sync', 16)} ${t('ui.topbar.syncing', {}, 'Syncing…')}`; }
+    try {
+      await api.syncDocs();
+      flash(t('ui.topbar.synced', {}, 'Documentation synced.'), 'success');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (err) {
+      flash(err.message, 'error');
+    } finally {
+      if (btn) { btn.disabled = false; btn.innerHTML = `${icon('sync', 16)} ${t('ui.topbar.sync', {}, 'Sync')}`; }
+    }
+  });
+
+  // Refresh button
+  document.getElementById('refresh-btn')?.addEventListener('click', () => {
+    window.dispatchEvent(new CustomEvent('ops:refresh'));
+  });
+
+  // Búsqueda global (debounced)
+  const searchInput = document.getElementById('global-search');
+  if (searchInput) {
+    const handleSearch = debounce(e => {
+      state.update('searchQuery', e.target.value);
+      window.dispatchEvent(new CustomEvent('ops:search', { detail: { query: e.target.value } }));
+    }, 250);
+    searchInput.addEventListener('input', handleSearch);
+
+    // Atajo de teclado ⌘/Ctrl+F
+    document.addEventListener('keydown', e => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
+        e.preventDefault();
+        searchInput.focus();
+        searchInput.select();
+      }
+    });
+  }
+}
+
+/** Actualiza solo el timer del topbar sin re-renderizar */
+export function updateTimer(display) {
+  const el = document.getElementById('topbar-timer-display');
+  if (el) el.textContent = display;
+}

package/templates/etapa/agent.md

@@ -1,26 +0,0 @@
-# Agente del Proyecto: {{PROJECT_NAME}}
-
-## Identidad
-Eres el agente principal del proyecto **{{PROJECT_NAME}}**. Este template existe por compatibilidad heredada y debe operar bajo el protocolo O.P.E.R.A. v3.0.
-
-## Fuente de Verdad
-Tu fuente de verdad es `genesis.md`. Antes de tomar cualquier decisión, consulta este archivo.
-Para el seguimiento operativo y el estado del backlog, usa `project_control.json`.
-
-## Comportamiento
-- Sigue las reglas de comportamiento definidas en `genesis.md`.
-- Respeta la Matriz de Autonomía (Semáforo) para determinar qué acciones puedes tomar.
-- Gestiona tareas y estados desde `project_control.json`.
-- No edites manualmente `task_plan.md`, `progress.md` ni `findings.md`; se regeneran con `trackops sync`.
-
-## Skills Disponibles
-Consulta `.agents/skills/_registry.md` para ver las skills instaladas.
-También puedes buscar nuevas skills con `trackops skill catalog`.
-
-## Ciclo de Trabajo
-1. Ejecuta `trackops status` al inicio de cada bloque de trabajo.
-2. Consulta `genesis.md` para entender los datos y reglas.
-3. Usa `trackops next` para ver la siguiente cola priorizada.
-4. Antes de implementar, marca la tarea con `trackops task start <task-id>`.
-5. Usa el router (`.agent/hub/router.md`) para saber qué skill aplicar.
-6. Al terminar, pasa la tarea a `review`, `complete` o `block` y ejecuta `trackops sync`.

package/templates/etapa/genesis.md

@@ -1,94 +0,0 @@
-# {{PROJECT_NAME}} — Genesis
-
-> **La Constitución del proyecto.** Este documento es la fuente de verdad. Antes de tomar cualquier decisión arquitectónica o de implementación, consulta este archivo. Si un script contradice lo definido aquí, el script está mal.
-
----
-
-## 1. Directriz Principal
-
-_¿Cuál es el resultado singular deseado de este proyecto?_
-
-> TODO: Definir el objetivo principal del proyecto.
-
----
-
-## 2. Integraciones Externas
-
-_¿Qué servicios externos necesitamos? ¿Están listas las claves?_
-
-| Servicio | Estado | Clave / Config |
-|----------|--------|----------------|
-| —        | —      | —              |
-
----
-
-## 3. Fuente de la Verdad
-
-_¿Dónde viven los datos primarios?_
-
-> TODO: Describir la fuente de datos principal.
-
----
-
-## 4. Carga Útil (Payload)
-
-_¿Cómo y dónde debe entregarse el resultado final?_
-
-> TODO: Describir destino y formato de entrega.
-
----
-
-## 5. Reglas de Comportamiento
-
-_Restricciones, tono y reglas específicas del dominio._
-
-> TODO: Definir restricciones de negocio.
-
----
-
-## Esquema de Datos
-
-> **Regla "Datos-Primero"**: Este schema debe estar definido antes de escribir cualquier código.
-
-```json
-{
-  "input": {
-    "source": "",
-    "schema": {}
-  },
-  "output": {
-    "destination": "",
-    "schema": {}
-  }
-}
-```
-
----
-
-## Invariantes Arquitectónicas
-
-_Decisiones técnicas inamovibles. Cambiarlas requiere aprobación explícita (Nivel Rojo)._
-
-- TODO: Listar invariantes.
-
----
-
-## Pipeline
-
-_Documenta el grafo de dependencias entre herramientas._
-
-<!-- Ejemplo:
-### tool_fetch.py → tool_transform.py
-- Output: `.tmp/raw_data.json`
-- Formato: JSON array según schema X
--->
-
----
-
-## Templates
-
-_Referencias a las plantillas de output definidas en `templates/`._
-
-<!-- Ejemplo:
-- `templates/report.md` — Plantilla para reportes
--->

package/templates/etapa/references/autonomy-and-recovery.md

@@ -1,117 +0,0 @@
-# Gobernanza, Autonomía y Recuperación
-
-Este documento define los niveles de permiso, el protocolo de auto-reparación y el sistema de rollback para el proyecto.
-
----
-
-## 🚦 Matriz de Autonomía (Semáforo)
-
-### 🔴 NIVEL ROJO — Detente y Pide Permiso
-
-Estas acciones requieren aprobación explícita del usuario antes de ejecutarse:
-
-- Modificar la estructura de datos o reglas en `genesis.md`.
-- Eliminar datos persistentes o archivos fuera de `.tmp/`.
-- Despliegue final a producción (Fase de Automatización).
-- Envío de comunicaciones reales a terceros (emails, webhooks con side-effects).
-- Creación de repositorios o recursos en servicios externos (GitHub, cloud).
-- Modificar configuraciones de acceso o seguridad.
-
-### 🟡 NIVEL AMARILLO — Avanza con Precaución
-
-Estas acciones se pueden ejecutar pero requieren documentación inmediata:
-
-- Instalación de dependencias nuevas.
-- Modificaciones a la estructura de directorios.
-- Cambios en el pipeline documentado en `genesis.md`.
-
-### 🟢 NIVEL VERDE — Avanza con Confianza
-
-Estas acciones no requieren permiso:
-
-- Creación, edición y corrección de scripts en `tools/`.
-- Lectura de archivos y documentación.
-- Ejecución de pruebas (Tests).
-- Actualización de `progress.md`, `findings.md` y `task_plan.md`.
-- Instalación de skills del ecosistema.
-- Escritura y limpieza de archivos en `.tmp/`.
-- Auto-Reparación (con límite de reintentos).
-
----
-
-## 🛠️ Principio de Auto-Templado (Self-Annealing)
-
-Cuando una herramienta falla o ocurre un error en Nivel Verde, sigue este protocolo:
-
-### Procedimiento
-
-1. **Analizar**: Lee el stack trace completo. No adivines la causa.
-2. **Parchear**: Arregla el script en `tools/`.
-3. **Probar**: Verifica que el arreglo funciona ejecutando el script.
-4. **Actualizar Memoria**: Documenta el aprendizaje en `findings.md` o en el SOP correspondiente en `architecture/` para que el error nunca se repita.
-
-### Límite de Reintentos
-
-**Máximo 3 intentos de auto-reparación por error.** Si al tercer intento el error persiste:
-
-1. **Escalar a Nivel Rojo** — Pide intervención humana.
-2. **Documentar el bloqueo** en `findings.md` con:
-
-```markdown
-## Bloqueo: [nombre del error]
-### Fecha: [YYYY-MM-DD]
-### Script: [tools/nombre.py]
-
-### Stack Trace
-[pegar stack trace completo]
-
-### Intentos de Reparación
-1. **Intento 1**: [qué se intentó] → [resultado]
-2. **Intento 2**: [qué se intentó] → [resultado]
-3. **Intento 3**: [qué se intentó] → [resultado]
-
-### Hipótesis del Problema Raíz
-[análisis de por qué crees que falla]
-
-### Acción Requerida
-[qué necesitas del usuario para desbloquear]
-```
-
-### Lo que NO es Auto-Templado
-
-- No es reintentar ciegamente el mismo comando esperando un resultado diferente.
-- No es ignorar el error y continuar.
-- No es cambiar el schema en `genesis.md` para que el error "desaparezca".
-
----
-
-## 🔄 Protocolo de Rollback
-
-Si una fase posterior invalida una decisión de una fase anterior, NO modifiques `genesis.md` directamente.
-
-### Procedimiento
-
-1. **Documentar** en `CHANGELOG.md` qué cambio se necesita y por qué.
-2. **Solicitar aprobación** (Nivel Rojo).
-3. **Una vez aprobado**, actualizar `genesis.md` con nueva versión:
-
-```markdown
-## Versión 1.1 — [fecha]
-
-### Cambio
-- [descripción precisa del cambio]
-
-### Motivo
-- [por qué la versión anterior era incorrecta o insuficiente]
-
-### Impacto
-- [qué scripts/SOPs necesitan actualizarse como consecuencia]
-```
-
-4. **Propagar el cambio**: Actualizar todos los scripts y SOPs afectados.
-5. **Re-ejecutar tests**: Verificar que los cambios no rompen nada.
-6. **Actualizar `progress.md`** con el rollback documentado.
-
-### Regla de Oro
-
-El historial de decisiones nunca se borra. Cada versión de `genesis.md` queda registrada en `CHANGELOG.md`. Esto permite entender por qué se tomó una decisión y por qué se cambió, evitando ciclos de decisiones contradictorias.