trackops 2.0.3 → 2.0.5

package/ui/js/views/projects.js

@@ -0,0 +1,745 @@
+/**
+ * projects.js — Vista de gestion de espacios de trabajo registrados
+ * Cards por proyecto con metricas lazy-loaded, KPIs agregados, charts, tooltips.
+ */
+
+import { icon } from '../icons.js';
+import * as state from '../state.js';
+import * as api from '../api.js';
+import * as router from '../router.js';
+import { esc, formatDate, formatDurationShort } from '../utils.js';
+import { flash } from './flash.js';
+import { t } from '../i18n.js';
+
+/** Cache de metricas por proyecto */
+const _metricsCache = new Map();
+
+/** 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 || '—';
+}
+
+export async function render() {
+  const projects = state.get('projects') || [];
+  const currentId = state.get('currentProjectId');
+  const unavailableCount = projects.filter(p => !p.available).length;
+
+  return `
+    <div class="view-enter">
+      <div class="section-header">
+        <div class="section-header-left">
+          <p class="eyebrow">${t('ui.projects.eyebrow', {}, 'Workspaces')}</p>
+          <h2>${t('ui.projects.title', {}, 'Managed projects')} <span style="font-size:var(--text-sm);font-weight:400;color:var(--text-secondary)">(${projects.length})</span></h2>
+        </div>
+        <div class="section-header-right">
+          ${unavailableCount > 0 ? `
+            <button class="btn btn-ghost btn-sm" style="color:var(--danger)" type="button" id="projects-purge-unavailable" aria-label="Purge unavailable projects">
+              ${icon('trash', 16)} Purge unavailable (${unavailableCount})
+            </button>
+          ` : ''}
+          <button class="btn btn-ghost btn-sm" type="button" id="projects-refresh-all" aria-label="${t('ui.projects.refreshAll', {}, 'Refresh all')}">
+            ${icon('refresh', 16)} ${t('ui.projects.refreshAll', {}, 'Refresh all')}
+          </button>
+          <button class="btn btn-primary btn-sm" type="button" id="projects-register-new" aria-label="${t('ui.projects.register', {}, 'Register project')}">
+            ${icon('plus', 16)} ${t('ui.projects.register', {}, 'Register project')}
+          </button>
+        </div>
+      </div>
+
+      <!-- Portfolio KPIs -->
+      <div class="portfolio-kpis" id="portfolio-kpis">
+        ${_renderPortfolioKPIs()}
+      </div>
+
+      <!-- Attention feed + Charts row -->
+      <div class="portfolio-analytics" id="portfolio-analytics">
+        <div class="glass-card portfolio-chart" id="portfolio-status-donut">
+          <h4 class="chart-title">${t('ui.projects.statusDistribution', {}, 'Status distribution')}</h4>
+          <div class="portfolio-donut-container" id="portfolio-donut-container">
+            <p class="text-muted" style="font-size:var(--text-xs)">${t('ui.projects.loading', {}, 'Loading...')}</p>
+          </div>
+        </div>
+        <div class="glass-card portfolio-chart" id="portfolio-velocity-chart">
+          <h4 class="chart-title">${t('ui.projects.velocity', {}, 'Resolution velocity')}</h4>
+          <div id="portfolio-velocity-container">
+            <p class="text-muted" style="font-size:var(--text-xs)">${t('ui.projects.loading', {}, 'Loading...')}</p>
+          </div>
+        </div>
+        <div class="glass-card portfolio-attention" id="portfolio-attention">
+          <h4 class="chart-title">${t('ui.projects.attention', {}, 'Attention required')}</h4>
+          <div id="portfolio-attention-feed">
+            <p class="text-muted" style="font-size:var(--text-xs)">${t('ui.projects.loading', {}, 'Loading...')}</p>
+          </div>
+        </div>
+      </div>
+
+      ${projects.length === 0
+        ? `<div class="empty-state" style="margin:3rem auto;max-width:440px">
+            ${icon('folder', 32)}
+            <h3>${t('ui.projects.noProjects', {}, 'No projects registered')}</h3>
+            <p style="font-size:var(--text-sm);color:var(--text-secondary)">${t('ui.projects.noProjectsDesc', {}, 'Register a project directory to start tracking.')}</p>
+            <button class="btn btn-primary" type="button" id="projects-register-empty">${icon('plus', 16)} ${t('ui.projects.register', {}, 'Register project')}</button>
+          </div>`
+        : `<div class="projects-grid" id="projects-grid">
+            ${projects.map(p => _renderProjectCard(p, p.id === currentId)).join('')}
+          </div>`
+      }
+
+      <!-- Register modal -->
+      <div class="modal-overlay is-hidden" id="register-modal">
+        <div class="glass-card modal" role="dialog" aria-modal="true" aria-labelledby="register-modal-title">
+          <div class="modal-header">
+            <h2 class="modal-title" id="register-modal-title">${icon('folder', 18)} ${t('ui.projects.registerTitle', {}, 'Register project')}</h2>
+            <button class="modal-close" type="button" id="register-modal-close" aria-label="Close">&times;</button>
+          </div>
+          <div class="modal-body">
+            <label class="form-label" for="register-path">${t('ui.projects.pathLabel', {}, 'Project directory path')}</label>
+            <input class="form-input" type="text" id="register-path" placeholder="/home/user/my-project" style="width:100%" />
+            <p style="font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-2)">${t('ui.projects.pathDesc', {}, 'The directory must contain a project_control.json or be initializable with TrackOps.')}</p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-ghost" type="button" id="register-cancel">${t('ui.projects.cancel', {}, 'Cancel')}</button>
+            <button class="btn btn-primary" type="button" id="register-confirm">${icon('plus', 14)} ${t('ui.projects.confirm', {}, 'Register')}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export function bindEvents() {
+  document.getElementById('projects-purge-unavailable')?.addEventListener('click', _purgeUnavailable);
+  document.getElementById('projects-refresh-all')?.addEventListener('click', _refreshAll);
+  document.getElementById('projects-register-new')?.addEventListener('click', _showRegisterModal);
+  document.getElementById('projects-register-empty')?.addEventListener('click', _showRegisterModal);
+  document.getElementById('register-modal-close')?.addEventListener('click', _hideRegisterModal);
+  document.getElementById('register-cancel')?.addEventListener('click', _hideRegisterModal);
+  document.getElementById('register-confirm')?.addEventListener('click', _confirmRegister);
+  document.getElementById('register-modal')?.addEventListener('click', (e) => {
+    if (e.target.id === 'register-modal') _hideRegisterModal();
+  });
+  document.getElementById('projects-grid')?.addEventListener('click', _handleCardAction);
+
+  // Tooltip hover delegation
+  document.getElementById('projects-grid')?.addEventListener('mouseover', _handleTooltipShow);
+  document.getElementById('projects-grid')?.addEventListener('mouseout', _handleTooltipHide);
+
+  _loadAllMetrics();
+}
+
+// ─────────────────────────────── PORTFOLIO KPIs ──────────────────────────────
+
+function _renderPortfolioKPIs() {
+  const allMetrics = Array.from(_metricsCache.values());
+  const activeProjects = (state.get('projects') || []).filter(p => p.available).length;
+  const totalBlocked = allMetrics.reduce((s, m) => s + (m.totals?.blocked || 0), 0);
+  const upcomingDeadlines = _getUpcomingMilestones(7).length;
+
+  return `
+    <div class="portfolio-kpi-grid">
+      <div class="glass-card portfolio-kpi">
+        <span class="portfolio-kpi-icon">${icon('folder', 20)}</span>
+        <div>
+          <span class="portfolio-kpi-value">${activeProjects}</span>
+          <span class="portfolio-kpi-label">${t('ui.projects.kpi.active', {}, 'Active projects')}</span>
+        </div>
+      </div>
+      <div class="glass-card portfolio-kpi ${totalBlocked > 0 ? 'kpi-danger' : ''}">
+        <span class="portfolio-kpi-icon">${icon('alertCircle', 20)}</span>
+        <div>
+          <span class="portfolio-kpi-value" ${totalBlocked > 0 ? 'style="color:var(--danger)"' : ''}>${totalBlocked}</span>
+          <span class="portfolio-kpi-label">${t('ui.projects.kpi.blocked', {}, 'Blocked tasks')}</span>
+        </div>
+      </div>
+      <div class="glass-card portfolio-kpi ${upcomingDeadlines > 0 ? 'kpi-warning' : ''}">
+        <span class="portfolio-kpi-icon">${icon('calendar', 20)}</span>
+        <div>
+          <span class="portfolio-kpi-value" ${upcomingDeadlines > 0 ? 'style="color:var(--warning)"' : ''}>${upcomingDeadlines}</span>
+          <span class="portfolio-kpi-label">${t('ui.projects.kpi.deadlines', {}, 'Deadlines this week')}</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function _getUpcomingMilestones(days) {
+  const now = Date.now();
+  const limit = now + days * 86400000;
+  const results = [];
+  for (const [id, m] of _metricsCache) {
+    if (!m.milestones) continue;
+    for (const ms of m.milestones) {
+      const d = new Date(ms.date).getTime();
+      if (d >= now && d <= limit) {
+        const project = (state.get('projects') || []).find(p => p.id === id);
+        results.push({ ...ms, projectName: project?.name || id });
+      }
+    }
+  }
+  return results;
+}
+
+// ─────────────────────────────── PORTFOLIO ANALYTICS ─────────────────────────
+
+function _updatePortfolioAnalytics() {
+  // Update KPIs
+  const kpisEl = document.getElementById('portfolio-kpis');
+  if (kpisEl) kpisEl.innerHTML = _renderPortfolioKPIs();
+
+  // Status donut
+  _renderStatusDonut();
+
+  // Velocity
+  _renderVelocityChart();
+
+  // Attention feed
+  _renderAttentionFeed();
+}
+
+function _renderStatusDonut() {
+  const container = document.getElementById('portfolio-donut-container');
+  if (!container) return;
+
+  const allMetrics = Array.from(_metricsCache.values());
+  const phases = {};
+  for (const m of allMetrics) {
+    const phaseId = m.activePhase?.id || '?';
+    const label = _phaseLabel(phaseId);
+    phases[label] = (phases[label] || 0) + 1;
+  }
+
+  const entries = Object.entries(phases);
+  if (entries.length === 0) {
+    container.innerHTML = `<p class="text-muted" style="font-size:var(--text-xs)">No data</p>`;
+    return;
+  }
+
+  const total = entries.reduce((s, [, v]) => s + v, 0);
+  const colors = ['var(--accent)', 'var(--success)', 'var(--warning)', 'var(--danger)', 'var(--info)'];
+  const r = 40, cx = 60, cy = 60, sw = 12;
+  const circ = 2 * Math.PI * r;
+  let offset = 0;
+
+  const arcs = entries.map(([label, count], i) => {
+    const pct = count / total;
+    const dashLen = pct * circ;
+    const arc = `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none"
+      stroke="${colors[i % colors.length]}" stroke-width="${sw}"
+      stroke-dasharray="${dashLen} ${circ - dashLen}"
+      stroke-dashoffset="${-offset}" stroke-linecap="round"
+      transform="rotate(-90 ${cx} ${cy})" />`;
+    offset += dashLen;
+    return arc;
+  });
+
+  const legend = entries.map(([label, count], i) =>
+    `<div class="donut-legend-item">
+      <span class="donut-legend-dot" style="background:${colors[i % colors.length]}"></span>
+      <span>${label}</span>
+      <span class="text-muted">${count}</span>
+    </div>`
+  ).join('');
+
+  container.innerHTML = `
+    <div style="display:flex;align-items:center;gap:var(--space-4)">
+      <svg width="120" height="120" viewBox="0 0 120 120" class="donut-svg">
+        <circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="${sw}" />
+        ${arcs.join('')}
+      </svg>
+      <div class="donut-legend">${legend}</div>
+    </div>
+  `;
+}
+
+function _renderVelocityChart() {
+  const container = document.getElementById('portfolio-velocity-container');
+  if (!container) return;
+
+  const allMetrics = Array.from(_metricsCache.values());
+  let totalCompleted = 0, totalAll = 0;
+  for (const m of allMetrics) {
+    totalCompleted += m.totals?.completed || 0;
+    totalAll += m.totals?.all || 0;
+  }
+  const totalPending = totalAll - totalCompleted;
+
+  const barW = 60, barH = 80;
+  const completedH = totalAll ? Math.round((totalCompleted / totalAll) * barH) : 0;
+  const pendingH = totalAll ? Math.round((totalPending / totalAll) * barH) : 0;
+
+  container.innerHTML = `
+    <div style="display:flex;align-items:flex-end;gap:var(--space-4);height:${barH + 30}px;padding-top:var(--space-3)">
+      <div style="display:flex;flex-direction:column;align-items:center;gap:var(--space-1)">
+        <span class="text-muted" style="font-size:var(--text-xs)">${totalCompleted}</span>
+        <div style="width:${barW}px;height:${completedH}px;background:var(--success);border-radius:var(--radius-xs) var(--radius-xs) 0 0;min-height:4px"></div>
+        <span style="font-size:var(--text-xs);font-weight:600;color:var(--text-secondary)">${t('ui.projects.completed', {}, 'Done')}</span>
+      </div>
+      <div style="display:flex;flex-direction:column;align-items:center;gap:var(--space-1)">
+        <span class="text-muted" style="font-size:var(--text-xs)">${totalPending}</span>
+        <div style="width:${barW}px;height:${pendingH}px;background:var(--accent);border-radius:var(--radius-xs) var(--radius-xs) 0 0;min-height:4px"></div>
+        <span style="font-size:var(--text-xs);font-weight:600;color:var(--text-secondary)">${t('ui.projects.remaining', {}, 'Remaining')}</span>
+      </div>
+    </div>
+  `;
+}
+
+function _renderAttentionFeed() {
+  const container = document.getElementById('portfolio-attention-feed');
+  if (!container) return;
+
+  const alerts = [];
+  const projects = state.get('projects') || [];
+
+  for (const [id, m] of _metricsCache) {
+    const project = projects.find(p => p.id === id);
+    const name = project?.name || id;
+
+    if (m.totals?.blocked > 0) {
+      alerts.push({ severity: 'danger', text: `${name}: ${m.totals.blocked} ${t('ui.projects.blockedTasks', {}, 'blocked tasks')}` });
+    }
+
+    const health = _computeHealth(m, project);
+    if (health.status === 'delayed') {
+      alerts.push({ severity: 'danger', text: `${name}: ${t('ui.projects.delayed', {}, 'Delayed')}` });
+    } else if (health.status === 'at-risk') {
+      alerts.push({ severity: 'warning', text: `${name}: ${t('ui.projects.atRisk', {}, 'At risk')}` });
+    }
+  }
+
+  if (alerts.length === 0) {
+    container.innerHTML = `<p class="text-muted" style="font-size:var(--text-xs);padding:var(--space-2) 0">${t('ui.projects.allClear', {}, 'All projects on track')}</p>`;
+    return;
+  }
+
+  container.innerHTML = alerts.slice(0, 5).map(a => `
+    <div class="attention-item">
+      <span class="attention-dot" style="background:var(--${a.severity})"></span>
+      <span style="font-size:var(--text-xs);color:var(--text-secondary)">${esc(a.text)}</span>
+    </div>
+  `).join('');
+}
+
+// ─────────────────────────────── HEALTH COMPUTATION ──────────────────────────
+
+function _computeHealth(metrics, project) {
+  if (!metrics) return { status: 'unknown', label: '—', color: 'var(--text-muted)' };
+
+  const pct = metrics.totals?.all ? (metrics.totals.completed / metrics.totals.all) : 0;
+  const deadline = _getProjectDeadline(metrics, project);
+
+  if (deadline) {
+    const now = Date.now();
+    const deadlineTime = new Date(deadline).getTime();
+    if (deadlineTime < now && pct < 1) {
+      return { status: 'delayed', label: t('ui.projects.health.delayed', {}, 'Delayed'), color: 'var(--danger)' };
+    }
+    const daysLeft = Math.ceil((deadlineTime - now) / 86400000);
+    if (daysLeft <= 7 && pct < 0.8) {
+      return { status: 'at-risk', label: t('ui.projects.health.atRisk', {}, 'At risk'), color: 'var(--warning)' };
+    }
+  }
+
+  if (metrics.totals?.blocked > 0 && metrics.totals.blocked >= (metrics.totals.inProgress || 1)) {
+    return { status: 'at-risk', label: t('ui.projects.health.atRisk', {}, 'At risk'), color: 'var(--warning)' };
+  }
+
+  return { status: 'on-track', label: t('ui.projects.health.onTrack', {}, 'On track'), color: 'var(--success)' };
+}
+
+function _getProjectDeadline(metrics, project) {
+  if (!metrics?.milestones?.length) return null;
+  const sorted = [...metrics.milestones].sort((a, b) => new Date(b.date) - new Date(a.date));
+  return sorted[0]?.date || null;
+}
+
+function _getDeadlineInfo(metrics, project) {
+  const deadline = _getProjectDeadline(metrics, project);
+  if (!deadline) return null;
+  const d = new Date(deadline);
+  const now = Date.now();
+  const diff = Math.ceil((d.getTime() - now) / 86400000);
+  return { date: deadline, daysLeft: diff };
+}
+
+function _getPriority(metrics) {
+  if (!metrics?.totals) return null;
+  const { blocked, inProgress, all, completed } = metrics.totals;
+  const pct = all ? completed / all : 0;
+  if (blocked > 2 || pct < 0.3) return { label: t('ui.projects.priority.high', {}, 'High'), color: 'var(--danger)' };
+  if (blocked > 0 || pct < 0.6) return { label: t('ui.projects.priority.medium', {}, 'Medium'), color: 'var(--warning)' };
+  return { label: t('ui.projects.priority.low', {}, 'Low'), color: 'var(--success)' };
+}
+
+// ─────────────────────────────── CARD RENDER ─────────────────────────────────
+
+function _renderProjectCard(project, isCurrent) {
+  const cached = _metricsCache.get(project.id);
+
+  return `
+    <article class="glass-card project-card ${isCurrent ? 'is-current project-card--active' : ''} ${!project.available ? 'is-unavailable' : ''}" data-project-id="${esc(project.id)}" aria-label="${esc(project.name)}" ${isCurrent ? 'style="border-color: var(--accent); border-width: 2px"' : ''}>
+      <div class="project-card-header">
+        <div class="project-card-info">
+          <div class="project-card-name-row">
+            <h3 class="project-card-name">${esc(project.name)}</h3>
+            <button class="project-info-btn" type="button" data-tooltip-trigger data-project-id="${esc(project.id)}" aria-label="${t('ui.projects.moreInfo', {}, 'More info')}">
+              ${icon('info', 14)}
+            </button>
+            <div class="project-info-tooltip is-hidden" data-tooltip-for="${esc(project.id)}">
+              <div class="tooltip-row"><span class="tooltip-label">${t('ui.projects.path', {}, 'Path')}:</span> <span class="tooltip-value">${esc(project.root || project.workspaceRoot || '—')}</span></div>
+              <div class="tooltip-row"><span class="tooltip-label">${t('ui.projects.registered', {}, 'Registered')}:</span> <span class="tooltip-value">${project.registeredAt ? formatDate(project.registeredAt, 'date') : '—'}</span></div>
+              <div class="tooltip-row"><span class="tooltip-label">${t('ui.projects.lastSeen', {}, 'Last seen')}:</span> <span class="tooltip-value">${project.lastSeenAt ? formatDate(project.lastSeenAt, 'date') : '—'}</span></div>
+              ${cached ? `<div class="tooltip-row"><span class="tooltip-label">${t('ui.projects.deadline', {}, 'Deadline')}:</span> <span class="tooltip-value">${_getDeadlineInfo(cached, project) ? formatDate(_getDeadlineInfo(cached, project).date, 'date') : '—'}</span></div>` : ''}
+            </div>
+          </div>
+        </div>
+        <div class="project-card-badges">
+          ${isCurrent ? `<span class="badge badge-accent">${t('ui.projects.current', {}, 'Current')}</span>` : ''}
+          <span class="badge badge-${project.available ? 'success' : 'warning'}">
+            <span class="repo-badge-dot" style="width:6px;height:6px;border-radius:50%;background:${project.available ? 'var(--success)' : 'var(--warning)'};flex-shrink:0"></span>
+            ${project.available ? t('ui.projects.available', {}, 'Available') : t('ui.projects.unavailable', {}, 'Unavailable')}
+          </span>
+          ${project.layout ? `<span class="badge badge-muted">${esc(project.layout)}</span>` : ''}
+        </div>
+      </div>
+
+      ${project.available && cached ? _renderCardIndicators(cached, project) : ''}
+
+      ${project.available ? `
+        <div class="project-card-metrics" id="metrics-${esc(project.id)}">
+          ${cached ? _renderMetrics(cached) : _renderMetricsSkeleton()}
+        </div>
+
+        <div class="project-card-progress" id="progress-${esc(project.id)}">
+          ${cached ? _renderProgressBar(cached) : '<div class="skeleton skeleton-text" style="height:8px;width:100%"></div>'}
+        </div>
+      ` : `
+        <div class="project-card-metrics is-disabled">
+          <p class="text-muted" style="font-size:var(--text-xs);padding:var(--space-4) 0">${t('ui.projects.unavailableDesc', {}, 'Project directory not accessible.')}</p>
+        </div>
+      `}
+
+      <div class="project-card-actions">
+        ${project.available && !isCurrent ? `
+          <button class="btn btn-primary btn-sm" type="button" data-action="open" data-project="${esc(project.id)}" aria-label="${t('ui.projects.open', {}, 'Open project')}">
+            ${icon('externalLink', 14)} ${t('ui.projects.open', {}, 'Open')}
+          </button>
+        ` : ''}
+        ${project.available ? `
+          <button class="btn btn-ghost btn-sm" type="button" data-action="refresh" data-project="${esc(project.id)}" aria-label="${t('ui.projects.refresh', {}, 'Refresh')}">
+            ${icon('refresh', 14)} ${t('ui.projects.refresh', {}, 'Refresh')}
+          </button>
+          <button class="btn btn-ghost btn-sm" type="button" data-action="sync" data-project="${esc(project.id)}" aria-label="${t('ui.projects.syncDocs', {}, 'Sync docs')}">
+            ${icon('sync', 14)} ${t('ui.projects.syncDocs', {}, 'Sync')}
+          </button>
+        ` : ''}
+        <button class="btn btn-ghost btn-sm" style="color:var(--danger)" type="button" data-action="remove" data-project="${esc(project.id)}" aria-label="${t('ui.projects.remove', {}, 'Remove')}">
+          ${icon('trash', 14)} ${t('ui.projects.remove', {}, 'Remove')}
+        </button>
+      </div>
+    </article>
+  `;
+}
+
+function _renderCardIndicators(metrics, project) {
+  const health = _computeHealth(metrics, project);
+  const deadline = _getDeadlineInfo(metrics, project);
+  const priority = _getPriority(metrics);
+
+  return `
+    <div class="project-card-indicators">
+      <div class="project-indicator">
+        <span class="indicator-dot" style="background:${health.color}"></span>
+        <span class="indicator-label">${health.label}</span>
+      </div>
+      ${deadline ? `
+        <div class="project-indicator">
+          ${icon('calendar', 12)}
+          <span class="indicator-label ${deadline.daysLeft < 0 ? 'text-danger' : deadline.daysLeft <= 7 ? 'text-warning' : ''}">${
+            deadline.daysLeft < 0
+              ? t('ui.projects.overdue', { days: Math.abs(deadline.daysLeft) }, `${Math.abs(deadline.daysLeft)}d overdue`)
+              : deadline.daysLeft === 0
+                ? t('ui.projects.dueToday', {}, 'Due today')
+                : t('ui.projects.daysLeft', { days: deadline.daysLeft }, `${deadline.daysLeft}d left`)
+          }</span>
+        </div>
+      ` : ''}
+      ${priority ? `
+        <div class="project-indicator">
+          <span class="indicator-label" style="color:${priority.color};font-weight:700">${priority.label}</span>
+        </div>
+      ` : ''}
+    </div>
+  `;
+}
+
+function _renderMetrics(metrics) {
+  const { totals, activePhase } = metrics;
+  const completionPct = totals.all ? Math.round((totals.completed / totals.all) * 100) : 0;
+
+  return `
+    <div class="project-metrics-grid">
+      <div class="glass-card project-metric">
+        <span class="project-metric-value">${totals.all}</span>
+        <span class="project-metric-label">${t('ui.projects.metric.tasks', {}, 'Tasks')}</span>
+      </div>
+      <div class="glass-card project-metric">
+        <span class="project-metric-value" style="color:var(--success)">${totals.completed}</span>
+        <span class="project-metric-label">${t('ui.projects.metric.done', {}, 'Done')}</span>
+      </div>
+      <div class="glass-card project-metric">
+        <span class="project-metric-value" style="color:${totals.blocked > 0 ? 'var(--danger)' : 'var(--text-primary)'}">${totals.blocked}</span>
+        <span class="project-metric-label">${t('ui.projects.metric.blocked', {}, 'Blocked')}</span>
+      </div>
+      <div class="glass-card project-metric">
+        <span class="project-metric-value" style="color:var(--accent)">${_phaseLabel(activePhase?.id)}</span>
+        <span class="project-metric-label">${t('ui.projects.metric.phase', {}, 'Phase')}</span>
+      </div>
+      <div class="glass-card project-metric">
+        <span class="project-metric-value">${completionPct}%</span>
+        <span class="project-metric-label">${t('ui.projects.metric.progress', {}, 'Progress')}</span>
+      </div>
+    </div>
+  `;
+}
+
+function _renderProgressBar(metrics) {
+  const pct = metrics.totals.all ? Math.round((metrics.totals.completed / metrics.totals.all) * 100) : 0;
+  return `
+    <div class="project-progress-track" role="progressbar" aria-valuenow="${pct}" aria-valuemin="0" aria-valuemax="100" aria-label="Completion: ${pct}%">
+      <div class="project-progress-fill" style="width:${pct}%"></div>
+    </div>
+  `;
+}
+
+function _renderMetricsSkeleton() {
+  return `
+    <div class="project-metrics-grid">
+      ${Array.from({ length: 5 }, () => `
+        <div class="glass-card project-metric">
+          <div class="skeleton" style="width:32px;height:20px;margin:0 auto var(--space-1)"></div>
+          <div class="skeleton skeleton-text" style="width:40px;height:10px;margin:0 auto"></div>
+        </div>
+      `).join('')}
+    </div>
+  `;
+}
+
+// ─────────────────────────────── TOOLTIP ──────────────────────────────────────
+
+function _handleTooltipShow(e) {
+  const trigger = e.target.closest('[data-tooltip-trigger]');
+  if (!trigger) return;
+  const projectId = trigger.dataset.projectId;
+  const tooltip = document.querySelector(`[data-tooltip-for="${projectId}"]`);
+  if (tooltip) tooltip.classList.remove('is-hidden');
+}
+
+function _handleTooltipHide(e) {
+  const trigger = e.target.closest('[data-tooltip-trigger]');
+  if (!trigger) return;
+  const projectId = trigger.dataset.projectId;
+  const tooltip = document.querySelector(`[data-tooltip-for="${projectId}"]`);
+  if (tooltip) tooltip.classList.add('is-hidden');
+}
+
+// ─────────────────────────────── METRICS LOADING ─────────────────────────────
+
+async function _loadAllMetrics() {
+  const projects = (state.get('projects') || []).filter(p => p.available);
+
+  await Promise.allSettled(
+    projects.map(async (p) => {
+      try {
+        const payload = await api.getProjectState(p.id);
+        const metrics = {
+          totals: payload.derived?.totals || { all: 0, completed: 0, blocked: 0, pending: 0, inProgress: 0, inReview: 0, cancelled: 0 },
+          activePhase: payload.derived?.activePhase || null,
+          runtime: payload.runtime || null,
+          opera: payload.opera || null,
+          milestones: payload.control?.milestones || [],
+          tasks: payload.control?.tasks || [],
+        };
+        _metricsCache.set(p.id, metrics);
+        _updateCardMetrics(p.id, metrics);
+      } catch (err) {
+        console.warn(`[projects] Could not load metrics for ${p.name}:`, err.message);
+      }
+    })
+  );
+
+  // After all metrics loaded, update portfolio analytics
+  _updatePortfolioAnalytics();
+}
+
+function _updateCardMetrics(projectId, metrics) {
+  const metricsEl = document.getElementById(`metrics-${projectId}`);
+  if (metricsEl) metricsEl.innerHTML = _renderMetrics(metrics);
+
+  const progressEl = document.getElementById(`progress-${projectId}`);
+  if (progressEl) progressEl.innerHTML = _renderProgressBar(metrics);
+
+  // Update indicators
+  const card = document.querySelector(`[data-project-id="${projectId}"]`);
+  if (card) {
+    const existingIndicators = card.querySelector('.project-card-indicators');
+    const project = (state.get('projects') || []).find(p => p.id === projectId);
+    const indicatorsHtml = _renderCardIndicators(metrics, project);
+    if (existingIndicators) {
+      existingIndicators.outerHTML = indicatorsHtml;
+    } else {
+      const header = card.querySelector('.project-card-header');
+      if (header) header.insertAdjacentHTML('afterend', indicatorsHtml);
+    }
+  }
+}
+
+// ─────────────────────────────── ACTIONS ─────────────────────────────────────
+
+function _handleCardAction(e) {
+  const btn = e.target.closest('[data-action]');
+  if (!btn) return;
+  const action = btn.dataset.action;
+  const projectId = btn.dataset.project;
+  switch (action) {
+    case 'open':    _openProject(projectId); break;
+    case 'refresh': _refreshProject(projectId); break;
+    case 'sync':    _syncProject(projectId); break;
+    case 'remove':  _removeProject(projectId); break;
+  }
+}
+
+async function _openProject(projectId) {
+  state.update('currentProjectId', projectId);
+  localStorage.setItem('ops-dashboard-project', projectId);
+  window.dispatchEvent(new CustomEvent('ops:refresh'));
+  router.navigate('dashboard');
+  flash(t('ui.projects.opened', {}, 'Project opened'), 'success');
+}
+
+async function _refreshProject(projectId) {
+  const btn = document.querySelector(`[data-action="refresh"][data-project="${projectId}"]`);
+  if (btn) btn.disabled = true;
+  try {
+    await api.getProjectState(projectId);
+    _metricsCache.delete(projectId);
+    await _loadAllMetrics();
+    flash(t('ui.projects.refreshed', {}, 'Project refreshed'), 'success');
+  } catch (err) {
+    flash(`Error: ${err.message}`, 'error');
+  } finally {
+    if (btn) btn.disabled = false;
+  }
+}
+
+async function _syncProject(projectId) {
+  try {
+    await api.call('/api/sync', {
+      method: 'POST',
+      body: JSON.stringify({ projectId }),
+      projectAware: false,
+    });
+    flash(t('ui.projects.synced', {}, 'Docs synced'), 'success');
+  } catch (err) {
+    flash(`Sync error: ${err.message}`, 'error');
+  }
+}
+
+async function _removeProject(projectId) {
+  const project = (state.get('projects') || []).find(p => p.id === projectId);
+  if (!project) return;
+  const confirmed = confirm(
+    t('ui.projects.removeConfirm', { name: project.name },
+      `Remove "${project.name}" from the registry? This will NOT delete any files.`)
+  );
+  if (!confirmed) return;
+  try {
+    const result = await api.removeProject(projectId);
+    state.update('projects', result.projects || []);
+    _metricsCache.delete(projectId);
+    if (state.get('currentProjectId') === projectId) {
+      const first = (result.projects || []).find(p => p.available);
+      state.update('currentProjectId', first?.id || null);
+      if (first) localStorage.setItem('ops-dashboard-project', first.id);
+    }
+    router.refresh();
+    flash(t('ui.projects.removed', {}, 'Project removed from registry'), 'success');
+  } catch (err) {
+    flash(`Error: ${err.message}`, 'error');
+  }
+}
+
+async function _purgeUnavailable() {
+  const projects = state.get('projects') || [];
+  const count = projects.filter(p => !p.available).length;
+  if (!count) return;
+  const confirmed = confirm(
+    `Remove ${count} unavailable project${count !== 1 ? 's' : ''} from the registry? This will NOT delete any files.`
+  );
+  if (!confirmed) return;
+  const btn = document.getElementById('projects-purge-unavailable');
+  if (btn) btn.disabled = true;
+  try {
+    const result = await api.purgeUnavailableProjects();
+    state.update('projects', result.projects || []);
+    _metricsCache.clear();
+    router.refresh();
+    flash(`Removed ${result.removed} unavailable project${result.removed !== 1 ? 's' : ''}`, 'success');
+  } catch (err) {
+    flash(`Error: ${err.message}`, 'error');
+    if (btn) btn.disabled = false;
+  }
+}
+
+async function _refreshAll() {
+  _metricsCache.clear();
+  try {
+    const result = await api.getProjects();
+    state.update('projects', result.projects || []);
+    router.refresh();
+  } catch (err) {
+    flash(`Error: ${err.message}`, 'error');
+  }
+}
+
+// ─────────────────────────────── MODAL ───────────────────────────────────────
+
+function _showRegisterModal() {
+  const modal = document.getElementById('register-modal');
+  if (modal) {
+    modal.classList.remove('is-hidden');
+    document.getElementById('register-path')?.focus();
+  }
+}
+
+function _hideRegisterModal() {
+  const modal = document.getElementById('register-modal');
+  if (modal) modal.classList.add('is-hidden');
+}
+
+async function _confirmRegister() {
+  const input = document.getElementById('register-path');
+  const path = input?.value?.trim();
+  if (!path) {
+    flash(t('ui.projects.pathRequired', {}, 'Please enter a project path'), 'warning');
+    return;
+  }
+  try {
+    const result = await api.registerProject(path);
+    state.update('projects', result.projects || []);
+    _hideRegisterModal();
+    router.refresh();
+    flash(t('ui.projects.registered', {}, 'Project registered'), 'success');
+  } catch (err) {
+    flash(`Error: ${err.message}`, 'error');
+  }
+}