mdboard 1.1.0 → 1.2.0

package/index.html

@@ -25,9 +25,23 @@ a{color:var(--accent);text-decoration:none}
 
 /* ── Layout ──────────────────────────────────────────────── */
 .app{display:flex;height:100vh;overflow:hidden}
+.source-rail{width:56px;background:var(--bg);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px;flex-shrink:0;overflow-y:auto}
+.source-rail:empty{display:none}
+.rail-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:all .15s;position:relative;color:var(--text2);background:var(--surface2);border:2px solid transparent;flex-shrink:0}
+.rail-icon:hover{border-radius:10px;background:var(--surface);color:var(--text)}
+.rail-icon.active{border-color:var(--accent);border-radius:10px;color:var(--text)}
+.rail-icon.active::before{content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:4px;height:24px;border-radius:0 4px 4px 0;background:var(--accent)}
+.rail-icon img{width:24px;height:24px;border-radius:4px;object-fit:contain}
+.rail-icon svg{width:20px;height:20px}
+.rail-divider{width:24px;height:2px;background:var(--border);border-radius:1px;flex-shrink:0}
+.rail-icon[data-tooltip]{position:relative}
+.rail-icon[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--surface);border:1px solid var(--border);color:var(--text);padding:4px 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;white-space:nowrap;z-index:50;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.3)}
 .sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
-.sidebar-logo{padding:20px 16px 16px;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.02em}
-.sidebar-logo span{color:var(--accent)}
+.sidebar-logo{padding:20px 16px 16px;font-size:14px;font-weight:700;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:10px;transition:opacity .15s}
+.sidebar-logo:hover{opacity:.8}
+.sidebar-logo-icon{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--accent);background:var(--accent-dim);flex-shrink:0}
+.sidebar-logo img{width:28px;height:28px;border-radius:var(--radius-sm);object-fit:contain}
+.sidebar-logo-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #sidebar-nav{flex:1;padding:8px}
 #sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);color:var(--text2);font-size:13px;font-weight:500;transition:all .15s;border-left:2px solid transparent;margin-bottom:2px}
 #sidebar-nav a:hover{color:var(--text);background:var(--surface2)}
@@ -39,9 +53,6 @@ a{color:var(--accent);text-decoration:none}
 
 /* ── Header ──────────────────────────────────────────────── */
 .header{padding:16px 24px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
-.header-title{flex-shrink:0}
-.header-title h1{font-size:18px;font-weight:700;line-height:1.3}
-.header-title p{font-size:12px;color:var(--text2);margin-top:2px}
 .header-section{display:flex;flex-direction:column;gap:4px;min-width:120px}
 .header-section-label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);font-weight:600}
 .header-section-value{font-size:13px;font-weight:600}
@@ -207,11 +218,39 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 .loading-container{padding:20px}
 @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
 
+/* ── Workspace: Source Icon (reused in header chips) ──────── */
+.source-icon{width:20px;height:20px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;font-weight:700;line-height:1}
+
+/* ── Link Chips ──────────────────────────────────────────── */
+.link-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text2);transition:all .15s;white-space:nowrap}
+.link-chip:hover{background:var(--border);color:var(--text)}
+.link-chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
+.link-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
+
+/* ── CRUD Buttons ────────────────────────────────────────── */
+.btn-sm{padding:5px 12px;font-size:12px;border-radius:var(--radius-sm)}
+.btn-create{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
+.btn-create:hover{opacity:.9}
+.card-readonly{opacity:.75;cursor:default}
+.card-readonly:hover{border-color:var(--border);background:var(--bg)}
+
+/* ── Overview: Tracked Milestones ────────────────────────── */
+.tracked-ms{margin-top:12px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm)}
+.tracked-ms-header{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);font-weight:600;margin-bottom:8px}
+.tracked-ms-item{display:flex;align-items:center;gap:8px;padding:4px 0}
+.tracked-ms-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+.tracked-ms-item .progress{flex:1;max-width:120px}
+.tracked-ms-item span{font-size:12px}
+.tracked-ms-pct{font-family:var(--mono);font-weight:600;font-size:12px;min-width:36px;text-align:right}
+
 /* ── Responsive ──────────────────────────────────────────── */
 @media(max-width:1024px){
+  .source-rail{width:48px;padding:8px 0;gap:6px}
+  .rail-icon{width:34px;height:34px;font-size:15px;border-radius:10px}
+  .rail-icon.active::before{left:-12px;height:18px}
   .sidebar{width:56px}
-  .sidebar-logo span,.sidebar-footer,#sidebar-nav a span{display:none}
-  .sidebar-logo{padding:16px 12px;text-align:center}
+  .sidebar-logo-text,.sidebar-footer,#sidebar-nav a span{display:none}
+  .sidebar-logo{padding:16px 12px;justify-content:center}
   #sidebar-nav a{justify-content:center;padding:10px}
   .header{padding:12px 16px}
   .content{padding:16px}
@@ -229,9 +268,15 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 </head>
 <body>
 <div class="app">
+  <!-- Source Rail (Discord/Slack style) -->
+  <nav class="source-rail" id="source-rail"></nav>
+
   <!-- Sidebar -->
   <aside class="sidebar">
-    <div class="sidebar-logo"><span>&#9632;</span> mdboard</div>
+    <div class="sidebar-logo" id="sidebar-logo">
+      <span class="sidebar-logo-icon" id="sidebar-logo-icon">&#9632;</span>
+      <span class="sidebar-logo-text" id="sidebar-logo-text">mdboard</span>
+    </div>
     <nav id="sidebar-nav">
       <a href="#board" data-view="board" class="active">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
@@ -256,10 +301,6 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
   <div class="main">
     <!-- Header -->
     <header class="header">
-      <div class="header-title">
-        <h1 id="h-project-name">Loading...</h1>
-        <p id="h-project-desc"></p>
-      </div>
       <div class="header-section" id="h-milestone-wrap" style="display:none">
         <span class="header-section-label">Milestone</span>
         <span class="header-section-value" id="h-milestone-name"></span>
@@ -291,6 +332,9 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
       <div id="view-metrics" class="view">
         <div id="metrics-container"></div>
       </div>
+      <div id="view-overview" class="view">
+        <div id="overview-container"></div>
+      </div>
     </div>
   </div>
 </div>
@@ -371,7 +415,8 @@ function milestoneIcon(status) {
    ══════════════════════════════════════════════════════════════ */
 var D = {
   config: null, project: null, milestones: [], epics: [], tasks: [],
-  sprints: [], allSprints: [], metrics: null, health: null, loaded: false
+  sprints: [], allSprints: [], metrics: null, health: null, loaded: false,
+  sources: [], activeSource: null, overviewLinks: null
 };
 
 /* ── Helpers ─────────────────────────────────────────────── */
@@ -421,7 +466,8 @@ async function fetchJson(url) {
 
 async function patchItem(type, id, updates) {
   try {
-    var r = await fetch('/api/' + type + '/' + encodeURIComponent(id), {
+    var base = apiBase();
+    var r = await fetch(base + '/' + type + '/' + encodeURIComponent(id), {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(updates),
@@ -440,22 +486,82 @@ async function patchItem(type, id, updates) {
   }
 }
 
+/* ── 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('/api/project'), fetchJson('/api/milestones'), fetchJson('/api/epics'),
-    fetchJson('/api/tasks'), fetchJson('/api/sprint'), fetchJson('/api/metrics'),
-    fetchJson('/api/health'), fetchJson('/api/sprints'), fetchJson('/api/config')
+    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')
   ]);
   D.project = results[0]; D.milestones = results[1] || []; D.epics = results[2] || [];
   D.tasks = results[3] || [];
-  if (results[4]) D.sprints = [results[4]];
+  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.loaded = true;
 }
 
-function refreshData() { loadAll().then(function() { initFromConfig(); renderAll(); }); }
+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() {
@@ -531,6 +637,119 @@ function generateDynamicStyles() {
   if (styleEl) styleEl.textContent = css;
 }
 
+/* ══════════════════════════════════════════════════════════════
+   WORKSPACE — Source switching & sidebar
+   ══════════════════════════════════════════════════════════════ */
+function renderSidebarLogo() {
+  var p = D.project || {};
+  var logoEl = document.getElementById('sidebar-logo');
+  var iconEl = document.getElementById('sidebar-logo-icon');
+  var textEl = document.getElementById('sidebar-logo-text');
+
+  textEl.textContent = p.name || 'Project';
+
+  if (D.config && D.config.logo) {
+    var logoSrc = D.config.logo.startsWith('http') ? D.config.logo : '/logo';
+    iconEl.innerHTML = '<img src="' + escHtml(logoSrc) + '" alt="">';
+  } else {
+    var initial = (p.name || 'P').charAt(0).toUpperCase();
+    iconEl.textContent = initial;
+  }
+
+  logoEl.onclick = function() {
+    if (hasWorkspace()) {
+      switchSource('overview');
+    }
+  };
+}
+
+function buildSourceRail() {
+  var rail = document.getElementById('source-rail');
+  if (!rail) return;
+  rail.innerHTML = '';
+
+  if (!hasWorkspace()) return;
+
+  // Home icon (overview)
+  var home = document.createElement('div');
+  home.className = 'rail-icon' + (D.activeSource === 'overview' ? ' active' : '');
+  home.dataset.source = 'overview';
+  home.setAttribute('data-tooltip', 'Overview');
+  home.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>';
+  home.onclick = function() { switchSource('overview'); };
+  rail.appendChild(home);
+
+  // Divider
+  var divider = document.createElement('div');
+  divider.className = 'rail-divider';
+  rail.appendChild(divider);
+
+  // Source icons
+  var wsSources = D.config.workspace.sources;
+  for (var i = 0; i < wsSources.length; i++) {
+    var s = wsSources[i];
+    if (s.name === 'overview') continue;
+
+    var color = s.color || 'var(--accent)';
+    var icon = document.createElement('div');
+    icon.className = 'rail-icon' + (D.activeSource === s.name ? ' active' : '');
+    icon.dataset.source = s.name;
+    icon.setAttribute('data-tooltip', s.label || s.name);
+    icon.style.background = color + '20';
+    icon.style.color = color;
+    icon.innerHTML = escHtml(s.icon || s.name.charAt(0).toUpperCase());
+    icon.onclick = (function(name) {
+      return function() { switchSource(name); };
+    })(s.name);
+    rail.appendChild(icon);
+  }
+}
+
+function switchSource(sourceName) {
+  if (sourceName === D.activeSource) return;
+
+  // Update active source marker
+  D.activeSource = sourceName;
+  D.loaded = false;
+
+  // Persist selection
+  try { localStorage.setItem('mdboard-source', sourceName); } catch(e) {}
+
+  // Update source rail active state
+  document.querySelectorAll('.rail-icon').forEach(function(el) {
+    el.classList.toggle('active', el.dataset.source === sourceName);
+  });
+
+  // If switching to overview, show overview tabs; otherwise show normal tabs
+  var isOverview = sourceName === 'overview';
+  var viewTabs = document.querySelectorAll('#sidebar-nav a[data-view]');
+  viewTabs.forEach(function(tab) {
+    var view = tab.dataset.view;
+    if (isOverview) {
+      tab.style.display = (view === 'overview' || view === 'metrics') ? '' : 'none';
+    } else {
+      tab.style.display = (view === 'overview') ? 'none' : '';
+    }
+  });
+
+  // Switch to appropriate view
+  if (isOverview) {
+    switchView('overview');
+  } else {
+    var currentView = document.querySelector('.view.active');
+    if (currentView && currentView.id === 'view-overview') {
+      switchView('board');
+    }
+  }
+
+  // Reload data for this source
+  loadAll().then(function() {
+    initFromConfig();
+    renderAll();
+    buildSourceRail();
+  });
+}
+
 /* ── SSE — Hot Reload ────────────────────────────────────── */
 function connectSSE() {
   try {
@@ -551,12 +770,17 @@ function connectSSE() {
 /* ══════════════════════════════════════════════════════════════
    RENDER
    ══════════════════════════════════════════════════════════════ */
-function renderAll() { renderHeader(); renderBoardFilters(); renderBoard(); renderTableControls(); renderTableBody(); renderMsFilters(); renderMilestones(); renderMetrics(); }
+function renderAll() {
+  renderHeader(); renderBoardFilters(); renderBoard(); renderTableControls(); renderTableBody(); renderMsFilters(); renderMilestones(); renderMetrics();
+  // Render overview if active
+  var overviewView = document.getElementById('view-overview');
+  if (overviewView && overviewView.classList.contains('active')) {
+    renderOverview();
+  }
+}
 
 function renderHeader() {
-  var p = D.project || {};
-  document.getElementById('h-project-name').textContent = p.name || 'Project';
-  document.getElementById('h-project-desc').textContent = p.description || '';
+  renderSidebarLogo();
 
   var mw = document.getElementById('h-milestone-wrap');
   var am = D.milestones.find(function(m) { return m.status === 'active'; });
@@ -610,7 +834,11 @@ function renderBoardFilters() {
       arr.map(function(v) { return '<option value="' + escHtml(v) + '"' + (boardFilters[key] === v ? ' selected' : '') + '>' + escHtml(v) + '</option>'; }).join('') + '</select>';
   }
 
-  c.innerHTML = '<input type="text" data-filter="search" placeholder="Search cards..." value="' + escHtml(boardFilters.search) + '">' +
+  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);
@@ -621,6 +849,9 @@ function renderBoardFilters() {
   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() {
@@ -769,7 +1000,11 @@ function renderTableControls() {
     return '<select data-tf="' + filter + '"><option value="">All ' + label + '</option>' +
       arr.map(function(v) { return '<option value="' + escHtml(v) + '"' + (tableFilters[filter] === v ? ' selected' : '') + '>' + escHtml(v) + '</option>'; }).join('') + '</select>';
   }
-  c.innerHTML = '<input type="text" data-tf="search" placeholder="Search ID or title..." value="' + escHtml(tableFilters.search) + '">' +
+  var createBtn = isSourceWritable() ?
+    '<button class="btn btn-sm btn-create" id="table-create-btn">+ New ' + escHtml(ENTITY_NAMES.task ? ENTITY_NAMES.task.singular : 'Task') + '</button>' : '';
+
+  c.innerHTML = createBtn +
+    '<input type="text" data-tf="search" placeholder="Search ID or title..." value="' + escHtml(tableFilters.search) + '">' +
     opts(ms, 'milestone', msPlural) + opts(ep, 'epic', epicPlural) + opts(st, 'status', 'Statuses') + opts(sp, 'sprint', sprintPlural) +
     '<select data-tf="priority"><option value="">All Priorities</option>' +
     PRIORITIES.map(function(p) { return '<option value="' + p + '"' + (tableFilters.priority === p ? ' selected' : '') + '>' + (PRIORITY_LABELS[p] || p) + '</option>'; }).join('') + '</select>';
@@ -778,6 +1013,9 @@ function renderTableControls() {
   c.querySelectorAll('select[data-tf]').forEach(function(sel) {
     sel.addEventListener('change', function() { tableFilters[sel.dataset.tf] = sel.value; renderTableBody(); });
   });
+
+  var btn = document.getElementById('table-create-btn');
+  if (btn) btn.addEventListener('click', function() { openCreateDialog('tasks'); });
 }
 
 function getFilteredTasks() {
@@ -962,12 +1200,162 @@ function renderMetrics() {
 }
 
 /* ══════════════════════════════════════════════════════════════
-   DETAIL PANEL — Edit tasks, epics, milestones
+   CRUD HELPERS
+   ══════════════════════════════════════════════════════════════ */
+function isSourceWritable() {
+  if (!hasWorkspace() || !D.activeSource) return true; // legacy mode = writable
+  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') {
+    // Pre-fill milestone and epic from available ones
+    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 };
+  renderPanel();
+  document.getElementById('detail-panel').classList.add('open');
+  document.getElementById('panel-overlay').classList.add('open');
+}
+
+/* ══════════════════════════════════════════════════════════════
+   OVERVIEW VIEW
+   ══════════════════════════════════════════════════════════════ */
+async function renderOverview() {
+  var c = document.getElementById('overview-container');
+  if (!D.loaded) { c.innerHTML = '<div class="loading-container"><div class="skeleton skeleton-card" style="height:200px"></div></div>'; return; }
+
+  // Fetch overview data
+  var overviewMs = await fetchJson('/api/overview/milestones') || [];
+  var overviewLinks = await fetchJson('/api/overview/links');
+  var overviewMetrics = await fetchJson('/api/overview/metrics');
+
+  D.overviewLinks = overviewLinks;
+
+  var html = '<h2 style="margin-bottom:16px;font-size:16px;font-weight:700">Workspace Overview</h2>';
+
+  // Global Milestones
+  html += '<h3 style="font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);font-weight:600;margin:16px 0 8px">Global Milestones</h3>';
+  if (overviewMs.length > 0) {
+    html += overviewMs.map(function(ms) {
+      var pct = ms.combinedProgress != null ? ms.combinedProgress : (ms.progress || 0);
+      var tracked = ms.tracked || [];
+      var trackedHtml = '';
+      if (tracked.length > 0) {
+        trackedHtml = '<div class="tracked-ms"><div class="tracked-ms-header">Tracked Sub-Milestones</div>' +
+          tracked.map(function(t) {
+            return '<div class="tracked-ms-item"><span class="dot" style="background:' + (t.sourceColor || 'var(--accent)') + '"></span>' +
+              '<span style="font-size:12px;flex:1">' + escHtml(t.title || t.id || '') + '</span>' +
+              '<div class="progress progress-accent" style="width:80px"><div class="progress-fill" style="width:' + t.progress + '%;background:' + (t.sourceColor || 'var(--accent)') + '"></div></div>' +
+              '<span class="tracked-ms-pct">' + t.progress + '%</span></div>';
+          }).join('') + '</div>';
+      }
+      return '<div class="ms-card">' +
+        '<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>' + (ms.completedCount || 0) + ' / ' + (ms.featureCount || 0) + ' tasks</span><span>' + pct + '%</span></div>' +
+        '<div class="progress progress-lg progress-success"><div class="progress-fill" style="width:' + pct + '%"></div></div></div>' +
+        trackedHtml + '</div>';
+    }).join('');
+  } else {
+    html += '<div style="color:var(--text3);padding:8px 0">No milestones found across sources.</div>';
+  }
+
+  // Cross-project links
+  if (overviewLinks && overviewLinks.links && overviewLinks.links.length > 0) {
+    html += '<h3 style="font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);font-weight:600;margin:24px 0 8px">Cross-Project Links</h3>';
+    html += '<div class="metrics-grid">';
+    var linkGroups = {};
+    overviewLinks.links.forEach(function(l) {
+      var key = (l.fromSource || 'unknown');
+      if (!linkGroups[key]) linkGroups[key] = [];
+      linkGroups[key].push(l);
+    });
+    Object.keys(linkGroups).forEach(function(src) {
+      var links = linkGroups[src];
+      html += '<div class="metric-card"><h3>' + escHtml(src) + ' Links</h3>';
+      html += links.map(function(l) {
+        return '<div class="health-row"><span style="font-size:12px;font-family:var(--mono)">' + escHtml(l.from || '') + '</span>' +
+          '<span style="color:var(--text3);margin:0 4px">&rarr;</span>' +
+          '<span class="link-chip" data-link="' + escHtml(l.to || '') + '">' +
+          '<span class="link-chip-dot" style="background:var(--accent)"></span>' + escHtml(l.to || '') + '</span></div>';
+      }).join('');
+      html += '</div>';
+    });
+    html += '</div>';
+  }
+
+  // Source metrics
+  if (overviewMetrics && overviewMetrics.sources) {
+    html += '<h3 style="font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);font-weight:600;margin:24px 0 8px">Source Metrics</h3>';
+    html += '<div class="metrics-grid">';
+    Object.keys(overviewMetrics.sources).forEach(function(key) {
+      var m = overviewMetrics.sources[key];
+      var pct = m.totalTasks > 0 ? Math.round((m.completedTasks / m.totalTasks) * 100) : 0;
+      html += '<div class="metric-card" style="border-left:3px solid ' + (m.color || 'var(--accent)') + '">' +
+        '<h3>' + escHtml(m.label || key) + '</h3>' +
+        '<div class="health-row"><div class="health-label">Tasks</div><div class="health-val">' + m.totalTasks + '</div></div>' +
+        '<div class="health-row"><div class="health-label">Completed</div><div class="health-val">' + m.completedTasks + '</div></div>' +
+        '<div class="health-row"><div class="health-label">Points</div><div class="health-val">' + m.totalPoints + '</div></div>' +
+        '<div class="progress progress-lg progress-success" style="margin-top:8px"><div class="progress-fill" style="width:' + pct + '%;background:' + (m.color || 'var(--success)') + '"></div></div>' +
+        '</div>';
+    });
+    html += '</div>';
+  }
+
+  c.innerHTML = html;
+
+  // Click handlers for link chips
+  c.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) {
+        switchSource(parts[0]);
+        // After switch, try to find and open the item
+        setTimeout(function() {
+          var task = D.tasks.find(function(t) { return t.id === ref || t.id === parts[1]; });
+          if (task) openPanel('tasks', task);
+        }, 500);
+      }
+    });
+  });
+}
+
+/* ══════════════════════════════════════════════════════════════
+   DETAIL PANEL — Edit/Create tasks, epics, milestones
    ══════════════════════════════════════════════════════════════ */
-var panelState = { open: false, type: null, item: null };
+var panelState = { open: false, type: null, item: null, isCreate: false };
 
 function openPanel(type, item) {
-  panelState = { open: true, type: type, item: JSON.parse(JSON.stringify(item)) };
+  panelState = { open: true, type: type, item: JSON.parse(JSON.stringify(item)), isCreate: false };
   renderPanel();
   document.getElementById('detail-panel').classList.add('open');
   document.getElementById('panel-overlay').classList.add('open');
@@ -983,23 +1371,31 @@ 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';
 
   var html = '<div class="panel-header">' +
-    '<span class="panel-type">' + escHtml(typeLabel) + '</span>' +
-    '<span class="panel-item-id">' + escHtml(item.id || '') + '</span>' +
-    '<button class="panel-close" id="panel-close-btn">&times;</button>' +
-    '</div>';
+    '<span class="panel-type">' + escHtml(isCreate ? 'New ' + typeLabel : typeLabel) + '</span>' +
+    '<span class="panel-item-id">' + escHtml(isCreate ? '' : (item.id || '')) + '</span>';
+
+  // Source badge
+  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>';
 
   html += '<div class="panel-body">';
 
   // Title
-  html += '<div class="panel-field"><label>Title</label><input type="text" id="p-title" value="' + escHtml(item.title || '') + '"></div>';
+  html += '<div class="panel-field"><label>Title</label><input type="text" id="p-title" value="' + escHtml(item.title || '') + '"' + (isReadonly ? ' disabled' : '') + '></div>';
 
   // Status + Priority row
   html += '<div class="panel-props">';
@@ -1027,14 +1423,14 @@ function renderPanel() {
   }
 
   html += '<div class="panel-field"><label>Status</label><div class="field-with-icon"><span id="p-status-icon">' + statusIcon(item.status) + '</span>' +
-    '<select id="p-status">' + statusOptions.map(function(s) {
+    '<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>';
 
   // Priority
   if (t === 'tasks' || t === 'epics') {
     html += '<div class="panel-field"><label>Priority</label><div class="field-with-icon"><span id="p-priority-icon">' + priorityIcon(item.priority) + '</span>' +
-      '<select id="p-priority"><option value="">None</option>' + PRIORITIES.map(function(p) {
+      '<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>';
   }
@@ -1044,43 +1440,113 @@ function renderPanel() {
   // Type-specific fields
   if (t === 'tasks') {
     html += '<div class="panel-props">';
-    html += '<div class="panel-field"><label>Points</label><input type="number" id="p-points" min="0" max="100" value="' + (item.points != null ? item.points : '') + '"></div>';
+    html += '<div class="panel-field"><label>Points</label><input type="number" id="p-points" min="0" max="100" value="' + (item.points != null ? item.points : '') + '"' + (isReadonly ? ' disabled' : '') + '></div>';
 
     var assignedVal = Array.isArray(item.assigned) ? item.assigned.join(', ') : (item.assigned || '');
-    html += '<div class="panel-field"><label>Assigned</label><input type="text" id="p-assigned" value="' + escHtml(assignedVal) + '" placeholder="agent-name"></div>';
+    html += '<div class="panel-field"><label>Assigned</label><input type="text" id="p-assigned" value="' + escHtml(assignedVal) + '" placeholder="agent-name"' + (isReadonly ? ' disabled' : '') + '></div>';
     html += '</div>';
 
     html += '<div class="panel-props">';
     // Sprint
-    html += '<div class="panel-field"><label>Sprint</label><select id="p-sprint"><option value="">None</option>' +
+    html += '<div class="panel-field"><label>Sprint</label><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>';
 
-    // Epic (read-only info)
-    html += '<div class="panel-field"><label>Epic</label><input type="text" id="p-epic" value="' + escHtml(item.epic || '') + '" disabled style="opacity:.6" title="Epic is determined by file location"></div>';
-    html += '</div>';
+    if (isCreate) {
+      // Milestone and Epic as editable dropdowns for create mode
+      html += '<div class="panel-field"><label>Milestone</label><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>';
+      html += '</div>';
+      html += '<div class="panel-field"><label>Epic</label><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>';
+    } else {
+      // Epic (read-only info)
+      html += '<div class="panel-field"><label>Epic</label><input type="text" id="p-epic" value="' + escHtml(item.epic || '') + '" disabled style="opacity:.6" title="Epic is determined by file location"></div>';
+      html += '</div>';
+    }
+
+    // Links rendering
+    if (!isCreate && item.links && Array.isArray(item.links) && item.links.length > 0) {
+      html += '<div class="panel-field"><label>Links</label><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>';
+    }
+
+    // Reverse links
+    if (!isCreate && D.overviewLinks && D.overviewLinks.reverseLinks && item.id) {
+      var reverseRefs = D.overviewLinks.reverseLinks[item.id] || [];
+      if (reverseRefs.length > 0) {
+        html += '<div class="panel-field"><label>Referenced By</label><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>';
+      }
+    }
   }
 
   if (t === 'milestones') {
-    html += '<div class="panel-field"><label>Deadline</label><input type="date" id="p-deadline" value="' + fmtDate(item.deadline) + '"></div>';
+    html += '<div class="panel-field"><label>Deadline</label><input type="date" id="p-deadline" value="' + fmtDate(item.deadline) + '"' + (isReadonly ? ' disabled' : '') + '></div>';
+  }
+
+  if (isCreate && (t === 'epics' || t === 'milestones')) {
+    if (t === 'epics') {
+      html += '<div class="panel-field"><label>Milestone</label><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>';
+    }
   }
 
   // Description / Content
-  html += '<div class="panel-field"><label>Description</label><textarea id="p-content">' + escHtml(item.content || '') + '</textarea></div>';
+  html += '<div class="panel-field"><label>Description</label><textarea id="p-content"' + (isReadonly ? ' disabled' : '') + '>' + escHtml(item.content || '') + '</textarea></div>';
 
   html += '</div>'; // close panel-body
 
-  html += '<div class="panel-footer">' +
-    '<button class="btn" id="panel-cancel-btn">Cancel</button>' +
-    '<button class="btn btn-primary" id="panel-save-btn">Save Changes</button>' +
-    '</div>';
+  // Footer with buttons
+  html += '<div class="panel-footer">';
+  if (!isCreate && !isReadonly && isSourceWritable()) {
+    html += '<button class="btn btn-danger" 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 Changes') + '</button>';
+  }
+  html += '</div>';
 
   panel.innerHTML = html;
 
   // Event listeners
   document.getElementById('panel-close-btn').addEventListener('click', closePanel);
   document.getElementById('panel-cancel-btn').addEventListener('click', closePanel);
-  document.getElementById('panel-save-btn').addEventListener('click', savePanel);
+  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() + '? It will be moved to the archive directory.')) return;
+      deleteItem(t, item.id).then(function(ok) {
+        if (ok) { closePanel(); refreshData(); }
+      });
+    });
+  }
 
   // Live icon updates
   var statusSel = document.getElementById('p-status');
@@ -1097,6 +1563,22 @@ function renderPanel() {
       if (iconEl) iconEl.innerHTML = priorityIcon(prioritySel.value);
     });
   }
+
+  // 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() {
@@ -1156,6 +1638,60 @@ async function savePanel() {
   }
 }
 
+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;
+  }
+
+  var contentEl = document.getElementById('p-content');
+  if (contentEl && contentEl.value) data.content = contentEl.value;
+
+  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) {
@@ -1167,11 +1703,17 @@ document.addEventListener('keydown', function(e) {
    ══════════════════════════════════════════════════════════════ */
 function switchView(name) {
   document.querySelectorAll('.view').forEach(function(v) { v.classList.remove('active'); });
-  document.querySelectorAll('#sidebar-nav a').forEach(function(a) { a.classList.remove('active'); });
+  document.querySelectorAll('#sidebar-nav a[data-view]').forEach(function(a) { a.classList.remove('active'); });
   var t = document.getElementById('view-' + name);
   if (t) t.classList.add('active');
   var l = document.querySelector('#sidebar-nav a[data-view="' + name + '"]');
   if (l) l.classList.add('active');
+  // Persist view selection
+  try { localStorage.setItem('mdboard-view', name); } catch(e) {}
+  // Trigger overview rendering when switching to it
+  if (name === 'overview' && D.loaded) {
+    renderOverview();
+  }
 }
 
 document.getElementById('sidebar-nav').addEventListener('click', function(e) {
@@ -1183,8 +1725,12 @@ document.getElementById('sidebar-nav').addEventListener('click', function(e) {
 });
 
 function handleHash() {
-  var hash = window.location.hash.replace('#', '') || 'board';
-  var valid = ['board','table','milestones','metrics'];
+  var hash = window.location.hash.replace('#', '');
+  if (!hash) {
+    try { hash = localStorage.getItem('mdboard-view') || ''; } catch(e) {}
+  }
+  hash = hash || 'board';
+  var valid = ['board','table','milestones','metrics','overview'];
   switchView(valid.indexOf(hash) !== -1 ? hash : 'board');
 }
 window.addEventListener('hashchange', handleHash);
@@ -1196,8 +1742,53 @@ window.addEventListener('hashchange', handleHash);
   handleHash();
   await loadAll();
   initFromConfig();
+
+  // Sidebar logo always shows project name
+  renderSidebarLogo();
+
+  // Workspace detection: build source rail + restore last source
+  if (hasWorkspace()) {
+    // Create overview tab (hidden by default)
+    var overviewTab = document.querySelector('#sidebar-nav a[data-view="overview"]');
+    if (!overviewTab) {
+      var nav = document.getElementById('sidebar-nav');
+      var metricsLink = document.querySelector('#sidebar-nav a[data-view="metrics"]');
+      var overviewLink = document.createElement('a');
+      overviewLink.href = '#overview';
+      overviewLink.dataset.view = 'overview';
+      overviewLink.style.display = 'none';
+      overviewLink.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18"/></svg><span>Overview</span>';
+      if (metricsLink && metricsLink.nextSibling) {
+        nav.insertBefore(overviewLink, metricsLink.nextSibling);
+      } else {
+        nav.appendChild(overviewLink);
+      }
+    }
+
+    // Restore last source or default to overview
+    var savedSource = null;
+    try { savedSource = localStorage.getItem('mdboard-source'); } catch(e) {}
+    var validSource = savedSource && (savedSource === 'overview' || D.config.workspace.sources.some(function(s) { return s.name === savedSource; }));
+    var initialSource = validSource ? savedSource : 'overview';
+
+    buildSourceRail();
+    // switchSource skips if same as current, so set activeSource first then trigger
+    D.activeSource = null;
+    switchSource(initialSource);
+    // Wait for switchSource data reload before continuing
+    await loadAll();
+    initFromConfig();
+  }
+
   renderAll();
   connectSSE();
+
+  // Load overview links in background for reverse link display
+  if (hasWorkspace()) {
+    fetchJson('/api/overview/links').then(function(data) {
+      D.overviewLinks = data;
+    });
+  }
 })();
 </script>
 </body>