trackops 1.0.0 → 1.0.1

package/ui/js/views/sidebar.js

@@ -0,0 +1,132 @@
+/**
+ * sidebar.js — Sidebar de navegación lateral
+ */
+
+import { icon } from '../icons.js';
+import * as state from '../state.js';
+import * as consoleLogger from '../console-logger.js';
+import * as onboarding from '../onboarding.js';
+
+const NAV_ITEMS = [
+  { id: 'overview',   label: 'Resumen',      icon: 'dashboard',  section: 'menu'    },
+  { id: 'tasks',      label: 'Tareas',       icon: 'tasks',      section: 'menu', badge: true },
+  { id: 'board',      label: 'Tablero',      icon: 'board',      section: 'menu'    },
+  { id: 'execution',  label: 'Ejecución',    icon: 'execution',  section: 'menu'    },
+  { id: 'skills',     label: 'Habilidades',  icon: 'zap',        section: 'menu'    },
+  { id: 'insights',   label: 'Analíticas',   icon: 'insights',   section: 'menu'    },
+];
+
+const GENERAL_ITEMS = [
+  { id: 'settings',   label: 'Configuración', icon: 'settings'   },
+  { id: 'help',       label: 'Ayuda & Tour', icon: 'help', action: 'tour' },
+  { id: 'console',    label: 'Registros',    icon: 'console', action: 'console', badge: 'error' },
+];
+
+/** Renderiza el sidebar completo */
+export function render() {
+  const el = document.getElementById('sidebar');
+  if (!el) return;
+
+  el.innerHTML = `
+    <nav class="sidebar" aria-label="Navegación principal">
+      <!-- Logo -->
+      <a href="#" class="sidebar-logo" aria-label="TrackOps — Ir al inicio">
+        <div class="sidebar-logo-icon" aria-hidden="true">
+          ${icon('infinity', 20)}
+        </div>
+        <span class="sidebar-logo-name">TrackOps</span>
+      </a>
+
+      <!-- MENU -->
+      <div class="sidebar-section">
+        <p class="sidebar-section-label">Menú</p>
+        <ul class="sidebar-nav" role="list">
+          ${NAV_ITEMS.map(item => _renderNavItem(item)).join('')}
+        </ul>
+      </div>
+
+      <!-- GENERAL -->
+      <div class="sidebar-footer">
+        <p class="sidebar-section-label" style="padding-bottom:var(--space-2)">General</p>
+        ${GENERAL_ITEMS.map(item => _renderGeneralItem(item)).join('')}
+      </div>
+    </nav>
+  `;
+
+  _bindEvents(el);
+}
+
+function _renderNavItem(item) {
+  const activeView  = state.get('activeView');
+  const isActive    = activeView === item.id;
+  const pendingCount = _getPendingCount(item);
+
+  return `
+    <li role="listitem">
+      <button
+        class="nav-item ${isActive ? 'is-active' : ''}"
+        data-view="${item.id}"
+        type="button"
+        aria-current="${isActive ? 'page' : 'false'}"
+        aria-label="${item.label}${pendingCount ? `, ${pendingCount} pendientes` : ''}"
+      >
+        <span class="nav-item-icon" aria-hidden="true">${icon(item.icon, 18)}</span>
+        <span class="nav-item-label">${item.label}</span>
+        ${pendingCount ? `<span class="nav-item-badge" aria-label="${pendingCount} tareas">${pendingCount}</span>` : ''}
+      </button>
+    </li>
+  `;
+}
+
+function _renderGeneralItem(item) {
+  return `
+    <button
+      class="nav-item"
+      data-action="${item.action || ''}"
+      data-view="${item.action ? '' : item.id}"
+      type="button"
+      aria-label="${item.label}"
+      ${item.action === '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>
+      ${item.badge === 'error' ? `<span class="nav-item-badge danger" id="sidebar-console-badge" aria-label="errores" style="display:none">0</span>` : ''}
+    </button>
+  `;
+}
+
+function _getPendingCount(item) {
+  if (!item.badge) return 0;
+  const payload = state.getPayload();
+  if (!payload) return 0;
+  if (item.id === 'tasks') return payload.derived?.totals?.pending || 0;
+  return 0;
+}
+
+function _bindEvents(el) {
+  // Acciones especiales (no nav-view)
+  el.addEventListener('click', e => {
+    const btn = e.target.closest('[data-action]');
+    if (!btn) return;
+    const action = btn.dataset.action;
+    if (action === 'tour') {
+      onboarding.reset();
+      onboarding.show();
+    } else if (action === 'console') {
+      consoleLogger.toggle();
+    }
+  });
+}
+
+/** Refresca solo los badges sin re-renderizar todo */
+export function updateBadges() {
+  const payload = state.getPayload();
+  if (!payload) return;
+
+  const pending = payload.derived?.totals?.pending || 0;
+  const tasksBtn = document.querySelector('[data-view="tasks"] .nav-item-badge');
+  if (tasksBtn) {
+    tasksBtn.textContent = pending;
+    tasksBtn.style.display = pending ? '' : 'none';
+  }
+}

package/ui/js/views/skills.js

@@ -0,0 +1,162 @@
+import * as api from '../api.js';
+import * as flash from './flash.js';
+
+export function init() {
+  // Sin estado local init por ahora
+}
+
+export async function render() {
+  return `
+    <div class="view-enter">
+      <header class="section-header">
+        <div>
+          <h2 class="section-title">Centro de habilidades</h2>
+          <p class="section-desc">Gestiona las habilidades de tu copiloto e integra nuevos flujos de la comunidad.</p>
+        </div>
+        <div class="actions">
+          <button class="btn btn-ghost btn-sm" id="btn-refresh-skills">
+            <svg viewBox="0 0 24 24" fill="none" class="icon" style="width:16px;height:16px"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            Refrescar
+          </button>
+        </div>
+      </header>
+
+      <div class="grid-split" style="grid-template-columns: 1fr 1fr; gap: var(--space-6);">
+        
+        <!-- Panel Izquierdo: Capacidades Locales -->
+        <div class="panel">
+          <div class="panel-header">
+            <h3 class="panel-title">Capacidades Instaladas</h3>
+          </div>
+          <div id="skills-local-list" class="stack" style="gap: var(--space-4); max-height: calc(100vh - 200px); overflow-y: auto; padding: 2px;">
+            <div class="card"><div class="card-body"><p class="text-sm color-muted">Cargando...</p></div></div>
+          </div>
+        </div>
+
+        <!-- Panel Derecho: Discover (skills.sh) -->
+        <div class="panel" style="border-color: var(--accent);">
+          <div class="panel-header" style="justify-content: space-between;">
+            <h3 class="panel-title" style="color: var(--accent);">✨ Descubrir</h3>
+            <span class="badge badge-success">Recomendado</span>
+          </div>
+          <div id="skills-discover-list" class="stack" style="gap: var(--space-4); max-height: calc(100vh - 200px); overflow-y: auto; padding: 2px;">
+             <div class="card"><div class="card-body"><p class="text-sm color-muted">Conectando...</p></div></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  `;
+}
+
+export function bindEvents() {
+  const btn = document.getElementById('btn-refresh-skills');
+  if (btn) {
+    btn.addEventListener('click', loadData);
+  }
+}
+
+export async function loadData() {
+  const localEl = document.getElementById('skills-local-list');
+  const discoverEl = document.getElementById('skills-discover-list');
+  
+  if (!localEl || !discoverEl) return;
+
+  localEl.innerHTML = `<p class="text-sm text-muted">Cargando datos locales...</p>`;
+  discoverEl.innerHTML = `<p class="text-sm text-muted">Conectando a skills.sh...</p>`;
+
+  try {
+    const [localRes, discoverRes] = await Promise.all([
+      api.fetchSkillsLocal(),
+      api.fetchSkillsDiscover()
+    ]);
+
+    // DOM Locales
+    if (localRes.ok && localRes.skills) {
+      if (localRes.skills.length === 0) {
+        localEl.innerHTML = `
+          <div class="empty-state">
+             <div class="empty-icon">🧠</div>
+             <p class="empty-title">Sin habilidades locales</p>
+             <p class="empty-desc" style="font-size:var(--text-xs); color:var(--text-muted)">Tu agente no tiene skills especializadas. Instala alguna desde el panel derecho.</p>
+          </div>
+        `;
+      } else {
+        localEl.innerHTML = localRes.skills.map(s => `
+          <div class="card">
+            <div class="card-body">
+               <div style="display: flex; gap: 12px; align-items: center;">
+                 <div style="font-size: 24px;">⚙️</div>
+                 <div>
+                   <h4 style="font-size: var(--text-sm); font-weight: 600; margin-bottom: 4px;">${s.title}</h4>
+                   <p style="font-size: var(--text-xs); color: var(--text-secondary);">${s.description || 'Sin descripción'}</p>
+                   <code style="font-size: 10px; margin-top: 8px; display: inline-block; background: var(--surface-3); padding: 2px 4px; border-radius: 4px;">${s.path}</code>
+                 </div>
+               </div>
+            </div>
+          </div>
+        `).join('');
+      }
+    }
+
+    // DOM Discover
+    if (discoverRes.ok && discoverRes.catalog) {
+       // Filter out already installed
+       const installedIds = (localRes.skills || []).map(s => s.id);
+       const available = discoverRes.catalog.filter(c => !installedIds.includes(c.id));
+
+       if (available.length === 0) {
+         discoverEl.innerHTML = `
+          <div class="empty-state">
+             <div class="empty-icon">✨</div>
+             <p class="empty-title" style="margin-bottom:var(--space-2)">Todo instalado</p>
+             <p class="empty-desc" style="font-size:var(--text-xs); color:var(--text-muted)">Ya tienes instaladas todas las habilidades recomendadas.</p>
+          </div>
+         `;
+       } else {
+         discoverEl.innerHTML = available.map(s => `
+          <div class="card" style="border: 1px dashed var(--border-accent);">
+            <div class="card-body">
+               <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;">
+                 <div style="flex:1;">
+                   <h4 style="font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">${s.title}</h4>
+                   <p style="font-size: var(--text-xs); color: var(--text-secondary);">${s.description}</p>
+                 </div>
+                 <button class="btn btn-primary btn-sm btn-install-skill" data-id="${s.id}" style="padding: 4px 12px; font-size: 11px;">Instalar</button>
+               </div>
+            </div>
+          </div>
+        `).join('');
+
+        // Bind events
+        discoverEl.querySelectorAll('.btn-install-skill').forEach(btn => {
+          btn.addEventListener('click', async (e) => {
+            const id = e.target.dataset.id;
+            const originalText = e.target.textContent;
+            e.target.textContent = 'Instalando...';
+            e.target.disabled = true;
+
+            const res = await api.installSkill(id).catch(err => {
+              flash.show('error', err.message);
+              return null;
+            });
+            
+            if (res && res.ok) {
+              flash.show('success', `Skill ${id} instalada correctamente en /.agents/skills`);
+              loadData(); // recargar
+            } else {
+              e.target.textContent = originalText;
+              e.target.disabled = false;
+            }
+          });
+        });
+       }
+    }
+
+  } catch (err) {
+    console.error(err);
+    flash.show('error', 'Error conectando con la API de Skills.');
+    localEl.innerHTML = `<p class="color-danger text-sm">Error cargando.</p>`;
+    discoverEl.innerHTML = `<p class="color-danger text-sm">Error conectando.</p>`;
+  }
+}