mdboard 1.3.0 → 2.1.0

package/src/client/panel.js

@@ -1,637 +0,0 @@
-/* ══════════════════════════════════════════════════════════════
-   CRUD HELPERS
-   ══════════════════════════════════════════════════════════════ */
-function isSourceWritable() {
-  if (!hasWorkspace() || !D.activeSource) return true;
-  var src = D.config.workspace.sources.find(function(s) { return s.name === D.activeSource; });
-  return src ? !src.readonly : true;
-}
-
-function openCreateDialog(collection) {
-  var item = { _isNew: true };
-
-  if (collection === 'tasks') {
-    var ms = D.milestones.length > 0 ? (D.milestones[0].id || D.milestones[0]._dir || '') : '';
-    var ep = D.epics.length > 0 ? (D.epics[0]._dir || D.epics[0].id || '') : '';
-    item.title = '';
-    item.status = 'backlog';
-    item.priority = '';
-    item.points = null;
-    item.assigned = '';
-    item.sprint = '';
-    item.milestone = ms;
-    item.epic = ep;
-    item.content = '';
-  } else if (collection === 'milestones') {
-    item.title = '';
-    item.status = 'planned';
-    item.deadline = '';
-    item.content = '';
-  } else if (collection === 'epics') {
-    var ms = D.milestones.length > 0 ? (D.milestones[0]._dir || D.milestones[0].id || '') : '';
-    item.title = '';
-    item.status = 'active';
-    item.priority = '';
-    item.milestone = ms;
-    item.content = '';
-  }
-
-  panelState = { open: true, type: collection, item: item, isCreate: true, editor: null };
-  renderPanel();
-  document.getElementById('detail-panel').classList.add('open');
-  document.getElementById('panel-overlay').classList.add('open');
-}
-
-/* ══════════════════════════════════════════════════════════════
-   DETAIL PANEL — Notion-style: form top + editor bottom
-   ══════════════════════════════════════════════════════════════ */
-var panelState = { open: false, type: null, item: null, isCreate: false, editor: null };
-
-function openPanel(type, item) {
-  panelState = { open: true, type: type, item: JSON.parse(JSON.stringify(item)), isCreate: false, editor: null };
-  renderPanel();
-  document.getElementById('detail-panel').classList.add('open');
-  document.getElementById('panel-overlay').classList.add('open');
-}
-
-function closePanel() {
-  if (panelState.editor) { destroyEditor(panelState.editor); panelState.editor = null; }
-  panelState = { open: false, type: null, item: null, editor: null };
-  document.getElementById('detail-panel').classList.remove('open');
-  document.getElementById('panel-overlay').classList.remove('open');
-}
-
-function renderPanel() {
-  var panel = document.getElementById('detail-panel');
-  var t = panelState.type;
-  var item = panelState.item;
-  var isCreate = panelState.isCreate;
-  if (!item) return;
-
-  var isReadonly = !isCreate && item.readonly;
-
-  var typeLabel;
-  if (t === 'tasks') typeLabel = ENTITY_NAMES.task ? ENTITY_NAMES.task.singular : 'Task';
-  else if (t === 'epics') typeLabel = ENTITY_NAMES.epic ? ENTITY_NAMES.epic.singular : 'Epic';
-  else typeLabel = ENTITY_NAMES.milestone ? ENTITY_NAMES.milestone.singular : 'Milestone';
-
-  // ── Header ──
-  var html = '<div class="panel-header">' +
-    '<span class="panel-type">' + escHtml(isCreate ? 'New ' + typeLabel : typeLabel) + '</span>' +
-    '<span class="panel-item-id">' + escHtml(isCreate ? '' : (item.id || '')) + '</span>';
-
-  if (item.source && item.sourceColor) {
-    html += '<span class="pill" style="background:' + item.sourceColor + '20;color:' + item.sourceColor + ';font-size:10px">' + escHtml(item.sourceLabel || item.source) + '</span>';
-  }
-
-  html += '<button class="panel-close" id="panel-close-btn">&times;</button></div>';
-
-  // ── Title (large, Notion-style) ──
-  html += '<div class="panel-title-wrap">' +
-    '<input type="text" id="p-title" class="panel-title-input" value="' + escHtml(item.title || '') + '" placeholder="Untitled"' + (isReadonly ? ' disabled' : '') + '>' +
-    '</div>';
-
-  // ── Properties (compact inline) ──
-  html += '<div class="panel-properties">';
-
-  // Properties toggle header
-  html += '<div class="prop-row prop-row-toggle" id="props-toggle"><span class="prop-label" style="font-weight:600"><span class="ai-toggle-arrow" id="props-arrow">&#9654;</span> Properties</span><div class="prop-value"></div></div>';
-  html += '<div class="props-fields-body" id="props-fields-body" style="display:none">';
-
-  // Status
-  var statusOptions, statusLabels;
-  if (t === 'tasks' && D.config && D.config.statuses && D.config.statuses.task) {
-    statusOptions = D.config.statuses.task.map(function(s) { return s.key; });
-    statusLabels = {};
-    D.config.statuses.task.forEach(function(s) { statusLabels[s.key] = s.label; });
-  } else if (t === 'epics' && D.config && D.config.statuses && D.config.statuses.epic) {
-    statusOptions = D.config.statuses.epic.map(function(s) { return s.key; });
-    statusLabels = {};
-    D.config.statuses.epic.forEach(function(s) { statusLabels[s.key] = s.label; });
-  } else if (t === 'milestones' && D.config && D.config.statuses && D.config.statuses.milestone) {
-    statusOptions = D.config.statuses.milestone.map(function(s) { return s.key; });
-    statusLabels = {};
-    D.config.statuses.milestone.forEach(function(s) { statusLabels[s.key] = s.label; });
-  } else if (t === 'tasks') {
-    statusOptions = STATUSES;
-    statusLabels = STATUS_LABELS;
-  } else {
-    statusOptions = ['planned', 'active', 'completed', 'cancelled'];
-    statusLabels = { planned: 'Planned', active: 'Active', completed: 'Completed', cancelled: 'Cancelled' };
-  }
-
-  html += '<div class="prop-row"><span class="prop-label">Status</span><div class="prop-value"><span id="p-status-icon">' + statusIcon(item.status) + '</span>' +
-    '<select id="p-status"' + (isReadonly ? ' disabled' : '') + '>' + statusOptions.map(function(s) {
-      return '<option value="' + s + '"' + (item.status === s ? ' selected' : '') + '>' + (statusLabels[s] || s) + '</option>';
-    }).join('') + '</select></div></div>';
-
-  if (t === 'tasks' || t === 'epics') {
-    html += '<div class="prop-row"><span class="prop-label">Priority</span><div class="prop-value"><span id="p-priority-icon">' + priorityIcon(item.priority) + '</span>' +
-      '<select id="p-priority"' + (isReadonly ? ' disabled' : '') + '><option value="">None</option>' + PRIORITIES.map(function(p) {
-        return '<option value="' + p + '"' + (item.priority === p ? ' selected' : '') + '>' + (PRIORITY_LABELS[p] || p) + '</option>';
-      }).join('') + '</select></div></div>';
-  }
-
-  if (t === 'tasks') {
-    html += '<div class="prop-row"><span class="prop-label">Points</span><div class="prop-value"><input type="number" id="p-points" min="0" max="100" value="' + (item.points != null ? item.points : '') + '" placeholder="0"' + (isReadonly ? ' disabled' : '') + '></div></div>';
-
-    var assignedVal = Array.isArray(item.assigned) ? item.assigned.join(', ') : (item.assigned || '');
-    html += '<div class="prop-row"><span class="prop-label">Assigned</span><div class="prop-value"><input type="text" id="p-assigned" value="' + escHtml(assignedVal) + '" placeholder="Unassigned"' + (isReadonly ? ' disabled' : '') + '></div></div>';
-
-    html += '<div class="prop-row"><span class="prop-label">Sprint</span><div class="prop-value"><select id="p-sprint"' + (isReadonly ? ' disabled' : '') + '><option value="">None</option>' +
-      D.allSprints.map(function(s) { return '<option value="' + escHtml(s.id || '') + '"' + (item.sprint === s.id ? ' selected' : '') + '>' + escHtml(s.id || '') + '</option>'; }).join('') +
-      '</select></div></div>';
-
-    if (isCreate) {
-      html += '<div class="prop-row"><span class="prop-label">Milestone</span><div class="prop-value"><select id="p-milestone">' +
-        D.milestones.map(function(m) { return '<option value="' + escHtml(m._dir || m.id || '') + '"' + (item.milestone === (m._dir || m.id) ? ' selected' : '') + '>' + escHtml(m.title || m.id || '') + '</option>'; }).join('') +
-        '</select></div></div>';
-      html += '<div class="prop-row"><span class="prop-label">Epic</span><div class="prop-value"><select id="p-epic-select">' +
-        D.epics.map(function(e) { return '<option value="' + escHtml(e._dir || e.id || '') + '"' + (item.epic === (e._dir || e.id) ? ' selected' : '') + '>' + escHtml(e.title || e.id || '') + '</option>'; }).join('') +
-        '</select></div></div>';
-    } else {
-      html += '<div class="prop-row"><span class="prop-label">Epic</span><div class="prop-value"><span class="prop-text">' + escHtml(item.epic || 'None') + '</span></div></div>';
-    }
-  }
-
-  if (t === 'milestones') {
-    html += '<div class="prop-row"><span class="prop-label">Deadline</span><div class="prop-value"><input type="date" id="p-deadline" value="' + fmtDate(item.deadline) + '"' + (isReadonly ? ' disabled' : '') + '></div></div>';
-  }
-
-  if (isCreate && (t === 'epics' || t === 'milestones')) {
-    if (t === 'epics') {
-      html += '<div class="prop-row"><span class="prop-label">Milestone</span><div class="prop-value"><select id="p-milestone">' +
-        D.milestones.map(function(m) { return '<option value="' + escHtml(m._dir || m.id || '') + '">' + escHtml(m.title || m.id || '') + '</option>'; }).join('') +
-        '</select></div></div>';
-    }
-  }
-
-  // Links
-  if (t === 'tasks' && !isCreate && item.links && Array.isArray(item.links) && item.links.length > 0) {
-    html += '<div class="prop-row"><span class="prop-label">Links</span><div class="prop-value"><div class="link-chips">';
-    item.links.forEach(function(link) {
-      var parts = String(link).split(':');
-      var srcName = parts.length === 2 ? parts[0] : null;
-      var srcColor = 'var(--accent)';
-      if (srcName && D.config && D.config.workspace && D.config.workspace.sources) {
-        var src = D.config.workspace.sources.find(function(s) { return s.name === srcName; });
-        if (src && src.color) srcColor = src.color;
-      }
-      html += '<span class="link-chip" data-link="' + escHtml(String(link)) + '">' +
-        '<span class="link-chip-dot" style="background:' + srcColor + '"></span>' +
-        escHtml(String(link)) + '</span>';
-    });
-    html += '</div></div></div>';
-  }
-
-  // Reverse links
-  if (t === 'tasks' && !isCreate && D.overviewLinks && D.overviewLinks.reverseLinks && item.id) {
-    var reverseRefs = D.overviewLinks.reverseLinks[item.id] || [];
-    if (reverseRefs.length > 0) {
-      html += '<div class="prop-row"><span class="prop-label">Referenced By</span><div class="prop-value"><div class="link-chips">';
-      reverseRefs.forEach(function(ref) {
-        var srcColor = ref.sourceColor || 'var(--accent)';
-        html += '<span class="link-chip" data-link="' + escHtml(ref.from || '') + '">' +
-          '<span class="link-chip-dot" style="background:' + srcColor + '"></span>' +
-          escHtml(ref.from || '') + '</span>';
-      });
-      html += '</div></div></div>';
-    }
-  }
-
-  html += '</div>'; // close props-fields-body
-
-  // ── AI Properties — integrated as prop-rows ──
-  var aiData = item.ai || {};
-  var aiOwnData = item.aiOwn || {};
-  var aiFieldDefs = [
-    { key: 'skills', label: 'Skills', icon: '<svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>' },
-    { key: 'agents', label: 'Agents', icon: '<svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><circle cx="9" cy="16" r="1" fill="currentColor"/><circle cx="15" cy="16" r="1" fill="currentColor"/></svg>' },
-    { key: 'mcps', label: 'MCPs', icon: '<svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M9 9h6v6H9z"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3"/></svg>' },
-    { key: 'commands', label: 'Commands', icon: '<svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>' },
-    { key: 'context', label: 'Context', icon: '<svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>' }
-  ];
-  var aiTotalCount = 0;
-  for (var ai = 0; ai < aiFieldDefs.length; ai++) {
-    var arr = aiData[aiFieldDefs[ai].key];
-    if (arr) aiTotalCount += arr.length;
-  }
-  var showAiSection = aiTotalCount > 0 || !isReadonly;
-  if (showAiSection) {
-    // AI divider row — clickable toggle
-    html += '<div class="prop-row prop-row-divider prop-row-toggle" id="ai-toggle"><span class="prop-label" style="font-weight:600"><span class="ai-toggle-arrow" id="ai-arrow">&#9654;</span> AI</span><div class="prop-value">';
-    if (aiTotalCount > 0) html += '<span class="pill" style="font-size:10px;padding:1px 6px">' + aiTotalCount + '</span>';
-    html += '</div></div>';
-    html += '<div class="ai-fields-body" id="ai-fields-body" style="display:none">';
-    for (var ag = 0; ag < aiFieldDefs.length; ag++) {
-      var def = aiFieldDefs[ag];
-      var resolved = aiData[def.key] || [];
-      var own = aiOwnData[def.key] || [];
-      var inherited = resolved.filter(function(v) { return own.indexOf(v) === -1; });
-      if (isReadonly && resolved.length === 0) continue;
-      html += '<div class="prop-row"><span class="prop-label">' + def.icon + ' ' + escHtml(def.label) + '</span><div class="prop-value">';
-      if (isReadonly) {
-        // Readonly: just show tags
-        for (var ci = 0; ci < resolved.length; ci++) {
-          var isOwn = own.indexOf(resolved[ci]) !== -1;
-          html += '<span class="ai-tag' + (isOwn ? ' ai-tag-own' : ' ai-tag-inherited') + '">' + escHtml(resolved[ci]) + '</span>';
-        }
-      } else {
-        // Editable: tag input container
-        html += '<div class="ai-tag-input" data-ai-field="' + def.key + '">';
-        // Inherited tags (dashed, no remove)
-        for (var ii = 0; ii < inherited.length; ii++) {
-          html += '<span class="ai-tag ai-tag-inherited">' + escHtml(inherited[ii]) + '</span>';
-        }
-        // Own tags (accent, with remove button)
-        for (var oi = 0; oi < own.length; oi++) {
-          html += '<span class="ai-tag ai-tag-own"><span class="ai-tag-val">' + escHtml(own[oi]) + '</span><button class="ai-tag-remove" type="button">&times;</button></span>';
-        }
-        // Text input for adding
-        html += '<input type="text" class="ai-tag-text" placeholder="Add...">';
-        // Autocomplete dropdown
-        html += '<div class="ai-autocomplete"></div>';
-        html += '</div>';
-      }
-      html += '</div></div>';
-    }
-    html += '</div>'; // close ai-fields-body
-  }
-
-  html += '</div>'; // close panel-properties
-
-  // ── Content Editor (fills remaining space) ──
-  if (isReadonly) {
-    html += '<div class="panel-content-area"><div id="p-content-editor" class="panel-editor-zone md-rendered">' + simpleMarkdownRender(item.content || '') + '</div></div>';
-  } else {
-    html += '<div class="panel-content-area"><div id="p-content-editor" class="panel-editor-zone"></div></div>';
-  }
-
-  // ── Footer ──
-  html += '<div class="panel-footer">';
-  if (!isCreate && !isReadonly && isSourceWritable()) {
-    html += '<button class="btn btn-danger btn-sm" id="panel-archive-btn">Archive</button>';
-  }
-  html += '<span style="flex:1"></span>';
-  html += '<button class="btn" id="panel-cancel-btn">Cancel</button>';
-  if (!isReadonly) {
-    html += '<button class="btn btn-primary" id="panel-save-btn">' + (isCreate ? 'Create' : 'Save') + '</button>';
-  }
-  html += '</div>';
-
-  panel.innerHTML = html;
-
-  // Initialize Editor.js for content (if not readonly)
-  if (!isReadonly) {
-    panelState.editor = initEditor('p-content-editor', item.content || '', {
-      placeholder: 'Type / for commands, or start writing...',
-      minHeight: 0,
-    });
-  }
-
-  // Event listeners
-  document.getElementById('panel-close-btn').addEventListener('click', closePanel);
-  document.getElementById('panel-cancel-btn').addEventListener('click', closePanel);
-  var saveBtn = document.getElementById('panel-save-btn');
-  if (saveBtn) saveBtn.addEventListener('click', isCreate ? saveCreatePanel : savePanel);
-
-  var archiveBtn = document.getElementById('panel-archive-btn');
-  if (archiveBtn) {
-    archiveBtn.addEventListener('click', function() {
-      if (!confirm('Archive this ' + typeLabel.toLowerCase() + '?')) return;
-      deleteItem(t, item.id).then(function(ok) {
-        if (ok) { closePanel(); refreshData(); }
-      });
-    });
-  }
-
-  // Properties section toggle
-  var propsToggle = document.getElementById('props-toggle');
-  if (propsToggle) {
-    propsToggle.addEventListener('click', function() {
-      var body = document.getElementById('props-fields-body');
-      var arrow = document.getElementById('props-arrow');
-      if (body.style.display === 'none') {
-        body.style.display = '';
-        arrow.innerHTML = '&#9660;';
-      } else {
-        body.style.display = 'none';
-        arrow.innerHTML = '&#9654;';
-      }
-    });
-  }
-
-  // AI section toggle
-  var aiToggle = document.getElementById('ai-toggle');
-  if (aiToggle) {
-    aiToggle.addEventListener('click', function() {
-      var body = document.getElementById('ai-fields-body');
-      var arrow = document.getElementById('ai-arrow');
-      if (body.style.display === 'none') {
-        body.style.display = '';
-        arrow.innerHTML = '&#9660;';
-      } else {
-        body.style.display = 'none';
-        arrow.innerHTML = '&#9654;';
-      }
-    });
-  }
-
-  // AI tag input event listeners
-  panel.querySelectorAll('.ai-tag-input').forEach(function(container) {
-    var field = container.dataset.aiField;
-    var textInput = container.querySelector('.ai-tag-text');
-    var dropdown = container.querySelector('.ai-autocomplete');
-    if (!textInput || !dropdown) return;
-
-    function getOwnValues() {
-      var vals = [];
-      container.querySelectorAll('.ai-tag-own .ai-tag-val').forEach(function(el) {
-        vals.push(el.textContent);
-      });
-      return vals;
-    }
-
-    function getAllValues() {
-      var vals = [];
-      container.querySelectorAll('.ai-tag').forEach(function(el) {
-        var valEl = el.querySelector('.ai-tag-val');
-        vals.push(valEl ? valEl.textContent : el.textContent);
-      });
-      return vals;
-    }
-
-    function addTag(value) {
-      var v = value.trim();
-      if (!v) return;
-      var existing = getAllValues();
-      if (existing.indexOf(v) !== -1) return;
-      var tag = document.createElement('span');
-      tag.className = 'ai-tag ai-tag-own';
-      tag.innerHTML = '<span class="ai-tag-val">' + escHtml(v) + '</span><button class="ai-tag-remove" type="button">&times;</button>';
-      tag.querySelector('.ai-tag-remove').addEventListener('click', function() { tag.remove(); });
-      container.insertBefore(tag, textInput);
-      textInput.value = '';
-      closeDropdown();
-    }
-
-    function closeDropdown() {
-      dropdown.classList.remove('open');
-      dropdown.innerHTML = '';
-    }
-
-    function showDropdown() {
-      var suggestions = D.aiSuggestions ? (D.aiSuggestions[field] || []) : [];
-      var present = getAllValues();
-      var query = textInput.value.trim().toLowerCase();
-      var filtered = suggestions.filter(function(s) {
-        return present.indexOf(s) === -1 && (!query || s.toLowerCase().indexOf(query) !== -1);
-      });
-      if (filtered.length === 0) { closeDropdown(); return; }
-      dropdown.innerHTML = '';
-      filtered.forEach(function(s) {
-        var item = document.createElement('div');
-        item.className = 'ai-autocomplete-item';
-        item.textContent = s;
-        item.addEventListener('mousedown', function(e) {
-          e.preventDefault();
-          addTag(s);
-        });
-        dropdown.appendChild(item);
-      });
-      dropdown.classList.add('open');
-    }
-
-    // Click on × to remove own tag
-    container.querySelectorAll('.ai-tag-remove').forEach(function(btn) {
-      btn.addEventListener('click', function() { btn.closest('.ai-tag').remove(); });
-    });
-
-    // Click on container focuses input
-    container.addEventListener('click', function(e) {
-      if (e.target === container) textInput.focus();
-    });
-
-    // Input typing → show autocomplete
-    textInput.addEventListener('input', showDropdown);
-    textInput.addEventListener('focus', showDropdown);
-
-    // Enter → add tag
-    textInput.addEventListener('keydown', function(e) {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        if (textInput.value.trim()) addTag(textInput.value);
-      } else if (e.key === 'Backspace' && textInput.value === '') {
-        // Remove last own tag
-        var ownTags = container.querySelectorAll('.ai-tag-own');
-        if (ownTags.length > 0) ownTags[ownTags.length - 1].remove();
-      } else if (e.key === 'Escape') {
-        closeDropdown();
-        textInput.blur();
-      }
-    });
-
-    // Close dropdown on blur
-    textInput.addEventListener('blur', function() {
-      setTimeout(closeDropdown, 150);
-    });
-  });
-
-  // Live icon updates
-  var statusSel = document.getElementById('p-status');
-  if (statusSel) {
-    statusSel.addEventListener('change', function() {
-      var iconEl = document.getElementById('p-status-icon');
-      if (iconEl) iconEl.innerHTML = statusIcon(statusSel.value);
-    });
-  }
-  var prioritySel = document.getElementById('p-priority');
-  if (prioritySel) {
-    prioritySel.addEventListener('change', function() {
-      var iconEl = document.getElementById('p-priority-icon');
-      if (iconEl) iconEl.innerHTML = priorityIcon(prioritySel.value);
-    });
-  }
-
-  // Ctrl/Cmd+S to save
-  panel.addEventListener('keydown', function(e) {
-    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
-      e.preventDefault();
-      if (isCreate) saveCreatePanel();
-      else savePanel();
-    }
-  });
-
-  // Link chip click handlers
-  panel.querySelectorAll('.link-chip[data-link]').forEach(function(chip) {
-    chip.addEventListener('click', function() {
-      var ref = chip.dataset.link;
-      var parts = ref.split(':');
-      if (parts.length === 2 && hasWorkspace()) {
-        closePanel();
-        switchSource(parts[0]);
-        setTimeout(function() {
-          var task = D.tasks.find(function(t) { return t.id === ref || t.id === parts[1]; });
-          if (task) openPanel('tasks', task);
-        }, 500);
-      }
-    });
-  });
-}
-
-async function savePanel() {
-  var t = panelState.type;
-  var item = panelState.item;
-  if (!t || !item) return;
-
-  var updates = {};
-
-  var titleEl = document.getElementById('p-title');
-  if (titleEl && titleEl.value !== (item.title || '')) updates.title = titleEl.value;
-
-  var statusEl = document.getElementById('p-status');
-  if (statusEl && statusEl.value !== (item.status || '')) updates.status = statusEl.value;
-
-  if (t === 'tasks' || t === 'epics') {
-    var priorityEl = document.getElementById('p-priority');
-    if (priorityEl && priorityEl.value !== (item.priority || '')) updates.priority = priorityEl.value || null;
-  }
-
-  if (t === 'tasks') {
-    var pointsEl = document.getElementById('p-points');
-    if (pointsEl) {
-      var pv = pointsEl.value ? Number(pointsEl.value) : null;
-      if (pv !== item.points) updates.points = pv;
-    }
-
-    var assignedEl = document.getElementById('p-assigned');
-    if (assignedEl) {
-      var av = assignedEl.value.trim();
-      var origAssigned = Array.isArray(item.assigned) ? item.assigned.join(', ') : (item.assigned || '');
-      if (av !== origAssigned) updates.assigned = av || null;
-    }
-
-    var sprintEl = document.getElementById('p-sprint');
-    if (sprintEl && sprintEl.value !== (item.sprint || '')) updates.sprint = sprintEl.value || null;
-  }
-
-  if (t === 'milestones') {
-    var deadlineEl = document.getElementById('p-deadline');
-    if (deadlineEl && deadlineEl.value !== fmtDate(item.deadline)) updates.deadline = deadlineEl.value || null;
-  }
-
-  if (panelState.editor) {
-    var newContent = await getEditorMarkdown(panelState.editor);
-    if (newContent !== (item.content || '')) updates.content = newContent;
-  }
-
-  // AI properties — read from tag inputs
-  var aiTagInputs = document.querySelectorAll('.ai-tag-input[data-ai-field]');
-  if (aiTagInputs.length > 0) {
-    var aiObj = {};
-    aiTagInputs.forEach(function(container) {
-      var field = container.dataset.aiField;
-      var vals = [];
-      container.querySelectorAll('.ai-tag-own .ai-tag-val').forEach(function(el) {
-        var v = el.textContent.trim();
-        if (v) vals.push(v);
-      });
-      if (vals.length > 0) aiObj[field] = vals;
-    });
-    if (Object.keys(aiObj).length > 0) {
-      updates.ai = aiObj;
-    } else if (item.aiOwn && Object.keys(item.aiOwn).length > 0) {
-      updates.ai = null;
-    }
-  }
-
-  if (Object.keys(updates).length === 0) {
-    showToast('No changes to save', 'success');
-    closePanel();
-    return;
-  }
-
-  var ok = await patchItem(t, item.id, updates);
-  if (ok) {
-    closePanel();
-    refreshData();
-  }
-}
-
-async function saveCreatePanel() {
-  var t = panelState.type;
-  if (!t) return;
-
-  var data = {};
-
-  var titleEl = document.getElementById('p-title');
-  if (titleEl) data.title = titleEl.value || 'Untitled';
-
-  var statusEl = document.getElementById('p-status');
-  if (statusEl) data.status = statusEl.value;
-
-  if (t === 'tasks' || t === 'epics') {
-    var priorityEl = document.getElementById('p-priority');
-    if (priorityEl && priorityEl.value) data.priority = priorityEl.value;
-  }
-
-  if (t === 'tasks') {
-    var pointsEl = document.getElementById('p-points');
-    if (pointsEl && pointsEl.value) data.points = Number(pointsEl.value);
-
-    var assignedEl = document.getElementById('p-assigned');
-    if (assignedEl && assignedEl.value.trim()) data.assigned = assignedEl.value.trim();
-
-    var sprintEl = document.getElementById('p-sprint');
-    if (sprintEl && sprintEl.value) data.sprint = sprintEl.value;
-
-    var milestoneEl = document.getElementById('p-milestone');
-    if (milestoneEl) data.milestone = milestoneEl.value;
-
-    var epicEl = document.getElementById('p-epic-select');
-    if (epicEl) data.epic = epicEl.value;
-  }
-
-  if (t === 'epics' || t === 'milestones') {
-    var milestoneEl = document.getElementById('p-milestone');
-    if (milestoneEl) data.milestone = milestoneEl.value;
-  }
-
-  if (t === 'milestones') {
-    var deadlineEl = document.getElementById('p-deadline');
-    if (deadlineEl && deadlineEl.value) data.deadline = deadlineEl.value;
-  }
-
-  if (panelState.editor) {
-    var editorContent = await getEditorMarkdown(panelState.editor);
-    if (editorContent) data.content = editorContent;
-  }
-
-  // AI properties — read from tag inputs
-  var aiTagInputs = document.querySelectorAll('.ai-tag-input[data-ai-field]');
-  if (aiTagInputs.length > 0) {
-    var aiObj = {};
-    aiTagInputs.forEach(function(container) {
-      var field = container.dataset.aiField;
-      var vals = [];
-      container.querySelectorAll('.ai-tag-own .ai-tag-val').forEach(function(el) {
-        var v = el.textContent.trim();
-        if (v) vals.push(v);
-      });
-      if (vals.length > 0) aiObj[field] = vals;
-    });
-    if (Object.keys(aiObj).length > 0) data.ai = aiObj;
-  }
-
-  var result = await createItem(t, data);
-  if (result) {
-    closePanel();
-    refreshData();
-  }
-}
-
-// Close panel on overlay click or Escape
-document.getElementById('panel-overlay').addEventListener('click', closePanel);
-document.addEventListener('keydown', function(e) {
-  if (e.key === 'Escape' && panelState.open) closePanel();
-});