trackops 2.0.6 → 2.2.0

package/ui/js/views/dashboard.js

@@ -4,11 +4,12 @@
  */
 
 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';
+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';
+import { flash } from './flash.js';
 
 /** Map OPERA phase IDs to standard dev labels */
 const PHASE_LABELS = {
@@ -26,7 +27,7 @@ function _phaseLabel(phaseId) {
 }
 
 // ─── Module state ────────────────────────────────────────────────
-let _activeTab = 'overview';    // 'overview' | 'analytics'
+let _activeTab = 'overview';    // 'overview' | 'analytics' | 'quality'
 let _activePeriod = '30d';      // for analytics tab
 let _analytics = null;
 
@@ -53,10 +54,11 @@ export async function render() {
       <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>
+          <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>
+          <button class="tab-pill${_activeTab === 'quality' ? ' is-active' : ''}" data-tab="quality" role="tab" aria-selected="${_activeTab === 'quality'}" aria-controls="dashboard-content">${t('ui.dashboard.tabQuality', {}, 'Quality')}</button>
+        </div>
+      </div>
       <div id="dashboard-content" role="tabpanel">
         ${content}
       </div>
@@ -100,22 +102,25 @@ function _bindTabSwitching() {
   });
 }
 
-function _bindActiveTabEvents() {
-  if (_activeTab === 'overview') {
-    _bindTaskActionEvents();
-  } else {
-    _bindPeriodEvents();
-  }
-}
+function _bindActiveTabEvents() {
+  if (_activeTab === 'overview') {
+    _bindTaskActionEvents();
+  } else if (_activeTab === 'analytics') {
+    _bindPeriodEvents();
+  }
+}
 
 // ─── Tab content router ──────────────────────────────────────────
 
-async function _renderTabContent(payload) {
-  if (_activeTab === 'analytics') {
-    return _renderAnalyticsTab(payload);
-  }
-  return _renderOverviewTab(payload);
-}
+async function _renderTabContent(payload) {
+  if (_activeTab === 'quality') {
+    return _renderQualityTab(payload);
+  }
+  if (_activeTab === 'analytics') {
+    return _renderAnalyticsTab(payload);
+  }
+  return _renderOverviewTab(payload);
+}
 
 // ═══════════════════════════════════════════════════════════════════
 //  OVERVIEW TAB
@@ -177,13 +182,18 @@ function _renderOverviewTab(payload) {
           </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>
+          <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 class="glass-card chart-card card-hover-lift stagger-4" aria-label="${t('ui.overview.agentCoordination', {}, 'Agent coordination')}">
+            <p class="chart-title" style="margin-bottom:var(--space-3)">${t('ui.overview.agentCoordination', {}, 'Agent coordination')}</p>
+            ${_renderCoordinationCard(derived, control)}
+          </div>
+
+        </div>
+      </div>
 
       <!-- (Health grid moved to Analytics tab — no duplication) -->
     </div>
@@ -356,7 +366,7 @@ function _renderDonut(totals) {
 
 // ─────────────────────────────── NEXT TASK ──────────────────────────────────
 
-function _renderNextTask(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;
@@ -406,24 +416,171 @@ function _renderNextTask(task) {
 
 // ─────────────────────────────── 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) {
+function _bindTaskActionEvents() {
+  document.querySelectorAll('[data-task-action]').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const taskId   = btn.dataset.taskId;
+      const action   = btn.dataset.taskAction;
+      if (!taskId || !action) return;
+      try {
+        await api.taskAction(taskId, action, t('ui.overview.defaultActionNote', { action }, `Change to "${action}" from dashboard overview.`), {
+          actor: 'user',
+          source: 'dashboard_overview',
+        });
+        flash(t('ui.overview.actionApplied', {}, 'Task updated.'), 'success');
+        window.dispatchEvent(new CustomEvent('ops:refresh'));
+      } catch (err) {
+        flash(err.message, 'error');
+      }
+    });
+  });
+}
+
+function _renderCoordinationCard(derived, control) {
+  const inbox = control.meta?.agentInbox?.pending || [];
+  const awaitingUser = derived.awaitingUserTasks || [];
+  if (!inbox.length && !awaitingUser.length) {
+    return `<p class="text-muted" style="font-size:var(--text-sm)">${t('ui.overview.noCoordination', {}, 'No pending coordination between user and agent.')}</p>`;
+  }
+
+  const lines = [];
+  awaitingUser.slice(0, 3).forEach(task => {
+    lines.push(`<div class="info-row"><p class="label-sm">${t('ui.overview.awaitingUser', {}, 'Awaiting user')}</p><p class="value">${esc(task.title)}</p></div>`);
+  });
+  inbox.slice(0, 4).forEach(item => {
+    lines.push(`<div class="info-row"><p class="label-sm">${esc(item.kind)}</p><p class="value">${esc(item.message)}</p></div>`);
+  });
+
+  return `<div class="stack stack-sm">${lines.join('')}</div>`;
+}
+
+// ═══════════════════════════════════════════════════════════════════
+//  ANALYTICS TAB
+// ═══════════════════════════════════════════════════════════════════
+
+function _renderQualityTab(payload) {
+  const quality = payload.quality || {};
+  const report = quality.report || { probes: [], summary: { counts: {} }, verification: { latest: {} } };
+  const phaseReadiness = quality.phaseReadiness || { status: 'unknown', blockers: [] };
+  const releaseReadiness = quality.releaseReadiness || { status: 'unknown', blockers: [] };
+  const promotionReadiness = quality.promotionReadiness || { status: 'unknown', blockers: [] };
+  const waivers = quality.waivers || [];
+  const failing = (report.probes || []).filter((probe) => probe.status === 'fail');
+  const latestRuns = report.verification?.latest || {};
+  const domains = Object.entries(report.summary?.byDomain || {});
+  const statusLabel = (value) => t(`quality.status.${String(value || 'unknown').toLowerCase()}`, {}, String(value || 'unknown'));
+  const blockersLabel = (items) => (items || []).map((blocker) => blocker.id).join(', ') || t('ui.dashboard.quality.noBlockers', {}, 'No blockers');
+
+  return `
+    <div class="view-enter">
+      <div class="grid-4" style="margin-bottom:var(--space-5)">
+        ${_renderKPI(
+          t('ui.dashboard.quality.kpiQuality', {}, 'Quality'),
+          statusLabel(report.summary?.overallStatus || 'unknown'),
+          t('ui.dashboard.quality.failingProbes', { count: report.summary?.counts?.fail || 0 }, `${report.summary?.counts?.fail || 0} failing probes`),
+          'shield',
+          (report.summary?.counts?.fail || 0) ? 'danger' : 'success',
+        )}
+        ${_renderKPI(
+          t('ui.dashboard.quality.kpiPhase', {}, 'Phase readiness'),
+          statusLabel(phaseReadiness.status || 'unknown'),
+          t('ui.dashboard.quality.blockerCount', { count: phaseReadiness.blockers?.length || 0 }, `${phaseReadiness.blockers?.length || 0} blockers`),
+          'play',
+          phaseReadiness.ready ? 'success' : 'warning',
+        )}
+        ${_renderKPI(
+          t('ui.dashboard.quality.kpiRelease', {}, 'Release readiness'),
+          statusLabel(releaseReadiness.status || 'unknown'),
+          t('ui.dashboard.quality.blockerCount', { count: releaseReadiness.blockers?.length || 0 }, `${releaseReadiness.blockers?.length || 0} blockers`),
+          'checkCircle',
+          releaseReadiness.ready ? 'success' : 'danger',
+        )}
+        ${_renderKPI(
+          t('ui.dashboard.quality.kpiPromotion', {}, 'Production promotion'),
+          statusLabel(promotionReadiness.status || 'unknown'),
+          t('ui.dashboard.quality.blockerCount', { count: promotionReadiness.blockers?.length || 0 }, `${promotionReadiness.blockers?.length || 0} blockers`),
+          'alertCircle',
+          promotionReadiness.ready ? 'success' : 'danger',
+        )}
+      </div>
+
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)">
+        <div class="glass-card chart-card">
+          <p class="chart-title">${t('ui.dashboard.quality.domainStatus', {}, 'Domain status')}</p>
+          <div class="stack stack-sm" style="margin-top:var(--space-3)">
+            ${domains.length ? domains.map(([domain, counts]) => `
+              <div style="display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)">
+                <span class="label-sm">${esc(domain)}</span>
+                <span class="text-muted" style="font-size:var(--text-xs)">
+                  ${t('ui.dashboard.quality.domainCounts', {
+                    pass: counts.pass || 0,
+                    fail: counts.fail || 0,
+                    skip: counts.skip || 0,
+                  }, `pass ${counts.pass || 0} · fail ${counts.fail || 0} · skip ${counts.skip || 0}`)}
+                </span>
+              </div>
+            `).join('') : `<p class="text-muted">${t('ui.dashboard.quality.noDomainData', {}, 'No domain data.')}</p>`}
+          </div>
+        </div>
+
+        <div class="glass-card chart-card">
+          <p class="chart-title">${t('ui.dashboard.quality.latestVerification', {}, 'Latest verification')}</p>
+          <div class="stack stack-sm" style="margin-top:var(--space-3)">
+            ${Object.keys(latestRuns).length ? Object.entries(latestRuns).map(([scope, run]) => `
+              <div style="display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)">
+                <span class="label-sm">${esc(t(`quality.scope.${scope}`, {}, scope))}</span>
+                <span class="badge ${run.status === 'passed' ? 'badge-success' : run.status === 'skipped' ? 'badge-warning' : 'badge-danger'}">${esc(statusLabel(run.status || 'unknown'))}</span>
+              </div>
+            `).join('') : `<p class="text-muted">${t('ui.dashboard.quality.noVerificationRuns', {}, 'No verification runs recorded.')}</p>`}
+          </div>
+        </div>
+
+        <div class="glass-card chart-card">
+          <p class="chart-title">${t('ui.dashboard.quality.topBlockers', {}, 'Top blockers')}</p>
+          <div class="stack stack-sm" style="margin-top:var(--space-3)">
+            ${failing.length ? failing.slice(0, 8).map((probe) => `
+              <div class="finding-item severity-${esc((probe.severity || 'medium').toLowerCase())}">
+                <p style="font-size:var(--text-sm);font-weight:700">${esc(probe.id)}</p>
+                <p style="font-size:var(--text-xs);color:var(--text-secondary)">${esc(probe.message || '')}</p>
+              </div>
+            `).join('') : `<p class="text-muted">${t('ui.dashboard.quality.noFailingProbes', {}, 'No failing probes.')}</p>`}
+          </div>
+        </div>
+
+        <div class="glass-card chart-card">
+          <p class="chart-title">${t('ui.dashboard.quality.readinessDetail', {}, 'Readiness detail')}</p>
+          <div class="stack stack-sm" style="margin-top:var(--space-3)">
+            ${[phaseReadiness, releaseReadiness, promotionReadiness].map((item) => `
+              <div>
+                <p style="font-size:var(--text-sm);font-weight:700">${esc(t(`ui.dashboard.quality.kind.${item.kind || 'readiness'}`, {}, item.kind || 'readiness'))} · ${esc(statusLabel(item.status || 'unknown'))}</p>
+                <p style="font-size:var(--text-xs);color:var(--text-secondary)">${esc(blockersLabel(item.blockers || []))}</p>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+
+        <div class="glass-card chart-card">
+          <p class="chart-title">${t('ui.dashboard.quality.activeWaivers', {}, 'Active waivers')}</p>
+          <div class="stack stack-sm" style="margin-top:var(--space-3)">
+            ${waivers.length ? waivers.map((waiver) => `
+              <div>
+                <p style="font-size:var(--text-sm);font-weight:700">${esc(waiver.probeId || waiver.id)}</p>
+                <p style="font-size:var(--text-xs);color:var(--text-secondary)">
+                  ${esc(t('ui.dashboard.quality.waiverSummary', {
+                    scope: waiver.scope || 'release',
+                    approvedBy: waiver.approvedBy || 'unknown',
+                  }, `${waiver.scope || 'release'} · ${waiver.approvedBy || 'unknown'}`))}
+                </p>
+              </div>
+            `).join('') : `<p class="text-muted">${t('ui.dashboard.quality.noWaivers', {}, 'No active waivers.')}</p>`}
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+async function _renderAnalyticsTab(payload) {
   const { derived, control, runtime } = payload;
   const statusLabels = state.getStatusLabels();
   const history      = extractHistory(control.tasks).slice(0, 20);

package/ui/js/views/execution.js

@@ -176,9 +176,13 @@ async function _runCommand() {
   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;
+  try {
+    const selectedTaskId = state.get('selectedTaskId');
+    const result = await api.runCommand(cmd, {
+      taskId: selectedTaskId || undefined,
+      source: 'execution_console',
+    });
+    const sessionId = result.session?.id || result.sessionId;
 
     // Añadir sesión al estado
     const sessions = state.get('sessions');

package/ui/js/views/plans.js

@@ -0,0 +1,284 @@
+import * as api from '../api.js';
+import * as state from '../state.js';
+import { icon } from '../icons.js';
+import { esc, formatDate } from '../utils.js';
+import { flash } from './flash.js';
+import { t } from '../i18n.js';
+
+let _selectedSourceId = null;
+let _scanResults = [];
+let _currentSource = null;
+
+function renderSourceCard(source) {
+  const isActive = source.id === _selectedSourceId;
+  return `
+    <button class="panel ${isActive ? 'is-selected' : ''}" type="button" data-plan-source="${esc(source.id)}" style="text-align:left">
+      <div style="display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start">
+        <div>
+          <p class="eyebrow">${esc(source.adapter || 'plan')}</p>
+          <h3 class="panel-title" style="margin:0">${esc(source.title || source.id)}</h3>
+          <p style="margin-top:var(--space-1);color:var(--text-secondary);font-size:var(--text-sm)">${esc(source.id)}</p>
+        </div>
+        <span class="badge badge-muted">${esc(source.status || 'previewed')}</span>
+      </div>
+      <div style="display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)">
+        <span class="badge badge-muted">Warnings: ${source.warnings || 0}</span>
+        <span class="badge ${(source.conflicts || 0) ? 'badge-danger' : 'badge-muted'}">Conflicts: ${source.conflicts || 0}</span>
+        <span class="badge badge-muted">Managed: ${source.managedTaskCount || 0}</span>
+      </div>
+      <div style="margin-top:var(--space-3);font-size:var(--text-xs);color:var(--text-secondary)">
+        <div>Preview: ${source.lastPreviewAt ? esc(formatDate(source.lastPreviewAt, 'date')) : 'n/a'}</div>
+        <div>Applied: ${source.lastApplyAt ? esc(formatDate(source.lastApplyAt, 'date')) : 'n/a'}</div>
+      </div>
+    </button>
+  `;
+}
+
+function renderPreview(sourceDetails) {
+  if (!sourceDetails) {
+    return `<div class="empty-state">${t('ui.plans.selectSource', {}, 'Select a plan source to inspect its preview.')}</div>`;
+  }
+
+  const preview = sourceDetails.preview || {};
+  const operations = preview.operations || [];
+  const warnings = preview.warnings || [];
+
+  return `
+    <div class="stack stack-md">
+      <div class="panel">
+        <div style="display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start;flex-wrap:wrap">
+          <div>
+            <p class="eyebrow">${esc(sourceDetails.source?.adapter || 'plan')}</p>
+            <h3 class="panel-title" style="margin:0">${esc(sourceDetails.source?.title || sourceDetails.source?.id || 'Plan')}</h3>
+            <p style="margin-top:var(--space-1);color:var(--text-secondary);font-size:var(--text-sm)">${esc(sourceDetails.source?.path || '')}</p>
+          </div>
+          <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
+            <button class="btn btn-primary btn-sm" type="button" data-plan-apply="${esc(sourceDetails.source?.id || '')}">${icon('check', 14)} ${t('ui.plans.apply', {}, 'Apply')}</button>
+            <button class="btn btn-ghost btn-sm" type="button" data-plan-unlink="${esc(sourceDetails.source?.id || '')}">${icon('link', 14)} ${t('ui.plans.unlink', {}, 'Unlink')}</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid-split">
+        <div class="panel">
+          <p class="eyebrow">${t('ui.plans.summary', {}, 'Summary')}</p>
+          <div class="stack stack-sm">
+            <div class="info-row"><p class="label-sm">Create</p><p class="value">${preview.summary?.create || 0}</p></div>
+            <div class="info-row"><p class="label-sm">Update</p><p class="value">${preview.summary?.update || 0}</p></div>
+            <div class="info-row"><p class="label-sm">Reparent</p><p class="value">${preview.summary?.reparent || 0}</p></div>
+            <div class="info-row"><p class="label-sm">Detach</p><p class="value">${preview.summary?.detach || 0}</p></div>
+            <div class="info-row"><p class="label-sm">Conflicts</p><p class="value">${preview.summary?.conflicts || 0}</p></div>
+            <div class="info-row"><p class="label-sm">Warnings</p><p class="value">${preview.summary?.warnings || 0}</p></div>
+          </div>
+        </div>
+
+        <div class="panel">
+          <p class="eyebrow">${t('ui.plans.warnings', {}, 'Warnings')}</p>
+          ${(warnings.length
+            ? warnings.map((warning) => `<p style="font-size:var(--text-sm);color:var(--text-secondary)">${esc(warning)}</p>`).join('')
+            : `<p style="font-size:var(--text-sm);color:var(--text-secondary)">No parser warnings.</p>`)}
+        </div>
+      </div>
+
+      <div class="panel">
+        <p class="eyebrow">${t('ui.plans.operations', {}, 'Preview operations')}</p>
+        <div class="stack stack-sm">
+          ${operations.length
+            ? operations.map((operation) => `
+              <div class="task-card" style="cursor:default">
+                <div style="display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start;flex-wrap:wrap">
+                  <div>
+                    <strong class="task-card-title">${esc(operation.title || operation.taskId || operation.externalNodeId)}</strong>
+                    <span class="task-card-id">${esc(operation.taskId || operation.externalNodeId || '')}</span>
+                  </div>
+                  <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
+                    <span class="badge ${(operation.type === 'conflict') ? 'badge-danger' : 'badge-muted'}">${esc(operation.type)}</span>
+                    ${operation.conflictFields?.length ? `<span class="badge badge-danger">${esc(operation.conflictFields.join(', '))}</span>` : ''}
+                    ${operation.updatedFields?.length ? `<span class="badge badge-muted">${esc(operation.updatedFields.join(', '))}</span>` : ''}
+                  </div>
+                </div>
+              </div>
+            `).join('')
+            : `<div class="empty-state">${t('ui.plans.noPreview', {}, 'No preview operations available.')}</div>`}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderScanResults() {
+  if (!_scanResults.length) return '';
+  return `
+    <div class="panel">
+      <p class="eyebrow">${t('ui.plans.scanResults', {}, 'Detected candidates')}</p>
+      <div class="stack stack-sm">
+        ${_scanResults.map((item) => `
+          <div class="task-card" style="cursor:default">
+            <div style="display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start;flex-wrap:wrap">
+              <div>
+                <strong class="task-card-title">${esc(item.title)}</strong>
+                <span class="task-card-id">${esc(item.path)}</span>
+              </div>
+              <div style="display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap">
+                <span class="badge badge-muted">${esc(item.adapter)}</span>
+                <span class="badge badge-muted">${Math.round((item.confidence || 0) * 100)}%</span>
+                <button class="btn btn-ghost btn-sm" type="button" data-plan-import-path="${esc(item.path)}" data-plan-import-adapter="${esc(item.adapter)}">
+                  ${icon('download', 14)} ${t('ui.plans.import', {}, 'Import')}
+                </button>
+              </div>
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    </div>
+  `;
+}
+
+export async function render() {
+  const payload = state.getPayload();
+  const sourcesResult = await api.getPlans().catch(() => ({ sources: payload?.control?.meta?.plans?.sources || [] }));
+  const sources = sourcesResult.sources || [];
+
+  if (!_selectedSourceId && sources.length) {
+    _selectedSourceId = sources[0].id;
+  }
+
+  if (_selectedSourceId) {
+    _currentSource = await api.getPlan(_selectedSourceId).catch(() => null);
+  } else {
+    _currentSource = null;
+  }
+
+  return `
+    <section class="view-section view-enter">
+      <div class="section-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3)">
+        <div>
+          <p class="section-eyebrow">${esc(payload?.project?.name || 'TrackOps')}</p>
+          <h2 class="section-title">${t('ui.plans.title', {}, 'Plans')}</h2>
+        </div>
+      </div>
+
+      <div class="grid-split">
+        <div class="stack stack-md">
+          <div class="panel">
+            <p class="eyebrow">${t('ui.plans.importWizard', {}, 'Import wizard')}</p>
+            <form id="plans-import-form" class="stack stack-sm">
+              <div class="field">
+                <label for="plan-file">${t('ui.plans.file', {}, 'Plan file')}</label>
+                <input id="plan-file" type="text" placeholder="docs/implementation-plan.md" />
+              </div>
+              <div class="field-row">
+                <div class="field">
+                  <label for="plan-adapter">${t('ui.plans.adapter', {}, 'Adapter')}</label>
+                  <select id="plan-adapter">
+                    <option value="auto">auto</option>
+                    <option value="canonical">canonical</option>
+                    <option value="claude">claude</option>
+                    <option value="codex">codex</option>
+                    <option value="antigravity">antigravity</option>
+                  </select>
+                </div>
+                <div class="field">
+                  <label for="plan-source-id">${t('ui.plans.sourceId', {}, 'Source id')}</label>
+                  <input id="plan-source-id" type="text" placeholder="checkout-redesign-plan" />
+                </div>
+              </div>
+              <div class="form-actions" style="justify-content:flex-start">
+                <button class="btn btn-primary" type="submit">${icon('download', 14)} ${t('ui.plans.import', {}, 'Import')}</button>
+                <button class="btn btn-ghost" type="button" id="plans-scan-btn">${icon('search', 14)} ${t('ui.plans.scan', {}, 'Scan')}</button>
+              </div>
+            </form>
+          </div>
+
+          ${renderScanResults()}
+
+          <div class="stack stack-sm" id="plans-source-list">
+            ${sources.length
+              ? sources.map((source) => renderSourceCard(source)).join('')
+              : `<div class="empty-state">${t('ui.plans.empty', {}, 'No imported plans yet.')}</div>`}
+          </div>
+        </div>
+
+        <div id="plans-preview-panel">
+          ${renderPreview(_currentSource)}
+        </div>
+      </div>
+    </section>
+  `;
+}
+
+export function bindEvents() {
+  document.querySelectorAll('[data-plan-source]').forEach((button) => {
+    button.addEventListener('click', async () => {
+      _selectedSourceId = button.dataset.planSource;
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    });
+  });
+
+  document.getElementById('plans-scan-btn')?.addEventListener('click', async () => {
+    try {
+      const result = await api.scanPlans();
+      _scanResults = result.candidates || [];
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (error) {
+      flash(error.message, 'error');
+    }
+  });
+
+  document.querySelectorAll('[data-plan-import-path]').forEach((button) => {
+    button.addEventListener('click', async () => {
+      try {
+        await api.importPlan({ file: button.dataset.planImportPath, adapter: button.dataset.planImportAdapter || 'auto' });
+        _selectedSourceId = null;
+        _scanResults = [];
+        flash(t('ui.plans.imported', {}, 'Plan imported.'), 'success');
+        window.dispatchEvent(new CustomEvent('ops:refresh'));
+      } catch (error) {
+        flash(error.message, 'error');
+      }
+    });
+  });
+
+  document.getElementById('plans-import-form')?.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const file = document.getElementById('plan-file')?.value.trim();
+    const adapter = document.getElementById('plan-adapter')?.value || 'auto';
+    const sourceId = document.getElementById('plan-source-id')?.value.trim();
+    if (!file) {
+      flash(t('ui.plans.fileRequired', {}, 'Plan file is required.'), 'error');
+      return;
+    }
+    try {
+      const result = await api.importPlan({ file, adapter, sourceId: sourceId || undefined });
+      _selectedSourceId = result.source?.id || _selectedSourceId;
+      _scanResults = [];
+      flash(t('ui.plans.imported', {}, 'Plan imported.'), 'success');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (error) {
+      flash(error.message, 'error');
+    }
+  });
+
+  document.querySelector('[data-plan-apply]')?.addEventListener('click', async (event) => {
+    const sourceId = event.currentTarget.dataset.planApply;
+    try {
+      await api.applyPlan(sourceId, { conflicts: 'abort', removed: 'detach' });
+      flash(t('ui.plans.applied', {}, 'Plan applied.'), 'success');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (error) {
+      flash(error.message, 'error');
+    }
+  });
+
+  document.querySelector('[data-plan-unlink]')?.addEventListener('click', async (event) => {
+    const sourceId = event.currentTarget.dataset.planUnlink;
+    try {
+      await api.unlinkPlan(sourceId, { keepTasks: true });
+      _selectedSourceId = null;
+      flash(t('ui.plans.unlinked', {}, 'Plan unlinked.'), 'success');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (error) {
+      flash(error.message, 'error');
+    }
+  });
+}