mdboard 1.2.0 → 1.3.0

package/src/client/editor.js

@@ -0,0 +1,318 @@
+/* ══════════════════════════════════════════════════════════════
+   EDITOR.JS WRAPPER — md↔blocks conversion + Notion-like UX
+   ══════════════════════════════════════════════════════════════ */
+
+/* ── Inline Markdown ↔ HTML ──────────────────────────────── */
+function inlineMdToHtml(text) {
+  if (!text) return '';
+  text = text.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>');
+  text = text.replace(/\*(.+?)\*/g, '<i>$1</i>');
+  text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
+  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+  return text;
+}
+
+function inlineHtmlToMd(html) {
+  if (!html) return '';
+  var text = html.replace(/<br\s*\/?>/gi, '\n');
+  text = text.replace(/<a[^>]+href="([^"]*)"[^>]*>([^<]*)<\/a>/gi, '[$2]($1)');
+  text = text.replace(/<b>([^<]*)<\/b>/gi, '**$1**');
+  text = text.replace(/<strong>([^<]*)<\/strong>/gi, '**$1**');
+  text = text.replace(/<i>([^<]*)<\/i>/gi, '*$1*');
+  text = text.replace(/<em>([^<]*)<\/em>/gi, '*$1*');
+  text = text.replace(/<code>([^<]*)<\/code>/gi, '`$1`');
+  text = text.replace(/<mark[^>]*>([^<]*)<\/mark>/gi, '==$1==');
+  text = text.replace(/<[^>]+>/g, '');
+  return text;
+}
+
+/* ── Markdown → Editor.js Blocks ────────────────────────── */
+function markdownToBlocks(md) {
+  if (!md || !md.trim()) return [{ type: 'paragraph', data: { text: '' } }];
+
+  var lines = md.split('\n');
+  var blocks = [];
+  var i = 0;
+
+  while (i < lines.length) {
+    var line = lines[i];
+
+    if (line.trim() === '') { i++; continue; }
+
+    if (/^---\s*$/.test(line.trim()) || /^\*\*\*\s*$/.test(line.trim())) {
+      blocks.push({ type: 'delimiter', data: {} });
+      i++; continue;
+    }
+
+    var hMatch = line.match(/^(#{1,6})\s+(.+)$/);
+    if (hMatch) {
+      var lvl = Math.min(hMatch[1].length, 6);
+      blocks.push({ type: 'header', data: { text: inlineMdToHtml(hMatch[2]), level: lvl } });
+      i++; continue;
+    }
+
+    if (line.trim().startsWith('```')) {
+      var code = [];
+      i++;
+      while (i < lines.length && !lines[i].trim().startsWith('```')) {
+        code.push(lines[i]);
+        i++;
+      }
+      blocks.push({ type: 'code', data: { code: code.join('\n') } });
+      i++; continue;
+    }
+
+    if (line.trim().startsWith('> ')) {
+      var quoteLines = [];
+      while (i < lines.length && lines[i].trim().startsWith('> ')) {
+        quoteLines.push(lines[i].trim().substring(2));
+        i++;
+      }
+      blocks.push({ type: 'quote', data: { text: inlineMdToHtml(quoteLines.join('<br>')), caption: '' } });
+      continue;
+    }
+
+    if (/^\s*-\s+\[[ x]\]\s+/.test(line)) {
+      var checkItems = [];
+      while (i < lines.length && /^\s*-\s+\[[ x]\]\s+/.test(lines[i])) {
+        var cm = lines[i].match(/^\s*-\s+\[([ x])\]\s+(.+)$/);
+        if (cm) checkItems.push({ content: inlineMdToHtml(cm[2]), meta: { checked: cm[1] === 'x' }, items: [] });
+        i++;
+      }
+      blocks.push({ type: 'list', data: { style: 'checklist', items: checkItems } });
+      continue;
+    }
+
+    if (/^\s*[-*]\s+/.test(line) && !/^\s*-\s+\[/.test(line)) {
+      var listItems = [];
+      while (i < lines.length && /^\s*[-*]\s+/.test(lines[i]) && !/^\s*-\s+\[/.test(lines[i])) {
+        var lm = lines[i].match(/^\s*[-*]\s+(.+)$/);
+        if (lm) listItems.push({ content: inlineMdToHtml(lm[1]), items: [] });
+        i++;
+      }
+      blocks.push({ type: 'list', data: { style: 'unordered', items: listItems } });
+      continue;
+    }
+
+    if (/^\s*\d+\.\s+/.test(line)) {
+      var olItems = [];
+      while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) {
+        var om = lines[i].match(/^\s*\d+\.\s+(.+)$/);
+        if (om) olItems.push({ content: inlineMdToHtml(om[1]), items: [] });
+        i++;
+      }
+      blocks.push({ type: 'list', data: { style: 'ordered', items: olItems } });
+      continue;
+    }
+
+    var paraLines = [];
+    while (i < lines.length && lines[i].trim() !== '' &&
+           !/^#{1,6}\s/.test(lines[i]) && !/^```/.test(lines[i]) &&
+           !/^>\s/.test(lines[i]) && !/^\s*[-*]\s/.test(lines[i]) &&
+           !/^\s*\d+\.\s/.test(lines[i]) && !/^---\s*$/.test(lines[i].trim()) &&
+           !/^\*\*\*\s*$/.test(lines[i].trim())) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    if (paraLines.length > 0) {
+      blocks.push({ type: 'paragraph', data: { text: inlineMdToHtml(paraLines.join('<br>')) } });
+    }
+  }
+
+  return blocks.length > 0 ? blocks : [{ type: 'paragraph', data: { text: '' } }];
+}
+
+/* ── Editor.js Blocks → Markdown ────────────────────────── */
+function blocksToMarkdown(blocks) {
+  if (!blocks || blocks.length === 0) return '';
+
+  var parts = [];
+  for (var i = 0; i < blocks.length; i++) {
+    var b = blocks[i];
+    switch (b.type) {
+      case 'header':
+        var prefix = '';
+        for (var h = 0; h < (b.data.level || 2); h++) prefix += '#';
+        parts.push(prefix + ' ' + inlineHtmlToMd(b.data.text));
+        break;
+      case 'paragraph':
+        parts.push(inlineHtmlToMd(b.data.text));
+        break;
+      case 'list':
+        var items = b.data.items || [];
+        var listLines = [];
+        for (var li = 0; li < items.length; li++) {
+          var itemText = typeof items[li] === 'string' ? items[li] : (items[li].content || items[li].text || '');
+          if (b.data.style === 'checklist') {
+            var chk = (typeof items[li] === 'object' && items[li].meta && items[li].meta.checked) ? 'x' : ' ';
+            listLines.push('- [' + chk + '] ' + inlineHtmlToMd(itemText));
+          } else if (b.data.style === 'ordered') {
+            listLines.push((li + 1) + '. ' + inlineHtmlToMd(itemText));
+          } else {
+            listLines.push('- ' + inlineHtmlToMd(itemText));
+          }
+        }
+        parts.push(listLines.join('\n'));
+        break;
+      case 'checklist':
+        var cItems = b.data.items || [];
+        var checkLines = [];
+        for (var ci = 0; ci < cItems.length; ci++) {
+          var check = cItems[ci].checked ? 'x' : ' ';
+          checkLines.push('- [' + check + '] ' + inlineHtmlToMd(cItems[ci].text || cItems[ci].content || ''));
+        }
+        parts.push(checkLines.join('\n'));
+        break;
+      case 'code':
+        parts.push('```\n' + (b.data.code || '') + '\n```');
+        break;
+      case 'quote':
+        var qText = inlineHtmlToMd(b.data.text || '');
+        var qLines = qText.split('\n');
+        var quoteParts = [];
+        for (var qi = 0; qi < qLines.length; qi++) {
+          quoteParts.push('> ' + qLines[qi]);
+        }
+        parts.push(quoteParts.join('\n'));
+        break;
+      case 'delimiter':
+        parts.push('---');
+        break;
+      default:
+        if (b.data && b.data.text) parts.push(inlineHtmlToMd(b.data.text));
+    }
+  }
+  return parts.join('\n\n');
+}
+
+/* ── Editor.js Instance Management ──────────────────────── */
+function initEditor(holderId, markdown, options) {
+  if (typeof EditorJS === 'undefined') {
+    var el = document.getElementById(holderId);
+    if (el) {
+      var ta = document.createElement('textarea');
+      ta.value = markdown || '';
+      ta.className = 'editor-fallback-textarea';
+      ta.placeholder = (options && options.placeholder) || 'Type / for commands...';
+      ta.id = holderId + '-fallback';
+      el.appendChild(ta);
+    }
+    return { _fallback: true, _holderId: holderId };
+  }
+
+  var opts = options || {};
+  var tools = {};
+
+  if (typeof Header !== 'undefined') {
+    tools.header = {
+      class: Header,
+      inlineToolbar: true,
+      config: { levels: [1, 2, 3, 4], defaultLevel: 2 },
+    };
+  }
+  if (typeof EditorjsList !== 'undefined') tools.list = { class: EditorjsList, inlineToolbar: true, config: { maxLevel: 3 } };
+  if (typeof CodeTool !== 'undefined') tools.code = { class: CodeTool };
+  if (typeof Quote !== 'undefined') tools.quote = { class: Quote, inlineToolbar: true, config: { quotePlaceholder: 'Write a quote...', captionPlaceholder: '' } };
+  if (typeof Delimiter !== 'undefined') tools.delimiter = { class: Delimiter };
+  if (typeof Marker !== 'undefined') tools.marker = { class: Marker };
+  if (typeof InlineCode !== 'undefined') tools.inlineCode = { class: InlineCode };
+
+  var blocks = markdownToBlocks(markdown || '');
+
+  var editor = new EditorJS({
+    holder: holderId,
+    tools: tools,
+    data: { blocks: blocks },
+    placeholder: opts.placeholder || 'Type / for commands...',
+    minHeight: opts.minHeight || 0,
+    autofocus: opts.autofocus || false,
+    onChange: opts.onChange || function() {},
+    defaultBlock: 'paragraph',
+    inlineToolbar: ['bold', 'italic', 'link', 'marker', 'inlineCode'],
+  });
+
+  return editor;
+}
+
+async function getEditorMarkdown(editorInstance) {
+  if (!editorInstance) return '';
+  if (editorInstance._fallback) {
+    var ta = document.getElementById(editorInstance._holderId + '-fallback');
+    return ta ? ta.value : '';
+  }
+  try {
+    var data = await editorInstance.save();
+    return blocksToMarkdown(data.blocks);
+  } catch (e) {
+    return '';
+  }
+}
+
+function destroyEditor(editorInstance) {
+  if (!editorInstance) return;
+  if (editorInstance._fallback) return;
+  if (typeof editorInstance.destroy === 'function') {
+    try { editorInstance.destroy(); } catch (e) { /* ignore */ }
+  }
+}
+
+/* ── Simple Markdown → HTML Renderer (readonly mode) ──── */
+function simpleMarkdownRender(md) {
+  if (!md) return '';
+  var lines = md.split('\n');
+  var html = '';
+  var inCode = false;
+  var inList = false;
+  var listType = '';
+
+  for (var i = 0; i < lines.length; i++) {
+    var line = lines[i];
+
+    if (line.trim().startsWith('```')) {
+      if (inCode) { html += '</code></pre>'; inCode = false; }
+      else { html += '<pre><code>'; inCode = true; }
+      continue;
+    }
+    if (inCode) { html += escHtml(line) + '\n'; continue; }
+
+    if (inList && !/^\s*[-*]\s/.test(line) && !/^\s*\d+\.\s/.test(line)) {
+      html += '</' + listType + '>'; inList = false;
+    }
+
+    if (line.trim() === '') { if (!inList) html += '<br>'; continue; }
+    if (/^---\s*$/.test(line.trim())) { html += '<hr>'; continue; }
+
+    var hm = line.match(/^(#{1,6})\s+(.+)$/);
+    if (hm) { html += '<h' + hm[1].length + '>' + inlineMdToHtml(hm[2]) + '</h' + hm[1].length + '>'; continue; }
+
+    if (/^>\s/.test(line)) { html += '<blockquote>' + inlineMdToHtml(line.substring(2)) + '</blockquote>'; continue; }
+
+    if (/^\s*-\s+\[[ x]\]\s/.test(line)) {
+      var chm = line.match(/^\s*-\s+\[([ x])\]\s+(.+)$/);
+      if (chm) {
+        var checked = chm[1] === 'x';
+        html += '<div class="md-check"><span class="md-check-box' + (checked ? ' checked' : '') + '">' + (checked ? '&#10003;' : '') + '</span> ' + inlineMdToHtml(chm[2]) + '</div>';
+      }
+      continue;
+    }
+
+    if (/^\s*[-*]\s+/.test(line)) {
+      if (!inList || listType !== 'ul') { if (inList) html += '</' + listType + '>'; html += '<ul>'; inList = true; listType = 'ul'; }
+      var lmatch = line.match(/^\s*[-*]\s+(.+)$/);
+      if (lmatch) html += '<li>' + inlineMdToHtml(lmatch[1]) + '</li>';
+      continue;
+    }
+    if (/^\s*\d+\.\s+/.test(line)) {
+      if (!inList || listType !== 'ol') { if (inList) html += '</' + listType + '>'; html += '<ol>'; inList = true; listType = 'ol'; }
+      var omatch = line.match(/^\s*\d+\.\s+(.+)$/);
+      if (omatch) html += '<li>' + inlineMdToHtml(omatch[1]) + '</li>';
+      continue;
+    }
+
+    html += '<p>' + inlineMdToHtml(line) + '</p>';
+  }
+
+  if (inCode) html += '</code></pre>';
+  if (inList) html += '</' + listType + '>';
+  return html;
+}

package/src/client/history.js

@@ -0,0 +1,137 @@
+/* ══════════════════════════════════════════════════════════════
+   HISTORY — Project switch modal
+   ══════════════════════════════════════════════════════════════ */
+
+function openHistoryModal() {
+  var overlay = document.getElementById('history-overlay');
+  var modal = document.getElementById('history-modal');
+  if (!overlay || !modal) return;
+
+  overlay.classList.add('open');
+  modal.classList.add('open');
+  modal.innerHTML = '<div class="history-header"><h2>Switch Project</h2><button class="panel-close" id="history-close">&times;</button></div><div class="history-body"><div class="history-loading">Loading...</div></div>';
+
+  document.getElementById('history-close').onclick = closeHistoryModal;
+  overlay.onclick = closeHistoryModal;
+
+  fetchJson('/api/history').then(function(entries) {
+    renderHistoryList(entries || []);
+  });
+}
+
+function closeHistoryModal() {
+  var overlay = document.getElementById('history-overlay');
+  var modal = document.getElementById('history-modal');
+  if (overlay) overlay.classList.remove('open');
+  if (modal) modal.classList.remove('open');
+}
+
+function renderHistoryList(entries) {
+  var modal = document.getElementById('history-modal');
+  if (!modal) return;
+
+  var body = modal.querySelector('.history-body');
+  if (!body) return;
+
+  if (entries.length === 0) {
+    body.innerHTML = '<div class="history-empty">No projects in history yet.<br>Open mdboard from a project directory to add it.</div>';
+    return;
+  }
+
+  // Sort: current first, then by lastOpened descending
+  entries.sort(function(a, b) {
+    if (a.isCurrent && !b.isCurrent) return -1;
+    if (!a.isCurrent && b.isCurrent) return 1;
+    return new Date(b.lastOpened) - new Date(a.lastOpened);
+  });
+
+  var html = '';
+  for (var i = 0; i < entries.length; i++) {
+    var e = entries[i];
+    var initial = (e.name || 'P').charAt(0).toUpperCase();
+    var relTime = timeAgo(e.lastOpened);
+    var currentClass = e.isCurrent ? ' history-item-current' : '';
+    var currentBadge = e.isCurrent ? '<span class="history-current-badge">Current</span>' : '';
+
+    html += '<div class="history-item' + currentClass + '" data-path="' + escHtml(e.path) + '">' +
+      '<div class="history-item-icon">' + escHtml(initial) + '</div>' +
+      '<div class="history-item-info">' +
+        '<div class="history-item-name">' + escHtml(e.name) + currentBadge + '</div>' +
+        '<div class="history-item-path">' + escHtml(e.path) + '</div>' +
+      '</div>' +
+      '<div class="history-item-time">' + escHtml(relTime) + '</div>' +
+    '</div>';
+  }
+
+  body.innerHTML = html;
+
+  // Attach click handlers
+  var items = body.querySelectorAll('.history-item');
+  for (var j = 0; j < items.length; j++) {
+    items[j].addEventListener('click', function() {
+      var itemPath = this.getAttribute('data-path');
+      if (this.classList.contains('history-item-current')) return;
+      switchProject(itemPath);
+    });
+  }
+}
+
+function switchProject(projectPath) {
+  var body = document.querySelector('#history-modal .history-body');
+  if (body) body.innerHTML = '<div class="history-loading">Switching project...</div>';
+
+  fetch('/api/history/switch', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path: projectPath }),
+  })
+  .then(function(r) { return r.json(); })
+  .then(function(data) {
+    if (data && data.ok) {
+      closeHistoryModal();
+      // Reload everything — the SSE event will also trigger for other tabs
+      D.activeSource = null;
+      D.loaded = false;
+      loadAll().then(function() {
+        initFromConfig();
+        if (hasWorkspace()) {
+          buildSourceRail();
+          D.activeSource = null;
+          switchSource('overview');
+        } else {
+          renderAll();
+          renderSidebarLogo();
+          // Hide source rail if no workspace
+          var rail = document.getElementById('source-rail');
+          if (rail) rail.innerHTML = '';
+        }
+      });
+      showToast('Switched to ' + (data.name || 'project'), 'success');
+    } else {
+      showToast('Error: ' + (data.error || 'Switch failed'), 'error');
+      closeHistoryModal();
+    }
+  })
+  .catch(function(err) {
+    showToast('Error: ' + err.message, 'error');
+    closeHistoryModal();
+  });
+}
+
+function checkAutoOpenHistory() {
+  if (D.config && D.config.hasProject === false) {
+    openHistoryModal();
+  }
+}
+
+function timeAgo(dateStr) {
+  if (!dateStr) return '';
+  var now = Date.now();
+  var then = new Date(dateStr).getTime();
+  var diff = Math.floor((now - then) / 1000);
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
+  if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
+  if (diff < 604800) return Math.floor(diff / 86400) + 'd ago';
+  return new Date(dateStr).toLocaleDateString();
+}

package/src/client/metrics.js

@@ -0,0 +1,38 @@
+/* ══════════════════════════════════════════════════════════════
+   METRICS VIEW
+   ══════════════════════════════════════════════════════════════ */
+function renderMetrics() {
+  var c = document.getElementById('metrics-container');
+  var taskPlural = ENTITY_NAMES.task ? ENTITY_NAMES.task.plural : 'Tasks';
+  if (!D.loaded) { c.innerHTML = '<div class="metrics-grid">' + '<div class="skeleton skeleton-card" style="height:200px"></div>'.repeat(4) + '</div>'; return; }
+
+  var msProg = D.milestones.length ? D.milestones.map(function(ms) {
+    var pct = ms.progress || 0;
+    var clr = pct >= 100 ? 'var(--success)' : pct > 50 ? 'var(--warning)' : 'var(--accent)';
+    return '<div class="health-row"><div class="health-dot" style="background:' + clr + '"></div>' + milestoneIcon(ms.status) + '<div class="health-label">' + escHtml(ms.title || ms.id || '') + '</div><div class="health-val">' + pct + '%</div></div>';
+  }).join('') : '<div style="color:var(--text3);padding:8px 0">No milestones.</div>';
+
+  var statuses = {};
+  D.tasks.forEach(function(f) { var s = f.status || 'unknown'; statuses[s] = (statuses[s] || 0) + 1; });
+  var statusHtml = Object.keys(statuses).map(function(s) {
+    return '<div class="health-row">' + statusIcon(s) + '<div class="health-label" style="text-transform:capitalize">' + escHtml(STATUS_LABELS[s] || s) + '</div><div class="health-val">' + statuses[s] + '</div></div>';
+  }).join('') || '<div style="color:var(--text3);padding:8px 0">No data.</div>';
+
+  var priorities = {};
+  D.tasks.forEach(function(f) { var p = f.priority || 'none'; priorities[p] = (priorities[p] || 0) + 1; });
+  var priorityHtml = Object.keys(priorities).map(function(p) {
+    return '<div class="health-row">' + priorityIcon(p) + '<div class="health-label" style="text-transform:capitalize">' + escHtml(PRIORITY_LABELS[p] || p) + '</div><div class="health-val">' + priorities[p] + '</div></div>';
+  }).join('') || '<div style="color:var(--text3);padding:8px 0">No data.</div>';
+
+  var h = D.health || {};
+  var qualHtml = '<div class="health-row"><div class="health-dot" style="background:var(--text2)"></div><div class="health-label">Total ' + escHtml(taskPlural) + '</div><div class="health-val">' + (h.totalFeatures || D.tasks.length) + '</div></div>' +
+    '<div class="health-row"><div class="health-dot" style="background:var(--success)"></div><div class="health-label">Completed</div><div class="health-val">' + (h.completedFeatures || 0) + '</div></div>' +
+    '<div class="health-row"><div class="health-dot" style="background:var(--warning)"></div><div class="health-label">In Progress</div><div class="health-val">' + (h.inProgressFeatures || 0) + '</div></div>' +
+    '<div class="health-row"><div class="health-dot" style="background:var(--accent)"></div><div class="health-label">Avg Velocity</div><div class="health-val">' + (h.velocity != null ? h.velocity + '%' : 'N/A') + '</div></div>';
+
+  c.innerHTML = '<div class="metrics-grid">' +
+    '<div class="metric-card"><h3>Milestone Progress</h3>' + msProg + '</div>' +
+    '<div class="metric-card"><h3>Status Breakdown</h3>' + statusHtml + '</div>' +
+    '<div class="metric-card"><h3>Priority Breakdown</h3>' + priorityHtml + '</div>' +
+    '<div class="metric-card"><h3>Project Health</h3>' + qualHtml + '</div></div>';
+}

package/src/client/milestones.js

@@ -0,0 +1,77 @@
+/* ══════════════════════════════════════════════════════════════
+   MILESTONES VIEW
+   ══════════════════════════════════════════════════════════════ */
+var msFilter = { status: '' };
+
+function renderMsFilters() {
+  var c = document.getElementById('ms-filters');
+  var msStatuses = (D.config && D.config.statuses && D.config.statuses.milestone) ?
+    D.config.statuses.milestone.map(function(s) { return s; }) :
+    [{key:'planned',label:'Planned'},{key:'active',label:'Active'},{key:'completed',label:'Completed'}];
+
+  c.innerHTML = '<label>Filter:</label>' +
+    '<select data-msf="status"><option value="">All Statuses</option>' +
+    msStatuses.map(function(s) {
+      return '<option value="' + s.key + '"' + (msFilter.status === s.key ? ' selected' : '') + '>' + escHtml(s.label) + '</option>';
+    }).join('') + '</select>';
+  c.querySelector('select[data-msf]').addEventListener('change', function(e) { msFilter.status = e.target.value; renderMilestones(); });
+}
+
+function renderMilestones() {
+  var c = document.getElementById('milestones-container');
+  var taskPlural = ENTITY_NAMES.task ? ENTITY_NAMES.task.plural.toLowerCase() : 'tasks';
+  var msDir = ENTITY_NAMES.milestone ? ENTITY_NAMES.milestone.dir : 'milestones';
+  var msPlural = ENTITY_NAMES.milestone ? ENTITY_NAMES.milestone.plural.toLowerCase() : 'milestones';
+  if (!D.loaded) { c.innerHTML = '<div class="loading-container"><div class="skeleton skeleton-card" style="height:200px"></div></div>'; return; }
+
+  var milestones = D.milestones;
+  if (msFilter.status) milestones = milestones.filter(function(m) { return m.status === msFilter.status; });
+
+  if (!milestones.length) {
+    c.innerHTML = '<div class="empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg><p>' + (D.milestones.length ? 'No ' + escHtml(msPlural) + ' match filter.' : 'No ' + escHtml(msPlural) + ' yet. Create milestone directories under project/' + escHtml(msDir) + '/ to get started.') + '</p></div>';
+    return;
+  }
+
+  c.innerHTML = milestones.map(function(ms) {
+    var pct = ms.progress || 0;
+    var fc = ms.featureCount || 0, cc = ms.completedCount || 0;
+    var msEpics = D.epics.filter(function(e) { return e.milestone === (ms.id || ms._dir); });
+    var epicCards = msEpics.length ? msEpics.map(function(e) {
+      var ep = e.progress || 0;
+      var ec = epicColor(e.id || e.title || '');
+      return '<div class="ms-epic" data-epic-id="' + escHtml(e.id || '') + '"><div class="epic-name"><span class="dot" style="background:' + ec + '"></span>' + escHtml(e.title || e.id || '') + '</div>' +
+        '<div class="epic-counts">' + (e.completedCount || 0) + ' / ' + (e.featureCount || 0) + ' ' + escHtml(taskPlural) + ' &middot; ' + (e.totalPoints || 0) + ' pts</div>' +
+        '<div class="progress progress-accent"><div class="progress-fill" style="width:' + ep + '%;background:' + ec + '"></div></div>' +
+        '<div class="epic-meta">' +
+          (e.status ? '<span class="badge ' + badgeClass('badge', e.status) + '">' + statusIcon(e.status) + ' ' + escHtml(e.status) + '</span>' : '') +
+          (e.priority ? '<span class="badge ' + badgeClass('badge', e.priority) + '">' + priorityIcon(e.priority) + ' ' + escHtml(e.priority) + '</span>' : '') +
+        '</div></div>';
+    }).join('') : '<div style="color:var(--text3);font-size:.82rem">No epics yet.</div>';
+
+    return '<div class="ms-card" data-ms-id="' + escHtml(ms.id || '') + '">' +
+      '<div class="ms-header"><h2>' + milestoneIcon(ms.status) + ' ' + escHtml(ms.title || ms.id || '') + '</h2>' +
+      '<span class="badge ' + badgeClass('badge', ms.status) + '">' + escHtml(ms.status || '') + '</span>' +
+      (ms.deadline ? '<span class="ms-deadline">' + fmtDate(ms.deadline) + '</span>' : '') + '</div>' +
+      '<div class="ms-progress"><div class="progress-label"><span>' + cc + ' / ' + fc + ' ' + escHtml(taskPlural) + '</span><span>' + pct + '%</span></div>' +
+      '<div class="progress progress-lg progress-success"><div class="progress-fill" style="width:' + pct + '%"></div></div></div>' +
+      '<div class="ms-epics">' + epicCards + '</div></div>';
+  }).join('');
+
+  // Click handlers for milestones
+  c.querySelectorAll('.ms-card[data-ms-id]').forEach(function(card) {
+    card.addEventListener('click', function(e) {
+      if (e.target.closest('.ms-epic')) return;
+      var ms = D.milestones.find(function(m) { return m.id === card.dataset.msId; });
+      if (ms) openPanel('milestones', ms);
+    });
+  });
+
+  // Click handlers for epics
+  c.querySelectorAll('.ms-epic[data-epic-id]').forEach(function(card) {
+    card.addEventListener('click', function(e) {
+      e.stopPropagation();
+      var epic = D.epics.find(function(ep) { return ep.id === card.dataset.epicId; });
+      if (epic) openPanel('epics', epic);
+    });
+  });
+}