@cccarv82/freya 2.14.1 → 2.15.0

package/cli/web-ui.css

@@ -603,12 +603,15 @@ body {
 
 .promptShell {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: stretch;
   width: 100%;
+  /* Occupy ~90% of viewport height minus topbar */
+  min-height: calc(90vh - 60px);
 }
 
 .promptBar {
-  width: min(960px, 100%);
+  width: 100%;
   background: var(--paper);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
@@ -1612,4 +1615,302 @@ textarea:focus {
 
 * {
   border-radius: 0 !important;
+}
+
+/* ── Kanban Board ── */
+.kanban-board {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  min-height: 400px;
+}
+
+@media (max-width: 1100px) {
+  .kanban-board { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 600px) {
+  .kanban-board { grid-template-columns: 1fr; }
+}
+
+.kanban-col {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  border: 1px solid var(--line2);
+  min-height: 300px;
+}
+
+.kanban-col-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  border-bottom: 2px solid var(--line2);
+  flex-shrink: 0;
+}
+
+.kanban-col-head.do-now { border-bottom-color: #ef4444; color: #ef4444; }
+.kanban-col-head.schedule { border-bottom-color: #3b82f6; color: #3b82f6; }
+.kanban-col-head.delegate { border-bottom-color: #f97316; color: #f97316; }
+.kanban-col-head.done { border-bottom-color: #22c55e; color: #22c55e; }
+
+.kanban-col-count {
+  font-size: 12px;
+  font-weight: 700;
+  padding: 1px 8px;
+  background: var(--paper2);
+  border: 1px solid var(--line2);
+}
+
+.kanban-col-body {
+  flex: 1;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  max-height: 600px;
+  min-height: 80px;
+  transition: background 0.15s;
+}
+
+.kanban-col-body.drag-over {
+  background: var(--chip);
+}
+
+.kanban-card {
+  background: var(--paper);
+  border: 1px solid var(--line2);
+  padding: 10px 12px;
+  cursor: grab;
+  transition: box-shadow 0.15s, opacity 0.15s;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.kanban-card:hover {
+  box-shadow: var(--shadow2);
+}
+
+.kanban-card.dragging {
+  opacity: 0.4;
+}
+
+.kanban-card-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.kanban-pri-dot {
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.kanban-card-desc {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.3;
+  word-break: break-word;
+}
+
+.kanban-card-meta {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.kanban-tag {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  background: var(--chip);
+  color: var(--primary);
+  border: 1px solid var(--line2);
+  font-family: var(--mono);
+}
+
+.kanban-due {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  color: var(--muted);
+  border: 1px solid var(--line2);
+}
+
+.kanban-due.overdue {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.kanban-card-actions {
+  display: flex;
+  gap: 4px;
+  justify-content: flex-end;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.kanban-card:hover .kanban-card-actions {
+  opacity: 1;
+}
+
+.kanban-action-btn {
+  background: var(--bg);
+  border: 1px solid var(--line2);
+  color: var(--muted);
+  padding: 2px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.kanban-action-btn:hover {
+  color: var(--text);
+  background: var(--paper2);
+}
+
+.kanban-action-btn.complete-btn:hover {
+  color: #22c55e;
+  border-color: #22c55e;
+}
+
+.kanban-owner {
+  font-size: 10px;
+  color: var(--faint);
+  font-style: italic;
+}
+
+/* Kanban filter */
+.kanban-filter {
+  background: var(--bg);
+  border: 1px solid var(--line2);
+  color: var(--text);
+  padding: 5px 10px;
+  font-size: 12px;
+  font-family: var(--mono);
+  min-width: 180px;
+}
+
+/* Kanban blockers strip */
+.kanban-blockers-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.kanban-blocker-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(239, 68, 68, 0.04);
+  border: 1px solid rgba(239, 68, 68, 0.15);
+  border-left: 3px solid #ef4444;
+  flex: 1 1 300px;
+  max-width: 500px;
+}
+
+.kanban-blocker-sev {
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.5px;
+  padding: 2px 6px;
+  border: 1px solid;
+  flex-shrink: 0;
+}
+
+.kanban-blocker-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Quick-Add Modal ── */
+.qa-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.qa-modal {
+  background: var(--bg);
+  border: 1px solid var(--line2);
+  box-shadow: var(--shadow);
+  width: 440px;
+  max-width: 95vw;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.qa-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.qa-input {
+  background: var(--paper);
+  border: 1px solid var(--line2);
+  color: var(--text);
+  padding: 8px 10px;
+  font-size: 13px;
+  font-family: var(--sans);
+  width: 100%;
+  resize: none;
+}
+
+.qa-input:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.qa-select {
+  background: var(--paper);
+  border: 1px solid var(--line2);
+  color: var(--text);
+  padding: 6px 10px;
+  font-size: 12px;
+  flex: 1;
+}
+
+.qa-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* ── Delta Banner ── */
+.delta-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  margin-bottom: 12px;
+  background: var(--chip);
+  border: 1px solid var(--line2);
+  font-size: 12px;
+  color: var(--text);
+  border-left: 3px solid var(--primary);
 }

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';
@@ -2769,6 +2780,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 +2831,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 +2864,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 +2933,282 @@
   window.askFreya = askFreya;
   window.askFreyaInline = askFreyaInline;
   window.askFreyaFromInput = askFreyaFromInput;
+
+  /* ── Quick-Add Modal ── */
+  function openQuickAdd() {
+    const overlay = $('quickAddOverlay');
+    if (!overlay) return;
+    overlay.style.display = 'flex';
+    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 = '';
+  }
+
+  function closeQuickAdd() {
+    var overlay = $('quickAddOverlay');
+    if (overlay) overlay.style.display = 'none';
+  }
+
+  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 ? 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');
+      if (isKanbanPage) await loadKanban();
+      else await refreshToday();
+    } 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();
+    } 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; });
+  }
+
+  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(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;
+
+        // 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 newDue = prompt('Due date (YYYY-MM-DD):', t.dueDate || '');
+              if (newDue === null) return;
+              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>' : '');
+      list.appendChild(card);
+    });
+  }
+
+  window.loadKanban = loadKanban;
+  window.filterKanban = filterKanban;
+  window.loadDelta = loadDelta;
 })();