trackops 2.0.2 → 2.0.4

package/ui/js/views/dashboard.js

@@ -0,0 +1,870 @@
+/**
+ * dashboard.js — Unified Dashboard view with tabbed Overview + Analytics
+ * Merges overview.js and insights.js into a single tabbed interface.
+ */
+
+import { icon } from '../icons.js';
+import * as state from '../state.js';
+import * as api from '../api.js';
+import { esc, formatDate, formatDurationShort, extractHistory, lastDays } from '../utils.js';
+import { t } from '../i18n.js';
+import { sparkline, lineChart, heatmap } from '../charts.js';
+
+/** Map OPERA phase IDs to standard dev labels */
+const PHASE_LABELS = {
+  O: { es: 'Diseño',   en: 'Design'  },
+  P: { es: 'QA',       en: 'QA'      },
+  E: { es: 'Dev',      en: 'Dev'     },
+  R: { es: 'Polish',   en: 'Polish'  },
+  A: { es: 'Deploy',   en: 'Deploy'  },
+};
+
+function _phaseLabel(phaseId) {
+  const locale = state.get('locale') || 'es';
+  const map = PHASE_LABELS[phaseId];
+  return map ? map[locale] || map.en : phaseId || '—';
+}
+
+// ─── Module state ────────────────────────────────────────────────
+let _activeTab = 'overview';    // 'overview' | 'analytics'
+let _activePeriod = '30d';      // for analytics tab
+let _analytics = null;
+
+// ─── Public API ──────────────────────────────────────────────────
+
+/**
+ * Renders the full Dashboard view with tab pills and the active tab content.
+ * @returns {Promise<string>} HTML string
+ */
+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.dashboard.loadError', {}, 'Could not load project state.')}</p>
+      <button class="btn btn-primary" onclick="window.dispatchEvent(new CustomEvent('ops:refresh'))">${t('ui.dashboard.retry', {}, 'Retry')}</button>
+    </div>`;
+  }
+
+  const content = await _renderTabContent(payload);
+
+  return `
+    <section class="view-section">
+      <div class="section-header" style="display:flex;justify-content:space-between;align-items:center">
+        <h2 class="section-title">${t('ui.dashboard.title', {}, 'Dashboard')}</h2>
+        <div class="tab-pills" role="tablist" aria-label="${t('ui.dashboard.tabs', {}, 'Dashboard tabs')}">
+          <button class="tab-pill${_activeTab === 'overview' ? ' is-active' : ''}" data-tab="overview" role="tab" aria-selected="${_activeTab === 'overview'}" aria-controls="dashboard-content">${t('ui.dashboard.tabOverview', {}, 'Overview')}</button>
+          <button class="tab-pill${_activeTab === 'analytics' ? ' is-active' : ''}" data-tab="analytics" role="tab" aria-selected="${_activeTab === 'analytics'}" aria-controls="dashboard-content">${t('ui.dashboard.tabAnalytics', {}, 'Analytics')}</button>
+        </div>
+      </div>
+      <div id="dashboard-content" role="tabpanel">
+        ${content}
+      </div>
+    </section>
+  `;
+}
+
+/**
+ * Binds tab switching and all view-specific events for the active tab.
+ */
+export function bindEvents() {
+  _bindTabSwitching();
+  _bindActiveTabEvents();
+}
+
+// ─── Tab switching ───────────────────────────────────────────────
+
+function _bindTabSwitching() {
+  document.querySelectorAll('.tab-pills [data-tab]').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const tab = btn.dataset.tab;
+      if (tab === _activeTab) return;
+      _activeTab = tab;
+
+      // Toggle is-active on tab pills
+      document.querySelectorAll('.tab-pills [data-tab]').forEach(b => {
+        b.classList.toggle('is-active', b.dataset.tab === tab);
+        b.setAttribute('aria-selected', String(b.dataset.tab === tab));
+      });
+
+      // Re-render only the content area
+      const contentEl = document.getElementById('dashboard-content');
+      if (contentEl) {
+        const payload = state.getPayload();
+        if (payload) {
+          contentEl.innerHTML = await _renderTabContent(payload);
+          _bindActiveTabEvents();
+        }
+      }
+    });
+  });
+}
+
+function _bindActiveTabEvents() {
+  if (_activeTab === 'overview') {
+    _bindTaskActionEvents();
+  } else {
+    _bindPeriodEvents();
+  }
+}
+
+// ─── Tab content router ──────────────────────────────────────────
+
+async function _renderTabContent(payload) {
+  if (_activeTab === 'analytics') {
+    return _renderAnalyticsTab(payload);
+  }
+  return _renderOverviewTab(payload);
+}
+
+// ═══════════════════════════════════════════════════════════════════
+//  OVERVIEW TAB
+// ═══════════════════════════════════════════════════════════════════
+
+function _renderOverviewTab(payload) {
+  const { derived, control } = payload;
+
+  return `
+    <div class="view-enter">
+      <!-- KPI CARDS -->
+      <div class="grid-4" style="margin-bottom:var(--space-5)" aria-label="${t('ui.overview.metrics', {}, 'Project metrics')}" role="region">
+        ${_renderKPI(t('ui.overview.openWork', {}, 'Open work'),  derived.totals.all - derived.totals.completed - derived.totals.cancelled,
+          t('ui.overview.openWorkSub', { pending: derived.totals.pending, inProgress: derived.totals.inProgress }, `${derived.totals.pending} pending · ${derived.totals.inProgress} active`), 'tasks', 'accent',
+          _kpiSparkline(control.tasks, tsk => tsk.status !== 'completed' && tsk.status !== 'cancelled'))}
+        ${_renderKPI(t('ui.overview.completed', {}, 'Completed'),  derived.totals.completed,
+          t('ui.overview.completedSub', { percent: derived.totals.all ? Math.round(derived.totals.completed/derived.totals.all*100) : 0 }, '0% of total'), 'checkCircle', 'success',
+          _kpiSparkline(control.tasks, tsk => tsk.status === 'completed'))}
+        ${_renderKPI(t('ui.overview.blocked', {}, 'Blocked'), derived.totals.blocked,
+          derived.blockers[0]?.title || t('ui.overview.noBlockers', {}, 'No blockers'), 'shield', 'danger',
+          _kpiSparkline(control.tasks, tsk => tsk.status === 'blocked'))}
+        ${_renderKPI(t('ui.overview.inReview', {}, 'In review'), derived.totals.inReview,
+          derived.reviewTasks[0]?.title || t('ui.overview.noReview', {}, 'No tasks in review'), 'alertCircle', 'warning',
+          _kpiSparkline(control.tasks, tsk => tsk.status === 'in_review'))}
+      </div>
+
+      <!-- MAIN ROW: Charts + Sidebar -->
+      <div style="display:grid;grid-template-columns:1fr 340px;gap:var(--space-5);margin-bottom:var(--space-5)">
+
+        <!-- Charts column -->
+        <div style="display:flex;flex-direction:column;gap:var(--space-4)">
+
+          <!-- Activity Chart -->
+          <div class="glass-card chart-card card-hover-lift stagger-1" aria-label="${t('ui.overview.weeklyActivity', {}, 'Last week activity')}">
+            <div style="display:flex;align-items:center;justify-content:space-between">
+              <div>
+                <p class="chart-title">${t('ui.overview.activityTitle', {}, 'Weekly activity')}</p>
+                <p class="chart-subtitle">${t('ui.overview.activitySubtitle', {}, 'State changes recorded per day')}</p>
+              </div>
+            </div>
+            ${_renderActivityChart(control.tasks)}
+          </div>
+
+          <!-- Phase Chart -->
+          <div class="glass-card chart-card card-hover-lift stagger-2" aria-label="${t('ui.overview.phaseProgress', {}, 'Progress by phase')}">
+            <p class="chart-title">${t('ui.overview.phaseProgress', {}, 'Progress by phase')}</p>
+            ${_renderPhaseChart(derived.phaseStats)}
+          </div>
+
+        </div>
+
+        <!-- Right column: Donut + Next task -->
+        <div style="display:flex;flex-direction:column;gap:var(--space-4)">
+
+          <!-- Donut -->
+          <div class="glass-card chart-card card-hover-lift stagger-3" style="align-items:center" aria-label="${t('ui.overview.globalProgress', {}, 'Global project progress')}">
+            <p class="chart-title" style="width:100%">${t('ui.overview.globalProgress', {}, 'Global progress')}</p>
+            ${_renderDonut(derived.totals)}
+          </div>
+
+          <!-- Next task -->
+          <div class="glass-card chart-card card-hover-lift stagger-4" aria-label="${t('ui.overview.nextTask', {}, 'Next task')}">
+            <p class="chart-title" style="margin-bottom:var(--space-3)">${t('ui.overview.nextMove', {}, 'Next move')}</p>
+            ${derived.nextTask ? _renderNextTask(derived.nextTask) : `<p class="text-muted" style="font-size:var(--text-sm)">${t('ui.overview.noOpenTasks', {}, 'No open tasks')}</p>`}
+          </div>
+
+        </div>
+      </div>
+
+      <!-- (Health grid moved to Analytics tab — no duplication) -->
+    </div>
+  `;
+}
+
+// ─────────────────────────────── KPI CARD ───────────────────────────────────
+
+function _renderKPI(title, value, sub, iconName, variant, sparklineSvg = '') {
+  return `
+    <article class="glass-card kpi-card kpi-${variant}" role="figure" aria-label="${title}: ${value}">
+      <div class="kpi-header">
+        <p class="kpi-title">${esc(title)}</p>
+        <div class="kpi-icon ${variant}">${icon(iconName, 16)}</div>
+      </div>
+      <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-2)">
+        <p class="kpi-value">${esc(String(value))}</p>
+        ${sparklineSvg ? `<div class="kpi-sparkline" aria-hidden="true" style="flex-shrink:0">${sparklineSvg}</div>` : ''}
+      </div>
+      <p class="kpi-sub truncate">${esc(sub)}</p>
+    </article>
+  `;
+}
+
+/**
+ * Builds a 7-day sparkline for a KPI metric.
+ * @param {Array} tasks - all tasks from control
+ * @param {Function} filterFn - predicate applied to history entries
+ * @returns {string} sparkline SVG markup (60x20)
+ */
+function _kpiSparkline(tasks, filterFn) {
+  const history = extractHistory(tasks);
+  const days = lastDays(7);
+  const counts = days.map(day => {
+    return history.filter(e => {
+      if (e.at?.slice(0, 10) !== day) return false;
+      try { return filterFn({ status: e.to || e.status || '' }); } catch { return false; }
+    }).length;
+  });
+  if (counts.every(c => c === 0)) return '';
+  return sparkline(counts, { width: 60, height: 20, strokeWidth: 1.5 });
+}
+
+// ─────────────────────────────── ACTIVITY CHART ─────────────────────────────
+
+function _renderActivityChart(tasks) {
+  const entries  = extractHistory(tasks);
+  const days     = lastDays(10);
+  const counts   = new Map(days.map(d => [d, 0]));
+  entries.forEach(e => {
+    const day = e.at?.slice(0, 10);
+    if (counts.has(day)) counts.set(day, counts.get(day) + 1);
+  });
+  const max = Math.max(...counts.values(), 1);
+
+  const bars = Array.from(counts.entries()).map(([day, count]) => {
+    const pct   = Math.max(8, Math.round((count / max) * 100));
+    const label = day.slice(5); // MM-DD
+    return `
+      <div class="activity-bar-col" title="${count} change${count !== 1 ? 's' : ''} on ${day}">
+        <div class="activity-bar" style="height:${pct}%" aria-label="${count} changes"></div>
+        <span class="activity-bar-label">${esc(label)}</span>
+      </div>
+    `;
+  }).join('');
+
+  return `<div class="activity-chart" aria-label="${t('ui.overview.activityBars', {}, 'Activity bars')}">${bars}</div>`;
+}
+
+// ─────────────────────────────── PHASE CHART ────────────────────────────────
+
+function _renderPhaseChart(phaseStats) {
+  if (!phaseStats?.length) {
+    return `<p class="text-muted" style="font-size:var(--text-sm)">${t('ui.overview.noPhases', {}, 'No phases configured.')}</p>`;
+  }
+
+  return `
+    <div class="phase-chart">
+      ${phaseStats.map(p => {
+        const pct = p.total ? Math.round((p.completed / p.total) * 100) : 0;
+        const cls = pct === 100 ? 'done' : pct > 0 ? 'active' : 'partial';
+        return `
+          <div class="phase-row">
+            <div class="phase-row-header">
+              <span class="phase-name">${esc(p.id)} · ${_phaseLabel(p.id)}</span>
+              <span class="phase-progress">${p.completed}/${p.total} · ${pct}%</span>
+            </div>
+            <div class="phase-track" role="progressbar" aria-valuenow="${pct}" aria-valuemin="0" aria-valuemax="100" aria-label="${p.label}: ${pct}%">
+              <div class="phase-fill ${cls}" style="width:${pct}%"></div>
+            </div>
+          </div>
+        `;
+      }).join('')}
+    </div>
+  `;
+}
+
+// ─────────────────────────────── DONUT ──────────────────────────────────────
+
+function _renderDonut(totals) {
+  const all        = totals.all || 1;
+  const completed  = totals.completed;
+  const inProgress = totals.inProgress;
+  const blocked    = totals.blocked;
+  const pending    = totals.pending;
+  const pct = Math.round((completed / all) * 100);
+
+  const R = 54;
+  const C = 2 * Math.PI * R;
+
+  function arc(val, total = all) {
+    return Math.min(C * (val / total), C);
+  }
+
+  const completedDash  = arc(completed);
+  const inProgressDash = arc(inProgress);
+  const blockedDash    = arc(blocked);
+
+  const o1 = 0;
+  const o2 = -(completedDash);
+  const o3 = -(completedDash + inProgressDash);
+
+  return `
+    <div class="donut-wrapper" style="position:relative;width:160px;height:160px">
+      <svg class="donut-svg" width="160" height="160" viewBox="0 0 160 160" role="img" aria-label="${t('ui.dashboard.progressLabel', { pct }, `Progress: ${pct}%`)}">
+        <defs>
+          <style>
+            .donut-arc { transform-origin: 80px 80px; transform: rotate(-90deg); }
+          </style>
+        </defs>
+        <circle class="donut-track" cx="80" cy="80" r="${R}" />
+        <circle class="donut-arc arc-completed"
+          cx="80" cy="80" r="${R}"
+          stroke-dasharray="${completedDash} ${C}"
+          stroke-dashoffset="${o1}" />
+        <circle class="donut-arc arc-progress"
+          cx="80" cy="80" r="${R}"
+          stroke-dasharray="${inProgressDash} ${C}"
+          stroke-dashoffset="${o2}" />
+        <circle class="donut-arc arc-blocked"
+          cx="80" cy="80" r="${R}"
+          stroke-dasharray="${blockedDash} ${C}"
+          stroke-dashoffset="${o3}" />
+      </svg>
+      <div class="donut-label">
+        <span class="donut-percent">${pct}%</span>
+        <span class="donut-sub">${t('ui.overview.completedLower', {}, 'completed')}</span>
+      </div>
+    </div>
+    <div class="donut-legend">
+      <div class="donut-legend-item">
+        <span class="donut-legend-dot" style="background:var(--success)"></span>
+        ${t('ui.overview.completed', {}, 'Completed')} (${completed})
+      </div>
+      <div class="donut-legend-item">
+        <span class="donut-legend-dot" style="background:var(--accent)"></span>
+        ${t('status.in_progress', {}, 'In progress')} (${inProgress})
+      </div>
+      <div class="donut-legend-item">
+        <span class="donut-legend-dot" style="background:var(--danger)"></span>
+        ${t('status.blocked', {}, 'Blocked')} (${blocked})
+      </div>
+      <div class="donut-legend-item">
+        <span class="donut-legend-dot" style="background:var(--text-muted)"></span>
+        ${t('status.pending', {}, 'Pending')} (${pending})
+      </div>
+    </div>
+  `;
+}
+
+// ─────────────────────────────── NEXT TASK ──────────────────────────────────
+
+function _renderNextTask(task) {
+  const priorityColors = { P0: 'danger', P1: 'warning', P2: 'accent', P3: 'muted' };
+  const statusLabels = state.getStatusLabels();
+  const statusLabel  = statusLabels[task.status] || task.status;
+
+  const actionMap = {
+    pending:      { action: 'start',    label: t('ui.overview.actionStart', {}, 'Start'),    toStatus: 'in_progress', variant: 'primary' },
+    in_progress:  { action: 'review',   label: t('ui.overview.actionReview', {}, 'Review'),  toStatus: 'in_review',   variant: 'accent'  },
+    in_review:    { action: 'complete', label: t('ui.overview.actionComplete', {}, 'Complete'), toStatus: 'completed', variant: 'success' },
+    blocked:      { action: 'start',    label: t('ui.overview.actionUnblock', {}, 'Unblock'), toStatus: 'in_progress', variant: 'warning' },
+  };
+  const taskAction = actionMap[task.status] || null;
+
+  return `
+    <div style="display:flex;flex-direction:column;gap:var(--space-2)">
+      <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
+        <span class="badge badge-${priorityColors[task.priority] || 'muted'}">${esc(task.priority)}</span>
+        <span class="badge badge-muted">${_phaseLabel(task.phase)}</span>
+        <span class="badge status-${task.status}">${esc(statusLabel)}</span>
+      </div>
+      <p style="font-size:var(--text-sm);font-weight:700;color:var(--text-primary)">${esc(task.title)}</p>
+      ${task.summary ? `<p style="font-size:var(--text-xs);color:var(--text-secondary)">${esc(task.summary)}</p>` : ''}
+      <div style="display:flex;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap">
+        ${taskAction ? `<button
+          class="btn btn-${taskAction.variant} btn-sm"
+          type="button"
+          data-task-action="${taskAction.action}"
+          data-task-id="${esc(task.id)}"
+          data-task-to-status="${taskAction.toStatus}"
+          aria-label="${taskAction.label}: ${esc(task.title)}"
+        >
+          ${icon('checkCircle', 14)} ${taskAction.label}
+        </button>` : ''}
+        <button
+          class="btn btn-ghost btn-sm"
+          type="button"
+          data-view="board"
+          aria-label="${t('ui.overview.openBoardFor', { title: task.title }, `Open board to manage ${task.title}`)}"
+        >
+          ${icon('arrowRight', 14)} ${t('ui.overview.viewBoard', {}, 'View in board')}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+// (Health grid removed from Overview — single source in Analytics tab)
+
+// ─────────────────────────────── TASK ACTION EVENTS ─────────────────────────
+
+function _bindTaskActionEvents() {
+  document.querySelectorAll('[data-task-action]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const taskId   = btn.dataset.taskId;
+      const toStatus = btn.dataset.taskToStatus;
+      const action   = btn.dataset.taskAction;
+      window.dispatchEvent(new CustomEvent('ops:task-action', {
+        detail: { taskId, toStatus, action },
+      }));
+    });
+  });
+}
+
+// ═══════════════════════════════════════════════════════════════════
+//  ANALYTICS TAB
+// ═══════════════════════════════════════════════════════════════════
+
+async function _renderAnalyticsTab(payload) {
+  const { derived, control, runtime } = payload;
+  const statusLabels = state.getStatusLabels();
+  const history      = extractHistory(control.tasks).slice(0, 20);
+
+  // Fetch analytics for the current period (non-blocking on failure)
+  const periodValue = _activePeriod.replace('d', '');
+  try {
+    _analytics = await api.getAnalytics(periodValue);
+  } catch (err) {
+    console.warn('[dashboard/analytics] analytics fetch failed:', err);
+    _analytics = null;
+  }
+
+  return `
+    <div class="view-enter">
+
+      <!-- Period selector -->
+      <div style="display:flex;justify-content:flex-end;margin-bottom:var(--space-4)">
+        ${_renderPeriodSelector()}
+      </div>
+
+      <!-- Row 1: Velocity | Burndown -->
+      <div class="grid-2" style="margin-bottom:var(--space-5)">
+
+        <div class="glass-card chart-card stagger-1">
+          <p class="chart-title" style="margin-bottom:var(--space-3)">${t('ui.insights.velocity', {}, 'Velocity')}</p>
+          <div id="dashboard-velocity-chart">
+            ${_renderVelocityChart()}
+          </div>
+        </div>
+
+        <div class="glass-card chart-card stagger-2">
+          <p class="chart-title" style="margin-bottom:var(--space-3)">${t('ui.insights.burndown', {}, 'Burndown')}</p>
+          <div id="dashboard-burndown-chart">
+            ${_renderBurndownChart()}
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Row 2: Activity Heatmap (full width) -->
+      <div style="margin-bottom:var(--space-5)">
+        <div class="glass-card chart-card stagger-3">
+          <p class="chart-title" style="margin-bottom:var(--space-3)">${t('ui.insights.heatmap', {}, 'Activity')}</p>
+          <div id="dashboard-heatmap" style="overflow-x:auto">
+            ${_renderHeatmapChart()}
+          </div>
+        </div>
+      </div>
+
+      <!-- Row 3: Status Distribution | Health Grid -->
+      <div class="grid-2" style="margin-bottom:var(--space-5)">
+
+        <div class="glass-card chart-card stagger-4">
+          <p class="chart-title" style="margin-bottom:var(--space-4)">${t('ui.insights.distribution', {}, 'Distribution by status')}</p>
+          ${_renderDistribution(derived.totals, statusLabels)}
+        </div>
+
+        <div class="glass-card chart-card stagger-1">
+          <div class="section-header" style="margin-bottom:var(--space-3)">
+            <p class="chart-title">${t('ui.insights.health', {}, 'Operational health')}</p>
+          </div>
+          ${_renderAnalyticsHealthGrid(derived, runtime, payload.docsDirty)}
+        </div>
+
+      </div>
+
+      <!-- Row 4: Time Tracking (full width) — Phase progress is in Overview tab only -->
+      <div style="margin-bottom:var(--space-5)">
+        <div class="glass-card chart-card stagger-2">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)">
+            <p class="chart-title">${t('ui.insights.time', {}, 'Time tracking')}</p>
+            <span class="badge badge-accent">${icon('clock', 12)} ${t('ui.insights.today', {}, 'Today')}</span>
+          </div>
+          ${_renderTimeTracking()}
+        </div>
+      </div>
+
+      <!-- Row 5: Activity Timeline | Findings + Decisions -->
+      <div class="grid-2">
+
+        <div class="glass-card chart-card stagger-4">
+          <p class="chart-title" style="margin-bottom:var(--space-4)">${t('ui.insights.recentActivity', {}, 'Recent activity')}</p>
+          ${_renderActivityTimeline(history, statusLabels)}
+        </div>
+
+        <div style="display:flex;flex-direction:column;gap:var(--space-4)">
+
+          <div class="glass-card chart-card stagger-1">
+            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)">
+              <p class="chart-title">${t('ui.insights.findings', {}, 'Findings')}</p>
+              <span class="badge badge-${derived.openFindings?.length ? 'warning' : 'success'}">
+                ${t('ui.insights.openCount', { count: (derived.openFindings || []).length }, `${(derived.openFindings || []).length} open`)}
+              </span>
+            </div>
+            ${_renderFindings(derived.openFindings || [], derived.resolvedFindings || [])}
+          </div>
+
+          ${(control.decisionsPending || []).length > 0 ? `
+            <div class="glass-card chart-card stagger-2">
+              <p class="chart-title" style="margin-bottom:var(--space-4)">${t('ui.insights.pendingDecisions', {}, 'Pending decisions')}</p>
+              ${_renderDecisions(control.decisionsPending)}
+            </div>
+          ` : ''}
+
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// ─── Period selector ─────────────────────────────────────────────
+
+function _renderPeriodSelector() {
+  const periods = [
+    { value: '7d',  label: '7d'  },
+    { value: '30d', label: '30d' },
+    { value: '90d', label: '90d' },
+    { value: 'all', label: t('ui.insights.periodAll', {}, 'All') },
+  ];
+
+  return `
+    <div class="tab-pills" role="group" aria-label="${t('ui.insights.periodLabel', {}, 'Period')}">
+      ${periods.map(p => `
+        <button class="tab-pill${p.value === _activePeriod ? ' is-active' : ''}" data-period="${p.value}">
+          ${p.label}
+        </button>
+      `).join('')}
+    </div>
+  `;
+}
+
+function _bindPeriodEvents() {
+  document.querySelectorAll('[data-period]').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const period = btn.dataset.period;
+      if (period === _activePeriod) return;
+      _activePeriod = period;
+
+      // Update active state on period pills
+      document.querySelectorAll('[data-period]').forEach(b => b.classList.remove('is-active'));
+      btn.classList.add('is-active');
+
+      // Re-fetch analytics and update chart sections
+      const periodValue = _activePeriod.replace('d', '');
+      try {
+        _analytics = await api.getAnalytics(periodValue);
+      } catch (err) {
+        console.warn('[dashboard/analytics] analytics fetch failed:', err);
+        _analytics = null;
+      }
+
+      _updateAnalyticsCharts();
+    });
+  });
+}
+
+// ─── Analytics chart renderers ───────────────────────────────────
+
+function _renderVelocityChart() {
+  const velocity = _analytics?.velocity;
+  if (!Array.isArray(velocity) || velocity.length === 0) {
+    return `<div class="empty-state" style="padding:var(--space-6)">${t('ui.insights.noVelocity', {}, 'No velocity data available.')}</div>`;
+  }
+
+  const data = velocity.map(v => ({
+    label: v.label || v.week || '',
+    value: v.value ?? v.count ?? 0,
+  }));
+
+  return lineChart(data, {
+    width: 480,
+    height: 200,
+    color: 'var(--accent)',
+    fill: true,
+    showDots: true,
+    showGrid: true,
+    animate: true,
+    yLabel: t('ui.insights.velocityYLabel', {}, 'Tasks / week'),
+  });
+}
+
+function _renderBurndownChart() {
+  const burndown = _analytics?.burndown;
+  if (!Array.isArray(burndown) || burndown.length === 0) {
+    return `<div class="empty-state" style="padding:var(--space-6)">${t('ui.insights.noBurndown', {}, 'No burndown data available.')}</div>`;
+  }
+
+  const data = burndown.map(b => ({
+    label: b.label || b.date || '',
+    value: b.value ?? b.remaining ?? 0,
+  }));
+
+  return lineChart(data, {
+    width: 480,
+    height: 200,
+    color: 'var(--warning)',
+    fill: true,
+    showDots: true,
+    showGrid: true,
+    animate: true,
+    yLabel: t('ui.insights.burndownYLabel', {}, 'Remaining'),
+  });
+}
+
+function _renderHeatmapChart() {
+  const heatmapData = _analytics?.heatmap;
+  if (!Array.isArray(heatmapData) || heatmapData.length === 0) {
+    return `<div class="empty-state" style="padding:var(--space-6)">${t('ui.insights.noHeatmap', {}, 'No activity data available.')}</div>`;
+  }
+
+  const weeksMap = { '7d': 4, '30d': 12, '90d': 16, 'all': 26 };
+  const weeks = weeksMap[_activePeriod] || 12;
+
+  return heatmap(heatmapData, { weeks });
+}
+
+/**
+ * Re-render only the analytics chart sections after period change.
+ */
+function _updateAnalyticsCharts() {
+  const velocityEl = document.getElementById('dashboard-velocity-chart');
+  const burndownEl = document.getElementById('dashboard-burndown-chart');
+  const heatmapEl  = document.getElementById('dashboard-heatmap');
+
+  if (velocityEl) velocityEl.innerHTML = _renderVelocityChart();
+  if (burndownEl) burndownEl.innerHTML = _renderBurndownChart();
+  if (heatmapEl)  heatmapEl.innerHTML  = _renderHeatmapChart();
+}
+
+// ─────────────────────────────── HEALTH GRID (Analytics) ────────────────────
+
+function _renderAnalyticsHealthGrid(derived, runtime, docsDirty) {
+  const totals = derived.totals;
+  const completionRate = totals.all ? Math.round((totals.completed / totals.all) * 100) : 0;
+  const blockerRate    = totals.all ? Math.round((totals.blocked   / totals.all) * 100) : 0;
+  const openFindings   = (derived.openFindings || []).length;
+
+  const avgCycle = _analytics?.avgCycleTime;
+
+  const items = [
+    { label: t('ui.insights.completionRate', {}, 'Completion rate'), value: `${completionRate}%`, cls: completionRate >= 75 ? 'good' : completionRate >= 40 ? '' : 'bad' },
+    { label: t('ui.insights.blockerRate', {}, 'Blocker pressure'),  value: `${blockerRate}%`,     cls: blockerRate === 0 ? 'good' : blockerRate > 20 ? 'bad' : 'warn' },
+    { label: t('ui.insights.inProgress', {}, 'In progress'),       value: String(totals.inProgress), cls: totals.inProgress > 0 ? 'good' : '' },
+    { label: t('ui.insights.inReview', {}, 'In review'),           value: String(totals.inReview),   cls: '' },
+    { label: t('ui.insights.openFindings', {}, 'Open findings'),   value: String(openFindings),      cls: openFindings === 0 ? 'good' : 'warn' },
+    { label: t('ui.insights.docsDrift', {}, 'Docs drift'),         value: (docsDirty || []).length ? `${(docsDirty).length} files` : 'OK', cls: docsDirty?.length ? 'warn' : 'good' },
+    { label: t('ui.insights.ahead', {}, 'Ahead of remote'),        value: String(runtime?.ahead || 0), cls: runtime?.ahead > 0 ? 'warn' : 'good' },
+    { label: t('ui.insights.behind', {}, 'Behind remote'),         value: String(runtime?.behind || 0), cls: runtime?.behind > 0 ? 'bad' : 'good' },
+  ];
+
+  if (avgCycle != null) {
+    items.push({
+      label: t('ui.insights.avgCycleTime', {}, 'Avg cycle time'),
+      value: typeof avgCycle === 'number' ? `${avgCycle.toFixed(1)}d` : String(avgCycle),
+      cls: '',
+    });
+  }
+
+  return `
+    <div class="health-grid">
+      ${items.map(({ label, value, cls }) => `
+        <div class="health-card">
+          <p class="health-card-label">${esc(label)}</p>
+          <p class="health-card-value ${cls}" title="${esc(value)}">${esc(value)}</p>
+        </div>
+      `).join('')}
+    </div>
+  `;
+}
+
+// ─────────────────────────────── DISTRIBUTION ────────────────────────────────
+
+function _renderDistribution(totals, statusLabels) {
+  const all = totals.all || 1;
+  const rows = [
+    { id: 'completed',   label: statusLabels.completed   || 'Completed',   value: totals.completed,  cls: 'fill-success' },
+    { id: 'in_progress', label: statusLabels.in_progress || 'In progress', value: totals.inProgress, cls: '' },
+    { id: 'in_review',   label: statusLabels.in_review   || 'In review',   value: totals.inReview,   cls: '' },
+    { id: 'pending',     label: statusLabels.pending     || 'Pending',     value: totals.pending,    cls: 'fill-warning' },
+    { id: 'blocked',     label: statusLabels.blocked     || 'Blocked',     value: totals.blocked,    cls: 'fill-danger'  },
+    { id: 'cancelled',   label: statusLabels.cancelled   || 'Cancelled',   value: totals.cancelled,  cls: '' },
+  ].filter(r => r.value > 0);
+
+  return `
+    <div class="bar-chart">
+      ${rows.map(r => {
+        const pct = Math.max(2, Math.round((r.value / all) * 100));
+        return `
+          <div class="bar-row" role="group" aria-label="${r.label}: ${r.value} (${pct}%)">
+            <span class="bar-label truncate">${esc(r.label)}</span>
+            <div class="bar-track" role="progressbar" aria-valuenow="${pct}" aria-valuemin="0" aria-valuemax="100">
+              <div class="bar-fill ${r.cls}" style="width:${pct}%"></div>
+            </div>
+            <span class="bar-value">${r.value}</span>
+          </div>
+        `;
+      }).join('')}
+    </div>
+  `;
+}
+
+// ─────────────────────────────── TIME TRACKING ───────────────────────────────
+
+function _renderTimeTracking() {
+  const entries = state.get('timeEntries');
+
+  if (!entries.length) {
+    return `
+      <div class="empty-state" style="padding:var(--space-6)">
+        ${icon('clock', 24)}
+        <p>${t('ui.insights.noTimeEntries', {}, 'No time entries yet.')}</p>
+        <p class="text-muted" style="font-size:var(--text-xs)">${t('ui.insights.noTimeEntriesHint', {}, 'Use time tracking in Overview to log time per task.')}</p>
+      </div>
+    `;
+  }
+
+  const byTask = new Map();
+  for (const e of entries) {
+    if (!byTask.has(e.taskId)) byTask.set(e.taskId, { taskId: e.taskId, taskTitle: e.taskTitle, total: 0, count: 0 });
+    const rec = byTask.get(e.taskId);
+    rec.total += e.durationMs || 0;
+    rec.count++;
+  }
+
+  const maxMs = Math.max(...[...byTask.values()].map(r => r.total), 1);
+
+  return `
+    <div class="bar-chart">
+      ${[...byTask.values()].slice(0, 10).map(r => {
+        const pct = Math.max(4, Math.round((r.total / maxMs) * 100));
+        return `
+          <div class="bar-row">
+            <span class="bar-label truncate" title="${esc(r.taskTitle)}">${esc(r.taskTitle)}</span>
+            <div class="bar-track">
+              <div class="bar-fill fill-info" style="width:${pct}%"></div>
+            </div>
+            <span class="bar-value">${formatDurationShort(r.total)}</span>
+          </div>
+        `;
+      }).join('')}
+    </div>
+    <p class="text-muted" style="font-size:var(--text-xs);margin-top:var(--space-3)">
+      ${t('ui.insights.totalEntries', { count: entries.length }, `${entries.length} entries total`)}
+    </p>
+  `;
+}
+
+// (Phase progress removed from Analytics — single source in Overview tab)
+
+// ─────────────────────────────── ACTIVITY TIMELINE ───────────────────────────
+
+function _renderActivityTimeline(history, statusLabels) {
+  if (!history.length) {
+    return `<div class="empty-state" style="padding:var(--space-5)">${t('ui.insights.noActivity', {}, 'No recent activity.')}</div>`;
+  }
+
+  const actionIcon = {
+    create:   'plus',
+    start:    'play',
+    review:   'alertCircle',
+    complete: 'checkCircle',
+    block:    'shield',
+    pending:  'clock',
+    cancel:   'x',
+    note:     'fileText',
+    edit:     'edit',
+  };
+
+  const actionColor = {
+    create:   'var(--accent)',
+    start:    'var(--info)',
+    review:   'var(--warning)',
+    complete: 'var(--success)',
+    block:    'var(--danger)',
+    cancel:   'var(--text-muted)',
+    note:     'var(--accent)',
+    edit:     'var(--text-secondary)',
+    pending:  'var(--warning)',
+  };
+
+  return `
+    <div class="stack" style="max-height:420px;overflow-y:auto">
+      ${history.map(h => {
+        const ic  = actionIcon[h.action] || 'info';
+        const col = actionColor[h.action] || 'var(--accent)';
+        return `
+          <div class="activity-item">
+            <div class="activity-icon" style="color:${col}">
+              ${icon(ic, 16)}
+            </div>
+            <div class="activity-content">
+              <p class="activity-action">${esc(h.action)}${h.note ? ` — ${esc(h.note)}` : ''}</p>
+              <p class="activity-task">${esc(h.taskTitle)} (${esc(h.taskId)})</p>
+              <p class="activity-time">${formatDate(h.at)}</p>
+            </div>
+          </div>
+        `;
+      }).join('')}
+    </div>
+  `;
+}
+
+// ─────────────────────────────── FINDINGS ────────────────────────────────────
+
+function _renderFindings(open, resolved) {
+  if (!open.length && !resolved.length) {
+    return `<div class="empty-state" style="padding:var(--space-4)">${icon('checkCircle', 20)} ${t('ui.insights.noFindings', {}, 'No findings.')}</div>`;
+  }
+
+  return `
+    <div class="stack stack-sm">
+      ${open.map(f => `
+        <div class="finding-item severity-${(f.severity || 'medium').toLowerCase()}">
+          <div style="display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-1)">
+            <p style="font-size:var(--text-sm);font-weight:700">${esc(f.title)}</p>
+            <span class="badge badge-warning">${esc(f.severity?.toUpperCase() || 'MEDIUM')}</span>
+          </div>
+          <p style="font-size:var(--text-xs);color:var(--text-secondary)">${esc(f.detail || '')}</p>
+          ${f.impact ? `<p style="font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-1)">${t('ui.insights.impact', {}, 'Impact')}: ${esc(f.impact)}</p>` : ''}
+        </div>
+      `).join('')}
+      ${resolved.length > 0 ? `<p class="label-sm" style="margin-top:var(--space-3)">${t('ui.insights.resolvedCount', { count: resolved.length }, `${resolved.length} resolved`)}</p>` : ''}
+    </div>
+  `;
+}
+
+// ─────────────────────────────── DECISIONS ───────────────────────────────────
+
+function _renderDecisions(decisions) {
+  return `
+    <div class="stack stack-sm">
+      ${decisions.map(d => `
+        <div class="decision-item">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-1)">
+            <p style="font-size:var(--text-sm);font-weight:700">${esc(d.title)}</p>
+            <span class="badge badge-muted">${esc(d.owner)}</span>
+          </div>
+          <p style="font-size:var(--text-xs);color:var(--text-secondary)">${esc(d.impact || '')}</p>
+        </div>
+      `).join('')}
+    </div>
+  `;
+}