@cccarv82/freya 2.15.0 → 2.16.0

package/cli/web-ui.css

@@ -1682,6 +1682,11 @@ textarea:focus {
   background: var(--chip);
 }
 
+/* Compact kanban on dashboard (not standalone /kanban page) */
+body:not([data-page="kanban"]) .kanban-col-body {
+  max-height: 400px;
+}
+
 .kanban-card {
   background: var(--paper);
   border: 1px solid var(--line2);
@@ -1901,6 +1906,48 @@ textarea:focus {
   align-items: center;
 }
 
+.qa-date-wrap {
+  position: relative;
+  width: 160px;
+  display: flex;
+  align-items: center;
+}
+.qa-date-text {
+  padding-right: 32px !important;
+}
+.qa-date-hidden {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+  padding: 0;
+  margin: -1px;
+}
+.qa-date-btn {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 2px 4px;
+  line-height: 1;
+  color: var(--muted);
+  opacity: 0.8;
+  transition: opacity 0.15s;
+}
+.qa-date-btn:hover {
+  opacity: 1;
+}
+
 /* ── Delta Banner ── */
 .delta-banner {
   display: flex;
@@ -1913,4 +1960,110 @@ textarea:focus {
   font-size: 12px;
   color: var(--text);
   border-left: 3px solid var(--primary);
-}
+}
+
+/* ── Detail Panel (click-to-view on kanban cards) ── */
+.detail-panel-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: fadeIn 0.15s ease;
+}
+.detail-panel {
+  background: var(--paper);
+  border: 1px solid var(--line2);
+  border-radius: 12px;
+  width: 520px;
+  max-width: 95vw;
+  max-height: 85vh;
+  overflow-y: auto;
+  padding: 20px 24px;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
+}
+.detail-panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+.detail-panel-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+  word-break: break-word;
+}
+.detail-panel-close {
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 22px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.detail-panel-close:hover {
+  color: var(--text);
+}
+.detail-panel-grid {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 6px 12px;
+  margin-bottom: 12px;
+}
+.detail-row-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted);
+  padding: 3px 0;
+}
+.detail-row-value {
+  font-size: 13px;
+  color: var(--text);
+  padding: 3px 0;
+  word-break: break-word;
+  font-family: var(--mono);
+}
+.detail-panel-section {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+}
+.detail-panel-section-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted);
+  margin-bottom: 8px;
+}
+.detail-panel-comment {
+  font-size: 12px;
+  color: var(--text);
+  padding: 6px 10px;
+  background: var(--bg2);
+  border-radius: 6px;
+  margin-bottom: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.detail-panel-comment-date {
+  font-size: 10px;
+  color: var(--muted);
+  font-family: var(--mono);
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+

package/cli/web-ui.js

@@ -1545,229 +1545,9 @@
     return '#94a3b8';
   }
 
-  function renderSwimlanes(tasks, blockers) {
-    const el = $('swimlaneContainer');
-    if (!el) return;
-    el.innerHTML = '';
-
-    // Update top-level summary chips
-    const chips = $('focusSummaryChips');
-    if (chips) {
-      chips.innerHTML = '';
-      if (blockers.length > 0) {
-        const bc = document.createElement('span');
-        bc.style.cssText = 'font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; background:rgba(239,68,68,0.12); color:#f87171; border:1px solid rgba(239,68,68,0.3);';
-        bc.textContent = blockers.length + ' blocker' + (blockers.length > 1 ? 's' : '');
-        chips.appendChild(bc);
-      }
-      if (tasks.length > 0) {
-        const tc = document.createElement('span');
-        tc.style.cssText = 'font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; background:rgba(34,197,94,0.10); color:#4ade80; border:1px solid rgba(34,197,94,0.25);';
-        tc.textContent = tasks.length + ' task' + (tasks.length > 1 ? 's' : '');
-        chips.appendChild(tc);
-      }
-    }
-
-    // Update progress bar (tasks completed today vs total — we show pending count)
-    const progWrap = $('focusProgressWrap');
-    const progBar = $('focusProgressBar');
-    const progLabel = $('focusProgressLabel');
-    if (progWrap) {
-      if (tasks.length > 0 || blockers.length > 0) {
-        progWrap.style.display = 'flex';
-        // We only have pending tasks here; show blockers impact
-        const blocker_pct = blockers.length === 0 ? 100 : Math.max(10, Math.round((1 - blockers.length / Math.max(tasks.length + blockers.length, 1)) * 100));
-        if (progBar) progBar.style.width = blocker_pct + '%';
-        if (progBar) progBar.style.background = blockers.length > 0 ? '#f97316' : 'var(--accent)';
-        if (progLabel) progLabel.textContent = blockers.length > 0 ? blockers.length + ' blocking' : 'tudo livre';
-      } else {
-        progWrap.style.display = 'none';
-      }
-    }
-
-    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.style.cssText = 'display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; gap:8px; flex:1;';
-      empty.innerHTML = '<div style="font-size:28px; line-height:1;">✅</div>'
-        + '<div style="font-size:14px; font-weight:600; color:var(--text);">Dia limpo!</div>'
-        + '<div style="font-size:12px; color:var(--muted); text-align:center;">Nenhuma tarefa pendente (DO_NOW) nem bloqueios em aberto. Use o campo acima para registrar o que estiver fazendo.</div>';
-      el.appendChild(empty);
-      return;
-    }
-
-    const createTaskRow = (t) => {
-      const row = document.createElement('div');
-      const pc = priColor(t.priority);
-      row.style.cssText = 'display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 16px; background:var(--bg); border-bottom:1px solid var(--border); transition:background 0.15s;';
-      row.onmouseover = () => row.style.background = 'var(--paper)';
-      row.onmouseout = () => row.style.background = 'var(--bg)';
-      row.innerHTML =
-        '<div style="display:flex; align-items:center; gap:10px; min-width:0; flex:1;">'
-        + '<div style="width:8px; height:8px; border-radius:50%; background:' + pc.dot + '; flex-shrink:0;" title="Prioridade: ' + escapeHtml(pc.label) + '"></div>'
-        + '<div style="min-width:0;">'
-        + '<div style="font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">' + escapeHtml(t.description || '') + '</div>'
-        + '<div style="font-size:11px; color:var(--muted); margin-top:2px;">'
-        + escapeHtml(pc.label)
-        + (t.category ? ' · <span style="font-family:var(--mono);">' + escapeHtml(t.category) + '</span>' : '')
-        + '</div>'
-        + '</div></div>'
-        + '<div class="task-actions" style="display:flex; gap:6px; flex-shrink:0; align-items:center;">'
-        + '<button class="btn small complete-btn" type="button" style="padding:3px 10px; font-size:11px;" title="Marcar como concluída">✓ Concluir</button>'
-        + '<button class="btn small edit-btn" type="button" style="padding:3px 8px; font-size:11px;">✎</button>'
-        + '</div>';
-      row.querySelector('.edit-btn').onclick = () => editTask(t);
-
-      var attachCompleteHandler = function() {
-        var cBtn = row.querySelector('.complete-btn');
-        if (!cBtn) return;
-        cBtn.onclick = function() {
-          var actionsDiv = row.querySelector('.task-actions');
-          actionsDiv.innerHTML =
-            '<input type="text" class="comment-input" placeholder="Comentario (opcional)" '
-            + 'style="font-size:11px; padding:3px 8px; background:var(--bg); border:1px solid var(--border); '
-            + 'color:var(--text); width:180px; outline:none; font-family:var(--mono);" />'
-            + '<button class="btn small confirm-btn" type="button" style="padding:3px 10px; font-size:11px; '
-            + 'background:var(--accent); color:#000; font-weight:700;">Confirmar</button>'
-            + '<button class="btn small cancel-btn" type="button" style="padding:3px 8px; font-size:11px; '
-            + 'color:var(--muted);">\u2715</button>';
-
-          var input = actionsDiv.querySelector('.comment-input');
-          input.focus();
-
-          var doComplete = async function() {
-            var comment = input.value.trim();
-            actionsDiv.querySelector('.confirm-btn').disabled = true;
-            actionsDiv.querySelector('.confirm-btn').textContent = '\u2026';
-            try {
-              setPill('run', 'concluindo\u2026');
-              var body = { dir: dirOrDefault(), id: t.id };
-              if (comment) body.comment = comment;
-              await api('/api/tasks/complete', body);
-              row.style.opacity = '0.4';
-              row.style.pointerEvents = 'none';
-              await refreshToday();
-              setPill('ok', 'conclu\u00edda');
-              setTimeout(function() { setPill('ok', 'pronto'); }, 800);
-            } catch (e) {
-              actionsDiv.querySelector('.confirm-btn').disabled = false;
-              actionsDiv.querySelector('.confirm-btn').textContent = 'Confirmar';
-              setPill('err', 'falhou');
-            }
-          };
-
-          actionsDiv.querySelector('.confirm-btn').onclick = doComplete;
-          input.onkeydown = function(e) { if (e.key === 'Enter') doComplete(); };
-          actionsDiv.querySelector('.cancel-btn').onclick = function() {
-            actionsDiv.innerHTML =
-              '<button class="btn small complete-btn" type="button" style="padding:3px 10px; font-size:11px;" '
-              + 'title="Marcar como conclu\u00edda">\u2713 Concluir</button>'
-              + '<button class="btn small edit-btn" type="button" style="padding:3px 8px; font-size:11px;">\u270E</button>';
-            actionsDiv.querySelector('.edit-btn').onclick = function() { editTask(t); };
-            attachCompleteHandler();
-          };
-        };
-      };
-      attachCompleteHandler();
-      return row;
-    };
-
-    const createBlockerRow = (b) => {
-      const row = document.createElement('div');
-      const sev = String(b.severity || '').toUpperCase();
-      const color = sevColor(sev);
-      const when = fmtWhen(new Date(b.createdAt || Date.now()).getTime());
-      row.style.cssText = 'display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 16px; border-bottom:1px solid rgba(239,68,68,0.15); border-left:3px solid ' + color + '; background:rgba(239,68,68,0.04); transition:background 0.15s;';
-      row.onmouseover = () => row.style.background = 'rgba(239,68,68,0.08)';
-      row.onmouseout = () => row.style.background = 'rgba(239,68,68,0.04)';
-      row.innerHTML =
-        '<div style="display:flex; align-items:flex-start; gap:10px; min-width:0; flex:1;">'
-        + '<div style="flex-shrink:0; margin-top:1px;">'
-        + '<span style="font-size:10px; font-weight:800; letter-spacing:0.5px; padding:2px 6px; border-radius:4px; background:' + color + '22; color:' + color + '; border:1px solid ' + color + '44;">' + escapeHtml(sev || 'BLOCKER') + '</span>'
-        + '</div>'
-        + '<div style="min-width:0; flex:1;">'
-        + '<div style="font-weight:600; font-size:13px; color:var(--text);">' + escapeHtml(b.title || '') + '</div>'
-        + '<div style="font-size:11px; color:var(--muted); margin-top:3px;">🕐 ' + escapeHtml(when) + '</div>'
-        + '</div></div>'
-        + '<button class="btn small edit-btn" type="button" style="padding:3px 8px; font-size:11px; flex-shrink:0; border-color:' + color + '66; color:' + color + ';">✎</button>';
-      row.querySelector('.edit-btn').onclick = () => editBlocker(b);
-      return row;
-    };
-
-    for (const key of sortedKeys) {
-      const g = groups[key];
-      const bCount = g.blockers.length;
-      const tCount = g.tasks.length;
-      const hasBlockers = bCount > 0;
-
-      const swimlane = document.createElement('div');
-      swimlane.style.cssText = 'border-bottom:1px solid var(--border); overflow:hidden;';
-
-      const head = document.createElement('div');
-      head.style.cssText = 'display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:9px 16px; background:var(--bg2); transition:background 0.15s;'
-        + (hasBlockers ? 'border-left:3px solid #f97316;' : 'border-left:3px solid transparent;');
-      head.onmouseover = () => head.style.background = 'var(--paper2)';
-      head.onmouseout = () => head.style.background = 'var(--bg2)';
-
-      head.innerHTML = `
-        <div style="display:flex; align-items:center; gap:8px; min-width:0;">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0; opacity:0.5; transition:transform 0.2s;"><polyline points="6 9 12 15 18 9"></polyline></svg>
-          <span style="font-family:var(--mono); font-size:12px; font-weight:700; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${escapeHtml(key)}</span>
-        </div>
-        <div style="display:flex; gap:5px; align-items:center; flex-shrink:0;">
-          ${bCount > 0 ? `<span style="font-size:11px; font-weight:700; padding:2px 7px; border-radius:10px; background:rgba(239,68,68,0.12); color:#f87171; border:1px solid rgba(239,68,68,0.3);">⛔ ${bCount}</span>` : ''}
-          ${tCount > 0 ? `<span style="font-size:11px; font-weight:700; padding:2px 7px; border-radius:10px; background:rgba(34,197,94,0.10); color:#4ade80; border:1px solid rgba(34,197,94,0.25);">✓ ${tCount}</span>` : ''}
-        </div>
-      `;
-
-      const body = document.createElement('div');
-      body.style.cssText = 'display:flex; flex-direction:column; background:var(--bg);';
-
-      for (const b of g.blockers) body.appendChild(createBlockerRow(b));
-      for (const t of g.tasks) body.appendChild(createTaskRow(t));
-
-      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);
-    }
-  }
-
+  // refreshToday now delegates to loadKanban (dashboard uses embedded kanban board)
   async function refreshToday() {
-    showSkeleton('swimlaneContainer');
-    try {
-      const [t, b] = await Promise.all([
-        api('/api/tasks/list', { dir: dirOrDefault(), category: 'DO_NOW', status: 'PENDING', limit: 50 }),
-        api('/api/blockers/list', { dir: dirOrDefault(), status: 'OPEN', limit: 50 })
-      ]);
-      renderSwimlanes((t && t.tasks) || [], (b && b.blockers) || []);
-      refreshBlockersInsights();
-    } catch (e) {
-      // keep silent in background refresh
-    }
+    await loadKanban();
   }
 
   function renderBlockersInsights(payload) {
@@ -2935,16 +2715,45 @@
   window.askFreyaFromInput = askFreyaFromInput;
 
   /* ── Quick-Add Modal ── */
+
+  // Wire hidden date picker → text input (once)
+  var _qaDateWired = false;
+  function wireQaDatePicker() {
+    if (_qaDateWired) return;
+    var picker = $('qaDuePicker');
+    var text = $('qaDue');
+    if (!picker || !text) return;
+    _qaDateWired = true;
+    picker.addEventListener('change', function() {
+      if (picker.value) {
+        text.value = fmtDateBR(picker.value);
+      }
+    });
+    // Auto-format on blur: accept dd/mm/aaaa typed manually
+    text.addEventListener('keyup', function(e) {
+      var v = text.value.replace(/[^\d]/g, '');
+      if (v.length >= 3 && text.value.indexOf('/') < 0) {
+        // Auto-insert slashes: dd/mm/aaaa
+        var formatted = v.slice(0, 2);
+        if (v.length >= 3) formatted += '/' + v.slice(2, 4);
+        if (v.length >= 5) formatted += '/' + v.slice(4, 8);
+        text.value = formatted;
+      }
+    });
+  }
+
   function openQuickAdd() {
     const overlay = $('quickAddOverlay');
     if (!overlay) return;
     overlay.style.display = 'flex';
+    wireQaDatePicker();
     const desc = $('qaDesc');
     if (desc) { desc.value = ''; desc.focus(); }
     var cat = $('qaCat'); if (cat) cat.value = 'DO_NOW';
     var pri = $('qaPriority'); if (pri) pri.value = '';
     var slug = $('qaSlug'); if (slug) slug.value = '';
     var due = $('qaDue'); if (due) due.value = '';
+    var picker = $('qaDuePicker'); if (picker) picker.value = '';
   }
 
   function closeQuickAdd() {
@@ -2952,6 +2761,19 @@
     if (overlay) overlay.style.display = 'none';
   }
 
+  // Parse dd/mm/aaaa → YYYY-MM-DD
+  function parseDateBR(str) {
+    if (!str) return '';
+    var s = str.trim();
+    if (s.indexOf('/') > -1) {
+      var p = s.split('/');
+      if (p.length === 3 && p[0].length === 2 && p[1].length === 2 && p[2].length === 4) {
+        return p[2] + '-' + p[1] + '-' + p[0];
+      }
+    }
+    return s; // fallback: pass as-is (may be YYYY-MM-DD already)
+  }
+
   async function submitQuickAdd() {
     var desc = $('qaDesc');
     var text = desc ? desc.value.trim() : '';
@@ -2960,7 +2782,7 @@
     var cat = $('qaCat'); var catVal = cat ? cat.value : 'DO_NOW';
     var pri = $('qaPriority'); var priVal = pri ? pri.value : '';
     var slug = $('qaSlug'); var slugVal = slug ? slug.value.trim() : '';
-    var due = $('qaDue'); var dueVal = due ? due.value : '';
+    var due = $('qaDue'); var dueVal = due ? parseDateBR(due.value) : '';
 
     var body = { dir: dirOrDefault(), description: text, category: catVal };
     if (priVal) body.priority = priVal;
@@ -2971,8 +2793,7 @@
       await api('/api/tasks/create', body);
       closeQuickAdd();
       showToast('ok', 'Task criada');
-      if (isKanbanPage) await loadKanban();
-      else await refreshToday();
+      await loadKanban();
     } catch (e) {
       showToast('err', 'Erro ao criar task');
     }
@@ -3017,6 +2838,8 @@
       renderKanban();
       renderKanbanBlockers();
       loadDelta();
+      // On dashboard, also refresh blockers insights panel
+      if ($('blockersInsightsWrap')) refreshBlockersInsights();
     } catch (e) {
       showToast('err', 'Erro ao carregar kanban');
     }
@@ -3047,6 +2870,127 @@
     return _kanbanData.tasks.filter(function(t) { return t.projectSlug === filter; });
   }
 
+  // Format ISO date (YYYY-MM-DD or full ISO) to dd/mm/aaaa
+  function fmtDateBR(isoStr) {
+    if (!isoStr) return '';
+    var d = isoStr.slice(0, 10); // YYYY-MM-DD
+    var parts = d.split('-');
+    if (parts.length !== 3) return d;
+    return parts[2] + '/' + parts[1] + '/' + parts[0];
+  }
+
+  // Format ISO datetime to dd/mm/aaaa HH:mm
+  function fmtDateTimeBR(isoStr) {
+    if (!isoStr) return '';
+    var dt = new Date(isoStr);
+    if (isNaN(dt.getTime())) return isoStr;
+    var dd = String(dt.getDate()).padStart(2, '0');
+    var mm = String(dt.getMonth() + 1).padStart(2, '0');
+    var yyyy = dt.getFullYear();
+    var hh = String(dt.getHours()).padStart(2, '0');
+    var min = String(dt.getMinutes()).padStart(2, '0');
+    return dd + '/' + mm + '/' + yyyy + ' ' + hh + ':' + min;
+  }
+
+  // Show detail panel for a task or blocker
+  function showDetailPanel(item, type) {
+    // Remove existing panel
+    var old = document.querySelector('.detail-panel-overlay');
+    if (old) old.remove();
+
+    var overlay = document.createElement('div');
+    overlay.className = 'detail-panel-overlay';
+    overlay.onclick = function(e) { if (e.target === overlay) overlay.remove(); };
+
+    var panel = document.createElement('div');
+    panel.className = 'detail-panel';
+
+    var isTask = type === 'task';
+    var pc = isTask ? priColor(item.priority) : null;
+
+    var html = '<div class="detail-panel-header">';
+    html += '<div style="display:flex; align-items:center; gap:10px; flex:1; min-width:0;">';
+    if (isTask && pc) {
+      html += '<span class="kanban-pri-dot" style="background:' + pc.dot + '; width:12px; height:12px;"></span>';
+    } else {
+      var sColor = sevColor(item.severity);
+      html += '<span style="font-size:11px; font-weight:800; padding:3px 8px; border-radius:4px; background:' + sColor + '22; color:' + sColor + '; border:1px solid ' + sColor + '44;">' + escapeHtml(item.severity || '') + '</span>';
+    }
+    html += '<span class="detail-panel-title">' + escapeHtml(isTask ? item.description : item.title) + '</span>';
+    html += '</div>';
+    html += '<button class="detail-panel-close" onclick="this.closest(\'.detail-panel-overlay\').remove()">&times;</button>';
+    html += '</div>';
+
+    // Info grid
+    html += '<div class="detail-panel-grid">';
+    if (isTask) {
+      html += detailRow('ID', item.id);
+      html += detailRow('Status', item.status);
+      html += detailRow('Categoria', item.category);
+      html += detailRow('Prioridade', pc ? pc.label : 'Nenhuma');
+      html += detailRow('Projeto', item.projectSlug || '—');
+      html += detailRow('Stream', item.streamSlug || '—');
+      html += detailRow('Due Date', item.dueDate ? fmtDateBR(item.dueDate) : '—');
+      html += detailRow('Criada em', fmtDateTimeBR(item.createdAt));
+      if (item.completedAt) html += detailRow('Concluida em', fmtDateTimeBR(item.completedAt));
+      if (item.source) html += detailRow('Fonte', item.source);
+    } else {
+      html += detailRow('ID', item.id);
+      html += detailRow('Severidade', item.severity);
+      html += detailRow('Status', item.status);
+      html += detailRow('Projeto', item.projectSlug || '—');
+      html += detailRow('Responsavel', item.owner || '—');
+      html += detailRow('Proxima Acao', item.nextAction || '—');
+      html += detailRow('Criado em', fmtDateTimeBR(item.createdAt));
+      if (item.resolvedAt) html += detailRow('Resolvido em', fmtDateTimeBR(item.resolvedAt));
+      if (item.source) html += detailRow('Fonte', item.source);
+    }
+    html += '</div>';
+
+    // Comments section (tasks only)
+    if (isTask && item.comments && item.comments.length > 0) {
+      html += '<div class="detail-panel-section">';
+      html += '<div class="detail-panel-section-title">Comentarios</div>';
+      item.comments.forEach(function(c) {
+        var cObj = typeof c === 'string' ? { text: c } : c;
+        html += '<div class="detail-panel-comment">';
+        if (cObj.at) html += '<span class="detail-panel-comment-date">' + fmtDateTimeBR(cObj.at) + '</span>';
+        html += '<span>' + escapeHtml(cObj.text || cObj.comment || String(c)) + '</span>';
+        html += '</div>';
+      });
+      html += '</div>';
+    }
+
+    // Metadata section (raw, if has extra fields)
+    var metaKeys = item.metadata ? Object.keys(item.metadata).filter(function(k) {
+      return ['priority', 'streamSlug', 'comments', 'source'].indexOf(k) < 0 && item.metadata[k];
+    }) : [];
+    if (metaKeys.length > 0) {
+      html += '<div class="detail-panel-section">';
+      html += '<div class="detail-panel-section-title">Metadados Adicionais</div>';
+      html += '<div class="detail-panel-grid">';
+      metaKeys.forEach(function(k) {
+        html += detailRow(k, typeof item.metadata[k] === 'object' ? JSON.stringify(item.metadata[k]) : String(item.metadata[k]));
+      });
+      html += '</div></div>';
+    }
+
+    panel.innerHTML = html;
+    overlay.appendChild(panel);
+    document.body.appendChild(overlay);
+
+    // Close on Escape
+    var escHandler = function(e) {
+      if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', escHandler); }
+    };
+    document.addEventListener('keydown', escHandler);
+  }
+
+  function detailRow(label, value) {
+    return '<div class="detail-row-label">' + escapeHtml(label) + '</div>'
+      + '<div class="detail-row-value">' + escapeHtml(String(value || '')) + '</div>';
+  }
+
   function renderKanban() {
     var tasks = getFilteredTasks();
     var today = new Date().toISOString().slice(0, 10);
@@ -3093,7 +3037,7 @@
         if (t.projectSlug) meta.push('<span class="kanban-tag">' + escapeHtml(t.projectSlug) + '</span>');
         if (t.dueDate) {
           var dueCls = isOverdue ? 'kanban-due overdue' : 'kanban-due';
-          meta.push('<span class="' + dueCls + '">' + escapeHtml(t.dueDate) + '</span>');
+          meta.push('<span class="' + dueCls + '">' + escapeHtml(fmtDateBR(t.dueDate)) + '</span>');
         }
         if (meta.length) html += '<div class="kanban-card-meta">' + meta.join('') + '</div>';
 
@@ -3106,6 +3050,17 @@
 
         card.innerHTML = html;
 
+        // Click to show detail panel (only if not dragging)
+        var _dragged = false;
+        card.addEventListener('mousedown', function() { _dragged = false; });
+        card.addEventListener('mousemove', function() { _dragged = true; });
+        card.addEventListener('click', function(e) {
+          if (_dragged) return;
+          // Don't trigger on action buttons
+          if (e.target.closest('.kanban-card-actions')) return;
+          showDetailPanel(t, 'task');
+        });
+
         // Drag events
         if (cat !== 'COMPLETED') {
           card.addEventListener('dragstart', function(e) {
@@ -3137,8 +3092,17 @@
               if (!newCat) return;
               var newSlug = prompt('Projeto (slug):', t.projectSlug || '');
               if (newSlug === null) return;
-              var newDue = prompt('Due date (YYYY-MM-DD):', t.dueDate || '');
-              if (newDue === null) return;
+              var currentDueBR = t.dueDate ? fmtDateBR(t.dueDate) : '';
+              var newDueBR = prompt('Due date (dd/mm/aaaa):', currentDueBR);
+              if (newDueBR === null) return;
+              // Convert dd/mm/aaaa back to YYYY-MM-DD for API
+              var newDue = '';
+              if (newDueBR && newDueBR.indexOf('/') > -1) {
+                var dp = newDueBR.split('/');
+                if (dp.length === 3) newDue = dp[2] + '-' + dp[1] + '-' + dp[0];
+              } else {
+                newDue = newDueBR; // fallback: accept YYYY-MM-DD too
+              }
               try {
                 await api('/api/tasks/update', {
                   dir: dirOrDefault(), id: t.id,
@@ -3204,6 +3168,8 @@
         + '<span class="kanban-blocker-title">' + escapeHtml(b.title || '') + '</span>'
         + (b.projectSlug ? '<span class="kanban-tag">' + escapeHtml(b.projectSlug) + '</span>' : '')
         + (b.owner ? '<span class="kanban-owner">' + escapeHtml(b.owner) + '</span>' : '');
+      card.style.cursor = 'pointer';
+      card.addEventListener('click', function() { showDetailPanel(b, 'blocker'); });
       list.appendChild(card);
     });
   }

package/cli/web.js

@@ -1272,55 +1272,78 @@ function buildHtml(safeDefault, appVersion) {
             </div>
             </div>
 
-            <div class="centerHead">
-              <div>
-                <h1 style="margin:0">Seu dia em um painel</h1>
-                <div class="subtitle">Use o campo acima para capturar updates do dia (<b>Salvar &amp; Processar</b>) ou consultar o histórico (<b>Perguntar</b>). As respostas aparecem logo abaixo do input.</div>
-              </div>
-              <div class="statusLine">
-                <span class="small" id="last"></span>
+            <!-- Kanban toolbar -->
+            <div class="kanban-toolbar" style="display:flex; justify-content:space-between; align-items:center; padding:0 0 16px; gap:12px; flex-wrap:wrap;">
+              <div style="display:flex; gap:8px; align-items:center;">
+                <select id="kanbanFilterProject" class="kanban-filter" onchange="window.filterKanban()">
+                  <option value="">Todos os projetos</option>
+                </select>
+                <button class="btn small" type="button" onclick="window.loadKanban()">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px;margin-right:4px"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
+                  Atualizar
+                </button>
+                <div class="statusLine" style="margin:0;">
+                  <span class="small" id="last"></span>
+                </div>
               </div>
+              <button class="btn primary small" type="button" onclick="window.openQuickAdd()">+ Nova Task</button>
             </div>
 
-            <section class="panel" style="display:flex; flex-direction:column; min-height:0; margin-bottom:16px;">
-                <!-- Header with live counters -->
-                <div class="panelHead" style="background: linear-gradient(90deg, var(--paper2), var(--paper)); border-left: 4px solid var(--accent); flex-shrink:0;">
-                  <div style="display:flex; align-items:center; gap:10px;">
-                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent); flex-shrink:0;"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
-                    <b style="color: var(--text); font-size: 14px;">Foco de Hoje</b>
-                    <div id="focusSummaryChips" style="display:flex; gap:5px; margin-left:4px;"></div>
-                  </div>
-                  <div class="stack">
-                    <div id="focusProgressWrap" style="display:none; align-items:center; gap:6px; font-size:11px; color:var(--muted);">
-                      <div style="width:80px; height:5px; background:var(--border); border-radius:3px; overflow:hidden;">
-                        <div id="focusProgressBar" style="height:100%; background:var(--accent); border-radius:3px; transition:width 0.4s; width:0%"></div>
-                      </div>
-                      <span id="focusProgressLabel"></span>
-                    </div>
-                    <button class="btn small" type="button" onclick="refreshToday()">
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px;margin-right:4px"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
-                      Atualizar
-                    </button>
-                  </div>
-                </div>
+            <!-- Delta banner -->
+            <div id="kanbanDelta" style="display:none;"></div>
 
-                <!-- Scrollable swimlanes body -->
-                <div class="panelBody" style="flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:0; padding:0; min-height:0;">
-                  <div id="swimlaneContainer" style="display:flex; flex-direction: column; gap: 0; flex:1;"></div>
+            <!-- Kanban columns -->
+            <div id="kanbanBoard" class="kanban-board">
+              <div class="kanban-col" data-category="DO_NOW">
+                <div class="kanban-col-head do-now">
+                  <span class="kanban-col-title">DO NOW</span>
+                  <span class="kanban-col-count" id="countDoNow">0</span>
+                </div>
+                <div class="kanban-col-body" id="colDoNow"></div>
+              </div>
+              <div class="kanban-col" data-category="SCHEDULE">
+                <div class="kanban-col-head schedule">
+                  <span class="kanban-col-title">SCHEDULE</span>
+                  <span class="kanban-col-count" id="countSchedule">0</span>
+                </div>
+                <div class="kanban-col-body" id="colSchedule"></div>
+              </div>
+              <div class="kanban-col" data-category="DELEGATE">
+                <div class="kanban-col-head delegate">
+                  <span class="kanban-col-title">DELEGATE</span>
+                  <span class="kanban-col-count" id="countDelegate">0</span>
+                </div>
+                <div class="kanban-col-body" id="colDelegate"></div>
+              </div>
+              <div class="kanban-col" data-category="COMPLETED">
+                <div class="kanban-col-head done">
+                  <span class="kanban-col-title">DONE (7d)</span>
+                  <span class="kanban-col-count" id="countDone">0</span>
                 </div>
+                <div class="kanban-col-body" id="colDone"></div>
+              </div>
+            </div>
 
-                <!-- Insights strip (collapsed by default, expands when content is available) -->
-                <div id="blockersInsightsWrap" style="flex-shrink:0; border-top: 1px solid var(--border); display:none;">
-                  <div style="display:flex; justify-content:space-between; align-items:center; padding: 8px 16px 4px;">
-                    <div style="font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted);">
-                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-1px;margin-right:4px"><path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2z"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
-                      Insights de Bloqueios
-                    </div>
-                    <button class="btn small" type="button" onclick="refreshBlockersInsights()" style="font-size:10px; padding:2px 6px;">↻</button>
-                  </div>
-                  <div id="blockersInsights" style="padding: 4px 16px 12px; font-size:12px; color:var(--muted);"></div>
+            <!-- Blockers strip below kanban -->
+            <div id="kanbanBlockers" style="margin-top:20px; display:none;">
+              <div style="font-size:13px; font-weight:700; color:var(--text); margin-bottom:8px; display:flex; align-items:center; gap:6px;">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+                Blockers Ativos
+              </div>
+              <div id="kanbanBlockersList" class="kanban-blockers-list"></div>
+            </div>
+
+            <!-- Insights de bloqueios -->
+            <div id="blockersInsightsWrap" style="margin-top:16px; border-top: 1px solid var(--border); display:none;">
+              <div style="display:flex; justify-content:space-between; align-items:center; padding: 8px 0 4px;">
+                <div style="font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted);">
+                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-1px;margin-right:4px"><path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2z"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+                  Insights de Bloqueios
                 </div>
-            </section>
+                <button class="btn small" type="button" onclick="refreshBlockersInsights()" style="font-size:10px; padding:2px 6px;">↻</button>
+              </div>
+              <div id="blockersInsights" style="padding: 4px 0 12px; font-size:12px; color:var(--muted);"></div>
+            </div>
 
           </div>
         </main>
@@ -1352,7 +1375,11 @@ function buildHtml(safeDefault, appVersion) {
       </div>
       <div class="qa-row">
         <input id="qaSlug" class="qa-input" placeholder="Projeto (slug)" style="flex:1;" />
-        <input id="qaDue" type="date" class="qa-input" style="width:160px;" />
+        <div class="qa-date-wrap">
+          <input id="qaDue" type="text" class="qa-input qa-date-text" placeholder="dd/mm/aaaa" maxlength="10" />
+          <input id="qaDuePicker" type="date" class="qa-date-hidden" tabindex="-1" />
+          <button type="button" class="qa-date-btn" onclick="var p=this.parentElement.querySelector('#qaDuePicker'); p.showPicker ? p.showPicker() : p.click();" title="Abrir calendario">&#128197;</button>
+        </div>
       </div>
       <div class="qa-row" style="justify-content:flex-end;">
         <button class="btn small" type="button" onclick="window.closeQuickAdd()">Cancelar</button>
@@ -4256,7 +4283,10 @@ async function cmdWeb({ port, dir, open, dev }) {
               dueDate: t.due_date || null,
               projectSlug: t.project_slug,
               priority: meta.priority,
-              streamSlug: meta.streamSlug
+              streamSlug: meta.streamSlug,
+              comments: meta.comments || [],
+              source: meta.source || null,
+              metadata: meta
             };
           });
 
@@ -4265,15 +4295,23 @@ async function cmdWeb({ port, dir, open, dev }) {
             ORDER BY
               CASE severity WHEN 'CRITICAL' THEN 0 WHEN 'HIGH' THEN 1 WHEN 'MEDIUM' THEN 2 WHEN 'LOW' THEN 3 ELSE 9 END ASC,
               created_at ASC
-          `).all().map(b => ({
-            id: b.id,
-            title: b.title,
-            severity: b.severity,
-            status: b.status,
-            projectSlug: b.project_slug,
-            owner: b.owner,
-            createdAt: b.created_at
-          }));
+          `).all().map(b => {
+            let meta = {};
+            try { meta = b.metadata ? JSON.parse(b.metadata) : {}; } catch { meta = {}; }
+            return {
+              id: b.id,
+              title: b.title,
+              severity: b.severity,
+              status: b.status,
+              projectSlug: b.project_slug,
+              owner: b.owner,
+              nextAction: b.next_action,
+              createdAt: b.created_at,
+              resolvedAt: b.resolved_at,
+              source: meta.source || null,
+              metadata: meta
+            };
+          });
 
           return safeJson(res, 200, { ok: true, tasks, blockers: openBlockers });
         }
@@ -4675,7 +4713,11 @@ function buildKanbanHtml(safeDefault, appVersion) {
       </div>
       <div class="qa-row">
         <input id="qaSlug" class="qa-input" placeholder="Projeto (slug)" style="flex:1;" />
-        <input id="qaDue" type="date" class="qa-input" style="width:160px;" />
+        <div class="qa-date-wrap">
+          <input id="qaDue" type="text" class="qa-input qa-date-text" placeholder="dd/mm/aaaa" maxlength="10" />
+          <input id="qaDuePicker" type="date" class="qa-date-hidden" tabindex="-1" />
+          <button type="button" class="qa-date-btn" onclick="var p=this.parentElement.querySelector('#qaDuePicker'); p.showPicker ? p.showPicker() : p.click();" title="Abrir calendario">&#128197;</button>
+        </div>
       </div>
       <div class="qa-row" style="justify-content:flex-end;">
         <button class="btn small" type="button" onclick="window.closeQuickAdd()">Cancelar</button>

package/package.json

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