@cccarv82/freya 2.15.0 → 2.17.0

package/cli/web-ui.js

@@ -1283,83 +1283,6 @@
     }
   }
 
-  async function refreshIncidents() {
-    try {
-      const r = await api('/api/incidents', { dir: dirOrDefault() });
-      const el = $('incidentsBox');
-      if (el) {
-        const md = r.markdown || '';
-        if (!md) { el.innerHTML = '<div class="help">Nenhum incidente registrado.</div>'; return; }
-        const lines = md.split(/\n/);
-        const cards = [];
-        let current = null;
-        for (const line of lines) {
-          if (line.startsWith('- **')) {
-            if (current) cards.push(current);
-            current = { title: line.replace('- **', '').replace('**', '').trim(), body: [] };
-          } else if (current && line.trim().startsWith('- ')) {
-            current.body.push(line.trim().replace(/^- /, ''));
-          }
-        }
-        if (current) cards.push(current);
-        el.innerHTML = '';
-        if (!cards.length) { el.innerHTML = renderMarkdown(md); return; }
-        for (let idx = 0; idx < cards.length; idx++) {
-          const c = cards[idx];
-          const card = document.createElement('div');
-          card.className = 'reportCard';
-          const dateLine = c.body.find((b) => b.toLowerCase().includes('data'));
-          const impactLine = c.body.find((b) => b.toLowerCase().includes('descricao') || b.toLowerCase().includes('impacto'));
-          const statusLine = c.body.find((b) => /^status\s*:/i.test(b));
-          const statusRaw = statusLine ? statusLine.split(':').slice(1).join(':').trim().toLowerCase() : '';
-          let statusKey = '';
-          if (['open', 'aberto', 'aberta'].includes(statusRaw)) statusKey = 'open';
-          else if (['mitigating', 'mitigando', 'mitigacao', 'mitigação'].includes(statusRaw)) statusKey = 'mitigating';
-          else if (['resolved', 'resolvido', 'resolvida', 'closed', 'fechado', 'fechada'].includes(statusRaw)) statusKey = 'resolved';
-
-          card.innerHTML = '<div class="reportTitle">' + escapeHtml(c.title) + '</div>'
-            + (dateLine ? ('<div class="reportMeta">' + escapeHtml(dateLine) + '</div>') : '')
-            + (impactLine ? ('<div class="help" style="margin-top:4px">' + escapeHtml(impactLine) + '</div>') : '')
-            + c.body.filter((b) => b !== dateLine && b !== impactLine && b !== statusLine).map((b) => '<div class="help" style="margin-top:4px">' + escapeHtml(b) + '</div>').join('');
-
-          if (statusKey) {
-            const actions = document.createElement('div');
-            actions.className = 'reportActions';
-            actions.style.display = 'flex';
-            actions.style.gap = '8px';
-            actions.style.marginTop = '8px';
-            actions.style.flexWrap = 'wrap';
-
-            const label = statusKey === 'open' ? 'aberto' : (statusKey === 'mitigating' ? 'mitigando' : 'resolvido');
-            const pillClass = statusKey === 'resolved' ? 'ok' : (statusKey === 'mitigating' ? 'info' : 'warn');
-            const pill = document.createElement('span');
-            pill.className = 'pill ' + pillClass;
-            pill.textContent = label;
-            actions.appendChild(pill);
-
-            if (statusKey !== 'resolved') {
-              const btn = document.createElement('button');
-              btn.className = 'btn small';
-              btn.type = 'button';
-              btn.textContent = 'Marcar resolvido';
-              btn.onclick = async () => {
-                await api('/api/incidents/resolve', { dir: dirOrDefault(), title: c.title, index: idx });
-                await refreshIncidents();
-              };
-              actions.appendChild(btn);
-            }
-
-            card.appendChild(actions);
-          }
-
-          el.appendChild(card);
-        }
-      }
-    } catch {
-      const el = $('incidentsBox');
-      if (el) el.textContent = 'Falha ao carregar incidentes.';
-    }
-  }
 
   function setHeatmapSort(sort) {
     state.heatmapSort = sort;
@@ -1545,229 +1468,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) {
@@ -2906,7 +2609,6 @@
   window.refreshProjects = refreshProjects;
   window.refreshTimeline = refreshTimeline;
   window.refreshGraph = refreshGraph;
-  window.refreshIncidents = refreshIncidents;
   window.refreshHeatmap = refreshHeatmap;
   window.setHeatmapSort = setHeatmapSort;
   window.setTimelineKind = setTimelineKind;
@@ -2935,16 +2637,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 +2683,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 +2704,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 +2715,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 +2760,8 @@
       renderKanban();
       renderKanbanBlockers();
       loadDelta();
+      // On dashboard, also refresh blockers insights panel
+      if ($('blockersInsightsWrap')) refreshBlockersInsights();
     } catch (e) {
       showToast('err', 'Erro ao carregar kanban');
     }
@@ -3047,6 +2792,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 +2959,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 +2972,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 +3014,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 +3090,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);
     });
   }