mdboard 1.0.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}
@@ -89,12 +100,6 @@ a{color:var(--accent);text-decoration:none}
 .card:hover{border-color:var(--border2);background:var(--surface2)}
 .card:active{cursor:grabbing}
 .card.dragging{opacity:.4;transform:scale(.97)}
-.card[data-status="backlog"]{border-left-color:var(--text3)}
-.card[data-status="todo"]{border-left-color:var(--accent)}
-.card[data-status="in-progress"]{border-left-color:var(--warning)}
-.card[data-status="in-review"]{border-left-color:var(--purple)}
-.card[data-status="done"]{border-left-color:var(--success)}
-.card[data-status="blocked"]{border-left-color:var(--danger)}
 .card-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
 .card-id{font-family:var(--mono);font-size:11px;color:var(--text3)}
 .card-priority{display:flex;align-items:center}
@@ -107,6 +112,7 @@ a{color:var(--accent);text-decoration:none}
 .pill-points{background:var(--surface2);color:var(--text2);font-family:var(--mono)}
 .pill-epic{color:#fff;font-size:10px;font-weight:600}
 .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;text-transform:capitalize}
+/* Fallback badge styles — overridden by dynamic styles once config loads */
 .badge-backlog{background:var(--surface2);color:var(--text2)}
 .badge-todo{background:var(--accent-dim);color:var(--accent)}
 .badge-in-progress{background:var(--warning-dim);color:var(--warning)}
@@ -212,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,12 +263,20 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
   .panel-props{grid-template-columns:1fr}
 }
 </style>
+<style id="dynamic-styles"></style>
+<link id="custom-theme" rel="stylesheet" href="/mdboard.css">
 </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>
@@ -259,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>
@@ -294,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>
@@ -304,37 +345,45 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 
 <script>
 /* ══════════════════════════════════════════════════════════════
-   ICONS — Linear-style status, priority, and milestone icons
+   ICON SHAPES — SVG generators by icon name
    ══════════════════════════════════════════════════════════════ */
+var ICON_SHAPES = {
+  'dashed-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5" stroke-dasharray="3 2"/></svg>'; },
+  'circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/></svg>'; },
+  'half-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M8 2A6 6 0 0 1 8 14Z" fill="' + c + '"/></svg>'; },
+  'three-quarter-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M8 2A6 6 0 1 1 2 8L8 8Z" fill="' + c + '"/></svg>'; },
+  'check-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="' + c + '"/><path d="M5 8.5L7 10.5L11 5.5" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'; },
+  'x-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5" stroke="' + c + '" stroke-width="1.5" stroke-linecap="round"/></svg>'; },
+  'slash-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M4.5 11.5L11.5 4.5" stroke="' + c + '" stroke-width="1.5" stroke-linecap="round"/></svg>'; }
+};
+
+/* Config-driven maps — populated by initFromConfig() */
+var STATUS_ICON_MAP = {};
+var STATUS_COLOR_MAP = {};
+var ENTITY_NAMES = {};
+
 function statusIcon(status) {
-  switch (status) {
-    case 'backlog':
-      return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#5A5A63" stroke-width="1.5" stroke-dasharray="3 2"/></svg>';
-    case 'todo':
-      return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#8B8B93" stroke-width="1.5"/></svg>';
-    case 'in-progress':
-      return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#D4A72C" stroke-width="1.5"/><path d="M8 2A6 6 0 0 1 8 14Z" fill="#D4A72C"/></svg>';
-    case 'in-review':
-      return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#8B5CF6" stroke-width="1.5"/><path d="M8 2A6 6 0 1 1 2 8L8 8Z" fill="#8B5CF6"/></svg>';
-    case 'done':
-      return '<svg class="icon" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#2EA043"/><path d="M5 8.5L7 10.5L11 5.5" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-    case 'blocked':
-      return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#DA3633" stroke-width="1.5"/><path d="M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5" stroke="#DA3633" stroke-width="1.5" stroke-linecap="round"/></svg>';
-    case 'cancelled':
-      return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#5A5A63" stroke-width="1.5"/><path d="M4.5 11.5L11.5 4.5" stroke="#5A5A63" stroke-width="1.5" stroke-linecap="round"/></svg>';
-    default:
-      return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#5A5A63" stroke-width="1.5" stroke-dasharray="3 2"/></svg>';
+  var entry = STATUS_ICON_MAP[status];
+  if (entry) {
+    var fn = ICON_SHAPES[entry.icon];
+    if (fn) return fn(entry.color);
   }
+  // Fallback: dashed circle
+  return ICON_SHAPES['dashed-circle']('#5A5A63');
 }
 
 function priorityIcon(priority) {
-  var c, n;
-  switch (priority) {
-    case 'urgent': c = '#F97316'; n = 4; break;
-    case 'high': c = '#F97316'; n = 3; break;
-    case 'medium': c = '#D4A72C'; n = 2; break;
-    case 'low': c = '#5B6EF5'; n = 1; break;
-    default: c = '#3A3A40'; n = 0; break;
+  var c = '#3A3A40', n = 0;
+  if (D.config && D.config.priorities) {
+    var entry = D.config.priorities.find(function(p) { return p.key === priority; });
+    if (entry) { c = entry.color; n = entry.bars; }
+  } else {
+    switch (priority) {
+      case 'urgent': c = '#F97316'; n = 4; break;
+      case 'high': c = '#F97316'; n = 3; break;
+      case 'medium': c = '#D4A72C'; n = 2; break;
+      case 'low': c = '#5B6EF5'; n = 1; break;
+    }
   }
   var bars = '';
   for (var i = 0; i < 4; i++) {
@@ -347,13 +396,17 @@ function priorityIcon(priority) {
 }
 
 function milestoneIcon(status) {
+  var msStatuses = D.config && D.config.statuses ? D.config.statuses.milestone : null;
+  var entry = msStatuses ? msStatuses.find(function(s) { return s.key === status; }) : null;
+  var c = entry ? entry.color : '#8B8B93';
+
   switch (status) {
     case 'active':
-      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="none" stroke="#5B6EF5" stroke-width="1.5"/><path d="M8 5L11 8L8 11L5 8Z" fill="#5B6EF5"/></svg>';
+      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="none" stroke="' + c + '" stroke-width="1.5"/><path d="M8 5L11 8L8 11L5 8Z" fill="' + c + '"/></svg>';
     case 'completed':
-      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="#2EA043"/><path d="M5.5 8L7 9.5L10.5 6" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="' + c + '"/><path d="M5.5 8L7 9.5L10.5 6" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>';
     default:
-      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="none" stroke="#8B8B93" stroke-width="1.5"/></svg>';
+      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="none" stroke="' + c + '" stroke-width="1.5"/></svg>';
   }
 }
 
@@ -361,8 +414,9 @@ function milestoneIcon(status) {
    DATA STORE
    ══════════════════════════════════════════════════════════════ */
 var D = {
-  project: null, milestones: [], epics: [], features: [],
-  sprints: [], allSprints: [], metrics: null, health: null, loaded: false
+  config: null, project: null, milestones: [], epics: [], tasks: [],
+  sprints: [], allSprints: [], metrics: null, health: null, loaded: false,
+  sources: [], activeSource: null, overviewLinks: null
 };
 
 /* ── Helpers ─────────────────────────────────────────────── */
@@ -392,6 +446,8 @@ var STATUSES = ['backlog','todo','in-progress','in-review','done','blocked','can
 var PRIORITIES = ['urgent','high','medium','low'];
 var STATUS_LABELS = {backlog:'Backlog',todo:'Todo','in-progress':'In Progress','in-review':'In Review',done:'Done',blocked:'Blocked',cancelled:'Cancelled'};
 var PRIORITY_LABELS = {urgent:'Urgent',high:'High',medium:'Medium',low:'Low'};
+var BOARD_COLS = ['backlog','todo','in-progress','in-review','done'];
+var COMPLETED_STATUS = 'done';
 
 /* ── Toast ───────────────────────────────────────────────── */
 function showToast(msg, type) {
@@ -410,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),
@@ -429,27 +486,283 @@ 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/features'), fetchJson('/api/sprint'), fetchJson('/api/metrics'),
-    fetchJson('/api/health'), fetchJson('/api/sprints')
+    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.features = results[3] || [];
-  if (results[4]) D.sprints = [results[4]];
+  D.tasks = results[3] || [];
+  if (results[4]) D.sprints = [results[4]]; else D.sprints = [];
   D.metrics = results[5]; D.health = results[6];
   D.allSprints = results[7] || [];
+  D.config = results[8];
+  D.sources = results[9] || [];
   D.loaded = true;
 }
 
-function refreshData() { loadAll().then(function() { 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() {
+  if (!D.config) return;
+
+  var cfg = D.config;
+
+  // Derive entity names
+  ENTITY_NAMES = cfg.entities || {};
+
+  // Derive statuses, labels, board columns
+  if (cfg.statuses && cfg.statuses.task) {
+    STATUSES = cfg.statuses.task.map(function(s) { return s.key; });
+    STATUS_LABELS = {};
+    cfg.statuses.task.forEach(function(s) { STATUS_LABELS[s.key] = s.label; });
+  }
+
+  // Build icon/color maps for all status types
+  STATUS_ICON_MAP = {};
+  STATUS_COLOR_MAP = {};
+  if (cfg.statuses) {
+    Object.keys(cfg.statuses).forEach(function(entityType) {
+      cfg.statuses[entityType].forEach(function(s) {
+        if (!STATUS_ICON_MAP[s.key]) {
+          STATUS_ICON_MAP[s.key] = { icon: s.icon || 'dashed-circle', color: s.color || '#5A5A63' };
+          STATUS_COLOR_MAP[s.key] = s.color || '#5A5A63';
+        }
+      });
+    });
+  }
+
+  // Derive priorities
+  if (cfg.priorities) {
+    PRIORITIES = cfg.priorities.map(function(p) { return p.key; });
+    PRIORITY_LABELS = {};
+    cfg.priorities.forEach(function(p) { PRIORITY_LABELS[p.key] = p.label; });
+  }
+
+  // Board columns
+  if (cfg.boardColumns) BOARD_COLS = cfg.boardColumns;
+
+  // Completed status
+  if (cfg.completedStatus) COMPLETED_STATUS = cfg.completedStatus;
+
+  generateDynamicStyles();
+}
+
+function generateDynamicStyles() {
+  var css = '';
+  if (D.config && D.config.statuses && D.config.statuses.task) {
+    D.config.statuses.task.forEach(function(s) {
+      var key = s.key;
+      var color = s.color;
+      css += '.badge-' + key + '{background:' + color + '20;color:' + color + '}\n';
+      css += '.card[data-status="' + key + '"]{border-left-color:' + color + '}\n';
+    });
+  }
+  // Milestone/epic/sprint statuses
+  ['milestone', 'epic', 'sprint'].forEach(function(entityType) {
+    if (D.config && D.config.statuses && D.config.statuses[entityType]) {
+      D.config.statuses[entityType].forEach(function(s) {
+        css += '.badge-' + s.key + '{background:' + s.color + '20;color:' + s.color + '}\n';
+      });
+    }
+  });
+  // Priority badges
+  if (D.config && D.config.priorities) {
+    D.config.priorities.forEach(function(p) {
+      css += '.badge-' + p.key + '{background:' + p.color + '20;color:' + p.color + '}\n';
+    });
+  }
+  var styleEl = document.getElementById('dynamic-styles');
+  if (styleEl) styleEl.textContent = css;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   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 {
     var src = new EventSource('/api/events');
-    src.onmessage = function() { refreshData(); };
+    src.onmessage = function(e) {
+      var data;
+      try { data = JSON.parse(e.data); } catch { data = {}; }
+      if (data.cssReload) {
+        var link = document.getElementById('custom-theme');
+        if (link) link.href = '/mdboard.css?' + Date.now();
+      }
+      refreshData();
+    };
     src.onerror = function() { setTimeout(connectSSE, 5000); src.close(); };
   } catch { /* no SSE support */ }
 }
@@ -457,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'; });
@@ -481,12 +799,15 @@ function renderHeader() {
     document.getElementById('h-sprint-days').textContent = dr !== null ? (dr >= 0 ? dr + ' days left' : Math.abs(dr) + ' days over') : '';
   } else { sw.style.display = 'none'; }
 
-  var total = D.features.length;
-  var done = D.features.filter(function(f) { return f.status === 'done'; }).length;
-  var inProg = D.features.filter(function(f) { return f.status === 'in-progress'; }).length;
+  var taskPlural = ENTITY_NAMES.task ? ENTITY_NAMES.task.plural : 'Tasks';
+  var total = D.tasks.length;
+  var done = D.tasks.filter(function(f) { return f.status === COMPLETED_STATUS; }).length;
+  var inProgStatus = (D.config && D.config.statuses && D.config.statuses.task) ?
+    ((D.config.statuses.task.find(function(s) { return s.icon === 'half-circle'; }) || {}).key || 'in-progress') : 'in-progress';
+  var inProg = D.tasks.filter(function(f) { return f.status === inProgStatus; }).length;
   var vel = D.health && D.health.velocity != null ? D.health.velocity : (total ? Math.round(done / total * 100) : 0);
   document.getElementById('h-stats').innerHTML =
-    '<div class="stat"><span class="stat-val">' + total + '</span><span class="stat-label">Features</span></div>' +
+    '<div class="stat"><span class="stat-val">' + total + '</span><span class="stat-label">' + escHtml(taskPlural) + '</span></div>' +
     '<div class="stat"><span class="stat-val" style="color:var(--success)">' + done + '</span><span class="stat-label">Done</span></div>' +
     '<div class="stat"><span class="stat-val" style="color:var(--warning)">' + inProg + '</span><span class="stat-label">In Progress</span></div>' +
     '<div class="stat"><span class="stat-val" style="color:var(--accent)">' + vel + '%</span><span class="stat-label">Velocity</span></div>';
@@ -495,26 +816,32 @@ function renderHeader() {
 /* ══════════════════════════════════════════════════════════════
    BOARD VIEW
    ══════════════════════════════════════════════════════════════ */
-var BOARD_COLS = ['backlog','todo','in-progress','in-review','done'];
 var boardFilters = { search: '', priority: '', epic: '', milestone: '' };
 
 function renderBoardFilters() {
   var c = document.getElementById('board-filters');
   var ep = [], ms = [];
-  D.features.forEach(function(f) {
+  D.tasks.forEach(function(f) {
     if (f.epic && ep.indexOf(f.epic) === -1) ep.push(f.epic);
     if (f.milestone && ms.indexOf(f.milestone) === -1) ms.push(f.milestone);
   });
 
+  var epicPlural = ENTITY_NAMES.epic ? ENTITY_NAMES.epic.plural : 'Epics';
+  var msPlural = ENTITY_NAMES.milestone ? ENTITY_NAMES.milestone.plural : 'Milestones';
+
   function opts(arr, key, label) {
     return '<select data-filter="' + key + '"><option value="">All ' + label + '</option>' +
       arr.map(function(v) { return '<option value="' + escHtml(v) + '"' + (boardFilters[key] === v ? ' selected' : '') + '>' + escHtml(v) + '</option>'; }).join('') + '</select>';
   }
 
-  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', 'Epics') + opts(ms, 'milestone', 'Milestones');
+    opts(ep, 'epic', epicPlural) + opts(ms, 'milestone', msPlural);
 
   c.querySelectorAll('input[data-filter]').forEach(function(el) {
     el.addEventListener('input', function() { boardFilters[el.dataset.filter] = el.value; renderBoard(); });
@@ -522,10 +849,13 @@ 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 getFilteredBoardFeatures() {
-  var list = D.features.slice();
+function getFilteredBoardTasks() {
+  var list = D.tasks.slice();
   var f = boardFilters;
   if (f.search) { var q = f.search.toLowerCase(); list = list.filter(function(x) { return (x.id || '').toLowerCase().indexOf(q) !== -1 || (x.title || '').toLowerCase().indexOf(q) !== -1; }); }
   if (f.priority) list = list.filter(function(x) { return x.priority === f.priority; });
@@ -558,15 +888,16 @@ function renderBoard() {
     return;
   }
 
-  var filteredFeatures = getFilteredBoardFeatures();
+  var filteredTasks = getFilteredBoardTasks();
+  var taskSingular = ENTITY_NAMES.task ? ENTITY_NAMES.task.singular.toLowerCase() : 'task';
 
-  if (!D.features.length) {
-    board.innerHTML = '<div class="empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 12h6M12 9v6"/></svg><p>No features yet. Create feature files in your project/ directory to get started.</p></div>';
+  if (!D.tasks.length) {
+    board.innerHTML = '<div class="empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 12h6M12 9v6"/></svg><p>No ' + escHtml(taskSingular) + 's yet. Create ' + escHtml(taskSingular) + ' files in your project/ directory to get started.</p></div>';
     return;
   }
 
   board.innerHTML = BOARD_COLS.map(function(status) {
-    var cards = filteredFeatures.filter(function(f) { return f.status === status; });
+    var cards = filteredTasks.filter(function(f) { return f.status === status; });
     return '<div class="column" data-status="' + status + '">' +
       '<div class="column-header"><span class="col-title">' + statusIcon(status) + ' ' + (STATUS_LABELS[status] || status) + '</span><span class="col-count">' + cards.length + '</span></div>' +
       '<div class="column-body">' + cards.map(renderCard).join('') + '</div></div>';
@@ -605,8 +936,8 @@ function setupDragDrop() {
     });
     card.addEventListener('click', function(e) {
       if (e.defaultPrevented) return;
-      var feat = D.features.find(function(f) { return f.id === card.dataset.id; });
-      if (feat) openPanel('features', feat);
+      var task = D.tasks.find(function(f) { return f.id === card.dataset.id; });
+      if (task) openPanel('tasks', task);
     });
   });
 
@@ -624,16 +955,16 @@ function setupDragDrop() {
     col.addEventListener('drop', function(e) {
       e.preventDefault();
       col.classList.remove('drag-over');
-      var featureId = e.dataTransfer.getData('text/plain');
+      var taskId = e.dataTransfer.getData('text/plain');
       var newStatus = col.dataset.status;
-      if (!featureId || !newStatus) return;
+      if (!taskId || !newStatus) return;
 
       // Optimistic update
-      var feat = D.features.find(function(f) { return f.id === featureId; });
-      if (feat && feat.status !== newStatus) {
-        feat.status = newStatus;
+      var task = D.tasks.find(function(f) { return f.id === taskId; });
+      if (task && task.status !== newStatus) {
+        task.status = newStatus;
         renderBoard();
-        patchItem('features', featureId, { status: newStatus });
+        patchItem('tasks', taskId, { status: newStatus });
       }
     });
   });
@@ -654,18 +985,27 @@ var TABLE_COLS = [
 function renderTableControls() {
   var c = document.getElementById('table-controls');
   var ms = [], ep = [], st = [], sp = [];
-  D.features.forEach(function(f) {
+  D.tasks.forEach(function(f) {
     if (f.milestone && ms.indexOf(f.milestone) === -1) ms.push(f.milestone);
     if (f.epic && ep.indexOf(f.epic) === -1) ep.push(f.epic);
     if (f.status && st.indexOf(f.status) === -1) st.push(f.status);
     if (f.sprint && sp.indexOf(f.sprint) === -1) sp.push(f.sprint);
   });
+
+  var msPlural = ENTITY_NAMES.milestone ? ENTITY_NAMES.milestone.plural : 'Milestones';
+  var epicPlural = ENTITY_NAMES.epic ? ENTITY_NAMES.epic.plural : 'Epics';
+  var sprintPlural = ENTITY_NAMES.sprint ? ENTITY_NAMES.sprint.plural : 'Sprints';
+
   function opts(arr, filter, label) {
     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) + '">' +
-    opts(ms, 'milestone', 'Milestones') + opts(ep, 'epic', 'Epics') + opts(st, 'status', 'Statuses') + opts(sp, 'sprint', 'Sprints') +
+  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>';
 
@@ -673,10 +1013,13 @@ 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 getFilteredFeatures() {
-  var list = D.features.slice();
+function getFilteredTasks() {
+  var list = D.tasks.slice();
   var f = tableFilters;
   if (f.search) { var q = f.search.toLowerCase(); list = list.filter(function(x) { return (x.id || '').toLowerCase().indexOf(q) !== -1 || (x.title || '').toLowerCase().indexOf(q) !== -1; }); }
   if (f.milestone) list = list.filter(function(x) { return x.milestone === f.milestone; });
@@ -695,10 +1038,11 @@ function getFilteredFeatures() {
 
 function renderTableBody() {
   var w = document.getElementById('table-wrapper');
+  var taskPlural = ENTITY_NAMES.task ? ENTITY_NAMES.task.plural.toLowerCase() : 'tasks';
   if (!D.loaded) { w.innerHTML = '<div class="loading-container">' + '<div class="skeleton skeleton-line" style="width:100%;height:32px"></div>'.repeat(6) + '</div>'; return; }
-  var features = getFilteredFeatures();
-  if (!features.length) {
-    w.innerHTML = '<div class="empty"><p>' + (D.features.length ? 'No features match filters.' : 'No features yet.') + '</p></div>';
+  var tasks = getFilteredTasks();
+  if (!tasks.length) {
+    w.innerHTML = '<div class="empty"><p>' + (D.tasks.length ? 'No ' + escHtml(taskPlural) + ' match filters.' : 'No ' + escHtml(taskPlural) + ' yet.') + '</p></div>';
     return;
   }
   var html = '<table class="ftable"><thead><tr>';
@@ -707,7 +1051,7 @@ function renderTableBody() {
     html += '<th class="' + (sorted ? 'sorted' : '') + '" data-col="' + c.key + '">' + c.label + '<span class="sort-arrow">' + (sorted ? (tableSort.asc ? '\u25B2' : '\u25BC') : '') + '</span></th>';
   });
   html += '</tr></thead><tbody>';
-  features.forEach(function(f) {
+  tasks.forEach(function(f) {
     var assigned = Array.isArray(f.assigned) ? f.assigned.join(', ') : (f.assigned || '');
     html += '<tr class="clickable-row" data-fid="' + escHtml(f.id || '') + '">' +
       '<td class="td-id">' + escHtml(f.id || '') + '</td>' +
@@ -732,8 +1076,8 @@ function renderTableBody() {
   });
   w.querySelectorAll('.clickable-row').forEach(function(tr) {
     tr.addEventListener('click', function() {
-      var feat = D.features.find(function(f) { return f.id === tr.dataset.fid; });
-      if (feat) openPanel('features', feat);
+      var task = D.tasks.find(function(f) { return f.id === tr.dataset.fid; });
+      if (task) openPanel('tasks', task);
     });
   });
 }
@@ -745,23 +1089,30 @@ 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>' +
-    ['planned','active','completed'].map(function(s) {
-      return '<option value="' + s + '"' + (msFilter.status === s ? ' selected' : '') + '>' + s.charAt(0).toUpperCase() + s.slice(1) + '</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 milestones match filter.' : 'No milestones yet. Create milestone directories under project/milestones/ to get started.') + '</p></div>';
+    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;
   }
 
@@ -773,7 +1124,7 @@ function renderMilestones() {
       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) + ' features &middot; ' + (e.totalPoints || 0) + ' pts</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>' : '') +
@@ -785,7 +1136,7 @@ function renderMilestones() {
       '<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 + ' features</span><span>' + pct + '%</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('');
@@ -814,6 +1165,7 @@ function renderMilestones() {
    ══════════════════════════════════════════════════════════════ */
 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) {
@@ -823,19 +1175,19 @@ function renderMetrics() {
   }).join('') : '<div style="color:var(--text3);padding:8px 0">No milestones.</div>';
 
   var statuses = {};
-  D.features.forEach(function(f) { var s = f.status || 'unknown'; statuses[s] = (statuses[s] || 0) + 1; });
+  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(s) + '</div><div class="health-val">' + statuses[s] + '</div></div>';
+    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.features.forEach(function(f) { var p = f.priority || 'none'; priorities[p] = (priorities[p] || 0) + 1; });
+  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(p) + '</div><div class="health-val">' + priorities[p] + '</div></div>';
+    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 Features</div><div class="health-val">' + (h.totalFeatures || D.features.length) + '</div></div>' +
+  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>';
@@ -848,12 +1200,162 @@ function renderMetrics() {
 }
 
 /* ══════════════════════════════════════════════════════════════
-   DETAIL PANEL — Edit features, epics, milestones
+   CRUD HELPERS
    ══════════════════════════════════════════════════════════════ */
-var panelState = { open: false, type: null, item: null };
+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, 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');
@@ -869,36 +1371,66 @@ function renderPanel() {
   var panel = document.getElementById('detail-panel');
   var t = panelState.type;
   var item = panelState.item;
+  var isCreate = panelState.isCreate;
   if (!item) return;
 
-  var typeLabel = t === 'features' ? 'Feature' : t === 'epics' ? 'Epic' : 'Milestone';
+  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">' + 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">';
 
-  // Status
-  var statusOptions = t === 'features' ? STATUSES : ['planned', 'active', 'completed', 'cancelled'];
-  var statusLabels = t === 'features' ? STATUS_LABELS : { planned: 'Planned', active: 'Active', completed: 'Completed', cancelled: 'Cancelled' };
+  // Status — derived from config
+  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="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 === 'features' || t === 'epics') {
+  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>';
   }
@@ -906,45 +1438,115 @@ function renderPanel() {
   html += '</div>'; // close panel-props
 
   // Type-specific fields
-  if (t === 'features') {
+  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');
@@ -961,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() {
@@ -976,12 +1594,12 @@ async function savePanel() {
   var statusEl = document.getElementById('p-status');
   if (statusEl && statusEl.value !== (item.status || '')) updates.status = statusEl.value;
 
-  if (t === 'features' || t === 'epics') {
+  if (t === 'tasks' || t === 'epics') {
     var priorityEl = document.getElementById('p-priority');
     if (priorityEl && priorityEl.value !== (item.priority || '')) updates.priority = priorityEl.value || null;
   }
 
-  if (t === 'features') {
+  if (t === 'tasks') {
     var pointsEl = document.getElementById('p-points');
     if (pointsEl) {
       var pv = pointsEl.value ? Number(pointsEl.value) : null;
@@ -1020,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) {
@@ -1031,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) {
@@ -1047,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);
@@ -1059,8 +1741,54 @@ window.addEventListener('hashchange', handleHash);
 (async function() {
   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>