trackops 2.0.4 → 2.0.5

package/ui/js/views/settings.js

@@ -1,331 +1,331 @@
-/**
- * settings.js — Vista de configuración del proyecto
- */
-
-import { icon } from '../icons.js';
-import * as state from '../state.js';
-import * as api from '../api.js';
-import { flash } from './flash.js';
-import { esc, formatDate } from '../utils.js';
-import { t } from '../i18n.js';
-import * as skillsView from './skills.js';
-
-function applyLocaleState(payload) {
-  if (!payload) return;
-  state.update('payload', payload);
-  if (payload.i18n) {
-    state.update({
-      phases: payload.i18n.phases || [],
-      statusLabels: payload.i18n.statusLabels || {},
-      locale: payload.i18n.locale || 'es',
-      messages: payload.i18n.messages || {},
-    });
-  }
-}
-
-function renderWorkspacePanel(payload) {
-  const project = payload?.project;
-  if (!project) return '';
-
-  return `
-    <div class="glass-card panel">
-      <div class="panel-header">
-        <p class="panel-title">${t('ui.settings.workspaceTitle', {}, 'Workspace')}</p>
-        <span class="badge badge-muted">${esc(project.layout || 'legacy')}</span>
-      </div>
-      <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
-        <div class="info-row">
-          <p class="label-sm">${t('ui.settings.workspaceRoot', {}, 'Workspace root')}</p>
-          <p class="value">${esc(project.workspaceRoot || project.root || '—')}</p>
-        </div>
-        <div class="info-row">
-          <p class="label-sm">${t('ui.settings.appRoot', {}, 'App root')}</p>
-          <p class="value">${esc(project.appRoot || project.root || '—')}</p>
-        </div>
-        <div class="info-row">
-          <p class="label-sm">${t('ui.settings.opsRoot', {}, 'Ops root')}</p>
-          <p class="value">${esc(project.opsRoot || project.root || '—')}</p>
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-function renderEnvPanel(envState) {
-  if (!envState) return '';
-
-  const required = Array.isArray(envState.requiredKeys) ? envState.requiredKeys : [];
-  const present = Array.isArray(envState.presentKeys) ? envState.presentKeys : [];
-  const missing = Array.isArray(envState.missingKeys) ? envState.missingKeys : [];
-  const files = envState.files || {};
-
-  return `
-    <div class="glass-card panel">
-      <div class="panel-header">
-        <p class="panel-title">${t('ui.settings.envTitle', {}, 'Environment')}</p>
-        <span class="badge badge-${missing.length ? 'warning' : 'success'}">${missing.length ? t('ui.settings.envMissingBadge', { count: missing.length }, `${missing.length} missing`) : t('ui.settings.envHealthyBadge', {}, 'Ready')}</span>
-      </div>
-      <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
-        <div class="info-row">
-          <p class="label-sm">${t('ui.settings.envBridgeMode', {}, 'Bridge mode')}</p>
-          <p class="value">${esc(envState.bridgeMode || 'none')}</p>
-        </div>
-        <div class="info-row">
-          <p class="label-sm">${t('ui.settings.envRootFile', {}, 'Root .env')}</p>
-          <p class="value">${esc(files.rootEnv || '—')}</p>
-        </div>
-        <div class="info-row">
-          <p class="label-sm">${t('ui.settings.envExampleFile', {}, '.env.example')}</p>
-          <p class="value">${esc(files.rootExample || '—')}</p>
-        </div>
-        <div class="info-row">
-          <p class="label-sm">${t('ui.settings.envAppBridge', {}, 'App bridge')}</p>
-          <p class="value">${esc(files.appBridge || '—')}</p>
-        </div>
-        <div class="info-row">
-          <p class="label-sm">${t('ui.settings.envRequiredKeys', {}, 'Required keys')}</p>
-          <p class="value">${required.length ? esc(required.join(', ')) : '—'}</p>
-        </div>
-        <div class="info-row">
-          <p class="label-sm">${t('ui.settings.envPresentKeys', {}, 'Present keys')}</p>
-          <p class="value">${present.length ? esc(present.join(', ')) : '—'}</p>
-        </div>
-        <div class="info-row">
-          <p class="label-sm">${t('ui.settings.envMissingKeys', {}, 'Missing keys')}</p>
-          <p class="value">${missing.length ? esc(missing.join(', ')) : t('ui.settings.envNoMissing', {}, 'None')}</p>
-        </div>
-        <div class="info-row">
-          <p class="label-sm">${t('ui.settings.envLastAudit', {}, 'Last audit')}</p>
-          <p class="value">${envState.lastAuditAt ? formatDate(envState.lastAuditAt, 'date') : '—'}</p>
-        </div>
-        <button class="btn btn-ghost btn-sm" type="button" id="sync-env-btn">
-          ${icon('sync', 14)} ${t('ui.settings.envSync', {}, 'Sync env')}
-        </button>
-      </div>
-    </div>
-  `;
-}
-
-export async function render() {
-  const payload   = state.getPayload();
-  const control   = payload?.control;
-  const runtime   = payload?.runtime;
-  const docsDirty = payload?.docsDirty || [];
-  const envState  = payload?.env;
-
-  return `
-    <div class="view-enter">
-      <div class="section-header">
-        <div class="section-header-left">
-          <p class="eyebrow">${t('ui.settings.eyebrow', {}, 'Settings')}</p>
-          <h2>${t('ui.settings.title', {}, 'Project settings')}</h2>
-        </div>
-      </div>
-
-      <div class="grid-2" style="align-items:start">
-
-        <!-- Col izquierda -->
-        <div style="display:flex;flex-direction:column;gap:var(--space-4)">
-
-          <!-- Info del proyecto activo -->
-          ${control ? `
-            <div class="glass-card panel">
-              <div class="panel-header">
-                <p class="panel-title">Proyecto Activo</p>
-                <span class="badge badge-success">Activo</span>
-              </div>
-              <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
-                <div class="info-row">
-                  <p class="label-sm">Nombre</p>
-                  <p class="value">${esc(control.meta?.projectName || '—')}</p>
-                </div>
-                <div class="info-row">
-                  <p class="label-sm">Ruta</p>
-                  <p class="value">${esc(payload?.project?.root || '—')}</p>
-                </div>
-                <div class="info-row">
-                  <p class="label-sm">Fase activa</p>
-                  <p class="value">${esc(payload?.derived?.activePhase?.id || '—')} — ${esc(payload?.derived?.activePhase?.label || '')}</p>
-                </div>
-                <div class="info-row">
-                  <p class="label-sm">Foco actual</p>
-                  <p class="value">${esc(control.meta?.currentFocus || '—')}</p>
-                </div>
-                <div class="info-row">
-                  <p class="label-sm">Entrega objetivo</p>
-                  <p class="value">${esc(control.meta?.deliveryTarget || '—')}</p>
-                </div>
-                <div class="info-row">
-                  <p class="label-sm">Última actualización</p>
-                  <p class="value">${formatDate(control.meta?.updatedAt || '', 'date')}</p>
-                </div>
-                <div class="info-row">
-                  <p class="label-sm">${t('ui.topbar.language', {}, 'Language')}</p>
-                  <div class="project-select-wrapper locale-select-wrapper">
-                    <select id="settings-locale-select" aria-label="${t('ui.topbar.languageAria', {}, 'Select dashboard language')}">
-                      <option value="es" ${(payload?.i18n?.locale || 'es') === 'es' ? 'selected' : ''}>${t('ui.topbar.languageEs', {}, 'ES')}</option>
-                      <option value="en" ${(payload?.i18n?.locale || 'es') === 'en' ? 'selected' : ''}>${t('ui.topbar.languageEn', {}, 'EN')}</option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ` : `<p class="text-muted">${t('ui.settings.noProject', {}, 'No project loaded.')}</p>`}
-
-          ${renderWorkspacePanel(payload)}
-
-          <!-- Estado del Repo -->
-          ${runtime ? `
-            <div class="glass-card panel">
-              <div class="panel-header">
-                <p class="panel-title">Repositorio</p>
-                <span class="badge badge-${runtime.clean ? 'success' : 'warning'}">${runtime.clean ? 'Limpio' : 'Con cambios'}</span>
-              </div>
-              <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
-                <div class="info-row">
-                  <p class="label-sm">Rama</p>
-                  <p class="value">${esc(runtime.branch || '—')}</p>
-                </div>
-                <div class="info-row">
-                  <p class="label-sm">Estado</p>
-                  <p class="value">${runtime.staged}s ${runtime.unstaged}u ${runtime.untracked}?</p>
-                </div>
-                ${runtime.lastCommit ? `
-                  <div class="info-row">
-                    <p class="label-sm">Último commit</p>
-                    <p class="value">${esc(runtime.lastCommit.shortHash)} · ${esc(runtime.lastCommit.subject)}</p>
-                  </div>
-                  <div class="info-row">
-                    <p class="label-sm">Fecha commit</p>
-                    <p class="value">${formatDate(runtime.lastCommit.date, 'date')}</p>
-                  </div>
-                ` : ''}
-                <div class="info-row">
-                  <p class="label-sm">Divergencia</p>
-                  <p class="value">↑ ${runtime.ahead || 0} por delante · ↓ ${runtime.behind || 0} por detrás</p>
-                </div>
-              </div>
-            </div>
-          ` : ''}
-
-        </div>
-
-        <!-- Col derecha -->
-        <div style="display:flex;flex-direction:column;gap:var(--space-4)">
-
-          <!-- Docs Drift -->
-          <div class="glass-card panel">
-            <div class="panel-header">
-              <p class="panel-title">Documentación</p>
-              <span class="badge badge-${docsDirty.length ? 'warning' : 'success'}">${docsDirty.length ? `${docsDirty.length} desfasados` : 'Sincronizados'}</span>
-            </div>
-            <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
-              ${docsDirty.length > 0 ? `
-                <p style="font-size:var(--text-sm);color:var(--text-secondary)">Los siguientes archivos de documentación están desactualizados:</p>
-                <div class="stack stack-sm">
-                  ${docsDirty.map(d => `
-                    <div class="info-row"><p class="value">${esc(d)}</p></div>
-                  `).join('')}
-                </div>
-              ` : `
-                <p style="font-size:var(--text-sm);color:var(--success)">✓ Todos los archivos de documentación están sincronizados.</p>
-              `}
-              <button class="btn btn-ghost btn-sm" type="button" id="sync-docs-btn">
-                ${icon('sync', 14)} Sincronizar ahora
-              </button>
-            </div>
-          </div>
-
-          ${renderEnvPanel(envState)}
-
-          <!-- Milestones -->
-          ${control?.milestones?.length ? `
-            <div class="glass-card panel">
-              <div class="panel-header">
-                <p class="panel-title">Milestones</p>
-                <span class="badge badge-accent">${control.milestones.length}</span>
-              </div>
-              <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
-                ${control.milestones.map(m => `
-                  <div class="finding-item" style="border-left-color:var(--accent)">
-                    <p style="font-weight:700;font-size:var(--text-sm)">${esc(m.title)}</p>
-                    <p style="font-size:var(--text-xs);color:var(--text-muted)">${esc(m.date)}</p>
-                    <ul style="margin-top:var(--space-2);padding-left:1rem">
-                      ${(m.items || []).map(item => `<li style="font-size:var(--text-xs);color:var(--text-secondary)">${esc(item)}</li>`).join('')}
-                    </ul>
-                  </div>
-                `).join('')}
-              </div>
-            </div>
-          ` : ''}
-
-          <!-- Skills & Extensions -->
-          <div class="glass-card panel">
-            <div class="panel-header">
-              <h3 class="panel-title">${icon('zap', 16)} ${t('ui.settings.skills', {}, 'Skills & Extensions')}</h3>
-            </div>
-            <div class="panel-body" id="settings-skills-container">
-              <p style="color:var(--text-muted);font-size:var(--text-sm)">${t('ui.settings.skillsLoading', {}, 'Loading skills...')}</p>
-            </div>
-          </div>
-
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-export async function bindEvents() {
-  // Sync docs
-  document.getElementById('sync-docs-btn')?.addEventListener('click', async () => {
-    try {
-      await api.syncDocs();
-      flash('Documentación sincronizada.', 'success');
-      window.dispatchEvent(new CustomEvent('ops:refresh'));
-    } catch (err) {
-      flash(err.message, 'error');
-    }
-  });
-
-  document.getElementById('sync-env-btn')?.addEventListener('click', async () => {
-    try {
-      await api.syncEnv();
-      flash(t('ui.settings.envSynced', {}, 'Environment synced.'), 'success');
-      window.dispatchEvent(new CustomEvent('ops:refresh'));
-    } catch (err) {
-      flash(err.message, 'error');
-    }
-  });
-
-  document.getElementById('settings-locale-select')?.addEventListener('change', async e => {
-    const select = e.target;
-    const previousLocale = state.get('locale') || 'es';
-    const nextLocale = select.value;
-
-    if (nextLocale === previousLocale) return;
-
-    select.disabled = true;
-    try {
-      const result = await api.updateProjectLocale(nextLocale);
-      applyLocaleState(result.state);
-      flash(t('ui.topbar.localeUpdated', {}, 'Language updated.'), 'success');
-      window.dispatchEvent(new CustomEvent('ops:refresh'));
-    } catch (err) {
-      select.value = previousLocale;
-      flash(err.message, 'error');
-    } finally {
-      select.disabled = false;
-    }
-  });
-
-  // Load skills into the container
-  try {
-    const skillsHtml = await skillsView.render();
-    const container = document.getElementById('settings-skills-container');
-    if (container) container.innerHTML = skillsHtml;
-    skillsView.bindEvents();
-    if (typeof skillsView.loadData === 'function') skillsView.loadData();
-  } catch (e) { console.warn('Skills load failed:', e); }
-}
-
-export { bindEvents as bind };
+/**
+ * settings.js — Vista de configuración del proyecto
+ */
+
+import { icon } from '../icons.js';
+import * as state from '../state.js';
+import * as api from '../api.js';
+import { flash } from './flash.js';
+import { esc, formatDate } from '../utils.js';
+import { t } from '../i18n.js';
+import * as skillsView from './skills.js';
+
+function applyLocaleState(payload) {
+  if (!payload) return;
+  state.update('payload', payload);
+  if (payload.i18n) {
+    state.update({
+      phases: payload.i18n.phases || [],
+      statusLabels: payload.i18n.statusLabels || {},
+      locale: payload.i18n.locale || 'es',
+      messages: payload.i18n.messages || {},
+    });
+  }
+}
+
+function renderWorkspacePanel(payload) {
+  const project = payload?.project;
+  if (!project) return '';
+
+  return `
+    <div class="glass-card panel">
+      <div class="panel-header">
+        <p class="panel-title">${t('ui.settings.workspaceTitle', {}, 'Workspace')}</p>
+        <span class="badge badge-muted">${esc(project.layout || 'legacy')}</span>
+      </div>
+      <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.workspaceRoot', {}, 'Workspace root')}</p>
+          <p class="value">${esc(project.workspaceRoot || project.root || '—')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.appRoot', {}, 'App root')}</p>
+          <p class="value">${esc(project.appRoot || project.root || '—')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.opsRoot', {}, 'Ops root')}</p>
+          <p class="value">${esc(project.opsRoot || project.root || '—')}</p>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderEnvPanel(envState) {
+  if (!envState) return '';
+
+  const required = Array.isArray(envState.requiredKeys) ? envState.requiredKeys : [];
+  const present = Array.isArray(envState.presentKeys) ? envState.presentKeys : [];
+  const missing = Array.isArray(envState.missingKeys) ? envState.missingKeys : [];
+  const files = envState.files || {};
+
+  return `
+    <div class="glass-card panel">
+      <div class="panel-header">
+        <p class="panel-title">${t('ui.settings.envTitle', {}, 'Environment')}</p>
+        <span class="badge badge-${missing.length ? 'warning' : 'success'}">${missing.length ? t('ui.settings.envMissingBadge', { count: missing.length }, `${missing.length} missing`) : t('ui.settings.envHealthyBadge', {}, 'Ready')}</span>
+      </div>
+      <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envBridgeMode', {}, 'Bridge mode')}</p>
+          <p class="value">${esc(envState.bridgeMode || 'none')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envRootFile', {}, 'Root .env')}</p>
+          <p class="value">${esc(files.rootEnv || '—')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envExampleFile', {}, '.env.example')}</p>
+          <p class="value">${esc(files.rootExample || '—')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envAppBridge', {}, 'App bridge')}</p>
+          <p class="value">${esc(files.appBridge || '—')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envRequiredKeys', {}, 'Required keys')}</p>
+          <p class="value">${required.length ? esc(required.join(', ')) : '—'}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envPresentKeys', {}, 'Present keys')}</p>
+          <p class="value">${present.length ? esc(present.join(', ')) : '—'}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envMissingKeys', {}, 'Missing keys')}</p>
+          <p class="value">${missing.length ? esc(missing.join(', ')) : t('ui.settings.envNoMissing', {}, 'None')}</p>
+        </div>
+        <div class="info-row">
+          <p class="label-sm">${t('ui.settings.envLastAudit', {}, 'Last audit')}</p>
+          <p class="value">${envState.lastAuditAt ? formatDate(envState.lastAuditAt, 'date') : '—'}</p>
+        </div>
+        <button class="btn btn-ghost btn-sm" type="button" id="sync-env-btn">
+          ${icon('sync', 14)} ${t('ui.settings.envSync', {}, 'Sync env')}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+export async function render() {
+  const payload   = state.getPayload();
+  const control   = payload?.control;
+  const runtime   = payload?.runtime;
+  const docsDirty = payload?.docsDirty || [];
+  const envState  = payload?.env;
+
+  return `
+    <div class="view-enter">
+      <div class="section-header">
+        <div class="section-header-left">
+          <p class="eyebrow">${t('ui.settings.eyebrow', {}, 'Settings')}</p>
+          <h2>${t('ui.settings.title', {}, 'Project settings')}</h2>
+        </div>
+      </div>
+
+      <div class="grid-2" style="align-items:start">
+
+        <!-- Col izquierda -->
+        <div style="display:flex;flex-direction:column;gap:var(--space-4)">
+
+          <!-- Info del proyecto activo -->
+          ${control ? `
+            <div class="glass-card panel">
+              <div class="panel-header">
+                <p class="panel-title">Proyecto Activo</p>
+                <span class="badge badge-success">Activo</span>
+              </div>
+              <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+                <div class="info-row">
+                  <p class="label-sm">Nombre</p>
+                  <p class="value">${esc(control.meta?.projectName || '—')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Ruta</p>
+                  <p class="value">${esc(payload?.project?.root || '—')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Fase activa</p>
+                  <p class="value">${esc(payload?.derived?.activePhase?.id || '—')} — ${esc(payload?.derived?.activePhase?.label || '')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Foco actual</p>
+                  <p class="value">${esc(control.meta?.currentFocus || '—')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Entrega objetivo</p>
+                  <p class="value">${esc(control.meta?.deliveryTarget || '—')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Última actualización</p>
+                  <p class="value">${formatDate(control.meta?.updatedAt || '', 'date')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">${t('ui.topbar.language', {}, 'Language')}</p>
+                  <div class="project-select-wrapper locale-select-wrapper">
+                    <select id="settings-locale-select" aria-label="${t('ui.topbar.languageAria', {}, 'Select dashboard language')}">
+                      <option value="es" ${(payload?.i18n?.locale || 'es') === 'es' ? 'selected' : ''}>${t('ui.topbar.languageEs', {}, 'ES')}</option>
+                      <option value="en" ${(payload?.i18n?.locale || 'es') === 'en' ? 'selected' : ''}>${t('ui.topbar.languageEn', {}, 'EN')}</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ` : `<p class="text-muted">${t('ui.settings.noProject', {}, 'No project loaded.')}</p>`}
+
+          ${renderWorkspacePanel(payload)}
+
+          <!-- Estado del Repo -->
+          ${runtime ? `
+            <div class="glass-card panel">
+              <div class="panel-header">
+                <p class="panel-title">Repositorio</p>
+                <span class="badge badge-${runtime.clean ? 'success' : 'warning'}">${runtime.clean ? 'Limpio' : 'Con cambios'}</span>
+              </div>
+              <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+                <div class="info-row">
+                  <p class="label-sm">Rama</p>
+                  <p class="value">${esc(runtime.branch || '—')}</p>
+                </div>
+                <div class="info-row">
+                  <p class="label-sm">Estado</p>
+                  <p class="value">${runtime.staged}s ${runtime.unstaged}u ${runtime.untracked}?</p>
+                </div>
+                ${runtime.lastCommit ? `
+                  <div class="info-row">
+                    <p class="label-sm">Último commit</p>
+                    <p class="value">${esc(runtime.lastCommit.shortHash)} · ${esc(runtime.lastCommit.subject)}</p>
+                  </div>
+                  <div class="info-row">
+                    <p class="label-sm">Fecha commit</p>
+                    <p class="value">${formatDate(runtime.lastCommit.date, 'date')}</p>
+                  </div>
+                ` : ''}
+                <div class="info-row">
+                  <p class="label-sm">Divergencia</p>
+                  <p class="value">↑ ${runtime.ahead || 0} por delante · ↓ ${runtime.behind || 0} por detrás</p>
+                </div>
+              </div>
+            </div>
+          ` : ''}
+
+        </div>
+
+        <!-- Col derecha -->
+        <div style="display:flex;flex-direction:column;gap:var(--space-4)">
+
+          <!-- Docs Drift -->
+          <div class="glass-card panel">
+            <div class="panel-header">
+              <p class="panel-title">Documentación</p>
+              <span class="badge badge-${docsDirty.length ? 'warning' : 'success'}">${docsDirty.length ? `${docsDirty.length} desfasados` : 'Sincronizados'}</span>
+            </div>
+            <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+              ${docsDirty.length > 0 ? `
+                <p style="font-size:var(--text-sm);color:var(--text-secondary)">Los siguientes archivos de documentación están desactualizados:</p>
+                <div class="stack stack-sm">
+                  ${docsDirty.map(d => `
+                    <div class="info-row"><p class="value">${esc(d)}</p></div>
+                  `).join('')}
+                </div>
+              ` : `
+                <p style="font-size:var(--text-sm);color:var(--success)">✓ Todos los archivos de documentación están sincronizados.</p>
+              `}
+              <button class="btn btn-ghost btn-sm" type="button" id="sync-docs-btn">
+                ${icon('sync', 14)} Sincronizar ahora
+              </button>
+            </div>
+          </div>
+
+          ${renderEnvPanel(envState)}
+
+          <!-- Milestones -->
+          ${control?.milestones?.length ? `
+            <div class="glass-card panel">
+              <div class="panel-header">
+                <p class="panel-title">Milestones</p>
+                <span class="badge badge-accent">${control.milestones.length}</span>
+              </div>
+              <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
+                ${control.milestones.map(m => `
+                  <div class="finding-item" style="border-left-color:var(--accent)">
+                    <p style="font-weight:700;font-size:var(--text-sm)">${esc(m.title)}</p>
+                    <p style="font-size:var(--text-xs);color:var(--text-muted)">${esc(m.date)}</p>
+                    <ul style="margin-top:var(--space-2);padding-left:1rem">
+                      ${(m.items || []).map(item => `<li style="font-size:var(--text-xs);color:var(--text-secondary)">${esc(item)}</li>`).join('')}
+                    </ul>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          ` : ''}
+
+          <!-- Skills & Extensions -->
+          <div class="glass-card panel">
+            <div class="panel-header">
+              <h3 class="panel-title">${icon('zap', 16)} ${t('ui.settings.skills', {}, 'Skills & Extensions')}</h3>
+            </div>
+            <div class="panel-body" id="settings-skills-container">
+              <p style="color:var(--text-muted);font-size:var(--text-sm)">${t('ui.settings.skillsLoading', {}, 'Loading skills...')}</p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export async function bindEvents() {
+  // Sync docs
+  document.getElementById('sync-docs-btn')?.addEventListener('click', async () => {
+    try {
+      await api.syncDocs();
+      flash('Documentación sincronizada.', 'success');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (err) {
+      flash(err.message, 'error');
+    }
+  });
+
+  document.getElementById('sync-env-btn')?.addEventListener('click', async () => {
+    try {
+      await api.syncEnv();
+      flash(t('ui.settings.envSynced', {}, 'Environment synced.'), 'success');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (err) {
+      flash(err.message, 'error');
+    }
+  });
+
+  document.getElementById('settings-locale-select')?.addEventListener('change', async e => {
+    const select = e.target;
+    const previousLocale = state.get('locale') || 'es';
+    const nextLocale = select.value;
+
+    if (nextLocale === previousLocale) return;
+
+    select.disabled = true;
+    try {
+      const result = await api.updateProjectLocale(nextLocale);
+      applyLocaleState(result.state);
+      flash(t('ui.topbar.localeUpdated', {}, 'Language updated.'), 'success');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (err) {
+      select.value = previousLocale;
+      flash(err.message, 'error');
+    } finally {
+      select.disabled = false;
+    }
+  });
+
+  // Load skills into the container
+  try {
+    const skillsHtml = await skillsView.render();
+    const container = document.getElementById('settings-skills-container');
+    if (container) container.innerHTML = skillsHtml;
+    skillsView.bindEvents();
+    if (typeof skillsView.loadData === 'function') skillsView.loadData();
+  } catch (e) { console.warn('Skills load failed:', e); }
+}
+
+export { bindEvents as bind };