trackops 2.0.3 → 2.0.5

package/ui/js/onboarding.js

@@ -28,7 +28,7 @@ const STEPS = [
     titleKey: 'ui.onboarding.nav.title',
     descKey: 'ui.onboarding.nav.desc',
     target:   '#sidebar',
-    view:     'overview',
+    view:     'dashboard',
     pos:      'right',
   },
 
@@ -36,8 +36,8 @@ const STEPS = [
   {
     titleKey: 'ui.onboarding.kpi.title',
     descKey: 'ui.onboarding.kpi.desc',
-    target:   '.kpi-grid',
-    view:     'overview',
+    target:   '.grid-4',
+    view:     'dashboard',
     pos:      'bottom',
   },
 
@@ -46,7 +46,7 @@ const STEPS = [
     titleKey: 'ui.onboarding.activity.title',
     descKey: 'ui.onboarding.activity.desc',
     target:   '.chart-card',
-    view:     'overview',
+    view:     'dashboard',
     pos:      'bottom',
   },
 
@@ -55,71 +55,62 @@ const STEPS = [
     titleKey: 'ui.onboarding.progress.title',
     descKey: 'ui.onboarding.progress.desc',
     target:   '.donut-wrapper',
-    view:     'overview',
+    view:     'dashboard',
     pos:      'left',
   },
 
-  // 5 — Time Tracker
-  {
-    titleKey: 'ui.onboarding.time.title',
-    descKey: 'ui.onboarding.time.desc',
-    target:   '.time-tracker-card',
-    view:     'overview',
-    pos:      'top',
-  },
-
-  // 6 — Topbar: búsqueda
+  // 5 — Topbar: búsqueda
   {
     titleKey: 'ui.onboarding.search.title',
     descKey: 'ui.onboarding.search.desc',
     target:   '.topbar-search',
-    view:     'overview',
+    view:     'dashboard',
     pos:      'bottom',
   },
 
-  // 7 — Board (Kanban)
-  {
-    titleKey: 'ui.onboarding.board.title',
-    descKey: 'ui.onboarding.board.desc',
-    target:   '.board-grid',
-    view:     'board',
-    pos:      'top',
-  },
-
-  // 8 — Editor de tareas
+  // 7 — Tasks (Kanban mode)
   {
     titleKey: 'ui.onboarding.tasks.title',
     descKey: 'ui.onboarding.tasks.desc',
-    target:   '.task-list',
+    target:   '#task-list',
     view:     'tasks',
     pos:      'right',
   },
 
-  // 9 — Ejecución / Consola
+  // 8 — Terminal
   {
     titleKey: 'ui.onboarding.execution.title',
     descKey: 'ui.onboarding.execution.desc',
     target:   '.terminal-surface',
-    view:     'execution',
+    view:     'terminal',
     pos:      'top',
   },
 
-  // 10 — Analytics
+  // 9 — Timeline
   {
-    titleKey: 'ui.onboarding.insights.title',
-    descKey: 'ui.onboarding.insights.desc',
-    target:   '.health-grid',
-    view:     'insights',
-    pos:      'bottom',
+    titleKey: 'ui.onboarding.timeline.title',
+    descKey: 'ui.onboarding.timeline.desc',
+    target:   '.timeline-container',
+    view:     'timeline',
+    pos:      'top',
   },
 
-  // 11 — AI Skill Hub
+  // 10 — Projects
   {
-    titleKey: 'ui.onboarding.skills.title',
-    descKey: 'ui.onboarding.skills.desc',
-    target:   '#view-skills',
-    view:     'skills',
-    pos:      'right',
+    titleKey: 'ui.onboarding.projects.title',
+    descKey: 'ui.onboarding.projects.desc',
+    target:   '.projects-grid',
+    view:     'projects',
+    pos:      'top',
+  },
+
+  // 11 — Keyboard shortcuts
+  {
+    titleKey: 'ui.onboarding.keyboard.title',
+    descKey: 'ui.onboarding.keyboard.desc',
+    target:   null,
+    view:     null,
+    pos:      'center',
   },
 
   // 12 — Theme toggle
@@ -127,7 +118,7 @@ const STEPS = [
     titleKey: 'ui.onboarding.theme.title',
     descKey: 'ui.onboarding.theme.desc',
     target:   '#theme-toggle-btn',
-    view:     'overview',
+    view:     'dashboard',
     pos:      'bottom',
   },
 

package/ui/js/router.js

@@ -1,125 +1,142 @@
-/**
- * router.js — Navegación entre vistas
- * Gestiona qué vista está activa en #view-container
- * y sincroniza el estado activo en el sidebar.
- */
-
-import * as state from './state.js';
-
-/** @type {Map<string, function(): HTMLElement|string>} */
-const _registry = new Map();
-let _currentView = null;
-let _container = null;
-
-/**
- * Registra una vista
- * @param {string} id - identificador único de la vista
- * @param {function(): Promise<HTMLElement|string>} factory - función que devuelve el contenido
- */
-export function register(id, factory) {
-  _registry.set(id, factory);
-}
-
-/**
- * Inicializa el router
- * @param {HTMLElement} container - #view-container
- */
-export function init(container) {
-  _container = container;
-
-  // Navegación por hash
-  window.addEventListener('hashchange', _handleHash);
-
-  // Clic en nav-items del sidebar (delegación)
-  document.addEventListener('click', e => {
-    const item = e.target.closest('[data-view]');
-    if (!item || !item.dataset.view) return;
-    e.preventDefault();
-    navigate(item.dataset.view);
-  });
-}
-
-/**
- * Navega a una vista
- * @param {string} viewId
- * @param {boolean} [updateHash=true]
- */
-export async function navigate(viewId, updateHash = true) {
-  if (!_registry.has(viewId)) {
-    console.warn(`[router] Vista desconocida: "${viewId}"`);
-    return;
-  }
-
-  _currentView = viewId;
-  state.update('activeView', viewId);
-
-  // Actualizar hash sin trigger de hashchange
-  if (updateHash && window.location.hash !== `#${viewId}`) {
-    history.replaceState(null, '', `#${viewId}`);
-  }
-
-  // Actualizar clases activas en sidebar
-  document.querySelectorAll('[data-view]').forEach(item => {
-    item.classList.toggle('is-active', item.dataset.view === viewId);
-  });
-
-  // Renderizar contenido
-  if (_container) {
-    _container.innerHTML = '<div style="padding:2rem"><div class="spinner"></div></div>';
-    try {
-      const factory = _registry.get(viewId);
-      const content = await factory();
-      if (typeof content === 'string') {
-        _container.innerHTML = content;
-      } else if (content instanceof HTMLElement) {
-        _container.innerHTML = '';
-        _container.appendChild(content);
-      }
-      // Scroll to top
-      _container.scrollTop = 0;
-      // Focus para a11y (skip-link target)
-      _container.focus({ preventScroll: true });
-    } catch (err) {
-      console.error('[router] Error cargando vista:', err);
-      _container.innerHTML = `
-        <div class="empty-state" style="margin:2rem">
-          <p>Error al cargar la vista <strong>${viewId}</strong></p>
-          <p style="font-size:0.8rem;font-family:var(--font-mono)">${err.message}</p>
-        </div>`;
-    }
-  }
-}
-
-/**
- * Refresca la vista actual (re-renderizado)
- */
-export async function refresh() {
-  if (_currentView) {
-    await navigate(_currentView, false);
-  }
-}
-
-/**
- * Obtiene la vista activa
- */
-export function current() { return _currentView; }
-
-/**
- * Handler de hashchange
- */
-function _handleHash() {
-  const hash = window.location.hash.slice(1);
-  if (hash && _registry.has(hash) && hash !== _currentView) {
-    navigate(hash, false);
-  }
-}
-
-/**
- * Carga la vista inicial desde el hash o usa la vista por defecto
- * @param {string} [defaultView='overview']
- */
-export async function start(defaultView = 'overview') {
-  const hash = window.location.hash.slice(1);
-  const initial = hash && _registry.has(hash) ? hash : defaultView;
-  await navigate(initial, true);
-}
+/**
+ * router.js — Navegación entre vistas
+ * Gestiona qué vista está activa en #view-container
+ * y sincroniza el estado activo en el sidebar.
+ */
+
+import * as state from './state.js';
+
+const _redirects = {
+  overview: 'dashboard',
+  insights: 'dashboard',
+  board: 'tasks',
+  skills: 'settings',
+  execution: 'terminal',
+};
+
+/** @type {Map<string, function(): HTMLElement|string>} */
+const _registry = new Map();
+let _currentView = null;
+let _container = null;
+
+/**
+ * Registra una vista
+ * @param {string} id - identificador único de la vista
+ * @param {function(): Promise<HTMLElement|string>} factory - función que devuelve el contenido
+ */
+export function register(id, factory) {
+  _registry.set(id, factory);
+}
+
+/**
+ * Inicializa el router
+ * @param {HTMLElement} container - #view-container
+ */
+export function init(container) {
+  _container = container;
+
+  // Navegación por hash
+  window.addEventListener('hashchange', _handleHash);
+
+  // Clic en nav-items del sidebar (delegación)
+  document.addEventListener('click', e => {
+    const item = e.target.closest('[data-view]');
+    if (!item || !item.dataset.view) return;
+    e.preventDefault();
+    navigate(item.dataset.view);
+  });
+}
+
+/**
+ * Navega a una vista
+ * @param {string} viewId
+ * @param {boolean} [updateHash=true]
+ */
+export async function navigate(viewId, updateHash = true) {
+  if (!_registry.has(viewId)) {
+    console.warn(`[router] Vista desconocida: "${viewId}"`);
+    return;
+  }
+
+  _currentView = viewId;
+  state.update('activeView', viewId);
+
+  // Actualizar hash sin trigger de hashchange
+  if (updateHash && window.location.hash !== `#${viewId}`) {
+    history.replaceState(null, '', `#${viewId}`);
+  }
+
+  // Actualizar clases activas en sidebar
+  document.querySelectorAll('[data-view]').forEach(item => {
+    item.classList.toggle('is-active', item.dataset.view === viewId);
+  });
+
+  // Renderizar contenido
+  if (_container) {
+    _container.innerHTML = '<div style="padding:2rem"><div class="spinner"></div></div>';
+    try {
+      const factory = _registry.get(viewId);
+      const content = await factory();
+      if (typeof content === 'string') {
+        _container.innerHTML = content;
+      } else if (content instanceof HTMLElement) {
+        _container.innerHTML = '';
+        _container.appendChild(content);
+      }
+      // Scroll to top
+      _container.scrollTop = 0;
+      // Focus para a11y (skip-link target)
+      _container.focus({ preventScroll: true });
+    } catch (err) {
+      console.error('[router] Error cargando vista:', err);
+      _container.innerHTML = `
+        <div class="empty-state" style="margin:2rem">
+          <p>Error al cargar la vista <strong>${viewId}</strong></p>
+          <p style="font-size:0.8rem;font-family:var(--font-mono)">${err.message}</p>
+        </div>`;
+    }
+  }
+}
+
+/**
+ * Refresca la vista actual (re-renderizado)
+ */
+export async function refresh() {
+  if (_currentView) {
+    await navigate(_currentView, false);
+  }
+}
+
+/**
+ * Obtiene la vista activa
+ */
+export function current() { return _currentView; }
+
+/**
+ * Handler de hashchange
+ */
+function _handleHash() {
+  let hash = window.location.hash.slice(1);
+  // Redirect old routes
+  if (_redirects[hash]) {
+    hash = _redirects[hash];
+    history.replaceState(null, '', `#${hash}`);
+  }
+  if (hash && _registry.has(hash) && hash !== _currentView) {
+    navigate(hash, false);
+  }
+}
+
+/**
+ * Carga la vista inicial desde el hash o usa la vista por defecto
+ * @param {string} [defaultView='overview']
+ */
+export async function start(defaultView = 'dashboard') {
+  let hash = window.location.hash.slice(1);
+  if (_redirects[hash]) {
+    hash = _redirects[hash];
+    history.replaceState(null, '', `#${hash}`);
+  }
+  const initial = hash && _registry.has(hash) ? hash : defaultView;
+  await navigate(initial, true);
+}

package/ui/js/theme.js

@@ -1,100 +1,100 @@
-/**
- * theme.js — Gestor de tema claro / oscuro
- * Persiste en localStorage. Si no hay preferencia guardada, usa tema claro.
- */
-
-const STORAGE_KEY = 'trackops-theme';
-const THEMES = { dark: 'dark', light: 'light' };
-
-/** Inicializa el tema aplicando el guardado o el preferido por el sistema */
-export function init() {
-  const saved = localStorage.getItem(STORAGE_KEY);
-  apply(saved || THEMES.light, false);
-}
-
-/** Aplica un tema
- * @param {'dark'|'light'} theme
- * @param {boolean} [save=true] - persistir en localStorage
- */
-export function apply(theme, save = true) {
-  const root = document.documentElement;
-
-  if (theme === THEMES.light) {
-    root.setAttribute('data-theme', 'light');
-  } else {
-    root.removeAttribute('data-theme');
-  }
-
-  if (save) {
-    localStorage.setItem(STORAGE_KEY, theme);
-  }
-
-  // Actualizar icono del botón del topbar
-  _updateButton(theme);
-}
-
-/** Alterna entre claro y oscuro */
-export function toggle() {
-  const current = document.documentElement.getAttribute('data-theme') === 'light'
-    ? THEMES.light
-    : THEMES.dark;
-  apply(current === THEMES.light ? THEMES.dark : THEMES.light);
-}
-
-/** Obtiene el tema activo */
-export function current() {
-  return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
-}
-
-/** Renderiza el botón toggle para el topbar */
-export function renderButton() {
-  const isDark = current() === 'dark';
-  return `
-    <button
-      class="btn btn-ghost btn-sm btn-icon theme-toggle"
-      id="theme-toggle-btn"
-      type="button"
-      aria-label="${isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro'}"
-      title="${isDark ? 'Tema claro' : 'Tema oscuro'}"
-    >
-      ${isDark ? _iconSun() : _iconMoon()}
-    </button>
-  `;
-}
-
-/** Vincula el botón toggle (llamar tras renderizar el topbar) */
-export function bindButton() {
-  const btn = document.getElementById('theme-toggle-btn');
-  btn?.addEventListener('click', toggle);
-}
-
-// ─────────────────────────────── PRIVADO ────────────────────────────────────
-
-function _updateButton(theme) {
-  const btn = document.getElementById('theme-toggle-btn');
-  if (!btn) return;
-  const isDark = theme === 'dark';
-  btn.setAttribute('aria-label', isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro');
-  btn.setAttribute('title', isDark ? 'Tema claro' : 'Tema oscuro');
-  btn.innerHTML = isDark ? _iconSun() : _iconMoon();
-}
-
-function _iconSun() {
-  return `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-    <circle cx="12" cy="12" r="5"/>
-    <line x1="12" y1="1" x2="12" y2="3"/>
-    <line x1="12" y1="21" x2="12" y2="23"/>
-    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
-    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-    <line x1="1" y1="12" x2="3" y2="12"/>
-    <line x1="21" y1="12" x2="23" y2="12"/>
-    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
-    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-  </svg>`;
-}
-
-function _iconMoon() {
-  return `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-  </svg>`;
-}
+/**
+ * theme.js — Gestor de tema claro / oscuro
+ * Persiste en localStorage. Si no hay preferencia guardada, usa tema claro.
+ */
+
+const STORAGE_KEY = 'trackops-theme';
+const THEMES = { dark: 'dark', light: 'light' };
+
+/** Inicializa el tema aplicando el guardado o el preferido por el sistema */
+export function init() {
+  const saved = localStorage.getItem(STORAGE_KEY);
+  apply(saved || THEMES.light, false);
+}
+
+/** Aplica un tema
+ * @param {'dark'|'light'} theme
+ * @param {boolean} [save=true] - persistir en localStorage
+ */
+export function apply(theme, save = true) {
+  const root = document.documentElement;
+
+  if (theme === THEMES.light) {
+    root.setAttribute('data-theme', 'light');
+  } else {
+    root.removeAttribute('data-theme');
+  }
+
+  if (save) {
+    localStorage.setItem(STORAGE_KEY, theme);
+  }
+
+  // Actualizar icono del botón del topbar
+  _updateButton(theme);
+}
+
+/** Alterna entre claro y oscuro */
+export function toggle() {
+  const current = document.documentElement.getAttribute('data-theme') === 'light'
+    ? THEMES.light
+    : THEMES.dark;
+  apply(current === THEMES.light ? THEMES.dark : THEMES.light);
+}
+
+/** Obtiene el tema activo */
+export function current() {
+  return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+}
+
+/** Renderiza el botón toggle para el topbar */
+export function renderButton() {
+  const isDark = current() === 'dark';
+  return `
+    <button
+      class="btn btn-ghost btn-sm btn-icon theme-toggle"
+      id="theme-toggle-btn"
+      type="button"
+      aria-label="${isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro'}"
+      title="${isDark ? 'Tema claro' : 'Tema oscuro'}"
+    >
+      ${isDark ? _iconSun() : _iconMoon()}
+    </button>
+  `;
+}
+
+/** Vincula el botón toggle (llamar tras renderizar el topbar) */
+export function bindButton() {
+  const btn = document.getElementById('theme-toggle-btn');
+  btn?.addEventListener('click', toggle);
+}
+
+// ─────────────────────────────── PRIVADO ────────────────────────────────────
+
+function _updateButton(theme) {
+  const btn = document.getElementById('theme-toggle-btn');
+  if (!btn) return;
+  const isDark = theme === 'dark';
+  btn.setAttribute('aria-label', isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro');
+  btn.setAttribute('title', isDark ? 'Tema claro' : 'Tema oscuro');
+  btn.innerHTML = isDark ? _iconSun() : _iconMoon();
+}
+
+function _iconSun() {
+  return `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="12" cy="12" r="5"/>
+    <line x1="12" y1="1" x2="12" y2="3"/>
+    <line x1="12" y1="21" x2="12" y2="23"/>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+    <line x1="1" y1="12" x2="3" y2="12"/>
+    <line x1="21" y1="12" x2="23" y2="12"/>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+  </svg>`;
+}
+
+function _iconMoon() {
+  return `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+  </svg>`;
+}