trackops 2.0.3 → 2.0.4

package/ui/js/views/settings.js

@@ -1,24 +1,25 @@
-/**
- * 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';
-
+/**
+ * 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 || {},
-    });
+  if (payload.i18n) {
+    state.update({
+      phases: payload.i18n.phases || [],
+      statusLabels: payload.i18n.statusLabels || {},
+      locale: payload.i18n.locale || 'es',
+      messages: payload.i18n.messages || {},
+    });
   }
 }
 
@@ -27,7 +28,7 @@ function renderWorkspacePanel(payload) {
   if (!project) return '';
 
   return `
-    <div class="panel">
+    <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>
@@ -59,7 +60,7 @@ function renderEnvPanel(envState) {
   const files = envState.files || {};
 
   return `
-    <div class="panel">
+    <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>
@@ -107,68 +108,66 @@ function renderEnvPanel(envState) {
 
 export async function render() {
   const payload   = state.getPayload();
-  const projects  = state.get('projects');
-  const currentId = state.get('currentProjectId');
   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 -->
+
+  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="panel">
+            <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>
+                <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>`}
@@ -177,103 +176,60 @@ export async function render() {
 
           <!-- Estado del Repo -->
           ${runtime ? `
-            <div class="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)">
-
-          <!-- Portfolio -->
-          <div class="panel">
-            <div class="panel-header">
-              <p class="panel-title">Portfolio de Proyectos</p>
-              <span class="badge badge-muted">${projects.length}</span>
-            </div>
-            <div class="panel-body" style="display:flex;flex-direction:column;gap:var(--space-3)">
-              ${projects.length === 0
-                ? '<div class="empty-state">Sin proyectos registrados.</div>'
-                : projects.map(p => `
-                    <div class="project-row ${p.id === currentId ? 'is-active' : ''}">
-                      <div class="project-row-info">
-                        <p class="project-name">${esc(p.name)}</p>
-                        <p class="project-path">${esc(p.root)}</p>
-                      </div>
-                      <div class="project-row-actions">
-                        ${p.available
-                          ? `<span class="badge badge-success">Disponible</span>`
-                          : `<span class="badge badge-warning" title="No se puede cargar el control">No disponible</span>`}
-                        ${p.id === currentId
-                          ? `<span class="badge badge-accent">Activo</span>`
-                          : p.available ? `<button class="btn btn-ghost btn-sm" type="button" data-switch="${esc(p.id)}">Abrir</button>` : ''
-                        }
-                      </div>
-                    </div>
-                  `).join('')
-              }
-
-              <!-- Registrar nuevo -->
-              <div style="margin-top:var(--space-2)">
-                <div class="field">
-                  <label for="new-project-path">Registrar proyecto existente</label>
-                  <input id="new-project-path" type="text" placeholder="/ruta/al/proyecto" />
-                </div>
-                <div class="form-actions" style="margin-top:var(--space-2)">
-                  <button class="btn btn-ghost btn-sm" type="button" id="register-project-btn">
-                    ${icon('plus', 14)} Registrar
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Docs Drift -->
-          <div class="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>
-              `}
+            <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>
@@ -284,64 +240,49 @@ export async function render() {
 
           <!-- Milestones -->
           ${control?.milestones?.length ? `
-            <div class="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>
-          ` : ''}
-
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-export function bindEvents() {
-  // Switch project
-  document.querySelectorAll('[data-switch]').forEach(btn => {
-    btn.addEventListener('click', () => {
-      const id = btn.dataset.switch;
-      state.update('currentProjectId', id);
-      localStorage.setItem('ops-dashboard-project', id);
-      window.dispatchEvent(new CustomEvent('ops:refresh'));
-    });
-  });
-
-  // Registrar proyecto
-  document.getElementById('register-project-btn')?.addEventListener('click', async () => {
-    const input = document.getElementById('new-project-path');
-    const root  = input?.value.trim();
-    if (!root) { flash(t('ui.settings.enterPath', {}, 'Enter the project path.'), 'warning'); return; }
-    try {
-      await api.registerProject(root);
-      flash('Proyecto registrado.', 'success');
-      if (input) input.value = '';
-      window.dispatchEvent(new CustomEvent('ops:refresh'));
-    } catch (err) {
-      flash(err.message, 'error');
-    }
-  });
-
-  // Sync docs
+            <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) {
+    } catch (err) {
       flash(err.message, 'error');
     }
   });
@@ -357,25 +298,34 @@ export function bindEvents() {
   });
 
   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;
-    }
-  });
-}
-
-export { bindEvents as bind };
+    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 };

package/ui/js/views/sidebar.js

@@ -1,5 +1,8 @@
 /**
- * sidebar.js — Sidebar de navegación lateral
+ * sidebar.js — Glassmorphism sidebar with collapsed icon-strip layout
+ *
+ * 6 main nav items + 2 footer actions.
+ * CSS handles collapse/expand on hover; JS renders structure and manages badges.
  */
 
 import { icon } from '../icons.js';
@@ -8,23 +11,24 @@ import * as consoleLogger from '../console-logger.js';
 import * as onboarding from '../onboarding.js';
 import { t } from '../i18n.js';
 
-/** Renderiza el sidebar completo */
+const NAV_ITEMS = [
+  { id: 'projects',   label: 'Projects',   icon: 'folder' },
+  { id: 'dashboard',  label: 'Dashboard',  icon: 'dashboard' },
+  { id: 'tasks',      label: 'Tasks',      icon: 'tasks',    badge: true },
+  { id: 'timeline',   label: 'Timeline',   icon: 'timeline' },
+  { id: 'terminal',   label: 'Terminal',   icon: 'terminal2' },
+  { id: 'settings',   label: 'Settings',   icon: 'settings' },
+];
+
+const FOOTER_ITEMS = [
+  { id: 'help',    label: 'Help & Tour',  icon: 'help',    action: 'tour' },
+  { id: 'console', label: 'Logs',         icon: 'console', action: 'console', badge: 'error' },
+];
+
+/** Renders the full sidebar */
 export function render() {
   const el = document.getElementById('sidebar');
   if (!el) return;
-  const navItems = [
-    { id: 'overview',   label: t('ui.nav.overview', {}, 'Overview'), icon: 'dashboard', section: 'menu' },
-    { id: 'tasks',      label: t('ui.nav.tasks', {}, 'Tasks'), icon: 'tasks', section: 'menu', badge: true },
-    { id: 'board',      label: t('ui.nav.board', {}, 'Board'), icon: 'board', section: 'menu' },
-    { id: 'execution',  label: t('ui.nav.execution', {}, 'Execution'), icon: 'execution', section: 'menu' },
-    { id: 'skills',     label: t('ui.nav.skills', {}, 'Skills'), icon: 'zap', section: 'menu' },
-    { id: 'insights',   label: t('ui.nav.insights', {}, 'Insights'), icon: 'insights', section: 'menu' },
-  ];
-  const generalItems = [
-    { id: 'settings', label: t('ui.nav.settings', {}, 'Settings'), icon: 'settings' },
-    { id: 'help', label: t('ui.nav.help', {}, 'Help & Tour'), icon: 'help', action: 'tour' },
-    { id: 'console', label: t('ui.nav.logs', {}, 'Logs'), icon: 'console', action: 'console', badge: 'error' },
-  ];
 
   el.innerHTML = `
     <nav class="sidebar" aria-label="${t('ui.sidebar.aria', {}, 'Main navigation')}">
@@ -36,18 +40,17 @@ export function render() {
         <span class="sidebar-logo-name">TrackOps</span>
       </a>
 
-      <!-- MENU -->
+      <!-- Menu -->
       <div class="sidebar-section">
         <p class="sidebar-section-label">${t('ui.sidebar.menu', {}, 'Menu')}</p>
         <ul class="sidebar-nav" role="list">
-          ${navItems.map(item => _renderNavItem(item)).join('')}
+          ${NAV_ITEMS.map(item => _renderNavItem(item)).join('')}
         </ul>
       </div>
 
-      <!-- GENERAL -->
+      <!-- Footer -->
       <div class="sidebar-footer">
-        <p class="sidebar-section-label" style="padding-bottom:var(--space-2)">${t('ui.sidebar.general', {}, 'General')}</p>
-        ${generalItems.map(item => _renderGeneralItem(item)).join('')}
+        ${FOOTER_ITEMS.map(item => _renderFooterItem(item)).join('')}
       </div>
     </nav>
   `;
@@ -58,37 +61,41 @@ export function render() {
 function _renderNavItem(item) {
   const activeView  = state.get('activeView');
   const isActive    = activeView === item.id;
+  const label       = t(`ui.nav.${item.id}`, {}, item.label);
   const pendingCount = _getPendingCount(item);
 
   return `
     <li role="listitem">
       <button
-        class="nav-item ${isActive ? 'is-active' : ''}"
+        class="nav-item${isActive ? ' is-active' : ''}"
         data-view="${item.id}"
+        data-tooltip="${label}"
         type="button"
         aria-current="${isActive ? 'page' : 'false'}"
-        aria-label="${item.label}${pendingCount ? `, ${t('ui.sidebar.pendingCount', { count: pendingCount }, `${pendingCount} pending`)}` : ''}"
+        aria-label="${label}${pendingCount ? `, ${t('ui.sidebar.pendingCount', { count: pendingCount }, `${pendingCount} pending`)}` : ''}"
       >
         <span class="nav-item-icon" aria-hidden="true">${icon(item.icon, 18)}</span>
-        <span class="nav-item-label">${item.label}</span>
+        <span class="nav-item-label">${label}</span>
         ${pendingCount ? `<span class="nav-item-badge" aria-label="${t('ui.sidebar.tasksBadge', { count: pendingCount }, `${pendingCount} tasks`)}">${pendingCount}</span>` : ''}
       </button>
     </li>
   `;
 }
 
-function _renderGeneralItem(item) {
+function _renderFooterItem(item) {
+  const label = t(`ui.nav.${item.id}`, {}, item.label);
+
   return `
     <button
       class="nav-item"
-      data-action="${item.action || ''}"
-      data-view="${item.action ? '' : item.id}"
+      data-action="${item.action}"
+      data-tooltip="${label}"
       type="button"
-      aria-label="${item.label}"
-      ${item.action === 'console' ? 'id="sidebar-console-btn"' : ''}
+      aria-label="${label}"
+      ${item.id === 'console' ? 'id="sidebar-console-btn"' : ''}
     >
       <span class="nav-item-icon" aria-hidden="true">${icon(item.icon, 18)}</span>
-      <span class="nav-item-label">${item.label}</span>
+      <span class="nav-item-label">${label}</span>
       ${item.badge === 'error' ? `<span class="nav-item-badge danger" id="sidebar-console-badge" aria-label="${t('ui.sidebar.errors', {}, 'errors')}" style="display:none">0</span>` : ''}
     </button>
   `;
@@ -103,7 +110,6 @@ function _getPendingCount(item) {
 }
 
 function _bindEvents(el) {
-  // Acciones especiales (no nav-view)
   el.addEventListener('click', e => {
     const btn = e.target.closest('[data-action]');
     if (!btn) return;
@@ -117,7 +123,7 @@ function _bindEvents(el) {
   });
 }
 
-/** Refresca solo los badges sin re-renderizar todo */
+/** Refresh badges without full re-render */
 export function updateBadges() {
   const payload = state.getPayload();
   if (!payload) return;