mdboard 1.2.0 → 1.3.0

package/src/client/board.js

@@ -0,0 +1,157 @@
+/* ══════════════════════════════════════════════════════════════
+   BOARD VIEW
+   ══════════════════════════════════════════════════════════════ */
+var boardFilters = { search: '', priority: '', epic: '', milestone: '' };
+
+function renderBoardFilters() {
+  var c = document.getElementById('board-filters');
+  var ep = [], ms = [];
+  D.tasks.forEach(function(f) {
+    if (f.epic && ep.indexOf(f.epic) === -1) ep.push(f.epic);
+    if (f.milestone && ms.indexOf(f.milestone) === -1) ms.push(f.milestone);
+  });
+
+  var epicPlural = ENTITY_NAMES.epic ? ENTITY_NAMES.epic.plural : 'Epics';
+  var msPlural = ENTITY_NAMES.milestone ? ENTITY_NAMES.milestone.plural : 'Milestones';
+
+  function opts(arr, key, label) {
+    return '<select data-filter="' + key + '"><option value="">All ' + label + '</option>' +
+      arr.map(function(v) { return '<option value="' + escHtml(v) + '"' + (boardFilters[key] === v ? ' selected' : '') + '>' + escHtml(v) + '</option>'; }).join('') + '</select>';
+  }
+
+  var createBtn = isSourceWritable() ?
+    '<button class="btn btn-sm btn-create" id="board-create-btn">+ New ' + escHtml(ENTITY_NAMES.task ? ENTITY_NAMES.task.singular : 'Task') + '</button>' : '';
+
+  c.innerHTML = createBtn +
+    '<input type="text" data-filter="search" placeholder="Search cards..." value="' + escHtml(boardFilters.search) + '">' +
+    '<select data-filter="priority"><option value="">All Priorities</option>' +
+    PRIORITIES.map(function(p) { return '<option value="' + p + '"' + (boardFilters.priority === p ? ' selected' : '') + '>' + (PRIORITY_LABELS[p] || p) + '</option>'; }).join('') + '</select>' +
+    opts(ep, 'epic', epicPlural) + opts(ms, 'milestone', msPlural);
+
+  c.querySelectorAll('input[data-filter]').forEach(function(el) {
+    el.addEventListener('input', function() { boardFilters[el.dataset.filter] = el.value; renderBoard(); });
+  });
+  c.querySelectorAll('select[data-filter]').forEach(function(el) {
+    el.addEventListener('change', function() { boardFilters[el.dataset.filter] = el.value; renderBoard(); });
+  });
+
+  var btn = document.getElementById('board-create-btn');
+  if (btn) btn.addEventListener('click', function() { openCreateDialog('tasks'); });
+}
+
+function getFilteredBoardTasks() {
+  var list = D.tasks.slice();
+  var f = boardFilters;
+  if (f.search) { var q = f.search.toLowerCase(); list = list.filter(function(x) { return (x.id || '').toLowerCase().indexOf(q) !== -1 || (x.title || '').toLowerCase().indexOf(q) !== -1; }); }
+  if (f.priority) list = list.filter(function(x) { return x.priority === f.priority; });
+  if (f.epic) list = list.filter(function(x) { return x.epic === f.epic; });
+  if (f.milestone) list = list.filter(function(x) { return x.milestone === f.milestone; });
+  return list;
+}
+
+function renderBoard() {
+  var sprint = D.sprints.find(function(s) { return s.status === 'active'; });
+  var sbar = document.getElementById('sprint-bar');
+  if (sprint) {
+    var planned = sprint.planned_points || 0;
+    var completed = sprint.completed_points || 0;
+    var pct = planned ? Math.round(completed / planned * 100) : 0;
+    sbar.style.display = '';
+    sbar.innerHTML =
+      '<div class="sprint-goal"><b>' + escHtml(sprint.id || '') + '</b>' + (sprint.goal ? ' &mdash; ' + escHtml(sprint.goal) : '') + '</div>' +
+      '<div style="width:160px"><div class="progress progress-accent"><div class="progress-fill" style="width:' + pct + '%"></div></div>' +
+      '<div style="font-size:11px;color:var(--text3);margin-top:2px;font-family:var(--mono)">' + completed + '/' + planned + ' pts</div></div>' +
+      '<div class="sprint-dates">' + fmtDate(sprint.start_date) + ' &mdash; ' + fmtDate(sprint.end_date) + '</div>';
+  } else { sbar.style.display = 'none'; }
+
+  var board = document.getElementById('board');
+  if (!D.loaded) {
+    board.innerHTML = BOARD_COLS.map(function() {
+      return '<div class="column"><div class="column-header"><div class="skeleton skeleton-line" style="width:80px;height:16px"></div></div><div class="column-body">' +
+        '<div class="skeleton skeleton-card"></div><div class="skeleton skeleton-card"></div></div></div>';
+    }).join('');
+    return;
+  }
+
+  var filteredTasks = getFilteredBoardTasks();
+  var taskSingular = ENTITY_NAMES.task ? ENTITY_NAMES.task.singular.toLowerCase() : 'task';
+
+  if (!D.tasks.length) {
+    board.innerHTML = '<div class="empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 12h6M12 9v6"/></svg><p>No ' + escHtml(taskSingular) + 's yet. Create ' + escHtml(taskSingular) + ' files in your project/ directory to get started.</p></div>';
+    return;
+  }
+
+  board.innerHTML = BOARD_COLS.map(function(status) {
+    var cards = filteredTasks.filter(function(f) { return f.status === status; });
+    return '<div class="column" data-status="' + status + '">' +
+      '<div class="column-header"><span class="col-title">' + statusIcon(status) + ' ' + (STATUS_LABELS[status] || status) + '</span><span class="col-count">' + cards.length + '</span></div>' +
+      '<div class="column-body">' + cards.map(renderCard).join('') + '</div></div>';
+  }).join('');
+
+  setupDragDrop();
+}
+
+function renderCard(f) {
+  var ec = f.epic ? epicColor(f.epic) : '';
+  var assigned = Array.isArray(f.assigned) ? f.assigned.join(', ') : (f.assigned || '');
+  return '<div class="card" draggable="true" data-id="' + escHtml(f.id || '') + '" data-status="' + escHtml(f.status || '') + '">' +
+    '<div class="card-header">' +
+      '<span class="card-priority">' + priorityIcon(f.priority) + '</span>' +
+      '<span class="card-id">' + escHtml(f.id || '') + '</span>' +
+    '</div>' +
+    '<div class="card-title">' + escHtml(f.title || '') + '</div>' +
+    '<div class="card-meta">' +
+      (f.points != null ? '<span class="pill pill-points">' + f.points + ' pts</span>' : '') +
+      (f.epic ? '<span class="pill pill-epic" style="background:' + ec + '">' + escHtml(f.epic) + '</span>' : '') +
+      (f.ai && Object.keys(f.ai).length > 0 ? '<span class="pill pill-ai" title="AI properties">&#9889;</span>' : '') +
+      (assigned ? '<span class="card-assigned">' + escHtml(assigned) + '</span>' : '') +
+    '</div></div>';
+}
+
+/* ── Drag & Drop ─────────────────────────────────────────── */
+function setupDragDrop() {
+  document.querySelectorAll('.card[draggable]').forEach(function(card) {
+    card.addEventListener('dragstart', function(e) {
+      e.dataTransfer.setData('text/plain', card.dataset.id);
+      e.dataTransfer.effectAllowed = 'move';
+      card.classList.add('dragging');
+    });
+    card.addEventListener('dragend', function() {
+      card.classList.remove('dragging');
+      document.querySelectorAll('.column.drag-over').forEach(function(c) { c.classList.remove('drag-over'); });
+    });
+    card.addEventListener('click', function(e) {
+      if (e.defaultPrevented) return;
+      var task = D.tasks.find(function(f) { return f.id === card.dataset.id; });
+      if (task) openPanel('tasks', task);
+    });
+  });
+
+  document.querySelectorAll('.column').forEach(function(col) {
+    col.addEventListener('dragover', function(e) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      col.classList.add('drag-over');
+    });
+    col.addEventListener('dragleave', function(e) {
+      if (e.target === col || !col.contains(e.relatedTarget)) {
+        col.classList.remove('drag-over');
+      }
+    });
+    col.addEventListener('drop', function(e) {
+      e.preventDefault();
+      col.classList.remove('drag-over');
+      var taskId = e.dataTransfer.getData('text/plain');
+      var newStatus = col.dataset.status;
+      if (!taskId || !newStatus) return;
+
+      // Optimistic update
+      var task = D.tasks.find(function(f) { return f.id === taskId; });
+      if (task && task.status !== newStatus) {
+        task.status = newStatus;
+        renderBoard();
+        patchItem('tasks', taskId, { status: newStatus });
+      }
+    });
+  });
+}

package/src/client/core.js

@@ -0,0 +1,331 @@
+/* ══════════════════════════════════════════════════════════════
+   ICON SHAPES — SVG generators by icon name
+   ══════════════════════════════════════════════════════════════ */
+var ICON_SHAPES = {
+  'dashed-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5" stroke-dasharray="3 2"/></svg>'; },
+  'circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/></svg>'; },
+  'half-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M8 2A6 6 0 0 1 8 14Z" fill="' + c + '"/></svg>'; },
+  'three-quarter-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M8 2A6 6 0 1 1 2 8L8 8Z" fill="' + c + '"/></svg>'; },
+  'check-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="' + c + '"/><path d="M5 8.5L7 10.5L11 5.5" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'; },
+  'x-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5" stroke="' + c + '" stroke-width="1.5" stroke-linecap="round"/></svg>'; },
+  'slash-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M4.5 11.5L11.5 4.5" stroke="' + c + '" stroke-width="1.5" stroke-linecap="round"/></svg>'; }
+};
+
+/* Config-driven maps — populated by initFromConfig() */
+var STATUS_ICON_MAP = {};
+var STATUS_COLOR_MAP = {};
+var ENTITY_NAMES = {};
+
+function statusIcon(status) {
+  var entry = STATUS_ICON_MAP[status];
+  if (entry) {
+    var fn = ICON_SHAPES[entry.icon];
+    if (fn) return fn(entry.color);
+  }
+  // Fallback: dashed circle
+  return ICON_SHAPES['dashed-circle']('#5A5A63');
+}
+
+function priorityIcon(priority) {
+  var c = '#3A3A40', n = 0;
+  if (D.config && D.config.priorities) {
+    var entry = D.config.priorities.find(function(p) { return p.key === priority; });
+    if (entry) { c = entry.color; n = entry.bars; }
+  } else {
+    switch (priority) {
+      case 'urgent': c = '#F97316'; n = 4; break;
+      case 'high': c = '#F97316'; n = 3; break;
+      case 'medium': c = '#D4A72C'; n = 2; break;
+      case 'low': c = '#5B6EF5'; n = 1; break;
+    }
+  }
+  var bars = '';
+  for (var i = 0; i < 4; i++) {
+    var filled = i < n;
+    var h = 3 + i * 3;
+    var y = 14 - h;
+    bars += '<rect x="' + (1.5 + i * 3.5) + '" y="' + y + '" width="2" height="' + h + '" rx=".5" fill="' + (filled ? c : '#2E2E33') + '"/>';
+  }
+  return '<svg class="icon" viewBox="0 0 16 16">' + bars + '</svg>';
+}
+
+function milestoneIcon(status) {
+  var msStatuses = D.config && D.config.statuses ? D.config.statuses.milestone : null;
+  var entry = msStatuses ? msStatuses.find(function(s) { return s.key === status; }) : null;
+  var c = entry ? entry.color : '#8B8B93';
+
+  switch (status) {
+    case 'active':
+      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="none" stroke="' + c + '" stroke-width="1.5"/><path d="M8 5L11 8L8 11L5 8Z" fill="' + c + '"/></svg>';
+    case 'completed':
+      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="' + c + '"/><path d="M5.5 8L7 9.5L10.5 6" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+    default:
+      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="none" stroke="' + c + '" stroke-width="1.5"/></svg>';
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════
+   DATA STORE
+   ══════════════════════════════════════════════════════════════ */
+var D = {
+  config: null, project: null, milestones: [], epics: [], tasks: [],
+  sprints: [], allSprints: [], metrics: null, health: null, loaded: false,
+  sources: [], activeSource: null, overviewLinks: null, notes: [],
+  aiSuggestions: null, theme: null
+};
+
+/* ── Helpers ─────────────────────────────────────────────── */
+function escHtml(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+
+function epicColor(name) {
+  var colors = ['#5B6EF5','#8B5CF6','#EC4899','#F59E0B','#10B981','#06B6D4','#F97316','#6366F1'];
+  var hash = 0;
+  for (var i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  return colors[Math.abs(hash) % colors.length];
+}
+
+function badgeClass(prefix, value) {
+  if (!value) return prefix + '-backlog';
+  return prefix + '-' + value.toLowerCase().replace(/\s+/g, '-');
+}
+
+function fmtDate(d) { return d ? String(d).substring(0, 10) : ''; }
+
+function daysRemaining(endDate) {
+  if (!endDate) return null;
+  var end = new Date(endDate); var now = new Date();
+  return Math.ceil((end - now) / 86400000);
+}
+
+var STATUSES = ['backlog','todo','in-progress','in-review','done','blocked','cancelled'];
+var PRIORITIES = ['urgent','high','medium','low'];
+var STATUS_LABELS = {backlog:'Backlog',todo:'Todo','in-progress':'In Progress','in-review':'In Review',done:'Done',blocked:'Blocked',cancelled:'Cancelled'};
+var PRIORITY_LABELS = {urgent:'Urgent',high:'High',medium:'Medium',low:'Low'};
+var BOARD_COLS = ['backlog','todo','in-progress','in-review','done'];
+var COMPLETED_STATUS = 'done';
+
+/* ── Toast ───────────────────────────────────────────────── */
+function showToast(msg, type) {
+  var el = document.createElement('div');
+  el.className = 'toast toast-' + (type || 'success');
+  el.textContent = msg;
+  document.body.appendChild(el);
+  setTimeout(function() { el.remove(); }, 3000);
+}
+
+/* ── Data Fetching ───────────────────────────────────────── */
+async function fetchJson(url) {
+  try { var r = await fetch(url); return r.ok ? await r.json() : null; }
+  catch { return null; }
+}
+
+async function patchItem(type, id, updates) {
+  try {
+    var base = apiBase();
+    var r = await fetch(base + '/' + type + '/' + encodeURIComponent(id), {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(updates),
+    });
+    var data = await r.json();
+    if (data && data.ok) {
+      showToast('Saved successfully', 'success');
+      return true;
+    } else {
+      showToast('Error: ' + (data.error || 'Unknown'), 'error');
+      return false;
+    }
+  } catch (e) {
+    showToast('Error: ' + e.message, 'error');
+    return false;
+  }
+}
+
+/* ── CRUD API helpers ─────────────────────────────────────── */
+function apiBase() {
+  if (D.activeSource) return '/api/sources/' + encodeURIComponent(D.activeSource);
+  return '/api';
+}
+
+async function createItem(collection, data) {
+  try {
+    var url = apiBase() + '/' + collection;
+    var r = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    var result = await r.json();
+    if (result && result.ok) {
+      showToast('Created ' + (result.id || ''), 'success');
+      return result;
+    } else {
+      showToast('Error: ' + (result.error || 'Unknown'), 'error');
+      return null;
+    }
+  } catch (e) {
+    showToast('Error: ' + e.message, 'error');
+    return null;
+  }
+}
+
+async function deleteItem(collection, id) {
+  try {
+    var url = apiBase() + '/' + collection + '/' + encodeURIComponent(id);
+    var r = await fetch(url, { method: 'DELETE' });
+    var result = await r.json();
+    if (result && result.ok) {
+      showToast('Archived successfully', 'success');
+      return true;
+    } else {
+      showToast('Error: ' + (result.error || 'Unknown'), 'error');
+      return false;
+    }
+  } catch (e) {
+    showToast('Error: ' + e.message, 'error');
+    return false;
+  }
+}
+
+/* ── Data Loading ────────────────────────────────────────── */
+async function loadAll() {
+  var base = apiBase();
+  var results = await Promise.all([
+    fetchJson(base + '/project'), fetchJson(base + '/milestones'), fetchJson(base + '/epics'),
+    fetchJson(base + '/tasks'), fetchJson(base + '/sprint'), fetchJson(base + '/metrics'),
+    fetchJson(base + '/health'), fetchJson(base + '/sprints'), fetchJson('/api/config'),
+    fetchJson('/api/sources'), fetchJson(base + '/notes')
+  ]);
+  D.project = results[0]; D.milestones = results[1] || []; D.epics = results[2] || [];
+  D.tasks = results[3] || [];
+  if (results[4]) D.sprints = [results[4]]; else D.sprints = [];
+  D.metrics = results[5]; D.health = results[6];
+  D.allSprints = results[7] || [];
+  D.config = results[8];
+  D.sources = results[9] || [];
+  D.notes = results[10] || [];
+  D.loaded = true;
+}
+
+function refreshData() {
+  loadAll().then(function() {
+    initFromConfig();
+    renderAll();
+    if (hasWorkspace()) buildSourceRail();
+  });
+}
+
+function hasWorkspace() {
+  return D.config && D.config.workspace && D.config.workspace.sources && D.config.workspace.sources.length > 0;
+}
+
+/* ── Config-driven initialization ────────────────────────── */
+function initFromConfig() {
+  if (!D.config) return;
+
+  var cfg = D.config;
+
+  // Derive entity names
+  ENTITY_NAMES = cfg.entities || {};
+
+  // Derive statuses, labels, board columns
+  if (cfg.statuses && cfg.statuses.task) {
+    STATUSES = cfg.statuses.task.map(function(s) { return s.key; });
+    STATUS_LABELS = {};
+    cfg.statuses.task.forEach(function(s) { STATUS_LABELS[s.key] = s.label; });
+  }
+
+  // Build icon/color maps for all status types
+  STATUS_ICON_MAP = {};
+  STATUS_COLOR_MAP = {};
+  if (cfg.statuses) {
+    Object.keys(cfg.statuses).forEach(function(entityType) {
+      cfg.statuses[entityType].forEach(function(s) {
+        if (!STATUS_ICON_MAP[s.key]) {
+          STATUS_ICON_MAP[s.key] = { icon: s.icon || 'dashed-circle', color: s.color || '#5A5A63' };
+          STATUS_COLOR_MAP[s.key] = s.color || '#5A5A63';
+        }
+      });
+    });
+  }
+
+  // Derive priorities
+  if (cfg.priorities) {
+    PRIORITIES = cfg.priorities.map(function(p) { return p.key; });
+    PRIORITY_LABELS = {};
+    cfg.priorities.forEach(function(p) { PRIORITY_LABELS[p.key] = p.label; });
+  }
+
+  // Board columns
+  if (cfg.boardColumns) BOARD_COLS = cfg.boardColumns;
+
+  // Completed status
+  if (cfg.completedStatus) COMPLETED_STATUS = cfg.completedStatus;
+
+  generateDynamicStyles();
+}
+
+function generateDynamicStyles() {
+  var css = '';
+  if (D.config && D.config.statuses && D.config.statuses.task) {
+    D.config.statuses.task.forEach(function(s) {
+      var key = s.key;
+      var color = s.color;
+      css += '.badge-' + key + '{background:' + color + '20;color:' + color + '}\n';
+      css += '.card[data-status="' + key + '"]{border-left-color:' + color + '}\n';
+    });
+  }
+  // Milestone/epic/sprint statuses
+  ['milestone', 'epic', 'sprint'].forEach(function(entityType) {
+    if (D.config && D.config.statuses && D.config.statuses[entityType]) {
+      D.config.statuses[entityType].forEach(function(s) {
+        css += '.badge-' + s.key + '{background:' + s.color + '20;color:' + s.color + '}\n';
+      });
+    }
+  });
+  // Priority badges
+  if (D.config && D.config.priorities) {
+    D.config.priorities.forEach(function(p) {
+      css += '.badge-' + p.key + '{background:' + p.color + '20;color:' + p.color + '}\n';
+    });
+  }
+  var styleEl = document.getElementById('dynamic-styles');
+  if (styleEl) styleEl.textContent = css;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   THEME ENGINE
+   ══════════════════════════════════════════════════════════════ */
+function generateThemeCss(themeId) {
+  var theme = THEMES[themeId];
+  if (!theme) return '';
+  var css = '/* mdboard theme: ' + theme.name + ' */\n:root {\n';
+  for (var key in theme.vars) {
+    if (theme.vars.hasOwnProperty(key)) {
+      css += '  --' + key + ': ' + theme.vars[key] + ';\n';
+    }
+  }
+  css += '}\n';
+  return css;
+}
+
+function applyTheme(themeId) {
+  var theme = THEMES[themeId];
+  if (!theme) return;
+  var el = document.getElementById('theme-styles');
+  if (el) el.textContent = generateThemeCss(themeId);
+}
+
+function revertThemePreview() {
+  var el = document.getElementById('theme-styles');
+  if (el) el.textContent = '';
+}
+
+function reloadCustomCss() {
+  var link = document.getElementById('custom-theme');
+  if (link) link.href = '/mdboard.css?t=' + Date.now();
+}
+
+function getActiveTheme() {
+  return D.config && D.config.theme ? D.config.theme : 'default-dark';
+}