trackops 1.0.0 → 1.1.0

package/ui/js/views/settings.js

@@ -0,0 +1,381 @@
+/**
+ * settings.js — Vista de configuración del proyecto
+ */
+
+import { icon } from '../icons.js';
+import * as state from '../state.js';
+import * as api from '../api.js';
+import { flash } from './flash.js';
+import { esc, formatDate } from '../utils.js';
+import { t } from '../i18n.js';
+
+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 renderWorkspacePanel(payload) {
+  const project = payload?.project;
+  if (!project) return '';
+
+  return `
+    <div class="panel">
+      <div class="panel-header">
+        <p class="panel-title">${t('ui.settings.workspaceTitle', {}, 'Workspace')}</p>
+        <span class="badge badge-muted">${esc(project.layout || 'legacy')}</span>
+      </div>
+      <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.workspaceRoot', {}, 'Workspace root')}</p>
+          <p class="value">${esc(project.workspaceRoot || project.root || '—')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.appRoot', {}, 'App root')}</p>
+          <p class="value">${esc(project.appRoot || project.root || '—')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.opsRoot', {}, 'Ops root')}</p>
+          <p class="value">${esc(project.opsRoot || project.root || '—')}</p>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderEnvPanel(envState) {
+  if (!envState) return '';
+
+  const required = Array.isArray(envState.requiredKeys) ? envState.requiredKeys : [];
+  const present = Array.isArray(envState.presentKeys) ? envState.presentKeys : [];
+  const missing = Array.isArray(envState.missingKeys) ? envState.missingKeys : [];
+  const files = envState.files || {};
+
+  return `
+    <div class="panel">
+      <div class="panel-header">
+        <p class="panel-title">${t('ui.settings.envTitle', {}, 'Environment')}</p>
+        <span class="badge badge-${missing.length ? 'warning' : 'success'}">${missing.length ? t('ui.settings.envMissingBadge', { count: missing.length }, `${missing.length} missing`) : t('ui.settings.envHealthyBadge', {}, 'Ready')}</span>
+      </div>
+      <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envBridgeMode', {}, 'Bridge mode')}</p>
+          <p class="value">${esc(envState.bridgeMode || 'none')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envRootFile', {}, 'Root .env')}</p>
+          <p class="value">${esc(files.rootEnv || '—')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envExampleFile', {}, '.env.example')}</p>
+          <p class="value">${esc(files.rootExample || '—')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envAppBridge', {}, 'App bridge')}</p>
+          <p class="value">${esc(files.appBridge || '—')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envRequiredKeys', {}, 'Required keys')}</p>
+          <p class="value">${required.length ? esc(required.join(', ')) : '—'}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envPresentKeys', {}, 'Present keys')}</p>
+          <p class="value">${present.length ? esc(present.join(', ')) : '—'}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envMissingKeys', {}, 'Missing keys')}</p>
+          <p class="value">${missing.length ? esc(missing.join(', ')) : t('ui.settings.envNoMissing', {}, 'None')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envLastAudit', {}, 'Last audit')}</p>
+          <p class="value">${envState.lastAuditAt ? formatDate(envState.lastAuditAt, 'date') : '—'}</p>
+        </div>
+        <button class="btn btn-ghost btn-sm" type="button" id="sync-env-btn">
+          ${icon('sync', 14)} ${t('ui.settings.envSync', {}, 'Sync env')}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+export async function render() {
+  const payload   = state.getPayload();
+  const projects  = state.get('projects');
+  const currentId = state.get('currentProjectId');
+  const control   = payload?.control;
+  const runtime   = payload?.runtime;
+  const docsDirty = payload?.docsDirty || [];
+  const envState  = payload?.env;
+
+  return `
+    <div class="view-enter">
+      <div class="section-header">
+        <div class="section-header-left">
+          <p class="eyebrow">${t('ui.settings.eyebrow', {}, 'Settings')}</p>
+          <h2>${t('ui.settings.title', {}, 'Project settings')}</h2>
+        </div>
+      </div>
+
+      <div class="grid-2" style="align-items:start">
+
+        <!-- Col izquierda -->
+        <div style="display:flex;flex-direction:column;gap:var(--space-4)">
+
+          <!-- Info del proyecto activo -->
+          ${control ? `
+            <div class="panel">
+              <div class="panel-header">
+                <p class="panel-title">Proyecto Activo</p>
+                <span class="badge badge-success">Activo</span>
+              </div>
+              <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+                <div class="info-row">
+                  <p class="label-sm">Nombre</p>
+                  <p class="value">${esc(control.meta?.projectName || '—')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Ruta</p>
+                  <p class="value">${esc(payload?.project?.root || '—')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Fase activa</p>
+                  <p class="value">${esc(payload?.derived?.activePhase?.id || '—')} — ${esc(payload?.derived?.activePhase?.label || '')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Foco actual</p>
+                  <p class="value">${esc(control.meta?.currentFocus || '—')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Entrega objetivo</p>
+                  <p class="value">${esc(control.meta?.deliveryTarget || '—')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Última actualización</p>
+                  <p class="value">${formatDate(control.meta?.updatedAt || '', 'date')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">${t('ui.topbar.language', {}, 'Language')}</p>
+                  <div class="project-select-wrapper locale-select-wrapper">
+                    <select id="settings-locale-select" aria-label="${t('ui.topbar.languageAria', {}, 'Select dashboard language')}">
+                      <option value="es" ${(payload?.i18n?.locale || 'es') === 'es' ? 'selected' : ''}>${t('ui.topbar.languageEs', {}, 'ES')}</option>
+                      <option value="en" ${(payload?.i18n?.locale || 'es') === 'en' ? 'selected' : ''}>${t('ui.topbar.languageEn', {}, 'EN')}</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ` : `<p class="text-muted">${t('ui.settings.noProject', {}, 'No project loaded.')}</p>`}
+
+          ${renderWorkspacePanel(payload)}
+
+          <!-- Estado del Repo -->
+          ${runtime ? `
+            <div class="panel">
+              <div class="panel-header">
+                <p class="panel-title">Repositorio</p>
+                <span class="badge badge-${runtime.clean ? 'success' : 'warning'}">${runtime.clean ? 'Limpio' : 'Con cambios'}</span>
+              </div>
+              <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+                <div class="info-row">
+                  <p class="label-sm">Rama</p>
+                  <p class="value">${esc(runtime.branch || '—')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Estado</p>
+                  <p class="value">${runtime.staged}s ${runtime.unstaged}u ${runtime.untracked}?</p>
+                </div>
+                ${runtime.lastCommit ? `
+                  <div class="info-row">
+                    <p class="label-sm">Último commit</p>
+                    <p class="value">${esc(runtime.lastCommit.shortHash)} · ${esc(runtime.lastCommit.subject)}</p>
+                  </div>
+                  <div class="info-row">
+                    <p class="label-sm">Fecha commit</p>
+                    <p class="value">${formatDate(runtime.lastCommit.date, 'date')}</p>
+                  </div>
+                ` : ''}
+                <div class="info-row">
+                  <p class="label-sm">Divergencia</p>
+                  <p class="value">↑ ${runtime.ahead || 0} por delante · ↓ ${runtime.behind || 0} por detrás</p>
+                </div>
+              </div>
+            </div>
+          ` : ''}
+
+        </div>
+
+        <!-- Col derecha -->
+        <div style="display:flex;flex-direction:column;gap:var(--space-4)">
+
+          <!-- Portfolio -->
+          <div class="panel">
+            <div class="panel-header">
+              <p class="panel-title">Portfolio de Proyectos</p>
+              <span class="badge badge-muted">${projects.length}</span>
+            </div>
+            <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+              ${projects.length === 0
+                ? '<div class="empty-state">Sin proyectos registrados.</div>'
+                : projects.map(p => `
+                    <div class="project-row ${p.id === currentId ? 'is-active' : ''}">
+                      <div class="project-row-info">
+                        <p class="project-name">${esc(p.name)}</p>
+                        <p class="project-path">${esc(p.root)}</p>
+                      </div>
+                      <div class="project-row-actions">
+                        ${p.available
+                          ? `<span class="badge badge-success">Disponible</span>`
+                          : `<span class="badge badge-warning" title="No se puede cargar el control">No disponible</span>`}
+                        ${p.id === currentId
+                          ? `<span class="badge badge-accent">Activo</span>`
+                          : p.available ? `<button class="btn btn-ghost btn-sm" type="button" data-switch="${esc(p.id)}">Abrir</button>` : ''
+                        }
+                      </div>
+                    </div>
+                  `).join('')
+              }
+
+              <!-- Registrar nuevo -->
+              <div style="margin-top:var(--space-2)">
+                <div class="field">
+                  <label for="new-project-path">Registrar proyecto existente</label>
+                  <input id="new-project-path" type="text" placeholder="/ruta/al/proyecto" />
+                </div>
+                <div class="form-actions" style="margin-top:var(--space-2)">
+                  <button class="btn btn-ghost btn-sm" type="button" id="register-project-btn">
+                    ${icon('plus', 14)} Registrar
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Docs Drift -->
+          <div class="panel">
+            <div class="panel-header">
+              <p class="panel-title">Documentación</p>
+              <span class="badge badge-${docsDirty.length ? 'warning' : 'success'}">${docsDirty.length ? `${docsDirty.length} desfasados` : 'Sincronizados'}</span>
+            </div>
+            <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+              ${docsDirty.length > 0 ? `
+                <p style="font-size:var(--text-sm);color:var(--text-secondary)">Los siguientes archivos de documentación están desactualizados:</p>
+                <div class="stack stack-sm">
+                  ${docsDirty.map(d => `
+                    <div class="info-row"><p class="value">${esc(d)}</p></div>
+                  `).join('')}
+                </div>
+              ` : `
+                <p style="font-size:var(--text-sm);color:var(--success)">✓ Todos los archivos de documentación están sincronizados.</p>
+              `}
+              <button class="btn btn-ghost btn-sm" type="button" id="sync-docs-btn">
+                ${icon('sync', 14)} Sincronizar ahora
+              </button>
+            </div>
+          </div>
+
+          ${renderEnvPanel(envState)}
+
+          <!-- Milestones -->
+          ${control?.milestones?.length ? `
+            <div class="panel">
+              <div class="panel-header">
+                <p class="panel-title">Milestones</p>
+                <span class="badge badge-accent">${control.milestones.length}</span>
+              </div>
+              <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+                ${control.milestones.map(m => `
+                  <div class="finding-item" style="border-left-color:var(--accent)">
+                    <p style="font-weight:700;font-size:var(--text-sm)">${esc(m.title)}</p>
+                    <p style="font-size:var(--text-xs);color:var(--text-muted)">${esc(m.date)}</p>
+                    <ul style="margin-top:var(--space-2);padding-left:1rem">
+                      ${(m.items || []).map(item => `<li style="font-size:var(--text-xs);color:var(--text-secondary)">${esc(item)}</li>`).join('')}
+                    </ul>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          ` : ''}
+
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export function bindEvents() {
+  // Switch project
+  document.querySelectorAll('[data-switch]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const id = btn.dataset.switch;
+      state.update('currentProjectId', id);
+      localStorage.setItem('ops-dashboard-project', id);
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    });
+  });
+
+  // Registrar proyecto
+  document.getElementById('register-project-btn')?.addEventListener('click', async () => {
+    const input = document.getElementById('new-project-path');
+    const root  = input?.value.trim();
+    if (!root) { flash(t('ui.settings.enterPath', {}, 'Enter the project path.'), 'warning'); return; }
+    try {
+      await api.registerProject(root);
+      flash('Proyecto registrado.', 'success');
+      if (input) input.value = '';
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (err) {
+      flash(err.message, 'error');
+    }
+  });
+
+  // Sync docs
+  document.getElementById('sync-docs-btn')?.addEventListener('click', async () => {
+    try {
+      await api.syncDocs();
+      flash('Documentación sincronizada.', 'success');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (err) {
+      flash(err.message, 'error');
+    }
+  });
+
+  document.getElementById('sync-env-btn')?.addEventListener('click', async () => {
+    try {
+      await api.syncEnv();
+      flash(t('ui.settings.envSynced', {}, 'Environment synced.'), 'success');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (err) {
+      flash(err.message, 'error');
+    }
+  });
+
+  document.getElementById('settings-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;
+    }
+  });
+}
+
+export { bindEvents as bind };

package/ui/js/views/sidebar.js

@@ -0,0 +1,131 @@
+/**
+ * sidebar.js — Sidebar de navegación lateral
+ */
+
+import { icon } from '../icons.js';
+import * as state from '../state.js';
+import * as consoleLogger from '../console-logger.js';
+import * as onboarding from '../onboarding.js';
+import { t } from '../i18n.js';
+
+/** Renderiza el sidebar completo */
+export function render() {
+  const el = document.getElementById('sidebar');
+  if (!el) return;
+  const navItems = [
+    { id: 'overview',   label: t('ui.nav.overview', {}, 'Overview'), icon: 'dashboard', section: 'menu' },
+    { id: 'tasks',      label: t('ui.nav.tasks', {}, 'Tasks'), icon: 'tasks', section: 'menu', badge: true },
+    { id: 'board',      label: t('ui.nav.board', {}, 'Board'), icon: 'board', section: 'menu' },
+    { id: 'execution',  label: t('ui.nav.execution', {}, 'Execution'), icon: 'execution', section: 'menu' },
+    { id: 'skills',     label: t('ui.nav.skills', {}, 'Skills'), icon: 'zap', section: 'menu' },
+    { id: 'insights',   label: t('ui.nav.insights', {}, 'Insights'), icon: 'insights', section: 'menu' },
+  ];
+  const generalItems = [
+    { id: 'settings', label: t('ui.nav.settings', {}, 'Settings'), icon: 'settings' },
+    { id: 'help', label: t('ui.nav.help', {}, 'Help & Tour'), icon: 'help', action: 'tour' },
+    { id: 'console', label: t('ui.nav.logs', {}, 'Logs'), icon: 'console', action: 'console', badge: 'error' },
+  ];
+
+  el.innerHTML = `
+    <nav class="sidebar" aria-label="${t('ui.sidebar.aria', {}, 'Main navigation')}">
+      <!-- Logo -->
+      <a href="#" class="sidebar-logo" aria-label="${t('ui.sidebar.home', {}, 'TrackOps — Go home')}">
+        <div class="sidebar-logo-icon" aria-hidden="true">
+          ${icon('infinity', 20)}
+        </div>
+        <span class="sidebar-logo-name">TrackOps</span>
+      </a>
+
+      <!-- MENU -->
+      <div class="sidebar-section">
+        <p class="sidebar-section-label">${t('ui.sidebar.menu', {}, 'Menu')}</p>
+        <ul class="sidebar-nav" role="list">
+          ${navItems.map(item => _renderNavItem(item)).join('')}
+        </ul>
+      </div>
+
+      <!-- GENERAL -->
+      <div class="sidebar-footer">
+        <p class="sidebar-section-label" style="padding-bottom:var(--space-2)">${t('ui.sidebar.general', {}, 'General')}</p>
+        ${generalItems.map(item => _renderGeneralItem(item)).join('')}
+      </div>
+    </nav>
+  `;
+
+  _bindEvents(el);
+}
+
+function _renderNavItem(item) {
+  const activeView  = state.get('activeView');
+  const isActive    = activeView === item.id;
+  const pendingCount = _getPendingCount(item);
+
+  return `
+    <li role="listitem">
+      <button
+        class="nav-item ${isActive ? 'is-active' : ''}"
+        data-view="${item.id}"
+        type="button"
+        aria-current="${isActive ? 'page' : 'false'}"
+        aria-label="${item.label}${pendingCount ? `, ${t('ui.sidebar.pendingCount', { count: pendingCount }, `${pendingCount} pending`)}` : ''}"
+      >
+        <span class="nav-item-icon" aria-hidden="true">${icon(item.icon, 18)}</span>
+        <span class="nav-item-label">${item.label}</span>
+        ${pendingCount ? `<span class="nav-item-badge" aria-label="${t('ui.sidebar.tasksBadge', { count: pendingCount }, `${pendingCount} tasks`)}">${pendingCount}</span>` : ''}
+      </button>
+    </li>
+  `;
+}
+
+function _renderGeneralItem(item) {
+  return `
+    <button
+      class="nav-item"
+      data-action="${item.action || ''}"
+      data-view="${item.action ? '' : item.id}"
+      type="button"
+      aria-label="${item.label}"
+      ${item.action === 'console' ? 'id="sidebar-console-btn"' : ''}
+    >
+      <span class="nav-item-icon" aria-hidden="true">${icon(item.icon, 18)}</span>
+      <span class="nav-item-label">${item.label}</span>
+      ${item.badge === 'error' ? `<span class="nav-item-badge danger" id="sidebar-console-badge" aria-label="${t('ui.sidebar.errors', {}, 'errors')}" style="display:none">0</span>` : ''}
+    </button>
+  `;
+}
+
+function _getPendingCount(item) {
+  if (!item.badge) return 0;
+  const payload = state.getPayload();
+  if (!payload) return 0;
+  if (item.id === 'tasks') return payload.derived?.totals?.pending || 0;
+  return 0;
+}
+
+function _bindEvents(el) {
+  // Acciones especiales (no nav-view)
+  el.addEventListener('click', e => {
+    const btn = e.target.closest('[data-action]');
+    if (!btn) return;
+    const action = btn.dataset.action;
+    if (action === 'tour') {
+      onboarding.reset();
+      onboarding.show();
+    } else if (action === 'console') {
+      consoleLogger.toggle();
+    }
+  });
+}
+
+/** Refresca solo los badges sin re-renderizar todo */
+export function updateBadges() {
+  const payload = state.getPayload();
+  if (!payload) return;
+
+  const pending = payload.derived?.totals?.pending || 0;
+  const tasksBtn = document.querySelector('[data-view="tasks"] .nav-item-badge');
+  if (tasksBtn) {
+    tasksBtn.textContent = pending;
+    tasksBtn.style.display = pending ? '' : 'none';
+  }
+}