trackops 2.0.4 → 2.0.5

package/ui/js/views/timeline.js

@@ -1,265 +1,265 @@
-/**
- * timeline.js — Vista de línea temporal con milestones y tareas
- * Muestra barras horizontales por tarea y diamantes para milestones.
- */
-
-import { icon } from '../icons.js';
-import * as state from '../state.js';
-import { esc, formatDate } from '../utils.js';
-import { t } from '../i18n.js';
-
-/** Constantes de layout */
-const ROW_HEIGHT = 32;
-const ROW_GAP = 6;
-const LABEL_WIDTH = 200;
-const DAY_WIDTH = 28;
-const HEADER_HEIGHT = 40;
-const MILESTONE_SIZE = 14;
-
-export async function render() {
-  const payload = state.getPayload();
-  if (!payload) {
-    return `<div class="empty-state" style="margin:3rem auto;max-width:440px">
-      ${icon('alertCircle', 32)}
-      <p>${t('ui.timeline.noData', {}, 'No project data available.')}</p>
-    </div>`;
-  }
-
-  const { control, derived } = payload;
-  const tasks = (control.tasks || []).filter(t => t.status !== 'cancelled');
-  const milestones = control.milestones || [];
-
-  if (tasks.length === 0 && milestones.length === 0) {
-    return `<div class="empty-state" style="margin:3rem auto;max-width:440px">
-      ${icon('timeline', 32)}
-      <h3>${t('ui.timeline.empty', {}, 'No timeline data')}</h3>
-      <p style="font-size:var(--text-sm);color:var(--text-secondary)">${t('ui.timeline.emptyDesc', {}, 'Create tasks and milestones to see the timeline.')}</p>
-    </div>`;
-  }
-
-  // Calcular rango de fechas
-  const { startDate, endDate, days } = _computeDateRange(tasks, milestones);
-  const totalWidth = LABEL_WIDTH + days.length * DAY_WIDTH;
-  const totalHeight = HEADER_HEIGHT + (tasks.length + milestones.length) * (ROW_HEIGHT + ROW_GAP) + 40;
-
-  return `
-    <div class="view-enter">
-      <div class="section-header">
-        <div class="section-header-left">
-          <p class="eyebrow">${t('ui.timeline.eyebrow', {}, 'Timeline')}</p>
-          <h2>${t('ui.timeline.title', {}, 'Project timeline')}</h2>
-        </div>
-        <div class="section-header-right">
-          <span class="badge badge-muted">${tasks.length} ${t('ui.timeline.tasks', {}, 'tasks')}</span>
-          <span class="badge badge-accent">${milestones.length} ${t('ui.timeline.milestones', {}, 'milestones')}</span>
-        </div>
-      </div>
-
-      <div class="timeline-container" role="img" aria-label="${t('ui.timeline.ariaLabel', {}, 'Project timeline chart')}">
-        <div class="timeline-scroll" style="overflow-x:auto;overflow-y:visible">
-          <svg width="${totalWidth}" height="${totalHeight}" viewBox="0 0 ${totalWidth} ${totalHeight}" class="timeline-svg">
-            <defs>
-              <style>
-                .tl-grid { stroke: var(--border); stroke-width: 0.5; }
-                .tl-today { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 2; }
-                .tl-label { fill: var(--text-secondary); font-family: var(--font-ui); font-size: 11px; }
-                .tl-date { fill: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
-                .tl-bar { rx: 4; ry: 4; cursor: pointer; transition: opacity 0.15s; }
-                .tl-bar:hover { opacity: 0.85; }
-                .tl-milestone { fill: var(--accent); }
-                .tl-milestone-label { fill: var(--accent); font-family: var(--font-heading); font-size: 11px; font-weight: 700; }
-              </style>
-            </defs>
-
-            <!-- Date header -->
-            ${_renderDateHeader(days, startDate)}
-
-            <!-- Grid lines -->
-            ${_renderGrid(days, totalHeight)}
-
-            <!-- Today marker -->
-            ${_renderTodayLine(days, startDate, totalHeight)}
-
-            <!-- Task bars -->
-            ${_renderTaskBars(tasks, days, startDate)}
-
-            <!-- Milestones -->
-            ${_renderMilestones(milestones, tasks.length, days, startDate)}
-          </svg>
-        </div>
-      </div>
-
-      <!-- Legend -->
-      <div class="timeline-legend" style="margin-top:var(--space-4);display:flex;gap:var(--space-5);flex-wrap:wrap">
-        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--success)"></span> ${t('status.completed', {}, 'Completed')}</div>
-        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--accent)"></span> ${t('status.in_progress', {}, 'In progress')}</div>
-        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--warning)"></span> ${t('status.pending', {}, 'Pending')}</div>
-        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--danger)"></span> ${t('status.blocked', {}, 'Blocked')}</div>
-        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--info)"></span> ${t('status.in_review', {}, 'In review')}</div>
-        <div class="donut-legend-item">
-          <svg width="12" height="12"><polygon points="6,0 12,6 6,12 0,6" fill="var(--accent)"/></svg>
-          ${t('ui.timeline.milestone', {}, 'Milestone')}
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-// ─────────────────────────────── DATE COMPUTATION ────────────────────────────
-
-function _computeDateRange(tasks, milestones) {
-  const today = new Date();
-  let min = new Date(today);
-  let max = new Date(today);
-
-  // From task history
-  tasks.forEach(task => {
-    (task.history || []).forEach(h => {
-      const d = new Date(h.at);
-      if (d < min) min = new Date(d);
-      if (d > max) max = new Date(d);
-    });
-  });
-
-  // From milestones
-  milestones.forEach(m => {
-    if (m.date) {
-      const d = new Date(m.date);
-      if (d < min) min = new Date(d);
-      if (d > max) max = new Date(d);
-    }
-  });
-
-  // Padding: 3 days before, 7 days after
-  min.setDate(min.getDate() - 3);
-  max.setDate(max.getDate() + 7);
-
-  const days = [];
-  for (let d = new Date(min); d <= max; d.setDate(d.getDate() + 1)) {
-    days.push(new Date(d));
-  }
-
-  return { startDate: min, endDate: max, days };
-}
-
-function _dayIndex(days, dateStr) {
-  const target = dateStr.slice(0, 10);
-  return days.findIndex(d => d.toISOString().slice(0, 10) === target);
-}
-
-// ─────────────────────────────── SVG RENDERS ─────────────────────────────────
-
-function _renderDateHeader(days, startDate) {
-  const labels = [];
-  let lastMonth = '';
-
-  days.forEach((d, i) => {
-    const x = LABEL_WIDTH + i * DAY_WIDTH;
-    const dayNum = d.getDate();
-    const month = d.toLocaleString('default', { month: 'short' });
-
-    // Show day number for 1st, 5th, 10th, 15th, 20th, 25th
-    if (dayNum === 1 || dayNum === 5 || dayNum === 10 || dayNum === 15 || dayNum === 20 || dayNum === 25) {
-      labels.push(`<text x="${x + DAY_WIDTH / 2}" y="14" text-anchor="middle" class="tl-date">${dayNum}</text>`);
-    }
-
-    // Month label on 1st
-    if (month !== lastMonth) {
-      labels.push(`<text x="${x + 2}" y="30" class="tl-date" font-weight="700">${month}</text>`);
-      lastMonth = month;
-    }
-  });
-
-  return labels.join('\n');
-}
-
-function _renderGrid(days, totalHeight) {
-  return days.map((d, i) => {
-    const x = LABEL_WIDTH + i * DAY_WIDTH;
-    const isWeekend = d.getDay() === 0 || d.getDay() === 6;
-    const opacity = isWeekend ? 0.06 : 0;
-    return `
-      ${opacity > 0 ? `<rect x="${x}" y="${HEADER_HEIGHT}" width="${DAY_WIDTH}" height="${totalHeight - HEADER_HEIGHT}" fill="var(--text-muted)" opacity="${opacity}"/>` : ''}
-      ${d.getDay() === 1 ? `<line x1="${x}" y1="${HEADER_HEIGHT}" x2="${x}" y2="${totalHeight}" class="tl-grid"/>` : ''}
-    `;
-  }).join('');
-}
-
-function _renderTodayLine(days, startDate, totalHeight) {
-  const todayStr = new Date().toISOString().slice(0, 10);
-  const idx = _dayIndex(days, todayStr);
-  if (idx < 0) return '';
-  const x = LABEL_WIDTH + idx * DAY_WIDTH + DAY_WIDTH / 2;
-  return `<line x1="${x}" y1="${HEADER_HEIGHT}" x2="${x}" y2="${totalHeight}" class="tl-today"/>`;
-}
-
-function _renderTaskBars(tasks, days, startDate) {
-  const statusColor = {
-    completed: 'var(--success)',
-    in_progress: 'var(--accent)',
-    in_review: 'var(--info)',
-    blocked: 'var(--danger)',
-    pending: 'var(--warning)',
-    cancelled: 'var(--text-muted)',
-  };
-
-  return tasks.map((task, i) => {
-    const y = HEADER_HEIGHT + i * (ROW_HEIGHT + ROW_GAP);
-    const color = statusColor[task.status] || 'var(--text-muted)';
-
-    // Find start and end dates from history
-    const history = task.history || [];
-    const createEntry = history.find(h => h.action === 'create') || history[0];
-    const completeEntry = history.find(h => h.action === 'complete');
-    const startEntry = history.find(h => h.action === 'start') || createEntry;
-
-    if (!startEntry) {
-      // No history, just show label
-      return `<text x="8" y="${y + ROW_HEIGHT / 2 + 4}" class="tl-label">${_truncate(task.title, 24)}</text>`;
-    }
-
-    const startIdx = Math.max(0, _dayIndex(days, startEntry.at));
-    const endIdx = completeEntry
-      ? Math.max(startIdx + 1, _dayIndex(days, completeEntry.at) + 1)
-      : Math.max(startIdx + 1, _dayIndex(days, new Date().toISOString()));
-
-    const barX = LABEL_WIDTH + startIdx * DAY_WIDTH;
-    const barW = Math.max(DAY_WIDTH, (endIdx - startIdx) * DAY_WIDTH);
-
-    return `
-      <g>
-        <text x="8" y="${y + ROW_HEIGHT / 2 + 4}" class="tl-label">${_truncate(task.title, 24)}</text>
-        <rect x="${barX}" y="${y + 4}" width="${barW}" height="${ROW_HEIGHT - 8}" fill="${color}" class="tl-bar" opacity="0.7">
-          <title>${esc(task.title)} (${task.status})</title>
-        </rect>
-      </g>
-    `;
-  }).join('');
-}
-
-function _renderMilestones(milestones, taskCount, days, startDate) {
-  return milestones.map((m, i) => {
-    if (!m.date) return '';
-    const idx = _dayIndex(days, m.date);
-    if (idx < 0) return '';
-
-    const y = HEADER_HEIGHT + (taskCount + i) * (ROW_HEIGHT + ROW_GAP) + ROW_HEIGHT / 2;
-    const x = LABEL_WIDTH + idx * DAY_WIDTH + DAY_WIDTH / 2;
-    const half = MILESTONE_SIZE / 2;
-
-    return `
-      <g>
-        <text x="8" y="${y + 4}" class="tl-milestone-label">${_truncate(m.title, 24)}</text>
-        <polygon points="${x},${y - half} ${x + half},${y} ${x},${y + half} ${x - half},${y}" class="tl-milestone">
-          <title>${esc(m.title)} — ${formatDate(m.date, 'date')}</title>
-        </polygon>
-      </g>
-    `;
-  }).join('');
-}
-
-function _truncate(str, max) {
-  if (!str) return '';
-  const s = String(str);
-  return s.length > max ? esc(s.slice(0, max - 1)) + '…' : esc(s);
-}
+/**
+ * timeline.js — Vista de línea temporal con milestones y tareas
+ * Muestra barras horizontales por tarea y diamantes para milestones.
+ */
+
+import { icon } from '../icons.js';
+import * as state from '../state.js';
+import { esc, formatDate } from '../utils.js';
+import { t } from '../i18n.js';
+
+/** Constantes de layout */
+const ROW_HEIGHT = 32;
+const ROW_GAP = 6;
+const LABEL_WIDTH = 200;
+const DAY_WIDTH = 28;
+const HEADER_HEIGHT = 40;
+const MILESTONE_SIZE = 14;
+
+export async function render() {
+  const payload = state.getPayload();
+  if (!payload) {
+    return `<div class="empty-state" style="margin:3rem auto;max-width:440px">
+      ${icon('alertCircle', 32)}
+      <p>${t('ui.timeline.noData', {}, 'No project data available.')}</p>
+    </div>`;
+  }
+
+  const { control, derived } = payload;
+  const tasks = (control.tasks || []).filter(t => t.status !== 'cancelled');
+  const milestones = control.milestones || [];
+
+  if (tasks.length === 0 && milestones.length === 0) {
+    return `<div class="empty-state" style="margin:3rem auto;max-width:440px">
+      ${icon('timeline', 32)}
+      <h3>${t('ui.timeline.empty', {}, 'No timeline data')}</h3>
+      <p style="font-size:var(--text-sm);color:var(--text-secondary)">${t('ui.timeline.emptyDesc', {}, 'Create tasks and milestones to see the timeline.')}</p>
+    </div>`;
+  }
+
+  // Calcular rango de fechas
+  const { startDate, endDate, days } = _computeDateRange(tasks, milestones);
+  const totalWidth = LABEL_WIDTH + days.length * DAY_WIDTH;
+  const totalHeight = HEADER_HEIGHT + (tasks.length + milestones.length) * (ROW_HEIGHT + ROW_GAP) + 40;
+
+  return `
+    <div class="view-enter">
+      <div class="section-header">
+        <div class="section-header-left">
+          <p class="eyebrow">${t('ui.timeline.eyebrow', {}, 'Timeline')}</p>
+          <h2>${t('ui.timeline.title', {}, 'Project timeline')}</h2>
+        </div>
+        <div class="section-header-right">
+          <span class="badge badge-muted">${tasks.length} ${t('ui.timeline.tasks', {}, 'tasks')}</span>
+          <span class="badge badge-accent">${milestones.length} ${t('ui.timeline.milestones', {}, 'milestones')}</span>
+        </div>
+      </div>
+
+      <div class="timeline-container" role="img" aria-label="${t('ui.timeline.ariaLabel', {}, 'Project timeline chart')}">
+        <div class="timeline-scroll" style="overflow-x:auto;overflow-y:visible">
+          <svg width="${totalWidth}" height="${totalHeight}" viewBox="0 0 ${totalWidth} ${totalHeight}" class="timeline-svg">
+            <defs>
+              <style>
+                .tl-grid { stroke: var(--border); stroke-width: 0.5; }
+                .tl-today { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 2; }
+                .tl-label { fill: var(--text-secondary); font-family: var(--font-ui); font-size: 11px; }
+                .tl-date { fill: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
+                .tl-bar { rx: 4; ry: 4; cursor: pointer; transition: opacity 0.15s; }
+                .tl-bar:hover { opacity: 0.85; }
+                .tl-milestone { fill: var(--accent); }
+                .tl-milestone-label { fill: var(--accent); font-family: var(--font-heading); font-size: 11px; font-weight: 700; }
+              </style>
+            </defs>
+
+            <!-- Date header -->
+            ${_renderDateHeader(days, startDate)}
+
+            <!-- Grid lines -->
+            ${_renderGrid(days, totalHeight)}
+
+            <!-- Today marker -->
+            ${_renderTodayLine(days, startDate, totalHeight)}
+
+            <!-- Task bars -->
+            ${_renderTaskBars(tasks, days, startDate)}
+
+            <!-- Milestones -->
+            ${_renderMilestones(milestones, tasks.length, days, startDate)}
+          </svg>
+        </div>
+      </div>
+
+      <!-- Legend -->
+      <div class="timeline-legend" style="margin-top:var(--space-4);display:flex;gap:var(--space-5);flex-wrap:wrap">
+        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--success)"></span> ${t('status.completed', {}, 'Completed')}</div>
+        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--accent)"></span> ${t('status.in_progress', {}, 'In progress')}</div>
+        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--warning)"></span> ${t('status.pending', {}, 'Pending')}</div>
+        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--danger)"></span> ${t('status.blocked', {}, 'Blocked')}</div>
+        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--info)"></span> ${t('status.in_review', {}, 'In review')}</div>
+        <div class="donut-legend-item">
+          <svg width="12" height="12"><polygon points="6,0 12,6 6,12 0,6" fill="var(--accent)"/></svg>
+          ${t('ui.timeline.milestone', {}, 'Milestone')}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// ─────────────────────────────── DATE COMPUTATION ────────────────────────────
+
+function _computeDateRange(tasks, milestones) {
+  const today = new Date();
+  let min = new Date(today);
+  let max = new Date(today);
+
+  // From task history
+  tasks.forEach(task => {
+    (task.history || []).forEach(h => {
+      const d = new Date(h.at);
+      if (d < min) min = new Date(d);
+      if (d > max) max = new Date(d);
+    });
+  });
+
+  // From milestones
+  milestones.forEach(m => {
+    if (m.date) {
+      const d = new Date(m.date);
+      if (d < min) min = new Date(d);
+      if (d > max) max = new Date(d);
+    }
+  });
+
+  // Padding: 3 days before, 7 days after
+  min.setDate(min.getDate() - 3);
+  max.setDate(max.getDate() + 7);
+
+  const days = [];
+  for (let d = new Date(min); d <= max; d.setDate(d.getDate() + 1)) {
+    days.push(new Date(d));
+  }
+
+  return { startDate: min, endDate: max, days };
+}
+
+function _dayIndex(days, dateStr) {
+  const target = dateStr.slice(0, 10);
+  return days.findIndex(d => d.toISOString().slice(0, 10) === target);
+}
+
+// ─────────────────────────────── SVG RENDERS ─────────────────────────────────
+
+function _renderDateHeader(days, startDate) {
+  const labels = [];
+  let lastMonth = '';
+
+  days.forEach((d, i) => {
+    const x = LABEL_WIDTH + i * DAY_WIDTH;
+    const dayNum = d.getDate();
+    const month = d.toLocaleString('default', { month: 'short' });
+
+    // Show day number for 1st, 5th, 10th, 15th, 20th, 25th
+    if (dayNum === 1 || dayNum === 5 || dayNum === 10 || dayNum === 15 || dayNum === 20 || dayNum === 25) {
+      labels.push(`<text x="${x + DAY_WIDTH / 2}" y="14" text-anchor="middle" class="tl-date">${dayNum}</text>`);
+    }
+
+    // Month label on 1st
+    if (month !== lastMonth) {
+      labels.push(`<text x="${x + 2}" y="30" class="tl-date" font-weight="700">${month}</text>`);
+      lastMonth = month;
+    }
+  });
+
+  return labels.join('\n');
+}
+
+function _renderGrid(days, totalHeight) {
+  return days.map((d, i) => {
+    const x = LABEL_WIDTH + i * DAY_WIDTH;
+    const isWeekend = d.getDay() === 0 || d.getDay() === 6;
+    const opacity = isWeekend ? 0.06 : 0;
+    return `
+      ${opacity > 0 ? `<rect x="${x}" y="${HEADER_HEIGHT}" width="${DAY_WIDTH}" height="${totalHeight - HEADER_HEIGHT}" fill="var(--text-muted)" opacity="${opacity}"/>` : ''}
+      ${d.getDay() === 1 ? `<line x1="${x}" y1="${HEADER_HEIGHT}" x2="${x}" y2="${totalHeight}" class="tl-grid"/>` : ''}
+    `;
+  }).join('');
+}
+
+function _renderTodayLine(days, startDate, totalHeight) {
+  const todayStr = new Date().toISOString().slice(0, 10);
+  const idx = _dayIndex(days, todayStr);
+  if (idx < 0) return '';
+  const x = LABEL_WIDTH + idx * DAY_WIDTH + DAY_WIDTH / 2;
+  return `<line x1="${x}" y1="${HEADER_HEIGHT}" x2="${x}" y2="${totalHeight}" class="tl-today"/>`;
+}
+
+function _renderTaskBars(tasks, days, startDate) {
+  const statusColor = {
+    completed: 'var(--success)',
+    in_progress: 'var(--accent)',
+    in_review: 'var(--info)',
+    blocked: 'var(--danger)',
+    pending: 'var(--warning)',
+    cancelled: 'var(--text-muted)',
+  };
+
+  return tasks.map((task, i) => {
+    const y = HEADER_HEIGHT + i * (ROW_HEIGHT + ROW_GAP);
+    const color = statusColor[task.status] || 'var(--text-muted)';
+
+    // Find start and end dates from history
+    const history = task.history || [];
+    const createEntry = history.find(h => h.action === 'create') || history[0];
+    const completeEntry = history.find(h => h.action === 'complete');
+    const startEntry = history.find(h => h.action === 'start') || createEntry;
+
+    if (!startEntry) {
+      // No history, just show label
+      return `<text x="8" y="${y + ROW_HEIGHT / 2 + 4}" class="tl-label">${_truncate(task.title, 24)}</text>`;
+    }
+
+    const startIdx = Math.max(0, _dayIndex(days, startEntry.at));
+    const endIdx = completeEntry
+      ? Math.max(startIdx + 1, _dayIndex(days, completeEntry.at) + 1)
+      : Math.max(startIdx + 1, _dayIndex(days, new Date().toISOString()));
+
+    const barX = LABEL_WIDTH + startIdx * DAY_WIDTH;
+    const barW = Math.max(DAY_WIDTH, (endIdx - startIdx) * DAY_WIDTH);
+
+    return `
+      <g>
+        <text x="8" y="${y + ROW_HEIGHT / 2 + 4}" class="tl-label">${_truncate(task.title, 24)}</text>
+        <rect x="${barX}" y="${y + 4}" width="${barW}" height="${ROW_HEIGHT - 8}" fill="${color}" class="tl-bar" opacity="0.7">
+          <title>${esc(task.title)} (${task.status})</title>
+        </rect>
+      </g>
+    `;
+  }).join('');
+}
+
+function _renderMilestones(milestones, taskCount, days, startDate) {
+  return milestones.map((m, i) => {
+    if (!m.date) return '';
+    const idx = _dayIndex(days, m.date);
+    if (idx < 0) return '';
+
+    const y = HEADER_HEIGHT + (taskCount + i) * (ROW_HEIGHT + ROW_GAP) + ROW_HEIGHT / 2;
+    const x = LABEL_WIDTH + idx * DAY_WIDTH + DAY_WIDTH / 2;
+    const half = MILESTONE_SIZE / 2;
+
+    return `
+      <g>
+        <text x="8" y="${y + 4}" class="tl-milestone-label">${_truncate(m.title, 24)}</text>
+        <polygon points="${x},${y - half} ${x + half},${y} ${x},${y + half} ${x - half},${y}" class="tl-milestone">
+          <title>${esc(m.title)} — ${formatDate(m.date, 'date')}</title>
+        </polygon>
+      </g>
+    `;
+  }).join('');
+}
+
+function _truncate(str, max) {
+  if (!str) return '';
+  const s = String(str);
+  return s.length > max ? esc(s.slice(0, max - 1)) + '…' : esc(s);
+}