trackops 2.0.2 → 2.0.4

package/ui/js/keyboard.js

@@ -0,0 +1,229 @@
+/**
+ * keyboard.js — Sistema de atajos de teclado global para TrackOps Dashboard
+ * Secuencias de 2 teclas estilo Vim/GitHub (g d = go dashboard).
+ * No activo cuando un input/textarea/select tiene foco.
+ */
+
+import * as router from './router.js';
+import * as state from './state.js';
+import { icon } from './icons.js';
+
+/** @type {Map<string, {handler: Function, label: string, group: string}>} */
+const _shortcuts = new Map();
+
+/** Buffer para secuencias de 2 teclas */
+let _pendingKey = '';
+let _pendingTimer = null;
+const SEQUENCE_TIMEOUT = 600; // ms para completar secuencia
+
+/** Elemento del panel de ayuda */
+let _helpVisible = false;
+
+// ─────────────────────────────── REGISTRO ────────────────────────────────────
+
+/**
+ * Registrar un atajo de teclado
+ * @param {string} keys — Tecla o secuencia ('g o', '/', '?', 'Escape')
+ * @param {Function} handler — Callback
+ * @param {string} label — Descripcion para el panel de ayuda
+ * @param {string} [group='General'] — Grupo en el panel de ayuda
+ */
+export function register(keys, handler, label, group = 'General') {
+  _shortcuts.set(keys, { handler, label, group });
+}
+
+// ─────────────────────────────── DEFAULTS ────────────────────────────────────
+
+function _registerDefaults() {
+  // Navegacion
+  register('g d', () => router.navigate('dashboard'),  'Go to Dashboard',   'Navigation');
+  register('g t', () => router.navigate('tasks'),      'Go to Tasks',       'Navigation');
+  register('g l', () => router.navigate('timeline'),   'Go to Timeline',    'Navigation');
+  register('g e', () => router.navigate('terminal'),   'Go to Terminal',    'Navigation');
+  register('g p', () => router.navigate('projects'),   'Go to Projects',    'Navigation');
+  register('g s', () => router.navigate('settings'),   'Go to Settings',    'Navigation');
+
+  // Acciones
+  register('/', () => _focusSearch(),                   'Focus search',      'Actions');
+  register('r', () => _refreshState(),                  'Refresh data',      'Actions');
+  register('Escape', () => _closeActiveOverlay(),       'Close overlay',     'Actions');
+
+  // Ayuda
+  register('?', () => toggleHelp(),                     'Show shortcuts',    'Help');
+}
+
+// ─────────────────────────────── HANDLER ─────────────────────────────────────
+
+function _onKeyDown(e) {
+  // No interceptar si un input tiene foco
+  const tag = document.activeElement?.tagName?.toLowerCase();
+  if (tag === 'input' || tag === 'textarea' || tag === 'select') {
+    // Solo Escape escapa de inputs
+    if (e.key === 'Escape') {
+      document.activeElement.blur();
+      e.preventDefault();
+    }
+    return;
+  }
+
+  // No interceptar si hay modificadores (excepto Shift para ?)
+  if (e.ctrlKey || e.altKey || e.metaKey) return;
+
+  const key = e.key;
+
+  // Buscar atajo directo (1 tecla)
+  if (!_pendingKey) {
+    const direct = _shortcuts.get(key);
+    if (direct) {
+      e.preventDefault();
+      direct.handler();
+      return;
+    }
+
+    // Iniciar secuencia de 2 teclas
+    // Solo letras minusculas inician secuencias
+    if (/^[a-z]$/.test(key)) {
+      _pendingKey = key;
+      _pendingTimer = setTimeout(() => {
+        _pendingKey = '';
+        _pendingTimer = null;
+      }, SEQUENCE_TIMEOUT);
+      return;
+    }
+    return;
+  }
+
+  // Completar secuencia de 2 teclas
+  clearTimeout(_pendingTimer);
+  const sequence = `${_pendingKey} ${key}`;
+  _pendingKey = '';
+  _pendingTimer = null;
+
+  const seq = _shortcuts.get(sequence);
+  if (seq) {
+    e.preventDefault();
+    seq.handler();
+  }
+}
+
+// ─────────────────────────────── ACCIONES ────────────────────────────────────
+
+function _focusSearch() {
+  const input = document.querySelector('.topbar-search input, .topbar-search-input');
+  if (input) {
+    input.focus();
+    input.select();
+  }
+}
+
+function _refreshState() {
+  window.dispatchEvent(new CustomEvent('ops:refresh'));
+}
+
+function _closeActiveOverlay() {
+  // Cerrar help panel
+  if (_helpVisible) {
+    toggleHelp();
+    return;
+  }
+  // Cerrar modal
+  const modal = document.querySelector('.modal-overlay:not(.is-hidden)');
+  if (modal) {
+    modal.classList.add('is-hidden');
+    return;
+  }
+  // Cerrar console panel
+  const consolePanel = document.getElementById('console-panel');
+  if (consolePanel?.classList.contains('is-open')) {
+    consolePanel.classList.remove('is-open');
+  }
+}
+
+// ─────────────────────────────── HELP PANEL ──────────────────────────────────
+
+export function toggleHelp() {
+  _helpVisible = !_helpVisible;
+  let panel = document.getElementById('keyboard-help-panel');
+
+  if (!_helpVisible && panel) {
+    panel.remove();
+    return;
+  }
+
+  if (_helpVisible) {
+    panel = document.createElement('div');
+    panel.id = 'keyboard-help-panel';
+    panel.className = 'modal-overlay';
+    panel.setAttribute('role', 'dialog');
+    panel.setAttribute('aria-modal', 'true');
+    panel.setAttribute('aria-label', 'Keyboard shortcuts');
+    panel.addEventListener('click', (e) => {
+      if (e.target === panel) toggleHelp();
+    });
+
+    // Agrupar shortcuts
+    const groups = new Map();
+    for (const [keys, { label, group }] of _shortcuts) {
+      if (!groups.has(group)) groups.set(group, []);
+      groups.get(group).push({ keys, label });
+    }
+
+    let groupsHtml = '';
+    for (const [group, items] of groups) {
+      groupsHtml += `
+        <div class="kb-help-group">
+          <h3 class="kb-help-group-title">${group}</h3>
+          <div class="kb-help-items">
+            ${items.map(({ keys, label }) => `
+              <div class="kb-help-item">
+                <kbd class="kb-help-key">${_formatKey(keys)}</kbd>
+                <span class="kb-help-label">${label}</span>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      `;
+    }
+
+    panel.innerHTML = `
+      <div class="modal" style="max-width:520px">
+        <div class="modal-header">
+          <h2 class="modal-title">${icon('keyboard', 18)} Keyboard shortcuts</h2>
+          <button class="modal-close" type="button" aria-label="Close" id="kb-help-close">&times;</button>
+        </div>
+        <div class="modal-body" style="padding:var(--space-4) var(--space-6)">
+          ${groupsHtml}
+        </div>
+        <div class="modal-footer" style="justify-content:center">
+          <p style="font-size:var(--text-xs);color:var(--text-muted)">Press <kbd class="kb-help-key">?</kbd> to toggle this panel</p>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(panel);
+    panel.querySelector('#kb-help-close')?.addEventListener('click', () => toggleHelp());
+  }
+}
+
+function _formatKey(keys) {
+  return keys.split(' ').map(k => {
+    if (k === 'Escape') return 'Esc';
+    if (k === '/') return '/';
+    if (k === '?') return '?';
+    return k.toUpperCase();
+  }).join(' <span style="opacity:0.4">then</span> ');
+}
+
+// ─────────────────────────────── INIT ────────────────────────────────────────
+
+export function init() {
+  _registerDefaults();
+  document.addEventListener('keydown', _onKeyDown);
+}
+
+export function destroy() {
+  document.removeEventListener('keydown', _onKeyDown);
+  _shortcuts.clear();
+}
+
+export default { init, destroy, register, toggleHelp };

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

@@ -6,6 +6,14 @@
 
 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;
@@ -108,7 +116,12 @@ export function current() { return _currentView; }
  * Handler de hashchange
  */
 function _handleHash() {
-  const hash = window.location.hash.slice(1);
+  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);
   }
@@ -118,8 +131,12 @@ function _handleHash() {
  * 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);
+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/views/board.js

@@ -1,97 +1,121 @@
 /**
- * board.js — Tablero Kanban con drag & drop
+ * board.js — Headless Kanban module (embeddable inside tasks.js)
+ *
+ * Exports:
+ *   renderKanban(tasks, phases, opts)  — returns kanban board HTML (columns + cards only)
+ *   bindKanbanEvents()                 — binds drag-drop, card click/selection, task actions
  */
 
 import { icon } from '../icons.js';
 import * as state from '../state.js';
 import * as api from '../api.js';
-import * as router from '../router.js';
 import { flash } from './flash.js';
-import { esc, debounce } from '../utils.js';
+import { esc } from '../utils.js';
 import { t } from '../i18n.js';
 
 const COLUMNS = [
   { id: 'pending',     label: 'Pending' },
   { id: 'in_progress', label: 'In Progress' },
-  { id: 'in_review',  label: 'In Review' },
-  { id: 'blocked',    label: 'Blocked' },
-  { id: 'completed',  label: 'Completed' },
+  { id: 'in_review',   label: 'In Review' },
+  { id: 'blocked',     label: 'Blocked' },
+  { id: 'completed',   label: 'Completed' },
 ];
 
 let _dragTaskId = null;
 
-export async function render() {
-  const payload = state.getPayload();
-  if (!payload) return `<div class="empty-state" style="margin:3rem">${t('ui.board.noData', {}, 'No project data.')}</div>`;
+/**
+ * Render the kanban board HTML (columns + cards only).
+ *
+ * @param {Array} tasks     — pre-filtered task list
+ * @param {Array} phases    — array of phase objects ({ id, label, ... })
+ * @param {Object} opts     — { showCompleted, showCancelled, wipLimits }
+ *                            wipLimits is an optional map: { status: number }
+ * @returns {string} HTML string for the board grid
+ */
+export function renderKanban(tasks, phases, opts = {}) {
+  const { showCompleted = true, showCancelled = false, wipLimits = {} } = opts;
+
+  // Filter out completed / cancelled unless opted-in
+  let visibleTasks = tasks;
+  if (!showCompleted) {
+    visibleTasks = visibleTasks.filter(t => t.status !== 'completed');
+  }
+  if (!showCancelled) {
+    visibleTasks = visibleTasks.filter(t => t.status !== 'cancelled');
+  }
 
-  const tasks = _filterTasks(payload.derived.tasks);
-  const hasCancelled = tasks.some(t => t.status === 'cancelled');
+  // Build column set
+  const hasCancelled = showCancelled && visibleTasks.some(t => t.status === 'cancelled');
   const columns = hasCancelled
     ? [...COLUMNS, { id: 'cancelled', label: t('status.cancelled', {}, 'Cancelled') }]
     : COLUMNS.map(col => ({ ...col, label: t(`status.${col.id}`, {}, col.label) }));
 
-  const html = `
-    <div class="view-enter">
-      <div class="section-header">
-        <div class="section-header-left">
-          <p class="eyebrow">${t('ui.board.eyebrow', {}, 'Board')}</p>
-          <h2>${t('ui.board.title', {}, 'Operational board')}</h2>
-        </div>
-        <div style="display:flex;gap:var(--space-2)">
-          <button class="btn btn-ghost btn-sm" id="board-filter-done" type="button">
-            ${icon('check', 14)} ${_showCompleted() ? t('ui.board.hideCompleted', {}, 'Hide completed') : t('ui.board.showCompleted', {}, 'Show completed')}
-          </button>
-          <button class="btn btn-primary btn-sm" id="new-task-btn" type="button" aria-label="${t('ui.board.newTask', {}, 'Create new task')}">
-            ${icon('plus', 14)} ${t('ui.tasks.new', {}, 'New task')}
-          </button>
-        </div>
-      </div>
-
-      <div class="board-grid" id="board" aria-label="${t('ui.board.aria', {}, 'Task board by status')}" role="region">
-        ${columns.map(col => {
-          const colTasks = tasks.filter(t => t.status === col.id);
-          return _renderColumn(col, colTasks);
-        }).join('')}
-      </div>
+  return `
+    <div class="board-grid" id="board" aria-label="${t('ui.board.aria', {}, 'Task board by status')}" role="region">
+      ${columns.map(col => {
+        const colTasks = visibleTasks.filter(t => t.status === col.id);
+        const wipLimit = wipLimits[col.id] ?? null;
+        return _renderColumn(col, colTasks, phases, wipLimit);
+      }).join('')}
     </div>
   `;
-
-  setTimeout(() => _bindEvents(), 0);
-  return html;
 }
 
-function _filterTasks(tasks) {
-  let list = tasks;
-  const query = state.get('searchQuery')?.toLowerCase();
-  if (query) {
-    list = list.filter(t =>
-      t.title.toLowerCase().includes(query) ||
-      t.id.toLowerCase().includes(query) ||
-      (t.summary || '').toLowerCase().includes(query)
-    );
-  }
-  if (!_showCompleted()) {
-    list = list.filter(t => t.status !== 'completed' && t.status !== 'cancelled');
-  }
-  return list;
-}
+/**
+ * Bind kanban-specific events: drag-drop, card click/selection, task actions.
+ * Call this after the board HTML has been inserted into the DOM.
+ */
+export function bindKanbanEvents() {
+  const board = document.getElementById('board');
+  if (!board) return;
+
+  // Click on task card — select and highlight
+  board.addEventListener('click', e => {
+    const card = e.target.closest('.task-card');
+    if (!card) return;
+
+    const id = card.dataset.taskId;
+    state.update('selectedTaskId', id);
+
+    // Highlight the selected card without a full re-render
+    board.querySelectorAll('.task-card').forEach(c => {
+      c.classList.toggle('is-selected', c.dataset.taskId === id);
+      c.setAttribute('aria-selected', c.dataset.taskId === id ? 'true' : 'false');
+    });
+  });
+
+  // Keyboard on cards (Enter = select)
+  board.addEventListener('keydown', e => {
+    const card = e.target.closest('.task-card');
+    if (!card) return;
+    if (e.key === 'Enter') {
+      state.update('selectedTaskId', card.dataset.taskId);
+    }
+  });
 
-function _showCompleted() {
-  return sessionStorage.getItem('board-show-completed') === 'true';
+  // Drag & drop
+  _bindDragDrop(board);
 }
 
-function _renderColumn(col, tasks) {
+/* ------------------------------------------------------------------ */
+/*  Internal helpers                                                   */
+/* ------------------------------------------------------------------ */
+
+function _renderColumn(col, tasks, phases, wipLimit) {
+  const wipExceeded = wipLimit != null && tasks.length > wipLimit;
+  const wipAttr = wipLimit != null ? ` data-wip-limit="${wipLimit}"` : '';
+
   return `
-    <section class="board-column col-${col.id}" data-status="${col.id}" aria-label="${t('ui.board.column', { label: col.label }, `Column ${col.label}`)}">
-      <div class="board-column-header">
+    <section class="board-column col-${col.id}" data-status="${col.id}"${wipAttr} aria-label="${t('ui.board.column', { label: col.label }, `Column ${col.label}`)}">
+      <div class="board-column-header${wipExceeded ? ' wip-exceeded' : ''}">
         <h3 class="board-column-title" id="col-${col.id}">
           <span class="board-column-dot" aria-hidden="true"></span>
           ${esc(col.label)}
         </h3>
-        <span class="board-column-count" aria-label="${t('ui.board.tasksCount', { count: tasks.length }, `${tasks.length} tasks`)}">${tasks.length}</span>
+        <span class="board-column-count" aria-label="${t('ui.board.tasksCount', { count: tasks.length }, `${tasks.length} tasks`)}">${tasks.length}${wipLimit != null ? `/${wipLimit}` : ''}</span>
       </div>
       <div class="board-column-body" aria-labelledby="col-${col.id}" role="list">
-        ${tasks.map(t => _renderCard(t)).join('')}
+        ${tasks.map(task => _renderCard(task, phases)).join('')}
         ${tasks.length === 0
           ? `<div class="empty-state" style="padding:var(--space-5);min-height:80px;border-style:dashed">${t('ui.board.noTasks', {}, 'No tasks')}</div>`
           : ''}
@@ -100,10 +124,9 @@ function _renderColumn(col, tasks) {
   `;
 }
 
-function _renderCard(task) {
+function _renderCard(task, phases) {
   const isSelected = task.id === state.get('selectedTaskId');
   const statusLabels = state.getStatusLabels();
-  const phases = state.getPhases();
   const phaseInfo = phases.find(p => p.id === task.phase);
 
   const priorityVariant = { P0: 'danger', P1: 'warning', P2: 'accent', P3: 'muted' };
@@ -132,59 +155,7 @@ function _renderCard(task) {
   `;
 }
 
-function _bindEvents() {
-  const board = document.getElementById('board');
-  if (!board) return;
-
-  // Clic en task card → seleccionar y navegar a tasks
-  board.addEventListener('click', e => {
-    const card = e.target.closest('.task-card');
-    if (!card) return;
-
-    const id = card.dataset.taskId;
-    state.update('selectedTaskId', id);
-
-    // Navegar al editor si hubo doble clic; si un clic simple, solo marcar
-    if (e.detail === 2) {
-      router.navigate('tasks');
-    } else {
-      // Resaltar la card seleccionada sin re-render completo
-      board.querySelectorAll('.task-card').forEach(c => {
-        c.classList.toggle('is-selected', c.dataset.taskId === id);
-        c.setAttribute('aria-selected', c.dataset.taskId === id ? 'true' : 'false');
-      });
-    }
-  });
-
-  // Teclado en cards (Enter = seleccionar, Space = toggle)
-  board.addEventListener('keydown', e => {
-    const card = e.target.closest('.task-card');
-    if (!card) return;
-    if (e.key === 'Enter') {
-      state.update('selectedTaskId', card.dataset.taskId);
-      router.navigate('tasks');
-    }
-  });
-
-  // Toggle mostrar completadas
-  document.getElementById('board-filter-done')?.addEventListener('click', () => {
-    const current = _showCompleted();
-    sessionStorage.setItem('board-show-completed', current ? 'false' : 'true');
-    router.refresh();
-  });
-
-  // Nueva tarea
-  document.getElementById('new-task-btn')?.addEventListener('click', () => {
-    state.update('selectedTaskId', null);
-    router.navigate('tasks');
-  });
-
-  // Drag & drop
-  _bindDragDrop(board);
-}
-
 function _bindDragDrop(board) {
-  // Dragstart
   board.addEventListener('dragstart', e => {
     const card = e.target.closest('.task-card');
     if (!card) return;
@@ -213,7 +184,6 @@ function _bindDragDrop(board) {
   board.addEventListener('dragleave', e => {
     const col = e.target.closest('.board-column');
     if (!col) return;
-    // Solo eliminar si salimos de la columna, no de un hijo
     if (!col.contains(e.relatedTarget)) {
       col.classList.remove('is-drop-target');
     }