@cccarv82/freya 2.14.1 → 2.16.0

package/cli/web-ui.js

@@ -341,6 +341,11 @@
       persistChatItem({ ts: Date.now(), role, markdown: !!opts.markdown, text: raw });
     }
 
+    // show the thread now that it has content
+    thread.style.display = 'flex';
+    thread.style.padding = '12px';
+    thread.style.borderTop = '1px solid var(--border)';
+
     // keep newest in view
     try {
       thread.scrollTop = thread.scrollHeight;
@@ -477,8 +482,8 @@
     const thread = $('chatThread');
     if (!thread) return;
     const hasContent = thread.children.length > 0;
+    thread.style.display = hasContent ? 'flex' : 'none';
     thread.style.padding = hasContent ? '12px' : '0';
-    thread.style.maxHeight = hasContent ? '280px' : '0';
     thread.style.borderTop = hasContent ? '1px solid var(--border)' : 'none';
   }
 
@@ -1431,6 +1436,7 @@
     const health = $('railCompanion');
     const graph = $('railGraph');
     const docs = $('railDocs');
+    const kanban = $('railKanban');
 
     const curPage = (document.body && document.body.dataset) ? document.body.dataset.page : null;
     const isDashboard = !curPage || curPage === 'dashboard';
@@ -1460,6 +1466,11 @@
         if (curPage !== 'companion') window.location.href = '/companion';
       };
     }
+    if (kanban) {
+      kanban.onclick = () => {
+        if (curPage !== 'kanban') window.location.href = '/kanban';
+      };
+    }
     if (tl) {
       tl.onclick = () => {
         if (curPage !== 'timeline') window.location.href = '/timeline';
@@ -1534,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) {
@@ -2769,6 +2560,7 @@
   const isTimelinePage = document.body && document.body.dataset && document.body.dataset.page === 'timeline';
   const isCompanionPage = document.body && document.body.dataset && document.body.dataset.page === 'companion';
   const isGraphPage = document.body && document.body.dataset && document.body.dataset.page === 'graph';
+  const isKanbanPage = document.body && document.body.dataset && document.body.dataset.page === 'kanban';
 
   // Load persisted settings from the workspace + bootstrap (auto-init + auto-health)
   (async () => {
@@ -2819,6 +2611,11 @@
       return;
     }
 
+    if (isKanbanPage) {
+      await loadKanban();
+      return;
+    }
+
     // If workspace isn't initialized yet, auto-init (reduces clicks)
     try {
       if (defaults && defaults.workspaceOk === false) {
@@ -2847,16 +2644,20 @@
       if (typeof saveAndPlan === 'function') saveAndPlan();
       return;
     }
-    // Ctrl/Cmd+K: Focus search/input on current page
+    // Ctrl/Cmd+K: Open quick-add modal
     if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
       e.preventDefault();
-      const target = $('inboxText') || $('reportsFilter') || $('projectsFilter') || $('timelineFilter');
-      if (target) target.focus();
+      openQuickAdd();
       return;
     }
-    // Escape: Blur active element
-    if (e.key === 'Escape' && document.activeElement) {
-      document.activeElement.blur();
+    // Escape: Close quick-add modal or blur active element
+    if (e.key === 'Escape') {
+      const overlay = $('quickAddOverlay');
+      if (overlay && overlay.style.display !== 'none') {
+        closeQuickAdd();
+        return;
+      }
+      if (document.activeElement) document.activeElement.blur();
     }
   });
 
@@ -2912,4 +2713,468 @@
   window.askFreya = askFreya;
   window.askFreyaInline = askFreyaInline;
   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() {
+    var overlay = $('quickAddOverlay');
+    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() : '';
+    if (!text) { showToast('err', 'Descricao obrigatoria'); return; }
+
+    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 ? parseDateBR(due.value) : '';
+
+    var body = { dir: dirOrDefault(), description: text, category: catVal };
+    if (priVal) body.priority = priVal;
+    if (slugVal) body.projectSlug = slugVal;
+    if (dueVal) body.dueDate = dueVal;
+
+    try {
+      await api('/api/tasks/create', body);
+      closeQuickAdd();
+      showToast('ok', 'Task criada');
+      await loadKanban();
+    } catch (e) {
+      showToast('err', 'Erro ao criar task');
+    }
+  }
+
+  window.openQuickAdd = openQuickAdd;
+  window.closeQuickAdd = closeQuickAdd;
+  window.submitQuickAdd = submitQuickAdd;
+
+  /* ── Delta Banner ── */
+  async function loadDelta() {
+    var el = $('kanbanDelta') || $('deltaBanner');
+    if (!el) return;
+    try {
+      var res = await api('/api/summary/delta', { dir: dirOrDefault() });
+      if (!res || !res.delta) { el.style.display = 'none'; return; }
+      var d = res.delta;
+      var parts = [];
+      if (d.completedTasks > 0) parts.push(d.completedTasks + ' concluida(s)');
+      if (d.resolvedBlockers > 0) parts.push(d.resolvedBlockers + ' blocker(s) resolvido(s)');
+      if (d.newTasks > 0) parts.push(d.newTasks + ' nova(s)');
+      if (d.newBlockers > 0) parts.push(d.newBlockers + ' novo(s) blocker(s)');
+      if (d.overdueTasks > 0) parts.push(d.overdueTasks + ' atrasada(s)');
+      if (parts.length === 0) { el.style.display = 'none'; return; }
+      el.style.display = 'flex';
+      el.className = 'delta-banner';
+      el.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>'
+        + '<span>Ultimas 24h: ' + escapeHtml(parts.join(' \u00b7 ')) + '</span>';
+    } catch { el.style.display = 'none'; }
+  }
+
+  /* ── Kanban Board ── */
+  var _kanbanData = { tasks: [], blockers: [] };
+
+  async function loadKanban() {
+    try {
+      var res = await api('/api/tasks/kanban', { dir: dirOrDefault() });
+      if (!res || !res.ok) return;
+      _kanbanData.tasks = res.tasks || [];
+      _kanbanData.blockers = res.blockers || [];
+      populateKanbanProjects();
+      renderKanban();
+      renderKanbanBlockers();
+      loadDelta();
+      // On dashboard, also refresh blockers insights panel
+      if ($('blockersInsightsWrap')) refreshBlockersInsights();
+    } catch (e) {
+      showToast('err', 'Erro ao carregar kanban');
+    }
+  }
+
+  function populateKanbanProjects() {
+    var sel = $('kanbanFilterProject');
+    if (!sel) return;
+    var slugs = new Set();
+    _kanbanData.tasks.forEach(function(t) { if (t.projectSlug) slugs.add(t.projectSlug); });
+    _kanbanData.blockers.forEach(function(b) { if (b.projectSlug) slugs.add(b.projectSlug); });
+    var current = sel.value;
+    sel.innerHTML = '<option value="">Todos os projetos</option>';
+    Array.from(slugs).sort().forEach(function(s) {
+      var opt = document.createElement('option');
+      opt.value = s; opt.textContent = s;
+      sel.appendChild(opt);
+    });
+    sel.value = current;
+  }
+
+  function filterKanban() { renderKanban(); renderKanbanBlockers(); }
+
+  function getFilteredTasks() {
+    var sel = $('kanbanFilterProject');
+    var filter = sel ? sel.value : '';
+    if (!filter) return _kanbanData.tasks;
+    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);
+    var sevenAgo = new Date(Date.now() - 7 * 86400000).toISOString();
+
+    var cols = {
+      DO_NOW: [], SCHEDULE: [], DELEGATE: [], COMPLETED: []
+    };
+
+    tasks.forEach(function(t) {
+      if (t.status === 'COMPLETED') {
+        if (t.completedAt && t.completedAt >= sevenAgo) cols.COMPLETED.push(t);
+      } else if (t.status === 'PENDING' && cols[t.category]) {
+        cols[t.category].push(t);
+      }
+    });
+
+    var idMap = { DO_NOW: 'colDoNow', SCHEDULE: 'colSchedule', DELEGATE: 'colDelegate', COMPLETED: 'colDone' };
+    var countMap = { DO_NOW: 'countDoNow', SCHEDULE: 'countSchedule', DELEGATE: 'countDelegate', COMPLETED: 'countDone' };
+
+    Object.keys(cols).forEach(function(cat) {
+      var el = $(idMap[cat]);
+      var countEl = $(countMap[cat]);
+      if (countEl) countEl.textContent = cols[cat].length;
+      if (!el) return;
+      el.innerHTML = '';
+
+      cols[cat].forEach(function(t) {
+        var card = document.createElement('div');
+        card.className = 'kanban-card';
+        card.draggable = (cat !== 'COMPLETED');
+        card.dataset.taskId = t.id;
+        card.dataset.category = cat;
+
+        var pc = priColor(t.priority);
+        var isOverdue = t.dueDate && t.dueDate < today && t.status === 'PENDING';
+
+        var html = '<div class="kanban-card-header">'
+          + '<span class="kanban-pri-dot" style="background:' + pc.dot + ';" title="' + escapeHtml(pc.label) + '"></span>'
+          + '<span class="kanban-card-desc">' + escapeHtml(t.description || '') + '</span>'
+          + '</div>';
+
+        var meta = [];
+        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(fmtDateBR(t.dueDate)) + '</span>');
+        }
+        if (meta.length) html += '<div class="kanban-card-meta">' + meta.join('') + '</div>';
+
+        if (cat !== 'COMPLETED') {
+          html += '<div class="kanban-card-actions">'
+            + '<button class="kanban-action-btn complete-btn" title="Concluir">\u2713</button>'
+            + '<button class="kanban-action-btn edit-btn" title="Editar">\u270E</button>'
+            + '</div>';
+        }
+
+        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) {
+            e.dataTransfer.setData('text/plain', t.id);
+            e.dataTransfer.effectAllowed = 'move';
+            card.classList.add('dragging');
+          });
+          card.addEventListener('dragend', function() {
+            card.classList.remove('dragging');
+          });
+
+          // Complete button
+          var completeBtn = card.querySelector('.complete-btn');
+          if (completeBtn) {
+            completeBtn.onclick = async function() {
+              try {
+                await api('/api/tasks/complete', { dir: dirOrDefault(), id: t.id });
+                showToast('ok', 'Concluida');
+                await loadKanban();
+              } catch { showToast('err', 'Falhou'); }
+            };
+          }
+
+          // Edit button - inline edit via prompt
+          var editBtn = card.querySelector('.edit-btn');
+          if (editBtn) {
+            editBtn.onclick = async function() {
+              var newCat = prompt('Categoria (DO_NOW|SCHEDULE|DELEGATE):', cat);
+              if (!newCat) return;
+              var newSlug = prompt('Projeto (slug):', t.projectSlug || '');
+              if (newSlug === 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,
+                  patch: { category: newCat, projectSlug: newSlug, dueDate: newDue || null }
+                });
+                showToast('ok', 'Atualizada');
+                await loadKanban();
+              } catch { showToast('err', 'Falhou'); }
+            };
+          }
+        }
+
+        el.appendChild(card);
+      });
+
+      // Drop zone
+      if (cat !== 'COMPLETED') {
+        el.addEventListener('dragover', function(e) {
+          e.preventDefault();
+          e.dataTransfer.dropEffect = 'move';
+          el.classList.add('drag-over');
+        });
+        el.addEventListener('dragleave', function() {
+          el.classList.remove('drag-over');
+        });
+        el.addEventListener('drop', async function(e) {
+          e.preventDefault();
+          el.classList.remove('drag-over');
+          var taskId = e.dataTransfer.getData('text/plain');
+          if (!taskId) return;
+          try {
+            await api('/api/tasks/update', {
+              dir: dirOrDefault(), id: taskId,
+              patch: { category: cat }
+            });
+            showToast('ok', 'Movida para ' + cat);
+            await loadKanban();
+          } catch { showToast('err', 'Falhou'); }
+        });
+      }
+    });
+  }
+
+  function renderKanbanBlockers() {
+    var wrap = $('kanbanBlockers');
+    var list = $('kanbanBlockersList');
+    if (!wrap || !list) return;
+
+    var sel = $('kanbanFilterProject');
+    var filter = sel ? sel.value : '';
+    var blockers = _kanbanData.blockers;
+    if (filter) blockers = blockers.filter(function(b) { return b.projectSlug === filter; });
+
+    if (blockers.length === 0) { wrap.style.display = 'none'; return; }
+    wrap.style.display = 'block';
+    list.innerHTML = '';
+
+    blockers.forEach(function(b) {
+      var card = document.createElement('div');
+      card.className = 'kanban-blocker-card';
+      var color = sevColor(b.severity);
+      card.innerHTML = '<span class="kanban-blocker-sev" style="background:' + color + '22; color:' + color + '; border-color:' + color + '44;">' + escapeHtml(b.severity || 'BLOCKER') + '</span>'
+        + '<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);
+    });
+  }
+
+  window.loadKanban = loadKanban;
+  window.filterKanban = filterKanban;
+  window.loadDelta = loadDelta;
 })();