@cccarv82/freya 2.3.13 → 2.4.1

package/cli/web-ui.js

@@ -183,16 +183,22 @@
     const raw = String(text || '');
     if (opts.markdown) {
       body.innerHTML = renderMarkdown(raw);
+    } else if (opts.html) {
+      body.innerHTML = raw;
     } else {
       body.innerHTML = escapeHtml(raw).replace(/\n/g, '<br>');
     }
 
+    if (opts.id) bubble.id = opts.id;
+
     bubble.appendChild(meta);
     bubble.appendChild(body);
     thread.appendChild(bubble);
 
-    // persist
-    persistChatItem({ ts: Date.now(), role, markdown: !!opts.markdown, text: raw });
+    // persist only if it's a real chat message (not HTML typing indicator)
+    if (!opts.html) {
+      persistChatItem({ ts: Date.now(), role, markdown: !!opts.markdown, text: raw });
+    }
 
     // keep newest in view
     try {
@@ -265,13 +271,60 @@
 
     chatAppend('user', query);
     setPill('run', 'pesquisando…');
+
+    // Add typing indicator
+    const typingId = 'typing-' + Date.now();
+    const typingHtml = '<div class="typing-indicator"><span></span><span></span><span></span></div>';
+    chatAppend('assistant', typingHtml, { id: typingId, html: true });
+
     try {
       const sessionId = ensureChatSession();
       const r = await api('/api/chat/ask', { dir: dirOrDefault(), sessionId, query });
       const answer = r && r.answer ? r.answer : 'Não encontrei registro';
+
+      const el = $(typingId);
+      if (el) el.remove();
+
       chatAppend('assistant', answer, { markdown: true });
       setPill('ok', 'pronto');
     } catch (e) {
+      const el = $(typingId);
+      if (el) el.remove();
+
+      setPill('err', 'falhou');
+      chatAppend('assistant', String(e && e.message ? e.message : e));
+    }
+  }
+
+  async function askFreyaInline() {
+    const input = $('oracleInput');
+    const query = input ? input.value.trim() : '';
+    if (!query) return;
+
+    if (input) input.value = '';
+
+    chatAppend('user', query);
+    setPill('run', 'pesquisando…');
+
+    // Add typing indicator
+    const typingId = 'typing-' + Date.now();
+    const typingHtml = '<div class="typing-indicator"><span></span><span></span><span></span></div>';
+    chatAppend('assistant', typingHtml, { id: typingId, html: true });
+
+    try {
+      const sessionId = ensureChatSession();
+      const r = await api('/api/chat/ask', { dir: dirOrDefault(), sessionId, query });
+      const answer = r && r.answer ? r.answer : 'Não encontrei registro';
+
+      const el = $(typingId);
+      if (el) el.remove();
+
+      chatAppend('assistant', answer, { markdown: true });
+      setPill('ok', 'pronto');
+    } catch (e) {
+      const el = $(typingId);
+      if (el) el.remove();
+
       setPill('err', 'falhou');
       chatAppend('assistant', String(e && e.message ? e.message : e));
     }
@@ -544,118 +597,220 @@
     }
   }
 
+  function setReportsTab(tab) {
+    state.reportsTab = tab;
+    const tabChrono = $('tabChrono');
+    const tabType = $('tabType');
+    if (tabChrono) tabChrono.className = tab === 'chrono' ? 'pill ok' : 'pill';
+    if (tabType) tabType.className = tab === 'type' ? 'pill ok' : 'pill';
+    renderReportsPage();
+  }
+
+  function togglePinReport(relPath) {
+    if (!state.pinnedReports) {
+      try { state.pinnedReports = JSON.parse(localStorage.getItem('freya_pinned_reports') || '{}'); }
+      catch { state.pinnedReports = {}; }
+    }
+    if (state.pinnedReports[relPath]) {
+      delete state.pinnedReports[relPath];
+    } else {
+      state.pinnedReports[relPath] = true;
+    }
+    try { localStorage.setItem('freya_pinned_reports', JSON.stringify(state.pinnedReports)); } catch { }
+    renderReportsPage();
+  }
+
   function renderReportsPage() {
     const grid = $('reportsGrid');
     if (!grid) return;
     const q = ($('reportsFilter') ? $('reportsFilter').value : '').trim().toLowerCase();
+
+    if (!state.pinnedReports) {
+      try { state.pinnedReports = JSON.parse(localStorage.getItem('freya_pinned_reports') || '{}'); }
+      catch { state.pinnedReports = {}; }
+    }
+
     const list = (state.reports || []).filter((it) => {
       if (!q) return true;
       return (it.name + ' ' + it.kind).toLowerCase().includes(q);
     });
 
-    grid.innerHTML = '';
+    const groups = {};
+    const addGroup = (g, item) => {
+      if (!groups[g]) groups[g] = [];
+      groups[g].push(item);
+    };
+
+    const now = Date.now();
     for (const item of list) {
-      const card = document.createElement('div');
-      const mode = state.reportModes[item.relPath] || 'preview';
-      const expanded = state.reportExpanded && state.reportExpanded[item.relPath];
-      card.className = 'reportCard' + (mode === 'raw' ? ' raw' : '') + (expanded ? ' expanded' : '');
+      if (state.pinnedReports[item.relPath]) {
+        addGroup('📌 Fixados', item);
+        continue;
+      }
+      if (state.reportsTab === 'type') {
+        const typeName = item.kind ? String(item.kind).toUpperCase() : 'OUTROS';
+        addGroup(typeName, item);
+      } else {
+        const days = (now - item.mtimeMs) / (1000 * 3600 * 24);
+        if (days <= 1) addGroup('📅 Hoje', item);
+        else if (days <= 7) addGroup('📅 Esta Semana', item);
+        else addGroup('📅 Antigos', item);
+      }
+    }
 
-      const meta = fmtWhen(item.mtimeMs);
-      card.innerHTML =
-        '<div class="reportHead" data-action="expand">'
-        + '<div>'
-        + '<div class="reportName">' + escapeHtml(item.name) + '</div>'
-        + '<div class="reportMeta">'
-        + '<span class="reportMetaText">' + escapeHtml(item.relPath) + ' • ' + escapeHtml(meta) + '</span>'
-        + '<button class="iconBtn" data-action="copy" title="Copiar">⧉</button>'
-        + '<button class="iconBtn" data-action="pdf" title="Baixar PDF">⬇</button>'
-        + '</div>'
-        + '</div>'
-        + '<div class="reportHeadActions">'
-        + '<button class="btn small primary" data-action="save">Salvar</button>'
-        + '</div>'
-        + '</div>'
-        + '<div class="reportBody">'
-        + '<div class="reportPreview" contenteditable="true"></div>'
-        + '</div>';
+    grid.innerHTML = '';
 
-      const text = state.reportTexts[item.relPath] || '';
-      const preview = card.querySelector('.reportPreview');
-      if (preview) preview.innerHTML = renderMarkdown(text || '');
-
-      if (preview) {
-        preview.addEventListener('focus', () => {
-          preview.dataset.editing = '1';
-          preview.textContent = state.reportTexts[item.relPath] || '';
-        });
-        preview.addEventListener('blur', () => {
-          preview.dataset.editing = '';
-          const val = preview.innerText || '';
-          state.reportTexts[item.relPath] = val;
-          preview.innerHTML = renderMarkdown(val);
-        });
-      }
+    let groupNames = Object.keys(groups);
+    if (state.reportsTab === 'type') {
+      groupNames.sort();
+      groupNames = groupNames.filter(g => g !== '📌 Fixados');
+      if (groups['📌 Fixados']) groupNames.unshift('📌 Fixados');
+    } else {
+      const order = ['📌 Fixados', '📅 Hoje', '📅 Esta Semana', '📅 Antigos'];
+      groupNames.sort((a, b) => {
+        let ia = order.indexOf(a);
+        let ib = order.indexOf(b);
+        if (ia === -1) ia = 99;
+        if (ib === -1) ib = 99;
+        return ia - ib;
+      });
+    }
 
-      const saveBtn = card.querySelector('[data-action="save"]');
-      if (saveBtn) {
-        saveBtn.onclick = async (ev) => {
-          ev.stopPropagation();
-          try {
-            const content = (raw && typeof raw.value === 'string') ? raw.value : (state.reportTexts[item.relPath] || '');
-            setPill('run', 'salvando…');
-            await api('/api/reports/write', { dir: dirOrDefault(), relPath: item.relPath, text: content });
-            state.reportTexts[item.relPath] = content;
-            setPill('ok', 'salvo');
-            setTimeout(() => setPill('ok', 'pronto'), 800);
-            renderReportsPage();
-          } catch (e) {
-            setPill('err', 'falhou');
-          }
-        };
-      }
+    for (const g of groupNames) {
+      const gList = groups[g];
+      if (!gList || !gList.length) continue;
+
+      const head = document.createElement('div');
+      head.className = 'help';
+      head.style.fontWeight = '800';
+      head.style.marginTop = '16px';
+      head.style.marginBottom = '8px';
+      head.style.fontSize = '14px';
+      head.textContent = g;
+      grid.appendChild(head);
+
+      for (const item of gList) {
+        const card = document.createElement('div');
+        const mode = state.reportModes[item.relPath] || 'preview';
+        const expanded = state.reportExpanded && state.reportExpanded[item.relPath];
+        card.className = 'reportCard' + (mode === 'raw' ? ' raw' : '') + (expanded ? ' expanded' : '');
+
+        const meta = fmtWhen(item.mtimeMs);
+
+        // Determine pill style based on report kind
+        let kindColor = 'info';
+        if (item.kind === 'daily') kindColor = 'ok';
+        if (item.kind === 'executive') kindColor = 'warn';
+        if (item.kind === 'blockers') kindColor = 'err';
+
+        card.innerHTML =
+          '<div class="reportHead" data-action="expand">'
+          + '<div style="flex: 1">'
+          + '<div style="display: flex; align-items: center; gap: 8px;">'
+          + '<div class="reportName" style="font-size: 15px;">' + escapeHtml(item.name) + '</div>'
+          + '<span class="pill ' + kindColor + '" style="font-size: 10px; padding: 2px 6px;">' + escapeHtml(item.kind || 'report') + '</span>'
+          + '</div>'
+          + '<div class="reportMeta" style="margin-top: 6px;">'
+          + '<span class="reportMetaText">' + escapeHtml(item.relPath) + ' • ' + escapeHtml(meta) + '</span>'
+          + `<button class="iconBtn" data-action="pin" title="Fixar" style="margin-left: 8px; color:${state.pinnedReports[item.relPath] ? 'var(--warn)' : 'inherit'}">📌</button>`
+          + '<button class="iconBtn" data-action="copy" title="Copiar" style="margin-left: 8px;">⧉</button>'
+          + '<button class="iconBtn" data-action="pdf" title="Baixar PDF">⬇</button>'
+          + '</div>'
+          + '</div>'
+          + '<div class="reportHeadActions">'
+          + '<button class="btn small primary" data-action="save">Salvar</button>'
+          + '</div>'
+          + '</div>'
+          + '<div class="reportBody">'
+          + '<div class="reportPreview" contenteditable="true"></div>'
+          + '</div>';
+
+        const text = state.reportTexts[item.relPath] || '';
+        const preview = card.querySelector('.reportPreview');
+        if (preview) preview.innerHTML = renderMarkdown(text || '');
+
+        if (preview) {
+          preview.addEventListener('focus', () => {
+            preview.dataset.editing = '1';
+            preview.textContent = state.reportTexts[item.relPath] || '';
+          });
+          preview.addEventListener('blur', () => {
+            preview.dataset.editing = '';
+            const val = preview.innerText || '';
+            state.reportTexts[item.relPath] = val;
+            preview.innerHTML = renderMarkdown(val);
+          });
+        }
+
+        const saveBtn = card.querySelector('[data-action="save"]');
+        if (saveBtn) {
+          saveBtn.onclick = async (ev) => {
+            ev.stopPropagation();
+            try {
+              const content = (raw && typeof raw.value === 'string') ? raw.value : (state.reportTexts[item.relPath] || '');
+              setPill('run', 'salvando…');
+              await api('/api/reports/write', { dir: dirOrDefault(), relPath: item.relPath, text: content });
+              state.reportTexts[item.relPath] = content;
+              setPill('ok', 'salvo');
+              setTimeout(() => setPill('ok', 'pronto'), 800);
+              renderReportsPage();
+            } catch (e) {
+              setPill('err', 'falhou');
+            }
+          };
+        }
 
-      const copyBtn = card.querySelector('[data-action="copy"]');
-      if (copyBtn) {
-        copyBtn.onclick = async (ev) => {
-          ev.stopPropagation();
-          try {
-            const html = renderMarkdown(state.reportTexts[item.relPath] || '');
-            const text = (preview && preview.innerText) ? preview.innerText : (state.reportTexts[item.relPath] || '');
-            const blob = new Blob([`<div>${html}</div>`], { type: 'text/html' });
-            const data = [new ClipboardItem({ 'text/html': blob, 'text/plain': new Blob([text], { type: 'text/plain' }) })];
-            await navigator.clipboard.write(data);
-            setPill('ok', 'copiado');
-            setTimeout(() => setPill('ok', 'pronto'), 800);
-          } catch {
+        const copyBtn = card.querySelector('[data-action="copy"]');
+        if (copyBtn) {
+          copyBtn.onclick = async (ev) => {
+            ev.stopPropagation();
             try {
-              await navigator.clipboard.writeText(state.reportTexts[item.relPath] || '');
+              const html = renderMarkdown(state.reportTexts[item.relPath] || '');
+              const text = (preview && preview.innerText) ? preview.innerText : (state.reportTexts[item.relPath] || '');
+              const blob = new Blob([`<div>${html}</div>`], { type: 'text/html' });
+              const data = [new ClipboardItem({ 'text/html': blob, 'text/plain': new Blob([text], { type: 'text/plain' }) })];
+              await navigator.clipboard.write(data);
               setPill('ok', 'copiado');
               setTimeout(() => setPill('ok', 'pronto'), 800);
             } catch {
-              setPill('err', 'copy failed');
+              try {
+                await navigator.clipboard.writeText(state.reportTexts[item.relPath] || '');
+                setPill('ok', 'copiado');
+                setTimeout(() => setPill('ok', 'pronto'), 800);
+              } catch {
+                setPill('err', 'copy failed');
+              }
             }
-          }
-        };
-      }
+          };
+        }
 
-      const pdfBtn = card.querySelector('[data-action="pdf"]');
-      if (pdfBtn) {
-        pdfBtn.onclick = (ev) => {
-          ev.stopPropagation();
-          downloadReportPdf(item);
-        };
-      }
+        const pdfBtn = card.querySelector('[data-action="pdf"]');
+        if (pdfBtn) {
+          pdfBtn.onclick = (ev) => {
+            ev.stopPropagation();
+            downloadReportPdf(item);
+          };
+        }
 
-      const head = card.querySelector('[data-action="expand"]');
-      if (head) {
-        head.onclick = (ev) => {
-          if (ev.target && ev.target.closest('.reportHeadActions')) return;
-          state.reportExpanded[item.relPath] = !state.reportExpanded[item.relPath];
-          renderReportsPage();
-        };
-      }
+        const head = card.querySelector('[data-action="expand"]');
+        if (head) {
+          head.onclick = (ev) => {
+            if (ev.target && ev.target.closest('.reportHeadActions')) return;
+            state.reportExpanded[item.relPath] = !state.reportExpanded[item.relPath];
+            renderReportsPage();
+          };
+        }
 
-      grid.appendChild(card);
+        const pinBtn = card.querySelector('[data-action="pin"]');
+        if (pinBtn) {
+          pinBtn.onclick = (ev) => {
+            ev.stopPropagation();
+            togglePinReport(item.relPath);
+          };
+        }
+
+        grid.appendChild(card);
+      }
     }
   }
 
@@ -664,22 +819,84 @@
     if (!el) return;
     const filter = String(($('projectsFilter') && $('projectsFilter').value) || '').toLowerCase();
     const items = Array.isArray(state.projects) ? state.projects : [];
+
+    // Compute severity for all projects before filtering/sorting
+    const now = Date.now();
+    for (const p of items) {
+      let blockers = 0;
+      let highTasks = 0;
+      if (state.allBlockers) blockers = state.allBlockers.filter(b => b.projectSlug === p.slug).length;
+      if (state.allTasks) highTasks = state.allTasks.filter(t => t.projectSlug === p.slug && (t.priority || '').toUpperCase() === 'HIGH').length;
+
+      const daysSinceUpdate = p.lastUpdated ? (now - new Date(p.lastUpdated).getTime()) / (1000 * 3600 * 24) : Infinity;
+
+      let traffic = '🟢';
+      let severity = 3;
+      if (blockers > 0 || !p.active) {
+        traffic = '🔴';
+        severity = 1;
+      } else if (daysSinceUpdate > 14 || highTasks > 0) {
+        traffic = '🟡';
+        severity = 2;
+      }
+
+      p._severity = severity;
+      p._traffic = traffic;
+      p._blockersCount = blockers;
+      p._highTasks = highTasks;
+    }
+
     const filtered = items.filter((p) => {
       const hay = [p.client, p.program, p.stream, p.project, p.slug, (p.tags || []).join(' ')].join(' ').toLowerCase();
       return !filter || hay.includes(filter);
     });
+
+    // Sort by severity (1=Red, 2=Yellow, 3=Green), then by lastUpdated
+    filtered.sort((a, b) => {
+      if (a._severity !== b._severity) return a._severity - b._severity;
+      return String(b.lastUpdated || '').localeCompare(String(a.lastUpdated || ''));
+    });
+
     el.innerHTML = '';
     for (const p of filtered) {
       const card = document.createElement('div');
       card.className = 'reportCard';
+
+      let trafficLabel = '';
+      if (p._traffic === '🔴') trafficLabel = p._blockersCount > 0 ? `${p._blockersCount} Blockers` : 'Inativo';
+      else if (p._traffic === '🟡') trafficLabel = p._highTasks > 0 ? `${p._highTasks} High Tasks` : 'Desatualizado';
+      else trafficLabel = 'Saudável';
+
+      const renderActivityBars = (count) => {
+        const c = Number(count) || 0;
+        let level = 0;
+        if (c > 0) level = 1;
+        if (c > 3) level = 2;
+        if (c > 8) level = 3;
+        if (c > 15) level = 4;
+        if (c > 25) level = 5;
+        let html = '<div style="display:flex; gap:2px; height:12px; align-items:flex-end;" title="' + c + ' eventos históricos">';
+        for (let i = 1; i <= 5; i++) {
+          const h = 4 + (i * 1.5);
+          const color = i <= level ? 'var(--accent)' : 'var(--border)';
+          html += `<div style="width:4px; height:${h}px; background:${color}; border-radius:2px;"></div>`;
+        }
+        html += '</div>';
+        return html;
+      };
+
       card.innerHTML = '<div class="reportHead">'
-        + '<div><div class="reportTitle">' + escapeHtml(p.project || p.slug || 'Projeto') + '</div>'
-        + '<div class="reportMeta">' + escapeHtml([p.client, p.program, p.stream].filter(Boolean).join(' · ')) + '</div></div>'
+        + '<div><div class="reportTitle" style="display:flex; align-items:center; gap:8px;">'
+        + '<span title="' + trafficLabel + '" style="font-size:16px; cursor:help;">' + p._traffic + '</span>'
+        + escapeHtml(p.project || p.slug || 'Projeto') + '</div>'
+        + '<div class="reportMeta" style="margin-top:4px;">' + escapeHtml([p.client, p.program, p.stream].filter(Boolean).join(' · ')) + '</div></div>'
         + '<div class="reportActions">' + (p.active ? '<span class="pill ok">ativo</span>' : '<span class="pill warn">inativo</span>') + '</div>'
         + '</div>'
-        + '<div class="help" style="margin-top:8px">' + escapeHtml(p.currentStatus || 'Sem status') + '</div>'
-        + '<div class="reportMeta" style="margin-top:8px">Última atualização: ' + escapeHtml(p.lastUpdated || '—') + '</div>'
-        + '<div class="reportMeta">Eventos: ' + escapeHtml(String(p.historyCount || 0)) + '</div>';
+        + '<div class="help" style="margin-top:12px; font-weight:500;">' + escapeHtml(p.currentStatus || 'Sem status') + '</div>'
+        + '<div style="margin-top:12px; display:flex; justify-content:space-between; align-items:center; font-size:11px; opacity:0.8;">'
+        + '<div>Última att: <b>' + escapeHtml(p.lastUpdated || '—') + '</b></div>'
+        + '<div style="display:flex; align-items:center; gap:6px;">Atividade: ' + renderActivityBars(p.historyCount) + '</div>'
+        + '</div>';
       el.appendChild(card);
     }
     if (!filtered.length) {
@@ -692,8 +909,14 @@
 
   async function refreshProjects() {
     try {
-      const r = await api('/api/projects/list', { dir: dirOrDefault() });
+      const [r, b, t] = await Promise.all([
+        api('/api/projects/list', { dir: dirOrDefault() }),
+        api('/api/blockers/list', { dir: dirOrDefault(), status: 'OPEN', limit: 1000 }),
+        api('/api/tasks/list', { dir: dirOrDefault(), status: 'PENDING', limit: 1000 })
+      ]);
       state.projects = r.projects || [];
+      state.allBlockers = b.blockers || [];
+      state.allTasks = t.tasks || [];
       renderProjects();
     } catch (e) {
       const el = $('projectsGrid');
@@ -778,15 +1001,50 @@
       }
       const card = document.createElement('div');
       card.className = 'reportCard';
+      card.style.cursor = 'pointer'; // Make it look clickable
+
+      let icon = '⏺';
+      let colorClass = 'info';
+      if (it.kind === 'task') { icon = '📋'; colorClass = 'ok'; }
+      else if (it.kind === 'status') { icon = '🔄'; colorClass = 'warn'; }
+      else if (it.kind === 'daily') { icon = '📝'; colorClass = 'info'; }
+
       card.innerHTML = '<div class="reportHead">'
-        + '<div><div class="reportTitle">' + escapeHtml(it.title || 'Evento') + '</div>'
-        + '<div class="reportMeta">' + escapeHtml(it.date || '') + ' · ' + escapeHtml(it.kind || '') + '</div></div>'
+        + '<div><div class="reportTitle" style="display:flex; align-items:center; gap:8px;">'
+        + '<span style="font-size:16px;">' + icon + '</span>'
+        + escapeHtml(it.title || 'Evento') + '</div>'
+        + '<div class="reportMeta" style="margin-top:4px;">' + escapeHtml(it.date || '') + ' · <span style="text-transform:uppercase;">' + escapeHtml(it.kind || '') + '</span></div></div>'
         + '<div class="reportActions">'
-        + '<span class="pill info">' + escapeHtml(it.kind || '') + '</span>'
+        + '<span class="pill ' + colorClass + '">' + escapeHtml(it.kind || '') + '</span>'
         + (it.slug ? ('<span class="pill">' + escapeHtml(it.slug) + '</span>') : '')
         + '</div>'
         + '</div>'
-        + '<div class="help" style="margin-top:8px">' + escapeHtml(it.content || '') + '</div>';
+        + '<div class="help" style="margin-top:12px; font-weight:500;">' + escapeHtml(it.content || '') + '</div>';
+
+      // Interactivity
+      card.onclick = () => {
+        if (it.kind === 'daily') {
+          // Open daily log in reports
+          if (window.refreshReports) {
+            const dateStr = it.date;
+            const relPath = 'logs/daily/' + dateStr + '.md';
+            state.selectedReport = { relPath, name: dateStr + '.md', kind: 'daily' };
+            const railR = $('railReports');
+            if (railR) railR.click();
+            setTimeout(() => {
+              if (window.refreshReportsPage) refreshReportsPage();
+              if (window.renderReportsList) renderReportsList();
+            }, 50);
+          }
+        } else {
+          // Filter timeline by project
+          const slugToFilter = it.slug || (it.kind === 'task' ? it.content : '');
+          if (slugToFilter) {
+            setTimelineProject(slugToFilter);
+          }
+        }
+      };
+
       el.appendChild(card);
     }
     if (!filtered.length) {
@@ -973,45 +1231,44 @@
     const proj = $('railProjects');
     const tl = $('railTimeline');
     const health = $('railCompanion');
+    const graph = $('railGraph');
+
+    const curPage = (document.body && document.body.dataset) ? document.body.dataset.page : null;
+    const isDashboard = !curPage || curPage === 'dashboard';
+
     if (dash) {
       dash.onclick = () => {
-        const isReports = document.body && document.body.dataset && document.body.dataset.page === 'reports';
-        if (isReports) {
+        if (!isDashboard) {
           window.location.href = '/';
-          return;
+        } else {
+          const c = document.querySelector('.centerBody');
+          if (c) c.scrollTo({ top: 0, behavior: 'smooth' });
         }
-        const c = document.querySelector('.centerBody');
-        if (c) c.scrollTo({ top: 0, behavior: 'smooth' });
       };
     }
     if (rep) {
       rep.onclick = () => {
-        const isReports = document.body && document.body.dataset && document.body.dataset.page === 'reports';
-        if (!isReports) window.location.href = '/reports';
+        if (curPage !== 'reports') window.location.href = '/reports';
       };
     }
     if (proj) {
       proj.onclick = () => {
-        const isProjects = document.body && document.body.dataset && document.body.dataset.page === 'projects';
-        if (!isProjects) window.location.href = '/projects';
+        if (curPage !== 'projects') window.location.href = '/projects';
       };
     }
-    if (tl) {
-      tl.onclick = () => {
-        const isTimeline = document.body && document.body.dataset && document.body.dataset.page === 'timeline';
-        if (!isTimeline) window.location.href = '/timeline';
+    if (health) {
+      health.onclick = () => {
+        if (curPage !== 'companion') window.location.href = '/companion';
       };
     }
-    if ($('railGraph')) {
-      $('railGraph').onclick = () => {
-        const isGraph = document.body && document.body.dataset && document.body.dataset.page === 'graph';
-        if (!isGraph) window.location.href = '/graph';
+    if (tl) {
+      tl.onclick = () => {
+        if (curPage !== 'timeline') window.location.href = '/timeline';
       };
     }
-    if (health) {
-      health.onclick = () => {
-        const isHealth = document.body && document.body.dataset && document.body.dataset.page === 'companion';
-        if (!isHealth) window.location.href = '/companion';
+    if (graph) {
+      graph.onclick = () => {
+        if (curPage !== 'graph') window.location.href = '/graph';
       };
     }
   }
@@ -1054,28 +1311,52 @@
     }
   }
 
-  function renderTasks(list) {
-    const el = $('tasksList');
+  function renderSwimlanes(tasks, blockers) {
+    const el = $('swimlaneContainer');
     if (!el) return;
     el.innerHTML = '';
-    for (const t of list || []) {
+
+    const groups = {};
+    const addGroup = (slug) => {
+      const key = slug || 'Global / Sem Projeto';
+      if (!groups[key]) groups[key] = { tasks: [], blockers: [] };
+      return key;
+    };
+
+    for (const t of tasks) groups[addGroup(t.projectSlug)].tasks.push(t);
+    for (const b of blockers) groups[addGroup(b.projectSlug)].blockers.push(b);
+
+    const sortedKeys = Object.keys(groups).sort((a, b) => {
+      if (a === 'Global / Sem Projeto') return 1;
+      if (b === 'Global / Sem Projeto') return -1;
+      return a.localeCompare(b);
+    });
+
+    sortedKeys.sort((a, b) => groups[b].blockers.length - groups[a].blockers.length);
+
+    if (sortedKeys.length === 0) {
+      const empty = document.createElement('div');
+      empty.className = 'help';
+      empty.textContent = 'Nenhuma tarefa ou bloqueio pendente hoje.';
+      el.appendChild(empty);
+      return;
+    }
+
+    const createTaskRow = (t) => {
       const row = document.createElement('div');
       row.className = 'rep';
       const pri = (t.priority || '').toUpperCase();
       row.innerHTML = '<div style="display:flex; justify-content:space-between; gap:10px; align-items:center">'
-        + '<div style="min-width:0"><div style="font-weight:700">' + escapeHtml(t.description || '') + '</div>'
-        + '<div style="opacity:.7; font-size:11px; margin-top:4px">' + escapeHtml(String(t.category || ''))
-        + (t.projectSlug ? (' · <span style="font-family:var(--mono); opacity:.9">[' + escapeHtml(String(t.projectSlug)) + ']</span>') : '')
+        + '<div style="min-width:0"><div style="font-weight:600">' + escapeHtml(t.description || '') + '</div>'
+        + '<div style="opacity:.7; font-size:11px; margin-top:4px; font-weight:500;">' + escapeHtml(String(t.category || ''))
         + (pri ? (' · ' + escapeHtml(pri)) : '') + '</div></div>'
         + '<div style="display:flex; gap:8px">'
-        + '<button class="btn small" type="button">Concluir</button>'
-        + '<button class="btn small" type="button">Editar</button>'
+        + '<button class="btn small complete-btn" type="button">Concluir</button>'
+        + '<button class="btn small edit-btn" type="button">Editar</button>'
         + '</div>'
         + '</div>';
-      const btns = row.querySelectorAll('button');
-      const btn = btns[0];
-      if (btns[1]) btns[1].onclick = () => editTask(t);
-      btn.onclick = async () => {
+      row.querySelector('.edit-btn').onclick = () => editTask(t);
+      row.querySelector('.complete-btn').onclick = async () => {
         try {
           setPill('run', 'completing…');
           await api('/api/tasks/complete', { dir: dirOrDefault(), id: t.id });
@@ -1087,55 +1368,108 @@
           setOut(String(e && e.message ? e.message : e));
         }
       };
-      el.appendChild(row);
-    }
-    if (!el.childElementCount) {
-      const empty = document.createElement('div');
-      empty.className = 'help';
-      empty.textContent = 'Nenhuma tarefa em Fazer agora.';
-      el.appendChild(empty);
-    }
-  }
+      return row;
+    };
 
-  function renderBlockers(list) {
-    const el = $('blockersList');
-    if (!el) return;
-    el.innerHTML = '';
-    for (const b of list || []) {
+    const createBlockerRow = (b) => {
       const row = document.createElement('div');
       row.className = 'rep';
+      row.style.borderLeft = '4px solid var(--warn)';
+      row.style.background = 'var(--warn-bg)';
       const sev = String(b.severity || '').toUpperCase();
       row.innerHTML = '<div style="display:flex; justify-content:space-between; gap:10px; align-items:center">'
-        + '<div style="min-width:0"><div style="font-weight:800">' + escapeHtml(sev) + '</div>'
-        + '<div style="margin-top:4px">' + escapeHtml(b.title || '')
-        + (b.projectSlug ? (' <span style="font-family:var(--mono); opacity:.8">[' + escapeHtml(String(b.projectSlug)) + ']</span>') : '')
-        + '</div>'
+        + '<div style="min-width:0"><div style="font-weight:800; color:var(--warn)">' + escapeHtml(sev) + '</div>'
+        + '<div style="margin-top:4px; font-weight:600;">' + escapeHtml(b.title || '') + '</div>'
         + '</div>'
         + '<div style="display:flex; gap:8px; align-items:center">'
-        + '<div style="opacity:.7; font-size:11px; white-space:nowrap">' + escapeHtml(fmtWhen(new Date(b.createdAt || Date.now()).getTime())) + '</div>'
-        + '<button class="btn small" type="button">Editar</button>'
+        + '<div style="opacity:.7; font-size:11px; white-space:nowrap; font-weight:500;">' + escapeHtml(fmtWhen(new Date(b.createdAt || Date.now()).getTime())) + '</div>'
+        + '<button class="btn small edit-btn" type="button" style="border-color:var(--warn); color:var(--warn);">Editar</button>'
         + '</div>'
         + '</div>';
-      const ebtn = row.querySelector('button');
-      if (ebtn) ebtn.onclick = () => editBlocker(b);
-      el.appendChild(row);
-    }
-    if (!el.childElementCount) {
-      const empty = document.createElement('div');
-      empty.className = 'help';
-      empty.textContent = 'Nenhum bloqueio aberto.';
-      el.appendChild(empty);
+      row.querySelector('.edit-btn').onclick = () => editBlocker(b);
+      return row;
+    };
+
+    for (const key of sortedKeys) {
+      const g = groups[key];
+      const swimlane = document.createElement('div');
+      swimlane.className = 'panel';
+      swimlane.style.border = '1px solid var(--border)';
+      swimlane.style.borderRadius = '8px';
+      swimlane.style.boxShadow = 'none';
+      swimlane.style.overflow = 'hidden';
+
+      const head = document.createElement('div');
+      head.style.display = 'flex';
+      head.style.justifyContent = 'space-between';
+      head.style.alignItems = 'center';
+      head.style.cursor = 'pointer';
+      head.style.padding = '10px 16px';
+      head.style.background = 'var(--bg2)';
+      head.style.borderBottom = '1px solid var(--border)';
+      head.style.transition = 'background 0.2s';
+      head.onmouseover = () => head.style.background = 'var(--paper2)';
+      head.onmouseout = () => head.style.background = 'var(--bg2)';
+
+      const bCount = g.blockers.length;
+      const tCount = g.tasks.length;
+
+      head.innerHTML = `
+        <div style="font-weight:700; font-size:13px; display:flex; gap:8px; align-items:center;">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.6; transition: transform 0.2s;"><polyline points="6 9 12 15 18 9"></polyline></svg>
+          <span style="font-family: var(--mono); color: var(--accent);">${escapeHtml(key)}</span>
+        </div>
+        <div style="display:flex; gap:6px; font-size:11px;">
+          ${bCount > 0 ? `<span style="color:var(--warn); background:var(--warn-bg); padding:2px 8px; border-radius:12px; font-weight:700;">🔴 ${bCount} Blockers</span>` : ''}
+          ${tCount > 0 ? `<span style="color:var(--info); background:var(--bg2); border: 1px solid var(--border); padding:2px 8px; border-radius:12px; font-weight:700;">🟢 ${tCount} Tasks</span>` : ''}
+        </div>
+      `;
+
+      const body = document.createElement('div');
+      body.style.display = 'flex';
+      body.style.flexDirection = 'column';
+      body.style.background = 'var(--bg)';
+
+      for (const b of g.blockers) {
+        const r = createBlockerRow(b);
+        r.style.margin = '0';
+        r.style.borderRadius = '0';
+        r.style.borderBottom = '1px solid var(--border)';
+        r.style.borderLeft = '4px solid var(--warn)';
+        r.style.boxShadow = 'none';
+        body.appendChild(r);
+      }
+      for (const t of g.tasks) {
+        const r = createTaskRow(t);
+        r.style.margin = '0';
+        r.style.borderRadius = '0';
+        r.style.borderBottom = '1px solid var(--border)';
+        r.style.borderLeft = '4px solid transparent';
+        r.style.boxShadow = 'none';
+        body.appendChild(r);
+      }
+
+      let isOpen = true;
+      head.onclick = () => {
+        isOpen = !isOpen;
+        body.style.display = isOpen ? 'flex' : 'none';
+        const svg = head.querySelector('svg');
+        if (svg) svg.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(-90deg)';
+      };
+
+      swimlane.appendChild(head);
+      swimlane.appendChild(body);
+      el.appendChild(swimlane);
     }
   }
 
   async function refreshToday() {
     try {
       const [t, b] = await Promise.all([
-        api('/api/tasks/list', { dir: dirOrDefault(), category: 'DO_NOW', status: 'PENDING', limit: 5 }),
-        api('/api/blockers/list', { dir: dirOrDefault(), status: 'OPEN', limit: 5 })
+        api('/api/tasks/list', { dir: dirOrDefault(), category: 'DO_NOW', status: 'PENDING', limit: 50 }),
+        api('/api/blockers/list', { dir: dirOrDefault(), status: 'OPEN', limit: 50 })
       ]);
-      renderTasks((t && t.tasks) || []);
-      renderBlockers((b && b.blockers) || []);
+      renderSwimlanes((t && t.tasks) || [], (b && b.blockers) || []);
       refreshBlockersInsights();
     } catch (e) {
       // keep silent in background refresh
@@ -1355,25 +1689,34 @@
       const nodes = new vis.DataSet(r.nodes);
       const edges = new vis.DataSet(r.edges);
 
+      const style = getComputedStyle(document.body);
+      const bg = style.getPropertyValue('--bg').trim() || '#0f1115';
+      const paper = style.getPropertyValue('--paper').trim() || '#14161a';
+      const primary = style.getPropertyValue('--primary').trim() || '#38bdf8';
+      const accent = style.getPropertyValue('--accent').trim() || '#2dd4bf';
+      const text = style.getPropertyValue('--text').trim() || '#f1f5f9';
+      const line2 = style.getPropertyValue('--line2').trim() || 'rgba(255,255,255,0.12)';
+      const sansFont = style.getPropertyValue('--sans').trim() || 'Inter, sans-serif';
+
       const data = { nodes, edges };
       const options = {
         nodes: {
           shape: 'dot',
           size: 16,
-          font: { color: 'var(--fg)', face: 'var(--sans)' },
+          font: { color: text, face: sansFont },
           borderWidth: 2
         },
         edges: {
-          color: { color: 'var(--border)', highlight: 'var(--brand)' },
+          color: { color: line2, highlight: primary },
           width: 1,
           smooth: { type: 'continuous' }
         },
         groups: {
-          project: { color: { background: 'var(--bg2)', border: 'var(--brand)' } },
-          task: { color: { background: 'var(--bg2)', border: 'var(--info)' }, size: 10 },
-          blocker: { color: { background: 'var(--warn-bg)', border: 'var(--warn)' }, size: 14, shape: 'triangle' },
-          tag: { color: { background: 'var(--bg2)', border: 'var(--border)' }, size: 8, font: { size: 10 } },
-          unassigned: { color: { background: 'var(--bg2)', border: 'var(--border)' }, size: 10 }
+          project: { color: { background: paper, border: primary } },
+          task: { color: { background: paper, border: accent }, size: 10 },
+          blocker: { color: { background: 'rgba(239, 68, 68, 0.15)', border: '#ef4444' }, size: 14, shape: 'triangle' },
+          tag: { color: { background: bg, border: line2 }, size: 8, font: { size: 10, color: text } },
+          unassigned: { color: { background: bg, border: line2 }, size: 10 }
         },
         physics: {
           forceAtlas2Based: { gravitationalConstant: -26, centralGravity: 0.005, springLength: 230, springConstant: 0.18 },
@@ -1388,6 +1731,32 @@
         state.networkInstance.destroy();
       }
       state.networkInstance = new vis.Network(el, data, options);
+
+      // Make nodes actionable
+      state.networkInstance.on('click', (params) => {
+        if (params.nodes.length > 0) {
+          const nodeId = String(params.nodes[0]);
+          if (nodeId.startsWith('tag:')) {
+            const tag = nodeId.replace('tag:', '');
+            const railP = $('railProjects');
+            const pf = $('projectsFilter');
+            if (railP && pf) {
+              pf.value = tag;
+              railP.click();
+              setTimeout(() => { if (window.renderProjects) renderProjects(); }, 50);
+            }
+          } else if (nodeId.startsWith('task:') || nodeId.startsWith('blocker:')) {
+            const railD = $('railDashboard');
+            if (railD) railD.click();
+          } else if (nodeId !== 'unassigned_tasks' && nodeId !== 'unassigned_blockers') {
+            // It's a project slug
+            setTimelineProject(nodeId);
+            const railT = $('railTimeline');
+            if (railT) railT.click();
+          }
+        }
+      });
+
     } catch (e) {
       console.error('Failed to load graph data', e);
     }
@@ -1884,6 +2253,8 @@
   window.renderReportsList = renderReportsList;
   window.renderReportsPage = renderReportsPage;
   window.refreshReportsPage = refreshReportsPage;
+  window.setReportsTab = setReportsTab;
+  window.togglePinReport = togglePinReport;
   window.refreshProjects = refreshProjects;
   window.refreshTimeline = refreshTimeline;
   window.refreshGraph = refreshGraph;
@@ -1911,4 +2282,5 @@
   window.runSuggestedReports = runSuggestedReports;
   window.exportChatObsidian = exportChatObsidian;
   window.askFreya = askFreya;
+  window.askFreyaInline = askFreyaInline;
 })();