trackops 2.0.3 → 2.0.5

package/ui/js/views/settings.js

@@ -8,10 +8,11 @@ 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);
+function applyLocaleState(payload) {
+  if (!payload) return;
+  state.update('payload', payload);
   if (payload.i18n) {
     state.update({
       phases: payload.i18n.phases || [],
@@ -19,100 +20,98 @@ function applyLocaleState(payload) {
       locale: payload.i18n.locale || 'es',
       messages: payload.i18n.messages || {},
     });
-  }
-}
-
-function renderWorkspacePanel(payload) {
-  const project = payload?.project;
-  if (!project) return '';
-
-  return `
-    <div class="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="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 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;
+  }
+}
+
+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">
@@ -129,10 +128,10 @@ export async function render() {
         <div style="display:flex;flex-direction:column;gap:var(--space-4)">
 
           <!-- Info del proyecto activo -->
-          ${control ? `
-            <div class="panel">
-              <div class="panel-header">
-                <p class="panel-title">Proyecto Activo</p>
+          ${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)">
@@ -169,15 +168,15 @@ export async function render() {
                     </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="panel">
+              </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>
@@ -214,51 +213,8 @@ export async function render() {
         <!-- 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="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>
@@ -274,17 +230,17 @@ export async function render() {
               ` : `
                 <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="panel">
+              <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>
@@ -303,60 +259,45 @@ export async function render() {
             </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 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);
+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');
+    }
   });
 
-  // 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; }
+  document.getElementById('sync-env-btn')?.addEventListener('click', async () => {
     try {
-      await api.registerProject(root);
-      flash('Proyecto registrado.', 'success');
-      if (input) input.value = '';
+      await api.syncEnv();
+      flash(t('ui.settings.envSynced', {}, 'Environment synced.'), 'success');
       window.dispatchEvent(new CustomEvent('ops:refresh'));
     } catch (err) {
       flash(err.message, 'error');
     }
   });
 
-  // 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 => {
+  document.getElementById('settings-locale-select')?.addEventListener('change', async e => {
     const select = e.target;
     const previousLocale = state.get('locale') || 'es';
     const nextLocale = select.value;
@@ -376,6 +317,15 @@ export function bindEvents() {
       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;