@cccarv82/freya 3.4.1 → 3.5.0

package/cli/web-ui.js

@@ -28,6 +28,18 @@
     document.documentElement.setAttribute('data-theme', 'dark');
   }
 
+  function toggleTheme() {
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+    if (isDark) {
+      document.documentElement.removeAttribute('data-theme');
+      try { localStorage.setItem('freya-theme', 'light'); } catch(_) {}
+    } else {
+      document.documentElement.setAttribute('data-theme', 'dark');
+      try { localStorage.setItem('freya-theme', 'dark'); } catch(_) {}
+    }
+  }
+  window.toggleTheme = toggleTheme;
+
   function setPill(kind, text) {
     const dot = $('dot');
     const rail = $('railStatus');
@@ -1407,6 +1419,16 @@
     }
   }
 
+  /* ── Smooth Page Navigation with Transition ── */
+  function navigateTo(url) {
+    document.body.classList.add('navigating');
+    // Close mobile menu if open
+    closeMobileNav();
+    setTimeout(function() {
+      window.location.href = url;
+    }, 180);
+  }
+
   function wireRailNav() {
     const dash = $('railDashboard');
     const rep = $('railReports');
@@ -1423,7 +1445,7 @@
     if (dash) {
       dash.onclick = () => {
         if (!isDashboard) {
-          window.location.href = '/';
+          navigateTo('/');
         } else {
           const c = document.querySelector('.centerBody');
           if (c) c.scrollTo({ top: 0, behavior: 'smooth' });
@@ -1432,37 +1454,37 @@
     }
     if (rep) {
       rep.onclick = () => {
-        if (curPage !== 'reports') window.location.href = '/reports';
+        if (curPage !== 'reports') navigateTo('/reports');
       };
     }
     if (proj) {
       proj.onclick = () => {
-        if (curPage !== 'projects') window.location.href = '/projects';
+        if (curPage !== 'projects') navigateTo('/projects');
       };
     }
     if (health) {
       health.onclick = () => {
-        if (curPage !== 'companion') window.location.href = '/companion';
+        if (curPage !== 'companion') navigateTo('/companion');
       };
     }
     if (kanban) {
       kanban.onclick = () => {
-        if (curPage !== 'kanban') window.location.href = '/kanban';
+        if (curPage !== 'kanban') navigateTo('/kanban');
       };
     }
     if (tl) {
       tl.onclick = () => {
-        if (curPage !== 'timeline') window.location.href = '/timeline';
+        if (curPage !== 'timeline') navigateTo('/timeline');
       };
     }
     if (graph) {
       graph.onclick = () => {
-        if (curPage !== 'graph') window.location.href = '/graph';
+        if (curPage !== 'graph') navigateTo('/graph');
       };
     }
     if (docs) {
       docs.onclick = () => {
-        if (curPage !== 'docs') window.location.href = '/docs';
+        if (curPage !== 'docs') navigateTo('/docs');
       };
     }
   }
@@ -2613,8 +2635,16 @@
     }
   }
 
-  // init
-  applyDarkTheme();
+  // init — apply saved theme preference (default: light)
+  (function initTheme() {
+    var saved = null;
+    try { saved = localStorage.getItem('freya-theme'); } catch(_) {}
+    if (saved === 'dark') {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+      document.documentElement.removeAttribute('data-theme');
+    }
+  })();
   const chipPort = $('chipPort');
   if (chipPort) chipPort.textContent = location.host;
   loadLocal();
@@ -3533,4 +3563,109 @@
   window.openBlockerEdit = openBlockerEdit;
   window.closeBlockerEdit = closeBlockerEdit;
   window.submitBlockerEdit = submitBlockerEdit;
+
+  /* ── Mobile Navigation Menu ── */
+  var _mobileNavOpen = false;
+
+  function buildMobileNav() {
+    // Only build on small screens and if not already built
+    if (document.querySelector('.mobileMenuBtn')) return;
+
+    var curPage = (document.body && document.body.dataset) ? document.body.dataset.page : null;
+    var isDashboard = !curPage || curPage === 'dashboard';
+
+    // Hamburger button
+    var btn = document.createElement('button');
+    btn.className = 'mobileMenuBtn';
+    btn.setAttribute('aria-label', 'Menu de navegação');
+    btn.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>';
+    btn.onclick = toggleMobileNav;
+    document.body.appendChild(btn);
+
+    // Navigation overlay
+    var nav = document.createElement('div');
+    nav.className = 'mobileNav';
+    nav.id = 'mobileNav';
+    nav.onclick = function(e) {
+      if (e.target === nav) closeMobileNav();
+    };
+
+    var items = [
+      { label: 'Dashboard', page: null, url: '/', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect><rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect></svg>' },
+      { label: 'Relatórios', page: 'reports', url: '/reports', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>' },
+      { label: 'Companion', page: 'companion', url: '/companion', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg>' },
+      { label: 'Kanban', page: 'kanban', url: '/kanban', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="5" height="18" rx="1"></rect><rect x="10" y="3" width="5" height="12" rx="1"></rect><rect x="17" y="3" width="5" height="15" rx="1"></rect></svg>' },
+      { label: 'Projetos', page: 'projects', url: '/projects', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>' },
+      { label: 'Timeline', page: 'timeline', url: '/timeline', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>' },
+      { label: 'Grafo', page: 'graph', url: '/graph', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>' },
+      { label: 'Configurações', page: 'settings', url: '/settings', icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09"></path></svg>' }
+    ];
+
+    var panel = document.createElement('div');
+    panel.className = 'mobileNav-panel';
+
+    for (var i = 0; i < items.length; i++) {
+      var item = items[i];
+      var isActive = item.page === curPage || (item.page === null && isDashboard);
+      var el = document.createElement('button');
+      el.className = 'mobileNav-item' + (isActive ? ' active' : '');
+      el.innerHTML = item.icon + '<span>' + item.label + '</span>';
+      el.setAttribute('data-url', item.url);
+      el.onclick = function() {
+        var url = this.getAttribute('data-url');
+        navigateTo(url);
+      };
+      panel.appendChild(el);
+    }
+
+    nav.appendChild(panel);
+    document.body.appendChild(nav);
+  }
+
+  function toggleMobileNav() {
+    _mobileNavOpen ? closeMobileNav() : openMobileNav();
+  }
+
+  function openMobileNav() {
+    var nav = document.getElementById('mobileNav');
+    var btn = document.querySelector('.mobileMenuBtn');
+    if (!nav) return;
+    nav.style.display = 'block';
+    _mobileNavOpen = true;
+    if (btn) btn.classList.add('open');
+    // Trigger reflow for transition
+    nav.offsetHeight;
+    nav.classList.add('visible');
+  }
+
+  function closeMobileNav() {
+    var nav = document.getElementById('mobileNav');
+    var btn = document.querySelector('.mobileMenuBtn');
+    if (!nav) return;
+    nav.classList.remove('visible');
+    _mobileNavOpen = false;
+    if (btn) btn.classList.remove('open');
+    setTimeout(function() {
+      nav.style.display = 'none';
+    }, 250);
+  }
+
+  // Build mobile nav on load
+  buildMobileNav();
+  window.closeMobileNav = closeMobileNav;
+
+  // Also intercept chip.clickable clicks for smooth transition
+  document.querySelectorAll('.chip.clickable').forEach(function(el) {
+    var href = el.getAttribute('onclick');
+    if (href && href.indexOf('location.href') !== -1) {
+      var match = href.match(/['"]([^'"]+)['"]/);
+      if (match) {
+        el.removeAttribute('onclick');
+        el.onclick = function(e) {
+          e.preventDefault();
+          navigateTo(match[1]);
+        };
+      }
+    }
+  });
 })();

package/cli/web.js

@@ -1572,7 +1572,7 @@ function buildReportsHtml(safeDefault, appVersion) {
             </button>
 
           </div>
-          <div class="railBottom">\n            <button id="railSettings" class="railBtn" title="Configurações">\n              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>\n            </button>
+          <div class="railBottom">\n            <button id="railSettings" class="railBtn" title="Configurações" onclick="if (document.body.dataset.page !== 'settings') window.location.href='/settings';">\n              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>\n            </button>
             
           </div>
         </aside>
@@ -1931,7 +1931,9 @@ function buildTimelineHtml(safeDefault, appVersion) {
 
           </div>
           <div class=\"railBottom\">
-            <div class=\"railStatus\" id=\"railStatus\" title=\"status\"></div>
+            <button id=\"railSettings\" class=\"railBtn\" title=\"Configurações\" onclick=\"if (document.body.dataset.page !== 'settings') window.location.href='/settings';\">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+            </button>
           </div>
         </aside>
 
@@ -3061,7 +3063,7 @@ async function cmdWeb({ port, dir, open, dev }) {
             if (t.project_slug && nodeIds.has(t.project_slug)) {
               edges.push({ from: tid, to: t.project_slug });
             } else {
-              addNode('unassigned', 'Sin Asignar', 'unassigned');
+              addNode('unassigned', 'Sem Atribuir', 'unassigned');
               edges.push({ from: tid, to: 'unassigned' });
             }
           }
@@ -5040,7 +5042,7 @@ function buildSettingsHtml(safeDefault, appVersion) {
                   <span class="chip" style="font-weight:normal; font-size:11px;">Rules</span>
                 </div>
                 <div class="panelBody">
-                  <p style="margin-top: 0; color: #666; font-size: 13px;">
+                  <p style="margin-top: 0; color: var(--muted); font-size: 13px;">
                     A FREYA tenta adivinhar automaticamente a qual projeto uma tarefa pertence com base no LLM. 
                     Se você quiser <b>garantir</b> que uma palavra sempre caia em um projeto específico, adicione uma regra abaixo.
                   </p>
@@ -5176,7 +5178,7 @@ function buildKanbanHtml(safeDefault, appVersion) {
             <button class="railBtn" id="railDashboard" type="button" title="Dashboard">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect><rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect></svg>
             </button>
-            <button class="railBtn" id="railReports" type="button" title="Relat\\u00f3rios">
+            <button class="railBtn" id="railReports" type="button" title="Relatórios">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
             </button>
             <button class="railBtn" id="railCompanion" type="button" title="Companion">
@@ -5196,7 +5198,7 @@ function buildKanbanHtml(safeDefault, appVersion) {
             </button>
           </div>
           <div class="railBottom">
-            <button id="railSettings" class="railBtn" title="Configura\\u00e7\\u00f5es" onclick="if (document.body.dataset.page !== 'settings') window.location.href='/settings';">
+            <button id="railSettings" class="railBtn" title="Configurações" onclick="if (document.body.dataset.page !== 'settings') window.location.href='/settings';">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
             </button>
           </div>
@@ -5208,7 +5210,7 @@ function buildKanbanHtml(safeDefault, appVersion) {
               <span class="spark"></span>
               <div class="brandStack">
                 <div class="brand">FREYA</div>
-                <div class="brandSub">Kanban Board &mdash; Vis\\u00e3o SM</div>
+                <div class="brandSub">Kanban Board &mdash; Visão SM</div>
               </div>
             </div>
             <div class="topActions">
@@ -5310,7 +5312,7 @@ function buildKanbanHtml(safeDefault, appVersion) {
         <span style="font-weight:700; font-size:14px;">Nova Task</span>
         <button class="btn small" type="button" onclick="window.closeQuickAdd()" style="padding:2px 8px;">&times;</button>
       </div>
-      <textarea id="qaDesc" class="qa-input" placeholder="Descri\\u00e7\\u00e3o da task..." rows="3"></textarea>
+      <textarea id="qaDesc" class="qa-input" placeholder="Descrição da task..." rows="3"></textarea>
       <div class="qa-row">
         <select id="qaCat" class="qa-select">
           <option value="DO_NOW">DO_NOW</option>
@@ -5319,9 +5321,9 @@ function buildKanbanHtml(safeDefault, appVersion) {
         </select>
         <select id="qaPriority" class="qa-select">
           <option value="">Prioridade</option>
-          <option value="critical">Cr\\u00edtica</option>
+          <option value="critical">Crítica</option>
           <option value="high">Alta</option>
-          <option value="medium">M\\u00e9dia</option>
+          <option value="medium">Média</option>
           <option value="low">Baixa</option>
         </select>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cccarv82/freya",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "Personal AI Assistant with local-first persistence",
   "scripts": {
     "health": "node scripts/validate-data.js && node scripts/validate-structure.js",