trackops 1.0.0 → 1.1.0

package/ui/js/api.js

@@ -0,0 +1,220 @@
+/**
+ * api.js — Capa de comunicación con el backend TrackOps
+ * Wrapper sobre fetch con gestión de errores, project-awareness
+ * y tipado de los endpoints disponibles en lib/server.js
+ */
+
+import * as state from './state.js';
+
+/**
+ * Llamada base a la API
+ * @param {string} url
+ * @param {RequestInit & { projectAware?: boolean }} options
+ * @returns {Promise<Object>}
+ */
+async function call(url, options = {}) {
+  const target = new URL(url, window.location.origin);
+  const currentId = state.get('currentProjectId');
+  if (options.projectAware !== false && currentId && !target.searchParams.has('project')) {
+    target.searchParams.set('project', currentId);
+  }
+
+  const response = await fetch(target, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(options.headers || {}),
+    },
+  });
+
+  const text = await response.text();
+  const json = text ? JSON.parse(text) : {};
+
+  if (!response.ok || json.ok === false) {
+    const err = new Error(json.error || `HTTP ${response.status}: ${response.statusText}`);
+    err.status = response.status;
+    throw err;
+  }
+
+  return json;
+}
+
+// ─────────────────────────────── PROYECTOS ──────────────────────────────────
+
+/**
+ * Lista todos los proyectos del portfolio
+ */
+export async function getProjects() {
+  return call('/api/projects', { projectAware: false });
+}
+
+/**
+ * Registra un proyecto existente en el portfolio
+ * @param {string} root - ruta del directorio del proyecto
+ */
+export async function registerProject(root) {
+  return call('/api/projects/register', {
+    method: 'POST',
+    projectAware: false,
+    body: JSON.stringify({ root }),
+  });
+}
+
+/**
+ * Instala trackops en un nuevo proyecto
+ * @param {string} root
+ */
+export async function installProject(root, options = {}) {
+  return call('/api/projects/install', {
+    method: 'POST',
+    projectAware: false,
+    body: JSON.stringify({ root, ...options }),
+  });
+}
+
+export async function updateProjectLocale(locale) {
+  return call('/api/projects/locale', {
+    method: 'POST',
+    body: JSON.stringify({ projectId: state.get('currentProjectId'), locale }),
+  });
+}
+
+// ─────────────────────────────── ESTADO ─────────────────────────────────────
+
+/**
+ * Obtiene el estado completo del proyecto activo
+ */
+export async function getState() {
+  return call('/api/state');
+}
+
+export async function getEnvStatus() {
+  return call('/api/env');
+}
+
+export async function syncEnv() {
+  return call('/api/env/sync', {
+    method: 'POST',
+  });
+}
+
+// ─────────────────────────────── TAREAS ─────────────────────────────────────
+
+/**
+ * Crea una nueva tarea
+ * @param {Object} payload
+ */
+export async function createTask(payload) {
+  return call('/api/tasks', {
+    method: 'POST',
+    body: JSON.stringify({ projectId: state.get('currentProjectId'), ...payload }),
+  });
+}
+
+/**
+ * Actualiza una tarea existente (edición completa)
+ * @param {string} taskId
+ * @param {Object} payload
+ */
+export async function updateTask(taskId, payload) {
+  return call(`/api/tasks/${encodeURIComponent(taskId)}`, {
+    method: 'PUT',
+    body: JSON.stringify({ projectId: state.get('currentProjectId'), ...payload }),
+  });
+}
+
+/**
+ * Ejecuta una acción sobre una tarea (start, review, complete, block, pending, cancel)
+ * @param {string} taskId
+ * @param {string} action
+ * @param {string} [note]
+ */
+export async function taskAction(taskId, action, note = '') {
+  return call(`/api/tasks/${encodeURIComponent(taskId)}/action`, {
+    method: 'POST',
+    body: JSON.stringify({ projectId: state.get('currentProjectId'), action, note }),
+  });
+}
+
+// ─────────────────────────────── SYNC ───────────────────────────────────────
+
+/**
+ * Sincroniza los docs del proyecto (task_plan.md, progress.md, findings.md)
+ */
+export async function syncDocs() {
+  return call('/api/sync', {
+    method: 'POST',
+    body: JSON.stringify({ projectId: state.get('currentProjectId') }),
+  });
+}
+
+// ─────────────────────────────── COMANDOS ───────────────────────────────────
+
+/**
+ * Ejecuta un comando en el shell del proyecto
+ * @param {string} command
+ */
+export async function runCommand(command) {
+  return call('/api/commands', {
+    method: 'POST',
+    body: JSON.stringify({ projectId: state.get('currentProjectId'), command }),
+  });
+}
+
+/**
+ * Crea un EventSource para hacer streaming de salida de una sesión
+ * @param {string} sessionId
+ * @returns {EventSource}
+ */
+export function streamSession(sessionId) {
+  return new EventSource(`/api/commands/${encodeURIComponent(sessionId)}/stream`);
+}
+
+// ─────────────────────────────── TIME TRACKING ──────────────────────────────
+
+/**
+ * Inicia un time entry para una tarea
+ * @param {string} taskId
+ * @param {string} taskTitle
+ */
+export async function startTimeEntry(taskId, taskTitle) {
+  return call('/api/time/start', {
+    method: 'POST',
+    body: JSON.stringify({ projectId: state.get('currentProjectId'), taskId, taskTitle }),
+  });
+}
+
+/**
+ * Detiene el time entry activo
+ * @param {string} entryId
+ */
+export async function stopTimeEntry(entryId) {
+  return call('/api/time/stop', {
+    method: 'POST',
+    body: JSON.stringify({ projectId: state.get('currentProjectId'), entryId }),
+  });
+}
+
+/**
+ * Obtiene los time entries del proyecto activo
+ */
+export async function getTimeEntries() {
+  return call('/api/time');
+}
+
+// ─────────────────────────────── SKILLS HUB ────────────────────────────────
+
+export async function fetchSkillsLocal() {
+  return call('/api/skills/local');
+}
+
+export async function fetchSkillsDiscover() {
+  return call('/api/skills/discover');
+}
+
+export async function installSkill(skillId) {
+  return call('/api/skills/install', {
+    method: 'POST',
+    body: JSON.stringify({ skillId }) 
+  });
+}

package/ui/js/app.js

@@ -0,0 +1,200 @@
+/**
+ * app.js — Orquestador principal del dashboard TrackOps
+ * Punto de entrada del módulo ES.
+ */
+
+import * as state from './state.js';
+import * as api   from './api.js';
+import * as router from './router.js';
+import * as consoleLogger from './console-logger.js';
+import * as onboarding from './onboarding.js';
+import * as timeTracker from './time-tracker.js';
+import * as theme from './theme.js';
+
+// Vistas
+import { render as renderSidebar } from './views/sidebar.js';
+import { render as renderTopbar  } from './views/topbar.js';
+import { render as renderOverview } from './views/overview.js';
+import { render as renderBoard    } from './views/board.js';
+import { render as renderTasks    } from './views/tasks.js';
+import * as executionView from './views/execution.js';
+import { render as renderInsights } from './views/insights.js';
+import * as settingsView from './views/settings.js';
+import * as skillsView from './views/skills.js';
+
+// ─────────────────────────────── INIT ───────────────────────────────────────
+
+async function init() {
+  // 0. Tema (PRIMERO: evitar flash de tema incorrecto)
+  theme.init();
+
+  // 1. Console logger (capturar errores desde el arranque)
+  consoleLogger.init();
+
+  // 2. Registrar rutas en el router
+  router.register('overview', renderOverview);
+  router.register('board',    renderBoard);
+  router.register('tasks',    renderTasks);
+  router.register('execution', async () => {
+    const html = await executionView.render();
+    setTimeout(() => executionView.bindEvents(), 50);
+    return html;
+  });
+  router.register('insights', renderInsights);
+  router.register('settings', async () => {
+    const html = await settingsView.render();
+    setTimeout(() => settingsView.bindEvents(), 50);
+    return html;
+  });
+  router.register('skills', async () => {
+    const html = await skillsView.render();
+    setTimeout(() => { 
+       skillsView.bindEvents();
+       skillsView.loadData(); 
+    }, 50);
+    return html;
+  });
+
+  // 3. Inicializar el router
+  router.init(document.getElementById('view-container'));
+
+  // 4. Cargar estado inicial
+  await _loadInitialState();
+
+  // 5. Renderizar chrome (sidebar + topbar)
+  renderSidebar();
+  renderTopbar();
+
+  // 6. Navegar a la vista inicial
+  await router.start('overview');
+
+  // 7. Cargar time entries en background
+  timeTracker.loadEntries().catch(err => {
+    console.warn('[app] No se pudieron cargar time entries:', err.message);
+  });
+
+  // 8. Inicializar onboarding
+  onboarding.init();
+
+  // 9. Suscribir refreshes globales
+  _bindGlobalEvents();
+
+  // 10. Auto-refresh cada 60s
+  setInterval(_refreshState, 60_000);
+}
+
+// ─────────────────────────────── CARGA DE ESTADO ────────────────────────────
+
+async function _loadInitialState() {
+  try {
+    // Cargar lista de proyectos
+    const projectsResult = await api.getProjects();
+    const projects = projectsResult.projects || [];
+    state.update('projects', projects);
+
+    // Determinar proyecto activo (persistido o primero disponible)
+    const saved = localStorage.getItem('ops-dashboard-project');
+    const first = projects.find(p => p.available);
+    const currentId = saved && projects.some(p => p.id === saved)
+      ? saved
+      : first?.id || null;
+
+    state.update('currentProjectId', currentId);
+
+    // Cargar el estado del proyecto activo
+    if (currentId) {
+      await _refreshState();
+    }
+  } catch (err) {
+    console.error('[app] Error cargando estado inicial:', err);
+    // Si el endpoint de proyectos falla, intentar cargar el estado directamente
+    try {
+      await _refreshState();
+    } catch (fallbackErr) {
+      console.error('[app] Error en fallback de estado:', fallbackErr);
+    }
+  }
+}
+
+async function _refreshState() {
+  try {
+    const payload = await api.getState();
+    state.update('payload', payload);
+
+    // Actualizar datos de i18n desde el backend
+    if (payload.i18n) {
+      state.update('phases',       payload.i18n.phases || []);
+      state.update('statusLabels', payload.i18n.statusLabels || {});
+      state.update('locale',       payload.i18n.locale || 'es');
+      state.update('messages',     payload.i18n.messages || {});
+    }
+
+    // Actualizar proyectos si el payload incluye info de proyectos
+    if (payload.project && state.get('projects').length === 0) {
+      state.update('projects', [{ ...payload.project, available: true }]);
+      state.update('currentProjectId', payload.project.id);
+    }
+
+    // Actualizar helper findTask en el state (se accede via get('payload'))
+    // NO se puede asignar a state.findTask porque los namespaces de módulos ES son readonly.
+
+    // Re-renderizar chrome (puede haber cambiado el repo status)
+    renderTopbar();
+    renderSidebar();
+
+    // Refrescar la vista actual
+    await router.refresh();
+
+  } catch (err) {
+    console.error('[app] Error actualizando estado:', err);
+  }
+}
+
+// ─────────────────────────────── EVENTOS GLOBALES ───────────────────────────
+
+function _bindGlobalEvents() {
+  // Refresh global (disparado por sync, cambio de proyecto, etc.)
+  window.addEventListener('ops:refresh', async () => {
+    await _refreshState();
+  });
+
+  // Búsqueda global → refrescar la vista actual
+  window.addEventListener('ops:search', () => {
+    const active = router.current();
+    if (active === 'board' || active === 'tasks') {
+      router.refresh();
+    }
+  });
+
+  // Navegación por teclado: Escape cierra modales / deselecciona
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape') {
+      // Deseleccionar tarea si no hay modal abierto
+      const modalEl = document.querySelector('.modal-overlay:not(.is-hidden)');
+      if (!modalEl) {
+        // No deseleccionar: permite a las vistas manejar escape internamente
+      }
+    }
+  });
+
+  // Actualizar sidebar badges cuando cambia el payload
+  state.subscribe('payload', () => {
+    import('./views/sidebar.js').then(m => m.updateBadges?.());
+  });
+}
+
+// ─────────────────────────────── ARRANQUE ───────────────────────────────────
+
+document.addEventListener('DOMContentLoaded', () => {
+  init().catch(err => {
+    console.error('[app] Error fatal en la inicialización:', err);
+    document.getElementById('view-container').innerHTML = `
+      <div class="empty-state" style="margin:4rem auto;max-width:440px">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--danger)"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+        <h3 style="margin-top:var(--space-2)">Error al iniciar el dashboard</h3>
+        <p style="font-size:var(--text-sm);color:var(--text-secondary)">${err.message}</p>
+        <button class="btn btn-primary" onclick="location.reload()">Reintentar</button>
+      </div>
+    `;
+  });
+});

package/ui/js/console-logger.js

@@ -0,0 +1,172 @@
+/**
+ * console-logger.js — Panel de logs y captura de errores del frontend
+ * Intercepta console.error, console.warn y window.onerror.
+ * Muestra un panel colapsable en la parte inferior de la pantalla.
+ */
+
+import * as state from './state.js';
+
+const MAX_LOGS = 100;
+let _panel = null;
+let _logsList = null;
+let _errorBadge = null;
+let _titleEl = null;
+let _errorCount = 0;
+
+/** Inicializa el módulo y vincula el panel del DOM */
+export function init() {
+  _panel     = document.getElementById('console-panel');
+  _logsList  = document.getElementById('console-logs');
+  _errorBadge = document.getElementById('console-error-count');
+  _titleEl   = document.getElementById('console-panel-title');
+
+  const closeBtn = document.getElementById('console-close-btn');
+  const clearBtn = document.getElementById('console-clear-btn');
+
+  closeBtn?.addEventListener('click', close);
+  clearBtn?.addEventListener('click', clear);
+
+  _patchConsole();
+  _attachWindowErrors();
+}
+
+/** Abre el panel de console */
+export function open() {
+  _panel?.classList.add('is-open');
+  state.update('consolePanelOpen', true);
+  // Scroll to bottom
+  setTimeout(() => { if (_logsList) _logsList.scrollTop = _logsList.scrollHeight; }, 50);
+}
+
+/** Cierra el panel */
+export function close() {
+  _panel?.classList.remove('is-open');
+  state.update('consolePanelOpen', false);
+}
+
+/** Toggle */
+export function toggle() {
+  if (state.get('consolePanelOpen')) close();
+  else open();
+}
+
+/** Limpia los logs */
+export function clear() {
+  state.update('consoleLogs', []);
+  _errorCount = 0;
+  if (_logsList) _logsList.innerHTML = '';
+  _updateErrorBadge();
+}
+
+/**
+ * Añade una entrada al log
+ * @param {'error'|'warn'|'info'|'debug'} level
+ * @param {string} message
+ */
+export function log(level, message) {
+  const entry = {
+    level,
+    message: String(message),
+    time: new Date().toISOString(),
+  };
+
+  const logs = state.get('consoleLogs');
+  logs.push(entry);
+  if (logs.length > MAX_LOGS) logs.shift();
+  state.update('consoleLogs', logs);
+
+  _appendEntry(entry);
+
+  if (level === 'error') {
+    _errorCount++;
+    _updateErrorBadge();
+    // Auto-abrir en error
+    if (!state.get('consolePanelOpen')) open();
+  }
+}
+
+function _appendEntry(entry) {
+  if (!_logsList) return;
+  const time = entry.time.slice(11, 23); // HH:mm:ss.mmm
+  const item = document.createElement('div');
+  item.className = 'console-log-entry';
+  item.setAttribute('role', 'listitem');
+  item.innerHTML = `
+    <span class="console-log-time">${time}</span>
+    <span class="log-level log-${entry.level}">[${entry.level.toUpperCase()}]</span>
+    <span class="console-log-msg">${_escapeHtml(entry.message)}</span>
+  `;
+  _logsList.appendChild(item);
+  _logsList.scrollTop = _logsList.scrollHeight;
+
+  // Limitar nodos en el DOM
+  while (_logsList.childElementCount > MAX_LOGS) {
+    _logsList.firstElementChild?.remove();
+  }
+}
+
+function _updateErrorBadge() {
+  if (!_errorBadge) return;
+  if (_errorCount > 0) {
+    _errorBadge.textContent = _errorCount;
+    _errorBadge.style.display = '';
+  } else {
+    _errorBadge.style.display = 'none';
+  }
+  // Actualizar badge del sidebar
+  const sidebarBadge = document.getElementById('sidebar-console-badge');
+  if (sidebarBadge) {
+    sidebarBadge.textContent = _errorCount;
+    sidebarBadge.style.display = _errorCount > 0 ? '' : 'none';
+  }
+}
+
+function _patchConsole() {
+  const _origError = console.error.bind(console);
+  const _origWarn  = console.warn.bind(console);
+  const _origLog   = console.log.bind(console);
+
+  console.error = (...args) => {
+    _origError(...args);
+    log('error', args.map(_serialize).join(' '));
+  };
+  console.warn = (...args) => {
+    _origWarn(...args);
+    log('warn', args.map(_serialize).join(' '));
+  };
+  // Solo capturar console.log marcados como [ops]
+  console.log = (...args) => {
+    _origLog(...args);
+    const msg = args.map(_serialize).join(' ');
+    if (msg.startsWith('[ops]') || msg.startsWith('[router]') || msg.startsWith('[api]')) {
+      log('info', msg);
+    }
+  };
+}
+
+function _attachWindowErrors() {
+  window.onerror = (message, source, lineno, colno, error) => {
+    const msg = error?.stack || `${message} (${source}:${lineno}:${colno})`;
+    log('error', msg);
+    return false; // Dejar que sigan propagándose
+  };
+
+  window.addEventListener('unhandledrejection', event => {
+    const msg = event.reason?.stack || String(event.reason);
+    log('error', `Unhandled Promise rejection: ${msg}`);
+  });
+}
+
+function _serialize(value) {
+  if (typeof value === 'string') return value;
+  if (value instanceof Error) return value.stack || value.message;
+  try { return JSON.stringify(value, null, 0); } catch { return String(value); }
+}
+
+function _escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}

package/ui/js/i18n.js

@@ -0,0 +1,14 @@
+import * as state from './state.js';
+
+export function t(key, params = {}, fallback = null) {
+  const messages = state.get('messages') || {};
+  let value = messages[key] || fallback || key;
+  for (const [param, replacement] of Object.entries(params)) {
+    value = value.replace(new RegExp(`\\{${param}\\}`, 'g'), String(replacement));
+  }
+  return value;
+}
+
+export function listFormat(values, separator = ', ') {
+  return (values || []).filter(Boolean).join(separator);
+}