trackops 1.0.0 → 1.1.0

package/ui/js/views/board.js

@@ -0,0 +1,255 @@
+/**
+ * board.js — Tablero Kanban con drag & drop
+ */
+
+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 { 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' },
+];
+
+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>`;
+
+  const tasks = _filterTasks(payload.derived.tasks);
+  const hasCancelled = tasks.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>
+    </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;
+}
+
+function _showCompleted() {
+  return sessionStorage.getItem('board-show-completed') === 'true';
+}
+
+function _renderColumn(col, tasks) {
+  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">
+        <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>
+      </div>
+      <div class="board-column-body" aria-labelledby="col-${col.id}" role="list">
+        ${tasks.map(t => _renderCard(t)).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>`
+          : ''}
+      </div>
+    </section>
+  `;
+}
+
+function _renderCard(task) {
+  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' };
+
+  return `
+    <article
+      class="task-card ${isSelected ? 'is-selected' : ''}"
+      data-task-id="${esc(task.id)}"
+      data-status="${esc(task.status)}"
+      draggable="true"
+      role="listitem"
+      tabindex="0"
+      aria-label="${esc(task.title)}, ${statusLabels[task.status] || task.status}, ${t('ui.board.priority', { priority: task.priority }, `priority ${task.priority}`)}"
+      aria-selected="${isSelected}"
+    >
+      <strong class="task-card-title">${esc(task.title)}</strong>
+      <span class="task-card-id">${esc(task.id)}</span>
+      <p class="task-card-summary">${esc(task.summary || t('ui.board.noDescription', {}, 'No description.'))}</p>
+      <div class="task-card-meta">
+        <span class="badge badge-${priorityVariant[task.priority] || 'muted'}">${esc(task.priority)}</span>
+        <span class="badge badge-muted">${esc(phaseInfo?.label || task.phase)}</span>
+        ${task.stream ? `<span class="badge badge-muted">${esc(task.stream)}</span>` : ''}
+        ${task.blocker ? `<span class="badge badge-danger" title="${esc(task.blocker)}">${icon('alertTriangle', 10)} ${t('status.blocked', {}, 'Blocked')}</span>` : ''}
+      </div>
+    </article>
+  `;
+}
+
+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;
+    _dragTaskId = card.dataset.taskId;
+    card.classList.add('is-dragging');
+    e.dataTransfer.setData('text/plain', _dragTaskId);
+    e.dataTransfer.effectAllowed = 'move';
+  });
+
+  board.addEventListener('dragend', e => {
+    const card = e.target.closest('.task-card');
+    card?.classList.remove('is-dragging');
+    _dragTaskId = null;
+    board.querySelectorAll('.board-column').forEach(col => col.classList.remove('is-drop-target'));
+  });
+
+  board.addEventListener('dragover', e => {
+    e.preventDefault();
+    const col = e.target.closest('.board-column');
+    if (!col) return;
+    e.dataTransfer.dropEffect = 'move';
+    board.querySelectorAll('.board-column').forEach(c => c.classList.remove('is-drop-target'));
+    col.classList.add('is-drop-target');
+  });
+
+  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');
+    }
+  });
+
+  board.addEventListener('drop', async e => {
+    e.preventDefault();
+    const col = e.target.closest('.board-column');
+    if (!col) return;
+    col.classList.remove('is-drop-target');
+
+    const taskId = e.dataTransfer.getData('text/plain') || _dragTaskId;
+    if (!taskId) return;
+
+    const newStatus = col.dataset.status;
+    const task = state.getPayload()?.derived?.tasks?.find(t => t.id === taskId);
+    if (!task || task.status === newStatus) return;
+
+    const statusToAction = {
+      pending:     'pending',
+      in_progress: 'start',
+      in_review:   'review',
+      blocked:     'block',
+      completed:   'complete',
+      cancelled:   'cancel',
+    };
+
+    const action = statusToAction[newStatus];
+    if (!action) return;
+
+    try {
+      await api.taskAction(taskId, action, t('ui.board.movedFromBoard', { status: newStatus }, `Moved to ${newStatus} from the board.`));
+      flash(t('ui.board.movedSuccess', { status: newStatus }, `Task moved to ${newStatus}.`), 'success');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (err) {
+      flash(err.message, 'error');
+    }
+  });
+}

package/ui/js/views/execution.js

@@ -0,0 +1,256 @@
+/**
+ * execution.js — Consola integrada + sesiones de comandos
+ */
+
+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';
+
+export async function render() {
+  const sessions = state.get('sessions');
+  const selected = sessions.find(s => s.id === state.get('selectedSessionId'));
+  const quickCommands = [
+    { label: t('ui.execution.quick.status', {}, 'status'), cmd: 'npx trackops status' },
+    { label: t('ui.execution.quick.sync', {}, 'sync docs'), cmd: 'npx trackops sync' },
+    { label: t('ui.execution.quick.next', {}, 'next tasks'), cmd: 'npx trackops next' },
+    { label: t('ui.execution.quick.repo', {}, 'refresh repo'), cmd: 'npx trackops refresh-repo' },
+    { label: 'git status', cmd: 'git status --short' },
+    { label: 'git log', cmd: 'git log --oneline -10' },
+  ];
+
+  return `
+    <div class="view-enter">
+      <div class="section-header">
+        <div class="section-header-left">
+          <p class="eyebrow">${t('ui.execution.eyebrow', {}, 'Execution')}</p>
+          <h2>${t('ui.execution.title', {}, 'Command Console')}</h2>
+        </div>
+      </div>
+
+      <div style="display:grid;grid-template-columns:300px 1fr;gap:var(--space-4);align-items:start">
+
+        <!-- Panel izquierdo: input + sesiones -->
+        <div style="display:flex;flex-direction:column;gap:var(--space-4)">
+
+          <!-- Command input -->
+          <div class="panel">
+            <div class="panel-header">
+              <p class="panel-title">${t('ui.execution.run', {}, 'Run')}</p>
+            </div>
+            <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+              <div class="field">
+                <label for="cmd-input">${t('ui.execution.command', {}, 'Command')}</label>
+                <textarea id="cmd-input" rows="3"
+                  placeholder="npx trackops status"
+                  aria-label="${t('ui.execution.commandAria', {}, 'Enter the command to run')}"
+                  style="font-family:var(--font-mono);font-size:var(--text-sm)"></textarea>
+              </div>
+              <button class="btn btn-primary" type="button" id="run-cmd-btn" aria-label="${t('ui.execution.runButtonAria', {}, 'Run command')}">
+                ${icon('execution', 15)} ${t('ui.execution.run', {}, 'Run')}
+              </button>
+            </div>
+            <div class="panel-footer">
+              <p class="label-sm" style="margin-bottom:var(--space-2)">${t('ui.execution.quickTitle', {}, 'Quick commands')}</p>
+              <div class="preset-strip">
+                ${quickCommands.map(c => `
+                  <button class="chip" type="button" data-quick="${esc(c.cmd)}"
+                    aria-label="${t('ui.execution.runQuick', { label: c.label }, `Run ${c.label}`)}">
+                    ${esc(c.label)}
+                  </button>
+                `).join('')}
+              </div>
+            </div>
+          </div>
+
+          <!-- Lista de sesiones -->
+          <div class="panel">
+            <div class="panel-header">
+              <p class="panel-title">${t('ui.execution.sessions', {}, 'Sessions')}</p>
+              <span class="badge badge-muted">${sessions.length}</span>
+            </div>
+            <div class="panel-body" style="max-height:360px;overflow-y:auto">
+              ${sessions.length === 0
+                ? `<div class="empty-state">${t('ui.execution.noSessions', {}, 'No active sessions.')}</div>`
+                : `<div class="stack stack-sm">
+                    ${sessions.slice().reverse().map(s => `
+                      <div class="session-pill ${s.id === state.get('selectedSessionId') ? 'is-selected' : ''}"
+                        data-session-id="${esc(s.id)}"
+                        role="button" tabindex="0"
+                        aria-selected="${s.id === state.get('selectedSessionId')}"
+                        aria-label="${esc(s.command)}, ${esc(s.status)}">
+                        <span class="session-pill-cmd">${esc(s.command)}</span>
+                        <span class="badge session-pill-status ${_sessionBadgeClass(s.status)}">${esc(s.status)}</span>
+                      </div>
+                    `).join('')}
+                  </div>`
+              }
+            </div>
+          </div>
+
+        </div>
+
+        <!-- Terminal output -->
+        <div class="terminal-surface" style="min-height:600px;display:flex;flex-direction:column">
+          <div class="terminal-header">
+            <div class="terminal-dots" aria-hidden="true">
+              <span></span><span></span><span></span>
+            </div>
+            <p class="terminal-title">${selected ? esc(selected.command) : t('ui.execution.noSessionTitle', {}, 'ops@terminal — no active session')}</p>
+            <div style="display:flex;gap:var(--space-2)">
+              ${selected && selected.status === 'running' ? `
+                <button class="btn btn-ghost btn-sm" id="kill-session-btn" type="button" aria-label="${t('ui.execution.stopAria', {}, 'Stop process')}">
+                  ${icon('stop', 13)} ${t('ui.execution.stop', {}, 'Stop')}
+                </button>
+              ` : ''}
+            </div>
+          </div>
+          <pre class="terminal-output" id="terminal-output" aria-label="${t('ui.execution.output', {}, 'Command output')}" aria-live="polite">${selected ? esc(selected.output) : `${t('ui.execution.outputPlaceholder', {}, '# Run a command to see its output here…')}\n`}</pre>
+          ${selected ? `<div class="panel-footer" style="display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:var(--text-xs)">
+            <span class="text-muted">${t('ui.execution.started', {}, 'Started')}: ${formatDate(selected.startedAt)}</span>
+            <span class="badge ${_sessionBadgeClass(selected.status)}">${esc(selected.status)}${selected.exitCode != null ? ` (${selected.exitCode})` : ''}</span>
+          </div>` : ''}
+        </div>
+
+      </div>
+    </div>
+  `;
+}
+
+function _sessionBadgeClass(status) {
+  const map = {
+    running:   'badge-info',
+    completed: 'badge-success',
+    failed:    'badge-danger',
+    terminated:'badge-warning',
+  };
+  return map[status] || 'badge-muted';
+}
+
+export function bindEvents() {
+  // Run command button
+  document.getElementById('run-cmd-btn')?.addEventListener('click', _runCommand);
+
+  // Ctrl+Enter en el textarea
+  document.getElementById('cmd-input')?.addEventListener('keydown', e => {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      _runCommand();
+    }
+  });
+
+  // Quick commands
+  document.querySelectorAll('[data-quick]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const input = document.getElementById('cmd-input');
+      if (input) {
+        input.value = btn.dataset.quick;
+        input.focus();
+      }
+    });
+  });
+
+  // Seleccionar sesión
+  document.querySelectorAll('[data-session-id]').forEach(pill => {
+    pill.addEventListener('click', () => {
+      const id = pill.dataset.sessionId;
+      state.update('selectedSessionId', id);
+      import('../router.js').then(r => r.refresh());
+    });
+    pill.addEventListener('keydown', e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        pill.click();
+      }
+    });
+  });
+}
+
+async function _runCommand() {
+  const input = document.getElementById('cmd-input');
+  const cmd   = input?.value.trim();
+  if (!cmd) return;
+
+  const btn = document.getElementById('run-cmd-btn');
+  if (btn) { btn.disabled = true; btn.innerHTML = `${icon('spinner', 15)} ${t('ui.execution.running', {}, 'Running…')}`; }
+
+  try {
+    const result = await api.runCommand(cmd);
+    const sessionId = result.session?.id || result.sessionId;
+
+    // Añadir sesión al estado
+    const sessions = state.get('sessions');
+    const newSession = {
+      id:        sessionId,
+      command:   cmd,
+      status:    'running',
+      exitCode:  null,
+      output:    '',
+      startedAt: new Date().toISOString(),
+    };
+    sessions.push(newSession);
+    state.update('sessions', sessions);
+    state.update('selectedSessionId', sessionId);
+
+    // Refresh UI
+    import('../router.js').then(r => r.refresh()).then(() => {
+      _subscribeToStream(sessionId, cmd);
+    });
+
+    if (input) input.value = '';
+  } catch (err) {
+    flash(err.message, 'error');
+  } finally {
+    if (btn) { btn.disabled = false; btn.innerHTML = `${icon('execution', 15)} ${t('ui.execution.run', {}, 'Run')}`; }
+  }
+}
+
+function _subscribeToStream(sessionId, _cmd) {
+  const es = api.streamSession(sessionId);
+  const terminal = document.getElementById('terminal-output');
+
+  es.addEventListener('message', e => {
+    try {
+      const data = JSON.parse(e.data);
+      const sessions = state.get('sessions');
+      const session  = sessions.find(s => s.id === sessionId);
+
+      if (data.type === 'stdout' || data.type === 'stderr') {
+        if (session) session.output += data.chunk;
+        if (terminal && state.get('selectedSessionId') === sessionId) {
+          terminal.textContent = session?.output || '';
+          terminal.scrollTop = terminal.scrollHeight;
+        }
+      } else if (data.type === 'done') {
+        if (session) {
+          session.status   = data.status;
+          session.exitCode = data.exitCode;
+          session.output   = data.output;
+        }
+        state.update('sessions', sessions);
+        if (state.get('selectedSessionId') === sessionId) {
+          import('../router.js').then(r => r.refresh());
+        }
+        es.close();
+        window.dispatchEvent(new CustomEvent('ops:refresh'));
+      }
+    } catch (err) {
+      console.error('[execution] Error parseando evento SSE:', err);
+    }
+  });
+
+  es.onerror = () => {
+    const sessions = state.get('sessions');
+    const session  = sessions.find(s => s.id === sessionId);
+    if (session && session.status === 'running') {
+      session.status = 'failed';
+      state.update('sessions', sessions);
+    }
+    es.close();
+  };
+}
+
+// Vinculación de eventos se llama desde la vista
+export { bindEvents as bind };

package/ui/js/views/flash.js

@@ -0,0 +1,47 @@
+/**
+ * flash.js — Sistema de toasts / notificaciones
+ */
+
+const DURATION = 3500;
+
+/**
+ * Muestra una notificación tipo toast
+ * @param {string} message
+ * @param {'success'|'error'|'warning'|'info'} [type='info']
+ * @param {number} [duration] ms antes de desaparecer (0 = permanente)
+ */
+export function flash(message, type = 'info', duration = DURATION) {
+  const container = document.getElementById('flash-container');
+  if (!container) return;
+
+  const icons = {
+    success: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
+    error:   '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><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>',
+    warning: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+    info:    '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+  };
+
+  const colorMap = {
+    success: 'var(--success)',
+    error:   'var(--danger)',
+    warning: 'var(--warning)',
+    info:    'var(--accent)',
+  };
+
+  const toastEl = document.createElement('div');
+  toastEl.className = `flash flash-${type}`;
+  toastEl.setAttribute('role', 'alert');
+  toastEl.innerHTML = `
+    <span style="color:${colorMap[type] || 'var(--accent)'}; flex-shrink:0">${icons[type] || icons.info}</span>
+    <span>${message}</span>
+  `;
+
+  container.appendChild(toastEl);
+
+  if (duration > 0) {
+    setTimeout(() => {
+      toastEl.classList.add('flash-exit');
+      setTimeout(() => toastEl.remove(), 300);
+    }, duration);
+  }
+}